@ac-design/design-system 1.0.2 → 2.0.0

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

@@ -23,16 +23,16 @@ var d = { class: "max-w-80 text-base text-muted" }, f = /*@__PURE__*/ o({
 		}, [i("div", s(f.$attrs, {
 			role: "status",
 			"aria-live": "polite",
-			class: ["flex flex-col items-center justify-center gap-3 px-4 text-center", o.fullPage ? "fixed inset-0 z-[80] bg-surface" : "size-full"],
+			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 },
 			"data-ac-ds": "",
 			"data-testid": "ac-preloader"
 		}), [o.showSpinner ? (c(), n(e, {
 			key: 0,
-			size: "normal",
+			size: o.fullPage ? "large" : "normal",
 			class: "text-primary",
 			label: ""
-		})) : r("", !0), i("div", d, [l(f.$slots, "default", {}, () => [a(u(o.message), 1)])])], 16)], 8, ["disabled"]));
+		}, null, 8, ["size"])) : r("", !0), i("div", d, [l(f.$slots, "default", {}, () => [a(u(o.message), 1)])])], 16)], 8, ["disabled"]));
 	}
 });
 //#endregion

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

@@ -23,9 +23,9 @@ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {},
     color: Tone | "auto";
     max: number;
     size: "small" | "normal" | "large";
-    showValue: boolean;
-    valueText: string;
     indeterminate: boolean;
+    valueText: string;
+    showValue: boolean;
 }, {}, {}, {}, 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

@@ -6,7 +6,7 @@ var d = {
 	"data-testid": "ac-progress"
 }, f = {
 	key: 0,
-	class: "mb-1.5 flex items-baseline justify-between gap-3 text-xs"
+	class: "mb-2 flex items-baseline justify-between gap-3 text-base"
 }, p = ["id"], m = [
 	"aria-labelledby",
 	"aria-label",
@@ -47,10 +47,10 @@ var d = {
 		return (e, u) => (s(), n("div", d, [S.value ? (s(), n("div", f, [i.label ? (s(), n("span", {
 			key: 0,
 			id: `${l(v)}-label`,
-			class: "min-w-0 truncate font-medium text-label"
+			class: "min-w-0 truncate font-medium text-heading"
 		}, c(i.label), 9, p)) : t("", !0), i.showValue && !i.indeterminate ? (s(), n("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: 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"]),
 			"aria-hidden": "true"
 		}, c(x.value), 3)) : t("", !0)])) : t("", !0), r("div", {
 			role: "progressbar",
@@ -61,7 +61,7 @@ var d = {
 			"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]])
+			class: a(["relative w-full overflow-hidden rounded-full bg-surface-sunken", _[i.size]])
 		}, [i.indeterminate ? (s(), n("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]])

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;

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

@@ -5,19 +5,19 @@ import r from "./AcTag.js";
 import i from "./AcDropdown.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, {
@@ -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` 40px 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"), L;
 		function R() {
 			j.value = "", P.value?.focus();
 		}
@@ -34,7 +35,7 @@ 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: "pointer-events-none absolute top-1/2 left-3.5 z-20 size-4 -translate-y-1/2 text-muted",
 				"aria-hidden": "true"
 			}),
 			y(i("input", {
@@ -44,30 +45,30 @@ 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 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"]]),
 				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;

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

@@ -1,7 +1,7 @@
 import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, createVNode as r, defineComponent as i, mergeModels as a, normalizeClass as o, openBlock as s, renderSlot as c, toDisplayString as l, unref as u, useId as d, useModel as f, vShow as p, withDirectives as m } from "vue";
 import { ArrowLeft as h, ChevronDown as g } from "@lucide/vue";
 //#region src/lib/components/AcSectionContent.vue?vue&type=script&setup=true&lang.ts
-var _ = { class: "flex min-w-0 items-center gap-2.5" }, v = { class: "min-w-0" }, y = { class: "flex items-center gap-2" }, b = {
+var _ = { class: "flex min-w-0 items-center gap-3" }, v = { class: "min-w-0" }, y = { class: "flex items-center gap-2" }, b = {
 	key: 0,
 	class: "mt-0.5 truncate text-xs text-muted"
 }, x = { class: "flex shrink-0 items-center gap-2" }, S = [
@@ -41,32 +41,32 @@ var _ = { class: "flex min-w-0 items-center gap-2.5" }, v = { class: "min-w-0" }
 	setup(i, { emit: a }) {
 		let w = a, T = f(i, "open"), E = d();
 		return (a, d) => (s(), t("section", {
-			class: o(!i.plain && ["rounded-10 border bg-surface shadow-xs", i.tone === "danger" ? "border-red-80" : "border-border"]),
+			class: o(!i.plain && ["rounded-14 border bg-surface text-body", i.tone === "danger" ? "border-danger/25" : "border-border"]),
 			"data-ac-ds": "",
 			"data-testid": "ac-section-content"
-		}, [n("header", { class: o(["flex items-center justify-between gap-4", [i.plain ? "mb-3" : "px-5 py-3.5", !i.plain && T.value && (i.tone === "danger" ? "border-b border-red-90" : "border-b border-border-light")]]) }, [n("div", _, [i.backButton ? (s(), t("button", {
+		}, [n("header", { class: o(["flex items-center justify-between gap-4", [i.plain ? "mb-4" : ["px-6", T.value ? "pt-5 pb-3" : "py-4"], !i.plain && T.value && (i.tone === "danger" ? "border-b border-danger/25" : "border-b border-border")]]) }, [n("div", _, [i.backButton ? (s(), t("button", {
 			key: 0,
 			type: "button",
-			class: "inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-6 text-label transition hover:bg-surface-sunken hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+			class: "-ml-1.5 inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-10 text-muted transition-colors duration-200 hover:bg-surface-sunken hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none",
 			"aria-label": "Back",
 			onClick: d[0] ||= (e) => w("back")
 		}, [r(u(h), {
 			class: "size-4",
 			"aria-hidden": "true"
-		})])) : e("", !0), n("div", v, [c(a.$slots, "header", {}, () => [n("div", y, [n("h5", { class: o(["truncate", i.tone === "danger" && "text-red-30"]) }, l(i.title), 3), c(a.$slots, "title-extra")]), i.subtitle ? (s(), t("p", b, l(i.subtitle), 1)) : e("", !0)])])]), n("div", x, [c(a.$slots, "actions"), i.collapsible ? (s(), t("button", {
+		})])) : e("", !0), n("div", v, [c(a.$slots, "header", {}, () => [n("div", y, [n("h5", { class: o(["truncate font-heading text-lg leading-tight font-semibold tracking-tight", i.tone === "danger" ? "text-danger-strong" : "text-heading"]) }, l(i.title), 3), c(a.$slots, "title-extra")]), i.subtitle ? (s(), t("p", b, l(i.subtitle), 1)) : e("", !0)])])]), n("div", x, [c(a.$slots, "actions"), i.collapsible ? (s(), t("button", {
 			key: 0,
 			type: "button",
-			class: "inline-flex size-7 cursor-pointer items-center justify-center rounded-6 border border-border bg-surface text-label shadow-xs transition hover:border-border-dark hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+			class: "inline-flex size-8 cursor-pointer items-center justify-center rounded-10 border border-border bg-surface text-heading transition-colors duration-200 hover:bg-surface-sunken/70 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface focus-visible:outline-none",
 			"aria-expanded": T.value,
 			"aria-controls": u(E),
 			"aria-label": T.value ? "Collapse section" : "Expand section",
 			onClick: d[1] ||= (e) => T.value = !T.value
 		}, [r(u(g), {
-			class: o(["size-4 transition-transform duration-200", !T.value && "-rotate-90"]),
+			class: o(["size-4 transition-transform duration-200 motion-reduce:transition-none", !T.value && "-rotate-90"]),
 			"aria-hidden": "true"
 		}, null, 8, ["class"])], 8, S)) : e("", !0)])], 2), m(n("div", {
 			id: u(E),
-			class: o(i.plain ? void 0 : i.padded ? "p-5" : "overflow-hidden rounded-b-10")
+			class: o(i.plain ? void 0 : i.padded ? "p-6" : "overflow-hidden rounded-b-14")
 		}, [c(a.$slots, "default")], 10, C), [[p, T.value]])], 2));
 	}
 });

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

@@ -11,7 +11,7 @@ export interface Props<T extends string | number> {
     options: (SegmentedOption<T> | T)[];
     /** Accessible name for the group, e.g. "Chart range". Required when nothing nearby labels it. */
     label?: string;
-    /** Height: `small` 28px (toolbars, cards) or `normal` 32px. */
+    /** Height: `small` 36px (toolbars, cards) or `normal` 40px, matching fields of the same size. */
     size?: "small" | "normal";
     /** Shows only the icons; each option's `label` becomes its accessible name and hover title. */
     iconOnly?: boolean;

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

@@ -69,7 +69,7 @@ var m = ["aria-label", "aria-disabled"], h = [
 			role: "radiogroup",
 			"aria-label": a.label || void 0,
 			"aria-disabled": a.disabled || void 0,
-			class: s(["items-center gap-0.5 rounded-8 border border-border bg-surface-muted p-0.5", [a.block ? "flex w-full" : "inline-flex max-w-full", a.disabled && "opacity-50"]]),
+			class: s(["items-center gap-1 rounded-10 bg-surface-sunken p-1", [a.block ? "flex w-full" : "inline-flex max-w-full", a.disabled && "opacity-50"]]),
 			"data-ac-ds": "",
 			"data-testid": "ac-segmented-control"
 		}, [(c(!0), i(e, null, u(x.value, (e, t) => (c(), i("button", {
@@ -84,12 +84,12 @@ var m = ["aria-label", "aria-disabled"], h = [
 			title: a.iconOnly ? e.label : void 0,
 			tabindex: t === S.value ? 0 : -1,
 			disabled: a.disabled || e.disabled,
-			class: s(["inline-flex min-w-0 cursor-pointer items-center justify-center gap-1.5 rounded-6 font-medium whitespace-nowrap transition-[background-color,color,box-shadow] duration-150 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed", [
-				a.size === "small" ? "h-6 text-xs [&_svg]:size-3.5" : "h-7 text-base [&_svg]:size-4",
+			class: s(["inline-flex min-w-0 cursor-pointer items-center justify-center gap-1.5 rounded-8 text-base font-medium whitespace-nowrap transition-[background-color,color,box-shadow] duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset focus-visible:outline-none disabled:cursor-not-allowed [&_svg]:size-4", [
+				a.size === "small" ? "h-7" : "h-8",
 				a.iconOnly ? a.size === "small" ? "w-7" : "w-8" : a.size === "small" ? "px-2.5" : "px-3",
 				a.block && "flex-1",
 				e.disabled && !a.disabled && "opacity-50",
-				e.value === v.value ? "bg-surface text-heading shadow-sm ring-1 ring-border" : "text-muted enabled:hover:text-heading"
+				e.value === v.value ? "bg-surface text-heading shadow-sm" : "text-muted enabled:hover:text-heading"
 			]]),
 			onClick: (t) => C(e),
 			onKeydown: (e) => E(e, t)

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

@@ -4,9 +4,9 @@ export interface Props<T> {
     options: SelectOption<T>[];
     /** How to tell whether two values are the same, for option values that are objects. A property name (`"id"`) or a function `(a, b) => boolean`. Without it values are compared with `===`, which is right for strings and numbers. */
     by?: string | ((a: T, b: T) => boolean);
-    /** Floating label. It rests inside the field and rises when a value is chosen or the list opens. */
+    /** Label above the field. Also the accessible name of the select. */
     label?: string;
-    /** Text shown in the field when there's no label and nothing is selected. */
+    /** Text shown in the field while nothing is selected, e.g. "Select a version". */
     placeholder?: string;
     /** Allow several values; `v-model` becomes an array. */
     multiple?: boolean;
@@ -28,9 +28,9 @@ export interface Props<T> {
     required?: boolean;
     /** Error text under the field. */
     errorMsg?: string;
-    /** Helper text under the field (hidden while `errorMsg` is set). */
+    /** Help text between the label and the field. */
     hint?: string;
-    /** `compact` 32px (toolbars and filters, no label), `small` 36px (forms) or `normal` 40px. */
+    /** `compact` 32px (toolbars and filters), `small` 36px or `normal` 40px tall. */
     size?: "compact" | "small" | "normal";
     /** Text shown when no option matches the search. */
     noResultText?: string;