@mkbabb/glass-ui 4.2.0 → 5.0.0

package/dist/styles/dock-controls.css

@@ -1,92 +1 @@
-/* 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%);
-    }
-}
+@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 { .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); } :where( .dock-icon-button, .dock-tab-button, .dock-select-trigger, .dock-dropdown-trigger ) { --glass-specular-size: var(--dock-control-specular-size, 22%); } }

package/dist/styles/dock.css

@@ -1,173 +1 @@
-/* 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";
-@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";
-@import "./dock/overflow.css";
-@import "./dock/stack-rail.css";
-@import "./dock/section.css";
-@import "./dock/morph-bridge.css";
-/* BE.W-DOCK-FISSION — the 1→N stretch-and-snap goo bridge (the sibling of morph-bridge's
-   1→1 V↔H crossfade; the per-seam `--neck-t` neck STRETCH→THIN→SNAP-BACK recoil + the
-   jubilance ripple/splash FLOOR). @import-ed into the LIBRARY cascade beside morph-bridge
-   so a consumer importing `@mkbabb/glass-ui/styles` gets the fission delights — the recipe
-   is `v-for`-shaped on `.dock-fission-piece`, compositor-only, PRM-removed, Safari-safe
-   (the REGULAR `filter: url()`, never backdrop-filter). The demo's island FACE/layout
-   (`.liquid-island-*`) stays demo-only (liquid-morph.css); this file owns only the
-   `.dock-fission-bridge`/`.dock-fission-piece` BEHAVIOR. */
-@import "./dock/fission-bridge.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 around the byte-untouched morph-bridge metaball;
-   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;
-}
-
-/* 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 {
-        box-shadow: var(--focus-ring-shadow);
-        outline: none;
-    }
-
-    .dock-icon-button:disabled,
-    .dock-tab-button:disabled,
-    .dock-select-trigger:disabled,
-    .dock-dropdown-trigger:disabled {
-        opacity: var(--opacity-disabled);
-        cursor: not-allowed;
-    }
-}
+@import "./dock/shell.css"; @import "./dock/shell-regions.css"; @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"; @import "./dock/crossfade.css"; @import "./dock/overflow.css"; @import "./dock/fisheye.css"; @import "./dock/popover.css"; @import "./dock/section.css"; @import "./dock/cta-seat.css"; @import "./dock/search.css"; @property --dock-morph-t { syntax: "<number>"; inherits: true; initial-value: 0; } @property --dock-t { syntax: "<number>"; inherits: false; initial-value: 0; } @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); --dock-motion-resize: var(--spring-dock-duration) var(--dock-resize-spring); } .dock-icon-button:focus-visible, .dock-tab-button:focus-visible, .dock-select-trigger:focus-visible, .dock-dropdown-trigger:focus-visible { box-shadow: var(--dock-ring); outline: none; } .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; } }

package/dist/styles/draw-in.css

@@ -0,0 +1 @@
+:root { --draw-in-duration: calc(0.52s * var(--motion-tempo)); } @keyframes draw-rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes draw-rule-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } .draw-rule, [data-draw-in] { transform-origin: var(--draw-in-origin, left); transform: scaleX(1); } @media (prefers-reduced-motion: no-preference) { .draw-rule:not(.draw-rule--wipe), [data-draw-in]:not([data-draw-in="wipe"]) { transform: scaleX(0); animation: draw-rule-in var(--draw-in-duration) var(--ease-out-expo) var(--draw-in-delay, 0s) both; } .draw-rule--wipe, [data-draw-in="wipe"] { transform: none; clip-path: inset(0 100% 0 0); animation: draw-rule-wipe var(--draw-in-duration) var(--ease-out-expo) var(--draw-in-delay, 0s) both; } }