@ac-design/design-system 2.0.0 → 2.1.1

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

@@ -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,11 +27,17 @@ 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/25 bg-primary/10 text-primary-strong",
 				title: "text-primary-strong",
@@ -51,7 +60,7 @@ var x = ["role"], S = { class: "flex min-w-0 flex-1 flex-wrap items-center gap-x
 				box: "border-warning/30 bg-warning/10 text-warning-strong",
 				title: "text-warning-strong",
 				icon: "text-warning-strong",
-				glyph: y
+				glyph: b
 			},
 			danger: {
 				box: "border-danger/25 bg-danger/10 text-danger-strong",
@@ -65,30 +74,121 @@ var x = ["role"], S = { class: "flex min-w-0 flex-1 flex-wrap items-center gap-x
 				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]),
+		}, 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)))]),
@@ -103,13 +203,13 @@ var x = ["role"], S = { class: "flex min-w-0 flex-1 flex-wrap items-center gap-x
 				type: "button",
 				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), {
+				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

@@ -264,7 +264,7 @@ var ge = {
 					"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 duration-200 hover:bg-accent-hover focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset aria-[current=page]:bg-accent",
+					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)

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

@@ -21,11 +21,14 @@ declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, i
     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;

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

@@ -1,12 +1,15 @@
 import e from "../charts/ChartFrame.js";
-import { CURVES as t, chartDuration as n } from "../charts/shared.js";
-import { useXYChart as r } from "../charts/xy.js";
-import { Fragment as i, computed as a, createBlock as o, createCommentVNode as s, createElementBlock as c, createSlots as ee, createVNode as l, defineComponent as u, guardReactiveProps as d, isRef as f, normalizeProps as p, openBlock as m, ref as h, renderList as g, renderSlot as _, unref as v, useId as y, withCtx as b } from "vue";
+import { bindAxisHover as t, useEChart as n } from "../charts/echarts.js";
+import { readNumber as r } from "../charts/shared.js";
+import { LARGE_DATA as i, useXYChart as a } from "../charts/xy.js";
+import { cartesianOption as o, locateRow as s, prepareZoom as c } from "../charts/cartesian.js";
+import { createBlock as l, createElementVNode as u, createSlots as d, defineComponent as f, guardReactiveProps as p, isRef as m, normalizeProps as h, openBlock as g, ref as _, renderSlot as v, unref as y, withCtx as b } from "vue";
 import { ChartArea as x } from "@lucide/vue";
-import { VisArea as te, VisAxis as S, VisCrosshair as C, VisXYContainer as w } from "@unovis/vue";
-import { Scale as T } from "@unovis/ts";
+import { use as S } from "echarts/core";
+import { LineChart as C } from "echarts/charts";
+import { AxisPointerComponent as w, GridComponent as T } from "echarts/components";
 //#region src/lib/components/AcAreaChart.vue?vue&type=script&setup=true&lang.ts
-var E = /*@__PURE__*/ u({
+var E = /*@__PURE__*/ f({
 	__name: "AcAreaChart",
 	props: {
 		stacked: {
@@ -49,148 +52,135 @@ var E = /*@__PURE__*/ u({
 		},
 		emptyText: { default: "No data to show yet" },
 		title: { default: "" },
-		description: { default: "" }
+		description: { default: "" },
+		zoom: {
+			type: Boolean,
+			default: !1
+		},
+		renderer: { default: "canvas" },
+		animation: {
+			type: Boolean,
+			default: !0
+		}
 	},
-	setup(u) {
-		let E = u, D = n(), O = y(), { hidden: k, width: A, visibleKeys: j, colorOf: M, colors: N, legendItems: P, xKind: F, byPosition: I, x: L, yAccessors: R, xTickValues: ne, maxXTicks: z, yTicks: B, xTickFormat: V, formatY: H, rowLabel: U, yDomain: W, tooltipItems: G, tooltipTotal: K, table: q, ariaLabel: J } = r(E, { stacked: () => E.stacked }), Y = h(null), X = a(() => F.value === "time" && !I.value ? T.scaleTime() : void 0), Z = (e) => `${O}-area-${e}`.replace(/[^\w-]/g, ""), Q = a(() => E.gradient ? E.stacked ? [.45, .12] : [.32, .02] : [.2, .2]), re = a(() => Object.entries(M.value).map(([e, t]) => `<linearGradient id="${Z(e)}" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" style="stop-color: ${t}; stop-opacity: ${Q.value[0]}" /><stop offset="100%" style="stop-color: ${t}; stop-opacity: ${Q.value[1]}" /></linearGradient>`).join("")), $ = a(() => j.value.map((e) => `url(#${Z(e)})`)), ie = a(() => E.stacked ? [{
-			key: "stack",
-			y: R.value,
-			fill: $.value,
-			line: N.value
-		}] : j.value.map((e, t) => ({
-			key: e,
-			y: [R.value[t]],
-			fill: [$.value[t]],
-			line: [N.value[t]]
-		})));
-		function ae(e, t, n, r) {
-			if (!t || n === void 0 || !r || r.type === "wheel") {
-				Y.value = null;
-				return;
-			}
-			Y.value = {
-				clientX: r.clientX,
-				clientY: r.clientY,
-				title: U(n),
-				items: G(t),
-				total: E.stacked && j.value.length > 1 ? K(t) : void 0,
-				datum: t,
-				index: n
+	setup(f) {
+		S([
+			C,
+			T,
+			w
+		]);
+		let E = f, D = a(E, { stacked: () => E.stacked }), { hidden: O, width: k, legendItems: A, rowLabel: j, tooltipItems: M, tooltipTotal: N, table: P, ariaLabel: F } = D, I = _(), L = _(null);
+		function R(e, t) {
+			if (!E.gradient) return e.alpha(t, .2);
+			let [n, r] = E.stacked ? [.45, .12] : [.3, .05];
+			return {
+				type: "linear",
+				x: 0,
+				y: 0,
+				x2: 0,
+				y2: 1,
+				colorStops: [{
+					offset: 0,
+					color: e.alpha(t, n)
+				}, {
+					offset: 1,
+					color: e.alpha(t, r)
+				}]
 			};
 		}
-		return (n, r) => (m(), o(e, {
-			hidden: v(k),
-			"onUpdate:hidden": r[0] ||= (e) => f(k) ? k.value = e : null,
-			width: v(A),
-			"onUpdate:width": r[1] ||= (e) => f(A) ? A.value = e : null,
+		function z(e) {
+			let t = E.data.length > i;
+			return D.visibleKeys.value.map((n) => {
+				let i = D.colorOf.value[n], a = e.color(i), o = E.data.map((e) => r(e, n));
+				return {
+					id: n,
+					type: "line",
+					name: E.categories[n]?.name ?? n,
+					data: D.byPosition.value ? o : o.map((e, t) => [D.xNumbers.value[t], e]),
+					stack: E.stacked ? "total" : void 0,
+					smooth: E.curve === "monotone" && .4,
+					smoothMonotone: E.curve === "monotone" ? "x" : void 0,
+					step: E.curve === "step" && "middle",
+					showSymbol: !1,
+					symbol: t ? "none" : "circle",
+					symbolSize: 6,
+					lineStyle: {
+						width: E.lineWidth,
+						color: a,
+						opacity: +(E.lineWidth > 0)
+					},
+					itemStyle: {
+						color: a,
+						borderColor: e.surface,
+						borderWidth: 2
+					},
+					areaStyle: {
+						color: R(e, i),
+						opacity: 1
+					},
+					emphasis: {
+						scale: 1.4,
+						lineStyle: { width: E.lineWidth },
+						areaStyle: { color: R(e, i) }
+					},
+					sampling: t ? "lttb" : void 0,
+					progressive: t ? 4e3 : 0,
+					connectNulls: !1
+				};
+			});
+		}
+		return n({
+			host: I,
+			renderer: () => E.renderer,
+			prepare: () => c(E),
+			option: (e) => ({
+				...o(e, E, D, {
+					boundaryGap: !1,
+					pointer: "line"
+				}),
+				series: z(e)
+			}),
+			setup: (e) => t(e, (t) => s(e, t, D), (e, t, n) => {
+				let r = E.data[e];
+				r && E.tooltip && (L.value = {
+					clientX: t,
+					clientY: n,
+					title: j(e),
+					items: M(r),
+					total: E.stacked && D.visibleKeys.value.length > 1 ? N(r) : void 0,
+					datum: r,
+					index: e
+				});
+			}, () => L.value = null)
+		}), (t, n) => (g(), l(e, {
+			hidden: y(O),
+			"onUpdate:hidden": n[0] ||= (e) => m(O) ? O.value = e : null,
+			width: y(k),
+			"onUpdate:width": n[1] ||= (e) => m(k) ? k.value = e : null,
 			testid: "ac-area-chart",
-			height: u.height,
-			loading: u.loading,
-			empty: !u.data.length,
-			"empty-text": u.emptyText,
-			"empty-icon": v(x),
-			legend: u.legend,
-			"legend-items": v(P),
-			summary: v(J),
-			title: u.title,
-			description: u.description,
-			table: v(q),
-			tip: Y.value,
-			tooltip: u.tooltip
-		}, ee({
-			default: b(() => [l(v(w), {
-				data: u.data,
-				height: u.height,
-				duration: v(D),
-				"x-scale": X.value,
-				"y-domain": v(W),
-				"svg-defs": re.value,
-				padding: {
-					top: 8,
-					right: 8
-				}
-			}, {
-				default: b(() => [
-					(m(!0), c(i, null, g(ie.value, (e) => (m(), o(v(te), {
-						key: e.key,
-						x: v(L),
-						y: e.y,
-						color: e.fill,
-						"curve-type": v(t)[u.curve],
-						line: u.lineWidth > 0,
-						"line-color": e.line,
-						"line-width": u.lineWidth
-					}, null, 8, [
-						"x",
-						"y",
-						"color",
-						"curve-type",
-						"line",
-						"line-color",
-						"line-width"
-					]))), 128)),
-					l(v(S), {
-						type: "x",
-						label: u.xLabel || void 0,
-						"tick-format": v(V),
-						"tick-values": v(ne),
-						"num-ticks": v(z),
-						"min-max-ticks-only-when-width-is-less": 160,
-						"grid-line": !1,
-						"tick-line": !1,
-						"tick-text-hide-overlapping": !0
-					}, null, 8, [
-						"label",
-						"tick-format",
-						"tick-values",
-						"num-ticks"
-					]),
-					l(v(S), {
-						type: "y",
-						label: u.yLabel || void 0,
-						"tick-format": v(H),
-						"num-ticks": v(B),
-						"grid-line": u.gridLines,
-						"tick-line": !1,
-						"domain-line": !1
-					}, null, 8, [
-						"label",
-						"tick-format",
-						"num-ticks",
-						"grid-line"
-					]),
-					u.tooltip ? (m(), o(v(C), {
-						key: 0,
-						x: v(L),
-						y: u.stacked ? void 0 : v(R),
-						yStacked: u.stacked ? v(R) : void 0,
-						color: v(N),
-						circleRadius: 4,
-						strokeColor: "var(--color-surface)",
-						strokeWidth: 2,
-						hideWhenFarFromPointer: !1,
-						duration: 0,
-						onCrosshairMove: ae
-					}, null, 8, [
-						"x",
-						"y",
-						"yStacked",
-						"color"
-					])) : s("", !0)
-				]),
-				_: 1
-			}, 8, [
-				"data",
-				"height",
-				"duration",
-				"x-scale",
-				"y-domain",
-				"svg-defs"
-			])]),
+			height: f.height,
+			loading: f.loading,
+			empty: !f.data.length,
+			"empty-text": f.emptyText,
+			"empty-icon": y(x),
+			legend: f.legend,
+			"legend-items": y(A),
+			summary: y(F),
+			title: f.title,
+			description: f.description,
+			table: y(P),
+			tip: L.value,
+			tooltip: f.tooltip
+		}, d({
+			default: b(() => [u("div", {
+				ref_key: "host",
+				ref: I,
+				class: "size-full"
+			}, null, 512)]),
 			_: 2
-		}, [n.$slots.tooltip ? {
+		}, [t.$slots.tooltip ? {
 			name: "tooltip",
-			fn: b((e) => [_(n.$slots, "tooltip", p(d(e)))]),
+			fn: b((e) => [v(t.$slots, "tooltip", h(p(e)))]),
 			key: "0"
 		} : void 0]), 1032, [
 			"hidden",

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

@@ -5,10 +5,12 @@ export interface Props {
     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. */
+    /** Diameter: `xs` 20px, `small` 24px, `normal` 32px, `medium` 40px, `large` 48px. */
+    size?: "xs" | "small" | "normal" | "medium" | "large";
+    /** `circle` for people, `square` (4px corners) for organisations, teams and products. Defaults to `square` for an organisation. */
     shape?: "circle" | "square";
+    /** `organization` shows cloud-ui's org icon when there's no image: a white building on a primary gradient. */
+    kind?: "person" | "organization";
     /** 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. */
@@ -16,11 +18,12 @@ export interface Props {
 }
 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";
+    size: "xs" | "small" | "normal" | "medium" | "large";
     status: "online" | "away" | "busy" | "offline";
     alt: string;
     imgUrl: string;
     shape: "circle" | "square";
+    kind: "person" | "organization";
     overflowCount: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;