@ac-design/design-system 2.2.0 → 2.3.0

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

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

@@ -82,7 +82,9 @@ var w = [
 			let t = document.body, n = Number(t.dataset.acModals ?? 0) + (e ? 1 : -1);
 			if (t.dataset.acModals = String(Math.max(n, 0)), e && n === 1) {
 				let e = window.innerWidth - document.documentElement.clientWidth;
-				t.style.overflow = "hidden", e > 0 && (t.style.paddingRight = `${e}px`);
+				t.style.overflow = "hidden";
+				let n = getComputedStyle(document.documentElement).scrollbarGutter.includes("stable");
+				e > 0 && !n && (t.style.paddingRight = `${e}px`);
 			} else !e && n <= 0 && (t.style.overflow = "", t.style.paddingRight = "");
 		}
 		return b(V, async (e, t) => {

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

@@ -19,6 +19,8 @@ type __VLS_Slots = {
     default?: () => unknown;
     /** A search field, placed by `search-position`. Hidden below 640px. */
     search?: () => unknown;
+    /** Left-hand content that fills the row up to `actions` and shrinks first when space runs out, e.g. cloud-ui's search field with its phone-only search button. Use it instead of a centred `search`. */
+    start?: () => unknown;
     /** Right side: icon actions, notifications, theme and `AcUserMenu` last. */
     actions?: () => unknown;
 };