@ac-design/design-system 2.2.0 → 2.3.0

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

@@ -1,6 +1,7 @@
 import e from "./AcLogo.js";
 import t from "./AcNavbarItem.js";
-import { Fragment as n, Teleport as r, Transition as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, mergeModels as f, nextTick as p, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as ee, openBlock as g, ref as _, renderList as v, renderSlot as te, resolveDynamicComponent as ne, toDisplayString as y, unref as b, useId as re, useModel as ie, watch as ae, withCtx as oe } from "vue";
+import { fixedFrame as n } from "./fixedFrame.js";
+import { Fragment as r, Teleport as i, Transition as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, mergeModels as p, nextTick as m, normalizeClass as h, normalizeStyle as g, onBeforeUnmount as ee, openBlock as _, ref as v, renderList as te, renderSlot as ne, resolveDynamicComponent as y, toDisplayString as b, unref as x, useId as re, useModel as ie, watch as ae, withCtx as oe } from "vue";
 import { ChartLine as se, Check as ce, Database as le, GraduationCap as ue, Grip as de, Receipt as fe, Server as pe, ServerCog as me, Telescope as he } from "@lucide/vue";
 //#region src/lib/components/AcAppSwitcher.vue?vue&type=script&setup=true&lang.ts
 var ge = {
@@ -15,22 +16,22 @@ var ge = {
 	"aria-current",
 	"title",
 	"onClick"
-], x = ["src"], S = {
+], S = ["src"], C = {
 	key: 3,
 	class: "text-lg font-semibold"
-}, C = { class: "w-full truncate text-xs font-medium text-heading" }, w = {
+}, w = { class: "w-full truncate text-xs font-medium text-heading" }, T = {
 	key: 0,
 	class: "sr-only"
-}, T = {
+}, E = {
 	key: 1,
 	class: "absolute top-1.5 right-1.5 inline-flex size-4 items-center justify-center rounded-full bg-primary text-white",
 	"aria-hidden": "true"
-}, E = {
+}, D = {
 	key: 0,
 	class: "mt-2 border-t border-border pt-2"
-}, D = "id", O = 3, k = 6, A = /*@__PURE__*/ d({
+}, O = "id", k = 3, A = 6, j = /*@__PURE__*/ f({
 	__name: "AcAppSwitcher",
-	props: /*@__PURE__*/ f({
+	props: /*@__PURE__*/ p({
 		currentApp: { default: "platform" },
 		baseUrl: { default: "https://appscode.com" },
 		activeOrganization: { default: "" },
@@ -54,11 +55,11 @@ var ge = {
 		},
 		openModifiers: {}
 	}),
-	emits: /*@__PURE__*/ f(["select"], ["update:open"]),
-	setup(d, { emit: f }) {
-		let A = d, j = ie(d, "open"), M = f, N = [
+	emits: /*@__PURE__*/ p(["select"], ["update:open"]),
+	setup(f, { emit: p }) {
+		let j = f, M = ie(f, "open"), N = p, P = [
 			{
-				name: D,
+				name: O,
 				title: "Platform",
 				port: "8080",
 				subtitle: "Manage your platform & accounts"
@@ -111,14 +112,14 @@ var ge = {
 				icon: ue,
 				color: "red"
 			}
-		], P = {
+		], F = {
 			name: "console",
 			title: "Console",
 			port: "5990",
 			subtitle: "Manage your kubernetes clusters",
 			icon: pe,
 			color: "blue"
-		}, F = [
+		}, ye = [
 			"https://appscode.ninja",
 			"https://appscode.com",
 			"http://bb.test:8080"
@@ -126,7 +127,7 @@ var ge = {
 			"billing",
 			"selfhost",
 			"learn"
-		], ye = {
+		], be = {
 			primary: "bg-primary/10 text-primary-strong ring-primary/25",
 			blue: "bg-info/10 text-info-strong ring-info/25",
 			green: "bg-success/10 text-success-strong ring-success/25",
@@ -134,15 +135,15 @@ var ge = {
 			purple: "bg-pending/10 text-pending-strong ring-pending/25",
 			red: "bg-danger/10 text-danger-strong ring-danger/25",
 			slate: "bg-surface-sunken text-muted ring-border"
-		}, L = re(), R = `${L}-panel`, z = `${L}-heading`, B = _(null), V = _(null), H = _({}), U = _(!0), W = a(() => A.currentApp === "platform" ? D : A.currentApp), be = a(() => !F.includes(A.baseUrl)), xe = a(() => {
-			let e = [...N];
-			return A.activeOrgType !== O && e.splice(1, 0, P), e.filter((e) => !be.value || !I.includes(e.name) || e.name === "billing" && A.isOfflineInstaller && A.activeOrgType === k);
-		}), G = a(() => (A.apps ?? xe.value).filter((e) => !A.hideCurrent || e.name !== W.value).map((e) => ({
+		}, L = re(), R = `${L}-panel`, z = `${L}-heading`, B = v(null), V = v(null), H = v({}), U = v(!0), W = o(() => j.currentApp === "platform" ? O : j.currentApp), xe = o(() => !ye.includes(j.baseUrl)), Se = o(() => {
+			let e = [...P];
+			return j.activeOrgType !== k && e.splice(1, 0, F), e.filter((e) => !xe.value || !I.includes(e.name) || e.name === "billing" && j.isOfflineInstaller && j.activeOrgType === A);
+		}), G = o(() => (j.apps ?? Se.value).filter((e) => !j.hideCurrent || e.name !== W.value).map((e) => ({
 			...e,
-			url: e.url ?? Se(e)
+			url: e.url ?? Ce(e)
 		})));
-		function Se(e) {
-			return A.baseUrl.includes("bb.test") ? `http://bb.test:${e.port}/${e.name}/` : A.baseUrl.includes("localhost") ? `http://localhost:${e.port}/${e.name}/` : `${A.baseUrl}/${e.name}/`;
+		function Ce(e) {
+			return j.baseUrl.includes("bb.test") ? `http://bb.test:${e.port}/${e.name}/` : j.baseUrl.includes("localhost") ? `http://localhost:${e.port}/${e.name}/` : `${j.baseUrl}/${e.name}/`;
 		}
 		function K(e) {
 			return e.name === W.value;
@@ -153,7 +154,7 @@ var ge = {
 		function J() {
 			return [...V.value?.querySelectorAll("[data-app-tile]") ?? []];
 		}
-		function Ce(e) {
+		function we(e) {
 			let t = e[0]?.offsetTop, n = e.filter((e) => e.offsetTop === t).length;
 			return Math.max(n, 1);
 		}
@@ -164,43 +165,43 @@ var ge = {
 		function X() {
 			let e = q();
 			if (!e || !V.value) return;
-			let t = e.getBoundingClientRect(), { offsetWidth: n, offsetHeight: r } = V.value, i = window.innerHeight - t.bottom - 6 - 8, a = t.top - 6 - 8, o = i < r && a > i, s = A.align === "end" ? t.right - n : t.left;
-			U.value = !o, H.value = {
-				[o ? "bottom" : "top"]: `${o ? window.innerHeight - t.top + 6 : t.bottom + 6}px`,
-				left: `${Math.max(8, Math.min(s, window.innerWidth - n - 8))}px`,
-				maxHeight: `${Math.max(o ? a : i, 160)}px`
+			let t = e.getBoundingClientRect(), r = n(), { offsetWidth: i, offsetHeight: a } = V.value, o = r.bottom - t.bottom - 6 - 8, s = t.top - r.top - 6 - 8, c = o < a && s > o, l = (j.align === "end" ? t.right - i : t.left) - r.left;
+			U.value = !c, H.value = {
+				[c ? "bottom" : "top"]: `${c ? r.bottom - t.top + 6 : t.bottom + 6 - r.top}px`,
+				left: `${Math.max(8, Math.min(l, r.width - i - 8))}px`,
+				maxHeight: `${Math.max(c ? s : o, 160)}px`
 			};
 		}
 		function Z(e = !0) {
-			j.value && (j.value = !1, e && q()?.focus());
-		}
-		function we() {
-			j.value ? Z() : j.value = !0;
+			M.value && (M.value = !1, e && q()?.focus());
 		}
 		function Te() {
-			let e = [`gorg=${encodeURIComponent(A.activeOrganization)}`, "path=/"];
-			A.rootDomain && e.push(`domain=${A.rootDomain}`), document.cookie = e.join("; ");
+			M.value ? Z() : M.value = !0;
 		}
-		function Ee(e) {
-			e.name === "grafana" && Te(), M("select", e);
+		function Ee() {
+			let e = [`gorg=${encodeURIComponent(j.activeOrganization)}`, "path=/"];
+			j.rootDomain && e.push(`domain=${j.rootDomain}`), document.cookie = e.join("; ");
 		}
 		function De(e) {
-			e.key !== "ArrowDown" || j.value || (e.preventDefault(), j.value = !0);
+			e.name === "grafana" && Ee(), N("select", e);
 		}
 		function Oe(e) {
-			let t = J(), n = t.indexOf(document.activeElement), r = Ce(t), i = {
+			e.key !== "ArrowDown" || M.value || (e.preventDefault(), M.value = !0);
+		}
+		function ke(e) {
+			let t = J(), n = t.indexOf(document.activeElement), r = we(t), i = {
 				ArrowRight: 1,
 				ArrowLeft: -1,
 				ArrowDown: r,
 				ArrowUp: -r
 			};
-			e.key in i && n >= 0 ? (e.preventDefault(), Y(n + i[e.key])) : e.key === "Home" || e.key === "End" ? (e.preventDefault(), Y(e.key === "Home" ? 0 : t.length - 1)) : e.key === "Escape" ? (e.preventDefault(), Z()) : e.key === "Tab" && ke(e);
+			e.key in i && n >= 0 ? (e.preventDefault(), Y(n + i[e.key])) : e.key === "Home" || e.key === "End" ? (e.preventDefault(), Y(e.key === "Home" ? 0 : t.length - 1)) : e.key === "Escape" ? (e.preventDefault(), Z()) : e.key === "Tab" && Ae(e);
 		}
-		function ke(e) {
+		function Ae(e) {
 			let t = [...V.value?.querySelectorAll("a[href], button:not([disabled])") ?? []], n = t[0], r = t[t.length - 1];
 			e.shiftKey && document.activeElement === n ? (e.preventDefault(), Z()) : !e.shiftKey && document.activeElement === r && Z();
 		}
-		function Ae(e) {
+		function je(e) {
 			let t = e.target;
 			q()?.contains(t) || V.value?.contains(t) || Z(!1);
 		}
@@ -209,57 +210,57 @@ var ge = {
 		}
 		function $(e) {
 			let t = e ? "addEventListener" : "removeEventListener";
-			document[t]("pointerdown", Ae, !0), window[t]("scroll", Q, !0), window[t]("resize", Q);
+			document[t]("pointerdown", je, !0), window[t]("scroll", Q, !0), window[t]("resize", Q);
 		}
-		return ae(j, async (e) => {
+		return ae(M, async (e) => {
 			if ($(e), !e) return;
-			await p(), X();
+			await m(), X();
 			let t = J(), n = G.value.findIndex(K);
 			Y(n >= 0 && t[n] ? n : 0);
-		}), ee(() => $(!1)), (a, f) => (g(), c("div", ge, [u(t, {
+		}), ee(() => $(!1)), (n, o) => (_(), l("div", ge, [d(t, {
 			ref_key: "trigger",
 			ref: B,
-			label: d.label,
-			icon: b(de),
+			label: f.label,
+			icon: x(de),
 			"icon-only": "",
 			"aria-haspopup": "dialog",
-			"aria-expanded": j.value,
-			"aria-controls": j.value ? R : void 0,
-			class: m(j.value && "bg-surface-sunken text-heading"),
+			"aria-expanded": M.value,
+			"aria-controls": M.value ? R : void 0,
+			class: h(M.value && "bg-surface-sunken text-heading"),
 			"data-ac-ds": "",
 			"data-testid": "ac-app-switcher-trigger",
-			onClick: we,
-			onKeydown: De
+			onClick: Te,
+			onKeydown: Oe
 		}, null, 8, [
 			"label",
 			"icon",
 			"aria-expanded",
 			"aria-controls",
 			"class"
-		]), (g(), o(r, { to: "body" }, [u(i, {
+		]), (_(), s(i, { to: "body" }, [d(a, {
 			"enter-active-class": "transition duration-150 ease-out",
 			"enter-from-class": "opacity-0 motion-safe:scale-95",
 			"leave-active-class": "transition duration-100 ease-in",
 			"leave-to-class": "opacity-0"
 		}, {
-			default: oe(() => [j.value ? (g(), c("div", {
+			default: oe(() => [M.value ? (_(), l("div", {
 				key: 0,
 				id: R,
 				ref_key: "panel",
 				ref: V,
 				role: "dialog",
 				"aria-labelledby": z,
-				class: m(["ac-scrollbar fixed z-[90] flex w-[calc(340px*var(--ac-scale))] max-w-[calc(100vw-16px)] flex-col rounded-14 border border-border bg-surface p-2 shadow-lg", U.value ? "origin-top-right" : "origin-bottom-right"]),
-				style: h(H.value),
+				class: h(["ac-scrollbar fixed z-[90] flex w-[calc(340px*var(--ac-scale))] max-w-[calc(100vw-16px)] flex-col rounded-14 border border-border bg-surface p-2 shadow-lg", U.value ? "origin-top-right" : "origin-bottom-right"]),
+				style: g(H.value),
 				"data-ac-ds": "",
 				"data-testid": "ac-app-switcher-panel",
-				onKeydown: Oe
+				onKeydown: ke
 			}, [
-				l("p", {
+				u("p", {
 					id: z,
 					class: "px-3 pt-2 pb-2 text-sm font-semibold tracking-[0.08em] text-muted uppercase"
-				}, y(d.label), 1),
-				l("ul", _e, [(g(!0), c(n, null, v(G.value, (t) => (g(), c("li", { key: t.name }, [l("a", {
+				}, b(f.label), 1),
+				u("ul", _e, [(_(!0), l(r, null, te(G.value, (t) => (_(), l("li", { key: t.name }, [u("a", {
 					href: t.url,
 					"data-app-tile": "",
 					"aria-current": K(t) ? "page" : void 0,
@@ -267,37 +268,37 @@ var ge = {
 					class: "group relative flex h-full flex-col items-center gap-2 rounded-8 px-1.5 pt-3 pb-2.5 text-center no-underline outline-none transition-colors duration-200 hover:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset aria-[current=page]:bg-accent",
 					"data-ac-ds": "",
 					"data-testid": "ac-app-switcher-app",
-					onClick: (e) => Ee(t)
+					onClick: (e) => De(t)
 				}, [
-					l("span", {
-						class: m(["relative inline-flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-10 ring-1 transition-transform duration-200 ring-inset motion-safe:group-hover:-translate-y-px", t.iconUrl || t.name === D && !t.icon ? "bg-surface ring-border" : ye[t.color ?? "slate"]]),
+					u("span", {
+						class: h(["relative inline-flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-10 ring-1 transition-transform duration-200 ring-inset motion-safe:group-hover:-translate-y-px", t.iconUrl || t.name === O && !t.icon ? "bg-surface ring-border" : be[t.color ?? "slate"]]),
 						"aria-hidden": "true"
-					}, [t.iconUrl ? (g(), c("img", {
+					}, [t.iconUrl ? (_(), l("img", {
 						key: 0,
 						src: t.iconUrl,
 						alt: "",
 						class: "size-7 object-contain"
-					}, null, 8, x)) : t.icon ? (g(), o(ne(t.icon), {
+					}, null, 8, S)) : t.icon ? (_(), s(y(t.icon), {
 						key: 1,
 						class: "size-5"
-					})) : t.name === D ? (g(), o(e, {
+					})) : t.name === O ? (_(), s(e, {
 						key: 2,
 						variant: "mark",
 						size: 28,
 						label: ""
-					})) : (g(), c("span", S, y(t.title.charAt(0)), 1))], 2),
-					l("span", C, y(t.title), 1),
-					t.subtitle ? (g(), c("span", w, y(t.subtitle), 1)) : s("", !0),
-					K(t) ? (g(), c("span", T, [u(b(ce), {
+					})) : (_(), l("span", C, b(t.title.charAt(0)), 1))], 2),
+					u("span", w, b(t.title), 1),
+					t.subtitle ? (_(), l("span", T, b(t.subtitle), 1)) : c("", !0),
+					K(t) ? (_(), l("span", E, [d(x(ce), {
 						class: "size-2.5",
 						"stroke-width": 3
-					})])) : s("", !0)
+					})])) : c("", !0)
 				], 8, ve)]))), 128))]),
-				a.$slots.footer ? (g(), c("div", E, [te(a.$slots, "footer", { close: Z })])) : s("", !0)
-			], 38)) : s("", !0)]),
+				n.$slots.footer ? (_(), l("div", D, [ne(n.$slots, "footer", { close: Z })])) : c("", !0)
+			], 38)) : c("", !0)]),
 			_: 3
 		})]))]));
 	}
 });
 //#endregion
-export { A as default };
+export { j as default };

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

@@ -2,13 +2,13 @@ import type { Tone, Variant } from "./types";
 export interface Props {
     /** Text label. You can also pass content through the default slot. */
     title?: string;
-    /** Colour of the button. `white` and `ghost` are neutral styles for secondary actions. */
-    color?: Tone | "white" | "ghost";
-    /** `solid` fill, `light` tinted fill (12% of the colour), `outlined` border on the page background, or `link`: coloured text with no box that underlines on hover, e.g. "Go to Health". */
-    variant?: Variant | "link";
-    /** Height and padding: `xs` 28px, `small` 36px, `normal` 42px (the field height, so a button lines up with an input), `medium` 42px with 16px text and 44px from 768px (cloud-ui's default `lg`). */
-    size?: "xs" | "small" | "normal" | "medium";
-    /** A round, square button for a single icon: 28px at `xs`, 32px at `small`, 36px at `normal`, 44px at `medium`. Put the icon in the `icon` or default slot; `title` becomes the accessible name, or add an `aria-label`. */
+    /** Colour of the button. `neutral` is a grey or near-black button that takes every `variant`; `white` and `ghost` are fixed neutral styles (the same as `neutral` with `outlined` and `ghost`). */
+    color?: Tone | "neutral" | "white" | "ghost";
+    /** `solid` fill, `light` tinted fill (12% of the colour), `subtle` a fainter 6% tint, `outlined` border on the page background, `ghost` no fill until hover, or `link`: coloured text with no box that underlines on hover, e.g. "Go to Health". */
+    variant?: Variant | "subtle" | "ghost" | "link";
+    /** Height and padding: `xs` 28px, `small` 36px, `normal` 42px (the field height, so a button lines up with an input), `medium` 42px with 16px text and 44px from 768px (cloud-ui's default `lg`), `xlarge` 48px with 16px text and 52px with 18px text from 768px (cloud-ui's `xl`). */
+    size?: "xs" | "small" | "normal" | "medium" | "xlarge";
+    /** A round, square button for a single icon: 28px at `xs`, 32px at `small`, 36px at `normal`, 44px at `medium`, 56px at `xlarge`. Put the icon in the `icon` or default slot; `title` becomes the accessible name, or add an `aria-label`. */
     iconOnly?: boolean;
     /** Shows a spinner before the label and blocks clicks. */
     loading?: boolean;
@@ -20,11 +20,15 @@ export interface Props {
     href?: string;
     /** Fully rounded pill corners at every size and variant, e.g. an empty state's "Get started". */
     rounded?: boolean;
+    /** With `variant="link"`, keeps the height, padding and corners of `size`, so a text link lines up with the buttons next to it. */
+    boxed?: boolean;
+    /** Native hover hint (the `title` attribute). Use it when the label comes from the default slot; the `title` prop is the visible label. */
+    hint?: string;
 }
 type __VLS_Slots = {
-    /** Button content, after the icon and `title`. */
+    /** Button content, after the icon and `title`. An icon here is 16px unless it has its own size class, e.g. `size-5`. */
     default?: () => unknown;
-    /** A 16px icon before the label (an inline SVG or icon component). */
+    /** A 16px icon before the label (an inline SVG or icon component). A size class on the icon, e.g. `size-3.5`, wins. */
     icon?: () => unknown;
     /** A 16px icon after the label, e.g. an arrow or chevron. */
     "icon-right"?: () => unknown;
@@ -34,16 +38,18 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onClick?: ((e: MouseEvent) => any) | undefined;
 }>, {
-    variant: Variant | "link";
+    variant: Variant | "subtle" | "ghost" | "link";
     type: "button" | "submit" | "reset";
     title: string;
     disabled: boolean;
-    color: Tone | "white" | "ghost";
+    color: Tone | "neutral" | "white" | "ghost";
     href: string;
-    size: "xs" | "small" | "normal" | "medium";
+    size: "xs" | "small" | "normal" | "medium" | "xlarge";
     iconOnly: boolean;
     loading: boolean;
     rounded: boolean;
+    boxed: boolean;
+    hint: string;
 }, {}, {}, {}, 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/AcButton.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import e from "./AcSpinner.js";
 import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, defineComponent as a, normalizeClass as o, openBlock as s, renderSlot as c, resolveDynamicComponent as l, toDisplayString as u, withCtx as d } from "vue";
 //#region src/lib/components/AcButton.vue?vue&type=script&setup=true&lang.ts
-var f = /*@__PURE__*/ a({
+var f = "[:where(&)_svg]:size-4", p = /*@__PURE__*/ a({
 	__name: "AcButton",
 	props: {
 		title: { default: "" },
@@ -25,45 +25,68 @@ var f = /*@__PURE__*/ a({
 		rounded: {
 			type: Boolean,
 			default: !1
-		}
+		},
+		boxed: {
+			type: Boolean,
+			default: !1
+		},
+		hint: { default: void 0 }
 	},
 	emits: ["click"],
-	setup(a, { emit: f }) {
-		let p = a, m = f, h = {
+	setup(a, { emit: p }) {
+		let m = a, h = p, g = {
 			primary: {
 				solid: "border-transparent bg-primary text-white shadow-button hover:bg-primary-hover hover:shadow-sm",
 				light: "border-transparent bg-primary/12 text-primary-strong hover:bg-primary/18",
-				outlined: "border-primary/35 bg-background text-primary-strong hover:bg-primary/10"
+				subtle: "border-transparent bg-primary/6 text-primary-strong hover:bg-primary/12",
+				outlined: "border-primary/35 bg-background text-primary-strong hover:bg-primary/10",
+				ghost: "border-transparent bg-transparent text-primary-strong hover:bg-primary/10"
 			},
 			info: {
 				solid: "border-transparent bg-info text-white shadow-button hover:bg-info-hover hover:shadow-sm",
 				light: "border-transparent bg-info/12 text-info-strong hover:bg-info/18",
-				outlined: "border-info/40 bg-background text-info-strong hover:bg-info/10"
+				subtle: "border-transparent bg-info/6 text-info-strong hover:bg-info/12",
+				outlined: "border-info/40 bg-background text-info-strong hover:bg-info/10",
+				ghost: "border-transparent bg-transparent text-info-strong hover:bg-info/10"
 			},
 			success: {
 				solid: "border-transparent bg-success text-white shadow-button hover:bg-success-hover hover:shadow-sm",
 				light: "border-transparent bg-success/12 text-success-strong hover:bg-success/18",
-				outlined: "border-success/40 bg-background text-success-strong hover:bg-success/10"
+				subtle: "border-transparent bg-success/6 text-success-strong hover:bg-success/12",
+				outlined: "border-success/40 bg-background text-success-strong hover:bg-success/10",
+				ghost: "border-transparent bg-transparent text-success-strong hover:bg-success/10"
 			},
 			warning: {
 				solid: "border-transparent bg-warning text-on-warning shadow-button hover:bg-warning-hover hover:shadow-sm",
 				light: "border-transparent bg-warning/12 text-warning-strong hover:bg-warning/18",
-				outlined: "border-warning/45 bg-background text-warning-strong hover:bg-warning/10"
+				subtle: "border-transparent bg-warning/6 text-warning-strong hover:bg-warning/12",
+				outlined: "border-warning/45 bg-background text-warning-strong hover:bg-warning/10",
+				ghost: "border-transparent bg-transparent text-warning-strong hover:bg-warning/10"
 			},
 			danger: {
 				solid: "border-transparent bg-red-50 text-white shadow-button hover:bg-red-40 hover:shadow-sm",
 				light: "border-transparent bg-danger/12 text-danger-strong hover:bg-danger/18",
-				outlined: "border-danger/40 bg-background text-danger-strong hover:bg-danger/10"
+				subtle: "border-transparent bg-danger/6 text-danger-strong hover:bg-danger/12",
+				outlined: "border-danger/40 bg-background text-danger-strong hover:bg-danger/10",
+				ghost: "border-transparent bg-transparent text-danger-strong hover:bg-danger/10"
+			},
+			neutral: {
+				solid: "border-transparent bg-body text-background shadow-button hover:bg-body/90 hover:shadow-sm",
+				light: "border-transparent bg-surface-sunken text-heading hover:bg-accent-hover",
+				subtle: "border-transparent bg-surface-sunken/70 text-heading hover:bg-surface-sunken",
+				outlined: "border-border bg-background text-heading hover:bg-surface-sunken/70",
+				ghost: "border-transparent bg-transparent text-heading hover:bg-surface-sunken"
 			}
-		}, g = {
+		}, _ = {
 			primary: "text-primary-strong",
 			info: "text-info-strong",
 			success: "text-success-strong",
 			warning: "text-warning-strong",
 			danger: "text-danger-strong",
+			neutral: "text-muted hover:text-heading",
 			white: "text-muted hover:text-heading",
 			ghost: "text-muted hover:text-heading"
-		}, _ = t(() => p.variant === "link"), v = t(() => p.variant === "link" ? g[p.color] : p.color === "white" ? "border-border bg-background text-heading hover:bg-surface-sunken/70" : p.color === "ghost" ? "border-transparent bg-transparent text-heading hover:bg-surface-sunken" : h[p.color][p.variant]), y = {
+		}, v = t(() => m.variant === "link"), y = t(() => v.value && !m.boxed), b = t(() => m.variant === "link" ? _[m.color] : m.color === "white" ? g.neutral.outlined : m.color === "ghost" ? g.neutral.ghost : g[m.color][m.variant]), x = {
 			xs: {
 				base: "h-7 gap-1.5 px-2 text-xs",
 				icon: "size-7 text-xs"
@@ -79,22 +102,27 @@ var f = /*@__PURE__*/ a({
 			medium: {
 				base: "h-10.5 gap-2 px-5 text-base md:h-11 md:text-lg",
 				icon: "size-11 text-lg"
+			},
+			xlarge: {
+				base: "h-12 gap-2 px-6 text-lg md:h-13 md:text-xl",
+				icon: "size-14 text-xl"
 			}
-		}, b = {
-			xs: "gap-1 text-xs [&_svg]:size-3.5",
-			small: "gap-1 text-base [&_svg]:size-4",
-			normal: "gap-1 text-base [&_svg]:size-4",
-			medium: "gap-1 text-base md:text-lg [&_svg]:size-4"
-		}, x = t(() => {
-			if (_.value) return [b[p.size], p.rounded ? "rounded-full" : "rounded-4"];
-			let e = y[p.size];
-			return p.iconOnly ? [`${e.icon} rounded-full`, "[&_svg]:size-4"] : [
+		}, S = {
+			xs: "gap-1 text-xs [:where(&)_svg]:size-3.5",
+			small: `gap-1 text-base ${f}`,
+			normal: `gap-1 text-base ${f}`,
+			medium: `gap-1 text-base md:text-lg ${f}`,
+			xlarge: `gap-1 text-lg md:text-xl ${f}`
+		}, C = t(() => {
+			if (y.value) return [S[m.size], m.rounded ? "rounded-full" : "rounded-4"];
+			let e = x[m.size];
+			return m.iconOnly ? [`${e.icon} rounded-full`, f] : [
 				e.base,
-				p.rounded ? "rounded-full" : "rounded-10",
-				"[&_svg]:size-4"
+				m.rounded ? "rounded-full" : "rounded-10",
+				f
 			];
-		}), S = t(() => _.value ? "group/ac-button underline-offset-4 hover:underline" : "justify-center border active:translate-y-px disabled:shadow-none disabled:active:translate-y-0 motion-reduce:active:translate-y-0"), C = (e) => {
-			!p.disabled && !p.loading && m("click", e);
+		}), w = t(() => y.value ? "group/ac-button underline-offset-4 hover:underline" : v.value ? "group/ac-button justify-center border border-transparent underline-offset-4 hover:underline" : "justify-center border active:translate-y-px disabled:shadow-none disabled:active:translate-y-0 motion-reduce:active:translate-y-0"), T = (e) => {
+			!m.disabled && !m.loading && h("click", e);
 		};
 		return (t, f) => (s(), n(l(a.href ? "a" : "button"), {
 			href: a.href && !a.disabled ? a.href : void 0,
@@ -102,25 +130,26 @@ var f = /*@__PURE__*/ a({
 			disabled: !a.href && a.disabled || void 0,
 			"aria-disabled": a.href && a.disabled || void 0,
 			"aria-busy": a.loading || void 0,
+			title: a.hint || void 0,
 			class: o(["relative inline-flex cursor-pointer items-center font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow,transform] duration-200 select-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50", [
-				S.value,
-				v.value,
+				w.value,
+				b.value,
 				"focus-visible:ring-ring",
-				x.value,
+				C.value,
 				a.loading && "pointer-events-none"
 			]]),
 			"data-ac-ds": "",
 			"data-testid": "ac-button",
-			onClick: C
+			onClick: T
 		}, {
 			default: d(() => [
 				a.loading ? (s(), n(e, {
 					key: 0,
-					class: o(!a.iconOnly && !_.value && "-ml-0.5"),
+					class: o(!a.iconOnly && !y.value && "-ml-0.5"),
 					label: ""
 				}, null, 8, ["class"])) : t.$slots.icon ? (s(), i("span", {
 					key: 1,
-					class: o([!a.iconOnly && !_.value && "-ml-0.5", "inline-flex shrink-0 items-center justify-center"]),
+					class: o([!a.iconOnly && !y.value && "-ml-0.5", "inline-flex shrink-0 items-center justify-center"]),
 					"aria-hidden": "true"
 				}, [c(t.$slots, "icon")], 2)) : r("", !0),
 				a.title ? (s(), i("span", {
@@ -130,7 +159,7 @@ var f = /*@__PURE__*/ a({
 				a.iconOnly && a.loading ? r("", !0) : c(t.$slots, "default", {}, void 0, void 0, 3),
 				t.$slots["icon-right"] ? (s(), i("span", {
 					key: 4,
-					class: o(["inline-flex shrink-0 items-center justify-center", _.value ? "transition-transform duration-200 group-hover/ac-button:translate-x-0.5 motion-reduce:transition-none motion-reduce:group-hover/ac-button:translate-x-0" : "-mr-0.5"]),
+					class: o(["inline-flex shrink-0 items-center justify-center", v.value ? "transition-transform duration-200 group-hover/ac-button:translate-x-0.5 motion-reduce:transition-none motion-reduce:group-hover/ac-button:translate-x-0" : "-mr-0.5"]),
 					"aria-hidden": "true"
 				}, [c(t.$slots, "icon-right")], 2)) : r("", !0)
 			]),
@@ -141,9 +170,10 @@ var f = /*@__PURE__*/ a({
 			"disabled",
 			"aria-disabled",
 			"aria-busy",
+			"title",
 			"class"
 		]));
 	}
 });
 //#endregion
-export { f as default };
+export { p as default };

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

@@ -1,6 +1,6 @@
 import type { Component } from "vue";
 export interface Props {
-    /** Header title. The header renders with a title, an `icon`, or the `actions` or `badges` slot. */
+    /** Header title. The header renders with a title, a description, an `icon`, or the `actions`, `badges` or `description` slot. */
     title?: string;
     /** Small line under the title. */
     subtitle?: string;
@@ -16,8 +16,12 @@ export interface Props {
     variant?: "default" | "muted" | "dashed" | "danger";
     /** Tints the header icon tile, the `accent` wash and the watermark: `primary` (green), `blue`, `violet`, `red` or `amber`. */
     color?: "primary" | "blue" | "violet" | "red" | "amber";
-    /** `normal` header with a 16px title and a divider; `small` a compact header with a 28px icon tile, a 14px title and no divider, like cloud-ui's section cards. */
-    headerSize?: "normal" | "small";
+    /** `normal` header with a 16px title and a divider; `small` a compact header with a 28px icon tile, a 14px title and no divider, like cloud-ui's section cards; `bar` a compact single-line bar (10px top and bottom, centred) with a divider over the body, for dense detail pages (cloud-ui's `headerSize="sm"`). */
+    headerSize?: "normal" | "small" | "bar";
+    /** Heading level of the title, so the card fits the page outline, e.g. `h2` for a top-level section. */
+    titleTag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    /** A plain card: no header or footer, the padding on the card itself, and the default slot straight inside it, so classes on the card such as `flex items-center`, `grid`, `space-y-4` or `divide-y` lay out your content. Padding comes from `padding` (24px by default; `padded=false` removes it); a background class on the card replaces the variant's fill. */
+    bare?: boolean;
     /** Hover look for a card that acts as a link or button: a pointer, a primary-tinted edge and a light wash. */
     hoverable?: boolean;
     /** Rests the card on a faint shadow that deepens on hover; with `hoverable` the card also lifts 2px. */
@@ -32,7 +36,7 @@ type __VLS_Slots = {
     default?: () => unknown;
     /** Buttons on the right of the header. */
     actions?: () => unknown;
-    /** Replaces the `icon` tile's content, e.g. a logo image. */
+    /** Replaces the `icon` tile's content, e.g. a logo image. An unsized SVG icon here is 16px (14px with `header-size="small"`), and with `accent` it's also the watermark. */
     icon?: () => unknown;
     /** Replaces the line under the title, e.g. text with a link. */
     description?: () => unknown;
@@ -50,7 +54,9 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     subtitle: string;
     padded: boolean;
     padding: "none" | "xs" | "sm" | "md" | "lg";
-    headerSize: "normal" | "small";
+    headerSize: "normal" | "small" | "bar";
+    titleTag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    bare: boolean;
     hoverable: boolean;
     shadow: boolean;
     accent: boolean;