@mortenbrudvik/waveui 0.7.0 → 0.9.0

package/dist/components/button/Button.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/slot.cjs"),i=require("./Button.semantics.cjs"),a=require("./buttonStyles.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c=e=>{let{as:c,appearance:l=`outline`,size:u=`medium`,icon:d,iconPosition:f=`before`,disabled:p=!1,disabledFocusable:m=!1,className:h,children:g,ref:_,onClick:v,onKeyDown:y,onKeyUp:b,onBlur:x,...S}=e,C=c??`button`,w=typeof C==`string`?C:null,T=w!==null&&r.VOID_ELEMENTS.has(w),{defaults:E,enforced:D,handlers:O}=i.useButtonSemantics({tag:w,href:S.href,disabled:p,disabledFocusable:m,onClick:v,onKeyDown:y,onKeyUp:b,onBlur:x}),k=S[`aria-disabled`],A=r.renderSlot(r.slotRendersContent(d)?d:void 0,`span`,`inline-flex shrink-0 items-center`,{"aria-hidden":!0}),j=A!==null,M=r.materialiseSlotContent(g),N=r.slotRendersContent(M),P=j&&!N,F=S[`aria-label`],I=S[`aria-labelledby`],L=S.title;o.useEffect(()=>{P&&!F&&!I&&!L&&n.warnOnce(`Button:icon-only-name`,"Button: an icon-only button has no accessible name. Pass `aria-label`, `aria-labelledby` or `title` (the icon is decorative and hidden from assistive technology).")},[P,F,I,L]);let R={...S};for(let[e,t]of Object.entries(E))R[e]??=t;let z=p||m||k===!0||k===`true`,B=M;return T?B=void 0:A&&(B=f===`after`?(0,s.jsxs)(s.Fragment,{children:[M,A]}):(0,s.jsxs)(s.Fragment,{children:[A,M]})),(0,s.jsx)(C,{...R,...O,ref:_,className:t.cn(a.buttonClassName({appearance:l,size:u,disabled:z,iconOnly:P}),j&&N&&`gap-1.5`,h),...D,children:B})};c.displayName=`Button`,exports.Button=c;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/slot.cjs"),i=require("../../lib/classNames.cjs"),a=require("./Button.semantics.cjs"),o=require("./buttonStyles.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("react/jsx-runtime");var l=e=>{let{as:l,appearance:u=`outline`,size:d=`medium`,icon:f,iconPosition:p=`before`,disabled:m=!1,disabledFocusable:h=!1,className:g,children:_,ref:v,onClick:y,onKeyDown:b,onKeyUp:x,onBlur:S,...C}=e,w=l??`button`,T=typeof w==`string`?w:null,E=T!==null&&r.VOID_ELEMENTS.has(T),{defaults:D,enforced:O,handlers:k}=a.useButtonSemantics({tag:T,href:C.href,disabled:m,disabledFocusable:h,onClick:y,onKeyDown:b,onKeyUp:x,onBlur:S}),A=C[`aria-disabled`],j=r.renderSlot(r.slotRendersContent(f)?f:void 0,`span`,t.cn(i.buttonClassNames.icon,`inline-flex shrink-0 items-center`),{"aria-hidden":!0}),M=j!==null,N=r.materialiseSlotContent(_),P=r.slotRendersContent(N),F=M&&!P,I=C[`aria-label`],L=C[`aria-labelledby`],R=C.title;s.useEffect(()=>{F&&!I&&!L&&!R&&n.warnOnce(`Button:icon-only-name`,"Button: an icon-only button has no accessible name. Pass `aria-label`, `aria-labelledby` or `title` (the icon is decorative and hidden from assistive technology).")},[F,I,L,R]);let z={...C};for(let[e,t]of Object.entries(D))z[e]??=t;let B=m||h||A===!0||A===`true`,V=N;return E?V=void 0:j&&(V=p===`after`?(0,c.jsxs)(c.Fragment,{children:[N,j]}):(0,c.jsxs)(c.Fragment,{children:[j,N]})),(0,c.jsx)(w,{...z,...k,ref:v,className:t.cn(i.buttonClassNames.root,o.buttonClassName({appearance:u,size:d,disabled:B,iconOnly:F}),M&&P&&`gap-1.5`,g),...O,children:V})};l.displayName=`Button`,exports.Button=l;
 //# sourceMappingURL=Button.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","names":["VOID_ELEMENTS","useButtonSemantics","renderSlot","slotRendersContent","materialiseSlotContent","_Fragment","cn","buttonClassName","require_runtime","require_cn","require_dev","require_slot","require_Button_semantics","require_buttonStyles","react","react_jsx_runtime","Button","rest","props","Component","as","tag","isVoid","ariaDisabled","iconElement","icon","hasIcon","label","children","hasLabel","iconOnly","ariaLabel","ariaLabelledBy","title","elementProps","key","value","defaults","showDisabledLook","disabled","disabledFocusable","content","iconPosition","handlers","className","enforced"],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { warnOnce } from '../../lib/dev';\nimport {\n  materialiseSlotContent,\n  renderSlot,\n  slotRendersContent,\n  VOID_ELEMENTS,\n} from '../../lib/slot';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport type { Size, Appearance, IconPosition, Slot } from '../../lib/types';\nimport { useButtonSemantics } from './Button.semantics';\nimport { buttonClassName } from './buttonStyles';\n\n/**\n * The Button's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).\n * Every other prop comes from the rendered element (`as`), so `as=\"a\"` accepts `href`/`target`\n * and types `onClick` for an anchor.\n */\nexport interface ButtonOwnProps {\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 button 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, e.g.\n   * an \"open in new window\" glyph). Follows the writing direction through DOM order. Has no effect\n   * on an icon-only button.\n   * @default 'before'\n   */\n  iconPosition?: IconPosition;\n  /**\n   * Disables the button. Only the intrinsic form controls (`button`, the default, and `input`,\n   * `select`, `textarea`) get the native `disabled` attribute. Every other `as` — `a`, `div`,\n   * `span` and **any custom component**, including router links and styled or motion components\n   * that render a native `<button>` — does not receive `disabled`: it gets `aria-disabled=\"true\"`\n   * and `tabIndex={-1}` instead (neither can be overridden), its clicks and Enter/Space are\n   * prevented (a click does not reach ancestor `onClick` handlers either, as with a native\n   * disabled button), and an `<a>` drops its `href` (it keeps `role=\"link\"` when it had one,\n   * `role=\"button\"` otherwise). Such an element leaves the tab order but, like any\n   * `tabIndex={-1}` element, can still take focus from a mouse click, and a component's own\n   * `:disabled` styling does not apply. Every disabled Button also renders `data-disabled`.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Marks the button unavailable but keeps it focusable and in the tab order: for toolbar items, a\n   * button that disables itself when activated, or a disabled button that needs a Tooltip. Renders\n   * `aria-disabled=\"true\"`, `data-disabled` and `data-disabled-focusable` instead of the native\n   * `disabled` attribute. Clicks, Enter, Space and implicit form submission are prevented; your\n   * `onClick` is not called and the click does not reach ancestor click handlers. Hover and pressed\n   * colors are off. 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\n/**\n * Props of {@link Button} rendered as `C` (default `'button'`). `ButtonProps` without a type\n * argument is the 0.4 name: the props of a Button rendered as a `<button>`, including `ref`.\n *\n * @example\n * interface SaveButtonProps extends ButtonProps { tracking?: string }\n * const props: ButtonProps<'a'> = { as: 'a', href: '/docs', appearance: 'primary' };\n */\nexport type ButtonProps<C extends React.ElementType = 'button'> = PolymorphicProps<\n  C,\n  ButtonOwnProps\n>;\n\n/** The props the implementation reads, for any `as` (the public typing is `PolymorphicComponent`). */\ntype ButtonImplProps = ButtonOwnProps &\n  Omit<React.HTMLAttributes<HTMLElement>, 'onClick' | 'onKeyDown' | 'onKeyUp'> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n    /** An anchor's destination (`as=\"a\"`): without one, the anchor gets button semantics. */\n    href?: string;\n    onClick?: React.MouseEventHandler<HTMLElement>;\n    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;\n    onKeyUp?: React.KeyboardEventHandler<HTMLElement>;\n  };\n\n/**\n * A button with Fluent appearances and sizes.\n *\n * - Renders a `<button type=\"button\">` by default (pass `type=\"submit\"` to submit a form).\n * - `as` renders another element or component with correctly typed props\n *   (`<Button as=\"a\" href=\"/docs\">`, `<Button as={RouterLink} to=\"/\">`).\n * - Non-button elements keep button semantics: an element that is not interactive by itself\n *   (`as=\"div\"`, `as=\"span\"`) and an `as=\"a\"` without `href` get `role=\"button\"`, a tab stop and\n *   Enter/Space activation (an `<a>` with any `href`, `''` included, stays a link), and\n *   `disabled` becomes `aria-disabled` + `tabIndex={-1}` with clicks and keys prevented.\n * - A custom `as` component receives neither the `type=\"button\"` default nor `disabled` (see\n *   `disabled`), even when it renders a native `<button>`: pass `type` yourself inside a form.\n * - The `icon` slot is decorative (`aria-hidden`); give icon-only buttons an `aria-label`.\n * - `disabledFocusable` keeps an unavailable button focusable (a Tooltip can explain why, a\n *   toolbar keeps it in its arrow-key order) and blocks its activation.\n * - A consumer `aria-disabled=\"true\"` shows the disabled look and suppresses hover and pressed\n *   colors, but the button stays focusable and its handlers still run: guard them yourself, or use\n *   `disabledFocusable`, which does both.\n * - Colors are theme tokens; hover and pressed styles never apply while disabled.\n * - Hover and pressed colors are gated (`not-disabled:not-aria-disabled:hover:`), which gives\n *   them a higher CSS specificity than a bare `hover:` class. To override them in `className`,\n *   use the same prefix (`not-disabled:not-aria-disabled:hover:bg-error`, which replaces the\n *   built-in class) or the important modifier (`hover:bg-error!`).\n *\n * @example\n * <Button appearance=\"primary\" icon={<SaveIcon />}>Save</Button>\n * <Button as=\"a\" href=\"/docs\">Documentation</Button>\n * <Button icon={<CloseIcon />} aria-label=\"Close\" appearance=\"subtle\" />\n */\nexport const Button: PolymorphicComponent<'button', ButtonOwnProps> = (props) => {\n  const {\n    as,\n    appearance = 'outline',\n    size = 'medium',\n    icon,\n    iconPosition = 'before',\n    disabled = false,\n    disabledFocusable = false,\n    className,\n    children,\n    ref,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onBlur,\n    ...rest\n  } = props as ButtonImplProps;\n\n  const Component: React.ElementType = as ?? 'button';\n  const tag = typeof Component === 'string' ? Component : null;\n  const isVoid = tag !== null && VOID_ELEMENTS.has(tag);\n  // Defaults, enforced attributes and handlers per tag and disabled state (shared with Link).\n  const { defaults, enforced, handlers } = useButtonSemantics({\n    tag,\n    href: rest.href,\n    disabled,\n    disabledFocusable,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onBlur,\n  });\n  const ariaDisabled = rest['aria-disabled'];\n  /**\n   * An `icon` that renders nothing (`''` from `icon={name && <Icon />}`, an empty array, Set or\n   * Fragment) is treated like no icon: no empty `aria-hidden` span, no gap, no icon-only sizing.\n   */\n  const iconElement = renderSlot(\n    slotRendersContent(icon) ? icon : undefined,\n    'span',\n    'inline-flex shrink-0 items-center',\n    { 'aria-hidden': true },\n  );\n  /** Derived from what renders, so an icon that renders nothing never counts. */\n  const hasIcon = iconElement !== null;\n  // A generator label is read once by the check; its items are what renders.\n  const label = materialiseSlotContent(children);\n  const hasLabel = slotRendersContent(label);\n  const iconOnly = hasIcon && !hasLabel;\n\n  const ariaLabel = rest['aria-label'];\n  const ariaLabelledBy = rest['aria-labelledby'];\n  const title = rest.title;\n  React.useEffect(() => {\n    if (iconOnly && !ariaLabel && !ariaLabelledBy && !title) {\n      warnOnce(\n        'Button:icon-only-name',\n        'Button: an icon-only button has no accessible name. Pass `aria-label`, `aria-labelledby` or `title` (the icon is decorative and hidden from assistive technology).',\n      );\n    }\n  }, [iconOnly, ariaLabel, ariaLabelledBy, title]);\n\n  // Defaults apply wherever the consumer's value is `undefined` or `null` (C-COMPOSE), so a wrapper\n  // that forwards `type={type}` never drops `type=\"button\"`, the role or the tab stop.\n  const elementProps: Record<string, unknown> = { ...rest };\n  for (const [key, value] of Object.entries(defaults)) elementProps[key] ??= value;\n\n  const showDisabledLook =\n    disabled || disabledFocusable || ariaDisabled === true || ariaDisabled === 'true';\n  let content: React.ReactNode = label;\n  if (isVoid) content = undefined;\n  else if (iconElement) {\n    // DOM order, so the icon follows the writing direction (no physical classes).\n    content =\n      iconPosition === 'after' ? (\n        <>\n          {label}\n          {iconElement}\n        </>\n      ) : (\n        <>\n          {iconElement}\n          {label}\n        </>\n      );\n  }\n\n  return (\n    <Component\n      {...elementProps}\n      {...handlers}\n      ref={ref}\n      className={cn(\n        buttonClassName({ appearance, size, disabled: showDisabledLook, iconOnly }),\n        hasIcon && hasLabel && 'gap-1.5',\n        className,\n      )}\n      {...enforced}\n    >\n      {content}\n    </Component>\n  );\n};\n\nButton.displayName = 'Button';\n"],"mappings":"iTA0HA,IAAagB,EAA0D,GAAU,CAC/E,GAAM,CACJ,KACA,aAAa,UACb,OAAO,SACP,OACA,eAAe,SACf,WAAW,GACX,oBAAoB,GACpB,YACA,WACA,MACA,UACA,YACA,UACA,SACA,GAAGC,GACDC,EAEEC,EAA+BC,GAAM,SACrCC,EAAM,OAAOF,GAAc,SAAWA,EAAY,KAClDG,EAASD,IAAQ,MAAQrB,EAAAA,cAAc,IAAIqB,CAAG,EAE9C,CAAE,WAAU,WAAU,YAAapB,EAAAA,mBAAmB,CAC1D,MACA,KAAMgB,EAAK,KACX,WACA,oBACA,UACA,YACA,UACA,QACF,CAAC,EACKM,EAAeN,EAAK,iBAKpBO,EAActB,EAAAA,WAClBC,EAAAA,mBAAmBsB,CAAI,EAAIA,EAAO,IAAA,GAClC,OACA,oCACA,CAAE,cAAe,EAAK,CACxB,EAEMC,EAAUF,IAAgB,KAE1BG,EAAQvB,EAAAA,uBAAuBwB,CAAQ,EACvCC,EAAW1B,EAAAA,mBAAmBwB,CAAK,EACnCG,EAAWJ,GAAW,CAACG,EAEvBE,EAAYd,EAAK,cACjBe,EAAiBf,EAAK,mBACtBgB,EAAQhB,EAAK,MACnBH,EAAM,cAAgB,CAChBgB,GAAY,CAACC,GAAa,CAACC,GAAkB,CAACC,GAChDvB,EAAA,SACE,wBACA,oKACF,CAEJ,EAAG,CAACoB,EAAUC,EAAWC,EAAgBC,CAAK,CAAC,EAI/C,IAAMC,EAAwC,CAAE,GAAGjB,CAAK,EACxD,IAAK,GAAM,CAACkB,EAAKC,KAAU,OAAO,QAAQC,CAAQ,EAAG,EAAaF,KAASC,EAE3E,IAAME,EACJC,GAAYC,GAAqBjB,IAAiB,IAAQA,IAAiB,OACzEkB,EAA2Bd,EAkB/B,OAjBIL,EAAQ,EAAU,IAAA,GACbE,IAEP,EACEkB,IAAiB,SACf,EAAA3B,EAAA,KAAA,CAAAV,EAAAA,SAAA,CAAA,SAAA,CACGsB,EACAH,CACD,CAAA,CAAA,GAEF,EAAAT,EAAA,KAAA,CAAAV,EAAAA,SAAA,CAAA,SAAA,CACGmB,EACAG,CACD,CAAA,CAAA,IAKN,EAAAZ,EAAA,IAAA,CAACI,EAAD,CACE,GAAIe,EACJ,GAAIS,EACC,MACL,UAAWrC,EAAAA,GACTC,EAAAA,gBAAgB,CAAE,aAAY,OAAM,SAAU+B,EAAkB,UAAS,CAAC,EAC1EZ,GAAWG,GAAY,UACvBe,CACF,EACA,GAAIC,EAEH,SAAAJ,CACQ,CAAA,CAEf,EAEA,EAAO,YAAc"}
+{"version":3,"file":"Button.cjs","names":["VOID_ELEMENTS","useButtonSemantics","renderSlot","slotRendersContent","cn","buttonClassNames","materialiseSlotContent","_Fragment","buttonClassName","require_runtime","require_cn","require_dev","require_slot","require_classNames","require_Button_semantics","require_buttonStyles","react","react_jsx_runtime","Button","rest","props","Component","as","tag","isVoid","ariaDisabled","iconElement","icon","hasIcon","label","children","hasLabel","iconOnly","ariaLabel","ariaLabelledBy","title","elementProps","key","value","defaults","showDisabledLook","disabled","disabledFocusable","content","iconPosition","handlers","className","enforced"],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { buttonClassNames } from '../../lib/classNames';\nimport { warnOnce } from '../../lib/dev';\nimport {\n  materialiseSlotContent,\n  renderSlot,\n  slotRendersContent,\n  VOID_ELEMENTS,\n} from '../../lib/slot';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport type { Size, Appearance, IconPosition, Slot } from '../../lib/types';\nimport { useButtonSemantics } from './Button.semantics';\nimport { buttonClassName } from './buttonStyles';\n\n/**\n * The Button's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).\n * Every other prop comes from the rendered element (`as`), so `as=\"a\"` accepts `href`/`target`\n * and types `onClick` for an anchor.\n */\nexport interface ButtonOwnProps {\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 button 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, e.g.\n   * an \"open in new window\" glyph). Follows the writing direction through DOM order. Has no effect\n   * on an icon-only button.\n   * @default 'before'\n   */\n  iconPosition?: IconPosition;\n  /**\n   * Disables the button. Only the intrinsic form controls (`button`, the default, and `input`,\n   * `select`, `textarea`) get the native `disabled` attribute. Every other `as` — `a`, `div`,\n   * `span` and **any custom component**, including router links and styled or motion components\n   * that render a native `<button>` — does not receive `disabled`: it gets `aria-disabled=\"true\"`\n   * and `tabIndex={-1}` instead (neither can be overridden), its clicks and Enter/Space are\n   * prevented (a click does not reach ancestor `onClick` handlers either, as with a native\n   * disabled button), and an `<a>` drops its `href` (it keeps `role=\"link\"` when it had one,\n   * `role=\"button\"` otherwise). Such an element leaves the tab order but, like any\n   * `tabIndex={-1}` element, can still take focus from a mouse click, and a component's own\n   * `:disabled` styling does not apply. Every disabled Button also renders `data-disabled`.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Marks the button unavailable but keeps it focusable and in the tab order: for toolbar items, a\n   * button that disables itself when activated, or a disabled button that needs a Tooltip. Renders\n   * `aria-disabled=\"true\"`, `data-disabled` and `data-disabled-focusable` instead of the native\n   * `disabled` attribute. Clicks, Enter, Space and implicit form submission are prevented; your\n   * `onClick` is not called and the click does not reach ancestor click handlers. Hover and pressed\n   * colors are off. 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\n/**\n * Props of {@link Button} rendered as `C` (default `'button'`). `ButtonProps` without a type\n * argument is the 0.4 name: the props of a Button rendered as a `<button>`, including `ref`.\n *\n * @example\n * interface SaveButtonProps extends ButtonProps { tracking?: string }\n * const props: ButtonProps<'a'> = { as: 'a', href: '/docs', appearance: 'primary' };\n */\nexport type ButtonProps<C extends React.ElementType = 'button'> = PolymorphicProps<\n  C,\n  ButtonOwnProps\n>;\n\n/** The props the implementation reads, for any `as` (the public typing is `PolymorphicComponent`). */\ntype ButtonImplProps = ButtonOwnProps &\n  Omit<React.HTMLAttributes<HTMLElement>, 'onClick' | 'onKeyDown' | 'onKeyUp'> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n    /** An anchor's destination (`as=\"a\"`): without one, the anchor gets button semantics. */\n    href?: string;\n    onClick?: React.MouseEventHandler<HTMLElement>;\n    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;\n    onKeyUp?: React.KeyboardEventHandler<HTMLElement>;\n  };\n\n/**\n * A button with Fluent appearances and sizes.\n *\n * - Renders a `<button type=\"button\">` by default (pass `type=\"submit\"` to submit a form).\n * - `as` renders another element or component with correctly typed props\n *   (`<Button as=\"a\" href=\"/docs\">`, `<Button as={RouterLink} to=\"/\">`).\n * - Non-button elements keep button semantics: an element that is not interactive by itself\n *   (`as=\"div\"`, `as=\"span\"`) and an `as=\"a\"` without `href` get `role=\"button\"`, a tab stop and\n *   Enter/Space activation (an `<a>` with any `href`, `''` included, stays a link), and\n *   `disabled` becomes `aria-disabled` + `tabIndex={-1}` with clicks and keys prevented.\n * - A custom `as` component receives neither the `type=\"button\"` default nor `disabled` (see\n *   `disabled`), even when it renders a native `<button>`: pass `type` yourself inside a form.\n * - The `icon` slot is decorative (`aria-hidden`); give icon-only buttons an `aria-label`.\n * - `disabledFocusable` keeps an unavailable button focusable (a Tooltip can explain why, a\n *   toolbar keeps it in its arrow-key order) and blocks its activation.\n * - A consumer `aria-disabled=\"true\"` shows the disabled look and suppresses hover and pressed\n *   colors, but the button stays focusable and its handlers still run: guard them yourself, or use\n *   `disabledFocusable`, which does both.\n * - Colors are theme tokens; hover and pressed styles never apply while disabled.\n * - Hover and pressed colors are gated (`not-disabled:not-aria-disabled:hover:`), which gives\n *   them a higher CSS specificity than a bare `hover:` class. To override them in `className`,\n *   use the same prefix (`not-disabled:not-aria-disabled:hover:bg-error`, which replaces the\n *   built-in class) or the important modifier (`hover:bg-error!`).\n *\n * @example\n * <Button appearance=\"primary\" icon={<SaveIcon />}>Save</Button>\n * <Button as=\"a\" href=\"/docs\">Documentation</Button>\n * <Button icon={<CloseIcon />} aria-label=\"Close\" appearance=\"subtle\" />\n */\nexport const Button: PolymorphicComponent<'button', ButtonOwnProps> = (props) => {\n  const {\n    as,\n    appearance = 'outline',\n    size = 'medium',\n    icon,\n    iconPosition = 'before',\n    disabled = false,\n    disabledFocusable = false,\n    className,\n    children,\n    ref,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onBlur,\n    ...rest\n  } = props as ButtonImplProps;\n\n  const Component: React.ElementType = as ?? 'button';\n  const tag = typeof Component === 'string' ? Component : null;\n  const isVoid = tag !== null && VOID_ELEMENTS.has(tag);\n  // Defaults, enforced attributes and handlers per tag and disabled state (shared with Link).\n  const { defaults, enforced, handlers } = useButtonSemantics({\n    tag,\n    href: rest.href,\n    disabled,\n    disabledFocusable,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onBlur,\n  });\n  const ariaDisabled = rest['aria-disabled'];\n  /**\n   * An `icon` that renders nothing (`''` from `icon={name && <Icon />}`, an empty array, Set or\n   * Fragment) is treated like no icon: no empty `aria-hidden` span, no gap, no icon-only sizing.\n   */\n  const iconElement = renderSlot(\n    slotRendersContent(icon) ? icon : undefined,\n    'span',\n    cn(buttonClassNames.icon, 'inline-flex shrink-0 items-center'),\n    { 'aria-hidden': true },\n  );\n  /** Derived from what renders, so an icon that renders nothing never counts. */\n  const hasIcon = iconElement !== null;\n  // A generator label is read once by the check; its items are what renders.\n  const label = materialiseSlotContent(children);\n  const hasLabel = slotRendersContent(label);\n  const iconOnly = hasIcon && !hasLabel;\n\n  const ariaLabel = rest['aria-label'];\n  const ariaLabelledBy = rest['aria-labelledby'];\n  const title = rest.title;\n  React.useEffect(() => {\n    if (iconOnly && !ariaLabel && !ariaLabelledBy && !title) {\n      warnOnce(\n        'Button:icon-only-name',\n        'Button: an icon-only button has no accessible name. Pass `aria-label`, `aria-labelledby` or `title` (the icon is decorative and hidden from assistive technology).',\n      );\n    }\n  }, [iconOnly, ariaLabel, ariaLabelledBy, title]);\n\n  // Defaults apply wherever the consumer's value is `undefined` or `null` (C-COMPOSE), so a wrapper\n  // that forwards `type={type}` never drops `type=\"button\"`, the role or the tab stop.\n  const elementProps: Record<string, unknown> = { ...rest };\n  for (const [key, value] of Object.entries(defaults)) elementProps[key] ??= value;\n\n  const showDisabledLook =\n    disabled || disabledFocusable || ariaDisabled === true || ariaDisabled === 'true';\n  let content: React.ReactNode = label;\n  if (isVoid) content = undefined;\n  else if (iconElement) {\n    // DOM order, so the icon follows the writing direction (no physical classes).\n    content =\n      iconPosition === 'after' ? (\n        <>\n          {label}\n          {iconElement}\n        </>\n      ) : (\n        <>\n          {iconElement}\n          {label}\n        </>\n      );\n  }\n\n  return (\n    <Component\n      {...elementProps}\n      {...handlers}\n      ref={ref}\n      className={cn(\n        buttonClassNames.root,\n        buttonClassName({ appearance, size, disabled: showDisabledLook, iconOnly }),\n        hasIcon && hasLabel && 'gap-1.5',\n        className,\n      )}\n      {...enforced}\n    >\n      {content}\n    </Component>\n  );\n};\n\nButton.displayName = 'Button';\n"],"mappings":"uVA2HA,IAAakB,EAA0D,GAAU,CAC/E,GAAM,CACJ,KACA,aAAa,UACb,OAAO,SACP,OACA,eAAe,SACf,WAAW,GACX,oBAAoB,GACpB,YACA,WACA,MACA,UACA,YACA,UACA,SACA,GAAGC,GACDC,EAEEC,EAA+BC,GAAM,SACrCC,EAAM,OAAOF,GAAc,SAAWA,EAAY,KAClDG,EAASD,IAAQ,MAAQvB,EAAAA,cAAc,IAAIuB,CAAG,EAE9C,CAAE,WAAU,WAAU,YAAatB,EAAAA,mBAAmB,CAC1D,MACA,KAAMkB,EAAK,KACX,WACA,oBACA,UACA,YACA,UACA,QACF,CAAC,EACKM,EAAeN,EAAK,iBAKpBO,EAAcxB,EAAAA,WAClBC,EAAAA,mBAAmBwB,CAAI,EAAIA,EAAO,IAAA,GAClC,OACAvB,EAAAA,GAAGC,EAAAA,iBAAiB,KAAM,mCAAmC,EAC7D,CAAE,cAAe,EAAK,CACxB,EAEMuB,EAAUF,IAAgB,KAE1BG,EAAQvB,EAAAA,uBAAuBwB,CAAQ,EACvCC,EAAW5B,EAAAA,mBAAmB0B,CAAK,EACnCG,EAAWJ,GAAW,CAACG,EAEvBE,EAAYd,EAAK,cACjBe,EAAiBf,EAAK,mBACtBgB,EAAQhB,EAAK,MACnBH,EAAM,cAAgB,CAChBgB,GAAY,CAACC,GAAa,CAACC,GAAkB,CAACC,GAChDxB,EAAA,SACE,wBACA,oKACF,CAEJ,EAAG,CAACqB,EAAUC,EAAWC,EAAgBC,CAAK,CAAC,EAI/C,IAAMC,EAAwC,CAAE,GAAGjB,CAAK,EACxD,IAAK,GAAM,CAACkB,EAAKC,KAAU,OAAO,QAAQC,CAAQ,EAAG,EAAaF,KAASC,EAE3E,IAAME,EACJC,GAAYC,GAAqBjB,IAAiB,IAAQA,IAAiB,OACzEkB,EAA2Bd,EAkB/B,OAjBIL,EAAQ,EAAU,IAAA,GACbE,IAEP,EACEkB,IAAiB,SACf,EAAA3B,EAAA,KAAA,CAAAV,EAAAA,SAAA,CAAA,SAAA,CACGsB,EACAH,CACD,CAAA,CAAA,GAEF,EAAAT,EAAA,KAAA,CAAAV,EAAAA,SAAA,CAAA,SAAA,CACGmB,EACAG,CACD,CAAA,CAAA,IAKN,EAAAZ,EAAA,IAAA,CAACI,EAAD,CACE,GAAIe,EACJ,GAAIS,EACC,MACL,UAAWzC,EAAAA,GACTC,EAAAA,iBAAiB,KACjBG,EAAAA,gBAAgB,CAAE,aAAY,OAAM,SAAUgC,EAAkB,UAAS,CAAC,EAC1EZ,GAAWG,GAAY,UACvBe,CACF,EACA,GAAIC,EAEH,SAAAJ,CACQ,CAAA,CAEf,EAEA,EAAO,YAAc"}

package/dist/components/button/Button.mjs

@@ -2,49 +2,50 @@
 import { cn as e } from "../../lib/cn.mjs";
 import { warnOnce as t } from "../../lib/dev.mjs";
 import { VOID_ELEMENTS as n, materialiseSlotContent as r, renderSlot as i, slotRendersContent as a } from "../../lib/slot.mjs";
-import { useButtonSemantics as o } from "./Button.semantics.mjs";
-import { buttonClassName as s } from "./buttonStyles.mjs";
-import * as c from "react";
-import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { buttonClassNames as o } from "../../lib/classNames.mjs";
+import { useButtonSemantics as s } from "./Button.semantics.mjs";
+import { buttonClassName as c } from "./buttonStyles.mjs";
+import * as l from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/button/Button.tsx
-var f = (f) => {
-	let { as: p, appearance: m = "outline", size: h = "medium", icon: g, iconPosition: _ = "before", disabled: v = !1, disabledFocusable: y = !1, className: b, children: x, ref: S, onClick: C, onKeyDown: w, onKeyUp: T, onBlur: E, ...D } = f, O = p ?? "button", k = typeof O == "string" ? O : null, A = k !== null && n.has(k), { defaults: j, enforced: M, handlers: N } = o({
-		tag: k,
-		href: D.href,
-		disabled: v,
-		disabledFocusable: y,
-		onClick: C,
-		onKeyDown: w,
-		onKeyUp: T,
-		onBlur: E
-	}), P = D["aria-disabled"], F = i(a(g) ? g : void 0, "span", "inline-flex shrink-0 items-center", { "aria-hidden": !0 }), I = F !== null, L = r(x), R = a(L), z = I && !R, B = D["aria-label"], V = D["aria-labelledby"], H = D.title;
-	c.useEffect(() => {
-		z && !B && !V && !H && t("Button:icon-only-name", "Button: an icon-only button has no accessible name. Pass `aria-label`, `aria-labelledby` or `title` (the icon is decorative and hidden from assistive technology).");
+var p = (p) => {
+	let { as: m, appearance: h = "outline", size: g = "medium", icon: _, iconPosition: v = "before", disabled: y = !1, disabledFocusable: b = !1, className: x, children: S, ref: C, onClick: w, onKeyDown: T, onKeyUp: E, onBlur: D, ...O } = p, k = m ?? "button", A = typeof k == "string" ? k : null, j = A !== null && n.has(A), { defaults: M, enforced: N, handlers: P } = s({
+		tag: A,
+		href: O.href,
+		disabled: y,
+		disabledFocusable: b,
+		onClick: w,
+		onKeyDown: T,
+		onKeyUp: E,
+		onBlur: D
+	}), F = O["aria-disabled"], I = i(a(_) ? _ : void 0, "span", e(o.icon, "inline-flex shrink-0 items-center"), { "aria-hidden": !0 }), L = I !== null, R = r(S), z = a(R), B = L && !z, V = O["aria-label"], H = O["aria-labelledby"], U = O.title;
+	l.useEffect(() => {
+		B && !V && !H && !U && t("Button:icon-only-name", "Button: an icon-only button has no accessible name. Pass `aria-label`, `aria-labelledby` or `title` (the icon is decorative and hidden from assistive technology).");
 	}, [
-		z,
 		B,
 		V,
-		H
+		H,
+		U
 	]);
-	let U = { ...D };
-	for (let [e, t] of Object.entries(j)) U[e] ??= t;
-	let W = v || y || P === !0 || P === "true", G = L;
-	return A ? G = void 0 : F && (G = _ === "after" ? /* @__PURE__ */ d(l, { children: [L, F] }) : /* @__PURE__ */ d(l, { children: [F, L] })), /* @__PURE__ */ u(O, {
-		...U,
+	let W = { ...O };
+	for (let [e, t] of Object.entries(M)) W[e] ??= t;
+	let G = y || b || F === !0 || F === "true", K = R;
+	return j ? K = void 0 : I && (K = v === "after" ? /* @__PURE__ */ f(u, { children: [R, I] }) : /* @__PURE__ */ f(u, { children: [I, R] })), /* @__PURE__ */ d(k, {
+		...W,
+		...P,
+		ref: C,
+		className: e(o.root, c({
+			appearance: h,
+			size: g,
+			disabled: G,
+			iconOnly: B
+		}), L && z && "gap-1.5", x),
 		...N,
-		ref: S,
-		className: e(s({
-			appearance: m,
-			size: h,
-			disabled: W,
-			iconOnly: z
-		}), I && R && "gap-1.5", b),
-		...M,
-		children: G
+		children: K
 	});
 };
-f.displayName = "Button";
+p.displayName = "Button";
 //#endregion
-export { f as Button };
+export { p as Button };
 
 //# sourceMappingURL=Button.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","names":["_Fragment","React","Button","rest","props","Component","as","tag","isVoid","VOID_ELEMENTS","useButtonSemantics","ariaDisabled","iconElement","renderSlot","slotRendersContent","icon","hasIcon","label","materialiseSlotContent","children","hasLabel","iconOnly","ariaLabel","ariaLabelledBy","title","warnOnce","elementProps","key","value","defaults","showDisabledLook","disabled","disabledFocusable","content","iconPosition","Fragment","handlers","cn","buttonClassName","className","enforced"],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { warnOnce } from '../../lib/dev';\nimport {\n  materialiseSlotContent,\n  renderSlot,\n  slotRendersContent,\n  VOID_ELEMENTS,\n} from '../../lib/slot';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport type { Size, Appearance, IconPosition, Slot } from '../../lib/types';\nimport { useButtonSemantics } from './Button.semantics';\nimport { buttonClassName } from './buttonStyles';\n\n/**\n * The Button's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).\n * Every other prop comes from the rendered element (`as`), so `as=\"a\"` accepts `href`/`target`\n * and types `onClick` for an anchor.\n */\nexport interface ButtonOwnProps {\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 button 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, e.g.\n   * an \"open in new window\" glyph). Follows the writing direction through DOM order. Has no effect\n   * on an icon-only button.\n   * @default 'before'\n   */\n  iconPosition?: IconPosition;\n  /**\n   * Disables the button. Only the intrinsic form controls (`button`, the default, and `input`,\n   * `select`, `textarea`) get the native `disabled` attribute. Every other `as` — `a`, `div`,\n   * `span` and **any custom component**, including router links and styled or motion components\n   * that render a native `<button>` — does not receive `disabled`: it gets `aria-disabled=\"true\"`\n   * and `tabIndex={-1}` instead (neither can be overridden), its clicks and Enter/Space are\n   * prevented (a click does not reach ancestor `onClick` handlers either, as with a native\n   * disabled button), and an `<a>` drops its `href` (it keeps `role=\"link\"` when it had one,\n   * `role=\"button\"` otherwise). Such an element leaves the tab order but, like any\n   * `tabIndex={-1}` element, can still take focus from a mouse click, and a component's own\n   * `:disabled` styling does not apply. Every disabled Button also renders `data-disabled`.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Marks the button unavailable but keeps it focusable and in the tab order: for toolbar items, a\n   * button that disables itself when activated, or a disabled button that needs a Tooltip. Renders\n   * `aria-disabled=\"true\"`, `data-disabled` and `data-disabled-focusable` instead of the native\n   * `disabled` attribute. Clicks, Enter, Space and implicit form submission are prevented; your\n   * `onClick` is not called and the click does not reach ancestor click handlers. Hover and pressed\n   * colors are off. 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\n/**\n * Props of {@link Button} rendered as `C` (default `'button'`). `ButtonProps` without a type\n * argument is the 0.4 name: the props of a Button rendered as a `<button>`, including `ref`.\n *\n * @example\n * interface SaveButtonProps extends ButtonProps { tracking?: string }\n * const props: ButtonProps<'a'> = { as: 'a', href: '/docs', appearance: 'primary' };\n */\nexport type ButtonProps<C extends React.ElementType = 'button'> = PolymorphicProps<\n  C,\n  ButtonOwnProps\n>;\n\n/** The props the implementation reads, for any `as` (the public typing is `PolymorphicComponent`). */\ntype ButtonImplProps = ButtonOwnProps &\n  Omit<React.HTMLAttributes<HTMLElement>, 'onClick' | 'onKeyDown' | 'onKeyUp'> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n    /** An anchor's destination (`as=\"a\"`): without one, the anchor gets button semantics. */\n    href?: string;\n    onClick?: React.MouseEventHandler<HTMLElement>;\n    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;\n    onKeyUp?: React.KeyboardEventHandler<HTMLElement>;\n  };\n\n/**\n * A button with Fluent appearances and sizes.\n *\n * - Renders a `<button type=\"button\">` by default (pass `type=\"submit\"` to submit a form).\n * - `as` renders another element or component with correctly typed props\n *   (`<Button as=\"a\" href=\"/docs\">`, `<Button as={RouterLink} to=\"/\">`).\n * - Non-button elements keep button semantics: an element that is not interactive by itself\n *   (`as=\"div\"`, `as=\"span\"`) and an `as=\"a\"` without `href` get `role=\"button\"`, a tab stop and\n *   Enter/Space activation (an `<a>` with any `href`, `''` included, stays a link), and\n *   `disabled` becomes `aria-disabled` + `tabIndex={-1}` with clicks and keys prevented.\n * - A custom `as` component receives neither the `type=\"button\"` default nor `disabled` (see\n *   `disabled`), even when it renders a native `<button>`: pass `type` yourself inside a form.\n * - The `icon` slot is decorative (`aria-hidden`); give icon-only buttons an `aria-label`.\n * - `disabledFocusable` keeps an unavailable button focusable (a Tooltip can explain why, a\n *   toolbar keeps it in its arrow-key order) and blocks its activation.\n * - A consumer `aria-disabled=\"true\"` shows the disabled look and suppresses hover and pressed\n *   colors, but the button stays focusable and its handlers still run: guard them yourself, or use\n *   `disabledFocusable`, which does both.\n * - Colors are theme tokens; hover and pressed styles never apply while disabled.\n * - Hover and pressed colors are gated (`not-disabled:not-aria-disabled:hover:`), which gives\n *   them a higher CSS specificity than a bare `hover:` class. To override them in `className`,\n *   use the same prefix (`not-disabled:not-aria-disabled:hover:bg-error`, which replaces the\n *   built-in class) or the important modifier (`hover:bg-error!`).\n *\n * @example\n * <Button appearance=\"primary\" icon={<SaveIcon />}>Save</Button>\n * <Button as=\"a\" href=\"/docs\">Documentation</Button>\n * <Button icon={<CloseIcon />} aria-label=\"Close\" appearance=\"subtle\" />\n */\nexport const Button: PolymorphicComponent<'button', ButtonOwnProps> = (props) => {\n  const {\n    as,\n    appearance = 'outline',\n    size = 'medium',\n    icon,\n    iconPosition = 'before',\n    disabled = false,\n    disabledFocusable = false,\n    className,\n    children,\n    ref,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onBlur,\n    ...rest\n  } = props as ButtonImplProps;\n\n  const Component: React.ElementType = as ?? 'button';\n  const tag = typeof Component === 'string' ? Component : null;\n  const isVoid = tag !== null && VOID_ELEMENTS.has(tag);\n  // Defaults, enforced attributes and handlers per tag and disabled state (shared with Link).\n  const { defaults, enforced, handlers } = useButtonSemantics({\n    tag,\n    href: rest.href,\n    disabled,\n    disabledFocusable,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onBlur,\n  });\n  const ariaDisabled = rest['aria-disabled'];\n  /**\n   * An `icon` that renders nothing (`''` from `icon={name && <Icon />}`, an empty array, Set or\n   * Fragment) is treated like no icon: no empty `aria-hidden` span, no gap, no icon-only sizing.\n   */\n  const iconElement = renderSlot(\n    slotRendersContent(icon) ? icon : undefined,\n    'span',\n    'inline-flex shrink-0 items-center',\n    { 'aria-hidden': true },\n  );\n  /** Derived from what renders, so an icon that renders nothing never counts. */\n  const hasIcon = iconElement !== null;\n  // A generator label is read once by the check; its items are what renders.\n  const label = materialiseSlotContent(children);\n  const hasLabel = slotRendersContent(label);\n  const iconOnly = hasIcon && !hasLabel;\n\n  const ariaLabel = rest['aria-label'];\n  const ariaLabelledBy = rest['aria-labelledby'];\n  const title = rest.title;\n  React.useEffect(() => {\n    if (iconOnly && !ariaLabel && !ariaLabelledBy && !title) {\n      warnOnce(\n        'Button:icon-only-name',\n        'Button: an icon-only button has no accessible name. Pass `aria-label`, `aria-labelledby` or `title` (the icon is decorative and hidden from assistive technology).',\n      );\n    }\n  }, [iconOnly, ariaLabel, ariaLabelledBy, title]);\n\n  // Defaults apply wherever the consumer's value is `undefined` or `null` (C-COMPOSE), so a wrapper\n  // that forwards `type={type}` never drops `type=\"button\"`, the role or the tab stop.\n  const elementProps: Record<string, unknown> = { ...rest };\n  for (const [key, value] of Object.entries(defaults)) elementProps[key] ??= value;\n\n  const showDisabledLook =\n    disabled || disabledFocusable || ariaDisabled === true || ariaDisabled === 'true';\n  let content: React.ReactNode = label;\n  if (isVoid) content = undefined;\n  else if (iconElement) {\n    // DOM order, so the icon follows the writing direction (no physical classes).\n    content =\n      iconPosition === 'after' ? (\n        <>\n          {label}\n          {iconElement}\n        </>\n      ) : (\n        <>\n          {iconElement}\n          {label}\n        </>\n      );\n  }\n\n  return (\n    <Component\n      {...elementProps}\n      {...handlers}\n      ref={ref}\n      className={cn(\n        buttonClassName({ appearance, size, disabled: showDisabledLook, iconOnly }),\n        hasIcon && hasLabel && 'gap-1.5',\n        className,\n      )}\n      {...enforced}\n    >\n      {content}\n    </Component>\n  );\n};\n\nButton.displayName = 'Button';\n"],"mappings":";;;;;;;;;AA0HA,IAAaE,KAA0D,MAAU;CAC/E,IAAM,EACJ,OACA,gBAAa,WACb,UAAO,UACP,SACA,kBAAe,UACf,cAAW,IACX,uBAAoB,IACpB,cACA,aACA,QACA,YACA,cACA,YACA,WACA,GAAGC,MACDC,GAEEC,IAA+BC,KAAM,UACrCC,IAAM,OAAOF,KAAc,WAAWA,IAAY,MAClDG,IAASD,MAAQ,QAAQE,EAAc,IAAIF,CAAG,GAE9C,EAAE,aAAU,aAAU,gBAAaG,EAAmB;EAC1D;EACA,MAAMP,EAAK;EACX;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,GACKQ,IAAeR,EAAK,kBAKpBS,IAAcC,EAClBC,EAAmBC,CAAI,IAAIA,IAAO,KAAA,GAClC,QACA,qCACA,EAAE,eAAe,GAAK,CACxB,GAEMC,IAAUJ,MAAgB,MAE1BK,IAAQC,EAAuBC,CAAQ,GACvCC,IAAWN,EAAmBG,CAAK,GACnCI,IAAWL,KAAW,CAACI,GAEvBE,IAAYnB,EAAK,eACjBoB,IAAiBpB,EAAK,oBACtBqB,IAAQrB,EAAK;CACnB,EAAM,gBAAgB;EACpB,AAAIkB,KAAY,CAACC,KAAa,CAACC,KAAkB,CAACC,KAChDC,EACE,yBACA,oKACF;CAEJ,GAAG;EAACJ;EAAUC;EAAWC;EAAgBC;CAAK,CAAC;CAI/C,IAAME,IAAwC,EAAE,GAAGvB,EAAK;CACxD,KAAK,IAAM,CAACwB,GAAKC,MAAU,OAAO,QAAQC,CAAQ,GAAG,EAAaF,OAASC;CAE3E,IAAME,IACJC,KAAYC,KAAqBrB,MAAiB,MAAQA,MAAiB,QACzEsB,IAA2BhB;CAkB/B,OAjBIT,IAAQ,IAAU,KAAA,IACbI,MAEP,IACEsB,MAAiB,UACf,kBAAAlC,GAAA,EAAA,UAAA,CACGiB,GACAL,CACD,EAAA,CAAA,IAEF,kBAAAZ,GAAA,EAAA,UAAA,CACGY,GACAK,CACD,EAAA,CAAA,IAKN,kBAACZ,GAAD;EACE,GAAIqB;EACJ,GAAIU;EACC;EACL,WAAWC,EACTC,EAAgB;GAAE;GAAY;GAAM,UAAUR;GAAkB;EAAS,CAAC,GAC1Ed,KAAWI,KAAY,WACvBmB,CACF;EACA,GAAIC;EAEH,UAAAP;CACQ,CAAA;AAEf;AAEA,EAAO,cAAc"}
+{"version":3,"file":"Button.mjs","names":["_Fragment","React","Button","rest","props","Component","as","tag","isVoid","VOID_ELEMENTS","useButtonSemantics","ariaDisabled","iconElement","renderSlot","slotRendersContent","icon","cn","buttonClassNames","hasIcon","label","materialiseSlotContent","children","hasLabel","iconOnly","ariaLabel","ariaLabelledBy","title","warnOnce","elementProps","key","value","defaults","showDisabledLook","disabled","disabledFocusable","content","iconPosition","Fragment","handlers","buttonClassName","className","enforced"],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { buttonClassNames } from '../../lib/classNames';\nimport { warnOnce } from '../../lib/dev';\nimport {\n  materialiseSlotContent,\n  renderSlot,\n  slotRendersContent,\n  VOID_ELEMENTS,\n} from '../../lib/slot';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport type { Size, Appearance, IconPosition, Slot } from '../../lib/types';\nimport { useButtonSemantics } from './Button.semantics';\nimport { buttonClassName } from './buttonStyles';\n\n/**\n * The Button's own props (the XOwnProps rule of `PolymorphicProps`: component-specific props only).\n * Every other prop comes from the rendered element (`as`), so `as=\"a\"` accepts `href`/`target`\n * and types `onClick` for an anchor.\n */\nexport interface ButtonOwnProps {\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 button 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, e.g.\n   * an \"open in new window\" glyph). Follows the writing direction through DOM order. Has no effect\n   * on an icon-only button.\n   * @default 'before'\n   */\n  iconPosition?: IconPosition;\n  /**\n   * Disables the button. Only the intrinsic form controls (`button`, the default, and `input`,\n   * `select`, `textarea`) get the native `disabled` attribute. Every other `as` — `a`, `div`,\n   * `span` and **any custom component**, including router links and styled or motion components\n   * that render a native `<button>` — does not receive `disabled`: it gets `aria-disabled=\"true\"`\n   * and `tabIndex={-1}` instead (neither can be overridden), its clicks and Enter/Space are\n   * prevented (a click does not reach ancestor `onClick` handlers either, as with a native\n   * disabled button), and an `<a>` drops its `href` (it keeps `role=\"link\"` when it had one,\n   * `role=\"button\"` otherwise). Such an element leaves the tab order but, like any\n   * `tabIndex={-1}` element, can still take focus from a mouse click, and a component's own\n   * `:disabled` styling does not apply. Every disabled Button also renders `data-disabled`.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Marks the button unavailable but keeps it focusable and in the tab order: for toolbar items, a\n   * button that disables itself when activated, or a disabled button that needs a Tooltip. Renders\n   * `aria-disabled=\"true\"`, `data-disabled` and `data-disabled-focusable` instead of the native\n   * `disabled` attribute. Clicks, Enter, Space and implicit form submission are prevented; your\n   * `onClick` is not called and the click does not reach ancestor click handlers. Hover and pressed\n   * colors are off. 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\n/**\n * Props of {@link Button} rendered as `C` (default `'button'`). `ButtonProps` without a type\n * argument is the 0.4 name: the props of a Button rendered as a `<button>`, including `ref`.\n *\n * @example\n * interface SaveButtonProps extends ButtonProps { tracking?: string }\n * const props: ButtonProps<'a'> = { as: 'a', href: '/docs', appearance: 'primary' };\n */\nexport type ButtonProps<C extends React.ElementType = 'button'> = PolymorphicProps<\n  C,\n  ButtonOwnProps\n>;\n\n/** The props the implementation reads, for any `as` (the public typing is `PolymorphicComponent`). */\ntype ButtonImplProps = ButtonOwnProps &\n  Omit<React.HTMLAttributes<HTMLElement>, 'onClick' | 'onKeyDown' | 'onKeyUp'> & {\n    as?: React.ElementType;\n    ref?: React.Ref<HTMLElement>;\n    /** An anchor's destination (`as=\"a\"`): without one, the anchor gets button semantics. */\n    href?: string;\n    onClick?: React.MouseEventHandler<HTMLElement>;\n    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;\n    onKeyUp?: React.KeyboardEventHandler<HTMLElement>;\n  };\n\n/**\n * A button with Fluent appearances and sizes.\n *\n * - Renders a `<button type=\"button\">` by default (pass `type=\"submit\"` to submit a form).\n * - `as` renders another element or component with correctly typed props\n *   (`<Button as=\"a\" href=\"/docs\">`, `<Button as={RouterLink} to=\"/\">`).\n * - Non-button elements keep button semantics: an element that is not interactive by itself\n *   (`as=\"div\"`, `as=\"span\"`) and an `as=\"a\"` without `href` get `role=\"button\"`, a tab stop and\n *   Enter/Space activation (an `<a>` with any `href`, `''` included, stays a link), and\n *   `disabled` becomes `aria-disabled` + `tabIndex={-1}` with clicks and keys prevented.\n * - A custom `as` component receives neither the `type=\"button\"` default nor `disabled` (see\n *   `disabled`), even when it renders a native `<button>`: pass `type` yourself inside a form.\n * - The `icon` slot is decorative (`aria-hidden`); give icon-only buttons an `aria-label`.\n * - `disabledFocusable` keeps an unavailable button focusable (a Tooltip can explain why, a\n *   toolbar keeps it in its arrow-key order) and blocks its activation.\n * - A consumer `aria-disabled=\"true\"` shows the disabled look and suppresses hover and pressed\n *   colors, but the button stays focusable and its handlers still run: guard them yourself, or use\n *   `disabledFocusable`, which does both.\n * - Colors are theme tokens; hover and pressed styles never apply while disabled.\n * - Hover and pressed colors are gated (`not-disabled:not-aria-disabled:hover:`), which gives\n *   them a higher CSS specificity than a bare `hover:` class. To override them in `className`,\n *   use the same prefix (`not-disabled:not-aria-disabled:hover:bg-error`, which replaces the\n *   built-in class) or the important modifier (`hover:bg-error!`).\n *\n * @example\n * <Button appearance=\"primary\" icon={<SaveIcon />}>Save</Button>\n * <Button as=\"a\" href=\"/docs\">Documentation</Button>\n * <Button icon={<CloseIcon />} aria-label=\"Close\" appearance=\"subtle\" />\n */\nexport const Button: PolymorphicComponent<'button', ButtonOwnProps> = (props) => {\n  const {\n    as,\n    appearance = 'outline',\n    size = 'medium',\n    icon,\n    iconPosition = 'before',\n    disabled = false,\n    disabledFocusable = false,\n    className,\n    children,\n    ref,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onBlur,\n    ...rest\n  } = props as ButtonImplProps;\n\n  const Component: React.ElementType = as ?? 'button';\n  const tag = typeof Component === 'string' ? Component : null;\n  const isVoid = tag !== null && VOID_ELEMENTS.has(tag);\n  // Defaults, enforced attributes and handlers per tag and disabled state (shared with Link).\n  const { defaults, enforced, handlers } = useButtonSemantics({\n    tag,\n    href: rest.href,\n    disabled,\n    disabledFocusable,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onBlur,\n  });\n  const ariaDisabled = rest['aria-disabled'];\n  /**\n   * An `icon` that renders nothing (`''` from `icon={name && <Icon />}`, an empty array, Set or\n   * Fragment) is treated like no icon: no empty `aria-hidden` span, no gap, no icon-only sizing.\n   */\n  const iconElement = renderSlot(\n    slotRendersContent(icon) ? icon : undefined,\n    'span',\n    cn(buttonClassNames.icon, 'inline-flex shrink-0 items-center'),\n    { 'aria-hidden': true },\n  );\n  /** Derived from what renders, so an icon that renders nothing never counts. */\n  const hasIcon = iconElement !== null;\n  // A generator label is read once by the check; its items are what renders.\n  const label = materialiseSlotContent(children);\n  const hasLabel = slotRendersContent(label);\n  const iconOnly = hasIcon && !hasLabel;\n\n  const ariaLabel = rest['aria-label'];\n  const ariaLabelledBy = rest['aria-labelledby'];\n  const title = rest.title;\n  React.useEffect(() => {\n    if (iconOnly && !ariaLabel && !ariaLabelledBy && !title) {\n      warnOnce(\n        'Button:icon-only-name',\n        'Button: an icon-only button has no accessible name. Pass `aria-label`, `aria-labelledby` or `title` (the icon is decorative and hidden from assistive technology).',\n      );\n    }\n  }, [iconOnly, ariaLabel, ariaLabelledBy, title]);\n\n  // Defaults apply wherever the consumer's value is `undefined` or `null` (C-COMPOSE), so a wrapper\n  // that forwards `type={type}` never drops `type=\"button\"`, the role or the tab stop.\n  const elementProps: Record<string, unknown> = { ...rest };\n  for (const [key, value] of Object.entries(defaults)) elementProps[key] ??= value;\n\n  const showDisabledLook =\n    disabled || disabledFocusable || ariaDisabled === true || ariaDisabled === 'true';\n  let content: React.ReactNode = label;\n  if (isVoid) content = undefined;\n  else if (iconElement) {\n    // DOM order, so the icon follows the writing direction (no physical classes).\n    content =\n      iconPosition === 'after' ? (\n        <>\n          {label}\n          {iconElement}\n        </>\n      ) : (\n        <>\n          {iconElement}\n          {label}\n        </>\n      );\n  }\n\n  return (\n    <Component\n      {...elementProps}\n      {...handlers}\n      ref={ref}\n      className={cn(\n        buttonClassNames.root,\n        buttonClassName({ appearance, size, disabled: showDisabledLook, iconOnly }),\n        hasIcon && hasLabel && 'gap-1.5',\n        className,\n      )}\n      {...enforced}\n    >\n      {content}\n    </Component>\n  );\n};\n\nButton.displayName = 'Button';\n"],"mappings":";;;;;;;;;;AA2HA,IAAaE,KAA0D,MAAU;CAC/E,IAAM,EACJ,OACA,gBAAa,WACb,UAAO,UACP,SACA,kBAAe,UACf,cAAW,IACX,uBAAoB,IACpB,cACA,aACA,QACA,YACA,cACA,YACA,WACA,GAAGC,MACDC,GAEEC,IAA+BC,KAAM,UACrCC,IAAM,OAAOF,KAAc,WAAWA,IAAY,MAClDG,IAASD,MAAQ,QAAQE,EAAc,IAAIF,CAAG,GAE9C,EAAE,aAAU,aAAU,gBAAaG,EAAmB;EAC1D;EACA,MAAMP,EAAK;EACX;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,GACKQ,IAAeR,EAAK,kBAKpBS,IAAcC,EAClBC,EAAmBC,CAAI,IAAIA,IAAO,KAAA,GAClC,QACAC,EAAGC,EAAiB,MAAM,mCAAmC,GAC7D,EAAE,eAAe,GAAK,CACxB,GAEMC,IAAUN,MAAgB,MAE1BO,IAAQC,EAAuBC,CAAQ,GACvCC,IAAWR,EAAmBK,CAAK,GACnCI,IAAWL,KAAW,CAACI,GAEvBE,IAAYrB,EAAK,eACjBsB,IAAiBtB,EAAK,oBACtBuB,IAAQvB,EAAK;CACnB,EAAM,gBAAgB;EACpB,AAAIoB,KAAY,CAACC,KAAa,CAACC,KAAkB,CAACC,KAChDC,EACE,yBACA,oKACF;CAEJ,GAAG;EAACJ;EAAUC;EAAWC;EAAgBC;CAAK,CAAC;CAI/C,IAAME,IAAwC,EAAE,GAAGzB,EAAK;CACxD,KAAK,IAAM,CAAC0B,GAAKC,MAAU,OAAO,QAAQC,CAAQ,GAAG,EAAaF,OAASC;CAE3E,IAAME,IACJC,KAAYC,KAAqBvB,MAAiB,MAAQA,MAAiB,QACzEwB,IAA2BhB;CAkB/B,OAjBIX,IAAQ,IAAU,KAAA,IACbI,MAEP,IACEwB,MAAiB,UACf,kBAAApC,GAAA,EAAA,UAAA,CACGmB,GACAP,CACD,EAAA,CAAA,IAEF,kBAAAZ,GAAA,EAAA,UAAA,CACGY,GACAO,CACD,EAAA,CAAA,IAKN,kBAACd,GAAD;EACE,GAAIuB;EACJ,GAAIU;EACC;EACL,WAAWtB,EACTC,EAAiB,MACjBsB,EAAgB;GAAE;GAAY;GAAM,UAAUP;GAAkB;EAAS,CAAC,GAC1Ed,KAAWI,KAAY,WACvBkB,CACF;EACA,GAAIC;EAEH,UAAAN;CACQ,CAAA;AAEf;AAEA,EAAO,cAAc"}

package/dist/components/button/Button.slots.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/children.cjs"),n=require("../../lib/aria.cjs"),r=require("./Button.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o=new Set(Object.keys({as:!0,appearance:!0,size:!0,icon:!0,iconPosition:!0,disabledFocusable:!0}));function s(e,t,n){return n===`after`?(0,a.jsxs)(a.Fragment,{children:[t,e]}):(0,a.jsxs)(a.Fragment,{children:[e,t]})}function c(e){e.preventDefault(),e.stopPropagation()}var l={...n.focusableDisabledProps(!0,{reachable:!0}),disabled:!1,onClick:c},u=`aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100`;function d(e){if(typeof e!=`object`||!e||i.isValidElement(e)||Symbol.iterator in e||!(`as`in e))return!1;let{as:t}=e;return t===`button`||t===r.Button}function f(e){let n=e;return t.isElementOfType(n,`button`,r.Button)?{glyph:n.props.children,button:`a button element`}:d(e)?{glyph:e.children,button:`a slot object that renders a button`}:{glyph:e,button:null}}exports.BUTTON_OWN_PROP_KEYS=o,exports.MERGED_DISABLED_FOCUSABLE_PROPS=l,exports.mergedAriaDisabledClasses=u,exports.placeButtonIcon=s,exports.unwrapButtonGlyph=f;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/children.cjs"),n=require("../../lib/slot.cjs"),r=require("../../lib/aria.cjs"),i=require("./Button.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("react/jsx-runtime");var s=new Set(Object.keys({as:!0,appearance:!0,size:!0,icon:!0,iconPosition:!0,disabledFocusable:!0}));function c(e,t,n){return n===`after`?(0,o.jsxs)(o.Fragment,{children:[t,e]}):(0,o.jsxs)(o.Fragment,{children:[e,t]})}function l(e){e.preventDefault(),e.stopPropagation()}var u={...r.focusableDisabledProps(!0,{reachable:!0}),disabled:!1,onClick:l},d=`aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100`;function f(e,t){if(!n.slotRendersContent(e))return e;let r=n.resolveSlot(e,`span`,t);return r?{...r.props,as:r.Component,children:r.children}:e}function p(e){if(typeof e!=`object`||!e||a.isValidElement(e)||Symbol.iterator in e||!(`as`in e))return!1;let{as:t}=e;return t===`button`||t===i.Button}function m(e){let n=e;return t.isElementOfType(n,`button`,i.Button)?{glyph:n.props.children,button:`a button element`}:p(e)?{glyph:e.children,button:`a slot object that renders a button`}:{glyph:e,button:null}}exports.BUTTON_OWN_PROP_KEYS=s,exports.MERGED_DISABLED_FOCUSABLE_PROPS=u,exports.mergedAriaDisabledClasses=d,exports.placeButtonIcon=c,exports.unwrapButtonGlyph=m,exports.withPartClass=f;
 //# sourceMappingURL=Button.slots.cjs.map

package/dist/components/button/Button.slots.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.slots.cjs","names":["_Fragment","focusableDisabledProps","React","Button","isElementOfType","require_runtime","require_children","require_aria","require_Button","react","react_jsx_runtime","BUTTON_OWN_PROP_KEYS","placeButtonIcon","iconPosition","content","icon","blockClick","event","MERGED_DISABLED_FOCUSABLE_PROPS","mergedAriaDisabledClasses","isButtonSlotObject","value","as","unwrapButtonGlyph","node","slot"],"sources":["../../../src/components/button/Button.slots.tsx"],"sourcesContent":["/**\n * How the slots of other components treat a `<button>` or Wave `Button` passed to them (C-SLOTS).\n * Internal (not exported from the package).\n *\n * - Dismiss and clear slots (MessageBar `dismiss`, SearchBox `dismiss`, Tag `dismissIcon`) merge\n *   it into their own wired `<button>`. {@link BUTTON_OWN_PROP_KEYS} lists the Button props that\n *   must not reach that element; {@link placeButtonIcon} and {@link MERGED_DISABLED_FOCUSABLE_PROPS}\n *   give it what the Button would have done with `icon`, `iconPosition` and `disabledFocusable`.\n * - Glyph slots inside a wired button (SplitButton and MenuButton `menuIcon`, Combobox and\n *   TimePicker `expandIcon`) unwrap it: {@link unwrapButtonGlyph}.\n */\nimport * as React from 'react';\nimport { focusableDisabledProps } from '../../lib/aria';\nimport { isElementOfType } from '../../lib/children';\nimport type { Slot } from '../../lib/slot';\nimport { Button } from './Button';\nimport type { ButtonOwnProps } from './Button';\n\n/**\n * The keys of {@link BUTTON_OWN_PROP_KEYS}, checked against `ButtonOwnProps`: a new own prop of\n * `Button` does not compile until it is listed here, so it cannot leak onto a wired button.\n */\nconst buttonOwnPropKeys = {\n  as: true,\n  appearance: true,\n  size: true,\n  icon: true,\n  iconPosition: true,\n  disabledFocusable: true,\n} satisfies Record<Exclude<keyof ButtonOwnProps, 'disabled'> | 'as', true>;\n\n/**\n * The props of a Wave `Button` that are not DOM attributes: `as` and every own prop except\n * `disabled` (a native attribute, merged as one). A component that merges a `Button` into its own\n * `<button>` never spreads these onto it; it applies `icon`, `iconPosition` and\n * `disabledFocusable` itself.\n */\nexport const BUTTON_OWN_PROP_KEYS: ReadonlySet<string> = new Set(Object.keys(buttonOwnPropKeys));\n\n/**\n * The content of a wired button that merged a Wave `Button`: the Button's decorative icon before\n * its content, or after it for `iconPosition=\"after\"`, as `Button` renders it (DOM order, so it\n * follows the writing direction).\n *\n * @param icon The rendered icon (`aria-hidden`), or `null`.\n * @param content The Button's content.\n * @param iconPosition The Button's `iconPosition` (anything but `'after'` means before).\n */\nexport function placeButtonIcon(\n  icon: React.ReactNode,\n  content: React.ReactNode,\n  iconPosition: unknown,\n): React.ReactElement {\n  return iconPosition === 'after' ? (\n    <>\n      {content}\n      {icon}\n    </>\n  ) : (\n    <>\n      {icon}\n      {content}\n    </>\n  );\n}\n\n/** Prevents a click and stops it, as a natively disabled button dispatches none to ancestors. */\nfunction blockClick(event: React.MouseEvent<HTMLElement>) {\n  event.preventDefault();\n  event.stopPropagation();\n}\n\n/**\n * Spread last on a wired button that merged a Wave `Button` with `disabledFocusable`, so it\n * behaves as that Button would: `aria-disabled`, `data-disabled` and `data-disabled-focusable`\n * instead of the native `disabled` (overridden: `disabledFocusable` wins over `disabled`), so it\n * keeps its tab stop; its click is prevented and stopped, so neither the merged `onClick` nor the\n * component's own action runs and no ancestor click handler sees it. A native `<button>` also\n * activates through a click for Enter, Space and implicit form submission, so those are blocked\n * too.\n */\nexport const MERGED_DISABLED_FOCUSABLE_PROPS = {\n  ...focusableDisabledProps(true, { reachable: true }),\n  disabled: false,\n  onClick: blockClick,\n};\n\n/**\n * The disabled look of a wired dismiss or clear button while `aria-disabled` (a merged\n * `disabledFocusable`, or a consumer `aria-disabled`): dimmed like a disabled button, except while\n * it shows its focus ring, which `opacity` would dim too.\n */\nexport const mergedAriaDisabledClasses =\n  'aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100';\n\n/** What {@link unwrapButtonGlyph} unwrapped, for the slot's development warning. */\nexport type UnwrappedButton = 'a button element' | 'a slot object that renders a button';\n\n/** Whether `value` is a slot object (`{ as, children, … }`) that renders a `<button>` or `Button`. */\nfunction isButtonSlotObject(value: unknown): value is { children?: React.ReactNode } {\n  if (typeof value !== 'object' || value === null || React.isValidElement(value)) return false;\n  if (Symbol.iterator in value || !('as' in value)) return false;\n  const { as } = value as { as?: unknown };\n  return as === 'button' || as === Button;\n}\n\n/**\n * A glyph slot's value with a button unwrapped. A glyph inside a wired button is decorative and a\n * button cannot contain a button (C-SLOTS), so for a `<button>` or `Button` element, or a slot\n * object whose `as` is `'button'` or `Button`, the glyph is its `children` and its props are\n * dropped; any other value is the glyph as given. `button` says what was unwrapped (`null`:\n * nothing), so the component can warn once from an effect. A `Button` written in a Server\n * Component (a lazy client reference) is unwrapped too.\n *\n * @example\n * const { glyph, button } = unwrapButtonGlyph(menuIcon);\n */\nexport function unwrapButtonGlyph(slot: Slot<'span'> | undefined): {\n  glyph: Slot<'span'> | undefined;\n  button: UnwrappedButton | null;\n} {\n  // A slot object is never an element, so any slot value can be checked as a node.\n  const node = slot as React.ReactNode;\n  if (isElementOfType<{ children?: React.ReactNode }>(node, 'button', Button)) {\n    return { glyph: node.props.children, button: 'a button element' };\n  }\n  if (isButtonSlotObject(slot)) {\n    return { glyph: slot.children, button: 'a slot object that renders a button' };\n  }\n  return { glyph: slot, button: null };\n}\n"],"mappings":"8OAqCA,IAAaW,EAA4C,IAAI,IAAI,OAAO,KAAK,CAd3E,GAAI,GACJ,WAAY,GACZ,KAAM,GACN,KAAM,GACN,aAAc,GACd,kBAAmB,EASwD,CAAiB,CAAC,EAW/F,SAAgBC,EACd,EACA,EACA,EACoB,CACpB,OAAOC,IAAiB,SACtB,EAAAH,EAAA,KAAA,CAAAV,EAAAA,SAAA,CAAA,SAAA,CACGc,EACAC,CACD,CAAA,CAAA,GAEF,EAAAL,EAAA,KAAA,CAAAV,EAAAA,SAAA,CAAA,SAAA,CACGe,EACAD,CACD,CAAA,CAAA,CAEN,CAGA,SAASE,EAAW,EAAsC,CACxDC,EAAM,eAAe,EACrBA,EAAM,gBAAgB,CACxB,CAWA,IAAaC,EAAkC,CAC7C,GAAGjB,EAAAA,uBAAuB,GAAM,CAAE,UAAW,EAAK,CAAC,EACnD,SAAU,GACV,QAASe,CACX,EAOaG,EACX,oGAMF,SAASC,EAAmB,EAAyD,CAEnF,GADI,OAAOC,GAAU,WAAYA,GAAkBnB,EAAM,eAAemB,CAAK,GACzE,OAAO,YAAYA,GAAS,EAAE,OAAQA,GAAQ,MAAO,GACzD,GAAM,CAAE,MAAOA,EACf,OAAOC,IAAO,UAAYA,IAAOnB,EAAAA,MACnC,CAaA,SAAgBoB,EAAkB,EAGhC,CAEA,IAAMC,EAAOC,EAOb,OANIrB,EAAAA,gBAAgDoB,EAAM,SAAUrB,EAAAA,MAAM,EACjE,CAAE,MAAOqB,EAAK,MAAM,SAAU,OAAQ,kBAAmB,EAE9DJ,EAAmBK,CAAI,EAClB,CAAE,MAAOA,EAAK,SAAU,OAAQ,qCAAsC,EAExE,CAAE,MAAOA,EAAM,OAAQ,IAAK,CACrC"}
+{"version":3,"file":"Button.slots.cjs","names":["_Fragment","focusableDisabledProps","slotRendersContent","resolveSlot","React","Button","isElementOfType","require_runtime","require_children","require_slot","require_aria","require_Button","react","react_jsx_runtime","BUTTON_OWN_PROP_KEYS","placeButtonIcon","iconPosition","content","icon","blockClick","event","MERGED_DISABLED_FOCUSABLE_PROPS","mergedAriaDisabledClasses","withPartClass","slot","resolved","className","isButtonSlotObject","value","as","unwrapButtonGlyph","node"],"sources":["../../../src/components/button/Button.slots.tsx"],"sourcesContent":["/**\n * How the slots of other components treat a `<button>` or Wave `Button` passed to them (C-SLOTS).\n * Internal (not exported from the package).\n *\n * - Dismiss and clear slots (MessageBar `dismiss`, SearchBox `dismiss`, Tag `dismissIcon`) merge\n *   it into their own wired `<button>`. {@link BUTTON_OWN_PROP_KEYS} lists the Button props that\n *   must not reach that element; {@link placeButtonIcon} and {@link MERGED_DISABLED_FOCUSABLE_PROPS}\n *   give it what the Button would have done with `icon`, `iconPosition` and `disabledFocusable`.\n * - Glyph slots inside a wired button (SplitButton and MenuButton `menuIcon`, Combobox and\n *   TimePicker `expandIcon`) unwrap it: {@link unwrapButtonGlyph}.\n * - Variants that hand their `icon` to Button (ToggleButton, CompoundButton, MenuButton,\n *   SplitButton, the Toolbar buttons) add their part class to it: {@link withPartClass}.\n */\nimport * as React from 'react';\nimport { focusableDisabledProps } from '../../lib/aria';\nimport { isElementOfType } from '../../lib/children';\nimport { resolveSlot, slotRendersContent } from '../../lib/slot';\nimport type { Slot, SlotObject } from '../../lib/slot';\nimport { Button } from './Button';\nimport type { ButtonOwnProps } from './Button';\n\n/**\n * The keys of {@link BUTTON_OWN_PROP_KEYS}, checked against `ButtonOwnProps`: a new own prop of\n * `Button` does not compile until it is listed here, so it cannot leak onto a wired button.\n */\nconst buttonOwnPropKeys = {\n  as: true,\n  appearance: true,\n  size: true,\n  icon: true,\n  iconPosition: true,\n  disabledFocusable: true,\n} satisfies Record<Exclude<keyof ButtonOwnProps, 'disabled'> | 'as', true>;\n\n/**\n * The props of a Wave `Button` that are not DOM attributes: `as` and every own prop except\n * `disabled` (a native attribute, merged as one). A component that merges a `Button` into its own\n * `<button>` never spreads these onto it; it applies `icon`, `iconPosition` and\n * `disabledFocusable` itself.\n */\nexport const BUTTON_OWN_PROP_KEYS: ReadonlySet<string> = new Set(Object.keys(buttonOwnPropKeys));\n\n/**\n * The content of a wired button that merged a Wave `Button`: the Button's decorative icon before\n * its content, or after it for `iconPosition=\"after\"`, as `Button` renders it (DOM order, so it\n * follows the writing direction).\n *\n * @param icon The rendered icon (`aria-hidden`), or `null`.\n * @param content The Button's content.\n * @param iconPosition The Button's `iconPosition` (anything but `'after'` means before).\n */\nexport function placeButtonIcon(\n  icon: React.ReactNode,\n  content: React.ReactNode,\n  iconPosition: unknown,\n): React.ReactElement {\n  return iconPosition === 'after' ? (\n    <>\n      {content}\n      {icon}\n    </>\n  ) : (\n    <>\n      {icon}\n      {content}\n    </>\n  );\n}\n\n/** Prevents a click and stops it, as a natively disabled button dispatches none to ancestors. */\nfunction blockClick(event: React.MouseEvent<HTMLElement>) {\n  event.preventDefault();\n  event.stopPropagation();\n}\n\n/**\n * Spread last on a wired button that merged a Wave `Button` with `disabledFocusable`, so it\n * behaves as that Button would: `aria-disabled`, `data-disabled` and `data-disabled-focusable`\n * instead of the native `disabled` (overridden: `disabledFocusable` wins over `disabled`), so it\n * keeps its tab stop; its click is prevented and stopped, so neither the merged `onClick` nor the\n * component's own action runs and no ancestor click handler sees it. A native `<button>` also\n * activates through a click for Enter, Space and implicit form submission, so those are blocked\n * too.\n */\nexport const MERGED_DISABLED_FOCUSABLE_PROPS = {\n  ...focusableDisabledProps(true, { reachable: true }),\n  disabled: false,\n  onClick: blockClick,\n};\n\n/**\n * The disabled look of a wired dismiss or clear button while `aria-disabled` (a merged\n * `disabledFocusable`, or a consumer `aria-disabled`): dimmed like a disabled button, except while\n * it shows its focus ring, which `opacity` would dim too.\n */\nexport const mergedAriaDisabledClasses =\n  'aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100';\n\n/**\n * `slot` as a slot object whose element also carries `className`: a variant's part class on the\n * icon that Button draws (`icon={withPartClass(icon, toggleButtonClassNames.icon)}`), so Button's\n * icon span carries both components' classes and Button needs no class prop of its own.\n * Shorthand content becomes the children of a `<span>` with the class; a slot object keeps its\n * element, attributes, `ref` and own classes, with `className` before them (so the consumer's\n * class still wins a conflict). A slot that renders nothing (`null`, `false`, `''`, `[]`, `<></>`)\n * is returned as it is, so no empty icon element renders; applying it twice adds both classes to\n * one element.\n */\nexport function withPartClass(\n  slot: Slot<'span'> | undefined,\n  className: string,\n): Slot<'span'> | undefined {\n  if (!slotRendersContent(slot)) return slot;\n  const resolved = resolveSlot(slot, 'span', className);\n  if (!resolved) return slot;\n  return {\n    ...resolved.props,\n    as: resolved.Component,\n    children: resolved.children,\n  } as SlotObject<'span'>;\n}\n\n/** What {@link unwrapButtonGlyph} unwrapped, for the slot's development warning. */\nexport type UnwrappedButton = 'a button element' | 'a slot object that renders a button';\n\n/** Whether `value` is a slot object (`{ as, children, … }`) that renders a `<button>` or `Button`. */\nfunction isButtonSlotObject(value: unknown): value is { children?: React.ReactNode } {\n  if (typeof value !== 'object' || value === null || React.isValidElement(value)) return false;\n  if (Symbol.iterator in value || !('as' in value)) return false;\n  const { as } = value as { as?: unknown };\n  return as === 'button' || as === Button;\n}\n\n/**\n * A glyph slot's value with a button unwrapped. A glyph inside a wired button is decorative and a\n * button cannot contain a button (C-SLOTS), so for a `<button>` or `Button` element, or a slot\n * object whose `as` is `'button'` or `Button`, the glyph is its `children` and its props are\n * dropped; any other value is the glyph as given. `button` says what was unwrapped (`null`:\n * nothing), so the component can warn once from an effect. A `Button` written in a Server\n * Component (a lazy client reference) is unwrapped too.\n *\n * @example\n * const { glyph, button } = unwrapButtonGlyph(menuIcon);\n */\nexport function unwrapButtonGlyph(slot: Slot<'span'> | undefined): {\n  glyph: Slot<'span'> | undefined;\n  button: UnwrappedButton | null;\n} {\n  // A slot object is never an element, so any slot value can be checked as a node.\n  const node = slot as React.ReactNode;\n  if (isElementOfType<{ children?: React.ReactNode }>(node, 'button', Button)) {\n    return { glyph: node.props.children, button: 'a button element' };\n  }\n  if (isButtonSlotObject(slot)) {\n    return { glyph: slot.children, button: 'a slot object that renders a button' };\n  }\n  return { glyph: slot, button: null };\n}\n"],"mappings":"8QAwCA,IAAac,EAA4C,IAAI,IAAI,OAAO,KAAK,CAd3E,GAAI,GACJ,WAAY,GACZ,KAAM,GACN,KAAM,GACN,aAAc,GACd,kBAAmB,EASwD,CAAiB,CAAC,EAW/F,SAAgBC,EACd,EACA,EACA,EACoB,CACpB,OAAOC,IAAiB,SACtB,EAAAH,EAAA,KAAA,CAAAb,EAAAA,SAAA,CAAA,SAAA,CACGiB,EACAC,CACD,CAAA,CAAA,GAEF,EAAAL,EAAA,KAAA,CAAAb,EAAAA,SAAA,CAAA,SAAA,CACGkB,EACAD,CACD,CAAA,CAAA,CAEN,CAGA,SAASE,EAAW,EAAsC,CACxDC,EAAM,eAAe,EACrBA,EAAM,gBAAgB,CACxB,CAWA,IAAaC,EAAkC,CAC7C,GAAGpB,EAAAA,uBAAuB,GAAM,CAAE,UAAW,EAAK,CAAC,EACnD,SAAU,GACV,QAASkB,CACX,EAOaG,EACX,oGAYF,SAAgBC,EACd,EACA,EAC0B,CAC1B,GAAI,CAACrB,EAAAA,mBAAmBsB,CAAI,EAAG,OAAOA,EACtC,IAAMC,EAAWtB,EAAAA,YAAYqB,EAAM,OAAQE,CAAS,EAEpD,OADKD,EACE,CACL,GAAGA,EAAS,MACZ,GAAIA,EAAS,UACb,SAAUA,EAAS,QACrB,EALsBD,CAMxB,CAMA,SAASG,EAAmB,EAAyD,CAEnF,GADI,OAAOC,GAAU,WAAYA,GAAkBxB,EAAM,eAAewB,CAAK,GACzE,OAAO,YAAYA,GAAS,EAAE,OAAQA,GAAQ,MAAO,GACzD,GAAM,CAAE,MAAOA,EACf,OAAOC,IAAO,UAAYA,IAAOxB,EAAAA,MACnC,CAaA,SAAgByB,EAAkB,EAGhC,CAEA,IAAMC,EAAOP,EAOb,OANIlB,EAAAA,gBAAgDyB,EAAM,SAAU1B,EAAAA,MAAM,EACjE,CAAE,MAAO0B,EAAK,MAAM,SAAU,OAAQ,kBAAmB,EAE9DJ,EAAmBH,CAAI,EAClB,CAAE,MAAOA,EAAK,SAAU,OAAQ,qCAAsC,EAExE,CAAE,MAAOA,EAAM,OAAQ,IAAK,CACrC"}

package/dist/components/button/Button.slots.mjs

@@ -1,10 +1,11 @@
 "use client";
 import { isElementOfType as e } from "../../lib/children.mjs";
-import { focusableDisabledProps as t } from "../../lib/aria.mjs";
-import { Button as n } from "./Button.mjs";
-import * as r from "react";
-import { Fragment as i, jsxs as a } from "react/jsx-runtime";
-var o = new Set(Object.keys({
+import { resolveSlot as t, slotRendersContent as n } from "../../lib/slot.mjs";
+import { focusableDisabledProps as r } from "../../lib/aria.mjs";
+import { Button as i } from "./Button.mjs";
+import * as a from "react";
+import { Fragment as o, jsxs as s } from "react/jsx-runtime";
+var c = new Set(Object.keys({
 	as: !0,
 	appearance: !0,
 	size: !0,
@@ -12,28 +13,37 @@ var o = new Set(Object.keys({
 	iconPosition: !0,
 	disabledFocusable: !0
 }));
-function s(e, t, n) {
-	return n === "after" ? /* @__PURE__ */ a(i, { children: [t, e] }) : /* @__PURE__ */ a(i, { children: [e, t] });
+function l(e, t, n) {
+	return n === "after" ? /* @__PURE__ */ s(o, { children: [t, e] }) : /* @__PURE__ */ s(o, { children: [e, t] });
 }
-function c(e) {
+function u(e) {
 	e.preventDefault(), e.stopPropagation();
 }
-var l = {
-	...t(!0, { reachable: !0 }),
+var d = {
+	...r(!0, { reachable: !0 }),
 	disabled: !1,
-	onClick: c
-}, u = "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100";
-function d(e) {
-	if (typeof e != "object" || !e || r.isValidElement(e) || Symbol.iterator in e || !("as" in e)) return !1;
+	onClick: u
+}, f = "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100";
+function p(e, r) {
+	if (!n(e)) return e;
+	let i = t(e, "span", r);
+	return i ? {
+		...i.props,
+		as: i.Component,
+		children: i.children
+	} : e;
+}
+function m(e) {
+	if (typeof e != "object" || !e || a.isValidElement(e) || Symbol.iterator in e || !("as" in e)) return !1;
 	let { as: t } = e;
-	return t === "button" || t === n;
+	return t === "button" || t === i;
 }
-function f(t) {
-	let r = t;
-	return e(r, "button", n) ? {
-		glyph: r.props.children,
+function h(t) {
+	let n = t;
+	return e(n, "button", i) ? {
+		glyph: n.props.children,
 		button: "a button element"
-	} : d(t) ? {
+	} : m(t) ? {
 		glyph: t.children,
 		button: "a slot object that renders a button"
 	} : {
@@ -42,6 +52,6 @@ function f(t) {
 	};
 }
 //#endregion
-export { o as BUTTON_OWN_PROP_KEYS, l as MERGED_DISABLED_FOCUSABLE_PROPS, u as mergedAriaDisabledClasses, s as placeButtonIcon, f as unwrapButtonGlyph };
+export { c as BUTTON_OWN_PROP_KEYS, d as MERGED_DISABLED_FOCUSABLE_PROPS, f as mergedAriaDisabledClasses, l as placeButtonIcon, h as unwrapButtonGlyph, p as withPartClass };
 
 //# sourceMappingURL=Button.slots.mjs.map

package/dist/components/button/Button.slots.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.slots.mjs","names":["_Fragment","React","BUTTON_OWN_PROP_KEYS","placeButtonIcon","iconPosition","Fragment","content","icon","blockClick","event","MERGED_DISABLED_FOCUSABLE_PROPS","focusableDisabledProps","mergedAriaDisabledClasses","isButtonSlotObject","value","as","Button","unwrapButtonGlyph","node","slot","isElementOfType"],"sources":["../../../src/components/button/Button.slots.tsx"],"sourcesContent":["/**\n * How the slots of other components treat a `<button>` or Wave `Button` passed to them (C-SLOTS).\n * Internal (not exported from the package).\n *\n * - Dismiss and clear slots (MessageBar `dismiss`, SearchBox `dismiss`, Tag `dismissIcon`) merge\n *   it into their own wired `<button>`. {@link BUTTON_OWN_PROP_KEYS} lists the Button props that\n *   must not reach that element; {@link placeButtonIcon} and {@link MERGED_DISABLED_FOCUSABLE_PROPS}\n *   give it what the Button would have done with `icon`, `iconPosition` and `disabledFocusable`.\n * - Glyph slots inside a wired button (SplitButton and MenuButton `menuIcon`, Combobox and\n *   TimePicker `expandIcon`) unwrap it: {@link unwrapButtonGlyph}.\n */\nimport * as React from 'react';\nimport { focusableDisabledProps } from '../../lib/aria';\nimport { isElementOfType } from '../../lib/children';\nimport type { Slot } from '../../lib/slot';\nimport { Button } from './Button';\nimport type { ButtonOwnProps } from './Button';\n\n/**\n * The keys of {@link BUTTON_OWN_PROP_KEYS}, checked against `ButtonOwnProps`: a new own prop of\n * `Button` does not compile until it is listed here, so it cannot leak onto a wired button.\n */\nconst buttonOwnPropKeys = {\n  as: true,\n  appearance: true,\n  size: true,\n  icon: true,\n  iconPosition: true,\n  disabledFocusable: true,\n} satisfies Record<Exclude<keyof ButtonOwnProps, 'disabled'> | 'as', true>;\n\n/**\n * The props of a Wave `Button` that are not DOM attributes: `as` and every own prop except\n * `disabled` (a native attribute, merged as one). A component that merges a `Button` into its own\n * `<button>` never spreads these onto it; it applies `icon`, `iconPosition` and\n * `disabledFocusable` itself.\n */\nexport const BUTTON_OWN_PROP_KEYS: ReadonlySet<string> = new Set(Object.keys(buttonOwnPropKeys));\n\n/**\n * The content of a wired button that merged a Wave `Button`: the Button's decorative icon before\n * its content, or after it for `iconPosition=\"after\"`, as `Button` renders it (DOM order, so it\n * follows the writing direction).\n *\n * @param icon The rendered icon (`aria-hidden`), or `null`.\n * @param content The Button's content.\n * @param iconPosition The Button's `iconPosition` (anything but `'after'` means before).\n */\nexport function placeButtonIcon(\n  icon: React.ReactNode,\n  content: React.ReactNode,\n  iconPosition: unknown,\n): React.ReactElement {\n  return iconPosition === 'after' ? (\n    <>\n      {content}\n      {icon}\n    </>\n  ) : (\n    <>\n      {icon}\n      {content}\n    </>\n  );\n}\n\n/** Prevents a click and stops it, as a natively disabled button dispatches none to ancestors. */\nfunction blockClick(event: React.MouseEvent<HTMLElement>) {\n  event.preventDefault();\n  event.stopPropagation();\n}\n\n/**\n * Spread last on a wired button that merged a Wave `Button` with `disabledFocusable`, so it\n * behaves as that Button would: `aria-disabled`, `data-disabled` and `data-disabled-focusable`\n * instead of the native `disabled` (overridden: `disabledFocusable` wins over `disabled`), so it\n * keeps its tab stop; its click is prevented and stopped, so neither the merged `onClick` nor the\n * component's own action runs and no ancestor click handler sees it. A native `<button>` also\n * activates through a click for Enter, Space and implicit form submission, so those are blocked\n * too.\n */\nexport const MERGED_DISABLED_FOCUSABLE_PROPS = {\n  ...focusableDisabledProps(true, { reachable: true }),\n  disabled: false,\n  onClick: blockClick,\n};\n\n/**\n * The disabled look of a wired dismiss or clear button while `aria-disabled` (a merged\n * `disabledFocusable`, or a consumer `aria-disabled`): dimmed like a disabled button, except while\n * it shows its focus ring, which `opacity` would dim too.\n */\nexport const mergedAriaDisabledClasses =\n  'aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100';\n\n/** What {@link unwrapButtonGlyph} unwrapped, for the slot's development warning. */\nexport type UnwrappedButton = 'a button element' | 'a slot object that renders a button';\n\n/** Whether `value` is a slot object (`{ as, children, … }`) that renders a `<button>` or `Button`. */\nfunction isButtonSlotObject(value: unknown): value is { children?: React.ReactNode } {\n  if (typeof value !== 'object' || value === null || React.isValidElement(value)) return false;\n  if (Symbol.iterator in value || !('as' in value)) return false;\n  const { as } = value as { as?: unknown };\n  return as === 'button' || as === Button;\n}\n\n/**\n * A glyph slot's value with a button unwrapped. A glyph inside a wired button is decorative and a\n * button cannot contain a button (C-SLOTS), so for a `<button>` or `Button` element, or a slot\n * object whose `as` is `'button'` or `Button`, the glyph is its `children` and its props are\n * dropped; any other value is the glyph as given. `button` says what was unwrapped (`null`:\n * nothing), so the component can warn once from an effect. A `Button` written in a Server\n * Component (a lazy client reference) is unwrapped too.\n *\n * @example\n * const { glyph, button } = unwrapButtonGlyph(menuIcon);\n */\nexport function unwrapButtonGlyph(slot: Slot<'span'> | undefined): {\n  glyph: Slot<'span'> | undefined;\n  button: UnwrappedButton | null;\n} {\n  // A slot object is never an element, so any slot value can be checked as a node.\n  const node = slot as React.ReactNode;\n  if (isElementOfType<{ children?: React.ReactNode }>(node, 'button', Button)) {\n    return { glyph: node.props.children, button: 'a button element' };\n  }\n  if (isButtonSlotObject(slot)) {\n    return { glyph: slot.children, button: 'a slot object that renders a button' };\n  }\n  return { glyph: slot, button: null };\n}\n"],"mappings":";;;;;;AAqCA,IAAaE,IAA4C,IAAI,IAAI,OAAO,KAAK;CAd3E,IAAI;CACJ,YAAY;CACZ,MAAM;CACN,MAAM;CACN,cAAc;CACd,mBAAmB;AASwD,CAAiB,CAAC;AAW/F,SAAgBC,EACd,GACA,GACA,GACoB;CACpB,OAAOC,MAAiB,UACtB,kBAAAJ,GAAA,EAAA,UAAA,CACGM,GACAC,CACD,EAAA,CAAA,IAEF,kBAAAP,GAAA,EAAA,UAAA,CACGO,GACAD,CACD,EAAA,CAAA;AAEN;AAGA,SAASE,EAAW,GAAsC;CAExD,AADAC,EAAM,eAAe,GACrBA,EAAM,gBAAgB;AACxB;AAWA,IAAaC,IAAkC;CAC7C,GAAGC,EAAuB,IAAM,EAAE,WAAW,GAAK,CAAC;CACnD,UAAU;CACV,SAASH;AACX,GAOaI,IACX;AAMF,SAASC,EAAmB,GAAyD;CAEnF,IADI,OAAOC,KAAU,aAAYA,KAAkBb,EAAM,eAAea,CAAK,KACzE,OAAO,YAAYA,KAAS,EAAE,QAAQA,IAAQ,OAAO;CACzD,IAAM,EAAE,UAAOA;CACf,OAAOC,MAAO,YAAYA,MAAOC;AACnC;AAaA,SAAgBC,EAAkB,GAGhC;CAEA,IAAMC,IAAOC;CAOb,OANIC,EAAgDF,GAAM,UAAUF,CAAM,IACjE;EAAE,OAAOE,EAAK,MAAM;EAAU,QAAQ;CAAmB,IAE9DL,EAAmBM,CAAI,IAClB;EAAE,OAAOA,EAAK;EAAU,QAAQ;CAAsC,IAExE;EAAE,OAAOA;EAAM,QAAQ;CAAK;AACrC"}
+{"version":3,"file":"Button.slots.mjs","names":["_Fragment","React","BUTTON_OWN_PROP_KEYS","placeButtonIcon","iconPosition","Fragment","content","icon","blockClick","event","MERGED_DISABLED_FOCUSABLE_PROPS","focusableDisabledProps","mergedAriaDisabledClasses","withPartClass","slotRendersContent","slot","resolved","resolveSlot","className","isButtonSlotObject","value","as","Button","unwrapButtonGlyph","node","isElementOfType"],"sources":["../../../src/components/button/Button.slots.tsx"],"sourcesContent":["/**\n * How the slots of other components treat a `<button>` or Wave `Button` passed to them (C-SLOTS).\n * Internal (not exported from the package).\n *\n * - Dismiss and clear slots (MessageBar `dismiss`, SearchBox `dismiss`, Tag `dismissIcon`) merge\n *   it into their own wired `<button>`. {@link BUTTON_OWN_PROP_KEYS} lists the Button props that\n *   must not reach that element; {@link placeButtonIcon} and {@link MERGED_DISABLED_FOCUSABLE_PROPS}\n *   give it what the Button would have done with `icon`, `iconPosition` and `disabledFocusable`.\n * - Glyph slots inside a wired button (SplitButton and MenuButton `menuIcon`, Combobox and\n *   TimePicker `expandIcon`) unwrap it: {@link unwrapButtonGlyph}.\n * - Variants that hand their `icon` to Button (ToggleButton, CompoundButton, MenuButton,\n *   SplitButton, the Toolbar buttons) add their part class to it: {@link withPartClass}.\n */\nimport * as React from 'react';\nimport { focusableDisabledProps } from '../../lib/aria';\nimport { isElementOfType } from '../../lib/children';\nimport { resolveSlot, slotRendersContent } from '../../lib/slot';\nimport type { Slot, SlotObject } from '../../lib/slot';\nimport { Button } from './Button';\nimport type { ButtonOwnProps } from './Button';\n\n/**\n * The keys of {@link BUTTON_OWN_PROP_KEYS}, checked against `ButtonOwnProps`: a new own prop of\n * `Button` does not compile until it is listed here, so it cannot leak onto a wired button.\n */\nconst buttonOwnPropKeys = {\n  as: true,\n  appearance: true,\n  size: true,\n  icon: true,\n  iconPosition: true,\n  disabledFocusable: true,\n} satisfies Record<Exclude<keyof ButtonOwnProps, 'disabled'> | 'as', true>;\n\n/**\n * The props of a Wave `Button` that are not DOM attributes: `as` and every own prop except\n * `disabled` (a native attribute, merged as one). A component that merges a `Button` into its own\n * `<button>` never spreads these onto it; it applies `icon`, `iconPosition` and\n * `disabledFocusable` itself.\n */\nexport const BUTTON_OWN_PROP_KEYS: ReadonlySet<string> = new Set(Object.keys(buttonOwnPropKeys));\n\n/**\n * The content of a wired button that merged a Wave `Button`: the Button's decorative icon before\n * its content, or after it for `iconPosition=\"after\"`, as `Button` renders it (DOM order, so it\n * follows the writing direction).\n *\n * @param icon The rendered icon (`aria-hidden`), or `null`.\n * @param content The Button's content.\n * @param iconPosition The Button's `iconPosition` (anything but `'after'` means before).\n */\nexport function placeButtonIcon(\n  icon: React.ReactNode,\n  content: React.ReactNode,\n  iconPosition: unknown,\n): React.ReactElement {\n  return iconPosition === 'after' ? (\n    <>\n      {content}\n      {icon}\n    </>\n  ) : (\n    <>\n      {icon}\n      {content}\n    </>\n  );\n}\n\n/** Prevents a click and stops it, as a natively disabled button dispatches none to ancestors. */\nfunction blockClick(event: React.MouseEvent<HTMLElement>) {\n  event.preventDefault();\n  event.stopPropagation();\n}\n\n/**\n * Spread last on a wired button that merged a Wave `Button` with `disabledFocusable`, so it\n * behaves as that Button would: `aria-disabled`, `data-disabled` and `data-disabled-focusable`\n * instead of the native `disabled` (overridden: `disabledFocusable` wins over `disabled`), so it\n * keeps its tab stop; its click is prevented and stopped, so neither the merged `onClick` nor the\n * component's own action runs and no ancestor click handler sees it. A native `<button>` also\n * activates through a click for Enter, Space and implicit form submission, so those are blocked\n * too.\n */\nexport const MERGED_DISABLED_FOCUSABLE_PROPS = {\n  ...focusableDisabledProps(true, { reachable: true }),\n  disabled: false,\n  onClick: blockClick,\n};\n\n/**\n * The disabled look of a wired dismiss or clear button while `aria-disabled` (a merged\n * `disabledFocusable`, or a consumer `aria-disabled`): dimmed like a disabled button, except while\n * it shows its focus ring, which `opacity` would dim too.\n */\nexport const mergedAriaDisabledClasses =\n  'aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:focus-visible:opacity-100';\n\n/**\n * `slot` as a slot object whose element also carries `className`: a variant's part class on the\n * icon that Button draws (`icon={withPartClass(icon, toggleButtonClassNames.icon)}`), so Button's\n * icon span carries both components' classes and Button needs no class prop of its own.\n * Shorthand content becomes the children of a `<span>` with the class; a slot object keeps its\n * element, attributes, `ref` and own classes, with `className` before them (so the consumer's\n * class still wins a conflict). A slot that renders nothing (`null`, `false`, `''`, `[]`, `<></>`)\n * is returned as it is, so no empty icon element renders; applying it twice adds both classes to\n * one element.\n */\nexport function withPartClass(\n  slot: Slot<'span'> | undefined,\n  className: string,\n): Slot<'span'> | undefined {\n  if (!slotRendersContent(slot)) return slot;\n  const resolved = resolveSlot(slot, 'span', className);\n  if (!resolved) return slot;\n  return {\n    ...resolved.props,\n    as: resolved.Component,\n    children: resolved.children,\n  } as SlotObject<'span'>;\n}\n\n/** What {@link unwrapButtonGlyph} unwrapped, for the slot's development warning. */\nexport type UnwrappedButton = 'a button element' | 'a slot object that renders a button';\n\n/** Whether `value` is a slot object (`{ as, children, … }`) that renders a `<button>` or `Button`. */\nfunction isButtonSlotObject(value: unknown): value is { children?: React.ReactNode } {\n  if (typeof value !== 'object' || value === null || React.isValidElement(value)) return false;\n  if (Symbol.iterator in value || !('as' in value)) return false;\n  const { as } = value as { as?: unknown };\n  return as === 'button' || as === Button;\n}\n\n/**\n * A glyph slot's value with a button unwrapped. A glyph inside a wired button is decorative and a\n * button cannot contain a button (C-SLOTS), so for a `<button>` or `Button` element, or a slot\n * object whose `as` is `'button'` or `Button`, the glyph is its `children` and its props are\n * dropped; any other value is the glyph as given. `button` says what was unwrapped (`null`:\n * nothing), so the component can warn once from an effect. A `Button` written in a Server\n * Component (a lazy client reference) is unwrapped too.\n *\n * @example\n * const { glyph, button } = unwrapButtonGlyph(menuIcon);\n */\nexport function unwrapButtonGlyph(slot: Slot<'span'> | undefined): {\n  glyph: Slot<'span'> | undefined;\n  button: UnwrappedButton | null;\n} {\n  // A slot object is never an element, so any slot value can be checked as a node.\n  const node = slot as React.ReactNode;\n  if (isElementOfType<{ children?: React.ReactNode }>(node, 'button', Button)) {\n    return { glyph: node.props.children, button: 'a button element' };\n  }\n  if (isButtonSlotObject(slot)) {\n    return { glyph: slot.children, button: 'a slot object that renders a button' };\n  }\n  return { glyph: slot, button: null };\n}\n"],"mappings":";;;;;;;AAwCA,IAAaE,IAA4C,IAAI,IAAI,OAAO,KAAK;CAd3E,IAAI;CACJ,YAAY;CACZ,MAAM;CACN,MAAM;CACN,cAAc;CACd,mBAAmB;AASwD,CAAiB,CAAC;AAW/F,SAAgBC,EACd,GACA,GACA,GACoB;CACpB,OAAOC,MAAiB,UACtB,kBAAAJ,GAAA,EAAA,UAAA,CACGM,GACAC,CACD,EAAA,CAAA,IAEF,kBAAAP,GAAA,EAAA,UAAA,CACGO,GACAD,CACD,EAAA,CAAA;AAEN;AAGA,SAASE,EAAW,GAAsC;CAExD,AADAC,EAAM,eAAe,GACrBA,EAAM,gBAAgB;AACxB;AAWA,IAAaC,IAAkC;CAC7C,GAAGC,EAAuB,IAAM,EAAE,WAAW,GAAK,CAAC;CACnD,UAAU;CACV,SAASH;AACX,GAOaI,IACX;AAYF,SAAgBC,EACd,GACA,GAC0B;CAC1B,IAAI,CAACC,EAAmBC,CAAI,GAAG,OAAOA;CACtC,IAAMC,IAAWC,EAAYF,GAAM,QAAQG,CAAS;CAEpD,OADKF,IACE;EACL,GAAGA,EAAS;EACZ,IAAIA,EAAS;EACb,UAAUA,EAAS;CACrB,IALsBD;AAMxB;AAMA,SAASI,EAAmB,GAAyD;CAEnF,IADI,OAAOC,KAAU,aAAYA,KAAkBnB,EAAM,eAAemB,CAAK,KACzE,OAAO,YAAYA,KAAS,EAAE,QAAQA,IAAQ,OAAO;CACzD,IAAM,EAAE,UAAOA;CACf,OAAOC,MAAO,YAAYA,MAAOC;AACnC;AAaA,SAAgBC,EAAkB,GAGhC;CAEA,IAAMC,IAAOT;CAOb,OANIU,EAAgDD,GAAM,UAAUF,CAAM,IACjE;EAAE,OAAOE,EAAK,MAAM;EAAU,QAAQ;CAAmB,IAE9DL,EAAmBJ,CAAI,IAClB;EAAE,OAAOA,EAAK;EAAU,QAAQ;CAAsC,IAExE;EAAE,OAAOA;EAAM,QAAQ;CAAK;AACrC"}

package/dist/components/button/CompoundButton.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/slot.cjs"),r=require("./Button.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o={"extra-small":`py-0.5`,small:`py-1`,medium:`py-2`,large:`py-3`,"extra-large":`py-4`},s={"extra-small":`size-6`,small:`size-8`,medium:`size-10`,large:`size-10`,"extra-large":`size-10`},c=r.Button,l=e=>{let{secondaryText:r,appearance:i=`outline`,size:l=`medium`,icon:u,iconPosition:d=`before`,className:f,children:p,...m}=e,h=n.materialiseSlotContent(p),g=n.materialiseSlotContent(r),_=n.slotRendersContent(g);if(!n.slotRendersContent(h)&&!_)return(0,a.jsx)(c,{...m,appearance:i,size:l,icon:u,iconPosition:d,className:f});let v=n.renderSlot(n.slotRendersContent(u)?u:void 0,`span`,t.cn(`inline-flex shrink-0 items-center justify-center [&>svg]:size-full`,s[l]),{"aria-hidden":!0}),y=(0,a.jsxs)(`span`,{"data-wave-compound-content":``,className:`flex min-w-0 flex-col items-start`,children:[(0,a.jsx)(`span`,{className:`font-bold`,children:h}),_&&(0,a.jsx)(`span`,{className:t.cn(`text-caption-1 font-normal`,i===`primary`?`text-primary-foreground`:`text-muted-foreground`),children:g})]});return(0,a.jsx)(c,{...m,appearance:i,size:l,className:t.cn(`h-auto items-center justify-start gap-3 text-start`,o[l],f),children:d===`after`?(0,a.jsxs)(a.Fragment,{children:[y,v]}):(0,a.jsxs)(a.Fragment,{children:[v,y]})})};l.displayName=`CompoundButton`,exports.CompoundButton=l;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/slot.cjs"),r=require("../../lib/classNames.cjs"),i=require("./Button.cjs"),a=require("./Button.slots.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("react/jsx-runtime");var c={"extra-small":`py-0.5`,small:`py-1`,medium:`py-2`,large:`py-3`,"extra-large":`py-4`},l={"extra-small":`size-6`,small:`size-8`,medium:`size-10`,large:`size-10`,"extra-large":`size-10`},u=i.Button,d=e=>{let{secondaryText:i,appearance:o=`outline`,size:d=`medium`,icon:f,iconPosition:p=`before`,className:m,children:h,...g}=e,_=n.materialiseSlotContent(h),v=n.materialiseSlotContent(i),y=n.slotRendersContent(v);if(!n.slotRendersContent(_)&&!y)return(0,s.jsx)(u,{...g,appearance:o,size:d,icon:a.withPartClass(f,r.compoundButtonClassNames.icon),iconPosition:p,className:t.cn(r.compoundButtonClassNames.root,m)});let b=n.renderSlot(n.slotRendersContent(f)?f:void 0,`span`,t.cn(r.buttonClassNames.icon,r.compoundButtonClassNames.icon,`inline-flex shrink-0 items-center justify-center [&>svg]:size-full`,l[d]),{"aria-hidden":!0}),x=(0,s.jsxs)(`span`,{"data-wave-compound-content":``,className:t.cn(r.compoundButtonClassNames.contentContainer,`flex min-w-0 flex-col items-start`),children:[(0,s.jsx)(`span`,{className:t.cn(r.compoundButtonClassNames.primaryText,`font-bold`),children:_}),y&&(0,s.jsx)(`span`,{className:t.cn(r.compoundButtonClassNames.secondaryText,`text-caption-1 font-normal`,o===`primary`?`text-primary-foreground`:`text-muted-foreground`),children:v})]});return(0,s.jsx)(u,{...g,appearance:o,size:d,className:t.cn(r.compoundButtonClassNames.root,`h-auto items-center justify-start gap-3 text-start`,c[d],m),children:p===`after`?(0,s.jsxs)(s.Fragment,{children:[x,b]}):(0,s.jsxs)(s.Fragment,{children:[b,x]})})};d.displayName=`CompoundButton`,exports.CompoundButton=d;
 //# sourceMappingURL=CompoundButton.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"CompoundButton.cjs","names":["Button","materialiseSlotContent","slotRendersContent","renderSlot","cn","_Fragment","require_runtime","require_cn","require_slot","require_Button","react","react_jsx_runtime","paddingClasses","iconBoxClasses","BaseButton","CompoundButton","rest","props","label","children","secondary","secondaryText","hasSecondary","iconElement","icon","size","content","appearance","className","iconPosition"],"sources":["../../../src/components/button/CompoundButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { materialiseSlotContent, renderSlot, slotRendersContent } from '../../lib/slot';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport type { Size, Appearance, IconPosition, Slot } from '../../lib/types';\nimport { Button } from './Button';\n\n/**\n * The CompoundButton's own props (the XOwnProps rule of `PolymorphicProps`: component-specific\n * props only). Every other prop comes from the rendered element (`as`).\n */\nexport interface CompoundButtonOwnProps {\n  /**\n   * Secondary descriptive text displayed below the main label (part of the accessible name).\n   * Content that renders nothing (`''`, `[]`, `<></>`) renders no second line.\n   */\n  secondaryText?: React.ReactNode;\n  /** Visual style variant.\n   * @default 'outline'\n   */\n  appearance?: Appearance;\n  /** Size affecting padding and font size.\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Disables the button. As with {@link Button}: a native `disabled` attribute for form controls\n   * (the default `button`); every other `as` gets `aria-disabled=\"true\"` and `tabIndex={-1}`, its\n   * activation is prevented and an `<a>` drops its `href`.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Marks the button unavailable but keeps it focusable and in the tab order (for a Tooltip\n   * that explains why, or a toolbar). Renders `aria-disabled=\"true\"`, `data-disabled` and\n   * `data-disabled-focusable` instead of the native `disabled` attribute; clicks, Enter, Space\n   * and implicit form submission are prevented, and your `onClick` is not called. Wins over\n   * `disabled` when both are set. In a `Toolbar` it stays in the arrow-key order.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n  /**\n   * Icon shown beside the two lines of text, in a 40px box (32px at `small`, 24px at\n   * `extra-small`) whose SVG fills it. Decorative (`aria-hidden`). A CompoundButton with only an\n   * icon (no label, no `secondaryText`) is an icon-only button: it looks and is checked like an\n   * icon-only `Button` and needs `aria-label`, `aria-labelledby` or `title`.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Where the icon renders: before the text column (the inline start) or after it (the inline\n   * end). Follows the writing direction through DOM order. Has no effect without an icon or on\n   * an icon-only button.\n   * @default 'before'\n   */\n  iconPosition?: IconPosition;\n}\n\n/**\n * Props of {@link CompoundButton} rendered as `C` (default `'button'`). `CompoundButtonProps`\n * without a type argument is the 0.4 name: the props of a CompoundButton rendered as a\n * `<button>`, including `ref`.\n */\nexport type CompoundButtonProps<C extends React.ElementType = 'button'> = PolymorphicProps<\n  C,\n  CompoundButtonOwnProps\n>;\n\n/**\n * Vertical padding per size. The height is content-sized (`h-auto` replaces Button's fixed\n * height); horizontal padding and font size come from Button.\n */\nconst paddingClasses: Record<Size, string> = {\n  'extra-small': 'py-0.5',\n  small: 'py-1',\n  medium: 'py-2',\n  large: 'py-3',\n  'extra-large': 'py-4',\n};\n\n/** The icon box per size (its SVG fills it): 24px at extra-small, 32px at small, else 40px. */\nconst iconBoxClasses: Record<Size, string> = {\n  'extra-small': 'size-6',\n  small: 'size-8',\n  medium: 'size-10',\n  large: 'size-10',\n  'extra-large': 'size-10',\n};\n\n/** The props the implementation reads, for any `as`. */\ntype CompoundButtonImplProps = CompoundButtonOwnProps & {\n  as?: React.ElementType;\n  className?: string;\n  children?: React.ReactNode;\n};\n\n/** `Button` widened to any element props, so `as` and the rest props pass through untyped. */\nconst BaseButton = Button as React.ElementType;\n\n/**\n * A button with a main label and a secondary line of text below it, and an optional icon beside\n * them. Built on {@link Button}: same appearances, sizes, token colors, `type=\"button\"` default,\n * `disabled`/`disabledFocusable` and polymorphic `as` behaviour (`as=\"a\"` renders a link; a\n * non-interactive `as` gets `role=\"button\"`, a tab stop and Enter/Space activation; `disabled`\n * becomes `aria-disabled` on non-form-control elements).\n *\n * - The text lines sit in a column wrapper (`span[data-wave-compound-content]`); the icon renders\n *   before or after it (`iconPosition`).\n * - With only an icon (no label and no `secondaryText`) it is an icon-only `Button`: square, with\n *   the icon-only sizing and name check.\n *\n * @example\n * <CompoundButton secondaryText=\"Opens your email client\">Send mail</CompoundButton>\n * <CompoundButton icon={<CalendarIcon />} secondaryText=\"Next Monday at 9:00\">\n *   Schedule\n * </CompoundButton>\n * <CompoundButton as=\"a\" href=\"/signup\" appearance=\"primary\" secondaryText=\"Free for 30 days\">\n *   Create account\n * </CompoundButton>\n */\nexport const CompoundButton: PolymorphicComponent<'button', CompoundButtonOwnProps> = (props) => {\n  const {\n    secondaryText,\n    appearance = 'outline',\n    size = 'medium',\n    icon,\n    iconPosition = 'before',\n    className,\n    children,\n    ...rest\n  } = props as CompoundButtonImplProps;\n  // Content that renders nothing (`''`, `[]`, `<></>`) counts as absent; a generator is read once\n  // by the check and its items render.\n  const label = materialiseSlotContent(children);\n  const secondary = materialiseSlotContent(secondaryText);\n  const hasSecondary = slotRendersContent(secondary);\n\n  // Without any text it is an icon-only (or empty) Button: Button's own sizing and name check.\n  if (!slotRendersContent(label) && !hasSecondary) {\n    return (\n      <BaseButton\n        {...rest}\n        appearance={appearance}\n        size={size}\n        icon={icon}\n        iconPosition={iconPosition}\n        className={className}\n      />\n    );\n  }\n\n  const iconElement = renderSlot(\n    slotRendersContent(icon) ? icon : undefined,\n    'span',\n    cn('inline-flex shrink-0 items-center justify-center [&>svg]:size-full', iconBoxClasses[size]),\n    { 'aria-hidden': true },\n  );\n  const content = (\n    <span data-wave-compound-content=\"\" className=\"flex min-w-0 flex-col items-start\">\n      <span className=\"font-bold\">{label}</span>\n      {hasSecondary && (\n        <span\n          className={cn(\n            'text-caption-1 font-normal',\n            appearance === 'primary' ? 'text-primary-foreground' : 'text-muted-foreground',\n          )}\n        >\n          {secondary}\n        </span>\n      )}\n    </span>\n  );\n\n  return (\n    <BaseButton\n      {...rest}\n      appearance={appearance}\n      size={size}\n      className={cn(\n        'h-auto items-center justify-start gap-3 text-start',\n        paddingClasses[size],\n        className,\n      )}\n    >\n      {iconPosition === 'after' ? (\n        <>\n          {content}\n          {iconElement}\n        </>\n      ) : (\n        <>\n          {iconElement}\n          {content}\n        </>\n      )}\n    </BaseButton>\n  );\n};\n\nCompoundButton.displayName = 'CompoundButton';\n"],"mappings":"wOAuEA,IAAMY,EAAuC,CAC3C,cAAe,SACf,MAAO,OACP,OAAQ,OACR,MAAO,OACP,cAAe,MACjB,EAGMC,EAAuC,CAC3C,cAAe,SACf,MAAO,SACP,OAAQ,UACR,MAAO,UACP,cAAe,SACjB,EAUMC,EAAad,EAAAA,OAuBNe,EAA0E,GAAU,CAC/F,GAAM,CACJ,gBACA,aAAa,UACb,OAAO,SACP,OACA,eAAe,SACf,YACA,WACA,GAAGC,GACDC,EAGEC,EAAQjB,EAAAA,uBAAuBkB,CAAQ,EACvCC,EAAYnB,EAAAA,uBAAuBoB,CAAa,EAChDC,EAAepB,EAAAA,mBAAmBkB,CAAS,EAGjD,GAAI,CAAClB,EAAAA,mBAAmBgB,CAAK,GAAK,CAACI,EACjC,OACE,EAAAX,EAAA,IAAA,CAACG,EAAD,CACE,GAAIE,EACQ,aACN,OACA,OACQ,eACH,WACZ,CAAA,EAIL,IAAMO,EAAcpB,EAAAA,WAClBD,EAAAA,mBAAmBsB,CAAI,EAAIA,EAAO,IAAA,GAClC,OACApB,EAAAA,GAAG,qEAAsES,EAAeY,EAAK,EAC7F,CAAE,cAAe,EAAK,CACxB,EACMC,GACJ,EAAAf,EAAA,KAAA,CAAC,OAAD,CAAM,6BAA2B,GAAG,UAAU,oCAA9C,SAAA,EACE,EAAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,YAAa,SAAAO,CAAY,CAAA,EACxCI,IACC,EAAAX,EAAA,IAAA,CAAC,OAAD,CACE,UAAWP,EAAAA,GACT,6BACAuB,IAAe,UAAY,0BAA4B,uBACzD,EAEC,SAAAP,CACG,CAAA,CAEJ,IAGR,OACE,EAAAT,EAAA,IAAA,CAACG,EAAD,CACE,GAAIE,EACQ,aACN,OACN,UAAWZ,EAAAA,GACT,qDACAQ,EAAea,GACfG,CACF,EAEC,SAAAC,IAAiB,SAChB,EAAAlB,EAAA,KAAA,CAAAN,EAAAA,SAAA,CAAA,SAAA,CACGqB,EACAH,CACD,CAAA,CAAA,GAEF,EAAAZ,EAAA,KAAA,CAAAN,EAAAA,SAAA,CAAA,SAAA,CACGkB,EACAG,CACD,CAAA,CAAA,CAEM,CAAA,CAEhB,EAEA,EAAe,YAAc"}
+{"version":3,"file":"CompoundButton.cjs","names":["Button","materialiseSlotContent","slotRendersContent","withPartClass","compoundButtonClassNames","cn","renderSlot","buttonClassNames","_Fragment","require_runtime","require_cn","require_slot","require_classNames","require_Button","require_Button_slots","react","react_jsx_runtime","paddingClasses","iconBoxClasses","BaseButton","CompoundButton","rest","props","label","children","secondary","secondaryText","hasSecondary","icon","className","iconElement","size","content","appearance","iconPosition"],"sources":["../../../src/components/button/CompoundButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { buttonClassNames, compoundButtonClassNames } from '../../lib/classNames';\nimport { materialiseSlotContent, renderSlot, slotRendersContent } from '../../lib/slot';\nimport type { PolymorphicComponent, PolymorphicProps } from '../../lib/polymorphic';\nimport type { Size, Appearance, IconPosition, Slot } from '../../lib/types';\nimport { Button } from './Button';\nimport { withPartClass } from './Button.slots';\n\n/**\n * The CompoundButton's own props (the XOwnProps rule of `PolymorphicProps`: component-specific\n * props only). Every other prop comes from the rendered element (`as`).\n */\nexport interface CompoundButtonOwnProps {\n  /**\n   * Secondary descriptive text displayed below the main label (part of the accessible name).\n   * Content that renders nothing (`''`, `[]`, `<></>`) renders no second line.\n   */\n  secondaryText?: React.ReactNode;\n  /** Visual style variant.\n   * @default 'outline'\n   */\n  appearance?: Appearance;\n  /** Size affecting padding and font size.\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Disables the button. As with {@link Button}: a native `disabled` attribute for form controls\n   * (the default `button`); every other `as` gets `aria-disabled=\"true\"` and `tabIndex={-1}`, its\n   * activation is prevented and an `<a>` drops its `href`.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Marks the button unavailable but keeps it focusable and in the tab order (for a Tooltip\n   * that explains why, or a toolbar). Renders `aria-disabled=\"true\"`, `data-disabled` and\n   * `data-disabled-focusable` instead of the native `disabled` attribute; clicks, Enter, Space\n   * and implicit form submission are prevented, and your `onClick` is not called. Wins over\n   * `disabled` when both are set. In a `Toolbar` it stays in the arrow-key order.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n  /**\n   * Icon shown beside the two lines of text, in a 40px box (32px at `small`, 24px at\n   * `extra-small`) whose SVG fills it. Decorative (`aria-hidden`). A CompoundButton with only an\n   * icon (no label, no `secondaryText`) is an icon-only button: it looks and is checked like an\n   * icon-only `Button` and needs `aria-label`, `aria-labelledby` or `title`.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Where the icon renders: before the text column (the inline start) or after it (the inline\n   * end). Follows the writing direction through DOM order. Has no effect without an icon or on\n   * an icon-only button.\n   * @default 'before'\n   */\n  iconPosition?: IconPosition;\n}\n\n/**\n * Props of {@link CompoundButton} rendered as `C` (default `'button'`). `CompoundButtonProps`\n * without a type argument is the 0.4 name: the props of a CompoundButton rendered as a\n * `<button>`, including `ref`.\n */\nexport type CompoundButtonProps<C extends React.ElementType = 'button'> = PolymorphicProps<\n  C,\n  CompoundButtonOwnProps\n>;\n\n/**\n * Vertical padding per size. The height is content-sized (`h-auto` replaces Button's fixed\n * height); horizontal padding and font size come from Button.\n */\nconst paddingClasses: Record<Size, string> = {\n  'extra-small': 'py-0.5',\n  small: 'py-1',\n  medium: 'py-2',\n  large: 'py-3',\n  'extra-large': 'py-4',\n};\n\n/** The icon box per size (its SVG fills it): 24px at extra-small, 32px at small, else 40px. */\nconst iconBoxClasses: Record<Size, string> = {\n  'extra-small': 'size-6',\n  small: 'size-8',\n  medium: 'size-10',\n  large: 'size-10',\n  'extra-large': 'size-10',\n};\n\n/** The props the implementation reads, for any `as`. */\ntype CompoundButtonImplProps = CompoundButtonOwnProps & {\n  as?: React.ElementType;\n  className?: string;\n  children?: React.ReactNode;\n};\n\n/** `Button` widened to any element props, so `as` and the rest props pass through untyped. */\nconst BaseButton = Button as React.ElementType;\n\n/**\n * A button with a main label and a secondary line of text below it, and an optional icon beside\n * them. Built on {@link Button}: same appearances, sizes, token colors, `type=\"button\"` default,\n * `disabled`/`disabledFocusable` and polymorphic `as` behaviour (`as=\"a\"` renders a link; a\n * non-interactive `as` gets `role=\"button\"`, a tab stop and Enter/Space activation; `disabled`\n * becomes `aria-disabled` on non-form-control elements).\n *\n * - The text lines sit in a column wrapper (`span[data-wave-compound-content]`); the icon renders\n *   before or after it (`iconPosition`).\n * - With only an icon (no label and no `secondaryText`) it is an icon-only `Button`: square, with\n *   the icon-only sizing and name check.\n *\n * @example\n * <CompoundButton secondaryText=\"Opens your email client\">Send mail</CompoundButton>\n * <CompoundButton icon={<CalendarIcon />} secondaryText=\"Next Monday at 9:00\">\n *   Schedule\n * </CompoundButton>\n * <CompoundButton as=\"a\" href=\"/signup\" appearance=\"primary\" secondaryText=\"Free for 30 days\">\n *   Create account\n * </CompoundButton>\n */\nexport const CompoundButton: PolymorphicComponent<'button', CompoundButtonOwnProps> = (props) => {\n  const {\n    secondaryText,\n    appearance = 'outline',\n    size = 'medium',\n    icon,\n    iconPosition = 'before',\n    className,\n    children,\n    ...rest\n  } = props as CompoundButtonImplProps;\n  // Content that renders nothing (`''`, `[]`, `<></>`) counts as absent; a generator is read once\n  // by the check and its items render.\n  const label = materialiseSlotContent(children);\n  const secondary = materialiseSlotContent(secondaryText);\n  const hasSecondary = slotRendersContent(secondary);\n\n  // Without any text it is an icon-only (or empty) Button: Button's own sizing and name check.\n  if (!slotRendersContent(label) && !hasSecondary) {\n    return (\n      <BaseButton\n        {...rest}\n        appearance={appearance}\n        size={size}\n        icon={withPartClass(icon, compoundButtonClassNames.icon)}\n        iconPosition={iconPosition}\n        className={cn(compoundButtonClassNames.root, className)}\n      />\n    );\n  }\n\n  const iconElement = renderSlot(\n    slotRendersContent(icon) ? icon : undefined,\n    'span',\n    cn(\n      buttonClassNames.icon,\n      compoundButtonClassNames.icon,\n      'inline-flex shrink-0 items-center justify-center [&>svg]:size-full',\n      iconBoxClasses[size],\n    ),\n    { 'aria-hidden': true },\n  );\n  const content = (\n    <span\n      data-wave-compound-content=\"\"\n      className={cn(compoundButtonClassNames.contentContainer, 'flex min-w-0 flex-col items-start')}\n    >\n      <span className={cn(compoundButtonClassNames.primaryText, 'font-bold')}>{label}</span>\n      {hasSecondary && (\n        <span\n          className={cn(\n            compoundButtonClassNames.secondaryText,\n            'text-caption-1 font-normal',\n            appearance === 'primary' ? 'text-primary-foreground' : 'text-muted-foreground',\n          )}\n        >\n          {secondary}\n        </span>\n      )}\n    </span>\n  );\n\n  return (\n    <BaseButton\n      {...rest}\n      appearance={appearance}\n      size={size}\n      className={cn(\n        compoundButtonClassNames.root,\n        'h-auto items-center justify-start gap-3 text-start',\n        paddingClasses[size],\n        className,\n      )}\n    >\n      {iconPosition === 'after' ? (\n        <>\n          {content}\n          {iconElement}\n        </>\n      ) : (\n        <>\n          {iconElement}\n          {content}\n        </>\n      )}\n    </BaseButton>\n  );\n};\n\nCompoundButton.displayName = 'CompoundButton';\n"],"mappings":"8SAyEA,IAAMiB,EAAuC,CAC3C,cAAe,SACf,MAAO,OACP,OAAQ,OACR,MAAO,OACP,cAAe,MACjB,EAGMC,EAAuC,CAC3C,cAAe,SACf,MAAO,SACP,OAAQ,UACR,MAAO,UACP,cAAe,SACjB,EAUMC,EAAanB,EAAAA,OAuBNoB,EAA0E,GAAU,CAC/F,GAAM,CACJ,gBACA,aAAa,UACb,OAAO,SACP,OACA,eAAe,SACf,YACA,WACA,GAAGC,GACDC,EAGEC,EAAQtB,EAAAA,uBAAuBuB,CAAQ,EACvCC,EAAYxB,EAAAA,uBAAuByB,CAAa,EAChDC,EAAezB,EAAAA,mBAAmBuB,CAAS,EAGjD,GAAI,CAACvB,EAAAA,mBAAmBqB,CAAK,GAAK,CAACI,EACjC,OACE,EAAAX,EAAA,IAAA,CAACG,EAAD,CACE,GAAIE,EACQ,aACN,OACN,KAAMlB,EAAAA,cAAcyB,EAAMxB,EAAAA,yBAAyB,IAAI,EACzC,eACd,UAAWC,EAAAA,GAAGD,EAAAA,yBAAyB,KAAMyB,CAAS,CACvD,CAAA,EAIL,IAAMC,EAAcxB,EAAAA,WAClBJ,EAAAA,mBAAmB0B,CAAI,EAAIA,EAAO,IAAA,GAClC,OACAvB,EAAAA,GACEE,EAAAA,iBAAiB,KACjBH,EAAAA,yBAAyB,KACzB,qEACAc,EAAea,EACjB,EACA,CAAE,cAAe,EAAK,CACxB,EACMC,GACJ,EAAAhB,EAAA,KAAA,CAAC,OAAD,CACE,6BAA2B,GAC3B,UAAWX,EAAAA,GAAGD,EAAAA,yBAAyB,iBAAkB,mCAAmC,EAF9F,SAAA,EAIE,EAAAY,EAAA,IAAA,CAAC,OAAD,CAAM,UAAWX,EAAAA,GAAGD,EAAAA,yBAAyB,YAAa,WAAW,EAAI,SAAAmB,CAAY,CAAA,EACpFI,IACC,EAAAX,EAAA,IAAA,CAAC,OAAD,CACE,UAAWX,EAAAA,GACTD,EAAAA,yBAAyB,cACzB,6BACA6B,IAAe,UAAY,0BAA4B,uBACzD,EAEC,SAAAR,CACG,CAAA,CAEJ,IAGR,OACE,EAAAT,EAAA,IAAA,CAACG,EAAD,CACE,GAAIE,EACQ,aACN,OACN,UAAWhB,EAAAA,GACTD,EAAAA,yBAAyB,KACzB,qDACAa,EAAec,GACfF,CACF,EAEC,SAAAK,IAAiB,SAChB,EAAAlB,EAAA,KAAA,CAAAR,EAAAA,SAAA,CAAA,SAAA,CACGwB,EACAF,CACD,CAAA,CAAA,GAEF,EAAAd,EAAA,KAAA,CAAAR,EAAAA,SAAA,CAAA,SAAA,CACGsB,EACAE,CACD,CAAA,CAAA,CAEM,CAAA,CAEhB,EAEA,EAAe,YAAc"}

package/dist/components/button/CompoundButton.mjs

@@ -1,53 +1,55 @@
 "use client";
 import { cn as e } from "../../lib/cn.mjs";
 import { materialiseSlotContent as t, renderSlot as n, slotRendersContent as r } from "../../lib/slot.mjs";
-import { Button as i } from "./Button.mjs";
+import { buttonClassNames as i, compoundButtonClassNames as a } from "../../lib/classNames.mjs";
+import { Button as o } from "./Button.mjs";
+import { withPartClass as s } from "./Button.slots.mjs";
 import "react";
-import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/button/CompoundButton.tsx
-var c = {
+var d = {
 	"extra-small": "py-0.5",
 	small: "py-1",
 	medium: "py-2",
 	large: "py-3",
 	"extra-large": "py-4"
-}, l = {
+}, f = {
 	"extra-small": "size-6",
 	small: "size-8",
 	medium: "size-10",
 	large: "size-10",
 	"extra-large": "size-10"
-}, u = i, d = (i) => {
-	let { secondaryText: d, appearance: f = "outline", size: p = "medium", icon: m, iconPosition: h = "before", className: g, children: _, ...v } = i, y = t(_), b = t(d), x = r(b);
-	if (!r(y) && !x) return /* @__PURE__ */ o(u, {
-		...v,
-		appearance: f,
-		size: p,
-		icon: m,
-		iconPosition: h,
-		className: g
+}, p = o, m = (o) => {
+	let { secondaryText: m, appearance: h = "outline", size: g = "medium", icon: _, iconPosition: v = "before", className: y, children: b, ...x } = o, S = t(b), C = t(m), w = r(C);
+	if (!r(S) && !w) return /* @__PURE__ */ l(p, {
+		...x,
+		appearance: h,
+		size: g,
+		icon: s(_, a.icon),
+		iconPosition: v,
+		className: e(a.root, y)
 	});
-	let S = n(r(m) ? m : void 0, "span", e("inline-flex shrink-0 items-center justify-center [&>svg]:size-full", l[p]), { "aria-hidden": !0 }), C = /* @__PURE__ */ s("span", {
+	let T = n(r(_) ? _ : void 0, "span", e(i.icon, a.icon, "inline-flex shrink-0 items-center justify-center [&>svg]:size-full", f[g]), { "aria-hidden": !0 }), E = /* @__PURE__ */ u("span", {
 		"data-wave-compound-content": "",
-		className: "flex min-w-0 flex-col items-start",
-		children: [/* @__PURE__ */ o("span", {
-			className: "font-bold",
-			children: y
-		}), x && /* @__PURE__ */ o("span", {
-			className: e("text-caption-1 font-normal", f === "primary" ? "text-primary-foreground" : "text-muted-foreground"),
-			children: b
+		className: e(a.contentContainer, "flex min-w-0 flex-col items-start"),
+		children: [/* @__PURE__ */ l("span", {
+			className: e(a.primaryText, "font-bold"),
+			children: S
+		}), w && /* @__PURE__ */ l("span", {
+			className: e(a.secondaryText, "text-caption-1 font-normal", h === "primary" ? "text-primary-foreground" : "text-muted-foreground"),
+			children: C
 		})]
 	});
-	return /* @__PURE__ */ o(u, {
-		...v,
-		appearance: f,
-		size: p,
-		className: e("h-auto items-center justify-start gap-3 text-start", c[p], g),
-		children: h === "after" ? /* @__PURE__ */ s(a, { children: [C, S] }) : /* @__PURE__ */ s(a, { children: [S, C] })
+	return /* @__PURE__ */ l(p, {
+		...x,
+		appearance: h,
+		size: g,
+		className: e(a.root, "h-auto items-center justify-start gap-3 text-start", d[g], y),
+		children: v === "after" ? /* @__PURE__ */ u(c, { children: [E, T] }) : /* @__PURE__ */ u(c, { children: [T, E] })
 	});
 };
-d.displayName = "CompoundButton";
+m.displayName = "CompoundButton";
 //#endregion
-export { d as CompoundButton };
+export { m as CompoundButton };
 
 //# sourceMappingURL=CompoundButton.mjs.map