@ac-design/design-system 1.0.3 → 2.1.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;
@@ -17,6 +17,12 @@ export interface Props {
     actionIcon?: Component;
     /** Shows a spinner in the action button and blocks clicks while the action runs. */
     actionLoading?: boolean;
+    /** `normal` has 14px text. `small` has 12px text and less padding, for a note inside a card or form, like cloud-ui's network change banner. */
+    size?: "normal" | "small";
+    /** Replaces the status icon with a spinning one, for a change that is still being applied. */
+    loading?: boolean;
+    /** `tinted` is the plain status banner. `callout` is cloud-ui's notice card (its dummy-data warning): a 3px bar on the left, the icon in a 40px tile, a 16px heading title and muted text, with actions under the message. */
+    variant?: "tinted" | "callout";
 }
 type __VLS_Slots = {
     /** The message. Links inside are underlined in the alert's colour. */
@@ -33,9 +39,12 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     onClose?: (() => any) | undefined;
     onAction?: ((event: MouseEvent) => any) | undefined;
 }>, {
+    variant: "tinted" | "callout";
     title: string;
     icon: Component;
     color: Tone | "neutral";
+    size: "normal" | "small";
+    loading: boolean;
     dismissible: boolean;
     hideIcon: boolean;
     actionLabel: string;

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

@@ -1,11 +1,14 @@
 import e from "./AcButton.js";
 import { computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createSlots as o, createVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, renderSlot as d, resolveDynamicComponent as f, toDisplayString as p, unref as m, withCtx as h } from "vue";
-import { CircleAlert as g, CircleCheck as _, Info as v, TriangleAlert as y, X as b } from "@lucide/vue";
+import { CircleAlert as g, CircleCheck as _, Info as v, LoaderCircle as y, TriangleAlert as b, X as x } from "@lucide/vue";
 //#region src/lib/components/AcAlert.vue?vue&type=script&setup=true&lang.ts
-var x = ["role"], S = { class: "flex min-w-0 flex-1 flex-wrap items-center gap-x-4 gap-y-2" }, C = { class: "min-w-0 flex-[1_1_256px]" }, w = {
+var S = ["role"], C = {
+	key: 1,
+	class: "flex flex-wrap items-center gap-2 pt-0.5"
+}, w = ["role"], T = { class: "flex min-w-0 flex-1 flex-wrap items-center gap-x-4 gap-y-2" }, E = { class: "min-w-0 flex-[1_1_256px]" }, D = {
 	key: 0,
 	class: "-my-1 flex shrink-0 flex-wrap items-center gap-2"
-}, T = /*@__PURE__*/ c({
+}, O = /*@__PURE__*/ c({
 	__name: "AcAlert",
 	props: {
 		color: { default: "info" },
@@ -24,77 +27,168 @@ var x = ["role"], S = { class: "flex min-w-0 flex-1 flex-wrap items-center gap-x
 		actionLoading: {
 			type: Boolean,
 			default: !1
-		}
+		},
+		size: { default: "normal" },
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		variant: { default: "tinted" }
 	},
 	emits: ["close", "action"],
-	setup(c, { emit: T }) {
-		let E = c, D = T, O = {
+	setup(c, { emit: O }) {
+		let k = c, A = O, j = {
 			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",
-				glyph: y
+				box: "border-warning/30 bg-warning/10 text-warning-strong",
+				title: "text-warning-strong",
+				icon: "text-warning-strong",
+				glyph: b
 			},
 			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]]),
+		}, M = {
+			primary: {
+				box: "border-primary/25 bg-primary/5",
+				bar: "bg-primary/80",
+				tile: "bg-primary/10 text-primary-strong ring-primary/25"
+			},
+			info: {
+				box: "border-info/25 bg-info/8",
+				bar: "bg-info/80",
+				tile: "bg-info/10 text-info ring-info/25"
+			},
+			success: {
+				box: "border-success/25 bg-success/5",
+				bar: "bg-success/80",
+				tile: "bg-success/10 text-success-strong ring-success/25"
+			},
+			warning: {
+				box: "border-warning/30 bg-warning/5",
+				bar: "bg-warning/90",
+				tile: "bg-warning/15 text-warning-strong ring-warning/30"
+			},
+			danger: {
+				box: "border-danger/25 bg-danger/5",
+				bar: "bg-danger/80",
+				tile: "bg-danger/10 text-danger-strong ring-danger/25"
+			},
+			neutral: {
+				box: "border-border bg-surface",
+				bar: "bg-border-dark",
+				tile: "bg-surface-sunken text-muted ring-border"
+			}
+		}, N = t(() => j[k.color]), P = t(() => k.variant === "callout" ? M[k.color] : null), F = t(() => k.loading ? y : k.icon ?? N.value.glyph), I = t(() => k.size === "small"), L = t(() => k.color === "neutral" ? "white" : k.color);
+		return (t, g) => P.value ? (u(), i("div", {
+			key: 0,
+			class: l(["relative flex items-start overflow-hidden border shadow-sm transition-all [&_a]:font-medium [&_a]:text-heading [&_a]:underline [&_a]:decoration-current/40 [&_a]:underline-offset-2 [&_a:hover]:decoration-current", [P.value.box, I.value ? "gap-2.5 rounded-8 py-2.5 pr-2.5 pl-3" : "gap-3.5 rounded-10 py-3.5 pr-3.5 pl-4"]]),
+			role: c.color === "danger" || c.color === "warning" ? "alert" : "status",
+			"data-ac-ds": "",
+			"data-testid": "ac-alert"
+		}, [
+			a("span", {
+				class: l(["absolute inset-y-0 left-0 w-0.75", P.value.bar]),
+				"aria-hidden": "true"
+			}, null, 2),
+			c.hideIcon ? r("", !0) : (u(), i("span", {
+				key: 0,
+				class: l(["relative flex shrink-0 items-center justify-center ring-1", [
+					P.value.tile,
+					I.value ? "size-8 rounded-8 [&_svg]:size-4" : "size-10 rounded-10 [&_svg]:size-5",
+					c.loading && "[&_svg]:animate-spin"
+				]]),
+				"aria-hidden": "true"
+			}, [d(t.$slots, "icon", {}, () => [(u(), n(f(F.value)))])], 2)),
+			a("div", { class: l(["min-w-0 flex-1", I.value ? "space-y-1" : "space-y-1.5"]) }, [
+				c.title ? (u(), i("p", {
+					key: 0,
+					class: l(["font-semibold tracking-tight text-heading", I.value ? "text-base" : "text-lg"])
+				}, p(c.title), 3)) : r("", !0),
+				a("div", { class: l(["leading-relaxed text-muted", I.value ? "text-[13px]" : "text-base"]) }, [d(t.$slots, "default")], 2),
+				t.$slots.actions || c.actionLabel ? (u(), i("div", C, [d(t.$slots, "actions", {}, () => [s(e, {
+					title: c.actionLabel,
+					color: L.value,
+					variant: "outlined",
+					size: "small",
+					loading: c.actionLoading,
+					"data-ac-ds": "",
+					"data-testid": "ac-alert-action",
+					onClick: g[0] ||= (e) => A("action", e)
+				}, o({ _: 2 }, [c.actionIcon ? {
+					name: "icon",
+					fn: h(() => [(u(), n(f(c.actionIcon)))]),
+					key: "0"
+				} : void 0]), 1032, [
+					"title",
+					"color",
+					"loading"
+				])])])) : r("", !0)
+			], 2),
+			c.dismissible ? (u(), i("button", {
+				key: 1,
+				type: "button",
+				class: "ml-1 inline-flex shrink-0 cursor-pointer rounded-8 p-1 text-muted transition-colors duration-200 hover:bg-heading/5 hover:text-heading focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+				"aria-label": "Dismiss",
+				onClick: g[1] ||= (e) => A("close")
+			}, [s(m(x), {
+				class: "size-3.5",
+				"aria-hidden": "true"
+			})])) : r("", !0)
+		], 10, S)) : (u(), i("div", {
+			key: 1,
+			class: l(["flex items-start rounded-10 border [&_a]:font-medium [&_a]:underline [&_a]:decoration-current/40 [&_a]:underline-offset-2 [&_a:hover]:decoration-current", [N.value.box, I.value ? "gap-2 px-3 py-2 text-xs leading-relaxed" : "gap-3 px-4 py-3 text-base"]]),
 			role: c.color === "danger" || c.color === "warning" ? "alert" : "status",
 			"data-ac-ds": "",
 			"data-testid": "ac-alert"
 		}, [
 			c.hideIcon ? r("", !0) : (u(), i("span", {
 				key: 0,
-				class: l(["mt-0.5 inline-flex shrink-0 [&_svg]:size-4", k.value.icon]),
+				class: l(["mt-0.5 inline-flex shrink-0", [
+					N.value.icon,
+					I.value ? "[&_svg]:size-3.5" : "[&_svg]:size-4",
+					c.loading && "[&_svg]:animate-spin"
+				]]),
 				"aria-hidden": "true"
-			}, [d(t.$slots, "icon", {}, () => [(u(), n(f(A.value)))])], 2)),
-			a("div", S, [a("div", C, [c.title ? (u(), i("p", {
+			}, [d(t.$slots, "icon", {}, () => [(u(), n(f(F.value)))])], 2)),
+			a("div", T, [a("div", E, [c.title ? (u(), i("p", {
 				key: 0,
-				class: l(["font-semibold", k.value.title])
-			}, p(c.title), 3)) : r("", !0), a("div", { class: l(c.title && "mt-0.5") }, [d(t.$slots, "default")], 2)]), t.$slots.actions || c.actionLabel ? (u(), i("div", w, [d(t.$slots, "actions", {}, () => [s(e, {
+				class: l(["font-semibold", N.value.title])
+			}, p(c.title), 3)) : r("", !0), a("div", { class: l(c.title && "mt-0.5") }, [d(t.$slots, "default")], 2)]), t.$slots.actions || c.actionLabel ? (u(), i("div", D, [d(t.$slots, "actions", {}, () => [s(e, {
 				title: c.actionLabel,
-				color: j.value,
+				color: L.value,
 				variant: "outlined",
 				size: "small",
 				loading: c.actionLoading,
 				"data-ac-ds": "",
 				"data-testid": "ac-alert-action",
-				onClick: g[0] ||= (e) => D("action", e)
+				onClick: g[2] ||= (e) => A("action", e)
 			}, o({ _: 2 }, [c.actionIcon ? {
 				name: "icon",
 				fn: h(() => [(u(), n(f(c.actionIcon)))]),
@@ -107,15 +201,15 @@ 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",
+				onClick: g[3] ||= (e) => A("close")
+			}, [s(m(x), {
+				class: "size-4",
 				"aria-hidden": "true"
 			})])) : r("", !0)
-		], 10, x));
+		], 10, w));
 	}
 });
 //#endregion
-export { T as default };
+export { O as default };

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-surface-sunken focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset aria-[current=page]:bg-accent",
 					"data-ac-ds": "",
 					"data-testid": "ac-app-switcher-app",
 					onClick: (e) => 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,47 @@
+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;
+    animation: boolean;
+    tooltip: boolean;
+    emptyText: string;
+    lineWidth: number;
+    stacked: boolean;
+    renderer: "canvas" | "svg";
+    gridLines: boolean;
+    zoom: 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;
+    };
+};