@teamblind-chorus/ui 1.2.0 → 2.0.0

package/dist/index.js

@@ -5,11 +5,11 @@ import { createPortal } from 'react-dom';
 // ../../schema/components/badge/update.spec.json
 var update_spec_default = {
   appearance: {
-    background: "sys.color.brand",
-    label: "sys.color.onBrand",
+    background: "sys.color.text.brand",
+    label: "sys.color.text.onFill",
     radius: "sys.radius.full",
     dotOutline: {
-      color: "sys.color.surface",
+      color: "sys.color.surface.default",
       width: "sys.borderWidth.thin",
       rendering: "box-shadow",
       note: "Update Dot rungs paint a 2px `surface`-color outline as a `box-shadow` so the dot stays a discrete chip on any host (image, icon, row) without enlarging its bounding box. The outline carves the dot out of whatever sits beside it; without it the brand fill blends into surrounding fills with similar luminance."
@@ -28,7 +28,7 @@ var update_spec_default = {
       minWidth: "ref.space.200",
       paddingBlock: "0",
       paddingInline: "sys.layout.container.2xs",
-      labelTypo: "sys.typo.caption"
+      labelTypo: "sys.typo.label.xs"
     },
     "dot-md": {
       minHeight: "ref.space.100",
@@ -52,15 +52,15 @@ var update_spec_default = {
 var role_spec_default = {
   appearances: {
     default: {
-      background: "sys.color.primaryContainer",
-      label: "sys.color.onPrimaryContainer",
+      background: "sys.color.background.selected",
+      label: "sys.color.text.link",
       radius: "sys.radius.full",
       default: true,
       note: "Tonal informational pair \u2014 pale primary container fill with the deep primary-container label. Theme-aware sys tokens, so no separate dark binding. Never the brand pair: brand is reserved for the Update sub's activity marker, and a brand-filled role mark would read as an alert, not an identity."
     },
     inverse: {
-      background: "sys.color.inverseSurface",
-      label: "sys.color.inverseOnSurface",
+      background: "sys.color.background.inverse",
+      label: "sys.color.text.inverse",
       radius: "sys.radius.full",
       note: "Inverse pair \u2014 the strongest mark in the row: near-black pill with light label (theme-aware; flips in dark mode). Reserved for the PRO mark on paid professional users. Same geometry as default; only the fill pair changes."
     }
@@ -71,7 +71,7 @@ var role_spec_default = {
       minWidth: "ref.space.200",
       paddingBlock: "ref.space.25",
       paddingInline: "ref.space.75",
-      labelTypo: "sys.typo.caption",
+      labelTypo: "sys.typo.label.xs",
       labelLineHeight: "1.2",
       note: "Single 16-rung (`ref.space.200`) \u2014 sized to ride inline beside `caption`/`label` metadata text without stretching the row. 2 \xD7 6 padding (`ref.space.25` \xD7 `ref.space.75`); the reference steps bind raw where `sys.*` exposes no step, in lockstep with the Update sub's rungs. Label line-height is the structural `1.2` (same device as StatusTag): 10px \xD7 1.2 + 2 \xD7 2px padding = exactly 16px \u2014 `caption`'s 15px running-text line would push the pill to 19."
     }
@@ -327,27 +327,27 @@ var standard_spec_default = {
   },
   appearances: {
     primary: {
-      background: "sys.color.primary",
+      background: "sys.color.background.primary",
       border: null,
-      label: "sys.color.onPrimary"
+      label: "sys.color.text.onFill"
     },
     secondary: {
-      background: "sys.color.secondaryContainer",
+      background: "sys.color.background.neutral",
       border: null,
-      label: "sys.color.onSecondaryContainer"
+      label: "sys.color.text.default"
     },
     outlined: {
       background: "transparent",
       border: {
         width: "sys.borderWidth.hairline",
-        color: "sys.color.primary"
+        color: "sys.color.text.link"
       },
-      label: "sys.color.primary"
+      label: "sys.color.text.link"
     },
     tertiary: {
       background: "transparent",
       border: null,
-      label: "sys.color.onSurfaceVariant"
+      label: "sys.color.text.subtle"
     }
   },
   states: {
@@ -369,10 +369,7 @@ var standard_spec_default = {
       opacity: "sys.state.focus"
     },
     ring: {
-      outerWidth: "sys.borderWidth.thin",
-      outerColor: "sys.color.focus",
-      insetWidth: "sys.borderWidth.hairline",
-      insetColor: "sys.color.focusInset"
+      color: "sys.color.border.focused"
     }}};
 function sizeStyle(size) {
   const s2 = standard_spec_default.sizes[size] ?? standard_spec_default.sizes[standard_spec_default.props.size.default];
@@ -402,10 +399,7 @@ function stateStyle() {
     "--button-standard-overlay-pressed": tokenToCss(standard_spec_default.states.pressed.overlay.opacity),
     "--button-standard-overlay-focus": tokenToCss(standard_spec_default.focusIndicator.overlay.opacity),
     "--button-standard-disabled-opacity": tokenToCss(standard_spec_default.states.disabled.containerOpacity),
-    "--button-standard-focus-outer-width": tokenToCss(standard_spec_default.focusIndicator.ring.outerWidth),
-    "--button-standard-focus-outer-color": tokenToCss(standard_spec_default.focusIndicator.ring.outerColor),
-    "--button-standard-focus-inset-width": tokenToCss(standard_spec_default.focusIndicator.ring.insetWidth),
-    "--button-standard-focus-inset-color": tokenToCss(standard_spec_default.focusIndicator.ring.insetColor)
+    "--button-standard-focus-outer-color": tokenToCss(standard_spec_default.focusIndicator.ring.color)
   };
 }
 var FORCEABLE_STATES = /* @__PURE__ */ new Set(["hovered", "pressed", "focused"]);
@@ -473,12 +467,12 @@ var fab_spec_default = {
   },
   appearances: {
     primary: {
-      background: "sys.color.brand",
-      label: "sys.color.onBrand"
+      background: "sys.color.text.brand",
+      label: "sys.color.text.onFill"
     },
     secondary: {
-      background: "sys.color.surfaceContainerHigh",
-      label: "sys.color.onSurface"
+      background: "sys.color.surface.default",
+      label: "sys.color.text.default"
     }
   },
   states: {
@@ -497,10 +491,7 @@ var fab_spec_default = {
       opacity: "sys.state.focus"
     },
     ring: {
-      outerWidth: "sys.borderWidth.thin",
-      outerColor: "sys.color.focus",
-      insetWidth: "sys.borderWidth.hairline",
-      insetColor: "sys.color.focusInset"
+      color: "sys.color.border.focused"
     }}};
 var FORCEABLE_STATES2 = /* @__PURE__ */ new Set(["hovered", "pressed", "focused"]);
 function appearanceStyle3(appearance) {
@@ -521,10 +512,7 @@ var sizingStyle2 = () => ({
   "--button-fab-overlay-hover": tokenToCss(fab_spec_default.states.hovered.overlay.opacity),
   "--button-fab-overlay-pressed": tokenToCss(fab_spec_default.states.pressed.overlay.opacity),
   "--button-fab-overlay-focus": tokenToCss(fab_spec_default.focusIndicator.overlay.opacity),
-  "--button-fab-focus-outer-width": tokenToCss(fab_spec_default.focusIndicator.ring.outerWidth),
-  "--button-fab-focus-outer-color": tokenToCss(fab_spec_default.focusIndicator.ring.outerColor),
-  "--button-fab-focus-inset-width": tokenToCss(fab_spec_default.focusIndicator.ring.insetWidth),
-  "--button-fab-focus-inset-color": tokenToCss(fab_spec_default.focusIndicator.ring.insetColor),
+  "--button-fab-focus-outer-color": tokenToCss(fab_spec_default.focusIndicator.ring.color),
   ...typoStyles(fab_spec_default.sizing.labelTypo)
 });
 function ButtonFab({
@@ -1562,16 +1550,16 @@ var filter_spec_default = {
   selectionStates: {
     unselected: {
       background: "transparent",
-      label: "sys.color.onSurface",
+      label: "sys.color.text.default",
       border: {
         width: "sys.borderWidth.hairline",
-        color: "sys.color.outlineVariant"
+        color: "sys.color.border.default"
       },
       note: "Transparent fill so the chip adopts whatever surface sits behind it (page, raised card, sheet) without pinning to a fixed neutral step."
     },
     selected: {
-      background: "sys.color.inverseSurface",
-      label: "sys.color.inverseOnSurface",
+      background: "sys.color.background.inverse",
+      label: "sys.color.text.inverse",
       border: null
     }
   },
@@ -1601,35 +1589,39 @@ var filter_spec_default = {
         layer: "::after overlay \u2014 position:absolute, inset:0, no reflow (DESIGN.md Focus ring composition)",
         innerCounterRing: {
           width: "sys.borderWidth.hairline",
-          color: "sys.color.focusInset"
+          color: "sys.color.border.focused"
         },
         outerRing: {
           width: "sys.borderWidth.thin",
-          color: "sys.color.focus"
+          color: "sys.color.border.focused"
         }
       },
       note: "Keyboard-focus (:focus-visible) visual. Mirrors the `focusIndicator` block (the external-reader contract); kept here so spec-only renderers see focus in the states map. Composes over the lifecycle state the chip is in; never via plain mouse click."
     },
     disabled: {
       overlay: null,
-      containerOpacity: "sys.state.disabled",
+      background: "sys.color.background.disabled",
+      label: "sys.color.text.disabled",
+      border: {
+        width: "sys.borderWidth.hairline",
+        color: "sys.color.border.bold"
+      },
       suppressFocusRing: true,
-      cursor: "not-allowed"
+      cursor: "not-allowed",
+      note: "Explicit disabled (no opacity): neutral disabled fill + bold border so the shape reads on any surface, plus disabled label. Overrides the rest/selected appearance."
     }
   },
   focusIndicator: {
     description: "Keyboard-focus visual \u2014 an accessibility indicator, not a lifecycle state. Composes over whichever lifecycle state the chip is in. The `states.focused` block above is kept for JSX runtime consumers; this block is the parallel external-reader contract.",
     composition: "outward",
-    compositionReason: "Action affordance with breathing room around it; the 3px outward extent is reserved by the surrounding layout.",
+    compositionReason: "Action affordance with breathing room around it; the 1px outward ring is reserved by the surrounding layout.",
     overlay: {
       color: "label",
       opacity: "sys.state.focus"
     },
     ring: {
-      outerWidth: "sys.borderWidth.thin",
-      outerColor: "sys.color.focus",
-      insetWidth: "sys.borderWidth.hairline",
-      insetColor: "sys.color.focusInset"
+      width: "sys.borderWidth.hairline",
+      color: "sys.color.border.focused"
     },
     trigger: ":focus-visible (keyboard / programmatic focus, never plain mouse click)"
   },
@@ -1647,7 +1639,7 @@ var tag_spec_default = {
   name: "Chip",
   family: "chip",
   subcomponent: "tag",
-  description: "Informational chip. Square-cornered metadata label. Passive (or dismissable via trailing \xD7). No leading icon. Two appearances: `default` paints the translucent `sys.color.scrimSubtle` scrim (~8% inverse-tone overlay \u2014 black in light, white in dark) so the tag adopts whatever surface sits behind it; `accent` paints a tonal pale-primary container (`sys.color.primaryContainer`) with primary label for tags that need to pop against the surface.",
+  description: "Informational chip. Square-cornered metadata label. Passive (or dismissable via trailing \xD7). No leading icon. Two appearances: `default` paints the translucent `sys.color.background.neutral` scrim (~8% inverse-tone overlay \u2014 black in light, white in dark) so the tag adopts whatever surface sits behind it; `accent` paints a tonal pale-primary container (`sys.color.background.selected`) with primary label for tags that need to pop against the surface.",
   element: "span",
   props: {
     variant: {
@@ -1688,15 +1680,15 @@ var tag_spec_default = {
   },
   appearances: {
     default: {
-      background: "sys.color.scrimSubtle",
-      label: "sys.color.onSurface",
+      background: "sys.color.background.neutral",
+      label: "sys.color.text.default",
       border: null,
       default: true,
-      note: "Background is the translucent inverse-tone scrim (`sys.color.scrimSubtle` \u2014 black 8% in light mode, white 8% in dark) so the tag harmonises with whatever surface sits behind it \u2014 body, raised card, BottomSheet \u2014 instead of pinning to a fixed neutral step. Same Banner-style fill used by Progress track, StatusTag neutral, and Skeleton; sys-color is theme-aware so a single token resolves correctly in both modes."
+      note: "Background is the translucent inverse-tone scrim (`sys.color.background.neutral` \u2014 black 8% in light mode, white 8% in dark) so the tag harmonises with whatever surface sits behind it \u2014 body, raised card, BottomSheet \u2014 instead of pinning to a fixed neutral step. Same Banner-style fill used by Progress track, StatusTag neutral, and Skeleton; sys-color is theme-aware so a single token resolves correctly in both modes."
     },
     accent: {
-      background: "sys.color.primaryContainer",
-      label: "sys.color.primary",
+      background: "sys.color.background.selected",
+      label: "sys.color.text.link",
       border: null,
       note: "Tonal accent: pale primary container background with primary label. Sys-color tokens are theme-aware, so no separate dark binding is needed \u2014 the resolved tokens pick the right values per theme. Use for tags that should pop against the surface (e.g. Popular Tags in compose, highlighted hashtags) where the default overlay is too quiet."
     }
@@ -1727,35 +1719,39 @@ var tag_spec_default = {
         layer: "::after overlay \u2014 position:absolute, inset:0, no reflow (DESIGN.md Focus ring composition)",
         innerCounterRing: {
           width: "sys.borderWidth.hairline",
-          color: "sys.color.focusInset"
+          color: "sys.color.border.focused"
         },
         outerRing: {
           width: "sys.borderWidth.thin",
-          color: "sys.color.focus"
+          color: "sys.color.border.focused"
         }
       },
       note: "Keyboard-focus (:focus-visible) visual. Mirrors the `focusIndicator` block (the external-reader contract); kept here so spec-only renderers see focus in the states map. Composes over the lifecycle state the chip is in; never via plain mouse click."
     },
     disabled: {
       overlay: null,
-      containerOpacity: "sys.state.disabled",
+      background: "sys.color.background.disabled",
+      label: "sys.color.text.disabled",
+      border: {
+        width: "sys.borderWidth.hairline",
+        color: "sys.color.border.bold"
+      },
       suppressFocusRing: true,
-      cursor: "not-allowed"
+      cursor: "not-allowed",
+      note: "Explicit disabled (no opacity): neutral disabled fill + bold border so the shape reads on any surface, plus disabled label. Overrides the rest/selected appearance."
     }
   },
   focusIndicator: {
     description: "Keyboard-focus visual \u2014 an accessibility indicator, not a lifecycle state. Composes over whichever lifecycle state the chip is in. Applies only when the chip is interactive (a dismiss trailingIcon is present). The `states.focused` block above is kept for JSX runtime consumers; this block is the parallel external-reader contract.",
     composition: "outward",
-    compositionReason: "Action affordance with breathing room around it; the 3px outward extent is reserved by the surrounding layout.",
+    compositionReason: "Action affordance with breathing room around it; the 1px outward ring is reserved by the surrounding layout.",
     overlay: {
       color: "label",
       opacity: "sys.state.focus"
     },
     ring: {
-      outerWidth: "sys.borderWidth.thin",
-      outerColor: "sys.color.focus",
-      insetWidth: "sys.borderWidth.hairline",
-      insetColor: "sys.color.focusInset"
+      width: "sys.borderWidth.hairline",
+      color: "sys.color.border.focused"
     },
     trigger: ":focus-visible (keyboard / programmatic focus, never plain mouse click)"
   },
@@ -1832,16 +1828,16 @@ var toggle_spec_default = {
   },
   selectionStates: {
     unselected: {
-      background: "sys.color.primary",
-      label: "sys.color.onPrimary",
+      background: "sys.color.background.primary",
+      label: "sys.color.text.onFill",
       border: null
     },
     selected: {
       background: "transparent",
-      label: "sys.color.onSurface",
+      label: "sys.color.text.default",
       border: {
         width: "sys.borderWidth.hairline",
-        color: "sys.color.outlineVariant"
+        color: "sys.color.border.default"
       }
     }
   },
@@ -1871,11 +1867,11 @@ var toggle_spec_default = {
         layer: "::after overlay \u2014 position:absolute, inset:0, no reflow (DESIGN.md Focus ring composition)",
         innerCounterRing: {
           width: "sys.borderWidth.hairline",
-          color: "sys.color.focusInset"
+          color: "sys.color.border.focused"
         },
         outerRing: {
           width: "sys.borderWidth.thin",
-          color: "sys.color.focus"
+          color: "sys.color.border.focused"
         }
       },
       note: "Keyboard-focus (:focus-visible) visual. Mirrors the `focusIndicator` block (the external-reader contract); kept here so spec-only renderers see focus in the states map. Composes over the lifecycle state the button is in; never via plain mouse click."
@@ -1890,21 +1886,19 @@ var toggle_spec_default = {
   focusIndicator: {
     description: "Keyboard-focus visual \u2014 an accessibility indicator, not a lifecycle state. Composes over whichever lifecycle state the button is in. The `states.focused` block above is kept for JSX runtime consumers; this block is the parallel external-reader contract.",
     composition: "outward",
-    compositionReason: "Action affordance with breathing room around it; the 3px outward extent is reserved by the surrounding layout.",
+    compositionReason: "Action affordance with breathing room around it; the 1px outward ring is reserved by the surrounding layout.",
     overlay: {
       color: "label",
       opacity: "sys.state.focus"
     },
     ring: {
-      outerWidth: "sys.borderWidth.thin",
-      outerColor: "sys.color.focus",
-      insetWidth: "sys.borderWidth.hairline",
-      insetColor: "sys.color.focusInset"
+      width: "sys.borderWidth.hairline",
+      color: "sys.color.border.focused"
     },
     trigger: ":focus-visible (keyboard / programmatic focus, never plain mouse click)"
   },
   forbidden: [
-    "active state painted with sys.color.primary fill \u2014 active is transparent + hairline outline (the active state recedes, not asserts)",
+    "active state painted with sys.color.background.primary fill \u2014 active is transparent + hairline outline (the active state recedes, not asserts)",
     "active state painted with any opaque surface fill (surface, surfaceContainer, surfaceContainerHigh) \u2014 the committed form is transparent so the host surface shows through; do not re-bind to a tier'd fill",
     "rest state without an explicit `active={false}` \u2014 toggle is a binary contract, never tristate",
     "manual width override that breaks the full-card stretch when used inside ProfileCarousel.followAction"
@@ -1951,10 +1945,7 @@ function sizingStyle3(spec) {
     "--chip-overlay-pressed": tokenToCss(spec.states.pressed.overlay.opacity),
     "--chip-overlay-focus": tokenToCss(spec.focusIndicator.overlay.opacity),
     "--chip-disabled-opacity": tokenToCss(spec.states.disabled.containerOpacity),
-    "--chip-focus-outer-width": tokenToCss(spec.focusIndicator.ring.outerWidth),
-    "--chip-focus-outer-color": tokenToCss(spec.focusIndicator.ring.outerColor),
-    "--chip-focus-inset-width": tokenToCss(spec.focusIndicator.ring.insetWidth),
-    "--chip-focus-inset-color": tokenToCss(spec.focusIndicator.ring.insetColor),
+    "--chip-focus-outer-color": tokenToCss(spec.focusIndicator.ring.color),
     ...typoStyles(spec.sizing.labelTypo)
   };
 }
@@ -2030,14 +2021,14 @@ function ButtonToolbar({ appearance = "default", className, style, ...rest }) {
   let pairStyle = null;
   if (appearance === "accent") {
     pairStyle = {
-      "--chip-bg": "var(--sys-color-primary)",
-      "--chip-label": "var(--sys-color-onPrimary)",
+      "--chip-bg": "var(--sys-color-background-primary)",
+      "--chip-label": "var(--sys-color-text-onFill)",
       "--chip-border-color": "transparent"
     };
   } else if (appearance === "inverse") {
     pairStyle = {
-      "--chip-bg": "var(--sys-color-inverseSurface)",
-      "--chip-label": "var(--sys-color-inverseOnSurface)",
+      "--chip-bg": "var(--sys-color-background-inverse)",
+      "--chip-label": "var(--sys-color-text-inverse)",
       "--chip-border-color": "transparent"
     };
   }
@@ -2946,12 +2937,12 @@ function Divider({
 var empty_state_spec_default = {
   sizing: {
     illustrationSize: "ref.space.600",
-    illustrationColor: "sys.color.onSurfaceVariant",
+    illustrationColor: "sys.color.text.subtle",
     illustrationGap: "sys.layout.stack.sm",
     headlineTypo: "sys.typo.heading.sm",
-    headlineColor: "sys.color.onSurface",
+    headlineColor: "sys.color.text.default",
     bodyTypo: "sys.typo.body.sm",
-    bodyColor: "sys.color.onSurfaceVariant",
+    bodyColor: "sys.color.text.subtle",
     bodyGap: "sys.layout.stack.2xs",
     actionGap: "sys.layout.stack.md"
   }};
@@ -3041,17 +3032,17 @@ var underline_spec_default = {
     slotGap: "sys.layout.inline.sm",
     indicatorHeight: "sys.borderWidth.thin",
     dividerWidth: "sys.borderWidth.hairline",
-    dividerColor: "sys.color.outlineVariant",
+    dividerColor: "sys.color.border.default",
     labelTypo: "sys.typo.label.md",
     iconSize: "sys.icon.md",
     fadeWidth: "ref.space.600"
   },
   selectionStates: {
     unselected: {
-      label: "sys.color.outline"},
+      label: "sys.color.text.subtle"},
     selected: {
-      label: "sys.color.onSurface",
-      indicator: "sys.color.onSurface"
+      label: "sys.color.text.default",
+      indicator: "sys.color.border.selected"
     }
   },
   states: {
@@ -3066,17 +3057,14 @@ var underline_spec_default = {
       }
     },
     disabled: {
-      containerOpacity: "sys.state.disabled"}
+      }
   },
   focusIndicator: {
     overlay: {
       opacity: "sys.state.focus"
     },
     ring: {
-      outerWidth: "sys.borderWidth.thin",
-      outerColor: "sys.color.focus",
-      insetWidth: "sys.borderWidth.hairline",
-      insetColor: "sys.color.focusInset"}}};
+      color: "sys.color.border.focused"}}};
 function useSlidingIndicator(containerRef, indicatorRef, value) {
   useLayoutEffect(() => {
     const container = containerRef.current;
@@ -3157,10 +3145,7 @@ function TabsUnderline({ className, style, children, ...rest }) {
     "--tabs-overlay-pressed": tokenToCss(underline_spec_default.states.pressed.overlay.opacity),
     "--tabs-overlay-focus": tokenToCss(underline_spec_default.focusIndicator.overlay.opacity),
     "--tabs-disabled-opacity": tokenToCss(underline_spec_default.states.disabled.containerOpacity),
-    "--tabs-focus-outer-width": tokenToCss(underline_spec_default.focusIndicator.ring.outerWidth),
-    "--tabs-focus-outer-color": tokenToCss(underline_spec_default.focusIndicator.ring.outerColor),
-    "--tabs-focus-inset-width": tokenToCss(underline_spec_default.focusIndicator.ring.insetWidth),
-    "--tabs-focus-inset-color": tokenToCss(underline_spec_default.focusIndicator.ring.insetColor),
+    "--tabs-focus-outer-color": tokenToCss(underline_spec_default.focusIndicator.ring.color),
     ...typoStyles(s2.labelTypo),
     ...style
   };
@@ -3896,9 +3881,9 @@ function Card({ item, innerRef, index }) {
 }
 var MAX_CARDS2 = 5;
 var METRIC_KINDS = {
-  star: { Icon: StarFillIcon, tone: "var(--sys-color-icon-yellow)" },
-  pulse: { Icon: PulseFillIcon, tone: "var(--sys-color-success)" },
-  heart: { Icon: HeartFillIcon, tone: "var(--sys-color-icon-red)" }
+  star: { Icon: StarFillIcon, tone: "var(--sys-color-icon-accent-yellow-default)" },
+  pulse: { Icon: PulseFillIcon, tone: "var(--sys-color-icon-success)" },
+  heart: { Icon: HeartFillIcon, tone: "var(--sys-color-icon-accent-red-default)" }
 };
 var PLACEHOLDER_IMAGE = "/placeholder.png";
 function ProfileCarousel({
@@ -4452,7 +4437,7 @@ var input_spec_default = {
     helper: {
       type: "node",
       optional: true,
-      description: "Assistive text rendered below the field box, left-aligned. **Optional on every appearance** \u2014 omit the prop to render the field without an assistive rung; the box and label keep their footprint. On the `error` appearance the helper re-tones to `sys.color.error` so the message reads as the error caption; an error field may still be shown without a helper, in which case only the field box re-tones. Mutually exclusive with `maxLength` \u2014 if both are given, the character count is shown and `helper` is ignored."
+      description: "Assistive text rendered below the field box, left-aligned. **Optional on every appearance** \u2014 omit the prop to render the field without an assistive rung; the box and label keep their footprint. On the `error` appearance the helper re-tones to `sys.color.text.danger` so the message reads as the error caption; an error field may still be shown without a helper, in which case only the field box re-tones. Mutually exclusive with `maxLength` \u2014 if both are given, the character count is shown and `helper` is ignored."
     },
     maxLength: {
       type: "number",
@@ -4472,7 +4457,7 @@ var input_spec_default = {
     },
     label: {
       required: false,
-      description: "Visible label above the box. `sys.typo.label.md`, `sys.color.onSurface`. Associated with the input via `htmlFor`.",
+      description: "Visible label above the box. `sys.typo.label.md`, `sys.color.text.default`. Associated with the input via `htmlFor`.",
       accepts: [
         "text"
       ]
@@ -4496,14 +4481,14 @@ var input_spec_default = {
     },
     helper: {
       required: false,
-      description: "Assistive text below the box, left-aligned. `sys.typo.body.sm`, `sys.color.onSurfaceVariant`; on the `error` appearance the colour re-tones to `sys.color.error` so the message reads as the error caption. Referenced by the input's `aria-describedby`. Not rendered when a `maxLength` count is present, and intentionally omittable on every appearance (including `error`) \u2014 pass nothing and the field renders without an assistive rung.",
+      description: "Assistive text below the box, left-aligned. `sys.typo.body.sm`, `sys.color.text.subtle`; on the `error` appearance the colour re-tones to `sys.color.text.danger` so the message reads as the error caption. Referenced by the input's `aria-describedby`. Not rendered when a `maxLength` count is present, and intentionally omittable on every appearance (including `error`) \u2014 pass nothing and the field renders without an assistive rung.",
       accepts: [
         "text"
       ]
     },
     count: {
       required: false,
-      description: '`current/max` character count below the box, right-aligned, present when `maxLength` is set. `sys.typo.body.sm`, `sys.color.onSurfaceVariant`; the current-count number is `sys.typo.label.md` weight in `sys.color.onSurface`. Referenced by the input\'s `aria-describedby`; updates `aria-live="polite"`.',
+      description: '`current/max` character count below the box, right-aligned, present when `maxLength` is set. `sys.typo.body.sm`, `sys.color.text.subtle`; the current-count number is `sys.typo.label.md` weight in `sys.color.text.default`. Referenced by the input\'s `aria-describedby`; updates `aria-live="polite"`.',
       accepts: [
         "text"
       ]
@@ -4516,7 +4501,7 @@ var input_spec_default = {
     slotGap: "sys.layout.inline.md",
     radius: "sys.radius.md",
     borderWidth: "sys.borderWidth.hairline",
-    activeStrokeWeight: "sys.borderWidth.thin",
+    activeStrokeWeight: "sys.borderWidth.hairline",
     groupGap: "sys.layout.stack.xs",
     labelTypo: "sys.typo.label.md",
     helperTypo: "sys.typo.body.sm",
@@ -4526,28 +4511,28 @@ var input_spec_default = {
     iconSize: "sys.icon.md"
   },
   groupColors: {
-    label: "sys.color.onSurface",
-    helper: "sys.color.onSurfaceVariant",
-    helperError: "sys.color.error",
-    count: "sys.color.onSurfaceVariant",
-    countCurrent: "sys.color.onSurface"
+    label: "sys.color.text.default",
+    helper: "sys.color.text.subtle",
+    helperError: "sys.color.text.danger",
+    count: "sys.color.text.subtle",
+    countCurrent: "sys.color.text.default"
   },
   appearances: {
     default: {
       background: "transparent",
-      text: "sys.color.onSurface",
-      placeholder: "sys.color.outline",
-      borderRest: "sys.color.outlineVariant",
-      borderHover: "sys.color.outline",
-      borderActive: "sys.color.onSurface"
+      text: "sys.color.text.default",
+      placeholder: "sys.color.border.boldest",
+      borderRest: "sys.color.border.default",
+      borderHover: "sys.color.border.boldest",
+      borderActive: "sys.color.border.focused"
     },
     error: {
-      background: "sys.color.errorContainer",
-      text: "sys.color.onErrorContainer",
-      placeholder: "sys.color.onErrorContainer",
-      borderRest: "sys.color.error",
-      borderHover: "sys.color.error",
-      borderActive: "sys.color.error"
+      background: "sys.color.background.danger",
+      text: "sys.color.text.danger",
+      placeholder: "sys.color.text.danger",
+      borderRest: "sys.color.border.danger",
+      borderHover: "sys.color.border.danger",
+      borderActive: "sys.color.border.danger"
     }
   },
   states: {
@@ -4577,33 +4562,34 @@ var input_spec_default = {
       focusRing: {
         composition: "outward",
         layer: "::after overlay \u2014 position:absolute, inset:0, no reflow (DESIGN.md Focus ring composition)",
-        innerCounterRing: { width: "sys.borderWidth.hairline", color: "sys.color.focusInset" },
-        outerRing: { width: "sys.borderWidth.thin", color: "sys.color.focus" }
+        innerCounterRing: { width: "sys.borderWidth.hairline", color: "sys.color.border.focused" },
+        outerRing: { width: "sys.borderWidth.thin", color: "sys.color.border.focused" }
       },
-      note: "This IS the field's keyboard/input-focus state \u2014 `active` (caret visible, input engaged) and `:focus-visible` coincide for a text field, so there is no separate `focused` state; the focus ring described here (and in the parallel `focusIndicator` block) is the focus affordance. The stroke steps from its rest `hairline` (1px) to `activeStrokeWeight` (2px) and re-tones to `borderActive` \u2014 but it is an inset `box-shadow`, not a `border`, so the box model is untouched: the field's footprint, caret, and text position are pixel-stable as it goes active. Nothing reflows. The clear button is shown only in this state (and only when the value is non-empty)."
+      note: "This IS the field's keyboard/input-focus state \u2014 `active` (caret visible, input engaged) and `:focus-visible` coincide for a text field, so there is no separate `focused` state; the focus ring described here (and in the parallel `focusIndicator` block) is the focus affordance. The stroke stays at `hairline` (1px) and re-tones to `borderActive` on active (no thickening) \u2014 but it is an inset `box-shadow`, not a `border`, so the box model is untouched: the field's footprint, caret, and text position are pixel-stable as it goes active. Nothing reflows. The clear button is shown only in this state (and only when the value is non-empty)."
     },
     disabled: {
       overlay: null,
-      background: "sys.color.surfaceContainerLow",
-      containerOpacity: "sys.state.disabled",
+      background: "sys.color.background.disabled",
+      text: "sys.color.text.disabled",
+      placeholder: "sys.color.text.disabled",
+      border: "sys.color.border.bold",
       suppressClear: true,
       suppressFocusRing: true,
-      cursor: "not-allowed"
+      cursor: "not-allowed",
+      note: "Explicit disabled (no opacity): neutral disabled fill + bold border + disabled text/placeholder."
     }
   },
   focusIndicator: {
     description: "Keyboard-focus visual \u2014 an accessibility indicator, not a lifecycle state. Composes over whichever lifecycle state the field is in (most commonly `active` since focus implies the caret is in the box). The `states.focused` block above is kept for JSX runtime consumers; this block is the parallel external-reader contract.",
     composition: "outward",
-    compositionReason: "Action affordance with breathing room around it; the 3px outward extent is reserved by the surrounding layout.",
+    compositionReason: "Action affordance with breathing room around it; the 1px outward ring is reserved by the surrounding layout.",
     overlay: {
       color: "label",
       opacity: "sys.state.focus"
     },
     ring: {
-      outerWidth: "sys.borderWidth.thin",
-      outerColor: "sys.color.focus",
-      insetWidth: "sys.borderWidth.hairline",
-      insetColor: "sys.color.focusInset"
+      width: "sys.borderWidth.hairline",
+      color: "sys.color.border.focused"
     },
     trigger: ":focus-visible (keyboard / programmatic focus, never plain mouse click)"
   },
@@ -4616,7 +4602,7 @@ var input_spec_default = {
   },
   forbidden: [
     "raw <input> styled with Tailwind / inline color \u2014 the input is wrapped in the chorus-field chrome that owns the stroke",
-    "active-state stroke painted with sys.color.primary / a container tier \u2014 the active stroke is sys.color.onSurface (default appearance) or sys.color.error (error appearance), never primary or a container tier",
+    "active-state stroke painted with sys.color.background.primary / a container tier \u2014 the active stroke is sys.color.text.default (default appearance) or sys.color.text.danger (error appearance), never primary or a container tier",
     "stroke painted via `border:` \u2014 stroke is an inset box-shadow on the field",
     "helper text rendered outside the helperText slot"
   ]
@@ -4661,7 +4647,7 @@ var textarea_spec_default = {
     helper: {
       type: "node",
       optional: true,
-      description: "Assistive text rendered below the field box, left-aligned. Same rules as [input.helper](./input.md): mutually exclusive with `maxLength`, optional on every appearance, re-tones to `sys.color.error` on the error appearance."
+      description: "Assistive text rendered below the field box, left-aligned. Same rules as [input.helper](./input.md): mutually exclusive with `maxLength`, optional on every appearance, re-tones to `sys.color.text.danger` on the error appearance."
     },
     maxLength: {
       type: "number",
@@ -4686,7 +4672,7 @@ var textarea_spec_default = {
     },
     label: {
       required: false,
-      description: "Visible label above the box. `sys.typo.label.md`, `sys.color.onSurface`. Associated with the textarea via `htmlFor`.",
+      description: "Visible label above the box. `sys.typo.label.md`, `sys.color.text.default`. Associated with the textarea via `htmlFor`.",
       accepts: ["text"]
     },
     container: {
@@ -4717,7 +4703,7 @@ var textarea_spec_default = {
     slotGap: "sys.layout.inline.md",
     radius: "sys.radius.md",
     borderWidth: "sys.borderWidth.hairline",
-    activeStrokeWeight: "sys.borderWidth.thin",
+    activeStrokeWeight: "sys.borderWidth.hairline",
     groupGap: "sys.layout.stack.xs",
     labelTypo: "sys.typo.label.md",
     helperTypo: "sys.typo.body.sm",
@@ -4729,28 +4715,28 @@ var textarea_spec_default = {
     resize: "vertical"
   },
   groupColors: {
-    label: "sys.color.onSurface",
-    helper: "sys.color.onSurfaceVariant",
-    helperError: "sys.color.error",
-    count: "sys.color.onSurfaceVariant",
-    countCurrent: "sys.color.onSurface"
+    label: "sys.color.text.default",
+    helper: "sys.color.text.subtle",
+    helperError: "sys.color.text.danger",
+    count: "sys.color.text.subtle",
+    countCurrent: "sys.color.text.default"
   },
   appearances: {
     default: {
       background: "transparent",
-      text: "sys.color.onSurface",
-      placeholder: "sys.color.outline",
-      borderRest: "sys.color.outlineVariant",
-      borderHover: "sys.color.outline",
-      borderActive: "sys.color.onSurface"
+      text: "sys.color.text.default",
+      placeholder: "sys.color.border.boldest",
+      borderRest: "sys.color.border.default",
+      borderHover: "sys.color.border.boldest",
+      borderActive: "sys.color.border.focused"
     },
     error: {
-      background: "sys.color.errorContainer",
-      text: "sys.color.onErrorContainer",
-      placeholder: "sys.color.onErrorContainer",
-      borderRest: "sys.color.error",
-      borderHover: "sys.color.error",
-      borderActive: "sys.color.error"
+      background: "sys.color.background.danger",
+      text: "sys.color.text.danger",
+      placeholder: "sys.color.text.danger",
+      borderRest: "sys.color.border.danger",
+      borderHover: "sys.color.border.danger",
+      borderActive: "sys.color.border.danger"
     }
   },
   states: {
@@ -4770,32 +4756,33 @@ var textarea_spec_default = {
       focusRing: {
         composition: "outward",
         layer: "::after overlay \u2014 position:absolute, inset:0, no reflow (DESIGN.md Focus ring composition)",
-        innerCounterRing: { width: "sys.borderWidth.hairline", color: "sys.color.focusInset" },
-        outerRing: { width: "sys.borderWidth.thin", color: "sys.color.focus" }
+        innerCounterRing: { width: "sys.borderWidth.hairline", color: "sys.color.border.focused" },
+        outerRing: { width: "sys.borderWidth.thin", color: "sys.color.border.focused" }
       },
-      note: "This IS the field's keyboard/input-focus state \u2014 `active` (caret visible, input engaged) and `:focus-visible` coincide for a text field, so there is no separate `focused` state; the focus ring described here (and in the parallel `focusIndicator` block) is the focus affordance. Stroke steps from `hairline` (1px) to `activeStrokeWeight` (2px) as an inset box-shadow \u2014 same pixel-stable contract as input."
+      note: "This IS the field's keyboard/input-focus state \u2014 `active` (caret visible, input engaged) and `:focus-visible` coincide for a text field, so there is no separate `focused` state; the focus ring described here (and in the parallel `focusIndicator` block) is the focus affordance. Stroke stays at `hairline` (1px), re-toning to `borderActive` as an inset box-shadow (no thickening) \u2014 same pixel-stable contract as input."
     },
     disabled: {
       overlay: null,
-      background: "sys.color.surfaceContainerLow",
-      containerOpacity: "sys.state.disabled",
+      background: "sys.color.background.disabled",
+      text: "sys.color.text.disabled",
+      placeholder: "sys.color.text.disabled",
+      border: "sys.color.border.bold",
       suppressFocusRing: true,
-      cursor: "not-allowed"
+      cursor: "not-allowed",
+      note: "Explicit disabled (no opacity): neutral disabled fill + bold border + disabled text/placeholder."
     }
   },
   focusIndicator: {
-    description: "Same outward 3-layer ring as input.focusIndicator.",
+    description: "Same outward single ring as input.focusIndicator.",
     composition: "outward",
-    compositionReason: "Action affordance with breathing room around it; the 3px outward extent is reserved by the surrounding layout.",
+    compositionReason: "Action affordance with breathing room around it; the 1px outward ring is reserved by the surrounding layout.",
     overlay: {
       color: "label",
       opacity: "sys.state.focus"
     },
     ring: {
-      outerWidth: "sys.borderWidth.thin",
-      outerColor: "sys.color.focus",
-      insetWidth: "sys.borderWidth.hairline",
-      insetColor: "sys.color.focusInset"
+      width: "sys.borderWidth.hairline",
+      color: "sys.color.border.focused"
     },
     trigger: ":focus-visible (keyboard / programmatic focus, never plain mouse click)"
   },
@@ -4852,7 +4839,7 @@ var search_spec_default = {
     },
     leading: {
       required: true,
-      description: "The leading `SearchIcon` glyph pinned at the box's inner-left edge. Inherits the field's text colour (`sys.color.onSurface`); decorative \u2014 not a real button, has `aria-hidden`. 16px (`sys.icon.md`), matching the clear button's footprint so the two affixes balance.",
+      description: "The leading `SearchIcon` glyph pinned at the box's inner-left edge. Inherits the field's text colour (`sys.color.text.default`); decorative \u2014 not a real button, has `aria-hidden`. 16px (`sys.icon.md`), matching the clear button's footprint so the two affixes balance.",
       intrinsic: true
     },
     input: {
@@ -4875,18 +4862,18 @@ var search_spec_default = {
     slotGap: "sys.layout.inline.md",
     radius: "sys.radius.full",
     borderWidth: "sys.borderWidth.hairline",
-    activeStrokeWeight: "sys.borderWidth.thin",
+    activeStrokeWeight: "sys.borderWidth.hairline",
     textTypo: "sys.typo.body.md",
     iconSize: "sys.icon.md"
   },
   appearances: {
     default: {
       background: "transparent",
-      text: "sys.color.onSurface",
-      placeholder: "sys.color.outline",
-      borderRest: "sys.color.outlineVariant",
-      borderHover: "sys.color.outline",
-      borderActive: "sys.color.onSurface"
+      text: "sys.color.text.default",
+      placeholder: "sys.color.border.boldest",
+      borderRest: "sys.color.border.default",
+      borderHover: "sys.color.border.boldest",
+      borderActive: "sys.color.border.focused"
     }
   },
   states: {
@@ -4916,33 +4903,34 @@ var search_spec_default = {
       focusRing: {
         composition: "outward",
         layer: "::after overlay \u2014 position:absolute, inset:0, no reflow (DESIGN.md Focus ring composition)",
-        innerCounterRing: { width: "sys.borderWidth.hairline", color: "sys.color.focusInset" },
-        outerRing: { width: "sys.borderWidth.thin", color: "sys.color.focus" }
+        innerCounterRing: { width: "sys.borderWidth.hairline", color: "sys.color.border.focused" },
+        outerRing: { width: "sys.borderWidth.thin", color: "sys.color.border.focused" }
       },
-      note: "This IS the field's keyboard/input-focus state \u2014 `active` (caret visible, input engaged) and `:focus-visible` coincide for a text field, so there is no separate `focused` state; the focus ring described here (and in the parallel `focusIndicator` block) is the focus affordance. The stroke steps from its rest `hairline` (1px) to `activeStrokeWeight` (2px) and re-tones to `borderActive` \u2014 but it is an inset `box-shadow`, not a `border`, so the box model is untouched: the field's footprint, caret, and text position are pixel-stable as it goes active. Nothing reflows. The clear button is shown only in this state (and only when the value is non-empty)."
+      note: "This IS the field's keyboard/input-focus state \u2014 `active` (caret visible, input engaged) and `:focus-visible` coincide for a text field, so there is no separate `focused` state; the focus ring described here (and in the parallel `focusIndicator` block) is the focus affordance. The stroke stays at `hairline` (1px) and re-tones to `borderActive` on active (no thickening) \u2014 but it is an inset `box-shadow`, not a `border`, so the box model is untouched: the field's footprint, caret, and text position are pixel-stable as it goes active. Nothing reflows. The clear button is shown only in this state (and only when the value is non-empty)."
     },
     disabled: {
       overlay: null,
-      background: "sys.color.surfaceContainerLow",
-      containerOpacity: "sys.state.disabled",
+      background: "sys.color.background.disabled",
+      text: "sys.color.text.disabled",
+      placeholder: "sys.color.text.disabled",
+      border: "sys.color.border.bold",
       suppressClear: true,
       suppressFocusRing: true,
-      cursor: "not-allowed"
+      cursor: "not-allowed",
+      note: "Explicit disabled (no opacity): neutral disabled fill + bold border + disabled text/placeholder."
     }
   },
   focusIndicator: {
     description: "Keyboard-focus visual \u2014 an accessibility indicator, not a lifecycle state. Composes over whichever lifecycle state the field is in. The `states.focused` block above is kept for JSX runtime consumers; this block is the parallel external-reader contract.",
     composition: "outward",
-    compositionReason: "Action affordance with breathing room around it; the 3px outward extent is reserved by the surrounding layout.",
+    compositionReason: "Action affordance with breathing room around it; the 1px outward ring is reserved by the surrounding layout.",
     overlay: {
       color: "label",
       opacity: "sys.state.focus"
     },
     ring: {
-      outerWidth: "sys.borderWidth.thin",
-      outerColor: "sys.color.focus",
-      insetWidth: "sys.borderWidth.hairline",
-      insetColor: "sys.color.focusInset"
+      width: "sys.borderWidth.hairline",
+      color: "sys.color.border.focused"
     },
     trigger: ":focus-visible (keyboard / programmatic focus, never plain mouse click)"
   },
@@ -4998,7 +4986,7 @@ var select_spec_default = {
     leadingIcon: {
       type: "node",
       optional: true,
-      description: "Optional 16px (`sys.icon.md`) decorative glyph pinned at the inner-left edge of the field. Tracks the field's active text colour (`sys.color.onSurface` on the default appearance, `sys.color.onErrorContainer` on `error`) so the glyph reads as part of the typed content."
+      description: "Optional 16px (`sys.icon.md`) decorative glyph pinned at the inner-left edge of the field. Tracks the field's active text colour (`sys.color.text.default` on the default appearance, `sys.color.text.danger` on `error`) so the glyph reads as part of the typed content."
     },
     onOpen: {
       type: "function",
@@ -5055,7 +5043,7 @@ var select_spec_default = {
     slotGap: "sys.layout.inline.md",
     radius: "sys.radius.md",
     borderWidth: "sys.borderWidth.hairline",
-    activeStrokeWeight: "sys.borderWidth.thin",
+    activeStrokeWeight: "sys.borderWidth.hairline",
     groupGap: "sys.layout.stack.xs",
     labelTypo: "sys.typo.label.md",
     helperTypo: "sys.typo.body.sm",
@@ -5065,28 +5053,28 @@ var select_spec_default = {
     iconSize: "sys.icon.md"
   },
   groupColors: {
-    label: "sys.color.onSurface",
-    helper: "sys.color.onSurfaceVariant",
-    helperError: "sys.color.error",
-    count: "sys.color.onSurfaceVariant",
-    countCurrent: "sys.color.onSurface"
+    label: "sys.color.text.default",
+    helper: "sys.color.text.subtle",
+    helperError: "sys.color.text.danger",
+    count: "sys.color.text.subtle",
+    countCurrent: "sys.color.text.default"
   },
   appearances: {
     default: {
       background: "transparent",
-      text: "sys.color.onSurface",
-      placeholder: "sys.color.outline",
-      borderRest: "sys.color.outlineVariant",
-      borderHover: "sys.color.outline",
-      borderActive: "sys.color.onSurface"
+      text: "sys.color.text.default",
+      placeholder: "sys.color.border.boldest",
+      borderRest: "sys.color.border.default",
+      borderHover: "sys.color.border.boldest",
+      borderActive: "sys.color.border.focused"
     },
     error: {
-      background: "sys.color.errorContainer",
-      text: "sys.color.onErrorContainer",
-      placeholder: "sys.color.onErrorContainer",
-      borderRest: "sys.color.error",
-      borderHover: "sys.color.error",
-      borderActive: "sys.color.error"
+      background: "sys.color.background.danger",
+      text: "sys.color.text.danger",
+      placeholder: "sys.color.text.danger",
+      borderRest: "sys.color.border.danger",
+      borderHover: "sys.color.border.danger",
+      borderActive: "sys.color.border.danger"
     }
   },
   states: {
@@ -5113,21 +5101,24 @@ var select_spec_default = {
       focusRing: {
         composition: "outward",
         layer: "::after overlay \u2014 position:absolute, inset:0, no reflow (DESIGN.md Focus ring composition)",
-        innerCounterRing: { width: "sys.borderWidth.hairline", color: "sys.color.focusInset" },
-        outerRing: { width: "sys.borderWidth.thin", color: "sys.color.focus" }
+        innerCounterRing: { width: "sys.borderWidth.hairline", color: "sys.color.border.focused" },
+        outerRing: { width: "sys.borderWidth.thin", color: "sys.color.border.focused" }
       },
-      note: "This IS the trigger's keyboard-focus / open state \u2014 `:focus-visible` and the engaged (open) state coincide for the select trigger, so there is no separate `focused` state; the focus ring described here (and in the parallel `focusIndicator` block) is the focus affordance. The stroke re-tones to `borderActive` at `activeStrokeWeight` (2px) as an inset box-shadow, pixel-stable (no reflow)."
+      note: "This IS the trigger's keyboard-focus / open state \u2014 `:focus-visible` and the engaged (open) state coincide for the select trigger, so there is no separate `focused` state; the focus ring described here (and in the parallel `focusIndicator` block) is the focus affordance. The stroke re-tones to `borderActive` at `activeStrokeWeight` (1px, = rest) as an inset box-shadow, pixel-stable (no reflow)."
     },
     disabled: {
       overlay: null,
-      background: "sys.color.surfaceContainerLow",
-      containerOpacity: "sys.state.disabled",
+      background: "sys.color.background.disabled",
+      text: "sys.color.text.disabled",
+      placeholder: "sys.color.text.disabled",
+      border: "sys.color.border.bold",
       suppressFocusRing: true,
-      cursor: "not-allowed"
+      cursor: "not-allowed",
+      note: "Explicit disabled (no opacity): neutral disabled fill + bold border + disabled text/placeholder."
     }
   },
   focusIndicator: {
-    description: "Same keyboard-focus indicator as Input \u2014 outward two-layer ring composed over the active stroke.",
+    description: "Same keyboard-focus indicator as Input \u2014 outward single ring composed over the active stroke.",
     composition: "outward",
     compositionReason: "Action affordance with breathing room around it.",
     overlay: {
@@ -5135,10 +5126,8 @@ var select_spec_default = {
       opacity: "sys.state.focus"
     },
     ring: {
-      outerWidth: "sys.borderWidth.thin",
-      outerColor: "sys.color.focus",
-      insetWidth: "sys.borderWidth.hairline",
-      insetColor: "sys.color.focusInset"
+      width: "sys.borderWidth.hairline",
+      color: "sys.color.border.focused"
     },
     trigger: ":focus-visible"
   },
@@ -5213,17 +5202,17 @@ function FormFieldBox({
     "--field-group-gap": tokenToCss(spec.sizing.groupGap),
     "--field-bg": tokenToCss(app.background),
     "--field-bg-disabled": tokenToCss(spec.states.disabled.background),
-    "--field-text": tokenToCss(app.text),
-    "--field-placeholder": tokenToCss(app.placeholder),
-    "--field-border": tokenToCss(app.borderRest),
+    // Disabled swaps text / placeholder / border to the explicit disabled
+    // tokens (no opacity) — the field box paints them via these vars.
+    "--field-text": tokenToCss(isDisabled ? spec.states.disabled.text : app.text),
+    "--field-placeholder": tokenToCss(
+      isDisabled ? spec.states.disabled.placeholder : app.placeholder
+    ),
+    "--field-border": tokenToCss(isDisabled ? spec.states.disabled.border : app.borderRest),
     "--field-border-hover": tokenToCss(app.borderHover),
     "--field-border-active": tokenToCss(app.borderActive),
     "--field-overlay-pressed": tokenToCss(spec.states.pressed.overlay.opacity),
-    "--field-disabled-opacity": tokenToCss(spec.states.disabled.containerOpacity),
-    "--field-focus-outer-width": tokenToCss(spec.focusIndicator.ring.outerWidth),
-    "--field-focus-outer-color": tokenToCss(spec.focusIndicator.ring.outerColor),
-    "--field-focus-inset-width": tokenToCss(spec.focusIndicator.ring.insetWidth),
-    "--field-focus-inset-color": tokenToCss(spec.focusIndicator.ring.insetColor),
+    "--field-focus-outer-color": tokenToCss(spec.focusIndicator.ring.color),
     ...typoStyles(spec.sizing.textTypo)
   };
   const handleChange = (event) => {
@@ -5815,7 +5804,7 @@ var sub_spec_default = {
   appearance: {
     containerFill: "transparent",
     labelTypo: "sys.typo.label.md",
-    labelColor: "sys.color.onSurfaceVariant",
+    labelColor: "sys.color.text.subtle",
     paddingInline: "sys.layout.container.md",
     paddingBlockStart: "sys.layout.stack.lg",
     paddingBlockEnd: "sys.layout.stack.xs",