@ac-design/design-system 2.0.0 → 2.1.1

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 - 8 - 8, a = e.top - 8 - 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 = {
+		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?.target instanceof Node && 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-8 cursor-pointer items-center justify-center rounded-10 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"])
-		}, [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-[opacity,scale,translate] duration-150 ease-out motion-reduce:transition-none",
-			"enter-from-class": `opacity-0 motion-safe:scale-95 ${F.value ? "motion-safe:-translate-y-1" : "motion-safe:translate-y-1"}`,
+		})], 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-14 border border-border bg-surface p-2 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-3 pt-2 pb-1 text-sm font-semibold tracking-[0.08em] 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-2 my-1 h-px bg-border 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

@@ -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: "mt-0.5 block text-xs text-muted"
-}, y = {
-	key: 1,
-	class: "mt-0.5 shrink-0 font-sans text-xs text-muted tabular-nums"
-}, b = /*@__PURE__*/ o({
+}, 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-8 px-3 py-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", o.danger ? "text-danger-strong focus:bg-danger/10" : "text-heading focus:bg-accent"]),
+			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

@@ -32,8 +32,8 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     description: string;
     icon: Component;
     size: "small" | "normal" | "large";
-    query: string;
     framed: boolean;
+    query: string;
 }, {}, {}, {}, 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/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;
+    };
+};

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

@@ -0,0 +1,66 @@
+import e from "./AcButton.js";
+import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, renderSlot as d, resolveDynamicComponent as f, toDisplayString as p, unref as m, withCtx as h } from "vue";
+import { CircleAlert as g, RotateCw as _ } from "@lucide/vue";
+//#region src/lib/components/AcErrorState.vue?vue&type=script&setup=true&lang.ts
+var v = {
+	class: "mb-4 inline-flex size-12 items-center justify-center rounded-16 bg-danger/10 text-danger-strong",
+	"aria-hidden": "true"
+}, y = {
+	key: 0,
+	class: "mt-1.5 max-w-md text-base break-words text-muted"
+}, b = {
+	key: 1,
+	class: "mt-5 flex flex-wrap items-center justify-center gap-3"
+}, x = /*@__PURE__*/ c({
+	__name: "AcErrorState",
+	props: {
+		title: { default: "Something went wrong" },
+		error: { default: void 0 },
+		description: { default: "" },
+		retrying: {
+			type: Boolean,
+			default: !1
+		},
+		compact: {
+			type: Boolean,
+			default: !1
+		},
+		retryText: { default: "Try again" },
+		hideRetry: {
+			type: Boolean,
+			default: !1
+		},
+		titleTag: { default: "h2" }
+	},
+	emits: ["retry"],
+	setup(c, { emit: x }) {
+		let S = c, C = x, w = t(() => S.description ? S.description : typeof S.error == "string" ? S.error : S.error instanceof Error ? S.error.message : "");
+		return (t, x) => (u(), i("div", {
+			role: "alert",
+			class: l(["flex flex-col items-center justify-center rounded-16 border border-danger/25 bg-danger/5 px-6 text-center", c.compact ? "py-8" : "py-14"]),
+			"data-ac-ds": "",
+			"data-testid": "ac-error-state"
+		}, [
+			a("div", v, [s(m(g), { class: "size-6" })]),
+			(u(), n(f(c.titleTag), { class: "font-heading text-lg font-semibold text-heading" }, {
+				default: h(() => [o(p(c.title), 1)]),
+				_: 1
+			})),
+			w.value ? (u(), i("p", y, p(w.value), 1)) : r("", !0),
+			d(t.$slots, "default"),
+			!c.hideRetry || t.$slots.actions ? (u(), i("div", b, [c.hideRetry ? r("", !0) : (u(), n(e, {
+				key: 0,
+				color: "white",
+				loading: c.retrying,
+				"data-testid": "ac-error-state-retry",
+				onClick: x[0] ||= (e) => C("retry")
+			}, {
+				icon: h(() => [s(m(_))]),
+				default: h(() => [o(" " + p(c.retryText), 1)]),
+				_: 1
+			}, 8, ["loading"])), d(t.$slots, "actions")])) : r("", !0)
+		], 2));
+	}
+});
+//#endregion
+export { x as default };

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

@@ -3,8 +3,12 @@ import type { Tone } from "./types";
 export interface Props {
     /** Name of the feature, product or option. Also the card's accessible name. */
     title: string;
+    /** A short muted line under the title, e.g. "NoSQL database". With an icon, the description then runs the full width of the card below them. */
+    subtitle?: string;
     /** One or two sentences on what it does. Clamped to three lines. Old `card-sub-title` slot. */
     description?: string;
+    /** Lights the border and lifts a soft shadow on hover, as cloud-ui's engine and "Learn more" cards do, for a card that holds its own links but isn't a link itself. */
+    hoverable?: boolean;
     /** A Lucide icon, shown in a tinted tile. Or use the `icon` slot. */
     icon?: Component;
     /** Logo image URL, e.g. a product or cloud-provider logo. Takes the place of `icon`. */
@@ -67,6 +71,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     href: string;
     to: string | Record<string, unknown>;
     status: string;
+    subtitle: string;
+    hoverable: boolean;
     logo: string;
     logoAlt: string;
     statusColor: Tone | "default";