@verdify/ui 0.2.1 → 0.2.2

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright (c) 2026 Verdify.
+
+All rights reserved.
+
+This repository contains confidential and proprietary architecture documentation
+for the Verdify ecosystem (Verdify, Spare, Veraq). It is shared with employees,
+contractors, and authorized partners under the terms of their respective
+agreements. No license — express or implied — is granted to copy, distribute,
+or create derivative works outside those agreements.
+
+Replace this file with the organization's chosen license before any public or
+open-source release of any portion of the ecosystem.

package/dist/components/agent-badge/agent-badge.variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"agent-badge.variants.d.ts","sourceRoot":"","sources":["../../../src/components/agent-badge/agent-badge.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AA+ClE,eAAO,MAAM,kBAAkB;;8EA2B9B,CAAC;AAMF,eAAO,MAAM,mBAAmB,+DAA+D,CAAC;AAEhG,MAAM,MAAM,sBAAsB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}
+{"version":3,"file":"agent-badge.variants.d.ts","sourceRoot":"","sources":["../../../src/components/agent-badge/agent-badge.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAyClE,eAAO,MAAM,kBAAkB;;8EA2B9B,CAAC;AAMF,eAAO,MAAM,mBAAmB,+DAA+D,CAAC;AAEhG,MAAM,MAAM,sBAAsB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC"}

package/dist/components/agent-badge/agent-badge.variants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/agent-badge/agent-badge.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// An AgentBadge is a small, NON-INTERACTIVE marker that the actor in view is an AI\n// agent, not a human (spec §1). It is a pill that holds a label and an optional\n// decorative icon — NOT a control: no focus ring, no target-size floor, no state\n// transition (spec §4/§5/§6).\n//\n// `variant` is the state the badge reports (spec §3). `neutral` is the default and\n// the common case: an AgentBadge has ONE meaning — \"this actor is an AI agent\" — so\n// neutrals carry the surface. It is a quiet, persistent marker, not an alarm. A\n// status color is spent ONLY when the agent ITSELF is in a state that needs\n// attention (authority expiring) or has failed (access revoked) — never to draw\n// attention to \"agent-ness\".\n//\n// The brand color (Sovereign Violet) is NEVER an AgentBadge fill — the brand is not\n// a status and not an actor-kind marker, so the family binds nothing from the action\n// tier. The verified-status green is reserved for the VerifiedBadge placed beside it,\n// never painted here, and \"agent\" is not the verified or signal status — so the only\n// status trios this badge ever reaches for are caution and critical (spec §3/§5/§8,\n// brand != state).\n//\n// Container fill: neutral AND each status paint the SAME one raised surface. The\n// status trio's `-bg` resolves to that same surface, so the agent's state is carried\n// by the fg (label + icon) and the border, never a saturated fill (spec §3/§5/§C).\n//\n// INHERITED TOKEN-TIER CONTRAST DEFECT — flag, do NOT mirror as AA-compliant.\n// The caution/critical bindings below are the spec §5 token table verbatim and an\n// exact mirror of the committed Badge template — they are CORRECT for this component\n// to bind, and the fix does NOT belong here. But on the one raised surface (where\n// every --color-status-*-bg resolves, identical to --color-surface-raised) the\n// saturated status fg/border colors, tuned for a stronger fill, fall below WCAG 2.2 AA\n// (measured against --color-surface-raised):\n//   caution  --color-status-caution-fg  / -border  -> 1.71:1\n//   critical --color-status-critical-fg / -border  -> 2.76:1\n// both far under the 4.5:1 text floor (1.4.3) for the 12px caption label and under\n// the 3:1 non-text bar (1.4.11) for the border. (--color-surface-border-muted on the\n// neutral variant is likewise ~2.55:1, under 3:1, but neutral is not status-bearing.)\n// This CONTRADICTS the frozen spec §7 claim that the label \"meets the AA text-contrast\n// floor and its border meets the 3:1 non-text bar\"; that claim is false for the status\n// variants and must not be treated as true. It is a SYSTEMIC token-tier problem\n// affecting every status-bearing Badge AND AgentBadge — the @verdify/tokens saturated\n// status fg/border values were designed for a stronger fill, not this near-white\n// surface — so the fix is at the token tier, not in this component. Neither lint:gates\n// nor the jest-axe sweep catches it (gates do not check contrast; jsdom resolves no\n// computed colors), so the measured ratios are pinned as a tripwire in\n// agent-badge.test.tsx. (Hex values are intentionally omitted here: the token-binding\n// gate's raw-hex matcher scans this comment.)\nexport const agentBadgeVariants = cva(\n  [\n    // shape / layout: a pill holding the optional icon + label at the small gap\n    \"inline-flex items-center gap-(--space-1) rounded-(--radius-full) border px-(--space-1)\",\n    // type ROLE — caption (spec §5); the label always reads on its own, so the\n    // human/agent distinction never rests on color or shape alone\n    \"text-caption font-medium\",\n    // global-first: never wrap (the marker stays a single self-contained chip)\n    \"whitespace-nowrap\",\n  ],\n  {\n    variants: {\n      // STRUCTURAL axis = spec §3 (the state of the agent the badge reports)\n      variant: {\n        // neutral (default): the standard agent marker — neutral surface, text, and\n        // border roles, no status color (spec §3)\n        neutral: \"bg-surface-raised border-surface-border-muted text-text-secondary\",\n        // caution: the agent itself needs attention (authority expiring, grant pending)\n        // — the matching status trio; bg is the neutral surface (spec §3)\n        caution: \"bg-status-caution-bg border-status-caution-border text-status-caution-fg\",\n        // critical: the agent itself failed or was revoked (access revoked, invalid\n        // credentials) — the matching status trio; bg is the neutral surface (spec §3)\n        critical: \"bg-status-critical-bg border-status-critical-border text-status-critical-fg\",\n      },\n    },\n    defaultVariants: { variant: \"neutral\" },\n  },\n);\n\n// The optional leading icon (spec §2): one small decorative glyph at the sm icon\n// role that reinforces the label. It inherits the variant fg via `currentColor`; the\n// label still carries the meaning if the icon is dropped, so meaning never rests on\n// color OR icon alone.\nexport const agentBadgeIconClass = \"inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0\";\n\nexport type AgentBadgeVariantProps = VariantProps<typeof agentBadgeVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AA+ChC,MAAM,qBAAqB;AAAA,EAChC;AAAA;AAAA,IAEE;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA,IAEA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA,MAER,SAAS;AAAA;AAAA;AAAA,QAGP,SAAS;AAAA;AAAA;AAAA,QAGT,SAAS;AAAA;AAAA;AAAA,QAGT,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,SAAS,UAAU;AAAA,EACxC;AACF;AAMO,MAAM,sBAAsB;","names":[]}
+{"version":3,"sources":["../../../src/components/agent-badge/agent-badge.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// An AgentBadge is a small, NON-INTERACTIVE marker that the actor in view is an AI\n// agent, not a human (spec §1). It is a pill that holds a label and an optional\n// decorative icon — NOT a control: no focus ring, no target-size floor, no state\n// transition (spec §4/§5/§6).\n//\n// `variant` is the state the badge reports (spec §3). `neutral` is the default and\n// the common case: an AgentBadge has ONE meaning — \"this actor is an AI agent\" — so\n// neutrals carry the surface. It is a quiet, persistent marker, not an alarm. A\n// status color is spent ONLY when the agent ITSELF is in a state that needs\n// attention (authority expiring) or has failed (access revoked) — never to draw\n// attention to \"agent-ness\".\n//\n// The brand color (Sovereign Violet) is NEVER an AgentBadge fill — the brand is not\n// a status and not an actor-kind marker, so the family binds nothing from the action\n// tier. The verified-status green is reserved for the VerifiedBadge placed beside it,\n// never painted here, and \"agent\" is not the verified or signal status — so the only\n// status trios this badge ever reaches for are caution and critical (spec §3/§5/§8,\n// brand != state).\n//\n// Container fill: neutral AND each status paint the SAME one raised surface. The\n// status trio's `-bg` resolves to that same surface, so the agent's state is carried\n// by the fg (label + icon) and the border, never a saturated fill (spec §3/§5/§C).\n//\n// TOKEN-TIER CONTRAST — RESOLVED at the token tier (tokens 0.6.0); the spec §7 AA claim holds.\n// The caution/critical bindings below are the spec §5 token table verbatim and an\n// exact mirror of the committed Badge template. On the one raised surface (where every\n// --color-status-*-bg resolves, identical to --color-surface-raised) the status fg/border\n// now MEET WCAG 2.2 AA: tokens 0.6.0 darkened --color-status-{caution,critical}-{fg,border}\n// to in-hue AA-passing shades (~4.6:1 measured against --color-surface-raised), clearing the\n// 4.5:1 text floor (1.4.3) for the 12px caption label and the 3:1 non-text bar (1.4.11) for\n// the border. (The bright saturated status colors moved to --color-status-*-accent, used only\n// on decorative aria-hidden glyphs elsewhere, never on this label.) So the spec §7 claim that\n// the label \"meets the AA text-contrast floor and its border meets the 3:1 non-text bar\" is\n// TRUE for the status variants. The neutral variant's border (--color-surface-border-muted,\n// ~2.55:1) is still under 3:1, but neutral is not status-bearing. Neither lint:gates nor the\n// jest-axe sweep checks contrast (gates do not; jsdom resolves no computed colors), so the\n// AA-passing ratios are PINNED as a regression tripwire in agent-badge.test.tsx — a re-lighten\n// below the floors trips there. (Hex values are intentionally omitted here: the token-binding\n// gate's raw-hex matcher scans this comment.)\nexport const agentBadgeVariants = cva(\n  [\n    // shape / layout: a pill holding the optional icon + label at the small gap\n    \"inline-flex items-center gap-(--space-1) rounded-(--radius-full) border px-(--space-1)\",\n    // type ROLE — caption (spec §5); the label always reads on its own, so the\n    // human/agent distinction never rests on color or shape alone\n    \"text-caption font-medium\",\n    // global-first: never wrap (the marker stays a single self-contained chip)\n    \"whitespace-nowrap\",\n  ],\n  {\n    variants: {\n      // STRUCTURAL axis = spec §3 (the state of the agent the badge reports)\n      variant: {\n        // neutral (default): the standard agent marker — neutral surface, text, and\n        // border roles, no status color (spec §3)\n        neutral: \"bg-surface-raised border-surface-border-muted text-text-secondary\",\n        // caution: the agent itself needs attention (authority expiring, grant pending)\n        // — the matching status trio; bg is the neutral surface (spec §3)\n        caution: \"bg-status-caution-bg border-status-caution-border text-status-caution-fg\",\n        // critical: the agent itself failed or was revoked (access revoked, invalid\n        // credentials) — the matching status trio; bg is the neutral surface (spec §3)\n        critical: \"bg-status-critical-bg border-status-critical-border text-status-critical-fg\",\n      },\n    },\n    defaultVariants: { variant: \"neutral\" },\n  },\n);\n\n// The optional leading icon (spec §2): one small decorative glyph at the sm icon\n// role that reinforces the label. It inherits the variant fg via `currentColor`; the\n// label still carries the meaning if the icon is dropped, so meaning never rests on\n// color OR icon alone.\nexport const agentBadgeIconClass = \"inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0\";\n\nexport type AgentBadgeVariantProps = VariantProps<typeof agentBadgeVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAyChC,MAAM,qBAAqB;AAAA,EAChC;AAAA;AAAA,IAEE;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA,IAEA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA,MAER,SAAS;AAAA;AAAA;AAAA,QAGP,SAAS;AAAA;AAAA;AAAA,QAGT,SAAS;AAAA;AAAA;AAAA,QAGT,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,SAAS,UAAU;AAAA,EACxC;AACF;AAMO,MAAM,sBAAsB;","names":[]}

package/dist/components/checkbox/checkbox.js

@@ -92,7 +92,7 @@ const Checkbox = React.forwardRef(
         }
       ),
       description ? /* @__PURE__ */ jsx("p", { id: descId, className: "text-caption text-text-secondary", children: description }) : null,
-      error ? /* @__PURE__ */ jsx("p", { id: errorId, className: "text-caption text-status-critical-fg", children: error }) : null
+      error ? /* @__PURE__ */ jsx("p", { id: errorId, className: "text-caption text-status-critical-on-surface", children: error }) : null
     ] });
   }
 );

package/dist/components/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  checkboxBoxVariants,\n  checkboxLabelVariants,\n  checkboxCheckGlyphVariants,\n  checkboxBarGlyphVariants,\n  type CheckboxBoxVariantProps,\n} from \"./checkbox.variants\";\n\ntype NativeInputProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  \"size\" | \"type\" | \"onChange\"\n>;\n\nexport interface CheckboxProps extends NativeInputProps, CheckboxBoxVariantProps {\n  /** The visible text naming the choice. Becomes the accessible name via <label for>. */\n  label: string;\n  /** Secondary helper text beneath the label. Linked via aria-describedby. */\n  description?: string;\n  /** Validation message; sets aria-invalid and the critical-bordered error state. */\n  error?: string;\n  /** standalone = one value; parent = summarizes children (the only place mixed rests). */\n  variant?: \"standalone\" | \"parent\";\n  /** Mixed/“some children” state. Honored ONLY on variant=\"parent\"; ignored on standalone. */\n  indeterminate?: boolean;\n  /** Fired with the resolved boolean; a parent toggle resolves mixed → checked/unchecked. */\n  onCheckedChange?: (checked: boolean) => void;\n}\n\nlet idSeq = 0;\n\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  function Checkbox(\n    {\n      className,\n      label,\n      description,\n      error,\n      size,\n      variant = \"standalone\",\n      indeterminate = false,\n      disabled = false,\n      id,\n      onCheckedChange,\n      ...props\n    },\n    forwardedRef,\n  ) {\n    const reactId = React.useId();\n    const baseId = id ?? `checkbox-${reactId}-${(idSeq += 1)}`;\n    const descId = description ? `${baseId}-description` : undefined;\n    const errorId = error ? `${baseId}-error` : undefined;\n\n    // indeterminate is a parent-only RESTING state — standalone never rests on mixed.\n    const isMixed = variant === \"parent\" && indeterminate;\n\n    const innerRef = React.useRef<HTMLInputElement>(null);\n    // bridge the forwarded ref to our inner ref (we need direct DOM access for indeterminate)\n    React.useImperativeHandle(forwardedRef, () => innerRef.current as HTMLInputElement);\n\n    // indeterminate is a DOM property, not an attribute — write it through the ref.\n    // This effect is why the component is a client component ('use client' above).\n    React.useEffect(() => {\n      if (innerRef.current) innerRef.current.indeterminate = isMixed;\n    }, [isMixed]);\n\n    const describedBy =\n      [descId, errorId].filter(Boolean).join(\" \") || undefined;\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      // a direct parent toggle resolves mixed → a single state; never rests on mixed\n      onCheckedChange?.(e.currentTarget.checked);\n    };\n\n    return (\n      <div className=\"flex flex-col gap-1\">\n        {/* control row: the box + label share one hit area no smaller than the target token */}\n        <div\n          data-testid=\"checkbox-control\"\n          className=\"flex min-h-(--size-target-mobile) items-center gap-2 sm:min-h-(--size-target-desktop)\"\n        >\n          {/* relative overlay: the box (peer) + the indicator glyphs it drives.\n              The glyphs are siblings AFTER the input so peer-* can reach them. */}\n          <span className=\"relative inline-flex shrink-0\">\n            <input\n              ref={innerRef}\n              id={baseId}\n              type=\"checkbox\"\n              disabled={disabled}\n              aria-checked={isMixed ? \"mixed\" : undefined}\n              aria-invalid={error ? \"true\" : undefined}\n              aria-describedby={describedBy}\n              onChange={handleChange}\n              className={cn(checkboxBoxVariants({ size }), className)}\n              {...props}\n            />\n            {/* check: only when :checked; never rendered in the mixed state so the\n                bar wins for an indeterminate parent (check and bar stay exclusive) */}\n            {!isMixed ? (\n              <svg\n                data-testid=\"checkbox-check\"\n                aria-hidden=\"true\"\n                viewBox=\"0 0 16 16\"\n                className={checkboxCheckGlyphVariants({ disabled })}\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2.5\"\n              >\n                <path d=\"M3.5 8.5l3 3 6-6.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              </svg>\n            ) : null}\n            {/* horizontal bar: the single indeterminate mark, only when :indeterminate */}\n            <svg\n              data-testid=\"checkbox-bar\"\n              aria-hidden=\"true\"\n              viewBox=\"0 0 16 16\"\n              className={checkboxBarGlyphVariants({ disabled })}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2.5\"\n            >\n              <path d=\"M4 8h8\" strokeLinecap=\"round\" />\n            </svg>\n          </span>\n          <label htmlFor={baseId} className={checkboxLabelVariants({ disabled })}>\n            {label}\n          </label>\n        </div>\n        {description ? (\n          <p id={descId} className=\"text-caption text-text-secondary\">\n            {description}\n          </p>\n        ) : null}\n        {error ? (\n          <p id={errorId} className=\"text-caption text-status-critical-fg\">\n            {error}\n          </p>\n        ) : null}\n      </div>\n    );\n  },\n);\n"],"mappings":";AAsFU,SACE,KADF;AApFV,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAsBP,IAAI,QAAQ;AAEL,MAAM,WAAW,MAAM;AAAA,EAC5B,SAASA,UACP;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,cACA;AACA,UAAM,UAAU,MAAM,MAAM;AAC5B,UAAM,SAAS,MAAM,YAAY,OAAO,IAAK,SAAS,CAAE;AACxD,UAAM,SAAS,cAAc,GAAG,MAAM,iBAAiB;AACvD,UAAM,UAAU,QAAQ,GAAG,MAAM,WAAW;AAG5C,UAAM,UAAU,YAAY,YAAY;AAExC,UAAM,WAAW,MAAM,OAAyB,IAAI;AAEpD,UAAM,oBAAoB,cAAc,MAAM,SAAS,OAA2B;AAIlF,UAAM,UAAU,MAAM;AACpB,UAAI,SAAS,QAAS,UAAS,QAAQ,gBAAgB;AAAA,IACzD,GAAG,CAAC,OAAO,CAAC;AAEZ,UAAM,cACJ,CAAC,QAAQ,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAEjD,UAAM,eAAe,CAAC,MAA2C;AAE/D,wBAAkB,EAAE,cAAc,OAAO;AAAA,IAC3C;AAEA,WACE,qBAAC,SAAI,WAAU,uBAEb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ,WAAU;AAAA,UAIV;AAAA,iCAAC,UAAK,WAAU,iCACd;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,kBACL,IAAI;AAAA,kBACJ,MAAK;AAAA,kBACL;AAAA,kBACA,gBAAc,UAAU,UAAU;AAAA,kBAClC,gBAAc,QAAQ,SAAS;AAAA,kBAC/B,oBAAkB;AAAA,kBAClB,UAAU;AAAA,kBACV,WAAW,GAAG,oBAAoB,EAAE,KAAK,CAAC,GAAG,SAAS;AAAA,kBACrD,GAAG;AAAA;AAAA,cACN;AAAA,cAGC,CAAC,UACA;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,eAAY;AAAA,kBACZ,SAAQ;AAAA,kBACR,WAAW,2BAA2B,EAAE,SAAS,CAAC;AAAA,kBAClD,MAAK;AAAA,kBACL,QAAO;AAAA,kBACP,aAAY;AAAA,kBAEZ,8BAAC,UAAK,GAAE,sBAAqB,eAAc,SAAQ,gBAAe,SAAQ;AAAA;AAAA,cAC5E,IACE;AAAA,cAEJ;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,eAAY;AAAA,kBACZ,SAAQ;AAAA,kBACR,WAAW,yBAAyB,EAAE,SAAS,CAAC;AAAA,kBAChD,MAAK;AAAA,kBACL,QAAO;AAAA,kBACP,aAAY;AAAA,kBAEZ,8BAAC,UAAK,GAAE,UAAS,eAAc,SAAQ;AAAA;AAAA,cACzC;AAAA,eACF;AAAA,YACA,oBAAC,WAAM,SAAS,QAAQ,WAAW,sBAAsB,EAAE,SAAS,CAAC,GAClE,iBACH;AAAA;AAAA;AAAA,MACF;AAAA,MACC,cACC,oBAAC,OAAE,IAAI,QAAQ,WAAU,oCACtB,uBACH,IACE;AAAA,MACH,QACC,oBAAC,OAAE,IAAI,SAAS,WAAU,wCACvB,iBACH,IACE;AAAA,OACN;AAAA,EAEJ;AACF;","names":["Checkbox"]}
+{"version":3,"sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  checkboxBoxVariants,\n  checkboxLabelVariants,\n  checkboxCheckGlyphVariants,\n  checkboxBarGlyphVariants,\n  type CheckboxBoxVariantProps,\n} from \"./checkbox.variants\";\n\ntype NativeInputProps = Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  \"size\" | \"type\" | \"onChange\"\n>;\n\nexport interface CheckboxProps extends NativeInputProps, CheckboxBoxVariantProps {\n  /** The visible text naming the choice. Becomes the accessible name via <label for>. */\n  label: string;\n  /** Secondary helper text beneath the label. Linked via aria-describedby. */\n  description?: string;\n  /** Validation message; sets aria-invalid and the critical-bordered error state. */\n  error?: string;\n  /** standalone = one value; parent = summarizes children (the only place mixed rests). */\n  variant?: \"standalone\" | \"parent\";\n  /** Mixed/“some children” state. Honored ONLY on variant=\"parent\"; ignored on standalone. */\n  indeterminate?: boolean;\n  /** Fired with the resolved boolean; a parent toggle resolves mixed → checked/unchecked. */\n  onCheckedChange?: (checked: boolean) => void;\n}\n\nlet idSeq = 0;\n\nexport const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(\n  function Checkbox(\n    {\n      className,\n      label,\n      description,\n      error,\n      size,\n      variant = \"standalone\",\n      indeterminate = false,\n      disabled = false,\n      id,\n      onCheckedChange,\n      ...props\n    },\n    forwardedRef,\n  ) {\n    const reactId = React.useId();\n    const baseId = id ?? `checkbox-${reactId}-${(idSeq += 1)}`;\n    const descId = description ? `${baseId}-description` : undefined;\n    const errorId = error ? `${baseId}-error` : undefined;\n\n    // indeterminate is a parent-only RESTING state — standalone never rests on mixed.\n    const isMixed = variant === \"parent\" && indeterminate;\n\n    const innerRef = React.useRef<HTMLInputElement>(null);\n    // bridge the forwarded ref to our inner ref (we need direct DOM access for indeterminate)\n    React.useImperativeHandle(forwardedRef, () => innerRef.current as HTMLInputElement);\n\n    // indeterminate is a DOM property, not an attribute — write it through the ref.\n    // This effect is why the component is a client component ('use client' above).\n    React.useEffect(() => {\n      if (innerRef.current) innerRef.current.indeterminate = isMixed;\n    }, [isMixed]);\n\n    const describedBy =\n      [descId, errorId].filter(Boolean).join(\" \") || undefined;\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      // a direct parent toggle resolves mixed → a single state; never rests on mixed\n      onCheckedChange?.(e.currentTarget.checked);\n    };\n\n    return (\n      <div className=\"flex flex-col gap-1\">\n        {/* control row: the box + label share one hit area no smaller than the target token */}\n        <div\n          data-testid=\"checkbox-control\"\n          className=\"flex min-h-(--size-target-mobile) items-center gap-2 sm:min-h-(--size-target-desktop)\"\n        >\n          {/* relative overlay: the box (peer) + the indicator glyphs it drives.\n              The glyphs are siblings AFTER the input so peer-* can reach them. */}\n          <span className=\"relative inline-flex shrink-0\">\n            <input\n              ref={innerRef}\n              id={baseId}\n              type=\"checkbox\"\n              disabled={disabled}\n              aria-checked={isMixed ? \"mixed\" : undefined}\n              aria-invalid={error ? \"true\" : undefined}\n              aria-describedby={describedBy}\n              onChange={handleChange}\n              className={cn(checkboxBoxVariants({ size }), className)}\n              {...props}\n            />\n            {/* check: only when :checked; never rendered in the mixed state so the\n                bar wins for an indeterminate parent (check and bar stay exclusive) */}\n            {!isMixed ? (\n              <svg\n                data-testid=\"checkbox-check\"\n                aria-hidden=\"true\"\n                viewBox=\"0 0 16 16\"\n                className={checkboxCheckGlyphVariants({ disabled })}\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2.5\"\n              >\n                <path d=\"M3.5 8.5l3 3 6-6.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n              </svg>\n            ) : null}\n            {/* horizontal bar: the single indeterminate mark, only when :indeterminate */}\n            <svg\n              data-testid=\"checkbox-bar\"\n              aria-hidden=\"true\"\n              viewBox=\"0 0 16 16\"\n              className={checkboxBarGlyphVariants({ disabled })}\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2.5\"\n            >\n              <path d=\"M4 8h8\" strokeLinecap=\"round\" />\n            </svg>\n          </span>\n          <label htmlFor={baseId} className={checkboxLabelVariants({ disabled })}>\n            {label}\n          </label>\n        </div>\n        {description ? (\n          <p id={descId} className=\"text-caption text-text-secondary\">\n            {description}\n          </p>\n        ) : null}\n        {error ? (\n          <p id={errorId} className=\"text-caption text-status-critical-on-surface\">\n            {error}\n          </p>\n        ) : null}\n      </div>\n    );\n  },\n);\n"],"mappings":";AAsFU,SACE,KADF;AApFV,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAsBP,IAAI,QAAQ;AAEL,MAAM,WAAW,MAAM;AAAA,EAC5B,SAASA,UACP;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,gBAAgB;AAAA,IAChB,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,cACA;AACA,UAAM,UAAU,MAAM,MAAM;AAC5B,UAAM,SAAS,MAAM,YAAY,OAAO,IAAK,SAAS,CAAE;AACxD,UAAM,SAAS,cAAc,GAAG,MAAM,iBAAiB;AACvD,UAAM,UAAU,QAAQ,GAAG,MAAM,WAAW;AAG5C,UAAM,UAAU,YAAY,YAAY;AAExC,UAAM,WAAW,MAAM,OAAyB,IAAI;AAEpD,UAAM,oBAAoB,cAAc,MAAM,SAAS,OAA2B;AAIlF,UAAM,UAAU,MAAM;AACpB,UAAI,SAAS,QAAS,UAAS,QAAQ,gBAAgB;AAAA,IACzD,GAAG,CAAC,OAAO,CAAC;AAEZ,UAAM,cACJ,CAAC,QAAQ,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAEjD,UAAM,eAAe,CAAC,MAA2C;AAE/D,wBAAkB,EAAE,cAAc,OAAO;AAAA,IAC3C;AAEA,WACE,qBAAC,SAAI,WAAU,uBAEb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,eAAY;AAAA,UACZ,WAAU;AAAA,UAIV;AAAA,iCAAC,UAAK,WAAU,iCACd;AAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,kBACL,IAAI;AAAA,kBACJ,MAAK;AAAA,kBACL;AAAA,kBACA,gBAAc,UAAU,UAAU;AAAA,kBAClC,gBAAc,QAAQ,SAAS;AAAA,kBAC/B,oBAAkB;AAAA,kBAClB,UAAU;AAAA,kBACV,WAAW,GAAG,oBAAoB,EAAE,KAAK,CAAC,GAAG,SAAS;AAAA,kBACrD,GAAG;AAAA;AAAA,cACN;AAAA,cAGC,CAAC,UACA;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,eAAY;AAAA,kBACZ,SAAQ;AAAA,kBACR,WAAW,2BAA2B,EAAE,SAAS,CAAC;AAAA,kBAClD,MAAK;AAAA,kBACL,QAAO;AAAA,kBACP,aAAY;AAAA,kBAEZ,8BAAC,UAAK,GAAE,sBAAqB,eAAc,SAAQ,gBAAe,SAAQ;AAAA;AAAA,cAC5E,IACE;AAAA,cAEJ;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAY;AAAA,kBACZ,eAAY;AAAA,kBACZ,SAAQ;AAAA,kBACR,WAAW,yBAAyB,EAAE,SAAS,CAAC;AAAA,kBAChD,MAAK;AAAA,kBACL,QAAO;AAAA,kBACP,aAAY;AAAA,kBAEZ,8BAAC,UAAK,GAAE,UAAS,eAAc,SAAQ;AAAA;AAAA,cACzC;AAAA,eACF;AAAA,YACA,oBAAC,WAAM,SAAS,QAAQ,WAAW,sBAAsB,EAAE,SAAS,CAAC,GAClE,iBACH;AAAA;AAAA;AAAA,MACF;AAAA,MACC,cACC,oBAAC,OAAE,IAAI,QAAQ,WAAU,oCACtB,uBACH,IACE;AAAA,MACH,QACC,oBAAC,OAAE,IAAI,SAAS,WAAU,gDACvB,iBACH,IACE;AAAA,OACN;AAAA,EAEJ;AACF;","names":["Checkbox"]}

package/dist/components/consent-toggle/consent-toggle.variants.d.ts

@@ -5,6 +5,6 @@ export declare const consentToggleVariants: (props?: ({
 export declare const consentToggleRecipientClass = "text-body text-text-secondary";
 export declare const consentToggleDetailClass = "text-body text-text-secondary";
 export declare const consentToggleEvidenceClass = "flex items-center text-body";
-export declare const consentToggleFailureClass = "text-body text-status-critical-fg";
+export declare const consentToggleFailureClass = "text-body text-status-critical-on-surface";
 export type ConsentToggleVariantProps = VariantProps<typeof consentToggleVariants>;
 //# sourceMappingURL=consent-toggle.variants.d.ts.map

package/dist/components/consent-toggle/consent-toggle.variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"consent-toggle.variants.d.ts","sourceRoot":"","sources":["../../../src/components/consent-toggle/consent-toggle.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAgClE,eAAO,MAAM,qBAAqB;;8EAehC,CAAC;AAMH,eAAO,MAAM,2BAA2B,kCAAkC,CAAC;AAK3E,eAAO,MAAM,wBAAwB,kCAAkC,CAAC;AAOxE,eAAO,MAAM,0BAA0B,gCAAgC,CAAC;AAOxE,eAAO,MAAM,yBAAyB,sCAAsC,CAAC;AAE7E,MAAM,MAAM,yBAAyB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}
+{"version":3,"file":"consent-toggle.variants.d.ts","sourceRoot":"","sources":["../../../src/components/consent-toggle/consent-toggle.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAgClE,eAAO,MAAM,qBAAqB;;8EAehC,CAAC;AAMH,eAAO,MAAM,2BAA2B,kCAAkC,CAAC;AAK3E,eAAO,MAAM,wBAAwB,kCAAkC,CAAC;AAOxE,eAAO,MAAM,0BAA0B,gCAAgC,CAAC;AAOxE,eAAO,MAAM,yBAAyB,8CAA8C,CAAC;AAErF,MAAM,MAAM,yBAAyB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC"}

package/dist/components/consent-toggle/consent-toggle.variants.js

@@ -18,7 +18,7 @@ const consentToggleVariants = cva("flex flex-col gap-(--space-2)", {
 const consentToggleRecipientClass = "text-body text-text-secondary";
 const consentToggleDetailClass = "text-body text-text-secondary";
 const consentToggleEvidenceClass = "flex items-center text-body";
-const consentToggleFailureClass = "text-body text-status-critical-fg";
+const consentToggleFailureClass = "text-body text-status-critical-on-surface";
 export {
   consentToggleDetailClass,
   consentToggleEvidenceClass,

package/dist/components/consent-toggle/consent-toggle.variants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/consent-toggle/consent-toggle.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// ConsentToggle is the explicit, revocable affordance by which an actor grants or\n// withdraws permission for one specific use of their data or identity (spec §1). It\n// COMPOSES the committed Switch as its control — the granted axis maps to the Switch's\n// `on` — and adds the scope, the named recipient, the optional detail, the optional\n// evidence affordance, and the failure message AROUND it. So the track / thumb / focus\n// ring / target-size floor / slide-and-tint motion are bound ONCE in switch.variants.ts\n// and are NOT re-bound here; this file binds only the surrounding text + layout roles.\n//\n// brand != state (spec §4/§5/§8). The granted track takes the primary ACTION accent\n// (the Switch's `aria-checked:bg-action-primary-bg`), NEVER --color-status-verified-*:\n// verified green is the in-product verified status, never a consent affordance, and a\n// grant reports permission, not a verification result. ConsentToggle therefore binds\n// NOTHING from the status tier on its granted state — the one status color it ever\n// reaches for is --color-status-critical-fg, and ONLY on the failure message (a stated\n// failed grant/withdrawal), never on the granted/checked state. This component-scoped\n// invariant (no status color on the grant; verified green never a consent affordance) is\n// pinned as a test in consent-toggle.test.tsx — the action accent IS legitimate here, so\n// the negative forbids only the STATUS tier, per the build-on-brand skill's scoping note.\n//\n// The motion is the Switch's FAST functional slide/tint on verdify easing, collapsing to\n// the instant endpoint under reduced motion — never the 350ms VerifiedBadge-only theatre\n// duration: a consent grant is not a verification (G-U3).\n\n// The root layout (spec §2): a column stacking the control row, the optional evidence\n// affordance, and the optional failure message at the --space-2 gap. The `variant` axis\n// (spec §3) is a form of how the consent is PRESENTED — a plain grant, a grant with the\n// evidence affordance, or a grant scoped to an AI agent — never a level of color or alarm,\n// so NONE of the variants recolors anything: the granted accent and every text role are\n// identical across all three. Non-interactive container: the focus ring, the keyboard\n// model, and the target-size floor all live on the composed Switch control, not here.\nexport const consentToggleVariants = cva(\"flex flex-col gap-(--space-2)\", {\n  variants: {\n    // STRUCTURAL axis = spec §3. Display/composition forms, never alarm levels.\n    variant: {\n      // grant (default): a single permission the actor turns on to allow, off to withhold.\n      grant: \"\",\n      // with-evidence: adds the evidence affordance so the actor can review the recorded\n      // grant — what, to whom, when. Use wherever the grant is consequential.\n      \"with-evidence\": \"\",\n      // agent-scoped: the recipient is an AI-agent actor, named AS an agent (AgentBadge),\n      // so the actor knows they are granting to an agent, not a human.\n      \"agent-scoped\": \"\",\n    },\n  },\n  defaultVariants: { variant: \"grant\" },\n});\n\n// The recipient + detail block (spec §2/§5): who receives the data and the optional bound\n// of the grant, in the SECONDARY text color at the --text-body type role. It is composed\n// into the control's accessible description (aria-describedby), so a screen reader\n// announces \"to whom\" alongside the scope — never a bare on/off with the meaning missing.\nexport const consentToggleRecipientClass = \"text-body text-text-secondary\";\n\n// The optional detail line (spec §2/§5): one statement clarifying the bound or duration of\n// the grant (for example, what stops when consent is withdrawn), under the recipient, in\n// the secondary text color at the body role.\nexport const consentToggleDetailClass = \"text-body text-text-secondary\";\n\n// The optional evidence affordance row (spec §2/§3): a slot holding the caller's link or\n// Button to the PROOF of the grant — what was consented to, to whom, and when — so the act\n// is reviewable later. It is the caller's own focus stop with its own keyboard model and\n// focus ring (the evidence control is not folded into the busy switch); this row only\n// positions it. Surfaces a proof of the consent event, not a stored document.\nexport const consentToggleEvidenceClass = \"flex items-center text-body\";\n\n// The failure message (spec §4/§5/§7): shown next to the control on a FAILED grant or\n// withdrawal, naming what failed and what to do next without blaming the reader, in the\n// CRITICAL status foreground at the --text-body role. It is the ONLY status color the\n// component binds, and only here — never on the granted state (brand != state). It is\n// announced through an assertive live region (role=alert), set in the tsx, per 4.1.3.\nexport const consentToggleFailureClass = \"text-body text-status-critical-fg\";\n\nexport type ConsentToggleVariantProps = VariantProps<typeof consentToggleVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAgChC,MAAM,wBAAwB,IAAI,iCAAiC;AAAA,EACxE,UAAU;AAAA;AAAA,IAER,SAAS;AAAA;AAAA,MAEP,OAAO;AAAA;AAAA;AAAA,MAGP,iBAAiB;AAAA;AAAA;AAAA,MAGjB,gBAAgB;AAAA,IAClB;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,QAAQ;AACtC,CAAC;AAMM,MAAM,8BAA8B;AAKpC,MAAM,2BAA2B;AAOjC,MAAM,6BAA6B;AAOnC,MAAM,4BAA4B;","names":[]}
+{"version":3,"sources":["../../../src/components/consent-toggle/consent-toggle.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// ConsentToggle is the explicit, revocable affordance by which an actor grants or\n// withdraws permission for one specific use of their data or identity (spec §1). It\n// COMPOSES the committed Switch as its control — the granted axis maps to the Switch's\n// `on` — and adds the scope, the named recipient, the optional detail, the optional\n// evidence affordance, and the failure message AROUND it. So the track / thumb / focus\n// ring / target-size floor / slide-and-tint motion are bound ONCE in switch.variants.ts\n// and are NOT re-bound here; this file binds only the surrounding text + layout roles.\n//\n// brand != state (spec §4/§5/§8). The granted track takes the primary ACTION accent\n// (the Switch's `aria-checked:bg-action-primary-bg`), NEVER --color-status-verified-*:\n// verified green is the in-product verified status, never a consent affordance, and a\n// grant reports permission, not a verification result. ConsentToggle therefore binds\n// NOTHING from the status tier on its granted state — the one status color it ever\n// reaches for is --color-status-critical-fg, and ONLY on the failure message (a stated\n// failed grant/withdrawal), never on the granted/checked state. This component-scoped\n// invariant (no status color on the grant; verified green never a consent affordance) is\n// pinned as a test in consent-toggle.test.tsx — the action accent IS legitimate here, so\n// the negative forbids only the STATUS tier, per the build-on-brand skill's scoping note.\n//\n// The motion is the Switch's FAST functional slide/tint on verdify easing, collapsing to\n// the instant endpoint under reduced motion — never the 350ms VerifiedBadge-only theatre\n// duration: a consent grant is not a verification (G-U3).\n\n// The root layout (spec §2): a column stacking the control row, the optional evidence\n// affordance, and the optional failure message at the --space-2 gap. The `variant` axis\n// (spec §3) is a form of how the consent is PRESENTED — a plain grant, a grant with the\n// evidence affordance, or a grant scoped to an AI agent — never a level of color or alarm,\n// so NONE of the variants recolors anything: the granted accent and every text role are\n// identical across all three. Non-interactive container: the focus ring, the keyboard\n// model, and the target-size floor all live on the composed Switch control, not here.\nexport const consentToggleVariants = cva(\"flex flex-col gap-(--space-2)\", {\n  variants: {\n    // STRUCTURAL axis = spec §3. Display/composition forms, never alarm levels.\n    variant: {\n      // grant (default): a single permission the actor turns on to allow, off to withhold.\n      grant: \"\",\n      // with-evidence: adds the evidence affordance so the actor can review the recorded\n      // grant — what, to whom, when. Use wherever the grant is consequential.\n      \"with-evidence\": \"\",\n      // agent-scoped: the recipient is an AI-agent actor, named AS an agent (AgentBadge),\n      // so the actor knows they are granting to an agent, not a human.\n      \"agent-scoped\": \"\",\n    },\n  },\n  defaultVariants: { variant: \"grant\" },\n});\n\n// The recipient + detail block (spec §2/§5): who receives the data and the optional bound\n// of the grant, in the SECONDARY text color at the --text-body type role. It is composed\n// into the control's accessible description (aria-describedby), so a screen reader\n// announces \"to whom\" alongside the scope — never a bare on/off with the meaning missing.\nexport const consentToggleRecipientClass = \"text-body text-text-secondary\";\n\n// The optional detail line (spec §2/§5): one statement clarifying the bound or duration of\n// the grant (for example, what stops when consent is withdrawn), under the recipient, in\n// the secondary text color at the body role.\nexport const consentToggleDetailClass = \"text-body text-text-secondary\";\n\n// The optional evidence affordance row (spec §2/§3): a slot holding the caller's link or\n// Button to the PROOF of the grant — what was consented to, to whom, and when — so the act\n// is reviewable later. It is the caller's own focus stop with its own keyboard model and\n// focus ring (the evidence control is not folded into the busy switch); this row only\n// positions it. Surfaces a proof of the consent event, not a stored document.\nexport const consentToggleEvidenceClass = \"flex items-center text-body\";\n\n// The failure message (spec §4/§5/§7): shown next to the control on a FAILED grant or\n// withdrawal, naming what failed and what to do next without blaming the reader, in the\n// CRITICAL status foreground at the --text-body role. It is the ONLY status color the\n// component binds, and only here — never on the granted state (brand != state). It is\n// announced through an assertive live region (role=alert), set in the tsx, per 4.1.3.\nexport const consentToggleFailureClass = \"text-body text-status-critical-on-surface\";\n\nexport type ConsentToggleVariantProps = VariantProps<typeof consentToggleVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAgChC,MAAM,wBAAwB,IAAI,iCAAiC;AAAA,EACxE,UAAU;AAAA;AAAA,IAER,SAAS;AAAA;AAAA,MAEP,OAAO;AAAA;AAAA;AAAA,MAGP,iBAAiB;AAAA;AAAA;AAAA,MAGjB,gBAAgB;AAAA,IAClB;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,QAAQ;AACtC,CAAC;AAMM,MAAM,8BAA8B;AAKpC,MAAM,2BAA2B;AAOjC,MAAM,6BAA6B;AAOnC,MAAM,4BAA4B;","names":[]}

package/dist/components/credential-card/credential-card.variants.d.ts

@@ -10,6 +10,6 @@ export declare const credentialCardStatusClass = "flex shrink-0 flex-wrap items-
 export declare const credentialCardMetaClass = "text-caption text-text-muted";
 export declare const credentialCardControlsClass = "flex shrink-0 items-center gap-(--space-2)";
 export declare const credentialCardReasonClass = "text-caption text-text-muted";
-export declare const credentialCardErrorClass = "text-caption text-status-critical-fg";
+export declare const credentialCardErrorClass = "text-caption text-status-critical-on-surface";
 export type CredentialCardVariantProps = VariantProps<typeof credentialCardVariants>;
 //# sourceMappingURL=credential-card.variants.d.ts.map

package/dist/components/credential-card/credential-card.variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"credential-card.variants.d.ts","sourceRoot":"","sources":["../../../src/components/credential-card/credential-card.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAsClE,eAAO,MAAM,sBAAsB;;8EAwBlC,CAAC;AAOF,eAAO,MAAM,uBAAuB,+GAC0E,CAAC;AAK/G,eAAO,MAAM,uBAAuB,iDAAiD,CAAC;AAKtF,eAAO,MAAM,wBAAwB,iCAAiC,CAAC;AAOvE,eAAO,MAAM,6BAA6B,2DACgB,CAAC;AAO3D,eAAO,MAAM,yBAAyB,yDAAyD,CAAC;AAIhG,eAAO,MAAM,uBAAuB,iCAAiC,CAAC;AAOtE,eAAO,MAAM,2BAA2B,+CAA+C,CAAC;AAMxF,eAAO,MAAM,yBAAyB,iCAAiC,CAAC;AAQxE,eAAO,MAAM,wBAAwB,yCAAyC,CAAC;AAE/E,MAAM,MAAM,0BAA0B,GAAG,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC"}
+{"version":3,"file":"credential-card.variants.d.ts","sourceRoot":"","sources":["../../../src/components/credential-card/credential-card.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAsClE,eAAO,MAAM,sBAAsB;;8EAwBlC,CAAC;AAOF,eAAO,MAAM,uBAAuB,+GAC0E,CAAC;AAK/G,eAAO,MAAM,uBAAuB,iDAAiD,CAAC;AAKtF,eAAO,MAAM,wBAAwB,iCAAiC,CAAC;AAOvE,eAAO,MAAM,6BAA6B,2DACgB,CAAC;AAO3D,eAAO,MAAM,yBAAyB,yDAAyD,CAAC;AAIhG,eAAO,MAAM,uBAAuB,iCAAiC,CAAC;AAOtE,eAAO,MAAM,2BAA2B,+CAA+C,CAAC;AAMxF,eAAO,MAAM,yBAAyB,iCAAiC,CAAC;AAQxE,eAAO,MAAM,wBAAwB,iDAAiD,CAAC;AAEvF,MAAM,MAAM,0BAA0B,GAAG,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC"}

package/dist/components/credential-card/credential-card.variants.js

@@ -32,7 +32,7 @@ const credentialCardStatusClass = "flex shrink-0 flex-wrap items-center gap-(--s
 const credentialCardMetaClass = "text-caption text-text-muted";
 const credentialCardControlsClass = "flex shrink-0 items-center gap-(--space-2)";
 const credentialCardReasonClass = "text-caption text-text-muted";
-const credentialCardErrorClass = "text-caption text-status-critical-fg";
+const credentialCardErrorClass = "text-caption text-status-critical-on-surface";
 export {
   credentialCardBodyClass,
   credentialCardControlsClass,

package/dist/components/credential-card/credential-card.variants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/credential-card/credential-card.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// CredentialCard is one ROW in the list of credentials ATTACHED to an identity — a single way\n// to reach that identity (an email, phone, passkey, wallet, or enterprise SSO connection). It\n// encodes the platform's first invariant — identity is not credentials — in its UI contract: a\n// card is a LINK to an identity, never the identity itself, so it never reads as \"you\" and never\n// stands in for the account (spec §1/§8).\n//\n// It COMPOSES the committed primitives rather than reinventing them — a Card-like neutral surface\n// (the surface-* roles, bound here), the destructive Button for `remove`, the secondary Button\n// for an optional `action`, the Badge for a `status`, the Checkbox for `selectable`, and the\n// Button's in-place loading spinner for a resolving removal. So the focus ring, the target-size\n// floor, the keyboard model, and the control motion all come from those proven primitives; this\n// file binds ONLY the surrounding neutral surface + text-role + layout classes.\n//\n// brand != state (spec §3/§5/§8). The card SURFACE consumes NO action or status token of its own\n// — neutrals carry the card. The brand violet (Sovereign Violet, the action accent) is never a\n// card fill, never the icon, never the identifier, and never marks a credential as special. The\n// verified-status green is reserved for the `verified` status Badge and is never spent on the\n// card surface, the icon, or the identifier — coloring the card green would imply the IDENTITY is\n// verified, which is the one misreport this molecule forbids. The card therefore binds nothing\n// from the action tier and nothing from the status tier; those colors live on the controls and\n// Badges it holds (asserted positively in their own primitives' tests), never on this surface.\n//\n// The motion the card adds is none of its own: control hover/press uses the composed primitive's\n// fast functional transition on verdify easing, collapsing to the instant endpoint under reduced\n// motion. A resolving removal is a plain wait on the Button's ambient spinner — never the 350ms\n// VerifiedBadge-only theatre duration: a removal is not a verification (G-U3).\n\n// The card container (spec §2/§4/§5): a NEUTRAL raised surface, the same Card-static surface the\n// committed Card binds, but it is a LIST ROW (`<li role=\"listitem\">`, set in the tsx) so it sits\n// in the credential list's `<ul role=\"list\">` (spec §7). It is a static container, NOT a single\n// clickable control — the whole row does not map to one action — so it carries no focus ring and\n// no target-size floor of its own (those live on its controls, spec §4/§5). The `kind` axis is\n// which credential the card represents; it is carried by the `icon` + `label` TEXT, never by\n// color, so NONE of the kinds recolors the surface — every kind is the identical neutral surface\n// (spec §3). `selectable` composes with any kind and changes layout (a leading Checkbox), not\n// color, so it is not a color variant here.\nexport const credentialCardVariants = cva(\n  [\n    // raised neutral surface, rounded container, resting elevation, internal padding from --space-4\n    \"relative flex items-start gap-(--space-2) rounded-lg border bg-surface-raised shadow-sm p-(--space-4)\",\n    // the default container hairline (spec §5)\n    \"border-surface-border\",\n    // logical-property text alignment so the row mirrors under dir=rtl (G-U6); list rows carry\n    // no bullet marker\n    \"text-start text-text-primary list-none\",\n  ],\n  {\n    variants: {\n      // STRUCTURAL axis = spec §3 (the credential KIND the card represents). The kind is carried\n      // by the icon + label text, never color, so every kind is the SAME neutral surface.\n      kind: {\n        email: \"\",\n        phone: \"\",\n        passkey: \"\",\n        wallet: \"\",\n        \"enterprise-sso\": \"\",\n      },\n    },\n    defaultVariants: { kind: \"email\" },\n  },\n);\n\n// The kind icon (spec §2/§5/§7): one small glyph for the credential kind at the md icon role. It\n// reinforces the kind shown in the label and is decorative (aria-hidden, set in the tsx) — the\n// label text still carries the kind if the icon is dropped, so the kind never rests on the icon\n// or color alone. Its fill is the SECONDARY text role (a neutral role), never a status color and\n// never the brand (spec §2/§3).\nexport const credentialCardIconClass =\n  \"inline-flex h-(--size-icon-md) w-(--size-icon-md) shrink-0 items-center justify-center text-text-secondary\";\n\n// The label + identifier block (spec §2): the human-readable kind name above the value that\n// identifies this specific credential. Takes the remaining inline space between the icon and the\n// trailing status/controls; stacks the two lines at the --space-1 gap.\nexport const credentialCardBodyClass = \"flex min-w-0 flex-1 flex-col gap-(--space-1)\";\n\n// The label (spec §2/§5): the human-readable name of the credential KIND, a statement in\n// sentence case (for example \"Email\", \"Passkey\", \"Wallet\"), in the label type role + the PRIMARY\n// text color. The label says what kind of link this is, not who the identity is.\nexport const credentialCardLabelClass = \"text-label text-text-primary\";\n\n// The identifier (spec §2/§5/G-U6): the value that identifies this specific credential — the\n// email, the masked phone, the passkey device name, the truncated wallet address, or the SSO\n// provider + domain. It renders in the MONOSPACE type role (never the UI font for credential\n// strings) in the SECONDARY text color, isolated left-to-right so addresses, hashes, and wallet\n// strings stay readable even inside RTL text, and truncates rather than wrapping.\nexport const credentialCardIdentifierClass =\n  \"text-mono text-text-secondary [direction:ltr] truncate\";\n\n// The status row (spec §2): at most one or two small Badges stating a fact about the credential —\n// `verified` (the green status, on the composed Badge's verified variant) or `primary` (the\n// credential you currently sign in with, a NEUTRAL Badge — \"primary\" is which credential is used,\n// a fact, not a status color and never the brand). The status describes the credential, not the\n// identity. This row only positions the composed Badges; their color lives in badge.variants.ts.\nexport const credentialCardStatusClass = \"flex shrink-0 flex-wrap items-center gap-(--space-1)\";\n\n// The meta line (spec §2/§5): quiet secondary text such as when the credential was added or last\n// used, in the MUTED text color at the caption role. De-emphasized; never an alarm color.\nexport const credentialCardMetaClass = \"text-caption text-text-muted\";\n\n// The trailing controls cluster (spec §2): the optional `action` beside the required `remove`,\n// aligned to the inline-end edge at the --space-2 gap. Keep the card to one primary action\n// (`remove`) plus at most one further low-emphasis control (restraint over volume). It only lays\n// the controls out; each control's treatment + focus ring + target-size floor live on the\n// composed Button.\nexport const credentialCardControlsClass = \"flex shrink-0 items-center gap-(--space-2)\";\n\n// The disabled-reason note (spec §4/§5/§7): when a control is disabled (for example `remove` on\n// the last sign-in credential), the reason is given as adjacent text in the MUTED text color at\n// the caption role — wired to the control as its accessible description (so the reason is heard,\n// not just seen), never communicated by graying alone.\nexport const credentialCardReasonClass = \"text-caption text-text-muted\";\n\n// The removal-failure message (spec §4/§7): on a FAILED removal the credential stays in the list\n// and the failure is stated plainly where it happened, in the CRITICAL status foreground at the\n// caption role — naming what failed and what to do next, never blaming the reader and never an\n// exclamation mark. It is the ONLY status color this component binds, and only here (never on the\n// card surface, brand != state). It is announced through an assertive live region (role=alert,\n// set in the tsx) per 4.1.3.\nexport const credentialCardErrorClass = \"text-caption text-status-critical-fg\";\n\nexport type CredentialCardVariantProps = VariantProps<typeof credentialCardVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAsChC,MAAM,yBAAyB;AAAA,EACpC;AAAA;AAAA,IAEE;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA,IAGA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA;AAAA,MAGR,MAAM;AAAA,QACJ,OAAO;AAAA,QACP,OAAO;AAAA,QACP,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,kBAAkB;AAAA,MACpB;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,MAAM,QAAQ;AAAA,EACnC;AACF;AAOO,MAAM,0BACX;AAKK,MAAM,0BAA0B;AAKhC,MAAM,2BAA2B;AAOjC,MAAM,gCACX;AAOK,MAAM,4BAA4B;AAIlC,MAAM,0BAA0B;AAOhC,MAAM,8BAA8B;AAMpC,MAAM,4BAA4B;AAQlC,MAAM,2BAA2B;","names":[]}
+{"version":3,"sources":["../../../src/components/credential-card/credential-card.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// CredentialCard is one ROW in the list of credentials ATTACHED to an identity — a single way\n// to reach that identity (an email, phone, passkey, wallet, or enterprise SSO connection). It\n// encodes the platform's first invariant — identity is not credentials — in its UI contract: a\n// card is a LINK to an identity, never the identity itself, so it never reads as \"you\" and never\n// stands in for the account (spec §1/§8).\n//\n// It COMPOSES the committed primitives rather than reinventing them — a Card-like neutral surface\n// (the surface-* roles, bound here), the destructive Button for `remove`, the secondary Button\n// for an optional `action`, the Badge for a `status`, the Checkbox for `selectable`, and the\n// Button's in-place loading spinner for a resolving removal. So the focus ring, the target-size\n// floor, the keyboard model, and the control motion all come from those proven primitives; this\n// file binds ONLY the surrounding neutral surface + text-role + layout classes.\n//\n// brand != state (spec §3/§5/§8). The card SURFACE consumes NO action or status token of its own\n// — neutrals carry the card. The brand violet (Sovereign Violet, the action accent) is never a\n// card fill, never the icon, never the identifier, and never marks a credential as special. The\n// verified-status green is reserved for the `verified` status Badge and is never spent on the\n// card surface, the icon, or the identifier — coloring the card green would imply the IDENTITY is\n// verified, which is the one misreport this molecule forbids. The card therefore binds nothing\n// from the action tier and nothing from the status tier; those colors live on the controls and\n// Badges it holds (asserted positively in their own primitives' tests), never on this surface.\n//\n// The motion the card adds is none of its own: control hover/press uses the composed primitive's\n// fast functional transition on verdify easing, collapsing to the instant endpoint under reduced\n// motion. A resolving removal is a plain wait on the Button's ambient spinner — never the 350ms\n// VerifiedBadge-only theatre duration: a removal is not a verification (G-U3).\n\n// The card container (spec §2/§4/§5): a NEUTRAL raised surface, the same Card-static surface the\n// committed Card binds, but it is a LIST ROW (`<li role=\"listitem\">`, set in the tsx) so it sits\n// in the credential list's `<ul role=\"list\">` (spec §7). It is a static container, NOT a single\n// clickable control — the whole row does not map to one action — so it carries no focus ring and\n// no target-size floor of its own (those live on its controls, spec §4/§5). The `kind` axis is\n// which credential the card represents; it is carried by the `icon` + `label` TEXT, never by\n// color, so NONE of the kinds recolors the surface — every kind is the identical neutral surface\n// (spec §3). `selectable` composes with any kind and changes layout (a leading Checkbox), not\n// color, so it is not a color variant here.\nexport const credentialCardVariants = cva(\n  [\n    // raised neutral surface, rounded container, resting elevation, internal padding from --space-4\n    \"relative flex items-start gap-(--space-2) rounded-lg border bg-surface-raised shadow-sm p-(--space-4)\",\n    // the default container hairline (spec §5)\n    \"border-surface-border\",\n    // logical-property text alignment so the row mirrors under dir=rtl (G-U6); list rows carry\n    // no bullet marker\n    \"text-start text-text-primary list-none\",\n  ],\n  {\n    variants: {\n      // STRUCTURAL axis = spec §3 (the credential KIND the card represents). The kind is carried\n      // by the icon + label text, never color, so every kind is the SAME neutral surface.\n      kind: {\n        email: \"\",\n        phone: \"\",\n        passkey: \"\",\n        wallet: \"\",\n        \"enterprise-sso\": \"\",\n      },\n    },\n    defaultVariants: { kind: \"email\" },\n  },\n);\n\n// The kind icon (spec §2/§5/§7): one small glyph for the credential kind at the md icon role. It\n// reinforces the kind shown in the label and is decorative (aria-hidden, set in the tsx) — the\n// label text still carries the kind if the icon is dropped, so the kind never rests on the icon\n// or color alone. Its fill is the SECONDARY text role (a neutral role), never a status color and\n// never the brand (spec §2/§3).\nexport const credentialCardIconClass =\n  \"inline-flex h-(--size-icon-md) w-(--size-icon-md) shrink-0 items-center justify-center text-text-secondary\";\n\n// The label + identifier block (spec §2): the human-readable kind name above the value that\n// identifies this specific credential. Takes the remaining inline space between the icon and the\n// trailing status/controls; stacks the two lines at the --space-1 gap.\nexport const credentialCardBodyClass = \"flex min-w-0 flex-1 flex-col gap-(--space-1)\";\n\n// The label (spec §2/§5): the human-readable name of the credential KIND, a statement in\n// sentence case (for example \"Email\", \"Passkey\", \"Wallet\"), in the label type role + the PRIMARY\n// text color. The label says what kind of link this is, not who the identity is.\nexport const credentialCardLabelClass = \"text-label text-text-primary\";\n\n// The identifier (spec §2/§5/G-U6): the value that identifies this specific credential — the\n// email, the masked phone, the passkey device name, the truncated wallet address, or the SSO\n// provider + domain. It renders in the MONOSPACE type role (never the UI font for credential\n// strings) in the SECONDARY text color, isolated left-to-right so addresses, hashes, and wallet\n// strings stay readable even inside RTL text, and truncates rather than wrapping.\nexport const credentialCardIdentifierClass =\n  \"text-mono text-text-secondary [direction:ltr] truncate\";\n\n// The status row (spec §2): at most one or two small Badges stating a fact about the credential —\n// `verified` (the green status, on the composed Badge's verified variant) or `primary` (the\n// credential you currently sign in with, a NEUTRAL Badge — \"primary\" is which credential is used,\n// a fact, not a status color and never the brand). The status describes the credential, not the\n// identity. This row only positions the composed Badges; their color lives in badge.variants.ts.\nexport const credentialCardStatusClass = \"flex shrink-0 flex-wrap items-center gap-(--space-1)\";\n\n// The meta line (spec §2/§5): quiet secondary text such as when the credential was added or last\n// used, in the MUTED text color at the caption role. De-emphasized; never an alarm color.\nexport const credentialCardMetaClass = \"text-caption text-text-muted\";\n\n// The trailing controls cluster (spec §2): the optional `action` beside the required `remove`,\n// aligned to the inline-end edge at the --space-2 gap. Keep the card to one primary action\n// (`remove`) plus at most one further low-emphasis control (restraint over volume). It only lays\n// the controls out; each control's treatment + focus ring + target-size floor live on the\n// composed Button.\nexport const credentialCardControlsClass = \"flex shrink-0 items-center gap-(--space-2)\";\n\n// The disabled-reason note (spec §4/§5/§7): when a control is disabled (for example `remove` on\n// the last sign-in credential), the reason is given as adjacent text in the MUTED text color at\n// the caption role — wired to the control as its accessible description (so the reason is heard,\n// not just seen), never communicated by graying alone.\nexport const credentialCardReasonClass = \"text-caption text-text-muted\";\n\n// The removal-failure message (spec §4/§7): on a FAILED removal the credential stays in the list\n// and the failure is stated plainly where it happened, in the CRITICAL status foreground at the\n// caption role — naming what failed and what to do next, never blaming the reader and never an\n// exclamation mark. It is the ONLY status color this component binds, and only here (never on the\n// card surface, brand != state). It is announced through an assertive live region (role=alert,\n// set in the tsx) per 4.1.3.\nexport const credentialCardErrorClass = \"text-caption text-status-critical-on-surface\";\n\nexport type CredentialCardVariantProps = VariantProps<typeof credentialCardVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAsChC,MAAM,yBAAyB;AAAA,EACpC;AAAA;AAAA,IAEE;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA,IAGA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA;AAAA,MAGR,MAAM;AAAA,QACJ,OAAO;AAAA,QACP,OAAO;AAAA,QACP,SAAS;AAAA,QACT,QAAQ;AAAA,QACR,kBAAkB;AAAA,MACpB;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,MAAM,QAAQ;AAAA,EACnC;AACF;AAOO,MAAM,0BACX;AAKK,MAAM,0BAA0B;AAKhC,MAAM,2BAA2B;AAOjC,MAAM,gCACX;AAOK,MAAM,4BAA4B;AAIlC,MAAM,0BAA0B;AAOhC,MAAM,8BAA8B;AAMpC,MAAM,4BAA4B;AAQlC,MAAM,2BAA2B;","names":[]}

package/dist/components/data-grid/data-grid.variants.js

@@ -38,10 +38,10 @@ const dataGridCellVariants = cva(
         none: "",
         // each status is the fg only, paired with the cell's text — the words carry the meaning,
         // the fg reinforces it (spec §3/§5); never a saturated -bg fill, never the brand
-        verified: "text-status-verified-fg",
-        signal: "text-status-signal-fg",
-        caution: "text-status-caution-fg",
-        critical: "text-status-critical-fg"
+        verified: "text-status-verified-on-surface",
+        signal: "text-status-signal-on-surface",
+        caution: "text-status-caution-on-surface",
+        critical: "text-status-critical-on-surface"
       }
     },
     defaultVariants: {

package/dist/components/data-grid/data-grid.variants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/data-grid/data-grid.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// A DataGrid shows many rows of structured records in a scrollable, operable, two-dimensional grid\n// you navigate one cell at a time (spec §1). It is a NEUTRAL data surface (spec §1/§3): neutrals\n// carry roughly 90% of it, and a dense grid earns its legibility from restraint. It paints from the\n// surface, text, and border roles; it reaches the --color-action-* tier only for the controls it\n// hosts (the sortable-header ghost accent, the row-hover affordance, the bulk-bar actions, and the\n// NEUTRAL selection accent) and the --color-status-* tier ONLY inside a cell that reports a real\n// state, paired with text — never as a row tint, a header fill, or the selection accent, and NEVER\n// a brand token as a status (brand != state, G-U2). Selection and the active cell are NEUTRAL action\n// states; a verified/trust state is a status cell (spec §3/§4/§8).\n\n// The scroll container <div role=\"grid\"> (spec §2 grid / §5). The neutral canvas surface and the\n// default cell text role, framed by the outer surface border at the md radius, with a fixed-height\n// scroll viewport (the caller sizes it via className — the token set has no grid-height scale, the\n// caller-owned-dimension precedent J). It NEVER wears the brand violet or a status fill (spec §3/§8)\n// — those belong to the controls and the status cells inside it. The active cell is kept scrolled\n// clear of the sticky header and pinned columns by scroll-margin (2.4.11 Focus Not Obscured).\nexport const dataGridVariants = cva([\n  \"relative w-full overflow-auto\",\n  \"bg-surface-canvas text-body text-text-primary\",\n  \"border border-surface-border rounded-(--radius-md)\",\n]);\n\nexport type DataGridVariantProps = VariantProps<typeof dataGridVariants>;\n\n// The inner table element. The grid is a real <table> for the row/column relationship (1.3.1),\n// border-collapsed so the gridlines read as single hairlines, and start-aligned so it mirrors under\n// dir=\"rtl\" (G-U6).\nexport const dataGridTableClass = \"w-full border-collapse text-start\";\n\n// The column-header row <tr> (spec §2 column-header-row / §4 Default / §5). It is STICKY — it stays\n// pinned to the top of the scroll viewport while rows scroll under it — on the raised neutral surface\n// with the sm elevation so it reads ABOVE the scrolling rows (spec §4/§5). z on the sticky layer so a\n// scrolled cell never paints over the pinned header. A header row NEVER wears a status or brand tint\n// (spec §3/§8).\nexport const dataGridHeaderRowClass =\n  \"sticky top-0 z-(--z-index-sticky) bg-surface-raised shadow-sm \" +\n  \"border-b border-border-default\";\n\n// The shared cell padding by density (spec §3 density / §5 --space-*). Density tightens the VERTICAL\n// padding only, ABOVE the a11y floor — any in-cell control keeps its own --size-target-* floor\n// (DEC-B: never a fixed height below the floor). Horizontal inline padding is constant.\nconst cellPaddingVariants = {\n  density: {\n    comfortable: \"py-(--space-3)\",\n    compact: \"py-(--space-1)\",\n  },\n} as const;\n\n// A data row <tr> (spec §4 Default/Hover/Selected). RESTING: no fill, on the canvas. HOVER: a\n// restrained GHOST fill to track the eye across a wide row — an AFFORDANCE, never the sole carrier of\n// meaning, and never a selection (nothing is selected until you act, spec §4 Hover). SELECTED\n// (aria-selected): the NEUTRAL secondary-action selection accent — selection is a neutral action\n// state, NOT verified green and NOT the brand violet (selecting a row never implies it is verified;\n// brand != state, G-U2, spec §4/§8). Selection is encoded by the row checkbox + aria-selected, so a\n// grayscale reader reads it from the checkbox, not the fill (1.4.1). Motion is the fast token\n// transition on the verdify easing, instant under reduced motion — never the 350ms VerifiedBadge-only\n// theatre (a row hover/select is a plain transition, G-U3).\nexport const dataGridRowClass =\n  \"border-b border-border-default \" +\n  \"hover:bg-action-ghost-bg-hover \" +\n  \"aria-selected:bg-action-secondary-bg-hover \" +\n  \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant)\";\n\n// A data cell <td role=\"gridcell\"> (spec §2 cell, §4/§5). It is ONE focusable unit in the roving\n// grid: exactly one cell is the active cell (tabindex=0) and shows the visible 2px focus ring; every\n// other cell is tabindex=-1. The ring is part of the base and is NEVER removed (spec §4 Focus /\n// 2.4.7). scroll-margin keeps the active cell clear of the sticky header + pinned columns before it\n// takes focus (spec §7, 2.4.11 Focus Not Obscured). Default: the primary text color at the body type\n// role. A `mono` cell takes the monospace role and is isolated LTR so an identifier/key/timestamp\n// stays readable inside an RTL layout (spec §3/§5, G-U6). A `secondary` cell is de-emphasized\n// auxiliary text. A `status` cell carries the status fg paired with the cell's words — the status\n// color lives in the CELL only, never the row or header (spec §3), and NEVER a brand token (brand !=\n// state, G-U2); status-*-bg is the one neutral raised surface, so meaning is carried by the fg + the\n// text, not a saturated fill.\nexport const dataGridCellVariants = cva(\n  [\n    \"px-(--space-3) align-middle text-start text-body text-text-primary\",\n    // the roving active cell's focus ring — always visible, never removed (2.4.7)\n    \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n    // keep the active cell clear of the sticky header + a pinned column before it takes focus (2.4.11)\n    \"scroll-mt-(--space-12) scroll-ms-(--space-12)\",\n  ],\n  {\n    variants: {\n      ...cellPaddingVariants,\n      mono: {\n        // identifier/key/timestamp: the monospace role, isolated LTR inside RTL text (G-U6)\n        true: \"text-mono [direction:ltr]\",\n        false: \"\",\n      },\n      secondary: {\n        // de-emphasized secondary cell text (spec §5 --color-text-secondary)\n        true: \"text-text-secondary\",\n        false: \"\",\n      },\n      status: {\n        none: \"\",\n        // each status is the fg only, paired with the cell's text — the words carry the meaning,\n        // the fg reinforces it (spec §3/§5); never a saturated -bg fill, never the brand\n        verified: \"text-status-verified-fg\",\n        signal: \"text-status-signal-fg\",\n        caution: \"text-status-caution-fg\",\n        critical: \"text-status-critical-fg\",\n      },\n    },\n    defaultVariants: {\n      density: \"comfortable\",\n      mono: false,\n      secondary: false,\n      status: \"none\",\n    },\n  },\n);\n\nexport type DataGridCellVariantProps = VariantProps<typeof dataGridCellVariants>;\n\n// A column-header cell <th role=\"columnheader\"> (spec §2 column-header / §4/§5). The header LABEL is\n// the SECONDARY text color at the label type role (the quiet, tracked column label) on the raised\n// header surface — a header NEVER wears a status or brand tint (spec §3/§8). It is also a roving\n// active-cell target, so it carries the same focus ring + scroll-margin as a data cell.\nexport const dataGridColumnHeaderVariants = cva(\n  [\n    \"px-(--space-3) align-middle text-start text-label text-text-secondary\",\n    \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n    \"scroll-mt-(--space-12) scroll-ms-(--space-12)\",\n  ],\n  {\n    variants: { ...cellPaddingVariants },\n    defaultVariants: { density: \"comfortable\" },\n  },\n);\n\nexport type DataGridColumnHeaderVariantProps = VariantProps<typeof dataGridColumnHeaderVariants>;\n\n// The SORTABLE-header control (spec §2/§4 Sorted/§6/§7): a real <button> inside the columnheader, so\n// it reads as the control it is and toggles the sort on Enter. It is the GHOST action accent — the\n// label + caret in the ghost fg with the restrained ghost hover fill (spec §4 sortable-header hover /\n// §5) — the action tier is legitimate here because it is a control the grid HOSTS, not a header tint.\n// It carries the target-size floor (40px desktop / 44px touch, spec §7) and inherits the active\n// cell's focus ring from the columnheader. Motion is the fast token transition, never the deliberate\n// verified-check theatre (G-U3). aria-sort lives on the parent th, and the caret encodes direction\n// alongside it so it never rests on color alone (spec §4 Sorted / 1.4.1).\nexport const dataGridSortButtonClass =\n  \"inline-flex items-center gap-(--space-1) -mx-(--space-1) px-(--space-1) rounded-(--radius-sm) \" +\n  \"text-label text-action-ghost-fg cursor-pointer select-none \" +\n  \"hover:bg-action-ghost-bg-hover \" +\n  \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant) \" +\n  \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop) \" +\n  \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\";\n\n// The sort-direction caret (spec §4 Sorted / §5): the sm icon role, decorative (the direction is also\n// encoded by aria-sort on the th + the glyph's shape via data-direction, so it never rests on color\n// alone — 1.4.1). It inherits the ghost accent color from the button.\nexport const dataGridSortCaretClass =\n  \"inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0 items-center justify-center\";\n\n// The selection cell <td role=\"gridcell\"> and the select-all header cell (spec §2 selection-cell /\n// §5): the leading cell that holds the row's Checkbox, carrying the active-cell focus ring +\n// scroll-margin like any other cell. The checkbox is the committed Checkbox component (reused, not\n// re-rolled), which already binds the control surface + border tokens (spec §5) and the brand action\n// accent on the CHECKED box — a checked checkbox is the brand accent, never status-verified (G-U2):\n// selection is a neutral action state. This wrapper is just the cell padding + the roving focus ring.\nexport const dataGridSelectionCellClass =\n  \"px-(--space-3) align-middle text-start \" +\n  \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 \" +\n  \"scroll-mt-(--space-12) scroll-ms-(--space-12)\";\n\n// The bulk-action bar (spec §2 bulk-action-bar / §4/§5): a toolbar that appears when rows are\n// selected, on the raised neutral surface with the sm elevation and a hairline top border, holding\n// the selection actions + a clear-selection control. It is a NEUTRAL surface — the COLOR lives on the\n// action buttons it holds, never on the bar (spec §3/§8). Motion is the fast token transition (the\n// bar's appear/transition), never the deliberate verified-check theatre (G-U3).\nexport const dataGridBulkBarClass =\n  \"flex items-center gap-(--space-3) px-(--space-3) py-(--space-2) \" +\n  \"bg-surface-raised border-t border-border-default \" +\n  \"transition-opacity duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant)\";\n\n// The selected-count label in the bulk-action bar (spec §2): the secondary text at the label role —\n// the count of selected rows, in words, so selection is announced, never color alone (1.4.1 / 4.1.3).\nexport const dataGridBulkCountClass = \"text-label text-text-secondary\";\n\n// A bulk-action button (spec §2/§5): the PRIMARY selection action is the primary ACTION accent; a\n// `destructive` action (for example, revoke a key) is the destructive ACTION accent — a risk signal\n// named in TEXT, never a status color (spec §5/§8). Both carry the visible focus ring + target-size\n// floor. Motion is the fast token transition, never the deliberate verified-check theatre (G-U3).\nexport const dataGridBulkActionVariants = cva(\n  [\n    \"inline-flex items-center justify-center gap-(--space-1) rounded-(--radius-md) px-(--space-3)\",\n    \"text-label font-medium cursor-pointer\",\n    \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n    \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n    \"motion-reduce:duration-(--motion-duration-instant)\",\n    \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n  ],\n  {\n    variants: {\n      destructive: {\n        // a destructive bulk action — a risk signal in the ACTION tier, NEVER a status token\n        true: \"bg-action-destructive-bg text-action-destructive-fg border border-action-destructive-border\",\n        // the default bulk action — the primary action accent\n        false: \"bg-action-primary-bg text-action-primary-fg border border-action-primary-border hover:bg-action-primary-bg-hover\",\n      },\n    },\n    defaultVariants: { destructive: false },\n  },\n);\n\nexport type DataGridBulkActionVariantProps = VariantProps<typeof dataGridBulkActionVariants>;\n\n// The empty-state cell (spec §2/§4 Empty): a plain line spanning the full grid width, in the muted\n// text color — an empty grid is NOT an error and never reads as one (no status color). Its copy says\n// why it is empty and what to do next, in plain words ending in a period (spec §4 Empty / voice).\nexport const dataGridEmptyClass =\n  \"px-(--space-3) py-(--space-6) text-center text-body text-text-muted\";\n\n// The off-screen-capable live region (spec §2 status-region / §7 4.1.3): announces the resolved row\n// count, sort + filter changes, and the selection count politely; a blocking row-load error\n// assertively. Always sr-only (it never paints — the visual state carries the same information for\n// sighted users), so it reaches assistive tech as TEXT, never color alone (1.4.1 / 4.1.3).\nexport const dataGridStatusRegionClass = \"sr-only\";\n"],"mappings":"AAAA,SAAS,WAA8B;AAkBhC,MAAM,mBAAmB,IAAI;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAOM,MAAM,qBAAqB;AAO3B,MAAM,yBACX;AAMF,MAAM,sBAAsB;AAAA,EAC1B,SAAS;AAAA,IACP,aAAa;AAAA,IACb,SAAS;AAAA,EACX;AACF;AAWO,MAAM,mBACX;AAiBK,MAAM,uBAAuB;AAAA,EAClC;AAAA,IACE;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,GAAG;AAAA,MACH,MAAM;AAAA;AAAA,QAEJ,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA,WAAW;AAAA;AAAA,QAET,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA;AAAA;AAAA,QAGN,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,WAAW;AAAA,MACX,QAAQ;AAAA,IACV;AAAA,EACF;AACF;AAQO,MAAM,+BAA+B;AAAA,EAC1C;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU,EAAE,GAAG,oBAAoB;AAAA,IACnC,iBAAiB,EAAE,SAAS,cAAc;AAAA,EAC5C;AACF;AAYO,MAAM,0BACX;AAWK,MAAM,yBACX;AAQK,MAAM,6BACX;AASK,MAAM,uBACX;AAOK,MAAM,yBAAyB;AAM/B,MAAM,6BAA6B;AAAA,EACxC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA;AAAA,QAEX,MAAM;AAAA;AAAA,QAEN,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,aAAa,MAAM;AAAA,EACxC;AACF;AAOO,MAAM,qBACX;AAMK,MAAM,4BAA4B;","names":[]}
+{"version":3,"sources":["../../../src/components/data-grid/data-grid.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// A DataGrid shows many rows of structured records in a scrollable, operable, two-dimensional grid\n// you navigate one cell at a time (spec §1). It is a NEUTRAL data surface (spec §1/§3): neutrals\n// carry roughly 90% of it, and a dense grid earns its legibility from restraint. It paints from the\n// surface, text, and border roles; it reaches the --color-action-* tier only for the controls it\n// hosts (the sortable-header ghost accent, the row-hover affordance, the bulk-bar actions, and the\n// NEUTRAL selection accent) and the --color-status-* tier ONLY inside a cell that reports a real\n// state, paired with text — never as a row tint, a header fill, or the selection accent, and NEVER\n// a brand token as a status (brand != state, G-U2). Selection and the active cell are NEUTRAL action\n// states; a verified/trust state is a status cell (spec §3/§4/§8).\n\n// The scroll container <div role=\"grid\"> (spec §2 grid / §5). The neutral canvas surface and the\n// default cell text role, framed by the outer surface border at the md radius, with a fixed-height\n// scroll viewport (the caller sizes it via className — the token set has no grid-height scale, the\n// caller-owned-dimension precedent J). It NEVER wears the brand violet or a status fill (spec §3/§8)\n// — those belong to the controls and the status cells inside it. The active cell is kept scrolled\n// clear of the sticky header and pinned columns by scroll-margin (2.4.11 Focus Not Obscured).\nexport const dataGridVariants = cva([\n  \"relative w-full overflow-auto\",\n  \"bg-surface-canvas text-body text-text-primary\",\n  \"border border-surface-border rounded-(--radius-md)\",\n]);\n\nexport type DataGridVariantProps = VariantProps<typeof dataGridVariants>;\n\n// The inner table element. The grid is a real <table> for the row/column relationship (1.3.1),\n// border-collapsed so the gridlines read as single hairlines, and start-aligned so it mirrors under\n// dir=\"rtl\" (G-U6).\nexport const dataGridTableClass = \"w-full border-collapse text-start\";\n\n// The column-header row <tr> (spec §2 column-header-row / §4 Default / §5). It is STICKY — it stays\n// pinned to the top of the scroll viewport while rows scroll under it — on the raised neutral surface\n// with the sm elevation so it reads ABOVE the scrolling rows (spec §4/§5). z on the sticky layer so a\n// scrolled cell never paints over the pinned header. A header row NEVER wears a status or brand tint\n// (spec §3/§8).\nexport const dataGridHeaderRowClass =\n  \"sticky top-0 z-(--z-index-sticky) bg-surface-raised shadow-sm \" +\n  \"border-b border-border-default\";\n\n// The shared cell padding by density (spec §3 density / §5 --space-*). Density tightens the VERTICAL\n// padding only, ABOVE the a11y floor — any in-cell control keeps its own --size-target-* floor\n// (DEC-B: never a fixed height below the floor). Horizontal inline padding is constant.\nconst cellPaddingVariants = {\n  density: {\n    comfortable: \"py-(--space-3)\",\n    compact: \"py-(--space-1)\",\n  },\n} as const;\n\n// A data row <tr> (spec §4 Default/Hover/Selected). RESTING: no fill, on the canvas. HOVER: a\n// restrained GHOST fill to track the eye across a wide row — an AFFORDANCE, never the sole carrier of\n// meaning, and never a selection (nothing is selected until you act, spec §4 Hover). SELECTED\n// (aria-selected): the NEUTRAL secondary-action selection accent — selection is a neutral action\n// state, NOT verified green and NOT the brand violet (selecting a row never implies it is verified;\n// brand != state, G-U2, spec §4/§8). Selection is encoded by the row checkbox + aria-selected, so a\n// grayscale reader reads it from the checkbox, not the fill (1.4.1). Motion is the fast token\n// transition on the verdify easing, instant under reduced motion — never the 350ms VerifiedBadge-only\n// theatre (a row hover/select is a plain transition, G-U3).\nexport const dataGridRowClass =\n  \"border-b border-border-default \" +\n  \"hover:bg-action-ghost-bg-hover \" +\n  \"aria-selected:bg-action-secondary-bg-hover \" +\n  \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant)\";\n\n// A data cell <td role=\"gridcell\"> (spec §2 cell, §4/§5). It is ONE focusable unit in the roving\n// grid: exactly one cell is the active cell (tabindex=0) and shows the visible 2px focus ring; every\n// other cell is tabindex=-1. The ring is part of the base and is NEVER removed (spec §4 Focus /\n// 2.4.7). scroll-margin keeps the active cell clear of the sticky header + pinned columns before it\n// takes focus (spec §7, 2.4.11 Focus Not Obscured). Default: the primary text color at the body type\n// role. A `mono` cell takes the monospace role and is isolated LTR so an identifier/key/timestamp\n// stays readable inside an RTL layout (spec §3/§5, G-U6). A `secondary` cell is de-emphasized\n// auxiliary text. A `status` cell carries the status fg paired with the cell's words — the status\n// color lives in the CELL only, never the row or header (spec §3), and NEVER a brand token (brand !=\n// state, G-U2); status-*-bg is the one neutral raised surface, so meaning is carried by the fg + the\n// text, not a saturated fill.\nexport const dataGridCellVariants = cva(\n  [\n    \"px-(--space-3) align-middle text-start text-body text-text-primary\",\n    // the roving active cell's focus ring — always visible, never removed (2.4.7)\n    \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n    // keep the active cell clear of the sticky header + a pinned column before it takes focus (2.4.11)\n    \"scroll-mt-(--space-12) scroll-ms-(--space-12)\",\n  ],\n  {\n    variants: {\n      ...cellPaddingVariants,\n      mono: {\n        // identifier/key/timestamp: the monospace role, isolated LTR inside RTL text (G-U6)\n        true: \"text-mono [direction:ltr]\",\n        false: \"\",\n      },\n      secondary: {\n        // de-emphasized secondary cell text (spec §5 --color-text-secondary)\n        true: \"text-text-secondary\",\n        false: \"\",\n      },\n      status: {\n        none: \"\",\n        // each status is the fg only, paired with the cell's text — the words carry the meaning,\n        // the fg reinforces it (spec §3/§5); never a saturated -bg fill, never the brand\n        verified: \"text-status-verified-on-surface\",\n        signal: \"text-status-signal-on-surface\",\n        caution: \"text-status-caution-on-surface\",\n        critical: \"text-status-critical-on-surface\",\n      },\n    },\n    defaultVariants: {\n      density: \"comfortable\",\n      mono: false,\n      secondary: false,\n      status: \"none\",\n    },\n  },\n);\n\nexport type DataGridCellVariantProps = VariantProps<typeof dataGridCellVariants>;\n\n// A column-header cell <th role=\"columnheader\"> (spec §2 column-header / §4/§5). The header LABEL is\n// the SECONDARY text color at the label type role (the quiet, tracked column label) on the raised\n// header surface — a header NEVER wears a status or brand tint (spec §3/§8). It is also a roving\n// active-cell target, so it carries the same focus ring + scroll-margin as a data cell.\nexport const dataGridColumnHeaderVariants = cva(\n  [\n    \"px-(--space-3) align-middle text-start text-label text-text-secondary\",\n    \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n    \"scroll-mt-(--space-12) scroll-ms-(--space-12)\",\n  ],\n  {\n    variants: { ...cellPaddingVariants },\n    defaultVariants: { density: \"comfortable\" },\n  },\n);\n\nexport type DataGridColumnHeaderVariantProps = VariantProps<typeof dataGridColumnHeaderVariants>;\n\n// The SORTABLE-header control (spec §2/§4 Sorted/§6/§7): a real <button> inside the columnheader, so\n// it reads as the control it is and toggles the sort on Enter. It is the GHOST action accent — the\n// label + caret in the ghost fg with the restrained ghost hover fill (spec §4 sortable-header hover /\n// §5) — the action tier is legitimate here because it is a control the grid HOSTS, not a header tint.\n// It carries the target-size floor (40px desktop / 44px touch, spec §7) and inherits the active\n// cell's focus ring from the columnheader. Motion is the fast token transition, never the deliberate\n// verified-check theatre (G-U3). aria-sort lives on the parent th, and the caret encodes direction\n// alongside it so it never rests on color alone (spec §4 Sorted / 1.4.1).\nexport const dataGridSortButtonClass =\n  \"inline-flex items-center gap-(--space-1) -mx-(--space-1) px-(--space-1) rounded-(--radius-sm) \" +\n  \"text-label text-action-ghost-fg cursor-pointer select-none \" +\n  \"hover:bg-action-ghost-bg-hover \" +\n  \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant) \" +\n  \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop) \" +\n  \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\";\n\n// The sort-direction caret (spec §4 Sorted / §5): the sm icon role, decorative (the direction is also\n// encoded by aria-sort on the th + the glyph's shape via data-direction, so it never rests on color\n// alone — 1.4.1). It inherits the ghost accent color from the button.\nexport const dataGridSortCaretClass =\n  \"inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0 items-center justify-center\";\n\n// The selection cell <td role=\"gridcell\"> and the select-all header cell (spec §2 selection-cell /\n// §5): the leading cell that holds the row's Checkbox, carrying the active-cell focus ring +\n// scroll-margin like any other cell. The checkbox is the committed Checkbox component (reused, not\n// re-rolled), which already binds the control surface + border tokens (spec §5) and the brand action\n// accent on the CHECKED box — a checked checkbox is the brand accent, never status-verified (G-U2):\n// selection is a neutral action state. This wrapper is just the cell padding + the roving focus ring.\nexport const dataGridSelectionCellClass =\n  \"px-(--space-3) align-middle text-start \" +\n  \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2 \" +\n  \"scroll-mt-(--space-12) scroll-ms-(--space-12)\";\n\n// The bulk-action bar (spec §2 bulk-action-bar / §4/§5): a toolbar that appears when rows are\n// selected, on the raised neutral surface with the sm elevation and a hairline top border, holding\n// the selection actions + a clear-selection control. It is a NEUTRAL surface — the COLOR lives on the\n// action buttons it holds, never on the bar (spec §3/§8). Motion is the fast token transition (the\n// bar's appear/transition), never the deliberate verified-check theatre (G-U3).\nexport const dataGridBulkBarClass =\n  \"flex items-center gap-(--space-3) px-(--space-3) py-(--space-2) \" +\n  \"bg-surface-raised border-t border-border-default \" +\n  \"transition-opacity duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant)\";\n\n// The selected-count label in the bulk-action bar (spec §2): the secondary text at the label role —\n// the count of selected rows, in words, so selection is announced, never color alone (1.4.1 / 4.1.3).\nexport const dataGridBulkCountClass = \"text-label text-text-secondary\";\n\n// A bulk-action button (spec §2/§5): the PRIMARY selection action is the primary ACTION accent; a\n// `destructive` action (for example, revoke a key) is the destructive ACTION accent — a risk signal\n// named in TEXT, never a status color (spec §5/§8). Both carry the visible focus ring + target-size\n// floor. Motion is the fast token transition, never the deliberate verified-check theatre (G-U3).\nexport const dataGridBulkActionVariants = cva(\n  [\n    \"inline-flex items-center justify-center gap-(--space-1) rounded-(--radius-md) px-(--space-3)\",\n    \"text-label font-medium cursor-pointer\",\n    \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n    \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n    \"motion-reduce:duration-(--motion-duration-instant)\",\n    \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n  ],\n  {\n    variants: {\n      destructive: {\n        // a destructive bulk action — a risk signal in the ACTION tier, NEVER a status token\n        true: \"bg-action-destructive-bg text-action-destructive-fg border border-action-destructive-border\",\n        // the default bulk action — the primary action accent\n        false: \"bg-action-primary-bg text-action-primary-fg border border-action-primary-border hover:bg-action-primary-bg-hover\",\n      },\n    },\n    defaultVariants: { destructive: false },\n  },\n);\n\nexport type DataGridBulkActionVariantProps = VariantProps<typeof dataGridBulkActionVariants>;\n\n// The empty-state cell (spec §2/§4 Empty): a plain line spanning the full grid width, in the muted\n// text color — an empty grid is NOT an error and never reads as one (no status color). Its copy says\n// why it is empty and what to do next, in plain words ending in a period (spec §4 Empty / voice).\nexport const dataGridEmptyClass =\n  \"px-(--space-3) py-(--space-6) text-center text-body text-text-muted\";\n\n// The off-screen-capable live region (spec §2 status-region / §7 4.1.3): announces the resolved row\n// count, sort + filter changes, and the selection count politely; a blocking row-load error\n// assertively. Always sr-only (it never paints — the visual state carries the same information for\n// sighted users), so it reaches assistive tech as TEXT, never color alone (1.4.1 / 4.1.3).\nexport const dataGridStatusRegionClass = \"sr-only\";\n"],"mappings":"AAAA,SAAS,WAA8B;AAkBhC,MAAM,mBAAmB,IAAI;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAOM,MAAM,qBAAqB;AAO3B,MAAM,yBACX;AAMF,MAAM,sBAAsB;AAAA,EAC1B,SAAS;AAAA,IACP,aAAa;AAAA,IACb,SAAS;AAAA,EACX;AACF;AAWO,MAAM,mBACX;AAiBK,MAAM,uBAAuB;AAAA,EAClC;AAAA,IACE;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,GAAG;AAAA,MACH,MAAM;AAAA;AAAA,QAEJ,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA,WAAW;AAAA;AAAA,QAET,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA;AAAA;AAAA,QAGN,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,WAAW;AAAA,MACX,QAAQ;AAAA,IACV;AAAA,EACF;AACF;AAQO,MAAM,+BAA+B;AAAA,EAC1C;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU,EAAE,GAAG,oBAAoB;AAAA,IACnC,iBAAiB,EAAE,SAAS,cAAc;AAAA,EAC5C;AACF;AAYO,MAAM,0BACX;AAWK,MAAM,yBACX;AAQK,MAAM,6BACX;AASK,MAAM,uBACX;AAOK,MAAM,yBAAyB;AAM/B,MAAM,6BAA6B;AAAA,EACxC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,aAAa;AAAA;AAAA,QAEX,MAAM;AAAA;AAAA,QAEN,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,aAAa,MAAM;AAAA,EACxC;AACF;AAOO,MAAM,qBACX;AAMK,MAAM,4BAA4B;","names":[]}

package/dist/components/input/input.variants.js

@@ -53,7 +53,7 @@ const inputVariants = cva(
 );
 const inputMessageVariants = cva("mt-(--space-1) text-caption", {
   variants: {
-    tone: { help: "text-text-secondary", error: "text-status-critical-fg" }
+    tone: { help: "text-text-secondary", error: "text-status-critical-on-surface" }
   },
   defaultVariants: { tone: "help" }
 });

package/dist/components/input/input.variants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/input/input.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// The text field. Token binding lives ONLY here. Native <input>, no Radix.\n// The closed state set for a text field is default·hover·focus·disabled·read-only·error\n// (input.md §4) — loading and pressed do NOT apply and are dropped.\nexport const inputVariants = cva(\n  [\n    // shape + resting field: control-* carries the field, neutrals not brand\n    \"block w-full rounded-md border bg-control-bg text-control-fg\",\n    \"border-control-border placeholder:text-control-placeholder\",\n    // DEC-A — the value SIZE is text-base (16px) so iOS never zooms on focus; the\n    // brand BODY line-height + letter-spacing ride along via the role-suffix vars.\n    // text-body itself (0.9375rem / 15px) is NEVER bound on a form field: under the\n    // role-aware cn it would collapse against text-base, and 15px would reintroduce\n    // the iOS focus-zoom that the 16px reset exists to prevent.\n    \"text-base leading-(--text-body--line-height) tracking-(--text-body--letter-spacing)\",\n    // hover shows a text caret; the border does NOT change color (restraint)\n    \"cursor-text\",\n    // focus: visible 2px signal-blue ring at 2px offset + focused border, never\n    // removed (2.4.7); border+ring meet 3:1 non-text contrast (1.4.11)\n    \"outline-none\",\n    \"focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n    \"focus-visible:border-border-focus\",\n    // colors transition functionally (no theatre); border + ring only\n    \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n    // disabled: muted value, non-interactive (native disabled drives tab skip)\n    \"disabled:cursor-not-allowed disabled:text-text-disabled\",\n    // read-only: editable-looking, selectable, stays in the tab order\n    \"read-only:cursor-default\",\n    // ERROR is the only colored field state — it borrows the STATUS color, never\n    // the brand (§3, §8). Driven by the native aria-invalid attribute.\n    \"aria-invalid:border-status-critical-border\",\n    \"aria-invalid:focus-visible:ring-status-critical-border\",\n    // 44px mobile / 40px desktop target floor, logical block-size. DEC-B: tokens\n    // expose only target-size FLOORS, no height scale — every size anchors this\n    // floor and never sets a fixed height below it (a11y). Resting height emerges\n    // from the size variant's vertical padding above this floor.\n    \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n  ],\n  {\n    variants: {\n      // DEC-B — the 16px no-zoom reset is a hard floor on every form-field size, so\n      // (unlike a non-field control) the type role is held constant and the sizes\n      // differ ONLY by vertical padding (density) ABOVE the shared target floor:\n      // --space-1 (0.25rem) <= --space-2 (0.5rem) gives a coherent sm <= md height\n      // progression, both >= the floor.\n      size: {\n        md: \"py-(--space-2)\",\n        sm: \"py-(--space-1)\",\n      },\n      // logical inline padding; widened on the slot side to reserve room\n      leadingSlot: { true: \"ps-(--space-9)\", false: \"ps-(--space-3)\" },\n      trailingSlot: { true: \"pe-(--space-9)\", false: \"pe-(--space-3)\" },\n    },\n    defaultVariants: { size: \"md\", leadingSlot: false, trailingSlot: false },\n  },\n);\n\nexport type InputVariantProps = VariantProps<typeof inputVariants>;\n\n// The message below the field. The error help text borrows the field's STATUS\n// color (the only colored field state); neutral help text is muted secondary.\nexport const inputMessageVariants = cva(\"mt-(--space-1) text-caption\", {\n  variants: {\n    tone: { help: \"text-text-secondary\", error: \"text-status-critical-fg\" },\n  },\n  defaultVariants: { tone: \"help\" },\n});\n"],"mappings":"AAAA,SAAS,WAA8B;AAKhC,MAAM,gBAAgB;AAAA,EAC3B;AAAA;AAAA,IAEE;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA;AAAA,MAEA,aAAa,EAAE,MAAM,kBAAkB,OAAO,iBAAiB;AAAA,MAC/D,cAAc,EAAE,MAAM,kBAAkB,OAAO,iBAAiB;AAAA,IAClE;AAAA,IACA,iBAAiB,EAAE,MAAM,MAAM,aAAa,OAAO,cAAc,MAAM;AAAA,EACzE;AACF;AAMO,MAAM,uBAAuB,IAAI,+BAA+B;AAAA,EACrE,UAAU;AAAA,IACR,MAAM,EAAE,MAAM,uBAAuB,OAAO,0BAA0B;AAAA,EACxE;AAAA,EACA,iBAAiB,EAAE,MAAM,OAAO;AAClC,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/components/input/input.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// The text field. Token binding lives ONLY here. Native <input>, no Radix.\n// The closed state set for a text field is default·hover·focus·disabled·read-only·error\n// (input.md §4) — loading and pressed do NOT apply and are dropped.\nexport const inputVariants = cva(\n  [\n    // shape + resting field: control-* carries the field, neutrals not brand\n    \"block w-full rounded-md border bg-control-bg text-control-fg\",\n    \"border-control-border placeholder:text-control-placeholder\",\n    // DEC-A — the value SIZE is text-base (16px) so iOS never zooms on focus; the\n    // brand BODY line-height + letter-spacing ride along via the role-suffix vars.\n    // text-body itself (0.9375rem / 15px) is NEVER bound on a form field: under the\n    // role-aware cn it would collapse against text-base, and 15px would reintroduce\n    // the iOS focus-zoom that the 16px reset exists to prevent.\n    \"text-base leading-(--text-body--line-height) tracking-(--text-body--letter-spacing)\",\n    // hover shows a text caret; the border does NOT change color (restraint)\n    \"cursor-text\",\n    // focus: visible 2px signal-blue ring at 2px offset + focused border, never\n    // removed (2.4.7); border+ring meet 3:1 non-text contrast (1.4.11)\n    \"outline-none\",\n    \"focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n    \"focus-visible:border-border-focus\",\n    // colors transition functionally (no theatre); border + ring only\n    \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n    // disabled: muted value, non-interactive (native disabled drives tab skip)\n    \"disabled:cursor-not-allowed disabled:text-text-disabled\",\n    // read-only: editable-looking, selectable, stays in the tab order\n    \"read-only:cursor-default\",\n    // ERROR is the only colored field state — it borrows the STATUS color, never\n    // the brand (§3, §8). Driven by the native aria-invalid attribute.\n    \"aria-invalid:border-status-critical-border\",\n    \"aria-invalid:focus-visible:ring-status-critical-border\",\n    // 44px mobile / 40px desktop target floor, logical block-size. DEC-B: tokens\n    // expose only target-size FLOORS, no height scale — every size anchors this\n    // floor and never sets a fixed height below it (a11y). Resting height emerges\n    // from the size variant's vertical padding above this floor.\n    \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n  ],\n  {\n    variants: {\n      // DEC-B — the 16px no-zoom reset is a hard floor on every form-field size, so\n      // (unlike a non-field control) the type role is held constant and the sizes\n      // differ ONLY by vertical padding (density) ABOVE the shared target floor:\n      // --space-1 (0.25rem) <= --space-2 (0.5rem) gives a coherent sm <= md height\n      // progression, both >= the floor.\n      size: {\n        md: \"py-(--space-2)\",\n        sm: \"py-(--space-1)\",\n      },\n      // logical inline padding; widened on the slot side to reserve room\n      leadingSlot: { true: \"ps-(--space-9)\", false: \"ps-(--space-3)\" },\n      trailingSlot: { true: \"pe-(--space-9)\", false: \"pe-(--space-3)\" },\n    },\n    defaultVariants: { size: \"md\", leadingSlot: false, trailingSlot: false },\n  },\n);\n\nexport type InputVariantProps = VariantProps<typeof inputVariants>;\n\n// The message below the field. The error help text borrows the field's STATUS\n// color (the only colored field state); neutral help text is muted secondary.\nexport const inputMessageVariants = cva(\"mt-(--space-1) text-caption\", {\n  variants: {\n    tone: { help: \"text-text-secondary\", error: \"text-status-critical-on-surface\" },\n  },\n  defaultVariants: { tone: \"help\" },\n});\n"],"mappings":"AAAA,SAAS,WAA8B;AAKhC,MAAM,gBAAgB;AAAA,EAC3B;AAAA;AAAA,IAEE;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA;AAAA,MAEA,aAAa,EAAE,MAAM,kBAAkB,OAAO,iBAAiB;AAAA,MAC/D,cAAc,EAAE,MAAM,kBAAkB,OAAO,iBAAiB;AAAA,IAClE;AAAA,IACA,iBAAiB,EAAE,MAAM,MAAM,aAAa,OAAO,cAAc,MAAM;AAAA,EACzE;AACF;AAMO,MAAM,uBAAuB,IAAI,+BAA+B;AAAA,EACrE,UAAU;AAAA,IACR,MAAM,EAAE,MAAM,uBAAuB,OAAO,kCAAkC;AAAA,EAChF;AAAA,EACA,iBAAiB,EAAE,MAAM,OAAO;AAClC,CAAC;","names":[]}

package/dist/components/label/label.variants.js

@@ -16,7 +16,7 @@ const labelVariants = cva(
   }
 );
 const requiredMarkVariants = cva([
-  "inline-flex items-center gap-(--space-1) text-status-critical-fg"
+  "inline-flex items-center gap-(--space-1) text-status-critical-on-surface"
 ]);
 const optionalHintVariants = cva(["text-caption text-text-secondary"]);
 export {

package/dist/components/label/label.variants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/label/label.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// Resting label text: the label type role + primary text color, laid out inline\n// with its mark/hint at the --space-2 gap. No focus ring, no target-size floor —\n// a Label is not interactive. `disabled` reflects the control's state visually.\nexport const labelVariants = cva(\n  [\n    \"inline-flex items-center gap-(--space-2)\",\n    \"text-label font-medium text-text-primary select-none\",\n  ],\n  {\n    variants: {\n      disabled: {\n        // reflects the associated control's disabled state; stays in the DOM\n        true: \"text-text-disabled\",\n        false: \"\",\n      },\n    },\n    defaultVariants: { disabled: false },\n  },\n);\n\n// The required mark — meaning carried by shape + text, never color alone. The\n// critical color is permitted ONLY here (paired with the asterisk glyph and the\n// visually-hidden \"required\" word), never on resting label text.\nexport const requiredMarkVariants = cva([\n  \"inline-flex items-center gap-(--space-1) text-status-critical-fg\",\n]);\n\n// The optional hint — a short secondary note in the caption role + secondary color.\nexport const optionalHintVariants = cva([\"text-caption text-text-secondary\"]);\n\nexport type LabelVariantProps = VariantProps<typeof labelVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAKhC,MAAM,gBAAgB;AAAA,EAC3B;AAAA,IACE;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,UAAU;AAAA;AAAA,QAER,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,UAAU,MAAM;AAAA,EACrC;AACF;AAKO,MAAM,uBAAuB,IAAI;AAAA,EACtC;AACF,CAAC;AAGM,MAAM,uBAAuB,IAAI,CAAC,kCAAkC,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/components/label/label.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// Resting label text: the label type role + primary text color, laid out inline\n// with its mark/hint at the --space-2 gap. No focus ring, no target-size floor —\n// a Label is not interactive. `disabled` reflects the control's state visually.\nexport const labelVariants = cva(\n  [\n    \"inline-flex items-center gap-(--space-2)\",\n    \"text-label font-medium text-text-primary select-none\",\n  ],\n  {\n    variants: {\n      disabled: {\n        // reflects the associated control's disabled state; stays in the DOM\n        true: \"text-text-disabled\",\n        false: \"\",\n      },\n    },\n    defaultVariants: { disabled: false },\n  },\n);\n\n// The required mark — meaning carried by shape + text, never color alone. The\n// critical color is permitted ONLY here (paired with the asterisk glyph and the\n// visually-hidden \"required\" word), never on resting label text.\nexport const requiredMarkVariants = cva([\n  \"inline-flex items-center gap-(--space-1) text-status-critical-on-surface\",\n]);\n\n// The optional hint — a short secondary note in the caption role + secondary color.\nexport const optionalHintVariants = cva([\"text-caption text-text-secondary\"]);\n\nexport type LabelVariantProps = VariantProps<typeof labelVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAKhC,MAAM,gBAAgB;AAAA,EAC3B;AAAA,IACE;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,UAAU;AAAA;AAAA,QAER,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,UAAU,MAAM;AAAA,EACrC;AACF;AAKO,MAAM,uBAAuB,IAAI;AAAA,EACtC;AACF,CAAC;AAGM,MAAM,uBAAuB,IAAI,CAAC,kCAAkC,CAAC;","names":[]}

package/dist/components/progress/progress.variants.d.ts

@@ -9,6 +9,6 @@ export declare const progressHeaderClass = "flex items-baseline justify-between
 export declare const progressLabelClass = "text-caption text-text-primary";
 export declare const progressValueTextClass = "text-caption text-text-secondary";
 export declare const progressDescriptionClass = "text-caption text-text-secondary";
-export declare const progressErrorClass = "text-caption text-status-critical-fg";
+export declare const progressErrorClass = "text-caption text-status-critical-on-surface";
 export type ProgressFillVariantProps = VariantProps<typeof progressFillVariants>;
 //# sourceMappingURL=progress.variants.d.ts.map

package/dist/components/progress/progress.variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"progress.variants.d.ts","sourceRoot":"","sources":["../../../src/components/progress/progress.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAmBlE,eAAO,MAAM,kBAAkB,QAGe,CAAC;AAU/C,eAAO,MAAM,+BAA+B,kCAAkC,CAAC;AAmB/E,eAAO,MAAM,oBAAoB;;8EAqB/B,CAAC;AAKH,eAAO,MAAM,iBAAiB,yCAAyC,CAAC;AAIxE,eAAO,MAAM,mBAAmB,wDAAwD,CAAC;AAIzF,eAAO,MAAM,kBAAkB,mCAAmC,CAAC;AAInE,eAAO,MAAM,sBAAsB,qCAAqC,CAAC;AAIzE,eAAO,MAAM,wBAAwB,qCAAqC,CAAC;AAM3E,eAAO,MAAM,kBAAkB,yCAAyC,CAAC;AAEzE,MAAM,MAAM,wBAAwB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}
+{"version":3,"file":"progress.variants.d.ts","sourceRoot":"","sources":["../../../src/components/progress/progress.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAmBlE,eAAO,MAAM,kBAAkB,QAGe,CAAC;AAU/C,eAAO,MAAM,+BAA+B,kCAAkC,CAAC;AAmB/E,eAAO,MAAM,oBAAoB;;8EAqB/B,CAAC;AAKH,eAAO,MAAM,iBAAiB,yCAAyC,CAAC;AAIxE,eAAO,MAAM,mBAAmB,wDAAwD,CAAC;AAIzF,eAAO,MAAM,kBAAkB,mCAAmC,CAAC;AAInE,eAAO,MAAM,sBAAsB,qCAAqC,CAAC;AAIzE,eAAO,MAAM,wBAAwB,qCAAqC,CAAC;AAM3E,eAAO,MAAM,kBAAkB,iDAAiD,CAAC;AAEjF,MAAM,MAAM,wBAAwB,GAAG,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC"}

package/dist/components/progress/progress.variants.js

@@ -22,7 +22,7 @@ const progressHeaderClass = "flex items-baseline justify-between gap-(--space-2)
 const progressLabelClass = "text-caption text-text-primary";
 const progressValueTextClass = "text-caption text-text-secondary";
 const progressDescriptionClass = "text-caption text-text-secondary";
-const progressErrorClass = "text-caption text-status-critical-fg";
+const progressErrorClass = "text-caption text-status-critical-on-surface";
 export {
   PROGRESS_INDETERMINATE_KEYFRAME,
   progressDescriptionClass,

package/dist/components/progress/progress.variants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/progress/progress.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// Progress reports how far a task has advanced — a status OUTPUT, not a control\n// (spec §1/§4/§6). It takes no focus, binds no keys, and renders no focus ring or\n// target-size floor: the value reaches assistive technology through role=\"progressbar\"\n// + aria-value* and a polite live region, never motion (spec §7).\n//\n// Brand != state (spec §3/§5/§8): the fill is a plain control affordance, NOT a\n// verification result. Neutrals carry the track and the fill takes the primary ACTION\n// accent (the visible action color on the surface) — NEVER --color-status-verified-*,\n// because verified green is the in-product verified status and is never a generic\n// progress affordance. There is no \"verified\" Progress; surfacing a verified outcome is\n// the job of VerifiedBadge, whose deliberate check animation is never borrowed here.\n\n// The track (spec §2/§5): the full-length rail that holds the fill, in the neutral\n// control surface with the control border, clipped so the fill's rounded end and the\n// traveling indeterminate indicator never bleed past the rail. Rounded on the full radius.\n// In the error state the rail edge takes the critical status border, driven by\n// aria-invalid on the bar so the failure is identified BY THE FIELD, in text (spec §4/§7).\nexport const progressTrackClass =\n  \"relative block h-(--space-2) w-full overflow-hidden \" +\n  \"rounded-(--radius-full) bg-control-bg border border-control-border \" +\n  \"aria-invalid:border-status-critical-border\";\n\n// The fill / indeterminate indicator keyframe (spec §3/§4): a TRAVELLING indicator. A\n// narrow indicator (`w-2/5`, set in the variant below) slides along the track's INLINE\n// axis from before the inline-start edge to past the inline-end edge, then loops. Travel\n// is driven on the LOGICAL `inset-inline-start` property (not a physical `translateX`), so\n// the indicator mirrors automatically under `dir=\"rtl\"` (G-U6 global-first). This keyframe\n// is pure geometry — it binds NO design token (the duration and easing tokens are bound on\n// the variant className, the single §5 binding site), so it is emitted from `progress.tsx`\n// as a component-scoped <style>, not from this binding file.\nexport const PROGRESS_INDETERMINATE_KEYFRAME = \"progress-indeterminate-travel\";\n\n// The fill (spec §2/§4/§5): the portion of the track that is done, in the primary action\n// accent, rounded on the full radius.\n//\n// DETERMINATE: its inline length is the value (set as an inline width in tsx — a data\n// percentage, not a design token). The length CHANGES on the FAST duration with verdify\n// easing, collapsing to the instant endpoint under reduced motion (spec §4/§5).\n//\n// INDETERMINATE: no measured length exists, so a moving indicator TRAVELS the track on a\n// continuous AMBIENT loop with verdify easing — restrained activity, never the 350ms\n// verified-check theatre duration (spec §3/§4/§8). The indicator is positioned `absolute`\n// on the track and its `inset-inline-start` is animated by the `progress-indeterminate-travel`\n// keyframe (defined in progress.tsx). The loop length is driven onto the ambient token via\n// the arbitrary `animation-duration` PROPERTY, the easing onto the verdify token, and the\n// loop is set to repeat — all keyword arbitrary properties or paren-shorthand tokens, not\n// raw values, so the token-binding gate does not flag them. Under prefers-reduced-motion the\n// travel is suppressed (`motion-reduce:animate-none`) and the busy state is carried by the\n// live region + name, not motion alone (spec §4/§7).\nexport const progressFillVariants = cva(\"block h-full rounded-(--radius-full) bg-action-primary-bg\", {\n  variants: {\n    // STRUCTURAL axis = spec §3: the determinate fill is a measured length; the\n    // indeterminate indicator is a looping travel. Neither recolors the fill (brand !=\n    // state) — they differ only by motion and how the length is set.\n    indeterminate: {\n      // a measured length set inline; the length transition runs on the fast duration\n      false:\n        \"transition-[inline-size] duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n        \"motion-reduce:duration-(--motion-duration-instant)\",\n      // a narrow indicator that TRAVELS the inline axis on a continuous ambient loop;\n      // static under reduced motion. Absolutely positioned so it slides past both edges\n      // of the clipped track (overflow-hidden on the track hides the off-track portion).\n      true:\n        \"absolute w-2/5 [animation-name:progress-indeterminate-travel] \" +\n        \"[animation-iteration-count:infinite] \" +\n        \"[animation-duration:var(--motion-duration-ambient)] \" +\n        \"ease-(--motion-easing-verdify) motion-reduce:animate-none\",\n    },\n  },\n  defaultVariants: { indeterminate: false },\n});\n\n// The bar root (spec §2): a layout column stacking the label/value-text row, the track,\n// and the optional description/error message at the --space-2 gap. Non-interactive: no\n// focus ring, no tab stop, no target-size floor (spec §4/§6/§7).\nexport const progressRootClass = \"flex w-full flex-col gap-(--space-2)\";\n\n// The label + value-text header row (spec §2): the label sits inline-start, the optional\n// value-text inline-end, spread across the bar's width.\nexport const progressHeaderClass = \"flex items-baseline justify-between gap-(--space-2)\";\n\n// The label (spec §2/§5): the text naming the task, in the primary text color at the\n// caption type role.\nexport const progressLabelClass = \"text-caption text-text-primary\";\n\n// The optional value-text readout (spec §2/§5): a plain progress readout (\"40%\",\n// \"Step 2 of 4\") in the secondary text color at the caption role. Determinate only.\nexport const progressValueTextClass = \"text-caption text-text-secondary\";\n\n// The optional one-line description (spec §2/§5): a statement clarifying what is running,\n// in the secondary text color at the caption role.\nexport const progressDescriptionClass = \"text-caption text-text-secondary\";\n\n// The error message (spec §4/§5/§8): states what failed and the next step, naming the\n// failure without blaming the reader. The critical status FOREGROUND marks the text at the\n// caption role; the field edge (track) takes the critical border via aria-invalid. Error\n// is shown in TEXT, never by color alone.\nexport const progressErrorClass = \"text-caption text-status-critical-fg\";\n\nexport type ProgressFillVariantProps = VariantProps<typeof progressFillVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAmBhC,MAAM,qBACX;AAYK,MAAM,kCAAkC;AAmBxC,MAAM,uBAAuB,IAAI,6DAA6D;AAAA,EACnG,UAAU;AAAA;AAAA;AAAA;AAAA,IAIR,eAAe;AAAA;AAAA,MAEb,OACE;AAAA;AAAA;AAAA;AAAA,MAKF,MACE;AAAA,IAIJ;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,eAAe,MAAM;AAC1C,CAAC;AAKM,MAAM,oBAAoB;AAI1B,MAAM,sBAAsB;AAI5B,MAAM,qBAAqB;AAI3B,MAAM,yBAAyB;AAI/B,MAAM,2BAA2B;AAMjC,MAAM,qBAAqB;","names":[]}
+{"version":3,"sources":["../../../src/components/progress/progress.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// Progress reports how far a task has advanced — a status OUTPUT, not a control\n// (spec §1/§4/§6). It takes no focus, binds no keys, and renders no focus ring or\n// target-size floor: the value reaches assistive technology through role=\"progressbar\"\n// + aria-value* and a polite live region, never motion (spec §7).\n//\n// Brand != state (spec §3/§5/§8): the fill is a plain control affordance, NOT a\n// verification result. Neutrals carry the track and the fill takes the primary ACTION\n// accent (the visible action color on the surface) — NEVER --color-status-verified-*,\n// because verified green is the in-product verified status and is never a generic\n// progress affordance. There is no \"verified\" Progress; surfacing a verified outcome is\n// the job of VerifiedBadge, whose deliberate check animation is never borrowed here.\n\n// The track (spec §2/§5): the full-length rail that holds the fill, in the neutral\n// control surface with the control border, clipped so the fill's rounded end and the\n// traveling indeterminate indicator never bleed past the rail. Rounded on the full radius.\n// In the error state the rail edge takes the critical status border, driven by\n// aria-invalid on the bar so the failure is identified BY THE FIELD, in text (spec §4/§7).\nexport const progressTrackClass =\n  \"relative block h-(--space-2) w-full overflow-hidden \" +\n  \"rounded-(--radius-full) bg-control-bg border border-control-border \" +\n  \"aria-invalid:border-status-critical-border\";\n\n// The fill / indeterminate indicator keyframe (spec §3/§4): a TRAVELLING indicator. A\n// narrow indicator (`w-2/5`, set in the variant below) slides along the track's INLINE\n// axis from before the inline-start edge to past the inline-end edge, then loops. Travel\n// is driven on the LOGICAL `inset-inline-start` property (not a physical `translateX`), so\n// the indicator mirrors automatically under `dir=\"rtl\"` (G-U6 global-first). This keyframe\n// is pure geometry — it binds NO design token (the duration and easing tokens are bound on\n// the variant className, the single §5 binding site), so it is emitted from `progress.tsx`\n// as a component-scoped <style>, not from this binding file.\nexport const PROGRESS_INDETERMINATE_KEYFRAME = \"progress-indeterminate-travel\";\n\n// The fill (spec §2/§4/§5): the portion of the track that is done, in the primary action\n// accent, rounded on the full radius.\n//\n// DETERMINATE: its inline length is the value (set as an inline width in tsx — a data\n// percentage, not a design token). The length CHANGES on the FAST duration with verdify\n// easing, collapsing to the instant endpoint under reduced motion (spec §4/§5).\n//\n// INDETERMINATE: no measured length exists, so a moving indicator TRAVELS the track on a\n// continuous AMBIENT loop with verdify easing — restrained activity, never the 350ms\n// verified-check theatre duration (spec §3/§4/§8). The indicator is positioned `absolute`\n// on the track and its `inset-inline-start` is animated by the `progress-indeterminate-travel`\n// keyframe (defined in progress.tsx). The loop length is driven onto the ambient token via\n// the arbitrary `animation-duration` PROPERTY, the easing onto the verdify token, and the\n// loop is set to repeat — all keyword arbitrary properties or paren-shorthand tokens, not\n// raw values, so the token-binding gate does not flag them. Under prefers-reduced-motion the\n// travel is suppressed (`motion-reduce:animate-none`) and the busy state is carried by the\n// live region + name, not motion alone (spec §4/§7).\nexport const progressFillVariants = cva(\"block h-full rounded-(--radius-full) bg-action-primary-bg\", {\n  variants: {\n    // STRUCTURAL axis = spec §3: the determinate fill is a measured length; the\n    // indeterminate indicator is a looping travel. Neither recolors the fill (brand !=\n    // state) — they differ only by motion and how the length is set.\n    indeterminate: {\n      // a measured length set inline; the length transition runs on the fast duration\n      false:\n        \"transition-[inline-size] duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n        \"motion-reduce:duration-(--motion-duration-instant)\",\n      // a narrow indicator that TRAVELS the inline axis on a continuous ambient loop;\n      // static under reduced motion. Absolutely positioned so it slides past both edges\n      // of the clipped track (overflow-hidden on the track hides the off-track portion).\n      true:\n        \"absolute w-2/5 [animation-name:progress-indeterminate-travel] \" +\n        \"[animation-iteration-count:infinite] \" +\n        \"[animation-duration:var(--motion-duration-ambient)] \" +\n        \"ease-(--motion-easing-verdify) motion-reduce:animate-none\",\n    },\n  },\n  defaultVariants: { indeterminate: false },\n});\n\n// The bar root (spec §2): a layout column stacking the label/value-text row, the track,\n// and the optional description/error message at the --space-2 gap. Non-interactive: no\n// focus ring, no tab stop, no target-size floor (spec §4/§6/§7).\nexport const progressRootClass = \"flex w-full flex-col gap-(--space-2)\";\n\n// The label + value-text header row (spec §2): the label sits inline-start, the optional\n// value-text inline-end, spread across the bar's width.\nexport const progressHeaderClass = \"flex items-baseline justify-between gap-(--space-2)\";\n\n// The label (spec §2/§5): the text naming the task, in the primary text color at the\n// caption type role.\nexport const progressLabelClass = \"text-caption text-text-primary\";\n\n// The optional value-text readout (spec §2/§5): a plain progress readout (\"40%\",\n// \"Step 2 of 4\") in the secondary text color at the caption role. Determinate only.\nexport const progressValueTextClass = \"text-caption text-text-secondary\";\n\n// The optional one-line description (spec §2/§5): a statement clarifying what is running,\n// in the secondary text color at the caption role.\nexport const progressDescriptionClass = \"text-caption text-text-secondary\";\n\n// The error message (spec §4/§5/§8): states what failed and the next step, naming the\n// failure without blaming the reader. The critical status FOREGROUND marks the text at the\n// caption role; the field edge (track) takes the critical border via aria-invalid. Error\n// is shown in TEXT, never by color alone.\nexport const progressErrorClass = \"text-caption text-status-critical-on-surface\";\n\nexport type ProgressFillVariantProps = VariantProps<typeof progressFillVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAmBhC,MAAM,qBACX;AAYK,MAAM,kCAAkC;AAmBxC,MAAM,uBAAuB,IAAI,6DAA6D;AAAA,EACnG,UAAU;AAAA;AAAA;AAAA;AAAA,IAIR,eAAe;AAAA;AAAA,MAEb,OACE;AAAA;AAAA;AAAA;AAAA,MAKF,MACE;AAAA,IAIJ;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,eAAe,MAAM;AAC1C,CAAC;AAKM,MAAM,oBAAoB;AAI1B,MAAM,sBAAsB;AAI5B,MAAM,qBAAqB;AAI3B,MAAM,yBAAyB;AAI/B,MAAM,2BAA2B;AAMjC,MAAM,qBAAqB;","names":[]}

package/dist/components/select/select.variants.d.ts

@@ -11,8 +11,8 @@ export declare const optionVariants: (props?: ({
 export declare const checkClass = "absolute end-2 inline-flex text-text-primary";
 export declare const groupLabelClass = "px-3 py-1 text-label text-text-muted select-none";
 export declare const separatorClass = "my-1 h-px bg-border-default";
-export declare const errorTextClass = "mt-1 text-label text-status-critical-fg";
-export declare const descriptionClass = "mt-1 text-label text-text-muted";
+export declare const errorTextClass = "mt-1 text-label text-status-critical-on-surface";
+export declare const descriptionClass = "mt-1 text-caption text-text-secondary";
 export declare const labelClass = "text-label text-text-primary";
 export type TriggerVariantProps = VariantProps<typeof triggerVariants>;
 //# sourceMappingURL=select.variants.d.ts.map

package/dist/components/select/select.variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.variants.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,eAAO,MAAM,eAAe;;;8EAqD3B,CAAC;AAGF,eAAO,MAAM,gBAAgB,6BAA6B,CAAC;AAG3D,eAAO,MAAM,YAAY,QAKd,CAAC;AAYZ,eAAO,MAAM,cAAc;;8EAoB1B,CAAC;AAGF,eAAO,MAAM,UAAU,iDAAiD,CAAC;AAGzE,eAAO,MAAM,eAAe,qDAAqD,CAAC;AAGlF,eAAO,MAAM,cAAc,gCAAgC,CAAC;AAG5D,eAAO,MAAM,cAAc,4CAA4C,CAAC;AAExE,eAAO,MAAM,gBAAgB,oCAAoC,CAAC;AAElE,eAAO,MAAM,UAAU,iCAAiC,CAAC;AAEzD,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}
+{"version":3,"file":"select.variants.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,eAAO,MAAM,eAAe;;;8EAqD3B,CAAC;AAGF,eAAO,MAAM,gBAAgB,6BAA6B,CAAC;AAG3D,eAAO,MAAM,YAAY,QAKd,CAAC;AAYZ,eAAO,MAAM,cAAc;;8EAoB1B,CAAC;AAGF,eAAO,MAAM,UAAU,iDAAiD,CAAC;AAGzE,eAAO,MAAM,eAAe,qDAAqD,CAAC;AAGlF,eAAO,MAAM,cAAc,gCAAgC,CAAC;AAG5D,eAAO,MAAM,cAAc,oDAAoD,CAAC;AAIhF,eAAO,MAAM,gBAAgB,0CAA0C,CAAC;AAExE,eAAO,MAAM,UAAU,iCAAiC,CAAC;AAEzD,MAAM,MAAM,mBAAmB,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC"}

package/dist/components/select/select.variants.js

@@ -84,8 +84,8 @@ const optionVariants = cva(
 const checkClass = "absolute end-2 inline-flex text-text-primary";
 const groupLabelClass = "px-3 py-1 text-label text-text-muted select-none";
 const separatorClass = "my-1 h-px bg-border-default";
-const errorTextClass = "mt-1 text-label text-status-critical-fg";
-const descriptionClass = "mt-1 text-label text-text-muted";
+const errorTextClass = "mt-1 text-label text-status-critical-on-surface";
+const descriptionClass = "mt-1 text-caption text-text-secondary";
 const labelClass = "text-label text-text-primary";
 export {
   checkClass,

package/dist/components/select/select.variants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/select/select.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// Trigger: control-* tier surface, secondary hover fill, focus ring that persists\n// while open, strong border in error, target-size floor, base+verdify motion.\nexport const triggerVariants = cva(\n  [\n    \"inline-flex items-center justify-between gap-2 rounded-(--radius-md) px-3\",\n    \"bg-control-bg text-control-fg border border-control-border\",\n    \"hover:bg-action-secondary-bg-hover cursor-pointer select-none\",\n    // DEC-A — the trigger is a form field, so its value SIZE is text-base (16px): the\n    // iOS no-zoom reset is a hard floor that holds on EVERY size. The brand type ROLE\n    // (line-height + letter-spacing) rides along via the role-suffix vars set per size\n    // below. text-body itself (a 15px font-size) is NEVER bound on the trigger — under\n    // the role-aware cn it collapses against text-base, and 15px reintroduces the iOS\n    // focus zoom the reset exists to prevent. So the font-size stays text-base across\n    // sizes; only the leading/tracking role and the padding density shift.\n    \"text-base\",\n    // open/close transition — base duration + verdify easing, never deliberate theatre\n    \"transition-colors duration-(--motion-duration-base) ease-(--motion-easing-verdify)\",\n    // target-size floor: 44px touch / 40px pointer\n    \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n    // visible 2px signal-blue ring at 2px offset; persists while the listbox is open\n    \"outline-none\",\n    \"focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n    \"data-[state=open]:ring-2 data-[state=open]:ring-border-focus data-[state=open]:ring-offset-2\",\n    // error: strong border treatment, driven by aria-invalid\n    \"aria-invalid:border-border-strong\",\n    // disabled: out of tab order (Radix sets data-disabled), reduced emphasis\n    \"data-[disabled]:pointer-events-none data-[disabled]:cursor-default\",\n    \"disabled:text-text-disabled data-[disabled]:text-text-disabled\",\n  ],\n  {\n    variants: {\n      // DEC-B: @verdify/tokens exposes only target-size FLOORS (44px / 40px), no\n      // height scale. Every size anchors the shared floor (min-h-, in the base) and\n      // NEVER sets a fixed height below it (a11y). Each size is TYPE-ROLE + vertical\n      // padding (density) ABOVE the floor; the resting height EMERGES from the padding\n      // and grows monotonically sm <= md <= lg. Because the trigger is a form field\n      // (DEC-A), the value font-SIZE is pinned to text-base in the base — so here the\n      // type role shifts only through the brand line-height + letter-spacing role\n      // suffix (NOT the font-size), tightening at sm (caption metrics) and loosening at\n      // lg (body-lg metrics). The padding ladder is --space-1 (.25rem) <= --space-2\n      // (.5rem) <= --space-3 (.75rem), all >= the floor. (An earlier build set fixed\n      // h-(--size-target-*), which made lg SHORTER than sm/md on desktop — the inverse\n      // of the requirement — and is removed.)\n      size: {\n        sm: \"leading-(--text-caption--line-height) tracking-(--text-caption--letter-spacing) py-(--space-1)\",\n        md: \"leading-(--text-body--line-height) tracking-(--text-body--letter-spacing) py-(--space-2)\",\n        lg: \"leading-(--text-body-lg--line-height) tracking-(--text-body-lg--letter-spacing) py-(--space-3)\",\n      },\n      width: {\n        auto: \"w-auto\",\n        full: \"w-full\",\n      },\n    },\n    defaultVariants: { size: \"md\", width: \"auto\" },\n  },\n);\n\n// Placeholder text: de-emphasised, never the accessible name.\nexport const placeholderClass = \"text-control-placeholder\";\n\n// Listbox: raised surface, outer border, md elevation; opens with base motion only.\nexport const listboxClass = [\n  \"z-50 overflow-hidden rounded-(--radius-md) p-1\",\n  \"bg-surface-raised border border-surface-border shadow-(--shadow-md)\",\n  \"transition-opacity duration-(--motion-duration-base) ease-(--motion-easing-verdify)\",\n  \"motion-reduce:transition-none\",\n].join(\" \");\n\n// Option row: primary label, secondary hover/active fill, target-row floor.\n// DEC-B: the option row is parameterized by the SAME size the trigger is, so the\n// listbox density tracks the trigger. It anchors the shared target-row floor\n// (min-h-, in the base) and NEVER sets a fixed height below it; each size is\n// TYPE-ROLE + vertical padding (density) ABOVE the floor, the row height emerging\n// from the padding. Unlike the trigger, an option row is NOT a focused text field —\n// the iOS no-zoom reset does not apply — so here the type role shifts through the\n// actual font-SIZE role: caption (sm) < body (md) < body-lg (lg), paired with the\n// identical --space-1 <= --space-2 <= --space-3 padding ladder as the trigger. Both\n// type role and density therefore climb monotonically sm <= md <= lg, all >= floor.\nexport const optionVariants = cva(\n  [\n    \"relative flex items-center gap-2 rounded-(--radius-md) pe-8 ps-3\",\n    \"text-text-primary outline-none cursor-pointer select-none\",\n    \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n    // active (highlighted) option uses the secondary hover fill\n    \"data-[highlighted]:bg-action-secondary-bg-hover data-[highlighted]:outline-none\",\n    // disabled option: reduced emphasis, not operable\n    \"data-[disabled]:text-text-disabled data-[disabled]:pointer-events-none\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"text-caption py-(--space-1)\",\n        md: \"text-body py-(--space-2)\",\n        lg: \"text-body-lg py-(--space-3)\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n// The selected-option check — a NEUTRAL mark (text-text-primary), never a status color.\nexport const checkClass = \"absolute end-2 inline-flex text-text-primary\";\n\n// Group heading: non-selectable, muted.\nexport const groupLabelClass = \"px-3 py-1 text-label text-text-muted select-none\";\n\n// Listbox/option dividers.\nexport const separatorClass = \"my-1 h-px bg-border-default\";\n\n// Error-slot text — status critical foreground.\nexport const errorTextClass = \"mt-1 text-label text-status-critical-fg\";\n// Non-error helper text — muted.\nexport const descriptionClass = \"mt-1 text-label text-text-muted\";\n// The visible, associated label.\nexport const labelClass = \"text-label text-text-primary\";\n\nexport type TriggerVariantProps = VariantProps<typeof triggerVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAIhC,MAAM,kBAAkB;AAAA,EAC7B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAaR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,MAAM,MAAM,OAAO,OAAO;AAAA,EAC/C;AACF;AAGO,MAAM,mBAAmB;AAGzB,MAAM,eAAe;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAYH,MAAM,iBAAiB;AAAA,EAC5B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,MAAM,KAAK;AAAA,EAChC;AACF;AAGO,MAAM,aAAa;AAGnB,MAAM,kBAAkB;AAGxB,MAAM,iBAAiB;AAGvB,MAAM,iBAAiB;AAEvB,MAAM,mBAAmB;AAEzB,MAAM,aAAa;","names":[]}
+{"version":3,"sources":["../../../src/components/select/select.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// Trigger: control-* tier surface, secondary hover fill, focus ring that persists\n// while open, strong border in error, target-size floor, base+verdify motion.\nexport const triggerVariants = cva(\n  [\n    \"inline-flex items-center justify-between gap-2 rounded-(--radius-md) px-3\",\n    \"bg-control-bg text-control-fg border border-control-border\",\n    \"hover:bg-action-secondary-bg-hover cursor-pointer select-none\",\n    // DEC-A — the trigger is a form field, so its value SIZE is text-base (16px): the\n    // iOS no-zoom reset is a hard floor that holds on EVERY size. The brand type ROLE\n    // (line-height + letter-spacing) rides along via the role-suffix vars set per size\n    // below. text-body itself (a 15px font-size) is NEVER bound on the trigger — under\n    // the role-aware cn it collapses against text-base, and 15px reintroduces the iOS\n    // focus zoom the reset exists to prevent. So the font-size stays text-base across\n    // sizes; only the leading/tracking role and the padding density shift.\n    \"text-base\",\n    // open/close transition — base duration + verdify easing, never deliberate theatre\n    \"transition-colors duration-(--motion-duration-base) ease-(--motion-easing-verdify)\",\n    // target-size floor: 44px touch / 40px pointer\n    \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n    // visible 2px signal-blue ring at 2px offset; persists while the listbox is open\n    \"outline-none\",\n    \"focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n    \"data-[state=open]:ring-2 data-[state=open]:ring-border-focus data-[state=open]:ring-offset-2\",\n    // error: strong border treatment, driven by aria-invalid\n    \"aria-invalid:border-border-strong\",\n    // disabled: out of tab order (Radix sets data-disabled), reduced emphasis\n    \"data-[disabled]:pointer-events-none data-[disabled]:cursor-default\",\n    \"disabled:text-text-disabled data-[disabled]:text-text-disabled\",\n  ],\n  {\n    variants: {\n      // DEC-B: @verdify/tokens exposes only target-size FLOORS (44px / 40px), no\n      // height scale. Every size anchors the shared floor (min-h-, in the base) and\n      // NEVER sets a fixed height below it (a11y). Each size is TYPE-ROLE + vertical\n      // padding (density) ABOVE the floor; the resting height EMERGES from the padding\n      // and grows monotonically sm <= md <= lg. Because the trigger is a form field\n      // (DEC-A), the value font-SIZE is pinned to text-base in the base — so here the\n      // type role shifts only through the brand line-height + letter-spacing role\n      // suffix (NOT the font-size), tightening at sm (caption metrics) and loosening at\n      // lg (body-lg metrics). The padding ladder is --space-1 (.25rem) <= --space-2\n      // (.5rem) <= --space-3 (.75rem), all >= the floor. (An earlier build set fixed\n      // h-(--size-target-*), which made lg SHORTER than sm/md on desktop — the inverse\n      // of the requirement — and is removed.)\n      size: {\n        sm: \"leading-(--text-caption--line-height) tracking-(--text-caption--letter-spacing) py-(--space-1)\",\n        md: \"leading-(--text-body--line-height) tracking-(--text-body--letter-spacing) py-(--space-2)\",\n        lg: \"leading-(--text-body-lg--line-height) tracking-(--text-body-lg--letter-spacing) py-(--space-3)\",\n      },\n      width: {\n        auto: \"w-auto\",\n        full: \"w-full\",\n      },\n    },\n    defaultVariants: { size: \"md\", width: \"auto\" },\n  },\n);\n\n// Placeholder text: de-emphasised, never the accessible name.\nexport const placeholderClass = \"text-control-placeholder\";\n\n// Listbox: raised surface, outer border, md elevation; opens with base motion only.\nexport const listboxClass = [\n  \"z-50 overflow-hidden rounded-(--radius-md) p-1\",\n  \"bg-surface-raised border border-surface-border shadow-(--shadow-md)\",\n  \"transition-opacity duration-(--motion-duration-base) ease-(--motion-easing-verdify)\",\n  \"motion-reduce:transition-none\",\n].join(\" \");\n\n// Option row: primary label, secondary hover/active fill, target-row floor.\n// DEC-B: the option row is parameterized by the SAME size the trigger is, so the\n// listbox density tracks the trigger. It anchors the shared target-row floor\n// (min-h-, in the base) and NEVER sets a fixed height below it; each size is\n// TYPE-ROLE + vertical padding (density) ABOVE the floor, the row height emerging\n// from the padding. Unlike the trigger, an option row is NOT a focused text field —\n// the iOS no-zoom reset does not apply — so here the type role shifts through the\n// actual font-SIZE role: caption (sm) < body (md) < body-lg (lg), paired with the\n// identical --space-1 <= --space-2 <= --space-3 padding ladder as the trigger. Both\n// type role and density therefore climb monotonically sm <= md <= lg, all >= floor.\nexport const optionVariants = cva(\n  [\n    \"relative flex items-center gap-2 rounded-(--radius-md) pe-8 ps-3\",\n    \"text-text-primary outline-none cursor-pointer select-none\",\n    \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n    // active (highlighted) option uses the secondary hover fill\n    \"data-[highlighted]:bg-action-secondary-bg-hover data-[highlighted]:outline-none\",\n    // disabled option: reduced emphasis, not operable\n    \"data-[disabled]:text-text-disabled data-[disabled]:pointer-events-none\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"text-caption py-(--space-1)\",\n        md: \"text-body py-(--space-2)\",\n        lg: \"text-body-lg py-(--space-3)\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n// The selected-option check — a NEUTRAL mark (text-text-primary), never a status color.\nexport const checkClass = \"absolute end-2 inline-flex text-text-primary\";\n\n// Group heading: non-selectable, muted.\nexport const groupLabelClass = \"px-3 py-1 text-label text-text-muted select-none\";\n\n// Listbox/option dividers.\nexport const separatorClass = \"my-1 h-px bg-border-default\";\n\n// Error-slot text — status critical foreground.\nexport const errorTextClass = \"mt-1 text-label text-status-critical-on-surface\";\n// Non-error helper text — secondary (informational; mirrors Input's help tone, text-caption per\n// the message scale, text-text-secondary rather than text-muted so it reads at the same legibility\n// floor as Input help text — both carry information the user needs to complete the field).\nexport const descriptionClass = \"mt-1 text-caption text-text-secondary\";\n// The visible, associated label.\nexport const labelClass = \"text-label text-text-primary\";\n\nexport type TriggerVariantProps = VariantProps<typeof triggerVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAIhC,MAAM,kBAAkB;AAAA,EAC7B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAaR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,MACA,OAAO;AAAA,QACL,MAAM;AAAA,QACN,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,MAAM,MAAM,OAAO,OAAO;AAAA,EAC/C;AACF;AAGO,MAAM,mBAAmB;AAGzB,MAAM,eAAe;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,EAAE,KAAK,GAAG;AAYH,MAAM,iBAAiB;AAAA,EAC5B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,MAAM,KAAK;AAAA,EAChC;AACF;AAGO,MAAM,aAAa;AAGnB,MAAM,kBAAkB;AAGxB,MAAM,iBAAiB;AAGvB,MAAM,iBAAiB;AAIvB,MAAM,mBAAmB;AAEzB,MAAM,aAAa;","names":[]}

package/dist/components/table/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAaL,KAAK,qBAAqB,EAC3B,MAAM,kBAAkB,CAAC;AAE1B,iHAAiH;AACjH,MAAM,MAAM,YAAY,GAAG,aAAa,GAAG,SAAS,CAAC;AACrD,mIAAmI;AACnI,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AACxD,mIAAmI;AACnI,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,qBAAqB,CAAC,QAAQ,CAAC,CAAC,CAAC;AAC3E,mGAAmG;AACnG,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,CAAC;AAcrE,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC7E,qGAAqG;IACrG,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,+GAA+G;IAC/G,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,KAAK,qFAyBhB,CAAC;AAIH,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAE9E;;;;GAIG;AACH,eAAO,MAAM,YAAY,mGAIxB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAE7E;;;;GAIG;AACH,eAAO,MAAM,WAAW,kGAKvB,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC;IACnF;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mFAAmF;IACnF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+GAA+G;IAC/G,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;GAKG;AACH,eAAO,MAAM,SAAS,gGA0BrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAE7E;;;GAGG;AACH,eAAO,MAAM,WAAW,kGAMvB,CAAC;AAEF,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC;IAC9E;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,2FAYpB,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC;IAClF;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,+HAA+H;IAC/H,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkCD;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,6FAkCpB,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;AAE/E;;;;GAIG;AACH,eAAO,MAAM,cAAc,kGAY1B,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC;IAClF;;;;;OAKG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,gIAAgI;IAChI,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yHAAyH;IACzH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,6FAYpB,CAAC;AAEH,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC;IACnF,mGAAmG;IACnG,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;GAIG;AACH,eAAO,MAAM,UAAU,8FAUtB,CAAC"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAaL,KAAK,qBAAqB,EAC3B,MAAM,kBAAkB,CAAC;AAE1B,iHAAiH;AACjH,MAAM,MAAM,YAAY,GAAG,aAAa,GAAG,SAAS,CAAC;AACrD,mIAAmI;AACnI,MAAM,MAAM,SAAS,GAAG,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AACxD,mIAAmI;AACnI,MAAM,MAAM,eAAe,GAAG,WAAW,CAAC,qBAAqB,CAAC,QAAQ,CAAC,CAAC,CAAC;AAC3E,mGAAmG;AACnG,MAAM,MAAM,kBAAkB,GAAG,WAAW,GAAG,YAAY,GAAG,MAAM,CAAC;AAcrE,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IAC7E,qGAAqG;IACrG,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,+GAA+G;IAC/G,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,KAAK,qFAgChB,CAAC;AAIH,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAE9E;;;;GAIG;AACH,eAAO,MAAM,YAAY,mGAIxB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAE7E;;;;GAIG;AACH,eAAO,MAAM,WAAW,kGAKvB,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC;IACnF;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mFAAmF;IACnF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,+GAA+G;IAC/G,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;GAKG;AACH,eAAO,MAAM,SAAS,gGA0BrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,uBAAuB,CAAC,CAAC;AAE7E;;;GAGG;AACH,eAAO,MAAM,WAAW,kGAMvB,CAAC;AAEF,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC;IAC9E;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,2FAYpB,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC;IAClF;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,+HAA+H;IAC/H,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkCD;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,6FAkCpB,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;AAE/E;;;;GAIG;AACH,eAAO,MAAM,cAAc,kGAY1B,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC;IAClF;;;;;OAKG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,gIAAgI;IAChI,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yHAAyH;IACzH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,SAAS,6FAYpB,CAAC;AAEH,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,gBAAgB,CAAC,oBAAoB,CAAC;IACnF,mGAAmG;IACnG,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;GAIG;AACH,eAAO,MAAM,UAAU,8FAUtB,CAAC"}

package/dist/components/table/table.js

@@ -25,7 +25,7 @@ const Table = React.forwardRef(function Table2({ className, density = "comfortab
   const ctx = React.useMemo(() => ({ density, rule }), [density, rule]);
   const stickyCtx = React.useMemo(() => ({ sticky: stickyHeader }), [stickyHeader]);
   return /* @__PURE__ */ jsx(TableContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(TableStickyContext.Provider, { value: stickyCtx, children: [
-    /* @__PURE__ */ jsx("table", { ref, className: cn(tableVariants(), className), ...props, children }),
+    /* @__PURE__ */ jsx("div", { className: "w-full overflow-x-auto", children: /* @__PURE__ */ jsx("table", { ref, className: cn(tableVariants(), className), ...props, children }) }),
     /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: announcement })
   ] }) });
 });