@ac-design/design-system 2.1.1 → 2.2.1

package/dist/lib/components/AcUserMenu.vue_vue_type_script_setup_true_lang.js

@@ -1,33 +1,34 @@
-import e from "./AcAvatar.js";
-import t from "./AcFontScale.js";
-import n from "./AcThemeMode.js";
-import { Fragment as r, Teleport as i, Transition as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, getCurrentInstance as m, mergeModels as h, mergeProps as ee, nextTick as g, normalizeClass as _, normalizeStyle as te, onBeforeUnmount as ne, openBlock as v, ref as y, renderList as b, renderSlot as re, resolveDynamicComponent as x, toDisplayString as S, unref as C, useId as ie, useModel as w, watch as T, withCtx as E } from "vue";
-import { Building2 as ae, Check as oe, ChevronDown as se, LogOut as ce } from "@lucide/vue";
+import { fixedFrame as e } from "./fixedFrame.js";
+import t from "./AcAvatar.js";
+import n from "./AcFontScale.js";
+import r from "./AcThemeMode.js";
+import { Fragment as i, Teleport as a, Transition 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, getCurrentInstance as ee, mergeModels as h, mergeProps as te, nextTick as g, normalizeClass as _, normalizeStyle as ne, onBeforeUnmount as re, openBlock as v, ref as y, renderList as b, renderSlot as ie, resolveDynamicComponent as x, toDisplayString as S, unref as C, useId as ae, useModel as w, watch as T, withCtx as E } from "vue";
+import { Building2 as oe, Check as se, ChevronDown as ce, LogOut as le } from "@lucide/vue";
 //#region src/lib/components/AcUserMenu.vue?vue&type=script&setup=true&lang.ts
-var le = {
+var ue = {
 	class: "inline-flex",
 	"data-ac-ds": "",
 	"data-testid": "ac-user-menu"
-}, ue = [
+}, de = [
 	"aria-expanded",
 	"aria-controls",
 	"aria-label"
-], de = {
+], fe = {
 	key: 0,
 	class: "hidden max-w-36 truncate text-base font-medium text-heading md:block"
-}, fe = {
+}, pe = {
 	class: "inline-flex size-9 shrink-0 rounded-full bg-linear-to-r from-primary/70 to-primary/90 p-0.5",
 	"aria-hidden": "true"
-}, pe = { class: "inline-flex size-full items-center justify-center overflow-hidden rounded-full bg-surface text-xs font-semibold text-primary-strong" }, me = ["src"], he = {
+}, me = { class: "inline-flex size-full items-center justify-center overflow-hidden rounded-full bg-surface text-xs font-semibold text-primary-strong" }, he = ["src"], ge = {
 	class: "inline-flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary/10 text-base font-semibold text-primary-strong ring-1 ring-primary/25 ring-inset",
 	"aria-hidden": "true"
-}, ge = ["src"], _e = { class: "min-w-0 flex-1" }, ve = { class: "block truncate text-base font-medium text-heading" }, ye = {
+}, _e = ["src"], ve = { class: "min-w-0 flex-1" }, ye = { class: "block truncate text-base font-medium text-heading" }, be = {
 	key: 0,
 	class: "block truncate text-xs text-muted"
-}, be = ["aria-labelledby"], xe = ["id"], Se = { class: "flex flex-col gap-1" }, Ce = ["aria-checked", "onClick"], we = { class: "flex min-w-0 items-center gap-2" }, Te = { class: "min-w-0" }, Ee = { class: "block truncate font-medium text-heading" }, D = { class: "block truncate text-xs text-muted" }, De = ["aria-labelledby"], Oe = ["id"], ke = ["aria-labelledby"], Ae = ["id"], je = {
+}, xe = ["aria-labelledby"], Se = ["id"], Ce = { class: "flex flex-col gap-1" }, we = ["aria-checked", "onClick"], Te = { class: "flex min-w-0 items-center gap-2" }, Ee = { class: "min-w-0" }, D = { class: "block truncate font-medium text-heading" }, De = { class: "block truncate text-xs text-muted" }, Oe = ["aria-labelledby"], ke = ["id"], Ae = ["aria-labelledby"], je = ["id"], Me = {
 	role: "group",
 	class: "mt-1 flex flex-col border-t border-border py-1"
-}, Me = { class: "min-w-0 flex-1 truncate" }, O = "flex min-h-10 w-full cursor-pointer items-center gap-2 rounded-8 px-4 py-2.5 text-left text-base font-medium no-underline outline-none transition-colors duration-150 hover:bg-surface-sunken focus-visible:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0", Ne = "[role=\"menuitem\"]:not([aria-disabled=\"true\"]), [role=\"menuitemradio\"], [role=\"radio\"]", k = /*@__PURE__*/ p({
+}, O = { class: "min-w-0 flex-1 truncate" }, k = "flex min-h-10 w-full cursor-pointer items-center gap-2 rounded-8 px-4 py-2.5 text-left text-base font-medium no-underline outline-none transition-colors duration-150 hover:bg-surface-sunken focus-visible:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0", Ne = "[role=\"menuitem\"]:not([aria-disabled=\"true\"]), [role=\"menuitemradio\"], [role=\"radio\"]", A = /*@__PURE__*/ m({
 	__name: "AcUserMenu",
 	props: /*@__PURE__*/ h({
 		name: {},
@@ -66,146 +67,146 @@ var le = {
 		"set:theme",
 		"switch-workspace"
 	], ["update:open", "update:workspace"]),
-	setup(p, { emit: h }) {
-		let k = p, A = w(p, "open"), j = w(p, "workspace"), M = h, N = `${O} text-heading [&>svg]:text-muted`, Pe = `${O} text-danger-strong`, P = m()?.appContext.components.RouterLink, F = ie(), I = `${F}-trigger`, L = `${F}-menu`, R = y(null), z = y(null), B = y(!1), V = y({
+	setup(m, { emit: h }) {
+		let A = m, j = w(m, "open"), M = w(m, "workspace"), N = h, P = `${k} text-heading [&>svg]:text-muted`, Pe = `${k} text-danger-strong`, F = ee()?.appContext.components.RouterLink, I = ae(), L = `${I}-trigger`, R = `${I}-menu`, z = y(null), B = y(null), V = y(!1), H = y({
 			top: 0,
 			right: 0
-		}), H = o(() => {
-			let e = k.name.trim().split(/[\s._-]+/).filter(Boolean);
+		}), U = s(() => {
+			let e = A.name.trim().split(/[\s._-]+/).filter(Boolean);
 			return e.length ? (e[0].charAt(0) + (e.length > 1 ? e[e.length - 1].charAt(0) : "")).toUpperCase() : "?";
-		}), U = o(() => !!k.avatarUrl && !B.value);
-		function W(e) {
-			return e.to && P && !e.disabled ? P : e.to || e.href ? "a" : "button";
+		}), W = s(() => !!A.avatarUrl && !V.value);
+		function G(e) {
+			return e.to && F && !e.disabled ? F : e.to || e.href ? "a" : "button";
 		}
 		function Fe(e) {
-			let t = W(e);
-			return t === P ? { to: e.to } : t === "a" ? e.disabled ? { "aria-disabled": "true" } : { href: e.href ?? (typeof e.to == "string" ? e.to : void 0) } : {
+			let t = G(e);
+			return t === F ? { to: e.to } : t === "a" ? e.disabled ? { "aria-disabled": "true" } : { href: e.href ?? (typeof e.to == "string" ? e.to : void 0) } : {
 				type: "button",
 				"aria-disabled": e.disabled ? "true" : void 0
 			};
 		}
-		function G() {
-			return [...z.value?.querySelectorAll(Ne) ?? []];
+		function K() {
+			return [...B.value?.querySelectorAll(Ne) ?? []];
 		}
-		function K(e) {
-			let t = G();
+		function q(e) {
+			let t = K();
 			t.length && t[(e + t.length) % t.length].focus();
 		}
-		function q() {
-			let e = R.value;
-			if (!e) return;
-			let t = e.getBoundingClientRect(), n = z.value?.offsetHeight ?? 320, r = z.value?.offsetWidth ?? 256, i = Math.max(8, Math.min(window.innerWidth - t.right, window.innerWidth - r - 8)), a = window.innerHeight - t.bottom - 6 - 8;
-			V.value = a < n && t.top > a ? {
-				bottom: window.innerHeight - t.top + 6,
-				right: i
+		function J() {
+			let t = z.value;
+			if (!t) return;
+			let n = t.getBoundingClientRect(), r = e(), i = B.value?.offsetHeight ?? 320, a = B.value?.offsetWidth ?? 256, o = Math.max(8, Math.min(r.right - n.right, r.width - a - 8)), s = r.bottom - n.bottom - 6 - 8;
+			H.value = s < i && n.top - r.top > s ? {
+				bottom: r.bottom - n.top + 6,
+				right: o
 			} : {
-				top: t.bottom + 6,
-				right: i
+				top: n.bottom + 6 - r.top,
+				right: o
 			};
 		}
-		async function J(e = "first") {
-			A.value = !0, await g(), q(), K(e === "first" ? 0 : -1);
+		async function Y(e = "first") {
+			j.value = !0, await g(), J(), q(e === "first" ? 0 : -1);
 		}
-		function Y(e = !0) {
-			A.value && (A.value = !1, e && R.value?.focus());
+		function X(e = !0) {
+			j.value && (j.value = !1, e && z.value?.focus());
 		}
 		function Ie(e) {
 			[
 				"Enter",
 				" ",
 				"ArrowDown"
-			].includes(e.key) ? (e.preventDefault(), J("first")) : e.key === "ArrowUp" && (e.preventDefault(), J("last"));
-		}
-		function X(e) {
-			let t = G().indexOf(document.activeElement);
-			e.key === "ArrowDown" ? (e.preventDefault(), K(t + 1)) : e.key === "ArrowUp" ? (e.preventDefault(), K(t - 1)) : e.key === "Home" ? (e.preventDefault(), K(0)) : e.key === "End" ? (e.preventDefault(), K(-1)) : e.key === "Escape" ? (e.preventDefault(), e.stopPropagation(), Y()) : e.key === "Tab" && Y();
+			].includes(e.key) ? (e.preventDefault(), Y("first")) : e.key === "ArrowUp" && (e.preventDefault(), Y("last"));
 		}
 		function Le(e) {
-			e.disabled || (M("select", e), Y());
+			let t = K().indexOf(document.activeElement);
+			e.key === "ArrowDown" ? (e.preventDefault(), q(t + 1)) : e.key === "ArrowUp" ? (e.preventDefault(), q(t - 1)) : e.key === "Home" ? (e.preventDefault(), q(0)) : e.key === "End" ? (e.preventDefault(), q(-1)) : e.key === "Escape" ? (e.preventDefault(), e.stopPropagation(), X()) : e.key === "Tab" && X();
 		}
 		function Re(e) {
-			e.name !== j.value && (j.value = e.name, M("switch-workspace", e)), Y();
+			e.disabled || (N("select", e), X());
+		}
+		function ze(e) {
+			e.name !== M.value && (M.value = e.name, N("switch-workspace", e)), X();
 		}
-		function ze() {
-			M("logout"), Y(!1);
+		function Be() {
+			N("logout"), X(!1);
 		}
 		function Z(e) {
 			let t = e.target;
-			R.value?.contains(t) || z.value?.contains(t) || Y(!1);
+			z.value?.contains(t) || B.value?.contains(t) || X(!1);
 		}
 		function Q() {
-			q();
+			J();
 		}
 		function $() {
 			document.removeEventListener("pointerdown", Z, !0), window.removeEventListener("scroll", Q, !0), window.removeEventListener("resize", Q);
 		}
-		return T(A, (e) => {
+		return T(j, (e) => {
 			if (!e) return $();
-			document.addEventListener("pointerdown", Z, !0), window.addEventListener("scroll", Q, !0), window.addEventListener("resize", Q), g(q);
-		}), T(() => k.avatarUrl, () => B.value = !1), ne($), (o, m) => (v(), l("div", le, [u("button", {
-			id: I,
+			document.addEventListener("pointerdown", Z, !0), window.addEventListener("scroll", Q, !0), window.addEventListener("resize", Q), g(J);
+		}), T(() => A.avatarUrl, () => V.value = !1), re($), (e, s) => (v(), u("div", ue, [d("button", {
+			id: L,
 			ref_key: "trigger",
-			ref: R,
+			ref: z,
 			type: "button",
 			"aria-haspopup": "menu",
-			"aria-expanded": A.value,
-			"aria-controls": A.value ? L : void 0,
-			"aria-label": `${p.name}, account menu`,
-			class: _(["group inline-flex shrink-0 cursor-pointer items-center gap-2 rounded-10 border border-transparent p-2 transition-colors duration-200 hover:border-border hover:bg-surface-sunken/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface", [p.showName && "md:px-4", A.value && "border-border bg-surface-sunken/50"]]),
+			"aria-expanded": j.value,
+			"aria-controls": j.value ? R : void 0,
+			"aria-label": `${m.name}, account menu`,
+			class: _(["group inline-flex shrink-0 cursor-pointer items-center gap-2 rounded-10 border border-transparent p-2 transition-colors duration-200 hover:border-border hover:bg-surface-sunken/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface", [m.showName && "md:px-4", j.value && "border-border bg-surface-sunken/50"]]),
 			"data-ac-ds": "",
 			"data-testid": "ac-user-menu-trigger",
-			onClick: m[1] ||= (e) => A.value ? Y() : J(),
+			onClick: s[1] ||= (e) => j.value ? X() : Y(),
 			onKeydown: Ie
 		}, [
-			p.showName ? (v(), l("span", de, S(p.name), 1)) : c("", !0),
-			u("span", fe, [u("span", pe, [U.value ? (v(), l("img", {
+			m.showName ? (v(), u("span", fe, S(m.name), 1)) : l("", !0),
+			d("span", pe, [d("span", me, [W.value ? (v(), u("img", {
 				key: 0,
-				src: p.avatarUrl,
+				src: m.avatarUrl,
 				alt: "",
 				class: "size-full object-cover",
-				onError: m[0] ||= (e) => B.value = !0
-			}, null, 40, me)) : (v(), l(r, { key: 1 }, [d(S(H.value), 1)], 64))])]),
-			p.showName ? (v(), s(C(se), {
+				onError: s[0] ||= (e) => V.value = !0
+			}, null, 40, he)) : (v(), u(i, { key: 1 }, [f(S(U.value), 1)], 64))])]),
+			m.showName ? (v(), c(C(ce), {
 				key: 1,
-				class: _(["hidden size-4 shrink-0 text-muted transition-transform duration-200 motion-reduce:transition-none sm:block", A.value && "rotate-180"]),
+				class: _(["hidden size-4 shrink-0 text-muted transition-transform duration-200 motion-reduce:transition-none sm:block", j.value && "rotate-180"]),
 				"aria-hidden": "true"
-			}, null, 8, ["class"])) : c("", !0)
-		], 42, ue), (v(), s(i, { to: "body" }, [f(a, {
+			}, null, 8, ["class"])) : l("", !0)
+		], 42, de), (v(), c(a, { to: "body" }, [p(o, {
 			"enter-active-class": "transition duration-150 ease-out motion-reduce:transition-none",
 			"enter-from-class": "opacity-0 scale-95",
 			"leave-active-class": "transition duration-100 ease-in",
 			"leave-to-class": "opacity-0"
 		}, {
-			default: E(() => [A.value ? (v(), l("div", {
+			default: E(() => [j.value ? (v(), u("div", {
 				key: 0,
-				id: L,
+				id: R,
 				ref_key: "panel",
-				ref: z,
+				ref: B,
 				role: "menu",
-				"aria-labelledby": I,
+				"aria-labelledby": L,
 				class: "fixed z-[90] w-64 max-w-[calc(100vw-16px)] origin-top-right overflow-hidden rounded-14 border border-border/80 bg-surface p-1 shadow-lg",
-				style: te({
-					top: V.value.top === void 0 ? void 0 : `${V.value.top}px`,
-					bottom: V.value.bottom === void 0 ? void 0 : `${V.value.bottom}px`,
-					right: `${V.value.right}px`
+				style: ne({
+					top: H.value.top === void 0 ? void 0 : `${H.value.top}px`,
+					bottom: H.value.bottom === void 0 ? void 0 : `${H.value.bottom}px`,
+					right: `${H.value.right}px`
 				}),
 				"data-ac-ds": "",
 				"data-testid": "ac-user-menu-panel",
-				onKeydown: X
+				onKeydown: Le
 			}, [
-				(v(), s(x(p.profileUrl ? "a" : "div"), {
-					href: p.profileUrl || void 0,
-					role: p.profileUrl ? "menuitem" : "presentation",
-					tabindex: p.profileUrl ? -1 : void 0,
-					class: _(["flex items-center gap-3 rounded-8 px-3 py-2.5 no-underline outline-none", p.profileUrl && "transition-colors duration-150 hover:bg-surface-sunken focus-visible:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"])
+				(v(), c(x(m.profileUrl ? "a" : "div"), {
+					href: m.profileUrl || void 0,
+					role: m.profileUrl ? "menuitem" : "presentation",
+					tabindex: m.profileUrl ? -1 : void 0,
+					class: _(["flex items-center gap-3 rounded-8 px-3 py-2.5 no-underline outline-none", m.profileUrl && "transition-colors duration-150 hover:bg-surface-sunken focus-visible:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"])
 				}, {
-					default: E(() => [u("span", he, [U.value ? (v(), l("img", {
+					default: E(() => [d("span", ge, [W.value ? (v(), u("img", {
 						key: 0,
-						src: p.avatarUrl,
+						src: m.avatarUrl,
 						alt: "",
 						class: "size-full object-cover",
-						onError: m[2] ||= (e) => B.value = !0
-					}, null, 40, ge)) : (v(), l(r, { key: 1 }, [d(S(H.value), 1)], 64))]), u("span", _e, [u("span", ve, S(p.name), 1), p.email ? (v(), l("span", ye, S(p.email), 1)) : c("", !0)])]),
+						onError: s[2] ||= (e) => V.value = !0
+					}, null, 40, _e)) : (v(), u(i, { key: 1 }, [f(S(U.value), 1)], 64))]), d("span", ve, [d("span", ye, S(m.name), 1), m.email ? (v(), u("span", be, S(m.email), 1)) : l("", !0)])]),
 					_: 1
 				}, 8, [
 					"href",
@@ -213,97 +214,97 @@ var le = {
 					"tabindex",
 					"class"
 				])),
-				p.workspaces.length ? (v(), l("div", {
+				m.workspaces.length ? (v(), u("div", {
 					key: 0,
 					role: "group",
-					"aria-labelledby": `${C(F)}-workspaces`,
+					"aria-labelledby": `${C(I)}-workspaces`,
 					class: "mt-1 border-t border-border px-3 py-2"
-				}, [u("p", {
-					id: `${C(F)}-workspaces`,
+				}, [d("p", {
+					id: `${C(I)}-workspaces`,
 					class: "mb-2 flex items-center gap-2 text-xs font-semibold tracking-wide text-muted uppercase"
-				}, [f(C(ae), {
+				}, [p(C(oe), {
 					class: "size-4",
 					"aria-hidden": "true"
-				}), d(" " + S(p.workspacesLabel), 1)], 8, xe), u("div", Se, [(v(!0), l(r, null, b(p.workspaces, (t) => (v(), l("button", {
-					key: t.name,
+				}), f(" " + S(m.workspacesLabel), 1)], 8, Se), d("div", Ce, [(v(!0), u(i, null, b(m.workspaces, (e) => (v(), u("button", {
+					key: e.name,
 					type: "button",
 					role: "menuitemradio",
 					tabindex: "-1",
-					"aria-checked": t.name === j.value,
-					class: _(["flex w-full cursor-pointer items-center justify-between gap-2 rounded-8 px-2 py-2 text-left text-base outline-none transition-colors duration-150 hover:bg-surface-sunken focus-visible:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", t.name === j.value && "bg-surface-sunken/50"]),
+					"aria-checked": e.name === M.value,
+					class: _(["flex w-full cursor-pointer items-center justify-between gap-2 rounded-8 px-2 py-2 text-left text-base outline-none transition-colors duration-150 hover:bg-surface-sunken focus-visible:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", e.name === M.value && "bg-surface-sunken/50"]),
 					"data-ac-ds": "",
 					"data-testid": "ac-user-menu-workspace",
-					onClick: (e) => Re(t)
-				}, [u("span", we, [f(e, {
-					name: t.displayName || t.name,
-					"img-url": t.avatarUrl,
-					kind: t.type === "user" ? "person" : "organization",
+					onClick: (t) => ze(e)
+				}, [d("span", Te, [p(t, {
+					name: e.displayName || e.name,
+					"img-url": e.avatarUrl,
+					kind: e.type === "user" ? "person" : "organization",
 					alt: ""
 				}, null, 8, [
 					"name",
 					"img-url",
 					"kind"
-				]), u("span", Te, [u("span", Ee, S(t.displayName || t.name), 1), u("span", D, [d(S(t.name), 1), t.type === "user" ? (v(), l(r, { key: 0 }, [d(" (Personal)")], 64)) : c("", !0)])])]), t.name === j.value ? (v(), s(C(oe), {
+				]), d("span", Ee, [d("span", D, S(e.displayName || e.name), 1), d("span", De, [f(S(e.name), 1), e.type === "user" ? (v(), u(i, { key: 0 }, [f(" (Personal)")], 64)) : l("", !0)])])]), e.name === M.value ? (v(), c(C(se), {
 					key: 0,
 					class: "size-4 shrink-0 text-primary",
 					"aria-hidden": "true"
-				})) : c("", !0)], 10, Ce))), 128))])], 8, be)) : c("", !0),
-				p.showThemeMode ? (v(), l("div", {
+				})) : l("", !0)], 10, we))), 128))])], 8, xe)) : l("", !0),
+				m.showThemeMode ? (v(), u("div", {
 					key: 1,
 					role: "group",
-					"aria-labelledby": `${C(F)}-theme`,
+					"aria-labelledby": `${C(I)}-theme`,
 					class: "mt-1 border-t border-border px-1 pt-2 pb-1"
-				}, [u("p", {
-					id: `${C(F)}-theme`,
+				}, [d("p", {
+					id: `${C(I)}-theme`,
 					class: "mb-2 px-2 text-sm font-semibold tracking-[0.08em] text-muted uppercase"
-				}, "Theme", 8, Oe), f(n, {
+				}, "Theme", 8, ke), p(r, {
 					display: "labels",
-					"onSet:theme": m[3] ||= (e) => M("set:theme", e)
-				})], 8, De)) : c("", !0),
-				p.showFontScale ? (v(), l("div", {
+					"onSet:theme": s[3] ||= (e) => N("set:theme", e)
+				})], 8, Oe)) : l("", !0),
+				m.showFontScale ? (v(), u("div", {
 					key: 2,
 					role: "group",
-					"aria-labelledby": `${C(F)}-scale`,
+					"aria-labelledby": `${C(I)}-scale`,
 					class: "mt-1 border-t border-border px-1 pt-2 pb-1"
-				}, [u("p", {
-					id: `${C(F)}-scale`,
+				}, [d("p", {
+					id: `${C(I)}-scale`,
 					class: "mb-2 px-2 text-sm font-semibold tracking-[0.08em] text-muted uppercase"
-				}, "Text size", 8, Ae), f(t, { display: "labels" })], 8, ke)) : c("", !0),
-				u("div", je, [
-					(v(!0), l(r, null, b(p.items, (e) => (v(), s(x(W(e)), ee({ key: e.label }, { ref_for: !0 }, Fe(e), {
+				}, "Text size", 8, je), p(n, { display: "labels" })], 8, Ae)) : l("", !0),
+				d("div", Me, [
+					(v(!0), u(i, null, b(m.items, (e) => (v(), c(x(G(e)), te({ key: e.label }, { ref_for: !0 }, Fe(e), {
 						role: "menuitem",
 						tabindex: "-1",
-						class: N,
-						onClick: (t) => Le(e)
+						class: P,
+						onClick: (t) => Re(e)
 					}), {
-						default: E(() => [e.icon ? (v(), s(x(e.icon), {
+						default: E(() => [e.icon ? (v(), c(x(e.icon), {
 							key: 0,
 							"aria-hidden": "true"
-						})) : c("", !0), u("span", Me, S(e.label), 1)]),
+						})) : l("", !0), d("span", O, S(e.label), 1)]),
 						_: 2
 					}, 1040, ["onClick"]))), 128)),
-					re(o.$slots, "default", {
-						close: Y,
-						itemClass: N
+					ie(e.$slots, "default", {
+						close: X,
+						itemClass: P
 					}),
-					(v(), s(x(p.logoutUrl ? "a" : "button"), {
-						href: p.logoutUrl || void 0,
-						type: p.logoutUrl ? void 0 : "button",
+					(v(), c(x(m.logoutUrl ? "a" : "button"), {
+						href: m.logoutUrl || void 0,
+						type: m.logoutUrl ? void 0 : "button",
 						role: "menuitem",
 						tabindex: "-1",
 						class: _(Pe),
 						"data-ac-ds": "",
 						"data-testid": "ac-user-menu-logout",
-						onClick: ze
+						onClick: Be
 					}, {
-						default: E(() => [f(C(ce), { "aria-hidden": "true" }), u("span", null, S(p.logoutLabel), 1)]),
+						default: E(() => [p(C(le), { "aria-hidden": "true" }), d("span", null, S(m.logoutLabel), 1)]),
 						_: 1
 					}, 8, ["href", "type"]))
 				])
-			], 36)) : c("", !0)]),
+			], 36)) : l("", !0)]),
 			_: 3
 		})]))]));
 	}
 });
 //#endregion
-export { k as default };
+export { A as default };

package/dist/lib/components/fixedFrame.d.ts

@@ -0,0 +1,11 @@
+/** The box `position: fixed` offsets are measured from, in viewport px. Matches the viewport when there's no gutter. */
+export interface FixedFrame {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}
+/** Measures the fixed containing block with a hidden probe. Call it once per positioning pass. */
+export declare function fixedFrame(): FixedFrame;

package/dist/lib/components/fixedFrame.js

@@ -0,0 +1,24 @@
+//#region src/lib/components/fixedFrame.ts
+function e() {
+	if (typeof document > "u") return {
+		left: 0,
+		top: 0,
+		right: 0,
+		bottom: 0,
+		width: 0,
+		height: 0
+	};
+	let e = document.createElement("div");
+	e.style.cssText = "position:fixed;inset:0;visibility:hidden;pointer-events:none", document.body.appendChild(e);
+	let { left: t, top: n, right: r, bottom: i, width: a, height: o } = e.getBoundingClientRect();
+	return e.remove(), {
+		left: t,
+		top: n,
+		right: r,
+		bottom: i,
+		width: a,
+		height: o
+	};
+}
+//#endregion
+export { e as fixedFrame };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ac-design/design-system",
-  "version": "2.1.1",
+  "version": "2.2.1",
   "description": "AppsCode design system: Tailwind CSS v4 theme and Vue 3 components.",
   "repository": {
     "type": "git",