@mitcsutt/kiln-ui 0.2.2 → 0.4.0

package/dist/components/actions/Button/Button.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.module.js","names":["button","spinner","icon","Button_module_default"],"sources":["../../../../src/components/actions/Button/Button.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --button-radius   default var(--radius-action)\n *   --button-shadow   default var(--shadow-surface) for solid/outline\n *   --button-weight   default var(--label-weight)\n */\n.button {\n  --_bg: transparent;\n  --_bg-hover: var(--_bg);\n  --_ink: var(--color-ink);\n  --_border: transparent;\n  --_shadow: none;\n  --_h: var(--control-md);\n  --_px: var(--space-4);\n  --_fs: var(--text-sm);\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5em;\n  min-block-size: var(--_h);\n  padding-inline: var(--_px);\n  padding-block: 0;\n  border: var(--border-width) solid var(--_border);\n  border-radius: var(--button-radius, var(--radius-action));\n  background: var(--_bg);\n  color: var(--_ink);\n  box-shadow: var(--_shadow);\n  font-family: var(--font-text);\n  font-size: var(--_fs);\n  font-weight: var(--button-weight, var(--label-weight));\n  letter-spacing: var(--label-tracking);\n  text-transform: var(--label-transform);\n  line-height: 1;\n  text-decoration: none;\n  white-space: nowrap;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  transition:\n    background-color var(--dur-1) var(--ease-out),\n    border-color var(--dur-1) var(--ease-out),\n    color var(--dur-1) var(--ease-out),\n    box-shadow var(--dur-1) var(--ease-out),\n    translate var(--dur-1) var(--ease-spring);\n}\n\n/* Sizes */\n.button[data-size='sm'] {\n  --_h: var(--control-sm);\n  --_px: var(--space-3);\n  --_fs: var(--text-xs);\n}\n.button[data-size='lg'] {\n  --_h: var(--control-lg);\n  --_px: var(--space-5);\n  --_fs: var(--text-md);\n}\n\n/* Tone → which colour family the variant draws with */\n.button[data-tone='accent'] {\n  --_c: var(--color-accent);\n  --_c-hover: var(--color-accent-hover);\n  --_c-ink: var(--color-accent-ink);\n  --_c-text: var(--color-accent-text);\n  --_c-soft: var(--color-accent-soft);\n}\n.button[data-tone='neutral'] {\n  --_c: var(--color-surface-inverse);\n  --_c-hover: var(--color-ink-muted);\n  --_c-ink: var(--color-ink-inverse);\n  --_c-text: var(--color-ink);\n  --_c-soft: var(--color-surface-sunken);\n}\n.button[data-tone='critical'] {\n  --_c: var(--tone-critical);\n  --_c-hover: var(--tone-critical-text);\n  --_c-ink: var(--tone-critical-ink);\n  --_c-text: var(--tone-critical-text);\n  --_c-soft: var(--tone-critical-soft);\n}\n\n/* Variants */\n.button[data-variant='solid'] {\n  --_bg: var(--_c);\n  --_bg-hover: var(--_c-hover);\n  --_ink: var(--_c-ink);\n  --_border: var(--button-solid-border, var(--_c));\n  --_shadow: var(--button-shadow, var(--shadow-surface));\n}\n.button[data-variant='outline'] {\n  --_bg: transparent;\n  --_bg-hover: var(--_c-soft);\n  --_ink: var(--_c-text);\n  --_border: var(--color-line-strong);\n  --_shadow: var(--button-shadow, var(--shadow-surface));\n}\n.button[data-tone='neutral'][data-variant='outline'] {\n  --_bg: var(--color-surface);\n}\n.button[data-variant='ghost'] {\n  --_bg: transparent;\n  --_bg-hover: var(--_c-soft);\n  --_ink: var(--_c-text);\n}\n\n@media (hover: hover) {\n  .button:hover:not(:disabled, [aria-disabled='true']) {\n    background: var(--_bg-hover);\n  }\n}\n\n.button:active:not(:disabled, [aria-disabled='true']) {\n  translate: var(--active-shift) var(--active-shift);\n  box-shadow: var(--shadow-active);\n}\n.button[data-variant='ghost']:active:not(:disabled) {\n  translate: none;\n  box-shadow: none;\n}\n\n.button:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n.button:disabled,\n.button[aria-disabled='true'] {\n  cursor: not-allowed;\n  opacity: 0.45;\n  box-shadow: none;\n}\n\n.button[data-loading] {\n  cursor: progress;\n  opacity: 1;\n  /* Bare text children aren't elements, so hide the label via colour, not visibility */\n  color: transparent;\n}\n.button[data-loading] > :not(.spinner) {\n  visibility: hidden;\n}\n\n.button[data-full-width] {\n  display: flex;\n  inline-size: 100%;\n}\n\n.icon {\n  display: inline-flex;\n  font-size: 1.15em;\n  margin-inline: -0.1em;\n}\n\n.spinner {\n  position: absolute;\n  inset: 0;\n  display: grid;\n  place-items: center;\n  color: var(--_ink);\n}\n"],"mappings":""}
+{"version":3,"file":"Button.module.js","names":["button","spinner","icon","Button_module_default"],"sources":["../../../../src/components/actions/Button/Button.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --button-radius   default var(--radius-action)\n *   --button-shadow   default var(--shadow-surface) for solid/outline\n *   --button-weight   default var(--label-weight)\n */\n.button {\n  --_bg: transparent;\n  --_bg-hover: var(--_bg);\n  --_ink: var(--color-ink);\n  --_border: transparent;\n  --_shadow: none;\n  --_h: var(--control-md);\n  --_px: var(--space-4);\n  --_fs: var(--text-sm);\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5em;\n  min-block-size: var(--_h);\n  padding-inline: var(--_px);\n  padding-block: 0;\n  border: var(--border-width) solid var(--_border);\n  border-radius: var(--button-radius, var(--radius-action));\n  background: var(--_bg);\n  color: var(--_ink);\n  box-shadow: var(--_shadow);\n  font-family: var(--font-text);\n  font-size: var(--_fs);\n  font-weight: var(--button-weight, var(--label-weight));\n  letter-spacing: var(--label-tracking);\n  text-transform: var(--label-transform);\n  line-height: 1;\n  text-decoration: none;\n  white-space: nowrap;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  transition:\n    background-color var(--dur-1) var(--ease-out),\n    border-color var(--dur-1) var(--ease-out),\n    color var(--dur-1) var(--ease-out),\n    box-shadow var(--dur-1) var(--ease-out),\n    translate var(--dur-1) var(--ease-spring);\n}\n\n/* Sizes */\n.button[data-size='sm'] {\n  --_h: var(--control-sm);\n  --_px: var(--space-3);\n  --_fs: var(--text-xs);\n}\n.button[data-size='lg'] {\n  --_h: var(--control-lg);\n  --_px: var(--space-5);\n  --_fs: var(--text-md);\n}\n\n/* Tone → which colour family the variant draws with */\n.button[data-tone='accent'] {\n  --_c: var(--color-accent);\n  --_c-hover: var(--color-accent-hover);\n  --_c-ink: var(--color-accent-ink);\n  --_c-text: var(--color-accent-text);\n  --_c-soft: var(--color-accent-soft);\n}\n.button[data-tone='neutral'] {\n  --_c: var(--color-surface-inverse);\n  --_c-hover: var(--color-ink-muted);\n  --_c-ink: var(--color-ink-inverse);\n  --_c-text: var(--color-ink);\n  --_c-soft: var(--color-surface-sunken);\n}\n.button[data-tone='critical'] {\n  --_c: var(--tone-critical);\n  --_c-hover: var(--tone-critical-text);\n  --_c-ink: var(--tone-critical-ink);\n  --_c-text: var(--tone-critical-text);\n  --_c-soft: var(--tone-critical-soft);\n}\n\n/* Variants */\n.button[data-variant='solid'] {\n  --_bg: var(--_c);\n  --_bg-hover: var(--_c-hover);\n  --_ink: var(--_c-ink);\n  --_border: var(--button-solid-border, var(--_c));\n  --_shadow: var(--button-shadow, var(--shadow-surface));\n}\n.button[data-variant='outline'] {\n  --_bg: transparent;\n  --_bg-hover: var(--_c-soft);\n  --_ink: var(--_c-text);\n  --_border: var(--color-line-strong);\n  --_shadow: var(--button-shadow, var(--shadow-surface));\n}\n.button[data-tone='neutral'][data-variant='outline'] {\n  --_bg: var(--color-surface);\n}\n.button[data-variant='ghost'] {\n  --_bg: transparent;\n  --_bg-hover: var(--_c-soft);\n  --_ink: var(--_c-text);\n}\n\n@media (hover: hover) {\n  .button:hover:not(:disabled, [aria-disabled='true']) {\n    background: var(--_bg-hover);\n  }\n}\n\n.button:active:not(:disabled, [aria-disabled='true']) {\n  translate: var(--active-shift) var(--active-shift);\n  box-shadow: var(--shadow-active);\n}\n.button[data-variant='ghost']:active:not(:disabled, [aria-disabled='true']) {\n  translate: none;\n  box-shadow: none;\n}\n\n.button:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n.button:disabled,\n.button[aria-disabled='true'] {\n  cursor: not-allowed;\n  opacity: 0.45;\n  box-shadow: none;\n}\n\n.button[data-loading] {\n  cursor: progress;\n  opacity: 1;\n  /* Bare text children aren't elements, so hide the label via colour, not visibility */\n  color: transparent;\n}\n.button[data-loading] > :not(.spinner) {\n  visibility: hidden;\n}\n\n.button[data-full-width] {\n  display: flex;\n  inline-size: 100%;\n}\n\n.icon {\n  display: inline-flex;\n  font-size: 1.15em;\n  margin-inline: -0.1em;\n}\n\n.spinner {\n  position: absolute;\n  inset: 0;\n  display: grid;\n  place-items: center;\n  color: var(--_ink);\n}\n"],"mappings":""}

package/dist/components/actions/ToggleChip/ToggleChip.d.ts

@@ -7,6 +7,11 @@ export interface ToggleChipProps extends ComponentPropsWithoutRef<typeof Toggle.
     icon?: ReactNode;
     /** How many items the filter matches. Rendered in tabular figures after the label. */
     count?: number;
+    /**
+     * Content after the label, spaced from it: an `AvatarGroup` of who reacted, a small figure.
+     * Keep it phrasing content, since the chip is a button.
+     */
+    trailing?: ReactNode;
 }
 /**
  * An independent on-off filter that sits in a row with others, with an optional count.

package/dist/components/actions/ToggleChip/ToggleChip.js

@@ -4,13 +4,13 @@ import { forwardRef as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Toggle as a } from "radix-ui";
 //#region src/components/actions/ToggleChip/ToggleChip.tsx
-var o = n(function({ size: n = "md", icon: o, count: s, className: c, children: l, type: u, ...d }, f) {
+var o = n(function({ size: n = "md", icon: o, count: s, trailing: c, className: l, children: u, type: d, ...f }, p) {
 	return /* @__PURE__ */ i(a.Root, {
-		ref: f,
-		type: u ?? "button",
-		className: e(t.chip, c),
+		ref: p,
+		type: d ?? "button",
+		className: e(t.chip, l),
 		"data-size": n,
-		...d,
+		...f,
 		children: [
 			o ? /* @__PURE__ */ r("span", {
 				className: t.icon,
@@ -19,7 +19,11 @@ var o = n(function({ size: n = "md", icon: o, count: s, className: c, children:
 			}) : null,
 			/* @__PURE__ */ r("span", {
 				className: t.label,
-				children: l
+				children: u
+			}),
+			c === void 0 ? null : /* @__PURE__ */ r("span", {
+				className: t.trailing,
+				children: c
 			}),
 			s === void 0 ? null : /* @__PURE__ */ r("span", {
 				className: t.count,

package/dist/components/actions/ToggleChip/ToggleChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleChip.js","names":["styles","chip_module_default","ToggleChip","forwardRef","rest","Toggle","type","cx","className","size","icon","count"],"sources":["../../../../src/components/actions/ToggleChip/ToggleChip.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react'\nimport { Toggle } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport styles from './chip.module.css'\n\nexport type ToggleChipSize = 'sm' | 'md'\n\nexport interface ToggleChipProps extends ComponentPropsWithoutRef<typeof Toggle.Root> {\n  size?: ToggleChipSize\n  /** A leading glyph. Keep it meaningful — one icon per row at most. */\n  icon?: ReactNode\n  /** How many items the filter matches. Rendered in tabular figures after the label. */\n  count?: number\n}\n\n/**\n * An independent on-off filter that sits in a row with others, with an optional count.\n *\n * @remarks\n * A `ToggleChip` is a pressed or unpressed button, announced as a toggle (`aria-pressed`). Each\n * chip in a row is independent, so a row of them is a set of filters, not a choice of one. For a\n * set of chips that act together (one of, or several of, one field), use {@link ChipGroup |\n * ChipGroup}.\n *\n * @privateRemarks\n * A pressable filter chip — an on/off switch that reads as a word (\"Mine\", \"Overdue\n * only\"). Built on Radix Toggle, so it is a real `<button aria-pressed>`; use\n * `pressed`/`onPressedChange` (controlled) or `defaultPressed`.\n *\n * Pressed chips take the accent's soft fill. Where the theme has a hard press shadow\n * (Fiesta), resting chips stand proud and pressed chips sit flat — literally pushed in.\n */\nexport const ToggleChip = forwardRef<HTMLButtonElement, ToggleChipProps>(function ToggleChip(\n  { size = 'md', icon, count, className, children, type, ...rest },\n  ref,\n) {\n  return (\n    <Toggle.Root\n      ref={ref}\n      type={type ?? 'button'}\n      className={cx(styles.chip, className)}\n      data-size={size}\n      {...rest}\n    >\n      {icon ? (\n        <span className={styles.icon} aria-hidden=\"true\">\n          {icon}\n        </span>\n      ) : null}\n      <span className={styles.label}>{children}</span>\n      {count !== undefined ? <span className={styles.count}>{count}</span> : null}\n    </Toggle.Root>\n  )\n})\n"],"mappings":";;;;;;AAgCA,IAAaE,IAAaC,EAA+C,SACvE,EAAE,UAAO,MAAM,SAAM,UAAO,cAAW,aAAU,SAAM,GAAGC,KAC1D,GACA;CACA,OACE,kBAACC,EAAO,MAAR;EACO;EACL,MAAMC,KAAQ;EACd,WAAWC,EAAGP,EAAO,MAAMQ,CAAS;EACpC,aAAWC;EACX,GAAIL;EALN,UAAA;GAOGM,IACC,kBAAC,QAAD;IAAM,WAAWV,EAAO;IAAM,eAAY;IACvC,UAAAU;GACG,CAAA,IACJ;GACJ,kBAAC,QAAD;IAAM,WAAWV,EAAO;IAAQ;GAAe,CAAA;GAC9CW,MAAU,KAAA,IAA4D,OAAhD,kBAAC,QAAD;IAAM,WAAWX,EAAO;IAAQ,UAAAW;GAAY,CAAA;EACxD;;AAEjB,CAAC"}
+{"version":3,"file":"ToggleChip.js","names":["styles","chip_module_default","ToggleChip","forwardRef","rest","Toggle","type","cx","className","size","icon","trailing","count"],"sources":["../../../../src/components/actions/ToggleChip/ToggleChip.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react'\nimport { Toggle } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport styles from './chip.module.css'\n\nexport type ToggleChipSize = 'sm' | 'md'\n\nexport interface ToggleChipProps extends ComponentPropsWithoutRef<typeof Toggle.Root> {\n  size?: ToggleChipSize\n  /** A leading glyph. Keep it meaningful — one icon per row at most. */\n  icon?: ReactNode\n  /** How many items the filter matches. Rendered in tabular figures after the label. */\n  count?: number\n  /**\n   * Content after the label, spaced from it: an `AvatarGroup` of who reacted, a small figure.\n   * Keep it phrasing content, since the chip is a button.\n   */\n  trailing?: ReactNode\n}\n\n/**\n * An independent on-off filter that sits in a row with others, with an optional count.\n *\n * @remarks\n * A `ToggleChip` is a pressed or unpressed button, announced as a toggle (`aria-pressed`). Each\n * chip in a row is independent, so a row of them is a set of filters, not a choice of one. For a\n * set of chips that act together (one of, or several of, one field), use {@link ChipGroup |\n * ChipGroup}.\n *\n * @privateRemarks\n * A pressable filter chip — an on/off switch that reads as a word (\"Mine\", \"Overdue\n * only\"). Built on Radix Toggle, so it is a real `<button aria-pressed>`; use\n * `pressed`/`onPressedChange` (controlled) or `defaultPressed`.\n *\n * Pressed chips take the accent's soft fill. Where the theme has a hard press shadow\n * (Fiesta), resting chips stand proud and pressed chips sit flat — literally pushed in.\n */\nexport const ToggleChip = forwardRef<HTMLButtonElement, ToggleChipProps>(function ToggleChip(\n  { size = 'md', icon, count, trailing, className, children, type, ...rest },\n  ref,\n) {\n  return (\n    <Toggle.Root\n      ref={ref}\n      type={type ?? 'button'}\n      className={cx(styles.chip, className)}\n      data-size={size}\n      {...rest}\n    >\n      {icon ? (\n        <span className={styles.icon} aria-hidden=\"true\">\n          {icon}\n        </span>\n      ) : null}\n      <span className={styles.label}>{children}</span>\n      {trailing !== undefined ? <span className={styles.trailing}>{trailing}</span> : null}\n      {count !== undefined ? <span className={styles.count}>{count}</span> : null}\n    </Toggle.Root>\n  )\n})\n"],"mappings":";;;;;;AAqCA,IAAaE,IAAaC,EAA+C,SACvE,EAAE,UAAO,MAAM,SAAM,UAAO,aAAU,cAAW,aAAU,SAAM,GAAGC,KACpE,GACA;CACA,OACE,kBAACC,EAAO,MAAR;EACO;EACL,MAAMC,KAAQ;EACd,WAAWC,EAAGP,EAAO,MAAMQ,CAAS;EACpC,aAAWC;EACX,GAAIL;EALN,UAAA;GAOGM,IACC,kBAAC,QAAD;IAAM,WAAWV,EAAO;IAAM,eAAY;IACvC,UAAAU;GACG,CAAA,IACJ;GACJ,kBAAC,QAAD;IAAM,WAAWV,EAAO;IAAQ;GAAe,CAAA;GAC9CW,MAAa,KAAA,IAAkE,OAAtD,kBAAC,QAAD;IAAM,WAAWX,EAAO;IAAW,UAAAW;GAAe,CAAA;GAC3EC,MAAU,KAAA,IAA4D,OAAhD,kBAAC,QAAD;IAAM,WAAWZ,EAAO;IAAQ,UAAAY;GAAY,CAAA;EACxD;;AAEjB,CAAC"}

package/dist/components/actions/ToggleChip/chip.module.js

@@ -1,10 +1,11 @@
 //#region src/components/actions/ToggleChip/chip.module.css
-var e = "kiln-chip__chip", t = "kiln-chip__icon", n = "kiln-chip__count", r = {
+var e = "kiln-chip__chip", t = "kiln-chip__icon", n = "kiln-chip__trailing", r = "kiln-chip__count", i = {
 	chip: e,
 	icon: t,
-	count: n
+	trailing: n,
+	count: r
 };
 //#endregion
-export { e as chip, n as count, r as default, t as icon };
+export { e as chip, r as count, i as default, t as icon, n as trailing };
 
 //# sourceMappingURL=chip.module.js.map

package/dist/components/actions/ToggleChip/chip.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.module.js","names":["chip","icon","count","chip_module_default"],"sources":["../../../../src/components/actions/ToggleChip/chip.module.css"],"sourcesContent":["/*\n * The chip look, shared by ToggleChip (Radix Toggle) and ChipGroup's items (Radix\n * ToggleGroup items) — both expose `data-state=\"on|off\"`, so one module styles both.\n * Internal: import it only from those two components.\n *\n * Component tokens:\n *   --chip-radius        default var(--radius-chip)\n *   --chip-shadow        resting shadow; default var(--shadow-active) (flat except Fiesta)\n *   --chip-pressed-bg    default var(--color-accent-soft)\n *   --chip-pressed-ink   default var(--color-accent-text)\n *   --chip-pressed-line  default var(--color-accent)\n */\n.chip {\n  --_h: var(--control-sm);\n  --_px: var(--space-3);\n  --_fs: var(--text-sm);\n  --_bg: transparent;\n  --_ink: var(--color-ink-muted);\n  --_line: var(--color-line-strong);\n  --_shadow: var(--chip-shadow, var(--shadow-active));\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4em;\n  min-block-size: var(--_h);\n  padding-inline: var(--_px);\n  padding-block: 0;\n  border: var(--border-width) solid var(--_line);\n  border-radius: var(--chip-radius, var(--radius-chip));\n  background: var(--_bg);\n  color: var(--_ink);\n  box-shadow: var(--_shadow);\n  font-family: var(--font-text);\n  font-size: var(--_fs);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: var(--label-transform);\n  line-height: 1;\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  transition:\n    background-color var(--dur-1) var(--ease-out),\n    border-color var(--dur-1) var(--ease-out),\n    color var(--dur-1) var(--ease-out),\n    box-shadow var(--dur-1) var(--ease-out),\n    translate var(--dur-2) var(--ease-spring);\n}\n\n/* Grow the hit area to a comfortable touch target without changing the visual size. */\n.chip::after {\n  content: '';\n  position: absolute;\n  inset-inline: 0;\n  inset-block: min(0px, calc((var(--_h) - var(--control-lg)) / 2));\n}\n\n.chip[data-size='sm'] {\n  --_h: calc(var(--control-sm) * 0.8125);\n  --_px: var(--space-2);\n  --_fs: var(--text-xs);\n}\n\n@media (hover: hover) {\n  .chip:hover:not(:disabled) {\n    --_ink: var(--color-ink);\n    --_line: var(--color-ink-subtle);\n  }\n}\n\n.chip[data-state='on'] {\n  --_bg: var(--chip-pressed-bg, var(--color-accent-soft));\n  --_ink: var(--chip-pressed-ink, var(--color-accent-text));\n  --_line: var(--chip-pressed-line, var(--color-accent));\n  --_shadow: none;\n\n  translate: var(--active-shift) var(--active-shift);\n}\n@media (hover: hover) {\n  .chip[data-state='on']:hover:not(:disabled) {\n    --_ink: var(--chip-pressed-ink, var(--color-accent-text));\n    --_line: var(--chip-pressed-line, var(--color-accent));\n  }\n}\n\n/* In an invalid ChipGroup the resting chips take the critical edge; pressed ones keep theirs. */\n.chip[data-invalid]:not([data-state='on']) {\n  --_line: var(--tone-critical);\n}\n\n.chip:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n.chip:disabled {\n  cursor: not-allowed;\n  opacity: 0.45;\n  box-shadow: none;\n}\n\n.icon {\n  display: inline-flex;\n  font-size: 1.15em;\n  margin-inline-start: -0.15em;\n}\n\n.count {\n  display: inline-grid;\n  place-items: center;\n  min-inline-size: 1.6em;\n  padding-inline: 0.35em;\n  margin-inline-end: -0.35em;\n  block-size: 1.6em;\n  border-radius: var(--chip-radius, var(--radius-chip));\n  background: var(--color-surface-sunken);\n  color: var(--color-ink-muted);\n  font-family: var(--font-numeric);\n  font-stretch: var(--numeric-stretch);\n  font-variant-numeric: tabular-nums lining-nums;\n  font-size: 0.85em;\n  font-weight: var(--label-weight);\n  letter-spacing: 0;\n  transition:\n    background-color var(--dur-1) var(--ease-out),\n    color var(--dur-1) var(--ease-out);\n}\n.chip[data-state='on'] .count {\n  background: var(--chip-pressed-line, var(--color-accent));\n  color: var(--color-accent-ink);\n}\n"],"mappings":""}
+{"version":3,"file":"chip.module.js","names":["chip","icon","trailing","count","chip_module_default"],"sources":["../../../../src/components/actions/ToggleChip/chip.module.css"],"sourcesContent":["/*\n * The chip look, shared by ToggleChip (Radix Toggle) and ChipGroup's items (Radix\n * ToggleGroup items). Pressed is read from ARIA (aria-pressed, or aria-checked on a\n * single-choice group's radios), not data-state: an asChild trigger wrapped round a chip\n * (Tooltip, Popover) writes its own data-state over the Toggle's.\n * Internal: import it only from those two components.\n *\n * Component tokens:\n *   --chip-radius        default var(--radius-chip)\n *   --chip-shadow        resting shadow; default var(--shadow-active) (flat except Fiesta)\n *   --chip-pressed-bg    default var(--color-accent-soft)\n *   --chip-pressed-ink   default var(--color-accent-text)\n *   --chip-pressed-line  default var(--color-accent)\n */\n.chip {\n  --_h: var(--control-sm);\n  --_px: var(--space-3);\n  --_fs: var(--text-sm);\n  --_bg: transparent;\n  --_ink: var(--color-ink-muted);\n  --_line: var(--color-line-strong);\n  --_shadow: var(--chip-shadow, var(--shadow-active));\n\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.4em;\n  min-block-size: var(--_h);\n  padding-inline: var(--_px);\n  padding-block: 0;\n  border: var(--border-width) solid var(--_line);\n  border-radius: var(--chip-radius, var(--radius-chip));\n  background: var(--_bg);\n  color: var(--_ink);\n  box-shadow: var(--_shadow);\n  font-family: var(--font-text);\n  font-size: var(--_fs);\n  font-weight: var(--label-weight);\n  letter-spacing: var(--label-tracking);\n  text-transform: var(--label-transform);\n  line-height: 1;\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n  transition:\n    background-color var(--dur-1) var(--ease-out),\n    border-color var(--dur-1) var(--ease-out),\n    color var(--dur-1) var(--ease-out),\n    box-shadow var(--dur-1) var(--ease-out),\n    translate var(--dur-2) var(--ease-spring);\n}\n\n/* Grow the hit area to a comfortable touch target without changing the visual size. */\n.chip::after {\n  content: '';\n  position: absolute;\n  inset-inline: 0;\n  inset-block: min(0px, calc((var(--_h) - var(--control-lg)) / 2));\n}\n\n.chip[data-size='sm'] {\n  --_h: calc(var(--control-sm) * 0.8125);\n  --_px: var(--space-2);\n  --_fs: var(--text-xs);\n}\n\n@media (hover: hover) {\n  .chip:hover:not(:disabled, [aria-disabled='true']) {\n    --_ink: var(--color-ink);\n    --_line: var(--color-ink-subtle);\n  }\n}\n\n.chip:is([aria-pressed='true'], [aria-checked='true']) {\n  --_bg: var(--chip-pressed-bg, var(--color-accent-soft));\n  --_ink: var(--chip-pressed-ink, var(--color-accent-text));\n  --_line: var(--chip-pressed-line, var(--color-accent));\n  --_shadow: none;\n\n  translate: var(--active-shift) var(--active-shift);\n}\n@media (hover: hover) {\n  .chip:is([aria-pressed='true'], [aria-checked='true']):hover:not(\n      :disabled,\n      [aria-disabled='true']\n    ) {\n    --_ink: var(--chip-pressed-ink, var(--color-accent-text));\n    --_line: var(--chip-pressed-line, var(--color-accent));\n  }\n}\n\n/* In an invalid ChipGroup the resting chips take the critical edge; pressed ones keep theirs. */\n.chip[data-invalid]:not([aria-pressed='true'], [aria-checked='true']) {\n  --_line: var(--tone-critical);\n}\n\n.chip:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n.chip:is(:disabled, [aria-disabled='true']) {\n  cursor: not-allowed;\n  opacity: 0.45;\n  box-shadow: none;\n}\n\n.icon {\n  display: inline-flex;\n  font-size: 1.15em;\n  margin-inline-start: -0.15em;\n}\n\n.trailing {\n  display: inline-flex;\n  align-items: center;\n}\n\n.count {\n  display: inline-grid;\n  place-items: center;\n  min-inline-size: 1.6em;\n  padding-inline: 0.35em;\n  margin-inline-end: -0.35em;\n  block-size: 1.6em;\n  border-radius: var(--chip-radius, var(--radius-chip));\n  background: var(--color-surface-sunken);\n  color: var(--color-ink-muted);\n  font-family: var(--font-numeric);\n  font-stretch: var(--numeric-stretch);\n  font-variant-numeric: tabular-nums lining-nums;\n  font-size: 0.85em;\n  font-weight: var(--label-weight);\n  letter-spacing: 0;\n  transition:\n    background-color var(--dur-1) var(--ease-out),\n    color var(--dur-1) var(--ease-out);\n}\n.chip:is([aria-pressed='true'], [aria-checked='true']) .count {\n  background: var(--chip-pressed-line, var(--color-accent));\n  color: var(--color-accent-ink);\n}\n"],"mappings":""}

package/dist/components/display/Avatar/Avatar.d.ts

@@ -26,12 +26,12 @@ export interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'colo
  * @remarks
  * `Avatar` shows a picture when there is one and falls back to initials when there isn't (or when
  * the image fails to load). The fallback colour comes from the name, so the same person gets the
- * same colour on every screen. Its shape is the theme's `--radius-avatar`: round in Paper and
- * Fiesta, a rounded square in Monograph.
+ * same colour on every screen. Its shape is the theme's `--radius-avatar`: round in Paper, Fiesta
+ * and Riso, a rounded square in Monograph and Ledger, and nearly square in Flightdeck.
  *
  * @privateRemarks
  * A person or entity. Image with an initials fallback on a deterministic categorical
  * colour. Shape comes from `--radius-avatar` (rounded square in Monograph/Ledger, round in
- * Fiesta).
+ * Paper/Fiesta/Riso, nearly square in Flightdeck).
  */
 export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/display/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":["Avatar","AvatarPrimitive","styles","Avatar_module_default","Avatar$1","forwardRef","rest","groupSize","useContext","AvatarSizeContext","label","alt","name","decorative","text","initials","getInitials","glyphs","Avatar","cx","className","size","color","avatarColor","ring","src"],"sources":["../../../../src/components/display/Avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef, useContext, type HTMLAttributes } from 'react'\nimport { Avatar as AvatarPrimitive } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { AvatarSizeContext } from './AvatarContext'\nimport { avatarColor, getInitials } from './avatarUtils'\nimport type { AvatarColor, AvatarSize } from './avatarUtils'\nimport styles from './Avatar.module.css'\n\nexport interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {\n  /** Image URL. While loading, or if it fails, the initials fallback shows. */\n  src?: string\n  /** Accessible name. Defaults to `name`. Pass `\"\"` when a visible label sits beside it. */\n  alt?: string\n  /** Person or thing. Drives the initials and the fallback colour. */\n  name: string\n  /** Default `md`, or the enclosing `AvatarGroup`'s size. */\n  size?: AvatarSize\n  /** Override the name-derived fallback colour (e.g. a member's assigned colour). */\n  color?: AvatarColor\n  /** A highlight ring — marks \"you\" in a leaderboard or roster. */\n  ring?: boolean\n  /**\n   * Replace the derived initials — a company's short code (\"NWS\"), a logo's letters. Up to three\n   * characters; three are set smaller so they fit the frame.\n   */\n  initials?: string\n}\n\n/**\n * A person or organisation, as an image with an initials fallback on a colour that's always the\n * same for that name.\n *\n * @remarks\n * `Avatar` shows a picture when there is one and falls back to initials when there isn't (or when\n * the image fails to load). The fallback colour comes from the name, so the same person gets the\n * same colour on every screen. Its shape is the theme's `--radius-avatar`: round in Paper and\n * Fiesta, a rounded square in Monograph.\n *\n * @privateRemarks\n * A person or entity. Image with an initials fallback on a deterministic categorical\n * colour. Shape comes from `--radius-avatar` (rounded square in Monograph/Ledger, round in\n * Fiesta).\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(\n  { src, alt, name, size, color, ring = false, initials, className, ...rest },\n  ref,\n) {\n  const groupSize = useContext(AvatarSizeContext)\n  const label = alt ?? name\n  const decorative = label === ''\n  const text = initials?.trim() ? initials.trim().toLocaleUpperCase() : getInitials(name)\n  const glyphs = Array.from(text).length\n  return (\n    <AvatarPrimitive.Root\n      ref={ref}\n      className={cx(styles.avatar, className)}\n      data-size={size ?? groupSize ?? 'md'}\n      data-color={color ?? avatarColor(name)}\n      data-ring={ring || undefined}\n      {...rest}\n    >\n      {src ? <AvatarPrimitive.Image className={styles.image} src={src} alt={label} /> : null}\n      <AvatarPrimitive.Fallback\n        className={styles.fallback}\n        role={decorative ? undefined : 'img'}\n        aria-label={decorative ? undefined : label}\n        aria-hidden={decorative || undefined}\n        delayMs={src ? 300 : undefined}\n        data-glyphs={glyphs > 2 ? 'many' : undefined}\n      >\n        <span aria-hidden=\"true\">{text}</span>\n      </AvatarPrimitive.Fallback>\n    </AvatarPrimitive.Root>\n  )\n})\n"],"mappings":";;;;;;;;AA2CA,IAAaA,IAASK,EAAyC,SAC7D,EAAE,QAAK,QAAK,SAAM,SAAM,UAAO,UAAO,IAAO,aAAU,cAAW,GAAGC,KACrE,GACA;CACA,IAAMC,IAAYC,EAAWC,CAAiB,GACxCC,IAAQC,KAAOC,GACfC,IAAaH,MAAU,IACvBI,IAAOC,GAAU,KAAK,IAAIA,EAAS,KAAK,CAAC,CAAC,kBAAkB,IAAIC,EAAYJ,CAAI,GAChFK,IAAS,MAAM,KAAKH,CAAI,CAAC,CAAC;CAChC,OACE,kBAACb,EAAgB,MAAjB;EACO;EACL,WAAWkB,EAAGjB,EAAO,QAAQkB,CAAS;EACtC,aAAWC,KAAQd,KAAa;EAChC,cAAYe,KAASC,EAAYX,CAAI;EACrC,aAAWY,KAAQ,KAAA;EACnB,GAAIlB;EANN,UAAA,CAQGmB,IAAM,kBAACxB,EAAgB,OAAjB;GAAuB,WAAWC,EAAO;GAAY;GAAK,KAAKQ;EAAQ,CAAA,IAAI,MAClF,kBAACT,EAAgB,UAAjB;GACE,WAAWC,EAAO;GAClB,MAAMW,IAAa,KAAA,IAAY;GAC/B,cAAYA,IAAa,KAAA,IAAYH;GACrC,eAAaG,KAAc,KAAA;GAC3B,SAASY,IAAM,MAAM,KAAA;GACrB,eAAaR,IAAS,IAAI,SAAS,KAAA;GAEnC,UAAA,kBAAC,QAAD;IAAM,eAAY;IAAQ,UAAAH;GAAW,CAAA;EACb,CAAA,CACN;;AAE1B,CAAC"}
+{"version":3,"file":"Avatar.js","names":["Avatar","AvatarPrimitive","styles","Avatar_module_default","Avatar$1","forwardRef","rest","groupSize","useContext","AvatarSizeContext","label","alt","name","decorative","text","initials","getInitials","glyphs","Avatar","cx","className","size","color","avatarColor","ring","src"],"sources":["../../../../src/components/display/Avatar/Avatar.tsx"],"sourcesContent":["import { forwardRef, useContext, type HTMLAttributes } from 'react'\nimport { Avatar as AvatarPrimitive } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { AvatarSizeContext } from './AvatarContext'\nimport { avatarColor, getInitials } from './avatarUtils'\nimport type { AvatarColor, AvatarSize } from './avatarUtils'\nimport styles from './Avatar.module.css'\n\nexport interface AvatarProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {\n  /** Image URL. While loading, or if it fails, the initials fallback shows. */\n  src?: string\n  /** Accessible name. Defaults to `name`. Pass `\"\"` when a visible label sits beside it. */\n  alt?: string\n  /** Person or thing. Drives the initials and the fallback colour. */\n  name: string\n  /** Default `md`, or the enclosing `AvatarGroup`'s size. */\n  size?: AvatarSize\n  /** Override the name-derived fallback colour (e.g. a member's assigned colour). */\n  color?: AvatarColor\n  /** A highlight ring — marks \"you\" in a leaderboard or roster. */\n  ring?: boolean\n  /**\n   * Replace the derived initials — a company's short code (\"NWS\"), a logo's letters. Up to three\n   * characters; three are set smaller so they fit the frame.\n   */\n  initials?: string\n}\n\n/**\n * A person or organisation, as an image with an initials fallback on a colour that's always the\n * same for that name.\n *\n * @remarks\n * `Avatar` shows a picture when there is one and falls back to initials when there isn't (or when\n * the image fails to load). The fallback colour comes from the name, so the same person gets the\n * same colour on every screen. Its shape is the theme's `--radius-avatar`: round in Paper, Fiesta\n * and Riso, a rounded square in Monograph and Ledger, and nearly square in Flightdeck.\n *\n * @privateRemarks\n * A person or entity. Image with an initials fallback on a deterministic categorical\n * colour. Shape comes from `--radius-avatar` (rounded square in Monograph/Ledger, round in\n * Paper/Fiesta/Riso, nearly square in Flightdeck).\n */\nexport const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(\n  { src, alt, name, size, color, ring = false, initials, className, ...rest },\n  ref,\n) {\n  const groupSize = useContext(AvatarSizeContext)\n  const label = alt ?? name\n  const decorative = label === ''\n  const text = initials?.trim() ? initials.trim().toLocaleUpperCase() : getInitials(name)\n  const glyphs = Array.from(text).length\n  return (\n    <AvatarPrimitive.Root\n      ref={ref}\n      className={cx(styles.avatar, className)}\n      data-size={size ?? groupSize ?? 'md'}\n      data-color={color ?? avatarColor(name)}\n      data-ring={ring || undefined}\n      {...rest}\n    >\n      {src ? <AvatarPrimitive.Image className={styles.image} src={src} alt={label} /> : null}\n      <AvatarPrimitive.Fallback\n        className={styles.fallback}\n        role={decorative ? undefined : 'img'}\n        aria-label={decorative ? undefined : label}\n        aria-hidden={decorative || undefined}\n        delayMs={src ? 300 : undefined}\n        data-glyphs={glyphs > 2 ? 'many' : undefined}\n      >\n        <span aria-hidden=\"true\">{text}</span>\n      </AvatarPrimitive.Fallback>\n    </AvatarPrimitive.Root>\n  )\n})\n"],"mappings":";;;;;;;;AA2CA,IAAaA,IAASK,EAAyC,SAC7D,EAAE,QAAK,QAAK,SAAM,SAAM,UAAO,UAAO,IAAO,aAAU,cAAW,GAAGC,KACrE,GACA;CACA,IAAMC,IAAYC,EAAWC,CAAiB,GACxCC,IAAQC,KAAOC,GACfC,IAAaH,MAAU,IACvBI,IAAOC,GAAU,KAAK,IAAIA,EAAS,KAAK,CAAC,CAAC,kBAAkB,IAAIC,EAAYJ,CAAI,GAChFK,IAAS,MAAM,KAAKH,CAAI,CAAC,CAAC;CAChC,OACE,kBAACb,EAAgB,MAAjB;EACO;EACL,WAAWkB,EAAGjB,EAAO,QAAQkB,CAAS;EACtC,aAAWC,KAAQd,KAAa;EAChC,cAAYe,KAASC,EAAYX,CAAI;EACrC,aAAWY,KAAQ,KAAA;EACnB,GAAIlB;EANN,UAAA,CAQGmB,IAAM,kBAACxB,EAAgB,OAAjB;GAAuB,WAAWC,EAAO;GAAY;GAAK,KAAKQ;EAAQ,CAAA,IAAI,MAClF,kBAACT,EAAgB,UAAjB;GACE,WAAWC,EAAO;GAClB,MAAMW,IAAa,KAAA,IAAY;GAC/B,cAAYA,IAAa,KAAA,IAAYH;GACrC,eAAaG,KAAc,KAAA;GAC3B,SAASY,IAAM,MAAM,KAAA;GACrB,eAAaR,IAAS,IAAI,SAAS,KAAA;GAEnC,UAAA,kBAAC,QAAD;IAAM,eAAY;IAAQ,UAAAH;GAAW,CAAA;EACb,CAAA,CACN;;AAE1B,CAAC"}

package/dist/components/display/AvatarGroup/AvatarGroup.d.ts

@@ -1,6 +1,6 @@
 import { type HTMLAttributes } from 'react';
 import { type AvatarSize } from '../Avatar/index.js';
-export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
+export interface AvatarGroupProps extends HTMLAttributes<HTMLElement> {
     /** Show at most this many avatars; the rest collapse into a "+N" count. */
     max?: number;
     /** Size for every avatar in the stack. Default `sm`. */
@@ -20,4 +20,4 @@ export interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {
  *
  * <AvatarGroup max={4} aria-label="Members"><Avatar name="Noor" />…</AvatarGroup>
  */
-export declare const AvatarGroup: import("react").ForwardRefExoticComponent<AvatarGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AvatarGroup: import("react").ForwardRefExoticComponent<AvatarGroupProps & import("react").RefAttributes<HTMLElement>>;

package/dist/components/display/AvatarGroup/AvatarGroup.js

@@ -8,7 +8,7 @@ var c = i(function({ max: i, size: c = "sm", className: l, children: u, ...d },
 	let p = r.toArray(u).filter(a), m = i !== void 0 && i >= 0 && p.length > i ? i : p.length, h = p.length - m;
 	return /* @__PURE__ */ o(t.Provider, {
 		value: c,
-		children: /* @__PURE__ */ s("div", {
+		children: /* @__PURE__ */ s("span", {
 			ref: f,
 			role: "group",
 			className: e(n.group, l),

package/dist/components/display/AvatarGroup/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","names":["styles","AvatarGroup_module_default","AvatarGroup","forwardRef","rest","items","Children","children","isValidElement","limit","max","overflow","AvatarSizeContext","size","cx","className"],"sources":["../../../../src/components/display/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import { Children, forwardRef, isValidElement, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport { AvatarSizeContext, type AvatarSize } from '#components/display/Avatar'\nimport styles from './AvatarGroup.module.css'\n\nexport interface AvatarGroupProps extends HTMLAttributes<HTMLDivElement> {\n  /** Show at most this many avatars; the rest collapse into a \"+N\" count. */\n  max?: number\n  /** Size for every avatar in the stack. Default `sm`. */\n  size?: AvatarSize\n  /** Accessible name for the group, e.g. \"Reacted: Noor, Kofi and 3 others\". */\n  'aria-label'?: string\n}\n\n/**\n * An overlapping row of avatars, like who's on a crew or who reacted, with a count for the rest.\n *\n * @remarks\n * `AvatarGroup` overlaps its `Avatar` children and, past `max`, replaces the rest with a count.\n * Give it an `aria-label` that names the group.\n *\n * @privateRemarks\n * An overlapping stack of `Avatar`s — who reacted, who owns a project, who's in a group.\n *\n * <AvatarGroup max={4} aria-label=\"Members\"><Avatar name=\"Noor\" />…</AvatarGroup>\n */\nexport const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(function AvatarGroup(\n  { max, size = 'sm', className, children, ...rest },\n  ref,\n) {\n  const items = Children.toArray(children).filter(isValidElement)\n  const limit = max !== undefined && max >= 0 && items.length > max ? max : items.length\n  const overflow = items.length - limit\n  return (\n    <AvatarSizeContext.Provider value={size}>\n      <div\n        ref={ref}\n        role=\"group\"\n        className={cx(styles.group, className)}\n        data-size={size}\n        {...rest}\n      >\n        {items.slice(0, limit)}\n        {overflow > 0 ? (\n          <span\n            className={styles.more}\n            data-size={size}\n            role=\"img\"\n            aria-label={`${String(overflow)} more`}\n          >\n            <span aria-hidden=\"true\">+{overflow}</span>\n          </span>\n        ) : null}\n      </div>\n    </AvatarSizeContext.Provider>\n  )\n})\n"],"mappings":";;;;;;AA0BA,IAAaE,IAAcC,EAA6C,SACtE,EAAE,QAAK,UAAO,MAAM,cAAW,aAAU,GAAGC,KAC5C,GACA;CACA,IAAMC,IAAQC,EAAS,QAAQC,CAAQ,CAAC,CAAC,OAAOC,CAAc,GACxDC,IAAQC,MAAQ,KAAA,KAAaA,KAAO,KAAKL,EAAM,SAASK,IAAMA,IAAML,EAAM,QAC1EM,IAAWN,EAAM,SAASI;CAChC,OACE,kBAACG,EAAkB,UAAnB;EAA4B,OAAOC;EACjC,UAAA,kBAAC,OAAD;GACO;GACL,MAAK;GACL,WAAWC,EAAGd,EAAO,OAAOe,CAAS;GACrC,aAAWF;GACX,GAAIT;GALN,UAAA,CAOGC,EAAM,MAAM,GAAGI,CAAK,GACpBE,IAAW,IACV,kBAAC,QAAD;IACE,WAAWX,EAAO;IAClB,aAAWa;IACX,MAAK;IACL,cAAY,GAAG,OAAOF,CAAQ,EAAE;IAEhC,UAAA,kBAAC,QAAD;KAAM,eAAY;KAAlB,UAAA,CAAyB,KAAEA,CAAe;;GACtC,CAAA,IACJ,IACD;;CACqB,CAAA;AAEhC,CAAC"}
+{"version":3,"file":"AvatarGroup.js","names":["styles","AvatarGroup_module_default","AvatarGroup","forwardRef","rest","items","Children","children","isValidElement","limit","max","overflow","AvatarSizeContext","size","cx","className"],"sources":["../../../../src/components/display/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import { Children, forwardRef, isValidElement, type HTMLAttributes } from 'react'\nimport { cx } from '#utils/cx'\nimport { AvatarSizeContext, type AvatarSize } from '#components/display/Avatar'\nimport styles from './AvatarGroup.module.css'\n\nexport interface AvatarGroupProps extends HTMLAttributes<HTMLElement> {\n  /** Show at most this many avatars; the rest collapse into a \"+N\" count. */\n  max?: number\n  /** Size for every avatar in the stack. Default `sm`. */\n  size?: AvatarSize\n  /** Accessible name for the group, e.g. \"Reacted: Noor, Kofi and 3 others\". */\n  'aria-label'?: string\n}\n\n/**\n * An overlapping row of avatars, like who's on a crew or who reacted, with a count for the rest.\n *\n * @remarks\n * `AvatarGroup` overlaps its `Avatar` children and, past `max`, replaces the rest with a count.\n * Give it an `aria-label` that names the group.\n *\n * @privateRemarks\n * An overlapping stack of `Avatar`s — who reacted, who owns a project, who's in a group.\n *\n * <AvatarGroup max={4} aria-label=\"Members\"><Avatar name=\"Noor\" />…</AvatarGroup>\n */\nexport const AvatarGroup = forwardRef<HTMLElement, AvatarGroupProps>(function AvatarGroup(\n  { max, size = 'sm', className, children, ...rest },\n  ref,\n) {\n  const items = Children.toArray(children).filter(isValidElement)\n  const limit = max !== undefined && max >= 0 && items.length > max ? max : items.length\n  const overflow = items.length - limit\n  return (\n    <AvatarSizeContext.Provider value={size}>\n      {/* A span, like Avatar, so a group can sit inside a button or a line of text. */}\n      <span\n        ref={ref}\n        role=\"group\"\n        className={cx(styles.group, className)}\n        data-size={size}\n        {...rest}\n      >\n        {items.slice(0, limit)}\n        {overflow > 0 ? (\n          <span\n            className={styles.more}\n            data-size={size}\n            role=\"img\"\n            aria-label={`${String(overflow)} more`}\n          >\n            <span aria-hidden=\"true\">+{overflow}</span>\n          </span>\n        ) : null}\n      </span>\n    </AvatarSizeContext.Provider>\n  )\n})\n"],"mappings":";;;;;;AA0BA,IAAaE,IAAcC,EAA0C,SACnE,EAAE,QAAK,UAAO,MAAM,cAAW,aAAU,GAAGC,KAC5C,GACA;CACA,IAAMC,IAAQC,EAAS,QAAQC,CAAQ,CAAC,CAAC,OAAOC,CAAc,GACxDC,IAAQC,MAAQ,KAAA,KAAaA,KAAO,KAAKL,EAAM,SAASK,IAAMA,IAAML,EAAM,QAC1EM,IAAWN,EAAM,SAASI;CAChC,OACE,kBAACG,EAAkB,UAAnB;EAA4B,OAAOC;EAEjC,UAAA,kBAAC,QAAD;GACO;GACL,MAAK;GACL,WAAWC,EAAGd,EAAO,OAAOe,CAAS;GACrC,aAAWF;GACX,GAAIT;GALN,UAAA,CAOGC,EAAM,MAAM,GAAGI,CAAK,GACpBE,IAAW,IACV,kBAAC,QAAD;IACE,WAAWX,EAAO;IAClB,aAAWa;IACX,MAAK;IACL,cAAY,GAAG,OAAOF,CAAQ,EAAE;IAEhC,UAAA,kBAAC,QAAD;KAAM,eAAY;KAAlB,UAAA,CAAyB,KAAEA,CAAe;;GACtC,CAAA,IACJ,IACA;;CACoB,CAAA;AAEhC,CAAC"}

package/dist/components/display/Card/Card.d.ts

@@ -1,16 +1,19 @@
 import { type HTMLAttributes } from 'react';
 import { type Responsive } from '../../../utils/responsive.js';
-import { type Space } from '../../../utils/tokens.js';
-export type CardVariant = 'plain' | 'outline' | 'raised';
+import { type CategoryColor, type Space } from '../../../utils/tokens.js';
+export type CardVariant = 'plain' | 'outline' | 'raised' | 'live' | 'placeholder';
 export type CardTitleLevel = 2 | 3 | 4 | 5 | 6;
 export type CardMediaRatio = '1/1' | '4/3' | '3/2' | '16/9' | '21/9';
-export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+export interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
     /**
      * Edge treatment. `outline` (default) is a hairline; `plain` is a fill with no edge;
      * `raised` stands on `--shadow-surface` (nothing extra in Monograph/Ledger, the print
-     * offset in Fiesta).
+     * offset in Fiesta). `live` is a heavier keyline in the accent, for something happening now;
+     * `placeholder` has no fill and crop marks at its corners, for a slot not yet decided.
      */
     variant?: CardVariant;
+    /** A categorical colour drawn as a keyline along the top: whose card it is, matching their `Tag`. */
+    color?: CategoryColor;
     /** Inner padding as a space step. Responsive. Default `5`. */
     padding?: Responsive<Space>;
     /** Hover/press affordance for cards that *are* the action. Implied by `asChild`. */

package/dist/components/display/Card/Card.js

@@ -7,16 +7,17 @@ import { forwardRef as o } from "react";
 import { jsx as s } from "react/jsx-runtime";
 import { Slot as c } from "radix-ui";
 //#region src/components/display/Card/Card.tsx
-var l = o(function({ variant: i = "outline", padding: o, interactive: l = !1, asChild: u = !1, className: d, style: f, ...p }, m) {
-	let h = u ? c.Root : "div";
-	return /* @__PURE__ */ s(h, {
-		ref: m,
-		className: e(a.card, d),
+var l = o(function({ variant: i = "outline", padding: o, interactive: l = !1, asChild: u = !1, color: d, className: f, style: p, ...m }, h) {
+	let g = u ? c.Root : "div";
+	return /* @__PURE__ */ s(g, {
+		ref: h,
+		className: e(a.card, f),
 		"data-kiln-component": "",
 		"data-variant": i,
+		"data-color": d,
 		"data-interactive": l || u || void 0,
-		style: t(n("card-padding", o, r), f),
-		...p
+		style: t(n("card-padding", o, r), p),
+		...m
 	});
 }), u = o(function({ ratio: t, inset: n = !1, className: r, ...i }, o) {
 	return /* @__PURE__ */ s("div", {

package/dist/components/display/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","names":["styles","Card_module_default","CardRoot","forwardRef","rest","Comp","asChild","Slot","cx","className","variant","interactive","mergeStyles","responsiveVars","padding","space","style","CardMedia","ratio","inset","CardHeader","CardTitle","Tag","headingTag","level","CardDescription","CardBody","CardFooter","CardMeta","Card"],"sources":["../../../../src/components/display/Card/Card.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { Slot } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { mergeStyles, responsiveVars, type Responsive } from '#utils/responsive'\nimport { space, type Space } from '#utils/tokens'\nimport styles from './Card.module.css'\nimport { headingTag } from '#utils/heading'\n\nexport type CardVariant = 'plain' | 'outline' | 'raised'\nexport type CardTitleLevel = 2 | 3 | 4 | 5 | 6\nexport type CardMediaRatio = '1/1' | '4/3' | '3/2' | '16/9' | '21/9'\n\nexport interface CardProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Edge treatment. `outline` (default) is a hairline; `plain` is a fill with no edge;\n   * `raised` stands on `--shadow-surface` (nothing extra in Monograph/Ledger, the print\n   * offset in Fiesta).\n   */\n  variant?: CardVariant\n  /** Inner padding as a space step. Responsive. Default `5`. */\n  padding?: Responsive<Space>\n  /** Hover/press affordance for cards that *are* the action. Implied by `asChild`. */\n  interactive?: boolean\n  /**\n   * Render the single child element as the card — usually a link, so the whole card is\n   * one target: `<Card asChild><a href=\"/projects/atlas\">…</a></Card>`. Don't nest other\n   * links or buttons inside a linked card.\n   */\n  asChild?: boolean\n}\n\n/**\n * A self-contained object, like a route, a ticket or a project. Use it sparingly; most content\n * reads better without a box.\n *\n * @remarks\n * A `Card` frames one object you could pick up, open or drag. Before reaching for one, try a\n * `List`, a `Table` or a plain section: three identical cards in a row is the most generic layout\n * there is, and most content is better as a document than as a set of boxes.\n *\n * ## Slots\n *\n * `Card.Media`, `Card.Header` (with `Card.Title` and `Card.Meta`), `Card.Description`, `Card.Body`\n * and `Card.Footer`. Use only the ones the object needs. `variant` is `outline` (the default, a\n * hairline), `raised` (the theme's surface shadow) or `plain` (a fill and no edge). `padding`\n * takes a space step.\n *\n * @privateRemarks\n * A self-contained object: a project, a release, a plan summary. Use sparingly —\n * most content reads better as a List, Table or plain section (DESIGN §2).\n *\n * <Card><Card.Header><Card.Title>Atlas</Card.Title><Card.Meta>2026</Card.Meta></Card.Header>…</Card>\n */\nconst CardRoot = forwardRef<HTMLDivElement, CardProps>(function Card(\n  { variant = 'outline', padding, interactive = false, asChild = false, className, style, ...rest },\n  ref,\n) {\n  const Comp = asChild ? Slot.Root : 'div'\n  return (\n    <Comp\n      ref={ref}\n      className={cx(styles.card, className)}\n      data-kiln-component=\"\"\n      data-variant={variant}\n      data-interactive={interactive || asChild || undefined}\n      style={mergeStyles(responsiveVars('card-padding', padding, space), style)}\n      {...rest}\n    />\n  )\n})\n\nexport interface CardMediaProps extends HTMLAttributes<HTMLDivElement> {\n  /** Crop the media to a fixed ratio (the child img/video is fitted with `cover`). */\n  ratio?: CardMediaRatio\n  /**\n   * Sit inside the padding instead of bleeding to the edges. The corner radius is then\n   * the nested radius (outer − padding).\n   */\n  inset?: boolean\n}\n\n/** Image/video slot. Bleeds to the card's edges by default; put it first (or last). */\nconst CardMedia = forwardRef<HTMLDivElement, CardMediaProps>(function CardMedia(\n  { ratio, inset = false, className, ...rest },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cx(styles.media, className)}\n      data-ratio={ratio}\n      data-inset={inset || undefined}\n      {...rest}\n    />\n  )\n})\n\nconst CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function CardHeader(\n  { className, ...rest },\n  ref,\n) {\n  return <div ref={ref} className={cx(styles.header, className)} {...rest} />\n})\n\nexport interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {\n  /** Heading element, to fit the page outline. Visual size doesn't change. Default `3`. */\n  level?: CardTitleLevel\n}\n\nconst CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps>(function CardTitle(\n  { level = 3, className, ...rest },\n  ref,\n) {\n  const Tag = headingTag(level)\n  return <Tag ref={ref} className={cx(styles.title, className)} {...rest} />\n})\n\nconst CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(\n  function CardDescription({ className, ...rest }, ref) {\n    return <p ref={ref} className={cx(styles.description, className)} {...rest} />\n  },\n)\n\nconst CardBody = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function CardBody(\n  { className, ...rest },\n  ref,\n) {\n  return <div ref={ref} className={cx(styles.body, className)} {...rest} />\n})\n\n/** Actions or summary pinned to the bottom of the card (pushes down in equal-height grids). */\nconst CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function CardFooter(\n  { className, ...rest },\n  ref,\n) {\n  return <div ref={ref} className={cx(styles.footer, className)} {...rest} />\n})\n\n/** Small secondary facts — year, stack, due date. Numbers are tabular. */\nconst CardMeta = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function CardMeta(\n  { className, ...rest },\n  ref,\n) {\n  return <div ref={ref} className={cx(styles.meta, className)} {...rest} />\n})\n\nexport const Card = Object.assign(CardRoot, {\n  Media: CardMedia,\n  Header: CardHeader,\n  Title: CardTitle,\n  Description: CardDescription,\n  Body: CardBody,\n  Footer: CardFooter,\n  Meta: CardMeta,\n})\n"],"mappings":";;;;;;;;;AAqDA,IAAME,IAAWC,EAAsC,SACrD,EAAE,aAAU,WAAW,YAAS,iBAAc,IAAO,aAAU,IAAO,cAAW,UAAO,GAAGC,KAC3F,GACA;CACA,IAAMC,IAAOC,IAAUC,EAAK,OAAO;CACnC,OACE,kBAACF,GAAD;EACO;EACL,WAAWG,EAAGR,EAAO,MAAMS,CAAS;EACpC,uBAAoB;EACpB,gBAAcC;EACd,oBAAkBC,KAAeL,KAAW,KAAA;EAC5C,OAAOM,EAAYC,EAAe,gBAAgBC,GAASC,CAAK,GAAGC,CAAK;EACxE,GAAIZ;CACL,CAAA;AAEL,CAAC,GAaKa,IAAYd,EAA2C,SAC3D,EAAE,UAAO,WAAQ,IAAO,cAAW,GAAGC,KACtC,GACA;CACA,OACE,kBAAC,OAAD;EACO;EACL,WAAWI,EAAGR,EAAO,OAAOS,CAAS;EACrC,cAAYS;EACZ,cAAYC,KAAS,KAAA;EACrB,GAAIf;CACL,CAAA;AAEL,CAAC,GAEKgB,IAAajB,EAA2D,SAC5E,EAAE,cAAW,GAAGC,KAChB,GACA;CACA,OAAO,kBAAC,OAAD;EAAU;EAAK,WAAWI,EAAGR,EAAO,QAAQS,CAAS;EAAG,GAAIL;CAAO,CAAA;AAC5E,CAAC,GAOKiB,IAAYlB,EAA+C,SAC/D,EAAE,WAAQ,GAAG,cAAW,GAAGC,KAC3B,GACA;CACA,IAAMkB,IAAMC,EAAWC,CAAK;CAC5B,OAAO,kBAACF,GAAD;EAAU;EAAK,WAAWd,EAAGR,EAAO,OAAOS,CAAS;EAAG,GAAIL;CAAO,CAAA;AAC3E,CAAC,GAEKqB,IAAkBtB,EACtB,SAAyB,EAAE,cAAW,GAAGC,KAAQ,GAAK;CACpD,OAAO,kBAAC,KAAD;EAAQ;EAAK,WAAWI,EAAGR,EAAO,aAAaS,CAAS;EAAG,GAAIL;CAAO,CAAA;AAC/E,CACF,GAEMsB,IAAWvB,EAA2D,SAC1E,EAAE,cAAW,GAAGC,KAChB,GACA;CACA,OAAO,kBAAC,OAAD;EAAU;EAAK,WAAWI,EAAGR,EAAO,MAAMS,CAAS;EAAG,GAAIL;CAAO,CAAA;AAC1E,CAAC,GAGKuB,IAAaxB,EAA2D,SAC5E,EAAE,cAAW,GAAGC,KAChB,GACA;CACA,OAAO,kBAAC,OAAD;EAAU;EAAK,WAAWI,EAAGR,EAAO,QAAQS,CAAS;EAAG,GAAIL;CAAO,CAAA;AAC5E,CAAC,GAGKwB,IAAWzB,EAA2D,SAC1E,EAAE,cAAW,GAAGC,KAChB,GACA;CACA,OAAO,kBAAC,OAAD;EAAU;EAAK,WAAWI,EAAGR,EAAO,MAAMS,CAAS;EAAG,GAAIL;CAAO,CAAA;AAC1E,CAAC,GAEYyB,IAAO,OAAO,OAAO3B,GAAU;CAC1C,OAAOe;CACP,QAAQG;CACR,OAAOC;CACP,aAAaI;CACb,MAAMC;CACN,QAAQC;CACR,MAAMC;AACR,CAAC"}
+{"version":3,"file":"Card.js","names":["styles","Card_module_default","CardRoot","forwardRef","rest","Comp","asChild","Slot","cx","className","variant","color","interactive","mergeStyles","responsiveVars","padding","space","style","CardMedia","ratio","inset","CardHeader","CardTitle","Tag","headingTag","level","CardDescription","CardBody","CardFooter","CardMeta","Card"],"sources":["../../../../src/components/display/Card/Card.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react'\nimport { Slot } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport { mergeStyles, responsiveVars, type Responsive } from '#utils/responsive'\nimport { space, type CategoryColor, type Space } from '#utils/tokens'\nimport styles from './Card.module.css'\nimport { headingTag } from '#utils/heading'\n\nexport type CardVariant = 'plain' | 'outline' | 'raised' | 'live' | 'placeholder'\nexport type CardTitleLevel = 2 | 3 | 4 | 5 | 6\nexport type CardMediaRatio = '1/1' | '4/3' | '3/2' | '16/9' | '21/9'\n\nexport interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {\n  /**\n   * Edge treatment. `outline` (default) is a hairline; `plain` is a fill with no edge;\n   * `raised` stands on `--shadow-surface` (nothing extra in Monograph/Ledger, the print\n   * offset in Fiesta). `live` is a heavier keyline in the accent, for something happening now;\n   * `placeholder` has no fill and crop marks at its corners, for a slot not yet decided.\n   */\n  variant?: CardVariant\n  /** A categorical colour drawn as a keyline along the top: whose card it is, matching their `Tag`. */\n  color?: CategoryColor\n  /** Inner padding as a space step. Responsive. Default `5`. */\n  padding?: Responsive<Space>\n  /** Hover/press affordance for cards that *are* the action. Implied by `asChild`. */\n  interactive?: boolean\n  /**\n   * Render the single child element as the card — usually a link, so the whole card is\n   * one target: `<Card asChild><a href=\"/projects/atlas\">…</a></Card>`. Don't nest other\n   * links or buttons inside a linked card.\n   */\n  asChild?: boolean\n}\n\n/**\n * A self-contained object, like a route, a ticket or a project. Use it sparingly; most content\n * reads better without a box.\n *\n * @remarks\n * A `Card` frames one object you could pick up, open or drag. Before reaching for one, try a\n * `List`, a `Table` or a plain section: three identical cards in a row is the most generic layout\n * there is, and most content is better as a document than as a set of boxes.\n *\n * ## Slots\n *\n * `Card.Media`, `Card.Header` (with `Card.Title` and `Card.Meta`), `Card.Description`, `Card.Body`\n * and `Card.Footer`. Use only the ones the object needs. `variant` is `outline` (the default, a\n * hairline), `raised` (the theme's surface shadow) or `plain` (a fill and no edge). `padding`\n * takes a space step.\n *\n * @privateRemarks\n * A self-contained object: a project, a release, a plan summary. Use sparingly —\n * most content reads better as a List, Table or plain section (DESIGN §2).\n *\n * <Card><Card.Header><Card.Title>Atlas</Card.Title><Card.Meta>2026</Card.Meta></Card.Header>…</Card>\n */\nconst CardRoot = forwardRef<HTMLDivElement, CardProps>(function Card(\n  {\n    variant = 'outline',\n    padding,\n    interactive = false,\n    asChild = false,\n    color,\n    className,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  const Comp = asChild ? Slot.Root : 'div'\n  return (\n    <Comp\n      ref={ref}\n      className={cx(styles.card, className)}\n      data-kiln-component=\"\"\n      data-variant={variant}\n      data-color={color}\n      data-interactive={interactive || asChild || undefined}\n      style={mergeStyles(responsiveVars('card-padding', padding, space), style)}\n      {...rest}\n    />\n  )\n})\n\nexport interface CardMediaProps extends HTMLAttributes<HTMLDivElement> {\n  /** Crop the media to a fixed ratio (the child img/video is fitted with `cover`). */\n  ratio?: CardMediaRatio\n  /**\n   * Sit inside the padding instead of bleeding to the edges. The corner radius is then\n   * the nested radius (outer − padding).\n   */\n  inset?: boolean\n}\n\n/** Image/video slot. Bleeds to the card's edges by default; put it first (or last). */\nconst CardMedia = forwardRef<HTMLDivElement, CardMediaProps>(function CardMedia(\n  { ratio, inset = false, className, ...rest },\n  ref,\n) {\n  return (\n    <div\n      ref={ref}\n      className={cx(styles.media, className)}\n      data-ratio={ratio}\n      data-inset={inset || undefined}\n      {...rest}\n    />\n  )\n})\n\nconst CardHeader = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function CardHeader(\n  { className, ...rest },\n  ref,\n) {\n  return <div ref={ref} className={cx(styles.header, className)} {...rest} />\n})\n\nexport interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {\n  /** Heading element, to fit the page outline. Visual size doesn't change. Default `3`. */\n  level?: CardTitleLevel\n}\n\nconst CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps>(function CardTitle(\n  { level = 3, className, ...rest },\n  ref,\n) {\n  const Tag = headingTag(level)\n  return <Tag ref={ref} className={cx(styles.title, className)} {...rest} />\n})\n\nconst CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(\n  function CardDescription({ className, ...rest }, ref) {\n    return <p ref={ref} className={cx(styles.description, className)} {...rest} />\n  },\n)\n\nconst CardBody = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function CardBody(\n  { className, ...rest },\n  ref,\n) {\n  return <div ref={ref} className={cx(styles.body, className)} {...rest} />\n})\n\n/** Actions or summary pinned to the bottom of the card (pushes down in equal-height grids). */\nconst CardFooter = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function CardFooter(\n  { className, ...rest },\n  ref,\n) {\n  return <div ref={ref} className={cx(styles.footer, className)} {...rest} />\n})\n\n/** Small secondary facts — year, stack, due date. Numbers are tabular. */\nconst CardMeta = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function CardMeta(\n  { className, ...rest },\n  ref,\n) {\n  return <div ref={ref} className={cx(styles.meta, className)} {...rest} />\n})\n\nexport const Card = Object.assign(CardRoot, {\n  Media: CardMedia,\n  Header: CardHeader,\n  Title: CardTitle,\n  Description: CardDescription,\n  Body: CardBody,\n  Footer: CardFooter,\n  Meta: CardMeta,\n})\n"],"mappings":";;;;;;;;;AAwDA,IAAME,IAAWC,EAAsC,SACrD,EACE,aAAU,WACV,YACA,iBAAc,IACd,aAAU,IACV,UACA,cACA,UACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAAOC,IAAUC,EAAK,OAAO;CACnC,OACE,kBAACF,GAAD;EACO;EACL,WAAWG,EAAGR,EAAO,MAAMS,CAAS;EACpC,uBAAoB;EACpB,gBAAcC;EACd,cAAYC;EACZ,oBAAkBC,KAAeN,KAAW,KAAA;EAC5C,OAAOO,EAAYC,EAAe,gBAAgBC,GAASC,CAAK,GAAGC,CAAK;EACxE,GAAIb;CACL,CAAA;AAEL,CAAC,GAaKc,IAAYf,EAA2C,SAC3D,EAAE,UAAO,WAAQ,IAAO,cAAW,GAAGC,KACtC,GACA;CACA,OACE,kBAAC,OAAD;EACO;EACL,WAAWI,EAAGR,EAAO,OAAOS,CAAS;EACrC,cAAYU;EACZ,cAAYC,KAAS,KAAA;EACrB,GAAIhB;CACL,CAAA;AAEL,CAAC,GAEKiB,IAAalB,EAA2D,SAC5E,EAAE,cAAW,GAAGC,KAChB,GACA;CACA,OAAO,kBAAC,OAAD;EAAU;EAAK,WAAWI,EAAGR,EAAO,QAAQS,CAAS;EAAG,GAAIL;CAAO,CAAA;AAC5E,CAAC,GAOKkB,IAAYnB,EAA+C,SAC/D,EAAE,WAAQ,GAAG,cAAW,GAAGC,KAC3B,GACA;CACA,IAAMmB,IAAMC,EAAWC,CAAK;CAC5B,OAAO,kBAACF,GAAD;EAAU;EAAK,WAAWf,EAAGR,EAAO,OAAOS,CAAS;EAAG,GAAIL;CAAO,CAAA;AAC3E,CAAC,GAEKsB,IAAkBvB,EACtB,SAAyB,EAAE,cAAW,GAAGC,KAAQ,GAAK;CACpD,OAAO,kBAAC,KAAD;EAAQ;EAAK,WAAWI,EAAGR,EAAO,aAAaS,CAAS;EAAG,GAAIL;CAAO,CAAA;AAC/E,CACF,GAEMuB,IAAWxB,EAA2D,SAC1E,EAAE,cAAW,GAAGC,KAChB,GACA;CACA,OAAO,kBAAC,OAAD;EAAU;EAAK,WAAWI,EAAGR,EAAO,MAAMS,CAAS;EAAG,GAAIL;CAAO,CAAA;AAC1E,CAAC,GAGKwB,IAAazB,EAA2D,SAC5E,EAAE,cAAW,GAAGC,KAChB,GACA;CACA,OAAO,kBAAC,OAAD;EAAU;EAAK,WAAWI,EAAGR,EAAO,QAAQS,CAAS;EAAG,GAAIL;CAAO,CAAA;AAC5E,CAAC,GAGKyB,IAAW1B,EAA2D,SAC1E,EAAE,cAAW,GAAGC,KAChB,GACA;CACA,OAAO,kBAAC,OAAD;EAAU;EAAK,WAAWI,EAAGR,EAAO,MAAMS,CAAS;EAAG,GAAIL;CAAO,CAAA;AAC1E,CAAC,GAEY0B,IAAO,OAAO,OAAO5B,GAAU;CAC1C,OAAOgB;CACP,QAAQG;CACR,OAAOC;CACP,aAAaI;CACb,MAAMC;CACN,QAAQC;CACR,MAAMC;AACR,CAAC"}

package/dist/components/display/Card/Card.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.module.js","names":["card","media","header","title","description","body","footer","meta","Card_module_default"],"sources":["../../../../src/components/display/Card/Card.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --card-radius        default var(--radius-surface)\n *   --card-bg            default var(--color-surface)\n *   --card-shadow        default var(--shadow-surface) for `raised`\n *\n * The root is `position: relative`, so absolutely placed children (a corner <Stamp>)\n * anchor to the card.\n *\n * Responsive padding: the component writes --card-padding-{bp}; the root resolves them\n * into --card-inset per breakpoint. Slots (Media) read the *resolved* --card-inset and\n * --card-inner-radius, which inherit as computed values — never set them yourself.\n */\n.card {\n  --card-inset: var(--card-padding-base, var(--space-5));\n  --card-inner-radius: calc(var(--card-radius, var(--radius-surface)) - var(--border-width));\n  --_bg: var(--card-bg, var(--color-surface));\n  --_bg-hover: var(--color-surface-raised);\n  --_border: var(--color-line);\n  --_border-hover: var(--color-line-strong);\n  --_shadow: none;\n\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  min-inline-size: 0;\n  padding: var(--card-inset);\n  border: var(--border-width) solid var(--_border);\n  border-radius: var(--card-radius, var(--radius-surface));\n  background: var(--_bg);\n  box-shadow: var(--_shadow);\n  color: var(--color-ink);\n  font-family: var(--font-text);\n  text-decoration: none;\n  transition:\n    background-color var(--dur-1) var(--ease-out),\n    border-color var(--dur-1) var(--ease-out),\n    box-shadow var(--dur-1) var(--ease-out),\n    translate var(--dur-1) var(--ease-spring);\n}\n\n@media (min-width: 40em) {\n  .card {\n    --card-inset: var(--card-padding-sm, var(--space-5));\n  }\n}\n@media (min-width: 48em) {\n  .card {\n    --card-inset: var(--card-padding-md, var(--space-5));\n  }\n}\n@media (min-width: 64em) {\n  .card {\n    --card-inset: var(--card-padding-lg, var(--space-5));\n  }\n}\n@media (min-width: 80em) {\n  .card {\n    --card-inset: var(--card-padding-xl, var(--space-5));\n  }\n}\n\n/* Variants — one edge treatment each (DESIGN §2). */\n.card[data-variant='plain'] {\n  --_bg: var(--card-bg, var(--color-surface));\n  --_bg-hover: var(--color-surface-raised);\n  --_border: transparent;\n  --_border-hover: transparent;\n}\n.card[data-variant='raised'] {\n  --_bg: var(--card-bg, var(--color-surface-raised));\n  --_bg-hover: var(--color-surface-raised);\n  --_border: var(--color-line-strong);\n  --_shadow: var(--card-shadow, var(--shadow-surface));\n}\n\n/* Interactive: an edge/fill change, never a scale. Raised cards press toward their shadow. */\n.card[data-interactive] {\n  cursor: pointer;\n}\n@media (hover: hover) {\n  .card[data-interactive]:hover {\n    background: var(--_bg-hover);\n    border-color: var(--_border-hover);\n  }\n}\n.card[data-interactive][data-variant='raised']:active {\n  translate: var(--active-shift) var(--active-shift);\n  box-shadow: var(--shadow-active);\n}\n.card:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n/* ── Slots ───────────────────────────────────────────────────────────────── */\n\n.media {\n  position: relative;\n  overflow: hidden;\n  margin-inline: calc(var(--card-inset) * -1);\n  background: var(--color-surface-sunken);\n}\n.media:first-child {\n  margin-block-start: calc(var(--card-inset) * -1);\n  border-start-start-radius: var(--card-inner-radius);\n  border-start-end-radius: var(--card-inner-radius);\n}\n.media:last-child {\n  margin-block-end: calc(var(--card-inset) * -1);\n  border-end-start-radius: var(--card-inner-radius);\n  border-end-end-radius: var(--card-inner-radius);\n}\n/* Bled media gets a rule where it meets the content, so the edge reads as structure. */\n.media:first-child:not(:last-child) {\n  border-block-end: var(--border-width) solid var(--color-line);\n}\n.media[data-inset] {\n  margin: 0;\n  border: 0;\n  border-radius: max(\n    calc(var(--card-radius, var(--radius-surface)) - var(--card-inset)),\n    calc(var(--radius-media) / 2)\n  );\n}\n.media[data-ratio] > :is(img, video, picture) {\n  position: absolute;\n  inset: 0;\n  inline-size: 100%;\n  block-size: 100%;\n  object-fit: cover;\n}\n.media > :is(img, video) {\n  inline-size: 100%;\n}\n.media[data-ratio='1/1'] {\n  aspect-ratio: 1;\n}\n.media[data-ratio='4/3'] {\n  aspect-ratio: 4 / 3;\n}\n.media[data-ratio='3/2'] {\n  aspect-ratio: 3 / 2;\n}\n.media[data-ratio='16/9'] {\n  aspect-ratio: 16 / 9;\n}\n.media[data-ratio='21/9'] {\n  aspect-ratio: 21 / 9;\n}\n\n/* The media → header step is larger than the rhythm between text slots. */\n.media:first-child + * {\n  margin-block-start: var(--space-2);\n}\n\n.header {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-1) var(--space-3);\n  min-inline-size: 0;\n}\n.header > :first-child {\n  min-inline-size: 0;\n}\n\n.title {\n  margin: 0;\n  font-family: var(--heading-font);\n  font-weight: var(--heading-weight);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  font-size: var(--card-title-size, var(--text-xl));\n  line-height: var(--leading-snug);\n  color: var(--color-ink);\n}\n\n.description {\n  margin: 0;\n  max-inline-size: 60ch;\n  color: var(--color-ink-muted);\n  font-size: var(--text-sm);\n  line-height: var(--leading-body);\n}\n\n.body {\n  min-inline-size: 0;\n  font-size: var(--text-md);\n  line-height: var(--leading-body);\n}\n\n.footer {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2) var(--space-3);\n  margin-block-start: auto;\n  padding-block-start: var(--space-2);\n}\n\n.meta {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: var(--space-1) var(--space-3);\n  color: var(--color-ink-subtle);\n  font-size: var(--text-xs);\n  font-variant-numeric: lining-nums;\n  line-height: var(--leading-snug);\n}\n"],"mappings":""}
+{"version":3,"file":"Card.module.js","names":["card","media","header","title","description","body","footer","meta","Card_module_default"],"sources":["../../../../src/components/display/Card/Card.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --card-radius        default var(--radius-surface)\n *   --card-bg            default var(--color-surface)\n *   --card-shadow        default var(--shadow-surface) for `raised`\n *   --card-keyline-width default var(--space-1) — the categorical keyline of a `color` card\n *\n * The root is `position: relative`, so absolutely placed children (a corner <Stamp>)\n * anchor to the card.\n *\n * Responsive padding: the component writes --card-padding-{bp}; the root resolves them\n * into --card-inset per breakpoint. Slots (Media) read the *resolved* --card-inset and\n * --card-inner-radius, which inherit as computed values — never set them yourself.\n */\n.card {\n  --card-inset: var(--card-padding-base, var(--space-5));\n  --card-inner-radius: calc(var(--card-radius, var(--radius-surface)) - var(--border-width));\n  --_bg: var(--card-bg, var(--color-surface));\n  --_bg-hover: var(--color-surface-raised);\n  --_border: var(--color-line);\n  --_border-hover: var(--color-line-strong);\n  --_shadow: none;\n\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  min-inline-size: 0;\n  padding: var(--card-inset);\n  border: var(--border-width) solid var(--_border);\n  border-radius: var(--card-radius, var(--radius-surface));\n  background: var(--_bg);\n  box-shadow: var(--_shadow);\n  color: var(--color-ink);\n  font-family: var(--font-text);\n  text-decoration: none;\n  transition:\n    background-color var(--dur-1) var(--ease-out),\n    border-color var(--dur-1) var(--ease-out),\n    box-shadow var(--dur-1) var(--ease-out),\n    translate var(--dur-1) var(--ease-spring);\n}\n\n@media (min-width: 40em) {\n  .card {\n    --card-inset: var(--card-padding-sm, var(--space-5));\n  }\n}\n@media (min-width: 48em) {\n  .card {\n    --card-inset: var(--card-padding-md, var(--space-5));\n  }\n}\n@media (min-width: 64em) {\n  .card {\n    --card-inset: var(--card-padding-lg, var(--space-5));\n  }\n}\n@media (min-width: 80em) {\n  .card {\n    --card-inset: var(--card-padding-xl, var(--space-5));\n  }\n}\n\n/* Variants — one edge treatment each (DESIGN §2). */\n.card[data-variant='plain'] {\n  --_bg: var(--card-bg, var(--color-surface));\n  --_bg-hover: var(--color-surface-raised);\n  --_border: transparent;\n  --_border-hover: transparent;\n}\n.card[data-variant='raised'] {\n  --_bg: var(--card-bg, var(--color-surface-raised));\n  --_bg-hover: var(--color-surface-raised);\n  --_border: var(--color-line-strong);\n  --_shadow: var(--card-shadow, var(--shadow-surface));\n}\n\n/* Live: something happening now. The accent owns live state, so the edge is a heavier accent keyline. */\n.card[data-variant='live'] {\n  --_border: var(--color-accent);\n  --_border-hover: var(--color-accent);\n  --_shadow: inset 0 0 0 calc(var(--border-width-strong) - var(--border-width)) var(--color-accent);\n}\n\n/*\n * Placeholder: a slot not yet decided. No fill, and printer's crop marks at the corners\n * instead of a dashed box (DESIGN.md: space marked out for what will go there). The marks\n * are solid-colour background images, eight short bars, not a gradient.\n */\n.card[data-variant='placeholder'] {\n  --_bg: transparent;\n  --_bg-hover: var(--color-surface-sunken);\n  --_border: transparent;\n  --_border-hover: transparent;\n  --_m: var(--space-4);\n  --_w: var(--border-width-strong);\n  --_c: var(--color-line-strong);\n\n  background:\n    linear-gradient(var(--_c) 0 0) top left / var(--_m) var(--_w) no-repeat,\n    linear-gradient(var(--_c) 0 0) top left / var(--_w) var(--_m) no-repeat,\n    linear-gradient(var(--_c) 0 0) top right / var(--_m) var(--_w) no-repeat,\n    linear-gradient(var(--_c) 0 0) top right / var(--_w) var(--_m) no-repeat,\n    linear-gradient(var(--_c) 0 0) bottom left / var(--_m) var(--_w) no-repeat,\n    linear-gradient(var(--_c) 0 0) bottom left / var(--_w) var(--_m) no-repeat,\n    linear-gradient(var(--_c) 0 0) bottom right / var(--_m) var(--_w) no-repeat,\n    linear-gradient(var(--_c) 0 0) bottom right / var(--_w) var(--_m) no-repeat,\n    var(--_bg);\n  color: var(--color-ink-muted);\n}\n\n/* A categorical keyline along the top: whose card it is, in their Tag's colour. The top border\n   of a box the card's own shape, so it follows rounded corners down into the sides. */\n.card[data-color]::before {\n  content: '';\n  position: absolute;\n  inset: calc(var(--border-width) * -1);\n  border-block-start: var(--card-keyline-width, var(--space-1)) solid var(--_cat);\n  border-radius: var(--card-radius, var(--radius-surface));\n  pointer-events: none;\n}\n.card[data-color='1'] {\n  --_cat: var(--color-cat-1);\n}\n.card[data-color='2'] {\n  --_cat: var(--color-cat-2);\n}\n.card[data-color='3'] {\n  --_cat: var(--color-cat-3);\n}\n.card[data-color='4'] {\n  --_cat: var(--color-cat-4);\n}\n.card[data-color='5'] {\n  --_cat: var(--color-cat-5);\n}\n.card[data-color='6'] {\n  --_cat: var(--color-cat-6);\n}\n.card[data-color='7'] {\n  --_cat: var(--color-cat-7);\n}\n.card[data-color='8'] {\n  --_cat: var(--color-cat-8);\n}\n\n/* Interactive: an edge/fill change, never a scale. Raised cards press toward their shadow. */\n.card[data-interactive] {\n  cursor: pointer;\n}\n@media (hover: hover) {\n  .card[data-interactive]:hover {\n    background-color: var(--_bg-hover);\n    border-color: var(--_border-hover);\n  }\n}\n.card[data-interactive][data-variant='raised']:active {\n  translate: var(--active-shift) var(--active-shift);\n  box-shadow: var(--shadow-active);\n}\n.card:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n/* ── Slots ───────────────────────────────────────────────────────────────── */\n\n.media {\n  position: relative;\n  overflow: hidden;\n  margin-inline: calc(var(--card-inset) * -1);\n  background: var(--color-surface-sunken);\n}\n.media:first-child {\n  margin-block-start: calc(var(--card-inset) * -1);\n  border-start-start-radius: var(--card-inner-radius);\n  border-start-end-radius: var(--card-inner-radius);\n}\n.media:last-child {\n  margin-block-end: calc(var(--card-inset) * -1);\n  border-end-start-radius: var(--card-inner-radius);\n  border-end-end-radius: var(--card-inner-radius);\n}\n/* Bled media gets a rule where it meets the content, so the edge reads as structure. */\n.media:first-child:not(:last-child) {\n  border-block-end: var(--border-width) solid var(--color-line);\n}\n.media[data-inset] {\n  margin: 0;\n  border: 0;\n  border-radius: max(\n    calc(var(--card-radius, var(--radius-surface)) - var(--card-inset)),\n    calc(var(--radius-media) / 2)\n  );\n}\n.media[data-ratio] > :is(img, video, picture) {\n  position: absolute;\n  inset: 0;\n  inline-size: 100%;\n  block-size: 100%;\n  object-fit: cover;\n}\n.media > :is(img, video) {\n  inline-size: 100%;\n}\n.media[data-ratio='1/1'] {\n  aspect-ratio: 1;\n}\n.media[data-ratio='4/3'] {\n  aspect-ratio: 4 / 3;\n}\n.media[data-ratio='3/2'] {\n  aspect-ratio: 3 / 2;\n}\n.media[data-ratio='16/9'] {\n  aspect-ratio: 16 / 9;\n}\n.media[data-ratio='21/9'] {\n  aspect-ratio: 21 / 9;\n}\n\n/* The media → header step is larger than the rhythm between text slots. */\n.media:first-child + * {\n  margin-block-start: var(--space-2);\n}\n\n.header {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-1) var(--space-3);\n  min-inline-size: 0;\n}\n.header > :first-child {\n  min-inline-size: 0;\n}\n\n.title {\n  margin: 0;\n  font-family: var(--heading-font);\n  font-weight: var(--heading-weight);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  font-size: var(--card-title-size, var(--text-xl));\n  line-height: var(--leading-snug);\n  color: var(--color-ink);\n}\n\n.description {\n  margin: 0;\n  max-inline-size: 60ch;\n  color: var(--color-ink-muted);\n  font-size: var(--text-sm);\n  line-height: var(--leading-body);\n}\n\n.body {\n  min-inline-size: 0;\n  font-size: var(--text-md);\n  line-height: var(--leading-body);\n}\n\n.footer {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-2) var(--space-3);\n  margin-block-start: auto;\n  padding-block-start: var(--space-2);\n}\n\n.meta {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: baseline;\n  gap: var(--space-1) var(--space-3);\n  color: var(--color-ink-subtle);\n  font-size: var(--text-xs);\n  font-variant-numeric: lining-nums;\n  line-height: var(--leading-snug);\n}\n"],"mappings":""}

package/dist/components/display/List/List.d.ts

@@ -1,4 +1,5 @@
 import { type HTMLAttributes, type LiHTMLAttributes, type ReactNode } from 'react';
+import type { CategoryColor } from '../../../utils/tokens.js';
 export type ListDensity = 'compact' | 'regular';
 export type ListElement = 'ul' | 'ol';
 export interface ListProps extends HTMLAttributes<HTMLUListElement> {
@@ -9,7 +10,7 @@ export interface ListProps extends HTMLAttributes<HTMLUListElement> {
     /** `ol` when order is the content (a leaderboard). Default `ul`. */
     as?: ListElement;
 }
-export interface ListItemProps extends LiHTMLAttributes<HTMLLIElement> {
+export interface ListItemProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'color'> {
     /** Hover affordance. Implied by `asChild`. */
     interactive?: boolean;
     /**
@@ -22,12 +23,16 @@ export interface ListItemProps extends LiHTMLAttributes<HTMLLIElement> {
     selected?: boolean;
     /** Draw attention to a row with `--color-highlight` — typically "you". */
     highlighted?: boolean;
+    /** Out of play (eliminated, archived, past): every ink drops to the muted step, which still reads. */
+    muted?: boolean;
+    /** A categorical colour drawn as a rail at the row's start: whose row it is, matching their `Tag`. */
+    color?: CategoryColor;
     children?: ReactNode;
 }
 export declare const List: import("react").ForwardRefExoticComponent<ListProps & import("react").RefAttributes<HTMLUListElement>> & {
     Item: import("react").ForwardRefExoticComponent<ListItemProps & import("react").RefAttributes<HTMLLIElement>>;
-    Leading: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
-    Content: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
-    Description: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
-    Trailing: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+    Leading: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+    Content: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+    Description: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+    Trailing: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
 };

package/dist/components/display/List/List.js

@@ -1,64 +1,73 @@
 import { cx as e } from "../../../utils/cx.js";
 import t from "./List.module.js";
-import { forwardRef as n } from "react";
-import { jsx as r } from "react/jsx-runtime";
-import { Slot as i } from "radix-ui";
+import { createContext as n, forwardRef as r, useContext as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+import { Slot as o } from "radix-ui";
 //#region src/components/display/List/List.tsx
-var a = n(function({ divided: n = !0, density: i = "regular", as: a = "ul", className: o, ...s }, c) {
-	return /* @__PURE__ */ r(a, {
+var s = r(function({ divided: n = !0, density: r = "regular", as: i = "ul", className: o, ...s }, c) {
+	return /* @__PURE__ */ a(i, {
 		ref: c,
 		role: "list",
 		className: e(t.list, o),
 		"data-divided": n || void 0,
-		"data-density": i,
+		"data-density": r,
 		...s
 	});
-}), o = n(function({ interactive: n = !1, asChild: a = !1, selected: o = !1, highlighted: s = !1, className: c, children: l, ...u }, d) {
-	let f = a ? i.Root : "div";
-	return /* @__PURE__ */ r("li", {
-		ref: d,
-		className: e(t.item, c),
-		"data-interactive": n || a || void 0,
-		"data-selected": o || void 0,
+}), c = n(!1), l = r(function({ interactive: n = !1, asChild: r = !1, selected: i = !1, highlighted: s = !1, muted: l = !1, color: u, className: d, children: f, ...p }, m) {
+	let h = r ? o.Root : "div";
+	return /* @__PURE__ */ a("li", {
+		ref: m,
+		className: e(t.item, d),
+		"data-interactive": n || r || void 0,
+		"data-selected": i || void 0,
 		"data-highlighted": s || void 0,
-		...u,
-		children: /* @__PURE__ */ r(f, {
-			className: t.row,
-			children: l
+		"data-muted": l || void 0,
+		"data-color": u,
+		...p,
+		children: /* @__PURE__ */ a(c.Provider, {
+			value: r,
+			children: /* @__PURE__ */ a(h, {
+				className: t.row,
+				children: f
+			})
 		})
 	});
-}), s = n(function({ className: n, ...i }, a) {
-	return /* @__PURE__ */ r("span", {
-		ref: a,
+}), u = r(function({ className: n, ...r }, o) {
+	let s = i(c) ? "span" : "div";
+	return /* @__PURE__ */ a(s, {
+		ref: o,
 		className: e(t.leading, n),
-		...i
+		...r
 	});
-}), c = n(function({ className: n, ...i }, a) {
-	return /* @__PURE__ */ r("span", {
-		ref: a,
+}), d = r(function({ className: n, ...r }, o) {
+	let s = i(c) ? "span" : "div";
+	return /* @__PURE__ */ a(s, {
+		ref: o,
 		className: e(t.content, n),
-		...i
+		...r
 	});
-}), l = n(function({ className: n, ...i }, a) {
-	return /* @__PURE__ */ r("span", {
-		ref: a,
+}), f = r(function({ className: n, ...r }, o) {
+	let s = i(c) ? "span" : "div";
+	return /* @__PURE__ */ a(s, {
+		ref: o,
 		className: e(t.description, n),
-		...i
+		...r
 	});
-}), u = n(function({ className: n, ...i }, a) {
-	return /* @__PURE__ */ r("span", {
-		ref: a,
+}), p = r(function({ className: n, ...r }, o) {
+	let s = i(c) ? "span" : "div";
+	return /* @__PURE__ */ a(s, {
+		ref: o,
 		className: e(t.trailing, n),
-		...i
+		...r
 	});
-}), d = Object.assign(a, {
-	Item: o,
-	Leading: s,
-	Content: c,
-	Description: l,
-	Trailing: u
+}), m = Object.assign(s, {
+	Item: l,
+	Leading: u,
+	Content: d,
+	Description: f,
+	Trailing: p
 });
 //#endregion
-export { d as List };
+export { m as List };
 
 //# sourceMappingURL=List.js.map

package/dist/components/display/List/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","names":["styles","List_module_default","ListRoot","forwardRef","Comp","rest","cx","className","divided","density","ListItem","Row","asChild","Slot","interactive","selected","highlighted","ListLeading","ListContent","ListDescription","ListTrailing","List"],"sources":["../../../../src/components/display/List/List.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes, type LiHTMLAttributes, type ReactNode } from 'react'\nimport { Slot } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport styles from './List.module.css'\n\nexport type ListDensity = 'compact' | 'regular'\nexport type ListElement = 'ul' | 'ol'\n\nexport interface ListProps extends HTMLAttributes<HTMLUListElement> {\n  /** Hairline rules between rows. Default `true`. */\n  divided?: boolean\n  /** Row height. Default `regular`. */\n  density?: ListDensity\n  /** `ol` when order is the content (a leaderboard). Default `ul`. */\n  as?: ListElement\n}\n\n/**\n * The workhorse row list. Leading, content and trailing slots, divided by hairlines, never boxed\n * in cards.\n *\n * @remarks\n * `List` is for rows of similar things: trips, people, invoices, recent activity. Each row has up\n * to three slots: `List.Leading` (an avatar, an icon, a rank), `List.Content` (a title and\n * `List.Description`), and `List.Trailing` (an amount, a time, an action). Rows are divided by\n * hairlines.\n *\n * @privateRemarks\n * The workhorse row list: leaderboards, team members, invoices, recent work. Rows are\n * `Leading · Content · Trailing`, divided by hairlines, never boxed in cards.\n *\n * <List><List.Item><List.Leading>1</List.Leading><List.Content>…</List.Content></List.Item></List>\n */\nconst ListRoot = forwardRef<HTMLUListElement, ListProps>(function List(\n  { divided = true, density = 'regular', as: Comp = 'ul', className, ...rest },\n  ref,\n) {\n  return (\n    <Comp\n      // @ts-expect-error — ul/ol share HTMLOListElement-compatible attributes; ref type differs only nominally\n      ref={ref}\n      role=\"list\"\n      className={cx(styles.list, className)}\n      data-divided={divided || undefined}\n      data-density={density}\n      {...rest}\n    />\n  )\n})\n\nexport interface ListItemProps extends LiHTMLAttributes<HTMLLIElement> {\n  /** Hover affordance. Implied by `asChild`. */\n  interactive?: boolean\n  /**\n   * Make the whole row one link or button: the single child becomes the row, so there\n   * is exactly one interactive element and no nested anchors.\n   * `<List.Item asChild><a href=\"/projects/atlas\">…slots…</a></List.Item>`\n   */\n  asChild?: boolean\n  /** The current item (accent-soft fill) — e.g. the open page in a list of links. */\n  selected?: boolean\n  /** Draw attention to a row with `--color-highlight` — typically \"you\". */\n  highlighted?: boolean\n  children?: ReactNode\n}\n\nconst ListItem = forwardRef<HTMLLIElement, ListItemProps>(function ListItem(\n  {\n    interactive = false,\n    asChild = false,\n    selected = false,\n    highlighted = false,\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const Row = asChild ? Slot.Root : 'div'\n  return (\n    <li\n      ref={ref}\n      className={cx(styles.item, className)}\n      data-interactive={interactive || asChild || undefined}\n      data-selected={selected || undefined}\n      data-highlighted={highlighted || undefined}\n      {...rest}\n    >\n      <Row className={styles.row}>{children}</Row>\n    </li>\n  )\n})\n\n/** Rank, avatar or icon at the start of the row. Numbers are tabular and right-aligned. */\nconst ListLeading = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(\n  function ListLeading({ className, ...rest }, ref) {\n    return <span ref={ref} className={cx(styles.leading, className)} {...rest} />\n  },\n)\n\n/** Title (the direct text) and an optional `List.Description` below it. */\nconst ListContent = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(\n  function ListContent({ className, ...rest }, ref) {\n    return <span ref={ref} className={cx(styles.content, className)} {...rest} />\n  },\n)\n\nconst ListDescription = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(\n  function ListDescription({ className, ...rest }, ref) {\n    return <span ref={ref} className={cx(styles.description, className)} {...rest} />\n  },\n)\n\n/** Value, meta or actions at the end of the row. Numbers are tabular. */\nconst ListTrailing = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(\n  function ListTrailing({ className, ...rest }, ref) {\n    return <span ref={ref} className={cx(styles.trailing, className)} {...rest} />\n  },\n)\n\nexport const List = Object.assign(ListRoot, {\n  Item: ListItem,\n  Leading: ListLeading,\n  Content: ListContent,\n  Description: ListDescription,\n  Trailing: ListTrailing,\n})\n"],"mappings":";;;;;;AAiCA,IAAME,IAAWC,EAAwC,SACvD,EAAE,aAAU,IAAM,aAAU,WAAW,IAAIC,IAAO,MAAM,cAAW,GAAGC,KACtE,GACA;CACA,OACE,kBAACD,GAAD;EAEO;EACL,MAAK;EACL,WAAWE,EAAGN,EAAO,MAAMO,CAAS;EACpC,gBAAcC,KAAW,KAAA;EACzB,gBAAcC;EACd,GAAIJ;CACL,CAAA;AAEL,CAAC,GAkBKK,IAAWP,EAAyC,SACxD,EACE,iBAAc,IACd,aAAU,IACV,cAAW,IACX,iBAAc,IACd,cACA,aACA,GAAGE,KAEL,GACA;CACA,IAAMM,IAAMC,IAAUC,EAAK,OAAO;CAClC,OACE,kBAAC,MAAD;EACO;EACL,WAAWP,EAAGN,EAAO,MAAMO,CAAS;EACpC,oBAAkBO,KAAeF,KAAW,KAAA;EAC5C,iBAAeG,KAAY,KAAA;EAC3B,oBAAkBC,KAAe,KAAA;EACjC,GAAIX;EAEJ,UAAA,kBAACM,GAAD;GAAK,WAAWX,EAAO;GAAM;EAAc,CAAA;CACzC,CAAA;AAER,CAAC,GAGKiB,IAAcd,EAClB,SAAqB,EAAE,cAAW,GAAGE,KAAQ,GAAK;CAChD,OAAO,kBAAC,QAAD;EAAW;EAAK,WAAWC,EAAGN,EAAO,SAASO,CAAS;EAAG,GAAIF;CAAO,CAAA;AAC9E,CACF,GAGMa,IAAcf,EAClB,SAAqB,EAAE,cAAW,GAAGE,KAAQ,GAAK;CAChD,OAAO,kBAAC,QAAD;EAAW;EAAK,WAAWC,EAAGN,EAAO,SAASO,CAAS;EAAG,GAAIF;CAAO,CAAA;AAC9E,CACF,GAEMc,IAAkBhB,EACtB,SAAyB,EAAE,cAAW,GAAGE,KAAQ,GAAK;CACpD,OAAO,kBAAC,QAAD;EAAW;EAAK,WAAWC,EAAGN,EAAO,aAAaO,CAAS;EAAG,GAAIF;CAAO,CAAA;AAClF,CACF,GAGMe,IAAejB,EACnB,SAAsB,EAAE,cAAW,GAAGE,KAAQ,GAAK;CACjD,OAAO,kBAAC,QAAD;EAAW;EAAK,WAAWC,EAAGN,EAAO,UAAUO,CAAS;EAAG,GAAIF;CAAO,CAAA;AAC/E,CACF,GAEagB,IAAO,OAAO,OAAOnB,GAAU;CAC1C,MAAMQ;CACN,SAASO;CACT,SAASC;CACT,aAAaC;CACb,UAAUC;AACZ,CAAC"}
+{"version":3,"file":"List.js","names":["styles","List_module_default","ListRoot","forwardRef","Comp","rest","cx","className","divided","density","RowIsControl","createContext","ListItem","Row","asChild","Slot","interactive","selected","highlighted","muted","color","ListLeading","useContext","ListContent","ListDescription","ListTrailing","List"],"sources":["../../../../src/components/display/List/List.tsx"],"sourcesContent":["import {\n  createContext,\n  forwardRef,\n  useContext,\n  type HTMLAttributes,\n  type LiHTMLAttributes,\n  type ReactNode,\n} from 'react'\nimport { Slot } from 'radix-ui'\nimport { cx } from '#utils/cx'\nimport type { CategoryColor } from '#utils/tokens'\nimport styles from './List.module.css'\n\nexport type ListDensity = 'compact' | 'regular'\nexport type ListElement = 'ul' | 'ol'\n\nexport interface ListProps extends HTMLAttributes<HTMLUListElement> {\n  /** Hairline rules between rows. Default `true`. */\n  divided?: boolean\n  /** Row height. Default `regular`. */\n  density?: ListDensity\n  /** `ol` when order is the content (a leaderboard). Default `ul`. */\n  as?: ListElement\n}\n\n/**\n * The workhorse row list. Leading, content and trailing slots, divided by hairlines, never boxed\n * in cards.\n *\n * @remarks\n * `List` is for rows of similar things: trips, people, invoices, recent activity. Each row has up\n * to three slots: `List.Leading` (an avatar, an icon, a rank), `List.Content` (a title and\n * `List.Description`), and `List.Trailing` (an amount, a time, an action). Rows are divided by\n * hairlines.\n *\n * @privateRemarks\n * The workhorse row list: leaderboards, team members, invoices, recent work. Rows are\n * `Leading · Content · Trailing`, divided by hairlines, never boxed in cards.\n *\n * <List><List.Item><List.Leading>1</List.Leading><List.Content>…</List.Content></List.Item></List>\n */\nconst ListRoot = forwardRef<HTMLUListElement, ListProps>(function List(\n  { divided = true, density = 'regular', as: Comp = 'ul', className, ...rest },\n  ref,\n) {\n  return (\n    <Comp\n      // @ts-expect-error — ul/ol share HTMLOListElement-compatible attributes; ref type differs only nominally\n      ref={ref}\n      role=\"list\"\n      className={cx(styles.list, className)}\n      data-divided={divided || undefined}\n      data-density={density}\n      {...rest}\n    />\n  )\n})\n\n/**\n * Whether the row is the asChild link or button. Its slots are then spans, the only content a\n * button may hold; elsewhere they're divs, so block components (Stat, Stack) fit in them.\n */\nconst RowIsControl = createContext(false)\n\nexport interface ListItemProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'color'> {\n  /** Hover affordance. Implied by `asChild`. */\n  interactive?: boolean\n  /**\n   * Make the whole row one link or button: the single child becomes the row, so there\n   * is exactly one interactive element and no nested anchors.\n   * `<List.Item asChild><a href=\"/projects/atlas\">…slots…</a></List.Item>`\n   */\n  asChild?: boolean\n  /** The current item (accent-soft fill) — e.g. the open page in a list of links. */\n  selected?: boolean\n  /** Draw attention to a row with `--color-highlight` — typically \"you\". */\n  highlighted?: boolean\n  /** Out of play (eliminated, archived, past): every ink drops to the muted step, which still reads. */\n  muted?: boolean\n  /** A categorical colour drawn as a rail at the row's start: whose row it is, matching their `Tag`. */\n  color?: CategoryColor\n  children?: ReactNode\n}\n\nconst ListItem = forwardRef<HTMLLIElement, ListItemProps>(function ListItem(\n  {\n    interactive = false,\n    asChild = false,\n    selected = false,\n    highlighted = false,\n    muted = false,\n    color,\n    className,\n    children,\n    ...rest\n  },\n  ref,\n) {\n  const Row = asChild ? Slot.Root : 'div'\n  return (\n    <li\n      ref={ref}\n      className={cx(styles.item, className)}\n      data-interactive={interactive || asChild || undefined}\n      data-selected={selected || undefined}\n      data-highlighted={highlighted || undefined}\n      data-muted={muted || undefined}\n      data-color={color}\n      {...rest}\n    >\n      <RowIsControl.Provider value={asChild}>\n        <Row className={styles.row}>{children}</Row>\n      </RowIsControl.Provider>\n    </li>\n  )\n})\n\n/** Rank, avatar or icon at the start of the row. Numbers are tabular and right-aligned. */\nconst ListLeading = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(function ListLeading(\n  { className, ...rest },\n  ref,\n) {\n  const Comp = useContext(RowIsControl) ? 'span' : 'div'\n  // @ts-expect-error — polymorphic ref across span/div is safe here\n  return <Comp ref={ref} className={cx(styles.leading, className)} {...rest} />\n})\n\n/** Title (the direct text) and an optional `List.Description` below it. */\nconst ListContent = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(function ListContent(\n  { className, ...rest },\n  ref,\n) {\n  const Comp = useContext(RowIsControl) ? 'span' : 'div'\n  // @ts-expect-error — polymorphic ref across span/div is safe here\n  return <Comp ref={ref} className={cx(styles.content, className)} {...rest} />\n})\n\nconst ListDescription = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(\n  function ListDescription({ className, ...rest }, ref) {\n    const Comp = useContext(RowIsControl) ? 'span' : 'div'\n    // @ts-expect-error — polymorphic ref across span/div is safe here\n    return <Comp ref={ref} className={cx(styles.description, className)} {...rest} />\n  },\n)\n\n/** Value, meta or actions at the end of the row. Numbers are tabular. */\nconst ListTrailing = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(function ListTrailing(\n  { className, ...rest },\n  ref,\n) {\n  const Comp = useContext(RowIsControl) ? 'span' : 'div'\n  // @ts-expect-error — polymorphic ref across span/div is safe here\n  return <Comp ref={ref} className={cx(styles.trailing, className)} {...rest} />\n})\n\nexport const List = Object.assign(ListRoot, {\n  Item: ListItem,\n  Leading: ListLeading,\n  Content: ListContent,\n  Description: ListDescription,\n  Trailing: ListTrailing,\n})\n"],"mappings":";;;;;;AAyCA,IAAME,IAAWC,EAAwC,SACvD,EAAE,aAAU,IAAM,aAAU,WAAW,IAAIC,IAAO,MAAM,cAAW,GAAGC,KACtE,GACA;CACA,OACE,kBAACD,GAAD;EAEO;EACL,MAAK;EACL,WAAWE,EAAGN,EAAO,MAAMO,CAAS;EACpC,gBAAcC,KAAW,KAAA;EACzB,gBAAcC;EACd,GAAIJ;CACL,CAAA;AAEL,CAAC,GAMKK,IAAeC,EAAc,EAAK,GAsBlCC,IAAWT,EAAyC,SACxD,EACE,iBAAc,IACd,aAAU,IACV,cAAW,IACX,iBAAc,IACd,WAAQ,IACR,UACA,cACA,aACA,GAAGE,KAEL,GACA;CACA,IAAMQ,IAAMC,IAAUC,EAAK,OAAO;CAClC,OACE,kBAAC,MAAD;EACO;EACL,WAAWT,EAAGN,EAAO,MAAMO,CAAS;EACpC,oBAAkBS,KAAeF,KAAW,KAAA;EAC5C,iBAAeG,KAAY,KAAA;EAC3B,oBAAkBC,KAAe,KAAA;EACjC,cAAYC,KAAS,KAAA;EACrB,cAAYC;EACZ,GAAIf;EAEJ,UAAA,kBAACK,EAAa,UAAd;GAAuB,OAAOI;GAC5B,UAAA,kBAACD,GAAD;IAAK,WAAWb,EAAO;IAAM;GAAc,CAAA;EACtB,CAAA;CACrB,CAAA;AAER,CAAC,GAGKqB,IAAclB,EAAqD,SACvE,EAAE,cAAW,GAAGE,KAChB,GACA;CACA,IAAMD,IAAOkB,EAAWZ,CAAY,IAAI,SAAS;CAEjD,OAAO,kBAACN,GAAD;EAAW;EAAK,WAAWE,EAAGN,EAAO,SAASO,CAAS;EAAG,GAAIF;CAAO,CAAA;AAC9E,CAAC,GAGKkB,IAAcpB,EAAqD,SACvE,EAAE,cAAW,GAAGE,KAChB,GACA;CACA,IAAMD,IAAOkB,EAAWZ,CAAY,IAAI,SAAS;CAEjD,OAAO,kBAACN,GAAD;EAAW;EAAK,WAAWE,EAAGN,EAAO,SAASO,CAAS;EAAG,GAAIF;CAAO,CAAA;AAC9E,CAAC,GAEKmB,IAAkBrB,EACtB,SAAyB,EAAE,cAAW,GAAGE,KAAQ,GAAK;CACpD,IAAMD,IAAOkB,EAAWZ,CAAY,IAAI,SAAS;CAEjD,OAAO,kBAACN,GAAD;EAAW;EAAK,WAAWE,EAAGN,EAAO,aAAaO,CAAS;EAAG,GAAIF;CAAO,CAAA;AAClF,CACF,GAGMoB,IAAetB,EAAqD,SACxE,EAAE,cAAW,GAAGE,KAChB,GACA;CACA,IAAMD,IAAOkB,EAAWZ,CAAY,IAAI,SAAS;CAEjD,OAAO,kBAACN,GAAD;EAAW;EAAK,WAAWE,EAAGN,EAAO,UAAUO,CAAS;EAAG,GAAIF;CAAO,CAAA;AAC/E,CAAC,GAEYqB,IAAO,OAAO,OAAOxB,GAAU;CAC1C,MAAMU;CACN,SAASS;CACT,SAASE;CACT,aAAaC;CACb,UAAUC;AACZ,CAAC"}

package/dist/components/display/List/List.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.module.js","names":["list","item","row","leading","content","description","trailing","List_module_default"],"sources":["../../../../src/components/display/List/List.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --list-inset         default var(--space-2) — row padding-inline (room for fills)\n *   --list-row-radius    default var(--radius-field) — hover/selected/highlighted fill\n *   --list-trailing-size default: the row's text size (same as the title)\n *   --highlight-tone-{positive,caution,critical,info}-text, --highlight-accent-text\n *                        tone text inside a highlighted row (shared with Table)\n *\n * Structure: li.item > .row (a div, or the asChild link/button) > slots. The row carries\n * padding, hover and focus so a linked row is one target edge to edge. Slots are spans,\n * valid inside <a> and <button>.\n */\n.list {\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-text);\n  color: var(--color-ink);\n}\n\n.item {\n  --_py: var(--space-3);\n  --_fill: transparent;\n  --_fill-ink: inherit;\n\n  position: relative;\n  min-inline-size: 0;\n}\n.list[data-density='compact'] > .item {\n  --_py: var(--space-2);\n}\n\n.list[data-divided] > .item + .item {\n  border-block-start: var(--border-width) solid var(--color-line);\n}\n/* A filled row doesn't need rules either side — the fill is its edge. */\n.list[data-divided] > .item:is([data-highlighted], [data-selected]),\n.list[data-divided] > .item:is([data-highlighted], [data-selected]) + .item {\n  border-block-start-color: transparent;\n}\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  inline-size: 100%;\n  min-inline-size: 0;\n  margin: 0;\n  padding-block: var(--_py);\n  padding-inline: var(--list-inset, var(--space-2));\n  border: 0;\n  border-radius: var(--list-row-radius, var(--radius-field));\n  background: var(--_fill);\n  color: var(--_fill-ink);\n  font: inherit;\n  text-align: start;\n  text-decoration: none;\n  transition: background-color var(--dur-1) var(--ease-out);\n}\n\n.item[data-selected] {\n  --_fill: var(--color-accent-soft);\n  --_fill-ink: var(--color-ink);\n}\n.item[data-highlighted] {\n  --_fill: var(--color-highlight);\n  --_fill-ink: var(--color-highlight-ink);\n  --_band-positive: var(\n    --highlight-tone-positive-text,\n    color-mix(in oklab, var(--tone-positive-text) 75%, var(--color-highlight-ink))\n  );\n  --_band-caution: var(\n    --highlight-tone-caution-text,\n    color-mix(in oklab, var(--tone-caution-text) 75%, var(--color-highlight-ink))\n  );\n  --_band-critical: var(\n    --highlight-tone-critical-text,\n    color-mix(in oklab, var(--tone-critical-text) 75%, var(--color-highlight-ink))\n  );\n  --_band-info: var(\n    --highlight-tone-info-text,\n    color-mix(in oklab, var(--tone-info-text) 75%, var(--color-highlight-ink))\n  );\n  --_band-accent: var(\n    --highlight-accent-text,\n    color-mix(in oklab, var(--color-accent-text) 75%, var(--color-highlight-ink))\n  );\n}\n\n/*\n * A filled row re-points the colour roles for its content, so a muted description, a\n * tone-coloured Numeral or a LiveIndicator stays legible on the fill (gold in Fiesta\n * night). The item publishes fill/ink under private names and the row swaps the roles —\n * redefining a role from itself on one element would be a var() cycle (see Section).\n */\n.item:is([data-highlighted], [data-selected]) > .row {\n  --color-ink: var(--_fill-ink);\n  --color-ink-muted: color-mix(in oklab, var(--_fill-ink), var(--_fill) 25%);\n  --color-ink-subtle: color-mix(in oklab, var(--_fill-ink), var(--_fill) 35%);\n}\n.item[data-highlighted] > .row {\n  --tone-positive-text: var(--_band-positive);\n  --tone-caution-text: var(--_band-caution);\n  --tone-critical-text: var(--_band-critical);\n  --tone-info-text: var(--_band-info);\n  --color-accent-text: var(--_band-accent);\n  /* Soft fills (a soft Badge or Tag) tint the band, like Section's accent band, so the\n     re-pointed tone texts above stay legible on them in every mode. */\n  --tone-positive-soft: color-mix(in oklab, var(--_band-positive) 8%, var(--_fill));\n  --tone-caution-soft: color-mix(in oklab, var(--_band-caution) 8%, var(--_fill));\n  --tone-critical-soft: color-mix(in oklab, var(--_band-critical) 8%, var(--_fill));\n  --tone-info-soft: color-mix(in oklab, var(--_band-info) 8%, var(--_fill));\n  --color-accent-soft: color-mix(in oklab, var(--_band-accent) 8%, var(--_fill));\n}\n\n.item[data-interactive] > .row {\n  cursor: pointer;\n}\n@media (hover: hover) {\n  .item[data-interactive]:not([data-highlighted], [data-selected]) > .row:hover {\n    background: var(--color-surface-sunken);\n  }\n  .item[data-interactive]:is([data-highlighted], [data-selected]) > .row:hover {\n    background: color-mix(in oklch, var(--_fill) 88%, var(--color-ink));\n  }\n}\n.row:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: -2px;\n}\n\n/* ── Slots ───────────────────────────────────────────────────────────────── */\n\n.leading {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: flex-end;\n  min-inline-size: 2ch;\n  color: var(--color-ink-muted);\n  font-family: var(--font-numeric);\n  font-stretch: var(--numeric-stretch);\n  font-weight: var(--label-weight);\n  font-variant-numeric: tabular-nums lining-nums;\n  font-size: var(--text-md);\n}\n.item[data-highlighted] .leading {\n  color: inherit;\n}\n\n.content {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  gap: calc(var(--space-1) / 2);\n  min-inline-size: 0;\n  font-size: var(--text-md);\n  font-weight: var(--label-weight);\n  line-height: var(--leading-snug);\n  overflow-wrap: anywhere;\n}\n\n.description {\n  color: var(--color-ink-muted);\n  font-size: var(--text-sm);\n  font-weight: 400;\n}\n\n.trailing {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--space-2);\n  margin-inline-start: auto;\n  text-align: end;\n  /*\n   * The row's text face and size, with tabular figures: a bare \"7 tasks\" sits level with the\n   * title instead of looming in the numeric face. Put a <Numeral>/<Amount> here for figures\n   * that should carry the numeric face (receipt mono in Ledger).\n   */\n  font-variant-numeric: tabular-nums lining-nums;\n  font-size: var(--list-trailing-size, var(--text-md));\n  font-weight: var(--label-weight);\n  line-height: var(--leading-snug);\n  white-space: nowrap;\n}\n"],"mappings":""}
+{"version":3,"file":"List.module.js","names":["list","item","row","leading","content","description","trailing","List_module_default"],"sources":["../../../../src/components/display/List/List.module.css"],"sourcesContent":["/*\n * Component tokens (themes may set any of these on [data-theme]):\n *   --list-inset         default var(--space-2) — row padding-inline (room for fills)\n *   --list-row-radius    default var(--radius-field) — hover/selected/highlighted fill\n *   --list-trailing-size default: the row's text size (same as the title)\n *   --list-rail-width    default var(--space-1) — the categorical rail of a `color` row\n *   --highlight-tone-{positive,caution,critical,info}-text, --highlight-accent-text\n *                        tone text inside a highlighted row (shared with Table)\n *\n * Structure: li.item > .row (a div, or the asChild link/button) > slots. The row carries\n * padding, hover and focus so a linked row is one target edge to edge. Slots are divs, so\n * block components (Stat, Stack, a sized Media) fit in them, and spans inside an asChild row,\n * the only content a button may hold.\n */\n.list {\n  display: flex;\n  flex-direction: column;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-text);\n  color: var(--color-ink);\n}\n\n.item {\n  --_py: var(--space-3);\n  --_fill: transparent;\n  --_fill-ink: inherit;\n\n  position: relative;\n  min-inline-size: 0;\n}\n.list[data-density='compact'] > .item {\n  --_py: var(--space-2);\n}\n\n.list[data-divided] > .item + .item {\n  border-block-start: var(--border-width) solid var(--color-line);\n}\n/* A filled row doesn't need rules either side — the fill is its edge. */\n.list[data-divided] > .item:is([data-highlighted], [data-selected]),\n.list[data-divided] > .item:is([data-highlighted], [data-selected]) + .item {\n  border-block-start-color: transparent;\n}\n\n.row {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  inline-size: 100%;\n  min-inline-size: 0;\n  margin: 0;\n  padding-block: var(--_py);\n  padding-inline: var(--list-inset, var(--space-2));\n  border: 0;\n  border-radius: var(--list-row-radius, var(--radius-field));\n  background: var(--_fill);\n  color: var(--_fill-ink);\n  font: inherit;\n  text-align: start;\n  text-decoration: none;\n  transition: background-color var(--dur-1) var(--ease-out);\n}\n\n.item[data-selected] {\n  --_fill: var(--color-accent-soft);\n  --_fill-ink: var(--color-ink);\n}\n.item[data-highlighted] {\n  --_fill: var(--color-highlight);\n  --_fill-ink: var(--color-highlight-ink);\n  --_band-positive: var(\n    --highlight-tone-positive-text,\n    color-mix(in oklab, var(--tone-positive-text) 75%, var(--color-highlight-ink))\n  );\n  --_band-caution: var(\n    --highlight-tone-caution-text,\n    color-mix(in oklab, var(--tone-caution-text) 75%, var(--color-highlight-ink))\n  );\n  --_band-critical: var(\n    --highlight-tone-critical-text,\n    color-mix(in oklab, var(--tone-critical-text) 75%, var(--color-highlight-ink))\n  );\n  --_band-info: var(\n    --highlight-tone-info-text,\n    color-mix(in oklab, var(--tone-info-text) 75%, var(--color-highlight-ink))\n  );\n  --_band-accent: var(\n    --highlight-accent-text,\n    color-mix(in oklab, var(--color-accent-text) 75%, var(--color-highlight-ink))\n  );\n}\n\n/*\n * A filled row re-points the colour roles for its content, so a muted description, a\n * tone-coloured Numeral or a LiveIndicator stays legible on the fill (gold in Fiesta\n * night). The item publishes fill/ink under private names and the row swaps the roles —\n * redefining a role from itself on one element would be a var() cycle (see Section).\n */\n.item:is([data-highlighted], [data-selected]) > .row {\n  --color-ink: var(--_fill-ink);\n  --color-ink-muted: color-mix(in oklab, var(--_fill-ink), var(--_fill) 25%);\n  --color-ink-subtle: color-mix(in oklab, var(--_fill-ink), var(--_fill) 35%);\n}\n.item[data-highlighted] > .row {\n  --tone-positive-text: var(--_band-positive);\n  --tone-caution-text: var(--_band-caution);\n  --tone-critical-text: var(--_band-critical);\n  --tone-info-text: var(--_band-info);\n  --color-accent-text: var(--_band-accent);\n  /* Soft fills (a soft Badge or Tag) tint the band, like Section's accent band, so the\n     re-pointed tone texts above stay legible on them in every mode. */\n  --tone-positive-soft: color-mix(in oklab, var(--_band-positive) 8%, var(--_fill));\n  --tone-caution-soft: color-mix(in oklab, var(--_band-caution) 8%, var(--_fill));\n  --tone-critical-soft: color-mix(in oklab, var(--_band-critical) 8%, var(--_fill));\n  --tone-info-soft: color-mix(in oklab, var(--_band-info) 8%, var(--_fill));\n  --color-accent-soft: color-mix(in oklab, var(--_band-accent) 8%, var(--_fill));\n}\n\n.item[data-interactive] > .row {\n  cursor: pointer;\n}\n\n/* Muted: out of play. The title drops to the muted step, which still clears AA. */\n.item[data-muted] > .row {\n  --color-ink: var(--color-ink-muted);\n\n  color: var(--color-ink-muted);\n}\n\n/* A categorical rail in the row's start inset: whose row it is, in their Tag's colour. */\n.item[data-color]::before {\n  content: '';\n  position: absolute;\n  inset-block: var(--space-1);\n  inset-inline-start: 0;\n  inline-size: var(--list-rail-width, var(--space-1));\n  border-radius: var(--radius-chip);\n  background: var(--_cat);\n}\n.item[data-color='1'] {\n  --_cat: var(--color-cat-1);\n}\n.item[data-color='2'] {\n  --_cat: var(--color-cat-2);\n}\n.item[data-color='3'] {\n  --_cat: var(--color-cat-3);\n}\n.item[data-color='4'] {\n  --_cat: var(--color-cat-4);\n}\n.item[data-color='5'] {\n  --_cat: var(--color-cat-5);\n}\n.item[data-color='6'] {\n  --_cat: var(--color-cat-6);\n}\n.item[data-color='7'] {\n  --_cat: var(--color-cat-7);\n}\n.item[data-color='8'] {\n  --_cat: var(--color-cat-8);\n}\n.item[data-color] > .row {\n  padding-inline-start: calc(var(--list-inset, var(--space-2)) + var(--space-2));\n}\n@media (hover: hover) {\n  .item[data-interactive]:not([data-highlighted], [data-selected]) > .row:hover {\n    background: var(--color-surface-sunken);\n  }\n  .item[data-interactive]:is([data-highlighted], [data-selected]) > .row:hover {\n    background: color-mix(in oklch, var(--_fill) 88%, var(--color-ink));\n  }\n}\n.row:focus-visible {\n  outline: 2px solid var(--color-focus);\n  outline-offset: -2px;\n}\n\n/* ── Slots ───────────────────────────────────────────────────────────────── */\n\n.leading {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: flex-end;\n  min-inline-size: 2ch;\n  color: var(--color-ink-muted);\n  font-family: var(--font-numeric);\n  font-stretch: var(--numeric-stretch);\n  font-weight: var(--label-weight);\n  font-variant-numeric: tabular-nums lining-nums;\n  font-size: var(--text-md);\n}\n.item[data-highlighted] .leading {\n  color: inherit;\n}\n\n.content {\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  gap: calc(var(--space-1) / 2);\n  min-inline-size: 0;\n  font-size: var(--text-md);\n  font-weight: var(--label-weight);\n  line-height: var(--leading-snug);\n  /* Wrap between words; break inside one only when a single word can't fit the column. */\n  overflow-wrap: break-word;\n}\n\n.description {\n  color: var(--color-ink-muted);\n  font-size: var(--text-sm);\n  font-weight: 400;\n}\n\n.trailing {\n  --stat-align: end;\n  --stat-container-type: normal;\n\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--space-2);\n  margin-inline-start: auto;\n  text-align: end;\n  /*\n   * The row's text face and size, with tabular figures: a bare \"7 tasks\" sits level with the\n   * title instead of looming in the numeric face. Put a <Numeral>/<Amount> here for figures\n   * that should carry the numeric face (receipt mono in Ledger).\n   */\n  font-variant-numeric: tabular-nums lining-nums;\n  font-size: var(--list-trailing-size, var(--text-md));\n  font-weight: var(--label-weight);\n  line-height: var(--leading-snug);\n  white-space: nowrap;\n}\n"],"mappings":""}