@mkbabb/glass-ui 2.1.0 → 3.1.0

package/dist/styles/utilities.css

@@ -33,6 +33,7 @@
         font-size: var(--type-body);
         color: var(--muted-foreground);
         line-height: 1.5;
+        text-wrap: pretty; /* AQ.W3 §W3.3 — prose-register orphan/river fix */
     }
 
     /* ── Labeled-field label (V.W3.T5 / A5 §5.5) ────────────────────
@@ -44,10 +45,49 @@
     .labeled-field-label {
         font-family: var(--font-display);
         font-size: var(--type-body);
-        color: var(--muted-foreground);
+        /* AQ.W4 §W3.1c — the label color reads the group-state variable so the
+           `:has(:user-invalid)` rule below reddens it (one source of the
+           override value, shared with the `.has-error` fallback class). */
+        color: var(--field-label-color, var(--muted-foreground));
         cursor: help;
     }
 
+    /* AQ.W4 §W3.1c — LabeledField group error highlight. When any descendant
+       control is `:user-invalid`, the whole field group marks (the label
+       reddens via `--field-label-color`, the error region reveals). Scoped to
+       `.labeled-field` — never `body`, never a bare element. `:has()` Baseline
+       Widely; the `.has-error` / `.has-valid` fallback classes (toggled by the
+       `useUserInvalidAria` fallback path) are the SOLE degradation for engines
+       without `:has()`/`:user-invalid` (not a live+dead alias). */
+    .labeled-field {
+        --field-label-color: var(--muted-foreground);
+    }
+    .labeled-field:has(:user-invalid),
+    .labeled-field.has-error {
+        --field-label-color: var(--destructive);
+    }
+
+    /* The error region: hidden at rest, revealed once a descendant is
+       `:user-invalid` (or the `.has-error` fallback class is set). Non-color
+       reinforcement for the validity tint — the error TEXT is the primary
+       cue, the border/bg shift the supplement (forms guide: never color
+       alone). */
+    .labeled-field-error {
+        display: none;
+        font-size: var(--type-small);
+        color: var(--destructive);
+        margin-block-start: 0.25rem;
+    }
+    .labeled-field:has(:user-invalid) .labeled-field-error,
+    .labeled-field.has-error .labeled-field-error {
+        display: block;
+    }
+    /* Hide the error text once the field reads valid (the user corrected it). */
+    .labeled-field:has(:user-valid) .labeled-field-error,
+    .labeled-field.has-valid .labeled-field-error {
+        display: none;
+    }
+
     /* ── Popover-content recipe (V.W3.T3 / A5 §3.2) ─────────────────
        Canonical recipe for floating-tier portal containers
        (PopoverContent, DropdownMenuContent, SelectContent, etc.).
@@ -72,9 +112,28 @@
         display: none;
     }
 
+    /* AQ.W3 §W3.4 — tokenized thin scrollbar. Standard `scrollbar-width` +
+       `scrollbar-color` (Baseline Widely, Chromium 121+) is the primary path,
+       reading `--scrollbar-{thumb,track}` (auto-dark via `--muted-foreground`).
+       The legacy `::-webkit-scrollbar` family is the SOLE fallback for older
+       WebKit/Blink, gated on `@supports not (scrollbar-color: auto)` so modern
+       engines never paint it — not a live+dead alias. */
     .scrollbar-thin {
         scrollbar-width: thin;
-        scrollbar-color: color-mix(in srgb, var(--muted-foreground) 25%, transparent) transparent;
+        scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+    }
+    @supports not (scrollbar-color: auto) {
+        .scrollbar-thin::-webkit-scrollbar {
+            width: 8px;
+            height: 8px;
+        }
+        .scrollbar-thin::-webkit-scrollbar-track {
+            background: var(--scrollbar-track);
+        }
+        .scrollbar-thin::-webkit-scrollbar-thumb {
+            background: var(--scrollbar-thumb);
+            border-radius: var(--radius-pill);
+        }
     }
 
     /* ── Focus ring — auto-activates on :focus-visible ── */
@@ -95,6 +154,8 @@
 
     /* ── Interactive item (hover bg + focus ring + active scale) ── */
     .interactive-item {
+        /* AQ.W3 §W3.2 identity base */
+        scale: 1;
         border-radius: var(--radius-lg);
         user-select: none;
         transition:
@@ -102,7 +163,7 @@
             color var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard),
-            transform var(--duration-fast) var(--ease-standard);
+            scale var(--duration-fast) var(--ease-standard);
     }
     .interactive-item:hover {
         background-color: color-mix(in srgb, var(--accent) 50%, transparent);
@@ -112,7 +173,7 @@
         box-shadow: var(--focus-ring-shadow);
     }
     .interactive-item:active {
-        transform: scale(0.98);
+        scale: 0.98;
     }
     .interactive-item:disabled,
     .interactive-item[data-disabled] {
@@ -136,15 +197,19 @@
        consumer's own hover/active bg-tint cascade to acknowledge the
        press. */
     .tap-squish {
-        transition: transform var(--duration-fast) var(--spring-snappy);
+        /* AQ.W3 §W3.2 identity base */
+        scale: 1;
+        transition: scale var(--duration-fast) var(--spring-snappy);
         transform-origin: center center;
     }
     .tap-squish:active {
-        transform: scale(var(--scale-press));
+        scale: var(--scale-press);
     }
     @media (prefers-reduced-motion: reduce) {
         .tap-squish:active {
-            transform: none;
+            /* Reset to the longhand identity (not `transform: none`) so the
+               press scale is neutralized under PRM. */
+            scale: 1;
         }
     }
 
@@ -212,6 +277,29 @@
         -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--mask-fade-width), black calc(100% - var(--mask-fade-width)), transparent);
     }
 
+    /* ── Deferred section — render-skip an offscreen subtree (AQ.W3 §5) ──────
+       `content-visibility: auto` skips layout/paint/style of an offscreen
+       subtree — the INP-under-load lever (fourier γ, muster, speedtest, words).
+       `contain-intrinsic-size: auto <estimate>` is measurement-safe: the `auto`
+       prefix makes the engine REMEMBER the last-rendered size (no scroll-jump on
+       re-entry); plain `<estimate>` freezes the section + thrashes the scrollbar
+       — the trap this closes. Estimate is token-driven (`--deferred-section-
+       size`, default 30rem). `.deferred-section--cached` →
+       `content-visibility: hidden` (always skipped, state CACHED — cheaper to
+       re-show than `display:none`). Baseline Widely; unsupporting engines render
+       normally. JS HOOK: the engine fires `contentvisibilityautostatechange`
+       { skipped } at the render-skip boundary — pair with `useRAFLoop`
+       pause/resume: `el.addEventListener('contentvisibilityautostatechange',
+       e => e.skipped ? loop.pause() : loop.resume())`. */
+    .deferred-section {
+        content-visibility: auto;
+        contain-intrinsic-size: auto var(--deferred-section-size, 30rem);
+    }
+    .deferred-section--cached {
+        content-visibility: hidden;
+        contain-intrinsic-size: auto var(--deferred-section-size, 30rem);
+    }
+
     /* ── Card scroll-timeline host (AI.W1-α) ───────────────────────────────
        Canonical scroll-overflow host that emits the `--card-scroll` named
        scroll-timeline consumed by `<CardHeader shrink>`. Apply to the
@@ -273,6 +361,8 @@
         align-items: center;
         justify-content: center;
         text-align: center;
+        /* AQ.W3 §W3.2 identity base */
+        scale: 1;
         gap: var(--metric-badge-gap, 0.125rem);
         max-width: var(--metric-badge-max-width, 8rem);
         min-height: var(--metric-badge-min-height, 1.5rem);
@@ -297,7 +387,7 @@
             background var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard),
-            transform var(--duration-fast) var(--ease-standard);
+            scale var(--duration-fast) var(--ease-standard);
     }
 
     .metric-badge > span {
@@ -310,11 +400,11 @@
         border-color: var(--metric-badge-hover-border, var(--glass-border-resting));
         background: var(--metric-badge-hover-bg, var(--glass-bg-resting));
         box-shadow: var(--metric-badge-hover-shadow, 0 2px 10px color-mix(in srgb, var(--shadow-color) 12%, transparent), var(--glass-highlight));
-        transform: scale(var(--metric-badge-hover-scale, 1.02));
+        scale: var(--metric-badge-hover-scale, 1.02);
     }
 
     .metric-badge:active {
-        transform: scale(var(--metric-badge-press-scale, 0.96));
+        scale: var(--metric-badge-press-scale, 0.96);
     }
 
     .metric-badge:focus-visible {
@@ -460,34 +550,28 @@
         color: color-mix(in srgb, var(--muted-foreground) 50%, transparent);
     }
 
-    /* ── Hover lift — translate-y + shadow on hover (3 levels) ── */
-    .hover-lift {
-        transition-property: transform, box-shadow;
+    /* ── Hover lift — translate-y + shadow on hover (3 levels) ──
+       The shared transition is expressed once over the family; the three
+       :hover rules carry the per-level translate + shadow. */
+    :where(.hover-lift, .hover-lift-md, .hover-lift-lg) {
+        /* Individual-transform identity base (AQ.W3 §W3.2) — `translate: 0` at
+           rest mints the stacking context once so the hover lift does not
+           flicker it into being. */
+        translate: 0;
+        transition-property: translate, box-shadow;
         transition-duration: var(--duration-normal);
         transition-timing-function: var(--ease-standard);
     }
     .hover-lift:hover:not(:disabled):not([aria-disabled='true']) {
-        transform: translateY(var(--lift-sm));
+        translate: 0 var(--lift-sm);
         box-shadow: var(--shadow-md);
     }
-
-    .hover-lift-md {
-        transition-property: transform, box-shadow;
-        transition-duration: var(--duration-normal);
-        transition-timing-function: var(--ease-standard);
-    }
     .hover-lift-md:hover:not(:disabled):not([aria-disabled='true']) {
-        transform: translateY(var(--lift-md));
+        translate: 0 var(--lift-md);
         box-shadow: var(--shadow-md);
     }
-
-    .hover-lift-lg {
-        transition-property: transform, box-shadow;
-        transition-duration: var(--duration-normal);
-        transition-timing-function: var(--ease-standard);
-    }
     .hover-lift-lg:hover:not(:disabled):not([aria-disabled='true']) {
-        transform: translateY(var(--lift-lg));
+        translate: 0 var(--lift-lg);
         box-shadow: var(--shadow-lg);
     }
 
@@ -501,22 +585,23 @@
        the whole cartoon read.
        (Per audit U.W0.C-c §1.3 / Union 1 — collapses the dual-system
        drift onto the token-driven shadow.) */
+    :where(.shadow-cartoon-sm, .shadow-cartoon-md, .shadow-cartoon-lg) {
+        border: 2px solid var(--border);
+    }
+    /* Static cartoon-stamp lift (AQ.W3 §W3.2). NOT state-driven, so the
+       identity base is not strictly required, but the `translate:` longhand
+       keeps the family uniform with the state-driven sites above. */
     .shadow-cartoon-sm {
         box-shadow: var(--shadow-cartoon-sm);
-        border: 2px solid var(--border);
-        transform: translateY(-1px);
+        translate: 0 -1px;
     }
-
     .shadow-cartoon-md {
         box-shadow: var(--shadow-cartoon-md);
-        border: 2px solid var(--border);
-        transform: translateY(-1px);
+        translate: 0 -1px;
     }
-
     .shadow-cartoon-lg {
         box-shadow: var(--shadow-cartoon-lg);
-        border: 2px solid var(--border);
-        transform: translateY(-2px);
+        translate: 0 -2px;
     }
 
     /* ── Divider utilities ── */
@@ -554,10 +639,13 @@
    `class="scale-on-hover"`; transition + easing bind to the canonical
    `--duration-fast` + `--ease-standard` tokens. */
 @utility scale-on-hover {
-    @apply transition-transform duration-fast ease-standard;
+    /* Individual-transform identity base (AQ.W3 §W3.2). Transition the `scale`
+       longhand (not `transform`) so the migrated hover scale animates. */
+    scale: 1;
+    transition: scale var(--duration-fast) var(--ease-standard);
 
     &:hover {
-        transform: scale(var(--scale-hover));
+        scale: var(--scale-hover);
     }
 }
 
@@ -574,21 +662,14 @@
            data-[state=closed]:duration-[var(--duration-fast)];
 }
 
-/* ── Audacious primary CTA recipe (K.W6 HEADLINE) ────────────────────
-   Lifted from `dock.css` `.dock-tab-button[data-tier="primary"]` per
-   K.W6 spec §3 (Option B — drop phase-tinting from the canonical
-   variant; phase-tint stays as a dock-local extension). Composes three
-   at-rest marks (top-highlight via --glass-highlight, bottom under-shadow
-   via --border-hairline, baseline glass via --card surface) with three
-   disco accents on hover (specular swap via --glass-specular, sparkle
-   sweep via the ::after star, disco-grain via --paper-clean-texture
-   blended with a --primary radial). Reservation: disco fires on hover
-   only — at rest the button reads as a Vignelli-restrained composed
-   glass surface.
-
-   Pair with `bg-primary text-primary-foreground` for the canonical
-   Button variant; the utility owns the texture/highlight/sparkle
-   composition only. */
+/* ── Audacious primary CTA recipe ────────────────────────────────────────
+   Composes three at-rest marks (top-highlight via --glass-highlight, bottom
+   under-shadow via --border-hairline, baseline glass) with three disco accents
+   on hover (specular swap via --glass-specular, sparkle sweep via the ::after
+   star, disco-grain via --paper-clean-texture blended with a --primary radial).
+   Disco fires on hover only — at rest the button reads as a restrained glass
+   surface. Pair with `bg-primary text-primary-foreground`; the utility owns
+   the texture/highlight/sparkle composition only. */
 @utility btn-audacious {
     position: relative;
     isolation: isolate;
@@ -782,21 +863,11 @@
     padding-inline: var(--table-head-px, 1rem);
 }
 
-/* ── Rainbow gradient backgrounds (Q.W3 Lane E re-promote) ──────────────
+/* ── Rainbow gradient backgrounds ───────────────────────────────────────
    `.rainbow-vivid` + `.rainbow-pastel` paint a left-to-right 7-stop spectrum
    from the canonical `--rainbow-*` / `--rainbow-pastel-*` token families
-   (tokens.css §14). They were retired at `b0debec` (D.W2.D, 2026-04-30)
-   under a zero-consumer audit that did not include keyframes.js in its
-   sweep corpus — keyframes.js's `AnimationMenuBar.vue` round play button
-   composes `rainbow-vivid` (playing) / `rainbow-pastel` (idle) and silently
-   lost its gradient when the recipes left the library. The `--rainbow-*`
-   color tokens survived the retiral; only the class recipes were dropped.
-
-   Re-promoted as `@utility` recipes — the token half is canonical, so the
-   class form that paints it belongs alongside it. Not a backwards-compat
-   alias: it is a substrate REVERT, the revert IS the consumer rediscovery
-   (≥ 1 consumer exists post-revert, satisfying L invariant 8). Faithful
-   to the pre-`b0debec` recipe bodies. */
+   (tokens.css §14). Consumed by keyframes.js's `AnimationMenuBar.vue` round
+   play button — `rainbow-vivid` (playing) / `rainbow-pastel` (idle). */
 @utility rainbow-vivid {
     background: linear-gradient(
         to right,
@@ -823,32 +894,28 @@
     );
 }
 
-/* ── Interactive-button four-state recipe (Q.W3 Lane E re-promote) ───────
+/* ── Interactive-button four-state recipe ────────────────────────────────
    `.btn-interactive` carries the canonical "Button-with-spring-hover"
    four-state contract — transition + hover-scale (`--scale-hover`) +
-   active-press (`--scale-press`) + disabled-opacity (`--opacity-disabled`)
-   + focus-ring fade-in. Same shape as `.btn-audacious` (a composition-only
-   recipe a Button variant opts into). Retired at `b0debec` (D.W2.D)
-   alongside the rainbow recipes under the same incomplete audit corpus;
-   keyframes.js consumes it at 7 sites (CubeScene, EasingScene, demo/cube,
-   AnimationControlsGroup RIBBON_BUTTON_CLASS, PlaybackRibbon Reverse).
-
-   The Button primitive's own variants emit the four states except
-   `hover:scale-*` — `.btn-interactive` is the canonical opt-in that adds
-   the spring-hover lift. Faithful to the pre-`b0debec` recipe body. */
+   active-press (`--scale-press`) + disabled-opacity + focus-ring fade-in.
+   The Button primitive's variants emit the four states except `hover:scale-*`;
+   this is the canonical opt-in that adds the spring-hover lift. Consumed by
+   keyframes.js at 7 sites. */
 @utility btn-interactive {
+    /* AQ.W3 §W3.2 identity base */
+    scale: 1;
     transition:
         background-color var(--duration-fast) var(--ease-standard),
         color var(--duration-fast) var(--ease-standard),
-        transform var(--duration-fast) var(--ease-standard),
+        scale var(--duration-fast) var(--ease-standard),
         opacity var(--duration-fast) var(--ease-standard);
 
     &:hover {
-        transform: scale(var(--scale-hover));
+        scale: var(--scale-hover);
     }
 
     &:active {
-        transform: scale(var(--scale-press));
+        scale: var(--scale-press);
     }
 
     &:disabled {
@@ -864,7 +931,7 @@
         transition:
             background-color var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard),
-            transform var(--duration-fast) var(--ease-standard),
+            scale var(--duration-fast) var(--ease-standard),
             opacity var(--duration-fast) var(--ease-standard),
             box-shadow var(--duration-fast) var(--ease-standard);
     }
@@ -891,3 +958,54 @@ html.no-transition *::before,
 html.no-transition *::after {
     transition-duration: 0s !important;
 }
+
+/* ── Forced-colors restoration (AQ.W2 §5) ──────────────────────────────
+   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 (a WCAG 2.4.7 failure forced-colors exposes).
+   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.
+
+   `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,
+    .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 /
+       glass pill edge / card plate) also vanish — restore a real border so
+       the silhouette survives. CanvasText is the system text/border color. */
+    .hairline-accent,
+    .glass-dock,
+    .glass-card {
+        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 + ResponsiveTabs triggers.
+   `min-block/inline-size` only RAISES — a larger explicit size is never lost. */
+@media (pointer: coarse) {
+    [data-size="icon"],
+    .expandable-container__trigger,
+    .responsive-tabs__trigger {
+        min-block-size: var(--touch-target, 2.75rem);
+        min-inline-size: var(--touch-target, 2.75rem);
+    }
+}

package/dist/styles/view-transition.css

@@ -0,0 +1,62 @@
+/*
+ * view-transition.css — the View-Transitions CSS substrate (AQ.W5 §Design 3b).
+ *
+ * Cascade rung after scroll-driven.css. Token-first shared-class recipes for the
+ * group-transition case — the substrate the `useViewTransition` helper
+ * (`@mkbabb/glass-ui/motion-core`) pairs with. The helper wraps the DOM
+ * mutation; this CSS owns the LOOK of the cross-fade/slide. The consumer adds
+ * `view-transition-class: gl-list-item` plus a UNIQUE `view-transition-name`
+ * per tracked element (the runtime MANDATORY — ≤ 1 element per name per state,
+ * else the transition is skipped silently).
+ *
+ * Consumed across the AQ↔muster J seam: J.W5's verdict re-rank tags each row
+ * `view-transition-class: gl-list-item; view-transition-name: row-<id>` and
+ * calls `startViewTransition(() => render())`; the dock layer swap (W6) reuses
+ * the same group recipe.
+ *
+ * Baseline: same-document `view-transitions` + `view-transition-class` = Newly
+ * Available. The helper's instant-update fallback (calls `mutate()` synchronously
+ * when `document.startViewTransition` is absent) is the ≤ 20-LOC feature-detected
+ * fallback — no CSS counterpart is needed because a non-supporting engine simply
+ * never generates the `::view-transition*` pseudo tree.
+ *
+ * Reduced-motion: `animation: none` on every VT pseudo. The native swap still
+ * runs (state mutates instantly), just without motion — the correct PRM degrade.
+ */
+
+@media (prefers-reduced-motion: reduce) {
+    ::view-transition-group(*),
+    ::view-transition-old(*),
+    ::view-transition-new(*) {
+        animation: none !important;
+    }
+}
+
+/* Shared group class — consumers add `view-transition-class: gl-list-item` on
+ * each tracked element plus a unique `view-transition-name` per element. */
+::view-transition-group(.gl-list-item) {
+    animation-duration: var(--vt-duration, var(--duration-normal));
+    animation-timing-function: var(--vt-ease, var(--ease-apple-spring));
+}
+
+/* Added / removed members — the `:only-child` trick from the group guide: a
+ * member present in only ONE of the old/new states slides instead of cross-fades. */
+::view-transition-new(.gl-list-item):only-child { animation-name: gl-vt-slide-in; }
+::view-transition-old(.gl-list-item):only-child { animation-name: gl-vt-slide-out; }
+
+/* AQ.W6 §Design 7 — the dock layer group recipe. `<GlassDock>` (.dock-layers)
+ * and `<DockLayerGroup>` (.dock-layer-stack) carry `view-transition-class:
+ * gl-dock-layer` + a page-unique `view-transition-name` on a View-Transitions
+ * engine, so the collapsed↔expanded width + the layer-pane swap morph as a VT
+ * group instead of the JS FLIP. The `--dock-motion-resize` spring maps here to
+ * `--vt-ease`; both default to the apple-spring. PRM zeroes the animation above. */
+::view-transition-group(.gl-dock-layer) {
+    animation-duration: var(--vt-duration, var(--duration-normal));
+    animation-timing-function: var(--vt-ease, var(--ease-apple-spring));
+}
+
+@keyframes gl-vt-slide-in  { from { opacity: 0; translate: 0 var(--vt-rise, 8px); } }
+@keyframes gl-vt-slide-out { to   { opacity: 0; translate: 0 var(--vt-rise, 8px); } }
+
+/* Keep the non-transitioned UI interactive while the snapshot animates. */
+::view-transition { pointer-events: none; }

package/dist/switch.d.ts

@@ -0,0 +1 @@
+export * from "./components/ui/switch";

package/dist/switch.js

@@ -0,0 +1,2 @@
+import { t as e } from "./Switch-Cr1t_F_U.js";
+export { e as Switch };