@mkbabb/glass-ui 3.1.0 → 3.2.0

package/src/styles/dock.css

@@ -489,6 +489,56 @@
         overflow-y: visible;
     }
 
+    /* ── Scroll-on-overflow opt-in (GlassDock `overflow="scroll"`) ───────
+       The default contract grows-to-fit then overflows visibly past the
+       axis cap. `overflow="scroll"` instead makes the dock the scroll port
+       on its layout axis, pairing the existing cap with a hidden-scrollbar
+       scroll region so over-cap content stays reachable. The rounded pill
+       masks the scroll edge; both axes keep their cap. */
+
+    /* Inline axis (horizontal docks). The active layer becomes the scroll
+       port: `min-width: 0` releases the flex item's `min-content` floor so
+       it can shrink under the clamped `.dock-layers` track, then `overflow-x:
+       auto` scrolls its over-cap content. `.dock-layers` must KEEP clipping
+       so the pill's rounded edge masks the scroll boundary — hence the
+       grow-mode `overflow-x: visible` (`.dock-layers`, above) is overridden
+       back to `hidden` here. */
+    .glass-dock.dock-scroll-x.expanded:not(.dock-wrap) > .dock-layers {
+        overflow-x: hidden;
+    }
+
+    .glass-dock.dock-scroll-x .dock-layer--full {
+        min-width: 0;
+        overflow-x: auto;
+        scrollbar-width: none;
+        /* Trap the inline-scroll momentum at the dock's own boundary so a
+           wheel/trackpad gesture that bottoms out the pill does NOT chain into
+           scrolling the page behind it (the dock is a self-contained scroll
+           port, not a window into the route scroller). */
+        overscroll-behavior-x: contain;
+    }
+
+    .glass-dock.dock-scroll-x .dock-layer--full::-webkit-scrollbar {
+        display: none;
+    }
+
+    /* Block axis (vertical rails). The root keeps its `max-block-size` cap
+       and scrolls its over-cap children — cap + scroll is the correct
+       pairing the grow-mode contract split apart. Ties the
+       `.vertical.always-expanded` visible default on specificity and wins on
+       source order. */
+    .glass-dock.vertical.dock-scroll-y {
+        overflow-y: auto;
+        scrollbar-width: none;
+        /* Same momentum-trap as the inline port — a rail that bottoms out must
+           not chain its remaining wheel delta into the page scroller behind it. */
+        overscroll-behavior-y: contain;
+    }
+
+    .glass-dock.vertical.dock-scroll-y::-webkit-scrollbar {
+        display: none;
+    }
+
     .glass-dock.dock-wrap {
         white-space: normal;
         border-radius: var(--radius-2xl);
@@ -670,7 +720,11 @@
         border: none;
         background: transparent;
         border-radius: var(--dock-control-radius, var(--radius-pill));
-        color: color-mix(in srgb, var(--foreground) calc(var(--opacity-icon-muted) * 100%), transparent);
+        /* Foreground base routes through `--dock-fg-on-aurora` (defaults to
+           `--foreground`, byte-identical to before) so a consumer floating the
+           dock over an aurora can lift contrast per-backdrop. The muted icon
+           weight mixes that base down with `--opacity-icon-muted`. */
+        color: color-mix(in srgb, var(--dock-fg-on-aurora, var(--foreground)) calc(var(--opacity-icon-muted) * 100%), transparent);
         outline: none;
         transition:
             background-color var(--dock-motion-fast),
@@ -968,7 +1022,8 @@
         border: none;
         background: transparent;
         border-radius: var(--dock-control-radius, var(--radius-pill));
-        color: color-mix(in srgb, var(--foreground) calc(var(--opacity-icon-muted) * 100%), transparent);
+        /* Shares the dock-icon-button legibility base (`--dock-fg-on-aurora`). */
+        color: color-mix(in srgb, var(--dock-fg-on-aurora, var(--foreground)) calc(var(--opacity-icon-muted) * 100%), transparent);
         outline: none;
         transition:
             background-color var(--dock-motion-fast),
@@ -1081,5 +1136,19 @@
             --dock-control-size: var(--dock-touch-target, 2.75rem);
             --size-icon-btn: var(--dock-touch-target, 2.75rem);
         }
+
+        /* S-2 — the in-dock floor above lifts the control-SIZE token, which
+           only reaches a DockIconButton that has a `.glass-dock` ancestor.
+           A STANDALONE DockIconButton (a routed settings gear, no dock
+           wrapper) reads the bare `--size-icon-btn` and would fall below the
+           44px WCAG target. This button-level floor holds the touch box
+           regardless of ancestry; the in-dock rule above stays (more specific,
+           and it also reserves the slot in the dock's width-math). Compact
+           buttons opt out — they are auto-sized affordances, not primary
+           targets. */
+        .dock-icon-button:not(.dock-icon-button--compact) {
+            min-block-size: var(--dock-touch-target, 2.75rem);
+            min-inline-size: var(--dock-touch-target, 2.75rem);
+        }
     }
 }

package/src/styles/index.css

@@ -53,7 +53,7 @@
  *                              Consumes tokens (1) + theme aliases (3).
  *   5. paper.css             — paper underpaint + grain overlay utilities.
  *                              Pairs with (4) for paper-on-glass compositions.
- *   6. dock.css              — .dock-icon-btn, .dock-select-trigger, etc.
+ *   6. dock.css              — .dock-icon-button, .dock-select-trigger, etc.
  *                              Component utility layer; consumes (1) + (3).
  *   7. cards.css             — .cartoon-surface, .paper-texture.
  *                              Component utility layer.

package/src/styles/tokens.css

@@ -619,6 +619,17 @@
        dock reads as painted chrome, not a frosted ghost. */
     --glass-opacity-dock: 0.42;
 
+    /* Dock foreground over an animated backdrop. A dock floating over an
+       aurora/animated surface (`value.js` dock-over-aurora, a slides routed
+       control, bbnf) sits on a mid-luminance, shifting field where the muted
+       default fg can drop below contrast. This token is the dock control's
+       foreground base — a complete `hsl()` color consumed via `var()`; for the
+       muted icon weight the control mixes it down with `--opacity-icon-muted`.
+       Defaults to `var(--foreground)` so the dock paints byte-identically to
+       today; a consumer overrides it per-backdrop (e.g. a near-white over a
+       dark aurora) without touching library source. */
+    --dock-fg-on-aurora: var(--foreground);
+
     /* Chassis-specific opacity. Looser than `default` (0.50) so the
        <InstrumentChassis> surface reads as glass-over-aurora at its
        64rem-wide footprint; the default tier stays calibrated for cards.

package/src/styles/utilities.css

@@ -480,6 +480,40 @@
         --metric-badge-padding-inline: 0.5rem;
     }
 
+    /* AS.W4 — @container style(--density) companion. A pill nested under a host
+       that sets `--density: comfortable | spacious` on a wrapping element picks
+       up the matching padding register with no `data-density` markup contract;
+       the attribute rules above stay the SOLE fallback (inv 47).
+       The inner `.metric-pill.metric-badge--label-stacked` selector (0,2,0) sits
+       just BELOW the `.metric-pill[data-density]…` attribute rules (0,3,0) — so a
+       pill carrying BOTH the attribute and a `--density` ancestor lands on the
+       attribute rule (same tokens, identical paint), while a pill with only the
+       ancestor token still resolves the right register (no competing rule sets
+       these padding custom props at higher weight in that case).
+
+       No `@supports` wrapper: unlike the sibling scroll-state recipe (which
+       probes `@supports (container-type: scroll-state)` — a probeable
+       container-type VALUE), style queries introduce no new `container-type`
+       value (every element is a style container by default), so there is no
+       clean declaration test for style-query support. This relies on
+       `@container style()`'s own graceful degradation: an engine without
+       style-query support parses the unknown at-rule as invalid, drops the
+       block, and keeps the `[data-density]` attribute base. (The earlier
+       `@supports (container-type: inline-size)` wrapper was wrong — it probed
+       SIZE-query support, a distinct feature with a distinct support timeline.) */
+    @container style(--density: spacious) {
+        .metric-pill.metric-badge--label-stacked {
+            --metric-badge-padding-block-stacked: 0.5rem;
+            --metric-badge-padding-inline: 0.75rem;
+        }
+    }
+    @container style(--density: comfortable) {
+        .metric-pill.metric-badge--label-stacked {
+            --metric-badge-padding-block-stacked: 0.25rem;
+            --metric-badge-padding-inline: 0.5rem;
+        }
+    }
+
     .metric-badge__label {
         letter-spacing: 0.18em;
         line-height: 1;
@@ -894,6 +928,28 @@
     );
 }
 
+/* ── Text-highlight paint (CSS Custom Highlight API) ─────────────────────
+   The default `::highlight()` paint for the `useTextHighlight` composable
+   (composables/dom). A named `Highlight` registered in `CSS.highlights`
+   under one of these keys paints its `Range` set without a `<mark>` wrapper.
+   Token-bridged: the search mark reads the canonical pastel-yellow rainbow
+   token at a soft alpha; the equation/variable mark reads `--primary`. Both
+   axes are overridable via the `--text-highlight-*` custom properties. */
+::highlight(glass-search-mark) {
+    background-color: var(
+        --text-highlight-search-bg,
+        color-mix(in srgb, var(--rainbow-pastel-yellow) 55%, transparent)
+    );
+    color: var(--text-highlight-search-fg, inherit);
+}
+::highlight(glass-mark) {
+    background-color: var(
+        --text-highlight-bg,
+        color-mix(in srgb, var(--primary) 18%, transparent)
+    );
+    color: var(--text-highlight-fg, inherit);
+}
+
 /* ── Interactive-button four-state recipe ────────────────────────────────
    `.btn-interactive` carries the canonical "Button-with-spring-hover"
    four-state contract — transition + hover-scale (`--scale-hover`) +

package/dist/useSortable-Cq2Y1JLO.js

@@ -1,175 +0,0 @@
-import { computed as e, onScopeDispose as t, shallowRef as n } from "vue";
-//#region src/composables/sortable/useSortable.ts
-var r = "[data-sortable-handle]", i = "is-sortable-drop-above", a = "is-sortable-drop-below", o = "sortable-drag-ghost", s = "is-sortable-dragging", c = /* @__PURE__ */ new Set();
-function l(e, t, n) {
-	if (!e.group) return null;
-	for (let r of c) {
-		if (r === e || r.group !== e.group) continue;
-		let i = r.getContainer();
-		if (!i) continue;
-		let a = i.getBoundingClientRect();
-		if (t >= a.left && t <= a.right && n >= a.top && n <= a.bottom) return r;
-	}
-	return null;
-}
-function u(u) {
-	let { items: d, getId: f, onReorder: p, onInsert: m, group: h, handleSelector: g = r, axis: _ = "y" } = u, v = n(null), y = n(null), b = n(null), x = null, S = null, C = 0, w = 0, T = null, E = null, D = /* @__PURE__ */ new Map(), O = /* @__PURE__ */ new Map();
-	function k() {
-		return d.value;
-	}
-	function A(e) {
-		let t = k();
-		for (let n = 0; n < t.length; n++) if (f(t[n]) === e) return n;
-		return -1;
-	}
-	function j(e, t, n, r, i) {
-		let a = i ? n : r;
-		for (let n = 0; n < t.length; n++) {
-			let r = e.get(t[n].id);
-			if (!r) continue;
-			let o = r.getBoundingClientRect();
-			if (a < (i ? o.left + o.width / 2 : o.top + o.height / 2)) return n;
-		}
-		return t.length;
-	}
-	function M(e, t) {
-		return j(D, k().map((e) => ({ id: f(e) })), e, t, _ === "x");
-	}
-	function N(e) {
-		return g === null ? !0 : e instanceof Element ? e.closest(g) !== null : !1;
-	}
-	function P(e, t, n) {
-		let r = e.getBoundingClientRect();
-		C = t - r.left, w = n - r.top;
-		let i = e.cloneNode(!0);
-		i.classList.add(o), i.style.position = "fixed", i.style.left = `${r.left}px`, i.style.top = `${r.top}px`, i.style.width = `${r.width}px`, i.style.height = `${r.height}px`, i.style.margin = "0", i.style.pointerEvents = "none", i.style.zIndex = "9999", i.id && i.removeAttribute("id");
-		for (let e of i.querySelectorAll("[id]")) e.removeAttribute("id");
-		document.body.appendChild(i), S = i;
-	}
-	function F(e, t) {
-		S && (S.style.left = `${e - C}px`, S.style.top = `${t - w}px`);
-	}
-	function I() {
-		S && S.parentNode && S.parentNode.removeChild(S), S = null;
-	}
-	function L(e, t) {
-		let n = D.get(e);
-		if (!(n instanceof HTMLElement)) return;
-		v.value = e, y.value = {
-			x: t.clientX,
-			y: t.clientY
-		}, b.value = A(e), x = null, T = n, n.classList.add(s), P(n, t.clientX, t.clientY);
-		let r = t.currentTarget;
-		if (r && "setPointerCapture" in r) try {
-			r.setPointerCapture(t.pointerId);
-		} catch {}
-		document.addEventListener("pointermove", R), document.addEventListener("pointerup", z), document.addEventListener("pointercancel", z);
-	}
-	function R(e) {
-		if (v.value === null) return;
-		y.value = {
-			x: e.clientX,
-			y: e.clientY
-		}, F(e.clientX, e.clientY);
-		let t = l(W, e.clientX, e.clientY);
-		if (t) {
-			x && x !== t && x.setExternalDropIndex(null), x = t;
-			let n = t.getItems().map((e) => ({ id: t.getId(e) })), r = j(t.getElements(), n, e.clientX, e.clientY, _ === "x");
-			t.setExternalDropIndex(r), b.value = null;
-		} else x &&= (x.setExternalDropIndex(null), null), b.value = M(e.clientX, e.clientY);
-	}
-	function z(e) {
-		let t = v.value, n = x, r = b.value;
-		if (B(), t === null) return;
-		let i = k(), a = i.findIndex((e) => f(e) === t);
-		if (a < 0) return;
-		if (n) {
-			let e = i[a], t = i.slice();
-			t.splice(a, 1), p(t);
-			let r = n.getExternalDropIndex?.() ?? null;
-			n.setExternalDropIndex(null), n.acceptExternal(r ?? 0, e);
-			return;
-		}
-		if (r === null) return;
-		let o = r;
-		if (o > a && --o, o === a) return;
-		let s = i.slice(), [c] = s.splice(a, 1);
-		s.splice(o, 0, c), p(s);
-	}
-	function B() {
-		I(), T &&= (T.classList.remove(s), null), x &&= (x.setExternalDropIndex(null), null), v.value = null, y.value = null, b.value = null, document.removeEventListener("pointermove", R), document.removeEventListener("pointerup", z), document.removeEventListener("pointercancel", z);
-	}
-	function V(t) {
-		let n = O.get(t);
-		if (n) return n;
-		let r = (e) => {
-			e === null ? D.delete(t) : D.set(t, e);
-		};
-		function o(e, n) {
-			let r = A(t);
-			return r < 0 ? {
-				above: !1,
-				below: !1
-			} : e === n ? {
-				above: !1,
-				below: r === n - 1
-			} : {
-				above: r === e,
-				below: !1
-			};
-		}
-		let s = e(() => {
-			let e = {
-				[i]: !1,
-				[a]: !1
-			};
-			if (v.value !== null && b.value !== null) {
-				let t = o(b.value, k().length);
-				t.above && (e[i] = !0), t.below && (e[a] = !0);
-			}
-			if (H.value !== null && v.value === null) {
-				let t = o(H.value, k().length);
-				t.above && (e[i] = !0), t.below && (e[a] = !0);
-			}
-			return e;
-		}), c = {
-			ref: r,
-			dataAttrs: { "data-sortable-id": String(t) },
-			class: s,
-			onPointerdown: (e) => {
-				e.button === 0 && N(e.target) && (e.preventDefault(), L(t, e));
-			}
-		};
-		return O.set(t, c), c;
-	}
-	let H = n(null), U = {
-		ref: (e) => {
-			E = e;
-		},
-		dataAttrs: { "data-sortable-container": h ?? "" }
-	}, W = {
-		group: h,
-		getContainer: () => E,
-		getItems: () => d.value,
-		getId: (e) => f(e),
-		getElements: () => D,
-		setExternalDropIndex: (e) => {
-			H.value = e;
-		},
-		acceptExternal: (e, t) => {
-			m && m(e, t);
-		}
-	};
-	return W.getExternalDropIndex = () => H.value, c.add(W), t(() => {
-		c.delete(W), B();
-	}), {
-		registerItem: V,
-		container: U,
-		isDragging: e(() => v.value !== null),
-		dragId: e(() => v.value),
-		dragPosition: e(() => y.value),
-		dropIndex: e(() => b.value)
-	};
-}
-//#endregion
-export { u as t };