@mkbabb/glass-ui 3.7.0 → 3.8.0

package/src/styles/typography.css

@@ -1,22 +1,25 @@
 /*
- * typography.css — Fraunces serif/display + Plus Jakarta Sans + Fira Code mono
- *                (all three OFL faces self-hosted via fonts.css)
+ * typography.css — Plus Jakarta Sans (text + display) + Fira Code (mono)
+ *                (both OFL faces self-hosted via fonts.css)
  *
- * 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.
+ * Golden-ratio scale (√φ ≈ 1.272). ONE brand register: Plus Jakarta Sans
+ * carries the text register — body, headings, prose, display, and math — and
+ * Fira Code carries mono. The library DEFAULT is the register every live
+ * surface paints (the demo + speedtest render Plus Jakarta everywhere). There
+ * is no display-serif voice and no preset opt-out: the default IS the register.
  *
  * Semantic type classes expose both Tailwind-friendly utility names
  * (`.text-display-*`, `.text-body`, `.text-admin-label`) and feature
  * utilities (`.cm-serif`, `.fira-code`, `.fourier-f`).
  *
  * Self-host font subsystem — glass-ui ships two OFL-1.1 face families as
- * bundled woff2 assets: Plus Jakarta Sans (brand display sans, font-display:
+ * bundled woff2 assets: Plus Jakarta Sans (brand text + display, font-display:
  * optional) + Fira Code (canonical mono, font-display: swap). Both ship with
  * Capsize-calibrated size-adjust / ascent-override / descent-override on the
- * matching fallback faces so the swap is geometry-neutral (zero CLS). Consumers
- * map --font-brand-sans / --font-display / --font-mono to reference them, no
- * third-party CDN dependency on the LCP-critical path.
+ * matching fallback faces so the swap is geometry-neutral (zero CLS). The
+ * register lives in tokens.css §0 (--font-stack-text/-display/-mono), bridged
+ * to --font-text/-display/-mono in theme.css; consumers override --font-text
+ * once to rebrand, no third-party CDN dependency on the LCP-critical path.
  */
 
 /* ═══════════════════════════════════════════════
@@ -82,21 +85,15 @@
 }
 
 :root {
-    /* Font family tokens. `--font-serif` / `--font-display` / `--font-mono`
-       are NOT declared here — their source-of-truth lives in tokens.css
-       (`--font-stack-*`), bridged to Tailwind via theme.css's `@theme` block;
-       declaring `:root` literals here would shadow consumer `@theme` overrides
-       (un-layered `:root` wins over `@layer theme`). The self-hosted faces
-       above expose `"Plus Jakarta Sans"` + `"Fira Code"`, each pairing with a
-       calibrated `"... Fallback"`. `--font-brand-sans` ships a neutral default;
-       consumers opting into Plus Jakarta via the `brand-uniform-sans` preset
-       override it. `--font-mono` references `"Fira Code"` first (engages by
-       default) then the fallback chain. */
-    /* Independent brand/system sans stack; consumers override once for uniform sans. */
-    --font-brand-sans: "Helvetica Neue", "Arial Nova", Arial, system-ui, sans-serif;
-    --font-sans: var(--font-brand-sans);
-    --font-display-variation-settings: "WONK" 1, "SOFT" 0;
-    --font-display-weight: 400;
+    /* Font family tokens. `--font-text` / `--font-display` / `--font-serif` /
+       `--font-mono` are NOT declared here — their source-of-truth lives in
+       tokens.css §0 (`--font-stack-*`), bridged to Tailwind via theme.css's
+       `@theme` block; declaring `:root` literals here would shadow consumer
+       `@theme` overrides (un-layered `:root` wins over `@layer theme`). The
+       self-hosted faces above expose `"Plus Jakarta Sans"` + `"Fira Code"`,
+       each pairing with a calibrated `"... Fallback"`. The brand text register
+       (Plus Jakarta Sans) engages by default for every consumer; --font-mono
+       references `"Fira Code"` first then the fallback chain. */
 
     /* Scale tokens */
     --type-admin-label: 0.625rem;  /* 10px */
@@ -116,8 +113,7 @@
     /* Audacious display tier (v1.0.3). Extends the φ-ladder three rungs
        beyond display-5 for poster-type consumers (speedtest hero,
        dashboard pane titles when the consumer wants the number to win).
-       Same vw-axis as display-1..5 — consumer-agnostic. Brand-uniform-
-       sans preset still overrides via the existing :root override. */
+       Same vw-axis as display-1..5 — consumer-agnostic. */
     --type-display-mega:       clamp(5.382rem, 4rem + 9vw, 11.089rem);   /* φ^(9/2) — peak 177px */
     --type-display-hero:       clamp(6.854rem, 4.5rem + 12vw, 17.942rem); /* φ^5    — peak 287px */
     --type-display-audacious:  clamp(8.728rem, 5rem + 16vw, 22rem);      /* φ^(11/2) — peak 352px (fast.com peg) */
@@ -129,25 +125,18 @@
        were retired in v0.8.6 (audit U.W0.C-c §1.1 / Union 2). */
 }
 
-:root[data-typography-preset="brand-uniform-sans"] {
-    --font-serif: var(--font-brand-sans);
-    --font-display: var(--font-brand-sans);
-    --font-display-variation-settings: normal;
-    --font-display-weight: 600;
-}
-
 /* ═══════════════════════════════════════════════
-   BODY CASCADE — CM serif inherits globally
+   BODY CASCADE — the brand text register inherits globally
    ═══════════════════════════════════════════════ */
 body {
-    font-family: var(--font-serif);
+    font-family: var(--font-text);
     color: var(--foreground);
     font-size: var(--type-body);
     line-height: var(--type-leading-body);
 }
 
 /* ═══════════════════════════════════════════════
-   DISPLAY — Fraunces, WONK=1 SOFT=0, tracking-tight
+   DISPLAY — Plus Jakarta Sans display, tracking-tight
    ═══════════════════════════════════════════════ */
 @utility text-display-audacious {
     font-family: var(--font-display);
@@ -155,8 +144,7 @@ body {
     line-height: var(--type-leading-display);
     letter-spacing: var(--type-tracking-tight);
     font-optical-sizing: auto;
-    font-variation-settings: var(--font-display-variation-settings);
-    font-weight: var(--font-display-weight);
+    font-weight: 600;
     /* AQ.W3 §W3.3 — balance multi-line display headlines. Text-only (no box) so
        balance is safe; degrades to unbalanced wrapping with zero break. */
     text-wrap: balance;
@@ -177,7 +165,6 @@ body {
     font-feature-settings: "ss01", "tnum", "lnum";
     font-variant-numeric: tabular-nums lining-nums;
     font-optical-sizing: auto;
-    font-variation-settings: var(--font-display-variation-settings);
     display: inline-block;
     max-inline-size: 100%;
     /* AQ.W3 §W3.3 — `text-wrap: nowrap` (modern) sits AFTER `white-space:
@@ -193,8 +180,7 @@ body {
     line-height: var(--type-leading-display);
     letter-spacing: var(--type-tracking-tight);
     font-optical-sizing: auto;
-    font-variation-settings: var(--font-display-variation-settings);
-    font-weight: var(--font-display-weight);
+    font-weight: 600;
     text-wrap: balance; /* AQ.W3 §W3.3 */
 }
 
@@ -204,8 +190,7 @@ body {
     line-height: var(--type-leading-display);
     letter-spacing: var(--type-tracking-tight);
     font-optical-sizing: auto;
-    font-variation-settings: var(--font-display-variation-settings);
-    font-weight: var(--font-display-weight);
+    font-weight: 600;
     text-wrap: balance; /* AQ.W3 §W3.3 */
 }
 
@@ -215,8 +200,7 @@ body {
     line-height: var(--type-leading-display);
     letter-spacing: var(--type-tracking-tight);
     font-optical-sizing: auto;
-    font-variation-settings: var(--font-display-variation-settings);
-    font-weight: var(--font-display-weight);
+    font-weight: 600;
     text-wrap: balance; /* AQ.W3 §W3.3 */
 }
 
@@ -226,8 +210,7 @@ body {
     line-height: var(--type-leading-display);
     letter-spacing: var(--type-tracking-tight);
     font-optical-sizing: auto;
-    font-variation-settings: var(--font-display-variation-settings);
-    font-weight: var(--font-display-weight);
+    font-weight: 600;
     text-wrap: balance; /* AQ.W3 §W3.3 */
 }
 
@@ -237,8 +220,7 @@ body {
     line-height: var(--type-leading-display);
     letter-spacing: var(--type-tracking-tight);
     font-optical-sizing: auto;
-    font-variation-settings: var(--font-display-variation-settings);
-    font-weight: var(--font-display-weight);
+    font-weight: 600;
     text-wrap: balance; /* AQ.W3 §W3.3 */
 }
 
@@ -248,8 +230,7 @@ body {
     line-height: var(--type-leading-display);
     letter-spacing: var(--type-tracking-tight);
     font-optical-sizing: auto;
-    font-variation-settings: var(--font-display-variation-settings);
-    font-weight: var(--font-display-weight);
+    font-weight: 600;
     text-wrap: balance; /* AQ.W3 §W3.3 */
 }
 
@@ -259,16 +240,15 @@ body {
     line-height: var(--type-leading-display);
     letter-spacing: var(--type-tracking-tight);
     font-optical-sizing: auto;
-    font-variation-settings: var(--font-display-variation-settings);
-    font-weight: var(--font-display-weight);
+    font-weight: 600;
     text-wrap: balance; /* AQ.W3 §W3.3 */
 }
 
 /* ═══════════════════════════════════════════════
-   HEADINGS / BODY — Fraunces serif register
+   HEADINGS / BODY — Plus Jakarta Sans text register
    ═══════════════════════════════════════════════ */
 @utility text-title {
-    font-family: var(--font-serif);
+    font-family: var(--font-text);
     font-size: var(--type-title);
     line-height: var(--type-leading-heading);
     letter-spacing: var(--type-tracking-tight);
@@ -277,7 +257,7 @@ body {
 }
 
 @utility text-heading {
-    font-family: var(--font-serif);
+    font-family: var(--font-text);
     font-size: var(--type-heading);
     line-height: var(--type-leading-heading);
     font-weight: 700;
@@ -285,7 +265,7 @@ body {
 }
 
 @utility text-subheading {
-    font-family: var(--font-serif);
+    font-family: var(--font-text);
     font-size: var(--type-subheading);
     line-height: var(--type-leading-body);
     font-weight: 600;
@@ -300,7 +280,7 @@ body {
    reads heavier than its numeric weight at pill size, so regular is the
    not-bold register. */
 @utility dock-label {
-    font-family: var(--font-serif);
+    font-family: var(--font-text);
     font-size: var(--dock-label-size, var(--type-subheading));
     line-height: var(--type-leading-body);
     font-weight: 400;
@@ -308,7 +288,7 @@ body {
 }
 
 @utility text-prose {
-    font-family: var(--font-serif);
+    font-family: var(--font-text);
     font-size: var(--type-prose);
     line-height: var(--type-leading-prose);
     font-weight: 400;
@@ -318,7 +298,7 @@ body {
 }
 
 @utility text-body {
-    font-family: var(--font-serif);
+    font-family: var(--font-text);
     font-size: var(--type-body);
     line-height: var(--type-leading-body);
     font-weight: 400;
@@ -326,14 +306,14 @@ body {
 }
 
 @utility text-small {
-    font-family: var(--font-serif);
+    font-family: var(--font-text);
     font-size: var(--type-small);
     line-height: var(--type-leading-small);
     font-weight: 400;
 }
 
 @utility text-caption {
-    font-family: var(--font-serif);
+    font-family: var(--font-text);
     font-size: var(--type-caption);
     line-height: var(--type-leading-caption);
     font-style: italic;
@@ -358,15 +338,15 @@ body {
 }
 
 /* ═══════════════════════════════════════════════
-   MATH — Fraunces serif italic
+   MATH — Plus Jakarta Sans italic
    ═══════════════════════════════════════════════ */
 @utility text-math {
-    font-family: var(--font-serif);
+    font-family: var(--font-text);
     font-style: italic;
 }
 
 @utility text-math-body {
-    font-family: var(--font-serif);
+    font-family: var(--font-text);
     font-size: var(--type-prose);
     line-height: var(--type-leading-prose);
     font-style: italic;
@@ -406,8 +386,13 @@ body {
 /* ═══════════════════════════════════════════════
    FONT FAMILY UTILITIES
    ═══════════════════════════════════════════════ */
+/* .cm-serif — the Computer-Modern math/serif voice. A DISTINCT face from the
+   brand text register: it resolves to the consumer-supplied serif (system
+   serif by default; a math consumer maps Computer Modern / KaTeX over it). It
+   is NOT the Plus Jakarta text register — the one serif survivor of the
+   register reconciliation. */
 @utility cm-serif {
-    font-family: var(--font-serif);
+    font-family: var(--font-serif-math, serif);
 }
 
 @utility fira-code {
@@ -426,7 +411,6 @@ body {
     vertical-align: -0.05em;
     font-weight: 700;
     display: inline-block;
-    font-variation-settings: var(--font-display-variation-settings);
 }
 
 /* ═══════════════════════════════════════════════
@@ -439,9 +423,8 @@ body {
         font-size: clamp(2.4rem, 1.8rem + 2vw, 3.33rem);
         line-height: var(--type-leading-display);
         letter-spacing: var(--type-tracking-tight);
-        font-weight: var(--font-display-weight);
+        font-weight: 600;
         font-optical-sizing: auto;
-        font-variation-settings: var(--font-display-variation-settings);
     }
 
     /* AV.W16 TW3 — the pane title scales off its PANE's box, not the viewport.

package/src/styles/utilities.css

@@ -982,7 +982,8 @@
 
 /* ── Text-highlight paint (CSS Custom Highlight API) ─────────────────────
    The default `::highlight()` paint for the `useTextHighlight` composable
-   (composables/dom). A named `Highlight` registered in `CSS.highlights`
+   (composables/motion; the `/motion-core` subpath, AX.W37). A named `Highlight`
+   registered in `CSS.highlights`
    under one of these keys paints its `Range` set without a `<mark>` wrapper.
    Token-bridged: the search mark reads the canonical pastel-yellow rainbow
    token at a soft alpha; the equation/variable mark reads `--primary`. Both

package/src/styles/view-transition.css

@@ -44,46 +44,18 @@
 ::view-transition-new(.gl-list-item):only-child { animation-name: gl-vt-slide-in; }
 ::view-transition-old(.gl-list-item):only-child { animation-name: gl-vt-slide-out; }
 
-/* AQ.W6 §Design 7 — the dock layer group recipe. `<GlassDock>` (.dock-layers)
- * 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.
- *
- * 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(--dock-resize-spring, var(--spring-dock));
-}
-
-/* AW.W3 — typed directional dock curves. The swap tags the active transition
- * `dock-expand` / `dock-collapse` (the outer collapsed↔expanded pair) and
- * `layer-forward` / `layer-back` (the inner DockLayerGroup pane swap) via the
- * `types` argument to `startViewTransition` (Chrome 140+; feature-detected, the
- * untyped fallback is the symmetric `.gl-dock-layer` curve above). iOS-feel
- * motion is ASYMMETRIC — a snappier exit, a softer entry-overshoot. EXPAND
- * (and forward) lead with the overshooting `--spring-dock`; COLLAPSE (and back)
- * exit on the non-overshooting `--spring-snappy` (a quicker settle, no bounce on
- * the way out). The shorter `--duration-fast` on the exit reads as the crisp
- * dismiss. A non-typed engine never matches these — it runs the symmetric curve,
- * which is the acceptable contract. PRM zeroes the animation (the `@media` at
- * the top of this file). */
-:active-view-transition-type(dock-expand) ::view-transition-group(.gl-dock-layer),
-:active-view-transition-type(layer-forward) ::view-transition-group(.gl-dock-layer) {
-    animation-duration: var(--vt-duration, var(--duration-normal));
-    animation-timing-function: var(--dock-resize-spring, var(--spring-dock));
-}
-
-:active-view-transition-type(dock-collapse) ::view-transition-group(.gl-dock-layer),
-:active-view-transition-type(layer-back) ::view-transition-group(.gl-dock-layer) {
-    animation-duration: var(--vt-duration-exit, var(--duration-fast));
-    animation-timing-function: var(--spring-snappy);
-}
+/* AX.W01 — the dock COLLAPSE View-Transitions recipe is RETIRED. The
+ * `::view-transition-group(.gl-dock-layer)` group + its `:active-view-transition-type
+ * (dock-expand|dock-collapse|layer-forward|layer-back)` asymmetric curve fork are
+ * DELETED: VT crossfades RASTERIZED snapshots — the wrong primitive for a layout
+ * morph (the "taffy"-stretch + text-blur + uncaptured-animating-ancestor desync +
+ * the co-mounted-docks snapshot-DROP). The dock collapse↔expand (and inner
+ * pane-swap) now morphs off the ONE `--dock-morph-t` spring scalar
+ * (`useLayerTransition` + `dock.css`), one clock on every engine. The SEPARABLE
+ * per-instance `view-transition-name` ROUTE-morph seam on the dock root stays
+ * (GlassDock.vue `rootVtStyle`) for the consumer's page/route geometry-morph — it
+ * is no longer the dock's own collapse mechanism. The `.gl-list-item` group recipe
+ * (non-dock) is UNTOUCHED above. */
 
 @keyframes gl-vt-slide-in  { from { opacity: 0; translate: 0 var(--vt-rise, 8px); } }
 @keyframes gl-vt-slide-out { to   { opacity: 0; translate: 0 var(--vt-rise, 8px); } }

package/dist/CardAction-D8nSE62a.js

@@ -1,163 +0,0 @@
-import { t as e } from "./cn-DJXf4yaB.js";
-import { t } from "./_plugin-vue_export-helper-gLzyemvl.js";
-import { createBlock as n, createElementBlock as r, defineComponent as i, normalizeClass as a, normalizeStyle as o, openBlock as s, ref as c, renderSlot as l, unref as u, withCtx as d } from "vue";
-import { Primitive as f } from "reka-ui";
-var p = /* @__PURE__ */ i({
-	__name: "Card",
-	props: {
-		tier: { default: "resting" },
-		surface: { default: "glass" },
-		shadow: {
-			type: Boolean,
-			default: !0
-		},
-		grain: {
-			type: Boolean,
-			default: !0
-		},
-		hover: {
-			type: Boolean,
-			default: !1
-		},
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] },
-		asChild: { type: Boolean },
-		as: { default: "div" }
-	},
-	setup(t) {
-		let r = t, i = c({});
-		function p(e) {
-			let t = e.currentTarget;
-			if (!t) return;
-			let n = t.getBoundingClientRect();
-			if (n.width === 0 || n.height === 0) return;
-			let r = (e.clientX - n.left) / n.width * 100, a = (e.clientY - n.top) / n.height * 100;
-			i.value = {
-				"--mouse-x": `${r.toFixed(2)}%`,
-				"--mouse-y": `${a.toFixed(2)}%`
-			};
-		}
-		return (c, m) => (s(), n(u(f), {
-			"data-slot": "card",
-			"data-tier": t.tier,
-			"data-surface": t.surface,
-			"data-grain": t.grain,
-			as: t.as,
-			"as-child": t.asChild,
-			style: o(t.hover ? i.value : void 0),
-			onPointermove: m[0] ||= (e) => t.hover && p(e),
-			class: a(u(e)("rounded-card text-card-foreground scrollbar-hidden", "[--card-spacing:--spacing(6)] data-[size=sm]:[--card-spacing:--spacing(4)]", `glass-${t.tier}`, t.surface === "glass" && "glass-specular-track", t.surface === "cartoon" && "cartoon-surface", t.shadow && t.surface === "glass" && "shadow-card", !t.grain && "[&::after]:hidden", r.class))
-		}, {
-			default: d(() => [l(c.$slots, "default")]),
-			_: 3
-		}, 8, [
-			"data-tier",
-			"data-surface",
-			"data-grain",
-			"as",
-			"as-child",
-			"style",
-			"class"
-		]));
-	}
-}), m = /* @__PURE__ */ t(/* @__PURE__ */ i({
-	__name: "CardHeader",
-	props: {
-		shrink: { type: Boolean },
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	},
-	setup(t) {
-		let n = t;
-		return (i, o) => (s(), r("div", {
-			"data-slot": "card-header",
-			class: a(u(e)("@container/card-header flex flex-col gap-y-1.5 p-(--card-spacing)", "has-data-[slot=card-action]:grid has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-action]:items-start", t.shrink && "card-header--shrink", n.class))
-		}, [l(i.$slots, "default", {}, void 0, !0)], 2));
-	}
-}), [["__scopeId", "data-v-835e5cc0"]]), h = /* @__PURE__ */ i({
-	__name: "CardTitle",
-	props: { class: { type: [
-		Boolean,
-		null,
-		String,
-		Object,
-		Array
-	] } },
-	setup(t) {
-		let n = t;
-		return (t, i) => (s(), r("h3", {
-			"data-slot": "card-title",
-			class: a(u(e)("text-heading leading-none tracking-tight", n.class))
-		}, [l(t.$slots, "default")], 2));
-	}
-}), g = /* @__PURE__ */ i({
-	__name: "CardDescription",
-	props: { class: { type: [
-		Boolean,
-		null,
-		String,
-		Object,
-		Array
-	] } },
-	setup(t) {
-		let n = t;
-		return (t, i) => (s(), r("p", {
-			"data-slot": "card-description",
-			class: a(u(e)("text-sm text-muted-foreground-strong", n.class))
-		}, [l(t.$slots, "default")], 2));
-	}
-}), _ = /* @__PURE__ */ i({
-	__name: "CardContent",
-	props: { class: { type: [
-		Boolean,
-		null,
-		String,
-		Object,
-		Array
-	] } },
-	setup(t) {
-		let n = t;
-		return (t, i) => (s(), r("div", { class: a(u(e)("p-(--card-spacing)", n.class)) }, [l(t.$slots, "default")], 2));
-	}
-}), v = /* @__PURE__ */ i({
-	__name: "CardFooter",
-	props: { class: { type: [
-		Boolean,
-		null,
-		String,
-		Object,
-		Array
-	] } },
-	setup(t) {
-		let n = t;
-		return (t, i) => (s(), r("div", { class: a(u(e)("flex items-center p-(--card-spacing) pt-0", n.class)) }, [l(t.$slots, "default")], 2));
-	}
-}), y = /* @__PURE__ */ i({
-	__name: "CardAction",
-	props: { class: { type: [
-		Boolean,
-		null,
-		String,
-		Object,
-		Array
-	] } },
-	setup(t) {
-		let n = t;
-		return (t, i) => (s(), r("div", {
-			"data-slot": "card-action",
-			class: a(u(e)("col-start-2 row-span-2 row-start-1 self-start justify-self-end", n.class))
-		}, [l(t.$slots, "default")], 2));
-	}
-});
-//#endregion
-export { h as a, g as i, v as n, m as o, _ as r, p as s, y as t };