@mkbabb/glass-ui 10.0.1 → 10.1.1

package/dist/{configurator-DiwVN573.js → configurator-CPxIo3q2.js}

@@ -4,28 +4,28 @@ import { t as n } from "./_plugin-vue_export-helper-B3ysoDQm.js";
 import { t as r } from "./label-CE03H1KL.js";
 import { t as i } from "./expandable-container-CZUj9BzY.js";
 import { t as a } from "./fading-scroll-CTeW3KNS.js";
-import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeModels as h, mergeProps as g, normalizeClass as _, normalizeStyle as v, openBlock as y, reactive as b, ref as x, renderList as S, renderSlot as C, resolveDynamicComponent as w, toDisplayString as T, toRaw as E, unref as D, useId as O, useModel as k, withCtx as A, withModifiers as j } from "vue";
+import { Fragment as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, createVNode as p, defineComponent as m, mergeModels as h, mergeProps as g, normalizeClass as _, normalizeStyle as v, openBlock as y, reactive as b, ref as x, renderList as S, renderSlot as C, resolveDynamicComponent as ee, toDisplayString as w, toRaw as T, unref as E, useId as D, useModel as O, useSlots as k, withCtx as A, withModifiers as j } from "vue";
 import { ChevronDown as M, RotateCcw as N } from "@lucide/vue";
 //#region src/components/configurator/size.ts
 var P = t("configuratorSize"), F = P.KEY;
 function I(e) {
 	P.provide(e);
 }
-var L = P.use, R = ["data-aside-side", "data-gallery"], z = {
-	key: 0,
-	"data-gallery-dock": "",
-	class: "configurator-presets shrink-0 px-3"
-}, B = [
+var L = P.use, R = [
+	"data-layout",
+	"data-aside-side",
+	"data-gallery"
+], z = [
 	"data-active",
 	"aria-pressed",
 	"onClick"
-], V = { class: "configurator-stage relative min-h-0 min-w-0 overflow-hidden" }, H = { class: "configurator-aside flex min-h-0 min-w-0 flex-col" }, U = { class: "flex flex-col" }, W = {
+], B = { class: "flex flex-col" }, V = {
 	key: 1,
 	class: "configurator-controls flex-1 min-h-0 overflow-visible"
-}, G = { class: "flex flex-col" }, K = {
+}, H = { class: "flex flex-col" }, U = {
 	key: 2,
 	class: "configurator-footer shrink-0 border-t px-3 py-2"
-}, q = /* @__PURE__ */ m({
+}, W = /* @__PURE__ */ m({
 	__name: "Configurator",
 	props: /*@__PURE__*/ h({
 		presets: {},
@@ -36,6 +36,7 @@ var L = P.use, R = ["data-aside-side", "data-gallery"], z = {
 		size: { default: "md" },
 		asideSide: { default: "right" },
 		galleryPlacement: { default: "aside" },
+		layout: { default: "attached" },
 		asideWidth: {},
 		expandable: {
 			type: Boolean,
@@ -63,18 +64,18 @@ var L = P.use, R = ["data-aside-side", "data-gallery"], z = {
 		"reset"
 	], ["update:expanded"]),
 	setup(t, { emit: n }) {
-		let r = t, f = k(t, "expanded");
+		let r = t, f = O(t, "expanded");
 		I(s(() => r.size));
-		let m = n, h = s(() => e("configurator-shell glass-floating rounded-panel border border-border/60 overflow-hidden", r.class)), b = s(() => e("configurator", "grid", "min-h-0")), x = s(() => r.expandable ? i : "div"), E = s(() => r.expandable ? "configurator-expand-host" : "contents"), O = s(() => r.expandable ? {
+		let m = n, h = s(() => r.layout === "detached"), b = s(() => h.value ? "glass-floating rounded-card border border-border/60 overflow-hidden" : void 0), x = s(() => e("configurator-shell", !h.value && "glass-floating rounded-panel border border-border/60 overflow-hidden", r.class)), T = s(() => e("configurator", "grid", "min-h-0")), D = s(() => r.expandable ? i : "div"), k = s(() => r.expandable ? "configurator-expand-host" : "contents"), M = s(() => r.expandable ? {
 			open: f.value,
 			"onUpdate:open": (e) => {
 				f.value = e;
 			},
 			expandLabel: r.expandLabel,
 			collapseLabel: r.collapseLabel
-		} : {}), M = s(() => r.expandable && f.value ? "top" : r.galleryPlacement), N = s(() => {
+		} : {}), N = s(() => r.expandable && f.value ? "top" : r.galleryPlacement), P = s(() => {
 			let e = {
-				"--radius-ctx": "var(--radius-panel)",
+				"--radius-ctx": h.value ? "var(--radius-card)" : "var(--radius-panel)",
 				"--radius-inset": "var(--configurator-pad-inline)"
 			};
 			if (r.asideWidth != null) {
@@ -82,21 +83,26 @@ var L = P.use, R = ["data-aside-side", "data-gallery"], z = {
 				e["--configurator-aside-min"] = t, e["--configurator-aside-max"] = n;
 			}
 			return e;
-		}), P = s(() => r.scrollMode !== "never");
-		return (n, r) => (y(), c(w(x.value), g(O.value, { class: E.value }), {
+		}), F = s(() => r.scrollMode !== "never");
+		return (n, r) => (y(), c(ee(D.value), g(M.value, { class: k.value }), {
 			default: A(() => [d("div", {
-				class: _(h.value),
-				style: v(N.value)
+				class: _(x.value),
+				style: v(P.value)
 			}, [d("section", {
 				"data-slot": "configurator",
+				"data-layout": t.layout,
 				"data-aside-side": t.asideSide,
-				"data-gallery": M.value,
-				class: _(b.value)
+				"data-gallery": N.value,
+				class: _(T.value)
 			}, [
-				n.$slots.presets || t.presets && t.presets.length > 0 ? (y(), u("div", z, [C(n.$slots, "presets", {
+				n.$slots.presets || t.presets && t.presets.length > 0 ? (y(), u("div", {
+					key: 0,
+					"data-gallery-dock": "",
+					class: _(E(e)("configurator-presets shrink-0 px-3", b.value))
+				}, [C(n.$slots, "presets", {
 					presets: t.presets,
 					activePreset: t.activePreset
-				}, () => [p(D(a), {
+				}, () => [p(E(a), {
 					axis: "x",
 					class: "configurator-gallery-track flex scrollbar-hidden",
 					role: "group",
@@ -108,13 +114,13 @@ var L = P.use, R = ["data-aside-side", "data-gallery"], z = {
 						"data-preset-tile": "",
 						"data-active": n.key === t.activePreset || void 0,
 						"aria-pressed": n.key === t.activePreset,
-						class: _(D(e)("configurator-preset-chip glass-capsule glass-capsule-hover shadow-cartoon focus-ring shrink-0 px-3 py-1 text-micro font-medium text-foreground", n.key === t.activePreset && "is-active")),
+						class: _(E(e)("configurator-preset-chip glass-capsule glass-capsule-hover shadow-cartoon focus-ring shrink-0 px-3 py-1 text-micro font-medium text-foreground", n.key === t.activePreset && "is-active")),
 						onClick: j((e) => m("select-preset", n.key), ["stop"])
-					}, T(n.label), 11, B))), 128))]),
+					}, w(n.label), 11, z))), 128))]),
 					_: 1
-				})])])) : l("", !0),
-				d("div", V, [C(n.$slots, "stage")]),
-				d("aside", H, [P.value ? (y(), c(D(a), {
+				})])], 2)) : l("", !0),
+				d("div", { class: _(E(e)("configurator-stage relative min-h-0 min-w-0 overflow-hidden", b.value)) }, [C(n.$slots, "stage")], 2),
+				d("aside", { class: _(E(e)("configurator-aside flex min-h-0 min-w-0 flex-col", b.value)) }, [F.value ? (y(), c(E(a), {
 					key: 0,
 					axis: "y",
 					class: "configurator-controls flex-1 min-h-0 scrollbar-thin"
@@ -123,30 +129,37 @@ var L = P.use, R = ["data-aside-side", "data-gallery"], z = {
 						layers: t.layers,
 						activeLayer: t.activeLayer,
 						selectLayer: (e) => m("select-layer", e)
-					}, () => [d("div", U, [C(n.$slots, "default")])])]),
+					}, () => [d("div", B, [C(n.$slots, "default")])])]),
 					_: 3
-				})) : (y(), u("div", W, [C(n.$slots, "controls", {
+				})) : (y(), u("div", V, [C(n.$slots, "controls", {
 					layers: t.layers,
 					activeLayer: t.activeLayer,
 					selectLayer: (e) => m("select-layer", e)
-				}, () => [d("div", G, [C(n.$slots, "default")])])])), n.$slots.footer ? (y(), u("div", K, [C(n.$slots, "footer", { reset: () => m("reset") })])) : l("", !0)])
+				}, () => [d("div", H, [C(n.$slots, "default")])])])), n.$slots.footer ? (y(), u("div", U, [C(n.$slots, "footer", { reset: () => m("reset") })])) : l("", !0)], 2)
 			], 10, R)], 6)]),
 			_: 3
 		}, 16, ["class"]));
 	}
-}), J = ["data-state"], Y = [
+}), G = ["data-state"], K = {
+	"data-slot": "configurator-layer-header",
+	class: "configurator-layer-header"
+}, q = [
 	"aria-expanded",
 	"aria-controls",
 	"data-state"
-], X = { class: "flex min-w-0 items-baseline gap-2" }, ee = { class: "configurator-section-label truncate" }, Z = {
+], J = { class: "configurator-layer-heading flex min-w-0 items-baseline gap-2" }, Y = { class: "configurator-section-label truncate" }, X = {
 	key: 0,
 	class: "truncate text-micro font-mono text-muted-foreground"
+}, Z = {
+	key: 0,
+	"data-slot": "configurator-layer-actions",
+	class: "configurator-layer-actions flex items-center gap-1"
 }, Q = [
 	"id",
 	"aria-hidden",
 	"inert",
 	"data-state"
-], $ = { class: "min-h-0 overflow-hidden" }, te = ["data-dividers"], ne = /*#__PURE__*/ n(/* @__PURE__ */ m({
+], te = { class: "min-h-0 overflow-hidden" }, ne = ["data-dividers"], re = /*#__PURE__*/ n(/* @__PURE__ */ m({
 	__name: "ConfiguratorLayer",
 	props: /*@__PURE__*/ h({
 		label: {},
@@ -157,6 +170,7 @@ var L = P.use, R = ["data-aside-side", "data-gallery"], z = {
 			default: !0
 		},
 		dividers: { type: Boolean },
+		actionsWhen: { default: "open" },
 		class: { type: [
 			Boolean,
 			null,
@@ -180,42 +194,42 @@ var L = P.use, R = ["data-aside-side", "data-gallery"], z = {
 	}),
 	emits: ["update:open"],
 	setup(t) {
-		let n = t, r = k(t, "open");
-		r.value === void 0 && (r.value = n.defaultOpen);
-		let i = `configurator-layer-body-${O()}`, a = s(() => n.id ?? i);
-		function o() {
-			r.value = !r.value;
+		let n = t, r = k(), i = O(t, "open");
+		i.value === void 0 && (i.value = n.defaultOpen);
+		let a = `configurator-layer-body-${D()}`, o = s(() => n.id ?? a);
+		function c() {
+			i.value = !i.value;
 		}
-		let c = s(() => r.value ? "open" : "closed");
-		return (i, s) => (y(), u("div", {
+		let f = s(() => i.value ? "open" : "closed"), m = s(() => !!r.actions && (n.actionsWhen === "always" || !!i.value));
+		return (r, a) => (y(), u("div", {
 			"data-slot": "configurator-layer",
-			class: _(D(e)("configurator-layer", n.class)),
-			"data-state": c.value
-		}, [d("button", {
+			class: _(E(e)("configurator-layer", n.class)),
+			"data-state": f.value
+		}, [d("div", K, [d("button", {
 			type: "button",
 			"data-slot": "configurator-layer-trigger",
-			class: _(D(e)("configurator-layer-trigger", "group flex w-full items-center justify-between gap-2 py-2", "tap-squish transition-control text-left focus-ring")),
-			"aria-expanded": r.value,
-			"aria-controls": a.value,
-			"data-state": c.value,
-			onClick: o
-		}, [d("div", X, [d("span", ee, T(t.label), 1), t.sub ? (y(), u("span", Z, T(t.sub), 1)) : l("", !0)]), p(D(M), {
-			class: "h-4 w-4 shrink-0 text-muted-foreground group-data-[state=open]:rotate-180 transition-disclosure",
+			class: _(E(e)("configurator-layer-trigger", "group w-full py-2", "tap-squish transition-control text-left focus-ring")),
+			"aria-expanded": i.value,
+			"aria-controls": o.value,
+			"data-state": f.value,
+			onClick: c
+		}, [d("div", J, [d("span", Y, w(t.label), 1), t.sub ? (y(), u("span", X, w(t.sub), 1)) : l("", !0)]), p(E(M), {
+			class: "configurator-layer-chevron h-4 w-4 shrink-0 text-muted-foreground group-data-[state=open]:rotate-180 transition-disclosure",
 			"aria-hidden": "true"
-		})], 10, Y), d("div", {
-			id: a.value,
+		})], 10, q), m.value ? (y(), u("div", Z, [C(r.$slots, "actions", { open: i.value }, void 0, !0)])) : l("", !0)]), d("div", {
+			id: o.value,
 			role: "region",
-			"aria-hidden": !r.value,
-			inert: !r.value || void 0,
-			"data-state": c.value,
+			"aria-hidden": !i.value,
+			inert: !i.value || void 0,
+			"data-state": f.value,
 			class: "configurator-layer-region grid motion-reduce:transition-none",
-			style: v({ gridTemplateRows: r.value ? "1fr" : "0fr" })
-		}, [d("div", $, [d("div", {
+			style: v({ gridTemplateRows: i.value ? "1fr" : "0fr" })
+		}, [d("div", te, [d("div", {
 			"data-dividers": n.dividers || void 0,
-			class: _(D(e)("configurator-layer-body py-2 space-y-2", n.dividers && "[&>*+*]:border-t [&>*+*]:pt-2", n.bodyClass))
-		}, [C(i.$slots, "default", {}, void 0, !0)], 10, te)])], 12, Q)], 10, J));
+			class: _(E(e)("configurator-layer-body py-2 space-y-2", n.dividers && "[&>*+*]:border-t [&>*+*]:pt-2", n.bodyClass))
+		}, [C(r.$slots, "default", {}, void 0, !0)], 10, ne)])], 12, Q)], 10, G));
 	}
-}), [["__scopeId", "data-v-6fa47df1"]]), re = ["data-size"], ie = { class: "flex items-baseline justify-between gap-3" }, ae = { class: "flex min-w-0 items-baseline gap-2" }, oe = {
+}), [["__scopeId", "data-v-2f76a595"]]), ie = ["data-size"], ae = { class: "flex items-baseline justify-between gap-3" }, oe = { class: "flex min-w-0 items-baseline gap-2" }, $ = {
 	key: 0,
 	class: "truncate text-small font-normal text-muted-foreground"
 }, se = {
@@ -243,22 +257,22 @@ var L = P.use, R = ["data-aside-side", "data-gallery"], z = {
 	},
 	emits: ["reset"],
 	setup(t, { emit: n }) {
-		let i = t, a = n, o = `${O()}-label`, c = L(), m = s(() => i.size ?? c?.value ?? void 0);
+		let i = t, a = n, o = `${D()}-label`, c = L(), m = s(() => i.size ?? c?.value ?? void 0);
 		return (n, s) => (y(), u("div", {
 			"data-slot": "configurator-row",
-			class: _(D(e)("configurator-row flex flex-col gap-1.5 py-2", i.class)),
+			class: _(E(e)("configurator-row flex flex-col gap-1.5 py-2", i.class)),
 			"data-size": m.value
 		}, [
-			d("div", ie, [d("div", ae, [
-				p(D(r), {
+			d("div", ae, [d("div", oe, [
+				p(E(r), {
 					id: o,
 					class: "truncate"
 				}, {
-					default: A(() => [f(T(t.label), 1)]),
+					default: A(() => [f(w(t.label), 1)]),
 					_: 1
 				}),
-				t.sub ? (y(), u("span", oe, T(t.sub), 1)) : l("", !0),
-				t.name ? (y(), u("span", se, T(t.name), 1)) : l("", !0)
+				t.sub ? (y(), u("span", $, w(t.sub), 1)) : l("", !0),
+				t.name ? (y(), u("span", se, w(t.name), 1)) : l("", !0)
 			]), t.canReset ? (y(), u("button", {
 				key: 0,
 				type: "button",
@@ -266,19 +280,19 @@ var L = P.use, R = ["data-aside-side", "data-gallery"], z = {
 				class: "tap-squish transition-control focus-ring inline-flex h-6 w-6 items-center justify-center rounded-pill text-muted-foreground/60",
 				"aria-label": `Reset ${t.label}`,
 				onClick: s[0] ||= (e) => a("reset")
-			}, [p(D(N), {
+			}, [p(E(N), {
 				class: "h-3 w-3",
 				"aria-hidden": "true"
 			})], 8, ce)) : l("", !0)]),
 			d("div", le, [C(n.$slots, "default", { labelledBy: o }, void 0, !0)]),
-			t.description ? (y(), u("p", ue, T(t.description), 1)) : l("", !0)
-		], 10, re));
+			t.description ? (y(), u("p", ue, w(t.description), 1)) : l("", !0)
+		], 10, ie));
 	}
 }), [["__scopeId", "data-v-ed1debd3"]]);
 //#endregion
 //#region src/components/configurator/useConfiguratorState.ts
 function fe(e) {
-	let t = E(e);
+	let t = T(e);
 	if (typeof structuredClone != "function") throw Error("[glass-ui:configurator] structuredClone is unavailable in this runtime. Pass a custom clone via ConfiguratorStateOptions.clone for environments without structured-clone support.");
 	try {
 		return structuredClone(t);
@@ -336,4 +350,4 @@ function me(e) {
 	};
 }
 //#endregion
-export { F as a, q as i, de as n, I as o, ne as r, L as s, me as t };
+export { F as a, W as i, de as n, I as o, re as r, L as s, me as t };

package/dist/configurator.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./configurator-DiwVN573.js";
+import { a as e, i as t, n, o as r, r as i, s as a, t as o } from "./configurator-CPxIo3q2.js";
 export { e as CONFIGURATOR_SIZE_KEY, t as Configurator, i as ConfiguratorLayer, n as ConfiguratorRow, r as provideConfiguratorSize, o as useConfiguratorState, a as useOptionalConfiguratorSize };

package/dist/content-BhcJH1bI.js

@@ -0,0 +1,22 @@
+import { t as e } from "./class-names-FlXcvRRT.js";
+import { t } from "./resolve-DdrNvBby.js";
+//#region src/components/_shared/overlay/content.ts
+var n = {
+	hint: "tooltip",
+	menu: "menu",
+	panel: "overlay"
+}, r = {
+	hint: "z-tooltip",
+	menu: "z-popover",
+	panel: "z-popover"
+};
+function i(i) {
+	return {
+		class: e(t("floating"), "glass-overlay-plate glass-reveal", r[i.role], i.class),
+		"data-slot": i.slot,
+		"data-reveal": n[i.role],
+		...i.dock
+	};
+}
+//#endregion
+export { i as t };