@ctrl-ui/react 0.8.5 → 0.8.7

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);
@@ -55,10 +209,14 @@
   --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-width: 2px;
@@ -67,6 +225,7 @@
 
   --control-rim: var(--border);
   --control-rim-width: 1px;
+  --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);
 
@@ -95,6 +254,10 @@
   --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 +275,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);
@@ -160,63 +324,47 @@
 }
 
 :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;
 }
 
 @custom-variant dark (&:is(.dark *));
@@ -286,6 +434,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 +571,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 +607,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));

package/dist/ui/alert-dialog.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/ui/autocomplete.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { ScrollArea } from "./scroll-area.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
@@ -120,6 +120,10 @@ function AutocompleteItem({ className, children, disabled, ...props }) {
 		className: cn(popupItemStructureClasses, className),
 		...props,
 		children: /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "autocomplete",
+			"data-control-family": "popup",
+			"data-popup-kind": "autocomplete",
+			"data-slot": "item-text",
 			className: "flex min-w-0 flex-1 items-center truncate",
 			children
 		})

package/dist/ui/button.js

@@ -1,11 +1,11 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { skinAdornment } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { Children, Fragment, createContext, isValidElement, useContext } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Button as Button$1 } from "@base-ui/react/button";
 import { useRender } from "@base-ui/react/use-render";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/button.tsx
 const ButtonTrackContext = createContext(false);
 const buttonShapes = ["default", "circle"];

package/dist/ui/checkbox-group.js

@@ -25,7 +25,7 @@ function CheckboxGroupItem({ className, htmlFor, children, ...props }) {
 		"data-control-ui": "checkbox-group",
 		"data-slot": "item",
 		"data-track-item": "",
-		className: cn("flex cursor-pointer items-start gap-2.5 rounded-(--radius-control) p-2 text-body has-[[data-disabled]]:cursor-not-allowed", className),
+		className: cn("flex cursor-pointer items-start gap-2.5 rounded-(--radius-control) p-2 text-body has-[[data-disabled]]:cursor-not-allowed [&>[data-control-family=choice]]:mt-[calc((1lh_-_var(--spacing)*4)/2)]", className),
 		...props,
 		children
 	});

package/dist/ui/code-diff.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { ScrollArea } from "./scroll-area.js";
 import { highlightToTokens, mergeCodeTokenLineWithEmphasis } from "../lib/code-tokens.js";
+import { ScrollArea } from "./scroll-area.js";
 import { CodeCopy, CodeFloatingCopy, CodeTokenLine } from "./code.js";
 import { buildDiffFromFiles, buildDiffFromPatch, diffRunEnd } from "../lib/diff.js";
 import { useEffect, useMemo, useRef, useState } from "react";

package/dist/ui/code.js

@@ -1,9 +1,9 @@
 "use client";
-import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard.js";
 import { cn } from "../lib/cn.js";
 import { Button } from "./button.js";
-import { ScrollArea } from "./scroll-area.js";
+import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard.js";
 import { highlightToTokens } from "../lib/code-tokens.js";
+import { ScrollArea } from "./scroll-area.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
 import { Children, createContext, isValidElement, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -104,7 +104,7 @@ function CodeCopy({ value, copiedLabel, copiedAriaLabel = "Copied", children, cl
 function CodeFloatingCopy({ className, ...props }) {
 	return /* @__PURE__ */ jsx(CodeCopy, {
 		"data-code-floating": "true",
-		className: cn("absolute top-2 right-2 z-10", className),
+		className: cn("absolute z-10", className),
 		...props
 	});
 }

package/dist/ui/collapsible.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { useRender } from "@base-ui/react/use-render";
 import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
 //#region src/ui/collapsible.tsx
 function CollapsibleTriggerElement({ triggerProps, open, render, className, children }) {

package/dist/ui/color-picker.js

@@ -1,12 +1,12 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
+import { useColorArea } from "../hooks/use-color-area.js";
 import { formatColor, getChannels, hsvaToRgba, parseColor, pointToHueSat, pointToSaturationValue, setChannel } from "../lib/color.js";
 import { TARGET_RATIO, contrastOf, fixColorForContrast, nextFixLevel, wcagLevels } from "../lib/contrast.js";
-import { useColorArea } from "../hooks/use-color-area.js";
 import { NumberField, NumberFieldGroup, NumberFieldInput } from "./number-field.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
 import { createContext, useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";

package/dist/ui/combobox-disabled-selection.d.ts

@@ -1,4 +1,4 @@
 //#region src/ui/combobox-disabled-selection.d.ts
-export declare function shouldAcceptComboboxValueChange<Value>(value: Value | null, disabledValues: ReadonlySet<unknown>): boolean;
+export declare function shouldAcceptComboboxValueChange<Value>(value: Value | null, disabledValues: ReadonlySet<unknown>, multiple?: boolean): boolean;
 export declare function emitComboboxValueChange<Value>(value: Value | null, disabledValues: ReadonlySet<unknown>, onValueChange: (value: Value | null) => void): boolean;
 //#endregion

package/dist/ui/combobox-disabled-selection.js

@@ -1,5 +1,6 @@
 //#region src/ui/combobox-disabled-selection.ts
-function shouldAcceptComboboxValueChange(value, disabledValues) {
+function shouldAcceptComboboxValueChange(value, disabledValues, multiple = false) {
+	if (multiple && Array.isArray(value)) return value.every((item) => !disabledValues.has(item));
 	return value === null || !disabledValues.has(value);
 }
 function emitComboboxValueChange(value, disabledValues, onValueChange) {

package/dist/ui/combobox.d.ts

@@ -1,30 +1,11 @@
-import { OpenChangeEventDetails } from "../control-props.js";
 import { ControlSize } from "../control-variants.js";
 import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { FieldKnobStyle } from "../knob-contracts/field-knobs.js";
 import { CSSProperties, ComponentProps, ReactNode } from "react";
 import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
 //#region src/ui/combobox.d.ts
-export type ComboboxProps<Value = string> = {
-  children?: ReactNode;
+export type ComboboxProps<Value = string, Multiple extends boolean | undefined = false> = Pick<Combobox$1.Root.Props<Value, Multiple>, "children" | "multiple" | "value" | "defaultValue" | "onValueChange" | "inputValue" | "defaultInputValue" | "onInputValueChange" | "open" | "defaultOpen" | "onOpenChange" | "disabled" | "readOnly" | "required" | "name" | "autoHighlight" | "itemToStringLabel" | "isItemEqualToValue" | "filter" | "modal"> & {
   items?: readonly Value[];
-  value?: Value | null;
-  defaultValue?: Value | null;
-  onValueChange?: (value: Value | null) => void;
-  inputValue?: string;
-  defaultInputValue?: string;
-  onInputValueChange?: (inputValue: string) => void;
-  open?: boolean;
-  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
-  disabled?: boolean;
-  readOnly?: boolean;
-  required?: boolean;
-  name?: string;
-  autoHighlight?: boolean;
-  itemToStringLabel?: (itemValue: Value) => string;
-  isItemEqualToValue?: (itemValue: Value, value: Value) => boolean;
-  filter?: Combobox$1.Root.Props<Value>["filter"];
 };
 export type ComboboxInputProps = Omit<Omit<ComponentProps<"input">, "size">, "style"> & {
   style?: CSSProperties & FieldKnobStyle;
@@ -34,8 +15,9 @@ export type ComboboxInputProps = Omit<Omit<ComponentProps<"input">, "size">, "st
 export type ComboboxTriggerProps = ComponentProps<"button"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
-export type ComboboxContentProps = Omit<ComponentProps<"div"> & {
+export type ComboboxContentProps = Omit<Combobox$1.Popup.Props & {
   sideOffset?: number;
+  anchor?: Combobox$1.Positioner.Props["anchor"];
 }, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
@@ -59,10 +41,10 @@ export type ComboboxGroupProps = ComponentProps<"div"> & {
 export type ComboboxGroupLabelProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & PopupKnobStyle;
 };
-export declare function Combobox<Value = string>({ children, onValueChange, autoHighlight, ...props }: ComboboxProps<Value>): import("react").JSX.Element;
+export declare function Combobox<Value = string, Multiple extends boolean | undefined = false>({ children, onValueChange, autoHighlight, ...props }: ComboboxProps<Value, Multiple>): import("react").JSX.Element;
 export declare function ComboboxTrigger({ className, children, ...props }: ComboboxTriggerProps): import("react").JSX.Element;
 export declare function ComboboxInput({ size, className, ...props }: ComboboxInputProps): import("react").JSX.Element;
-export declare function ComboboxContent({ className, children, sideOffset, ...props }: ComboboxContentProps): import("react").JSX.Element;
+export declare function ComboboxContent({ className, children, sideOffset, anchor, ...props }: ComboboxContentProps): import("react").JSX.Element;
 export declare function ComboboxList<Value = unknown>({ className, children, ...props }: ComboboxListProps<Value>): import("react").JSX.Element;
 export declare function ComboboxEmpty({ className, children, ...props }: ComboboxEmptyProps): import("react").JSX.Element;
 export declare function ComboboxItem<Value = unknown>({ className, children, disabled, value, ...props }: ComboboxItemProps<Value>): import("react").JSX.Element;