@mkbabb/glass-ui 4.2.0 → 6.0.0

package/dist/completion-seal.js

@@ -1,89 +1,132 @@
-import { t as e } from "./cn-DJXf4yaB.js";
-import { computed as t, createCommentVNode as n, createElementBlock as r, defineComponent as i, normalizeClass as a, onMounted as o, openBlock as s, readonly as c, ref as l, toDisplayString as u, toRef as d, unref as f, watch as p } from "vue";
-//#region src/components/custom/completion-seal/composables/useCompletionSeal.ts
-function m() {
-	return typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-}
-function h(e) {
+import { t as e } from "./class-names-5jotTFzp.js";
+import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, normalizeClass as s, onMounted as c, onScopeDispose as l, openBlock as u, readonly as d, ref as f, toDisplayString as p, toRef as m, unref as h, watch as g } from "vue";
+import { useMediaQuery as _ } from "@vueuse/core";
+//#region src/components/completion-seal/composables/useCompletionSeal.ts
+function v(e) {
 	if (e != null) return typeof e == "function" ? e() : e.value;
 }
-function g(e = {}) {
-	let { play: n, respectReducedMotion: r = !0 } = e, i = l(!1), a = l(!1), s = t(() => r && m());
-	function u() {
+function y(e = {}) {
+	let { play: t, respectReducedMotion: r = !0 } = e, i = f(!1), a = f(!1), o = _("(prefers-reduced-motion: reduce)"), s = n(() => r && o.value), u = null;
+	function p() {
+		u !== null && (cancelAnimationFrame(u), u = null), i.value = !1, a.value = !0;
+	}
+	function m() {
 		if (s.value) {
-			i.value = !1, a.value = !0;
+			p();
 			return;
 		}
-		i.value = !1, typeof requestAnimationFrame == "function" ? requestAnimationFrame(() => {
+		i.value = !1, typeof requestAnimationFrame == "function" ? (u !== null && cancelAnimationFrame(u), u = requestAnimationFrame(() => {
+			if (u = null, s.value) {
+				p();
+				return;
+			}
 			i.value = !0, a.value = !0;
-		}) : (i.value = !0, a.value = !0);
+		})) : (i.value = !0, a.value = !0);
 	}
-	return n == null ? o(u) : (o(() => {
-		h(n) && u();
-	}), p(() => h(n), (e, t) => {
-		e && !t && u();
+	return g(s, (e) => {
+		e && p();
+	}), l(() => {
+		u !== null && cancelAnimationFrame(u);
+	}), t == null ? c(m) : (c(() => {
+		v(t) && m();
+	}), g(() => v(t), (e, t) => {
+		e && !t && m();
 	})), {
-		playing: c(i),
-		drawn: c(a),
-		reduced: c(s),
-		draw: u
+		playing: d(i),
+		drawn: d(a),
+		reduced: d(s),
+		draw: m
 	};
 }
-var _ = "0 0 64 64", v = {
+var b = "0 0 64 64", x = {
 	check: "M16 33 L28 45 L48 19",
 	wordmark: "M14 30 L26 42 L50 16 M14 50 L50 50"
-}, y = {
+}, S = {
 	cx: 32,
 	cy: 32,
 	r: 24
-}, b = [
+}, C = {
+	cx: 32,
+	cy: 32,
+	r: 21
+}, w = [
 	"data-shape",
+	"data-best",
 	"data-play",
 	"data-drawn"
-], x = ["viewBox"], S = [
+], T = ["viewBox"], E = [
+	"cx",
+	"cy",
+	"r"
+], D = [
+	"cx",
+	"cy",
+	"r"
+], O = ["d"], k = [
 	"cx",
 	"cy",
 	"r"
-], C = ["d"], w = {
+], A = ["d"], j = {
 	key: 0,
 	class: "sr-only"
-}, T = /* @__PURE__ */ i({
+}, M = /* @__PURE__ */ o({
 	name: "CompletionSeal",
 	__name: "CompletionSeal",
 	props: {
 		shape: {},
 		label: {},
 		play: { type: Boolean },
+		personalBest: { type: Boolean },
 		class: {}
 	},
-	setup(i) {
-		let o = i, c = t(() => o.shape ?? "check"), l = t(() => c.value === "wordmark" ? v.wordmark : v.check), { playing: p, drawn: m } = g({ play: o.play === void 0 ? void 0 : d(o, "play") });
-		return (t, i) => (s(), r("div", {
-			class: a(["completion-seal", f(e)(o.class)]),
-			"data-shape": c.value,
-			"data-play": f(p) ? "" : void 0,
-			"data-drawn": f(m) ? "" : void 0,
+	setup(o) {
+		let c = o, l = n(() => c.shape ?? "check"), d = n(() => l.value === "wordmark" ? x.wordmark : x.check), { playing: f, drawn: g } = y({ play: c.play === void 0 ? void 0 : m(c, "play") });
+		return (n, o) => (u(), i("div", {
+			class: s(["completion-seal", h(e)(c.class)]),
+			"data-shape": l.value,
+			"data-best": c.personalBest ? "" : void 0,
+			"data-play": h(f) ? "" : void 0,
+			"data-drawn": h(g) ? "" : void 0,
 			role: "status",
 			"aria-live": "polite"
-		}, [(s(), r("svg", {
+		}, [(u(), i("svg", {
 			class: "completion-seal__svg",
-			viewBox: f(_),
+			viewBox: h(b),
 			"aria-hidden": "true",
 			focusable: "false"
-		}, [c.value === "ring" ? (s(), r("circle", {
-			key: 0,
+		}, [l.value === "disc" ? (u(), i(t, { key: 0 }, [
+			a("circle", {
+				class: "completion-seal__disc",
+				cx: h(C).cx,
+				cy: h(C).cy,
+				r: h(C).r
+			}, null, 8, E),
+			a("circle", {
+				class: "completion-seal__mark completion-seal__ring",
+				cx: h(S).cx,
+				cy: h(S).cy,
+				r: h(S).r,
+				pathLength: "100"
+			}, null, 8, D),
+			a("path", {
+				class: "completion-seal__mark completion-seal__check",
+				d: h(x).check,
+				pathLength: "100"
+			}, null, 8, O)
+		], 64)) : l.value === "ring" ? (u(), i("circle", {
+			key: 1,
 			class: "completion-seal__mark",
-			cx: f(y).cx,
-			cy: f(y).cy,
-			r: f(y).r,
+			cx: h(S).cx,
+			cy: h(S).cy,
+			r: h(S).r,
 			pathLength: "100"
-		}, null, 8, S)) : (s(), r("path", {
-			key: 1,
+		}, null, 8, k)) : (u(), i("path", {
+			key: 2,
 			class: "completion-seal__mark",
-			d: l.value,
+			d: d.value,
 			pathLength: "100"
-		}, null, 8, C))], 8, x)), o.label ? (s(), r("span", w, u(o.label), 1)) : n("", !0)], 10, b));
+		}, null, 8, A))], 8, T)), c.label ? (u(), i("span", j, p(c.label), 1)) : r("", !0)], 10, w));
 	}
 });
 //#endregion
-export { T as CompletionSeal, g as useCompletionSeal };
+export { M as CompletionSeal, y as useCompletionSeal };

package/dist/components/_shared/ModalOverlay.vue.d.ts

@@ -0,0 +1,43 @@
+import { type HTMLAttributes } from "vue";
+/** Canonical Dialog scrim with one enter/exit recipe and a real intensity axis. */
+interface ModalOverlayProps {
+    class?: HTMLAttributes["class"];
+    /**
+     * Scrim intensity. `glass` reads `--overlay-scrim`; `clear` reads
+     * `--overlay-scrim-subtle`; `dim` reads `--overlay-scrim-strong`.
+     */
+    scrim?: "glass" | "clear" | "dim";
+    /**
+     * Optional CSS `animation` shorthand applied to the portaled overlay
+     * via the `--scrim-animation` typed cascade variable. Pairs with the
+     * `[data-scrim-animation] { animation: var(--scrim-animation, none) }`
+     * rule in `animations.css` so consumers can drive a long-running
+     * scrim-breath without owning the portal traversal. Composes with the
+     * `.sheet-animate` data-state enter/exit (the fade's panel/fast base clocks
+     * co-scale through `--motion-tempo`; the scrim-breath
+     * rides the typed variable on `data-scrim-animation` — distinct
+     * selectors, no cascade fight).
+     *
+     * Example: `scrimAnimation="scrim-breath 6s ease-in-out infinite"`
+     * — pairs with a `@keyframes scrim-breath` declared at the consumer
+     * (or in `animations.css` if the rhythm is canonical).
+     *
+     * AJ-W4-δ.
+     */
+    scrimAnimation?: string;
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ModalOverlayProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ModalOverlayProps> & Readonly<{}>, {
+    scrim: "glass" | "clear" | "dim";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/_shared/axes.d.ts

@@ -0,0 +1,21 @@
+export type { Surface, SurfaceTier } from "./useSurfaceAxis";
+/** The scale axis — one honest ordinal; rung names ≡ the `--control-h-*` token cohort. */
+export declare const SIZES: readonly ["xs", "sm", "md", "lg", "xl"];
+export type Size = (typeof SIZES)[number];
+/** The layout axis — the inline `"horizontal" | "vertical"` copies factor onto this, zero value change. */
+export declare const ORIENTATIONS: readonly ["horizontal", "vertical"];
+export type Orientation = (typeof ORIENTATIONS)[number];
+/** The motion-weight axis — opt-DOWN, not opt-in (liquid-weight universal). */
+export declare const MOTIONS: readonly ["full", "reduced", "off"];
+export type Motion = (typeof MOTIONS)[number];
+/** The surface-decoration axis — mirrors `useSurfaceAxis`'s `Surface` (gate-asserted ≡). */
+export declare const SURFACES: readonly ["glass", "veil", "opaque"];
+/** The tone axis — the semantic status register (`--<tone>` token cohort); NEVER a `variant` member. */
+export declare const TONES: readonly ["neutral", "success", "warning", "info", "destructive"];
+export type Tone = (typeof TONES)[number];
+/** The overlay-placement axis — Sheet's side-slide + Dialog center fold onto ONE placement. */
+export declare const PLACEMENTS: readonly ["center", "top", "right", "bottom", "left"];
+export type Placement = (typeof PLACEMENTS)[number];
+/** The overlay-trigger axis — click | hover | context (the sealed Popover Kronecker fold). */
+export declare const TRIGGERS: readonly ["click", "hover", "context"];
+export type Trigger = (typeof TRIGGERS)[number];

package/dist/components/_shared/class-names.d.ts

@@ -0,0 +1,27 @@
+import { type ClassValue } from "clsx";
+/**
+ * `cn()` — class-name compositor for glass-ui components.
+ *
+ * Rationale (W3.b.2 / A5 §3 Split 6): `tailwind-merge` ships ~22 KB
+ * gzipped of full Tailwind config to resolve every conflict pair across
+ * the framework. Glass-ui exercises a small, stable subset of Tailwind
+ * utilities; the conflict surface is enumerable. We replace twMerge with
+ * a hand-rolled deduplicator that handles the ~30 conflict pairs glass-ui
+ * actually relies on, paying ~0.5 KB gzipped instead.
+ *
+ * Semantics: clsx normalises the variadic argument shape (strings,
+ * arrays, conditional objects, falsy filtering). The deduplicator then
+ * walks the joined string left-to-right, computes each token's
+ * conflict-key (the CSS-property bucket the utility writes to), and
+ * keeps only the last token per bucket. Variant prefixes like
+ * `hover:`, `md:`, `dark:`, `[&::after]:` carry their own conflict
+ * scope: a bucket-key incorporates the prefix so `text-sm md:text-lg`
+ * keeps both. `!`-important tokens scope identically to their
+ * non-important twin (`!p-2 p-4` keeps `p-4` — last-write-wins ignores
+ * importance, mirroring twMerge's behaviour for the cases glass-ui hits).
+ *
+ * Tokens that don't match a known bucket pass through untouched (custom
+ * classes, arbitrary-value utilities like `[&::after]:hidden`, anything
+ * not in the conflict table).
+ */
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/components/_shared/feedback-tone.css

@@ -0,0 +1 @@
+@layer components { :root { --feedback-tone-strength: 18%; --feedback-tone-rung: var(--glass-bg-floating); --feedback-tone-border-strength: 40%; } .feedback-tone { background: color-mix( in oklab, var(--feedback-tone-rung), var(--tone) var(--feedback-tone-strength) ); border-color: color-mix( in oklab, transparent, var(--tone) var(--feedback-tone-border-strength) ); } .feedback-tone-success { --tone: var(--success); } .feedback-tone-warning { --tone: var(--warning); } .feedback-tone-info { --tone: var(--info); } .feedback-tone-destructive { --tone: var(--destructive); } .feedback-tone-glyph { color: var(--tone); } }

package/dist/components/_shared/field-surfaces.css

@@ -0,0 +1 @@
+:root { --select-content-max-h: min(24rem, 60dvh); } [data-slot="select-content"] { max-height: min( var(--select-content-max-h), var(--reka-popper-available-height, var(--select-content-max-h)) ); overflow-y: auto; } @layer components { .glass-control-edge { box-shadow: var(--glass-rim-top), var(--glass-rim-bottom); } [data-slot="select-content"], [data-slot="combobox-list"] { --select-plate-alpha: 0.9; background: color-mix( in oklab, color-mix( in oklab, var(--glass-bg-floating-tinted, var(--glass-bg-floating)), var(--glass-capsule-warm) var(--glass-capsule-warm-floor) ), transparent calc((1 - var(--select-plate-alpha)) * 100%) ); box-shadow: var(--glass-material-rim), var(--glass-under-shadow-vivid), var(--glass-shadow-floating), var(--shadow-cartoon-lg); } .dark [data-slot="select-content"], .dark [data-slot="combobox-list"] { --select-plate-alpha: 0.94; } .glass-field-portal { position: relative; } .glass-field-portal::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: radial-gradient( 70% 60% at 24% 22%, oklch(0.92 0.08 var(--field-h, 48) / 0.55), transparent 72% ), radial-gradient( 64% 58% at 82% 80%, oklch(0.88 0.07 calc(var(--field-h, 48) + 18) / 0.5), transparent 70% ), radial-gradient( 60% 62% at 60% 40%, oklch(0.9 0.06 calc(var(--field-h, 48) - 14) / 0.48), transparent 74% ); } .dark .glass-field-portal::before { background: radial-gradient( 70% 60% at 24% 22%, oklch(0.3 0.1 var(--field-h, 48) / 0.55), transparent 72% ), radial-gradient( 64% 58% at 82% 80%, oklch(0.26 0.09 calc(var(--field-h, 48) + 18) / 0.5), transparent 70% ), radial-gradient( 60% 62% at 60% 40%, oklch(0.28 0.08 calc(var(--field-h, 48) - 14) / 0.48), transparent 74% ); } @supports not (color: oklch(0.9 0.08 48)) { .glass-field-portal::before { background: radial-gradient( 70% 60% at 24% 22%, hsl(var(--field-h, 48) 60% 88% / 0.5), transparent 72% ); } .dark .glass-field-portal::before { background: radial-gradient( 70% 60% at 24% 22%, hsl(var(--field-h, 48) 45% 26% / 0.55), transparent 72% ); } } }

package/dist/components/_shared/index.d.ts

@@ -0,0 +1,6 @@
+export { menuItemVariants } from "./menuItemVariants";
+export type { MenuItemVariants } from "./menuItemVariants";
+export { surfaceClass, decorationClass } from "./useSurfaceAxis";
+export type { Surface, SurfaceTier } from "./useSurfaceAxis";
+export { controlSizeClass, switchSizeClass } from "./useControlSize";
+export type { ControlSize } from "./useControlSize";

package/dist/components/_shared/menu.css

@@ -0,0 +1 @@
+@layer components { .glass-menu-row { --menu-row-bg: color-mix( in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength) ); --menu-row-lift: -1px; min-block-size: max(2rem, var(--touch-target, 2.75rem)); transition: translate var(--spring-smooth-duration) var(--spring-smooth); translate: 0 0; } .glass-menu-row:hover:not([data-disabled]), .glass-menu-row:focus:not([data-disabled]), .glass-menu-row[data-highlighted]:not([data-disabled]), .glass-menu-row[data-state="open"]:not([data-disabled]) { background: var(--menu-row-bg); color: var(--accent-foreground); } .glass-menu-row:hover:not([data-disabled]) { translate: 0 var(--menu-row-lift); } .glass-menu-section { --menu-section-font: var(--font-mono); --menu-section-size: var(--type-caption); --menu-section-color: var(--muted-foreground); --menu-section-tracking: var(--type-tracking-caps); --menu-section-hairline: var(--border-hairline); --menu-section-gap: 0.375rem; display: block; margin-block-start: var(--menu-section-gap); padding-block-start: var(--menu-section-gap); box-shadow: var(--menu-section-hairline); } .glass-menu-section-label, .glass-menu-section > [data-menu-section-label] { font-family: var(--menu-section-font); font-size: var(--menu-section-size); color: var(--menu-section-color); text-transform: uppercase; letter-spacing: var(--menu-section-tracking); } } @media (prefers-reduced-motion: reduce) { .glass-menu-row { --menu-row-lift: 0px; transition: none; } } .dropdown-menu-content, .dropdown-sub-content { font-family: var(--dropdown-menu-font, inherit); padding: var(--panel-padding); --glass-bg-rung: var(--dropdown-menu-bg, var(--glass-bg-floating)); --glass-border-rung: var(--dropdown-menu-border, var(--glass-border-floating)); box-shadow: var( --dropdown-menu-shadow, var(--glass-material-rim), var(--glass-under-shadow-vivid), var(--glass-shadow-floating) ); }

package/dist/components/_shared/menuItemVariants.d.ts

@@ -0,0 +1,51 @@
+import { type VariantProps } from "class-variance-authority";
+/**
+ * `menuItemVariants` — canonical CVA shared by 9 menu-family + picker-family
+ * primitives. Promotes the four-state contract (hover / focus / data-highlighted /
+ * data-disabled) above reka-ui's base classes so consumer-side overrides win
+ * via `cn()`'s tailwind-merge ordering.
+ *
+ * Substrate composition:
+ * - `interactive-item` (utilities.css) provides `border-radius: var(--radius-lg)`,
+ *   the active-scale (`:active { transform: scale(0.98); }`), the focus-visible
+ *   box-shadow ring, and the `data-disabled` paint extension (V.W3 patch — the
+ *   :disabled pseudo doesn't fire on reka-ui's `data-disabled="true"` attr,
+ *   so utilities.css now paints both).
+ *
+ * Three input modes paint identical hover/focus accent:
+ * - `:hover` — pointer hover.
+ * - `:focus` — keyboard focus (also handled at the substrate via :focus-visible).
+ * - `[data-highlighted]` — reka-ui's internal navigation highlight (Combobox /
+ *   Command / Select families emit this attr instead of relying on browser focus).
+ *
+ * The CVA composes ABOVE reka-ui's base classes (R4 §4.2 pre-empt): consumer
+ * SFCs call `menuItemVariants(...)` last in the `cn()` chain so any radius /
+ * background / spacing the upstream library writes is overridden.
+ *
+ * Indicator slot variants reserve the gutter for radio-dot / check / chevron
+ * indicator spans the consumer SFCs render absolutely-positioned.
+ *
+ * Surface axis (BA.W-MENU-GLASS) — the menu-row's MATERIAL register, an
+ * EXPRESSION of the shared {glass·veil·opaque} surface-decoration axis
+ * (`_shared/useSurfaceAxis.ts` / `glass/surface-axis.css`), NOT a second axis:
+ * - `glass` (DEFAULT, glass-first canon AX.W54) — the `.glass-menu-row` recipe
+ *   (`./menu.css`): the hover / focus / `data-highlighted` / open states
+ *   paint the ELEMENT-LEVEL glass-quiet oklab tint (so the row darkens-over-light
+ *   AND lifts-over-dark per W-DARK-MATERIAL's tint arm) + a PRM-gated `translateY`
+ *   hover-lift, the 44px touch floor, the iOS-grade glassy hover-lift plate. The
+ *   flat `bg-accent` utilities are DROPPED on this arm — the cascade-trap-safe
+ *   shape: with no unlayered `hover:bg-accent` utility the ONLY background-painters
+ *   are the `@layer components` `.interactive-item:hover` accent rule and the
+ *   `.glass-menu-row` recipe (imported AFTER utilities.css so it source-order-wins
+ *   at equal specificity+layer — the AZ dock-rail `@layer`-loses-to-utility trap
+ *   pre-empted: never re-add an unlayered flat-accent utility here).
+ * - `accent` — the EXPLICIT flat-accent escape (the prior default's look). A clean
+ *   break, NOT a back-compat alias (BA inv-7): a consumer that wants the flat fill
+ *   opts in via `surface="accent"`.
+ */
+export declare const menuItemVariants: (props?: ({
+    surface?: "glass" | "accent" | null | undefined;
+    indicator?: "none" | "start" | "start-wide" | null | undefined;
+    size?: "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type MenuItemVariants = VariantProps<typeof menuItemVariants>;

package/dist/components/_shared/useControlSize.d.ts

@@ -0,0 +1,46 @@
+/**
+ * The shared control-size axis — three rungs, ONE grammar. The meaningful
+ * control-size hierarchy rungs the input register needs (Button's `xs`/icon rungs
+ * are Button-specific — an input has no icon-only register, so they are NOT here).
+ *
+ *   sm      — the quieter/secondary control: the `--control-h-sm` height +
+ *             `--control-text-sm` font (shorter + quieter).
+ *   md      — the canonical golden pill: the `--control-h-md` height +
+ *             `--control-text` font (byte-identical to HEAD).
+ *   lg      — the primary/emphatic control: the `--control-h-lg` height with the
+ *             base `--control-text` font (taller, same workhorse weight — matching
+ *             Button's `lg`, where only the height grows).
+ */
+export type ControlSize = "sm" | "md" | "lg";
+/**
+ * Resolve a `ControlSize` to the element-level token-override class string the
+ * `.input-pill` recipe reads. The `md` rung emits NO override (so the recipe
+ * falls back to the cohort `--control-h-md` / `--control-text` — byte-identical to
+ * HEAD); `sm`/`lg` re-point `--control-pill-h` / `--control-pill-text` to the
+ * chosen cohort rung.
+ *
+ *   controlSizeClass()        → ""                                              (golden md rung)
+ *   controlSizeClass("sm")    → "[--control-pill-h:var(--control-h-sm)] [--control-pill-text:var(--control-text-sm)]"
+ *   controlSizeClass("lg")    → "[--control-pill-h:var(--control-h-lg)]"
+ *
+ * @param size the control-size rung (`sm` · `md` · `lg`)
+ */
+export declare function controlSizeClass(size?: ControlSize): string;
+/**
+ * The Switch geometry rung. A Switch is a control-height-DERIVED geometry (the
+ * track/thumb/throw are NOT the bare cohort height — a switch track is shorter
+ * than an input), so it derives its `--switch-track-h` from the chosen
+ * `--control-h-*` rung (×0.6, the iOS proportion) and the rest of the
+ * `--switch-*` quad follows in Switch.vue:
+ *
+ *   --switch-thumb   = --switch-track-h − 0.25rem   (the 2px×2 track border)
+ *   --switch-track-w = --switch-track-h × 11/6      (the iOS track aspect)
+ *   --switch-throw   = --switch-track-w − --switch-thumb − 0.25rem
+ *
+ * The `md` rung (`--control-h-md`) resolves the HEAD `h-6 w-11` track +
+ * `h-5 w-5` thumb + `translate-x-5` throw EXACTLY (byte-identical). `sm`/`lg`
+ * re-point the anchor `--switch-track-h` so the whole quad scales in lockstep.
+ *
+ * @param size the control-size rung (`sm` · `md` · `lg`)
+ */
+export declare function switchSizeClass(size?: ControlSize): string;

package/dist/components/_shared/useMotionAxis.d.ts

@@ -0,0 +1,41 @@
+import { type MaybeRefOrGetter } from "vue";
+import type { Motion } from "./axes";
+/**
+ * Resolve a prop `Motion` value (default `full`) DOWN under live PRM. The prop may
+ * only clamp DOWN — PRM forces `full`/`reduced` → `reduced` (never an escalation),
+ * `off` is preserved (the prop went below PRM, which is legal).
+ */
+export declare function resolveMotion(motion: Motion | undefined): Motion;
+/**
+ * The resolved-motion state a carrier reads. `armed` gates the JS gesture
+ * enrichment (drag/press/spring-mount/liquid-drag); `dataMotion`/`hostStyle` are the
+ * `:data-motion`/`:style` binds the carrier spreads onto its root (both undefined at
+ * the `full` default — the zero-delta no-op floor).
+ */
+export interface MotionAxis {
+    /** The PRM-clamped resolved rung (`full`/`reduced`/`off`). */
+    readonly resolved: Motion;
+    /** True iff resolved `full` — the JS gesture enrichment is armed. */
+    readonly armed: boolean;
+    /** `undefined` at `full` (no attr); the rung string otherwise. */
+    readonly dataMotion: "reduced" | "off" | undefined;
+    /** `undefined` unless `off` (then `{ "--motion-weight": "0" }`). */
+    readonly hostStyle: Record<string, string> | undefined;
+}
+/**
+ * The reactive motion resolver — the ONE seam every carrier threads. Pass the
+ * component's `motion` prop (a ref/getter/value); read `.armed` to gate JS
+ * enrichments, bind `.dataMotion` to `:data-motion`, spread `.hostStyle` into the
+ * root `:style`. All four derive from the ONE `resolveMotion` clamp so PRM
+ * precedence + the zero-delta default are single-sourced.
+ *
+ *   const motion = useMotionAxis(() => props.motion)
+ *   // <Root :data-motion="motion.dataMotion.value" :style="motion.hostStyle.value">
+ *   // if (motion.armed.value) { …arm the drag/press/spring enrichment… }
+ */
+export declare function useMotionAxis(motion: MaybeRefOrGetter<Motion | undefined>): {
+    resolved: import("vue").ComputedRef<"off" | "full" | "reduced">;
+    armed: import("vue").ComputedRef<boolean>;
+    dataMotion: import("vue").ComputedRef<"off" | "reduced" | undefined>;
+    hostStyle: import("vue").ComputedRef<Record<string, string> | undefined>;
+};

package/dist/components/_shared/useSurfaceAxis.d.ts

@@ -0,0 +1,64 @@
+/**
+ * The shared surface-decoration axis — three rungs, ONE grammar.
+ *
+ *   glass   — the resolved tier's plain glass rung (default). The translucent
+ *             blur surface, the maximal glass-first register.
+ *   veil    — the borderless/rimless text-legibility plate: the `--glass-bg-quiet`
+ *             fill + blur with the box border AND rim STRIPPED (the boxed look
+ *             reads as a dividing line on a text plate). Reads the same `--glass-*`
+ *             ladder + W55 `--glass-tint-*` seam, so `--glass-level` / the bright
+ *             bucket retune it in lockstep with every glass surface.
+ *   opaque  — the `--glass-level:0` solid-card escape: solid `--card` + `blur(0)`
+ *             through the ONE level knob. The explicit opt-out from the maximal
+ *             glass default.
+ *
+ * (BE.W-CLEAR-VARIANT's `clear` member was RETIRED at BI.W-CLEAR-FOLD — a full
+ * mechanism with zero binding consumers; the substrate-without-consumer invariant
+ * J-inv-10 retires it. proof:surface-axis W9 (member-consumption) gate-locks the
+ * union against a future dead member riding vacuously.)
+ */
+export type Surface = "glass" | "veil" | "opaque";
+/**
+ * The 5-rung glass-ladder tier the surface paints its base over. Mirrors the
+ * `.glass-{wash,quiet,resting,floating,overlay}` ladder. A surface passes the rung
+ * it already paints (Card's `resting`, Dialog/Sheet/Popover's `floating`); the
+ * resolver maps it to the `glass-${tier}` base class. `opaque` is NOT a ladder
+ * rung here — it is a decoration on TOP of a base tier (the `.glass-opaque`
+ * escape keeps the tier's edge/rim), exactly as Card composes it.
+ */
+export type SurfaceTier = "wash" | "quiet" | "resting" | "floating" | "overlay";
+/**
+ * Resolve a (surface, tier) pair to the class string a surface composes. Pairs
+ * with a `:data-surface="surface"` attribute binding on the same element — the
+ * CSS seam (`surface-axis.css`) reads the attr to apply the veil/opaque
+ * decoration UNIFORMLY, while this resolver emits the back-compat decoration
+ * classes (`veil-surface` / `glass-opaque`) so Card's three shared rungs stay
+ * byte-identical and a surface composing the class set alone (no attr) still
+ * paints correctly.
+ *
+ *   surfaceClass("glass",  "floating") → "glass-floating"
+ *   surfaceClass("veil",   "floating") → "glass-floating veil-surface"
+ *   surfaceClass("opaque", "floating") → "glass-floating glass-opaque"
+ *
+ * @param surface the decoration rung (`glass` default · `veil` · `opaque`)
+ * @param tier    the base ladder rung (default `resting`)
+ */
+export declare function surfaceClass(surface?: Surface, tier?: SurfaceTier): string;
+/**
+ * Resolve ONLY the decoration class for a surface — no base-tier prefix
+ * (BI.W-SURFACE-EXTRACT). The SINGLE source of the veil/opaque decoration
+ * string; `surfaceClass()` (above) composes it after the base tier. This KILLS
+ * the `surfaceClass(x).replace(/^glass-.../, "")` tier-strip DRY wart every
+ * reka-portaled overlay hand-rolled to strip the base tier off `surfaceClass`'s
+ * output (the `^glass-<tier>` prefix, whitespace-trimmed): a
+ * surface that already composes its OWN base tier (Card `glass-${tier}`,
+ * Dialog/Sheet/Popover's baked `glass-floating`, the drawer recipe) reaches
+ * for the decoration ALONE through this function — ONE regex-free source.
+ *
+ *   decorationClass("glass")  → ""              (the identity — the bare tier paints)
+ *   decorationClass("veil")   → "veil-surface"
+ *   decorationClass("opaque") → "glass-opaque"
+ *
+ * @param surface the decoration rung (`glass` default · `veil` · `opaque`)
+ */
+export declare function decorationClass(surface?: Surface): string;

package/dist/components/_shared/valueDomain.d.ts

@@ -0,0 +1,6 @@
+export interface ResolvedValueMark {
+    value: number;
+    position: number;
+}
+export declare function resolveValueFraction(value: number | null | undefined, min: number, max: number): number;
+export declare function resolveValueMarks(marks: readonly number[] | undefined, min: number, max: number): ResolvedValueMark[];

package/dist/components/alert/Alert.vue.d.ts

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from 'vue';
+import { type AlertVariants } from './';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    tone?: AlertVariants['tone'];
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/alert/index.d.ts

@@ -0,0 +1,8 @@
+import { type VariantProps } from 'class-variance-authority';
+export { default as Alert } from './Alert.vue';
+export { default as AlertDescription } from './AlertDescription.vue';
+export { default as AlertTitle } from './AlertTitle.vue';
+export declare const alertVariants: (props?: ({
+    tone?: "neutral" | "destructive" | "success" | "warning" | "info" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type AlertVariants = VariantProps<typeof alertVariants>;

package/dist/components/animated-digit/AnimatedDigit.vue.d.ts

@@ -0,0 +1,56 @@
+import type { HTMLAttributes } from "vue";
+/**
+ * AnimatedDigit — a numeric display that damps toward its target via
+ * `useAnimatedNumber`, formats per consumer-supplied formatter, and ships
+ * the tabular-numerals + ss01 + lnum font-feature register so consumers
+ * stop hand-wiring those rules per site.
+ *
+ * AC.W6d — promoted from speedtest's hand-wired
+ * `useAnimatedNumber(metric) → result.formatted` + `<span class="tabular-
+ * nums">{{ result.formatted.value }}</span>` pattern. Two-line replacement.
+ *
+ * Consumers pass:
+ *  - `value`: the target. The composable damps; on null the displayed
+ *    digit clears to the placeholder.
+ *  - `format`: optional formatter (`(v: number) => string`). Defaults to
+ *    `String(Math.round(v))`.
+ *  - `placeholder`: glyph for null/empty (default "—").
+ *  - `digitCount`: optional knob exposed to the consumer via the
+ *    `--digit-count` CSS custom property on the host. A consumer's
+ *    width-clamp can read this so the value cell shrinks proportionally
+ *    as the rendered digits widen. When omitted the primitive computes
+ *    it from the formatted string length.
+ *  - `mode`: `"absolute"` (default) or `"progress"` — passes through to
+ *    `useAnimatedNumber`.
+ *
+ * AZ.W-METRIC-UNIFY — AnimatedDigit keeps its OWN local `placeholder: "—"`
+ * default (NOT the shared `coalesceMetric` leaf). It is a distinct animated
+ * single-glyph reel, not a static value-display card: it damps the FORMATTED
+ * number toward its target and its empty-check fires only on `null`/`undefined`
+ * (its `value` is `number | null | undefined` — there is no `""` empty string to
+ * coalesce). Folding it onto the value-card core would conflate two different
+ * surfaces. The keep is deliberate.
+ */
+export type AnimatedDigitMode = "absolute" | "progress";
+export interface AnimatedDigitProps {
+    value: number | null | undefined;
+    format?: (v: number) => string;
+    placeholder?: string;
+    /**
+     * Override the auto-derived digit-count. When unset the primitive
+     * publishes the formatted-string length to `--digit-count` so a
+     * consumer's width-clamp reads from a single source of truth.
+     */
+    digitCount?: number;
+    /** Tag forwarded to `useAnimatedNumber`. */
+    mode?: AnimatedDigitMode;
+    /** Damping factor; forwarded to `useAnimatedNumber`. */
+    damping?: number;
+    class?: HTMLAttributes["class"];
+}
+declare const __VLS_export: import("vue").DefineComponent<AnimatedDigitProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AnimatedDigitProps> & Readonly<{}>, {
+    placeholder: string;
+    mode: AnimatedDigitMode;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;