@ac-design/design-system 2.2.1 → 2.3.0

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

@@ -30,11 +30,11 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     title: string;
     description: string;
     error: undefined;
+    titleTag: "h2" | "h3" | "h4" | "p";
     compact: boolean;
     retrying: boolean;
     retryText: string;
     hideRetry: boolean;
-    titleTag: "h2" | "h3" | "h4" | "p";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -48,8 +48,8 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     size: "normal" | "compact";
     top: string;
     subtitle: string;
-    sticky: boolean;
     titleTag: "h1" | "h2" | "h3" | "h4";
+    sticky: boolean;
     countLabel: string;
     docsHref: string;
     backButton: boolean;

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

@@ -1,23 +1,31 @@
-import type { Component } from "vue";
+import type { Component, HTMLAttributes } from "vue";
 export interface Props {
-    /** Label above the field. Pass `placeholder` for an example value inside it. */
-    label: string;
+    /** Label above the field. Pass `placeholder` for an example value inside it. Without a label, pass `aria-label`; the placeholder is the accessible name otherwise. */
+    label?: string;
     /** Native `name` attribute. */
     name?: string;
     /** Native input type. `password` adds a show/hide toggle. */
     type?: "text" | "password" | "email" | "number" | "url" | "search";
     /** Marks the field required and adds a red asterisk. */
     required?: boolean;
+    /** Adds the red asterisk without native `required`, for forms that run their own validation on submit. */
+    requiredMark?: boolean;
     /** Disables the field. */
     disabled?: boolean;
     /** Read-only field: a muted fill, and "(read only)" after the label. */
     readonly?: boolean;
     /** Error text under the field. Turns the border and label red and sets `aria-invalid`. */
     errorMsg?: string;
+    /** Turns the border red and sets `aria-invalid` without a message, for forms that print their own. */
+    invalid?: boolean;
     /** Help text between the label and the field. */
     hint?: string;
-    /** `small` 36px or `normal` 42px tall. */
-    size?: "small" | "normal";
+    /** `xsmall` 34px, `small` 36px or `normal` 42px tall. */
+    size?: "xsmall" | "small" | "normal";
+    /** Classes for the `<input>` element itself, e.g. `font-mono`. `class` goes on the wrapper. */
+    inputClass?: HTMLAttributes["class"];
+    /** Shows a spinner in the password toggle and disables it, e.g. while `update:showValue` fetches a stored secret. */
+    revealing?: boolean;
     /** Text of a button attached to the right edge, such as "Copy", "Generate" or "Browse". It emits `addon` when clicked. Also its accessible name when `addon-icon-only` is set. */
     addonLabel?: string;
     /** A Lucide icon component shown in the attached button, before `addon-label`. */
@@ -31,9 +39,15 @@ type __VLS_Slots = {
     prefix?: () => unknown;
     /** Content inside the field after the value: a unit such as `Gi` or `%`, or a status icon. */
     suffix?: () => unknown;
+    /** Content before the label text, such as a 14px icon. */
+    "label-icon"?: () => unknown;
+    /** Content after the label text, such as "(Optional)" or an info tooltip. */
+    "label-extra"?: () => unknown;
 };
 type __VLS_ModelProps = {
     modelValue?: string | number;
+    /** Whether a password shows as plain text. Bind `v-model:show-value` to fetch a stored value before it shows. */
+    "showValue"?: boolean;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
@@ -42,18 +56,25 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | number) => any;
     addon: (event: MouseEvent) => any;
+    "update:showValue": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
     onAddon?: ((event: MouseEvent) => any) | undefined;
+    "onUpdate:showValue"?: ((value: boolean) => any) | undefined;
 }>, {
     type: "text" | "password" | "email" | "number" | "url" | "search";
     required: boolean;
+    label: string;
     disabled: boolean;
     name: string;
-    size: "small" | "normal";
-    readonly: boolean;
+    size: "xsmall" | "small" | "normal";
     hint: string;
+    invalid: boolean;
+    readonly: boolean;
     errorMsg: string;
+    requiredMark: boolean;
+    inputClass: string | false | Record<string, any> | import("vue").ClassValue[] | null;
+    revealing: boolean;
     addonLabel: string;
     addonIcon: Component;
     addonIconOnly: boolean;

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

@@ -1,37 +1,48 @@
-import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, mergeModels as o, mergeProps as s, normalizeClass as c, openBlock as l, ref as u, renderSlot as d, resolveDynamicComponent as f, toDisplayString as p, unref as m, useAttrs as h, useId as g, useModel as _, useSlots as v, vModelDynamic as y, withDirectives as b } from "vue";
-import { Eye as x, EyeOff as S } from "@lucide/vue";
+import e from "./AcSpinner.js";
+import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, mergeModels as s, mergeProps as c, normalizeClass as l, openBlock as u, ref as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, useAttrs as g, useId as _, useModel as v, useSlots as y, vModelDynamic as b, withDirectives as x } from "vue";
+import { Eye as S, EyeOff as C } from "@lucide/vue";
 //#region src/lib/components/AcInput.vue?vue&type=script&setup=true&lang.ts
-var C = ["for"], w = {
-	key: 0,
-	class: "text-muted"
-}, T = {
+var w = ["for"], T = { key: 0 }, E = {
 	key: 1,
+	class: "text-muted"
+}, D = {
+	key: 2,
 	class: "text-danger",
 	"aria-hidden": "true"
-}, E = ["id"], D = { class: "flex" }, O = [
+}, O = ["id"], ee = { class: "flex" }, k = [
 	"id",
 	"name",
 	"type",
 	"disabled",
 	"readonly",
 	"required",
+	"aria-label",
 	"aria-invalid",
 	"aria-describedby"
-], k = ["aria-label", "aria-pressed"], A = [
+], A = [
+	"disabled",
+	"aria-label",
+	"aria-pressed",
+	"aria-busy"
+], j = [
 	"disabled",
 	"aria-label",
 	"title"
-], j = { key: 1 }, M = ["id"], N = /*@__PURE__*/ a({
+], M = { key: 1 }, N = ["id"], P = /*@__PURE__*/ o({
 	inheritAttrs: !1,
 	__name: "AcInput",
-	props: /*@__PURE__*/ o({
-		label: {},
+	props: /*@__PURE__*/ s({
+		label: { default: "" },
 		name: { default: "" },
 		type: { default: "text" },
 		required: {
 			type: Boolean,
 			default: !1
 		},
+		requiredMark: {
+			type: Boolean,
+			default: !1
+		},
 		disabled: {
 			type: Boolean,
 			default: !1
@@ -41,8 +52,26 @@ var C = ["for"], w = {
 			default: !1
 		},
 		errorMsg: { default: "" },
+		invalid: {
+			type: Boolean,
+			default: !1
+		},
 		hint: { default: "" },
 		size: { default: "normal" },
+		inputClass: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array
+			],
+			default: void 0
+		},
+		revealing: {
+			type: Boolean,
+			default: !1
+		},
 		addonLabel: { default: "" },
 		addonIcon: { default: void 0 },
 		addonIconOnly: {
@@ -51,101 +80,141 @@ var C = ["for"], w = {
 		}
 	}, {
 		modelValue: { default: "" },
-		modelModifiers: {}
+		modelModifiers: {},
+		showValue: {
+			type: Boolean,
+			default: !1
+		},
+		showValueModifiers: {}
 	}),
-	emits: /*@__PURE__*/ o(["addon"], ["update:modelValue"]),
-	setup(a, { expose: o, emit: N }) {
-		let P = a, F = _(a, "modelValue"), I = N, L = g(), R = h(), z = v(), B = e(() => ({
-			class: R.class,
-			style: R.style
-		})), V = e(() => {
-			let { class: e, style: t, ...n } = R;
+	emits: /*@__PURE__*/ s(["addon"], ["update:modelValue", "update:showValue"]),
+	setup(o, { expose: s, emit: P }) {
+		let F = o, I = v(o, "modelValue"), L = v(o, "showValue"), R = P, z = _(), B = g(), V = y(), H = t(() => ({
+			class: B.class,
+			style: B.style
+		})), U = t(() => {
+			let { class: e, style: t, ...n } = B;
 			return n;
-		}), H = u(null), U = u(!1), W = e(() => P.type === "password" && U.value ? "text" : P.type), G = e(() => [P.hint && `${L}-hint`, P.errorMsg && `${L}-msg`].filter(Boolean).join(" ") || void 0), K = e(() => !!P.addonLabel || !!P.addonIcon), q = e(() => !!z.suffix || P.type === "password");
-		function J(e) {
-			P.disabled || I("addon", e);
+		}), W = d(null), G = t(() => !!F.label || !!V["label-icon"] || !!V["label-extra"]), K = t(() => G.value ? void 0 : B["aria-label"] ?? B.placeholder), q = t(() => !!F.errorMsg || F.invalid), J = t(() => F.type === "password" && L.value ? "text" : F.type), Y = t(() => [
+			B["aria-describedby"],
+			F.hint && `${z}-hint`,
+			F.errorMsg && `${z}-msg`
+		].filter(Boolean).join(" ") || void 0), X = t(() => !!F.addonLabel || !!F.addonIcon), Z = t(() => !!V.suffix || F.type === "password"), Q = {
+			xsmall: "h-8.5",
+			small: "h-9",
+			normal: "h-10.5"
+		}, te = {
+			xsmall: "w-8.5",
+			small: "w-9",
+			normal: "w-10.5"
+		}, ne = {
+			xsmall: "pl-3",
+			small: "pl-4",
+			normal: "pl-5"
+		}, re = {
+			xsmall: "pr-3",
+			small: "pr-4",
+			normal: "pr-5"
+		}, $ = t(() => F.size in Q ? F.size : "normal");
+		function ie(e) {
+			F.disabled || R("addon", e);
 		}
-		return o({ focus: () => H.value?.focus() }), (e, o) => (l(), r("div", s(B.value, {
-			class: ["w-full", a.disabled && "opacity-50"],
+		return s({ focus: () => W.value?.focus() }), (t, s) => (u(), i("div", c(H.value, {
+			class: ["w-full", o.disabled && "opacity-50"],
 			"data-ac-ds": "",
 			"data-testid": "ac-input"
 		}), [
-			i("label", {
-				for: m(L),
+			G.value ? (u(), i("label", {
+				key: 0,
+				for: h(z),
 				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
 			}, [
-				i("span", null, p(a.label), 1),
-				a.readonly ? (l(), r("span", w, "(read only)")) : n("", !0),
-				a.required ? (l(), r("span", T, "*")) : n("", !0)
-			], 8, C),
-			a.hint ? (l(), r("p", {
-				key: 0,
-				id: `${m(L)}-hint`,
+				f(t.$slots, "label-icon"),
+				o.label ? (u(), i("span", T, m(o.label), 1)) : r("", !0),
+				o.readonly ? (u(), i("span", E, "(read only)")) : r("", !0),
+				f(t.$slots, "label-extra"),
+				o.required || o.requiredMark ? (u(), i("span", D, "*")) : r("", !0)
+			], 8, w)) : r("", !0),
+			o.hint ? (u(), i("p", {
+				key: 1,
+				id: `${h(z)}-hint`,
 				class: "mb-2 text-base text-muted"
-			}, p(a.hint), 9, E)) : n("", !0),
-			i("div", D, [i("div", { class: c(["relative flex min-w-0 flex-1 items-center border transition-[border-color,box-shadow,background-color] duration-200", [
-				a.size === "small" ? "h-9" : "h-10.5",
-				K.value ? "rounded-l-10" : "rounded-10",
-				a.readonly ? "bg-surface-muted" : "bg-background",
-				a.errorMsg ? "border-danger/50 focus-within:border-danger focus-within:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]" : ["border-border focus-within:focus-ring", !a.disabled && "hover:border-accent-active"]
+			}, m(o.hint), 9, O)) : r("", !0),
+			a("div", ee, [a("div", { class: l(["relative flex min-w-0 flex-1 items-center border transition-[border-color,box-shadow,background-color] duration-200", [
+				Q[$.value],
+				X.value ? "rounded-l-10" : "rounded-10",
+				o.readonly ? "bg-surface-muted" : "bg-background",
+				q.value ? "border-danger/50 focus-within:border-danger focus-within:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]" : ["border-border focus-within:focus-ring", !o.disabled && "hover:border-accent-active"]
 			]]) }, [
-				e.$slots.prefix ? (l(), r("span", {
+				t.$slots.prefix ? (u(), i("span", {
 					key: 0,
-					class: c(["flex h-full shrink-0 items-center text-base whitespace-nowrap text-muted select-none [&_svg]:size-4", a.size === "small" ? "pl-3" : "pl-4"])
-				}, [d(e.$slots, "prefix")], 2)) : n("", !0),
-				b(i("input", s({
-					id: m(L),
+					class: l(["flex h-full shrink-0 items-center text-base whitespace-nowrap text-muted select-none [&_svg]:size-4", o.size === "normal" ? "pl-4" : "pl-3"])
+				}, [f(t.$slots, "prefix")], 2)) : r("", !0),
+				x(a("input", c({
+					id: h(z),
 					ref_key: "input",
-					ref: H
-				}, V.value, {
-					"onUpdate:modelValue": o[0] ||= (e) => F.value = e,
-					name: a.name,
-					type: W.value,
-					disabled: a.disabled,
-					readonly: a.readonly,
-					required: a.required,
-					"aria-invalid": !!a.errorMsg || void 0,
-					"aria-describedby": G.value,
-					class: ["block h-full w-full min-w-0 flex-1 rounded-10 bg-transparent text-base font-normal text-heading outline-none placeholder:text-muted/80 disabled:cursor-not-allowed", [e.$slots.prefix ? "pl-2" : a.size === "small" ? "pl-4" : "pl-5", q.value ? "pr-2" : a.size === "small" ? "pr-4" : "pr-5"]]
-				}), null, 16, O), [[y, F.value]]),
-				e.$slots.suffix ? (l(), r("span", {
+					ref: W
+				}, U.value, {
+					"onUpdate:modelValue": s[0] ||= (e) => I.value = e,
+					name: o.name,
+					type: J.value,
+					disabled: o.disabled,
+					readonly: o.readonly,
+					required: o.required,
+					"aria-label": K.value,
+					"aria-invalid": q.value || void 0,
+					"aria-describedby": Y.value,
+					class: ["block h-full w-full min-w-0 flex-1 rounded-10 bg-transparent text-base font-normal text-heading outline-none placeholder:text-muted/80 disabled:cursor-not-allowed", [
+						t.$slots.prefix ? "pl-2" : ne[$.value],
+						Z.value ? "pr-2" : re[$.value],
+						o.inputClass
+					]]
+				}), null, 16, k), [[b, I.value]]),
+				t.$slots.suffix ? (u(), i("span", {
 					key: 1,
-					class: c(["relative flex h-full shrink-0 items-center text-base whitespace-nowrap text-muted select-none [&_svg]:size-4", a.type === "password" ? "pr-2" : a.size === "small" ? "pr-3" : "pr-4"])
-				}, [d(e.$slots, "suffix")], 2)) : n("", !0),
-				a.type === "password" ? (l(), r("button", {
+					class: l(["relative flex h-full shrink-0 items-center text-base whitespace-nowrap text-muted select-none [&_svg]:size-4", o.type === "password" ? "pr-2" : o.size === "normal" ? "pr-4" : "pr-3"])
+				}, [f(t.$slots, "suffix")], 2)) : r("", !0),
+				o.type === "password" ? (u(), i("button", {
 					key: 2,
 					type: "button",
-					class: c(["relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-4 text-muted transition-colors hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none", a.size === "small" ? "mr-3" : "mr-4"]),
-					"aria-label": U.value ? "Hide value" : "Show value",
-					"aria-pressed": U.value,
-					onClick: o[1] ||= (e) => U.value = !U.value
-				}, [(l(), t(f(U.value ? m(S) : m(x)), {
-					class: c(a.size === "small" ? "size-4" : "size-5"),
+					class: l(["relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-4 text-muted transition-colors hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-wait", o.size === "normal" ? "mr-4" : "mr-3"]),
+					disabled: o.revealing,
+					"aria-label": L.value ? "Hide value" : "Show value",
+					"aria-pressed": L.value,
+					"aria-busy": o.revealing || void 0,
+					onClick: s[1] ||= (e) => L.value = !L.value
+				}, [o.revealing ? (u(), n(e, {
+					key: 0,
+					size: o.size === "normal" ? "normal" : "small",
+					label: ""
+				}, null, 8, ["size"])) : (u(), n(p(L.value ? h(C) : h(S)), {
+					key: 1,
+					class: l(o.size === "normal" ? "size-5" : "size-4"),
 					"aria-hidden": "true"
-				}, null, 8, ["class"]))], 10, k)) : n("", !0)
-			], 2), K.value ? (l(), r("button", {
+				}, null, 8, ["class"]))], 10, A)) : r("", !0)
+			], 2), X.value ? (u(), i("button", {
 				key: 0,
 				type: "button",
-				class: c(["relative -ml-px inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-r-10 border border-border bg-surface text-base font-medium whitespace-nowrap text-heading transition-colors duration-200 hover:bg-surface-sunken/70 focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:hover:bg-surface", [a.size === "small" ? "h-9" : "h-10.5", a.addonIconOnly ? a.size === "small" ? "w-9" : "w-10.5" : "px-4"]]),
-				disabled: a.disabled,
-				"aria-label": a.addonIconOnly ? a.addonLabel : void 0,
-				title: a.addonIconOnly ? a.addonLabel : void 0,
+				class: l(["relative -ml-px inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-r-10 border border-border bg-surface text-base font-medium whitespace-nowrap text-heading transition-colors duration-200 hover:bg-surface-sunken/70 focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:hover:bg-surface", [Q[$.value], o.addonIconOnly ? te[$.value] : "px-4"]]),
+				disabled: o.disabled,
+				"aria-label": o.addonIconOnly ? o.addonLabel : void 0,
+				title: o.addonIconOnly ? o.addonLabel : void 0,
 				"data-ac-ds": "",
 				"data-testid": "ac-input-addon",
-				onClick: J
-			}, [a.addonIcon ? (l(), t(f(a.addonIcon), {
+				onClick: ie
+			}, [o.addonIcon ? (u(), n(p(o.addonIcon), {
 				key: 0,
 				class: "size-4 text-muted",
 				"aria-hidden": "true"
-			})) : n("", !0), a.addonIconOnly ? n("", !0) : (l(), r("span", j, p(a.addonLabel), 1))], 10, A)) : n("", !0)]),
-			a.errorMsg ? (l(), r("p", {
-				key: 1,
-				id: `${m(L)}-msg`,
+			})) : r("", !0), o.addonIconOnly ? r("", !0) : (u(), i("span", M, m(o.addonLabel), 1))], 10, j)) : r("", !0)]),
+			o.errorMsg ? (u(), i("p", {
+				key: 2,
+				id: `${h(z)}-msg`,
 				class: "mt-1 text-base text-danger-strong",
 				role: "alert"
-			}, p(a.errorMsg), 9, M)) : n("", !0)
+			}, m(o.errorMsg), 9, N)) : r("", !0)
 		], 16));
 	}
 });
 //#endregion
-export { N as default };
+export { P as default };

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

@@ -87,9 +87,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     disabled: boolean;
     max: number;
     size: "small" | "normal";
+    hint: string;
     readonly: boolean;
     options: SelectOption<string>[];
-    hint: string;
     errorMsg: string;
     mono: boolean;
     itemName: string;

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 };