@mkbabb/glass-ui 3.13.0 → 4.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@mkbabb/glass-ui",
-    "version": "3.13.0",
-    "description": "Glassmorphic design system \u2014 Vue 3.5 components, reka-ui primitives, Tailwind CSS v4 tokens",
+    "version": "4.0.1",
+    "description": "Glassmorphic design system — Vue 3.5 components, reka-ui primitives, Tailwind CSS v4 tokens",
     "license": "MIT",
     "repository": {
         "type": "git",
@@ -22,6 +22,12 @@
             "dock": [
                 "dist/dock.d.ts"
             ],
+            "drawer": [
+                "dist/drawer.d.ts"
+            ],
+            "focus-scope": [
+                "dist/focus-scope.d.ts"
+            ],
             "search": [
                 "dist/search.d.ts"
             ],
@@ -31,6 +37,9 @@
             "controls": [
                 "dist/controls.d.ts"
             ],
+            "color-swatch": [
+                "dist/color-swatch.d.ts"
+            ],
             "confirm-dialog": [
                 "dist/confirm-dialog.d.ts"
             ],
@@ -46,6 +55,12 @@
             "stacked-icons": [
                 "dist/stacked-icons.d.ts"
             ],
+            "icon-chip": [
+                "dist/icon-chip.d.ts"
+            ],
+            "border-progress": [
+                "dist/border-progress.d.ts"
+            ],
             "aurora": [
                 "dist/aurora.d.ts"
             ],
@@ -55,12 +70,24 @@
             "color": [
                 "dist/color.d.ts"
             ],
+            "easing": [
+                "dist/easing.d.ts"
+            ],
+            "fading-scroll": [
+                "dist/fading-scroll.d.ts"
+            ],
             "fourier-field": [
                 "dist/fourier-field.d.ts"
             ],
             "fourier-math": [
                 "dist/fourier-math.d.ts"
             ],
+            "concentric": [
+                "dist/concentric.d.ts"
+            ],
+            "dot-flow-field": [
+                "dist/dot-flow-field.d.ts"
+            ],
             "goo-blob": [
                 "dist/goo-blob.d.ts"
             ],
@@ -85,9 +112,15 @@
             "paper-backdrop": [
                 "dist/paper-backdrop.d.ts"
             ],
+            "pager-dots": [
+                "dist/pager-dots.d.ts"
+            ],
             "toggle-chip": [
                 "dist/toggle-chip.d.ts"
             ],
+            "spa-view": [
+                "dist/spa-view.d.ts"
+            ],
             "sortable-list": [
                 "dist/sortable-list.d.ts"
             ],
@@ -118,8 +151,8 @@
             "scrolling-text": [
                 "dist/scrolling-text.d.ts"
             ],
-            "underline": [
-                "dist/underline.d.ts"
+            "handmark": [
+                "dist/handmark.d.ts"
             ],
             "glass-panel": [
                 "dist/glass-panel.d.ts"
@@ -245,6 +278,8 @@
             "import": "./dist/tokens.js"
         },
         "./styles": "./dist/styles/index.css",
+        "./styles/critical": "./dist/styles/critical.css",
+        "./styles/deferred": "./dist/styles/deferred.css",
         "./styles/fonts": "./dist/styles/fonts.css",
         "./styles.css": "./dist/glass-ui.css",
         "./fonts/*": "./dist/fonts/*",
@@ -252,6 +287,14 @@
             "types": "./dist/dock.d.ts",
             "import": "./dist/dock.js"
         },
+        "./drawer": {
+            "types": "./dist/drawer.d.ts",
+            "import": "./dist/drawer.js"
+        },
+        "./focus-scope": {
+            "types": "./dist/focus-scope.d.ts",
+            "import": "./dist/focus-scope.js"
+        },
         "./search": {
             "types": "./dist/search.d.ts",
             "import": "./dist/search.js"
@@ -264,6 +307,10 @@
             "types": "./dist/controls.d.ts",
             "import": "./dist/controls.js"
         },
+        "./color-swatch": {
+            "types": "./dist/color-swatch.d.ts",
+            "import": "./dist/color-swatch.js"
+        },
         "./confirm-dialog": {
             "types": "./dist/confirm-dialog.d.ts",
             "import": "./dist/confirm-dialog.js"
@@ -284,6 +331,14 @@
             "types": "./dist/stacked-icons.d.ts",
             "import": "./dist/stacked-icons.js"
         },
+        "./icon-chip": {
+            "types": "./dist/icon-chip.d.ts",
+            "import": "./dist/icon-chip.js"
+        },
+        "./border-progress": {
+            "types": "./dist/border-progress.d.ts",
+            "import": "./dist/border-progress.js"
+        },
         "./aurora": {
             "types": "./dist/aurora.d.ts",
             "import": "./dist/aurora.js"
@@ -296,6 +351,14 @@
             "types": "./dist/color.d.ts",
             "import": "./dist/color.js"
         },
+        "./easing": {
+            "types": "./dist/easing.d.ts",
+            "import": "./dist/easing.js"
+        },
+        "./fading-scroll": {
+            "types": "./dist/fading-scroll.d.ts",
+            "import": "./dist/fading-scroll.js"
+        },
         "./fourier-field": {
             "types": "./dist/fourier-field.d.ts",
             "import": "./dist/fourier-field.js"
@@ -304,6 +367,14 @@
             "types": "./dist/fourier-math.d.ts",
             "import": "./dist/fourier-math.js"
         },
+        "./concentric": {
+            "types": "./dist/concentric.d.ts",
+            "import": "./dist/concentric.js"
+        },
+        "./dot-flow-field": {
+            "types": "./dist/dot-flow-field.d.ts",
+            "import": "./dist/dot-flow-field.js"
+        },
         "./goo-blob": {
             "types": "./dist/goo-blob.d.ts",
             "import": "./dist/goo-blob.js"
@@ -348,10 +419,18 @@
             "types": "./dist/paper-backdrop.d.ts",
             "import": "./dist/paper-backdrop.js"
         },
+        "./pager-dots": {
+            "types": "./dist/pager-dots.d.ts",
+            "import": "./dist/pager-dots.js"
+        },
         "./toggle-chip": {
             "types": "./dist/toggle-chip.d.ts",
             "import": "./dist/toggle-chip.js"
         },
+        "./spa-view": {
+            "types": "./dist/spa-view.d.ts",
+            "import": "./dist/spa-view.js"
+        },
         "./sortable-list": {
             "types": "./dist/sortable-list.d.ts",
             "import": "./dist/sortable-list.js"
@@ -384,9 +463,9 @@
             "types": "./dist/scrolling-text.d.ts",
             "import": "./dist/scrolling-text.js"
         },
-        "./underline": {
-            "types": "./dist/underline.d.ts",
-            "import": "./dist/underline.js"
+        "./handmark": {
+            "types": "./dist/handmark.d.ts",
+            "import": "./dist/handmark.js"
         },
         "./glass-panel": {
             "types": "./dist/glass-panel.d.ts",
@@ -555,9 +634,16 @@
         "proof:runtime": "node scripts/proof-runtime.mjs",
         "proof:theme": "node scripts/proof-theme-style.mjs",
         "proof:components-css": "node scripts/proof-components-css.mjs",
+        "proof:dist-css": "node scripts/proof-dist-css.mjs",
         "proof:resolution": "node scripts/proof-resolution-contract.mjs",
         "proof:consumer-staleness": "node scripts/proof-consumer-staleness.mjs",
         "proof:peer-conformance": "node scripts/proof-peer-conformance.mjs",
+        "proof:constellation-spine": "node scripts/proof-constellation-spine.mjs",
+        "proof:close-battery-parity": "node scripts/proof-close-battery-parity.mjs",
+        "proof:no-layout-animation": "node scripts/proof-no-layout-animation.mjs",
+        "proof:css-critical": "node scripts/proof-css-critical.mjs",
+        "proof:lighthouse": "node scripts/proof-lighthouse.mjs",
+        "proof:perf-producer": "node scripts/proof-perf-producer.mjs",
         "proof:phantom-classes": "node scripts/proof-phantom-classes.mjs",
         "proof:vt-names": "node scripts/proof-vt-names.mjs",
         "proof:dock-animation-live": "node scripts/proof-dock-animation-live.mjs",
@@ -587,8 +673,12 @@
         "proof:motion-demo": "node scripts/proof-motion-demo.mjs",
         "proof:motion2": "node scripts/proof-motion2.mjs",
         "proof:rail3": "node scripts/proof-rail3.mjs",
+        "proof:dock-sections": "node scripts/proof-dock-sections.mjs",
+        "proof:dock-morph-insitu": "node scripts/proof-dock-morph-insitu.mjs",
+        "proof:shell-hold": "node scripts/proof-shell-hold.mjs",
         "proof:az-reflect": "node scripts/proof-az-reflect.mjs",
         "proof:az-final": "node scripts/proof-az-final.mjs",
+        "proof:ba-final": "node scripts/proof-ba-final.mjs",
         "proof:shell-identity": "node scripts/proof-shell-identity.mjs",
         "proof:blob-studio": "node scripts/proof-blob-studio.mjs",
         "proof:blob-studio-config": "node scripts/proof-blob-studio-config.mjs",
@@ -600,8 +690,50 @@
         "proof:dock-css-split": "node scripts/proof-dock-controls-split.mjs",
         "proof:design-idiom-localization": "node scripts/proof-design-idiom-localization.mjs",
         "proof:hierarchy": "node scripts/proof-hierarchy.mjs",
+        "proof:eyebrow-union": "node scripts/proof-eyebrow-union.mjs",
+        "proof:drawer-abrogate": "node scripts/proof-drawer-abrogate.mjs",
+        "proof:card-padding": "node scripts/proof-card-padding.mjs",
+        "proof:doc-override-idiom": "node scripts/proof-doc-override-idiom.mjs",
+        "proof:lineage-probe": "node scripts/proof-lineage-probe.mjs",
+        "proof:concentric": "node scripts/proof-concentric.mjs",
+        "proof:crossrepo-asks": "node scripts/proof-crossrepo-asks.mjs",
+        "proof:strict-freshness-armed": "node scripts/proof-strict-freshness-armed.mjs",
+        "proof:live-verified-ledger:strict": "node scripts/proof-live-verified-ledger.mjs --tranche=AY --strict-freshness && node scripts/proof-live-verified-ledger.mjs --tranche=BB --strict-freshness",
+        "proof:precept-current": "node scripts/proof-precept-current.mjs",
+        "proof:aur-kuwahara": "node scripts/proof-aur-kuwahara.mjs",
+        "proof:flow-field": "node scripts/proof-flow-field.mjs",
+        "proof:nda-decided": "node scripts/proof-nda-decided.mjs",
+        "proof:aurora-curl-warp": "node scripts/proof-aurora-curl-warp.mjs",
+        "proof:spring-crisp": "node scripts/proof-spring-crisp.mjs",
+        "proof:spa-view": "node scripts/proof-spa-view.mjs",
+        "proof:card-tier-alpha": "node scripts/proof-card-tier-alpha.mjs",
+        "proof:dockmorph-cta": "node scripts/proof-dockmorph-cta.mjs",
+        "proof:gpu-substrate-single": "node scripts/proof-gpu-substrate-single.mjs",
+        "proof:desktop-reserve": "node scripts/proof-desktop-reserve.mjs",
+        "proof:pointer-velocity": "node scripts/proof-pointer-velocity.mjs",
+        "proof:border-progress": "node scripts/proof-border-progress.mjs",
+        "proof:demo-design": "node scripts/proof-demo-design.mjs",
+        "proof:no-dual-path": "node scripts/proof-no-dual-path.mjs",
+        "proof:liquid-reveal": "node scripts/proof-liquid-reveal.mjs",
+        "proof:glass-depth": "node scripts/proof-glass-depth.mjs",
+        "proof:metal-shimmer": "node scripts/proof-metal-shimmer.mjs",
+        "proof:glass-accent": "node scripts/proof-glass-accent.mjs",
+        "proof:lensing": "node scripts/proof-lensing.mjs",
+        "proof:press-unify": "node scripts/proof-press-unify.mjs",
+        "proof:scroll-motion": "node scripts/proof-scroll-motion.mjs",
+        "proof:drag-morph": "node scripts/proof-drag-morph.mjs",
+        "proof:display-tracking": "node scripts/proof-display-tracking.mjs",
+        "proof:paper-grid": "node scripts/proof-paper-grid.mjs",
+        "proof:control-tokens": "node scripts/proof-control-tokens.mjs",
+        "proof:button-glass": "node scripts/proof-button-glass.mjs",
+        "proof:phase-palette": "node scripts/proof-phase-palette.mjs",
+        "proof:aurora-swraster": "node scripts/proof-aurora-swraster.mjs",
+        "proof:on-glass-fg": "node scripts/proof-on-glass-fg.mjs",
+        "proof:dock-morph-family": "node scripts/proof-dock-morph-family.mjs",
         "proof:suffuse": "node scripts/proof-suffuse.mjs",
+        "proof:suffuse2": "node scripts/proof-suffuse2.mjs",
         "proof:colocation": "node scripts/proof-colocation.mjs",
+        "proof:claude-structure-sync": "node scripts/proof-claude-structure-sync.mjs",
         "proof:tailwind-v4-idiom": "node scripts/proof-tailwind-v4-idiom.mjs",
         "proof:au-w9-consumers": "node scripts/proof-au-w9-consumers.mjs",
         "proof:shadow-contract": "node scripts/proof-shadow-contract.mjs",
@@ -720,15 +852,38 @@
         "proof:readme-meta-clean": "node scripts/proof-readme-meta-clean.mjs",
         "proof:convergence-fit-coherent": "node scripts/proof-convergence-fit-coherent.mjs",
         "proof:adaptive-glass": "node scripts/proof-adaptive-glass.mjs",
+        "proof:dark-material": "node scripts/proof-dark-material.mjs",
+        "proof:no-gray": "node scripts/proof-no-gray.mjs",
+        "proof:surface-axis": "node scripts/proof-surface-axis.mjs",
+        "proof:menu-glass": "node scripts/proof-menu-glass.mjs",
+        "proof:pager-ring": "node scripts/proof-pager-ring.mjs",
+        "proof:icon-chip": "node scripts/proof-icon-chip.mjs",
+        "proof:easing-primitive": "node scripts/proof-easing-primitive.mjs",
+        "proof:handmark": "node scripts/proof-handmark.mjs",
+        "proof:ba-animate": "node scripts/proof-ba-animate.mjs",
+        "proof:stage": "node scripts/proof-stage.mjs",
+        "proof:fading-scroll": "node scripts/proof-fading-scroll.mjs",
+        "proof:emission": "node scripts/proof-emission.mjs",
+        "proof:goo-redress": "node scripts/proof-goo-redress.mjs",
+        "proof:glass-cal": "node scripts/proof-glass-cal.mjs",
+        "proof:dock-plate-clearance": "node scripts/proof-dock-plate-clearance.mjs",
+        "proof:atlas-ab": "node scripts/proof-atlas-ab.mjs",
+        "proof:config-chassis": "node scripts/proof-config-chassis.mjs",
+        "proof:progress-gradient": "node scripts/proof-progress-gradient.mjs",
+        "proof:demo-affordances": "node scripts/proof-demo-affordances.mjs",
+        "proof:fourier-studio": "node scripts/proof-fourier-studio.mjs",
         "proof:dark-semantic-contrast": "node scripts/proof-dark-semantic-contrast.mjs",
         "proof:glass-material-demo": "node scripts/proof-glass-material-demo.mjs",
         "proof:blob-live-truth": "node scripts/proof-blob-live-truth.mjs",
         "proof:blob-config-atoms": "node scripts/proof-blob-config-atoms.mjs",
         "proof:blob3-strip": "node scripts/proof-blob3-strip.mjs",
         "proof:blob-config": "node scripts/proof-blob-config.mjs",
-        "proof:tabs-unified": "node scripts/proof-tabs-unified.mjs",
+        "proof:tabs-std": "node scripts/proof-tabs-std.mjs",
         "proof:glass-material-sota": "node scripts/proof-glass-material-sota.mjs",
-        "proof:primitive-affordance": "node scripts/proof-primitive-affordance.mjs",
+        "proof:no-dead-token": "node scripts/proof-no-dead-token.mjs",
+        "proof:affordance-contrast": "node scripts/proof-affordance-contrast.mjs",
+        "proof:datatable-split": "node scripts/proof-datatable-split.mjs",
+        "proof:dock-big-dock": "node scripts/proof-dock-big-dock.mjs",
         "proof:reka-binding-idiom": "node scripts/proof-reka-binding-idiom.mjs",
         "proof:animation-coherence": "node scripts/proof-animation-coherence.mjs",
         "proof:design-md-current": "node scripts/proof-design-md-current.mjs",
@@ -740,37 +895,44 @@
         "proof:blob-integration": "node scripts/proof-blob-integration.mjs",
         "proof:gate-script-parity": "node scripts/proof-gate-script-parity.mjs",
         "proof:all": "node scripts/gates.mjs --run local",
-        "proof:live-verified-ledger": "node scripts/proof-live-verified-ledger.mjs --tranche=AY",
+        "proof:full": "node scripts/gates.mjs --run full",
+        "proof:live-verified-ledger": "node scripts/proof-live-verified-ledger.mjs --tranche=BB",
         "proof:live-verified-ledger:ay": "node scripts/proof-live-verified-ledger.mjs --tranche=AY",
         "proof:live-verified-ledger:az": "node scripts/proof-live-verified-ledger.mjs --tranche=AZ",
         "proof:live-verified-ledger:ax": "node scripts/proof-live-verified-ledger.mjs --tranche=AX",
+        "proof:live-verified-ledger:ba": "node scripts/proof-live-verified-ledger.mjs --tranche=BA",
+        "proof:live-verified-ledger:bb": "node scripts/proof-live-verified-ledger.mjs --tranche=BB",
         "proof:disposition-live": "node scripts/proof-disposition-live.mjs",
         "proof:gen-ci-fresh": "node scripts/proof-gen-ci-fresh.mjs",
         "proof:gate-manifest-sound": "node scripts/proof-gate-manifest-sound.mjs",
+        "proof:ba-gestalt": "node scripts/proof-ba-gestalt.mjs",
+        "proof:visual-runner": "node scripts/proof-visual-runner.mjs",
         "gates:verify-ci": "node scripts/gates.mjs --verify-ci",
         "gates:emit-ci": "node scripts/gates.mjs --emit-ci",
+        "gates:pi": "node scripts/gates.mjs --run pi",
         "profile:bundle": "node scripts/profile-bundle.mjs",
         "profile:budget": "node scripts/profile-bundle.mjs --enforce",
         "profile:aurora": "node scripts/profile-aurora.mjs",
         "validate-consumers": "scripts/validate-consumers.sh",
         "release": "bash scripts/release.sh",
-        "prepublishOnly": "npm run build && npm test"
+        "prepublishOnly": "npm run build && npm test && npm run proof:dist-css"
     },
     "engines": {
         "node": ">=22"
     },
     "peerDependencies": {
         "@lucide/vue": "^1.16.0",
-        "@mkbabb/keyframes.js": "^2.2.0 || ^3.0.0 || ^4.0.0",
-        "@mkbabb/value.js": "^0.10.0 || ^0.11.0",
+        "@mkbabb/keyframes.js": "^4.0.0",
+        "@mkbabb/pencil-boil": "^0.4.1",
+        "@mkbabb/value.js": "^0.13.0 || ^1.0.0",
         "@vueuse/core": "^14.0",
         "class-variance-authority": "^0.7",
         "clsx": "^2.0",
         "embla-carousel-vue": "^8.0",
+        "perfect-freehand": "^1.2.3",
         "reka-ui": "^2.0",
         "tailwindcss": "^4.0",
         "tw-animate-css": "^1.2.5",
-        "vaul-vue": "^0.4",
         "vue": "^3.5"
     },
     "peerDependenciesMeta": {
@@ -783,19 +945,26 @@
         "@mkbabb/keyframes.js": {
             "optional": true
         },
+        "@mkbabb/pencil-boil": {
+            "optional": true
+        },
         "@mkbabb/value.js": {
             "optional": true
         },
+        "perfect-freehand": {
+            "optional": true
+        },
         "tw-animate-css": {
             "optional": true
         }
     },
     "devDependencies": {
-        "@lucide/vue": "^1.16.0",
-        "@mkbabb/keyframes.js": "^4.1.0",
-        "@mkbabb/value.js": "^0.10.0",
-        "@tailwindcss/postcss": "^4.3.0",
-        "@tailwindcss/vite": "^4.3.0",
+        "@lucide/vue": "^1.20.0",
+        "@mkbabb/keyframes.js": "^4.3.0",
+        "@mkbabb/pencil-boil": "^0.4.1",
+        "@mkbabb/value.js": "^0.13.0 || ^1.0.0",
+        "@tailwindcss/postcss": "^4.3.1",
+        "@tailwindcss/vite": "^4.3.1",
         "@types/node": "^24.12.3",
         "@vitejs/plugin-vue": "^6.0.7",
         "@vue/test-utils": "^2.4.10",
@@ -804,15 +973,14 @@
         "clsx": "^2.1.1",
         "embla-carousel-vue": "^8.6.0",
         "happy-dom": "^20.9.0",
-        "reka-ui": "^2.9.7",
-        "tailwindcss": "^4.3.0",
+        "reka-ui": "^2.9",
+        "tailwindcss": "^4.3.1",
         "tw-animate-css": "^1.2.5",
         "typescript": "^6.0.3",
-        "vaul-vue": "^0.4.0",
-        "vite": "^8.0.13",
-        "vitest": "^4.1.7",
+        "vite": "^8",
+        "vitest": "^4.1.9",
         "vue": "^3.5.34",
         "vue-router": "^4.6.4",
-        "vue-tsc": "^3.3.1"
+        "vue-tsc": "^3.3.5"
     }
 }

package/src/styles/animations.css

@@ -134,39 +134,29 @@
     }
 }
 
-/* ── Gold shimmer: metallic text highlight sweep ── */
-
-@keyframes gold-shimmer-slide {
+/* ── Metal shimmer: the metal-PARAMETERIZED text/border highlight sweep ──
+ * BB.W-METAL-SHIMMER — the ONE metal-agnostic sweep (the gold-only
+ * `gold-shimmer-slide` RETIRED onto it — clean break, no alias). The keyframe is
+ * PURE position (ZERO baked metal color): the metal hue is the recipe's job via
+ * the `--metal-shimmer-color`-bound gradient (see utilities/metal.css). The SAME
+ * keyframe sweeps a gold, silver, or bronze gradient depending only on the channel,
+ * usable for BOTH text-clip (the `.metal-*` text register) AND border/mask (the
+ * `.metal-*-border` swept RIM) — the position pass shifts whatever gradient the
+ * surface paints. The `200% 0`→`-200% 0` shape carries the gold READ exactly
+ * (byte-faithful to the retired `gold-shimmer-slide`). The slow `--duration-metal`
+ * (6s) clock is set at the consumer (the metal recipe), not baked here. */
+@keyframes metal-shimmer-sweep {
     0%   { background-position: 200% 0; }
     100% { background-position: -200% 0; }
 }
 
-/* ── Sparkle sweep: four-point star traverses a surface diagonally ──
- *
- * Reserved for the chassis primary-action hover (dock-tab-button[data-tier="primary"])
- * and the `Complete!` shimmer cycle. Single keyframe, ~600ms per pass; the
- * consumer rule sets the duration and easing. Reduced-motion guard at the
- * consumer site (per surface — not all sparkle uses share the same gate).
+/* ── Sparkle sweep RETIRED (BA.W-GLASS-CAL, H2a) ──
+ * The `@keyframes sparkle-sweep` + its reduced-motion stub are DELETED with the
+ * disco recipe family — the `btn-audacious` ::after star (its sole consumer) is
+ * gone, and the dock-tab primary tier collapsed onto the calm glass register.
+ * The `Complete!` celebratory shimmer rides the metal-shimmer-sweep / shimmer
+ * keyframes above, never sparkle-sweep.
  */
-@keyframes sparkle-sweep {
-    0% {
-        transform: translate(-30%, -30%) scale(0.5);
-        opacity: 0;
-    }
-    25% {
-        opacity: 1;
-    }
-    100% {
-        transform: translate(180%, 180%) scale(1.2);
-        opacity: 0;
-    }
-}
-
-@media (prefers-reduced-motion: reduce) {
-    @keyframes sparkle-sweep {
-        0%, 100% { opacity: 0; transform: none; }
-    }
-}
 
 /* ── Pulse dot bounce: dots variant of <Pulse> ──
  *
@@ -333,9 +323,26 @@
     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(--spring-bouncy);
+        /* BB.W-LIQUID-REVEAL — the coupled blur-settle decongest (the iOS
+           "light-bending modulation" arrival). The surface's OWN pixels decongest
+           `filter: blur(--top-layer-enter-blur)` → `blur(0)` AS it blooms (a `filter`
+           radius interp is compositor-safe; it rides the surface's pixels, so it does
+           NOT fight the resting glass-tier `backdrop-filter` plate blur — the
+           REVEAL-TOPLAYER-NO-BLUR fix, the twin of the `.glass-reveal` recipe's blur
+           leg, glass/reveal.css). */
+        filter: blur(var(--top-layer-enter-blur, 4px));
+        transition-property: opacity, scale, filter, display, overlay;
+        /* BA.W-GLASS-CAL Unit 3 — the enter rides the bouncy spring's OWN settle
+           clock (`--spring-bouncy-duration`, the 2%-band envelope settle) rather
+           than the generic `--duration-normal`, so the emphatic dialog/popover
+           entrance bounce reads fully instead of being clipped at 0.3s. The blur
+           decongest rides the no-overshoot `--ease-out` (EFFECTS), the scale the
+           bouncy spring (SPATIAL) — the W-MOTION-CANON split. */
+        transition-duration: var(--spring-bouncy-duration),
+            var(--spring-bouncy-duration), var(--spring-bouncy-duration),
+            var(--spring-bouncy-duration), var(--spring-bouncy-duration);
+        transition-timing-function: var(--spring-bouncy), var(--spring-bouncy),
+            var(--ease-out), linear, linear;
         transition-behavior: allow-discrete;
     }
 
@@ -345,9 +352,11 @@
     dialog.glass-top-layer[open] {
         opacity: 1;
         scale: 1;
+        filter: blur(0);
         @starting-style {
             opacity: 0;
             scale: var(--top-layer-enter-scale, 0.96);
+            filter: blur(var(--top-layer-enter-blur, 4px));
         }
     }
 

package/src/styles/border-progress.css

@@ -0,0 +1,109 @@
+/* BB.W-BORDER-PROGRESS — progress IS the element's border.
+ *
+ * The masked-conic ring consumption (the registration lives in
+ * tokens/property-regs.css §18, mirroring the specular split: the @property reg
+ * there, the consumption here). The ring paints a `conic-gradient` MASK-COMPOSITED
+ * into the border band so ONLY the band paints AND it FOLLOWS the host
+ * `border-radius` — a `border-image` SQUARES the corners (measured inferior,
+ * forbidden), a floating-bar child re-introduces allocation (forbidden). The host
+ * INTERIOR is untouched: a glass card still transmits the backdrop THROUGH its
+ * content box (the AX.W54 glass-first identity — the ring is a border-band cut-out,
+ * not an opaque overlay).
+ *
+ * Compositor-only: the sweep rides the registered `--border-progress-fill`
+ * <percentage>; no layout property animates (`proof:no-layout-animation`). The
+ * unregistered fallback is safe (the `initial-value` paints the resting ring; the
+ * cross-fade collapses to it on a non-supporting engine — Chromium 85+/Safari
+ * 16.4+, within the deployment floor). */
+
+.border-progress {
+    position: relative;
+    display: block;
+    border-radius: var(--border-progress-radius, 16px);
+    /* The host reserves the border band the ring paints into (allocation-free —
+       the content box is untouched, no reflow). */
+    padding: 0;
+}
+
+/* The ring layer — inset over the host, the border band the conic paints into.
+   The `border` width IS the band thickness; the conic is mask-composited so the
+   padding-box (interior) is EXCLUDED from the border-box (the radius-following
+   cut-out). */
+.border-progress__ring {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    border: var(--border-progress-width, 12px) solid transparent;
+    pointer-events: none;
+    /* The spectrum conic, swept to --border-progress-fill. The colored arc runs
+       from the top (12 o'clock) clockwise to the fill fraction; past it is
+       transparent so the resting band shows ONLY the filled spectrum. */
+    background:
+        conic-gradient(
+            from 0deg,
+            var(--border-progress-spectrum, var(--section-color-7)),
+            transparent var(--border-progress-fill, 0%),
+            transparent 100%
+        );
+    /* THE RADIUS-FOLLOWING CUT-OUT — the house border-ring idiom: paint a
+       border-box fill, EXCLUDE a padding-box fill, leaving only the border band,
+       which follows `border-radius` exactly (a border-image cannot). */
+    -webkit-mask:
+        linear-gradient(#fff 0 0) padding-box,
+        linear-gradient(#fff 0 0) border-box;
+    -webkit-mask-composite: xor;
+    mask:
+        linear-gradient(#fff 0 0) padding-box,
+        linear-gradient(#fff 0 0) border-box;
+    mask-composite: exclude;
+}
+
+/* THE COVERAGE AXIS — ONE conic-mask mechanism, two coverage masks (NOT a second
+   recipe). `bottom-edge` adds a SECOND mask layer scoping the painted band to the
+   bottom edge only; it composes WITH the border-band cut-out above (the mask
+   stack intersects), so the bottom register reuses the exact conic + radius
+   cut-out — the dock-orientation `dim`-idiom discipline (no parallel fork). */
+.border-progress[data-coverage="bottom-edge"] .border-progress__ring {
+    -webkit-mask:
+        linear-gradient(#fff 0 0) padding-box,
+        linear-gradient(#fff 0 0) border-box,
+        linear-gradient(to top, #fff 0, #fff var(--border-progress-width, 12px), transparent var(--border-progress-width, 12px));
+    -webkit-mask-composite: xor, source-in;
+    mask:
+        linear-gradient(#fff 0 0) padding-box,
+        linear-gradient(#fff 0 0) border-box,
+        linear-gradient(to top, #fff 0, #fff var(--border-progress-width, 12px), transparent var(--border-progress-width, 12px));
+    mask-composite: exclude, intersect;
+}
+
+/* The content box — the host's own surface (a glass card, a chassis). It is
+   untouched by the ring (backdrop-intact); the ring sits over the border band
+   only. */
+.border-progress__content {
+    position: relative;
+    z-index: 1;
+    border-radius: inherit;
+    height: 100%;
+}
+
+/* THE MILESTONE PULSE — a brief brightness bloom on a crossed phase edge. The
+   pulse is PRM-gated (no edge-pulse under reduced motion — the ring snaps to the
+   new value). Compositor-only (filter brightness, never a layout property). */
+@media (prefers-reduced-motion: no-preference) {
+    .border-progress[data-milestone] .border-progress__ring {
+        animation: border-progress-milestone-pulse
+            var(--spring-snappy-duration, 0.34s) var(--ease-out, ease-out);
+    }
+}
+
+@keyframes border-progress-milestone-pulse {
+    0% {
+        filter: brightness(1);
+    }
+    40% {
+        filter: brightness(1.35);
+    }
+    100% {
+        filter: brightness(1);
+    }
+}