@nubisco/ui 4.1.1 → 4.1.3

package/dist/{NotificationCenter-CrwDwpt6.js → NotificationCenter-DL_Tshyb.js}

@@ -6,22 +6,23 @@ import { t as i } from "./Skeleton-CC7LVdxd.js";
 import { t as a } from "./NotificationCenterItem-ZkLsiQIV.js";
 import { Fragment as o, Teleport as s, Transition as c, computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as ee, createTextVNode as te, createVNode as m, defineComponent as h, mergeProps as ne, nextTick as g, normalizeClass as re, normalizeStyle as _, onBeforeUnmount as ie, openBlock as v, ref as y, renderList as ae, renderSlot as b, toDisplayString as x, unref as oe, useId as se, useSlots as ce, watch as S, withCtx as C } from "vue";
 import { regular as le } from "@nubisco/ui/icons/warning-circle";
+import * as ue from "@nubisco/ui/icons/bell";
 //#region src/components/NotificationCenter.vue?vue&type=script&setup=true&lang.ts
-var ue = {
+var de = {
 	key: 0,
 	class: "nb-notification-center__badge",
 	"aria-hidden": "true"
-}, de = ["aria-describedby", "aria-busy"], fe = { class: "nb-notification-center__header" }, pe = {
+}, fe = ["aria-describedby", "aria-busy"], pe = { class: "nb-notification-center__header" }, me = {
 	class: "nb-notification-center__sr",
 	role: "status"
-}, me = { class: "nb-notification-center__stale-text" }, he = { class: "nb-notification-center__sr" }, ge = ["tabindex"], _e = {
+}, he = { class: "nb-notification-center__stale-text" }, ge = { class: "nb-notification-center__sr" }, _e = ["tabindex"], ve = {
 	key: 4,
 	class: "nb-notification-center__empty"
-}, ve = {
+}, ye = {
 	key: 5,
 	class: "nb-notification-center__footer"
 }, w = /* @__PURE__ */ new Set(), T = 8, E = 8, D = 96, O = 88, k = 200;
-function ye(e, { align: t, width: n, maxHeight: r, viewport: i }) {
+function be(e, { align: t, width: n, maxHeight: r, viewport: i }) {
 	let a = t === "start" ? e.left : e.left + e.width - n, o = Math.min(Math.max(a, E), Math.max(E, i.width - n - E)), s = e.top + e.height, c = i.height - s - T - E, l = e.top - T - E, u = c < k && l > c ? "top" : "bottom", d = Math.max(O, u === "top" ? l : c), f = Math.max(O, Math.min(r, d - D)), p = Math.min(r + D, d);
 	return {
 		top: u === "top" ? Math.max(E, e.top - T - p) : s + T,
@@ -30,7 +31,7 @@ function ye(e, { align: t, width: n, maxHeight: r, viewport: i }) {
 		maxListHeight: f
 	};
 }
-function be(e, t) {
+function xe(e, t) {
 	return e.left <= t.width && e.left + e.width >= 0 && e.top <= t.height && e.top + e.height >= 0;
 }
 //#endregion
@@ -95,7 +96,7 @@ var A = /* @__PURE__ */ h({
 			type: Boolean,
 			default: !1
 		},
-		icon: { default: "bell" },
+		icon: { default: void 0 },
 		locale: { default: void 0 },
 		unreadLabel: { default: "Unread" },
 		readLabel: { default: "Read" },
@@ -113,328 +114,328 @@ var A = /* @__PURE__ */ h({
 		"retry"
 	],
 	setup(h, { expose: T, emit: E }) {
-		let D = h, O = E, k = ce(), A = `nb-notification-center-${se()}`, xe = `${A}-title`, Se = `${A}-trigger`, j = `${A}-error`, M = y(null), Ce = y(null), N = y(null), P = y(null), we = y(!1), F = l(() => D.open === void 0 ? we.value : D.open), I = l(() => typeof D.unreadCount == "number" ? Math.max(0, D.unreadCount) : D.items.filter((e) => !e.read).length), Te = l(() => I.value > D.maxCount ? `${D.maxCount}+` : String(I.value)), Ee = l(() => I.value > 0 ? `${D.label}, ${D.formatUnread(I.value)}` : D.label), De = l(() => {
+		let D = h, O = l(() => D.icon ?? ue), k = E, A = ce(), j = `nb-notification-center-${se()}`, Se = `${j}-title`, Ce = `${j}-trigger`, M = `${j}-error`, N = y(null), we = y(null), P = y(null), F = y(null), Te = y(!1), I = l(() => D.open === void 0 ? Te.value : D.open), L = l(() => typeof D.unreadCount == "number" ? Math.max(0, D.unreadCount) : D.items.filter((e) => !e.read).length), Ee = l(() => L.value > D.maxCount ? `${D.maxCount}+` : String(L.value)), De = l(() => L.value > 0 ? `${D.label}, ${D.formatUnread(L.value)}` : D.label), Oe = l(() => {
 			if (typeof D.itemCount == "number") return Math.max(0, D.itemCount);
-			if (!k.default) return D.items.length;
-		}), Oe = l(() => (De.value ?? 0) > 0), L = l(() => {
+			if (!A.default) return D.items.length;
+		}), ke = l(() => (Oe.value ?? 0) > 0), R = l(() => {
 			if (D.loading) return "loading";
-			let e = De.value;
+			let e = Oe.value;
 			return D.error && (e === void 0 || e === 0) ? "error" : e === void 0 || e > 0 ? "list" : "empty";
-		}), ke = l(() => D.error && !D.loading && L.value === "list" && Oe.value);
+		}), Ae = l(() => D.error && !D.loading && R.value === "list" && ke.value);
 		y(!1), S(() => [
-			F.value,
-			!!k.default,
+			I.value,
+			!!A.default,
 			D.itemCount
 		], ([e, t, n]) => {}, { immediate: !0 });
-		function R() {
-			O("retry");
+		function z() {
+			k("retry");
 		}
-		let Ae = l(() => ({
-			id: Se,
+		let je = l(() => ({
+			id: Ce,
 			"aria-haspopup": "dialog",
-			"aria-expanded": F.value ? "true" : "false",
-			"aria-controls": F.value ? A : void 0,
-			"aria-label": Ee.value,
+			"aria-expanded": I.value ? "true" : "false",
+			"aria-controls": I.value ? j : void 0,
+			"aria-label": De.value,
 			disabled: D.disabled || void 0
-		})), je = l(() => ({
+		})), Me = l(() => ({
 			type: "button",
-			disabled: I.value === 0 && !D.markAllPending,
+			disabled: L.value === 0 && !D.markAllPending,
 			"aria-disabled": D.markAllPending ? "true" : void 0,
 			"aria-busy": D.markAllPending ? "true" : void 0,
-			onClick: Qe
-		})), Me = l(() => ke.value || L.value === "error" ? j : void 0);
-		function Ne(e) {
+			onClick: $e
+		})), Ne = l(() => Ae.value || R.value === "error" ? M : void 0);
+		function Pe(e) {
 			if (!e) {
-				N.value = null;
+				P.value = null;
 				return;
 			}
 			let t = e instanceof HTMLElement ? e : e.$el;
-			N.value = t instanceof HTMLElement ? t : null;
+			P.value = t instanceof HTMLElement ? t : null;
 		}
-		let z = y({
+		let B = y({
 			top: 0,
 			left: 0,
 			side: "bottom",
 			maxListHeight: D.maxHeight
 		});
-		function Pe() {
+		function Fe() {
 			return {
 				width: window.innerWidth,
 				height: window.innerHeight
 			};
 		}
-		function B() {
-			let e = M.value?.getBoundingClientRect();
-			e && (z.value = ye(e, {
+		function V() {
+			let e = N.value?.getBoundingClientRect();
+			e && (B.value = be(e, {
 				align: D.align,
 				width: D.width,
 				maxHeight: D.maxHeight,
-				viewport: Pe()
+				viewport: Fe()
 			}));
 		}
-		let Fe = l(() => ({
-			top: `${Math.round(z.value.top)}px`,
-			left: `${Math.round(z.value.left)}px`,
+		let Ie = l(() => ({
+			top: `${Math.round(B.value.top)}px`,
+			left: `${Math.round(B.value.left)}px`,
 			width: `${D.width}px`
-		})), Ie = l(() => ({ maxHeight: `${Math.round(z.value.maxListHeight)}px` })), Le = l(() => ({
+		})), Le = l(() => ({ maxHeight: `${Math.round(B.value.maxListHeight)}px` })), Re = l(() => ({
 			"nb-notification-center__panel--start": D.align === "start",
-			"nb-notification-center__panel--above": z.value.side === "top"
+			"nb-notification-center__panel--above": B.value.side === "top"
 		}));
-		function Re(e) {
-			D.open === void 0 && (we.value = e), O("update:open", e);
+		function ze(e) {
+			D.open === void 0 && (Te.value = e), k("update:open", e);
 		}
-		function V() {
-			D.disabled || F.value || (B(), Re(!0), O("open"));
+		function H() {
+			D.disabled || I.value || (V(), ze(!0), k("open"));
 		}
-		function H(e = {}) {
-			if (!F.value) return;
-			let t = P.value?.contains(document.activeElement);
-			Re(!1), O("close"), (e.restoreFocus ?? t) && g(ze);
+		function U(e = {}) {
+			if (!I.value) return;
+			let t = F.value?.contains(document.activeElement);
+			ze(!1), k("close"), (e.restoreFocus ?? t) && g(Be);
 		}
-		function ze() {
-			let e = N.value;
+		function Be() {
+			let e = P.value;
 			if (e?.isConnected) {
 				e.focus();
 				return;
 			}
-			(M.value?.querySelector(J))?.focus();
+			(N.value?.querySelector(Y))?.focus();
 		}
-		function U() {
-			F.value ? H({ restoreFocus: !0 }) : V();
+		function W() {
+			I.value ? U({ restoreFocus: !0 }) : H();
 		}
-		let W = y(0), Be = new Set([
+		let G = y(0), Ve = new Set([
 			"button",
 			"link",
 			"menuitem",
 			"option"
 		]);
-		function Ve(e) {
+		function He(e) {
 			if (e.tagName === "BUTTON") return !e.hasAttribute("disabled");
 			if (e.tagName === "A") return e.hasAttribute("href");
 			let t = e.getAttribute("role");
-			return t !== null && Be.has(t);
+			return t !== null && Ve.has(t);
 		}
-		function G() {
-			return P.value ? Array.from(P.value.querySelectorAll("[data-nb-notification-item]")).filter((e) => !!Ve(e)) : [];
+		function K() {
+			return F.value ? Array.from(F.value.querySelectorAll("[data-nb-notification-item]")).filter((e) => !!He(e)) : [];
 		}
-		let He = y(void 0);
-		function Ue(e) {
-			let t = Ce.value;
-			He.value = t && t.childElementCount > 0 && e.length === 0 ? 0 : void 0;
+		let Ue = y(void 0);
+		function We(e) {
+			let t = we.value;
+			Ue.value = t && t.childElementCount > 0 && e.length === 0 ? 0 : void 0;
 		}
-		function K(e) {
-			let t = G();
-			Ue(t), t.length && (W.value = Math.min(Math.max(e, 0), t.length - 1), t.forEach((e, t) => {
-				e.setAttribute("tabindex", t === W.value ? "0" : "-1");
+		function q(e) {
+			let t = K();
+			We(t), t.length && (G.value = Math.min(Math.max(e, 0), t.length - 1), t.forEach((e, t) => {
+				e.setAttribute("tabindex", t === G.value ? "0" : "-1");
 			}));
 		}
-		function q(e) {
-			let t = G();
+		function J(e) {
+			let t = K();
 			if (!t.length) return !1;
 			let n = Math.min(Math.max(e, 0), t.length - 1);
-			return K(n), t[n]?.focus(), !0;
+			return q(n), t[n]?.focus(), !0;
 		}
-		function We(e) {
+		function Ge(e) {
 			let t = e.target?.closest("[data-nb-notification-item]");
 			if (!t) return;
-			let n = G().indexOf(t);
-			n >= 0 && K(n);
+			let n = K().indexOf(t);
+			n >= 0 && q(n);
 		}
-		let J = "a[href]:not([tabindex=\"-1\"]), button:not([disabled]):not([tabindex=\"-1\"]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex=\"0\"]";
-		function Ge(e) {
+		let Y = "a[href]:not([tabindex=\"-1\"]), button:not([disabled]):not([tabindex=\"-1\"]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex=\"0\"]";
+		function Ke(e) {
 			return !!e?.closest?.("input, textarea, select, [contenteditable=\"\"], [contenteditable=\"true\"]");
 		}
-		function Ke(e) {
-			let t = G(), n = e.target?.closest("[data-nb-notification-item]"), r = n ? t.indexOf(n) : -1;
+		function qe(e) {
+			let t = K(), n = e.target?.closest("[data-nb-notification-item]"), r = n ? t.indexOf(n) : -1;
 			if (e.key === "Escape") {
-				if (!qe(e)) return;
-				e.preventDefault(), e.stopPropagation(), H({ restoreFocus: !0 });
+				if (!Je(e)) return;
+				e.preventDefault(), e.stopPropagation(), U({ restoreFocus: !0 });
 				return;
 			}
 			if (e.key === "Tab") {
-				Je(e);
+				Ye(e);
 				return;
 			}
-			if (!Ge(e.target)) switch (e.key) {
+			if (!Ke(e.target)) switch (e.key) {
 				case "ArrowDown":
-					q(r < 0 ? 0 : r + 1) && e.preventDefault();
+					J(r < 0 ? 0 : r + 1) && e.preventDefault();
 					break;
 				case "ArrowUp":
-					q(r < 0 ? t.length - 1 : r - 1) && e.preventDefault();
+					J(r < 0 ? t.length - 1 : r - 1) && e.preventDefault();
 					break;
 				case "Home":
-					r >= 0 && (e.preventDefault(), q(0));
+					r >= 0 && (e.preventDefault(), J(0));
 					break;
 				case "End":
-					r >= 0 && (e.preventDefault(), q(t.length - 1));
+					r >= 0 && (e.preventDefault(), J(t.length - 1));
 					break;
 				default: break;
 			}
 		}
-		function qe(e) {
+		function Je(e) {
 			if (e.defaultPrevented) return !1;
 			let t = (e.target ?? document.activeElement)?.closest?.("[aria-modal=\"true\"]");
-			return !(t && t !== P.value);
+			return !(t && t !== F.value);
 		}
-		function Je(e) {
-			let t = P.value;
+		function Ye(e) {
+			let t = F.value;
 			if (!t) return;
-			let n = Array.from(t.querySelectorAll(J)), r = document.activeElement, i = n[0], a = n[n.length - 1], o = !n.length || r === i || !t.contains(r), s = !n.length || r === a;
+			let n = Array.from(t.querySelectorAll(Y)), r = document.activeElement, i = n[0], a = n[n.length - 1], o = !n.length || r === i || !t.contains(r), s = !n.length || r === a;
 			if (e.shiftKey ? !o : !s) return;
 			e.preventDefault();
-			let c = e.shiftKey ? N.value : Ye();
-			H({ restoreFocus: !1 }), g(() => {
-				c?.isConnected ? c.focus() : ze();
+			let c = e.shiftKey ? P.value : Xe();
+			U({ restoreFocus: !1 }), g(() => {
+				c?.isConnected ? c.focus() : Be();
 			});
 		}
-		function Ye() {
-			let e = N.value;
+		function Xe() {
+			let e = P.value;
 			if (!e) return null;
-			let t = Array.from(document.querySelectorAll(J)).filter((e) => !P.value?.contains(e)).filter((e) => e.tabIndex >= 0), n = t.indexOf(e);
+			let t = Array.from(document.querySelectorAll(Y)).filter((e) => !F.value?.contains(e)).filter((e) => e.tabIndex >= 0), n = t.indexOf(e);
 			return n < 0 ? null : t[n + 1] ?? null;
 		}
-		function Xe(e, t) {
-			O("select", e, t), D.closeOnSelect && H({ restoreFocus: !1 });
+		function Ze(e, t) {
+			k("select", e, t), D.closeOnSelect && U({ restoreFocus: !1 });
 		}
-		function Ze(e) {
-			if (!k.default) return;
+		function Qe(e) {
+			if (!A.default) return;
 			let t = e.target?.closest("[data-nb-notification-item]");
-			if (t && Ve(t)) {
+			if (t && He(t)) {
 				if (e.type === "keydown") {
 					let n = e.key;
 					if (n !== "Enter" && n !== " " || t.tagName === "BUTTON" || t.tagName === "A") return;
 					e.preventDefault();
 				}
-				O("select", null, e), D.closeOnSelect && H({ restoreFocus: !1 });
+				k("select", null, e), D.closeOnSelect && U({ restoreFocus: !1 });
 			}
 		}
-		function Qe() {
-			D.markAllPending || O("mark-all-read");
+		function $e() {
+			D.markAllPending || k("mark-all-read");
 		}
-		function Y(e) {
+		function et(e) {
 			let t = e.target;
-			M.value?.contains(t) || P.value?.contains(t) || H({ restoreFocus: !1 });
+			N.value?.contains(t) || F.value?.contains(t) || U({ restoreFocus: !1 });
 		}
-		function $e(e) {
-			e.key === "Escape" && (P.value?.contains(document.activeElement) || qe(e) && H({ restoreFocus: M.value?.contains(document.activeElement) ?? !1 }));
+		function tt(e) {
+			e.key === "Escape" && (F.value?.contains(document.activeElement) || Je(e) && U({ restoreFocus: N.value?.contains(document.activeElement) ?? !1 }));
 		}
 		let X = 0;
 		function Z() {
-			!F.value || X || (X = requestAnimationFrame(() => {
-				X = 0, tt();
+			!I.value || X || (X = requestAnimationFrame(() => {
+				X = 0, rt();
 			}));
 		}
-		function et() {
+		function nt() {
 			X &&= (cancelAnimationFrame(X), 0);
 		}
-		function tt() {
-			if (!F.value) return;
-			let e = M.value?.getBoundingClientRect();
-			if (e && !be(e, Pe())) {
-				H({ restoreFocus: !1 });
+		function rt() {
+			if (!I.value) return;
+			let e = N.value?.getBoundingClientRect();
+			if (e && !xe(e, Fe())) {
+				U({ restoreFocus: !1 });
 				return;
 			}
-			B();
+			V();
 		}
 		function Q() {
-			D.closeOnNavigate && H({ restoreFocus: !1 });
+			D.closeOnNavigate && U({ restoreFocus: !1 });
 		}
-		function nt() {
+		function it() {
 			return window.navigation;
 		}
-		function rt() {
-			document.addEventListener("mousedown", Y), document.addEventListener("keydown", $e), window.addEventListener("resize", Z), window.addEventListener("scroll", Z, !0), window.addEventListener("popstate", Q), window.addEventListener("hashchange", Q), nt()?.addEventListener("navigate", Q);
+		function at() {
+			document.addEventListener("mousedown", et), document.addEventListener("keydown", tt), window.addEventListener("resize", Z), window.addEventListener("scroll", Z, !0), window.addEventListener("popstate", Q), window.addEventListener("hashchange", Q), it()?.addEventListener("navigate", Q);
 		}
-		function it() {
-			et(), document.removeEventListener("mousedown", Y), document.removeEventListener("keydown", $e), window.removeEventListener("resize", Z), window.removeEventListener("scroll", Z, !0), window.removeEventListener("popstate", Q), window.removeEventListener("hashchange", Q), nt()?.removeEventListener("navigate", Q);
+		function ot() {
+			nt(), document.removeEventListener("mousedown", et), document.removeEventListener("keydown", tt), window.removeEventListener("resize", Z), window.removeEventListener("scroll", Z, !0), window.removeEventListener("popstate", Q), window.removeEventListener("hashchange", Q), it()?.removeEventListener("navigate", Q);
 		}
-		let $ = () => H({ restoreFocus: !1 });
-		return S(F, (e) => {
+		let $ = () => U({ restoreFocus: !1 });
+		return S(I, (e) => {
 			if (e) {
 				for (let e of [...w]) e !== $ && e();
-				w.add($), rt(), g(() => {
-					B(), K(0), q(0) || P.value?.focus();
+				w.add($), at(), g(() => {
+					V(), q(0), J(0) || F.value?.focus();
 				});
-			} else w.delete($), it(), W.value = 0;
-		}), S(() => [D.items.length, L.value], () => {
-			F.value && g(() => K(W.value));
+			} else w.delete($), ot(), G.value = 0;
+		}), S(() => [D.items.length, R.value], () => {
+			I.value && g(() => q(G.value));
 		}), ie(() => {
-			it(), w.delete($);
-			let e = P.value;
+			ot(), w.delete($);
+			let e = F.value;
 			e?.isConnected && e.remove();
 		}), T({
-			show: V,
-			close: H,
-			toggle: U,
-			isOpen: F,
-			unreadCount: I
+			show: H,
+			close: U,
+			toggle: W,
+			isOpen: I,
+			unreadCount: L
 		}), (l, g) => (v(), f("div", {
 			ref_key: "rootRef",
-			ref: M,
+			ref: N,
 			class: "nb-notification-center"
 		}, [b(l.$slots, "trigger", {
-			open: F.value,
-			toggle: U,
-			show: V,
-			close: H,
-			unreadCount: I.value,
-			badge: Te.value,
-			panelId: A,
-			triggerProps: Ae.value,
-			setTriggerRef: Ne
+			open: I.value,
+			toggle: W,
+			show: H,
+			close: U,
+			unreadCount: L.value,
+			badge: Ee.value,
+			panelId: j,
+			triggerProps: je.value,
+			setTriggerRef: Pe
 		}, () => [p("button", ne({
-			ref: Ne,
+			ref: Pe,
 			type: "button",
-			class: ["nb-notification-center__trigger", { "nb-notification-center__trigger--active": F.value }]
-		}, Ae.value, { onClick: U }), [m(e, {
-			name: h.icon,
+			class: ["nb-notification-center__trigger", { "nb-notification-center__trigger--active": I.value }]
+		}, je.value, { onClick: W }), [m(e, {
+			name: O.value,
 			size: 18
-		}, null, 8, ["name"]), I.value > 0 ? (v(), f("span", ue, x(Te.value), 1)) : d("", !0)], 16)]), (v(), u(s, { to: "body" }, [m(c, { name: "nb-notification-center-pop" }, {
-			default: C(() => [F.value ? (v(), f("div", {
+		}, null, 8, ["name"]), L.value > 0 ? (v(), f("span", de, x(Ee.value), 1)) : d("", !0)], 16)]), (v(), u(s, { to: "body" }, [m(c, { name: "nb-notification-center-pop" }, {
+			default: C(() => [I.value ? (v(), f("div", {
 				key: 0,
-				id: A,
+				id: j,
 				ref_key: "panelRef",
-				ref: P,
-				class: re(["nb-notification-center__panel", Le.value]),
-				style: _(Fe.value),
+				ref: F,
+				class: re(["nb-notification-center__panel", Re.value]),
+				style: _(Ie.value),
 				role: "dialog",
 				tabindex: "-1",
-				"aria-labelledby": xe,
-				"aria-describedby": Me.value,
+				"aria-labelledby": Se,
+				"aria-describedby": Ne.value,
 				"aria-busy": h.loading ? "true" : void 0,
-				onKeydown: Ke,
-				onFocusin: We
+				onKeydown: qe,
+				onFocusin: Ge
 			}, [
-				p("div", fe, [
+				p("div", pe, [
 					p("h2", {
-						id: xe,
+						id: Se,
 						class: "nb-notification-center__title"
 					}, x(h.label), 1),
 					b(l.$slots, "header-start", {
-						close: H,
-						unreadCount: I.value
+						close: U,
+						unreadCount: L.value
 					}),
 					b(l.$slots, "header-actions", {
-						close: H,
-						unreadCount: I.value,
-						markAllRead: Qe,
+						close: U,
+						unreadCount: L.value,
+						markAllRead: $e,
 						markAllPending: h.markAllPending,
-						markAllProps: je.value,
+						markAllProps: Me.value,
 						markAllText: h.markAllPending ? h.markAllPendingLabel : h.markAllLabel
 					}, () => [h.showMarkAll ? (v(), f("button", ne({
 						key: 0,
 						class: "nb-notification-center__mark-all"
-					}, je.value), [h.markAllPending ? (v(), u(r, {
+					}, Me.value), [h.markAllPending ? (v(), u(r, {
 						key: 0,
 						size: "xs",
 						tone: "inherit",
 						decorative: ""
 					})) : d("", !0), te(" " + x(h.markAllPending ? h.markAllPendingLabel : h.markAllLabel), 1)], 16)) : d("", !0)])
 				]),
-				p("span", pe, x(h.markAllPending ? h.markAllPendingLabel : ""), 1),
-				ke.value ? (v(), f("div", {
+				p("span", me, x(h.markAllPending ? h.markAllPendingLabel : ""), 1),
+				Ae.value ? (v(), f("div", {
 					key: 0,
-					id: j,
+					id: M,
 					class: "nb-notification-center__stale",
 					role: "status"
 				}, [
@@ -443,31 +444,31 @@ var A = /* @__PURE__ */ h({
 						size: 14,
 						"aria-hidden": "true"
 					}, null, 8, ["name"]),
-					p("span", me, x(h.errorStaleLabel), 1),
+					p("span", he, x(h.errorStaleLabel), 1),
 					h.showRetry ? (v(), f("button", {
 						key: 0,
 						type: "button",
 						class: "nb-notification-center__retry",
-						onClick: R
+						onClick: z
 					}, x(h.retryLabel), 1)) : d("", !0)
 				])) : d("", !0),
-				L.value === "loading" ? (v(), f("div", {
+				R.value === "loading" ? (v(), f("div", {
 					key: 1,
 					class: "nb-notification-center__loading",
 					role: "status",
-					style: _(Ie.value)
-				}, [p("span", he, x(h.loadingLabel), 1), (v(), f(o, null, ae(3, (e) => m(i, {
+					style: _(Le.value)
+				}, [p("span", ge, x(h.loadingLabel), 1), (v(), f(o, null, ae(3, (e) => m(i, {
 					key: e,
 					variant: "text",
 					type: "body-sm",
 					lines: 2,
 					"last-line-width": "60%"
-				})), 64))], 4)) : L.value === "error" ? (v(), f("div", {
+				})), 64))], 4)) : R.value === "error" ? (v(), f("div", {
 					key: 2,
-					id: j,
+					id: M,
 					class: "nb-notification-center__error",
 					role: "alert"
-				}, [b(l.$slots, "error", { retry: R }, () => [m(t, {
+				}, [b(l.$slots, "error", { retry: z }, () => [m(t, {
 					size: "sm",
 					kind: "error",
 					title: h.errorTitle,
@@ -477,24 +478,24 @@ var A = /* @__PURE__ */ h({
 					fn: C(() => [m(n, {
 						size: "sm",
 						variant: "secondary",
-						onClick: R
+						onClick: z
 					}, {
 						default: C(() => [te(x(h.retryLabel), 1)]),
 						_: 1
 					})]),
 					key: "0"
-				} : void 0]), 1032, ["title", "description"])])])) : L.value === "list" ? (v(), f("ul", {
+				} : void 0]), 1032, ["title", "description"])])])) : R.value === "list" ? (v(), f("ul", {
 					key: 3,
 					ref_key: "listRef",
-					ref: Ce,
+					ref: we,
 					class: "nb-notification-center__list",
 					role: "list",
-					tabindex: He.value,
-					style: _(Ie.value),
-					onClick: Ze,
-					onKeydown: Ze
+					tabindex: Ue.value,
+					style: _(Le.value),
+					onClick: Qe,
+					onKeydown: Qe
 				}, [b(l.$slots, "default", {
-					close: H,
+					close: U,
 					items: h.items
 				}, () => [(v(!0), f(o, null, ae(h.items, (e) => (v(), u(a, {
 					key: e.id,
@@ -510,7 +511,7 @@ var A = /* @__PURE__ */ h({
 					locale: h.locale,
 					"unread-label": h.unreadLabel,
 					"read-label": h.readLabel,
-					onSelect: (t) => Xe(e, t)
+					onSelect: (t) => Ze(e, t)
 				}, null, 8, [
 					"title",
 					"body",
@@ -525,9 +526,9 @@ var A = /* @__PURE__ */ h({
 					"unread-label",
 					"read-label",
 					"onSelect"
-				]))), 128))])], 44, ge)) : L.value === "empty" ? (v(), f("div", _e, [b(l.$slots, "empty", {}, () => [m(t, {
+				]))), 128))])], 44, _e)) : R.value === "empty" ? (v(), f("div", ve, [b(l.$slots, "empty", {}, () => [m(t, {
 					size: "sm",
-					icon: h.icon,
+					icon: O.value,
 					title: h.emptyTitle,
 					description: h.emptyDescription
 				}, null, 8, [
@@ -535,8 +536,8 @@ var A = /* @__PURE__ */ h({
 					"title",
 					"description"
 				])])])) : d("", !0),
-				l.$slots.footer ? (v(), f("div", ve, [b(l.$slots, "footer", { close: H })])) : d("", !0)
-			], 46, de)) : d("", !0)]),
+				l.$slots.footer ? (v(), f("div", ye, [b(l.$slots, "footer", { close: U })])) : d("", !0)
+			], 46, fe)) : d("", !0)]),
 			_: 3
 		})]))], 512));
 	}