@mkbabb/glass-ui 4.1.0 → 5.0.0

package/dist/styles/dock/shell.css

@@ -1,500 +1 @@
-/* dock/shell.css — the `.glass-dock` structural skeleton (AX.W06 carve).
- *
- * Carved from the dock.css god-module (slice 25). This partial owns the dock's
- * STATIC structural surface: the `.glass-dock` root + the W02 single-axis
- * `overflow: clip` morph aperture, the paper-grain `::after`, the vertical-root
- * column layout, the shape/variant plates (rail · instrument-strip · the
- * horizontal shape-rounded/card + the W56 squircle), the position helpers, and
- * the W45 `#persistent` / vertical three-region body. The dynamic single-scalar
- * morph chrome lives in dock/morph.css; the density × `--dock-scale` cascade in
- * dock/density.css; the layer crossfade/hit-test in dock/layers.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 {
-    .glass-dock {
-        --dock-surface-blur: var(--glass-blur-dock, var(--glass-blur-wash));
-        /* J.W3.C — vertical-rail max-block + horizontal max-inline caps
-           live as semantic tokens (defaults in `tokens.css`). When
-           content exceeds the cap, the appropriate axis container
-           scrolls with a mask-fade. Consumers override per-instance by
-           setting `--dock-max-block-size` / `--dock-max-inline-size`
-           on a `.glass-dock` directly. */
-        --dock-separator-height: calc(var(--dock-h, var(--size-icon-btn)) * 0.5);
-        --dock-collapsed-hover-scale: var(--scale-hover-dock);
-        /* AW.W3 — the spring-keyed child stagger knobs. `--dock-stagger-window-size`
-           is the fraction of the morph each child reveals over; `--dock-stagger-rise`
-           is the px the child rises from as it fades in. Consumers retune the
-           cascade feel per instance.
-
-           AX.W02 — `--dock-stagger-step` is the per-child onset BEAT: each
-           successive control's reveal starts this fraction-of-morph later than the
-           one before it, so the row fills outer→in. ONE token × the child index
-           replaces the hand-typed 0.08/0.16/0.24/0.32/0.4 onset ladder — the onset
-           is `step × (childIndex − 1)`, capped (the cap below). 0.08 = ~5% of the
-           ~0.32s morph between items — inside Emil Kowalski's 30–60ms stagger band,
-           never the >100ms "slideshow" register. The onset rides the NORMALIZED
-           morph progress (`--dock-expand-t`), NOT a wall-clock timer, so a fast
-           flick and a slow hover-open both choreograph correctly and an interrupted
-           morph orphans no timers.
-
-           AX.W45 DK1/DK7 — the window NARROWED 0.55 → 0.4. The per-child onset caps
-           at `step × 5 = 0.40` (child 6+), so the LAST detail child used to finish at
-           `0.40 + 0.55 = 0.95` of the morph — it barely appeared until 95% through
-           (the "shrunken icon does not appear for a while" tail). Tightening the
-           window to 0.4 lands the last child at `0.40 + 0.4 = 0.80` (the iOS front-
-           loaded register: stagger the EXPANDING detail, never the persistent/summary
-           glyph). The step (0.08, Kowalski's band) is KEPT — it is the window, not the
-           beat, that was too wide. The summary/persistent glyph is front-loaded
-           structurally (onset 0, scalar-keyed below). */
-        --dock-stagger-window-size: 0.4;
-        --dock-stagger-rise: 4px;
-        --dock-stagger-step: 0.08;
-        /* AW.W3b — big-dock tokens. `--dock-card-radius` is the finite card-shell
-           radius (default --radius-dock-card = --radius-3xl, density-scaled
-           below); `--dock-tile-min` is the grid tile minimum (auto-fill track
-           floor). Both are density-scaled (compact tighter, spacious looser) — the
-           card radius + tile size ride the density cascade, never magic numbers. */
-        --dock-card-radius: var(--radius-dock-card);
-        --dock-tile-min: 4.5rem;
-        /* Individual-transform identity base (AQ.W3 §W3.2). `scale: 1` at rest
-           mints the stacking context once so a portaled popover over `--z-dock`
-           stays above the dock during a hover scale (the load-bearing
-           stacking-context guarantee). Covers every dock scale site. */
-        scale: 1;
-        position: relative;
-        /* AZ.W-ADAPTIVE-AUTO Arm 1 — the dock self-darkens over light backdrops by
-           default via the UNCONDITIONAL `:where(.glass-dock)` self-engage rule in
-           dock/morph.css (mirroring the overlay band's `ladder.css:169`): it re-points
-           the inheriting `--glass-tint-source`/`--glass-tint-strength` directly on the
-           dock root, so the shell + chassis + held/open tiers darken toward warm-ink
-           with NO consumer opt-in (a dock floats over arbitrary — frequently light —
-           page content). `--glass-backdrop: light` is KEPT here so a consumer's
-           DESCENDANT nested-glass inside the dock also reads the bright bucket via the
-           ancestor-querying `@container` block in dock/morph.css (CSS style queries
-           never self-match, so this declaration alone is inert for the dock's OWN
-           plate — the self-engage rule, not this token, darkens the dock). */
-        --glass-backdrop: light;
-        /* AY.W-A11Y-PERF O-4 — paint containment so the maximal-glass nested
-           backdrop-filter sample does not escape the dock box (the standard nested-
-           backdrop-cost mitigation; the Button-in-glass-in-dock stack re-samples the
-           already-blurred buffer at each level without it). */
-        /* BA.W-DOCK-GEOMETRY contain:paint AUDIT verdict (a) — the control-plate
-           clearance fix (the `--dock-control-safe-inset` painted-plate inset, scope
-           1) + the scroll-port cross-axis un-clip (scope 2) keep the maximal
-           hover/active control plate INSIDE the dock padding box: the inset plate is
-           centered in its cell (≥1px slack/side at hover), the cell sits flush at the
-           dock content edge, and the `--dock-padding-block` (≈6px) padding holds the
-           plate ≥7px clear of the `contain: paint` border-box edge on the block axis.
-           So the `paint` clip axis is the NON-proximate second clip box (the lane's
-           `probe-bottomdock-nocontain.png` forced-root probe proved the inner
-           scroll-port box was proximate, not this) and the `paint` axis is RETAINED
-           here — the inset + freed cross axis suffice, no containment LIFT on the
-           control-plate band. (BB.W-PERF-PRODUCER A′-4 widens the value to
-           `contain: layout style paint` — the restyle-scope axes ALONGSIDE the paint
-           clip box, see below — but never lifts `paint`.) The π readback
-           (W-DOCK-GEOMETRY-DELTA.md) records the live plate-inside-padding margin
-           number that binds this verdict. */
-        /* BB.W-PERF-PRODUCER A′-4 — the `--dock-morph-t` restyle-scope narrowing.
-           The per-frame morph scalar write recomputes the inheriting `calc()` group
-           across the dock subtree (dock.css's 10-selector `:where()` consumers); add
-           the `layout` + `style` containment axes so a scalar write recomputes
-           layout/style WITHIN the dock subtree, not up the document (the value.js A′-4
-           ~13fps restyle-cost trace). RECONCILED with the existing axes: `paint`
-           (above, the BA.W-DOCK-GEOMETRY clip box) composes — `contain: layout style
-           paint` is the union, NEVER `size` (which `container-type: inline-size` carries
-           as `inline-size` ONLY on the OPT-IN `containerName` host below; the default
-           free-floating dock must stay shrink-to-fit, so `size`/`inline-size` is
-           DELIBERATELY excluded here — adding it would re-introduce the 3.3.0 sliver
-           regression the §99 comment documents). The morph-axis `overflow: clip`
-           (the reveal aperture) + the `.glass-dock-frame` rail-escape are UNAFFECTED:
-           `layout`/`style` containment scopes RECALC, it does not establish a paint
-           clip beyond the already-present `paint` axis. The `DOCK_SPRING` clock is
-           byte-fenced (the value.js letter) — this is restyle COST, not a re-tune. */
-        contain: layout style paint;
-        display: inline-flex;
-        align-items: center;
-        /* AW.W1 — the dock does NOT establish a default inline-size container.
-           `container-type: inline-size` applies `contain: inline-size`, which
-           makes an element's inline size INDEPENDENT of its contents — fatally
-           incompatible with a shrink-to-fit pill: under it `.glass-dock` cannot
-           size to its content and collapses to its padding floor (~19px) with the
-           active layer overflowing (the 3.3.0 regression — every horizontal dock,
-           collapsed AND always-expanded, rendered as a sliver). The `dock`-named
-           container is now OPT-IN via the `containerName` prop: a consumer
-           embedding the dock in a width-CONSTRAINED host (a 320px sidebar) sets
-           `containerName="dock"` to get the descendant container-query reads (the
-           audacious-label compression below), trading shrink-to-fit for the
-           host-constrained width it already has there. The default free-floating
-           dock shrink-wraps to its content (AV.W16 TW3 made this a default and
-           silently broke dock sizing for the common case). */
-        /* BC.W-DOCK-ARBITRARY — the base corner is the shape register's token lerp (dock/shape.css, the single radius authority generalizing the prior static). */
-        white-space: nowrap;
-        max-inline-size: var(--dock-max-inline-size);
-        padding: var(--dock-padding-block, 0.375rem) var(--dock-padding-inline, 0.5rem);
-        /* AX.W55 — the dock SHELL composes the oklab tint at the ELEMENT (not via the
-           pre-substituted `--glass-bg-dock` token, which resolves its tint at the
-           `:root` 0% strength before the @container bucket can re-point it — the
-           substitution-vs-inheritance trap). Wrapping here lets the bright-bucket
-           block below (which re-points --glass-tint-source/-strength on `.glass-dock`)
-           reach the shell: the inner `--glass-bg-dock` mix is a 0% no-op at rest, the
-           outer element mix does the adaptive darken. Zero-delta at the `0%` default
-           (both mixes resolve to the flat dock bg = byte-identical to today). */
-        background: color-mix(
-            in oklab,
-            var(--glass-bg-dock, var(--glass-bg-resting)),
-            var(--glass-tint-source) var(--glass-tint-strength)
-        );
-        backdrop-filter: var(--dock-surface-blur);
-        border: 1.5px solid var(--glass-border-dock, var(--glass-border-resting));
-        /* BC.W-BLACK-BAR D2 — the dock rim is the DIRECTIONAL pair (bright catch-light
-           on the TOP edge, faint warm under-shadow on the BOTTOM — glass-fx.css), the
-           leading inset layers of the dock shadow stack. RETIRES the omnidirectional
-           `--glass-edge-light` ring that fought the (now ≤4% α) `--glass-border-dock`
-           perimeter; the navigation band reads its rim from the SAME corrected token
-           source as cards/dialogs (no dock-local dark rim re-paste). */
-        box-shadow: var(--glass-rim-top), var(--glass-rim-bottom), var(--shadow-dock-override, var(--shadow-dock));
-    }
-
-    /* AW.W2 — the box IS the reveal aperture (clip-reveal one-clock morph).
-       Migrated from `overflow: hidden` to a SINGLE-AXIS `overflow: clip` on the
-       MORPH axis (horizontal clips X / visible Y; vertical clips Y / visible X),
-       gated on a `data-morphing` attribute the driver owns (set at gesture START,
-       cleared on SETTLE). The clip PERSISTS through the morph — content is laid
-       out ONCE at its natural size behind the aperture and the growing/shrinking
-       box uncovers it, never spills it — and lifts to `visible` only at REST
-       expanded (so grown content + the focus ring paint past the box). The
-       prior `.expanded { overflow: visible }` (bound synchronously to
-       `visualExpanded`) lifted the clip at frame 0, leaving no aperture to reveal
-       through; the `:not([data-morphing])` guard holds the clip for the whole
-       gesture and lifts it on the final paint.
-
-       `overflow: clip` is PAINT-ONLY (not a scroll container): it never
-       participates in `scrollIntoView`/scroll-anchoring, cannot be a
-       scroll-driven-animation `scroller`, and drops the `min-width:0` scroll-box
-       dance for the non-scroll shell. The cross axis is ALWAYS explicitly
-       `visible` (the MDN single-axis-clip-degrades-to-hidden caveat). The
-       legitimate scroll ports (`.dock-scroll-{x,y}`, `overflow: auto`) STAY
-       `auto` — they are NOT migrated. AT.W7-dock-a's orthogonality holds: the
-       `containerName` opt-in does not touch the clip. */
-    .glass-dock:not(.vertical) {
-        overflow-x: clip;
-        overflow-y: visible;
-    }
-
-    .glass-dock.vertical {
-        overflow-x: visible;
-        overflow-y: clip;
-    }
-
-    /* DURING a morph the clip is the aperture — keyed off `data-morphing`, NOT
-       off `.expanded`, so it survives the whole gesture and the box reveals its
-       content rather than letting it spill. */
-    .glass-dock[data-morphing]:not(.vertical) {
-        overflow-x: clip;
-        overflow-y: visible;
-    }
-
-    .glass-dock[data-morphing].vertical {
-        overflow-x: visible;
-        overflow-y: clip;
-    }
-
-    /* AT REST EXPANDED — lift the morph-axis clip (grown content + focus ring
-       paint past the box). Fires ONLY when NOT morphing; the [data-morphing]
-       rules above win during the gesture by being more specific + later. */
-    .glass-dock.expanded:not([data-morphing]),
-    .glass-dock.always-expanded:not([data-morphing]) {
-        overflow: visible;
-    }
-
-    /* AX.W04 F6 — the vertical-dock max-block-size + internal-scroll CONTRACT.
-       A vertical rail caps at `--dock-max-block-size` (the `.vertical` rule), but
-       at rest the `overflow: visible` above let over-cap content SPILL — forcing a
-       consumer (bbnf-buddy ToolsLayer) to hand-anchor a max-height + scroll. Ship
-       the contract here: at rest a vertical column scrolls its OWN block axis when
-       content exceeds the cap (cross axis stays `visible` for focus rings + grown
-       popovers). When content fits under the cap (`height:auto` < cap) nothing
-       scrolls — the scroll port only engages on real over-cap content. The
-       block-axis morph clip stays `data-morphing`-gated above; this is the
-       AT-REST port only. Consumers set `--dock-max-block-size` per-instance to
-       anchor the column to the viewport without re-deriving the scroll plumbing.
-
-       BA.W-DOCK-GEOMETRY (DC-1) — the port is now GATED behind the `dock-scroll-y`
-       opt-in (`overflow="scroll"`), NOT unconditional on every `.vertical.
-       always-expanded`. THE ROOT: `overflow-y: auto` is a scroll value, and CSS
-       Overflow §3 FORCES the sibling `overflow-x: visible` to COMPUTE to `auto` —
-       so the F6 pin never survived, and EVERY at-rest vertical dock (even a
-       fit-content shell that never scrolls) paid the cross-axis inline clip,
-       slicing a control's inset plate left/right (the live π readback measured
-       `overflow-x: auto` on the grow-to-fit SidebarDock). A vertical dock that
-       genuinely needs the cap+scroll opts IN via `overflow="scroll"` (the
-       `.dock-scroll-y` port in overflow.css, the SAME plumbing the F6 comment names);
-       a grow-to-fit vertical shell stays `overflow: visible` (line 186) on BOTH axes
-       so its inset control plate paints past the track. The fit-content shell pays
-       NO cross-axis clip for zero scroll benefit — the goal criterion's "the
-       scroll-port cross-axis clip no longer fires on a fit-content shell that never
-       scrolls", honored at the geometry root. */
-    .glass-dock.vertical.dock-scroll-y.always-expanded:not([data-morphing]),
-    .glass-dock.vertical.dock-scroll-y.expanded:not([data-morphing]) {
-        overflow-x: visible;
-        overflow-y: auto;
-        scrollbar-width: none;
-        overscroll-behavior-y: contain;
-    }
-
-    .glass-dock.vertical.dock-scroll-y.always-expanded:not([data-morphing])::-webkit-scrollbar,
-    .glass-dock.vertical.dock-scroll-y.expanded:not([data-morphing])::-webkit-scrollbar {
-        display: none;
-    }
-
-    .glass-dock::after {
-        content: "";
-        position: absolute;
-        inset: 0;
-        border-radius: inherit;
-        background: var(--paper-clean-texture);
-        background-repeat: repeat;
-        background-size: var(--paper-texture-size);
-        opacity: var(--glass-grain-opacity);
-        pointer-events: none;
-        mix-blend-mode: overlay;
-    }
-
-    .dark .glass-dock::after {
-        mix-blend-mode: soft-light;
-    }
-
-    /* Vertical rails grow-to-fit then clamp at `--dock-max-block-size` (the
-       AX.W04 F6 contract). At rest a capped column scrolls its OWN block axis
-       internally (the `.vertical.always-expanded:not([data-morphing])` port above)
-       so a consumer setting `--dock-max-block-size` gets a viewport-anchored
-       scrollable tool palette without hand-anchoring it. `overflow="wrap"` is
-       horizontal-only (the class is not emitted for a vertical orientation); a
-       vertical column's natural overflow story is this cap + internal scroll. No
-       edge-fade mask — the scroll is scrollbar-hidden, not feathered. */
-    .glass-dock.vertical {
-        display: inline-flex;
-        flex-direction: column;
-        align-items: stretch;
-        justify-content: flex-start;
-        /* AX.W45 D13-b — H/V PROPORTION PARITY. The hardcoded `gap: 0.25rem` + the
-           density-blind `--dock-vertical-padding` override are DELETED. The vertical
-           dock now reads the SAME `--dock-layer-gap` / `--dock-padding-*` density
-           cascade the horizontal dock tunes, so `density="spacious"` paints a LARGER
-           gap than `compact` on BOTH axes (the density axis was dead on the vertical
-           dock). ONE token ladder, both orientations; the `--dock-scale` multiplier
-           threads it for free (the cascade is `calc(* --dock-scale)`-keyed). */
-        gap: var(--dock-layer-gap, 0.375rem);
-        white-space: normal;
-        width: auto;
-        height: auto;
-        max-block-size: var(--dock-max-block-size);
-        /* overflow on the block (morph) axis is the data-morphing-gated clip
-           shell above; the cross axis stays visible there. */
-        padding: var(--dock-padding-block, 0.375rem);
-        border-radius: var(--radius-dock);
-        /* BB.W-DOCK-MORPH-FAMILY (f) — the stale "a vertical rail is ALWAYS-EXPANDED
-           (no collapse↔expand morph)" assumption is RETIRED (it was false since
-           vertical-collapse shipped: `alwaysExpanded` defaults FALSE, so a vertical
-           dock genuinely collapses its `block-size`). The vertical plate's
-           bg/border/padding/radius now MORPH on the SAME `--dock-expand-t` scalar
-           the horizontal chrome rides (the morph.css `.glass-dock.vertical` interp +
-           padding axis-inverse + the radius arm below) — the chrome follows the
-           box-size morph, no discrete snap. NO root CSS-transition on the morph-
-           chrome props is re-added (a `transition: padding/background/border-color`
-           arm is the second-clock smell the single-scalar rebuild forbids — the
-           `--dock-expand-t` interp is the single authority). KEPT: the DECORATIVE
-           hover-scale + press-squish (the individual `scale`/`transform`) and the
-           box-shadow fade — interaction polish on the rail, NOT the morph chrome. */
-        transition:
-            box-shadow var(--dock-motion-standard),
-            transform var(--dock-motion-resize),
-            scale var(--dock-motion-resize);
-    }
-
-    /* BC.W-DOCK-ENGINE move 2 — the rail polish transition is COMPOSITOR-PROMOTED
-       only while its hover/press/held state is ARMED (the transform/scale legs ride
-       the compositor channel; `will-change: transform` hints the layer for the
-       gesture). NEVER a resting `will-change` (a permanent promotion pins a wasted
-       compositor layer at rest — the motion-canon P5 no-resting-promotion floor):
-       the hint lives on the `:hover`/`:active`/`[data-held]` armed selectors and is
-       cleared the instant the state releases. PRM keeps no pinned layer either — the
-       universal a11y carve strips the spatial transform under reduce, and a
-       non-animating rail needs no promotion. */
-    .glass-dock.vertical:hover,
-    .glass-dock.vertical:active,
-    .glass-dock.vertical[data-held] {
-        will-change: transform;
-    }
-
-    /* AZ.W-DOCK-TAXONOMY — the vertical dock's surface plate (the prior
-       `.variant-rail` block; "rail-ness" is now `orientation="vertical"` + a
-       shape/density choice, not a variant). */
-    .glass-dock.vertical {
-        padding: var(--dock-rail-padding, var(--dock-padding-inline, 0.5rem));
-        /* AZ.W-ADAPTIVE-AUTO Arm 1 — the vertical dock threads the SAME element-level
-           oklab tint wrapper the shell base carries (NOT the pre-substituted
-           `--glass-bg-dock` token alone, whose inner tint baked at the `:root` 0%
-           strength before the `:where(.glass-dock)` self-engage re-points the
-           inheriting tint tokens — the substitution-vs-inheritance trap §3a names).
-           Wrapping HERE lets the self-engage darken reach the vertical dock's OWN
-           plate. Zero-delta at the `0%` rest default (the mix is a no-op =
-           byte-identical to the flat dock bg). */
-        background: color-mix(
-            in oklab,
-            var(--glass-bg-dock, var(--glass-bg-wash)),
-            var(--glass-tint-source) var(--glass-tint-strength)
-        );
-        border-color: var(--glass-border-dock, var(--glass-border-wash));
-    }
-
-    .glass-dock.vertical.shape-pill {
-        border-radius: var(--radius-pill);
-    }
-
-    .glass-dock.vertical.shape-rounded {
-        border-radius: var(--radius-xl);
-    }
-
-    /* BB.W-DOCK-MORPH-FAMILY (f) — the VERTICAL big-dock CARD radius MORPHS on the
-       SAME `--dock-expand-t` scalar the horizontal `.shape-card` rides (the radius
-       arm of the vertical chrome un-gate; it lives in shell.css beside the horizontal
-       arm, not morph.css). `--radius-pill` at expand-t 0 (collapsed), the finite
-       `--dock-card-radius` at expand-t 1 (expanded) — the radius follows the box-size
-       block morph, no discrete snap. The static `.shape-pill`/`.shape-rounded` rest
-       radii above are the rest endpoints for those shapes; this is the card shape's
-       interpolated radius (mirroring the horizontal `:not(.vertical).shape-card`). */
-    .glass-dock.vertical.shape-card {
-        border-radius: calc(
-            var(--radius-pill) +
-                (var(--dock-card-radius) - var(--radius-pill)) *
-                var(--dock-expand-t, 1)
-        );
-    }
-
-    /* AW.W3b — horizontal-root shape rules. The `shape-*` class once bound ONLY under
-       the vertical surface; on a horizontal dock the prop silently no-op'd (the root
-       hardwired `--radius-dock` = `--radius-pill`). These rules close that
-       documented-but-dead prop — `shape="rounded"` / `shape="card"` now paint on a
-       horizontal dock. Scoped to `:not(.vertical)` so the vertical dock (which owns
-       its own radius above) is untouched. */
-    .glass-dock:not(.vertical).shape-rounded {
-        border-radius: var(--radius-xl);
-    }
-
-    /* The big-dock CARD shell — a FINITE concentric radius above 2xl, below pill.
-       It does NOT collapse to a stadium. Collapsed it returns to a pill (the morph
-       target); the pill↔card radius now MORPHS on the SAME `--dock-expand-t` scalar
-       the box + chrome ride (ONE clock, no discrete snap) — `--radius-pill` at
-       expand-t 0 (collapsed), `--dock-card-radius` at expand-t 1 (expanded). The
-       prior two discrete `.shape-card` / `.shape-card.collapsed` rules + their
-       reliance on the deleted `border-radius var(--dock-motion-resize)` transition
-       are RETIRED for this single interpolation. */
-    .glass-dock:not(.vertical).shape-card {
-        border-radius: calc(
-            var(--radius-pill) +
-                (var(--dock-card-radius) - var(--radius-pill)) *
-                var(--dock-expand-t, 1)
-        );
-    }
-
-    /* AX.W56 — the big-dock IS the one squircle surface (the rounded-vs-squircle
-       policy: cards/pills/panels stay round, big-docks + the like → superellipse).
-       The squircle reads markedly better at the large `--radius-dock-card` (24px)
-       shell — an `@supports`-gated ENHANCEMENT only (Chrome 139+, no FF/Safari 2026).
-       The `border-radius` arc is the cross-engine CONTRACT; the squircle is the
-       better tier (NOT a degraded fallback). The shape is now the tokenized
-       `var(--corner-shape-bigdock)` (theme.css) so it is as overridable as the
-       radius — a consumer retints the corner shape from `:root`, and W42's
-       dock-morph reads the same `--corner-k-*` vocabulary. The `@supports`
-       condition tests the LITERAL `superellipse(2)` (a `var()` is not evaluable in
-       an `@supports` query) — the same Chrome-139 feature the token resolves to. */
-    @supports (corner-shape: superellipse(2)) {
-        .glass-dock:not(.vertical).shape-card {
-            corner-shape: var(--corner-shape-bigdock);
-        }
-    }
-
-    /* AZ.W-DOCK-TAXONOMY — the `instrument-strip` chassis-strip variant is RETIRED
-       (the ≥2-consumer bar). It carried the vocabulary of the InstrumentRail
-       component RETIRED at AY W-IC1; with the `variant` discriminant gone and no
-       live `variant="instrument-strip"` call-site in src/ or demo/, the chassis
-       paint has zero consumers. The cross-repo speedtest SurveyResultDock cockpit
-       re-pins in its own migration (recorded in MIGRATION.md). A consumer needing
-       the chassis surface composes `<InstrumentChassis>` directly. */
-
-    .glass-dock:where(.fixed) {
-        z-index: var(--z-dock);
-    }
-
-    .dock-inline {
-        margin: 0 auto;
-    }
-
-    .dock-sticky {
-        position: sticky;
-        top: 0;
-        z-index: var(--z-dock);
-        margin: 0 auto;
-    }
-
-    /* AX.W45 D13-a — the PERSISTENT region (the iOS Now-Playing / Stage-Manager
-       idiom done STRUCTURALLY). The `#persistent` slot lives in-flow as a root flex
-       SIBLING of the morph-region (`.dock-layers`) in BOTH collapsed AND expanded —
-       NEVER `:inert`, NEVER a crossfade pane, NEVER a `registerGroup` morph target.
-       It is a stable always-present rail beside the expand-on-demand content region,
-       so a consumer keeps a control visible while collapsed WITHOUT hand-duplicating
-       it into both the `#default` and `#collapsed` slots. The region co-laid by the
-       root flex/grid; the morph scalar `--dock-morph-t` co-drives only its chrome
-       (it inherits the root padding/radius morph), it is NOT a morph TARGET. It holds
-       steady (no jitter) while the morph-region's aperture animates on the ONE
-       spring. `align-items: center` keeps it on the dock's centerline; the
-       `--dock-layer-gap` separates it from the morph region (same rhythm both
-       orientations). */
-    .dock-persistent {
-        display: flex;
-        align-items: center;
-        flex-shrink: 0;
-        gap: var(--dock-layer-gap, 0.375rem);
-    }
-
-    .glass-dock:not(.vertical) .dock-persistent {
-        flex-direction: row;
-    }
-
-    .glass-dock.vertical .dock-persistent {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    /* The persistent region + the morph region share the dock's gap rhythm. The
-       region renders only when the consumer authors a `#persistent` slot
-       (GlassDock.vue guards it with `v-if="$slots.persistent"`), so a dock with no
-       persistent controls is byte-identical to before (no empty flex item). */
-    .glass-dock:not(.vertical) .dock-persistent + .dock-layers {
-        margin-inline-start: var(--dock-layer-gap, 0.375rem);
-    }
-
-    .glass-dock.vertical .dock-persistent + .dock-layers {
-        margin-block-start: var(--dock-layer-gap, 0.375rem);
-    }
-
-    /* AZ.W-DOCK-TAXONOMY (move 2) — the VERTICAL dock's layer panes lay their content
-       out as a COLUMN. The dock body is now the SAME orientation-agnostic
-       `.dock-layers` full/summary morph pair the horizontal dock uses (the prior
-       static `.dock-layer--vertical-body` single-stack RETIRED — a vertical dock now
-       collapses its block axis too). The base `.dock-layer { display: flex;
-       align-items: center }` is row by default; here the full/summary panes flip to a
-       stretched column stack carrying the dock's `--dock-layer-gap` rhythm, so
-       authored item groups + `<DockSeparator>` rules read with the correct vertical
-       cadence. The block-axis morph aperture is owned by `.dock-layers` (layers.css —
-       `.glass-dock.vertical[data-morphing] .dock-layers` morphs `block-size`). */
-    .glass-dock.vertical .dock-layer {
-        flex-direction: column;
-        align-items: stretch;
-        gap: var(--dock-layer-gap, 0.375rem);
-        min-width: 0;
-    }
-}
+@layer components { .glass-dock { --glass-blur-resting: blur(calc(var(--glass-blur-resting-radius) * var(--glass-level))) saturate(1.2); --dock-surface-blur: var(--glass-blur-resting); --dock-separator-height: calc(var(--dock-h, var(--size-icon-btn)) * 0.5); --dock-collapsed-hover-scale: var(--scale-hover-dock); --dock-stagger-window-size: 0.4; --dock-stagger-step: 0.08; --dock-card-radius: var(--radius-dock-card); --dock-tile-min: 4.5rem; scale: 1; position: relative; --glass-backdrop: light; contain: layout style; display: inline-flex; align-items: center; white-space: nowrap; max-inline-size: var(--dock-max-inline-size); padding: var(--dock-padding-block, 0.375rem) var(--dock-padding-inline, 0.5rem); box-shadow: var(--glass-rim-top), var(--glass-rim-bottom), var(--shadow-dock-override, var(--shadow-dock)); } .dark .glass-dock { --glass-blur-resting: blur(calc(var(--glass-blur-resting-radius) * var(--glass-level))) saturate(1.30) brightness(1.14); } .glass-dock { overflow: visible; } .glass-dock.vertical.always-expanded:not([data-morphing]), .glass-dock.vertical.expanded:not([data-morphing]) { overflow-x: visible; overflow-y: auto; scrollbar-width: none; overscroll-behavior-y: contain; } .glass-dock.vertical.always-expanded:not([data-morphing])::-webkit-scrollbar, .glass-dock.vertical.expanded:not([data-morphing])::-webkit-scrollbar { display: none; } .glass-dock.vertical.always-expanded:not([data-morphing]), .glass-dock.vertical.expanded:not([data-morphing]) { mask-image: linear-gradient( to bottom, transparent 0, black var(--fade-start, 0px), black calc(100% - var(--fade-end, 0px)), transparent 100% ); animation: gl-fade-start-in linear both, gl-fade-end-out linear both; animation-timeline: scroll(self block), scroll(self block); animation-range: 0 var(--fade-scroll-width), calc(100% - var(--fade-scroll-width)) 100%; } .glass-dock.vertical { display: inline-flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--dock-layer-gap, 0.375rem); white-space: normal; width: auto; height: auto; max-block-size: var(--dock-max-block-size); padding: var(--dock-padding-block, 0.375rem); border-radius: var(--radius-dock); transition: box-shadow var(--dock-motion-standard), transform var(--dock-motion-resize), scale var(--dock-motion-resize); } .glass-dock.vertical:hover, .glass-dock.vertical:active, .glass-dock.vertical[data-held] { will-change: transform; } .glass-dock.vertical { padding: var(--dock-rail-padding, var(--dock-padding-inline, 0.5rem)); } .glass-dock.vertical .dock-plate { background: color-mix( in oklab, var(--glass-bg-dock, var(--glass-bg-wash)), var(--glass-tint-source) var(--glass-tint-strength) ); border-color: var(--glass-border-dock, var(--glass-border-wash)); } .glass-dock.vertical.shape-pill { border-radius: var(--radius-pill); } .glass-dock.vertical.shape-rounded { border-radius: var(--radius-xl); } .glass-dock.vertical.shape-card { border-radius: calc( var(--radius-pill) + (var(--dock-card-radius) - var(--radius-pill)) * var(--dock-expand-t) ); } .glass-dock:not(.vertical).shape-rounded { border-radius: var(--radius-xl); } .glass-dock:not(.vertical).shape-card { border-radius: calc( var(--radius-pill) + (var(--dock-card-radius) - var(--radius-pill)) * var(--dock-expand-t) ); } @supports (corner-shape: superellipse(2)) { .glass-dock:not(.vertical).shape-card { corner-shape: var(--corner-shape-bigdock); } } .glass-dock:where(.fixed) { z-index: var(--z-dock); } .dock-inline { margin: 0 auto; } .dock-sticky { position: sticky; top: 0; z-index: var(--z-dock); margin: 0 auto; } }

package/dist/styles/dock-controls/dark-mode-toggle.css

@@ -1,122 +1 @@
-/* dock-controls/dark-mode-toggle.css — the `.dark-mode-toggle-button` control
-   family (AZ.W-CARVE partial 2 of 5; carved out of dock-controls.css).
-
-   The standalone toggle sizes (sm/md/lg/control) + the IN-DOCK glyph-inset
-   contract (AY.W-DOCK-CHROME §2 / AX.W06 USF-2 — the toggle glyph routes through
-   `--dock-control-glyph-size` so it is optically uniform with the nav glyphs when
-   docked). Opens its OWN `@layer components`; @import-ed after icon-button.css. */
-
-@layer components {
-    .dark-mode-toggle-button {
-        width: var(--dark-mode-toggle-size, 2.25rem);
-        height: var(--dark-mode-toggle-size, 2.25rem);
-        min-width: var(--dark-mode-toggle-size, 2.25rem);
-        min-height: var(--dark-mode-toggle-size, 2.25rem);
-        max-width: var(--dark-mode-toggle-size, 2.25rem);
-        max-height: var(--dark-mode-toggle-size, 2.25rem);
-        aspect-ratio: 1;
-        padding: var(--dark-mode-toggle-padding, 0.375rem);
-        transition:
-            opacity var(--dock-motion-standard),
-            background-color var(--dock-motion-standard),
-            box-shadow var(--dock-motion-fast);
-
-        & > svg {
-            width: 100%;
-            height: 100%;
-            max-width: 100%;
-            max-height: 100%;
-        }
-
-        &:hover,
-        &:focus {
-            background: var(--surface-tint-10);
-            opacity: 1;
-            outline: none;
-        }
-
-        &:focus-visible {
-            box-shadow: var(--focus-ring-shadow);
-        }
-
-        &[data-size="sm"] {
-            --dark-mode-toggle-size: 1.75rem;
-            --dark-mode-toggle-padding: 0.25rem;
-        }
-
-        &[data-size="md"] {
-            --dark-mode-toggle-size: 2.25rem;
-            --dark-mode-toggle-padding: 0.375rem;
-        }
-
-        &[data-size="lg"] {
-            --dark-mode-toggle-size: 2.75rem;
-            --dark-mode-toggle-padding: 0.5rem;
-        }
-
-        &[data-size="control"] {
-            --dark-mode-toggle-size: var(--control-size, 2.25rem);
-            --dark-mode-toggle-padding: var(--control-icon-padding, 0.375rem);
-        }
-    }
-
-    .dark-mode-toggle-button[data-size="dock"],
-    .glass-dock
-        .dark-mode-toggle-button:not([data-size="sm"]):not([data-size="lg"]):not(
-            [data-size="control"]
-        ) {
-        --dark-mode-toggle-size: var(--dock-control-size, var(--size-icon-btn));
-        /* AY.W-DOCK-CHROME §2 — the in-dock toggle GLYPH insets to the nav-glyph
-           register. The toggle SVG carries `h-full w-full` (the utility layer, which
-           BEATS the component-layer `> svg { width: --dock-control-glyph-size }` rule
-           below), so the glyph fills whatever the PADDED box leaves. Prior the in-dock
-           padding fell to `var(--dock-icon-padding, 0)` (the token is never defined →
-           0 pad → the glyph filled the whole 40px box edge-to-edge, ~2.5× the 16-20px
-           nav glyphs — the user's "too large" read). Pad the box by HALF the box↔glyph
-           difference so the `h-full` SVG lands at exactly `--dock-control-glyph-size`
-           (default `--dock-icon-glyph`, the `--dock-scale`-keyed size the nav icons
-           paint) — optically UNIFORM with the nav glyphs through the utility-win path,
-           not fighting it.
-
-           BC.W-DOCK-ENGINE move 3 (the Atlas A-9 fold) — the inset subtracts
-           `--dock-control-glyph-size`, the SAME ONE knob the SVG `width`/`height`
-           reads below, so the pad and the glyph stay LOCKED (a consumer retinting
-           `--dock-control-glyph-size` moves both in lockstep — no drift between the
-           box pad and the painted glyph). `--dock-control-size` AND
-           `--dock-control-glyph-size` both INHERIT from `.glass-dock[data-density]`,
-           where the coarse `--dock-scale` re-declare (overflow.css) re-resolves them
-           in lockstep — so the calc reads the coarse-scaled values on a coarse
-           pointer too (the AZ.R5-TOKENS substitution-vs-inheritance trap closed for
-           the toggle glyph: the var() resolves at the toggle button, reading the
-           coarse-re-resolved inherited tokens, never the frozen `:root` scale). */
-        --dark-mode-toggle-padding: calc(
-            (
-                    var(--dock-control-size, var(--size-icon-btn)) -
-                        var(--dock-control-glyph-size, var(--dock-icon-glyph, 1.25rem))
-                ) / 2
-        );
-    }
-
-    /* AX.W06 USF-2 — the dock-control optical-size contract. The
-       DarkModeToggle renders its OWN internal SVG `h-full w-full` (it bypasses
-       the `--dock-icon-glyph`-sized `> svg` slot the `.dock-icon-button` family
-       uses), so IN-DOCK it filled the whole control box edge-to-edge (~2.5× the
-       nav glyphs) — `--dock-icon-padding` is NEVER DEFINED, so the
-       `--dark-mode-toggle-padding: var(--dock-icon-padding, 0)` above fell to the
-       `0` fallback and zero padding let the SVG fill the box. Route the in-dock
-       toggle glyph through `--dock-control-glyph-size` (the ONE size the whole
-       dock-control family reads, default = `--dock-icon-glyph`, the same
-       `--dock-scale`-keyed glyph the nav icons paint), so the toggle is optically
-       UNIFORM with the nav glyphs WHEN DOCKED. The `h-full w-full` SVG stays
-       correct for the STANDALONE DarkModeToggle sizes (no `.glass-dock`
-       ancestor); this rule is scoped to the in-dock path only. Machine-checked by
-       the dock-control optical-parity gate, not eyeballed. */
-    .glass-dock
-        .dark-mode-toggle-button:not([data-size="sm"]):not([data-size="lg"]):not(
-            [data-size="control"]
-        )
-        > svg {
-        width: var(--dock-control-glyph-size, var(--dock-icon-glyph, 1.25rem));
-        height: var(--dock-control-glyph-size, var(--dock-icon-glyph, 1.25rem));
-    }
-}
+@layer components { .dark-mode-toggle-button { width: var(--dark-mode-toggle-size, 2.25rem); height: var(--dark-mode-toggle-size, 2.25rem); min-width: var(--dark-mode-toggle-size, 2.25rem); min-height: var(--dark-mode-toggle-size, 2.25rem); max-width: var(--dark-mode-toggle-size, 2.25rem); max-height: var(--dark-mode-toggle-size, 2.25rem); aspect-ratio: 1; padding: var(--dark-mode-toggle-padding, 0.375rem); transition: opacity var(--dock-motion-standard), background-color var(--dock-motion-standard), box-shadow var(--dock-motion-fast); & > svg { width: 100%; height: 100%; max-width: 100%; max-height: 100%; } &:hover, &:focus { background: var(--surface-tint-10); opacity: 1; outline: none; } &:focus-visible { box-shadow: var(--dock-ring); } &[data-size="sm"] { --dark-mode-toggle-size: 1.75rem; --dark-mode-toggle-padding: 0.25rem; } &[data-size="md"] { --dark-mode-toggle-size: 2.25rem; --dark-mode-toggle-padding: 0.375rem; } &[data-size="lg"] { --dark-mode-toggle-size: 2.75rem; --dark-mode-toggle-padding: 0.5rem; } &[data-size="control"] { --dark-mode-toggle-size: var(--control-size, 2.25rem); --dark-mode-toggle-padding: var(--control-icon-padding, 0.375rem); } } .dark-mode-toggle-button[data-size="dock"], .glass-dock .dark-mode-toggle-button:not([data-size="sm"]):not([data-size="lg"]):not( [data-size="control"] ) { --dark-mode-toggle-size: var(--dock-control-size, var(--size-icon-btn)); --dark-mode-toggle-padding: calc( ( var(--dock-control-size, var(--size-icon-btn)) - var(--dock-control-glyph-size, var(--dock-icon-glyph, 1.25rem)) ) / 2 ); } .glass-dock .dark-mode-toggle-button:not([data-size="sm"]):not([data-size="lg"]):not( [data-size="control"] ) > svg { width: var(--dock-control-glyph-size, var(--dock-icon-glyph, 1.25rem)); height: var(--dock-control-glyph-size, var(--dock-icon-glyph, 1.25rem)); } }