@ac-design/design-system 1.0.3 → 2.1.0

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

@@ -0,0 +1,84 @@
+import e from "./AcButton.js";
+import { Fragment as t, Teleport as n, Transition as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createSlots as l, createTextVNode as u, createVNode as d, defineComponent as f, mergeProps as p, openBlock as m, ref as h, renderSlot as g, resolveDynamicComponent as _, toDisplayString as v, watch as y, withCtx as b } from "vue";
+import { Trash2 as x } from "@lucide/vue";
+//#region src/lib/components/AcBulkActionBar.vue?vue&type=script&setup=true&lang.ts
+var S = { class: "min-h-0 overflow-hidden" }, C = { class: "text-base text-heading" }, w = { class: "font-semibold tabular-nums" }, T = { class: "flex flex-wrap items-center gap-2" }, E = {
+	class: "sr-only",
+	role: "status",
+	"data-ac-ds": "",
+	"data-testid": "ac-bulk-action-bar-status"
+}, D = "button:not([disabled]), a[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", O = /*@__PURE__*/ f({
+	inheritAttrs: !1,
+	__name: "AcBulkActionBar",
+	props: {
+		count: {},
+		label: {},
+		pluralLabel: { default: "" },
+		actionLabel: { default: "Delete" },
+		actionColor: { default: "danger" },
+		actionIcon: { default: void 0 },
+		loading: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["clear", "action"],
+	setup(f, { emit: O }) {
+		let k = f, A = O, j = h(null), M = h(""), N = i(() => k.count === 1 ? k.label : k.pluralLabel || `${k.label}s`), P = i(() => `${k.count} ${N.value} selected`), F = i(() => k.actionIcon ?? (k.actionColor === "danger" ? x : void 0));
+		function I() {
+			let e = j.value;
+			if (!e || !e.contains(document.activeElement)) return;
+			let t = [...document.querySelectorAll(D)].find((t) => !e.contains(t) && !!(e.compareDocumentPosition(t) & Node.DOCUMENT_POSITION_FOLLOWING) && t.offsetParent !== null);
+			t ? t.focus() : document.activeElement?.blur();
+		}
+		return y(() => k.count, (e, t) => {
+			e <= 0 && t > 0 && I(), M.value = e > 0 ? P.value : t > 0 ? "Selection cleared" : "";
+		}), (i, h) => (m(), s(t, null, [d(r, {
+			"enter-active-class": "grid transition-[grid-template-rows,opacity,translate] duration-200 ease-out motion-reduce:transition-none",
+			"enter-from-class": "grid-rows-[0fr] -translate-y-1 opacity-0",
+			"enter-to-class": "grid-rows-[1fr]",
+			"leave-active-class": "grid transition-[grid-template-rows,opacity] duration-150 ease-in motion-reduce:transition-none",
+			"leave-from-class": "grid-rows-[1fr]",
+			"leave-to-class": "grid-rows-[0fr] opacity-0"
+		}, {
+			default: b(() => [f.count > 0 ? (m(), s("div", p({ key: 0 }, i.$attrs, {
+				"data-ac-ds": "",
+				"data-testid": "ac-bulk-action-bar"
+			}), [c("div", S, [c("div", {
+				ref_key: "bar",
+				ref: j,
+				role: "region",
+				"aria-label": "Bulk actions",
+				class: "flex flex-wrap items-center justify-between gap-x-3 gap-y-2 rounded-14 border border-primary/30 bg-primary/5 px-4 py-2.5"
+			}, [c("p", C, [c("span", w, v(f.count), 1), u(" " + v(N.value) + " selected ", 1)]), c("div", T, [
+				g(i.$slots, "actions", {}, () => [g(i.$slots, "default")]),
+				d(e, {
+					color: "ghost",
+					size: "small",
+					title: "Clear",
+					"aria-label": "Clear selection",
+					disabled: f.loading,
+					onClick: h[0] ||= (e) => A("clear")
+				}, null, 8, ["disabled"]),
+				f.actionLabel ? (m(), a(e, {
+					key: 0,
+					color: f.actionColor,
+					variant: "light",
+					size: "small",
+					loading: f.loading,
+					onClick: h[1] ||= (e) => A("action")
+				}, l({
+					default: b(() => [u(" " + v(f.actionLabel), 1)]),
+					_: 2
+				}, [F.value ? {
+					name: "icon",
+					fn: b(() => [(m(), a(_(F.value)))]),
+					key: "0"
+				} : void 0]), 1032, ["color", "loading"])) : o("", !0)
+			])], 512)])], 16)) : o("", !0)]),
+			_: 3
+		}), (m(), a(n, { to: "body" }, [c("div", E, v(M.value), 1)]))], 64));
+	}
+});
+//#endregion
+export { O as default };

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

@@ -4,11 +4,13 @@ export interface Props {
     title?: string;
     /** Colour of the button. `white` and `ghost` are neutral styles for secondary actions. */
     color?: Tone | "white" | "ghost";
-    /** `solid` fill, `light` tinted fill (-95 background, -30 text) or `outlined` border. */
-    variant?: Variant;
-    /** Height and padding: `small` 28px, `normal` 32px, `medium` 40px. */
-    size?: "small" | "normal" | "medium";
-    /** Shows a spinner, hides the label and blocks clicks. */
+    /** `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`. */
+    iconOnly?: boolean;
+    /** Shows a spinner before the label and blocks clicks. */
     loading?: boolean;
     /** Disables the button (50% opacity, no click events). */
     disabled?: boolean;
@@ -16,6 +18,8 @@ export interface Props {
     type?: "button" | "submit" | "reset";
     /** Renders an <a> styled as the button instead of a <button>. */
     href?: string;
+    /** Fully rounded pill corners at every size and variant, e.g. an empty state's "Get started". */
+    rounded?: boolean;
 }
 type __VLS_Slots = {
     /** Button content, after the icon and `title`. */
@@ -30,14 +34,16 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
 }, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
     onClick?: ((e: MouseEvent) => any) | undefined;
 }>, {
-    variant: Variant;
+    variant: Variant | "link";
     type: "button" | "submit" | "reset";
     title: string;
     disabled: boolean;
     color: Tone | "white" | "ghost";
     href: string;
-    size: "small" | "normal" | "medium";
+    size: "xs" | "small" | "normal" | "medium";
+    iconOnly: boolean;
     loading: boolean;
+    rounded: 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,21 +1,17 @@
 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 = {
-	key: 0,
-	class: "-ml-0.5 inline-flex shrink-0 items-center justify-center",
-	"aria-hidden": "true"
-}, p = { key: 1 }, m = {
-	key: 2,
-	class: "-mr-0.5 inline-flex shrink-0 items-center justify-center",
-	"aria-hidden": "true"
-}, h = /*@__PURE__*/ a({
+var f = /*@__PURE__*/ a({
 	__name: "AcButton",
 	props: {
 		title: { default: "" },
 		color: { default: "primary" },
 		variant: { default: "solid" },
 		size: { default: "normal" },
+		iconOnly: {
+			type: Boolean,
+			default: !1
+		},
 		loading: {
 			type: Boolean,
 			default: !1
@@ -25,68 +21,118 @@ var f = {
 			default: !1
 		},
 		type: { default: "button" },
-		href: { default: void 0 }
+		href: { default: void 0 },
+		rounded: {
+			type: Boolean,
+			default: !1
+		}
 	},
 	emits: ["click"],
-	setup(a, { emit: h }) {
-		let g = a, _ = h, v = {
+	setup(a, { emit: f }) {
+		let p = a, m = f, h = {
 			primary: {
-				solid: "bg-primary text-white border-black/15 shadow-button hover:bg-primary-hover",
-				light: "bg-primary-95 text-primary-20 border-transparent hover:bg-primary-93",
-				outlined: "bg-surface text-primary-20 border-[color-mix(in_srgb,var(--color-primary)_38%,var(--color-border))] shadow-xs hover:bg-primary-97 hover:border-[color-mix(in_srgb,var(--color-primary)_60%,var(--color-border))]"
+				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"
 			},
 			info: {
-				solid: "bg-info text-white border-black/15 shadow-button hover:bg-info-hover",
-				light: "bg-blue-95 text-blue-30 border-transparent hover:bg-blue-93",
-				outlined: "bg-surface text-blue-30 border-blue-80 shadow-xs hover:bg-blue-97"
+				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"
 			},
 			success: {
-				solid: "bg-success text-white border-black/15 shadow-button hover:bg-success-hover",
-				light: "bg-green-95 text-green-20 border-transparent hover:bg-green-93",
-				outlined: "bg-surface text-green-20 border-green-70 shadow-xs hover:bg-green-97"
+				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"
 			},
 			warning: {
-				solid: "bg-warning text-on-warning border-black/10 shadow-button hover:bg-warning-hover",
-				light: "bg-yellow-95 text-yellow-20 border-transparent hover:bg-yellow-93",
-				outlined: "bg-surface text-yellow-20 border-yellow-70 shadow-xs hover:bg-yellow-97"
+				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"
 			},
 			danger: {
-				solid: "bg-danger text-white border-black/15 shadow-button hover:bg-danger-hover",
-				light: "bg-red-95 text-red-30 border-transparent hover:bg-red-93",
-				outlined: "bg-surface text-red-30 border-red-80 shadow-xs hover:bg-red-97"
+				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"
+			}
+		}, g = {
+			primary: "text-primary-strong",
+			info: "text-info-strong",
+			success: "text-success-strong",
+			warning: "text-warning-strong",
+			danger: "text-danger-strong",
+			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 = {
+			xs: {
+				base: "h-7 gap-1.5 px-2 text-xs",
+				icon: "size-7 text-xs"
+			},
+			small: {
+				base: "h-9 gap-2 px-3 text-base",
+				icon: "size-8 text-base"
+			},
+			normal: {
+				base: "h-10.5 gap-2 px-4 text-base",
+				icon: "size-9 text-base"
+			},
+			medium: {
+				base: "h-10.5 gap-2 px-5 text-base md:h-11 md:text-lg",
+				icon: "size-11 text-lg"
 			}
-		}, y = t(() => g.color === "white" ? "bg-surface text-heading border-border shadow-xs hover:bg-surface-muted hover:border-border-dark" : g.color === "ghost" ? "bg-transparent text-body border-transparent hover:bg-surface-sunken hover:text-heading" : v[g.color][g.variant]), b = t(() => ({
-			small: "h-7 gap-1.5 px-2.5 text-xs [&_svg]:size-3.5",
-			normal: "h-8 gap-2 px-3.5 text-base [&_svg]:size-4",
-			medium: "h-10 gap-2 px-5 text-lg [&_svg]:size-4"
-		})[g.size]), x = (e) => {
-			!g.disabled && !g.loading && _("click", e);
+		}, 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"] : [
+				e.base,
+				p.rounded ? "rounded-full" : "rounded-10",
+				"[&_svg]:size-4"
+			];
+		}), 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);
 		};
-		return (t, h) => (s(), n(l(a.href ? "a" : "button"), {
+		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 justify-center rounded-6 border font-medium tracking-[-0.005em] whitespace-nowrap transition-[background-color,border-color,color,box-shadow,transform] duration-150 ease-out select-none focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring active:translate-y-px disabled:cursor-not-allowed disabled:opacity-50 disabled:shadow-none disabled:active:translate-y-0 aria-disabled:pointer-events-none aria-disabled:opacity-50", [
-				y.value,
-				b.value,
-				a.loading && "text-transparent! pointer-events-none"
+			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: x
+			onClick: C
 		}, {
 			default: d(() => [
-				t.$slots.icon ? (s(), i("span", f, [c(t.$slots, "icon")])) : r("", !0),
-				a.title ? (s(), i("span", p, u(a.title), 1)) : r("", !0),
-				c(t.$slots, "default"),
-				t.$slots["icon-right"] ? (s(), i("span", m, [c(t.$slots, "icon-right")])) : r("", !0),
 				a.loading ? (s(), n(e, {
-					key: 3,
-					class: o(["absolute inset-0 m-auto", a.variant === "solid" && a.color !== "white" && a.color !== "ghost" ? "text-white" : "text-primary"]),
+					key: 0,
+					class: o(!a.iconOnly && !_.value && "-ml-0.5"),
 					label: ""
-				}, null, 8, ["class"])) : r("", !0)
+				}, 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)
 			]),
 			_: 3
 		}, 8, [
@@ -100,4 +146,4 @@ var f = {
 	}
 });
 //#endregion
-export { h as default };
+export { f as default };

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

@@ -1,6 +1,6 @@
 import { computed as e, createElementBlock as t, defineComponent as n, normalizeClass as r, openBlock as i, renderSlot as a } from "vue";
 //#region src/lib/components/AcButtons.vue?vue&type=script&setup=true&lang.ts
-var o = ["aria-label"], s = "[&>*]:rounded-none [&>*:first-child]:rounded-l-6 [&>*:last-child]:rounded-r-6 [&>*:not(:first-child)]:-ml-px [&>*:hover]:z-[1] [&>*:focus-visible]:z-[2]", c = /*@__PURE__*/ n({
+var o = ["aria-label"], s = "[&>*]:rounded-none [&>*:first-child]:rounded-l-10 [&>*:last-child]:rounded-r-10 [&>*:not(:first-child)]:-ml-px [&>*:hover]:z-[1] [&>*:focus-visible]:z-[2]", c = /*@__PURE__*/ n({
 	__name: "AcButtons",
 	props: {
 		attached: {

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

@@ -1,21 +1,60 @@
+import type { Component } from "vue";
 export interface Props {
-    /** Header title. The header only renders with a title or `actions` slot. */
+    /** Header title. The header renders with a title, an `icon`, or the `actions` or `badges` slot. */
     title?: string;
     /** Small line under the title. */
     subtitle?: string;
-    /** Adds 20px padding to the body. Turn off for flush tables; the body then clips to the card's rounded corners. */
+    /** Same as `subtitle`, under cloud-ui's name. The `description` slot replaces it. */
+    description?: string;
+    /** A Lucide icon shown in a tinted 32px tile before the title (28px with `header-size="small"`). */
+    icon?: Component;
+    /** Adds 24px padding to the body (20px with `header-size="small"`). Turn off for flush tables; the body then clips to the card's rounded corners. */
     padded?: boolean;
+    /** Padding on cloud-ui's scale, for body, header and footer alike: `none`, `xs` 12px, `sm` 16px, `md` 24px, `lg` 32px. Overrides `padded`. */
+    padding?: "none" | "xs" | "sm" | "md" | "lg";
+    /** `default` white card, `muted` a sunken 40% fill for secondary panels, `dashed` a transparent card with a dashed edge for placeholders, `danger` a red-tinted card for destructive settings such as a "Danger zone". */
+    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";
+    /** 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. */
+    shadow?: boolean;
+    /** A primary gradient wash behind the header, plus the `icon` as a large watermark on normal headers. */
+    accent?: boolean;
+    /** Root element, e.g. `a`, `button` or `router-link` for a card that opens something. Pass `href` or `to` as usual. */
+    as?: string;
 }
 type __VLS_Slots = {
-    /** Card body. */
+    /** Card body. Leave it empty for a header-only card; the header then closes the card without a divider. */
     default?: () => unknown;
     /** Buttons on the right of the header. */
     actions?: () => unknown;
+    /** Replaces the `icon` tile's content, e.g. a logo image. */
+    icon?: () => unknown;
+    /** Replaces the line under the title, e.g. text with a link. */
+    description?: () => unknown;
+    /** Badges or tags after the title. */
+    badges?: () => unknown;
+    /** A footer row under the body, e.g. a timestamp or a link. */
+    footer?: () => unknown;
 };
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    variant: "default" | "muted" | "dashed" | "danger";
     title: string;
+    description: string;
+    icon: Component;
+    color: "primary" | "blue" | "violet" | "red" | "amber";
     subtitle: string;
     padded: boolean;
+    padding: "none" | "xs" | "sm" | "md" | "lg";
+    headerSize: "normal" | "small";
+    hoverable: boolean;
+    shadow: boolean;
+    accent: boolean;
+    as: 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/AcCard.vue_vue_type_script_setup_true_lang.js

@@ -1,28 +1,189 @@
-import { createCommentVNode as e, createElementBlock as t, createElementVNode as n, defineComponent as r, normalizeClass as i, openBlock as a, renderSlot as o, toDisplayString as s } from "vue";
+import { Comment as e, Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, defineComponent as s, normalizeClass as c, openBlock as l, renderSlot as u, resolveDynamicComponent as d, toDisplayString as f, useSlots as p, withCtx as m } from "vue";
 //#region src/lib/components/AcCard.vue?vue&type=script&setup=true&lang.ts
-var c = {
-	class: "rounded-10 border border-border bg-surface shadow-xs",
-	"data-ac-ds": "",
-	"data-testid": "ac-card"
-}, l = {
+var h = {
 	key: 0,
-	class: "flex items-center justify-between gap-4 border-b border-border-light px-5 py-3.5"
-}, u = { class: "min-w-0" }, d = { class: "truncate" }, f = {
+	class: "pointer-events-none absolute inset-0 -z-10 overflow-hidden rounded-[inherit]",
+	"aria-hidden": "true"
+}, g = { class: "flex min-w-0 flex-1 items-center gap-3" }, _ = { class: "min-w-0 flex-1" }, v = { class: "flex flex-wrap items-center gap-2" }, y = {
 	key: 0,
-	class: "mt-0.5 truncate text-xs text-muted"
-}, p = { class: "flex shrink-0 items-center gap-2" }, m = /*@__PURE__*/ r({
+	class: "mt-0.5 text-xs leading-4 text-muted"
+}, b = {
+	key: 1,
+	class: "mt-0.5 text-xs leading-4 text-muted"
+}, x = {
+	key: 1,
+	class: "flex shrink-0 flex-wrap items-center gap-2"
+}, S = /*@__PURE__*/ s({
 	__name: "AcCard",
 	props: {
 		title: { default: "" },
 		subtitle: { default: "" },
+		description: { default: "" },
+		icon: { default: void 0 },
 		padded: {
 			type: Boolean,
 			default: !0
-		}
+		},
+		padding: { default: void 0 },
+		variant: { default: "default" },
+		color: { default: "primary" },
+		headerSize: { default: "normal" },
+		hoverable: {
+			type: Boolean,
+			default: !1
+		},
+		shadow: {
+			type: Boolean,
+			default: !1
+		},
+		accent: {
+			type: Boolean,
+			default: !1
+		},
+		as: { default: "section" }
 	},
-	setup(r) {
-		return (m, h) => (a(), t("section", c, [r.title || m.$slots.actions ? (a(), t("header", l, [n("div", u, [n("h5", d, s(r.title), 1), r.subtitle ? (a(), t("p", f, s(r.subtitle), 1)) : e("", !0)]), n("div", p, [o(m.$slots, "actions")])])) : e("", !0), n("div", { class: i(r.padded ? "p-5" : ["overflow-hidden rounded-b-10", !(r.title || m.$slots.actions) && "rounded-t-10"]) }, [o(m.$slots, "default")], 2)]));
+	setup(s) {
+		let S = s, C = p(), w = {
+			default: "border-border bg-surface",
+			muted: "border-border bg-surface-sunken/40",
+			dashed: "border-dashed border-border bg-transparent",
+			danger: "border-danger/30 bg-danger/5"
+		}, T = {
+			none: "",
+			xs: "p-3",
+			sm: "p-4",
+			md: "p-6",
+			lg: "p-8"
+		}, E = {
+			none: "px-4",
+			xs: "px-3",
+			sm: "px-4",
+			md: "px-6",
+			lg: "px-8"
+		}, D = {
+			none: "pt-4",
+			xs: "pt-3",
+			sm: "pt-4",
+			md: "pt-5",
+			lg: "pt-6"
+		}, O = {
+			none: "pb-4",
+			xs: "pb-3",
+			sm: "pb-4",
+			md: "pb-5",
+			lg: "pb-6"
+		}, k = {
+			primary: {
+				tile: "bg-primary/10 text-primary",
+				border: "border-primary/25",
+				ring: "ring-primary/20",
+				wash: "from-primary/10 via-primary/3",
+				washSm: "from-primary/[0.07]",
+				watermark: "text-primary/5"
+			},
+			blue: {
+				tile: "bg-info/10 text-info",
+				border: "border-info/25",
+				ring: "ring-info/20",
+				wash: "from-info/10 via-info/3",
+				washSm: "from-info/[0.07]",
+				watermark: "text-info/5"
+			},
+			violet: {
+				tile: "bg-pending/10 text-pending",
+				border: "border-pending/25",
+				ring: "ring-pending/20",
+				wash: "from-pending/10 via-pending/3",
+				washSm: "from-pending/[0.07]",
+				watermark: "text-pending/5"
+			},
+			red: {
+				tile: "bg-danger/10 text-danger",
+				border: "border-danger/25",
+				ring: "ring-danger/20",
+				wash: "from-danger/10 via-danger/3",
+				washSm: "from-danger/[0.07]",
+				watermark: "text-danger/5"
+			},
+			amber: {
+				tile: "bg-warning/10 text-warning",
+				border: "border-warning/25",
+				ring: "ring-warning/20",
+				wash: "from-warning/10 via-warning/3",
+				washSm: "from-warning/[0.07]",
+				watermark: "text-warning/5"
+			}
+		}, A = n(() => S.headerSize === "small"), j = n(() => k[S.color]), M = n(() => S.description || S.subtitle), N = n(() => [
+			w[S.variant],
+			S.as !== "section" && "w-full text-left no-underline outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+			S.hoverable && "cursor-pointer hover:border-primary/30 hover:bg-accent-hover/60",
+			S.shadow && "shadow-xs hover:shadow-card",
+			S.hoverable && S.shadow && "hover:-translate-y-0.5 motion-reduce:hover:translate-y-0"
+		]);
+		function P() {
+			return !!(S.title || S.icon || C.icon || C.actions || C.badges);
+		}
+		function F(n) {
+			return n.some((n) => n.type === e ? !1 : n.type !== t || F(n.children));
+		}
+		function I() {
+			return F(C.default?.() ?? []);
+		}
+		function L() {
+			let e = I(), t = S.padding;
+			return [
+				t ? [
+					"items-start gap-3",
+					E[t],
+					D[t],
+					!A.value && "border-border/60"
+				] : A.value ? "items-start gap-3 px-5 pt-5" : "items-start gap-3 border-border/60 px-6 pt-5",
+				!e && (t ? O[t] : "pb-5"),
+				e && !A.value && "border-b pb-3",
+				!e && !C.footer && "rounded-b-[calc(var(--radius-14)-1px)]",
+				S.accent && (A.value ? ["bg-linear-to-r to-transparent", j.value.washSm] : ["bg-linear-to-br to-transparent", j.value.wash])
+			];
+		}
+		function R() {
+			return S.padding && S.padding !== "none" ? T[S.padding] : S.padded && S.padding !== "none" ? A.value ? "p-5" : "p-6" : [
+				"overflow-hidden",
+				!C.footer && "rounded-b-14",
+				!P() && "rounded-t-14"
+			];
+		}
+		return (e, t) => (l(), r(d(s.as), {
+			class: c(["flex flex-col rounded-14 border text-body transition-[background-color,border-color,box-shadow,translate] duration-200 ease-out motion-reduce:transition-none", N.value]),
+			"data-ac-ds": "",
+			"data-testid": "ac-card"
+		}, {
+			default: m(() => [
+				P() ? (l(), a("header", {
+					key: 0,
+					class: c(["relative isolate flex flex-wrap justify-between rounded-t-[calc(var(--radius-14)-1px)]", L()])
+				}, [
+					s.accent && s.icon && !A.value ? (l(), a("div", h, [(l(), r(d(s.icon), { class: c(["absolute -top-4 -right-4 size-24", j.value.watermark]) }, null, 8, ["class"]))])) : i("", !0),
+					o("div", g, [s.icon || e.$slots.icon ? (l(), a("span", {
+						key: 0,
+						class: c(["flex shrink-0 items-center justify-center", [j.value.tile, A.value ? ["size-7 rounded-8 ring-1 ring-inset", j.value.ring] : ["size-8 rounded-10 border", j.value.border]]]),
+						"aria-hidden": "true"
+					}, [u(e.$slots, "icon", {}, () => [(l(), r(d(s.icon), { class: c(A.value ? "size-3.5" : "size-4") }, null, 8, ["class"]))])], 2)) : i("", !0), o("div", _, [o("div", v, [s.title ? (l(), a("h3", {
+						key: 0,
+						class: c(["truncate font-heading font-semibold tracking-tight text-heading", A.value ? "text-base" : "text-lg leading-tight"])
+					}, f(s.title), 3)) : i("", !0), u(e.$slots, "badges")]), e.$slots.description ? (l(), a("div", y, [u(e.$slots, "description")])) : M.value ? (l(), a("p", b, f(M.value), 1)) : i("", !0)])]),
+					e.$slots.actions ? (l(), a("div", x, [u(e.$slots, "actions")])) : i("", !0)
+				], 2)) : i("", !0),
+				I() ? (l(), a("div", {
+					key: 1,
+					class: c(["flex-1", R()])
+				}, [u(e.$slots, "default")], 2)) : i("", !0),
+				e.$slots.footer ? (l(), a("footer", {
+					key: 2,
+					class: c(["flex flex-wrap items-center gap-3 border-t border-border py-3 text-base text-muted", s.padding ? E[s.padding] : A.value ? "px-5" : "px-6"])
+				}, [u(e.$slots, "footer")], 2)) : i("", !0)
+			]),
+			_: 3
+		}, 8, ["class"]));
 	}
 });
 //#endregion
-export { m as default };
+export { S as default };

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

@@ -109,10 +109,12 @@ export interface Props {
     unit?: string;
     /** Shows dates as “3d ago” with the exact time on hover. Turn off to show the exact time. */
     relative?: boolean;
-    /** Shown for null, empty text, empty lists and maps, and the server's `<none>` / `<unknown>`. */
+    /** Shown for null, empty text, empty lists and maps, and the server's `<none>` / `<unknown>`. With the default dash, a label column says "No labels" instead, like cloud-ui's "No tags". */
     emptyText?: string;
     /** Shows a placeholder bar while the value loads. */
     loading?: boolean;
+    /** Shows a status as a coloured dot and text without the pill, for dense tables (cloud-ui's `plain` status). */
+    plain?: boolean;
 }
 declare const _default: typeof __VLS_export;
 export default _default;
@@ -127,13 +129,14 @@ declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {},
     loading: boolean;
     align: "left" | "center" | "right";
     maxItems: number;
+    plain: boolean;
+    maxWidth: string;
     tooltip: string;
     column: ResourceColumn;
-    relative: boolean;
     emptyText: string;
     cell: ResourceCell;
     resolveLink: (link: string) => string;
     mono: boolean;
-    maxWidth: string;
     unit: string;
+    relative: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;