@mantine/core 9.5.1 → 9.6.0

package/lib/components/Tooltip/TooltipGroup/TooltipGroup.d.ts

@@ -11,7 +11,7 @@ export interface TooltipGroupProps {
     /** Close delay in ms */
     closeDelay?: number;
 }
-export declare function TooltipGroup(props: TooltipGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function TooltipGroup(props: TooltipGroupProps): import("react").JSX.Element;
 export declare namespace TooltipGroup {
     var displayName: string;
     var extend: (c: ExtendComponent<TooltipGroupFactory>) => MantineThemeComponent;

package/lib/components/Transition/Transition.d.ts

@@ -35,7 +35,7 @@ export interface TransitionProps {
     exitDelay?: number;
 }
 export type TransitionOverride = Partial<Omit<TransitionProps, 'mounted'>>;
-export declare function Transition({ keepMounted, keepMountedMode, transition, duration, exitDuration, mounted, children, timingFunction, onExit, onEntered, onEnter, onExited, enterDelay, exitDelay, }: TransitionProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Transition({ keepMounted, keepMountedMode, transition, duration, exitDuration, mounted, children, timingFunction, onExit, onEntered, onEnter, onExited, enterDelay, exitDelay, }: TransitionProps): import("react").JSX.Element | null;
 export declare namespace Transition {
     var displayName: string;
 }

package/lib/components/Tree/FlatTreeNode.d.ts

@@ -32,4 +32,4 @@ export interface FlatTreeNodeProps {
      * When provided and the tree root has `data-with-lines`, connector lines are rendered. */
     linesPath?: FlatTreeLineState[];
 }
-export declare const FlatTreeNode: import("react").MemoExoticComponent<({ node, level, parent, hasChildren, expanded, tree, expandOnClick, selectOnClick, expandOnSpace, checkOnSpace, renderNode, style, tabIndex, linesPath, }: FlatTreeNodeProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const FlatTreeNode: import("react").MemoExoticComponent<({ node, level, parent, hasChildren, expanded, tree, expandOnClick, selectOnClick, expandOnSpace, checkOnSpace, renderNode, style, tabIndex, linesPath, }: FlatTreeNodeProps) => import("react").JSX.Element>;

package/lib/components/Tree/Tree.d.ts

@@ -1,7 +1,7 @@
 import { BoxProps, ElementProps, Factory, MantineSpacing, StylesApiProps } from '../../core';
 import type { TreeDragDropPayload } from './move-tree-node/move-tree-node';
-import type { TreeAllowDrop, TreeDragHandleProps } from './use-tree-node-drag-drop';
 import { TreeController } from './use-tree';
+import type { TreeAllowDrop, TreeDragHandleProps } from './use-tree-node-drag-drop';
 export interface TreeNodeData {
     label: React.ReactNode;
     value: string;

package/lib/components/Tree/TreeNode.d.ts

@@ -24,7 +24,7 @@ interface TreeNodeProps {
     dragStateRef: React.RefObject<TreeDragState>;
     data: TreeNodeData[];
 }
-export declare function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selectOnClick, isSubtree, level, renderNode, flatValues, allowRangeSelection, expandOnSpace, checkOnSpace, keepMounted, onDragDrop, allowDrop, withDragHandle, dragStateRef, data, }: TreeNodeProps): import("react/jsx-runtime").JSX.Element;
+export declare function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selectOnClick, isSubtree, level, renderNode, flatValues, allowRangeSelection, expandOnSpace, checkOnSpace, keepMounted, onDragDrop, allowDrop, withDragHandle, dragStateRef, data, }: TreeNodeProps): import("react").JSX.Element;
 export declare namespace TreeNode {
     var displayName: string;
 }

package/lib/components/TreeSelect/TreeSelectOption.d.ts

@@ -34,7 +34,7 @@ export interface TreeSelectRenderNodePayload {
      * No-op for nodes without children. */
     expand: (event?: React.MouseEvent) => void;
 }
-export declare function TreeSelectOption({ node, level, expanded, hasChildren, selected, checked, indeterminate, showCheckbox, isLastChild, lineGuides, withLines, onToggleExpand, renderNode, chevronAriaLabels, }: TreeSelectOptionProps): import("react/jsx-runtime").JSX.Element;
+export declare function TreeSelectOption({ node, level, expanded, hasChildren, selected, checked, indeterminate, showCheckbox, isLastChild, lineGuides, withLines, onToggleExpand, renderNode, chevronAriaLabels, }: TreeSelectOptionProps): import("react").JSX.Element;
 export declare namespace TreeSelectOption {
     var displayName: string;
 }

package/lib/components/index.d.ts

@@ -16,6 +16,7 @@ export * from './Flex';
 export * from './FloatingIndicator';
 export * from '../utils/Floating';
 export * from './Accordion';
+export * from './ActionBar';
 export * from './Affix';
 export * from './Alert';
 export * from './Anchor';

package/lib/core/DirectionProvider/DirectionProvider.d.ts

@@ -14,4 +14,4 @@ export interface DirectionProviderProps {
     /** Determines whether direction should be updated on mount based on `dir` attribute set on root element (usually html element) @default true  */
     detectDirection?: boolean;
 }
-export declare function DirectionProvider({ children, initialDirection, detectDirection, }: DirectionProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function DirectionProvider({ children, initialDirection, detectDirection, }: DirectionProviderProps): import("react").JSX.Element;

package/lib/core/InlineStyles/InlineStyles.d.ts

@@ -2,4 +2,4 @@ import { InlineStylesInput } from './styles-to-string/styles-to-string';
 export interface InlineStylesProps extends InlineStylesInput, Omit<React.ComponentProps<'style'>, keyof InlineStylesInput> {
     deduplicate?: boolean;
 }
-export declare function InlineStyles({ deduplicate, ...props }: InlineStylesProps): import("react/jsx-runtime").JSX.Element;
+export declare function InlineStyles({ deduplicate, ...props }: InlineStylesProps): import("react").JSX.Element;

package/lib/core/MantineProvider/ColorSchemeScript/ColorSchemeScript.d.ts

@@ -4,4 +4,4 @@ export interface ColorSchemeScriptProps extends React.ComponentProps<'script'> {
     defaultColorScheme?: MantineColorScheme;
     localStorageKey?: string;
 }
-export declare function ColorSchemeScript({ defaultColorScheme, localStorageKey, forceColorScheme, ...others }: ColorSchemeScriptProps): import("react/jsx-runtime").JSX.Element;
+export declare function ColorSchemeScript({ defaultColorScheme, localStorageKey, forceColorScheme, ...others }: ColorSchemeScriptProps): import("react").JSX.Element;

package/lib/core/MantineProvider/MantineClasses/MantineClasses.d.ts

@@ -1 +1 @@
-export declare function MantineClasses(): import("react/jsx-runtime").JSX.Element;
+export declare function MantineClasses(): import("react").JSX.Element;

package/lib/core/MantineProvider/MantineCssVariables/MantineCssVariables.d.ts

@@ -2,7 +2,7 @@ interface MantineCssVariablesProps {
     cssVariablesSelector?: string;
     deduplicateCssVariables: boolean;
 }
-export declare function MantineCssVariables({ cssVariablesSelector, deduplicateCssVariables, }: MantineCssVariablesProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function MantineCssVariables({ cssVariablesSelector, deduplicateCssVariables, }: MantineCssVariablesProps): import("react").JSX.Element | null;
 export declare namespace MantineCssVariables {
     var displayName: string;
 }

package/lib/core/MantineProvider/MantineProvider.d.ts

@@ -1,10 +1,10 @@
-import './baseline.css';
-import './global.css';
-import './default-css-variables.css';
 import { MantineColorSchemeManager } from './color-scheme-managers';
 import { MantineStylesTransform } from './Mantine.context';
 import { CSSVariablesResolver } from './MantineCssVariables';
 import type { MantineColorScheme, MantineThemeOverride } from './theme.types';
+import './baseline.css';
+import './default-css-variables.css';
+import './global.css';
 export interface MantineProviderProps {
     /** Theme override object */
     theme?: MantineThemeOverride;
@@ -41,7 +41,7 @@ export interface MantineProviderProps {
     /** Environment at which the provider is used, `'test'` environment disables all transitions and portals */
     env?: 'default' | 'test';
 }
-export declare function MantineProvider({ theme, children, getStyleNonce, withStaticClasses, withGlobalClasses, deduplicateCssVariables, withCssVariables, cssVariablesSelector, classNamesPrefix, colorSchemeManager, defaultColorScheme, getRootElement, cssVariablesResolver, forceColorScheme, stylesTransform, env, deduplicateInlineStyles, }: MantineProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function MantineProvider({ theme, children, getStyleNonce, withStaticClasses, withGlobalClasses, deduplicateCssVariables, withCssVariables, cssVariablesSelector, classNamesPrefix, colorSchemeManager, defaultColorScheme, getRootElement, cssVariablesResolver, forceColorScheme, stylesTransform, env, deduplicateInlineStyles, }: MantineProviderProps): import("react").JSX.Element;
 export declare namespace MantineProvider {
     var displayName: string;
 }
@@ -53,7 +53,7 @@ export interface HeadlessMantineProviderProps {
     /** Environment at which the provider is used, `'test'` environment disables all transitions and portals */
     env?: 'default' | 'test';
 }
-export declare function HeadlessMantineProvider({ children, theme, env }: HeadlessMantineProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function HeadlessMantineProvider({ children, theme, env }: HeadlessMantineProviderProps): import("react").JSX.Element;
 export declare namespace HeadlessMantineProvider {
     var displayName: string;
 }

package/lib/core/MantineProvider/MantineThemeProvider/MantineThemeProvider.d.ts

@@ -10,7 +10,7 @@ export interface MantineThemeProviderProps {
     /** Your application or part of the application that requires different theme */
     children?: React.ReactNode;
 }
-export declare function MantineThemeProvider({ theme, children, inherit, }: MantineThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function MantineThemeProvider({ theme, children, inherit, }: MantineThemeProviderProps): import("react").JSX.Element;
 export declare namespace MantineThemeProvider {
     var displayName: string;
 }

package/lib/utils/Floating/FloatingArrow/FloatingArrow.d.ts

@@ -9,7 +9,7 @@ interface FloatingArrowProps extends React.ComponentProps<'div'> {
     arrowY: number | undefined;
     visible: boolean | undefined;
 }
-export declare function FloatingArrow({ position, arrowSize, arrowOffset, arrowRadius, arrowPosition, visible, arrowX, arrowY, style, ...others }: FloatingArrowProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function FloatingArrow({ position, arrowSize, arrowOffset, arrowRadius, arrowPosition, visible, arrowX, arrowY, style, ...others }: FloatingArrowProps): import("react").JSX.Element | null;
 export declare namespace FloatingArrow {
     var displayName: string;
 }

package/lib/utils/InlineInput/InlineInput.d.ts

@@ -18,7 +18,7 @@ export type InlineInputFactory = Factory<{
     props: any;
     stylesNames: InlineInputStylesNames;
 }>;
-export declare function InlineInput({ __staticSelector, __stylesApiProps, className, classNames, styles, unstyled, children, label, description, id, disabled, error, size, labelPosition, bodyElement, labelElement, variant, style, vars, mod, attributes, ...others }: InlineInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function InlineInput({ __staticSelector, __stylesApiProps, className, classNames, styles, unstyled, children, label, description, id, disabled, error, size, labelPosition, bodyElement, labelElement, variant, style, vars, mod, attributes, ...others }: InlineInputProps): import("react").JSX.Element;
 export declare namespace InlineInput {
     var displayName: string;
 }

package/lib/utils/InputsGroupFieldset/InputsGroupFieldset.d.ts

@@ -2,5 +2,5 @@ interface InputsGroupFieldsetProps {
     children: React.ReactNode;
     role: 'radiogroup' | 'group';
 }
-export declare function InputsGroupFieldset({ children, role }: InputsGroupFieldsetProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputsGroupFieldset({ children, role }: InputsGroupFieldsetProps): import("react").JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "9.5.1",
+  "version": "9.6.0",
   "description": "React components library focused on usability, accessibility and developer experience",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -43,12 +43,12 @@
     "directory": "packages/@mantine/core"
   },
   "peerDependencies": {
-    "@mantine/hooks": "9.5.1",
+    "@mantine/hooks": "9.6.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.27.19",
+    "@floating-ui/react": "^0.27.20",
     "clsx": "^2.1.1",
     "react-number-format": "^5.4.5",
     "react-remove-scroll": "^2.7.2",
@@ -57,7 +57,7 @@
   "devDependencies": {
     "@mantine-tests/core": "workspace:*",
     "@mantine/hooks": "workspace:*",
-    "react": "19.2.7",
-    "react-dom": "19.2.7"
+    "react": "19.2.8",
+    "react-dom": "19.2.8"
   }
 }

package/styles/ActionBar.css

@@ -0,0 +1,13 @@
+.m_de09d2d2 {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-sm);
+  width: fit-content;
+  margin-inline: auto;
+}
+
+.m_eab73b29 {
+  width: 1px;
+  align-self: stretch;
+  background-color: var(--mantine-color-default-border);
+}

package/styles/ActionBar.layer.css

@@ -0,0 +1,14 @@
+@layer mantine {.m_de09d2d2 {
+  display: flex;
+  align-items: center;
+  gap: var(--mantine-spacing-sm);
+  width: fit-content;
+  margin-inline: auto;
+}
+
+.m_eab73b29 {
+  width: 1px;
+  align-self: stretch;
+  background-color: var(--mantine-color-default-border);
+}
+}

package/styles/RollingNumber.css

@@ -1,4 +1,5 @@
 .m_47dd3981 {
+  position: relative;
   display: inline-flex;
   align-items: baseline;
   overflow: hidden;
@@ -8,12 +9,27 @@
     font-variant-numeric: tabular-nums;
   }
 
+.m_ccf525bd {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  overflow: hidden;
+  white-space: pre;
+  color: transparent;
+  forced-color-adjust: none;
+}
+
 .m_b301d46e {
+  position: relative;
+  z-index: 2;
   display: inline-block;
   width: 1ch;
   height: 1em;
   overflow: hidden;
   line-height: 1;
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
   transition:
     width var(--rn-duration) var(--rn-timing-function),
     opacity var(--rn-duration) var(--rn-timing-function);
@@ -38,9 +54,14 @@
   }
 
 .m_47d64bf5 {
+  position: relative;
+  z-index: 2;
   display: inline-block;
   overflow: hidden;
   white-space: pre;
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
   transition: opacity var(--rn-duration) var(--rn-timing-function);
 }
 

package/styles/RollingNumber.layer.css

@@ -1,4 +1,5 @@
 @layer mantine {.m_47dd3981 {
+  position: relative;
   display: inline-flex;
   align-items: baseline;
   overflow: hidden;
@@ -8,12 +9,27 @@
     font-variant-numeric: tabular-nums;
   }
 
+.m_ccf525bd {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  overflow: hidden;
+  white-space: pre;
+  color: transparent;
+  forced-color-adjust: none;
+}
+
 .m_b301d46e {
+  position: relative;
+  z-index: 2;
   display: inline-block;
   width: 1ch;
   height: 1em;
   overflow: hidden;
   line-height: 1;
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
   transition:
     width var(--rn-duration) var(--rn-timing-function),
     opacity var(--rn-duration) var(--rn-timing-function);
@@ -38,9 +54,14 @@
   }
 
 .m_47d64bf5 {
+  position: relative;
+  z-index: 2;
   display: inline-block;
   overflow: hidden;
   white-space: pre;
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
   transition: opacity var(--rn-duration) var(--rn-timing-function);
 }
 

package/styles/Stepper.css

@@ -33,6 +33,10 @@
     gap: var(--mantine-spacing-md) 0;
   }
 
+.m_aaf89d0b:where([data-label-position='bottom']) {
+    align-items: flex-start;
+  }
+
 .m_aaf89d0b:where([data-orientation='vertical']) {
     flex-direction: column;
   }
@@ -61,6 +65,10 @@
     background-color: var(--stepper-color);
   }
 
+.m_aaf89d0b:where([data-label-position='bottom']) .m_2a371ac9 {
+    margin-top: calc((var(--stepper-icon-size) - var(--stepper-outline-thickness)) / 2);
+  }
+
 .m_78da155d {
   padding-top: var(--stepper-content-padding);
 }
@@ -84,6 +92,22 @@
     flex-direction: row-reverse;
   }
 
+.m_cbb57068:where([data-label-position='bottom']) {
+    flex-direction: column;
+    align-items: center;
+    min-width: var(--stepper-icon-size);
+    max-width: calc(var(--stepper-icon-size) * 4);
+    overflow: visible;
+  }
+
+/* `labelPosition="bottom"` wins over `iconPosition`: the two describe the same axis, and
+       `column-reverse` here would move the label above the icon – the opposite of what the
+       prop name promises. */
+
+.m_cbb57068:where([data-label-position='bottom']):where([data-icon-position='right']) {
+      flex-direction: column;
+    }
+
 .m_f56b1e2c {
   align-items: center;
 }
@@ -189,6 +213,12 @@
     margin-inline-end: var(--mantine-spacing-sm);
   }
 
+.m_cbb57068:where([data-label-position='bottom']) .m_1956aa2a {
+    align-items: center;
+    text-align: center;
+    margin: calc(var(--mantine-spacing-xs) / 2) 0 0;
+  }
+
 .m_12051f6c {
   font-weight: var(--mantine-font-weight-medium);
   font-size: var(--stepper-fz);

package/styles/Stepper.layer.css

@@ -33,6 +33,10 @@
     gap: var(--mantine-spacing-md) 0;
   }
 
+.m_aaf89d0b:where([data-label-position='bottom']) {
+    align-items: flex-start;
+  }
+
 .m_aaf89d0b:where([data-orientation='vertical']) {
     flex-direction: column;
   }
@@ -61,6 +65,10 @@
     background-color: var(--stepper-color);
   }
 
+.m_aaf89d0b:where([data-label-position='bottom']) .m_2a371ac9 {
+    margin-top: calc((var(--stepper-icon-size) - var(--stepper-outline-thickness)) / 2);
+  }
+
 .m_78da155d {
   padding-top: var(--stepper-content-padding);
 }
@@ -84,6 +92,22 @@
     flex-direction: row-reverse;
   }
 
+.m_cbb57068:where([data-label-position='bottom']) {
+    flex-direction: column;
+    align-items: center;
+    min-width: var(--stepper-icon-size);
+    max-width: calc(var(--stepper-icon-size) * 4);
+    overflow: visible;
+  }
+
+/* `labelPosition="bottom"` wins over `iconPosition`: the two describe the same axis, and
+       `column-reverse` here would move the label above the icon – the opposite of what the
+       prop name promises. */
+
+.m_cbb57068:where([data-label-position='bottom']):where([data-icon-position='right']) {
+      flex-direction: column;
+    }
+
 .m_f56b1e2c {
   align-items: center;
 }
@@ -189,6 +213,12 @@
     margin-inline-end: var(--mantine-spacing-sm);
   }
 
+.m_cbb57068:where([data-label-position='bottom']) .m_1956aa2a {
+    align-items: center;
+    text-align: center;
+    margin: calc(var(--mantine-spacing-xs) / 2) 0 0;
+  }
+
 .m_12051f6c {
   font-weight: var(--mantine-font-weight-medium);
   font-size: var(--stepper-fz);

package/styles/Typography.css

@@ -194,6 +194,65 @@
   .m_d08caa0 :where(table) :where(tr:last-of-type td) {
       border-bottom: 0;
     }
+  .m_d08caa0 :where(details) {
+    margin-bottom: var(--mantine-spacing-md);
+    padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
+    border: 1px solid var(--details-border-color);
+    border-radius: var(--mantine-radius-default);
+  }
+  :where([data-mantine-color-scheme='light']) .m_d08caa0 :where(details) {
+      --details-border-color: var(--mantine-color-gray-3);
+      --details-summary-hover: var(--mantine-color-gray-1);
+}
+  :where([data-mantine-color-scheme='dark']) .m_d08caa0 :where(details) {
+      --details-border-color: var(--mantine-color-dark-4);
+      --details-summary-hover: var(--mantine-color-dark-5);
+}
+  /* The native marker is hidden and replaced with a small triangle control so only the control –
+       not the whole summary text – gets the hover affordance, matching the editor toggle button. */
+  .m_d08caa0 :where(details) :where(summary) {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: var(--mantine-spacing-xs);
+      cursor: pointer;
+      font-weight: 600;
+      list-style: none;
+    }
+  .m_d08caa0 :where(details) :where(summary)::-webkit-details-marker {
+      display: none;
+    }
+  /* Control box: reserves space for the triangle and carries the hover background. */
+  .m_d08caa0 :where(details) :where(summary)::before {
+      content: '';
+      flex-shrink: 0;
+      width: 1.25rem;
+      height: calc(1em * var(--mantine-line-height));
+      border-radius: var(--mantine-radius-sm);
+    }
+  .m_d08caa0 :where(details) :where(summary:hover)::before {
+      background-color: var(--details-summary-hover);
+    }
+  /* Disclosure triangle centered over the control box (7px = half of the 20px box minus the 6px
+       triangle); rotates to point down when the details is open. */
+  .m_d08caa0 :where(details) :where(summary)::after {
+      content: '';
+      position: absolute;
+      inset-inline-start: calc(0.4375rem * var(--mantine-scale));
+      top: 50%;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 5px 0 5px 6px;
+      border-color: transparent transparent transparent currentColor;
+      transform: translateY(-50%);
+    }
+  .m_d08caa0 :where(details):where([open]) > :where(summary)::after {
+      transform: translateY(-50%) rotate(90deg);
+    }
+  .m_d08caa0 :where(details) > :where(*:last-child) {
+      margin-bottom: 0;
+    }
   .m_d08caa0 :where(blockquote) {
     font-size: var(--mantine-font-size-lg);
     line-height: var(--mantine-line-height);

package/styles/Typography.layer.css

@@ -194,6 +194,65 @@
   .m_d08caa0 :where(table) :where(tr:last-of-type td) {
       border-bottom: 0;
     }
+  .m_d08caa0 :where(details) {
+    margin-bottom: var(--mantine-spacing-md);
+    padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
+    border: 1px solid var(--details-border-color);
+    border-radius: var(--mantine-radius-default);
+  }
+  :where([data-mantine-color-scheme='light']) .m_d08caa0 :where(details) {
+      --details-border-color: var(--mantine-color-gray-3);
+      --details-summary-hover: var(--mantine-color-gray-1);
+}
+  :where([data-mantine-color-scheme='dark']) .m_d08caa0 :where(details) {
+      --details-border-color: var(--mantine-color-dark-4);
+      --details-summary-hover: var(--mantine-color-dark-5);
+}
+  /* The native marker is hidden and replaced with a small triangle control so only the control –
+       not the whole summary text – gets the hover affordance, matching the editor toggle button. */
+  .m_d08caa0 :where(details) :where(summary) {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: var(--mantine-spacing-xs);
+      cursor: pointer;
+      font-weight: 600;
+      list-style: none;
+    }
+  .m_d08caa0 :where(details) :where(summary)::-webkit-details-marker {
+      display: none;
+    }
+  /* Control box: reserves space for the triangle and carries the hover background. */
+  .m_d08caa0 :where(details) :where(summary)::before {
+      content: '';
+      flex-shrink: 0;
+      width: 1.25rem;
+      height: calc(1em * var(--mantine-line-height));
+      border-radius: var(--mantine-radius-sm);
+    }
+  .m_d08caa0 :where(details) :where(summary:hover)::before {
+      background-color: var(--details-summary-hover);
+    }
+  /* Disclosure triangle centered over the control box (7px = half of the 20px box minus the 6px
+       triangle); rotates to point down when the details is open. */
+  .m_d08caa0 :where(details) :where(summary)::after {
+      content: '';
+      position: absolute;
+      inset-inline-start: calc(0.4375rem * var(--mantine-scale));
+      top: 50%;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 5px 0 5px 6px;
+      border-color: transparent transparent transparent currentColor;
+      transform: translateY(-50%);
+    }
+  .m_d08caa0 :where(details):where([open]) > :where(summary)::after {
+      transform: translateY(-50%) rotate(90deg);
+    }
+  .m_d08caa0 :where(details) > :where(*:last-child) {
+      margin-bottom: 0;
+    }
   .m_d08caa0 :where(blockquote) {
     font-size: var(--mantine-font-size-lg);
     line-height: var(--mantine-line-height);