@mkbabb/glass-ui 8.0.0 → 10.0.0

package/README.md

@@ -65,6 +65,14 @@ The optional `styles/fonts` entry carries the packaged Plus Jakarta Sans and
 Fira Code faces as self-contained WOFF2 data URLs. Consumers that need raw font
 files can address the same built assets through `@mkbabb/glass-ui/fonts/*`.
 
+Every packaged face is roman: there is no italic `@font-face` and none is
+intended. Three utilities ask for one anyway — `text-math`, `text-math-body` and
+`fourier-f`, because mathematical italic is notation — so they are
+SYNTHESIS-DEPENDENT: the browser obliques the roman face for them. The library
+declares no `font-synthesis`, so the UA default (`auto`) applies and they paint.
+If your app sets `font-synthesis: none` at the root, those three lose their slant.
+`text-caption` is upright; add `italic` beside it if you want the slant back.
+
 ## Documentation
 
 The authoritative canon lives under [`docs/canon/`](./docs/canon/), with the
@@ -78,6 +86,8 @@ consumer-facing migration path in [`MIGRATION.md`](./MIGRATION.md):
 - [`docs/canon/motion-system.md`](./docs/canon/motion-system.md) — the spring/bezier motion canon
 - [`DESIGN.md`](./DESIGN.md) — the storybook category index
 
+Of that, only `MIGRATION.md` ships. `package.json` declares `files: ["dist", "MIGRATION.md"]`, so an install carries `dist/`, `MIGRATION.md`, this README and the licence — nothing else; the migration guide for the version you pinned is at `node_modules/@mkbabb/glass-ui/MIGRATION.md`. Read `DESIGN.md` and `docs/` on GitHub.
+
 ## Build
 
 ```bash
@@ -131,6 +141,11 @@ import { InstrumentChassis } from "@mkbabb/glass-ui/instrument-chassis";
 import { useSidebarState } from "@mkbabb/glass-ui/sidebar";
 ```
 
+There is no `/clipboard` subpath. `useClipboard` and `writeClipboard` ship on `/dom` and on
+the root barrel; `useClipboard` returns `{ status, copy, invalidate }`, where `status` is a
+`ComputedRef<ClipboardStatus>` — the `copied` boolean was removed at 7.0.0, and the
+equivalent is `status.value === "success"`.
+
 The v0.9.x nested subpaths `@mkbabb/glass-ui/composables/dark` and
 `.../composables/keyboard` were flattened to `/dark` and `/keyboard` at v1.0.
 The demo-only `/pagination` and `/virtual` subpaths are retired. The 5.0.0 export
@@ -153,12 +168,42 @@ Convenience classes bundle a tier with a shape: `.glass-card` (resting + `--radi
 
 ## Design Tokens
 
-`src/styles/tokens/` defines the shared `:root` properties consumed by all style modules and components — duration, easing (`--spring-{smooth,snappy,bouncy,gentle}` + `--spring-<name>-duration` clocks), z-index, radius (primitive + semantic), shadows (composed via `color-mix(in srgb, var(--shadow-color) N%, transparent)`), the 5-tier glass ladder, paper/grain textures, the `--surface-tint-*` family, and the warm-chroma color palette. Consumers override any token locally per project.
+`src/styles/tokens/` defines the shared `:root` properties consumed by all style modules and components — duration, easing (`--spring-{smooth,snappy,bouncy,gentle}` + `--spring-<name>-duration` clocks), z-index, radius (primitive + semantic), shadows (composed via `color-mix(in srgb, var(--shadow-color) N%, transparent)`), the 5-tier glass ladder, paper/grain textures, the `--surface-tint-*` family, and the warm-chroma color palette. These are declared in a plain unlayered `:root`, which beats every layered consumer `:root`: re-declare one in an unlayered `:root` of your own, or on an element below `:root` in any layer, and every reader downstream follows; a `:root` inside `@theme` or any `@layer` loses to the package root. Font registers are the one exception and live in the theme layer — re-declare `--font-serif-math` in your own `@theme`, and rebrand `--font-text` / `--font-display` there or through `--font-stack-text` / `--font-stack-display` on an unlayered `:root` (`MIGRATION.md`, _The token-root contract_ under 10.0.0). [2026-09-22 · O-23/O-32 B-1 — this sentence said any re-declaration in your own CSS wins; a layered `:root` does not.]
+
+**Every other rule the package ships sits in `@layer components`**, and `./styles.css` opens with `@layer theme, base, components, utilities;` (the same order `./styles` declares), so a rule of yours — unlayered, or in `@layer utilities` — beats a library rule at any specificity. What stays outside the layer: the token roots above, the `@utility` / `@theme` / `@property` / `@font-face` / `@keyframes` at-rules, and one named exception, the slider's stylesheet. `!important` runs the other way across layers: a library `!important` beats yours unless yours sits in a layer ordered before `components`.
+
+**Bridge names are not tokens, and overriding one does nothing.** `src/styles/theme/bridges.css` is a single `@theme inline` block mapping Tailwind theme keys onto those tokens: `--shadow-glass-*`, `--color-*`, `--text-*`, `--spacing-icon-*`, `--blur-glass-*` and nine more families (`--z-*`, `--font-*`, `--leading-*`, `--tracking-*`, `--transition-*`, `--ease-*` among them). Their job is to generate utilities — `shadow-glass-quiet`, `blur-glass-wash`, `size-icon-md` — with the referenced value substituted in place, and `inline` is what stops them minting a second spelling of the same value. A theme key reaches your built CSS as a custom property only when something in that build reads it with `var()`; nothing in this library's own build reads the shadow, blur or icon bridges, so none of them emits here; the shadow family also measures zero in four independently compiled consumer bundles. `var(--shadow-glass-quiet)` therefore resolves to nothing. Override the `tokens/` spelling instead:
+
+```css
+/* the override point — a plain :root token, always emitted */
+:root {
+    --glass-shadow-quiet: 0 1px 3px rgb(0 0 0 / 0.08);
+    --glass-shadow-resting: 0 4px 12px rgb(0 0 0 / 0.1);
+}
+```
+
+Five of the six shadow rungs are bridged: `--glass-shadow-capsule` has no `--shadow-glass-capsule` and no utility, only the token.
+
+**The easing seam.** `<EasingCurve>` writes `--easing-curve-accent: var(--motion-accent, var(--viz-legendre))` on its own wrapper, so that name is already bound on the curve's subtree and an ancestor's `--easing-curve-accent` never reaches it. The one free arm is `--motion-accent`: set it on or above the curve to re-point the accent.
 
 ## Typography
 
 Type scale based on √φ ≈ 1.272 (modulated golden ratio); each step is φ^(n/2) of the base. Semantic classes run `.text-micro` → `.text-body` → `.text-heading` → `.text-title` → the audacious `.text-display-*` ladder. The `@theme` block in `theme.css` maps these to Tailwind's `--font-size-*` tokens, so `text-sm` / `text-lg` adopt the golden-ratio scale.
 
+## Target size
+
+Three mechanisms carry the WCAG-2.5.5 44px floor, and a consumer reaches all
+three. `--control-floor` is the clamp seam in the height cohort: `0px` at
+desktop, lifted to `--touch-target` (`2.75rem`) under `pointer: coarse`, and
+every `--control-h-xs|sm|md|lg` rung is a `max()` against it, so no `--ui-scale`
+below 1 can drop a control under the floor. `[data-control-target]` is the
+attribute opt-in — one shared rule in `styles/utilities/responsive.css` floors
+both axes of any element wearing it under coarse pointer, and you can put it on
+your own interactive faces. `.control-bit` is the binary-control register
+(checkbox · switch · radio): the host itself is the ≥44 seat, in flow, and the
+paint sits on the smaller `.control-bit__face` child — so the rect the pointer
+hits is the rect `getBoundingClientRect` reads, and the paint stays small.
+
 ## Conventions
 
 - TypeScript `strict:true`, `verbatimModuleSyntax:true`; `moduleResolution:bundler`, `target:ES2022`, `lib:ES2023`
@@ -173,18 +218,17 @@ See [`docs/canon/conventions.md`](./docs/canon/conventions.md) for the full set.
 
 All runtime deps are peer — glass-ui declares them in `peerDependencies` and ships none in its own `dependencies` bundle, so the consumer's single Vue / Tailwind / reka-ui spine is reused rather than re-vendored.
 
-| Package                         | Role                                                              |
-| ------------------------------- | ----------------------------------------------------------------- |
-| `vue` ^3.5                      | Framework                                                         |
-| `reka-ui` ^2.0                  | Headless UI primitives                                            |
-| `@vueuse/core` ^14.0            | useDark, createGlobalState, useEventListener (optional peer)      |
-| `tailwindcss` ^4.0              | Utility CSS                                                       |
-| `embla-carousel-vue` ^8.0       | Carousel substrate (optional peer)                                |
-| `@lucide/vue` ^1.16.0           | Icon set (the renamed v1 package; was `lucide-vue-next` pre-v1.0) |
-| `@mkbabb/keyframes.js` ^6.0.0   | Spring/keyframe runtime (optional peer)                           |
-| `@mkbabb/value.js` ^4.0.0       | Color and easing capabilities (optional peer)                     |
-| `@mkbabb/pencil-boil` ^0.9.2    | Hand-mark freehand core (optional peer)                           |
-| `tw-animate-css` ^1.2.5         | `animate-in`/`animate-out` data-state utilities (optional peer)   |
+| Package                             | Role                                                              |
+| ----------------------------------- | ----------------------------------------------------------------- |
+| `vue` ^3.5                          | Framework                                                         |
+| `reka-ui` ^2.0                      | Headless UI primitives                                            |
+| `tailwindcss` ^4.0                  | Utility CSS                                                       |
+| `@lucide/vue` ^1.16.0               | Icon set (the renamed v1 package; was `lucide-vue-next` pre-v1.0) |
+| `@mkbabb/keyframes.js` ^6.0.0       | Spring/keyframe runtime                                           |
+| `vue-component-type-helpers` ^3.0.3 | Emitted-declaration helper types                                  |
+| `@vueuse/core` ^14.0                | useDark, createGlobalState, useEventListener (optional peer)      |
+| `@mkbabb/value.js` ^4.0.0           | Color and easing capabilities (optional peer)                     |
+| `tw-animate-css` ^1.2.5             | `animate-in`/`animate-out` data-state utilities (optional peer)   |
 
 `tw-animate-css` is required only for the animated overlay surfaces (Dialog / Sheet / Popover / DropdownMenu emit `animate-in`/`animate-out` data-state utilities); a Button-only consumer never needs it. See [`docs/canon/dependencies.md`](./docs/canon/dependencies.md).
 

package/dist/DialogContent-CwIBvou_.js

@@ -0,0 +1,157 @@
+import { t as e } from "./class-names-FlXcvRRT.js";
+import { t } from "./resolve-DdrNvBby.js";
+import { t as n } from "./useSpringMount-OA-0mTNv.js";
+import { i as r, n as i } from "./motion-BvV1_24p.js";
+import { t as a } from "./useMotionAxis-D-rtIhca.js";
+import { t as o } from "./shortcuts-DGGWNRNe.js";
+import { computed as s, createBlock as c, createCommentVNode as l, createElementVNode as u, createVNode as d, defineComponent as f, mergeProps as p, openBlock as m, ref as h, renderSlot as g, unref as _, watch as v, withCtx as y } from "vue";
+import { DialogClose as b, DialogContent as x, DialogPortal as S, DialogRoot as C, injectDialogRootContext as w, useForwardPropsEmits as T } from "reka-ui";
+//#endregion
+//#region src/components/dialog/Dialog.vue
+var E = /* @__PURE__ */ f({
+	__name: "Dialog",
+	props: {
+		open: { type: Boolean },
+		defaultOpen: { type: Boolean },
+		modal: { type: Boolean },
+		unmountOnHide: { type: Boolean },
+		origin: {}
+	},
+	emits: ["update:open"],
+	setup(e, { emit: t }) {
+		let n = e, r = t, i = T(s(() => {
+			let { origin: e, ...t } = n;
+			return t;
+		}), r);
+		return (e, t) => (m(), c(_(C), p({ "data-slot": "dialog" }, _(i)), {
+			default: y(() => [g(e.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+}), D = /* @__PURE__ */ f({
+	inheritAttrs: !1,
+	__name: "DialogContent",
+	props: {
+		forceMount: { type: Boolean },
+		disableOutsidePointerEvents: { type: Boolean },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		surface: { default: "glass" },
+		motion: {},
+		scroll: {
+			type: Boolean,
+			default: !1
+		},
+		dismiss: { default: "free" }
+	},
+	emits: [
+		"escapeKeyDown",
+		"pointerDownOutside",
+		"focusOutside",
+		"interactOutside",
+		"openAutoFocus",
+		"closeAutoFocus"
+	],
+	setup(f, { emit: C }) {
+		let E = f, D = C, O = s(() => {
+			let { class: e, surface: t, motion: n, scroll: r, dismiss: i, forceMount: a, ...o } = E;
+			return o;
+		}), k = a(() => E.motion), A = s(() => k.resolved.value !== "off"), j = w();
+		o(() => j.open.value && j.modal.value);
+		let M = n({
+			open: j.open,
+			preset: "present"
+		}), N = s(() => {
+			if (!A.value) return;
+			let e = M.position.value;
+			return {
+				transform: "none",
+				scale: String(1 - .05 * e),
+				opacity: String(1 - e),
+				transition: "none"
+			};
+		}), P = s(() => A.value ? M.present.value || j.open.value : E.forceMount), F = s(() => A.value && !j.open.value ? "" : void 0), I = s(() => A.value ? i(M.position.value) : null), L = s(() => A.value ? M.present.value || j.open.value : void 0), R = h(null), z = () => R.value?.closest("[data-slot=\"dialog-content\"]") ?? null;
+		v(() => j.open.value, (e) => {
+			if (!A.value || e !== !1) return;
+			let t = document.activeElement;
+			t && z()?.contains(t) && j.triggerElement.value?.focus({ preventScroll: !0 });
+		}, { flush: "sync" });
+		let B = h(0), V = s(() => B.value === 0 ? void 0 : B.value % 2 == 1 ? "a" : "b"), H = s(() => E.dismiss === "free");
+		function U(e) {
+			E.dismiss === "locked" && (e.preventDefault(), B.value += 1);
+		}
+		let W = T(O, D), G = s(() => ({
+			"--glass-veil-tier": "var(--glass-veil-dialog)",
+			...k.hostStyle.value ?? {},
+			...N.value ?? {}
+		})), K = s(() => e("fixed left-1/2 top-1/2 z-modal", t("floating"), E.scroll ? "max-h-[calc(100dvh-2rem)] overflow-y-auto" : "", E.class));
+		return (e, t) => (m(), c(_(S), { "force-mount": P.value }, {
+			default: y(() => [d(r, {
+				veil: "",
+				opacity: I.value,
+				"force-mount": L.value
+			}, null, 8, ["opacity", "force-mount"]), d(_(x), p({
+				..._(W),
+				...e.$attrs,
+				inert: F.value
+			}, {
+				"aria-modal": _(j).modal.value ? "true" : void 0,
+				"force-mount": P.value,
+				class: K.value,
+				style: G.value,
+				"data-surface": E.surface,
+				"data-slot": "dialog-content",
+				"data-dismiss": E.dismiss,
+				"data-rebuff": V.value,
+				"data-scroll": E.scroll ? "" : void 0,
+				"data-motion": _(k).dataMotion.value,
+				onEscapeKeyDown: U,
+				onPointerDownOutside: U
+			}), {
+				default: y(() => [
+					u("span", {
+						ref_key: "contentAnchorEl",
+						ref: R,
+						hidden: ""
+					}, null, 512),
+					H.value ? (m(), c(_(b), {
+						key: 0,
+						"data-slot": "dialog-close"
+					}, {
+						default: y(() => [...t[0] ||= [u("svg", {
+							class: "w-4 h-4",
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							"stroke-width": "2",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round",
+							"aria-hidden": "true"
+						}, [u("path", { d: "M18 6 6 18M6 6l12 12" })], -1), u("span", { class: "sr-only" }, "Close", -1)]]),
+						_: 1
+					})) : l("", !0),
+					g(e.$slots, "default")
+				]),
+				_: 3
+			}, 16, [
+				"aria-modal",
+				"force-mount",
+				"class",
+				"style",
+				"data-surface",
+				"data-dismiss",
+				"data-rebuff",
+				"data-scroll",
+				"data-motion"
+			])]),
+			_: 3
+		}, 8, ["force-mount"]));
+	}
+});
+//#endregion
+export { E as n, D as t };

package/dist/{DropdownMenuTrigger-8UZsBtZ8.js → DropdownMenuTrigger-CKRnhDSQ.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./class-names-q-UGOkHH.js";
+import { t as e } from "./class-names-FlXcvRRT.js";
 import { t } from "./primitive-B2t2jdqM.js";
 import { computed as n, createBlock as r, defineComponent as i, inject as a, isRef as o, mergeProps as s, openBlock as c, provide as l, renderSlot as u, resolveDynamicComponent as d, unref as f, useAttrs as p, withCtx as m } from "vue";
 import { ContextMenuCheckboxItem as h, ContextMenuContent as g, ContextMenuGroup as _, ContextMenuItem as v, ContextMenuItemIndicator as y, ContextMenuLabel as b, ContextMenuPortal as x, ContextMenuRadioGroup as S, ContextMenuRadioItem as C, ContextMenuSeparator as w, ContextMenuSub as T, ContextMenuSubContent as E, ContextMenuSubTrigger as D, ContextMenuTrigger as O, DropdownMenuCheckboxItem as k, DropdownMenuContent as A, DropdownMenuGroup as j, DropdownMenuItem as M, DropdownMenuItemIndicator as N, DropdownMenuLabel as P, DropdownMenuPortal as F, DropdownMenuRadioGroup as I, DropdownMenuRadioItem as L, DropdownMenuSeparator as R, DropdownMenuSub as z, DropdownMenuSubContent as B, DropdownMenuSubTrigger as V, DropdownMenuTrigger as H, injectDropdownMenuRootContext as U } from "reka-ui";

package/dist/{Surface-i1tWC-Ga.js → Surface-1nPoabc3.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./class-names-q-UGOkHH.js";
+import { t as e } from "./class-names-FlXcvRRT.js";
 import { t } from "./resolve-DdrNvBby.js";
 import { computed as n, createBlock as r, defineComponent as i, mergeProps as a, openBlock as o, renderSlot as s, unref as c, useAttrs as l, withCtx as u } from "vue";
 import { Primitive as d } from "reka-ui";

package/dist/{accent-tone-solve-Cw7WkRD9.js → accent-tone-solve-5H6FY2QO.js}

@@ -2,7 +2,7 @@ import { i as e, t } from "./value-DMhh2R94.js";
 import { mixColors as n, safeAccentColor as r } from "@mkbabb/value.js/color";
 import { serializeCssColor as i } from "@mkbabb/value.js/css";
 //#region src/composables/color/accent-tone-solve.ts
-var a = "hsl(36 48% 97%)", o = 4.5, s = .18;
+var a = "hsl(30 85% 96%)", o = 4.5, s = .18;
 function c(c, l = {}) {
 	let u = l.bandStrength ?? s, d = l.inkContrast ?? o, f = l.surface || a, p = e(c, "solveAccentInk:tone");
 	return t("solveAccentInk:serialize", i(t("solveAccentInk:contrast", r(p, t("solveAccentInk:band", n(e(f, "solveAccentInk:surface"), p, u, { space: "oklab" })), {