@mkbabb/glass-ui 3.7.0 → 3.9.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

@@ -191,14 +191,32 @@
        AL-W10 SLIM (X6 §M-1 + Y7 §3 + DESIGN.md §L3). I compose this
        class onto every interactive surface that wants the iOS tap-
        squish idiom; the press scales to `--scale-press` (0.96, the
-       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 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).
+       canonical iOS `.regular` control rung). I keep this as a single
+       canonical rung — NOT a 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).
+
+       AX.W52 §6 doctrine — the `scale` register is reconciled onto
+       `--spring-smooth` (was `--spring-snappy`), the ONE button/interactive
+       scale register the §6 easing doctrine records and the gate asserts
+       across `.btn-pill`/`.tap-squish`/`.glass-btn`/`btn-interactive`. At
+       ζ=0.86 `--spring-smooth` settles a press crisply with a sub-perceptual
+       (~0.5%) peak — no visible bounce — so press still reads alive while
+       hover reads as a smooth glide on the SAME spring.
+
+       The transition lists the SURFACE legs (bg/border/box-shadow/color/
+       opacity) on the bezier `--ease-standard` alongside the spring `scale`
+       leg — the SAME coherent set `.btn-pill` carries. This is load-bearing:
+       `.tap-squish` and `.btn-pill` are co-composed on the button base and
+       this `transition` shorthand would otherwise CLOBBER `.btn-pill`'s
+       surface legs down to a scale-only animation (the cascade bug that left
+       every button transitioning ONLY `scale` — the live-readback RED). With
+       both classes carrying the full set, whichever wins the surface cross-
+       fade survives. On a non-button press surface the extra legs are inert
+       unless that prop changes, in which case a smooth cross-fade is the
+       desired interactive read anyway.
 
        Under PRM I retire the press transform entirely and lean on the
        consumer's own hover/active bg-tint cascade to acknowledge the
@@ -206,7 +224,13 @@
     .tap-squish {
         /* AQ.W3 §W3.2 identity base */
         scale: 1;
-        transition: scale var(--duration-fast) var(--spring-snappy);
+        transition:
+            background-color var(--duration-fast) var(--ease-standard),
+            border-color var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard),
+            color var(--duration-fast) var(--ease-standard),
+            opacity var(--duration-fast) var(--ease-standard),
+            scale var(--duration-fast) var(--spring-smooth);
         transform-origin: center center;
     }
     .tap-squish:active {
@@ -683,9 +707,12 @@
    `--duration-fast` + `--ease-standard` tokens. */
 @utility scale-on-hover {
     /* Individual-transform identity base (AQ.W3 §W3.2). Transition the `scale`
-       longhand (not `transform`) so the migrated hover scale animates. */
+       longhand (not `transform`) so the migrated hover scale animates.
+       AX.W52 §6 doctrine — the `scale` transform leg rides `--spring-smooth`
+       (the settle register), NOT the bezier `--ease-standard` (a transform on a
+       bezier reads mechanical; springs read alive on transform). */
     scale: 1;
-    transition: scale var(--duration-fast) var(--ease-standard);
+    transition: scale var(--duration-fast) var(--spring-smooth);
 
     &:hover {
         scale: var(--scale-hover);
@@ -982,7 +1009,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
@@ -1004,22 +1032,28 @@
 
 /* ── Interactive-button four-state recipe ────────────────────────────────
    `.btn-interactive` carries the canonical "Button-with-spring-hover"
-   four-state contract — transition + hover-scale (`--scale-hover`) +
-   active-press (`--scale-press`) + disabled-opacity + focus-ring fade-in.
-   The Button primitive's variants emit the four states except `hover:scale-*`;
-   this is the canonical opt-in that adds the spring-hover lift. Consumed by
-   keyframes.js at 7 sites. */
+   four-state contract — transition + hover-scale + active-press + disabled-
+   opacity + focus-ring fade-in. The Button primitive's variants emit the four
+   states except `hover:scale-*`; this is the canonical opt-in that adds the
+   spring-hover lift. Consumed by keyframes.js at 7 sites.
+
+   AX.W52 §6 — the hover lift is the restrained `--scale-hover-btn` (1.035, NOT
+   the emphatic 1.08 `--scale-hover`) routed through `--spring-smooth` — the ONE
+   button scale register the §6 doctrine records and the gate asserts across
+   `.btn-pill`/`.tap-squish`/`.glass-btn`/`btn-interactive`. The surface legs
+   stay on the bezier `--ease-standard` (a colour cross-fade reads as a wobble
+   on a spring); only the `scale` transform leg springs. */
 @utility btn-interactive {
     /* AQ.W3 §W3.2 identity base */
     scale: 1;
     transition:
         background-color var(--duration-fast) var(--ease-standard),
         color var(--duration-fast) var(--ease-standard),
-        scale var(--duration-fast) var(--ease-standard),
+        scale var(--duration-fast) var(--spring-smooth),
         opacity var(--duration-fast) var(--ease-standard);
 
     &:hover {
-        scale: var(--scale-hover);
+        scale: var(--scale-hover-btn);
     }
 
     &:active {
@@ -1035,11 +1069,11 @@
         box-shadow: var(--focus-ring-shadow);
         outline: none;
         /* Fade in; base state has no box-shadow transition → instant
-           removal */
+           removal. The `scale` leg keeps the `--spring-smooth` register. */
         transition:
             background-color var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard),
-            scale var(--duration-fast) var(--ease-standard),
+            scale var(--duration-fast) var(--spring-smooth),
             opacity var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard);
     }
@@ -1067,36 +1101,52 @@ html.no-transition *::after {
     transition-duration: 0s !important;
 }
 
-/* ── Forced-colors restoration (AQ.W2 §5) ──────────────────────────────
+/* ── Forced-colors focus + silhouette rung (AQ.W2 §5 · generalized AX.W36) ────
    Windows High Contrast / forced-colors mode STRIPS `box-shadow` — so the
    glass focus rings (box-shadow + `outline: none`) vanish, leaving keyboard
-   users with no visible focus (a WCAG 2.4.7 failure forced-colors exposes).
-   Restore a real `outline` keyed to the system `Highlight` color (outline
-   survives forced-colors; box-shadow does not). The box-shadow ring stays the
-   primary in normal mode (it carries the glass aesthetic) — these two are
-   mutually exclusive by media query, NOT a parallel path.
-
-   `forced-color-adjust: none` is deliberately NOT used — glass-ui's
-   glassmorphic chrome is decorative and yields to the user's forced palette
-   (css forced-colors guidance). Baseline Widely Available; this IS the
-   fallback mechanism (it only activates under forced-colors), so no nested
-   guard. */
+   users with no visible focus. Restore a real `outline` keyed to the system
+   `Highlight` color (outline survives forced-colors; box-shadow does not). The
+   box-shadow ring stays the primary in normal mode (it carries the glass
+   aesthetic) — these two are mutually exclusive by media query, NOT a parallel
+   path.
+
+   AX.W36 — the focus-survival selector set is GENERALIZED to the broader
+   interactive surface: the dock CONTROLS (`.dock-icon-button` / `.dock-tab-button`
+   / `.dock-select-trigger` / `.dock-dropdown-trigger`) + the pill button base
+   (`.btn-pill`) all carry a box-shadow focus ring (dock.css / utilities.css) that
+   vanishes under WHC just like the original five. This is the SAME `Highlight`
+   outline rung extended to cover them — ONE block, ONE path (the glass-language
+   structure-survival skin for the tier panes / StatusDot / floating surfaces lives
+   co-located with the ladder it skins, in glass.css).
+
+   `forced-color-adjust: none` is deliberately NOT used — glass-ui's glassmorphic
+   chrome is decorative and yields to the user's forced palette (css forced-colors
+   guidance). Baseline Widely Available; this IS the fallback mechanism (it only
+   activates under forced-colors), so no nested guard. */
 @media (forced-colors: active) {
     .focus-ring:focus-visible,
     .glass-btn:focus-visible,
     .interactive-item:focus-visible,
+    .btn-pill:focus-visible,
+    .dock-icon-button:focus-visible,
+    .dock-tab-button:focus-visible,
+    .dock-select-trigger:focus-visible,
+    .dock-dropdown-trigger:focus-visible,
     .input-pill:focus,
     .input-pill:focus-visible {
         outline: 2px solid Highlight;
         outline-offset: 2px;
     }
 
-    /* Structural edges borne ONLY by box-shadow (the hairline catch-light /
-       glass pill edge / card plate) also vanish — restore a real border so
-       the silhouette survives. CanvasText is the system text/border color. */
+    /* Structural edges borne ONLY by box-shadow (the hairline catch-light + the
+       dock SHELL pill edge) also vanish — restore a real border so the silhouette
+       survives. CanvasText is the system text/border color. The `.glass-dock`
+       shell is OUT of the glass-material group BY DESIGN (it hand-rolls a parallel
+       surface — see glass.css), so it keeps its WHC edge HERE; the five-rung ladder
+       + `.glass-card` get their WHC border from the co-located glass-language skin
+       in glass.css (one source per surface family, no double-declaration). */
     .hairline-accent,
-    .glass-dock,
-    .glass-card {
+    .glass-dock {
         border: 1px solid CanvasText;
     }
 }
@@ -1107,12 +1157,13 @@ html.no-transition *::after {
    to the WCAG 2.5.5 (44px) minimum — ONE amendment retiring the per-consumer
    `min-h-[44px]` one-liners. Token-driven (`--touch-target`); fine-pointer
    byte-identical. Targets `Button size="icon"` (via the `data-size="icon"`
-   attr Button.vue reflects), ExpandableContainer + ResponsiveTabs triggers.
+   attr Button.vue reflects), ExpandableContainer + SegmentedTabs (responsive
+   mobile Select) triggers.
    `min-block/inline-size` only RAISES — a larger explicit size is never lost. */
 @media (pointer: coarse) {
     [data-size="icon"],
     .expandable-container__trigger,
-    .responsive-tabs__trigger {
+    .segmented-tabs__trigger {
         min-block-size: var(--touch-target, 2.75rem);
         min-inline-size: var(--touch-target, 2.75rem);
     }

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); } }