@ac-design/design-system 1.0.3 → 2.1.0

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,13 +32,15 @@ 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;
     size: "small" | "normal" | "large";
-    showValue: boolean;
-    valueText: string;
     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-1.5 flex items-baseline justify-between gap-3 text-xs"
-}, p = ["id"], m = [
+	class: "mb-2 flex items-baseline justify-between gap-3 text-base"
+}, 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`,
-			class: "min-w-0 truncate font-medium text-label"
-		}, c(i.label), 9, p)) : t("", !0), i.showValue && !i.indeterminate ? (s(), n("span", {
+			id: `${f(E)}-label`,
+			class: "min-w-0 truncate font-medium text-heading"
+		}, d(o.label), 9, g)) : n("", !0), o.showValue && !I.value ? (l(), r("span", {
 			key: 1,
-			class: a(["ml-auto shrink-0 tabular-nums", i.color === "auto" && b.value !== "primary" ? b.value === "danger" ? "text-red-30" : "text-yellow-20" : "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-slate-90", _[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

@@ -17,7 +17,7 @@ export interface ResourceDetail {
     value?: string | number;
     /** Slot name for a custom value: `#detail-<key>`. */
     key?: string;
-    /** Sets the value in Geist Mono, for versions, IPs and IDs. */
+    /** Sets the value in the monospace font, for versions, IPs and IDs. */
     mono?: boolean;
 }
 export interface Props {
@@ -43,7 +43,7 @@ export interface Props {
     details?: ResourceDetail[];
     /** Columns of the details grid. Three and four drop to two on phones. */
     columns?: 1 | 2 | 3 | 4;
-    /** Sets `name` in Geist Mono, for Kubernetes object names. */
+    /** Sets `name` in the monospace font, for Kubernetes object names. */
     mono?: boolean;
     /** Shows a skeleton card while the resource loads. */
     loading?: boolean;
@@ -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,23 +1,23 @@
 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-4" }, k = ["aria-hidden"], A = ["src", "alt"], j = { class: "min-w-0 flex-1" }, M = ["id", "title"], N = ["title"], P = {
+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 = {
 	key: 1,
-	class: "mt-2 flex flex-wrap items-center gap-1.5"
+	class: "mt-2.5 flex flex-wrap items-center gap-1.5"
 }, F = {
 	key: 1,
 	class: "relative z-10 -mt-1 -mr-1.5 flex shrink-0 items-center gap-1.5"
-}, I = { class: "truncate text-xs text-muted" }, L = { class: "mt-0.5 flex min-w-0 flex-wrap items-center gap-1.5 text-base font-medium text-heading" }, R = {
+}, I = { class: "truncate text-xs font-medium text-muted" }, L = { class: "mt-1 flex min-w-0 flex-wrap items-center gap-1.5 text-base font-semibold text-heading" }, R = {
 	key: 0,
 	class: "text-muted",
 	"aria-label": "Not set"
 }, z = {
 	key: 2,
-	class: "relative z-10 mt-auto flex min-w-0 flex-wrap items-center justify-between gap-x-3 gap-y-1.5 border-t border-border-light px-4 py-3 text-xs text-muted"
+	class: "relative z-10 mt-auto flex min-w-0 flex-wrap items-center justify-between gap-x-3 gap-y-1.5 border-t border-border px-5 py-3 text-xs text-muted"
 }, B = /*@__PURE__*/ m({
 	__name: "AcResourceCard",
 	props: {
@@ -89,7 +89,7 @@ var D = ["aria-labelledby", "aria-disabled"], O = { class: "flex min-w-0 items-s
 			"data-testid": "ac-resource-card"
 		}, null, 8, ["label"])) : (v(), l("article", {
 			key: 1,
-			class: _(["group relative flex min-w-0 flex-col rounded-10 border border-border bg-surface shadow-xs transition-[border-color,box-shadow] duration-150 has-[[data-ac-card-link]:focus-visible]:ring-[3px] has-[[data-ac-card-link]:focus-visible]:ring-ring", [(Y.value || X()) && "hover:border-border-dark hover:shadow-sm", m.disabled && "opacity-60"]]),
+			class: _(["group relative flex min-w-0 flex-col rounded-14 border border-border bg-surface transition-[background-color,border-color,box-shadow,translate] duration-200 has-[[data-ac-card-link]:focus-visible]:ring-2 has-[[data-ac-card-link]:focus-visible]:ring-ring has-[[data-ac-card-link]:focus-visible]:ring-offset-2 has-[[data-ac-card-link]:focus-visible]:ring-offset-surface motion-reduce:transition-none", [(Y.value || X()) && "hover:-translate-y-0.5 hover:border-primary/30 hover:bg-accent-hover/60 hover:shadow-card motion-reduce:hover:translate-y-0", m.disabled && "opacity-60"]]),
 			"aria-labelledby": `${C(q)}-name`,
 			"aria-disabled": m.disabled || void 0,
 			"data-ac-ds": "",
@@ -98,7 +98,7 @@ var D = ["aria-labelledby", "aria-disabled"], O = { class: "flex min-w-0 items-s
 			u("div", O, [
 				U.logo || m.logo || m.icon ? (v(), l("span", {
 					key: 0,
-					class: _(["inline-flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-8 border border-border-light bg-surface-muted", m.logo ? "p-1.5" : "text-label [&_svg]:size-5"]),
+					class: _(["inline-flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-10 border", m.logo ? "border-border bg-surface-muted p-1.5" : "border-primary/25 bg-primary/10 text-primary-strong [&_svg]:size-5"]),
 					"aria-hidden": m.logo && m.logoAlt ? void 0 : "true"
 				}, [b(o.$slots, "logo", {}, () => [m.logo ? (v(), l("img", {
 					key: 0,
@@ -109,14 +109,14 @@ var D = ["aria-labelledby", "aria-disabled"], O = { class: "flex min-w-0 items-s
 				u("div", j, [
 					u("h3", {
 						id: `${C(q)}-name`,
-						class: _(["truncate text-lg leading-6 font-semibold tracking-[-0.01em] text-heading", m.mono && "font-mono text-base tracking-tight"]),
+						class: _(["truncate text-lg leading-6 font-semibold tracking-tight text-heading", m.mono ? "font-mono text-base" : "font-heading"]),
 						title: m.name
 					}, [Y.value ? (v(), s(x(Y.value.is), g({ key: 0 }, {
 						...Y.value,
 						is: void 0
 					}, {
 						"data-ac-card-link": "",
-						class: "outline-none after:absolute after:inset-0 after:rounded-10",
+						class: "outline-none after:absolute after:inset-0 after:rounded-14",
 						onClick: Q
 					}), {
 						default: E(() => [f(S(m.name), 1)]),
@@ -125,12 +125,12 @@ var D = ["aria-labelledby", "aria-disabled"], O = { class: "flex min-w-0 items-s
 						key: 1,
 						type: "button",
 						"data-ac-card-link": "",
-						class: "max-w-full cursor-pointer truncate text-left outline-none after:absolute after:inset-0 after:rounded-10",
+						class: "max-w-full cursor-pointer truncate text-left outline-none after:absolute after:inset-0 after:rounded-14",
 						onClick: Q
 					}, S(m.name), 1)) : (v(), l(a, { key: 2 }, [f(S(m.name), 1)], 64))], 10, M),
 					m.subtitle ? (v(), l("p", {
 						key: 0,
-						class: "line-clamp-2 text-xs text-muted",
+						class: "mt-0.5 line-clamp-2 text-xs text-muted",
 						title: m.subtitle
 					}, S(m.subtitle), 9, N)) : c("", !0),
 					U.tags || m.status || m.statusLoading || J.value.length ? (v(), l("div", P, [b(o.$slots, "tags", {}, () => [m.statusLoading ? (v(), s(t, {
@@ -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}`
@@ -183,17 +183,17 @@ var D = ["aria-labelledby", "aria-disabled"], O = { class: "flex min-w-0 items-s
 			]),
 			m.details.length ? (v(), l("dl", {
 				key: 0,
-				class: _(["grid gap-x-4 gap-y-3 border-t border-border-light px-4 py-3.5", W[m.columns]])
+				class: _(["grid gap-x-6 gap-y-4 border-t border-border px-5 py-4", W[m.columns]])
 			}, [(v(!0), l(a, null, y(m.details, (e, t) => (v(), l("div", {
 				key: e.key ?? `${e.label}${t}`,
 				class: "min-w-0"
 			}, [u("dt", I, S(e.label), 1), u("dd", L, [b(o.$slots, `detail-${e.key}`, { detail: e }, () => [Z(e.value) ? (v(), l("span", R, "—")) : (v(), l("span", {
 				key: 1,
-				class: _(["min-w-0 break-words", e.mono && "font-mono text-[length:calc(12.5px*var(--ac-scale))]"])
+				class: _(["min-w-0 break-words", e.mono && "font-mono text-xs"])
 			}, S(e.value), 3))])])]))), 128))], 2)) : c("", !0),
 			U.default ? (v(), l("div", {
 				key: 1,
-				class: _(["border-t border-border-light px-4 py-3.5 text-base text-body", m.details.length > 0 && "border-t-0 pt-0"])
+				class: _(["border-t border-border px-5 py-4 text-base text-body", m.details.length > 0 && "border-t-0 pt-0"])
 			}, [b(o.$slots, "default")], 2)) : c("", !0),
 			U.footer ? (v(), l("div", z, [b(o.$slots, "footer")])) : c("", !0)
 		], 10, D));

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` 32px or `normal` 36px 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

@@ -2,6 +2,7 @@ import { Fragment as e, computed as t, createCommentVNode as n, createElementBlo
 import { ChevronDown as x, Search as S, X as C } from "@lucide/vue";
 //#region src/lib/components/AcSearchBar.vue?vue&type=script&setup=true&lang.ts
 var w = {
+	role: "search",
 	class: "flex w-full",
 	"data-ac-ds": "",
 	"data-testid": "ac-search-bar"
@@ -13,7 +14,7 @@ var w = {
 	props: /*@__PURE__*/ s({
 		placeholder: { default: "Search" },
 		debounce: { default: 300 },
-		size: { default: "small" },
+		size: { default: "normal" },
 		filterOptions: { default: () => [] },
 		filterLabel: { default: "Filter" }
 	}, {
@@ -24,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-8" : "h-9"), 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();
 		}
@@ -34,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-2.5 z-20 size-3.5 -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,
@@ -44,30 +45,34 @@ var w = {
 				type: "search",
 				placeholder: o.placeholder,
 				"aria-label": o.placeholder,
-				class: c(["relative block w-full border border-border bg-surface pr-8 pl-8 text-base text-heading shadow-xs transition-[border-color,box-shadow] outline-none placeholder:text-muted hover:border-border-dark focus:z-10 focus:focus-ring [&::-webkit-search-cancel-button]:hidden", [I.value, F.value ? "rounded-l-6" : "rounded-6"]]),
+				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", {
 				key: 0,
 				type: "button",
-				class: "absolute top-1/2 right-1.5 z-20 inline-flex size-5.5 -translate-y-1/2 cursor-pointer items-center justify-center rounded-4 text-muted transition hover:bg-surface-sunken hover:text-heading",
+				class: "absolute top-1/2 right-1.5 z-20 inline-flex size-7 -translate-y-1/2 cursor-pointer items-center justify-center rounded-8 text-muted transition-colors hover:bg-surface-sunken hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
 				"aria-label": "Clear search",
 				onClick: R
 			}, [a(m(C), {
-				class: "size-3",
+				class: "size-4",
 				"aria-hidden": "true"
 			})])) : n("", !0)
 		]), F.value ? (u(), r("div", D, [y(i("select", {
 			"onUpdate:modelValue": s[2] ||= (e) => M.value = e,
 			"aria-label": o.filterLabel,
-			class: c(["relative block max-w-48 cursor-pointer appearance-none truncate rounded-r-6 border border-border bg-surface-muted pr-8 pl-3 text-base font-medium text-heading shadow-xs transition-[border-color,box-shadow,background-color] outline-none hover:border-border-dark hover:bg-surface-sunken focus:z-10 focus:focus-ring", I.value]),
+			class: c(["relative block max-w-48 cursor-pointer appearance-none truncate rounded-r-10 border border-border bg-surface pr-9 pl-4 text-base font-medium text-heading transition-[color,background-color,border-color,box-shadow] duration-200 outline-none hover:bg-surface-sunken/70 focus:z-10 focus:focus-ring", I.value]),
 			"data-ac-ds": "",
 			"data-testid": "ac-search-bar-filter"
 		}, [(u(!0), r(e, null, f(o.filterOptions, (e) => (u(), r("option", {
 			key: e.value,
 			value: e.value
 		}, p(e.label), 9, k))), 128))], 10, O), [[g, M.value]]), a(m(x), {
-			class: "pointer-events-none absolute top-1/2 right-2.5 z-20 size-3.5 -translate-y-1/2 text-muted",
+			class: "pointer-events-none absolute top-1/2 right-3 z-20 size-4 -translate-y-1/2 text-muted",
 			"aria-hidden": "true"
 		})])) : n("", !0)]));
 	}

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

@@ -11,7 +11,7 @@ export interface Props {
     padded?: boolean;
     /** Drops the card surface so the section blends into its parent. */
     plain?: boolean;
-    /** `danger` draws a red border and title, for irreversible actions like deleting a database. */
+    /** `danger` draws a red-tinted border and title, for irreversible actions like deleting a database. */
     tone?: "default" | "danger";
 }
 type __VLS_Props = Props;
@@ -41,9 +41,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     tone: "default" | "danger";
     subtitle: string;
     padded: boolean;
+    plain: boolean;
     collapsible: boolean;
     backButton: boolean;
-    plain: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;