@ac-design/design-system 2.0.0 → 2.1.1

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

@@ -11,6 +11,16 @@ export interface UserMenuItem {
     /** Greys the row out. */
     disabled?: boolean;
 }
+export interface UserMenuWorkspace {
+    /** Handle used in URLs, e.g. `appscode`. Identifies the workspace in `v-model:workspace`. */
+    name: string;
+    /** Name to show, e.g. "AppsCode Inc.". Defaults to `name`. */
+    displayName?: string;
+    /** Logo or profile photo. Organisations without one show a building icon. */
+    avatarUrl?: string;
+    /** `user` is the personal account: a round avatar and "(Personal)". `organization` gets a square logo. */
+    type?: "user" | "organization";
+}
 export interface Props {
     /** The person's name or username. The avatar shows its initials. */
     name: string;
@@ -26,12 +36,16 @@ export interface Props {
     showThemeMode?: boolean;
     /** Adds a text-size switch (`AcFontScale`) that scales the whole interface. */
     showFontScale?: boolean;
-    /** Shows the name next to the avatar in the trigger (from 640px up). */
+    /** Shows the name next to the avatar in the trigger (from 768px up) and a chevron (from 640px up). */
     showName?: boolean;
     /** Makes Sign out a link to this URL, e.g. `${accountsDomain}/user/logout`. `logout` is emitted either way. */
     logoutUrl?: string;
     /** Text of the sign-out row. */
     logoutLabel?: string;
+    /** The person's account and organisations, listed at the top of the menu like cloud-ui's workspace switcher. Choosing one updates `v-model:workspace` and emits `switch-workspace`. */
+    workspaces?: UserMenuWorkspace[];
+    /** Heading of the workspace list. */
+    workspacesLabel?: string;
 }
 type __VLS_Props = Props;
 type __VLS_Slots = {
@@ -44,6 +58,8 @@ type __VLS_Slots = {
 type __VLS_ModelProps = {
     /** Whether the menu is open. Bind with `v-model:open`. */
     "open"?: boolean;
+    /** The current workspace's `name`. Bind with `v-model:workspace`. */
+    "workspace"?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -51,11 +67,15 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "update:open": (value: boolean) => any;
     "set:theme": (theme: "light" | "dark") => any;
     logout: () => any;
+    "switch-workspace": (workspace: UserMenuWorkspace) => any;
+    "update:workspace": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     onSelect?: ((item: UserMenuItem) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onSet:theme"?: ((theme: "light" | "dark") => any) | undefined;
     onLogout?: (() => any) | undefined;
+    "onSwitch-workspace"?: ((workspace: UserMenuWorkspace) => any) | undefined;
+    "onUpdate:workspace"?: ((value: string) => any) | undefined;
 }>, {
     items: UserMenuItem[];
     email: string;
@@ -66,6 +86,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     showName: boolean;
     logoutUrl: string;
     logoutLabel: string;
+    workspaces: UserMenuWorkspace[];
+    workspacesLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -1,38 +1,35 @@
-import e from "./AcFontScale.js";
-import t from "./AcThemeMode.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, createTextVNode as u, createVNode as d, defineComponent as f, getCurrentInstance as p, mergeModels as m, mergeProps as h, nextTick as g, normalizeClass as _, normalizeStyle as ee, onBeforeUnmount as te, openBlock as v, ref as y, renderList as b, renderSlot as ne, resolveDynamicComponent as x, toDisplayString as S, unref as C, useId as re, useModel as ie, watch as w, withCtx as T } from "vue";
-import { ChevronDown as ae, LogOut as oe } from "@lucide/vue";
+import e from "./AcAvatar.js";
+import t from "./AcFontScale.js";
+import n from "./AcThemeMode.js";
+import { Fragment as r, Teleport as i, Transition as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createTextVNode as d, createVNode as f, defineComponent as p, getCurrentInstance as m, mergeModels as h, mergeProps as ee, nextTick as g, normalizeClass as _, normalizeStyle as te, onBeforeUnmount as ne, openBlock as v, ref as y, renderList as b, renderSlot as re, resolveDynamicComponent as x, toDisplayString as S, unref as C, useId as ie, useModel as w, watch as T, withCtx as E } from "vue";
+import { Building2 as ae, Check as oe, ChevronDown as se, LogOut as ce } from "@lucide/vue";
 //#region src/lib/components/AcUserMenu.vue?vue&type=script&setup=true&lang.ts
-var se = {
+var le = {
 	class: "inline-flex",
 	"data-ac-ds": "",
 	"data-testid": "ac-user-menu"
-}, ce = [
+}, ue = [
 	"aria-expanded",
 	"aria-controls",
 	"aria-label"
-], le = {
+], de = {
 	key: 0,
-	class: "hidden max-w-36 truncate text-base font-medium text-heading sm:block"
-}, ue = {
-	class: "inline-flex size-8 shrink-0 rounded-full bg-linear-to-r from-primary/70 to-primary/90 p-0.5",
+	class: "hidden max-w-36 truncate text-base font-medium text-heading md:block"
+}, fe = {
+	class: "inline-flex size-9 shrink-0 rounded-full bg-linear-to-r from-primary/70 to-primary/90 p-0.5",
 	"aria-hidden": "true"
-}, E = { class: "inline-flex size-full items-center justify-center overflow-hidden rounded-full bg-surface text-xs font-semibold text-primary-strong" }, D = ["src"], de = {
+}, pe = { class: "inline-flex size-full items-center justify-center overflow-hidden rounded-full bg-surface text-xs font-semibold text-primary-strong" }, me = ["src"], he = {
 	class: "inline-flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary/10 text-base font-semibold text-primary-strong ring-1 ring-primary/25 ring-inset",
 	"aria-hidden": "true"
-}, fe = ["src"], pe = { class: "min-w-0 flex-1" }, me = { class: "block truncate text-base font-medium text-heading" }, he = {
+}, ge = ["src"], _e = { class: "min-w-0 flex-1" }, ve = { class: "block truncate text-base font-medium text-heading" }, ye = {
 	key: 0,
 	class: "block truncate text-xs text-muted"
-}, ge = {
-	key: 0,
-	role: "group",
-	class: "mt-1 flex flex-col gap-0.5 border-t border-border pt-1"
-}, _e = { class: "min-w-0 flex-1 truncate" }, ve = ["aria-labelledby"], ye = ["id"], be = ["aria-labelledby"], xe = ["id"], O = {
+}, be = ["aria-labelledby"], xe = ["id"], Se = { class: "flex flex-col gap-1" }, Ce = ["aria-checked", "onClick"], we = { class: "flex min-w-0 items-center gap-2" }, Te = { class: "min-w-0" }, Ee = { class: "block truncate font-medium text-heading" }, D = { class: "block truncate text-xs text-muted" }, De = ["aria-labelledby"], Oe = ["id"], ke = ["aria-labelledby"], Ae = ["id"], je = {
 	role: "group",
-	class: "mt-1 border-t border-border pt-1"
-}, k = "flex min-h-9 w-full cursor-pointer items-center gap-2.5 rounded-8 px-3 py-2 text-left text-base no-underline outline-none transition-colors duration-150 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0", A = "[role=\"menuitem\"]:not([aria-disabled=\"true\"]), [role=\"radio\"]", j = /*@__PURE__*/ f({
+	class: "mt-1 flex flex-col border-t border-border py-1"
+}, Me = { class: "min-w-0 flex-1 truncate" }, O = "flex min-h-10 w-full cursor-pointer items-center gap-2 rounded-8 px-4 py-2.5 text-left text-base font-medium no-underline outline-none transition-colors duration-150 hover:bg-surface-sunken focus-visible:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0", Ne = "[role=\"menuitem\"]:not([aria-disabled=\"true\"]), [role=\"menuitemradio\"], [role=\"radio\"]", k = /*@__PURE__*/ p({
 	__name: "AcUserMenu",
-	props: /*@__PURE__*/ m({
+	props: /*@__PURE__*/ h({
 		name: {},
 		email: { default: "" },
 		avatarUrl: { default: "" },
@@ -51,49 +48,54 @@ var se = {
 			default: !0
 		},
 		logoutUrl: { default: "" },
-		logoutLabel: { default: "Sign out" }
+		logoutLabel: { default: "Sign out" },
+		workspaces: { default: () => [] },
+		workspacesLabel: { default: "Workspaces" }
 	}, {
 		open: {
 			type: Boolean,
 			default: !1
 		},
-		openModifiers: {}
+		openModifiers: {},
+		workspace: { default: "" },
+		workspaceModifiers: {}
 	}),
-	emits: /*@__PURE__*/ m([
+	emits: /*@__PURE__*/ h([
 		"select",
 		"logout",
-		"set:theme"
-	], ["update:open"]),
-	setup(f, { emit: m }) {
-		let j = f, M = ie(f, "open"), N = m, P = `${k} text-heading hover:bg-accent-hover focus-visible:bg-accent-hover [&>svg]:text-muted`, Se = `${k} text-danger-strong hover:bg-danger/10 focus-visible:bg-danger/10`, F = p()?.appContext.components.RouterLink, I = re(), L = `${I}-trigger`, R = `${I}-menu`, z = y(null), B = y(null), V = y(!1), H = y({
+		"set:theme",
+		"switch-workspace"
+	], ["update:open", "update:workspace"]),
+	setup(p, { emit: h }) {
+		let k = p, A = w(p, "open"), j = w(p, "workspace"), M = h, N = `${O} text-heading [&>svg]:text-muted`, Pe = `${O} text-danger-strong`, P = m()?.appContext.components.RouterLink, F = ie(), I = `${F}-trigger`, L = `${F}-menu`, R = y(null), z = y(null), B = y(!1), V = y({
 			top: 0,
 			right: 0
-		}), U = a(() => {
-			let e = j.name.trim().split(/[\s._-]+/).filter(Boolean);
+		}), H = o(() => {
+			let e = k.name.trim().split(/[\s._-]+/).filter(Boolean);
 			return e.length ? (e[0].charAt(0) + (e.length > 1 ? e[e.length - 1].charAt(0) : "")).toUpperCase() : "?";
-		}), W = a(() => !!j.avatarUrl && !V.value);
-		function G(e) {
-			return e.to && F && !e.disabled ? F : e.to || e.href ? "a" : "button";
+		}), U = o(() => !!k.avatarUrl && !B.value);
+		function W(e) {
+			return e.to && P && !e.disabled ? P : e.to || e.href ? "a" : "button";
 		}
-		function Ce(e) {
-			let t = G(e);
-			return t === F ? { to: e.to } : t === "a" ? e.disabled ? { "aria-disabled": "true" } : { href: e.href ?? (typeof e.to == "string" ? e.to : void 0) } : {
+		function Fe(e) {
+			let t = W(e);
+			return t === P ? { to: e.to } : t === "a" ? e.disabled ? { "aria-disabled": "true" } : { href: e.href ?? (typeof e.to == "string" ? e.to : void 0) } : {
 				type: "button",
 				"aria-disabled": e.disabled ? "true" : void 0
 			};
 		}
-		function K() {
-			return [...B.value?.querySelectorAll(A) ?? []];
+		function G() {
+			return [...z.value?.querySelectorAll(Ne) ?? []];
 		}
-		function q(e) {
-			let t = K();
+		function K(e) {
+			let t = G();
 			t.length && t[(e + t.length) % t.length].focus();
 		}
-		function J() {
-			let e = z.value;
+		function q() {
+			let e = R.value;
 			if (!e) return;
-			let t = e.getBoundingClientRect(), n = B.value?.offsetHeight ?? 320, r = B.value?.offsetWidth ?? 304, i = Math.max(8, Math.min(window.innerWidth - t.right, window.innerWidth - r - 8)), a = window.innerHeight - t.bottom - 6 - 8;
-			H.value = a < n && t.top > a ? {
+			let t = e.getBoundingClientRect(), n = z.value?.offsetHeight ?? 320, r = z.value?.offsetWidth ?? 256, i = Math.max(8, Math.min(window.innerWidth - t.right, window.innerWidth - r - 8)), a = window.innerHeight - t.bottom - 6 - 8;
+			V.value = a < n && t.top > a ? {
 				bottom: window.innerHeight - t.top + 6,
 				right: i
 			} : {
@@ -101,106 +103,109 @@ var se = {
 				right: i
 			};
 		}
-		async function Y(e = "first") {
-			M.value = !0, await g(), J(), q(e === "first" ? 0 : -1);
+		async function J(e = "first") {
+			A.value = !0, await g(), q(), K(e === "first" ? 0 : -1);
 		}
-		function X(e = !0) {
-			M.value && (M.value = !1, e && z.value?.focus());
+		function Y(e = !0) {
+			A.value && (A.value = !1, e && R.value?.focus());
 		}
-		function we(e) {
+		function Ie(e) {
 			[
 				"Enter",
 				" ",
 				"ArrowDown"
-			].includes(e.key) ? (e.preventDefault(), Y("first")) : e.key === "ArrowUp" && (e.preventDefault(), Y("last"));
+			].includes(e.key) ? (e.preventDefault(), J("first")) : e.key === "ArrowUp" && (e.preventDefault(), J("last"));
+		}
+		function X(e) {
+			let t = G().indexOf(document.activeElement);
+			e.key === "ArrowDown" ? (e.preventDefault(), K(t + 1)) : e.key === "ArrowUp" ? (e.preventDefault(), K(t - 1)) : e.key === "Home" ? (e.preventDefault(), K(0)) : e.key === "End" ? (e.preventDefault(), K(-1)) : e.key === "Escape" ? (e.preventDefault(), e.stopPropagation(), Y()) : e.key === "Tab" && Y();
 		}
-		function Te(e) {
-			let t = K().indexOf(document.activeElement);
-			e.key === "ArrowDown" ? (e.preventDefault(), q(t + 1)) : e.key === "ArrowUp" ? (e.preventDefault(), q(t - 1)) : e.key === "Home" ? (e.preventDefault(), q(0)) : e.key === "End" ? (e.preventDefault(), q(-1)) : e.key === "Escape" ? (e.preventDefault(), e.stopPropagation(), X()) : e.key === "Tab" && X();
+		function Le(e) {
+			e.disabled || (M("select", e), Y());
 		}
-		function Ee(e) {
-			e.disabled || (N("select", e), X());
+		function Re(e) {
+			e.name !== j.value && (j.value = e.name, M("switch-workspace", e)), Y();
 		}
-		function De() {
-			N("logout"), X(!1);
+		function ze() {
+			M("logout"), Y(!1);
 		}
 		function Z(e) {
 			let t = e.target;
-			z.value?.contains(t) || B.value?.contains(t) || X(!1);
+			R.value?.contains(t) || z.value?.contains(t) || Y(!1);
 		}
 		function Q() {
-			J();
+			q();
 		}
 		function $() {
 			document.removeEventListener("pointerdown", Z, !0), window.removeEventListener("scroll", Q, !0), window.removeEventListener("resize", Q);
 		}
-		return w(M, (e) => {
+		return T(A, (e) => {
 			if (!e) return $();
-			document.addEventListener("pointerdown", Z, !0), window.addEventListener("scroll", Q, !0), window.addEventListener("resize", Q), g(J);
-		}), w(() => j.avatarUrl, () => V.value = !1), te($), (a, p) => (v(), c("div", se, [l("button", {
-			id: L,
+			document.addEventListener("pointerdown", Z, !0), window.addEventListener("scroll", Q, !0), window.addEventListener("resize", Q), g(q);
+		}), T(() => k.avatarUrl, () => B.value = !1), ne($), (o, m) => (v(), l("div", le, [u("button", {
+			id: I,
 			ref_key: "trigger",
-			ref: z,
+			ref: R,
 			type: "button",
 			"aria-haspopup": "menu",
-			"aria-expanded": M.value,
-			"aria-controls": M.value ? R : void 0,
-			"aria-label": `${f.name}, account menu`,
-			class: _(["group inline-flex h-10 shrink-0 cursor-pointer items-center gap-2 rounded-10 border border-transparent p-0.5 transition-colors max-sm:rounded-full max-sm:border-0 max-sm:p-0 duration-200 hover:border-border hover:bg-surface-sunken/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface", [f.showName && "sm:pr-2.5 sm:pl-3", M.value && "border-border bg-surface-sunken/50"]]),
+			"aria-expanded": A.value,
+			"aria-controls": A.value ? L : void 0,
+			"aria-label": `${p.name}, account menu`,
+			class: _(["group inline-flex shrink-0 cursor-pointer items-center gap-2 rounded-10 border border-transparent p-2 transition-colors duration-200 hover:border-border hover:bg-surface-sunken/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface", [p.showName && "md:px-4", A.value && "border-border bg-surface-sunken/50"]]),
 			"data-ac-ds": "",
 			"data-testid": "ac-user-menu-trigger",
-			onClick: p[1] ||= (e) => M.value ? X() : Y(),
-			onKeydown: we
+			onClick: m[1] ||= (e) => A.value ? Y() : J(),
+			onKeydown: Ie
 		}, [
-			f.showName ? (v(), c("span", le, S(f.name), 1)) : s("", !0),
-			l("span", ue, [l("span", E, [W.value ? (v(), c("img", {
+			p.showName ? (v(), l("span", de, S(p.name), 1)) : c("", !0),
+			u("span", fe, [u("span", pe, [U.value ? (v(), l("img", {
 				key: 0,
-				src: f.avatarUrl,
+				src: p.avatarUrl,
 				alt: "",
 				class: "size-full object-cover",
-				onError: p[0] ||= (e) => V.value = !0
-			}, null, 40, D)) : (v(), c(n, { key: 1 }, [u(S(U.value), 1)], 64))])]),
-			f.showName ? (v(), o(C(ae), {
+				onError: m[0] ||= (e) => B.value = !0
+			}, null, 40, me)) : (v(), l(r, { key: 1 }, [d(S(H.value), 1)], 64))])]),
+			p.showName ? (v(), s(C(se), {
 				key: 1,
-				class: _(["hidden size-4 shrink-0 text-muted transition-transform duration-200 motion-reduce:transition-none sm:block", M.value && "rotate-180"]),
+				class: _(["hidden size-4 shrink-0 text-muted transition-transform duration-200 motion-reduce:transition-none sm:block", A.value && "rotate-180"]),
 				"aria-hidden": "true"
-			}, null, 8, ["class"])) : s("", !0)
-		], 42, ce), (v(), o(r, { to: "body" }, [d(i, {
+			}, null, 8, ["class"])) : c("", !0)
+		], 42, ue), (v(), s(i, { to: "body" }, [f(a, {
 			"enter-active-class": "transition duration-150 ease-out motion-reduce:transition-none",
 			"enter-from-class": "opacity-0 scale-95",
 			"leave-active-class": "transition duration-100 ease-in",
 			"leave-to-class": "opacity-0"
 		}, {
-			default: T(() => [M.value ? (v(), c("div", {
+			default: E(() => [A.value ? (v(), l("div", {
 				key: 0,
-				id: R,
+				id: L,
 				ref_key: "panel",
-				ref: B,
+				ref: z,
 				role: "menu",
-				"aria-labelledby": L,
-				class: "fixed z-[90] w-76 max-w-[calc(100vw-16px)] origin-top-right overflow-hidden rounded-14 border border-border bg-surface p-2 shadow-lg",
-				style: ee({
-					top: H.value.top === void 0 ? void 0 : `${H.value.top}px`,
-					bottom: H.value.bottom === void 0 ? void 0 : `${H.value.bottom}px`,
-					right: `${H.value.right}px`
+				"aria-labelledby": I,
+				class: "fixed z-[90] w-64 max-w-[calc(100vw-16px)] origin-top-right overflow-hidden rounded-14 border border-border/80 bg-surface p-1 shadow-lg",
+				style: te({
+					top: V.value.top === void 0 ? void 0 : `${V.value.top}px`,
+					bottom: V.value.bottom === void 0 ? void 0 : `${V.value.bottom}px`,
+					right: `${V.value.right}px`
 				}),
 				"data-ac-ds": "",
 				"data-testid": "ac-user-menu-panel",
-				onKeydown: Te
+				onKeydown: X
 			}, [
-				(v(), o(x(f.profileUrl ? "a" : "div"), {
-					href: f.profileUrl || void 0,
-					role: f.profileUrl ? "menuitem" : "presentation",
-					tabindex: f.profileUrl ? -1 : void 0,
-					class: _(["flex items-center gap-3 rounded-8 px-3 py-2.5 no-underline outline-none", f.profileUrl && "transition-colors duration-150 hover:bg-accent-hover focus-visible:bg-accent-hover focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"])
+				(v(), s(x(p.profileUrl ? "a" : "div"), {
+					href: p.profileUrl || void 0,
+					role: p.profileUrl ? "menuitem" : "presentation",
+					tabindex: p.profileUrl ? -1 : void 0,
+					class: _(["flex items-center gap-3 rounded-8 px-3 py-2.5 no-underline outline-none", p.profileUrl && "transition-colors duration-150 hover:bg-surface-sunken focus-visible:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset"])
 				}, {
-					default: T(() => [l("span", de, [W.value ? (v(), c("img", {
+					default: E(() => [u("span", he, [U.value ? (v(), l("img", {
 						key: 0,
-						src: f.avatarUrl,
+						src: p.avatarUrl,
 						alt: "",
 						class: "size-full object-cover",
-						onError: p[2] ||= (e) => V.value = !0
-					}, null, 40, fe)) : (v(), c(n, { key: 1 }, [u(S(U.value), 1)], 64))]), l("span", pe, [l("span", me, S(f.name), 1), f.email ? (v(), c("span", he, S(f.email), 1)) : s("", !0)])]),
+						onError: m[2] ||= (e) => B.value = !0
+					}, null, 40, ge)) : (v(), l(r, { key: 1 }, [d(S(H.value), 1)], 64))]), u("span", _e, [u("span", ve, S(p.name), 1), p.email ? (v(), l("span", ye, S(p.email), 1)) : c("", !0)])]),
 					_: 1
 				}, 8, [
 					"href",
@@ -208,59 +213,97 @@ var se = {
 					"tabindex",
 					"class"
 				])),
-				f.items.length || a.$slots.default ? (v(), c("div", ge, [(v(!0), c(n, null, b(f.items, (e) => (v(), o(x(G(e)), h({ key: e.label }, { ref_for: !0 }, Ce(e), {
-					role: "menuitem",
+				p.workspaces.length ? (v(), l("div", {
+					key: 0,
+					role: "group",
+					"aria-labelledby": `${C(F)}-workspaces`,
+					class: "mt-1 border-t border-border px-3 py-2"
+				}, [u("p", {
+					id: `${C(F)}-workspaces`,
+					class: "mb-2 flex items-center gap-2 text-xs font-semibold tracking-wide text-muted uppercase"
+				}, [f(C(ae), {
+					class: "size-4",
+					"aria-hidden": "true"
+				}), d(" " + S(p.workspacesLabel), 1)], 8, xe), u("div", Se, [(v(!0), l(r, null, b(p.workspaces, (t) => (v(), l("button", {
+					key: t.name,
+					type: "button",
+					role: "menuitemradio",
 					tabindex: "-1",
-					class: P,
-					onClick: (t) => Ee(e)
-				}), {
-					default: T(() => [e.icon ? (v(), o(x(e.icon), {
-						key: 0,
-						"aria-hidden": "true"
-					})) : s("", !0), l("span", _e, S(e.label), 1)]),
-					_: 2
-				}, 1040, ["onClick"]))), 128)), ne(a.$slots, "default", {
-					close: X,
-					itemClass: P
-				})])) : s("", !0),
-				f.showThemeMode ? (v(), c("div", {
+					"aria-checked": t.name === j.value,
+					class: _(["flex w-full cursor-pointer items-center justify-between gap-2 rounded-8 px-2 py-2 text-left text-base outline-none transition-colors duration-150 hover:bg-surface-sunken focus-visible:bg-surface-sunken focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", t.name === j.value && "bg-surface-sunken/50"]),
+					"data-ac-ds": "",
+					"data-testid": "ac-user-menu-workspace",
+					onClick: (e) => Re(t)
+				}, [u("span", we, [f(e, {
+					name: t.displayName || t.name,
+					"img-url": t.avatarUrl,
+					kind: t.type === "user" ? "person" : "organization",
+					alt: ""
+				}, null, 8, [
+					"name",
+					"img-url",
+					"kind"
+				]), u("span", Te, [u("span", Ee, S(t.displayName || t.name), 1), u("span", D, [d(S(t.name), 1), t.type === "user" ? (v(), l(r, { key: 0 }, [d(" (Personal)")], 64)) : c("", !0)])])]), t.name === j.value ? (v(), s(C(oe), {
+					key: 0,
+					class: "size-4 shrink-0 text-primary",
+					"aria-hidden": "true"
+				})) : c("", !0)], 10, Ce))), 128))])], 8, be)) : c("", !0),
+				p.showThemeMode ? (v(), l("div", {
 					key: 1,
 					role: "group",
-					"aria-labelledby": `${C(I)}-theme`,
+					"aria-labelledby": `${C(F)}-theme`,
 					class: "mt-1 border-t border-border px-1 pt-2 pb-1"
-				}, [l("p", {
-					id: `${C(I)}-theme`,
+				}, [u("p", {
+					id: `${C(F)}-theme`,
 					class: "mb-2 px-2 text-sm font-semibold tracking-[0.08em] text-muted uppercase"
-				}, "Theme", 8, ye), d(t, {
+				}, "Theme", 8, Oe), f(n, {
 					display: "labels",
-					"onSet:theme": p[3] ||= (e) => N("set:theme", e)
-				})], 8, ve)) : s("", !0),
-				f.showFontScale ? (v(), c("div", {
+					"onSet:theme": m[3] ||= (e) => M("set:theme", e)
+				})], 8, De)) : c("", !0),
+				p.showFontScale ? (v(), l("div", {
 					key: 2,
 					role: "group",
-					"aria-labelledby": `${C(I)}-scale`,
+					"aria-labelledby": `${C(F)}-scale`,
 					class: "mt-1 border-t border-border px-1 pt-2 pb-1"
-				}, [l("p", {
-					id: `${C(I)}-scale`,
+				}, [u("p", {
+					id: `${C(F)}-scale`,
 					class: "mb-2 px-2 text-sm font-semibold tracking-[0.08em] text-muted uppercase"
-				}, "Text size", 8, xe), d(e, { display: "labels" })], 8, be)) : s("", !0),
-				l("div", O, [(v(), o(x(f.logoutUrl ? "a" : "button"), {
-					href: f.logoutUrl || void 0,
-					type: f.logoutUrl ? void 0 : "button",
-					role: "menuitem",
-					tabindex: "-1",
-					class: _(Se),
-					"data-ac-ds": "",
-					"data-testid": "ac-user-menu-logout",
-					onClick: De
-				}, {
-					default: T(() => [d(C(oe), { "aria-hidden": "true" }), l("span", null, S(f.logoutLabel), 1)]),
-					_: 1
-				}, 8, ["href", "type"]))])
-			], 36)) : s("", !0)]),
+				}, "Text size", 8, Ae), f(t, { display: "labels" })], 8, ke)) : c("", !0),
+				u("div", je, [
+					(v(!0), l(r, null, b(p.items, (e) => (v(), s(x(W(e)), ee({ key: e.label }, { ref_for: !0 }, Fe(e), {
+						role: "menuitem",
+						tabindex: "-1",
+						class: N,
+						onClick: (t) => Le(e)
+					}), {
+						default: E(() => [e.icon ? (v(), s(x(e.icon), {
+							key: 0,
+							"aria-hidden": "true"
+						})) : c("", !0), u("span", Me, S(e.label), 1)]),
+						_: 2
+					}, 1040, ["onClick"]))), 128)),
+					re(o.$slots, "default", {
+						close: Y,
+						itemClass: N
+					}),
+					(v(), s(x(p.logoutUrl ? "a" : "button"), {
+						href: p.logoutUrl || void 0,
+						type: p.logoutUrl ? void 0 : "button",
+						role: "menuitem",
+						tabindex: "-1",
+						class: _(Pe),
+						"data-ac-ds": "",
+						"data-testid": "ac-user-menu-logout",
+						onClick: ze
+					}, {
+						default: E(() => [f(C(ce), { "aria-hidden": "true" }), u("span", null, S(p.logoutLabel), 1)]),
+						_: 1
+					}, 8, ["href", "type"]))
+				])
+			], 36)) : c("", !0)]),
 			_: 3
 		})]))]));
 	}
 });
 //#endregion
-export { j as default };
+export { k as default };

package/dist/lib/components/index.d.ts

@@ -12,15 +12,18 @@ export { default as AcButtons } from "./AcButtons.vue";
 export { default as AcCard } from "./AcCard.vue";
 export { default as AcCellValue } from "./AcCellValue.vue";
 export { default as AcCheckBox } from "./AcCheckBox.vue";
+export { default as AcCheckList } from "./AcCheckList.vue";
 export { default as AcCheckRadio } from "./AcCheckRadio.vue";
 export { default as AcCircularProgress } from "./AcCircularProgress.vue";
 export { default as AcClusterSwitcher } from "./AcClusterSwitcher.vue";
 export { default as AcColorInput } from "./AcColorInput.vue";
+export { default as AcCommandBlock } from "./AcCommandBlock.vue";
 export { default as AcConfirmModal } from "./AcConfirmModal.vue";
 export { default as AcContentHeader } from "./AcContentHeader.vue";
 export { default as AcContentLayout } from "./AcContentLayout.vue";
 export { default as AcContentTable } from "./AcContentTable.vue";
 export { default as AcCopyButton } from "./AcCopyButton.vue";
+export { default as AcCostSummary } from "./AcCostSummary.vue";
 export { default as AcDatePicker } from "./AcDatePicker.vue";
 export { default as AcDeleteConfirmationModal } from "./AcDeleteModal.vue";
 export { default as AcDeleteModal } from "./AcDeleteModal.vue";
@@ -29,6 +32,7 @@ export { default as AcDropdown } from "./AcDropdown.vue";
 export { default as AcDropdownDivider } from "./AcDropdownDivider.vue";
 export { default as AcDropdownItem } from "./AcDropdownItem.vue";
 export { default as AcEmptyState } from "./AcEmptyState.vue";
+export { default as AcErrorState } from "./AcErrorState.vue";
 export { default as AcFeatureCard } from "./AcFeatureCard.vue";
 export { default as AcFileUpload } from "./AcFileUpload.vue";
 export { default as AcFontScale } from "./AcFontScale.vue";
@@ -44,6 +48,7 @@ export { default as AcInfoTable } from "./AcInfoTable.vue";
 export { default as AcInput } from "./AcInput.vue";
 export { default as AcKbd } from "./AcKbd.vue";
 export { default as AcKeyValueInput } from "./AcKeyValueInput.vue";
+export { default as AcLoader } from "./AcLoader.vue";
 export { default as AcLocaleSwitcher } from "./AcLocaleSwitcher.vue";
 export { default as AcLogo } from "./AcLogo.vue";
 export { default as AcModal } from "./AcModal.vue";
@@ -55,10 +60,12 @@ export { default as AcPage } from "./AcPage.vue";
 export { default as AcPagination } from "./AcPagination.vue";
 export { default as AcPreloader } from "./AcPreloader.vue";
 export { default as AcProgress } from "./AcProgress.vue";
+export { default as AcProductHero } from "./AcProductHero.vue";
 export { default as AcResourceCard } from "./AcResourceCard.vue";
 export { default as AcSearchBar } from "./AcSearchBar.vue";
 export { default as AcSectionContent } from "./AcSectionContent.vue";
 export { default as AcSegmentedControl } from "./AcSegmentedControl.vue";
+export { default as AcSettingsRow } from "./AcSettingsRow.vue";
 export { default as AcSelect } from "./AcSelect.vue";
 export { default as AcSidebar } from "./AcSidebar.vue";
 export { default as AcSidebarItem } from "./AcSidebarItem.vue";

package/dist/lib/components/status.d.ts

@@ -6,8 +6,10 @@ export interface StatusMeta {
     tone: StatusTone;
     /** Human label in sentence case, e.g. "Pending provisioning". */
     label: string;
-    /** The resource is changing state (provisioning, deleting…); badges pulse their dot. */
+    /** The resource is changing state (provisioning, deleting…); badges show a spinner on a primary tint. */
     transient: boolean;
+    /** The resource is switched off (stopped, paused, offline); badges show a hollow dot, as cloud-ui's "Offline". */
+    hollow: boolean;
 }
 export interface StatusMetaOptions {
     /** Enum prefix to strip before matching, e.g. `VPC_STATE` turns `VPC_STATE_AVAILABLE` into "Available". */

package/dist/lib/components/status.js

@@ -44,8 +44,7 @@ var e = [
 			"partial",
 			"overdue",
 			"out_of_sync",
-			"halted",
-			"paused"
+			"halted"
 		]
 	],
 	[
@@ -83,11 +82,26 @@ var e = [
 			"requested",
 			"pending_acceptance"
 		]
+	],
+	[
+		"default",
+		!1,
+		[
+			"stopped",
+			"paused",
+			"offline",
+			"inactive",
+			"powered_off",
+			"shut_off",
+			"shutoff"
+		],
+		!0
 	]
 ], t = /* @__PURE__ */ new Map();
-for (let [n, r, i] of e) for (let e of i) t.set(e.replace(/_/g, ""), {
+for (let [n, r, i, a = !1] of e) for (let e of i) t.set(e.replace(/_/g, ""), {
 	tone: n,
-	transient: r
+	transient: r,
+	hollow: a
 });
 function n(e, t) {
 	let n = (e) => e.trim().replace(/([a-z\d])([A-Z])/g, "$1_$2").toLowerCase().replace(/[\s-]+/g, "_"), r = n(e), i = t ? n(t).replace(/_+$/, "") : "";
@@ -103,7 +117,8 @@ function i(e, i = {}) {
 	return {
 		tone: s?.tone ?? "default",
 		label: o,
-		transient: s?.transient ?? !1
+		transient: s?.transient ?? !1,
+		hollow: s?.hollow ?? !1
 	};
 }
 //#endregion