@mkbabb/glass-ui 4.1.0 → 5.0.0

package/dist/styles/dock/density.css

@@ -1,447 +1 @@
-/* dock/density.css — the density × `--dock-scale` cascade (AX.W06 carve).
- *
- * Carved from the dock.css god-module (slice 25). This partial owns the W45
- * density cascade: every per-density geometry axis (padding / control-size /
- * layer-height / gap / tile-min / trigger+tab padding) is `calc(<base> *
- * var(--dock-scale))` so the ONE `--dock-scale` multiplier grows box+pad+gap+
- * tab+tile in lockstep on touch, with the inner `max(…, --dock-control-floor)`
- * WCAG 2.5.5 clamp. The four rungs (compact · comfortable · spacious · audacious)
- * + the audacious narrow-box `@container` label compression.
- *
- * @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). */
-
-/* ── BB.W-HIERARCHY2 — the CONTENT-side anti-collision gutter ───────────────────
-   `--dock-content-safe-inset` is the structural CONTENT-side counterpart to the
-   dock-collision SEAT fix (W-CHIP-GRAZE + W-DOCK-RAIL-SEAT-FINAL own the chip-fan
-   SEAT — the chips fan off-canvas into the rail's dead gutter, chipOverMain:false on
-   EVERY route by topology). This token reserves a guaranteed safe-inset gutter on the
-   CONTENT column so the page-title band is structurally clear of any chip reach even
-   on a route added WITHOUT a per-route audit (the anti-gameability the gestalt gate
-   wants). It is keyed to the dock reach (`--dock-rail-extend-length`, the rail's
-   beyond-edge overrun) so the content gutter tracks the dock geometry in lockstep,
-   and it rides `--dock-scale` transitively through that reach token.
-
-   THE DE-OVERLOAD IS BINDING (distinct geometry concerns, distinct tokens):
-   `--dock-control-safe-inset` (per-density, below) is the dock CONTROL plate-clearance
-   inset (the painted plate floors a notch below its track cell — BA.W-DOCK-GEOMETRY,
-   owned by proof:dock-plate-clearance); `--dock-content-safe-inset` is the CONTENT-band
-   gutter (the content column reserves dead inline space the chips can never share).
-   The two close the collision from BOTH sides — the chip seat (the SEAT waves) AND the
-   content gutter (this token) — coordinated on the SAME dead inline gutter: the content
-   gutter is the RESERVE, the gutter-fan lands the chips in it (ONE gutter, two
-   consumers). NEVER re-point this AT --dock-control-safe-inset (the de-overload). */
-:root {
-    --dock-content-safe-inset: var(--dock-rail-extend-length, 2.5rem);
-
-    /* ── BC.W-DOCK-ARBITRARY — the arbitrary-shape morph tokens ─────────────────
-       The dock morph is no longer locked to circle↔pill. The shape is now a SCALAR
-       PARAMETER: a `--dock-shape-from`/`--dock-shape-to` corner-radius pair the chrome
-       radius arm interpolates on `--dock-morph-t`, an OPT-IN `--dock-shape-clip-from`/
-       `--dock-shape-clip-to` clip-path silhouette pair (compositor-only, no layout),
-       and a `--dock-morph-max-stretch` squish cap. The library DEFAULTS preserve the
-       collapsed-perfect-circle ↔ expanded-pill identity (CLAUDE.md `aspect-ratio: 1` +
-       `--radius-dock` 9999px), so the common case needs no consumer override; a consumer
-       sets these to morph to an arbitrary silhouette (a wide bar, a teardrop, a tall
-       rail). Clean break (MEMORY: no backwards compat) — the prior hardcoded circle/pill
-       endpoints become these token DEFAULTS, no `--dock-radius-legacy`. */
-
-    /* The corner profile span — the `from`-radius (the collapsed perfect circle, a
-       9999px pill that rounds the height-pinned square into a circle) ↔ the `to`-radius
-       (the expanded pill, `--radius-dock`). Consumer-targetable: set either to any
-       radius to morph to an arbitrary corner profile. */
-    --dock-shape-from: var(--radius-dock, 9999px);
-    --dock-shape-to: var(--radius-dock, 9999px);
-
-    /* The arbitrary-silhouette span — an OPT-IN `clip-path` pair (a compositor property,
-       NO layout). DEFAULT-OFF: `none`/`none` means the rectangle/pill morph (the common
-       case) needs no clip. A consumer opts into a teardrop/blob silhouette by setting the
-       clip-from/to to two `inset()`/`path()`/`shape()` values the morph LERPS between on
-       `--dock-morph-t`. */
-    --dock-shape-clip-from: none;
-    --dock-shape-clip-to: none;
-
-    /* The squish cap — the LOW volume-preserving `--stretch` ceiling for the shape-morph
-       deformation, mirroring the tab-indicator's iOS-segmented register (the
-       `DEFAULT_INDICATOR_MAX_STRETCH` 1.08). A fast morph swells the plate then caps —
-       a lively settle, never a taffy-pull. */
-    --dock-morph-max-stretch: 1.08;
-
-    /* ── BC.W-LIQUID-MORPH — the reserve floor (the white morph can never paint) ──
-       The morph box reserves `inline-size`/`block-size: max(var(--dock-morph-to),
-       var(--dock-morph-min))` (layers.css). A degenerate `to:0` measurement (the
-       BA-VJS-1 nested-group race, glass-dock-codebase.md §2.2) would otherwise reserve
-       a ZERO-width footprint → `overflow: clip` blanks the content → the white/invisible
-       morph the user reports. The floor seats it at the collapsed-pill minimum (~44px,
-       the WCAG touch floor / `--dock-control-floor`), so a missed measurement degrades to
-       "visible at the floor," never "white." A SAFETY NET: on every healthy measurement
-       the `max()` resolves to the real `to` (inert above the floor); it fires ONLY on the
-       degenerate race. Density-scaled, riding `--dock-scale` transitively. */
-    --dock-morph-min: max(2.75rem, var(--dock-control-floor, 0px));
-
-    /* ── BC.W-DOCK-SEARCH — the collapse-on-scroll trigger-points ─────────────────
-       The dock-search optional shrink-on-scroll (composing useScrollChrome — the
-       native dual-path reader, persistent-default) reads these two tunable px
-       trigger-points: the shrink BEGINS at `--dock-search-shrink-start` of scroll and
-       reaches the compact form at `--dock-search-shrink-end` (the words
-       `scrollInflectionPoint` generalized into dock-scoped tokens). They ride
-       `--dock-scale` transitively (a coarse-pointer dock's trigger-points scale with
-       its geometry), and a consumer retunes the inflection in ONE write. NOTE the
-       PERSISTENT default — these are inert unless the consumer opts in via
-       `collapseOnScroll`; the morph itself NEVER fires on a passive scroll (the
-       iOS-27 lesson — the scroll path is the distinct compositor shrink). */
-    --dock-search-shrink-start: calc(0rem * var(--dock-scale));
-    --dock-search-shrink-end: calc(7.25rem * var(--dock-scale));
-}
-
-@layer components {
-    /* AX.W45 — the density cascade is threaded by the ONE `--dock-scale`
-       multiplier (default 1, lifted to `--dock-mobile-scale` on coarse pointers).
-       EVERY per-density geometry axis is `calc(<base> * var(--dock-scale))` so a
-       single knob grows box+pad+gap+tab+tile-min in lockstep on touch — the desktop
-       proportion preserved, never a 44px box around a desktop glyph. The
-       control-size carries an INNER `max(…, 44px)` WCAG 2.5.5 clamp (the coarse
-       block sets `--dock-control-floor: var(--dock-touch-target)`) so a consumer
-       dialing `--dock-mobile-scale` below 1.0 cannot drop the touch target under the
-       floor — the floor survives as a CLAMP, not a parallel `@media` rule. `--dock-
-       tile-min` is now IN the cascade (DK4-b) so the grid tile scales with the
-       control + glyph; it is a proportional `calc(control-size + tile-pad)` so the
-       icon-to-tile margin is ONE knob, not a per-density literal. */
-    .glass-dock[data-density="compact"] {
-        --dock-padding-block: calc(
-            var(--dock-density-compact-padding-block, 0.25rem) * var(--dock-scale)
-        );
-        --dock-padding-inline: calc(
-            var(--dock-density-compact-padding-inline, 0.375rem) * var(--dock-scale)
-        );
-        --dock-control-size: max(
-            calc(var(--dock-density-compact-control-size, 2rem) * var(--dock-scale)),
-            var(--dock-control-floor, 0px)
-        );
-        --dock-layer-height: max(
-            calc(var(--dock-density-compact-layer-height, 2rem) * var(--dock-scale)),
-            var(--dock-control-floor, 0px)
-        );
-        /* BA.W-DOCK-GEOMETRY — the control-plate clearance inset (DC-2). The
-           painted control plate floors a notch BELOW its track cell so the maximal
-           hover (×--scale-hover-dock 1.1) / active silhouette stays inside the
-           cross-axis clip box with ≥1px margin (the lozenge dies at the plate
-           diameter, not at the clip edge). The inset is a per-SIDE fraction of the
-           control size (0.1 → an 80%-of-cell painted plate, the iOS-26 inset
-           register), so it scales with EVERY density rung in lockstep AND rides the
-           `--dock-scale` coarse multiplier transitively through --dock-control-size.
-           The control families route it through `padding` + `background-clip:
-           content-box`, so the HIT BOX stays the full --dock-control-size (the WCAG
-           2.5.5 44px floor stays on the CELL, never the inset plate) while the
-           PAINTED plate insets within it. */
-        --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1);
-        --dock-layer-gap: calc(
-            var(--dock-density-compact-gap, 0.25rem) * var(--dock-scale)
-        );
-        --dock-tile-min: calc(
-            var(--dock-control-size) + var(--dock-tile-pad, 1rem) * var(--dock-scale)
-        );
-        --dock-trigger-padding-block: calc(
-            var(--dock-density-compact-trigger-padding-block, 0.1875rem) *
-                var(--dock-scale)
-        );
-        --dock-trigger-padding-inline: calc(
-            var(--dock-density-compact-trigger-padding-inline, 0.4375rem) *
-                var(--dock-scale)
-        );
-        --dock-tab-padding-block: calc(
-            var(--dock-density-compact-tab-padding-block, 0.3125rem) *
-                var(--dock-scale)
-        );
-        --dock-tab-padding-inline: calc(
-            var(--dock-density-compact-tab-padding-inline, 0.625rem) *
-                var(--dock-scale)
-        );
-        --dock-tab-h: calc(32px * var(--dock-scale));
-    }
-
-    /* Comfortable density — the GlassDock default. Sits between compact
-       and spacious. */
-    .glass-dock[data-density="comfortable"] {
-        --dock-padding-block: calc(
-            var(--dock-density-comfortable-padding-block, 0.375rem) * var(--dock-scale)
-        );
-        --dock-padding-inline: calc(
-            var(--dock-density-comfortable-padding-inline, 0.5rem) * var(--dock-scale)
-        );
-        --dock-control-size: max(
-            calc(
-                var(--dock-density-comfortable-control-size, 2.5rem) *
-                    var(--dock-scale)
-            ),
-            var(--dock-control-floor, 0px)
-        );
-        --dock-layer-height: max(
-            calc(
-                var(--dock-density-comfortable-layer-height, 2.5rem) *
-                    var(--dock-scale)
-            ),
-            var(--dock-control-floor, 0px)
-        );
-        /* BA.W-DOCK-GEOMETRY — see the compact rung. */
-        --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1);
-        --dock-layer-gap: calc(
-            var(--dock-density-comfortable-gap, 0.375rem) * var(--dock-scale)
-        );
-        --dock-tile-min: calc(
-            var(--dock-control-size) + var(--dock-tile-pad, 2rem) * var(--dock-scale)
-        );
-        --dock-trigger-padding-block: calc(
-            var(--dock-density-comfortable-trigger-padding-block, 0.25rem) *
-                var(--dock-scale)
-        );
-        --dock-trigger-padding-inline: calc(
-            var(--dock-density-comfortable-trigger-padding-inline, 0.5rem) *
-                var(--dock-scale)
-        );
-        --dock-tab-padding-block: calc(
-            var(--dock-density-comfortable-tab-padding-block, 0.4375rem) *
-                var(--dock-scale)
-        );
-        --dock-tab-padding-inline: calc(
-            var(--dock-density-comfortable-tab-padding-inline, 0.75rem) *
-                var(--dock-scale)
-        );
-        --dock-tab-h: calc(38px * var(--dock-scale));
-    }
-
-    .glass-dock[data-density="spacious"] {
-        --dock-padding-block: calc(
-            var(--dock-density-spacious-padding-block, 0.5rem) * var(--dock-scale)
-        );
-        --dock-padding-inline: calc(
-            var(--dock-density-spacious-padding-inline, 0.75rem) * var(--dock-scale)
-        );
-        --dock-control-size: max(
-            calc(
-                var(--dock-density-spacious-control-size, 2.75rem) * var(--dock-scale)
-            ),
-            var(--dock-control-floor, 0px)
-        );
-        --dock-layer-height: max(
-            calc(
-                var(--dock-density-spacious-layer-height, 2.75rem) * var(--dock-scale)
-            ),
-            var(--dock-control-floor, 0px)
-        );
-        /* BA.W-DOCK-GEOMETRY — see the compact rung. */
-        --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1);
-        --dock-layer-gap: calc(
-            var(--dock-density-spacious-gap, 0.5rem) * var(--dock-scale)
-        );
-        --dock-tile-min: calc(
-            var(--dock-control-size) + var(--dock-tile-pad, 2.75rem) * var(--dock-scale)
-        );
-        --dock-trigger-padding-block: calc(
-            var(--dock-density-spacious-trigger-padding-block, 0.375rem) *
-                var(--dock-scale)
-        );
-        --dock-trigger-padding-inline: calc(
-            var(--dock-density-spacious-trigger-padding-inline, 0.625rem) *
-                var(--dock-scale)
-        );
-        --dock-tab-padding-block: calc(
-            var(--dock-density-spacious-tab-padding-block, 0.5rem) * var(--dock-scale)
-        );
-        --dock-tab-padding-inline: calc(
-            var(--dock-density-spacious-tab-padding-inline, 0.875rem) *
-                var(--dock-scale)
-        );
-        --dock-tab-h: calc(44px * var(--dock-scale));
-    }
-
-    /* Audacious density — typography-forward chrome where the dock reads as
-       a primary surface, not a tray. Tab buttons set their own min-height so
-       consumer-bumped fonts no longer drift the button height — the
-       `--dock-tab-min-height` token reserves the row regardless of glyph rise. */
-    .glass-dock[data-density="audacious"] {
-        --dock-padding-block: calc(
-            var(--dock-density-audacious-padding-block, 0.5rem) * var(--dock-scale)
-        );
-        --dock-padding-inline: calc(
-            var(--dock-density-audacious-padding-inline, 0.875rem) * var(--dock-scale)
-        );
-        --dock-control-size: max(
-            calc(var(--dock-density-audacious-control-size, 4rem) * var(--dock-scale)),
-            var(--dock-control-floor, 0px)
-        );
-        --dock-layer-height: max(
-            calc(var(--dock-density-audacious-layer-height, 4rem) * var(--dock-scale)),
-            var(--dock-control-floor, 0px)
-        );
-        /* BA.W-DOCK-GEOMETRY — see the compact rung. */
-        --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1);
-        --dock-layer-gap: calc(
-            var(--dock-density-audacious-gap, 0.875rem) * var(--dock-scale)
-        );
-        --dock-tile-min: calc(
-            var(--dock-control-size) + var(--dock-tile-pad, 2.75rem) * var(--dock-scale)
-        );
-        --dock-trigger-padding-block: calc(
-            var(--dock-density-audacious-trigger-padding-block, 0.625rem) *
-                var(--dock-scale)
-        );
-        --dock-trigger-padding-inline: calc(
-            var(--dock-density-audacious-trigger-padding-inline, 1rem) *
-                var(--dock-scale)
-        );
-        --dock-tab-padding-block: calc(
-            var(--dock-density-audacious-tab-padding-block, 0.5rem) * var(--dock-scale)
-        );
-        --dock-tab-padding-inline: calc(
-            var(--dock-density-audacious-tab-padding-inline, 1.5rem) *
-                var(--dock-scale)
-        );
-        --dock-tab-min-height: calc(
-            var(--dock-density-audacious-tab-min-height, 3.5rem) * var(--dock-scale)
-        );
-        --dock-tab-h: calc(
-            var(--dock-density-audacious-tab-min-height, 3.5rem) * var(--dock-scale)
-        );
-    }
-
-    /* ── BC.W-AX-DOCK-COCKPIT — the `cockpit` geometry PRESET ─────────────────────
-       The tight instrument-cockpit register: a FIXED `2.75rem` control floor (the
-       Gate-1 Q6 fixed value — NOT a range) with COMPACT-tight chrome (the tightest
-       padding/gap/tile-pad, distinct from `spacious`'s LOOSE chrome at the SAME
-       2.75rem control). It closes the dock-oversize chronic (speedtest A-9): a
-       consumer opts into a dense, proportioned instrument strip — `2.75rem` control,
-       compact chrome, the label tracking the control by `--dock-label-ratio` (so the
-       label never reads OVERSIZE on the tight pill).
-
-       It is a NAMED preset, NOT a 5th density rung — the density axis stays FOUR rungs
-       (`proof:dock-unify`'s density census is unaffected). The preset is a geometry
-       OVERRIDE composing WITH a `data-density` base: `[data-preset="cockpit"]` wins the
-       control-size/layer-height/chrome by source-order (this block comes AFTER the rungs),
-       so a `<GlassDock data-density="comfortable" data-preset="cockpit">` resolves the
-       cockpit geometry. An ancestor `[data-preset="cockpit"]` scope re-declares these
-       tokens too (the substitution-vs-inheritance discipline) so descendant docks inherit.
-
-       The control floor rides the SAME `* var(--dock-scale)` thread + the `max(…,
-       --dock-control-floor)` WCAG 2.5.5 clamp as the rungs — the cockpit is tight, but
-       the coarse-pointer touch target NEVER drops below the 44px floor. */
-    .glass-dock[data-preset="cockpit"] {
-        /* The FIXED 2.75rem control floor (Q6) — the cockpit register, riding
-           `--dock-scale` + the 44px clamp. NOT a `clamp(2.5rem, …, 3rem)` range. */
-        --dock-control-size: max(
-            calc(2.75rem * var(--dock-scale)),
-            var(--dock-control-floor, 0px)
-        );
-        --dock-layer-height: max(
-            calc(2.75rem * var(--dock-scale)),
-            var(--dock-control-floor, 0px)
-        );
-        /* The TIGHT chrome — the COMPACT-rung tightness (the cockpit is a dense
-           instrument strip, NOT the spacious loosening). This is the distinction
-           from `spacious` (same control, LOOSE chrome). */
-        --dock-padding-block: calc(
-            var(--dock-density-compact-padding-block, 0.25rem) * var(--dock-scale)
-        );
-        --dock-padding-inline: calc(
-            var(--dock-density-compact-padding-inline, 0.375rem) * var(--dock-scale)
-        );
-        --dock-layer-gap: calc(
-            var(--dock-density-compact-gap, 0.25rem) * var(--dock-scale)
-        );
-        /* BA.W-DOCK-GEOMETRY — the control-plate clearance inset, in lockstep with
-           the rungs (the 10%-per-side painted-plate inset). */
-        --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1);
-        --dock-tile-min: calc(
-            var(--dock-control-size) + var(--dock-tile-pad, 1rem) * var(--dock-scale)
-        );
-        --dock-trigger-padding-block: calc(
-            var(--dock-density-compact-trigger-padding-block, 0.1875rem) *
-                var(--dock-scale)
-        );
-        --dock-trigger-padding-inline: calc(
-            var(--dock-density-compact-trigger-padding-inline, 0.4375rem) *
-                var(--dock-scale)
-        );
-        --dock-tab-padding-block: calc(
-            var(--dock-density-compact-tab-padding-block, 0.3125rem) *
-                var(--dock-scale)
-        );
-        --dock-tab-padding-inline: calc(
-            var(--dock-density-compact-tab-padding-inline, 0.625rem) *
-                var(--dock-scale)
-        );
-        --dock-tab-h: calc(32px * var(--dock-scale));
-        /* The cockpit-tight label ratio — the label reads EVEN tighter relative to
-           its control than the `:root` default (the A-9 close). The `dock-label`
-           font-size is `calc(--dock-control-size * --dock-label-ratio)`; the cockpit
-           tunes the ratio DOWN so a 2.75rem cockpit control carries a label sized for
-           the dense strip, not the comfortable-default proportion. */
-        --dock-label-ratio: 0.42;
-        /* RE-RESOLVE the density-painted glyph tokens against the cockpit
-           `--dock-layer-height` (the same substitution-vs-inheritance trap the
-           `.glass-dock[data-density]` re-resolve below fixes — a `[data-preset]`
-           scope paints its OWN `--dock-layer-height`, so the `:root`-derived glyph
-           would freeze at the fallback). Identical formula to the density re-resolve;
-           only the resolution element moves so the cockpit height flows into the glyph. */
-        --dock-icon-glyph: max(
-            calc(var(--dock-layer-height) * var(--dock-icon-glyph-ratio)),
-            var(--dock-icon-glyph-floor)
-        );
-        --dock-control-glyph-size: var(--dock-icon-glyph);
-    }
-
-    /* BB.W-PERF-PRODUCER A′-6 — RE-RESOLVE the glyph token inside the density-painted
-       scope. `--dock-icon-glyph` (offsets-sizing.css) is a RATIO of
-       `--dock-layer-height`, but density.css paints `--dock-layer-height` ONLY on
-       `.glass-dock[data-density]` — the `:root` `--dock-icon-glyph` definition reads
-       `--dock-layer-height` at `:root` (the inline fallback ladder), so it would
-       FREEZE at the fallback rather than track the per-rung painted height (the SAME
-       substitution-vs-inheritance trap the R5-1 sweep fixed for
-       `--dock-collapsed-summary-min-size` in overflow.css). Re-resolving it HERE, on
-       the element that paints `--dock-layer-height`, lets the per-density height flow
-       into the glyph so a `spacious` dock's glyph grows in lockstep with the shelf
-       (the value.js D5-1 defect). The formula is IDENTICAL to the `:root` definition;
-       only the resolution element moves. The WCAG floor + the `--dock-icon-glyph-ratio`
-       knob ride through unchanged; the `.dark-mode-toggle-button > svg` mirror reads
-       the same re-resolved token so both glyphs track the density axis. */
-    .glass-dock[data-density] {
-        --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-RESOLVE the in-dock
-           control-glyph knob against the density-painted `--dock-icon-glyph` (the
-           same substitution-vs-inheritance trap as the glyph above: a `:root`-only
-           `--dock-control-glyph-size` would freeze at the `:root` glyph while
-           `--dock-icon-glyph` lifts per density). Re-declaring it HERE keeps the
-           docked dark-toggle glyph + its inset pad on the density axis with the nav
-           glyphs. Identical to the `:root` default; only the resolution element
-           moves so the density-painted glyph flows in. */
-        --dock-control-glyph-size: var(--dock-icon-glyph);
-    }
-
-    /* Density-audacious narrow-box carve (AV.W16 TW3) — when the dock's OWN
-       box is narrow the audacious-dock label glyphs compress so the chrome
-       doesn't overflow its host (≤14px below 30rem, 15px 30–45rem). Keyed off
-       the dock's `dock` inline-size container — now OPT-IN via the
-       `containerName="dock"` prop (AW.W1 removed the always-on default that
-       broke shrink-to-fit), so it fires only for a dock the consumer has
-       width-CONSTRAINED into a host (the 320px sidebar case) where the
-       compression is meaningful and the containment does not collapse the box.
-       A free-floating dock shrink-wraps (box == content) so there is nothing to
-       compress. The var
-       is set on the `.dock-label` descendant (which reads it via
-       `font-size: var(--dock-label-size)`, typography.css). Thresholds keep
-       the prior 479/719px viewport cadence as box widths (30rem ≈ 480px,
-       45rem ≈ 720px at the 16px root). */
-    @container dock (max-width: 29.9375rem) {
-        .glass-dock[data-density="audacious"] .dock-label {
-            --dock-label-size: 14px;
-        }
-    }
-    @container dock (min-width: 30rem) and (max-width: 44.9375rem) {
-        .glass-dock[data-density="audacious"] .dock-label {
-            --dock-label-size: 15px;
-        }
-    }
-}
+:root { --dock-content-safe-inset: var(--dock-rail-extend-length, 2.5rem); --dock-shape-from: var(--radius-dock, 9999px); --dock-shape-to: var(--radius-dock, 9999px); --dock-shape-clip-from: none; --dock-shape-clip-to: none; --dock-morph-max-stretch: 1.14; --dock-morph-min: max(2.75rem, var(--dock-control-floor, 0px)); --dock-search-shrink-start: calc(0rem * var(--dock-scale)); --dock-search-shrink-end: calc(7.25rem * var(--dock-scale)); } @layer components { .glass-dock[data-size="sm"] { --dock-padding-block: calc( var(--dock-density-compact-padding-block, 0.375rem) * var(--dock-scale) ); --dock-padding-inline: calc( var(--dock-density-compact-padding-inline, 0.5rem) * var(--dock-scale) ); --dock-control-size: max( calc(var(--dock-density-compact-control-size, 2rem) * var(--dock-scale)), var(--dock-control-floor, 0px) ); --dock-layer-height: max( calc(var(--dock-density-compact-layer-height, 2rem) * var(--dock-scale)), var(--dock-control-floor, 0px) ); --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1); --dock-layer-gap: calc( var(--dock-density-compact-gap, 0.25rem) * var(--dock-scale) ); --dock-tile-min: calc( var(--dock-control-size) + var(--dock-tile-pad, 1rem) * var(--dock-scale) ); --dock-trigger-padding-block: calc( var(--dock-density-compact-trigger-padding-block, 0.1875rem) * var(--dock-scale) ); --dock-trigger-padding-inline: calc( var(--dock-density-compact-trigger-padding-inline, 0.4375rem) * var(--dock-scale) ); --dock-tab-padding-block: calc( var(--dock-density-compact-tab-padding-block, 0.3125rem) * var(--dock-scale) ); --dock-tab-padding-inline: calc( var(--dock-density-compact-tab-padding-inline, 0.625rem) * var(--dock-scale) ); --dock-tab-h: calc(32px * var(--dock-scale)); } .glass-dock[data-size="md"] { --dock-padding-block: calc( var(--dock-density-comfortable-padding-block, 0.5rem) * var(--dock-scale) ); --dock-padding-inline: calc( var(--dock-density-comfortable-padding-inline, 0.75rem) * var(--dock-scale) ); --dock-control-size: max( calc( var(--dock-density-comfortable-control-size, 2.5rem) * var(--dock-scale) ), var(--dock-control-floor, 0px) ); --dock-layer-height: max( calc( var(--dock-density-comfortable-layer-height, 2.5rem) * var(--dock-scale) ), var(--dock-control-floor, 0px) ); --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1); --dock-layer-gap: calc( var(--dock-density-comfortable-gap, 0.375rem) * var(--dock-scale) ); --dock-tile-min: calc( var(--dock-control-size) + var(--dock-tile-pad, 2rem) * var(--dock-scale) ); --dock-trigger-padding-block: calc( var(--dock-density-comfortable-trigger-padding-block, 0.25rem) * var(--dock-scale) ); --dock-trigger-padding-inline: calc( var(--dock-density-comfortable-trigger-padding-inline, 0.5rem) * var(--dock-scale) ); --dock-tab-padding-block: calc( var(--dock-density-comfortable-tab-padding-block, 0.4375rem) * var(--dock-scale) ); --dock-tab-padding-inline: calc( var(--dock-density-comfortable-tab-padding-inline, 0.75rem) * var(--dock-scale) ); --dock-tab-h: calc(38px * var(--dock-scale)); } .glass-dock[data-size="lg"] { --dock-padding-block: calc( var(--dock-density-spacious-padding-block, 0.625rem) * var(--dock-scale) ); --dock-padding-inline: calc( var(--dock-density-spacious-padding-inline, 1rem) * var(--dock-scale) ); --dock-control-size: max( calc( var(--dock-density-spacious-control-size, 2.75rem) * var(--dock-scale) ), var(--dock-control-floor, 0px) ); --dock-layer-height: max( calc( var(--dock-density-spacious-layer-height, 2.75rem) * var(--dock-scale) ), var(--dock-control-floor, 0px) ); --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1); --dock-layer-gap: calc( var(--dock-density-spacious-gap, 0.5rem) * var(--dock-scale) ); --dock-tile-min: calc( var(--dock-control-size) + var(--dock-tile-pad, 2.75rem) * var(--dock-scale) ); --dock-trigger-padding-block: calc( var(--dock-density-spacious-trigger-padding-block, 0.375rem) * var(--dock-scale) ); --dock-trigger-padding-inline: calc( var(--dock-density-spacious-trigger-padding-inline, 0.625rem) * var(--dock-scale) ); --dock-tab-padding-block: calc( var(--dock-density-spacious-tab-padding-block, 0.5rem) * var(--dock-scale) ); --dock-tab-padding-inline: calc( var(--dock-density-spacious-tab-padding-inline, 0.875rem) * var(--dock-scale) ); --dock-tab-h: calc(44px * var(--dock-scale)); } .glass-dock[data-size="xl"] { --dock-padding-block: calc( var(--dock-density-audacious-padding-block, 0.5rem) * var(--dock-scale) ); --dock-padding-inline: calc( var(--dock-density-audacious-padding-inline, 0.875rem) * var(--dock-scale) ); --dock-control-size: max( calc(var(--dock-density-audacious-control-size, 4rem) * var(--dock-scale)), var(--dock-control-floor, 0px) ); --dock-layer-height: max( calc(var(--dock-density-audacious-layer-height, 4rem) * var(--dock-scale)), var(--dock-control-floor, 0px) ); --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1); --dock-layer-gap: calc( var(--dock-density-audacious-gap, 0.875rem) * var(--dock-scale) ); --dock-tile-min: calc( var(--dock-control-size) + var(--dock-tile-pad, 2.75rem) * var(--dock-scale) ); --dock-trigger-padding-block: calc( var(--dock-density-audacious-trigger-padding-block, 0.625rem) * var(--dock-scale) ); --dock-trigger-padding-inline: calc( var(--dock-density-audacious-trigger-padding-inline, 1rem) * var(--dock-scale) ); --dock-tab-padding-block: calc( var(--dock-density-audacious-tab-padding-block, 0.5rem) * var(--dock-scale) ); --dock-tab-padding-inline: calc( var(--dock-density-audacious-tab-padding-inline, 1.5rem) * var(--dock-scale) ); --dock-tab-min-height: calc( var(--dock-density-audacious-tab-min-height, 3.5rem) * var(--dock-scale) ); --dock-tab-h: calc( var(--dock-density-audacious-tab-min-height, 3.5rem) * var(--dock-scale) ); } .glass-dock[data-preset="cockpit"] { --dock-control-size: max( calc(2.75rem * var(--dock-scale)), var(--dock-control-floor, 0px) ); --dock-layer-height: max( calc(2.75rem * var(--dock-scale)), var(--dock-control-floor, 0px) ); --dock-padding-block: calc( var(--dock-density-compact-padding-block, 0.25rem) * var(--dock-scale) ); --dock-padding-inline: calc( var(--dock-density-compact-padding-inline, 0.375rem) * var(--dock-scale) ); --dock-layer-gap: calc( var(--dock-density-compact-gap, 0.25rem) * var(--dock-scale) ); --dock-control-safe-inset: calc(var(--dock-control-size) * 0.1); --dock-tile-min: calc( var(--dock-control-size) + var(--dock-tile-pad, 1rem) * var(--dock-scale) ); --dock-trigger-padding-block: calc( var(--dock-density-compact-trigger-padding-block, 0.1875rem) * var(--dock-scale) ); --dock-trigger-padding-inline: calc( var(--dock-density-compact-trigger-padding-inline, 0.4375rem) * var(--dock-scale) ); --dock-tab-padding-block: calc( var(--dock-density-compact-tab-padding-block, 0.3125rem) * var(--dock-scale) ); --dock-tab-padding-inline: calc( var(--dock-density-compact-tab-padding-inline, 0.625rem) * var(--dock-scale) ); --dock-tab-h: calc(32px * var(--dock-scale)); --dock-label-ratio: 0.275; --dock-icon-glyph: max( calc(var(--dock-layer-height) * var(--dock-icon-glyph-ratio)), var(--dock-icon-glyph-floor) ); --dock-control-glyph-size: var(--dock-icon-glyph); } .glass-dock[data-size] { --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); } @container dock (max-width: 29.9375rem) { .glass-dock[data-size="xl"] .dock-label { --dock-label-size: 14px; } } @container dock (min-width: 30rem) and (max-width: 44.9375rem) { .glass-dock[data-size="xl"] .dock-label { --dock-label-size: 15px; } } }

package/dist/styles/dock/dock.css

@@ -0,0 +1 @@
+@layer components { .dock-plate { position: absolute; inset: 0; z-index: -1; pointer-events: auto; border-radius: inherit; backdrop-filter: var(--dock-surface-blur); background: color-mix( in oklab, var(--glass-bg-dock, var(--glass-bg-resting)), var(--glass-tint-source) var(--glass-tint-strength) ); border: 1.5px solid var(--glass-border-dock, var(--glass-border-resting)); --dock-t: var(--dock-morph-t); --dock-plate-inset-inline: calc( (1 - var(--dock-t)) * var(--dock-plate-collapse-inset, 0px) ); --dock-plate-inset-block: calc( (1 - var(--dock-t)) * var(--dock-plate-collapse-inset-block, 0px) ); clip-path: inset( var(--dock-plate-inset-block) var(--dock-plate-inset-inline) ); } .dock-plate::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 .dock-plate::after { mix-blend-mode: soft-light; } .dock-controls { display: contents; overflow: visible; pointer-events: auto; } .glass-dock > .dock-controls { overflow-x: visible; overflow-y: visible; } [data-reserve] { pointer-events: none; } [data-reserve] > .glass-dock, [data-reserve] .dock-plate, [data-reserve] .dock-controls { pointer-events: auto; } .glass-dock.fixed { inset-inline: 0; margin-inline: auto; inline-size: max-content; width: max-content; } } @media (prefers-reduced-motion: reduce) { @layer components { .glass-dock.expanded .dock-plate, .glass-dock.always-expanded .dock-plate { --dock-t: 1; } .glass-dock.collapsed .dock-plate { --dock-t: 0; } } }

package/dist/styles/dock/fisheye.css

@@ -0,0 +1 @@
+@property --dock-px { syntax: "<number>"; inherits: true; initial-value: -99999; } @layer components { .glass-dock[data-dock-fisheye] { transition: --dock-px var(--dock-fisheye-duration) linear; } @media (hover: hover) and (pointer: fine) { .glass-dock[data-dock-fisheye]:not([data-dock-overflow]) .dock-fisheye-item { --d: calc(var(--x, 0) - var(--dock-px, -99999)); scale: calc( 1 + var(--dock-fisheye-amp, 0.6) * exp( -1 * pow(var(--d), 2) / (2 * pow(var(--dock-fisheye-sigma, 64), 2)) ) ); transform-origin: center bottom; } } @media (prefers-reduced-motion: reduce) { .glass-dock[data-dock-fisheye] { transition: none; } .glass-dock[data-dock-fisheye] .dock-fisheye-item { scale: 1; } } }