@viax.io/uxm 4.40.1 → 4.41.0

package/dist/ui/list/list.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── list ── */
 .uxm-list {
   background-color: var(--color-card);
@@ -56,6 +55,26 @@
      which owns the accent-tile treatment. The studio icon knobs are forwarded
      into IconTile's var namespace via `LIST_ITEM_ICON_TILE_STYLE`, so the tile
      pattern is defined once instead of being re-implemented here. */
+  /* Media slot — the alternative leading position for a thumbnail / avatar /
+     bare <img>, rendered as-is (no IconTile, no accent fill, no colour of its
+     own: the media brings its own frame). The row still owns the geometry, so
+     every leading element lands on the same grid whichever slot filled it. */
+}
+.uxm-list-item__media {
+  align-items: center;
+  box-sizing: border-box;
+  display: inline-flex;
+  /* Never let a long title squeeze the media out of square. */
+  flex-shrink: 0;
+  height: var(--uxm-list-item-media-size, 36px);
+  justify-content: center;
+  width: var(--uxm-list-item-media-size, 36px);
+  /* Only for a bare <img> passed straight in — without this it would
+     stretch to the box. `Thumbnail`'s own `--cover` / `--contain` rule is
+     more specific, so its fit choice still wins. */
+}
+.uxm-list-item__media img {
+  object-fit: cover;
 }
 .uxm-list-item__content {
   display: flex;
@@ -74,4 +93,23 @@
 .uxm-list-item__trailing {
   color: var(--uxm-list-item-chevron-color, var(--color-text-muted));
   font-size: calc(12px * var(--type-scale, 1));
+}
+
+/* Media fallback stretch, at (0,2,0) on purpose — same reasoning as
+   `avatar.scss`'s double-class size presets: a single-class selector here
+   (`.uxm-list-item__media > *`) TIES with a child atom's own size rule
+   (`.uxm-thumbnail`, also 0,1,0) and then loses or wins on nothing but the
+   `styles.css` import order, which is alphabetical — `Avatar` (line 7) would
+   obey the slot and `Thumbnail` (line 94) would ignore it. Two classes settle
+   it for every child regardless of order. The slot is always rendered inside a
+   row, so the descendant selector costs nothing.
+
+   Atoms with a size var of their own are ALSO handled by the forwarding in
+   `LIST_ITEM_MEDIA_STYLE` (list.tsx) — that path is what makes their border /
+   radius / inner glyph scale with the row instead of merely being clamped to
+   its box. Both resolve to the same size; this rule is the floor for a bare
+   <img>, <svg>, or a consumer's own node. */
+.uxm-list-item .uxm-list-item__media > * {
+  height: 100%;
+  width: 100%;
 }

package/dist/ui/list/list.d.ts

@@ -8,6 +8,21 @@ import type { AnchorHTMLAttributes, ButtonHTMLAttributes, CSSProperties, HTMLAtt
  * constant so the studio preview can reuse the exact same forwarding.
  */
 export declare const LIST_ITEM_ICON_TILE_STYLE: CSSProperties;
+/**
+ * Forward the row's media-size knob into the size vars of the atoms that
+ * plausibly fill the `media` slot, so each one sizes itself through its OWN
+ * machinery — frame, border, radius and inner glyph / initials all scale with
+ * it — instead of being stretched from the outside. Mirrors
+ * `LIST_ITEM_ICON_TILE_STYLE` above, and is the only order-independent fix:
+ * both `Thumbnail` (`.uxm-thumbnail`, 0,1,0 but imported AFTER list in
+ * `styles.css`) and `Avatar` (double-class size presets at 0,2,0, deliberately
+ * so per its own note) would otherwise win or lose the cascade against a slot
+ * rule purely on stylesheet order. The generic `> *` stretch in `list.scss`
+ * stays as the fallback for a bare `<img>` / `<svg>` or any atom with no size
+ * var of its own; both mechanisms resolve to the same number. Kept as a module
+ * constant so the studio preview can reuse the exact same forwarding.
+ */
+export declare const LIST_ITEM_MEDIA_STYLE: CSSProperties;
 export interface ListProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
 }
@@ -25,6 +40,22 @@ export declare function List({ children, className, ...rest }: ListProps): impor
 export interface ListItemProps {
     /** Leading icon — typically <Icon ... /> from @modo/uxm/ui. */
     icon?: ReactNode;
+    /** Leading media rendered as-is (a <Thumbnail>, <img>, avatar…) — NOT
+     *  wrapped in the accent `IconTile` the `icon` slot uses. Mutually
+     *  exclusive with `icon`: when both are passed, `media` wins. The slot
+     *  box is `--uxm-list-item-media-size` (36px) square; a `Thumbnail` or
+     *  `Avatar` gets that size forwarded into its own size var (see
+     *  `LIST_ITEM_MEDIA_STYLE`) and anything else is stretched to fill, so
+     *  rows stay on one leading grid either way.
+     *
+     *  Prefer decorative media in a row whose title already names the thing
+     *  (`alt=""`): the slot sits INSIDE the row's `<button>`/`<a>`, so a
+     *  described image is concatenated into the row's accessible name.
+     *
+     *  Note: this shadows the native `media` attribute of `<a>` for the
+     *  anchor form of the row — pass it through `className`/a wrapper if
+     *  you genuinely need the HTML attribute. */
+    media?: ReactNode;
     /** Secondary text shown under the title (e.g. a value). */
     value?: ReactNode;
     /** Trailing content — meta text, chevron icon, or a custom node. */
@@ -49,6 +80,6 @@ export interface ListItemProps {
 type AnchorRest = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof ListItemProps>;
 type ButtonRest = Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof ListItemProps>;
 type DivRest = Omit<HTMLAttributes<HTMLDivElement>, keyof ListItemProps>;
-export declare function ListItem({ icon, value, trailing, children, interactive, active, disabled, href, className, ...rest }: ListItemProps & (AnchorRest | ButtonRest | DivRest)): import("react").JSX.Element;
+export declare function ListItem({ icon, media, value, trailing, children, interactive, active, disabled, href, className, ...rest }: ListItemProps & (AnchorRest | ButtonRest | DivRest)): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=list.d.ts.map

package/dist/ui/list/list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/ui/list/list.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,oBAAoB,EACpB,oBAAoB,EACpB,aAAa,EACb,cAAc,EACd,SAAS,EACV,MAAM,OAAO,CAAC;AAEf;;;;;;;GAOG;AACH,eAAO,MAAM,yBAAyB,EAMjC,aAAa,CAAC;AAEnB,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,+BAM/D;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,aAAa;IAC5B,+DAA+D;IAC/D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB;;0DAEsD;IACtD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;sEACkE;IAClE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;yCAEqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,KAAK,UAAU,GAAG,IAAI,CACpB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,aAAa,CACpB,CAAC;AACF,KAAK,UAAU,GAAG,IAAI,CACpB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,aAAa,CACpB,CAAC;AACF,KAAK,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,aAAa,CAAC,CAAC;AAEzE,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,GAAG,IAAI,EACR,EAAE,aAAa,GAAG,CAAC,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC,+BA0DrD"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../../src/ui/list/list.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,oBAAoB,EACpB,oBAAoB,EACpB,aAAa,EACb,cAAc,EACd,SAAS,EACV,MAAM,OAAO,CAAC;AAEf;;;;;;;GAOG;AACH,eAAO,MAAM,yBAAyB,EAMjC,aAAa,CAAC;AAEnB;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,qBAAqB,EAI7B,aAAa,CAAC;AAEnB,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,SAAS,+BAM/D;AAED;;;;;;;;;GASG;AACH,MAAM,WAAW,aAAa;IAC5B,+DAA+D;IAC/D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;;;;;iDAc6C;IAC7C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qBAAqB;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB;;0DAEsD;IACtD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;sEACkE;IAClE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;yCAEqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,KAAK,UAAU,GAAG,IAAI,CACpB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,aAAa,CACpB,CAAC;AACF,KAAK,UAAU,GAAG,IAAI,CACpB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,aAAa,CACpB,CAAC;AACF,KAAK,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,aAAa,CAAC,CAAC;AAEzE,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,GAAG,IAAI,EACR,EAAE,aAAa,GAAG,CAAC,UAAU,GAAG,UAAU,GAAG,OAAO,CAAC,+BAoErD"}

package/dist/ui/list/list.js

@@ -8,11 +8,17 @@ const LIST_ITEM_ICON_TILE_STYLE = {
   "--uxm-icon-tile-radius": "var(--uxm-list-item-icon-radius, 6px)",
   "--uxm-icon-tile-icon-size": "calc(var(--uxm-list-item-icon-size, 24px) * 0.6)"
 };
+const LIST_ITEM_MEDIA_STYLE = {
+  "--uxm-thumbnail-size": "var(--uxm-list-item-media-size, 36px)",
+  "--uxm-avatar-size": "var(--uxm-list-item-media-size, 36px)",
+  "--uxm-avatar-small-size": "var(--uxm-list-item-media-size, 36px)"
+};
 function List({ children, className, ...rest }) {
   return /* @__PURE__ */ jsx("div", { className: cn("uxm-list", className), ...rest, children });
 }
 function ListItem({
   icon,
+  media,
   value,
   trailing,
   children,
@@ -30,7 +36,7 @@ function ListItem({
   );
   const isInteractive = interactive || href !== void 0;
   const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
-    icon && /* @__PURE__ */ jsx(IconTile, { className: "uxm-list-item__icon", style: LIST_ITEM_ICON_TILE_STYLE, children: icon }),
+    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 }),
       value !== void 0 && value !== null && /* @__PURE__ */ jsx("span", { className: "uxm-list-item__value", children: value })
@@ -74,6 +80,7 @@ function ListItem({
 }
 export {
   LIST_ITEM_ICON_TILE_STYLE,
+  LIST_ITEM_MEDIA_STYLE,
   List,
   ListItem
 };

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\nexport interface ListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\nexport function List({ children, className, ...rest }: ListProps) {\n  return (\n    <div className={cn('uxm-list', className)} {...rest}>\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  /** 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  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      {icon && (\n        <IconTile className=\"uxm-list-item__icon\" style={LIST_ITEM_ICON_TILE_STYLE}>\n          {icon}\n        </IconTile>\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":"AAkCI,SAsEA,UAtEA,KA4EE,YA5EF;AAlCJ,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;AAMO,SAAS,KAAK,EAAE,UAAU,WAAW,GAAG,KAAK,GAAc;AAChE,SACE,oBAAC,SAAI,WAAW,GAAG,YAAY,SAAS,GAAI,GAAG,MAC5C,UACH;AAEJ;AA+CO,SAAS,SAAS;AAAA,EACvB;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,iCACG;AAAA,YACC,oBAAC,YAAS,WAAU,uBAAsB,OAAO,2BAC9C,gBACH;AAAA,IAEF,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 { 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\nexport interface ListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n}\n\nexport function List({ children, className, ...rest }: ListProps) {\n  return (\n    <div className={cn('uxm-list', className)} {...rest}>\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":"AAsDI,SAuFA,UAvFA,KAuGE,YAvGF;AAtDJ,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;AAMO,SAAS,KAAK,EAAE,UAAU,WAAW,GAAG,KAAK,GAAc;AAChE,SACE,oBAAC,SAAI,WAAW,GAAG,YAAY,SAAS,GAAI,GAAG,MAC5C,UACH;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":[]}

package/dist/ui/listbox/listbox.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── listbox ────────────────────────────────────────────────────────────────
    Generic dropdown surface — uses Popover as the panel positioning shell
    and layers chrome (panel, search, list, options, footer) on top.

package/dist/ui/loader/loader.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── loader ── */
 @keyframes uxm-loader-spin {
   to {

package/dist/ui/menu/menu.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── menu ─────────────────────────────────────────────────────────────────────
    Action / dropdown menu — a list of commands invoked from a consumer-owned
    trigger. The `.uxm-menu` wrapper lives in-page around the trigger; the

package/dist/ui/meta-row/meta-row.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── meta-row ── */
 .uxm-meta-row {
   align-items: center;

package/dist/ui/modal/modal.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── modal ──────────────────────────────────────────────────────────────────
    Modal (surface — themable through UXM)
 

package/dist/ui/number-input/number-input.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* Number Input — typing-only numeric field. Same architectural shape
    as Text Input: the root `<input class="uxm-number-input">` IS the
    visible surface (no positioning wrapper), so the `--state-*` forced

package/dist/ui/number-stepper/number-stepper.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── NumberStepper ──
    Numeric input + explicit ± step buttons + optional unit suffix. The
    browser's native spinner is unconditionally suppressed so the

package/dist/ui/option-list/option-list.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── option-list ── */
 .uxm-option-list {
   background-color: var(--uxm-option-list-background, var(--color-surface));

package/dist/ui/page-header/page-header.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── page-header ── */
 /* PageHeader — defaults match the `page-header` registry entry. Each
    knob (titleColor, titleSize, metaColor, metaSize, iconBg, iconColor,

package/dist/ui/page-shell/page-shell.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── page-shell ── */
 .uxm-page-shell {
   background-color: var(--uxm-page-shell-bg, var(--color-surface));

package/dist/ui/password-input/password-input.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* Password Input — mirrors DateInput's inner-styled-atom shape. Root
    `.uxm-password-input` is a positioning wrapper; the visible field lives
    on `.uxm-password-input__input`. The trailing element is a real

package/dist/ui/phone-input/phone-input.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* Phone Input — leading country picker + national number text input.
    Layout: flag/dial-code button on the LEFT (the country is read first,
    left-to-right with the phone number that follows). Popover below opens

package/dist/ui/pill-select/pill-select.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 .uxm-pill-select {
   position: relative;
   width: 100%;

package/dist/ui/popover/popover.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── popover ────────────────────────────────────────────────────────────────
    Bare positioned panel — no chrome of its own. Consumers (Listbox,
    PhoneInput country picker, future menus) layer their visual treatment

package/dist/ui/progress-bar/progress-bar.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── Progress Bar ──
    Determinate progress (linear track+fill or circular ring). The root is
    layout-only; every themeable property reads a `--uxm-progress-bar-*` custom

package/dist/ui/property-field/property-field.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── property-field ── */
 /* PropertyGrid — auto-fill grid wrapper. Owns row/column gap only;
    the field-shape knobs (label/value colour and size) live on the

package/dist/ui/radio-group/radio-group.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── radio-group ── */
 .uxm-radio {
   align-items: center;

package/dist/ui/range-slider/range-slider.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── range-slider ── */
 /* ── RangeSlider ──
    Dual-thumb range. Two `<input type="range">` are absolutely positioned

package/dist/ui/responsive-grid/responsive-grid.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ResponsiveGrid — moved from monolithic styles.css */
 .uxm-responsive-grid {
   display: grid;

package/dist/ui/search-dropdown/search-dropdown.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── SearchDropdown ──
    Combobox: trigger button + Listbox popover. SearchDropdown is a thin
    wrapper over the shared Listbox atom — Listbox owns the popover

package/dist/ui/section-header/section-header.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── section-header ── */
 /* ── SectionHeader ──
    Small uppercase label for grouping fields in dense settings panels.

package/dist/ui/segment-card/segment-card.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── segment-card ── */
 .uxm-segment-card {
   background-color: var(--uxm-segment-card-background, var(--color-card));

package/dist/ui/segment-row/segment-row.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── segment-row ── */
 .uxm-segment-row {
   align-items: stretch;

package/dist/ui/side-flexpane/side-flexpane.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── side-flexpane ── */
 .uxm-side-flexpane {
   background-color: var(--uxm-side-flexpane-background-color, var(--color-card));

package/dist/ui/sidebar-nav-item/sidebar-nav-item.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── sidebar-nav-item ── */
 .uxm-sidebar-nav-item {
   align-items: center;

package/dist/ui/sidebar-nav-trigger/sidebar-nav-trigger.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── sidebar-nav-trigger ──────────────────────────────────────────────────────
    A rail row that OPENS something rather than navigating to it. Sibling of
    `sidebar-nav-item`, deliberately not a variant of it: that one is an `<a>`

package/dist/ui/slider/slider.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── slider ── */
 /* ── Slider ──
    Native <input type="range"> with themable track + thumb. The track's

package/dist/ui/stack/stack.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* Stack — moved from monolithic styles.css */
 .uxm-stack {
   display: flex;

package/dist/ui/stat-card/stat-card.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── stat-card ── */
 /* StatCard — root IS the visible card; bg/border/radius/padding land
    directly on root via REAL_CSS_PROPS. Inner __value/__label sizes and

package/dist/ui/tabs/tabs.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── tabs ── */
 /* Tabs (label + optional icon, splits the width between tabs) */
 .uxm-tabs {

package/dist/ui/tabs-underline/tabs-underline.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── tabs-underline ── */
 /* Tabs Underline (page-nav style — text labels with an animated bar under the active tab) */
 .uxm-tabs-underline {

package/dist/ui/tag/tag.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── tag ── */
 .uxm-tag {
   align-items: center;

package/dist/ui/thumbnail/thumbnail.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── thumbnail ── */
 /* Thumbnail — bounded image frame. Root IS the visible frame: bg / border /
    radius / size land directly. `--uxm-thumbnail-size` drives both width and

package/dist/ui/time-input/time-input.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* Time Input — same inner-styled-atom shape as DateInput. Root
    `.uxm-time-input` is a positioning wrapper; the visible field is
    `.uxm-time-input__input`. In `data-format="12h"` mode an AM/PM <select>

package/dist/ui/timeline-entry/timeline-entry.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── timeline-entry ── */
 .uxm-timeline-entry {
   display: flex;

package/dist/ui/toast/toast.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── toast ──────────────────────────────────────────────────────────────────
    Toaster mounts a positioned container that holds the toast stack.
    Position presets are layout-only; visual styling (background, border,

package/dist/ui/toggle-switch/toggle-switch.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── toggle-switch ── */
 .uxm-toggle-switch {
   align-items: center;

package/dist/ui/tooltip/tooltip.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── tooltip ── */
 .uxm-tooltip {
   display: inline-block;

package/dist/ui/type-overview-card/type-overview-card.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── type-overview-card ── */
 /* TypeOverviewCard — registry knobs (bg, border, radius, padding,
    accent*, icon*, label*, value*) all wired via `--uxm-typeoverview-*`

package/dist/ui/view-switcher/view-switcher.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* ── view-switcher ── */
 /* View Switcher (icon-only segmented) */
 .uxm-view-switcher {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viax.io/uxm",
-  "version": "4.40.1",
+  "version": "4.41.0",
   "description": "Viax UXM — React 19 UI primitives and design tokens.",
   "license": "MIT",
   "private": false,
@@ -69,6 +69,7 @@
     "check:drift": "node scripts/check-state-var-drift.mjs && npm run check:type-scale && npm run check:tokens",
     "test": "vitest run",
     "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
     "test:ci": "vitest run --reporter=default --reporter=junit --outputFile=junit-report.xml",
     "audit:report": "npm audit --registry=https://registry.npmjs.org",
     "audit:ci": "npm audit --registry=https://registry.npmjs.org --audit-level=critical",
@@ -112,6 +113,7 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^6.1.1",
+    "@vitest/coverage-v8": "^5.0.0",
     "axe-core": "^4.13.0",
     "commitizen": "^4.3.1",
     "cz-conventional-changelog": "^3.3.0",