@ac-design/design-system 2.2.1 → 2.4.0

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

@@ -1,39 +1,39 @@
 import e from "./AcButton.js";
 import t from "./AcInput.js";
 import n from "./AcSelect.js";
-import { Fragment as r, TransitionGroup as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, mergeModels as f, nextTick as p, normalizeClass as m, openBlock as h, ref as g, renderList as ee, renderSlot as _, toDisplayString as v, unref as y, useId as b, useModel as te, watch as ne, withCtx as x, withKeys as S } from "vue";
-import { Plus as C, Trash as w } from "@lucide/vue";
+import { Fragment as r, TransitionGroup as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, mergeModels as f, nextTick as p, normalizeClass as m, openBlock as h, ref as g, renderList as ee, renderSlot as te, toDisplayString as _, unref as v, useId as ne, useModel as re, watch as y, withCtx as b, withKeys as x } from "vue";
+import { Plus as ie, Trash as ae } from "@lucide/vue";
 //#region src/lib/components/AcKeyValueInput.vue?vue&type=script&setup=true&lang.ts
-var T = [
+var oe = [
 	"aria-labelledby",
 	"aria-label",
 	"aria-describedby"
-], re = {
+], se = {
 	key: 0,
 	class: "font-normal text-muted"
-}, ie = {
+}, ce = {
 	key: 1,
 	class: "text-danger",
 	"aria-hidden": "true"
-}, ae = {
+}, le = {
 	key: 2,
 	class: "mb-1.5 hidden grid-cols-[minmax(0,1fr)_auto] gap-x-4 sm:grid",
 	"aria-hidden": "true"
-}, oe = { key: 0 }, se = [
+}, ue = { key: 0 }, de = [
 	"data-row",
 	"onFocusin",
 	"onFocusout"
-], ce = [
+], fe = [
 	"aria-label",
 	"title",
 	"onClick"
-], E = {
+], pe = {
 	key: 4,
 	class: "text-base text-muted"
-}, D = {
+}, me = {
 	class: "sr-only",
 	"aria-live": "polite"
-}, O = /*@__PURE__*/ d({
+}, S = /*@__PURE__*/ d({
 	__name: "AcKeyValueInput",
 	props: /*@__PURE__*/ f({
 		label: { default: "" },
@@ -77,117 +77,142 @@ var T = [
 		readonly: {
 			type: Boolean,
 			default: !1
+		},
+		plain: {
+			type: Boolean,
+			default: !1
 		}
 	}, {
 		modelValue: { default: () => [] },
 		modelModifiers: {}
 	}),
 	emits: /*@__PURE__*/ f(["add", "remove"], ["update:modelValue"]),
-	setup(d, { expose: f, emit: O }) {
-		let k = d, A = te(d, "modelValue"), j = O, M = b(), N = `${M}-label`, P = `${M}-hint`, F = `${M}-msg`, I = g(null), L = 0, R = g([]), z = g(null), B = g(""), V = a(() => A.value ?? []), H = a(() => !!k.options?.length), U = a(() => !k.disabled && !k.readonly), W = a(() => k.max !== void 0 && V.value.length >= k.max), le = a(() => k.addLabel || "Add new"), ue = a(() => [k.hint && P, k.errorMsg && F].filter(Boolean).join(" ") || void 0), G = a(() => H.value ? "sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_256px]" : "sm:grid-cols-2"), de = a(() => k.size === "small" ? "size-[34px]" : "size-[38px]"), K = a(() => {
+	setup(d, { expose: f, emit: S }) {
+		let C = d, w = re(d, "modelValue"), T = S, E = ne(), D = `${E}-label`, O = `${E}-hint`, k = `${E}-msg`, A = g(null), j = 0, M = g([]), N = g(null), P = g(""), F = g([]), I = {}, L = a(() => !!w.value && !Array.isArray(w.value)), R = a(() => L.value ? F.value : w.value ?? []), z = a(() => !!C.options?.length), B = a(() => !C.disabled && !C.readonly), V = a(() => C.max !== void 0 && R.value.length >= C.max), he = a(() => C.addLabel || "Add new"), ge = a(() => [C.hint && O, C.errorMsg && k].filter(Boolean).join(" ") || void 0), H = a(() => C.plain ? z.value ? "grid-cols-[minmax(0,1fr)_minmax(0,1fr)_256px]" : "grid-cols-2" : z.value ? "sm:grid-cols-[minmax(0,1fr)_minmax(0,1fr)_256px]" : "sm:grid-cols-2"), U = a(() => C.plain ? "[&>label:first-child]:sr-only" : "sm:[&>label:first-child]:sr-only"), _e = a(() => C.size === "small" ? "size-[34px]" : "size-[38px]"), W = a(() => {
 			let e = /* @__PURE__ */ new Set();
-			return V.value.map((t, n) => {
+			return R.value.map((t, n) => {
 				let r = {}, i = t.key.trim();
 				if (i) {
-					let a = H.value ? `${i}\u0000${t.option ?? ""}` : i;
-					!k.allowDuplicateKeys && e.has(a) && (r.key = H.value && t.option ? `“${i}” with ${q(t.option)} is already used.` : `“${i}” is already used. Keys must be unique.`), e.add(a), r.key ||= k.validateKey?.(t.key, n, V.value) || void 0;
-				} else t.value && z.value !== R.value[n] && (r.key = `Enter a key, or remove this ${k.itemName}.`);
-				return (i || t.value) && (r.value = k.validateValue?.(t.value, t.key, n, V.value) || void 0), r;
+					let a = z.value ? `${i}\u0000${t.option ?? ""}` : i;
+					!C.allowDuplicateKeys && e.has(a) && (r.key = z.value && t.option ? `“${i}” with ${G(t.option)} is already used.` : `“${i}” is already used. Keys must be unique.`), e.add(a), r.key ||= C.validateKey?.(t.key, n, R.value) || void 0;
+				} else t.value && N.value !== M.value[n] && (r.key = `Enter a key, or remove this ${C.itemName}.`);
+				return (i || t.value) && (r.value = C.validateValue?.(t.value, t.key, n, R.value) || void 0), r;
 			});
-		}), fe = a(() => K.value.some((e) => e.key || e.value));
-		function q(e) {
-			return k.options?.find((t) => t.value === e)?.label ?? e;
+		}), ve = a(() => W.value.some((e) => e.key || e.value));
+		function G(e) {
+			return C.options?.find((t) => t.value === e)?.label ?? e;
 		}
-		function J(e) {
-			let t = V.value[e]?.key.trim();
-			return t ? `${k.itemName} ${t}` : `${k.itemName} ${e + 1}`;
+		function K(e) {
+			let t = R.value[e]?.key.trim();
+			return t ? `${C.itemName} ${t}` : `${C.itemName} ${e + 1}`;
 		}
-		function Y(e) {
+		function q(e) {
 			return e.charAt(0).toUpperCase() + e.slice(1);
 		}
-		function X(e) {
-			B.value = "", p(() => B.value = e);
+		function J(e) {
+			P.value = "", p(() => P.value = e);
 		}
-		function Z(e, t) {
+		function Y(e, t) {
 			p(() => {
-				([...I.value?.querySelectorAll(`[data-row="${e}"]`) ?? []].at(-1)?.querySelector(t === "remove" ? "[data-action='remove']" : `[data-cell="${t}"]`) ?? I.value?.querySelector("[data-action='add']"))?.focus();
+				([...A.value?.querySelectorAll(`[data-row="${e}"]`) ?? []].at(-1)?.querySelector(t === "remove" ? "[data-action='remove']" : `[data-cell="${t}"]`) ?? A.value?.querySelector("[data-action='add']"))?.focus();
 			});
 		}
+		function X(e) {
+			let t = {};
+			for (let n of e) n.key && (t[n.key] = n.value);
+			return t;
+		}
+		function ye(e, t) {
+			let n = Object.keys(e);
+			return n.length === Object.keys(t).length && n.every((n) => n in t && e[n] === t[n]);
+		}
+		function Z(e) {
+			if (!L.value) {
+				w.value = e;
+				return;
+			}
+			F.value = e, I = X(e), w.value = I;
+		}
 		function Q(e, t) {
-			A.value = V.value.map((n, r) => r === e ? {
+			Z(R.value.map((n, r) => r === e ? {
 				...n,
 				...t
-			} : n);
+			} : n));
 		}
 		function $() {
-			if (!U.value || W.value) return;
+			if (!B.value || V.value) return;
 			let e = {
 				key: "",
 				value: ""
 			};
-			H.value && (e.option = k.defaultOption ?? k.options[0].value), R.value = [...R.value, L++], A.value = [...V.value, e];
-			let t = V.value.length;
-			j("add", t), X(`${Y(k.itemName)} ${t + 1} added.`), Z(t, "key");
+			z.value && (e.option = C.defaultOption ?? C.options[0].value), M.value = [...M.value, j++], Z([...R.value, e]);
+			let t = R.value.length;
+			T("add", t), J(`${q(C.itemName)} ${t + 1} added.`), Y(t, "key");
 		}
-		function pe(e) {
-			if (!U.value) return;
-			let t = V.value[e];
+		function be(e) {
+			if (!B.value) return;
+			let t = R.value[e];
 			if (!t) return;
-			let n = J(e);
-			R.value = R.value.filter((t, n) => n !== e), A.value = V.value.filter((t, n) => n !== e), j("remove", t, e), X(`${Y(n)} removed.`);
-			let r = V.value.length;
-			r ? Z(Math.min(e, r - 1), "remove") : p(() => I.value?.querySelector("[data-action='add']")?.focus());
+			let n = K(e);
+			M.value = M.value.filter((t, n) => n !== e), Z(R.value.filter((t, n) => n !== e)), T("remove", t, e), J(`${q(n)} removed.`);
+			let r = R.value.length;
+			r ? Y(Math.min(e, r - 1), "remove") : p(() => A.value?.querySelector("[data-action='add']")?.focus());
 		}
-		function me(e, t) {
-			e.isComposing || (e.preventDefault(), Z(t, "value"));
+		function xe(e, t) {
+			e.isComposing || (e.preventDefault(), Y(t, "value"));
 		}
-		function he(e, t) {
-			e.isComposing || (e.preventDefault(), t < V.value.length - 1 ? Z(t + 1, "key") : W.value || $());
+		function Se(e, t) {
+			e.isComposing || (e.preventDefault(), t < R.value.length - 1 ? Y(t + 1, "key") : V.value || $());
 		}
-		function ge(e, t) {
+		function Ce(e, t) {
 			let n = e.currentTarget, r = e.relatedTarget;
-			r && (n.contains(r) || r instanceof Element && r.closest("[data-testid='ac-select-panel']")) || z.value === t && (z.value = null);
+			r && (n.contains(r) || r instanceof Element && r.closest("[data-testid='ac-select-panel']")) || N.value === t && (N.value = null);
 		}
-		return ne(() => V.value.length, (e) => {
-			R.value.length !== e && (R.value = Array.from({ length: e }, () => L++));
+		return y(w, (e) => {
+			!e || Array.isArray(e) || ye(e, I) || (F.value = Object.entries(e).map(([e, t]) => ({
+				key: e,
+				value: String(t)
+			})), I = X(F.value));
+		}, { immediate: !0 }), y(() => R.value.length, (e) => {
+			M.value.length !== e && (M.value = Array.from({ length: e }, () => j++));
 		}, { immediate: !0 }), f({
 			add: $,
-			focus: () => Z(0, "key"),
-			hasErrors: () => fe.value
+			focus: () => Y(0, "key"),
+			hasErrors: () => ve.value
 		}), (a, f) => (h(), c("div", {
 			ref_key: "root",
-			ref: I,
+			ref: A,
 			role: "group",
-			"aria-labelledby": d.label ? N : void 0,
-			"aria-label": d.label ? void 0 : `${Y(d.itemName)}s`,
-			"aria-describedby": ue.value,
+			"aria-labelledby": d.label ? D : void 0,
+			"aria-label": d.label ? void 0 : `${q(d.itemName)}s`,
+			"aria-describedby": ge.value,
 			class: m(d.disabled && "opacity-50"),
 			"data-ac-ds": "",
 			"data-testid": "ac-key-value-input"
 		}, [
 			d.label ? (h(), c("div", {
 				key: 0,
-				id: N,
+				id: D,
 				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
 			}, [
-				l("span", null, v(d.label), 1),
-				d.readonly ? (h(), c("span", re, "(read only)")) : s("", !0),
-				d.required ? (h(), c("span", ie, "*")) : s("", !0)
+				l("span", null, _(d.label), 1),
+				d.readonly ? (h(), c("span", se, "(read only)")) : s("", !0),
+				d.required ? (h(), c("span", ce, "*")) : s("", !0)
 			])) : s("", !0),
 			d.hint ? (h(), c("p", {
 				key: 1,
-				id: P,
+				id: O,
 				class: "mb-2 text-base text-muted"
-			}, v(d.hint), 1)) : s("", !0),
-			V.value.length ? (h(), c("div", ae, [l("div", { class: m(["grid gap-x-4 text-base font-medium text-muted", G.value]) }, [
-				l("span", null, v(d.keyLabel), 1),
-				l("span", null, v(d.valueLabel), 1),
-				H.value ? (h(), c("span", oe, v(d.optionLabel), 1)) : s("", !0)
-			], 2), U.value ? (h(), c("span", {
+			}, _(d.hint), 1)) : s("", !0),
+			R.value.length && !d.plain ? (h(), c("div", le, [l("div", { class: m(["grid gap-x-4 text-base font-medium text-muted", H.value]) }, [
+				l("span", null, _(d.keyLabel), 1),
+				l("span", null, _(d.valueLabel), 1),
+				z.value ? (h(), c("span", ue, _(d.optionLabel), 1)) : s("", !0)
+			], 2), B.value ? (h(), c("span", {
 				key: 0,
 				class: m(d.size === "small" ? "w-[34px]" : "w-[38px]")
 			}, null, 2)) : s("", !0)])) : s("", !0),
-			V.value.length || U.value ? (h(), o(i, {
+			R.value.length || B.value ? (h(), o(i, {
 				key: 3,
 				tag: "div",
 				class: "relative space-y-4",
@@ -197,13 +222,13 @@ var T = [
 				"leave-to-class": "translate-x-5 opacity-0",
 				"move-class": "transition-transform duration-300 ease-out motion-reduce:transition-none"
 			}, {
-				default: x(() => [(h(!0), c(r, null, ee(V.value, (e, r) => (h(), c("div", {
-					key: R.value[r] ?? r,
+				default: b(() => [(h(!0), c(r, null, ee(R.value, (e, r) => (h(), c("div", {
+					key: M.value[r] ?? r,
 					"data-row": r,
-					class: "grid grid-cols-[minmax(0,1fr)_auto] items-start gap-x-4 max-sm:rounded-10 max-sm:border max-sm:border-border max-sm:bg-surface max-sm:p-3",
-					onFocusin: (e) => z.value = R.value[r] ?? null,
-					onFocusout: (e) => ge(e, R.value[r] ?? -1)
-				}, [l("div", { class: m(["grid items-start gap-x-4 gap-y-3 [&_div:has(>input)]:rounded-8 [&_input]:rounded-8 [&_input]:font-medium", G.value]) }, [
+					class: m(["grid grid-cols-[minmax(0,1fr)_auto] items-start gap-x-4", !d.plain && "max-sm:rounded-10 max-sm:border max-sm:border-border max-sm:bg-surface max-sm:p-3"]),
+					onFocusin: (e) => N.value = M.value[r] ?? null,
+					onFocusout: (e) => Ce(e, M.value[r] ?? -1)
+				}, [l("div", { class: m(["grid items-start gap-x-4 gap-y-3 [&_div:has(>input)]:rounded-8 [&_input]:rounded-8 [&_input]:font-medium", [H.value, d.plain && "[&_input]:pr-3 [&_input]:pl-3"]]) }, [
 					u(t, {
 						"data-cell": "key",
 						"model-value": e.key,
@@ -212,12 +237,12 @@ var T = [
 						size: d.size,
 						disabled: d.disabled,
 						readonly: d.readonly,
-						"error-msg": K.value[r]?.key,
+						"error-msg": W.value[r]?.key,
 						autocomplete: "off",
 						spellcheck: "false",
-						class: m(["sm:[&>label:first-child]:sr-only", d.mono && "[&_input]:font-mono"]),
+						class: m([U.value, d.mono && "[&_input]:font-mono"]),
 						"onUpdate:modelValue": (e) => Q(r, { key: String(e) }),
-						onKeydown: S((e) => me(e, r), ["enter"])
+						onKeydown: x((e) => xe(e, r), ["enter"])
 					}, null, 8, [
 						"model-value",
 						"label",
@@ -238,12 +263,12 @@ var T = [
 						size: d.size,
 						disabled: d.disabled,
 						readonly: d.readonly,
-						"error-msg": K.value[r]?.value,
+						"error-msg": W.value[r]?.value,
 						autocomplete: "off",
 						spellcheck: "false",
-						class: "sm:[&>label:first-child]:sr-only",
+						class: m(U.value),
 						"onUpdate:modelValue": (e) => Q(r, { value: String(e) }),
-						onKeydown: S((e) => he(e, r), ["enter"])
+						onKeydown: x((e) => Se(e, r), ["enter"])
 					}, null, 8, [
 						"model-value",
 						"label",
@@ -252,22 +277,24 @@ var T = [
 						"disabled",
 						"readonly",
 						"error-msg",
+						"class",
 						"onUpdate:modelValue",
 						"onKeydown"
 					]),
-					H.value && d.readonly ? (h(), o(t, {
+					z.value && d.readonly ? (h(), o(t, {
 						key: 0,
 						"data-cell": "option",
-						"model-value": e.option ? q(e.option) : "",
+						"model-value": e.option ? G(e.option) : "",
 						label: `${d.optionLabel} ${r + 1}`,
 						size: d.size,
 						readonly: "",
-						class: "sm:[&>label:first-child]:sr-only"
+						class: m(U.value)
 					}, null, 8, [
 						"model-value",
 						"label",
-						"size"
-					])) : H.value ? (h(), o(n, {
+						"size",
+						"class"
+					])) : z.value ? (h(), o(n, {
 						key: 1,
 						"data-cell": "option",
 						"model-value": e.option ?? null,
@@ -275,7 +302,7 @@ var T = [
 						label: `${d.optionLabel} ${r + 1}`,
 						size: d.size,
 						disabled: d.disabled,
-						class: "sm:[&>div:first-child]:sr-only",
+						class: m(d.plain ? "[&>div:first-child]:sr-only" : "sm:[&>div:first-child]:sr-only"),
 						"onUpdate:modelValue": (e) => Q(r, { option: e ?? void 0 })
 					}, null, 8, [
 						"model-value",
@@ -283,36 +310,37 @@ var T = [
 						"label",
 						"size",
 						"disabled",
+						"class",
 						"onUpdate:modelValue"
 					])) : s("", !0)
-				], 2), U.value ? (h(), c("button", {
+				], 2), B.value ? (h(), c("button", {
 					key: 0,
 					type: "button",
 					"data-action": "remove",
-					class: m(["inline-flex shrink-0 cursor-pointer items-center justify-center rounded-8 bg-danger/5 text-danger/60 transition-all duration-200 hover:bg-danger/10 hover:text-danger focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none max-sm:mt-7", de.value]),
-					"aria-label": `Remove ${J(r)}`,
+					class: m(["inline-flex shrink-0 cursor-pointer items-center justify-center rounded-8 bg-danger/5 text-danger/60 transition-all duration-200 hover:bg-danger/10 hover:text-danger focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", [_e.value, !d.plain && "max-sm:mt-7"]]),
+					"aria-label": `Remove ${K(r)}`,
 					title: `Remove ${d.itemName}`,
-					onClick: (e) => pe(r)
-				}, [u(y(w), {
+					onClick: (e) => be(r)
+				}, [u(v(ae), {
 					class: "size-[18px]",
 					"aria-hidden": "true"
-				})], 10, ce)) : s("", !0)], 40, se))), 128))]),
+				})], 10, fe)) : s("", !0)], 42, de))), 128))]),
 				_: 1
-			})) : (h(), c("p", E, "No " + v(d.itemName) + "s.", 1)),
-			_(a.$slots, "footer"),
-			U.value ? (h(), c("div", {
+			})) : (h(), c("p", pe, "No " + _(d.itemName) + "s.", 1)),
+			te(a.$slots, "footer"),
+			B.value ? (h(), c("div", {
 				key: 5,
-				class: m(["flex items-center gap-3", V.value.length || a.$slots.footer ? "mt-2" : ""])
+				class: m(["flex items-center gap-3", R.value.length || a.$slots.footer ? "mt-2" : ""])
 			}, [u(e, {
 				"data-action": "add",
-				title: le.value,
+				title: he.value,
 				"aria-label": d.addLabel ? void 0 : `Add new ${d.itemName}`,
 				size: "small",
 				variant: "light",
-				disabled: W.value,
+				disabled: V.value,
 				onClick: $
 			}, {
-				icon: x(() => [u(y(C), { "aria-hidden": "true" })]),
+				icon: b(() => [u(v(ie), { "aria-hidden": "true" })]),
 				_: 1
 			}, 8, [
 				"title",
@@ -320,17 +348,17 @@ var T = [
 				"disabled"
 			]), d.max === void 0 ? s("", !0) : (h(), c("span", {
 				key: 0,
-				class: m(["text-xs text-muted tabular-nums", W.value && "font-medium text-heading"])
-			}, v(V.value.length) + " of " + v(d.max), 3))], 2)) : s("", !0),
+				class: m(["text-xs text-muted tabular-nums", V.value && "font-medium text-heading"])
+			}, _(R.value.length) + " of " + _(d.max), 3))], 2)) : s("", !0),
 			d.errorMsg ? (h(), c("p", {
 				key: 6,
-				id: F,
+				id: k,
 				class: "mt-1 text-base text-danger-strong",
 				role: "alert"
-			}, v(d.errorMsg), 1)) : s("", !0),
-			l("p", D, v(B.value), 1)
-		], 10, T));
+			}, _(d.errorMsg), 1)) : s("", !0),
+			l("p", me, _(P.value), 1)
+		], 10, oe));
 	}
 });
 //#endregion
-export { O as default };
+export { S as default };

package/dist/lib/components/AcLineChart.vue.d.ts

@@ -19,9 +19,9 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     description: string;
     height: number;
     points: boolean | "auto";
-    loading: boolean;
     animation: boolean;
     tooltip: boolean;
+    loading: boolean;
     emptyText: string;
     lineWidth: number;
     renderer: "canvas" | "svg";

package/dist/lib/components/AcLocaleSwitcher.vue.d.ts

@@ -23,6 +23,10 @@ export interface Props {
     persist?: boolean;
     /** localStorage key for `persist`. cloud-ui uses `user-locale`. */
     storageKey?: string;
+    /** `compact` rows run edge to edge at 36px. `comfortable` is cloud-ui's navbar language menu: 48px rounded rows inset 8px from the edge, with 20px flags. */
+    density?: "compact" | "comfortable";
+    /** A hint shown under the `icon` trigger on hover and focus, e.g. "Change language". */
+    tooltip?: string;
 }
 type __VLS_Props = Props;
 type __VLS_ModelProps = {
@@ -39,10 +43,12 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     variant: "icon" | "button";
     align: "start" | "end";
+    tooltip: string;
     ariaLabel: string;
     menuTitle: string;
     persist: boolean;
     storageKey: string;
+    density: "compact" | "comfortable";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,23 +1,16 @@
-import e from "./AcDropdown.js";
-import t from "./AcDropdownItem.js";
-import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createVNode as c, defineComponent as l, mergeModels as u, normalizeClass as d, openBlock as f, renderList as p, toDisplayString as m, unref as h, useModel as g, withCtx as _ } from "vue";
-import { ChevronDown as v, Languages as y } from "@lucide/vue";
+import e from "./AcTooltip.js";
+import t from "./AcDropdown.js";
+import n from "./AcDropdownItem.js";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, mergeModels as d, normalizeClass as f, openBlock as p, ref as m, renderList as h, toDisplayString as g, unref as _, useModel as v, withCtx as y } from "vue";
+import { ChevronDown as b, Languages as x } from "@lucide/vue";
 //#region src/lib/components/AcLocaleSwitcher.vue?vue&type=script&setup=true&lang.ts
-var b = ["aria-label"], x = ["aria-label"], S = { class: "font-mono text-xs tracking-wide uppercase" }, C = {
-	key: 0,
-	class: "mb-2 border-b border-border px-4 py-2 text-xs font-semibold text-muted",
-	"aria-hidden": "true"
-}, w = { class: "flex items-center gap-2" }, T = {
-	key: 0,
-	class: "shrink-0 text-xl leading-none",
-	"aria-hidden": "true"
-}, E = ["lang"], D = {
+var S = ["aria-label"], C = ["aria-label"], w = { class: "font-mono text-xs tracking-wide uppercase" }, T = ["lang"], E = {
 	key: 1,
 	class: "size-2 shrink-0 rounded-full bg-primary",
 	"aria-hidden": "true"
-}, O = /*@__PURE__*/ l({
+}, D = /*@__PURE__*/ u({
 	__name: "AcLocaleSwitcher",
-	props: /*@__PURE__*/ u({
+	props: /*@__PURE__*/ d({
 		locales: {},
 		variant: { default: "icon" },
 		ariaLabel: { default: "Change language" },
@@ -27,85 +20,108 @@ var b = ["aria-label"], x = ["aria-label"], S = { class: "font-mono text-xs trac
 			type: Boolean,
 			default: !1
 		},
-		storageKey: { default: "user-locale" }
+		storageKey: { default: "user-locale" },
+		density: { default: "compact" },
+		tooltip: { default: "" }
 	}, {
 		modelValue: { default: "" },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ u(["change"], ["update:modelValue"]),
-	setup(l, { emit: u }) {
-		let O = l, k = g(l, "modelValue"), A = u, j = r(() => O.locales.find((e) => e.value === k.value)), M = r(() => j.value ? `${O.ariaLabel} (${j.value.label})` : O.ariaLabel);
-		function N() {
+	emits: /*@__PURE__*/ d(["change"], ["update:modelValue"]),
+	setup(u, { emit: d }) {
+		let D = u, O = v(u, "modelValue"), k = d, A = m(!1), j = i(() => D.density === "comfortable"), M = i(() => D.locales.find((e) => e.value === O.value)), N = i(() => M.value ? `${D.ariaLabel} (${M.value.label})` : D.ariaLabel);
+		function P() {
 			try {
-				return localStorage.getItem(O.storageKey);
+				return localStorage.getItem(D.storageKey);
 			} catch {
 				return null;
 			}
 		}
-		function P(e) {
-			if (e !== k.value && (k.value = e, A("change", e), O.persist)) try {
-				localStorage.setItem(O.storageKey, e);
+		function F(e) {
+			if (e !== O.value && (O.value = e, k("change", e), D.persist)) try {
+				localStorage.setItem(D.storageKey, e);
 			} catch {}
 		}
-		if (O.persist && typeof window < "u") {
-			let e = N();
-			e && e !== k.value && O.locales.some((t) => t.value === e) && P(e);
+		if (D.persist && typeof window < "u") {
+			let e = P();
+			e && e !== O.value && D.locales.some((t) => t.value === e) && F(e);
 		}
-		return (r, u) => l.locales.length > 1 ? (f(), i(e, {
+		return (i, d) => u.locales.length > 1 ? (p(), a(t, {
 			key: 0,
-			align: l.align,
-			"menu-label": l.ariaLabel,
+			open: A.value,
+			"onUpdate:open": d[0] ||= (e) => A.value = e,
+			align: u.align,
+			"menu-label": u.ariaLabel,
 			"data-testid": "ac-locale-switcher"
 		}, {
-			trigger: _(({ open: e }) => [l.variant === "icon" ? (f(), o("button", {
+			trigger: y(() => [u.variant === "icon" ? (p(), a(e, {
 				key: 0,
-				type: "button",
-				"aria-label": M.value,
-				class: d(["inline-flex cursor-pointer items-center gap-2 rounded-10 px-2 py-0.5 transition-colors duration-200 hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none", e ? "text-heading" : "text-muted"])
-			}, [c(h(y), {
-				class: "size-5",
-				"aria-hidden": "true"
-			})], 10, b)) : (f(), o("button", {
+				content: u.tooltip,
+				placement: "bottom",
+				disabled: !u.tooltip || A.value
+			}, {
+				default: y(() => [c("button", {
+					type: "button",
+					"aria-label": N.value,
+					class: f(["inline-flex cursor-pointer items-center gap-2 rounded-10 px-2 py-0.5 transition-colors duration-200 hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none", A.value ? "text-heading" : "text-muted"])
+				}, [l(_(x), {
+					class: "size-5",
+					"aria-hidden": "true"
+				})], 10, S)]),
+				_: 1
+			}, 8, ["content", "disabled"])) : (p(), s("button", {
 				key: 1,
 				type: "button",
-				"aria-label": M.value,
-				class: d(["inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-10 border border-border bg-surface px-3 text-base font-medium text-heading transition-colors duration-200 hover:bg-surface-sunken/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none", e && "bg-surface-sunken/50"])
+				"aria-label": N.value,
+				class: f(["inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-10 border border-border bg-surface px-3 text-base font-medium text-heading transition-colors duration-200 hover:bg-surface-sunken/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none", A.value && "bg-surface-sunken/50"])
 			}, [
-				c(h(y), {
+				l(_(x), {
 					class: "size-4 text-muted",
 					"aria-hidden": "true"
 				}),
-				s("span", S, m(j.value?.value ?? ""), 1),
-				c(h(v), {
-					class: d(["size-4 text-muted transition-transform duration-200 motion-reduce:transition-none", e && "rotate-180"]),
+				c("span", w, g(M.value?.value ?? ""), 1),
+				l(_(b), {
+					class: f(["size-4 text-muted transition-transform duration-200 motion-reduce:transition-none", A.value && "rotate-180"]),
 					"aria-hidden": "true"
 				}, null, 8, ["class"])
-			], 10, x))]),
-			default: _(() => [l.menuTitle ? (f(), o("p", C, m(l.menuTitle), 1)) : a("", !0), (f(!0), o(n, null, p(l.locales, (e) => (f(), i(t, {
+			], 10, C))]),
+			default: y(() => [c("div", { class: f(j.value && "flex flex-col px-2 py-1") }, [u.menuTitle ? (p(), s("p", {
+				key: 0,
+				class: f(["mb-2 border-b border-border py-2 text-xs font-semibold text-muted", j.value ? "px-3" : "px-4"]),
+				"aria-hidden": "true"
+			}, g(u.menuTitle), 3)) : o("", !0), (p(!0), s(r, null, h(u.locales, (e) => (p(), a(n, {
 				key: e.value,
 				description: e.description,
-				"aria-current": e.value === k.value ? "true" : void 0,
-				class: d(e.value === k.value && "bg-surface-sunken/50"),
-				onClick: (t) => P(e.value)
+				"aria-current": e.value === O.value ? "true" : void 0,
+				class: f([e.value === O.value && "bg-surface-sunken/50", j.value && "rounded-8"]),
+				onClick: (t) => F(e.value)
 			}, {
-				default: _(() => [s("span", w, [
-					e.flag ? (f(), o("span", T, m(e.flag), 1)) : a("", !0),
-					s("span", {
+				default: y(() => [c("span", { class: f(["flex items-center gap-2", j.value && "min-h-8 px-1"]) }, [
+					e.flag ? (p(), s("span", {
+						key: 0,
+						class: f(["shrink-0 leading-none", j.value ? "text-2xl" : "text-xl"]),
+						"aria-hidden": "true"
+					}, g(e.flag), 3)) : o("", !0),
+					c("span", {
 						class: "min-w-0 flex-1 truncate font-medium text-heading",
 						lang: e.value
-					}, m(e.label), 9, E),
-					e.value === k.value ? (f(), o("span", D)) : a("", !0)
-				])]),
+					}, g(e.label), 9, T),
+					e.value === O.value ? (p(), s("span", E)) : o("", !0)
+				], 2)]),
 				_: 2
 			}, 1032, [
 				"description",
 				"aria-current",
 				"class",
 				"onClick"
-			]))), 128))]),
+			]))), 128))], 2)]),
 			_: 1
-		}, 8, ["align", "menu-label"])) : a("", !0);
+		}, 8, [
+			"open",
+			"align",
+			"menu-label"
+		])) : o("", !0);
 	}
 });
 //#endregion
-export { O as default };
+export { D as default };