ui-foundations 0.3.1 → 0.4.1

package/dist/tokens/ts/{appearance-(modes).tokens.mode-dark.ts → appearance-modes.tokens.mode-dark.ts}

@@ -1,5 +1,5 @@
 // Auto-generated design tokens from Figma
-// Generated on 2026-03-31T20:27:09.721Z
+// Generated on 2026-04-28T09:23:28.555Z
 
 export const tokens = {
   "colors": {

package/dist/tokens/ts/{appearance-(modes).tokens.mode-light.ts → appearance-modes.tokens.mode-light.ts}

@@ -1,5 +1,5 @@
 // Auto-generated design tokens from Figma
-// Generated on 2026-03-31T20:27:09.719Z
+// Generated on 2026-04-28T09:23:28.553Z
 
 export const tokens = {
   "colors": {

package/dist/tokens/ts/{components-(ui).tokens.ts → components-ui.tokens.ts}

@@ -1,5 +1,5 @@
 // Auto-generated design tokens from Figma
-// Generated on 2026-03-31T20:27:09.724Z
+// Generated on 2026-04-28T09:23:28.559Z
 
 export const tokens = {
   "components": {
@@ -93,18 +93,41 @@ export const tokens = {
     "--input-overlay-active": "var(--color-transparent)",
     "--input-height": "2.5rem",
     "--input-checkbox-text-color-default": "var(--color-text-default)",
-    "--input-checkbox-text-color-hover": "var(--color-text-default)",
+    "--input-checkbox-text-color-hover": "var(--color-text-strong)",
     "--input-checkbox-text-color-active": "var(--color-text-inverse)",
     "--input-checkbox-border-color-default": "var(--color-border-subtle)",
-    "--input-checkbox-border-color-hover": "var(--color-border-brand)",
+    "--input-checkbox-border-color-hover": "var(--color-border-strong)",
     "--input-checkbox-border-color-active": "var(--color-border-brand)",
     "--input-checkbox-border-color-focus": "var(--color-border-brand)",
     "--input-checkbox-border-color-invalid": "var(--color-border-danger)",
     "--input-checkbox-border-color-valid": "var(--color-border-strong)",
+    "--input-checkbox-border-color-disabled": "var(--color-border-disabled)",
     "--input-checkbox-container-background-default": "var(--color-fill-surface)",
     "--input-checkbox-container-background-hover": "var(--color-fill-surface)",
     "--input-checkbox-container-background-focus": "var(--color-fill-surface)",
     "--input-checkbox-container-background-active": "var(--color-fill-brand)",
+    "--input-checkbox-container-background-disabled": "var(--color-fill-disabled)",
+    "--input-checkbox-text-color-disabled": "var(--color-text-disabled)",
+    "--checkbox-border-size-hover": "var(--size-border-200)",
+    "--checkbox-border-size-disabled": "var(--size-border-000)",
+    "--checkbox-border-size-default": "var(--size-border-100)",
+    "--input-radio-text-color-default": "var(--color-text-default)",
+    "--input-radio-text-color-hover": "var(--color-text-strong)",
+    "--input-radio-text-color-active": "var(--color-text-inverse)",
+    "--input-radio-text-color-disabled": "var(--color-text-disabled)",
+    "--input-radio-border-color-default": "var(--color-border-subtle)",
+    "--input-radio-border-color-hover": "var(--color-border-strong)",
+    "--input-radio-border-color-active": "var(--color-border-brand)",
+    "--input-radio-border-color-focus": "var(--color-border-brand)",
+    "--input-radio-border-color-disabled": "var(--color-border-disabled)",
+    "--input-radio-container-background-default": "var(--color-fill-surface)",
+    "--input-radio-container-background-hover": "var(--color-fill-surface)",
+    "--input-radio-container-background-focus": "var(--color-fill-surface)",
+    "--input-radio-container-background-active": "var(--color-fill-brand)",
+    "--input-radio-container-background-disabled": "var(--color-fill-disabled)",
+    "--radio-border-size-default": "var(--size-border-100)",
+    "--radio-border-size-hover": "var(--size-border-200)",
+    "--radio-border-size-disabled": "var(--size-border-000)",
     "--form-group-gap": "var(--size-spacing-400)",
     "--form-group-title-color": "var(--color-text-default)",
     "--form-padding-inline": "var(--size-spacing-400)",
@@ -116,7 +139,27 @@ export const tokens = {
     "--form-field-helper-text-color-invalid": "var(--color-text-danger)",
     "--form-container-background": "var(--color-fill-surface)",
     "--form-container-border-color": "var(--color-border-subtle)",
-    "--form-border-size": "var(--size-border-100)"
+    "--form-border-size": "var(--size-border-100)",
+    "--badge-default-container-background": "var(--color-fill-subtle)",
+    "--badge-default-text-color": "var(--color-text-default)",
+    "--badge-brand-container-background": "var(--color-fill-brand)",
+    "--badge-brand-text-color": "var(--color-text-inverse)",
+    "--badge-success-container-background": "var(--color-fill-success)",
+    "--badge-success-text-color": "var(--color-text-inverse)",
+    "--badge-danger-container-background": "var(--color-fill-danger)",
+    "--badge-danger-text-color": "var(--color-text-inverse)",
+    "--badge-border-radius": "var(--size-radius-full)",
+    "--badge-font-family": "var(--typography-label-font-family)",
+    "--badge-font-weight": "var(--font-weight-700)",
+    "--badge-font-size-sm": "var(--font-size-xs)",
+    "--badge-font-size-md": "var(--font-size-sm)",
+    "--badge-line-height-sm": "var(--line-height-xs)",
+    "--badge-line-height-md": "var(--line-height-sm)",
+    "--badge-padding-inline-sm": "var(--size-spacing-200)",
+    "--badge-padding-inline-md": "var(--size-spacing-300)",
+    "--badge-padding-block-sm": "var(--size-spacing-000)",
+    "--badge-padding-block-md": "var(--size-spacing-100)",
+    "--badge-gap": "var(--size-spacing-100)"
   }
 } as const;
 

package/dist/tokens/ts/{core-(primitives).tokens.ts → core-primitives.tokens.ts}

@@ -1,5 +1,5 @@
 // Auto-generated design tokens from Figma
-// Generated on 2026-03-31T20:27:09.731Z
+// Generated on 2026-04-28T09:23:28.563Z
 
 export const tokens = {
   "colors": {
@@ -24,25 +24,67 @@ export const tokens = {
     "--color-neutral-alpha-900": "rgba(0 0 0 / 0.9)",
     "--color-neutral-alpha-000": "rgba(0 0 0 / 0)",
     "--color-neutral-000": "rgb(255 255 255)",
-    "--color-brand-a-purple-200": "rgb(222 192 255)",
-    "--color-brand-a-purple-600": "rgb(151 71 255)",
-    "--color-brand-a-purple-800": "rgb(85 26 139)",
-    "--color-brand-a-blue-200": "rgb(226 244 253)",
-    "--color-brand-a-blue-500": "rgb(112 203 244)",
-    "--color-brand-a-blue-700": "rgb(12 75 243)",
-    "--color-brand-a-blue-800": "rgb(27 17 92)",
-    "--color-brand-a-green": "rgb(19 174 92)",
-    "--color-brand-a-red": "rgb(255 0 0)",
-    "--color-brand-b-purple-200": "rgb(196 143 255)",
-    "--color-brand-b-purple-600": "rgb(122 20 255)",
-    "--color-brand-b-purple-800": "rgb(58 18 95)",
-    "--color-brand-b-blue-200": "rgb(179 226 250)",
-    "--color-brand-b-blue-500": "rgb(66 186 240)",
-    "--color-brand-b-blue-700": "rgb(10 60 194)",
-    "--color-brand-b-blue-800": "rgb(14 9 47)",
-    "--color-brand-b-red": "rgb(204 0 0)",
-    "--color-brand-b-green": "rgb(14 129 68)",
-    "--color-transparent": "rgba(0 0 0 / 0)"
+    "--color-brand-b-purple-200": "rgb(222 192 255)",
+    "--color-brand-b-purple-300": "rgb(196 143 255)",
+    "--color-brand-b-purple-600": "rgb(151 71 255)",
+    "--color-brand-b-purple-700": "rgb(122 20 255)",
+    "--color-brand-b-purple-800": "rgb(85 26 139)",
+    "--color-brand-b-purple-900": "rgb(58 18 95)",
+    "--color-brand-b-blue-100": "rgb(206 219 253)",
+    "--color-brand-b-blue-200": "rgb(158 183 250)",
+    "--color-brand-b-blue-300": "rgb(109 147 248)",
+    "--color-brand-b-blue-400": "rgb(61 111 245)",
+    "--color-brand-b-blue-500": "rgb(12 75 243)",
+    "--color-brand-b-blue-600": "rgb(10 60 194)",
+    "--color-brand-b-blue-700": "rgb(7 45 146)",
+    "--color-brand-b-blue-800": "rgb(5 30 97)",
+    "--color-brand-b-blue-900": "rgb(2 15 49)",
+    "--color-brand-b-red-100": "rgb(255 255 255)",
+    "--color-brand-b-red-200": "rgb(255 204 204)",
+    "--color-brand-b-red-300": "rgb(255 153 153)",
+    "--color-brand-b-red-400": "rgb(255 102 102)",
+    "--color-brand-b-red-500": "rgb(255 51 51)",
+    "--color-brand-b-red-600": "rgb(255 0 0)",
+    "--color-brand-b-red-700": "rgb(153 0 0)",
+    "--color-brand-b-red-800": "rgb(102 0 0)",
+    "--color-brand-b-red-900": "rgb(51 0 0)",
+    "--color-brand-b-green-100": "rgb(246 254 250)",
+    "--color-brand-b-green-200": "rgb(200 249 223)",
+    "--color-brand-b-green-300": "rgb(154 244 196)",
+    "--color-brand-b-green-400": "rgb(108 239 170)",
+    "--color-brand-b-green-500": "rgb(62 234 143)",
+    "--color-brand-b-green-600": "rgb(19 174 92)",
+    "--color-brand-b-green-700": "rgb(14 129 68)",
+    "--color-brand-b-green-800": "rgb(8 69 36)",
+    "--color-brand-b-green-900": "rgb(4 37 19)",
+    "--color-transparent": "rgba(0 0 0 / 0)",
+    "--color-brand-a-green-100": "rgb(243 246 233)",
+    "--color-brand-a-green-200": "rgb(223 231 197)",
+    "--color-brand-a-green-300": "rgb(207 219 169)",
+    "--color-brand-a-green-400": "rgb(191 207 140)",
+    "--color-brand-a-green-500": "rgb(175 195 111)",
+    "--color-brand-a-green-600": "rgb(159 183 82)",
+    "--color-brand-a-green-700": "rgb(137 158 66)",
+    "--color-brand-a-green-800": "rgb(112 129 54)",
+    "--color-brand-a-green-900": "rgb(81 93 39)",
+    "--color-brand-a-red-100": "rgb(254 251 251)",
+    "--color-brand-a-red-200": "rgb(250 224 230)",
+    "--color-brand-a-red-300": "rgb(244 179 195)",
+    "--color-brand-a-red-400": "rgb(238 135 160)",
+    "--color-brand-a-red-500": "rgb(231 90 124)",
+    "--color-brand-a-red-600": "rgb(225 46 89)",
+    "--color-brand-a-red-700": "rgb(191 28 67)",
+    "--color-brand-a-red-800": "rgb(147 21 52)",
+    "--color-brand-a-red-900": "rgb(102 15 36)",
+    "--color-brand-a-sand-100": "rgb(240 240 229)",
+    "--color-brand-a-sand-200": "rgb(221 222 197)",
+    "--color-brand-a-sand-300": "rgb(192 193 172)",
+    "--color-brand-a-sand-400": "rgb(164 165 147)",
+    "--color-brand-a-sand-500": "rgb(136 137 122)",
+    "--color-brand-a-sand-600": "rgb(108 109 97)",
+    "--color-brand-a-sand-700": "rgb(80 81 72)",
+    "--color-brand-a-sand-800": "rgb(52 52 47)",
+    "--color-brand-a-sand-900": "rgb(24 24 22)"
   },
   "typography": {
     "--font-size-md": "1rem",

package/dist/tokens/ts/{semantics-(roles).tokens.ts → semantics-roles.tokens.ts}

@@ -1,5 +1,5 @@
 // Auto-generated design tokens from Figma
-// Generated on 2026-03-31T20:27:09.733Z
+// Generated on 2026-04-28T09:23:28.564Z
 
 export const tokens = {
   "typography": {

package/dist/tokens/ts/{themes-(brands).tokens.brand-a.ts → themes-brands.tokens.brand-a.ts}

@@ -1,16 +1,16 @@
 // Auto-generated design tokens from Figma
-// Generated on 2026-03-31T20:27:09.734Z
+// Generated on 2026-04-28T09:23:28.565Z
 
 export const tokens = {
   "colors": {
-    "--brand-color-functional-success": "var(--color-brand-a-green)",
-    "--brand-color-functional-danger": "var(--color-brand-a-red)",
-    "--brand-color-functional-base": "var(--color-brand-a-blue-700)",
-    "--brand-color-functional-base-dark": "var(--color-brand-a-blue-800)",
-    "--brand-color-primary": "var(--color-brand-a-purple-600)",
-    "--brand-color-accent": "var(--color-brand-a-blue-500)",
-    "--brand-color-primary-dark": "var(--color-brand-a-purple-800)",
-    "--brand-color-accent-dark": "var(--color-brand-a-blue-700)",
+    "--brand-color-functional-success": "var(--color-brand-a-green-600)",
+    "--brand-color-functional-danger": "var(--color-brand-a-red-600)",
+    "--brand-color-functional-base": "var(--color-brand-a-green-700)",
+    "--brand-color-functional-base-dark": "var(--color-brand-a-green-900)",
+    "--brand-color-primary": "var(--color-brand-a-sand-700)",
+    "--brand-color-accent": "var(--color-brand-a-green-400)",
+    "--brand-color-primary-dark": "var(--color-brand-a-sand-900)",
+    "--brand-color-accent-dark": "var(--color-brand-a-green-600)",
     "--brand-color-subtle": "var(--color-neutral-500)",
     "--brand-color-subtle-dark": "var(--color-neutral-800)",
     "--brand-color-subtle-light": "var(--color-neutral-200)"

package/dist/tokens/ts/{themes-(brands).tokens.brand-b.ts → themes-brands.tokens.brand-b.ts}

@@ -1,16 +1,16 @@
 // Auto-generated design tokens from Figma
-// Generated on 2026-03-31T20:27:09.734Z
+// Generated on 2026-04-28T09:23:28.567Z
 
 export const tokens = {
   "colors": {
-    "--brand-color-functional-success": "var(--color-brand-b-green)",
-    "--brand-color-functional-danger": "var(--color-brand-b-red)",
-    "--brand-color-functional-base": "var(--color-brand-b-purple-600)",
-    "--brand-color-functional-base-dark": "var(--color-brand-b-purple-800)",
-    "--brand-color-primary": "var(--color-brand-b-blue-500)",
-    "--brand-color-accent": "var(--color-brand-b-purple-600)",
-    "--brand-color-primary-dark": "var(--color-brand-b-blue-700)",
-    "--brand-color-accent-dark": "var(--color-brand-b-purple-800)",
+    "--brand-color-functional-success": "var(--color-brand-b-green-600)",
+    "--brand-color-functional-danger": "var(--color-brand-b-red-600)",
+    "--brand-color-functional-base": "var(--color-brand-b-purple-700)",
+    "--brand-color-functional-base-dark": "var(--color-brand-b-purple-900)",
+    "--brand-color-primary": "var(--color-brand-b-purple-600)",
+    "--brand-color-accent": "var(--color-brand-b-green-400)",
+    "--brand-color-primary-dark": "var(--color-brand-b-purple-800)",
+    "--brand-color-accent-dark": "var(--color-brand-b-green-800)",
     "--brand-color-subtle": "var(--color-neutral-500)",
     "--brand-color-subtle-dark": "var(--color-neutral-800)",
     "--brand-color-subtle-light": "var(--color-neutral-200)"

package/dist/ui/index.css

@@ -3,4 +3,6 @@
 @import url("./patterns/input.css") layer(components);
 @import url("./patterns/icon.css") layer(components);
 @import url("./patterns/checkbox.css") layer(components);
+@import url("./patterns/radio.css") layer(components);
 @import url("./patterns/switch.css") layer(components);
+@import url("./patterns/badge.css") layer(components);

package/dist/ui/patterns/badge.css

@@ -0,0 +1,49 @@
+@layer components {
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--badge-gap, 0.25rem);
+    border-radius: var(--badge-border-radius, 625rem);
+    font-family: var(--badge-font-family, inherit);
+    font-weight: var(--badge-font-weight, 700);
+    white-space: nowrap;
+    background: var(--badge-default-container-background);
+    color: var(--badge-default-text-color);
+    font-size: var(--badge-font-size-md);
+    line-height: var(--badge-line-height-md);
+    padding-inline: var(--badge-padding-inline-md);
+    padding-block: var(--badge-padding-block-md);
+  }
+
+  /* ── Sizes ── */
+
+  .badge.sm {
+    font-size: var(--badge-font-size-sm);
+    line-height: var(--badge-line-height-sm);
+    padding-inline: var(--badge-padding-inline-sm);
+    padding-block: var(--badge-padding-block-sm);
+  }
+
+  /* ── Variants ── */
+
+  .badge.brand {
+    background: var(--badge-brand-container-background);
+    color: var(--badge-brand-text-color);
+  }
+
+  .badge.success {
+    background: var(--badge-success-container-background);
+    color: var(--badge-success-text-color);
+  }
+
+  .badge.danger {
+    background: var(--badge-danger-container-background);
+    color: var(--badge-danger-text-color);
+  }
+
+  /* ── Icon slot ── */
+
+  .badge > .icon {
+    flex: 0 0 auto;
+  }
+}

package/dist/ui/patterns/checkbox.css

@@ -7,12 +7,12 @@
     font-weight: var(--typography-label-font-weight);
     font-size: var(--typography-label-font-size);
     line-height: var(--typography-label-line-height);
-    color: var(--color-text-default);
+    color: var(--input-checkbox-text-color-default);
     cursor: pointer;
   }
 
   .checkbox-field.is-disabled {
-    color: var(--color-text-disabled);
+    color: var(--input-checkbox-text-color-disabled);
     cursor: not-allowed;
   }
 
@@ -24,52 +24,91 @@
     display: inline-grid;
     place-content: center;
     border-style: solid;
-    border-width: var(--size-border-100);
-    border-color: var(--color-border-default);
-    border-radius: var(--brand-corner-input);
-    background: var(--color-fill-surface);
-    color: var(--color-text-inverse);
+    border-width: var(--checkbox-border-size-default);
+    border-color: var(--input-checkbox-border-color-default);
+    border-radius: var(--corner-checkbox-radius);
+    background: var(--input-checkbox-container-background-default);
+    color: var(--input-checkbox-text-color-active);
     cursor: pointer;
   }
 
   .checkbox::after {
     content: "";
+    display: block;
   }
 
   .checkbox:checked,
   .checkbox.is-checked {
-    border-color: var(--color-border-brand);
-    background: var(--color-fill-brand);
+    border-color: var(--input-checkbox-border-color-active);
+    background: var(--input-checkbox-container-background-active);
   }
 
   .checkbox:checked::after,
   .checkbox.is-checked::after {
-    content: "\2713";
-    font-size: var(--typography-label-font-size);
-    line-height: var(--typography-label-line-height);
+    content: "";
+    inline-size: 0.75em;
+    block-size: 0.75em;
+    background-color: currentColor;
+    -webkit-mask-image: url("/assets/icons/checkmark.svg");
+    mask-image: url("/assets/icons/checkmark.svg");
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+  }
+
+  .checkbox:indeterminate,
+  .checkbox.is-indeterminate {
+    border-color: var(--input-checkbox-border-color-active);
+    background: var(--input-checkbox-container-background-active);
+  }
+
+  .checkbox:indeterminate::after,
+  .checkbox.is-indeterminate::after {
+    inline-size: 0.75rem;
+    block-size: var(--size-border-200);
+    border-radius: 999px;
+    background: currentColor;
   }
 
   .checkbox:hover,
   .checkbox.is-hover {
     background:
       linear-gradient(0deg, var(--color-overlay-hover), var(--color-overlay-hover)),
-      var(--color-fill-surface);
-    border-color: var(--color-border-brand);
+      var(--input-checkbox-container-background-hover);
+    color: var(--input-checkbox-text-color-hover);
+    border-color: var(--input-checkbox-border-color-hover);
+    border-width: var(--checkbox-border-size-hover);
   }
 
   .checkbox:checked:hover,
   .checkbox.is-checked.is-hover {
     background:
       linear-gradient(0deg, var(--color-overlay-hover), var(--color-overlay-hover)),
-      var(--color-fill-brand);
+      var(--input-checkbox-container-background-active);
+    color: var(--input-checkbox-text-color-hover);
+    border-color: var(--input-checkbox-border-color-hover);
+    border-width: var(--checkbox-border-size-hover);
+  }
+
+  .checkbox:indeterminate:hover,
+  .checkbox.is-indeterminate.is-hover {
+    background:
+      linear-gradient(0deg, var(--color-overlay-hover), var(--color-overlay-hover)),
+      var(--input-checkbox-container-background-active);
+    color: var(--input-checkbox-text-color-hover);
+    border-color: var(--input-checkbox-border-color-hover);
+    border-width: var(--checkbox-border-size-hover);
   }
 
   .checkbox:active,
   .checkbox.is-active {
     background:
       linear-gradient(0deg, var(--color-overlay-active), var(--color-overlay-active)),
-      var(--color-fill-surface);
-    border-color: var(--color-border-brand);
+      var(--input-checkbox-container-background-default);
+    border-color: var(--input-checkbox-border-color-active);
     border-width: var(--size-border-200);
   }
 
@@ -77,21 +116,31 @@
   .checkbox.is-checked.is-active {
     background:
       linear-gradient(0deg, var(--color-overlay-active), var(--color-overlay-active)),
-      var(--color-fill-brand);
+      var(--input-checkbox-container-background-active);
+    border-color: var(--input-checkbox-border-color-active);
+  }
+
+  .checkbox:indeterminate:active,
+  .checkbox.is-indeterminate.is-active {
+    background:
+      linear-gradient(0deg, var(--color-overlay-active), var(--color-overlay-active)),
+      var(--input-checkbox-container-background-active);
+    border-color: var(--input-checkbox-border-color-active);
   }
 
   .checkbox:focus-visible,
   .checkbox.is-focus-visible {
-    border-color: var(--color-border-brand);
+    border-color: var(--input-checkbox-border-color-focus);
     outline: none;
     box-shadow: 0 0 0 var(--shadow-focus, 0) var(--color-focus, transparent);
   }
 
   .checkbox:disabled,
   .checkbox.is-disabled {
-    border-color: var(--color-border-disabled);
-    background: var(--color-fill-disabled);
-    color: var(--color-text-disabled);
+    border-width: var(--checkbox-border-size-disabled);
+    border-color: var(--input-checkbox-border-color-disabled);
+    background: var(--input-checkbox-container-background-disabled);
+    color: var(--input-checkbox-text-color-disabled);
     cursor: not-allowed;
   }
 }

package/dist/ui/patterns/radio.css

@@ -0,0 +1,109 @@
+@layer components {
+  .radio-field {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--typography-label-gap);
+    font-family: var(--typography-label-font-family);
+    font-weight: var(--typography-label-font-weight);
+    font-size: var(--typography-label-font-size);
+    line-height: var(--typography-label-line-height);
+    color: var(--input-radio-text-color-default);
+    cursor: pointer;
+  }
+
+  .radio-field.is-disabled {
+    color: var(--input-radio-text-color-disabled);
+    cursor: not-allowed;
+  }
+
+  .radio {
+    inline-size: var(--size-spacing-600);
+    block-size: var(--size-spacing-600);
+    margin: 0;
+    appearance: none;
+    display: inline-grid;
+    place-content: center;
+    border-style: solid;
+    border-width: var(--radio-border-size-default);
+    border-color: var(--input-radio-border-color-default);
+    border-radius: var(--size-radius-full);
+    background: var(--input-radio-container-background-default);
+    cursor: pointer;
+  }
+
+  .radio::after {
+    content: "";
+    display: block;
+    inline-size: 0;
+    block-size: 0;
+    border-radius: var(--size-radius-full);
+    background: currentColor;
+    transition: all 120ms ease;
+  }
+
+  .radio:checked,
+  .radio.is-checked {
+    border-color: var(--input-radio-border-color-active);
+    background: var(--input-radio-container-background-default);
+    color: var(--input-radio-text-color-active);
+  }
+
+  .radio:checked::after,
+  .radio.is-checked::after {
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    background: var(--input-radio-border-color-active);
+  }
+
+  .radio:hover,
+  .radio.is-hover {
+    background:
+      linear-gradient(0deg, var(--color-overlay-hover), var(--color-overlay-hover)),
+      var(--input-radio-container-background-hover);
+    color: var(--input-radio-text-color-hover);
+    border-color: var(--input-radio-border-color-hover);
+    border-width: var(--radio-border-size-hover);
+  }
+
+  .radio:checked:hover,
+  .radio.is-checked.is-hover {
+    background:
+      linear-gradient(0deg, var(--color-overlay-hover), var(--color-overlay-hover)),
+      var(--input-radio-container-background-default);
+    border-color: var(--input-radio-border-color-hover);
+    border-width: var(--radio-border-size-hover);
+  }
+
+  .radio:active,
+  .radio.is-active {
+    background:
+      linear-gradient(0deg, var(--color-overlay-active), var(--color-overlay-active)),
+      var(--input-radio-container-background-default);
+    border-color: var(--input-radio-border-color-active);
+    border-width: var(--size-border-200);
+  }
+
+  .radio:checked:active,
+  .radio.is-checked.is-active {
+    background:
+      linear-gradient(0deg, var(--color-overlay-active), var(--color-overlay-active)),
+      var(--input-radio-container-background-default);
+    border-color: var(--input-radio-border-color-active);
+  }
+
+  .radio:focus-visible,
+  .radio.is-focus-visible {
+    border-color: var(--input-radio-border-color-focus);
+    outline: none;
+    box-shadow: 0 0 0 var(--shadow-focus, 0) var(--color-focus, transparent);
+  }
+
+  .radio:disabled,
+  .radio.is-disabled {
+    border-width: var(--radio-border-size-disabled);
+    border-color: var(--input-radio-border-color-disabled);
+    background: var(--input-radio-container-background-disabled);
+    color: var(--input-radio-text-color-disabled);
+    cursor: not-allowed;
+  }
+}

package/docs/README.md

@@ -0,0 +1,38 @@
+# Documentation Map
+
+## Purpose
+
+This directory is the human- and agent-readable map of UI Foundations.
+Use it to find the right level of documentation before diving into implementation
+details or local agent configuration.
+
+## Canonical sections
+
+| Section | What belongs here | Start with |
+|---|---|---|
+| `playbook.md` | Reading order, operating model, and agent roles | `docs/playbook.md` |
+| `foundations/` | Token architecture, naming, theming, parity, and format guidance | `docs/foundations/README.md` |
+| `principles/` | Perception, heuristics, and accessibility intent | `docs/principles/README.md` |
+| `patterns/` | Pattern-level composition guidance | `docs/patterns/README.md` |
+| `components/` | Component-facing entry docs and TODO gaps | `docs/components/README.md` |
+| `agentic/` | Agent behavior, workflows, prompts, and migration context | `docs/agentic/README.md` |
+| `adr/` | Architecture decision records and documentation migration notes | `docs/adr/README.md` |
+| `validation/` | Validation checklists, CI, token parity, and accessibility checks | `docs/validation/README.md` |
+
+## Legacy docs kept in place
+
+- `docs/ui-foundations-rules.md`
+- `docs/token-pipeline.md`
+- `docs/working-context.md`
+- `docs/context-manifest.json`
+- `docs/foundations/foundation-*.md`
+
+These remain valid source material. New docs should point to them rather than
+rewriting them unless a targeted migration is clearly safe.
+
+## Related docs
+
+- `AGENTS.md`
+- `README.md`
+- `IMPLEMENTATION.md`
+- `DESIGN.md`

package/docs/agentic/README.md

@@ -0,0 +1,34 @@
+# Agentic Docs
+
+## Purpose
+
+This section explains how different agents should read, plan, validate, and act
+in the repository.
+
+## Canonical files
+
+| File | Topic |
+|---|---|
+| `assistant-behavior-rules.md` | Detailed component and token checklist |
+| `kiro-workflow.md` | Kiro steering, specs, and workflow guidance |
+| `goose-workflow.md` | Goose audit and validation workflow guidance |
+| `codex-workflow.md` | Codex execution workflow guidance |
+| `rule-pipeline.md` | Principles -> Patterns -> Components -> Validation -> CI |
+
+## Supporting files
+
+| File | Topic |
+|---|---|
+| `rule-pipeline-audit.md` | Audit findings, target architecture, and gap table |
+| `MIGRATION.md` | Historical migration context |
+| `prompts/` | Prompt templates and placeholders |
+| `modes/` | Task-specific agent modes |
+
+## Who should read this
+
+- Agents planning or executing repo work
+- Engineers maintaining local agent workflows
+
+## Skills
+
+- `skills/ux-writing-coach.md` — multilingual UX writing review skill for product copy