@ac-design/design-system 1.0.3 → 2.0.0

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

@@ -1,7 +1,7 @@
 export interface Props {
-    /** Heading, e.g. "Delete Database". */
+    /** Heading, e.g. "Delete database". */
     title?: string;
-    /** The question. The item name is shown in bold after it. */
+    /** The question. The item name follows it in bold monospace. */
     message?: string;
     /** Name of the thing being deleted, e.g. `demo-postgres`. */
     itemName?: string;
@@ -9,7 +9,7 @@ export interface Props {
     detail?: string;
     /** Label of the destructive button. */
     confirmText?: string;
-    /** Requires typing `itemName` before the delete button enables. Use for irreversible deletes. */
+    /** Shows `itemName` in a code chip and requires typing it before the delete button enables. Use for irreversible deletes. */
     confirmByTyping?: boolean;
     /** Shows a spinner on the delete button and blocks closing while the request runs. */
     loading?: boolean;
@@ -36,9 +36,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     title: string;
     loading: boolean;
     message: string;
+    confirmText: string;
     itemName: string;
     detail: string;
-    confirmText: string;
     confirmByTyping: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -1,22 +1,15 @@
 import e from "./AcButton.js";
 import t from "./AcModal.js";
 import n from "./AcInput.js";
-import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeModels as f, openBlock as p, ref as m, renderSlot as h, toDisplayString as g, unref as _, useModel as v, watch as y, withCtx as b } from "vue";
-import { Trash2 as x } from "@lucide/vue";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeModels as f, openBlock as p, ref as m, renderSlot as h, toDisplayString as g, useModel as _, watch as v, withCtx as y } from "vue";
 //#region src/lib/components/AcDeleteModal.vue?vue&type=script&setup=true&lang.ts
-var S = { class: "flex gap-4" }, C = {
-	class: "inline-flex size-10 shrink-0 items-center justify-center rounded-full bg-red-95 text-red-40 ring-8 ring-red-97",
-	"aria-hidden": "true"
-}, w = { class: "min-w-0 flex-1 pt-0.5" }, T = { class: "text-lg leading-6 text-heading" }, E = { class: "font-semibold break-all" }, D = {
+var b = { class: "flex flex-col gap-5" }, x = { class: "text-base text-body" }, S = { class: "font-mono font-semibold break-all text-heading" }, C = {
 	key: 0,
-	class: "mt-1 text-base text-label"
-}, O = {
-	key: 1,
-	class: "mt-4"
-}, k = { class: "mb-2 text-xs text-label" }, A = { class: "rounded-4 bg-surface-muted px-1 py-0.5 font-mono text-heading ring-1 ring-border" }, j = {
-	key: 2,
-	class: "mt-4"
-}, M = /*@__PURE__*/ d({
+	class: "mt-1.5 text-base text-muted"
+}, w = {
+	key: 0,
+	class: "flex flex-col gap-2"
+}, T = { class: "self-start rounded-8 bg-surface-sunken px-2.5 py-1.5 font-mono text-base break-all text-heading" }, E = { key: 1 }, D = /*@__PURE__*/ d({
 	__name: "AcDeleteModal",
 	props: /*@__PURE__*/ f({
 		title: { default: "Delete" },
@@ -41,62 +34,60 @@ var S = { class: "flex gap-4" }, C = {
 	}),
 	emits: /*@__PURE__*/ f(["confirm", "cancel"], ["update:open"]),
 	setup(d, { emit: f }) {
-		let M = d, N = f, P = v(d, "open"), F = m("");
-		y(P, (e) => e && (F.value = ""));
-		let I = i(() => !M.confirmByTyping || F.value === M.itemName), L = () => {
-			P.value = !1, N("cancel");
+		let D = d, O = f, k = _(d, "open"), A = m("");
+		v(k, (e) => e && (A.value = ""));
+		let j = i(() => !D.confirmByTyping || A.value === D.itemName), M = () => {
+			k.value = !1, O("cancel");
 		};
 		return (i, f) => (p(), a(t, {
-			open: P.value,
-			"onUpdate:open": f[2] ||= (e) => P.value = e,
+			open: k.value,
+			"onUpdate:open": f[2] ||= (e) => k.value = e,
 			title: d.title,
 			size: "small",
 			closable: !d.loading,
 			"close-on-outside-click": !d.loading,
-			onClose: f[3] ||= (e) => N("cancel")
+			onClose: f[3] ||= (e) => O("cancel")
 		}, {
-			footer: b(() => [u(e, {
+			footer: y(() => [u(e, {
 				title: "Cancel",
 				color: "white",
 				disabled: d.loading,
 				"data-ac-ds": "",
 				"data-testid": "ac-delete-modal-cancel",
-				onClick: L
+				onClick: M
 			}, null, 8, ["disabled"]), u(e, {
 				title: d.confirmText,
 				color: "danger",
 				loading: d.loading,
-				disabled: !I.value,
+				disabled: !j.value,
 				"data-ac-ds": "",
 				"data-testid": "ac-delete-modal-confirm",
-				onClick: f[1] ||= (e) => N("confirm", d.itemName)
+				onClick: f[1] ||= (e) => O("confirm", d.itemName)
 			}, null, 8, [
 				"title",
 				"loading",
 				"disabled"
 			])]),
-			default: b(() => [c("div", S, [c("span", C, [u(_(x), {
-				class: "size-5",
-				"aria-hidden": "true"
-			})]), c("div", w, [
-				c("p", T, [
+			default: y(() => [c("div", b, [
+				c("div", null, [c("p", x, [
 					l(g(d.message), 1),
-					d.itemName ? (p(), s(r, { key: 0 }, [f[4] ||= l(g(" "), -1), c("strong", E, g(d.itemName), 1)], 64)) : o("", !0),
+					d.itemName ? (p(), s(r, { key: 0 }, [f[4] ||= l(g(" "), -1), c("strong", S, g(d.itemName), 1)], 64)) : o("", !0),
 					f[5] ||= l("? ", -1)
-				]),
-				d.detail ? (p(), s("p", D, g(d.detail), 1)) : o("", !0),
-				d.confirmByTyping && d.itemName ? (p(), s("div", O, [c("p", k, [
-					f[6] ||= l(" Type ", -1),
-					c("code", A, g(d.itemName), 1),
-					f[7] ||= l(" to confirm. ", -1)
-				]), u(n, {
-					modelValue: F.value,
-					"onUpdate:modelValue": f[0] ||= (e) => F.value = e,
-					label: "Resource name",
-					autocomplete: "off"
-				}, null, 8, ["modelValue"])])) : o("", !0),
-				i.$slots.default ? (p(), s("div", j, [h(i.$slots, "default")])) : o("", !0)
-			])])]),
+				]), d.detail ? (p(), s("p", C, g(d.detail), 1)) : o("", !0)]),
+				d.confirmByTyping && d.itemName ? (p(), s("div", w, [
+					f[6] ||= c("p", { class: "text-base text-muted" }, "To confirm, type the name below.", -1),
+					c("code", T, g(d.itemName), 1),
+					u(n, {
+						modelValue: A.value,
+						"onUpdate:modelValue": f[0] ||= (e) => A.value = e,
+						class: "mt-3",
+						label: "Resource name",
+						placeholder: "Enter the name",
+						autocomplete: "off"
+					}, null, 8, ["modelValue"])
+				])) : o("", !0),
+				i.$slots.default ? (p(), s("div", E, [h(i.$slots, "default")])) : o("", !0)
+			])]),
 			_: 3
 		}, 8, [
 			"open",
@@ -107,4 +98,4 @@ var S = { class: "flex gap-4" }, C = {
 	}
 });
 //#endregion
-export { M as default };
+export { D as default };

package/dist/lib/components/AcDonutChart.js

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

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

@@ -0,0 +1,73 @@
+import type { ChartTooltipSlotProps } from "../charts/ChartFrame.vue";
+import type { ChartAccessor, ChartCategory, ChartDatum } from "../charts/shared";
+export interface Props {
+    /** One row per segment, e.g. `{ engine: "Postgres", count: 42 }`. */
+    data: ChartDatum[];
+    /** The segment's key: a field name or a function. Also its name unless `categories` gives one. */
+    index?: ChartAccessor<string>;
+    /** The segment's size: a field name or a function. */
+    value?: ChartAccessor<number>;
+    /** Names and colours per segment key: `{ postgres: { name: "Postgres", color: "chart-1" } }`. Without it, keys are the names and colours follow `chart-1`, `chart-2`… in row order. */
+    categories?: Record<string, ChartCategory>;
+    /** Plot height in px; the ring's diameter fits it. */
+    height?: number;
+    /** Ring thickness in px. `0` draws a pie. */
+    arcWidth?: number;
+    /** Formats values in the legend, tooltip, centre and data table. Defaults to compact numbers: `1.2K`. */
+    valueFormatter?: (value: number) => string;
+    /** Legend to the `right` (it wraps below on narrow screens), `top`, `bottom`, or `none`. Clicking an entry hides or shows that segment. */
+    legend?: "top" | "bottom" | "right" | "none";
+    /** Shows each segment's value in the legend. */
+    legendValues?: boolean;
+    /** Small text under the centre value, e.g. "Databases". */
+    centerLabel?: string;
+    /** Big text in the ring's centre, e.g. the total. Use the `center` slot for anything richer. */
+    centerValue?: string | number;
+    /** Prints each segment's share (`38%`) beside the ring. Segments under 4% are left unlabelled so labels don't collide. */
+    arcLabels?: boolean;
+    /** Shows a tooltip with the segment's value and share on hover. */
+    tooltip?: boolean;
+    /** Shows a skeleton of the same height while data loads. */
+    loading?: boolean;
+    /** Text shown in place of the ring when `data` is empty or every value is 0. */
+    emptyText?: string;
+    /** Accessible name, e.g. "Databases by engine". Show the visible title in the surrounding card. */
+    title?: string;
+    /** A sentence for screen readers on what the chart shows. Defaults to each segment's share. */
+    description?: string;
+}
+type __VLS_Slots = {
+    /** Content in the ring's centre. Gets the visible total, raw and formatted. */
+    center?: (props: {
+        total: number;
+        formatted: string;
+    }) => unknown;
+    /** Replaces the tooltip body for the hovered segment. */
+    tooltip?: (props: ChartTooltipSlotProps) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    legend: "top" | "bottom" | "right" | "none";
+    title: string;
+    value: ChartAccessor<number>;
+    description: string;
+    height: number;
+    loading: boolean;
+    index: ChartAccessor<string>;
+    tooltip: boolean;
+    emptyText: string;
+    categories: Record<string, ChartCategory>;
+    arcWidth: number;
+    valueFormatter: (value: number) => string;
+    legendValues: boolean;
+    centerLabel: string;
+    centerValue: string | number;
+    arcLabels: boolean;
+}, {}, {}, {}, 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/AcDonutChart.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,210 @@
+import e from "../charts/ChartFrame.js";
+import { chartColor as t, chartDuration as n, formatCompact as r, readValue as i } from "../charts/shared.js";
+import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createSlots as u, createVNode as d, defineComponent as f, guardReactiveProps as p, normalizeProps as m, normalizeStyle as h, openBlock as g, ref as _, renderList as v, renderSlot as y, toDisplayString as b, unref as x, withCtx as S } from "vue";
+import { ChartPie as C } from "@lucide/vue";
+import { VisDonut as w, VisSingleContainer as T } from "@unovis/vue";
+import { Donut as E } from "@unovis/ts";
+//#region src/lib/components/AcDonutChart.vue?vue&type=script&setup=true&lang.ts
+var D = {
+	key: 0,
+	class: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center"
+}, O = {
+	key: 0,
+	class: "text-2xl font-semibold tracking-tight text-heading tabular-nums"
+}, k = {
+	key: 1,
+	class: "text-xs text-muted"
+}, A = 24, j = .04, M = /*@__PURE__*/ f({
+	__name: "AcDonutChart",
+	props: {
+		data: {},
+		index: {
+			type: [String, Function],
+			default: "name"
+		},
+		value: {
+			type: [String, Function],
+			default: "value"
+		},
+		categories: { default: void 0 },
+		height: { default: 240 },
+		arcWidth: { default: 24 },
+		valueFormatter: {
+			type: Function,
+			default: void 0
+		},
+		legend: { default: "right" },
+		legendValues: {
+			type: Boolean,
+			default: !0
+		},
+		centerLabel: { default: "" },
+		centerValue: { default: "" },
+		arcLabels: {
+			type: Boolean,
+			default: !1
+		},
+		tooltip: {
+			type: Boolean,
+			default: !0
+		},
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		emptyText: { default: "No data to show yet" },
+		title: { default: "" },
+		description: { default: "" }
+	},
+	setup(f) {
+		let M = f, N = n(), P = _([]), F = _(0), I = _(null), L = o(() => M.data.map((e, t) => String(i(e, t, M.index)))), R = o(() => M.data.map((e, t) => Math.max(0, Number(i(e, t, M.value)) || 0))), z = o(() => R.value.map((e, t) => P.value.includes(L.value[t]) ? 0 : e)), B = o(() => z.value.reduce((e, t) => e + t, 0)), V = o(() => L.value.map((e, n) => t(M.categories?.[e]?.color, n))), H = o(() => L.value.map((e) => M.categories?.[e]?.name ?? e));
+		function U(e) {
+			return M.valueFormatter ? M.valueFormatter(e) : r(e);
+		}
+		function W(e, t = B.value) {
+			return t ? `${Math.round(e / t * 100)}%` : "0%";
+		}
+		let G = o(() => L.value.map((e, t) => ({
+			key: e,
+			name: H.value[t],
+			color: V.value[t],
+			value: M.legendValues ? U(R.value[t]) : void 0
+		}))), K = o(() => R.value.reduce((e, t) => e + t, 0)), q = o(() => ({
+			columns: [
+				"Name",
+				"Value",
+				"Share"
+			],
+			rows: L.value.map((e, t) => [
+				H.value[t],
+				U(R.value[t]),
+				W(R.value[t], K.value)
+			])
+		})), J = o(() => {
+			let e = L.value.map((e, t) => `${H.value[t]} ${W(R.value[t], K.value)}`).join(", ");
+			return [M.title, M.description || `${L.value.length} segments: ${e}.`].filter(Boolean).join(". ");
+		}), Y = o(() => Math.min(F.value || M.height, M.height)), X = o(() => M.arcLabels ? Math.max(40, Y.value / 2 - A) : void 0), Z = o(() => {
+			if (!M.arcLabels || !B.value || !F.value) return [];
+			let e = (X.value ?? Y.value / 2) + A / 2 + 2, t = 0;
+			return z.value.flatMap((n, r) => {
+				let i = (t + n / 2) / B.value * 2 * Math.PI;
+				return t += n, n / B.value < j ? [] : [{
+					key: L.value[r],
+					text: W(n),
+					left: F.value / 2 + e * Math.sin(i),
+					top: M.height / 2 - e * Math.cos(i)
+				}];
+			});
+		}), Q = (e, t) => z.value[t], $ = (e, t) => V.value[t];
+		function ee(e, t) {
+			let n = e.index, r = z.value[n];
+			I.value = {
+				clientX: t.clientX,
+				clientY: t.clientY,
+				title: "",
+				items: [{
+					key: L.value[n],
+					name: H.value[n],
+					color: V.value[n],
+					value: r,
+					formatted: `${U(r)} (${W(r)})`
+				}],
+				datum: e.data,
+				index: n
+			};
+		}
+		function te() {
+			I.value = null;
+		}
+		let ne = { [E.selectors.segment]: {
+			mousemove: ee,
+			mouseleave: te
+		} };
+		return (t, n) => (g(), s(e, {
+			hidden: P.value,
+			"onUpdate:hidden": n[0] ||= (e) => P.value = e,
+			width: F.value,
+			"onUpdate:width": n[1] ||= (e) => F.value = e,
+			testid: "ac-donut-chart",
+			height: f.height,
+			loading: f.loading,
+			empty: !f.data.length || !K.value,
+			"empty-text": f.emptyText,
+			"empty-icon": x(C),
+			legend: f.legend,
+			"legend-items": G.value,
+			"legend-centered": "",
+			summary: J.value,
+			title: f.title,
+			description: f.description,
+			table: q.value,
+			tip: I.value,
+			tooltip: f.tooltip
+		}, u({
+			default: S(() => [
+				d(x(T), {
+					data: f.data,
+					height: f.height,
+					duration: x(N)
+				}, {
+					default: S(() => [d(x(w), {
+						value: Q,
+						color: $,
+						"arc-width": f.arcWidth,
+						radius: X.value,
+						"pad-angle": 0,
+						"corner-radius": f.arcWidth ? 2 : 0,
+						"show-background": !0,
+						events: f.tooltip ? ne : void 0
+					}, null, 8, [
+						"arc-width",
+						"radius",
+						"corner-radius",
+						"events"
+					])]),
+					_: 1
+				}, 8, [
+					"data",
+					"height",
+					"duration"
+				]),
+				t.$slots.center || f.centerValue !== "" || f.centerLabel ? (g(), l("div", D, [y(t.$slots, "center", {
+					total: B.value,
+					formatted: U(B.value)
+				}, () => [f.centerValue === "" ? c("", !0) : (g(), l("span", O, b(f.centerValue), 1)), f.centerLabel ? (g(), l("span", k, b(f.centerLabel), 1)) : c("", !0)])])) : c("", !0),
+				(g(!0), l(a, null, v(Z.value, (e) => (g(), l("span", {
+					key: e.key,
+					class: "pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 text-xs font-medium text-muted tabular-nums",
+					style: h({
+						left: `${e.left}px`,
+						top: `${e.top}px`
+					}),
+					"aria-hidden": "true"
+				}, b(e.text), 5))), 128))
+			]),
+			_: 2
+		}, [t.$slots.tooltip ? {
+			name: "tooltip",
+			fn: S((e) => [y(t.$slots, "tooltip", m(p(e)))]),
+			key: "0"
+		} : void 0]), 1032, [
+			"hidden",
+			"width",
+			"height",
+			"loading",
+			"empty",
+			"empty-text",
+			"empty-icon",
+			"legend",
+			"legend-items",
+			"summary",
+			"title",
+			"description",
+			"table",
+			"tip",
+			"tooltip"
+		]));
+	}
+});
+//#endregion
+export { M as default };

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

@@ -1,5 +1,5 @@
 export interface Props {
-    /** Text of the default trigger button. Without it (and without a `trigger` slot) a ⋮ icon button is shown. */
+    /** Text of the default trigger button. Without it (and without a `trigger` slot) a 32px ⋮ icon button is shown. */
     label?: string;
     /** Accessible name of the menu and of the ⋮ trigger, e.g. "Actions for demo-postgres". */
     menuLabel?: string;

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

@@ -44,9 +44,9 @@ var T = ["aria-label", "disabled"], E = ["aria-labelledby", "aria-label"], D = "
 			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;
+			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 = {
-				[o ? "bottom" : "top"]: `${o ? window.innerHeight - e.top + 4 : e.bottom + 4}px`,
+				[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`
@@ -82,7 +82,7 @@ var T = ["aria-label", "disabled"], E = ["aria-labelledby", "aria-label"], D = "
 			M.value?.contains(t) || N.value?.contains(t) || G(!1);
 		}
 		function Q(e) {
-			e && N.value?.contains(e.target) || K();
+			e?.target instanceof Node && N.value?.contains(e.target) || K();
 		}
 		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));
@@ -118,15 +118,15 @@ var T = ["aria-label", "disabled"], E = ["aria-labelledby", "aria-label"], D = "
 			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"])
+			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), {
 			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"
+			"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"}`,
+			"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", {
 				key: 0,
@@ -138,7 +138,7 @@ var T = ["aria-label", "disabled"], E = ["aria-labelledby", "aria-label"], D = "
 				"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"]),
+				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),
 				"data-ac-ds": "",
 				"data-testid": "ac-dropdown-menu",

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

@@ -2,7 +2,7 @@ import { createCommentVNode as e, createElementBlock as t, createElementVNode as
 //#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"
+	class: "px-3 pt-2 pb-1 text-sm font-semibold tracking-[0.08em] text-muted uppercase"
 }, c = /*@__PURE__*/ r({
 	__name: "AcDropdownDivider",
 	props: { label: { default: "" } },
@@ -13,7 +13,7 @@ var o = ["aria-label"], s = {
 			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));
+		}, [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));
 	}
 });
 //#endregion

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;

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

@@ -2,10 +2,10 @@ import { computed as e, createBlock as t, createCommentVNode as n, createElement
 //#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 = {
 	key: 0,
-	class: "block text-xs text-muted"
+	class: "mt-0.5 block text-xs text-muted"
 }, y = {
 	key: 1,
-	class: "mt-0.5 shrink-0 font-sans text-xs text-muted"
+	class: "mt-0.5 shrink-0 font-sans text-xs text-muted tabular-nums"
 }, b = /*@__PURE__*/ o({
 	__name: "AcDropdownItem",
 	props: {
@@ -53,7 +53,7 @@ var g = { class: "min-w-0 flex-1" }, _ = { class: "block truncate" }, v = {
 			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 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"]),
 			"data-ac-ds": "",
 			"data-testid": "ac-dropdown-item",
 			onClick: E,

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. */
@@ -31,6 +33,7 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     icon: Component;
     size: "small" | "normal" | "large";
     query: string;
+    framed: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;