@mkbabb/glass-ui 4.2.0 → 5.0.0

package/dist/styles/dock/morph.css

@@ -1,430 +1 @@
-/* dock/morph.css — the SINGLE-SCALAR morph chrome + state response (AX.W06 carve).
- *
- * Carved from the dock.css god-module (slice 25). This partial owns the dock's
- * DYNAMIC chrome: the W01 `--dock-expand-t` directional expanded-ness derivation,
- * the root background/border/padding interpolation on the ONE `--dock-morph-t`
- * clock, the collapsed/summary state (the W45-TUNE Q1 proportioned pill + the
- * summary glyph reveal), the held / open-descendant surface response, and the
- * W55 adaptive-legibility `--glass-backdrop: light` bucket. The static structural
- * surface (root, clip, variants, persistent) lives in dock/shell.css.
- *
- * @import-ed by dock.css in cascade order, in the SAME `@layer components` — the
- * carve is isomorphic (same layer, same source order → ZERO visual delta). */
-
-@layer components {
-    /* AX.W01 — the root chrome morphs off the SINGLE `--dock-morph-t` scalar, NOT a
-       CSS transition (the prior `padding/scale/radius var(--dock-motion-resize)` +
-       `background/border-color var(--dock-motion-standard)` transition list — TWO
-       curves on TWO durations — is DELETED). `--dock-expand-t` is the directional
-       expanded-ness (0 = collapsed look, 1 = expanded look) derived from the
-       per-swap morph scalar + the synchronously-set `.expanded`/`.collapsed` class:
-       the box width AND the root padding/radius/color move on ONE clock. The
-       per-frame writes drive the registered `<number>` scalar; the `calc()` reads
-       below interpolate composited. Under PRM the spring's `respectReducedMotion`
-       settles instantly (the scalar jumps 0→1 in one frame → the chrome snaps). */
-
-    /* `--dock-expand-t` — the directional expanded-ness. `--dock-morph-t` is a
-       REGISTERED `@property` (initial-value 0), so it is NEVER guaranteed-invalid:
-       `var(--dock-morph-t, 1)` reads 0 at REST (the fallback is DEAD), which would
-       resolve every expanded dock to expand-t 0 → the collapsed resting look (the
-       pill-radius + collapsed bg/border/padding regression). So the resting value is
-       stated STATICALLY per class, and ONLY while a morph is in flight
-       (`[data-morphing]` armed on the root by useLayerTransition, cleared on settle)
-       does expand-t track the live spring scalar. The class is ALREADY the END state
-       during the morph, so the read resolves the correct in-flight blend (collapse
-       1→0 via `1 - t`; expand 0→1 via `t`); on settle `[data-morphing]` clears and
-       expand-t snaps to the exact class endpoint. */
-    /* BB.W-DOCK-MORPH-FAMILY (f) — the `--dock-expand-t` directional derivation is
-       ORIENTATION-AGNOSTIC. The derivation reads the per-swap morph scalar + the
-       synchronously-set `.expanded`/`.collapsed` class — there is NO axis in this
-       blend (a `t`-vs-`1-t` directional read), so the `:not(.vertical)` qualifier is
-       DROPPED here. A collapsing VERTICAL dock now derives the same in-flight
-       expand-t (the box-size arm `layers.css` already morphs `block-size` on
-       `--dock-morph-t`; this gives the chrome the matching directional scalar). The
-       earlier "a vertical rail is ALWAYS-EXPANDED" assumption is retired since
-       vertical-collapse shipped — `alwaysExpanded` defaults false (GlassDock.vue),
-       so a genuinely-collapsing vertical dock gets its chrome on the ONE clock. */
-    .glass-dock.expanded,
-    .glass-dock.always-expanded {
-        --dock-expand-t: 1;
-    }
-
-    .glass-dock.collapsed {
-        --dock-expand-t: 0;
-    }
-
-    .glass-dock.expanded[data-morphing],
-    .glass-dock.always-expanded[data-morphing] {
-        --dock-expand-t: var(--dock-morph-t);
-    }
-
-    .glass-dock.collapsed[data-morphing] {
-        --dock-expand-t: calc(1 - var(--dock-morph-t));
-    }
-
-    /* BC.W-DOCK-SHRINK-BLUR — the BB.W-LIQUID-REVEAL bloom-from-source decongest is a
-       TRANSIENT, not a resting state. HEAD keyed the bare `.glass-dock` self-blur off
-       `--dock-expand-t`, which AT REST resolves to the class endpoint → a PERMANENT 3px
-       self-blur on the resting collapsed dock, STACKED on the 9px backdrop (the "blurry
-       mess when shrunken", glass-dock-codebase §2.4). The FIX gates the self-blur (a
-       SURFACE `filter` arm on the dock's own pixels — NOT `backdrop-filter`, so the glass
-       plate blur is never clobbered; compositor-safe) to `[data-morphing]`: at REST the
-       dock is CRISP; ONLY mid-morph does the 3px bloom settle to 0 as the pill
-       materializes (the iOS-27 bloom, gesture-only). The backdrop blur (the glass
-       material) is UNTOUCHED. PRM zeroes it (the carve below). Clean break, no alias. */
-    .glass-dock {
-        --dock-reveal-blur: 0px; /* resting: CRISP — no own-pixel self-blur */
-    }
-    .glass-dock[data-morphing] {
-        /* BD.W-DOCK-CORE (A4) — the blur DIAL-BACK. The peak drops 3px → 1.25px AND the
-           decay is FRONT-LOADED: the `clamp(0, (0.5 - expand-t)/0.5, 1)` ramp drives the
-           blur 1.25px → 0 as expand-t crosses 0 → 0.5, then HOLDS 0 for the back half — a
-           brief decongest FLASH, crisp by the morph's midpoint (the icons never read soft
-           through the slow grow). The resting self-blur stays 0px (above, untouched). The
-           9px BACKDROP blur (the material) is untouched — only the OWN-pixel self-blur is
-           dialed. PRM → 0 (the carve below). */
-        --dock-reveal-blur: 1.25px; /* the transient decongest bloom — mid-morph only */
-        filter: blur(
-            calc(
-                var(--dock-reveal-blur) *
-                    clamp(0, calc((0.5 - var(--dock-expand-t, 1)) / 0.5), 1)
-            )
-        );
-    }
-
-    /* The morphing root chrome — background / border-color interpolate between the
-       collapsed and expanded endpoints on the ONE `--dock-expand-t` scalar. Scoped
-       to the horizontal dock (`:not(.vertical)`) — the inline-axis aperture morph;
-       a vertical dock collapses its BLOCK axis (the summary/full FLIP from the
-       orchestrator) and reads its own surface plate (shell.css `.glass-dock.vertical`).
-       The two color axes blend in srgb (the house mix the token ladder speaks). The
-       `.collapsed` discrete bg/border declarations are RETIRED — this block is the
-       single authority, and at rest `--dock-expand-t` resolves to the class endpoint
-       (0 collapsed / 1 expanded) so the resting look is exact.
-       AZ.W-DOCK-TAXONOMY — the `variant-dock` class is gone; `.glass-dock:not(.vertical)`
-       IS the horizontal dock now (no second-way to express orientation). */
-    .glass-dock:not(.vertical) {
-        /* AY.W-A11Y-PERF O-1 / AZ.W-ADAPTIVE-AUTO Arm 1 — BOTH morph endpoints compose
-           the W55 oklab adaptive tint so the self-engage darken (the unconditional
-           `:where(.glass-dock)` rule in the sibling adaptive-legibility.css partial
-           re-points the element-level
-           `--glass-tint-source`/`--glass-tint-strength`) reaches the LIVE
-           horizontal dock surface in BOTH the expanded AND the COLLAPSED look (this
-           0,3,0 morph interp OVERRIDES the 0,1,0 shell.css bg, so the tint must be
-           applied HERE — and the COLLAPSED endpoint `--glass-bg-wash` must carry it too,
-           else a collapsed dock over light paints the un-darkened wash and the plate
-           vanishes — the C5-2 ΔL≈0.01 collapse, re-surfaced on the collapsed endpoint).
-           The srgb transition mix between the two TINTED endpoints is preserved (the
-           in-flight morph frames are sub-perceptual); at the `0%` rest default both
-           inner oklab mixes are no-ops so this is byte-identical to today. */
-        background: color-mix(
-            in srgb,
-            color-mix(
-                in oklab,
-                var(--glass-bg-dock, var(--glass-bg-resting)),
-                var(--glass-tint-source) var(--glass-tint-strength)
-            )
-                calc(var(--dock-expand-t, 1) * 100%),
-            color-mix(
-                in oklab,
-                var(--glass-bg-wash),
-                var(--glass-tint-source) var(--glass-tint-strength)
-            )
-        );
-        border-color: color-mix(
-            in srgb,
-            var(--glass-border-dock, var(--glass-border-resting))
-                calc(var(--dock-expand-t, 1) * 100%),
-            var(--glass-border-floating)
-        );
-    }
-
-    /* BB.W-DOCK-MORPH-FAMILY (f) — the VERTICAL chrome-interp un-gate (BB-1). The
-       bg/border interp is AXIS-INVARIANT (a color mix reads the scalar with no
-       axis), so the vertical dock interpolates its plate between the SAME
-       collapsed↔expanded endpoints on the SAME `--dock-expand-t` scalar the
-       horizontal block reads — the ONE `DOCK_SPRING` clock, no second clock, no
-       re-added CSS transition. This PARALLEL `.vertical` block (specificity 0,2,0,
-       source-order AFTER the shell.css static `.glass-dock.vertical` plate so it
-       wins at equal specificity) is the inverse-axis twin of the horizontal block
-       above — the box-size morph already rides `block-size` on `layers.css`'s
-       `--dock-morph-t`; this gives the plate chrome the matching directional blend
-       so the vertical collapse↔expand no longer SNAPS its bg/border discretely. At
-       the rest endpoints `--dock-expand-t` resolves to the class value (0 collapsed
-       / 1 expanded), so the resting look is exact — byte-equivalent to the shell.css
-       static plate it supersedes during the morph. */
-    .glass-dock.vertical {
-        background: color-mix(
-            in srgb,
-            color-mix(
-                in oklab,
-                var(--glass-bg-dock, var(--glass-bg-wash)),
-                var(--glass-tint-source) var(--glass-tint-strength)
-            )
-                calc(var(--dock-expand-t, 1) * 100%),
-            color-mix(
-                in oklab,
-                var(--glass-bg-wash),
-                var(--glass-tint-source) var(--glass-tint-strength)
-            )
-        );
-        border-color: color-mix(
-            in srgb,
-            var(--glass-border-dock, var(--glass-border-wash))
-                calc(var(--dock-expand-t, 1) * 100%),
-            var(--glass-border-floating)
-        );
-    }
-
-    /* The padding morph is split out + scoped `:not(.dock-overflow-wrap)` so the
-       wrap variant's own padding rules (W04 territory — `.dock-overflow-wrap` +
-       its `@media` snap-back) are NOT clobbered by this higher-specificity longhand.
-
-       AY.W-DOCK-CHROME §1 — the LAYOUT-ISOLATION fix: the collapse↔expand morph is
-       an INLINE-WIDTH aperture by contract ("horizontal docks animate width"), so
-       the BLOCK axis MUST be invariant across the morph — otherwise the dock's
-       outer height shrinks ~4px on collapse (the collapsed-pad 0.25rem vs the
-       expanded pad-block 0.375rem, ×2) and, because a free-floating / inline dock
-       sits in normal flow (`display:inline-flex`), that height delta REFLOWS its
-       siblings — the page content jumped as the dock animated (the user's 13:27
-       audit item 1). The fix holds `padding-block` PINNED at the expanded value in
-       BOTH states (no `--dock-expand-t` interpolation on the block axis) so the
-       outer block-size is constant; ONLY `padding-inline` morphs to tighten the
-       collapsed pill inline. The collapsed circle is unaffected — its diameter is
-       owned by the summary pane's own symmetric `block-size` + `aspect-ratio:1`
-       (the `.collapsed .dock-layer--summary` rule below), CENTRED on the dock's
-       stable-height plate by the root `align-items:center`, not by the root pad. So
-       the morph reflows NOTHING vertically: 0px container-height delta. */
-    .glass-dock:not(.vertical):not(.dock-overflow-wrap) {
-        /* The collapsed inline-pad endpoint is the EXPANDED block pad (max'd with the
-           consumer `--dock-collapsed-padding` handle) so the height-pinned collapsed
-           pill is SYMMETRIC → a clean circle at the `--radius-dock` 9999px. The block
-           axis is pinned to the expanded pad (below), so matching the inline collapsed
-           endpoint to it keeps the box square (the B4 "symmetric collapsed padding
-           keeps the pill a circle" intent, preserved through the §1 height-pin). The
-           `max()` lets a consumer set `--dock-collapsed-padding` LARGER for a looser
-           pill but never SMALLER than the block pad (which would re-introduce the
-           narrower-than-tall oval the height-pin would otherwise leave). */
-        --dock-pad-collapsed: max(
-            var(--dock-padding-block, 0.375rem),
-            var(--dock-collapsed-padding, 0px)
-        );
-        /* block padding is INVARIANT — the expanded value, both states (the
-           layout-isolation contract above): the inline aperture morphs, the block
-           axis is pinned so the outer height never changes → 0px container reflow. */
-        padding-block: var(--dock-padding-block, 0.375rem);
-        padding-inline: calc(
-            var(--dock-pad-collapsed) +
-                (var(--dock-padding-inline, 0.5rem) - var(--dock-pad-collapsed)) *
-                var(--dock-expand-t, 1)
-        );
-    }
-
-    /* BB.W-DOCK-MORPH-FAMILY (f) — the VERTICAL padding interp is the AXIS-INVERSE
-       of the horizontal layout-isolation contract above. The vertical collapse↔
-       expand is a BLOCK-HEIGHT aperture (the box-size arm morphs `block-size`,
-       layers.css), so the CROSS (inline) axis MUST be invariant across the morph —
-       else the dock's outer WIDTH changes on collapse and reflows its horizontal
-       siblings (the §1 contract, mirrored onto the vertical axis). So `padding-
-       inline` is PINNED at the expanded inline value in BOTH states, and ONLY
-       `padding-block` morphs to tighten the collapsed pill on the morph axis. The
-       collapsed block-pad endpoint is the EXPANDED inline pad (max'd with the
-       consumer `--dock-collapsed-padding` handle) so the height-pinned-cross collapsed
-       pill is SYMMETRIC. Specificity 0,2,0 source-order after shell.css's static
-       `.glass-dock.vertical` padding so this wins at equal specificity; at the rest
-       endpoints `--dock-expand-t` is the class value so the look is exact. Scoped to
-       the NON-scroll/non-wrap vertical dock. */
-    .glass-dock.vertical:not(.dock-overflow-wrap) {
-        --dock-pad-collapsed: max(
-            var(--dock-padding-inline, 0.5rem),
-            var(--dock-collapsed-padding, 0px)
-        );
-        /* inline padding is INVARIANT — the cross axis, pinned both states so the
-           outer inline-size never changes → 0px horizontal sibling reflow. */
-        padding-inline: var(--dock-padding-inline, 0.5rem);
-        padding-block: calc(
-            var(--dock-pad-collapsed) +
-                (var(--dock-padding-block, 0.375rem) - var(--dock-pad-collapsed)) *
-                var(--dock-expand-t, 1)
-        );
-    }
-
-    /* AX.W01 — the collapsed padding / background / border-color are RETIRED here
-       (the `--dock-expand-t` morph block above is the single authority for those
-       three axes — they interpolate, never snap). `.collapsed` keeps only its
-       non-morphing concerns: the pointer affordance, the centred summary layout,
-       and the collapsed shadow (box-shadow crossfades discretely — a subtle,
-       acceptable swap that a `color-mix` cannot blend across its multi-layer
-       value). */
-    .glass-dock.collapsed {
-        cursor: pointer;
-        justify-content: center;
-        box-shadow: var(--shadow-dock-override, var(--shadow-dock-collapsed));
-    }
-
-
-    /* AY.W-DOCK-NAV B4 — the collapsed summary is a PERFECT CIRCLE. The `.dock-layer`
-       base rule (`.glass-dock:not(.vertical) .dock-layer`) locks `height:
-       var(--dock-layer-height)` (40px) on EVERY layer including the summary; against
-       the 0.85× `--dock-collapsed-summary-min-size` min-width that made the pane
-       40h × 30w — an oval (the user's "circle, not oval"). This rule (1) LIFTS the
-       height-lock so the summary block-sizes to the SAME token its width floors at,
-       and (2) floors both axes to that ONE token, so the collapsed pane is a square
-       and the root's symmetric collapsed padding keeps the pill a circle. The glyph
-       sits centred on both axes. The `aspect-ratio: 1` belt-and-braces guarantees
-       1:1 even if a consumer's collapsed-slot content is wider than the floor. */
-    .glass-dock.collapsed .dock-layer--summary {
-        min-width: var(
-            --dock-collapsed-summary-min-size,
-            var(--dock-layer-height, 2.5rem)
-        );
-        min-block-size: var(
-            --dock-collapsed-summary-min-size,
-            var(--dock-layer-height, 2.5rem)
-        );
-        block-size: var(
-            --dock-collapsed-summary-min-size,
-            var(--dock-layer-height, 2.5rem)
-        );
-        height: var(
-            --dock-collapsed-summary-min-size,
-            var(--dock-layer-height, 2.5rem)
-        );
-        aspect-ratio: 1;
-        justify-content: center;
-    }
-
-    /* AX.W45 DK1 — the collapsed/summary glyph appears WITH the pill, no added
-       delay. The `--summary` pane is the INCOMING pane on collapse, but the shared
-       stagger ramp reads `--dock-expand-t` which runs 1→0 on collapse — so the
-       summary glyph used to fade OUT over the back half of the morph and pop in only
-       at settle (the "shrunken icon does not appear for a while" defect). Keying the
-       summary pane's stagger scalar to `--dock-morph-t` directly (the per-swap
-       incoming-ness, 0→1) reveals it as the box settles — appearing WITH the pill.
-       The summary is a single front-loaded glyph (onset 0), so this lands it at full
-       opacity by the morph's tail. The `--dock-expand-t` directional scalar stays
-       the right driver for the box CHROME (bg/border/padding/radius interpolate
-       between the collapsed↔expanded endpoints); only the summary pane's CONTENT
-       reveal is decoupled onto the incoming scalar. */
-    .glass-dock[data-morphing] .dock-layer--summary {
-        --dock-expand-t: var(--dock-morph-t);
-    }
-
-    /* AY.W-DOCK-NAV B15 — the EMPTY-collapsed-summary trap. A dock with a
-       `#persistent` control but NO `#collapsed` slot (the overview first-section
-       dock) still renders a `.dock-layer--summary` pane that floors to the circle
-       min-width — so collapsed it read as a WIDE pill: the persistent Home glyph on
-       the LEFT + an empty circle of dead space on the RIGHT (the measured 84×50
-       oval). Expanding then grew the content INTO that right-side void, so the
-       morph read "from the right" not center-out (the user's B15). When the summary
-       slot is EMPTY (`:not(:has(*))`), collapse it to zero width + no floor so the
-       persistent control stands alone as the collapsed circle, and the morph grows
-       symmetrically about the persistent. An empty Vue `#collapsed` slot renders
-       ZERO child nodes (no whitespace text node either), so `:empty` matches it
-       exactly — and a flat `:empty` avoids the nested-`:has()` form Lightning CSS
-       drops. An authored `#collapsed` slot (non-empty summary) keeps its circle
-       pill. */
-    .glass-dock.collapsed .dock-layer--summary:empty {
-        min-width: 0;
-        inline-size: 0;
-        padding: 0;
-        margin: 0;
-        border: 0;
-    }
-
-    /* The persistent control IS the collapsed pill in the empty-summary case — drop
-       the inter-region gap so the collapsed circle is exactly the persistent box. */
-    .glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent
-        + .dock-layers {
-        margin-inline-start: 0;
-    }
-
-    /* BD.W-DOCK-CORE (A5) — the collapsed persistent pill centers its single glyph on
-       BOTH axes (the empty-summary case where the #persistent control IS the collapsed
-       circle). The `--dock-control-safe-inset` padding (background-clip: content-box) must
-       not shift the glyph off the pill's geometric center — `place-items: center`
-       belt-and-braces both axes so the shrunken icon reads dead-center (A5 "icons in the
-       SHRUNKEN state are NOT ALIGNED"). */
-    .glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent {
-        display: grid;
-        place-items: center;
-    }
-    .glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent > * {
-        place-self: center;
-    }
-    /* BD.W-DOCK-CORE (A5) — floor the collapsed glyph at the 16px-min the rail glyph
-       carries (never a sliver inside an inline-flex column). */
-    .glass-dock.collapsed .dock-persistent svg,
-    .glass-dock.collapsed .dock-layer--summary svg {
-        min-width: 1rem;
-        min-height: 1rem;
-    }
-
-    /* AW.W3 — the collapsed-hover scale rides the unified dock spring vocabulary.
-       The `scale var(--dock-motion-resize)` arm was added to the `.glass-dock`
-       root transition above, so this hover scale settles on the SAME spring curve
-       the expand morph uses — a collapsed→hover→expand gesture is one continuous
-       spring, not a `scale`-ease handed off to the width-spring. The hover scale
-       and the press squish (`--scale-press-dock`) are now one register on the dock
-       surface.
-
-       AZ.W-DOCK-FLICKER — the `scale` arm is GATED on `:not([data-morphing])` (the
-       collapse-onset scale-pop fix, C2-2). `.collapsed` flips on SYNCHRONOUSLY when
-       a hovered dock begins collapsing, but the box is still painted at EXPANDED
-       width for the morph's leading frames (the `onSwap` pin + 1-rAF measure-defer
-       in dockMorphContext.ts). The bare `.collapsed:hover { scale: 1.1 }` multiplied
-       that transient ~535px box, painting a ±24-34px right-edge pop (the user's
-       "flashing"). Scoping the SCALE to `:not([data-morphing])` makes the +1.1 lift
-       apply ONLY at rest (the box is the 54px circle then) — during `[data-morphing]`
-       the hover scale is inert, mirroring the shipped `--dock-expand-t`
-       `[data-morphing]` precedent above (morph.css:46-53). The surface arms
-       (background/border/shadow) stay on the bare `:hover` (they don't multiply
-       geometry, so a hovered collapse keeps its hover read without the pop). */
-    .glass-dock.collapsed:hover {
-        background: var(--glass-bg-wash);
-        border-color: var(--glass-border-floating);
-        box-shadow: var(--shadow-dock-override, var(--shadow-dock));
-    }
-
-    .glass-dock.collapsed:hover:not([data-morphing]) {
-        scale: var(--dock-collapsed-hover-scale);
-        will-change: transform; /* BC.W-DOCK-ENGINE move 2 — promote the armed-at-rest scale lift */
-    }
-
-    /* J.W5.C — held-state substrate response.
-     *
-     * When a descendant signals `dockKeepOpen` (e.g. an active slider drag),
-     * `useDockState.isHeld` flips true and the root carries `data-held`.
-     * The dock background lifts a tier (resting → floating-equivalent) and
-     * the border quiets to the floating ring; the change tracks pointer
-     * movement on `--duration-fast` so it reads as a held-cursor cue, not
-     * a state change. The same flag is consumed by descendants (Slider
-     * thumb halo) via `useOptionalDockContext().held` for cross-substrate
-     * coordination (typed-key canonical shape; O.W2 invariant 25).
-     */
-    .glass-dock[data-held] {
-        /* AX.W55 — the held tier threads the oklab tint wrapper (zero-delta at the
-           `0%` rest default) so the adaptive darken reaches the held state too. */
-        background: color-mix(
-            in oklab,
-            var(--glass-bg-floating, var(--glass-bg-resting)),
-            var(--glass-tint-source) var(--glass-tint-strength)
-        );
-        border-color: var(--glass-border-floating, var(--glass-border-resting));
-        transition:
-            background var(--duration-fast) var(--ease-standard),
-            border-color var(--duration-fast) var(--ease-standard),
-            box-shadow var(--duration-fast) var(--ease-standard);
-    }
-
-    /* BD.W-DOCK-CORE (A7) — the whole-plate open-descendant recolor is DELETED (clean
-       break, no alias). HEAD repainted the ENTIRE dock plate to the floating tier when ANY
-       descendant overlay opened (a dropdown/select/popover) — 44%α warm-cream → 80.8%α
-       floating, the user's "a dropdown changes the color of the ENTIRE dock" bug. A
-       dropdown opening now leaves the dock plate INVARIANT; the open affordance is
-       TRIGGER-scoped (the trigger's own `[aria-expanded]`/`[data-state=open]` active-fill
-       in dock-controls/triggers.css). The `[data-held]` (slider-drag) lift above is KEPT —
-       a legitimate held-cursor cue, not the bug. */
-
-}
-
+@layer components { .glass-dock.expanded, .glass-dock.always-expanded { --dock-expand-t: 1; } .glass-dock.collapsed { --dock-expand-t: 0; } .glass-dock.expanded[data-morphing]:not([data-pane-swap]), .glass-dock.always-expanded[data-morphing]:not([data-pane-swap]) { --dock-expand-t: var(--dock-morph-t); } .glass-dock.collapsed[data-morphing]:not([data-pane-swap]) { --dock-expand-t: calc(1 - var(--dock-morph-t)); } .glass-dock { --dock-reveal-blur: 0px; } .glass-dock[data-morphing] { --dock-reveal-blur: 1.25px; filter: blur( calc( var(--dock-reveal-blur) * clamp(0, calc((0.5 - var(--dock-expand-t)) / 0.5), 1) ) ); } .glass-dock:not(.vertical) .dock-plate { background: color-mix( in srgb, color-mix( in oklab, var(--glass-bg-dock, var(--glass-bg-resting)), var(--glass-tint-source) var(--glass-tint-strength) ) calc(var(--dock-expand-t) * 100%), color-mix( in oklab, var(--glass-bg-wash), var(--glass-tint-source) var(--glass-tint-strength) ) ); border-color: color-mix( in srgb, var(--glass-border-dock, var(--glass-border-resting)) calc(var(--dock-expand-t) * 100%), var(--glass-border-floating) ); } .glass-dock.vertical .dock-plate { background: color-mix( in srgb, color-mix( in oklab, var(--glass-bg-dock, var(--glass-bg-wash)), var(--glass-tint-source) var(--glass-tint-strength) ) calc(var(--dock-expand-t) * 100%), color-mix( in oklab, var(--glass-bg-wash), var(--glass-tint-source) var(--glass-tint-strength) ) ); border-color: color-mix( in srgb, var(--glass-border-dock, var(--glass-border-wash)) calc(var(--dock-expand-t) * 100%), var(--glass-border-floating) ); } .glass-dock:not(.vertical):not(.dock-overflow-wrap) { --dock-pad-collapsed: max( var(--dock-padding-block, 0.375rem), var(--dock-collapsed-padding, 0px) ); padding-block: var(--dock-padding-block, 0.375rem); padding-inline: calc( var(--dock-pad-collapsed) + (var(--dock-padding-inline, 0.5rem) - var(--dock-pad-collapsed)) * var(--dock-expand-t) ); } .glass-dock.vertical:not(.dock-overflow-wrap) { --dock-pad-collapsed: max( var(--dock-padding-inline, 0.5rem), var(--dock-collapsed-padding, 0px) ); padding-inline: var(--dock-padding-inline, 0.5rem); padding-block: calc( var(--dock-pad-collapsed) + (var(--dock-padding-block, 0.375rem) - var(--dock-pad-collapsed)) * var(--dock-expand-t) ); } .glass-dock.collapsed { cursor: pointer; justify-content: center; box-shadow: var(--shadow-dock-override, var(--shadow-dock-collapsed)); } .glass-dock.collapsed .dock-layer--summary { min-width: var( --dock-collapsed-summary-min-size, var(--dock-layer-height, 2.5rem) ); min-block-size: var( --dock-collapsed-summary-min-size, var(--dock-layer-height, 2.5rem) ); block-size: var( --dock-collapsed-summary-min-size, var(--dock-layer-height, 2.5rem) ); height: var( --dock-collapsed-summary-min-size, var(--dock-layer-height, 2.5rem) ); aspect-ratio: 1; justify-content: center; } .glass-dock[data-morphing] .dock-layer--summary { --dock-expand-t: var(--dock-morph-t); } .glass-dock.collapsed .dock-layer--summary:empty { min-width: 0; inline-size: 0; padding: 0; margin: 0; border: 0; } .glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent + .dock-layers { margin-inline-start: 0; } .glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent { display: grid; place-items: center; } .glass-dock.collapsed:has(.dock-layer--summary:empty) .dock-persistent > * { place-self: center; } .glass-dock.collapsed .dock-persistent svg, .glass-dock.collapsed .dock-layer--summary svg { min-width: 1rem; min-height: 1rem; } .glass-dock.collapsed:hover { box-shadow: var(--shadow-dock-override, var(--shadow-dock)); } .glass-dock.collapsed:hover .dock-plate { background: var(--glass-bg-wash); border-color: var(--glass-border-floating); } .glass-dock.collapsed:hover:not([data-morphing]) { scale: var(--dock-collapsed-hover-scale); will-change: transform; } .glass-dock[data-held] .dock-plate { background: color-mix( in oklab, var(--glass-bg-floating, var(--glass-bg-resting)), var(--glass-tint-source) var(--glass-tint-strength) ); border-color: var(--glass-border-floating, var(--glass-border-resting)); transition: background var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } }