@ac-design/design-system 1.0.2 → 2.0.0

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

@@ -0,0 +1,46 @@
+export interface LocaleOption {
+    /** Locale code the app's i18n uses, e.g. `en`, `bn`, `de`. */
+    value: string;
+    /** The language's own name, e.g. "English", "বাংলা", "Deutsch". */
+    label: string;
+    /** A muted second line, e.g. the name in English: "Bengali". */
+    description?: string;
+}
+export interface Props {
+    /** Languages to offer, each named in its own language. With fewer than two, nothing renders. */
+    locales: LocaleOption[];
+    /** `icon` is a 36px icon button for the navbar; `button` adds the current code (EN) and a chevron. */
+    variant?: "icon" | "button";
+    /** Accessible name of the trigger. The current language is added after it. */
+    ariaLabel?: string;
+    /** Heading at the top of the menu. Pass an empty string to hide it. */
+    menuTitle?: string;
+    /** Which edge of the trigger the menu lines up with. `end` suits the right of a navbar. */
+    align?: "start" | "end";
+    /** Remembers the choice in localStorage under `storageKey` and restores it on load. */
+    persist?: boolean;
+    /** localStorage key for `persist`. cloud-ui uses `user-locale`. */
+    storageKey?: string;
+}
+type __VLS_Props = Props;
+type __VLS_ModelProps = {
+    /** The current locale code. Bind it to your i18n instance's locale. */
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+    change: (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    onChange?: ((value: string) => any) | undefined;
+}>, {
+    variant: "icon" | "button";
+    align: "start" | "end";
+    ariaLabel: string;
+    menuTitle: string;
+    persist: boolean;
+    storageKey: string;
+}, {}, {}, {}, 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

@@ -0,0 +1,103 @@
+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 { Check as v, ChevronDown as y, Languages as b } from "@lucide/vue";
+//#region src/lib/components/AcLocaleSwitcher.vue?vue&type=script&setup=true&lang.ts
+var x = ["aria-label"], S = ["aria-label"], C = { class: "font-mono text-xs tracking-wide uppercase" }, w = {
+	key: 0,
+	class: "mb-1 border-b border-border px-3 pt-1 pb-2 text-xs font-semibold text-muted",
+	"aria-hidden": "true"
+}, T = { class: "flex items-center gap-3" }, E = ["lang"], D = /*@__PURE__*/ l({
+	__name: "AcLocaleSwitcher",
+	props: /*@__PURE__*/ u({
+		locales: {},
+		variant: { default: "icon" },
+		ariaLabel: { default: "Change language" },
+		menuTitle: { default: "Select language" },
+		align: { default: "end" },
+		persist: {
+			type: Boolean,
+			default: !1
+		},
+		storageKey: { default: "user-locale" }
+	}, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ u(["change"], ["update:modelValue"]),
+	setup(l, { emit: u }) {
+		let D = l, O = g(l, "modelValue"), k = u, A = r(() => D.locales.find((e) => e.value === O.value)), j = r(() => A.value ? `${D.ariaLabel} (${A.value.label})` : D.ariaLabel);
+		function M() {
+			try {
+				return localStorage.getItem(D.storageKey);
+			} catch {
+				return null;
+			}
+		}
+		function N(e) {
+			if (e !== O.value && (O.value = e, k("change", e), D.persist)) try {
+				localStorage.setItem(D.storageKey, e);
+			} catch {}
+		}
+		if (D.persist && typeof window < "u") {
+			let e = M();
+			e && e !== O.value && D.locales.some((t) => t.value === e) && N(e);
+		}
+		return (r, u) => l.locales.length > 1 ? (f(), i(e, {
+			key: 0,
+			align: l.align,
+			"menu-label": l.ariaLabel,
+			"data-testid": "ac-locale-switcher"
+		}, {
+			trigger: _(({ open: e }) => [l.variant === "icon" ? (f(), o("button", {
+				key: 0,
+				type: "button",
+				"aria-label": j.value,
+				class: d(["inline-flex size-9 cursor-pointer items-center justify-center rounded-10 text-muted transition-colors duration-200 hover:bg-surface-sunken 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 && "bg-surface-sunken text-heading"])
+			}, [c(h(b), {
+				class: "size-5",
+				"aria-hidden": "true"
+			})], 10, x)) : (f(), o("button", {
+				key: 1,
+				type: "button",
+				"aria-label": j.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/70 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/70"])
+			}, [
+				c(h(b), {
+					class: "size-4 text-muted",
+					"aria-hidden": "true"
+				}),
+				s("span", C, m(A.value?.value ?? ""), 1),
+				c(h(y), {
+					class: d(["size-4 text-muted transition-transform duration-200 motion-reduce:transition-none", e && "rotate-180"]),
+					"aria-hidden": "true"
+				}, null, 8, ["class"])
+			], 10, S))]),
+			default: _(() => [l.menuTitle ? (f(), o("p", w, m(l.menuTitle), 1)) : a("", !0), (f(!0), o(n, null, p(l.locales, (e) => (f(), i(t, {
+				key: e.value,
+				description: e.description,
+				"aria-current": e.value === O.value ? "true" : void 0,
+				class: d(e.value === O.value && "bg-surface-sunken/50 font-medium"),
+				onClick: (t) => N(e.value)
+			}, {
+				default: _(() => [s("span", T, [s("span", {
+					class: "min-w-0 flex-1 truncate",
+					lang: e.value
+				}, m(e.label), 9, E), e.value === O.value ? (f(), i(h(v), {
+					key: 0,
+					class: "size-4 shrink-0 text-primary",
+					"aria-hidden": "true"
+				})) : a("", !0)])]),
+				_: 2
+			}, 1032, [
+				"description",
+				"aria-current",
+				"class",
+				"onClick"
+			]))), 128))]),
+			_: 1
+		}, 8, ["align", "menu-label"])) : a("", !0);
+	}
+});
+//#endregion
+export { D as default };

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

@@ -1,13 +1,13 @@
 import { Teleport as e, Transition as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, mergeModels as c, nextTick as l, normalizeClass as u, onBeforeUnmount as d, openBlock as f, ref as p, renderSlot as m, toDisplayString as h, unref as g, useId as _, useModel as v, watch as y, withCtx as b, withModifiers as x } from "vue";
 import { X as S } from "@lucide/vue";
 //#region src/lib/components/AcModal.vue?vue&type=script&setup=true&lang.ts
-var C = ["aria-labelledby", "aria-describedby"], w = { class: "flex shrink-0 items-start gap-4 border-b border-border-light px-5 py-4" }, T = { class: "min-w-0 flex-1" }, E = ["id"], D = ["id"], O = { class: "-mt-0.5 -mr-1.5 flex shrink-0 items-center gap-1" }, k = {
+var C = ["aria-labelledby", "aria-describedby"], w = { class: "flex shrink-0 items-start gap-4 border-b border-border px-6 py-4" }, T = { class: "min-w-0 flex-1" }, E = ["id"], D = ["id"], O = { class: "-my-1 -mr-2 flex shrink-0 items-center gap-1" }, k = {
 	"data-modal-body": "",
-	class: "ac-scrollbar min-h-0 flex-1 px-5 py-5"
+	class: "ac-scrollbar min-h-0 flex-1 p-6"
 }, A = {
 	key: 0,
-	class: "flex shrink-0 items-center justify-between gap-3 rounded-b-12 border-t border-border-light bg-surface-muted px-5 py-3"
-}, j = { class: "flex min-w-0 items-center gap-2" }, M = { class: "flex items-center gap-2" }, N = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", P = /*@__PURE__*/ s({
+	class: "flex shrink-0 flex-wrap items-center justify-between gap-3 rounded-b-16 border-t border-border px-6 py-4"
+}, j = { class: "flex min-w-0 items-center gap-2" }, M = { class: "ml-auto flex items-center gap-3" }, N = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", P = /*@__PURE__*/ s({
 	__name: "AcModal",
 	props: /*@__PURE__*/ c({
 		title: { default: "" },
@@ -34,19 +34,19 @@ var C = ["aria-labelledby", "aria-describedby"], w = { class: "flex shrink-0 ite
 	}),
 	emits: /*@__PURE__*/ c(["close"], ["update:open"]),
 	setup(s, { emit: c }) {
-		let P = s, F = c, I = v(s, "open"), L = _(), R = p(null), z = null, B = () => {
+		let P = s, F = c, I = v(s, "open"), L = _(), R = p(null), z = null, B = N.split(", ").map((e) => `[data-modal-body] ${e}`).join(", "), V = () => {
 			P.closable && (I.value = !1, F("close"));
-		}, V = (e) => {
+		}, H = (e) => {
 			if (e.key === "Escape") {
 				if (e.defaultPrevented) return;
-				e.stopPropagation(), B();
+				e.stopPropagation(), V();
 			} else if (e.key === "Tab" && R.value) {
 				let t = [...R.value.querySelectorAll(N)].filter((e) => e.offsetParent !== null);
 				if (!t.length) return;
 				let n = t[0], r = t[t.length - 1];
 				e.shiftKey && document.activeElement === n ? (e.preventDefault(), r.focus()) : !e.shiftKey && document.activeElement === r && (e.preventDefault(), n.focus());
 			}
-		}, H = (e) => {
+		}, U = (e) => {
 			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;
@@ -55,14 +55,14 @@ var C = ["aria-labelledby", "aria-describedby"], w = { class: "flex shrink-0 ite
 		};
 		y(I, async (e, t) => {
 			if (e) {
-				z = document.activeElement, H(!0), await l();
+				z = document.activeElement, U(!0), await l();
 				let e = R.value?.querySelector("[autofocus]");
-				((e && (e.matches(N) ? e : e.querySelector(N))) ?? R.value?.querySelector(`[data-modal-body] ${N}`) ?? R.value)?.focus();
-			} else t && (H(!1), z?.focus?.());
+				((e && (e.matches(N) ? e : e.querySelector(N))) ?? R.value?.querySelector(B) ?? R.value)?.focus();
+			} else t && (U(!1), z?.focus?.());
 		}, { immediate: !0 }), d(() => {
-			I.value && H(!1);
+			I.value && U(!1);
 		});
-		let U = {
+		let W = {
 			small: "max-w-110",
 			normal: "max-w-130",
 			medium: "max-w-200",
@@ -80,11 +80,11 @@ var C = ["aria-labelledby", "aria-describedby"], w = { class: "flex shrink-0 ite
 				class: "fixed inset-0 z-[80] overflow-y-auto bg-overlay backdrop-blur-[2px]",
 				"data-ac-ds": "",
 				"data-testid": "ac-modal",
-				onKeydown: V,
-				onMousedown: l[1] ||= x((e) => s.closeOnOutsideClick && B(), ["self"])
+				onKeydown: H,
+				onMousedown: l[1] ||= x((e) => s.closeOnOutsideClick && V(), ["self"])
 			}, [a("div", {
 				class: "flex min-h-full items-start justify-center p-4 sm:items-center sm:p-8",
-				onMousedown: l[0] ||= x((e) => s.closeOnOutsideClick && B(), ["self"])
+				onMousedown: l[0] ||= x((e) => s.closeOnOutsideClick && V(), ["self"])
 			}, [a("div", {
 				ref_key: "panel",
 				ref: R,
@@ -93,25 +93,25 @@ var C = ["aria-labelledby", "aria-describedby"], w = { class: "flex shrink-0 ite
 				"aria-labelledby": s.title ? `${g(L)}-title` : void 0,
 				"aria-describedby": s.description ? `${g(L)}-desc` : void 0,
 				tabindex: "-1",
-				class: u(["relative flex max-h-[calc(100dvh-32px)] w-full animate-pop-in flex-col rounded-12 border border-border bg-surface shadow-xl outline-none sm:max-h-[calc(100dvh-64px)]", U[s.size]])
+				class: u(["relative flex max-h-[calc(100dvh-32px)] w-full animate-pop-in flex-col rounded-16 border border-border bg-surface shadow-xl outline-none sm:max-h-[calc(100dvh-64px)]", W[s.size]])
 			}, [
-				a("header", w, [a("div", T, [m(c.$slots, "header", {}, () => [a("h4", {
+				a("header", w, [a("div", T, [m(c.$slots, "header", {}, () => [a("h2", {
 					id: `${g(L)}-title`,
-					class: "text-xl leading-6 tracking-[-0.015em]"
+					class: "text-xl leading-7 font-semibold tracking-tight text-heading"
 				}, h(s.title), 9, E), s.description ? (f(), i("p", {
 					key: 0,
 					id: `${g(L)}-desc`,
-					class: "mt-0.5 text-base text-muted"
+					class: "mt-1 text-base text-muted"
 				}, h(s.description), 9, D)) : r("", !0)])]), a("div", O, [m(c.$slots, "header-actions"), s.closable ? (f(), i("button", {
 					key: 0,
 					type: "button",
-					class: "inline-flex size-7 cursor-pointer items-center justify-center rounded-6 text-muted transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+					class: "inline-flex size-9 cursor-pointer items-center justify-center rounded-10 text-muted transition-colors hover:bg-surface-sunken hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
 					"aria-label": "Close",
 					"data-ac-ds": "",
 					"data-testid": "ac-modal-close",
-					onClick: B
+					onClick: V
 				}, [o(g(S), {
-					class: "size-4",
+					class: "size-5",
 					"aria-hidden": "true"
 				})])) : r("", !0)])]),
 				a("div", k, [m(c.$slots, "default")]),

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

@@ -6,13 +6,13 @@ var d = ["aria-label"], f = {
 	class: "flex shrink-0 items-center gap-2"
 }, p = {
 	key: 0,
-	class: "inline-flex h-5 items-center rounded-4 bg-primary-95 px-1.5 text-sm font-semibold tracking-wide text-primary-20 uppercase"
+	class: "inline-flex items-center rounded-6 border border-primary/25 bg-primary/10 px-1.5 py-0.5 text-sm font-semibold tracking-wide text-primary-strong uppercase"
 }, m = ["aria-label"], h = { class: "flex min-w-0 flex-1 justify-center" }, g = {
 	key: 0,
 	class: "hidden w-full max-w-md sm:block"
 }, _ = {
 	key: 3,
-	class: "flex shrink-0 items-center gap-1"
+	class: "flex shrink-0 items-center gap-0.5 sm:gap-2"
 }, v = /*@__PURE__*/ i({
 	__name: "AcNavbar",
 	props: {
@@ -29,27 +29,27 @@ var d = ["aria-label"], f = {
 	setup(i, { emit: v }) {
 		let y = v;
 		return (v, b) => (o(), t("header", {
-			class: a(["top-0 z-30 flex h-14 shrink-0 items-center gap-2 border-b border-border-light bg-surface/90 px-3 backdrop-blur-md sm:gap-3 sm:px-4", i.sticky && "sticky"]),
+			class: a(["top-0 z-30 flex h-18 shrink-0 items-center gap-2 border-b border-border/80 bg-surface/90 px-4 backdrop-blur-sm sm:gap-4 sm:px-6", i.sticky && "sticky"]),
 			"data-ac-ds": "",
 			"data-testid": "ac-navbar"
 		}, [
 			i.menuButton === "never" ? e("", !0) : (o(), t("button", {
 				key: 0,
 				type: "button",
-				class: a(["-ml-1.5 inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-6 text-label transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", i.menuButton === "mobile" && "md:hidden"]),
+				class: a(["-ml-1.5 inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-10 text-heading transition-colors duration-200 hover:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none", i.menuButton === "mobile" && "md:hidden"]),
 				"aria-label": i.menuLabel,
 				"data-ac-ds": "",
 				"data-testid": "ac-navbar-menu",
 				onClick: b[0] ||= (e) => y("menu")
 			}, [r(l(u), {
-				class: "size-4.5",
+				class: "size-5",
 				"aria-hidden": "true"
 			})], 10, d)),
 			v.$slots.brand || i.productName ? (o(), t("div", f, [s(v.$slots, "brand"), i.productName ? (o(), t("span", p, c(i.productName), 1)) : e("", !0)])) : e("", !0),
 			v.$slots.default ? (o(), t("nav", {
 				key: 2,
 				"aria-label": i.label,
-				class: "hidden items-center gap-0.5 md:flex"
+				class: "hidden items-center gap-1 md:flex"
 			}, [s(v.$slots, "default")], 8, m)) : e("", !0),
 			n("div", h, [v.$slots.search ? (o(), t("div", g, [s(v.$slots, "search")])) : e("", !0)]),
 			v.$slots.actions ? (o(), t("div", _, [s(v.$slots, "actions")])) : e("", !0)

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

@@ -4,7 +4,7 @@ export interface Props {
     label: string;
     /** A Lucide icon component, e.g. `:icon="Terminal"`. */
     icon?: Component;
-    /** Shows only the icon in a 32px square button, for navbar actions such as Terminal or Notifications. */
+    /** Shows only the icon (20px) in a 36px square button, for navbar actions such as Terminal or Notifications. */
     iconOnly?: boolean;
     /** Route to link to. Renders `RouterLink` when vue-router is installed in the app, otherwise a plain link (string routes only). */
     to?: string | object;

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

@@ -1,13 +1,13 @@
-import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createTextVNode as a, defineComponent as o, getCurrentInstance as s, mergeProps as c, openBlock as l, renderSlot as u, resolveDynamicComponent as d, toDisplayString as f, withCtx as p } from "vue";
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createTextVNode as a, defineComponent as o, getCurrentInstance as s, mergeProps as c, normalizeClass as l, openBlock as u, renderSlot as d, resolveDynamicComponent as f, toDisplayString as p, withCtx as m } from "vue";
 //#region src/lib/components/AcNavbarItem.vue?vue&type=script&setup=true&lang.ts
-var m = { key: 1 }, h = {
+var h = { key: 1 }, g = {
 	key: 0,
-	class: "absolute -top-0.5 left-4 inline-flex h-4 min-w-4 items-center justify-center rounded-50 bg-danger px-1 text-xm font-semibold text-white tabular-nums ring-2 ring-surface",
+	class: "absolute -top-1 left-5 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-danger px-1 text-xs leading-none font-medium text-white tabular-nums",
 	"aria-hidden": "true"
-}, g = {
+}, _ = {
 	key: 1,
-	class: "inline-flex h-4.5 min-w-4.5 items-center justify-center rounded-50 bg-slate-90 px-1.5 text-sm font-medium text-label tabular-nums ring-1 ring-border ring-inset"
-}, _ = /*@__PURE__*/ o({
+	class: "inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary/10 px-1.5 text-xs leading-none font-medium text-primary-strong tabular-nums"
+}, v = /*@__PURE__*/ o({
 	__name: "AcNavbarItem",
 	props: {
 		label: {},
@@ -29,37 +29,37 @@ var m = { key: 1 }, h = {
 		}
 	},
 	emits: ["click"],
-	setup(o, { emit: _ }) {
-		let v = o, y = _, b = s()?.appContext.components.RouterLink, x = t(() => v.to && b && !v.disabled ? b : v.to || v.href ? "a" : "button"), S = t(() => v.badge === void 0 || v.badge === "" || v.badge === 0 ? "" : typeof v.badge == "number" && v.badge > 999 ? "999+" : String(v.badge)), C = t(() => {
+	setup(o, { emit: v }) {
+		let y = o, b = v, x = s()?.appContext.components.RouterLink, S = t(() => y.to && x && !y.disabled ? x : y.to || y.href ? "a" : "button"), C = t(() => y.badge === void 0 || y.badge === "" || y.badge === 0 ? "" : typeof y.badge == "number" && y.badge > 999 ? "999+" : String(y.badge)), w = t(() => {
 			let e = {};
-			return x.value === b ? e.to = v.to : x.value === "a" ? v.disabled ? (e.role = "link", e["aria-disabled"] = "true") : e.href = v.href ?? (typeof v.to == "string" ? v.to : void 0) : (e.type = "button", e.disabled = v.disabled || void 0), v.active && (e["aria-current"] = "page"), v.iconOnly && (e["aria-label"] = S.value ? `${v.label} (${S.value})` : v.label), e;
+			return S.value === x ? e.to = y.to : S.value === "a" ? y.disabled ? (e.role = "link", e["aria-disabled"] = "true") : e.href = y.href ?? (typeof y.to == "string" ? y.to : void 0) : (e.type = "button", e.disabled = y.disabled || void 0), y.active && (e["aria-current"] = "page"), y.iconOnly && (e["aria-label"] = C.value ? `${y.label} (${C.value})` : y.label), e;
 		});
-		function w(e) {
-			if (v.disabled) {
+		function T(e) {
+			if (y.disabled) {
 				e.preventDefault();
 				return;
 			}
-			y("click", e);
+			b("click", e);
 		}
-		return (t, s) => (l(), n(d(x.value), c(C.value, {
-			class: ["relative inline-flex h-8 shrink-0 items-center justify-center gap-2 rounded-6 text-base font-medium whitespace-nowrap text-label no-underline transition-colors duration-100 select-none focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring aria-[current=page]:bg-surface-sunken aria-[current=page]:text-heading", [o.iconOnly ? "w-8" : "px-3", o.disabled ? "pointer-events-none cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-surface-sunken hover:text-heading"]],
+		return (t, s) => (u(), n(f(S.value), c(w.value, {
+			class: ["relative inline-flex h-9 shrink-0 items-center justify-center gap-2 rounded-10 text-base font-medium whitespace-nowrap no-underline transition-colors duration-200 select-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none aria-[current=page]:bg-primary/10 aria-[current=page]:text-primary-strong", [o.iconOnly ? "w-9 text-muted" : "px-3 text-heading/80", o.disabled ? "pointer-events-none cursor-not-allowed opacity-50" : "cursor-pointer hover:bg-surface-sunken hover:text-heading"]],
 			title: o.iconOnly ? o.label : void 0,
 			"data-ac-ds": "",
 			"data-testid": "ac-navbar-item",
-			onClick: w
+			onClick: T
 		}), {
-			default: p(() => [
-				o.icon ? (l(), n(d(o.icon), {
+			default: m(() => [
+				o.icon ? (u(), n(f(o.icon), {
 					key: 0,
-					class: "size-4 shrink-0",
+					class: l(["shrink-0", o.iconOnly ? "size-5" : "size-4"]),
 					"aria-hidden": "true"
-				})) : r("", !0),
-				o.iconOnly ? r("", !0) : (l(), i("span", m, [u(t.$slots, "default", {}, () => [a(f(o.label), 1)])])),
-				S.value ? (l(), i(e, { key: 2 }, [o.iconOnly ? (l(), i("span", h, f(S.value), 1)) : (l(), i("span", g, f(S.value), 1))], 64)) : r("", !0)
+				}, null, 8, ["class"])) : r("", !0),
+				o.iconOnly ? r("", !0) : (u(), i("span", h, [d(t.$slots, "default", {}, () => [a(p(o.label), 1)])])),
+				C.value ? (u(), i(e, { key: 2 }, [o.iconOnly ? (u(), i("span", g, p(C.value), 1)) : (u(), i("span", _, p(C.value), 1))], 64)) : r("", !0)
 			]),
 			_: 3
 		}, 16, ["class", "title"]));
 	}
 });
 //#endregion
-export { _ as default };
+export { v as default };

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

@@ -7,9 +7,9 @@ var pe = {
 	class: "inline-flex",
 	"data-ac-ds": "",
 	"data-testid": "ac-notification-menu"
-}, me = { class: "flex h-12 shrink-0 items-center gap-2 border-b border-border-light pr-2 pl-4" }, he = {
+}, me = { class: "flex h-13 shrink-0 items-center gap-2 border-b border-border pr-2.5 pl-4" }, he = {
 	key: 0,
-	class: "inline-flex h-4.5 min-w-4.5 items-center justify-center rounded-50 bg-primary-95 px-1.5 text-sm font-semibold text-primary-20 tabular-nums"
+	class: "inline-flex items-center justify-center rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary-strong tabular-nums"
 }, ge = {
 	key: 0,
 	class: "flex flex-col gap-4 px-4 py-4",
@@ -20,17 +20,17 @@ var pe = {
 	key: 1,
 	class: "flex flex-col items-center gap-3 px-6 py-10 text-center"
 }, ve = {
-	class: "inline-flex size-10 items-center justify-center rounded-10 border border-border bg-surface-muted text-muted",
+	class: "inline-flex size-12 items-center justify-center rounded-14 bg-primary/10 text-primary-strong",
 	"aria-hidden": "true"
-}, ye = { class: "text-lg font-medium text-heading" }, be = {
+}, ye = { class: "text-lg font-semibold text-heading" }, be = {
 	key: 2,
 	role: "list",
-	class: "ac-scrollbar min-h-0 flex-1 divide-y divide-border-light",
+	class: "ac-scrollbar min-h-0 flex-1 divide-y divide-border",
 	"data-ac-ds": "",
 	"data-testid": "ac-notification-menu-list"
 }, xe = { class: "min-w-0 flex-1" }, Se = {
 	key: 0,
-	class: "mt-0.5 line-clamp-2 text-xs text-body"
+	class: "mt-1 line-clamp-2 text-xs text-muted"
 }, Ce = { class: "mt-1 flex items-center gap-1.5 text-xs text-muted" }, we = {
 	key: 1,
 	"aria-hidden": "true"
@@ -43,7 +43,7 @@ var pe = {
 	class: "sr-only"
 }, Oe = {
 	key: 3,
-	class: "shrink-0 border-t border-border-light p-1"
+	class: "shrink-0 border-t border-border p-1.5"
 }, ke = "[data-notification-item]", Ae = 6048e5, D = /*@__PURE__*/ f({
 	__name: "AcNotificationMenu",
 	props: /*@__PURE__*/ m({
@@ -94,27 +94,27 @@ var pe = {
 		}, A = {
 			success: {
 				icon: ce,
-				tile: "bg-green-95 text-green-40",
-				text: "text-green-30"
+				tile: "bg-success/10 text-success-strong",
+				text: "text-success-strong"
 			},
 			danger: {
 				icon: le,
-				tile: "bg-red-95 text-red-40",
-				text: "text-red-30"
+				tile: "bg-danger/10 text-danger-strong",
+				text: "text-danger-strong"
 			},
 			warning: {
 				icon: fe,
-				tile: "bg-yellow-95 text-yellow-40",
-				text: "text-yellow-30"
+				tile: "bg-warning/10 text-warning-strong",
+				text: "text-warning-strong"
 			},
 			info: {
 				icon: de,
-				tile: "bg-blue-95 text-blue-40",
-				text: "text-blue-30"
+				tile: "bg-info/10 text-info-strong",
+				text: "text-info-strong"
 			},
 			neutral: {
 				icon: ue,
-				tile: "bg-slate-90 text-label",
+				tile: "bg-surface-sunken text-muted",
 				text: "text-muted"
 			}
 		}, j = new Intl.RelativeTimeFormat(void 0, {
@@ -202,7 +202,7 @@ var pe = {
 			q()?.contains(t) || L.value?.contains(t) || Z(!1);
 		}
 		function Q(e) {
-			e && L.value?.contains(e.target) || X();
+			e?.target instanceof Node && L.value?.contains(e.target) || X();
 		}
 		function $(e) {
 			let t = e ? "addEventListener" : "removeEventListener";
@@ -237,7 +237,7 @@ var pe = {
 			"class"
 		]), (v(), o(r, { to: "body" }, [d(i, {
 			"enter-active-class": "transition duration-150 ease-out",
-			"enter-from-class": `opacity-0 motion-safe:scale-[0.98] ${z.value ? "motion-safe:-translate-y-1" : "motion-safe:translate-y-1"}`,
+			"enter-from-class": "opacity-0 motion-safe:scale-95",
 			"leave-active-class": "transition duration-100 ease-in",
 			"leave-to-class": "opacity-0"
 		}, {
@@ -249,7 +249,7 @@ var pe = {
 				role: "dialog",
 				tabindex: "-1",
 				"aria-labelledby": F,
-				class: _(["fixed z-[90] flex w-[calc(380px*var(--ac-scale))] max-w-[calc(100vw-16px)] flex-col overflow-hidden rounded-10 border border-border bg-surface shadow-lg outline-none", z.value ? "origin-top-right" : "origin-bottom-right"]),
+				class: _(["fixed z-[90] flex w-[calc(380px*var(--ac-scale))] max-w-[calc(100vw-16px)] flex-col overflow-hidden rounded-14 border border-border bg-surface shadow-lg outline-none", z.value ? "origin-top-right" : "origin-bottom-right"]),
 				style: ee(R.value),
 				"data-ac-ds": "",
 				"data-testid": "ac-notification-menu-panel",
@@ -258,13 +258,13 @@ var pe = {
 				l("div", me, [
 					l("h2", {
 						id: F,
-						class: "text-lg font-semibold tracking-normal text-heading"
+						class: "font-heading text-lg font-semibold tracking-tight text-heading"
 					}, C(f.label), 1),
 					H.value ? (v(), c("span", he, [u(C(H.value > 999 ? "999+" : H.value), 1), p[1] ||= l("span", { class: "sr-only" }, "\xA0unread", -1)])) : s("", !0),
 					Pe.value || H.value ? (v(), c("button", {
 						key: 1,
 						type: "button",
-						class: "ml-auto inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-6 px-2 text-xs font-medium text-label transition-colors hover:bg-surface-muted hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+						class: "ml-auto inline-flex h-8 cursor-pointer items-center gap-1.5 rounded-8 px-2.5 text-xs font-medium text-muted transition-colors duration-200 hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
 						"data-ac-ds": "",
 						"data-testid": "ac-notification-menu-mark-all",
 						onClick: p[0] ||= (e) => k("markAllRead")
@@ -290,7 +290,7 @@ var pe = {
 					class: "flex-1"
 				})])), 64))])) : f.notifications.length ? (v(), c("ul", be, [(v(!0), c(n, null, b(f.notifications, (e) => (v(), c("li", { key: e.id }, [(v(), o(S(G(e.to, e.href)), h({ ref_for: !0 }, K(e.to, e.href), {
 					"data-notification-item": "",
-					class: ["relative flex w-full cursor-pointer gap-3 px-4 py-3 text-left no-underline outline-none transition-colors hover:bg-surface-muted focus-visible:bg-surface-muted focus-visible:ring-[3px] focus-visible:ring-ring focus-visible:ring-inset", !e.read && "bg-primary-97"],
+					class: ["relative flex w-full cursor-pointer gap-3 px-4 py-3 text-left no-underline outline-none transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", e.read ? "hover:bg-surface-sunken/50 focus-visible:bg-surface-sunken/50" : "bg-primary/8 hover:bg-primary/12 focus-visible:bg-primary/12"],
 					"data-ac-ds": "",
 					"data-testid": "ac-notification-menu-item",
 					onClick: (t) => Be(e)
@@ -320,25 +320,25 @@ var pe = {
 					])]),
 					_: 2
 				}, 1040, ["class", "onClick"]))]))), 128))])) : (v(), c("div", _e, [x(a.$slots, "empty", {}, () => [
-					l("span", ve, [d(w(oe), { class: "size-4.5" })]),
+					l("span", ve, [d(w(oe), { class: "size-6" })]),
 					l("p", ye, C(f.emptyText), 1),
 					p[3] ||= l("p", { class: "max-w-64 text-base text-muted" }, "Backups, upgrades and alerts from your clusters show up here.", -1)
 				])])),
 				a.$slots.footer || Fe.value ? (v(), c("div", Oe, [x(a.$slots, "footer", { close: Z }, () => [(v(), o(S(G(f.viewAllTo, f.viewAllHref)), h(K(f.viewAllTo, f.viewAllHref), {
-					class: "flex h-8 w-full cursor-pointer items-center justify-center gap-1.5 rounded-6 text-base font-medium text-heading no-underline outline-none transition-colors hover:bg-surface-muted focus-visible:bg-surface-muted focus-visible:ring-[3px] focus-visible:ring-ring",
+					class: "group/link flex h-9 w-full cursor-pointer items-center justify-center gap-1.5 rounded-8 text-base font-semibold text-primary-strong no-underline outline-none transition-colors duration-200 hover:bg-accent-hover focus-visible:bg-accent-hover focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
 					"data-ac-ds": "",
 					"data-testid": "ac-notification-menu-view-all",
 					onClick: Ve
 				}), {
 					default: E(() => [u(C(f.viewAllLabel) + " ", 1), d(w(ie), {
-						class: "size-3.5",
+						class: "size-3.5 transition-transform duration-200 group-hover/link:translate-x-0.5 motion-reduce:transition-none",
 						"aria-hidden": "true"
 					})]),
 					_: 1
 				}, 16))])])) : s("", !0)
 			], 38)) : s("", !0)]),
 			_: 3
-		}, 8, ["enter-from-class"])]))]));
+		})]))]));
 	}
 });
 //#endregion

package/dist/lib/components/AcNumberInput.js

@@ -0,0 +1,5 @@
+import e from "./AcNumberInput.vue_vue_type_script_setup_true_lang.js";
+//#region src/lib/components/AcNumberInput.vue
+var t = e;
+//#endregion
+export { t as default };