@ac-design/design-system 2.0.0 → 2.1.1

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: 1,
-	class: "-ml-0.5 inline-flex shrink-0 items-center justify-center",
-	"aria-hidden": "true"
-}, p = { key: 2 }, m = {
-	key: 3,
-	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,76 +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: "border-transparent bg-primary text-white shadow-button hover:bg-primary-hover hover:shadow-md",
+				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/40 bg-surface text-primary-strong hover:bg-primary/10"
+				outlined: "border-primary/35 bg-background text-primary-strong hover:bg-primary/10"
 			},
 			info: {
-				solid: "border-transparent bg-info text-white shadow-button hover:bg-info-hover hover:shadow-md",
+				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-surface text-info-strong hover:bg-info/10"
+				outlined: "border-info/40 bg-background text-info-strong hover:bg-info/10"
 			},
 			success: {
-				solid: "border-transparent bg-success text-white shadow-button hover:bg-success-hover hover:shadow-md",
+				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-surface text-success-strong hover:bg-success/10"
+				outlined: "border-success/40 bg-background text-success-strong hover:bg-success/10"
 			},
 			warning: {
-				solid: "border-transparent bg-warning text-on-warning shadow-button hover:bg-warning-hover hover:shadow-md",
+				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-surface text-warning-strong hover:bg-warning/10"
+				outlined: "border-warning/45 bg-background text-warning-strong hover:bg-warning/10"
 			},
 			danger: {
-				solid: "border-transparent bg-danger text-white shadow-button hover:bg-danger-hover hover:shadow-md",
+				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-surface text-danger-strong hover:bg-danger/10"
+				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 = {
-			primary: "focus-visible:ring-ring",
-			info: "focus-visible:ring-info",
-			success: "focus-visible:ring-success",
-			warning: "focus-visible:ring-warning",
-			danger: "focus-visible:ring-danger",
-			white: "focus-visible:ring-ring",
-			ghost: "focus-visible:ring-ring"
-		}, b = t(() => g.color === "white" ? "border-border bg-surface text-heading hover:bg-surface-sunken/70" : g.color === "ghost" ? "border-transparent bg-transparent text-heading hover:bg-surface-sunken" : v[g.color][g.variant]), x = t(() => ({
-			small: "h-8 gap-1.5 px-3 text-base [&_svg]:size-4",
-			normal: "h-10 gap-2 px-4 text-base [&_svg]:size-4",
-			medium: "h-11 gap-2 px-5 text-lg [&_svg]:size-4"
-		})[g.size]), S = (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-10 border 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-surface focus-visible:outline-none 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 motion-reduce:active:translate-y-0", [
-				b.value,
-				y[a.color],
+			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: S
+			onClick: C
 		}, {
 			default: d(() => [
 				a.loading ? (s(), n(e, {
 					key: 0,
-					class: "-ml-0.5",
+					class: o(!a.iconOnly && !_.value && "-ml-0.5"),
 					label: ""
-				})) : 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)
+				}, 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, [
@@ -108,4 +146,4 @@ var f = {
 	}
 });
 //#endregion
-export { h as default };
+export { f as default };

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

@@ -4,26 +4,57 @@ export interface Props {
     title?: string;
     /** Small line under the title. */
     subtitle?: string;
-    /** A Lucide icon shown in a tinted 32px tile before the title. */
+    /** 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. Turn off for flush tables; the body then clips to the card's rounded corners. */
+    /** 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,54 +1,189 @@
-import { createBlock as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, openBlock as o, renderSlot as s, resolveDynamicComponent as c, toDisplayString as l, useSlots as u } 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 d = {
-	class: "rounded-14 border border-border bg-surface text-body",
-	"data-ac-ds": "",
-	"data-testid": "ac-card"
-}, f = {
+var h = {
 	key: 0,
-	class: "flex flex-wrap items-start justify-between gap-3 border-b border-border px-6 pt-5 pb-3"
-}, p = { class: "flex min-w-0 flex-1 items-center gap-3" }, m = {
-	key: 0,
-	class: "flex size-8 shrink-0 items-center justify-center rounded-10 border border-primary/25 bg-primary/10 text-primary-strong",
+	class: "pointer-events-none absolute inset-0 -z-10 overflow-hidden rounded-[inherit]",
 	"aria-hidden": "true"
-}, h = { class: "min-w-0 flex-1" }, g = { class: "flex flex-wrap items-center gap-2" }, _ = {
-	key: 0,
-	class: "truncate font-heading text-lg leading-tight font-semibold tracking-tight text-heading"
-}, v = {
+}, 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 text-xs text-muted"
-}, y = {
-	key: 0,
-	class: "flex shrink-0 flex-wrap items-center gap-2"
+	class: "mt-0.5 text-xs leading-4 text-muted"
 }, b = {
 	key: 1,
-	class: "flex flex-wrap items-center gap-3 border-t border-border px-6 py-3 text-base text-muted"
-}, x = /*@__PURE__*/ i({
+	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(i) {
-		let x = i, S = u();
-		function C() {
-			return !!(x.title || x.icon || S.actions || S.badges);
+	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));
 		}
-		return (u, x) => (o(), n("section", d, [
-			C() ? (o(), n("header", f, [r("div", p, [i.icon ? (o(), n("span", m, [(o(), e(c(i.icon), { class: "size-4" }))])) : t("", !0), r("div", h, [r("div", g, [i.title ? (o(), n("h3", _, l(i.title), 1)) : t("", !0), s(u.$slots, "badges")]), i.subtitle ? (o(), n("p", v, l(i.subtitle), 1)) : t("", !0)])]), u.$slots.actions ? (o(), n("div", y, [s(u.$slots, "actions")])) : t("", !0)])) : t("", !0),
-			r("div", { class: a(i.padded ? "p-6" : [
+		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",
-				!u.$slots.footer && "rounded-b-14",
-				!C() && "rounded-t-14"
-			]) }, [s(u.$slots, "default")], 2),
-			u.$slots.footer ? (o(), n("footer", b, [s(u.$slots, "footer")])) : t("", !0)
-		]));
+				!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 { x as default };
+export { S as default };

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

@@ -109,7 +109,7 @@ 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;
@@ -129,14 +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;
     emptyText: string;
     cell: ResourceCell;
     resolveLink: (link: string) => string;
     mono: boolean;
-    maxWidth: string;
     unit: string;
     relative: boolean;
-    plain: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;