@ac-design/design-system 1.0.3 → 2.1.0

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

@@ -1,117 +1,241 @@
-import { Teleport as e, Transition as t, computed as n, createBlock as r, createElementBlock as i, createElementVNode as a, createTextVNode as o, createVNode as s, defineComponent as c, nextTick as l, normalizeStyle as u, onBeforeUnmount as d, onMounted as f, onUpdated as p, openBlock as m, ref as h, renderSlot as g, toDisplayString as _, useId as v, useSlots as y, vShow as b, watch as x, withCtx as S, withDirectives as C } from "vue";
+import { Fragment as e, Teleport as t, Transition as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as ee, createVNode as te, defineComponent as c, nextTick as l, normalizeClass as u, normalizeStyle as d, onBeforeUnmount as f, onMounted as p, onUpdated as ne, openBlock as m, ref as h, renderList as re, renderSlot as g, resolveDynamicComponent as _, toDisplayString as v, useId as y, useSlots as ie, vShow as b, watch as x, withCtx as S, withDirectives as C } from "vue";
+import { CircleAlert as w, CircleCheck as ae, Info as oe, TriangleAlert as se } from "@lucide/vue";
 //#region src/lib/components/AcTooltip.vue?vue&type=script&setup=true&lang.ts
-var w = ["data-side"], T = 6, E = 8, D = /*@__PURE__*/ c({
+var ce = ["data-side"], le = { class: "flex items-start gap-2" }, ue = { class: "min-w-0 flex-1" }, T = {
+	key: 0,
+	class: "font-semibold text-on-tooltip"
+}, de = {
+	key: 1,
+	class: "ml-1 flex shrink-0 items-center gap-0.5 self-center"
+}, E = null, D = 0, fe = 400, O = /*@__PURE__*/ c({
 	__name: "AcTooltip",
 	props: {
 		content: { default: "" },
+		title: { default: "" },
 		placement: { default: "top" },
-		delay: { default: 300 },
+		align: { default: "center" },
+		tone: { default: "neutral" },
+		shortcut: { default: () => [] },
+		delay: { default: 100 },
 		disabled: {
 			type: Boolean,
 			default: !1
-		}
+		},
+		interactive: {
+			type: Boolean,
+			default: !1
+		},
+		overflowOnly: {
+			type: Boolean,
+			default: !1
+		},
+		maxWidth: { default: "280px" }
 	},
 	setup(c) {
-		let D = c, O = y(), k = {
+		let O = c, pe = ie(), k = {
 			top: "bottom",
 			bottom: "top",
 			left: "right",
 			right: "left"
-		}, A = `${v()}-tip`, j = h(null), M = h(null), N = h(!1), P = h(D.placement), F = h({
+		}, me = {
+			top: "translate-y-1",
+			bottom: "-translate-y-1",
+			left: "translate-x-1",
+			right: "-translate-x-1"
+		}, A = {
+			top: "border-r border-b",
+			bottom: "border-t border-l",
+			left: "border-t border-r",
+			right: "border-b border-l"
+		}, j = {
+			info: {
+				icon: oe,
+				class: "text-info"
+			},
+			success: {
+				icon: ae,
+				class: "text-success"
+			},
+			warning: {
+				icon: se,
+				class: "text-warning"
+			},
+			danger: {
+				icon: w,
+				class: "text-danger"
+			}
+		}, M = `${y()}-tip`, N = h(null), P = h(null), F = h(!1), I = h(O.placement), L = h({
 			top: 0,
-			left: 0
-		}), I, L, R = null, z = n(() => !D.disabled && !!(D.content || O.content));
-		function B() {
-			let e = j.value;
+			left: 0,
+			arrow: 0
+		}), R, z, B = null, V = r(() => !O.disabled && !!(O.content || O.title || pe.content)), H = r(() => O.tone === "neutral" ? null : j[O.tone]), he = r(() => {
+			let { top: e, left: t, arrow: n } = L.value, r = {
+				top: `${n}px 100%`,
+				bottom: `${n}px 0`,
+				left: `100% ${n}px`,
+				right: `0 ${n}px`
+			}[I.value];
+			return {
+				top: `${e}px`,
+				left: `${t}px`,
+				maxWidth: O.maxWidth,
+				transformOrigin: r
+			};
+		}), ge = r(() => {
+			let e = `${L.value.arrow - 5}px`, t = "-6px";
+			return {
+				top: {
+					left: e,
+					bottom: t
+				},
+				bottom: {
+					left: e,
+					top: t
+				},
+				left: {
+					top: e,
+					right: t
+				},
+				right: {
+					top: e,
+					left: t
+				}
+			}[I.value];
+		});
+		function U() {
+			let e = N.value;
 			return e?.querySelector("button, a[href], input, select, textarea, [tabindex]") ?? e?.firstElementChild ?? null;
 		}
-		function V() {
-			let e = B();
-			if (R && R !== e && H(R), R = e, !e) return;
-			let t = (e.getAttribute("aria-describedby") ?? "").split(" ").filter((e) => e && e !== A);
-			z.value && t.push(A), t.length ? e.setAttribute("aria-describedby", t.join(" ")) : e.removeAttribute("aria-describedby");
+		function W() {
+			let e = U();
+			if (B && B !== e && G(B), B = e, !e) return;
+			let t = (e.getAttribute("aria-describedby") ?? "").split(" ").filter((e) => e && e !== M);
+			V.value && t.push(M), t.length ? e.setAttribute("aria-describedby", t.join(" ")) : e.removeAttribute("aria-describedby");
 		}
-		function H(e) {
-			let t = (e.getAttribute("aria-describedby") ?? "").split(" ").filter((e) => e && e !== A);
+		function G(e) {
+			let t = (e.getAttribute("aria-describedby") ?? "").split(" ").filter((e) => e && e !== M);
 			t.length ? e.setAttribute("aria-describedby", t.join(" ")) : e.removeAttribute("aria-describedby");
 		}
-		function U(e) {
-			clearTimeout(L), z.value && !N.value && (clearTimeout(I), I = setTimeout(async () => {
-				N.value = !0, await l(), K();
-			}, e));
-		}
-		function W(e = 0) {
-			clearTimeout(I), clearTimeout(L), e ? L = setTimeout(() => N.value = !1, e) : N.value = !1;
-		}
-		function G(e, t, n, r) {
-			return e === "top" ? t.top - T - r >= E : e === "bottom" ? t.bottom + T + r <= window.innerHeight - E : e === "left" ? t.left - T - n >= E : t.right + T + n <= window.innerWidth - E;
-		}
-		function K() {
-			let e = B() ?? j.value;
-			if (!e || !M.value) return;
-			let t = e.getBoundingClientRect(), { offsetWidth: n, offsetHeight: r } = M.value, i = D.placement, a = G(i, t, n, r) || !G(k[i], t, n, r) ? i : k[i], o = (e, t) => Math.max(E, Math.min(e, t - E));
-			P.value = a, F.value = a === "top" || a === "bottom" ? {
-				top: a === "top" ? t.top - T - r : t.bottom + T,
-				left: o(t.left + t.width / 2 - n / 2, window.innerWidth - n)
-			} : {
-				top: o(t.top + t.height / 2 - r / 2, window.innerHeight - r),
-				left: a === "left" ? t.left - T - n : t.right + T
-			};
+		function _e() {
+			let e = N.value;
+			return e ? [e, ...e.querySelectorAll("*")].some((e) => e.scrollWidth > e.clientWidth + 1) : !1;
+		}
+		async function ve() {
+			(!O.overflowOnly || _e()) && (E && E !== q && E(), E = q, F.value = !0, await l(), ye());
+		}
+		function K(e) {
+			if (clearTimeout(z), !V.value || F.value) return;
+			clearTimeout(R);
+			let t = E !== null || Date.now() - D < fe;
+			R = setTimeout(ve, t ? 0 : e);
+		}
+		function q() {
+			clearTimeout(R), clearTimeout(z), F.value && (F.value = !1, D = Date.now(), E === q && (E = null));
+		}
+		function J(e = 0) {
+			clearTimeout(R), clearTimeout(z), e ? z = setTimeout(q, e) : q();
+		}
+		function Y(e, t, n, r) {
+			return e === "top" ? t.top - 8 - r >= 8 : e === "bottom" ? t.bottom + 8 + r <= window.innerHeight - 8 : e === "left" ? t.left - 8 - n >= 8 : t.right + 8 + n <= window.innerWidth - 8;
+		}
+		function X(e, t, n) {
+			return O.align === "start" ? e : O.align === "end" ? e + t - n : e + (t - n) / 2;
+		}
+		function Z(e, t, n) {
+			return Math.min(Math.max(e, t), Math.max(t, n));
+		}
+		function ye() {
+			let e = U() ?? N.value;
+			if (!e || !P.value) return;
+			let t = e.getBoundingClientRect(), { offsetWidth: n, offsetHeight: r } = P.value, i = O.placement, a = Y(i, t, n, r) || !Y(k[i], t, n, r) ? i : k[i];
+			if (I.value = a, a === "top" || a === "bottom") {
+				let e = Z(X(t.left, t.width, n), 8, window.innerWidth - 8 - n), i = Z(t.left + t.width / 2 - e, 12, n - 12);
+				L.value = {
+					top: Math.round(a === "top" ? t.top - 8 - r : t.bottom + 8),
+					left: Math.round(e),
+					arrow: i
+				};
+			} else {
+				let e = Z(X(t.top, t.height, r), 8, window.innerHeight - 8 - r), i = Z(t.top + t.height / 2 - e, 12, r - 12);
+				L.value = {
+					top: Math.round(e),
+					left: Math.round(a === "left" ? t.left - 8 - n : t.right + 8),
+					arrow: i
+				};
+			}
+		}
+		function be(e) {
+			e.pointerType !== "touch" && K(O.delay);
+		}
+		function xe(e) {
+			e.target.matches(":focus-visible") && K(0);
 		}
-		function q(e) {
-			e.pointerType !== "touch" && U(D.delay);
+		function Se() {
+			O.interactive && clearTimeout(z);
 		}
-		function J(e) {
-			e.target.matches(":focus-visible") && U(0);
+		function Ce() {
+			O.interactive && J(120);
 		}
-		function Y() {
-			W();
+		function Q() {
+			J();
 		}
-		function X(e) {
-			e.key === "Escape" && N.value && W();
+		function $(e) {
+			e.key === "Escape" && F.value && J();
 		}
-		return x(N, (e) => {
-			e ? (document.addEventListener("keydown", X), window.addEventListener("scroll", Y, !0)) : (document.removeEventListener("keydown", X), window.removeEventListener("scroll", Y, !0));
-		}), x(z, (e) => {
-			V(), e || W();
-		}), f(V), p(V), d(() => {
-			W(), document.removeEventListener("keydown", X), window.removeEventListener("scroll", Y, !0), R && H(R);
-		}), (n, l) => (m(), i("span", {
+		return x(F, (e) => {
+			e ? (document.addEventListener("keydown", $), window.addEventListener("scroll", Q, !0)) : (document.removeEventListener("keydown", $), window.removeEventListener("scroll", Q, !0));
+		}), x(V, (e) => {
+			W(), e || J();
+		}), p(W), ne(W), f(() => {
+			J(), E === q && (E = null), document.removeEventListener("keydown", $), window.removeEventListener("scroll", Q, !0), B && G(B);
+		}), (r, l) => (m(), o("span", {
 			ref_key: "root",
-			ref: j,
+			ref: N,
 			class: "inline-flex max-w-full",
 			"data-ac-ds": "",
 			"data-testid": "ac-tooltip",
-			onPointerenter: q,
-			onPointerleave: l[2] ||= (e) => W(100),
-			onPointerdown: l[3] ||= (e) => W(),
-			onFocusin: J,
-			onFocusout: l[4] ||= (e) => W()
-		}, [g(n.$slots, "default"), (m(), r(e, { to: "body" }, [s(t, {
-			"enter-active-class": "transition-opacity duration-100 ease-out",
-			"enter-from-class": "opacity-0",
-			"leave-active-class": "transition-opacity duration-75 ease-in",
-			"leave-to-class": "opacity-0"
+			onPointerenter: be,
+			onPointerleave: l[0] ||= (e) => J(120),
+			onPointerdown: l[1] ||= (e) => J(),
+			onFocusin: xe,
+			onFocusout: l[2] ||= (e) => J()
+		}, [g(r.$slots, "default"), (m(), i(t, { to: "body" }, [te(n, {
+			"enter-active-class": "transition-[opacity,scale,translate] duration-150 ease-out motion-reduce:transition-none",
+			"enter-from-class": `opacity-0 scale-95 ${me[I.value]}`,
+			"leave-active-class": "transition-[opacity,scale] duration-100 ease-in motion-reduce:transition-none",
+			"leave-to-class": "opacity-0 scale-95"
 		}, {
-			default: S(() => [C(a("div", {
-				id: A,
+			default: S(() => [C(s("div", {
+				id: M,
 				ref_key: "tip",
-				ref: M,
+				ref: P,
 				role: "tooltip",
-				class: "fixed z-[100] w-max max-w-64 rounded-6 bg-slate-10 px-2 py-1 text-xs font-medium text-slate-95 shadow-md dark:bg-slate-80 dark:text-slate-10 dark:ring-1 dark:ring-slate-70",
-				"data-side": P.value,
-				style: u({
-					top: `${F.value.top}px`,
-					left: `${F.value.left}px`
-				}),
+				class: u(["fixed z-[100] w-max rounded-10 border border-white/10 bg-tooltip text-xs leading-relaxed break-words whitespace-normal text-on-tooltip shadow-lg shadow-black/25", [c.title ? "px-3 py-2" : "px-2.5 py-1.5", c.interactive ? "pointer-events-auto" : "pointer-events-none"]]),
+				"data-side": I.value,
+				style: d(he.value),
 				"data-ac-ds": "",
 				"data-testid": "ac-tooltip-panel",
-				onPointerenter: l[0] ||= (e) => U(0),
-				onPointerleave: l[1] ||= (e) => W(100)
-			}, [g(n.$slots, "content", {}, () => [o(_(c.content), 1)])], 44, w), [[b, N.value]])]),
+				onPointerenter: Se,
+				onPointerleave: Ce
+			}, [s("div", le, [
+				H.value ? (m(), i(_(H.value.icon), {
+					key: 0,
+					class: u(["mt-0.5 size-3.5 shrink-0", H.value.class]),
+					"aria-hidden": "true"
+				}, null, 8, ["class"])) : a("", !0),
+				s("div", ue, [c.title ? (m(), o("p", T, v(c.title), 1)) : a("", !0), s("div", { class: u(c.title && "mt-0.5 text-on-tooltip/75") }, [g(r.$slots, "content", {}, () => [ee(v(c.content), 1)])], 2)]),
+				c.shortcut.length ? (m(), o("span", de, [(m(!0), o(e, null, re(c.shortcut, (e) => (m(), o("kbd", {
+					key: e,
+					class: "min-w-4 rounded-4 border border-white/15 bg-white/10 px-1 text-center font-mono text-xm leading-4 text-on-tooltip/75"
+				}, v(e), 1))), 128))])) : a("", !0)
+			]), s("span", {
+				"aria-hidden": "true",
+				class: u(["absolute size-2.5 rotate-45 border-white/10 bg-tooltip", A[I.value]]),
+				style: d(ge.value)
+			}, null, 6)], 46, ce), [[b, F.value]])]),
 			_: 3
-		})]))], 544));
+		}, 8, ["enter-from-class"])]))], 544));
 	}
 });
 //#endregion
-export { D as default };
+export { O as default };

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

@@ -1,20 +1,20 @@
 import e from "./AcBadge.js";
 import { Fragment as t, computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, defineComponent as c, getCurrentInstance as l, mergeProps as u, normalizeClass as d, normalizeStyle as f, openBlock as p, renderList as m, renderSlot as h, resolveDynamicComponent as g, toDisplayString as _, unref as v, useId as ee, useSlots as te, withCtx as ne } from "vue";
 //#region src/lib/components/AcUsageCard.vue?vue&type=script&setup=true&lang.ts
-var re = ["aria-labelledby", "aria-busy"], ie = { class: "flex min-w-0 flex-col gap-4 p-4" }, ae = { class: "flex min-w-0 items-start gap-3" }, oe = {
+var re = ["aria-labelledby", "aria-busy"], ie = { class: "flex min-w-0 flex-col gap-5 p-5" }, ae = { class: "flex min-w-0 items-start gap-3" }, oe = {
 	key: 0,
-	class: "inline-flex size-8 shrink-0 items-center justify-center rounded-8 bg-primary-95 text-primary-30 [&_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"
 }, se = { class: "min-w-0 flex-1" }, ce = ["id"], y = ["title"], b = {
 	key: 1,
 	class: "relative z-10 flex shrink-0 flex-wrap items-center justify-end gap-2"
 }, x = {
 	key: 0,
-	class: "text-xs text-muted"
+	class: "text-xs font-medium text-muted"
 }, S = {
 	key: 0,
 	class: "flex min-w-0 flex-col gap-2"
-}, C = { class: "flex min-w-0 flex-wrap items-baseline justify-between gap-x-3 gap-y-1" }, w = { class: "flex min-w-0 flex-wrap items-baseline gap-x-1.5" }, le = { class: "text-3xl font-semibold text-heading" }, ue = {
+}, C = { class: "flex min-w-0 flex-wrap items-baseline justify-between gap-x-3 gap-y-1" }, w = { class: "flex min-w-0 flex-wrap items-baseline gap-x-1.5" }, le = { class: "text-3xl font-bold tracking-tight text-heading tabular-nums" }, ue = {
 	key: 0,
 	class: "text-base text-muted"
 }, T = {
@@ -30,19 +30,19 @@ var re = ["aria-labelledby", "aria-busy"], ie = { class: "flex min-w-0 flex-col
 	class: "text-base text-body"
 }, O = {
 	key: 0,
-	class: "ac-scrollbar border-t border-border-light"
+	class: "ac-scrollbar border-t border-border"
 }, k = { class: "w-full text-left text-base" }, A = {
 	key: 0,
-	class: "text-xs text-muted"
+	class: "bg-surface-sunken/50 text-xs text-muted"
 }, j = {
 	scope: "row",
-	class: "px-4 py-2.5 font-normal text-body"
+	class: "px-5 py-2.5 text-left font-normal text-body"
 }, M = { class: "flex min-w-0 items-center gap-2" }, N = { class: "truncate" }, P = {
 	key: 0,
-	class: "ac-skeleton-bone ml-auto block h-3 w-14 rounded-4"
+	class: "ac-skeleton-bone ml-auto block h-3 w-14 rounded-full"
 }, F = {
 	key: 1,
-	class: "relative z-10 mt-auto flex min-w-0 flex-wrap items-center justify-between gap-x-3 gap-y-1.5 border-t border-border-light px-4 py-3 text-xs text-muted"
+	class: "relative z-10 mt-auto flex min-w-0 flex-wrap items-center justify-between gap-x-3 gap-y-1.5 border-t border-border px-5 py-3 text-base text-muted"
 }, I = /*@__PURE__*/ c({
 	__name: "AcUsageCard",
 	props: {
@@ -78,26 +78,26 @@ var re = ["aria-labelledby", "aria-busy"], ie = { class: "flex min-w-0 flex-col
 		let L = c, R = I, z = te(), de = {
 			ok: {
 				fill: "bg-primary",
-				track: "bg-primary-93",
+				track: "bg-surface-sunken",
 				text: "text-muted",
 				badge: ""
 			},
 			warning: {
 				fill: "bg-warning",
-				track: "bg-yellow-93",
-				text: "text-yellow-20",
+				track: "bg-warning/15",
+				text: "text-warning-strong",
 				badge: "Near limit"
 			},
 			danger: {
 				fill: "bg-danger",
-				track: "bg-red-93",
-				text: "text-red-30",
+				track: "bg-danger/15",
+				text: "text-danger-strong",
 				badge: "At limit"
 			},
 			over: {
 				fill: "bg-danger",
-				track: "bg-red-93",
-				text: "text-red-30",
+				track: "bg-danger/15",
+				text: "text-danger-strong",
 				badge: "Over limit"
 			}
 		}, B = new Intl.NumberFormat(void 0, { maximumFractionDigits: 2 }), V = l(), H = V?.appContext.components.RouterLink, U = ee(), W = n(() => typeof L.used == "number" && Number.isFinite(L.used)), G = n(() => W.value && typeof L.limit == "number" && L.limit > 0), K = n(() => G.value ? L.used / L.limit * 100 : 0), q = n(() => G.value ? L.used > L.limit ? "over" : K.value >= L.dangerAt ? "danger" : K.value >= L.warningAt ? "warning" : "ok" : "ok"), J = n(() => de[q.value]), fe = n(() => L.showThresholds ? [L.warningAt, L.dangerAt].filter((e) => e > 0 && e < 100) : []), Y = n(() => {
@@ -133,7 +133,7 @@ var re = ["aria-labelledby", "aria-busy"], ie = { class: "flex min-w-0 flex-col
 			R("click", e);
 		}
 		return (n, l) => (p(), a("section", {
-			class: d(["relative flex min-w-0 flex-col rounded-10 border border-border bg-surface shadow-xs transition-[border-color,box-shadow] duration-150 has-[[data-ac-card-link]:focus-visible]:ring-[3px] has-[[data-ac-card-link]:focus-visible]:ring-ring", (X.value || $()) && "hover:border-border-dark hover:shadow-sm"]),
+			class: d(["relative flex min-w-0 flex-col rounded-14 border border-border bg-surface transition-[background-color,border-color,box-shadow,translate] duration-200 has-[[data-ac-card-link]:focus-visible]:ring-2 has-[[data-ac-card-link]:focus-visible]:ring-ring has-[[data-ac-card-link]:focus-visible]:ring-offset-2 has-[[data-ac-card-link]:focus-visible]:ring-offset-surface motion-reduce:transition-none", (X.value || $()) && "hover:-translate-y-0.5 hover:border-primary/30 hover:bg-accent-hover/60 hover:shadow-card motion-reduce:hover:translate-y-0"]),
 			"aria-labelledby": `${v(U)}-title`,
 			"aria-busy": c.loading || void 0,
 			"data-ac-ds": "",
@@ -144,20 +144,20 @@ var re = ["aria-labelledby", "aria-busy"], ie = { class: "flex min-w-0 flex-col
 					z.icon || c.icon ? (p(), a("span", oe, [h(n.$slots, "icon", {}, () => [(p(), r(g(c.icon)))])])) : i("", !0),
 					o("div", se, [o("h3", {
 						id: `${v(U)}-title`,
-						class: "truncate text-lg leading-6 font-semibold tracking-[-0.01em] text-heading"
+						class: "truncate font-heading text-lg leading-6 font-semibold tracking-tight text-heading"
 					}, [X.value || $() ? (p(), r(g(X.value ? X.value.is : "button"), u({ key: 0 }, X.value ? {
 						...X.value,
 						is: void 0
 					} : { type: "button" }, {
 						"data-ac-card-link": "",
-						class: "cursor-pointer text-left outline-none after:absolute after:inset-0 after:rounded-10",
+						class: "cursor-pointer text-left outline-none after:absolute after:inset-0 after:rounded-14",
 						onClick: me
 					}), {
 						default: ne(() => [s(_(c.title), 1)]),
 						_: 1
 					}, 16)) : (p(), a(t, { key: 1 }, [s(_(c.title), 1)], 64))], 8, ce), c.description ? (p(), a("p", {
 						key: 0,
-						class: "truncate text-xs text-muted",
+						class: "mt-0.5 truncate text-xs text-muted",
 						title: c.description
 					}, _(c.description), 9, y)) : i("", !0)]),
 					c.period || J.value.badge || z.actions ? (p(), a("div", b, [
@@ -173,14 +173,14 @@ var re = ["aria-labelledby", "aria-busy"], ie = { class: "flex min-w-0 flex-col
 						h(n.$slots, "actions")
 					])) : i("", !0)
 				]),
-				W.value || c.loading && c.breakdown.length === 0 ? (p(), a("div", S, [c.loading ? (p(), a(t, { key: 0 }, [l[0] ||= o("span", { class: "ac-skeleton-bone block h-6 w-2/5 rounded-4" }, null, -1), l[1] ||= o("span", { class: "ac-skeleton-bone block h-2 w-full rounded-full" }, null, -1)], 64)) : (p(), a(t, { key: 1 }, [
+				W.value || c.loading && c.breakdown.length === 0 ? (p(), a("div", S, [c.loading ? (p(), a(t, { key: 0 }, [l[0] ||= o("span", { class: "ac-skeleton-bone block h-7 w-2/5 rounded-6" }, null, -1), l[1] ||= o("span", { class: "ac-skeleton-bone block h-2 w-full rounded-full" }, null, -1)], 64)) : (p(), a(t, { key: 1 }, [
 					o("div", C, [o("p", w, [o("span", le, _(Z(c.used)), 1), G.value ? (p(), a("span", ue, "of " + _(Q(c.limit)), 1)) : (p(), a("span", T, [
 						s(_(c.unit), 1),
 						c.unit ? (p(), a(t, { key: 0 }, [s(" · ")], 64)) : i("", !0),
 						l[2] ||= s("No limit", -1)
 					]))]), G.value ? (p(), a("span", {
 						key: 0,
-						class: d(["text-base font-medium tabular-nums", q.value === "ok" ? "text-heading" : J.value.text])
+						class: d(["text-base font-semibold tabular-nums", q.value === "ok" ? "text-heading" : J.value.text])
 					}, _(Math.round(K.value)) + "% ", 3)) : i("", !0)]),
 					G.value ? (p(), a("div", {
 						key: 0,
@@ -192,7 +192,7 @@ var re = ["aria-labelledby", "aria-busy"], ie = { class: "flex min-w-0 flex-col
 						"aria-valuetext": pe.value,
 						class: d(["relative h-2 w-full overflow-hidden rounded-full", J.value.track])
 					}, [o("div", {
-						class: d(["h-full rounded-full transition-[width,background-color] duration-300 ease-out motion-reduce:transition-none", J.value.fill]),
+						class: d(["h-full rounded-full transition-[width,background-color] duration-700 ease-out motion-reduce:transition-none", J.value.fill]),
 						style: f({ width: `${Math.min(100, K.value)}%` })
 					}, null, 6), (p(!0), a(t, null, m(fe.value, (e) => (p(), a("span", {
 						key: e,
@@ -202,7 +202,7 @@ var re = ["aria-labelledby", "aria-busy"], ie = { class: "flex min-w-0 flex-col
 					}, null, 4))), 128))], 10, E)) : i("", !0),
 					Y.value ? (p(), a("p", {
 						key: 1,
-						class: d(["text-xs", J.value.text])
+						class: d(["text-xs font-medium", J.value.text])
 					}, _(Y.value), 3)) : i("", !0)
 				], 64))])) : i("", !0),
 				z.default ? (p(), a("div", D, [h(n.$slots, "default")])) : i("", !0)
@@ -210,17 +210,17 @@ var re = ["aria-labelledby", "aria-busy"], ie = { class: "flex min-w-0 flex-col
 			c.breakdown.length ? (p(), a("div", O, [o("table", k, [c.breakdownHeaders.length ? (p(), a("thead", A, [o("tr", null, [(p(!0), a(t, null, m(c.breakdownHeaders, (e, t) => (p(), a("th", {
 				key: t,
 				scope: "col",
-				class: d(["h-9 px-4 font-medium whitespace-nowrap", t > 0 ? "text-right" : "text-left"])
+				class: d(["h-10 px-5 font-semibold whitespace-nowrap", t > 0 ? "text-right" : "text-left"])
 			}, _(e), 3))), 128))])])) : i("", !0), o("tbody", null, [(p(!0), a(t, null, m(c.breakdown, (e, n) => (p(), a("tr", {
 				key: `${e.label}${n}`,
-				class: d(["border-t border-border-light", !c.breakdownHeaders.length && n === 0 && "border-t-0"])
+				class: d(["border-t border-border", !c.breakdownHeaders.length && n === 0 && "border-t-0"])
 			}, [o("th", j, [o("span", M, [e.icon ? (p(), r(g(e.icon), {
 				key: 0,
 				class: "size-4 shrink-0 text-muted",
 				"aria-hidden": "true"
 			})) : i("", !0), o("span", N, _(e.label), 1)])]), (p(!0), a(t, null, m(e.values, (e, n) => (p(), a("td", {
 				key: n,
-				class: "px-4 py-2.5 text-right font-medium whitespace-nowrap text-heading tabular-nums"
+				class: "px-5 py-2.5 text-right font-medium whitespace-nowrap text-heading tabular-nums"
 			}, [c.loading ? (p(), a("span", P)) : (p(), a(t, { key: 1 }, [s(_(Z(e)), 1)], 64))]))), 128))], 2))), 128))])])])) : i("", !0),
 			z.footer ? (p(), a("div", F, [h(n.$slots, "footer")])) : i("", !0)
 		], 10, re));

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;