@mkbabb/glass-ui 2.1.0 → 3.1.0

package/dist/styles/animations.css

@@ -296,3 +296,80 @@
         animation: none;
     }
 }
+
+/* ── §TOP-LAYER ENTRY/EXIT (AQ.W5 §Design 2) ───────────────────────────────
+ *
+ * A pure-CSS entry/exit grammar for NATIVE top-layer surfaces — `[popover]`
+ * elements and native `<dialog>` — keyed off `:popover-open` / `dialog[open]`,
+ * plus a glass `::backdrop`. This replaces the per-frame inline-style entry the
+ * platform now owns: `@starting-style` + `transition` + `transition-behavior:
+ * allow-discrete` + `overlay`.
+ *
+ * SCOPE: this applies ONLY to elements tagged `.glass-top-layer`. It does NOT
+ * touch reka-ui's portaled overlays — those keep their `tw-animate-css`
+ * data-state fade (distinct selectors, no cascade fight, mirroring the
+ * `[data-scrim-animation]` discipline above). `DialogContent`'s `spring` opt-in
+ * (`useSpringMount`) is also untouched — a legitimate iOS-physics variant, not a
+ * duplicate of this fade.
+ *
+ * Baseline: `@starting-style` = Widely Available; `transition-behavior:
+ * allow-discrete` + `overlay` = Newly Available → adopt natively, gate the
+ * whole grammar on `@supports (overlay: auto)`. A non-supporting engine shows
+ * the element instantly (acceptable for a native top-layer surface; glass-ui
+ * ships no JS top-layer coordinator — that is reka-ui Dialog's remit).
+ *
+ * Uses `scale:` (the longhand) not `transform: scale()` so it composes with the
+ * identity-base transform work and does not mint a stacking context. Every
+ * visual axis reads a `--top-layer-*` token (tokens.css §20).
+ */
+@supports (overlay: auto) {
+    /* Base (closed / exit) + the transition list. `allow-discrete` MUST come
+     * after the property longhands, never negated. */
+    .glass-top-layer[popover],
+    dialog.glass-top-layer {
+        opacity: 0;
+        scale: var(--top-layer-enter-scale, 0.96);
+        transition-property: opacity, scale, display, overlay;
+        transition-duration: var(--duration-normal);
+        transition-timing-function: var(--ease-apple-spring);
+        transition-behavior: allow-discrete;
+    }
+
+    /* Open state + `@starting-style` entry (starting-style AFTER the open
+     * selector so the entry interpolates from the closed values). */
+    .glass-top-layer[popover]:popover-open,
+    dialog.glass-top-layer[open] {
+        opacity: 1;
+        scale: 1;
+        @starting-style {
+            opacity: 0;
+            scale: var(--top-layer-enter-scale, 0.96);
+        }
+    }
+
+    /* Glass backdrop — blur + dim, animated discretely. `::backdrop` only
+     * exists for `showModal()` dialogs, NOT `[popover]` (popovers are
+     * non-modal — correct, no scrim). */
+    dialog.glass-top-layer::backdrop {
+        background-color: hsl(var(--background) / 0);
+        backdrop-filter: blur(var(--top-layer-backdrop-blur, 8px));
+        transition: display var(--duration-normal) allow-discrete,
+                    overlay var(--duration-normal) allow-discrete,
+                    background-color var(--duration-normal) var(--ease-standard);
+    }
+    dialog.glass-top-layer[open]::backdrop {
+        background-color: hsl(var(--background) / var(--top-layer-backdrop-dim, 0.5));
+        @starting-style {
+            background-color: hsl(var(--background) / 0);
+        }
+    }
+}
+
+/* Reduced-motion carve — flatten the scale to a fade, shorten the duration. */
+@media (prefers-reduced-motion: reduce) {
+    .glass-top-layer[popover],
+    dialog.glass-top-layer {
+        scale: none;
+        transition-duration: var(--duration-fast);
+    }
+}

package/dist/styles/cards.css

@@ -33,12 +33,16 @@
 @utility cartoon-surface {
     border-width: 2px;
     box-shadow: var(--shadow-cartoon-md);
+    /* Individual-transform identity base (AQ.W3 §W3.2) — state-driven 2D lift on
+       a card surface that often hosts portaled content; `translate: 0` at rest
+       mints the stacking context once. Longhand maps `translate(x, y)` 1:1. */
+    translate: 0;
     transition:
-        transform var(--duration-normal) var(--ease-apple-spring),
+        translate var(--duration-normal) var(--ease-apple-spring),
         box-shadow var(--duration-normal) var(--ease-apple);
 
     &:hover:not(:disabled) {
-        transform: translate(var(--lift-sm), var(--lift-sm));
+        translate: var(--lift-sm) var(--lift-sm);
         box-shadow: var(--shadow-cartoon-lg);
     }
 }

package/dist/styles/dock.css

@@ -22,6 +22,29 @@
         --dock-motion-resize: var(--duration-normal) var(--spring-snappy);
     }
 
+    /* Shared four-state contract — the focus-visible ring + disabled paint are
+       identical across every dock control, so they are expressed ONCE here as a
+       comma group over the control family rather than copied per rule-set. The
+       group keeps full class+pseudo specificity (NOT `:where()`, which would
+       zero the class and let a per-control :hover box-shadow override the focus
+       ring). Per-control transition extensions (the box-shadow fade on
+       focus-visible) stay with their own selectors below where they differ. */
+    .dock-icon-button:focus-visible,
+    .dock-tab-button:focus-visible,
+    .dock-select-trigger:focus-visible,
+    .dock-dropdown-trigger:focus-visible {
+        box-shadow: var(--focus-ring-shadow);
+        outline: none;
+    }
+
+    .dock-icon-button:disabled,
+    .dock-tab-button:disabled,
+    .dock-select-trigger:disabled,
+    .dock-dropdown-trigger:disabled {
+        opacity: var(--opacity-disabled);
+        cursor: not-allowed;
+    }
+
     .glass-dock {
         --dock-surface-blur: var(--glass-blur-dock, var(--glass-blur-wash));
         /* J.W3.C — vertical-rail max-block + horizontal max-inline caps
@@ -33,6 +56,11 @@
         --dock-wrap-max-width: calc(100vw - var(--dock-viewport-inline-gutter, 1rem));
         --dock-separator-height: calc(var(--dock-h, var(--size-icon-btn)) * 0.5);
         --dock-collapsed-hover-scale: var(--scale-hover-dock);
+        /* Individual-transform identity base (AQ.W3 §W3.2). `scale: 1` at rest
+           mints the stacking context once so a portaled popover over `--z-dock`
+           stays above the dock during a hover scale (the load-bearing
+           stacking-context guarantee). Covers every dock scale site. */
+        scale: 1;
         position: relative;
         display: inline-flex;
         align-items: center;
@@ -68,6 +96,7 @@
         --dock-trigger-padding-inline: var(--dock-density-compact-trigger-padding-inline, 0.4375rem);
         --dock-tab-padding-block: var(--dock-density-compact-tab-padding-block, 0.3125rem);
         --dock-tab-padding-inline: var(--dock-density-compact-tab-padding-inline, 0.625rem);
+        --dock-tab-h: 32px;
     }
 
     /* Comfortable density — the GlassDock default. Sits between compact
@@ -82,6 +111,7 @@
         --dock-trigger-padding-inline: var(--dock-density-comfortable-trigger-padding-inline, 0.5rem);
         --dock-tab-padding-block: var(--dock-density-comfortable-tab-padding-block, 0.4375rem);
         --dock-tab-padding-inline: var(--dock-density-comfortable-tab-padding-inline, 0.75rem);
+        --dock-tab-h: 38px;
     }
 
     .glass-dock[data-density="spacious"] {
@@ -94,6 +124,7 @@
         --dock-trigger-padding-inline: var(--dock-density-spacious-trigger-padding-inline, 0.625rem);
         --dock-tab-padding-block: var(--dock-density-spacious-tab-padding-block, 0.5rem);
         --dock-tab-padding-inline: var(--dock-density-spacious-tab-padding-inline, 0.875rem);
+        --dock-tab-h: 44px;
     }
 
     /* Audacious density — typography-forward chrome where the dock reads as
@@ -111,41 +142,13 @@
         --dock-tab-padding-block: var(--dock-density-audacious-tab-padding-block, 0.5rem);
         --dock-tab-padding-inline: var(--dock-density-audacious-tab-padding-inline, 1.5rem);
         --dock-tab-min-height: var(--dock-density-audacious-tab-min-height, 3.5rem);
+        --dock-tab-h: var(--dock-density-audacious-tab-min-height, 3.5rem);
     }
 
-    /* Dock tab-button density-keyed height (R3-spec / audit-E P0-3;
-       consolidated into dock.css at Q.W3 Lane A — formerly split into
-       utilities.css and surviving only by import-cascade accident).
-       The four bare DockIconButton consumers solve their density-keyed
-       height via `--dock-control-size` (set per density tier above);
-       DockTabButton's analogous `--dock-tab-h` knob lives in the same
-       density rungs so the tab-button row no longer free-floats to the
-       glyph + padding sum. Compact density lands at 32px to match the
-       deployed product's bottom-dock height. The `.dock-tab-button` rule
-       (further down this file) consumes `--dock-tab-h`. */
-    .glass-dock[data-density="compact"] {
-        --dock-tab-h-compact: 32px;
-        --dock-tab-h: var(--dock-tab-h-compact);
-    }
-    .glass-dock[data-density="comfortable"] {
-        --dock-tab-h-comfortable: 38px;
-        --dock-tab-h: var(--dock-tab-h-comfortable);
-    }
-    .glass-dock[data-density="spacious"] {
-        --dock-tab-h-spacious: 44px;
-        --dock-tab-h: var(--dock-tab-h-spacious);
-    }
-    .glass-dock[data-density="audacious"] {
-        --dock-tab-h-audacious: var(--dock-density-audacious-tab-min-height, 3.5rem);
-        --dock-tab-h: var(--dock-tab-h-audacious);
-    }
-
-    /* Density-audacious mobile carve (R3-spec / audit-D D-Rec-5;
-       consolidated into dock.css at Q.W3 Lane A). At narrow viewports
-       the audacious-dock label glyphs compress so the audacious chrome
-       doesn't overflow its host: `≤14px at <480` and `15px at 480–719`.
-       Consumer dock label spans bind `font-size: var(--dock-label-size)`
-       (typography.css `.dock-label` recipe is the canonical consumer). */
+    /* Density-audacious mobile carve — at narrow viewports the audacious-dock
+       label glyphs compress so the chrome doesn't overflow its host
+       (≤14px at <480, 15px at 480–719). Consumer dock label spans bind
+       `font-size: var(--dock-label-size)` (typography.css `.dock-label`). */
     @media (max-width: 479px) {
         .glass-dock[data-density="audacious"] {
             --dock-label-size: 14px;
@@ -188,22 +191,11 @@
             border-color var(--dock-motion-standard);
     }
 
-    /* Z.W2.T2 — vertical rails grow-to-fit + clamp, no scroll. Per A2 §B6
-       + A4 special-focus: canon-intent is grow-and-wrap, not scroll. The
-       prior `overflow-y: auto` produced the "dock scrolls when it
-       shouldn't" regression at narrow viewports; the right escape is to
-       let descendants wrap to multiple rows (consumers opt-in via
-       `dock-wrap`) or to clamp via `--dock-max-block-size` and let the
-       cap fail visibly rather than mask the overflow as a scroll
-       affordance.
-
-       The edge-fade `mask-image` retired here in lockstep with the
-       horizontal `.dock-layers` rule. With grow-to-fit + visible
-       overflow the rail never scrolls, so a scroll-feather mask has
-       nothing to feather — it only bled a transparent ramp onto the
-       top and bottom rail items, casting a stray directional shadow
-       on those edge controls. J.W3.C's auto + mask-fade shape is fully
-       superseded: grow-to-fit is the whole contract, no feather. */
+    /* Vertical rails grow-to-fit + clamp, no scroll: descendants wrap to
+       multiple rows (opt-in via `dock-wrap`) or clamp via
+       `--dock-max-block-size`; the cap fails visibly rather than masking
+       overflow as a scroll affordance. No edge-fade mask — a rail that never
+       scrolls has nothing to feather. */
     .glass-dock.vertical {
         display: inline-flex;
         flex-direction: column;
@@ -321,7 +313,7 @@
         background: var(--glass-bg-wash);
         border-color: var(--glass-border-floating);
         box-shadow: var(--shadow-dock-override, var(--shadow-dock));
-        transform: scale(var(--dock-collapsed-hover-scale));
+        scale: var(--dock-collapsed-hover-scale);
     }
 
     /* J.W5.C — held-state substrate response.
@@ -344,6 +336,15 @@
             box-shadow var(--duration-fast) var(--ease-standard);
     }
 
+    /* AQ.W3 §W3.1b — open-descendant surface response. When a dock-hosted
+       trigger (`[data-state="open"]`) is open, the dock root holds its elevated
+       read natively (no consumer JS). Idempotent with `[data-held]` above (same
+       floating paint, different trigger). Decorative; `:has()` Baseline Widely. */
+    .glass-dock:has([data-state="open"]) {
+        background: var(--glass-bg-floating, var(--glass-bg-resting));
+        border-color: var(--glass-border-floating, var(--glass-border-resting));
+    }
+
     .glass-dock:where(.fixed) {
         z-index: var(--z-dock);
     }
@@ -382,23 +383,11 @@
         transition: width var(--dock-motion-resize);
     }
 
-    /* Z.W2.T2 — horizontal dock content grows visibly when the active
-       layer's natural width exceeds the dock's content area. Per
-       A2 §B6 + A4 special-focus: the canon-intent for the bottom dock
-       is grow-to-fit; consumers needing wrap opt into `dock-wrap`. The
-       prior `overflow-x: auto` produced the user-reported "dock scrolls
-       when it shouldn't" — the wrong escape valve.
-
-       The edge-fade `mask-image` retired here. Once Z.W2.T2 made the
-       dock grow-to-fit, content is never clipped and never scrolls, so
-       the mask had nothing left to feather — it was kept only "for
-       visual symmetry" with the vertical rule. In practice the 1rem
-       transparent ramp at each edge bled onto the first and last dock
-       items: the rightmost control (e.g. a settings cog) had its outer
-       edge faded into the glass backdrop, which read as a stray
-       directional shadow on that item. A scroll-affordance feather on
-       a surface that never scrolls is pure cosmetic damage, so it is
-       removed at the root rather than masked per-consumer. */
+    /* Horizontal dock content grows visibly when the active layer's natural
+       width exceeds the content area (grow-to-fit; consumers needing wrap opt
+       into `dock-wrap`). No edge-fade mask — content never clips or scrolls,
+       so a feather has nothing to feather and only bleeds a stray ramp onto
+       the edge controls. */
     .glass-dock.expanded:not(.dock-wrap) > .dock-layers {
         overflow-x: visible;
     }
@@ -650,11 +639,30 @@
         min-width: 0;
     }
 
+    /* AP.W3 — axis-aware layer pane. The stack + `useLayerTransition` are
+       axis-aware, but the pane was hardcoded to a no-wrap ROW with
+       `width: max-content` — forcing a `vertical` group's content onto one
+       horizontal line that could not grow down (the vertical-overflow fight).
+       A vertical group stacks in a column, stretches, wraps, and block-sizes
+       to the height the stack animates. Horizontal byte-identical. */
+    .dock-layer-group.vertical .dock-layer-item-host {
+        flex-direction: column;
+        align-items: stretch;
+        white-space: normal;
+    }
+
+    .dock-layer-group.vertical .dock-layer-item-host.is-active {
+        width: auto;
+        height: max-content;
+    }
+
     .dock-icon-button {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
+        /* AQ.W3 §W3.2 identity base */
+        scale: 1;
         width: var(--dock-control-size, var(--size-icon-btn));
         height: var(--dock-control-size, var(--size-icon-btn));
         padding: var(--dock-icon-padding, 0);
@@ -667,7 +675,7 @@
         transition:
             background-color var(--dock-motion-fast),
             color var(--dock-motion-fast),
-            transform var(--dock-motion-fast),
+            scale var(--dock-motion-fast),
             opacity var(--dock-motion-fast);
     }
 
@@ -681,11 +689,11 @@
     .dock-icon-button:hover:not(:disabled) {
         background: var(--muted);
         color: var(--btn-hover-color, var(--foreground));
-        transform: scale(var(--scale-hover-dock));
+        scale: var(--scale-hover-dock);
     }
 
     .dock-icon-button:active:not(:disabled) {
-        transform: scale(var(--scale-press-dock));
+        scale: var(--scale-press-dock);
     }
 
     .dock-icon-button:focus:not(:focus-visible) {
@@ -693,22 +701,17 @@
         outline: none;
     }
 
+    /* focus-visible ring + disabled paint hoisted to the shared `:where()`
+       group at the top; this rule adds only the box-shadow fade transition. */
     .dock-icon-button:focus-visible {
-        box-shadow: var(--focus-ring-shadow);
-        outline: none;
         transition:
             background-color var(--dock-motion-fast),
             color var(--dock-motion-fast),
-            transform var(--dock-motion-fast),
+            scale var(--dock-motion-fast),
             opacity var(--dock-motion-fast),
             box-shadow var(--dock-motion-fast);
     }
 
-    .dock-icon-button:disabled {
-        opacity: var(--opacity-disabled);
-        cursor: not-allowed;
-    }
-
     /* O.W6 Lane B — token-ladder active paint. Defaults match the prior
        hardcoded recipe (--muted bg + --foreground color, no transform / border
        / shadow). Consumers override the active variant via the
@@ -718,7 +721,7 @@
     .dock-icon-button:is(.is-active, .active, [aria-expanded="true"], [aria-pressed="true"]) {
         background: var(--dock-active-bg);
         color: var(--dock-active-color);
-        transform: scale(var(--dock-active-scale));
+        scale: var(--dock-active-scale);
         border: var(--dock-active-border);
         box-shadow: var(--dock-active-shadow);
     }
@@ -822,10 +825,12 @@
         cursor: pointer;
         white-space: nowrap;
         outline: none;
+        /* AQ.W3 §W3.2 identity base */
+        scale: 1;
         transition:
             background-color var(--dock-motion-fast),
             color var(--dock-motion-fast),
-            transform var(--dock-motion-fast);
+            scale var(--dock-motion-fast);
     }
 
     .dock-tab-button:hover:not(:disabled) {
@@ -834,22 +839,15 @@
     }
 
     .dock-tab-button:active:not(:disabled) {
-        transform: scale(var(--scale-press-dock));
+        scale: var(--scale-press-dock);
     }
 
     .dock-tab-button:focus:not(:focus-visible) {
         box-shadow: none;
     }
 
-    .dock-tab-button:focus-visible {
-        box-shadow: var(--focus-ring-shadow);
-        outline: none;
-    }
-
-    .dock-tab-button:disabled {
-        opacity: var(--opacity-disabled);
-        cursor: not-allowed;
-    }
+    /* focus-visible ring + disabled paint hoisted to the shared `:where()`
+       group at the top. */
 
     .dock-tab-button:is(.is-active, .active, [aria-current="page"], [aria-pressed="true"]) {
         background: var(--surface-tint-10);
@@ -958,6 +956,8 @@
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
+        /* AQ.W3 §W3.2 identity base */
+        scale: 1;
         gap: var(--dock-trigger-gap, 0.25rem);
         min-height: var(--dock-trigger-min-height, auto);
         padding:
@@ -973,7 +973,7 @@
         transition:
             background-color var(--dock-motion-fast),
             color var(--dock-motion-fast),
-            transform var(--dock-motion-fast),
+            scale var(--dock-motion-fast),
             opacity var(--dock-motion-fast);
     }
 
@@ -984,12 +984,12 @@
     }
 
     .dock-dropdown-trigger:hover:not(:disabled) {
-        transform: scale(var(--scale-hover-dock));
+        scale: var(--scale-hover-dock);
     }
 
     .dock-select-trigger:active:not(:disabled),
     .dock-dropdown-trigger:active:not(:disabled) {
-        transform: scale(var(--scale-press-dock));
+        scale: var(--scale-press-dock);
     }
 
     .dock-select-trigger:focus:not(:focus-visible),
@@ -998,24 +998,18 @@
         outline: none;
     }
 
+    /* focus-visible ring + disabled paint hoisted to the shared `:where()`
+       group at the top; this rule adds only the box-shadow fade transition. */
     .dock-select-trigger:focus-visible,
     .dock-dropdown-trigger:focus-visible {
-        box-shadow: var(--focus-ring-shadow);
-        outline: none;
         transition:
             background-color var(--dock-motion-fast),
             color var(--dock-motion-fast),
-            transform var(--dock-motion-fast),
+            scale var(--dock-motion-fast),
             opacity var(--dock-motion-fast),
             box-shadow var(--dock-motion-fast);
     }
 
-    .dock-select-trigger:disabled,
-    .dock-dropdown-trigger:disabled {
-        opacity: var(--opacity-disabled);
-        cursor: not-allowed;
-    }
-
     .dock-select-trigger:is(.is-active, .active, [aria-expanded="true"], [aria-pressed="true"]),
     .dock-dropdown-trigger:is(.is-active, .active, [aria-expanded="true"], [aria-pressed="true"]) {
         background: var(--muted);
@@ -1027,11 +1021,14 @@
         height: var(--dock-trigger-icon-size, 0.75rem);
         flex-shrink: 0;
         opacity: 0.5;
-        transition: transform var(--dock-motion-fast);
+        /* Individual-transform identity base (AQ.W3 §W3.2) — `rotate:` longhand
+           for family consistency (not a stacking-context hazard: child glyph). */
+        rotate: 0deg;
+        transition: rotate var(--dock-motion-fast);
     }
 
     .dock-select-trigger[data-state="open"] .dock-select-trigger__chevron {
-        transform: rotate(180deg);
+        rotate: 180deg;
     }
 
     @media (min-width: 640px) {
@@ -1072,12 +1069,15 @@
        that wires `var(--size-icon-btn)` for trigger sizing) inherit
        the same floor.
 
-       Density overrides (`[data-density="compact"]` etc.) still win
-       inside `@layer components` ordering — consumers that explicitly
-       opt into compact density on touch devices get their compact size
-       back. The media-query only lifts the *default* path. */
+       AP.W3 R0G-6 — selector is `.glass-dock[data-density]`, not bare
+       `.glass-dock`: the always-present density setter (0,2,0) shadowed a
+       bare (0,1,0) coarse floor, pinning the touch box at 40px. The
+       presence-selector (0,2,0) wins by source order, lifting
+       `--dock-control-size` to 44px — read by both the button box and the
+       dock width-math, so the slot reserves 44px (no overflow). Fine pointer
+       byte-identical. Proof: design/W1.2-motion-carve-and-dock.md §B.2. */
     @media (pointer: coarse) {
-        .glass-dock {
+        .glass-dock[data-density] {
             --dock-control-size: var(--dock-touch-target, 2.75rem);
             --size-icon-btn: var(--dock-touch-target, 2.75rem);
         }

package/dist/styles/drawer.css

@@ -46,7 +46,7 @@
     border-bottom: 0;
     border-start-start-radius: var(--radius-panel);
     border-start-end-radius: var(--radius-panel);
-    background-color: hsl(var(--background));
+    background-color: var(--background);
     box-shadow: var(--shadow-2xl);
 }
 
@@ -98,7 +98,7 @@
     width: var(--drawer-handle-w);
     height: var(--drawer-handle-h);
     border-radius: var(--radius-pill);
-    background-color: hsl(var(--drawer-handle-color));
+    background-color: var(--drawer-handle-color);
     opacity: var(--drawer-handle-opacity);
     transition: opacity var(--duration-fast) var(--ease-out),
         width var(--duration-fast) var(--ease-out);