@mkbabb/glass-ui 3.3.0 → 3.4.0

package/dist/composables/motion/useNumericTransition.d.ts

@@ -1,4 +1,4 @@
-import type { TimingFunction, TimingFunctionNames } from "@mkbabb/keyframes.js";
+import type { TimingFunction } from "@mkbabb/keyframes.js";
 export type SpringSnapshot<K extends string> = Record<K, number>;
 export interface UseNumericTransitionOptions<K extends string> {
     /** Named numeric endpoints to interpolate between. */
@@ -6,8 +6,19 @@ export interface UseNumericTransitionOptions<K extends string> {
     to: SpringSnapshot<K>;
     /** Playback duration in ms. */
     duration: number;
-    /** keyframes.js timing function — string name or explicit function. */
-    timingFunction?: TimingFunction | TimingFunctionNames;
+    /**
+     * keyframes.js timing function — an explicit callable `(t) => number`.
+     *
+     * AW.W27: this is a CALLABLE `TimingFunction`, NOT a string easing name.
+     * keyframes 4 removed string-name acceptance from `NumericAnimationOptions`
+     * (a name now resolves only through the ASYNC `resolveEasing`, which crosses
+     * the value.js dynamic boundary the dock/motion light surface must never
+     * pull in). Narrowing glass-ui's public option to a callable decouples it
+     * from keyframes' name-resolution churn AND is assignable to every supported
+     * keyframes major (2.2 / 3 / 4). A consumer wanting a named curve passes the
+     * function directly (e.g. `(t) => 1 - Math.pow(1 - t, 3)` for easeOutCubic).
+     */
+    timingFunction?: TimingFunction;
     /** Per-frame consumer. Receives the same zero-allocation record each tick. */
     onFrame?: (values: SpringSnapshot<K>) => void;
 }

package/dist/styles/dock.css

@@ -68,15 +68,20 @@
         position: relative;
         display: inline-flex;
         align-items: center;
-        /* AV.W16 TW3 — the dock establishes an inline-size container named
-           `dock` so its descendants (the label glyph, the density rules)
-           read the dock's OWN box, not the viewport. This makes the dock
-           portable into a 320px sidebar: the label compresses off the
-           dock's box width, not `@media`. A consumer that sets the
-           `containerName` prop overrides the name via inline style (the
-           explicit container-query opt-in); the default `dock` name backs
-           the built-in label/density container reads below. */
-        container: dock / inline-size;
+        /* AW.W1 — the dock does NOT establish a default inline-size container.
+           `container-type: inline-size` applies `contain: inline-size`, which
+           makes an element's inline size INDEPENDENT of its contents — fatally
+           incompatible with a shrink-to-fit pill: under it `.glass-dock` cannot
+           size to its content and collapses to its padding floor (~19px) with the
+           active layer overflowing (the 3.3.0 regression — every horizontal dock,
+           collapsed AND always-expanded, rendered as a sliver). The `dock`-named
+           container is now OPT-IN via the `containerName` prop: a consumer
+           embedding the dock in a width-CONSTRAINED host (a 320px sidebar) sets
+           `containerName="dock"` to get the descendant container-query reads (the
+           audacious-label compression below), trading shrink-to-fit for the
+           host-constrained width it already has there. The default free-floating
+           dock shrink-wraps to its content (AV.W16 TW3 made this a default and
+           silently broke dock sizing for the common case). */
         border-radius: var(--radius-dock);
         white-space: nowrap;
         max-inline-size: var(--dock-max-inline-size);
@@ -210,9 +215,13 @@
     /* 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 (established on `.glass-dock`
-       above) rather than the viewport — so a dock dropped into a 320px
-       sidebar compresses its label off ITS box, not the page width. The var
+       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,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mkbabb/glass-ui",
-    "version": "3.3.0",
+    "version": "3.4.0",
     "description": "Glassmorphic design system — Vue 3.5 components, reka-ui primitives, Tailwind CSS v4 tokens",
     "license": "MIT",
     "repository": {
@@ -546,6 +546,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: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",
         "proof:dock-animation-live": "node scripts/proof-dock-animation-live.mjs",
@@ -612,8 +613,8 @@
     },
     "peerDependencies": {
         "@lucide/vue": "^1.16.0",
-        "@mkbabb/keyframes.js": "^2.2.0 || ^3.0.0",
-        "@mkbabb/value.js": "^0.10.0",
+        "@mkbabb/keyframes.js": "^2.2.0 || ^3.0.0 || ^4.0.0",
+        "@mkbabb/value.js": "^0.10.0 || ^0.11.0",
         "@vueuse/core": "^14.0",
         "class-variance-authority": "^0.7",
         "clsx": "^2.0",

package/src/styles/dock.css

@@ -68,15 +68,20 @@
         position: relative;
         display: inline-flex;
         align-items: center;
-        /* AV.W16 TW3 — the dock establishes an inline-size container named
-           `dock` so its descendants (the label glyph, the density rules)
-           read the dock's OWN box, not the viewport. This makes the dock
-           portable into a 320px sidebar: the label compresses off the
-           dock's box width, not `@media`. A consumer that sets the
-           `containerName` prop overrides the name via inline style (the
-           explicit container-query opt-in); the default `dock` name backs
-           the built-in label/density container reads below. */
-        container: dock / inline-size;
+        /* AW.W1 — the dock does NOT establish a default inline-size container.
+           `container-type: inline-size` applies `contain: inline-size`, which
+           makes an element's inline size INDEPENDENT of its contents — fatally
+           incompatible with a shrink-to-fit pill: under it `.glass-dock` cannot
+           size to its content and collapses to its padding floor (~19px) with the
+           active layer overflowing (the 3.3.0 regression — every horizontal dock,
+           collapsed AND always-expanded, rendered as a sliver). The `dock`-named
+           container is now OPT-IN via the `containerName` prop: a consumer
+           embedding the dock in a width-CONSTRAINED host (a 320px sidebar) sets
+           `containerName="dock"` to get the descendant container-query reads (the
+           audacious-label compression below), trading shrink-to-fit for the
+           host-constrained width it already has there. The default free-floating
+           dock shrink-wraps to its content (AV.W16 TW3 made this a default and
+           silently broke dock sizing for the common case). */
         border-radius: var(--radius-dock);
         white-space: nowrap;
         max-inline-size: var(--dock-max-inline-size);
@@ -210,9 +215,13 @@
     /* 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 (established on `.glass-dock`
-       above) rather than the viewport — so a dock dropped into a 320px
-       sidebar compresses its label off ITS box, not the page width. The var
+       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,