@mkbabb/glass-ui 10.1.3 → 11.0.0

package/README.md

@@ -92,7 +92,7 @@ Of that, only `MIGRATION.md` ships. `package.json` declares `files: ["dist", "MI
 
 ```bash
 npm run dev             # storybook demo (multi-page, dock + carousel navigation)
-npm run build           # library → dist/glass-ui.js + glass-ui.css + index.d.ts + per-subpath chunks
+npm run build           # library → dist/glass-ui.js + index.d.ts + per-subpath chunks
 npm run typecheck       # vue-tsc --noEmit
 npm run profile:bundle  # inspect bundle sizes and exact value.js capability imports
 ```
@@ -168,7 +168,7 @@ 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. 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.]
+`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).
 
 **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`.
 

package/dist/DialogContent-DG5kseRQ.js

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

package/dist/DropdownMenuTrigger-uhSXgEfK.js

@@ -0,0 +1,76 @@
+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 { injectDropdownMenuRootContext as h } from "reka-ui";
+//#region src/components/menu/context.ts
+var g = Symbol("glass-menu-family");
+function _(e) {
+	l(g, e);
+}
+function v() {
+	let e = a(g, null);
+	if (!e) throw Error("Menu parts must be used within DropdownMenu or ContextMenu");
+	return e;
+}
+function y(e) {
+	return v().parts[e];
+}
+//#endregion
+//#region src/components/menu/DropdownMenuTrigger.vue
+var b = /* @__PURE__ */ i({
+	name: "DropdownMenuTrigger",
+	inheritAttrs: !1,
+	__name: "DropdownMenuTrigger",
+	props: {
+		asChild: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		action: { default: "click" },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(i) {
+		let a = i, l = p(), g = n(() => {
+			let e = t(l);
+			return a.asChild ? e : {
+				...e,
+				type: "button"
+			};
+		}), _ = v(), y = _.parts.Trigger, b = h(null), x = !1;
+		function S(e) {
+			a.action !== "pointerdown" || _.trigger !== "click" || !b || a.disabled || e.button !== 0 || e.ctrlKey || (x = !0, b.onOpenToggle(), b.open.value && e.preventDefault());
+		}
+		function C(e) {
+			x && (x = !1, e.detail !== 0 && (e.preventDefault(), e.stopImmediatePropagation()));
+		}
+		return (t, n) => (c(), r(d(f(y)), s(g.value, {
+			as: "button",
+			"as-child": i.asChild,
+			disabled: i.disabled,
+			class: f(e)("menu__trigger", a.class),
+			"data-slot": "menu-trigger",
+			onPointerdownCapture: S,
+			onPointercancelCapture: n[0] ||= (e) => o(x) ? x.value = !1 : x = !1,
+			onClickCapture: C
+		}), {
+			default: m(() => [u(t.$slots, "default")]),
+			_: 3
+		}, 16, [
+			"as-child",
+			"disabled",
+			"class"
+		]));
+	}
+});
+//#endregion
+export { y as i, _ as n, v as r, b as t };

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

@@ -14,6 +14,7 @@ var f = /* @__PURE__ */ i({
 			type: Boolean,
 			default: !1
 		},
+		backdropMode: { default: "live" },
 		class: { type: [
 			Boolean,
 			null,
@@ -32,6 +33,7 @@ var f = /* @__PURE__ */ i({
 			as: i.as,
 			"data-slot": c(p)["data-slot"] ?? "surface",
 			"data-surface": i.surface,
+			"data-backdrop-mode": i.backdropMode === "static" ? "static" : void 0,
 			class: c(e)(c(t)(i.tier, i.deep), f.class)
 		}), {
 			default: u(() => [s(n.$slots, "default")]),
@@ -40,6 +42,7 @@ var f = /* @__PURE__ */ i({
 			"as",
 			"data-slot",
 			"data-surface",
+			"data-backdrop-mode",
 			"class"
 		]));
 	}

package/dist/aurora.css

@@ -0,0 +1 @@
+@layer theme, base, components, utilities;@layer components{.aurora-root[data-v-1dfb5751]{opacity:var(--aurora-ceiling-a11y,var(--aurora-ceiling,1));contain:content;content-visibility:auto;contain-intrinsic-size:auto 600px;display:grid}.aurora-root>.aurora-placeholder[data-v-1dfb5751],.aurora-root>.aurora-canvas-layer[data-v-1dfb5751]{grid-area:1/1}.aurora-root>.aurora-placeholder[data-v-1dfb5751]{image-rendering:auto;background-position:50%;background-repeat:no-repeat;background-size:cover}.aurora-placeholder[data-v-1dfb5751]{background-image:var(--aurora-ground-image,none);background-color:var(--aurora-ground-color,transparent)}.aurora-placeholder[data-aurora-ground-active][data-v-1dfb5751]{z-index:1}.aurora-placeholder[data-aurora-ground-fade][data-v-1dfb5751]{animation:aurora-ground-in-1dfb5751 var(--duration-fast) var(--ease-standard) both}@keyframes aurora-ground-in-1dfb5751{0%{opacity:0}}.aurora-canvas-layer[data-v-1dfb5751]{z-index:2;opacity:0;transition:opacity var(--duration-slow) var(--ease-standard);isolation:isolate}.aurora-canvas-layer--armed[data-v-1dfb5751]{opacity:1}@media (prefers-reduced-motion:reduce){.aurora-canvas-layer[data-v-1dfb5751]{transition-duration:1ms}.aurora-placeholder[data-aurora-ground-fade][data-v-1dfb5751]{animation:none}}@media (prefers-reduced-transparency:reduce){.aurora-root[data-v-1dfb5751]{--aurora-ceiling-a11y:1}}@media (forced-colors:active){.aurora-root>.aurora-canvas-layer[data-v-1dfb5751]{display:none}.aurora-placeholder[data-v-1dfb5751]{background-color:canvas;background-image:none}}}