@mkbabb/glass-ui 3.12.0 → 4.0.0

package/dist/styles/transitions.css

@@ -23,7 +23,7 @@
     .fade-slide-enter-active {
         transition:
             opacity var(--duration-normal) var(--ease-out),
-            transform var(--duration-normal) var(--spring-smooth);
+            transform var(--spring-smooth-duration) var(--spring-smooth);
     }
     .fade-slide-leave-active {
         transition:
@@ -43,7 +43,7 @@
     .dialog-scale-enter-active {
         transition:
             opacity var(--duration-slow) var(--ease-out),
-            transform var(--duration-slow) var(--spring-bouncy);
+            transform var(--spring-bouncy-duration) var(--spring-bouncy);
     }
     .dialog-scale-leave-active {
         transition:
@@ -63,7 +63,7 @@
     .pop-enter-active {
         transition:
             opacity var(--duration-fast) var(--ease-out),
-            transform var(--duration-slow) var(--spring-bouncy);
+            transform var(--spring-bouncy-duration) var(--spring-bouncy);
     }
     .pop-leave-active {
         transition:
@@ -83,7 +83,7 @@
     .dropdown-enter-active {
         transition:
             opacity var(--duration-instant) var(--ease-out),
-            transform var(--duration-normal) var(--spring-snappy);
+            transform var(--spring-snappy-duration) var(--spring-snappy);
     }
     .dropdown-leave-active {
         transition:
@@ -110,7 +110,7 @@
     .pane-swap-enter-active {
         transition:
             opacity var(--duration-normal) var(--ease-out),
-            transform var(--duration-normal) var(--spring-smooth);
+            transform var(--spring-smooth-duration) var(--spring-smooth);
     }
     .pane-swap-leave-active {
         transition:
@@ -130,7 +130,7 @@
     .metric-swap-enter-active {
         transition:
             opacity var(--duration-normal) var(--ease-out),
-            transform var(--duration-normal) var(--spring-smooth);
+            transform var(--spring-smooth-duration) var(--spring-smooth);
     }
     .metric-swap-leave-active {
         transition:
@@ -145,7 +145,7 @@
 
     /* ── Dock entrance utility ── */
     .dock-in {
-        animation: dock-in var(--duration-panel) var(--spring-snappy) both;
+        animation: dock-in var(--spring-snappy-duration) var(--spring-snappy) both;
         transform-origin: center bottom;
     }
 

package/dist/styles/typography/scale.css

@@ -0,0 +1,153 @@
+/* typography/scale.css — the OFL face FILES + the :root --type-* SCALE tokens.
+ *
+ * Carved from typography.css (BA.W-CARVE2) — the FACE declarations (the
+ * calibrated `local()` fallback faces for Plus Jakarta Sans + Fira Code) and
+ * the √φ scale-number :root block. @import-ed FIRST by the typography.css thin
+ * root (the faces + scale numbers must precede the semantic classes that read
+ * them). The carve moves rules in the SAME cascade position → byte-isomorphic
+ * dist (the no-god-module import-order gate is the witness). */
+
+/* ═══════════════════════════════════════════════
+   OFL FACE FILES — Plus Jakarta Sans (brand display)
+   ═══════════════════════════════════════════════ */
+
+/* The payload-bearing "Plus Jakarta Sans" faces live in `fonts.css`
+   (`@mkbabb/glass-ui/styles/fonts`), split off the critical entry path so
+   `./styles` does not carry the ~99 KB-gzipped font binary. The calibrated
+   `local()` fallback face below carries NO payload, stays on the critical
+   path, and paints during the `font-display: optional` window. Its metric
+   overrides (per system face) were derived via @capsizecss/core's
+   `createFontStack` against the bundled latin woff2 — the swap is metrically
+   neutral (no CLS). */
+@font-face {
+    font-family: "Plus Jakarta Sans Fallback";
+    src:
+        local("System Font"), local(".SFNS-Regular"), local(".SFNSText-Regular"),
+        local("-apple-system");
+    ascent-override: 92.3784%;
+    descent-override: 19.7572%;
+    size-adjust: 112.3639%;
+}
+@font-face {
+    font-family: "Plus Jakarta Sans Fallback";
+    src: local("Segoe UI"), local("SegoeUI");
+    ascent-override: 98.3348%;
+    descent-override: 21.0311%;
+    size-adjust: 105.5577%;
+}
+@font-face {
+    font-family: "Plus Jakarta Sans Fallback";
+    src: local("Roboto Regular"), local("Roboto-Regular");
+    ascent-override: 98.6597%;
+    descent-override: 21.1006%;
+    size-adjust: 105.2101%;
+}
+@font-face {
+    font-family: "Plus Jakarta Sans Fallback";
+    src: local("Arial"), local("ArialMT");
+    ascent-override: 98.8763%;
+    descent-override: 21.147%;
+    line-gap-override: 0%;
+    size-adjust: 104.9796%;
+}
+
+/* ═══════════════════════════════════════════════
+   OFL FACE FILES — Fira Code (canonical mono)
+   ═══════════════════════════════════════════════ */
+
+/* The payload-bearing "Fira Code" faces live in `fonts.css`
+   (`@mkbabb/glass-ui/styles/fonts`), split off the critical entry path. The
+   calibrated `local()` fallback face below carries NO payload, stays on the
+   critical path, and covers the `font-display: swap` window. Its metric
+   overrides reference Roboto Mono (the platform monos cluster within ~2%);
+   size-adjust ≈ 1.0 makes the swap geometrically transparent. */
+@font-face {
+    font-family: "Fira Code Fallback";
+    src:
+        local("SF Mono"), local("SFMono-Regular"), local("Menlo"), local("Consolas"),
+        local("Courier New"), local("Roboto Mono Regular");
+    ascent-override: 99.0161%;
+    descent-override: 32.2052%;
+    size-adjust: 99.9837%;
+}
+
+:root {
+    /* Font family tokens. `--font-text` / `--font-display` / `--font-serif` /
+       `--font-mono` are NOT declared here — their source-of-truth lives in
+       tokens.css §0 (`--font-stack-*`), bridged to Tailwind via theme.css's
+       `@theme` block; declaring `:root` literals here would shadow consumer
+       `@theme` overrides (un-layered `:root` wins over `@layer theme`). The
+       self-hosted faces above expose `"Plus Jakarta Sans"` + `"Fira Code"`,
+       each pairing with a calibrated `"... Fallback"`. The brand text register
+       (Plus Jakarta Sans) engages by default for every consumer; --font-mono
+       references `"Fira Code"` first then the fallback chain. */
+
+    /* Scale tokens */
+    --type-admin-label: 0.625rem; /* 10px — fixed sub-control micro (NOT fluid) */
+    --type-micro: 0.6875rem; /* 11px — fixed sub-control micro (NOT fluid) */
+    /* BODY/CONTROL register (AY.W-SCALE1 — the desktop-fluid half of corpus #4):
+       a GENTLE clamp() viewport base so the control/body register grows ~1-2 steps
+       on a wide display (the 27" "font too small" the user flagged) WITHOUT a
+       media-query staircase. The <min> of every clamp is the rung's prior fixed rem
+       — byte-identical at narrow/mobile (no shipped-narrow reflow; the coarse 1.5×
+       --ui-scale still lifts the comfort axis ON TOP). The vw slope is the body
+       register's GENTLE slope (not the φ-display ladder's aggressive vw) — the
+       "non-contrived" bar. The vw fluid term lives HERE (the typographic base),
+       exactly ONCE; the --ui-scale comfort scalar multiplies it exactly ONCE LATER
+       (tokens.css --control-text/-sm) — NO double-vw under coarse. The φ-identity
+       rungs below (--type-subheading/-heading/-title + the --type-display-* ladder)
+       are EXCLUDED — a hero/title is a typographic identity, not a control. */
+    --type-caption: clamp(
+        0.75rem,
+        0.71rem + 0.21vw,
+        1rem
+    ); /* 12px floor — --control-text-sm source */
+    --type-small: clamp(
+        0.875rem,
+        0.8rem + 0.25vw,
+        1.25rem
+    ); /* 14px floor — --control-text source (the workhorse) */
+    --type-body: clamp(
+        1rem,
+        0.92rem + 0.27vw,
+        1.375rem
+    ); /* 16px floor — global body cascade */
+    --type-prose: clamp(
+        1.125rem,
+        1.04rem + 0.28vw,
+        1.5rem
+    ); /* 18px floor — long-form prose */
+    --type-subheading: 1.272rem; /* 20.4px — √φ */
+    --type-heading: 1.618rem; /* 25.9px — φ */
+    --type-title: 2.058rem; /* 32.9px — φ^(3/2) */
+    --type-display-1: clamp(1.618rem, 1.2rem + 1.6vw, 2.618rem); /* φ^2 */
+    --type-display-2: clamp(2.058rem, 1.5rem + 2.2vw, 3.33rem); /* φ^(5/2) */
+    --type-display-3: clamp(2.618rem, 2rem + 3vw, 4.236rem); /* φ^3 */
+    --type-display-4: clamp(3.33rem, 2.5rem + 4vw, 5.382rem); /* φ^(7/2) */
+    --type-display-5: clamp(4.236rem, 3.5rem + 6vw, 6.854rem); /* φ^4 */
+    /* Audacious display tier (v1.0.3). Extends the φ-ladder three rungs
+       beyond display-5 for poster-type consumers (speedtest hero,
+       dashboard pane titles when the consumer wants the number to win).
+       Same vw-axis as display-1..5 — consumer-agnostic. */
+    --type-display-mega: clamp(
+        5.382rem,
+        4rem + 9vw,
+        11.089rem
+    ); /* φ^(9/2) — peak 177px */
+    --type-display-hero: clamp(
+        6.854rem,
+        4.5rem + 12vw,
+        17.942rem
+    ); /* φ^5    — peak 287px */
+    --type-display-audacious: clamp(
+        8.728rem,
+        5rem + 16vw,
+        22rem
+    ); /* φ^(11/2) — peak 352px (fast.com peg) */
+
+    /* Line heights & letter spacing live at tokens.css §0 as the canonical
+       --type-leading-* / --type-tracking-* rungs. theme.css bridges them
+       to Tailwind's `leading-*` / `tracking-*` utilities. The duplicate
+       --leading-* / --tracking-* declarations that previously sat here
+       were retired in v0.8.6 (audit U.W0.C-c §1.1 / Union 2). */
+}

package/dist/styles/typography/semantic.css

@@ -0,0 +1,220 @@
+/* typography/semantic.css — the BODY cascade + the DISPLAY / HEADING / BODY /
+ * MICRO / ADMIN-LABEL semantic type classes.
+ *
+ * Carved from typography.css (BA.W-CARVE2) — the semantic register classes
+ * that read the scale tokens declared in typography/scale.css. @import-ed
+ * SECOND by the typography.css thin root (after the faces+scale, before the
+ * aux/mono utilities). The carve moves rules in the SAME cascade position →
+ * byte-isomorphic dist (the no-god-module import-order gate is the witness). */
+
+/* ═══════════════════════════════════════════════
+   BODY CASCADE — the brand text register inherits globally
+   ═══════════════════════════════════════════════ */
+body {
+    font-family: var(--font-text);
+    color: var(--foreground);
+    font-size: var(--type-body);
+    line-height: var(--type-leading-body);
+}
+
+/* ═══════════════════════════════════════════════
+   DISPLAY — Plus Jakarta Sans display, tracking-tight
+   ═══════════════════════════════════════════════ */
+@utility text-display-audacious {
+    font-family: var(--font-display);
+    font-size: var(--type-display-audacious);
+    line-height: var(--type-leading-display);
+    letter-spacing: var(--type-tracking-tight);
+    font-optical-sizing: auto;
+    font-weight: 600;
+    /* AQ.W3 §W3.3 — balance multi-line display headlines. Text-only (no box) so
+       balance is safe; degrades to unbalanced wrapping with zero break. */
+    text-wrap: balance;
+}
+
+/* `.text-hero` — the poster-type hero register. Ceiling pegs to
+   `--type-display-audacious` (φ^(11/2) — peak 352px). Three knobs tune without
+   forking: `--text-hero-size` (total clamp), `--text-hero-leading` (line-height,
+   default 0.84), `--text-hero-tracking` (letter-spacing, default -0.03em).
+   `font-weight: 300` + `font-feature-settings: ss01, tnum, lnum` lock the
+   numeric/stylistic baseline; consumer data-attribute registers compose on top. */
+@utility text-hero {
+    font-family: var(--font-display);
+    font-size: var(--text-hero-size, var(--type-display-audacious));
+    line-height: var(--text-hero-leading, 0.84);
+    letter-spacing: var(--text-hero-tracking, -0.03em);
+    font-weight: 300;
+    font-feature-settings: "ss01", "tnum", "lnum";
+    font-variant-numeric: tabular-nums lining-nums;
+    font-optical-sizing: auto;
+    display: inline-block;
+    max-inline-size: 100%;
+    /* AQ.W3 §W3.3 — `text-wrap: nowrap` (modern) sits AFTER `white-space:
+       nowrap` (legacy fallback) so supporting engines honor the modern form and
+       older ones fall through to `white-space`. Forgiving parse, no `@supports`. */
+    white-space: nowrap;
+    text-wrap: nowrap;
+}
+
+@utility text-display-hero {
+    font-family: var(--font-display);
+    font-size: var(--type-display-hero);
+    line-height: var(--type-leading-display);
+    letter-spacing: var(--type-tracking-tight);
+    font-optical-sizing: auto;
+    font-weight: 600;
+    text-wrap: balance; /* AQ.W3 §W3.3 */
+}
+
+@utility text-display-mega {
+    font-family: var(--font-display);
+    font-size: var(--type-display-mega);
+    line-height: var(--type-leading-display);
+    letter-spacing: var(--type-tracking-tight);
+    font-optical-sizing: auto;
+    font-weight: 600;
+    text-wrap: balance; /* AQ.W3 §W3.3 */
+}
+
+@utility text-display-5 {
+    font-family: var(--font-display);
+    font-size: var(--type-display-5);
+    line-height: var(--type-leading-display);
+    letter-spacing: var(--type-tracking-tight);
+    font-optical-sizing: auto;
+    font-weight: 600;
+    text-wrap: balance; /* AQ.W3 §W3.3 */
+}
+
+@utility text-display-4 {
+    font-family: var(--font-display);
+    font-size: var(--type-display-4);
+    line-height: var(--type-leading-display);
+    letter-spacing: var(--type-tracking-tight);
+    font-optical-sizing: auto;
+    font-weight: 600;
+    text-wrap: balance; /* AQ.W3 §W3.3 */
+}
+
+@utility text-display-3 {
+    font-family: var(--font-display);
+    font-size: var(--type-display-3);
+    line-height: var(--type-leading-display);
+    letter-spacing: var(--type-tracking-tight);
+    font-optical-sizing: auto;
+    font-weight: 600;
+    text-wrap: balance; /* AQ.W3 §W3.3 */
+}
+
+@utility text-display-2 {
+    font-family: var(--font-display);
+    font-size: var(--type-display-2);
+    line-height: var(--type-leading-display);
+    letter-spacing: var(--type-tracking-tight);
+    font-optical-sizing: auto;
+    font-weight: 600;
+    text-wrap: balance; /* AQ.W3 §W3.3 */
+}
+
+@utility text-display {
+    font-family: var(--font-display);
+    font-size: var(--type-display-1);
+    line-height: var(--type-leading-display);
+    letter-spacing: var(--type-tracking-tight);
+    font-optical-sizing: auto;
+    font-weight: 600;
+    text-wrap: balance; /* AQ.W3 §W3.3 */
+}
+
+/* ═══════════════════════════════════════════════
+   HEADINGS / BODY — Plus Jakarta Sans text register
+   ═══════════════════════════════════════════════ */
+@utility text-title {
+    font-family: var(--font-text);
+    font-size: var(--type-title);
+    line-height: var(--type-leading-heading);
+    letter-spacing: var(--type-tracking-tight);
+    font-weight: 700;
+    text-wrap: balance; /* AQ.W3 §W3.3 */
+}
+
+@utility text-heading {
+    font-family: var(--font-text);
+    font-size: var(--type-heading);
+    line-height: var(--type-leading-heading);
+    font-weight: 700;
+    text-wrap: balance; /* AQ.W3 §W3.3 */
+}
+
+@utility text-subheading {
+    font-family: var(--font-text);
+    font-size: var(--type-subheading);
+    line-height: var(--type-leading-body);
+    font-weight: 600;
+    text-wrap: balance; /* AQ.W3 §W3.3 */
+}
+
+/* Canonical dock control label register — text labels INSIDE
+   `.dock-tab-button` (Start, Next, Submit, …) that want an emphatic character
+   without `.text-heading`'s `font-weight: 700` (which reads as literal bold in
+   a dock pill). Composes the `--dock-label-size` knob when set (dock.css
+   audacious mobile carve), else `--type-subheading`. Weight 400 — Plus Jakarta
+   reads heavier than its numeric weight at pill size, so regular is the
+   not-bold register. */
+@utility dock-label {
+    font-family: var(--font-text);
+    font-size: var(--dock-label-size, var(--type-subheading));
+    line-height: var(--type-leading-body);
+    font-weight: 400;
+    letter-spacing: var(--type-tracking-normal);
+}
+
+@utility text-prose {
+    font-family: var(--font-text);
+    font-size: var(--type-prose);
+    line-height: var(--type-leading-prose);
+    font-weight: 400;
+    /* AQ.W3 §W3.3 — `pretty` fixes orphans/rivers in prose. Prose registers
+       only (not every text class); degrades to default wrapping, zero break. */
+    text-wrap: pretty;
+}
+
+@utility text-body {
+    font-family: var(--font-text);
+    font-size: var(--type-body);
+    line-height: var(--type-leading-body);
+    font-weight: 400;
+    text-wrap: pretty; /* AQ.W3 §W3.3 */
+}
+
+@utility text-small {
+    font-family: var(--font-text);
+    font-size: var(--type-small);
+    line-height: var(--type-leading-small);
+    font-weight: 400;
+}
+
+@utility text-caption {
+    font-family: var(--font-text);
+    font-size: var(--type-caption);
+    line-height: var(--type-leading-caption);
+    font-style: italic;
+    font-weight: 400;
+}
+
+/* ═══════════════════════════════════════════════
+   MICRO / ADMIN LABEL — Fira Code
+   ═══════════════════════════════════════════════ */
+@utility text-micro {
+    font-size: var(--type-micro);
+    line-height: 1.25;
+}
+
+@utility text-admin-label {
+    font-family: var(--font-mono);
+    font-size: var(--type-admin-label);
+    line-height: 1;
+    text-transform: uppercase;
+    letter-spacing: var(--type-tracking-caps);
+    font-weight: 500;
+}

package/dist/styles/typography/utilities.css

@@ -0,0 +1,159 @@
+/* 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
+   ═══════════════════════════════════════════════ */
+@utility text-mono-caption {
+    font-family: var(--font-mono);
+    font-size: var(--type-caption);
+    letter-spacing: var(--type-tracking-wider);
+    text-transform: uppercase;
+    font-weight: 500;
+}
+
+@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) */
+    .section-label {
+        font-family: var(--font-mono);
+        font-size: var(--type-caption);
+        color: var(--muted-foreground);
+        text-transform: uppercase;
+        letter-spacing: var(--type-tracking-caps);
+    }
+
+    /* 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));
+    }
+
+    /* Font-feature helpers */
+    .tabular-nums {
+        font-variant-numeric: tabular-nums;
+    }
+
+    /* Kinetic: per-character stagger */
+    .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) * 30ms);
+    }
+
+    /* 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);
+    }
+}