@mkbabb/glass-ui 4.2.0 → 5.0.0

package/dist/DialogContent-Bl4v10AC.js

@@ -0,0 +1,192 @@
+import { t as e } from "./class-names-5jotTFzp.js";
+import { n as t } from "./useSurfaceAxis-DudiZVOR.js";
+import { t as n } from "./useMotionAxis-DCCXMC-i.js";
+import { t as r } from "./useSpringMount-CNvvgGiC.js";
+import { computed as i, createBlock as a, createCommentVNode as o, createElementVNode as s, createVNode as c, defineComponent as l, mergeProps as u, normalizeClass as d, normalizeStyle as f, onScopeDispose as p, openBlock as m, renderSlot as h, unref as g, watch as _, withCtx as v } from "vue";
+import { DialogClose as y, DialogContent as b, DialogOverlay as x, DialogPortal as S, DialogRoot as C, injectDialogRootContext as w, useForwardPropsEmits as T } from "reka-ui";
+import { X as E } from "@lucide/vue";
+//#endregion
+//#region src/components/dialog/Dialog.vue
+var D = /* @__PURE__ */ l({
+	__name: "Dialog",
+	props: {
+		open: { type: Boolean },
+		defaultOpen: { type: Boolean },
+		modal: { type: Boolean }
+	},
+	emits: ["update:open"],
+	setup(e, { emit: t }) {
+		let n = T(e, t);
+		return (e, t) => (m(), a(g(C), u({ "data-slot": "dialog" }, g(n)), {
+			default: v(() => [h(e.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+}), O = /* @__PURE__ */ l({
+	__name: "ModalOverlay",
+	props: {
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		scrim: { default: "glass" },
+		animate: { default: "fade" },
+		layout: { default: "centered" },
+		scrimAnimation: {}
+	},
+	setup(t) {
+		let n = t, r = {
+			glass: "bg-overlay-scrim",
+			clear: "bg-overlay-scrim-subtle",
+			dim: "bg-overlay-scrim-strong"
+		}, o = {
+			fade: "sheet-animate",
+			scale: "sheet-animate",
+			slide: "sheet-animate",
+			none: ""
+		}, s = {
+			centered: "",
+			edge: "",
+			scroll: "grid place-items-center overflow-y-auto"
+		}, c = i(() => {
+			if (n.scrimAnimation) return { "--scrim-animation": n.scrimAnimation };
+		});
+		return (t, i) => (m(), a(g(x), {
+			class: d(g(e)("fixed inset-0 z-overlay [backdrop-filter:var(--glass-blur-wash)]", r[n.scrim], s[n.layout], o[n.animate], n.class)),
+			style: f(c.value),
+			"data-scrim-animation": n.scrimAnimation ? "" : void 0
+		}, {
+			default: v(() => [h(t.$slots, "default")]),
+			_: 3
+		}, 8, [
+			"class",
+			"style",
+			"data-scrim-animation"
+		]));
+	}
+}), k = "fixed left-1/2 top-1/2 z-modal grid w-full max-w-lg gap-4 [--overlay-pad-inline:--spacing(6)] [--overlay-pad-block:calc(var(--overlay-pad-inline)*1.272)] px-(--overlay-pad-inline) py-(--overlay-pad-block)", A = "-translate-x-1/2 -translate-y-1/2 glass-reveal", j = "grid gap-4 [--overlay-pad-inline:--spacing(6)] [--overlay-pad-block:calc(var(--overlay-pad-inline)*1.272)] px-(--overlay-pad-inline) py-(--overlay-pad-block) transition ease-in-out sheet-animate", M = /* @__PURE__ */ l({
+	__name: "DialogContent",
+	props: {
+		forceMount: { type: Boolean },
+		disableOutsidePointerEvents: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		surface: { default: "glass" },
+		placement: { default: "center" },
+		scrimAnimation: {},
+		motion: {},
+		springPreset: {},
+		showClose: {
+			type: Boolean,
+			default: !0
+		},
+		stage: { default: "none" }
+	},
+	emits: [
+		"escapeKeyDown",
+		"pointerDownOutside",
+		"focusOutside",
+		"interactOutside",
+		"openAutoFocus",
+		"closeAutoFocus"
+	],
+	setup(l, { emit: d }) {
+		let f = l, x = d, C = i(() => {
+			let { class: e, surface: t, placement: n, scrimAnimation: r, motion: i, springPreset: a, showClose: o, stage: s, ...c } = f;
+			return c;
+		}), D = i(() => f.placement ?? "center"), M = i(() => D.value === "center"), N = n(() => f.motion), P = i(() => f.springPreset != null && N.resolved.value !== "off" && (f.placement ?? "center") === "center"), F = typeof window < "u" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches, I = i(() => {
+			let e = f.stage;
+			return F && (e === "scale" || e === "immersive") ? "dim" : e;
+		}), L = w();
+		function R(e) {
+			if (!(typeof document > "u" || f.stage === "none")) if (e) requestAnimationFrame(() => {
+				let e = document.querySelector("[data-stage-wrapper]"), t = document.querySelector("[data-stage-scrim]"), n = I.value === "scale" || I.value === "immersive", r = I.value === "immersive";
+				for (let n of [e, t]) n && (n.setAttribute("data-stage-flip", ""), n.style.setProperty("--stage-t", "0"));
+				e && e.toggleAttribute("data-stage-scale", n), t && t.toggleAttribute("data-stage-immersive", r), requestAnimationFrame(() => {
+					for (let n of [e, t]) n && n.style.setProperty("--stage-t", "1");
+				});
+			});
+			else {
+				let e = document.querySelector("[data-stage-wrapper]"), t = document.querySelector("[data-stage-scrim]");
+				for (let n of [e, t]) n && (n.removeAttribute("data-stage-flip"), n.style.removeProperty("--stage-t"));
+				e && e.removeAttribute("data-stage-scale"), t && t.removeAttribute("data-stage-immersive");
+			}
+		}
+		_(() => L?.open.value, (e) => R(!!e), { immediate: !0 }), p(() => R(!1));
+		let z = T(C, x), B = i(() => e(t(f.surface, "floating"), "rounded-dialog")), V = {
+			top: "rounded-b-dialog border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+			bottom: "rounded-t-dialog border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+			left: "rounded-r-dialog border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
+			right: "rounded-l-dialog border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right"
+		}, H = i(() => M.value ? e(k, P.value ? "" : A, B.value, f.class) : e(j, V[D.value], t(f.surface, "floating"), f.class)), U = {
+			"--radius-ctx": "var(--radius-dialog)",
+			"--radius-inset": "var(--overlay-pad-inline)"
+		}, W = P.value ? w() : null, G = P.value && W ? r({
+			open: W.open,
+			preset: f.springPreset ?? "smooth"
+		}) : null, K = i(() => {
+			if (!G) return;
+			let e = G.position.value, t = 1 - .05 * e;
+			return {
+				transform: "none",
+				translate: "-50% -50%",
+				scale: String(t),
+				opacity: String(1 - e),
+				animation: "none",
+				transition: "none"
+			};
+		}), q = { "--glass-bg-rung": "var(--glass-bg-dialog)" }, J = i(() => ({
+			...q,
+			...M.value ? {} : U,
+			...N.hostStyle.value ?? {},
+			...K.value ?? {}
+		}));
+		return (e, t) => (m(), a(g(S), null, {
+			default: v(() => [c(O, {
+				scrim: "glass",
+				animate: "fade",
+				layout: "centered",
+				"scrim-animation": f.scrimAnimation
+			}, null, 8, ["scrim-animation"]), c(g(b), u(g(z), {
+				class: H.value,
+				style: J.value,
+				"data-surface": f.surface,
+				"data-slot": "dialog-content",
+				"data-placement": M.value ? void 0 : D.value,
+				"data-reveal": M.value ? "overlay" : void 0,
+				"data-motion": g(N).dataMotion.value,
+				"data-spring": P.value ? f.springPreset ?? "smooth" : void 0
+			}), {
+				default: v(() => [h(e.$slots, "default"), f.showClose ? (m(), a(g(y), {
+					key: 0,
+					class: "focus-ring absolute right-(--overlay-pad-inline) top-(--overlay-pad-block) rounded-sm opacity-70 transition-opacity hover:opacity-100 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+				}, {
+					default: v(() => [c(g(E), { class: "w-4 h-4" }), t[0] ||= s("span", { class: "sr-only" }, "Close", -1)]),
+					_: 1
+				})) : o("", !0)]),
+				_: 3
+			}, 16, [
+				"class",
+				"style",
+				"data-surface",
+				"data-placement",
+				"data-reveal",
+				"data-motion",
+				"data-spring"
+			])]),
+			_: 3
+		}));
+	}
+});
+//#endregion
+export { O as n, D as r, M as t };

package/dist/DialogFooter-C0v4Hz2F.js

@@ -0,0 +1,168 @@
+import { t as e } from "./class-names-5jotTFzp.js";
+import { n as t } from "./DialogContent-Bl4v10AC.js";
+import { computed as n, createBlock as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, guardReactiveProps as c, mergeProps as l, normalizeClass as u, normalizeProps as d, openBlock as f, renderSlot as p, unref as m, withCtx as h } from "vue";
+import { DialogClose as g, DialogContent as _, DialogDescription as v, DialogPortal as y, DialogTitle as b, DialogTrigger as x, useForwardProps as S, useForwardPropsEmits as C } from "reka-ui";
+import { X as w } from "@lucide/vue";
+//#endregion
+//#region src/components/dialog/DialogClose.vue
+var T = /* @__PURE__ */ s({
+	__name: "DialogClose",
+	props: {
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(e) {
+		let t = e;
+		return (e, n) => (f(), r(m(g), d(c(t)), {
+			default: h(() => [p(e.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+}), E = /* @__PURE__ */ s({
+	__name: "DialogTrigger",
+	props: {
+		asChild: { type: Boolean },
+		as: {}
+	},
+	setup(e) {
+		let t = e;
+		return (e, n) => (f(), r(m(x), d(c(t)), {
+			default: h(() => [p(e.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+}), D = /* @__PURE__ */ s({
+	__name: "DialogHeader",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, r) => (f(), i("div", { class: u(m(e)("flex flex-col gap-y-1.5 text-center sm:text-left", n.class)) }, [p(t.$slots, "default")], 2));
+	}
+}), O = /* @__PURE__ */ s({
+	__name: "DialogTitle",
+	props: {
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(t) {
+		let i = t, a = S(n(() => {
+			let { class: e, ...t } = i;
+			return t;
+		}));
+		return (t, n) => (f(), r(m(b), l(m(a), { class: m(e)("text-subheading leading-none tracking-tight", i.class) }), {
+			default: h(() => [p(t.$slots, "default")]),
+			_: 3
+		}, 16, ["class"]));
+	}
+}), k = /* @__PURE__ */ s({
+	__name: "DialogDescription",
+	props: {
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(t) {
+		let i = t, a = S(n(() => {
+			let { class: e, ...t } = i;
+			return t;
+		}));
+		return (t, n) => (f(), r(m(v), l(m(a), { class: m(e)("text-sm text-muted-foreground", i.class) }), {
+			default: h(() => [p(t.$slots, "default")]),
+			_: 3
+		}, 16, ["class"]));
+	}
+}), A = /* @__PURE__ */ s({
+	__name: "DialogScrollContent",
+	props: {
+		forceMount: { type: Boolean },
+		disableOutsidePointerEvents: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		overlayClass: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	emits: [
+		"escapeKeyDown",
+		"pointerDownOutside",
+		"focusOutside",
+		"interactOutside",
+		"openAutoFocus",
+		"closeAutoFocus"
+	],
+	setup(i, { emit: s }) {
+		let c = i, d = s, v = C(n(() => {
+			let { class: e, overlayClass: t, ...n } = c;
+			return n;
+		}), d);
+		return (n, i) => (f(), r(m(y), null, {
+			default: h(() => [o(t, {
+				scrim: "clear",
+				animate: "fade",
+				layout: "scroll",
+				class: u(c.overlayClass)
+			}, {
+				default: h(() => [o(m(_), l({
+					"data-reveal": "overlay",
+					class: m(e)("popover-content relative z-overlay grid w-full max-w-lg my-8 gap-4 border border-border glass-floating [--overlay-pad-inline:--spacing(6)] [--overlay-pad-block:calc(var(--overlay-pad-inline)*1.272)] px-(--overlay-pad-inline) py-(--overlay-pad-block) [box-shadow:var(--glass-shadow-floating)] glass-reveal sm:rounded-dialog md:w-full", c.class)
+				}, m(v), { onPointerDownOutside: i[0] ||= (e) => {
+					let t = e.detail.originalEvent, n = t.target;
+					(t.offsetX > n.clientWidth || t.offsetY > n.clientHeight) && e.preventDefault();
+				} }), {
+					default: h(() => [p(n.$slots, "default"), o(m(g), { class: "focus-ring absolute top-3 right-3 p-0.5 transition-colors rounded-pill hover:bg-secondary" }, {
+						default: h(() => [o(m(w), { class: "w-4 h-4" }), i[1] ||= a("span", { class: "sr-only" }, "Close", -1)]),
+						_: 1
+					})]),
+					_: 3
+				}, 16, ["class"])]),
+				_: 3
+			}, 8, ["class"])]),
+			_: 3
+		}));
+	}
+}), j = /* @__PURE__ */ s({
+	__name: "DialogFooter",
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
+	setup(t) {
+		let n = t;
+		return (t, r) => (f(), i("div", { class: u(m(e)("flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2", n.class)) }, [p(t.$slots, "default")], 2));
+	}
+});
+//#endregion
+export { D as a, O as i, A as n, E as o, k as r, T as s, j as t };

package/dist/FadingScroll-BSRLqQCx.js

@@ -0,0 +1,76 @@
+import { t as e } from "./useResizeObserver-DDuoBeBo.js";
+import { t } from "./supportsCssTimeline-Ie4xJFbD.js";
+import { createElementBlock as n, defineComponent as r, normalizeClass as i, onBeforeUnmount as a, onMounted as o, openBlock as s, ref as c, renderSlot as l, unref as u } from "vue";
+//#region src/components/fading-scroll/constants.ts
+var d = t();
+//#endregion
+//#region src/components/fading-scroll/composables/useFadingScroll.ts
+function f(t, n = {}) {
+	let { axis: r = "x", fadeStart: i = !0, fadeEnd: s = !0 } = n, l = c(!d), f = 0, p = null;
+	function m(e, n) {
+		let r = u(t);
+		r && (r.style.setProperty("--fade-start", e ? "var(--fade-scroll-width)" : "0px"), r.style.setProperty("--fade-end", n ? "var(--fade-scroll-width)" : "0px"));
+	}
+	function h() {
+		let e = u(t);
+		if (!e) return;
+		let n = r === "x" ? e.scrollLeft : e.scrollTop, a = r === "x" ? e.scrollWidth - e.clientWidth : e.scrollHeight - e.clientHeight, o = n <= 12, c = n >= a - 12;
+		m(i && !o, s && !c);
+	}
+	function g() {
+		f ||= requestAnimationFrame(() => {
+			f = 0, h();
+		});
+	}
+	function _() {
+		let n = u(t);
+		n && (n.addEventListener("scroll", g, { passive: !0 }), p = e(t, h).stop, h());
+	}
+	function v() {
+		u(t)?.removeEventListener("scroll", g), p?.(), p = null, f &&= (cancelAnimationFrame(f), 0);
+	}
+	return o(() => {
+		l.value && _();
+	}), a(v), {
+		active: l,
+		measure: h,
+		stop: v
+	};
+}
+//#endregion
+//#region src/components/fading-scroll/FadingScroll.vue?vue&type=script&setup=true&lang.ts
+var p = [
+	"data-fade-axis",
+	"data-fade-start",
+	"data-fade-end"
+], m = /* @__PURE__ */ r({
+	__name: "FadingScroll",
+	props: {
+		axis: { default: "x" },
+		fadeStart: {
+			type: Boolean,
+			default: !0
+		},
+		fadeEnd: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(e) {
+		let t = e, r = c(null);
+		return f(r, {
+			axis: t.axis,
+			fadeStart: t.fadeStart,
+			fadeEnd: t.fadeEnd
+		}), (t, a) => (s(), n("div", {
+			ref_key: "rootRef",
+			ref: r,
+			class: i(["fading-scroll", e.axis === "y" ? "fading-scroll--y" : "fading-scroll--x"]),
+			"data-fade-axis": e.axis,
+			"data-fade-start": e.fadeStart ? "" : void 0,
+			"data-fade-end": e.fadeEnd ? "" : void 0
+		}, [l(t.$slots, "default")], 10, p));
+	}
+});
+//#endregion
+export { f as n, m as t };

package/dist/FocusScope-BzKwhsBn.js

@@ -0,0 +1,23 @@
+import { computed as e, createBlock as t, defineComponent as n, mergeProps as r, openBlock as i, renderSlot as a, unref as o, withCtx as s } from "vue";
+import { FocusScope as c, useForwardPropsEmits as l } from "reka-ui";
+//#endregion
+//#region src/components/focus-scope/FocusScope.vue
+var u = /* @__PURE__ */ n({
+	__name: "FocusScope",
+	props: {
+		loop: { type: Boolean },
+		trapped: { type: Boolean },
+		asChild: { type: Boolean },
+		as: {}
+	},
+	emits: ["mountAutoFocus", "unmountAutoFocus"],
+	setup(n, { emit: u }) {
+		let d = n, f = u, p = l(e(() => d), f);
+		return (e, n) => (i(), t(o(c), r({ "data-slot": "focus-scope" }, o(p)), {
+			default: s(() => [a(e.$slots, "default")]),
+			_: 3
+		}, 16));
+	}
+});
+//#endregion
+export { u as t };

package/dist/IconChip-CwLmBJ_K.js

@@ -0,0 +1,57 @@
+import { t as e } from "./class-names-5jotTFzp.js";
+import { t } from "./vReveal-DUmiEkX_.js";
+import { computed as n, createBlock as r, createElementBlock as i, defineComponent as a, normalizeClass as o, normalizeStyle as s, openBlock as c, resolveDynamicComponent as l, unref as u, withDirectives as d } from "vue";
+//#region src/components/icon-chip/IconChip.vue?vue&type=script&setup=true&lang.ts
+var f = ["data-duotone", "data-surface"], p = 48, m = 22, h = /* @__PURE__ */ a({
+	name: "IconChip",
+	__name: "IconChip",
+	props: {
+		icon: { type: [Function, Object] },
+		section: {},
+		tone: {},
+		size: {},
+		glyphSize: {},
+		strokeWidth: {},
+		bare: { type: Boolean },
+		duotone: { type: Boolean },
+		bloom: { type: Boolean },
+		saturated: { type: Boolean },
+		glass: { type: Boolean },
+		reveal: { type: [Boolean, Number] },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(a) {
+		let h = a, g = n(() => h.tone == null ? h.section == null ? "var(--muted-foreground)" : `var(--section-color-${h.section}, var(--muted-foreground))` : h.tone), _ = n(() => h.tone == null ? h.section == null ? "var(--muted)" : `var(--section-color-${h.section}, var(--muted))` : h.tone), v = n(() => void 0), y = n(() => h.reveal != null && h.reveal !== !1), b = n(() => h.reveal === !0 ? 0 : typeof h.reveal == "number" ? h.reveal : 0), x = n(() => {
+			let e = h.glyphSize ?? m, t = {
+				"--icon-chip-event-color": g.value,
+				"--icon-chip-plate-color": _.value,
+				"--icon-chip-glyph-size": `${e}px`,
+				"--icon-chip-size": `${h.size ?? p}px`
+			};
+			return h.glass && (t["--glass-fill-tint"] = g.value, t["--glass-fill-strength"] = "var(--icon-chip-glass-strength, 14%)"), t;
+		});
+		return (n, a) => d((c(), i("span", {
+			class: o(["icon-chip", u(e)(h.bare && "icon-chip--bare", h.duotone && "icon-chip--duotone", h.bloom && "icon-chip--bloom", h.saturated && "icon-chip--saturated", h.glass && "icon-chip--glass glass-capsule glass-atom", y.value && "icon-chip--reveal", h.class)]),
+			"data-duotone": h.duotone ? "" : void 0,
+			"data-surface": h.glass ? "glass" : void 0,
+			style: s(x.value)
+		}, [(c(), r(l(h.icon), {
+			class: "icon-chip__glyph",
+			size: h.glyphSize ?? 22,
+			"stroke-width": h.strokeWidth ?? 1.75,
+			"aria-hidden": "true"
+		}, null, 8, ["size", "stroke-width"]))], 14, f)), [[
+			u(t),
+			b.value,
+			v.value
+		]]);
+	}
+});
+//#endregion
+export { h as t };

package/dist/IconTooltip-D9sbK-Mk.js

@@ -0,0 +1,25 @@
+import { i as e, n as t, r as n, t as r } from "./TooltipProvider-GtfYdSVf.js";
+import { createBlock as i, createTextVNode as a, createVNode as o, defineComponent as s, openBlock as c, renderSlot as l, toDisplayString as u, unref as d, withCtx as f } from "vue";
+//#endregion
+//#region src/components/icon-tooltip/IconTooltip.vue
+var p = /* @__PURE__ */ s({
+	__name: "IconTooltip",
+	props: { text: {} },
+	setup(s) {
+		return (p, m) => (c(), i(d(r), { "delay-duration": 250 }, {
+			default: f(() => [o(d(e), null, {
+				default: f(() => [o(d(t), { "as-child": "" }, {
+					default: f(() => [l(p.$slots, "default")]),
+					_: 3
+				}), o(d(n), { class: "font-display text-base" }, {
+					default: f(() => [a(u(s.text), 1)]),
+					_: 1
+				})]),
+				_: 3
+			})]),
+			_: 3
+		}));
+	}
+});
+//#endregion
+export { p as t };

package/dist/Input-DKf-XwUM.js

@@ -0,0 +1,57 @@
+import { t as e } from "./class-names-5jotTFzp.js";
+import { t } from "./useControlSize-DJwe-7ZQ.js";
+import { computed as n, createElementBlock as r, defineComponent as i, isRef as a, mergeProps as o, openBlock as s, unref as c, vModelDynamic as l, withDirectives as u } from "vue";
+import { useVModel as d } from "@vueuse/core";
+//#endregion
+//#region src/components/input/Input.vue
+var f = /* @__PURE__ */ i({
+	inheritAttrs: !1,
+	__name: "Input",
+	props: {
+		defaultValue: {},
+		modelValue: {},
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] },
+		size: {},
+		type: {},
+		placeholder: {},
+		disabled: { type: [Boolean, String] },
+		required: { type: [Boolean, String] },
+		inputmode: {},
+		autocomplete: {},
+		pattern: {},
+		name: {},
+		readonly: { type: [Boolean, String] }
+	},
+	emits: ["update:modelValue"],
+	setup(i, { emit: f }) {
+		let p = i, m = d(p, "modelValue", f, {
+			passive: !0,
+			defaultValue: p.defaultValue
+		}), h = n(() => ({
+			type: p.type,
+			placeholder: p.placeholder,
+			disabled: p.disabled,
+			required: p.required,
+			inputmode: p.inputmode,
+			autocomplete: p.autocomplete,
+			pattern: p.pattern,
+			name: p.name,
+			readonly: p.readonly
+		}));
+		return (n, i) => u((s(), r("input", o({
+			"onUpdate:modelValue": i[0] ||= (e) => a(m) ? m.value = e : null,
+			"data-slot": "input"
+		}, {
+			...n.$attrs,
+			...h.value
+		}, { class: c(e)("input-pill glass-control-edge [--control-surface-bg:var(--input-on-glass)] file:border-0 file:bg-transparent file:text-(length:--control-text-sm) file:font-medium", c(t)(p.size), p.class) }), null, 16)), [[l, c(m)]]);
+	}
+});
+//#endregion
+export { f as t };

package/dist/InstrumentChassis-Dss5Tjcm.js

@@ -0,0 +1,65 @@
+import { t as e } from "./class-names-5jotTFzp.js";
+import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, renderSlot as l } from "vue";
+//#region src/components/instrument-chassis/ChassisDivider.vue?vue&type=script&setup=true&lang.ts
+var u = ["data-orientation"], d = /* @__PURE__ */ o({
+	__name: "ChassisDivider",
+	props: {
+		orientation: { default: "horizontal" },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(n) {
+		let r = n, o = t(() => e("chassis-divider", `chassis-divider--${r.orientation}`, r.class));
+		return (e, t) => (c(), i("div", {
+			class: s(o.value),
+			"data-orientation": n.orientation,
+			"aria-hidden": "true"
+		}, [...t[0] ||= [a("span", { class: "bezel-line top" }, null, -1), a("span", { class: "bezel-line bottom" }, null, -1)]], 10, u));
+	}
+}), f = ["data-phase", "data-variant"], p = {
+	key: 0,
+	class: "instrument-strip"
+}, m = { class: "instrument-dial" }, h = {
+	key: 3,
+	class: "instrument-control"
+}, g = /* @__PURE__ */ o({
+	__name: "InstrumentChassis",
+	props: {
+		phase: {},
+		variant: { default: "glass" },
+		class: { type: [
+			Boolean,
+			null,
+			String,
+			Object,
+			Array
+		] }
+	},
+	setup(o) {
+		let u = o, g = t(() => e("instrument-chassis", u.class));
+		return (e, t) => (c(), i("section", {
+			class: s(g.value),
+			"data-phase": o.phase ?? "ready",
+			"data-variant": o.variant
+		}, [
+			e.$slots.strip ? (c(), i("header", p, [l(e.$slots, "strip")])) : r("", !0),
+			e.$slots.strip ? (c(), n(d, {
+				key: 1,
+				orientation: "horizontal"
+			})) : r("", !0),
+			a("main", m, [l(e.$slots, "dial")]),
+			e.$slots.control ? (c(), n(d, {
+				key: 2,
+				orientation: "horizontal"
+			})) : r("", !0),
+			e.$slots.control ? (c(), i("footer", h, [l(e.$slots, "control")])) : r("", !0)
+		], 10, f));
+	}
+});
+//#endregion
+export { d as n, g as t };