ui-foundations 0.1.0

package/dist/main.css

@@ -0,0 +1,1044 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Rokkitt:wght@400;500;600;700&display=swap");
+@layer reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  * {
+    margin: 0;
+  }
+
+  html,
+  body {
+    height: 100%;
+  }
+
+  body {
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    margin: 0;
+  }
+
+  img,
+  picture,
+  video,
+  canvas,
+  svg {
+    display: block;
+    max-width: 100%;
+  }
+
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+  }
+
+  p,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    overflow-wrap: break-word;
+  }
+}
+
+@layer base {
+  :root {
+    font-family: var(--font-family-sans, system-ui, sans-serif);
+    line-height: 1.5;
+    color: var(--color-text-default, #000);
+    background: var(--color-fill-surface, #fff);
+
+    font-optical-sizing: auto;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 1rem;
+  }
+}
+@layer base {
+  /**
+  * Typography
+  */
+
+  :where(h1, h2, h3, h4, h5, h6, .heading) {
+    color: var(--color-text-strong);
+    font-family: var(--typography-heading-font-family);
+    font-weight: var(--typography-heading-font-weight);
+    line-height: var(--typography-heading-line-height);
+    text-rendering: optimizeLegibility;
+  }
+
+  :where(p, span, .body) {
+    color: var(--color-text-default);
+    font-family: var(--typography-body-font-family);
+    line-height: var(--typography-body-line-height);
+    font-weight: var(--typography-body-font-weight);
+  }
+
+  /* Heading scale */
+  :where(h1, .heading-xxxl) {
+    font-size: var(--typography-heading-font-size-xxxl);
+    line-height: var(--typography-heading-line-height-xxxl);
+    margin-bottom: calc(
+      var(--typography-heading-line-height-xxxl) *
+        var(--typography-heading-font-size-xxxl)
+    );
+  }
+
+  :where(h2, .heading-xxl) {
+    font-size: var(--typography-heading-font-size-xxl);
+    line-height: var(--typography-heading-line-height-xxl);
+    margin-bottom: calc(
+      var(--typography-heading-line-height-xxl) *
+        var(--typography-heading-font-size-xxl)
+    );
+  }
+
+  :where(h3, .heading-xl) {
+    font-size: var(--typography-heading-font-size-xl);
+    line-height: var(--typography-heading-line-height-xl);
+    margin-bottom: calc(
+      var(--typography-heading-line-height-xl) *
+        var(--typography-heading-font-size-xl)
+    );
+  }
+
+  :where(h4, .heading-lg) {
+    font-size: var(--typography-heading-font-size-lg);
+    line-height: var(--typography-heading-line-height-lg);
+    margin-bottom: calc(
+      var(--typography-heading-line-height-lg) *
+        var(--typography-heading-font-size-lg)
+    );
+  }
+
+  :where(h5, .heading-md) {
+    font-size: var(--typography-heading-font-size-md);
+    line-height: var(--typography-heading-line-height-md);
+    margin-bottom: calc(
+      var(--typography-heading-line-height-md) *
+        var(--typography-heading-font-size-md)
+    );
+  }
+
+  :where(h6, .heading-sm) {
+    font-size: var(--typography-heading-font-size-sm);
+    line-height: var(--typography-heading-line-height-sm);
+    margin-bottom: calc(
+      var(--typography-heading-line-height-sm) *
+        var(--typography-heading-font-size-sm)
+    );
+  }
+
+  /* Text scale */
+  :where(sup, sub, .text-xs) {
+    font-size: var(--font-size-xs);
+    line-height: var(--line-height-xs);
+    margin-bottom: calc(var(--line-height-xs) * var(--font-size-xs));
+  }
+
+  :where(.text-sm) {
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+  }
+
+  :where(.text-md) {
+    font-size: var(--font-size-md);
+    line-height: var(--line-height-md);
+  }
+
+  :where(.text-lg) {
+    font-size: var(--font-size-lg);
+    line-height: var(--line-height-lg);
+  }
+
+  :where(.text-xl) {
+    font-size: var(--font-size-xl);
+    line-height: var(--line-height-xl);
+  }
+
+  :where(.text-xxl) {
+    font-size: var(--font-size-xxl);
+    line-height: var(--line-height-xxl);
+  }
+
+  :where(.text-xxxl) {
+    font-size: var(--font-size-xxxl);
+    line-height: var(--line-height-xxxl);
+  }
+
+  /* font weights */
+  b,
+  strong,
+  .bold {
+    font-weight: 700;
+  }
+}
+/* Auto-generated design tokens from Figma */
+/* Generated on 2026-03-04T20:50:34.071Z */
+
+:root {
+  --color-transparent: rgba(0 0 0 / 0);
+  --color-neutral-100: rgb(230 230 230);
+  --color-neutral-200: rgb(204 204 204);
+  --color-neutral-300: rgb(179 179 179);
+  --color-neutral-400: rgb(128 128 128);
+  --color-neutral-500: rgb(128 128 128);
+  --color-neutral-600: rgb(102 102 102);
+  --color-neutral-700: rgb(77 77 77);
+  --color-neutral-800: rgb(51 51 51);
+  --color-neutral-900: rgb(26 26 26);
+  --color-neutral-1000: rgb(0 0 0);
+  --color-neutral-000: rgb(255 255 255);
+  --color-neutral-alpha-100: rgba(0 0 0 / 0.1);
+  --color-neutral-alpha-200: rgba(0 0 0 / 0.2);
+  --color-neutral-alpha-300: rgba(0 0 0 / 0.3);
+  --color-neutral-alpha-400: rgba(0 0 0 / 0.4);
+  --color-neutral-alpha-500: rgba(0 0 0 / 0.5);
+  --color-neutral-alpha-600: rgba(0 0 0 / 0.6);
+  --color-neutral-alpha-700: rgba(0 0 0 / 0.7);
+  --color-neutral-alpha-800: rgba(0 0 0 / 0.8);
+  --color-neutral-alpha-900: rgba(0 0 0 / 0.9);
+  --color-neutral-alpha-000: rgba(0 0 0 / 0);
+  --color-brand-a-red: rgb(255 0 0);
+  --color-brand-a-green: rgb(19 174 92);
+  --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-b-red: rgb(204 0 0);
+  --color-brand-b-green: rgb(14 129 68);
+  --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);
+  --font-size-xs: .75rem;
+  --font-size-sm: .875rem;
+  --font-size-md: 1rem;
+  --font-size-lg: 1.25rem;
+  --font-size-xl: 1.5rem;
+  --font-size-xxl: 2rem;
+  --font-size-xxxl: 2.5rem;
+  --font-weight-100: 100;
+  --font-weight-200: 200;
+  --font-weight-300: 300;
+  --font-weight-400: 400;
+  --font-weight-500: 500;
+  --font-weight-600: 600;
+  --font-weight-700: 700;
+  --font-weight-800: 800;
+  --font-weight-900: 900;
+  --font-family-sans: Inter;
+  --font-family-serif: Rokkitt;
+  --font-family-mono: SFMono-Regular;
+  --line-height-xs: 1rem;
+  --line-height-sm: 1.25rem;
+  --line-height-md: 1.5rem;
+  --line-height-lg: 1.75rem;
+  --line-height-xl: 2rem;
+  --line-height-xxl: 2.75rem;
+  --line-height-xxxl: 3.5rem;
+  --size-spacing-100: .25rem;
+  --size-spacing-200: .5rem;
+  --size-spacing-300: .75rem;
+  --size-spacing-400: 1rem;
+  --size-spacing-500: 1.25rem;
+  --size-spacing-600: 1.5rem;
+  --size-spacing-700: 2rem;
+  --size-spacing-800: 2.5rem;
+  --size-spacing-900: 3rem;
+  --size-spacing-1000: 4rem;
+  --size-spacing-000: 0;
+  --size-radius-100: .125rem;
+  --size-radius-200: .25rem;
+  --size-radius-300: .375rem;
+  --size-radius-400: .5rem;
+  --size-radius-500: .75rem;
+  --size-radius-600: 1rem;
+  --size-radius-700: 1.25rem;
+  --size-radius-800: 1.5rem;
+  --size-radius-900: 2rem;
+  --size-radius-000: 0;
+  --size-radius-full: 625rem;
+  --shadow-focus: .5rem;
+  --breakpoint-100: 580px;
+  --breakpoint-200: 760px;
+  --breakpoint-300: 960px;
+  --breakpoint-400: 1200px;
+  --breakpoint-500: 1440px;
+  --breakpoint-600: 1920px;
+  --container-100: 192px;
+  --container-200: 384px;
+  --container-300: 576px;
+  --container-400: 768px;
+  --container-500: 960px;
+  --container-600: 1152px;
+  --layout-base-grid: .25rem;
+  --layout-columns: 12;
+  --layout-gutter: 1rem;
+  --layout-max-width: 1236px;
+  --layout-column-max-width: 412px;
+  --layout-float-breakpoint: 1220px;
+  --size-border-100: .0625rem;
+  --size-border-200: .125rem;
+  --size-border-300: .1875rem;
+  --size-border-000: 0;
+  --zindex-hidden: -1;
+  --zindex-base: 0;
+  --zindex-raised: 1;
+  --zindex-dropdown-base: 900;
+  --zindex-dropdown: 1000;
+  --zindex-sticky: 1020;
+  --zindex-fixed: 1030;
+  --zindex-modal-overlay: 1040;
+  --zindex-modal: 1050;
+  --zindex-popover: 1060;
+  --zindex-tooltip: 1070;
+}
+/* Auto-generated design tokens from Figma */
+/* Generated on 2026-03-04T20:50:34.061Z */
+
+:root[data-brand="a"] {
+  --brand-color-primary: var(--color-brand-a-purple-600);
+  --brand-color-primary-dark: var(--color-brand-a-purple-800);
+  --brand-color-accent: var(--color-brand-a-blue-500);
+  --brand-color-subtle: var(--color-neutral-500);
+  --brand-color-subtle-light: var(--color-neutral-200);
+  --brand-color-subtle-dark: var(--color-neutral-800);
+  --brand-color-accent-dark: var(--color-brand-a-blue-700);
+  --brand-color-functional-base: var(--color-brand-a-blue-700);
+  --brand-color-functional-base-dark: var(--color-brand-a-blue-800);
+  --brand-color-functional-success: var(--color-brand-a-green);
+  --brand-color-functional-danger: var(--color-brand-a-red);
+  --brand-font-lead: var(--font-family-serif);
+  --brand-font-base: var(--font-family-sans);
+  --brand-corner-button: var(--size-radius-full);
+  --brand-corner-input: var(--size-radius-200);
+  --brand-corner-card: var(--size-radius-200);
+  --brand-corner-modal: var(--size-radius-400);
+}
+/* Auto-generated design tokens from Figma */
+/* Generated on 2026-03-04T20:50:34.063Z */
+
+:root[data-brand="b"] {
+  --brand-color-primary: var(--color-brand-b-blue-500);
+  --brand-color-primary-dark: var(--color-brand-b-blue-700);
+  --brand-color-accent: var(--color-brand-b-purple-600);
+  --brand-color-subtle: var(--color-neutral-500);
+  --brand-color-subtle-light: var(--color-neutral-200);
+  --brand-color-subtle-dark: var(--color-neutral-800);
+  --brand-color-accent-dark: var(--color-brand-b-purple-800);
+  --brand-color-functional-base: var(--color-brand-b-purple-600);
+  --brand-color-functional-base-dark: var(--color-brand-b-purple-800);
+  --brand-color-functional-success: var(--color-brand-b-green);
+  --brand-color-functional-danger: var(--color-brand-b-red);
+  --brand-font-lead: var(--font-family-serif);
+  --brand-font-base: var(--font-family-sans);
+  --brand-corner-button: var(--size-radius-000);
+  --brand-corner-input: var(--size-radius-000);
+  --brand-corner-card: var(--size-radius-100);
+  --brand-corner-modal: var(--size-radius-200);
+}
+/* Auto-generated design tokens from Figma */
+/* Generated on 2026-03-04T20:50:34.072Z */
+
+:root {
+  --typography-code: var(--font-family-mono);
+  --typography-heading-font-family: var(--brand-font-lead);
+  --typography-heading-font-weight: var(--font-weight-700);
+  --typography-heading-font-size-xs: var(--font-size-xs);
+  --typography-heading-font-size-sm: var(--font-size-sm);
+  --typography-heading-font-size-md: var(--font-size-md);
+  --typography-heading-font-size-lg: var(--font-size-lg);
+  --typography-heading-font-size-xl: var(--font-size-xl);
+  --typography-heading-font-size-xxl: var(--font-size-xxl);
+  --typography-heading-font-size-xxxl: var(--font-size-xxxl);
+  --typography-heading-line-height-xs: var(--line-height-xs);
+  --typography-heading-line-height-sm: var(--line-height-sm);
+  --typography-heading-line-height-md: var(--line-height-md);
+  --typography-heading-line-height-lg: var(--line-height-lg);
+  --typography-heading-line-height-xl: var(--line-height-xl);
+  --typography-heading-line-height-xxl: var(--line-height-xxl);
+  --typography-heading-line-height-xxxl: var(--line-height-xxxl);
+  --typography-label-font-family: var(--brand-font-lead);
+  --typography-label-font-weight: var(--font-weight-600);
+  --typography-label-font-size: var(--font-size-md);
+  --typography-label-line-height: var(--line-height-md);
+  --typography-label-gap: var(--size-spacing-200);
+  --typography-body-font-family: var(--brand-font-base);
+  --typography-body-font-weight: var(--font-weight-400);
+  --typography-body-font-size: var(--font-size-md);
+  --typography-body-line-height: var(--line-height-md);
+  --corner-button-radius: var(--brand-corner-button);
+  --corner-card-radius: var(--brand-corner-card);
+  --corner-form-radius: var(--brand-corner-card);
+  --corner-modal-radius: var(--brand-corner-modal);
+}
+/* Auto-generated design tokens from Figma */
+/* Generated on 2026-03-04T20:50:34.066Z */
+
+:root {
+  --button-font-family: var(--brand-font-lead);
+  --button-font-weight: var(--typography-label-font-weight);
+  --button-font-size: var(--typography-label-font-size);
+  --button-line-height: var(--typography-label-line-height);
+  --button-border-size-default: var(--size-border-000);
+  --button-border-size-hover: var(--size-border-100);
+  --button-border-size-active: var(--size-border-200);
+  --button-border-radius: var(--brand-corner-button);
+  --button-padding-inline: var(--size-spacing-400);
+  --button-padding-inline-icon-only: var(--size-spacing-200);
+  --button-padding-block: var(--size-spacing-200);
+  --button-gap: var(--size-spacing-200);
+  --button-text-color-disabled: var(--color-text-disabled);
+  --button-border-color-disabled: var(--color-border-disabled);
+  --button-container-background-disabled: var(--color-fill-disabled);
+  --button-overlay-hover: var(--color-overlay-hover);
+  --button-overlay-active: var(--color-overlay-active);
+  --button-height: 2.5rem;
+  --button-solid-text-color-default: var(--color-text-inverse);
+  --button-solid-text-color-hover: var(--color-text-inverse);
+  --button-solid-text-color-active: var(--color-text-inverse);
+  --button-solid-border-color-default: var(--color-border-brand);
+  --button-solid-border-color-hover: var(--color-border-brand);
+  --button-solid-border-color-focus: var(--color-border-brand);
+  --button-solid-border-color-active: var(--color-border-brand);
+  --button-solid-container-background-default: var(--color-fill-brand);
+  --button-solid-container-background-hover: var(--color-fill-brand);
+  --button-solid-container-background-focus: var(--color-fill-brand);
+  --button-solid-container-background-active: var(--color-fill-brand);
+  --button-outline-text-color-default: var(--color-text-brand);
+  --button-outline-text-color-hover: var(--color-text-brand);
+  --button-outline-text-color-active: var(--color-text-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);
+  --button-outline-border-color-focus: var(--color-border-brand);
+  --button-outline-container-background-default: var(--color-fill-surface);
+  --button-outline-container-background-hover: var(--color-fill-surface);
+  --button-outline-container-background-focus: var(--color-fill-surface);
+  --button-outline-container-background-active: var(--color-fill-surface);
+  --button-ghost-text-color-default: var(--color-text-brand);
+  --button-ghost-text-color-hover: var(--color-text-brand);
+  --button-ghost-text-color-active: var(--color-text-brand);
+  --button-ghost-border-color-default: var(--color-transparent);
+  --button-ghost-border-color-hover: var(--color-transparent);
+  --button-ghost-border-color-focus: var(--color-transparent);
+  --button-ghost-border-color-active: var(--color-transparent);
+  --button-ghost-container-background-default: var(--color-fill-surface);
+  --button-ghost-container-background-hover: var(--color-fill-surface);
+  --button-ghost-container-background-focus: var(--color-fill-surface);
+  --button-ghost-container-background-active: var(--color-fill-surface);
+  --modal-backdrop-color: var(--color-overlay-backdrop);
+  --modal-surface-color: var(--color-fill-surface);
+  --modal-surface-border-radius: var(--brand-corner-modal);
+  --input-font-family: var(--brand-font-base);
+  --input-font-weight: var(--typography-body-font-weight);
+  --input-font-size: var(--typography-label-font-size);
+  --input-line-height: var(--typography-body-line-height);
+  --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-padding-inline: var(--size-spacing-200);
+  --input-padding-inline-icon-only: var(--size-spacing-200);
+  --input-padding-block: var(--size-spacing-200);
+  --input-gap: var(--size-spacing-200);
+  --input-text-color-disabled: var(--color-text-disabled);
+  --input-border-color-disabled: var(--color-border-disabled);
+  --input-container-background-disabled: var(--color-fill-disabled);
+  --input-overlay-hover: var(--color-transparent);
+  --input-overlay-active: var(--color-transparent);
+  --input-height: 2.5rem;
+  --input-text-text-color-placeholder: var(--color-text-subtle);
+  --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-border-color-default: var(--color-border-default);
+  --input-text-border-color-hover: var(--color-border-brand);
+  --input-text-border-color-active: var(--color-border-brand);
+  --input-text-border-color-focus: var(--color-border-brand);
+  --input-text-border-color-invalid: var(--color-border-danger);
+  --input-text-border-color-valid: var(--color-border-strong);
+  --input-text-container-background-default: var(--color-fill-surface);
+  --input-text-container-background-hover: var(--color-fill-surface);
+  --input-text-container-background-focus: var(--color-fill-surface);
+  --input-text-container-background-active: var(--color-fill-surface);
+  --form-gap: var(--size-spacing-400);
+  --form-padding-inline: var(--size-spacing-400);
+  --form-padding-block: var(--size-spacing-400);
+  --form-border-radius: var(--brand-corner-card);
+  --form-border-size: var(--size-border-100);
+  --form-container-background: var(--color-fill-surface);
+  --form-container-border-color: var(--color-border-subtle);
+  --form-group-gap: var(--size-spacing-400);
+  --form-group-title-color: var(--color-text-default);
+  --form-field-gap: var(--size-spacing-200);
+  --form-field-helper-text-color-default: var(--color-text-subtle);
+  --form-field-helper-text-color-invalid: var(--color-text-danger);
+}
+/* Auto-generated design tokens from Figma */
+/* Generated on 2026-03-04T20:50:34.069Z */
+
+:root {
+  --color-focus: var(--brand-color-primary);
+  --color-text-default: var(--color-neutral-800);
+  --color-text-inverse: var(--color-neutral-000);
+  --color-text-disabled: var(--color-neutral-600);
+  --color-text-brand: var(--brand-color-primary);
+  --color-text-subtle: var(--brand-color-subtle);
+  --color-text-strong: var(--color-neutral-1000);
+  --color-text-danger: var(--brand-color-functional-danger);
+  --color-text-success: var(--brand-color-functional-success);
+  --color-fill-surface: var(--color-neutral-000);
+  --color-fill-disabled: var(--color-neutral-300);
+  --color-fill-hover: var(--color-neutral-alpha-500);
+  --color-fill-brand: var(--brand-color-primary);
+  --color-fill-subtle: var(--brand-color-subtle-light);
+  --color-fill-active: var(--brand-color-accent);
+  --color-fill-danger: var(--brand-color-functional-danger);
+  --color-fill-success: var(--brand-color-functional-success);
+  --color-border-default: var(--color-neutral-800);
+  --color-border-subtle: var(--brand-color-subtle);
+  --color-border-strong: var(--color-neutral-1000);
+  --color-border-brand: var(--brand-color-primary);
+  --color-border-disabled: var(--color-neutral-500);
+  --color-border-danger: var(--brand-color-functional-danger);
+  --color-overlay-backdrop: var(--color-neutral-alpha-400);
+  --color-overlay-hover: var(--color-neutral-alpha-200);
+  --color-overlay-active: var(--color-neutral-alpha-400);
+  --color-overlay-selected: var(--color-neutral-alpha-600);
+}
+/* Auto-generated design tokens from Figma */
+/* Generated on 2026-03-04T20:50:34.068Z */
+
+:root[data-mode="dark"] {
+  --color-focus: var(--brand-color-primary-dark);
+  --color-text-default: var(--color-neutral-800);
+  --color-text-inverse: var(--color-neutral-1000);
+  --color-text-disabled: var(--color-neutral-600);
+  --color-text-brand: var(--brand-color-primary-dark);
+  --color-text-subtle: var(--brand-color-subtle-dark);
+  --color-text-strong: var(--color-neutral-1000);
+  --color-text-danger: var(--brand-color-functional-danger);
+  --color-text-success: var(--brand-color-functional-success);
+  --color-fill-surface: var(--color-neutral-1000);
+  --color-fill-disabled: var(--color-neutral-300);
+  --color-fill-hover: var(--color-neutral-alpha-500);
+  --color-fill-brand: var(--brand-color-primary);
+  --color-fill-subtle: var(--brand-color-subtle);
+  --color-fill-active: var(--brand-color-accent);
+  --color-fill-danger: var(--brand-color-functional-danger);
+  --color-fill-success: var(--brand-color-functional-success);
+  --color-border-default: var(--color-neutral-800);
+  --color-border-subtle: var(--brand-color-subtle-dark);
+  --color-border-strong: var(--color-neutral-1000);
+  --color-border-brand: var(--brand-color-primary);
+  --color-border-disabled: var(--color-neutral-500);
+  --color-border-danger: var(--brand-color-functional-danger);
+  --color-overlay-backdrop: var(--color-neutral-alpha-400);
+  --color-overlay-hover: var(--color-neutral-alpha-200);
+  --color-overlay-active: var(--color-neutral-alpha-400);
+  --color-overlay-selected: var(--color-neutral-alpha-600);
+}
+@layer themes {
+  :root {
+    color-scheme: light dark;
+  }
+}
+
+@layer components {
+  .label-content {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--label-gap, 0.5em);
+    line-height: inherit;
+  }
+
+  .label-content > .icon[data-slot] {
+    display: inline-flex;
+    align-items: center;
+    line-height: inherit;
+    flex: 0 0 auto;
+  }
+
+  .label-content__text {
+    line-height: inherit;
+  }
+
+  .label-content.is-icon-only {
+    gap: 0;
+  }
+
+  .field-label {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--field-label-gap, 0.25em);
+    line-height: var(--field-label-line-height, inherit);
+    cursor: pointer;
+  }
+
+  .field-label__required {
+    color: var(--field-label-required-color, currentColor);
+    font-weight: 700;
+  }
+
+  .field-label__required-text {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+@layer components {
+  /* Button token usage examples (ui-foundations) */
+
+  .button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
+    background: var(--button-solid-container-background-default);
+    border-color: var(--button-solid-border-color-default);
+    border-width: var(--button-solid-border-size);
+    border-style: solid;
+    color: var(--button-solid-text-color-default);
+    border-radius: var(--button-border-radius);
+    padding-inline: var(--button-padding-inline);
+    padding-block: var(--button-padding-block);
+    cursor: pointer;
+    -webkit-text-fill-color: currentColor;
+  }
+
+  .button .label-content {
+    line-height: inherit;
+    color: inherit;
+    -webkit-text-fill-color: currentColor;
+  }
+
+  .button .label-content__text,
+  .button .icon {
+    color: inherit;
+    -webkit-text-fill-color: currentColor;
+  }
+
+  .button.button--icon-only {
+    padding-inline: var(--button-padding-block);
+  }
+
+  .button:hover,
+  .button.is-hover {
+    background: linear-gradient(
+        0deg,
+        var(--button-overlay-hover),
+        var(--button-overlay-hover)
+      ),
+      var(--button-solid-container-background-default);
+    border-color: var(--button-solid-border-color-hover);
+    color: var(--button-solid-text-color-hover);
+  }
+
+  .button:active,
+  .button.is-active {
+    background: linear-gradient(
+        0deg,
+        var(--button-overlay-active),
+        var(--button-overlay-active)
+      ),
+      var(--button-solid-container-background-default);
+    border-color: var(--button-solid-border-color-active);
+    color: var(--button-solid-text-color-active);
+  }
+
+  .button:focus-visible,
+  .button.is-focus-visible {
+    background: var(--button-solid-container-background-focus);
+    border-color: var(--button-solid-border-color-focus);
+    color: var(--button-solid-text-color-default);
+  }
+
+  .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-style: solid;
+    color: var(--button-outline-text-color-default);
+  }
+
+  .button.outline:hover,
+  .button.outline.is-hover {
+    background: linear-gradient(
+        0deg,
+        var(--button-overlay-hover),
+        var(--button-overlay-hover)
+      ),
+      var(--button-outline-container-background-default);
+    border-color: var(--button-outline-border-color-hover);
+    color: var(--button-outline-text-color-default);
+  }
+
+  .button.outline:active,
+  .button.outline.is-active {
+    background: linear-gradient(
+        0deg,
+        var(--button-overlay-active),
+        var(--button-overlay-active)
+      ),
+      var(--button-outline-container-background-default);
+    border-color: var(--button-outline-border-color-active);
+    color: var(--button-outline-text-color-active);
+  }
+
+  .button.outline:focus-visible,
+  .button.outline.is-focus-visible {
+    background: var(--button-outline-container-background-focus);
+    border-color: var(--button-outline-border-color-focus);
+    color: var(--button-outline-text-color-default);
+  }
+
+  .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-style: solid;
+    color: var(--button-ghost-text-color-default);
+  }
+
+  .button.ghost:hover,
+  .button.ghost.is-hover {
+    background: linear-gradient(
+        0deg,
+        var(--button-overlay-hover),
+        var(--button-overlay-hover)
+      ),
+      var(--button-ghost-container-background-default);
+    border-color: var(--button-ghost-border-color-hover);
+    color: var(--button-ghost-text-color-default);
+  }
+
+  .button.ghost:active,
+  .button.ghost.is-active {
+    background: linear-gradient(
+        0deg,
+        var(--button-overlay-active),
+        var(--button-overlay-active)
+      ),
+      var(--button-ghost-container-background-default);
+    border-color: var(--button-ghost-border-color-active);
+    color: var(--button-ghost-text-color-active);
+  }
+
+  .button.ghost:focus-visible,
+  .button.ghost.is-focus-visible {
+    background: var(--button-ghost-container-background-focus);
+    border-color: var(--button-ghost-border-color-focus);
+    color: var(--button-ghost-text-color-default);
+  }
+
+  .button:disabled,
+  .button[disabled] {
+    cursor: not-allowed;
+    opacity: 0.6;
+    background: var(--button-container-background-disabled);
+    border-color: var(--button-border-color-disabled);
+    color: var(--button-text-color-disabled);
+  }
+
+  .button-group {
+    display: inline-flex;
+    align-items: stretch;
+    gap: var(--button-group-gap, var(--size-spacing-100, 0.25rem));
+  }
+
+  .button-group[data-orientation="vertical"] {
+    flex-direction: column;
+  }
+
+  .button-group[data-justify="stretch"] {
+    inline-size: 100%;
+  }
+
+  .button-group[data-justify="stretch"] > .button {
+    flex: 1 1 auto;
+    justify-content: center;
+  }
+
+  .button-group[data-attached="true"] {
+    gap: 0;
+  }
+
+  .button-group[data-attached="true"] > .button {
+    border-radius: 0;
+  }
+
+  .button-group[data-attached="true"]:not([data-orientation="vertical"])
+    > .button
+    + .button {
+    border-inline-start-width: 0;
+  }
+
+  .button-group[data-attached="true"][data-orientation="vertical"]
+    > .button
+    + .button {
+    border-block-start-width: 0;
+  }
+
+  .button-group[data-attached="true"]:not([data-orientation="vertical"])
+    > .button:first-child {
+    border-start-start-radius: var(
+      --button-group-border-radius,
+      var(--button-border-radius)
+    );
+    border-end-start-radius: var(
+      --button-group-border-radius,
+      var(--button-border-radius)
+    );
+  }
+
+  .button-group[data-attached="true"]:not([data-orientation="vertical"])
+    > .button:last-child {
+    border-start-end-radius: var(
+      --button-group-border-radius,
+      var(--button-border-radius)
+    );
+    border-end-end-radius: var(
+      --button-group-border-radius,
+      var(--button-border-radius)
+    );
+  }
+
+  .button-group[data-attached="true"][data-orientation="vertical"]
+    > .button:first-child {
+    border-start-start-radius: var(
+      --button-group-border-radius,
+      var(--button-border-radius)
+    );
+    border-start-end-radius: var(
+      --button-group-border-radius,
+      var(--button-border-radius)
+    );
+  }
+
+  .button-group[data-attached="true"][data-orientation="vertical"]
+    > .button:last-child {
+    border-end-start-radius: var(
+      --button-group-border-radius,
+      var(--button-border-radius)
+    );
+    border-end-end-radius: var(
+      --button-group-border-radius,
+      var(--button-border-radius)
+    );
+  }
+}
+@layer components {
+  .input {
+    inline-size: 100%;
+    block-size: var(--input-height, var(--size-spacing-800));
+    appearance: none;
+    font-family: var(--input-font-family);
+    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);
+    border-style: solid;
+    border-width: var(--input-border-size-default);
+    border-color: var(--input-text-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);
+  }
+
+  .input:hover,
+  .input.is-hover {
+    background:
+      linear-gradient(0deg, var(--input-overlay-hover), var(--input-overlay-hover)),
+      var(--input-text-container-background-default);
+    border-width: var(--input-border-size-hover);
+    padding-inline: calc(
+      var(--input-padding-inline) + var(--input-border-size-default) -
+        var(--input-border-size-hover)
+    );
+    padding-block: calc(
+      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);
+  }
+
+  .input:active,
+  .input.is-active {
+    background:
+      linear-gradient(0deg, var(--input-overlay-active), var(--input-overlay-active)),
+      var(--input-text-container-background-default);
+    border-width: var(--input-border-size-active);
+    padding-inline: calc(
+      var(--input-padding-inline) + var(--input-border-size-default) -
+        var(--input-border-size-active)
+    );
+    padding-block: calc(
+      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);
+  }
+
+  .input:focus-visible,
+  .input.is-focus-visible {
+    background: var(--input-text-container-background-focus);
+    border-color: var(--input-text-border-color-focus);
+    outline: none;
+    box-shadow: 0 0 0 var(--shadow-focus, 0) var(--color-focus, transparent);
+  }
+
+  .input:disabled,
+  .input[disabled],
+  .input.is-disabled {
+    cursor: not-allowed;
+    color: var(--input-text-color-disabled);
+    background: var(--input-container-background-disabled);
+    border-color: var(--input-border-color-disabled);
+  }
+}
+@layer components {
+  .icon {
+    display: inline-block;
+    inline-size: 1em;
+    block-size: 1em;
+    inline-size: 1lh;
+    block-size: 1lh;
+    line-height: inherit;
+    background-color: currentColor;
+    -webkit-mask-image: var(--icon-src);
+    mask-image: var(--icon-src);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+    vertical-align: middle;
+  }
+}
+@layer components {
+  .checkbox-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(--color-text-default);
+    cursor: pointer;
+  }
+
+  .checkbox-field.is-disabled {
+    color: var(--color-text-disabled);
+    cursor: not-allowed;
+  }
+
+  .checkbox {
+    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(--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);
+    cursor: pointer;
+  }
+
+  .checkbox::after {
+    content: "";
+  }
+
+  .checkbox:checked,
+  .checkbox.is-checked {
+    border-color: var(--color-border-brand);
+    background: var(--color-fill-brand);
+  }
+
+  .checkbox:checked::after,
+  .checkbox.is-checked::after {
+    content: "\2713";
+    font-size: var(--typography-label-font-size);
+    line-height: var(--typography-label-line-height);
+  }
+
+  .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);
+  }
+
+  .checkbox:checked:hover,
+  .checkbox.is-checked.is-hover {
+    background:
+      linear-gradient(0deg, var(--color-overlay-hover), var(--color-overlay-hover)),
+      var(--color-fill-brand);
+  }
+
+  .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);
+    border-width: var(--size-border-200);
+  }
+
+  .checkbox:checked:active,
+  .checkbox.is-checked.is-active {
+    background:
+      linear-gradient(0deg, var(--color-overlay-active), var(--color-overlay-active)),
+      var(--color-fill-brand);
+  }
+
+  .checkbox:focus-visible,
+  .checkbox.is-focus-visible {
+    border-color: var(--color-border-brand);
+    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);
+    cursor: not-allowed;
+  }
+}