@mantine/core 9.5.2 → 9.6.1

package/lib/components/ScrollArea/ScrollAreaThumb/ScrollAreaThumb.d.ts

@@ -1,13 +1,13 @@
 interface ThumbProps extends React.ComponentProps<'div'> {
 }
-export declare function Thumb(props: ThumbProps): import("react/jsx-runtime").JSX.Element;
+export declare function Thumb(props: ThumbProps): import("react").JSX.Element;
 export declare namespace Thumb {
     var displayName: string;
 }
 interface ScrollAreaThumbProps extends ThumbProps {
     forceMount?: true;
 }
-export declare function ScrollAreaThumb(props: ScrollAreaThumbProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ScrollAreaThumb(props: ScrollAreaThumbProps): import("react").JSX.Element | null;
 export declare namespace ScrollAreaThumb {
     var displayName: string;
 }

package/lib/components/ScrollArea/ScrollAreaViewport/ScrollAreaViewport.d.ts

@@ -1,7 +1,7 @@
 import { BoxProps, ElementProps } from '../../../core';
 export interface ScrollAreaViewportProps extends BoxProps, ElementProps<'div'> {
 }
-export declare function ScrollAreaViewport({ children, style, ref, onWheel, ...others }: ScrollAreaViewportProps): import("react/jsx-runtime").JSX.Element;
+export declare function ScrollAreaViewport({ children, style, ref, onWheel, ...others }: ScrollAreaViewportProps): import("react").JSX.Element;
 export declare namespace ScrollAreaViewport {
     var displayName: string;
 }

package/lib/components/SimpleGrid/SimpleGridVariables.d.ts

@@ -2,6 +2,6 @@ import type { SimpleGridProps } from './SimpleGrid';
 interface SimpleGridVariablesProps extends SimpleGridProps {
     selector: string;
 }
-export declare function SimpleGridMediaVariables({ spacing, verticalSpacing, cols, minColWidth, autoRows, selector, }: SimpleGridVariablesProps): import("react/jsx-runtime").JSX.Element;
-export declare function SimpleGridContainerVariables({ spacing, verticalSpacing, cols, minColWidth, autoRows, selector, }: SimpleGridVariablesProps): import("react/jsx-runtime").JSX.Element;
+export declare function SimpleGridMediaVariables({ spacing, verticalSpacing, cols, minColWidth, autoRows, selector, }: SimpleGridVariablesProps): import("react").JSX.Element;
+export declare function SimpleGridContainerVariables({ spacing, verticalSpacing, cols, minColWidth, autoRows, selector, }: SimpleGridVariablesProps): import("react").JSX.Element;
 export {};

package/lib/components/Slider/Marks/Marks.d.ts

@@ -9,7 +9,7 @@ export interface MarksProps {
     inverted: boolean | undefined;
     startPointValue?: number;
 }
-export declare function Marks({ marks, min, max, disabled, value, offset, inverted, startPointValue, }: MarksProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Marks({ marks, min, max, disabled, value, offset, inverted, startPointValue, }: MarksProps): import("react").JSX.Element | null;
 export declare namespace Marks {
     var displayName: string;
 }

package/lib/components/Slider/SliderRoot/SliderRoot.d.ts

@@ -9,7 +9,7 @@ export interface SliderRootProps extends BoxProps, ElementProps<'div'> {
     radius?: MantineRadius;
     orientation?: 'horizontal' | 'vertical';
 }
-export declare function SliderRoot({ size, disabled, variant, color, thumbSize, radius, orientation, ...others }: SliderRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function SliderRoot({ size, disabled, variant, color, thumbSize, radius, orientation, ...others }: SliderRootProps): import("react").JSX.Element;
 export declare namespace SliderRoot {
     var displayName: string;
 }

package/lib/components/Slider/Thumb/Thumb.d.ts

@@ -20,7 +20,7 @@ export interface ThumbProps extends Omit<React.ComponentProps<'div'>, 'value'> {
     className?: string | undefined;
     style?: React.CSSProperties;
 }
-export declare function Thumb({ max, min, value, position, label, dragging, onMouseDown, onKeyDownCapture, labelTransitionProps, labelAlwaysOn, thumbLabel, thumbValueText, onFocus, onBlur, showLabelOnHover, isHovered, children, disabled, orientation, ref, }: ThumbProps): import("react/jsx-runtime").JSX.Element;
+export declare function Thumb({ max, min, value, position, label, dragging, onMouseDown, onKeyDownCapture, labelTransitionProps, labelAlwaysOn, thumbLabel, thumbValueText, onFocus, onBlur, showLabelOnHover, isHovered, children, disabled, orientation, ref, }: ThumbProps): import("react").JSX.Element;
 export declare namespace Thumb {
     var displayName: string;
 }

package/lib/components/Slider/Track/Track.d.ts

@@ -15,7 +15,7 @@ export interface TrackProps {
     inverted: boolean | undefined;
     containerProps?: React.ComponentProps<'div'>;
 }
-export declare function Track({ filled, children, offset, disabled, marksOffset, inverted, startPointValue, containerProps, ...others }: TrackProps): import("react/jsx-runtime").JSX.Element;
+export declare function Track({ filled, children, offset, disabled, marksOffset, inverted, startPointValue, containerProps, ...others }: TrackProps): import("react").JSX.Element;
 export declare namespace Track {
     var displayName: string;
 }

package/lib/components/Splitter/GripIcon.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-export declare function GripVerticalIcon(props: React.ComponentPropsWithoutRef<'svg'>): import("react/jsx-runtime").JSX.Element;
-export declare function GripHorizontalIcon(props: React.ComponentPropsWithoutRef<'svg'>): import("react/jsx-runtime").JSX.Element;
+export declare function GripVerticalIcon(props: React.ComponentPropsWithoutRef<'svg'>): React.JSX.Element;
+export declare function GripHorizontalIcon(props: React.ComponentPropsWithoutRef<'svg'>): React.JSX.Element;

package/lib/components/Stepper/Stepper.context.d.ts

@@ -4,5 +4,6 @@ export interface StepperContextValue {
     getStyles: GetStylesApi<StepperFactory>;
     orientation: 'horizontal' | 'vertical' | undefined;
     iconPosition: 'left' | 'right' | undefined;
+    labelPosition?: 'right' | 'bottom' | undefined;
 }
 export declare const StepperProvider: import("react").Context<StepperContextValue | null>, useStepperContext: () => StepperContextValue;

package/lib/components/Stepper/Stepper.d.ts

@@ -30,7 +30,7 @@ export interface StepperProps extends BoxProps, StylesApiProps<StepperFactory>,
     contentPadding?: MantineSpacing;
     /** Stepper orientation @default 'horizontal' */
     orientation?: 'vertical' | 'horizontal';
-    /** Icon position relative to the step body @default 'left' */
+    /** Icon position relative to the step body. Ignored if `labelPosition="bottom"` is set – with the label below the icon there is no left/right to place it on. @default 'left' */
     iconPosition?: 'right' | 'left';
     /** Controls size of various Stepper elements */
     size?: MantineSize;
@@ -40,6 +40,8 @@ export interface StepperProps extends BoxProps, StylesApiProps<StepperFactory>,
     allowNextStepsSelect?: boolean;
     /** Determines whether steps should wrap to the next line if no space is available @default true */
     wrap?: boolean;
+    /** Controls position of the step label and description relative to the step icon. Takes precedence over `iconPosition`. Ignored if `orientation="vertical"` is set. @default 'right' */
+    labelPosition?: 'right' | 'bottom';
     /** When true, automatically adjusts the icon color in completed steps to ensure sufficient contrast against the step background color */
     autoContrast?: boolean;
     /** If set, all step content is kept mounted. React 19 `Activity` is used to preserve state while content is hidden. @default false */

package/lib/components/Table/TableDataRenderer.d.ts

@@ -2,7 +2,7 @@ import type { TableData } from './Table';
 export interface TableDataRendererProps {
     data: TableData;
 }
-export declare function TableDataRenderer({ data }: TableDataRendererProps): import("react/jsx-runtime").JSX.Element;
+export declare function TableDataRenderer({ data }: TableDataRendererProps): import("react").JSX.Element;
 export declare namespace TableDataRenderer {
     var displayName: string;
 }

package/lib/components/Textarea/Autosize.d.ts

@@ -8,5 +8,5 @@ export interface TextareaAutosizeProps extends Omit<TextareaProps, 'style'> {
         height?: number;
     };
 }
-export declare function TextareaAutosize({ maxRows, minRows, onChange, ref: userRef, ...props }: TextareaAutosizeProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextareaAutosize({ maxRows, minRows, onChange, ref: userRef, ...props }: TextareaAutosizeProps): React.JSX.Element;
 export {};

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.2",
+  "version": "9.6.1",
   "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.2",
+    "@mantine/hooks": "9.6.1",
     "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/Accordion.css

@@ -128,7 +128,8 @@
     border-start-end-radius: var(--accordion-radius);
   }
 
-.m_1f921b3b:first-of-type > [data-accordion-control] {
+.m_1f921b3b:first-of-type > [data-accordion-control],
+    .m_1f921b3b:first-of-type > .m_8fa820a0 > [data-accordion-control] {
       border-start-start-radius: var(--accordion-radius);
       border-start-end-radius: var(--accordion-radius);
     }
@@ -138,7 +139,8 @@
     border-end-end-radius: var(--accordion-radius);
   }
 
-.m_1f921b3b:last-of-type > [data-accordion-control] {
+.m_1f921b3b:last-of-type > [data-accordion-control],
+    .m_1f921b3b:last-of-type > .m_8fa820a0 > [data-accordion-control] {
       border-end-start-radius: var(--accordion-radius);
       border-end-end-radius: var(--accordion-radius);
     }

package/styles/Accordion.layer.css

@@ -128,7 +128,8 @@
     border-start-end-radius: var(--accordion-radius);
   }
 
-.m_1f921b3b:first-of-type > [data-accordion-control] {
+.m_1f921b3b:first-of-type > [data-accordion-control],
+    .m_1f921b3b:first-of-type > .m_8fa820a0 > [data-accordion-control] {
       border-start-start-radius: var(--accordion-radius);
       border-start-end-radius: var(--accordion-radius);
     }
@@ -138,7 +139,8 @@
     border-end-end-radius: var(--accordion-radius);
   }
 
-.m_1f921b3b:last-of-type > [data-accordion-control] {
+.m_1f921b3b:last-of-type > [data-accordion-control],
+    .m_1f921b3b:last-of-type > .m_8fa820a0 > [data-accordion-control] {
       border-end-start-radius: var(--accordion-radius);
       border-end-end-radius: var(--accordion-radius);
     }

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/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);