@misoto22/folio 0.17.0 → 0.18.0

package/dist/agent/index.md

@@ -1,4 +1,4 @@
-# @misoto22/folio 0.17.0
+# @misoto22/folio 0.18.0
 
 > Monochrome design system: portable CSS tokens and accessible React 19
 > primitives. Components ship compiled — import them, do not copy them.
@@ -19,6 +19,7 @@ An unset axis is the default.
 - `data-accent`: `clay` `cobalt` `ember` `forest` `ink` `moss` `plum` (unset = ink)
 - `data-action`: `accent` `ink` (unset = accent)
 - `data-chart-palette`: `accent` `chroma` (unset = the neutral series ramp)
+- `data-controls`: `pill` (unset = the control step of the radius ladder)
 - `data-density`: `comfortable` `compact` (unset = comfortable)
 - `data-mode`: `dark` `light` (unset = follows the app)
 - `data-motion`: `snappy` `still` (unset = calm)

package/dist/article.css

@@ -37,7 +37,7 @@
   color: var(--ink-2);
   font-family: var(--sans);
   font-size: 1rem;
-  font-weight: 300;
+  font-weight: var(--body-weight);
   line-height: 1.75;
 }
 

package/dist/components/Button/Button.js

@@ -3,7 +3,7 @@ import { Slot } from "@radix-ui/react-slot";
 import { cn } from "../../lib/cn.js";
 import { DEV, warn } from "../../lib/warn.js";
 import { Spinner } from "../Spinner/Spinner.js";
-const BASE = "inline-flex items-center justify-center gap-(--control-gap) rounded-(--radius) font-sans transition-[opacity,color,border-color,background-color] duration-(--duration-fast) ease-(--ease-out-expo) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none aria-disabled:opacity-(--disabled-opacity) aria-disabled:pointer-events-none";
+const BASE = "inline-flex items-center justify-center gap-(--control-gap) rounded-(--radius-control) font-sans transition-[opacity,color,border-color,background-color] duration-(--duration-fast) ease-(--ease-out-expo) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none aria-disabled:opacity-(--disabled-opacity) aria-disabled:pointer-events-none";
 const VARIANT = {
   primary: "bg-(--action) text-(--action-foreground) border border-(--action) hover:opacity-85",
   secondary: "border border-(--rule-2) text-(--ink) bg-transparent hover:border-(--ink)",

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { DEV, warn } from '../../lib/warn'\nimport { Spinner } from '../Spinner/Spinner'\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger'\nexport type ButtonSize = 'sm' | 'md' | 'lg'\n\n/**\n * The base every variant shares.\n *\n * It reads `--radius`, the CONTROL step, which is the same corner an `Input`,\n * a `Select` trigger and a `Textarea` draw. It used to be a pill, and a pill\n * beside an 8px field is two different ideas of what a control is — the one\n * inconsistency in the system that every reader noticed and none of the\n * component pages could explain. Everything on the control line now agrees,\n * and the capsule is kept for the things that genuinely are one: a badge, a\n * status pill, a segmented strip, a progress track.\n *\n * It does not move on hover. An earlier base lifted a pixel and asked for a\n * shadow the White Reset does not have — `--shadow` resolves to `none`, so that\n * hover state was invisible on every button in the system while still costing a\n * transition. Opacity carries the filled hover; the border carries the outlined\n * one.\n *\n * The transition names its properties rather than using `all`, so a layout\n * change (a width that grows when the label becomes \"Saving…\") is instant\n * instead of sliding.\n */\nconst BASE =\n  'inline-flex items-center justify-center gap-(--control-gap) rounded-(--radius) font-sans transition-[opacity,color,border-color,background-color] duration-(--duration-fast) ease-(--ease-out-expo) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none aria-disabled:opacity-(--disabled-opacity) aria-disabled:pointer-events-none'\n\nconst VARIANT: Record<ButtonVariant, string> = {\n  primary: 'bg-(--action) text-(--action-foreground) border border-(--action) hover:opacity-85',\n  secondary: 'border border-(--rule-2) text-(--ink) bg-transparent hover:border-(--ink)',\n  ghost: 'border border-transparent text-(--ink-2) hover:text-(--ink) hover:bg-(--stone)',\n  /* The one place chroma is allowed on a control, and only because the action\n     is destructive — that is a state, not a brand colour. */\n  danger: 'bg-(--danger) text-(--paper) border border-(--danger) hover:opacity-85',\n}\n\n/**\n * `min-h` rather than `h`, so a button that wraps to two lines grows instead of\n * clipping.\n *\n * The heights come from the density tokens rather than from a literal, so a\n * subtree marked `data-density=\"compact\"` shrinks its controls without a single\n * call site being told. At the default density `md` is 44px — the pointer\n * target WCAG 2.5.5 asks for.\n *\n * `--control-lh` is what makes those numbers true rather than aspirational. A\n * floor only binds while the box is under it, and the box is the line plus the\n * padding plus the border — so a label inheriting the body's 1.6 leading put\n * `sm` at 39px against its own 36px token, `md` at 46 against 44 and `lg` at 50\n * against 48. Every size was two to three pixels taller than the number\n * documenting it, which is also how a masthead sized from `--control-h-sm`\n * ended up with a search field standing proud of every icon beside it.\n */\nconst SIZE: Record<ButtonSize, string> = {\n  sm: 'min-h-(--control-h-sm) px-(--control-px-sm) py-(--control-py-sm) text-[13px] leading-(--control-lh)',\n  md: 'min-h-(--control-h-md) px-(--control-px-md) py-(--control-py-md) text-sm leading-(--control-lh)',\n  lg: 'min-h-(--control-h-lg) px-(--control-px-lg) py-(--control-py-lg) text-[15px] leading-(--control-lh)',\n}\n\n/** Square, because an icon has no label to give the box its width. */\nconst ICON_SIZE: Record<ButtonSize, string> = {\n  sm: 'size-(--control-h-sm) p-0',\n  md: 'size-(--control-h-md) p-0',\n  lg: 'size-(--control-h-lg) p-0',\n}\n\nconst SPINNER_SIZE: Record<ButtonSize, 'sm' | 'md'> = { sm: 'sm', md: 'sm', lg: 'md' }\n\ninterface CommonProps {\n  children?: ReactNode\n  /**\n   * Which action this is. `primary` is the one thing the screen wants you to\n   * do, so there is at most one per view; `danger` is reserved for destructive\n   * actions and is the only place chroma is allowed on a control.\n   */\n  variant?: ButtonVariant\n  /** 36 / 44 / 48px tall. `md` meets the pointer-target floor on its own. */\n  size?: ButtonSize\n  /** Optional mono keycap glyph rendered after the label (e.g. \"P\"). */\n  keycap?: string\n  /**\n   * Swaps the leading content for a spinner and blocks interaction. The label\n   * stays put — a button that empties out while it works loses its width, and\n   * the page reflows under the pointer that just clicked it.\n   */\n  loading?: boolean\n  /**\n   * Square control with no label. REQUIRES `aria-label`: an icon-only button\n   * with no accessible name is invisible to a screen reader, and this is the\n   * single most common way a design system ships an unusable control.\n   */\n  iconOnly?: boolean\n  /**\n   * Render the child element instead of a `<button>`, keeping these styles.\n   * Use it to hand the styling to a router's `Link` — `asChild` is what keeps\n   * this package free of any one router.\n   *\n   * The decoration slots (`keycap`, `loading`) are not injected into a slotted\n   * child; compose them inside it yourself.\n   *\n   * @example\n   * <Button asChild><Link href=\"/work\">Work</Link></Button>\n   */\n  asChild?: boolean\n  className?: string\n}\n\ntype ButtonAsLink = CommonProps &\n  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'children'> & { href: string }\n\ntype ButtonAsButton = CommonProps &\n  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children'> & { href?: undefined }\n\nexport type ButtonProps = ButtonAsLink | ButtonAsButton\n\nfunction Keycap({ glyph }: { glyph: string }) {\n  return (\n    <span className=\"rounded-(--radius-sm) border border-current px-2 py-0.5 font-mono text-[11px] opacity-55\">\n      {glyph}\n    </span>\n  )\n}\n\n/**\n * The system's action.\n *\n * Renders a `<button>`, or an `<a>` when given `href`, or whatever you hand it\n * via `asChild`. No router is imported, so the package stays framework-agnostic\n * and a Next or React Router app wires its own `Link` at the call site.\n *\n * Server-component friendly: there is no client boundary here, so it renders in\n * a static page as well as an interactive one.\n *\n * @example\n * <Button variant=\"secondary\" keycap=\"P\">View projects</Button>\n * @example\n * <Button loading disabled>Saving…</Button>\n * @example\n * <Button iconOnly aria-label=\"Close\"><X size={16} /></Button>\n */\nexport function Button(props: ButtonProps) {\n  const {\n    children,\n    variant = 'primary',\n    size = 'md',\n    keycap,\n    loading = false,\n    iconOnly = false,\n    asChild = false,\n    className,\n  } = props\n\n  const cls = cn(BASE, VARIANT[variant], iconOnly ? ICON_SIZE[size] : SIZE[size], className)\n\n  if (DEV && iconOnly) {\n    // The control renders correctly and is announced as \"button\" and nothing\n    // else. Nothing about the rendered page says so, which is why this is the\n    // single most common way a design system ships an unusable control.\n    const named =\n      typeof props['aria-label'] === 'string' && props['aria-label'].trim() !== ''\n    const described = typeof props['aria-labelledby'] === 'string'\n    if (!named && !described) {\n      warn({\n        code: 'BUTTON_ICON_ONLY_UNNAMED',\n        problem:\n          'An iconOnly Button has no text, so without an accessible name a screen reader announces it as \"button\" and nothing else.',\n        field: 'aria-label',\n        fix: 'Add aria-label with the action the button performs, e.g. aria-label=\"Delete invoice\".',\n        component: 'Button',\n      })\n    }\n  }\n\n  // A filled ground needs a spinner in the inherited colour; an outlined one\n  // reads better against the page's own rule scale.\n  const spinnerTone = variant === 'primary' || variant === 'danger' ? 'current' : 'default'\n  const decoration = (\n    <>\n      {loading && <Spinner size={SPINNER_SIZE[size]} tone={spinnerTone} label={null} />}\n      {children}\n      {keycap && <Keycap glyph={keycap} />}\n    </>\n  )\n\n  if (asChild) {\n    const { children: _c, variant: _v, size: _s, keycap: _k, loading: _l, iconOnly: _i, asChild: _a, className: _cn, ...rest } = props\n    return (\n      <Slot className={cls} {...rest}>\n        {children}\n      </Slot>\n    )\n  }\n\n  if (props.href !== undefined) {\n    const { children: _c, variant: _v, size: _s, keycap: _k, loading: _l, iconOnly: _i, asChild: _a, className: _cn, href, ...rest } = props\n    return (\n      <a\n        href={href}\n        className={cls}\n        // A link cannot be `disabled`; `aria-disabled` plus the pointer-events\n        // rule in BASE is the accessible equivalent.\n        aria-disabled={loading || undefined}\n        {...rest}\n      >\n        {decoration}\n      </a>\n    )\n  }\n\n  const { children: _c, variant: _v, size: _s, keycap: _k, loading: _l, iconOnly: _i, asChild: _a, className: _cn, ...rest } = props\n  return (\n    <button\n      type={rest.type ?? 'button'}\n      aria-busy={loading || undefined}\n      disabled={rest.disabled || loading}\n      className={cls}\n      {...rest}\n    >\n      {decoration}\n    </button>\n  )\n}\n\nexport default Button\n"],"mappings":"AA2HI,SA4DA,UA5DA,KA4DA,YA5DA;AA3HJ,SAAS,YAAY;AAErB,SAAS,UAAU;AACnB,SAAS,KAAK,YAAY;AAC1B,SAAS,eAAe;AA0BxB,MAAM,OACJ;AAEF,MAAM,UAAyC;AAAA,EAC7C,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA;AAAA;AAAA,EAGP,QAAQ;AACV;AAmBA,MAAM,OAAmC;AAAA,EACvC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,MAAM,YAAwC;AAAA,EAC5C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAAgD,EAAE,IAAI,MAAM,IAAI,MAAM,IAAI,KAAK;AAiDrF,SAAS,OAAO,EAAE,MAAM,GAAsB;AAC5C,SACE,oBAAC,UAAK,WAAU,4FACb,iBACH;AAEJ;AAmBO,SAAS,OAAO,OAAoB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,GAAG,MAAM,QAAQ,OAAO,GAAG,WAAW,UAAU,IAAI,IAAI,KAAK,IAAI,GAAG,SAAS;AAEzF,MAAI,OAAO,UAAU;AAInB,UAAM,QACJ,OAAO,MAAM,YAAY,MAAM,YAAY,MAAM,YAAY,EAAE,KAAK,MAAM;AAC5E,UAAM,YAAY,OAAO,MAAM,iBAAiB,MAAM;AACtD,QAAI,CAAC,SAAS,CAAC,WAAW;AACxB,WAAK;AAAA,QACH,MAAM;AAAA,QACN,SACE;AAAA,QACF,OAAO;AAAA,QACP,KAAK;AAAA,QACL,WAAW;AAAA,MACb,CAAC;AAAA,IACH;AAAA,EACF;AAIA,QAAM,cAAc,YAAY,aAAa,YAAY,WAAW,YAAY;AAChF,QAAM,aACJ,iCACG;AAAA,eAAW,oBAAC,WAAQ,MAAM,aAAa,IAAI,GAAG,MAAM,aAAa,OAAO,MAAM;AAAA,IAC9E;AAAA,IACA,UAAU,oBAAC,UAAO,OAAO,QAAQ;AAAA,KACpC;AAGF,MAAI,SAAS;AACX,UAAM,EAAE,UAAUA,KAAI,SAASC,KAAI,MAAMC,KAAI,QAAQC,KAAI,SAASC,KAAI,UAAUC,KAAI,SAASC,KAAI,WAAWC,MAAK,GAAGC,MAAK,IAAI;AAC7H,WACE,oBAAC,QAAK,WAAW,KAAM,GAAGA,OACvB,UACH;AAAA,EAEJ;AAEA,MAAI,MAAM,SAAS,QAAW;AAC5B,UAAM,EAAE,UAAUR,KAAI,SAASC,KAAI,MAAMC,KAAI,QAAQC,KAAI,SAASC,KAAI,UAAUC,KAAI,SAASC,KAAI,WAAWC,MAAK,MAAM,GAAGC,MAAK,IAAI;AACnI,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,QAGX,iBAAe,WAAW;AAAA,QACzB,GAAGA;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,QAAM,EAAE,UAAU,IAAI,SAAS,IAAI,MAAM,IAAI,QAAQ,IAAI,SAAS,IAAI,UAAU,IAAI,SAAS,IAAI,WAAW,KAAK,GAAG,KAAK,IAAI;AAC7H,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,KAAK,QAAQ;AAAA,MACnB,aAAW,WAAW;AAAA,MACtB,UAAU,KAAK,YAAY;AAAA,MAC3B,WAAW;AAAA,MACV,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,iBAAQ;","names":["_c","_v","_s","_k","_l","_i","_a","_cn","rest"]}
+{"version":3,"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { DEV, warn } from '../../lib/warn'\nimport { Spinner } from '../Spinner/Spinner'\n\nexport type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger'\nexport type ButtonSize = 'sm' | 'md' | 'lg'\n\n/**\n * The base every variant shares.\n *\n * It reads `--radius-control`, which defaults to `--radius`, the same corner an\n * `Input`, a `Select` trigger and a `Textarea` draw. It used to be a hard-coded\n * pill, and a pill beside an 8px field that nobody chose is two different ideas\n * of what a control is. The shape is now a theme decision: the `data-controls`\n * axis sets it for every button at once (the Workbench preset makes them\n * capsules), so a host never re-rounds a single button by hand.\n *\n * It does not move on hover. An earlier base lifted a pixel and asked for a\n * shadow the White Reset does not have — `--shadow` resolves to `none`, so that\n * hover state was invisible on every button in the system while still costing a\n * transition. Opacity carries the filled hover; the border carries the outlined\n * one.\n *\n * The transition names its properties rather than using `all`, so a layout\n * change (a width that grows when the label becomes \"Saving…\") is instant\n * instead of sliding.\n */\nconst BASE =\n  'inline-flex items-center justify-center gap-(--control-gap) rounded-(--radius-control) font-sans transition-[opacity,color,border-color,background-color] duration-(--duration-fast) ease-(--ease-out-expo) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none aria-disabled:opacity-(--disabled-opacity) aria-disabled:pointer-events-none'\n\nconst VARIANT: Record<ButtonVariant, string> = {\n  primary: 'bg-(--action) text-(--action-foreground) border border-(--action) hover:opacity-85',\n  secondary: 'border border-(--rule-2) text-(--ink) bg-transparent hover:border-(--ink)',\n  ghost: 'border border-transparent text-(--ink-2) hover:text-(--ink) hover:bg-(--stone)',\n  /* The one place chroma is allowed on a control, and only because the action\n     is destructive — that is a state, not a brand colour. */\n  danger: 'bg-(--danger) text-(--paper) border border-(--danger) hover:opacity-85',\n}\n\n/**\n * `min-h` rather than `h`, so a button that wraps to two lines grows instead of\n * clipping.\n *\n * The heights come from the density tokens rather than from a literal, so a\n * subtree marked `data-density=\"compact\"` shrinks its controls without a single\n * call site being told. At the default density `md` is 44px — the pointer\n * target WCAG 2.5.5 asks for.\n *\n * `--control-lh` is what makes those numbers true rather than aspirational. A\n * floor only binds while the box is under it, and the box is the line plus the\n * padding plus the border — so a label inheriting the body's 1.6 leading put\n * `sm` at 39px against its own 36px token, `md` at 46 against 44 and `lg` at 50\n * against 48. Every size was two to three pixels taller than the number\n * documenting it, which is also how a masthead sized from `--control-h-sm`\n * ended up with a search field standing proud of every icon beside it.\n */\nconst SIZE: Record<ButtonSize, string> = {\n  sm: 'min-h-(--control-h-sm) px-(--control-px-sm) py-(--control-py-sm) text-[13px] leading-(--control-lh)',\n  md: 'min-h-(--control-h-md) px-(--control-px-md) py-(--control-py-md) text-sm leading-(--control-lh)',\n  lg: 'min-h-(--control-h-lg) px-(--control-px-lg) py-(--control-py-lg) text-[15px] leading-(--control-lh)',\n}\n\n/** Square, because an icon has no label to give the box its width. */\nconst ICON_SIZE: Record<ButtonSize, string> = {\n  sm: 'size-(--control-h-sm) p-0',\n  md: 'size-(--control-h-md) p-0',\n  lg: 'size-(--control-h-lg) p-0',\n}\n\nconst SPINNER_SIZE: Record<ButtonSize, 'sm' | 'md'> = { sm: 'sm', md: 'sm', lg: 'md' }\n\ninterface CommonProps {\n  children?: ReactNode\n  /**\n   * Which action this is. `primary` is the one thing the screen wants you to\n   * do, so there is at most one per view; `danger` is reserved for destructive\n   * actions and is the only place chroma is allowed on a control.\n   */\n  variant?: ButtonVariant\n  /** 36 / 44 / 48px tall. `md` meets the pointer-target floor on its own. */\n  size?: ButtonSize\n  /** Optional mono keycap glyph rendered after the label (e.g. \"P\"). */\n  keycap?: string\n  /**\n   * Swaps the leading content for a spinner and blocks interaction. The label\n   * stays put — a button that empties out while it works loses its width, and\n   * the page reflows under the pointer that just clicked it.\n   */\n  loading?: boolean\n  /**\n   * Square control with no label. REQUIRES `aria-label`: an icon-only button\n   * with no accessible name is invisible to a screen reader, and this is the\n   * single most common way a design system ships an unusable control.\n   */\n  iconOnly?: boolean\n  /**\n   * Render the child element instead of a `<button>`, keeping these styles.\n   * Use it to hand the styling to a router's `Link` — `asChild` is what keeps\n   * this package free of any one router.\n   *\n   * The decoration slots (`keycap`, `loading`) are not injected into a slotted\n   * child; compose them inside it yourself.\n   *\n   * @example\n   * <Button asChild><Link href=\"/work\">Work</Link></Button>\n   */\n  asChild?: boolean\n  className?: string\n}\n\ntype ButtonAsLink = CommonProps &\n  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'className' | 'children'> & { href: string }\n\ntype ButtonAsButton = CommonProps &\n  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'children'> & { href?: undefined }\n\nexport type ButtonProps = ButtonAsLink | ButtonAsButton\n\nfunction Keycap({ glyph }: { glyph: string }) {\n  return (\n    <span className=\"rounded-(--radius-sm) border border-current px-2 py-0.5 font-mono text-[11px] opacity-55\">\n      {glyph}\n    </span>\n  )\n}\n\n/**\n * The system's action.\n *\n * Renders a `<button>`, or an `<a>` when given `href`, or whatever you hand it\n * via `asChild`. No router is imported, so the package stays framework-agnostic\n * and a Next or React Router app wires its own `Link` at the call site.\n *\n * Server-component friendly: there is no client boundary here, so it renders in\n * a static page as well as an interactive one.\n *\n * @example\n * <Button variant=\"secondary\" keycap=\"P\">View projects</Button>\n * @example\n * <Button loading disabled>Saving…</Button>\n * @example\n * <Button iconOnly aria-label=\"Close\"><X size={16} /></Button>\n */\nexport function Button(props: ButtonProps) {\n  const {\n    children,\n    variant = 'primary',\n    size = 'md',\n    keycap,\n    loading = false,\n    iconOnly = false,\n    asChild = false,\n    className,\n  } = props\n\n  const cls = cn(BASE, VARIANT[variant], iconOnly ? ICON_SIZE[size] : SIZE[size], className)\n\n  if (DEV && iconOnly) {\n    // The control renders correctly and is announced as \"button\" and nothing\n    // else. Nothing about the rendered page says so, which is why this is the\n    // single most common way a design system ships an unusable control.\n    const named =\n      typeof props['aria-label'] === 'string' && props['aria-label'].trim() !== ''\n    const described = typeof props['aria-labelledby'] === 'string'\n    if (!named && !described) {\n      warn({\n        code: 'BUTTON_ICON_ONLY_UNNAMED',\n        problem:\n          'An iconOnly Button has no text, so without an accessible name a screen reader announces it as \"button\" and nothing else.',\n        field: 'aria-label',\n        fix: 'Add aria-label with the action the button performs, e.g. aria-label=\"Delete invoice\".',\n        component: 'Button',\n      })\n    }\n  }\n\n  // A filled ground needs a spinner in the inherited colour; an outlined one\n  // reads better against the page's own rule scale.\n  const spinnerTone = variant === 'primary' || variant === 'danger' ? 'current' : 'default'\n  const decoration = (\n    <>\n      {loading && <Spinner size={SPINNER_SIZE[size]} tone={spinnerTone} label={null} />}\n      {children}\n      {keycap && <Keycap glyph={keycap} />}\n    </>\n  )\n\n  if (asChild) {\n    const { children: _c, variant: _v, size: _s, keycap: _k, loading: _l, iconOnly: _i, asChild: _a, className: _cn, ...rest } = props\n    return (\n      <Slot className={cls} {...rest}>\n        {children}\n      </Slot>\n    )\n  }\n\n  if (props.href !== undefined) {\n    const { children: _c, variant: _v, size: _s, keycap: _k, loading: _l, iconOnly: _i, asChild: _a, className: _cn, href, ...rest } = props\n    return (\n      <a\n        href={href}\n        className={cls}\n        // A link cannot be `disabled`; `aria-disabled` plus the pointer-events\n        // rule in BASE is the accessible equivalent.\n        aria-disabled={loading || undefined}\n        {...rest}\n      >\n        {decoration}\n      </a>\n    )\n  }\n\n  const { children: _c, variant: _v, size: _s, keycap: _k, loading: _l, iconOnly: _i, asChild: _a, className: _cn, ...rest } = props\n  return (\n    <button\n      type={rest.type ?? 'button'}\n      aria-busy={loading || undefined}\n      disabled={rest.disabled || loading}\n      className={cls}\n      {...rest}\n    >\n      {decoration}\n    </button>\n  )\n}\n\nexport default Button\n"],"mappings":"AA0HI,SA4DA,UA5DA,KA4DA,YA5DA;AA1HJ,SAAS,YAAY;AAErB,SAAS,UAAU;AACnB,SAAS,KAAK,YAAY;AAC1B,SAAS,eAAe;AAyBxB,MAAM,OACJ;AAEF,MAAM,UAAyC;AAAA,EAC7C,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA;AAAA;AAAA,EAGP,QAAQ;AACV;AAmBA,MAAM,OAAmC;AAAA,EACvC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAGA,MAAM,YAAwC;AAAA,EAC5C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,eAAgD,EAAE,IAAI,MAAM,IAAI,MAAM,IAAI,KAAK;AAiDrF,SAAS,OAAO,EAAE,MAAM,GAAsB;AAC5C,SACE,oBAAC,UAAK,WAAU,4FACb,iBACH;AAEJ;AAmBO,SAAS,OAAO,OAAoB;AACzC,QAAM;AAAA,IACJ;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP;AAAA,IACA,UAAU;AAAA,IACV,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,EACF,IAAI;AAEJ,QAAM,MAAM,GAAG,MAAM,QAAQ,OAAO,GAAG,WAAW,UAAU,IAAI,IAAI,KAAK,IAAI,GAAG,SAAS;AAEzF,MAAI,OAAO,UAAU;AAInB,UAAM,QACJ,OAAO,MAAM,YAAY,MAAM,YAAY,MAAM,YAAY,EAAE,KAAK,MAAM;AAC5E,UAAM,YAAY,OAAO,MAAM,iBAAiB,MAAM;AACtD,QAAI,CAAC,SAAS,CAAC,WAAW;AACxB,WAAK;AAAA,QACH,MAAM;AAAA,QACN,SACE;AAAA,QACF,OAAO;AAAA,QACP,KAAK;AAAA,QACL,WAAW;AAAA,MACb,CAAC;AAAA,IACH;AAAA,EACF;AAIA,QAAM,cAAc,YAAY,aAAa,YAAY,WAAW,YAAY;AAChF,QAAM,aACJ,iCACG;AAAA,eAAW,oBAAC,WAAQ,MAAM,aAAa,IAAI,GAAG,MAAM,aAAa,OAAO,MAAM;AAAA,IAC9E;AAAA,IACA,UAAU,oBAAC,UAAO,OAAO,QAAQ;AAAA,KACpC;AAGF,MAAI,SAAS;AACX,UAAM,EAAE,UAAUA,KAAI,SAASC,KAAI,MAAMC,KAAI,QAAQC,KAAI,SAASC,KAAI,UAAUC,KAAI,SAASC,KAAI,WAAWC,MAAK,GAAGC,MAAK,IAAI;AAC7H,WACE,oBAAC,QAAK,WAAW,KAAM,GAAGA,OACvB,UACH;AAAA,EAEJ;AAEA,MAAI,MAAM,SAAS,QAAW;AAC5B,UAAM,EAAE,UAAUR,KAAI,SAASC,KAAI,MAAMC,KAAI,QAAQC,KAAI,SAASC,KAAI,UAAUC,KAAI,SAASC,KAAI,WAAWC,MAAK,MAAM,GAAGC,MAAK,IAAI;AACnI,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,QAGX,iBAAe,WAAW;AAAA,QACzB,GAAGA;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,QAAM,EAAE,UAAU,IAAI,SAAS,IAAI,MAAM,IAAI,QAAQ,IAAI,SAAS,IAAI,UAAU,IAAI,SAAS,IAAI,WAAW,KAAK,GAAG,KAAK,IAAI;AAC7H,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,KAAK,QAAQ;AAAA,MACnB,aAAW,WAAW;AAAA,MACtB,UAAU,KAAK,YAAY;AAAA,MAC3B,WAAW;AAAA,MACV,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,iBAAQ;","names":["_c","_v","_s","_k","_l","_i","_a","_cn","rest"]}

package/dist/components/Command/Command.d.ts

@@ -113,6 +113,8 @@ interface CommandDialogProps {
     onCloseAutoFocus?: DialogContentProps['onCloseAutoFocus'];
     /** Runs before Escape closes the dialog. Prevent the default to keep it open, as a nested view stepping back does. */
     onEscapeKeyDown?: DialogContentProps['onEscapeKeyDown'];
+    /** Merged onto the panel after its defaults, so a composition can place and animate it. */
+    className?: string;
 }
 /**
  * The palette in a modal, which is how it is nearly always used.
@@ -120,6 +122,6 @@ interface CommandDialogProps {
  * The dialog's own padding is removed: a palette is edge-to-edge, and its input
  * is the first thing focus lands on.
  */
-declare function CommandDialog({ open, onOpenChange, label, inputLabel, children, shouldFilter, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, }: CommandDialogProps): react.JSX.Element;
+declare function CommandDialog({ open, onOpenChange, label, inputLabel, children, shouldFilter, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, className, }: CommandDialogProps): react.JSX.Element;
 
 export { Command, CommandDialog, type CommandDialogProps, CommandEmpty, CommandFooter, CommandGroup, CommandHint, type CommandHintProps, CommandInput, CommandItem, type CommandItemProps, CommandList, CommandSeparator, Command as default };

package/dist/components/Command/Command.js

@@ -163,7 +163,8 @@ function CommandDialog({
   shouldFilter,
   onOpenAutoFocus,
   onCloseAutoFocus,
-  onEscapeKeyDown
+  onEscapeKeyDown,
+  className
 }) {
   return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsx(
     DialogContent,
@@ -174,7 +175,7 @@ function CommandDialog({
       onOpenAutoFocus,
       onCloseAutoFocus,
       onEscapeKeyDown,
-      className: "top-[10vh] w-[min(94vw,44rem)] translate-y-0 overflow-hidden p-0 [scrollbar-gutter:auto]",
+      className: cn("top-[10vh] w-[min(94vw,44rem)] translate-y-0 overflow-hidden p-0 [scrollbar-gutter:auto]", className),
       children: /* @__PURE__ */ jsx(
         Command,
         {

package/dist/components/Command/Command.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Command/Command.tsx"],"sourcesContent":["'use client'\n\nimport { Command as CommandPrimitive } from 'cmdk'\nimport { RiSearchLine, type RemixiconComponentType } from '@remixicon/react'\nimport { isValidElement, type ComponentProps, type ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/**\n * True for a component type — `icon={Settings}` — rather than a rendered element.\n *\n * Everything a `ReactNode` can be is an element, a primitive, an array, another\n * iterable or a promise; a Remix Icon glyph is none of those, it is a plain\n * function component. So both spellings are tellable apart at runtime, which is\n * what lets one prop take either — and it has to, because this prop meant the\n * opposite thing one import away and the wrong spelling failed at render, not\n * at the type.\n */\nfunction isIconComponent(icon: RemixiconComponentType | ReactNode): icon is RemixiconComponentType {\n  if (isValidElement(icon)) return false\n  if (typeof icon === 'function') return true\n  if (typeof icon !== 'object' || icon === null) return false\n  return !Array.isArray(icon) && !(Symbol.iterator in icon) && !('then' in icon)\n}\n\n/** The leading glyph, sized by this component when it was handed a component. */\nfunction iconNode(icon: RemixiconComponentType | ReactNode): ReactNode {\n  if (!isIconComponent(icon)) return icon\n  const Icon = icon\n  return <Icon size={16} aria-hidden />\n}\nimport { Dialog, DialogContent, type DialogContentProps } from '../Dialog/Dialog'\nimport { Kbd } from '../Kbd/Kbd'\n\n/**\n * A filterable list of actions — the ⌘K surface.\n *\n * Built on cmdk rather than on a `Select` or a menu, because the interaction is\n * neither: the list is filtered as you type, the highlighted row moves with the\n * arrow keys while focus STAYS in the input, and Enter runs the highlighted\n * row. That is the ARIA combobox pattern, and it is the part nobody should\n * hand-roll — `aria-activedescendant` moving without focus moving is precisely\n * where a home-made palette stops working with a screen reader.\n *\n * @example\n * <Command label=\"Command palette\">\n *   <CommandInput placeholder=\"Type a command…\" />\n *   <CommandList>\n *     <CommandEmpty>Nothing matches.</CommandEmpty>\n *     <CommandGroup heading=\"Navigate\">\n *       <CommandItem onSelect={go}>Components</CommandItem>\n *     </CommandGroup>\n *   </CommandList>\n * </Command>\n */\nexport function Command({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      className={cn(\n        'flex w-full flex-col overflow-hidden rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) shadow-(--panel-lift) panel-blur',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** The filter field. Carries the search icon and the combobox semantics. */\nexport function CommandInput({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div className=\"flex items-center gap-3 border-b border-(--rule) px-4\">\n      <RiSearchLine size={18} aria-hidden className=\"shrink-0 text-(--ink-3-aa)\" />\n      <CommandPrimitive.Input\n        className={cn(\n          'h-13 w-full bg-transparent text-base md:text-[15px] text-(--ink) outline-none placeholder:text-(--ink-3-aa)',\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport function CommandList({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      className={cn('max-h-72 overflow-y-auto overflow-x-hidden p-2 scroll-slim', className)}\n      {...props}\n    />\n  )\n}\n\n/** Shown when the filter matches nothing. Say what would match, not \"no results\". */\nexport function CommandEmpty(props: ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      className=\"px-3 py-10 text-center text-sm text-(--ink-3-aa)\"\n      {...props}\n    />\n  )\n}\n\n/**\n * The key-hint strip along the bottom.\n *\n * A palette is a keyboard surface whose keys are invisible: nothing on screen\n * says the arrows move the row or that Enter runs it, and a reader who reaches\n * for the mouse has been failed by the design rather than by themselves.\n *\n * @example\n * <CommandFooter>\n *   <CommandHint keys={['↑', '↓']}>navigate</CommandHint>\n *   <CommandHint keys={['↵']}>open</CommandHint>\n * </CommandFooter>\n */\nexport function CommandFooter({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-4 border-t border-(--rule) bg-(--paper-2) px-3.5 py-2',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface CommandHintProps extends Omit<ComponentProps<'span'>, 'children'> {\n  /** The keys this hint describes, printed as `Kbd` chips. */\n  keys: string[]\n  /** What they do — a verb, lowercase, no sentence. */\n  children: ReactNode\n}\n\n/** One key-and-verb pair inside a `CommandFooter`. */\nexport function CommandHint({ keys, children, className, ...props }: CommandHintProps) {\n  return (\n    <span className={cn('flex items-center gap-1.5 mono-meta text-(--ink-3-aa)', className)} {...props}>\n      {keys.map((key) => (\n        <Kbd key={key}>{key}</Kbd>\n      ))}\n      {children}\n    </span>\n  )\n}\n\nexport function CommandGroup({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      className={cn(\n        'overflow-hidden [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:eyebrow [&_[cmdk-group-heading]]:text-(--ink-3-aa)',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * A divider between groups.\n *\n * Marked presentational, because ARIA permits a `listbox` to contain only\n * `option` and `group` — and the library renders this as `role=\"separator\"`,\n * which puts a critical `aria-required-children` violation inside every palette\n * that uses one. The grouping is already announced by the groups themselves, so\n * removing the divider from the accessibility tree loses nothing.\n */\nexport function CommandSeparator({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn('my-1 h-px bg-(--rule)', className)}\n      {...props}\n    />\n  )\n}\n\nexport interface CommandItemProps extends ComponentProps<typeof CommandPrimitive.Item> {\n  /** A shortcut printed at the end of the row. */\n  shortcut?: string\n  /**\n   * A leading glyph. Either spelling — `icon={<Settings size={16} />}` passes\n   * the element, `icon={Settings}` passes the component and this sizes it.\n   *\n   * It is what makes a long list scannable — the eye sorts by shape before it\n   * reads, and forty identical rows of text defeat that.\n   */\n  icon?: RemixiconComponentType | ReactNode\n  /**\n   * A quiet note at the end of the row — what kind of thing this is, or its\n   * current state. Not a description: a palette that prints a sentence per row\n   * stops being scannable at about six of them.\n   */\n  meta?: ReactNode\n}\n\nexport function CommandItem({ shortcut, icon, meta, className, children, ...props }: CommandItemProps) {\n  return (\n    <CommandPrimitive.Item\n      className={cn(\n        'flex cursor-pointer items-center gap-3 overflow-hidden rounded-(--radius-row) px-3 py-2.5 text-[15px] text-(--ink-2) outline-none transition-colors duration-(--duration-fast)',\n        // The highlighted row is a chosen state, and law 7 says a chosen state\n        // reads --accent. The leading rule gives it an edge the eye catches\n        // while scrolling, which a fill alone does not.\n        //\n        // `overflow-hidden` above clips the bar below to the row's own\n        // `--radius-row` corner. Without it the bar is a straight-edged\n        // absolutely-positioned box that ignores the rounded highlight behind\n        // it — invisible at `sharp` (0px radius) and barely off at the\n        // default, but at `round` the row's radius outgrows the bar's own\n        // inset and the bar pokes past the curve by several pixels. The row\n        // is never a clip boundary for anything but itself: padding keeps\n        // every child (icon, label, meta, shortcut) inside it already, so\n        // clipping to the row's shape costs nothing else. The focus ring\n        // is unaffected too — `outline` paints outside the border box, which\n        // an element's own `overflow` never clips.\n        'relative data-[selected=true]:bg-(--accent-muted) data-[selected=true]:text-(--ink)',\n        'before:absolute before:inset-y-1 before:start-0 before:w-0.5 before:rounded-(--radius-pill) before:bg-transparent data-[selected=true]:before:bg-(--accent)',\n        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-(--disabled-opacity)',\n        className,\n      )}\n      {...props}\n    >\n      {icon && (\n        <span className=\"grid size-4 shrink-0 place-items-center text-(--ink-3-aa) [&_svg]:size-4\">\n          {iconNode(icon)}\n        </span>\n      )}\n      {children}\n      {meta && <span className=\"ms-auto ps-3 mono-meta text-(--ink-3-aa)\">{meta}</span>}\n      {shortcut && <Kbd className={cn(meta ? '' : 'ms-auto')}>{shortcut}</Kbd>}\n    </CommandPrimitive.Item>\n  )\n}\n\nexport interface CommandDialogProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  /** Names the palette for assistive tech. */\n  label: string\n  /**\n   * Names the search field when it should read differently from the dialog —\n   * a \"Search records\" field inside a \"Library search\" palette. Defaults to\n   * `label`. An `aria-label` on `CommandInput` cannot do this: the field is\n   * labelled by reference, and a reference outranks an `aria-label`.\n   */\n  inputLabel?: string\n  children: ReactNode\n  /**\n   * Pass `false` when the host has already filtered the rows — a server search\n   * or an index of its own. The palette would otherwise filter them a second\n   * time against the input and hide results the host meant to show.\n   */\n  shouldFilter?: boolean\n  /** Runs as the dialog moves focus in. Prevent the default to place focus yourself. */\n  onOpenAutoFocus?: DialogContentProps['onOpenAutoFocus']\n  /**\n   * Runs as the dialog hands focus back on close. The default returns it to a\n   * `DialogTrigger`, and a palette opened by a shortcut has none, so focus falls\n   * to the page. Prevent the default and focus what opened it.\n   */\n  onCloseAutoFocus?: DialogContentProps['onCloseAutoFocus']\n  /** Runs before Escape closes the dialog. Prevent the default to keep it open, as a nested view stepping back does. */\n  onEscapeKeyDown?: DialogContentProps['onEscapeKeyDown']\n}\n\n/**\n * The palette in a modal, which is how it is nearly always used.\n *\n * The dialog's own padding is removed: a palette is edge-to-edge, and its input\n * is the first thing focus lands on.\n */\nexport function CommandDialog({\n  open,\n  onOpenChange,\n  label,\n  inputLabel,\n  children,\n  shouldFilter,\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  onEscapeKeyDown,\n}: CommandDialogProps) {\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent\n        title={label}\n        hideTitle\n        showClose={false}\n        onOpenAutoFocus={onOpenAutoFocus}\n        onCloseAutoFocus={onCloseAutoFocus}\n        onEscapeKeyDown={onEscapeKeyDown}\n        // Above centre, not at it. A palette is read as a layer over the page\n        // rather than as a message about it, and centring it puts the list\n        // under the reader's own hands on a laptop.\n        // `scrollbar-gutter: auto` undoes the `stable` that `Dialog`'s own\n        // `scroll-slim` sets. The dialog never scrolls — the list inside it\n        // does — but the reserved gutter was still there, so the list stopped\n        // thirteen pixels short of the panel and drew its own hairline inside\n        // an empty channel. Two bars, one of them permanently blank.\n        className=\"top-[10vh] w-[min(94vw,44rem)] translate-y-0 overflow-hidden p-0 [scrollbar-gutter:auto]\"\n      >\n        {/* The modal has the whole screen, so its list may be taller than the\n            default an inline menu should keep.\n\n            `scroll-hairline` rather than `scroll-slim`: eleven pixels of grey\n            down the side of a palette is the widest thing in it. */}\n        <Command\n          label={inputLabel ?? label}\n          shouldFilter={shouldFilter}\n          className=\"rounded-none border-0 [&_[cmdk-list]]:max-h-[26rem] [&_[cmdk-list]]:scroll-hairline\"\n        >\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default Command\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/Command/Command.tsx"],"sourcesContent":["'use client'\n\nimport { Command as CommandPrimitive } from 'cmdk'\nimport { RiSearchLine, type RemixiconComponentType } from '@remixicon/react'\nimport { isValidElement, type ComponentProps, type ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/**\n * True for a component type — `icon={Settings}` — rather than a rendered element.\n *\n * Everything a `ReactNode` can be is an element, a primitive, an array, another\n * iterable or a promise; a Remix Icon glyph is none of those, it is a plain\n * function component. So both spellings are tellable apart at runtime, which is\n * what lets one prop take either — and it has to, because this prop meant the\n * opposite thing one import away and the wrong spelling failed at render, not\n * at the type.\n */\nfunction isIconComponent(icon: RemixiconComponentType | ReactNode): icon is RemixiconComponentType {\n  if (isValidElement(icon)) return false\n  if (typeof icon === 'function') return true\n  if (typeof icon !== 'object' || icon === null) return false\n  return !Array.isArray(icon) && !(Symbol.iterator in icon) && !('then' in icon)\n}\n\n/** The leading glyph, sized by this component when it was handed a component. */\nfunction iconNode(icon: RemixiconComponentType | ReactNode): ReactNode {\n  if (!isIconComponent(icon)) return icon\n  const Icon = icon\n  return <Icon size={16} aria-hidden />\n}\nimport { Dialog, DialogContent, type DialogContentProps } from '../Dialog/Dialog'\nimport { Kbd } from '../Kbd/Kbd'\n\n/**\n * A filterable list of actions — the ⌘K surface.\n *\n * Built on cmdk rather than on a `Select` or a menu, because the interaction is\n * neither: the list is filtered as you type, the highlighted row moves with the\n * arrow keys while focus STAYS in the input, and Enter runs the highlighted\n * row. That is the ARIA combobox pattern, and it is the part nobody should\n * hand-roll — `aria-activedescendant` moving without focus moving is precisely\n * where a home-made palette stops working with a screen reader.\n *\n * @example\n * <Command label=\"Command palette\">\n *   <CommandInput placeholder=\"Type a command…\" />\n *   <CommandList>\n *     <CommandEmpty>Nothing matches.</CommandEmpty>\n *     <CommandGroup heading=\"Navigate\">\n *       <CommandItem onSelect={go}>Components</CommandItem>\n *     </CommandGroup>\n *   </CommandList>\n * </Command>\n */\nexport function Command({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      className={cn(\n        'flex w-full flex-col overflow-hidden rounded-(--radius-lg) border border-(--panel-border) bg-(--panel-bg) shadow-(--panel-lift) panel-blur',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/** The filter field. Carries the search icon and the combobox semantics. */\nexport function CommandInput({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div className=\"flex items-center gap-3 border-b border-(--rule) px-4\">\n      <RiSearchLine size={18} aria-hidden className=\"shrink-0 text-(--ink-3-aa)\" />\n      <CommandPrimitive.Input\n        className={cn(\n          'h-13 w-full bg-transparent text-base md:text-[15px] text-(--ink) outline-none placeholder:text-(--ink-3-aa)',\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport function CommandList({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      className={cn('max-h-72 overflow-y-auto overflow-x-hidden p-2 scroll-slim', className)}\n      {...props}\n    />\n  )\n}\n\n/** Shown when the filter matches nothing. Say what would match, not \"no results\". */\nexport function CommandEmpty(props: ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      className=\"px-3 py-10 text-center text-sm text-(--ink-3-aa)\"\n      {...props}\n    />\n  )\n}\n\n/**\n * The key-hint strip along the bottom.\n *\n * A palette is a keyboard surface whose keys are invisible: nothing on screen\n * says the arrows move the row or that Enter runs it, and a reader who reaches\n * for the mouse has been failed by the design rather than by themselves.\n *\n * @example\n * <CommandFooter>\n *   <CommandHint keys={['↑', '↓']}>navigate</CommandHint>\n *   <CommandHint keys={['↵']}>open</CommandHint>\n * </CommandFooter>\n */\nexport function CommandFooter({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-4 border-t border-(--rule) bg-(--paper-2) px-3.5 py-2',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface CommandHintProps extends Omit<ComponentProps<'span'>, 'children'> {\n  /** The keys this hint describes, printed as `Kbd` chips. */\n  keys: string[]\n  /** What they do — a verb, lowercase, no sentence. */\n  children: ReactNode\n}\n\n/** One key-and-verb pair inside a `CommandFooter`. */\nexport function CommandHint({ keys, children, className, ...props }: CommandHintProps) {\n  return (\n    <span className={cn('flex items-center gap-1.5 mono-meta text-(--ink-3-aa)', className)} {...props}>\n      {keys.map((key) => (\n        <Kbd key={key}>{key}</Kbd>\n      ))}\n      {children}\n    </span>\n  )\n}\n\nexport function CommandGroup({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      className={cn(\n        'overflow-hidden [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:eyebrow [&_[cmdk-group-heading]]:text-(--ink-3-aa)',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * A divider between groups.\n *\n * Marked presentational, because ARIA permits a `listbox` to contain only\n * `option` and `group` — and the library renders this as `role=\"separator\"`,\n * which puts a critical `aria-required-children` violation inside every palette\n * that uses one. The grouping is already announced by the groups themselves, so\n * removing the divider from the accessibility tree loses nothing.\n */\nexport function CommandSeparator({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn('my-1 h-px bg-(--rule)', className)}\n      {...props}\n    />\n  )\n}\n\nexport interface CommandItemProps extends ComponentProps<typeof CommandPrimitive.Item> {\n  /** A shortcut printed at the end of the row. */\n  shortcut?: string\n  /**\n   * A leading glyph. Either spelling — `icon={<Settings size={16} />}` passes\n   * the element, `icon={Settings}` passes the component and this sizes it.\n   *\n   * It is what makes a long list scannable — the eye sorts by shape before it\n   * reads, and forty identical rows of text defeat that.\n   */\n  icon?: RemixiconComponentType | ReactNode\n  /**\n   * A quiet note at the end of the row — what kind of thing this is, or its\n   * current state. Not a description: a palette that prints a sentence per row\n   * stops being scannable at about six of them.\n   */\n  meta?: ReactNode\n}\n\nexport function CommandItem({ shortcut, icon, meta, className, children, ...props }: CommandItemProps) {\n  return (\n    <CommandPrimitive.Item\n      className={cn(\n        'flex cursor-pointer items-center gap-3 overflow-hidden rounded-(--radius-row) px-3 py-2.5 text-[15px] text-(--ink-2) outline-none transition-colors duration-(--duration-fast)',\n        // The highlighted row is a chosen state, and law 7 says a chosen state\n        // reads --accent. The leading rule gives it an edge the eye catches\n        // while scrolling, which a fill alone does not.\n        //\n        // `overflow-hidden` above clips the bar below to the row's own\n        // `--radius-row` corner. Without it the bar is a straight-edged\n        // absolutely-positioned box that ignores the rounded highlight behind\n        // it — invisible at `sharp` (0px radius) and barely off at the\n        // default, but at `round` the row's radius outgrows the bar's own\n        // inset and the bar pokes past the curve by several pixels. The row\n        // is never a clip boundary for anything but itself: padding keeps\n        // every child (icon, label, meta, shortcut) inside it already, so\n        // clipping to the row's shape costs nothing else. The focus ring\n        // is unaffected too — `outline` paints outside the border box, which\n        // an element's own `overflow` never clips.\n        'relative data-[selected=true]:bg-(--accent-muted) data-[selected=true]:text-(--ink)',\n        'before:absolute before:inset-y-1 before:start-0 before:w-0.5 before:rounded-(--radius-pill) before:bg-transparent data-[selected=true]:before:bg-(--accent)',\n        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-(--disabled-opacity)',\n        className,\n      )}\n      {...props}\n    >\n      {icon && (\n        <span className=\"grid size-4 shrink-0 place-items-center text-(--ink-3-aa) [&_svg]:size-4\">\n          {iconNode(icon)}\n        </span>\n      )}\n      {children}\n      {meta && <span className=\"ms-auto ps-3 mono-meta text-(--ink-3-aa)\">{meta}</span>}\n      {shortcut && <Kbd className={cn(meta ? '' : 'ms-auto')}>{shortcut}</Kbd>}\n    </CommandPrimitive.Item>\n  )\n}\n\nexport interface CommandDialogProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  /** Names the palette for assistive tech. */\n  label: string\n  /**\n   * Names the search field when it should read differently from the dialog —\n   * a \"Search records\" field inside a \"Library search\" palette. Defaults to\n   * `label`. An `aria-label` on `CommandInput` cannot do this: the field is\n   * labelled by reference, and a reference outranks an `aria-label`.\n   */\n  inputLabel?: string\n  children: ReactNode\n  /**\n   * Pass `false` when the host has already filtered the rows — a server search\n   * or an index of its own. The palette would otherwise filter them a second\n   * time against the input and hide results the host meant to show.\n   */\n  shouldFilter?: boolean\n  /** Runs as the dialog moves focus in. Prevent the default to place focus yourself. */\n  onOpenAutoFocus?: DialogContentProps['onOpenAutoFocus']\n  /**\n   * Runs as the dialog hands focus back on close. The default returns it to a\n   * `DialogTrigger`, and a palette opened by a shortcut has none, so focus falls\n   * to the page. Prevent the default and focus what opened it.\n   */\n  onCloseAutoFocus?: DialogContentProps['onCloseAutoFocus']\n  /** Runs before Escape closes the dialog. Prevent the default to keep it open, as a nested view stepping back does. */\n  onEscapeKeyDown?: DialogContentProps['onEscapeKeyDown']\n  /** Merged onto the panel after its defaults, so a composition can place and animate it. */\n  className?: string\n}\n\n/**\n * The palette in a modal, which is how it is nearly always used.\n *\n * The dialog's own padding is removed: a palette is edge-to-edge, and its input\n * is the first thing focus lands on.\n */\nexport function CommandDialog({\n  open,\n  onOpenChange,\n  label,\n  inputLabel,\n  children,\n  shouldFilter,\n  onOpenAutoFocus,\n  onCloseAutoFocus,\n  onEscapeKeyDown,\n  className,\n}: CommandDialogProps) {\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent\n        title={label}\n        hideTitle\n        showClose={false}\n        onOpenAutoFocus={onOpenAutoFocus}\n        onCloseAutoFocus={onCloseAutoFocus}\n        onEscapeKeyDown={onEscapeKeyDown}\n        // Above centre, not at it. A palette is read as a layer over the page\n        // rather than as a message about it, and centring it puts the list\n        // under the reader's own hands on a laptop.\n        // `scrollbar-gutter: auto` undoes the `stable` that `Dialog`'s own\n        // `scroll-slim` sets. The dialog never scrolls — the list inside it\n        // does — but the reserved gutter was still there, so the list stopped\n        // thirteen pixels short of the panel and drew its own hairline inside\n        // an empty channel. Two bars, one of them permanently blank.\n        className={cn('top-[10vh] w-[min(94vw,44rem)] translate-y-0 overflow-hidden p-0 [scrollbar-gutter:auto]', className)}\n      >\n        {/* The modal has the whole screen, so its list may be taller than the\n            default an inline menu should keep.\n\n            `scroll-hairline` rather than `scroll-slim`: eleven pixels of grey\n            down the side of a palette is the widest thing in it. */}\n        <Command\n          label={inputLabel ?? label}\n          shouldFilter={shouldFilter}\n          className=\"rounded-none border-0 [&_[cmdk-list]]:max-h-[26rem] [&_[cmdk-list]]:scroll-hairline\"\n        >\n          {children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport default Command\n"],"mappings":";AA4BS,cA+CL,YA/CK;AA1BT,SAAS,WAAW,wBAAwB;AAC5C,SAAS,oBAAiD;AAC1D,SAAS,sBAA2D;AACpE,SAAS,UAAU;AAYnB,SAAS,gBAAgB,MAA0E;AACjG,MAAI,eAAe,IAAI,EAAG,QAAO;AACjC,MAAI,OAAO,SAAS,WAAY,QAAO;AACvC,MAAI,OAAO,SAAS,YAAY,SAAS,KAAM,QAAO;AACtD,SAAO,CAAC,MAAM,QAAQ,IAAI,KAAK,EAAE,OAAO,YAAY,SAAS,EAAE,UAAU;AAC3E;AAGA,SAAS,SAAS,MAAqD;AACrE,MAAI,CAAC,gBAAgB,IAAI,EAAG,QAAO;AACnC,QAAM,OAAO;AACb,SAAO,oBAAC,QAAK,MAAM,IAAI,eAAW,MAAC;AACrC;AACA,SAAS,QAAQ,qBAA8C;AAC/D,SAAS,WAAW;AAuBb,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA,GAAG;AACL,GAA4C;AAC1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAGO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,GAAG;AACL,GAAkD;AAChD,SACE,qBAAC,SAAI,WAAU,yDACb;AAAA,wBAAC,gBAAa,MAAM,IAAI,eAAW,MAAC,WAAU,8BAA6B;AAAA,IAC3E;AAAA,MAAC,iBAAiB;AAAA,MAAjB;AAAA,QACC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,KACF;AAEJ;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,GAAG;AACL,GAAiD;AAC/C,SACE;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,WAAW,GAAG,8DAA8D,SAAS;AAAA,MACpF,GAAG;AAAA;AAAA,EACN;AAEJ;AAGO,SAAS,aAAa,OAAsD;AACjF,SACE;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,WAAU;AAAA,MACT,GAAG;AAAA;AAAA,EACN;AAEJ;AAeO,SAAS,cAAc,EAAE,WAAW,GAAG,MAAM,GAA0B;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAUO,SAAS,YAAY,EAAE,MAAM,UAAU,WAAW,GAAG,MAAM,GAAqB;AACrF,SACE,qBAAC,UAAK,WAAW,GAAG,yDAAyD,SAAS,GAAI,GAAG,OAC1F;AAAA,SAAK,IAAI,CAAC,QACT,oBAAC,OAAe,iBAAN,GAAU,CACrB;AAAA,IACA;AAAA,KACH;AAEJ;AAEO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,GAAG;AACL,GAAkD;AAChD,SACE;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAWO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,GAAG;AACL,GAAsD;AACpD,SACE;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,MAAK;AAAA,MACL,eAAY;AAAA,MACZ,WAAW,GAAG,yBAAyB,SAAS;AAAA,MAC/C,GAAG;AAAA;AAAA,EACN;AAEJ;AAqBO,SAAS,YAAY,EAAE,UAAU,MAAM,MAAM,WAAW,UAAU,GAAG,MAAM,GAAqB;AACrG,SACE;AAAA,IAAC,iBAAiB;AAAA,IAAjB;AAAA,MACC,WAAW;AAAA,QACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAgBA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,gBACC,oBAAC,UAAK,WAAU,4EACb,mBAAS,IAAI,GAChB;AAAA,QAED;AAAA,QACA,QAAQ,oBAAC,UAAK,WAAU,4CAA4C,gBAAK;AAAA,QACzE,YAAY,oBAAC,OAAI,WAAW,GAAG,OAAO,KAAK,SAAS,GAAI,oBAAS;AAAA;AAAA;AAAA,EACpE;AAEJ;AAyCO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAuB;AACrB,SACE,oBAAC,UAAO,MAAY,cAClB;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,WAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MASA,WAAW,GAAG,4FAA4F,SAAS;AAAA,MAOnH;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,cAAc;AAAA,UACrB;AAAA,UACA,WAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA;AAAA,EACF,GACF;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}

package/dist/components/FigureBand/FigureBand.js

@@ -35,7 +35,7 @@ function FigureBand({
           children: [
             /* @__PURE__ */ jsx("dt", { className: "mb-2 font-sans text-[13px] font-normal leading-normal text-(--ink-3-aa)", children: figure.label }),
             /* @__PURE__ */ jsx("dd", { className: cn("m-0 font-heading font-normal text-(--ink)", VALUE_SCALE[scale]), children: figure.value }),
-            figure.note !== void 0 && figure.note !== null && /* @__PURE__ */ jsx("dd", { className: "m-0 mt-2.5 font-sans text-[13px] font-light leading-[1.5] text-(--ink-3-aa)", children: figure.note })
+            figure.note !== void 0 && figure.note !== null && /* @__PURE__ */ jsx("dd", { className: "m-0 mt-2.5 font-sans text-[13px] [font-weight:var(--body-weight)] leading-[1.5] text-(--ink-3-aa)", children: figure.note })
           ]
         },
         figure.id

package/dist/components/FigureBand/FigureBand.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/FigureBand/FigureBand.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface Figure {\n  /** Stable key; also what a caller keys its own data by. */\n  id: string\n  /** The label over the value. */\n  label: string\n  /** The value itself, set in the serif at the band's scale. */\n  value: ReactNode\n  /** The quiet line under it — a trend, a qualifier, a second fact. */\n  note?: ReactNode\n}\n\nexport interface FigureBandProps extends Omit<HTMLAttributes<HTMLDListElement>, 'children'> {\n  figures: Figure[]\n  /**\n   * How large the value is set.\n   *\n   * `lead` is for a band that is the point of its page — a stats headline,\n   * where the numbers ARE the content. `sub` is for a band that supports the\n   * page around it, and keeps the ladder honest: a supporting figure must not\n   * be set at the same size as the page's own subject.\n   */\n  scale?: 'lead' | 'sub'\n  /** Names the band for assistive tech when it has no visible heading of its own. */\n  label?: string\n}\n\nconst VALUE_SCALE = {\n  lead: 'text-[clamp(2rem,4cqi,2.75rem)] leading-[1.15] tracking-[-0.02em] tabular-nums',\n  sub: 'text-[length:var(--fs-sub)] leading-[1.2]',\n} as const\n\n/** A framed, responsive group of related facts with semantic term/value pairs. */\nexport function FigureBand({\n  figures,\n  scale = 'lead',\n  label,\n  className,\n  ...rest\n}: FigureBandProps) {\n  if (figures.length === 0) return null\n\n  // Balance six metrics into two complete rows instead of a four-plus-two grid.\n  const columns = Math.min(4, Math.ceil(figures.length / Math.ceil(figures.length / 4)))\n  const columnClass = {\n    1: '@xl:basis-full',\n    2: '@xl:basis-[calc(50%-.5px)]',\n    3: '@xl:basis-[calc(33.333333%-.667px)]',\n    4: '@xl:basis-[calc(25%-.75px)]',\n  }[columns]\n\n  return (\n    <div className=\"folio-figure-band @container w-full\">\n      <dl\n        aria-label={label}\n        className={cn(\n          'm-0 flex w-full flex-wrap gap-px overflow-hidden rounded-[10px] border border-(--rule) bg-(--rule)',\n          className,\n        )}\n        {...rest}\n      >\n        {figures.map((figure) => (\n          <div\n            key={figure.id}\n            className={cn('min-w-0 grow basis-[calc(50%-.5px)] bg-(--paper) px-5 py-5 @xl:px-6 @xl:py-6', columnClass)}\n          >\n            <dt className=\"mb-2 font-sans text-[13px] font-normal leading-normal text-(--ink-3-aa)\">{figure.label}</dt>\n            <dd className={cn('m-0 font-heading font-normal text-(--ink)', VALUE_SCALE[scale])}>\n              {figure.value}\n            </dd>\n            {figure.note !== undefined && figure.note !== null && (\n              <dd className=\"m-0 mt-2.5 font-sans text-[13px] font-light leading-[1.5] text-(--ink-3-aa)\">\n                {figure.note}\n              </dd>\n            )}\n          </div>\n        ))}\n      </dl>\n    </div>\n  )\n}\n\nexport default FigureBand\n"],"mappings":"AAgEU,SAIE,KAJF;AA/DV,SAAS,UAAU;AA4BnB,MAAM,cAAc;AAAA,EAClB,MAAM;AAAA,EACN,KAAK;AACP;AAGO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,MAAI,QAAQ,WAAW,EAAG,QAAO;AAGjC,QAAM,UAAU,KAAK,IAAI,GAAG,KAAK,KAAK,QAAQ,SAAS,KAAK,KAAK,QAAQ,SAAS,CAAC,CAAC,CAAC;AACrF,QAAM,cAAc;AAAA,IAClB,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,EACL,EAAE,OAAO;AAET,SACE,oBAAC,SAAI,WAAU,uCACb;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,kBAAQ,IAAI,CAAC,WACZ;AAAA,QAAC;AAAA;AAAA,UAEC,WAAW,GAAG,gFAAgF,WAAW;AAAA,UAEzG;AAAA,gCAAC,QAAG,WAAU,2EAA2E,iBAAO,OAAM;AAAA,YACtG,oBAAC,QAAG,WAAW,GAAG,6CAA6C,YAAY,KAAK,CAAC,GAC9E,iBAAO,OACV;AAAA,YACC,OAAO,SAAS,UAAa,OAAO,SAAS,QAC5C,oBAAC,QAAG,WAAU,+EACX,iBAAO,MACV;AAAA;AAAA;AAAA,QAVG,OAAO;AAAA,MAYd,CACD;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/FigureBand/FigureBand.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface Figure {\n  /** Stable key; also what a caller keys its own data by. */\n  id: string\n  /** The label over the value. */\n  label: string\n  /** The value itself, set in the serif at the band's scale. */\n  value: ReactNode\n  /** The quiet line under it — a trend, a qualifier, a second fact. */\n  note?: ReactNode\n}\n\nexport interface FigureBandProps extends Omit<HTMLAttributes<HTMLDListElement>, 'children'> {\n  figures: Figure[]\n  /**\n   * How large the value is set.\n   *\n   * `lead` is for a band that is the point of its page — a stats headline,\n   * where the numbers ARE the content. `sub` is for a band that supports the\n   * page around it, and keeps the ladder honest: a supporting figure must not\n   * be set at the same size as the page's own subject.\n   */\n  scale?: 'lead' | 'sub'\n  /** Names the band for assistive tech when it has no visible heading of its own. */\n  label?: string\n}\n\nconst VALUE_SCALE = {\n  lead: 'text-[clamp(2rem,4cqi,2.75rem)] leading-[1.15] tracking-[-0.02em] tabular-nums',\n  sub: 'text-[length:var(--fs-sub)] leading-[1.2]',\n} as const\n\n/** A framed, responsive group of related facts with semantic term/value pairs. */\nexport function FigureBand({\n  figures,\n  scale = 'lead',\n  label,\n  className,\n  ...rest\n}: FigureBandProps) {\n  if (figures.length === 0) return null\n\n  // Balance six metrics into two complete rows instead of a four-plus-two grid.\n  const columns = Math.min(4, Math.ceil(figures.length / Math.ceil(figures.length / 4)))\n  const columnClass = {\n    1: '@xl:basis-full',\n    2: '@xl:basis-[calc(50%-.5px)]',\n    3: '@xl:basis-[calc(33.333333%-.667px)]',\n    4: '@xl:basis-[calc(25%-.75px)]',\n  }[columns]\n\n  return (\n    <div className=\"folio-figure-band @container w-full\">\n      <dl\n        aria-label={label}\n        className={cn(\n          'm-0 flex w-full flex-wrap gap-px overflow-hidden rounded-[10px] border border-(--rule) bg-(--rule)',\n          className,\n        )}\n        {...rest}\n      >\n        {figures.map((figure) => (\n          <div\n            key={figure.id}\n            className={cn('min-w-0 grow basis-[calc(50%-.5px)] bg-(--paper) px-5 py-5 @xl:px-6 @xl:py-6', columnClass)}\n          >\n            <dt className=\"mb-2 font-sans text-[13px] font-normal leading-normal text-(--ink-3-aa)\">{figure.label}</dt>\n            <dd className={cn('m-0 font-heading font-normal text-(--ink)', VALUE_SCALE[scale])}>\n              {figure.value}\n            </dd>\n            {figure.note !== undefined && figure.note !== null && (\n              <dd className=\"m-0 mt-2.5 font-sans text-[13px] [font-weight:var(--body-weight)] leading-[1.5] text-(--ink-3-aa)\">\n                {figure.note}\n              </dd>\n            )}\n          </div>\n        ))}\n      </dl>\n    </div>\n  )\n}\n\nexport default FigureBand\n"],"mappings":"AAgEU,SAIE,KAJF;AA/DV,SAAS,UAAU;AA4BnB,MAAM,cAAc;AAAA,EAClB,MAAM;AAAA,EACN,KAAK;AACP;AAGO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,MAAI,QAAQ,WAAW,EAAG,QAAO;AAGjC,QAAM,UAAU,KAAK,IAAI,GAAG,KAAK,KAAK,QAAQ,SAAS,KAAK,KAAK,QAAQ,SAAS,CAAC,CAAC,CAAC;AACrF,QAAM,cAAc;AAAA,IAClB,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,IACH,GAAG;AAAA,EACL,EAAE,OAAO;AAET,SACE,oBAAC,SAAI,WAAU,uCACb;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,kBAAQ,IAAI,CAAC,WACZ;AAAA,QAAC;AAAA;AAAA,UAEC,WAAW,GAAG,gFAAgF,WAAW;AAAA,UAEzG;AAAA,gCAAC,QAAG,WAAU,2EAA2E,iBAAO,OAAM;AAAA,YACtG,oBAAC,QAAG,WAAW,GAAG,6CAA6C,YAAY,KAAK,CAAC,GAC9E,iBAAO,OACV;AAAA,YACC,OAAO,SAAS,UAAa,OAAO,SAAS,QAC5C,oBAAC,QAAG,WAAU,qGACX,iBAAO,MACV;AAAA;AAAA;AAAA,QAVG,OAAO;AAAA,MAYd,CACD;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}

package/dist/components/Pagination/Pagination.js

@@ -61,7 +61,7 @@ function Pagination({
         {
           "aria-hidden": true,
           "data-folio-animated": true,
-          className: "absolute rounded-(--radius-pill) bg-(--accent) transition-[transform,width] duration-(--duration-base) ease-(--ease-out-expo) motion-reduce:transition-none",
+          className: "absolute rounded-(--radius-pill) bg-(--action) transition-[transform,width] duration-(--duration-base) ease-(--ease-out-expo) motion-reduce:transition-none",
           style: {
             transform: `translate(${indicator.offset}px, ${indicator.top}px)`,
             width: indicator.width,
@@ -83,7 +83,7 @@ function Pagination({
             className: cn(
               STEP,
               "mono-meta tabular-nums",
-              entry === page ? "border-transparent text-(--accent-foreground)" : "border-transparent text-(--ink-2) hover:border-(--rule-2) hover:text-(--ink)"
+              entry === page ? "border-transparent text-(--action-foreground)" : "border-transparent text-(--ink-2) hover:border-(--rule-2) hover:text-(--ink)"
             ),
             children: entry
           }

package/dist/components/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client'\n\nimport { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react'\nimport type { HTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useSelectionIndicator } from '../../lib/useSelectionIndicator'\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n  /** 1-based. */\n  page: number\n  /** Total pages. A value of 1 or less renders nothing. */\n  pageCount: number\n  onPageChange: (page: number) => void\n  /** How many numbered pages sit either side of the current one. */\n  siblings?: number\n  label?: string\n  /**\n   * Names the two step controls.\n   *\n   * Each is a chevron and nothing else, so these strings are its entire\n   * accessible name — the same reason `AppShell` exposes `openLabel` and\n   * `closeLabel` rather than baking them in.\n   */\n  previousLabel?: string\n  nextLabel?: string\n  /**\n   * Names one numbered page.\n   *\n   * A function rather than a template, because the number does not sit in the\n   * same place in every language and neither does the noun around it —\n   * `\"Page 3\"`, `\"第 3 页\"`, `\"Seite 3\"`. The visible digit is the same either\n   * way; this is what a screen reader hears instead of a bare number.\n   */\n  pageLabel?: (page: number) => string\n}\n\nconst GAP = '…' as const\n\n/**\n * Builds the visible page list: always the first and last page, a window around\n * the current one, and an ellipsis wherever the sequence skips.\n *\n * Returned as numbers and a literal ellipsis rather than as pre-rendered nodes,\n * so the shape is testable without a DOM — the off-by-one at the window edges\n * is the whole difficulty of this component.\n */\nexport function paginationRange(page: number, pageCount: number, siblings = 1): (number | typeof GAP)[] {\n  const first = 1\n  const last = pageCount\n\n  // Below the width the elided form would occupy — first, last, the window and\n  // two ellipses — printing every page is both shorter and more useful. Without\n  // this, a five-page list renders \"1 2 … 5\", which hides a page to save\n  // nothing.\n  const widest = 2 * siblings + 5\n  if (pageCount <= widest) {\n    return Array.from({ length: pageCount }, (_, index) => index + 1)\n  }\n\n  const start = Math.max(first, page - siblings)\n  const end = Math.min(last, page + siblings)\n\n  const pages: (number | typeof GAP)[] = []\n  if (start > first) {\n    pages.push(first)\n    // A single skipped page is printed, not elided: \"1 … 3\" is longer than\n    // \"1 2 3\" and tells the reader less.\n    if (start > first + 2) pages.push(GAP)\n    else if (start === first + 2) pages.push(first + 1)\n  }\n  for (let n = start; n <= end; n += 1) pages.push(n)\n  if (end < last) {\n    if (end < last - 2) pages.push(GAP)\n    else if (end === last - 2) pages.push(last - 1)\n    pages.push(last)\n  }\n  return pages\n}\n\nconst STEP =\n  'inline-flex size-(--control-h-sm) items-center justify-center rounded-(--radius-pill) border transition-colors duration-(--duration-fast) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none'\n\n/**\n * Numbered pagination.\n *\n * The current page is marked by one filled pill that TRAVELS between the\n * numbers rather than by a background switching off on one and on on another.\n * Two backgrounds cross-fading reads as two things changing; a shape moving\n * reads as the one thing that actually did.\n *\n * A `<nav>` wrapping a list, and the current page is a `<button aria-current>`\n * rather than a styled `<span>` — a reader jumping by landmark needs to find\n * the control, and a reader on the current page needs to be told they are\n * already there.\n *\n * Renders nothing at one page or fewer. A pager for a single page is furniture.\n *\n * Every string a reader hears is a prop. The chevrons carry no text, so\n * `previousLabel` and `nextLabel` are the whole of those two controls' names,\n * and `pageLabel` is a function because \"Page 3\" is a phrase whose parts move\n * around between languages.\n *\n * @example\n * <Pagination page={page} pageCount={12} onPageChange={setPage} />\n */\nexport function Pagination({\n  page,\n  pageCount,\n  onPageChange,\n  siblings = 1,\n  label = 'Pagination',\n  previousLabel = 'Previous page',\n  nextLabel = 'Next page',\n  pageLabel = (page) => `Page ${page}`,\n  className,\n  ...rest\n}: PaginationProps) {\n  // Called before the early return, because a hook cannot be conditional — and\n  // keyed on the page so the pill re-measures when the elided window shifts and\n  // the numbers under it change.\n  const [listRef, indicator] = useSelectionIndicator<HTMLOListElement>(String(page))\n\n  if (pageCount <= 1) return null\n  const pages = paginationRange(page, pageCount, siblings)\n\n  return (\n    <nav aria-label={label} className={cn('flex items-center gap-1.5', className)} {...rest}>\n      <button\n        type=\"button\"\n        aria-label={previousLabel}\n        disabled={page <= 1}\n        onClick={() => onPageChange(page - 1)}\n        className={cn(STEP, 'border-(--rule-2) text-(--ink-2) hover:border-(--ink) hover:text-(--ink)')}\n      >\n        <RiArrowLeftSLine size={16} aria-hidden />\n      </button>\n\n      <ol ref={listRef} className=\"relative m-0 flex list-none items-center gap-1 p-0\">\n        {indicator.ready && (\n          <span\n            aria-hidden\n            data-folio-animated\n            className=\"absolute rounded-(--radius-pill) bg-(--accent) transition-[transform,width] duration-(--duration-base) ease-(--ease-out-expo) motion-reduce:transition-none\"\n            style={{\n              transform: `translate(${indicator.offset}px, ${indicator.top}px)`,\n              width: indicator.width,\n              height: indicator.height,\n              insetInlineStart: 0,\n              top: 0,\n            }}\n          />\n        )}\n        {pages.map((entry, index) =>\n          entry === GAP ? (\n            <li key={`gap-${index}`} aria-hidden=\"true\" className=\"px-1 mono-meta text-(--ink-3-aa)\">\n              {GAP}\n            </li>\n          ) : (\n            <li key={entry} className=\"relative z-1\">\n              <button\n                type=\"button\"\n                aria-current={entry === page ? 'page' : undefined}\n                aria-label={pageLabel(entry)}\n                data-indicator-active={entry === page ? 'true' : undefined}\n                onClick={() => onPageChange(entry)}\n                className={cn(\n                  STEP,\n                  'mono-meta tabular-nums',\n                  entry === page\n                    ? 'border-transparent text-(--accent-foreground)'\n                    : 'border-transparent text-(--ink-2) hover:border-(--rule-2) hover:text-(--ink)',\n                )}\n              >\n                {entry}\n              </button>\n            </li>\n          ),\n        )}\n      </ol>\n\n      <button\n        type=\"button\"\n        aria-label={nextLabel}\n        disabled={page >= pageCount}\n        onClick={() => onPageChange(page + 1)}\n        className={cn(STEP, 'border-(--rule-2) text-(--ink-2) hover:border-(--ink) hover:text-(--ink)')}\n      >\n        <RiArrowRightSLine size={16} aria-hidden />\n      </button>\n    </nav>\n  )\n}\n\nexport default Pagination\n"],"mappings":"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","names":["page"]}
+{"version":3,"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["'use client'\n\nimport { RiArrowLeftSLine, RiArrowRightSLine } from '@remixicon/react'\nimport type { HTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useSelectionIndicator } from '../../lib/useSelectionIndicator'\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n  /** 1-based. */\n  page: number\n  /** Total pages. A value of 1 or less renders nothing. */\n  pageCount: number\n  onPageChange: (page: number) => void\n  /** How many numbered pages sit either side of the current one. */\n  siblings?: number\n  label?: string\n  /**\n   * Names the two step controls.\n   *\n   * Each is a chevron and nothing else, so these strings are its entire\n   * accessible name — the same reason `AppShell` exposes `openLabel` and\n   * `closeLabel` rather than baking them in.\n   */\n  previousLabel?: string\n  nextLabel?: string\n  /**\n   * Names one numbered page.\n   *\n   * A function rather than a template, because the number does not sit in the\n   * same place in every language and neither does the noun around it —\n   * `\"Page 3\"`, `\"第 3 页\"`, `\"Seite 3\"`. The visible digit is the same either\n   * way; this is what a screen reader hears instead of a bare number.\n   */\n  pageLabel?: (page: number) => string\n}\n\nconst GAP = '…' as const\n\n/**\n * Builds the visible page list: always the first and last page, a window around\n * the current one, and an ellipsis wherever the sequence skips.\n *\n * Returned as numbers and a literal ellipsis rather than as pre-rendered nodes,\n * so the shape is testable without a DOM — the off-by-one at the window edges\n * is the whole difficulty of this component.\n */\nexport function paginationRange(page: number, pageCount: number, siblings = 1): (number | typeof GAP)[] {\n  const first = 1\n  const last = pageCount\n\n  // Below the width the elided form would occupy — first, last, the window and\n  // two ellipses — printing every page is both shorter and more useful. Without\n  // this, a five-page list renders \"1 2 … 5\", which hides a page to save\n  // nothing.\n  const widest = 2 * siblings + 5\n  if (pageCount <= widest) {\n    return Array.from({ length: pageCount }, (_, index) => index + 1)\n  }\n\n  const start = Math.max(first, page - siblings)\n  const end = Math.min(last, page + siblings)\n\n  const pages: (number | typeof GAP)[] = []\n  if (start > first) {\n    pages.push(first)\n    // A single skipped page is printed, not elided: \"1 … 3\" is longer than\n    // \"1 2 3\" and tells the reader less.\n    if (start > first + 2) pages.push(GAP)\n    else if (start === first + 2) pages.push(first + 1)\n  }\n  for (let n = start; n <= end; n += 1) pages.push(n)\n  if (end < last) {\n    if (end < last - 2) pages.push(GAP)\n    else if (end === last - 2) pages.push(last - 1)\n    pages.push(last)\n  }\n  return pages\n}\n\nconst STEP =\n  'inline-flex size-(--control-h-sm) items-center justify-center rounded-(--radius-pill) border transition-colors duration-(--duration-fast) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none'\n\n/**\n * Numbered pagination.\n *\n * The current page is marked by one filled pill that TRAVELS between the\n * numbers rather than by a background switching off on one and on on another.\n * Two backgrounds cross-fading reads as two things changing; a shape moving\n * reads as the one thing that actually did.\n *\n * A `<nav>` wrapping a list, and the current page is a `<button aria-current>`\n * rather than a styled `<span>` — a reader jumping by landmark needs to find\n * the control, and a reader on the current page needs to be told they are\n * already there.\n *\n * Renders nothing at one page or fewer. A pager for a single page is furniture.\n *\n * Every string a reader hears is a prop. The chevrons carry no text, so\n * `previousLabel` and `nextLabel` are the whole of those two controls' names,\n * and `pageLabel` is a function because \"Page 3\" is a phrase whose parts move\n * around between languages.\n *\n * @example\n * <Pagination page={page} pageCount={12} onPageChange={setPage} />\n */\nexport function Pagination({\n  page,\n  pageCount,\n  onPageChange,\n  siblings = 1,\n  label = 'Pagination',\n  previousLabel = 'Previous page',\n  nextLabel = 'Next page',\n  pageLabel = (page) => `Page ${page}`,\n  className,\n  ...rest\n}: PaginationProps) {\n  // Called before the early return, because a hook cannot be conditional — and\n  // keyed on the page so the pill re-measures when the elided window shifts and\n  // the numbers under it change.\n  const [listRef, indicator] = useSelectionIndicator<HTMLOListElement>(String(page))\n\n  if (pageCount <= 1) return null\n  const pages = paginationRange(page, pageCount, siblings)\n\n  return (\n    <nav aria-label={label} className={cn('flex items-center gap-1.5', className)} {...rest}>\n      <button\n        type=\"button\"\n        aria-label={previousLabel}\n        disabled={page <= 1}\n        onClick={() => onPageChange(page - 1)}\n        className={cn(STEP, 'border-(--rule-2) text-(--ink-2) hover:border-(--ink) hover:text-(--ink)')}\n      >\n        <RiArrowLeftSLine size={16} aria-hidden />\n      </button>\n\n      <ol ref={listRef} className=\"relative m-0 flex list-none items-center gap-1 p-0\">\n        {indicator.ready && (\n          <span\n            aria-hidden\n            data-folio-animated\n            className=\"absolute rounded-(--radius-pill) bg-(--action) transition-[transform,width] duration-(--duration-base) ease-(--ease-out-expo) motion-reduce:transition-none\"\n            style={{\n              transform: `translate(${indicator.offset}px, ${indicator.top}px)`,\n              width: indicator.width,\n              height: indicator.height,\n              insetInlineStart: 0,\n              top: 0,\n            }}\n          />\n        )}\n        {pages.map((entry, index) =>\n          entry === GAP ? (\n            <li key={`gap-${index}`} aria-hidden=\"true\" className=\"px-1 mono-meta text-(--ink-3-aa)\">\n              {GAP}\n            </li>\n          ) : (\n            <li key={entry} className=\"relative z-1\">\n              <button\n                type=\"button\"\n                aria-current={entry === page ? 'page' : undefined}\n                aria-label={pageLabel(entry)}\n                data-indicator-active={entry === page ? 'true' : undefined}\n                onClick={() => onPageChange(entry)}\n                className={cn(\n                  STEP,\n                  'mono-meta tabular-nums',\n                  entry === page\n                    ? 'border-transparent text-(--action-foreground)'\n                    : 'border-transparent text-(--ink-2) hover:border-(--rule-2) hover:text-(--ink)',\n                )}\n              >\n                {entry}\n              </button>\n            </li>\n          ),\n        )}\n      </ol>\n\n      <button\n        type=\"button\"\n        aria-label={nextLabel}\n        disabled={page >= pageCount}\n        onClick={() => onPageChange(page + 1)}\n        className={cn(STEP, 'border-(--rule-2) text-(--ink-2) hover:border-(--ink) hover:text-(--ink)')}\n      >\n        <RiArrowRightSLine size={16} aria-hidden />\n      </button>\n    </nav>\n  )\n}\n\nexport default Pagination\n"],"mappings":"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","names":["page"]}

package/dist/components/Table/Table.js

@@ -7,7 +7,7 @@ const ALIGN = {
   center: "text-center",
   end: "text-end"
 };
-const ROWS = "[&_thead]:border-b [&_thead]:border-(--rule-hard) [&_tbody_tr]:border-b [&_tbody_tr]:border-(--rule) [&_tbody_tr:last-child]:border-b-0";
+const ROWS = "[&_thead]:border-b [&_thead]:border-(--rule-divider) [&_tbody_tr]:border-b [&_tbody_tr]:border-(--rule) [&_tbody_tr:last-child]:border-b-0";
 const SOFT_HEAD = "[&_thead]:border-(--rule-2)";
 const COLUMNS = "[&_th]:border-e [&_td]:border-e [&_th]:border-(--rule) [&_td]:border-(--rule) [&_th:last-child]:border-e-0 [&_td:last-child]:border-e-0";
 const BOXED = "rounded-(--radius) border border-(--rule-2) [--table-pad-x:0.75rem]";

package/dist/components/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import { RiArrowDownLine, RiArrowUpLine, RiExpandUpDownLine } from '@remixicon/react'\nimport type { HTMLAttributes, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\nimport { warnBlankName } from '../../lib/warn'\n\nexport type TableAlign = 'start' | 'center' | 'end'\n\n/**\n * Which rules the table draws.\n *\n * `rows` is the default and the right answer for reading down a column: one\n * hairline between records and nothing else, so the eye tracks a line across\n * without a grid competing for it. `grid` adds the vertical rules a dense\n * numeric table needs to keep columns apart. `bordered` puts an edge around the\n * whole thing, for a table that sits loose on a page rather than inside a card\n * that already has one. `none` is for a table inside something that draws its\n * own structure.\n */\nexport type TableBorders = 'rows' | 'grid' | 'bordered' | 'bordered-grid' | 'none'\n\nconst ALIGN: Record<TableAlign, string> = {\n  start: 'text-start',\n  center: 'text-center',\n  end: 'text-end',\n}\n\n/**\n * Every rule the table draws, expressed from ONE element.\n *\n * Not React context, which was the first attempt: `createContext` makes the\n * module client-only, which turned every table on every page into a hydration\n * boundary and took the static build down with it. Descendant selectors from\n * the wrapper reach the same cells, cost nothing at runtime, and keep the whole\n * component server-renderable.\n *\n * `--table-pad-x` rather than a padding class per mode, because the ruled\n * variants need symmetric padding inside their boxes while the plain one wants\n * a trailing gap and no leading one.\n */\nconst ROWS =\n  '[&_thead]:border-b [&_thead]:border-(--rule-hard) [&_tbody_tr]:border-b [&_tbody_tr]:border-(--rule) [&_tbody_tr:last-child]:border-b-0'\nconst SOFT_HEAD = '[&_thead]:border-(--rule-2)'\nconst COLUMNS =\n  '[&_th]:border-e [&_td]:border-e [&_th]:border-(--rule) [&_td]:border-(--rule) [&_th:last-child]:border-e-0 [&_td:last-child]:border-e-0'\nconst BOXED = 'rounded-(--radius) border border-(--rule-2) [--table-pad-x:0.75rem]'\n\nconst BORDERS: Record<TableBorders, string> = {\n  rows: ROWS,\n  grid: cn(ROWS, COLUMNS, '[--table-pad-x:0.75rem]'),\n  bordered: cn(ROWS, SOFT_HEAD, BOXED),\n  'bordered-grid': cn(ROWS, SOFT_HEAD, COLUMNS, BOXED),\n  none: '',\n}\n\nexport interface TableProps extends TableHTMLAttributes<HTMLTableElement> {\n  /**\n   * Describes the table for a screen reader, which cannot see the heading above\n   * it. Rendered as a visually-hidden `<caption>` — required, because an\n   * unnamed table in a page with three tables is unnavigable.\n   */\n  caption: string\n  /** Prints the caption instead of hiding it. */\n  showCaption?: boolean\n  /**\n   * Pins the header row while the body scrolls. Needs a bounded height on the\n   * container — otherwise the page scrolls, not the table, and nothing sticks.\n   */\n  stickyHeader?: boolean\n  /** Which rules to draw. See {@link TableBorders}. */\n  borders?: TableBorders\n  /** Tightens the row padding, for a table that is mostly numbers. */\n  density?: 'comfortable' | 'compact'\n}\n\n/**\n * A ruled data table.\n *\n * Wrapped in its own horizontally scrolling container, because a table is the\n * one block that legitimately exceeds the measure — and a page that scrolls\n * sideways as a whole is a layout bug, while a table that does is a table.\n *\n * That container is focusable, and it has to be. A scrollable region whose\n * contents are not themselves focusable is unreachable by keyboard: there is no\n * element to Tab to and therefore no way to press an arrow key at it, so the\n * columns past the fold simply do not exist for anyone not using a mouse.\n *\n * It is also POSITIONED, which is not decoration. `sr-only` is\n * `position: absolute`, so a visually-hidden label in a cell resolves against\n * the nearest positioned ancestor — and with none between it and the document,\n * it escapes the scroll container and every `overflow-hidden` around it, and\n * widens the page by however far the table happens to be scrolled.\n *\n * No zebra striping at any border setting. In a monochrome system a striped row\n * is a second surface competing with the page ground, and the hairline between\n * rows is already enough to track a line across.\n *\n * @example\n * <Table caption=\"Deploy history\">\n *   <THead><TR><TH>Commit</TH><TH align=\"end\" sortable sortDirection={dir} onSort={sort}>Duration</TH></TR></THead>\n *   <TBody><TR><TD>a1b2c3d</TD><TD align=\"end\">2m 14s</TD></TR></TBody>\n * </Table>\n * @example\n * <Table caption=\"Inventory\" borders=\"bordered-grid\" density=\"compact\">…</Table>\n */\nexport function Table({\n  caption,\n  showCaption = false,\n  stickyHeader = false,\n  borders = 'rows',\n  density = 'comfortable',\n  className,\n  children,\n  ...rest\n}: TableProps) {\n  warnBlankName('Table', 'caption', caption, 'the table is announced with no name and a reader arrives in it with no idea what it lists')\n  return (\n    <div\n      tabIndex={0}\n      role=\"region\"\n      aria-label={caption}\n      data-table-density={density}\n      className={cn('relative w-full overflow-x-auto scroll-slim', BORDERS[borders])}\n    >\n      <table\n        className={cn(\n          'w-full border-collapse text-start text-sm',\n          stickyHeader &&\n            '[&_thead]:sticky [&_thead]:top-0 [&_thead]:z-(--z-rule) [&_thead]:bg-(--paper)',\n          className,\n        )}\n        {...rest}\n      >\n        <caption className={cn(showCaption ? 'pb-3 text-start eyebrow text-(--ink-3-aa)' : 'sr-only')}>\n          {caption}\n        </caption>\n        {children}\n      </table>\n    </div>\n  )\n}\n\n/** Header group. The rule under it is drawn by the table's border setting. */\nexport function THead({ className, ...rest }: HTMLAttributes<HTMLTableSectionElement>) {\n  return <thead className={className} {...rest} />\n}\n\nexport function TBody({ className, ...rest }: HTMLAttributes<HTMLTableSectionElement>) {\n  return <tbody className={className} {...rest} />\n}\n\nexport function TR({ className, ...rest }: HTMLAttributes<HTMLTableRowElement>) {\n  return <tr className={className} {...rest} />\n}\n\nexport type SortDirection = 'ascending' | 'descending' | 'none'\n\nexport interface THProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'> {\n  /** Which edge the column's contents sit against. Numbers belong at `end`. */\n  align?: TableAlign\n  /** Makes the label a button and shows the sort marker. */\n  sortable?: boolean\n  /**\n   * Which way this column is sorted. Also set as `aria-sort`, which is the\n   * only way a screen reader learns a table is ordered at all — a caret drawn\n   * in the header tells it nothing.\n   */\n  sortDirection?: SortDirection\n  onSort?: () => void\n}\n\n/**\n * Cell padding, in one string both cells share.\n *\n * `--table-pad-x` is 0 by default and set by the ruled variants, so the plain\n * table keeps its trailing gap and no leading one while a boxed table gets\n * symmetric padding inside its border.\n */\nconst CELL =\n  'px-[var(--table-pad-x,0)] [&:not(:last-child)]:pe-[calc(var(--table-pad-x,0px)+1.5rem)]'\n\nconst SORT_ICON = {\n  ascending: RiArrowUpLine,\n  descending: RiArrowDownLine,\n  none: RiExpandUpDownLine,\n} as const\n\n/**\n * A column label. Mono and uppercase, so it never reads as data.\n *\n * When sortable, the label becomes a `<button>` INSIDE the `<th>` rather than\n * the `<th>` becoming clickable: a cell with a click handler is not focusable\n * and not announced as a control, so the sort exists only for a mouse.\n *\n * Sorting is per column and opt-in. A table where every header is a button\n * invites the reader to try sorting a column the data cannot be ordered by.\n */\nexport function TH({\n  align = 'start',\n  sortable = false,\n  sortDirection = 'none',\n  onSort,\n  className,\n  children,\n  ...rest\n}: THProps) {\n  const Icon = SORT_ICON[sortDirection]\n\n  return (\n    <th\n      scope=\"col\"\n      aria-sort={sortable ? sortDirection : undefined}\n      className={cn(CELL, 'py-3 align-bottom eyebrow text-(--ink-3-aa)', ALIGN[align], className)}\n      {...rest}\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          onClick={onSort}\n          className={cn(\n            'group inline-flex items-center gap-1.5 eyebrow transition-colors duration-(--duration-fast) hover:text-(--ink)',\n            sortDirection === 'none' ? 'text-(--ink-3-aa)' : 'text-(--ink)',\n          )}\n        >\n          {children}\n          <Icon\n            size={12}\n            aria-hidden\n            className={cn(\n              'shrink-0 transition-opacity',\n              sortDirection === 'none' && 'opacity-40 group-hover:opacity-100',\n            )}\n          />\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  )\n}\n\nexport interface TDProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'> {\n  /** Which edge the cell's contents sit against. Match the column's header. */\n  align?: TableAlign\n}\n\n/**\n * A body cell.\n *\n * TOP-aligned, and that is a choice about which kind of table is the common\n * one here: a cell holding a paragraph. Top is what lines the first lines of a\n * row up with each other, and centring a two-word term against a four-line\n * description puts the term in the middle of nothing.\n *\n * It is the wrong default for the other kind — a row of one-line values with a\n * control in it. A 36px button next to 16px of text makes a 52px row, and every\n * other cell then hangs at the top of it with twenty pixels of nothing\n * underneath, which reads as a column that has slipped. Pass\n * `className=\"align-middle\"` on those rows; the data-table template does.\n */\nexport function TD({ align = 'start', className, ...rest }: TDProps) {\n  return (\n    <td\n      className={cn(CELL, 'py-[var(--table-pad-y)] align-top text-(--ink-2)', ALIGN[align], className)}\n      {...rest}\n    />\n  )\n}\n\nexport default Table\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/Table/Table.tsx"],"sourcesContent":["import { RiArrowDownLine, RiArrowUpLine, RiExpandUpDownLine } from '@remixicon/react'\nimport type { HTMLAttributes, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react'\nimport { cn } from '../../lib/cn'\nimport { warnBlankName } from '../../lib/warn'\n\nexport type TableAlign = 'start' | 'center' | 'end'\n\n/**\n * Which rules the table draws.\n *\n * `rows` is the default and the right answer for reading down a column: one\n * hairline between records and nothing else, so the eye tracks a line across\n * without a grid competing for it. `grid` adds the vertical rules a dense\n * numeric table needs to keep columns apart. `bordered` puts an edge around the\n * whole thing, for a table that sits loose on a page rather than inside a card\n * that already has one. `none` is for a table inside something that draws its\n * own structure.\n */\nexport type TableBorders = 'rows' | 'grid' | 'bordered' | 'bordered-grid' | 'none'\n\nconst ALIGN: Record<TableAlign, string> = {\n  start: 'text-start',\n  center: 'text-center',\n  end: 'text-end',\n}\n\n/**\n * Every rule the table draws, expressed from ONE element.\n *\n * Not React context, which was the first attempt: `createContext` makes the\n * module client-only, which turned every table on every page into a hydration\n * boundary and took the static build down with it. Descendant selectors from\n * the wrapper reach the same cells, cost nothing at runtime, and keep the whole\n * component server-renderable.\n *\n * `--table-pad-x` rather than a padding class per mode, because the ruled\n * variants need symmetric padding inside their boxes while the plain one wants\n * a trailing gap and no leading one.\n */\nconst ROWS =\n  '[&_thead]:border-b [&_thead]:border-(--rule-divider) [&_tbody_tr]:border-b [&_tbody_tr]:border-(--rule) [&_tbody_tr:last-child]:border-b-0'\nconst SOFT_HEAD = '[&_thead]:border-(--rule-2)'\nconst COLUMNS =\n  '[&_th]:border-e [&_td]:border-e [&_th]:border-(--rule) [&_td]:border-(--rule) [&_th:last-child]:border-e-0 [&_td:last-child]:border-e-0'\nconst BOXED = 'rounded-(--radius) border border-(--rule-2) [--table-pad-x:0.75rem]'\n\nconst BORDERS: Record<TableBorders, string> = {\n  rows: ROWS,\n  grid: cn(ROWS, COLUMNS, '[--table-pad-x:0.75rem]'),\n  bordered: cn(ROWS, SOFT_HEAD, BOXED),\n  'bordered-grid': cn(ROWS, SOFT_HEAD, COLUMNS, BOXED),\n  none: '',\n}\n\nexport interface TableProps extends TableHTMLAttributes<HTMLTableElement> {\n  /**\n   * Describes the table for a screen reader, which cannot see the heading above\n   * it. Rendered as a visually-hidden `<caption>` — required, because an\n   * unnamed table in a page with three tables is unnavigable.\n   */\n  caption: string\n  /** Prints the caption instead of hiding it. */\n  showCaption?: boolean\n  /**\n   * Pins the header row while the body scrolls. Needs a bounded height on the\n   * container — otherwise the page scrolls, not the table, and nothing sticks.\n   */\n  stickyHeader?: boolean\n  /** Which rules to draw. See {@link TableBorders}. */\n  borders?: TableBorders\n  /** Tightens the row padding, for a table that is mostly numbers. */\n  density?: 'comfortable' | 'compact'\n}\n\n/**\n * A ruled data table.\n *\n * Wrapped in its own horizontally scrolling container, because a table is the\n * one block that legitimately exceeds the measure — and a page that scrolls\n * sideways as a whole is a layout bug, while a table that does is a table.\n *\n * That container is focusable, and it has to be. A scrollable region whose\n * contents are not themselves focusable is unreachable by keyboard: there is no\n * element to Tab to and therefore no way to press an arrow key at it, so the\n * columns past the fold simply do not exist for anyone not using a mouse.\n *\n * It is also POSITIONED, which is not decoration. `sr-only` is\n * `position: absolute`, so a visually-hidden label in a cell resolves against\n * the nearest positioned ancestor — and with none between it and the document,\n * it escapes the scroll container and every `overflow-hidden` around it, and\n * widens the page by however far the table happens to be scrolled.\n *\n * No zebra striping at any border setting. In a monochrome system a striped row\n * is a second surface competing with the page ground, and the hairline between\n * rows is already enough to track a line across.\n *\n * @example\n * <Table caption=\"Deploy history\">\n *   <THead><TR><TH>Commit</TH><TH align=\"end\" sortable sortDirection={dir} onSort={sort}>Duration</TH></TR></THead>\n *   <TBody><TR><TD>a1b2c3d</TD><TD align=\"end\">2m 14s</TD></TR></TBody>\n * </Table>\n * @example\n * <Table caption=\"Inventory\" borders=\"bordered-grid\" density=\"compact\">…</Table>\n */\nexport function Table({\n  caption,\n  showCaption = false,\n  stickyHeader = false,\n  borders = 'rows',\n  density = 'comfortable',\n  className,\n  children,\n  ...rest\n}: TableProps) {\n  warnBlankName('Table', 'caption', caption, 'the table is announced with no name and a reader arrives in it with no idea what it lists')\n  return (\n    <div\n      tabIndex={0}\n      role=\"region\"\n      aria-label={caption}\n      data-table-density={density}\n      className={cn('relative w-full overflow-x-auto scroll-slim', BORDERS[borders])}\n    >\n      <table\n        className={cn(\n          'w-full border-collapse text-start text-sm',\n          stickyHeader &&\n            '[&_thead]:sticky [&_thead]:top-0 [&_thead]:z-(--z-rule) [&_thead]:bg-(--paper)',\n          className,\n        )}\n        {...rest}\n      >\n        <caption className={cn(showCaption ? 'pb-3 text-start eyebrow text-(--ink-3-aa)' : 'sr-only')}>\n          {caption}\n        </caption>\n        {children}\n      </table>\n    </div>\n  )\n}\n\n/** Header group. The rule under it is drawn by the table's border setting. */\nexport function THead({ className, ...rest }: HTMLAttributes<HTMLTableSectionElement>) {\n  return <thead className={className} {...rest} />\n}\n\nexport function TBody({ className, ...rest }: HTMLAttributes<HTMLTableSectionElement>) {\n  return <tbody className={className} {...rest} />\n}\n\nexport function TR({ className, ...rest }: HTMLAttributes<HTMLTableRowElement>) {\n  return <tr className={className} {...rest} />\n}\n\nexport type SortDirection = 'ascending' | 'descending' | 'none'\n\nexport interface THProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align'> {\n  /** Which edge the column's contents sit against. Numbers belong at `end`. */\n  align?: TableAlign\n  /** Makes the label a button and shows the sort marker. */\n  sortable?: boolean\n  /**\n   * Which way this column is sorted. Also set as `aria-sort`, which is the\n   * only way a screen reader learns a table is ordered at all — a caret drawn\n   * in the header tells it nothing.\n   */\n  sortDirection?: SortDirection\n  onSort?: () => void\n}\n\n/**\n * Cell padding, in one string both cells share.\n *\n * `--table-pad-x` is 0 by default and set by the ruled variants, so the plain\n * table keeps its trailing gap and no leading one while a boxed table gets\n * symmetric padding inside its border.\n */\nconst CELL =\n  'px-[var(--table-pad-x,0)] [&:not(:last-child)]:pe-[calc(var(--table-pad-x,0px)+1.5rem)]'\n\nconst SORT_ICON = {\n  ascending: RiArrowUpLine,\n  descending: RiArrowDownLine,\n  none: RiExpandUpDownLine,\n} as const\n\n/**\n * A column label. Mono and uppercase, so it never reads as data.\n *\n * When sortable, the label becomes a `<button>` INSIDE the `<th>` rather than\n * the `<th>` becoming clickable: a cell with a click handler is not focusable\n * and not announced as a control, so the sort exists only for a mouse.\n *\n * Sorting is per column and opt-in. A table where every header is a button\n * invites the reader to try sorting a column the data cannot be ordered by.\n */\nexport function TH({\n  align = 'start',\n  sortable = false,\n  sortDirection = 'none',\n  onSort,\n  className,\n  children,\n  ...rest\n}: THProps) {\n  const Icon = SORT_ICON[sortDirection]\n\n  return (\n    <th\n      scope=\"col\"\n      aria-sort={sortable ? sortDirection : undefined}\n      className={cn(CELL, 'py-3 align-bottom eyebrow text-(--ink-3-aa)', ALIGN[align], className)}\n      {...rest}\n    >\n      {sortable ? (\n        <button\n          type=\"button\"\n          onClick={onSort}\n          className={cn(\n            'group inline-flex items-center gap-1.5 eyebrow transition-colors duration-(--duration-fast) hover:text-(--ink)',\n            sortDirection === 'none' ? 'text-(--ink-3-aa)' : 'text-(--ink)',\n          )}\n        >\n          {children}\n          <Icon\n            size={12}\n            aria-hidden\n            className={cn(\n              'shrink-0 transition-opacity',\n              sortDirection === 'none' && 'opacity-40 group-hover:opacity-100',\n            )}\n          />\n        </button>\n      ) : (\n        children\n      )}\n    </th>\n  )\n}\n\nexport interface TDProps extends Omit<TdHTMLAttributes<HTMLTableCellElement>, 'align'> {\n  /** Which edge the cell's contents sit against. Match the column's header. */\n  align?: TableAlign\n}\n\n/**\n * A body cell.\n *\n * TOP-aligned, and that is a choice about which kind of table is the common\n * one here: a cell holding a paragraph. Top is what lines the first lines of a\n * row up with each other, and centring a two-word term against a four-line\n * description puts the term in the middle of nothing.\n *\n * It is the wrong default for the other kind — a row of one-line values with a\n * control in it. A 36px button next to 16px of text makes a 52px row, and every\n * other cell then hangs at the top of it with twenty pixels of nothing\n * underneath, which reads as a column that has slipped. Pass\n * `className=\"align-middle\"` on those rows; the data-table template does.\n */\nexport function TD({ align = 'start', className, ...rest }: TDProps) {\n  return (\n    <td\n      className={cn(CELL, 'py-[var(--table-pad-y)] align-top text-(--ink-2)', ALIGN[align], className)}\n      {...rest}\n    />\n  )\n}\n\nexport default Table\n"],"mappings":"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","names":[]}

package/dist/components/Tag/Tag.js

@@ -5,7 +5,7 @@ function Tag({ children, active, onClick, onRemove, removeLabel, className, ...r
   const split = Boolean(onClick && onRemove);
   const chip = cn(
     "inline-flex items-center rounded-(--radius-sm) font-(family-name:--label-font) text-xs tracking-[calc(0.025em*var(--label-tracking-scale))] transition-colors duration-(--duration-fast)",
-    active ? "bg-(--accent) text-(--accent-foreground)" : "bg-(--stone) text-(--ink-3-aa)",
+    active ? "bg-(--action) text-(--action-foreground)" : "bg-(--stone) text-(--ink-3-aa)",
     onRemove ? "gap-1 pe-1.5" : "pe-2.5",
     // Handed to the label button in the split form, so the padding is part of
     // the target rather than a ring of dead space around it.

package/dist/components/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { RiCloseLine } from '@remixicon/react'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\ninterface TagBase extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {\n  children: ReactNode\n  /**\n   * Renders the pressed/selected look, and declares the chip a toggle.\n   *\n   * An interactive chip reads `aria-pressed` off this same value, so the accent\n   * fill and the state a screen reader hears cannot drift apart. Leave it off\n   * for a chip whose `onClick` navigates or opens something: a control that is\n   * neither pressed nor unpressed is better announced as neither than as\n   * \"not pressed\".\n   */\n  active?: boolean\n  /**\n   * Makes the chip ITSELF the filter control.\n   *\n   * This prop exists because the alternative did not survive contact with\n   * `onRemove`. The advice used to be to wrap the tag in a button at the call\n   * site, which is fine on its own and invalid the moment the chip is also\n   * removable: the remove control is a real `<button>`, so the wrapper puts a\n   * button inside a button — markup the parser splits into siblings, leaving a\n   * DOM neither the author nor the accessibility tree expects.\n   *\n   * With this the wrapper is never written. The chip carries the click, the\n   * focus ring and the pressed state on the element that draws them, and a\n   * removable filter chip renders its two controls side by side instead of one\n   * inside the other.\n   */\n  onClick?: () => void\n}\n\n/**\n * The removable form: a chip for one thing the reader has already chosen.\n *\n * `removeLabel` is required alongside `onRemove` and not optional with a\n * default, because \"Remove\" repeated down a row of filters is eight controls a\n * screen reader cannot tell apart. Write the subject into it — \"Remove\n * TypeScript filter\".\n */\ninterface TagRemovable {\n  /** Called when the reader dismisses the chip. */\n  onRemove: () => void\n  /** The remove button's accessible name. Name the subject, not the action. */\n  removeLabel: string\n}\n\ninterface TagStatic {\n  onRemove?: never\n  removeLabel?: never\n}\n\nexport type TagProps = TagBase & (TagRemovable | TagStatic)\n\n/**\n * A subject label — a topic, a technology, a filter facet — that can filter\n * with `onClick` and be dismissed with `onRemove`.\n *\n * Distinct from `Badge`, which carries a state or a count. A tag names what\n * something is ABOUT, so several sit together in a row and the reader scans\n * them; a badge is one fact about one record.\n *\n * This is where a `Token` component would have gone. It was not built: a token\n * is a tag with a remove button, and the difference between the two is one\n * prop, not one component. The system already ships three things that look\n * alike — `Badge`, `Tag`, `StatusPill` — and a fourth whose whole distinction\n * is an X on the end would be the one a call site picks by coin toss.\n *\n * Presentational until it is given a handler, and the component owns both\n * interactive cases rather than leaving one to a wrapper at the call site.\n * That is not a convenience: a wrapping `<button>` around a chip that already\n * holds the remove `<button>` is a button inside a button, which no parser\n * keeps and no accessibility tree reports the way it was written. Given both,\n * the chip renders the label and the X as SIBLING buttons — the label takes\n * the leading padding with it, so it is the whole of the chip up to the X\n * rather than the words with dead padding around them.\n *\n * @example\n * <Tag>TypeScript</Tag>\n * @example\n * <Tag active={on} onClick={toggle}>Rust</Tag>\n * @example\n * <Tag onRemove={() => drop('rust')} removeLabel=\"Remove Rust filter\">Rust</Tag>\n * @example\n * // Both: a filter the reader can toggle and also take out of the row.\n * <Tag active={on} onClick={toggle} onRemove={drop} removeLabel=\"Remove Rust filter\">Rust</Tag>\n */\nexport function Tag({ children, active, onClick, onRemove, removeLabel, className, ...rest }: TagProps) {\n  // Two controls cannot nest, so a chip that is both a filter and a selection\n  // splits its label out into a button of its own beside the remove button.\n  const split = Boolean(onClick && onRemove)\n\n  const chip = cn(\n    'inline-flex items-center rounded-(--radius-sm) font-(family-name:--label-font) text-xs tracking-[calc(0.025em*var(--label-tracking-scale))] transition-colors duration-(--duration-fast)',\n    active ? 'bg-(--accent) text-(--accent-foreground)' : 'bg-(--stone) text-(--ink-3-aa)',\n    onRemove ? 'gap-1 pe-1.5' : 'pe-2.5',\n    // Handed to the label button in the split form, so the padding is part of\n    // the target rather than a ring of dead space around it.\n    !split && 'py-1 ps-2.5',\n    className,\n  )\n\n  const remove = onRemove ? (\n    <button\n      type=\"button\"\n      onClick={onRemove}\n      aria-label={removeLabel}\n      className={cn(\n        // The drawn box is 16px, which is under the 24px minimum a pointer\n        // target has to clear (WCAG 2.5.8). The inset pseudo-element takes\n        // the hit area out to 24 without changing what is drawn or pushing\n        // the chips apart — the 44px floor is for a standalone control, and\n        // a chip is 24 tall to begin with.\n        'relative inline-flex size-4 shrink-0 items-center justify-center rounded-(--radius-xs)',\n        \"before:absolute before:inset-[-4px] before:content-['']\",\n        'opacity-60 transition-opacity duration-(--duration-fast) hover:opacity-100 focus-visible:opacity-100',\n      )}\n    >\n      <RiCloseLine size={12} aria-hidden />\n    </button>\n  ) : null\n\n  if (split) {\n    return (\n      <span className={chip} {...rest}>\n        <button\n          type=\"button\"\n          onClick={onClick}\n          aria-pressed={active}\n          className=\"rounded-(--radius-sm) py-1 ps-2.5 font-(family-name:--label-font) text-xs tracking-[calc(0.025em*var(--label-tracking-scale))]\"\n        >\n          {children}\n        </button>\n        {remove}\n      </span>\n    )\n  }\n\n  if (onClick) {\n    return (\n      <button type=\"button\" onClick={onClick} aria-pressed={active} className={chip} {...rest}>\n        {children}\n      </button>\n    )\n  }\n\n  return (\n    <span className={chip} {...rest}>\n      {children}\n      {remove}\n    </span>\n  )\n}\n\nexport default Tag\n"],"mappings":"AAwHM,cAMA,YANA;AAxHN,SAAS,mBAAmB;AAE5B,SAAS,UAAU;AAuFZ,SAAS,IAAI,EAAE,UAAU,QAAQ,SAAS,UAAU,aAAa,WAAW,GAAG,KAAK,GAAa;AAGtG,QAAM,QAAQ,QAAQ,WAAW,QAAQ;AAEzC,QAAM,OAAO;AAAA,IACX;AAAA,IACA,SAAS,6CAA6C;AAAA,IACtD,WAAW,iBAAiB;AAAA;AAAA;AAAA,IAG5B,CAAC,SAAS;AAAA,IACV;AAAA,EACF;AAEA,QAAM,SAAS,WACb;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT,cAAY;AAAA,MACZ,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEA,8BAAC,eAAY,MAAM,IAAI,eAAW,MAAC;AAAA;AAAA,EACrC,IACE;AAEJ,MAAI,OAAO;AACT,WACE,qBAAC,UAAK,WAAW,MAAO,GAAG,MACzB;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL;AAAA,UACA,gBAAc;AAAA,UACd,WAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA,MACC;AAAA,OACH;AAAA,EAEJ;AAEA,MAAI,SAAS;AACX,WACE,oBAAC,YAAO,MAAK,UAAS,SAAkB,gBAAc,QAAQ,WAAW,MAAO,GAAG,MAChF,UACH;AAAA,EAEJ;AAEA,SACE,qBAAC,UAAK,WAAW,MAAO,GAAG,MACxB;AAAA;AAAA,IACA;AAAA,KACH;AAEJ;AAEA,IAAO,cAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import { RiCloseLine } from '@remixicon/react'\nimport type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\ninterface TagBase extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {\n  children: ReactNode\n  /**\n   * Renders the pressed/selected look, and declares the chip a toggle.\n   *\n   * An interactive chip reads `aria-pressed` off this same value, so the accent\n   * fill and the state a screen reader hears cannot drift apart. Leave it off\n   * for a chip whose `onClick` navigates or opens something: a control that is\n   * neither pressed nor unpressed is better announced as neither than as\n   * \"not pressed\".\n   */\n  active?: boolean\n  /**\n   * Makes the chip ITSELF the filter control.\n   *\n   * This prop exists because the alternative did not survive contact with\n   * `onRemove`. The advice used to be to wrap the tag in a button at the call\n   * site, which is fine on its own and invalid the moment the chip is also\n   * removable: the remove control is a real `<button>`, so the wrapper puts a\n   * button inside a button — markup the parser splits into siblings, leaving a\n   * DOM neither the author nor the accessibility tree expects.\n   *\n   * With this the wrapper is never written. The chip carries the click, the\n   * focus ring and the pressed state on the element that draws them, and a\n   * removable filter chip renders its two controls side by side instead of one\n   * inside the other.\n   */\n  onClick?: () => void\n}\n\n/**\n * The removable form: a chip for one thing the reader has already chosen.\n *\n * `removeLabel` is required alongside `onRemove` and not optional with a\n * default, because \"Remove\" repeated down a row of filters is eight controls a\n * screen reader cannot tell apart. Write the subject into it — \"Remove\n * TypeScript filter\".\n */\ninterface TagRemovable {\n  /** Called when the reader dismisses the chip. */\n  onRemove: () => void\n  /** The remove button's accessible name. Name the subject, not the action. */\n  removeLabel: string\n}\n\ninterface TagStatic {\n  onRemove?: never\n  removeLabel?: never\n}\n\nexport type TagProps = TagBase & (TagRemovable | TagStatic)\n\n/**\n * A subject label — a topic, a technology, a filter facet — that can filter\n * with `onClick` and be dismissed with `onRemove`.\n *\n * Distinct from `Badge`, which carries a state or a count. A tag names what\n * something is ABOUT, so several sit together in a row and the reader scans\n * them; a badge is one fact about one record.\n *\n * This is where a `Token` component would have gone. It was not built: a token\n * is a tag with a remove button, and the difference between the two is one\n * prop, not one component. The system already ships three things that look\n * alike — `Badge`, `Tag`, `StatusPill` — and a fourth whose whole distinction\n * is an X on the end would be the one a call site picks by coin toss.\n *\n * Presentational until it is given a handler, and the component owns both\n * interactive cases rather than leaving one to a wrapper at the call site.\n * That is not a convenience: a wrapping `<button>` around a chip that already\n * holds the remove `<button>` is a button inside a button, which no parser\n * keeps and no accessibility tree reports the way it was written. Given both,\n * the chip renders the label and the X as SIBLING buttons — the label takes\n * the leading padding with it, so it is the whole of the chip up to the X\n * rather than the words with dead padding around them.\n *\n * @example\n * <Tag>TypeScript</Tag>\n * @example\n * <Tag active={on} onClick={toggle}>Rust</Tag>\n * @example\n * <Tag onRemove={() => drop('rust')} removeLabel=\"Remove Rust filter\">Rust</Tag>\n * @example\n * // Both: a filter the reader can toggle and also take out of the row.\n * <Tag active={on} onClick={toggle} onRemove={drop} removeLabel=\"Remove Rust filter\">Rust</Tag>\n */\nexport function Tag({ children, active, onClick, onRemove, removeLabel, className, ...rest }: TagProps) {\n  // Two controls cannot nest, so a chip that is both a filter and a selection\n  // splits its label out into a button of its own beside the remove button.\n  const split = Boolean(onClick && onRemove)\n\n  const chip = cn(\n    'inline-flex items-center rounded-(--radius-sm) font-(family-name:--label-font) text-xs tracking-[calc(0.025em*var(--label-tracking-scale))] transition-colors duration-(--duration-fast)',\n    active ? 'bg-(--action) text-(--action-foreground)' : 'bg-(--stone) text-(--ink-3-aa)',\n    onRemove ? 'gap-1 pe-1.5' : 'pe-2.5',\n    // Handed to the label button in the split form, so the padding is part of\n    // the target rather than a ring of dead space around it.\n    !split && 'py-1 ps-2.5',\n    className,\n  )\n\n  const remove = onRemove ? (\n    <button\n      type=\"button\"\n      onClick={onRemove}\n      aria-label={removeLabel}\n      className={cn(\n        // The drawn box is 16px, which is under the 24px minimum a pointer\n        // target has to clear (WCAG 2.5.8). The inset pseudo-element takes\n        // the hit area out to 24 without changing what is drawn or pushing\n        // the chips apart — the 44px floor is for a standalone control, and\n        // a chip is 24 tall to begin with.\n        'relative inline-flex size-4 shrink-0 items-center justify-center rounded-(--radius-xs)',\n        \"before:absolute before:inset-[-4px] before:content-['']\",\n        'opacity-60 transition-opacity duration-(--duration-fast) hover:opacity-100 focus-visible:opacity-100',\n      )}\n    >\n      <RiCloseLine size={12} aria-hidden />\n    </button>\n  ) : null\n\n  if (split) {\n    return (\n      <span className={chip} {...rest}>\n        <button\n          type=\"button\"\n          onClick={onClick}\n          aria-pressed={active}\n          className=\"rounded-(--radius-sm) py-1 ps-2.5 font-(family-name:--label-font) text-xs tracking-[calc(0.025em*var(--label-tracking-scale))]\"\n        >\n          {children}\n        </button>\n        {remove}\n      </span>\n    )\n  }\n\n  if (onClick) {\n    return (\n      <button type=\"button\" onClick={onClick} aria-pressed={active} className={chip} {...rest}>\n        {children}\n      </button>\n    )\n  }\n\n  return (\n    <span className={chip} {...rest}>\n      {children}\n      {remove}\n    </span>\n  )\n}\n\nexport default Tag\n"],"mappings":"AAwHM,cAMA,YANA;AAxHN,SAAS,mBAAmB;AAE5B,SAAS,UAAU;AAuFZ,SAAS,IAAI,EAAE,UAAU,QAAQ,SAAS,UAAU,aAAa,WAAW,GAAG,KAAK,GAAa;AAGtG,QAAM,QAAQ,QAAQ,WAAW,QAAQ;AAEzC,QAAM,OAAO;AAAA,IACX;AAAA,IACA,SAAS,6CAA6C;AAAA,IACtD,WAAW,iBAAiB;AAAA;AAAA;AAAA,IAG5B,CAAC,SAAS;AAAA,IACV;AAAA,EACF;AAEA,QAAM,SAAS,WACb;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS;AAAA,MACT,cAAY;AAAA,MACZ,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAMT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEA,8BAAC,eAAY,MAAM,IAAI,eAAW,MAAC;AAAA;AAAA,EACrC,IACE;AAEJ,MAAI,OAAO;AACT,WACE,qBAAC,UAAK,WAAW,MAAO,GAAG,MACzB;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL;AAAA,UACA,gBAAc;AAAA,UACd,WAAU;AAAA,UAET;AAAA;AAAA,MACH;AAAA,MACC;AAAA,OACH;AAAA,EAEJ;AAEA,MAAI,SAAS;AACX,WACE,oBAAC,YAAO,MAAK,UAAS,SAAkB,gBAAc,QAAQ,WAAW,MAAO,GAAG,MAChF,UACH;AAAA,EAEJ;AAEA,SACE,qBAAC,UAAK,WAAW,MAAO,GAAG,MACxB;AAAA;AAAA,IACA;AAAA,KACH;AAEJ;AAEA,IAAO,cAAQ;","names":[]}

package/dist/components/Text/Text.js

@@ -3,8 +3,8 @@ import { cn } from "../../lib/cn.js";
 const SIZE = {
   xs: "text-xs leading-[1.6]",
   sm: "text-sm leading-[1.65]",
-  base: "text-base font-light leading-[1.75]",
-  lead: "text-[length:var(--fs-item)] font-light leading-[1.6]"
+  base: "text-base [font-weight:var(--body-weight)] leading-[1.75]",
+  lead: "text-[length:var(--fs-item)] [font-weight:var(--body-weight)] leading-[1.6]"
 };
 const TONE = {
   body: "text-(--ink-2)",

package/dist/components/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["import type { ElementType, HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/**\n * A rung of the type scale, named for what it is FOR rather than for a pixel\n * value. `base` is body copy; `lead` is the standfirst that carries a piece and\n * is the only step here that touches the heading ladder (`--fs-item`, its\n * bottom rung). Nothing above that: a paragraph larger than a record title is a\n * heading that forgot to be one.\n */\nexport type TextSize = 'xs' | 'sm' | 'base' | 'lead'\n\n/**\n * A rung of the ink ladder. Three, because the ladder has three.\n *\n * `muted` is `--ink-3-aa` and never `--ink-3`. The two look identical on paper\n * and are not the same token: `--ink-3` is a translucent tint that inherits\n * whatever is under it, so it clears AA on the page ground and quietly fails on\n * a card, a plate, or a code block.\n */\nexport type TextTone = 'body' | 'strong' | 'muted'\n\nexport type TextElement = 'p' | 'span' | 'div' | 'li' | 'figcaption'\n\n/**\n * Weight travels with the size, deliberately.\n *\n * The system sets long-form copy at 300 — it is what gives a page of prose its\n * air. At 12 and 14px that same weight is a hairline: the strokes thin out\n * below the point where a light face is a choice and turn into a legibility\n * bug. So the two small steps step back up to 400, and a caller never has to\n * know that the trade exists.\n */\nconst SIZE: Record<TextSize, string> = {\n  xs: 'text-xs leading-[1.6]',\n  sm: 'text-sm leading-[1.65]',\n  base: 'text-base font-light leading-[1.75]',\n  lead: 'text-[length:var(--fs-item)] font-light leading-[1.6]',\n}\n\nconst TONE: Record<TextTone, string> = {\n  body: 'text-(--ink-2)',\n  strong: 'text-(--ink)',\n  muted: 'text-(--ink-3-aa)',\n}\n\nexport interface TextProps extends HTMLAttributes<HTMLElement> {\n  children?: ReactNode\n  /** Which rung of the type scale. See {@link TextSize}. */\n  size?: TextSize\n  /** Which rung of the ink ladder. See {@link TextTone}. */\n  tone?: TextTone\n  /**\n   * The element, and ONLY the element.\n   *\n   * Changing it changes what the markup means — a `span` inside a sentence, an\n   * `li` inside a list someone else opened — and changes nothing about the\n   * look. That separation is the whole point: the alternative is a `<p>` nested\n   * inside a `<p>`, which the HTML parser silently splits into two, or a\n   * paragraph faked out of a `<div>` because the real element brought a size\n   * with it.\n   */\n  as?: TextElement\n}\n\n/**\n * A paragraph, or a run of text that wants the system's voice.\n *\n * The step between `Article` and raw JSX. `Article` styles a whole reading\n * column from element selectors and is the right answer for a post; this is for\n * the single paragraph that is NOT in a column — a card's description, a\n * dialog's explanation, the line under an empty state.\n *\n * The default tone is `body` (`--ink-2`), not `--ink`. A page whose paragraphs\n * are all full-strength ink has spent the top of the ladder on its body copy\n * and has nothing left for the headings, which is the single most common way a\n * monochrome page loses its hierarchy.\n *\n * @example\n * <Text>Twelve releases this quarter, none rolled back.</Text>\n * @example\n * <Text size=\"lead\" tone=\"strong\">A monochrome system for software and writing.</Text>\n * @example\n * <Text as=\"span\" size=\"sm\" tone=\"muted\">Updated just now</Text>\n */\nexport function Text({\n  children,\n  size = 'base',\n  tone = 'body',\n  as = 'p',\n  className,\n  ...rest\n}: TextProps) {\n  const Comp = as as ElementType\n\n  return (\n    <Comp className={cn('m-0', SIZE[size], TONE[tone], className)} {...rest}>\n      {children}\n    </Comp>\n  )\n}\n\nexport default Text\n"],"mappings":"AAgGI;AA/FJ,SAAS,UAAU;AAgCnB,MAAM,OAAiC;AAAA,EACrC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,OAAiC;AAAA,EACrC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AAyCO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP,KAAK;AAAA,EACL;AAAA,EACA,GAAG;AACL,GAAc;AACZ,QAAM,OAAO;AAEb,SACE,oBAAC,QAAK,WAAW,GAAG,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,SAAS,GAAI,GAAG,MAChE,UACH;AAEJ;AAEA,IAAO,eAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["import type { ElementType, HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/**\n * A rung of the type scale, named for what it is FOR rather than for a pixel\n * value. `base` is body copy; `lead` is the standfirst that carries a piece and\n * is the only step here that touches the heading ladder (`--fs-item`, its\n * bottom rung). Nothing above that: a paragraph larger than a record title is a\n * heading that forgot to be one.\n */\nexport type TextSize = 'xs' | 'sm' | 'base' | 'lead'\n\n/**\n * A rung of the ink ladder. Three, because the ladder has three.\n *\n * `muted` is `--ink-3-aa` and never `--ink-3`. The two look identical on paper\n * and are not the same token: `--ink-3` is a translucent tint that inherits\n * whatever is under it, so it clears AA on the page ground and quietly fails on\n * a card, a plate, or a code block.\n */\nexport type TextTone = 'body' | 'strong' | 'muted'\n\nexport type TextElement = 'p' | 'span' | 'div' | 'li' | 'figcaption'\n\n/**\n * Weight travels with the size, deliberately.\n *\n * The system sets long-form copy at 300 — it is what gives a page of prose its\n * air. At 12 and 14px that same weight is a hairline: the strokes thin out\n * below the point where a light face is a choice and turn into a legibility\n * bug. So the two small steps step back up to 400, and a caller never has to\n * know that the trade exists.\n */\nconst SIZE: Record<TextSize, string> = {\n  xs: 'text-xs leading-[1.6]',\n  sm: 'text-sm leading-[1.65]',\n  base: 'text-base [font-weight:var(--body-weight)] leading-[1.75]',\n  lead: 'text-[length:var(--fs-item)] [font-weight:var(--body-weight)] leading-[1.6]',\n}\n\nconst TONE: Record<TextTone, string> = {\n  body: 'text-(--ink-2)',\n  strong: 'text-(--ink)',\n  muted: 'text-(--ink-3-aa)',\n}\n\nexport interface TextProps extends HTMLAttributes<HTMLElement> {\n  children?: ReactNode\n  /** Which rung of the type scale. See {@link TextSize}. */\n  size?: TextSize\n  /** Which rung of the ink ladder. See {@link TextTone}. */\n  tone?: TextTone\n  /**\n   * The element, and ONLY the element.\n   *\n   * Changing it changes what the markup means — a `span` inside a sentence, an\n   * `li` inside a list someone else opened — and changes nothing about the\n   * look. That separation is the whole point: the alternative is a `<p>` nested\n   * inside a `<p>`, which the HTML parser silently splits into two, or a\n   * paragraph faked out of a `<div>` because the real element brought a size\n   * with it.\n   */\n  as?: TextElement\n}\n\n/**\n * A paragraph, or a run of text that wants the system's voice.\n *\n * The step between `Article` and raw JSX. `Article` styles a whole reading\n * column from element selectors and is the right answer for a post; this is for\n * the single paragraph that is NOT in a column — a card's description, a\n * dialog's explanation, the line under an empty state.\n *\n * The default tone is `body` (`--ink-2`), not `--ink`. A page whose paragraphs\n * are all full-strength ink has spent the top of the ladder on its body copy\n * and has nothing left for the headings, which is the single most common way a\n * monochrome page loses its hierarchy.\n *\n * @example\n * <Text>Twelve releases this quarter, none rolled back.</Text>\n * @example\n * <Text size=\"lead\" tone=\"strong\">A monochrome system for software and writing.</Text>\n * @example\n * <Text as=\"span\" size=\"sm\" tone=\"muted\">Updated just now</Text>\n */\nexport function Text({\n  children,\n  size = 'base',\n  tone = 'body',\n  as = 'p',\n  className,\n  ...rest\n}: TextProps) {\n  const Comp = as as ElementType\n\n  return (\n    <Comp className={cn('m-0', SIZE[size], TONE[tone], className)} {...rest}>\n      {children}\n    </Comp>\n  )\n}\n\nexport default Text\n"],"mappings":"AAgGI;AA/FJ,SAAS,UAAU;AAgCnB,MAAM,OAAiC;AAAA,EACrC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,MAAM;AACR;AAEA,MAAM,OAAiC;AAAA,EACrC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AAyCO,SAAS,KAAK;AAAA,EACnB;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP,KAAK;AAAA,EACL;AAAA,EACA,GAAG;AACL,GAAc;AACZ,QAAM,OAAO;AAEb,SACE,oBAAC,QAAK,WAAW,GAAG,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,SAAS,GAAI,GAAG,MAChE,UACH;AAEJ;AAEA,IAAO,eAAQ;","names":[]}

package/dist/components/ToggleGroup/ToggleGroup.js

@@ -45,7 +45,7 @@ function ToggleGroup({
           {
             "aria-hidden": true,
             "data-folio-animated": true,
-            className: "absolute rounded-(--radius-pill) bg-(--accent) transition-[transform,width] duration-(--duration-base) ease-(--ease-out-expo) motion-reduce:transition-none",
+            className: "absolute rounded-(--radius-pill) bg-(--action) transition-[transform,width] duration-(--duration-base) ease-(--ease-out-expo) motion-reduce:transition-none",
             style: {
               transform: `translate(${indicator.offset}px, ${indicator.top}px)`,
               width: indicator.width,
@@ -72,7 +72,7 @@ function ToggleGroupItem({ className, value, ...props }) {
       "data-indicator-active": active ? "true" : void 0,
       className: cn(
         "relative z-1 inline-flex min-h-(--control-h-sm) items-center justify-center gap-2 rounded-(--radius-pill) px-3.5 text-sm transition-colors duration-(--duration-fast) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none",
-        isSingle ? active ? "text-(--accent-foreground)" : "text-(--ink-3-aa) hover:text-(--ink)" : "text-(--ink-3-aa) hover:text-(--ink) data-[state=on]:bg-(--accent) data-[state=on]:text-(--accent-foreground)",
+        isSingle ? active ? "text-(--action-foreground)" : "text-(--ink-3-aa) hover:text-(--ink)" : "text-(--ink-3-aa) hover:text-(--ink) data-[state=on]:bg-(--action) data-[state=on]:text-(--action-foreground)",
         className
       ),
       ...props

package/dist/components/ToggleGroup/ToggleGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["'use client'\n\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'\nimport { createContext, useContext, useState, type ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useFieldControl } from '../Field/field-control'\nimport { useSelectionIndicator } from '../../lib/useSelectionIndicator'\n\nexport type ToggleGroupProps = ComponentProps<typeof ToggleGroupPrimitive.Root>\n\n/** Lets an item know whether the group tracks one value or several. */\nconst SingleValueContext = createContext<string | null>(null)\n\n/**\n * A segmented control: several options, one strip.\n *\n * `type=\"single\"` is a choice — Radix gives it radio semantics, and it is the\n * right shape for a view switcher or a density setting. `type=\"multiple\"` is a\n * set of independent toggles, which is a different thing announced differently;\n * choosing the wrong one is how a \"filter by tag\" control ends up telling a\n * screen reader that picking one tag unpicks the others.\n *\n * The two look different on purpose. A single-value strip moves ONE filled pill\n * between its options, so the eye follows a thing travelling; a multiple-value\n * strip fills each pressed option separately, because there is no single\n * selection to travel. Two people looking at a screenshot should be able to\n * tell which kind they are looking at, and before this they could not.\n *\n * Distinct from `Tabs`, which switches PANELS and owns a tabpanel relationship.\n * A toggle group changes a value.\n *\n * Inside a `Field` the strip takes its name from that label, by pointing back at\n * it — the root is a div, and `<label for>` does not bind to one, so the words\n * above it do not click through. Standing alone it still needs its own\n * `aria-label`.\n *\n * @example\n * <ToggleGroup type=\"single\" defaultValue=\"grid\" aria-label=\"Layout\">\n *   <ToggleGroupItem value=\"grid\">Grid</ToggleGroupItem>\n *   <ToggleGroupItem value=\"list\">List</ToggleGroupItem>\n * </ToggleGroup>\n */\nexport function ToggleGroup({\n  className,\n  children,\n  'aria-required': ariaRequired,\n  ...props\n}: ToggleGroupProps) {\n  const field = useFieldControl()\n  const named = props['aria-label'] != null || props['aria-labelledby'] != null\n\n  // Tracked here rather than left to Radix alone, because the sliding pill has\n  // to know which item to measure — and an uncontrolled group never tells\n  // anyone what it picked.\n  const single = props.type === 'single'\n  const [uncontrolled, setUncontrolled] = useState<string>(\n    (single ? (props.defaultValue as string | undefined) : undefined) ?? '',\n  )\n  const value = single ? ((props.value as string | undefined) ?? uncontrolled) : null\n  const [ref, indicator] = useSelectionIndicator<HTMLDivElement>(value)\n\n  const root = (\n    <ToggleGroupPrimitive.Root\n      ref={ref}\n      aria-labelledby={named ? undefined : field?.labelId}\n      // Only on the single-value strip. Radix gives that one role=\"radiogroup\",\n      // which takes aria-required; a multiple-value strip is a role=\"toolbar\",\n      // where the attribute is not allowed at all — so a Field's `required`\n      // reaches one shape of this control and not the other.\n      aria-required={props.type === 'single' ? ariaRequired : undefined}\n      className={cn(\n        // `w-fit` as well as `inline-flex`: a flex or grid parent stretches its\n        // children to the track by default, and `inline-flex` does not opt out\n        // of that. Without it the strip grew to whatever the widest sibling was\n        // — a label above it — and left dead space after the last segment.\n        'relative inline-flex w-fit items-center gap-1 rounded-(--radius-pill) border border-(--rule-2) p-1',\n        className,\n      )}\n      {...props}\n      onValueChange={(next: never) => {\n        if (single) setUncontrolled((next as string) ?? '')\n        ;(props.onValueChange as ((v: never) => void) | undefined)?.(next)\n      }}\n    >\n      {single && indicator.ready && (\n        <span\n          aria-hidden\n          data-folio-animated\n          className=\"absolute rounded-(--radius-pill) bg-(--accent) transition-[transform,width] duration-(--duration-base) ease-(--ease-out-expo) motion-reduce:transition-none\"\n          style={{\n            transform: `translate(${indicator.offset}px, ${indicator.top}px)`,\n            width: indicator.width,\n            height: indicator.height,\n            insetInlineStart: 0,\n            top: 0,\n          }}\n        />\n      )}\n      {children}\n    </ToggleGroupPrimitive.Root>\n  )\n\n  return single ? (\n    <SingleValueContext.Provider value={value}>{root}</SingleValueContext.Provider>\n  ) : (\n    root\n  )\n}\n\nexport type ToggleGroupItemProps = ComponentProps<typeof ToggleGroupPrimitive.Item>\n\n/**\n * One segment.\n *\n * In a single-value group the item draws no background of its own — the\n * travelling pill behind it does — so it only changes ink. In a multiple-value\n * group it fills, because there is nothing travelling.\n */\nexport function ToggleGroupItem({ className, value, ...props }: ToggleGroupItemProps) {\n  const selected = useContext(SingleValueContext)\n  const isSingle = selected !== null\n  const active = isSingle && selected === value\n\n  return (\n    <ToggleGroupPrimitive.Item\n      value={value}\n      data-indicator-active={active ? 'true' : undefined}\n      className={cn(\n        'relative z-1 inline-flex min-h-(--control-h-sm) items-center justify-center gap-2 rounded-(--radius-pill) px-3.5 text-sm transition-colors duration-(--duration-fast) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none',\n        isSingle\n          ? active\n            ? 'text-(--accent-foreground)'\n            : 'text-(--ink-3-aa) hover:text-(--ink)'\n          : 'text-(--ink-3-aa) hover:text-(--ink) data-[state=on]:bg-(--accent) data-[state=on]:text-(--accent-foreground)',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport default ToggleGroup\n"],"mappings":";AA8DI,SAuBI,KAvBJ;AA5DJ,YAAY,0BAA0B;AACtC,SAAS,eAAe,YAAY,gBAAqC;AACzE,SAAS,UAAU;AACnB,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AAKtC,MAAM,qBAAqB,cAA6B,IAAI;AA+BrD,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,GAAG;AACL,GAAqB;AACnB,QAAM,QAAQ,gBAAgB;AAC9B,QAAM,QAAQ,MAAM,YAAY,KAAK,QAAQ,MAAM,iBAAiB,KAAK;AAKzE,QAAM,SAAS,MAAM,SAAS;AAC9B,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,KACrC,SAAU,MAAM,eAAsC,WAAc;AAAA,EACvE;AACA,QAAM,QAAQ,SAAW,MAAM,SAAgC,eAAgB;AAC/E,QAAM,CAAC,KAAK,SAAS,IAAI,sBAAsC,KAAK;AAEpE,QAAM,OACJ;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,mBAAiB,QAAQ,SAAY,OAAO;AAAA,MAK5C,iBAAe,MAAM,SAAS,WAAW,eAAe;AAAA,MACxD,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,QAKT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MACJ,eAAe,CAAC,SAAgB;AAC9B,YAAI,OAAQ,iBAAiB,QAAmB,EAAE;AACjD,QAAC,MAAM,gBAAqD,IAAI;AAAA,MACnE;AAAA,MAEC;AAAA,kBAAU,UAAU,SACnB;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,YACX,uBAAmB;AAAA,YACnB,WAAU;AAAA,YACV,OAAO;AAAA,cACL,WAAW,aAAa,UAAU,MAAM,OAAO,UAAU,GAAG;AAAA,cAC5D,OAAO,UAAU;AAAA,cACjB,QAAQ,UAAU;AAAA,cAClB,kBAAkB;AAAA,cAClB,KAAK;AAAA,YACP;AAAA;AAAA,QACF;AAAA,QAED;AAAA;AAAA;AAAA,EACH;AAGF,SAAO,SACL,oBAAC,mBAAmB,UAAnB,EAA4B,OAAe,gBAAK,IAEjD;AAEJ;AAWO,SAAS,gBAAgB,EAAE,WAAW,OAAO,GAAG,MAAM,GAAyB;AACpF,QAAM,WAAW,WAAW,kBAAkB;AAC9C,QAAM,WAAW,aAAa;AAC9B,QAAM,SAAS,YAAY,aAAa;AAExC,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,yBAAuB,SAAS,SAAS;AAAA,MACzC,WAAW;AAAA,QACT;AAAA,QACA,WACI,SACE,+BACA,yCACF;AAAA,QACJ;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,sBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["'use client'\n\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'\nimport { createContext, useContext, useState, type ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useFieldControl } from '../Field/field-control'\nimport { useSelectionIndicator } from '../../lib/useSelectionIndicator'\n\nexport type ToggleGroupProps = ComponentProps<typeof ToggleGroupPrimitive.Root>\n\n/** Lets an item know whether the group tracks one value or several. */\nconst SingleValueContext = createContext<string | null>(null)\n\n/**\n * A segmented control: several options, one strip.\n *\n * `type=\"single\"` is a choice — Radix gives it radio semantics, and it is the\n * right shape for a view switcher or a density setting. `type=\"multiple\"` is a\n * set of independent toggles, which is a different thing announced differently;\n * choosing the wrong one is how a \"filter by tag\" control ends up telling a\n * screen reader that picking one tag unpicks the others.\n *\n * The two look different on purpose. A single-value strip moves ONE filled pill\n * between its options, so the eye follows a thing travelling; a multiple-value\n * strip fills each pressed option separately, because there is no single\n * selection to travel. Two people looking at a screenshot should be able to\n * tell which kind they are looking at, and before this they could not.\n *\n * Distinct from `Tabs`, which switches PANELS and owns a tabpanel relationship.\n * A toggle group changes a value.\n *\n * Inside a `Field` the strip takes its name from that label, by pointing back at\n * it — the root is a div, and `<label for>` does not bind to one, so the words\n * above it do not click through. Standing alone it still needs its own\n * `aria-label`.\n *\n * @example\n * <ToggleGroup type=\"single\" defaultValue=\"grid\" aria-label=\"Layout\">\n *   <ToggleGroupItem value=\"grid\">Grid</ToggleGroupItem>\n *   <ToggleGroupItem value=\"list\">List</ToggleGroupItem>\n * </ToggleGroup>\n */\nexport function ToggleGroup({\n  className,\n  children,\n  'aria-required': ariaRequired,\n  ...props\n}: ToggleGroupProps) {\n  const field = useFieldControl()\n  const named = props['aria-label'] != null || props['aria-labelledby'] != null\n\n  // Tracked here rather than left to Radix alone, because the sliding pill has\n  // to know which item to measure — and an uncontrolled group never tells\n  // anyone what it picked.\n  const single = props.type === 'single'\n  const [uncontrolled, setUncontrolled] = useState<string>(\n    (single ? (props.defaultValue as string | undefined) : undefined) ?? '',\n  )\n  const value = single ? ((props.value as string | undefined) ?? uncontrolled) : null\n  const [ref, indicator] = useSelectionIndicator<HTMLDivElement>(value)\n\n  const root = (\n    <ToggleGroupPrimitive.Root\n      ref={ref}\n      aria-labelledby={named ? undefined : field?.labelId}\n      // Only on the single-value strip. Radix gives that one role=\"radiogroup\",\n      // which takes aria-required; a multiple-value strip is a role=\"toolbar\",\n      // where the attribute is not allowed at all — so a Field's `required`\n      // reaches one shape of this control and not the other.\n      aria-required={props.type === 'single' ? ariaRequired : undefined}\n      className={cn(\n        // `w-fit` as well as `inline-flex`: a flex or grid parent stretches its\n        // children to the track by default, and `inline-flex` does not opt out\n        // of that. Without it the strip grew to whatever the widest sibling was\n        // — a label above it — and left dead space after the last segment.\n        'relative inline-flex w-fit items-center gap-1 rounded-(--radius-pill) border border-(--rule-2) p-1',\n        className,\n      )}\n      {...props}\n      onValueChange={(next: never) => {\n        if (single) setUncontrolled((next as string) ?? '')\n        ;(props.onValueChange as ((v: never) => void) | undefined)?.(next)\n      }}\n    >\n      {single && indicator.ready && (\n        <span\n          aria-hidden\n          data-folio-animated\n          className=\"absolute rounded-(--radius-pill) bg-(--action) transition-[transform,width] duration-(--duration-base) ease-(--ease-out-expo) motion-reduce:transition-none\"\n          style={{\n            transform: `translate(${indicator.offset}px, ${indicator.top}px)`,\n            width: indicator.width,\n            height: indicator.height,\n            insetInlineStart: 0,\n            top: 0,\n          }}\n        />\n      )}\n      {children}\n    </ToggleGroupPrimitive.Root>\n  )\n\n  return single ? (\n    <SingleValueContext.Provider value={value}>{root}</SingleValueContext.Provider>\n  ) : (\n    root\n  )\n}\n\nexport type ToggleGroupItemProps = ComponentProps<typeof ToggleGroupPrimitive.Item>\n\n/**\n * One segment.\n *\n * In a single-value group the item draws no background of its own — the\n * travelling pill behind it does — so it only changes ink. In a multiple-value\n * group it fills, because there is nothing travelling.\n */\nexport function ToggleGroupItem({ className, value, ...props }: ToggleGroupItemProps) {\n  const selected = useContext(SingleValueContext)\n  const isSingle = selected !== null\n  const active = isSingle && selected === value\n\n  return (\n    <ToggleGroupPrimitive.Item\n      value={value}\n      data-indicator-active={active ? 'true' : undefined}\n      className={cn(\n        'relative z-1 inline-flex min-h-(--control-h-sm) items-center justify-center gap-2 rounded-(--radius-pill) px-3.5 text-sm transition-colors duration-(--duration-fast) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none',\n        isSingle\n          ? active\n            ? 'text-(--action-foreground)'\n            : 'text-(--ink-3-aa) hover:text-(--ink)'\n          : 'text-(--ink-3-aa) hover:text-(--ink) data-[state=on]:bg-(--action) data-[state=on]:text-(--action-foreground)',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport default ToggleGroup\n"],"mappings":";AA8DI,SAuBI,KAvBJ;AA5DJ,YAAY,0BAA0B;AACtC,SAAS,eAAe,YAAY,gBAAqC;AACzE,SAAS,UAAU;AACnB,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AAKtC,MAAM,qBAAqB,cAA6B,IAAI;AA+BrD,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,GAAG;AACL,GAAqB;AACnB,QAAM,QAAQ,gBAAgB;AAC9B,QAAM,QAAQ,MAAM,YAAY,KAAK,QAAQ,MAAM,iBAAiB,KAAK;AAKzE,QAAM,SAAS,MAAM,SAAS;AAC9B,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,KACrC,SAAU,MAAM,eAAsC,WAAc;AAAA,EACvE;AACA,QAAM,QAAQ,SAAW,MAAM,SAAgC,eAAgB;AAC/E,QAAM,CAAC,KAAK,SAAS,IAAI,sBAAsC,KAAK;AAEpE,QAAM,OACJ;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,mBAAiB,QAAQ,SAAY,OAAO;AAAA,MAK5C,iBAAe,MAAM,SAAS,WAAW,eAAe;AAAA,MACxD,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,QAKT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MACJ,eAAe,CAAC,SAAgB;AAC9B,YAAI,OAAQ,iBAAiB,QAAmB,EAAE;AACjD,QAAC,MAAM,gBAAqD,IAAI;AAAA,MACnE;AAAA,MAEC;AAAA,kBAAU,UAAU,SACnB;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,YACX,uBAAmB;AAAA,YACnB,WAAU;AAAA,YACV,OAAO;AAAA,cACL,WAAW,aAAa,UAAU,MAAM,OAAO,UAAU,GAAG;AAAA,cAC5D,OAAO,UAAU;AAAA,cACjB,QAAQ,UAAU;AAAA,cAClB,kBAAkB;AAAA,cAClB,KAAK;AAAA,YACP;AAAA;AAAA,QACF;AAAA,QAED;AAAA;AAAA;AAAA,EACH;AAGF,SAAO,SACL,oBAAC,mBAAmB,UAAnB,EAA4B,OAAe,gBAAK,IAEjD;AAEJ;AAWO,SAAS,gBAAgB,EAAE,WAAW,OAAO,GAAG,MAAM,GAAyB;AACpF,QAAM,WAAW,WAAW,kBAAkB;AAC9C,QAAM,WAAW,aAAa;AAC9B,QAAM,SAAS,YAAY,aAAa;AAExC,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,yBAAuB,SAAS,SAAS;AAAA,MACzC,WAAW;AAAA,QACT;AAAA,QACA,WACI,SACE,+BACA,yCACF;AAAA,QACJ;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,sBAAQ;","names":[]}

package/dist/keyframes.css

@@ -298,3 +298,25 @@
     animation: none !important;
   }
 }
+
+/* The search palette's arrival and exit. Opacity carries most of it; the lift
+   and the scale are small enough to read as settling, not as travel. Written
+   on `transform` so it never fights the panel's centring, which Tailwind
+   writes on `translate`. */
+@keyframes folio-palette-in {
+  from {
+    opacity: 0;
+    transform: translateY(-6px) scale(0.985);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes folio-palette-out {
+  to {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.985);
+  }
+}

package/dist/semantic.css

@@ -69,10 +69,12 @@
      writes the next panel. */
   --accent-on-muted: var(--red-ink);
 
-  /* The fill of the one primary action on a screen. It follows the accent
-     unless `data-action` says otherwise: a preset that keeps its accent for
-     links and the current state can hand the primary button back to ink,
-     without a checked box or the current page losing the accent. */
+  /* The SOLID fill of a primary action or a chosen option — the primary
+     button, the sliding pill of a segmented control, the active filter chip,
+     the current page. It follows the accent unless `data-action` says
+     otherwise: a preset that keeps its accent for links can hand these large
+     fills back to ink, while small marks (a checked box, a switch, a slider's
+     range) keep the accent. */
   --action: var(--accent);
   --action-foreground: var(--accent-foreground);