@ac-design/design-system 1.0.3 → 2.1.0

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

@@ -2,9 +2,12 @@ import { computed as e, createBlock as t, createCommentVNode as n, createElement
 import { ArrowRight as g, CircleAlert as _, Info as v, Megaphone as y, TriangleAlert as b, X as x } from "@lucide/vue";
 //#region src/lib/components/AcBanner.vue?vue&type=script&setup=true&lang.ts
 var S = ["role"], C = { class: "flex min-w-0 flex-1 flex-col gap-x-4 gap-y-1.5 sm:flex-row sm:flex-wrap sm:items-center" }, w = { class: "min-w-0" }, T = {
+	key: 0,
+	class: "font-semibold"
+}, E = {
 	key: 1,
 	"aria-hidden": "true"
-}, E = ["href"], D = /*@__PURE__*/ s({
+}, D = ["href"], O = /*@__PURE__*/ s({
 	__name: "AcBanner",
 	props: /*@__PURE__*/ c({
 		color: { default: "info" },
@@ -30,79 +33,76 @@ var S = ["role"], C = { class: "flex min-w-0 flex-1 flex-col gap-x-4 gap-y-1.5 s
 	}),
 	emits: /*@__PURE__*/ c(["action", "close"], ["update:open"]),
 	setup(s, { emit: c }) {
-		let D = s, O = h(s, "open"), k = c, A = {
+		let O = s, k = h(s, "open"), A = c, j = {
 			info: {
-				subtle: "border-blue-90 bg-blue-97 text-blue-20",
+				subtle: "border-info/25 bg-info/10 text-info-strong",
 				solid: "border-black/15 bg-info text-white",
-				icon: "text-blue-50",
+				icon: "text-info-strong",
 				glyph: v
 			},
 			warning: {
-				subtle: "border-yellow-80 bg-yellow-97 text-yellow-20",
+				subtle: "border-warning/30 bg-warning/10 text-warning-strong",
 				solid: "border-black/15 bg-warning text-on-warning",
-				icon: "text-yellow-50",
+				icon: "text-warning-strong",
 				glyph: b
 			},
 			danger: {
-				subtle: "border-red-90 bg-red-97 text-red-20",
+				subtle: "border-danger/25 bg-danger/10 text-danger-strong",
 				solid: "border-black/15 bg-danger text-white",
-				icon: "text-red-40",
+				icon: "text-danger-strong",
 				glyph: _
 			},
 			primary: {
-				subtle: "border-primary-90 bg-primary-97 text-primary-20",
+				subtle: "border-primary/25 bg-primary/10 text-primary-strong",
 				solid: "border-black/15 bg-primary text-white",
-				icon: "text-primary",
+				icon: "text-primary-strong",
 				glyph: y
 			},
 			neutral: {
-				subtle: "border-border bg-surface-muted text-body",
+				subtle: "border-border bg-surface-sunken text-muted",
 				solid: "border-black/15 bg-heading text-surface",
 				icon: "text-muted",
 				glyph: v
 			}
-		}, j = e(() => A[D.color]), M = e(() => D.icon ?? j.value.glyph);
-		function N() {
-			O.value = !1, k("close");
+		}, M = e(() => j[O.color]), N = e(() => O.icon ?? M.value.glyph);
+		function P() {
+			k.value = !1, A("close");
 		}
-		return (e, c) => O.value ? (u(), r("div", {
+		return (e, c) => k.value ? (u(), r("div", {
 			key: 0,
-			class: l(["flex w-full items-start gap-3 border-b px-4 py-2.5 text-base sm:items-center sm:px-6", [j.value[s.variant], s.variant === "solid" ? "[&_a]:text-inherit [&_strong]:text-inherit" : "[&_strong]:text-heading"]]),
+			class: l(["flex w-full items-start gap-3 border-b px-4 py-2.5 text-base sm:items-center sm:px-6 [&_strong]:text-inherit", [M.value[s.variant], s.variant === "solid" && "[&_a]:text-inherit"]]),
 			role: s.color === "danger" || s.color === "warning" ? "alert" : "status",
 			"data-ac-ds": "",
 			"data-testid": "ac-banner"
 		}, [
-			s.hideIcon ? n("", !0) : (u(), t(f(M.value), {
+			s.hideIcon ? n("", !0) : (u(), t(f(N.value), {
 				key: 0,
-				class: l(["mt-0.5 size-4 shrink-0 sm:mt-0", s.variant === "subtle" ? j.value.icon : "opacity-90"]),
+				class: l(["mt-0.5 size-4 shrink-0 sm:mt-0", s.variant === "subtle" ? M.value.icon : "opacity-90"]),
 				"aria-hidden": "true"
 			}, null, 8, ["class"])),
 			i("div", C, [i("p", w, [
-				s.title ? (u(), r("strong", {
-					key: 0,
-					class: l(["font-semibold", s.variant === "subtle" && "text-heading"])
-				}, p(s.title), 3)) : n("", !0),
-				s.title && e.$slots.default ? (u(), r("span", T, " · ")) : n("", !0),
+				s.title ? (u(), r("strong", T, p(s.title), 1)) : n("", !0),
+				s.title && e.$slots.default ? (u(), r("span", E, " · ")) : n("", !0),
 				d(e.$slots, "default")
 			]), d(e.$slots, "action", {}, () => [s.actionLabel && s.actionHref ? (u(), r("a", {
 				key: 0,
 				href: s.actionHref,
-				class: "inline-flex shrink-0 items-center gap-1 font-medium whitespace-nowrap underline decoration-current/40 underline-offset-2 transition hover:decoration-current focus-visible:rounded-2 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring"
+				class: "inline-flex shrink-0 items-center gap-1 font-medium whitespace-nowrap underline decoration-current/40 underline-offset-2 transition-colors duration-200 hover:decoration-current focus-visible:rounded-4 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
 			}, [a(p(s.actionLabel), 1), o(m(g), {
 				class: "size-3.5",
 				"aria-hidden": "true"
-			})], 8, E)) : s.actionLabel ? (u(), r("button", {
+			})], 8, D)) : s.actionLabel ? (u(), r("button", {
 				key: 1,
 				type: "button",
-				class: l(["inline-flex h-7 shrink-0 cursor-pointer items-center self-start rounded-6 border px-2.5 text-xs font-medium whitespace-nowrap transition focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring sm:self-auto", s.variant === "solid" ? "border-current/30 bg-current/10 hover:bg-current/20" : "border-current/25 bg-surface text-heading shadow-xs hover:bg-surface-muted"]),
-				onClick: c[0] ||= (e) => k("action")
+				class: l(["inline-flex h-8 shrink-0 cursor-pointer items-center self-start rounded-10 border px-3 text-base font-medium whitespace-nowrap transition-[color,background-color,border-color,transform] duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none active:translate-y-px motion-reduce:active:translate-y-0 sm:-my-1.5 sm:self-auto", s.variant === "solid" ? "border-current/30 bg-current/10 hover:bg-current/20" : "border-border bg-surface text-heading hover:bg-surface-sunken"]),
+				onClick: c[0] ||= (e) => A("action")
 			}, p(s.actionLabel), 3)) : n("", !0)])]),
 			s.dismissible ? (u(), r("button", {
 				key: 1,
 				type: "button",
-				class: "-my-1 -mr-1.5 inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-6 opacity-75 transition hover:bg-current/10 hover:opacity-100 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+				class: "-my-1.5 -mr-2 inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-8 opacity-75 transition-[background-color,opacity] duration-200 hover:bg-current/10 hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
 				"aria-label": "Dismiss",
-				onClick: N
+				onClick: P
 			}, [o(m(x), {
 				class: "size-4",
 				"aria-hidden": "true"
@@ -111,4 +111,4 @@ var S = ["role"], C = { class: "flex min-w-0 flex-1 flex-col gap-x-4 gap-y-1.5 s
 	}
 });
 //#endregion
-export { D as default };
+export { O as default };

package/dist/lib/components/AcBarChart.js

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

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

@@ -0,0 +1,46 @@
+import type { ChartTooltipSlotProps } from "../charts/ChartFrame.vue";
+import type { XYChartProps } from "../charts/xy";
+export interface Props extends XYChartProps {
+    /** Stacks the series in one bar per row, so its length shows the total. Otherwise the series sit side by side. */
+    stacked?: boolean;
+    /** `vertical` columns, or `horizontal` bars for long category names and rankings. */
+    orientation?: "vertical" | "horizontal";
+    /** Corner radius of each bar's end, in px. */
+    radius?: number;
+    /** Widest a bar (or a group of bars) may get, in px, so a few rows don't make slabs. */
+    barMaxWidth?: number;
+}
+type __VLS_Slots = {
+    /** Replaces the tooltip body for the hovered row. */
+    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: import("../charts/shared").ChartLegendPosition;
+    title: string;
+    description: string;
+    height: number;
+    orientation: "vertical" | "horizontal";
+    radius: number;
+    loading: boolean;
+    animation: boolean;
+    tooltip: boolean;
+    emptyText: string;
+    stacked: boolean;
+    renderer: "canvas" | "svg";
+    gridLines: boolean;
+    zoom: boolean;
+    xFormatter: (value: Date | number | string) => string;
+    yFormatter: (value: number) => string;
+    xLabel: string;
+    yLabel: string;
+    yDomain: [number | undefined, number | undefined];
+    barMaxWidth: number;
+}, {}, {}, {}, 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/AcBarChart.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,213 @@
+import e from "../charts/ChartFrame.js";
+import { bindAxisHover as t, useEChart as n } from "../charts/echarts.js";
+import { readNumber as r } from "../charts/shared.js";
+import { LARGE_DATA as i, useXYChart as a } from "../charts/xy.js";
+import { cartesianOption as o, locateRow as s, prepareZoom as c } from "../charts/cartesian.js";
+import { computed as l, createBlock as u, createElementVNode as d, createSlots as f, defineComponent as p, guardReactiveProps as m, isRef as h, normalizeProps as g, openBlock as _, ref as v, renderSlot as y, unref as b, withCtx as x } from "vue";
+import { ChartColumn as S } from "@lucide/vue";
+import { use as C } from "echarts/core";
+import { BarChart as w } from "echarts/charts";
+import { AxisPointerComponent as T, GridComponent as E } from "echarts/components";
+//#region src/lib/components/AcBarChart.vue?vue&type=script&setup=true&lang.ts
+var D = /*@__PURE__*/ p({
+	__name: "AcBarChart",
+	props: {
+		stacked: {
+			type: Boolean,
+			default: !1
+		},
+		orientation: { default: "vertical" },
+		radius: { default: 4 },
+		barMaxWidth: { default: 48 },
+		data: {},
+		index: {},
+		categories: {},
+		height: { default: 280 },
+		xFormatter: {
+			type: Function,
+			default: void 0
+		},
+		yFormatter: {
+			type: Function,
+			default: void 0
+		},
+		xLabel: { default: "" },
+		yLabel: { default: "" },
+		legend: { default: "top" },
+		tooltip: {
+			type: Boolean,
+			default: !0
+		},
+		gridLines: {
+			type: Boolean,
+			default: !0
+		},
+		yDomain: { default: void 0 },
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		emptyText: { default: "No data to show yet" },
+		title: { default: "" },
+		description: { default: "" },
+		zoom: {
+			type: Boolean,
+			default: !1
+		},
+		renderer: { default: "canvas" },
+		animation: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(p) {
+		C([
+			w,
+			E,
+			T
+		]);
+		let D = p, O = l(() => D.orientation === "horizontal"), k = a(D, {
+			stacked: () => D.stacked,
+			positions: !0,
+			horizontal: () => O.value
+		}), { hidden: A, width: j, legendItems: M, rowLabel: N, tooltipItems: P, tooltipTotal: F, table: I, ariaLabel: L } = k, R = v(), z = v(null);
+		function B(e) {
+			let t = D.radius;
+			return O.value ? e < 0 ? [
+				t,
+				0,
+				0,
+				t
+			] : [
+				0,
+				t,
+				t,
+				0
+			] : e < 0 ? [
+				0,
+				0,
+				t,
+				t
+			] : [
+				t,
+				t,
+				0,
+				0
+			];
+		}
+		function V(e) {
+			return D.data.map((t) => {
+				let n, i;
+				for (let a of e) {
+					let e = r(t, a) ?? 0;
+					e > 0 ? n = a : e < 0 && (i = a);
+				}
+				return {
+					top: n,
+					bottom: i
+				};
+			});
+		}
+		function H(e) {
+			let t = D.data.length > i, n = k.visibleKeys.value, a = D.stacked && !t ? V(n) : [];
+			return n.map((n) => {
+				let o = e.color(k.colorOf.value[n]), s = D.data.map((e) => r(e, n)), c = t ? s : s.map((e, t) => e === null || e === 0 ? e : {
+					value: e,
+					itemStyle: { borderRadius: !D.stacked || a[t]?.top === n || a[t]?.bottom === n ? B(e) : 0 }
+				});
+				return {
+					id: n,
+					type: "bar",
+					name: D.categories[n]?.name ?? n,
+					data: c,
+					stack: D.stacked ? "total" : void 0,
+					barMaxWidth: D.barMaxWidth,
+					barCategoryGap: "30%",
+					barGap: D.stacked ? void 0 : "15%",
+					itemStyle: {
+						color: o,
+						borderColor: e.surface,
+						borderWidth: D.stacked && !t ? 1 : 0
+					},
+					emphasis: { focus: "none" },
+					large: t,
+					largeThreshold: i,
+					progressive: t ? 4e3 : 0
+				};
+			});
+		}
+		return n({
+			host: R,
+			renderer: () => D.renderer,
+			prepare: () => c(D),
+			option: (e) => ({
+				...o(e, D, k, {
+					boundaryGap: !0,
+					horizontal: O.value,
+					pointer: "shadow"
+				}),
+				series: H(e)
+			}),
+			setup: (e) => t(e, (t) => s(e, t, k, O.value), (e, t, n) => {
+				let r = D.data[e];
+				r && D.tooltip && (z.value = {
+					clientX: t,
+					clientY: n,
+					title: N(e),
+					items: P(r),
+					total: D.stacked && k.visibleKeys.value.length > 1 ? F(r) : void 0,
+					datum: r,
+					index: e
+				});
+			}, () => z.value = null)
+		}), (t, n) => (_(), u(e, {
+			hidden: b(A),
+			"onUpdate:hidden": n[0] ||= (e) => h(A) ? A.value = e : null,
+			width: b(j),
+			"onUpdate:width": n[1] ||= (e) => h(j) ? j.value = e : null,
+			testid: "ac-bar-chart",
+			height: p.height,
+			loading: p.loading,
+			empty: !p.data.length,
+			"empty-text": p.emptyText,
+			"empty-icon": b(S),
+			legend: p.legend,
+			"legend-items": b(M),
+			summary: b(L),
+			title: p.title,
+			description: p.description,
+			table: b(I),
+			tip: z.value,
+			tooltip: p.tooltip
+		}, f({
+			default: x(() => [d("div", {
+				ref_key: "host",
+				ref: R,
+				class: "size-full"
+			}, null, 512)]),
+			_: 2
+		}, [t.$slots.tooltip ? {
+			name: "tooltip",
+			fn: x((e) => [y(t.$slots, "tooltip", g(m(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 { D as default };

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

@@ -14,12 +14,15 @@ export interface Props {
     items: BreadcrumbItem[];
     /** Replaces the first item's label with a house icon (the label stays as its accessible name). */
     homeIcon?: boolean;
-    /** With more items than this, the middle ones collapse behind "…" until clicked. */
+    /** With more items than this, the middle ones collapse behind "…" until clicked. `0` (the default) never collapses, as in cloud-ui. */
     maxItems?: number;
+    /** The mark between crumbs: `chevron` or `slash`. */
+    separator?: "chevron" | "slash";
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     homeIcon: boolean;
     maxItems: number;
+    separator: "chevron" | "slash";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,13 +1,13 @@
-import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, getCurrentInstance as c, mergeProps as l, normalizeClass as u, openBlock as d, ref as f, renderList as p, resolveDynamicComponent as m, toDisplayString as h, unref as g, withCtx as _ } from "vue";
-import { ChevronRight as v, House as y } from "@lucide/vue";
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, defineComponent as o, getCurrentInstance as s, mergeProps as c, normalizeClass as l, openBlock as u, ref as d, renderList as f, resolveDynamicComponent as p, toDisplayString as m, unref as h, withCtx as g } from "vue";
+import { ChevronRight as _, House as v, Slash as y } from "@lucide/vue";
 //#region src/lib/components/AcBreadcrumb.vue?vue&type=script&setup=true&lang.ts
 var b = {
 	"aria-label": "Breadcrumb",
 	"data-ac-ds": "",
 	"data-testid": "ac-breadcrumb"
-}, x = { class: "flex min-w-0 flex-wrap items-center gap-1 text-xs text-muted" }, S = {
+}, x = { class: "flex min-w-0 flex-wrap items-center gap-0.5 text-base text-muted" }, S = {
 	key: 0,
-	class: "flex items-center text-slate-60",
+	class: "flex items-center text-muted/50",
 	"aria-hidden": "true"
 }, C = {
 	key: 1,
@@ -15,7 +15,11 @@ var b = {
 }, w = {
 	key: 2,
 	class: "flex min-w-0 items-center"
-}, T = ["aria-current"], E = { class: "truncate" }, D = { class: "truncate" }, O = /*@__PURE__*/ s({
+}, T = ["aria-current"], E = { class: "max-w-64 truncate" }, D = {
+	key: 0,
+	class: "flex size-5 shrink-0 items-center justify-center rounded-8 bg-primary/10 text-primary",
+	"aria-hidden": "true"
+}, O = { class: "max-w-48 truncate" }, k = /*@__PURE__*/ o({
 	__name: "AcBreadcrumb",
 	props: {
 		items: {},
@@ -23,23 +27,24 @@ var b = {
 			type: Boolean,
 			default: !1
 		},
-		maxItems: { default: 4 }
+		maxItems: { default: 0 },
+		separator: { default: "chevron" }
 	},
-	setup(s) {
-		let O = s, k = c()?.appContext.components.RouterLink, A = f(!1), j = t(() => {
-			let e = O.items.map((e, t) => ({
+	setup(o) {
+		let k = o, A = s()?.appContext.components.RouterLink, j = d(!1), M = t(() => {
+			let e = k.items.map((e, t) => ({
 				item: e,
 				index: t
 			}));
-			return A.value || e.length <= O.maxItems ? e : [
+			return j.value || k.maxItems < 3 || e.length <= k.maxItems ? e : [
 				e[0],
 				null,
-				...e.slice(e.length - (O.maxItems - 2))
+				...e.slice(e.length - (k.maxItems - 2))
 			];
 		});
-		function M(e) {
-			if (e.to !== void 0 && k) return {
-				is: k,
+		function N(e) {
+			if (e.to !== void 0 && A) return {
+				is: A,
 				to: e.to
 			};
 			let t = e.href ?? (typeof e.to == "string" ? e.to : void 0);
@@ -48,41 +53,38 @@ var b = {
 				href: t
 			} : null;
 		}
-		return (t, c) => (d(), i("nav", b, [a("ol", x, [(d(!0), i(e, null, p(j.value, (t, f) => (d(), i(e, { key: t ? t.index : "ellipsis" }, [f > 0 ? (d(), i("li", S, [o(g(v), { class: "size-3" })])) : r("", !0), t ? (d(), i("li", w, [t.index === s.items.length - 1 || !M(t.item) ? (d(), i("span", {
+		return (t, s) => (u(), i("nav", b, [a("ol", x, [(u(!0), i(e, null, f(M.value, (t, d) => (u(), i(e, { key: t ? t.index : "ellipsis" }, [d > 0 ? (u(), i("li", S, [(u(), n(p(o.separator === "slash" ? h(y) : h(_)), { class: "size-3.5 shrink-0 rtl:rotate-180" }))])) : r("", !0), t ? (u(), i("li", w, [t.index === o.items.length - 1 || !N(t.item) ? (u(), i("span", {
 			key: 0,
-			class: u(["flex min-w-0 items-center gap-1", t.index === s.items.length - 1 && "font-medium text-heading"]),
-			"aria-current": t.index === s.items.length - 1 ? "page" : void 0
-		}, [t.item.icon ? (d(), n(m(t.item.icon), {
+			class: l(["flex min-w-0 items-center gap-1.5 px-1.5 py-0.5", t.index === o.items.length - 1 && "font-medium text-heading"]),
+			"aria-current": t.index === o.items.length - 1 ? "page" : void 0
+		}, [t.item.icon ? (u(), n(p(t.item.icon), {
 			key: 0,
-			class: "size-3.5 shrink-0",
+			class: "size-4 shrink-0 text-primary",
 			"aria-hidden": "true"
-		})) : r("", !0), a("span", E, h(t.item.label), 1)], 10, T)) : (d(), n(m(M(t.item).is), l({
+		})) : r("", !0), a("span", E, m(t.item.label), 1)], 10, T)) : (u(), n(p(N(t.item).is), c({
 			key: 1,
 			ref_for: !0
 		}, {
-			...M(t.item),
+			...N(t.item),
 			is: void 0
 		}, {
-			class: "flex min-w-0 items-center gap-1 rounded-4 transition-colors hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
-			"aria-label": s.homeIcon && t.index === 0 ? t.item.label : void 0
+			class: "flex min-w-0 items-center gap-1.5 rounded-8 px-1.5 py-0.5 text-muted no-underline transition-colors duration-200 hover:bg-surface-sunken hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+			title: t.item.label,
+			"aria-label": o.homeIcon && t.index === 0 ? t.item.label : void 0
 		}), {
-			default: _(() => [s.homeIcon && t.index === 0 ? (d(), n(g(y), {
-				key: 0,
-				class: "size-3.5 shrink-0",
-				"aria-hidden": "true"
-			})) : (d(), i(e, { key: 1 }, [t.item.icon ? (d(), n(m(t.item.icon), {
+			default: g(() => [o.homeIcon && t.index === 0 ? (u(), n(h(v), {
 				key: 0,
-				class: "size-3.5 shrink-0",
+				class: "size-4 shrink-0",
 				"aria-hidden": "true"
-			})) : r("", !0), a("span", D, h(t.item.label), 1)], 64))]),
+			})) : (u(), i(e, { key: 1 }, [t.item.icon ? (u(), i("span", D, [(u(), n(p(t.item.icon), { class: "size-3.5" }))])) : r("", !0), a("span", O, m(t.item.label), 1)], 64))]),
 			_: 2
-		}, 1040, ["aria-label"]))])) : (d(), i("li", C, [a("button", {
+		}, 1040, ["title", "aria-label"]))])) : (u(), i("li", C, [a("button", {
 			type: "button",
-			class: "cursor-pointer rounded-4 px-1 hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+			class: "cursor-pointer rounded-8 px-1.5 py-0.5 transition-colors duration-200 hover:bg-surface-sunken hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
 			"aria-label": "Show full path",
-			onClick: c[0] ||= (e) => A.value = !0
+			onClick: s[0] ||= (e) => j.value = !0
 		}, " … ")]))], 64))), 128))])]));
 	}
 });
 //#endregion
-export { O as default };
+export { k as default };

package/dist/lib/components/AcBulkActionBar.js

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

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

@@ -0,0 +1,45 @@
+import type { Component } from "vue";
+import type { Tone } from "./types";
+export interface Props {
+    /** How many rows are selected. The bar slides in above 0 and is removed at 0. */
+    count: number;
+    /** Singular noun for one selected row, in lower case, e.g. "subnet" or "Postgres database". */
+    label: string;
+    /** Plural noun when it isn't `label` + "s", e.g. "backup policies". */
+    pluralLabel?: string;
+    /** Text of the batch action button. Pass an empty string to show only the `actions` slot. */
+    actionLabel?: string;
+    /** Colour of the batch action button, tinted (`light`). */
+    actionColor?: Tone;
+    /** Icon before the action text. Defaults to a bin when `actionColor` is `danger`, and no icon otherwise. */
+    actionIcon?: Component;
+    /** Shows a spinner on the action button and disables Clear while the batch request runs. Old cloud-ui `is-loading`. */
+    loading?: boolean;
+}
+type __VLS_Slots = {
+    /** Extra batch buttons, placed before the main action, e.g. a "Download" button. Use `size="small"` buttons. */
+    actions?: () => unknown;
+    /** Same as `actions`, for cloud-ui's `BulkActionBar` markup. */
+    default?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    clear: () => any;
+    action: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onClear?: (() => any) | undefined;
+    onAction?: (() => any) | undefined;
+}>, {
+    loading: boolean;
+    actionLabel: string;
+    actionIcon: Component;
+    actionColor: Tone;
+    pluralLabel: string;
+}, {}, {}, {}, 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;
+    };
+};