@mkbabb/glass-ui 3.2.0 → 3.4.0

package/dist/styles/typography.css

@@ -1,10 +1,10 @@
 /*
- * typography.css — Computer Modern body + Fraunces display + Fira Code mono
- *                + Plus Jakarta Sans (brand display fallback face, OFL 1.1)
+ * typography.css — Fraunces serif/display + Plus Jakarta Sans + Fira Code mono
+ *                (all three OFL faces self-hosted via fonts.css)
  *
- * Golden-ratio scale (√φ ≈ 1.272). Computer Modern is primary for body,
- * headings, prose, and math. Fraunces is reserved for ornamental display
- * with WONK=1 / SOFT=0. Fira Code for mono.
+ * Golden-ratio scale (√φ ≈ 1.272). Fraunces carries the serif register —
+ * body, headings, prose, and math — and the ornamental display register
+ * with WONK=1 / SOFT=0. Plus Jakarta Sans is the brand sans; Fira Code is mono.
  *
  * Semantic type classes expose both Tailwind-friendly utility names
  * (`.text-display-*`, `.text-body`, `.text-admin-label`) and feature
@@ -265,7 +265,7 @@ body {
 }
 
 /* ═══════════════════════════════════════════════
-   HEADINGS / BODY — Computer Modern
+   HEADINGS / BODY — Fraunces serif register
    ═══════════════════════════════════════════════ */
 @utility text-title {
     font-family: var(--font-serif);
@@ -358,7 +358,7 @@ body {
 }
 
 /* ═══════════════════════════════════════════════
-   MATH — Computer Modern italic
+   MATH — Fraunces serif italic
    ═══════════════════════════════════════════════ */
 @utility text-math {
     font-family: var(--font-serif);
@@ -444,7 +444,13 @@ body {
         font-variation-settings: var(--font-display-variation-settings);
     }
 
-    @media (min-width: 640px) {
+    /* AV.W16 TW3 — the pane title scales off its PANE's box, not the viewport.
+       An unnamed @container query resolves to the nearest ancestor container,
+       so the title grows once its pane clears 40rem (≈ 640px) regardless of the
+       viewport. Contract: the consuming pane sets `container-type: inline-size`
+       (the dock/chassis pattern); without a container ancestor the compact base
+       holds. */
+    @container (min-width: 40rem) {
         .text-pane-title {
             font-size: var(--type-display-3);
         }

package/dist/styles/utilities.css

@@ -189,9 +189,11 @@
        canonical iOS `.regular` control rung) and the spring carries
        the return via `--spring-snappy` (the §L3 release-spring
        contract). I keep this as a single canonical rung — NOT a
-       3-rung ladder. The outliers I leave alone are button `0.97` and
-       dock control `0.92`, which consume their own scale tokens
-       directly.
+       3-rung ladder. The one outlier I leave alone is the button
+       `0.97` (`--scale-press-btn`), which consumes its own slightly-
+       softer token directly. The dock control now tracks the canonical
+       `--scale-press` (0.96) too (AT.W7-dock-b press canon — the prior
+       deeper `0.92` was retired to ONE source).
 
        Under PRM I retire the press transform entirely and lean on the
        consumer's own hover/active bg-tint cascade to acknowledge the
@@ -256,25 +258,28 @@
         font-size: max(1rem, 1em);
     }
 
-    /* ── Scroll fade masks ── */
+    /* ── Scroll fade masks ──
+       Single-source `mask-image` (AV.W16 TW7): the `-webkit-` companion is
+       dropped — Tailwind v4's Lightning CSS build pipeline auto-prefixes per
+       the browserslist targets, mirroring the glass ladder's single-source
+       `backdrop-filter` (glass.css). NOTE: this is the consistency cut; it
+       does NOT conflict with W15's `@supports`-gated older-Safari mask
+       fallback (that fallback is the distinct case where the companion is
+       genuinely needed and W15 gates it). */
     .scroll-fade-mask {
         mask-image: linear-gradient(to right, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
-        -webkit-mask-image: linear-gradient(to right, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
     }
 
     .scroll-fade-top {
         mask-image: linear-gradient(to bottom, transparent, black var(--mask-fade-width));
-        -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--mask-fade-width));
     }
 
     .scroll-fade-bottom {
         mask-image: linear-gradient(to bottom, black calc(100% - var(--mask-fade-width)), transparent);
-        -webkit-mask-image: linear-gradient(to bottom, black calc(100% - var(--mask-fade-width)), transparent);
     }
 
     .scroll-fade-y {
         mask-image: linear-gradient(to bottom, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
-        -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
     }
 
     /* ── Deferred section — render-skip an offscreen subtree (AQ.W3 §5) ──────
@@ -683,6 +688,29 @@
     }
 }
 
+/* ── Control transition recipe (AU.W8b.4) ───────────────────────────────
+   Shared compound transition for interactive controls that animate their
+   surface (background-color/color/box-shadow/border-color) on the four-state
+   contract. Replaces the per-site
+   `transition-[background-color,color,box-shadow,border-color] duration-[var(--duration-fast)] ease-[var(--ease-standard)]`
+   arbitrary wraps at ≥2 sites (TabsTrigger, SelectTrigger, Toggle `card`
+   variant). Binds the canonical --duration-fast + --ease-standard tokens. */
+@utility transition-control {
+    transition-property: background-color, color, box-shadow, border-color;
+    transition-duration: var(--duration-fast);
+    transition-timing-function: var(--ease-standard);
+}
+
+/* ── Collapse transition recipe (AU.W8b.4) ──────────────────────────────
+   Shared height+opacity transition for reka-ui collapse surfaces (Accordion
+   content, Collapsible content). Replaces the per-site `transition-[height,opacity]`
+   wrap at ≥2 sites. The duration/easing rides the data-state
+   `animate-accordion-*`/`animate-collapsible-*` keyframes (this only declares
+   WHICH properties transition; the keyframes own the timing). */
+@utility transition-collapse {
+    transition-property: height, opacity;
+}
+
 /* ── Sheet/drawer slide-out animation grammar ──
    Mirror of `.popover-animate` for sheet/drawer panels. Pairs with
    `slide-in-from-{top,right,bottom,left}-N` to compose side-keyed entries.

package/dist/styles/view-transition.css

@@ -36,7 +36,7 @@
  * each tracked element plus a unique `view-transition-name` per element. */
 ::view-transition-group(.gl-list-item) {
     animation-duration: var(--vt-duration, var(--duration-normal));
-    animation-timing-function: var(--vt-ease, var(--ease-apple-spring));
+    animation-timing-function: var(--vt-ease, var(--spring-bouncy));
 }
 
 /* Added / removed members — the `:only-child` trick from the group guide: a
@@ -48,11 +48,17 @@
  * and `<DockLayerGroup>` (.dock-layer-stack) carry `view-transition-class:
  * gl-dock-layer` + a page-unique `view-transition-name` on a View-Transitions
  * engine, so the collapsed↔expanded width + the layer-pane swap morph as a VT
- * group instead of the JS FLIP. The `--dock-motion-resize` spring maps here to
- * `--vt-ease`; both default to the apple-spring. PRM zeroes the animation above. */
+ * group instead of the JS FLIP.
+ *
+ * AT.W6-dock-c / AU.W8 — VT/FLIP timing PARITY. The timing-function is
+ * `--dock-resize-spring` (= the `--spring-dock` linear(), AU.W8) — the SAME
+ * source the FLIP fallback consumes via `--dock-motion-resize` (`dock.css`), so
+ * the identical curve drives both engines. Retires the AQ.W6 fork (this group
+ * ran `--vt-ease`, the apple-spring overshoot). `--vt-ease` still governs the
+ * other recipes (`.gl-list-item`). PRM zeroes the animation above. */
 ::view-transition-group(.gl-dock-layer) {
     animation-duration: var(--vt-duration, var(--duration-normal));
-    animation-timing-function: var(--vt-ease, var(--ease-apple-spring));
+    animation-timing-function: var(--dock-resize-spring, var(--spring-dock));
 }
 
 @keyframes gl-vt-slide-in  { from { opacity: 0; translate: 0 var(--vt-rise, 8px); } }

package/dist/switch.js

@@ -1,2 +1,2 @@
-import { t as e } from "./Switch-imA0Hdjs.js";
+import { t as e } from "./Switch-x8n6husW.js";
 export { e as Switch };

package/dist/tabs.js

@@ -1,22 +1,72 @@
 import { t as e } from "./cn-DJXf4yaB.js";
 import { t } from "./_plugin-vue_export-helper-C1je1s0u.js";
-import { i as n, n as r, r as i, t as a } from "./TooltipProvider-MZFRxOvT.js";
-import { t as o } from "./UnderlineTabs-B4FV2zi_.js";
-import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, nextTick as g, normalizeClass as _, normalizeStyle as v, onMounted as y, onUnmounted as b, openBlock as x, ref as S, renderList as C, renderSlot as w, toDisplayString as T, unref as E, watch as D, withCtx as O } from "vue";
+import { i as n, n as r, r as i, t as a } from "./TooltipProvider-D-JrSqDu.js";
+import { t as o } from "./UnderlineTabs-Cq_AD03t.js";
+import { Fragment as s, computed as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createTextVNode as p, createVNode as m, defineComponent as h, mergeModels as g, nextTick as _, normalizeClass as v, normalizeStyle as y, onMounted as b, onUnmounted as x, openBlock as S, ref as C, renderList as w, renderSlot as T, toDisplayString as E, unref as D, useModel as O, watch as k, withCtx as A } from "vue";
+//#region src/components/custom/tabs/composables/useBouncySlider.ts
+function j(e) {
+	let { containerRef: t, buttonRefs: n, options: r, model: i, multiSelect: a, anchorSupported: o, jsSliderActive: s, activeValues: c } = e, l = C({
+		width: "0px",
+		transform: "translateX(0px)",
+		opacity: "0"
+	});
+	function u() {
+		if (a.value || o) return;
+		let e = r.value.findIndex((e) => e.value === i.value);
+		if (e < 0 || !n.value[e]) return;
+		let t = n.value[e];
+		l.value = {
+			width: `${t.offsetWidth}px`,
+			transform: `translateX(${t.offsetLeft}px)`,
+			opacity: "1"
+		};
+	}
+	let d = C({});
+	function f() {
+		if (!a.value) return;
+		let e = {};
+		for (let t of c.value) {
+			let i = r.value.findIndex((e) => e.value === t), a = n.value[i];
+			a && (e[t] = {
+				width: `${a.offsetWidth}px`,
+				transform: `translateX(${a.offsetLeft}px)`,
+				opacity: "1"
+			});
+		}
+		d.value = e;
+	}
+	function p() {
+		a.value ? f() : u();
+	}
+	k(() => i.value, () => {
+		s.value && _(p);
+	}, { deep: !0 }), k(() => r.value, () => {
+		s.value && _(p);
+	}, { deep: !0 });
+	let m = null;
+	return b(() => {
+		s.value && (_(p), t.value && (m = new ResizeObserver(() => p()), m.observe(t.value)));
+	}), x(() => {
+		m?.disconnect();
+	}), {
+		singleSliderStyle: l,
+		multiSliderStyles: d
+	};
+}
+//#endregion
 //#region src/components/custom/tabs/BouncyToggle.vue?vue&type=script&setup=true&lang.ts
-var k = [
+var M = [
 	"aria-pressed",
 	"disabled",
 	"onClick"
-], A = [
+], N = [
 	"aria-pressed",
 	"disabled",
 	"onClick"
-], j = /* @__PURE__ */ t(/* @__PURE__ */ h({
+], P = /* @__PURE__ */ t(/* @__PURE__ */ h({
 	__name: "BouncyToggle",
-	props: {
+	props: /* @__PURE__ */ g({
 		options: {},
-		modelValue: {},
 		multiSelect: {
 			type: Boolean,
 			default: !1
@@ -30,49 +80,32 @@ var k = [
 			Object,
 			Array
 		] }
-	},
+	}, {
+		modelValue: { required: !0 },
+		modelModifiers: {}
+	}),
 	emits: ["update:modelValue"],
-	setup(t, { emit: o }) {
-		function h(e, t) {
+	setup(t) {
+		function o(e, t) {
 			return typeof document > "u" ? t : getComputedStyle(document.documentElement).getPropertyValue(e).trim() || t;
 		}
-		let j = t, M = o, N = S(null), P = S([]), F = typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("position-anchor", "--x"), I = c(() => j.variant === "pill"), L = c(() => j.overflow === "scroll"), R = c(() => j.overflow === "auto"), z = c(() => j.multiSelect && Array.isArray(j.modelValue) ? j.modelValue : [j.modelValue]), B = (e) => z.value.includes(e), V = c(() => !j.multiSelect && !F), H = c(() => j.multiSelect || !F), U = S({
-			width: "0px",
-			transform: "translateX(0px)",
-			opacity: "0"
+		let h = t, g = O(t, "modelValue"), x = C(null), k = C([]), P = typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("position-anchor", "--x"), F = c(() => h.variant === "pill"), I = c(() => h.overflow === "scroll"), L = c(() => h.overflow === "auto"), R = c(() => {
+			let e = g.value;
+			return h.multiSelect && Array.isArray(e) ? e : e == null ? [] : [e];
+		}), z = (e) => R.value.includes(e), B = c(() => !h.multiSelect && !P), V = c(() => h.multiSelect || !P), { singleSliderStyle: H, multiSliderStyles: U } = j({
+			containerRef: x,
+			buttonRefs: k,
+			options: c(() => h.options),
+			model: g,
+			multiSelect: c(() => h.multiSelect),
+			anchorSupported: P,
+			jsSliderActive: V,
+			activeValues: R
 		});
-		function W() {
-			if (j.multiSelect || F) return;
-			let e = j.options.findIndex((e) => e.value === j.modelValue);
-			if (e < 0 || !P.value[e]) return;
-			let t = P.value[e];
-			U.value = {
-				width: `${t.offsetWidth}px`,
-				transform: `translateX(${t.offsetLeft}px)`,
-				opacity: "1"
-			};
-		}
-		let G = S({});
-		function K() {
-			if (!j.multiSelect) return;
-			let e = {};
-			for (let t of z.value) {
-				let n = j.options.findIndex((e) => e.value === t), r = P.value[n];
-				r && (e[t] = {
-					width: `${r.offsetWidth}px`,
-					transform: `translateX(${r.offsetLeft}px)`,
-					opacity: "1"
-				});
-			}
-			G.value = e;
-		}
-		function q() {
-			j.multiSelect ? K() : W();
-		}
-		function J(e) {
+		function W(e) {
 			if (typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
 			e.getAnimations().forEach((e) => e.cancel());
-			let t = h("--ease-apple-spring", "cubic-bezier(0.175, 0.885, 0.32, 1.275)"), n = h("--scale-press", "0.95"), r = h("--scale-hover", "1.08");
+			let t = o("--ease-apple-spring", "cubic-bezier(0.175, 0.885, 0.32, 1.275)"), n = o("--scale-press", "0.95"), r = o("--scale-hover", "1.08");
 			e.animate([
 				{ transform: "scale(1)" },
 				{
@@ -89,9 +122,9 @@ var k = [
 				easing: t
 			});
 		}
-		function Y(e) {
-			if (!L.value && !R.value) return;
-			let t = P.value[e];
+		function G(e) {
+			if (!I.value && !L.value) return;
+			let t = k.value[e];
 			if (!t) return;
 			let n = typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 			t.scrollIntoView({
@@ -100,94 +133,85 @@ var k = [
 				behavior: n ? "auto" : "smooth"
 			});
 		}
-		function X(e, t) {
-			if (j.options[t]?.disabled) return;
-			let n = P.value[t];
-			if (n && J(n), j.multiSelect) {
-				let t = [...z.value], n = t.indexOf(e);
-				n > -1 ? t.length > 1 && t.splice(n, 1) : t.push(e), M("update:modelValue", t);
-			} else M("update:modelValue", e);
-			Y(t);
+		function K(e, t) {
+			if (h.options[t]?.disabled) return;
+			let n = k.value[t];
+			if (n && W(n), h.multiSelect) {
+				let t = [...R.value], n = t.indexOf(e);
+				n > -1 ? t.length > 1 && t.splice(n, 1) : t.push(e), g.value = t;
+			} else g.value = e;
+			G(t);
 		}
-		D(() => j.modelValue, () => {
-			H.value && g(q);
-		}, { deep: !0 }), D(() => j.options, () => {
-			H.value && g(q);
-		}, { deep: !0 });
-		let Z = null;
-		return y(() => {
-			g(() => {
-				let e = j.options.findIndex((e) => B(e.value));
-				e >= 0 && Y(e);
-			}), H.value && (g(q), N.value && (Z = new ResizeObserver(() => q()), Z.observe(N.value)));
-		}), b(() => {
-			Z?.disconnect();
-		}), (o, c) => (x(), d("div", {
+		return b(() => {
+			_(() => {
+				let e = h.options.findIndex((e) => z(e.value));
+				e >= 0 && G(e);
+			});
+		}), (o, c) => (S(), d("div", {
 			ref_key: "containerRef",
-			ref: N,
-			class: _(E(e)(I.value ? "bouncy-toggle bouncy-toggle--pill" : "bouncy-toggle", L.value && "bouncy-toggle--scroll scroll-fade-mask scrollbar-hidden", R.value && "bouncy-toggle--auto scrollbar-hidden", j.class))
+			ref: x,
+			class: v(D(e)(F.value ? "bouncy-toggle bouncy-toggle--pill" : "bouncy-toggle", I.value && "bouncy-toggle--scroll scroll-fade-mask scrollbar-hidden", L.value && "bouncy-toggle--auto scrollbar-hidden", h.class))
 		}, [
-			t.multiSelect ? u("", !0) : (x(), d("div", {
+			t.multiSelect ? u("", !0) : (S(), d("div", {
 				key: 0,
-				class: _([I.value ? "bouncy-slider bouncy-slider--pill" : "bouncy-slider", V.value ? "bouncy-slider--js" : "bouncy-slider--anchor"]),
-				style: v(V.value ? U.value : void 0)
+				class: v([F.value ? "bouncy-slider bouncy-slider--pill" : "bouncy-slider", B.value ? "bouncy-slider--js" : "bouncy-slider--anchor"]),
+				style: y(B.value ? D(H) : void 0)
 			}, null, 6)),
-			t.multiSelect ? (x(!0), d(s, { key: 1 }, C(z.value, (e) => (x(), d("div", {
+			t.multiSelect ? (S(!0), d(s, { key: 1 }, w(R.value, (e) => (S(), d("div", {
 				key: "slider-" + e,
-				class: _([I.value ? "bouncy-slider bouncy-slider--pill" : "bouncy-slider", "bouncy-slider--js"]),
-				style: v(G.value[e] ?? { opacity: "0" })
+				class: v([F.value ? "bouncy-slider bouncy-slider--pill" : "bouncy-slider", "bouncy-slider--js"]),
+				style: y(D(U)[e] ?? { opacity: "0" })
 			}, null, 6))), 128)) : u("", !0),
-			(x(!0), d(s, null, C(t.options, (e, t) => (x(), d(s, { key: e.value }, [e.tooltip ? (x(), l(E(a), {
+			(S(!0), d(s, null, w(t.options, (e, t) => (S(), d(s, { key: e.value }, [e.tooltip ? (S(), l(D(a), {
 				key: 0,
 				"delay-duration": 200
 			}, {
-				default: O(() => [m(E(n), null, {
-					default: O(() => [m(E(r), { "as-child": "" }, {
-						default: O(() => [f("button", {
+				default: A(() => [m(D(n), null, {
+					default: A(() => [m(D(r), { "as-child": "" }, {
+						default: A(() => [f("button", {
 							ref_for: !0,
 							ref: (e) => {
-								e && (P.value[t] = e);
+								e && (k.value[t] = e);
 							},
-							class: _([I.value ? "bouncy-btn bouncy-btn--pill" : "bouncy-btn", e.disabled && "is-disabled"]),
-							"aria-pressed": B(e.value) ? "true" : "false",
+							class: v([F.value ? "bouncy-btn bouncy-btn--pill" : "bouncy-btn", e.disabled && "is-disabled"]),
+							"aria-pressed": z(e.value) ? "true" : "false",
 							disabled: e.disabled,
-							onClick: (n) => X(e.value, t)
-						}, [w(o.$slots, "option", {
+							onClick: (n) => K(e.value, t)
+						}, [T(o.$slots, "option", {
 							option: e,
-							active: B(e.value)
-						}, () => [p(T(e.label), 1)], !0)], 10, k)]),
+							active: z(e.value)
+						}, () => [p(E(e.label), 1)], !0)], 10, M)]),
 						_: 2
-					}, 1024), m(E(i), {
+					}, 1024), m(D(i), {
 						side: "bottom",
 						"side-offset": 8
 					}, {
-						default: O(() => [p(T(e.tooltip), 1)]),
+						default: A(() => [p(E(e.tooltip), 1)]),
 						_: 2
 					}, 1024)]),
 					_: 2
 				}, 1024)]),
 				_: 2
-			}, 1024)) : (x(), d("button", {
+			}, 1024)) : (S(), d("button", {
 				key: 1,
 				ref_for: !0,
 				ref: (e) => {
-					e && (P.value[t] = e);
+					e && (k.value[t] = e);
 				},
-				class: _([I.value ? "bouncy-btn bouncy-btn--pill" : "bouncy-btn", e.disabled && "is-disabled"]),
-				"aria-pressed": B(e.value) ? "true" : "false",
+				class: v([F.value ? "bouncy-btn bouncy-btn--pill" : "bouncy-btn", e.disabled && "is-disabled"]),
+				"aria-pressed": z(e.value) ? "true" : "false",
 				disabled: e.disabled,
-				onClick: (n) => X(e.value, t)
-			}, [w(o.$slots, "option", {
+				onClick: (n) => K(e.value, t)
+			}, [T(o.$slots, "option", {
 				option: e,
-				active: B(e.value)
-			}, () => [p(T(e.label), 1)], !0)], 10, A))], 64))), 128))
+				active: z(e.value)
+			}, () => [p(E(e.label), 1)], !0)], 10, N))], 64))), 128))
 		], 2));
 	}
-}), [["__scopeId", "data-v-e911f316"]]), M = /* @__PURE__ */ h({
+}), [["__scopeId", "data-v-9b5076ed"]]), F = /* @__PURE__ */ h({
 	__name: "BouncyTabs",
-	props: {
+	props: /* @__PURE__ */ g({
 		options: {},
-		modelValue: {},
 		variant: { default: "default" },
 		overflow: { default: "none" },
 		class: { type: [
@@ -197,21 +221,24 @@ var k = [
 			Object,
 			Array
 		] }
-	},
+	}, {
+		modelValue: { required: !0 },
+		modelModifiers: {}
+	}),
 	emits: ["update:modelValue"],
-	setup(e, { emit: t }) {
-		let n = e, r = t;
-		function i(e) {
-			r("update:modelValue", e);
+	setup(e) {
+		let t = e, n = O(e, "modelValue");
+		function r(e) {
+			n.value = e;
 		}
-		return (t, r) => (x(), l(j, {
+		return (i, a) => (S(), l(P, {
 			options: e.options,
-			"model-value": e.modelValue,
+			"model-value": n.value,
 			variant: e.variant,
 			overflow: e.overflow,
-			class: _(n.class),
+			class: v(t.class),
 			"multi-select": !1,
-			"onUpdate:modelValue": i
+			"onUpdate:modelValue": r
 		}, null, 8, [
 			"options",
 			"model-value",
@@ -222,4 +249,4 @@ var k = [
 	}
 });
 //#endregion
-export { M as BouncyTabs, j as BouncyToggle, o as UnderlineTabs };
+export { F as BouncyTabs, P as BouncyToggle, o as UnderlineTabs };