@viax.io/uxm 4.46.0 → 4.48.0

package/dist/ui/list/list.js

@@ -1,5 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cn } from "../../helpers/index.js";
+import { Icon } from "../icon/index.js";
 import { IconTile } from "../icon-tile/index.js";
 const LIST_ITEM_ICON_TILE_STYLE = {
   "--uxm-icon-tile-bg": "var(--uxm-list-item-icon-bg, var(--color-accent))",
@@ -33,16 +34,38 @@ function ListItem({
   active,
   disabled,
   href,
+  selected,
+  onSelectedChange,
   className,
   ...rest
 }) {
+  const isSelectable = selected !== void 0 || onSelectedChange !== void 0;
   const classes = cn(
     "uxm-list-item",
     active && "uxm-list-item--active",
+    isSelectable && "uxm-list-item--selectable",
     className
   );
-  const isInteractive = interactive || href !== void 0;
+  const isInteractive = (interactive || href !== void 0) && !isSelectable;
+  if (process.env.NODE_ENV !== "production" && isSelectable && (interactive || href !== void 0)) {
+    console.warn(
+      "[uxm] ListItem: `selected`/`onSelectedChange` cannot be combined with `interactive`/`href` \u2014 a row is either a navigate/activate row or a member of a checkable set. Selectable mode wins."
+    );
+  }
   const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    isSelectable && /* @__PURE__ */ jsxs("span", { className: "uxm-list-item__check", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "checkbox",
+          className: "uxm-checkbox__input",
+          checked: selected ?? false,
+          disabled,
+          onChange: (e) => onSelectedChange?.(e.target.checked, e)
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "uxm-checkbox__box", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { glyph: "check", strokeWidth: 3 }) })
+    ] }),
     media ? /* @__PURE__ */ jsx("span", { className: "uxm-list-item__media", style: LIST_ITEM_MEDIA_STYLE, children: media }) : icon && /* @__PURE__ */ jsx(IconTile, { className: "uxm-list-item__icon", style: LIST_ITEM_ICON_TILE_STYLE, children: icon }),
     /* @__PURE__ */ jsxs("span", { className: "uxm-list-item__content", children: [
       /* @__PURE__ */ jsx("span", { className: "uxm-list-item__title", children }),
@@ -50,6 +73,17 @@ function ListItem({
     ] }),
     trailing && /* @__PURE__ */ jsx("span", { className: "uxm-list-item__trailing", children: trailing })
   ] });
+  if (isSelectable) {
+    return /* @__PURE__ */ jsx(
+      "label",
+      {
+        className: classes,
+        ...disabled ? { "aria-disabled": true } : {},
+        ...rest,
+        children: inner
+      }
+    );
+  }
   if (href !== void 0) {
     return /* @__PURE__ */ jsx(
       "a",

package/dist/ui/list/list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/list/list.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport { IconTile } from '../icon-tile';\n\nimport type {\n  AnchorHTMLAttributes,\n  ButtonHTMLAttributes,\n  CSSProperties,\n  HTMLAttributes,\n  ReactNode,\n} from 'react';\n\n/**\n * Forward the studio icon knobs (projected as `--uxm-list-item-icon-*` on the\n * row) into the `IconTile` atom's own var namespace, so the accent-tile\n * pattern lives in one place — the `IconTile` atom — instead of being\n * re-implemented in `list.scss`. The glyph tracks the tile at 0.6× (the\n * row-icon proportion used across the design system). Kept as a module\n * constant so the studio preview can reuse the exact same forwarding.\n */\nexport const LIST_ITEM_ICON_TILE_STYLE = {\n  '--uxm-icon-tile-bg': 'var(--uxm-list-item-icon-bg, var(--color-accent))',\n  '--uxm-icon-tile-color': 'var(--uxm-list-item-icon-color, var(--color-card))',\n  '--uxm-icon-tile-size': 'var(--uxm-list-item-icon-size, 24px)',\n  '--uxm-icon-tile-radius': 'var(--uxm-list-item-icon-radius, 6px)',\n  '--uxm-icon-tile-icon-size': 'calc(var(--uxm-list-item-icon-size, 24px) * 0.6)',\n} as CSSProperties;\n\n/**\n * Forward the row's media-size knob into the size vars of the atoms that\n * plausibly fill the `media` slot, so each one sizes itself through its OWN\n * machinery — frame, border, radius and inner glyph / initials all scale with\n * it — instead of being stretched from the outside. Mirrors\n * `LIST_ITEM_ICON_TILE_STYLE` above, and is the only order-independent fix:\n * both `Thumbnail` (`.uxm-thumbnail`, 0,1,0 but imported AFTER list in\n * `styles.css`) and `Avatar` (double-class size presets at 0,2,0, deliberately\n * so per its own note) would otherwise win or lose the cascade against a slot\n * rule purely on stylesheet order. The generic `> *` stretch in `list.scss`\n * stays as the fallback for a bare `<img>` / `<svg>` or any atom with no size\n * var of its own; both mechanisms resolve to the same number. Kept as a module\n * constant so the studio preview can reuse the exact same forwarding.\n */\nexport const LIST_ITEM_MEDIA_STYLE = {\n  '--uxm-thumbnail-size': 'var(--uxm-list-item-media-size, 36px)',\n  '--uxm-avatar-size': 'var(--uxm-list-item-media-size, 36px)',\n  '--uxm-avatar-small-size': 'var(--uxm-list-item-media-size, 36px)',\n} as CSSProperties;\n\n/** Container presentation. See `ListProps.variant`. */\nexport type ListVariant = 'card' | 'plain';\n\nexport interface ListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  /**\n   * Container presentation. `card` (default) keeps the bordered, rounded\n   * surface — right for a free-standing list on a page ground. `plain` drops\n   * the background, border and radius for a list that is ALREADY inside a\n   * surface (a flexpane body, a card body, a disclosure section), where a card\n   * container reads as a card inside a card.\n   *\n   * `plain` also releases `overflow` to `visible`. The card has to clip so rows\n   * cannot spill past its radius; with no radius there is nothing to clip to,\n   * and `hidden` would only crop what a row deliberately renders OUTSIDE the\n   * container box — an overhanging corner control, a focus ring with a positive\n   * offset. Clipped, those are neither painted nor hit-testable.\n   *\n   * Row styling is untouched — every `--uxm-list-item-*` knob behaves\n   * identically in both.\n   */\n  variant?: ListVariant;\n}\n\nexport function List({ children, className, variant = 'card', ...rest }: ListProps) {\n  return (\n    <div\n      className={cn('uxm-list', variant === 'plain' && 'uxm-list--plain', className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\n/**\n * ListItem renders as one of three element types depending on `interactive`:\n *   - `<div>` (default) — display row, no state styling, not focusable\n *   - `<button>` — interactive without navigation; emits click events\n *   - `<a>` — interactive with navigation; pass `href`\n *\n * The state knobs (hover / focus / active / disabled) in the `list-item`\n * registry only paint when the row renders as button or anchor — the CSS\n * scopes them to element-type selectors so display-only divs stay inert.\n */\nexport interface ListItemProps {\n  /** Leading icon — typically <Icon ... /> from @modo/uxm/ui. */\n  icon?: ReactNode;\n  /** Leading media rendered as-is (a <Thumbnail>, <img>, avatar…) — NOT\n   *  wrapped in the accent `IconTile` the `icon` slot uses. Mutually\n   *  exclusive with `icon`: when both are passed, `media` wins. The slot\n   *  box is `--uxm-list-item-media-size` (36px) square; a `Thumbnail` or\n   *  `Avatar` gets that size forwarded into its own size var (see\n   *  `LIST_ITEM_MEDIA_STYLE`) and anything else is stretched to fill, so\n   *  rows stay on one leading grid either way.\n   *\n   *  Prefer decorative media in a row whose title already names the thing\n   *  (`alt=\"\"`): the slot sits INSIDE the row's `<button>`/`<a>`, so a\n   *  described image is concatenated into the row's accessible name.\n   *\n   *  Note: this shadows the native `media` attribute of `<a>` for the\n   *  anchor form of the row — pass it through `className`/a wrapper if\n   *  you genuinely need the HTML attribute. */\n  media?: ReactNode;\n  /** Secondary text shown under the title (e.g. a value). */\n  value?: ReactNode;\n  /** Trailing content — meta text, chevron icon, or a custom node. */\n  trailing?: ReactNode;\n  /** Primary label. */\n  children: ReactNode;\n  /** Render as a clickable element. When false (default), renders as a\n   *  static `<div>` with no state styling. When true, renders as\n   *  `<button>` (or `<a>` if `href` is also passed). */\n  interactive?: boolean;\n  /** Show the selected/active treatment (only meaningful when\n   *  `interactive` is true). Adds the `--active` modifier class. */\n  active?: boolean;\n  /** Disable interaction — only meaningful when `interactive`.\n   *  Forwards to the native `disabled` attribute on `<button>`, or\n   *  sets `aria-disabled` on `<a>`. */\n  disabled?: boolean;\n  /** Navigate to this URL on click. Implies `interactive`. */\n  href?: string;\n  className?: string;\n}\n\ntype AnchorRest = Omit<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  keyof ListItemProps\n>;\ntype ButtonRest = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  keyof ListItemProps\n>;\ntype DivRest = Omit<HTMLAttributes<HTMLDivElement>, keyof ListItemProps>;\n\nexport function ListItem({\n  icon,\n  media,\n  value,\n  trailing,\n  children,\n  interactive,\n  active,\n  disabled,\n  href,\n  className,\n  ...rest\n}: ListItemProps & (AnchorRest | ButtonRest | DivRest)) {\n  const classes = cn(\n    'uxm-list-item',\n    active && 'uxm-list-item--active',\n    className,\n  );\n  const isInteractive = interactive || href !== undefined;\n  const inner = (\n    <>\n      {/* Leading slot. `media` renders as-is so a product photo / avatar\n          keeps its own frame; `icon` keeps the accent IconTile treatment.\n          `media` wins when both are passed — a row has one leading grid\n          position, and the as-is rendering is the more specific intent. */}\n      {media ? (\n        <span className=\"uxm-list-item__media\" style={LIST_ITEM_MEDIA_STYLE}>\n          {media}\n        </span>\n      ) : (\n        icon && (\n          <IconTile className=\"uxm-list-item__icon\" style={LIST_ITEM_ICON_TILE_STYLE}>\n            {icon}\n          </IconTile>\n        )\n      )}\n      <span className=\"uxm-list-item__content\">\n        <span className=\"uxm-list-item__title\">{children}</span>\n        {value !== undefined && value !== null && (\n          <span className=\"uxm-list-item__value\">{value}</span>\n        )}\n      </span>\n      {trailing && <span className=\"uxm-list-item__trailing\">{trailing}</span>}\n    </>\n  );\n\n  if (href !== undefined) {\n    return (\n      <a\n        href={href}\n        className={classes}\n        {...(disabled ? { 'aria-disabled': true as const, tabIndex: -1 } : {})}\n        {...(rest as AnchorRest)}\n      >\n        {inner}\n      </a>\n    );\n  }\n  if (isInteractive) {\n    return (\n      <button\n        type=\"button\"\n        className={classes}\n        disabled={disabled}\n        aria-pressed={active}\n        {...(rest as ButtonRest)}\n      >\n        {inner}\n      </button>\n    );\n  }\n  return (\n    <div\n      className={classes}\n      {...(disabled ? { 'aria-disabled': true as const } : {})}\n      {...(rest as DivRest)}\n    >\n      {inner}\n    </div>\n  );\n}\n"],"mappings":"AA0EI,SA0FA,UA1FA,KA0GE,YA1GF;AA1EJ,SAAS,UAAU;AAEnB,SAAS,gBAAgB;AAkBlB,MAAM,4BAA4B;AAAA,EACvC,sBAAsB;AAAA,EACtB,yBAAyB;AAAA,EACzB,wBAAwB;AAAA,EACxB,0BAA0B;AAAA,EAC1B,6BAA6B;AAC/B;AAgBO,MAAM,wBAAwB;AAAA,EACnC,wBAAwB;AAAA,EACxB,qBAAqB;AAAA,EACrB,2BAA2B;AAC7B;AA0BO,SAAS,KAAK,EAAE,UAAU,WAAW,UAAU,QAAQ,GAAG,KAAK,GAAc;AAClF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,YAAY,YAAY,WAAW,mBAAmB,SAAS;AAAA,MAC5E,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AA+DO,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwD;AACtD,QAAM,UAAU;AAAA,IACd;AAAA,IACA,UAAU;AAAA,IACV;AAAA,EACF;AACA,QAAM,gBAAgB,eAAe,SAAS;AAC9C,QAAM,QACJ,iCAKG;AAAA,YACC,oBAAC,UAAK,WAAU,wBAAuB,OAAO,uBAC3C,iBACH,IAEA,QACE,oBAAC,YAAS,WAAU,uBAAsB,OAAO,2BAC9C,gBACH;AAAA,IAGJ,qBAAC,UAAK,WAAU,0BACd;AAAA,0BAAC,UAAK,WAAU,wBAAwB,UAAS;AAAA,MAChD,UAAU,UAAa,UAAU,QAChC,oBAAC,UAAK,WAAU,wBAAwB,iBAAM;AAAA,OAElD;AAAA,IACC,YAAY,oBAAC,UAAK,WAAU,2BAA2B,oBAAS;AAAA,KACnE;AAGF,MAAI,SAAS,QAAW;AACtB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,QACV,GAAI,WAAW,EAAE,iBAAiB,MAAe,UAAU,GAAG,IAAI,CAAC;AAAA,QACnE,GAAI;AAAA,QAEJ;AAAA;AAAA,IACH;AAAA,EAEJ;AACA,MAAI,eAAe;AACjB,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAW;AAAA,QACX;AAAA,QACA,gBAAc;AAAA,QACb,GAAI;AAAA,QAEJ;AAAA;AAAA,IACH;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACV,GAAI,WAAW,EAAE,iBAAiB,KAAc,IAAI,CAAC;AAAA,MACrD,GAAI;AAAA,MAEJ;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/ui/list/list.tsx"],"sourcesContent":["import { cn } from '@/helpers';\n\nimport { Icon } from '../icon';\nimport { IconTile } from '../icon-tile';\n\nimport type {\n  AnchorHTMLAttributes,\n  ChangeEvent,\n  ButtonHTMLAttributes,\n  CSSProperties,\n  HTMLAttributes,\n  LabelHTMLAttributes,\n  ReactNode,\n} from 'react';\n\n/**\n * Forward the studio icon knobs (projected as `--uxm-list-item-icon-*` on the\n * row) into the `IconTile` atom's own var namespace, so the accent-tile\n * pattern lives in one place — the `IconTile` atom — instead of being\n * re-implemented in `list.scss`. The glyph tracks the tile at 0.6× (the\n * row-icon proportion used across the design system). Kept as a module\n * constant so the studio preview can reuse the exact same forwarding.\n */\nexport const LIST_ITEM_ICON_TILE_STYLE = {\n  '--uxm-icon-tile-bg': 'var(--uxm-list-item-icon-bg, var(--color-accent))',\n  '--uxm-icon-tile-color': 'var(--uxm-list-item-icon-color, var(--color-card))',\n  '--uxm-icon-tile-size': 'var(--uxm-list-item-icon-size, 24px)',\n  '--uxm-icon-tile-radius': 'var(--uxm-list-item-icon-radius, 6px)',\n  '--uxm-icon-tile-icon-size': 'calc(var(--uxm-list-item-icon-size, 24px) * 0.6)',\n} as CSSProperties;\n\n/**\n * Forward the row's media-size knob into the size vars of the atoms that\n * plausibly fill the `media` slot, so each one sizes itself through its OWN\n * machinery — frame, border, radius and inner glyph / initials all scale with\n * it — instead of being stretched from the outside. Mirrors\n * `LIST_ITEM_ICON_TILE_STYLE` above, and is the only order-independent fix:\n * both `Thumbnail` (`.uxm-thumbnail`, 0,1,0 but imported AFTER list in\n * `styles.css`) and `Avatar` (double-class size presets at 0,2,0, deliberately\n * so per its own note) would otherwise win or lose the cascade against a slot\n * rule purely on stylesheet order. The generic `> *` stretch in `list.scss`\n * stays as the fallback for a bare `<img>` / `<svg>` or any atom with no size\n * var of its own; both mechanisms resolve to the same number. Kept as a module\n * constant so the studio preview can reuse the exact same forwarding.\n */\nexport const LIST_ITEM_MEDIA_STYLE = {\n  '--uxm-thumbnail-size': 'var(--uxm-list-item-media-size, 36px)',\n  '--uxm-avatar-size': 'var(--uxm-list-item-media-size, 36px)',\n  '--uxm-avatar-small-size': 'var(--uxm-list-item-media-size, 36px)',\n} as CSSProperties;\n\n/** Container presentation. See `ListProps.variant`. */\nexport type ListVariant = 'card' | 'plain';\n\nexport interface ListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  /**\n   * Container presentation. `card` (default) keeps the bordered, rounded\n   * surface — right for a free-standing list on a page ground. `plain` drops\n   * the background, border and radius for a list that is ALREADY inside a\n   * surface (a flexpane body, a card body, a disclosure section), where a card\n   * container reads as a card inside a card.\n   *\n   * `plain` also releases `overflow` to `visible`. The card has to clip so rows\n   * cannot spill past its radius; with no radius there is nothing to clip to,\n   * and `hidden` would only crop what a row deliberately renders OUTSIDE the\n   * container box — an overhanging corner control, a focus ring with a positive\n   * offset. Clipped, those are neither painted nor hit-testable.\n   *\n   * Row styling is untouched — every `--uxm-list-item-*` knob behaves\n   * identically in both.\n   */\n  variant?: ListVariant;\n}\n\nexport function List({ children, className, variant = 'card', ...rest }: ListProps) {\n  return (\n    <div\n      className={cn('uxm-list', variant === 'plain' && 'uxm-list--plain', className)}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n}\n\n/**\n * ListItem renders as one of three element types depending on `interactive`:\n *   - `<div>` (default) — display row, no state styling, not focusable\n *   - `<button>` — interactive without navigation; emits click events\n *   - `<a>` — interactive with navigation; pass `href`\n *\n * The state knobs (hover / focus / active / disabled) in the `list-item`\n * registry only paint when the row renders as button or anchor — the CSS\n * scopes them to element-type selectors so display-only divs stay inert.\n */\nexport interface ListItemProps {\n  /** Leading icon — typically <Icon ... /> from @modo/uxm/ui. */\n  icon?: ReactNode;\n  /** Leading media rendered as-is (a <Thumbnail>, <img>, avatar…) — NOT\n   *  wrapped in the accent `IconTile` the `icon` slot uses. Mutually\n   *  exclusive with `icon`: when both are passed, `media` wins. The slot\n   *  box is `--uxm-list-item-media-size` (36px) square; a `Thumbnail` or\n   *  `Avatar` gets that size forwarded into its own size var (see\n   *  `LIST_ITEM_MEDIA_STYLE`) and anything else is stretched to fill, so\n   *  rows stay on one leading grid either way.\n   *\n   *  Prefer decorative media in a row whose title already names the thing\n   *  (`alt=\"\"`): the slot sits INSIDE the row's `<button>`/`<a>`, so a\n   *  described image is concatenated into the row's accessible name.\n   *\n   *  Note: this shadows the native `media` attribute of `<a>` for the\n   *  anchor form of the row — pass it through `className`/a wrapper if\n   *  you genuinely need the HTML attribute. */\n  media?: ReactNode;\n  /** Secondary text shown under the title (e.g. a value). */\n  value?: ReactNode;\n  /** Trailing content — meta text, chevron icon, or a custom node. */\n  trailing?: ReactNode;\n  /** Primary label. */\n  children: ReactNode;\n  /** Render as a clickable element. When false (default), renders as a\n   *  static `<div>` with no state styling. When true, renders as\n   *  `<button>` (or `<a>` if `href` is also passed). */\n  interactive?: boolean;\n  /** Show the selected/active treatment (only meaningful when\n   *  `interactive` is true). Adds the `--active` modifier class. */\n  active?: boolean;\n  /** Disable interaction — only meaningful when `interactive`.\n   *  Forwards to the native `disabled` attribute on `<button>`, or\n   *  sets `aria-disabled` on `<a>`. */\n  disabled?: boolean;\n  /** Navigate to this URL on click. Implies `interactive`. */\n  href?: string;\n  /**\n   * Controlled selection state. Passing `selected` OR `onSelectedChange` puts\n   * the row in **selectable** mode: it renders as a `<label>` around a real\n   * checkbox, so activating anywhere on the row toggles it natively — the\n   * shape for \"tick several, then commit\" lists (a product picker, recipients,\n   * file selection).\n   *\n   * Distinct from `active`, which is a *toggle button* (`aria-pressed`) —\n   * the wrong semantic for a member of a checkable set. The two can still\n   * combine if a consumer wants the row-fill as well as the tick.\n   *\n   * Mutually exclusive with `interactive` / `href`: a row either navigates or\n   * is ticked, and selectable mode wins if both are passed (dev warning).\n   */\n  selected?: boolean;\n  /** Toggle handler for selectable mode; `next` is the new checked state. */\n  onSelectedChange?: (next: boolean, e: ChangeEvent<HTMLInputElement>) => void;\n  className?: string;\n}\n\ntype AnchorRest = Omit<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  keyof ListItemProps\n>;\ntype ButtonRest = Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  keyof ListItemProps\n>;\ntype DivRest = Omit<HTMLAttributes<HTMLDivElement>, keyof ListItemProps>;\n// Selectable rows render a <label>, whose handlers are typed to\n// HTMLLabelElement — a DivRest cast does not fit it.\ntype LabelRest = Omit<LabelHTMLAttributes<HTMLLabelElement>, keyof ListItemProps>;\n\nexport function ListItem({\n  icon,\n  media,\n  value,\n  trailing,\n  children,\n  interactive,\n  active,\n  disabled,\n  href,\n  selected,\n  onSelectedChange,\n  className,\n  ...rest\n}: ListItemProps & (AnchorRest | ButtonRest | DivRest | LabelRest)) {\n  const isSelectable = selected !== undefined || onSelectedChange !== undefined;\n  const classes = cn(\n    'uxm-list-item',\n    active && 'uxm-list-item--active',\n    isSelectable && 'uxm-list-item--selectable',\n    className,\n  );\n  const isInteractive = (interactive || href !== undefined) && !isSelectable;\n\n  if (\n    process.env.NODE_ENV !== 'production' &&\n    isSelectable &&\n    (interactive || href !== undefined)\n  ) {\n     \n    console.warn(\n      '[uxm] ListItem: `selected`/`onSelectedChange` cannot be combined with `interactive`/`href` — ' +\n        'a row is either a navigate/activate row or a member of a checkable set. Selectable mode wins.',\n    );\n  }\n  const inner = (\n    <>\n      {/* Selection affordance, before the leading slot. It renders `Checkbox`'s\n          OWN classes rather than nesting the component: `Checkbox` is itself a\n          `<label>`, and a `<label>` inside the row `<label>` is invalid HTML\n          (Chrome tolerates it — measured, one change event either way — but the\n          spec does not, and assistive tech is not guaranteed to). Reusing the\n          classes keeps the box pixel-identical and re-tints with the checkbox's\n          own knobs, at the cost of a coupling to its internals: `list-item.test`\n          asserts these classes still match what `Checkbox` renders, so a change\n          there fails here rather than shipping an unstyled box. */}\n      {isSelectable && (\n        <span className=\"uxm-list-item__check\">\n          <input\n            type=\"checkbox\"\n            className=\"uxm-checkbox__input\"\n            // `?? false`, never a bare `undefined`: selectable mode is\n            // documented as controlled, and a consumer deriving it from async\n            // data (`selected={data?.picked.includes(id)}`) would otherwise\n            // hand React an uncontrolled input that turns controlled the\n            // moment the data lands — React warns, and until it does the DOM\n            // owns the checked state, so a tick made while loading is taken\n            // over instead of reported. `RadioGroup` pins its own mode for the\n            // component's lifetime for exactly this reason.\n            checked={selected ?? false}\n            disabled={disabled}\n            onChange={(e) => onSelectedChange?.(e.target.checked, e)}\n          />\n          <span className=\"uxm-checkbox__box\" aria-hidden=\"true\">\n            <Icon glyph=\"check\" strokeWidth={3} />\n          </span>\n        </span>\n      )}\n      {/* Leading slot. `media` renders as-is so a product photo / avatar\n          keeps its own frame; `icon` keeps the accent IconTile treatment.\n          `media` wins when both are passed — a row has one leading grid\n          position, and the as-is rendering is the more specific intent. */}\n      {media ? (\n        <span className=\"uxm-list-item__media\" style={LIST_ITEM_MEDIA_STYLE}>\n          {media}\n        </span>\n      ) : (\n        icon && (\n          <IconTile className=\"uxm-list-item__icon\" style={LIST_ITEM_ICON_TILE_STYLE}>\n            {icon}\n          </IconTile>\n        )\n      )}\n      <span className=\"uxm-list-item__content\">\n        <span className=\"uxm-list-item__title\">{children}</span>\n        {value !== undefined && value !== null && (\n          <span className=\"uxm-list-item__value\">{value}</span>\n        )}\n      </span>\n      {trailing && <span className=\"uxm-list-item__trailing\">{trailing}</span>}\n    </>\n  );\n\n  if (isSelectable) {\n    // A real `<label>`: whole-row activation is the browser's, not a click\n    // handler's, so it works for pointer and keyboard and needs no ARIA of its\n    // own. The row is NOT `aria-pressed` — that is a toggle button, the wrong\n    // semantic for one member of a checkable set.\n    return (\n      <label\n        className={classes}\n        {...(disabled ? { 'aria-disabled': true as const } : {})}\n        {...(rest as LabelRest)}\n      >\n        {inner}\n      </label>\n    );\n  }\n\n  if (href !== undefined) {\n    return (\n      <a\n        href={href}\n        className={classes}\n        {...(disabled ? { 'aria-disabled': true as const, tabIndex: -1 } : {})}\n        {...(rest as AnchorRest)}\n      >\n        {inner}\n      </a>\n    );\n  }\n  if (isInteractive) {\n    return (\n      <button\n        type=\"button\"\n        className={classes}\n        disabled={disabled}\n        aria-pressed={active}\n        {...(rest as ButtonRest)}\n      >\n        {inner}\n      </button>\n    );\n  }\n  return (\n    <div\n      className={classes}\n      {...(disabled ? { 'aria-disabled': true as const } : {})}\n      {...(rest as DivRest)}\n    >\n      {inner}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/ui/menu/index.cjs

@@ -16,8 +16,10 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var menu_exports = {};
 module.exports = __toCommonJS(menu_exports);
 __reExport(menu_exports, require("./menu.cjs"), module.exports);
+__reExport(menu_exports, require("./menu-button.cjs"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ...require("./menu.cjs")
+  ...require("./menu.cjs"),
+  ...require("./menu-button.cjs")
 });
 //# sourceMappingURL=index.cjs.map

package/dist/ui/menu/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/menu/index.ts"],"sourcesContent":["export * from './menu';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,yBAAc,mBAAd;","names":[]}
+{"version":3,"sources":["../../../src/ui/menu/index.ts"],"sourcesContent":["export * from './menu';\nexport * from './menu-button';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,yBAAc,mBAAd;AACA,yBAAc,0BADd;","names":[]}

package/dist/ui/menu/index.d.ts

@@ -1,2 +1,3 @@
 export * from './menu.js';
+export * from './menu-button.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/ui/menu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC"}

package/dist/ui/menu/index.js

@@ -1,2 +1,3 @@
 export * from "./menu.js";
+export * from "./menu-button.js";
 //# sourceMappingURL=index.js.map

package/dist/ui/menu/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ui/menu/index.ts"],"sourcesContent":["export * from './menu';\n"],"mappings":"AAAA,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/ui/menu/index.ts"],"sourcesContent":["export * from './menu';\nexport * from './menu-button';\n"],"mappings":"AAAA,cAAc;AACd,cAAc;","names":[]}

package/dist/ui/menu/menu-button.cjs

@@ -0,0 +1,89 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var menu_button_exports = {};
+__export(menu_button_exports, {
+  MenuButton: () => MenuButton
+});
+module.exports = __toCommonJS(menu_button_exports);
+var import_jsx_runtime = (
+  // `triggerProps` spreads straight onto the button — its `ref` included.
+  // Before 4.45.0 the button family did not declare `ref`, which is why
+  // consumers wrapped the trigger in a `<span ref>`; that wrapper is what
+  // this composite exists to stop re-deriving.
+  require("react/jsx-runtime")
+);
+var import_helpers = require("../../helpers/index.cjs");
+var import_button = require("../button/index.cjs");
+var import_icon = require("../icon/index.cjs");
+var import_menu = require("./menu.cjs");
+const TRIGGER = {
+  primary: import_button.ButtonPrimary,
+  secondary: import_button.ButtonSecondary,
+  tertiary: import_button.ButtonTertiary,
+  ghost: import_button.ButtonGhost
+};
+function MenuButton({
+  items,
+  children,
+  variant = "secondary",
+  icon,
+  chevron = true,
+  placement,
+  disabled,
+  "aria-label": ariaLabel,
+  className
+}) {
+  const Trigger = TRIGGER[variant];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_menu.Menu,
+    {
+      items,
+      placement,
+      "aria-label": ariaLabel,
+      renderTrigger: ({ open, triggerProps }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        Trigger,
+        {
+          ...triggerProps,
+          disabled,
+          className: (0, import_helpers.cn)("uxm-menu-button", className),
+          children: [
+            icon,
+            children,
+            chevron && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_icon.Icon,
+              {
+                glyph: "chevron-down",
+                size: 14,
+                className: (0, import_helpers.cn)(
+                  "uxm-menu-button__chevron",
+                  open && "uxm-menu-button__chevron--open"
+                )
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MenuButton
+});
+//# sourceMappingURL=menu-button.cjs.map

package/dist/ui/menu/menu-button.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/menu/menu-button.tsx"],"sourcesContent":["import { cn } from '@/helpers';\nimport {\n  ButtonGhost,\n  ButtonPrimary,\n  ButtonSecondary,\n  ButtonTertiary,\n} from '@/ui/button';\nimport { Icon } from '@/ui/icon';\nimport type { PopoverPlacement } from '@/ui/popover';\n\nimport { Menu } from './menu';\n\nimport type { MenuEntry } from './menu';\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\n\n/** Which shipped button renders the trigger. */\nexport type MenuButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost';\n\nconst TRIGGER: Record<\n  MenuButtonVariant,\n  (props: ComponentPropsWithRef<'button'>) => ReactNode\n> = {\n  primary: ButtonPrimary,\n  secondary: ButtonSecondary,\n  tertiary: ButtonTertiary,\n  ghost: ButtonGhost,\n};\n\nexport interface MenuButtonProps {\n  /** Menu entries — the same `MenuEntry[]` `Menu` takes. */\n  items: MenuEntry[];\n  /** Button label. */\n  children: ReactNode;\n  /** Which shipped button renders the trigger. Default `secondary`. */\n  variant?: MenuButtonVariant;\n  /** Optional leading icon, before the label. */\n  icon?: ReactNode;\n  /**\n   * Trailing dropdown affordance. Default a `chevron-down` that rotates while\n   * the menu is open; pass `false` to omit it (for a trigger whose label\n   * already reads as a menu, or where space is tight).\n   */\n  chevron?: boolean;\n  /** Forwarded to `Menu`. Default `bottom-end`, as `Menu`'s own default. */\n  placement?: PopoverPlacement;\n  /** Disables the trigger. The menu cannot be opened. */\n  disabled?: boolean;\n  /** Accessible name for the menu panel. Forwarded to `Menu`. */\n  'aria-label'?: string;\n  /** Class on the trigger button. */\n  className?: string;\n}\n\n/**\n * The labelled dropdown button — a `Menu` whose trigger is one of the shipped\n * `Button*` atoms, with the chevron, the ARIA and the trigger ref already\n * wired.\n *\n * `Menu` is deliberately trigger-agnostic: `renderTrigger` is required so a ⋮\n * `IconButton`, an avatar or a field can all open one. That is the right\n * primitive, but it means the single most common shape — a button that says\n * what it does and drops a menu — is re-derived at every call site, along with\n * a hand-added chevron and the `triggerProps` plumbing. This is that shape,\n * shipped once.\n *\n * It is a composition, not a new visual primitive: the button is a real\n * `Button*`, the menu is a real `Menu`. Anything this does not expose —\n * controlled `open`, `matchAnchorWidth`, a bespoke trigger — is a sign to drop\n * to `Menu` + `renderTrigger`, which is unchanged and always available.\n */\nexport function MenuButton({\n  items,\n  children,\n  variant = 'secondary',\n  icon,\n  chevron = true,\n  placement,\n  disabled,\n  'aria-label': ariaLabel,\n  className,\n}: MenuButtonProps) {\n  const Trigger = TRIGGER[variant];\n\n  return (\n    <Menu\n      items={items}\n      placement={placement}\n      aria-label={ariaLabel}\n      renderTrigger={({ open, triggerProps }) => (\n        // `triggerProps` spreads straight onto the button — its `ref` included.\n        // Before 4.45.0 the button family did not declare `ref`, which is why\n        // consumers wrapped the trigger in a `<span ref>`; that wrapper is what\n        // this composite exists to stop re-deriving.\n        <Trigger\n          {...triggerProps}\n          disabled={disabled}\n          className={cn('uxm-menu-button', className)}\n        >\n          {icon}\n          {children}\n          {chevron && (\n            <Icon\n              glyph=\"chevron-down\"\n              size={14}\n              className={cn(\n                'uxm-menu-button__chevron',\n                open && 'uxm-menu-button__chevron--open',\n              )}\n            />\n          )}\n        </Trigger>\n      )}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6FQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA7FR,qBAAmB;AACnB,oBAKO;AACP,kBAAqB;AAGrB,kBAAqB;AAQrB,MAAM,UAGF;AAAA,EACF,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AAAA,EACV,OAAO;AACT;AA4CO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AACF,GAAoB;AAClB,QAAM,UAAU,QAAQ,OAAO;AAE/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,cAAY;AAAA,MACZ,eAAe,CAAC,EAAE,MAAM,aAAa,MAKnC;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ;AAAA,UACA,eAAW,mBAAG,mBAAmB,SAAS;AAAA,UAEzC;AAAA;AAAA,YACA;AAAA,YACA,WACC;AAAA,cAAC;AAAA;AAAA,gBACC,OAAM;AAAA,gBACN,MAAM;AAAA,gBACN,eAAW;AAAA,kBACT;AAAA,kBACA,QAAQ;AAAA,gBACV;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MAEJ;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/ui/menu/menu-button.css

@@ -0,0 +1,30 @@
+/* ── menu-button ── */
+/* `MenuButton` is a composition: the trigger IS a shipped `Button*`, so the
+   whole row — `display: inline-flex`, the alignment, and
+   `gap: var(--uxm-button-{variant}-gap, 8px)` — already comes from that atom.
+   Nothing here re-declares any of it.
+
+   That is not tidiness, it is the difference between the button's gap knob
+   working and not: `styles.css` imports `button.css` at line 16 and this file
+   at 65, so a `gap` declared here would win the cascade at equal specificity
+   and quietly pin a MenuButton to its own value while every other button in
+   the app followed `--uxm-button-{variant}-gap`.
+
+   So this block owns exactly one thing the button cannot know about: the
+   chevron's open state. */
+.uxm-menu-button__chevron {
+  flex-shrink: 0;
+  /* Turns to point at the open panel. Purely decorative — `aria-expanded` on
+     the trigger is what actually announces the state. */
+  transition: transform 0.15s ease;
+}
+.uxm-menu-button__chevron--open {
+  transform: rotate(180deg);
+}
+
+/* The rotation is decoration; the chevron must still point the right way. */
+@media (prefers-reduced-motion: reduce) {
+  .uxm-menu-button__chevron {
+    transition: none;
+  }
+}

package/dist/ui/menu/menu-button.d.ts

@@ -0,0 +1,48 @@
+import type { PopoverPlacement } from '../popover/index.js';
+import type { MenuEntry } from './menu.js';
+import type { ReactNode } from 'react';
+/** Which shipped button renders the trigger. */
+export type MenuButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost';
+export interface MenuButtonProps {
+    /** Menu entries — the same `MenuEntry[]` `Menu` takes. */
+    items: MenuEntry[];
+    /** Button label. */
+    children: ReactNode;
+    /** Which shipped button renders the trigger. Default `secondary`. */
+    variant?: MenuButtonVariant;
+    /** Optional leading icon, before the label. */
+    icon?: ReactNode;
+    /**
+     * Trailing dropdown affordance. Default a `chevron-down` that rotates while
+     * the menu is open; pass `false` to omit it (for a trigger whose label
+     * already reads as a menu, or where space is tight).
+     */
+    chevron?: boolean;
+    /** Forwarded to `Menu`. Default `bottom-end`, as `Menu`'s own default. */
+    placement?: PopoverPlacement;
+    /** Disables the trigger. The menu cannot be opened. */
+    disabled?: boolean;
+    /** Accessible name for the menu panel. Forwarded to `Menu`. */
+    'aria-label'?: string;
+    /** Class on the trigger button. */
+    className?: string;
+}
+/**
+ * The labelled dropdown button — a `Menu` whose trigger is one of the shipped
+ * `Button*` atoms, with the chevron, the ARIA and the trigger ref already
+ * wired.
+ *
+ * `Menu` is deliberately trigger-agnostic: `renderTrigger` is required so a ⋮
+ * `IconButton`, an avatar or a field can all open one. That is the right
+ * primitive, but it means the single most common shape — a button that says
+ * what it does and drops a menu — is re-derived at every call site, along with
+ * a hand-added chevron and the `triggerProps` plumbing. This is that shape,
+ * shipped once.
+ *
+ * It is a composition, not a new visual primitive: the button is a real
+ * `Button*`, the menu is a real `Menu`. Anything this does not expose —
+ * controlled `open`, `matchAnchorWidth`, a bespoke trigger — is a sign to drop
+ * to `Menu` + `renderTrigger`, which is unchanged and always available.
+ */
+export declare function MenuButton({ items, children, variant, icon, chevron, placement, disabled, 'aria-label': ariaLabel, className, }: MenuButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=menu-button.d.ts.map

package/dist/ui/menu/menu-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-button.d.ts","sourceRoot":"","sources":["../../../src/ui/menu/menu-button.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAIrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,OAAO,KAAK,EAAyB,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9D,gDAAgD;AAChD,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAY/E,MAAM,WAAW,eAAe;IAC9B,0DAA0D;IAC1D,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,qEAAqE;IACrE,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mCAAmC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,OAAqB,EACrB,IAAI,EACJ,OAAc,EACd,SAAS,EACT,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,SAAS,GACV,EAAE,eAAe,+BAkCjB"}

package/dist/ui/menu/menu-button.js

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../helpers/index.js";
+import {
+  ButtonGhost,
+  ButtonPrimary,
+  ButtonSecondary,
+  ButtonTertiary
+} from "../button/index.js";
+import { Icon } from "../icon/index.js";
+import { Menu } from "./menu.js";
+const TRIGGER = {
+  primary: ButtonPrimary,
+  secondary: ButtonSecondary,
+  tertiary: ButtonTertiary,
+  ghost: ButtonGhost
+};
+function MenuButton({
+  items,
+  children,
+  variant = "secondary",
+  icon,
+  chevron = true,
+  placement,
+  disabled,
+  "aria-label": ariaLabel,
+  className
+}) {
+  const Trigger = TRIGGER[variant];
+  return /* @__PURE__ */ jsx(
+    Menu,
+    {
+      items,
+      placement,
+      "aria-label": ariaLabel,
+      renderTrigger: ({ open, triggerProps }) => (
+        // `triggerProps` spreads straight onto the button — its `ref` included.
+        // Before 4.45.0 the button family did not declare `ref`, which is why
+        // consumers wrapped the trigger in a `<span ref>`; that wrapper is what
+        // this composite exists to stop re-deriving.
+        /* @__PURE__ */ jsxs(
+          Trigger,
+          {
+            ...triggerProps,
+            disabled,
+            className: cn("uxm-menu-button", className),
+            children: [
+              icon,
+              children,
+              chevron && /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  glyph: "chevron-down",
+                  size: 14,
+                  className: cn(
+                    "uxm-menu-button__chevron",
+                    open && "uxm-menu-button__chevron--open"
+                  )
+                }
+              )
+            ]
+          }
+        )
+      )
+    }
+  );
+}
+export {
+  MenuButton
+};
+//# sourceMappingURL=menu-button.js.map

package/dist/ui/menu/menu-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/menu/menu-button.tsx"],"sourcesContent":["import { cn } from '@/helpers';\nimport {\n  ButtonGhost,\n  ButtonPrimary,\n  ButtonSecondary,\n  ButtonTertiary,\n} from '@/ui/button';\nimport { Icon } from '@/ui/icon';\nimport type { PopoverPlacement } from '@/ui/popover';\n\nimport { Menu } from './menu';\n\nimport type { MenuEntry } from './menu';\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\n\n/** Which shipped button renders the trigger. */\nexport type MenuButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost';\n\nconst TRIGGER: Record<\n  MenuButtonVariant,\n  (props: ComponentPropsWithRef<'button'>) => ReactNode\n> = {\n  primary: ButtonPrimary,\n  secondary: ButtonSecondary,\n  tertiary: ButtonTertiary,\n  ghost: ButtonGhost,\n};\n\nexport interface MenuButtonProps {\n  /** Menu entries — the same `MenuEntry[]` `Menu` takes. */\n  items: MenuEntry[];\n  /** Button label. */\n  children: ReactNode;\n  /** Which shipped button renders the trigger. Default `secondary`. */\n  variant?: MenuButtonVariant;\n  /** Optional leading icon, before the label. */\n  icon?: ReactNode;\n  /**\n   * Trailing dropdown affordance. Default a `chevron-down` that rotates while\n   * the menu is open; pass `false` to omit it (for a trigger whose label\n   * already reads as a menu, or where space is tight).\n   */\n  chevron?: boolean;\n  /** Forwarded to `Menu`. Default `bottom-end`, as `Menu`'s own default. */\n  placement?: PopoverPlacement;\n  /** Disables the trigger. The menu cannot be opened. */\n  disabled?: boolean;\n  /** Accessible name for the menu panel. Forwarded to `Menu`. */\n  'aria-label'?: string;\n  /** Class on the trigger button. */\n  className?: string;\n}\n\n/**\n * The labelled dropdown button — a `Menu` whose trigger is one of the shipped\n * `Button*` atoms, with the chevron, the ARIA and the trigger ref already\n * wired.\n *\n * `Menu` is deliberately trigger-agnostic: `renderTrigger` is required so a ⋮\n * `IconButton`, an avatar or a field can all open one. That is the right\n * primitive, but it means the single most common shape — a button that says\n * what it does and drops a menu — is re-derived at every call site, along with\n * a hand-added chevron and the `triggerProps` plumbing. This is that shape,\n * shipped once.\n *\n * It is a composition, not a new visual primitive: the button is a real\n * `Button*`, the menu is a real `Menu`. Anything this does not expose —\n * controlled `open`, `matchAnchorWidth`, a bespoke trigger — is a sign to drop\n * to `Menu` + `renderTrigger`, which is unchanged and always available.\n */\nexport function MenuButton({\n  items,\n  children,\n  variant = 'secondary',\n  icon,\n  chevron = true,\n  placement,\n  disabled,\n  'aria-label': ariaLabel,\n  className,\n}: MenuButtonProps) {\n  const Trigger = TRIGGER[variant];\n\n  return (\n    <Menu\n      items={items}\n      placement={placement}\n      aria-label={ariaLabel}\n      renderTrigger={({ open, triggerProps }) => (\n        // `triggerProps` spreads straight onto the button — its `ref` included.\n        // Before 4.45.0 the button family did not declare `ref`, which is why\n        // consumers wrapped the trigger in a `<span ref>`; that wrapper is what\n        // this composite exists to stop re-deriving.\n        <Trigger\n          {...triggerProps}\n          disabled={disabled}\n          className={cn('uxm-menu-button', className)}\n        >\n          {icon}\n          {children}\n          {chevron && (\n            <Icon\n              glyph=\"chevron-down\"\n              size={14}\n              className={cn(\n                'uxm-menu-button__chevron',\n                open && 'uxm-menu-button__chevron--open',\n              )}\n            />\n          )}\n        </Trigger>\n      )}\n    />\n  );\n}\n"],"mappings":"AA6FQ,SAQI,KARJ;AA7FR,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,YAAY;AAGrB,SAAS,YAAY;AAQrB,MAAM,UAGF;AAAA,EACF,SAAS;AAAA,EACT,WAAW;AAAA,EACX,UAAU;AAAA,EACV,OAAO;AACT;AA4CO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AACF,GAAoB;AAClB,QAAM,UAAU,QAAQ,OAAO;AAE/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,cAAY;AAAA,MACZ,eAAe,CAAC,EAAE,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA,QAKnC;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACJ;AAAA,YACA,WAAW,GAAG,mBAAmB,SAAS;AAAA,YAEzC;AAAA;AAAA,cACA;AAAA,cACA,WACC;AAAA,gBAAC;AAAA;AAAA,kBACC,OAAM;AAAA,kBACN,MAAM;AAAA,kBACN,WAAW;AAAA,oBACT;AAAA,oBACA,QAAQ;AAAA,kBACV;AAAA;AAAA,cACF;AAAA;AAAA;AAAA,QAEJ;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/ui/styles.css

@@ -62,6 +62,7 @@
 @import "./listbox/listbox.css";
 @import "./loader/loader.css";
 @import "./menu/menu.css";
+@import "./menu/menu-button.css";
 @import "./meta-row/meta-row.css";
 @import "./modal/modal.css";
 @import "./number-stepper/number-stepper.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viax.io/uxm",
-  "version": "4.46.0",
+  "version": "4.48.0",
   "description": "Viax UXM — React 19 UI primitives and design tokens.",
   "license": "MIT",
   "private": false,