@mkbabb/glass-ui 5.0.0 → 7.0.0

package/src/styles/dock/section.css

@@ -1,59 +0,0 @@
-/* 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;
-    }
-}

package/src/styles/dock/shape.css

@@ -1,188 +0,0 @@
-/* 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`. */
-
-/* BI.W-DOCK-SPRING-UNIFY (SU2) — the cartoon-punch channel is RETIRED (clean break,
-   no alias). `@property --dock-punch-stretch`, the `[data-punching]` driver, and the
-   per-child punch counter-scale are DEFINITION-ABSENT: the dock morph carries ONE
-   deformation-free box-size scale off `--dock-size-scale` (the box RESERVES its
-   expanded footprint, the visible size rides `scale: var(--dock-size-scale)` from
-   `transform-origin: center`), and the liquid weight lives in the DOCK spring's own
-   overshoot-recovery tail (DOCK-LADDER §8), not a second parallel punch transition on
-   a wrong clock. The orientation/fission `--stretch` squish is likewise gone with its
-   V↔H-goo owner (W-DOCK-RETIRES) — the scale is a pure size morph, ONE compositor
-   channel, ONE clock. */
-
-@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)
-        );
-    }
-
-    /* ── 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 box-size morph — the deformation-FREE convex-blend scale ─────────────
-       BI.W-DOCK-SPRING-UNIFY (SU2) — the visible box size rides ONE factor:
-       `--dock-size-scale` (layers.css — the ratio-FREE convex blend of the two
-       measure-ONCE endpoints, BOUNDED [0.06, 1] by construction, grown from
-       `transform-origin: center`). The prior 7-factor product (size × `--stretch`
-       squish × `--dock-punch-stretch` cartoon-punch, reciprocated on the cross axis)
-       is RETIRED (clean break): `--stretch` died with its V↔H-goo owner
-       (W-DOCK-RETIRES) and the punch channel is DEFINITION-ABSENT (above). So the
-       scale is a PURE size morph on ONE compositor channel — no reciprocal squish,
-       no cross-axis deformation, no `[data-punching]` co-driver. Scoped to
-       `[data-morphing]` (a morph-transient); at settle the attr clears → `scale:
-       none` over the TRUE box. Horizontal scales the inline axis; vertical the block
-       axis (the cross axis stays 1 — the size morph moves the footprint, it does not
-       pinch). The liquid weight lives in the DOCK spring's own overshoot tail
-       (DOCK-LADDER §8), not a second parallel punch clock. */
-    .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);
-    }
-
-    /* ── BG.W-DOCK-GLYPH-RIGID — RIGID CONTENT over the morphing box ───────────────
-       The box-scale rule above scales the WHOLE `.glass-dock` subtree — including the
-       glyphs — by `--dock-size-scale` on the morph axis. The two direct-child CONTENT
-       containers (`.dock-persistent` + `.dock-layers`) carry the PER-FRAME INVERSE of
-       that size factor so the composited glyph reads its intrinsic 1:1 aspect in every
-       frame while the box scales the footprint. A child multiplies its parent's
-       `scale`, so `1 / max(--dock-size-scale, 0.06)` on the morph axis exactly cancels
-       the box's morph-axis scale (→ 1); the cross axis stays 1 (the box no longer
-       reciprocal-squishes, so the child carries no cross-axis counter — the +48.8%
-       `(--stretch × --dock-punch-stretch)²` residual the deformation zoo introduced is
-       structurally gone with it).
-
-       The `max(…, 0.06)` guard matches the layers.css `--dock-size-scale` clamp floor
-       exactly (a math fence, not a masking fallback). The children default
-       `transform-origin: 50% 50%`, the SAME centre the root scales from, so the inverse
-       un-does the box's outward scale about the shared centroid. SCOPED to
-       `[data-morphing]` (the residual transform lives ONLY mid-morph); at settle the
-       attr clears → both rules drop to `scale: none` over the TRUE box, content
-       byte-rigid, ZERO compositing cost at rest (`proof:no-layout-animation` holds). */
-    .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;
-    }
-
-    /* ── The dock is a LOUD MOTION DRIVER (design.md §L4) ──────────────────────────
-       The dock pins `--motion-weight: 1` on its own scope so the descendant control
-       motion (the glass-atom / btn cartoon-press punch recipes, which read
-       `--motion-weight` for their amplitude) reads at the full loud register inside
-       the dock chrome. The dock's OWN cartoon box-punch is RETIRED (SU2 above —
-       `--dock-punch-stretch` DEFINITION-ABSENT), so this pin now serves ONLY the
-       descendant register; the PRM carve below still collapses the loud weight to 0
-       under reduce (the cards.css / glass-atom.css pattern — descendant motion
-       confirms without the cartoon overshoot). */
-    .glass-dock {
-        --motion-weight: 1;
-    }
-
-    /* ── BG.W-GLASS-CLIP-DISCIPLINE (absorbs W-DOCK-CAST-RETIRE) — the dock cast
-       is RETIRED ───────────────────────────────────────────────────────────────
-       The kinetic `.cartoon-cast` offset-shadow CHILD is GONE from the dock; the
-       dock's elevation is carried by `--shadow-dock` (the omni drop-shadow painted
-       from the dock box, so it escapes the radius correctly + in-gamut) +
-       `--glass-key` (the cel rim) — both KEPT. The shared `.cartoon-cast` base rule
-       (cards.css) + its glass-atom / btn-punch consumers are UNTOUCHED — only the
-       DOCK cast is retired. */
-    @media (prefers-reduced-motion: reduce) {
-        .glass-dock {
-            --motion-weight: 0;
-        }
-    }
-}

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

@@ -1,73 +0,0 @@
-/* dock/shell-regions.css — the dock `#persistent` region + the vertical layer-stack
- * body (AX.W45 D13-a / AZ.W-DOCK-TAXONOMY).
- *
- * Carved from dock/shell.css at BG.W-CLOSEFIX-9SITE to hold the no-god-module 500-line
- * bound. This partial owns the always-present `.dock-persistent` rail beside the
- * expand-on-demand morph region (the iOS Now-Playing / Stage-Manager idiom done
- * STRUCTURALLY) + the vertical dock's column layer-stack. The `.glass-dock` structural
- * skeleton (root + morph aperture + shape plates + position helpers) stays in shell.css.
- *
- * @import-ed by dock.css in cascade order 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 `.dock-persistent` / `.glass-dock.vertical .dock-layer`
- * selectors), so the carve is isomorphic (same layer, same source order → ZERO visual
- * delta). */
-@layer components {
-    /* AX.W45 D13-a — the PERSISTENT region (the iOS Now-Playing / Stage-Manager
-       idiom done STRUCTURALLY). The `#persistent` slot lives in-flow as a root flex
-       SIBLING of the morph-region (`.dock-layers`) in BOTH collapsed AND expanded —
-       NEVER `:inert`, NEVER a crossfade pane, NEVER a `registerGroup` morph target.
-       It is a stable always-present rail beside the expand-on-demand content region,
-       so a consumer keeps a control visible while collapsed WITHOUT hand-duplicating
-       it into both the `#default` and `#collapsed` slots. The region co-laid by the
-       root flex/grid; the morph scalar `--dock-morph-t` co-drives only its chrome
-       (it inherits the root padding/radius morph), it is NOT a morph TARGET. It holds
-       steady (no jitter) while the morph-region's aperture animates on the ONE
-       spring. `align-items: center` keeps it on the dock's centerline; the
-       `--dock-layer-gap` separates it from the morph region (same rhythm both
-       orientations). */
-    .dock-persistent {
-        display: flex;
-        align-items: center;
-        flex-shrink: 0;
-        gap: var(--dock-layer-gap, 0.375rem);
-    }
-
-    .glass-dock:not(.vertical) .dock-persistent {
-        flex-direction: row;
-    }
-
-    .glass-dock.vertical .dock-persistent {
-        flex-direction: column;
-        align-items: stretch;
-    }
-
-    /* The persistent region + the morph region share the dock's gap rhythm. The
-       region renders only when the consumer authors a `#persistent` slot
-       (GlassDock.vue guards it with `v-if="$slots.persistent"`), so a dock with no
-       persistent controls is byte-identical to before (no empty flex item). */
-    .glass-dock:not(.vertical) .dock-persistent + .dock-layers {
-        margin-inline-start: var(--dock-layer-gap, 0.375rem);
-    }
-
-    .glass-dock.vertical .dock-persistent + .dock-layers {
-        margin-block-start: var(--dock-layer-gap, 0.375rem);
-    }
-
-    /* AZ.W-DOCK-TAXONOMY (move 2) — the VERTICAL dock's layer panes lay their content
-       out as a COLUMN. The dock body is now the SAME orientation-agnostic
-       `.dock-layers` full/summary morph pair the horizontal dock uses (the prior
-       static `.dock-layer--vertical-body` single-stack RETIRED — a vertical dock now
-       collapses its block axis too). The base `.dock-layer { display: flex;
-       align-items: center }` is row by default; here the full/summary panes flip to a
-       stretched column stack carrying the dock's `--dock-layer-gap` rhythm, so
-       authored item groups + `<DockSeparator>` rules read with the correct vertical
-       cadence. The block-axis morph aperture is owned by `.dock-layers` (layers.css —
-       `.glass-dock.vertical[data-morphing] .dock-layers` morphs `block-size`). */
-    .glass-dock.vertical .dock-layer {
-        flex-direction: column;
-        align-items: stretch;
-        gap: var(--dock-layer-gap, 0.375rem);
-        min-width: 0;
-    }
-}