@mkbabb/glass-ui 3.8.0 → 3.10.0

package/src/styles/transitions.css

@@ -184,10 +184,28 @@
      * surface). The grammar is single-event entrance + dwell + exit;
      * the next toast (if any) enters on its own contract.
      *
+     * §6 EASING-DOCTRINE EXEMPTION (AY.W-MOTION — DELIBERATE KEEP).
+     * Every glass-ui-OWNED entrance surface (`dialog-scale`, `pop`,
+     * `dropdown`, `fade-slide`, `dock-in`) rides the house `--spring-*`
+     * enter / `--ease-out`/`--ease-standard` exit vocabulary (the §6
+     * doctrine, tokens.css:162-190). The Toast does NOT — and that is
+     * BY DESIGN, not an unexamined default. The reka-ui `ToastRoot`
+     * primitive OWNS its data-state choreography: the entrance slide
+     * direction tracks the viewport origin AND the swipe-end gesture
+     * (`data-[swipe=end]:slide-out-to-right-full`), so the entrance/exit
+     * are coupled to reka's `tw-animate-css` data-state machinery. The §6
+     * spring vocabulary governs glass-ui-OWNED surfaces; the reka-Toast
+     * entrance is not one — re-authoring it onto a `<Transition>` would
+     * fork the primitive's swipe-coupled contract (and `tw-animate-css`
+     * is the shipped optionalPeer this contract depends on). The gate
+     * (proof:animation-coherence) carries the Toast surface in its
+     * REGISTER_ASSIGNMENT_ALLOW set so this keep reads as a gated,
+     * deliberate exemption.
+     *
      * PRM is honoured at the `@media (prefers-reduced-motion: reduce)`
      * block below — the slide motion retires; the fade-in/out
-     * remains. No source change in W4; this comment block IS the
-     * documentation closure for the W4-M.3 toast contract row.
+     * remains. No source motion change; this comment block IS the
+     * documentation closure for the toast contract row.
      */
 
     /* ── Reduced motion: preserve fades, remove transform/scale motion ── */

package/src/styles/utilities.css

@@ -143,6 +143,20 @@
         box-shadow: var(--focus-ring-shadow);
     }
 
+    /* D6.b — `focus-ring-gold`: the opt-in gilded focus ring. Overrides ONLY
+       `--focus-ring-color` (tokens.css) → the shared `--focus-ring-shadow`
+       re-resolves to gold for THIS element; the default ring elsewhere is
+       unchanged. Gold-as-state is the "you are here / this is live" mark — a
+       transient highlight (appears on focus-visible, gone on blur), so gold is
+       lawful here where a permanent gold furniture would not be. Mirror of the
+       `focus-ring` custom-property pattern: a consumer composes
+       `class="focus-ring focus-ring-gold"` to gild the ring on the active rung;
+       the resting mark keeps its structural color (the four-voice law: red is
+       identity, gold is distinction). */
+    .focus-ring-gold {
+        --focus-ring-color: var(--gold);
+    }
+
     /* ── Hairline-accent — 0.5px catch-light + under-shadow pair ──
        Composes the canonical `--border-hairline` token (tokens.css §
        Glass-decorative). Adopt at any surface that wants the canonical
@@ -191,14 +205,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 +238,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 {
@@ -342,6 +380,30 @@
         }
     }
 
+    /* D6.b — `.text-gilt`: the brand-polish ONE-SHOT shimmer. Same gold-clip
+       gradient pass as `.gold-shimmer`, but the gold passes ONCE then SETS — a
+       seal being pressed, not a marquee looping forever. This is the lawful home
+       for the chassis "Complete!" celebration the disco-star used to carry: the
+       gold sweeps once over the completion label on resolve, then holds the
+       static gold gradient.
+
+       `animation-iteration-count: 1` + `animation-fill-mode: forwards` so the
+       slide runs exactly one pass and the final keyframe (background-position
+       -200%) sticks — no per-frame repaint after settle. PRM users get the
+       static gradient, no pass (the gold is still present, just unanimated). */
+    .text-gilt {
+        background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light), var(--color-gold), var(--color-gold-light), var(--color-gold-dark));
+        background-size: 250% 100%;
+        background-clip: text;
+        -webkit-background-clip: text;
+        color: transparent;
+    }
+    @media (prefers-reduced-motion: no-preference) {
+        .text-gilt {
+            animation: gold-shimmer-slide var(--duration-shimmer) var(--ease-out-expo) 1 forwards;
+        }
+    }
+
     /* ── Keyboard key ── */
     .kbd {
         display: inline-flex;
@@ -546,6 +608,56 @@
         letter-spacing: 0.1em;
     }
 
+    /* D6.b — `MetricBadge variant="record"`: the gilded record/peak value.
+       The highest-leverage gold moment on a DATA atlas — a tiny gilt pill on the
+       single record / peak / featured figure (the all-time-high, the top
+       district). Gold marks the SUPERLATIVE, exactly one per view: a gilt pill on
+       a single figure reads as a medal — civic and earned, not decorative.
+
+       The recipe composes ON the base `.metric-badge` glass plate (it is a
+       MODIFIER, never a replacement): a 1px `--gold-rim` tooled edge + `--gold-ink`
+       text + a FAINT gold wash (≤8% alpha — never an opaque gold fill, which would
+       read as a fourth DATA category and break one-color-one-meaning). The wash
+       sits over the badge's own `--glass-bg-quiet` plate via `color-mix`, so the
+       cream glass still reads through; the gold is the leaf, not the area.
+
+       `--gold-ink` clears cream-law ② (APCA |Lc| ≥ 45) on `--card` in both arms
+       (proof:gold-ink-contrast), and the faint wash only lightens the plate it
+       sits on, so the ink stays legible. */
+    .metric-badge--record {
+        border-color: var(--gold-rim);
+        background:
+            linear-gradient(
+                0deg,
+                color-mix(in oklab, var(--gold) 8%, transparent),
+                color-mix(in oklab, var(--gold) 8%, transparent)
+            ),
+            var(--metric-badge-bg, var(--glass-bg-quiet));
+        box-shadow:
+            inset 0 0 0 1px var(--gold-rim),
+            inset 0 0.5px 0 0
+                color-mix(in oklab, var(--gold-light) 30%, transparent),
+            0 1px 6px color-mix(in srgb, var(--shadow-color) 8%, transparent);
+    }
+
+    /* The record value reads in legible gold ink (the medal numeral). Scoped to
+       the amount slot so the unit/label keep their muted register — the gold is
+       on the figure, not the furniture. */
+    .metric-badge--record .metric-badge__amount {
+        color: var(--gold-ink);
+    }
+
+    .metric-badge--record:hover {
+        /* Hover deepens the rim to full `--gold` and lifts the wash one rung —
+           the gilt edge catches a touch more light, never a fill. */
+        border-color: var(--gold);
+        box-shadow:
+            inset 0 0 0 1px var(--gold),
+            inset 0 0.5px 0 0
+                color-mix(in oklab, var(--gold-light) 40%, transparent),
+            0 2px 10px color-mix(in srgb, var(--shadow-color) 12%, transparent);
+    }
+
     /* Q.W3 Lane A — the `.glass-dock[data-density="…"]` density rungs that
        set `--dock-tab-h` + `--dock-label-size` were consolidated into
        `dock.css` (their canonical dock-styles home). They formerly lived
@@ -683,9 +795,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);
@@ -824,28 +939,17 @@
         --ripple-radius: var(--ripple-radius-max, 12rem);
     }
 
-    /* Sparkle glyph — hidden at rest, animated on hover. The star
-       sweeps diagonally from top-left to bottom-right per the canonical
-       sparkle-sweep keyframe (animations.css). */
-    &::after {
-        content: "✦";
-        position: absolute;
-        top: 0.25rem;
-        left: 0.5rem;
-        color: hsl(0 0% 100% / 0.7);
-        font-size: 0.75rem;
-        line-height: 1;
-        pointer-events: none;
-        opacity: 0;
-        will-change: transform, opacity;
-        z-index: 1;
-    }
-
-    @media (prefers-reduced-motion: no-preference) {
-        &:hover::after {
-            animation: sparkle-sweep var(--duration-sparkle) var(--ease-out-expo);
-        }
-    }
+    /* D6.b — the disco-star EXCISED. The `::after { content:"✦" }` glyph and
+       its `&:hover::after { animation: sparkle-sweep … }` trigger are gone (the
+       user's named removal: "remove the disco star from all glass-ui elements").
+       A primary action now announces itself by SETTLING into a richer surface,
+       not by emitting a sparkle: the whole hover affirmation rides the existing
+       `&:hover` specular catch-light box-shadow (`--glass-specular`, above) —
+       honest physics, not casino-skeuomorphism. Gold CTAs add the
+       `btn-gold-bg-sweep` metal-catch (a metal catching light is honest; a star
+       is not). One garish gesture out, zero garish gestures in. The
+       `sparkle-sweep` keyframe is TOMBSTONED in animations.css (empty body,
+       full delete in 3.11); `--duration-sparkle` is `@deprecated` in tokens.css. */
 
     /* PRM bracket — the press-ripple retires; the press still reads
        via the audacious recipe's transform/scale beat (the ripple is
@@ -873,14 +977,14 @@
    token triad (tokens.css §13).
 
    Design register:
-   • PRM no-preference: shimmer sweeps continuously at `--duration-shimmer`
-     rate; the sparkle-sweep (from btn-audacious) coexists on hover.
+   • PRM no-preference: the gold sweep IS the gold-CTA affirmation — a metal
+     catching light is honest physics (the disco-star is gone, D6.b).
    • PRM reduce: static gold tint shows on hover; no animation.
    • The gold shimmer is a background-image layer ABOVE the existing
      btn-audacious paper-grain + primary-radial layers, blended with
      `overlay` so the glass substrate reads through at partial opacity.
-   • The `::before` ripple and `::after` sparkle from btn-audacious are
-     unchanged; this modifier only retunes the hover background layers.
+   • The `::before` ripple from btn-audacious is unchanged; the `::after`
+     sparkle is EXCISED (D6.b) — this modifier only retunes the hover layers.
    • Consumer applies: `<Button variant="gold-audacious">Next →</Button>` */
 @utility btn-audacious-gold {
     /* At rest: a faint warm gold tint over the glass surface reads as "warm
@@ -893,27 +997,40 @@
             color-mix(in srgb, var(--color-gold) 8%, transparent)
         );
 
-    /* Hover: replace the audacious primary-radial with a gold sweep shimmer.
-       The shimmer gradient rides above the paper-grain texture; the `overlay`
-       blend-mode concentrates the gold on bright grain facets and recedes on
-       dark ones — the same lens metaphor as the btn-audacious primary radial. */
+    /* Hover: deepen the plate to a SATURATED gold the white label clears (AW.W13
+       names a "saturated gold backplate"; the D1 fix). The bottom layer is the
+       OPAQUE fixed deep gold (`--color-gold-deep`, mode-INVARIANT) — a solid plate
+       at ~6.5:1 (light) / ~5.5:1 (dark) against white, well below the ~0.18
+       luminance floor white text needs for ≥4.5:1 (was a translucent 22-30% wash
+       over near-cream glass → 1.29:1 white-on-pale-gold). The plate is FIXED-dark
+       in both modes — deepening toward the mode-flipping `--foreground` brightened
+       the dark plate to a cream-gold; `--color-gold-deep` does not flip. The
+       shimmer sweep rides ABOVE as a LOW-alpha gold gradient (normal blend, ≤18% —
+       it textures the plate without brightening it past the floor), and the
+       paper-grain overlays for the disco facet. */
     &:hover:not(:disabled) {
         background-image:
             var(--paper-clean-texture),
             linear-gradient(
                 90deg,
                 transparent 0%,
-                color-mix(in srgb, var(--color-gold-dark) 22%, transparent) 25%,
-                color-mix(in srgb, var(--color-gold-light) 30%, transparent) 50%,
-                color-mix(in srgb, var(--color-gold-dark) 22%, transparent) 75%,
+                color-mix(in srgb, var(--color-gold) 14%, transparent) 25%,
+                color-mix(in srgb, var(--color-gold) 18%, transparent) 50%,
+                color-mix(in srgb, var(--color-gold) 14%, transparent) 75%,
                 transparent 100%
+            ),
+            linear-gradient(
+                135deg,
+                var(--color-gold-deep),
+                color-mix(in srgb, var(--color-gold-deep), var(--color-gold-dark) 18%) 50%,
+                var(--color-gold-deep)
             );
-        background-blend-mode: overlay, normal;
-        background-size: var(--paper-texture-size), 250% 100%;
-        background-position: 0 0, 100% 0;
+        background-blend-mode: overlay, normal, normal;
+        background-size: var(--paper-texture-size), 250% 100%, 100% 100%;
+        background-position: 0 0, 100% 0, 0 0;
         box-shadow:
             var(--glass-specular),
-            0 0 0 1px color-mix(in srgb, var(--color-gold) 30%, transparent),
+            0 0 0 1px color-mix(in srgb, var(--color-gold-dark) 40%, transparent),
             0 0.5px 0 0 rgb(0 0 0 / 0.06);
     }
 
@@ -929,8 +1046,8 @@
    a text-clip gradient). This variant sweeps the `background-position` of the
    250% wide gradient across the button's bounding box. */
 @keyframes btn-gold-bg-sweep {
-    0%   { background-position: 0 0, 100% 0; }
-    100% { background-position: 0 0, -100% 0; }
+    0%   { background-position: 0 0, 100% 0, 0 0; }
+    100% { background-position: 0 0, -100% 0, 0 0; }
 }
 
 /* ── Table density utilities — AN.R0 ─────────────────────────────────────
@@ -1005,22 +1122,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.05, 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 {
@@ -1036,11 +1159,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);
     }
@@ -1068,36 +1191,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;
     }
 }
@@ -1108,12 +1247,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

@@ -60,5 +60,56 @@
 @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); } }
 
+/* ── gl-shared-element — the named-pair MORPH group (D6.c M6) ──────────────────
+ * Distinct from `.gl-list-item` (a cross-fade of MANY members in a re-rank): a
+ * shared-element morph is ONE element that exists in BOTH the old and new states
+ * under the SAME `view-transition-name`, so the browser MORPHS it in place — the
+ * group interpolates its size+position (transform) while old/new cross-fade. The
+ * editorial case: the gallery card's title IS the dashboard masthead's title, so
+ * the name you clicked GROWS into the name you read (the card → masthead route
+ * morph). The consumer adds `view-transition-class: gl-shared-element` plus a
+ * MATCHED `view-transition-name: <id>` on BOTH the source and destination element
+ * (the MANDATORY runtime rule — ≤1 element per name per state, else the morph is
+ * skipped silently), and wraps the navigation in `useRouteTransition` /
+ * `startViewTransition`.
+ *
+ * The morph rides the SMOOTH register (the 700ms-class spring, C-ANIM-VIZ-MAP T1
+ * §7) — a longer, gentler curve than the list-item cross-fade, because a morph
+ * that travels across the viewport wants room to read. The old/new cross-fade is
+ * softened so the morphing GROUP is the figure and the rest recedes. */
+::view-transition-group(.gl-shared-element) {
+    animation-duration: var(--vt-morph-duration, var(--duration-slow, 500ms));
+    animation-timing-function: var(--vt-morph-ease, var(--spring-smooth, ease-in-out));
+}
+::view-transition-old(.gl-shared-element),
+::view-transition-new(.gl-shared-element) {
+    /* The image pair cross-fades UNDER the group's size/position morph — softer
+       than the group curve so the morph (the size/position travel) is the figure
+       and the pixel cross-fade is the recessive fill. */
+    animation-duration: var(--vt-morph-duration, var(--duration-slow, 500ms));
+    animation-timing-function: var(--vt-ease, var(--spring-smooth, ease-in-out));
+}
+
+/* ── gl-expand — the plate → fullscreen MORPH recipe (D6.c M7) ─────────────────
+ * The expand verb (a plate growing to fullscreen) is a SHARED-ELEMENT morph, not
+ * an opacity jump-cut: the plate IS the fullscreen surface, growing. It is a
+ * specialization of `gl-shared-element` — the SAME named-pair morph, with the
+ * expand register (a touch snappier than a route morph, because the surface stays
+ * in place and only the rect grows, so it wants less travel-room). `ExpandableContainer`
+ * wires the `view-transition-name` plumbing on its plate↔fullscreen surfaces (an
+ * opt-in `viewTransitionName` prop), so a consumer opts in and the open/close
+ * mutation — wrapped in `startViewTransition` — morphs the plate's rect to the
+ * fullscreen rect and back. The named pair is the SAME element across states
+ * (the slot content), so the browser captures one group and grows it. */
+::view-transition-group(.gl-expand) {
+    animation-duration: var(--vt-expand-duration, var(--duration-normal, 240ms));
+    animation-timing-function: var(--vt-expand-ease, var(--spring-bouncy, ease-out));
+}
+::view-transition-old(.gl-expand),
+::view-transition-new(.gl-expand) {
+    animation-duration: var(--vt-expand-duration, var(--duration-normal, 240ms));
+    animation-timing-function: var(--vt-ease, var(--spring-bouncy, ease-out));
+}
+
 /* Keep the non-transitioned UI interactive while the snapshot animates. */
 ::view-transition { pointer-events: none; }

package/dist/DiscoGlyph-CG0F410s.js

@@ -1,132 +0,0 @@
-import { r as e } from "./keys-BsYjEFOW.js";
-import { computed as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, openBlock as o, useId as s, watch as c } from "vue";
-//#region src/components/custom/disco-glyph/DiscoGlyph.vue?vue&type=script&setup=true&lang.ts
-var l = ["viewBox"], u = [
-	"id",
-	"x1",
-	"y1",
-	"x2",
-	"y2"
-], d = ["stop-color"], f = ["stop-color"], p = ["stop-color"], m = ["stop-color"], h = ["stop-color"], g = ["stop-color"], _ = ["stop-color"], v = ["stop-color"], y = ["id"], b = ["d"], x = ["d", "fill"], S = ["d", "fill"], C = /* @__PURE__ */ i({
-	__name: "DiscoGlyph",
-	props: {
-		silhouette: {},
-		viewBox: { default: "0 0 24 24" },
-		active: {
-			type: Boolean,
-			default: !1
-		},
-		phaseColor: { default: "currentColor" },
-		facetAxis: { default: "diagonal" }
-	},
-	setup(i) {
-		let C = i, w = s(), T = t(() => `disco-facet-${w}`), E = t(() => `disco-cap-${w}`), D = t(() => {
-			switch (C.facetAxis) {
-				case "horizontal": return {
-					x1: "0",
-					y1: "0.5",
-					x2: "1",
-					y2: "0.5"
-				};
-				case "vertical": return {
-					x1: "0.5",
-					y1: "0",
-					x2: "0.5",
-					y2: "1"
-				};
-				default: return {
-					x1: "0",
-					y1: "0",
-					x2: "1",
-					y2: "1"
-				};
-			}
-		}), O = e();
-		return O && c(() => C.silhouette, (e) => {
-			O.value = e;
-		}, { immediate: !0 }), (e, t) => (o(), n("svg", {
-			xmlns: "http://www.w3.org/2000/svg",
-			viewBox: i.viewBox,
-			fill: "none",
-			class: a(["disco-glyph", { "disco-glyph--phase-tinted": i.active }]),
-			"aria-hidden": "true"
-		}, [
-			r("defs", null, [r("linearGradient", {
-				id: T.value,
-				x1: D.value.x1,
-				y1: D.value.y1,
-				x2: D.value.x2,
-				y2: D.value.y2
-			}, [
-				r("stop", {
-					offset: "0%",
-					"stop-color": i.phaseColor,
-					"stop-opacity": "0.85"
-				}, null, 8, d),
-				r("stop", {
-					offset: "14%",
-					"stop-color": i.phaseColor,
-					"stop-opacity": "1"
-				}, null, 8, f),
-				r("stop", {
-					offset: "28%",
-					"stop-color": i.phaseColor,
-					"stop-opacity": "0.7"
-				}, null, 8, p),
-				r("stop", {
-					offset: "42%",
-					"stop-color": i.phaseColor,
-					"stop-opacity": "0.95"
-				}, null, 8, m),
-				r("stop", {
-					offset: "56%",
-					"stop-color": i.phaseColor,
-					"stop-opacity": "0.6"
-				}, null, 8, h),
-				r("stop", {
-					offset: "70%",
-					"stop-color": i.phaseColor,
-					"stop-opacity": "0.85"
-				}, null, 8, g),
-				r("stop", {
-					offset: "84%",
-					"stop-color": i.phaseColor,
-					"stop-opacity": "0.5"
-				}, null, 8, _),
-				r("stop", {
-					offset: "100%",
-					"stop-color": i.phaseColor,
-					"stop-opacity": "0.75"
-				}, null, 8, v)
-			], 8, u), r("linearGradient", {
-				id: E.value,
-				x1: "0",
-				y1: "0",
-				x2: "0.5",
-				y2: "0.5"
-			}, [...t[0] ||= [r("stop", {
-				offset: "0%",
-				"stop-color": "white",
-				"stop-opacity": "0.55"
-			}, null, -1), r("stop", {
-				offset: "40%",
-				"stop-color": "white",
-				"stop-opacity": "0"
-			}, null, -1)]], 8, y)]),
-			r("path", {
-				d: i.silhouette,
-				fill: "currentColor"
-			}, null, 8, b),
-			r("path", {
-				d: i.silhouette,
-				fill: `url(#${T.value})`
-			}, null, 8, x),
-			r("path", {
-				d: i.silhouette,
-				fill: `url(#${E.value})`
-			}, null, 8, S)
-		], 10, l));
-	}
-});
-//#endregion
-export { C as t };