@ac-design/design-system 2.0.0 → 2.1.0

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

@@ -1,7 +1,7 @@
-import e from "./AcSpinner.js";
-import { Teleport as t, createBlock as n, createCommentVNode as r, createElementVNode as i, createTextVNode as a, defineComponent as o, mergeProps as s, openBlock as c, renderSlot as l, toDisplayString as u } from "vue";
+import e from "./AcLoader.js";
+import { Teleport as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, mergeProps as l, openBlock as u, renderSlot as d, toDisplayString as f } from "vue";
 //#region src/lib/components/AcPreloader.vue?vue&type=script&setup=true&lang.ts
-var d = { class: "max-w-80 text-base text-muted" }, f = /*@__PURE__*/ o({
+var p = { key: 0 }, m = { class: "max-w-80 text-base text-muted" }, h = /*@__PURE__*/ c({
 	inheritAttrs: !1,
 	__name: "AcPreloader",
 	props: {
@@ -16,24 +16,23 @@ var d = { class: "max-w-80 text-base text-muted" }, f = /*@__PURE__*/ o({
 		},
 		minHeight: { default: "240px" }
 	},
-	setup(o) {
-		return (f, p) => (c(), n(t, {
+	setup(c) {
+		return (h, g) => (u(), n(t, {
 			to: "body",
-			disabled: !o.fullPage
-		}, [i("div", s(f.$attrs, {
+			disabled: !c.fullPage
+		}, [a("div", l(h.$attrs, {
 			role: "status",
 			"aria-live": "polite",
-			class: ["flex flex-col items-center justify-center gap-4 px-4 text-center", o.fullPage ? "fixed inset-0 z-[80] bg-background" : "size-full"],
-			style: o.fullPage ? void 0 : { minHeight: o.minHeight },
+			class: ["flex flex-col items-center justify-center gap-4 px-4 text-center", c.fullPage ? "fixed inset-0 z-[80] bg-background" : "size-full"],
+			style: c.fullPage ? void 0 : { minHeight: c.minHeight },
 			"data-ac-ds": "",
 			"data-testid": "ac-preloader"
-		}), [o.showSpinner ? (c(), n(e, {
-			key: 0,
-			size: o.fullPage ? "large" : "normal",
-			class: "text-primary",
-			label: ""
-		}, null, 8, ["size"])) : r("", !0), i("div", d, [l(f.$slots, "default", {}, () => [a(u(o.message), 1)])])], 16)], 8, ["disabled"]));
+		}), [c.showSpinner ? (u(), i("div", p, [s(e, {
+			size: c.fullPage ? "large" : "normal",
+			label: "",
+			"aria-hidden": "true"
+		}, null, 8, ["size"])])) : r("", !0), a("div", m, [d(h.$slots, "default", {}, () => [o(f(c.message), 1)])])], 16)], 8, ["disabled"]));
 	}
 });
 //#endregion
-export { f as default };
+export { h as default };

package/dist/lib/components/AcProductHero.js

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

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

@@ -0,0 +1,56 @@
+export interface Props {
+    /** The headline in the heading colour, e.g. "Managed Databases." or "Business-ready". */
+    title?: string;
+    /** The part of the headline in the primary gradient, after `title`, e.g. "Simplified." or "Kubernetes". Leave `title` empty for an all-green headline such as "VMs in minutes.". */
+    highlight?: string;
+    /** One or two sentences under the headline on what the product does for the reader. */
+    description?: string;
+    /** Small uppercase label above the price. */
+    priceLabel?: string;
+    /** The starting price, e.g. "$4". Hides the price block when empty. */
+    price?: string;
+    /** Unit after the price, e.g. "/mo". */
+    pricePeriod?: string;
+    /** Benefits listed in the card with green check-circles. */
+    features?: string[];
+    /** Text of the full-width button at the bottom of the card, e.g. "Create Virtual Machine". Hides the button when empty. */
+    actionLabel?: string;
+    /** Makes the button a `RouterLink` to this route. Needs vue-router in the app; without it a string is used as `href`. */
+    actionTo?: string | Record<string, unknown>;
+    /** Makes the button a plain link. */
+    actionHref?: string;
+}
+type __VLS_Slots = {
+    /** Replaces the headline's text inside the `<h1>`. Wrap the green part in a span with the classes from the Theme table. */
+    title?: () => unknown;
+    /** Extra content under the description, e.g. a secondary link or badges. */
+    default?: () => unknown;
+    /** Replaces the card's whole body: price, features and button. */
+    card?: () => unknown;
+    /** Replaces the card's button, e.g. with two buttons or a disabled one with a tooltip. */
+    actions?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    action: (e: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onAction?: ((e: MouseEvent) => any) | undefined;
+}>, {
+    title: string;
+    description: string;
+    actionLabel: string;
+    actionHref: string;
+    highlight: string;
+    priceLabel: string;
+    price: string;
+    pricePeriod: string;
+    features: string[];
+    actionTo: string | Record<string, unknown>;
+}, {}, {}, {}, 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/AcProductHero.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,95 @@
+import e from "./AcButton.js";
+import t from "./AcCheckList.js";
+import { Fragment as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createStaticVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, getCurrentInstance as f, normalizeClass as p, openBlock as m, renderSlot as h, resolveDynamicComponent as g, toDisplayString as _, unref as v, useId as y, useSlots as b, withCtx as x } from "vue";
+//#region src/lib/components/AcProductHero.vue?vue&type=script&setup=true&lang.ts
+var S = ["aria-labelledby"], C = { class: "mx-auto flex max-w-page flex-col items-start justify-between gap-7 px-4 lg:flex-row lg:items-center lg:gap-10" }, w = ["id"], T = {
+	key: 1,
+	class: "box-decoration-clone bg-linear-to-r from-primary via-[color-mix(in_srgb,var(--color-primary)_80%,var(--color-chart-6))] to-[color-mix(in_srgb,var(--color-primary)_45%,var(--color-chart-6))] bg-clip-text text-transparent"
+}, E = {
+	key: 0,
+	class: "m-0 max-w-2xl text-lg leading-relaxed text-balance text-muted md:text-xl"
+}, D = {
+	key: 0,
+	class: "group relative isolate w-full shrink-0 overflow-hidden rounded-16 border border-border bg-surface/85 p-5 backdrop-blur-md transition-[translate,box-shadow,border-color] duration-[360ms] ease-out-soft hover:-translate-y-1 hover:shadow-xl motion-reduce:transition-none motion-reduce:hover:translate-y-0 lg:w-1/3",
+	"data-testid": "ac-product-hero-card"
+}, O = {
+	key: 0,
+	class: "mb-3"
+}, k = {
+	key: 0,
+	class: "text-xs font-semibold tracking-wide text-muted uppercase"
+}, A = { class: "m-0 mt-1 text-3xl font-bold tracking-tight text-heading md:text-4xl" }, j = /*@__PURE__*/ d({
+	__name: "AcProductHero",
+	props: {
+		title: { default: "" },
+		highlight: { default: "" },
+		description: { default: "" },
+		priceLabel: { default: "Starting at" },
+		price: { default: "" },
+		pricePeriod: { default: "" },
+		features: { default: () => [] },
+		actionLabel: { default: "" },
+		actionTo: { default: void 0 },
+		actionHref: { default: void 0 }
+	},
+	emits: ["action"],
+	setup(d, { emit: j }) {
+		let M = d, N = j, P = b(), F = f()?.appContext.components.RouterLink, I = y(), L = r(() => M.actionTo !== void 0 && !!F), R = r(() => M.actionHref ?? (typeof M.actionTo == "string" ? M.actionTo : void 0));
+		function z() {
+			return !!(P.card || P.actions || M.price || M.features.length || M.actionLabel);
+		}
+		function B(e, t) {
+			N("action", e), t?.(e);
+		}
+		return (r, f) => (m(), o("section", {
+			class: "relative isolate overflow-hidden bg-linear-to-br from-primary/8 via-background to-surface-sunken/35 py-12 lg:py-16",
+			"aria-labelledby": `${v(I)}-title`,
+			"data-ac-ds": "",
+			"data-testid": "ac-product-hero"
+		}, [f[2] ||= c("<div class=\"pointer-events-none absolute inset-0 -z-10\" aria-hidden=\"true\"><div class=\"absolute inset-0 bg-[linear-gradient(to_right,color-mix(in_srgb,var(--color-border)_25%,transparent)_1px,transparent_1px),linear-gradient(to_bottom,color-mix(in_srgb,var(--color-border)_25%,transparent)_1px,transparent_1px)] bg-size-[40px_40px] opacity-50 [mask-image:linear-gradient(to_bottom,black_20%,transparent_95%)]\"></div><div class=\"absolute -top-16 left-[8%] size-44 rounded-full bg-primary/20 opacity-60 blur-3xl\"></div><div class=\"absolute top-10 right-[12%] size-32 rounded-full bg-primary/15 opacity-60 blur-2xl\"></div><div class=\"absolute bottom-0 left-0 h-44 w-full bg-linear-to-t from-background/70 to-transparent\"></div></div>", 1), s("div", C, [s("div", { class: p(["flex min-w-0 flex-col gap-4", z() ? "w-full lg:w-2/3" : "w-full"]) }, [
+			s("h1", {
+				id: `${v(I)}-title`,
+				class: "m-0 max-w-4xl font-heading text-5xl leading-[1.05] font-bold tracking-tight break-words text-heading md:text-6xl lg:text-[60px]"
+			}, [h(r.$slots, "title", {}, () => [d.title ? (m(), o(n, { key: 0 }, [l(_(d.highlight ? `${d.title} ` : d.title), 1)], 64)) : a("", !0), d.highlight ? (m(), o("span", T, _(d.highlight), 1)) : a("", !0)])], 8, w),
+			d.description ? (m(), o("p", E, _(d.description), 1)) : a("", !0),
+			h(r.$slots, "default")
+		], 2), z() ? (m(), o("div", D, [f[1] ||= s("div", {
+			class: "pointer-events-none absolute inset-0 -z-10 bg-linear-to-r from-transparent via-primary/10 to-transparent opacity-0 transition-opacity duration-700 ease-out-soft group-hover:opacity-100 motion-reduce:transition-none",
+			"aria-hidden": "true"
+		}, null, -1), h(r.$slots, "card", {}, () => [
+			d.price ? (m(), o("div", O, [d.priceLabel ? (m(), o("span", k, _(d.priceLabel), 1)) : a("", !0), s("p", A, _(d.price) + _(d.pricePeriod), 1)])) : a("", !0),
+			d.features.length ? (m(), i(t, {
+				key: 1,
+				items: d.features,
+				class: "mb-5"
+			}, null, 8, ["items"])) : a("", !0),
+			h(r.$slots, "actions", {}, () => [d.actionLabel ? (m(), o(n, { key: 0 }, [L.value ? (m(), i(g(v(F)), {
+				key: 0,
+				to: d.actionTo,
+				custom: ""
+			}, {
+				default: x(({ href: t, navigate: n }) => [u(e, {
+					title: d.actionLabel,
+					href: t,
+					size: "medium",
+					class: "w-full",
+					onClick: (e) => B(e, n)
+				}, null, 8, [
+					"title",
+					"href",
+					"onClick"
+				])]),
+				_: 1
+			}, 8, ["to"])) : (m(), i(e, {
+				key: 1,
+				title: d.actionLabel,
+				href: R.value,
+				size: "medium",
+				class: "w-full",
+				onClick: f[0] ||= (e) => B(e)
+			}, null, 8, ["title", "href"]))], 64)) : a("", !0)])
+		])])) : a("", !0)])], 8, S));
+	}
+});
+//#endregion
+export { j as default };

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

@@ -1,9 +1,22 @@
 import type { Tone } from "./types";
+/** One coloured part of a segmented bar. */
+export interface ProgressSegment {
+    /** The part's amount, in the same unit as the other segments. */
+    value: number;
+    /** Fill colour. Without it, segments take the chart palette in order. */
+    color?: Tone | "pending" | "neutral";
+    /** Name in the legend and the accessible summary, e.g. "Healthy". */
+    label?: string;
+}
 export interface Props {
-    /** Current amount, from 0 to `max`. Ignored while `indeterminate`. */
+    /** Current amount, from 0 to `max`. Ignored while `indeterminate` or when `segments` is set. */
     value?: number;
-    /** The amount that fills the bar. */
+    /** The amount that fills the bar: 100 for a single value. With `segments`, the sum of the segments unless you set it. */
     max?: number;
+    /** Splits the bar into coloured parts, e.g. healthy, warning and hard-limit quotas: `{ value, color?, label? }[]`. Replaces `value`. */
+    segments?: ProgressSegment[];
+    /** Segments only: where the legend goes. `auto` puts it to the `right` of the bar when any segment has a `label`; `bottom` puts it under; `false` hides it. */
+    legend?: boolean | "auto" | "right" | "bottom";
     /** Text above the bar, e.g. "Storage". Also the bar's accessible name. */
     label?: string;
     /** Shows the value to the right of the label: the percentage, or `valueText` when set. */
@@ -19,6 +32,7 @@ export interface Props {
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     label: string;
+    legend: boolean | "auto" | "right" | "bottom";
     value: number;
     color: Tone | "auto";
     max: number;
@@ -26,6 +40,7 @@ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {},
     indeterminate: boolean;
     valueText: string;
     showValue: boolean;
+    segments: ProgressSegment[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,24 +1,33 @@
-import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, normalizeStyle as o, openBlock as s, toDisplayString as c, unref as l, useId as u } from "vue";
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, openBlock as l, renderList as u, toDisplayString as d, unref as f, useId as p } from "vue";
 //#region src/lib/components/AcProgress.vue?vue&type=script&setup=true&lang.ts
-var d = {
+var m = {
 	class: "w-full",
 	"data-ac-ds": "",
 	"data-testid": "ac-progress"
-}, f = {
+}, h = {
 	key: 0,
 	class: "mb-2 flex items-baseline justify-between gap-3 text-base"
-}, p = ["id"], m = [
+}, g = ["id"], _ = ["aria-label"], v = {
+	key: 0,
+	class: "flex shrink-0 flex-wrap items-center gap-x-3 gap-y-1",
+	"aria-hidden": "true"
+}, y = { class: "tabular-nums" }, b = [
 	"aria-labelledby",
 	"aria-label",
 	"aria-valuemax",
 	"aria-valuenow",
 	"aria-valuetext",
 	"aria-busy"
-], h = /*@__PURE__*/ i({
+], x = /*@__PURE__*/ o({
 	__name: "AcProgress",
 	props: {
 		value: { default: 0 },
-		max: { default: 100 },
+		max: { default: void 0 },
+		segments: { default: void 0 },
+		legend: {
+			type: [Boolean, String],
+			default: "auto"
+		},
 		label: { default: "" },
 		showValue: {
 			type: Boolean,
@@ -32,45 +41,90 @@ var d = {
 		},
 		size: { default: "normal" }
 	},
-	setup(i) {
-		let h = i, g = {
+	setup(o) {
+		let x = o, S = {
 			primary: "bg-primary",
 			info: "bg-info",
 			success: "bg-success",
 			warning: "bg-warning",
 			danger: "bg-danger"
-		}, _ = {
+		}, C = {
+			...S,
+			pending: "bg-pending",
+			neutral: "bg-chart-8"
+		}, w = [
+			"bg-chart-1",
+			"bg-chart-2",
+			"bg-chart-3",
+			"bg-chart-4",
+			"bg-chart-5",
+			"bg-chart-6",
+			"bg-chart-7",
+			"bg-chart-8"
+		], T = {
 			small: "h-1",
 			normal: "h-1.5",
 			large: "h-2.5"
-		}, v = u(), y = e(() => h.max <= 0 ? 0 : Math.min(100, Math.max(0, h.value / h.max * 100))), b = e(() => h.color === "auto" ? y.value >= 95 ? "danger" : y.value >= 80 ? "warning" : "primary" : h.color), x = e(() => h.valueText || `${Math.round(y.value)}%`), S = e(() => !!h.label || h.showValue && !h.indeterminate);
-		return (e, u) => (s(), n("div", d, [S.value ? (s(), n("div", f, [i.label ? (s(), n("span", {
+		}, E = p(), D = t(() => !!x.segments?.length), O = t(() => (x.segments ?? []).reduce((e, t) => e + Math.max(0, t.value), 0)), k = t(() => x.max ?? (D.value ? O.value : 100)), A = t(() => {
+			if (k.value <= 0) return 0;
+			let e = D.value ? O.value : x.value;
+			return Math.min(100, Math.max(0, e / k.value * 100));
+		}), j = t(() => (x.segments ?? []).map((e, t) => ({
+			key: `${t}-${e.label ?? ""}`,
+			label: e.label ?? "",
+			value: e.value,
+			fill: e.color ? C[e.color] : w[t % w.length],
+			width: k.value > 0 ? Math.max(0, e.value) / k.value * 100 : 0
+		}))), M = t(() => !D.value || x.legend === !1 ? null : x.legend === "bottom" ? "bottom" : x.legend === "auto" ? j.value.some((e) => e.label) ? "right" : null : "right"), N = t(() => {
+			let e = j.value.map((e, t) => `${e.label || `Part ${t + 1}`} ${e.value}`).join(", ");
+			return x.label ? `${x.label}: ${e}` : e;
+		}), P = t(() => x.color === "auto" ? A.value >= 95 ? "danger" : A.value >= 80 ? "warning" : "primary" : x.color), F = t(() => x.valueText || `${Math.round(A.value)}%`), I = t(() => x.indeterminate && !D.value), L = t(() => !!x.label || x.showValue && !I.value);
+		return (t, p) => (l(), r("div", m, [L.value ? (l(), r("div", h, [o.label ? (l(), r("span", {
 			key: 0,
-			id: `${l(v)}-label`,
+			id: `${f(E)}-label`,
 			class: "min-w-0 truncate font-medium text-heading"
-		}, c(i.label), 9, p)) : t("", !0), i.showValue && !i.indeterminate ? (s(), n("span", {
+		}, d(o.label), 9, g)) : n("", !0), o.showValue && !I.value ? (l(), r("span", {
 			key: 1,
-			class: a(["ml-auto shrink-0 text-xs tabular-nums", i.color === "auto" && b.value !== "primary" ? b.value === "danger" ? "font-medium text-danger-strong" : "font-medium text-warning-strong" : "text-muted"]),
+			class: s(["ml-auto shrink-0 text-xs tabular-nums", o.color === "auto" && P.value !== "primary" ? P.value === "danger" ? "font-medium text-danger-strong" : "font-medium text-warning-strong" : "text-muted"]),
 			"aria-hidden": "true"
-		}, c(x.value), 3)) : t("", !0)])) : t("", !0), r("div", {
+		}, d(F.value), 3)) : n("", !0)])) : n("", !0), D.value ? (l(), r("div", {
+			key: 1,
+			class: s(["flex", M.value === "bottom" ? "flex-col gap-2" : "flex-wrap items-center gap-x-4 gap-y-2"])
+		}, [i("div", {
+			role: "img",
+			"aria-label": N.value,
+			class: s(["flex min-w-[120px] flex-1 overflow-hidden rounded-full bg-surface-sunken", T[o.size]])
+		}, [(l(!0), r(e, null, u(j.value, (t) => (l(), r(e, { key: t.key }, [t.width > 0 ? (l(), r("div", {
+			key: 0,
+			class: s(["h-full shrink-0 transition-[width] duration-300 ease-out motion-reduce:transition-none", t.fill]),
+			style: c({ width: `${t.width}%` })
+		}, null, 6)) : n("", !0)], 64))), 128))], 10, _), M.value ? (l(), r("ul", v, [(l(!0), r(e, null, u(j.value, (e) => (l(), r("li", {
+			key: e.key,
+			class: "flex items-center gap-1.5 text-xs leading-4 text-muted"
+		}, [
+			i("span", { class: s(["size-1.5 shrink-0 rounded-full", e.fill]) }, null, 2),
+			a(" " + d(e.label) + " ", 1),
+			i("span", y, d(e.value), 1)
+		]))), 128))])) : n("", !0)], 2)) : (l(), r("div", {
+			key: 2,
 			role: "progressbar",
-			"aria-labelledby": i.label ? `${l(v)}-label` : void 0,
-			"aria-label": i.label ? void 0 : "Progress",
+			"aria-labelledby": o.label ? `${f(E)}-label` : void 0,
+			"aria-label": o.label ? void 0 : "Progress",
 			"aria-valuemin": "0",
-			"aria-valuemax": i.indeterminate ? void 0 : i.max,
-			"aria-valuenow": i.indeterminate ? void 0 : Math.min(i.max, Math.max(0, i.value)),
-			"aria-valuetext": i.indeterminate ? void 0 : x.value,
-			"aria-busy": i.indeterminate || void 0,
-			class: a(["relative w-full overflow-hidden rounded-full bg-surface-sunken", _[i.size]])
-		}, [i.indeterminate ? (s(), n("div", {
+			"aria-valuemax": o.indeterminate ? void 0 : k.value,
+			"aria-valuenow": o.indeterminate ? void 0 : Math.min(k.value, Math.max(0, o.value)),
+			"aria-valuetext": o.indeterminate ? void 0 : F.value,
+			"aria-busy": o.indeterminate || void 0,
+			class: s(["relative w-full overflow-hidden rounded-full bg-surface-sunken", T[o.size]])
+		}, [o.indeterminate ? (l(), r("div", {
 			key: 0,
-			class: a(["ac-progress-indeterminate absolute inset-y-0 left-0 w-2/5 rounded-full motion-reduce:w-full motion-reduce:opacity-40", g[b.value]])
-		}, null, 2)) : (s(), n("div", {
+			class: s(["ac-progress-indeterminate absolute inset-y-0 left-0 w-2/5 rounded-full motion-reduce:w-full motion-reduce:opacity-40", S[P.value]])
+		}, null, 2)) : (l(), r("div", {
 			key: 1,
-			class: a(["h-full rounded-full transition-[width,background-color] duration-300 ease-out motion-reduce:transition-none", g[b.value]]),
-			style: o({ width: `${y.value}%` })
-		}, null, 6))], 10, m)]));
+			class: s(["h-full rounded-full transition-[width,background-color] duration-300 ease-out motion-reduce:transition-none", S[P.value]]),
+			style: c({ width: `${A.value}%` })
+		}, null, 6))], 10, b))]));
 	}
 });
 //#endregion
-export { h as default };
+export { x as default };

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

@@ -89,10 +89,10 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     loading: boolean;
     subtitle: string;
     mono: boolean;
+    columns: 1 | 2 | 3 | 4;
     logo: string;
     logoAlt: string;
     statusColor: Tone | "default";
-    columns: 1 | 2 | 3 | 4;
     statusLoading: boolean;
     tags: (ResourceTag | string)[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,8 +1,8 @@
 import e from "./AcSpinner.js";
 import t from "./AcBadge.js";
 import n from "./AcSkeleton.js";
-import r from "./AcTag.js";
-import i from "./AcDropdown.js";
+import r from "./AcDropdown.js";
+import i from "./AcTag.js";
 import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createSlots as d, createTextVNode as f, createVNode as p, defineComponent as m, getCurrentInstance as h, mergeProps as g, normalizeClass as _, openBlock as v, renderList as y, renderSlot as b, resolveDynamicComponent as x, toDisplayString as S, unref as C, useId as w, useSlots as T, withCtx as E } from "vue";
 //#region src/lib/components/AcResourceCard.vue?vue&type=script&setup=true&lang.ts
 var D = ["aria-labelledby", "aria-disabled"], O = { class: "flex min-w-0 items-start gap-3 p-5" }, k = ["aria-hidden"], A = ["src", "alt"], j = { class: "min-w-0 flex-1" }, M = ["id", "title"], N = ["title"], P = {
@@ -151,7 +151,7 @@ var D = ["aria-labelledby", "aria-disabled"], O = { class: "flex min-w-0 items-s
 						variant: "light",
 						rounded: "",
 						dot: ""
-					}, null, 8, ["label", "color"])) : c("", !0), (v(!0), l(a, null, y(J.value, (t, n) => (v(), s(r, {
+					}, null, 8, ["label", "color"])) : c("", !0), (v(!0), l(a, null, y(J.value, (t, n) => (v(), s(i, {
 						key: `${t.key ?? ""}${t.label}${n}`,
 						label: t.key ? "" : t.label,
 						"key-label": t.key ?? "",
@@ -172,7 +172,7 @@ var D = ["aria-labelledby", "aria-disabled"], O = { class: "flex min-w-0 items-s
 						"color"
 					]))), 128))])])) : c("", !0)
 				]),
-				U.actions || U.menu ? (v(), l("div", F, [b(o.$slots, "actions"), U.menu ? (v(), s(i, {
+				U.actions || U.menu ? (v(), l("div", F, [b(o.$slots, "actions"), U.menu ? (v(), s(r, {
 					key: 0,
 					align: "end",
 					"menu-label": `Actions for ${m.name}`

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

@@ -7,7 +7,7 @@ export interface Props {
     placeholder?: string;
     /** Milliseconds to wait after typing before emitting `search`. `0` emits on every key. */
     debounce?: number;
-    /** `small` 36px or `normal` 40px tall. */
+    /** `small` 36px or `normal` 42px tall. */
     size?: "small" | "normal";
     /** Options for a filter select attached to the right of the field, such as cluster status. Bind the choice with `v-model:filter`. No options, no filter. */
     filterOptions?: SearchFilterOption[];

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

@@ -25,7 +25,7 @@ var w = {
 	}),
 	emits: /*@__PURE__*/ s(["search"], ["update:modelValue", "update:filter"]),
 	setup(o, { emit: s }) {
-		let A = o, j = h(o, "modelValue"), M = h(o, "filter"), N = s, P = d(null), F = t(() => A.filterOptions.length > 0), I = t(() => A.size === "small" ? "h-9" : "h-10"), L;
+		let A = o, j = h(o, "modelValue"), M = h(o, "filter"), N = s, P = d(null), F = t(() => A.filterOptions.length > 0), I = t(() => A.size === "small" ? "h-9" : "h-10.5"), L;
 		function R() {
 			j.value = "", P.value?.focus();
 		}
@@ -35,9 +35,9 @@ var w = {
 			e.length && !e.some((e) => e.value === M.value) && (M.value = e[0].value);
 		}, { immediate: !0 }), l(() => clearTimeout(L)), (t, s) => (u(), r("div", w, [i("div", T, [
 			a(m(S), {
-				class: "pointer-events-none absolute top-1/2 left-3.5 z-20 size-4 -translate-y-1/2 text-muted",
+				class: c(["pointer-events-none absolute top-1/2 left-3 z-20 -translate-y-1/2 text-muted", o.size === "small" ? "size-4" : "size-5"]),
 				"aria-hidden": "true"
-			}),
+			}, null, 8, ["class"]),
 			y(i("input", {
 				ref_key: "input",
 				ref: P,
@@ -45,7 +45,11 @@ var w = {
 				type: "search",
 				placeholder: o.placeholder,
 				"aria-label": o.placeholder,
-				class: c(["relative block w-full border border-border bg-background pr-10 pl-10 text-base font-normal text-heading transition-[color,background-color,border-color,box-shadow] duration-200 outline-none placeholder:text-muted/80 hover:border-accent-active focus:z-10 focus:focus-ring [&::-webkit-search-cancel-button]:hidden", [I.value, F.value ? "rounded-l-10" : "rounded-10"]]),
+				class: c(["relative block w-full border border-border bg-background pr-10 text-base font-normal text-heading transition-[color,background-color,border-color,box-shadow] duration-200 outline-none placeholder:text-muted/80 hover:border-accent-active focus:z-10 focus:focus-ring [&::-webkit-search-cancel-button]:hidden", [
+					I.value,
+					o.size === "small" ? "pl-9" : "pl-10",
+					F.value ? "rounded-l-10" : "rounded-10"
+				]]),
 				onKeydown: s[1] ||= b((e) => j.value && (R(), e.stopPropagation()), ["esc"])
 			}, null, 42, E), [[_, j.value]]),
 			j.value ? (u(), r("button", {

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

@@ -30,7 +30,7 @@ export interface Props<T> {
     errorMsg?: string;
     /** Help text between the label and the field. */
     hint?: string;
-    /** `compact` 32px (toolbars and filters), `small` 36px or `normal` 40px tall. */
+    /** `compact` 32px (toolbars and filters), `small` 36px or `normal` 42px tall. */
     size?: "compact" | "small" | "normal";
     /** Text shown when no option matches the search. */
     noResultText?: string;
@@ -42,8 +42,8 @@ declare const __VLS_export: <V>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
         onSearch?: ((query: string) => any) | undefined;
         onSelect?: ((option: SelectOption<V>) => any) | undefined;
         "onUpdate:modelValue"?: ((value: V | V[] | null) => any) | undefined;
-        onRemove?: ((option: SelectOption<V>) => any) | undefined;
         onCreate?: ((text: string) => any) | undefined;
+        onRemove?: ((option: SelectOption<V>) => any) | undefined;
         onRefresh?: (() => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
@@ -65,7 +65,7 @@ declare const __VLS_export: <V>(__VLS_props: NonNullable<Awaited<typeof __VLS_se
             query: string;
         }) => unknown;
     };
-    emit: (((evt: "search", query: string) => void) & ((evt: "select", option: SelectOption<V>) => void) & ((evt: "remove", option: SelectOption<V>) => void) & ((evt: "create", text: string) => void) & ((evt: "refresh") => void)) & ((event: "update:modelValue", value: V | V[] | null) => void);
+    emit: (((evt: "search", query: string) => void) & ((evt: "select", option: SelectOption<V>) => void) & ((evt: "create", text: string) => void) & ((evt: "remove", option: SelectOption<V>) => void) & ((evt: "refresh") => void)) & ((event: "update:modelValue", value: V | V[] | null) => void);
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };