@verdify/ui 0.2.1 → 0.3.0

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/accordion/accordion.variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.variants.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAUlE,eAAO,MAAM,qBAAqB,oFAIhC,CAAC;AAOH,eAAO,MAAM,wBAAwB,oFA0BnC,CAAC;AAiBH,eAAO,MAAM,0BAA0B,oFAOrC,CAAC;AAOH,eAAO,MAAM,wBAAwB,oFAGnC,CAAC;AAIH,eAAO,MAAM,0BAA0B,kCAAkC,CAAC;AAE1E,MAAM,MAAM,yBAAyB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACnF,MAAM,MAAM,4BAA4B,GAAG,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC"}
+{"version":3,"file":"accordion.variants.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAWlE,eAAO,MAAM,qBAAqB,oFAIhC,CAAC;AAOH,eAAO,MAAM,wBAAwB,oFA0BnC,CAAC;AAiBH,eAAO,MAAM,0BAA0B,oFAOrC,CAAC;AAOH,eAAO,MAAM,wBAAwB,oFAGnC,CAAC;AAIH,eAAO,MAAM,0BAA0B,kCAAkC,CAAC;AAE1E,MAAM,MAAM,yBAAyB,GAAG,YAAY,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACnF,MAAM,MAAM,4BAA4B,GAAG,YAAY,CAAC,OAAO,wBAAwB,CAAC,CAAC"}

package/dist/components/accordion/accordion.variants.js

@@ -1,4 +1,5 @@
 import { cva } from "class-variance-authority";
+import { focusRing } from "../../lib/focus-ring";
 const accordionItemVariants = cva([
   // overflow-hidden so the panel reveal clips to the item radius; logical text start (G-U6)
   "overflow-hidden rounded-(--radius-md) border border-border-default",
@@ -24,7 +25,7 @@ const accordionTriggerVariants = cva([
   "min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop) py-(--space-2)",
   // visible 2px signal-blue ring at 2px offset; persists whether the item is open or closed
   "outline-none",
-  "focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2",
+  focusRing,
   // focused: the trigger border emphasises to the focus color (spec §5 --color-border-focus)
   "focus-visible:border-border-focus",
   // disabled — DEC-C: out of the tab order (native disabled), reduced emphasis via the disabled

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/accordion/accordion.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// Accordion is a NEUTRAL layout container (spec §1/§3/§8): brand violet and Verified Green\n// are accents, neutrals carry the surface, so NOTHING here binds a --color-action-primary-*\n// or --color-status-* fill. An expanded section is not \"selected\" or \"verified\" — the open\n// item is shown by the indicator + aria-expanded, never by a brand/status fill. The only\n// token-binding site is this file (skill §5 hard rule).\n\n// The item: one collapsible section. A neutral hairline divider (border-border-default) and\n// the item radius bound the header + its panel. The root stacks items; the item draws the box.\nexport const accordionItemVariants = cva([\n  // overflow-hidden so the panel reveal clips to the item radius; logical text start (G-U6)\n  \"overflow-hidden rounded-(--radius-md) border border-border-default\",\n  \"text-start\",\n]);\n\n// The trigger: the focusable <button> inside the heading. A control-* tier surface at rest;\n// the neutral secondary hover fill on hover AND on press (pressed is acknowledged without\n// theatre — restraint over volume, spec §4 Pressed); the trigger title in the label type\n// role; the persistent focus ring; the target-size floor; base reveal motion (NEVER the\n// deliberate verified-check theatre); DEC-C disabled via the disabled TOKEN, never opacity.\nexport const accordionTriggerVariants = cva([\n  // layout: full-width header row, title on the inline-start, indicator on the inline-end.\n  // `group` anchors the trigger so the child indicator can react to its data-disabled state\n  // (Radix sets data-disabled + native disabled on this button) without prop plumbing.\n  \"group flex w-full items-center justify-between gap-(--space-2) px-(--space-4)\",\n  // rest surface: control-* tier (neutral), with the at-rest control border\n  \"bg-control-bg text-control-fg border-control-border\",\n  // trigger title type role + medium weight; cursor affordance\n  \"text-label font-medium cursor-pointer select-none\",\n  // hover AND pressed lift to the neutral secondary hover fill (spec §4) — never a brand fill\n  \"hover:bg-action-secondary-bg-hover active:bg-action-secondary-bg-hover\",\n  // expand/collapse is a PLAIN reveal — base duration + verdify easing, instant under reduced\n  // motion. Never the 350ms VerifiedBadge-only theatre duration (G-U3 motion-theatre gate).\n  \"transition-colors duration-(--motion-duration-base) ease-(--motion-easing-verdify)\",\n  \"motion-reduce:duration-(--motion-duration-instant)\",\n  // target-size floor: 44px touch / 40px pointer (§7 2.5.8), padding density above it; the\n  // resting height EMERGES from the floor + py, never a fixed height below the a11y floor (DEC-B)\n  \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop) py-(--space-2)\",\n  // visible 2px signal-blue ring at 2px offset; persists whether the item is open or closed\n  \"outline-none\",\n  \"focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n  // focused: the trigger border emphasises to the focus color (spec §5 --color-border-focus)\n  \"focus-visible:border-border-focus\",\n  // disabled — DEC-C: out of the tab order (native disabled), reduced emphasis via the disabled\n  // TOKEN on the title AND the indicator (below), never a blanket opacity on the control\n  \"disabled:pointer-events-none disabled:text-text-disabled\",\n]);\n\n// The indicator glyph: a neutral chevron (ghost fg), --size-icon-md, rotating to mirror the\n// expanded state. Decorative (aria-hidden); aria-expanded carries the open state, not the glyph.\n// It rotates 180deg when the item is open (data-state=open on the trigger), with the same base\n// reveal motion.\n//\n// DEC-C / spec §4·§5: the glyph is drawn with stroke=\"currentColor\", so its color is whatever\n// `text-*` resolves to on the SVG. At rest that is the distinct indicator color\n// --color-action-ghost-fg (spec §5 assigns ghost-fg to the indicator, NOT the trigger title's\n// control-fg). When the item is disabled it must flip to --color-text-disabled — the SAME token\n// the title dims to (spec §4 \"reduced emphasis\", §5 \"Disabled item's title AND indicator\"). We\n// flip the glyph color via the trigger's live data-disabled state (Radix mirrors the item's\n// disabled onto the trigger button as data-disabled + native disabled). This realizes the\n// Checkbox color-flip principle (text-action-ghost-fg -> text-text-disabled) using Select's\n// data-[disabled] mechanism (select.variants.ts) — appropriate here because the disabled state\n// is Radix-context-driven, not a prop on AccordionTrigger, so a prop-fed cva boolean can't see it.\nexport const accordionIndicatorVariants = cva([\n  \"h-(--size-icon-md) w-(--size-icon-md) shrink-0 text-action-ghost-fg\",\n  \"group-data-[disabled]:text-text-disabled\",\n  \"transition-transform duration-(--motion-duration-base) ease-(--motion-easing-verdify)\",\n  \"motion-reduce:duration-(--motion-duration-instant)\",\n  // rotate the chevron when the parent trigger is open (Radix sets data-state on the trigger)\n  \"data-[state=open]:rotate-180\",\n]);\n\n// The panel: the collapsible region. The canvas surface, the primary body text at the body\n// type role, panel insets from --space-4. A divider above it (border-t) continues the neutral\n// hairline from the item. The reveal animates the Radix content-height var (a STRUCTURAL keyword\n// arbitrary property, not a raw value), base duration, collapsed to its endpoints under reduced\n// motion.\nexport const accordionContentVariants = cva([\n  \"overflow-hidden bg-surface-canvas text-text-primary text-body\",\n  \"border-t border-border-default\",\n]);\n\n// The panel inner padding wrapper — the actual content insets (Radix Content clips height, so\n// the padding lives on an inner element to avoid jumpy collapse).\nexport const accordionContentInnerClass = \"px-(--space-4) py-(--space-4)\";\n\nexport type AccordionItemVariantProps = VariantProps<typeof accordionItemVariants>;\nexport type AccordionTriggerVariantProps = VariantProps<typeof accordionTriggerVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAUhC,MAAM,wBAAwB,IAAI;AAAA;AAAA,EAEvC;AAAA,EACA;AACF,CAAC;AAOM,MAAM,2BAA2B,IAAI;AAAA;AAAA;AAAA;AAAA,EAI1C;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA;AAAA;AAAA,EAGA;AAAA,EACA;AAAA;AAAA;AAAA,EAGA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA;AAAA;AAAA,EAGA;AACF,CAAC;AAiBM,MAAM,6BAA6B,IAAI;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AACF,CAAC;AAOM,MAAM,2BAA2B,IAAI;AAAA,EAC1C;AAAA,EACA;AACF,CAAC;AAIM,MAAM,6BAA6B;","names":[]}
+{"version":3,"sources":["../../../src/components/accordion/accordion.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport { focusRing } from \"../../lib/focus-ring\";\n\n// Accordion is a NEUTRAL layout container (spec §1/§3/§8): brand violet and Verified Green\n// are accents, neutrals carry the surface, so NOTHING here binds a --color-action-primary-*\n// or --color-status-* fill. An expanded section is not \"selected\" or \"verified\" — the open\n// item is shown by the indicator + aria-expanded, never by a brand/status fill. The only\n// token-binding site is this file (skill §5 hard rule).\n\n// The item: one collapsible section. A neutral hairline divider (border-border-default) and\n// the item radius bound the header + its panel. The root stacks items; the item draws the box.\nexport const accordionItemVariants = cva([\n  // overflow-hidden so the panel reveal clips to the item radius; logical text start (G-U6)\n  \"overflow-hidden rounded-(--radius-md) border border-border-default\",\n  \"text-start\",\n]);\n\n// The trigger: the focusable <button> inside the heading. A control-* tier surface at rest;\n// the neutral secondary hover fill on hover AND on press (pressed is acknowledged without\n// theatre — restraint over volume, spec §4 Pressed); the trigger title in the label type\n// role; the persistent focus ring; the target-size floor; base reveal motion (NEVER the\n// deliberate verified-check theatre); DEC-C disabled via the disabled TOKEN, never opacity.\nexport const accordionTriggerVariants = cva([\n  // layout: full-width header row, title on the inline-start, indicator on the inline-end.\n  // `group` anchors the trigger so the child indicator can react to its data-disabled state\n  // (Radix sets data-disabled + native disabled on this button) without prop plumbing.\n  \"group flex w-full items-center justify-between gap-(--space-2) px-(--space-4)\",\n  // rest surface: control-* tier (neutral), with the at-rest control border\n  \"bg-control-bg text-control-fg border-control-border\",\n  // trigger title type role + medium weight; cursor affordance\n  \"text-label font-medium cursor-pointer select-none\",\n  // hover AND pressed lift to the neutral secondary hover fill (spec §4) — never a brand fill\n  \"hover:bg-action-secondary-bg-hover active:bg-action-secondary-bg-hover\",\n  // expand/collapse is a PLAIN reveal — base duration + verdify easing, instant under reduced\n  // motion. Never the 350ms VerifiedBadge-only theatre duration (G-U3 motion-theatre gate).\n  \"transition-colors duration-(--motion-duration-base) ease-(--motion-easing-verdify)\",\n  \"motion-reduce:duration-(--motion-duration-instant)\",\n  // target-size floor: 44px touch / 40px pointer (§7 2.5.8), padding density above it; the\n  // resting height EMERGES from the floor + py, never a fixed height below the a11y floor (DEC-B)\n  \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop) py-(--space-2)\",\n  // visible 2px signal-blue ring at 2px offset; persists whether the item is open or closed\n  \"outline-none\",\n  focusRing,\n  // focused: the trigger border emphasises to the focus color (spec §5 --color-border-focus)\n  \"focus-visible:border-border-focus\",\n  // disabled — DEC-C: out of the tab order (native disabled), reduced emphasis via the disabled\n  // TOKEN on the title AND the indicator (below), never a blanket opacity on the control\n  \"disabled:pointer-events-none disabled:text-text-disabled\",\n]);\n\n// The indicator glyph: a neutral chevron (ghost fg), --size-icon-md, rotating to mirror the\n// expanded state. Decorative (aria-hidden); aria-expanded carries the open state, not the glyph.\n// It rotates 180deg when the item is open (data-state=open on the trigger), with the same base\n// reveal motion.\n//\n// DEC-C / spec §4·§5: the glyph is drawn with stroke=\"currentColor\", so its color is whatever\n// `text-*` resolves to on the SVG. At rest that is the distinct indicator color\n// --color-action-ghost-fg (spec §5 assigns ghost-fg to the indicator, NOT the trigger title's\n// control-fg). When the item is disabled it must flip to --color-text-disabled — the SAME token\n// the title dims to (spec §4 \"reduced emphasis\", §5 \"Disabled item's title AND indicator\"). We\n// flip the glyph color via the trigger's live data-disabled state (Radix mirrors the item's\n// disabled onto the trigger button as data-disabled + native disabled). This realizes the\n// Checkbox color-flip principle (text-action-ghost-fg -> text-text-disabled) using Select's\n// data-[disabled] mechanism (select.variants.ts) — appropriate here because the disabled state\n// is Radix-context-driven, not a prop on AccordionTrigger, so a prop-fed cva boolean can't see it.\nexport const accordionIndicatorVariants = cva([\n  \"h-(--size-icon-md) w-(--size-icon-md) shrink-0 text-action-ghost-fg\",\n  \"group-data-[disabled]:text-text-disabled\",\n  \"transition-transform duration-(--motion-duration-base) ease-(--motion-easing-verdify)\",\n  \"motion-reduce:duration-(--motion-duration-instant)\",\n  // rotate the chevron when the parent trigger is open (Radix sets data-state on the trigger)\n  \"data-[state=open]:rotate-180\",\n]);\n\n// The panel: the collapsible region. The canvas surface, the primary body text at the body\n// type role, panel insets from --space-4. A divider above it (border-t) continues the neutral\n// hairline from the item. The reveal animates the Radix content-height var (a STRUCTURAL keyword\n// arbitrary property, not a raw value), base duration, collapsed to its endpoints under reduced\n// motion.\nexport const accordionContentVariants = cva([\n  \"overflow-hidden bg-surface-canvas text-text-primary text-body\",\n  \"border-t border-border-default\",\n]);\n\n// The panel inner padding wrapper — the actual content insets (Radix Content clips height, so\n// the padding lives on an inner element to avoid jumpy collapse).\nexport const accordionContentInnerClass = \"px-(--space-4) py-(--space-4)\";\n\nexport type AccordionItemVariantProps = VariantProps<typeof accordionItemVariants>;\nexport type AccordionTriggerVariantProps = VariantProps<typeof accordionTriggerVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AACvC,SAAS,iBAAiB;AAUnB,MAAM,wBAAwB,IAAI;AAAA;AAAA,EAEvC;AAAA,EACA;AACF,CAAC;AAOM,MAAM,2BAA2B,IAAI;AAAA;AAAA;AAAA;AAAA,EAI1C;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA;AAAA;AAAA,EAGA;AAAA,EACA;AAAA;AAAA;AAAA,EAGA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA;AAAA;AAAA,EAGA;AACF,CAAC;AAiBM,MAAM,6BAA6B,IAAI;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AACF,CAAC;AAOM,MAAM,2BAA2B,IAAI;AAAA,EAC1C;AAAA,EACA;AACF,CAAC;AAIM,MAAM,6BAA6B;","names":[]}

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/alert/alert.variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert.variants.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAoBlE,eAAO,MAAM,aAAa;;8EA4CzB,CAAC;AAQF,eAAO,MAAM,iBAAiB;;8EAU5B,CAAC;AAIH,eAAO,MAAM,iBAAiB,iDAAiD,CAAC;AAKhF,eAAO,MAAM,eAAe,8BAA8B,CAAC;AAM3D,eAAO,MAAM,cAAc,gCAAgC,CAAC;AAM5D,eAAO,MAAM,iBAAiB,qDAAqD,CAAC;AAUpF,eAAO,MAAM,iBAAiB,QAOmE,CAAC;AAKlG,eAAO,MAAM,sBAAsB,0CAA0C,CAAC;AAE9E,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}
+{"version":3,"file":"alert.variants.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAqBlE,eAAO,MAAM,aAAa;;8EA4CzB,CAAC;AAQF,eAAO,MAAM,iBAAiB;;8EAU5B,CAAC;AAIH,eAAO,MAAM,iBAAiB,iDAAiD,CAAC;AAKhF,eAAO,MAAM,eAAe,8BAA8B,CAAC;AAM3D,eAAO,MAAM,cAAc,gCAAgC,CAAC;AAM5D,eAAO,MAAM,iBAAiB,qDAAqD,CAAC;AAUpF,eAAO,MAAM,iBAAiB,QAOnB,CAAC;AAKZ,eAAO,MAAM,sBAAsB,0CAA0C,CAAC;AAE9E,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}

package/dist/components/alert/alert.variants.js

@@ -1,4 +1,5 @@
 import { cva } from "class-variance-authority";
+import { focusRing } from "../../lib/focus-ring";
 const alertVariants = cva(
   [
     // layout: the bordered container is a row — leading status icon, then the stacked
@@ -19,7 +20,7 @@ const alertVariants = cva(
     // the caller passes tabIndex={-1} for that move. When it is focused it shows the visible 2px
     // ring at a 2px offset, and the ring is never removed (2.4.7).
     "outline-none",
-    "focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2"
+    focusRing
   ],
   {
     variants: {
@@ -59,7 +60,7 @@ const alertContentClass = "flex min-w-0 flex-1 flex-col gap-(--space-2)";
 const alertTitleClass = "text-h3 text-text-primary";
 const alertBodyClass = "text-body text-text-primary";
 const alertActionsClass = "flex items-center gap-(--space-2) mt-(--space-1)";
-const alertDismissClass = "inline-flex shrink-0 items-center justify-center rounded-(--radius-md) text-action-ghost-fg hover:bg-action-ghost-bg-hover transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify) motion-reduce:duration-(--motion-duration-instant) min-h-(--size-target-mobile) min-w-(--size-target-mobile) sm:min-h-(--size-target-desktop) sm:min-w-(--size-target-desktop) outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2";
+const alertDismissClass = "inline-flex shrink-0 items-center justify-center rounded-(--radius-md) text-action-ghost-fg hover:bg-action-ghost-bg-hover transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify) motion-reduce:duration-(--motion-duration-instant) min-h-(--size-target-mobile) min-w-(--size-target-mobile) sm:min-h-(--size-target-desktop) sm:min-w-(--size-target-desktop) " + focusRing;
 const alertDismissGlyphClass = "h-(--size-icon-sm) w-(--size-icon-sm)";
 export {
   alertActionsClass,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/alert/alert.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// An Alert is an inline, in-page feedback surface — a message that reports the status of a\n// region or task and, where one exists, what to do next (spec §1). It is NOT the brand: its\n// color comes from the status it reports, never from Sovereign Violet, so this file binds\n// nothing from the --color-action-* tier (brand != state, G-U2). This is the ONLY token-binding\n// site (skill §5 hard rule).\n//\n// The alert is a message surface, not a control (spec §4): the container has no hover, pressed,\n// loading, or disabled state — those belong to the controls inside it (the actions and the\n// dismiss button, which carry their own tokens). The container's only own state is FOCUS, shown\n// only when it is programmatically focused to move a reader to a blocking error; the focus ring\n// is in the base and is never removed (spec §4/§7).\n//\n// Container fill (spec §3/§5): every variant paints the SAME one neutral raised surface — the\n// status trio's `-bg` resolves to that surface — so the status color is a quiet TINT and EDGE,\n// not a flood. The meaning is carried by the border (the status -border) and the decorative\n// leading icon (the BRIGHT status accent, tokens 0.6.0), never a saturated fill; restraint over\n// volume. Status is paired with the fixed per-variant icon and the readable title/body text so it\n// survives for a reader who cannot perceive color (WCAG 1.4.1, spec §8).\nexport const alertVariants = cva(\n  [\n    // layout: the bordered container is a row — leading status icon, then the stacked\n    // title/body/actions content; logical-property gap so it mirrors under dir=\"rtl\" (G-U6)\n    \"flex items-start gap-(--space-2)\",\n    // the bordered container: internal padding off the edge, the md corner radius, a 1px edge\n    \"rounded-(--radius-md) border p-(--space-3)\",\n    // logical-property text alignment so the alert mirrors under dir=\"rtl\" (G-U6)\n    \"text-start\",\n    // appearance + dismiss motion: the FAST functional duration on verdify easing, collapsing to\n    // the instant endpoint under reduced motion (spec §5). Even a `verified` alert fades in on\n    // the fast duration — the 350ms VerifiedBadge-only theatre is NEVER borrowed by an alert\n    // appearing (G-U3 motion-theatre gate).\n    \"transition-[opacity,transform] duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n    \"motion-reduce:duration-(--motion-duration-instant)\",\n    // FOCUS: the container takes focus only when programmatically focused to move a reader to a\n    // blocking error (spec §4/§6/§7). It is NOT a tab stop by default (no tabIndex set in tsx);\n    // the caller passes tabIndex={-1} for that move. When it is focused it shows the visible 2px\n    // ring at a 2px offset, and the ring is never removed (2.4.7).\n    \"outline-none\",\n    \"focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n  ],\n  {\n    variants: {\n      // STRUCTURAL axis = spec §3: the status the alert reports. The four map one-to-one to the\n      // --color-status-* trios; there is no neutral or brand-colored alert. Each trio tints the\n      // surface (-bg = the one neutral raised surface) and edges it (-border); the decorative\n      // leading icon takes the matching -accent (the readable title/body keep their AA text\n      // tokens). NONE binds --color-action-* (brand != state, spec §3/§8).\n      variant: {\n        // a verification succeeded / a claim is proven — the in-product Verified Green status,\n        // NEVER the brand and NEVER generic success (spec §3/§8)\n        verified: \"bg-status-verified-bg border-status-verified-border\",\n        // neutral, informational, needs no action — the lowest-urgency variant (spec §3)\n        signal: \"bg-status-signal-bg border-status-signal-border\",\n        // needs attention but not yet broken — a soft limit, a pending step (spec §3)\n        caution: \"bg-status-caution-bg border-status-caution-border\",\n        // something failed or blocks progress — a rejected proof, a failed validation (spec §3)\n        critical: \"bg-status-critical-bg border-status-critical-border\",\n      },\n    },\n    // the lowest-urgency status is the default; a louder status is spent only when warranted\n    defaultVariants: { variant: \"signal\" },\n  },\n);\n\n// The leading status glyph (spec §2/§5): one fixed per-variant icon at the sm icon role. It\n// pairs with the color AND the text so status is never carried by color alone (1.4.1). Because\n// the glyph is DECORATIVE (aria-hidden in tsx) and the message TITLE/body text carries the\n// status meaning, the icon is exempt from the AA text floor and takes the BRIGHT variant ACCENT\n// via the matching --color-status-*-accent (tokens 0.6.0) — the vivid status color reads as an\n// emphasis mark on the quiet surface, while the readable title/body keep their AA text tokens.\nexport const alertIconVariants = cva(\"inline-flex shrink-0 h-(--size-icon-sm) w-(--size-icon-sm)\", {\n  variants: {\n    variant: {\n      verified: \"text-status-verified-accent\",\n      signal: \"text-status-signal-accent\",\n      caution: \"text-status-caution-accent\",\n      critical: \"text-status-critical-accent\",\n    },\n  },\n  defaultVariants: { variant: \"signal\" },\n});\n\n// The stacked content column (spec §2): title, body, then actions, at the small stacked gap.\n// min-w-0 lets long body text wrap instead of overflowing the row.\nexport const alertContentClass = \"flex min-w-0 flex-1 flex-col gap-(--space-2)\";\n\n// The title (spec §2/§5): a short heading stating the status as a sentence-case statement, in\n// the h3 type role + primary text color. The type role already avoids label tracking — no\n// all-caps, no exclamation mark. Brand violet never paints the title.\nexport const alertTitleClass = \"text-h3 text-text-primary\";\n\n// The body (spec §2/§5): the message, in the body type role + primary text color. It names what\n// happened and, for a caution or critical alert, what to do next — honest about hard things,\n// never blaming the reader (spec §1/§8). Supporting/secondary lines use --color-text-secondary\n// (text-text-secondary) where the caller needs them.\nexport const alertBodyClass = \"text-body text-text-primary\";\n\n// The actions slot (spec §2): at most one or two controls closing the message (a retry, a link\n// to the failing step), holding at most one primary action (restraint over volume). The controls\n// are Buttons — the alert does not restate their --color-action-* bindings. Logical-property row\n// with the small gap; a little top margin separates it from the body.\nexport const alertActionsClass = \"flex items-center gap-(--space-2) mt-(--space-1)\";\n\n// The dismiss control (spec §2/§6/§7): a close button on the inline-end edge, present only on the\n// dismissible variant. A NEUTRAL ghost surface — the glyph in --color-action-ghost-fg at rest,\n// the restrained ghost hover fill (no bg/border at rest) — so the close affordance is neutral and\n// never competes with the status. It is a real focus stop with the target-size floor (44px touch\n// / 40px pointer, spec §7 / DEC-B; the height EMERGES from the floor, never fixed below it), the\n// persistent focus ring, and the fast functional hover motion + verdify easing, instant under\n// reduced motion (G-U3). The ghost fg/hover is the control's OWN action treatment, not the\n// alert's status (the brand != state gate scopes status keys to the container variant only).\nexport const alertDismissClass =\n  \"inline-flex shrink-0 items-center justify-center rounded-(--radius-md) \" +\n  \"text-action-ghost-fg 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) min-w-(--size-target-mobile) \" +\n  \"sm:min-h-(--size-target-desktop) sm:min-w-(--size-target-desktop) \" +\n  \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\";\n\n// The dismiss glyph (spec §7): a neutral X at the sm icon role, drawn with currentColor so it\n// inherits the button's ghost fg. Decorative (aria-hidden in tsx) — the button carries the\n// accessible name.\nexport const alertDismissGlyphClass = \"h-(--size-icon-sm) w-(--size-icon-sm)\";\n\nexport type AlertVariantProps = VariantProps<typeof alertVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAoBhC,MAAM,gBAAgB;AAAA,EAC3B;AAAA;AAAA;AAAA,IAGE;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMR,SAAS;AAAA;AAAA;AAAA,QAGP,UAAU;AAAA;AAAA,QAEV,QAAQ;AAAA;AAAA,QAER,SAAS;AAAA;AAAA,QAET,UAAU;AAAA,MACZ;AAAA,IACF;AAAA;AAAA,IAEA,iBAAiB,EAAE,SAAS,SAAS;AAAA,EACvC;AACF;AAQO,MAAM,oBAAoB,IAAI,8DAA8D;AAAA,EACjG,UAAU;AAAA,IACR,SAAS;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,SAAS;AACvC,CAAC;AAIM,MAAM,oBAAoB;AAK1B,MAAM,kBAAkB;AAMxB,MAAM,iBAAiB;AAMvB,MAAM,oBAAoB;AAU1B,MAAM,oBACX;AAWK,MAAM,yBAAyB;","names":[]}
+{"version":3,"sources":["../../../src/components/alert/alert.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport { focusRing } from \"../../lib/focus-ring\";\n\n// An Alert is an inline, in-page feedback surface — a message that reports the status of a\n// region or task and, where one exists, what to do next (spec §1). It is NOT the brand: its\n// color comes from the status it reports, never from Sovereign Violet, so this file binds\n// nothing from the --color-action-* tier (brand != state, G-U2). This is the ONLY token-binding\n// site (skill §5 hard rule).\n//\n// The alert is a message surface, not a control (spec §4): the container has no hover, pressed,\n// loading, or disabled state — those belong to the controls inside it (the actions and the\n// dismiss button, which carry their own tokens). The container's only own state is FOCUS, shown\n// only when it is programmatically focused to move a reader to a blocking error; the focus ring\n// is in the base and is never removed (spec §4/§7).\n//\n// Container fill (spec §3/§5): every variant paints the SAME one neutral raised surface — the\n// status trio's `-bg` resolves to that surface — so the status color is a quiet TINT and EDGE,\n// not a flood. The meaning is carried by the border (the status -border) and the decorative\n// leading icon (the BRIGHT status accent, tokens 0.6.0), never a saturated fill; restraint over\n// volume. Status is paired with the fixed per-variant icon and the readable title/body text so it\n// survives for a reader who cannot perceive color (WCAG 1.4.1, spec §8).\nexport const alertVariants = cva(\n  [\n    // layout: the bordered container is a row — leading status icon, then the stacked\n    // title/body/actions content; logical-property gap so it mirrors under dir=\"rtl\" (G-U6)\n    \"flex items-start gap-(--space-2)\",\n    // the bordered container: internal padding off the edge, the md corner radius, a 1px edge\n    \"rounded-(--radius-md) border p-(--space-3)\",\n    // logical-property text alignment so the alert mirrors under dir=\"rtl\" (G-U6)\n    \"text-start\",\n    // appearance + dismiss motion: the FAST functional duration on verdify easing, collapsing to\n    // the instant endpoint under reduced motion (spec §5). Even a `verified` alert fades in on\n    // the fast duration — the 350ms VerifiedBadge-only theatre is NEVER borrowed by an alert\n    // appearing (G-U3 motion-theatre gate).\n    \"transition-[opacity,transform] duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n    \"motion-reduce:duration-(--motion-duration-instant)\",\n    // FOCUS: the container takes focus only when programmatically focused to move a reader to a\n    // blocking error (spec §4/§6/§7). It is NOT a tab stop by default (no tabIndex set in tsx);\n    // the caller passes tabIndex={-1} for that move. When it is focused it shows the visible 2px\n    // ring at a 2px offset, and the ring is never removed (2.4.7).\n    \"outline-none\",\n    focusRing,\n  ],\n  {\n    variants: {\n      // STRUCTURAL axis = spec §3: the status the alert reports. The four map one-to-one to the\n      // --color-status-* trios; there is no neutral or brand-colored alert. Each trio tints the\n      // surface (-bg = the one neutral raised surface) and edges it (-border); the decorative\n      // leading icon takes the matching -accent (the readable title/body keep their AA text\n      // tokens). NONE binds --color-action-* (brand != state, spec §3/§8).\n      variant: {\n        // a verification succeeded / a claim is proven — the in-product Verified Green status,\n        // NEVER the brand and NEVER generic success (spec §3/§8)\n        verified: \"bg-status-verified-bg border-status-verified-border\",\n        // neutral, informational, needs no action — the lowest-urgency variant (spec §3)\n        signal: \"bg-status-signal-bg border-status-signal-border\",\n        // needs attention but not yet broken — a soft limit, a pending step (spec §3)\n        caution: \"bg-status-caution-bg border-status-caution-border\",\n        // something failed or blocks progress — a rejected proof, a failed validation (spec §3)\n        critical: \"bg-status-critical-bg border-status-critical-border\",\n      },\n    },\n    // the lowest-urgency status is the default; a louder status is spent only when warranted\n    defaultVariants: { variant: \"signal\" },\n  },\n);\n\n// The leading status glyph (spec §2/§5): one fixed per-variant icon at the sm icon role. It\n// pairs with the color AND the text so status is never carried by color alone (1.4.1). Because\n// the glyph is DECORATIVE (aria-hidden in tsx) and the message TITLE/body text carries the\n// status meaning, the icon is exempt from the AA text floor and takes the BRIGHT variant ACCENT\n// via the matching --color-status-*-accent (tokens 0.6.0) — the vivid status color reads as an\n// emphasis mark on the quiet surface, while the readable title/body keep their AA text tokens.\nexport const alertIconVariants = cva(\"inline-flex shrink-0 h-(--size-icon-sm) w-(--size-icon-sm)\", {\n  variants: {\n    variant: {\n      verified: \"text-status-verified-accent\",\n      signal: \"text-status-signal-accent\",\n      caution: \"text-status-caution-accent\",\n      critical: \"text-status-critical-accent\",\n    },\n  },\n  defaultVariants: { variant: \"signal\" },\n});\n\n// The stacked content column (spec §2): title, body, then actions, at the small stacked gap.\n// min-w-0 lets long body text wrap instead of overflowing the row.\nexport const alertContentClass = \"flex min-w-0 flex-1 flex-col gap-(--space-2)\";\n\n// The title (spec §2/§5): a short heading stating the status as a sentence-case statement, in\n// the h3 type role + primary text color. The type role already avoids label tracking — no\n// all-caps, no exclamation mark. Brand violet never paints the title.\nexport const alertTitleClass = \"text-h3 text-text-primary\";\n\n// The body (spec §2/§5): the message, in the body type role + primary text color. It names what\n// happened and, for a caution or critical alert, what to do next — honest about hard things,\n// never blaming the reader (spec §1/§8). Supporting/secondary lines use --color-text-secondary\n// (text-text-secondary) where the caller needs them.\nexport const alertBodyClass = \"text-body text-text-primary\";\n\n// The actions slot (spec §2): at most one or two controls closing the message (a retry, a link\n// to the failing step), holding at most one primary action (restraint over volume). The controls\n// are Buttons — the alert does not restate their --color-action-* bindings. Logical-property row\n// with the small gap; a little top margin separates it from the body.\nexport const alertActionsClass = \"flex items-center gap-(--space-2) mt-(--space-1)\";\n\n// The dismiss control (spec §2/§6/§7): a close button on the inline-end edge, present only on the\n// dismissible variant. A NEUTRAL ghost surface — the glyph in --color-action-ghost-fg at rest,\n// the restrained ghost hover fill (no bg/border at rest) — so the close affordance is neutral and\n// never competes with the status. It is a real focus stop with the target-size floor (44px touch\n// / 40px pointer, spec §7 / DEC-B; the height EMERGES from the floor, never fixed below it), the\n// persistent focus ring, and the fast functional hover motion + verdify easing, instant under\n// reduced motion (G-U3). The ghost fg/hover is the control's OWN action treatment, not the\n// alert's status (the brand != state gate scopes status keys to the container variant only).\nexport const alertDismissClass =\n  \"inline-flex shrink-0 items-center justify-center rounded-(--radius-md) \" +\n  \"text-action-ghost-fg 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) min-w-(--size-target-mobile) \" +\n  \"sm:min-h-(--size-target-desktop) sm:min-w-(--size-target-desktop) \" +\n  focusRing;\n\n// The dismiss glyph (spec §7): a neutral X at the sm icon role, drawn with currentColor so it\n// inherits the button's ghost fg. Decorative (aria-hidden in tsx) — the button carries the\n// accessible name.\nexport const alertDismissGlyphClass = \"h-(--size-icon-sm) w-(--size-icon-sm)\";\n\nexport type AlertVariantProps = VariantProps<typeof alertVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AACvC,SAAS,iBAAiB;AAoBnB,MAAM,gBAAgB;AAAA,EAC3B;AAAA;AAAA;AAAA,IAGE;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMR,SAAS;AAAA;AAAA;AAAA,QAGP,UAAU;AAAA;AAAA,QAEV,QAAQ;AAAA;AAAA,QAER,SAAS;AAAA;AAAA,QAET,UAAU;AAAA,MACZ;AAAA,IACF;AAAA;AAAA,IAEA,iBAAiB,EAAE,SAAS,SAAS;AAAA,EACvC;AACF;AAQO,MAAM,oBAAoB,IAAI,8DAA8D;AAAA,EACjG,UAAU;AAAA,IACR,SAAS;AAAA,MACP,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,SAAS;AACvC,CAAC;AAIM,MAAM,oBAAoB;AAK1B,MAAM,kBAAkB;AAMxB,MAAM,iBAAiB;AAMvB,MAAM,oBAAoB;AAU1B,MAAM,oBACX,kYAMA;AAKK,MAAM,yBAAyB;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.variants.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAYlE,eAAO,MAAM,kBAAkB,qCAAqC,CAAC;AAIrE,eAAO,MAAM,mBAAmB,6DAC4B,CAAC;AAG7D,eAAO,MAAM,mBAAmB,6CAA6C,CAAC;AAS9E,eAAO,MAAM,mBAAmB,2FAuB/B,CAAC;AAKF,eAAO,MAAM,mBAAmB,2FAC0D,CAAC;AAK3F,eAAO,MAAM,wBAAwB,2GACqE,CAAC;AAM3G,eAAO,MAAM,uBAAuB,2GACsE,CAAC;AAE3G,MAAM,MAAM,0BAA0B,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"breadcrumb.variants.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAalE,eAAO,MAAM,kBAAkB,qCAAqC,CAAC;AAIrE,eAAO,MAAM,mBAAmB,6DAC4B,CAAC;AAG7D,eAAO,MAAM,mBAAmB,6CAA6C,CAAC;AAS9E,eAAO,MAAM,mBAAmB,2FAuB/B,CAAC;AAKF,eAAO,MAAM,mBAAmB,2FAC0D,CAAC;AAK3F,eAAO,MAAM,wBAAwB,2GACqE,CAAC;AAM3G,eAAO,MAAM,uBAAuB,2GACsE,CAAC;AAE3G,MAAM,MAAM,0BAA0B,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dist/components/breadcrumb/breadcrumb.variants.js

@@ -1,4 +1,5 @@
 import { cva } from "class-variance-authority";
+import { focusRing } from "../../lib/focus-ring";
 const breadcrumbNavClass = "bg-surface-canvas py-(--space-2)";
 const breadcrumbListClass = "flex flex-wrap items-center gap-(--space-1) text-caption";
 const breadcrumbItemClass = "inline-flex items-center gap-(--space-1)";
@@ -18,7 +19,7 @@ const breadcrumbLinkClass = cva(
     "min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)",
     // focus ring — identical on every state, never removed (spec §4 / 2.4.7)
     "outline-none",
-    "focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2",
+    focusRing,
     // disabled (non-returnable) ancestor — DEC-C: dim via the disabled TOKEN, never opacity.
     // aria-disabled drives it because a breadcrumb ancestor is an <a>, which has no native
     // disabled; the component also strips href + tabindex so it cannot navigate or be tabbed to.

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/breadcrumb/breadcrumb.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// A Breadcrumb is structural wayfinding in NEUTRAL text (spec §3): it names the trail from a\n// root to the current page. It has no status-colored and no brand-accented variant at rest —\n// a crumb reports a location in the hierarchy, not a verification result, so it binds nothing\n// from the status tier and nothing from the action(brand) tier. The trail paints from the\n// text, ghost-action, border, and surface aliases only (spec §5).\n\n// The nav landmark wrapping the trail. A neutral canvas surface with logical-property block\n// padding so the trail mirrors under dir=\"rtl\" (G-U6). The optional hairline separating the\n// breadcrumb from the content below it (spec §5, border-default) is a caller decision, not a\n// default binding — apply it via className where the surface needs the divide.\nexport const breadcrumbNavClass = \"bg-surface-canvas py-(--space-2)\";\n\n// The ordered list: root -> current. Inline row of items + separators, wrapping when narrow,\n// with the small inter-item gap. The list itself carries no text color — each item sets its own.\nexport const breadcrumbListClass =\n  \"flex flex-wrap items-center gap-(--space-1) text-caption\";\n\n// A single trail item (the <li>). Inline so the item and its trailing separator sit on one row.\nexport const breadcrumbItemClass = \"inline-flex items-center gap-(--space-1)\";\n\n// The link item (spec §4). At rest it is the trail label type role in the SECONDARY text color;\n// on hover it takes a restrained ghost fill and the label lifts to the PRIMARY text color (the\n// ghost-action hover fill is the only fill a crumb ever paints). The focus ring is part of the\n// base, on every state, never removed. Motion is the fast token transition on the verdify easing,\n// collapsing to the instant endpoint under reduced motion — never the 350ms VerifiedBadge-only\n// theatre duration. A disabled (non-returnable) ancestor dims via the disabled TOKEN, not a\n// blanket opacity (DEC-C), and is taken out of the tab order + pointer flow by the component.\nexport const breadcrumbLinkClass = cva(\n  [\n    // type ROLE + resting color; logical inline padding + the small icon gap for an optional glyph\n    \"inline-flex items-center gap-(--space-1) rounded-(--radius-sm) px-(--space-1)\",\n    \"text-caption text-text-secondary\",\n    // hover: the restrained ghost fill, label lifts to the primary text color, pointer cursor\n    \"cursor-pointer hover:bg-action-ghost-bg-hover hover:text-text-primary\",\n    // active text where the ghost treatment applies (spec §5)\n    \"active:text-action-ghost-fg\",\n    // motion: fast + verdify easing, instant under reduced motion (NEVER the check theatre)\n    \"transition-[color,background-color] duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n    \"motion-reduce:duration-(--motion-duration-instant)\",\n    // target-size floor — 44px touch / 40px pointer (spec §7, 2.5.8)\n    \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n    // focus ring — identical on every state, never removed (spec §4 / 2.4.7)\n    \"outline-none\",\n    \"focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n    // disabled (non-returnable) ancestor — DEC-C: dim via the disabled TOKEN, never opacity.\n    // aria-disabled drives it because a breadcrumb ancestor is an <a>, which has no native\n    // disabled; the component also strips href + tabindex so it cannot navigate or be tabbed to.\n    \"aria-disabled:pointer-events-none aria-disabled:text-text-disabled\",\n  ],\n  { variants: {}, defaultVariants: {} },\n);\n\n// The current page (spec §2/§4/§5): the last item. PLAIN text in the PRIMARY color, NOT a link —\n// no focus ring, no target-size floor, not focusable. The non-interactive guidance: a current\n// crumb is a label, not a control.\nexport const breadcrumbPageClass =\n  \"inline-flex items-center gap-(--space-1) px-(--space-1) text-caption text-text-primary\";\n\n// The separator glyph between two items (spec §2/§4): decoration only, in the MUTED text color,\n// at the sm icon role. Removed from the a11y tree by the component (aria-hidden + role=presentation)\n// so the trail is not announced as \"Home slash Billing slash Invoice\".\nexport const breadcrumbSeparatorClass =\n  \"inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0 items-center justify-center text-text-muted\";\n\n// The overflow indicator for the collapsed variant (spec §2): the ellipsis standing in for the\n// middle of a long trail. It renders here as a DECORATIVE, non-interactive glyph in the muted\n// text color — the interactive overflow Menu (a Menu button revealing the hidden ancestors)\n// defers to the Menu primitive, which the library has not built yet (see component TSDoc).\nexport const breadcrumbEllipsisClass =\n  \"inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0 items-center justify-center text-text-muted\";\n\nexport type BreadcrumbLinkVariantProps = VariantProps<typeof breadcrumbLinkClass>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAYhC,MAAM,qBAAqB;AAI3B,MAAM,sBACX;AAGK,MAAM,sBAAsB;AAS5B,MAAM,sBAAsB;AAAA,EACjC;AAAA;AAAA,IAEE;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,EACF;AAAA,EACA,EAAE,UAAU,CAAC,GAAG,iBAAiB,CAAC,EAAE;AACtC;AAKO,MAAM,sBACX;AAKK,MAAM,2BACX;AAMK,MAAM,0BACX;","names":[]}
+{"version":3,"sources":["../../../src/components/breadcrumb/breadcrumb.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport { focusRing } from \"../../lib/focus-ring\";\n\n// A Breadcrumb is structural wayfinding in NEUTRAL text (spec §3): it names the trail from a\n// root to the current page. It has no status-colored and no brand-accented variant at rest —\n// a crumb reports a location in the hierarchy, not a verification result, so it binds nothing\n// from the status tier and nothing from the action(brand) tier. The trail paints from the\n// text, ghost-action, border, and surface aliases only (spec §5).\n\n// The nav landmark wrapping the trail. A neutral canvas surface with logical-property block\n// padding so the trail mirrors under dir=\"rtl\" (G-U6). The optional hairline separating the\n// breadcrumb from the content below it (spec §5, border-default) is a caller decision, not a\n// default binding — apply it via className where the surface needs the divide.\nexport const breadcrumbNavClass = \"bg-surface-canvas py-(--space-2)\";\n\n// The ordered list: root -> current. Inline row of items + separators, wrapping when narrow,\n// with the small inter-item gap. The list itself carries no text color — each item sets its own.\nexport const breadcrumbListClass =\n  \"flex flex-wrap items-center gap-(--space-1) text-caption\";\n\n// A single trail item (the <li>). Inline so the item and its trailing separator sit on one row.\nexport const breadcrumbItemClass = \"inline-flex items-center gap-(--space-1)\";\n\n// The link item (spec §4). At rest it is the trail label type role in the SECONDARY text color;\n// on hover it takes a restrained ghost fill and the label lifts to the PRIMARY text color (the\n// ghost-action hover fill is the only fill a crumb ever paints). The focus ring is part of the\n// base, on every state, never removed. Motion is the fast token transition on the verdify easing,\n// collapsing to the instant endpoint under reduced motion — never the 350ms VerifiedBadge-only\n// theatre duration. A disabled (non-returnable) ancestor dims via the disabled TOKEN, not a\n// blanket opacity (DEC-C), and is taken out of the tab order + pointer flow by the component.\nexport const breadcrumbLinkClass = cva(\n  [\n    // type ROLE + resting color; logical inline padding + the small icon gap for an optional glyph\n    \"inline-flex items-center gap-(--space-1) rounded-(--radius-sm) px-(--space-1)\",\n    \"text-caption text-text-secondary\",\n    // hover: the restrained ghost fill, label lifts to the primary text color, pointer cursor\n    \"cursor-pointer hover:bg-action-ghost-bg-hover hover:text-text-primary\",\n    // active text where the ghost treatment applies (spec §5)\n    \"active:text-action-ghost-fg\",\n    // motion: fast + verdify easing, instant under reduced motion (NEVER the check theatre)\n    \"transition-[color,background-color] duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n    \"motion-reduce:duration-(--motion-duration-instant)\",\n    // target-size floor — 44px touch / 40px pointer (spec §7, 2.5.8)\n    \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n    // focus ring — identical on every state, never removed (spec §4 / 2.4.7)\n    \"outline-none\",\n    focusRing,\n    // disabled (non-returnable) ancestor — DEC-C: dim via the disabled TOKEN, never opacity.\n    // aria-disabled drives it because a breadcrumb ancestor is an <a>, which has no native\n    // disabled; the component also strips href + tabindex so it cannot navigate or be tabbed to.\n    \"aria-disabled:pointer-events-none aria-disabled:text-text-disabled\",\n  ],\n  { variants: {}, defaultVariants: {} },\n);\n\n// The current page (spec §2/§4/§5): the last item. PLAIN text in the PRIMARY color, NOT a link —\n// no focus ring, no target-size floor, not focusable. The non-interactive guidance: a current\n// crumb is a label, not a control.\nexport const breadcrumbPageClass =\n  \"inline-flex items-center gap-(--space-1) px-(--space-1) text-caption text-text-primary\";\n\n// The separator glyph between two items (spec §2/§4): decoration only, in the MUTED text color,\n// at the sm icon role. Removed from the a11y tree by the component (aria-hidden + role=presentation)\n// so the trail is not announced as \"Home slash Billing slash Invoice\".\nexport const breadcrumbSeparatorClass =\n  \"inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0 items-center justify-center text-text-muted\";\n\n// The overflow indicator for the collapsed variant (spec §2): the ellipsis standing in for the\n// middle of a long trail. It renders here as a DECORATIVE, non-interactive glyph in the muted\n// text color — the interactive overflow Menu (a Menu button revealing the hidden ancestors)\n// defers to the Menu primitive, which the library has not built yet (see component TSDoc).\nexport const breadcrumbEllipsisClass =\n  \"inline-flex h-(--size-icon-sm) w-(--size-icon-sm) shrink-0 items-center justify-center text-text-muted\";\n\nexport type BreadcrumbLinkVariantProps = VariantProps<typeof breadcrumbLinkClass>;\n"],"mappings":"AAAA,SAAS,WAA8B;AACvC,SAAS,iBAAiB;AAYnB,MAAM,qBAAqB;AAI3B,MAAM,sBACX;AAGK,MAAM,sBAAsB;AAS5B,MAAM,sBAAsB;AAAA,EACjC;AAAA;AAAA,IAEE;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,EACF;AAAA,EACA,EAAE,UAAU,CAAC,GAAG,iBAAiB,CAAC,EAAE;AACtC;AAKO,MAAM,sBACX;AAKK,MAAM,2BACX;AAMK,MAAM,0BACX;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"button.variants.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,cAAc;;8EAuC1B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC"}
+{"version":3,"file":"button.variants.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAGlE,eAAO,MAAM,cAAc;;8EAuC1B,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC"}

package/dist/components/button/button.variants.js

@@ -1,4 +1,5 @@
 import { cva } from "class-variance-authority";
+import { focusRing } from "../../lib/focus-ring";
 const buttonVariants = cva(
   [
     // shape, type role, layout, icon-to-label gap, horizontal padding, elevation
@@ -10,7 +11,7 @@ const buttonVariants = cva(
     "min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)",
     // visible 2px signal-blue ring at 2px offset, on every variant, never removed
     "outline-none",
-    "focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2",
+    focusRing,
     // disabled: reduced-emphasis label, no pointer, no hover/pressed response
     "disabled:pointer-events-none disabled:text-text-disabled disabled:shadow-none",
     "aria-busy:pointer-events-none"

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/button/button.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\nexport const buttonVariants = cva(\n  [\n    // shape, type role, layout, icon-to-label gap, horizontal padding, elevation\n    \"inline-flex items-center justify-center gap-2 rounded-md px-4 shadow-sm\",\n    \"text-label font-medium whitespace-nowrap select-none\",\n    // hover/pressed transition — fast + verdify easing, no theatre\n    \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n    // target-size floor: 44px touch, 40px pointer — logical block-size\n    \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n    // visible 2px signal-blue ring at 2px offset, on every variant, never removed\n    \"outline-none\",\n    \"focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n    // disabled: reduced-emphasis label, no pointer, no hover/pressed response\n    \"disabled:pointer-events-none disabled:text-text-disabled disabled:shadow-none\",\n    \"aria-busy:pointer-events-none\",\n  ],\n  {\n    variants: {\n      variant: {\n        primary: [\n          \"bg-action-primary-bg text-action-primary-fg border border-action-primary-border\",\n          \"hover:bg-action-primary-bg-hover active:bg-action-primary-bg-active\",\n        ],\n        secondary: [\n          \"bg-action-secondary-bg text-action-secondary-fg border border-action-secondary-border\",\n          \"hover:bg-action-secondary-bg-hover\",\n        ],\n        ghost: [\n          \"bg-transparent text-action-ghost-fg border border-transparent\",\n          \"hover:bg-action-ghost-bg-hover\",\n        ],\n        destructive: [\n          \"bg-action-destructive-bg text-action-destructive-fg\",\n          \"border border-action-destructive-border\",\n        ],\n      },\n    },\n    defaultVariants: { variant: \"primary\" },\n  },\n);\n\nexport type ButtonVariantProps = VariantProps<typeof buttonVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAEhC,MAAM,iBAAiB;AAAA,EAC5B;AAAA;AAAA,IAEE;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,UACP;AAAA,UACA;AAAA,QACF;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL;AAAA,UACA;AAAA,QACF;AAAA,QACA,aAAa;AAAA,UACX;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,SAAS,UAAU;AAAA,EACxC;AACF;","names":[]}
+{"version":3,"sources":["../../../src/components/button/button.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport { focusRing } from \"../../lib/focus-ring\";\n\nexport const buttonVariants = cva(\n  [\n    // shape, type role, layout, icon-to-label gap, horizontal padding, elevation\n    \"inline-flex items-center justify-center gap-2 rounded-md px-4 shadow-sm\",\n    \"text-label font-medium whitespace-nowrap select-none\",\n    // hover/pressed transition — fast + verdify easing, no theatre\n    \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n    // target-size floor: 44px touch, 40px pointer — logical block-size\n    \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n    // visible 2px signal-blue ring at 2px offset, on every variant, never removed\n    \"outline-none\",\n    focusRing,\n    // disabled: reduced-emphasis label, no pointer, no hover/pressed response\n    \"disabled:pointer-events-none disabled:text-text-disabled disabled:shadow-none\",\n    \"aria-busy:pointer-events-none\",\n  ],\n  {\n    variants: {\n      variant: {\n        primary: [\n          \"bg-action-primary-bg text-action-primary-fg border border-action-primary-border\",\n          \"hover:bg-action-primary-bg-hover active:bg-action-primary-bg-active\",\n        ],\n        secondary: [\n          \"bg-action-secondary-bg text-action-secondary-fg border border-action-secondary-border\",\n          \"hover:bg-action-secondary-bg-hover\",\n        ],\n        ghost: [\n          \"bg-transparent text-action-ghost-fg border border-transparent\",\n          \"hover:bg-action-ghost-bg-hover\",\n        ],\n        destructive: [\n          \"bg-action-destructive-bg text-action-destructive-fg\",\n          \"border border-action-destructive-border\",\n        ],\n      },\n    },\n    defaultVariants: { variant: \"primary\" },\n  },\n);\n\nexport type ButtonVariantProps = VariantProps<typeof buttonVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AACvC,SAAS,iBAAiB;AAEnB,MAAM,iBAAiB;AAAA,EAC5B;AAAA;AAAA,IAEE;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,UACP;AAAA,UACA;AAAA,QACF;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL;AAAA,UACA;AAAA,QACF;AAAA,QACA,aAAa;AAAA,UACX;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,SAAS,UAAU;AAAA,EACxC;AACF;","names":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"card.variants.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AASlE,eAAO,MAAM,YAAY;;;8EA8CxB,CAAC;AAKF,eAAO,MAAM,cAAc,gFACoD,CAAC;AAIhF,eAAO,MAAM,eAAe,oEAAoE,CAAC;AAIjG,eAAO,MAAM,cAAc,8BAA8B,CAAC;AAG1D,eAAO,MAAM,sBAAsB,+EAC2C,CAAC;AAG/E,eAAO,MAAM,aAAa,kCAAkC,CAAC;AAI7D,eAAO,MAAM,eAAe,oGACuE,CAAC;AAEpG,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC"}
+{"version":3,"file":"card.variants.d.ts","sourceRoot":"","sources":["../../../src/components/card/card.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAUlE,eAAO,MAAM,YAAY;;;8EA8CxB,CAAC;AAKF,eAAO,MAAM,cAAc,gFACoD,CAAC;AAIhF,eAAO,MAAM,eAAe,oEAAoE,CAAC;AAIjG,eAAO,MAAM,cAAc,8BAA8B,CAAC;AAG1D,eAAO,MAAM,sBAAsB,+EAC2C,CAAC;AAG/E,eAAO,MAAM,aAAa,kCAAkC,CAAC;AAI7D,eAAO,MAAM,eAAe,oGACuE,CAAC;AAEpG,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC"}

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

@@ -1,4 +1,5 @@
 import { cva } from "class-variance-authority";
+import { focusRing } from "../../lib/focus-ring";
 const cardVariants = cva(
   [
     // raised surface, rounded container, resting elevation, internal padding from --space-4
@@ -28,7 +29,7 @@ const cardVariants = cva(
           "min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)",
           // visible 2px focus ring around the whole card, on every state, never removed (§4)
           "outline-none",
-          "focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2",
+          focusRing,
           // disabled — DEC-C: dim via the disabled TOKEN, never a blanket opacity; remove the
           // pointer + hover/pressed response. aria-disabled covers the <a> path (native disabled
           // already blocks the <button> path).

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/card/card.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// The card container. A card is a NEUTRAL layout surface (spec §1/§5): it paints from the\n// surface-* roles only — never from a --color-action-* or --color-status-* token, which belong\n// to the controls and badges it holds. The structural axis is the container BEHAVIOR (spec §3):\n// `static` (a non-interactive grouping, the common case) vs `interactive` (the whole surface is\n// one link/button). A second `emphasis` axis flips the resting hairline between the default and\n// the quieter muted border for a low-emphasis grouping (spec §4). The `media` slot composes via\n// the CardMedia subcomponent, so it is not a container-behavior variant here.\nexport const cardVariants = cva(\n  [\n    // raised surface, rounded container, resting elevation, internal padding from --space-4\n    \"block bg-surface-raised border rounded-lg shadow-sm p-(--space-4)\",\n    // logical-property text alignment so the card mirrors under dir=rtl (G-U6)\n    \"text-start text-text-primary\",\n  ],\n  {\n    variants: {\n      variant: {\n        // a non-interactive grouping: the whole card does nothing; the controls inside it do\n        static: \"\",\n        // the whole surface is one control: a restrained hover lift (fast + verdify easing,\n        // NEVER the deliberate verified-check theatre), a stronger hover border, and the\n        // settle-back on press; the focus ring + target-size floor live in the interactive base\n        interactive: [\n          \"cursor-pointer\",\n          \"transition-[color,box-shadow,border-color] duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n          \"motion-reduce:duration-(--motion-duration-instant)\",\n          // hover lift: the resting hairline (border-surface-border / -muted, set by `emphasis`)\n          // strengthens to the higher-contrast border-border-strong, alongside the shadow-sm->md\n          // elevation. Two DISTINCT tokens, so the §4 \"slightly stronger border\" is a real delta,\n          // not the no-op that mapping both rest+hover to --color-surface-border would produce.\n          \"hover:shadow-md hover:border-border-strong\",\n          \"active:shadow-sm\",\n          // target-size floor: 44px touch / 40px pointer (§7 2.5.8)\n          \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n          // visible 2px focus ring around the whole card, on every state, never removed (§4)\n          \"outline-none\",\n          \"focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n          // disabled — DEC-C: dim via the disabled TOKEN, never a blanket opacity; remove the\n          // pointer + hover/pressed response. aria-disabled covers the <a> path (native disabled\n          // already blocks the <button> path).\n          \"disabled:pointer-events-none disabled:text-text-disabled disabled:shadow-none\",\n          \"aria-disabled:pointer-events-none aria-disabled:text-text-disabled aria-disabled:shadow-none\",\n        ],\n      },\n      emphasis: {\n        // the default container hairline\n        default: \"border-surface-border\",\n        // the quieter hairline for a low-emphasis grouping (spec §4)\n        muted: \"border-surface-border-muted\",\n      },\n    },\n    defaultVariants: { variant: \"static\", emphasis: \"default\" },\n  },\n);\n\n// The media slot: a leading image/illustration/chart spanning the inline edges above the header.\n// It negates the container's --space-4 padding on the top + inline edges so the media bleeds to\n// the card edge, and re-establishes the --space-2 stacked-slot gap below it.\nexport const cardMediaClass =\n  \"-mt-(--space-4) -mx-(--space-4) mb-(--space-2) overflow-hidden rounded-t-lg\";\n\n// The header slot: title + supporting text on the inline-start, an optional control set on the\n// inline-end. --space-2 stacked-slot gap below it.\nexport const cardHeaderClass = \"flex items-start justify-between gap-(--space-2) mb-(--space-2)\";\n\n// The title: a statement in the h3 type role + the primary text color. Sentence case, no all-caps\n// (the type role already avoids the label tracking); brand violet never paints the title.\nexport const cardTitleClass = \"text-h3 text-text-primary\";\n\n// The header-actions slot: a small control set aligned to the header's inline-end edge.\nexport const cardHeaderActionsClass =\n  \"flex shrink-0 items-center gap-(--space-2) -mt-(--space-1) -me-(--space-1)\";\n\n// The body slot: the card's primary content, in the body type role + secondary text color.\nexport const cardBodyClass = \"text-body text-text-secondary\";\n\n// The footer slot: actions or closing metadata, in the label type role + secondary text color.\n// --space-2 stacked-slot gap above it.\nexport const cardFooterClass =\n  \"flex items-center justify-between gap-(--space-2) mt-(--space-2) text-label text-text-secondary\";\n\nexport type CardVariantProps = VariantProps<typeof cardVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAShC,MAAM,eAAe;AAAA,EAC1B;AAAA;AAAA,IAEE;AAAA;AAAA,IAEA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA;AAAA,QAEP,QAAQ;AAAA;AAAA;AAAA;AAAA,QAIR,aAAa;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA;AAAA;AAAA;AAAA;AAAA,UAKA;AAAA,UACA;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA,UACA;AAAA;AAAA;AAAA;AAAA,UAIA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,MACA,UAAU;AAAA;AAAA,QAER,SAAS;AAAA;AAAA,QAET,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,SAAS,UAAU,UAAU,UAAU;AAAA,EAC5D;AACF;AAKO,MAAM,iBACX;AAIK,MAAM,kBAAkB;AAIxB,MAAM,iBAAiB;AAGvB,MAAM,yBACX;AAGK,MAAM,gBAAgB;AAItB,MAAM,kBACX;","names":[]}
+{"version":3,"sources":["../../../src/components/card/card.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport { focusRing } from \"../../lib/focus-ring\";\n\n// The card container. A card is a NEUTRAL layout surface (spec §1/§5): it paints from the\n// surface-* roles only — never from a --color-action-* or --color-status-* token, which belong\n// to the controls and badges it holds. The structural axis is the container BEHAVIOR (spec §3):\n// `static` (a non-interactive grouping, the common case) vs `interactive` (the whole surface is\n// one link/button). A second `emphasis` axis flips the resting hairline between the default and\n// the quieter muted border for a low-emphasis grouping (spec §4). The `media` slot composes via\n// the CardMedia subcomponent, so it is not a container-behavior variant here.\nexport const cardVariants = cva(\n  [\n    // raised surface, rounded container, resting elevation, internal padding from --space-4\n    \"block bg-surface-raised border rounded-lg shadow-sm p-(--space-4)\",\n    // logical-property text alignment so the card mirrors under dir=rtl (G-U6)\n    \"text-start text-text-primary\",\n  ],\n  {\n    variants: {\n      variant: {\n        // a non-interactive grouping: the whole card does nothing; the controls inside it do\n        static: \"\",\n        // the whole surface is one control: a restrained hover lift (fast + verdify easing,\n        // NEVER the deliberate verified-check theatre), a stronger hover border, and the\n        // settle-back on press; the focus ring + target-size floor live in the interactive base\n        interactive: [\n          \"cursor-pointer\",\n          \"transition-[color,box-shadow,border-color] duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n          \"motion-reduce:duration-(--motion-duration-instant)\",\n          // hover lift: the resting hairline (border-surface-border / -muted, set by `emphasis`)\n          // strengthens to the higher-contrast border-border-strong, alongside the shadow-sm->md\n          // elevation. Two DISTINCT tokens, so the §4 \"slightly stronger border\" is a real delta,\n          // not the no-op that mapping both rest+hover to --color-surface-border would produce.\n          \"hover:shadow-md hover:border-border-strong\",\n          \"active:shadow-sm\",\n          // target-size floor: 44px touch / 40px pointer (§7 2.5.8)\n          \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n          // visible 2px focus ring around the whole card, on every state, never removed (§4)\n          \"outline-none\",\n          focusRing,\n          // disabled — DEC-C: dim via the disabled TOKEN, never a blanket opacity; remove the\n          // pointer + hover/pressed response. aria-disabled covers the <a> path (native disabled\n          // already blocks the <button> path).\n          \"disabled:pointer-events-none disabled:text-text-disabled disabled:shadow-none\",\n          \"aria-disabled:pointer-events-none aria-disabled:text-text-disabled aria-disabled:shadow-none\",\n        ],\n      },\n      emphasis: {\n        // the default container hairline\n        default: \"border-surface-border\",\n        // the quieter hairline for a low-emphasis grouping (spec §4)\n        muted: \"border-surface-border-muted\",\n      },\n    },\n    defaultVariants: { variant: \"static\", emphasis: \"default\" },\n  },\n);\n\n// The media slot: a leading image/illustration/chart spanning the inline edges above the header.\n// It negates the container's --space-4 padding on the top + inline edges so the media bleeds to\n// the card edge, and re-establishes the --space-2 stacked-slot gap below it.\nexport const cardMediaClass =\n  \"-mt-(--space-4) -mx-(--space-4) mb-(--space-2) overflow-hidden rounded-t-lg\";\n\n// The header slot: title + supporting text on the inline-start, an optional control set on the\n// inline-end. --space-2 stacked-slot gap below it.\nexport const cardHeaderClass = \"flex items-start justify-between gap-(--space-2) mb-(--space-2)\";\n\n// The title: a statement in the h3 type role + the primary text color. Sentence case, no all-caps\n// (the type role already avoids the label tracking); brand violet never paints the title.\nexport const cardTitleClass = \"text-h3 text-text-primary\";\n\n// The header-actions slot: a small control set aligned to the header's inline-end edge.\nexport const cardHeaderActionsClass =\n  \"flex shrink-0 items-center gap-(--space-2) -mt-(--space-1) -me-(--space-1)\";\n\n// The body slot: the card's primary content, in the body type role + secondary text color.\nexport const cardBodyClass = \"text-body text-text-secondary\";\n\n// The footer slot: actions or closing metadata, in the label type role + secondary text color.\n// --space-2 stacked-slot gap above it.\nexport const cardFooterClass =\n  \"flex items-center justify-between gap-(--space-2) mt-(--space-2) text-label text-text-secondary\";\n\nexport type CardVariantProps = VariantProps<typeof cardVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AACvC,SAAS,iBAAiB;AASnB,MAAM,eAAe;AAAA,EAC1B;AAAA;AAAA,IAEE;AAAA;AAAA,IAEA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA;AAAA,QAEP,QAAQ;AAAA;AAAA;AAAA;AAAA,QAIR,aAAa;AAAA,UACX;AAAA,UACA;AAAA,UACA;AAAA;AAAA;AAAA;AAAA;AAAA,UAKA;AAAA,UACA;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA,UACA;AAAA;AAAA;AAAA;AAAA,UAIA;AAAA,UACA;AAAA,QACF;AAAA,MACF;AAAA,MACA,UAAU;AAAA;AAAA,QAER,SAAS;AAAA;AAAA,QAET,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,SAAS,UAAU,UAAU,UAAU;AAAA,EAC5D;AACF;AAKO,MAAM,iBACX;AAIK,MAAM,kBAAkB;AAIxB,MAAM,iBAAiB;AAGvB,MAAM,yBACX;AAGK,MAAM,gBAAgB;AAItB,MAAM,kBACX;","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/checkbox/checkbox.variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.variants.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,eAAO,MAAM,mBAAmB;;8EAmC/B,CAAC;AA6BF,eAAO,MAAM,0BAA0B;;8EAGtC,CAAC;AAEF,eAAO,MAAM,wBAAwB;;8EAGpC,CAAC;AAGF,eAAO,MAAM,qBAAqB;;8EAKhC,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"checkbox.variants.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/checkbox.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAKlE,eAAO,MAAM,mBAAmB;;8EAmC/B,CAAC;AA6BF,eAAO,MAAM,0BAA0B;;8EAGtC,CAAC;AAEF,eAAO,MAAM,wBAAwB;;8EAGpC,CAAC;AAGF,eAAO,MAAM,qBAAqB;;8EAKhC,CAAC;AAEH,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/dist/components/checkbox/checkbox.variants.js

@@ -1,4 +1,5 @@
 import { cva } from "class-variance-authority";
+import { focusRing } from "../../lib/focus-ring";
 const checkboxBoxVariants = cva(
   [
     // shape + neutral control tier at rest (unchecked)
@@ -17,7 +18,7 @@ const checkboxBoxVariants = cva(
     "motion-reduce:duration-(--motion-duration-instant)",
     // visible 2px signal-blue ring at 2px offset, never removed
     "outline-none",
-    "focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2",
+    focusRing,
     // error: critical border marks the FIELD; the fill stays the selection accent
     "aria-invalid:border-status-critical-border",
     // disabled: not interactive; state still reads (a disabled-checked box reads checked).

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/checkbox/checkbox.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// The square box that carries the visual state. Token binding lives here ONLY.\n// `peer` so the overlaid indicator glyphs can react to :checked / :indeterminate.\nexport const checkboxBoxVariants = cva(\n  [\n    // shape + neutral control tier at rest (unchecked)\n    \"peer shrink-0 appearance-none rounded-sm border bg-control-bg text-control-fg\",\n    \"border-border-default\",\n    // hover: the box border strengthens; box + label read as one target\n    \"hover:border-border-strong\",\n    // selection accent (Sovereign Violet) — the brand, NOT a status — when set\n    \"checked:bg-action-primary-bg checked:text-action-primary-fg\",\n    \"checked:border-action-primary-bg\",\n    \"indeterminate:bg-action-primary-bg indeterminate:text-action-primary-fg\",\n    \"indeterminate:border-action-primary-bg\",\n    // functional toggle: fast + verdify easing, instant under reduced motion.\n    // Never the deliberate theatre — a checkbox toggle is not the verified-check moment.\n    \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n    \"motion-reduce:duration-(--motion-duration-instant)\",\n    // visible 2px signal-blue ring at 2px offset, never removed\n    \"outline-none\",\n    \"focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\",\n    // error: critical border marks the FIELD; the fill stays the selection accent\n    \"aria-invalid:border-status-critical-border\",\n    // disabled: not interactive; state still reads (a disabled-checked box reads checked).\n    // DEC-C / spec §4: a disabled control is dimmed via the disabled TOKEN on the\n    // indicator (text-text-disabled, below), NOT a blanket opacity-60 on the box.\n    \"disabled:pointer-events-none\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"h-(--size-icon-sm) w-(--size-icon-sm)\",\n        md: \"h-(--size-icon-md) w-(--size-icon-md)\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n// The overlaid indicator glyphs sit absolutely over the box and are colored by\n// the action-primary FOREGROUND — the glyph on the brand accent fill (spec §5),\n// never a status color. `peer-*` drives visibility from the sibling input's\n// native :checked / :indeterminate state; both glyphs are pointer-transparent\n// and aria-hidden (the input carries role/state). Each glyph is centered over\n// the box and drawn at three-quarters of the box so it never touches the edge.\n//\n// DEC-C / spec §4·§5: when the control is disabled the indicator (check / bar)\n// renders in --color-text-disabled — the SAME token the label dims to — NOT a\n// blanket opacity-60 dim of the whole box. The glyph is a sibling AFTER the peer\n// input, so a `disabled` cva variant (driven by the explicit prop, mirroring\n// checkboxLabelVariants) flips text-action-primary-fg → text-text-disabled.\nconst indicatorBase = [\n  \"pointer-events-none absolute inset-0 m-auto hidden h-3/4 w-3/4\",\n];\nconst indicatorColorVariants = {\n  variants: {\n    disabled: {\n      true: \"text-text-disabled\",\n      false: \"text-action-primary-fg\",\n    },\n  },\n  defaultVariants: { disabled: false },\n} as const;\n// Check glyph: shown when the peer input is :checked. The mixed (parent-only)\n// case never renders this glyph (it is omitted in JSX when isMixed), so the\n// check and the bar stay mutually exclusive without brittle variant stacking.\nexport const checkboxCheckGlyphVariants = cva(\n  [...indicatorBase, \"peer-checked:block\"],\n  indicatorColorVariants,\n);\n// Horizontal-bar glyph: shown only when the peer input is :indeterminate.\nexport const checkboxBarGlyphVariants = cva(\n  [...indicatorBase, \"peer-indeterminate:block\"],\n  indicatorColorVariants,\n);\n\n// The label naming the choice; part of the hit area.\nexport const checkboxLabelVariants = cva(\"text-text-primary select-none\", {\n  variants: {\n    disabled: { true: \"text-text-disabled\", false: \"\" },\n  },\n  defaultVariants: { disabled: false },\n});\n\nexport type CheckboxBoxVariantProps = VariantProps<typeof checkboxBoxVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AAIhC,MAAM,sBAAsB;AAAA,EACjC;AAAA;AAAA,IAEE;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,MAAM,KAAK;AAAA,EAChC;AACF;AAcA,MAAM,gBAAgB;AAAA,EACpB;AACF;AACA,MAAM,yBAAyB;AAAA,EAC7B,UAAU;AAAA,IACR,UAAU;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,UAAU,MAAM;AACrC;AAIO,MAAM,6BAA6B;AAAA,EACxC,CAAC,GAAG,eAAe,oBAAoB;AAAA,EACvC;AACF;AAEO,MAAM,2BAA2B;AAAA,EACtC,CAAC,GAAG,eAAe,0BAA0B;AAAA,EAC7C;AACF;AAGO,MAAM,wBAAwB,IAAI,iCAAiC;AAAA,EACxE,UAAU;AAAA,IACR,UAAU,EAAE,MAAM,sBAAsB,OAAO,GAAG;AAAA,EACpD;AAAA,EACA,iBAAiB,EAAE,UAAU,MAAM;AACrC,CAAC;","names":[]}
+{"version":3,"sources":["../../../src/components/checkbox/checkbox.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport { focusRing } from \"../../lib/focus-ring\";\n\n// The square box that carries the visual state. Token binding lives here ONLY.\n// `peer` so the overlaid indicator glyphs can react to :checked / :indeterminate.\nexport const checkboxBoxVariants = cva(\n  [\n    // shape + neutral control tier at rest (unchecked)\n    \"peer shrink-0 appearance-none rounded-sm border bg-control-bg text-control-fg\",\n    \"border-border-default\",\n    // hover: the box border strengthens; box + label read as one target\n    \"hover:border-border-strong\",\n    // selection accent (Sovereign Violet) — the brand, NOT a status — when set\n    \"checked:bg-action-primary-bg checked:text-action-primary-fg\",\n    \"checked:border-action-primary-bg\",\n    \"indeterminate:bg-action-primary-bg indeterminate:text-action-primary-fg\",\n    \"indeterminate:border-action-primary-bg\",\n    // functional toggle: fast + verdify easing, instant under reduced motion.\n    // Never the deliberate theatre — a checkbox toggle is not the verified-check moment.\n    \"transition-colors duration-(--motion-duration-fast) ease-(--motion-easing-verdify)\",\n    \"motion-reduce:duration-(--motion-duration-instant)\",\n    // visible 2px signal-blue ring at 2px offset, never removed\n    \"outline-none\",\n    focusRing,\n    // error: critical border marks the FIELD; the fill stays the selection accent\n    \"aria-invalid:border-status-critical-border\",\n    // disabled: not interactive; state still reads (a disabled-checked box reads checked).\n    // DEC-C / spec §4: a disabled control is dimmed via the disabled TOKEN on the\n    // indicator (text-text-disabled, below), NOT a blanket opacity-60 on the box.\n    \"disabled:pointer-events-none\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"h-(--size-icon-sm) w-(--size-icon-sm)\",\n        md: \"h-(--size-icon-md) w-(--size-icon-md)\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n// The overlaid indicator glyphs sit absolutely over the box and are colored by\n// the action-primary FOREGROUND — the glyph on the brand accent fill (spec §5),\n// never a status color. `peer-*` drives visibility from the sibling input's\n// native :checked / :indeterminate state; both glyphs are pointer-transparent\n// and aria-hidden (the input carries role/state). Each glyph is centered over\n// the box and drawn at three-quarters of the box so it never touches the edge.\n//\n// DEC-C / spec §4·§5: when the control is disabled the indicator (check / bar)\n// renders in --color-text-disabled — the SAME token the label dims to — NOT a\n// blanket opacity-60 dim of the whole box. The glyph is a sibling AFTER the peer\n// input, so a `disabled` cva variant (driven by the explicit prop, mirroring\n// checkboxLabelVariants) flips text-action-primary-fg → text-text-disabled.\nconst indicatorBase = [\n  \"pointer-events-none absolute inset-0 m-auto hidden h-3/4 w-3/4\",\n];\nconst indicatorColorVariants = {\n  variants: {\n    disabled: {\n      true: \"text-text-disabled\",\n      false: \"text-action-primary-fg\",\n    },\n  },\n  defaultVariants: { disabled: false },\n} as const;\n// Check glyph: shown when the peer input is :checked. The mixed (parent-only)\n// case never renders this glyph (it is omitted in JSX when isMixed), so the\n// check and the bar stay mutually exclusive without brittle variant stacking.\nexport const checkboxCheckGlyphVariants = cva(\n  [...indicatorBase, \"peer-checked:block\"],\n  indicatorColorVariants,\n);\n// Horizontal-bar glyph: shown only when the peer input is :indeterminate.\nexport const checkboxBarGlyphVariants = cva(\n  [...indicatorBase, \"peer-indeterminate:block\"],\n  indicatorColorVariants,\n);\n\n// The label naming the choice; part of the hit area.\nexport const checkboxLabelVariants = cva(\"text-text-primary select-none\", {\n  variants: {\n    disabled: { true: \"text-text-disabled\", false: \"\" },\n  },\n  defaultVariants: { disabled: false },\n});\n\nexport type CheckboxBoxVariantProps = VariantProps<typeof checkboxBoxVariants>;\n"],"mappings":"AAAA,SAAS,WAA8B;AACvC,SAAS,iBAAiB;AAInB,MAAM,sBAAsB;AAAA,EACjC;AAAA;AAAA,IAEE;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA,IAGA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,MAAM,KAAK;AAAA,EAChC;AACF;AAcA,MAAM,gBAAgB;AAAA,EACpB;AACF;AACA,MAAM,yBAAyB;AAAA,EAC7B,UAAU;AAAA,IACR,UAAU;AAAA,MACR,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,UAAU,MAAM;AACrC;AAIO,MAAM,6BAA6B;AAAA,EACxC,CAAC,GAAG,eAAe,oBAAoB;AAAA,EACvC;AACF;AAEO,MAAM,2BAA2B;AAAA,EACtC,CAAC,GAAG,eAAe,0BAA0B;AAAA,EAC7C;AACF;AAGO,MAAM,wBAAwB,IAAI,iCAAiC;AAAA,EACxE,UAAU;AAAA,IACR,UAAU,EAAE,MAAM,sBAAsB,OAAO,GAAG;AAAA,EACpD;AAAA,EACA,iBAAiB,EAAE,UAAU,MAAM;AACrC,CAAC;","names":[]}

package/dist/components/command-palette/command-palette.variants.d.ts

@@ -4,7 +4,7 @@ export declare const commandPalettePanelClass: string;
 export declare const commandPaletteInputClass: string;
 export declare const commandPaletteSearchIconClass: string;
 export declare const commandPaletteListboxClass = "min-h-0 flex-1 overflow-y-auto border-t border-border-default pt-(--space-2)";
-export declare const commandPaletteGroupLabelClass = "px-(--space-2) py-(--space-1) text-label text-text-muted select-none";
+export declare const commandPaletteGroupLabelClass = "px-(--space-2) py-(--space-1) text-label text-text-secondary select-none";
 export declare const commandPaletteOptionVariants: (props?: ({
     density?: "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/command-palette/command-palette.variants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"command-palette.variants.d.ts","sourceRoot":"","sources":["../../../src/components/command-palette/command-palette.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAoBlE,eAAO,MAAM,wBAAwB,QAI0B,CAAC;AAShE,eAAO,MAAM,wBAAwB,QAgB4D,CAAC;AAUlG,eAAO,MAAM,wBAAwB,QAS4D,CAAC;AAKlG,eAAO,MAAM,6BAA6B,QAEgE,CAAC;AAO3G,eAAO,MAAM,0BAA0B,iFACyC,CAAC;AAKjF,eAAO,MAAM,6BAA6B,yEAC8B,CAAC;AAkBzE,eAAO,MAAM,4BAA4B;;8EA2BxC,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG,YAAY,CAAC,OAAO,4BAA4B,CAAC,CAAC;AAIjG,eAAO,MAAM,wBAAwB,wDAAwD,CAAC;AAI9F,eAAO,MAAM,4BAA4B,4CAA4C,CAAC;AAItF,eAAO,MAAM,6BAA6B,2FACgD,CAAC;AAM3F,eAAO,MAAM,2BAA2B,sDACa,CAAC;AAMtD,eAAO,MAAM,wBAAwB,4EACsC,CAAC;AAM5E,eAAO,MAAM,yBAAyB,QAEJ,CAAC"}
+{"version":3,"file":"command-palette.variants.d.ts","sourceRoot":"","sources":["../../../src/components/command-palette/command-palette.variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAqBlE,eAAO,MAAM,wBAAwB,QAI0B,CAAC;AAShE,eAAO,MAAM,wBAAwB,QAgB1B,CAAC;AAUZ,eAAO,MAAM,wBAAwB,QAS1B,CAAC;AAKZ,eAAO,MAAM,6BAA6B,QAEgE,CAAC;AAO3G,eAAO,MAAM,0BAA0B,iFACyC,CAAC;AAMjF,eAAO,MAAM,6BAA6B,6EACkC,CAAC;AAkB7E,eAAO,MAAM,4BAA4B;;8EA2BxC,CAAC;AAEF,MAAM,MAAM,gCAAgC,GAAG,YAAY,CAAC,OAAO,4BAA4B,CAAC,CAAC;AAIjG,eAAO,MAAM,wBAAwB,wDAAwD,CAAC;AAI9F,eAAO,MAAM,4BAA4B,4CAA4C,CAAC;AAItF,eAAO,MAAM,6BAA6B,2FACgD,CAAC;AAM3F,eAAO,MAAM,2BAA2B,sDACa,CAAC;AAMtD,eAAO,MAAM,wBAAwB,4EACsC,CAAC;AAM5E,eAAO,MAAM,yBAAyB,QAEJ,CAAC"}

package/dist/components/command-palette/command-palette.variants.js

@@ -1,15 +1,17 @@
 import { cva } from "class-variance-authority";
+import { focusRing } from "../../lib/focus-ring";
 const commandPaletteScrimClass = "fixed inset-0 z-(--z-index-modal) bg-scrim-dark transition-opacity duration-(--motion-duration-base) ease-(--motion-easing-verdify) motion-reduce:duration-(--motion-duration-instant) data-[state=open]:opacity-100 data-[state=closed]:opacity-0";
 const commandPalettePanelClass = (
   // Horizontally centered, anchored in the UPPER region of the viewport (a palette sits high, not
   // dead-center like a Dialog): top-1/4 is a Tailwind FRACTION utility (no arbitrary raw value), so
   // it stays clean against the token-binding gate while keeping the panel near the top.
-  "fixed left-1/2 top-1/4 z-(--z-index-modal) -translate-x-1/2 flex w-[calc(100%-var(--space-8))] max-w-(--container-md) flex-col gap-(--space-3) max-h-[calc(75dvh)] bg-surface-raised border border-surface-border rounded-(--radius-lg) shadow-(--shadow-lg) p-(--space-3) transition-[opacity,transform] duration-(--motion-duration-base) ease-(--motion-easing-verdify) motion-reduce:duration-(--motion-duration-instant) data-[state=open]:opacity-100 data-[state=closed]:opacity-0 data-[state=open]:scale-100 data-[state=closed]:scale-95 outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2"
+  "fixed left-1/2 top-1/4 z-(--z-index-modal) -translate-x-1/2 flex w-[calc(100%-var(--space-8))] max-w-(--container-md) flex-col gap-(--space-3) max-h-[calc(75dvh)] bg-surface-raised border border-surface-border rounded-(--radius-lg) shadow-(--shadow-lg) p-(--space-3) transition-[opacity,transform] duration-(--motion-duration-base) ease-(--motion-easing-verdify) motion-reduce:duration-(--motion-duration-instant) data-[state=open]:opacity-100 data-[state=closed]:opacity-0 data-[state=open]:scale-100 data-[state=closed]:scale-95 " + // the panel owns no focus stop itself (focus lives in the input); its ring is never removed
+  focusRing
 );
-const commandPaletteInputClass = "w-full rounded-(--radius-md) ps-(--space-9) pe-(--space-3) bg-control-bg text-control-fg border border-control-border placeholder:text-control-placeholder text-base leading-(--text-body--line-height) tracking-(--text-body--letter-spacing) min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop) focus-visible:border-border-focus outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2";
+const commandPaletteInputClass = "w-full rounded-(--radius-md) ps-(--space-9) pe-(--space-3) bg-control-bg text-control-fg border border-control-border placeholder:text-control-placeholder text-base leading-(--text-body--line-height) tracking-(--text-body--letter-spacing) min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop) focus-visible:border-border-focus " + focusRing;
 const commandPaletteSearchIconClass = "pointer-events-none absolute start-(--space-3) top-1/2 -translate-y-1/2 inline-flex h-(--size-icon-md) w-(--size-icon-md) items-center justify-center text-control-placeholder";
 const commandPaletteListboxClass = "min-h-0 flex-1 overflow-y-auto border-t border-border-default pt-(--space-2)";
-const commandPaletteGroupLabelClass = "px-(--space-2) py-(--space-1) text-label text-text-muted select-none";
+const commandPaletteGroupLabelClass = "px-(--space-2) py-(--space-1) text-label text-text-secondary select-none";
 const commandPaletteOptionVariants = cva(
   [
     // shape + the icon-to-label gap + logical inline padding so it mirrors under RTL (G-U6)

package/dist/components/command-palette/command-palette.variants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/command-palette/command-palette.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\n\n// The command palette is a NEUTRAL overlay surface (spec §1/§3/§5/§8): brand violet and Verified\n// Green are accents, neutrals carry the surface. The SCRIM, the PANEL, the INPUT, and the RESULT\n// ROWS are neutral; the active-row highlight is the SECONDARY hover fill, NEVER a status or brand\n// color — the active row reports WHERE you are in the list, not a verified result, so it never\n// takes Verified Green, and Sovereign Violet never marks a row (brand != state, G-U2). A status\n// color appears only when a result row legitimately carries a status (a verified entity in its\n// subtitle), and then it is the --color-status-* accent on that row's OWN affordance, never a flood\n// of the palette — that affordance is the caller's (VerifiedBadge), not bound here. So NOTHING in\n// this file binds an --color-action-primary-* or --color-status-* fill. This is the ONLY\n// token-binding site (skill §5 hard rule).\n\n// The scrim (spec §2 scrim, §5 --color-scrim-*): the dimming layer behind the panel that separates\n// the palette from the page and absorbs outside clicks. A neutral dim on the modal z-layer,\n// decorative (no role). The fade is a PLAIN base transition + verdify easing, instant under reduced\n// motion — never the 350ms VerifiedBadge-only theatre (G-U3). Enter/exit ride Radix's data-state on\n// the overlay (attribute-selector variants, not arbitrary values). On a light surface the dark\n// scrim token applies (spec §5: scrim-dark behind the panel on a light surface; the committed\n// overlays bind scrim-dark with no auto light-surface inversion).\nexport const commandPaletteScrimClass =\n  \"fixed inset-0 z-(--z-index-modal) bg-scrim-dark \" +\n  \"transition-opacity duration-(--motion-duration-base) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant) \" +\n  \"data-[state=open]:opacity-100 data-[state=closed]:opacity-0\";\n\n// The panel (spec §2 panel, §5): the raised container holding the input and results; it takes\n// role=dialog + the focus trap (Radix). A NEUTRAL raised surface (--color-surface-raised) with the\n// outer surface border, the lg corner radius, the lg elevation shadow above the scrim, anchored near\n// the top of the modal z-layer. It never exceeds the viewport — the listbox owns the scroll. The\n// open/close transition is the BASE duration + verdify easing, instant under reduced motion, and\n// rides Radix's data-state (attribute-selector enter/exit, not arbitrary values). NEVER the\n// deliberate verified-check theatre (G-U3). Panel padding/gaps come from --space-*.\nexport const commandPalettePanelClass =\n  // Horizontally centered, anchored in the UPPER region of the viewport (a palette sits high, not\n  // dead-center like a Dialog): top-1/4 is a Tailwind FRACTION utility (no arbitrary raw value), so\n  // it stays clean against the token-binding gate while keeping the panel near the top.\n  \"fixed left-1/2 top-1/4 z-(--z-index-modal) -translate-x-1/2 \" +\n  // never exceeds the viewport — the listbox owns the scroll. calc()-bodied brackets are structural\n  // (not raw-value-leading), gate-legitimate, and mirror the Dialog panel's viewport cap.\n  \"flex w-[calc(100%-var(--space-8))] max-w-(--container-md) flex-col gap-(--space-3) \" +\n  \"max-h-[calc(75dvh)] \" +\n  \"bg-surface-raised border border-surface-border rounded-(--radius-lg) shadow-(--shadow-lg) \" +\n  \"p-(--space-3) \" +\n  \"transition-[opacity,transform] duration-(--motion-duration-base) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant) \" +\n  \"data-[state=open]:opacity-100 data-[state=closed]:opacity-0 \" +\n  \"data-[state=open]:scale-100 data-[state=closed]:scale-95 \" +\n  // the panel owns no focus stop itself (focus lives in the input); its ring is never removed\n  \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\";\n\n// The input (spec §2 input, §4 Focus, §5): the single-line search field at the top, focused on\n// open. It IS the combobox. A control-tier field — control bg/border/fg + the placeholder token\n// (spec §5 --color-control-*). The query text is the body type role in the control fg. While focused\n// the input border takes the focus color and the visible 2px focus ring shows (never removed, spec\n// §4 Focus). The target-size floor (44px touch / 40px pointer, spec §7 2.5.8 / DEC-B) with the\n// height EMERGING from the floor, never fixed below it. The body metrics ride along\n// (leading/tracking) without binding the text-body SIZE — DEC-A: a form field's value size stays\n// text-base (the iOS no-zoom floor), the body type role contributes only its leading + tracking.\nexport const commandPaletteInputClass =\n  \"w-full rounded-(--radius-md) ps-(--space-9) pe-(--space-3) \" +\n  \"bg-control-bg text-control-fg border border-control-border \" +\n  \"placeholder:text-control-placeholder \" +\n  // DEC-A: form-field value size is text-base (iOS no-zoom floor); body type role rides via metrics\n  \"text-base leading-(--text-body--line-height) tracking-(--text-body--letter-spacing) \" +\n  \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop) \" +\n  // the input border takes the focus color while focused (spec §5 --color-border-focus)\n  \"focus-visible:border-border-focus \" +\n  \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\";\n\n// The leading search icon (spec §2 input, §5 --size-icon-md): decorative (aria-hidden) — the input\n// names itself by its aria-label, not the glyph. Positioned at the inline-start of the input via a\n// logical offset so it mirrors under RTL (G-U6); inherits the placeholder color via currentColor.\nexport const commandPaletteSearchIconClass =\n  \"pointer-events-none absolute start-(--space-3) top-1/2 -translate-y-1/2 \" +\n  \"inline-flex h-(--size-icon-md) w-(--size-icon-md) items-center justify-center text-control-placeholder\";\n\n// The listbox (spec §2 listbox, §5): the results region below the input. A neutral raised surface\n// region with the input-to-results divider above it (a neutral hairline in the default border\n// color), scrolling within the panel when results overflow. Logical inline padding so it mirrors\n// under RTL (G-U6). No motion of its own — a wait is a plain wait (spec §4 Loading), the busy state\n// rides aria-busy, not theatre.\nexport const commandPaletteListboxClass =\n  \"min-h-0 flex-1 overflow-y-auto border-t border-border-default pt-(--space-2)\";\n\n// The group label (spec §2 group-label, §5): a non-selectable heading that partitions results by\n// kind; it is NOT a result and is skipped by arrow movement. The MUTED text color at the LABEL type\n// role (spec §5 --color-text-muted / --text-label). Logical inline padding (G-U6).\nexport const commandPaletteGroupLabelClass =\n  \"px-(--space-2) py-(--space-1) text-label text-text-muted select-none\";\n\n// One result row (spec §2 option, §4 states). A neutral row at rest; the active (highlighted) AND\n// the pointer-hovered row share ONE state — aria-selected — painted with the SECONDARY hover fill\n// (spec §4 Hover, §5 --color-action-secondary-bg-hover). Pointer hover and keyboard active are kept\n// in sync by setting aria-selected on whichever the user touched, so Enter always runs what is\n// highlighted. The active row reports WHERE you are, NOT a verified result — never Verified Green,\n// never the brand (spec §3/§8, G-U2). The label is the PRIMARY text color at the BODY type role\n// (spec §5 --color-text-primary / --text-body).\n//\n// FOCUS (spec §4 Focus): DOM focus stays in the INPUT the whole time; the active row is conveyed by\n// aria-activedescendant, not by moving focus into the list (spec §8 Don't). So a row does NOT paint\n// its own focus-visible ring — the active fill is the affordance, and the visible focus ring lives\n// on the input.\n//\n// DISABLED (spec §4 Disabled): a non-runnable row dims via the disabled TOKEN (DEC-C), never a\n// blanket opacity; it is aria-disabled, skipped by arrow movement (handled in the roving logic), and\n// not activatable. Its short reason sits in the secondary line.\nexport const commandPaletteOptionVariants = cva(\n  [\n    // shape + the icon-to-label gap + logical inline padding so it mirrors under RTL (G-U6)\n    \"relative flex items-center gap-(--space-3) rounded-(--radius-md) px-(--space-2)\",\n    // the resting (neutral) label color; pointer cursor; no underline\n    \"text-text-primary cursor-pointer select-none\",\n    // the shared pointer+keyboard highlight: the secondary hover fill on the ACTIVE row\n    // (aria-selected). NEVER a status/brand fill — the active row is location, not a verified result.\n    \"aria-selected:bg-action-secondary-bg-hover\",\n    // target-size floor — 44px touch / 40px pointer, on every row (spec §7 2.5.8), never a fixed\n    // height below the floor\n    \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n    // focus stays in the input (spec §4 Focus / §8) — the row never paints its own focus ring\n    \"outline-none\",\n    // disabled (non-runnable) row — DEC-C: dim via the disabled TOKEN, never opacity; not operable\n    \"aria-disabled:text-text-disabled aria-disabled:pointer-events-none aria-disabled:cursor-default\",\n  ],\n  {\n    variants: {\n      // The result label/secondary type role. There is one row treatment; the axis only exists to\n      // keep the binding file shaped like the other compounds. md is the only value the spec needs.\n      density: {\n        md: \"py-(--space-2)\",\n      },\n    },\n    defaultVariants: { density: \"md\" },\n  },\n);\n\nexport type CommandPaletteOptionVariantProps = VariantProps<typeof commandPaletteOptionVariants>;\n\n// The result label (spec §2 option, §5): the primary line, body type role in the primary text color,\n// truncating when long so the row keeps its shape (--color-text-primary / --text-body).\nexport const commandPaletteLabelClass = \"min-w-0 flex-1 truncate text-body text-text-primary\";\n\n// The result secondary line (spec §2 option, §5): the optional second line under/after the label, in\n// the SECONDARY text color (spec §5 --color-text-secondary). Truncates when long.\nexport const commandPaletteSecondaryClass = \"truncate text-label text-text-secondary\";\n\n// The leading result icon (spec §2 option, §5 --size-icon-md): decorative — the row names itself by\n// its label text, not the glyph. Inherits the row color via currentColor; never collapses.\nexport const commandPaletteOptionIconClass =\n  \"inline-flex h-(--size-icon-md) w-(--size-icon-md) shrink-0 items-center justify-center\";\n\n// The trailing keyboard-shortcut hint (spec §2 option, §5): pushed to the inline-end, in the MUTED\n// text color at the LABEL type role (spec §5 --color-text-muted / --text-label). Decorative\n// wayfinding, never a focus stop; logical inline-end placement (G-U6). The monospace ID/shortcut\n// stays isolated LTR inside RTL text (G-U6).\nexport const commandPaletteShortcutClass =\n  \"ms-auto ps-(--space-4) text-label text-text-muted\";\n\n// The empty (no-match) state (spec §2 empty, §4): plain text that says nothing matched and what to\n// try — never a dead end, never a blamed query (principles voice). The SECONDARY text color at the\n// body type role, with breathing room (spec §5 --color-text-secondary). Announced as text, not\n// silence (spec §7 4.1.3).\nexport const commandPaletteEmptyClass =\n  \"px-(--space-2) py-(--space-6) text-center text-body text-text-secondary\";\n\n// The footer (spec §2 footer, §5): a thin hint row showing the active keys (move, run, dismiss) so\n// the keyboard model is discoverable in place. The SECONDARY text color at the LABEL type role with\n// a neutral hairline divider above it (spec §5 --color-text-secondary / --text-label /\n// --color-border-default). Logical inline layout (G-U6).\nexport const commandPaletteFooterClass =\n  \"flex items-center gap-(--space-4) border-t border-border-default pt-(--space-2) \" +\n  \"text-label text-text-secondary\";\n"],"mappings":"AAAA,SAAS,WAA8B;AAoBhC,MAAM,2BACX;AAYK,MAAM;AAAA;AAAA;AAAA;AAAA,EAIX;AAAA;AAsBK,MAAM,2BACX;AAaK,MAAM,gCACX;AAQK,MAAM,6BACX;AAKK,MAAM,gCACX;AAkBK,MAAM,+BAA+B;AAAA,EAC1C;AAAA;AAAA,IAEE;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA;AAAA,MAGR,SAAS;AAAA,QACP,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,SAAS,KAAK;AAAA,EACnC;AACF;AAMO,MAAM,2BAA2B;AAIjC,MAAM,+BAA+B;AAIrC,MAAM,gCACX;AAMK,MAAM,8BACX;AAMK,MAAM,2BACX;AAMK,MAAM,4BACX;","names":[]}
+{"version":3,"sources":["../../../src/components/command-palette/command-palette.variants.ts"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport { focusRing } from \"../../lib/focus-ring\";\n\n// The command palette is a NEUTRAL overlay surface (spec §1/§3/§5/§8): brand violet and Verified\n// Green are accents, neutrals carry the surface. The SCRIM, the PANEL, the INPUT, and the RESULT\n// ROWS are neutral; the active-row highlight is the SECONDARY hover fill, NEVER a status or brand\n// color — the active row reports WHERE you are in the list, not a verified result, so it never\n// takes Verified Green, and Sovereign Violet never marks a row (brand != state, G-U2). A status\n// color appears only when a result row legitimately carries a status (a verified entity in its\n// subtitle), and then it is the --color-status-* accent on that row's OWN affordance, never a flood\n// of the palette — that affordance is the caller's (VerifiedBadge), not bound here. So NOTHING in\n// this file binds an --color-action-primary-* or --color-status-* fill. This is the ONLY\n// token-binding site (skill §5 hard rule).\n\n// The scrim (spec §2 scrim, §5 --color-scrim-*): the dimming layer behind the panel that separates\n// the palette from the page and absorbs outside clicks. A neutral dim on the modal z-layer,\n// decorative (no role). The fade is a PLAIN base transition + verdify easing, instant under reduced\n// motion — never the 350ms VerifiedBadge-only theatre (G-U3). Enter/exit ride Radix's data-state on\n// the overlay (attribute-selector variants, not arbitrary values). On a light surface the dark\n// scrim token applies (spec §5: scrim-dark behind the panel on a light surface; the committed\n// overlays bind scrim-dark with no auto light-surface inversion).\nexport const commandPaletteScrimClass =\n  \"fixed inset-0 z-(--z-index-modal) bg-scrim-dark \" +\n  \"transition-opacity duration-(--motion-duration-base) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant) \" +\n  \"data-[state=open]:opacity-100 data-[state=closed]:opacity-0\";\n\n// The panel (spec §2 panel, §5): the raised container holding the input and results; it takes\n// role=dialog + the focus trap (Radix). A NEUTRAL raised surface (--color-surface-raised) with the\n// outer surface border, the lg corner radius, the lg elevation shadow above the scrim, anchored near\n// the top of the modal z-layer. It never exceeds the viewport — the listbox owns the scroll. The\n// open/close transition is the BASE duration + verdify easing, instant under reduced motion, and\n// rides Radix's data-state (attribute-selector enter/exit, not arbitrary values). NEVER the\n// deliberate verified-check theatre (G-U3). Panel padding/gaps come from --space-*.\nexport const commandPalettePanelClass =\n  // Horizontally centered, anchored in the UPPER region of the viewport (a palette sits high, not\n  // dead-center like a Dialog): top-1/4 is a Tailwind FRACTION utility (no arbitrary raw value), so\n  // it stays clean against the token-binding gate while keeping the panel near the top.\n  \"fixed left-1/2 top-1/4 z-(--z-index-modal) -translate-x-1/2 \" +\n  // never exceeds the viewport — the listbox owns the scroll. calc()-bodied brackets are structural\n  // (not raw-value-leading), gate-legitimate, and mirror the Dialog panel's viewport cap.\n  \"flex w-[calc(100%-var(--space-8))] max-w-(--container-md) flex-col gap-(--space-3) \" +\n  \"max-h-[calc(75dvh)] \" +\n  \"bg-surface-raised border border-surface-border rounded-(--radius-lg) shadow-(--shadow-lg) \" +\n  \"p-(--space-3) \" +\n  \"transition-[opacity,transform] duration-(--motion-duration-base) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant) \" +\n  \"data-[state=open]:opacity-100 data-[state=closed]:opacity-0 \" +\n  \"data-[state=open]:scale-100 data-[state=closed]:scale-95 \" +\n  // the panel owns no focus stop itself (focus lives in the input); its ring is never removed\n  focusRing;\n\n// The input (spec §2 input, §4 Focus, §5): the single-line search field at the top, focused on\n// open. It IS the combobox. A control-tier field — control bg/border/fg + the placeholder token\n// (spec §5 --color-control-*). The query text is the body type role in the control fg. While focused\n// the input border takes the focus color and the visible 2px focus ring shows (never removed, spec\n// §4 Focus). The target-size floor (44px touch / 40px pointer, spec §7 2.5.8 / DEC-B) with the\n// height EMERGING from the floor, never fixed below it. The body metrics ride along\n// (leading/tracking) without binding the text-body SIZE — DEC-A: a form field's value size stays\n// text-base (the iOS no-zoom floor), the body type role contributes only its leading + tracking.\nexport const commandPaletteInputClass =\n  \"w-full rounded-(--radius-md) ps-(--space-9) pe-(--space-3) \" +\n  \"bg-control-bg text-control-fg border border-control-border \" +\n  \"placeholder:text-control-placeholder \" +\n  // DEC-A: form-field value size is text-base (iOS no-zoom floor); body type role rides via metrics\n  \"text-base leading-(--text-body--line-height) tracking-(--text-body--letter-spacing) \" +\n  \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop) \" +\n  // the input border takes the focus color while focused (spec §5 --color-border-focus)\n  \"focus-visible:border-border-focus \" +\n  focusRing;\n\n// The leading search icon (spec §2 input, §5 --size-icon-md): decorative (aria-hidden) — the input\n// names itself by its aria-label, not the glyph. Positioned at the inline-start of the input via a\n// logical offset so it mirrors under RTL (G-U6); inherits the placeholder color via currentColor.\nexport const commandPaletteSearchIconClass =\n  \"pointer-events-none absolute start-(--space-3) top-1/2 -translate-y-1/2 \" +\n  \"inline-flex h-(--size-icon-md) w-(--size-icon-md) items-center justify-center text-control-placeholder\";\n\n// The listbox (spec §2 listbox, §5): the results region below the input. A neutral raised surface\n// region with the input-to-results divider above it (a neutral hairline in the default border\n// color), scrolling within the panel when results overflow. Logical inline padding so it mirrors\n// under RTL (G-U6). No motion of its own — a wait is a plain wait (spec §4 Loading), the busy state\n// rides aria-busy, not theatre.\nexport const commandPaletteListboxClass =\n  \"min-h-0 flex-1 overflow-y-auto border-t border-border-default pt-(--space-2)\";\n\n// The group label (spec §2 group-label, §5): a non-selectable heading that partitions results by\n// kind; it is NOT a result and is skipped by arrow movement. It is essential de-emphasized text (it\n// names the group), so it uses the SECONDARY text color (AA) at the LABEL type role (spec §5\n// --color-text-secondary / --text-label) — not the decorative-only muted role (accessibility.md).\nexport const commandPaletteGroupLabelClass =\n  \"px-(--space-2) py-(--space-1) text-label text-text-secondary select-none\";\n\n// One result row (spec §2 option, §4 states). A neutral row at rest; the active (highlighted) AND\n// the pointer-hovered row share ONE state — aria-selected — painted with the SECONDARY hover fill\n// (spec §4 Hover, §5 --color-action-secondary-bg-hover). Pointer hover and keyboard active are kept\n// in sync by setting aria-selected on whichever the user touched, so Enter always runs what is\n// highlighted. The active row reports WHERE you are, NOT a verified result — never Verified Green,\n// never the brand (spec §3/§8, G-U2). The label is the PRIMARY text color at the BODY type role\n// (spec §5 --color-text-primary / --text-body).\n//\n// FOCUS (spec §4 Focus): DOM focus stays in the INPUT the whole time; the active row is conveyed by\n// aria-activedescendant, not by moving focus into the list (spec §8 Don't). So a row does NOT paint\n// its own focus-visible ring — the active fill is the affordance, and the visible focus ring lives\n// on the input.\n//\n// DISABLED (spec §4 Disabled): a non-runnable row dims via the disabled TOKEN (DEC-C), never a\n// blanket opacity; it is aria-disabled, skipped by arrow movement (handled in the roving logic), and\n// not activatable. Its short reason sits in the secondary line.\nexport const commandPaletteOptionVariants = cva(\n  [\n    // shape + the icon-to-label gap + logical inline padding so it mirrors under RTL (G-U6)\n    \"relative flex items-center gap-(--space-3) rounded-(--radius-md) px-(--space-2)\",\n    // the resting (neutral) label color; pointer cursor; no underline\n    \"text-text-primary cursor-pointer select-none\",\n    // the shared pointer+keyboard highlight: the secondary hover fill on the ACTIVE row\n    // (aria-selected). NEVER a status/brand fill — the active row is location, not a verified result.\n    \"aria-selected:bg-action-secondary-bg-hover\",\n    // target-size floor — 44px touch / 40px pointer, on every row (spec §7 2.5.8), never a fixed\n    // height below the floor\n    \"min-h-(--size-target-mobile) sm:min-h-(--size-target-desktop)\",\n    // focus stays in the input (spec §4 Focus / §8) — the row never paints its own focus ring\n    \"outline-none\",\n    // disabled (non-runnable) row — DEC-C: dim via the disabled TOKEN, never opacity; not operable\n    \"aria-disabled:text-text-disabled aria-disabled:pointer-events-none aria-disabled:cursor-default\",\n  ],\n  {\n    variants: {\n      // The result label/secondary type role. There is one row treatment; the axis only exists to\n      // keep the binding file shaped like the other compounds. md is the only value the spec needs.\n      density: {\n        md: \"py-(--space-2)\",\n      },\n    },\n    defaultVariants: { density: \"md\" },\n  },\n);\n\nexport type CommandPaletteOptionVariantProps = VariantProps<typeof commandPaletteOptionVariants>;\n\n// The result label (spec §2 option, §5): the primary line, body type role in the primary text color,\n// truncating when long so the row keeps its shape (--color-text-primary / --text-body).\nexport const commandPaletteLabelClass = \"min-w-0 flex-1 truncate text-body text-text-primary\";\n\n// The result secondary line (spec §2 option, §5): the optional second line under/after the label, in\n// the SECONDARY text color (spec §5 --color-text-secondary). Truncates when long.\nexport const commandPaletteSecondaryClass = \"truncate text-label text-text-secondary\";\n\n// The leading result icon (spec §2 option, §5 --size-icon-md): decorative — the row names itself by\n// its label text, not the glyph. Inherits the row color via currentColor; never collapses.\nexport const commandPaletteOptionIconClass =\n  \"inline-flex h-(--size-icon-md) w-(--size-icon-md) shrink-0 items-center justify-center\";\n\n// The trailing keyboard-shortcut hint (spec §2 option, §5): pushed to the inline-end, in the MUTED\n// text color at the LABEL type role (spec §5 --color-text-muted / --text-label). Decorative\n// wayfinding, never a focus stop; logical inline-end placement (G-U6). The monospace ID/shortcut\n// stays isolated LTR inside RTL text (G-U6).\nexport const commandPaletteShortcutClass =\n  \"ms-auto ps-(--space-4) text-label text-text-muted\";\n\n// The empty (no-match) state (spec §2 empty, §4): plain text that says nothing matched and what to\n// try — never a dead end, never a blamed query (principles voice). The SECONDARY text color at the\n// body type role, with breathing room (spec §5 --color-text-secondary). Announced as text, not\n// silence (spec §7 4.1.3).\nexport const commandPaletteEmptyClass =\n  \"px-(--space-2) py-(--space-6) text-center text-body text-text-secondary\";\n\n// The footer (spec §2 footer, §5): a thin hint row showing the active keys (move, run, dismiss) so\n// the keyboard model is discoverable in place. The SECONDARY text color at the LABEL type role with\n// a neutral hairline divider above it (spec §5 --color-text-secondary / --text-label /\n// --color-border-default). Logical inline layout (G-U6).\nexport const commandPaletteFooterClass =\n  \"flex items-center gap-(--space-4) border-t border-border-default pt-(--space-2) \" +\n  \"text-label text-text-secondary\";\n"],"mappings":"AAAA,SAAS,WAA8B;AACvC,SAAS,iBAAiB;AAoBnB,MAAM,2BACX;AAYK,MAAM;AAAA;AAAA;AAAA;AAAA,EAIX;AAAA,EAYA;AAAA;AAUK,MAAM,2BACX,oVAQA;AAKK,MAAM,gCACX;AAQK,MAAM,6BACX;AAMK,MAAM,gCACX;AAkBK,MAAM,+BAA+B;AAAA,EAC1C;AAAA;AAAA,IAEE;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA;AAAA,IAGA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACF;AAAA,EACA;AAAA,IACE,UAAU;AAAA;AAAA;AAAA,MAGR,SAAS;AAAA,QACP,IAAI;AAAA,MACN;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,SAAS,KAAK;AAAA,EACnC;AACF;AAMO,MAAM,2BAA2B;AAIjC,MAAM,+BAA+B;AAIrC,MAAM,gCACX;AAMK,MAAM,8BACX;AAMK,MAAM,2BACX;AAMK,MAAM,4BACX;","names":[]}

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"}