@devalok/shilp-sutra 0.22.2 → 0.23.0

package/dist/tailwind/preset.js

@@ -178,15 +178,28 @@ const o = {
         "secondary-12": "var(--color-secondary-12)",
         "secondary-fg": "var(--color-secondary-fg)",
         // ═══ NEW: Surface ═══
-        "surface-1": "var(--color-surface-1)",
-        "surface-2": "var(--color-surface-2)",
-        "surface-3": "var(--color-surface-3)",
-        "surface-4": "var(--color-surface-4)",
+        "surface-base": "var(--color-surface-base)",
+        "surface-sunken": "var(--color-surface-sunken)",
+        "surface-raised": "var(--color-surface-raised)",
+        "surface-overlay": "var(--color-surface-overlay)",
+        "surface-raised-hover": "var(--color-surface-raised-hover)",
+        "surface-raised-active": "var(--color-surface-raised-active)",
+        "surface-inverted": "var(--color-surface-inverted)",
+        "surface-inverted-fg": "var(--color-surface-inverted-fg)",
+        "surface-disabled": "var(--color-surface-disabled)",
+        "surface-fg-disabled": "var(--color-surface-fg-disabled)",
+        // Deprecated — remove in next major
+        "surface-1": "var(--color-surface-base)",
+        "surface-2": "var(--color-surface-raised)",
+        "surface-3": "var(--color-surface-raised-hover)",
+        "surface-4": "var(--color-surface-raised-active)",
         "surface-fg": "var(--color-surface-fg)",
         "surface-fg-muted": "var(--color-surface-fg-muted)",
         "surface-fg-subtle": "var(--color-surface-fg-subtle)",
         "surface-border": "var(--color-surface-border)",
         "surface-border-strong": "var(--color-surface-border-strong)",
+        "surface-border-subtle": "var(--color-surface-border-subtle)",
+        backdrop: "var(--color-backdrop)",
         // ═══ NEW: Status (step subsets) ═══
         "error-3": "var(--color-error-3)",
         "error-7": "var(--color-error-7)",
@@ -310,12 +323,21 @@ const o = {
         "gradient-brand-dark": "var(--gradient-brand-dark)"
       },
       boxShadow: {
-        "01": "var(--shadow-01)",
-        "02": "var(--shadow-02)",
-        "03": "var(--shadow-03)",
-        "04": "var(--shadow-04)",
-        "05": "var(--shadow-05)",
-        brand: "var(--shadow-brand)"
+        raised: "var(--shadow-raised)",
+        "raised-hover": "var(--shadow-raised-hover)",
+        floating: "var(--shadow-floating)",
+        overlay: "var(--shadow-overlay)",
+        brand: "var(--shadow-brand)",
+        glow: "var(--shadow-glow)",
+        inset: "var(--shadow-inset)",
+        "ring-sm": "var(--shadow-ring-sm)",
+        ring: "var(--shadow-ring)",
+        // Deprecated — remove in next major
+        "01": "var(--shadow-raised)",
+        "02": "var(--shadow-raised-hover)",
+        "03": "var(--shadow-floating)",
+        "04": "var(--shadow-overlay)",
+        "05": "var(--shadow-overlay)"
       },
       transitionDuration: {
         instant: "var(--duration-instant)",
@@ -358,7 +380,7 @@ const o = {
         ".focus-ring": {
           "&:focus-visible": {
             outline: "none",
-            "box-shadow": "0 0 0 2px var(--color-surface-1), 0 0 0 4px var(--color-accent-9)"
+            "box-shadow": "0 0 0 2px var(--color-surface-base), 0 0 0 4px var(--color-accent-9)"
           }
         },
         ".focus-ring-inset": {

package/dist/tokens/primitives.css

@@ -49,6 +49,7 @@
 
   /* ── Neutral — Warm grays — H:350 ── */
   --neutral-0: #ffffff;
+  --color-surface-0: oklch(0.945 0.008 360);
   --neutral-1:  oklch(0.99 0.0003 350);
   --neutral-2:  oklch(0.97 0.0008 350);
   --neutral-3:  oklch(0.93 0.0018 350);
@@ -248,6 +249,7 @@
   --purple-12: oklch(0.88 0.0316 300);
 
   /* ── Neutral — Warm grays — H:350 ── */
+  --color-surface-0: oklch(0.07 0.008 360);
   --neutral-1:  oklch(0.11 0.0002 350);
   --neutral-2:  oklch(0.17 0.0007 350);
   --neutral-3:  oklch(0.23 0.0019 350);

package/dist/tokens/semantic.css

@@ -97,15 +97,31 @@
   /* ═══════════════════════════════════════════════════════════
      SURFACE
      ═══════════════════════════════════════════════════════════ */
-  --color-surface-1: var(--neutral-1);
-  --color-surface-2: var(--neutral-2);
-  --color-surface-3: var(--neutral-3);
-  --color-surface-4: var(--neutral-4);
+  /* Semantic surface tokens */
+  --color-surface-base: var(--neutral-2);    /* 0.97L — slightly grey page (Stripe/Linear pattern) */
+  --color-surface-sunken: var(--color-surface-0);
+  --color-surface-raised: var(--neutral-1);  /* 0.99L — white cards float above the page */
+  --color-surface-overlay: var(--neutral-1); /* same as raised — floating elements are white */
+  --color-surface-raised-hover: var(--neutral-3);
+  --color-surface-raised-active: var(--neutral-4);
+  --color-surface-inverted: var(--neutral-12);
+  --color-surface-inverted-fg: var(--neutral-1);
+  --color-surface-disabled: var(--neutral-2);
+  --color-surface-fg-disabled: var(--neutral-8);
+
+  /* Deprecated — remove in next major */
+  --color-surface-1: var(--color-surface-base);
+  --color-surface-2: var(--color-surface-raised);
+  --color-surface-3: var(--color-surface-raised-hover);
+  --color-surface-4: var(--color-surface-raised-active);
+
   --color-surface-fg: var(--neutral-12);
   --color-surface-fg-muted: var(--neutral-11);
   --color-surface-fg-subtle: var(--neutral-8);
   --color-surface-border: var(--neutral-5);
   --color-surface-border-strong: var(--neutral-6);
+  --color-surface-border-subtle: var(--neutral-4);
+  --color-backdrop: oklch(0 0 0 / 0.4);
 
   /* ═══════════════════════════════════════════════════════════
      STATUS — Error
@@ -258,12 +274,59 @@
   /* ═══════════════════════════════════════════════════════════
      SHADOWS
      ═══════════════════════════════════════════════════════════ */
-  --shadow-01: 0 1px 1px oklch(0 0 0 / 0.06), 0 1px 3px oklch(0 0 0 / 0.10), 0 2px 6px oklch(0 0 0 / 0.08);
-  --shadow-02: 0 1px 2px oklch(0 0 0 / 0.08), 0 4px 8px oklch(0 0 0 / 0.12), 0 8px 24px oklch(0 0 0 / 0.10);
-  --shadow-03: 0 2px 4px oklch(0 0 0 / 0.08), 0 8px 16px oklch(0 0 0 / 0.12), 0 16px 40px oklch(0 0 0 / 0.10);
-  --shadow-04: 0 2px 4px oklch(0 0 0 / 0.10), 0 12px 24px oklch(0 0 0 / 0.14), 0 24px 56px oklch(0 0 0 / 0.12);
+
+  /* Shadow color: cool blue tint for natural depth */
+  --shadow-color: 0.15 0.015 260;
+  --shadow-strength: 1;
+
+  /* Shadow transition */
+  --shadow-transition: box-shadow var(--duration-fast-02) var(--ease-productive-standard);
+
+  /* Shadow primitives (internal) */
+  --shadow-xs:
+    0 0 0 1px oklch(var(--shadow-color) / calc(0.035 * var(--shadow-strength))),
+    0 0.5px 1px -0.5px oklch(var(--shadow-color) / calc(0.045 * var(--shadow-strength))),
+    0 1.5px 3px -1px oklch(var(--shadow-color) / calc(0.04 * var(--shadow-strength))),
+    0 3px 7px -2px oklch(var(--shadow-color) / calc(0.03 * var(--shadow-strength)));
+  --shadow-sm:
+    0 0 0 1px oklch(var(--shadow-color) / calc(0.035 * var(--shadow-strength))),
+    0 0.5px 1px -0.5px oklch(var(--shadow-color) / calc(0.04 * var(--shadow-strength))),
+    0 2px 4px -1.5px oklch(var(--shadow-color) / calc(0.045 * var(--shadow-strength))),
+    0 6px 12px -3px oklch(var(--shadow-color) / calc(0.035 * var(--shadow-strength))),
+    0 14px 28px -8px oklch(var(--shadow-color) / calc(0.025 * var(--shadow-strength)));
+  --shadow-md:
+    0 0 0 1px oklch(var(--shadow-color) / calc(0.04 * var(--shadow-strength))),
+    0 1px 2px -1px oklch(var(--shadow-color) / calc(0.05 * var(--shadow-strength))),
+    0 4px 8px -2px oklch(var(--shadow-color) / calc(0.04 * var(--shadow-strength))),
+    0 10px 20px -5px oklch(var(--shadow-color) / calc(0.035 * var(--shadow-strength))),
+    0 24px 44px -12px oklch(var(--shadow-color) / calc(0.025 * var(--shadow-strength)));
+  --shadow-lg:
+    0 0 0 1px oklch(var(--shadow-color) / calc(0.04 * var(--shadow-strength))),
+    0 1px 2px -1px oklch(var(--shadow-color) / calc(0.05 * var(--shadow-strength))),
+    0 3px 6px -2px oklch(var(--shadow-color) / calc(0.045 * var(--shadow-strength))),
+    0 8px 16px -4px oklch(var(--shadow-color) / calc(0.04 * var(--shadow-strength))),
+    0 18px 34px -8px oklch(var(--shadow-color) / calc(0.03 * var(--shadow-strength))),
+    0 40px 64px -16px oklch(var(--shadow-color) / calc(0.025 * var(--shadow-strength)));
   --shadow-05: 0 4px 8px oklch(0 0 0 / 0.10), 0 16px 32px oklch(0 0 0 / 0.16), 0 32px 64px oklch(0 0 0 / 0.14);
-  --shadow-brand: 0 4px 16px oklch(0.55 0.19 360 / 0.25);
+
+  /* Semantic elevation shadows (public API) */
+  --shadow-raised: var(--shadow-xs);
+  --shadow-raised-hover: var(--shadow-sm);
+  --shadow-floating: var(--shadow-md);
+  --shadow-overlay: var(--shadow-lg);
+
+  /* Effect shadows */
+  --shadow-brand: 0 2px 8px oklch(0.55 0.19 360 / 0.20), 0 6px 20px oklch(0.55 0.19 360 / 0.15);
+  --shadow-glow: 0 0 0 1.5px oklch(0.55 0.19 360 / 0.20), 0 0 7px oklch(0.55 0.19 360 / 0.12);
+  --shadow-inset: inset 0 1px 2px oklch(var(--shadow-color) / calc(0.08 * var(--shadow-strength))), inset 0 2px 5px oklch(var(--shadow-color) / calc(0.06 * var(--shadow-strength)));
+  --shadow-ring-sm: 0 0 0 1px var(--color-surface-border);
+  --shadow-ring: 0 0 0 2px oklch(0.55 0.19 360 / 0.30);
+
+  /* Deprecated shadow aliases */
+  --shadow-01: var(--shadow-raised);
+  --shadow-02: var(--shadow-raised-hover);
+  --shadow-03: var(--shadow-floating);
+  --shadow-04: var(--shadow-overlay);
 
   /* ═══════════════════════════════════════════════════════════
      SIZES
@@ -354,8 +417,15 @@
 
   /* Dark mode borders need lower contrast — bright borders look harsh.
      Drop to step 3/4 for subtle resting borders that don't overpower surfaces */
+  /* Dark mode: restore base/raised to original direction (raised = lighter than base) */
+  --color-surface-base: var(--neutral-1);     /* 0.11L — dark page */
+  --color-surface-raised: var(--neutral-2);   /* 0.17L — lighter cards */
+
   --color-surface-border: var(--neutral-3);
   --color-surface-border-strong: var(--neutral-4);
+  --color-surface-overlay: oklch(0.13 0.0002 350);
+  --color-surface-border-subtle: var(--neutral-2);
+  --color-backdrop: oklch(0 0 0 / 0.6);
 
   /* Overlay */
   --color-overlay: oklch(0 0 0 / 0.70);
@@ -372,12 +442,11 @@
   --color-skeleton-shimmer: var(--neutral-3);
 
   /* Shadows (heavier in dark mode) */
-  --shadow-01: 0 1px 1px oklch(0 0 0 / 0.15), 0 1px 3px oklch(0 0 0 / 0.25), 0 2px 6px oklch(0 0 0 / 0.20);
-  --shadow-02: 0 1px 2px oklch(0 0 0 / 0.20), 0 4px 8px oklch(0 0 0 / 0.30), 0 8px 24px oklch(0 0 0 / 0.25);
-  --shadow-03: 0 2px 4px oklch(0 0 0 / 0.20), 0 8px 16px oklch(0 0 0 / 0.30), 0 16px 40px oklch(0 0 0 / 0.25);
-  --shadow-04: 0 2px 4px oklch(0 0 0 / 0.25), 0 12px 24px oklch(0 0 0 / 0.35), 0 24px 56px oklch(0 0 0 / 0.30);
+  --shadow-strength: 2.5;
   --shadow-05: 0 4px 8px oklch(0 0 0 / 0.25), 0 16px 32px oklch(0 0 0 / 0.40), 0 32px 64px oklch(0 0 0 / 0.35);
-  --shadow-brand: 0 4px 16px oklch(0.55 0.19 360 / 0.35);
+  --shadow-brand: 0 2px 8px oklch(0.55 0.19 360 / 0.30), 0 6px 20px oklch(0.55 0.19 360 / 0.20);
+  --shadow-glow: 0 0 0 1.5px oklch(0.55 0.19 360 / 0.35), 0 0 10px oklch(0.55 0.19 360 / 0.20);
+  --shadow-ring: 0 0 0 2px oklch(0.55 0.19 360 / 0.45);
 
   /* Gradients */
   --gradient-brand-light: linear-gradient(135deg, var(--pink-9), var(--purple-9));

package/dist/tokens/typography.css

@@ -372,7 +372,7 @@
 
 .prose-devsabha code {
   font-size: 12px;
-  background: var(--color-surface-3);
+  background: var(--color-surface-raised-hover);
   border-radius: 4px;
   padding: 0.15em 0.4em;
 }

package/dist/ui/accordion.js

@@ -20,7 +20,7 @@ const N = s.forwardRef(({ className: o, children: a, ...t }, r) => /* @__PURE__
   {
     ref: r,
     className: i(
-      "group flex flex-1 items-center justify-between py-ds-05 text-left text-ds-md font-medium hover:bg-surface-2 rounded-ds-md data-[state=open]:bg-surface-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9",
+      "group flex flex-1 items-center justify-between py-ds-05 text-left text-ds-md font-medium hover:bg-surface-raised rounded-ds-md data-[state=open]:bg-surface-raised focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9",
       o
     ),
     ...t,

package/dist/ui/alert-dialog.js

@@ -1,26 +1,26 @@
 "use client";
-import { jsx as a, jsxs as h } from "react/jsx-runtime";
+import { jsx as s, jsxs as h } from "react/jsx-runtime";
 import * as o from "react";
-import { O as p, w as R, x as u, y as g, D as x, A as y, z as b, B as C, E as j } from "../_chunks/primitives.js";
+import { O as p, w as R, x as u, y as g, D as y, A as x, z as b, B as C, E as j } from "../_chunks/primitives.js";
 import { cn as i } from "./lib/utils.js";
 import { tweens as f, springs as M } from "./lib/motion.js";
 import { A as T, m } from "../_chunks/framer.js";
 const v = o.createContext({ open: !1 }), z = () => o.useContext(v), P = ({
   open: t,
-  defaultOpen: s,
+  defaultOpen: a,
   onOpenChange: e,
   ...r
 }) => {
-  const [l, A] = o.useState(s ?? !1), n = t !== void 0, d = n ? t : l, D = o.useCallback(
+  const [l, A] = o.useState(a ?? !1), n = t !== void 0, d = n ? t : l, D = o.useCallback(
     (c) => {
       n || A(c), e == null || e(c);
     },
     [n, e]
   ), w = o.useMemo(() => ({ open: d }), [d]);
-  return /* @__PURE__ */ a(v.Provider, { value: w, children: /* @__PURE__ */ a(C, { open: d, onOpenChange: D, ...r }) });
+  return /* @__PURE__ */ s(v.Provider, { value: w, children: /* @__PURE__ */ s(C, { open: d, onOpenChange: D, ...r }) });
 };
 P.displayName = "AlertDialog";
-const L = j, F = R, N = o.forwardRef(({ className: t, ...s }, e) => /* @__PURE__ */ a(
+const L = j, F = R, N = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
   p,
   {
     ref: e,
@@ -29,14 +29,14 @@ const L = j, F = R, N = o.forwardRef(({ className: t, ...s }, e) => /* @__PURE__
       "fixed inset-0 z-modal bg-overlay",
       t
     ),
-    ...s
+    ...a
   }
 ));
 N.displayName = p.displayName;
-const H = o.forwardRef(({ className: t, children: s, ...e }, r) => {
+const H = o.forwardRef(({ className: t, children: a, ...e }, r) => {
   const { open: l } = z();
-  return /* @__PURE__ */ a(T, { children: l && /* @__PURE__ */ h(F, { forceMount: !0, children: [
-    /* @__PURE__ */ a(N, { asChild: !0, children: /* @__PURE__ */ a(
+  return /* @__PURE__ */ s(T, { children: l && /* @__PURE__ */ h(F, { forceMount: !0, children: [
+    /* @__PURE__ */ s(N, { asChild: !0, children: /* @__PURE__ */ s(
       m.div,
       {
         initial: { opacity: 0 },
@@ -45,14 +45,14 @@ const H = o.forwardRef(({ className: t, children: s, ...e }, r) => {
         transition: f.fade
       }
     ) }),
-    /* @__PURE__ */ a(
+    /* @__PURE__ */ s(
       u,
       {
         ref: r,
         forceMount: !0,
         asChild: !0,
         ...e,
-        children: /* @__PURE__ */ a(
+        children: /* @__PURE__ */ s(
           m.div,
           {
             initial: { opacity: 0, scale: 0.95, x: "-50%", y: "-50%" },
@@ -60,10 +60,10 @@ const H = o.forwardRef(({ className: t, children: s, ...e }, r) => {
             exit: { opacity: 0, scale: 0.95, x: "-50%", y: "-50%" },
             transition: { ...M.smooth, opacity: f.fade },
             className: i(
-              "fixed left-[50%] top-[50%] z-modal grid w-full max-w-lg gap-ds-05 border border-surface-border-strong bg-surface-1 p-ds-06 shadow-04 rounded-ds-xl",
+              "fixed left-[50%] top-[50%] z-modal grid w-full max-w-lg gap-ds-05 border border-surface-border-strong bg-surface-overlay p-ds-06 shadow-overlay rounded-ds-xl",
               t
             ),
-            children: s
+            children: a
           }
         )
       }
@@ -72,7 +72,7 @@ const H = o.forwardRef(({ className: t, children: s, ...e }, r) => {
 });
 H.displayName = u.displayName;
 const O = o.forwardRef(
-  ({ className: t, ...s }, e) => /* @__PURE__ */ a(
+  ({ className: t, ...a }, e) => /* @__PURE__ */ s(
     "div",
     {
       ref: e,
@@ -80,13 +80,13 @@ const O = o.forwardRef(
         "flex flex-col space-y-ds-02b text-center sm:text-left",
         t
       ),
-      ...s
+      ...a
     }
   )
 );
 O.displayName = "AlertDialogHeader";
 const k = o.forwardRef(
-  ({ className: t, ...s }, e) => /* @__PURE__ */ a(
+  ({ className: t, ...a }, e) => /* @__PURE__ */ s(
     "div",
     {
       ref: e,
@@ -94,12 +94,12 @@ const k = o.forwardRef(
         "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-ds-03",
         t
       ),
-      ...s
+      ...a
     }
   )
 );
 k.displayName = "AlertDialogFooter";
-const B = o.forwardRef(({ className: t, ...s }, e) => /* @__PURE__ */ a(
+const B = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
   g,
   {
     ref: e,
@@ -107,40 +107,40 @@ const B = o.forwardRef(({ className: t, ...s }, e) => /* @__PURE__ */ a(
       "text-ds-lg font-semibold",
       t
     ),
-    ...s
+    ...a
   }
 ));
 B.displayName = g.displayName;
-const E = o.forwardRef(({ className: t, ...s }, e) => /* @__PURE__ */ a(
-  x,
+const E = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
+  y,
   {
     ref: e,
     className: i("text-ds-md text-surface-fg-muted", t),
-    ...s
+    ...a
   }
 ));
-E.displayName = x.displayName;
-const I = o.forwardRef(({ className: t, ...s }, e) => /* @__PURE__ */ a(
-  y,
+E.displayName = y.displayName;
+const I = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
+  x,
   {
     ref: e,
     className: i(
-      "inline-flex h-ds-md items-center justify-center rounded-ds-md px-ds-05 text-ds-md font-semibold transition-colors bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-10 shadow-01 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled",
+      "inline-flex h-ds-md items-center justify-center rounded-ds-md px-ds-05 text-ds-md font-semibold transition-colors bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-10 shadow-raised focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled",
       t
     ),
-    ...s
+    ...a
   }
 ));
-I.displayName = y.displayName;
-const S = o.forwardRef(({ className: t, ...s }, e) => /* @__PURE__ */ a(
+I.displayName = x.displayName;
+const S = o.forwardRef(({ className: t, ...a }, e) => /* @__PURE__ */ s(
   b,
   {
     ref: e,
     className: i(
-      "inline-flex h-ds-md items-center justify-center rounded-ds-md px-ds-05 text-ds-md font-semibold transition-colors bg-transparent text-surface-fg-muted border border-surface-border-strong hover:bg-surface-2 hover:text-surface-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled",
+      "inline-flex h-ds-md items-center justify-center rounded-ds-md px-ds-05 text-ds-md font-semibold transition-colors bg-transparent text-surface-fg-muted border border-surface-border-strong hover:bg-surface-raised hover:text-surface-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled",
       t
     ),
-    ...s
+    ...a
   }
 ));
 S.displayName = b.displayName;

package/dist/ui/alert.js

@@ -2,11 +2,11 @@
 import { jsx as e, jsxs as n } from "react/jsx-runtime";
 import { IconInfoCircle as o, IconAlertCircle as v, IconAlertTriangle as x, IconCircleCheck as p, IconX as N } from "@tabler/icons-react";
 import * as r from "react";
-import { ag as w } from "../_chunks/vendor-utils.js";
-import { cn as h } from "./lib/utils.js";
+import { ag as h } from "../_chunks/vendor-utils.js";
+import { cn as w } from "./lib/utils.js";
 import { springs as y, motionProps as I } from "./lib/motion.js";
 import { A as C, m as A } from "../_chunks/framer.js";
-const k = w(
+const k = h(
   "relative flex gap-ds-04 rounded-ds-lg border p-ds-05",
   {
     variants: {
@@ -29,13 +29,13 @@ const k = w(
       { variant: "subtle", color: "success", className: "bg-success-3 border-success-7 text-success-11" },
       { variant: "subtle", color: "warning", className: "bg-warning-3 border-warning-7 text-warning-11" },
       { variant: "subtle", color: "error", className: "bg-error-3 border-error-7 text-error-11" },
-      { variant: "subtle", color: "neutral", className: "bg-surface-2 border-surface-border-strong text-surface-fg [&>svg]:text-surface-fg-muted" },
+      { variant: "subtle", color: "neutral", className: "bg-surface-raised border-surface-border-strong text-surface-fg [&>svg]:text-surface-fg-muted" },
       // filled (solid bg, white text)
       { variant: "filled", color: "info", className: "bg-info-9 text-accent-fg border-transparent [&>svg]:text-accent-fg" },
       { variant: "filled", color: "success", className: "bg-success-9 text-accent-fg border-transparent [&>svg]:text-accent-fg" },
       { variant: "filled", color: "warning", className: "bg-warning-9 text-accent-fg border-transparent [&>svg]:text-accent-fg" },
       { variant: "filled", color: "error", className: "bg-error-9 text-accent-fg border-transparent [&>svg]:text-accent-fg" },
-      { variant: "filled", color: "neutral", className: "bg-surface-3 text-surface-fg border-transparent [&>svg]:text-surface-fg-muted" },
+      { variant: "filled", color: "neutral", className: "bg-surface-raised-hover text-surface-fg border-transparent [&>svg]:text-surface-fg-muted" },
       // outline (transparent bg, colored border)
       { variant: "outline", color: "info", className: "bg-transparent border-info-7 text-info-11" },
       { variant: "outline", color: "success", className: "bg-transparent border-success-7 text-success-11" },
@@ -52,25 +52,25 @@ const k = w(
   error: v,
   neutral: o
 }, j = r.forwardRef(
-  ({ className: c, variant: i = "subtle", color: t = "info", title: a, onDismiss: s, children: l, ...f }, u) => {
-    const d = V[t ?? "info"], [m, g] = r.useState(!0), b = r.useCallback(() => {
+  ({ className: c, variant: i = "subtle", color: a = "info", title: t, onDismiss: s, children: l, ...f }, d) => {
+    const u = V[a ?? "info"], [m, g] = r.useState(!0), b = r.useCallback(() => {
       g(!1);
     }, []);
     return /* @__PURE__ */ e(C, { onExitComplete: s, children: m && /* @__PURE__ */ n(
       A.div,
       {
-        ref: u,
+        ref: d,
         initial: { opacity: 1, y: 0 },
         animate: { opacity: 1, y: 0 },
         exit: { opacity: 0, y: -8 },
         transition: y.snappy,
-        className: h(k({ variant: i, color: t }), c),
+        className: w(k({ variant: i, color: a }), c),
         role: "alert",
         ...I(f),
         children: [
-          /* @__PURE__ */ e(d, { className: "mt-ds-01 h-ico-md w-ico-md shrink-0", "aria-hidden": "true" }),
+          /* @__PURE__ */ e(u, { className: "mt-ds-01 h-ico-md w-ico-md shrink-0", "aria-hidden": "true" }),
           /* @__PURE__ */ n("div", { className: "flex-1 min-w-0", children: [
-            a && /* @__PURE__ */ e("p", { className: "text-ds-md font-semibold mb-ds-01", children: a }),
+            t && /* @__PURE__ */ e("p", { className: "text-ds-md font-semibold mb-ds-01", children: t }),
             /* @__PURE__ */ e("div", { className: "text-ds-md text-surface-fg-muted", children: l })
           ] }),
           s && /* @__PURE__ */ e(
@@ -78,7 +78,7 @@ const k = w(
             {
               type: "button",
               onClick: b,
-              className: "shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-sm text-surface-fg-subtle transition-colors duration-fast-01 ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-3 active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9",
+              className: "shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-sm text-surface-fg-subtle transition-colors duration-fast-01 ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-raised-hover active:scale-95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9",
               "aria-label": "Dismiss",
               children: /* @__PURE__ */ e(N, { className: "h-ico-sm w-ico-sm" })
             }

package/dist/ui/autocomplete.js

@@ -22,7 +22,7 @@ const q = {
     id: E,
     ...N
   }, c) => {
-    const $ = t.useId(), k = E || $, v = `${k}-listbox`, D = `${k}-option`, [m, y] = t.useState((s == null ? void 0 : s.label) ?? ""), [l, i] = t.useState(!1), [r, n] = t.useState(-1), M = t.useRef(null), S = t.useRef(null), x = t.useRef(), C = t.useCallback(
+    const $ = t.useId(), v = E || $, k = `${v}-listbox`, D = `${v}-option`, [m, y] = t.useState((s == null ? void 0 : s.label) ?? ""), [l, i] = t.useState(!1), [r, a] = t.useState(-1), M = t.useRef(null), S = t.useRef(null), x = t.useRef(), C = t.useCallback(
       (e) => {
         M.current = e, typeof c == "function" ? c(e) : c && (c.current = e);
       },
@@ -33,12 +33,12 @@ const q = {
     }, [s]), t.useEffect(() => () => {
       x.current && clearTimeout(x.current);
     }, []);
-    const a = t.useMemo(
+    const n = t.useMemo(
       () => m ? h.filter((e) => e.label.toLowerCase().includes(m.toLowerCase())) : h,
       [h, m]
     ), p = t.useCallback(
       (e) => {
-        y(e.label), i(!1), n(-1), u == null || u(e);
+        y(e.label), i(!1), a(-1), u == null || u(e);
       },
       [u]
     ), K = t.useCallback(
@@ -49,20 +49,20 @@ const q = {
         }
         switch (e.key) {
           case "ArrowDown":
-            e.preventDefault(), n((o) => Math.min(o + 1, a.length - 1));
+            e.preventDefault(), a((o) => Math.min(o + 1, n.length - 1));
             break;
           case "ArrowUp":
-            e.preventDefault(), n((o) => Math.max(o - 1, 0));
+            e.preventDefault(), a((o) => Math.max(o - 1, 0));
             break;
           case "Enter":
-            e.preventDefault(), r >= 0 && a[r] && p(a[r]);
+            e.preventDefault(), r >= 0 && n[r] && p(n[r]);
             break;
           case "Escape":
-            i(!1), n(-1);
+            i(!1), a(-1);
             break;
         }
       },
-      [l, a, r, p]
+      [l, n, r, p]
     ), O = r >= 0 ? `${D}-${r}` : void 0;
     return /* @__PURE__ */ T("div", { className: b("relative", A), ...N, children: [
       /* @__PURE__ */ f(
@@ -73,19 +73,19 @@ const q = {
           role: "combobox",
           "aria-expanded": l,
           "aria-autocomplete": "list",
-          "aria-controls": l ? v : void 0,
+          "aria-controls": l ? k : void 0,
           "aria-activedescendant": O,
           value: m,
           placeholder: I,
           disabled: w,
           className: b(
-            "flex h-ds-md w-full rounded-ds-md border border-surface-border-strong bg-surface-3 px-ds-04 py-ds-03 font-sans text-ds-md text-surface-fg placeholder:text-surface-fg-subtle",
+            "flex h-ds-md w-full rounded-ds-md border border-surface-border-strong bg-surface-raised-hover px-ds-04 py-ds-03 font-sans text-ds-md text-surface-fg placeholder:text-surface-fg-subtle",
             "outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-[var(--border-focus-offset)]",
             "transition-colors duration-fast-01",
             w && "opacity-action-disabled cursor-not-allowed"
           ),
           onChange: (e) => {
-            y(e.target.value), i(!0), n(-1);
+            y(e.target.value), i(!0), a(-1);
           },
           onFocus: () => i(!0),
           onBlur: () => {
@@ -97,7 +97,7 @@ const q = {
       /* @__PURE__ */ f(P, { children: l && /* @__PURE__ */ f(
         g.ul,
         {
-          id: v,
+          id: k,
           ref: S,
           role: "listbox",
           initial: "hidden",
@@ -105,10 +105,10 @@ const q = {
           exit: "hidden",
           variants: q,
           className: b(
-            "absolute z-popover mt-ds-02 w-full overflow-auto rounded-ds-md border border-surface-border-strong bg-surface-1 shadow-02",
+            "absolute z-popover mt-ds-02 w-full overflow-auto rounded-ds-md border border-surface-border-strong bg-surface-overlay shadow-raised-hover",
             "max-h-60"
           ),
-          children: a.length === 0 ? /* @__PURE__ */ f(
+          children: n.length === 0 ? /* @__PURE__ */ f(
             g.li,
             {
               initial: { opacity: 0 },
@@ -117,7 +117,7 @@ const q = {
               className: "px-ds-04 py-ds-03 text-ds-md text-surface-fg-muted",
               children: R
             }
-          ) : a.map((e, o) => /* @__PURE__ */ f(
+          ) : n.map((e, o) => /* @__PURE__ */ f(
             g.li,
             {
               id: `${D}-${o}`,
@@ -134,7 +134,7 @@ const q = {
               onKeyDown: (d) => {
                 (d.key === "Enter" || d.key === " ") && (d.preventDefault(), p(e));
               },
-              onMouseEnter: () => n(o),
+              onMouseEnter: () => a(o),
               children: e.label
             },
             e.value

package/dist/ui/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/ui/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAUjE,eAAO,MAAM,cAAc;;;8EAmB1B,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;AAEjE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AAoE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,EACnF,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,8EAA8E;IAC9E,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,gCAAgC;IAChC,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC,SAAS,CAAA;IACxC,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,MAAM,qFA6EV,CAAA;AAGF,QAAA,MAAM,WAAW,gKAgBf,CAAA;AAGF,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC;IACvE;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,cAAc,6FAiClB,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/ui/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAYjE,eAAO,MAAM,cAAc;;;8EAmB1B,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;AAEjE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AA6E7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,EACnF,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,8EAA8E;IAC9E,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,gCAAgC;IAChC,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC,SAAS,CAAA;IACxC,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,MAAM,qFA+EV,CAAA;AAGF,QAAA,MAAM,WAAW,gKAgBf,CAAA;AAGF,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC;IACvE;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,cAAc,6FAmClB,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,CAAA"}