@ac-design/design-system 2.2.0 → 2.3.0

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

@@ -1,22 +1,28 @@
-import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, createVNode as r, defineComponent as i, normalizeClass as a, openBlock as o, renderSlot as s, toDisplayString as c, unref as l } from "vue";
-import { Menu as u } from "@lucide/vue";
+import { createCommentVNode as e, createElementBlock as t, createVNode as n, defineComponent as r, normalizeClass as i, openBlock as a, renderSlot as o, toDisplayString as s, unref as c } from "vue";
+import { Menu as l } from "@lucide/vue";
 //#region src/lib/components/AcNavbar.vue?vue&type=script&setup=true&lang.ts
-var d = ["aria-label"], f = {
+var u = ["aria-label"], d = {
 	key: 1,
 	class: "flex shrink-0 items-center gap-2"
-}, p = {
+}, f = {
 	key: 0,
 	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 = {
+}, p = ["aria-label"], m = {
 	key: 3,
 	class: "hidden min-w-0 shrink sm:block sm:w-48 md:w-60 lg:w-80 xl:w-96"
-}, g = { class: "flex min-w-0 flex-1 justify-center" }, _ = {
+}, h = {
+	key: 4,
+	class: "flex min-w-0 flex-1 items-center"
+}, g = {
+	key: 5,
+	class: "flex min-w-0 flex-1 justify-center"
+}, _ = {
 	key: 0,
 	class: "hidden w-full max-w-md sm:block"
 }, v = {
-	key: 4,
+	key: 6,
 	class: "flex shrink-0 items-center gap-0.5 sm:gap-3"
-}, y = /*@__PURE__*/ i({
+}, y = /*@__PURE__*/ r({
 	__name: "AcNavbar",
 	props: {
 		menuButton: { default: "mobile" },
@@ -30,37 +36,37 @@ var d = ["aria-label"], f = {
 		searchPosition: { default: "start" }
 	},
 	emits: ["menu"],
-	setup(i, { emit: y }) {
+	setup(r, { emit: y }) {
 		let b = y;
-		return (y, x) => (o(), t("header", {
-			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"]),
+		return (y, x) => (a(), t("header", {
+			class: i(["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", r.sticky && "sticky"]),
 			"data-ac-ds": "",
 			"data-testid": "ac-navbar"
 		}, [
-			i.menuButton === "never" ? e("", !0) : (o(), t("button", {
+			r.menuButton === "never" ? e("", !0) : (a(), t("button", {
 				key: 0,
 				type: "button",
-				class: a(["inline-flex size-9.5 shrink-0 cursor-pointer items-center justify-center rounded-10 border border-transparent text-muted transition-colors duration-200 hover:border-border hover:bg-surface-sunken/50 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", {
-					"md:hidden": i.menuButton === "mobile",
-					"lg:hidden": i.menuButton === "tablet"
+				class: i(["inline-flex size-9.5 shrink-0 cursor-pointer items-center justify-center rounded-10 border border-transparent text-muted transition-colors duration-200 hover:border-border hover:bg-surface-sunken/50 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", {
+					"md:hidden": r.menuButton === "mobile",
+					"lg:hidden": r.menuButton === "tablet"
 				}]),
-				"aria-label": i.menuLabel,
+				"aria-label": r.menuLabel,
 				"data-ac-ds": "",
 				"data-testid": "ac-navbar-menu",
 				onClick: x[0] ||= (e) => b("menu")
-			}, [r(l(u), {
+			}, [n(c(l), {
 				class: "size-5",
 				"aria-hidden": "true"
-			})], 10, d)),
-			y.$slots.brand || i.productName ? (o(), t("div", f, [s(y.$slots, "brand"), i.productName ? (o(), t("span", p, c(i.productName), 1)) : e("", !0)])) : e("", !0),
-			y.$slots.default ? (o(), t("nav", {
+			})], 10, u)),
+			y.$slots.brand || r.productName ? (a(), t("div", d, [o(y.$slots, "brand"), r.productName ? (a(), t("span", f, s(r.productName), 1)) : e("", !0)])) : e("", !0),
+			y.$slots.default ? (a(), t("nav", {
 				key: 2,
-				"aria-label": i.label,
+				"aria-label": r.label,
 				class: "hidden items-center gap-1 md:flex"
-			}, [s(y.$slots, "default")], 8, m)) : e("", !0),
-			y.$slots.search && i.searchPosition === "start" ? (o(), t("div", h, [s(y.$slots, "search")])) : e("", !0),
-			n("div", g, [y.$slots.search && i.searchPosition === "center" ? (o(), t("div", _, [s(y.$slots, "search")])) : e("", !0)]),
-			y.$slots.actions ? (o(), t("div", v, [s(y.$slots, "actions")])) : e("", !0)
+			}, [o(y.$slots, "default")], 8, p)) : e("", !0),
+			y.$slots.search && r.searchPosition === "start" ? (a(), t("div", m, [o(y.$slots, "search")])) : e("", !0),
+			y.$slots.start ? (a(), t("div", h, [o(y.$slots, "start")])) : (a(), t("div", g, [y.$slots.search && r.searchPosition === "center" ? (a(), t("div", _, [o(y.$slots, "search")])) : e("", !0)])),
+			y.$slots.actions ? (a(), t("div", v, [o(y.$slots, "actions")])) : e("", !0)
 		], 2));
 	}
 });

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

@@ -1,52 +1,53 @@
 import e from "./AcNavbarItem.js";
-import t from "./AcSkeleton.js";
-import { Fragment as n, Teleport as r, Transition as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, getCurrentInstance as p, mergeModels as m, mergeProps as h, nextTick as g, normalizeClass as _, normalizeStyle as ee, onBeforeUnmount as te, openBlock as v, ref as y, renderList as b, renderSlot as x, resolveDynamicComponent as S, toDisplayString as C, unref as w, useId as T, useModel as ne, watch as E, withCtx as D } from "vue";
-import { ArrowRight as re, Bell as ie, BellOff as ae } from "@lucide/vue";
+import { fixedFrame as t } from "./fixedFrame.js";
+import n from "./AcSkeleton.js";
+import { Fragment as r, Teleport as i, Transition as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, getCurrentInstance as m, mergeModels as h, mergeProps as g, nextTick as _, normalizeClass as v, normalizeStyle as ee, onBeforeUnmount as te, openBlock as y, ref as b, renderList as x, renderSlot as S, resolveDynamicComponent as C, toDisplayString as w, unref as T, useId as ne, useModel as re, watch as E, withCtx as D } from "vue";
+import { ArrowRight as ie, Bell as ae, BellOff as oe } from "@lucide/vue";
 //#region src/lib/components/AcNotificationMenu.vue?vue&type=script&setup=true&lang.ts
-var oe = {
+var se = {
 	class: "inline-flex",
 	"data-ac-ds": "",
 	"data-testid": "ac-notification-menu"
-}, se = { class: "flex shrink-0 items-center justify-between gap-2 border-b border-border p-3" }, ce = {
+}, ce = { class: "flex shrink-0 items-center justify-between gap-2 border-b border-border p-3" }, le = {
 	key: 0,
 	class: "sr-only"
-}, le = {
+}, ue = {
 	key: 0,
 	class: "flex flex-col gap-4 p-3",
 	"aria-busy": "true",
 	role: "status",
 	"aria-label": "Loading notifications"
-}, ue = {
+}, de = {
 	key: 1,
 	class: "flex flex-col items-center gap-3 px-6 py-10 text-center"
-}, de = {
+}, fe = {
 	class: "inline-flex size-12 items-center justify-center rounded-14 bg-primary/10 text-primary-strong",
 	"aria-hidden": "true"
-}, fe = { class: "text-lg font-semibold text-heading" }, pe = {
+}, pe = { class: "text-lg font-semibold text-heading" }, me = {
 	key: 2,
 	role: "list",
 	class: "ac-scrollbar min-h-0 flex-1 divide-y divide-border",
 	"data-ac-ds": "",
 	"data-testid": "ac-notification-menu-list"
-}, me = { class: "flex items-center gap-2" }, he = { class: "line-clamp-2 min-w-0 text-base font-medium text-heading" }, ge = {
+}, he = { class: "flex items-center gap-2" }, ge = { class: "line-clamp-2 min-w-0 text-base font-medium text-heading" }, _e = {
 	key: 1,
 	class: "size-2 shrink-0 rounded-full bg-primary",
 	"aria-hidden": "true"
-}, _e = {
+}, ve = {
 	key: 2,
 	class: "sr-only"
-}, ve = {
+}, ye = {
 	key: 0,
 	class: "mt-1 line-clamp-2 block text-xs text-muted"
-}, ye = { class: "mt-1 flex items-center gap-1.5 text-xs text-muted" }, be = {
+}, be = { class: "mt-1 flex items-center gap-1.5 text-xs text-muted" }, xe = {
 	key: 1,
 	"aria-hidden": "true"
-}, xe = ["datetime", "title"], Se = {
+}, Se = ["datetime", "title"], Ce = {
 	key: 3,
 	class: "shrink-0 border-t border-border p-1.5"
-}, Ce = "[data-notification-item]", we = 6048e5, O = /*@__PURE__*/ f({
+}, we = "[data-notification-item]", Te = 6048e5, O = /*@__PURE__*/ p({
 	__name: "AcNotificationMenu",
-	props: /*@__PURE__*/ m({
+	props: /*@__PURE__*/ h({
 		notifications: { default: () => [] },
 		unreadCount: { default: void 0 },
 		loading: {
@@ -66,13 +67,13 @@ var oe = {
 		},
 		openModifiers: {}
 	}),
-	emits: /*@__PURE__*/ m([
+	emits: /*@__PURE__*/ h([
 		"select",
 		"markAllRead",
 		"viewAll"
 	], ["update:open"]),
-	setup(f, { emit: m }) {
-		let O = f, k = ne(f, "open"), A = m, Te = {
+	setup(p, { emit: h }) {
+		let O = p, k = re(p, "open"), A = h, Ee = {
 			success: "success",
 			succeeded: "success",
 			completed: "success",
@@ -91,7 +92,7 @@ var oe = {
 			inprogress: "info",
 			progressing: "info",
 			info: "info"
-		}, Ee = {
+		}, De = {
 			success: "text-success-strong",
 			danger: "text-danger-strong",
 			warning: "text-warning-strong",
@@ -100,30 +101,30 @@ var oe = {
 		}, j = new Intl.RelativeTimeFormat(void 0, {
 			numeric: "auto",
 			style: "narrow"
-		}), De = new Intl.DateTimeFormat(void 0, {
+		}), Oe = new Intl.DateTimeFormat(void 0, {
 			dateStyle: "medium",
 			timeStyle: "short"
-		}), Oe = new Intl.DateTimeFormat(void 0, {
+		}), ke = new Intl.DateTimeFormat(void 0, {
 			month: "short",
 			day: "numeric"
-		}), M = p()?.appContext.components.RouterLink, N = T(), P = `${N}-panel`, F = `${N}-heading`, I = y(null), L = y(null), R = y({}), z = y(!0), B = y(Date.now()), V, H = a(() => O.unreadCount ?? O.notifications.filter((e) => !e.read).length), ke = a(() => O.notifications.some((e) => !e.read)), Ae = a(() => !!(O.viewAllHref || O.viewAllTo));
-		function je(e) {
-			return e.type ? e.type : Te[(e.status ?? "").toLowerCase().replace(/[^a-z]/g, "")] ?? "neutral";
+		}), M = m()?.appContext.components.RouterLink, N = ne(), P = `${N}-panel`, F = `${N}-heading`, I = b(null), L = b(null), R = b({}), z = b(!0), B = b(Date.now()), V, H = o(() => O.unreadCount ?? O.notifications.filter((e) => !e.read).length), Ae = o(() => O.notifications.some((e) => !e.read)), je = o(() => !!(O.viewAllHref || O.viewAllTo));
+		function Me(e) {
+			return e.type ? e.type : Ee[(e.status ?? "").toLowerCase().replace(/[^a-z]/g, "")] ?? "neutral";
 		}
 		function U(e) {
 			return e instanceof Date ? e.getTime() : typeof e == "number" ? e < 1e11 ? e * 1e3 : e : new Date(e).getTime();
 		}
-		function Me(e) {
+		function Ne(e) {
 			let t = U(e);
 			if (Number.isNaN(t)) return "";
 			let n = t - B.value, r = Math.abs(n);
-			return r < 45e3 ? "Just now" : r >= we ? Oe.format(t) : r < 36e5 ? j.format(Math.round(n / 6e4), "minute") : r < 864e5 ? j.format(Math.round(n / 36e5), "hour") : j.format(Math.round(n / 864e5), "day");
+			return r < 45e3 ? "Just now" : r >= Te ? ke.format(t) : r < 36e5 ? j.format(Math.round(n / 6e4), "minute") : r < 864e5 ? j.format(Math.round(n / 36e5), "hour") : j.format(Math.round(n / 864e5), "day");
 		}
-		function Ne(e) {
+		function Pe(e) {
 			let t = U(e);
-			return Number.isNaN(t) ? "" : De.format(t);
+			return Number.isNaN(t) ? "" : Oe.format(t);
 		}
-		function Pe(e) {
+		function Fe(e) {
 			let t = U(e);
 			return Number.isNaN(t) ? void 0 : new Date(t).toISOString();
 		}
@@ -138,7 +139,7 @@ var oe = {
 			return I.value?.$el ?? null;
 		}
 		function q() {
-			return [...L.value?.querySelectorAll(Ce) ?? []];
+			return [...L.value?.querySelectorAll(we) ?? []];
 		}
 		function J(e) {
 			let t = q();
@@ -147,37 +148,37 @@ var oe = {
 		function Y() {
 			let e = K();
 			if (!e || !L.value) return;
-			let t = e.getBoundingClientRect(), { offsetWidth: n, offsetHeight: r } = L.value, i = window.innerHeight - t.bottom - 6 - 8, a = t.top - 6 - 8, o = i < r && a > i, s = O.align === "end" ? t.right - n : t.left;
-			z.value = !o, R.value = {
-				[o ? "bottom" : "top"]: `${o ? window.innerHeight - t.top + 6 : t.bottom + 6}px`,
-				left: `${Math.max(8, Math.min(s, window.innerWidth - n - 8))}px`,
-				maxHeight: `${Math.max(o ? a : i, 200)}px`
+			let n = e.getBoundingClientRect(), r = t(), { offsetWidth: i, offsetHeight: a } = L.value, o = r.bottom - n.bottom - 6 - 8, s = n.top - r.top - 6 - 8, c = o < a && s > o, l = (O.align === "end" ? n.right - i : n.left) - r.left;
+			z.value = !c, R.value = {
+				[c ? "bottom" : "top"]: `${c ? r.bottom - n.top + 6 : n.bottom + 6 - r.top}px`,
+				left: `${Math.max(8, Math.min(l, r.width - i - 8))}px`,
+				maxHeight: `${Math.max(c ? s : o, 200)}px`
 			};
 		}
 		function X(e = !0) {
 			k.value && (k.value = !1, e && K()?.focus());
 		}
-		function Z() {
+		function Ie() {
 			k.value ? X() : k.value = !0;
 		}
-		function Fe(e) {
+		function Le(e) {
 			A("select", e), X(!1);
 		}
-		function Ie() {
+		function Re() {
 			A("viewAll"), X(!1);
 		}
-		function Le(e) {
+		function ze(e) {
 			e.key !== "ArrowDown" || k.value || (e.preventDefault(), k.value = !0);
 		}
-		function Re(e) {
+		function Z(e) {
 			let t = q(), n = t.indexOf(document.activeElement);
-			(e.key === "ArrowDown" || e.key === "ArrowUp") && t.length ? (e.preventDefault(), J(n < 0 ? e.key === "ArrowDown" ? 0 : -1 : n + (e.key === "ArrowDown" ? 1 : -1))) : (e.key === "Home" || e.key === "End") && n >= 0 ? (e.preventDefault(), J(e.key === "Home" ? 0 : -1)) : e.key === "Escape" ? (e.preventDefault(), X()) : e.key === "Tab" && ze(e);
+			(e.key === "ArrowDown" || e.key === "ArrowUp") && t.length ? (e.preventDefault(), J(n < 0 ? e.key === "ArrowDown" ? 0 : -1 : n + (e.key === "ArrowDown" ? 1 : -1))) : (e.key === "Home" || e.key === "End") && n >= 0 ? (e.preventDefault(), J(e.key === "Home" ? 0 : -1)) : e.key === "Escape" ? (e.preventDefault(), X()) : e.key === "Tab" && Be(e);
 		}
-		function ze(e) {
+		function Be(e) {
 			let t = [...L.value?.querySelectorAll("a[href], button:not([disabled])") ?? []], n = t[0], r = t[t.length - 1];
 			e.shiftKey && (document.activeElement === n || document.activeElement === L.value) ? (e.preventDefault(), X()) : !e.shiftKey && (document.activeElement === r || !t.length) && X();
 		}
-		function Be(e) {
+		function Ve(e) {
 			let t = e.target;
 			K()?.contains(t) || L.value?.contains(t) || X(!1);
 		}
@@ -186,28 +187,28 @@ var oe = {
 		}
 		function $(e) {
 			let t = e ? "addEventListener" : "removeEventListener";
-			document[t]("pointerdown", Be, !0), window[t]("scroll", Q, !0), window[t]("resize", Q), clearInterval(V), e && (V = setInterval(() => B.value = Date.now(), 3e4));
+			document[t]("pointerdown", Ve, !0), window[t]("scroll", Q, !0), window[t]("resize", Q), clearInterval(V), e && (V = setInterval(() => B.value = Date.now(), 3e4));
 		}
 		return E(k, async (e) => {
 			if ($(e), !e) return;
-			B.value = Date.now(), await g(), Y();
+			B.value = Date.now(), await _(), Y();
 			let t = q()[0];
 			t ? t.focus() : L.value?.focus();
-		}), E(() => [O.notifications.length, O.loading], () => k.value && g(Y)), te(() => $(!1)), (a, p) => (v(), c("div", oe, [d(e, {
+		}), E(() => [O.notifications.length, O.loading], () => k.value && _(Y)), te(() => $(!1)), (t, o) => (y(), l("div", se, [f(e, {
 			ref_key: "trigger",
 			ref: I,
-			label: f.label,
-			icon: w(ie),
+			label: p.label,
+			icon: T(ae),
 			"icon-only": "",
 			badge: H.value,
 			"aria-haspopup": "dialog",
 			"aria-expanded": k.value,
 			"aria-controls": k.value ? P : void 0,
-			class: _(k.value && "border-border bg-surface-sunken/50 text-heading"),
+			class: v(k.value && "border-border bg-surface-sunken/50 text-heading"),
 			"data-ac-ds": "",
 			"data-testid": "ac-notification-menu-trigger",
-			onClick: Z,
-			onKeydown: Le
+			onClick: Ie,
+			onKeydown: ze
 		}, null, 8, [
 			"label",
 			"icon",
@@ -215,13 +216,13 @@ var oe = {
 			"aria-expanded",
 			"aria-controls",
 			"class"
-		]), (v(), o(r, { to: "body" }, [d(i, {
+		]), (y(), s(i, { to: "body" }, [f(a, {
 			"enter-active-class": "transition duration-150 ease-out",
 			"enter-from-class": "opacity-0 motion-safe:scale-95",
 			"leave-active-class": "transition duration-100 ease-in",
 			"leave-to-class": "opacity-0"
 		}, {
-			default: D(() => [k.value ? (v(), c("div", {
+			default: D(() => [k.value ? (y(), l("div", {
 				key: 0,
 				id: P,
 				ref_key: "panel",
@@ -229,79 +230,79 @@ var oe = {
 				role: "dialog",
 				tabindex: "-1",
 				"aria-labelledby": F,
-				class: _(["fixed z-[90] flex w-[calc(320px*var(--ac-scale))] max-w-[calc(100vw-16px)] flex-col overflow-hidden rounded-14 border border-border/80 bg-surface shadow-lg outline-none", z.value ? "origin-top-right" : "origin-bottom-right"]),
+				class: v(["fixed z-[90] flex w-[calc(320px*var(--ac-scale))] max-w-[calc(100vw-16px)] flex-col overflow-hidden rounded-14 border border-border/80 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",
-				onKeydown: Re
+				onKeydown: Z
 			}, [
-				l("div", se, [l("h2", {
+				u("div", ce, [u("h2", {
 					id: F,
 					class: "font-heading text-base font-semibold text-heading"
-				}, C(f.label), 1), ke.value || H.value ? (v(), c("button", {
+				}, w(p.label), 1), Ae.value || H.value ? (y(), l("button", {
 					key: 0,
 					type: "button",
 					class: "cursor-pointer rounded-4 text-xs text-muted transition-colors duration-200 hover:text-primary 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) => A("markAllRead")
-				}, [p[1] ||= u(" Mark all as read", -1), H.value ? (v(), c("span", ce, " (" + C(H.value) + " unread)", 1)) : s("", !0)])) : s("", !0)]),
-				f.loading ? (v(), c("div", le, [(v(), c(n, null, b(3, (e) => d(t, {
+					onClick: o[0] ||= (e) => A("markAllRead")
+				}, [o[1] ||= d(" Mark all as read", -1), H.value ? (y(), l("span", le, " (" + w(H.value) + " unread)", 1)) : c("", !0)])) : c("", !0)]),
+				p.loading ? (y(), l("div", ue, [(y(), l(r, null, x(3, (e) => f(n, {
 					key: e,
 					shape: "text",
 					lines: 3,
 					height: "10px",
 					label: ""
-				})), 64))])) : f.notifications.length ? (v(), c("ul", pe, [(v(!0), c(n, null, b(f.notifications, (e) => (v(), c("li", { key: e.id }, [(v(), o(S(W(e.to, e.href)), h({ ref_for: !0 }, G(e.to, e.href), {
+				})), 64))])) : p.notifications.length ? (y(), l("ul", me, [(y(!0), l(r, null, x(p.notifications, (e) => (y(), l("li", { key: e.id }, [(y(), s(C(W(e.to, e.href)), g({ ref_for: !0 }, G(e.to, e.href), {
 					"data-notification-item": "",
 					class: ["relative block w-full cursor-pointer p-3 text-left no-underline outline-none transition-colors duration-200 hover:bg-surface-sunken focus-visible:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", !e.read && "bg-primary/8"],
 					"data-ac-ds": "",
 					"data-testid": "ac-notification-menu-item",
-					onClick: (t) => Fe(e)
+					onClick: (t) => Le(e)
 				}), {
-					default: D(() => [x(a.$slots, "item", { item: e }, () => [
-						l("span", me, [
-							e.icon ? (v(), o(S(e.icon), {
+					default: D(() => [S(t.$slots, "item", { item: e }, () => [
+						u("span", he, [
+							e.icon ? (y(), s(C(e.icon), {
 								key: 0,
 								class: "size-4 shrink-0 text-muted",
 								"aria-hidden": "true"
-							})) : s("", !0),
-							l("span", he, C(e.title || e.msg), 1),
-							e.read ? s("", !0) : (v(), c("span", ge)),
-							e.read ? s("", !0) : (v(), c("span", _e, "(unread)"))
+							})) : c("", !0),
+							u("span", ge, w(e.title || e.msg), 1),
+							e.read ? c("", !0) : (y(), l("span", _e)),
+							e.read ? c("", !0) : (y(), l("span", ve, "(unread)"))
 						]),
-						e.title && e.msg ? (v(), c("span", ve, C(e.msg), 1)) : s("", !0),
-						l("span", ye, [
-							e.status ? (v(), c("span", {
+						e.title && e.msg ? (y(), l("span", ye, w(e.msg), 1)) : c("", !0),
+						u("span", be, [
+							e.status ? (y(), l("span", {
 								key: 0,
-								class: _(["font-medium", Ee[je(e)]])
-							}, C(e.status), 3)) : s("", !0),
-							e.status ? (v(), c("span", be, "·")) : s("", !0),
-							l("time", {
-								datetime: Pe(e.time),
-								title: Ne(e.time)
-							}, C(Me(e.time)), 9, xe)
+								class: v(["font-medium", De[Me(e)]])
+							}, w(e.status), 3)) : c("", !0),
+							e.status ? (y(), l("span", xe, "·")) : c("", !0),
+							u("time", {
+								datetime: Fe(e.time),
+								title: Pe(e.time)
+							}, w(Ne(e.time)), 9, Se)
 						])
 					])]),
 					_: 2
-				}, 1040, ["class", "onClick"]))]))), 128))])) : (v(), c("div", ue, [x(a.$slots, "empty", {}, () => [
-					l("span", de, [d(w(ae), { class: "size-6" })]),
-					l("p", fe, C(f.emptyText), 1),
-					p[2] ||= l("p", { class: "max-w-64 text-base text-muted" }, "Backups, upgrades and alerts from your clusters show up here.", -1)
+				}, 1040, ["class", "onClick"]))]))), 128))])) : (y(), l("div", de, [S(t.$slots, "empty", {}, () => [
+					u("span", fe, [f(T(oe), { class: "size-6" })]),
+					u("p", pe, w(p.emptyText), 1),
+					o[2] ||= u("p", { class: "max-w-64 text-base text-muted" }, "Backups, upgrades and alerts from your clusters show up here.", -1)
 				])])),
-				a.$slots.footer || Ae.value ? (v(), c("div", Se, [x(a.$slots, "footer", { close: X }, () => [(v(), o(S(W(f.viewAllTo, f.viewAllHref)), h(G(f.viewAllTo, f.viewAllHref), {
+				t.$slots.footer || je.value ? (y(), l("div", Ce, [S(t.$slots, "footer", { close: X }, () => [(y(), s(C(W(p.viewAllTo, p.viewAllHref)), g(G(p.viewAllTo, p.viewAllHref), {
 					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-surface-sunken focus-visible:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
 					"data-ac-ds": "",
 					"data-testid": "ac-notification-menu-view-all",
-					onClick: Ie
+					onClick: Re
 				}), {
-					default: D(() => [u(C(f.viewAllLabel) + " ", 1), d(w(re), {
+					default: D(() => [d(w(p.viewAllLabel) + " ", 1), f(T(ie), {
 						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)]),
+				}, 16))])])) : c("", !0)
+			], 38)) : c("", !0)]),
 			_: 3
 		})]))]));
 	}

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

@@ -59,9 +59,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
     min: number;
     name: string;
     size: "small" | "normal";
+    hint: string;
     step: number;
     readonly: boolean;
-    hint: string;
     errorMsg: string;
     unit: string;
     precision: number;

package/dist/lib/components/AcRadioCard.js

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

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

@@ -0,0 +1,55 @@
+export interface Props<V> {
+    /** Native radio `name`, used as given. Cards with the same `name` form one group: arrow keys move between them. Old cloud-ui `group`. */
+    name: string;
+    /** The value this card writes to `v-model` when it's selected. */
+    value: V;
+    /** Bold line at the top of the card. */
+    title?: string;
+    /** Muted text under the title. */
+    description?: string;
+    /** Greys the card out and stops it from being selected. */
+    disabled?: boolean;
+    /** Shows an 18px radio before the content instead of the check badge in the corner. Old cloud-ui `is-radio-show`. */
+    showRadio?: boolean;
+    /** Classes for the title, replacing `text-base font-semibold text-heading`, e.g. `text-lg font-semibold text-heading`. */
+    titleClass?: string;
+    /** Classes for the description, replacing `mt-0.5 text-xs leading-relaxed text-muted`. */
+    descriptionClass?: string;
+}
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props<T> & {
+        modelValue?: T;
+    }) & {
+        "onUpdate:modelValue"?: ((value: T | undefined) => any) | undefined;
+        onChange?: ((value: T) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        /** Moves focus to the radio. */
+        focus: () => void | undefined;
+    }>) => void;
+    attrs: any;
+    slots: {
+        /** Replaces the whole card body (icon, title, description, features and right content). The radio and selection styles stay. Old cloud-ui `is-custom` with `#custom`. */
+        default?: () => unknown;
+        /** Icon or logo tile before the title. */
+        icon?: () => unknown;
+        /** Content after the title on the same line, e.g. a "Recommended" pill. Old cloud-ui `#subTitle`. */
+        subtitle?: () => unknown;
+        /** Pills under the description, e.g. "HA" or "PITR". */
+        features?: () => unknown;
+        /** Content on the right of the card, e.g. a price. Below 768px it moves under the text. Hides the check badge, so pair it with `show-radio`. Old cloud-ui `#rightContent`. */
+        right?: () => unknown;
+    };
+    emit: ((evt: "change", value: T) => void) & ((event: "update:modelValue", value: T | undefined) => void);
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};