ui-foundations 0.6.0 → 0.7.0

package/dist/tokens/ts/appearance-modes.tokens.mode-dark.ts

@@ -1,5 +1,5 @@
 // Auto-generated design tokens from Figma
-// Generated on 2026-05-22T09:23:10.604Z
+// Generated on 2026-06-06T14:29:01.170Z
 
 export const tokens = {
   "colors": {
@@ -11,6 +11,12 @@ export const tokens = {
     "--color-text-strong": "var(--color-neutral-1000)",
     "--color-text-danger": "var(--brand-color-functional-danger)",
     "--color-text-success": "var(--brand-color-functional-success)",
+    "--color-text-on-brand": "var(--color-neutral-000)",
+    "--color-text-on-danger": "var(--color-neutral-000)",
+    "--color-text-on-success": "var(--color-neutral-000)",
+    "--color-text-on-subtle": "var(--brand-color-primary-dark)",
+    "--color-text-on-active": "var(--color-neutral-000)",
+    "--color-text-on-disabled": "var(--color-neutral-800)",
     "--color-fill-surface": "var(--color-neutral-1000)",
     "--color-fill-disabled": "var(--color-neutral-300)",
     "--color-fill-hover": "var(--color-neutral-alpha-inverse-100)",

package/dist/tokens/ts/appearance-modes.tokens.mode-light.ts

@@ -1,5 +1,5 @@
 // Auto-generated design tokens from Figma
-// Generated on 2026-05-22T09:23:10.601Z
+// Generated on 2026-06-06T14:29:01.166Z
 
 export const tokens = {
   "colors": {
@@ -11,6 +11,12 @@ export const tokens = {
     "--color-text-strong": "var(--color-neutral-1000)",
     "--color-text-danger": "var(--brand-color-functional-danger)",
     "--color-text-success": "var(--brand-color-functional-success)",
+    "--color-text-on-brand": "var(--color-neutral-000)",
+    "--color-text-on-danger": "var(--color-neutral-000)",
+    "--color-text-on-success": "var(--color-neutral-000)",
+    "--color-text-on-subtle": "var(--brand-color-primary)",
+    "--color-text-on-active": "var(--color-neutral-000)",
+    "--color-text-on-disabled": "var(--color-neutral-800)",
     "--color-fill-surface": "var(--color-neutral-000)",
     "--color-fill-disabled": "var(--color-neutral-300)",
     "--color-fill-hover": "var(--color-neutral-alpha-500)",

package/dist/tokens/ts/components-ui.tokens.ts

@@ -1,5 +1,5 @@
 // Auto-generated design tokens from Figma
-// Generated on 2026-05-22T09:23:10.611Z
+// Generated on 2026-06-06T14:29:01.180Z
 
 export const tokens = {
   "components": {
@@ -8,13 +8,13 @@ export const tokens = {
     "--button-solid-border-color-hover": "var(--color-border-brand)",
     "--button-solid-border-color-active": "var(--color-border-brand)",
     "--button-solid-border-color-focus": "var(--color-border-brand)",
-    "--button-solid-text-color-default": "var(--color-text-inverse)",
+    "--button-solid-text-color-default": "var(--color-text-on-brand)",
     "--button-solid-container-background-default": "var(--color-fill-brand)",
     "--button-solid-container-background-hover": "var(--color-fill-brand)",
     "--button-solid-container-background-active": "var(--color-fill-brand)",
     "--button-solid-container-background-focus": "var(--color-fill-brand)",
-    "--button-solid-text-color-hover": "var(--color-text-inverse)",
-    "--button-solid-text-color-active": "var(--color-text-inverse)",
+    "--button-solid-text-color-hover": "var(--color-text-on-brand)",
+    "--button-solid-text-color-active": "var(--color-text-on-brand)",
     "--button-outline-border-color-default": "var(--color-border-brand)",
     "--button-outline-border-color-hover": "var(--color-border-brand)",
     "--button-outline-border-color-active": "var(--color-border-brand)",
@@ -59,22 +59,22 @@ export const tokens = {
     "--modal-backdrop-color": "var(--color-overlay-backdrop)",
     "--modal-surface-color": "var(--color-fill-surface)",
     "--modal-surface-border-radius": "var(--brand-corner-modal)",
-    "--input-text-text-color-default": "var(--color-text-default)",
-    "--input-text-text-color-hover": "var(--color-text-default)",
-    "--input-text-text-color-active": "var(--color-text-default)",
-    "--input-text-text-color-disabled": "var(--color-text-disabled)",
-    "--input-text-text-color-placeholder": "var(--color-text-subtle)",
-    "--input-border-border-color-default": "var(--color-border-default)",
-    "--input-border-border-color-hover": "var(--color-border-brand)",
-    "--input-border-border-color-active": "var(--color-border-brand)",
-    "--input-border-border-color-focus": "var(--color-border-brand)",
-    "--input-border-border-size-default": "var(--size-border-100)",
-    "--input-border-border-size-hover": "var(--size-border-100)",
-    "--input-border-border-size-active": "var(--size-border-200)",
-    "--input-border-border-radius": "var(--brand-corner-input)",
-    "--input-border-border-color-disabled": "var(--color-border-disabled)",
-    "--input-border-border-color-invalid": "var(--color-border-danger)",
-    "--input-border-border-color-valid": "var(--color-border-strong)",
+    "--input-text-color-default": "var(--color-text-default)",
+    "--input-text-color-hover": "var(--color-text-brand)",
+    "--input-text-color-active": "var(--color-text-default)",
+    "--input-text-color-disabled": "var(--color-text-disabled)",
+    "--input-text-color-placeholder": "var(--color-text-subtle)",
+    "--input-border-color-default": "var(--color-border-default)",
+    "--input-border-color-hover": "var(--color-border-brand)",
+    "--input-border-color-active": "var(--color-border-brand)",
+    "--input-border-color-focus": "var(--color-border-brand)",
+    "--input-border-size-default": "var(--size-border-100)",
+    "--input-border-size-hover": "var(--size-border-100)",
+    "--input-border-size-active": "var(--size-border-200)",
+    "--input-border-radius": "var(--brand-corner-input)",
+    "--input-border-color-disabled": "var(--color-border-disabled)",
+    "--input-border-color-invalid": "var(--color-border-danger)",
+    "--input-border-color-valid": "var(--color-border-strong)",
     "--input-font-family": "var(--brand-font-base)",
     "--input-font-weight": "var(--typography-body-font-weight)",
     "--input-font-size": "var(--typography-label-font-size)",
@@ -92,6 +92,10 @@ export const tokens = {
     "--input-overlay-active": "var(--color-transparent)",
     "--input-height": "2.5rem",
     "--input-height-min": "2.5rem",
+    "--input-radio-text-color-active": "var(--color-text-default)",
+    "--input-radio-text-color-hover": "var(--color-text-strong)",
+    "--input-radio-container-background-hover": "var(--color-fill-surface)",
+    "--input-radio-border-color-focus": "var(--color-border-brand)",
     "--form-group-gap": "var(--size-spacing-400)",
     "--form-group-title-color": "var(--color-text-default)",
     "--form-padding-inline": "var(--size-spacing-400)",
@@ -105,10 +109,10 @@ export const tokens = {
     "--form-container-border-color": "var(--color-border-subtle)",
     "--form-border-size": "var(--size-border-100)",
     "--checkbox-text-color-default": "var(--color-text-default)",
-    "--checkbox-text-color-hover": "var(--color-text-strong)",
-    "--checkbox-text-color-active": "var(--color-text-inverse)",
+    "--checkbox-text-color-hover": "var(--color-text-brand)",
+    "--checkbox-text-color-active": "var(--color-text-on-brand)",
     "--checkbox-border-color-default": "var(--color-border-subtle)",
-    "--checkbox-border-color-hover": "var(--color-border-strong)",
+    "--checkbox-border-color-hover": "var(--color-border-brand)",
     "--checkbox-border-color-active": "var(--color-border-brand)",
     "--checkbox-border-color-focus": "var(--color-border-brand)",
     "--checkbox-border-color-invalid": "var(--color-border-danger)",
@@ -126,7 +130,7 @@ export const tokens = {
     "--input-radio-text-color-default": "var(--color-text-default)",
     "--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-hover": "var(--color-border-brand)",
     "--input-radio-border-color-active": "var(--color-border-brand)",
     "--input-radio-border-color-disabled": "var(--color-border-disabled)",
     "--input-radio-container-background-default": "var(--color-fill-surface)",
@@ -137,27 +141,45 @@ export const tokens = {
     "--badge-default-text-color": "var(--color-text-default)",
     "--badge-default-border-color": "var(--color-transparent)",
     "--badge-default-container-background": "var(--color-fill-subtle)",
-    "--badge-brand-text-color": "var(--color-text-inverse)",
+    "--badge-brand-text-color": "var(--color-text-on-brand)",
     "--badge-brand-border-color": "var(--color-transparent)",
     "--badge-brand-container-background": "var(--color-fill-brand)",
-    "--badge-success-text-color": "var(--color-text-inverse)",
+    "--badge-success-text-color": "var(--color-text-on-success)",
     "--badge-success-border-color": "var(--color-transparent)",
     "--badge-success-container-background": "var(--color-fill-success)",
     "--badge-font-family": "var(--brand-font-lead)",
     "--badge-font-weight": "var(--typography-label-font-weight)",
-    "--badge-font-size": "var(--typography-label-font-size)",
-    "--badge-line-height": "var(--typography-label-line-height)",
     "--badge-border-size-default": "var(--size-border-100)",
-    "--badge-border-radius": "var(--brand-corner-input)",
-    "--badge-padding-inline": "var(--size-spacing-400)",
+    "--badge-border-radius": "var(--size-radius-full)",
+    "--badge-padding-inline-md": "var(--size-spacing-300)",
     "--badge-padding-inline-icon-only": "var(--size-spacing-200)",
-    "--badge-padding-block": "var(--size-spacing-200)",
-    "--badge-gap": "var(--size-spacing-200)",
+    "--badge-padding-block-md": "var(--size-spacing-100)",
+    "--badge-gap": "var(--size-spacing-100)",
     "--badge-height-min": "2.5rem",
     "--badge-width-min": "2.5rem",
     "--badge-danger-container-background": "var(--color-fill-danger)",
     "--badge-danger-border-color": "var(--color-transparent)",
-    "--badge-danger-text-color": "var(--color-text-inverse)"
+    "--badge-danger-text-color": "var(--color-text-on-danger)",
+    "--badge-font-size-sm": ".75rem",
+    "--badge-font-size-md": ".875rem",
+    "--badge-line-height-sm": "1rem",
+    "--badge-line-height-md": "1.25rem",
+    "--badge-padding-inline-sm": ".5rem",
+    "--badge-padding-block-sm": ".125rem",
+    "--switch-track-background-default": "var(--color-fill-surface)",
+    "--switch-track-background-hover": "var(--color-fill-surface)",
+    "--switch-track-background-active": "var(--color-fill-brand)",
+    "--switch-track-background-disabled": "var(--color-fill-disabled)",
+    "--switch-track-border-color-default": "var(--color-border-default)",
+    "--switch-track-border-color-hover": "var(--color-border-brand)",
+    "--switch-track-border-color-active": "var(--color-border-brand)",
+    "--switch-track-border-color-disabled": "var(--color-border-disabled)",
+    "--switch-thumb-background-default": "var(--color-border-default)",
+    "--switch-thumb-background-hover": "var(--color-border-brand)",
+    "--switch-thumb-background-active": "var(--color-fill-surface)",
+    "--switch-thumb-background-disabled": "var(--color-fill-surface)",
+    "--switch-text-color-default": "var(--color-text-default)",
+    "--switch-text-color-disabled": "var(--color-text-disabled)"
   }
 } as const;
 

package/dist/tokens/ts/core-primitives.tokens.ts

@@ -1,5 +1,5 @@
 // Auto-generated design tokens from Figma
-// Generated on 2026-05-22T09:23:10.621Z
+// Generated on 2026-06-06T14:29:01.195Z
 
 export const tokens = {
   "colors": {

package/dist/tokens/ts/semantics-roles.tokens.ts

@@ -1,5 +1,5 @@
 // Auto-generated design tokens from Figma
-// Generated on 2026-05-22T09:23:10.624Z
+// Generated on 2026-06-06T14:29:01.200Z
 
 export const tokens = {
   "typography": {

package/dist/tokens/ts/themes-brands.tokens.brand-a.ts

@@ -1,5 +1,5 @@
 // Auto-generated design tokens from Figma
-// Generated on 2026-05-22T09:23:10.626Z
+// Generated on 2026-06-06T14:29:01.202Z
 
 export const tokens = {
   "colors": {

package/dist/tokens/ts/themes-brands.tokens.brand-b.ts

@@ -1,5 +1,5 @@
 // Auto-generated design tokens from Figma
-// Generated on 2026-05-22T09:23:10.628Z
+// Generated on 2026-06-06T14:29:01.203Z
 
 export const tokens = {
   "colors": {

package/dist/tokens/ts/themes-brands.tokens.brand-c.ts

@@ -1,5 +1,5 @@
 // Auto-generated design tokens from Figma
-// Generated on 2026-05-22T09:23:10.629Z
+// Generated on 2026-06-06T14:29:01.205Z
 
 export const tokens = {
   "colors": {

package/dist/ui/index.css

@@ -12,3 +12,4 @@
 @import url("./patterns/accordion.css") layer(components);
 @import url("./patterns/tabs.css") layer(components);
 @import url("./patterns/tooltip.css") layer(components);
+@import url("./patterns/form.css") layer(components);

package/dist/ui/patterns/button.css

@@ -9,7 +9,7 @@
     min-height: var(--button-height-min);
     background: var(--button-solid-container-background-default);
     border-color: var(--button-solid-border-color-default);
-    border-width: var(--button-solid-border-size);
+    border-width: var(--button-border-size-default);
     border-style: solid;
     color: var(--button-solid-text-color-default);
     border-radius: var(--button-border-radius);
@@ -69,7 +69,7 @@
   .button.outline {
     background: var(--button-outline-container-background-default);
     border-color: var(--button-outline-border-color-default);
-    border-width: var(--button-outline-border-size);
+    border-width: var(--button-border-size-default);
     border-style: solid;
     color: var(--button-outline-text-color-default);
   }
@@ -108,7 +108,7 @@
   .button.ghost {
     background: var(--button-ghost-container-background-default);
     border-color: var(--button-ghost-border-color-default);
-    border-width: var(--button-ghost-border-size);
+    border-width: var(--button-border-size-default);
     border-style: solid;
     color: var(--button-ghost-text-color-default);
   }

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(--input-checkbox-text-color-default);
+    color: var(--checkbox-text-color-default);
     cursor: pointer;
   }
 
   .checkbox-field.is-disabled {
-    color: var(--input-checkbox-text-color-disabled);
+    color: var(--checkbox-text-color-disabled);
     cursor: not-allowed;
   }
 
@@ -25,10 +25,10 @@
     place-content: center;
     border-style: solid;
     border-width: var(--checkbox-border-size-default);
-    border-color: var(--input-checkbox-border-color-default);
+    border-color: var(--checkbox-border-color-default);
     border-radius: var(--corner-checkbox-radius);
-    background: var(--input-checkbox-container-background-default);
-    color: var(--input-checkbox-text-color-active);
+    background: var(--checkbox-container-background-default);
+    color: var(--checkbox-text-color-active);
     cursor: pointer;
   }
 
@@ -39,8 +39,8 @@
 
   .checkbox:checked,
   .checkbox.is-checked {
-    border-color: var(--input-checkbox-border-color-active);
-    background: var(--input-checkbox-container-background-active);
+    border-color: var(--checkbox-border-color-active);
+    background: var(--checkbox-container-background-active);
   }
 
   .checkbox:checked::after,
@@ -61,8 +61,8 @@
 
   .checkbox:indeterminate,
   .checkbox.is-indeterminate {
-    border-color: var(--input-checkbox-border-color-active);
-    background: var(--input-checkbox-container-background-active);
+    border-color: var(--checkbox-border-color-active);
+    background: var(--checkbox-container-background-active);
   }
 
   .checkbox:indeterminate::after,
@@ -77,9 +77,9 @@
   .checkbox.is-hover {
     background:
       linear-gradient(0deg, var(--color-overlay-hover), var(--color-overlay-hover)),
-      var(--input-checkbox-container-background-hover);
-    color: var(--input-checkbox-text-color-hover);
-    border-color: var(--input-checkbox-border-color-hover);
+      var(--checkbox-container-background-hover);
+    color: var(--checkbox-text-color-hover);
+    border-color: var(--checkbox-border-color-hover);
     border-width: var(--checkbox-border-size-hover);
   }
 
@@ -87,9 +87,9 @@
   .checkbox.is-checked.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);
+      var(--checkbox-container-background-active);
+    color: var(--checkbox-text-color-hover);
+    border-color: var(--checkbox-border-color-hover);
     border-width: var(--checkbox-border-size-hover);
   }
 
@@ -97,9 +97,9 @@
   .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);
+      var(--checkbox-container-background-active);
+    color: var(--checkbox-text-color-hover);
+    border-color: var(--checkbox-border-color-hover);
     border-width: var(--checkbox-border-size-hover);
   }
 
@@ -107,8 +107,8 @@
   .checkbox.is-active {
     background:
       linear-gradient(0deg, var(--color-overlay-active), var(--color-overlay-active)),
-      var(--input-checkbox-container-background-default);
-    border-color: var(--input-checkbox-border-color-active);
+      var(--checkbox-container-background-default);
+    border-color: var(--checkbox-border-color-active);
     border-width: var(--size-border-200);
   }
 
@@ -116,21 +116,21 @@
   .checkbox.is-checked.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);
+      var(--checkbox-container-background-active);
+    border-color: var(--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);
+      var(--checkbox-container-background-active);
+    border-color: var(--checkbox-border-color-active);
   }
 
   .checkbox:focus-visible,
   .checkbox.is-focus-visible {
-    border-color: var(--input-checkbox-border-color-focus);
+    border-color: var(--checkbox-border-color-focus);
     outline: none;
     box-shadow: 0 0 0 var(--shadow-focus, 0) var(--color-focus, transparent);
   }
@@ -138,9 +138,9 @@
   .checkbox:disabled,
   .checkbox.is-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);
+    border-color: var(--checkbox-border-color-disabled);
+    background: var(--checkbox-container-background-disabled);
+    color: var(--checkbox-text-color-disabled);
     cursor: not-allowed;
   }
 }

package/dist/ui/patterns/form.css

@@ -0,0 +1,112 @@
+@layer components {
+  /* ----------------------------------------------------------------
+   * Form — layout container for form fields
+   * ---------------------------------------------------------------- */
+
+  .form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--form-gap);
+    padding-inline: var(--form-padding-inline);
+    padding-block: var(--form-padding-block);
+    background: var(--form-container-background);
+    border: var(--form-border-size) solid var(--form-container-border-color);
+    border-radius: var(--form-border-radius);
+  }
+
+  .form.borderless {
+    border: none;
+    padding: 0;
+    background: transparent;
+  }
+
+  /* ----------------------------------------------------------------
+   * Form Group — groups related fields with an optional title
+   * ---------------------------------------------------------------- */
+
+  .form-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--form-group-gap);
+    margin: 0;
+    padding: 0;
+    border: 0;
+    min-inline-size: 0;
+  }
+
+  .form-group__title {
+    font-family: var(--typography-heading-font-family);
+    font-weight: var(--typography-heading-font-weight);
+    font-size: var(--typography-heading-font-size-sm);
+    line-height: var(--typography-heading-line-height-sm);
+    color: var(--form-group-title-color);
+    margin: 0;
+  }
+
+  /* ----------------------------------------------------------------
+   * Form Field — single field with label, input, and helper/error
+   * ---------------------------------------------------------------- */
+
+  .form-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--form-field-gap);
+  }
+
+  .form-field[data-label-position="side"] {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  .form-field[data-label-position="side"] > .field-label {
+    flex-shrink: 0;
+    inline-size: 8rem;
+    padding-block-start: var(--size-spacing-200);
+  }
+
+  .form-field[data-label-position="side"] > .form-field__body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--form-field-gap);
+  }
+
+  /* ----------------------------------------------------------------
+   * Helper and error text
+   * ---------------------------------------------------------------- */
+
+  .form-field__helper {
+    font-family: var(--typography-body-font-family);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    color: var(--form-field-helper-text-color-default);
+    margin: 0;
+  }
+
+  .form-field.is-invalid .form-field__helper {
+    color: var(--form-field-helper-text-color-invalid);
+  }
+
+  /* ----------------------------------------------------------------
+   * Form Actions — button area at the bottom
+   * ---------------------------------------------------------------- */
+
+  .form-actions {
+    display: flex;
+    gap: var(--size-spacing-200);
+    justify-content: flex-end;
+    padding-block-start: var(--size-spacing-200);
+  }
+
+  .form-actions[data-align="start"] {
+    justify-content: flex-start;
+  }
+
+  .form-actions[data-align="stretch"] {
+    flex-direction: column;
+  }
+
+  .form-actions[data-align="stretch"] > * {
+    inline-size: 100%;
+  }
+}

package/dist/ui/patterns/input.css

@@ -7,25 +7,25 @@
     font-weight: var(--input-font-weight);
     font-size: var(--input-font-size);
     line-height: var(--input-line-height, var(--button-line-height, 1.5));
-    color: var(--input-text-text-color-default);
-    background: var(--input-text-container-background-default);
+    color: var(--input-text-color-default);
+    background: var(--input-container-background-default);
     border-style: solid;
     border-width: var(--input-border-size-default);
-    border-color: var(--input-text-border-color-default);
+    border-color: var(--input-border-color-default);
     border-radius: var(--input-border-radius);
     padding-inline: var(--input-padding-inline);
     padding-block: var(--input-padding-block);
   }
 
   .input::placeholder {
-    color: var(--input-text-text-color-placeholder);
+    color: var(--input-text-color-placeholder);
   }
 
   .input:hover,
   .input.is-hover {
     background:
       linear-gradient(0deg, var(--input-overlay-hover), var(--input-overlay-hover)),
-      var(--input-text-container-background-default);
+      var(--input-container-background-default);
     border-width: var(--input-border-size-hover);
     padding-inline: calc(
       var(--input-padding-inline) + var(--input-border-size-default) -
@@ -35,15 +35,15 @@
       var(--input-padding-block) + var(--input-border-size-default) -
         var(--input-border-size-hover)
     );
-    border-color: var(--input-text-border-color-hover);
-    color: var(--input-text-text-color-hover);
+    border-color: var(--input-border-color-hover);
+    color: var(--input-text-color-hover);
   }
 
   .input:active,
   .input.is-active {
     background:
       linear-gradient(0deg, var(--input-overlay-active), var(--input-overlay-active)),
-      var(--input-text-container-background-default);
+      var(--input-container-background-default);
     border-width: var(--input-border-size-active);
     padding-inline: calc(
       var(--input-padding-inline) + var(--input-border-size-default) -
@@ -53,14 +53,14 @@
       var(--input-padding-block) + var(--input-border-size-default) -
         var(--input-border-size-active)
     );
-    border-color: var(--input-text-border-color-active);
-    color: var(--input-text-text-color-active);
+    border-color: var(--input-border-color-active);
+    color: var(--input-text-color-active);
   }
 
   .input:focus-visible,
   .input.is-focus-visible {
-    background: var(--input-text-container-background-focus);
-    border-color: var(--input-text-border-color-focus);
+    background: var(--input-container-background-focus);
+    border-color: var(--input-border-color-focus);
     outline: none;
     box-shadow: 0 0 0 var(--shadow-focus, 0) var(--color-focus, transparent);
   }

package/dist/ui/patterns/label.css

@@ -2,7 +2,7 @@
   .label-content {
     display: inline-flex;
     align-items: center;
-    gap: var(--label-gap, 0.5em);
+    gap: var(--typography-label-gap, 0.5em);
     line-height: inherit;
   }
 

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "ui-foundations",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Token-first UI foundations with CSS, tokens, and React exports.",
-  "license": "MIT",
+  "license": "PolyForm-Noncommercial-1.0.0",
   "repository": {
     "type": "git",
     "url": "git@ssh.source.tui:Thomas.Bielich/ui-foundations.git"
@@ -24,10 +24,20 @@
     "./core.css": "./dist/core/index.css",
     "./ui.css": "./dist/ui/index.css",
     "./react": "./dist/react/index.js",
+    "./react/accordion": "./dist/react/accordion.js",
+    "./react/avatar": "./dist/react/avatar.js",
+    "./react/badge": "./dist/react/badge.js",
     "./react/button": "./dist/react/button.js",
+    "./react/checkbox": "./dist/react/checkbox.js",
+    "./react/divider": "./dist/react/divider.js",
     "./react/icon": "./dist/react/icon.js",
     "./react/input": "./dist/react/input.js",
     "./react/label": "./dist/react/label.js",
+    "./react/radio": "./dist/react/radio.js",
+    "./react/switch": "./dist/react/switch.js",
+    "./react/tabs": "./dist/react/tabs.js",
+    "./react/textarea": "./dist/react/textarea.js",
+    "./react/tooltip": "./dist/react/tooltip.js",
     "./assets/*": "./dist/assets/*",
     "./tokens/core.css": "./dist/tokens/css/core-primitives.tokens.css",
     "./tokens/primitives.css": "./dist/tokens/css/core-primitives.tokens.css",
@@ -53,6 +63,7 @@
     "rules:validate": "node scripts/validate-rule-pipeline.mjs",
     "tokens:generate": "node scripts/extract-tokens.js",
     "tokens:validate": "node scripts/validate-tokens.mjs",
+    "tokens:usage": "node scripts/validate-token-usage.mjs",
     "dtcg:validate": "node scripts/validate-dtcg.mjs",
     "tokens:build": "npm run tokens:generate",
     "build:css": "node scripts/build-css.mjs",
@@ -67,7 +78,7 @@
     "release:publish": "npm publish",
     "docs:build": "eleventy",
     "docs:site": "npm run build:all && npm run docs:build",
-    "ci:check": "npm run lint && npm run test:unit && npm run build:all && npm run smoke:check && npm run tokens:validate && npm run dtcg:validate && npm run assets:check && npm run rules:validate && npm run docs:build",
+    "ci:check": "npm run lint && npm run test:unit && npm run build:all && npm run smoke:check && npm run tokens:validate && npm run tokens:usage && npm run dtcg:validate && npm run assets:check && npm run rules:validate && npm run docs:build",
     "docs:dev": "npm run build:all && eleventy --serve"
   },
   "devDependencies": {