ui-foundations 0.4.1 → 0.6.0

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

@@ -1,5 +1,5 @@
 // Auto-generated design tokens from Figma
-// Generated on 2026-04-28T09:23:28.555Z
+// Generated on 2026-05-22T09:23:10.604Z
 
 export const tokens = {
   "colors": {
@@ -13,7 +13,7 @@ export const tokens = {
     "--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)",
@@ -25,10 +25,10 @@ export const tokens = {
     "--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)"
   }
 } as const;

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

@@ -1,5 +1,5 @@
 // Auto-generated design tokens from Figma
-// Generated on 2026-04-28T09:23:28.553Z
+// Generated on 2026-05-22T09:23:10.601Z
 
 export const tokens = {
   "colors": {

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

@@ -1,5 +1,5 @@
 // Auto-generated design tokens from Figma
-// Generated on 2026-04-28T09:23:28.559Z
+// Generated on 2026-05-22T09:23:10.611Z
 
 export const tokens = {
   "components": {
@@ -62,104 +62,102 @@ export const tokens = {
     "--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-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)"
+    "--badge-danger-border-color": "var(--color-transparent)",
+    "--badge-danger-text-color": "var(--color-text-inverse)"
   }
 } as const;
 

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

@@ -1,5 +1,5 @@
 // Auto-generated design tokens from Figma
-// Generated on 2026-04-28T09:23:28.563Z
+// Generated on 2026-05-22T09:23:10.621Z
 
 export const tokens = {
   "colors": {
@@ -23,6 +23,16 @@ export const tokens = {
     "--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)",
@@ -84,7 +94,68 @@ export const tokens = {
     "--color-brand-a-sand-600": "rgb(108 109 97)",
     "--color-brand-a-sand-700": "rgb(80 81 72)",
     "--color-brand-a-sand-800": "rgb(52 52 47)",
-    "--color-brand-a-sand-900": "rgb(24 24 22)"
+    "--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)"
   },
   "typography": {
     "--font-size-md": "1rem",

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

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

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

@@ -1,16 +1,16 @@
 // Auto-generated design tokens from Figma
-// Generated on 2026-04-28T09:23:28.565Z
+// Generated on 2026-05-22T09:23:10.626Z
 
 export const tokens = {
   "colors": {
-    "--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)"
@@ -20,8 +20,8 @@ export const tokens = {
     "--brand-font-lead": "var(--font-family-serif)"
   },
   "radii": {
-    "--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)"
   }

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

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

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

@@ -0,0 +1,32 @@
+// Auto-generated design tokens from Figma
+// Generated on 2026-05-22T09:23:10.629Z
+
+export const tokens = {
+  "colors": {
+    "--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)"
+  },
+  "typography": {
+    "--brand-font-base": "var(--font-family-sans)",
+    "--brand-font-lead": "var(--font-family-serif)"
+  },
+  "radii": {
+    "--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)"
+  }
+} as const;
+
+export type ColorToken = keyof typeof tokens.colors;
+export type TypographyToken = keyof typeof tokens.typography;
+export type RadiusToken = keyof typeof tokens.radii;

package/dist/ui/index.css

@@ -6,3 +6,9 @@
 @import url("./patterns/radio.css") layer(components);
 @import url("./patterns/switch.css") layer(components);
 @import url("./patterns/badge.css") layer(components);
+@import url("./patterns/divider.css") layer(components);
+@import url("./patterns/textarea.css") layer(components);
+@import url("./patterns/avatar.css") layer(components);
+@import url("./patterns/accordion.css") layer(components);
+@import url("./patterns/tabs.css") layer(components);
+@import url("./patterns/tooltip.css") layer(components);

package/dist/ui/patterns/accordion.css

@@ -0,0 +1,81 @@
+@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;
+  }
+}

package/dist/ui/patterns/avatar.css

@@ -0,0 +1,57 @@
+@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;
+  }
+}

package/dist/ui/patterns/divider.css

@@ -0,0 +1,25 @@
+@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);
+  }
+}

package/dist/ui/patterns/tabs.css

@@ -0,0 +1,71 @@
+@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;
+  }
+}