@ac-design/design-system 1.0.3 → 2.1.0

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

@@ -1,50 +1,50 @@
 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 ne, useModel as re, watch as T, withCtx as E } from "vue";
-import { ArrowRight as ie, Bell as ae, BellOff as oe, CheckCheck as se, CircleCheck as ce, CircleX as le, Info as ue, LoaderCircle as de, TriangleAlert as fe } from "@lucide/vue";
+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";
 //#region src/lib/components/AcNotificationMenu.vue?vue&type=script&setup=true&lang.ts
-var pe = {
+var oe = {
 	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 = {
+}, se = { class: "flex shrink-0 items-center justify-between gap-2 border-b border-border p-3" }, ce = {
 	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"
-}, ge = {
+	class: "sr-only"
+}, le = {
 	key: 0,
-	class: "flex flex-col gap-4 px-4 py-4",
+	class: "flex flex-col gap-4 p-3",
 	"aria-busy": "true",
 	role: "status",
 	"aria-label": "Loading notifications"
-}, _e = {
+}, ue = {
 	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",
+}, de = {
+	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 = {
+}, fe = { class: "text-lg font-semibold text-heading" }, pe = {
 	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"
-}, Ce = { class: "mt-1 flex items-center gap-1.5 text-xs text-muted" }, we = {
+}, me = { class: "flex items-center gap-2" }, he = { class: "line-clamp-2 min-w-0 text-base font-medium text-heading" }, ge = {
 	key: 1,
+	class: "size-2 shrink-0 rounded-full bg-primary",
 	"aria-hidden": "true"
-}, Te = ["datetime", "title"], Ee = {
+}, _e = {
+	key: 2,
+	class: "sr-only"
+}, ve = {
 	key: 0,
-	class: "mt-2 size-2 shrink-0 rounded-full bg-primary",
-	"aria-hidden": "true"
-}, De = {
+	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 = {
 	key: 1,
-	class: "sr-only"
-}, Oe = {
+	"aria-hidden": "true"
+}, xe = ["datetime", "title"], Se = {
 	key: 3,
-	class: "shrink-0 border-t border-border-light p-1"
-}, ke = "[data-notification-item]", Ae = 6048e5, D = /*@__PURE__*/ f({
+	class: "shrink-0 border-t border-border p-1.5"
+}, Ce = "[data-notification-item]", we = 6048e5, O = /*@__PURE__*/ f({
 	__name: "AcNotificationMenu",
 	props: /*@__PURE__*/ m({
 		notifications: { default: () => [] },
@@ -72,7 +72,7 @@ var pe = {
 		"viewAll"
 	], ["update:open"]),
 	setup(f, { emit: m }) {
-		let D = f, O = re(f, "open"), k = m, je = {
+		let O = f, k = ne(f, "open"), A = m, Te = {
 			success: "success",
 			succeeded: "success",
 			completed: "success",
@@ -91,143 +91,123 @@ var pe = {
 			inprogress: "info",
 			progressing: "info",
 			info: "info"
-		}, A = {
-			success: {
-				icon: ce,
-				tile: "bg-green-95 text-green-40",
-				text: "text-green-30"
-			},
-			danger: {
-				icon: le,
-				tile: "bg-red-95 text-red-40",
-				text: "text-red-30"
-			},
-			warning: {
-				icon: fe,
-				tile: "bg-yellow-95 text-yellow-40",
-				text: "text-yellow-30"
-			},
-			info: {
-				icon: de,
-				tile: "bg-blue-95 text-blue-40",
-				text: "text-blue-30"
-			},
-			neutral: {
-				icon: ue,
-				tile: "bg-slate-90 text-label",
-				text: "text-muted"
-			}
+		}, Ee = {
+			success: "text-success-strong",
+			danger: "text-danger-strong",
+			warning: "text-warning-strong",
+			info: "text-info-strong",
+			neutral: "text-muted"
 		}, j = new Intl.RelativeTimeFormat(void 0, {
 			numeric: "auto",
 			style: "narrow"
-		}), Me = new Intl.DateTimeFormat(void 0, {
+		}), De = new Intl.DateTimeFormat(void 0, {
 			dateStyle: "medium",
 			timeStyle: "short"
-		}), Ne = new Intl.DateTimeFormat(void 0, {
+		}), Oe = new Intl.DateTimeFormat(void 0, {
 			month: "short",
 			day: "numeric"
-		}), M = p()?.appContext.components.RouterLink, N = ne(), P = `${N}-panel`, F = `${N}-heading`, I = y(null), L = y(null), R = y({}), z = y(!0), B = y(Date.now()), V, H = a(() => D.unreadCount ?? D.notifications.filter((e) => !e.read).length), Pe = a(() => D.notifications.some((e) => !e.read)), Fe = a(() => !!(D.viewAllHref || D.viewAllTo));
-		function U(e) {
-			return e.type ? e.type : je[(e.status ?? "").toLowerCase().replace(/[^a-z]/g, "")] ?? "neutral";
+		}), 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";
 		}
-		function W(e) {
+		function U(e) {
 			return e instanceof Date ? e.getTime() : typeof e == "number" ? e < 1e11 ? e * 1e3 : e : new Date(e).getTime();
 		}
-		function Ie(e) {
-			let t = W(e);
+		function Me(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 >= Ae ? Ne.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 >= 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");
 		}
-		function Le(e) {
-			let t = W(e);
-			return Number.isNaN(t) ? "" : Me.format(t);
+		function Ne(e) {
+			let t = U(e);
+			return Number.isNaN(t) ? "" : De.format(t);
 		}
-		function Re(e) {
-			let t = W(e);
+		function Pe(e) {
+			let t = U(e);
 			return Number.isNaN(t) ? void 0 : new Date(t).toISOString();
 		}
-		function G(e, t) {
+		function W(e, t) {
 			return e && M ? M : e || t ? "a" : "button";
 		}
-		function K(e, t) {
-			let n = G(e, t);
+		function G(e, t) {
+			let n = W(e, t);
 			return n === M ? { to: e } : n === "a" ? { href: t || (typeof e == "string" ? e : void 0) } : { type: "button" };
 		}
-		function q() {
+		function K() {
 			return I.value?.$el ?? null;
 		}
-		function J() {
-			return [...L.value?.querySelectorAll(ke) ?? []];
+		function q() {
+			return [...L.value?.querySelectorAll(Ce) ?? []];
 		}
-		function Y(e) {
-			let t = J();
+		function J(e) {
+			let t = q();
 			t.length && t[(e + t.length) % t.length].focus();
 		}
-		function X() {
-			let e = q();
+		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 = D.align === "end" ? t.right - n : t.left;
+			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`
 			};
 		}
-		function Z(e = !0) {
-			O.value && (O.value = !1, e && q()?.focus());
+		function X(e = !0) {
+			k.value && (k.value = !1, e && K()?.focus());
 		}
-		function ze() {
-			O.value ? Z() : O.value = !0;
+		function Z() {
+			k.value ? X() : k.value = !0;
 		}
-		function Be(e) {
-			k("select", e), Z(!1);
+		function Fe(e) {
+			A("select", e), X(!1);
 		}
-		function Ve() {
-			k("viewAll"), Z(!1);
+		function Ie() {
+			A("viewAll"), X(!1);
 		}
-		function He(e) {
-			e.key !== "ArrowDown" || O.value || (e.preventDefault(), O.value = !0);
+		function Le(e) {
+			e.key !== "ArrowDown" || k.value || (e.preventDefault(), k.value = !0);
 		}
-		function Ue(e) {
-			let t = J(), n = t.indexOf(document.activeElement);
-			(e.key === "ArrowDown" || e.key === "ArrowUp") && t.length ? (e.preventDefault(), Y(n < 0 ? e.key === "ArrowDown" ? 0 : -1 : n + (e.key === "ArrowDown" ? 1 : -1))) : (e.key === "Home" || e.key === "End") && n >= 0 ? (e.preventDefault(), Y(e.key === "Home" ? 0 : -1)) : e.key === "Escape" ? (e.preventDefault(), Z()) : e.key === "Tab" && We(e);
+		function Re(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);
 		}
-		function We(e) {
+		function ze(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(), Z()) : !e.shiftKey && (document.activeElement === r || !t.length) && Z();
+			e.shiftKey && (document.activeElement === n || document.activeElement === L.value) ? (e.preventDefault(), X()) : !e.shiftKey && (document.activeElement === r || !t.length) && X();
 		}
-		function Ge(e) {
+		function Be(e) {
 			let t = e.target;
-			q()?.contains(t) || L.value?.contains(t) || Z(!1);
+			K()?.contains(t) || L.value?.contains(t) || X(!1);
 		}
 		function Q(e) {
-			e && L.value?.contains(e.target) || X();
+			e?.target instanceof Node && L.value?.contains(e.target) || Y();
 		}
 		function $(e) {
 			let t = e ? "addEventListener" : "removeEventListener";
-			document[t]("pointerdown", Ge, !0), window[t]("scroll", Q, !0), window[t]("resize", Q), clearInterval(V), e && (V = setInterval(() => B.value = Date.now(), 3e4));
+			document[t]("pointerdown", Be, !0), window[t]("scroll", Q, !0), window[t]("resize", Q), clearInterval(V), e && (V = setInterval(() => B.value = Date.now(), 3e4));
 		}
-		return T(O, async (e) => {
+		return E(k, async (e) => {
 			if ($(e), !e) return;
-			B.value = Date.now(), await g(), X();
-			let t = J()[0];
+			B.value = Date.now(), await g(), Y();
+			let t = q()[0];
 			t ? t.focus() : L.value?.focus();
-		}), T(() => [D.notifications.length, D.loading], () => O.value && g(X)), te(() => $(!1)), (a, p) => (v(), c("div", pe, [d(e, {
+		}), E(() => [O.notifications.length, O.loading], () => k.value && g(Y)), te(() => $(!1)), (a, p) => (v(), c("div", oe, [d(e, {
 			ref_key: "trigger",
 			ref: I,
 			label: f.label,
-			icon: w(ae),
+			icon: w(ie),
 			"icon-only": "",
 			badge: H.value,
 			"aria-haspopup": "dialog",
-			"aria-expanded": O.value,
-			"aria-controls": O.value ? P : void 0,
-			class: _(O.value && "bg-surface-sunken text-heading"),
+			"aria-expanded": k.value,
+			"aria-controls": k.value ? P : void 0,
+			class: _(k.value && "border-border bg-surface-sunken/50 text-heading"),
 			"data-ac-ds": "",
 			"data-testid": "ac-notification-menu-trigger",
-			onClick: ze,
-			onKeydown: He
+			onClick: Z,
+			onKeydown: Le
 		}, null, 8, [
 			"label",
 			"icon",
@@ -237,11 +217,11 @@ 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"
 		}, {
-			default: E(() => [O.value ? (v(), c("div", {
+			default: D(() => [k.value ? (v(), c("div", {
 				key: 0,
 				id: P,
 				ref_key: "panel",
@@ -249,97 +229,82 @@ 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(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: Ue
+				onKeydown: Re
 			}, [
-				l("div", me, [
-					l("h2", {
-						id: F,
-						class: "text-lg font-semibold tracking-normal 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",
-						"data-ac-ds": "",
-						"data-testid": "ac-notification-menu-mark-all",
-						onClick: p[0] ||= (e) => k("markAllRead")
-					}, [d(w(se), {
-						class: "size-3.5",
-						"aria-hidden": "true"
-					}), p[2] ||= u(" Mark all as read ", -1)])) : s("", !0)
-				]),
-				f.loading ? (v(), c("div", ge, [(v(), c(n, null, b(3, (e) => l("div", {
+				l("div", se, [l("h2", {
+					id: F,
+					class: "font-heading text-base font-semibold text-heading"
+				}, C(f.label), 1), ke.value || H.value ? (v(), c("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, {
 					key: e,
-					class: "flex gap-3"
-				}, [d(t, {
-					shape: "rect",
-					width: "28px",
-					height: "28px",
-					label: "",
-					class: "shrink-0"
-				}), d(t, {
 					shape: "text",
-					lines: 2,
+					lines: 3,
 					height: "10px",
-					label: "",
-					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), {
+					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), {
 					"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 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) => Be(e)
+					onClick: (t) => Fe(e)
 				}), {
-					default: E(() => [x(a.$slots, "item", { item: e }, () => [
-						l("span", {
-							class: _(["mt-0.5 inline-flex size-7 shrink-0 items-center justify-center rounded-8", A[U(e)].tile]),
-							"aria-hidden": "true"
-						}, [(v(), o(S(e.icon ?? A[U(e)].icon), { class: "size-4" }))], 2),
-						l("span", xe, [
-							l("span", { class: _(["line-clamp-2 text-base text-heading", !e.read && "font-medium"]) }, C(e.title || e.msg), 3),
-							e.title && e.msg ? (v(), c("span", Se, C(e.msg), 1)) : s("", !0),
-							l("span", Ce, [
-								e.status ? (v(), c("span", {
-									key: 0,
-									class: _(["font-medium", A[U(e)].text])
-								}, C(e.status), 3)) : s("", !0),
-								e.status ? (v(), c("span", we, "·")) : s("", !0),
-								l("time", {
-									datetime: Re(e.time),
-									title: Le(e.time)
-								}, C(Ie(e.time)), 9, Te)
-							])
+					default: D(() => [x(a.$slots, "item", { item: e }, () => [
+						l("span", me, [
+							e.icon ? (v(), o(S(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)"))
 						]),
-						e.read ? s("", !0) : (v(), c("span", Ee)),
-						e.read ? s("", !0) : (v(), c("span", De, "(unread)"))
+						e.title && e.msg ? (v(), c("span", ve, C(e.msg), 1)) : s("", !0),
+						l("span", ye, [
+							e.status ? (v(), c("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)
+						])
 					])]),
 					_: 2
-				}, 1040, ["class", "onClick"]))]))), 128))])) : (v(), c("div", _e, [x(a.$slots, "empty", {}, () => [
-					l("span", ve, [d(w(oe), { class: "size-4.5" })]),
-					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)
+				}, 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)
 				])])),
-				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",
+				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), {
+					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: Ve
+					onClick: Ie
 				}), {
-					default: E(() => [u(C(f.viewAllLabel) + " ", 1), d(w(ie), {
-						class: "size-3.5",
+					default: D(() => [u(C(f.viewAllLabel) + " ", 1), d(w(re), {
+						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
-export { D as default };
+export { O as default };

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

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

@@ -0,0 +1,79 @@
+export interface Props {
+    /** Label above the field. Without one, pass `aria-label` so the field still has a name. */
+    label?: string;
+    /** Native `name` attribute. */
+    name?: string;
+    /** Lowest allowed value. ↓, − and Home stop here, and typed values are clamped to it on blur. No limit by default. */
+    min?: number;
+    /** Highest allowed value. ↑, + and End stop here, and typed values are clamped to it on blur. No limit by default. */
+    max?: number;
+    /** Amount one − / + press or one ↑ / ↓ adds. Page Up / Page Down move 10 steps. Its decimals set the precision, e.g. `0.1` keeps one decimal. */
+    step?: number;
+    /** Decimal places to keep. Defaults to the decimals in `step`; values are rounded to it on blur. */
+    precision?: number;
+    /** Unit shown after the value, e.g. `GiB`, `vCPU` or `%`. Also read out with the value. */
+    unit?: string;
+    /** Shows bordered − and + buttons on either side of the field. Off by default, like cloud-ui. Cloud `is-show-inc-dec`. */
+    stepButtons?: boolean;
+    /** Milliseconds a − / + press is held before it starts repeating. */
+    holdDelay?: number;
+    /** Milliseconds between repeats while − / + is held. */
+    holdIntervalDelay?: number;
+    /** Marks the field required and adds a red asterisk. */
+    required?: boolean;
+    /** Disables the field and its buttons. */
+    disabled?: boolean;
+    /** Read-only field: a muted fill, "(read only)" after the label, and no stepping. */
+    readonly?: boolean;
+    /** Error text under the field. Turns the border red and sets `aria-invalid`. */
+    errorMsg?: string;
+    /** Help text between the label and the field. */
+    hint?: string;
+    /** `small` 36px or `normal` 42px tall, the same as `AcInput`; the step buttons match. */
+    size?: "small" | "normal";
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Content inside the field after the value, before the buttons: an icon or richer unit text. */
+    suffix?: () => unknown;
+};
+type __VLS_ModelProps = {
+    /** The number, or `null` while the field is empty. */
+    modelValue?: number | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    /** Moves focus to the input. */
+    focus: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number | null) => any;
+    change: (value: number | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | null) => any) | undefined;
+    onChange?: ((value: number | null) => any) | undefined;
+}>, {
+    required: boolean;
+    label: string;
+    disabled: boolean;
+    max: number;
+    min: number;
+    name: string;
+    size: "small" | "normal";
+    step: number;
+    readonly: boolean;
+    hint: string;
+    errorMsg: string;
+    unit: string;
+    precision: number;
+    stepButtons: boolean;
+    holdDelay: number;
+    holdIntervalDelay: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};