@mkbabb/glass-ui 3.13.0 → 4.0.0

package/src/styles/icon-chip.css

@@ -0,0 +1,149 @@
+/* icon-chip.css — BA.W-ICON-CHIP: the <IconChip> section-color pop primitive.
+ *
+ * The library's SINGLE section-color icon-chip recipe — the brand's ONE color
+ * event per surface (the one-color-event rule, AZ.W-SUFFUSE / proof:suffuse):
+ * a `color-mix(… 25%, transparent)` backplate under a full-chroma glyph, walked
+ * over the 13-stop `--section-color-N` ramp (or a complete `tone` token). It
+ * OWNS the recipe the four inline `:style` pastes (icons.vue / empty-states.vue
+ * / auth-shell.vue / the MetricCell glyph-tint) collapsed onto, so the recipe
+ * lives ONCE and proof:suffuse asserts against one component, not N pastes.
+ *
+ * THE INTERPOLATION SPACE — `in srgb` (DELIBERATE, recorded). The backplate is
+ * a foreground-over-transparent overlay at a hand-tuned fixed 25% α stop — the
+ * SAME shape as the `--surface-tint-*` brand family, which CLAUDE.md fixes at
+ * `in srgb` (the brand-calibrated mix; switching the space shifts the resting
+ * α off its hand-set value). The chip is byte-faithful to the reference paste
+ * register (the binding W7 π target: stop-0 bg `color(srgb 0.915 0.484 0.671 /
+ * 0.25)`), so it preserves `in srgb` — the same brand-overlay path, NOT the
+ * glass-tint `in oklab` perceptual-mix path. (The spec text says `in oklab`;
+ * the resolution preserves the reference-faithful `in srgb` so the pop register
+ * does not shift — recorded in PROGRESS / the DELTA.)
+ */
+
+:root {
+    /* The chip≤glyph proportion (d2, structural). The diameter floors at
+       `glyph × ratio` so the plate can NEVER paint under the glyph — a
+       consumer's tiny `size` is clamped. The default reproduces the reference
+       48/22 ≈ 2.18 register. Token-first: a consumer retunes without a
+       component edit. */
+    --icon-chip-glyph-ratio: 2.18;
+    /* The duotone fill α — a low-alpha fill of the same hue UNDER the
+       full-chroma stroke (the iOS/Material filled-tonal move). Mono-hue. */
+    --icon-chip-duotone-fill: 18%;
+    /* The hover-bloom backplate lift (25% → ~35%) + the glow-ring spread. */
+    --icon-chip-bloom-mix: 35%;
+    --icon-chip-bloom-glow: 28%;
+    /* The reveal stagger step (consumed by the vReveal `--d` index). */
+    --icon-chip-reveal-step: 60ms;
+}
+
+.icon-chip {
+    /* The diameter FLOORS at glyph × ratio — the d2 proportion enforced in the
+       component, not a per-consumer hope. */
+    --_icon-chip-floor: calc(
+        var(--icon-chip-glyph-size, 22px) * var(--icon-chip-glyph-ratio)
+    );
+    inline-size: max(var(--icon-chip-size, 48px), var(--_icon-chip-floor));
+    block-size: max(var(--icon-chip-size, 48px), var(--_icon-chip-floor));
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-pill, 9999px);
+    /* The backplate — the reference recipe (`in srgb`, 25% α stop). */
+    background-color: color-mix(
+        in srgb,
+        var(--icon-chip-plate-color, var(--muted)) 25%,
+        transparent
+    );
+    color: var(--icon-chip-event-color, var(--muted-foreground));
+    /* The §6 easing doctrine — surface props (bg/box-shadow) on the bezier
+       standard ease; the bloom is the smooth-glass register, NOT a sparkle. */
+    transition:
+        background-color var(--duration-fast, 150ms) var(--ease-standard),
+        box-shadow var(--duration-fast, 150ms) var(--ease-standard);
+}
+
+.icon-chip__glyph {
+    display: block;
+    flex-shrink: 0;
+}
+
+/* ── The bare register (the MetricCell leading-glyph tint — no backplate) ──── */
+.icon-chip--bare {
+    inline-size: auto;
+    block-size: auto;
+    background-color: transparent;
+    border-radius: 0;
+}
+
+/* ── The duotone axis — a low-alpha fill of the same hue UNDER the stroke ──── */
+/* Lucide glyphs bake `fill: none` on the SVG root; CSS wins over the
+   presentation attribute, so the `[data-duotone] svg` rule reaches the inner
+   paths (they inherit `fill` from the root). Mono-hue, proportion-safe. */
+.icon-chip--duotone[data-duotone] svg,
+.icon-chip[data-duotone] .icon-chip__glyph {
+    fill: color-mix(
+        in srgb,
+        var(--icon-chip-event-color, var(--muted-foreground))
+            var(--icon-chip-duotone-fill),
+        transparent
+    );
+}
+
+/* ── The hover-bloom axis — the SMOOTH GLASS register (NO disco) ───────────── */
+/* The backplate mix lifts, a soft same-hue glow ring appears, the glyph stroke
+   firms. DISCO FENCE: composes NO sparkle-sweep / btn-audacious / disco-grain —
+   the W-GLASS-CAL-retired-disco's calm replacement register only. */
+@media (hover: hover) {
+    .icon-chip--bloom:hover {
+        background-color: color-mix(
+            in srgb,
+            var(--icon-chip-plate-color, var(--muted)) var(--icon-chip-bloom-mix),
+            transparent
+        );
+        box-shadow: 0 0 0 0.25rem
+            color-mix(
+                in srgb,
+                var(--icon-chip-event-color, var(--muted-foreground))
+                    var(--icon-chip-bloom-glow),
+                transparent
+            );
+    }
+    /* The glyph stroke firms on the chip's own hover. */
+    .icon-chip--bloom:hover .icon-chip__glyph {
+        stroke-width: 2;
+    }
+}
+
+/* ── The entrance-reveal axis — composes the shipped vReveal directive ─────── */
+/* The directive writes `[data-reveal]` + `--d` (the stagger index); this rule
+   reacts ONLY on an opted-in chip (`.icon-chip--reveal`) so a non-reveal chip's
+   inert `[data-reveal]` hook never animates. PRM-gated. */
+@media (prefers-reduced-motion: no-preference) {
+    .icon-chip--reveal[data-reveal] {
+        animation: icon-chip-reveal var(--duration-medium, 320ms)
+            var(--ease-standard) both;
+        animation-delay: calc(var(--d, 0) * var(--icon-chip-reveal-step));
+    }
+}
+
+@keyframes icon-chip-reveal {
+    from {
+        opacity: 0;
+        transform: scale(0.85) translateY(0.25rem);
+    }
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+/* ── The deform axes collapse under reduced motion (the PRM guard) ─────────── */
+@media (prefers-reduced-motion: reduce) {
+    .icon-chip--bloom:hover .icon-chip__glyph {
+        stroke-width: inherit;
+    }
+    .icon-chip--reveal[data-reveal] {
+        animation: none;
+    }
+}

package/src/styles/index.css

@@ -94,6 +94,15 @@
  *                              cascades into these control rules.
  *   7. cards.css             — .cartoon-surface, .paper-texture.
  *                              Component utility layer.
+ *  7a. feedback-tone.css     — the ONE shared tinted-glass tone register
+ *                              (BA.W-FEEDBACK-TONE): `.feedback-tone` +
+ *                              `.feedback-tone-{success,warning,info,destructive}`
+ *                              tint a glass rung a bounded % toward a house tone
+ *                              token on the EXISTING color-mix(in oklab, …) seam.
+ *                              Toast / Notification / Alert consume it (the three
+ *                              tone maps collapse). Loads after cards.css (it reads
+ *                              the same `--glass-bg-*` rung tokens cards.css/the
+ *                              ladder mint) and before floating-panel.css.
  *   8. floating-panel.css    — .floating-panel + .floating-panel-item.
  *                              Component utility layer.
  *   9. transitions.css       — Vue <Transition> classes (fade, fade-slide,
@@ -114,14 +123,26 @@
  *                              K W6 + Q.W3 Lane E), rainbow-vivid +
  *                              rainbow-pastel. Consumes earlier animations +
  *                              tokens.
+ *  11a. menu.css             — BA.W-MENU-GLASS the glass MENU-ROW + MENU-SECTION
+ *                              register. AFTER utilities.css so `.glass-menu-row`'s
+ *                              `@layer components` hover/highlight rules source-
+ *                              order-win over `.interactive-item:hover` (same layer
+ *                              + specificity) — the cascade-trap-safe placement.
  *  12. instrument-chassis.css — P-tranche component CSS (chassis bezel +
  *                              groove dividers). Loaded after utilities so
  *                              component-local recipes can override.
  *  13. hover-popover.css     — V.W3 popover-animation grammar.
  *  14. drawer.css            — AN.W3 detented bottom-sheet grammar (glass
  *                             sheet surface + peek handle + snap-stop rules).
+ *  15. segmented-tabs.css    — AX.W53 SegmentedTabs overflow/indicator grammar.
+ *  16. select.css            — BA.W-EMISSION the PRECOMPILED Select content
+ *                             collision-bound (the `[data-slot="select-content"]`
+ *                             max-height rule) — moved off the dead arbitrary-
+ *                             bracket CVA class so the bound SHIPS in dist/glass-ui.css
+ *                             regardless of consumer JIT reach. A structural utility
+ *                             never depends on a content-scan; locked by proof:emission.
  *
- * Per-package component CSS lives at (12)-(14) (loaded after utilities so
+ * Per-package component CSS lives at (12)-(16) (loaded after utilities so
  * component-local recipes can override). New per-package CSS files append
  * to that tail.
  */
@@ -135,18 +156,59 @@
 @import "./dock.css";
 @import "./dock-controls.css";
 @import "./cards.css";
+@import "./feedback-tone.css";
 @import "./floating-panel.css";
 @import "./transitions.css";
 @import "./animations.css";
 @import "./scroll-driven.css";
 @import "./view-transition.css";
 @import "./utilities.css";
+/* BA.W-MENU-GLASS — the glass menu-row + menu-section register. @import-ed AFTER
+   utilities.css (NOT the floating/transitions band the spec hinted) so the
+   `.glass-menu-row` `@layer components` hover/highlight rules source-order-WIN
+   over `.interactive-item:hover` (utilities/base.css, same layer + specificity) —
+   the cascade-trap-safe placement, mirroring glass/surface-axis.css's "import
+   AFTER ladder.css" discipline. */
+@import "./menu.css";
 @import "./configurator.css";
 @import "./instrument-chassis.css";
 @import "./hover-popover.css";
 @import "./drawer.css";
 @import "./segmented-tabs.css";
+@import "./select.css";
+/* BA.W-ICON-CHIP — the <IconChip> section-color pop recipe + the three axes
+   (duotone/bloom/reveal). A component partial; the token arms (--section-color-N
+   / --muted) auto-flip under .dark so the chip is mode-robust by construction. */
+@import "./icon-chip.css";
 
-/* Ensure consumer's Tailwind scans glass-ui components for utility classes
-   (e.g. CVA button variants like text-destructive-foreground) */
-@source "../components";
+/* Ensure Tailwind scans glass-ui's compiled component templates for the utility
+   classes they emit (CVA variant classes like text-destructive-foreground,
+   layout utilities like h-full/shrink-0).
+
+   BA.W-EMISSION — re-pointed from the DEAD components-mirror glob (the prior
+   `../components` target). That glob resolved correctly in glass-ui's OWN build
+   (`src/styles/index.css` → `src/components` carries the real `.vue` source), but the
+   SHIPPED dist copy of this file (`dist/styles/index.css`) resolved `../components` to
+   `dist/components/` — a
+   directory that carries ONLY `.d.ts` mirror files (zero `.js`, zero `.vue`). The
+   compiled render-functions live FLAT at `dist/*.js`. So in every consumer that
+   re-imported this `@source` line, Tailwind scanned an empty dir and glass-ui's own
+   arbitrary utilities silently died (the P9 / valuejs-fold register-B class).
+
+   `../*.js` reaches the compiled render-functions PRECISELY in the SHIPPED context:
+   in dist it is `dist/*.js` (the 150+ flat compiled chunks that carry glass-ui's
+   utility class strings — the surface the dead `../components` mirror NEVER held).
+   In glass-ui's OWN source build it is `src/*.js` (empty — glass-ui's own components
+   compile their CSS through vite, not this `@source`), so the directive is a no-op
+   in the own-build and never scans the `src/` shader/`.ts` tree (a bare `../` glob
+   tripped Tailwind's dev candidate-extractor on the shader template strings —
+   `Missing opening (`). This directive is a BACKSTOP for a consumer that imports
+   this exact cascade file — the PRIMARY self-emission path is
+   `vite.style-assets.ts emitComponentUtilities` (P9), which ships glass-ui's
+   component-utility RULES build-independently into `dist/styles/components.css`.
+   Fully-arbitrary BRACKET utilities (`[max-height:…]`, `[--slider-track-height:…]`)
+   are rejected by that path's `classish` token filter AND are not reliably reachable
+   by a JIT scan, so every STRUCTURAL bracket utility (geometry/bounds/sizing) is
+   pre-compiled into shipped CSS instead — never load-bearing on any consumer's
+   content-scan reach. Locked by proof:emission. */
+@source "../*.js";

package/src/styles/instrument-chassis.css

@@ -146,6 +146,48 @@
         display: none;
     }
 
+    /* ─────────────────────────────────────────────────────────────
+       BA.W-ATLAS-RECONCILE C-3 — structure variant (SILVER MILLED-METAL register)
+
+       The cool polished-steel housing read: the engraved-bezel `::before` stroke
+       AND the structural twin-line grooves re-point from the warm-cream
+       `--surface-tint-*` default onto the `--silver` quad (gold's cool mirror).
+       The chassis reads as an INDUSTRIAL precision-instrument panel — the
+       cool-metal twin of the warm-gold "complete"-phase affirmation.
+
+       The phase cascade (`[data-phase="…"]`) stays ORTHOGONAL — a `structure`
+       chassis still retints its phase fills on `data-phase`; only the
+       structure-metal recipe (bezel + grooves) forks here. Consumer #2 of the
+       silver quad (the atlas's structure surface is consumer #1).
+
+       The silver is the W-NO-GRAY NAMED cool-neutral exception (a brand METAL
+       identity, not a neutral — its very-low chroma reads as milled steel, the
+       cool hue distinguishes it from the warm glass plate).
+       ───────────────────────────────────────────────────────────── */
+    .instrument-chassis[data-variant="structure"] {
+        /* The milled-panel edge: the chassis border lifts off the resting glass
+           edge onto a hairline silver structure stroke. */
+        border-color: color-mix(in oklab, var(--color-silver-dark) 55%, transparent);
+    }
+
+    /* The engraved bezel re-tints to the cool silver catch (the polished sleeve
+       reads as steel, not warm-cream). */
+    .instrument-chassis[data-variant="structure"]::before {
+        border-color: color-mix(in oklab, var(--color-silver-light) 60%, transparent);
+    }
+    .dark .instrument-chassis[data-variant="structure"]::before {
+        border-color: color-mix(in oklab, var(--color-silver) 40%, transparent);
+    }
+
+    /* The structural grooves re-point to the silver twin-line: the catch reads
+       the light silver, the under-shadow the dark silver — a milled seam, not the
+       default warm twin-line. ONE re-point at the variant root; every
+       `<ChassisDivider>` inside a structure chassis inherits it. */
+    .instrument-chassis[data-variant="structure"] {
+        --twin-line-catch: color-mix(in oklab, var(--color-silver-light) 50%, transparent);
+        --twin-line-shadow: color-mix(in oklab, var(--color-silver-dark) 40%, transparent);
+    }
+
     /* Phase-color cascade — single property, full chassis-wide retint.
        `--phase-color-label` mirrors the cascade through the WCAG companion
        tokens (AC.W6c F1.V-04). The label register falls back to the canvas

package/src/styles/menu.css

@@ -0,0 +1,127 @@
+/* menu.css — the glass MENU-ROW + MENU-SECTION register (BA.W-MENU-GLASS).
+
+   The shared `menuItemVariants` CVA's `surface=glass` arm (the DEFAULT, glass-
+   first canon AX.W54) composes `.glass-menu-row`; all 13 menu/picker-family SFCs
+   inherit the glassy hover-lift register in ONE edit (no per-SFC menu-row CSS).
+
+   ── The cascade-trap pre-empt (the AZ dock-rail `@layer`-loses-to-utility trap) ──
+   `.interactive-item:hover` (utilities/base.css, `@layer components`) paints a flat
+   `color-mix(--accent 50%)` hover background. An UNLAYERED Tailwind `hover:bg-accent`
+   utility would win over BOTH (the trap). The CVA's glass arm therefore DROPS the
+   flat-accent utilities entirely — so the only background-painters on a glass row are
+   the `@layer components` `.interactive-item:hover` rule and these `.glass-menu-row`
+   rules. This file is `@import`-ed AFTER `utilities.css` in `index.css`, so at equal
+   specificity (0-1-1 for the `:hover`/`[data-highlighted]` selectors) and equal layer
+   (`components`) the recipe wins by SOURCE ORDER over `.interactive-item:hover` —
+   exactly the discipline `glass/surface-axis.css` uses ("@import-ed AFTER ladder.css
+   so the attr rules win by source order"). NEVER re-add an unlayered flat-accent
+   utility to the glass arm — it would re-introduce the trap.
+
+   ── The element-level tint discipline (substitution-vs-inheritance) ──
+   The row reads the ELEMENT-LEVEL glass-quiet oklab tint
+   `color-mix(in oklab, var(--glass-bg-quiet), var(--glass-tint-source) var(--glass-tint-strength))`
+   — the SAME seam `glass/ladder.css:58` / `glass/surfaces.css:19` compose — NOT the
+   pre-baked `--glass-bg-quiet` raw token. So the row darkens-over-light (W55 bright
+   bucket / `--glass-tint-strength` lift) AND lifts-over-dark per W-DARK-MATERIAL's
+   tint arm, in lockstep with every other glass surface. */
+@layer components {
+    /* ── .glass-menu-row — the glassy hover-lift menu/picker item ──────────────
+       Every visual axis reads a `--menu-row-*` knob so a consumer retunes via a
+       `:root` override. The REST state is transparent (the row sits on the
+       container's own `glass-floating` plate — DropdownMenuContent /
+       ContextMenuContent are already `glass-floating rounded-panel`); the glass
+       PLATE materializes on hover/focus/highlight. */
+    .glass-menu-row {
+        /* The glass-quiet plate the row paints AT THE ELEMENT on hover/highlight
+           (the element-level oklab tint — see header). Overridable. */
+        --menu-row-bg: color-mix(
+            in oklab,
+            var(--glass-bg-quiet),
+            var(--glass-tint-source) var(--glass-tint-strength)
+        );
+        /* The PRM-gated hover-lift travel (zeroed under reduce, below). */
+        --menu-row-lift: -1px;
+        /* The 44px WCAG-2.5.5 touch floor (the row never reflows below it). The
+           base is the CVA's own py rhythm; the clamp guarantees the floor. Reads
+           `--touch-target` (the 44px token declared UNCONDITIONALLY at :root —
+           offsets-sizing.css), NOT `--control-floor` (which is declared ONLY inside
+           the `@media (pointer: coarse)` block, so on a FINE pointer `var(--control-
+           floor)` resolves to the guaranteed-invalid initial value → 0px in the
+           max(), and the floor silently vanished — the live π caught the 36px row).
+           The `2.75rem` literal fallback covers a consumer who unsets the token. */
+        min-block-size: max(2rem, var(--touch-target, 2.75rem));
+
+        /* The lift transform rides the §6 spring register (`--spring-smooth`); the
+           surface props (background) ride the bezier `--ease-standard` via the
+           `.interactive-item` base transition (already declared there). The
+           explicit transform leg here pairs the spring with the lift. */
+        transition: translate var(--duration-fast) var(--spring-smooth);
+        translate: 0 0;
+    }
+
+    /* Hover / keyboard-focus / reka internal-highlight / sub-trigger-open all
+       reach the SAME glass register (Combobox/Command/Select parity — the CVA
+       routes all three input modes through `data-[highlighted]`). */
+    .glass-menu-row:hover:not([data-disabled]),
+    .glass-menu-row:focus:not([data-disabled]),
+    .glass-menu-row[data-highlighted]:not([data-disabled]),
+    .glass-menu-row[data-state="open"]:not([data-disabled]) {
+        background: var(--menu-row-bg);
+        color: var(--accent-foreground);
+        translate: 0 var(--menu-row-lift);
+    }
+
+    /* ── .glass-menu-section — the mono section-label + hairline row-group ──────
+       The "section caption + hairline over a row group" recipe (the slides gear
+       hand-built ~120 lines of). Folds onto `typography.css` `.section-label` (the
+       mono / √φ-caption / small-caps register) for the caption and `--border-
+       hairline` for the divider. Tokenized on `--menu-section-*` so a consumer
+       retunes via a `:root` override. ≥2 consumers: the library menu defaults
+       (the section caption a DropdownMenuLabel composes) + the in-repo demo menu
+       story (Unit 2 adoption); the slides DeckSettings is the named foreign
+       downstream consumer. */
+    .glass-menu-section {
+        /* The caption register (mono / small-caps / quiet ink) — the same
+           vocabulary `.section-label` carries, exposed as overridable knobs. */
+        --menu-section-font: var(--font-mono);
+        --menu-section-size: var(--type-caption);
+        --menu-section-color: var(--muted-foreground);
+        --menu-section-tracking: var(--type-tracking-caps);
+        /* The hairline divider over the group (the catch-light + under-shadow
+           pair). Default-off feather; the rule below paints it. */
+        --menu-section-hairline: var(--border-hairline);
+        /* The block rhythm above the group (a section is a deliberate break). */
+        --menu-section-gap: 0.375rem;
+
+        display: block;
+        margin-block-start: var(--menu-section-gap);
+        padding-block-start: var(--menu-section-gap);
+        /* The hairline reads as a top divider over the group via box-shadow (the
+           house hairline pattern — a whisper, not a hard 1px rule). */
+        box-shadow: var(--menu-section-hairline);
+    }
+
+    /* The section CAPTION — a mono small-caps label. Composes onto the label
+       element the section recipe wraps (or a nested `.glass-menu-section-label`);
+       the demo + library menu labels read this caption register. */
+    .glass-menu-section-label,
+    .glass-menu-section > [data-menu-section-label] {
+        font-family: var(--menu-section-font);
+        font-size: var(--menu-section-size);
+        color: var(--menu-section-color);
+        text-transform: uppercase;
+        letter-spacing: var(--menu-section-tracking);
+    }
+}
+
+/* ── PRM gate — no deform/lift under reduce ───────────────────────────────────
+   The hover-lift `translate` is the only motion the row introduces; under
+   `prefers-reduced-motion: reduce` it collapses to the identity (0) and the
+   transition is removed (the surface bg cross-fade is not motion). The glass
+   plate still materializes on hover — only the geometric lift is suppressed. */
+@media (prefers-reduced-motion: reduce) {
+    .glass-menu-row {
+        --menu-row-lift: 0px;
+        transition: none;
+    }
+}