@ac-design/design-system 1.0.3 → 2.1.0

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

@@ -1,10 +1,10 @@
 import e from "./AcButton.js";
-import { Teleport as t, Transition as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createVNode as o, defineComponent as s, mergeModels as c, nextTick as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as f, onMounted as p, onUpdated as m, openBlock as h, provide as g, ref as _, renderSlot as v, unref as y, useId as b, useModel as ee, useSlots as te, watch as x, withCtx as S } from "vue";
-import { ChevronDown as C, EllipsisVertical as w } from "@lucide/vue";
+import { Teleport as t, Transition as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createVNode as s, defineComponent as c, mergeModels as l, nextTick as u, normalizeClass as d, normalizeStyle as f, onBeforeUnmount as p, onMounted as m, onUpdated as h, openBlock as g, provide as _, ref as v, renderSlot as y, toRef as ee, unref as b, useId as x, useModel as S, useSlots as te, watch as C, withCtx as w } from "vue";
+import { ChevronDown as T, Ellipsis as E } from "@lucide/vue";
 //#region src/lib/components/AcDropdown.vue?vue&type=script&setup=true&lang.ts
-var T = ["aria-label", "disabled"], E = ["aria-labelledby", "aria-label"], D = "[role=\"menuitem\"]:not([aria-disabled=\"true\"])", O = /*@__PURE__*/ s({
+var ne = ["aria-label", "disabled"], re = ["aria-labelledby", "aria-label"], D = "[role=\"menuitem\"]:not([aria-disabled=\"true\"])", O = /*@__PURE__*/ c({
 	__name: "AcDropdown",
-	props: /*@__PURE__*/ c({
+	props: /*@__PURE__*/ l({
 		label: { default: "" },
 		menuLabel: { default: "Actions" },
 		align: { default: "start" },
@@ -12,7 +12,8 @@ var T = ["aria-label", "disabled"], E = ["aria-labelledby", "aria-label"], D = "
 		disabled: {
 			type: Boolean,
 			default: !1
-		}
+		},
+		variant: { default: "menu" }
 	}, {
 		open: {
 			type: Boolean,
@@ -21,131 +22,143 @@ var T = ["aria-label", "disabled"], E = ["aria-labelledby", "aria-label"], D = "
 		openModifiers: {}
 	}),
 	emits: ["update:open"],
-	setup(s) {
-		let c = s, O = ee(s, "open"), k = te(), A = b(), j = `${A}-menu`, M = _(null), N = _(null), P = _({}), F = _(!1), I = _(""), L = null, R = "menu", z = "", B;
-		function V() {
-			L = M.value?.querySelector("button, a[href], [tabindex]") ?? null, L && (L.id || (L.id = `${A}-trigger`), I.value = L.id, L.setAttribute("aria-haspopup", "menu"), L.setAttribute("aria-expanded", String(O.value)), O.value ? L.setAttribute("aria-controls", j) : L.removeAttribute("aria-controls"));
+	setup(c) {
+		let l = c, O = S(c, "open"), k = te(), A = {
+			menu: 240,
+			panel: 320
+		}, j = {
+			"top-start": "origin-top-left",
+			"top-end": "origin-top-right",
+			"bottom-start": "origin-bottom-left",
+			"bottom-end": "origin-bottom-right"
+		}, M = {
+			menu: "rounded-10 border-border py-1",
+			panel: "rounded-14 border-border/80 p-2"
+		}, N = x(), P = `${N}-menu`, F = v(null), I = v(null), L = v({}), R = v(!1), z = v(""), B = null, V = "menu", H = "", U, W = r(() => j[`${R.value ? "top" : "bottom"}-${l.align}`]);
+		function G() {
+			B = F.value?.querySelector("button, a[href], [tabindex]") ?? null, B && (B.id || (B.id = `${N}-trigger`), z.value = B.id, B.setAttribute("aria-haspopup", "menu"), B.setAttribute("aria-expanded", String(O.value)), O.value ? B.setAttribute("aria-controls", P) : B.removeAttribute("aria-controls"));
 		}
-		function H() {
-			return [...N.value?.querySelectorAll(D) ?? []];
+		function K() {
+			return [...I.value?.querySelectorAll(D) ?? []];
 		}
-		function U(e) {
-			let t = H();
-			if (!t.length) return N.value?.focus();
+		function q(e) {
+			let t = K();
+			if (!t.length) return I.value?.focus();
 			t[e === "first" ? 0 : e === "last" ? t.length - 1 : (e + t.length) % t.length]?.focus();
 		}
-		function W(e) {
-			c.disabled || (R = e, O.value = !0);
+		function J(e) {
+			l.disabled || (V = e, O.value = !0);
 		}
-		function G(e = !0) {
-			O.value && (O.value = !1, e && L?.focus());
+		function Y(e = !0) {
+			O.value && (O.value = !1, e && B?.focus());
 		}
-		function K() {
-			if (!L || !N.value) return;
-			let e = L.getBoundingClientRect(), t = `${Math.min(Math.max(e.width, 192), window.innerWidth - 16)}px`;
-			N.value.style.minWidth = t;
-			let { offsetWidth: n, offsetHeight: r } = N.value, i = window.innerHeight - e.bottom - 4 - 8, a = e.top - 4 - 8, o = c.placement === "top" ? a >= r || a > i : i < r && a > i, s = c.align === "end" ? e.right - n : e.left;
-			F.value = !o, P.value = {
-				[o ? "bottom" : "top"]: `${o ? window.innerHeight - e.top + 4 : e.bottom + 4}px`,
+		function X() {
+			if (!B || !I.value) return;
+			let e = B.getBoundingClientRect(), t = `${Math.min(Math.max(e.width, A[l.variant]), window.innerWidth - 16)}px`;
+			I.value.style.minWidth = t;
+			let { offsetWidth: n, offsetHeight: r } = I.value, i = window.innerHeight - e.bottom - 8 - 8, a = e.top - 8 - 8, o = l.placement === "top" ? a >= r || a > i : i < r && a > i, s = l.align === "end" ? e.right - n : e.left;
+			R.value = !o, L.value = {
+				[o ? "bottom" : "top"]: `${o ? window.innerHeight - e.top + 8 : e.bottom + 8}px`,
 				left: `${Math.max(8, Math.min(s, window.innerWidth - n - 8))}px`,
 				minWidth: t,
 				maxHeight: `${Math.max(o ? a : i, 120)}px`
 			};
 		}
-		function q(e) {
-			if (L?.contains(e.target)) {
-				if (O.value) return G();
-				W(e.detail === 0 ? "first" : "menu");
+		function ie(e) {
+			if (B?.contains(e.target)) {
+				if (O.value) return Y();
+				J(e.detail === 0 ? "first" : "menu");
 			}
 		}
-		function J(e) {
+		function ae(e) {
 			if (e.key === "ArrowDown" || e.key === "ArrowUp") {
-				if (e.preventDefault(), O.value) return U(e.key === "ArrowDown" ? "first" : "last");
-				W(e.key === "ArrowDown" ? "first" : "last");
+				if (e.preventDefault(), O.value) return q(e.key === "ArrowDown" ? "first" : "last");
+				J(e.key === "ArrowDown" ? "first" : "last");
 			}
 		}
-		function Y(e) {
-			let t = H(), n = t.indexOf(document.activeElement);
+		function oe(e) {
+			let t = K(), n = t.indexOf(document.activeElement);
 			if (e.key === "ArrowDown" || e.key === "ArrowUp") {
 				e.preventDefault();
 				let t = e.key === "ArrowDown" ? 1 : -1;
-				U(n < 0 ? t > 0 ? "first" : "last" : n + t);
-			} else e.key === "Home" || e.key === "End" ? (e.preventDefault(), U(e.key === "Home" ? "first" : "last")) : e.key === "Escape" ? (e.preventDefault(), G()) : e.key === "Tab" ? G() : e.key === " " && n >= 0 && t[n].tagName !== "BUTTON" ? (e.preventDefault(), t[n].click()) : e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey && e.key !== " " && X(e.key, t, n);
+				q(n < 0 ? t > 0 ? "first" : "last" : n + t);
+			} else e.key === "Home" || e.key === "End" ? (e.preventDefault(), q(e.key === "Home" ? "first" : "last")) : e.key === "Escape" ? (e.preventDefault(), Y()) : e.key === "Tab" ? Y() : e.key === " " && n >= 0 && t[n].tagName !== "BUTTON" ? (e.preventDefault(), t[n].click()) : e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey && e.key !== " " && se(e.key, t, n);
 		}
-		function X(e, t, n) {
-			z += e.toLowerCase(), clearTimeout(B), B = setTimeout(() => z = "", 500);
-			let r = (e) => (e.dataset.acLabel || e.textContent || "").trim().toLowerCase(), i = z.length === 1 ? n + 1 : Math.max(n, 0);
-			[...t.slice(i), ...t.slice(0, i)].find((e) => r(e).startsWith(z))?.focus();
+		function se(e, t, n) {
+			H += e.toLowerCase(), clearTimeout(U), U = setTimeout(() => H = "", 500);
+			let r = (e) => (e.dataset.acLabel || e.textContent || "").trim().toLowerCase(), i = H.length === 1 ? n + 1 : Math.max(n, 0);
+			[...t.slice(i), ...t.slice(0, i)].find((e) => r(e).startsWith(H))?.focus();
 		}
 		function Z(e) {
 			let t = e.target;
-			M.value?.contains(t) || N.value?.contains(t) || G(!1);
+			F.value?.contains(t) || I.value?.contains(t) || Y(!1);
 		}
 		function Q(e) {
-			e && N.value?.contains(e.target) || K();
+			e?.target instanceof Node && I.value?.contains(e.target) || X();
 		}
 		function $(e) {
 			e ? (document.addEventListener("pointerdown", Z, !0), window.addEventListener("scroll", Q, !0), window.addEventListener("resize", Q)) : (document.removeEventListener("pointerdown", Z, !0), window.removeEventListener("scroll", Q, !0), window.removeEventListener("resize", Q));
 		}
-		return g("ac-dropdown", {
-			close: G,
-			focusMenu: () => N.value?.focus()
-		}), x(O, async (e) => {
-			V(), $(e), e && (await l(), K(), R === "menu" ? N.value?.focus() : U(R), R = "menu");
-		}), p(V), m(V), f(() => {
-			$(!1), clearTimeout(B);
-		}), (c, l) => (h(), a("div", {
+		return _("ac-dropdown", {
+			close: Y,
+			focusMenu: () => I.value?.focus(),
+			variant: ee(l, "variant")
+		}), C(O, async (e) => {
+			G(), $(e), e && (await u(), X(), V === "menu" ? I.value?.focus() : q(V), V = "menu");
+		}), m(G), h(G), p(() => {
+			$(!1), clearTimeout(U);
+		}), (r, l) => (g(), o("div", {
 			ref_key: "root",
-			ref: M,
+			ref: F,
 			class: "inline-flex",
 			"data-ac-ds": "",
 			"data-testid": "ac-dropdown",
-			onClick: q,
-			onKeydown: J
-		}, [k.trigger ? v(c.$slots, "trigger", { open: O.value }, void 0, void 0, 0) : s.label ? (h(), r(e, {
+			onClick: ie,
+			onKeydown: ae
+		}, [k.trigger ? y(r.$slots, "trigger", { open: O.value }, void 0, void 0, 0) : c.label ? (g(), i(e, {
 			key: 1,
-			title: s.label,
+			title: c.label,
 			color: "white",
-			disabled: s.disabled
+			disabled: c.disabled
 		}, {
-			default: S(() => [o(y(C), {
-				class: u(["-mr-1 text-muted transition-transform duration-200", O.value && "rotate-180"]),
+			default: w(() => [s(b(T), {
+				class: d(["-mr-1 text-muted transition-transform duration-200", O.value && "rotate-180"]),
 				"aria-hidden": "true"
 			}, null, 8, ["class"])]),
 			_: 1
-		}, 8, ["title", "disabled"])) : (h(), a("button", {
+		}, 8, ["title", "disabled"])) : (g(), o("button", {
 			key: 2,
 			type: "button",
-			"aria-label": s.menuLabel,
-			disabled: s.disabled,
-			class: u(["inline-flex size-7 cursor-pointer items-center justify-center rounded-6 text-muted transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", O.value && "bg-surface-sunken text-heading"])
-		}, [o(y(w), {
+			"aria-label": c.menuLabel,
+			disabled: c.disabled,
+			class: d(["inline-flex size-7 cursor-pointer items-center justify-center rounded-8 text-muted transition-colors duration-200 hover:bg-surface-sunken hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", O.value && "bg-surface-sunken text-heading"])
+		}, [s(b(E), {
 			class: "size-4",
 			"aria-hidden": "true"
-		})], 10, T)), (h(), r(t, { to: "body" }, [o(n, {
-			"enter-active-class": "transition duration-150 ease-out",
-			"enter-from-class": `opacity-0 motion-safe:scale-[0.98] ${F.value ? "motion-safe:-translate-y-1" : "motion-safe:translate-y-1"}`,
-			"leave-active-class": "transition duration-100 ease-in",
-			"leave-to-class": "opacity-0"
+		})], 10, ne)), (g(), i(t, { to: "body" }, [s(n, {
+			"enter-active-class": "transition-[opacity,scale] duration-150 ease-out motion-reduce:transition-none",
+			"enter-from-class": "opacity-0 motion-safe:scale-95",
+			"leave-active-class": "transition-[opacity,scale] duration-100 ease-in motion-reduce:transition-none",
+			"leave-to-class": "opacity-0 motion-safe:scale-95"
 		}, {
-			default: S(() => [O.value ? (h(), a("div", {
+			default: w(() => [O.value ? (g(), o("div", {
 				key: 0,
-				id: j,
+				id: P,
 				ref_key: "panel",
-				ref: N,
+				ref: I,
 				role: "menu",
 				tabindex: "-1",
 				"aria-orientation": "vertical",
-				"aria-labelledby": (k.trigger || s.label) && I.value ? I.value : void 0,
-				"aria-label": k.trigger || s.label ? void 0 : s.menuLabel,
-				class: u(["ac-scrollbar fixed z-[90] flex w-max max-w-[min(320px,calc(100vw-16px))] flex-col rounded-8 border border-border bg-surface p-1 shadow-lg outline-none", F.value ? "origin-top" : "origin-bottom"]),
-				style: d(P.value),
+				"aria-labelledby": (k.trigger || c.label) && z.value ? z.value : void 0,
+				"aria-label": k.trigger || c.label ? void 0 : c.menuLabel,
+				class: d(["ac-scrollbar fixed z-[90] flex w-max max-w-[min(320px,calc(100vw-16px))] flex-col border bg-surface shadow-lg outline-none", [M[c.variant], W.value]]),
+				style: f(L.value),
 				"data-ac-ds": "",
 				"data-testid": "ac-dropdown-menu",
-				onKeydown: Y
-			}, [v(c.$slots, "default")], 46, E)) : i("", !0)]),
+				onKeydown: oe
+			}, [y(r.$slots, "default")], 46, re)) : a("", !0)]),
 			_: 3
-		}, 8, ["enter-from-class"])]))], 544));
+		})]))], 544));
 	}
 });
 //#endregion

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

@@ -1,20 +1,21 @@
-import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, defineComponent as r, openBlock as i, toDisplayString as a } from "vue";
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, inject as a, normalizeClass as o, openBlock as s, toDisplayString as c } from "vue";
 //#region src/lib/components/AcDropdownDivider.vue?vue&type=script&setup=true&lang.ts
-var o = ["aria-label"], s = {
-	key: 0,
-	class: "px-2.5 pt-1.5 pb-1 text-sm font-medium tracking-wide text-muted uppercase"
-}, c = /*@__PURE__*/ r({
+var l = ["aria-label"], u = /*@__PURE__*/ i({
 	__name: "AcDropdownDivider",
 	props: { label: { default: "" } },
-	setup(r) {
-		return (c, l) => (i(), t("div", {
+	setup(i) {
+		let u = a("ac-dropdown", null), d = e(() => (u?.variant?.value ?? "menu") === "menu");
+		return (e, a) => (s(), n("div", {
 			role: "separator",
-			"aria-label": r.label || void 0,
+			"aria-label": i.label || void 0,
 			class: "group",
 			"data-ac-ds": "",
 			"data-testid": "ac-dropdown-divider"
-		}, [l[0] ||= n("div", { class: "-mx-1 my-1 h-px bg-border-light group-first:hidden" }, null, -1), r.label ? (i(), t("div", s, a(r.label), 1)) : e("", !0)], 8, o));
+		}, [r("div", { class: o(["my-1 h-px bg-border group-first:hidden", !d.value && "-mx-2"]) }, null, 2), i.label ? (s(), n("div", {
+			key: 0,
+			class: o(["pt-2 pb-1 text-sm font-semibold tracking-[0.08em] text-muted uppercase", d.value ? "px-4" : "px-3"])
+		}, c(i.label), 3)) : t("", !0)], 8, l));
 	}
 });
 //#endregion
-export { c as default };
+export { u as default };

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

@@ -8,7 +8,7 @@ export interface Props {
     icon?: Component;
     /** Keyboard shortcut hint shown at the right, e.g. "⌘D". Display only; bind the key yourself. */
     shortcut?: string;
-    /** Red text for destructive actions such as Delete. Confirm them before acting. */
+    /** Red text and a red hover tint for destructive actions such as Delete. Confirm them before acting. */
     danger?: boolean;
     /** Disables the item; it's skipped by the arrow keys. */
     disabled?: boolean;
@@ -22,7 +22,7 @@ export interface Props {
 type __VLS_Slots = {
     /** Item content, after the icon and `label`. */
     default?: () => unknown;
-    /** A 16px icon before the label. */
+    /** An icon before the label: 16px in a `menu`, 20px in a `panel` dropdown. */
     icon?: () => unknown;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {

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

@@ -1,12 +1,9 @@
 import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, inject as s, normalizeClass as c, openBlock as l, renderSlot as u, resolveComponent as d, resolveDynamicComponent as f, toDisplayString as p, unref as m, withCtx as h } from "vue";
 //#region src/lib/components/AcDropdownItem.vue?vue&type=script&setup=true&lang.ts
-var g = { class: "min-w-0 flex-1" }, _ = { class: "block truncate" }, v = {
+var g = { class: "min-w-0 flex-1" }, _ = {
 	key: 0,
-	class: "block text-xs text-muted"
-}, y = {
-	key: 1,
-	class: "mt-0.5 shrink-0 font-sans text-xs text-muted"
-}, b = /*@__PURE__*/ o({
+	class: "mt-0.5 block text-xs text-muted"
+}, v = /*@__PURE__*/ o({
 	__name: "AcDropdownItem",
 	props: {
 		label: { default: "" },
@@ -26,22 +23,22 @@ var g = { class: "min-w-0 flex-1" }, _ = { class: "block truncate" }, v = {
 		to: { default: void 0 }
 	},
 	emits: ["click"],
-	setup(o, { emit: b }) {
-		let x = o, S = b, C = s("ac-dropdown", null), w = x.to ? d("RouterLink") : null, T = e(() => x.disabled ? "button" : x.to && w ? w : x.href ? "a" : "button");
+	setup(o, { emit: v }) {
+		let y = o, b = v, x = s("ac-dropdown", null), S = y.to ? d("RouterLink") : null, C = e(() => x?.variant?.value === "panel"), w = e(() => y.danger ? "text-danger-strong focus:bg-danger/10" : C.value ? "text-heading focus:bg-primary/10" : "text-heading focus:bg-surface-sunken"), T = e(() => y.disabled ? "button" : y.to && S ? S : y.href ? "a" : "button");
 		function E(e) {
-			if (x.disabled) {
+			if (y.disabled) {
 				e.preventDefault();
 				return;
 			}
-			S("click", e), C?.close();
+			b("click", e), x?.close();
 		}
 		function D(e) {
-			if (x.disabled || e.pointerType === "touch") return;
+			if (y.disabled || e.pointerType === "touch") return;
 			let t = e.currentTarget;
 			document.activeElement !== t && t.focus({ preventScroll: !0 });
 		}
 		function O(e) {
-			e.pointerType !== "touch" && document.activeElement === e.currentTarget && C?.focusMenu();
+			e.pointerType !== "touch" && document.activeElement === e.currentTarget && x?.focusMenu();
 		}
 		return (e, s) => (l(), t(f(T.value), {
 			role: "menuitem",
@@ -49,11 +46,11 @@ var g = { class: "min-w-0 flex-1" }, _ = { class: "block truncate" }, v = {
 			type: T.value === "button" ? "button" : void 0,
 			href: T.value === "a" ? o.href : void 0,
 			target: T.value === "a" ? o.target : void 0,
-			to: T.value === m(w) ? o.to : void 0,
+			to: T.value === m(S) ? o.to : void 0,
 			disabled: T.value === "button" && o.disabled || void 0,
 			"aria-disabled": o.disabled || void 0,
 			"data-ac-label": o.label || void 0,
-			class: c(["flex w-full cursor-pointer items-start gap-2.5 rounded-6 px-2.5 py-1.5 text-left text-base no-underline outline-none select-none transition-colors duration-75 disabled:cursor-not-allowed disabled:opacity-40", o.danger ? "text-red-30 focus:bg-red-95 focus:text-red-20" : "text-heading focus:bg-surface-sunken"]),
+			class: c(["flex w-full shrink-0 cursor-pointer gap-2 text-left text-base no-underline outline-none select-none transition-colors duration-150 disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none", [C.value ? "items-center rounded-10 px-5 py-2.5" : "items-start px-4 py-2", w.value]]),
 			"data-ac-ds": "",
 			"data-testid": "ac-dropdown-item",
 			onClick: E,
@@ -63,11 +60,14 @@ var g = { class: "min-w-0 flex-1" }, _ = { class: "block truncate" }, v = {
 			default: h(() => [
 				o.icon || e.$slots.icon ? (l(), r("span", {
 					key: 0,
-					class: c(["mt-0.5 inline-flex shrink-0 [&_svg]:size-4", o.danger ? "text-current" : "text-muted"]),
+					class: c(["inline-flex shrink-0", C.value ? ["[&_svg]:size-5", o.danger ? "text-current" : "text-muted"] : "mt-0.5 [&_svg]:size-4"]),
 					"aria-hidden": "true"
 				}, [u(e.$slots, "icon", {}, () => [(l(), t(f(o.icon)))])], 2)) : n("", !0),
-				i("span", g, [i("span", _, [a(p(o.label), 1), u(e.$slots, "default")]), o.description ? (l(), r("span", v, p(o.description), 1)) : n("", !0)]),
-				o.shortcut ? (l(), r("kbd", y, p(o.shortcut), 1)) : n("", !0)
+				i("span", g, [i("span", { class: c(["block truncate", C.value && "font-medium"]) }, [a(p(o.label), 1), u(e.$slots, "default")], 2), o.description ? (l(), r("span", _, p(o.description), 1)) : n("", !0)]),
+				o.shortcut ? (l(), r("kbd", {
+					key: 1,
+					class: c(["shrink-0 font-sans text-xs text-muted tabular-nums", !C.value && "mt-0.5"])
+				}, p(o.shortcut), 3)) : n("", !0)
 			]),
 			_: 3
 		}, 40, [
@@ -83,4 +83,4 @@ var g = { class: "min-w-0 flex-1" }, _ = { class: "block truncate" }, v = {
 	}
 });
 //#endregion
-export { b as default };
+export { v as default };

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

@@ -12,8 +12,10 @@ export interface Props {
     query?: string;
     /** A Lucide icon component to replace the variant's default icon. */
     icon?: Component;
-    /** `small` for inside a table or card, `normal` for a list area, `large` for a whole page. */
+    /** `small` for inside a table or card, `normal` for a list area, `large` for a whole page. Icon tiles are 48px, 64px and 64px. */
     size?: "small" | "normal" | "large";
+    /** Draws a dashed 16px-round frame on the card surface (a red one for `error`), for a state that stands alone on the page rather than inside a card or table. */
+    framed?: boolean;
 }
 type __VLS_Slots = {
     /** Replaces the icon, e.g. with an illustration. */
@@ -30,6 +32,7 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     description: string;
     icon: Component;
     size: "small" | "normal" | "large";
+    framed: boolean;
     query: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,13 +1,10 @@
 import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, renderSlot as l, resolveDynamicComponent as u, toDisplayString as d } from "vue";
 import { Inbox as f, SearchX as p, TriangleAlert as m } from "@lucide/vue";
 //#region src/lib/components/AcEmptyState.vue?vue&type=script&setup=true&lang.ts
-var h = ["role"], g = { class: "flex flex-col items-center gap-1" }, _ = {
+var h = ["role"], g = {
 	key: 0,
-	class: "font-mono text-xs font-medium tracking-wide text-muted uppercase"
-}, v = {
-	key: 0,
-	class: "mt-1 flex flex-wrap items-center justify-center gap-2"
-}, y = /*@__PURE__*/ o({
+	class: "mb-1 font-mono text-xs font-medium tracking-wide text-muted uppercase"
+}, _ = /*@__PURE__*/ o({
 	__name: "AcEmptyState",
 	props: {
 		variant: { default: "empty" },
@@ -16,66 +13,80 @@ var h = ["role"], g = { class: "flex flex-col items-center gap-1" }, _ = {
 		description: { default: "" },
 		query: { default: "" },
 		icon: { default: void 0 },
-		size: { default: "normal" }
+		size: { default: "normal" },
+		framed: {
+			type: Boolean,
+			default: !1
+		}
 	},
 	setup(o) {
-		let y = o, b = {
+		let _ = o, v = {
 			empty: {
 				glyph: f,
 				title: "Nothing here yet",
-				tile: "border-border bg-surface-muted text-muted"
+				tile: "bg-primary/10 text-primary-strong",
+				frame: "border-border bg-surface"
 			},
 			search: {
 				glyph: p,
 				title: "No results found",
-				tile: "border-border bg-surface-muted text-muted"
+				tile: "bg-primary/10 text-primary-strong",
+				frame: "border-border bg-surface"
 			},
 			error: {
 				glyph: m,
 				title: "Something went wrong",
-				tile: "border-red-90 bg-red-97 text-red-40"
+				tile: "bg-danger/10 text-danger-strong",
+				frame: "border-danger/25 bg-danger/5"
 			}
-		}, x = {
+		}, y = {
 			small: {
-				root: "py-6 gap-3",
-				tile: "size-9 rounded-8 [&_svg]:size-4",
-				title: "text-lg leading-6",
-				text: "text-base max-w-80"
+				root: "py-8",
+				gap: "mb-3",
+				tile: "size-12 [&_svg]:size-6",
+				title: "text-lg",
+				text: "max-w-80 text-base",
+				actions: "mt-4"
 			},
 			normal: {
-				root: "py-12 gap-4",
-				tile: "size-11 rounded-10 [&_svg]:size-5",
-				title: "text-xl leading-6",
-				text: "text-base max-w-100"
+				root: "py-16",
+				gap: "mb-4",
+				tile: "size-16 [&_svg]:size-8",
+				title: "text-xl",
+				text: "max-w-md text-base",
+				actions: "mt-6"
 			},
 			large: {
-				root: "py-20 gap-5",
-				tile: "size-14 rounded-12 [&_svg]:size-6",
-				title: "text-2xl leading-7",
-				text: "text-lg max-w-120"
+				root: "py-20",
+				gap: "mb-5",
+				tile: "size-16 [&_svg]:size-8",
+				title: "text-2xl",
+				text: "max-w-120 text-lg",
+				actions: "mt-6"
 			}
-		}, S = e(() => b[y.variant]), C = e(() => x[y.size]), w = e(() => y.icon ?? S.value.glyph), T = e(() => y.title ? y.title : y.variant === "search" && y.query ? `No results for “${y.query}”` : S.value.title);
+		}, b = e(() => v[_.variant]), x = e(() => y[_.size]), S = e(() => _.icon ?? b.value.glyph), C = e(() => _.title ? _.title : _.variant === "search" && _.query ? `No results for “${_.query}”` : b.value.title);
 		return (e, f) => (c(), r("div", {
-			class: s(["flex flex-col items-center px-4 text-center", C.value.root]),
+			class: s(["flex flex-col items-center justify-center text-center", [x.value.root, o.framed ? ["rounded-16 border border-dashed px-6", b.value.frame] : "px-4"]]),
 			role: o.variant === "error" ? "alert" : void 0,
 			"data-ac-ds": "",
 			"data-testid": "ac-empty-state"
 		}, [
-			l(e.$slots, "icon", {}, () => [i("span", {
-				class: s(["inline-flex shrink-0 items-center justify-center border shadow-xs", [S.value.tile, C.value.tile]]),
+			i("div", { class: s(["flex justify-center", x.value.gap]) }, [l(e.$slots, "icon", {}, () => [i("span", {
+				class: s(["inline-flex shrink-0 items-center justify-center rounded-16", [b.value.tile, x.value.tile]]),
 				"aria-hidden": "true"
-			}, [(c(), t(u(w.value)))], 2)]),
-			i("div", g, [
-				o.code ? (c(), r("p", _, d(o.code), 1)) : n("", !0),
-				i("p", { class: s(["font-semibold tracking-[-0.01em] text-balance text-heading", C.value.title]) }, d(T.value), 3),
-				o.description || e.$slots.default ? (c(), r("div", {
-					key: 1,
-					class: s(["text-pretty text-muted [&_a]:font-medium [&_a]:text-primary-20 [&_a]:underline [&_a]:underline-offset-2", C.value.text])
-				}, [l(e.$slots, "default", {}, () => [a(d(o.description), 1)])], 2)) : n("", !0)
-			]),
-			e.$slots.actions ? (c(), r("div", v, [l(e.$slots, "actions")])) : n("", !0)
+			}, [(c(), t(u(S.value)))], 2)])], 2),
+			o.code ? (c(), r("p", g, d(o.code), 1)) : n("", !0),
+			i("p", { class: s(["font-heading font-semibold tracking-tight text-balance text-heading", x.value.title]) }, d(C.value), 3),
+			o.description || e.$slots.default ? (c(), r("div", {
+				key: 1,
+				class: s(["mt-1.5 text-pretty text-muted [&_a]:font-medium [&_a]:text-primary-strong [&_a]:underline [&_a]:underline-offset-2", x.value.text])
+			}, [l(e.$slots, "default", {}, () => [a(d(o.description), 1)])], 2)) : n("", !0),
+			e.$slots.actions ? (c(), r("div", {
+				key: 2,
+				class: s(["flex flex-wrap items-center justify-center gap-3", x.value.actions])
+			}, [l(e.$slots, "actions")], 2)) : n("", !0)
 		], 10, h));
 	}
 });
 //#endregion
-export { y as default };
+export { _ as default };

package/dist/lib/components/AcErrorState.js

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

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

@@ -0,0 +1,46 @@
+export interface Props {
+    /** What failed, in a short sentence: "Couldn't load databases". */
+    title?: string;
+    /** The failed request's error. A string, or the `message` of an `Error`, is shown under the title; other values are ignored. */
+    error?: unknown;
+    /** A message to show instead of the one taken from `error`. */
+    description?: string;
+    /** Shows a spinner on the retry button while the request runs again. */
+    retrying?: boolean;
+    /** Less padding, for a card or table body: 32px instead of 56px above and below. */
+    compact?: boolean;
+    /** Text of the retry button. */
+    retryText?: string;
+    /** Hides the retry button, e.g. for a 403 that retrying won't fix. */
+    hideRetry?: boolean;
+    /** Heading tag of the title, so it fits the page outline. */
+    titleTag?: "h2" | "h3" | "h4" | "p";
+}
+type __VLS_Slots = {
+    /** Extra content under the message, e.g. a request ID or a support link. */
+    default?: () => unknown;
+    /** Buttons next to the retry button, e.g. "Go to dashboard". */
+    actions?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    retry: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onRetry?: (() => any) | undefined;
+}>, {
+    title: string;
+    description: string;
+    error: undefined;
+    compact: boolean;
+    retrying: boolean;
+    retryText: string;
+    hideRetry: boolean;
+    titleTag: "h2" | "h3" | "h4" | "p";
+}, {}, {}, {}, 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;
+    };
+};