@mkbabb/glass-ui 3.12.0 → 4.0.0

package/dist/styles/typography.css

@@ -20,457 +20,27 @@
  * 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.
  */
-
-/* ═══════════════════════════════════════════════
-   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 */
-    --type-micro:       0.6875rem; /* 11px */
-    --type-caption:     0.75rem;   /* 12px */
-    --type-small:       0.875rem;  /* 14px */
-    --type-body:        1rem;      /* 16px */
-    --type-prose:       1.125rem;  /* 18px */
-    --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). */
-}
-
-/* ═══════════════════════════════════════════════
-   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;
-}
-
-/* ═══════════════════════════════════════════════
-   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);
-    }
-
-    /* Font-feature helpers */
-    .tabular-nums {
-        font-variant-numeric: tabular-nums;
-    }
-
-    /* Kinetic: per-character stagger */
-    .char-stagger > .char {
-        display: inline-block;
-        animation: fade-in var(--duration-normal) 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);
-    }
-}
+@import "./typography/scale.css";
+@import "./typography/semantic.css";
+@import "./typography/utilities.css";

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

@@ -0,0 +1,169 @@
+/* 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 size="icon"` (via the `data-size="icon"`
+   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-size="icon"],
+    .expandable-container__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);
+            /* Inherit the host's pointer-events so a tap within the halo
+               registers on the atom; the overlay itself is decorative (no
+               paint), so it never occludes the host's own interaction. */
+            pointer-events: auto;
+        }
+    }
+}

package/dist/styles/utilities/animate.css

@@ -0,0 +1,26 @@
+/* utilities/animate.css
+   The popover/dropdown shared @utility animation pair — popover-animate + slide-in-from-side (the data-state / data-side entry choreography for popover-class containers). FIRST (before the @layer components block, matching source order).
+   Carved from the utilities.css cascade root; @import-ed by utilities.css in
+   cascade order. See docs/precepts/design-idioms.md §cohesion-aware partials. */
+/* ── Popover/dropdown shared animation ──
+   `@utility` form (V.W3.T8 / A5 §5.9 standardisation): data-state animation
+   pair for popover-class containers (Popover, DropdownMenu, ContextMenu,
+   Tooltip, HoverCard, Select). Composed alongside `.slide-in-from-side`
+   for direction-keyed entries. */
+@utility popover-animate {
+    @apply data-[state=open]:animate-in data-[state=closed]:animate-out
+           data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0
+           data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95;
+}
+
+/* ── Slide-in entry by side data-attr ──
+   `@utility` form (V.W3.T8). Side-keyed slide entry that pairs with
+   reka-ui's `data-side` (`top|right|bottom|left`). The animation
+   direction inverts each side so panels enter from outside the
+   anchor's edge. */
+@utility slide-in-from-side {
+    @apply data-[side=bottom]:slide-in-from-top-2
+           data-[side=left]:slide-in-from-right-2
+           data-[side=right]:slide-in-from-left-2
+           data-[side=top]:slide-in-from-bottom-2;
+}