@mortenbrudvik/waveui 0.7.0 → 0.8.0

package/dist/components/button/SplitButton.mjs

@@ -2,65 +2,66 @@
 import { cn as e } from "../../lib/cn.mjs";
 import { warnOnce as t } from "../../lib/dev.mjs";
 import { slotRendersContent as n } from "../../lib/slot.mjs";
-import { Button as r } from "./Button.mjs";
-import { ChevronDownIcon as i } from "../../lib/icons.mjs";
-import { mergeProps as a } from "../../lib/mergeProps.mjs";
-import { unwrapButtonGlyph as o } from "./Button.slots.mjs";
-import * as s from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { splitButtonClassNames as r } from "../../lib/classNames.mjs";
+import { Button as i } from "./Button.mjs";
+import { unwrapButtonGlyph as a, withPartClass as o } from "./Button.slots.mjs";
+import { ChevronDownIcon as s } from "../../lib/icons.mjs";
+import { mergeProps as c } from "../../lib/mergeProps.mjs";
+import * as l from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/button/SplitButton.tsx
-var u = {
+var f = {
 	"extra-small": "w-auto min-w-6 min-h-6 px-1.5",
 	small: "w-auto min-w-6 min-h-6 px-1.5",
 	medium: "w-auto min-w-6 min-h-6 px-2",
 	large: "w-auto min-w-6 min-h-6 px-2",
 	"extra-large": "w-auto min-w-6 min-h-6 px-3"
-}, d = {
+}, p = {
 	primary: "border-s-primary-foreground/30",
 	outline: "border-s-stroke",
 	subtle: "border-s-stroke",
 	transparent: "border-s-stroke"
-}, f = "relative min-h-6 focus-visible:z-10", p = ({ appearance: p = "outline", size: m = "medium", disabled: h = !1, disabledFocusable: g = !1, icon: _, iconPosition: v, menuIcon: y, className: b, children: x, onClick: S, onMenuClick: C, menuButtonLabel: w = "More options", menuButtonProps: T, primaryActionButtonProps: E, "aria-describedby": D, role: O, ref: k, ...A }) => {
-	let j = a({
-		"aria-describedby": D,
-		onClick: S
-	}, E), M = a({
-		"aria-label": w,
+}, m = "relative min-h-6 focus-visible:z-10", h = ({ appearance: h = "outline", size: g = "medium", disabled: _ = !1, disabledFocusable: v = !1, icon: y, iconPosition: b, menuIcon: x, className: S, children: C, onClick: w, onMenuClick: T, menuButtonLabel: E = "More options", menuButtonProps: D, primaryActionButtonProps: O, "aria-describedby": k, role: A, ref: j, ...M }) => {
+	let N = c({
+		"aria-describedby": k,
+		onClick: w
+	}, O), P = c({
+		"aria-label": E,
 		"aria-haspopup": "menu",
-		onClick: C
-	}, T), N = g || !!j.disabledFocusable, P = g || !!M.disabledFocusable, { glyph: F, button: I } = o(y), L = n(F), R = I === null && y != null && !L;
-	return s.useEffect(() => {
-		R && t("SplitButton:menuIcon-empty", "SplitButton: `menuIcon` renders nothing, so the menu button shows the default chevron. Unlike `MenuButton`, a SplitButton always shows a menu indicator: pass an icon, or leave `menuIcon` unset.");
-	}, [R]), s.useEffect(() => {
-		I && t("SplitButton:menuIcon-button", `SplitButton: \`menuIcon\` received ${I}; its children render as the glyph of the menu button and its props were dropped (buttons cannot be nested). Pass icon content instead, e.g. \`menuIcon={<MyIcon />}\`.`);
-	}, [I]), /* @__PURE__ */ l("div", {
-		ref: k,
-		...A,
-		role: O ?? "group",
-		className: e("inline-flex items-stretch", b),
-		children: [/* @__PURE__ */ c(r, {
-			...j,
-			appearance: p,
-			size: m,
-			disabled: !N && (h || !!j.disabled),
-			disabledFocusable: N,
-			icon: _,
-			iconPosition: v,
-			className: e(f, "rounded-e-none border-e-0", j.className),
-			children: x
-		}), /* @__PURE__ */ c(r, {
-			...M,
-			appearance: p,
-			size: m,
-			disabled: !P && (h || !!M.disabled),
-			disabledFocusable: P,
-			icon: L ? F : /* @__PURE__ */ c(i, {}),
-			className: e(f, u[m], "rounded-s-none", d[p], M.className)
+		onClick: T
+	}, D), F = v || !!N.disabledFocusable, I = v || !!P.disabledFocusable, { glyph: L, button: R } = a(x), z = n(L), B = R === null && x != null && !z;
+	return l.useEffect(() => {
+		B && t("SplitButton:menuIcon-empty", "SplitButton: `menuIcon` renders nothing, so the menu button shows the default chevron. Unlike `MenuButton`, a SplitButton always shows a menu indicator: pass an icon, or leave `menuIcon` unset.");
+	}, [B]), l.useEffect(() => {
+		R && t("SplitButton:menuIcon-button", `SplitButton: \`menuIcon\` received ${R}; its children render as the glyph of the menu button and its props were dropped (buttons cannot be nested). Pass icon content instead, e.g. \`menuIcon={<MyIcon />}\`.`);
+	}, [R]), /* @__PURE__ */ d("div", {
+		ref: j,
+		...M,
+		role: A ?? "group",
+		className: e(r.root, "inline-flex items-stretch", S),
+		children: [/* @__PURE__ */ u(i, {
+			...N,
+			appearance: h,
+			size: g,
+			disabled: !F && (_ || !!N.disabled),
+			disabledFocusable: F,
+			icon: o(y, r.icon),
+			iconPosition: b,
+			className: e(r.primaryActionButton, m, "rounded-e-none border-e-0", N.className),
+			children: C
+		}), /* @__PURE__ */ u(i, {
+			...P,
+			appearance: h,
+			size: g,
+			disabled: !I && (_ || !!P.disabled),
+			disabledFocusable: I,
+			icon: o(z ? L : /* @__PURE__ */ u(s, {}), r.menuIcon),
+			className: e(r.menuButton, m, f[g], "rounded-s-none", p[h], P.className)
 		})]
 	});
 };
-p.displayName = "SplitButton";
+h.displayName = "SplitButton";
 //#endregion
-export { p as SplitButton };
+export { h as SplitButton };
 
 //# sourceMappingURL=SplitButton.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"SplitButton.mjs","names":["React","menuButtonSizeClasses","separatorClasses","halfClasses","SplitButton","ariaDescribedBy","props","primary","mergeProps","primaryActionButtonProps","menu","menuButtonLabel","onMenuClick","menuButtonProps","primaryFocusable","disabledFocusable","menuFocusable","menuGlyph","menuIconButton","unwrapButtonGlyph","menuIcon","menuIconRenders","slotRendersContent","menuIconEmpty","warnOnce","role","cn","className","Button","disabled","ChevronDownIcon","size","appearance"],"sources":["../../../src/components/button/SplitButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { warnOnce } from '../../lib/dev';\nimport { ChevronDownIcon } from '../../lib/icons';\nimport { mergeProps } from '../../lib/mergeProps';\nimport { slotRendersContent } from '../../lib/slot';\nimport type { Size, Appearance, IconPosition, Slot } from '../../lib/types';\nimport { Button } from './Button';\nimport { unwrapButtonGlyph } from './Button.slots';\n\n/**\n * Props for one half of a SplitButton (`menuButtonProps`, `primaryActionButtonProps`): native\n * `<button>` attributes, `data-*` attributes and `ref`. They are merged onto the built-in props\n * of that half: handlers are composed (yours run first), `className` is merged, id lists are\n * joined and any other value you pass wins.\n */\nexport interface SplitButtonMenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Makes only this half unavailable but focusable (see `SplitButton.disabledFocusable`, which\n   * affects both halves). For each half, focusable-disabled wins over natively disabled.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n  /** Ref to the `<button>` element of this half. */\n  ref?: React.Ref<HTMLButtonElement>;\n  /** Any `data-*` attribute. */\n  [dataAttribute: `data-${string}`]: string | number | boolean | undefined;\n}\n\n/** Props for the primary action half of a SplitButton (same shape as the menu half). */\nexport type SplitButtonPrimaryActionButtonProps = SplitButtonMenuButtonProps;\n\n/** Properties for the SplitButton component. */\nexport interface SplitButtonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {\n  /**\n   * Disables both buttons. A half's own `disabled` (`primaryActionButtonProps`,\n   * `menuButtonProps`) disables only that half.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Makes both halves unavailable but focusable (see `Button.disabledFocusable`): each half\n   * renders `aria-disabled=\"true\"`, `data-disabled` and `data-disabled-focusable`, stays in the tab\n   * order, and neither `onClick` nor the menu opens. A half's own `disabledFocusable` (in\n   * `primaryActionButtonProps`/`menuButtonProps`) affects only that half. For each half,\n   * focusable-disabled wins over natively disabled: the half is focusable-disabled when the root's\n   * or its own `disabledFocusable` is set; otherwise it is natively disabled when the root's or its\n   * own `disabled` is set.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n  /**\n   * Icon of the primary action, decorative (`aria-hidden`). For an icon-only primary action pass\n   * `primaryActionButtonProps={{ 'aria-label': '…' }}`.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Where the primary action's icon renders: before its label (the inline start) or after it.\n   * Has no effect on an icon-only primary action. The menu half is not affected.\n   * @default 'before'\n   */\n  iconPosition?: IconPosition;\n  /**\n   * Replaces the chevron of the menu half (decorative, `aria-hidden`). The menu half always shows\n   * an indicator: `null` and `undefined` keep the default chevron, and so does a value that renders\n   * nothing (`false`, `''`, an empty array), which also logs a development warning. Unlike\n   * `MenuButton.menuIcon`, a value that renders nothing does not hide the indicator. A `<button>`\n   * or `Button` element, or a slot object whose `as` is one, is not nested inside the menu half:\n   * its children become the glyph (the chevron when they render nothing), its props (`icon`\n   * included) are dropped, and a development warning says so.\n   */\n  menuIcon?: Slot<'span'>;\n  /** Visual style variant.\n   * @default 'outline'\n   */\n  appearance?: Appearance;\n  /** Size affecting height, padding and font size.\n   * @default 'medium'\n   */\n  size?: Size;\n  /** Click handler for the primary action button. */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /** Click handler for the menu (chevron) button. */\n  onMenuClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Accessible name of the menu button (it shows only a chevron). Localize it.\n   * @default 'More options'\n   */\n  menuButtonLabel?: string;\n  /**\n   * Props for the menu button: `aria-expanded`, `aria-controls`, `id`, handlers (`onKeyDown` for\n   * ArrowDown/ArrowUp), `ref` for focus restoration, … Pass the render-prop props of\n   * `Menu.Trigger` here to open a Menu from the chevron.\n   */\n  menuButtonProps?: SplitButtonMenuButtonProps;\n  /** Props for the primary action button (`ref`, `title`, handlers, …). */\n  primaryActionButtonProps?: SplitButtonPrimaryActionButtonProps;\n  /** Ref to the wrapping `role=\"group\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Menu button size per SplitButton size: at least 24×24 CSS px at every size (WCAG 2.5.8 target\n * size; the chevron shares an edge with the primary button, so the spacing exception does not\n * apply). Overrides the square icon-only sizing of `Button` (`w-*`, `px-0`).\n */\nconst menuButtonSizeClasses: Record<Size, string> = {\n  'extra-small': 'w-auto min-w-6 min-h-6 px-1.5',\n  small: 'w-auto min-w-6 min-h-6 px-1.5',\n  medium: 'w-auto min-w-6 min-h-6 px-2',\n  large: 'w-auto min-w-6 min-h-6 px-2',\n  'extra-large': 'w-auto min-w-6 min-h-6 px-3',\n};\n\n/** The separator is the menu button's start border (logical, so it mirrors in RTL). */\nconst separatorClasses: Record<Appearance, string> = {\n  primary: 'border-s-primary-foreground/30',\n  outline: 'border-s-stroke',\n  subtle: 'border-s-stroke',\n  transparent: 'border-s-stroke',\n};\n\n/**\n * Keeps each half's focus ring above its neighbour. `min-h-6` keeps both halves as tall as the\n * 24px menu button target at the extra-small size.\n */\nconst halfClasses = 'relative min-h-6 focus-visible:z-10';\n\n/**\n * A primary action button joined to a menu button (chevron), e.g. Save + \"Save as…\" options.\n * Both halves are {@link Button}s with the shared appearances and sizes, inside a\n * `role=\"group\"` wrapper.\n *\n * - `ref`, `className`, `style`, `aria-label` and other props go to the group; `aria-describedby`\n *   is routed to the primary button (so a Tooltip around the SplitButton describes the action).\n * - `primaryActionButtonProps` / `menuButtonProps` reach the two buttons; the menu button is\n *   named by `menuButtonLabel` (default `'More options'`).\n * - The menu button is at least 24×24 px at every size, so an extra-small SplitButton is 24px tall.\n * - `icon`/`iconPosition` belong to the primary action; `menuIcon` replaces the chevron, which the\n *   menu half always shows (a `menuIcon` that renders nothing keeps it).\n * - `disabledFocusable` keeps both halves focusable while unavailable; `Menu.Trigger` does not open\n *   its menu from an `aria-disabled` menu half.\n *\n * @example\n * <Menu>\n *   <Menu.Trigger>\n *     {(triggerProps) => (\n *       <SplitButton menuButtonProps={triggerProps} onClick={save}>Save</SplitButton>\n *     )}\n *   </Menu.Trigger>\n *   <Menu.Popover>…</Menu.Popover>\n * </Menu>\n */\nexport const SplitButton = ({\n  appearance = 'outline',\n  size = 'medium',\n  disabled = false,\n  disabledFocusable = false,\n  icon,\n  iconPosition,\n  menuIcon,\n  className,\n  children,\n  onClick,\n  onMenuClick,\n  menuButtonLabel = 'More options',\n  menuButtonProps,\n  primaryActionButtonProps,\n  'aria-describedby': ariaDescribedBy,\n  role,\n  ref,\n  ...props\n}: SplitButtonProps) => {\n  const primary = mergeProps(\n    { 'aria-describedby': ariaDescribedBy, onClick } as SplitButtonMenuButtonProps,\n    primaryActionButtonProps,\n  );\n  const menu = mergeProps(\n    {\n      'aria-label': menuButtonLabel,\n      'aria-haspopup': 'menu',\n      onClick: onMenuClick,\n    } as SplitButtonMenuButtonProps,\n    menuButtonProps,\n  );\n\n  // Per half: focusable-disabled (the root's or its own) wins over natively disabled.\n  const primaryFocusable = disabledFocusable || Boolean(primary.disabledFocusable);\n  const menuFocusable = disabledFocusable || Boolean(menu.disabledFocusable);\n\n  // The glyph sits inside the menu half's button: a button passed as `menuIcon` is unwrapped (its\n  // children are the glyph), never nested (C-SLOTS).\n  const { glyph: menuGlyph, button: menuIconButton } = unwrapButtonGlyph(menuIcon);\n  // The menu half always shows an indicator: a `menuIcon` that renders nothing keeps the chevron.\n  const menuIconRenders = slotRendersContent(menuGlyph);\n  // An unwrapped button reports its own warning only.\n  const menuIconEmpty = menuIconButton === null && menuIcon != null && !menuIconRenders;\n  React.useEffect(() => {\n    if (menuIconEmpty) {\n      warnOnce(\n        'SplitButton:menuIcon-empty',\n        'SplitButton: `menuIcon` renders nothing, so the menu button shows the default chevron. Unlike `MenuButton`, a SplitButton always shows a menu indicator: pass an icon, or leave `menuIcon` unset.',\n      );\n    }\n  }, [menuIconEmpty]);\n  React.useEffect(() => {\n    if (menuIconButton) {\n      warnOnce(\n        'SplitButton:menuIcon-button',\n        `SplitButton: \\`menuIcon\\` received ${menuIconButton}; its children render as the glyph of the menu button and its props were dropped (buttons cannot be nested). Pass icon content instead, e.g. \\`menuIcon={<MyIcon />}\\`.`,\n      );\n    }\n  }, [menuIconButton]);\n\n  // `role=\"group\"` applies wherever the consumer's role is `undefined` or `null` (as in Button).\n  return (\n    <div\n      ref={ref}\n      {...props}\n      role={role ?? 'group'}\n      className={cn('inline-flex items-stretch', className)}\n    >\n      <Button\n        {...primary}\n        appearance={appearance}\n        size={size}\n        disabled={!primaryFocusable && (disabled || Boolean(primary.disabled))}\n        disabledFocusable={primaryFocusable}\n        icon={icon}\n        iconPosition={iconPosition}\n        className={cn(halfClasses, 'rounded-e-none border-e-0', primary.className)}\n      >\n        {children}\n      </Button>\n      <Button\n        {...menu}\n        appearance={appearance}\n        size={size}\n        disabled={!menuFocusable && (disabled || Boolean(menu.disabled))}\n        disabledFocusable={menuFocusable}\n        icon={menuIconRenders ? menuGlyph : <ChevronDownIcon />}\n        className={cn(\n          halfClasses,\n          menuButtonSizeClasses[size],\n          'rounded-s-none',\n          separatorClasses[appearance],\n          menu.className,\n        )}\n      />\n    </div>\n  );\n};\n\nSplitButton.displayName = 'SplitButton';\n"],"mappings":";;;;;;;;;;;AA0GA,IAAMC,IAA8C;CAClD,eAAe;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACP,eAAe;AACjB,GAGMC,IAA+C;CACnD,SAAS;CACT,SAAS;CACT,QAAQ;CACR,aAAa;AACf,GAMMC,IAAc,uCA2BPC,KAAe,EAC1B,gBAAa,WACb,UAAO,UACP,cAAW,IACX,uBAAoB,IACpB,SACA,iBACA,aACA,cACA,aACA,YACA,gBACA,qBAAkB,gBAClB,oBACA,6BACA,oBAAoBC,GACpB,SACA,QACA,GAAGC,QACmB;CACtB,IAAMC,IAAUC,EACd;EAAE,oBAAoBH;EAAiB;CAAQ,GAC/CI,CACF,GACMC,IAAOF,EACX;EACE,cAAcG;EACd,iBAAiB;EACjB,SAASC;CACX,GACAC,CACF,GAGMC,IAAmBC,KAAqB,EAAQR,EAAQ,mBACxDS,IAAgBD,KAAqB,EAAQL,EAAK,mBAIlD,EAAE,OAAOO,GAAW,QAAQC,MAAmBC,EAAkBC,CAAQ,GAEzEC,IAAkBC,EAAmBL,CAAS,GAE9CM,IAAgBL,MAAmB,QAAQE,KAAY,QAAQ,CAACC;CAmBtE,OAlBArB,EAAM,gBAAgB;EACpB,AAAIuB,KACFC,EACE,8BACA,mMACF;CAEJ,GAAG,CAACD,CAAa,CAAC,GAClBvB,EAAM,gBAAgB;EACpB,AAAIkB,KACFM,EACE,+BACA,sCAAsCN,EAAe,wKACvD;CAEJ,GAAG,CAACA,CAAc,CAAC,GAIjB,kBAAC,OAAD;EACO;EACL,GAAIZ;EACJ,MAAMmB,KAAQ;EACd,WAAWC,EAAG,6BAA6BC,CAAS;EAJtD,UAAA,CAME,kBAACC,GAAD;GACE,GAAIrB;GACQ;GACN;GACN,UAAU,CAACO,MAAqBe,KAAY,EAAQtB,EAAQ;GAC5D,mBAAmBO;GACb;GACQ;GACd,WAAWY,EAAGvB,GAAa,6BAA6BI,EAAQ,SAAS;GAExE;EACK,CAAA,GACR,kBAACqB,GAAD;GACE,GAAIlB;GACQ;GACN;GACN,UAAU,CAACM,MAAkBa,KAAY,EAAQnB,EAAK;GACtD,mBAAmBM;GACnB,MAAMK,IAAkBJ,IAAY,kBAACa,GAAD,CAAkB,CAAA;GACtD,WAAWJ,EACTvB,GACAF,EAAsB8B,IACtB,kBACA7B,EAAiB8B,IACjBtB,EAAK,SACP;EACD,CAAA,CACE;;AAET;AAEA,EAAY,cAAc"}
+{"version":3,"file":"SplitButton.mjs","names":["React","menuButtonSizeClasses","separatorClasses","halfClasses","SplitButton","ariaDescribedBy","props","primary","mergeProps","primaryActionButtonProps","menu","menuButtonLabel","onMenuClick","menuButtonProps","primaryFocusable","disabledFocusable","menuFocusable","menuGlyph","menuIconButton","unwrapButtonGlyph","menuIcon","menuIconRenders","slotRendersContent","menuIconEmpty","warnOnce","role","cn","splitButtonClassNames","className","Button","disabled","withPartClass","icon","ChevronDownIcon","size","appearance"],"sources":["../../../src/components/button/SplitButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { splitButtonClassNames } from '../../lib/classNames';\nimport { warnOnce } from '../../lib/dev';\nimport { ChevronDownIcon } from '../../lib/icons';\nimport { mergeProps } from '../../lib/mergeProps';\nimport { slotRendersContent } from '../../lib/slot';\nimport type { Size, Appearance, IconPosition, Slot } from '../../lib/types';\nimport { Button } from './Button';\nimport { unwrapButtonGlyph, withPartClass } from './Button.slots';\n\n/**\n * Props for one half of a SplitButton (`menuButtonProps`, `primaryActionButtonProps`): native\n * `<button>` attributes, `data-*` attributes and `ref`. They are merged onto the built-in props\n * of that half: handlers are composed (yours run first), `className` is merged, id lists are\n * joined and any other value you pass wins.\n */\nexport interface SplitButtonMenuButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Makes only this half unavailable but focusable (see `SplitButton.disabledFocusable`, which\n   * affects both halves). For each half, focusable-disabled wins over natively disabled.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n  /** Ref to the `<button>` element of this half. */\n  ref?: React.Ref<HTMLButtonElement>;\n  /** Any `data-*` attribute. */\n  [dataAttribute: `data-${string}`]: string | number | boolean | undefined;\n}\n\n/** Props for the primary action half of a SplitButton (same shape as the menu half). */\nexport type SplitButtonPrimaryActionButtonProps = SplitButtonMenuButtonProps;\n\n/** Properties for the SplitButton component. */\nexport interface SplitButtonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {\n  /**\n   * Disables both buttons. A half's own `disabled` (`primaryActionButtonProps`,\n   * `menuButtonProps`) disables only that half.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Makes both halves unavailable but focusable (see `Button.disabledFocusable`): each half\n   * renders `aria-disabled=\"true\"`, `data-disabled` and `data-disabled-focusable`, stays in the tab\n   * order, and neither `onClick` nor the menu opens. A half's own `disabledFocusable` (in\n   * `primaryActionButtonProps`/`menuButtonProps`) affects only that half. For each half,\n   * focusable-disabled wins over natively disabled: the half is focusable-disabled when the root's\n   * or its own `disabledFocusable` is set; otherwise it is natively disabled when the root's or its\n   * own `disabled` is set.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n  /**\n   * Icon of the primary action, decorative (`aria-hidden`). For an icon-only primary action pass\n   * `primaryActionButtonProps={{ 'aria-label': '…' }}`.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Where the primary action's icon renders: before its label (the inline start) or after it.\n   * Has no effect on an icon-only primary action. The menu half is not affected.\n   * @default 'before'\n   */\n  iconPosition?: IconPosition;\n  /**\n   * Replaces the chevron of the menu half (decorative, `aria-hidden`). The menu half always shows\n   * an indicator: `null` and `undefined` keep the default chevron, and so does a value that renders\n   * nothing (`false`, `''`, an empty array), which also logs a development warning. Unlike\n   * `MenuButton.menuIcon`, a value that renders nothing does not hide the indicator. A `<button>`\n   * or `Button` element, or a slot object whose `as` is one, is not nested inside the menu half:\n   * its children become the glyph (the chevron when they render nothing), its props (`icon`\n   * included) are dropped, and a development warning says so.\n   */\n  menuIcon?: Slot<'span'>;\n  /** Visual style variant.\n   * @default 'outline'\n   */\n  appearance?: Appearance;\n  /** Size affecting height, padding and font size.\n   * @default 'medium'\n   */\n  size?: Size;\n  /** Click handler for the primary action button. */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /** Click handler for the menu (chevron) button. */\n  onMenuClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /**\n   * Accessible name of the menu button (it shows only a chevron). Localize it.\n   * @default 'More options'\n   */\n  menuButtonLabel?: string;\n  /**\n   * Props for the menu button: `aria-expanded`, `aria-controls`, `id`, handlers (`onKeyDown` for\n   * ArrowDown/ArrowUp), `ref` for focus restoration, … Pass the render-prop props of\n   * `Menu.Trigger` here to open a Menu from the chevron.\n   */\n  menuButtonProps?: SplitButtonMenuButtonProps;\n  /** Props for the primary action button (`ref`, `title`, handlers, …). */\n  primaryActionButtonProps?: SplitButtonPrimaryActionButtonProps;\n  /** Ref to the wrapping `role=\"group\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/**\n * Menu button size per SplitButton size: at least 24×24 CSS px at every size (WCAG 2.5.8 target\n * size; the chevron shares an edge with the primary button, so the spacing exception does not\n * apply). Overrides the square icon-only sizing of `Button` (`w-*`, `px-0`).\n */\nconst menuButtonSizeClasses: Record<Size, string> = {\n  'extra-small': 'w-auto min-w-6 min-h-6 px-1.5',\n  small: 'w-auto min-w-6 min-h-6 px-1.5',\n  medium: 'w-auto min-w-6 min-h-6 px-2',\n  large: 'w-auto min-w-6 min-h-6 px-2',\n  'extra-large': 'w-auto min-w-6 min-h-6 px-3',\n};\n\n/** The separator is the menu button's start border (logical, so it mirrors in RTL). */\nconst separatorClasses: Record<Appearance, string> = {\n  primary: 'border-s-primary-foreground/30',\n  outline: 'border-s-stroke',\n  subtle: 'border-s-stroke',\n  transparent: 'border-s-stroke',\n};\n\n/**\n * Keeps each half's focus ring above its neighbour. `min-h-6` keeps both halves as tall as the\n * 24px menu button target at the extra-small size.\n */\nconst halfClasses = 'relative min-h-6 focus-visible:z-10';\n\n/**\n * A primary action button joined to a menu button (chevron), e.g. Save + \"Save as…\" options.\n * Both halves are {@link Button}s with the shared appearances and sizes, inside a\n * `role=\"group\"` wrapper.\n *\n * - `ref`, `className`, `style`, `aria-label` and other props go to the group; `aria-describedby`\n *   is routed to the primary button (so a Tooltip around the SplitButton describes the action).\n * - `primaryActionButtonProps` / `menuButtonProps` reach the two buttons; the menu button is\n *   named by `menuButtonLabel` (default `'More options'`).\n * - The menu button is at least 24×24 px at every size, so an extra-small SplitButton is 24px tall.\n * - `icon`/`iconPosition` belong to the primary action; `menuIcon` replaces the chevron, which the\n *   menu half always shows (a `menuIcon` that renders nothing keeps it).\n * - `disabledFocusable` keeps both halves focusable while unavailable; `Menu.Trigger` does not open\n *   its menu from an `aria-disabled` menu half.\n *\n * @example\n * <Menu>\n *   <Menu.Trigger>\n *     {(triggerProps) => (\n *       <SplitButton menuButtonProps={triggerProps} onClick={save}>Save</SplitButton>\n *     )}\n *   </Menu.Trigger>\n *   <Menu.Popover>…</Menu.Popover>\n * </Menu>\n */\nexport const SplitButton = ({\n  appearance = 'outline',\n  size = 'medium',\n  disabled = false,\n  disabledFocusable = false,\n  icon,\n  iconPosition,\n  menuIcon,\n  className,\n  children,\n  onClick,\n  onMenuClick,\n  menuButtonLabel = 'More options',\n  menuButtonProps,\n  primaryActionButtonProps,\n  'aria-describedby': ariaDescribedBy,\n  role,\n  ref,\n  ...props\n}: SplitButtonProps) => {\n  const primary = mergeProps(\n    { 'aria-describedby': ariaDescribedBy, onClick } as SplitButtonMenuButtonProps,\n    primaryActionButtonProps,\n  );\n  const menu = mergeProps(\n    {\n      'aria-label': menuButtonLabel,\n      'aria-haspopup': 'menu',\n      onClick: onMenuClick,\n    } as SplitButtonMenuButtonProps,\n    menuButtonProps,\n  );\n\n  // Per half: focusable-disabled (the root's or its own) wins over natively disabled.\n  const primaryFocusable = disabledFocusable || Boolean(primary.disabledFocusable);\n  const menuFocusable = disabledFocusable || Boolean(menu.disabledFocusable);\n\n  // The glyph sits inside the menu half's button: a button passed as `menuIcon` is unwrapped (its\n  // children are the glyph), never nested (C-SLOTS).\n  const { glyph: menuGlyph, button: menuIconButton } = unwrapButtonGlyph(menuIcon);\n  // The menu half always shows an indicator: a `menuIcon` that renders nothing keeps the chevron.\n  const menuIconRenders = slotRendersContent(menuGlyph);\n  // An unwrapped button reports its own warning only.\n  const menuIconEmpty = menuIconButton === null && menuIcon != null && !menuIconRenders;\n  React.useEffect(() => {\n    if (menuIconEmpty) {\n      warnOnce(\n        'SplitButton:menuIcon-empty',\n        'SplitButton: `menuIcon` renders nothing, so the menu button shows the default chevron. Unlike `MenuButton`, a SplitButton always shows a menu indicator: pass an icon, or leave `menuIcon` unset.',\n      );\n    }\n  }, [menuIconEmpty]);\n  React.useEffect(() => {\n    if (menuIconButton) {\n      warnOnce(\n        'SplitButton:menuIcon-button',\n        `SplitButton: \\`menuIcon\\` received ${menuIconButton}; its children render as the glyph of the menu button and its props were dropped (buttons cannot be nested). Pass icon content instead, e.g. \\`menuIcon={<MyIcon />}\\`.`,\n      );\n    }\n  }, [menuIconButton]);\n\n  // `role=\"group\"` applies wherever the consumer's role is `undefined` or `null` (as in Button).\n  return (\n    <div\n      ref={ref}\n      {...props}\n      role={role ?? 'group'}\n      className={cn(splitButtonClassNames.root, 'inline-flex items-stretch', className)}\n    >\n      <Button\n        {...primary}\n        appearance={appearance}\n        size={size}\n        disabled={!primaryFocusable && (disabled || Boolean(primary.disabled))}\n        disabledFocusable={primaryFocusable}\n        icon={withPartClass(icon, splitButtonClassNames.icon)}\n        iconPosition={iconPosition}\n        className={cn(\n          splitButtonClassNames.primaryActionButton,\n          halfClasses,\n          'rounded-e-none border-e-0',\n          primary.className,\n        )}\n      >\n        {children}\n      </Button>\n      <Button\n        {...menu}\n        appearance={appearance}\n        size={size}\n        disabled={!menuFocusable && (disabled || Boolean(menu.disabled))}\n        disabledFocusable={menuFocusable}\n        icon={withPartClass(\n          menuIconRenders ? menuGlyph : <ChevronDownIcon />,\n          splitButtonClassNames.menuIcon,\n        )}\n        className={cn(\n          splitButtonClassNames.menuButton,\n          halfClasses,\n          menuButtonSizeClasses[size],\n          'rounded-s-none',\n          separatorClasses[appearance],\n          menu.className,\n        )}\n      />\n    </div>\n  );\n};\n\nSplitButton.displayName = 'SplitButton';\n"],"mappings":";;;;;;;;;;;;AA2GA,IAAMC,IAA8C;CAClD,eAAe;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACP,eAAe;AACjB,GAGMC,IAA+C;CACnD,SAAS;CACT,SAAS;CACT,QAAQ;CACR,aAAa;AACf,GAMMC,IAAc,uCA2BPC,KAAe,EAC1B,gBAAa,WACb,UAAO,UACP,cAAW,IACX,uBAAoB,IACpB,SACA,iBACA,aACA,cACA,aACA,YACA,gBACA,qBAAkB,gBAClB,oBACA,6BACA,oBAAoBC,GACpB,SACA,QACA,GAAGC,QACmB;CACtB,IAAMC,IAAUC,EACd;EAAE,oBAAoBH;EAAiB;CAAQ,GAC/CI,CACF,GACMC,IAAOF,EACX;EACE,cAAcG;EACd,iBAAiB;EACjB,SAASC;CACX,GACAC,CACF,GAGMC,IAAmBC,KAAqB,EAAQR,EAAQ,mBACxDS,IAAgBD,KAAqB,EAAQL,EAAK,mBAIlD,EAAE,OAAOO,GAAW,QAAQC,MAAmBC,EAAkBC,CAAQ,GAEzEC,IAAkBC,EAAmBL,CAAS,GAE9CM,IAAgBL,MAAmB,QAAQE,KAAY,QAAQ,CAACC;CAmBtE,OAlBArB,EAAM,gBAAgB;EACpB,AAAIuB,KACFC,EACE,8BACA,mMACF;CAEJ,GAAG,CAACD,CAAa,CAAC,GAClBvB,EAAM,gBAAgB;EACpB,AAAIkB,KACFM,EACE,+BACA,sCAAsCN,EAAe,wKACvD;CAEJ,GAAG,CAACA,CAAc,CAAC,GAIjB,kBAAC,OAAD;EACO;EACL,GAAIZ;EACJ,MAAMmB,KAAQ;EACd,WAAWC,EAAGC,EAAsB,MAAM,6BAA6BC,CAAS;EAJlF,UAAA,CAME,kBAACC,GAAD;GACE,GAAItB;GACQ;GACN;GACN,UAAU,CAACO,MAAqBgB,KAAY,EAAQvB,EAAQ;GAC5D,mBAAmBO;GACnB,MAAMiB,EAAcC,GAAML,EAAsB,IAAI;GACtC;GACd,WAAWD,EACTC,EAAsB,qBACtBxB,GACA,6BACAI,EAAQ,SACV;GAEC;EACK,CAAA,GACR,kBAACsB,GAAD;GACE,GAAInB;GACQ;GACN;GACN,UAAU,CAACM,MAAkBc,KAAY,EAAQpB,EAAK;GACtD,mBAAmBM;GACnB,MAAMe,EACJV,IAAkBJ,IAAY,kBAACgB,GAAD,CAAkB,CAAA,GAChDN,EAAsB,QACxB;GACA,WAAWD,EACTC,EAAsB,YACtBxB,GACAF,EAAsBiC,IACtB,kBACAhC,EAAiBiC,IACjBzB,EAAK,SACP;EACD,CAAA,CACE;;AAET;AAEA,EAAY,cAAc"}

package/dist/components/button/ToggleButton.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/composeEventHandlers.cjs"),i=require("../../hooks/useControllable.cjs"),a=require("./buttonStyles.cjs"),o=require("./Button.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("react/jsx-runtime");var l=new Map;function u(e,t,n){let r=`${e}:${String(t)}:${String(n)}`,i=l.get(r);if(i===void 0){let o=new Set(a.buttonClassName({appearance:e,disabled:t}).split(/\s+/));i=a.buttonClassName({appearance:e,disabled:t,pressed:!0,accessible:n}).split(/\s+/).filter(e=>e!==``&&!o.has(e)).join(` `),l.set(r,i)}return i}var d=new Set([`checkbox`,`radio`,`switch`,`menuitemcheckbox`,`menuitemradio`,`option`,`treeitem`]);function f(e){let t=e?.trim().split(/\s+/)[0]?.toLowerCase()??``;return t===``||t===`button`?`pressed`:d.has(t)?`checked`:`none`}var p=({pressed:e,defaultPressed:a=!1,onPressedChange:l,appearance:d=`outline`,size:p=`medium`,disabled:m=!1,disabledFocusable:h=!1,isAccessible:g=!1,className:_,onClick:v,...y})=>{let[b,x]=i.useControllable(e,a,l),S=r.composeEventHandlers(v,()=>x(e=>!e)),C=y[`aria-disabled`],w=m||h||C===!0||C===`true`,T=y.role,E=f(T);return s.useEffect(()=>{E===`none`&&n.warnOnce(`ToggleButton:role-state`,`ToggleButton: \`role="${String(T).trim()}"\` allows neither \`aria-pressed\` nor \`aria-checked\`, so the pressed state is not exposed to assistive technology. Leave the role out (or use \`button\`), or use a role that has a checked state: \`checkbox\`, \`radio\`, \`switch\`, \`menuitemcheckbox\`, \`menuitemradio\`, \`option\` or \`treeitem\`.`)},[E,T]),(0,c.jsx)(o.Button,{...y,appearance:d,size:p,disabled:m,disabledFocusable:h,"aria-pressed":E===`pressed`?b:void 0,...E===`checked`&&{"aria-checked":b,"data-checked":b?``:void 0},"data-pressed":b?``:void 0,onClick:S,className:t.cn(b&&u(d,w,g),_)})};p.displayName=`ToggleButton`,exports.ToggleButton=p;
+"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("../../hooks/useControllable.cjs"),o=require("./buttonStyles.cjs"),s=require("./Button.cjs"),c=require("./Button.slots.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("react/jsx-runtime");var d=new Map;function f(e,t,n){let r=`${e}:${String(t)}:${String(n)}`,i=d.get(r);if(i===void 0){let a=new Set(o.buttonClassName({appearance:e,disabled:t}).split(/\s+/));i=o.buttonClassName({appearance:e,disabled:t,pressed:!0,accessible:n}).split(/\s+/).filter(e=>e!==``&&!a.has(e)).join(` `),d.set(r,i)}return i}var p=new Set([`checkbox`,`radio`,`switch`,`menuitemcheckbox`,`menuitemradio`,`option`,`treeitem`]);function m(e){let t=e?.trim().split(/\s+/)[0]?.toLowerCase()??``;return t===``||t===`button`?`pressed`:p.has(t)?`checked`:`none`}var h=({pressed:e,defaultPressed:o=!1,onPressedChange:d,appearance:p=`outline`,size:h=`medium`,disabled:g=!1,disabledFocusable:_=!1,isAccessible:v=!1,icon:y,className:b,onClick:x,...S})=>{let[C,w]=a.useControllable(e,o,d),T=r.composeEventHandlers(x,()=>w(e=>!e)),E=S[`aria-disabled`],D=g||_||E===!0||E===`true`,O=S.role,k=m(O);return l.useEffect(()=>{k===`none`&&n.warnOnce(`ToggleButton:role-state`,`ToggleButton: \`role="${String(O).trim()}"\` allows neither \`aria-pressed\` nor \`aria-checked\`, so the pressed state is not exposed to assistive technology. Leave the role out (or use \`button\`), or use a role that has a checked state: \`checkbox\`, \`radio\`, \`switch\`, \`menuitemcheckbox\`, \`menuitemradio\`, \`option\` or \`treeitem\`.`)},[k,O]),(0,u.jsx)(s.Button,{...S,icon:c.withPartClass(y,i.toggleButtonClassNames.icon),appearance:p,size:h,disabled:g,disabledFocusable:_,"aria-pressed":k===`pressed`?C:void 0,...k===`checked`&&{"aria-checked":C,"data-checked":C?``:void 0},"data-pressed":C?``:void 0,onClick:T,className:t.cn(i.toggleButtonClassNames.root,C&&f(p,D,v),b)})};h.displayName=`ToggleButton`,exports.ToggleButton=h;
 //# sourceMappingURL=ToggleButton.cjs.map

package/dist/components/button/ToggleButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.cjs","names":["buttonClassName","useControllable","composeEventHandlers","Button","cn","require_runtime","require_cn","require_dev","require_composeEventHandlers","require_useControllable","require_buttonStyles","require_Button","react","react_jsx_runtime","pressedLayerCache","getPressedLayer","key","appearance","disabled","accessible","layer","unpressed","cls","CHECKED_ROLES","stateAttributeFor","token","role","ToggleButton","props","isPressed","setPressed","pressed","defaultPressed","onPressedChange","handleClick","onClick","current","ariaDisabled","disabledLook","disabledFocusable","stateAttribute","isAccessible","className"],"sources":["../../../src/components/button/ToggleButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnOnce } from '../../lib/dev';\nimport { useControllable } from '../../hooks/useControllable';\nimport type { Size, Appearance, IconPosition, Slot } from '../../lib/types';\nimport { Button } from './Button';\nimport { buttonClassName } from './buttonStyles';\n\n/** Properties for the ToggleButton component. */\nexport interface ToggleButtonProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'onChange'\n> {\n  /** Controlled pressed state. */\n  pressed?: boolean;\n  /** Initial pressed state for uncontrolled usage.\n   * @default false\n   */\n  defaultPressed?: boolean;\n  /**\n   * Called with the new pressed state when the user toggles the button. Fires only when the state\n   * changes (once per click, also in StrictMode). In controlled mode the button keeps showing\n   * `pressed` until the parent passes the new value.\n   */\n  onPressedChange?: (pressed: boolean) => void;\n  /** Visual style variant.\n   * @default 'outline'\n   */\n  appearance?: Appearance;\n  /** Size affecting height, padding and font size.\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Icon slot rendered before the label (after it with `iconPosition=\"after\"`). Decorative: it\n   * renders with `aria-hidden=\"true\"` (a slot object can override it). An icon-only toggle needs\n   * `aria-label`, `aria-labelledby` or `title`.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Where the icon renders: before the label (the inline start) or after it (the inline end).\n   * Follows the writing direction through DOM order. Has no effect on an icon-only toggle.\n   * @default 'before'\n   */\n  iconPosition?: IconPosition;\n  /**\n   * Marks the toggle unavailable but keeps it focusable and in the tab order (see\n   * `Button.disabledFocusable`): `aria-disabled=\"true\"`, `data-disabled` and\n   * `data-disabled-focusable` instead of the native `disabled` attribute. Clicks, Enter and Space\n   * neither toggle it nor call `onClick` or `onPressedChange`; a pressed toggle shows the pressed\n   * and disabled look. Wins over `disabled` when both are set. In a `Toolbar` it stays in the\n   * arrow-key order.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n  /**\n   * Draws the pressed state as a brand fill with on-brand text (on `primary`, the pressed fill with\n   * an inset on-brand stroke), so the state never depends on a light tint (Fluent's\n   * `isAccessible`). Recommended for icon-only toggles in toolbars. Forced colors are unchanged.\n   * @default false\n   */\n  isAccessible?: boolean;\n  /** Ref to the rendered `<button>`. */\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * The classes `buttonClassName({ pressed: true, accessible })` adds on top of the unpressed button,\n * per appearance, disabled state and `isAccessible`. Derived from the shared maps (never re-typed),\n * so ToggleButton's pressed look is exactly the button family's: `Button` merges them after its own\n * classes with `cn()`, which replaces the conflicting unpressed colors. Size classes are not\n * involved.\n */\nconst pressedLayerCache = new Map<string, string>();\nfunction getPressedLayer(appearance: Appearance, disabled: boolean, accessible: boolean): string {\n  const key = `${appearance}:${String(disabled)}:${String(accessible)}`;\n  let layer = pressedLayerCache.get(key);\n  if (layer === undefined) {\n    const unpressed = new Set(buttonClassName({ appearance, disabled }).split(/\\s+/));\n    layer = buttonClassName({ appearance, disabled, pressed: true, accessible })\n      .split(/\\s+/)\n      .filter((cls) => cls !== '' && !unpressed.has(cls))\n      .join(' ');\n    pressedLayerCache.set(key, layer);\n  }\n  return layer;\n}\n\n/**\n * The roles that report a toggle's state with `aria-checked` (`aria-pressed` is allowed only on\n * `button`).\n */\nconst CHECKED_ROLES: ReadonlySet<string> = new Set([\n  'checkbox',\n  'radio',\n  'switch',\n  'menuitemcheckbox',\n  'menuitemradio',\n  'option',\n  'treeitem',\n]);\n\n/**\n * Which attribute reports the pressed state for `role` (its first token, ASCII case-insensitive):\n * `'pressed'` (no role or `button`), `'checked'` (a checked role) or `'none'` (any other role).\n */\nfunction stateAttributeFor(role: string | undefined): 'pressed' | 'checked' | 'none' {\n  const token = role?.trim().split(/\\s+/)[0]?.toLowerCase() ?? '';\n  if (token === '' || token === 'button') return 'pressed';\n  return CHECKED_ROLES.has(token) ? 'checked' : 'none';\n}\n\n/**\n * A button that switches between pressed and unpressed, e.g. Bold in a text toolbar. Built on\n * {@link Button}: same appearances, sizes, `type=\"button\"` default, decorative icon slot and\n * icon-only warning. The pressed look uses the shared pressed colors (selected tokens; a Highlight\n * outline in forced colors), or a brand fill with `isAccessible`.\n *\n * - Uncontrolled: `defaultPressed`; controlled: `pressed` + `onPressedChange`.\n * - A consumer `onClick` runs first; calling `event.preventDefault()` in it cancels the toggle.\n * - It reports its state with `aria-pressed` without a `role` or with `role=\"button\"`. With `role`\n *   `checkbox`, `radio`, `switch`, `menuitemcheckbox`, `menuitemradio`, `option` or `treeitem` it\n *   reports it with `aria-checked` (and `data-checked` while pressed) instead; with any other role\n *   it renders neither (development warning), because `aria-pressed` is allowed only on buttons.\n *   `data-pressed` is present while pressed in every case.\n *\n * @example\n * <ToggleButton icon={<BoldIcon />} aria-label=\"Bold\" />\n * <ToggleButton pressed={bold} onPressedChange={setBold}>Bold</ToggleButton>\n * <ToggleButton role=\"checkbox\" isAccessible icon={<GridIcon />} aria-label=\"Grid\" />\n */\nexport const ToggleButton = ({\n  pressed,\n  defaultPressed = false,\n  onPressedChange,\n  appearance = 'outline',\n  size = 'medium',\n  disabled = false,\n  disabledFocusable = false,\n  isAccessible = false,\n  className,\n  onClick,\n  ...props\n}: ToggleButtonProps) => {\n  const [isPressed, setPressed] = useControllable(pressed, defaultPressed, onPressedChange);\n\n  // With `disabledFocusable`, Button replaces this handler, so the toggle never runs.\n  const handleClick = composeEventHandlers(onClick, () => setPressed((current) => !current));\n\n  // Button shows the disabled look for `disabled`, `disabledFocusable` and a consumer\n  // `aria-disabled` alike.\n  const ariaDisabled = props['aria-disabled'];\n  const disabledLook =\n    disabled || disabledFocusable || ariaDisabled === true || ariaDisabled === 'true';\n\n  const role = props.role;\n  const stateAttribute = stateAttributeFor(role);\n  React.useEffect(() => {\n    if (stateAttribute !== 'none') return;\n    warnOnce(\n      'ToggleButton:role-state',\n      `ToggleButton: \\`role=\"${String(role).trim()}\"\\` allows neither \\`aria-pressed\\` nor \\`aria-checked\\`, so the pressed state is not exposed to assistive technology. Leave the role out (or use \\`button\\`), or use a role that has a checked state: \\`checkbox\\`, \\`radio\\`, \\`switch\\`, \\`menuitemcheckbox\\`, \\`menuitemradio\\`, \\`option\\` or \\`treeitem\\`.`,\n    );\n  }, [stateAttribute, role]);\n\n  return (\n    <Button\n      {...props}\n      appearance={appearance}\n      size={size}\n      disabled={disabled}\n      disabledFocusable={disabledFocusable}\n      // After the consumer's props: the attribute the role allows reports the state, and a\n      // consumer `aria-pressed` never survives where it is not allowed.\n      aria-pressed={stateAttribute === 'pressed' ? isPressed : undefined}\n      {...(stateAttribute === 'checked' && {\n        'aria-checked': isPressed,\n        'data-checked': isPressed ? '' : undefined,\n      })}\n      data-pressed={isPressed ? '' : undefined}\n      onClick={handleClick}\n      className={cn(\n        isPressed && getPressedLayer(appearance, disabledLook, isAccessible),\n        className,\n      )}\n    />\n  );\n};\n\nToggleButton.displayName = 'ToggleButton';\n"],"mappings":"oWA0EA,IAAMc,EAAoB,IAAI,IAC9B,SAASC,EAAgB,EAAwB,EAAmB,EAA6B,CAC/F,IAAMC,EAAM,GAAGC,EAAW,GAAG,OAAOC,CAAQ,EAAE,GAAG,OAAOC,CAAU,IAC9DC,EAAQN,EAAkB,IAAIE,CAAG,EACrC,GAAII,IAAU,IAAA,GAAW,CACvB,IAAMC,EAAY,IAAI,IAAIrB,EAAAA,gBAAgB,CAAE,aAAY,UAAS,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,EAChF,EAAQA,EAAAA,gBAAgB,CAAE,aAAY,WAAU,QAAS,GAAM,YAAW,CAAC,CAAC,CACzE,MAAM,KAAK,CAAC,CACZ,OAAQ,GAAQsB,IAAQ,IAAM,CAACD,EAAU,IAAIC,CAAG,CAAC,CAAC,CAClD,KAAK,GAAG,EACXR,EAAkB,IAAIE,EAAKI,CAAK,CAClC,CACA,OAAOA,CACT,CAMA,IAAMG,EAAqC,IAAI,IAAI,CACjD,WACA,QACA,SACA,mBACA,gBACA,SACA,UACF,CAAC,EAMD,SAASC,EAAkB,EAA0D,CACnF,IAAMC,EAAQC,GAAM,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,EAAE,EAAE,YAAY,GAAK,GAE7D,OADID,IAAU,IAAMA,IAAU,SAAiB,UACxCF,EAAc,IAAIE,CAAK,EAAI,UAAY,MAChD,CAqBA,IAAaE,GAAgB,CAC3B,UACA,iBAAiB,GACjB,kBACA,aAAa,UACb,OAAO,SACP,WAAW,GACX,oBAAoB,GACpB,eAAe,GACf,YACA,UACA,GAAGC,KACoB,CACvB,GAAM,CAACC,EAAWC,GAAc7B,EAAAA,gBAAgB8B,EAASC,EAAgBC,CAAe,EAGlFC,EAAchC,EAAAA,qBAAqBiC,MAAeL,EAAY,GAAY,CAACM,CAAO,CAAC,EAInFC,EAAeT,EAAM,iBACrBU,EACJpB,GAAYqB,GAAqBF,IAAiB,IAAQA,IAAiB,OAEvEX,EAAOE,EAAM,KACbY,EAAiBhB,EAAkBE,CAAI,EAS7C,OARAd,EAAM,cAAgB,CAChB4B,IAAmB,QACvBjC,EAAA,SACE,0BACA,yBAAyB,OAAOmB,CAAI,CAAC,CAAC,KAAK,EAAE,iTAC/C,CACF,EAAG,CAACc,EAAgBd,CAAI,CAAC,GAGvB,EAAAb,EAAA,IAAA,CAACV,EAAAA,OAAD,CACE,GAAIyB,EACQ,aACN,OACI,WACS,oBAGnB,eAAcY,IAAmB,UAAYX,EAAY,IAAA,GACzD,GAAKW,IAAmB,WAAa,CACnC,eAAgBX,EAChB,eAAgBA,EAAY,GAAK,IAAA,EACnC,EACA,eAAcA,EAAY,GAAK,IAAA,GAC/B,QAASK,EACT,UAAW9B,EAAAA,GACTyB,GAAad,EAAgBE,EAAYqB,EAAcG,CAAY,EACnEC,CACF,CACD,CAAA,CAEL,EAEA,EAAa,YAAc"}
+{"version":3,"file":"ToggleButton.cjs","names":["buttonClassName","useControllable","composeEventHandlers","Button","withPartClass","toggleButtonClassNames","cn","require_runtime","require_cn","require_dev","require_composeEventHandlers","require_classNames","require_useControllable","require_buttonStyles","require_Button","require_Button_slots","react","react_jsx_runtime","pressedLayerCache","getPressedLayer","key","appearance","disabled","accessible","layer","unpressed","cls","CHECKED_ROLES","stateAttributeFor","token","role","ToggleButton","props","isPressed","setPressed","pressed","defaultPressed","onPressedChange","handleClick","onClick","current","ariaDisabled","disabledLook","disabledFocusable","stateAttribute","icon","isAccessible","className"],"sources":["../../../src/components/button/ToggleButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { toggleButtonClassNames } from '../../lib/classNames';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnOnce } from '../../lib/dev';\nimport { useControllable } from '../../hooks/useControllable';\nimport type { Size, Appearance, IconPosition, Slot } from '../../lib/types';\nimport { Button } from './Button';\nimport { withPartClass } from './Button.slots';\nimport { buttonClassName } from './buttonStyles';\n\n/** Properties for the ToggleButton component. */\nexport interface ToggleButtonProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'onChange'\n> {\n  /** Controlled pressed state. */\n  pressed?: boolean;\n  /** Initial pressed state for uncontrolled usage.\n   * @default false\n   */\n  defaultPressed?: boolean;\n  /**\n   * Called with the new pressed state when the user toggles the button. Fires only when the state\n   * changes (once per click, also in StrictMode). In controlled mode the button keeps showing\n   * `pressed` until the parent passes the new value.\n   */\n  onPressedChange?: (pressed: boolean) => void;\n  /** Visual style variant.\n   * @default 'outline'\n   */\n  appearance?: Appearance;\n  /** Size affecting height, padding and font size.\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Icon slot rendered before the label (after it with `iconPosition=\"after\"`). Decorative: it\n   * renders with `aria-hidden=\"true\"` (a slot object can override it). An icon-only toggle needs\n   * `aria-label`, `aria-labelledby` or `title`.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Where the icon renders: before the label (the inline start) or after it (the inline end).\n   * Follows the writing direction through DOM order. Has no effect on an icon-only toggle.\n   * @default 'before'\n   */\n  iconPosition?: IconPosition;\n  /**\n   * Marks the toggle unavailable but keeps it focusable and in the tab order (see\n   * `Button.disabledFocusable`): `aria-disabled=\"true\"`, `data-disabled` and\n   * `data-disabled-focusable` instead of the native `disabled` attribute. Clicks, Enter and Space\n   * neither toggle it nor call `onClick` or `onPressedChange`; a pressed toggle shows the pressed\n   * and disabled look. Wins over `disabled` when both are set. In a `Toolbar` it stays in the\n   * arrow-key order.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n  /**\n   * Draws the pressed state as a brand fill with on-brand text (on `primary`, the pressed fill with\n   * an inset on-brand stroke), so the state never depends on a light tint (Fluent's\n   * `isAccessible`). Recommended for icon-only toggles in toolbars. Forced colors are unchanged.\n   * @default false\n   */\n  isAccessible?: boolean;\n  /** Ref to the rendered `<button>`. */\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * The classes `buttonClassName({ pressed: true, accessible })` adds on top of the unpressed button,\n * per appearance, disabled state and `isAccessible`. Derived from the shared maps (never re-typed),\n * so ToggleButton's pressed look is exactly the button family's: `Button` merges them after its own\n * classes with `cn()`, which replaces the conflicting unpressed colors. Size classes are not\n * involved.\n */\nconst pressedLayerCache = new Map<string, string>();\nfunction getPressedLayer(appearance: Appearance, disabled: boolean, accessible: boolean): string {\n  const key = `${appearance}:${String(disabled)}:${String(accessible)}`;\n  let layer = pressedLayerCache.get(key);\n  if (layer === undefined) {\n    const unpressed = new Set(buttonClassName({ appearance, disabled }).split(/\\s+/));\n    layer = buttonClassName({ appearance, disabled, pressed: true, accessible })\n      .split(/\\s+/)\n      .filter((cls) => cls !== '' && !unpressed.has(cls))\n      .join(' ');\n    pressedLayerCache.set(key, layer);\n  }\n  return layer;\n}\n\n/**\n * The roles that report a toggle's state with `aria-checked` (`aria-pressed` is allowed only on\n * `button`).\n */\nconst CHECKED_ROLES: ReadonlySet<string> = new Set([\n  'checkbox',\n  'radio',\n  'switch',\n  'menuitemcheckbox',\n  'menuitemradio',\n  'option',\n  'treeitem',\n]);\n\n/**\n * Which attribute reports the pressed state for `role` (its first token, ASCII case-insensitive):\n * `'pressed'` (no role or `button`), `'checked'` (a checked role) or `'none'` (any other role).\n */\nfunction stateAttributeFor(role: string | undefined): 'pressed' | 'checked' | 'none' {\n  const token = role?.trim().split(/\\s+/)[0]?.toLowerCase() ?? '';\n  if (token === '' || token === 'button') return 'pressed';\n  return CHECKED_ROLES.has(token) ? 'checked' : 'none';\n}\n\n/**\n * A button that switches between pressed and unpressed, e.g. Bold in a text toolbar. Built on\n * {@link Button}: same appearances, sizes, `type=\"button\"` default, decorative icon slot and\n * icon-only warning. The pressed look uses the shared pressed colors (selected tokens; a Highlight\n * outline in forced colors), or a brand fill with `isAccessible`.\n *\n * - Uncontrolled: `defaultPressed`; controlled: `pressed` + `onPressedChange`.\n * - A consumer `onClick` runs first; calling `event.preventDefault()` in it cancels the toggle.\n * - It reports its state with `aria-pressed` without a `role` or with `role=\"button\"`. With `role`\n *   `checkbox`, `radio`, `switch`, `menuitemcheckbox`, `menuitemradio`, `option` or `treeitem` it\n *   reports it with `aria-checked` (and `data-checked` while pressed) instead; with any other role\n *   it renders neither (development warning), because `aria-pressed` is allowed only on buttons.\n *   `data-pressed` is present while pressed in every case.\n *\n * @example\n * <ToggleButton icon={<BoldIcon />} aria-label=\"Bold\" />\n * <ToggleButton pressed={bold} onPressedChange={setBold}>Bold</ToggleButton>\n * <ToggleButton role=\"checkbox\" isAccessible icon={<GridIcon />} aria-label=\"Grid\" />\n */\nexport const ToggleButton = ({\n  pressed,\n  defaultPressed = false,\n  onPressedChange,\n  appearance = 'outline',\n  size = 'medium',\n  disabled = false,\n  disabledFocusable = false,\n  isAccessible = false,\n  icon,\n  className,\n  onClick,\n  ...props\n}: ToggleButtonProps) => {\n  const [isPressed, setPressed] = useControllable(pressed, defaultPressed, onPressedChange);\n\n  // With `disabledFocusable`, Button replaces this handler, so the toggle never runs.\n  const handleClick = composeEventHandlers(onClick, () => setPressed((current) => !current));\n\n  // Button shows the disabled look for `disabled`, `disabledFocusable` and a consumer\n  // `aria-disabled` alike.\n  const ariaDisabled = props['aria-disabled'];\n  const disabledLook =\n    disabled || disabledFocusable || ariaDisabled === true || ariaDisabled === 'true';\n\n  const role = props.role;\n  const stateAttribute = stateAttributeFor(role);\n  React.useEffect(() => {\n    if (stateAttribute !== 'none') return;\n    warnOnce(\n      'ToggleButton:role-state',\n      `ToggleButton: \\`role=\"${String(role).trim()}\"\\` allows neither \\`aria-pressed\\` nor \\`aria-checked\\`, so the pressed state is not exposed to assistive technology. Leave the role out (or use \\`button\\`), or use a role that has a checked state: \\`checkbox\\`, \\`radio\\`, \\`switch\\`, \\`menuitemcheckbox\\`, \\`menuitemradio\\`, \\`option\\` or \\`treeitem\\`.`,\n    );\n  }, [stateAttribute, role]);\n\n  return (\n    <Button\n      {...props}\n      icon={withPartClass(icon, toggleButtonClassNames.icon)}\n      appearance={appearance}\n      size={size}\n      disabled={disabled}\n      disabledFocusable={disabledFocusable}\n      // After the consumer's props: the attribute the role allows reports the state, and a\n      // consumer `aria-pressed` never survives where it is not allowed.\n      aria-pressed={stateAttribute === 'pressed' ? isPressed : undefined}\n      {...(stateAttribute === 'checked' && {\n        'aria-checked': isPressed,\n        'data-checked': isPressed ? '' : undefined,\n      })}\n      data-pressed={isPressed ? '' : undefined}\n      onClick={handleClick}\n      className={cn(\n        toggleButtonClassNames.root,\n        isPressed && getPressedLayer(appearance, disabledLook, isAccessible),\n        className,\n      )}\n    />\n  );\n};\n\nToggleButton.displayName = 'ToggleButton';\n"],"mappings":"0aA4EA,IAAMkB,EAAoB,IAAI,IAC9B,SAASC,EAAgB,EAAwB,EAAmB,EAA6B,CAC/F,IAAMC,EAAM,GAAGC,EAAW,GAAG,OAAOC,CAAQ,EAAE,GAAG,OAAOC,CAAU,IAC9DC,EAAQN,EAAkB,IAAIE,CAAG,EACrC,GAAII,IAAU,IAAA,GAAW,CACvB,IAAMC,EAAY,IAAI,IAAIzB,EAAAA,gBAAgB,CAAE,aAAY,UAAS,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,EAChF,EAAQA,EAAAA,gBAAgB,CAAE,aAAY,WAAU,QAAS,GAAM,YAAW,CAAC,CAAC,CACzE,MAAM,KAAK,CAAC,CACZ,OAAQ,GAAQ0B,IAAQ,IAAM,CAACD,EAAU,IAAIC,CAAG,CAAC,CAAC,CAClD,KAAK,GAAG,EACXR,EAAkB,IAAIE,EAAKI,CAAK,CAClC,CACA,OAAOA,CACT,CAMA,IAAMG,EAAqC,IAAI,IAAI,CACjD,WACA,QACA,SACA,mBACA,gBACA,SACA,UACF,CAAC,EAMD,SAASC,EAAkB,EAA0D,CACnF,IAAMC,EAAQC,GAAM,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,EAAE,EAAE,YAAY,GAAK,GAE7D,OADID,IAAU,IAAMA,IAAU,SAAiB,UACxCF,EAAc,IAAIE,CAAK,EAAI,UAAY,MAChD,CAqBA,IAAaE,GAAgB,CAC3B,UACA,iBAAiB,GACjB,kBACA,aAAa,UACb,OAAO,SACP,WAAW,GACX,oBAAoB,GACpB,eAAe,GACf,OACA,YACA,UACA,GAAGC,KACoB,CACvB,GAAM,CAACC,EAAWC,GAAcjC,EAAAA,gBAAgBkC,EAASC,EAAgBC,CAAe,EAGlFC,EAAcpC,EAAAA,qBAAqBqC,MAAeL,EAAY,GAAY,CAACM,CAAO,CAAC,EAInFC,EAAeT,EAAM,iBACrBU,EACJpB,GAAYqB,GAAqBF,IAAiB,IAAQA,IAAiB,OAEvEX,EAAOE,EAAM,KACbY,EAAiBhB,EAAkBE,CAAI,EAS7C,OARAd,EAAM,cAAgB,CAChB4B,IAAmB,QACvBnC,EAAA,SACE,0BACA,yBAAyB,OAAOqB,CAAI,CAAC,CAAC,KAAK,EAAE,iTAC/C,CACF,EAAG,CAACc,EAAgBd,CAAI,CAAC,GAGvB,EAAAb,EAAA,IAAA,CAACd,EAAAA,OAAD,CACE,GAAI6B,EACJ,KAAM5B,EAAAA,cAAcyC,EAAMxC,EAAAA,uBAAuB,IAAI,EACzC,aACN,OACI,WACS,oBAGnB,eAAcuC,IAAmB,UAAYX,EAAY,IAAA,GACzD,GAAKW,IAAmB,WAAa,CACnC,eAAgBX,EAChB,eAAgBA,EAAY,GAAK,IAAA,EACnC,EACA,eAAcA,EAAY,GAAK,IAAA,GAC/B,QAASK,EACT,UAAWhC,EAAAA,GACTD,EAAAA,uBAAuB,KACvB4B,GAAad,EAAgBE,EAAYqB,EAAcI,CAAY,EACnEC,CACF,CACD,CAAA,CAEL,EAEA,EAAa,YAAc"}

package/dist/components/button/ToggleButton.mjs

@@ -2,30 +2,32 @@
 import { cn as e } from "../../lib/cn.mjs";
 import { warnOnce as t } from "../../lib/dev.mjs";
 import { composeEventHandlers as n } from "../../lib/composeEventHandlers.mjs";
-import { useControllable as r } from "../../hooks/useControllable.mjs";
-import { buttonClassName as i } from "./buttonStyles.mjs";
-import { Button as a } from "./Button.mjs";
-import * as o from "react";
-import { jsx as s } from "react/jsx-runtime";
+import { toggleButtonClassNames as r } from "../../lib/classNames.mjs";
+import { useControllable as i } from "../../hooks/useControllable.mjs";
+import { buttonClassName as a } from "./buttonStyles.mjs";
+import { Button as o } from "./Button.mjs";
+import { withPartClass as s } from "./Button.slots.mjs";
+import * as c from "react";
+import { jsx as l } from "react/jsx-runtime";
 //#region src/components/button/ToggleButton.tsx
-var c = /* @__PURE__ */ new Map();
-function l(e, t, n) {
-	let r = `${e}:${String(t)}:${String(n)}`, a = c.get(r);
-	if (a === void 0) {
-		let o = new Set(i({
+var u = /* @__PURE__ */ new Map();
+function d(e, t, n) {
+	let r = `${e}:${String(t)}:${String(n)}`, i = u.get(r);
+	if (i === void 0) {
+		let o = new Set(a({
 			appearance: e,
 			disabled: t
 		}).split(/\s+/));
-		a = i({
+		i = a({
 			appearance: e,
 			disabled: t,
 			pressed: !0,
 			accessible: n
-		}).split(/\s+/).filter((e) => e !== "" && !o.has(e)).join(" "), c.set(r, a);
+		}).split(/\s+/).filter((e) => e !== "" && !o.has(e)).join(" "), u.set(r, i);
 	}
-	return a;
+	return i;
 }
-var u = /* @__PURE__ */ new Set([
+var f = /* @__PURE__ */ new Set([
 	"checkbox",
 	"radio",
 	"switch",
@@ -34,32 +36,33 @@ var u = /* @__PURE__ */ new Set([
 	"option",
 	"treeitem"
 ]);
-function d(e) {
+function p(e) {
 	let t = e?.trim().split(/\s+/)[0]?.toLowerCase() ?? "";
-	return t === "" || t === "button" ? "pressed" : u.has(t) ? "checked" : "none";
+	return t === "" || t === "button" ? "pressed" : f.has(t) ? "checked" : "none";
 }
-var f = ({ pressed: i, defaultPressed: c = !1, onPressedChange: u, appearance: f = "outline", size: p = "medium", disabled: m = !1, disabledFocusable: h = !1, isAccessible: g = !1, className: _, onClick: v, ...y }) => {
-	let [b, x] = r(i, c, u), S = n(v, () => x((e) => !e)), C = y["aria-disabled"], w = m || h || C === !0 || C === "true", T = y.role, E = d(T);
-	return o.useEffect(() => {
-		E === "none" && t("ToggleButton:role-state", `ToggleButton: \`role="${String(T).trim()}"\` allows neither \`aria-pressed\` nor \`aria-checked\`, so the pressed state is not exposed to assistive technology. Leave the role out (or use \`button\`), or use a role that has a checked state: \`checkbox\`, \`radio\`, \`switch\`, \`menuitemcheckbox\`, \`menuitemradio\`, \`option\` or \`treeitem\`.`);
-	}, [E, T]), /* @__PURE__ */ s(a, {
-		...y,
-		appearance: f,
-		size: p,
-		disabled: m,
-		disabledFocusable: h,
-		"aria-pressed": E === "pressed" ? b : void 0,
-		...E === "checked" && {
-			"aria-checked": b,
-			"data-checked": b ? "" : void 0
+var m = ({ pressed: a, defaultPressed: u = !1, onPressedChange: f, appearance: m = "outline", size: h = "medium", disabled: g = !1, disabledFocusable: _ = !1, isAccessible: v = !1, icon: y, className: b, onClick: x, ...S }) => {
+	let [C, w] = i(a, u, f), T = n(x, () => w((e) => !e)), E = S["aria-disabled"], D = g || _ || E === !0 || E === "true", O = S.role, k = p(O);
+	return c.useEffect(() => {
+		k === "none" && t("ToggleButton:role-state", `ToggleButton: \`role="${String(O).trim()}"\` allows neither \`aria-pressed\` nor \`aria-checked\`, so the pressed state is not exposed to assistive technology. Leave the role out (or use \`button\`), or use a role that has a checked state: \`checkbox\`, \`radio\`, \`switch\`, \`menuitemcheckbox\`, \`menuitemradio\`, \`option\` or \`treeitem\`.`);
+	}, [k, O]), /* @__PURE__ */ l(o, {
+		...S,
+		icon: s(y, r.icon),
+		appearance: m,
+		size: h,
+		disabled: g,
+		disabledFocusable: _,
+		"aria-pressed": k === "pressed" ? C : void 0,
+		...k === "checked" && {
+			"aria-checked": C,
+			"data-checked": C ? "" : void 0
 		},
-		"data-pressed": b ? "" : void 0,
-		onClick: S,
-		className: e(b && l(f, w, g), _)
+		"data-pressed": C ? "" : void 0,
+		onClick: T,
+		className: e(r.root, C && d(m, D, v), b)
 	});
 };
-f.displayName = "ToggleButton";
+m.displayName = "ToggleButton";
 //#endregion
-export { f as ToggleButton };
+export { m as ToggleButton };
 
 //# sourceMappingURL=ToggleButton.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.mjs","names":["React","pressedLayerCache","getPressedLayer","key","appearance","disabled","accessible","layer","unpressed","buttonClassName","cls","CHECKED_ROLES","stateAttributeFor","token","role","ToggleButton","props","isPressed","setPressed","useControllable","pressed","defaultPressed","onPressedChange","handleClick","composeEventHandlers","onClick","current","ariaDisabled","disabledLook","disabledFocusable","stateAttribute","warnOnce","Button","cn","isAccessible","className"],"sources":["../../../src/components/button/ToggleButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnOnce } from '../../lib/dev';\nimport { useControllable } from '../../hooks/useControllable';\nimport type { Size, Appearance, IconPosition, Slot } from '../../lib/types';\nimport { Button } from './Button';\nimport { buttonClassName } from './buttonStyles';\n\n/** Properties for the ToggleButton component. */\nexport interface ToggleButtonProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'onChange'\n> {\n  /** Controlled pressed state. */\n  pressed?: boolean;\n  /** Initial pressed state for uncontrolled usage.\n   * @default false\n   */\n  defaultPressed?: boolean;\n  /**\n   * Called with the new pressed state when the user toggles the button. Fires only when the state\n   * changes (once per click, also in StrictMode). In controlled mode the button keeps showing\n   * `pressed` until the parent passes the new value.\n   */\n  onPressedChange?: (pressed: boolean) => void;\n  /** Visual style variant.\n   * @default 'outline'\n   */\n  appearance?: Appearance;\n  /** Size affecting height, padding and font size.\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Icon slot rendered before the label (after it with `iconPosition=\"after\"`). Decorative: it\n   * renders with `aria-hidden=\"true\"` (a slot object can override it). An icon-only toggle needs\n   * `aria-label`, `aria-labelledby` or `title`.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Where the icon renders: before the label (the inline start) or after it (the inline end).\n   * Follows the writing direction through DOM order. Has no effect on an icon-only toggle.\n   * @default 'before'\n   */\n  iconPosition?: IconPosition;\n  /**\n   * Marks the toggle unavailable but keeps it focusable and in the tab order (see\n   * `Button.disabledFocusable`): `aria-disabled=\"true\"`, `data-disabled` and\n   * `data-disabled-focusable` instead of the native `disabled` attribute. Clicks, Enter and Space\n   * neither toggle it nor call `onClick` or `onPressedChange`; a pressed toggle shows the pressed\n   * and disabled look. Wins over `disabled` when both are set. In a `Toolbar` it stays in the\n   * arrow-key order.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n  /**\n   * Draws the pressed state as a brand fill with on-brand text (on `primary`, the pressed fill with\n   * an inset on-brand stroke), so the state never depends on a light tint (Fluent's\n   * `isAccessible`). Recommended for icon-only toggles in toolbars. Forced colors are unchanged.\n   * @default false\n   */\n  isAccessible?: boolean;\n  /** Ref to the rendered `<button>`. */\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * The classes `buttonClassName({ pressed: true, accessible })` adds on top of the unpressed button,\n * per appearance, disabled state and `isAccessible`. Derived from the shared maps (never re-typed),\n * so ToggleButton's pressed look is exactly the button family's: `Button` merges them after its own\n * classes with `cn()`, which replaces the conflicting unpressed colors. Size classes are not\n * involved.\n */\nconst pressedLayerCache = new Map<string, string>();\nfunction getPressedLayer(appearance: Appearance, disabled: boolean, accessible: boolean): string {\n  const key = `${appearance}:${String(disabled)}:${String(accessible)}`;\n  let layer = pressedLayerCache.get(key);\n  if (layer === undefined) {\n    const unpressed = new Set(buttonClassName({ appearance, disabled }).split(/\\s+/));\n    layer = buttonClassName({ appearance, disabled, pressed: true, accessible })\n      .split(/\\s+/)\n      .filter((cls) => cls !== '' && !unpressed.has(cls))\n      .join(' ');\n    pressedLayerCache.set(key, layer);\n  }\n  return layer;\n}\n\n/**\n * The roles that report a toggle's state with `aria-checked` (`aria-pressed` is allowed only on\n * `button`).\n */\nconst CHECKED_ROLES: ReadonlySet<string> = new Set([\n  'checkbox',\n  'radio',\n  'switch',\n  'menuitemcheckbox',\n  'menuitemradio',\n  'option',\n  'treeitem',\n]);\n\n/**\n * Which attribute reports the pressed state for `role` (its first token, ASCII case-insensitive):\n * `'pressed'` (no role or `button`), `'checked'` (a checked role) or `'none'` (any other role).\n */\nfunction stateAttributeFor(role: string | undefined): 'pressed' | 'checked' | 'none' {\n  const token = role?.trim().split(/\\s+/)[0]?.toLowerCase() ?? '';\n  if (token === '' || token === 'button') return 'pressed';\n  return CHECKED_ROLES.has(token) ? 'checked' : 'none';\n}\n\n/**\n * A button that switches between pressed and unpressed, e.g. Bold in a text toolbar. Built on\n * {@link Button}: same appearances, sizes, `type=\"button\"` default, decorative icon slot and\n * icon-only warning. The pressed look uses the shared pressed colors (selected tokens; a Highlight\n * outline in forced colors), or a brand fill with `isAccessible`.\n *\n * - Uncontrolled: `defaultPressed`; controlled: `pressed` + `onPressedChange`.\n * - A consumer `onClick` runs first; calling `event.preventDefault()` in it cancels the toggle.\n * - It reports its state with `aria-pressed` without a `role` or with `role=\"button\"`. With `role`\n *   `checkbox`, `radio`, `switch`, `menuitemcheckbox`, `menuitemradio`, `option` or `treeitem` it\n *   reports it with `aria-checked` (and `data-checked` while pressed) instead; with any other role\n *   it renders neither (development warning), because `aria-pressed` is allowed only on buttons.\n *   `data-pressed` is present while pressed in every case.\n *\n * @example\n * <ToggleButton icon={<BoldIcon />} aria-label=\"Bold\" />\n * <ToggleButton pressed={bold} onPressedChange={setBold}>Bold</ToggleButton>\n * <ToggleButton role=\"checkbox\" isAccessible icon={<GridIcon />} aria-label=\"Grid\" />\n */\nexport const ToggleButton = ({\n  pressed,\n  defaultPressed = false,\n  onPressedChange,\n  appearance = 'outline',\n  size = 'medium',\n  disabled = false,\n  disabledFocusable = false,\n  isAccessible = false,\n  className,\n  onClick,\n  ...props\n}: ToggleButtonProps) => {\n  const [isPressed, setPressed] = useControllable(pressed, defaultPressed, onPressedChange);\n\n  // With `disabledFocusable`, Button replaces this handler, so the toggle never runs.\n  const handleClick = composeEventHandlers(onClick, () => setPressed((current) => !current));\n\n  // Button shows the disabled look for `disabled`, `disabledFocusable` and a consumer\n  // `aria-disabled` alike.\n  const ariaDisabled = props['aria-disabled'];\n  const disabledLook =\n    disabled || disabledFocusable || ariaDisabled === true || ariaDisabled === 'true';\n\n  const role = props.role;\n  const stateAttribute = stateAttributeFor(role);\n  React.useEffect(() => {\n    if (stateAttribute !== 'none') return;\n    warnOnce(\n      'ToggleButton:role-state',\n      `ToggleButton: \\`role=\"${String(role).trim()}\"\\` allows neither \\`aria-pressed\\` nor \\`aria-checked\\`, so the pressed state is not exposed to assistive technology. Leave the role out (or use \\`button\\`), or use a role that has a checked state: \\`checkbox\\`, \\`radio\\`, \\`switch\\`, \\`menuitemcheckbox\\`, \\`menuitemradio\\`, \\`option\\` or \\`treeitem\\`.`,\n    );\n  }, [stateAttribute, role]);\n\n  return (\n    <Button\n      {...props}\n      appearance={appearance}\n      size={size}\n      disabled={disabled}\n      disabledFocusable={disabledFocusable}\n      // After the consumer's props: the attribute the role allows reports the state, and a\n      // consumer `aria-pressed` never survives where it is not allowed.\n      aria-pressed={stateAttribute === 'pressed' ? isPressed : undefined}\n      {...(stateAttribute === 'checked' && {\n        'aria-checked': isPressed,\n        'data-checked': isPressed ? '' : undefined,\n      })}\n      data-pressed={isPressed ? '' : undefined}\n      onClick={handleClick}\n      className={cn(\n        isPressed && getPressedLayer(appearance, disabledLook, isAccessible),\n        className,\n      )}\n    />\n  );\n};\n\nToggleButton.displayName = 'ToggleButton';\n"],"mappings":";;;;;;;;;;AA0EA,IAAMC,oBAAoB,IAAI,IAAoB;AAClD,SAASC,EAAgB,GAAwB,GAAmB,GAA6B;CAC/F,IAAMC,IAAM,GAAGC,EAAW,GAAG,OAAOC,CAAQ,EAAE,GAAG,OAAOC,CAAU,KAC9DC,IAAQN,EAAkB,IAAIE,CAAG;CACrC,IAAII,MAAU,KAAA,GAAW;EACvB,IAAMC,IAAY,IAAI,IAAIC,EAAgB;GAAE;GAAY;EAAS,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC;EAKhF,AAJA,IAAQA,EAAgB;GAAE;GAAY;GAAU,SAAS;GAAM;EAAW,CAAC,CAAC,CACzE,MAAM,KAAK,CAAC,CACZ,QAAQ,MAAQC,MAAQ,MAAM,CAACF,EAAU,IAAIE,CAAG,CAAC,CAAC,CAClD,KAAK,GAAG,GACXT,EAAkB,IAAIE,GAAKI,CAAK;CAClC;CACA,OAAOA;AACT;AAMA,IAAMI,oBAAqC,IAAI,IAAI;CACjD;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;AAMD,SAASC,EAAkB,GAA0D;CACnF,IAAMC,IAAQC,GAAM,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,EAAE,EAAE,YAAY,KAAK;CAE7D,OADID,MAAU,MAAMA,MAAU,WAAiB,YACxCF,EAAc,IAAIE,CAAK,IAAI,YAAY;AAChD;AAqBA,IAAaE,KAAgB,EAC3B,YACA,oBAAiB,IACjB,oBACA,gBAAa,WACb,UAAO,UACP,cAAW,IACX,uBAAoB,IACpB,kBAAe,IACf,cACA,YACA,GAAGC,QACoB;CACvB,IAAM,CAACC,GAAWC,KAAcC,EAAgBC,GAASC,GAAgBC,CAAe,GAGlFC,IAAcC,EAAqBC,SAAeP,GAAY,MAAY,CAACQ,CAAO,CAAC,GAInFC,IAAeX,EAAM,kBACrBY,IACJvB,KAAYwB,KAAqBF,MAAiB,MAAQA,MAAiB,QAEvEb,IAAOE,EAAM,MACbc,IAAiBlB,EAAkBE,CAAI;CAS7C,OARAd,EAAM,gBAAgB;EACpB,AAAI8B,MAAmB,UACvBC,EACE,2BACA,yBAAyB,OAAOjB,CAAI,CAAC,CAAC,KAAK,EAAE,iTAC/C;CACF,GAAG,CAACgB,GAAgBhB,CAAI,CAAC,GAGvB,kBAACkB,GAAD;EACE,GAAIhB;EACQ;EACN;EACI;EACS;EAGnB,gBAAcc,MAAmB,YAAYb,IAAY,KAAA;EACzD,GAAKa,MAAmB,aAAa;GACnC,gBAAgBb;GAChB,gBAAgBA,IAAY,KAAK,KAAA;EACnC;EACA,gBAAcA,IAAY,KAAK,KAAA;EAC/B,SAASM;EACT,WAAWU,EACThB,KAAaf,EAAgBE,GAAYwB,GAAcM,CAAY,GACnEC,CACF;CACD,CAAA;AAEL;AAEA,EAAa,cAAc"}
+{"version":3,"file":"ToggleButton.mjs","names":["React","pressedLayerCache","getPressedLayer","key","appearance","disabled","accessible","layer","unpressed","buttonClassName","cls","CHECKED_ROLES","stateAttributeFor","token","role","ToggleButton","props","isPressed","setPressed","useControllable","pressed","defaultPressed","onPressedChange","handleClick","composeEventHandlers","onClick","current","ariaDisabled","disabledLook","disabledFocusable","stateAttribute","warnOnce","Button","withPartClass","icon","toggleButtonClassNames","cn","isAccessible","className"],"sources":["../../../src/components/button/ToggleButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { toggleButtonClassNames } from '../../lib/classNames';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { warnOnce } from '../../lib/dev';\nimport { useControllable } from '../../hooks/useControllable';\nimport type { Size, Appearance, IconPosition, Slot } from '../../lib/types';\nimport { Button } from './Button';\nimport { withPartClass } from './Button.slots';\nimport { buttonClassName } from './buttonStyles';\n\n/** Properties for the ToggleButton component. */\nexport interface ToggleButtonProps extends Omit<\n  React.ButtonHTMLAttributes<HTMLButtonElement>,\n  'onChange'\n> {\n  /** Controlled pressed state. */\n  pressed?: boolean;\n  /** Initial pressed state for uncontrolled usage.\n   * @default false\n   */\n  defaultPressed?: boolean;\n  /**\n   * Called with the new pressed state when the user toggles the button. Fires only when the state\n   * changes (once per click, also in StrictMode). In controlled mode the button keeps showing\n   * `pressed` until the parent passes the new value.\n   */\n  onPressedChange?: (pressed: boolean) => void;\n  /** Visual style variant.\n   * @default 'outline'\n   */\n  appearance?: Appearance;\n  /** Size affecting height, padding and font size.\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Icon slot rendered before the label (after it with `iconPosition=\"after\"`). Decorative: it\n   * renders with `aria-hidden=\"true\"` (a slot object can override it). An icon-only toggle needs\n   * `aria-label`, `aria-labelledby` or `title`.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Where the icon renders: before the label (the inline start) or after it (the inline end).\n   * Follows the writing direction through DOM order. Has no effect on an icon-only toggle.\n   * @default 'before'\n   */\n  iconPosition?: IconPosition;\n  /**\n   * Marks the toggle unavailable but keeps it focusable and in the tab order (see\n   * `Button.disabledFocusable`): `aria-disabled=\"true\"`, `data-disabled` and\n   * `data-disabled-focusable` instead of the native `disabled` attribute. Clicks, Enter and Space\n   * neither toggle it nor call `onClick` or `onPressedChange`; a pressed toggle shows the pressed\n   * and disabled look. Wins over `disabled` when both are set. In a `Toolbar` it stays in the\n   * arrow-key order.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n  /**\n   * Draws the pressed state as a brand fill with on-brand text (on `primary`, the pressed fill with\n   * an inset on-brand stroke), so the state never depends on a light tint (Fluent's\n   * `isAccessible`). Recommended for icon-only toggles in toolbars. Forced colors are unchanged.\n   * @default false\n   */\n  isAccessible?: boolean;\n  /** Ref to the rendered `<button>`. */\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * The classes `buttonClassName({ pressed: true, accessible })` adds on top of the unpressed button,\n * per appearance, disabled state and `isAccessible`. Derived from the shared maps (never re-typed),\n * so ToggleButton's pressed look is exactly the button family's: `Button` merges them after its own\n * classes with `cn()`, which replaces the conflicting unpressed colors. Size classes are not\n * involved.\n */\nconst pressedLayerCache = new Map<string, string>();\nfunction getPressedLayer(appearance: Appearance, disabled: boolean, accessible: boolean): string {\n  const key = `${appearance}:${String(disabled)}:${String(accessible)}`;\n  let layer = pressedLayerCache.get(key);\n  if (layer === undefined) {\n    const unpressed = new Set(buttonClassName({ appearance, disabled }).split(/\\s+/));\n    layer = buttonClassName({ appearance, disabled, pressed: true, accessible })\n      .split(/\\s+/)\n      .filter((cls) => cls !== '' && !unpressed.has(cls))\n      .join(' ');\n    pressedLayerCache.set(key, layer);\n  }\n  return layer;\n}\n\n/**\n * The roles that report a toggle's state with `aria-checked` (`aria-pressed` is allowed only on\n * `button`).\n */\nconst CHECKED_ROLES: ReadonlySet<string> = new Set([\n  'checkbox',\n  'radio',\n  'switch',\n  'menuitemcheckbox',\n  'menuitemradio',\n  'option',\n  'treeitem',\n]);\n\n/**\n * Which attribute reports the pressed state for `role` (its first token, ASCII case-insensitive):\n * `'pressed'` (no role or `button`), `'checked'` (a checked role) or `'none'` (any other role).\n */\nfunction stateAttributeFor(role: string | undefined): 'pressed' | 'checked' | 'none' {\n  const token = role?.trim().split(/\\s+/)[0]?.toLowerCase() ?? '';\n  if (token === '' || token === 'button') return 'pressed';\n  return CHECKED_ROLES.has(token) ? 'checked' : 'none';\n}\n\n/**\n * A button that switches between pressed and unpressed, e.g. Bold in a text toolbar. Built on\n * {@link Button}: same appearances, sizes, `type=\"button\"` default, decorative icon slot and\n * icon-only warning. The pressed look uses the shared pressed colors (selected tokens; a Highlight\n * outline in forced colors), or a brand fill with `isAccessible`.\n *\n * - Uncontrolled: `defaultPressed`; controlled: `pressed` + `onPressedChange`.\n * - A consumer `onClick` runs first; calling `event.preventDefault()` in it cancels the toggle.\n * - It reports its state with `aria-pressed` without a `role` or with `role=\"button\"`. With `role`\n *   `checkbox`, `radio`, `switch`, `menuitemcheckbox`, `menuitemradio`, `option` or `treeitem` it\n *   reports it with `aria-checked` (and `data-checked` while pressed) instead; with any other role\n *   it renders neither (development warning), because `aria-pressed` is allowed only on buttons.\n *   `data-pressed` is present while pressed in every case.\n *\n * @example\n * <ToggleButton icon={<BoldIcon />} aria-label=\"Bold\" />\n * <ToggleButton pressed={bold} onPressedChange={setBold}>Bold</ToggleButton>\n * <ToggleButton role=\"checkbox\" isAccessible icon={<GridIcon />} aria-label=\"Grid\" />\n */\nexport const ToggleButton = ({\n  pressed,\n  defaultPressed = false,\n  onPressedChange,\n  appearance = 'outline',\n  size = 'medium',\n  disabled = false,\n  disabledFocusable = false,\n  isAccessible = false,\n  icon,\n  className,\n  onClick,\n  ...props\n}: ToggleButtonProps) => {\n  const [isPressed, setPressed] = useControllable(pressed, defaultPressed, onPressedChange);\n\n  // With `disabledFocusable`, Button replaces this handler, so the toggle never runs.\n  const handleClick = composeEventHandlers(onClick, () => setPressed((current) => !current));\n\n  // Button shows the disabled look for `disabled`, `disabledFocusable` and a consumer\n  // `aria-disabled` alike.\n  const ariaDisabled = props['aria-disabled'];\n  const disabledLook =\n    disabled || disabledFocusable || ariaDisabled === true || ariaDisabled === 'true';\n\n  const role = props.role;\n  const stateAttribute = stateAttributeFor(role);\n  React.useEffect(() => {\n    if (stateAttribute !== 'none') return;\n    warnOnce(\n      'ToggleButton:role-state',\n      `ToggleButton: \\`role=\"${String(role).trim()}\"\\` allows neither \\`aria-pressed\\` nor \\`aria-checked\\`, so the pressed state is not exposed to assistive technology. Leave the role out (or use \\`button\\`), or use a role that has a checked state: \\`checkbox\\`, \\`radio\\`, \\`switch\\`, \\`menuitemcheckbox\\`, \\`menuitemradio\\`, \\`option\\` or \\`treeitem\\`.`,\n    );\n  }, [stateAttribute, role]);\n\n  return (\n    <Button\n      {...props}\n      icon={withPartClass(icon, toggleButtonClassNames.icon)}\n      appearance={appearance}\n      size={size}\n      disabled={disabled}\n      disabledFocusable={disabledFocusable}\n      // After the consumer's props: the attribute the role allows reports the state, and a\n      // consumer `aria-pressed` never survives where it is not allowed.\n      aria-pressed={stateAttribute === 'pressed' ? isPressed : undefined}\n      {...(stateAttribute === 'checked' && {\n        'aria-checked': isPressed,\n        'data-checked': isPressed ? '' : undefined,\n      })}\n      data-pressed={isPressed ? '' : undefined}\n      onClick={handleClick}\n      className={cn(\n        toggleButtonClassNames.root,\n        isPressed && getPressedLayer(appearance, disabledLook, isAccessible),\n        className,\n      )}\n    />\n  );\n};\n\nToggleButton.displayName = 'ToggleButton';\n"],"mappings":";;;;;;;;;;;;AA4EA,IAAMC,oBAAoB,IAAI,IAAoB;AAClD,SAASC,EAAgB,GAAwB,GAAmB,GAA6B;CAC/F,IAAMC,IAAM,GAAGC,EAAW,GAAG,OAAOC,CAAQ,EAAE,GAAG,OAAOC,CAAU,KAC9DC,IAAQN,EAAkB,IAAIE,CAAG;CACrC,IAAII,MAAU,KAAA,GAAW;EACvB,IAAMC,IAAY,IAAI,IAAIC,EAAgB;GAAE;GAAY;EAAS,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC;EAKhF,AAJA,IAAQA,EAAgB;GAAE;GAAY;GAAU,SAAS;GAAM;EAAW,CAAC,CAAC,CACzE,MAAM,KAAK,CAAC,CACZ,QAAQ,MAAQC,MAAQ,MAAM,CAACF,EAAU,IAAIE,CAAG,CAAC,CAAC,CAClD,KAAK,GAAG,GACXT,EAAkB,IAAIE,GAAKI,CAAK;CAClC;CACA,OAAOA;AACT;AAMA,IAAMI,oBAAqC,IAAI,IAAI;CACjD;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;AAMD,SAASC,EAAkB,GAA0D;CACnF,IAAMC,IAAQC,GAAM,KAAK,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,EAAE,EAAE,YAAY,KAAK;CAE7D,OADID,MAAU,MAAMA,MAAU,WAAiB,YACxCF,EAAc,IAAIE,CAAK,IAAI,YAAY;AAChD;AAqBA,IAAaE,KAAgB,EAC3B,YACA,oBAAiB,IACjB,oBACA,gBAAa,WACb,UAAO,UACP,cAAW,IACX,uBAAoB,IACpB,kBAAe,IACf,SACA,cACA,YACA,GAAGC,QACoB;CACvB,IAAM,CAACC,GAAWC,KAAcC,EAAgBC,GAASC,GAAgBC,CAAe,GAGlFC,IAAcC,EAAqBC,SAAeP,GAAY,MAAY,CAACQ,CAAO,CAAC,GAInFC,IAAeX,EAAM,kBACrBY,IACJvB,KAAYwB,KAAqBF,MAAiB,MAAQA,MAAiB,QAEvEb,IAAOE,EAAM,MACbc,IAAiBlB,EAAkBE,CAAI;CAS7C,OARAd,EAAM,gBAAgB;EACpB,AAAI8B,MAAmB,UACvBC,EACE,2BACA,yBAAyB,OAAOjB,CAAI,CAAC,CAAC,KAAK,EAAE,iTAC/C;CACF,GAAG,CAACgB,GAAgBhB,CAAI,CAAC,GAGvB,kBAACkB,GAAD;EACE,GAAIhB;EACJ,MAAMiB,EAAcC,GAAMC,EAAuB,IAAI;EACzC;EACN;EACI;EACS;EAGnB,gBAAcL,MAAmB,YAAYb,IAAY,KAAA;EACzD,GAAKa,MAAmB,aAAa;GACnC,gBAAgBb;GAChB,gBAAgBA,IAAY,KAAK,KAAA;EACnC;EACA,gBAAcA,IAAY,KAAK,KAAA;EAC/B,SAASM;EACT,WAAWa,EACTD,EAAuB,MACvBlB,KAAaf,EAAgBE,GAAYwB,GAAcS,CAAY,GACnEC,CACF;CACD,CAAA;AAEL;AAEA,EAAa,cAAc"}

package/dist/components/button/Toolbar.cjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.cjs","names":["useRovingTabIndex","useMergedRefs","useCheckedValues","useToolbarCheckableRegistry","React","ToolbarContext","composeEventHandlers","cn","ToolbarButton","ToolbarToggleButton","ToolbarRadioGroup","ToolbarRadioButton","ToolbarGroup","ToolbarDivider","require_runtime","require_cn","require_composeEventHandlers","require_useRovingTabIndex","require_useMergedRefs","require_useCheckedValues","require_Toolbar_context","require_Toolbar_parts","react","react_jsx_runtime","TOOLBAR_ITEM_SELECTOR","toolbarPaddingClasses","ToolbarRoot","ariaOrientation","rest","props","mergedRef","containerProps","ref","checked","checkedValues","defaultCheckedValues","onCheckedValuesChange","registerCheckable","context","orientation","size","Component","as","role","onKeyDown","onFocus","className","Toolbar"],"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":"0aA2FA,IAAMwB,EACJ,uEAGIC,EAA8C,CAClD,cAAe,QACf,MAAO,QACP,OAAQ,MACR,MAAO,QACP,cAAe,KACjB,EAGMC,EAA6D,GAAU,CAC3E,GAAM,CACJ,KACA,cAAc,aACd,OAAO,SACP,gBACA,uBACA,wBACA,YACA,MACA,YACA,UACA,OACA,mBAAoBC,EACpB,GAAGC,GACDC,EAEE,CAAE,kBAAmB7B,EAAAA,kBAAkB,CAC3C,aAAcwB,EACd,eAAgB,GAChB,QAAS,eACT,aACF,CAAC,EACKM,EAAY7B,EAAAA,cAA2B8B,EAAe,IAAKC,CAAG,EAE9DC,EAAU/B,EAAAA,iBAAiBgC,EAAeC,EAAsBC,CAAqB,EACrFC,EAAoBlC,EAAAA,4BAA4B,EAChDmC,EAAUlC,EAAM,aACb,CAAE,cAAa,OAAM,UAAS,mBAAkB,GACvD,CAACmC,EAAaC,EAAMP,EAASI,CAAiB,CAChD,EAEMI,EAA+BC,GAAM,MAG3C,OACE,EAAAnB,EAAA,IAAA,CAAClB,EAAAA,eAAe,SAAhB,CAAyB,MAAOiC,EAC9B,UAAA,EAAAf,EAAA,IAAA,CAACkB,EAAD,CACE,YAAWD,EACX,mBAAkBD,EAClB,GAAIX,EACJ,KAAMe,GAAQ,UACd,mBAAkBhB,GAAmBY,EACrC,IAAKT,EACL,wBAAsB,GACtB,UAAWxB,EAAAA,qBAAqBsC,EAAWb,EAAe,SAAS,EACnE,QAASzB,EAAAA,qBAAqBuC,EAASd,EAAe,QAAS,CAC7D,sBAAuB,EACzB,CAAC,EACD,UAAWxB,EAAAA,GACT,8DACAkB,EAAsBe,GACtBD,IAAgB,YAAc,yBAC9BO,CACF,CACD,CAAA,CACsB,CAAA,CAE7B,EACA,EAAY,YAAc,UAmD1B,IAAaC,EAA0B,OAAO,OAAOrB,EAAa,CAChE,OAAQlB,EAAAA,cACR,aAAcC,EAAAA,oBACd,WAAYC,EAAAA,kBACZ,YAAaC,EAAAA,mBACb,MAAOC,EAAAA,aACP,QAASC,EAAAA,cACX,CAAC"}
+{"version":3,"file":"Toolbar.cjs","names":["useRovingTabIndex","useMergedRefs","useCheckedValues","useToolbarCheckableRegistry","React","ToolbarContext","composeEventHandlers","cn","toolbarClassNames","ToolbarButton","ToolbarToggleButton","ToolbarRadioGroup","ToolbarRadioButton","ToolbarGroup","ToolbarDivider","require_runtime","require_cn","require_composeEventHandlers","require_classNames","require_useRovingTabIndex","require_useMergedRefs","require_useCheckedValues","require_Toolbar_context","require_Toolbar_parts","react","react_jsx_runtime","TOOLBAR_ITEM_SELECTOR","toolbarPaddingClasses","ToolbarRoot","ariaOrientation","rest","props","mergedRef","containerProps","ref","checked","checkedValues","defaultCheckedValues","onCheckedValuesChange","registerCheckable","context","orientation","size","Component","as","role","onKeyDown","onFocus","className","Toolbar"],"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":"gdA4FA,IAAM0B,EACJ,uEAGIC,EAA8C,CAClD,cAAe,QACf,MAAO,QACP,OAAQ,MACR,MAAO,QACP,cAAe,KACjB,EAGMC,EAA6D,GAAU,CAC3E,GAAM,CACJ,KACA,cAAc,aACd,OAAO,SACP,gBACA,uBACA,wBACA,YACA,MACA,YACA,UACA,OACA,mBAAoBC,EACpB,GAAGC,GACDC,EAEE,CAAE,kBAAmB/B,EAAAA,kBAAkB,CAC3C,aAAc0B,EACd,eAAgB,GAChB,QAAS,eACT,aACF,CAAC,EACKM,EAAY/B,EAAAA,cAA2BgC,EAAe,IAAKC,CAAG,EAE9DC,EAAUjC,EAAAA,iBAAiBkC,EAAeC,EAAsBC,CAAqB,EACrFC,EAAoBpC,EAAAA,4BAA4B,EAChDqC,EAAUpC,EAAM,aACb,CAAE,cAAa,OAAM,UAAS,mBAAkB,GACvD,CAACqC,EAAaC,EAAMP,EAASI,CAAiB,CAChD,EAEMI,EAA+BC,GAAM,MAG3C,OACE,EAAAnB,EAAA,IAAA,CAACpB,EAAAA,eAAe,SAAhB,CAAyB,MAAOmC,EAC9B,UAAA,EAAAf,EAAA,IAAA,CAACkB,EAAD,CACE,YAAWD,EACX,mBAAkBD,EAClB,GAAIX,EACJ,KAAMe,GAAQ,UACd,mBAAkBhB,GAAmBY,EACrC,IAAKT,EACL,wBAAsB,GACtB,UAAW1B,EAAAA,qBAAqBwC,EAAWb,EAAe,SAAS,EACnE,QAAS3B,EAAAA,qBAAqByC,EAASd,EAAe,QAAS,CAC7D,sBAAuB,EACzB,CAAC,EACD,UAAW1B,EAAAA,GACTC,EAAAA,kBAAkB,KAClB,8DACAmB,EAAsBe,GACtBD,IAAgB,YAAc,yBAC9BO,CACF,CACD,CAAA,CACsB,CAAA,CAE7B,EACA,EAAY,YAAc,UAmD1B,IAAaC,EAA0B,OAAO,OAAOrB,EAAa,CAChE,OAAQnB,EAAAA,cACR,aAAcC,EAAAA,oBACd,WAAYC,EAAAA,kBACZ,YAAaC,EAAAA,mBACb,MAAOC,EAAAA,aACP,QAASC,EAAAA,cACX,CAAC"}