@ac-design/design-system 0.0.0-stage → 1.0.1

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

@@ -0,0 +1,303 @@
+import e from "./AcLogo.js";
+import t from "./AcNavbarItem.js";
+import { Fragment as n, Teleport as r, Transition as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createVNode as u, defineComponent as d, mergeModels as f, nextTick as p, normalizeClass as m, normalizeStyle as h, onBeforeUnmount as ee, openBlock as g, ref as _, renderList as v, renderSlot as te, resolveDynamicComponent as ne, toDisplayString as y, unref as b, useId as re, useModel as ie, watch as ae, withCtx as oe } from "vue";
+import { ChartLine as se, Check as ce, Database as le, GraduationCap as ue, Grip as de, Receipt as fe, Server as pe, ServerCog as me, Telescope as he } from "@lucide/vue";
+//#region src/lib/components/AcAppSwitcher.vue?vue&type=script&setup=true&lang.ts
+var ge = {
+	class: "inline-flex",
+	"data-ac-ds": "",
+	"data-testid": "ac-app-switcher"
+}, _e = {
+	role: "list",
+	class: "grid grid-cols-3 gap-1 p-2"
+}, ve = [
+	"href",
+	"aria-current",
+	"title",
+	"onClick"
+], x = ["src"], S = {
+	key: 3,
+	class: "text-lg font-semibold"
+}, C = { class: "w-full truncate text-xs font-medium text-heading" }, w = {
+	key: 0,
+	class: "sr-only"
+}, T = {
+	key: 1,
+	class: "absolute top-1.5 right-1.5 inline-flex size-4 items-center justify-center rounded-full bg-primary text-white",
+	"aria-hidden": "true"
+}, E = {
+	key: 0,
+	class: "border-t border-border-light p-2"
+}, D = "id", O = 3, k = 6, A = /*@__PURE__*/ d({
+	__name: "AcAppSwitcher",
+	props: /*@__PURE__*/ f({
+		currentApp: { default: "platform" },
+		baseUrl: { default: "https://appscode.com" },
+		activeOrganization: { default: "" },
+		rootDomain: { default: "" },
+		activeOrgType: { default: 0 },
+		isOfflineInstaller: {
+			type: Boolean,
+			default: !1
+		},
+		apps: { default: void 0 },
+		hideCurrent: {
+			type: Boolean,
+			default: !1
+		},
+		label: { default: "AppsCode apps" },
+		align: { default: "end" }
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ f(["select"], ["update:open"]),
+	setup(d, { emit: f }) {
+		let A = d, j = ie(d, "open"), M = f, N = [
+			{
+				name: D,
+				title: "Platform",
+				port: "8080",
+				subtitle: "Manage your platform & accounts"
+			},
+			{
+				name: "db",
+				title: "KubeDB",
+				port: "5996",
+				subtitle: "Manage your databases",
+				icon: le,
+				color: "purple"
+			},
+			{
+				name: "grafana",
+				title: "Grafana",
+				port: "3005",
+				subtitle: "Analyze your activities",
+				icon: se,
+				color: "yellow"
+			},
+			{
+				name: "observe",
+				title: "Observe",
+				port: "5992",
+				subtitle: "Observe your system",
+				icon: he,
+				color: "green"
+			},
+			{
+				name: "selfhost",
+				title: "SelfHost",
+				port: "5993",
+				subtitle: "Host AppsCode on your own cluster",
+				icon: me,
+				color: "slate"
+			},
+			{
+				name: "billing",
+				title: "Billing",
+				port: "5995",
+				subtitle: "Manage your contracts, licenses & billings",
+				icon: fe,
+				color: "primary"
+			},
+			{
+				name: "learn",
+				title: "Learn",
+				port: "5988",
+				subtitle: "Be an Expert in Cloud Native technologies",
+				icon: ue,
+				color: "red"
+			}
+		], P = {
+			name: "console",
+			title: "Console",
+			port: "5990",
+			subtitle: "Manage your kubernetes clusters",
+			icon: pe,
+			color: "blue"
+		}, F = [
+			"https://appscode.ninja",
+			"https://appscode.com",
+			"http://bb.test:8080"
+		], ye = [
+			"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"
+		}, 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);
+		}), G = a(() => (A.apps ?? xe.value).filter((e) => !A.hideCurrent || e.name !== W.value).map((e) => ({
+			...e,
+			url: e.url ?? Se(e)
+		})));
+		function Se(e) {
+			return A.baseUrl.includes("bb.test") ? `http://bb.test:${e.port}/${e.name}/` : A.baseUrl.includes("localhost") ? `http://localhost:${e.port}/${e.name}/` : `${A.baseUrl}/${e.name}/`;
+		}
+		function K(e) {
+			return e.name === W.value;
+		}
+		function q() {
+			return B.value?.$el ?? null;
+		}
+		function J() {
+			return [...V.value?.querySelectorAll("[data-app-tile]") ?? []];
+		}
+		function Ce(e) {
+			let t = e[0]?.offsetTop, n = e.filter((e) => e.offsetTop === t).length;
+			return Math.max(n, 1);
+		}
+		function Y(e) {
+			let t = J();
+			t.length && t[Math.max(0, Math.min(e, t.length - 1))].focus();
+		}
+		function X() {
+			let e = q();
+			if (!e || !V.value) return;
+			let t = e.getBoundingClientRect(), { offsetWidth: n, offsetHeight: r } = V.value, i = window.innerHeight - t.bottom - 6 - 8, a = t.top - 6 - 8, o = i < r && a > i, s = A.align === "end" ? t.right - n : t.left;
+			U.value = !o, H.value = {
+				[o ? "bottom" : "top"]: `${o ? window.innerHeight - t.top + 6 : t.bottom + 6}px`,
+				left: `${Math.max(8, Math.min(s, window.innerWidth - n - 8))}px`,
+				maxHeight: `${Math.max(o ? a : i, 160)}px`
+			};
+		}
+		function Z(e = !0) {
+			j.value && (j.value = !1, e && q()?.focus());
+		}
+		function we() {
+			j.value ? Z() : j.value = !0;
+		}
+		function Te() {
+			let e = [`gorg=${encodeURIComponent(A.activeOrganization)}`, "path=/"];
+			A.rootDomain && e.push(`domain=${A.rootDomain}`), document.cookie = e.join("; ");
+		}
+		function Ee(e) {
+			e.name === "grafana" && Te(), M("select", e);
+		}
+		function De(e) {
+			e.key !== "ArrowDown" || j.value || (e.preventDefault(), j.value = !0);
+		}
+		function Oe(e) {
+			let t = J(), n = t.indexOf(document.activeElement), r = Ce(t), i = {
+				ArrowRight: 1,
+				ArrowLeft: -1,
+				ArrowDown: r,
+				ArrowUp: -r
+			};
+			e.key in i && n >= 0 ? (e.preventDefault(), Y(n + i[e.key])) : e.key === "Home" || e.key === "End" ? (e.preventDefault(), Y(e.key === "Home" ? 0 : t.length - 1)) : e.key === "Escape" ? (e.preventDefault(), Z()) : e.key === "Tab" && ke(e);
+		}
+		function ke(e) {
+			let t = [...V.value?.querySelectorAll("a[href], button:not([disabled])") ?? []], n = t[0], r = t[t.length - 1];
+			e.shiftKey && document.activeElement === n ? (e.preventDefault(), Z()) : !e.shiftKey && document.activeElement === r && Z();
+		}
+		function Ae(e) {
+			let t = e.target;
+			q()?.contains(t) || V.value?.contains(t) || Z(!1);
+		}
+		function Q(e) {
+			e && V.value?.contains(e.target) || X();
+		}
+		function $(e) {
+			let t = e ? "addEventListener" : "removeEventListener";
+			document[t]("pointerdown", Ae, !0), window[t]("scroll", Q, !0), window[t]("resize", Q);
+		}
+		return ae(j, async (e) => {
+			if ($(e), !e) return;
+			await p(), X();
+			let t = J(), n = G.value.findIndex(K);
+			Y(n >= 0 && t[n] ? n : 0);
+		}), ee(() => $(!1)), (a, f) => (g(), c("div", ge, [u(t, {
+			ref_key: "trigger",
+			ref: B,
+			label: d.label,
+			icon: b(de),
+			"icon-only": "",
+			"aria-haspopup": "dialog",
+			"aria-expanded": j.value,
+			"aria-controls": j.value ? R : void 0,
+			class: m(j.value && "bg-surface-sunken text-heading"),
+			"data-ac-ds": "",
+			"data-testid": "ac-app-switcher-trigger",
+			onClick: we,
+			onKeydown: De
+		}, null, 8, [
+			"label",
+			"icon",
+			"aria-expanded",
+			"aria-controls",
+			"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"}`,
+			"leave-active-class": "transition duration-100 ease-in",
+			"leave-to-class": "opacity-0"
+		}, {
+			default: oe(() => [j.value ? (g(), c("div", {
+				key: 0,
+				id: R,
+				ref_key: "panel",
+				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"]),
+				style: h(H.value),
+				"data-ac-ds": "",
+				"data-testid": "ac-app-switcher-panel",
+				onKeydown: Oe
+			}, [
+				l("p", {
+					id: z,
+					class: "px-4 pt-3.5 pb-1 text-xs font-medium text-label"
+				}, 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",
+					"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"]]),
+						"aria-hidden": "true"
+					}, [t.iconUrl ? (g(), c("img", {
+						key: 0,
+						src: t.iconUrl,
+						alt: "",
+						class: "size-7 object-contain"
+					}, null, 8, x)) : t.icon ? (g(), o(ne(t.icon), {
+						key: 1,
+						class: "size-5"
+					})) : t.name === D ? (g(), o(e, {
+						key: 2,
+						variant: "mark",
+						size: 28,
+						label: ""
+					})) : (g(), c("span", S, y(t.title.charAt(0)), 1))], 2),
+					l("span", C, y(t.title), 1),
+					t.subtitle ? (g(), c("span", w, y(t.subtitle), 1)) : s("", !0),
+					K(t) ? (g(), c("span", T, [u(b(ce), {
+						class: "size-2.5",
+						"stroke-width": 3
+					})])) : s("", !0)
+				], 8, ve)]))), 128))]),
+				a.$slots.footer ? (g(), c("div", E, [te(a.$slots, "footer", { close: Z })])) : s("", !0)
+			], 38)) : s("", !0)]),
+			_: 3
+		}, 8, ["enter-from-class"])]))]));
+	}
+});
+//#endregion
+export { A as default };

package/dist/lib/components/AcAvatar.js

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

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

@@ -0,0 +1,27 @@
+export interface Props {
+    /** Person or organisation name. Gives the initials, the colour and the default accessible name. */
+    name?: string;
+    /** Image URL. Falls back to the initials when it's empty or fails to load. */
+    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. */
+    shape?: "circle" | "square";
+    /** 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. */
+    overflowCount?: number;
+}
+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";
+    status: "online" | "away" | "busy" | "offline";
+    alt: string;
+    imgUrl: string;
+    shape: "circle" | "square";
+    overflowCount: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,116 @@
+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";
+//#region src/lib/components/AcAvatar.vue?vue&type=script&setup=true&lang.ts
+var u = [
+	"role",
+	"aria-label",
+	"aria-hidden"
+], d = ["src"], f = {
+	key: 1,
+	class: "tabular-nums",
+	"aria-hidden": "true"
+}, p = {
+	key: 2,
+	"aria-hidden": "true"
+}, m = /*@__PURE__*/ i({
+	__name: "AcAvatar",
+	props: {
+		name: { default: "" },
+		imgUrl: { default: "" },
+		alt: { default: void 0 },
+		size: { default: "normal" },
+		shape: { default: "circle" },
+		status: { default: void 0 },
+		overflowCount: { default: 0 }
+	},
+	setup(i) {
+		let m = i, h = {
+			xs: {
+				box: "size-5 text-xm",
+				dot: "size-1.5",
+				square: "rounded-4"
+			},
+			small: {
+				box: "size-6 text-sm",
+				dot: "size-2",
+				square: "rounded-4"
+			},
+			normal: {
+				box: "size-8 text-xs",
+				dot: "size-2.5",
+				square: "rounded-6"
+			},
+			large: {
+				box: "size-12 text-xl",
+				dot: "size-3",
+				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"
+		], _ = {
+			online: {
+				dot: "bg-success",
+				label: "Online"
+			},
+			away: {
+				dot: "bg-warning",
+				label: "Away"
+			},
+			busy: {
+				dot: "bg-danger",
+				label: "Busy"
+			},
+			offline: {
+				dot: "bg-slate-60",
+				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";
+			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,
+			"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));
+	}
+});
+//#endregion
+export { m as default };

package/dist/lib/components/AcBadge.js

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

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

@@ -0,0 +1,32 @@
+import type { Tone, Variant } from "./types";
+export interface Props {
+    /** Text of the badge. The default slot overrides it. */
+    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`. */
+    variant?: Variant;
+    /** Pill shape (`rounded-50`) instead of the 6px control radius. */
+    rounded?: boolean;
+    /** Shows an 8px status dot before the label. */
+    dot?: boolean;
+}
+type __VLS_Slots = {
+    /** Badge content. Replaces `label`. */
+    default?: () => unknown;
+};
+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";
+    rounded: boolean;
+    dot: 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/AcBadge.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,88 @@
+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";
+//#region src/lib/components/AcBadge.vue?vue&type=script&setup=true&lang.ts
+var l = /*@__PURE__*/ i({
+	__name: "AcBadge",
+	props: {
+		label: { default: "Default" },
+		color: { default: "default" },
+		variant: { default: "solid" },
+		rounded: {
+			type: Boolean,
+			default: !1
+		},
+		dot: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	setup(i) {
+		let l = i, u = {
+			primary: [
+				"bg-primary text-white",
+				"bg-primary-95 text-primary-10 ring-primary-40/20",
+				"ring-primary-70 text-primary-20",
+				"bg-primary-40"
+			],
+			secondary: [
+				"bg-secondary text-white",
+				"bg-secondary-95 text-secondary-10 ring-secondary-40/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"
+			],
+			success: [
+				"bg-success text-white",
+				"bg-green-95 text-green-10 ring-green-40/25",
+				"ring-green-70 text-green-20",
+				"bg-green-40"
+			],
+			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"
+			],
+			danger: [
+				"bg-danger text-white",
+				"bg-red-95 text-red-10 ring-red-40/20",
+				"ring-red-80 text-red-30",
+				"bg-red-40"
+			],
+			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"
+			],
+			default: [
+				"bg-surface-sunken text-heading",
+				"bg-surface-muted text-heading ring-slate-50/20",
+				"ring-border-dark text-heading",
+				"bg-slate-50"
+			]
+		}, d = e(() => {
+			let [e, t, n] = u[l.color];
+			return {
+				solid: e,
+				light: `ring-1 ring-inset ${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"]]),
+			"data-ac-ds": "",
+			"data-testid": "ac-badge"
+		}, [i.dot ? (o(), n("span", {
+			key: 0,
+			class: a(["size-1.5 shrink-0 rounded-full", f.value]),
+			"aria-hidden": "true"
+		}, null, 2)) : t("", !0), s(e.$slots, "default", {}, () => [r(c(i.label), 1)])], 2));
+	}
+});
+//#endregion
+export { l as default };

package/dist/lib/components/AcBanner.js

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

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

@@ -0,0 +1,57 @@
+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. */
+    variant?: "subtle" | "solid";
+    /** Bold lead-in before the message, e.g. "Scheduled maintenance". */
+    title?: string;
+    /** Text of the action after the message. Renders a link with `actionHref`, otherwise a button that emits `action`. */
+    actionLabel?: string;
+    /** URL for the action link. */
+    actionHref?: string;
+    /** Shows a close button. Closing sets `v-model:open` to `false` and emits `close`. */
+    dismissible?: boolean;
+    /** A Lucide icon component to replace the colour's default icon. */
+    icon?: Component;
+    /** Hides the leading icon. */
+    hideIcon?: boolean;
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** The message. Keep it to one sentence. */
+    default?: () => unknown;
+    /** Replaces the action link or button, e.g. with two buttons. */
+    action?: () => unknown;
+};
+type __VLS_ModelProps = {
+    /** Whether the banner shows. Bind with `v-model:open` to remember a dismissal. */
+    "open"?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+    close: () => any;
+    action: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onAction?: (() => any) | undefined;
+}>, {
+    variant: "subtle" | "solid";
+    title: string;
+    icon: Component;
+    color: "info" | "warning" | "danger" | "primary" | "neutral";
+    dismissible: boolean;
+    hideIcon: boolean;
+    actionLabel: string;
+    actionHref: string;
+}, {}, {}, {}, 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;
+    };
+};