@ac-design/design-system 0.0.0-stage → 1.0.0

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

@@ -0,0 +1,44 @@
+export interface Props {
+    /** Label shown to the left of the switch. */
+    label?: string;
+    /** Native `name` attribute. */
+    name?: string;
+    /** Disables the switch. */
+    disabled?: boolean;
+    /** Error text under the switch. */
+    errorMsg?: string;
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Content before the label. */
+    left?: () => unknown;
+    /** Content between the label and the switch, e.g. an info icon. */
+    middle?: () => unknown;
+    /** Content after the switch, e.g. a status badge. */
+    right?: () => unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    /** Moves focus to the switch. */
+    focus: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    label: string;
+    disabled: boolean;
+    name: string;
+    errorMsg: 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;
+    };
+};

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

@@ -0,0 +1,67 @@
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, mergeModels as a, mergeProps as o, normalizeClass as s, openBlock as c, ref as l, renderSlot as u, toDisplayString as d, unref as f, useAttrs as p, useId as m, useModel as h } from "vue";
+//#region src/lib/components/AcSwitch.vue?vue&type=script&setup=true&lang.ts
+var g = { class: "flex items-center gap-2" }, _ = ["for"], v = [
+	"id",
+	"name",
+	"aria-checked",
+	"disabled"
+], y = {
+	key: 0,
+	class: "mt-1.5 text-xs text-red-30"
+}, b = /*@__PURE__*/ i({
+	inheritAttrs: !1,
+	__name: "AcSwitch",
+	props: /*@__PURE__*/ a({
+		label: { default: "" },
+		name: { default: "" },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		errorMsg: { default: "" }
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(i, { expose: a }) {
+		let b = h(i, "modelValue"), x = m(), S = p(), C = e(() => ({
+			class: S.class,
+			style: S.style
+		})), w = e(() => {
+			let { class: e, style: t, ...n } = S;
+			return n;
+		}), T = l(null);
+		return a({ focus: () => T.value?.focus() }), (e, a) => (c(), n("div", o(C.value, {
+			"data-ac-ds": "",
+			"data-testid": "ac-switch"
+		}), [r("div", g, [
+			u(e.$slots, "left"),
+			i.label ? (c(), n("label", {
+				key: 0,
+				for: f(x),
+				class: "cursor-pointer text-base text-heading"
+			}, d(i.label), 9, _)) : t("", !0),
+			u(e.$slots, "middle"),
+			r("button", o({
+				id: f(x),
+				ref_key: "button",
+				ref: T
+			}, w.value, {
+				type: "button",
+				role: "switch",
+				name: i.name,
+				"aria-checked": b.value,
+				disabled: i.disabled,
+				class: ["relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-50 p-0.5 inset-shadow-xs transition-colors duration-200 ease-out focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", b.value ? "bg-primary" : "bg-slate-70 hover:bg-slate-60"],
+				onClick: a[0] ||= (e) => b.value = !b.value
+			}), [r("span", { class: s(["inline-block size-4 rounded-full bg-white shadow-md ring-1 ring-black/5 transition-transform duration-200 ease-out-soft", b.value ? "translate-x-4" : "translate-x-0"]) }, null, 2)], 16, v),
+			u(e.$slots, "right")
+		]), i.errorMsg ? (c(), n("p", y, d(i.errorMsg), 1)) : t("", !0)], 16));
+	}
+});
+//#endregion
+export { b as default };

package/dist/lib/components/AcTable.js

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

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

@@ -0,0 +1,98 @@
+import type { CellType, ResourceColumn } from "./AcCellValue.vue";
+export interface Column {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    align?: "left" | "center" | "right";
+    width?: string;
+    /** Shows values with AcCellValue as this type (`auto`, `date`, `labels`, `status`…): dashes for empty values, relative dates, label chips. */
+    type?: CellType;
+    /** A server-side column descriptor. Shows values with AcCellValue; a row value may be a server cell `{ data, link, color }`. */
+    descriptor?: ResourceColumn;
+}
+export interface Props<R> {
+    /** Column definitions: `{ key, label, sortable?, align?, width?, type?, descriptor? }`. `type` or `descriptor` shows values with AcCellValue. */
+    columns: Column[];
+    /** Row objects. Each column's `key` is read from the row. */
+    rows: R[];
+    /** Row property used as the Vue `key`. */
+    rowKey?: string;
+    /** Shows skeleton rows instead of data. */
+    loading?: boolean;
+    /** Number of skeleton rows while loading. */
+    loaderRows?: number;
+    /** Text shown when `rows` is empty (or use the `empty` slot). */
+    emptyText?: string;
+    /** Adds a pointer cursor and emits `row-click`. */
+    clickable?: boolean;
+    /** Adds a checkbox column for choosing rows, e.g. for bulk delete. Bind the chosen rows' `rowKey` values with `v-model:selected`. */
+    selectable?: boolean;
+    /** Adds an arrow column that opens a detail area under each row. Fill it with the `expanded` slot, and bind the open rows' `rowKey` values with `v-model:expanded`. */
+    expandable?: boolean;
+    /** With `expandable`, decides per row whether it can open. Rows that can't show no arrow. */
+    canExpand?: (row: R) => boolean;
+    /** Marks the current row, e.g. the one chosen in a picker: tinted with a primary outline and `aria-current`. Not the checkbox selection, which is `selectable`. */
+    rowActive?: (row: R) => boolean;
+    /** Greys a row out: it ignores clicks and its checkbox is disabled. */
+    rowDisabled?: (row: R) => boolean;
+    /** The table doesn't reorder rows itself: sort the whole list outside (all pages, or on the server) when `sort` fires or `v-model:sortBy` changes. Headers still show the arrow. */
+    manualSort?: boolean;
+    /** Drops the table's own frame (border, rounded corners, shadow) so it sits flush inside a card or section that already has one. Without it a table in a card draws a second box. */
+    flat?: boolean;
+    /** Turns a server cell's link template into a URL, e.g. to fill `${username}` and `${clustername}` from the current route. */
+    resolveLink?: (link: string) => string;
+}
+declare const __VLS_export: <Row extends Record<string, unknown>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<(Props<Row> & {
+        /** `rowKey` values of the chosen rows. Bind with `v-model:selected`. Rows that leave `rows` (another page, a search) stay chosen. */
+        selected?: unknown[];
+        /** `rowKey` values of the rows that are open. Bind with `v-model:expanded`. */
+        expanded?: unknown[];
+        /** The sorted column and direction, or `null`. Bind with `v-model:sortBy` to set it from outside, e.g. to keep it across pages or in the URL. */
+        sortBy?: {
+            key: string;
+            mode: "asc" | "desc";
+        } | null;
+    }) & {
+        onSort?: ((key: string, mode: "desc" | "asc") => any) | undefined;
+        "onRow-click"?: ((row: Row) => any) | undefined;
+        "onUpdate:selected"?: ((value: unknown[]) => any) | undefined;
+        "onUpdate:expanded"?: ((value: unknown[]) => any) | undefined;
+        "onUpdate:sortBy"?: ((value: {
+            key: string;
+            mode: "asc" | "desc";
+        } | null) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        [key: `cell-${string}`]: (props: {
+            row: Row;
+            value: unknown;
+        }) => unknown;
+        [key: `header-${string}`]: (props: {
+            column: Column;
+        }) => unknown;
+        /** Detail area under an open row, for tables with `expandable`: `#expanded="{ row }"`. */
+        expanded?: (props: {
+            row: Row;
+        }) => unknown;
+        /** Content shown when `rows` is empty. */
+        empty?: () => unknown;
+    };
+    emit: (((evt: "sort", key: string, mode: "desc" | "asc") => void) & ((evt: "row-click", row: Row) => void)) & (((event: "update:selected", value: unknown[]) => void) & ((event: "update:expanded", value: unknown[]) => void) & ((event: "update:sortBy", value: {
+        key: string;
+        mode: "asc" | "desc";
+    } | null) => void));
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -0,0 +1,272 @@
+import e from "./AcCellValue.js";
+import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, mergeModels as u, normalizeClass as d, normalizeStyle as f, openBlock as p, renderList as m, renderSlot as h, resolveDynamicComponent as g, toDisplayString as _, unref as v, useId as ee, useModel as y, withModifiers as b } from "vue";
+import { ArrowUp as te, Check as x, ChevronRight as S, ChevronsUpDown as C, Minus as w } from "@lucide/vue";
+//#region src/lib/components/AcTable.vue?vue&type=script&setup=true&lang.ts
+var T = { class: "ac-scrollbar" }, ne = { class: "w-full border-separate border-spacing-0 text-base" }, re = { class: "relative flex size-4" }, ie = [
+	"checked",
+	"indeterminate",
+	"disabled"
+], ae = ["aria-sort", "onClick"], E = {
+	key: 0,
+	class: "h-12 border-b border-border-light pl-3 [tr:last-child_&]:border-0"
+}, oe = {
+	key: 1,
+	class: "h-12 border-b border-border-light pl-4 [tr:last-child_&]:border-0"
+}, se = [
+	"aria-current",
+	"aria-disabled",
+	"onClick"
+], D = [
+	"aria-expanded",
+	"aria-controls",
+	"aria-label",
+	"onClick"
+], ce = { class: "relative flex size-4" }, le = [
+	"checked",
+	"disabled",
+	"aria-label",
+	"onChange"
+], ue = {
+	key: 0,
+	class: "group",
+	"data-testid": "ac-table-detail"
+}, O = ["colspan"], de = ["id", "aria-label"], fe = {
+	key: 0,
+	class: "px-4 py-12 text-center text-muted"
+}, k = "peer size-4 cursor-pointer appearance-none rounded-4 border border-border-dark bg-surface align-middle shadow-xs transition-[background-color,border-color,box-shadow] duration-150 hover:border-slate-60 checked:border-primary checked:bg-primary checked:shadow-button indeterminate:border-primary indeterminate:bg-primary focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", A = /*@__PURE__*/ l({
+	__name: "AcTable",
+	props: /*@__PURE__*/ u({
+		columns: {},
+		rows: {},
+		rowKey: { default: "id" },
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		loaderRows: { default: 3 },
+		emptyText: { default: "No data found" },
+		clickable: {
+			type: Boolean,
+			default: !1
+		},
+		selectable: {
+			type: Boolean,
+			default: !1
+		},
+		expandable: {
+			type: Boolean,
+			default: !1
+		},
+		canExpand: {
+			type: Function,
+			default: void 0
+		},
+		rowActive: {
+			type: Function,
+			default: void 0
+		},
+		rowDisabled: {
+			type: Function,
+			default: void 0
+		},
+		manualSort: {
+			type: Boolean,
+			default: !1
+		},
+		flat: {
+			type: Boolean,
+			default: !1
+		},
+		resolveLink: {
+			type: Function,
+			default: void 0
+		}
+	}, {
+		selected: { default: () => [] },
+		selectedModifiers: {},
+		expanded: { default: () => [] },
+		expandedModifiers: {},
+		sortBy: { default: null },
+		sortByModifiers: {}
+	}),
+	emits: /*@__PURE__*/ u(["row-click", "sort"], [
+		"update:selected",
+		"update:expanded",
+		"update:sortBy"
+	]),
+	setup(l, { emit: u }) {
+		let A = l, j = y(l, "selected"), M = y(l, "expanded"), N = u, P = ee(), F = y(l, "sortBy"), I = n(() => F.value?.key ?? ""), L = n(() => F.value?.mode ?? "asc"), R = (e) => {
+			if (!e.sortable) return;
+			let t = I.value === e.key && L.value === "asc" ? "desc" : "asc";
+			F.value = {
+				key: e.key,
+				mode: t
+			}, N("sort", e.key, t);
+		}, z = n(() => {
+			if (!I.value || A.manualSort) return A.rows;
+			let e = I.value, t = L.value === "asc" ? 1 : -1;
+			return [...A.rows].sort((n, r) => String(V(n[e]) ?? "").localeCompare(String(V(r[e]) ?? ""), void 0, { numeric: !0 }) * t);
+		});
+		function B(e) {
+			return typeof e == "object" && !!e && !Array.isArray(e) && "data" in e;
+		}
+		function V(e) {
+			return B(e) ? e.sort ?? e.data : e;
+		}
+		let H = (e) => !!A.rowDisabled?.(e), U = n(() => A.rows.filter((e) => !H(e)).map((e) => e[A.rowKey])), W = n(() => new Set(j.value)), G = n(() => U.value.length > 0 && U.value.every((e) => W.value.has(e))), K = n(() => !G.value && U.value.some((e) => W.value.has(e)));
+		function pe() {
+			let e = new Set(U.value);
+			j.value = G.value ? j.value.filter((t) => !e.has(t)) : [...j.value, ...U.value.filter((e) => !W.value.has(e))];
+		}
+		function me(e) {
+			let t = e[A.rowKey];
+			j.value = W.value.has(t) ? j.value.filter((e) => e !== t) : [...j.value, t];
+		}
+		let q = n(() => new Set(M.value)), J = (e) => A.expandable && q.value.has(e[A.rowKey]), Y = (e) => !A.canExpand || A.canExpand(e), X = (e) => `${P}-detail-${String(e[A.rowKey])}`, he = n(() => A.columns.length + +!!A.selectable + +!!A.expandable);
+		function ge(e) {
+			let t = e[A.rowKey];
+			M.value = q.value.has(t) ? M.value.filter((e) => e !== t) : [...M.value, t];
+		}
+		function Z(e) {
+			let t = e[A.columns[0]?.key ?? ""], n = B(t) ? t.data : t;
+			return typeof n == "string" || typeof n == "number" ? n : String(e[A.rowKey]);
+		}
+		let Q = n(() => A.flat ? "border-border-light" : "border-border"), $ = (e) => ({
+			left: "text-left",
+			center: "text-center",
+			right: "text-right"
+		})[e.align ?? "left"];
+		return (n, u) => (p(), a("div", {
+			class: d(["w-full overflow-hidden bg-surface", !l.flat && "rounded-10 border border-border shadow-xs"]),
+			"data-ac-ds": "",
+			"data-testid": "ac-table"
+		}, [o("div", T, [o("table", ne, [o("thead", null, [o("tr", null, [
+			l.expandable ? (p(), a("th", {
+				key: 0,
+				scope: "col",
+				class: d(["h-9 w-10 border-b bg-surface-muted pr-0 pl-3", [Q.value, !l.flat && "first:rounded-tl-10"]])
+			}, [...u[2] ||= [o("span", { class: "sr-only" }, "Expand", -1)]], 2)) : i("", !0),
+			l.selectable ? (p(), a("th", {
+				key: 1,
+				scope: "col",
+				class: d(["h-9 w-10 border-b bg-surface-muted pr-0 pl-4", [Q.value, !l.flat && "first:rounded-tl-10"]])
+			}, [o("span", re, [o("input", {
+				type: "checkbox",
+				class: d(k),
+				checked: G.value,
+				indeterminate: K.value,
+				disabled: l.loading || !l.rows.length,
+				"aria-label": "Select all rows",
+				onChange: pe
+			}, null, 40, ie), (p(), r(g(K.value ? v(w) : v(x)), {
+				class: "pointer-events-none absolute inset-0 m-auto size-3 text-white opacity-0 peer-checked:opacity-100 peer-indeterminate:opacity-100",
+				"stroke-width": 3,
+				"aria-hidden": "true"
+			}))])], 2)) : i("", !0),
+			(p(!0), a(t, null, m(l.columns, (e) => (p(), a("th", {
+				key: e.key,
+				scope: "col",
+				class: d(["h-9 border-b bg-surface-muted px-4 text-xs font-medium whitespace-nowrap text-label", [
+					Q.value,
+					!l.flat && "first:rounded-tl-10 last:rounded-tr-10",
+					$(e),
+					e.sortable && "cursor-pointer select-none transition-colors hover:text-heading"
+				]]),
+				style: f(e.width ? { width: e.width } : void 0),
+				"aria-sort": I.value === e.key ? L.value === "asc" ? "ascending" : "descending" : void 0,
+				onClick: (t) => R(e)
+			}, [o("span", { class: d(["inline-flex items-center gap-1", I.value === e.key && "text-heading"]) }, [h(n.$slots, `header-${e.key}`, { column: e }, () => [s(_(e.label), 1)]), e.sortable ? (p(), r(g(I.value === e.key ? v(te) : v(C)), {
+				key: 0,
+				class: d(["size-3 transition-transform", [I.value === e.key ? "text-primary" : "text-slate-60", I.value === e.key && L.value === "desc" && "rotate-180"]]),
+				"aria-hidden": "true"
+			}, null, 8, ["class"])) : i("", !0)], 2)], 14, ae))), 128))
+		])]), o("tbody", null, [l.loading ? (p(!0), a(t, { key: 0 }, m(l.loaderRows, (e) => (p(), a("tr", { key: `loader-${e}` }, [
+			l.expandable ? (p(), a("td", E)) : i("", !0),
+			l.selectable ? (p(), a("td", oe)) : i("", !0),
+			(p(!0), a(t, null, m(l.columns, (t, n) => (p(), a("td", {
+				key: t.key,
+				class: "h-12 border-b border-border-light px-4 [tr:last-child_&]:border-0"
+			}, [o("span", {
+				class: "block h-2.5 animate-pulse rounded-full bg-surface-sunken",
+				style: f({ width: `${50 + (e * 17 + n * 23) % 40}%` })
+			}, null, 4)]))), 128))
+		]))), 128)) : (p(!0), a(t, { key: 1 }, m(z.value, (f, g) => (p(), a(t, { key: String(f[l.rowKey] ?? g) }, [o("tr", {
+			"data-testid": "ac-table-row",
+			class: d(["group transition-colors duration-100 hover:bg-surface-muted/70", [
+				l.clickable && "cursor-pointer",
+				(l.rowActive?.(f) || l.selectable && W.value.has(f[l.rowKey])) && "bg-primary-97",
+				l.rowActive?.(f) && "shadow-[inset_0_0_0_1px_var(--color-primary)]",
+				H(f) && "pointer-events-none cursor-not-allowed opacity-50"
+			]]),
+			"aria-current": l.rowActive?.(f) ? "true" : void 0,
+			"aria-disabled": H(f) || void 0,
+			onClick: (e) => l.clickable && !H(f) && N("row-click", f)
+		}, [
+			l.expandable ? (p(), a("td", {
+				key: 0,
+				class: "h-12 w-10 border-b border-border-light pr-0 pl-3 group-last:border-0",
+				onClick: u[0] ||= b(() => {}, ["stop"])
+			}, [Y(f) ? (p(), a("button", {
+				key: 0,
+				type: "button",
+				class: "inline-flex size-7 cursor-pointer items-center justify-center rounded-6 text-muted transition-colors hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+				"aria-expanded": J(f),
+				"aria-controls": X(f),
+				"aria-label": `${J(f) ? "Collapse" : "Expand"} ${Z(f)}`,
+				"data-testid": "ac-table-expand",
+				onClick: (e) => ge(f)
+			}, [c(v(S), {
+				class: d(["size-4 transition-transform duration-150 motion-reduce:transition-none", J(f) && "rotate-90"]),
+				"aria-hidden": "true"
+			}, null, 8, ["class"])], 8, D)) : i("", !0)])) : i("", !0),
+			l.selectable ? (p(), a("td", {
+				key: 1,
+				class: "h-12 w-10 border-b border-border-light pr-0 pl-4 group-last:border-0",
+				onClick: u[1] ||= b(() => {}, ["stop"])
+			}, [o("span", ce, [o("input", {
+				type: "checkbox",
+				class: d(k),
+				checked: W.value.has(f[l.rowKey]),
+				disabled: H(f),
+				"aria-label": `Select ${Z(f)}`,
+				onChange: (e) => me(f)
+			}, null, 40, le), c(v(x), {
+				class: "pointer-events-none absolute inset-0 m-auto size-3 text-white opacity-0 peer-checked:opacity-100",
+				"stroke-width": 3,
+				"aria-hidden": "true"
+			})])])) : i("", !0),
+			(p(!0), a(t, null, m(l.columns, (i) => (p(), a("td", {
+				key: i.key,
+				class: d(["h-12 border-b border-border-light px-4 whitespace-nowrap text-body tabular-nums group-last:border-0", $(i)])
+			}, [h(n.$slots, `cell-${i.key}`, {
+				row: f,
+				value: f[i.key]
+			}, () => [i.type || i.descriptor ? (p(), r(e, {
+				key: 0,
+				value: B(f[i.key]) ? void 0 : f[i.key],
+				cell: B(f[i.key]) ? f[i.key] : void 0,
+				column: i.descriptor,
+				type: i.type,
+				title: i.label,
+				"resolve-link": l.resolveLink
+			}, null, 8, [
+				"value",
+				"cell",
+				"column",
+				"type",
+				"title",
+				"resolve-link"
+			])) : (p(), a(t, { key: 1 }, [s(_(f[i.key]), 1)], 64))])], 2))), 128))
+		], 10, se), J(f) && Y(f) ? (p(), a("tr", ue, [o("td", {
+			colspan: he.value,
+			class: "border-b border-border-light bg-surface-muted/50 p-0 group-last:border-0"
+		}, [o("div", {
+			id: X(f),
+			role: "region",
+			"aria-label": `Details for ${Z(f)}`,
+			class: "px-4 py-3 text-body"
+		}, [h(n.$slots, "expanded", { row: f })], 8, de)], 8, O)])) : i("", !0)], 64))), 128))])])]), !l.loading && !l.rows.length ? (p(), a("div", fe, [h(n.$slots, "empty", {}, () => [s(_(l.emptyText), 1)])])) : i("", !0)], 2));
+	}
+});
+//#endregion
+export { A as default };

package/dist/lib/components/AcTabs.js

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

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

@@ -0,0 +1,40 @@
+export interface TabItem {
+    key: string;
+    label: string;
+    count?: number;
+    disabled?: boolean;
+    /** Makes the tab a `RouterLink` to this route (needs vue-router in the app). The tab for the current route becomes active by itself. */
+    to?: string | Record<string, unknown>;
+    /** Plain link, when there's no router. */
+    href?: string;
+    /** Sets `data-testid` on the tab, e.g. for Cypress. */
+    testid?: string;
+}
+export interface Props {
+    /** The tabs: `{ key, label, count?, disabled?, to?, href?, testid? }`. `v-model` holds the active `key`. With `to`, it follows the current route. */
+    items: TabItem[];
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Panel content, rendered under the tab list. Receives the active key. */
+    default?: (props: {
+        active: string;
+    }) => unknown;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, 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/AcTabs.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,72 @@
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, defineComponent as s, getCurrentInstance as c, mergeModels as l, mergeProps as u, normalizeClass as d, openBlock as f, renderList as p, renderSlot as m, resolveDynamicComponent as h, toDisplayString as g, useModel as _, watch as v, withCtx as y } from "vue";
+//#region src/lib/components/AcTabs.vue?vue&type=script&setup=true&lang.ts
+var b = {
+	"data-ac-ds": "",
+	"data-testid": "ac-tabs"
+}, x = {
+	role: "tablist",
+	class: "flex gap-5 overflow-x-auto overflow-y-hidden border-b border-border-light [scrollbar-width:none]"
+}, S = {
+	key: 0,
+	role: "tabpanel",
+	class: "pt-5"
+}, C = /*@__PURE__*/ s({
+	__name: "AcTabs",
+	props: /*@__PURE__*/ l({ items: {} }, {
+		modelValue: { default: "" },
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(s) {
+		let l = s, C = _(s, "modelValue"), w = c()?.appContext, T = w?.components.RouterLink, E = w?.config.globalProperties.$router, D = t(() => {
+			if (!E) return "";
+			let e = E.currentRoute.value.path, t = "", n = -1;
+			for (let r of l.items) {
+				if (r.to === void 0 || r.disabled) continue;
+				let i;
+				try {
+					i = E.resolve(r.to).path;
+				} catch {
+					continue;
+				}
+				if (i === e) return r.key;
+				let a = i.endsWith("/") ? i : `${i}/`;
+				e.startsWith(a) && i.length > n && (t = r.key, n = i.length);
+			}
+			return t;
+		});
+		v(D, (e) => e && (C.value = e), { immediate: !0 });
+		function O(e) {
+			return e.to !== void 0 && T && !e.disabled ? T : e.href || typeof e.to == "string" ? "a" : "button";
+		}
+		function k(e) {
+			let t = O(e), n = { "data-testid": e.testid };
+			return t === T ? n.to = e.to : t === "a" ? e.disabled ? n["aria-disabled"] = "true" : n.href = e.href ?? e.to : (n.type = "button", n.disabled = e.disabled || void 0), n;
+		}
+		function A(e, t) {
+			if (e.disabled) {
+				t.preventDefault();
+				return;
+			}
+			C.value = e.key;
+		}
+		return (t, c) => (f(), i("div", b, [a("div", x, [(f(!0), i(e, null, p(s.items, (e) => (f(), n(h(O(e)), u({ key: e.key }, { ref_for: !0 }, k(e), {
+			role: "tab",
+			"aria-selected": C.value === e.key,
+			class: ["relative -mb-px inline-flex h-10 cursor-pointer items-center gap-2 border-b-2 text-base font-medium whitespace-nowrap transition-colors duration-150 focus-visible:rounded-4 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring no-underline disabled:cursor-not-allowed disabled:opacity-40 aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-40", C.value === e.key ? "border-primary text-heading" : "border-transparent text-muted hover:border-border-dark hover:text-heading"],
+			onClick: (t) => A(e, t)
+		}), {
+			default: y(() => [o(g(e.label) + " ", 1), e.count === void 0 ? r("", !0) : (f(), i("span", {
+				key: 0,
+				class: d(["inline-flex h-4.5 min-w-4.5 items-center justify-center rounded-50 px-1.5 text-sm leading-none tabular-nums", C.value === e.key ? "bg-primary-95 text-primary-10" : "bg-surface-sunken text-label"])
+			}, g(e.count), 3))]),
+			_: 2
+		}, 1040, [
+			"aria-selected",
+			"class",
+			"onClick"
+		]))), 128))]), t.$slots.default ? (f(), i("div", S, [m(t.$slots, "default", { active: C.value })])) : r("", !0)]));
+	}
+});
+//#endregion
+export { C as default };

package/dist/lib/components/AcTag.js

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

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

@@ -0,0 +1,41 @@
+import type { Tone } from "./types";
+export interface Props {
+    /** Text of the tag. The default slot overrides it. */
+    label?: string;
+    /** `neutral` for most labels; a tone to group filters by kind, e.g. environment or region. */
+    color?: Tone | "neutral";
+    /** Pill shape (`rounded-50`) instead of the 6px control radius. */
+    rounded?: boolean;
+    /** Shows a remove button that emits `remove`. */
+    removable?: boolean;
+    /** Key of a key–value tag such as a Kubernetes label (`app=postgres`). Setting it switches to the two-part style. */
+    keyLabel?: string;
+    /** Value of a key–value tag. Shown after `keyLabel`, tinted with `color`. */
+    valueLabel?: string;
+}
+type __VLS_Slots = {
+    /** Tag content. Replaces `label`, or the value in key–value mode. */
+    default?: () => unknown;
+    /** A 14px icon before the text, e.g. a cloud provider or resource kind. */
+    icon?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    remove: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onRemove?: (() => any) | undefined;
+}>, {
+    label: string;
+    color: Tone | "neutral";
+    rounded: boolean;
+    removable: boolean;
+    keyLabel: string;
+    valueLabel: 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;
+    };
+};