ui-foundations 0.6.0 → 0.7.0

package/dist/main.css

@@ -181,7 +181,7 @@
   }
 }
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-05-22T09:23:10.621Z */
+/* Generated on 2026-06-06T14:29:01.194Z */
 
 :root {
   --color-neutral-100: rgb(230 230 230);
@@ -421,7 +421,7 @@
   --zindex-hidden: -1;
 }
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-05-22T09:23:10.624Z */
+/* Generated on 2026-06-06T14:29:01.200Z */
 
 :root {
   --typography-heading-font-family: var(--brand-font-lead);
@@ -457,7 +457,7 @@
   --corner-checkbox-radius: var(--brand-corner-input);
 }
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-05-22T09:23:10.611Z */
+/* Generated on 2026-06-06T14:29:01.180Z */
 
 :root {
   --button-border-size-hover: var(--size-border-100);
@@ -465,13 +465,13 @@
   --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);
@@ -516,22 +516,22 @@
   --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);
@@ -549,6 +549,10 @@
   --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);
@@ -562,10 +566,10 @@
   --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);
@@ -583,7 +587,7 @@
   --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);
@@ -594,30 +598,48 @@
   --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);
 }
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-05-22T09:23:10.603Z */
+/* Generated on 2026-06-06T14:29:01.170Z */
 
 :root[data-mode="dark"] {
   --color-text-default: var(--color-neutral-800);
@@ -628,6 +650,12 @@
   --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);
@@ -649,7 +677,7 @@
   --color-focus: var(--brand-color-primary-dark);
 }
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-05-22T09:23:10.601Z */
+/* Generated on 2026-06-06T14:29:01.166Z */
 
 :root {
   --color-text-default: var(--color-neutral-800);
@@ -660,6 +688,12 @@
   --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);
@@ -681,7 +715,7 @@
   --color-focus: var(--brand-color-primary);
 }
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-05-22T09:23:10.626Z */
+/* Generated on 2026-06-06T14:29:01.202Z */
 
 :root[data-brand="a"] {
   --brand-color-functional-success: var(--color-brand-c-green-30);
@@ -703,7 +737,7 @@
   --brand-corner-input: var(--size-radius-200);
 }
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-05-22T09:23:10.628Z */
+/* Generated on 2026-06-06T14:29:01.203Z */
 
 :root[data-brand="b"] {
   --brand-color-functional-success: var(--color-brand-b-green-600);
@@ -725,7 +759,7 @@
   --brand-corner-input: var(--size-radius-000);
 }
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-05-22T09:23:10.629Z */
+/* Generated on 2026-06-06T14:29:01.205Z */
 
 :root[data-brand="c"] {
   --brand-color-functional-success: var(--color-brand-a-green-600);
@@ -756,7 +790,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;
   }
 
@@ -812,7 +846,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);
@@ -872,7 +906,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);
   }
@@ -911,7 +945,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);
   }
@@ -1052,25 +1086,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) -
@@ -1080,15 +1114,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) -
@@ -1098,14 +1132,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);
   }
@@ -1148,12 +1182,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;
   }
 
@@ -1166,10 +1200,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;
   }
 
@@ -1180,8 +1214,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,
@@ -1202,8 +1236,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,
@@ -1218,9 +1252,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);
   }
 
@@ -1228,9 +1262,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);
   }
 
@@ -1238,9 +1272,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);
   }
 
@@ -1248,8 +1282,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);
   }
 
@@ -1257,21 +1291,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);
   }
@@ -1279,9 +1313,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;
   }
 }
@@ -1946,3 +1980,115 @@
     opacity: 1;
   }
 }
+@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%;
+  }
+}