@mkbabb/glass-ui 3.8.0 → 3.9.0

package/dist/toast.js

@@ -1,2 +1,2 @@
-import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "./Toaster-CabYEEF_.js";
+import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "./Toaster-1rYWrmAm.js";
 export { t as Toast, o as ToastAction, i as ToastClose, e as ToastDescription, n as ToastTitle, s as Toaster, r as toast, a as useToast };

package/dist/toggle-group.js

@@ -1,2 +1,2 @@
-import { n as e, t } from "./ToggleGroupItem-CkXUcBlt.js";
+import { n as e, t } from "./ToggleGroupItem-Cev4pOVK.js";
 export { e as ToggleGroup, t as ToggleGroupItem };

package/dist/{useAnimatedNumber-C_3wZLx4.js → useAnimatedNumber-C5I3wWd8.js}

@@ -1,4 +1,4 @@
-import { n as e, t } from "./constants-BPOqYJAm.js";
+import { n as e, t } from "./constants-CS75AWHG.js";
 import { getCurrentScope as n, onScopeDispose as r, readonly as i, ref as a, shallowRef as o, toValue as s, watch as c } from "vue";
 import { SmoothProgress as l } from "@mkbabb/keyframes.js";
 //#region src/composables/motion/useAnimatedNumber.ts

package/dist/{useConfiguratorState-CMff4GzH.js → useConfiguratorState-DxAqksK6.js}

@@ -22,7 +22,11 @@ var M = k.use, N = {
 	class: "flex gap-2 overflow-x-auto scroll-fade-mask scrollbar-hidden",
 	role: "tablist",
 	"aria-label": "Presets"
-}, F = ["aria-selected", "onClick"], I = { class: "flex flex-col" }, L = {
+}, F = [
+	"aria-selected",
+	"data-active",
+	"onClick"
+], I = { class: "flex flex-col" }, L = {
 	key: 1,
 	class: "configurator-footer shrink-0 border-t border-border/40 px-3 py-2"
 }, R = /* @__PURE__ */ p({
@@ -67,6 +71,7 @@ var M = k.use, N = {
 			}
 		});
 		return (n, r) => (_(), l("section", {
+			"data-slot": "configurator",
 			class: h(a.value),
 			style: g(d.value)
 		}, [u("div", { class: h(w(e)("configurator-stage relative min-h-0 min-w-0 overflow-hidden", f.value)) }, [x(n.$slots, "stage")], 2), u("aside", { class: h(w(e)("configurator-aside flex min-h-0 min-w-0 flex-col border-t border-border/40 lg:border-t-0", m.value, p.value)) }, [
@@ -77,8 +82,10 @@ var M = k.use, N = {
 				key: n.key,
 				type: "button",
 				role: "tab",
+				"data-slot": "configurator-preset",
 				"aria-selected": n.key === t.activePreset,
-				class: h(w(e)("focus-ring shrink-0 rounded-pill border px-3 py-1 text-xs font-medium transition-colors", n.key === t.activePreset ? "border-foreground/40 bg-foreground text-background" : "border-border/40 bg-card/40 text-foreground hover:bg-card/70")),
+				"data-active": n.key === t.activePreset || void 0,
+				class: h(w(e)("tap-squish focus-ring transition-control shrink-0 rounded-pill border px-3 py-1 text-xs font-medium", n.key === t.activePreset ? "glass-quiet border-border/50 text-foreground" : "border-border/40 bg-card/40 text-foreground hover:bg-card/70")),
 				onClick: (e) => i("select-preset", n.key)
 			}, S(n.label), 11, F))), 128))])])])) : c("", !0),
 			u("div", { class: h(w(e)("configurator-controls flex-1 min-h-0", v.value)) }, [x(n.$slots, "controls", {
@@ -101,7 +108,7 @@ var M = k.use, N = {
 	"aria-hidden",
 	"inert",
 	"data-state"
-], G = { class: "min-h-0 overflow-hidden" }, K = /* @__PURE__ */ p({
+], G = { class: "min-h-0 overflow-hidden" }, K = /* @__PURE__ */ r(/* @__PURE__ */ p({
 	__name: "ConfiguratorLayer",
 	props: /* @__PURE__ */ m({
 		label: {},
@@ -143,17 +150,19 @@ var M = k.use, N = {
 		}
 		let p = s(() => i.value ? "open" : "closed");
 		return (a, s) => (_(), l("div", {
+			"data-slot": "configurator-layer",
 			class: h(w(e)("configurator-layer border-b border-border/40 last:border-b-0", r.class)),
 			"data-state": p.value
 		}, [u("button", {
 			type: "button",
-			class: h(w(e)("configurator-layer-trigger", "group flex w-full items-center justify-between gap-2 px-3 py-2", "text-left transition-colors hover:bg-foreground/5 focus-ring")),
+			"data-slot": "configurator-layer-trigger",
+			class: h(w(e)("configurator-layer-trigger", "group flex w-full items-center justify-between gap-2 px-3 py-2", "tap-squish transition-control text-left hover:bg-foreground/5 focus-ring")),
 			"aria-expanded": i.value,
 			"aria-controls": o.value,
 			"data-state": p.value,
 			onClick: d
 		}, [u("div", V, [u("span", H, S(t.label), 1), t.sub ? (_(), l("span", U, S(t.sub), 1)) : c("", !0)]), f(w(n), {
-			class: "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-180",
+			class: "configurator-layer-chevron h-4 w-4 shrink-0 text-muted-foreground group-data-[state=open]:rotate-180",
 			"aria-hidden": "true"
 		})], 10, B), u("div", {
 			id: o.value,
@@ -161,11 +170,11 @@ var M = k.use, N = {
 			"aria-hidden": !i.value,
 			inert: !i.value || void 0,
 			"data-state": p.value,
-			class: "configurator-layer-region grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none",
+			class: "configurator-layer-region grid motion-reduce:transition-none",
 			style: g({ gridTemplateRows: i.value ? "1fr" : "0fr" })
-		}, [u("div", G, [u("div", { class: h(w(e)("configurator-layer-body px-3 py-2 space-y-2", r.dividers && "[&>*+*]:border-t [&>*+*]:border-border/30 [&>*+*]:pt-2", r.bodyClass)) }, [x(a.$slots, "default")], 2)])], 12, W)], 10, z));
+		}, [u("div", G, [u("div", { class: h(w(e)("configurator-layer-body px-3 py-2 space-y-2", r.dividers && "[&>*+*]:border-t [&>*+*]:border-border/30 [&>*+*]:pt-2", r.bodyClass)) }, [x(a.$slots, "default", {}, void 0, !0)], 2)])], 12, W)], 10, z));
 	}
-}), q = ["data-density"], J = { class: "flex items-baseline justify-between gap-3" }, Y = { class: "flex min-w-0 items-baseline gap-2" }, X = {
+}), [["__scopeId", "data-v-1e14935d"]]), q = ["data-density"], J = { class: "flex items-baseline justify-between gap-3" }, Y = { class: "flex min-w-0 items-baseline gap-2" }, X = {
 	key: 0,
 	class: "truncate text-micro font-mono text-muted-foreground/70"
 }, Z = ["aria-label"], Q = { class: "flex items-center" }, $ = {
@@ -191,6 +200,7 @@ var M = k.use, N = {
 	setup(t, { emit: n }) {
 		let r = t, i = n, o = M(), p = s(() => r.density ?? o?.value ?? void 0);
 		return (n, o) => (_(), l("div", {
+			"data-slot": "configurator-row",
 			class: h(w(e)("configurator-row flex flex-col gap-1.5 py-2", r.class)),
 			"data-density": p.value
 		}, [
@@ -200,7 +210,8 @@ var M = k.use, N = {
 			}), t.name ? (_(), l("span", X, S(t.name), 1)) : c("", !0)]), t.canReset ? (_(), l("button", {
 				key: 0,
 				type: "button",
-				class: "focus-ring inline-flex h-6 w-6 items-center justify-center rounded-pill text-muted-foreground/60 transition-colors hover:bg-foreground/5 hover:text-foreground active:scale-[var(--scale-press,0.97)]",
+				"data-slot": "configurator-reset",
+				class: "tap-squish transition-control focus-ring inline-flex h-6 w-6 items-center justify-center rounded-pill text-muted-foreground/60 hover:bg-foreground/5 hover:text-foreground",
 				"aria-label": `Reset ${t.label}`,
 				onClick: o[0] ||= (e) => i("reset")
 			}, [f(w(O), {
@@ -211,7 +222,7 @@ var M = k.use, N = {
 			t.description ? (_(), l("p", $, S(t.description), 1)) : c("", !0)
 		], 10, q));
 	}
-}), [["__scopeId", "data-v-1b71284c"]]);
+}), [["__scopeId", "data-v-377e5920"]]);
 //#endregion
 //#region src/components/custom/configurator/useConfiguratorState.ts
 function te(e) {

package/dist/watercolor-dot.js

@@ -1,5 +1,5 @@
 import { t as e } from "./_plugin-vue_export-helper-ok8pgSl5.js";
-import { n as t, t as n } from "./prng-COGhh02-.js";
+import { n as t, t as n } from "./prng-wHuHlNHE.js";
 import { computed as r, createBlock as i, createElementVNode as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, onUnmounted as l, openBlock as u, ref as d, renderSlot as f, resolveDynamicComponent as p, toRef as m, useId as h, watch as g, withCtx as _ } from "vue";
 //#region src/components/custom/watercolor-dot/prng.ts
 function v(e, t, n) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mkbabb/glass-ui",
-    "version": "3.8.0",
+    "version": "3.9.0",
     "description": "Glassmorphic design system — Vue 3.5 components, reka-ui primitives, Tailwind CSS v4 tokens",
     "license": "MIT",
     "repository": {
@@ -46,9 +46,6 @@
             "stacked-icons": [
                 "dist/stacked-icons.d.ts"
             ],
-            "glass-carousel": [
-                "dist/glass-carousel.d.ts"
-            ],
             "aurora": [
                 "dist/aurora.d.ts"
             ],
@@ -115,12 +112,6 @@
             "instrument-rail": [
                 "dist/instrument-rail.d.ts"
             ],
-            "glyph-face": [
-                "dist/glyph-face.d.ts"
-            ],
-            "disco-glyph": [
-                "dist/disco-glyph.d.ts"
-            ],
             "hover-popover": [
                 "dist/hover-popover.d.ts"
             ],
@@ -154,9 +145,6 @@
             "animated-digit": [
                 "dist/animated-digit.d.ts"
             ],
-            "responsive-tabs": [
-                "dist/responsive-tabs.d.ts"
-            ],
             "motion": [
                 "dist/motion.d.ts"
             ],
@@ -293,10 +281,6 @@
             "types": "./dist/stacked-icons.d.ts",
             "import": "./dist/stacked-icons.js"
         },
-        "./glass-carousel": {
-            "types": "./dist/glass-carousel.d.ts",
-            "import": "./dist/glass-carousel.js"
-        },
         "./aurora": {
             "types": "./dist/aurora.d.ts",
             "import": "./dist/aurora.js"
@@ -349,10 +333,6 @@
             "types": "./dist/animated-digit.d.ts",
             "import": "./dist/animated-digit.js"
         },
-        "./responsive-tabs": {
-            "types": "./dist/responsive-tabs.d.ts",
-            "import": "./dist/responsive-tabs.js"
-        },
         "./status-dot": {
             "types": "./dist/status-dot.d.ts",
             "import": "./dist/status-dot.js"
@@ -405,14 +385,6 @@
             "types": "./dist/instrument-rail.d.ts",
             "import": "./dist/instrument-rail.js"
         },
-        "./glyph-face": {
-            "types": "./dist/glyph-face.d.ts",
-            "import": "./dist/glyph-face.js"
-        },
-        "./disco-glyph": {
-            "types": "./dist/disco-glyph.d.ts",
-            "import": "./dist/disco-glyph.js"
-        },
         "./hover-popover": {
             "types": "./dist/hover-popover.d.ts",
             "import": "./dist/hover-popover.js"
@@ -559,8 +531,8 @@
         "dev": "vite",
         "build": "vite build && npm run emit-types",
         "build:watch": "vite build --watch",
-        "prepare": "test -f dist/glass-ui.js -a -f dist/index.d.ts || npm run build",
-        "typecheck": "vue-tsc --noEmit",
+        "prepare": "node scripts/install-hooks.mjs && (test -f dist/glass-ui.js -a -f dist/index.d.ts || npm run build)",
+        "typecheck": "vue-tsc --noEmit && vue-tsc --noEmit -p tsconfig.test.json",
         "test": "vitest run",
         "verify-export-types": "node scripts/verify-export-types.mjs",
         "audit:stash": "node scripts/audit-stash-list.mjs",
@@ -577,6 +549,7 @@
         "proof:theme": "node scripts/proof-theme-style.mjs",
         "proof:components-css": "node scripts/proof-components-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:phantom-classes": "node scripts/proof-phantom-classes.mjs",
         "proof:vt-names": "node scripts/proof-vt-names.mjs",
@@ -589,11 +562,16 @@
         "proof:dock-opacity-lockstep": "node scripts/proof-dock-opacity-lockstep.mjs",
         "proof:dock-a11y-contract": "vitest run tests/components/custom/dock/DockLayerRail.a11y.test.ts",
         "proof:dock-vocabulary": "node scripts/proof-dock-vocabulary.mjs",
+        "proof:dock-region-model": "node scripts/proof-dock-region-model.mjs",
+        "proof:dock-perfection": "node scripts/proof-dock-perfection.mjs",
+        "proof:dock-unify": "node scripts/proof-dock-unify.mjs",
+        "proof:dock-css-carve": "node scripts/proof-dock-css-carve.mjs",
         "proof:dock-css-split": "node scripts/proof-dock-controls-split.mjs",
         "proof:design-idiom-localization": "node scripts/proof-design-idiom-localization.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",
+        "proof:squircle-language": "node scripts/proof-squircle-language.mjs",
         "proof:card-cartoon-consumers": "node scripts/proof-card-cartoon-consumers.mjs",
         "proof:doc-consistency": "node scripts/proof-doc-consistency.mjs",
         "proof:au-w0-reground": "node scripts/proof-au-w0-reground.mjs",
@@ -613,6 +591,7 @@
         "proof:no-orphan-demo-route": "node scripts/proof-no-orphan-demo-route.mjs",
         "proof:demo-dock-nav": "node scripts/proof-demo-dock-nav.mjs",
         "proof:demo-dock-nav-runtime": "node scripts/proof-demo-dock-nav-runtime.mjs",
+        "proof:demo-radial-calm": "node scripts/proof-demo-radial-calm.mjs",
         "proof:font-canon": "node scripts/proof-font-canon.mjs",
         "proof:font-cascade-live": "node scripts/proof-font-cascade-live.mjs",
         "proof:webgl-substrate-single": "node scripts/proof-webgl-substrate-single.mjs",
@@ -627,6 +606,7 @@
         "proof:blob-interaction-prm": "node scripts/proof-blob-interaction-prm.mjs",
         "proof:blob-mood-resolved": "node scripts/proof-blob-mood-resolved.mjs",
         "proof:blob-tempo-suppression": "node scripts/proof-blob-tempo-suppression.mjs",
+        "proof:aurora-fill-resize": "node scripts/proof-aurora-fill-resize.mjs",
         "proof:aurora-space-gamma": "node scripts/proof-aurora-space-gamma.mjs",
         "proof:aurora-oklch-interp": "node scripts/proof-aurora-oklch-interp.mjs",
         "proof:aurora-derive-gamut": "vitest run tests/components/custom/aurora/derive-color.test.ts",
@@ -648,6 +628,8 @@
         "proof:fail-explicit": "node scripts/proof-fail-explicit.mjs",
         "proof:no-god-module": "node scripts/proof-no-god-module.mjs",
         "proof:no-legacy-commentary": "node scripts/proof-no-legacy-commentary.mjs",
+        "proof:story-language": "node scripts/proof-story-language.mjs",
+        "proof:gate-detrap": "node scripts/proof-gate-detrap.mjs",
         "proof:liquid-glass-tokens": "node scripts/proof-liquid-glass-tokens.mjs",
         "proof:lockfile": "node scripts/proof-lockfile.mjs",
         "proof:di-consistency": "node scripts/proof-di-consistency.mjs",
@@ -663,13 +645,26 @@
         "proof:text-highlight": "vitest run tests/composables/motion/text-highlight-home.test.ts tests/composables/motion/useTextHighlight.test.ts",
         "proof:constellation-field": "vitest run tests/components/custom/constellation/constellationField.test.ts",
         "proof:input-invalid-aria": "node scripts/proof-input-invalid-aria.mjs",
-        "proof:styling-hygiene": "node scripts/proof-styling-hygiene.mjs",
         "proof:subpath-enumeration": "node scripts/proof-subpath-enumeration.mjs",
         "proof:no-orphan-composable": "node scripts/proof-no-orphan-composable.mjs",
         "proof:speedtest-boundary": "node scripts/proof-speedtest-boundary.mjs",
         "proof:glass-material-unified": "node scripts/proof-glass-material-unified.mjs",
+        "proof:liquid-glass-material": "node scripts/proof-liquid-glass-material.mjs",
+        "proof:glass-level": "node scripts/proof-glass-level.mjs",
+        "proof:page-redesign": "node scripts/proof-page-redesign.mjs",
+        "proof:configurator-glass-atoms": "node scripts/proof-configurator-glass-atoms.mjs",
+        "proof:aurora-chrome-idiomatic": "node scripts/proof-aurora-chrome-idiomatic.mjs",
+        "proof:aurora-preset-roster": "node scripts/proof-aurora-preset-roster.mjs",
+        "proof:ui-scale": "node scripts/proof-ui-scale.mjs",
+        "proof:dropdown-type-scale": "node scripts/proof-dropdown-type-scale.mjs",
+        "proof:forced-colors-skin": "node scripts/proof-forced-colors-skin.mjs",
+        "proof:glass-one-model": "node scripts/proof-glass-level.mjs --one-model",
+        "proof:adaptive-glass": "node scripts/proof-adaptive-glass.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:tabs-unified": "node scripts/proof-tabs-unified.mjs",
         "proof:glass-material-sota": "node scripts/proof-glass-material-sota.mjs",
-        "proof:glass-card-tiers": "node scripts/proof-glass-card-tiers.mjs",
         "proof:primitive-affordance": "node scripts/proof-primitive-affordance.mjs",
         "proof:reka-binding-idiom": "node scripts/proof-reka-binding-idiom.mjs",
         "proof:animation-coherence": "node scripts/proof-animation-coherence.mjs",
@@ -681,7 +676,11 @@
         "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",
+        "proof:disposition-live": "node scripts/proof-disposition-live.mjs",
+        "proof:gen-ci-fresh": "node scripts/proof-gen-ci-fresh.mjs",
         "gates:verify-ci": "node scripts/gates.mjs --verify-ci",
+        "gates:emit-ci": "node scripts/gates.mjs --emit-ci",
         "profile:bundle": "node scripts/profile-bundle.mjs",
         "profile:budget": "node scripts/profile-bundle.mjs --enforce",
         "profile:aurora": "node scripts/profile-aurora.mjs",

package/src/styles/animations.css

@@ -214,14 +214,18 @@
  * through <Pulse variant="aura">.
  */
 @keyframes ambient-pulse {
+    /* AX.W57 (P6) — the aura breath reads its OWN element-opacity range
+       (`--pulse-aura-breath-{min,max}`, 0.28↔0.42), decoupled from the
+       shared `--pulse-aura-opacity-*` skeleton-shimmer stops so the halo
+       breathes as an ambient wash, never up to the 0.95 shimmer peak. */
     0%,
     100% {
         transform: scale(var(--animate-ambient-pulse-scale-min, 1));
-        opacity: var(--pulse-aura-opacity-min, 0.55);
+        opacity: var(--pulse-aura-breath-min, 0.28);
     }
     50% {
         transform: scale(var(--animate-ambient-pulse-scale-max, 1.15));
-        opacity: var(--pulse-aura-opacity-max, 0.95);
+        opacity: var(--pulse-aura-breath-max, 0.42);
     }
 }
 

package/src/styles/dock/density.css

@@ -0,0 +1,230 @@
+/* dock/density.css — the density × `--dock-scale` cascade (AX.W06 carve).
+ *
+ * Carved from the dock.css god-module (slice 25). This partial owns the W45
+ * density cascade: every per-density geometry axis (padding / control-size /
+ * layer-height / gap / tile-min / trigger+tab padding) is `calc(<base> *
+ * var(--dock-scale))` so the ONE `--dock-scale` multiplier grows box+pad+gap+
+ * tab+tile in lockstep on touch, with the inner `max(…, --dock-control-floor)`
+ * WCAG 2.5.5 clamp. The four rungs (compact · comfortable · spacious · audacious)
+ * + the audacious narrow-box `@container` label compression.
+ *
+ * @import-ed by dock.css in cascade order, in the SAME `@layer components` — the
+ * carve is isomorphic (same layer, same source order → ZERO visual delta). */
+
+@layer components {
+    /* AX.W45 — the density cascade is threaded by the ONE `--dock-scale`
+       multiplier (default 1, lifted to `--dock-mobile-scale` on coarse pointers).
+       EVERY per-density geometry axis is `calc(<base> * var(--dock-scale))` so a
+       single knob grows box+pad+gap+tab+tile-min in lockstep on touch — the desktop
+       proportion preserved, never a 44px box around a desktop glyph. The
+       control-size carries an INNER `max(…, 44px)` WCAG 2.5.5 clamp (the coarse
+       block sets `--dock-control-floor: var(--dock-touch-target)`) so a consumer
+       dialing `--dock-mobile-scale` below 1.0 cannot drop the touch target under the
+       floor — the floor survives as a CLAMP, not a parallel `@media` rule. `--dock-
+       tile-min` is now IN the cascade (DK4-b) so the grid tile scales with the
+       control + glyph; it is a proportional `calc(control-size + tile-pad)` so the
+       icon-to-tile margin is ONE knob, not a per-density literal. */
+    .glass-dock[data-density="compact"] {
+        --dock-padding-block: calc(
+            var(--dock-density-compact-padding-block, 0.25rem) * var(--dock-scale)
+        );
+        --dock-padding-inline: calc(
+            var(--dock-density-compact-padding-inline, 0.375rem) * var(--dock-scale)
+        );
+        --dock-control-size: max(
+            calc(var(--dock-density-compact-control-size, 2rem) * var(--dock-scale)),
+            var(--dock-control-floor, 0px)
+        );
+        --dock-layer-height: max(
+            calc(var(--dock-density-compact-layer-height, 2rem) * var(--dock-scale)),
+            var(--dock-control-floor, 0px)
+        );
+        --dock-layer-gap: calc(
+            var(--dock-density-compact-gap, 0.25rem) * var(--dock-scale)
+        );
+        --dock-tile-min: calc(
+            var(--dock-control-size) + var(--dock-tile-pad, 1rem) * var(--dock-scale)
+        );
+        --dock-trigger-padding-block: calc(
+            var(--dock-density-compact-trigger-padding-block, 0.1875rem) *
+                var(--dock-scale)
+        );
+        --dock-trigger-padding-inline: calc(
+            var(--dock-density-compact-trigger-padding-inline, 0.4375rem) *
+                var(--dock-scale)
+        );
+        --dock-tab-padding-block: calc(
+            var(--dock-density-compact-tab-padding-block, 0.3125rem) *
+                var(--dock-scale)
+        );
+        --dock-tab-padding-inline: calc(
+            var(--dock-density-compact-tab-padding-inline, 0.625rem) *
+                var(--dock-scale)
+        );
+        --dock-tab-h: calc(32px * var(--dock-scale));
+    }
+
+    /* Comfortable density — the GlassDock default. Sits between compact
+       and spacious. */
+    .glass-dock[data-density="comfortable"] {
+        --dock-padding-block: calc(
+            var(--dock-density-comfortable-padding-block, 0.375rem) * var(--dock-scale)
+        );
+        --dock-padding-inline: calc(
+            var(--dock-density-comfortable-padding-inline, 0.5rem) * var(--dock-scale)
+        );
+        --dock-control-size: max(
+            calc(
+                var(--dock-density-comfortable-control-size, 2.5rem) *
+                    var(--dock-scale)
+            ),
+            var(--dock-control-floor, 0px)
+        );
+        --dock-layer-height: max(
+            calc(
+                var(--dock-density-comfortable-layer-height, 2.5rem) *
+                    var(--dock-scale)
+            ),
+            var(--dock-control-floor, 0px)
+        );
+        --dock-layer-gap: calc(
+            var(--dock-density-comfortable-gap, 0.375rem) * var(--dock-scale)
+        );
+        --dock-tile-min: calc(
+            var(--dock-control-size) + var(--dock-tile-pad, 2rem) * var(--dock-scale)
+        );
+        --dock-trigger-padding-block: calc(
+            var(--dock-density-comfortable-trigger-padding-block, 0.25rem) *
+                var(--dock-scale)
+        );
+        --dock-trigger-padding-inline: calc(
+            var(--dock-density-comfortable-trigger-padding-inline, 0.5rem) *
+                var(--dock-scale)
+        );
+        --dock-tab-padding-block: calc(
+            var(--dock-density-comfortable-tab-padding-block, 0.4375rem) *
+                var(--dock-scale)
+        );
+        --dock-tab-padding-inline: calc(
+            var(--dock-density-comfortable-tab-padding-inline, 0.75rem) *
+                var(--dock-scale)
+        );
+        --dock-tab-h: calc(38px * var(--dock-scale));
+    }
+
+    .glass-dock[data-density="spacious"] {
+        --dock-padding-block: calc(
+            var(--dock-density-spacious-padding-block, 0.5rem) * var(--dock-scale)
+        );
+        --dock-padding-inline: calc(
+            var(--dock-density-spacious-padding-inline, 0.75rem) * var(--dock-scale)
+        );
+        --dock-control-size: max(
+            calc(
+                var(--dock-density-spacious-control-size, 2.75rem) * var(--dock-scale)
+            ),
+            var(--dock-control-floor, 0px)
+        );
+        --dock-layer-height: max(
+            calc(
+                var(--dock-density-spacious-layer-height, 2.75rem) * var(--dock-scale)
+            ),
+            var(--dock-control-floor, 0px)
+        );
+        --dock-layer-gap: calc(
+            var(--dock-density-spacious-gap, 0.5rem) * var(--dock-scale)
+        );
+        --dock-tile-min: calc(
+            var(--dock-control-size) + var(--dock-tile-pad, 2.75rem) * var(--dock-scale)
+        );
+        --dock-trigger-padding-block: calc(
+            var(--dock-density-spacious-trigger-padding-block, 0.375rem) *
+                var(--dock-scale)
+        );
+        --dock-trigger-padding-inline: calc(
+            var(--dock-density-spacious-trigger-padding-inline, 0.625rem) *
+                var(--dock-scale)
+        );
+        --dock-tab-padding-block: calc(
+            var(--dock-density-spacious-tab-padding-block, 0.5rem) * var(--dock-scale)
+        );
+        --dock-tab-padding-inline: calc(
+            var(--dock-density-spacious-tab-padding-inline, 0.875rem) *
+                var(--dock-scale)
+        );
+        --dock-tab-h: calc(44px * var(--dock-scale));
+    }
+
+    /* Audacious density — typography-forward chrome where the dock reads as
+       a primary surface, not a tray. Tab buttons set their own min-height so
+       consumer-bumped fonts no longer drift the button height — the
+       `--dock-tab-min-height` token reserves the row regardless of glyph rise. */
+    .glass-dock[data-density="audacious"] {
+        --dock-padding-block: calc(
+            var(--dock-density-audacious-padding-block, 0.5rem) * var(--dock-scale)
+        );
+        --dock-padding-inline: calc(
+            var(--dock-density-audacious-padding-inline, 0.875rem) * var(--dock-scale)
+        );
+        --dock-control-size: max(
+            calc(var(--dock-density-audacious-control-size, 4rem) * var(--dock-scale)),
+            var(--dock-control-floor, 0px)
+        );
+        --dock-layer-height: max(
+            calc(var(--dock-density-audacious-layer-height, 4rem) * var(--dock-scale)),
+            var(--dock-control-floor, 0px)
+        );
+        --dock-layer-gap: calc(
+            var(--dock-density-audacious-gap, 0.875rem) * var(--dock-scale)
+        );
+        --dock-tile-min: calc(
+            var(--dock-control-size) + var(--dock-tile-pad, 2.75rem) * var(--dock-scale)
+        );
+        --dock-trigger-padding-block: calc(
+            var(--dock-density-audacious-trigger-padding-block, 0.625rem) *
+                var(--dock-scale)
+        );
+        --dock-trigger-padding-inline: calc(
+            var(--dock-density-audacious-trigger-padding-inline, 1rem) *
+                var(--dock-scale)
+        );
+        --dock-tab-padding-block: calc(
+            var(--dock-density-audacious-tab-padding-block, 0.5rem) * var(--dock-scale)
+        );
+        --dock-tab-padding-inline: calc(
+            var(--dock-density-audacious-tab-padding-inline, 1.5rem) *
+                var(--dock-scale)
+        );
+        --dock-tab-min-height: calc(
+            var(--dock-density-audacious-tab-min-height, 3.5rem) * var(--dock-scale)
+        );
+        --dock-tab-h: calc(
+            var(--dock-density-audacious-tab-min-height, 3.5rem) * var(--dock-scale)
+        );
+    }
+
+    /* Density-audacious narrow-box carve (AV.W16 TW3) — when the dock's OWN
+       box is narrow the audacious-dock label glyphs compress so the chrome
+       doesn't overflow its host (≤14px below 30rem, 15px 30–45rem). Keyed off
+       the dock's `dock` inline-size container — now OPT-IN via the
+       `containerName="dock"` prop (AW.W1 removed the always-on default that
+       broke shrink-to-fit), so it fires only for a dock the consumer has
+       width-CONSTRAINED into a host (the 320px sidebar case) where the
+       compression is meaningful and the containment does not collapse the box.
+       A free-floating dock shrink-wraps (box == content) so there is nothing to
+       compress. The var
+       is set on the `.dock-label` descendant (which reads it via
+       `font-size: var(--dock-label-size)`, typography.css). Thresholds keep
+       the prior 479/719px viewport cadence as box widths (30rem ≈ 480px,
+       45rem ≈ 720px at the 16px root). */
+    @container dock (max-width: 29.9375rem) {
+        .glass-dock[data-density="audacious"] .dock-label {
+            --dock-label-size: 14px;
+        }
+    }
+    @container dock (min-width: 30rem) and (max-width: 44.9375rem) {
+        .glass-dock[data-density="audacious"] .dock-label {
+            --dock-label-size: 15px;
+        }
+    }
+}