@ac-design/design-system 1.0.3 → 2.1.0

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

@@ -0,0 +1,205 @@
+import e from "../charts/ChartFrame.js";
+import { bindAxisHover as t, useEChart as n } from "../charts/echarts.js";
+import { readNumber as r } from "../charts/shared.js";
+import { LARGE_DATA as i, useXYChart as a } from "../charts/xy.js";
+import { cartesianOption as o, locateRow as s, prepareZoom as c } from "../charts/cartesian.js";
+import { createBlock as l, createElementVNode as u, createSlots as d, defineComponent as f, guardReactiveProps as p, isRef as m, normalizeProps as h, openBlock as g, ref as _, renderSlot as v, unref as y, withCtx as b } from "vue";
+import { ChartArea as x } from "@lucide/vue";
+import { use as S } from "echarts/core";
+import { LineChart as C } from "echarts/charts";
+import { AxisPointerComponent as w, GridComponent as T } from "echarts/components";
+//#region src/lib/components/AcAreaChart.vue?vue&type=script&setup=true&lang.ts
+var E = /*@__PURE__*/ f({
+	__name: "AcAreaChart",
+	props: {
+		stacked: {
+			type: Boolean,
+			default: !1
+		},
+		gradient: {
+			type: Boolean,
+			default: !0
+		},
+		curve: { default: "monotone" },
+		lineWidth: { default: 2 },
+		data: {},
+		index: {},
+		categories: {},
+		height: { default: 280 },
+		xFormatter: {
+			type: Function,
+			default: void 0
+		},
+		yFormatter: {
+			type: Function,
+			default: void 0
+		},
+		xLabel: { default: "" },
+		yLabel: { default: "" },
+		legend: { default: "top" },
+		tooltip: {
+			type: Boolean,
+			default: !0
+		},
+		gridLines: {
+			type: Boolean,
+			default: !0
+		},
+		yDomain: { default: void 0 },
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		emptyText: { default: "No data to show yet" },
+		title: { default: "" },
+		description: { default: "" },
+		zoom: {
+			type: Boolean,
+			default: !1
+		},
+		renderer: { default: "canvas" },
+		animation: {
+			type: Boolean,
+			default: !0
+		}
+	},
+	setup(f) {
+		S([
+			C,
+			T,
+			w
+		]);
+		let E = f, D = a(E, { stacked: () => E.stacked }), { hidden: O, width: k, legendItems: A, rowLabel: j, tooltipItems: M, tooltipTotal: N, table: P, ariaLabel: F } = D, I = _(), L = _(null);
+		function R(e, t) {
+			if (!E.gradient) return e.alpha(t, .2);
+			let [n, r] = E.stacked ? [.45, .12] : [.3, .05];
+			return {
+				type: "linear",
+				x: 0,
+				y: 0,
+				x2: 0,
+				y2: 1,
+				colorStops: [{
+					offset: 0,
+					color: e.alpha(t, n)
+				}, {
+					offset: 1,
+					color: e.alpha(t, r)
+				}]
+			};
+		}
+		function z(e) {
+			let t = E.data.length > i;
+			return D.visibleKeys.value.map((n) => {
+				let i = D.colorOf.value[n], a = e.color(i), o = E.data.map((e) => r(e, n));
+				return {
+					id: n,
+					type: "line",
+					name: E.categories[n]?.name ?? n,
+					data: D.byPosition.value ? o : o.map((e, t) => [D.xNumbers.value[t], e]),
+					stack: E.stacked ? "total" : void 0,
+					smooth: E.curve === "monotone" && .4,
+					smoothMonotone: E.curve === "monotone" ? "x" : void 0,
+					step: E.curve === "step" && "middle",
+					showSymbol: !1,
+					symbol: t ? "none" : "circle",
+					symbolSize: 6,
+					lineStyle: {
+						width: E.lineWidth,
+						color: a,
+						opacity: +(E.lineWidth > 0)
+					},
+					itemStyle: {
+						color: a,
+						borderColor: e.surface,
+						borderWidth: 2
+					},
+					areaStyle: {
+						color: R(e, i),
+						opacity: 1
+					},
+					emphasis: {
+						scale: 1.4,
+						lineStyle: { width: E.lineWidth },
+						areaStyle: { color: R(e, i) }
+					},
+					sampling: t ? "lttb" : void 0,
+					progressive: t ? 4e3 : 0,
+					connectNulls: !1
+				};
+			});
+		}
+		return n({
+			host: I,
+			renderer: () => E.renderer,
+			prepare: () => c(E),
+			option: (e) => ({
+				...o(e, E, D, {
+					boundaryGap: !1,
+					pointer: "line"
+				}),
+				series: z(e)
+			}),
+			setup: (e) => t(e, (t) => s(e, t, D), (e, t, n) => {
+				let r = E.data[e];
+				r && E.tooltip && (L.value = {
+					clientX: t,
+					clientY: n,
+					title: j(e),
+					items: M(r),
+					total: E.stacked && D.visibleKeys.value.length > 1 ? N(r) : void 0,
+					datum: r,
+					index: e
+				});
+			}, () => L.value = null)
+		}), (t, n) => (g(), l(e, {
+			hidden: y(O),
+			"onUpdate:hidden": n[0] ||= (e) => m(O) ? O.value = e : null,
+			width: y(k),
+			"onUpdate:width": n[1] ||= (e) => m(k) ? k.value = e : null,
+			testid: "ac-area-chart",
+			height: f.height,
+			loading: f.loading,
+			empty: !f.data.length,
+			"empty-text": f.emptyText,
+			"empty-icon": y(x),
+			legend: f.legend,
+			"legend-items": y(A),
+			summary: y(F),
+			title: f.title,
+			description: f.description,
+			table: y(P),
+			tip: L.value,
+			tooltip: f.tooltip
+		}, d({
+			default: b(() => [u("div", {
+				ref_key: "host",
+				ref: I,
+				class: "size-full"
+			}, null, 512)]),
+			_: 2
+		}, [t.$slots.tooltip ? {
+			name: "tooltip",
+			fn: b((e) => [v(t.$slots, "tooltip", h(p(e)))]),
+			key: "0"
+		} : void 0]), 1032, [
+			"hidden",
+			"width",
+			"height",
+			"loading",
+			"empty",
+			"empty-text",
+			"empty-icon",
+			"legend",
+			"legend-items",
+			"summary",
+			"title",
+			"description",
+			"table",
+			"tip",
+			"tooltip"
+		]));
+	}
+});
+//#endregion
+export { E as default };

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

@@ -5,10 +5,12 @@ export interface Props {
     imgUrl?: string;
     /** Accessible name. Defaults to `name`; pass an empty string when the name is already written next to the avatar. */
     alt?: string;
-    /** Diameter: `xs` 20px, `small` 24px, `normal` 32px, `large` 48px. */
-    size?: "xs" | "small" | "normal" | "large";
-    /** `circle` for people, `square` (rounded corners) for organisations, teams and products. */
+    /** Diameter: `xs` 20px, `small` 24px, `normal` 32px, `medium` 40px, `large` 48px. */
+    size?: "xs" | "small" | "normal" | "medium" | "large";
+    /** `circle` for people, `square` (4px corners) for organisations, teams and products. Defaults to `square` for an organisation. */
     shape?: "circle" | "square";
+    /** `organization` shows cloud-ui's org icon when there's no image: a white building on a primary gradient. */
+    kind?: "person" | "organization";
     /** Adds a presence dot in the bottom-right corner. */
     status?: "online" | "away" | "busy" | "offline";
     /** Shows `+N` instead of a picture, as the last item of an avatar group. */
@@ -16,11 +18,12 @@ export interface Props {
 }
 declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     name: string;
-    size: "xs" | "small" | "normal" | "large";
+    size: "xs" | "small" | "normal" | "medium" | "large";
     status: "online" | "away" | "busy" | "offline";
     alt: string;
     imgUrl: string;
     shape: "circle" | "square";
+    kind: "person" | "organization";
     overflowCount: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -1,57 +1,64 @@
-import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, defineComponent as i, normalizeClass as a, openBlock as o, ref as s, toDisplayString as c, watch as l } from "vue";
+import { computed as e, createBlock as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, defineComponent as a, normalizeClass as o, openBlock as s, ref as c, toDisplayString as l, unref as u, watch as d } from "vue";
+import { Building as f } from "@lucide/vue";
 //#region src/lib/components/AcAvatar.vue?vue&type=script&setup=true&lang.ts
-var u = [
+var p = [
 	"role",
 	"aria-label",
 	"aria-hidden"
-], d = ["src"], f = {
+], m = ["src"], h = {
 	key: 1,
 	class: "tabular-nums",
 	"aria-hidden": "true"
-}, p = {
-	key: 2,
+}, g = {
+	key: 3,
 	"aria-hidden": "true"
-}, m = /*@__PURE__*/ i({
+}, _ = /*@__PURE__*/ a({
 	__name: "AcAvatar",
 	props: {
 		name: { default: "" },
 		imgUrl: { default: "" },
 		alt: { default: void 0 },
 		size: { default: "normal" },
-		shape: { default: "circle" },
+		shape: { default: void 0 },
+		kind: { default: "person" },
 		status: { default: void 0 },
 		overflowCount: { default: 0 }
 	},
-	setup(i) {
-		let m = i, h = {
+	setup(a) {
+		let _ = a, v = {
 			xs: {
 				box: "size-5 text-xm",
 				dot: "size-1.5",
-				square: "rounded-4"
+				icon: "size-2.5"
 			},
 			small: {
 				box: "size-6 text-sm",
 				dot: "size-2",
-				square: "rounded-4"
+				icon: "size-3"
 			},
 			normal: {
 				box: "size-8 text-xs",
 				dot: "size-2.5",
-				square: "rounded-6"
+				icon: "size-4"
+			},
+			medium: {
+				box: "size-10 text-base",
+				dot: "size-2.5",
+				icon: "size-5"
 			},
 			large: {
 				box: "size-12 text-xl",
 				dot: "size-3",
-				square: "rounded-10"
+				icon: "size-6"
 			}
-		}, g = [
-			"bg-primary-90 text-primary-20",
-			"bg-blue-90 text-blue-20",
-			"bg-purple-90 text-purple-20",
-			"bg-yellow-90 text-yellow-20",
-			"bg-red-90 text-red-20",
-			"bg-secondary-90 text-secondary-20"
-		], _ = {
+		}, y = [
+			"bg-primary/15 text-primary-strong",
+			"bg-info/15 text-info-strong",
+			"bg-pending/15 text-pending-strong",
+			"bg-warning/20 text-warning-strong",
+			"bg-danger/15 text-danger-strong",
+			"bg-success/15 text-success-strong"
+		], b = {
 			online: {
 				dot: "bg-success",
 				label: "Online"
@@ -65,52 +72,50 @@ var u = [
 				label: "Busy"
 			},
 			offline: {
-				dot: "bg-slate-60",
+				dot: "bg-muted",
 				label: "Offline"
 			}
-		}, v = s(!1), y = e(() => !!m.imgUrl && !v.value && !m.overflowCount), b = e(() => {
-			let e = m.name.split("@")[0].split(/[\s._-]+/).filter(Boolean);
+		}, x = c(!1), S = e(() => !!_.imgUrl && !x.value && !_.overflowCount), C = e(() => _.kind === "organization" && !_.overflowCount), w = e(() => {
+			let e = _.name.split("@")[0].split(/[\s._-]+/).filter(Boolean);
 			return e.length ? (e.length > 1 ? e[0][0] + e[1][0] : e[0].slice(0, 1)).toUpperCase() : "";
-		}), x = e(() => {
-			if (m.overflowCount || !m.name) return "bg-surface-sunken text-label";
+		}), T = e(() => {
+			if (C.value) return "bg-linear-to-br from-primary/80 to-primary text-white";
+			if (_.overflowCount || !_.name) return "bg-surface-sunken text-muted";
 			let e = 0;
-			for (let t of m.name) e = e * 31 + t.charCodeAt(0) >>> 0;
-			return g[e % g.length];
-		}), S = e(() => {
-			if (m.overflowCount) return m.alt ?? `${m.overflowCount} more`;
-			let e = m.alt ?? m.name;
-			return e ? m.status ? `${e} (${_[m.status].label})` : e : "";
-		}), C = e(() => m.shape === "circle" ? "rounded-full" : h[m.size].square);
-		return l(() => m.imgUrl, () => v.value = !1), (e, s) => (o(), n("span", {
-			class: a(["relative inline-flex shrink-0 bg-surface align-middle", [h[i.size].box, C.value]]),
-			role: S.value ? "img" : void 0,
-			"aria-label": S.value || void 0,
-			"aria-hidden": !S.value || void 0,
+			for (let t of _.name) e = e * 31 + t.charCodeAt(0) >>> 0;
+			return y[e % y.length];
+		}), E = e(() => {
+			if (_.overflowCount) return _.alt ?? `${_.overflowCount} more`;
+			let e = _.alt ?? _.name;
+			return e ? _.status ? `${e} (${b[_.status].label})` : e : "";
+		}), D = e(() => (_.shape ?? (_.kind === "organization" ? "square" : "circle")) === "square"), O = e(() => D.value ? "rounded-4" : "rounded-full");
+		return d(() => _.imgUrl, () => x.value = !1), (e, c) => (s(), r("span", {
+			class: o(["relative inline-flex shrink-0 bg-surface align-middle", [v[a.size].box, O.value]]),
+			role: E.value ? "img" : void 0,
+			"aria-label": E.value || void 0,
+			"aria-hidden": !E.value || void 0,
 			"data-ac-ds": "",
 			"data-testid": "ac-avatar"
-		}, [
-			r("span", { class: a(["inline-flex size-full items-center justify-center overflow-hidden font-semibold tracking-[-0.01em] select-none", [C.value, y.value ? "bg-surface-sunken" : x.value]]) }, [y.value ? (o(), n("img", {
-				key: 0,
-				src: i.imgUrl,
-				alt: "",
-				class: "size-full object-cover",
-				onError: s[0] ||= (e) => v.value = !0
-			}, null, 40, d)) : i.overflowCount ? (o(), n("span", f, "+" + c(i.overflowCount), 1)) : (o(), n("span", p, c(b.value), 1))], 2),
-			r("span", {
-				class: a(["pointer-events-none absolute inset-0 ring-1 ring-heading/8 ring-inset", C.value]),
-				"aria-hidden": "true"
-			}, null, 2),
-			i.status && !i.overflowCount ? (o(), n("span", {
-				key: 0,
-				class: a(["absolute right-0 bottom-0 rounded-full ring-2 ring-surface", [
-					h[i.size].dot,
-					_[i.status].dot,
-					i.shape === "square" && "translate-x-1/4 translate-y-1/4"
-				]]),
-				"aria-hidden": "true"
-			}, null, 2)) : t("", !0)
-		], 10, u));
+		}, [i("span", { class: o(["inline-flex size-full items-center justify-center overflow-hidden font-semibold tracking-[-0.01em] select-none", [O.value, S.value ? "bg-surface-sunken" : T.value]]) }, [S.value ? (s(), r("img", {
+			key: 0,
+			src: a.imgUrl,
+			alt: "",
+			class: "size-full object-cover",
+			onError: c[0] ||= (e) => x.value = !0
+		}, null, 40, m)) : a.overflowCount ? (s(), r("span", h, "+" + l(a.overflowCount), 1)) : C.value ? (s(), t(u(f), {
+			key: 2,
+			class: o(v[a.size].icon),
+			"aria-hidden": "true"
+		}, null, 8, ["class"])) : (s(), r("span", g, l(w.value), 1))], 2), a.status && !a.overflowCount ? (s(), r("span", {
+			key: 0,
+			class: o(["absolute right-0 bottom-0 rounded-full ring-2 ring-surface", [
+				v[a.size].dot,
+				b[a.status].dot,
+				D.value && "translate-x-1/4 translate-y-1/4"
+			]]),
+			"aria-hidden": "true"
+		}, null, 2)) : n("", !0)], 10, p));
 	}
 });
 //#endregion
-export { m as default };
+export { _ as default };

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

@@ -1,15 +1,24 @@
+import type { Component } from "vue";
 import type { Tone, Variant } from "./types";
 export interface Props {
-    /** Text of the badge. The default slot overrides it. */
+    /** Text of the badge. The default slot overrides it. Defaults to "Default", or the humanized `status`. */
     label?: string;
-    /** Status or brand colour. Always pair a status colour with a word. */
-    color?: Tone | "default" | "secondary" | "dark";
-    /** `solid` fill, `light` tint (-95 fill, -10 text, best contrast) or `outlined`. */
+    /** Status or brand colour. Always pair a status colour with a word. Defaults to `default`, or the colour of `status`. */
+    color?: Tone | "pending" | "default" | "secondary" | "dark";
+    /** `solid` fill, `light` tint (10% fill in the colour's own text, amber text on warning) or `outlined`. Defaults to `solid`, or `light` with `status`. */
     variant?: Variant;
-    /** Pill shape (`rounded-50`) instead of the 6px control radius. */
+    /** Pill shape, the default. Set `false` for 6px corners. */
     rounded?: boolean;
-    /** Shows an 8px status dot before the label. */
+    /** Shows a 6px status dot before the label. On by default with `status`. */
     dot?: boolean;
+    /** Raw state from the API, e.g. `RUNNING`, `pending_provisioning` or `NotReady`. Sets the colour, a sentence-case label, the dot and the `light` variant; any of those props you pass wins. Stopped and paused states get a hollow grey dot; in-progress ones a spinner on a primary tint. cloud-ui's StatusBadge `state`. */
+    status?: string | null;
+    /** Enum prefix stripped from `status` before matching, e.g. `VPC_STATE` shows `VPC_STATE_AVAILABLE` as "Available". */
+    prefix?: string;
+    /** Shows a 12px spinner instead of the dot to show work in progress; with `status` the badge also turns primary. On by default for transient states such as Provisioning or Deleting. cloud-ui's `transient`. */
+    pulse?: boolean;
+    /** A Lucide icon shown at 12px before the label, in the text colour, e.g. `ShieldCheck` on "4 Active Policies". Takes the place of the dot; the in-progress spinner still wins. */
+    icon?: Component;
 }
 type __VLS_Slots = {
     /** Badge content. Replaces `label`. */
@@ -18,9 +27,13 @@ type __VLS_Slots = {
 declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
     variant: Variant;
     label: string;
-    color: Tone | "default" | "secondary" | "dark";
+    icon: Component;
+    color: Tone | "pending" | "default" | "secondary" | "dark";
+    status: string | null;
     rounded: boolean;
     dot: boolean;
+    prefix: string;
+    pulse: 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/AcBadge.vue_vue_type_script_setup_true_lang.js

@@ -1,88 +1,111 @@
-import { computed as e, createCommentVNode as t, createElementBlock as n, createTextVNode as r, defineComponent as i, normalizeClass as a, openBlock as o, renderSlot as s, toDisplayString as c } from "vue";
+import { statusMeta as e } from "./status.js";
+import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createTextVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, renderSlot as l, resolveDynamicComponent as u, toDisplayString as d, unref as f } from "vue";
+import { LoaderCircle as p } from "@lucide/vue";
 //#region src/lib/components/AcBadge.vue?vue&type=script&setup=true&lang.ts
-var l = /*@__PURE__*/ i({
+var m = /*@__PURE__*/ o({
 	__name: "AcBadge",
 	props: {
-		label: { default: "Default" },
-		color: { default: "default" },
-		variant: { default: "solid" },
+		label: { default: void 0 },
+		color: { default: void 0 },
+		variant: { default: void 0 },
 		rounded: {
 			type: Boolean,
-			default: !1
+			default: !0
 		},
 		dot: {
 			type: Boolean,
-			default: !1
-		}
+			default: void 0
+		},
+		status: { default: void 0 },
+		prefix: { default: "" },
+		pulse: {
+			type: Boolean,
+			default: void 0
+		},
+		icon: { default: void 0 }
 	},
-	setup(i) {
-		let l = i, u = {
+	setup(o) {
+		let m = o, h = {
 			primary: [
 				"bg-primary text-white",
-				"bg-primary-95 text-primary-10 ring-primary-40/20",
-				"ring-primary-70 text-primary-20",
-				"bg-primary-40"
+				"bg-primary/10 text-primary-strong",
+				"ring-primary/40 text-primary-strong",
+				"bg-primary"
 			],
 			secondary: [
 				"bg-secondary text-white",
-				"bg-secondary-95 text-secondary-10 ring-secondary-40/20",
+				"bg-secondary-95 text-secondary-20",
 				"ring-secondary-70 text-secondary",
 				"bg-secondary-40"
 			],
 			info: [
 				"bg-info text-white",
-				"bg-blue-95 text-blue-10 ring-blue-50/20",
-				"ring-blue-80 text-blue-30",
-				"bg-blue-50"
+				"bg-info/10 text-info-strong",
+				"ring-info/40 text-info-strong",
+				"bg-info"
 			],
 			success: [
 				"bg-success text-white",
-				"bg-green-95 text-green-10 ring-green-40/25",
-				"ring-green-70 text-green-20",
-				"bg-green-40"
+				"bg-success/10 text-success-strong",
+				"ring-success/40 text-success-strong",
+				"bg-success"
 			],
 			warning: [
 				"bg-warning text-on-warning",
-				"bg-yellow-95 text-yellow-10 ring-yellow-50/30",
-				"ring-yellow-70 text-yellow-20",
-				"bg-yellow-50"
+				"bg-warning/10 text-warning-strong",
+				"ring-warning/45 text-warning-strong",
+				"bg-warning"
 			],
 			danger: [
 				"bg-danger text-white",
-				"bg-red-95 text-red-10 ring-red-40/20",
-				"ring-red-80 text-red-30",
-				"bg-red-40"
+				"bg-danger/10 text-danger-strong",
+				"ring-danger/40 text-danger-strong",
+				"bg-danger"
+			],
+			pending: [
+				"bg-pending text-white",
+				"bg-pending/10 text-pending-strong",
+				"ring-pending/40 text-pending-strong",
+				"bg-pending"
 			],
 			dark: [
-				"bg-gray-20 text-surface",
-				"bg-gray-95 text-gray-10 ring-gray-40/20",
-				"ring-gray-70 text-gray-20",
-				"bg-gray-50"
+				"bg-slate-20 text-surface",
+				"bg-slate-20/10 text-heading",
+				"ring-slate-20/40 text-heading",
+				"bg-slate-20"
 			],
 			default: [
 				"bg-surface-sunken text-heading",
-				"bg-surface-muted text-heading ring-slate-50/20",
-				"ring-border-dark text-heading",
-				"bg-slate-50"
+				"bg-surface-sunken/40 text-muted",
+				"ring-border text-muted",
+				"bg-muted"
 			]
-		}, d = e(() => {
-			let [e, t, n] = u[l.color];
+		}, g = t(() => m.status === void 0 ? null : e(m.status, { prefix: m.prefix })), _ = t(() => m.pulse ?? g.value?.transient ?? !1), v = t(() => m.color ?? (g.value && _.value ? "primary" : g.value?.tone ?? "default")), y = t(() => m.variant ?? (g.value ? "light" : "solid")), b = t(() => m.label || g.value?.label || "Default"), x = t(() => m.dot ?? (!!g.value || _.value)), S = t(() => !!g.value?.hollow && !m.color), C = t(() => {
+			let [e, t, n] = h[v.value];
 			return {
 				solid: e,
-				light: `ring-1 ring-inset ${t}`,
+				light: t,
 				outlined: `bg-surface ring-1 ring-inset ${n}`
-			}[l.variant];
-		}), f = e(() => l.variant === "solid" && l.color !== "default" ? "bg-surface" : u[l.color][3]);
-		return (e, l) => (o(), n("span", {
-			class: a(["inline-flex h-5.5 items-center gap-1.5 px-2 text-xs leading-none font-medium whitespace-nowrap tabular-nums", [d.value, i.rounded ? "rounded-50" : "rounded-6"]]),
+			}[y.value];
+		}), w = t(() => S.value ? "border border-muted bg-transparent" : y.value === "solid" && v.value !== "default" ? "bg-surface" : h[v.value][3]);
+		return (e, t) => (c(), i("span", {
+			class: s(["inline-flex h-5 items-center gap-1.5 px-2.5 text-xs leading-none font-medium whitespace-nowrap tabular-nums", [C.value, o.rounded ? "rounded-full" : "rounded-6"]]),
 			"data-ac-ds": "",
 			"data-testid": "ac-badge"
-		}, [i.dot ? (o(), n("span", {
+		}, [_.value && x.value ? (c(), n(f(p), {
 			key: 0,
-			class: a(["size-1.5 shrink-0 rounded-full", f.value]),
+			class: "size-3 shrink-0 motion-safe:animate-spin",
+			"aria-hidden": "true"
+		})) : o.icon ? (c(), n(u(o.icon), {
+			key: 1,
+			class: "size-3 shrink-0",
+			"aria-hidden": "true"
+		})) : x.value ? (c(), i("span", {
+			key: 2,
+			class: s(["size-1.5 shrink-0 rounded-full", w.value]),
 			"aria-hidden": "true"
-		}, null, 2)) : t("", !0), s(e.$slots, "default", {}, () => [r(c(i.label), 1)])], 2));
+		}, null, 2)) : r("", !0), l(e.$slots, "default", {}, () => [a(d(b.value), 1)])], 2));
 	}
 });
 //#endregion
-export { l as default };
+export { m as default };

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

@@ -2,7 +2,7 @@ import type { Component } from "vue";
 export interface Props {
     /** Colour of the strip. `danger` and `warning` are announced to screen readers as alerts. */
     color?: "info" | "warning" | "danger" | "primary" | "neutral";
-    /** `subtle` tinted strip with a hairline, or `solid` full-colour fill for app-wide announcements. */
+    /** `subtle` 10% tint with a hairline and AA-contrast text, or `solid` full-colour fill for app-wide announcements. */
     variant?: "subtle" | "solid";
     /** Bold lead-in before the message, e.g. "Scheduled maintenance". */
     title?: string;