@mkbabb/glass-ui 4.2.0 → 6.0.0

package/src/styles/select.css

@@ -1,201 +0,0 @@
-/*
- * select.css — the Select content collision-bound, pre-compiled (BA.W-EMISSION).
- *
- * THE DEFECT (BA-VJS-A2-WO1 / valuejs-fold A-2): SelectContent.vue authored its
- * collision-bound as a Tailwind ARBITRARY-BRACKET utility
- *   [max-height:var(--reka-popper-available-height,60dvh)]
- * which is correct in SOURCE but compiles ONLY into a `dist/*.js` render-function
- * chunk no consumer content-scan reaches (and the P9 emitComponentUtilities
- * safelist rejects fully-arbitrary bracket tokens by construction). So in every
- * consumer the bound NEVER painted — `getComputedStyle(content).maxHeight === "none"`
- * — and a 16-item dropdown rendered 745px tall, overflowing a 900px viewport by
- * 125px (the value.js U-DROPDOWN capture, the binding RED evidence).
- *
- * THE FIX: move the bound to a PRECOMPILED rule that ships in `dist/glass-ui.css`
- * regardless of consumer JIT reach — it is a plain attribute-selector rule, not a
- * Tailwind utility, so it always emits. The cap is the kf donor's default
- * `min(24rem, 60dvh)` (kf design-idioms.css `--easing-dropdown-max-h`; the U8
- * bounded-scroll reference), TIGHTENED by reka's measured
- * `--reka-popper-available-height` on a short viewport via the inner `min()`.
- * `overflow-y: auto` (already on the content via the CVA base) gives the inner
- * scroll. The behaviour is identical to the authored class — it now SHIPS.
- *
- * --select-content-max-h is the ONE retint knob (a consumer widens/narrows the cap
- * by overriding it on any ancestor). The default folds reka's available-height in:
- * when reka reports a height (popper measured), the bound is the MIN of that and
- * the 24rem/60dvh ceiling, so the panel never exceeds the viewport AND never grows
- * past the comfortable ceiling.
- */
-
-:root {
-    /* The comfortable ceiling — the kf donor default. */
-    --select-content-max-h: min(24rem, 60dvh);
-}
-
-[data-slot="select-content"] {
-    /* The collision-bound: the comfortable ceiling, tightened by reka's measured
-       available height on a short viewport. `--reka-popper-available-height` is
-       written by reka-ui's popper-positioner; on a tall viewport it exceeds the
-       ceiling (so the ceiling wins) and on a short one it clamps the panel to the
-       space below the trigger (so the panel bottoms inside the viewport). When reka
-       has not yet measured, the fallback is the ceiling alone. */
-    max-height: min(
-        var(--select-content-max-h),
-        var(--reka-popper-available-height, var(--select-content-max-h))
-    );
-    /* The inner-scroll affordance ships with the bound (the CVA base also sets
-       overflow-y-auto; restated here so the bound + scroll travel together as one
-       precompiled contract). */
-    overflow-y: auto;
-}
-
-/* ════════════════════════════════════════════════════════════════════════
-   BD.W-SELECT-WELL (P4 select-forms) — the welling WARM-GLASS listbox + the
-   keyed warm control EDGE. The Select is the REFERENCE consumer of the shared
-   field + capsule + accent + reveal union — every leg COMPOSES a shipped/sibling
-   register, ZERO new component, ZERO fork.
-
-   The three legs that live HERE (the consumer side):
-     · .glass-control-edge — the keyed two-stop warm rim every form control reads
-       so it has a DEFINED edge over the field (fixes the trigger box-shadow:none
-       cream-on-cream melt). Composes the SHIPPED `--glass-rim-top`/`--glass-rim-
-       bottom` keyed pair (the `--glass-key` upper-right cel key) — NOT a select-
-       private border, NOT a re-minted rim.
-     · the menu plate WARM FLOOR + α-drop — the menu reads the SHIPPED warm-capsule
-       floor (`--glass-capsule-warm` at `--glass-capsule-warm-floor`, the proven
-       meanChroma ≥ 0.02 source) so it is warm-cream even over a flat page, AND the
-       plate α drops so the warmed source + the portal field TRANSMIT.
-     · the portal warm FIELD — a clipped menu-local layer carrying the route's
-       `--field-h` (re-emitted on the portal root) so the menu transmits its route
-       identity even where the page field is faint behind the body plate.
-   ════════════════════════════════════════════════════════════════════════ */
-@layer components {
-    /* ── .glass-control-edge — the keyed warm control rim (the cream-on-cream fix) ──
-       The form controls read `.control-surface` / `.input-pill` (control-surfaces.css)
-       which carry a border + fill but `box-shadow: none` — so over a warm cream field
-       the trigger's 1.5px border melts and the control reads as a flat cream smudge.
-       This register adds the SHIPPED keyed two-stop directional rim (the bright top/
-       right catch-light + the faint warm bottom/left under-shadow, `--glass-key` upper-
-       right) so the control reads as a lifted glass plate with a defined warm edge over
-       the field. ONE register, ≥8 consumers (Select trigger + Input/Textarea/NumberField
-       pill + Checkbox/Radio + Switch track + Combobox anchor) — the DRY bar cleared by
-       construction. Composed (not re-declared): the rim is the SAME `--glass-rim-top`/
-       `--glass-rim-bottom` pair `.glass-capsule` reads, so `--glass-key` re-points BOTH
-       the capsule and the control edge from ONE handle (cel coherence). */
-    .glass-control-edge {
-        box-shadow:
-            var(--glass-rim-top),
-            var(--glass-rim-bottom);
-    }
-    /* Compose the keyed edge UNDER any control-owned ring/shadow: a control with its
-       OWN box-shadow (the Switch thumb, the focus ring on the pill) layers its shadow
-       FIRST, then the rim — the rim is the resting silhouette, the ring is the focus
-       overlay (the pill's `:focus-visible` box-shadow wins by source order + its own
-       rule). The rim travels with the control on the SHARED bezier (the pill/control-
-       surface already transition box-shadow on `--ease-standard`). */
-
-    /* ── The menu plate WARM FLOOR + α-drop (the un-gray amplifier) ──
-       The floating recipe (`.glass-floating`, ladder.css) composes
-       `color-mix(--glass-bg-floating, --glass-tint-source --glass-tint-strength)`,
-       and `--glass-tint-strength` floors at 0% at calm rest — so the menu plate is
-       near-gray-flat. RE-POINT the menu fill to compose the SHIPPED warm-capsule floor
-       (`--glass-capsule-warm` at `--glass-capsule-warm-floor`, the proven meanChroma
-       ≥ 0.02 source — the SAME token the tab capsule reads, DRY) ON TOP of the floating
-       tint, AND drop the plate α so the warmed source + the portal field TRANSMIT and
-       give real L-variance (the menu is warm GLASS, never an opaque cream slab). The
-       six-layer rim/blur/shadow composite is UNTOUCHED — only the FILL admit changes. */
-    [data-slot="select-content"],
-    [data-slot="combobox-list"] {
-        /* The α-drop seam: a consumer can re-solidify via `--select-plate-alpha: 1`.
-           Default 0.90 (light) drops the ~0.80α floating base to ~0.72 effective (the
-           amendment's transmit target) so the warmed source + the portal field show
-           through while the plate keeps body. The dark arm keeps more body (see .dark
-           below). The combobox list is the SAME overlay-family warm-glass plate
-           (DRY — one warm-floor register for both portalled pickers). */
-        --select-plate-alpha: 0.90;
-        background: color-mix(
-            in oklab,
-            color-mix(
-                in oklab,
-                var(--glass-bg-floating-tinted, var(--glass-bg-floating)),
-                var(--glass-capsule-warm) var(--glass-capsule-warm-floor)
-            ),
-            transparent calc((1 - var(--select-plate-alpha)) * 100%)
-        );
-        /* the cartoon weight — the SHIPPED `--shadow-cartoon-lg` warm cel stamp UNDER
-           the floating elevation so the panel reads as a physical card lifted off the
-           page. Composed onto the floating box-shadow stack via the plate's own rule
-           (the floating tier's `--glass-material-rim` + shadows stay; this ADDS the
-           cartoon under-stamp). Static, PRM-immune. */
-        box-shadow:
-            var(--glass-material-rim),
-            var(--glass-under-shadow-vivid),
-            var(--glass-shadow-floating),
-            var(--shadow-cartoon-lg);
-    }
-    .dark [data-slot="select-content"],
-    .dark [data-slot="combobox-list"] {
-        /* dark glass needs more body — the warm field reads as a glow band, not a wash
-           lost in near-black; keep the fill nearly solid so the dark menu has presence.
-           PLAIN per-mode arm (not a light-dark() fragment — the inset-shadow trap, and
-           the box-shadow above carries no inset leg but the discipline holds). */
-        --select-plate-alpha: 0.94;
-    }
-
-    /* ── .glass-field-portal — the portal-local warm field (route identity) ──
-       The menu portals to <body>, OUTSIDE the route's field, so its `backdrop-filter`
-       has nothing warm to transmit. A clipped menu-local layer BEHIND the plate (z -1,
-       NO backdrop-filter on it — glass-cannot-sample-glass avoided by construction)
-       paints a 3-stop warm spine keyed to the route's `--field-h` (re-emitted on the
-       portal root via `data-field-palette` → `--field-h`). `inset: 0` (clipped INSIDE
-       — the blur bends it THROUGH the plate as real L-variance, NOT an `inset:-20%`
-       halo leaking around the box). Defaults to `--field-h: 48` (forms terracotta)
-       when the route does not re-emit, so a bare Select still reads warm. */
-    .glass-field-portal {
-        position: relative;
-    }
-    .glass-field-portal::before {
-        content: "";
-        position: absolute;
-        inset: 0;
-        z-index: -1;
-        pointer-events: none;
-        border-radius: inherit;
-        background:
-            radial-gradient(70% 60% at 24% 22%,
-                oklch(0.92 0.08 var(--field-h, 48) / 0.55), transparent 72%),
-            radial-gradient(64% 58% at 82% 80%,
-                oklch(0.88 0.07 calc(var(--field-h, 48) + 18) / 0.50), transparent 70%),
-            radial-gradient(60% 62% at 60% 40%,
-                oklch(0.90 0.06 calc(var(--field-h, 48) - 14) / 0.48), transparent 74%);
-    }
-    /* DARK arm (PLAIN per-mode, not :global()/light-dark()) — the dark field stops lift
-       to a real glow band (oklch L ~0.22–0.30, higher chroma) so the field-thesis is met
-       in dark, not a wash lost in near-black. */
-    .dark .glass-field-portal::before {
-        background:
-            radial-gradient(70% 60% at 24% 22%,
-                oklch(0.30 0.10 var(--field-h, 48) / 0.55), transparent 72%),
-            radial-gradient(64% 58% at 82% 80%,
-                oklch(0.26 0.09 calc(var(--field-h, 48) + 18) / 0.50), transparent 70%),
-            radial-gradient(60% 62% at 60% 40%,
-                oklch(0.28 0.08 calc(var(--field-h, 48) - 14) / 0.48), transparent 74%);
-    }
-    /* honest-degraded arm — engines without oklch() get an hsl warm spine, never gray. */
-    @supports not (color: oklch(0.9 0.08 48)) {
-        .glass-field-portal::before {
-            background: radial-gradient(70% 60% at 24% 22%,
-                hsl(var(--field-h, 48) 60% 88% / 0.5), transparent 72%);
-        }
-        .dark .glass-field-portal::before {
-            background: radial-gradient(70% 60% at 24% 22%,
-                hsl(var(--field-h, 48) 45% 26% / 0.55), transparent 72%);
-        }
-    }
-}
-
-/* ── PRM is colour-static here — the field + floor + edge + cartoon shadow are PAINT,
-   not motion, so they REMAIN under `prefers-reduced-motion: reduce` (un-gray and
-   selection-legibility need no motion). The reveal/pour/chevron motion legs are
-   carved in their own home recipes (reveal.css / menu.css) — this consumer file
-   introduces no motion to gate. */

package/src/styles/utilities/animate.css

@@ -1,29 +0,0 @@
-/* utilities/animate.css
-   BB.W-LIQUID-REVEAL — the popover/dropdown shared enter recipe RETIRED.
-   @import-ed by utilities.css in cascade order. See
-   docs/precepts/design-idioms.md §cohesion-aware partials. */
-
-/* ── RETIRED at BB.W-LIQUID-REVEAL (clean break, no alias — BB inv-7 no-legacy) ──
- *
- * `@utility popover-animate` (the tw-animate-css fixed-bezier zoom-95 + fade-0 enter)
- * AND `@utility slide-in-from-side` (the data-side directional slide) are DELETED.
- * They were the generic cubic-bezier zoom-95 over the same `--duration-normal` wall
- * clock for every surface — "presses spring, reveals don't" (the §6/W-MOTION-CANON
- * half-applied enter). The SPRING-CLOCKED LIQUID-ENTER recipe `.glass-reveal`
- * (src/styles/glass/reveal.css) REPLACES both:
- *   - the scale+fade ride `--spring-snappy` + `--spring-snappy-duration` (the
- *     W-GLASS-CAL Unit 3 per-spring clock) with the coupled `filter: blur(4px)→0`
- *     light-bending decongest (the iOS-27 bloom);
- *   - the directional `slide-in-from-side` folds onto `.glass-reveal`'s `data-side`
- *     compositor `translate` leg (on the SAME spring clock).
- *
- * The ≥8 reka portaled overlays (Dialog/Popover/Tooltip/HoverCard/DropdownMenu/
- * ContextMenu/Combobox/Select) compose `.glass-reveal` directly; the
- * `useLiquidReveal` JS leaf (composables/motion/useLiquidReveal.ts) is the
- * source-rect bloom REFINEMENT (the dialog-from-button / dock-from-pill case).
- *
- * Do NOT re-add an unlayered `@utility popover-animate`/`slide-in-from-side` — the
- * recipe is `@layer components` `.glass-reveal`; an unlayered utility would win the
- * cascade over it (the AZ dock-rail `@layer`-loses-to-utility trap). Machine-locked
- * by proof:liquid-reveal R3 (the negative — no enrolled surface retains
- * popover-animate). */