@ac-design/design-system 1.0.3 → 2.0.0

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

@@ -47,9 +47,9 @@ var u = /*@__PURE__*/ n({
 			ref_key: "root",
 			ref: d,
 			class: i(["w-full", {
-				"divide-y divide-border-light overflow-hidden rounded-10 border border-border bg-surface shadow-xs": n.variant === "bordered",
+				"divide-y divide-border overflow-hidden rounded-14 border border-border bg-surface": n.variant === "bordered",
 				"flex flex-col gap-3": n.variant === "separated",
-				"divide-y divide-border-light border-y border-border-light": n.variant === "flush"
+				"divide-y divide-border border-y border-border": n.variant === "flush"
 			}]),
 			"data-ac-ds": "",
 			"data-testid": "ac-accordion",

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

@@ -18,7 +18,7 @@ type __VLS_Slots = {
     title?: () => unknown;
     /** Replaces the `description` text. */
     description?: () => unknown;
-    /** A 16px icon before the title. */
+    /** A 16px icon before the title, shown in a tinted 32px tile. */
     icon?: () => unknown;
 };
 type __VLS_ModelProps = {

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

@@ -8,9 +8,9 @@ var x = [
 	"disabled"
 ], S = {
 	key: 0,
-	class: "inline-flex shrink-0 text-muted [&_svg]:size-4",
+	class: "inline-flex size-8 shrink-0 items-center justify-center rounded-10 border border-primary/25 bg-primary/10 text-primary-strong [&_svg]:size-4",
 	"aria-hidden": "true"
-}, C = { class: "min-w-0 flex-1" }, w = { class: "block text-lg leading-6 font-medium text-heading" }, T = {
+}, C = { class: "min-w-0 flex-1" }, w = { class: "block text-lg leading-6 font-semibold tracking-tight text-heading" }, T = {
 	key: 0,
 	class: "mt-0.5 block text-xs text-muted"
 }, E = [
@@ -46,7 +46,7 @@ var x = [
 		return v(N, (e) => {
 			A && (O.value = e);
 		}), (e, c) => (d(), r("div", {
-			class: u(F.value === "separated" && "overflow-hidden rounded-10 border border-border bg-surface shadow-xs"),
+			class: u(F.value === "separated" && "overflow-hidden rounded-14 border border-border bg-surface"),
 			"data-ac-ds": "",
 			"data-testid": "ac-accordion-item"
 		}, [(d(), t(p(`h${P.value}`), { class: "m-0 text-base leading-5 font-normal tracking-normal" }, {
@@ -57,7 +57,7 @@ var x = [
 				"aria-expanded": N.value,
 				"aria-controls": `${h(j)}-panel`,
 				disabled: s.disabled,
-				class: u(["flex w-full cursor-pointer items-center gap-3 py-3 text-left transition-colors duration-150 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-50", [F.value === "flush" ? "px-1" : "px-4", !s.disabled && "hover:bg-surface-muted"]]),
+				class: u(["flex w-full cursor-pointer items-center gap-3 text-left transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-50", [F.value === "flush" ? "px-1 py-3" : "px-5 py-4", !s.disabled && "hover:bg-accent-hover/60"]]),
 				onClick: I
 			}, [
 				e.$slots.icon ? (d(), r("span", S, [f(e.$slots, "icon")])) : n("", !0),
@@ -74,7 +74,7 @@ var x = [
 			"aria-labelledby": `${h(j)}-trigger`,
 			inert: !N.value || void 0,
 			class: "min-h-0 overflow-hidden"
-		}, [i("div", { class: u(["pt-1 pb-4 text-base text-body", F.value === "flush" ? "px-1" : "px-4"]) }, [f(e.$slots, "default")], 2)], 8, E)], 2)], 2));
+		}, [i("div", { class: u(["pt-0.5 text-base text-body", F.value === "flush" ? "px-1 pb-4" : "px-5 pb-5"]) }, [f(e.$slots, "default")], 2)], 8, E)], 2)], 2));
 	}
 });
 //#endregion

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

@@ -1,7 +1,7 @@
 import type { Component } from "vue";
 import type { Tone } from "./types";
 export interface Props {
-    /** Status colour of the border, tint and icon. */
+    /** Status colour: a 10% tint, a 25% border, and the icon and text in the colour's AA-contrast shade. */
     color?: Tone | "neutral";
     /** Optional bold first line above the message. */
     title?: string;

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

@@ -30,50 +30,44 @@ var x = ["role"], S = { class: "flex min-w-0 flex-1 flex-wrap items-center gap-x
 	setup(c, { emit: T }) {
 		let E = c, D = T, O = {
 			primary: {
-				box: "border-primary-90 bg-primary-97",
-				title: "text-primary-10",
-				body: "text-primary-20",
-				icon: "text-primary",
+				box: "border-primary/25 bg-primary/10 text-primary-strong",
+				title: "text-primary-strong",
+				icon: "text-primary-strong",
 				glyph: v
 			},
 			info: {
-				box: "border-blue-90 bg-blue-97",
-				title: "text-blue-10",
-				body: "text-blue-20",
-				icon: "text-blue-50",
+				box: "border-info/25 bg-info/10 text-info-strong",
+				title: "text-info-strong",
+				icon: "text-info-strong",
 				glyph: v
 			},
 			success: {
-				box: "border-green-90 bg-green-97",
-				title: "text-green-10",
-				body: "text-green-20",
-				icon: "text-green-40",
+				box: "border-success/25 bg-success/10 text-success-strong",
+				title: "text-success-strong",
+				icon: "text-success-strong",
 				glyph: _
 			},
 			warning: {
-				box: "border-yellow-80 bg-yellow-97",
-				title: "text-yellow-10",
-				body: "text-yellow-20",
-				icon: "text-yellow-50",
+				box: "border-warning/30 bg-warning/10 text-warning-strong",
+				title: "text-warning-strong",
+				icon: "text-warning-strong",
 				glyph: y
 			},
 			danger: {
-				box: "border-red-90 bg-red-97",
-				title: "text-red-10",
-				body: "text-red-20",
-				icon: "text-red-40",
+				box: "border-danger/25 bg-danger/10 text-danger-strong",
+				title: "text-danger-strong",
+				icon: "text-danger-strong",
 				glyph: g
 			},
 			neutral: {
-				box: "border-border bg-surface-muted",
+				box: "border-border bg-surface-sunken text-muted",
 				title: "text-heading",
-				body: "text-body",
 				icon: "text-muted",
 				glyph: v
 			}
 		}, k = t(() => O[E.color]), A = t(() => E.icon ?? k.value.glyph), j = t(() => E.color === "neutral" ? "white" : E.color);
 		return (t, g) => (u(), i("div", {
-			class: l(["flex items-start gap-3 rounded-10 border px-4 py-3 text-base [&_a]:font-medium [&_a]:underline [&_a]:decoration-current/40 [&_a]:underline-offset-2 [&_a:hover]:decoration-current", [k.value.box, k.value.body]]),
+			class: l(["flex items-start gap-3 rounded-10 border px-4 py-3 text-base [&_a]:font-medium [&_a]:underline [&_a]:decoration-current/40 [&_a]:underline-offset-2 [&_a:hover]:decoration-current", k.value.box]),
 			role: c.color === "danger" || c.color === "warning" ? "alert" : "status",
 			"data-ac-ds": "",
 			"data-testid": "ac-alert"
@@ -107,11 +101,11 @@ var x = ["role"], S = { class: "flex min-w-0 flex-1 flex-wrap items-center gap-x
 			c.dismissible ? (u(), i("button", {
 				key: 1,
 				type: "button",
-				class: "-my-0.5 -mr-1.5 inline-flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-6 opacity-70 transition hover:bg-current/8 hover:opacity-100 focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring",
+				class: "-my-1 -mr-1.5 inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-8 opacity-70 transition-[background-color,opacity] duration-200 hover:bg-current/10 hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
 				"aria-label": "Dismiss",
 				onClick: g[1] ||= (e) => D("close")
 			}, [s(m(b), {
-				class: "size-3.5",
+				class: "size-4",
 				"aria-hidden": "true"
 			})])) : r("", !0)
 		], 10, x));

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

@@ -9,7 +9,7 @@ var ge = {
 	"data-testid": "ac-app-switcher"
 }, _e = {
 	role: "list",
-	class: "grid grid-cols-3 gap-1 p-2"
+	class: "grid grid-cols-3 gap-1"
 }, ve = [
 	"href",
 	"aria-current",
@@ -27,7 +27,7 @@ var ge = {
 	"aria-hidden": "true"
 }, E = {
 	key: 0,
-	class: "border-t border-border-light p-2"
+	class: "mt-2 border-t border-border pt-2"
 }, D = "id", O = 3, k = 6, A = /*@__PURE__*/ d({
 	__name: "AcAppSwitcher",
 	props: /*@__PURE__*/ f({
@@ -122,21 +122,21 @@ var ge = {
 			"https://appscode.ninja",
 			"https://appscode.com",
 			"http://bb.test:8080"
-		], ye = [
+		], I = [
 			"billing",
 			"selfhost",
 			"learn"
-		], I = {
-			primary: "bg-primary-95 text-primary-30",
-			blue: "bg-blue-95 text-blue-40",
-			green: "bg-green-95 text-green-30",
-			yellow: "bg-yellow-95 text-yellow-30",
-			purple: "bg-purple-95 text-purple-40",
-			red: "bg-red-95 text-red-40",
-			slate: "bg-slate-90 text-label"
+		], ye = {
+			primary: "bg-primary/10 text-primary-strong ring-primary/25",
+			blue: "bg-info/10 text-info-strong ring-info/25",
+			green: "bg-success/10 text-success-strong ring-success/25",
+			yellow: "bg-warning/10 text-warning-strong ring-warning/30",
+			purple: "bg-pending/10 text-pending-strong ring-pending/25",
+			red: "bg-danger/10 text-danger-strong ring-danger/25",
+			slate: "bg-surface-sunken text-muted ring-border"
 		}, L = re(), R = `${L}-panel`, z = `${L}-heading`, B = _(null), V = _(null), H = _({}), U = _(!0), W = a(() => A.currentApp === "platform" ? D : A.currentApp), be = a(() => !F.includes(A.baseUrl)), xe = a(() => {
 			let e = [...N];
-			return A.activeOrgType !== O && e.splice(1, 0, P), e.filter((e) => !be.value || !ye.includes(e.name) || e.name === "billing" && A.isOfflineInstaller && A.activeOrgType === k);
+			return A.activeOrgType !== O && e.splice(1, 0, P), e.filter((e) => !be.value || !I.includes(e.name) || e.name === "billing" && A.isOfflineInstaller && A.activeOrgType === k);
 		}), G = a(() => (A.apps ?? xe.value).filter((e) => !A.hideCurrent || e.name !== W.value).map((e) => ({
 			...e,
 			url: e.url ?? Se(e)
@@ -205,7 +205,7 @@ var ge = {
 			q()?.contains(t) || V.value?.contains(t) || Z(!1);
 		}
 		function Q(e) {
-			e && V.value?.contains(e.target) || X();
+			e?.target instanceof Node && V.value?.contains(e.target) || X();
 		}
 		function $(e) {
 			let t = e ? "addEventListener" : "removeEventListener";
@@ -238,7 +238,7 @@ var ge = {
 			"class"
 		]), (g(), o(r, { to: "body" }, [u(i, {
 			"enter-active-class": "transition duration-150 ease-out",
-			"enter-from-class": `opacity-0 motion-safe:scale-[0.98] ${U.value ? "motion-safe:-translate-y-1" : "motion-safe:translate-y-1"}`,
+			"enter-from-class": "opacity-0 motion-safe:scale-95",
 			"leave-active-class": "transition duration-100 ease-in",
 			"leave-to-class": "opacity-0"
 		}, {
@@ -249,7 +249,7 @@ var ge = {
 				ref: V,
 				role: "dialog",
 				"aria-labelledby": z,
-				class: m(["ac-scrollbar fixed z-[90] flex w-[calc(340px*var(--ac-scale))] max-w-[calc(100vw-16px)] flex-col rounded-10 border border-border bg-surface shadow-lg", U.value ? "origin-top-right" : "origin-bottom-right"]),
+				class: m(["ac-scrollbar fixed z-[90] flex w-[calc(340px*var(--ac-scale))] max-w-[calc(100vw-16px)] flex-col rounded-14 border border-border bg-surface p-2 shadow-lg", U.value ? "origin-top-right" : "origin-bottom-right"]),
 				style: h(H.value),
 				"data-ac-ds": "",
 				"data-testid": "ac-app-switcher-panel",
@@ -257,20 +257,20 @@ var ge = {
 			}, [
 				l("p", {
 					id: z,
-					class: "px-4 pt-3.5 pb-1 text-xs font-medium text-label"
+					class: "px-3 pt-2 pb-2 text-sm font-semibold tracking-[0.08em] text-muted uppercase"
 				}, y(d.label), 1),
 				l("ul", _e, [(g(!0), c(n, null, v(G.value, (t) => (g(), c("li", { key: t.name }, [l("a", {
 					href: t.url,
 					"data-app-tile": "",
 					"aria-current": K(t) ? "page" : void 0,
 					title: t.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 hover:bg-surface-muted focus-visible:ring-[3px] focus-visible:ring-ring aria-[current=page]:bg-primary-97",
+					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-accent-hover focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset aria-[current=page]:bg-accent",
 					"data-ac-ds": "",
 					"data-testid": "ac-app-switcher-app",
 					onClick: (e) => Ee(t)
 				}, [
 					l("span", {
-						class: m(["relative inline-flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-10 ring-1 ring-border-light transition-transform duration-150 ring-inset motion-safe:group-hover:-translate-y-px", t.iconUrl || t.name === D && !t.icon ? "bg-surface" : I[t.color ?? "slate"]]),
+						class: m(["relative inline-flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-10 ring-1 transition-transform duration-200 ring-inset motion-safe:group-hover:-translate-y-px", t.iconUrl || t.name === D && !t.icon ? "bg-surface ring-border" : ye[t.color ?? "slate"]]),
 						"aria-hidden": "true"
 					}, [t.iconUrl ? (g(), c("img", {
 						key: 0,
@@ -296,7 +296,7 @@ var ge = {
 				a.$slots.footer ? (g(), c("div", E, [te(a.$slots, "footer", { close: Z })])) : s("", !0)
 			], 38)) : s("", !0)]),
 			_: 3
-		}, 8, ["enter-from-class"])]))]));
+		})]))]));
 	}
 });
 //#endregion

package/dist/lib/components/AcAreaChart.js

@@ -0,0 +1,5 @@
+import e from "./AcAreaChart.vue_vue_type_script_setup_true_lang.js";
+//#region src/lib/components/AcAreaChart.vue
+var t = e;
+//#endregion
+export { t as default };

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

@@ -0,0 +1,44 @@
+import type { ChartTooltipSlotProps } from "../charts/ChartFrame.vue";
+import type { ChartCurve } from "../charts/shared";
+import type { XYChartProps } from "../charts/xy";
+export interface Props extends XYChartProps {
+    /** Stacks the series on top of each other, so the top edge shows the total. Use it for parts of a whole: memory by pod, cores by node pool. */
+    stacked?: boolean;
+    /** Fades each fill from the line down to the baseline. Turn it off for a flat 20% fill. */
+    gradient?: boolean;
+    /** Shape between points: `linear`, `monotone` (smooth, never overshoots the data) or `step`. */
+    curve?: ChartCurve;
+    /** Thickness of the line on top of each area, in px. `0` draws no line. */
+    lineWidth?: number;
+}
+type __VLS_Slots = {
+    /** Replaces the tooltip body for the hovered row. */
+    tooltip?: (props: ChartTooltipSlotProps) => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    legend: import("../charts/shared").ChartLegendPosition;
+    title: string;
+    description: string;
+    height: number;
+    loading: boolean;
+    tooltip: boolean;
+    emptyText: string;
+    lineWidth: number;
+    stacked: boolean;
+    gridLines: boolean;
+    xFormatter: (value: Date | number | string) => string;
+    yFormatter: (value: number) => string;
+    xLabel: string;
+    yLabel: string;
+    yDomain: [number | undefined, number | undefined];
+    curve: ChartCurve;
+    gradient: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,215 @@
+import e from "../charts/ChartFrame.js";
+import { CURVES as t, chartDuration as n } from "../charts/shared.js";
+import { useXYChart as r } from "../charts/xy.js";
+import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createSlots as ee, createVNode as l, defineComponent as u, guardReactiveProps as d, isRef as f, normalizeProps as p, openBlock as m, ref as h, renderList as g, renderSlot as _, unref as v, useId as y, withCtx as b } from "vue";
+import { ChartArea as x } from "@lucide/vue";
+import { VisArea as te, VisAxis as S, VisCrosshair as C, VisXYContainer as w } from "@unovis/vue";
+import { Scale as T } from "@unovis/ts";
+//#region src/lib/components/AcAreaChart.vue?vue&type=script&setup=true&lang.ts
+var E = /*@__PURE__*/ u({
+	__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: "" }
+	},
+	setup(u) {
+		let E = u, D = n(), O = y(), { hidden: k, width: A, visibleKeys: j, colorOf: M, colors: N, legendItems: P, xKind: F, byPosition: I, x: L, yAccessors: R, xTickValues: ne, maxXTicks: z, yTicks: B, xTickFormat: V, formatY: H, rowLabel: U, yDomain: W, tooltipItems: G, tooltipTotal: K, table: q, ariaLabel: J } = r(E, { stacked: () => E.stacked }), Y = h(null), X = a(() => F.value === "time" && !I.value ? T.scaleTime() : void 0), Z = (e) => `${O}-area-${e}`.replace(/[^\w-]/g, ""), Q = a(() => E.gradient ? E.stacked ? [.45, .12] : [.32, .02] : [.2, .2]), re = a(() => Object.entries(M.value).map(([e, t]) => `<linearGradient id="${Z(e)}" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" style="stop-color: ${t}; stop-opacity: ${Q.value[0]}" /><stop offset="100%" style="stop-color: ${t}; stop-opacity: ${Q.value[1]}" /></linearGradient>`).join("")), $ = a(() => j.value.map((e) => `url(#${Z(e)})`)), ie = a(() => E.stacked ? [{
+			key: "stack",
+			y: R.value,
+			fill: $.value,
+			line: N.value
+		}] : j.value.map((e, t) => ({
+			key: e,
+			y: [R.value[t]],
+			fill: [$.value[t]],
+			line: [N.value[t]]
+		})));
+		function ae(e, t, n, r) {
+			if (!t || n === void 0 || !r || r.type === "wheel") {
+				Y.value = null;
+				return;
+			}
+			Y.value = {
+				clientX: r.clientX,
+				clientY: r.clientY,
+				title: U(n),
+				items: G(t),
+				total: E.stacked && j.value.length > 1 ? K(t) : void 0,
+				datum: t,
+				index: n
+			};
+		}
+		return (n, r) => (m(), o(e, {
+			hidden: v(k),
+			"onUpdate:hidden": r[0] ||= (e) => f(k) ? k.value = e : null,
+			width: v(A),
+			"onUpdate:width": r[1] ||= (e) => f(A) ? A.value = e : null,
+			testid: "ac-area-chart",
+			height: u.height,
+			loading: u.loading,
+			empty: !u.data.length,
+			"empty-text": u.emptyText,
+			"empty-icon": v(x),
+			legend: u.legend,
+			"legend-items": v(P),
+			summary: v(J),
+			title: u.title,
+			description: u.description,
+			table: v(q),
+			tip: Y.value,
+			tooltip: u.tooltip
+		}, ee({
+			default: b(() => [l(v(w), {
+				data: u.data,
+				height: u.height,
+				duration: v(D),
+				"x-scale": X.value,
+				"y-domain": v(W),
+				"svg-defs": re.value,
+				padding: {
+					top: 8,
+					right: 8
+				}
+			}, {
+				default: b(() => [
+					(m(!0), c(i, null, g(ie.value, (e) => (m(), o(v(te), {
+						key: e.key,
+						x: v(L),
+						y: e.y,
+						color: e.fill,
+						"curve-type": v(t)[u.curve],
+						line: u.lineWidth > 0,
+						"line-color": e.line,
+						"line-width": u.lineWidth
+					}, null, 8, [
+						"x",
+						"y",
+						"color",
+						"curve-type",
+						"line",
+						"line-color",
+						"line-width"
+					]))), 128)),
+					l(v(S), {
+						type: "x",
+						label: u.xLabel || void 0,
+						"tick-format": v(V),
+						"tick-values": v(ne),
+						"num-ticks": v(z),
+						"min-max-ticks-only-when-width-is-less": 160,
+						"grid-line": !1,
+						"tick-line": !1,
+						"tick-text-hide-overlapping": !0
+					}, null, 8, [
+						"label",
+						"tick-format",
+						"tick-values",
+						"num-ticks"
+					]),
+					l(v(S), {
+						type: "y",
+						label: u.yLabel || void 0,
+						"tick-format": v(H),
+						"num-ticks": v(B),
+						"grid-line": u.gridLines,
+						"tick-line": !1,
+						"domain-line": !1
+					}, null, 8, [
+						"label",
+						"tick-format",
+						"num-ticks",
+						"grid-line"
+					]),
+					u.tooltip ? (m(), o(v(C), {
+						key: 0,
+						x: v(L),
+						y: u.stacked ? void 0 : v(R),
+						yStacked: u.stacked ? v(R) : void 0,
+						color: v(N),
+						circleRadius: 4,
+						strokeColor: "var(--color-surface)",
+						strokeWidth: 2,
+						hideWhenFarFromPointer: !1,
+						duration: 0,
+						onCrosshairMove: ae
+					}, null, 8, [
+						"x",
+						"y",
+						"yStacked",
+						"color"
+					])) : s("", !0)
+				]),
+				_: 1
+			}, 8, [
+				"data",
+				"height",
+				"duration",
+				"x-scale",
+				"y-domain",
+				"svg-defs"
+			])]),
+			_: 2
+		}, [n.$slots.tooltip ? {
+			name: "tooltip",
+			fn: b((e) => [_(n.$slots, "tooltip", p(d(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_vue_type_script_setup_true_lang.js

@@ -45,12 +45,12 @@ var u = [
 				square: "rounded-10"
 			}
 		}, 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"
+			"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"
 		], _ = {
 			online: {
 				dot: "bg-success",
@@ -65,14 +65,14 @@ 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);
 			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";
+			if (m.overflowCount || !m.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];

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

@@ -1,15 +1,21 @@
 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, 25% border, AA-contrast text) 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. 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;
+    /** Pulses the dot to show work in progress. On by default for transient states such as Provisioning or Deleting. cloud-ui's `transient`. */
+    pulse?: boolean;
 }
 type __VLS_Slots = {
     /** Badge content. Replaces `label`. */
@@ -18,9 +24,12 @@ 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";
+    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;