@mkbabb/glass-ui 4.1.0 → 5.0.0

package/dist/styles/index.css

@@ -1,249 +1 @@
-/*
- * @mkbabb/glass-ui — Unified design system styles
- *
- * Import this in your project's main CSS file:
- *   @import "tailwindcss";
- *   @import "tw-animate-css";
- *   @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.
- */
-
-/*
- * 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.
- *
- * WHERE each idiom LIVES (the localized design-idiom home, complementing the
- * load-ORDER below): see docs/precepts/design-idioms.md — @theme aliases live
- * in theme.css, @utility recipes in their cohesion-domain file, the
- * cohesion-aware @import-partial carve rule, and the var-in-arbitrary syntax.
- * tokens.css / glass.css / utilities.css are thin @import ROOTS over cohesive
- * tokens/* · glass/* · utilities/* partials (each < 500 lines, in cascade order
- * — the dock.css precedent, AX.W06; generalized AY.W-CSS1). The carve is
- * cascade-isomorphic: the partials @import in the recorded cascade order so this
- * load order is preserved bit-for-bit.
- *
- *   1. tokens.css            — thin @import root over tokens/{scheme-motion,
- *                              color-radius,shadow,glass,offsets-sizing,
- *                              scale-paper,light-dark,dark-arm,property-regs}.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             — thin @import root over glass/{material,ladder,
- *                              surfaces,progress-rail,squircle,a11y-fallback}.css.
- *                              .glass-{wash,quiet,resting,floating,overlay}
- *                              5-rung ladder + .glass-card / -pill / -btn.
- *                              Consumes tokens (1) + theme aliases (3).
- *  4a. glass-specular-track.css — the pointer-anchored MOVING specular rung
- *                              (AV.W15). A `.glass-specular-track` opt-in paints
- *                              a masked radial catch-light tracking the pointer
- *                              (@property-animated, reduced-motion-static, var()
- *                              fallback) + the @supports-gated refraction
- *                              garnish. Loads after glass.css so it composes
- *                              over the glass tiers.
- *   5. paper.css             — paper underpaint + grain overlay utilities.
- *                              Pairs with (4) for paper-on-glass compositions.
- *   6. dock.css              — the dock CORE: the `@property --dock-morph-t`
- *                              registration, the shared cross-control four-state
- *                              comma-groups, and the `@import`s of the cohesive
- *                              `dock/*.css` partials (shell · morph · density ·
- *                              layers · layer-group · overflow — AX.W06 carved
- *                              the 1762-line god-module into single-axis partials,
- *                              each < 500 lines, all in the SAME @layer components
- *                              so the cascade is isomorphic). Component utility
- *                              layer; consumes (1) + (3).
- *  6b. dock-controls.css     — the five dock CONTROL families carved out of
- *                              dock.css (AU.W8b.3): .dock-icon-button,
- *                              .dark-mode-toggle-button, .dock-tab-button + tiers,
- *                              .dock-select-trigger / .dock-dropdown-trigger, and
- *                              the coarse-pointer touch floor. Same @layer
- *                              components; MUST load directly after dock.css so
- *                              the shared :where()/comma-group contract in (6)
- *                              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,
- *                              pop, dialog-scale, dropdown, tab-fade).
- *  10. animations.css        — @keyframes for components consumed via
- *                              `animation:` properties in (9) and component
- *                              <style> blocks. Includes the §TOP-LAYER
- *                              `@starting-style` entry/exit grammar (AQ.W5).
- *  10a. scroll-driven.css    — native scroll-driven recipes (.scroll-progress
- *                              + [data-scroll-reveal]); the `@supports`-gated
- *                              primary over the JS-composable fallback (AQ.W5).
- *  10a'. scroll-choreography.css — the SOTA scroll-CHOREOGRAPHY register
- *                              (.scroll-build page-build / .scroll-cascade
- *                              section-cascade / .scroll-pin scroll-pinned + the
- *                              native .smooth-scroll opt-in) on the native
- *                              scroll()/view()/timeline-scope substrate; NO
- *                              Lenis/GSAP dep (BB.W-SCROLL-MOTION).
- *  10a''. scroll-chrome.css  — BC.W-SCROLL-CHROME the scroll-driven floating-
- *                              CHROME collapse recipe (.scroll-chrome reads
- *                              --chrome-collapse-t for the compositor shrink/
- *                              quiet/shadow-lift; PERSISTENT-by-default, crisp
- *                              blur, never-invisible quiet, PRM-discrete). The
- *                              useScrollChrome JS machine owns the snap + ramp.
- *  10b. view-transition.css  — the `.gl-list-item` View-Transitions group
- *                              recipe + `--vt-*` axes (AQ.W5; the
- *                              `useViewTransition` substrate's CSS half).
- *  11. utilities.css         — thin @import root over utilities/{animate,base,
- *                              components,btn,a11y-overrides}.css. focus-ring,
- *                              btn-audacious + btn-interactive (press cluster;
- *                              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)-(16) (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 "./glass-specular-track.css";
-@import "./glass-refract.css";
-@import "./paper.css";
-@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 "./scroll-choreography.css";
-@import "./scroll-chrome.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";
-/* BB.W-BORDER-PROGRESS — progress IS the element's border: the masked-conic ring
-   consumption (the @property reg lives in tokens/property-regs.css §18). A
-   component partial; the conic + the radius-following mask-composite + the coverage
-   masks + the PRM milestone-pulse bracket. */
-@import "./border-progress.css";
-
-/* BC.W-AX-COMPLETION-SEAL — the hero-scale earned-GOLD completion seal: a one-shot
-   gold-draw mark (a `stroke-dashoffset` wipe on the 4 `@property` motion tokens
-   `--seal-draw`/`--seal-scale`/`--seal-glint`/`--seal-ink`, registered in
-   tokens/property-regs.css §18). The ink reads the W-PHASE-PALETTE earned-gold
-   register; the glint composes the W-AX-METAL-GLOW catch-light. One-shot, PRM-gated,
-   compositor-only — the feedback-surface partial. */
-@import "./completion-seal.css";
-
-/* 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. */
-/* AN.W1 — SFC scoped component CSS (folded so a single
-   @import "@mkbabb/glass-ui/styles" carries cascade + components) */
-@import "../glass-ui.css";
-
-/* P9 — component-utility rules (rounded-panel, text-muted-foreground,
-   …) shipped build-independently so a bare consumer paints them. */
-@import "./components.css";
-
-@source "../*.js";
+@import "./tokens.css"; @import "./typography.css"; @import "./theme.css"; @import "./glass.css"; @import "./glass-specular-track.css"; @import "./glass-refract.css"; @import "./paper.css"; @import "./dock.css"; @import "./dock-controls.css"; @import "./cards.css"; @import "./feedback-tone.css"; @import "./transitions.css"; @import "./animations.css"; @import "./viz-reveal.css"; @import "./scroll-driven.css"; @import "./scroll-choreography.css"; @import "./card-scroll.css"; @import "./scroll-chrome.css"; @import "./view-transition.css"; @import "./utilities.css"; @import "./menu.css"; @import "./configurator.css"; @import "./instrument-chassis.css"; @import "./drawer.css"; @import "./segmented-tabs.css"; @import "./tabs/segmented-tabs-drag.css"; @import "./select.css"; @import "./dialog-placement.css"; @import "./icon-chip.css"; @import "./scroll-progress-rim.css"; @import "./completion-seal.css"; @import "./draw-in.css"; @import "../glass-ui.css"; @import "./components.css" layer(components); @source "../*.js";