@ac-design/design-system 2.0.0 → 2.1.0

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

@@ -1,18 +1,28 @@
-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";
+import { Fragment as e, Teleport as t, Transition as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createVNode as s, defineComponent as c, mergeModels as l, nextTick as u, normalizeClass as d, onBeforeUnmount as f, openBlock as p, ref as m, renderSlot as h, toDisplayString as g, unref as _, useId as v, useModel as y, watch as b, withCtx as x, withModifiers as S } from "vue";
+import { X as C } 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 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 = {
+var w = ["aria-labelledby", "aria-describedby"], T = {
+	key: 0,
+	class: "mb-4 shrink-0"
+}, E = ["id"], D = ["id"], O = {
+	"data-modal-body": "",
+	class: "ac-scrollbar -m-1 min-h-0 flex-1 p-1"
+}, k = {
+	key: 1,
+	class: "mt-6 flex shrink-0 flex-wrap items-center justify-between gap-3"
+}, A = { class: "flex min-w-0 items-center gap-2" }, j = { class: "ml-auto flex items-center gap-3" }, M = { class: "flex shrink-0 items-start gap-4 border-b border-border p-6" }, N = { class: "min-w-0 flex-1" }, P = ["id"], F = ["id"], I = { class: "flex h-7 shrink-0 items-center gap-3" }, L = {
 	"data-modal-body": "",
 	class: "ac-scrollbar min-h-0 flex-1 p-6"
-}, A = {
+}, R = {
 	key: 0,
-	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({
+	class: "flex shrink-0 flex-wrap items-center justify-between gap-3 rounded-b-16 border-t border-border p-6"
+}, z = { class: "flex min-w-0 items-center gap-2" }, B = { class: "ml-auto flex items-center gap-3" }, V = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", H = /*@__PURE__*/ c({
 	__name: "AcModal",
-	props: /*@__PURE__*/ c({
+	props: /*@__PURE__*/ l({
 		title: { default: "" },
 		description: { default: "" },
 		size: { default: "normal" },
+		variant: { default: "framed" },
 		closable: {
 			type: Boolean,
 			default: !0
@@ -32,94 +42,108 @@ var C = ["aria-labelledby", "aria-describedby"], w = { class: "flex shrink-0 ite
 		},
 		openModifiers: {}
 	}),
-	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 = N.split(", ").map((e) => `[data-modal-body] ${e}`).join(", "), V = () => {
-			P.closable && (I.value = !1, F("close"));
-		}, H = (e) => {
+	emits: /*@__PURE__*/ l(["close"], ["update:open"]),
+	setup(c, { emit: l }) {
+		let H = c, U = y(c, "open"), W = l, G = V.split(", ").map((e) => `[data-modal-body] ${e}`).join(", "), K = {
+			xsmall: "max-w-sm",
+			small: "max-w-md",
+			normal: "max-w-xl",
+			medium: "max-w-200",
+			large: "max-w-250",
+			xlarge: "max-w-6xl",
+			full: "max-w-[calc(100vw-64px)]"
+		}, q = v(), J = m(null), Y = null;
+		function X() {
+			H.closable && (U.value = !1, W("close"));
+		}
+		function Z(e) {
 			if (e.key === "Escape") {
 				if (e.defaultPrevented) return;
-				e.stopPropagation(), V();
-			} else if (e.key === "Tab" && R.value) {
-				let t = [...R.value.querySelectorAll(N)].filter((e) => e.offsetParent !== null);
+				e.stopPropagation(), X();
+			} else if (e.key === "Tab" && J.value) {
+				let t = [...J.value.querySelectorAll(V)].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());
 			}
-		}, U = (e) => {
+		}
+		function Q(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;
 				t.style.overflow = "hidden", e > 0 && (t.style.paddingRight = `${e}px`);
 			} else !e && n <= 0 && (t.style.overflow = "", t.style.paddingRight = "");
-		};
-		y(I, async (e, t) => {
+		}
+		return b(U, async (e, t) => {
 			if (e) {
-				z = document.activeElement, U(!0), await l();
-				let e = R.value?.querySelector("[autofocus]");
-				((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 && U(!1);
-		});
-		let W = {
-			small: "max-w-110",
-			normal: "max-w-130",
-			medium: "max-w-200",
-			large: "max-w-250",
-			full: "max-w-[calc(100vw-64px)]"
-		};
-		return (c, l) => (f(), n(e, { to: "body" }, [o(t, {
-			"enter-active-class": "transition duration-200 ease-out",
+				Y = document.activeElement, Q(!0), await u();
+				let e = J.value?.querySelector("[autofocus]");
+				((e && (e.matches(V) ? e : e.querySelector(V))) ?? J.value?.querySelector(G) ?? J.value)?.focus();
+			} else t && (Q(!1), Y?.focus?.());
+		}, { immediate: !0 }), f(() => {
+			U.value && Q(!1);
+		}), (l, u) => (p(), r(t, { to: "body" }, [s(n, {
+			"enter-active-class": "transition-opacity duration-200 ease-out",
 			"enter-from-class": "opacity-0",
-			"leave-active-class": "transition duration-150 ease-in",
+			"leave-active-class": "transition-opacity duration-150 ease-in",
 			"leave-to-class": "opacity-0"
 		}, {
-			default: b(() => [I.value ? (f(), i("div", {
+			default: x(() => [U.value ? (p(), a("div", {
 				key: 0,
-				class: "fixed inset-0 z-[80] overflow-y-auto bg-overlay backdrop-blur-[2px]",
+				class: d(["fixed inset-0 z-[80] overflow-y-auto", c.variant === "plain" ? "bg-black/50" : "bg-black/80"]),
 				"data-ac-ds": "",
 				"data-testid": "ac-modal",
-				onKeydown: H,
-				onMousedown: l[1] ||= x((e) => s.closeOnOutsideClick && V(), ["self"])
-			}, [a("div", {
+				onKeydown: Z,
+				onMousedown: u[1] ||= S((e) => c.closeOnOutsideClick && X(), ["self"])
+			}, [o("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 && V(), ["self"])
-			}, [a("div", {
+				onMousedown: u[0] ||= S((e) => c.closeOnOutsideClick && X(), ["self"])
+			}, [o("div", {
 				ref_key: "panel",
-				ref: R,
+				ref: J,
 				role: "dialog",
 				"aria-modal": "true",
-				"aria-labelledby": s.title ? `${g(L)}-title` : void 0,
-				"aria-describedby": s.description ? `${g(L)}-desc` : void 0,
+				"aria-labelledby": c.title ? `${_(q)}-title` : void 0,
+				"aria-describedby": c.description ? `${_(q)}-desc` : void 0,
 				tabindex: "-1",
-				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("h2", {
-					id: `${g(L)}-title`,
-					class: "text-xl leading-7 font-semibold tracking-tight text-heading"
-				}, h(s.title), 9, E), s.description ? (f(), i("p", {
+				class: d(["relative flex max-h-[calc(100dvh-32px)] w-full flex-col rounded-16 border border-border bg-surface shadow-xl outline-none sm:max-h-[calc(100dvh-64px)]", [K[c.size], c.variant === "plain" && "p-6"]])
+			}, [c.variant === "plain" ? (p(), a(e, { key: 0 }, [
+				c.title || c.description || l.$slots.header ? (p(), a("header", T, [h(l.$slots, "header", {}, () => [o("h2", {
+					id: `${_(q)}-title`,
+					class: "text-xl leading-7 font-semibold text-heading"
+				}, g(c.title), 9, E), c.description ? (p(), a("p", {
+					key: 0,
+					id: `${_(q)}-desc`,
+					class: "mt-1 text-base text-muted"
+				}, g(c.description), 9, D)) : i("", !0)])])) : i("", !0),
+				o("div", O, [h(l.$slots, "default")]),
+				!c.hideFooter && (l.$slots.footer || l.$slots["footer-left"]) ? (p(), a("footer", k, [o("div", A, [h(l.$slots, "footer-left")]), o("div", j, [h(l.$slots, "footer")])])) : i("", !0)
+			], 64)) : (p(), a(e, { key: 1 }, [
+				o("header", M, [o("div", N, [h(l.$slots, "header", {}, () => [o("h2", {
+					id: `${_(q)}-title`,
+					class: "text-xl leading-7 font-semibold text-heading"
+				}, g(c.title), 9, P), c.description ? (p(), a("p", {
 					key: 0,
-					id: `${g(L)}-desc`,
+					id: `${_(q)}-desc`,
 					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", {
+				}, g(c.description), 9, F)) : i("", !0)])]), o("div", I, [h(l.$slots, "header-actions"), c.closable ? (p(), a("button", {
 					key: 0,
 					type: "button",
-					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",
+					class: "-m-0.5 inline-flex cursor-pointer items-center justify-center rounded-6 p-0.5 text-muted transition-colors 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: V
-				}, [o(g(S), {
+					onClick: X
+				}, [s(_(C), {
 					class: "size-5",
 					"aria-hidden": "true"
-				})])) : r("", !0)])]),
-				a("div", k, [m(c.$slots, "default")]),
-				!s.hideFooter && (c.$slots.footer || c.$slots["footer-left"]) ? (f(), i("footer", A, [a("div", j, [m(c.$slots, "footer-left")]), a("div", M, [m(c.$slots, "footer")])])) : r("", !0)
-			], 10, C)], 32)], 32)) : r("", !0)]),
+				})])) : i("", !0)])]),
+				o("div", L, [h(l.$slots, "default")]),
+				!c.hideFooter && (l.$slots.footer || l.$slots["footer-left"]) ? (p(), a("footer", R, [o("div", z, [h(l.$slots, "footer-left")]), o("div", B, [h(l.$slots, "footer")])])) : i("", !0)
+			], 64))], 10, w)], 32)], 34)) : i("", !0)]),
 			_: 3
 		})]));
 	}
 });
 //#endregion
-export { P as default };
+export { H as default };

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

@@ -1,6 +1,6 @@
 export interface Props {
-    /** When the menu button shows: `mobile` below 768px, `always`, or `never`. It emits `menu`; wire it to the sidebar's `v-model:mobile-open` or its `toggle()`. */
-    menuButton?: "mobile" | "always" | "never";
+    /** When the menu button shows: `mobile` below 768px, `tablet` below 1024px (cloud-ui's sidebar breakpoint), `always`, or `never`. It emits `menu`; wire it to the sidebar's `v-model:mobile-open` or its `toggle()`. */
+    menuButton?: "mobile" | "tablet" | "always" | "never";
     /** Accessible name of the menu button. */
     menuLabel?: string;
     /** Short product tag after the logo, e.g. `"Console"` or `"DB"`. */
@@ -9,13 +9,15 @@ export interface Props {
     sticky?: boolean;
     /** Accessible name of the navigation that holds the default slot. */
     label?: string;
+    /** Where the `search` slot sits: `start` after the menu button and links, 240px wide from 768px, 320px from 1024px and 384px from 1280px (cloud-ui's navbar); `center` in the middle, up to 448px. */
+    searchPosition?: "start" | "center";
 }
 type __VLS_Slots = {
     /** The logo, usually a link home. */
     brand?: () => unknown;
     /** Top-level links (`AcNavbarItem`). Hidden below 768px; put them in the sidebar for phones. */
     default?: () => unknown;
-    /** A search field, centred. Hidden below 640px. */
+    /** A search field, placed by `search-position`. Hidden below 640px. */
     search?: () => unknown;
     /** Right side: icon actions, notifications, theme and `AcUserMenu` last. */
     actions?: () => unknown;
@@ -26,10 +28,11 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     onMenu?: (() => any) | undefined;
 }>, {
     label: string;
-    menuLabel: string;
     sticky: boolean;
-    menuButton: "mobile" | "always" | "never";
+    menuLabel: string;
+    menuButton: "mobile" | "tablet" | "always" | "never";
     productName: string;
+    searchPosition: "start" | "center";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -7,13 +7,16 @@ var d = ["aria-label"], f = {
 }, p = {
 	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 = { class: "flex min-w-0 flex-1 justify-center" }, g = {
+}, m = ["aria-label"], h = {
+	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" }, _ = {
 	key: 0,
 	class: "hidden w-full max-w-md sm:block"
-}, _ = {
-	key: 3,
-	class: "flex shrink-0 items-center gap-0.5 sm:gap-2"
-}, v = /*@__PURE__*/ i({
+}, v = {
+	key: 4,
+	class: "flex shrink-0 items-center gap-0.5 sm:gap-3"
+}, y = /*@__PURE__*/ i({
 	__name: "AcNavbar",
 	props: {
 		menuButton: { default: "mobile" },
@@ -23,12 +26,13 @@ var d = ["aria-label"], f = {
 			type: Boolean,
 			default: !0
 		},
-		label: { default: "Primary" }
+		label: { default: "Primary" },
+		searchPosition: { default: "start" }
 	},
 	emits: ["menu"],
-	setup(i, { emit: v }) {
-		let y = v;
-		return (v, b) => (o(), t("header", {
+	setup(i, { 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"]),
 			"data-ac-ds": "",
 			"data-testid": "ac-navbar"
@@ -36,25 +40,29 @@ var d = ["aria-label"], f = {
 			i.menuButton === "never" ? e("", !0) : (o(), t("button", {
 				key: 0,
 				type: "button",
-				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"]),
+				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"
+				}]),
 				"aria-label": i.menuLabel,
 				"data-ac-ds": "",
 				"data-testid": "ac-navbar-menu",
-				onClick: b[0] ||= (e) => y("menu")
+				onClick: x[0] ||= (e) => b("menu")
 			}, [r(l(u), {
 				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", {
+			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", {
 				key: 2,
 				"aria-label": i.label,
 				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)
+			}, [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)
 		], 2));
 	}
 });
 //#endregion
-export { v as default };
+export { y as default };

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

@@ -1,10 +1,10 @@
 import type { Component } from "vue";
 export interface Props {
-    /** Text of the item. With `iconOnly` it becomes the tooltip and the accessible name. */
+    /** Text of the item. With `iconOnly` it becomes the accessible name. */
     label: string;
     /** A Lucide icon component, e.g. `:icon="Terminal"`. */
     icon?: Component;
-    /** Shows only the icon (20px) in a 36px square button, for navbar actions such as Terminal or Notifications. */
+    /** Shows only the icon (20px) in a 38px button with 10px corners, like cloud-ui's navbar actions: Help, Notifications, Terminal. */
     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

@@ -2,7 +2,7 @@ import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r
 //#region src/lib/components/AcNavbarItem.vue?vue&type=script&setup=true&lang.ts
 var h = { key: 1 }, g = {
 	key: 0,
-	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",
+	class: "absolute -top-1 -right-1 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"
 }, _ = {
 	key: 1,
@@ -42,8 +42,7 @@ var h = { key: 1 }, g = {
 			b("click", e);
 		}
 		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,
+			class: ["relative inline-flex 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 ? ["size-9.5 border border-transparent text-muted", !o.disabled && "hover:border-border hover:bg-surface-sunken/50"] : ["h-9 px-3 text-heading/80", !o.disabled && "hover:bg-surface-sunken"], o.disabled ? "pointer-events-none cursor-not-allowed opacity-50" : "cursor-pointer hover:text-heading"]],
 			"data-ac-ds": "",
 			"data-testid": "ac-navbar-item",
 			onClick: T
@@ -58,7 +57,7 @@ var h = { key: 1 }, g = {
 				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"]));
+		}, 16, ["class"]));
 	}
 });
 //#endregion

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

@@ -8,17 +8,17 @@ export interface NotificationItem {
     title?: string;
     /** The message. Old `msg`. */
     msg?: string;
-    /** Event status, e.g. `Success`, `Failed`, `Running`, `Pending`. Shown next to the time and picks the icon. */
+    /** Event status, e.g. `Success`, `Failed`, `Running`, `Pending`. Shown before the time, in its colour. */
     status?: string;
     /** Overrides the tone that `status` picks. */
     type?: "success" | "danger" | "warning" | "info" | "neutral";
-    /** Read items lose the unread dot and the bold title. */
+    /** Read items lose the unread dot and the primary tint. */
     read?: boolean;
     /** Plain URL to open. */
     href?: string;
     /** Route to open; rendered as `RouterLink` when vue-router is installed. */
     to?: string | object;
-    /** A Lucide icon to replace the status icon. */
+    /** A 16px Lucide icon shown before the title. */
     icon?: Component;
 }
 export interface Props {