@ac-design/design-system 2.2.1 → 2.4.0

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

@@ -63,6 +63,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     label: string;
+    align: "start" | "end";
     currentApp: "console" | "db" | "platform" | "id" | "billing" | "selfhost" | "learn" | "grafana" | "observe" | (string & {});
     baseUrl: string;
     activeOrganization: string;
@@ -71,7 +72,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     isOfflineInstaller: boolean;
     apps: AppSwitcherApp[];
     hideCurrent: boolean;
-    align: "start" | "end";
 }, {}, {}, {}, 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/AcAppSwitcher.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
-import e from "./AcLogo.js";
-import t from "./AcNavbarItem.js";
-import { fixedFrame as n } from "./fixedFrame.js";
+import { fixedFrame as e } from "./fixedFrame.js";
+import t from "./AcLogo.js";
+import n from "./AcNavbarItem.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
@@ -163,11 +163,11 @@ var ge = {
 			t.length && t[Math.max(0, Math.min(e, t.length - 1))].focus();
 		}
 		function X() {
-			let e = q();
-			if (!e || !V.value) return;
-			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;
+			let t = q();
+			if (!t || !V.value) return;
+			let n = t.getBoundingClientRect(), r = e(), { offsetWidth: i, offsetHeight: a } = V.value, o = r.bottom - n.bottom - 6 - 8, s = n.top - r.top - 6 - 8, c = o < a && s > o, l = (j.align === "end" ? n.right - i : n.left) - r.left;
 			U.value = !c, H.value = {
-				[c ? "bottom" : "top"]: `${c ? r.bottom - t.top + 6 : t.bottom + 6 - r.top}px`,
+				[c ? "bottom" : "top"]: `${c ? r.bottom - n.top + 6 : n.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`
 			};
@@ -217,7 +217,7 @@ var ge = {
 			await m(), X();
 			let t = J(), n = G.value.findIndex(K);
 			Y(n >= 0 && t[n] ? n : 0);
-		}), ee(() => $(!1)), (n, o) => (_(), l("div", ge, [d(t, {
+		}), ee(() => $(!1)), (e, o) => (_(), l("div", ge, [d(n, {
 			ref_key: "trigger",
 			ref: B,
 			label: f.label,
@@ -260,41 +260,41 @@ var ge = {
 					id: z,
 					class: "px-3 pt-2 pb-2 text-sm font-semibold tracking-[0.08em] text-muted uppercase"
 				}, 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,
+				u("ul", _e, [(_(!0), l(r, null, te(G.value, (e) => (_(), l("li", { key: e.name }, [u("a", {
+					href: e.url,
 					"data-app-tile": "",
-					"aria-current": K(t) ? "page" : void 0,
-					title: t.subtitle || void 0,
+					"aria-current": K(e) ? "page" : void 0,
+					title: e.subtitle || void 0,
 					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) => De(t)
+					onClick: (t) => De(e)
 				}, [
 					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"]]),
+						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", e.iconUrl || e.name === O && !e.icon ? "bg-surface ring-border" : be[e.color ?? "slate"]]),
 						"aria-hidden": "true"
-					}, [t.iconUrl ? (_(), l("img", {
+					}, [e.iconUrl ? (_(), l("img", {
 						key: 0,
-						src: t.iconUrl,
+						src: e.iconUrl,
 						alt: "",
 						class: "size-7 object-contain"
-					}, null, 8, S)) : t.icon ? (_(), s(y(t.icon), {
+					}, null, 8, S)) : e.icon ? (_(), s(y(e.icon), {
 						key: 1,
 						class: "size-5"
-					})) : t.name === O ? (_(), s(e, {
+					})) : e.name === O ? (_(), s(t, {
 						key: 2,
 						variant: "mark",
 						size: 28,
 						label: ""
-					})) : (_(), 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), {
+					})) : (_(), l("span", C, b(e.title.charAt(0)), 1))], 2),
+					u("span", w, b(e.title), 1),
+					e.subtitle ? (_(), l("span", T, b(e.subtitle), 1)) : c("", !0),
+					K(e) ? (_(), l("span", E, [d(x(ce), {
 						class: "size-2.5",
 						"stroke-width": 3
 					})])) : c("", !0)
 				], 8, ve)]))), 128))]),
-				n.$slots.footer ? (_(), l("div", D, [ne(n.$slots, "footer", { close: Z })])) : c("", !0)
+				e.$slots.footer ? (_(), l("div", D, [ne(e.$slots, "footer", { close: Z })])) : c("", !0)
 			], 38)) : c("", !0)]),
 			_: 3
 		})]))]));

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

@@ -20,9 +20,9 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     title: string;
     description: string;
     height: number;
-    loading: boolean;
     animation: boolean;
     tooltip: boolean;
+    loading: boolean;
     emptyText: string;
     lineWidth: number;
     stacked: boolean;

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

@@ -21,9 +21,9 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     height: number;
     orientation: "vertical" | "horizontal";
     radius: number;
-    loading: boolean;
     animation: boolean;
     tooltip: boolean;
+    loading: boolean;
     emptyText: string;
     stacked: boolean;
     renderer: "canvas" | "svg";

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

@@ -2,17 +2,17 @@ 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;
-    /** Disables the button (50% opacity, no click events). */
+    /** Disables the button: 50% opacity, no clicks, and no hover colour. With `hint` it keeps hover so the hint still shows, with a not-allowed cursor. */
     disabled?: boolean;
     /** Native button type. Use `submit` inside forms. */
     type?: "button" | "submit" | "reset";
@@ -20,11 +20,19 @@ 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;
+    /** Shows this text in an `AcTooltip` above the button on hover and keyboard focus, e.g. "Delete VPC" on an icon-only button. An icon-only button without `title` also takes it as its accessible name. Old `tooltip-text`. */
+    tooltip?: string;
+    /** Stretches the button to the full width of its container. */
+    block?: boolean;
 }
 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 +42,20 @@ 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";
+    tooltip: string;
     iconOnly: boolean;
     loading: boolean;
     rounded: boolean;
+    boxed: boolean;
+    hint: string;
+    block: 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/AcButton.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,9 @@
 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";
+import t from "./AcTooltip.js";
+import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, defineComponent as o, guardReactiveProps as s, mergeProps as c, normalizeClass as l, normalizeProps as u, openBlock as d, renderSlot as f, resolveDynamicComponent as p, toDisplayString as m, useAttrs as h, withCtx as g } from "vue";
 //#region src/lib/components/AcButton.vue?vue&type=script&setup=true&lang.ts
-var f = /*@__PURE__*/ a({
+var _ = "[:where(&)_svg]:size-4", v = /*@__PURE__*/ o({
+	inheritAttrs: !1,
 	__name: "AcButton",
 	props: {
 		title: { default: "" },
@@ -25,45 +27,73 @@ var f = /*@__PURE__*/ a({
 		rounded: {
 			type: Boolean,
 			default: !1
+		},
+		boxed: {
+			type: Boolean,
+			default: !1
+		},
+		hint: { default: void 0 },
+		tooltip: { default: "" },
+		block: {
+			type: Boolean,
+			default: !1
 		}
 	},
 	emits: ["click"],
-	setup(a, { emit: f }) {
-		let p = a, m = f, h = {
+	setup(o, { emit: v }) {
+		let y = o, b = v, x = {
 			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 = {
+		}, S = {
 			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 = {
+		}, C = n(() => y.variant === "link"), w = n(() => C.value && !y.boxed), T = n(() => y.variant === "link" ? S[y.color] : y.color === "white" ? x.neutral.outlined : y.color === "ghost" ? x.neutral.ghost : x[y.color][y.variant]), E = {
 			xs: {
 				base: "h-7 gap-1.5 px-2 text-xs",
 				icon: "size-7 text-xs"
@@ -79,71 +109,92 @@ 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"] : [
+		}, D = {
+			xs: "gap-1 text-xs [:where(&)_svg]:size-3.5",
+			small: `gap-1 text-base ${_}`,
+			normal: `gap-1 text-base ${_}`,
+			medium: `gap-1 text-base md:text-lg ${_}`,
+			xlarge: `gap-1 text-lg md:text-xl ${_}`
+		}, O = n(() => {
+			if (w.value) return [D[y.size], y.rounded ? "rounded-full" : "rounded-4"];
+			let e = E[y.size];
+			return y.iconOnly ? [`${e.icon} rounded-full`, _] : [
 				e.base,
-				p.rounded ? "rounded-full" : "rounded-10",
-				"[&_svg]:size-4"
+				y.rounded ? "rounded-full" : "rounded-10",
+				_
 			];
-		}), 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);
+		}), k = n(() => w.value ? "group/ac-button underline-offset-4 hover:underline" : C.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"), A = h(), j = (e, { slots: t }) => t.default?.(), M = n(() => y.tooltip ? {
+			content: y.tooltip,
+			class: [A.class, y.block && "w-full"],
+			style: A.style
+		} : {}), N = n(() => {
+			if (!y.tooltip) return A;
+			let { class: e, style: t, ...n } = A;
+			return n;
+		}), P = (e) => {
+			!y.disabled && !y.loading && b("click", e);
 		};
-		return (t, f) => (s(), n(l(a.href ? "a" : "button"), {
-			href: a.href && !a.disabled ? a.href : void 0,
-			type: a.href ? void 0 : a.type,
-			disabled: !a.href && a.disabled || void 0,
-			"aria-disabled": a.href && a.disabled || void 0,
-			"aria-busy": a.loading || 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,
-				"focus-visible:ring-ring",
-				x.value,
-				a.loading && "pointer-events-none"
-			]]),
-			"data-ac-ds": "",
-			"data-testid": "ac-button",
-			onClick: C
-		}, {
-			default: d(() => [
-				a.loading ? (s(), n(e, {
-					key: 0,
-					class: o(!a.iconOnly && !_.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"]),
-					"aria-hidden": "true"
-				}, [c(t.$slots, "icon")], 2)) : r("", !0),
-				a.title ? (s(), i("span", {
-					key: 2,
-					class: o(a.iconOnly && "sr-only")
-				}, u(a.title), 3)) : r("", !0),
-				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"]),
-					"aria-hidden": "true"
-				}, [c(t.$slots, "icon-right")], 2)) : r("", !0)
-			]),
+		return (n, h) => (d(), r(p(o.tooltip ? t : j), u(s(M.value)), {
+			default: g(() => [(d(), r(p(o.href ? "a" : "button"), c({
+				"aria-label": o.iconOnly && !o.title && o.tooltip ? o.tooltip : void 0,
+				href: o.href && !o.disabled ? o.href : void 0,
+				type: o.href ? void 0 : o.type,
+				disabled: !o.href && o.disabled || void 0,
+				"aria-disabled": o.href && o.disabled || void 0,
+				"aria-busy": o.loading || void 0,
+				title: o.hint || void 0,
+				class: ["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", [
+					k.value,
+					T.value,
+					"focus-visible:ring-ring",
+					O.value,
+					o.loading && "pointer-events-none",
+					!o.hint && "disabled:pointer-events-none",
+					o.block && "w-full"
+				]],
+				"data-ac-ds": "",
+				"data-testid": "ac-button"
+			}, N.value, { onClick: P }), {
+				default: g(() => [
+					o.loading ? (d(), r(e, {
+						key: 0,
+						class: l(!o.iconOnly && !w.value && "-ml-0.5"),
+						label: ""
+					}, null, 8, ["class"])) : n.$slots.icon ? (d(), a("span", {
+						key: 1,
+						class: l([!o.iconOnly && !w.value && "-ml-0.5", "inline-flex shrink-0 items-center justify-center"]),
+						"aria-hidden": "true"
+					}, [f(n.$slots, "icon")], 2)) : i("", !0),
+					o.title ? (d(), a("span", {
+						key: 2,
+						class: l(o.iconOnly && "sr-only")
+					}, m(o.title), 3)) : i("", !0),
+					o.iconOnly && o.loading ? i("", !0) : f(n.$slots, "default", {}, void 0, void 0, 3),
+					n.$slots["icon-right"] ? (d(), a("span", {
+						key: 4,
+						class: l(["inline-flex shrink-0 items-center justify-center", C.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"
+					}, [f(n.$slots, "icon-right")], 2)) : i("", !0)
+				]),
+				_: 3
+			}, 16, [
+				"aria-label",
+				"href",
+				"type",
+				"disabled",
+				"aria-disabled",
+				"aria-busy",
+				"title",
+				"class"
+			]))]),
 			_: 3
-		}, 8, [
-			"href",
-			"type",
-			"disabled",
-			"aria-disabled",
-			"aria-busy",
-			"class"
-		]));
+		}, 16));
 	}
 });
 //#endregion
-export { f as default };
+export { v 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;