@mkbabb/glass-ui 0.3.0 → 2.1.0

package/src/styles/glass.css

@@ -1,49 +1,80 @@
 /* Glass utilities — glassmorphism surface classes referencing --glass-* tokens */
 
 @layer components {
-    /* ── Four-tier surface classes (visual only, no geometry) ── */
-
-    .glass-subtle {
+    /* ── Five-tier surface ladder (v0.8.0; visual only, no geometry) ──
+       Tier semantics, alpha-monotonic per R3-spec §A:
+         wash      ~0.30α  + light blur      (was `subtle`)
+         quiet     ~0.50α  + medium blur     (the missing rung)
+         resting   ~0.65α  + canonical blur  (was `default`; the speedtest plate)
+         floating  ~0.80α  + heavier blur    (was `elevated`)
+         overlay   ~0.95α  + heaviest blur   (NEW; modal-over-modal) */
+
+    /* The five-rung surface ladder declares the unprefixed
+       `backdrop-filter` only. Lightning CSS / autoprefixer in the
+       consumer's pipeline emits the `-webkit-` legacy form when
+       browserslist targets demand it. Authoring both forms manually
+       caused Lightning CSS in Tailwind v4 to dedup-and-keep-prefixed,
+       which modern Chromium then dropped from the CSSOM (the prefixed
+       alias is parser-rejected post-Chrome 113). Single-source-of-truth
+       authorship lets the build pipeline deliver the right matrix. */
+    .glass-wash {
+        position: relative;
+        background: var(--glass-bg-wash);
+        backdrop-filter: var(--glass-blur-wash);
+        border: 1px solid var(--glass-border-wash);
+        box-shadow: var(--glass-shadow-wash);
+    }
+
+    /* AL-W10 SLIM under-shadow wiring (tokens.css §AL-W10 SLIM —
+       UNDER-SHADOW recipe rungs). Each tier composes its canonical
+       iOS Liquid Glass under-shadow (a 0.5px dark hairline along the
+       bottom edge reading as glass thickness) as a NON-INSET layer
+       PREPENDED to the existing `--glass-shadow-*` recipe — the under-
+       shadow lays the floor; the existing shadow stack lays the lift.
+         quiet   → `--glass-under-shadow-quiet`   (0 2px 8px -1px α0.04)
+         resting → `--glass-under-shadow-default` (0 4px 16px -2px α0.08)
+         floating→ `--glass-under-shadow-vivid`   (0 8px 32px -4px α0.12)
+       `.glass-wash` is sub-perceptual; `.glass-overlay` is modal-heavy
+       — neither composes an under-shadow rung (Y4/Y6/Y7 SLIM retention).
+       Spine tier wires its own rung at instrument-chassis.css. */
+    .glass-quiet {
         position: relative;
-        background: var(--glass-bg-subtle);
-        backdrop-filter: var(--glass-blur-subtle);
-        -webkit-backdrop-filter: var(--glass-blur-subtle);
-        border: 1px solid var(--glass-border-subtle);
-        box-shadow: var(--glass-highlight);
+        background: var(--glass-bg-quiet);
+        backdrop-filter: var(--glass-blur-quiet);
+        border: 1px solid var(--glass-border-quiet);
+        box-shadow: var(--glass-under-shadow-quiet), var(--glass-shadow-quiet);
     }
 
-    .glass-default {
+    .glass-resting {
         position: relative;
-        background: var(--glass-bg-default);
-        backdrop-filter: var(--glass-blur-default);
-        -webkit-backdrop-filter: var(--glass-blur-default);
-        border: 1px solid var(--glass-border-default);
-        box-shadow: var(--glass-highlight);
+        background: var(--glass-bg-resting);
+        backdrop-filter: var(--glass-blur-resting);
+        border: 1px solid var(--glass-border-resting);
+        box-shadow: var(--glass-under-shadow-default), var(--glass-shadow-resting);
     }
 
-    .glass-medium {
+    .glass-floating {
         position: relative;
-        background: var(--glass-bg-medium);
-        backdrop-filter: var(--glass-blur-medium);
-        -webkit-backdrop-filter: var(--glass-blur-medium);
-        border: 1px solid var(--glass-border-medium);
-        box-shadow: var(--glass-highlight);
+        background: var(--glass-bg-floating);
+        backdrop-filter: var(--glass-blur-floating);
+        border: 1px solid var(--glass-border-floating);
+        box-shadow: var(--glass-under-shadow-vivid), var(--glass-shadow-floating);
     }
 
-    .glass-elevated {
+    .glass-overlay {
         position: relative;
-        background: var(--glass-bg-elevated);
-        backdrop-filter: var(--glass-blur-elevated);
-        -webkit-backdrop-filter: var(--glass-blur-elevated);
-        border: 1px solid var(--glass-border-elevated);
-        box-shadow: var(--glass-highlight);
+        background: var(--glass-bg-overlay);
+        backdrop-filter: var(--glass-blur-overlay);
+        border: 1px solid var(--glass-border-overlay);
+        box-shadow: var(--glass-shadow-overlay);
     }
 
     /* Grain noise overlay — reuses paper texture SVG, no extra assets */
-    .glass-subtle::after,
-    .glass-default::after,
-    .glass-medium::after,
-    .glass-elevated::after {
+    .glass-wash::after,
+    .glass-quiet::after,
+    .glass-resting::after,
+    .glass-floating::after,
+    .glass-overlay::after {
         content: '';
         position: absolute;
         inset: 0;
@@ -56,34 +87,26 @@
         mix-blend-mode: overlay;
     }
 
-    .dark .glass-subtle::after,
-    .dark .glass-default::after,
-    .dark .glass-medium::after,
-    .dark .glass-elevated::after {
+    .dark .glass-wash::after,
+    .dark .glass-quiet::after,
+    .dark .glass-resting::after,
+    .dark .glass-floating::after,
+    .dark .glass-overlay::after {
         mix-blend-mode: soft-light;
     }
 
     /* ── Convenience shorthands (tier + shape) ── */
 
+    /* Static surface utility — no hover lift, no transition.
+       Interactive cards live in <Card> (which owns its own hover composition)
+       or in components that explicitly opt into a hover variant. */
     .glass-card {
         position: relative;
-        background: var(--glass-bg-default);
-        backdrop-filter: var(--glass-blur-default);
-        -webkit-backdrop-filter: var(--glass-blur-default);
-        border: 1px solid var(--glass-border-default);
+        background: var(--glass-bg-quiet);
+        backdrop-filter: var(--glass-blur-quiet);
+        border: 1px solid var(--glass-border-quiet);
         border-radius: var(--radius-card);
-        box-shadow: var(--glass-shadow-default);
-        contain: layout style;
-    }
-
-    .glass-pill {
-        position: relative;
-        background: var(--glass-bg-default);
-        backdrop-filter: var(--glass-blur-default);
-        -webkit-backdrop-filter: var(--glass-blur-default);
-        border: 1px solid var(--glass-border-default);
-        border-radius: var(--radius-pill);
-        box-shadow: var(--glass-shadow-subtle);
+        box-shadow: var(--shadow-card);
         contain: layout style;
     }
 
@@ -95,20 +118,20 @@
         width: var(--size-icon-btn);
         height: var(--size-icon-btn);
         border-radius: var(--radius-pill);
-        border: 1.5px solid var(--glass-border-subtle);
-        background: var(--glass-bg-subtle);
-        backdrop-filter: var(--glass-blur-subtle);
+        border: 1.5px solid var(--glass-border-wash);
+        background: var(--glass-bg-wash);
+        backdrop-filter: var(--glass-blur-wash);
         color: var(--muted-foreground);
         transition:
-            background var(--duration-fast) ease,
-            border-color var(--duration-fast) ease,
-            color var(--duration-fast) ease,
+            background var(--duration-fast) var(--ease-standard),
+            border-color var(--duration-fast) var(--ease-standard),
+            color var(--duration-fast) var(--ease-standard),
             transform var(--duration-normal) var(--spring-snappy);
     }
 
     .glass-btn:hover:not(:disabled) {
         background: color-mix(in srgb, var(--background) 85%, transparent);
-        border-color: color-mix(in srgb, var(--foreground) 20%, transparent);
+        border-color: var(--surface-tint-22);
         color: var(--foreground);
         transform: scale(var(--scale-hover));
     }
@@ -118,8 +141,8 @@
     }
 
     .glass-btn:focus-visible {
-        outline: var(--focus-ring-width) solid var(--ring);
-        outline-offset: var(--focus-ring-width);
+        outline: none;
+        box-shadow: var(--focus-ring-shadow);
     }
 
     .glass-btn:disabled {
@@ -130,8 +153,8 @@
 
     .glass-btn.is-active,
     .glass-btn[aria-pressed="true"] {
-        background: color-mix(in srgb, var(--foreground) 10%, transparent);
-        border-color: color-mix(in srgb, var(--foreground) 25%, transparent);
+        background: var(--surface-tint-10);
+        border-color: var(--surface-tint-25);
         color: var(--foreground);
     }
 
@@ -143,7 +166,13 @@
         border-radius: var(--radius-pill);
         padding: 0.5rem 1rem;
         font-size: 1rem;
-        transition: all var(--duration-fast) var(--ease-standard);
+        transition:
+            background-color var(--duration-fast) var(--ease-standard),
+            border-color var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard),
+            color var(--duration-fast) var(--ease-standard),
+            opacity var(--duration-fast) var(--ease-standard),
+            transform var(--duration-fast) var(--ease-standard);
     }
 
     .btn-pill > * {
@@ -151,48 +180,10 @@
     }
 
 
-    .btn-pill:active:not(:disabled) {
-        transform: scale(0.96);
-    }
-
     .btn-pill:disabled {
-        opacity: 0.4;
+        opacity: var(--opacity-disabled);
         cursor: not-allowed;
-    }
-
-    .btn-pill[aria-pressed="true"] {
-        background: color-mix(in srgb, var(--primary) 15%, transparent);
-        border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
-    }
-
-    .btn-pill-accent {
-        background: var(--th-accent-opaque, var(--primary));
-        color: var(--foreground);
-    }
-
-    .btn-pill-accent:hover:not(:disabled) {
-        opacity: 0.9;
-    }
-
-    .btn-pill-ghost {
-        background: transparent;
-        color: color-mix(in srgb, var(--foreground) 70%, transparent);
-    }
-
-    .btn-pill-ghost:hover:not(:disabled) {
-        background: color-mix(in srgb, var(--foreground) 8%, transparent);
-        color: var(--foreground);
-    }
-
-    .btn-pill-glass {
-        background: var(--glass-bg-subtle);
-        backdrop-filter: var(--glass-blur-subtle);
-        border: 1px solid var(--glass-border-default);
-        color: var(--foreground);
-    }
-
-    .btn-pill-glass:hover:not(:disabled) {
-        box-shadow: var(--glass-shadow-default);
+        pointer-events: none;
     }
 
     /* ── Pill input ───────────────────────────────── */
@@ -201,17 +192,22 @@
 
         height: 2.5rem;
         border-radius: var(--radius-pill);
-        border: 1.5px solid var(--glass-border-subtle);
-        background: var(--glass-bg-default);
-        backdrop-filter: var(--glass-blur-subtle);
+        border: 1.5px solid var(--glass-border-wash);
+        background: var(--glass-bg-quiet);
+        backdrop-filter: var(--glass-blur-wash);
         padding: 0 1rem;
         font-size: 1rem;
         color: var(--foreground);
-        transition: all var(--duration-fast) var(--ease-standard);
+        transition:
+            background-color var(--duration-fast) var(--ease-standard),
+            border-color var(--duration-fast) var(--ease-standard),
+            box-shadow var(--duration-fast) var(--ease-standard),
+            color var(--duration-fast) var(--ease-standard),
+            opacity var(--duration-fast) var(--ease-standard);
     }
 
     .input-pill::placeholder {
-        color: color-mix(in srgb, var(--foreground) 35%, transparent);
+        color: var(--surface-tint-35);
     }
 
     .input-pill:focus {
@@ -229,42 +225,49 @@
 /* ── Accessibility: reduced transparency ────────── */
 @media (prefers-reduced-transparency: reduce) {
     :root {
-        --glass-opacity-subtle: 1;
-        --glass-opacity-default: 1;
-        --glass-opacity-medium: 1;
-        --glass-opacity-elevated: 1;
-        --glass-blur-subtle: none;
-        --glass-blur-default: none;
-        --glass-blur-medium: none;
-        --glass-blur-elevated: none;
+        --glass-opacity-wash: 1;
+        --glass-opacity-quiet: 1;
+        --glass-opacity-resting: 1;
+        --glass-opacity-floating: 1;
+        --glass-opacity-overlay: 1;
+        --glass-blur-wash: none;
+        --glass-blur-quiet: none;
+        --glass-blur-resting: none;
+        --glass-blur-floating: none;
+        --glass-blur-overlay: none;
+        --glass-blur-dock: none;
         --glass-grain-opacity: 0;
-        --glass-highlight: none;
+        --glass-highlight: 0 0 0 0 transparent;
     }
 }
 
 /* ── Accessibility: high contrast ───────────────── */
 @media (prefers-contrast: more) {
     :root {
-        --glass-opacity-subtle: 0.88;
-        --glass-opacity-default: 0.92;
-        --glass-opacity-medium: 0.96;
-        --glass-opacity-elevated: 1;
+        --glass-opacity-wash: 0.85;
+        --glass-opacity-quiet: 0.90;
+        --glass-opacity-resting: 0.94;
+        --glass-opacity-floating: 0.98;
+        --glass-opacity-overlay: 1;
     }
 }
 
 /* ── @supports fallbacks for non-backdrop-filter browsers ── */
 @layer components {
     @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
-        .glass-subtle {
+        .glass-wash {
+            background: color-mix(in srgb, var(--card) 80%, transparent);
+        }
+        .glass-quiet {
             background: color-mix(in srgb, var(--card) 88%, transparent);
         }
-        .glass-default {
-            background: color-mix(in srgb, var(--card) 92%, transparent);
+        .glass-resting {
+            background: color-mix(in srgb, var(--card) 94%, transparent);
         }
-        .glass-medium {
-            background: color-mix(in srgb, var(--card) 96%, transparent);
+        .glass-floating {
+            background: color-mix(in srgb, var(--card) 98%, transparent);
         }
-        .glass-elevated {
+        .glass-overlay {
             background: var(--card);
         }
         .glass-btn {

package/src/styles/glyph-face.css

@@ -0,0 +1,92 @@
+/* glyph-face.css — three-layer composition for <GlyphFace>.
+ *
+ * Per W2.7 §19 and Q.W3 §F2 + §F8. Wraps a slotted glyph (lucide stroke
+ * or DiscoGlyph SVG) with a phase-tinted radial backplate (visible only
+ * when [data-active="true"]) and a 165° linear-gradient catch-light cap.
+ * The slotted silhouette stays `currentColor` — Vignelli-clean — while
+ * the disco punch lives in the surrounding layers.
+ *
+ * Q.W3.A.1 inversion: when no silhouette resolves, the cap renders
+ * nothing (rather than a wrapper-rectangle fallback). Consumers passing
+ * `silhouette` continue to consume `clip-path: path(var(--gf-silhouette))`;
+ * the lucide consumer sites in ActionCluster + SettingsCog publish via
+ * the silhouette table from `@src/components/speedtest/icons/lucide-silhouettes.ts`,
+ * and DiscoGlyph hands its silhouette upward via provide/inject for
+ * disco wrappers. The fail-safe is now "no cap" not "wrong cap".
+ *
+ * Q.W3.A.2 default raise: --gf-cap-strength 0.35 → 0.55, mix-blend-mode
+ * overlay → screen. `screen` composes correctly against the translucent
+ * dock substrates (`--card` at 50–60% opacity); `overlay` collapses
+ * there because its contrast lift requires an opaque underlay. Consumers
+ * needing the metallic-overlay punch declare `mix-blend-mode: overlay`
+ * via class or `--gf-cap-blend` override.
+ *
+ * Self-contained sheet; no token additions beyond what's already in
+ * `tokens.css`. Consumers may override the cap blend mode and backplate
+ * radius with the documented `--gf-*` custom properties.
+ */
+
+@layer components {
+    .glyph-face {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        isolation: isolate;
+        --gf-tint: transparent;
+        --gf-cap-strength: 0.55;
+        --gf-cap-blend: screen;
+        --gf-cap-radius: 50%;
+    }
+
+    .glyph-face-backplate {
+        position: absolute;
+        inset: -25%;
+        border-radius: 50%;
+        background: radial-gradient(
+            ellipse at 30% 30%,
+            var(--gf-tint) 0%,
+            transparent 70%
+        );
+        opacity: 0;
+        transition: opacity var(--duration-fast) var(--spring-snappy);
+        z-index: -1;
+        pointer-events: none;
+    }
+
+    .glyph-face[data-active="true"] .glyph-face-backplate {
+        opacity: 1;
+    }
+
+    /* Cap fail-safe: by default render nothing. The cap only paints
+       when --gf-silhouette resolves (via prop or provide/inject from
+       a DiscoGlyph descendant). This closes the wrapper-rectangle
+       leak the lucide consumers in ActionCluster + SettingsCog hit
+       under the prior opt-in path. */
+    .glyph-face-cap {
+        position: absolute;
+        inset: 0;
+        background: transparent;
+        pointer-events: none;
+        mix-blend-mode: var(--gf-cap-blend);
+    }
+
+    .glyph-face[style*="--gf-silhouette"] .glyph-face-cap {
+        background: linear-gradient(
+            165deg,
+            rgba(255, 255, 255, var(--gf-cap-strength, 0.55)) 0%,
+            transparent 40%
+        );
+        clip-path: var(--gf-silhouette);
+    }
+
+    .dark .glyph-face {
+        --gf-cap-strength: 0.32;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .glyph-face-backplate {
+            transition: none;
+        }
+    }
+}

package/src/styles/hover-popover.css

@@ -0,0 +1,44 @@
+/* hover-popover.css — substrate sheet for <HoverPopover>.
+ *
+ * Lands as the A5 §10 row 4 carry-forward: IconTooltip's tooltip register
+ * was too quiet for the chassis-tier dock consumers (SettingsCog,
+ * ActionCluster). This sheet ships a popover-tier substrate (glass +
+ * border + radius) sized for label-shaped content; richer slot content
+ * inherits the substrate without extra props.
+ *
+ * The collision-avoidance + side-flip cascade rests on reka-ui's
+ * HoverCard primitives; this sheet is purely visual.
+ */
+
+@layer components {
+    .hover-popover-panel {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.375rem;
+        padding-block: 0.375rem;
+        padding-inline: 0.625rem;
+        border-radius: var(--radius-lg, 0.5rem);
+        background: var(--glass-bg-floating, var(--popover, white));
+        backdrop-filter: var(--glass-blur-floating);
+        border: 1px solid var(--glass-border-floating, var(--border, transparent));
+        color: var(--popover-foreground, var(--foreground));
+        box-shadow: var(--glass-shadow-floating, var(--shadow-md));
+        font-size: var(--type-small, 0.8125rem);
+        line-height: 1.2;
+        max-width: 16rem;
+        white-space: normal;
+        outline: none;
+    }
+
+    .hover-popover-label {
+        display: inline-block;
+    }
+}
+
+/* The data-state animation grammar canonicalises onto `.popover-animate`
+   (V.W3.T9 / A5 §5.8). Authors compose `class="hover-popover-panel popover-animate"`
+   on the panel root so the canonical fade + zoom-95 entry/exit grammar
+   replaces the bespoke `hover-popover-in/out` keyframes that lived here.
+   The `prefers-reduced-motion` carve is handled at the canonical site
+   (`utilities.css`'s reduced-motion block) so it cascades to all four
+   popover-animation consumers automatically. */

package/src/styles/index.css

@@ -4,22 +4,104 @@
  * Import this in your project's main CSS file:
  *   @import "tailwindcss";
  *   @import "tw-animate-css";
- *   @import "@mkbabb/glass-ui/styles";
+ *   @import "@mkbabb/glass-ui/styles";        (token cascade + SFC scoped CSS)
+ *   @import "@mkbabb/glass-ui/styles/fonts";  (OFL woff2 corpus, loaded once)
  *   (then add your project-specific token overrides locally)
+ *
+ * AN.W1 — the single `@mkbabb/glass-ui/styles` import resolves the COMPLETE
+ * stylesheet: this @import cascade PLUS the per-component `<style scoped>`
+ * payload (Aurora grid layering, Progress/Slider/Notification/… scoped rules).
+ * The build folds the SFC bundle (`dist/glass-ui.css`) into the dist copy of
+ * this file (vite.config.ts `publishStyleAssets`), so a consumer never needs
+ * a second `@import "@mkbabb/glass-ui/styles.css"` line. The `./styles.css`
+ * export stays reachable as a transparent SFC-only entry (NOT a back-compat
+ * alias) for a cascade-free consumer.
+ */
+
+/*
+ * FONT PAYLOAD SPLIT (AM-W1-α). The payload-bearing @font-face faces
+ * (Plus Jakarta Sans + Fira Code woff2, base64-inlined at publish into
+ * ~99 KB gzipped) are NOT imported here — they live in `fonts.css`,
+ * reachable via the `@mkbabb/glass-ui/styles/fonts` export. This keeps the
+ * critical first-paint `./styles` entry free of the font binary. The
+ * calibrated `local()` fallback faces (with Capsize metric overrides) DO
+ * stay on this critical path inside typography.css — they paint during the
+ * `font-display: optional`/`swap` window with zero CLS, so the deferred
+ * real-face import never causes a layout shift.
+ *
+ * NOTE: Font @import url(...) lines are NOT issued from here (and never
+ * were) — doing so would put them after @import "tailwindcss" in the
+ * consumer's output, which violates the CSS spec (and some bundlers then
+ * drop them). The split above is by separate export subpath, not @import.
  */
 
-/* Order matters: tokens first, then theme (for @theme), then component layers */
+/*
+ * Cascade order — load order is load-bearing. Each layer references the one
+ * above it via CSS custom properties or selector cascade; reordering breaks
+ * fallbacks. Documented at L.W2 Lane B per Rε §B.5.1.
+ *
+ *   1. tokens.css            — CSS custom properties (color, easing, glass,
+ *                              paper, shadow, surface-tint rungs). Source-of-
+ *                              record for every visual axis.
+ *   2. typography.css        — golden-ratio scale (√φ); semantic type classes.
+ *                              Pure values, no token consumption.
+ *   3. theme.css             — @theme block (Tailwind aliases). Reads tokens
+ *                              from (1) so MUST come after them; defines the
+ *                              `dark` variant selector consumed by the cascade.
+ *   4. glass.css             — .glass-{wash,quiet,resting,floating,overlay}
+ *                              5-rung ladder + .glass-card / -pill / -btn.
+ *                              Consumes tokens (1) + theme aliases (3).
+ *   5. paper.css             — paper underpaint + grain overlay utilities.
+ *                              Pairs with (4) for paper-on-glass compositions.
+ *   6. dock.css              — .dock-icon-btn, .dock-select-trigger, etc.
+ *                              Component utility layer; consumes (1) + (3).
+ *   7. cards.css             — .cartoon-surface, .paper-texture.
+ *                              Component utility layer.
+ *   8. floating-panel.css    — .floating-panel + .floating-panel-item.
+ *                              Component utility layer.
+ *   9. transitions.css       — Vue <Transition> classes (fade, fade-slide,
+ *                              pop, dialog-scale, dropdown, tab-fade).
+ *  10. animations.css        — @keyframes for components consumed via
+ *                              `animation:` properties in (9) and component
+ *                              <style> blocks.
+ *  11. utilities.css         — focus-ring, btn-audacious + btn-interactive
+ *                              (press cluster; K W6 + Q.W3 Lane E),
+ *                              rainbow-vivid + rainbow-pastel. Consumes earlier
+ *                              animations + tokens.
+ *  12. instrument-chassis.css — P-tranche component CSS (chassis bezel +
+ *                              groove dividers). Loaded after utilities so
+ *                              component-local recipes can override.
+ *  13. instrument-rail.css   — AK-W2-α cockpit-ratio rail (flex-basis 1/φ²
+ *                              binding + bezel hairlines + sibling divider
+ *                              rule). Composes alongside instrument-chassis;
+ *                              shares the bezel-line twin-pixel idiom.
+ *  14. glyph-face.css        — P-tranche component CSS (cap + backplate).
+ *  15. disco-glyph.css       — P-tranche component CSS (layered fills).
+ *  16. hover-popover.css     — V.W3 popover-animation grammar.
+ *  17. drawer.css            — AN.W3 detented bottom-sheet grammar (glass
+ *                             sheet surface + peek handle + snap-stop rules).
+ *
+ * Per-package component CSS lives at (12)-(17) (loaded after utilities so
+ * component-local recipes can override). New per-package CSS files append
+ * to that tail.
+ */
 @import "./tokens.css";
 @import "./typography.css";
 @import "./theme.css";
 @import "./glass.css";
+@import "./paper.css";
 @import "./dock.css";
 @import "./cards.css";
-@import "./scroll-pane.css";
 @import "./floating-panel.css";
 @import "./transitions.css";
 @import "./animations.css";
 @import "./utilities.css";
+@import "./instrument-chassis.css";
+@import "./instrument-rail.css";
+@import "./glyph-face.css";
+@import "./disco-glyph.css";
+@import "./hover-popover.css";
+@import "./drawer.css";
 
 /* Ensure consumer's Tailwind scans glass-ui components for utility classes
    (e.g. CVA button variants like text-destructive-foreground) */