@ac-design/design-system 2.2.1 → 2.3.0

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

@@ -1,12 +1,15 @@
 import { fixedFrame as e } from "./fixedFrame.js";
-import { Fragment as t, Teleport as n, Transition as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, mergeModels as d, mergeProps as f, nextTick as p, normalizeClass as m, normalizeStyle as ee, onBeforeUnmount as te, onMounted as ne, openBlock as h, ref as g, renderList as _, toDisplayString as v, unref as y, useAttrs as re, useId as ie, useModel as b, watch as ae, withCtx as oe } from "vue";
-import { Clock as se, X as ce } from "@lucide/vue";
+import { Fragment as t, Teleport as n, Transition as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createVNode as l, defineComponent as u, mergeModels as d, mergeProps as f, nextTick as p, normalizeClass as m, onBeforeUnmount as ee, onMounted as te, openBlock as h, ref as g, renderList as _, renderSlot as v, toDisplayString as y, unref as b, useAttrs as ne, useId as re, useModel as x, watch as ie, withCtx as ae } from "vue";
+import { Clock as oe, X as se } from "@lucide/vue";
 //#region src/lib/components/AcTimePicker.vue?vue&type=script&setup=true&lang.ts
-var le = ["for"], ue = {
-	key: 0,
+var ce = ["for"], le = { key: 0 }, ue = {
+	key: 1,
 	class: "text-danger",
 	"aria-hidden": "true"
-}, de = { class: "relative" }, fe = [
+}, de = {
+	key: 2,
+	class: "relative"
+}, fe = [
 	"id",
 	"disabled",
 	"aria-expanded",
@@ -14,24 +17,30 @@ var le = ["for"], ue = {
 	"aria-describedby",
 	"aria-invalid",
 	"aria-required"
-], pe = ["aria-label"], me = ["name", "value"], he = ["aria-label"], ge = { class: "flex h-48 min-h-0 shrink-0 items-stretch justify-center gap-1" }, _e = {
+], pe = ["aria-label"], me = [
+	"role",
+	"aria-modal",
+	"aria-label",
+	"aria-describedby",
+	"inert"
+], he = { class: "flex h-48 min-h-0 shrink-0 items-stretch justify-center gap-1" }, ge = {
 	key: 0,
 	class: "mx-2 mt-6 h-32 w-px shrink-0 self-center bg-border",
 	"aria-hidden": "true"
-}, ve = {
+}, _e = {
 	key: 1,
 	class: "mt-6 self-center font-bold text-heading/50",
 	"aria-hidden": "true"
-}, ye = ["data-col"], be = {
+}, ve = ["data-col"], ye = {
 	class: "mb-2 text-xm font-bold tracking-wider text-heading/50 uppercase",
 	"aria-hidden": "true"
-}, xe = ["aria-label", "onKeydown"], Se = { class: "flex w-full flex-col items-center py-20" }, Ce = [
+}, be = ["aria-label", "onKeydown"], xe = { class: "flex w-full flex-col items-center py-20" }, Se = [
 	"data-value",
 	"tabindex",
 	"aria-selected",
 	"aria-disabled",
 	"onClick"
-], we = { class: "mt-4 flex shrink-0 justify-center gap-2 border-t border-border pt-4" }, Te = ["disabled"], x = 86399, S = /*@__PURE__*/ u({
+], Ce = { class: "mt-4 flex shrink-0 justify-center gap-2 border-t border-border pt-4" }, we = ["disabled"], Te = ["name", "value"], S = 86399, C = /*@__PURE__*/ u({
 	inheritAttrs: !1,
 	__name: "AcTimePicker",
 	props: /*@__PURE__*/ d({
@@ -60,7 +69,11 @@ var le = ["for"], ue = {
 		errorMsg: { default: "" },
 		hint: { default: "" },
 		size: { default: "normal" },
-		name: { default: "" }
+		name: { default: "" },
+		inline: {
+			type: Boolean,
+			default: !1
+		}
 	}, {
 		modelValue: { default: null },
 		modelModifiers: {},
@@ -72,18 +85,18 @@ var le = ["for"], ue = {
 	}),
 	emits: ["update:modelValue", "update:open"],
 	setup(u, { expose: d }) {
-		let S = u, C = b(u, "modelValue"), w = b(u, "open"), Ee = /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/, T = ie(), E = re(), De = i(() => ({
-			class: E.class,
-			style: E.style
-		})), Oe = i(() => {
-			let { class: e, style: t, ...n } = E;
+		let C = u, w = x(u, "modelValue"), T = x(u, "open"), Ee = /^(\d{1,2}):(\d{2})(?::(\d{2}))?$/, E = re(), D = ne(), De = i(() => ({
+			class: D.class,
+			style: D.style
+		})), O = i(() => {
+			let { class: e, style: t, ...n } = D;
 			return n;
-		}), D = `${T}-label`, O = `${T}-value`, k = `${T}-msg`, A = `${T}-hint`, j = g(null), M = g(null), N = g(null), P = g({
+		}), k = `${E}-label`, A = `${E}-value`, j = `${E}-msg`, M = `${E}-hint`, N = g(null), P = g(null), F = g(null), I = g({
 			left: 0,
 			maxHeight: 400,
 			minWidth: 0
-		}), F = g(!1), I = i(() => w.value || F.value), L = i(() => G(C.value)), R = i(() => G(S.min) ?? 0), z = i(() => G(S.max) ?? x), B = i(() => L.value === null ? null : K(L.value)), V = i(() => S.hourCycle === 12), H = i(() => L.value === null ? "" : Pe(L.value)), ke = i(() => [S.hint && A, S.errorMsg && k].filter(Boolean).join(" ") || void 0), Ae = i(() => S.label ? `${S.label}: choose time` : "Choose time"), je = i(() => q(Ie())), Me = i(() => {
-			let e = B.value, t = e?.h ?? null, n = e?.m ?? null, r = t === null ? 0 : t >= 12 ? 12 : 0, i = [], a = V.value ? [
+		}), L = g(!1), Oe = i(() => T.value || L.value), R = i(() => U(w.value)), z = i(() => U(C.min) ?? 0), ke = i(() => U(C.max) ?? S), Ae = i(() => R.value === null ? null : W(R.value)), B = i(() => C.hourCycle === 12), je = i(() => R.value === null ? "" : Le(R.value)), Me = i(() => [C.hint && M, C.errorMsg && j].filter(Boolean).join(" ") || void 0), Ne = i(() => C.label ? `${C.label}: choose time` : "Choose time"), Pe = i(() => G(ze())), Fe = i(() => {
+			let e = Ae.value, t = e?.h ?? null, n = e?.m ?? null, r = t === null ? 0 : t >= 12 ? 12 : 0, i = [], a = B.value ? [
 				0,
 				1,
 				2,
@@ -96,7 +109,7 @@ var le = ["for"], ue = {
 				9,
 				10,
 				11
-			].map((e) => e + r) : W(0, 23, 1);
+			].map((e) => e + r) : H(0, 23, 1);
 			i.push({
 				unit: "h",
 				heading: "Hrs",
@@ -104,39 +117,39 @@ var le = ["for"], ue = {
 				selected: t,
 				cells: a.map((e) => ({
 					value: e,
-					text: U(V.value ? e % 12 || 12 : e),
-					disabled: !J(e * 3600, e * 3600 + 3599)
+					text: V(B.value ? e % 12 || 12 : e),
+					disabled: !K(e * 3600, e * 3600 + 3599)
 				}))
 			});
-			let o = t ?? Fe();
+			let o = t ?? Re();
 			if (i.push({
 				unit: "m",
 				heading: "Min",
 				name: "Minutes",
 				selected: n,
-				cells: W(0, 59, Math.max(1, S.minuteStep)).map((e) => {
+				cells: H(0, 59, Math.max(1, C.minuteStep)).map((e) => {
 					let t = o * 3600 + e * 60;
 					return {
 						value: e,
-						text: U(e),
-						disabled: !J(t, S.showSeconds ? t + 59 : t)
+						text: V(e),
+						disabled: !K(t, C.showSeconds ? t + 59 : t)
 					};
 				})
-			}), S.showSeconds) {
+			}), C.showSeconds) {
 				let t = n ?? 0;
 				i.push({
 					unit: "s",
 					heading: "Sec",
 					name: "Seconds",
 					selected: e?.s ?? null,
-					cells: W(0, 59, 1).map((e) => ({
+					cells: H(0, 59, 1).map((e) => ({
 						value: e,
-						text: U(e),
-						disabled: !q(o * 3600 + t * 60 + e)
+						text: V(e),
+						disabled: !G(o * 3600 + t * 60 + e)
 					}))
 				});
 			}
-			return V.value && i.push({
+			return B.value && i.push({
 				unit: "p",
 				heading: "AM/PM",
 				name: "AM or PM",
@@ -144,23 +157,23 @@ var le = ["for"], ue = {
 				cells: [{
 					value: 0,
 					text: "AM",
-					disabled: !J(0, 43199)
+					disabled: !K(0, 43199)
 				}, {
 					value: 12,
 					text: "PM",
-					disabled: !J(43200, x)
+					disabled: !K(43200, S)
 				}]
 			}), i;
 		});
-		function U(e) {
+		function V(e) {
 			return String(e).padStart(2, "0");
 		}
-		function W(e, t, n) {
+		function H(e, t, n) {
 			let r = [];
 			for (let i = e; i <= t; i += n) r.push(i);
 			return r;
 		}
-		function G(e) {
+		function U(e) {
 			let t = e ? Ee.exec(e.trim()) : null;
 			if (!t) return null;
 			let [n, r, i] = [
@@ -170,63 +183,64 @@ var le = ["for"], ue = {
 			];
 			return n > 23 || r > 59 || i > 59 ? null : n * 3600 + r * 60 + i;
 		}
-		function K(e) {
+		function W(e) {
 			return {
 				h: Math.floor(e / 3600),
 				m: Math.floor(e % 3600 / 60),
 				s: e % 60
 			};
 		}
-		function Ne(e) {
-			let { h: t, m: n, s: r } = K(e);
-			return S.showSeconds ? `${U(t)}:${U(n)}:${U(r)}` : `${U(t)}:${U(n)}`;
+		function Ie(e) {
+			let { h: t, m: n, s: r } = W(e);
+			return C.showSeconds ? `${V(t)}:${V(n)}:${V(r)}` : `${V(t)}:${V(n)}`;
 		}
-		function Pe(e) {
-			let { h: t, m: n, s: r } = K(e), i = S.showSeconds ? `${U(n)}:${U(r)}` : U(n);
-			return V.value ? `${U(t % 12 || 12)}:${i} ${t >= 12 ? "PM" : "AM"}` : `${U(t)}:${i}`;
+		function Le(e) {
+			let { h: t, m: n, s: r } = W(e), i = C.showSeconds ? `${V(n)}:${V(r)}` : V(n);
+			return B.value ? `${V(t % 12 || 12)}:${i} ${t >= 12 ? "PM" : "AM"}` : `${V(t)}:${i}`;
 		}
-		function q(e) {
-			return e >= R.value && e <= z.value;
+		function G(e) {
+			return e >= z.value && e <= ke.value;
 		}
-		function J(e, t) {
-			return t >= R.value && e <= z.value;
+		function K(e, t) {
+			return t >= z.value && e <= ke.value;
 		}
-		function Fe() {
-			return Math.floor(R.value / 3600);
+		function Re() {
+			return Math.floor(z.value / 3600);
 		}
-		function Ie() {
-			let e = /* @__PURE__ */ new Date(), t = Math.max(1, S.minuteStep), n = Math.floor(e.getMinutes() / t) * t;
-			return e.getHours() * 3600 + n * 60 + (S.showSeconds ? e.getSeconds() : 0);
+		function ze() {
+			let e = /* @__PURE__ */ new Date(), t = Math.max(1, C.minuteStep), n = Math.floor(e.getMinutes() / t) * t;
+			return e.getHours() * 3600 + n * 60 + (C.showSeconds ? e.getSeconds() : 0);
 		}
-		function Le(e) {
-			if (q(e) && Re(e)) return e;
-			let { h: t } = K(e), n = Math.max(1, S.minuteStep) * 60, r = [];
-			for (let e = t * 3600; e < (t + 1) * 3600; e += n) if (S.showSeconds) for (let t = 0; t < 60; t++) r.push(e + t);
+		function Be(e) {
+			if (G(e) && Ve(e)) return e;
+			let { h: t } = W(e), n = Math.max(1, C.minuteStep) * 60, r = [];
+			for (let e = t * 3600; e < (t + 1) * 3600; e += n) if (C.showSeconds) for (let t = 0; t < 60; t++) r.push(e + t);
 			else r.push(e);
-			let i = r.filter(q);
+			let i = r.filter(G);
 			return i.length ? i.reduce((t, n) => Math.abs(n - e) < Math.abs(t - e) ? n : t) : null;
 		}
-		function Re(e) {
-			let { m: t, s: n } = K(e);
-			return t % Math.max(1, S.minuteStep) === 0 && (S.showSeconds || n === 0);
+		function Ve(e) {
+			let { m: t, s: n } = W(e);
+			return t % Math.max(1, C.minuteStep) === 0 && (C.showSeconds || n === 0);
 		}
-		function ze(e, t) {
-			let { h: n, m: r, s: i } = B.value ?? K(Le(R.value) ?? R.value);
+		function He(e, t) {
+			if (C.disabled) return;
+			let { h: n, m: r, s: i } = Ae.value ?? W(Be(z.value) ?? z.value);
 			e === "h" ? n = t : e === "m" ? r = t : e === "s" ? i = t : n = n % 12 + t;
-			let a = Le(n * 3600 + r * 60 + (S.showSeconds ? i : 0));
-			a !== null && (C.value = Ne(a));
+			let a = Be(n * 3600 + r * 60 + (C.showSeconds ? i : 0));
+			a !== null && (w.value = Ie(a));
 		}
-		function Be() {
-			C.value = Ne(Ie()), p(() => Z("smooth"));
+		function Ue() {
+			C.disabled || (w.value = Ie(ze()), p(() => X("smooth")));
 		}
-		function Ve() {
-			C.value = null, M.value?.focus();
+		function We() {
+			w.value = null, P.value?.focus();
 		}
-		function Y() {
-			let t = M.value;
+		function q() {
+			let t = P.value;
 			if (!t) return;
-			let n = t.getBoundingClientRect(), r = e(), i = N.value?.offsetWidth ?? 240, a = N.value?.offsetHeight ?? 320, o = r.bottom - n.bottom - 6 - 8, s = n.top - r.top - 6 - 8, c = o < a && s > o, l = Math.max(8, Math.min(n.left - r.left, r.width - i - 8)), u = Math.min(n.width, 448);
-			P.value = c ? {
+			let n = t.getBoundingClientRect(), r = e(), i = F.value?.offsetWidth ?? 240, a = F.value?.offsetHeight ?? 320, o = r.bottom - n.bottom - 6 - 8, s = n.top - r.top - 6 - 8, c = o < a && s > o, l = Math.max(8, Math.min(n.left - r.left, r.width - i - 8)), u = Math.min(n.width, 448);
+			I.value = c ? {
 				bottom: r.bottom - n.top + 6,
 				left: l,
 				maxHeight: Math.max(200, s),
@@ -238,18 +252,18 @@ var le = ["for"], ue = {
 				minWidth: u
 			};
 		}
-		function He() {
-			S.disabled || w.value || (w.value = !0);
+		function Ge() {
+			C.disabled || T.value || (T.value = !0);
 		}
-		function X(e = !0) {
-			w.value && (w.value = !1, e && M.value?.focus());
+		function J(e = !0) {
+			T.value && (T.value = !1, e && P.value?.focus());
 		}
-		async function Ue() {
-			Y(), Qe(), await p(), Y(), Z("instant"), Ge(0);
+		async function Y() {
+			q(), $e(), await p(), q(), X("instant"), Z(0);
 		}
-		function Z(e) {
+		function X(e) {
 			let t = e === "smooth" && !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-			N.value?.querySelectorAll("[role=listbox]").forEach((e) => {
+			F.value?.querySelectorAll("[role=listbox]").forEach((e) => {
 				let n = e.querySelector("[aria-selected=true]") ?? e.querySelector("[aria-disabled=false]");
 				n && e.scrollTo({
 					top: n.offsetTop - (e.clientHeight - n.offsetHeight) / 2,
@@ -257,22 +271,22 @@ var le = ["for"], ue = {
 				});
 			});
 		}
-		function We(e) {
-			return [...N.value?.querySelectorAll(`[data-col="${e}"] [role=option]`) ?? []];
+		function Ke(e) {
+			return [...F.value?.querySelectorAll(`[data-col="${e}"] [role=option]`) ?? []];
 		}
-		function Ge(e) {
-			let t = We(e);
+		function Z(e) {
+			let t = Ke(e);
 			(t.find((e) => e.tabIndex === 0) ?? t[0])?.focus({ preventScroll: !0 });
 		}
-		function Ke(e, t) {
+		function qe(e, t) {
 			return (e.cells.find((t) => t.value === e.selected) ?? e.cells.find((e) => !e.disabled)) === t ? 0 : -1;
 		}
-		function qe(e, t, n) {
-			n.disabled || (ze(t.unit, n.value), p(() => {
-				Z("smooth"), We(e).find((e) => e.tabIndex === 0)?.focus({ preventScroll: !0 });
+		function Je(e, t, n) {
+			n.disabled || (He(t.unit, n.value), p(() => {
+				X("smooth"), Ke(e).find((e) => e.tabIndex === 0)?.focus({ preventScroll: !0 });
 			}));
 		}
-		function Je(e, t, n) {
+		function Ye(e, t, n) {
 			let r = n.cells.filter((e) => !e.disabled);
 			if (!r.length) return;
 			let i = r.findIndex((e) => e.value === n.selected), a = {
@@ -286,171 +300,189 @@ var le = ["for"], ue = {
 			if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
 				e.preventDefault();
 				let n = t + (e.key === "ArrowRight" ? 1 : -1);
-				n >= 0 && n < Me.value.length && Ge(n);
+				n >= 0 && n < Fe.value.length && Z(n);
 				return;
 			}
 			if (e.key === "Enter") {
 				e.preventDefault();
 				let t = n.cells.find((t) => String(t.value) === e.target.dataset.value);
-				t && !t.disabled && ze(n.unit, t.value), X();
+				t && !t.disabled && He(n.unit, t.value), J();
 				return;
 			}
 			if (!(e.key in a)) return;
 			e.preventDefault();
 			let o = r[Math.max(0, Math.min(r.length - 1, a[e.key]))];
-			qe(t, n, o);
+			Je(t, n, o);
 		}
-		function Ye(e) {
+		function Xe(e) {
+			if (C.inline) return;
 			if (e.key === "Escape") {
-				e.preventDefault(), e.stopPropagation(), X();
+				e.preventDefault(), e.stopPropagation(), J();
 				return;
 			}
-			if (e.key !== "Tab" || !N.value) return;
-			let t = [...N.value.querySelectorAll("button:not([disabled])")].filter((e) => e.tabIndex >= 0);
+			if (e.key !== "Tab" || !F.value) return;
+			let t = [...F.value.querySelectorAll("button:not([disabled])")].filter((e) => e.tabIndex >= 0);
 			if (!t.length) return;
 			let n = t[0], r = t[t.length - 1];
 			e.shiftKey && document.activeElement === n ? (e.preventDefault(), r.focus()) : !e.shiftKey && document.activeElement === r && (e.preventDefault(), n.focus());
 		}
-		function Xe(e) {
-			(e.key === "ArrowDown" || e.key === "ArrowUp" && e.altKey) && (e.preventDefault(), He());
-		}
 		function Ze(e) {
+			(e.key === "ArrowDown" || e.key === "ArrowUp" && e.altKey) && (e.preventDefault(), Ge());
+		}
+		function Qe(e) {
 			let t = e.target;
-			j.value?.contains(t) || N.value?.contains(t) || X(!1);
+			N.value?.contains(t) || F.value?.contains(t) || J(!1);
 		}
 		function Q(e) {
-			e?.target instanceof Node && N.value?.contains(e.target) || Y();
+			e?.target instanceof Node && F.value?.contains(e.target) || q();
 		}
-		function Qe() {
-			document.addEventListener("pointerdown", Ze, !0), window.addEventListener("scroll", Q, !0), window.addEventListener("resize", Q);
+		function $e() {
+			document.addEventListener("pointerdown", Qe, !0), window.addEventListener("scroll", Q, !0), window.addEventListener("resize", Q);
 		}
 		function $() {
-			document.removeEventListener("pointerdown", Ze, !0), window.removeEventListener("scroll", Q, !0), window.removeEventListener("resize", Q);
+			document.removeEventListener("pointerdown", Qe, !0), window.removeEventListener("scroll", Q, !0), window.removeEventListener("resize", Q);
 		}
-		return ae(w, (e) => e ? Ue() : $()), ne(() => {
-			w.value && Ue();
-		}), te($), d({ focus: () => M.value?.focus() }), (e, i) => (h(), s("div", f({
+		async function et() {
+			await p(), X("instant");
+		}
+		return ie(T, (e) => e ? Y() : $()), ie(w, () => C.inline && p(() => X("smooth"))), te(() => {
+			C.inline ? X("instant") : T.value && Y();
+		}), ee($), d({
+			focus: () => C.inline ? Z(0) : P.value?.focus(),
+			scrollToSelected: et
+		}), (e, i) => (h(), s("div", f({
 			ref_key: "root",
-			ref: j
+			ref: N
 		}, De.value, {
 			class: ["w-full", u.disabled && "opacity-50"],
 			"data-ac-ds": "",
 			"data-testid": "ac-time-picker"
 		}), [
-			u.label ? (h(), s("label", {
+			u.label || e.$slots["label-icon"] || e.$slots["label-extra"] ? (h(), s("label", {
 				key: 0,
-				id: D,
-				for: `${y(T)}-trigger`,
+				id: k,
+				for: u.inline ? void 0 : `${b(E)}-trigger`,
 				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
-			}, [c("span", null, v(u.label), 1), u.required ? (h(), s("span", ue, "*")) : o("", !0)], 8, le)) : o("", !0),
+			}, [
+				v(e.$slots, "label-icon"),
+				u.label ? (h(), s("span", le, y(u.label), 1)) : o("", !0),
+				v(e.$slots, "label-extra"),
+				u.required ? (h(), s("span", ue, "*")) : o("", !0)
+			], 8, ce)) : o("", !0),
 			u.hint ? (h(), s("p", {
 				key: 1,
-				id: A,
+				id: M,
 				class: "mb-2 text-base text-muted"
-			}, v(u.hint), 1)) : o("", !0),
-			c("div", de, [c("button", f({
-				id: `${y(T)}-trigger`,
+			}, y(u.hint), 1)) : o("", !0),
+			u.inline ? o("", !0) : (h(), s("div", de, [c("button", f({
+				id: `${b(E)}-trigger`,
 				ref_key: "trigger",
-				ref: M
-			}, Oe.value, {
+				ref: P
+			}, O.value, {
 				type: "button",
 				disabled: u.disabled,
 				"aria-haspopup": "dialog",
-				"aria-expanded": w.value,
-				"aria-labelledby": u.label ? `${D} ${O}` : O,
-				"aria-describedby": ke.value,
+				"aria-expanded": T.value,
+				"aria-labelledby": u.label || e.$slots["label-icon"] || e.$slots["label-extra"] ? `${k} ${A}` : A,
+				"aria-describedby": Me.value,
 				"aria-invalid": !!u.errorMsg || void 0,
 				"aria-required": u.required || void 0,
 				class: ["flex w-full items-center rounded-10 border bg-background text-left text-base font-normal text-heading transition-[color,background-color,border-color,box-shadow] duration-200 outline-none disabled:cursor-not-allowed", [
 					u.size === "small" ? "h-9 pl-3" : "h-10.5 pl-4",
-					u.clearable && C.value ? "pr-20" : "pr-10",
+					u.clearable && w.value ? "pr-20" : "pr-10",
 					u.disabled ? "" : "cursor-pointer hover:bg-accent-hover",
-					u.errorMsg ? ["border-danger/60", I.value && "border-danger shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]"] : I.value ? "focus-ring" : ["border-border", !u.disabled && "hover:border-accent-active"]
+					u.errorMsg ? ["border-danger/60", Oe.value && "border-danger shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]"] : Oe.value ? "focus-ring" : ["border-border", !u.disabled && "hover:border-accent-active"]
 				]],
-				onClick: i[0] ||= (e) => w.value ? X() : He(),
-				onKeydown: Xe,
-				onFocus: i[1] ||= (e) => F.value = !0,
-				onBlur: i[2] ||= (e) => F.value = !1
+				onClick: i[0] ||= (e) => T.value ? J() : Ge(),
+				onKeydown: Ze,
+				onFocus: i[1] ||= (e) => L.value = !0,
+				onBlur: i[2] ||= (e) => L.value = !1
 			}), [c("span", {
-				id: O,
-				class: m(["truncate tabular-nums", !H.value && "text-muted/80"])
-			}, v(H.value || C.value || u.placeholder), 3)], 16, fe), c("span", { class: m(["pointer-events-none absolute inset-y-0 flex items-center gap-4 text-muted", u.size === "small" ? "right-3" : "right-4"]) }, [u.clearable && C.value && !u.disabled ? (h(), s("button", {
+				id: A,
+				class: m(["truncate tabular-nums", !je.value && "text-muted/80"])
+			}, y(je.value || w.value || u.placeholder), 3)], 16, fe), c("span", { class: m(["pointer-events-none absolute inset-y-0 flex items-center gap-4 text-muted", u.size === "small" ? "right-3" : "right-4"]) }, [u.clearable && w.value && !u.disabled ? (h(), s("button", {
 				key: 0,
 				type: "button",
 				class: "pointer-events-auto inline-flex cursor-pointer items-center justify-center rounded-full p-1 transition-colors duration-200 hover:bg-accent-hover hover:text-primary active:bg-accent-active focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
 				"aria-label": u.label ? `Clear ${u.label}` : "Clear",
-				onClick: Ve
-			}, [l(y(ce), {
+				onClick: We
+			}, [l(b(se), {
 				class: "size-4",
 				"aria-hidden": "true"
-			})], 8, pe)) : o("", !0), l(y(se), {
-				class: m(["size-4", w.value && "text-heading"]),
+			})], 8, pe)) : o("", !0), l(b(oe), {
+				class: m(["size-4", T.value && "text-heading"]),
 				"aria-hidden": "true"
-			}, null, 8, ["class"])], 2)]),
-			u.errorMsg ? (h(), s("p", {
-				key: 2,
-				id: k,
-				class: "mt-1 text-base text-danger-strong",
-				role: "alert"
-			}, v(u.errorMsg), 1)) : o("", !0),
-			u.name ? (h(), s("input", {
-				key: 3,
-				type: "hidden",
-				name: u.name,
-				value: C.value ?? ""
-			}, null, 8, me)) : o("", !0),
-			(h(), a(n, { to: "body" }, [l(r, {
+			}, null, 8, ["class"])], 2)])),
+			(h(), a(n, {
+				to: "body",
+				disabled: u.inline
+			}, [l(r, {
 				"enter-active-class": "transition duration-150 ease-out motion-reduce:transition-opacity",
 				"enter-from-class": "opacity-0 scale-95",
 				"leave-active-class": "transition duration-100 ease-in",
 				"leave-to-class": "opacity-0"
 			}, {
-				default: oe(() => [w.value ? (h(), s("div", {
+				default: ae(() => [T.value || u.inline ? (h(), s("div", f({
 					key: 0,
 					ref_key: "panel",
-					ref: N,
-					role: "dialog",
-					"aria-modal": "true",
-					"aria-label": Ae.value,
-					class: "fixed z-[90] flex max-w-[calc(100vw-16px)] flex-col overflow-hidden rounded-10 border border-border bg-surface p-3 shadow-sm",
-					style: ee({
-						top: P.value.top === void 0 ? void 0 : `${P.value.top}px`,
-						bottom: P.value.bottom === void 0 ? void 0 : `${P.value.bottom}px`,
-						left: `${P.value.left}px`,
-						maxHeight: `${P.value.maxHeight}px`,
-						minWidth: `${P.value.minWidth}px`
-					}),
+					ref: F,
+					role: u.inline ? "group" : "dialog",
+					"aria-modal": u.inline ? void 0 : "true",
+					"aria-label": Ne.value,
+					"aria-describedby": u.inline ? Me.value : void 0,
+					inert: u.inline && u.disabled
+				}, u.inline ? O.value : void 0, {
+					class: ["flex flex-col overflow-hidden p-3", !u.inline && "fixed z-[90] max-w-[calc(100vw-16px)] rounded-10 border border-border bg-surface shadow-sm"],
+					style: u.inline ? void 0 : {
+						top: I.value.top === void 0 ? void 0 : `${I.value.top}px`,
+						bottom: I.value.bottom === void 0 ? void 0 : `${I.value.bottom}px`,
+						left: `${I.value.left}px`,
+						maxHeight: `${I.value.maxHeight}px`,
+						minWidth: `${I.value.minWidth}px`
+					},
 					"data-ac-ds": "",
 					"data-testid": "ac-time-picker-panel",
-					onKeydown: Ye
-				}, [c("div", ge, [(h(!0), s(t, null, _(Me.value, (e, n) => (h(), s(t, { key: e.unit }, [e.unit === "p" ? (h(), s("span", _e)) : n > 0 ? (h(), s("span", ve, ":")) : o("", !0), c("div", {
+					onKeydown: Xe
+				}), [c("div", he, [(h(!0), s(t, null, _(Fe.value, (e, n) => (h(), s(t, { key: e.unit }, [e.unit === "p" ? (h(), s("span", ge)) : n > 0 ? (h(), s("span", _e, ":")) : o("", !0), c("div", {
 					class: "flex h-full min-w-14 flex-1 flex-col items-center",
 					"data-col": n
-				}, [c("span", be, v(e.heading), 1), c("div", {
+				}, [c("span", ye, y(e.heading), 1), c("div", {
 					role: "listbox",
 					"aria-label": e.name,
 					class: "relative min-h-0 w-full flex-1 scroll-smooth overflow-y-auto [scrollbar-width:none] motion-reduce:scroll-auto [&::-webkit-scrollbar]:hidden",
-					onKeydown: (t) => Je(t, n, e)
-				}, [c("div", Se, [(h(!0), s(t, null, _(e.cells, (t) => (h(), s("button", {
+					onKeydown: (t) => Ye(t, n, e)
+				}, [c("div", xe, [(h(!0), s(t, null, _(e.cells, (t) => (h(), s("button", {
 					key: t.value,
 					type: "button",
 					"data-value": t.value,
 					role: "option",
-					tabindex: Ke(e, t),
+					tabindex: qe(e, t),
 					"aria-selected": t.value === e.selected,
 					"aria-disabled": t.disabled,
 					class: m(["inline-flex h-10 shrink-0 items-center justify-center rounded-8 tabular-nums transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset motion-reduce:transition-none", [e.unit === "p" ? "w-12 text-xs font-bold" : "w-10 text-base", t.disabled ? "cursor-not-allowed text-muted/50 line-through" : t.value === e.selected ? ["cursor-pointer bg-primary text-white", e.unit !== "p" && "scale-110 font-bold"] : "cursor-pointer text-heading hover:bg-accent-hover hover:font-bold active:bg-accent-active"]]),
-					onClick: (r) => qe(n, e, t)
-				}, v(t.text), 11, Ce))), 128))])], 40, xe)], 8, ye)], 64))), 128))]), c("div", we, [c("button", {
+					onClick: (r) => Je(n, e, t)
+				}, y(t.text), 11, Se))), 128))])], 40, be)], 8, ve)], 64))), 128))]), c("div", Ce, [c("button", {
 					type: "button",
 					class: "cursor-pointer rounded-8 bg-accent px-3 py-1.5 text-xs font-medium text-heading transition-colors duration-200 hover:bg-accent-hover active:bg-accent-active focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50",
-					disabled: !je.value,
-					onClick: Be
-				}, " Current time ", 8, Te)])], 44, he)) : o("", !0)]),
+					disabled: !Pe.value,
+					onClick: Ue
+				}, " Current time ", 8, we)])], 16, me)) : o("", !0)]),
 				_: 1
-			})]))
+			})], 8, ["disabled"])),
+			u.errorMsg ? (h(), s("p", {
+				key: 3,
+				id: j,
+				class: "mt-1 text-base text-danger-strong",
+				role: "alert"
+			}, y(u.errorMsg), 1)) : o("", !0),
+			u.name ? (h(), s("input", {
+				key: 4,
+				type: "hidden",
+				name: u.name,
+				value: w.value ?? ""
+			}, null, 8, Te)) : o("", !0)
 		], 16));
 	}
 });
 //#endregion
-export { S as default };
+export { C as default };

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

@@ -46,9 +46,15 @@ export interface Props {
     workspaces?: UserMenuWorkspace[];
     /** Heading of the workspace list. */
     workspacesLabel?: string;
+    /** Shows the name, email and avatar at the top of the menu. cloud-ui's workspace menu leaves it out and starts with the workspaces. */
+    showProfile?: boolean;
+    /** Shows the sign-out icon before `logoutLabel`. cloud-ui's workspace menu shows the text only. */
+    logoutIcon?: boolean;
 }
 type __VLS_Props = Props;
 type __VLS_Slots = {
+    /** Replaces the round avatar in the trigger, e.g. a square logo for an organisation workspace. */
+    avatar?: () => unknown;
     /** Custom rows after `items`. Give each focusable row `role="menuitem"`, `tabindex="-1"` and the `itemClass` classes; call `close()` after an action. */
     default?: (props: {
         close: () => void;
@@ -88,6 +94,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     logoutLabel: string;
     workspaces: UserMenuWorkspace[];
     workspacesLabel: string;
+    showProfile: boolean;
+    logoutIcon: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;