@mkbabb/glass-ui 4.1.0 → 5.0.0

package/dist/styles/dock/overflow.css

@@ -1,292 +1 @@
-/* dock/overflow.css — the OVER-cap overflow strategies (AX.W06 carve).
- *
- * Carved from the dock.css god-module (slice 25). This partial owns the
- * `overflow=` axis: the `overflow="scroll"` inline/block scroll ports
- * (`.dock-scroll-x` / `.dock-scroll-y`, hidden scrollbar, momentum-trapped), the
- * W04 CONTENT-DRIVEN `overflow="wrap"` intrinsic-flex recipe (the
- * `.dock-overflow-wrap` pill↔card radius + floating-tier elevation morph on the
- * ONE `--dock-expand-t` scalar — RELOCATED verbatim, never re-authored), and the
- * W45 D15 single coarse-pointer `--dock-scale` multiplier.
- *
- * @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 {
-    /* ── Scroll-on-overflow opt-in (GlassDock `overflow="scroll"`) ───────
-       The default contract grows-to-fit then overflows visibly past the
-       axis cap. `overflow="scroll"` instead makes the dock the scroll port
-       on its layout axis, pairing the existing cap with a hidden-scrollbar
-       scroll region so over-cap content stays reachable. The rounded pill
-       masks the scroll edge; both axes keep their cap. */
-
-    /* Inline axis (horizontal docks). The active layer becomes the scroll
-       port: `min-width: 0` releases the flex item's `min-content` floor so
-       it can shrink under the clamped `.dock-layers` track, then `overflow-x:
-       auto` scrolls its over-cap content. `.dock-layers` must KEEP clipping
-       so the pill's rounded edge masks the scroll boundary — hence the
-       grow-mode `overflow-x: visible` (`.dock-layers`, above) is overridden
-       back to `hidden` here. */
-    .glass-dock.dock-scroll-x.expanded:not(.dock-overflow-wrap) > .dock-layers {
-        overflow-x: hidden;
-    }
-
-    .glass-dock.dock-scroll-x .dock-layer--full {
-        min-width: 0;
-        overflow-x: auto;
-        /* BA.W-DOCK-GEOMETRY (DC-1) — PIN the CROSS (block) axis explicitly
-           `visible`. A single-axis `overflow-x: auto` makes the OTHER axis compute
-           from `visible` to `auto` (the MDN single-axis-clip-degrades caveat), so
-           the 40px-tall block axis would clip the 1.1× hover / full active control
-           circle top+bottom — the lozenge. Pinning `overflow-y: visible` keeps the
-           block axis genuinely un-clipped so a control's inset plate paints past the
-           track; the inline scroll port (the real over-cap content axis) is
-           untouched. */
-        overflow-y: visible;
-        scrollbar-width: none;
-        /* Trap the inline-scroll momentum at the dock's own boundary so a
-           wheel/trackpad gesture that bottoms out the pill does NOT chain into
-           scrolling the page behind it (the dock is a self-contained scroll
-           port, not a window into the route scroller). */
-        overscroll-behavior-x: contain;
-    }
-
-    .glass-dock.dock-scroll-x .dock-layer--full::-webkit-scrollbar {
-        display: none;
-    }
-
-    /* Block axis (vertical rails). The root keeps its `max-block-size` cap
-       and scrolls its over-cap children — cap + scroll is the correct
-       pairing the grow-mode contract split apart. Ties the
-       `.vertical.always-expanded` visible default on specificity and wins on
-       source order. */
-    .glass-dock.vertical.dock-scroll-y {
-        overflow-y: auto;
-        /* BA.W-DOCK-GEOMETRY (DC-1) — PIN the CROSS (inline) axis explicitly
-           `visible` (the vertical-dock twin of the horizontal pin above). A
-           single-axis `overflow-y: auto` would compute the inline axis from
-           `visible` to `auto`, clipping a vertical control's inset plate left+right.
-           The block scroll port (the real over-cap axis) is untouched. */
-        overflow-x: visible;
-        scrollbar-width: none;
-        /* Same momentum-trap as the inline port — a rail that bottoms out must
-           not chain its remaining wheel delta into the page scroller behind it. */
-        overscroll-behavior-y: contain;
-    }
-
-    .glass-dock.vertical.dock-scroll-y::-webkit-scrollbar {
-        display: none;
-    }
-
-    /* ── `overflow="wrap"` recipe — CONTENT-DRIVEN intrinsic flex reflow ──
-       (AX.W04 F0). Parallel to the `.dock-scroll-{x,y}` hooks the
-       `overflow="scroll"` member emits, `overflow="wrap"` emits this class.
-       (HORIZONTAL-ONLY — GlassDock.vue guards the emit on
-       `orientation !== 'vertical'`; a vertical rail grows-to-fit + clamps via
-       `--dock-max-block-size`, its own overflow story.)
-
-       The reflow is INTRINSIC: `flex-wrap: wrap` is ALWAYS-ON (no viewport MQ),
-       and the dock shrink-wraps to content with `max-inline-size` capping it at
-       the canonical `--dock-max-inline-size` token (the SAME cap every
-       overflow strategy reads — `min(80vw, 64rem)` default, consumer-overridable
-       per-instance). So the layer wraps to N rows EXACTLY when its intrinsic row
-       exceeds the cap — at ANY viewport width — and collapses to one row when it
-       fits. The magic-640 `@media` snap-back + the `--dock-overflow-bp` token are
-       DELETED (the inherited mobile-responsive debt, origin 078dd79). */
-    .glass-dock.dock-overflow-wrap {
-        white-space: normal;
-        /* The content-driven cap. The dock ALREADY shrink-wraps to its content's
-           intrinsic width (the base `.glass-dock` rule), so `max-inline-size` caps
-           that intrinsic width at `--dock-max-inline-size`: under the cap the
-           shrink-wrap wins → one row; over the cap the dock holds at the cap and the
-           inner `flex-wrap: wrap` row reflows to N rows. ONE token, no breakpoint.
-           (The `min(max-content, …)` form is INVALID CSS — the math functions reject
-           the `max-content` intrinsic keyword, computing the property to its initial
-           `none` and silently dropping the cap; intrinsic-shrink + this plain cap IS
-           the valid `min(max-content, cap)`.) */
-        max-inline-size: var(--dock-max-inline-size);
-        padding: var(--dock-wrap-padding-block, var(--dock-padding-block, 0.375rem))
-            var(--dock-wrap-padding-inline, 0.625rem);
-
-        /* F4 — the pill↔card radius morph. A wrap dock is a FINITE multi-row CARD
-           surface when expanded and a stadium PILL when collapsed — the SAME
-           pill↔card morph the big-dock `shape-card` path rides. The corner glides
-           on the `--dock-expand-t` W01 single-scalar: `--radius-pill` at expand-t 0
-           (collapsed), `--dock-card-radius` at expand-t 1 (expanded — UNIFIED on
-           the SAME finite-radius token the big-dock card uses; the bare 16px
-           `--radius-2xl` literal is DELETED). ONE register, no discrete snap. */
-        border-radius: calc(
-            var(--radius-pill) +
-                (var(--dock-card-radius) - var(--radius-pill)) *
-                var(--dock-expand-t, 1)
-        );
-
-        /* F1 — the card-tier elevation morph ("material thickens as glass flexes
-           larger", WWDC25 §219). The wrap dock lifts from the flat thin-pill
-           `--shadow-dock` glow onto the FLOATING-tier stack (the `--shadow-dock-wrap`
-           token names the canonical composite on `:root`; a consumer retints the
-           whole card shadow by overriding THAT one token per the cartoon-shadow
-           contract). The three floating layers — drop / material-rim / under-cast —
-           fade in driven by the SAME `--dock-expand-t` scalar the radius glides on:
-           `--dock-wrap-elev` is the scalar as a 0→1 percent, so each layer's alpha
-           tracks the corner morph in LOCKSTEP (ONE clock, ONE register). At
-           expand-t 0 (collapsed/pill) the floating layers are 0%-alpha (invisible)
-           → only the base `--shadow-dock` glow shows; at expand-t 1 (expanded/card)
-           the full floating stack grounds the multi-row silhouette. The per-layer
-           recipe mirrors `--shadow-dock-wrap` (= `--shadow-xl` + `--glass-material-rim`
-           + `--glass-under-shadow-vivid`) so the token stays the source-of-record. */
-        --dock-wrap-elev: calc(var(--dock-expand-t, 1) * 100%);
-        box-shadow:
-            var(--glass-edge-light),
-            var(--shadow-dock-override, var(--shadow-dock)),
-            0 8px 24px color-mix(in srgb, var(--shadow-color) calc(0.14 * var(--dock-wrap-elev)), transparent),
-            0 0 0 0.5px color-mix(in srgb, var(--shadow-color) calc(0.05 * var(--dock-wrap-elev)), transparent),
-            0 8px 32px -4px color-mix(in srgb, oklch(0 0 0 / 0.12) var(--dock-wrap-elev), transparent);
-    }
-
-    .glass-dock.dock-overflow-wrap .dock-layer--full {
-        flex-wrap: wrap;
-        justify-content: center;
-        height: auto;
-        min-height: var(--dock-wrap-layer-min-height, var(--dock-layer-height, 2rem));
-        gap: var(--dock-wrap-row-gap, 0.25rem)
-            var(--dock-wrap-column-gap, var(--dock-layer-gap, 0.375rem));
-        /* AX.W04 — NO `transition: min-height` JS-morph (the AW.W3b spring-keyed
-           min-height detector is RETIRED — the false `proof:dock-layering-polish`
-           wrap-reflow claim is STRUCK). The reflow is intrinsic flex: rows
-           appear/vanish on the cap crossing with no second clock. The radius +
-           shadow lift ride the `--dock-expand-t` scalar (the W01 single clock),
-           NOT a CSS transition on the retired `--dock-motion-resize` list. */
-    }
-
-    .glass-dock.dock-overflow-wrap .dock-layer--summary {
-        height: auto;
-        min-height: var(--dock-wrap-layer-min-height, var(--dock-layer-height, 2rem));
-    }
-
-    .glass-dock.dock-overflow-wrap .dock-separator {
-        display: none;
-    }
-
-    /* Collapsed, a wrap dock is the single-row summary PILL. `white-space: nowrap`
-       keeps the summary on one line; the inline cap stays `max-inline-size:
-       var(--dock-max-inline-size)` (inherited from the `.dock-overflow-wrap` rule
-       above) so the collapsed box still shrink-wraps to the small summary's
-       max-content (NOT the full cap). The
-       radius morph resolves to `--radius-pill` at collapsed (--dock-expand-t 0) and
-       the box-shadow to the flat `--shadow-dock` glow (--dock-wrap-elev 0%). */
-    .glass-dock.dock-overflow-wrap.collapsed {
-        white-space: nowrap;
-    }
-
-    /* AX.W45 D15 / AX.W51 D18 RECONCILE — the coarse-pointer dock growth now rides
-       the GLOBAL `--ui-scale` comfort axis, NOT a parallel dock-only 1.5×. The
-       library-wide `@media (pointer: coarse) { :root { --ui-scale:
-       var(--ui-coarse-scale, 1.5) } }` block (tokens.css) lifts the master scalar,
-       and `--dock-scale: calc(var(--ui-scale) * var(--dock-local-scale, 1))` (its
-       re-homed definition) inherits it FOR FREE — so the dock grows ~1.5× on touch
-       WITH the buttons/inputs/badges (ONE consistent touch scale; at HEAD the dock
-       grew but the rest of the library did not — the three-scale split this resolves).
-       The whole density cascade (box + padding + gap + tab + tile-min + glyph) scales
-       in LOCKSTEP through its existing `calc(<base> * --dock-scale)` chain, zero edit.
-
-       This block keeps ONLY the dock-LOCAL extras the global axis cannot supply:
-         • `--dock-local-scale: var(--dock-mobile-scale, 1)` — the dock-local EXTRA
-           multiplier (default 1 → no extra; the dock matches the global comfort by
-           default). A consumer who wants the dock LARGER than the library on touch
-           sets `--dock-mobile-scale` and it STACKS on top of the global coarse default
-           (NOT a parallel hardcoded 1.5 — the no-double-scale reconcile).
-         • the 44px touch floor: `--dock-control-floor` + `--size-icon-btn` lift to
-           `--dock-touch-target` so the `max(…, floor)` clamp in the scaled control-size
-           guarantees ≥ 44px regardless of the scalar (a sub-1 scale cannot drop the
-           target). `--size-icon-btn` keeps its floor for STANDALONE icon-button
-           surfaces (a routed gear, no dock ancestor) that read it directly.
-       Fine pointer byte-identical (`--ui-scale` stays 1).
-
-       AP.W3 R0G-6 — selector is `.glass-dock[data-density]`, not bare `.glass-dock`:
-       the always-present density setter (0,2,0) would shadow a bare (0,1,0) rule. The
-       presence-selector (0,2,0) wins by source order, lifting `--dock-local-scale` +
-       the floor so the cascade re-resolves at touch scale. */
-    @media (pointer: coarse) {
-        .glass-dock[data-density] {
-            /* R5-2 — the coarse-register DEFAULT lives in the FALLBACK, NOT a
-               hard-pin. The coarse dock painted ~22% too big (the global
-               --ui-coarse-scale 1.5 → an ~80px collapsed pill). The dock-layer
-               comfort floors at a TIGHTER coarse register than the global --ui-scale
-               (the dock is a dense chrome strip, not a body control): --dock-local-scale
-               falls back to --dock-coarse-scale (≈0.78; × the 1.5 global = ~1.17
-               effective → a ~60px collapsed pill). The consumer knob --dock-mobile-scale
-               WINS the fallback when set on ANY ancestor (inherited in, no specificity
-               war against this block — the dead-knob trap a hard `--dock-mobile-scale:
-               0.78` here would re-create), so a consumer who wants the dock to MATCH
-               the global comfort sets --dock-mobile-scale: 1; one who wants it larger
-               sets >1. The touch floor stays held by the `max(…, --dock-control-floor)`
-               clamp in every scaled control-size (the lift just below). */
-            --dock-local-scale: var(--dock-mobile-scale, var(--dock-coarse-scale, 0.78));
-            /* R5-1 — RE-DECLARE --dock-scale HERE so the consumer knob reaches the
-               geometry cascade. The :root definition (offsets-sizing.css) computes
-               `calc(var(--ui-scale) * var(--dock-local-scale, 1))` AT :root, where
-               --dock-local-scale is the frozen identity 1 — custom-property
-               SUBSTITUTION resolves --dock-scale once at its declaring element, so
-               the descendant --dock-local-scale lift on THIS block never re-flowed
-               into it (the AX.W55 substitution-vs-inheritance trap, 3rd recurrence).
-               Re-declaring --dock-scale on the SAME element that lifts
-               --dock-local-scale makes the var() resolve against the lifted value, so
-               the --dock-mobile-scale / --dock-coarse-scale knobs reach every
-               `calc(<base> * --dock-scale)` geometry leg. Identical to the :root
-               formula by construction. */
-            --dock-scale: calc(var(--ui-scale) * var(--dock-local-scale, 1));
-            --dock-control-floor: var(--dock-touch-target, 2.75rem);
-            --size-icon-btn: var(--dock-touch-target, 2.75rem);
-            /* R5-1 SWEEP — the OTHER :root tokens that derive from --dock-scale freeze
-               it at the :root value (where --dock-local-scale is the identity 1), so the
-               R5-2 dock-local 0.78 register never reaches them: the SAME
-               substitution-vs-inheritance trap, one level out. With --dock-scale now
-               re-declared ABOVE, RE-RESOLVE each derived token on THIS element so it
-               reads the dock-local --dock-scale (else --dock-icon-glyph /
-               --dock-collapsed-padding / --dock-layer-tab-size paint at the global 1.5×
-               while the density box paints at 1.17× — a desync the R5-2 register would
-               introduce). The formulas are IDENTICAL to their :root definitions; only
-               the resolution element moves so the lifted --dock-scale flows in.
-               BB.W-PERF-PRODUCER A′-6 — --dock-icon-glyph is now a RATIO of the
-               density-painted --dock-layer-height (offsets-sizing.css + the density.css
-               [data-density] re-resolve). This coarse block @imports AFTER density.css
-               in the SAME @layer at the SAME specificity, so its --dock-icon-glyph
-               source-order-WINS on coarse pointers — it MUST carry the density-aware
-               formula too (the flat `1.25rem * --dock-scale` here would re-freeze the
-               glyph at the flat rem on touch, re-introducing the D5-1 defect the wave
-               fixes). --dock-layer-height re-resolves transitively at the lifted
-               --dock-scale (re-declared above), so the glyph tracks both the density
-               box AND the coarse register. Formula identical to the :root + density
-               re-resolve; only the resolution element moves. */
-            --dock-icon-glyph: max(
-                calc(var(--dock-layer-height, calc(2.5rem * var(--dock-scale))) * var(--dock-icon-glyph-ratio)),
-                var(--dock-icon-glyph-floor)
-            );
-            /* BC.W-DOCK-ENGINE move 3 (the Atlas A-9 fold) — RE-DECLARE the in-dock
-               toggle glyph knob on coarse beside `--dock-icon-glyph`. Its `:root`
-               default tracks `--dock-icon-glyph`, but a `:root`-only default would
-               freeze at the `:root` `--dock-scale` (the identity 1) while the coarse
-               `--dock-icon-glyph` above lifts — the AZ.R5-TOKENS substitution-vs-
-               inheritance dead-knob (the SAME trap the dock-scale re-declare closed,
-               mirrored for the toggle glyph). Re-declaring it HERE, against the
-               coarse-re-resolved `--dock-icon-glyph`, keeps the in-dock dark-toggle
-               glyph optically uniform with the nav glyphs on coarse AND fine pointer.
-               The `--dark-mode-toggle-padding` clamp (dark-mode-toggle.css) subtracts
-               THIS knob, so the box pad re-resolves in lockstep too. */
-            --dock-control-glyph-size: var(--dock-icon-glyph);
-            --dock-collapsed-padding: calc(0.25rem * var(--dock-scale));
-            --dock-layer-tab-size: calc(1.75rem * var(--dock-scale));
-            /* --dock-collapsed-summary-min-size derives from --dock-layer-height (the
-               density-resolved control height on .glass-dock[data-density]) — but its
-               :root definition reads --dock-layer-height at :root, where density.css
-               never sets it, so it froze at the inline 2.5rem fallback × 0.85 = 34px
-               (the pre-existing freeze, independent of R5-2). Re-resolving it HERE reads
-               the density-painted --dock-layer-height so the collapsed circle FLOOR
-               tracks the dock scale (the "perfect circle" the user named scales on touch
-               with the box, not a frozen 34px floor). */
-            --dock-collapsed-summary-min-size: calc(
-                var(--dock-layer-height, 2.5rem) * 0.85
-            );
-        }
-    }
-}
+@layer components { .glass-dock.dock-scroll-x:not(.dock-overflow-wrap) .dock-layer--full { min-width: 0; overflow-x: visible; overflow-y: visible; mask-image: none; } .glass-dock.dock-scroll-x[data-dock-overflow]:not(.dock-overflow-wrap) .dock-layer--full { overflow-x: auto; overflow-y: visible; padding: var(--dock-scroll-safe-inset); margin: calc(-1 * var(--dock-scroll-safe-inset)); scroll-padding-inline: var(--dock-scroll-gutter); scrollbar-width: none; overscroll-behavior-x: contain; mask-image: linear-gradient( to right, 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 inline), scroll(self inline); animation-range: 0 var(--fade-scroll-width), calc(100% - var(--fade-scroll-width)) 100%; } .glass-dock.dock-scroll-x[data-dock-overflow]:not(.dock-overflow-wrap) .dock-layer--full::-webkit-scrollbar { display: none; } .glass-dock.dock-overflow-wrap { white-space: normal; max-inline-size: var(--dock-max-inline-size); padding: var(--dock-wrap-padding-block, var(--dock-padding-block, 0.375rem)) var(--dock-wrap-padding-inline, 0.625rem); border-radius: calc( var(--radius-pill) + (var(--dock-card-radius) - var(--radius-pill)) * var(--dock-expand-t) ); --dock-wrap-elev: calc(var(--dock-expand-t) * 100%); box-shadow: var(--glass-edge-light), var(--shadow-dock-override, var(--shadow-dock)), 0 8px 24px color-mix(in srgb, var(--shadow-color) calc(0.14 * var(--dock-wrap-elev)), transparent), 0 0 0 0.5px color-mix(in srgb, var(--shadow-color) calc(0.05 * var(--dock-wrap-elev)), transparent), calc(8px * var(--glass-key-direction)) 8px 32px -4px color-mix(in srgb, oklch(0 0 0 / 0.12) var(--dock-wrap-elev), transparent); } .glass-dock.dock-overflow-wrap .dock-layer--full { flex-wrap: wrap; justify-content: center; height: auto; min-height: var(--dock-wrap-layer-min-height, var(--dock-layer-height, 2rem)); gap: var(--dock-wrap-row-gap, 0.25rem) var(--dock-wrap-column-gap, var(--dock-layer-gap, 0.375rem)); } .glass-dock.dock-overflow-wrap .dock-layer--summary { height: auto; min-height: var(--dock-wrap-layer-min-height, var(--dock-layer-height, 2rem)); } .glass-dock.dock-overflow-wrap .dock-separator { display: none; } .glass-dock.dock-overflow-wrap.collapsed { white-space: nowrap; } @media (pointer: coarse) { .glass-dock[data-size] { --dock-local-scale: var(--dock-mobile-scale, var(--dock-coarse-scale, 0.78)); --dock-scale: calc(var(--ui-scale) * var(--dock-local-scale, 1)); --dock-control-floor: var(--dock-touch-target, 2.75rem); --size-icon-btn: var(--dock-touch-target, 2.75rem); --dock-icon-glyph: max( calc(var(--dock-layer-height, calc(2.5rem * var(--dock-scale))) * var(--dock-icon-glyph-ratio)), var(--dock-icon-glyph-floor) ); --dock-control-glyph-size: var(--dock-icon-glyph); --dock-collapsed-padding: calc(0.25rem * var(--dock-scale)); --dock-layer-tab-size: calc(1.75rem * var(--dock-scale)); --dock-collapsed-summary-min-size: calc( var(--dock-layer-height, 2.5rem) * 0.85 ); } } }

package/dist/styles/dock/popover.css

@@ -0,0 +1 @@
+@layer components { :root { --dock-stack-stagger: 26ms; --dock-stack-gap: calc(0.375rem * var(--dock-scale, 1)); --dock-stack-member-size: calc(2rem * var(--dock-scale, 1)); --dock-facet-accent-strength: 48%; --dock-rail-extend-length: calc( 3 * var(--dock-stack-member-size) + 2 * var(--dock-stack-gap) ); } .dock-stack { display: inline-flex; align-items: center; } .dock-stack-core { flex: 0 0 auto; } .dock-stack-fan[popover] { margin: 0; inset: auto; border: 0; padding: calc(0.25rem * var(--dock-scale, 1)); background: transparent; overflow: visible; display: flex; gap: var(--dock-stack-gap); opacity: 0; scale: 0.92; transition: opacity var(--duration-fast) var(--ease-out), scale var(--spring-dock-duration) var(--spring-dock), overlay var(--spring-dock-duration) allow-discrete, display var(--spring-dock-duration) allow-discrete; } .dock-stack-fan[popover]:popover-open { opacity: 1; scale: 1; } @starting-style { .dock-stack-fan[popover]:popover-open { opacity: 0; scale: 0.92; } } .dock-stack-fan.vertical { flex-direction: row; align-items: center; transform-origin: left center; } .dock-stack-fan:not(.vertical) { flex-direction: column; align-items: center; transform-origin: center bottom; } .dock-stack-fan-scroll { display: flex; gap: var(--dock-stack-gap); } .dock-stack-fan.vertical .dock-stack-fan-scroll { flex-direction: row; } .dock-stack-fan:not(.vertical) .dock-stack-fan-scroll { flex-direction: column; } .dock-stack-fan[data-wrap] .dock-stack-fan-scroll { flex-wrap: wrap; max-inline-size: calc( var(--dock-stack-member-size) * 3 + var(--dock-stack-gap) * 2 + calc(0.5rem * var(--dock-scale, 1)) ); } .dock-stack-fan .dock-stack-member { flex: 0 0 auto; inline-size: var(--dock-stack-member-size); block-size: var(--dock-stack-member-size); background: var(--glass-bg-floating); backdrop-filter: var(--glass-blur-floating); -webkit-backdrop-filter: var(--glass-blur-floating); box-shadow: var(--glass-edge-light), var(--glass-specular), 0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 22%, transparent); border-radius: var(--radius-pill); color: color-mix(in srgb, var(--dock-fg-on-aurora, var(--foreground)) 88%, transparent); opacity: 0; scale: 0.7; transition: opacity var(--duration-fast) var(--ease-out) calc(var(--dock-stack-stagger) * var(--i, 0)), scale var(--spring-dock-duration) var(--spring-dock) calc(var(--dock-stack-stagger) * var(--i, 0)), background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } .dock-stack-fan:popover-open .dock-stack-member { opacity: 1; scale: 1; } @starting-style { .dock-stack-fan:popover-open .dock-stack-member { opacity: 0; scale: 0.7; } } .dark .dock-stack-fan .dock-stack-member { box-shadow: var(--glass-edge-light-dark), var(--glass-specular-dark), 0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 30%, transparent); } .dock-stack-fan .dock-stack-member:hover { background: var(--dock-control-hover-bg, var(--glass-bg-resting)); color: var(--dock-fg-on-aurora, var(--foreground)); } .dock-stack-fan .dock-stack-member.is-active { background: var(--dock-control-active-bg, var(--glass-bg-floating)); color: var(--dock-fg-on-aurora, var(--foreground)); box-shadow: var(--glass-edge-light), var(--glass-specular), 0 0 0 1px color-mix(in srgb, var(--foreground) 12%, transparent), 0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 28%, transparent); } .dark .dock-stack-fan .dock-stack-member.is-active { box-shadow: var(--glass-edge-light-dark), var(--glass-specular-dark), 0 0 0 1px color-mix(in srgb, var(--foreground) 18%, transparent), 0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 36%, transparent); } .dock-stack-fan .dock-stack-member svg { inline-size: 0.875rem; block-size: 0.875rem; flex-shrink: 0; } .dock-stack-fan .dock-facet-chip { --dock-facet-rim-ink: color-mix( in oklab, var(--glass-rim-ink, hsl(0 0% 100% / 0.3)), var(--glass-accent) var(--glass-accent-strength, 0%) ); box-shadow: inset 0 1px 0 var(--dock-facet-rim-ink), var(--glass-specular), 0 0 0 1px color-mix(in oklab, transparent, var(--glass-accent) var(--glass-accent-strength, 0%)), 0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 22%, transparent); } .dark .dock-stack-fan .dock-facet-chip { --dock-facet-rim-ink: color-mix( in oklab, var(--glass-rim-ink, hsl(0 0% 100% / 0.4)), var(--glass-accent) var(--glass-accent-strength, 0%) ); box-shadow: inset 0 1px 0 var(--dock-facet-rim-ink), var(--glass-specular-dark), 0 0 0 1px color-mix(in oklab, transparent, var(--glass-accent) var(--glass-accent-strength, 0%)), 0 2px 6px -2px color-mix(in srgb, var(--shadow-color) 30%, transparent); } .dock-stack-fan .dock-facet-chip.is-active { background: var(--dock-control-active-bg, var(--glass-bg-floating)); box-shadow: inset 0 1px 0 var(--dock-facet-rim-ink), var(--glass-specular), 0 0 0 1px color-mix(in oklab, color-mix(in srgb, var(--foreground) 12%, transparent), var(--glass-accent) var(--glass-accent-strength, 0%)), 0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 28%, transparent); } .dark .dock-stack-fan .dock-facet-chip.is-active { box-shadow: inset 0 1px 0 var(--dock-facet-rim-ink), var(--glass-specular-dark), 0 0 0 1px color-mix(in oklab, color-mix(in srgb, var(--foreground) 18%, transparent), var(--glass-accent) var(--glass-accent-strength, 0%)), 0 3px 8px -2px color-mix(in srgb, var(--shadow-color) 36%, transparent); } @media (prefers-reduced-motion: reduce) { .dock-stack-fan[popover] { scale: 1; transition: opacity var(--duration-fast) linear, overlay var(--duration-fast) allow-discrete, display var(--duration-fast) allow-discrete; } .dock-stack-fan .dock-stack-member { scale: 1; transition: opacity var(--duration-fast) linear, background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); } } }

package/dist/styles/dock/search.css

@@ -1,68 +1 @@
-/* dock/search.css — the dock-as-native-dynamic-search-bar field surface (BC.W-DOCK-SEARCH).
- *
- * The active dock-search field + its placeholder + the result rows read CLEARLY forward
- * over whatever backdrop the dock floats on (≥4.5:1, the W55 darken seam) — never the
- * pale-ghost-fading-into-content trap (the NN/g defect, WWDC §219 "buttons remain
- * legible"). The field surface composes the W55 `--glass-tint-strength-aa` bright-bucket
- * darken at the ELEMENT level (the `color-mix(in oklab, <rung>, var(--glass-tint-source)
- * var(--glass-tint-strength))` seam glass/ladder.css + morph.css already compose) — NOT
- * the RAW pre-substituted `--glass-bg-dock` token (the substitution-vs-inheritance trap
- * the dock surfaces already hit: a surface reading the pre-baked `--glass-bg-dock` baked
- * at `:root` 0% strength does NOT darken — the pale-fade). At the 0%/floor default the
- * inner oklab mix is a no-op (byte-identical to the un-tinted rung); under the bright
- * bucket it darkens-over-light (and lifts-over-dark per W-DARK-MATERIAL).
- *
- * The result rows ride `.glass-menu-row` (the glass-quiet hover-lift, BA.W-MENU-GLASS —
- * CONSUMED here, the glassify is BC.W-SEARCH-CUSTOM's). The customization-surface axes
- * (size/surface/variant) are BC.W-SEARCH-CUSTOM's — this partial only seats the field +
- * the legibility seam. The morph itself is the dock's OWN `--dock-morph-t` + the
- * byte-untouched `morph-bridge.css` metaball (READ-ONLY — bound, never edited). */
-
-@layer components {
-    /* The search-field region inside the morph aperture. The consumer slots its
-       <SearchBar>/<FuzzySearch> here; this rule owns the legibility seam + the layout
-       inside the aperture (a column: the field over its dropdown). It is present ONLY on
-       a `[data-search]` dock (additive — a non-search dock never carries it). */
-    .glass-dock[data-search] .dock-search-field {
-        display: flex;
-        flex-direction: column;
-        inline-size: 100%;
-        min-inline-size: 0;
-        gap: var(--dock-search-field-gap, 0.375rem);
-    }
-
-    /* The ACTIVE field surface — the W55 element-level oklab tint (NOT the raw
-       `--glass-bg-dock`). The field reads the floating rung darkened toward the warm-ink
-       at the bright-bucket strength, so it reads ≥4.5:1 over a busy backdrop. The
-       `--glass-tint-source`/`--glass-tint-strength` are the SAME element-level customs
-       the dock plate self-engages (morph.css's `:where(.glass-dock)` rule re-points them
-       under the bright bucket); this field rides that lockstep, never a field-local
-       recipe. The field TEXT is `--foreground` (the full warm ink); the
-       placeholder/muted caption is `--on-glass-muted` (5.76:1 vs the plate). */
-    .glass-dock[data-search] .dock-search-field .input-bar {
-        background: color-mix(
-            in oklab,
-            var(--glass-bg-floating),
-            var(--glass-tint-source) var(--glass-tint-strength)
-        );
-        color: var(--foreground);
-    }
-
-    /* The placeholder + the autocomplete ghost-text + any muted caption inside the field
-       read the on-glass muted rung (NOT `--muted-foreground`, which is calibrated against
-       the opaque page and collapses on a translucent darkened plate). */
-    .glass-dock[data-search] .dock-search-field .input-bar-field::placeholder,
-    .glass-dock[data-search] .dock-search-field .dock-search-ghost,
-    .glass-dock[data-search] .dock-search-field .dock-search-result-meta {
-        color: var(--on-glass-muted);
-    }
-
-    /* The dropdown result rows ride the shared `.glass-menu-row` glass-quiet hover-lift
-       (BA.W-MENU-GLASS — CONSUMED, not re-authored). The dock-search list applies
-       `.glass-menu-row` per row; this rule reaches the selected/highlighted row through
-       the SAME register the menu families use (no flat `bg-accent`/`bg-muted` fork). The
-       active result reads the data-highlighted state the menu recipe already paints. */
-    .glass-dock[data-search] .dock-search-field .dock-search-result {
-        color: var(--foreground);
-    }
-}
+@layer components { .glass-dock[data-search] .dock-search-field { display: flex; flex-direction: column; inline-size: 100%; min-inline-size: 0; gap: var(--dock-search-field-gap, 0.375rem); } .glass-dock[data-search] .dock-search-field .input-bar { background: color-mix( in oklab, var(--glass-bg-floating), var(--glass-tint-source) var(--glass-tint-strength) ); color: var(--foreground); } .glass-dock[data-search] .dock-search-field .input-bar-field::placeholder, .glass-dock[data-search] .dock-search-field .dock-search-ghost, .glass-dock[data-search] .dock-search-field .dock-search-result-meta { color: var(--on-glass-muted); } .glass-dock[data-search] .dock-search-field .dock-search-result { color: var(--foreground); } }

package/dist/styles/dock/section.css

@@ -1,59 +1 @@
-/* BA.W-DOCK-SECTIONS — the <DockSection> tripartite grouping recipe + (in .2) the
- * seam fan-out / retract chrome.
- *
- * THE THREE-ZONE GESTALT (R8-9 — "the docks COMPLETELY lack sections"). The
- * <DockSection> chassis groups the dock's already-in-flow controls into a
- * rail-core | divided sections | nav silhouette and demarcates the zones with the
- * existing <DockSeparator> primitive — NO box-inflation (the section grouping is the
- * controls already in the dock plus the divider seams; it does NOT re-mount a
- * <DockLayerGroup> switcher rail, the W-RAIL3 inflator that demanded column height).
- *
- * The chassis is layout-transparent by default: `display: contents` so the zones flow
- * exactly as the bare controls did (the dock box shrink-wraps as before — the
- * box-INVIOLATE contract). The zone wrappers carry the kind marker the recipe reads;
- * they add NO size of their own. On a vertical (column) dock the section runs as a
- * column; on a horizontal (row) dock it runs as a row — inheriting the dock's own
- * flex axis, never establishing a competing one.
- *
- * @import-ed by dock.css into the SAME `@layer components` as the other dock partials.
- */
-@layer components {
-    /* The chassis root is layout-transparent — the zones inherit the dock's flex flow
-       (row or column) directly, so grouping into sections adds zero box. */
-    .dock-section {
-        display: contents;
-    }
-
-    /* A grouped zone — a flex run of the consumer's controls along the dock's axis.
-       It owns NO intrinsic size beyond `max-content` (the controls' own size), so the
-       dock keeps shrink-wrapping to its tight pill (box INVIOLATE). The gap matches the
-       dock's inter-control rhythm. */
-    .dock-section-zone {
-        display: inline-flex;
-        align-items: center;
-        gap: var(--dock-section-zone-gap, var(--dock-gap, 0.25rem));
-    }
-
-    /* On a vertical (column) dock the zones stack — the section runs down the rail. */
-    .glass-dock.vertical .dock-section-zone {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    /* The rail-core zone leads (the home/brand region); the nav zone trails. They are
-       the same flex run — the kind marker is for the recipe + a11y, not a layout fork.
-       The core (`data-kind="rail-core"`) zone gets a touch more breathing room from the
-       first section seam. The CSS token is `--core` (NOT `--rail-core`): the dock-band
-       "rail" noun is de-overloaded (AZ.W-DOCK-TAXONOMY); the data-attr carries the
-       spec's `rail-core` vocabulary, the class never says "rail". */
-    .dock-section-zone--core {
-        flex: 0 0 auto;
-    }
-    .dock-section-zone--nav {
-        flex: 0 0 auto;
-    }
-    .dock-section-zone--section {
-        flex: 0 1 auto;
-        min-inline-size: 0;
-    }
-}
+@layer components { .dock-section { display: contents; } .dock-section-zone { display: inline-flex; align-items: center; gap: var(--dock-section-zone-gap, var(--dock-gap, 0.25rem)); } .glass-dock.vertical .dock-section-zone { flex-direction: column; align-items: stretch; } .dock-section-zone--core { flex: 0 0 auto; } .dock-section-zone--nav { flex: 0 0 auto; } .dock-section-zone--section { flex: 0 1 auto; min-inline-size: 0; } }

package/dist/styles/dock/shape.css

@@ -1,124 +1 @@
-/* dock/shape.css — BC.W-DOCK-ARBITRARY: the arbitrary-shape morph register.
- *
- * The dock is no longer locked to "a rectangle that grows wider/taller." Its SHAPE
- * is a SCALAR PARAMETER on the ONE `--dock-morph-t` clock (the BC.W-DOCK-ENGINE
- * buttery scalar): the corner profile LERPS between a `--dock-shape-from`/
- * `--dock-shape-to` radius pair, an OPT-IN `clip-path` silhouette LERPS between a
- * `--dock-shape-clip-from`/`--dock-shape-clip-to` pair, and a `useLiquidFlex`
- * volume-preserving squish couples the deformation. So the dock FLOWS between
- * arbitrary silhouettes — a circle, a pill, a wide bar, a tall rail, a teardrop —
- * as one continuous liquid-glass surface (the iOS-27 control-center materialization,
- * apple-ios27.md §3.1 "physically morphs from one shape to another").
- *
- * THE COMPOSITOR FLOOR (apple-ios27.md §3.1 + motion-canon P5): the shape morph
- * animates ONLY `border-radius`/`clip-path`/`--*` — compositor/paint properties,
- * ZERO per-frame layout. The footprint is reached by the reserved-`scale()` morph
- * (layers.css, byte-untouched here), NEVER a per-frame size lerp. proof:dock-arbitrary
- * + proof:no-layout-animation both hold.
- *
- * THE LIBRARY DEFAULT IS THE CIRCLE↔PILL IDENTITY (CLAUDE.md the collapsed-perfect-
- * circle): `--dock-shape-from`/`--dock-shape-to` default to `--radius-dock` (9999px)
- * on both endpoints — a no-op lerp byte-identical to the prior static
- * `border-radius: var(--radius-dock)` — and the clip pair defaults `none`/`none`
- * (the rectangle/pill common case needs no clip). The arbitrary teardrop/blob
- * silhouette is OPT-IN: a consumer sets the shape tokens on the dock scope
- * (presets-in-consumers). Clean break (MEMORY: no backwards compat) — the prior
- * hardcoded circle/pill radius becomes the token DEFAULT, no `--dock-radius-legacy`.
- *
- * @import-ed by dock.css in cascade order, in the SAME `@layer components`. */
-
-@layer components {
-    /* ── The corner-profile lerp (A1 — the shape is a scalar parameter) ───────────
-       The dock surface radius interpolates the `--dock-shape-from`/`--dock-shape-to`
-       token pair on the ONE `--dock-expand-t` scalar (the directional expanded-ness
-       the BC.W-DOCK-ENGINE chrome interp rides; at rest it resolves to the class
-       endpoint, 0 collapsed / 1 expanded, so the resting corner is exact). This
-       GENERALIZES the prior two hardcoded class endpoints into a consumer-targetable
-       parameter: `from` is the collapsed silhouette's corner (the perfect circle,
-       9999px), `to` is the expanded silhouette's corner (the pill / an arbitrary
-       profile). A consumer overrides either token on the dock scope to morph to an
-       arbitrary corner.
-
-       This is the SINGLE radius authority (shell.css's prior static `border-radius:
-       var(--radius-dock)` is GENERALIZED here — no dead static, no duplicate, clean
-       break). Both tokens default to `--radius-dock` (9999px) so the lerp is a NO-OP at
-       the library default — byte-identical to the prior static, the circle↔pill identity
-       preserved. The token-driven `border-radius` interp is a compositor/paint property
-       on the registered `--dock-expand-t` `<number>`, NOT a transition
-       (proof:no-layout-animation stays GREEN). shape.css is imported AFTER shell.css so
-       this rule is the cascade winner for the dock corner. */
-    .glass-dock {
-        border-radius: calc(
-            var(--dock-shape-from, var(--radius-dock)) +
-                (var(--dock-shape-to, var(--radius-dock)) -
-                    var(--dock-shape-from, var(--radius-dock))) *
-                var(--dock-expand-t, 1)
-        );
-    }
-
-    /* ── The arbitrary silhouette — the OPT-IN `clip-path` lerp (A1) ──────────────
-       DEFAULT-OFF: at the library default `--dock-shape-clip-from`/`--dock-shape-clip-to`
-       are `none`, so this rule resolves `clip-path: none` (the rectangle/pill common
-       case needs no clip; the box-morph + corner lerp above is the whole shape). A
-       consumer opts into an arbitrary teardrop/blob silhouette by setting the clip
-       tokens to two compatible `inset()`/`path()`/`shape()` values; the silhouette then
-       LERPS between them on `--dock-morph-t` via the `from` * (1−t) + `to` * t weighting
-       below. `clip-path` is a compositor-friendly property — the silhouette morphs with
-       ZERO reflow (apple-ios27.md §3.1).
-
-       The lerp is expressed as a `clip-path` whose two endpoints carry per-endpoint
-       opacity-like weights via the scalar: the active silhouette is the `to`-clip once
-       the morph crosses, the `from`-clip before. The web platform cannot continuously
-       interpolate two arbitrary mismatched-topology `clip-path` functions, so the
-       opt-in consumer supplies TOPOLOGY-COMPATIBLE endpoints (two `inset()`s, or two
-       `path()`s with equal command counts) — the AX.W42 fold-7 topology limit is
-       RESPECTED (a mismatched-topology V↔H morph occludes its reflow in the goo-merge,
-       BC.W-LIQUID-MORPH, not a continuous clip morph THROUGH the change). The default
-       `none`/`none` opts the whole register off so the limit never bites the common
-       case. The custom property carries the consumer's interpolable pair; the engine
-       resolves it on the scalar only when set. */
-    .glass-dock {
-        --dock-shape-clip: var(--dock-shape-clip-to, none);
-        clip-path: var(--dock-shape-clip);
-    }
-
-    /* While morphing, the opt-in silhouette LERPS: before the midpoint the `from`-clip
-       reads, after it the `to`-clip, so the silhouette flows from one to the other as
-       the box scales under it (the corner + footprint + silhouette all on the ONE
-       scalar). The `none`/`none` default makes this a no-op (`clip-path: none` both
-       sides), so the rectangle/pill morph never pays the clip cost; the arbitrary
-       register engages ONLY when a consumer sets the clip tokens. */
-    .glass-dock[data-morphing] {
-        --dock-shape-clip: var(--dock-shape-clip-from, none);
-    }
-    .glass-dock[data-morphing]:where(.expanded, .always-expanded) {
-        /* expanding (0→1): once past the midpoint the `to`-silhouette is the target */
-        --dock-shape-clip: var(--dock-shape-clip-to, none);
-    }
-
-    /* ── The squish — the `useLiquidFlex` `--stretch` deformation (A4) ────────────
-       The shape morph couples the volume-preserving squish the tab-indicator +
-       useDockOrientationMorph already speak: `scale: var(--stretch) calc(1/var(--stretch))`
-       along the morph axis, capped LOW at `--dock-morph-max-stretch` (~1.08) by
-       useLiquidFlex itself (the ONE squish source — no forked deformation math). The
-       plate DEFORMS like liquid as it changes shape — a fast morph swells, a slow one
-       barely. The driver (useDockOrientationMorph) writes `--stretch` on the dock scope;
-       at rest `--stretch` is unset → 1/1 (no squish). The reciprocal pairing preserves
-       volume (stretch along travel, compress across). This is compositor-only (a
-       `scale` transform), composed WITH the reserved-footprint `scaleX/scaleY` morph
-       (layers.css) — the box scale rides `--dock-morph-scale`, the squish rides
-       `--stretch`, both transforms multiply on the compositor.
-
-       Scoped to `[data-morphing]` so the squish is a morph-transient (at rest the plate
-       is un-squished); the cross-axis is the morph axis's reciprocal. Horizontal docks
-       stretch X / compress Y; vertical stretch Y / compress X (the inverse-axis twin,
-       mirroring the bridge plates' per-orientation squish in morph-bridge.css). The
-       squish multiplies onto the dock's OWN transform box (the shell), distinct from the
-       inner `.dock-layers` reserved-scale box, so the two do not fight. */
-    .glass-dock[data-morphing]:not(.vertical) {
-        scale: var(--stretch, 1) calc(1 / var(--stretch, 1));
-    }
-    .glass-dock[data-morphing].vertical {
-        scale: calc(1 / var(--stretch, 1)) var(--stretch, 1);
-    }
-}
+@layer components { .glass-dock { border-radius: calc( var(--dock-shape-from, var(--radius-dock)) + (var(--dock-shape-to, var(--radius-dock)) - var(--dock-shape-from, var(--radius-dock))) * var(--dock-expand-t) ); } .glass-dock { --dock-shape-clip: var(--dock-shape-clip-to, none); clip-path: var(--dock-shape-clip); } .glass-dock[data-morphing] { --dock-shape-clip: var(--dock-shape-clip-from, none); } .glass-dock[data-morphing]:where(.expanded, .always-expanded) { --dock-shape-clip: var(--dock-shape-clip-to, none); } .glass-dock[data-morphing]:not(.vertical) { scale: var(--dock-size-scale, 1) 1; } .glass-dock[data-morphing].vertical { scale: 1 var(--dock-size-scale, 1); } .glass-dock[data-morphing]:not(.vertical) > .dock-persistent, .glass-dock[data-morphing]:not(.vertical) > .dock-layers { scale: calc(1 / max(var(--dock-size-scale, 1), 0.06)) 1; will-change: transform; } .glass-dock[data-morphing].vertical > .dock-persistent, .glass-dock[data-morphing].vertical > .dock-layers { scale: 1 calc(1 / max(var(--dock-size-scale, 1), 0.06)); will-change: transform; } .glass-dock { --motion-weight: 1; } @media (prefers-reduced-motion: reduce) { .glass-dock { --motion-weight: 0; } } }

package/dist/styles/dock/shell-regions.css

@@ -0,0 +1 @@
+@layer components { .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; } .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); } .glass-dock.vertical .dock-layer { flex-direction: column; align-items: stretch; gap: var(--dock-layer-gap, 0.375rem); min-width: 0; } }