@mkbabb/glass-ui 5.0.0 → 6.0.0

package/src/styles/dock-controls.css

@@ -1,92 +0,0 @@
-/* Dock CONTROL-family styles — thin @import root over dock-controls/*.css
-   (AZ.W-CARVE — the AU.W8b.3 monolith drained its no-god-module ratchet row).
- *
- * dock.css keeps the shell / density / grain / layer-crossfade contract + the
- * shared cross-control four-state contract (the `:focus-visible` / `:disabled`
- * comma-groups + the motion-token `:where()` group, which reference these
- * control selectors but are shared, not per-control). This file owns the FIVE
- * control families themselves, carved into cohesive partials each under the
- * 500-line bound, @import-ed below in CASCADE ORDER into the SAME
- * `@layer components` (the carve moves rules across files in the same source
- * position → byte-isomorphic dist; the no-god-module import-order gate witnesses):
- *   1. dock-controls/icon-button.css      `.dock-icon-button` (base / states / glyph / --compact)
- *   2. dock-controls/dark-mode-toggle.css `.dark-mode-toggle-button` (sizes / in-dock glyph inset)
- *   3. dock-controls/tab-button.css       `.dock-tab-button` (base / tier-primary / tier-secondary)
- *   4. dock-controls/triggers.css         `.dock-select-trigger` / `.dock-dropdown-trigger` (base / states / __chevron)
- *   5. dock-controls/touch-floor.css      the coarse @media touch floor + the vertical-rail SELECTED register
- *
- * The shared cross-family `:where()` group (the small-tile specular sizing
- * re-point) stays at THIS root — exactly as the dock.css carve kept its shared
- * `:where()` four-state contract at ITS root — because it references every
- * control selector and nesting it under one control would change coverage.
- *
- * AU.W8b.2 — the per-family parent+state clusters use native `&`-nesting
- * (Baseline Widely available 2023; Lightning CSS down-compiles so the shipped
- * `dist` CSS is flat with IDENTICAL specificity). The cross-family comma-groups
- * stay UN-nested (nesting under one control would change coverage).
- *
- * Imported by index.css directly after dock.css in the same `@layer components`
- * (cascade rung 6b) — no new subpath; it ships inside `/styles`.
- *
- * CSS `@import` rules must precede every other rule (the dock.css precedent),
- * so the five family partials @import FIRST; the shared cross-family `:where()`
- * group follows in its own `@layer components`. The `:where()` group has ZERO
- * specificity and sets `--glass-specular-size` on the control family — no family
- * partial re-sets that property, so its source position (after the imports vs
- * before) is cascade-immaterial; the byte-isomorphism witness (§4) is the arbiter. */
-@import "./dock-controls/icon-button.css";
-@import "./dock-controls/dark-mode-toggle.css";
-@import "./dock-controls/tab-button.css";
-@import "./dock-controls/triggers.css";
-@import "./dock-controls/touch-floor.css";
-
-@layer components {
-    /* BD.W-DOCK-CORE (A12) — the draggable-item GRAB squish. A grabbed dock item
-       (`.glass-drag-lift`, written by useDockItemDrag while the gesture is in flight)
-       deforms with the volume-preserving `--stretch` register (the SHARED useLiquidFlex
-       "tanh" squish the tab indicator + dock morph already speak — ONE squish source, no
-       forked deformation). The grab follows the pointer via the JS-written `transform:
-       translate` (the compositor follow); this rule adds the gel-squish scale ON the
-       grabbed plate (stretch along the drag axis, compress across — volume-preserving).
-       The dock grabbable cursor + touch-action sit on `.glass-drag-grabbable` (the dock
-       root) via segmented-tabs.css. At rest `--stretch` is unset → 1/1 (no deform). The
-       global PRM gate strips `scale` → no squish under reduce (the gesture still follows).
-       Horizontal docks stretch X / compress Y; vertical stretch Y / compress X. */
-    .glass-dock.dock-items-draggable:not(.vertical) .dock-icon-button.glass-drag-lift {
-        scale: var(--stretch, 1) calc(1 / var(--stretch, 1));
-    }
-    .glass-dock.dock-items-draggable.vertical .dock-icon-button.glass-drag-lift {
-        scale: calc(1 / var(--stretch, 1)) var(--stretch, 1);
-    }
-
-    /* AV.W9.3 — momentum-gated dock-control press spring. The `:active` squish
-       toward `--scale-press-dock` settles on a NO-OVERSHOOT spring (Apple,
-       "Designing Fluid Interfaces": default 100% damping — no bounce — for a tap;
-       reserve bounce for surfaces driven by gesture MOMENTUM). The dock controls
-       are tap surfaces (no momentum).
-
-       AY.W-DOCK2 (D6) — the per-surface re-point of `--dock-press-spring` to
-       `--spring-smooth` is DELETED here: the ROOT token (`tokens.css`) IS the §6
-       doctrine register now (`--spring-smooth`), so the re-point was a dead
-       byte-identical redeclaration — the exact per-surface fork the §6 doctrine
-       claims to have killed. The dock controls inherit the correct smooth
-       transform-press register straight from the ROOT token; this `:where()` group
-       keeps ONLY the small-tile specular sizing below. */
-    :where(
-        .dock-icon-button,
-        .dock-tab-button,
-        .dock-select-trigger,
-        .dock-dropdown-trigger
-    ) {
-        /* AX.W45-TUNE C4/C5 — the small-tile specular sizing. The dock controls are
-           ~40px tiles, a fraction of a card's plate, so the global 36% specular
-           radius blooms a tile-filling disc (the I.W6 finding). The family re-points
-           `--glass-specular-size` to the tighter `--dock-control-specular-size` (22%,
-           tokens.css), so the SHARED `.glass-material::before` catch-light recipe
-           (glass.css) paints a restrained EDGE-catch on the small tile WITHOUT
-           forking the recipe — the gleam wakes on hover/active (the cohort's 0.1/0.16
-           rungs), sized for the tile. The rest intensity stays 0 (the default-off
-           discipline) so the resting tile carries NO bloom. */
-        --glass-specular-size: var(--dock-control-specular-size, 22%);
-    }
-}

package/src/styles/dock.css

@@ -1,219 +0,0 @@
-/* Dock primitives exported through @mkbabb/glass-ui/styles.
- *
- * This file is the CORE of the dock component family — the `@property
- * --dock-morph-t` registration, the @layer-components OPEN, the SHARED
- * cross-control four-state contract (the :focus-visible / :disabled comma-groups
- * + the motion-token :where() group — they reference every control selector but
- * are shared, so they live at the import root, not per-control), and the
- * `@import`s of the cohesive `dock/*.css` partials.
- *
- * AX.W06 — the 1762-line dock.css god-module (slice 25) was CARVED into
- * src/styles/dock/ cohesive single-axis partials, each under the 500-line bound,
- * @import-ed below in cascade order into the SAME `@layer components` so the
- * carve is isomorphic (same layer, same source order → ZERO visual delta):
- *   - dock/shell.css       — the `.glass-dock` structural skeleton (root, W02
- *                            morph-clip aperture, grain, vertical-root, shape /
- *                            variant plates, position, W45 #persistent + vertical
- *                            three-region body).
- *   - dock/morph.css       — the W01 single-scalar morph chrome + state response
- *                            (--dock-expand-t interp, collapsed/summary, held /
- *                            open).
- *   - dock/adaptive-legibility.css — the darken-over-light self-engage (the
- *                            continuous backdrop-luma tint clamp, the warm-chromatic
- *                            dock ink, the @container light bucket, contrast-color()
- *                            refinement, the PRM reveal-blur carve). Split from
- *                            morph.css to keep both partials under the 500-line bound.
- *   - dock/density.css     — the W45 density × --dock-scale cascade.
- *   - dock/layers.css      — the `.dock-layer` crossfade + hit-test + reveal-
- *                            stagger contract + the `layout="grid"` tile grid.
- *   - dock/layer-group.css — `.dock-layer-group` / layer-switcher rail / stack.
- *   - dock/overflow.css    — the `overflow=` scroll/wrap strategies + the coarse
- *                            multiplier.
- *
- * The FIVE interactive control families stay in dock-controls.css (the AU.W8b.3
- * carve, @import-ed by index.css directly after this file). The Vue SFCs own
- * structure + runtime behavior; selectors, motion, glass, and layering tokens
- * live here + in the partials so consumers have one public CSS path. */
-
-/* CSS `@import` rules must precede every other rule (a `@property`/`@layer`
-   block after an `@import` would render it invalid + dropped). The six partials
-   @import in cascade order; each opens its own `@layer components` so the layered
-   cascade is preserved bit-for-bit (the carve-isomorphism gate is the witness). */
-@import "./dock/shell.css";
-/* BG.W-CLOSEFIX-9SITE — the `#persistent` region + vertical layer-stack body carved out
-   of shell.css's tail to hold the no-god-module 500-line bound. @import-ed IMMEDIATELY
-   AFTER dock/shell.css and BEFORE dock/morph.css, in the SAME @layer components — the
-   persistent-region block was the tail of shell.css (disjoint selectors), so the carve
-   is isomorphic (same layer, same source order → ZERO visual delta). */
-@import "./dock/shell-regions.css";
-/* BI.W-DOCK-SPINE — the GREENFIELD three-z-layer plate SPINE (L0 `.dock-plate` clip-path
-   lens off `--dock-t` / L1 `.dock-controls` overflow:visible / L2 top-layer). @import-ed
-   AFTER the structural shell + BEFORE morph.css so the plate BASE surface lands first and
-   morph.css's collapsed↔expanded interp (retargeted onto `.dock-plate`) source-order-wins.
-   Splits `.glass-dock`'s triple identity (surface + clip aperture + item container) — the
-   FAM-3 dock-disease terminal cure. */
-@import "./dock/dock.css";
-@import "./dock/morph.css";
-@import "./dock/adaptive-legibility.css";
-@import "./dock/density.css";
-@import "./dock/shape.css";
-@import "./dock/layers.css";
-@import "./dock/layer-group.css";
-/* BI.W-DOCK-CROSSFADE — the ONE crossfade-slot rule (`.dock-crossfade`/`.dock-face`/
-   `.dock-face-content`), the FOLD of `DockLayerGroup`/`DockLayer`/`useLayerTransition`
-   into a two-child opacity overlap on the per-face `--dock-t` + a measure-once peak
-   `min-block-size` + the G12 content-wrapper clip. @import-ed AFTER layers/layer-group
-   (their `.dock-layer-item-host` FLIP crossfade is superseded — the element no longer
-   renders) into its own `@layer components`. */
-@import "./dock/crossfade.css";
-@import "./dock/overflow.css";
-/* BI.W-DOCK-OVERFLOW — the fits-branch pure-CSS Gaussian fisheye (the EXCLUSIVE-mode
-   enhancement, opt-in behind [data-dock-fisheye]; the native scroll track above is the
-   universal floor). @import-ed AFTER overflow.css so the fisheye scale reads the same
-   [data-dock-overflow] mode signal in source order. */
-@import "./dock/fisheye.css";
-@import "./dock/popover.css";
-@import "./dock/section.css";
-/* BI.W-DOCK-RETIRES — `morph-bridge.css` (the V↔H goo teardrop), `fission-bridge.css` +
-   `fission-island.css` (the 1→N fission goo), and `siri.css` (the Siri island) are
-   DEFINITION-ABSENT (decided-terminal, clean break, no alias). The goo `filter:url()`
-   stacked over `backdrop-filter` was the prime UF-C3 Safari suspect; it is gone. The V↔H
-   swap is the crossfade (`crossfade.css`). */
-/* BC.W-AX-DOCK-CTA-SEAT — the [data-cta-pending] CTA-receive landing seat (the static
-   resting-geometry reserve + the plain transition:opacity FLIP reveal). Last in the
-   dock cascade — a net-new surface around the byte-untouched useDockCtaReceive morph. */
-@import "./dock/cta-seat.css";
-/* BC.W-DOCK-SEARCH — the dock-as-native-dynamic-search-bar field surface (the W55
-   active-field tint legibility seam + the `.glass-menu-row` result rows). A net-new
-   surface on a `[data-search]` dock; the pill→field morph is the dock's OWN `--dock-morph-t`
-   glide (box-inviolate); CONSUMES the W55 tint seam + the menu-row recipe, re-authors neither. */
-@import "./dock/search.css";
-
-/* AX.W01 — the SINGLE morph scalar. `useLayerTransition` writes it once per frame
-   to the `.glass-dock` root; EVERY morph axis (box size, padding, radius, scale,
-   background/border color, child stagger) is a pure `calc()` read off it — one
-   driver, one clock, on every engine (the View-Transitions collapse fork is
-   retired). `@property`-registered `<number>` so it interpolates COMPOSITED, not
-   discretely (an UNregistered custom property jumps + animates on the main
-   thread). `initial-value:0` = the collapsed-progress floor.
-
-   `inherits:true` (NOT false) — the SOTA inheritance-bomb guard is specifically
-   "never write the scalar to `:root`" (a whole-document subtree recalc per frame
-   over 1300+ elements). The scalar is written LOCALLY on the small `.glass-dock`
-   subtree, and its CONSUMERS are DESCENDANTS (`.dock-layers`/`.dock-layer-stack`
-   size + the active pane's child stagger) that read it via inheritance, so it MUST
-   inherit. Writing one inheriting var over a ~10–20-element dock subtree is the
-   exact pattern the prior `--dock-morph-progress` used (on `.dock-layers`); the
-   bomb only fires from a `:root` write, which never happens here. The root-chrome
-   reads (padding/bg/border) sit on the same element it is written to. */
-@property --dock-morph-t {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 0;
-}
-
-/* BI.W-DOCK-SPINE — the ONE plate scalar. `useDockSpring` (W-DOCK-SPRING-UNIFY) writes it
-   per-frame onto the L0 `.dock-plate` element; the plate's `clip-path` visible-extent
-   morph reads it, and NO control-family selector does — so a per-frame write recomputes
-   the plate clip ONLY, not the 10-selector control `:where()` subtree (the A′-4 ~13fps
-   restyle-storm cure). `inherits: false` is LOAD-BEARING here (the opposite of
-   `--dock-morph-t`, which MUST inherit to its descendant readers): the plate scalar has
-   NO descendant reader, so keeping it un-inherited is what scopes the per-frame restyle to
-   the single plate element. `initial-value: 0` = the collapsed-progress floor (the safe
-   resting clip on a non-supporting engine). During the transitional window the plate
-   ALIASES it to the live `--dock-morph-t` (dock/dock.css); SPRING-UNIFY makes it the sole
-   driver + deletes the scalar zoo. */
-@property --dock-t {
-    syntax: "<number>";
-    inherits: false;
-    initial-value: 0;
-}
-
-/* BB.W-DOCK-MORPH-FAMILY (e) — the `@property`-registered dock-scale axis. The
-   dock-scale cascade is `--dock-scale: calc(var(--ui-scale) * var(--dock-local-scale,
-   1))` (tokens/sizing.css). UNregistered, that `calc()` substitutes ONCE at `:root`
-   against the `:root` identity `--dock-local-scale: 1`, so a consumer-scope
-   `--dock-local-scale` override is INHERITED but never RE-EVALUATED — the dock keeps
-   `--dock-scale: calc(1 * 1)` and stays at the unscaled base (the 3rd recurrence of
-   the AX.W55 substitution-vs-inheritance trap; the documented-but-broken `:root`
-   preset). Registering `--dock-local-scale` as an INHERITING `@property <number>`
-   makes a registered inheriting custom property re-substitute PER-ELEMENT, so a
-   `--dock-local-scale` override on ANY dock scope re-evaluates the `calc()` at that
-   scope and threads the whole geometry cascade (box·pad·gap·tab·tile·glyph) down in
-   lockstep — the `:root` preset made real (the `@property --dock-morph-t` house
-   idiom above is the precedent). `--dock-scale` itself is ALSO registered (the
-   derived axis) so its `calc()` re-resolves per-element when `--dock-local-scale`
-   shifts. ADDITIVE ONLY: `initial-value: 1` is the identity, so at the default
-   `--dock-local-scale: 1` the resolved `--dock-scale` is byte-IDENTICAL to HEAD (no
-   rung re-tune); the `@media (pointer: coarse)` re-declare (overflow.css) STAYS the
-   `:root`-equivalent re-resolve, and this registration is the complementary
-   non-`:root`-scope thread. DOCK_SPRING is untouched (this is a token registration,
-   not a clock). */
-@property --dock-local-scale {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 1;
-}
-
-@property --dock-scale {
-    syntax: "<number>";
-    inherits: true;
-    initial-value: 1;
-}
-
-@layer components {
-    :where(
-        .glass-dock,
-        .dock-layer-stack,
-        .dock-layer-item-host,
-        .dock-layer-tab,
-        .dock-icon-button,
-        .dark-mode-toggle-button,
-        .dock-tab-button,
-        .dock-select-trigger,
-        .dock-dropdown-trigger
-    ) {
-        --dock-motion-fast: var(--duration-fast) var(--ease-standard);
-        --dock-motion-standard: var(--duration-normal) var(--ease-standard);
-        /* AT.W6-dock-c — the FLIP-fallback timing. `--dock-resize-spring` (the
-           `--spring-dock` linear()) is the single source curve the native
-           View-Transition path ALSO consumes, so the morph is timing-identical
-           across engines. BA.W-GLASS-CAL Unit 3 — the duration leg re-times off
-           the generic `--duration-normal` (0.3s) onto `--spring-dock-duration`
-           (0.28s, the dock spring's OWN 2%-band envelope settle). */
-        --dock-motion-resize: var(--spring-dock-duration) var(--dock-resize-spring);
-    }
-
-    /* Shared four-state contract — the focus-visible ring + disabled paint are
-       identical across every dock control, so they are expressed ONCE here as a
-       comma group over the control family rather than copied per rule-set. The
-       group keeps full class+pseudo specificity (NOT `:where()`, which would
-       zero the class and let a per-control :hover box-shadow override the focus
-       ring). Per-control transition extensions (the box-shadow fade on
-       focus-visible) stay with their own selectors in dock-controls.css where
-       they differ. */
-    .dock-icon-button:focus-visible,
-    .dock-tab-button:focus-visible,
-    .dock-select-trigger:focus-visible,
-    .dock-dropdown-trigger:focus-visible {
-        /* BI.W-DOCK-CONTROLS (value.js P5) — the ONE ring register. Every dock
-           control reads `--dock-ring` (defaults to `--focus-ring-shadow`, byte-
-           identical), so a consumer retunes every dock ring from one token. */
-        box-shadow: var(--dock-ring);
-        outline: none;
-    }
-
-    /* The ACTIVE SEAT yields to consumer indicator content — a control hosting the
-       consumer's own indicator suppresses the dock ring so that content reads. */
-    .glass-dock [data-ring-yield]:focus-visible {
-        box-shadow: none;
-    }
-
-    .dock-icon-button:disabled,
-    .dock-tab-button:disabled,
-    .dock-select-trigger:disabled,
-    .dock-dropdown-trigger:disabled {
-        opacity: var(--opacity-disabled);
-        cursor: not-allowed;
-    }
-}