@verdify/ui 0.2.1 → 0.3.0

package/registry/toast.json

@@ -18,7 +18,7 @@
       "type": "registry:ui"
     },
     {
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\n\n// A Toast is a brief, transient feedback surface that floats over the page to confirm an action or\n// report an async result without taking focus (spec §1). It is NOT the brand: its type is carried\n// by the status it reports, never by Sovereign Violet, so this file binds nothing from the\n// --color-action-primary-* tier as a status (brand != state, G-U2). The only action-tier utility\n// used is the NEUTRAL ghost treatment on the inline action and dismiss controls — that is the\n// control's own treatment, not the toast's status (the brand != state gate scopes status keys to\n// the toast variant axis only). This is the ONLY token-binding site (skill §5 hard rule).\n\n// The viewport: the corner-anchored live region that holds the stack of toasts (spec §2 region). It\n// is the fixed <ol> on the toast z-layer (spec §5 --z-index-toast — the dedicated layer above page\n// content, distinct from the modal layer the overlays use). Logical-property anchoring (G-U6): the\n// stack sits at the block-end inline-end corner and flows as a column with the stack gap. It is a\n// landmark region (Radix role=region), decorative of fill — neutral, no status color.\nexport const toastViewportClass =\n  \"fixed bottom-0 end-0 z-(--z-index-toast) \" +\n  \"flex max-h-screen w-full flex-col gap-(--space-3) p-(--space-4) \" +\n  \"sm:max-w-(--container-sm)\";\n\n// The toast: one message in the stack (spec §2 toast). A NEUTRAL raised surface (spec §3/§5:\n// neutrals carry the body) with the lg elevation shadow above the page, the md corner radius, and a\n// 1px border whose COLOR is the single status accent — the status is an edge + the icon, never a\n// saturated fill that floods the surface (spec §3/§5, restraint over volume). The status border is\n// the ONLY status binding on the container; bg/text stay neutral.\n//\n// Enter/exit is a plain slide-and-fade on the BASE duration + AMBIENT easing (spec §4/§5), riding\n// Radix's data-state and data-swipe attributes (attribute-selector variants, not arbitrary values).\n// It collapses to the instant endpoint under reduced motion. A toast NEVER uses the 350ms\n// VerifiedBadge-only theatre duration — that motion is the one piece of theatre in the system and is\n// reserved for the verified moment (G-U3 motion-theatre gate). Even a `verified` toast slides in on\n// the base duration.\n//\n// variant = the type the toast reports (spec §3): the four statuses map one-to-one to the\n// --color-status-*-border accent; there is no neutral or brand-colored toast. NONE binds\n// --color-action-* as a status (brand != state, spec §3/§8).\nexport const toastVariants = cva(\n  [\n    // layout: a row holding the leading type icon, the stacked message column, then the inline\n    // action and the dismiss control; logical-property gap so it mirrors under dir=\"rtl\" (G-U6)\n    \"flex items-start gap-(--space-3)\",\n    // the raised surface: neutral fill, neutral outer-surface fallback, internal padding off the\n    // edge, the md corner radius, the lg elevation shadow above the page content (spec §5)\n    \"bg-surface-raised rounded-(--radius-md) border p-(--space-3) shadow-(--shadow-lg)\",\n    // logical-property text alignment so the toast mirrors under dir=\"rtl\" (G-U6)\n    \"text-start\",\n    // enter/exit slide-and-fade: the BASE duration on AMBIENT easing (spec §4/§5), collapsing to\n    // the instant endpoint under reduced motion. NEVER the verified-check theatre (G-U3).\n    \"transition-[opacity,transform] duration-(--motion-duration-base) ease-(--motion-easing-ambient)\",\n    \"motion-reduce:duration-(--motion-duration-instant)\",\n    // enter/exit ride Radix's data-state — attribute-selector variants, not arbitrary values\n    \"data-[state=open]:opacity-100 data-[state=closed]:opacity-0\",\n    // swipe-to-dismiss rides Radix's data-swipe — the toast follows the pointer on move, snaps back\n    // on cancel, and fades out on end (attribute-selector variants, not arbitrary values, spec §4)\n    \"data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)]\",\n    \"data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-[transform]\",\n    \"data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)]\",\n    \"data-[swipe=end]:opacity-0\",\n  ],\n  {\n    variants: {\n      // STRUCTURAL axis = spec §3: the type the toast reports. Each maps to the matching\n      // --color-status-*-border accent on the neutral surface (spec §3/§5).\n      variant: {\n        // an action succeeded / a claim is now proven — the in-product Verified Green status,\n        // NEVER the brand (spec §3/§8)\n        verified: \"border-status-verified-border\",\n        // a neutral, informational result that needs no action (spec §3)\n        signal: \"border-status-signal-border\",\n        // a non-blocking warning — completed with a caveat worth seeing (spec §3)\n        caution: \"border-status-caution-border\",\n        // a failure or error — the highest-urgency type (spec §3)\n        critical: \"border-status-critical-border\",\n      },\n    },\n    // the lowest-urgency status is the default; a louder type is spent only when warranted (spec §8)\n    defaultVariants: { variant: \"signal\" },\n  },\n);\n\n// The type icon (spec §2/§5): a type icon reinforcing the status at the md icon role. It pairs\n// with the message text so status is never carried by color or icon alone (WCAG 1.4.1, spec §2).\n// Because the icon is DECORATIVE (aria-hidden in tsx) and the message text carries the status\n// meaning, it is exempt from the AA text floor and takes the BRIGHT variant ACCENT via the\n// matching --color-status-*-accent (tokens 0.6.0) — the vivid status color reads as an emphasis\n// mark, while the readable message keeps its AA text token.\nexport const toastIconVariants = cva(\n  \"inline-flex shrink-0 h-(--size-icon-md) w-(--size-icon-md)\",\n  {\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\n// The stacked message column (spec §2): the primary message and an optional secondary line stack\n// vertically beside the leading icon. min-w-0 lets long message text wrap instead of overflowing the\n// row, and flex-1 lets it take the available width before the action/dismiss controls.\nexport const toastContentClass = \"flex min-w-0 flex-1 flex-col gap-(--space-2)\";\n\n// The message (spec §2/§5): the text. A plain statement ending in a period; for a failure it names\n// what failed and what to do next, and never blames you (spec §2). The body type role in primary\n// text. It is the toast's accessible name (Radix wires aria-labelledby). Brand violet never paints it.\nexport const toastTitleClass = \"text-body text-text-primary\";\n\n// The secondary message line (spec §2/§5): a supporting line under the message, where used. The body\n// type role in --color-text-secondary. It is the toast's accessible description (Radix wires\n// aria-describedby).\nexport const toastDescriptionClass = \"text-body text-text-secondary\";\n\n// The inline action (spec §2/§6): at most one inline action, phrased as a verb (\"Undo\", \"View\"). A\n// NEUTRAL ghost surface — the label in --color-action-ghost-fg at rest, the restrained ghost hover\n// fill (no bg/border at rest) — so the action is neutral and never competes with the status accent.\n// The ghost fg/hover is the control's OWN action treatment, not the toast's status (the brand !=\n// state gate scopes status keys to the toast container variant). It is a real focus stop (Radix\n// ToastAction renders a native <button>) with the label type role, the target-size floor (44px touch\n// / 40px pointer, spec §5 / 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).\nexport const toastActionClass =\n  \"inline-flex shrink-0 items-center justify-center rounded-(--radius-md) px-(--space-3) \" +\n  \"text-label font-medium \" +\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) sm:min-h-(--size-target-desktop) \" +\n  \"outline-none focus-visible:ring-2 focus-visible:ring-border-focus focus-visible:ring-offset-2\";\n\n// The dismiss control (spec §2/§6/§7): an explicit close on the inline-end edge for toasts that do\n// not auto-dismiss and for pointer users clearing one early. A NEUTRAL ghost icon-button — the glyph\n// in --color-action-ghost-fg at rest, the restrained ghost hover fill — so it never competes with\n// the status. A real focus stop (Radix ToastClose renders a native <button>) with the square\n// target-size floor (44px touch / 40px pointer, spec §5 / DEC-B; height EMERGES from the floor,\n// never fixed below it), the persistent focus ring, and the fast functional hover motion + verdify\n// easing, instant under reduced motion (G-U3).\nexport const toastCloseClass =\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 md icon role, drawn with currentColor so it\n// inherits the button's ghost fg. Decorative (aria-hidden in tsx) — the button carries the name.\nexport const toastCloseGlyphClass = \"h-(--size-icon-md) w-(--size-icon-md)\";\n\nexport type ToastVariantProps = VariantProps<typeof toastVariants>;\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport { focusRing } from \"@/lib/focus-ring\";\n\n// A Toast is a brief, transient feedback surface that floats over the page to confirm an action or\n// report an async result without taking focus (spec §1). It is NOT the brand: its type is carried\n// by the status it reports, never by Sovereign Violet, so this file binds nothing from the\n// --color-action-primary-* tier as a status (brand != state, G-U2). The only action-tier utility\n// used is the NEUTRAL ghost treatment on the inline action and dismiss controls — that is the\n// control's own treatment, not the toast's status (the brand != state gate scopes status keys to\n// the toast variant axis only). This is the ONLY token-binding site (skill §5 hard rule).\n\n// The viewport: the corner-anchored live region that holds the stack of toasts (spec §2 region). It\n// is the fixed <ol> on the toast z-layer (spec §5 --z-index-toast — the dedicated layer above page\n// content, distinct from the modal layer the overlays use). Logical-property anchoring (G-U6): the\n// stack sits at the block-end inline-end corner and flows as a column with the stack gap. It is a\n// landmark region (Radix role=region), decorative of fill — neutral, no status color.\nexport const toastViewportClass =\n  \"fixed bottom-0 end-0 z-(--z-index-toast) \" +\n  \"flex max-h-screen w-full flex-col gap-(--space-3) p-(--space-4) \" +\n  \"sm:max-w-(--container-sm)\";\n\n// The toast: one message in the stack (spec §2 toast). A NEUTRAL raised surface (spec §3/§5:\n// neutrals carry the body) with the lg elevation shadow above the page, the md corner radius, and a\n// 1px border whose COLOR is the single status accent — the status is an edge + the icon, never a\n// saturated fill that floods the surface (spec §3/§5, restraint over volume). The status border is\n// the ONLY status binding on the container; bg/text stay neutral.\n//\n// Enter/exit is a plain slide-and-fade on the BASE duration + AMBIENT easing (spec §4/§5), riding\n// Radix's data-state and data-swipe attributes (attribute-selector variants, not arbitrary values).\n// It collapses to the instant endpoint under reduced motion. A toast NEVER uses the 350ms\n// VerifiedBadge-only theatre duration — that motion is the one piece of theatre in the system and is\n// reserved for the verified moment (G-U3 motion-theatre gate). Even a `verified` toast slides in on\n// the base duration.\n//\n// variant = the type the toast reports (spec §3): the four statuses map one-to-one to the\n// --color-status-*-border accent; there is no neutral or brand-colored toast. NONE binds\n// --color-action-* as a status (brand != state, spec §3/§8).\nexport const toastVariants = cva(\n  [\n    // layout: a row holding the leading type icon, the stacked message column, then the inline\n    // action and the dismiss control; logical-property gap so it mirrors under dir=\"rtl\" (G-U6)\n    \"flex items-start gap-(--space-3)\",\n    // the raised surface: neutral fill, neutral outer-surface fallback, internal padding off the\n    // edge, the md corner radius, the lg elevation shadow above the page content (spec §5)\n    \"bg-surface-raised rounded-(--radius-md) border p-(--space-3) shadow-(--shadow-lg)\",\n    // logical-property text alignment so the toast mirrors under dir=\"rtl\" (G-U6)\n    \"text-start\",\n    // enter/exit slide-and-fade: the BASE duration on AMBIENT easing (spec §4/§5), collapsing to\n    // the instant endpoint under reduced motion. NEVER the verified-check theatre (G-U3).\n    \"transition-[opacity,transform] duration-(--motion-duration-base) ease-(--motion-easing-ambient)\",\n    \"motion-reduce:duration-(--motion-duration-instant)\",\n    // enter/exit ride Radix's data-state — attribute-selector variants, not arbitrary values\n    \"data-[state=open]:opacity-100 data-[state=closed]:opacity-0\",\n    // swipe-to-dismiss rides Radix's data-swipe — the toast follows the pointer on move, snaps back\n    // on cancel, and fades out on end (attribute-selector variants, not arbitrary values, spec §4)\n    \"data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)]\",\n    \"data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-[transform]\",\n    \"data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)]\",\n    \"data-[swipe=end]:opacity-0\",\n  ],\n  {\n    variants: {\n      // STRUCTURAL axis = spec §3: the type the toast reports. Each maps to the matching\n      // --color-status-*-border accent on the neutral surface (spec §3/§5).\n      variant: {\n        // an action succeeded / a claim is now proven — the in-product Verified Green status,\n        // NEVER the brand (spec §3/§8)\n        verified: \"border-status-verified-border\",\n        // a neutral, informational result that needs no action (spec §3)\n        signal: \"border-status-signal-border\",\n        // a non-blocking warning — completed with a caveat worth seeing (spec §3)\n        caution: \"border-status-caution-border\",\n        // a failure or error — the highest-urgency type (spec §3)\n        critical: \"border-status-critical-border\",\n      },\n    },\n    // the lowest-urgency status is the default; a louder type is spent only when warranted (spec §8)\n    defaultVariants: { variant: \"signal\" },\n  },\n);\n\n// The type icon (spec §2/§5): a type icon reinforcing the status at the md icon role. It pairs\n// with the message text so status is never carried by color or icon alone (WCAG 1.4.1, spec §2).\n// Because the icon is DECORATIVE (aria-hidden in tsx) and the message text carries the status\n// meaning, it is exempt from the AA text floor and takes the BRIGHT variant ACCENT via the\n// matching --color-status-*-accent (tokens 0.6.0) — the vivid status color reads as an emphasis\n// mark, while the readable message keeps its AA text token.\nexport const toastIconVariants = cva(\n  \"inline-flex shrink-0 h-(--size-icon-md) w-(--size-icon-md)\",\n  {\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\n// The stacked message column (spec §2): the primary message and an optional secondary line stack\n// vertically beside the leading icon. min-w-0 lets long message text wrap instead of overflowing the\n// row, and flex-1 lets it take the available width before the action/dismiss controls.\nexport const toastContentClass = \"flex min-w-0 flex-1 flex-col gap-(--space-2)\";\n\n// The message (spec §2/§5): the text. A plain statement ending in a period; for a failure it names\n// what failed and what to do next, and never blames you (spec §2). The body type role in primary\n// text. It is the toast's accessible name (Radix wires aria-labelledby). Brand violet never paints it.\nexport const toastTitleClass = \"text-body text-text-primary\";\n\n// The secondary message line (spec §2/§5): a supporting line under the message, where used. The body\n// type role in --color-text-secondary. It is the toast's accessible description (Radix wires\n// aria-describedby).\nexport const toastDescriptionClass = \"text-body text-text-secondary\";\n\n// The inline action (spec §2/§6): at most one inline action, phrased as a verb (\"Undo\", \"View\"). A\n// NEUTRAL ghost surface — the label in --color-action-ghost-fg at rest, the restrained ghost hover\n// fill (no bg/border at rest) — so the action is neutral and never competes with the status accent.\n// The ghost fg/hover is the control's OWN action treatment, not the toast's status (the brand !=\n// state gate scopes status keys to the toast container variant). It is a real focus stop (Radix\n// ToastAction renders a native <button>) with the label type role, the target-size floor (44px touch\n// / 40px pointer, spec §5 / 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).\nexport const toastActionClass =\n  \"inline-flex shrink-0 items-center justify-center rounded-(--radius-md) px-(--space-3) \" +\n  \"text-label font-medium \" +\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) sm:min-h-(--size-target-desktop) \" +\n  focusRing;\n\n// The dismiss control (spec §2/§6/§7): an explicit close on the inline-end edge for toasts that do\n// not auto-dismiss and for pointer users clearing one early. A NEUTRAL ghost icon-button — the glyph\n// in --color-action-ghost-fg at rest, the restrained ghost hover fill — so it never competes with\n// the status. A real focus stop (Radix ToastClose renders a native <button>) with the square\n// target-size floor (44px touch / 40px pointer, spec §5 / DEC-B; height EMERGES from the floor,\n// never fixed below it), the persistent focus ring, and the fast functional hover motion + verdify\n// easing, instant under reduced motion (G-U3).\nexport const toastCloseClass =\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 md icon role, drawn with currentColor so it\n// inherits the button's ghost fg. Decorative (aria-hidden in tsx) — the button carries the name.\nexport const toastCloseGlyphClass = \"h-(--size-icon-md) w-(--size-icon-md)\";\n\nexport type ToastVariantProps = VariantProps<typeof toastVariants>;\n",
       "path": "toast/toast.variants.ts",
       "target": "@ui/toast/toast.variants.ts",
       "type": "registry:ui"
@@ -26,7 +26,8 @@
   ],
   "name": "toast",
   "registryDependencies": [
-    "@verdify/cn"
+    "@verdify/cn",
+    "@verdify/focus-ring"
   ],
   "title": "toast",
   "type": "registry:ui"

package/registry/trust-score.json

@@ -17,7 +17,7 @@
       "type": "registry:ui"
     },
     {
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\n\n// TrustScore displays the cross-ecosystem trust score Verdify owns and computes — a\n// single rolled-up number, shown so the reader can read where an identity stands at a\n// glance (spec §1). It is a status OUTPUT, not a control: it takes no focus, binds no\n// keys, is never a tab stop, and renders no focus ring or target-size floor — the value\n// reaches assistive technology through a named group + a polite live region, never\n// through motion (spec §4/§6/§7).\n//\n// CALM BY CONTRACT — brand != state (spec §1/§3/§5/§8). A trust score is a MEASURE, not\n// a verdict and not a credential. TrustScore therefore paints from NEUTRAL text/surface\n// roles and the neutral --color-control-* roles for the optional gauge, and binds:\n//   * NOTHING from the action tier — the brand (Sovereign Violet) is never used to make\n//     the score look important, because the brand is not a status; and\n//   * NOTHING from the status tier — the verified-status green is never used to color a\n//     \"high\" score (that green means one verified result and nothing else, so lending it\n//     to a number tells the reader the score is a verification it is not), and there is\n//     no caution/critical \"danger\" band — banding the number by color turns a calm\n//     measure into an alarmist verdict.\n// There is no \"good\"/\"warning\"/\"danger\" variant: the variants below are forms of DISPLAY\n// (value / meter / compact), never levels of alarm. This whole-tree neutrality is pinned\n// as a component test in trust-score.test.tsx (the static brand!=state gate only catches\n// a cva-keyed status<->action cross-wire, not a neutral-leak — see the build-on-brand\n// skill, note B).\n//\n// The value also never animates on the deliberate verified-check duration — that 350ms\n// theatre is the verified check's alone, and a score update is not a verification; the\n// update settles on the fast duration with verdify easing (spec §4).\n\n// The root container (spec §2): a layout column stacking the value/scale row, the optional\n// label, the optional gauge, and the optional description at the --space-2 gap. Non-\n// interactive: no focus ring, no tab stop, no target-size floor (spec §4/§6/§7). When the\n// score sits in its own card the `carded` axis adds the neutral raised surface, the muted\n// surface border, the medium corner radius, and the --space-3 internal padding (spec §5).\nexport const trustScoreVariants = cva(\"flex flex-col gap-(--space-2)\", {\n  variants: {\n    // STRUCTURAL axis = spec §3: a form of DISPLAY, never a level of alarm. None of the\n    // variants recolors the readout — they differ only in what is shown and at which\n    // type role, so the meaning is identical across all three.\n    variant: {\n      // value (default): the number with its label and optional scale, no gauge — the\n      // common, calmest case (a profile header, a row, a card).\n      value: \"\",\n      // meter: the number plus the neutral track gauge, for a surface where seeing the\n      // value against its scale helps. The gauge is a calm rail in neutral control roles.\n      meter: \"\",\n      // compact: the bare number at a smaller footprint for dense rows and inline\n      // contexts; the full label + scale still reach assistive technology via the group\n      // name. Same meaning at a smaller type role, not a different component.\n      compact: \"\",\n    },\n    // When carded, paint the neutral container: the raised surface, the muted surface\n    // border, the medium corner radius, and the internal padding (spec §5). No status,\n    // no action — a calm container for a calm measure.\n    carded: {\n      true: \"rounded-(--radius-md) border bg-surface-raised border-surface-border-muted p-(--space-3)\",\n      false: \"\",\n    },\n  },\n  defaultVariants: { variant: \"value\", carded: false },\n});\n\n// The value/scale row (spec §2): the number and its optional inline scale, baseline-\n// aligned at the small gap.\nexport const trustScoreRowClass = \"flex items-baseline gap-(--space-2)\";\n\n// The score numeric readout (spec §2/§4/§5): the trust score itself, in TABULAR figures\n// so digits hold their place when the value updates, at the h2 type role in the PRIMARY\n// text color. It is a polite live region (set in tsx) so a changed score is announced\n// without interruption; the value-settle transition runs on the FAST duration with\n// verdify easing, collapsing to the instant endpoint under reduced motion — a moving\n// trust score is information, not an event, and NEVER the 350ms verified-check theatre\n// duration (spec §4). The compact form drops the type role to the label role below.\nexport const trustScoreValueClass =\n  \"tabular-nums text-h2 text-text-primary \" +\n  \"transition-[color,opacity] duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant)\";\n\n// The compact value (spec §3): the same primary readout at the smaller label type role\n// for dense rows. Same tabular figures and the same settle transition.\nexport const trustScoreValueCompactClass =\n  \"tabular-nums text-label text-text-primary \" +\n  \"transition-[color,opacity] duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant)\";\n\n// The label (spec §2/§5): the text naming what the number is (\"Trust score\"), in the\n// secondary text color at the label type role. TrustScore is never an unlabeled number.\nexport const trustScoreLabelClass = \"text-label text-text-secondary\";\n\n// The scale (spec §2/§5): the plain bound the number reads against (\"out of 100\"), in the\n// secondary text color at the label type role, so the value is legible without guessing\n// the range.\nexport const trustScoreScaleClass = \"text-label text-text-secondary\";\n\n// The optional one-line description (spec §2/§5): a statement of what the score means or\n// when it last changed, in the secondary text color at the caption role.\nexport const trustScoreDescriptionClass = \"text-caption text-text-secondary\";\n\n// The unavailable message (spec §4/§5/§7): plain text where the number would be (\"Not yet\n// scored\" / \"Score unavailable\"), in the MUTED text color at the caption role, naming the\n// absence honestly rather than showing a misleading 0 or a low number. Honest about hard\n// things: an absent score is said, not faked.\nexport const trustScoreUnavailableClass = \"text-caption text-text-muted\";\n\n// The optional meter track (spec §2/§5): a restrained gauge rail visualising the score\n// against its scale, in the NEUTRAL control surface with the control border, clipped so\n// the rounded indicator end never bleeds past the rail, on the full radius. It is a calm\n// gauge, NEVER a progress fill racing toward a target and NEVER recolored to a status to\n// imply alarm or approval (spec §2/§3/§4) — the non-text contrast bar (1.4.11) is met by\n// the control roles, not by a colored band.\nexport const trustScoreTrackClass =\n  \"relative block h-(--space-2) w-full overflow-hidden \" +\n  \"rounded-(--radius-full) bg-control-bg border border-control-border\";\n\n// The meter filled-portion indicator (spec §2/§4/§5): the portion of the rail up to the\n// score, in the NEUTRAL control foreground, rounded on the full radius. Its inline length\n// is the score as a percentage of the scale (set as an inline width in tsx — a data\n// percentage, not a design token). The length CHANGES on the FAST duration with verdify\n// easing, collapsing to the instant endpoint under reduced motion — a calm settle, never\n// the verified-check theatre duration (spec §4). It is neutral: no status, no action.\nexport const trustScoreIndicatorClass =\n  \"block h-full rounded-(--radius-full) bg-control-fg \" +\n  \"transition-[inline-size] duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant)\";\n\nexport type TrustScoreVariantProps = VariantProps<typeof trustScoreVariants>;\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\n\n// TrustScore displays the cross-ecosystem trust score Verdify owns and computes — a\n// single rolled-up number, shown so the reader can read where an identity stands at a\n// glance (spec §1). It is a status OUTPUT, not a control: it takes no focus, binds no\n// keys, is never a tab stop, and renders no focus ring or target-size floor — the value\n// reaches assistive technology through a named group + a polite live region, never\n// through motion (spec §4/§6/§7).\n//\n// CALM BY CONTRACT — brand != state (spec §1/§3/§5/§8). A trust score is a MEASURE, not\n// a verdict and not a credential. TrustScore therefore paints from NEUTRAL text/surface\n// roles and the neutral --color-control-* roles for the optional gauge, and binds:\n//   * NOTHING from the action tier — the brand (Sovereign Violet) is never used to make\n//     the score look important, because the brand is not a status; and\n//   * NOTHING from the status tier — the verified-status green is never used to color a\n//     \"high\" score (that green means one verified result and nothing else, so lending it\n//     to a number tells the reader the score is a verification it is not), and there is\n//     no caution/critical \"danger\" band — banding the number by color turns a calm\n//     measure into an alarmist verdict.\n// There is no \"good\"/\"warning\"/\"danger\" variant: the variants below are forms of DISPLAY\n// (value / meter / compact), never levels of alarm. This whole-tree neutrality is pinned\n// as a component test in trust-score.test.tsx (the static brand!=state gate only catches\n// a cva-keyed status<->action cross-wire, not a neutral-leak — see the build-on-brand\n// skill, note B).\n//\n// The value also never animates on the deliberate verified-check duration — that 350ms\n// theatre is the verified check's alone, and a score update is not a verification; the\n// update settles on the fast duration with verdify easing (spec §4).\n\n// The root container (spec §2): a layout column stacking the value/scale row, the optional\n// label, the optional gauge, and the optional description at the --space-2 gap. Non-\n// interactive: no focus ring, no tab stop, no target-size floor (spec §4/§6/§7). When the\n// score sits in its own card the `carded` axis adds the neutral raised surface, the muted\n// surface border, the medium corner radius, and the --space-3 internal padding (spec §5).\nexport const trustScoreVariants = cva(\"flex flex-col gap-(--space-2)\", {\n  variants: {\n    // STRUCTURAL axis = spec §3: a form of DISPLAY, never a level of alarm. None of the\n    // variants recolors the readout — they differ only in what is shown and at which\n    // type role, so the meaning is identical across all three.\n    variant: {\n      // value (default): the number with its label and optional scale, no gauge — the\n      // common, calmest case (a profile header, a row, a card).\n      value: \"\",\n      // meter: the number plus the neutral track gauge, for a surface where seeing the\n      // value against its scale helps. The gauge is a calm rail in neutral control roles.\n      meter: \"\",\n      // compact: the bare number at a smaller footprint for dense rows and inline\n      // contexts; the full label + scale still reach assistive technology via the group\n      // name. Same meaning at a smaller type role, not a different component.\n      compact: \"\",\n    },\n    // When carded, paint the neutral container: the raised surface, the muted surface\n    // border, the medium corner radius, and the internal padding (spec §5). No status,\n    // no action — a calm container for a calm measure.\n    carded: {\n      true: \"rounded-(--radius-md) border bg-surface-raised border-surface-border-muted p-(--space-3)\",\n      false: \"\",\n    },\n  },\n  defaultVariants: { variant: \"value\", carded: false },\n});\n\n// The value/scale row (spec §2): the number and its optional inline scale, baseline-\n// aligned at the small gap.\nexport const trustScoreRowClass = \"flex items-baseline gap-(--space-2)\";\n\n// The score numeric readout (spec §2/§4/§5): the trust score itself, in TABULAR figures\n// so digits hold their place when the value updates, at the h2 type role in the PRIMARY\n// text color. It is a polite live region (set in tsx) so a changed score is announced\n// without interruption; the value-settle transition runs on the FAST duration with\n// verdify easing, collapsing to the instant endpoint under reduced motion — a moving\n// trust score is information, not an event, and NEVER the 350ms verified-check theatre\n// duration (spec §4). The compact form drops the type role to the label role below.\nexport const trustScoreValueClass =\n  \"tabular-nums text-h2 text-text-primary \" +\n  \"transition-[color,opacity] duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant)\";\n\n// The compact value (spec §3): the same primary readout at the smaller label type role\n// for dense rows. Same tabular figures and the same settle transition.\nexport const trustScoreValueCompactClass =\n  \"tabular-nums text-label text-text-primary \" +\n  \"transition-[color,opacity] duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant)\";\n\n// The label (spec §2/§5): the text naming what the number is (\"Trust score\"), in the\n// secondary text color at the label type role. TrustScore is never an unlabeled number.\nexport const trustScoreLabelClass = \"text-label text-text-secondary\";\n\n// The scale (spec §2/§5): the plain bound the number reads against (\"out of 100\"), in the\n// secondary text color at the label type role, so the value is legible without guessing\n// the range.\nexport const trustScoreScaleClass = \"text-label text-text-secondary\";\n\n// The optional one-line description (spec §2/§5): a statement of what the score means or\n// when it last changed, in the secondary text color at the caption role.\nexport const trustScoreDescriptionClass = \"text-caption text-text-secondary\";\n\n// The unavailable message (spec §4/§5/§7): plain text where the number would be (\"Not yet\n// scored\" / \"Score unavailable\"), at the caption role, naming the absence honestly rather than\n// showing a misleading 0 or a low number. It is essential text, so it uses the SECONDARY text color\n// (AA), not the decorative-only muted role (accessibility.md). Honest about hard things: an absent\n// score is said, not faked.\nexport const trustScoreUnavailableClass = \"text-caption text-text-secondary\";\n\n// The optional meter track (spec §2/§5): a restrained gauge rail visualising the score\n// against its scale, in the NEUTRAL control surface with the control border, clipped so\n// the rounded indicator end never bleeds past the rail, on the full radius. It is a calm\n// gauge, NEVER a progress fill racing toward a target and NEVER recolored to a status to\n// imply alarm or approval (spec §2/§3/§4) — the non-text contrast bar (1.4.11) is met by\n// the control roles, not by a colored band.\nexport const trustScoreTrackClass =\n  \"relative block h-(--space-2) w-full overflow-hidden \" +\n  \"rounded-(--radius-full) bg-control-bg border border-control-border\";\n\n// The meter filled-portion indicator (spec §2/§4/§5): the portion of the rail up to the\n// score, in the NEUTRAL control foreground, rounded on the full radius. Its inline length\n// is the score as a percentage of the scale (set as an inline width in tsx — a data\n// percentage, not a design token). The length CHANGES on the FAST duration with verdify\n// easing, collapsing to the instant endpoint under reduced motion — a calm settle, never\n// the verified-check theatre duration (spec §4). It is neutral: no status, no action.\nexport const trustScoreIndicatorClass =\n  \"block h-full rounded-(--radius-full) bg-control-fg \" +\n  \"transition-[inline-size] duration-(--motion-duration-fast) ease-(--motion-easing-verdify) \" +\n  \"motion-reduce:duration-(--motion-duration-instant)\";\n\nexport type TrustScoreVariantProps = VariantProps<typeof trustScoreVariants>;\n",
       "path": "trust-score/trust-score.variants.ts",
       "target": "@ui/trust-score/trust-score.variants.ts",
       "type": "registry:ui"

package/registry.json

@@ -10,6 +10,10 @@
       "name": "cn",
       "type": "registry:lib"
     },
+    {
+      "name": "focus-ring",
+      "type": "registry:lib"
+    },
     {
       "name": "accordion",
       "type": "registry:ui"