@mortenbrudvik/waveui 0.7.0 → 0.9.0

package/dist/components/button/Toolbar.mjs

@@ -1,63 +1,64 @@
 "use client";
 import { cn as e } from "../../lib/cn.mjs";
 import { composeEventHandlers as t } from "../../lib/composeEventHandlers.mjs";
-import { useRovingTabIndex as n } from "../../hooks/useRovingTabIndex.mjs";
-import { useMergedRefs as r } from "../../hooks/useMergedRefs.mjs";
-import { useCheckedValues as i } from "../../hooks/useCheckedValues.mjs";
-import { ToolbarContext as a, useToolbarCheckableRegistry as o } from "./Toolbar.context.mjs";
-import { ToolbarButton as s, ToolbarDivider as c, ToolbarGroup as l, ToolbarRadioButton as u, ToolbarRadioGroup as d, ToolbarToggleButton as f } from "./Toolbar.parts.mjs";
-import * as p from "react";
-import { jsx as m } from "react/jsx-runtime";
+import { toolbarClassNames as n } from "../../lib/classNames.mjs";
+import { useRovingTabIndex as r } from "../../hooks/useRovingTabIndex.mjs";
+import { useMergedRefs as i } from "../../hooks/useMergedRefs.mjs";
+import { useCheckedValues as a } from "../../hooks/useCheckedValues.mjs";
+import { ToolbarContext as o, useToolbarCheckableRegistry as s } from "./Toolbar.context.mjs";
+import { ToolbarButton as c, ToolbarDivider as l, ToolbarGroup as u, ToolbarRadioButton as d, ToolbarRadioGroup as f, ToolbarToggleButton as p } from "./Toolbar.parts.mjs";
+import * as m from "react";
+import { jsx as h } from "react/jsx-runtime";
 //#region src/components/button/Toolbar.tsx
-var h = "button, [href], input, select, textarea, [role=\"button\"], [tabindex]", g = {
+var g = "button, [href], input, select, textarea, [role=\"button\"], [tabindex]", _ = {
 	"extra-small": "p-0.5",
 	small: "p-0.5",
 	medium: "p-1",
 	large: "p-1.5",
 	"extra-large": "p-2"
-}, _ = (s) => {
-	let { as: c, orientation: l = "horizontal", size: u = "medium", checkedValues: d, defaultCheckedValues: f, onCheckedValuesChange: _, className: v, ref: y, onKeyDown: b, onFocus: x, role: S, "aria-orientation": C, ...w } = s, { containerProps: T } = n({
-		itemSelector: h,
+}, v = (c) => {
+	let { as: l, orientation: u = "horizontal", size: d = "medium", checkedValues: f, defaultCheckedValues: p, onCheckedValuesChange: v, className: y, ref: b, onKeyDown: x, onFocus: S, role: C, "aria-orientation": w, ...T } = c, { containerProps: E } = r({
+		itemSelector: g,
 		manageTabIndex: !0,
 		tabStop: "last-focused",
-		orientation: l
-	}), E = r(T.ref, y), D = i(d, f, _), O = o(), k = p.useMemo(() => ({
-		orientation: l,
-		size: u,
-		checked: D,
-		registerCheckable: O
+		orientation: u
+	}), D = i(E.ref, b), O = a(f, p, v), k = s(), A = m.useMemo(() => ({
+		orientation: u,
+		size: d,
+		checked: O,
+		registerCheckable: k
 	}), [
-		l,
 		u,
-		D,
-		O
-	]), A = c ?? "div";
-	return /* @__PURE__ */ m(a.Provider, {
-		value: k,
-		children: /* @__PURE__ */ m(A, {
-			"data-size": u,
-			"data-orientation": l,
-			...w,
-			role: S ?? "toolbar",
-			"aria-orientation": C ?? l,
-			ref: E,
+		d,
+		O,
+		k
+	]), j = l ?? "div";
+	return /* @__PURE__ */ h(o.Provider, {
+		value: A,
+		children: /* @__PURE__ */ h(j, {
+			"data-size": d,
+			"data-orientation": u,
+			...T,
+			role: C ?? "toolbar",
+			"aria-orientation": w ?? u,
+			ref: D,
 			"data-roving-container": "",
-			onKeyDown: t(b, T.onKeyDown),
-			onFocus: t(x, T.onFocus, { checkDefaultPrevented: !1 }),
-			className: e("inline-flex items-center gap-1 rounded border border-border", g[u], l === "vertical" && "flex-col items-stretch", v)
+			onKeyDown: t(x, E.onKeyDown),
+			onFocus: t(S, E.onFocus, { checkDefaultPrevented: !1 }),
+			className: e(n.root, "inline-flex items-center gap-1 rounded border border-border", _[d], u === "vertical" && "flex-col items-stretch", y)
 		})
 	});
 };
-_.displayName = "Toolbar";
-var v = /* @__PURE__ */ Object.assign(_, {
-	Button: s,
-	ToggleButton: f,
-	RadioGroup: d,
-	RadioButton: u,
-	Group: l,
-	Divider: c
+v.displayName = "Toolbar";
+var y = /* @__PURE__ */ Object.assign(v, {
+	Button: c,
+	ToggleButton: p,
+	RadioGroup: f,
+	RadioButton: d,
+	Group: u,
+	Divider: l
 });
 //#endregion
-export { v as Toolbar, s as ToolbarButton, c as ToolbarDivider, l as ToolbarGroup, u as ToolbarRadioButton, d as ToolbarRadioGroup, f as ToolbarToggleButton };
+export { y as Toolbar, c as ToolbarButton, l as ToolbarDivider, u as ToolbarGroup, d as ToolbarRadioButton, f as ToolbarRadioGroup, p as ToolbarToggleButton };
 
 //# sourceMappingURL=Toolbar.mjs.map

package/dist/components/button/Toolbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.mjs","names":["React","TOOLBAR_ITEM_SELECTOR","toolbarPaddingClasses","ToolbarRoot","ariaOrientation","rest","props","useRovingTabIndex","mergedRef","useMergedRefs","containerProps","ref","checked","useCheckedValues","checkedValues","defaultCheckedValues","onCheckedValuesChange","registerCheckable","useToolbarCheckableRegistry","context","orientation","size","Component","as","ToolbarContext","role","composeEventHandlers","onKeyDown","onFocus","cn","className","Toolbar","ToolbarButton","ToolbarToggleButton","ToolbarRadioGroup","ToolbarRadioButton","ToolbarGroup","ToolbarDivider"],"sources":["../../../src/components/button/Toolbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport type { CheckedValues, CheckedValuesChangeHandler, Orientation, Size } from '../../lib/types';\nimport { useCheckedValues } from '../../hooks/useCheckedValues';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndex';\nimport { ToolbarContext, useToolbarCheckableRegistry } from './Toolbar.context';\nimport type { ToolbarContextValue } from './Toolbar.context';\nimport {\n  ToolbarButton,\n  ToolbarDivider,\n  ToolbarGroup,\n  ToolbarRadioButton,\n  ToolbarRadioGroup,\n  ToolbarToggleButton,\n} from './Toolbar.parts';\n\nexport {\n  ToolbarButton,\n  ToolbarDivider,\n  ToolbarGroup,\n  ToolbarRadioButton,\n  ToolbarRadioGroup,\n  ToolbarToggleButton,\n};\nexport type {\n  ToolbarButtonOwnProps,\n  ToolbarButtonProps,\n  ToolbarDividerProps,\n  ToolbarGroupProps,\n  ToolbarRadioButtonProps,\n  ToolbarRadioGroupProps,\n  ToolbarToggleButtonProps,\n} from './Toolbar.parts';\n\n/**\n * The Toolbar's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props\n * only). Every other prop comes from the rendered element (`as`, default `'div'`). Give the\n * toolbar an `aria-label` (or `aria-labelledby`) that describes its purpose, e.g. \"Formatting\".\n */\nexport interface ToolbarOwnProps {\n  /**\n   * Layout and arrow-key axis: Left/Right move between items when horizontal (mirrored in RTL),\n   * Up/Down when vertical. Exposed as `aria-orientation` and `data-orientation`.\n   * @default 'horizontal'\n   */\n  orientation?: Orientation;\n  /**\n   * Default size of `Toolbar.Button`, `Toolbar.ToggleButton` and `Toolbar.RadioButton` (their\n   * own `size` wins), and the toolbar's padding. Plain Buttons inside keep their own default.\n   * Exposed as `data-size`.\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Pressed `Toolbar.ToggleButton`s and checked `Toolbar.RadioButton`s, per group `name`\n   * (controlled): `{ format: ['bold'], align: ['center'] }`.\n   */\n  checkedValues?: CheckedValues;\n  /** Initial checked values for uncontrolled usage. @default {} */\n  defaultCheckedValues?: CheckedValues;\n  /**\n   * Called when a toggle or radio changes them (only on change): the new checked values first,\n   * then `details` with the group's `name`, its `checkedItems` and the `event` (Fluent's\n   * `onCheckedValueChange(event, { name, checkedItems })`; always passed, typed optional until 1.0).\n   */\n  onCheckedValuesChange?: CheckedValuesChangeHandler;\n}\n\n/**\n * Props of {@link Toolbar} rendered as `C` (default `'div'`). `ToolbarProps` without a type\n * argument is the 0.4 name: the props of a Toolbar rendered as a `<div>`, including `ref`.\n */\nexport type ToolbarProps<C extends React.ElementType = 'div'> = PolymorphicProps<\n  C,\n  ToolbarOwnProps\n>;\n\n/** The props the implementation reads, for any `as`. */\ntype ToolbarImplProps = ToolbarOwnProps &\n  React.HTMLAttributes<HTMLElement> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n  };\n\n/**\n * Every focusable control a toolbar can contain, whatever component renders it. Matches that\n * cannot take focus (a `type=\"hidden\"` input, a control CSS hides) are dropped by the roving hook.\n */\nconst TOOLBAR_ITEM_SELECTOR =\n  'button, [href], input, select, textarea, [role=\"button\"], [tabindex]';\n\n/** The toolbar's padding per size. */\nconst toolbarPaddingClasses: Record<Size, string> = {\n  'extra-small': 'p-0.5',\n  small: 'p-0.5',\n  medium: 'p-1',\n  large: 'p-1.5',\n  'extra-large': 'p-2',\n};\n\n// The root of the Toolbar compound; its component JSDoc is on the `Toolbar` export below (C-DOCS).\nconst ToolbarRoot: PolymorphicComponent<'div', ToolbarOwnProps> = (props) => {\n  const {\n    as,\n    orientation = 'horizontal',\n    size = 'medium',\n    checkedValues,\n    defaultCheckedValues,\n    onCheckedValuesChange,\n    className,\n    ref,\n    onKeyDown,\n    onFocus,\n    role,\n    'aria-orientation': ariaOrientation,\n    ...rest\n  } = props as ToolbarImplProps;\n\n  const { containerProps } = useRovingTabIndex({\n    itemSelector: TOOLBAR_ITEM_SELECTOR,\n    manageTabIndex: true,\n    tabStop: 'last-focused',\n    orientation,\n  });\n  const mergedRef = useMergedRefs<HTMLElement>(containerProps.ref, ref);\n\n  const checked = useCheckedValues(checkedValues, defaultCheckedValues, onCheckedValuesChange);\n  const registerCheckable = useToolbarCheckableRegistry();\n  const context = React.useMemo<ToolbarContextValue>(\n    () => ({ orientation, size, checked, registerCheckable }),\n    [orientation, size, checked, registerCheckable],\n  );\n\n  const Component: React.ElementType = as ?? 'div';\n  // The role and `aria-orientation` defaults apply wherever the consumer's value is `undefined` or\n  // `null` (as in Button), so a wrapper forwarding its own unset props keeps them.\n  return (\n    <ToolbarContext.Provider value={context}>\n      <Component\n        data-size={size}\n        data-orientation={orientation}\n        {...rest}\n        role={role ?? 'toolbar'}\n        aria-orientation={ariaOrientation ?? orientation}\n        ref={mergedRef}\n        data-roving-container=\"\"\n        onKeyDown={composeEventHandlers(onKeyDown, containerProps.onKeyDown)}\n        onFocus={composeEventHandlers(onFocus, containerProps.onFocus, {\n          checkDefaultPrevented: false,\n        })}\n        className={cn(\n          'inline-flex items-center gap-1 rounded border border-border',\n          toolbarPaddingClasses[size],\n          orientation === 'vertical' && 'flex-col items-stretch',\n          className,\n        )}\n      />\n    </ToolbarContext.Provider>\n  );\n};\nToolbarRoot.displayName = 'Toolbar';\n\n/**\n * A container for a set of controls (APG Toolbar pattern): `role=\"toolbar\"`, one Tab stop, and\n * arrow-key navigation between its controls.\n *\n * - Works with any children (Buttons, ToggleButtons, links, inputs, value controls such as\n *   Checkbox or Dropdown): the focusable controls are found in the DOM, and the Toolbar sets their\n *   `tabIndex` itself (one `0`, the rest `-1`). The `type=\"hidden\"` input that a named value\n *   control renders never counts as a control, and controls that CSS hides are skipped.\n * - Parts: `Toolbar.Button`, `Toolbar.ToggleButton` and `Toolbar.RadioButton` take the toolbar's\n *   `size` (default `'medium'`) and the `subtle` appearance by default; `Toolbar.RadioGroup`,\n *   `Toolbar.Group` and `Toolbar.Divider` lay them out. Plain Buttons keep their own defaults.\n * - State: the pressed `Toolbar.ToggleButton`s and the checked `Toolbar.RadioButton` of each\n *   group live in `checkedValues`/`defaultCheckedValues`, per group `name`, and every change calls\n *   `onCheckedValuesChange(checkedValues, details)`. The state is in the server HTML.\n * - Left/Right (Up/Down when `orientation=\"vertical\"`) move focus and wrap; Home/End jump to the\n *   first/last control; Left/Right are mirrored in RTL. Natively disabled controls are skipped,\n *   also when a child disables them on its own; `disabledFocusable` ones stay in the arrow-key\n *   order (APG), so a Tooltip can explain why they are unavailable. The arrows never press a\n *   toggle or check a radio: Space, Enter or a click does.\n * - The radios of a `Toolbar.RadioGroup` are part of that arrow-key order, and Up/Down (Left/Right\n *   in a vertical toolbar) also move among them, wrapping inside the group.\n * - Tab returns to the last focused control. Focusing a nested composite (radio group, tab list)\n *   or a text field, select, slider or spin button keeps the Tab stop where it was.\n * - Text fields, selects, sliders, spin buttons and editable comboboxes keep their own arrow keys\n *   (the caret moves). A Dropdown (select-only combobox) does not: Left/Right move past it. It\n *   keeps Up/Down, Home and End for its list, so in a vertical toolbar the arrows cannot leave it.\n * - Elements with their own `tabIndex={-1}` are left alone, and a nested composite widget (a\n *   RadioGroup, a tab list, …; not `Toolbar.RadioGroup`) counts as one control that keeps its own\n *   Tab stop and arrow keys.\n * - A Menu or Popover opened from a control keeps its own keys: arrows, Home and End pressed in\n *   the popup never move focus back to the toolbar's controls.\n * - A consumer `onKeyDown` runs first; `event.preventDefault()` in it cancels the navigation.\n * - Renders `data-size` and `data-orientation`.\n *\n * React Server Components cannot dot into a client module: import the flat names\n * `ToolbarButton`, `ToolbarToggleButton`, `ToolbarRadioGroup`, `ToolbarRadioButton`,\n * `ToolbarGroup` and `ToolbarDivider` there; `Toolbar.Button` etc. work in client files.\n *\n * @example\n * <Toolbar aria-label=\"Formatting\" defaultCheckedValues={{ format: ['bold'], align: ['left'] }}>\n *   <Toolbar.ToggleButton name=\"format\" value=\"bold\" icon={<BoldIcon />} aria-label=\"Bold\" />\n *   <Toolbar.ToggleButton name=\"format\" value=\"code\" icon={<CodeIcon />} aria-label=\"Code\" />\n *   <Toolbar.Divider />\n *   <Toolbar.RadioGroup aria-label=\"Text alignment\">\n *     <Toolbar.RadioButton name=\"align\" value=\"left\" icon={<AlignLeftIcon />} aria-label=\"Left\" />\n *     <Toolbar.RadioButton name=\"align\" value=\"center\" icon={<AlignCenterIcon />} aria-label=\"Center\" />\n *   </Toolbar.RadioGroup>\n * </Toolbar>\n */\nexport const Toolbar = /* @__PURE__ */ Object.assign(ToolbarRoot, {\n  Button: ToolbarButton,\n  ToggleButton: ToolbarToggleButton,\n  RadioGroup: ToolbarRadioGroup,\n  RadioButton: ToolbarRadioButton,\n  Group: ToolbarGroup,\n  Divider: ToolbarDivider,\n});\n"],"mappings":";;;;;;;;;;;AA2FA,IAAMC,IACJ,0EAGIC,IAA8C;CAClD,eAAe;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACP,eAAe;AACjB,GAGMC,KAA6D,MAAU;CAC3E,IAAM,EACJ,OACA,iBAAc,cACd,UAAO,UACP,kBACA,yBACA,0BACA,cACA,QACA,cACA,YACA,SACA,oBAAoBC,GACpB,GAAGC,MACDC,GAEE,EAAE,sBAAmBC,EAAkB;EAC3C,cAAcN;EACd,gBAAgB;EAChB,SAAS;EACT;CACF,CAAC,GACKO,IAAYC,EAA2BC,EAAe,KAAKC,CAAG,GAE9DC,IAAUC,EAAiBC,GAAeC,GAAsBC,CAAqB,GACrFC,IAAoBC,EAA4B,GAChDC,IAAUnB,EAAM,eACb;EAAE;EAAa;EAAM;EAAS;CAAkB,IACvD;EAACoB;EAAaC;EAAMT;EAASK;CAAiB,CAChD,GAEMK,IAA+BC,KAAM;CAG3C,OACE,kBAACC,EAAe,UAAhB;EAAyB,OAAOL;EAC9B,UAAA,kBAACG,GAAD;GACE,aAAWD;GACX,oBAAkBD;GAClB,GAAIf;GACJ,MAAMoB,KAAQ;GACd,oBAAkBrB,KAAmBgB;GACrC,KAAKZ;GACL,yBAAsB;GACtB,WAAWkB,EAAqBC,GAAWjB,EAAe,SAAS;GACnE,SAASgB,EAAqBE,GAASlB,EAAe,SAAS,EAC7D,uBAAuB,GACzB,CAAC;GACD,WAAWmB,EACT,+DACA3B,EAAsBmB,IACtBD,MAAgB,cAAc,0BAC9BU,CACF;EACD,CAAA;CACsB,CAAA;AAE7B;AACA,EAAY,cAAc;AAmD1B,IAAaC,IAA0B,uBAAO,OAAO5B,GAAa;CAChE,QAAQ6B;CACR,cAAcC;CACd,YAAYC;CACZ,aAAaC;CACb,OAAOC;CACP,SAASC;AACX,CAAC"}
+{"version":3,"file":"Toolbar.mjs","names":["React","TOOLBAR_ITEM_SELECTOR","toolbarPaddingClasses","ToolbarRoot","ariaOrientation","rest","props","useRovingTabIndex","mergedRef","useMergedRefs","containerProps","ref","checked","useCheckedValues","checkedValues","defaultCheckedValues","onCheckedValuesChange","registerCheckable","useToolbarCheckableRegistry","context","orientation","size","Component","as","ToolbarContext","role","composeEventHandlers","onKeyDown","onFocus","cn","toolbarClassNames","className","Toolbar","ToolbarButton","ToolbarToggleButton","ToolbarRadioGroup","ToolbarRadioButton","ToolbarGroup","ToolbarDivider"],"sources":["../../../src/components/button/Toolbar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { toolbarClassNames } from '../../lib/classNames';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport type { CheckedValues, CheckedValuesChangeHandler, Orientation, Size } from '../../lib/types';\nimport { useCheckedValues } from '../../hooks/useCheckedValues';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { useRovingTabIndex } from '../../hooks/useRovingTabIndex';\nimport { ToolbarContext, useToolbarCheckableRegistry } from './Toolbar.context';\nimport type { ToolbarContextValue } from './Toolbar.context';\nimport {\n  ToolbarButton,\n  ToolbarDivider,\n  ToolbarGroup,\n  ToolbarRadioButton,\n  ToolbarRadioGroup,\n  ToolbarToggleButton,\n} from './Toolbar.parts';\n\nexport {\n  ToolbarButton,\n  ToolbarDivider,\n  ToolbarGroup,\n  ToolbarRadioButton,\n  ToolbarRadioGroup,\n  ToolbarToggleButton,\n};\nexport type {\n  ToolbarButtonOwnProps,\n  ToolbarButtonProps,\n  ToolbarDividerProps,\n  ToolbarGroupProps,\n  ToolbarRadioButtonProps,\n  ToolbarRadioGroupProps,\n  ToolbarToggleButtonProps,\n} from './Toolbar.parts';\n\n/**\n * The Toolbar's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props\n * only). Every other prop comes from the rendered element (`as`, default `'div'`). Give the\n * toolbar an `aria-label` (or `aria-labelledby`) that describes its purpose, e.g. \"Formatting\".\n */\nexport interface ToolbarOwnProps {\n  /**\n   * Layout and arrow-key axis: Left/Right move between items when horizontal (mirrored in RTL),\n   * Up/Down when vertical. Exposed as `aria-orientation` and `data-orientation`.\n   * @default 'horizontal'\n   */\n  orientation?: Orientation;\n  /**\n   * Default size of `Toolbar.Button`, `Toolbar.ToggleButton` and `Toolbar.RadioButton` (their\n   * own `size` wins), and the toolbar's padding. Plain Buttons inside keep their own default.\n   * Exposed as `data-size`.\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Pressed `Toolbar.ToggleButton`s and checked `Toolbar.RadioButton`s, per group `name`\n   * (controlled): `{ format: ['bold'], align: ['center'] }`.\n   */\n  checkedValues?: CheckedValues;\n  /** Initial checked values for uncontrolled usage. @default {} */\n  defaultCheckedValues?: CheckedValues;\n  /**\n   * Called when a toggle or radio changes them (only on change): the new checked values first,\n   * then `details` with the group's `name`, its `checkedItems` and the `event` (Fluent's\n   * `onCheckedValueChange(event, { name, checkedItems })`; always passed, typed optional until 1.0).\n   */\n  onCheckedValuesChange?: CheckedValuesChangeHandler;\n}\n\n/**\n * Props of {@link Toolbar} rendered as `C` (default `'div'`). `ToolbarProps` without a type\n * argument is the 0.4 name: the props of a Toolbar rendered as a `<div>`, including `ref`.\n */\nexport type ToolbarProps<C extends React.ElementType = 'div'> = PolymorphicProps<\n  C,\n  ToolbarOwnProps\n>;\n\n/** The props the implementation reads, for any `as`. */\ntype ToolbarImplProps = ToolbarOwnProps &\n  React.HTMLAttributes<HTMLElement> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n  };\n\n/**\n * Every focusable control a toolbar can contain, whatever component renders it. Matches that\n * cannot take focus (a `type=\"hidden\"` input, a control CSS hides) are dropped by the roving hook.\n */\nconst TOOLBAR_ITEM_SELECTOR =\n  'button, [href], input, select, textarea, [role=\"button\"], [tabindex]';\n\n/** The toolbar's padding per size. */\nconst toolbarPaddingClasses: Record<Size, string> = {\n  'extra-small': 'p-0.5',\n  small: 'p-0.5',\n  medium: 'p-1',\n  large: 'p-1.5',\n  'extra-large': 'p-2',\n};\n\n// The root of the Toolbar compound; its component JSDoc is on the `Toolbar` export below (C-DOCS).\nconst ToolbarRoot: PolymorphicComponent<'div', ToolbarOwnProps> = (props) => {\n  const {\n    as,\n    orientation = 'horizontal',\n    size = 'medium',\n    checkedValues,\n    defaultCheckedValues,\n    onCheckedValuesChange,\n    className,\n    ref,\n    onKeyDown,\n    onFocus,\n    role,\n    'aria-orientation': ariaOrientation,\n    ...rest\n  } = props as ToolbarImplProps;\n\n  const { containerProps } = useRovingTabIndex({\n    itemSelector: TOOLBAR_ITEM_SELECTOR,\n    manageTabIndex: true,\n    tabStop: 'last-focused',\n    orientation,\n  });\n  const mergedRef = useMergedRefs<HTMLElement>(containerProps.ref, ref);\n\n  const checked = useCheckedValues(checkedValues, defaultCheckedValues, onCheckedValuesChange);\n  const registerCheckable = useToolbarCheckableRegistry();\n  const context = React.useMemo<ToolbarContextValue>(\n    () => ({ orientation, size, checked, registerCheckable }),\n    [orientation, size, checked, registerCheckable],\n  );\n\n  const Component: React.ElementType = as ?? 'div';\n  // The role and `aria-orientation` defaults apply wherever the consumer's value is `undefined` or\n  // `null` (as in Button), so a wrapper forwarding its own unset props keeps them.\n  return (\n    <ToolbarContext.Provider value={context}>\n      <Component\n        data-size={size}\n        data-orientation={orientation}\n        {...rest}\n        role={role ?? 'toolbar'}\n        aria-orientation={ariaOrientation ?? orientation}\n        ref={mergedRef}\n        data-roving-container=\"\"\n        onKeyDown={composeEventHandlers(onKeyDown, containerProps.onKeyDown)}\n        onFocus={composeEventHandlers(onFocus, containerProps.onFocus, {\n          checkDefaultPrevented: false,\n        })}\n        className={cn(\n          toolbarClassNames.root,\n          'inline-flex items-center gap-1 rounded border border-border',\n          toolbarPaddingClasses[size],\n          orientation === 'vertical' && 'flex-col items-stretch',\n          className,\n        )}\n      />\n    </ToolbarContext.Provider>\n  );\n};\nToolbarRoot.displayName = 'Toolbar';\n\n/**\n * A container for a set of controls (APG Toolbar pattern): `role=\"toolbar\"`, one Tab stop, and\n * arrow-key navigation between its controls.\n *\n * - Works with any children (Buttons, ToggleButtons, links, inputs, value controls such as\n *   Checkbox or Dropdown): the focusable controls are found in the DOM, and the Toolbar sets their\n *   `tabIndex` itself (one `0`, the rest `-1`). The `type=\"hidden\"` input that a named value\n *   control renders never counts as a control, and controls that CSS hides are skipped.\n * - Parts: `Toolbar.Button`, `Toolbar.ToggleButton` and `Toolbar.RadioButton` take the toolbar's\n *   `size` (default `'medium'`) and the `subtle` appearance by default; `Toolbar.RadioGroup`,\n *   `Toolbar.Group` and `Toolbar.Divider` lay them out. Plain Buttons keep their own defaults.\n * - State: the pressed `Toolbar.ToggleButton`s and the checked `Toolbar.RadioButton` of each\n *   group live in `checkedValues`/`defaultCheckedValues`, per group `name`, and every change calls\n *   `onCheckedValuesChange(checkedValues, details)`. The state is in the server HTML.\n * - Left/Right (Up/Down when `orientation=\"vertical\"`) move focus and wrap; Home/End jump to the\n *   first/last control; Left/Right are mirrored in RTL. Natively disabled controls are skipped,\n *   also when a child disables them on its own; `disabledFocusable` ones stay in the arrow-key\n *   order (APG), so a Tooltip can explain why they are unavailable. The arrows never press a\n *   toggle or check a radio: Space, Enter or a click does.\n * - The radios of a `Toolbar.RadioGroup` are part of that arrow-key order, and Up/Down (Left/Right\n *   in a vertical toolbar) also move among them, wrapping inside the group.\n * - Tab returns to the last focused control. Focusing a nested composite (radio group, tab list)\n *   or a text field, select, slider or spin button keeps the Tab stop where it was.\n * - Text fields, selects, sliders, spin buttons and editable comboboxes keep their own arrow keys\n *   (the caret moves). A Dropdown (select-only combobox) does not: Left/Right move past it. It\n *   keeps Up/Down, Home and End for its list, so in a vertical toolbar the arrows cannot leave it.\n * - Elements with their own `tabIndex={-1}` are left alone, and a nested composite widget (a\n *   RadioGroup, a tab list, …; not `Toolbar.RadioGroup`) counts as one control that keeps its own\n *   Tab stop and arrow keys.\n * - A Menu or Popover opened from a control keeps its own keys: arrows, Home and End pressed in\n *   the popup never move focus back to the toolbar's controls.\n * - A consumer `onKeyDown` runs first; `event.preventDefault()` in it cancels the navigation.\n * - Renders `data-size` and `data-orientation`.\n *\n * React Server Components cannot dot into a client module: import the flat names\n * `ToolbarButton`, `ToolbarToggleButton`, `ToolbarRadioGroup`, `ToolbarRadioButton`,\n * `ToolbarGroup` and `ToolbarDivider` there; `Toolbar.Button` etc. work in client files.\n *\n * @example\n * <Toolbar aria-label=\"Formatting\" defaultCheckedValues={{ format: ['bold'], align: ['left'] }}>\n *   <Toolbar.ToggleButton name=\"format\" value=\"bold\" icon={<BoldIcon />} aria-label=\"Bold\" />\n *   <Toolbar.ToggleButton name=\"format\" value=\"code\" icon={<CodeIcon />} aria-label=\"Code\" />\n *   <Toolbar.Divider />\n *   <Toolbar.RadioGroup aria-label=\"Text alignment\">\n *     <Toolbar.RadioButton name=\"align\" value=\"left\" icon={<AlignLeftIcon />} aria-label=\"Left\" />\n *     <Toolbar.RadioButton name=\"align\" value=\"center\" icon={<AlignCenterIcon />} aria-label=\"Center\" />\n *   </Toolbar.RadioGroup>\n * </Toolbar>\n */\nexport const Toolbar = /* @__PURE__ */ Object.assign(ToolbarRoot, {\n  Button: ToolbarButton,\n  ToggleButton: ToolbarToggleButton,\n  RadioGroup: ToolbarRadioGroup,\n  RadioButton: ToolbarRadioButton,\n  Group: ToolbarGroup,\n  Divider: ToolbarDivider,\n});\n"],"mappings":";;;;;;;;;;;;AA4FA,IAAMC,IACJ,0EAGIC,IAA8C;CAClD,eAAe;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACP,eAAe;AACjB,GAGMC,KAA6D,MAAU;CAC3E,IAAM,EACJ,OACA,iBAAc,cACd,UAAO,UACP,kBACA,yBACA,0BACA,cACA,QACA,cACA,YACA,SACA,oBAAoBC,GACpB,GAAGC,MACDC,GAEE,EAAE,sBAAmBC,EAAkB;EAC3C,cAAcN;EACd,gBAAgB;EAChB,SAAS;EACT;CACF,CAAC,GACKO,IAAYC,EAA2BC,EAAe,KAAKC,CAAG,GAE9DC,IAAUC,EAAiBC,GAAeC,GAAsBC,CAAqB,GACrFC,IAAoBC,EAA4B,GAChDC,IAAUnB,EAAM,eACb;EAAE;EAAa;EAAM;EAAS;CAAkB,IACvD;EAACoB;EAAaC;EAAMT;EAASK;CAAiB,CAChD,GAEMK,IAA+BC,KAAM;CAG3C,OACE,kBAACC,EAAe,UAAhB;EAAyB,OAAOL;EAC9B,UAAA,kBAACG,GAAD;GACE,aAAWD;GACX,oBAAkBD;GAClB,GAAIf;GACJ,MAAMoB,KAAQ;GACd,oBAAkBrB,KAAmBgB;GACrC,KAAKZ;GACL,yBAAsB;GACtB,WAAWkB,EAAqBC,GAAWjB,EAAe,SAAS;GACnE,SAASgB,EAAqBE,GAASlB,EAAe,SAAS,EAC7D,uBAAuB,GACzB,CAAC;GACD,WAAWmB,EACTC,EAAkB,MAClB,+DACA5B,EAAsBmB,IACtBD,MAAgB,cAAc,0BAC9BW,CACF;EACD,CAAA;CACsB,CAAA;AAE7B;AACA,EAAY,cAAc;AAmD1B,IAAaC,IAA0B,uBAAO,OAAO7B,GAAa;CAChE,QAAQ8B;CACR,cAAcC;CACd,YAAYC;CACZ,aAAaC;CACb,OAAOC;CACP,SAASC;AACX,CAAC"}

package/dist/components/button/Toolbar.parts.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/slot.cjs"),i=require("../../lib/composeEventHandlers.cjs"),a=require("../../lib/direction.cjs"),o=require("../../lib/styles.cjs"),s=require("./Button.cjs"),c=require("./ToggleButton.cjs"),l=require("./Toolbar.context.cjs");let u=require("react");u=e.__toESM(u,1);let d=require("react/jsx-runtime");var f=s.Button,p=`h-auto min-w-0 flex-col gap-0.5 px-2 py-1 text-caption-1`,m={"extra-small":`size-5 justify-center [&>svg]:size-full`,small:`size-5 justify-center [&>svg]:size-full`,medium:`size-6 justify-center [&>svg]:size-full`,large:`size-6 justify-center [&>svg]:size-full`,"extra-large":`size-6 justify-center [&>svg]:size-full`};function h(e,t){if(!r.slotRendersContent(e))return e;let n=r.resolveSlot(e,`span`,t);return n?{...n.props,as:n.Component,children:n.children}:e}var g=e=>{let{vertical:n=!1,appearance:r=`subtle`,size:i,icon:a,className:o,...s}=e,c=l.useToolbarContext(`Toolbar.Button`),u=i??c.size;return(0,d.jsx)(f,{...s,appearance:r,size:u,icon:n?h(a,m[u]):a,"data-vertical":n?``:void 0,className:t.cn(n&&p,o)})};g.displayName=`ToolbarButton`;function _(e,t,n){u.useEffect(()=>e(t,n),[e,t,n])}var v=({name:e,value:t,appearance:n=`subtle`,size:r,onClick:a,...o})=>{let s=l.useToolbarContext(`Toolbar.ToggleButton`),{checked:u}=s;return _(s.registerCheckable,e,t),(0,d.jsx)(c.ToggleButton,{...o,appearance:n,size:r??s.size,pressed:u.isChecked(e,t),onClick:i.composeEventHandlers(a,n=>u.toggle(e,t,n.nativeEvent))})};v.displayName=`ToolbarToggleButton`;var y=({name:e,value:t,appearance:n=`subtle`,size:r,onClick:a,...o})=>{let s=l.useToolbarContext(`Toolbar.RadioButton`),{checked:u}=s;return _(s.registerCheckable,e,t),(0,d.jsx)(c.ToggleButton,{...o,role:`radio`,appearance:n,size:r??s.size,pressed:u.isChecked(e,t),onClick:i.composeEventHandlers(a,n=>u.select(e,t,n.nativeEvent))})};y.displayName=`ToolbarRadioButton`;var b=({className:e,onKeyDown:r,ref:o,...s})=>{let{orientation:c}=l.useToolbarContext(`Toolbar.RadioGroup`),f=s[`aria-label`],p=s[`aria-labelledby`];u.useEffect(()=>{f||p||n.warnOnce(`Toolbar.RadioGroup:name`,'Toolbar.RadioGroup: a radio group needs an accessible name that says what it chooses (e.g. "Text alignment"). Pass `aria-label` or `aria-labelledby`.')},[f,p]);let m=e=>{if(e.metaKey||e.ctrlKey||e.altKey)return;let t=e.currentTarget,n=c===`vertical`?a.getArrowIntent(e.key,{orientation:`horizontal`,dir:a.getDirection(t)}):a.getArrowIntent(e.key,{orientation:`vertical`,dir:`ltr`});if(!n)return;let r=Array.from(t.querySelectorAll(`[role="radio"]`)),i=r.findIndex(t=>t.contains(e.target));if(i===-1)return;e.preventDefault();let o=n===`next`?1:-1,s=r.length;for(let e=1;e<s;e++){let t=r[((i+o*e)%s+s)%s];if(!t.matches(`:disabled`)&&(t.focus(),t.ownerDocument.activeElement===t))return}};return(0,d.jsx)(`div`,{...s,ref:o,role:`radiogroup`,"data-roving-transparent":``,onKeyDown:i.composeEventHandlers(r,m),className:t.cn(`flex gap-1`,c===`vertical`&&`flex-col`,e)})};b.displayName=`ToolbarRadioGroup`;var x=({role:e,className:n,ref:r,...i})=>{let{orientation:a}=l.useToolbarContext(`Toolbar.Group`),o=!!(i[`aria-label`]||i[`aria-labelledby`]);return(0,d.jsx)(`div`,{role:e??(o?`group`:`presentation`),"data-orientation":a,...i,ref:r,className:t.cn(`flex gap-1`,a===`vertical`&&`flex-col`,n)})};x.displayName=`ToolbarGroup`;var S=({className:e,ref:n,...r})=>{let{orientation:i}=l.useToolbarContext(`Toolbar.Divider`),a=i===`vertical`;return(0,d.jsx)(`div`,{role:`separator`,"aria-orientation":a?`horizontal`:`vertical`,...r,ref:n,className:t.cn(a?`my-1 h-0 shrink-0 self-stretch border-t border-border`:`mx-1 w-0 shrink-0 self-stretch border-s border-border`,o.forcedColors.border,e)})};S.displayName=`ToolbarDivider`,exports.ToolbarButton=g,exports.ToolbarDivider=S,exports.ToolbarGroup=x,exports.ToolbarRadioButton=y,exports.ToolbarRadioGroup=b,exports.ToolbarToggleButton=v;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/composeEventHandlers.cjs"),i=require("../../lib/classNames.cjs"),a=require("../../lib/direction.cjs"),o=require("../../lib/styles.cjs"),s=require("./Button.cjs"),c=require("./Button.slots.cjs"),l=require("./ToggleButton.cjs"),u=require("./Toolbar.context.cjs");let d=require("react");d=e.__toESM(d,1);let f=require("react/jsx-runtime");var p=s.Button,m=`h-auto min-w-0 flex-col gap-0.5 px-2 py-1 text-caption-1`,h={"extra-small":`size-5 justify-center [&>svg]:size-full`,small:`size-5 justify-center [&>svg]:size-full`,medium:`size-6 justify-center [&>svg]:size-full`,large:`size-6 justify-center [&>svg]:size-full`,"extra-large":`size-6 justify-center [&>svg]:size-full`},g=e=>{let{vertical:n=!1,appearance:r=`subtle`,size:a,icon:o,className:s,...l}=e,d=u.useToolbarContext(`Toolbar.Button`),g=a??d.size;return(0,f.jsx)(p,{...l,appearance:r,size:g,icon:c.withPartClass(n?c.withPartClass(o,h[g]):o,i.toolbarButtonClassNames.icon),"data-vertical":n?``:void 0,className:t.cn(i.toolbarButtonClassNames.root,n&&m,s)})};g.displayName=`ToolbarButton`;function _(e,t,n){d.useEffect(()=>e(t,n),[e,t,n])}var v=({name:e,value:n,appearance:a=`subtle`,size:o,icon:s,className:d,onClick:p,...m})=>{let h=u.useToolbarContext(`Toolbar.ToggleButton`),{checked:g}=h;return _(h.registerCheckable,e,n),(0,f.jsx)(l.ToggleButton,{...m,icon:c.withPartClass(s,i.toolbarToggleButtonClassNames.icon),className:t.cn(i.toolbarToggleButtonClassNames.root,d),appearance:a,size:o??h.size,pressed:g.isChecked(e,n),onClick:r.composeEventHandlers(p,t=>g.toggle(e,n,t.nativeEvent))})};v.displayName=`ToolbarToggleButton`;var y=({name:e,value:n,appearance:a=`subtle`,size:o,icon:s,className:d,onClick:p,...m})=>{let h=u.useToolbarContext(`Toolbar.RadioButton`),{checked:g}=h;return _(h.registerCheckable,e,n),(0,f.jsx)(l.ToggleButton,{...m,icon:c.withPartClass(s,i.toolbarRadioButtonClassNames.icon),className:t.cn(i.toolbarRadioButtonClassNames.root,d),role:`radio`,appearance:a,size:o??h.size,pressed:g.isChecked(e,n),onClick:r.composeEventHandlers(p,t=>g.select(e,n,t.nativeEvent))})};y.displayName=`ToolbarRadioButton`;var b=({className:e,onKeyDown:o,ref:s,...c})=>{let{orientation:l}=u.useToolbarContext(`Toolbar.RadioGroup`),p=c[`aria-label`],m=c[`aria-labelledby`];d.useEffect(()=>{p||m||n.warnOnce(`Toolbar.RadioGroup:name`,'Toolbar.RadioGroup: a radio group needs an accessible name that says what it chooses (e.g. "Text alignment"). Pass `aria-label` or `aria-labelledby`.')},[p,m]);let h=e=>{if(e.metaKey||e.ctrlKey||e.altKey)return;let t=e.currentTarget,n=l===`vertical`?a.getArrowIntent(e.key,{orientation:`horizontal`,dir:a.getDirection(t)}):a.getArrowIntent(e.key,{orientation:`vertical`,dir:`ltr`});if(!n)return;let r=Array.from(t.querySelectorAll(`[role="radio"]`)),i=r.findIndex(t=>t.contains(e.target));if(i===-1)return;e.preventDefault();let o=n===`next`?1:-1,s=r.length;for(let e=1;e<s;e++){let t=r[((i+o*e)%s+s)%s];if(!t.matches(`:disabled`)&&(t.focus(),t.ownerDocument.activeElement===t))return}};return(0,f.jsx)(`div`,{...c,ref:s,role:`radiogroup`,"data-roving-transparent":``,onKeyDown:r.composeEventHandlers(o,h),className:t.cn(i.toolbarRadioGroupClassNames.root,`flex gap-1`,l===`vertical`&&`flex-col`,e)})};b.displayName=`ToolbarRadioGroup`;var x=({role:e,className:n,ref:r,...a})=>{let{orientation:o}=u.useToolbarContext(`Toolbar.Group`),s=!!(a[`aria-label`]||a[`aria-labelledby`]);return(0,f.jsx)(`div`,{role:e??(s?`group`:`presentation`),"data-orientation":o,...a,ref:r,className:t.cn(i.toolbarGroupClassNames.root,`flex gap-1`,o===`vertical`&&`flex-col`,n)})};x.displayName=`ToolbarGroup`;var S=({className:e,ref:n,...r})=>{let{orientation:a}=u.useToolbarContext(`Toolbar.Divider`),s=a===`vertical`;return(0,f.jsx)(`div`,{role:`separator`,"aria-orientation":s?`horizontal`:`vertical`,...r,ref:n,className:t.cn(i.toolbarDividerClassNames.root,s?`my-1 h-0 shrink-0 self-stretch border-t border-border`:`mx-1 w-0 shrink-0 self-stretch border-s border-border`,o.forcedColors.border,e)})};S.displayName=`ToolbarDivider`,exports.ToolbarButton=g,exports.ToolbarDivider=S,exports.ToolbarGroup=x,exports.ToolbarRadioButton=y,exports.ToolbarRadioGroup=b,exports.ToolbarToggleButton=v;
 //# sourceMappingURL=Toolbar.parts.cjs.map

package/dist/components/button/Toolbar.parts.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.parts.cjs","names":["Button","slotRendersContent","resolveSlot","useToolbarContext","cn","ToggleButton","composeEventHandlers","getArrowIntent","getDirection","forcedColors","require_runtime","require_cn","require_dev","require_slot","require_composeEventHandlers","require_direction","require_styles","require_Button","require_ToggleButton","require_Toolbar_context","react","react_jsx_runtime","BaseButton","verticalButtonClasses","verticalIconBoxClasses","withIconBox","icon","resolved","box","ToolbarButton","rest","props","toolbar","effectiveSize","size","vertical","className","useRegisterCheckable","register","name","value","ToolbarToggleButton","checked","onClick","event","ToolbarRadioButton","ToolbarRadioGroup","ariaLabel","ariaLabelledBy","handleCrossAxisKeyDown","group","intent","orientation","radios","current","radio","step","count","offset","candidate","onKeyDown","ToolbarGroup","named","role","ToolbarDivider"],"sources":["../../../src/components/button/Toolbar.parts.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnOnce } from '../../lib/dev';\nimport { getArrowIntent, getDirection } from '../../lib/direction';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport { resolveSlot, slotRendersContent } from '../../lib/slot';\nimport type { SlotObject } from '../../lib/slot';\nimport { forcedColors } from '../../lib/styles';\nimport type { Size, Slot } from '../../lib/types';\nimport { Button } from './Button';\nimport type { ButtonOwnProps } from './Button';\nimport { ToggleButton } from './ToggleButton';\nimport type { ToggleButtonProps } from './ToggleButton';\nimport { useToolbarContext } from './Toolbar.context';\n\n/*\n * The parts of a Toolbar: `Toolbar.Button`, `Toolbar.ToggleButton`, `Toolbar.RadioGroup`,\n * `Toolbar.RadioButton`, `Toolbar.Group` and `Toolbar.Divider` (attached in `Toolbar.tsx`, which\n * also exports their flat names).\n */\n\n// ---------------------------------------------------------------------------\n// Toolbar.Button\n// ---------------------------------------------------------------------------\n\n/** Toolbar.Button's own props: Button's, plus `vertical`. Default appearance `'subtle'`. */\nexport interface ToolbarButtonOwnProps extends ButtonOwnProps {\n  /** The icon above the label (a 24 px icon box and a caption-size label). @default false */\n  vertical?: boolean;\n}\n\n/** Props of {@link ToolbarButton} rendered as `C` (default `'button'`), including `ref`. */\nexport type ToolbarButtonProps<C extends React.ElementType = 'button'> = PolymorphicProps<\n  C,\n  ToolbarButtonOwnProps\n>;\n\n/** The props the implementation reads, for any `as`. */\ntype ToolbarButtonImplProps = ToolbarButtonOwnProps & { className?: string };\n\n/** `Button` widened to any element props, so `as` and the rest props pass through untyped. */\nconst BaseButton = Button as React.ElementType;\n\n/** The layout of a vertical button: the icon above a caption-size label, no minimum width. */\nconst verticalButtonClasses = 'h-auto min-w-0 flex-col gap-0.5 px-2 py-1 text-caption-1';\n\n/** The icon box of a vertical button per size: 24 px, 20 px at the two small sizes. */\nconst verticalIconBoxClasses: Record<Size, string> = {\n  'extra-small': 'size-5 justify-center [&>svg]:size-full',\n  small: 'size-5 justify-center [&>svg]:size-full',\n  medium: 'size-6 justify-center [&>svg]:size-full',\n  large: 'size-6 justify-center [&>svg]:size-full',\n  'extra-large': 'size-6 justify-center [&>svg]:size-full',\n};\n\n/**\n * `icon` as a slot object whose element also carries `box`: shorthand content becomes the\n * children of a span with `box`, a slot object keeps its element and attributes and gets `box`\n * before its own classes. An icon that renders nothing stays as it is (no icon).\n */\nfunction withIconBox(icon: Slot<'span'> | undefined, box: string): Slot<'span'> | undefined {\n  if (!slotRendersContent(icon)) return icon;\n  const resolved = resolveSlot(icon, 'span', box);\n  if (!resolved) return icon;\n  return {\n    ...resolved.props,\n    as: resolved.Component,\n    children: resolved.children,\n  } as SlotObject<'span'>;\n}\n\n/**\n * A Button with the toolbar's size and the `subtle` appearance by default (your `size` and\n * `appearance` win). `vertical` puts the icon above a caption-size label, for ribbon-style\n * toolbars. Polymorphic like Button (`as=\"a\"`, a router link). Must be rendered inside a\n * {@link Toolbar}; flat export for React Server Components (`Toolbar.Button` in client files).\n *\n * @example\n * <Toolbar.Button icon={<ShareIcon />}>Share</Toolbar.Button>\n * <Toolbar.Button vertical icon={<PasteIcon />}>Paste</Toolbar.Button>\n */\nexport const ToolbarButton: PolymorphicComponent<'button', ToolbarButtonOwnProps> = (props) => {\n  const {\n    vertical = false,\n    appearance = 'subtle',\n    size,\n    icon,\n    className,\n    ...rest\n  } = props as ToolbarButtonImplProps;\n  const toolbar = useToolbarContext('Toolbar.Button');\n  const effectiveSize = size ?? toolbar.size;\n  return (\n    <BaseButton\n      {...rest}\n      appearance={appearance}\n      size={effectiveSize}\n      icon={vertical ? withIconBox(icon, verticalIconBoxClasses[effectiveSize]) : icon}\n      data-vertical={vertical ? '' : undefined}\n      className={cn(vertical && verticalButtonClasses, className)}\n    />\n  );\n};\nToolbarButton.displayName = 'ToolbarButton';\n\n// ---------------------------------------------------------------------------\n// Toolbar.ToggleButton and Toolbar.RadioButton\n// ---------------------------------------------------------------------------\n\n/** Properties for Toolbar.ToggleButton: ToggleButton's, bound to the Toolbar's `checkedValues`. */\nexport interface ToolbarToggleButtonProps extends Omit<\n  ToggleButtonProps,\n  'pressed' | 'defaultPressed' | 'onPressedChange' | 'name' | 'value'\n> {\n  /** The group: a key of the Toolbar's `checkedValues`. */\n  name: string;\n  /** The value in `checkedValues[name]` while the toggle is pressed. */\n  value: string;\n}\n\n/** Properties for Toolbar.RadioButton: one choice of a `Toolbar.RadioGroup`. */\nexport interface ToolbarRadioButtonProps extends Omit<\n  ToggleButtonProps,\n  'pressed' | 'defaultPressed' | 'onPressedChange' | 'name' | 'value' | 'role'\n> {\n  /** The group: a key of the Toolbar's `checkedValues`; radio buttons of one `name` are exclusive. */\n  name: string;\n  /** The group's value while this radio is checked. */\n  value: string;\n}\n\n/** Registers a part's `name`/`value` with its toolbar (the duplicate-pair warning). */\nfunction useRegisterCheckable(\n  register: (name: string, value: string) => () => void,\n  name: string,\n  value: string,\n): void {\n  React.useEffect(() => register(name, value), [register, name, value]);\n}\n\n/**\n * A ToggleButton with the toolbar's size and the `subtle` appearance by default, pressed while\n * `value` is in the Toolbar's `checkedValues[name]`. A click adds or removes it (your `onClick`\n * runs first; `event.preventDefault()` cancels the change) and calls the Toolbar's\n * `onCheckedValuesChange`. `name` and `value` are binding keys, not rendered as attributes.\n * `isAccessible` and `disabledFocusable` work as on ToggleButton. Must be rendered inside a\n * {@link Toolbar}; flat export for React Server Components (`Toolbar.ToggleButton` in client\n * files).\n *\n * @example\n * <Toolbar aria-label=\"Formatting\" defaultCheckedValues={{ format: ['bold'] }}>\n *   <Toolbar.ToggleButton name=\"format\" value=\"bold\" icon={<BoldIcon />} aria-label=\"Bold\" />\n * </Toolbar>\n */\nexport const ToolbarToggleButton = ({\n  name,\n  value,\n  appearance = 'subtle',\n  size,\n  onClick,\n  ...rest\n}: ToolbarToggleButtonProps) => {\n  const toolbar = useToolbarContext('Toolbar.ToggleButton');\n  const { checked } = toolbar;\n  useRegisterCheckable(toolbar.registerCheckable, name, value);\n  return (\n    <ToggleButton\n      {...rest}\n      appearance={appearance}\n      size={size ?? toolbar.size}\n      pressed={checked.isChecked(name, value)}\n      onClick={composeEventHandlers(onClick, (event) =>\n        checked.toggle(name, value, event.nativeEvent),\n      )}\n    />\n  );\n};\nToolbarToggleButton.displayName = 'ToolbarToggleButton';\n\n/**\n * A ToggleButton with `role=\"radio\"` (it reports its state with `aria-checked` and\n * `data-checked`, besides `data-pressed`), the toolbar's size and the `subtle` appearance by\n * default: one choice of a `Toolbar.RadioGroup`, checked while `value` is the Toolbar's\n * `checkedValues[name]`. Space, Enter or a click checks it (your `onClick` runs first;\n * `event.preventDefault()` cancels); the arrow keys only move focus. A click on the checked radio\n * changes nothing. Must be rendered inside a {@link Toolbar}; flat export for React Server\n * Components (`Toolbar.RadioButton` in client files).\n *\n * @example\n * <Toolbar.RadioGroup aria-label=\"Text alignment\">\n *   <Toolbar.RadioButton name=\"align\" value=\"left\" icon={<AlignLeftIcon />} aria-label=\"Left\" />\n *   <Toolbar.RadioButton name=\"align\" value=\"center\" icon={<AlignCenterIcon />} aria-label=\"Center\" />\n * </Toolbar.RadioGroup>\n */\nexport const ToolbarRadioButton = ({\n  name,\n  value,\n  appearance = 'subtle',\n  size,\n  onClick,\n  ...rest\n}: ToolbarRadioButtonProps) => {\n  const toolbar = useToolbarContext('Toolbar.RadioButton');\n  const { checked } = toolbar;\n  useRegisterCheckable(toolbar.registerCheckable, name, value);\n  return (\n    <ToggleButton\n      {...rest}\n      role=\"radio\"\n      appearance={appearance}\n      size={size ?? toolbar.size}\n      pressed={checked.isChecked(name, value)}\n      onClick={composeEventHandlers(onClick, (event) =>\n        checked.select(name, value, event.nativeEvent),\n      )}\n    />\n  );\n};\nToolbarRadioButton.displayName = 'ToolbarRadioButton';\n\n// ---------------------------------------------------------------------------\n// Toolbar.RadioGroup\n// ---------------------------------------------------------------------------\n\n/** Properties for Toolbar.RadioGroup. */\nexport interface ToolbarRadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Ref to the group element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * A set of `Toolbar.RadioButton`s of which one is checked (`role=\"radiogroup\"`; name it with\n * `aria-label`). Its radios are part of the toolbar's arrow-key order; Up and Down (Left and Right\n * in a vertical toolbar) also move among the group's radios, wrapping inside the group. Arrows\n * only move focus; Space, Enter or a click checks.\n *\n * - The cross-axis keys skip natively disabled radios; a `disabledFocusable` one stays reachable,\n *   as in the toolbar's own arrow order. A consumer `onKeyDown` runs first\n *   (`event.preventDefault()` cancels the move).\n * - Without `aria-label` or `aria-labelledby` it warns once in development.\n * - Its `role` is always `radiogroup` (a `role` you pass is ignored): its radios need it.\n * - Must be rendered inside a {@link Toolbar}; flat export for React Server Components\n *   (`Toolbar.RadioGroup` in client files).\n *\n * @example\n * <Toolbar.RadioGroup aria-label=\"Text alignment\">\n *   <Toolbar.RadioButton name=\"align\" value=\"left\">Left</Toolbar.RadioButton>\n *   <Toolbar.RadioButton name=\"align\" value=\"right\">Right</Toolbar.RadioButton>\n * </Toolbar.RadioGroup>\n */\nexport const ToolbarRadioGroup = ({\n  className,\n  onKeyDown,\n  ref,\n  ...rest\n}: ToolbarRadioGroupProps) => {\n  const { orientation } = useToolbarContext('Toolbar.RadioGroup');\n  const ariaLabel = rest['aria-label'];\n  const ariaLabelledBy = rest['aria-labelledby'];\n  React.useEffect(() => {\n    if (ariaLabel || ariaLabelledBy) return;\n    warnOnce(\n      'Toolbar.RadioGroup:name',\n      'Toolbar.RadioGroup: a radio group needs an accessible name that says what it chooses (e.g. \"Text alignment\"). Pass `aria-label` or `aria-labelledby`.',\n    );\n  }, [ariaLabel, ariaLabelledBy]);\n\n  // The cross axis (APG Toolbar): Down/Up in a horizontal toolbar, \"next\"/\"previous\" of Left/Right\n  // in a vertical one, move among the group's radios with wrap and check nothing. The toolbar's\n  // roving hook records the newly focused radio as its tab stop through its focus handler.\n  const handleCrossAxisKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.metaKey || event.ctrlKey || event.altKey) return;\n    const group = event.currentTarget;\n    const intent =\n      orientation === 'vertical'\n        ? getArrowIntent(event.key, { orientation: 'horizontal', dir: getDirection(group) })\n        : getArrowIntent(event.key, { orientation: 'vertical', dir: 'ltr' });\n    if (!intent) return;\n    const radios = Array.from(group.querySelectorAll<HTMLElement>('[role=\"radio\"]'));\n    const current = radios.findIndex((radio) => radio.contains(event.target as Node));\n    if (current === -1) return;\n    event.preventDefault();\n    const step = intent === 'next' ? 1 : -1;\n    const count = radios.length;\n    for (let offset = 1; offset < count; offset++) {\n      const candidate = radios[(((current + step * offset) % count) + count) % count];\n      if (candidate.matches(':disabled')) continue;\n      candidate.focus();\n      // A radio that CSS hides does not take focus: try the next one.\n      if (candidate.ownerDocument.activeElement === candidate) return;\n    }\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      // Its radios and the cross-axis keys need the radiogroup: the role is not replaceable.\n      role=\"radiogroup\"\n      data-roving-transparent=\"\"\n      onKeyDown={composeEventHandlers(onKeyDown, handleCrossAxisKeyDown)}\n      className={cn('flex gap-1', orientation === 'vertical' && 'flex-col', className)}\n    />\n  );\n};\nToolbarRadioGroup.displayName = 'ToolbarRadioGroup';\n\n// ---------------------------------------------------------------------------\n// Toolbar.Group and Toolbar.Divider\n// ---------------------------------------------------------------------------\n\n/** Properties for Toolbar.Group. */\nexport interface ToolbarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Ref to the group element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Lays out related controls in the toolbar's direction. It is `role=\"presentation\"`, or\n * `role=\"group\"` when you name it with `aria-label` or `aria-labelledby` (a `role` you pass\n * wins). Its controls stay in the toolbar's arrow-key order. Renders `data-orientation`. Must be\n * rendered inside a {@link Toolbar}; flat export for React Server Components (`Toolbar.Group` in\n * client files).\n *\n * @example\n * <Toolbar.Group aria-label=\"Sharing\">\n *   <Toolbar.Button>Share</Toolbar.Button>\n * </Toolbar.Group>\n */\nexport const ToolbarGroup = ({ role, className, ref, ...rest }: ToolbarGroupProps) => {\n  const { orientation } = useToolbarContext('Toolbar.Group');\n  const named = Boolean(rest['aria-label'] || rest['aria-labelledby']);\n  return (\n    <div\n      role={role ?? (named ? 'group' : 'presentation')}\n      data-orientation={orientation}\n      {...rest}\n      ref={ref}\n      className={cn('flex gap-1', orientation === 'vertical' && 'flex-col', className)}\n    />\n  );\n};\nToolbarGroup.displayName = 'ToolbarGroup';\n\n/** Properties for Toolbar.Divider. */\nexport interface ToolbarDividerProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'children'\n> {\n  /** Ref to the separator element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * A separator between groups, drawn across the toolbar (vertical in a horizontal toolbar):\n * `role=\"separator\"` with `aria-orientation`. It is not focusable, so the arrow keys pass it.\n * Must be rendered inside a {@link Toolbar}; flat export for React Server Components\n * (`Toolbar.Divider` in client files).\n */\nexport const ToolbarDivider = ({ className, ref, ...rest }: ToolbarDividerProps) => {\n  const { orientation } = useToolbarContext('Toolbar.Divider');\n  const vertical = orientation === 'vertical';\n  return (\n    <div\n      role=\"separator\"\n      aria-orientation={vertical ? 'horizontal' : 'vertical'}\n      {...rest}\n      ref={ref}\n      className={cn(\n        vertical\n          ? 'my-1 h-0 shrink-0 self-stretch border-t border-border'\n          : 'mx-1 w-0 shrink-0 self-stretch border-s border-border',\n        forcedColors.border,\n        className,\n      )}\n    />\n  );\n};\nToolbarDivider.displayName = 'ToolbarDivider';\n"],"mappings":"icA0CA,IAAMsB,EAAatB,EAAAA,OAGbuB,EAAwB,2DAGxBC,EAA+C,CACnD,cAAe,0CACf,MAAO,0CACP,OAAQ,0CACR,MAAO,0CACP,cAAe,yCACjB,EAOA,SAASC,EAAY,EAAgC,EAAuC,CAC1F,GAAI,CAACxB,EAAAA,mBAAmByB,CAAI,EAAG,OAAOA,EACtC,IAAMC,EAAWzB,EAAAA,YAAYwB,EAAM,OAAQE,CAAG,EAE9C,OADKD,EACE,CACL,GAAGA,EAAS,MACZ,GAAIA,EAAS,UACb,SAAUA,EAAS,QACrB,EALsBD,CAMxB,CAYA,IAAaG,EAAwE,GAAU,CAC7F,GAAM,CACJ,WAAW,GACX,aAAa,SACb,OACA,OACA,YACA,GAAGC,GACDC,EACEC,EAAU7B,EAAAA,kBAAkB,gBAAgB,EAC5C8B,EAAgBC,GAAQF,EAAQ,KACtC,OACE,EAAAX,EAAA,IAAA,CAACC,EAAD,CACE,GAAIQ,EACQ,aACZ,KAAMG,EACN,KAAME,EAAWV,EAAYC,EAAMF,EAAuBS,EAAc,EAAIP,EAC5E,gBAAeS,EAAW,GAAK,IAAA,GAC/B,UAAW/B,EAAAA,GAAG+B,GAAYZ,EAAuBa,CAAS,CAC3D,CAAA,CAEL,EACA,EAAc,YAAc,gBA6B5B,SAASC,EACP,EACA,EACA,EACM,CACNjB,EAAM,cAAgBkB,EAASC,EAAMC,CAAK,EAAG,CAACF,EAAUC,EAAMC,CAAK,CAAC,CACtE,CAgBA,IAAaC,GAAuB,CAClC,OACA,QACA,aAAa,SACb,OACA,UACA,GAAGX,KAC2B,CAC9B,IAAME,EAAU7B,EAAAA,kBAAkB,sBAAsB,EAClD,CAAE,WAAY6B,EAEpB,OADAK,EAAqBL,EAAQ,kBAAmBO,EAAMC,CAAK,GAEzD,EAAAnB,EAAA,IAAA,CAAChB,EAAAA,aAAD,CACE,GAAIyB,EACQ,aACZ,KAAMI,GAAQF,EAAQ,KACtB,QAASU,EAAQ,UAAUH,EAAMC,CAAK,EACtC,QAASlC,EAAAA,qBAAqBqC,EAAU,GACtCD,EAAQ,OAAOH,EAAMC,EAAOI,EAAM,WAAW,CAC/C,CACD,CAAA,CAEL,EACA,EAAoB,YAAc,sBAiBlC,IAAaC,GAAsB,CACjC,OACA,QACA,aAAa,SACb,OACA,UACA,GAAGf,KAC0B,CAC7B,IAAME,EAAU7B,EAAAA,kBAAkB,qBAAqB,EACjD,CAAE,WAAY6B,EAEpB,OADAK,EAAqBL,EAAQ,kBAAmBO,EAAMC,CAAK,GAEzD,EAAAnB,EAAA,IAAA,CAAChB,EAAAA,aAAD,CACE,GAAIyB,EACJ,KAAK,QACO,aACZ,KAAMI,GAAQF,EAAQ,KACtB,QAASU,EAAQ,UAAUH,EAAMC,CAAK,EACtC,QAASlC,EAAAA,qBAAqBqC,EAAU,GACtCD,EAAQ,OAAOH,EAAMC,EAAOI,EAAM,WAAW,CAC/C,CACD,CAAA,CAEL,EACA,EAAmB,YAAc,qBAgCjC,IAAaE,GAAqB,CAChC,YACA,YACA,MACA,GAAGhB,KACyB,CAC5B,GAAM,CAAE,eAAgB3B,EAAAA,kBAAkB,oBAAoB,EACxD4C,EAAYjB,EAAK,cACjBkB,EAAiBlB,EAAK,mBAC5BV,EAAM,cAAgB,CAChB2B,GAAaC,GACjBpC,EAAA,SACE,0BACA,uJACF,CACF,EAAG,CAACmC,EAAWC,CAAc,CAAC,EAK9B,IAAMC,EAA0B,GAA+C,CAC7E,GAAIL,EAAM,SAAWA,EAAM,SAAWA,EAAM,OAAQ,OACpD,IAAMM,EAAQN,EAAM,cACdO,EACJC,IAAgB,WACZ7C,EAAAA,eAAeqC,EAAM,IAAK,CAAE,YAAa,aAAc,IAAKpC,EAAAA,aAAa0C,CAAK,CAAE,CAAC,EACjF3C,EAAAA,eAAeqC,EAAM,IAAK,CAAE,YAAa,WAAY,IAAK,KAAM,CAAC,EACvE,GAAI,CAACO,EAAQ,OACb,IAAME,EAAS,MAAM,KAAKH,EAAM,iBAA8B,gBAAgB,CAAC,EACzEI,EAAUD,EAAO,UAAW,GAAUE,EAAM,SAASX,EAAM,MAAc,CAAC,EAChF,GAAIU,IAAY,GAAI,OACpBV,EAAM,eAAe,EACrB,IAAMY,EAAOL,IAAW,OAAS,EAAI,GAC/BM,EAAQJ,EAAO,OACrB,IAAK,IAAIK,EAAS,EAAGA,EAASD,EAAO,IAAU,CAC7C,IAAME,EAAYN,IAAUC,EAAUE,EAAOE,GAAUD,EAASA,GAASA,GACzE,GAAI,GAAU,QAAQ,WAAW,IACjCE,EAAU,MAAM,EAEZA,EAAU,cAAc,gBAAkBA,GAAW,MAC3D,CACF,EAEA,OACE,EAAAtC,EAAA,IAAA,CAAC,MAAD,CACE,GAAIS,EACC,MAEL,KAAK,aACL,0BAAwB,GACxB,UAAWxB,EAAAA,qBAAqBsD,EAAWX,CAAsB,EACjE,UAAW7C,EAAAA,GAAG,aAAcgD,IAAgB,YAAc,WAAYhB,CAAS,CAChF,CAAA,CAEL,EACA,EAAkB,YAAc,oBAwBhC,IAAayB,GAAgB,CAAE,OAAM,YAAW,MAAK,GAAG/B,KAA8B,CACpF,GAAM,CAAE,eAAgB3B,EAAAA,kBAAkB,eAAe,EACnD2D,EAAQ,GAAQhC,EAAK,eAAiBA,EAAK,oBACjD,OACE,EAAAT,EAAA,IAAA,CAAC,MAAD,CACE,KAAM0C,IAASD,EAAQ,QAAU,gBACjC,mBAAkBV,EAClB,GAAItB,EACC,MACL,UAAW1B,EAAAA,GAAG,aAAcgD,IAAgB,YAAc,WAAYhB,CAAS,CAChF,CAAA,CAEL,EACA,EAAa,YAAc,eAiB3B,IAAa4B,GAAkB,CAAE,YAAW,MAAK,GAAGlC,KAAgC,CAClF,GAAM,CAAE,eAAgB3B,EAAAA,kBAAkB,iBAAiB,EACrDgC,EAAWiB,IAAgB,WACjC,OACE,EAAA/B,EAAA,IAAA,CAAC,MAAD,CACE,KAAK,YACL,mBAAkBc,EAAW,aAAe,WAC5C,GAAIL,EACC,MACL,UAAW1B,EAAAA,GACT+B,EACI,wDACA,wDACJ1B,EAAAA,aAAa,OACb2B,CACF,CACD,CAAA,CAEL,EACA,EAAe,YAAc"}
+{"version":3,"file":"Toolbar.parts.cjs","names":["Button","useToolbarContext","withPartClass","toolbarButtonClassNames","cn","ToggleButton","toolbarToggleButtonClassNames","composeEventHandlers","toolbarRadioButtonClassNames","getArrowIntent","getDirection","toolbarRadioGroupClassNames","toolbarGroupClassNames","toolbarDividerClassNames","forcedColors","require_runtime","require_cn","require_dev","require_composeEventHandlers","require_classNames","require_direction","require_styles","require_Button","require_Button_slots","require_ToggleButton","require_Toolbar_context","react","react_jsx_runtime","BaseButton","verticalButtonClasses","verticalIconBoxClasses","ToolbarButton","rest","props","toolbar","effectiveSize","size","vertical","icon","className","useRegisterCheckable","register","name","value","ToolbarToggleButton","checked","onClick","event","ToolbarRadioButton","ToolbarRadioGroup","ariaLabel","ariaLabelledBy","handleCrossAxisKeyDown","group","intent","orientation","radios","current","radio","step","count","offset","candidate","onKeyDown","ToolbarGroup","named","role","ToolbarDivider"],"sources":["../../../src/components/button/Toolbar.parts.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport {\n  toolbarButtonClassNames,\n  toolbarDividerClassNames,\n  toolbarGroupClassNames,\n  toolbarRadioButtonClassNames,\n  toolbarRadioGroupClassNames,\n  toolbarToggleButtonClassNames,\n} from '../../lib/classNames';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnOnce } from '../../lib/dev';\nimport { getArrowIntent, getDirection } from '../../lib/direction';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport { forcedColors } from '../../lib/styles';\nimport type { Size } from '../../lib/types';\nimport { Button } from './Button';\nimport type { ButtonOwnProps } from './Button';\nimport { ToggleButton } from './ToggleButton';\nimport type { ToggleButtonProps } from './ToggleButton';\nimport { withPartClass } from './Button.slots';\nimport { useToolbarContext } from './Toolbar.context';\n\n/*\n * The parts of a Toolbar: `Toolbar.Button`, `Toolbar.ToggleButton`, `Toolbar.RadioGroup`,\n * `Toolbar.RadioButton`, `Toolbar.Group` and `Toolbar.Divider` (attached in `Toolbar.tsx`, which\n * also exports their flat names).\n */\n\n// ---------------------------------------------------------------------------\n// Toolbar.Button\n// ---------------------------------------------------------------------------\n\n/** Toolbar.Button's own props: Button's, plus `vertical`. Default appearance `'subtle'`. */\nexport interface ToolbarButtonOwnProps extends ButtonOwnProps {\n  /** The icon above the label (a 24 px icon box and a caption-size label). @default false */\n  vertical?: boolean;\n}\n\n/** Props of {@link ToolbarButton} rendered as `C` (default `'button'`), including `ref`. */\nexport type ToolbarButtonProps<C extends React.ElementType = 'button'> = PolymorphicProps<\n  C,\n  ToolbarButtonOwnProps\n>;\n\n/** The props the implementation reads, for any `as`. */\ntype ToolbarButtonImplProps = ToolbarButtonOwnProps & { className?: string };\n\n/** `Button` widened to any element props, so `as` and the rest props pass through untyped. */\nconst BaseButton = Button as React.ElementType;\n\n/** The layout of a vertical button: the icon above a caption-size label, no minimum width. */\nconst verticalButtonClasses = 'h-auto min-w-0 flex-col gap-0.5 px-2 py-1 text-caption-1';\n\n/** The icon box of a vertical button per size: 24 px, 20 px at the two small sizes. */\nconst verticalIconBoxClasses: Record<Size, string> = {\n  'extra-small': 'size-5 justify-center [&>svg]:size-full',\n  small: 'size-5 justify-center [&>svg]:size-full',\n  medium: 'size-6 justify-center [&>svg]:size-full',\n  large: 'size-6 justify-center [&>svg]:size-full',\n  'extra-large': 'size-6 justify-center [&>svg]:size-full',\n};\n\n/**\n * A Button with the toolbar's size and the `subtle` appearance by default (your `size` and\n * `appearance` win). `vertical` puts the icon above a caption-size label, for ribbon-style\n * toolbars. Polymorphic like Button (`as=\"a\"`, a router link). Must be rendered inside a\n * {@link Toolbar}; flat export for React Server Components (`Toolbar.Button` in client files).\n *\n * @example\n * <Toolbar.Button icon={<ShareIcon />}>Share</Toolbar.Button>\n * <Toolbar.Button vertical icon={<PasteIcon />}>Paste</Toolbar.Button>\n */\nexport const ToolbarButton: PolymorphicComponent<'button', ToolbarButtonOwnProps> = (props) => {\n  const {\n    vertical = false,\n    appearance = 'subtle',\n    size,\n    icon,\n    className,\n    ...rest\n  } = props as ToolbarButtonImplProps;\n  const toolbar = useToolbarContext('Toolbar.Button');\n  const effectiveSize = size ?? toolbar.size;\n  return (\n    <BaseButton\n      {...rest}\n      appearance={appearance}\n      size={effectiveSize}\n      icon={withPartClass(\n        vertical ? withPartClass(icon, verticalIconBoxClasses[effectiveSize]) : icon,\n        toolbarButtonClassNames.icon,\n      )}\n      data-vertical={vertical ? '' : undefined}\n      className={cn(toolbarButtonClassNames.root, vertical && verticalButtonClasses, className)}\n    />\n  );\n};\nToolbarButton.displayName = 'ToolbarButton';\n\n// ---------------------------------------------------------------------------\n// Toolbar.ToggleButton and Toolbar.RadioButton\n// ---------------------------------------------------------------------------\n\n/** Properties for Toolbar.ToggleButton: ToggleButton's, bound to the Toolbar's `checkedValues`. */\nexport interface ToolbarToggleButtonProps extends Omit<\n  ToggleButtonProps,\n  'pressed' | 'defaultPressed' | 'onPressedChange' | 'name' | 'value'\n> {\n  /** The group: a key of the Toolbar's `checkedValues`. */\n  name: string;\n  /** The value in `checkedValues[name]` while the toggle is pressed. */\n  value: string;\n}\n\n/** Properties for Toolbar.RadioButton: one choice of a `Toolbar.RadioGroup`. */\nexport interface ToolbarRadioButtonProps extends Omit<\n  ToggleButtonProps,\n  'pressed' | 'defaultPressed' | 'onPressedChange' | 'name' | 'value' | 'role'\n> {\n  /** The group: a key of the Toolbar's `checkedValues`; radio buttons of one `name` are exclusive. */\n  name: string;\n  /** The group's value while this radio is checked. */\n  value: string;\n}\n\n/** Registers a part's `name`/`value` with its toolbar (the duplicate-pair warning). */\nfunction useRegisterCheckable(\n  register: (name: string, value: string) => () => void,\n  name: string,\n  value: string,\n): void {\n  React.useEffect(() => register(name, value), [register, name, value]);\n}\n\n/**\n * A ToggleButton with the toolbar's size and the `subtle` appearance by default, pressed while\n * `value` is in the Toolbar's `checkedValues[name]`. A click adds or removes it (your `onClick`\n * runs first; `event.preventDefault()` cancels the change) and calls the Toolbar's\n * `onCheckedValuesChange`. `name` and `value` are binding keys, not rendered as attributes.\n * `isAccessible` and `disabledFocusable` work as on ToggleButton. Must be rendered inside a\n * {@link Toolbar}; flat export for React Server Components (`Toolbar.ToggleButton` in client\n * files).\n *\n * @example\n * <Toolbar aria-label=\"Formatting\" defaultCheckedValues={{ format: ['bold'] }}>\n *   <Toolbar.ToggleButton name=\"format\" value=\"bold\" icon={<BoldIcon />} aria-label=\"Bold\" />\n * </Toolbar>\n */\nexport const ToolbarToggleButton = ({\n  name,\n  value,\n  appearance = 'subtle',\n  size,\n  icon,\n  className,\n  onClick,\n  ...rest\n}: ToolbarToggleButtonProps) => {\n  const toolbar = useToolbarContext('Toolbar.ToggleButton');\n  const { checked } = toolbar;\n  useRegisterCheckable(toolbar.registerCheckable, name, value);\n  return (\n    <ToggleButton\n      {...rest}\n      icon={withPartClass(icon, toolbarToggleButtonClassNames.icon)}\n      className={cn(toolbarToggleButtonClassNames.root, className)}\n      appearance={appearance}\n      size={size ?? toolbar.size}\n      pressed={checked.isChecked(name, value)}\n      onClick={composeEventHandlers(onClick, (event) =>\n        checked.toggle(name, value, event.nativeEvent),\n      )}\n    />\n  );\n};\nToolbarToggleButton.displayName = 'ToolbarToggleButton';\n\n/**\n * A ToggleButton with `role=\"radio\"` (it reports its state with `aria-checked` and\n * `data-checked`, besides `data-pressed`), the toolbar's size and the `subtle` appearance by\n * default: one choice of a `Toolbar.RadioGroup`, checked while `value` is the Toolbar's\n * `checkedValues[name]`. Space, Enter or a click checks it (your `onClick` runs first;\n * `event.preventDefault()` cancels); the arrow keys only move focus. A click on the checked radio\n * changes nothing. Must be rendered inside a {@link Toolbar}; flat export for React Server\n * Components (`Toolbar.RadioButton` in client files).\n *\n * @example\n * <Toolbar.RadioGroup aria-label=\"Text alignment\">\n *   <Toolbar.RadioButton name=\"align\" value=\"left\" icon={<AlignLeftIcon />} aria-label=\"Left\" />\n *   <Toolbar.RadioButton name=\"align\" value=\"center\" icon={<AlignCenterIcon />} aria-label=\"Center\" />\n * </Toolbar.RadioGroup>\n */\nexport const ToolbarRadioButton = ({\n  name,\n  value,\n  appearance = 'subtle',\n  size,\n  icon,\n  className,\n  onClick,\n  ...rest\n}: ToolbarRadioButtonProps) => {\n  const toolbar = useToolbarContext('Toolbar.RadioButton');\n  const { checked } = toolbar;\n  useRegisterCheckable(toolbar.registerCheckable, name, value);\n  return (\n    <ToggleButton\n      {...rest}\n      icon={withPartClass(icon, toolbarRadioButtonClassNames.icon)}\n      className={cn(toolbarRadioButtonClassNames.root, className)}\n      role=\"radio\"\n      appearance={appearance}\n      size={size ?? toolbar.size}\n      pressed={checked.isChecked(name, value)}\n      onClick={composeEventHandlers(onClick, (event) =>\n        checked.select(name, value, event.nativeEvent),\n      )}\n    />\n  );\n};\nToolbarRadioButton.displayName = 'ToolbarRadioButton';\n\n// ---------------------------------------------------------------------------\n// Toolbar.RadioGroup\n// ---------------------------------------------------------------------------\n\n/** Properties for Toolbar.RadioGroup. */\nexport interface ToolbarRadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Ref to the group element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * A set of `Toolbar.RadioButton`s of which one is checked (`role=\"radiogroup\"`; name it with\n * `aria-label`). Its radios are part of the toolbar's arrow-key order; Up and Down (Left and Right\n * in a vertical toolbar) also move among the group's radios, wrapping inside the group. Arrows\n * only move focus; Space, Enter or a click checks.\n *\n * - The cross-axis keys skip natively disabled radios; a `disabledFocusable` one stays reachable,\n *   as in the toolbar's own arrow order. A consumer `onKeyDown` runs first\n *   (`event.preventDefault()` cancels the move).\n * - Without `aria-label` or `aria-labelledby` it warns once in development.\n * - Its `role` is always `radiogroup` (a `role` you pass is ignored): its radios need it.\n * - Must be rendered inside a {@link Toolbar}; flat export for React Server Components\n *   (`Toolbar.RadioGroup` in client files).\n *\n * @example\n * <Toolbar.RadioGroup aria-label=\"Text alignment\">\n *   <Toolbar.RadioButton name=\"align\" value=\"left\">Left</Toolbar.RadioButton>\n *   <Toolbar.RadioButton name=\"align\" value=\"right\">Right</Toolbar.RadioButton>\n * </Toolbar.RadioGroup>\n */\nexport const ToolbarRadioGroup = ({\n  className,\n  onKeyDown,\n  ref,\n  ...rest\n}: ToolbarRadioGroupProps) => {\n  const { orientation } = useToolbarContext('Toolbar.RadioGroup');\n  const ariaLabel = rest['aria-label'];\n  const ariaLabelledBy = rest['aria-labelledby'];\n  React.useEffect(() => {\n    if (ariaLabel || ariaLabelledBy) return;\n    warnOnce(\n      'Toolbar.RadioGroup:name',\n      'Toolbar.RadioGroup: a radio group needs an accessible name that says what it chooses (e.g. \"Text alignment\"). Pass `aria-label` or `aria-labelledby`.',\n    );\n  }, [ariaLabel, ariaLabelledBy]);\n\n  // The cross axis (APG Toolbar): Down/Up in a horizontal toolbar, \"next\"/\"previous\" of Left/Right\n  // in a vertical one, move among the group's radios with wrap and check nothing. The toolbar's\n  // roving hook records the newly focused radio as its tab stop through its focus handler.\n  const handleCrossAxisKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.metaKey || event.ctrlKey || event.altKey) return;\n    const group = event.currentTarget;\n    const intent =\n      orientation === 'vertical'\n        ? getArrowIntent(event.key, { orientation: 'horizontal', dir: getDirection(group) })\n        : getArrowIntent(event.key, { orientation: 'vertical', dir: 'ltr' });\n    if (!intent) return;\n    const radios = Array.from(group.querySelectorAll<HTMLElement>('[role=\"radio\"]'));\n    const current = radios.findIndex((radio) => radio.contains(event.target as Node));\n    if (current === -1) return;\n    event.preventDefault();\n    const step = intent === 'next' ? 1 : -1;\n    const count = radios.length;\n    for (let offset = 1; offset < count; offset++) {\n      const candidate = radios[(((current + step * offset) % count) + count) % count];\n      if (candidate.matches(':disabled')) continue;\n      candidate.focus();\n      // A radio that CSS hides does not take focus: try the next one.\n      if (candidate.ownerDocument.activeElement === candidate) return;\n    }\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      // Its radios and the cross-axis keys need the radiogroup: the role is not replaceable.\n      role=\"radiogroup\"\n      data-roving-transparent=\"\"\n      onKeyDown={composeEventHandlers(onKeyDown, handleCrossAxisKeyDown)}\n      className={cn(\n        toolbarRadioGroupClassNames.root,\n        'flex gap-1',\n        orientation === 'vertical' && 'flex-col',\n        className,\n      )}\n    />\n  );\n};\nToolbarRadioGroup.displayName = 'ToolbarRadioGroup';\n\n// ---------------------------------------------------------------------------\n// Toolbar.Group and Toolbar.Divider\n// ---------------------------------------------------------------------------\n\n/** Properties for Toolbar.Group. */\nexport interface ToolbarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Ref to the group element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Lays out related controls in the toolbar's direction. It is `role=\"presentation\"`, or\n * `role=\"group\"` when you name it with `aria-label` or `aria-labelledby` (a `role` you pass\n * wins). Its controls stay in the toolbar's arrow-key order. Renders `data-orientation`. Must be\n * rendered inside a {@link Toolbar}; flat export for React Server Components (`Toolbar.Group` in\n * client files).\n *\n * @example\n * <Toolbar.Group aria-label=\"Sharing\">\n *   <Toolbar.Button>Share</Toolbar.Button>\n * </Toolbar.Group>\n */\nexport const ToolbarGroup = ({ role, className, ref, ...rest }: ToolbarGroupProps) => {\n  const { orientation } = useToolbarContext('Toolbar.Group');\n  const named = Boolean(rest['aria-label'] || rest['aria-labelledby']);\n  return (\n    <div\n      role={role ?? (named ? 'group' : 'presentation')}\n      data-orientation={orientation}\n      {...rest}\n      ref={ref}\n      className={cn(\n        toolbarGroupClassNames.root,\n        'flex gap-1',\n        orientation === 'vertical' && 'flex-col',\n        className,\n      )}\n    />\n  );\n};\nToolbarGroup.displayName = 'ToolbarGroup';\n\n/** Properties for Toolbar.Divider. */\nexport interface ToolbarDividerProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'children'\n> {\n  /** Ref to the separator element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * A separator between groups, drawn across the toolbar (vertical in a horizontal toolbar):\n * `role=\"separator\"` with `aria-orientation`. It is not focusable, so the arrow keys pass it.\n * Must be rendered inside a {@link Toolbar}; flat export for React Server Components\n * (`Toolbar.Divider` in client files).\n */\nexport const ToolbarDivider = ({ className, ref, ...rest }: ToolbarDividerProps) => {\n  const { orientation } = useToolbarContext('Toolbar.Divider');\n  const vertical = orientation === 'vertical';\n  return (\n    <div\n      role=\"separator\"\n      aria-orientation={vertical ? 'horizontal' : 'vertical'}\n      {...rest}\n      ref={ref}\n      className={cn(\n        toolbarDividerClassNames.root,\n        vertical\n          ? 'my-1 h-0 shrink-0 self-stretch border-t border-border'\n          : 'mx-1 w-0 shrink-0 self-stretch border-s border-border',\n        forcedColors.border,\n        className,\n      )}\n    />\n  );\n};\nToolbarDivider.displayName = 'ToolbarDivider';\n"],"mappings":"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"}

package/dist/components/button/Toolbar.parts.mjs

@@ -1,85 +1,80 @@
 "use client";
 import { cn as e } from "../../lib/cn.mjs";
 import { warnOnce as t } from "../../lib/dev.mjs";
-import { resolveSlot as n, slotRendersContent as r } from "../../lib/slot.mjs";
-import { composeEventHandlers as i } from "../../lib/composeEventHandlers.mjs";
-import { getArrowIntent as a, getDirection as o } from "../../lib/direction.mjs";
-import { forcedColors as s } from "../../lib/styles.mjs";
-import { Button as c } from "./Button.mjs";
-import { ToggleButton as l } from "./ToggleButton.mjs";
-import { useToolbarContext as u } from "./Toolbar.context.mjs";
-import * as d from "react";
-import { jsx as f } from "react/jsx-runtime";
+import { composeEventHandlers as n } from "../../lib/composeEventHandlers.mjs";
+import { toolbarButtonClassNames as r, toolbarDividerClassNames as i, toolbarGroupClassNames as a, toolbarRadioButtonClassNames as o, toolbarRadioGroupClassNames as s, toolbarToggleButtonClassNames as c } from "../../lib/classNames.mjs";
+import { getArrowIntent as l, getDirection as u } from "../../lib/direction.mjs";
+import { forcedColors as d } from "../../lib/styles.mjs";
+import { Button as f } from "./Button.mjs";
+import { withPartClass as p } from "./Button.slots.mjs";
+import { ToggleButton as m } from "./ToggleButton.mjs";
+import { useToolbarContext as h } from "./Toolbar.context.mjs";
+import * as g from "react";
+import { jsx as _ } from "react/jsx-runtime";
 //#region src/components/button/Toolbar.parts.tsx
-var p = c, m = "h-auto min-w-0 flex-col gap-0.5 px-2 py-1 text-caption-1", h = {
+var v = f, y = "h-auto min-w-0 flex-col gap-0.5 px-2 py-1 text-caption-1", b = {
 	"extra-small": "size-5 justify-center [&>svg]:size-full",
 	small: "size-5 justify-center [&>svg]:size-full",
 	medium: "size-6 justify-center [&>svg]:size-full",
 	large: "size-6 justify-center [&>svg]:size-full",
 	"extra-large": "size-6 justify-center [&>svg]:size-full"
-};
-function g(e, t) {
-	if (!r(e)) return e;
-	let i = n(e, "span", t);
-	return i ? {
-		...i.props,
-		as: i.Component,
-		children: i.children
-	} : e;
-}
-var _ = (t) => {
-	let { vertical: n = !1, appearance: r = "subtle", size: i, icon: a, className: o, ...s } = t, c = u("Toolbar.Button"), l = i ?? c.size;
-	return /* @__PURE__ */ f(p, {
-		...s,
-		appearance: r,
-		size: l,
-		icon: n ? g(a, h[l]) : a,
+}, x = (t) => {
+	let { vertical: n = !1, appearance: i = "subtle", size: a, icon: o, className: s, ...c } = t, l = h("Toolbar.Button"), u = a ?? l.size;
+	return /* @__PURE__ */ _(v, {
+		...c,
+		appearance: i,
+		size: u,
+		icon: p(n ? p(o, b[u]) : o, r.icon),
 		"data-vertical": n ? "" : void 0,
-		className: e(n && m, o)
+		className: e(r.root, n && y, s)
 	});
 };
-_.displayName = "ToolbarButton";
-function v(e, t, n) {
-	d.useEffect(() => e(t, n), [
+x.displayName = "ToolbarButton";
+function S(e, t, n) {
+	g.useEffect(() => e(t, n), [
 		e,
 		t,
 		n
 	]);
 }
-var y = ({ name: e, value: t, appearance: n = "subtle", size: r, onClick: a, ...o }) => {
-	let s = u("Toolbar.ToggleButton"), { checked: c } = s;
-	return v(s.registerCheckable, e, t), /* @__PURE__ */ f(l, {
-		...o,
-		appearance: n,
-		size: r ?? s.size,
-		pressed: c.isChecked(e, t),
-		onClick: i(a, (n) => c.toggle(e, t, n.nativeEvent))
+var C = ({ name: t, value: r, appearance: i = "subtle", size: a, icon: o, className: s, onClick: l, ...u }) => {
+	let d = h("Toolbar.ToggleButton"), { checked: f } = d;
+	return S(d.registerCheckable, t, r), /* @__PURE__ */ _(m, {
+		...u,
+		icon: p(o, c.icon),
+		className: e(c.root, s),
+		appearance: i,
+		size: a ?? d.size,
+		pressed: f.isChecked(t, r),
+		onClick: n(l, (e) => f.toggle(t, r, e.nativeEvent))
 	});
 };
-y.displayName = "ToolbarToggleButton";
-var b = ({ name: e, value: t, appearance: n = "subtle", size: r, onClick: a, ...o }) => {
-	let s = u("Toolbar.RadioButton"), { checked: c } = s;
-	return v(s.registerCheckable, e, t), /* @__PURE__ */ f(l, {
-		...o,
+C.displayName = "ToolbarToggleButton";
+var w = ({ name: t, value: r, appearance: i = "subtle", size: a, icon: s, className: c, onClick: l, ...u }) => {
+	let d = h("Toolbar.RadioButton"), { checked: f } = d;
+	return S(d.registerCheckable, t, r), /* @__PURE__ */ _(m, {
+		...u,
+		icon: p(s, o.icon),
+		className: e(o.root, c),
 		role: "radio",
-		appearance: n,
-		size: r ?? s.size,
-		pressed: c.isChecked(e, t),
-		onClick: i(a, (n) => c.select(e, t, n.nativeEvent))
+		appearance: i,
+		size: a ?? d.size,
+		pressed: f.isChecked(t, r),
+		onClick: n(l, (e) => f.select(t, r, e.nativeEvent))
 	});
 };
-b.displayName = "ToolbarRadioButton";
-var x = ({ className: n, onKeyDown: r, ref: s, ...c }) => {
-	let { orientation: l } = u("Toolbar.RadioGroup"), p = c["aria-label"], m = c["aria-labelledby"];
-	d.useEffect(() => {
-		p || m || t("Toolbar.RadioGroup:name", "Toolbar.RadioGroup: a radio group needs an accessible name that says what it chooses (e.g. \"Text alignment\"). Pass `aria-label` or `aria-labelledby`.");
-	}, [p, m]);
-	let h = (e) => {
+w.displayName = "ToolbarRadioButton";
+var T = ({ className: r, onKeyDown: i, ref: a, ...o }) => {
+	let { orientation: c } = h("Toolbar.RadioGroup"), d = o["aria-label"], f = o["aria-labelledby"];
+	g.useEffect(() => {
+		d || f || t("Toolbar.RadioGroup:name", "Toolbar.RadioGroup: a radio group needs an accessible name that says what it chooses (e.g. \"Text alignment\"). Pass `aria-label` or `aria-labelledby`.");
+	}, [d, f]);
+	let p = (e) => {
 		if (e.metaKey || e.ctrlKey || e.altKey) return;
-		let t = e.currentTarget, n = l === "vertical" ? a(e.key, {
+		let t = e.currentTarget, n = c === "vertical" ? l(e.key, {
 			orientation: "horizontal",
-			dir: o(t)
-		}) : a(e.key, {
+			dir: u(t)
+		}) : l(e.key, {
 			orientation: "vertical",
 			dir: "ltr"
 		});
@@ -87,45 +82,45 @@ var x = ({ className: n, onKeyDown: r, ref: s, ...c }) => {
 		let r = Array.from(t.querySelectorAll("[role=\"radio\"]")), i = r.findIndex((t) => t.contains(e.target));
 		if (i === -1) return;
 		e.preventDefault();
-		let s = n === "next" ? 1 : -1, c = r.length;
-		for (let e = 1; e < c; e++) {
-			let t = r[((i + s * e) % c + c) % c];
+		let a = n === "next" ? 1 : -1, o = r.length;
+		for (let e = 1; e < o; e++) {
+			let t = r[((i + a * e) % o + o) % o];
 			if (!t.matches(":disabled") && (t.focus(), t.ownerDocument.activeElement === t)) return;
 		}
 	};
-	return /* @__PURE__ */ f("div", {
-		...c,
-		ref: s,
+	return /* @__PURE__ */ _("div", {
+		...o,
+		ref: a,
 		role: "radiogroup",
 		"data-roving-transparent": "",
-		onKeyDown: i(r, h),
-		className: e("flex gap-1", l === "vertical" && "flex-col", n)
+		onKeyDown: n(i, p),
+		className: e(s.root, "flex gap-1", c === "vertical" && "flex-col", r)
 	});
 };
-x.displayName = "ToolbarRadioGroup";
-var S = ({ role: t, className: n, ref: r, ...i }) => {
-	let { orientation: a } = u("Toolbar.Group"), o = !!(i["aria-label"] || i["aria-labelledby"]);
-	return /* @__PURE__ */ f("div", {
-		role: t ?? (o ? "group" : "presentation"),
-		"data-orientation": a,
+T.displayName = "ToolbarRadioGroup";
+var E = ({ role: t, className: n, ref: r, ...i }) => {
+	let { orientation: o } = h("Toolbar.Group"), s = !!(i["aria-label"] || i["aria-labelledby"]);
+	return /* @__PURE__ */ _("div", {
+		role: t ?? (s ? "group" : "presentation"),
+		"data-orientation": o,
 		...i,
 		ref: r,
-		className: e("flex gap-1", a === "vertical" && "flex-col", n)
+		className: e(a.root, "flex gap-1", o === "vertical" && "flex-col", n)
 	});
 };
-S.displayName = "ToolbarGroup";
-var C = ({ className: t, ref: n, ...r }) => {
-	let { orientation: i } = u("Toolbar.Divider"), a = i === "vertical";
-	return /* @__PURE__ */ f("div", {
+E.displayName = "ToolbarGroup";
+var D = ({ className: t, ref: n, ...r }) => {
+	let { orientation: a } = h("Toolbar.Divider"), o = a === "vertical";
+	return /* @__PURE__ */ _("div", {
 		role: "separator",
-		"aria-orientation": a ? "horizontal" : "vertical",
+		"aria-orientation": o ? "horizontal" : "vertical",
 		...r,
 		ref: n,
-		className: e(a ? "my-1 h-0 shrink-0 self-stretch border-t border-border" : "mx-1 w-0 shrink-0 self-stretch border-s border-border", s.border, t)
+		className: e(i.root, o ? "my-1 h-0 shrink-0 self-stretch border-t border-border" : "mx-1 w-0 shrink-0 self-stretch border-s border-border", d.border, t)
 	});
 };
-C.displayName = "ToolbarDivider";
+D.displayName = "ToolbarDivider";
 //#endregion
-export { _ as ToolbarButton, C as ToolbarDivider, S as ToolbarGroup, b as ToolbarRadioButton, x as ToolbarRadioGroup, y as ToolbarToggleButton };
+export { x as ToolbarButton, D as ToolbarDivider, E as ToolbarGroup, w as ToolbarRadioButton, T as ToolbarRadioGroup, C as ToolbarToggleButton };
 
 //# sourceMappingURL=Toolbar.parts.mjs.map