ui-foundations 0.4.1 → 0.6.0

package/dist/main.css

@@ -181,7 +181,7 @@
   }
 }
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-04-28T09:23:28.563Z */
+/* Generated on 2026-05-22T09:23:10.621Z */
 
 :root {
   --color-neutral-100: rgb(230 230 230);
@@ -204,6 +204,16 @@
   --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-neutral-alpha-inverse-100: rgba(255 255 255 / 0.1);
+  --color-neutral-alpha-inverse-200: rgba(255 255 255 / 0.2);
+  --color-neutral-alpha-inverse-300: rgba(255 255 255 / 0.3);
+  --color-neutral-alpha-inverse-400: rgba(255 255 255 / 0.4);
+  --color-neutral-alpha-inverse-500: rgba(255 255 255 / 0.5);
+  --color-neutral-alpha-inverse-600: rgba(255 255 255 / 0.6);
+  --color-neutral-alpha-inverse-700: rgba(255 255 255 / 0.7);
+  --color-neutral-alpha-inverse-800: rgba(255 255 255 / 0.8);
+  --color-neutral-alpha-inverse-900: rgba(255 255 255 / 0.9);
+  --color-neutral-alpha-inverse-000: rgba(255 255 255 / 0);
   --color-neutral-000: rgb(255 255 255);
   --color-brand-b-purple-200: rgb(222 192 255);
   --color-brand-b-purple-300: rgb(196 143 255);
@@ -266,6 +276,67 @@
   --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);
+  --color-brand-c-blue-10: rgb(27 17 92);
+  --color-brand-c-blue-20: rgb(7 45 146);
+  --color-brand-c-blue-30: rgb(10 60 194);
+  --color-brand-c-blue-40: rgb(12 75 243);
+  --color-brand-c-blue-50: rgb(53 103 246);
+  --color-brand-c-blue-60: rgb(109 147 248);
+  --color-brand-c-blue-70: rgb(148 176 250);
+  --color-brand-c-blue-80: rgb(182 200 252);
+  --color-brand-c-blue-90: rgb(216 226 253);
+  --color-brand-c-blue-100: rgb(27 17 92);
+  --color-brand-c-coolblue-10: rgb(5 68 97);
+  --color-brand-c-coolblue-20: rgb(7 102 146);
+  --color-brand-c-coolblue-30: rgb(10 136 194);
+  --color-brand-c-coolblue-40: rgb(12 170 243);
+  --color-brand-c-coolblue-50: rgb(56 185 245);
+  --color-brand-c-coolblue-60: rgb(112 203 244);
+  --color-brand-c-coolblue-70: rgb(169 223 248);
+  --color-brand-c-coolblue-80: rgb(198 234 251);
+  --color-brand-c-coolblue-90: rgb(226 244 253);
+  --color-brand-c-coolblue-100: rgb(11 68 97);
+  --color-brand-c-green-10: rgb(5 66 61);
+  --color-brand-c-green-20: rgb(36 111 73);
+  --color-brand-c-green-30: rgb(43 161 104);
+  --color-brand-c-green-40: rgb(48 182 117);
+  --color-brand-c-green-50: rgb(97 196 141);
+  --color-brand-c-green-60: rgb(135 210 166);
+  --color-brand-c-green-70: rgb(169 224 191);
+  --color-brand-c-green-80: rgb(197 228 205);
+  --color-brand-c-green-90: rgb(223 246 235);
+  --color-brand-c-green-100: rgb(239 251 245);
+  --color-brand-c-red-10: rgb(96 6 9);
+  --color-brand-c-red-20: rgb(144 9 14);
+  --color-brand-c-red-30: rgb(192 12 18);
+  --color-brand-c-red-40: rgb(240 15 23);
+  --color-brand-c-red-50: rgb(242 58 65);
+  --color-brand-c-red-60: rgb(246 111 116);
+  --color-brand-c-red-70: rgb(248 150 153);
+  --color-brand-c-red-80: rgb(250 183 185);
+  --color-brand-c-red-90: rgb(253 226 227);
+  --color-brand-c-red-100: rgb(254 236 236);
+  --color-brand-c-orange-10: rgb(102 61 0);
+  --color-brand-c-orange-20: rgb(153 92 0);
+  --color-brand-c-orange-30: rgb(204 122 0);
+  --color-brand-c-orange-40: rgb(255 153 0);
+  --color-brand-c-orange-50: rgb(255 171 46);
+  --color-brand-c-orange-60: rgb(255 194 102);
+  --color-brand-c-orange-70: rgb(255 210 143);
+  --color-brand-c-orange-80: rgb(255 224 178);
+  --color-brand-c-orange-90: rgb(255 239 214);
+  --color-brand-c-orange-100: rgb(255 247 235);
+  --color-brand-c-purple-10: rgb(57 17 92);
+  --color-brand-c-purple-20: rgb(81 7 146);
+  --color-brand-c-purple-30: rgb(108 10 194);
+  --color-brand-c-purple-40: rgb(135 12 243);
+  --color-brand-c-purple-50: rgb(156 53 246);
+  --color-brand-c-purple-60: rgb(183 109 248);
+  --color-brand-c-purple-70: rgb(202 148 250);
+  --color-brand-c-purple-80: rgb(219 182 252);
+  --color-brand-c-purple-90: rgb(236 216 253);
+  --color-brand-c-purple-100: rgb(245 236 254);
+  --color-brand-c-midnight-10: rgb(11 9 45);
   --font-size-md: 1rem;
   --font-size-xs: .75rem;
   --font-size-sm: .875rem;
@@ -350,7 +421,7 @@
   --zindex-hidden: -1;
 }
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-04-28T09:23:28.564Z */
+/* Generated on 2026-05-22T09:23:10.624Z */
 
 :root {
   --typography-heading-font-family: var(--brand-font-lead);
@@ -386,7 +457,7 @@
   --corner-checkbox-radius: var(--brand-corner-input);
 }
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-04-28T09:23:28.559Z */
+/* Generated on 2026-05-22T09:23:10.611Z */
 
 :root {
   --button-border-size-hover: var(--size-border-100);
@@ -448,107 +519,105 @@
   --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);
+  --input-text-text-color-disabled: var(--color-text-disabled);
   --input-text-text-color-placeholder: var(--color-text-subtle);
-  --input-text-height-min: 2.5rem;
+  --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-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-container-background-default: var(--color-fill-surface);
+  --input-container-background-hover: var(--color-fill-surface);
+  --input-container-background-focus: var(--color-fill-surface);
+  --input-container-background-active: var(--color-fill-surface);
+  --input-container-background-disabled: var(--color-fill-disabled);
   --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-checkbox-text-color-default: 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-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);
+  --input-height-min: 2.5rem;
+  --form-group-gap: var(--size-spacing-400);
+  --form-group-title-color: var(--color-text-default);
+  --form-padding-inline: var(--size-spacing-400);
+  --form-padding-block: var(--size-spacing-400);
+  --form-border-radius: var(--brand-corner-card);
+  --form-gap: var(--size-spacing-400);
+  --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);
+  --form-container-background: var(--color-fill-surface);
+  --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-border-color-default: var(--color-border-subtle);
+  --checkbox-border-color-hover: var(--color-border-strong);
+  --checkbox-border-color-active: var(--color-border-brand);
+  --checkbox-border-color-focus: var(--color-border-brand);
+  --checkbox-border-color-invalid: var(--color-border-danger);
+  --checkbox-border-color-valid: var(--color-border-strong);
+  --checkbox-border-color-disabled: var(--color-border-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);
+  --checkbox-container-background-default: var(--color-fill-surface);
+  --checkbox-container-background-hover: var(--color-fill-surface);
+  --checkbox-container-background-focus: var(--color-fill-surface);
+  --checkbox-container-background-active: var(--color-fill-brand);
+  --checkbox-container-background-disabled: var(--color-fill-disabled);
+  --checkbox-text-color-disabled: var(--color-text-disabled);
   --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);
-  --form-padding-block: var(--size-spacing-400);
-  --form-border-radius: var(--brand-corner-card);
-  --form-gap: var(--size-spacing-400);
-  --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);
-  --form-container-background: var(--color-fill-surface);
-  --form-container-border-color: var(--color-border-subtle);
-  --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-default-border-color: var(--color-transparent);
+  --badge-default-container-background: var(--color-fill-subtle);
   --badge-brand-text-color: var(--color-text-inverse);
-  --badge-success-container-background: var(--color-fill-success);
+  --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-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-padding-inline-icon-only: var(--size-spacing-200);
+  --badge-padding-block: var(--size-spacing-200);
+  --badge-gap: var(--size-spacing-200);
+  --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-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);
 }
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-04-28T09:23:28.554Z */
+/* Generated on 2026-05-22T09:23:10.603Z */
 
 :root[data-mode="dark"] {
   --color-text-default: var(--color-neutral-800);
@@ -561,7 +630,7 @@
   --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-hover: var(--color-neutral-alpha-inverse-100);
   --color-fill-brand: var(--brand-color-primary);
   --color-fill-subtle: var(--brand-color-subtle);
   --color-fill-active: var(--brand-color-accent);
@@ -573,14 +642,14 @@
   --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);
+  --color-overlay-backdrop: var(--color-neutral-alpha-inverse-400);
+  --color-overlay-hover: var(--color-neutral-alpha-inverse-100);
+  --color-overlay-active: var(--color-neutral-alpha-inverse-200);
+  --color-overlay-selected: var(--color-neutral-alpha-inverse-300);
   --color-focus: var(--brand-color-primary-dark);
 }
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-04-28T09:23:28.552Z */
+/* Generated on 2026-05-22T09:23:10.601Z */
 
 :root {
   --color-text-default: var(--color-neutral-800);
@@ -612,29 +681,29 @@
   --color-focus: var(--brand-color-primary);
 }
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-04-28T09:23:28.565Z */
+/* Generated on 2026-05-22T09:23:10.626Z */
 
 :root[data-brand="a"] {
-  --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-functional-success: var(--color-brand-c-green-30);
+  --brand-color-functional-danger: var(--color-brand-c-red-30);
+  --brand-color-functional-base: var(--color-brand-c-blue-10);
+  --brand-color-functional-base-dark: var(--color-brand-c-midnight-10);
+  --brand-color-primary: var(--color-brand-c-blue-40);
+  --brand-color-accent: var(--color-brand-c-coolblue-60);
+  --brand-color-primary-dark: var(--color-brand-c-blue-10);
+  --brand-color-accent-dark: var(--color-brand-c-coolblue-10);
   --brand-color-subtle: var(--color-neutral-500);
   --brand-color-subtle-dark: var(--color-neutral-800);
   --brand-color-subtle-light: var(--color-neutral-200);
   --brand-font-base: var(--font-family-sans);
   --brand-font-lead: var(--font-family-serif);
-  --brand-corner-button: var(--size-radius-700);
-  --brand-corner-card: var(--size-radius-200);
+  --brand-corner-button: var(--size-radius-full);
+  --brand-corner-card: var(--size-radius-300);
   --brand-corner-modal: var(--size-radius-400);
   --brand-corner-input: var(--size-radius-200);
 }
 /* Auto-generated design tokens from Figma */
-/* Generated on 2026-04-28T09:23:28.567Z */
+/* Generated on 2026-05-22T09:23:10.628Z */
 
 :root[data-brand="b"] {
   --brand-color-functional-success: var(--color-brand-b-green-600);
@@ -655,6 +724,28 @@
   --brand-corner-modal: var(--size-radius-200);
   --brand-corner-input: var(--size-radius-000);
 }
+/* Auto-generated design tokens from Figma */
+/* Generated on 2026-05-22T09:23:10.629Z */
+
+:root[data-brand="c"] {
+  --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);
+  --brand-font-base: var(--font-family-sans);
+  --brand-font-lead: var(--font-family-serif);
+  --brand-corner-button: var(--size-radius-700);
+  --brand-corner-card: var(--size-radius-200);
+  --brand-corner-modal: var(--size-radius-400);
+  --brand-corner-input: var(--size-radius-200);
+}
 @layer themes {
   :root {
     color-scheme: light dark;
@@ -1507,3 +1598,351 @@
     flex: 0 0 auto;
   }
 }
+@layer components {
+  .divider {
+    border: none;
+    margin: 0;
+    padding: 0;
+    background: var(--divider-color, var(--color-border-default));
+    block-size: var(--size-border-100);
+    inline-size: 100%;
+    align-self: stretch;
+  }
+
+  /* ── Vertical orientation ── */
+
+  .divider[aria-orientation="vertical"] {
+    block-size: auto;
+    inline-size: var(--size-border-100);
+    align-self: stretch;
+  }
+
+  /* ── Subtle variant ── */
+
+  .divider.subtle {
+    --divider-color: var(--color-border-subtle);
+  }
+}
+@layer components {
+  .textarea {
+    display: block;
+    inline-size: 100%;
+    min-block-size: calc(var(--line-height-md) * 3 + var(--size-spacing-300) * 2);
+    padding-inline: var(--size-spacing-300);
+    padding-block: var(--size-spacing-300);
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-md);
+    line-height: var(--line-height-md);
+    color: var(--color-text-default);
+    background: var(--color-fill-surface);
+    border: var(--size-border-100) solid var(--color-border-default);
+    border-radius: var(--size-radius-300);
+    resize: vertical;
+    transition: border-color 0.15s ease;
+  }
+
+  .textarea::placeholder {
+    color: var(--color-text-disabled);
+  }
+
+  .textarea:hover,
+  .textarea.is-hover {
+    border-color: var(--color-border-strong);
+  }
+
+  .textarea:focus-visible,
+  .textarea.is-focus-visible {
+    border-color: var(--color-focus);
+    outline: none;
+    box-shadow: 0 0 0 var(--shadow-focus) var(--color-focus);
+  }
+
+  .textarea:disabled,
+  .textarea.is-disabled {
+    color: var(--color-text-disabled);
+    background: var(--color-fill-disabled);
+    border-color: var(--color-border-disabled);
+    cursor: not-allowed;
+    resize: none;
+  }
+
+  .textarea[readonly] {
+    background: var(--color-fill-surface);
+    border-color: var(--color-border-default);
+    cursor: default;
+    resize: none;
+  }
+}
+@layer components {
+  .avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--size-radius-full);
+    overflow: hidden;
+    background: var(--color-fill-subtle);
+    color: var(--color-text-default);
+    font-family: var(--font-family-sans);
+    font-weight: var(--font-weight-600);
+    inline-size: 2.5rem;
+    block-size: 2.5rem;
+    font-size: var(--font-size-sm);
+  }
+
+  /* ── Sizes ── */
+
+  .avatar.xs {
+    inline-size: 1.5rem;
+    block-size: 1.5rem;
+    font-size: var(--font-size-xs);
+  }
+
+  .avatar.sm {
+    inline-size: 2rem;
+    block-size: 2rem;
+    font-size: var(--font-size-xs);
+  }
+
+  .avatar.lg {
+    inline-size: 3rem;
+    block-size: 3rem;
+    font-size: var(--font-size-md);
+  }
+
+  .avatar.xl {
+    inline-size: 4rem;
+    block-size: 4rem;
+    font-size: var(--font-size-lg);
+  }
+
+  /* ── Image ── */
+
+  .avatar > img {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+
+  /* ── Initials ── */
+
+  .avatar__initials {
+    user-select: none;
+    text-transform: uppercase;
+  }
+}
+@layer components {
+  .accordion {
+    display: flex;
+    flex-direction: column;
+    border: var(--size-border-100) solid var(--color-border-default);
+    border-radius: var(--size-radius-400);
+    overflow: hidden;
+  }
+
+  .accordion-item {
+    border-block-start: var(--size-border-100) solid var(--color-border-default);
+  }
+
+  .accordion-item:first-child {
+    border-block-start: none;
+  }
+
+  .accordion-item > summary {
+    display: flex;
+    align-items: center;
+    gap: var(--size-spacing-200);
+    padding-inline: var(--size-spacing-400);
+    padding-block: var(--size-spacing-300);
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-600);
+    line-height: var(--line-height-md);
+    color: var(--color-text-default);
+    cursor: pointer;
+    list-style: none;
+    user-select: none;
+  }
+
+  .accordion-item > summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .accordion-item > summary::before {
+    content: "";
+    display: inline-block;
+    inline-size: 0.5rem;
+    block-size: 0.5rem;
+    border-inline-end: var(--size-border-200) solid currentColor;
+    border-block-end: var(--size-border-200) solid currentColor;
+    transform: rotate(-45deg);
+    transition: transform 0.2s ease;
+    flex-shrink: 0;
+  }
+
+  .accordion-item[open] > summary::before {
+    transform: rotate(45deg);
+  }
+
+  .accordion-item > summary:hover,
+  .accordion-item > summary.is-hover {
+    background: var(--color-fill-hover);
+  }
+
+  .accordion-item > summary:focus-visible,
+  .accordion-item > summary.is-focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 var(--shadow-focus) var(--color-focus);
+  }
+
+  .accordion-item__content {
+    padding-inline: var(--size-spacing-400);
+    padding-block: var(--size-spacing-300);
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-md);
+    line-height: var(--line-height-md);
+    color: var(--color-text-default);
+  }
+
+  /* ── Disabled ── */
+
+  .accordion-item.is-disabled > summary {
+    color: var(--color-text-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+}
+@layer components {
+  .tabs {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .tab-list {
+    display: flex;
+    gap: 0;
+    border-block-end: var(--size-border-100) solid var(--color-border-default);
+  }
+
+  .tab-list[aria-orientation="vertical"] {
+    flex-direction: column;
+    border-block-end: none;
+    border-inline-end: var(--size-border-100) solid var(--color-border-default);
+  }
+
+  .tab {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding-inline: var(--size-spacing-400);
+    padding-block: var(--size-spacing-300);
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-500);
+    line-height: var(--line-height-md);
+    color: var(--color-text-default);
+    background: transparent;
+    border: none;
+    border-block-end: var(--size-border-200) solid transparent;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: border-color 0.15s ease, color 0.15s ease;
+  }
+
+  .tab:hover,
+  .tab.is-hover {
+    color: var(--color-text-brand);
+    border-block-end-color: var(--color-border-subtle);
+  }
+
+  .tab[aria-selected="true"],
+  .tab.is-selected {
+    color: var(--color-text-brand);
+    font-weight: var(--font-weight-600);
+    border-block-end-color: var(--color-border-brand);
+  }
+
+  .tab:focus-visible,
+  .tab.is-focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 var(--shadow-focus) var(--color-focus);
+  }
+
+  .tab:disabled,
+  .tab.is-disabled {
+    color: var(--color-text-disabled);
+    cursor: not-allowed;
+    border-block-end-color: transparent;
+  }
+
+  .tab-panel {
+    padding-block: var(--size-spacing-400);
+  }
+
+  .tab-panel[hidden] {
+    display: none;
+  }
+}
+@layer components {
+  .tooltip {
+    position: absolute;
+    z-index: var(--zindex-tooltip);
+    max-inline-size: 15rem;
+    padding-inline: var(--size-spacing-300);
+    padding-block: var(--size-spacing-200);
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-sm);
+    line-height: var(--line-height-sm);
+    color: var(--color-text-inverse);
+    background: var(--color-neutral-900);
+    border-radius: var(--size-radius-300);
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.15s ease;
+  }
+
+  .tooltip.is-visible {
+    opacity: 1;
+  }
+
+  /* ── Placement ── */
+
+  .tooltip[data-placement="top"] {
+    inset-block-end: 100%;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+    margin-block-end: var(--size-spacing-200);
+  }
+
+  .tooltip[data-placement="bottom"] {
+    inset-block-start: 100%;
+    inset-inline-start: 50%;
+    transform: translateX(-50%);
+    margin-block-start: var(--size-spacing-200);
+  }
+
+  .tooltip[data-placement="left"] {
+    inset-inline-end: 100%;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+    margin-inline-end: var(--size-spacing-200);
+  }
+
+  .tooltip[data-placement="right"] {
+    inset-inline-start: 100%;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+    margin-inline-start: var(--size-spacing-200);
+  }
+
+  /* ── Trigger wrapper ── */
+
+  .tooltip-trigger {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .tooltip-trigger:hover > .tooltip,
+  .tooltip-trigger:focus-within > .tooltip {
+    opacity: 1;
+  }
+}