@mkbabb/glass-ui 5.0.0 → 7.0.0

package/src/styles/typography/utilities.css

@@ -1,197 +0,0 @@
-/* typography/utilities.css — the MATH / MONO / FONT-FAMILY / ORNAMENTAL / AUX
- * registers.
- *
- * Carved from typography.css (BA.W-CARVE2) — the math/mono variants, the
- * font-family utilities (.cm-serif/.fira-code), the ornamental .fourier-f, and
- * the @layer components AUX section-label/pane-title/kinetic hooks. @import-ed
- * LAST by the typography.css thin root (after the faces+scale and the semantic
- * classes). The carve moves rules in the SAME cascade position →
- * byte-isomorphic dist (the no-god-module import-order gate is the witness). */
-
-/* ═══════════════════════════════════════════════
-   MATH — Plus Jakarta Sans italic
-   ═══════════════════════════════════════════════ */
-@utility text-math {
-    font-family: var(--font-text);
-    font-style: italic;
-}
-
-@utility text-math-body {
-    font-family: var(--font-text);
-    font-size: var(--type-prose);
-    line-height: var(--type-leading-prose);
-    font-style: italic;
-}
-
-/* ═══════════════════════════════════════════════
-   MONO variants
-   ═══════════════════════════════════════════════ */
-/* BB.W-EYEBROW-UNION — THE canonical mono-caption EYEBROW vocabulary, declared
-   ONCE. The pure color-agnostic register: mono · caption-size · uppercase ·
-   tracking-CAPS. The prior drift (tracking-WIDER 0.05em, weight-500, both off the
-   `.section-label` canon-by-usage) is RECONCILED onto the canon's secondary axes
-   (clean break, no alias): the tracking folds to `--type-tracking-caps` (0.1em),
-   the weight-500 drops (a per-use choice a site states inline via `font-medium`,
-   not a fork in the eyebrow register), and color stays UNBAKED so a consumer
-   pairs any ink (`text-foreground`/`text-muted-foreground`/an accent) — the 17
-   `text-mono-caption text-foreground` sites keep their ink. `.section-label`
-   (below) COMPOSES this vocabulary + bakes the muted ink (the colored canon);
-   the menu caption reads the `--menu-section-*` knobs that DEFAULT to these same
-   tokens (the sanctioned override layer). proof:eyebrow-union locks the
-   single-source-ness. */
-@utility text-mono-caption {
-    font-family: var(--font-mono);
-    font-size: var(--type-caption);
-    letter-spacing: var(--type-tracking-caps);
-    text-transform: uppercase;
-}
-
-@utility text-mono-small {
-    font-family: var(--font-mono);
-    font-size: var(--type-small);
-    line-height: var(--type-leading-small);
-}
-
-@utility text-mono-prose {
-    font-family: var(--font-mono);
-    font-size: var(--type-prose);
-    line-height: var(--type-leading-prose);
-    letter-spacing: 0.02em;
-}
-
-@utility text-mono-micro {
-    font-family: var(--font-mono);
-    font-size: var(--type-micro);
-    line-height: 1.25;
-    letter-spacing: 0.025em;
-}
-
-/* ═══════════════════════════════════════════════
-   FONT FAMILY UTILITIES
-   ═══════════════════════════════════════════════ */
-/* .cm-serif — the Computer-Modern math/serif voice. A DISTINCT face from the
-   brand text register: it resolves to the consumer-supplied serif (system
-   serif by default; a math consumer maps Computer Modern / KaTeX over it). It
-   is NOT the Plus Jakarta text register — the one serif survivor of the
-   register reconciliation. */
-@utility cm-serif {
-    font-family: var(--font-serif-math, serif);
-}
-
-@utility fira-code {
-    font-family: var(--font-mono);
-    font-feature-settings: "liga", "calt";
-}
-
-/* ═══════════════════════════════════════════════
-   ORNAMENTAL — Fourier F
-   ═══════════════════════════════════════════════ */
-@utility fourier-f {
-    font-family: var(--font-display);
-    font-style: italic;
-    font-size: 1.35em;
-    line-height: 1;
-    vertical-align: -0.05em;
-    font-weight: 700;
-    display: inline-block;
-}
-
-/* ═══════════════════════════════════════════════
-   AUX — section label, pane title, kinetic hooks
-   ═══════════════════════════════════════════════ */
-@layer components {
-    /* Responsive pane title */
-    .text-pane-title {
-        font-family: var(--font-display);
-        font-size: clamp(2.4rem, 1.8rem + 2vw, 3.33rem);
-        line-height: var(--type-leading-display);
-        letter-spacing: var(--type-tracking-tight);
-        font-weight: 600;
-        font-optical-sizing: auto;
-    }
-
-    /* AV.W16 TW3 — the pane title scales off its PANE's box, not the viewport.
-       An unnamed @container query resolves to the nearest ancestor container,
-       so the title grows once its pane clears 40rem (≈ 640px) regardless of the
-       viewport. Contract: the consuming pane sets `container-type: inline-size`
-       (the dock/chassis pattern); without a container ancestor the compact base
-       holds. */
-    @container (min-width: 40rem) {
-        .text-pane-title {
-            font-size: var(--type-display-3);
-        }
-    }
-
-    /* Section label (mono, small caps) — the COLORED eyebrow canon. Composes the
-       ONE `text-mono-caption` vocabulary (mono · caption · uppercase ·
-       tracking-caps) + bakes the muted ink. BB.W-EYEBROW-UNION: this is the
-       canon-by-usage register (the StorySection eyebrow column + Section.vue's
-       `label` tone + the `.section-label--tinted` accent build on it); it now
-       COMPOSES the vocabulary rather than re-declaring it, so a tracking/size
-       change to the eyebrow is ONE edit (the `text-mono-caption` rule). */
-    .section-label {
-        @apply text-mono-caption;
-        color: var(--muted-foreground);
-    }
-
-    /* Section-accent eyebrow (AZ.W-SUFFUSE D3-7 / D1-8). ONE coherent
-       section-accent register — the colored mono eyebrow reads as an
-       intentional system, not a four-hue rainbow. The accent reads a single
-       `--section-label-accent` knob (default `--section-color-7`, the violet
-       brand anchor) so a page tints its whole eyebrow column at ONE chroma
-       from one override, NOT a different hue per section. This is the
-       one-color-event rule at PAGE scope: the eyebrow is the page's ONE
-       accent identity. The label/value/body ink below stays neutral. */
-    .section-label--tinted {
-        color: var(--section-label-accent, var(--section-color-7));
-    }
-
-    /* BG.W-GATE-FIELD-AURORA (EYEBROW-LIGHT-POLISH, +3.12) — the light-arm twin
-       of the dark eyebrow fix (b3d65eec). The mono-caption eyebrow reads
-       `--muted-foreground` (= `--neutral-5`, L40, calibrated AA-vs-PAGE), which
-       composites to only ~4.15:1 over the recessive warm shell field
-       (`[data-paper-field]`, BG.W-FIELD-AURORA) in LIGHT mode — below the
-       10-14px 4.5 bar (dark already clears 6.73, Safari 4.80). Over the warm
-       field ONLY + LIGHT ONLY, warm-mix the eyebrow ink toward `--foreground`
-       (the SAME 22%-toward-`--foreground` recipe the demo header-cluster twin
-       runs, mixed off the RAW `--neutral-5` so a cluster re-point of
-       `--muted-foreground` never double-darkens) so the neutral eyebrow clears
-       AA 4.5 within the warm-no-gray identity. Dark (`.dark`), non-field
-       contexts, the page-muted calibration, AND the `--tinted` accent eyebrow
-       (its own `--section-color-7` identity) are BYTE-UNTOUCHED. */
-    :root:not(.dark)
-        [data-paper-field]
-        .section-label:not(.section-label--tinted) {
-        color: color-mix(in oklab, var(--neutral-5), var(--foreground) 22%);
-    }
-
-    /* Font-feature helpers */
-    .tabular-nums {
-        font-variant-numeric: tabular-nums;
-    }
-
-    /* Kinetic: per-character stagger. The per-glyph increment is the single-
-       source `--char-stagger-step` token (scheme-motion.css, 30ms) — DRY with
-       the demo's `.story-section__heading` reveal (story-hero.css); a `:root`
-       override retimes both. (BG.W-SECTION-TYPEWRITER-FADEUP — off the hardcoded
-       `* 30ms` literal.) */
-    .char-stagger > .char {
-        display: inline-block;
-        animation: fade-in var(--spring-smooth-duration) var(--spring-smooth, ease) backwards;
-        animation-delay: calc(var(--char-index, 0) * var(--char-stagger-step));
-    }
-
-    /* Letter-pressed treatment — reads as text engraved into the panel
-       surface. Speedtest's idle hero `0` consumes this via
-       `.text-hero[data-idle="true"]`; the `text-engraved` utility is the
-       glass-ui contract that any consumer can apply for the same look.
-       Opacity dropped in P.W1.B — the audacious canon mutes by colour
-       (`--muted-foreground`), not by alpha; opacity ≤ 0.4 over a glass
-       surface read as a fade, not as engraving. */
-    .text-engraved {
-        color: var(--muted-foreground);
-        /* AW.W26 — composes the `--text-shadow-engraved` @theme identity token
-           (the two-stop emboss) instead of a hand-rolled literal (gate 4). */
-        text-shadow: var(--text-shadow-engraved);
-    }
-}

package/src/styles/typography.css

@@ -1,46 +0,0 @@
-/*
- * typography.css — Plus Jakarta Sans (text + display) + Fira Code (mono)
- *                (both OFL faces self-hosted via fonts.css)
- *
- * Golden-ratio scale (√φ ≈ 1.272). ONE brand register: Plus Jakarta Sans
- * carries the text register — body, headings, prose, display, and math — and
- * Fira Code carries mono. The library DEFAULT is the register every live
- * surface paints (the demo + speedtest render Plus Jakarta everywhere). There
- * is no display-serif voice and no preset opt-out: the default IS the register.
- *
- * Semantic type classes expose both Tailwind-friendly utility names
- * (`.text-display-*`, `.text-body`, `.text-admin-label`) and feature
- * utilities (`.cm-serif`, `.fira-code`, `.fourier-f`).
- *
- * Self-host font subsystem — glass-ui ships two OFL-1.1 face families as
- * bundled woff2 assets: Plus Jakarta Sans (brand text + display, font-display:
- * optional) + Fira Code (canonical mono, font-display: swap). Both ship with
- * Capsize-calibrated size-adjust / ascent-override / descent-override on the
- * matching fallback faces so the swap is geometry-neutral (zero CLS). The
- * register lives in tokens.css §0 (--font-stack-text/-display/-mono), bridged
- * to --font-text/-display/-mono in theme.css; consumers override --font-text
- * once to rebrand, no third-party CDN dependency on the LCP-critical path.
- *
- * BA.W-CARVE2 — the §1-§10 face/scale/semantic/utility registers grew past the
- * no-god-module 500-line bound (W-SUFFUSE/W-HIERARCHY's display-ladder +
- * section-rung additions). This file is now a thin @import root over cohesive
- * typography/*.css partials (each under bound), @import-ed below in CASCADE
- * ORDER. The ordering is load-bearing: the faces + --type-* scale tokens FIRST
- * (the semantic classes read them), the semantic register classes SECOND, the
- * math/mono/aux utilities LAST. The carve moves rules across files in the SAME
- * source position → byte-isomorphic dist (the no-god-module import-order gate
- * is the witness; the dist/glass-ui.css emit is byte-identical):
- *   1. typography/scale.css     — the OFL fallback @font-face declarations +
- *                                 the :root √φ --type-* scale tokens.
- *   2. typography/semantic.css  — the body{} cascade + the DISPLAY/HEADING/
- *                                 BODY/MICRO/ADMIN-LABEL @utility classes.
- *   3. typography/utilities.css — the MATH/MONO/FONT-FAMILY/ORNAMENTAL @utility
- *                                 set + the @layer components AUX hooks
- *                                 (section-label/pane-title/kinetic).
- *
- * @import-ed by index.css (cascade rung after tokens.css); the carve keeps the
- * SAME source position → byte-isomorphic dist.
- */
-@import "./typography/scale.css";
-@import "./typography/semantic.css";
-@import "./typography/utilities.css";

package/src/styles/utilities/a11y-overrides.css

@@ -1,184 +0,0 @@
-/* utilities/a11y-overrides.css
-   The accessibility + capability tail — @media (prefers-reduced-motion: reduce) (+ the .no-transition class), @media (forced-colors: active) focus/silhouette, @media (pointer: coarse) touch-target floor, and the @utility touch-hit-area. LAST in cascade.
-   Carved from the utilities.css cascade root; @import-ed by utilities.css in
-   cascade order. See docs/precepts/design-idioms.md §cohesion-aware partials. */
-/* ── Reduced motion: nuanced — preserve opacity, remove spatial motion ── */
-@media (prefers-reduced-motion: reduce) {
-    *:not([data-allow-motion]) {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-    }
-
-    /* Keep opacity transitions (safe, non-spatial) but shorten */
-    *:not([data-allow-motion]) {
-        transition-duration: 0.1s !important;
-        transition-property: opacity, color, background-color, border-color, box-shadow !important;
-    }
-
-    /* BA.W-ATLAS-RECONCILE A-3 (d6 2755ebbd re-land) — Reduced-motion OVERRIDES
-       the `data-allow-motion` theme-flip carve. That carve (the `.no-transition`
-       block below) lets a control keep its OWN authored spatial animation through
-       the flip storm — but a user who asks for reduced motion outranks any
-       per-element motion-allow. So motion-allowed elements ALSO snap their spatial
-       (transform) transition + any animation here; accessibility is absolute. (The
-       DarkModeToggle icon animates through a flip under full motion, and SNAPS
-       under PRM — both arms gated by the ported icon-morph test.) */
-    [data-allow-motion] {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-duration: 0.01ms !important;
-    }
-}
-
-/* ── No-transition class (for theme switches, etc.) ──────────────────────────
-   The theme-flip transition-suppression storm: `useGlobalDark.toggleDark()` adds
-   `.no-transition` to `<html>` for the flip's single style recalc so the page's
-   incidental transitions (colour cross-fades, glass surfaces) don't jank, then
-   rAF-removes it. The kill is BLANKET by design — every descendant snaps.
-
-   BA.W-ATLAS-RECONCILE A-3 (d6 2755ebbd re-land) — THE CARVE
-   (`*:not([data-allow-motion])`): an element may declare `data-allow-motion` to
-   keep its OWN authored transition through the flip — the suppression is for
-   INCIDENTAL motion, never a control whose whole purpose IS an animation (the
-   DarkModeToggle's half-turn icon spring). This reuses the SAME carve attribute
-   the reduced-motion block reads, generalized into a single
-   "motion-allowed-during-suppression" capability (any element may opt in; no
-   toggle-special-case, no `!important` re-enable arms race). Reduced-motion still
-   OVERRIDES this carve — see the PRM block above: `[data-allow-motion]` spatial
-   transitions snap under `prefers-reduced-motion` (accessibility is absolute). */
-html.no-transition,
-html.no-transition *:not([data-allow-motion]),
-html.no-transition *:not([data-allow-motion])::before,
-html.no-transition *:not([data-allow-motion])::after {
-    transition-duration: 0s !important;
-}
-
-/* ── Forced-colors focus + silhouette rung (AQ.W2 §5 · generalized AX.W36) ────
-   Windows High Contrast / forced-colors mode STRIPS `box-shadow` — so the
-   glass focus rings (box-shadow + `outline: none`) vanish, leaving keyboard
-   users with no visible focus. Restore a real `outline` keyed to the system
-   `Highlight` color (outline survives forced-colors; box-shadow does not). The
-   box-shadow ring stays the primary in normal mode (it carries the glass
-   aesthetic) — these two are mutually exclusive by media query, NOT a parallel
-   path.
-
-   AX.W36 — the focus-survival selector set is GENERALIZED to the broader
-   interactive surface: the dock CONTROLS (`.dock-icon-button` / `.dock-tab-button`
-   / `.dock-select-trigger` / `.dock-dropdown-trigger`) + the pill button base
-   (`.btn-pill`) all carry a box-shadow focus ring (dock.css / utilities.css) that
-   vanishes under WHC just like the original five. This is the SAME `Highlight`
-   outline rung extended to cover them — ONE block, ONE path (the glass-language
-   structure-survival skin for the tier panes / StatusDot / floating surfaces lives
-   co-located with the ladder it skins, in glass.css).
-
-   `forced-color-adjust: none` is deliberately NOT used — glass-ui's glassmorphic
-   chrome is decorative and yields to the user's forced palette (css forced-colors
-   guidance). Baseline Widely Available; this IS the fallback mechanism (it only
-   activates under forced-colors), so no nested guard. */
-@media (forced-colors: active) {
-    .focus-ring:focus-visible,
-    .glass-btn:focus-visible,
-    .interactive-item:focus-visible,
-    .btn-pill:focus-visible,
-    .dock-icon-button:focus-visible,
-    .dock-tab-button:focus-visible,
-    .dock-select-trigger:focus-visible,
-    .dock-dropdown-trigger:focus-visible,
-    .input-pill:focus,
-    .input-pill:focus-visible {
-        outline: 2px solid Highlight;
-        outline-offset: 2px;
-    }
-
-    /* Structural edges borne ONLY by box-shadow (the hairline catch-light + the
-       dock SHELL pill edge) also vanish — restore a real border so the silhouette
-       survives. CanvasText is the system text/border color. The `.glass-dock`
-       shell is OUT of the glass-material group BY DESIGN (it hand-rolls a parallel
-       surface — see glass.css), so it keeps its WHC edge HERE; the five-rung ladder
-       + `.glass-card` get their WHC border from the co-located glass-language skin
-       in glass.css (one source per surface family, no double-declaration). */
-    .hairline-accent,
-    .glass-dock {
-        border: 1px solid CanvasText;
-    }
-}
-
-/* ── Coarse-pointer touch-target floor (AQ.W3 §7) ───────────────────────────
-   General-surface companion to the dock-scoped R0G-6 floor (dock.css). On
-   coarse pointers the small icon-button/trigger surfaces OUTSIDE the dock lift
-   to the WCAG 2.5.5 (44px) minimum — ONE amendment retiring the per-consumer
-   `min-h-[44px]` one-liners. Token-driven (`--touch-target`); fine-pointer
-   byte-identical. Targets `Button iconOnly` (via the `data-icon-only`
-   attr Button.vue reflects), ExpandableContainer + SegmentedTabs (responsive
-   mobile Select) triggers.
-   `min-block/inline-size` only RAISES — a larger explicit size is never lost. */
-@media (pointer: coarse) {
-    [data-icon-only],
-    [data-part="trigger"],
-    .segmented-tabs__trigger {
-        min-block-size: var(--touch-target, 2.75rem);
-        min-inline-size: var(--touch-target, 2.75rem);
-    }
-}
-
-/* ── @utility touch-hit-area (AY.W-SCALE2) ──────────────────────────────────
-   The hit-target is DECOUPLED from the visual size: a 16px Checkbox stays
-   16px visually, but on a COARSE pointer it acquires a ≥44px pointer-receptive
-   hit-rect via a centred `::before` overlay (WCAG 2.5.5). The six sub-44 form
-   atoms (Switch / Checkbox / RadioGroupItem / Slider-thumb / TagsInput-delete /
-   MultiSelect-remove-X) compose this ONE shared utility — DRY, one source, ≥2
-   consumers — instead of per-atom `min-h-[44px]` balloons.
-
-   DIVERGENCE-WITH-RATIONALE from the timeline precedent (ContinuousMarkers.vue
-   `.continuous-dot::before`, SegmentedTimeline `.boundary-dot::before`): the
-   timeline uses a FIXED symmetric `inset: calc((--touch-target - dot-size)/-2)`
-   — exact ONLY because its dot is a KNOWN fixed square. Our atoms are NOT square
-   and NOT a known size (a 24×44 Switch, a 16px Checkbox, a ~7px-wide Slider cap),
-   so a single symmetric inset would under/over-shoot one axis. This utility uses
-   the size-AGNOSTIC centred-min-size form: `min-width/min-height: var(--touch-
-   target)` + `top/left:50%` + `translate:-50% -50%` floors BOTH dimensions at
-   44px for ANY visual size, the generalization the timeline's known-square inset
-   cannot do.
-
-   COARSE-ONLY (the fine-pointer-byte-identical invariant, STRICTER than the
-   timeline whose `::before` exists at fine pointer too): the DEFAULT (fine)
-   path declares NO overlay box — `::before` has no `content`, so its min-width/
-   height resolve to `auto`/0 and the composited rect equals the bare visual box
-   (the AX.W51 fine-pointer-identical invariant). Only the nested `@media
-   (pointer: coarse)` block mints the `content:""` + the 44px overlay.
-
-   NO new floor token (D4): the overlay reads `var(--touch-target)`. */
-@utility touch-hit-area {
-    position: relative;
-
-    @media (pointer: coarse) {
-        &::before {
-            content: "";
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            translate: -50% -50%;
-            min-width: var(--touch-target, 2.75rem);
-            min-height: var(--touch-target, 2.75rem);
-            /* BC.W-RADIO-FIX — the swallow-fix (the §F headline binding bug).
-               An absolutely-positioned `::before` over the atom with
-               `pointer-events: auto` becomes the topmost hit target across the
-               whole 44px box and INTERCEPTS the real pointer event before it
-               reaches the host's listener — reka's RadioGroupItem / Checkbox /
-               Switch / SliderRoot bind their toggle/drag handler on the HOST
-               button (Radio.vue `onClick`), and the swallowing overlay was the
-               root of "radios don't work" (a synthetic .click() on the host
-               still fired, but a real coarse tap landed on the pseudo and
-               no-op'd). `pointer-events: none` frees the pointer to fall
-               through to the host so the tap reaches reka on EVERY input path,
-               while the 44px GEOMETRY still satisfies the WCAG-2.5.5 readback
-               (getComputedStyle reads min-width/height, not pointer-events —
-               the hit FLOOR is the box, never a pointer-swallowing overlay).
-               The same integrity discipline `useDockClickIntegrity` applies to
-               the dock + the Slider's own `.slider-thumb.touch-hit-area::before`
-               override already discovered (AY.W-SCALE2) — now ONE source for
-               the whole six-atom hit-area family. */
-            pointer-events: none;
-        }
-    }
-}

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). */