fix(deps): update all non-major dependencies

[renovate]

ℹ️ Note

This PR body was truncated due to platform limits.

This PR contains the following updates:

Package	Change	Age	Confidence
@chakra-ui/react (source)	^3.36.1 → ^3.37.0
@​iconify-icons/material-symbols	^1.2.58 → ^1.2.59
@mantine/core (source)	^9.5.1 → ^9.6.0
@mantine/hooks (source)	^9.5.1 → ^9.6.0
@mui/material (source)	^9.3.1 → ^9.4.0
@pmmmwh/react-refresh-webpack-plugin	^0.6.2 → ^0.6.3
@rsbuild/core (source)	^2.1.13 → ^2.2.2
@rsdoctor/rspack-plugin (source)	^1.6.2 → ^1.6.3
@rspack/cli (source)	^2.1.10 → ^2.2.2
@rspack/core (source)	^2.1.10 → ^2.2.2
@rspack/dev-server	2.2.0 → 2.2.1
@swc/core (source)	^1.16.0 → ^1.16.1
@tanstack/react-query (source)	^5.101.4 → ^5.102.8
@types/react-dom (source)	^19.2.4 → ^19.2.5
@utoo/pack-cli (source)	1.5.12 → 1.5.13
@vitejs/plugin-react (source)	^6.0.5 → ^6.1.1
antd (source)	^6.6.0 → ^6.6.2
axios (source)	^1.19.0 → ^1.20.0
dayjs (source)	^1.11.21 → ^1.11.23
element-plus (source)	^2.14.4 → ^2.14.5
i18next (source)	^26.3.6 → ^26.4.0
immer	^11.1.16 → ^11.1.18
jotai	^2.20.2 → ^2.20.3
ky	^2.0.2 → ^2.1.0
lucide-react (source)	^1.31.0 → ^1.38.0
naive-ui (source)	^2.44.1 → ^2.45.3
pnpm (source)	11.21.0 → 11.25.0
primereact	^10.9.8 → ^10.9.9
react-hook-form (source)	^7.85.0 → ^7.87.0
react-i18next	^17.0.11 → ^17.0.12
react-router-dom (source)	^7.18.2 → ^7.18.3
remeda (source)	^2.40.0 → ^2.45.0
rolldown (source)	^1.2.4 → ^1.2.6
rollup (source)	^4.62.4 → ^4.63.1
rsuite (source)	^6.2.2 → ^6.2.4
solid-js (source)	^1.9.14 → ^1.9.15
styled-components (source)	^6.5.2 → ^6.5.3
vant (source)	^4.10.0 → ^4.10.2
vite (source)	^8.2.1 → ^8.2.2
vue (source)	^3.5.41 → ^3.5.42
vue-i18n (source)	^11.4.8 → ^11.4.10
vue-router (source)	^5.2.0 → ^5.3.0
vuetify (source)	^4.1.9 → ^4.1.12
webpack	^5.109.2 → ^5.110.2
webpack-cli (source)	^7.2.2 → ^7.2.3
xstate (source)	^5.32.5 → ^5.32.6
zod (source)	^4.4.3 → ^4.5.4

---

Release Notes

chakra-ui/chakra-ui (@​chakra-ui/react)

v3.37.0

Compare Source

Minor Changes

• #​10877
  afc8b48
  Thanks @​kalisaNkevin! - [New]
  DateInput: Add a segmented date field for typing dates without a calendar.

  import { DateInput } from "@chakra-ui/react"

  <DateInput.Root>
    <DateInput.Label />
    <DateInput.Control>
      <DateInput.Segments />
    </DateInput.Control>
    <DateInput.HiddenInput />
  </DateInput.Root>

  Each part of the date is its own keyboard-navigable segment, ordered and
  formatted by locale. Supports selectionMode="range", min/max, and
  granularity with formatter for time-only input.

• #​10939
  7b027d4
  Thanks @​segunadebayo! - - Accordion,
  Collapsible, Dialog, Drawer, TreeView: Add hideMode to choose how content
  that stays mounted is hidden when closed. The default, "display-none", uses
  the hidden attribute and keeps effects running, so a video keeps playing and
  a subscription stays open while closed. "activity" uses React 19 Activity
  to pause those effects instead.

  <Dialog.Root hideMode="activity" />

  It only applies while the content stays mounted. unmountOnExit removes the
  tree on close, so hideMode never runs.

  • Dialog, Drawer: Add data-autofocus and data-no-autofocus to pick
    what gets focus when the overlay opens, without reaching for
    initialFocusEl and a ref. Mark chrome like the close button to skip it, or
    mark the real target directly.

    <Dialog.Content>
      <Dialog.CloseTrigger data-no-autofocus />
      <input data-autofocus />
      <button>Save</button>
    </Dialog.Content>

    Focus goes to initialFocusEl, then [data-autofocus], then the first
    tabbable element without [data-no-autofocus], then the content root.

  • NumberInput: Add largeStep and smallStep for keyboard stepping. Hold
    Shift for largeStep, Alt for smallStep. They default to 10 * step
    and step / 10, which is what the arrow keys already did, so existing
    inputs behave the same until you set them.

    <NumberInput.Root step={1} largeStep={20} smallStep={0.5} />

  • Slider: Add largeStep, applied on Shift and on PageUp/PageDown.
    Defaults to 10 * step, matching the previous behavior.

  • FocusTrap: Add persistentElements to keep portalled content inside the
    trap when it isn't reachable through aria-controls or aria-expanded.
    Pass getters so the elements resolve lazily, after they mount.

    <FocusTrap
      persistentElements={[() => document.getElementById("toast-region")]}
    />

  • Toast: createToaster now takes a content type parameter, so title
    and description can be something other than ReactNode. It still defaults
    to ReactNode.

    interface Content {
      id: string
      text: string
    }
    
    const toaster = createToaster<Content>({ placement: "top-end" })
    toaster.create({ title: { id: "save", text: "Saved" } })

• #​10676
  8af2836
  Thanks @​isBatak! - createOverlay: Add a
  TReturn generic so awaiting open() returns the value passed to close()
  instead of any.

  interface DialogResult {
    message: string
  }
  
  const dialog = createOverlay<DialogProps, DialogResult>(Component)
  
  const result = await dialog.open("id", props)
  if (result) {
    console.log(result.message)
  }

  TReturn defaults to unknown, so untyped open() calls may need narrowing
  now. The result can also be undefined, since close(id, value) doesn't
  require a value.

• #​10949
  1f28ce9
  Thanks @​Adebesin-Cell! - Updated Ark UI
  to v5.39.0

  Relevant additions and improvements:

  • Overlays & Collapsible: New hideMode prop controls how kept-mounted
    content is hidden when closed ('display-none' or 'activity' for
    React 19)

    Affects Dialog, Drawer, Popover, Accordion, TreeView, and related
    components

  • Number Input & Slider: Added configurable keyboard stepping with
    largeStep and smallStep props for Number Input, and largeStep for
    Slider

  • Dialog & Drawer: New data-autofocus and data-no-autofocus attributes
    for managing focus when overlays open

  • Focus Trap: Added persistentElements option to treat portalled content
    as part of the trap

  • Presence: New onEnterComplete callback for when enter animations
    finish (mirrors existing onExitComplete)

    Affects Color Picker, Combobox, Date Picker, Dialog, Drawer, Floating
    Panel, Hover Card, Menu, Popover, Select, Tooltip, and Tour

  • Date Input & Date Picker: Improved locale support for native numerals,
    better constraint handling, and timezone fixes

  • Select, Menu, Combobox, Listbox: Fixed keyboard navigation issues and
    hover highlight behavior

  • Various fixes: Fieldset re-rendering loops, Next.js 15 production
    builds, Escape dismissal timing, focus visible state, form submission
    handling, and more

Patch Changes

• #​10951
  c16188f
  Thanks @​dfedoryshchev! - - Fix
  Dialog.ActionTrigger and Drawer.ActionTrigger ignoring the onClick
  handler passed to them. The handler now runs before the dialog closes

• #​10939
  7b027d4
  Thanks @​segunadebayo! - - Fix Next.js 15
  production builds failing to compile with
  Attempted import error: 'Activity' is not exported from 'react'. React's
  optional Activity export was imported statically, so webpack rejected it
  even on React versions that expose it at runtime. It now resolves at runtime
  and falls back to display-none when the React build doesn't expose it

  • Menu: Fix Menu.ContextTrigger flashing at the top-left corner on the
    first right-click, and long-press context menus on touch opening stuck at
    (0,0). The positioner reported a placement before one had been computed,
    which skipped the off-screen guard that hides it until the anchor point is
    known. Long-press had a second cause, it never triggered a reposition on
    open
  • Dialog, Drawer, Menu, Popover: Fix Escape being ignored right after an
    overlay opens. Handlers registered a frame late, so the overlay was painted
    and focus-trapped before it could listen. Under CPU load that gap grew well
    past one frame and swallowed the keypress
  • Dialog, Drawer, Popover: Fix a closing overlay pulling focus back from
    an element your app focused in the meantime, such as a second dialog opened
    right after closing the first. Closing a nested overlay no longer throws
    when the outer container has no connected focusable element, and the focus
    ring now shows on the returned-to element after you close with Escape
  • Dialog, Drawer: Fix the page still scrolling behind an open overlay on
    layouts where <html> is the scroll container. The scroll lock targeted
    <body>, so nothing was locked
  • Popover: Fix tabbing out of portalled content looping back into the
    content when the trigger was the last tabbable element on the page. Focus
    now moves to the next tabbable element after the trigger
  • Combobox, Listbox, Menu, Select: Fix keyboard navigation losing or
    moving the highlighted item while the pointer rests over scrollable content.
    Scrolling an item into view moved the content under the cursor, and the
    resulting pointerleave counted as a real hover
  • DateInput
    • Fix segment text lagging a keystroke behind when you type over an already
      committed date, and in-progress edits being dropped while focus caught up
      after auto-advance. Fast typing and ArrowUp/ArrowDown/Home/End now
      land on the segment you're editing
    • Fix CalendarDate and CalendarDateTime values shifting by your local
      UTC offset when you pass a custom formatter without a timeZone. A
      wall-clock value round-trips unchanged
    • Accept your locale's native numerals when typing, not just ASCII digits.
      Covers Arabic-Indic ٠-٩ and Devanagari ०-९
  • DatePicker
    • Fix minView, maxView, and defaultView being ignored when resolving
      the initial view, which was hardcoded to day through year
    • Fix defaultOpen overriding open, which let a controlled picker open
      against its own prop
    • Fix disabled and read-only pickers still reacting to cell clicks, the
      clear trigger, and presets. Read-only pickers keep roving-focus
      navigation, disabled pickers drop out of the tab order
    • Fix maxSelectedDates not being enforced on month and year cells in
      multiple mode
    • Fix keyboard range selection drifting from pointer behavior. Picking a
      third date restarts the range, and reopening with only a start date
      resumes it instead of restarting
    • Fix translations requiring every message. It's now Partial, so you can
      override one message and let the rest fall back to the defaults
    • Fix the view trigger's aria-label naming the wrong view, and announce
      dates inside a range as "In range" instead of the generic "Choose"
    • Accept your locale's native numerals when typing, not just ASCII digits
  • NumberInput
    • Fix api.setValue throwing when you pass a number and formatOptions is
      set
    • Fix Cmd/Ctrl with arrow keys producing values off the step grid
  • Slider: Fix Cmd/Ctrl with arrow keys producing values off the step
    grid
  • TagsInput
    • Fix an XSS vector in the hidden element that measures input width. It set
      the tag value with innerHTML, so a value containing markup was parsed
      and could execute. It now uses textContent
    • Fix native form submit so FormData reflects the current tags. The hidden
      input kept its initial value after you added, removed, or cleared tags
  • Checkbox, RadioGroup, Switch: Fix clicking a label adding
    data-focus-visible to the control. Activating the label briefly moved
    focus to an overlay container, which was read as virtual focus
  • Fieldset: Fix Fieldset.Root re-rendering whenever its subtree mutated,
    even when helper and error text were unchanged
  • FloatingPanel: Fix closing a panel leaving it on the stack, so the next
    panel now becomes topmost, and fix stack order not applying to the
    positioner, so focusing a panel raises it above its siblings
  • QrCode: Fix getDataUrl() and the download trigger dropping the
    overlay, so a logo or badge placed over the code went missing from the
    export
  • Toast: Fix a height flicker when expanding the stack in overlap mode.
    Heights are measured without the scale transform applied
  • ColorPicker: Fix the channel input committing a partial value when you
    press Enter to confirm an IME composition
  • Splitter
    • Fix collapsed panels sizing to minSize instead of collapsedSize, and
      fix keyboard resizing breaking when a resize trigger got focus while
      hovered
    • Fix the resize trigger matching :focus-visible after a pointer drag. It
      still takes focus, so keyboard resizing keeps working, but no longer shows
      the focus ring
  • Steps
    • Fix Steps.NextTrigger and Steps.PrevTrigger submitting an ancestor
      form on click. They carried no type, so they defaulted to
      type="submit"
    • Fix Steps.RootProvider rendering its children twice
  • Marquee: Fix scroll speed depending on content width. Duration now comes
    from the content size and the actual translation distance, so speed
    matches real pixel speed even when the content is narrower than the viewport

• #​10908
  c6516a1
  Thanks @​akahoshi1421! - - Fix
  Tag.CloseTrigger, ActionBar.SelectionTrigger, Dialog.ActionTrigger,
  Drawer.ActionTrigger missing type="button", causing unintended form
  submission when used inside a <form>

• #​10919
  76bb1dc
  Thanks @​Aditya30december2003! - Fix
  semantic i and em elements not rendering in italics when preflight is
  enabled.

• 065f71c
  Thanks @​segunadebayo! - - Fix TreeView
--tree-indentation: 0px not fully removing nested indentation

  • --tree-indentation is now the full per-level indent
    (indent-size + half icon-size). Custom non-zero values no longer get an
    extra half-icon offset on top
  • Remove internal --tree-icon-offset variable from the recipe

• #​10938
  6948541
  Thanks @​waterWang! - - RadioCard: Fix the
  outline variant losing its border width when a card is both checked and
  disabled. The checked ring is an inset box-shadow, which itemControl's
  disabled background painted over

mantinedev/mantine (@​mantine/core)

v9.6.0

Compare Source

View changelog with demos on mantine.dev website

Support Mantine development

You can now sponsor Mantine development with OpenCollective.
All funds are used to improve Mantine and create new features and components.

@​mantine/lightbox package

New @​mantine/lightbox package – a full-screen media lightbox with carousel navigation,
zoom, thumbnails, toolbar customization, and store-based API. Supports image, video, and custom slides:

import '@mantine/lightbox/styles.css';
import { useState } from 'react';
import { Image, SimpleGrid } from '@mantine/core';
import { Lightbox, LightboxSlideData } from '@mantine/lightbox';

const images = [
  'https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-1.png',
  'https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-2.png',
  'https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-3.png',
  'https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-4.png',
  'https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/images/bg-5.png',
];

const slides: LightboxSlideData[] = images.map((src) => ({ src }));

function Demo() {
  const [opened, setOpened] = useState(false);
  const [index, setIndex] = useState(0);

  return (
    <>
      <Lightbox
        opened={opened}
        onClose={() => setOpened(false)}
        slides={slides}
        currentIndex={index}
        onIndexChange={setIndex}
      />

      <SimpleGrid cols={3}>
        {images.map((src, i) => (
          <Image
            key={src}
            src={src}
            radius="md"
            style={{ cursor: 'pointer' }}
            onClick={() => {
              setIndex(i);
              setOpened(true);
            }}
          />
        ))}
      </SimpleGrid>
    </>
  );
}

Key features:

• Zoom – click to zoom on desktop, double-tap on mobile, scroll wheel and pinch gestures
• Thumbnails – bottom thumbnail strip with active indicator
• Store API – mount once, open from anywhere (same pattern as Spotlight and Notifications)
• Video slides – native video player with auto-pause on navigation
• Custom slides – render anything with custom thumbnails
• Transitions – animated open and close with configurable transitionProps (same API as Modal)
• Keyboard shortcuts – Escape, arrows, F/T/Z for fullscreen/thumbnails/zoom
• Localization – every string is defined in the labels prop

Notifications custom rendering

Notifications now support renderNotification prop that allows you to completely
replace the default notification with custom content. All animations (enter, exit, drag dismiss)
are preserved for custom notifications:

import { Avatar, Button, Group, rem, Text } from '@mantine/core';
import { notifications } from '@mantine/notifications';

function Demo() {
  return (
    <Group justify="center">
      <Button
        onClick={() =>
          notifications.show({
            autoClose: false,
            renderNotification: (notification) => (
              <div
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  gap: rem(12),
                  padding: rem(16),
                  borderRadius: rem(8),
                  backgroundColor: 'var(--mantine-color-body)',
                  border: '1px solid var(--mantine-color-default-border)',
                  boxShadow: 'var(--mantine-shadow-lg)',
                  userSelect: 'none',
                }}
              >
                <Avatar src={null} radius="xl" color="blue">
                  DM
                </Avatar>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <Text size="sm" fw={600}>
                    Dan sent you a message
                  </Text>
                  <Text size="xs" c="dimmed" lineClamp={1}>
                    Hey, are you free for a quick call?
                  </Text>
                  <Group gap="xs" mt={8}>
                    <Button
                      size="compact-xs"
                      variant="filled"
                      onClick={() =>
                        notifications.hide(notification.id!)
                      }
                    >
                      Reply
                    </Button>
                    <Button
                      size="compact-xs"
                      variant="default"
                      onClick={() =>
                        notifications.hide(notification.id!)
                      }
                    >
                      Dismiss
                    </Button>
                  </Group>
                </div>
              </div>
            ),
            message: '',
          })
        }
      >
        Show custom notification
      </Button>
    </Group>
  );
}

Notifications stacked layout

Notifications now support layout="stacked" prop that displays notifications in a stacked
layout where only the latest notification is fully visible, and older notifications peek out behind it:

import { Button, Group } from '@mantine/core';
import { Notifications, notifications } from '@mantine/notifications';

function Demo() {
  return (
    <>
      {/* Replace your existing Notifications with layout="stacked" */}
      <Notifications layout="stacked" />
      <Group justify="center">
        <Button
          onClick={() => {
            notifications.show({
              title: 'New notification',
              message: 'This notification is part of a stacked layout',
            });
          }}
        >
          Show stacked notification
        </Button>
      </Group>
    </>
  );
}

ActionBar component

New ActionBar component – a fixed-position bottom bar
for bulk selection actions. Designed to be controlled by table or checkbox
selections, it provides a set of actions that can be performed on selected items.

import { useState } from 'react';
import { ActionBar, Button, Checkbox, Table, Text } from '@mantine/core';

const elements = [
  { position: 6, mass: 12.011, symbol: 'C', name: 'Carbon' },
  { position: 7, mass: 14.007, symbol: 'N', name: 'Nitrogen' },
  { position: 39, mass: 88.906, symbol: 'Y', name: 'Yttrium' },
  { position: 56, mass: 137.33, symbol: 'Ba', name: 'Barium' },
  { position: 58, mass: 140.12, symbol: 'Ce', name: 'Cerium' },
];

function Demo() {
  const [selection, setSelection] = useState<number[]>([]);

  const toggleRow = (position: number) =>
    setSelection((current) =>
      current.includes(position)
        ? current.filter((item) => item !== position)
        : [...current, position]
    );

  const toggleAll = () =>
    setSelection((current) =>
      current.length === elements.length ? [] : elements.map((element) => element.position)
    );

  const rows = elements.map((element) => (
    <Table.Tr
      key={element.position}
      bg={selection.includes(element.position) ? 'var(--mantine-color-blue-light)' : undefined}
    >
      <Table.Td>
        <Checkbox
          aria-label="Select row"
          checked={selection.includes(element.position)}
          onChange={() => toggleRow(element.position)}
        />
      </Table.Td>
      <Table.Td>{element.position}</Table.Td>
      <Table.Td>{element.name}</Table.Td>
      <Table.Td>{element.symbol}</Table.Td>
      <Table.Td>{element.mass}</Table.Td>
    </Table.Tr>
  ));

  return (
    <>
      <Table>
        <Table.Thead>
          <Table.Tr>
            <Table.Th>
              <Checkbox
                aria-label="Select all"
                checked={selection.length === elements.length}
                indeterminate={selection.length > 0 && selection.length !== elements.length}
                onChange={toggleAll}
              />
            </Table.Th>
            <Table.Th>Element position</Table.Th>
            <Table.Th>Element name</Table.Th>
            <Table.Th>Symbol</Table.Th>
            <Table.Th>Atomic mass</Table.Th>
          </Table.Tr>
        </Table.Thead>
        <Table.Tbody>{rows}</Table.Tbody>
      </Table>

      <ActionBar opened={selection.length > 0} onClose={() => setSelection([])} shadow="md">
        <Text size="sm">{selection.length} selected</Text>
        <ActionBar.Divider />
        <Button variant="default" size="compact-sm">
          Delete
        </Button>
        <Button variant="default" size="compact-sm">
          Move
        </Button>
        <Button variant="default" size="compact-sm">
          Archive
        </Button>
        <ActionBar.CloseButton />
      </ActionBar>
    </>
  );
}

RichTextEditor table controls

RichTextEditor now includes a set of controls for editing tables. Install and register the
Tiptap table extension (TableKit), then add
the controls to the toolbar. RichTextEditor.TableInsert opens a grid to pick the table size, and the
other controls add/remove rows and columns, toggle header row/column and merge/split cells. All table
controls are automatically disabled when the cursor is not inside a table:

import { TableKit } from '@tiptap/extension-table';
import { useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { RichTextEditor } from '@mantine/tiptap';

function Demo() {
  const editor = useEditor({
    extensions: [StarterKit, TableKit],
    content: `
      <table>
        <tbody>
          <tr><th><p>Framework</p></th><th><p>Language</p></th></tr>
          <tr><td><p>Mantine</p></td><td><p>TypeScript</p></td></tr>
          <tr><td><p>Tiptap</p></td><td><p>TypeScript</p></td></tr>
        </tbody>
      </table>
      <p></p>
`,
  });

  return (
    <RichTextEditor editor={editor}>
      <RichTextEditor.Toolbar sticky>
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.TableInsert />
          <RichTextEditor.TableDelete />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.TableColumnBefore />
          <RichTextEditor.TableColumnAfter />
          <RichTextEditor.TableColumnDelete />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.TableRowBefore />
          <RichTextEditor.TableRowAfter />
          <RichTextEditor.TableRowDelete />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.TableToggleHeaderRow />
          <RichTextEditor.TableToggleHeaderColumn />
          <RichTextEditor.TableMergeCells />
          <RichTextEditor.TableSplitCell />
        </RichTextEditor.ControlsGroup>
      </RichTextEditor.Toolbar>

      <RichTextEditor.Content />
    </RichTextEditor>
  );
}

RichTextEditor Details control

RichTextEditor now supports collapsible sections. Install and register the
Tiptap details extension (Details,
DetailsSummary and DetailsContent), then add RichTextEditor.Details to the toolbar. The control
wraps the current block in a collapsible details node, or removes it when the cursor is already inside
one:

import { Details, DetailsSummary, DetailsContent } from '@tiptap/extension-details';
import { useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { RichTextEditor } from '@mantine/tiptap';

function Demo() {
  const editor = useEditor({
    extensions: [StarterKit, Details, DetailsSummary, DetailsContent],
    content: `
      <details>
        <summary>Shipping and delivery</summary>
        <p>Orders are processed within 1–2 business days and delivered in 3–5 business days.</p>
      </details>
      <details>
        <summary>Returns and refunds</summary>
        <p>You can return any item within 30 days of delivery for a full refund.</p>
      </details>
      <p></p>
`,
  });

  return (
    <RichTextEditor editor={editor}>
      <RichTextEditor.Toolbar sticky>
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Bold />
          <RichTextEditor.Italic />
          <RichTextEditor.Underline />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Details />
        </RichTextEditor.ControlsGroup>
      </RichTextEditor.Toolbar>

      <RichTextEditor.Content />
    </RichTextEditor>
  );
}

To support the control, Typography now styles details and summary elements –
a border, padding and a custom disclosure triangle. This applies to all details elements inside
Typography, not just those created by the editor. All of the new selectors have zero specificity
(:where()), so they can be overridden without !important.

RichTextEditor InvisibleCharacters control

RichTextEditor can now display formatting marks. Install and register the
Tiptap invisible characters extension,
then add RichTextEditor.InvisibleCharacters to the toolbar. The control toggles the visibility of
spaces, paragraph breaks and hard breaks, and reflects the current visibility as its active state:

import InvisibleCharacters from '@tiptap/extension-invisible-characters';
import { useEditor } from '@tiptap/react';
import StarterKit from '@tiptap/starter-kit';
import { RichTextEditor } from '@mantine/tiptap';

function Demo() {
  const editor = useEditor({
    extensions: [StarterKit, InvisibleCharacters.configure({ visible: false })],
    content: `
      <p>Toggle the control to reveal spaces and paragraph breaks.</p>
      <p>Each space becomes a dot and every paragraph ends with a pilcrow.</p>
`,
  });

  return (
    <RichTextEditor editor={editor}>
      <RichTextEditor.Toolbar sticky>
        <RichTextEditor.ControlsGroup>
          <RichTextEditor.Bold />
          <RichTextEditor.Italic />
          <RichTextEditor.Underline />
        </RichTextEditor.ControlsGroup>

        <RichTextEditor.ControlsGroup>
          <RichTextEditor.InvisibleCharacters />
        </RichTextEditor.ControlsGroup>
      </RichTextEditor.Toolbar>

      <RichTextEditor.Content />
    </RichTextEditor>
  );
}

GaugeChart component

New GaugeChart component – a radial gauge chart for KPI and status display.
Supports threshold sections, target marker, custom labels, and configurable arc angles.

import { GaugeChart } from '@mantine/charts';

function Demo() {
  return <GaugeChart value={72} size={200} thickness={12} />;
}

WaffleChart component

New WaffleChart component – a part-to-whole grid chart with colored cells.
Simpler and more compact alternative to pie/donut charts for displaying percentages and proportions.

// Demo.tsx
import { WaffleChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <WaffleChart data={data} />;
}

// data.ts
import { WaffleChartCell } from '@mantine/charts';

export const data: WaffleChartCell[] = [
  { name: 'Chrome', value: 65, color: 'blue' },
  { name: 'Safari', value: 19, color: 'teal' },
  { name: 'Firefox', value: 10, color: 'orange' },
  { name: 'Other', value: 6, color: 'gray' },
];

MatrixChart component

New MatrixChart component – a generic x/y heatmap with categorical axes.
Each cell is colored based on a value, useful for visualizing patterns in two-dimensional categorical data.

// Demo.tsx
import { MatrixChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <MatrixChart
      data={data}
      yLabels={['James', 'Mary', 'Robert', 'Linda', 'Michael', 'Sarah', 'David', 'Emma']}
      withYLabels
      withTooltip
      getTooltipLabel={({ x, y, value }) =>
        `${y}, Mar ${x}: ${value === null ? 'No contributions' : `${value} contribution${value > 1 ? 's' : ''}`}`
      }
    />
  );
}

// data.ts
import { MatrixChartCell } from '@mantine/charts';

export const data: MatrixChartCell[] = [
  { x: '1', y: 'James', value: 7 },
  { x: '2', y: 'James', value: 10 },
  { x: '3', y: 'James', value: 2 },
  { x: '4', y: 'James', value: 10 },
  { x: '5', y: 'James', value: 8 },
  { x: '6', y: 'James', value: null },
  { x: '7', y: 'James', value: null },
  { x: '8', y: 'James', value: 6 },
  { x: '9', y: 'James', value: 2 },
  { x: '10', y: 'James', value: 8 },
  { x: '11', y: 'James', value: 1 },
  { x: '12', y: 'James', value: 3 },
  { x: '13', y: 'James', value: 7 },
  { x: '14', y: 'James', value: null },
  { x: '15', y: 'James', value: 9 },
  { x: '16', y: 'James', value: 10 },
  { x: '17', y: 'James', value: null },
  { x: '18', y: 'James', value: 1 },
  { x: '19', y: 'James', value: 8 },
  { x: '20', y: 'James', value: null },
  { x: '21', y: 'James', value: null },
  { x: '22', y: 'James', value: 5 },
  { x: '23', y: 'James', value: 8 },
  { x: '24', y: 'James', value: 2 },
  { x: '25', y: 'James', value: 5 },
  { x: '26', y: 'James', value: 6 },
  { x: '27', y: 'James', value: null },
  { x: '28', y: 'James', value: null },
  { x: '29', y: 'James', value: 7 },
  { x: '30', y: 'James', value: 7 },
  { x: '31', y: 'James', value: 6 },
  { x: '1', y: 'Mary', value: 3 },
  { x: '2', y: 'Mary', value: 1 },
  // ... remaining data
];

CandlestickChart component

New CandlestickChart component – a financial OHLC chart that displays
open, high, low and close values as candles. Candles are colored based on their direction, the wick
shows the high–low range and the body shows the open–close range. Supports custom colors, data keys,
reference lines, axis labels, tooltip labels and value formatting.

// Demo.tsx
import { CandlestickChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return <CandlestickChart h={300} data={data} dataKey="date"  tickLine="y" gridAxis="x" withXAxis={true} withYAxis={true} withTooltip={true} />;
}

// data.ts
export const data = [
  { date: 'Mar 01', open: 136, high: 142, low: 133, close: 140 },
  { date: 'Mar 02', open: 140, high: 145, low: 138, close: 139 },
  { date: 'Mar 03', open: 139, high: 141, low: 129, close: 131 },
  { date: 'Mar 04', open: 131, high: 134, low: 124, close: 125 },
  { date: 'Mar 05', open: 125, high: 133, low: 124, close: 132 },
  { date: 'Mar 06', open: 132, high: 138, low: 131, close: 137 },
  { date: 'Mar 07', open: 137, high: 137, low: 128, close: 129 },
  { date: 'Mar 08', open: 129, high: 135, low: 127, close: 134 },
  { date: 'Mar 09', open: 134, high: 148, low: 133, close: 146 },
  { date: 'Mar 10', open: 146, high: 152, low: 144, close: 151 },
  { date: 'Mar 11', open: 151, high: 154, low: 143, close: 145 },
  { date: 'Mar 12', open: 145, high: 149, low: 142, close: 148 },
  { date: 'Mar 13', open: 148, high: 156, low: 147, close: 155 },
  { date: 'Mar 14', open: 155, high: 158, low: 150, close: 152 },
  { date: 'Mar 15', open: 152, high: 153, low: 141, close: 143 },
  { date: 'Mar 16', open: 143, high: 147, low: 139, close: 146 },
  { date: 'Mar 17', open: 146, high: 160, low: 145, close: 159 },
  { date: 'Mar 18', open: 159, high: 164, low: 156, close: 157 },
  { date: 'Mar 19', open: 157, high: 162, low: 153, close: 161 },
  { date: 'Mar 20', open: 161, high: 168, low: 160, close: 166 },
];

Charts reference areas

AreaChart, BarChart, LineChart,
CompositeChart and ScatterChart now support the
referenceAreas prop that highlights a rectangular region of the plot – a weekend band, a target
range, a threshold zone and similar annotations. Each area is bounded by x1/x2 and/or y1/y2
data values (omit one pair to span the full opposite axis) and supports a theme color and a label.

// Demo.tsx
import { AreaChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <AreaChart
      h={300}
      data={data}
      dataKey="date"
      type="stacked"
      series={[
        { name: 'Apples', color: 'indigo.6' },
        { name: 'Oranges', color: 'blue.6' },
        { name: 'Tomatoes', color: 'teal.6' },
      ]}
      referenceAreas={[
        { x1: 'Mar 23', x2: 'Mar 25', color: 'red.6', label: 'Weekend' },
      ]}
    />
  );
}

// data.ts
export const data = [
  {
    date: 'Mar 22',
    Apples: 2890,
    Oranges: 2338,
    Tomatoes: 2452,
  },
  {
    date: 'Mar 23',
    Apples: 2756,
    Oranges: 2103,
    Tomatoes: 2402,
  },
  {
    date: 'Mar 24',
    Apples: 3322,
    Oranges: 986,
    Tomatoes: 1821,
  },
  {
    date: 'Mar 25',
    Apples: 3470,
    Oranges: 2108,
    Tomatoes: 2809,
  },
  {
    date: 'Mar 26',
    Apples: 3129,
    Oranges: 1726,
    Tomatoes: 2290,
  },
];

Charts reference dots

AreaChart, BarChart, LineChart,
CompositeChart and ScatterChart now support the
referenceDots prop that marks individual points on the plot – a peak, an event, a record value or an
anomaly. Each dot is positioned by x/y data coordinates and supports a radius, a theme color and a
label. Reference dots are rendered on top of the chart series.

// Demo.tsx
import { AreaChart } from '@mantine/charts';
import { data } from './data';

function Demo() {
  return (
    <AreaChart
      h={300}
      data={data}
      dataKey="date"
      series={[
        { name: 'Apples', color: 'indigo.6' },
        { name: 'Oranges', color: 'blue.6' },
        { name: 'Tomatoes', color: 'teal.6' },
      ]}
      referenceDots={[
        { x: 'Mar 25', y: 3470, color: 'red.6', label: 'Peak' },
      ]}
    />
  );
}

// data.ts
export const data = [
  {
    date: 'Mar 22',
    Apples: 2890,
    Oranges: 2338,
    Tomatoes: 2452,
  },
  {
    date: 'Mar 23',
    Apples: 2756,
    Ora

> ✂ **Note**
> 
> PR body was truncated to here.


</details>

---

### Configuration

📅 **Schedule**: (in timezone Asia/Shanghai)

- Branch creation
  - Between 12:00 AM and 03:59 AM, on day 1 and 15 of the month (`* 0-3 1,15 * *`)
- Automerge
  - At any time (no schedule defined)

🚦 **Automerge**: Enabled.

♻ **Rebasing**: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

👻 **Immortal**: This PR will be recreated if closed unmerged. Get [config help](https://redirect.github.com/renovatebot/renovate/discussions) if that's undesired.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box

---

This PR was generated by [Mend Renovate](https://mend.io/renovate/). View the [repository job log](https://developer.mend.io/github/rstackjs/build-tools-performance).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0NC40OS4wIiwidXBkYXRlZEluVmVyIjoiNDQuNDkuMCIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOltdfQ==-->