@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/styles/theme.css

@@ -2,18 +2,172 @@
   --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
 
+  --scale-neutral-seed: oklch(0.5 0 0);
+  --scale-primary-seed: var(--primary);
+  --scale-red-seed: var(--color-red-500);
+  --scale-orange-seed: var(--color-orange-500);
+  --scale-yellow-seed: var(--color-yellow-500);
+  --scale-green-seed: var(--color-green-500);
+  --scale-blue-seed: var(--color-blue-500);
+  --scale-purple-seed: var(--color-purple-500);
+  --scale-pink-seed: var(--color-pink-500);
+
+  --scale-neutral-lightness-1: 1;
+  --scale-neutral-lightness-2: 0.97;
+  --scale-neutral-lightness-3: 0.9425;
+  --scale-neutral-lightness-4: 0.9295;
+  --scale-neutral-lightness-5: 0.91;
+  --scale-neutral-lightness-6: 0.8851;
+  --scale-neutral-lightness-7: 0.83;
+  --scale-neutral-lightness-8: 0.74;
+  --scale-neutral-lightness-9: 0.62;
+  --scale-neutral-lightness-10: 0.57;
+  --scale-neutral-lightness-11: 0.52;
+  --scale-neutral-lightness-12: 0.1448;
+  --scale-lightness-1: 0.99;
+  --scale-lightness-2: 0.975;
+  --scale-lightness-3: 0.95;
+  --scale-lightness-4: 0.92;
+  --scale-lightness-5: 0.89;
+  --scale-lightness-6: 0.85;
+  --scale-lightness-7: 0.8;
+  --scale-lightness-8: 0.72;
+  --scale-lightness-11: 0.44;
+  --scale-lightness-12: 0.34;
+  --scale-chroma-1: 0.06;
+  --scale-chroma-2: 0.12;
+  --scale-chroma-3: 0.2;
+  --scale-chroma-4: 0.28;
+  --scale-chroma-5: 0.36;
+  --scale-chroma-6: 0.45;
+  --scale-chroma-7: 0.55;
+  --scale-chroma-8: 0.7;
+  --scale-chroma-9: 1;
+  --scale-chroma-10: 1;
+  --scale-chroma-11: 1;
+  --scale-chroma-12: 0.7;
+
+  --scale-neutral-1: oklch(from var(--scale-neutral-seed) var(--scale-neutral-lightness-1) calc(c * var(--scale-chroma-1)) h);
+  --scale-neutral-2: oklch(from var(--scale-neutral-seed) var(--scale-neutral-lightness-2) calc(c * var(--scale-chroma-2)) h);
+  --scale-neutral-3: oklch(from var(--scale-neutral-seed) var(--scale-neutral-lightness-3) calc(c * var(--scale-chroma-3)) h);
+  --scale-neutral-4: oklch(from var(--scale-neutral-seed) var(--scale-neutral-lightness-4) calc(c * var(--scale-chroma-4)) h);
+  --scale-neutral-5: oklch(from var(--scale-neutral-seed) var(--scale-neutral-lightness-5) calc(c * var(--scale-chroma-5)) h);
+  --scale-neutral-6: oklch(from var(--scale-neutral-seed) var(--scale-neutral-lightness-6) calc(c * var(--scale-chroma-6)) h);
+  --scale-neutral-7: oklch(from var(--scale-neutral-seed) var(--scale-neutral-lightness-7) calc(c * var(--scale-chroma-7)) h);
+  --scale-neutral-8: oklch(from var(--scale-neutral-seed) var(--scale-neutral-lightness-8) calc(c * var(--scale-chroma-8)) h);
+  --scale-neutral-9: oklch(from var(--scale-neutral-seed) var(--scale-neutral-lightness-9) calc(c * var(--scale-chroma-9)) h);
+  --scale-neutral-10: oklch(from var(--scale-neutral-seed) var(--scale-neutral-lightness-10) calc(c * var(--scale-chroma-10)) h);
+  --scale-neutral-11: oklch(from var(--scale-neutral-seed) var(--scale-neutral-lightness-11) calc(c * var(--scale-chroma-11)) h);
+  --scale-neutral-12: oklch(from var(--scale-neutral-seed) var(--scale-neutral-lightness-12) calc(c * var(--scale-chroma-12)) h);
+  --scale-primary-1: oklch(from var(--scale-primary-seed) var(--scale-lightness-1) calc(c * var(--scale-chroma-1)) h);
+  --scale-primary-2: oklch(from var(--scale-primary-seed) var(--scale-lightness-2) calc(c * var(--scale-chroma-2)) h);
+  --scale-primary-3: oklch(from var(--scale-primary-seed) var(--scale-lightness-3) calc(c * var(--scale-chroma-3)) h);
+  --scale-primary-4: oklch(from var(--scale-primary-seed) var(--scale-lightness-4) calc(c * var(--scale-chroma-4)) h);
+  --scale-primary-5: oklch(from var(--scale-primary-seed) var(--scale-lightness-5) calc(c * var(--scale-chroma-5)) h);
+  --scale-primary-6: oklch(from var(--scale-primary-seed) var(--scale-lightness-6) calc(c * var(--scale-chroma-6)) h);
+  --scale-primary-7: oklch(from var(--scale-primary-seed) var(--scale-lightness-7) calc(c * var(--scale-chroma-7)) h);
+  --scale-primary-8: oklch(from var(--scale-primary-seed) var(--scale-lightness-8) calc(c * var(--scale-chroma-8)) h);
+  --scale-primary-9: var(--scale-primary-seed);
+  --scale-primary-10: oklch(from var(--scale-primary-seed) calc(l - 0.05) c h);
+  --scale-primary-11: oklch(from var(--scale-primary-seed) var(--scale-lightness-11) calc(c * var(--scale-chroma-11)) h);
+  --scale-primary-12: oklch(from var(--scale-primary-seed) var(--scale-lightness-12) calc(c * var(--scale-chroma-12)) h);
+  --scale-red-1: oklch(from var(--scale-red-seed) var(--scale-lightness-1) calc(c * var(--scale-chroma-1)) h);
+  --scale-red-2: oklch(from var(--scale-red-seed) var(--scale-lightness-2) calc(c * var(--scale-chroma-2)) h);
+  --scale-red-3: oklch(from var(--scale-red-seed) var(--scale-lightness-3) calc(c * var(--scale-chroma-3)) h);
+  --scale-red-4: oklch(from var(--scale-red-seed) var(--scale-lightness-4) calc(c * var(--scale-chroma-4)) h);
+  --scale-red-5: oklch(from var(--scale-red-seed) var(--scale-lightness-5) calc(c * var(--scale-chroma-5)) h);
+  --scale-red-6: oklch(from var(--scale-red-seed) var(--scale-lightness-6) calc(c * var(--scale-chroma-6)) h);
+  --scale-red-7: oklch(from var(--scale-red-seed) var(--scale-lightness-7) calc(c * var(--scale-chroma-7)) h);
+  --scale-red-8: oklch(from var(--scale-red-seed) var(--scale-lightness-8) calc(c * var(--scale-chroma-8)) h);
+  --scale-red-9: var(--scale-red-seed);
+  --scale-red-10: oklch(from var(--scale-red-seed) calc(l - 0.05) c h);
+  --scale-red-11: oklch(from var(--scale-red-seed) var(--scale-lightness-11) calc(c * var(--scale-chroma-11)) h);
+  --scale-red-12: oklch(from var(--scale-red-seed) var(--scale-lightness-12) calc(c * var(--scale-chroma-12)) h);
+  --scale-orange-1: oklch(from var(--scale-orange-seed) var(--scale-lightness-1) calc(c * var(--scale-chroma-1)) h);
+  --scale-orange-2: oklch(from var(--scale-orange-seed) var(--scale-lightness-2) calc(c * var(--scale-chroma-2)) h);
+  --scale-orange-3: oklch(from var(--scale-orange-seed) var(--scale-lightness-3) calc(c * var(--scale-chroma-3)) h);
+  --scale-orange-4: oklch(from var(--scale-orange-seed) var(--scale-lightness-4) calc(c * var(--scale-chroma-4)) h);
+  --scale-orange-5: oklch(from var(--scale-orange-seed) var(--scale-lightness-5) calc(c * var(--scale-chroma-5)) h);
+  --scale-orange-6: oklch(from var(--scale-orange-seed) var(--scale-lightness-6) calc(c * var(--scale-chroma-6)) h);
+  --scale-orange-7: oklch(from var(--scale-orange-seed) var(--scale-lightness-7) calc(c * var(--scale-chroma-7)) h);
+  --scale-orange-8: oklch(from var(--scale-orange-seed) var(--scale-lightness-8) calc(c * var(--scale-chroma-8)) h);
+  --scale-orange-9: var(--scale-orange-seed);
+  --scale-orange-10: oklch(from var(--scale-orange-seed) calc(l - 0.05) c h);
+  --scale-orange-11: oklch(from var(--scale-orange-seed) var(--scale-lightness-11) calc(c * var(--scale-chroma-11)) h);
+  --scale-orange-12: oklch(from var(--scale-orange-seed) var(--scale-lightness-12) calc(c * var(--scale-chroma-12)) h);
+  --scale-yellow-1: oklch(from var(--scale-yellow-seed) var(--scale-lightness-1) calc(c * var(--scale-chroma-1)) h);
+  --scale-yellow-2: oklch(from var(--scale-yellow-seed) var(--scale-lightness-2) calc(c * var(--scale-chroma-2)) h);
+  --scale-yellow-3: oklch(from var(--scale-yellow-seed) var(--scale-lightness-3) calc(c * var(--scale-chroma-3)) h);
+  --scale-yellow-4: oklch(from var(--scale-yellow-seed) var(--scale-lightness-4) calc(c * var(--scale-chroma-4)) h);
+  --scale-yellow-5: oklch(from var(--scale-yellow-seed) var(--scale-lightness-5) calc(c * var(--scale-chroma-5)) h);
+  --scale-yellow-6: oklch(from var(--scale-yellow-seed) var(--scale-lightness-6) calc(c * var(--scale-chroma-6)) h);
+  --scale-yellow-7: oklch(from var(--scale-yellow-seed) var(--scale-lightness-7) calc(c * var(--scale-chroma-7)) h);
+  --scale-yellow-8: oklch(from var(--scale-yellow-seed) var(--scale-lightness-8) calc(c * var(--scale-chroma-8)) h);
+  --scale-yellow-9: var(--scale-yellow-seed);
+  --scale-yellow-10: oklch(from var(--scale-yellow-seed) calc(l - 0.05) c h);
+  --scale-yellow-11: oklch(from var(--scale-yellow-seed) var(--scale-lightness-11) calc(c * var(--scale-chroma-11)) h);
+  --scale-yellow-12: oklch(from var(--scale-yellow-seed) var(--scale-lightness-12) calc(c * var(--scale-chroma-12)) h);
+  --scale-green-1: oklch(from var(--scale-green-seed) var(--scale-lightness-1) calc(c * var(--scale-chroma-1)) h);
+  --scale-green-2: oklch(from var(--scale-green-seed) var(--scale-lightness-2) calc(c * var(--scale-chroma-2)) h);
+  --scale-green-3: oklch(from var(--scale-green-seed) var(--scale-lightness-3) calc(c * var(--scale-chroma-3)) h);
+  --scale-green-4: oklch(from var(--scale-green-seed) var(--scale-lightness-4) calc(c * var(--scale-chroma-4)) h);
+  --scale-green-5: oklch(from var(--scale-green-seed) var(--scale-lightness-5) calc(c * var(--scale-chroma-5)) h);
+  --scale-green-6: oklch(from var(--scale-green-seed) var(--scale-lightness-6) calc(c * var(--scale-chroma-6)) h);
+  --scale-green-7: oklch(from var(--scale-green-seed) var(--scale-lightness-7) calc(c * var(--scale-chroma-7)) h);
+  --scale-green-8: oklch(from var(--scale-green-seed) var(--scale-lightness-8) calc(c * var(--scale-chroma-8)) h);
+  --scale-green-9: var(--scale-green-seed);
+  --scale-green-10: oklch(from var(--scale-green-seed) calc(l - 0.05) c h);
+  --scale-green-11: oklch(from var(--scale-green-seed) var(--scale-lightness-11) calc(c * var(--scale-chroma-11)) h);
+  --scale-green-12: oklch(from var(--scale-green-seed) var(--scale-lightness-12) calc(c * var(--scale-chroma-12)) h);
+  --scale-blue-1: oklch(from var(--scale-blue-seed) var(--scale-lightness-1) calc(c * var(--scale-chroma-1)) h);
+  --scale-blue-2: oklch(from var(--scale-blue-seed) var(--scale-lightness-2) calc(c * var(--scale-chroma-2)) h);
+  --scale-blue-3: oklch(from var(--scale-blue-seed) var(--scale-lightness-3) calc(c * var(--scale-chroma-3)) h);
+  --scale-blue-4: oklch(from var(--scale-blue-seed) var(--scale-lightness-4) calc(c * var(--scale-chroma-4)) h);
+  --scale-blue-5: oklch(from var(--scale-blue-seed) var(--scale-lightness-5) calc(c * var(--scale-chroma-5)) h);
+  --scale-blue-6: oklch(from var(--scale-blue-seed) var(--scale-lightness-6) calc(c * var(--scale-chroma-6)) h);
+  --scale-blue-7: oklch(from var(--scale-blue-seed) var(--scale-lightness-7) calc(c * var(--scale-chroma-7)) h);
+  --scale-blue-8: oklch(from var(--scale-blue-seed) var(--scale-lightness-8) calc(c * var(--scale-chroma-8)) h);
+  --scale-blue-9: var(--scale-blue-seed);
+  --scale-blue-10: oklch(from var(--scale-blue-seed) calc(l - 0.05) c h);
+  --scale-blue-11: oklch(from var(--scale-blue-seed) var(--scale-lightness-11) calc(c * var(--scale-chroma-11)) h);
+  --scale-blue-12: oklch(from var(--scale-blue-seed) var(--scale-lightness-12) calc(c * var(--scale-chroma-12)) h);
+  --scale-purple-1: oklch(from var(--scale-purple-seed) var(--scale-lightness-1) calc(c * var(--scale-chroma-1)) h);
+  --scale-purple-2: oklch(from var(--scale-purple-seed) var(--scale-lightness-2) calc(c * var(--scale-chroma-2)) h);
+  --scale-purple-3: oklch(from var(--scale-purple-seed) var(--scale-lightness-3) calc(c * var(--scale-chroma-3)) h);
+  --scale-purple-4: oklch(from var(--scale-purple-seed) var(--scale-lightness-4) calc(c * var(--scale-chroma-4)) h);
+  --scale-purple-5: oklch(from var(--scale-purple-seed) var(--scale-lightness-5) calc(c * var(--scale-chroma-5)) h);
+  --scale-purple-6: oklch(from var(--scale-purple-seed) var(--scale-lightness-6) calc(c * var(--scale-chroma-6)) h);
+  --scale-purple-7: oklch(from var(--scale-purple-seed) var(--scale-lightness-7) calc(c * var(--scale-chroma-7)) h);
+  --scale-purple-8: oklch(from var(--scale-purple-seed) var(--scale-lightness-8) calc(c * var(--scale-chroma-8)) h);
+  --scale-purple-9: var(--scale-purple-seed);
+  --scale-purple-10: oklch(from var(--scale-purple-seed) calc(l - 0.05) c h);
+  --scale-purple-11: oklch(from var(--scale-purple-seed) var(--scale-lightness-11) calc(c * var(--scale-chroma-11)) h);
+  --scale-purple-12: oklch(from var(--scale-purple-seed) var(--scale-lightness-12) calc(c * var(--scale-chroma-12)) h);
+  --scale-pink-1: oklch(from var(--scale-pink-seed) var(--scale-lightness-1) calc(c * var(--scale-chroma-1)) h);
+  --scale-pink-2: oklch(from var(--scale-pink-seed) var(--scale-lightness-2) calc(c * var(--scale-chroma-2)) h);
+  --scale-pink-3: oklch(from var(--scale-pink-seed) var(--scale-lightness-3) calc(c * var(--scale-chroma-3)) h);
+  --scale-pink-4: oklch(from var(--scale-pink-seed) var(--scale-lightness-4) calc(c * var(--scale-chroma-4)) h);
+  --scale-pink-5: oklch(from var(--scale-pink-seed) var(--scale-lightness-5) calc(c * var(--scale-chroma-5)) h);
+  --scale-pink-6: oklch(from var(--scale-pink-seed) var(--scale-lightness-6) calc(c * var(--scale-chroma-6)) h);
+  --scale-pink-7: oklch(from var(--scale-pink-seed) var(--scale-lightness-7) calc(c * var(--scale-chroma-7)) h);
+  --scale-pink-8: oklch(from var(--scale-pink-seed) var(--scale-lightness-8) calc(c * var(--scale-chroma-8)) h);
+  --scale-pink-9: var(--scale-pink-seed);
+  --scale-pink-10: oklch(from var(--scale-pink-seed) calc(l - 0.05) c h);
+  --scale-pink-11: oklch(from var(--scale-pink-seed) var(--scale-lightness-11) calc(c * var(--scale-chroma-11)) h);
+  --scale-pink-12: oklch(from var(--scale-pink-seed) var(--scale-lightness-12) calc(c * var(--scale-chroma-12)) h);
+
   --primary: oklch(0.2046 0 0);
   --primary-foreground: oklch(0.9851 0 0);
-  --foreground: oklch(0.1448 0 0);
-  --secondary-foreground: oklch(0.1448 0 0);
-  --accent-foreground: oklch(0.1448 0 0);
+  --foreground: var(--scale-neutral-12);
+  --secondary-foreground: var(--scale-neutral-12);
+  --accent-foreground: var(--scale-neutral-12);
 
-  --background: oklch(1 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.1448 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.1448 0 0);
-  --canvas: oklch(1 0 0);
+  --background: var(--scale-neutral-1);
+  --card: var(--scale-neutral-1);
+  --card-foreground: var(--scale-neutral-12);
+  --popover: var(--scale-neutral-1);
+  --popover-foreground: var(--scale-neutral-12);
+  --canvas: var(--scale-neutral-1);
 
   --radius: 0px;
   --shadow-size: 0;
@@ -27,14 +181,14 @@
   --padding-x: 16px;
   --padding-y: 10px;
 
-  --muted: oklch(0.9425 0 0);
-  --muted-foreground: oklch(0.52 0 0);
-  --secondary: oklch(0.9425 0 0);
-  --accent: oklch(0.9295 0 0);
+  --muted: var(--scale-neutral-3);
+  --muted-foreground: var(--scale-neutral-11);
+  --secondary: var(--scale-neutral-3);
+  --accent: var(--scale-neutral-4);
   --destructive: oklch(0.568 0.1961 32);
   --destructive-foreground: oklch(0.9852 0.0058 85);
-  --border: oklch(0.8851 0 0 / var(--ring-opacity));
-  --input: oklch(0.8851 0 0);
+  --border: oklch(from var(--scale-neutral-6) l c h / var(--ring-opacity));
+  --input: var(--scale-neutral-6);
   --ring: oklch(0.5 0 0);
   --text-label: 0.75rem;
   --radius-control: calc(var(--radius) * 2);
@@ -47,6 +201,7 @@
   --duration-fast: 150ms;
   --duration-base: 200ms;
   --duration-slow: 300ms;
+  --duration-loop: 1000ms;
   --ease-standard: cubic-bezier(0.2, 0, 0, 1);
   --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
   --z-overlay: 70;
@@ -55,20 +210,30 @@
   --z-tooltip: 90;
   --z-toast: 95;
   --popover-padding: 0.25rem;
+  --composer-padding: calc(var(--spacing) * 2.5);
   --font-body: var(--font-sans);
   --font-display: var(--font-sans);
-  --primary-text: oklch(from var(--primary) 0.48 c h);
+  --primary-text: var(--scale-primary-11);
   --destructive-text: oklch(from var(--destructive) 0.48 c h);
+  --success-text: var(--scale-green-11);
+  --warning-text: var(--scale-yellow-11);
+  --info-text: var(--scale-blue-11);
   --ring-opacity: 1;
-  --focus-ring: var(--ring);
+  --focus-ring: oklch(from var(--ring) l c h / calc(alpha * 0.7));
   --focus-ring-width: 2px;
   --focus-ring-style: solid;
   --focus-ring-offset: 2px;
 
   --control-rim: var(--border);
   --control-rim-width: 1px;
+  --control-boundary: oklch(from var(--foreground) l c h / 0.6);
+  --control-fill: oklch(from var(--card) l c h / 0.72);
   --hover-fill: oklch(from var(--foreground) l c h / 0.06);
   --active-fill: oklch(from var(--foreground) l c h / 0.08);
+  --image-outline: oklch(0 0 0 / 0.1);
+  --disabled-opacity: 0.45;
+  --touch-target: 44px;
+  --target-min: 24px;
 
   --text-micro: 0.625rem;
   --text-caption: 0.6875rem;
@@ -91,10 +256,15 @@
   --text-display--line-height: 1.1;
   --text-display--font-weight: 600;
   --text-display--letter-spacing: -0.026em;
+  --text-input-min: 16px;
 
   --corner-shape: round;
   --corner-radius-fit: 0.5;
   --radius-popover: calc(var(--radius-popup-item-fit) + clamp(0px, var(--radius-popup-item-fit) * 1000, var(--popover-padding)));
+  --radius-composer: calc(
+    min(var(--radius-control), calc(var(--control-h-xs) / 2)) +
+    clamp(0px, min(var(--radius-control), calc(var(--control-h-xs) / 2)) * 1000, var(--composer-padding) + var(--control-rim-width))
+  );
 
   --shadow-highlight: oklch(1 0 0 / 0.62);
   --shadow-y: 1;
@@ -112,42 +282,43 @@
   --badge-neutral-foreground: var(--foreground);
   --badge-neutral-border: oklch(from var(--foreground) l c h / 0.1);
   --badge-neutral-hover: oklch(from var(--foreground) l c h / 0.12);
-  --badge-red: oklch(from var(--color-red-500) l c h / 0.14);
-  --badge-red-foreground: var(--color-red-800);
-  --badge-red-border: oklch(from var(--color-red-500) l c h / 0.18);
-  --badge-red-hover: oklch(from var(--color-red-500) l c h / 0.2);
-  --badge-orange: oklch(from var(--color-orange-500) l c h / 0.16);
-  --badge-orange-foreground: var(--color-orange-800);
-  --badge-orange-border: oklch(from var(--color-orange-500) l c h / 0.2);
-  --badge-orange-hover: oklch(from var(--color-orange-500) l c h / 0.24);
-  --badge-yellow: oklch(from var(--color-yellow-400) l c h / 0.2);
-  --badge-yellow-foreground: var(--color-yellow-900);
-  --badge-yellow-border: oklch(from var(--color-yellow-400) l c h / 0.24);
-  --badge-yellow-hover: oklch(from var(--color-yellow-400) l c h / 0.28);
-  --badge-green: oklch(from var(--color-green-500) l c h / 0.16);
-  --badge-green-foreground: var(--color-green-800);
-  --badge-green-border: oklch(from var(--color-green-500) l c h / 0.2);
-  --badge-green-hover: oklch(from var(--color-green-500) l c h / 0.24);
-  --badge-blue: oklch(from var(--color-blue-500) l c h / 0.16);
-  --badge-blue-foreground: var(--color-blue-800);
-  --badge-blue-border: oklch(from var(--color-blue-500) l c h / 0.2);
-  --badge-blue-hover: oklch(from var(--color-blue-500) l c h / 0.24);
-  --badge-purple: oklch(from var(--color-purple-500) l c h / 0.16);
-  --badge-purple-foreground: var(--color-purple-800);
-  --badge-purple-border: oklch(from var(--color-purple-500) l c h / 0.2);
-  --badge-purple-hover: oklch(from var(--color-purple-500) l c h / 0.24);
-  --badge-pink: oklch(from var(--color-pink-500) l c h / 0.16);
-  --badge-pink-foreground: var(--color-pink-800);
-  --badge-pink-border: oklch(from var(--color-pink-500) l c h / 0.2);
-  --badge-pink-hover: oklch(from var(--color-pink-500) l c h / 0.24);
+  --badge-fill-alpha: 0.16;
+  --badge-border-alpha: 0.2;
+  --badge-hover-alpha: 0.24;
+  --badge-red: oklch(from var(--scale-red-9) l c h / var(--badge-fill-alpha));
+  --badge-red-foreground: var(--scale-red-11);
+  --badge-red-border: oklch(from var(--scale-red-9) l c h / var(--badge-border-alpha));
+  --badge-red-hover: oklch(from var(--scale-red-9) l c h / var(--badge-hover-alpha));
+  --badge-orange: oklch(from var(--scale-orange-9) l c h / var(--badge-fill-alpha));
+  --badge-orange-foreground: var(--scale-orange-11);
+  --badge-orange-border: oklch(from var(--scale-orange-9) l c h / var(--badge-border-alpha));
+  --badge-orange-hover: oklch(from var(--scale-orange-9) l c h / var(--badge-hover-alpha));
+  --badge-yellow: oklch(from var(--scale-yellow-9) l c h / var(--badge-fill-alpha));
+  --badge-yellow-foreground: var(--scale-yellow-11);
+  --badge-yellow-border: oklch(from var(--scale-yellow-9) l c h / var(--badge-border-alpha));
+  --badge-yellow-hover: oklch(from var(--scale-yellow-9) l c h / var(--badge-hover-alpha));
+  --badge-green: oklch(from var(--scale-green-9) l c h / var(--badge-fill-alpha));
+  --badge-green-foreground: var(--scale-green-11);
+  --badge-green-border: oklch(from var(--scale-green-9) l c h / var(--badge-border-alpha));
+  --badge-green-hover: oklch(from var(--scale-green-9) l c h / var(--badge-hover-alpha));
+  --badge-blue: oklch(from var(--scale-blue-9) l c h / var(--badge-fill-alpha));
+  --badge-blue-foreground: var(--scale-blue-11);
+  --badge-blue-border: oklch(from var(--scale-blue-9) l c h / var(--badge-border-alpha));
+  --badge-blue-hover: oklch(from var(--scale-blue-9) l c h / var(--badge-hover-alpha));
+  --badge-purple: oklch(from var(--scale-purple-9) l c h / var(--badge-fill-alpha));
+  --badge-purple-foreground: var(--scale-purple-11);
+  --badge-purple-border: oklch(from var(--scale-purple-9) l c h / var(--badge-border-alpha));
+  --badge-purple-hover: oklch(from var(--scale-purple-9) l c h / var(--badge-hover-alpha));
+  --badge-pink: oklch(from var(--scale-pink-9) l c h / var(--badge-fill-alpha));
+  --badge-pink-foreground: var(--scale-pink-11);
+  --badge-pink-border: oklch(from var(--scale-pink-9) l c h / var(--badge-border-alpha));
+  --badge-pink-hover: oklch(from var(--scale-pink-9) l c h / var(--badge-hover-alpha));
   --radius-sm: calc(var(--radius) * 0.6);
   --radius-md: calc(var(--radius) * 0.8);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) * 1.4);
   --radius-2xl: calc(var(--radius) * 1.6);
   --radius-popup-item-fit: min(var(--radius-popup-item), calc(var(--control-h-xs) / 2));
-  --nest-safe: 1px;
-  --nest-corner-ratio: 3.41421356;
   --control-h-md: var(--control-h);
   --sidebar: var(--canvas);
   --sidebar-foreground: var(--foreground);
@@ -156,67 +327,51 @@
   --sidebar-accent: var(--hover-fill);
   --sidebar-accent-foreground: var(--foreground);
   --sidebar-border: var(--border);
-  --sidebar-ring: var(--ring);
+  --sidebar-ring: var(--focus-ring);
 }
 
 :where(.dark:root, .dark[data-skin], .dark [data-skin]) {
+  --scale-neutral-lightness-1: 0.1448;
+  --scale-neutral-lightness-2: 0.2046;
+  --scale-neutral-lightness-3: 0.2668;
+  --scale-neutral-lightness-4: 0.2864;
+  --scale-neutral-lightness-5: 0.297;
+  --scale-neutral-lightness-6: 0.3082;
+  --scale-neutral-lightness-7: 0.37;
+  --scale-neutral-lightness-8: 0.46;
+  --scale-neutral-lightness-9: 0.56;
+  --scale-neutral-lightness-10: 0.62;
+  --scale-neutral-lightness-11: 0.7405;
+  --scale-neutral-lightness-12: 0.9851;
+  --scale-lightness-1: 0.18;
+  --scale-lightness-2: 0.21;
+  --scale-lightness-3: 0.25;
+  --scale-lightness-4: 0.29;
+  --scale-lightness-5: 0.33;
+  --scale-lightness-6: 0.38;
+  --scale-lightness-7: 0.44;
+  --scale-lightness-8: 0.52;
+  --scale-lightness-11: 0.86;
+  --scale-lightness-12: 0.93;
+
   --primary: oklch(0.9851 0 0);
   --primary-foreground: oklch(0.2046 0 0);
-  --foreground: oklch(0.9851 0 0);
-  --card-foreground: oklch(0.9851 0 0);
-  --popover-foreground: oklch(0.9851 0 0);
-  --secondary-foreground: oklch(0.9851 0 0);
-  --accent-foreground: oklch(0.9851 0 0);
-  --background: oklch(0.1448 0 0);
-  --card: oklch(0.2046 0 0);
-  --popover: oklch(0.2046 0 0);
-  --canvas: oklch(0.1448 0 0);
-
-  --muted: oklch(0.2668 0 0);
-  --muted-foreground: oklch(0.7405 0 0);
-  --secondary: oklch(0.2668 0 0);
-  --accent: oklch(0.2864 0 0);
+  --card: var(--scale-neutral-2);
+  --popover: var(--scale-neutral-2);
+
   --destructive: oklch(0.551 0.1799 32);
   --destructive-foreground: oklch(0.9645 0.008 84);
-  --border: oklch(0.3082 0 0 / var(--ring-opacity));
-  --input: oklch(0.3082 0 0);
   --ring: oklch(0.66 0 0);
-  --focus-ring: oklch(0.66 0 0);
   --shadow-color: oklch(0 0 0);
-  --primary-text: oklch(from var(--primary) 0.78 c h);
   --destructive-text: oklch(from var(--destructive) 0.78 c h);
   --shadow-highlight: oklch(1 0 0 / 0.055);
   --badge-neutral: oklch(from var(--foreground) l c h / 0.1);
   --badge-neutral-border: oklch(from var(--foreground) l c h / 0.12);
   --badge-neutral-hover: oklch(from var(--foreground) l c h / 0.14);
-  --badge-red: oklch(from var(--color-red-400) l c h / 0.18);
-  --badge-red-foreground: var(--color-red-300);
-  --badge-red-border: oklch(from var(--color-red-400) l c h / 0.22);
-  --badge-red-hover: oklch(from var(--color-red-400) l c h / 0.26);
-  --badge-orange: oklch(from var(--color-orange-400) l c h / 0.2);
-  --badge-orange-foreground: var(--color-orange-300);
-  --badge-orange-border: oklch(from var(--color-orange-400) l c h / 0.24);
-  --badge-orange-hover: oklch(from var(--color-orange-400) l c h / 0.28);
-  --badge-yellow: oklch(from var(--color-yellow-400) l c h / 0.22);
-  --badge-yellow-foreground: var(--color-yellow-300);
-  --badge-yellow-border: oklch(from var(--color-yellow-400) l c h / 0.26);
-  --badge-yellow-hover: oklch(from var(--color-yellow-400) l c h / 0.3);
-  --badge-green: oklch(from var(--color-green-400) l c h / 0.2);
-  --badge-green-foreground: var(--color-green-300);
-  --badge-green-border: oklch(from var(--color-green-400) l c h / 0.24);
-  --badge-green-hover: oklch(from var(--color-green-400) l c h / 0.28);
-  --badge-blue: oklch(from var(--color-blue-400) l c h / 0.2);
-  --badge-blue-foreground: var(--color-blue-300);
-  --badge-blue-border: oklch(from var(--color-blue-400) l c h / 0.24);
-  --badge-blue-hover: oklch(from var(--color-blue-400) l c h / 0.28);
-  --badge-purple: oklch(from var(--color-purple-400) l c h / 0.2);
-  --badge-purple-foreground: var(--color-purple-300);
-  --badge-purple-border: oklch(from var(--color-purple-400) l c h / 0.24);
-  --badge-purple-hover: oklch(from var(--color-purple-400) l c h / 0.28);
-  --badge-pink: oklch(from var(--color-pink-400) l c h / 0.2);
-  --badge-pink-foreground: var(--color-pink-300);
-  --badge-pink-border: oklch(from var(--color-pink-400) l c h / 0.24);
-  --badge-pink-hover: oklch(from var(--color-pink-400) l c h / 0.28);
+  --badge-fill-alpha: 0.2;
+  --badge-border-alpha: 0.24;
+  --badge-hover-alpha: 0.28;
+  --image-outline: oklch(1 0 0 / 0.1);
 }
 
 @custom-variant dark (&:is(.dark *));
@@ -231,7 +386,9 @@
     --duration-slow: 0ms !important;
   }
 
-  :where(:root, :root *, [data-skin], [data-skin] *, [data-skin]::before, [data-skin]::after, [data-skin] *::before, [data-skin] *::after) {
+  :where(:root, :root *, [data-skin], [data-skin] *):where(:not([data-motion-essential], [data-motion-essential] *)),
+  :where(:root, :root *, [data-skin], [data-skin] *):where(:not([data-motion-essential], [data-motion-essential] *))::before,
+  :where(:root, :root *, [data-skin], [data-skin] *):where(:not([data-motion-essential], [data-motion-essential] *))::after {
     scroll-behavior: auto !important;
     transition-delay: 0ms !important;
     transition-duration: 0ms !important;
@@ -249,14 +406,9 @@
   --duration-slow: 0ms !important;
 }
 
-:where(
-  [data-motion="reduced"],
-  [data-motion="reduced"] *,
-  [data-motion="reduced"]::before,
-  [data-motion="reduced"]::after,
-  [data-motion="reduced"] *::before,
-  [data-motion="reduced"] *::after
-) {
+:where([data-motion="reduced"], [data-motion="reduced"] *):where(:not([data-motion-essential], [data-motion-essential] *)),
+:where([data-motion="reduced"], [data-motion="reduced"] *):where(:not([data-motion-essential], [data-motion-essential] *))::before,
+:where([data-motion="reduced"], [data-motion="reduced"] *):where(:not([data-motion-essential], [data-motion-essential] *))::after {
   scroll-behavior: auto !important;
   transition-delay: 0ms !important;
   transition-duration: 0ms !important;
@@ -266,6 +418,10 @@
 }
 /* biome-ignore-end lint/complexity/noImportantStyles: Reduced motion must override skin and inline motion. */
 
+@theme static {
+  --breakpoint-lg: 64rem;
+}
+
 @theme inline {
   --color-background: var(--background);
   --color-canvas: var(--canvas);
@@ -286,6 +442,9 @@
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
   --color-destructive-text: var(--destructive-text);
+  --color-success-text: var(--success-text);
+  --color-warning-text: var(--warning-text);
+  --color-info-text: var(--info-text);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
@@ -420,6 +579,10 @@
     calc(12px * var(--shadow-size) * var(--shadow-ambient-multiplier)) calc(-2.5px * var(--shadow-size) * var(--shadow-ambient-multiplier))
     oklch(from var(--shadow-color) l c h / calc(0.05 * var(--shadow-opacity)));
 
+  --shadow-overlay:
+    0 0 16px -4px oklch(from var(--shadow-color) l c h / calc(0.03 * var(--shadow-opacity))),
+    0 0 56px -8px oklch(from var(--shadow-color) l c h / calc(0.07 * var(--shadow-opacity)));
+
   --shadow-inset:
     inset 0 calc(1px * var(--shadow-size) * var(--shadow-control-multiplier) * var(--shadow-y))
     calc(2px * var(--shadow-size) * var(--shadow-control-multiplier))
@@ -452,6 +615,10 @@
         --radius-popup-item: calc(var(--radius-control) * 0.6);
         --radius-popup-item-fit: min(var(--radius-popup-item), calc(var(--control-h-xs) / 2));
         --radius-popover: calc(var(--radius-popup-item-fit) + clamp(0px, var(--radius-popup-item-fit) * 1000, var(--popover-padding)));
+        --radius-composer: calc(
+          min(var(--radius-control), calc(var(--control-h-xs) / 2)) +
+          clamp(0px, min(var(--radius-control), calc(var(--control-h-xs) / 2)) * 1000, var(--composer-padding) + var(--control-rim-width))
+        );
 
         --radius-sm: calc(var(--radius) * 0.6 * var(--corner-radius-fit));
         --radius-md: calc(var(--radius) * 0.8 * var(--corner-radius-fit));
@@ -497,22 +664,35 @@
 
 @layer components {
   :where([data-control-family]):focus-visible,
-  :where([data-control-family][data-control="true"]):has(:focus-visible) {
+  :where([data-control-family][data-control="true"]):has(:focus-visible),
+  :where([data-control-family][data-focus-ring="within"]):has(:focus-visible) {
     outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring);
     outline-offset: var(--focus-ring-offset);
   }
 
-  :where([data-control-family][data-control="true"] [data-control-family]):focus-visible {
+  :where(
+    [data-control-family][data-control="true"] [data-control-family],
+    [data-control-family][data-focus-ring="within"] [data-control-family]
+  ):focus-visible {
     outline-width: 0;
   }
 
+  :where([data-control-family][data-highlighted]):focus-visible {
+    outline-offset: calc(var(--focus-ring-width) * -1);
+  }
+
   @media (forced-colors: active) {
     :where([data-control-family]):focus-visible,
-    :where([data-control-family][data-control="true"]):has(:focus-visible) {
-      outline-color: transparent;
+    :where([data-control-family][data-control="true"]):has(:focus-visible),
+    :where([data-control-family][data-focus-ring="within"]):has(:focus-visible) {
+      outline-color: Highlight;
     }
   }
 
+  :where([data-icon-dir="inline"]:dir(rtl)) {
+    scale: -1 1;
+  }
+
   :where([data-control-ui="chat-message"][data-slot="root"], [data-control-ui="chat-composer"][data-slot="root"]) {
     opacity: 1;
     filter: none;

package/dist/task-list.d.ts

@@ -3,13 +3,16 @@ import { TaskListKnobStyle } from "./knob-contracts/task-list-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/task-list.d.ts
 export type TaskStatus = "pending" | "active" | "completed";
+export type TaskStatusLabels = Record<TaskStatus, string>;
+export declare const taskStatusLabels: TaskStatusLabels;
 export type TaskListProps = Omit<CollapsibleProps, "style"> & {
+  statusLabels?: Partial<TaskStatusLabels>;
   style?: CSSProperties & TaskListKnobStyle;
 };
 type TaskListStyleProps<Props, Style> = Omit<Props, "style"> & {
   style?: CSSProperties & Style;
 };
-export declare function TaskList({ className, children, ...props }: TaskListProps): import("react").JSX.Element;
+export declare function TaskList({ statusLabels, className, children, ...props }: TaskListProps): import("react").JSX.Element;
 export type TaskListTriggerProps = TaskListStyleProps<ComponentProps<"button">, TaskListKnobStyle>;
 export declare function TaskListTrigger({ className, children, ...props }: TaskListTriggerProps): import("react").JSX.Element;
 export type TaskListProgressProps = TaskListStyleProps<ComponentProps<"span">, TaskListKnobStyle>;