@mkbabb/glass-ui 5.0.0 → 7.0.0

package/dist/drawer.js

@@ -1,29 +1,29 @@
-import { t as e } from "./class-names-5jotTFzp.js";
-import { t } from "./motionTempo-CMS5b0Vu.js";
-import { t as n } from "./useSurfaceAxis-DudiZVOR.js";
-import { t as r } from "./createContext-BQ1Gy_LB.js";
-import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, onScopeDispose as p, onUnmounted as m, openBlock as h, ref as g, renderSlot as _, toRef as v, unref as y, watch as b, withCtx as x } from "vue";
-import { DialogClose as S, DialogContent as C, DialogDescription as w, DialogOverlay as T, DialogPortal as E, DialogPortal as D, DialogRoot as O, DialogTitle as k, DialogTrigger as A, useForwardPropsEmits as j } from "reka-ui";
-import { SpringProgress as M } from "@mkbabb/keyframes.js";
+import { t as e } from "./class-names-Cpy5eaBk.js";
+import { t } from "./motionTempo-tscp92Nm.js";
+import { t as n } from "./createContext-BhkE9mLH.js";
+import { t as r } from "./useMotionAxis-D-rtIhca.js";
+import { computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, mergeProps as d, normalizeClass as f, onBeforeUnmount as p, onUnmounted as m, openBlock as h, ref as g, renderSlot as _, toRef as v, unref as y, watch as b, withCtx as x } from "vue";
+import { DialogContent as S, DialogDescription as C, DialogOverlay as w, DialogPortal as T, DialogRoot as E, DialogTitle as D, injectDialogRootContext as O, useForwardPropsEmits as k } from "reka-ui";
+import { SpringProgress as A } from "@mkbabb/keyframes.js";
 //#region src/components/drawer/constants.ts
-var N = {
+var j = {
 	response: .32,
 	dampingFraction: .8
-}, P = [
+}, M = [
 	.12,
 	.5,
 	1
 ];
-function F(e) {
-	return e === "left" || e === "right" ? [] : P;
+function N(e) {
+	return e === "left" || e === "right" ? [] : M;
 }
 //#endregion
 //#region src/components/drawer/composables/drawerSnapContext.ts
-var I = r("glass-ui:drawer-snap-context"), { KEY: L } = I;
-function R(e) {
-	I.provide(e);
+var P = n("glass-ui:drawer-snap-context"), { KEY: F } = P;
+function I(e) {
+	P.provide(e);
 }
-var z = I.use, B = /* @__PURE__ */ u({
+var L = P.use, R = /* @__PURE__ */ u({
 	__name: "Drawer",
 	props: {
 		open: {
@@ -46,51 +46,59 @@ var z = I.use, B = /* @__PURE__ */ u({
 	},
 	emits: ["update:open", "update:activeSnapPoint"],
 	setup(e, { emit: t }) {
-		let n = e, r = t, o = i(() => n.open !== void 0), s = g(n.open ?? n.defaultOpen);
+		let n = e, o = t, s = i(() => n.open !== void 0), l = g(n.open ?? n.defaultOpen);
 		b(() => n.open, (e) => {
-			e !== void 0 && (s.value = e);
+			e !== void 0 && (l.value = e);
 		});
-		function c(e) {
-			s.value = e, r("update:open", e);
+		function u(e) {
+			l.value = e, o("update:open", e);
 		}
-		let l = i(() => o.value ? n.open : s.value), u = i(() => n.mode === "live-behind"), d = i(() => n.modal ?? !u.value), f = typeof window < "u" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches, m = i(() => {
-			let e = n.stage ?? (u.value ? "none" : "scale");
-			return f && (e === "scale" || e === "immersive") ? "dim" : e;
-		});
-		function S(e) {
-			if (typeof document > "u") return;
-			let t = document.querySelector("[data-stage-wrapper]"), n = document.querySelector("[data-stage-scrim]"), r = e && (m.value === "scale" || m.value === "immersive"), i = e && m.value === "immersive";
-			t && t.toggleAttribute("data-stage-scale", r), n && n.toggleAttribute("data-stage-immersive", i);
-		}
-		b(() => l.value, (e) => S(e), { immediate: !0 }), b(m, () => S(l.value)), p(() => S(!1));
-		let C = i(() => n.snapPoints && n.snapPoints.length > 0 ? n.snapPoints.map((e) => typeof e == "number" ? e : Number.parseFloat(e)) : F(n.direction)), w = g(n.activeSnapPoint ?? null);
+		let d = i(() => s.value ? n.open : l.value), f = i(() => n.mode === "live-behind"), m = i(() => n.modal ?? !f.value), S = r(), C = i(() => {
+			let e = n.stage ?? (f.value ? "none" : "scale");
+			return S.prefersReducedMotion.value && (e === "scale" || e === "immersive") ? "dim" : e;
+		}), w = i(() => n.snapPoints === void 0 ? f.value ? N(n.direction) : [] : n.snapPoints.map((e) => typeof e == "number" ? e : Number.parseFloat(e))), T = g(n.activeSnapPoint ?? null);
 		b(() => n.activeSnapPoint, (e) => {
-			e !== void 0 && (w.value = e);
-		}), b(w, (e) => r("update:activeSnapPoint", e));
-		let T = g(l.value);
-		return b(l, (e) => T.value = e), b(T, (e) => {
-			e !== l.value && c(e);
-		}), R({
-			open: T,
-			snapPoints: C,
+			e !== void 0 && (T.value = e);
+		}), b(T, (e) => o("update:activeSnapPoint", e));
+		let D = g(d.value);
+		b(d, (e) => D.value = e), b(D, (e) => {
+			e !== d.value && u(e);
+		});
+		let O = g(null), k = g(null), A = g(null);
+		return b(O, (e) => {
+			k.value = e?.closest("[data-stage-wrapper]") ?? null;
+		}, {
+			immediate: !0,
+			flush: "post"
+		}), p(() => {
+			k.value = null, A.value = null;
+		}), I({
+			open: D,
+			snapPoints: w,
 			direction: v(n, "direction"),
-			activeSnapPoint: w
-		}), (e, t) => (h(), a(y(O), {
+			mode: v(n, "mode"),
+			stage: C,
+			wrapperEl: k,
+			scrimEl: A,
+			activeSnapPoint: T
+		}), (e, t) => (h(), a(y(E), {
 			"data-slot": "drawer",
-			open: l.value,
-			modal: d.value,
-			"onUpdate:open": c
+			open: d.value,
+			modal: m.value,
+			"onUpdate:open": u
 		}, {
-			default: x(() => [_(e.$slots, "default")]),
+			default: x(() => [c("span", {
+				ref_key: "stageAnchorEl",
+				ref: O,
+				hidden: ""
+			}, null, 512), _(e.$slots, "default")]),
 			_: 3
 		}, 8, ["open", "modal"]));
 	}
-}), V = /* @__PURE__ */ u({
+}), z = /* @__PURE__ */ u({
 	__name: "DrawerOverlay",
 	props: {
 		forceMount: { type: Boolean },
-		asChild: { type: Boolean },
-		as: {},
 		class: { type: [
 			Boolean,
 			null,
@@ -100,25 +108,39 @@ var z = I.use, B = /* @__PURE__ */ u({
 		] }
 	},
 	setup(t) {
-		let n = t, r = i(() => {
-			let { class: e, ...t } = n;
-			return t;
-		});
-		return (t, i) => (h(), a(y(T), d(r.value, {
+		let n = t, r = L(), i = g(null), o = null;
+		return b(i, (e) => {
+			r && (o = e?.parentElement ?? null, r.scrimEl.value = o);
+		}, {
+			immediate: !0,
+			flush: "post"
+		}), p(() => {
+			r?.scrimEl.value === o && (r.scrimEl.value = null);
+		}), (t, o) => (h(), a(y(w), d({
+			forceMount: n.forceMount,
+			inert: y(r) && !y(r).open.value ? "" : void 0
+		}, {
 			"data-stage-scrim": "",
 			class: y(e)("fixed inset-0 z-overlay [backdrop-filter:var(--glass-blur-wash)]", n.class)
-		}), null, 16, ["class"]));
+		}), {
+			default: x(() => [c("span", {
+				ref_key: "overlayAnchorEl",
+				ref: i,
+				hidden: ""
+			}, null, 512)]),
+			_: 1
+		}, 16, ["class"]));
 	}
 });
 //#endregion
 //#region src/components/drawer/composables/useDrawerSnap.ts
-function H(e) {
+function B(e) {
 	return e === "left" || e === "right";
 }
-function U(e, t) {
-	return e.length > 0 ? [...e].sort((e, t) => e - t) : H(t) ? [0, 1] : [1];
+function V(e, t) {
+	return e.length > 0 ? [...e].sort((e, t) => e - t) : B(t) ? [0, 1] : [1];
 }
-function W(e, t) {
+function H(e, t) {
 	let n = t[0], r = Math.abs(e - n);
 	for (let i of t) {
 		let t = Math.abs(e - i);
@@ -126,136 +148,178 @@ function W(e, t) {
 	}
 	return n;
 }
-function G(e, t, n) {
+function U(e, t, n) {
 	let r = n.indexOf(e);
-	if (r === -1) return W(e, n);
+	if (r === -1) return H(e, n);
 	let i = r + t;
 	return i < 0 || i >= n.length ? e : n[i];
 }
-function K(e) {
-	let { contentEl: n, handleEl: r, ctx: i } = e, a = g(!1), o = null, s = null, c = null;
-	function l() {
-		if (typeof document > "u") return [];
-		s?.isConnected || (s = document.querySelector("[data-stage-scrim]")), c?.isConnected || (c = document.querySelector("[data-stage-wrapper]"));
-		let e = [];
-		return s && e.push(s), c && e.push(c), e;
+function W(e) {
+	let { contentEl: n, handleEl: r, ctx: i } = e, a = g(!1), o = g(i.open.value), s = null, c = null, l = null;
+	function u(e, t, n) {
+		let r = i.stage.value;
+		e?.toggleAttribute("data-stage-scale", n && (r === "scale" || r === "immersive")), t?.toggleAttribute("data-stage-immersive", n && r === "immersive");
+	}
+	function d(e) {
+		f(), u(l, c, e);
 	}
-	function u(e) {
+	function f() {
+		let e = i.scrimEl.value, t = i.wrapperEl.value;
+		e?.isConnected ? c = e : c && !c.isConnected && (c = null), t?.isConnected ? l = t : l && !l.isConnected && (l = null);
+	}
+	function p() {
+		let e = c, t = l;
+		f(), o.value && (c !== e || l !== t) && u(l, c, !0);
+		let n = [];
+		return c && n.push(c), l && n.push(l), n;
+	}
+	function h(e) {
 		let t = n();
 		t && (t.style.setProperty("--glass-drawer-t", `${e}`), t.style.setProperty("--stage-t", `${e}`));
-		for (let t of l()) t.style.setProperty("--stage-t", `${e}`);
+		for (let t of p()) t.style.setProperty("--stage-t", `${e}`);
 	}
-	function d() {
-		o &&= (o.dispose(), null);
+	function _() {
 		let e = n();
-		e && e.style.removeProperty("--stage-t"), s && s.style.removeProperty("--stage-t"), c && c.style.removeProperty("--stage-t"), s = null, c = null;
+		e && e.style.removeProperty("--stage-t"), c && c.style.removeProperty("--stage-t"), l && l.style.removeProperty("--stage-t"), c = null, l = null;
 	}
-	function f(e) {
-		return o || (o = new M({
-			response: N.response * t(n()),
-			dampingFraction: N.dampingFraction,
-			initial: e ?? p(),
+	function v() {
+		s?.dispose(), s = null, _();
+	}
+	function y() {
+		i.open.value || !s || s.target !== 0 || !s.settled || (h(0), o.value = !1, d(!1), _());
+	}
+	function x(e) {
+		h(e), y();
+	}
+	function S(e) {
+		return s || (s = new A({
+			response: j.response * t(n()),
+			dampingFraction: j.dampingFraction,
+			initial: e ?? C(),
 			respectReducedMotion: !0
-		}), o.play((e) => u(e)), o);
+		}), s);
 	}
-	function p() {
+	function C() {
 		let e = i.activeSnapPoint.value;
 		if (typeof e == "number") return e;
 		if (typeof e == "string") {
 			let t = Number.parseFloat(e);
 			if (!Number.isNaN(t)) return t;
 		}
-		let t = U(i.snapPoints.value, i.direction.value);
+		let t = V(i.snapPoints.value, i.direction.value);
 		return t[t.length - 1] ?? 1;
 	}
-	function h(e) {
-		let t = f();
-		t.play((e) => u(e)), t.target = e, i.activeSnapPoint.value = e;
-	}
-	function _(e) {
-		h(W(e, U(i.snapPoints.value, i.direction.value)));
+	function w(e) {
+		let t = S();
+		t.target = e, t.play(x), i.activeSnapPoint.value = e;
 	}
-	let v = null, y = 0, x = 0, S = 0, C = 0, w = 0;
 	function T(e) {
+		w(H(e, V(i.snapPoints.value, i.direction.value)));
+	}
+	let E = null, D = 0, O = 0, k = 0, M = 0, N = 0;
+	function P(e) {
 		let t = i.direction.value;
 		return t === "bottom" ? -e.clientY : t === "top" ? e.clientY : t === "left" ? e.clientX : -e.clientX;
 	}
-	let E = 1;
-	function D() {
+	let F = 1;
+	function I() {
 		let e = n();
 		if (!e) return 1;
 		let t = e.getBoundingClientRect();
-		return H(i.direction.value) ? t.width || 1 : t.height || 1;
+		return B(i.direction.value) ? t.width || 1 : t.height || 1;
 	}
-	function O(e) {
+	function L(e) {
 		let t = r.value;
-		t && (o && o.stop(), a.value = !0, v = e.pointerId, y = T(e), S = y, C = e.timeStamp, x = p(), w = 0, E = D(), t.setPointerCapture?.(e.pointerId));
+		t && (s && s.stop(), a.value = !0, E = e.pointerId, D = P(e), k = D, M = e.timeStamp, O = W(), N = 0, F = I(), t.setPointerCapture?.(e.pointerId));
 	}
-	function k(e) {
-		if (v === null || e.pointerId !== v) return;
-		let t = T(e), n = (e.timeStamp - C) / 1e3;
-		n > 0 && (w = (t - S) / n), S = t, C = e.timeStamp;
-		let r = (t - y) / E, a = U(i.snapPoints.value, i.direction.value), o = a[0], s = a[a.length - 1];
-		u(Math.min(s, Math.max(o, x + r)));
+	function R(e) {
+		if (E === null || e.pointerId !== E) return;
+		let t = P(e), n = (e.timeStamp - M) / 1e3;
+		n > 0 && (N = (t - k) / n), k = t, M = e.timeStamp;
+		let r = (t - D) / F, a = V(i.snapPoints.value, i.direction.value), o = a[0], s = a[a.length - 1];
+		h(Math.min(s, Math.max(o, O + r)));
 	}
-	function A(e) {
-		if (v === null || e.pointerId !== v) return;
-		r.value?.releasePointerCapture?.(e.pointerId), v = null, a.value = !1;
-		let t = U(i.snapPoints.value, i.direction.value), n = j();
-		f().reset(n, 0);
+	function z(e) {
+		if (E === null || e.pointerId !== E) return;
+		r.value?.releasePointerCapture?.(e.pointerId), E = null, a.value = !1;
+		let t = V(i.snapPoints.value, i.direction.value), n = W();
+		S().reset(n, N / F);
 		let o;
-		if (Math.abs(w) >= 450 && t.length > 1) {
-			let e = w > 0 ? 1 : -1;
-			o = G(W(n, t), e, t);
-		} else o = W(n, t);
+		if (Math.abs(N) >= 450 && t.length > 1) {
+			let e = N > 0 ? 1 : -1;
+			o = U(H(n, t), e, t);
+		} else o = H(n, t);
 		if (o <= 0) {
 			i.open.value = !1;
 			return;
 		}
-		h(o);
+		w(o);
 	}
-	function j() {
+	function W() {
 		let e = n();
-		if (!e) return p();
+		if (!e) return C();
 		let t = e.style.getPropertyValue("--glass-drawer-t"), r = Number.parseFloat(t);
-		return Number.isNaN(r) ? p() : r;
+		return Number.isNaN(r) ? C() : r;
 	}
-	let P = null;
-	function F(e) {
-		e.addEventListener("pointerdown", O), e.addEventListener("pointermove", k), e.addEventListener("pointerup", A), e.addEventListener("pointercancel", A), P = () => {
-			e.removeEventListener("pointerdown", O), e.removeEventListener("pointermove", k), e.removeEventListener("pointerup", A), e.removeEventListener("pointercancel", A), P = null;
+	let G = null;
+	function K(e) {
+		e.addEventListener("pointerdown", L), e.addEventListener("pointermove", R), e.addEventListener("pointerup", z), e.addEventListener("pointercancel", z), G = () => {
+			e.removeEventListener("pointerdown", L), e.removeEventListener("pointermove", R), e.removeEventListener("pointerup", z), e.removeEventListener("pointercancel", z), G = null;
 		};
 	}
 	return b(r, (e) => {
-		P?.(), e && F(e);
+		G?.(), e && K(e);
 	}, { immediate: !0 }), b(i.open, (e) => {
-		e ? queueMicrotask(() => {
-			u(0), f(0), h(p());
-		}) : d();
-	}, { immediate: !0 }), b(i.activeSnapPoint, (e) => {
+		if (e) o.value = !0, d(!0), queueMicrotask(() => {
+			i.open.value && (s || (h(0), S(0)), w(C()));
+		});
+		else {
+			if (!o.value) return;
+			if (!s) {
+				h(0), o.value = !1, d(!1), _();
+				return;
+			}
+			a.value &&= (s.reset(W(), N / F), E !== null && (r.value?.releasePointerCapture?.(E), E = null), !1), s.target = 0, s.play(x), y();
+		}
+	}, {
+		immediate: !0,
+		flush: "sync"
+	}), b([
+		i.stage,
+		i.wrapperEl,
+		i.scrimEl
+	], () => {
+		o.value && d(!0);
+	}), b(i.activeSnapPoint, (e) => {
 		if (!i.open.value || a.value) return;
 		let t = typeof e == "number" ? e : typeof e == "string" ? Number.parseFloat(e) : NaN;
-		if (!Number.isNaN(t) && (!o || Math.abs(o.target - t) > .001)) {
-			let e = U(i.snapPoints.value, i.direction.value);
-			f().target = W(t, e);
+		if (!Number.isNaN(t) && (!s || Math.abs(s.target - t) > .001)) {
+			let e = V(i.snapPoints.value, i.direction.value), n = S();
+			n.target = H(t, e), n.play(x);
 		}
 	}), m(() => {
-		P?.(), d();
+		G?.(), d(!1), v();
 	}), {
+		present: o,
 		dragging: a,
-		snapTo: _
+		snapTo: T
 	};
 }
 //#endregion
 //#region src/components/drawer/DrawerContent.vue?vue&type=script&setup=true&lang.ts
-var q = ["data-dragging"], J = /* @__PURE__ */ u({
+var G = [
+	"data-dragging",
+	"aria-orientation",
+	"aria-valuemin",
+	"aria-valuemax",
+	"aria-valuenow",
+	"aria-valuetext"
+], K = /* @__PURE__ */ u({
 	inheritAttrs: !1,
 	__name: "DrawerContent",
 	props: {
 		forceMount: { type: Boolean },
 		disableOutsidePointerEvents: { type: Boolean },
-		asChild: { type: Boolean },
-		as: {},
 		class: { type: [
 			Boolean,
 			null,
@@ -277,41 +341,89 @@ var q = ["data-dragging"], J = /* @__PURE__ */ u({
 		"openAutoFocus",
 		"closeAutoFocus"
 	],
-	setup(t, { emit: r }) {
-		let s = t, u = r, f = j(i(() => {
-			let { class: e, showOverlay: t, surface: n, ...r } = s;
-			return r;
-		}), u), p = i(() => n(s.surface)), m = g(null), v = () => m.value?.closest("[data-glass-drawer]") ?? null, b = z(), S = b ? K({
+	setup(t, { emit: n }) {
+		let r = t, u = n, f = k(i(() => {
+			let { class: e, showOverlay: t, surface: n, forceMount: i, ...a } = r;
+			return a;
+		}), u), p = g(null), m = g(null), v = () => (p.value ?? m.value)?.closest("[data-glass-drawer]") ?? null, C = L(), w = C ? W({
 			contentEl: v,
-			handleEl: m,
-			ctx: b
-		}) : null, w = i(() => (b?.snapPoints.value.length ?? 0) > 1), T = i(() => b?.direction.value ?? "bottom"), D = i(() => {
-			if (!b) return;
-			let e = T.value;
+			handleEl: p,
+			ctx: C
+		}) : null, E = O();
+		b(() => C?.open.value, (e) => {
+			let t = document.activeElement;
+			e === !1 && t && v()?.contains(t) && E.triggerElement.value?.focus({ preventScroll: !0 });
+		}, { flush: "sync" });
+		let D = i(() => r.forceMount === !0 || w?.present.value === !0), A = i(() => (C?.snapPoints.value.length ?? 0) > 1), j = i(() => [...C?.snapPoints.value ?? []].sort((e, t) => e - t)), M = i(() => {
+			let e = C?.activeSnapPoint.value, t = typeof e == "number" ? e : Number.parseFloat(String(e));
+			return Number.isNaN(t) ? Math.max(0, j.value.length - 1) : j.value.reduce((e, n, r) => Math.abs(n - t) < Math.abs(j.value[e] - t) ? r : e, 0);
+		}), N = i(() => j.value[M.value] ?? 1), P = i(() => `${Math.round(N.value * 100)}%, position ${M.value + 1} of ${j.value.length}`), F = i(() => C?.direction.value ?? "bottom"), I = i(() => C?.mode.value ?? "modal");
+		function R(e) {
+			if (!w || !A.value) return;
+			let t = j.value.length - 1, n = M.value;
+			if (e.key === "Home") n = 0;
+			else if (e.key === "End") n = t;
+			else if (e.key === "ArrowUp" || e.key === "ArrowRight") n = Math.min(t, n + 1);
+			else if (e.key === "ArrowDown" || e.key === "ArrowLeft") n = Math.max(0, n - 1);
+			else return;
+			e.preventDefault(), w.snapTo(j.value[n]);
+		}
+		let B = i(() => {
+			if (!C) return;
+			let e = F.value;
 			return e === "bottom" ? { transform: "translateY(calc((1 - var(--glass-drawer-t, 0)) * 100%))" } : e === "top" ? { transform: "translateY(calc((var(--glass-drawer-t, 0) - 1) * 100%))" } : e === "left" ? { transform: "translateX(calc((var(--glass-drawer-t, 0) - 1) * 100%))" } : { transform: "translateX(calc((1 - var(--glass-drawer-t, 0)) * 100%))" };
 		});
-		return (t, n) => (h(), a(y(E), null, {
-			default: x(() => [s.showOverlay ? (h(), a(V, { key: 0 })) : o("", !0), l(y(C), d({
+		return (t, n) => (h(), a(y(T), { "force-mount": D.value }, {
+			default: x(() => [r.showOverlay ? (h(), a(z, {
+				key: 0,
+				"force-mount": D.value
+			}, null, 8, ["force-mount"])) : o("", !0), l(y(S), d({
 				...y(f),
-				...t.$attrs
+				...t.$attrs,
+				inert: y(C) && !y(C).open.value ? "" : void 0
 			}, {
+				"force-mount": D.value,
 				"data-glass-drawer": "",
-				"data-glass-drawer-snap-points": w.value ? "true" : void 0,
-				"data-glass-drawer-direction": T.value,
-				"data-surface": s.surface,
-				class: y(e)("glass-drawer", p.value, s.class),
-				style: D.value
+				"data-mode": I.value,
+				"data-glass-drawer-snap-points": A.value ? "true" : void 0,
+				"data-glass-drawer-direction": F.value,
+				"data-surface": r.surface,
+				class: y(e)("glass-drawer glass-overlay", r.class),
+				"data-material": "overlay",
+				style: B.value
 			}), {
-				default: x(() => [c("div", {
-					ref_key: "handleEl",
-					ref: m,
-					class: "glass-drawer-handle",
-					"data-glass-drawer-handle": "",
-					"data-dragging": y(S)?.dragging.value ? "" : void 0,
-					"aria-hidden": "true"
-				}, [...n[0] ||= [c("span", { class: "glass-drawer-grip" }, null, -1)]], 8, q), _(t.$slots, "default")]),
+				default: x(() => [
+					c("span", {
+						ref_key: "contentAnchorEl",
+						ref: m,
+						hidden: ""
+					}, null, 512),
+					A.value ? (h(), s("div", {
+						key: 0,
+						ref_key: "handleEl",
+						ref: p,
+						class: "glass-drawer-handle",
+						"data-glass-drawer-handle": "",
+						"data-dragging": y(w)?.dragging.value ? "" : void 0,
+						role: "slider",
+						tabindex: "0",
+						"aria-label": "Drawer position",
+						"aria-orientation": F.value === "left" || F.value === "right" ? "horizontal" : "vertical",
+						"aria-valuemin": j.value[0],
+						"aria-valuemax": j.value[j.value.length - 1],
+						"aria-valuenow": N.value,
+						"aria-valuetext": P.value,
+						onKeydown: R
+					}, [...n[0] ||= [c("span", {
+						class: "glass-drawer-grip",
+						"aria-hidden": "true"
+					}, null, -1)]], 40, G)) : o("", !0),
+					_(t.$slots, "default")
+				]),
 				_: 3
 			}, 16, [
+				"force-mount",
+				"data-mode",
 				"data-glass-drawer-snap-points",
 				"data-glass-drawer-direction",
 				"data-surface",
@@ -319,9 +431,9 @@ var q = ["data-dragging"], J = /* @__PURE__ */ u({
 				"style"
 			])]),
 			_: 3
-		}));
+		}, 8, ["force-mount"]));
 	}
-}), Y = /* @__PURE__ */ u({
+}), q = /* @__PURE__ */ u({
 	__name: "DrawerHeader",
 	props: { class: { type: [
 		Boolean,
@@ -334,7 +446,7 @@ var q = ["data-dragging"], J = /* @__PURE__ */ u({
 		let n = t;
 		return (t, r) => (h(), s("div", { class: f(y(e)("[--overlay-pad-inline:1rem] [--overlay-pad-block:calc(var(--overlay-pad-inline)*1.272)] [--card-pad-title-gap:calc(var(--overlay-pad-inline)/2.618)]", "grid gap-(--card-pad-title-gap) px-(--overlay-pad-inline) pt-(--overlay-pad-block) pb-0 text-center sm:text-left", n.class)) }, [_(t.$slots, "default")], 2));
 	}
-}), X = /* @__PURE__ */ u({
+}), J = /* @__PURE__ */ u({
 	__name: "DrawerFooter",
 	props: { class: { type: [
 		Boolean,
@@ -347,52 +459,38 @@ var q = ["data-dragging"], J = /* @__PURE__ */ u({
 		let n = t;
 		return (t, r) => (h(), s("div", { class: f(y(e)("[--overlay-pad-inline:1rem] [--overlay-pad-block:calc(var(--overlay-pad-inline)*1.272)] [--card-pad-footer:calc(var(--overlay-pad-block)/1.618)]", "mt-auto flex flex-col gap-2 px-(--overlay-pad-inline) pt-(--card-pad-footer) pb-(--overlay-pad-block)", n.class)) }, [_(t.$slots, "default")], 2));
 	}
-}), Z = /* @__PURE__ */ u({
+}), Y = /* @__PURE__ */ u({
 	__name: "DrawerTitle",
-	props: {
-		asChild: { type: Boolean },
-		as: {},
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	},
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
 	setup(t) {
-		let n = t, r = i(() => {
-			let { class: e, ...t } = n;
-			return t;
-		});
-		return (t, i) => (h(), a(y(k), d(r.value, { class: y(e)("text-subheading leading-none tracking-tight", n.class) }), {
+		let n = t;
+		return (t, r) => (h(), a(y(D), { class: f(y(e)("text-subheading leading-none tracking-tight", n.class)) }, {
 			default: x(() => [_(t.$slots, "default")]),
 			_: 3
-		}, 16, ["class"]));
+		}, 8, ["class"]));
 	}
-}), Q = /* @__PURE__ */ u({
+}), X = /* @__PURE__ */ u({
 	__name: "DrawerDescription",
-	props: {
-		asChild: { type: Boolean },
-		as: {},
-		class: { type: [
-			Boolean,
-			null,
-			String,
-			Object,
-			Array
-		] }
-	},
+	props: { class: { type: [
+		Boolean,
+		null,
+		String,
+		Object,
+		Array
+	] } },
 	setup(t) {
-		let n = t, r = i(() => {
-			let { class: e, ...t } = n;
-			return t;
-		});
-		return (t, i) => (h(), a(y(w), d(r.value, { class: y(e)("text-sm text-muted-foreground", n.class) }), {
+		let n = t;
+		return (t, r) => (h(), a(y(C), { class: f(y(e)("text-sm text-muted-foreground", n.class)) }, {
 			default: x(() => [_(t.$slots, "default")]),
 			_: 3
-		}, 16, ["class"]));
+		}, 8, ["class"]));
 	}
 });
 //#endregion
-export { B as Drawer, S as DrawerClose, J as DrawerContent, Q as DrawerDescription, X as DrawerFooter, Y as DrawerHeader, V as DrawerOverlay, D as DrawerPortal, Z as DrawerTitle, A as DrawerTrigger };
+export { R as Drawer, K as DrawerContent, X as DrawerDescription, J as DrawerFooter, q as DrawerHeader, Y as DrawerTitle };