@rinzai/zen 0.7.3 → 0.8.0

package/dist/segmented/index.js

@@ -20,7 +20,7 @@ function l({ label: n, value: r, onChange: l, name: u, className: d, children: f
 			className: "glow-edge border-tint/10 bg-tint/[0.03] relative inline-flex w-fit flex-wrap gap-1 rounded-xl border p-1",
 			children: [h && /* @__PURE__ */ o("span", {
 				"aria-hidden": !0,
-				className: "bg-primary/15 absolute top-0 left-0 rounded-lg shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.4)] transition-[translate,width,height] duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)]",
+				className: "zen__segmented-indicator bg-primary/15 ease-out-soft absolute top-0 left-0 rounded-lg shadow-[inset_0_0_0_1px_oklch(var(--primary)/0.4)] transition-[translate,width,height] duration-500",
 				style: {
 					translate: `${h.x}px ${h.y}px`,
 					width: h.w,

package/dist/select/index.js

@@ -79,9 +79,9 @@ function C({ value: a, onChange: c, placeholder: l = "Select…", disabled: u =
 			onKeyDown: (e) => {
 				D?.(e), ["ArrowDown", "ArrowUp"].includes(e.key) && !z.open && (e.preventDefault(), z.setOpen(!0));
 			},
-			className: e("zen__select group", i, "w-full", z.open && "border-glow/60 [--glow-border-color:transparent] shadow-[0_0_0_3px_oklch(var(--glow)/0.16),0_0_24px_-6px_oklch(var(--glow)/0.6)]", g),
+			className: e("zen__select group", i, "w-full", z.open && "border-glow/60 [--glow-border-color:transparent] shadow-glow-focus", g),
 			children: [/* @__PURE__ */ b("span", {
-				className: e("truncate", U === void 0 && "text-muted-foreground"),
+				className: e("truncate", U === void 0 && "text-[color:oklch(var(--muted-foreground)/var(--zen-placeholder))]"),
 				children: U ?? l
 			}), /* @__PURE__ */ b(s, { open: z.open })]
 		}),

package/dist/side-nav/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/side-nav/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,mFAAmF;AACnF,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAE5E;AAED,+BAA+B;AAC/B,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,SAAS,GACZ,EAAE;IACC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,+BAWA;AAQD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,+BAO9F;AAED,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,GAAG,CAAC;IACzD,qCAAqC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/side-nav/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,mFAAmF;AACnF,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAE5E;AAED,+BAA+B;AAC/B,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,SAAS,GACZ,EAAE;IACC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,+BASA;AAQD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,+BAO9F;AAED,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,GAAG,CAAC;IACzD,qCAAqC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,uFAAuF;IACvF,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/dist/side-nav/index.js

@@ -13,7 +13,7 @@ function a({ title: t, children: i, className: a }) {
 	return /* @__PURE__ */ r("div", {
 		className: e("flex flex-col gap-1", a),
 		children: [t && /* @__PURE__ */ n("span", {
-			className: "text-muted-foreground px-3 pb-1 text-[0.68rem] tracking-[0.1em] uppercase",
+			className: "text-muted-foreground text-2xs px-3 pb-1 tracking-widest uppercase",
 			children: t
 		}), i]
 	});

package/dist/slider/index.js

@@ -26,7 +26,7 @@ function i({ value: i, min: a = 0, max: o = 100, step: s = 1, onValueChange: c,
 			"--zen-track": y,
 			"--zen-thumb": d ?? "oklch(var(--primary))"
 		},
-		className: e("zen__slider h-5 w-full cursor-pointer appearance-none bg-transparent outline-hidden disabled:cursor-not-allowed disabled:opacity-50", "[&::-webkit-slider-runnable-track]:h-2.5 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:[background:var(--zen-track)]", "[&::-moz-range-track]:h-2.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:[background:var(--zen-track)]", "[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-[0_0_0_1px_oklch(0_0_0/0.3),0_0_16px_oklch(var(--glow)/0.8)] [&::-webkit-slider-thumb]:[background:var(--zen-thumb)]", "[&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:shadow-[0_0_0_1px_oklch(0_0_0/0.3),0_0_16px_oklch(var(--glow)/0.8)] [&::-moz-range-thumb]:[background:var(--zen-thumb)]", "focus-visible:[&::-webkit-slider-thumb]:ring-ring/40 focus-visible:[&::-webkit-slider-thumb]:ring-4", "focus-visible:[&::-moz-range-thumb]:ring-ring/40 focus-visible:[&::-moz-range-thumb]:ring-4", p),
+		className: e("zen__slider h-5 w-full cursor-pointer appearance-none bg-transparent outline-hidden disabled:cursor-not-allowed disabled:opacity-50", "[&::-webkit-slider-runnable-track]:h-2.5 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:[background:var(--zen-track)]", "[&::-moz-range-track]:h-2.5 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:[background:var(--zen-track)]", "[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-[0_0_0_1px_oklch(0_0_0/0.3),0_0_16px_oklch(var(--glow)/calc(0.8*var(--glow-k)))] [&::-webkit-slider-thumb]:[background:var(--zen-thumb)]", "[&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white [&::-moz-range-thumb]:shadow-[0_0_0_1px_oklch(0_0_0/0.3),0_0_16px_oklch(var(--glow)/calc(0.8*var(--glow-k)))] [&::-moz-range-thumb]:[background:var(--zen-thumb)]", "focus-visible:[&::-webkit-slider-thumb]:ring-ring/40 focus-visible:[&::-webkit-slider-thumb]:ring-4", "focus-visible:[&::-moz-range-thumb]:ring-ring/40 focus-visible:[&::-moz-range-thumb]:ring-4", p),
 		...h
 	});
 }

package/dist/status-pill/index.js

@@ -5,13 +5,13 @@ import { jsx as t } from "react/jsx-runtime";
 var n = {
 	default: "border-tint/10 bg-tint/[0.05] text-muted-foreground",
 	positive: "border-primary/35 bg-primary/12 text-primary",
-	negative: "border-destructive/40 bg-destructive/15 text-destructive"
+	negative: "border-destructive/40 bg-destructive/10 text-destructive"
 };
 function r({ tone: r = "default", quiet: i = !1, className: a, ...o }) {
 	return /* @__PURE__ */ t("span", {
 		role: "status",
 		...o,
-		className: e("zen__status-pill inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium whitespace-nowrap [&_svg]:size-3.5 [&_svg]:shrink-0", "transition-[color,background-color,border-color,opacity] duration-300", i ? "text-muted-foreground border-transparent bg-transparent opacity-80" : n[r], a)
+		className: e("zen__status-pill inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium whitespace-nowrap [&_svg]:size-3.5 [&_svg]:shrink-0", "transition-[color,background-color,border-color,opacity] duration-300", i ? "text-muted-foreground border-transparent bg-transparent" : n[r], a)
 	});
 }
 function i({ className: n, type: r = "button", ...i }) {

package/dist/tab-bar/index.js

@@ -15,7 +15,7 @@ function a({ hideFrom: t = "md", className: i, children: a, ...o }) {
 		})
 	});
 }
-var o = e("flex flex-col items-center gap-1 py-2.5 text-[0.7rem] outline-hidden transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-inset", "text-muted-foreground aria-[current=page]:text-primary [&_svg]:size-5 aria-[current=page]:[&_svg]:drop-shadow-[0_0_8px_oklch(var(--glow)/0.8)]");
+var o = e("flex flex-col items-center gap-1 py-2.5 text-2xs outline-hidden transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-inset", "text-muted-foreground aria-[current=page]:text-primary [&_svg]:size-5 aria-[current=page]:[&_svg]:drop-shadow-[0_0_8px_oklch(var(--glow)/calc(0.8*var(--glow-k)))]");
 function s({ icon: n, active: a, asChild: s, className: c, children: l, ...u }) {
 	let d = {
 		...u,

package/dist/table-of-contents/index.js

@@ -17,7 +17,7 @@ function a({ items: a, title: o = "On this page", className: s }) {
 		"aria-label": o,
 		className: e("zen__toc flex flex-col gap-3", s),
 		children: [/* @__PURE__ */ r("p", {
-			className: "text-muted-foreground mt-0! text-[0.68rem] tracking-[0.1em] uppercase",
+			className: "text-muted-foreground text-2xs mt-0! tracking-widest uppercase",
 			children: o
 		}), /* @__PURE__ */ r("ul", {
 			className: "border-tint/[0.07] flex flex-col gap-2 border-l text-sm",

package/dist/textarea/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/textarea/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,+BAgBpD;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/textarea/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,+BAiBpD;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,UAAU,CAAC,CAAC"}

package/dist/textarea/index.js

@@ -7,7 +7,7 @@ import { jsx as r } from "react/jsx-runtime";
 function i(i) {
 	let { className: a, ...o } = i, s = n(o);
 	return /* @__PURE__ */ r("textarea", {
-		className: e(t.replace("h-10", ""), "h-32 w-full resize-y py-2", "read-only:text-foreground read-only:cursor-default read-only:border-none! read-only:bg-transparent read-only:shadow-none! read-only:outline-hidden!", a),
+		className: e("zen__textarea", t.replace("h-10", ""), "h-32 w-full resize-y py-2", "read-only:text-foreground read-only:cursor-default read-only:border-none! read-only:bg-transparent read-only:shadow-none! read-only:outline-hidden!", a),
 		...o,
 		...s
 	});

package/dist/theme.css

@@ -64,11 +64,21 @@
 
     --color-tint: oklch(var(--tint));
 
+    /* Surfaces (cards, dialogs, popups) are rounded-xl/2xl: derived too, so --radius reaches them. */
+    --radius-2xl: calc(var(--radius) + 6px);
+    --radius-xl: calc(var(--radius) + 2px);
     --radius-lg: var(--radius);
     --radius-md: calc(var(--radius) - 2px);
     --radius-sm: calc(var(--radius) - 4px);
 
-    --font-sans: 'Inter Variable', Inter, ui-sans-serif, system-ui, sans-serif;
+    /* The small uppercase label over a stat, a nav group or a contents list; badges and tab-bar labels. */
+    --text-2xs: 0.68rem;
+
+    /* A focused (or open) field: a faint ring in the glow colour and a halo that follows --glow-strength. */
+    --shadow-glow-focus:
+        0 0 0 3px oklch(var(--glow) / 0.16), 0 0 24px -6px oklch(var(--glow) / calc(0.6 * var(--glow-k)));
+
+    --font-sans: 'Geist Variable', Geist, ui-sans-serif, system-ui, sans-serif;
 
     --ease-out-soft: cubic-bezier(0.2, 0.8, 0.2, 1);
 
@@ -305,26 +315,47 @@ html[data-zen-graphics='lite'] :is(.zen-topo--lit, .zen-dots--lit) {
 .zen__table-container[data-under-top] .zen__sticky-top,
 .zen__table-container[data-under-left] .zen__sticky-left,
 .zen__table-container[data-under-bottom] .zen__sticky-bottom {
-    background-color: oklch(var(--card) / 0.6);
+    --zen-sticky-fill: oklch(var(--card) / 0.6);
+    background-color: var(--zen-sticky-fill);
     -webkit-backdrop-filter: blur(18px) saturate(1.4);
     backdrop-filter: blur(18px) saturate(1.4);
 }
 html[data-zen-graphics='lite'] .zen__table-container[data-under-top] .zen__sticky-top,
 html[data-zen-graphics='lite'] .zen__table-container[data-under-left] .zen__sticky-left,
 html[data-zen-graphics='lite'] .zen__table-container[data-under-bottom] .zen__sticky-bottom {
+    --zen-sticky-fill: oklch(var(--card));
     -webkit-backdrop-filter: none;
     backdrop-filter: none;
-    background-color: oklch(var(--card));
 }
 @media (hover: none), (pointer: coarse), (prefers-reduced-transparency: reduce) {
     .zen__table-container[data-under-top] .zen__sticky-top,
     .zen__table-container[data-under-left] .zen__sticky-left,
     .zen__table-container[data-under-bottom] .zen__sticky-bottom {
+        --zen-sticky-fill: oklch(var(--card));
         -webkit-backdrop-filter: none;
         backdrop-filter: none;
-        background-color: oklch(var(--card));
     }
 }
+/*
+ * Rows passing under the header or footer fade into it over a short band, so
+ * the row cut by its edge reads as "more to scroll", not as clipped.
+ */
+.zen__table-container[data-under-top] .zen__sticky-top::after,
+.zen__table-container[data-under-bottom] .zen__sticky-bottom::before {
+    content: '';
+    position: absolute;
+    inset-inline: 0;
+    height: 1.75rem;
+    pointer-events: none;
+}
+.zen__table-container[data-under-top] .zen__sticky-top::after {
+    top: 100%;
+    background: linear-gradient(to bottom, var(--zen-sticky-fill), transparent);
+}
+.zen__table-container[data-under-bottom] .zen__sticky-bottom::before {
+    bottom: 100%;
+    background: linear-gradient(to top, var(--zen-sticky-fill), transparent);
+}
 
 /* ───────────────────────── Code ───────────────────────── */
 
@@ -348,6 +379,7 @@ html[data-zen-graphics='lite'] .zen__table-container[data-under-bottom] .zen__st
     --sh-entity: oklch(0.5 0.12 200);
     --sh-string: oklch(0.5 0.14 150);
     --sh-keyword: oklch(0.5 0.2 330);
+    --sh-comment: oklch(var(--muted-foreground));
 }
 
 /* ───────────────────────── Backdrop: contours / dots + light ───────────────────────── */
@@ -456,7 +488,7 @@ html[data-zen-graphics='lite'] .zen__table-container[data-under-bottom] .zen__st
     background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
     box-shadow:
         inset 0 0 0 1px oklch(var(--glow) / 0.35),
-        0 0 24px -4px oklch(var(--glow) / 0.6);
+        0 0 24px -4px oklch(var(--glow) / calc(0.6 * var(--glow-k)));
 }
 :has(> .zen__tab-bar[data-pending]) > [role='tab'][aria-selected='true'] {
     /* The bar straddles the track's bottom border: 1px above its edge, 1px below. */
@@ -476,7 +508,15 @@ main[data-zen-skip-target]:focus {
  * the old one closes in over the new). The water is a canvas
  * drawn over both, in a layer of its own that shows as it is (no fade). A
  * theme on one element (themeWave's target) changes in its own layer.
+ *
+ * The page is captured whole: an app's own view-transition names (a header,
+ * a backdrop kept still across routes) would put their parts in layers of
+ * their own, outside the clip, cross-fading. themeWave sets its own names inline,
+ * important, over this.
  */
+html.zen-theme-waving * {
+    view-transition-name: none !important;
+}
 html.zen-theme-waving::view-transition-old(root),
 html.zen-theme-waving::view-transition-new(root),
 html.zen-theme-waving::view-transition-group(zen-theme-area),
@@ -1100,7 +1140,11 @@ html.zen-theme-closing::view-transition-old(zen-theme-area) {
     }
 }
 
-/* Reduced motion: the OS setting, or opt in with html.reduce-motion. */
+/*
+ * Reduced motion: the OS setting, or opt in with html.reduce-motion. It reaches
+ * every element with a zen__ class, so each part that moves (a meter's fill, a
+ * toggle's thumb, a chevron) carries one of its own.
+ */
 @media (prefers-reduced-motion: reduce) {
     .zen-backdrop *,
     .zen-backdrop *::before,

package/dist/toast/index.js

@@ -72,7 +72,7 @@ function E({ children: n, offset: r, viewportClassName: i }) {
 			onBlur: (e) => {
 				e.currentTarget.contains(e.relatedTarget) || z(!1);
 			},
-			className: e("zen__toast-viewport fixed top-auto right-4 bottom-[calc(var(--zen-toast-offset,1rem)+env(safe-area-inset-bottom))] left-auto z-50 m-0 w-[calc(100vw-2rem)] overflow-visible border-0 bg-transparent p-0 text-inherit outline-hidden md:bottom-5 md:w-[24rem]", "transition-[height] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)]", i),
+			className: e("zen__toast-viewport fixed top-auto right-4 bottom-[calc(var(--zen-toast-offset,1rem)+env(safe-area-inset-bottom))] left-auto z-50 m-0 w-[calc(100vw-2rem)] overflow-visible border-0 bg-transparent p-0 text-inherit outline-hidden md:bottom-5 md:w-[24rem]", "ease-out-soft transition-[height] duration-300", i),
 			style: {
 				height: Y,
 				...r && { "--zen-toast-offset": r }
@@ -117,14 +117,14 @@ var A = {
 		ring: "border-primary/30",
 		badge: "bg-primary/15 text-primary",
 		bar: "bg-primary",
-		glow: "shadow-[0_18px_50px_-18px_oklch(var(--glow)/0.55)]"
+		glow: "shadow-[0_18px_50px_-18px_oklch(var(--glow)/calc(0.55*var(--glow-k)))]"
 	},
 	error: {
 		icon: n,
 		ring: "border-destructive/40",
-		badge: "bg-destructive/15 text-destructive",
+		badge: "bg-destructive/10 text-destructive",
 		bar: "bg-destructive",
-		glow: "shadow-[0_18px_50px_-18px_oklch(var(--destructive)/0.55)]"
+		glow: "shadow-[0_18px_50px_-18px_oklch(var(--destructive)/calc(0.55*var(--glow-k)))]"
 	},
 	info: {
 		icon: i,
@@ -197,7 +197,7 @@ function j({ toast: t, layout: n, z: r, paused: i, onDismiss: o, onHeight: s, cl
 		onPointerMove: k,
 		onPointerUp: j,
 		onPointerCancel: j,
-		className: e("zen__toast group glass glass-blur glow-edge text-card-foreground absolute! inset-x-0 bottom-0 origin-bottom touch-pan-y overflow-hidden rounded-2xl border select-none", "transition-[transform,translate,opacity,height] duration-400 ease-[cubic-bezier(0.2,0.8,0.2,1)] data-swiping:transition-none", b && "starting:translate-y-full starting:opacity-0", n.hidden && "opacity-0", t.leaving === "fade" && "translate-y-[35%] opacity-0", t.leaving === "swipe" && "translate-x-full opacity-0", g.ring, g.glow),
+		className: e("zen__toast group glass glass-blur glow-edge text-card-foreground absolute! inset-x-0 bottom-0 origin-bottom touch-pan-y overflow-hidden rounded-2xl border select-none", "ease-out-soft transition-[transform,translate,opacity,height] duration-400 data-swiping:transition-none", b && "starting:translate-y-full starting:opacity-0", n.hidden && "opacity-0", t.leaving === "fade" && "translate-y-[35%] opacity-0", t.leaving === "swipe" && "translate-x-full opacity-0", g.ring, g.glow),
 		style: {
 			zIndex: r,
 			height: n.height,

package/dist/toggle/index.js

@@ -5,7 +5,7 @@ import { jsx as t, jsxs as n } from "react/jsx-runtime";
 function r(r) {
 	let { className: i, onChange: a, onKeyDown: o, disabled: s, ...c } = r;
 	return /* @__PURE__ */ n("label", {
-		className: e("zen__toggle border-tint/10 bg-tint/[0.06] relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border p-0.5", "has-focus-visible:ring-glow/50 transition-[background-color,box-shadow,border-color] duration-300 has-focus-visible:ring-2", "has-checked:border-glow/60 has-checked:bg-glow/40 has-checked:shadow-[0_0_18px_-2px_oklch(var(--glow)/0.8)]", "has-disabled:cursor-not-allowed has-disabled:opacity-50", i),
+		className: e("zen__toggle bg-tint/[0.06] relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border border-[color:oklch(var(--tint)/var(--zen-control-edge))] p-0.5", "has-focus-visible:ring-glow/50 transition-[background-color,box-shadow,border-color] duration-300 has-focus-visible:ring-2", "has-checked:border-glow/60 has-checked:bg-glow/40 has-checked:shadow-[0_0_18px_-2px_oklch(var(--glow)/calc(0.8*var(--glow-k)))]", "has-disabled:cursor-not-allowed has-disabled:opacity-50", i),
 		children: [/* @__PURE__ */ t("input", {
 			type: "checkbox",
 			role: "switch",
@@ -18,7 +18,7 @@ function r(r) {
 			...c
 		}), /* @__PURE__ */ t("span", {
 			"aria-hidden": !0,
-			className: e("size-[1.125rem] rounded-full bg-white/70 shadow-md", "transition-[translate,background-color] duration-300 ease-[cubic-bezier(0.2,0.8,0.2,1)]", "peer-checked:translate-x-5 peer-checked:bg-white")
+			className: e("size-[1.125rem] rounded-full bg-[var(--zen-thumb-off)] shadow-md", "zen__toggle-thumb ease-out-soft transition-[translate,background-color] duration-300", "peer-checked:translate-x-5 peer-checked:bg-white")
 		})]
 	});
 }

package/dist/tree/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tree/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/tree/index.tsx"],"names":[],"mappings":"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"}

package/dist/tree/index.js

@@ -148,7 +148,7 @@ function m({ expanded: t, onToggle: n, className: i, ...a }) {
 		"aria-expanded": t,
 		className: e("text-muted-foreground hover:bg-tint/[0.08] hover:text-foreground focus-visible:ring-ring/50 -ml-1 grid size-6 shrink-0 cursor-pointer place-items-center rounded-md outline-hidden transition-colors focus-visible:ring-2", i),
 		...a,
-		children: /* @__PURE__ */ c(r, { className: e("size-4 transition-transform duration-200 ease-out", t && "rotate-90") })
+		children: /* @__PURE__ */ c(r, { className: e("zen__tree-chevron size-4 transition-transform duration-200 ease-out", t && "rotate-90") })
 	});
 }
 //#endregion

package/dist/utils/field-chevron.js

@@ -4,7 +4,7 @@ import t from "../icons/micro/chevron-down.js";
 import { jsx as n } from "react/jsx-runtime";
 //#region packages/utils/field-chevron.tsx
 function r({ open: r, className: i }) {
-	return /* @__PURE__ */ n(t, { className: e("text-muted-foreground size-4 shrink-0 transition-transform duration-300", r && "rotate-180", i) });
+	return /* @__PURE__ */ n(t, { className: e("zen__field-chevron text-muted-foreground size-4 shrink-0 transition-transform duration-300", r && "rotate-180", i) });
 }
 //#endregion
 export { r as FieldChevron };

package/dist/utils/styles.d.ts

@@ -1,20 +1,26 @@
 /** Shared field look: faint glass, a hairline in the glow colour (white would grey it out) lit by the pointer, violet glow on focus. */
 export declare const FIELD: string;
+/**
+ * Placeholder text in a trigger that shows one (Select, MonthPicker, DatePicker…). Fields use the same
+ * colours through placeholder: in FIELD. --zen-placeholder dims it on dark glass, so a placeholder can't
+ * pass for a value there (about 4.9:1 against 16.6:1); light mode already separates them.
+ */
+export declare const PLACEHOLDER = "text-[color:oklch(var(--muted-foreground)/var(--zen-placeholder))]";
 /** A picker's previous/next arrows (Calendar, MonthPicker). */
 export declare const PICKER_NAV = "text-muted-foreground cursor-pointer hover:bg-tint/[0.07] hover:text-foreground focus-visible:ring-ring/50 grid size-8 place-items-center rounded-md outline-hidden transition-colors focus-visible:ring-2";
 /** A month in a picker's month grid (Calendar, MonthPicker); add PICKER_MONTH_ON for the chosen one. */
 export declare const PICKER_MONTH = "cursor-pointer rounded-lg py-2 text-sm outline-hidden transition-colors disabled:cursor-not-allowed disabled:opacity-35 focus-visible:ring-ring/50 focus-visible:ring-2 hover:bg-tint/[0.07]";
 export declare const PICKER_MONTH_ON = "bg-primary text-primary-foreground hover:bg-primary";
 /** Glow a trigger carries while its popup is open. */
-export declare const TRIGGER_OPEN = "border-glow/60 [--glow-border-color:transparent] shadow-[0_0_0_3px_oklch(var(--glow)/0.16),0_0_24px_-6px_oklch(var(--glow)/0.6)]";
+export declare const TRIGGER_OPEN = "border-glow/60 [--glow-border-color:transparent] shadow-glow-focus";
 /** Trigger for popup fields (dropdown): a field that glows while open. */
 export declare const TRIGGER: string;
 /** Popup panel (popover, dropdown list): glass with a soft glow. */
-export declare const POPUP = "glass glass-blur rounded-xl text-foreground shadow-[var(--popup-shadow),0_0_40px_-20px_oklch(var(--glow)/0.5)] outline-hidden";
+export declare const POPUP = "glass glass-blur rounded-xl text-foreground shadow-[var(--popup-shadow),0_0_40px_-20px_oklch(var(--glow)/calc(0.5*var(--glow-k)))] outline-hidden";
 /** Pills (and TabList variant="pills"): a glass track… */
 export declare const PILL_TRACK = "glow-edge relative flex w-fit items-center gap-1 rounded-full border border-tint/5 bg-tint/[0.03] p-1";
 /** …a glowing pill that slides to the active item (its look is repeated in theme.css, for before it's measured)… */
-export declare const PILL_INDICATOR = "absolute top-1 bottom-1 left-0 rounded-full bg-primary/15 shadow-[inset_0_0_0_1px_oklch(var(--glow)/0.35),0_0_24px_-4px_oklch(var(--glow)/0.6)] transition-[translate,width] duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)]";
+export declare const PILL_INDICATOR = "absolute top-1 bottom-1 left-0 rounded-full bg-primary/15 shadow-[inset_0_0_0_1px_oklch(var(--glow)/0.35),0_0_24px_-4px_oklch(var(--glow)/calc(0.6*var(--glow-k)))] transition-[translate,width] duration-500 ease-out-soft";
 /** …and items that sit above it, lit when current (a link) or selected (a tab). Only their text colour
  * transitions: the pill they wear before the indicator is measured (theme.css) must go at once. */
 export declare const PILL: string;

package/dist/utils/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../packages/utils/styles.ts"],"names":[],"mappings":"AAEA,wIAAwI;AACxI,eAAO,MAAM,KAAK,QAKmC,CAAC;AAEtD,+DAA+D;AAC/D,eAAO,MAAM,UAAU,+MACyL,CAAC;AAEjN,wGAAwG;AACxG,eAAO,MAAM,YAAY,iMACyK,CAAC;AACnM,eAAO,MAAM,eAAe,wDAAwD,CAAC;AAErF,sDAAsD;AACtD,eAAO,MAAM,YAAY,qIAC6G,CAAC;AAEvI,0EAA0E;AAC1E,eAAO,MAAM,OAAO,QAA+F,CAAC;AAEpH,oEAAoE;AACpE,eAAO,MAAM,KAAK,kIACiH,CAAC;AAEpI,0DAA0D;AAC1D,eAAO,MAAM,UAAU,0GACoF,CAAC;AAE5G,oHAAoH;AACpH,eAAO,MAAM,cAAc,iOACuM,CAAC;AAEnO;mGACmG;AACnG,eAAO,MAAM,IAAI,QAEkG,CAAC;AAEpH;;;;GAIG;AACH,eAAO,MAAM,YAAY,QAK4B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../packages/utils/styles.ts"],"names":[],"mappings":"AAEA,wIAAwI;AACxI,eAAO,MAAM,KAAK,QAKmC,CAAC;AAEtD;;;;GAIG;AACH,eAAO,MAAM,WAAW,uEAAuE,CAAC;AAEhG,+DAA+D;AAC/D,eAAO,MAAM,UAAU,+MACyL,CAAC;AAEjN,wGAAwG;AACxG,eAAO,MAAM,YAAY,iMACyK,CAAC;AACnM,eAAO,MAAM,eAAe,wDAAwD,CAAC;AAErF,sDAAsD;AACtD,eAAO,MAAM,YAAY,uEAAuE,CAAC;AAEjG,0EAA0E;AAC1E,eAAO,MAAM,OAAO,QAA+F,CAAC;AAEpH,oEAAoE;AACpE,eAAO,MAAM,KAAK,sJACqI,CAAC;AAExJ,0DAA0D;AAC1D,eAAO,MAAM,UAAU,0GACoF,CAAC;AAE5G,oHAAoH;AACpH,eAAO,MAAM,cAAc,gOACsM,CAAC;AAElO;mGACmG;AACnG,eAAO,MAAM,IAAI,QAEkG,CAAC;AAEpH;;;;GAIG;AACH,eAAO,MAAM,YAAY,QAK4B,CAAC"}

package/dist/utils/styles.js

@@ -1,6 +1,6 @@
 "use client";
 import { cx as e } from "./cx.js";
 //#region packages/utils/styles.ts
-var t = "glow-border h-10 rounded-lg border [--glow-border-color:oklch(var(--glow)/0.22)] bg-tint/[0.035] px-3 text-sm text-foreground shadow-[inset_0_1px_0_hsl(0_0%_100%/0.04)] transition-[border-color,background-color,box-shadow,--glow-border-color] duration-200 placeholder:text-muted-foreground hover:[--glow-border-color:oklch(var(--glow)/0.4)] focus-visible:border-glow/60 focus-visible:[--glow-border-color:transparent] focus-visible:bg-tint/[0.05] focus-visible:shadow-[0_0_0_3px_oklch(var(--glow)/0.16),0_0_24px_-6px_oklch(var(--glow)/0.6)] focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", n = "text-muted-foreground cursor-pointer hover:bg-tint/[0.07] hover:text-foreground focus-visible:ring-ring/50 grid size-8 place-items-center rounded-md outline-hidden transition-colors focus-visible:ring-2", r = "cursor-pointer rounded-lg py-2 text-sm outline-hidden transition-colors disabled:cursor-not-allowed disabled:opacity-35 focus-visible:ring-ring/50 focus-visible:ring-2 hover:bg-tint/[0.07]", i = "bg-primary text-primary-foreground hover:bg-primary", a = "border-glow/60 [--glow-border-color:transparent] shadow-[0_0_0_3px_oklch(var(--glow)/0.16),0_0_24px_-6px_oklch(var(--glow)/0.6)]", o = e(t, "inline-flex cursor-pointer items-center justify-between gap-2 whitespace-nowrap"), s = "glass glass-blur rounded-xl text-foreground shadow-[var(--popup-shadow),0_0_40px_-20px_oklch(var(--glow)/0.5)] outline-hidden", c = "glow-edge relative flex w-fit items-center gap-1 rounded-full border border-tint/5 bg-tint/[0.03] p-1", l = "absolute top-1 bottom-1 left-0 rounded-full bg-primary/15 shadow-[inset_0_0_0_1px_oklch(var(--glow)/0.35),0_0_24px_-4px_oklch(var(--glow)/0.6)] transition-[translate,width] duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)]", u = "relative z-10 cursor-pointer disabled:cursor-not-allowed rounded-full px-3.5 py-1.5 text-sm whitespace-nowrap outline-hidden transition-[color] duration-300 select-none focus-visible:ring-2 focus-visible:ring-ring/40 text-muted-foreground hover:text-foreground aria-[current=page]:text-foreground aria-selected:text-foreground", d = "glow-border flex w-full items-center gap-1.5 h-10 rounded-lg border [--glow-border-color:oklch(var(--glow)/0.22)] bg-tint/[0.035] px-3 text-sm text-foreground shadow-[inset_0_1px_0_hsl(0_0%_100%/0.04)] transition-[border-color,background-color,box-shadow,--glow-border-color] duration-200 placeholder:text-muted-foreground hover:[--glow-border-color:oklch(var(--glow)/0.4)] focus-within:border-glow/60 focus-within:[--glow-border-color:transparent] focus-within:bg-tint/[0.05] focus-within:shadow-[0_0_0_3px_oklch(var(--glow)/0.16),0_0_24px_-6px_oklch(var(--glow)/0.6)] focus-within:outline-hidden disabled:cursor-not-allowed disabled:opacity-50";
+var t = "glow-border h-10 rounded-lg border [--glow-border-color:oklch(var(--glow)/0.22)] bg-tint/[0.035] px-3 text-sm text-foreground shadow-[inset_0_1px_0_hsl(0_0%_100%/0.04)] transition-[border-color,background-color,box-shadow,--glow-border-color] duration-200 placeholder:text-[color:oklch(var(--muted-foreground)/var(--zen-placeholder))] hover:[--glow-border-color:oklch(var(--glow)/0.4)] focus-visible:border-glow/60 focus-visible:[--glow-border-color:transparent] focus-visible:bg-tint/[0.05] focus-visible:shadow-glow-focus focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", n = "text-[color:oklch(var(--muted-foreground)/var(--zen-placeholder))]", r = "text-muted-foreground cursor-pointer hover:bg-tint/[0.07] hover:text-foreground focus-visible:ring-ring/50 grid size-8 place-items-center rounded-md outline-hidden transition-colors focus-visible:ring-2", i = "cursor-pointer rounded-lg py-2 text-sm outline-hidden transition-colors disabled:cursor-not-allowed disabled:opacity-35 focus-visible:ring-ring/50 focus-visible:ring-2 hover:bg-tint/[0.07]", a = "bg-primary text-primary-foreground hover:bg-primary", o = "border-glow/60 [--glow-border-color:transparent] shadow-glow-focus", s = e(t, "inline-flex cursor-pointer items-center justify-between gap-2 whitespace-nowrap"), c = "glass glass-blur rounded-xl text-foreground shadow-[var(--popup-shadow),0_0_40px_-20px_oklch(var(--glow)/calc(0.5*var(--glow-k)))] outline-hidden", l = "glow-edge relative flex w-fit items-center gap-1 rounded-full border border-tint/5 bg-tint/[0.03] p-1", u = "absolute top-1 bottom-1 left-0 rounded-full bg-primary/15 shadow-[inset_0_0_0_1px_oklch(var(--glow)/0.35),0_0_24px_-4px_oklch(var(--glow)/calc(0.6*var(--glow-k)))] transition-[translate,width] duration-500 ease-out-soft", d = "relative z-10 cursor-pointer disabled:cursor-not-allowed rounded-full px-3.5 py-1.5 text-sm whitespace-nowrap outline-hidden transition-[color] duration-300 select-none focus-visible:ring-2 focus-visible:ring-ring/40 text-muted-foreground hover:text-foreground aria-[current=page]:text-foreground aria-selected:text-foreground", f = "glow-border flex w-full items-center gap-1.5 h-10 rounded-lg border [--glow-border-color:oklch(var(--glow)/0.22)] bg-tint/[0.035] px-3 text-sm text-foreground shadow-[inset_0_1px_0_hsl(0_0%_100%/0.04)] transition-[border-color,background-color,box-shadow,--glow-border-color] duration-200 placeholder:text-[color:oklch(var(--muted-foreground)/var(--zen-placeholder))] hover:[--glow-border-color:oklch(var(--glow)/0.4)] focus-within:border-glow/60 focus-within:[--glow-border-color:transparent] focus-within:bg-tint/[0.05] focus-within:shadow-glow-focus focus-within:outline-hidden disabled:cursor-not-allowed disabled:opacity-50";
 //#endregion
-export { t as FIELD, d as FIELD_WITHIN, r as PICKER_MONTH, i as PICKER_MONTH_ON, n as PICKER_NAV, u as PILL, l as PILL_INDICATOR, c as PILL_TRACK, s as POPUP, o as TRIGGER, a as TRIGGER_OPEN };
+export { t as FIELD, f as FIELD_WITHIN, i as PICKER_MONTH, a as PICKER_MONTH_ON, r as PICKER_NAV, d as PILL, u as PILL_INDICATOR, l as PILL_TRACK, n as PLACEHOLDER, c as POPUP, s as TRIGGER, o as TRIGGER_OPEN };

package/dist/utils/theme-wave.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme-wave.d.ts","sourceRoot":"","sources":["../../packages/utils/theme-wave.ts"],"names":[],"mappings":"AA6NA;;;;;GAKG;AACH,wBAAgB,gBAAgB,IAAI,IAAI,CAIvC;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CACrB,MAAM,EAAE,MAAM,IAAI,EAClB,IAAI,CAAC,EAAE,OAAO,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,EAChD,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI,GACxB,IAAI,CAuJN"}
+{"version":3,"file":"theme-wave.d.ts","sourceRoot":"","sources":["../../packages/utils/theme-wave.ts"],"names":[],"mappings":"AA6NA;;;;;GAKG;AACH,wBAAgB,gBAAgB,IAAI,IAAI,CAIvC;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CACrB,MAAM,EAAE,MAAM,IAAI,EAClB,IAAI,CAAC,EAAE,OAAO,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,EAChD,MAAM,CAAC,EAAE,OAAO,GAAG,IAAI,GACxB,IAAI,CA4JN"}

package/dist/utils/theme-wave.js

@@ -30,7 +30,7 @@ var n = 1330, r = [
 	]
 ], l = 48, u = 72, d = 28, f = "zen-theme-waving", p = "zen-theme-closing", m = "zen-theme-water", h = "zen-theme-area", g = 0, _ = null;
 function v() {
-	_ && (_.style.viewTransitionName = _.name), _ = null;
+	_ && _.style.setProperty("view-transition-name", _.name, _.priority), _ = null;
 }
 function y(e, t, n) {
 	let r = Math.min(1, Math.max(0, (n - e) / (t - e)));
@@ -126,7 +126,7 @@ function T() {
 	if (w !== void 0) return w;
 	w = null;
 	let e = document.createElement("canvas");
-	e.setAttribute("aria-hidden", "true"), e.style.cssText = `position:fixed;pointer-events:none;z-index:2147483647;view-transition-name:${m}`;
+	e.setAttribute("aria-hidden", "true"), e.style.cssText = `position:fixed;pointer-events:none;z-index:2147483647;view-transition-name:${m} !important`;
 	let t = e.getContext("webgl", {
 		premultipliedAlpha: !0,
 		antialias: !1
@@ -185,8 +185,9 @@ function A(e, t, o) {
 		let { style: e } = o;
 		_ = {
 			style: e,
-			name: e.viewTransitionName
-		}, e.viewTransitionName = h;
+			name: e.getPropertyValue("view-transition-name"),
+			priority: e.getPropertyPriority("view-transition-name")
+		}, e.setProperty("view-transition-name", h, "important");
 	}
 	Object.assign(M.canvas.style, {
 		left: `${w}px`,

package/dist/utils/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../packages/utils/theme.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,eAAO,MAAM,WAAW,iDAAkD,CAAC;AAC3E,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AACrD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;AAE1C,MAAM,WAAW,aAAa;IAC1B,MAAM,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC5B,8BAA8B;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,SAAS,CAAC;IACrB,kEAAkE;IAClE,IAAI,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC3B,QAAQ,EAAE,UAAU,GAAG,MAAM,CAAC;IAC9B,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,CAAC;IAChC,6DAA6D;IAC7D,UAAU,EAAE,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;CAC5C;AAED,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAcjB,CAAC;AACJ,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC;AAEtD,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,aAQ3B,CAAC;AAEF,4DAA4D;AAC5D,wBAAgB,WAAW,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,QAAQ,GAAG,aAAa,CAG7E;AAED,6DAA6D;AAC7D,wBAAgB,SAAS,CACrB,KAAK,EAAE,aAAa,EACpB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,KAAK,GAAG,WAAW,GAAG,MAAM,CAAC,CAAC,GAClE,aAAa,CAEf;AAQD,qFAAqF;AACrF,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,GAAE,UAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAmEvG;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CACtB,KAAK,EAAE,aAAa,EACpB,EAAE,UAAmB,EAAE,MAAM,EAAE,GAAE;IAAE,UAAU,CAAC,EAAE,UAAU,CAAC;IAAC,MAAM,CAAC,EAAE,WAAW,CAAA;CAAO,GACxF,IAAI,CAGN;AAED,mEAAmE;AACnE,wBAAgB,UAAU,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAGrD;AAED,yEAAyE;AACzE,wBAAgB,cAAc,CAAC,GAAG,EAAE,OAAO,GAAG,aAAa,CAkB1D;AAID,sDAAsD;AACtD,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAa1E;AAED,wDAAwD;AACxD,wBAAgB,aAAa,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAO1D"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../packages/utils/theme.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,eAAO,MAAM,WAAW,iDAAkD,CAAC;AAC3E,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AACrD,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;AAE1C,MAAM,WAAW,aAAa;IAC1B,MAAM,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC5B,8BAA8B;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,SAAS,EAAE,SAAS,CAAC;IACrB,kEAAkE;IAClE,IAAI,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC3B,QAAQ,EAAE,UAAU,GAAG,MAAM,CAAC;IAC9B,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,QAAQ,CAAC;IAChC,6DAA6D;IAC7D,UAAU,EAAE,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;CAC5C;AAED,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAcjB,CAAC;AACJ,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC;AAEtD,gEAAgE;AAChE,eAAO,MAAM,aAAa,EAAE,aAQ3B,CAAC;AAEF,4DAA4D;AAC5D,wBAAgB,WAAW,CAAC,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,QAAQ,GAAG,aAAa,CAG7E;AAED,6DAA6D;AAC7D,wBAAgB,SAAS,CACrB,KAAK,EAAE,aAAa,EACpB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,aAAa,EAAE,KAAK,GAAG,WAAW,GAAG,MAAM,CAAC,CAAC,GAClE,aAAa,CAEf;AAQD,qFAAqF;AACrF,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,GAAE,UAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAyEvG;AAED;;;;GAIG;AACH,wBAAgB,UAAU,CACtB,KAAK,EAAE,aAAa,EACpB,EAAE,UAAmB,EAAE,MAAM,EAAE,GAAE;IAAE,UAAU,CAAC,EAAE,UAAU,CAAC;IAAC,MAAM,CAAC,EAAE,WAAW,CAAA;CAAO,GACxF,IAAI,CAGN;AAED,mEAAmE;AACnE,wBAAgB,UAAU,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAGrD;AAED,yEAAyE;AACzE,wBAAgB,cAAc,CAAC,GAAG,EAAE,OAAO,GAAG,aAAa,CAkB1D;AAID,sDAAsD;AACtD,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAa1E;AAED,wDAAwD;AACxD,wBAAgB,aAAa,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAO1D"}

package/dist/utils/theme.js

@@ -92,7 +92,10 @@ function c(e, t = "dark") {
 		off: 0,
 		subtle: .55,
 		visible: 1
-	}[e.topography]) };
+	}[e.topography]) }, d = (t) => ({
+		"glow-strength": String(t[e.glow]),
+		"glow-k": `calc(var(--glow-strength) / ${t.soft})`
+	});
 	return t === "light" ? {
 		background: l(i ? .995 : .985, .4),
 		foreground: o(i ? .16 : .21, .02, n),
@@ -116,11 +119,11 @@ function c(e, t = "dark") {
 		glow: o(.62, c ? .02 : Math.min(.2, r * 1.4), n),
 		"glow-2": o(.65, c ? .02 : r * 1.05, n + 30),
 		tint: o(.21, .02, n),
-		"glow-strength": String({
+		...d({
 			off: 0,
 			soft: .4,
 			bright: .8
-		}[e.glow]),
+		}),
 		...u
 	} : {
 		background: l(i ? .13 : .155),
@@ -141,15 +144,15 @@ function c(e, t = "dark") {
 		"accent-foreground": o(.88, r * .5, n),
 		ring: o(.72, r, n),
 		destructive: o(.64, .2, 25),
-		"destructive-foreground": o(.985, 0, 0),
+		"destructive-foreground": o(.13, .02, 25),
 		glow: o(.7, c ? .02 : r, n),
 		"glow-2": o(.72, c ? .02 : r * .75, n + 30),
 		tint: o(1, 0, 0),
-		"glow-strength": String({
+		...d({
 			off: 0,
 			soft: .55,
 			bright: 1
-		}[e.glow]),
+		}),
 		...u
 	};
 }

package/dist/variables.css

@@ -27,7 +27,7 @@
     --accent: 0.3 0.046 295;
     --accent-foreground: 0.88 0.065 295;
     --destructive: 0.64 0.2 25;
-    --destructive-foreground: 0.985 0 0;
+    --destructive-foreground: 0.13 0.02 25;
 
     --border: 0.28 0.021 295;
     --input: 0.28 0.021 295;
@@ -37,12 +37,27 @@
     --glow: 0.7 0.13 295;
     --glow-2: 0.72 0.098 325; /* analogous, a little further round the wheel */
     --glow-strength: 0.55; /* 0 turns every glow off */
+    /*
+     * Component halos (a checked box, a primary button, a focused field) are
+     * tuned at the default strength; their alphas are scaled by this, so the
+     * default looks as designed and 0 turns them off too.
+     */
+    --glow-k: calc(var(--glow-strength) / 0.55);
 
     /*
      * Ink for translucent overlays (hairlines, glass fills, hover tints), used as
      * oklch(var(--tint) / alpha): white on dark, deep violet-grey on light.
      */
     --tint: 1 0 0;
+    /*
+     * Contrast floors for neutral parts, per theme (internal: no utilities of their own).
+     * Edges of unchecked checkboxes, radios and switches reach 3:1 against a card;
+     * placeholders reach 4.5:1 while staying clearly dimmer than a typed value.
+     */
+    --zen-control-edge: 0.35;
+    --zen-control-edge-hover: 0.5;
+    --zen-placeholder: 0.8;
+    --zen-thumb-off: oklch(1 0 0 / 0.7);
     --glass-shadow: 0 10px 40px -12px hsl(0 0% 0% / 0.6);
     --popup-shadow: 0 20px 60px -20px hsl(0 0% 0% / 0.8);
     --toast-shadow: 0 18px 50px -20px oklch(0 0 0 / 0.8);
@@ -93,8 +108,14 @@
     --glow: 0.62 0.182 295;
     --glow-2: 0.65 0.137 325;
     --glow-strength: 0.4;
+    --glow-k: calc(var(--glow-strength) / 0.4);
 
     --tint: 0.21 0.02 295;
+    --zen-control-edge: 0.5;
+    --zen-control-edge-hover: 0.65;
+    --zen-placeholder: 1;
+    /* A white thumb is lost on the pale track. */
+    --zen-thumb-off: oklch(var(--tint) / 0.5);
     --glass-shadow: 0 10px 30px -14px oklch(0.3 0.05 295 / 0.25);
     --popup-shadow: 0 20px 50px -20px oklch(0.3 0.05 295 / 0.35);
     --toast-shadow: 0 18px 50px -20px oklch(0.3 0.05 295 / 0.35);