@ac-design/design-system 1.0.3 → 2.0.0

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

@@ -1,6 +1,6 @@
-import e from "./AcThemeMode.js";
-import t from "./AcFontScale.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 ee, nextTick as h, normalizeClass as g, normalizeStyle as te, onBeforeUnmount as ne, openBlock as _, ref as v, renderList as y, renderSlot as b, resolveDynamicComponent as x, toDisplayString as S, unref as C, useId as re, useModel as ie, watch as w, withCtx as T } from "vue";
+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";
 //#region src/lib/components/AcUserMenu.vue?vue&type=script&setup=true&lang.ts
 var se = {
@@ -12,22 +12,25 @@ var se = {
 	"aria-controls",
 	"aria-label"
 ], le = {
-	class: "inline-flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary-90 text-xs font-semibold text-primary-20 ring-1 ring-border",
+	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",
 	"aria-hidden": "true"
-}, ue = ["src"], de = { class: "hidden max-w-36 truncate text-base font-medium text-heading sm:block" }, E = {
-	class: "inline-flex size-9 shrink-0 items-center justify-center overflow-hidden rounded-full bg-primary-90 text-base font-semibold text-primary-20 ring-1 ring-border",
+}, 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 = {
+	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"
-}, D = ["src"], fe = { class: "min-w-0 flex-1" }, pe = { class: "block truncate text-base font-medium text-heading" }, me = {
+}, fe = ["src"], pe = { class: "min-w-0 flex-1" }, me = { class: "block truncate text-base font-medium text-heading" }, he = {
 	key: 0,
 	class: "block truncate text-xs text-muted"
-}, he = {
+}, ge = {
 	key: 0,
 	role: "group",
-	class: "flex flex-col gap-px p-1"
-}, ge = { class: "min-w-0 flex-1 truncate" }, _e = ["aria-labelledby"], ve = ["id"], ye = ["aria-labelledby"], be = ["id"], O = {
+	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 = {
 	role: "group",
-	class: "border-t border-border-light p-1"
-}, k = "flex h-8 w-full cursor-pointer items-center gap-2.5 rounded-6 px-2.5 text-left text-base text-body outline-none transition-colors hover:bg-surface-muted hover:text-heading focus-visible:bg-surface-muted focus-visible:text-heading aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-muted", A = "[role=\"menuitem\"]:not([aria-disabled=\"true\"]), [role=\"radio\"]", j = /*@__PURE__*/ f({
+	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({
 	__name: "AcUserMenu",
 	props: /*@__PURE__*/ m({
 		name: {},
@@ -62,137 +65,142 @@ var se = {
 		"set:theme"
 	], ["update:open"]),
 	setup(f, { emit: m }) {
-		let j = f, M = ie(f, "open"), N = m, P = p()?.appContext.components.RouterLink, F = re(), I = `${F}-trigger`, L = `${F}-menu`, R = v(null), z = v(null), B = v(!1), V = v({
+		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({
 			top: 0,
 			right: 0
-		}), H = a(() => {
+		}), U = a(() => {
 			let e = j.name.trim().split(/[\s._-]+/).filter(Boolean);
 			return e.length ? (e[0].charAt(0) + (e.length > 1 ? e[e.length - 1].charAt(0) : "")).toUpperCase() : "?";
-		}), U = a(() => !!j.avatarUrl && !B.value);
-		function W(e) {
-			return e.to && P && !e.disabled ? P : e.to || e.href ? "a" : "button";
+		}), W = a(() => !!j.avatarUrl && !V.value);
+		function G(e) {
+			return e.to && F && !e.disabled ? F : e.to || e.href ? "a" : "button";
 		}
-		function xe(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) } : {
+		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) } : {
 				type: "button",
 				"aria-disabled": e.disabled ? "true" : void 0
 			};
 		}
-		function G() {
-			return [...z.value?.querySelectorAll(A) ?? []];
+		function K() {
+			return [...B.value?.querySelectorAll(A) ?? []];
 		}
-		function K(e) {
-			let t = G();
+		function q(e) {
+			let t = K();
 			t.length && t[(e + t.length) % t.length].focus();
 		}
-		function q() {
-			let e = R.value;
+		function J() {
+			let e = z.value;
 			if (!e) return;
-			let t = e.getBoundingClientRect(), n = z.value?.offsetHeight ?? 320, r = Math.max(8, window.innerWidth - t.right), i = window.innerHeight - t.bottom - 6 - 8;
-			V.value = i < n && t.top > i ? {
+			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 ? {
 				bottom: window.innerHeight - t.top + 6,
-				right: r
+				right: i
 			} : {
 				top: t.bottom + 6,
-				right: r
+				right: i
 			};
 		}
-		async function J(e = "first") {
-			M.value = !0, await h(), q(), K(e === "first" ? 0 : -1);
+		async function Y(e = "first") {
+			M.value = !0, await g(), J(), q(e === "first" ? 0 : -1);
 		}
-		function Y(e = !0) {
-			M.value && (M.value = !1, e && R.value?.focus());
+		function X(e = !0) {
+			M.value && (M.value = !1, e && z.value?.focus());
 		}
-		function X(e) {
+		function we(e) {
 			[
 				"Enter",
 				" ",
 				"ArrowDown"
-			].includes(e.key) ? (e.preventDefault(), J("first")) : e.key === "ArrowUp" && (e.preventDefault(), J("last"));
+			].includes(e.key) ? (e.preventDefault(), Y("first")) : e.key === "ArrowUp" && (e.preventDefault(), Y("last"));
 		}
-		function Se(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 Ce(e) {
-			e.disabled || (N("select", e), Y());
+		function Ee(e) {
+			e.disabled || (N("select", e), X());
 		}
-		function we() {
-			N("logout"), Y(!1);
+		function De() {
+			N("logout"), X(!1);
 		}
 		function Z(e) {
 			let t = e.target;
-			R.value?.contains(t) || z.value?.contains(t) || Y(!1);
+			z.value?.contains(t) || B.value?.contains(t) || X(!1);
 		}
 		function Q() {
-			q();
+			J();
 		}
 		function $() {
 			document.removeEventListener("pointerdown", Z, !0), window.removeEventListener("scroll", Q, !0), window.removeEventListener("resize", Q);
 		}
 		return w(M, (e) => {
 			if (!e) return $();
-			document.addEventListener("pointerdown", Z, !0), window.addEventListener("scroll", Q, !0), window.addEventListener("resize", Q), h(q);
-		}), w(() => j.avatarUrl, () => B.value = !1), ne($), (a, p) => (_(), c("div", se, [l("button", {
-			id: I,
+			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,
 			ref_key: "trigger",
-			ref: R,
+			ref: z,
 			type: "button",
 			"aria-haspopup": "menu",
 			"aria-expanded": M.value,
-			"aria-controls": M.value ? L : void 0,
+			"aria-controls": M.value ? R : void 0,
 			"aria-label": `${f.name}, account menu`,
-			class: g(["group inline-flex h-8 shrink-0 cursor-pointer items-center gap-2 rounded-50 p-0.5 transition-colors hover:bg-surface-sunken focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring", [f.showName && "sm:pr-2", M.value && "bg-surface-sunken"]]),
+			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"]]),
 			"data-ac-ds": "",
 			"data-testid": "ac-user-menu-trigger",
-			onClick: p[1] ||= (e) => M.value ? Y() : J(),
-			onKeydown: X
-		}, [l("span", le, [U.value ? (_(), c("img", {
-			key: 0,
-			src: f.avatarUrl,
-			alt: "",
-			class: "size-full object-cover",
-			onError: p[0] ||= (e) => B.value = !0
-		}, null, 40, ue)) : (_(), c(n, { key: 1 }, [u(S(H.value), 1)], 64))]), f.showName ? (_(), c(n, { key: 0 }, [l("span", de, S(f.name), 1), d(C(ae), {
-			class: g(["hidden size-3.5 shrink-0 text-muted transition-transform duration-150 motion-reduce:transition-none sm:block", M.value && "rotate-180"]),
-			"aria-hidden": "true"
-		}, null, 8, ["class"])], 64)) : s("", !0)], 42, ce), (_(), o(r, { to: "body" }, [d(i, {
+			onClick: p[1] ||= (e) => M.value ? X() : Y(),
+			onKeydown: we
+		}, [
+			f.showName ? (v(), c("span", le, S(f.name), 1)) : s("", !0),
+			l("span", ue, [l("span", E, [W.value ? (v(), c("img", {
+				key: 0,
+				src: f.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), {
+				key: 1,
+				class: _(["hidden size-4 shrink-0 text-muted transition-transform duration-200 motion-reduce:transition-none sm:block", M.value && "rotate-180"]),
+				"aria-hidden": "true"
+			}, null, 8, ["class"])) : s("", !0)
+		], 42, ce), (v(), o(r, { to: "body" }, [d(i, {
 			"enter-active-class": "transition duration-150 ease-out motion-reduce:transition-none",
-			"enter-from-class": "opacity-0 -translate-y-1 scale-[0.98]",
+			"enter-from-class": "opacity-0 scale-95",
 			"leave-active-class": "transition duration-100 ease-in",
 			"leave-to-class": "opacity-0"
 		}, {
-			default: T(() => [M.value ? (_(), c("div", {
+			default: T(() => [M.value ? (v(), c("div", {
 				key: 0,
-				id: L,
+				id: R,
 				ref_key: "panel",
-				ref: z,
+				ref: B,
 				role: "menu",
-				"aria-labelledby": I,
-				class: "fixed z-[90] w-72 max-w-[calc(100vw-16px)] overflow-hidden rounded-10 border border-border bg-surface 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`
+				"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`
 				}),
 				"data-ac-ds": "",
 				"data-testid": "ac-user-menu-panel",
-				onKeydown: Se
+				onKeydown: Te
 			}, [
-				(_(), o(x(f.profileUrl ? "a" : "div"), {
+				(v(), o(x(f.profileUrl ? "a" : "div"), {
 					href: f.profileUrl || void 0,
 					role: f.profileUrl ? "menuitem" : "presentation",
 					tabindex: f.profileUrl ? -1 : void 0,
-					class: g(["flex items-center gap-3 border-b border-border-light px-3.5 py-3 outline-none", f.profileUrl && "transition-colors hover:bg-surface-muted focus-visible:bg-surface-muted"])
+					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"])
 				}, {
-					default: T(() => [l("span", E, [U.value ? (_(), c("img", {
+					default: T(() => [l("span", de, [W.value ? (v(), c("img", {
 						key: 0,
 						src: f.avatarUrl,
 						alt: "",
 						class: "size-full object-cover",
-						onError: p[2] ||= (e) => B.value = !0
-					}, null, 40, D)) : (_(), c(n, { key: 1 }, [u(S(H.value), 1)], 64))]), l("span", fe, [l("span", pe, S(f.name), 1), f.email ? (_(), c("span", me, S(f.email), 1)) : s("", !0)])]),
+						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)])]),
 					_: 1
 				}, 8, [
 					"href",
@@ -200,51 +208,51 @@ var se = {
 					"tabindex",
 					"class"
 				])),
-				f.items.length || a.$slots.default ? (_(), c("div", he, [(_(!0), c(n, null, y(f.items, (e) => (_(), o(x(W(e)), ee({ key: e.label }, { ref_for: !0 }, xe(e), {
+				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",
 					tabindex: "-1",
-					class: k,
-					onClick: (t) => Ce(e)
+					class: P,
+					onClick: (t) => Ee(e)
 				}), {
-					default: T(() => [e.icon ? (_(), o(x(e.icon), {
+					default: T(() => [e.icon ? (v(), o(x(e.icon), {
 						key: 0,
 						"aria-hidden": "true"
-					})) : s("", !0), l("span", ge, S(e.label), 1)]),
+					})) : s("", !0), l("span", _e, S(e.label), 1)]),
 					_: 2
-				}, 1040, ["onClick"]))), 128)), b(a.$slots, "default", {
-					close: Y,
-					itemClass: k
+				}, 1040, ["onClick"]))), 128)), ne(a.$slots, "default", {
+					close: X,
+					itemClass: P
 				})])) : s("", !0),
-				f.showThemeMode ? (_(), c("div", {
+				f.showThemeMode ? (v(), c("div", {
 					key: 1,
 					role: "group",
-					"aria-labelledby": `${C(F)}-theme`,
-					class: "border-t border-border-light px-3.5 py-2.5"
+					"aria-labelledby": `${C(I)}-theme`,
+					class: "mt-1 border-t border-border px-1 pt-2 pb-1"
 				}, [l("p", {
-					id: `${C(F)}-theme`,
-					class: "mb-1.5 text-xs font-medium text-label"
-				}, "Theme", 8, ve), d(e, {
+					id: `${C(I)}-theme`,
+					class: "mb-2 px-2 text-sm font-semibold tracking-[0.08em] text-muted uppercase"
+				}, "Theme", 8, ye), d(t, {
 					display: "labels",
 					"onSet:theme": p[3] ||= (e) => N("set:theme", e)
-				})], 8, _e)) : s("", !0),
-				f.showFontScale ? (_(), c("div", {
+				})], 8, ve)) : s("", !0),
+				f.showFontScale ? (v(), c("div", {
 					key: 2,
 					role: "group",
-					"aria-labelledby": `${C(F)}-scale`,
-					class: "border-t border-border-light px-3.5 py-2.5"
+					"aria-labelledby": `${C(I)}-scale`,
+					class: "mt-1 border-t border-border px-1 pt-2 pb-1"
 				}, [l("p", {
-					id: `${C(F)}-scale`,
-					class: "mb-1.5 text-xs font-medium text-label"
-				}, "Text size", 8, be), d(t, { display: "labels" })], 8, ye)) : s("", !0),
-				l("div", O, [(_(), o(x(f.logoutUrl ? "a" : "button"), {
+					id: `${C(I)}-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: g(k),
+					class: _(Se),
 					"data-ac-ds": "",
 					"data-testid": "ac-user-menu-logout",
-					onClick: we
+					onClick: De
 				}, {
 					default: T(() => [d(C(oe), { "aria-hidden": "true" }), l("span", null, S(f.logoutLabel), 1)]),
 					_: 1

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

@@ -6,17 +6,21 @@ export { default as AcAvatar } from "./AcAvatar.vue";
 export { default as AcBadge } from "./AcBadge.vue";
 export { default as AcBanner } from "./AcBanner.vue";
 export { default as AcBreadcrumb } from "./AcBreadcrumb.vue";
+export { default as AcBulkActionBar } from "./AcBulkActionBar.vue";
 export { default as AcButton } from "./AcButton.vue";
 export { default as AcButtons } from "./AcButtons.vue";
 export { default as AcCard } from "./AcCard.vue";
-export { default as AcPage } from "./AcPage.vue";
 export { default as AcCellValue } from "./AcCellValue.vue";
 export { default as AcCheckBox } from "./AcCheckBox.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 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 AcDatePicker } from "./AcDatePicker.vue";
 export { default as AcDeleteConfirmationModal } from "./AcDeleteModal.vue";
 export { default as AcDeleteModal } from "./AcDeleteModal.vue";
@@ -27,6 +31,8 @@ export { default as AcDropdownItem } from "./AcDropdownItem.vue";
 export { default as AcEmptyState } from "./AcEmptyState.vue";
 export { default as AcFeatureCard } from "./AcFeatureCard.vue";
 export { default as AcFileUpload } from "./AcFileUpload.vue";
+export { default as AcFontScale } from "./AcFontScale.vue";
+export { default as AcFooter } from "./AcFooter.vue";
 export { default as AcForm } from "./AcForm.vue";
 export { default as AcFormArray } from "./AcFormArray.vue";
 export { default as AcFormFooter } from "./AcFormFooter.vue";
@@ -37,11 +43,15 @@ export { default as AcHeaderItems } from "./AcHeaderItems.vue";
 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 AcLocaleSwitcher } from "./AcLocaleSwitcher.vue";
 export { default as AcLogo } from "./AcLogo.vue";
 export { default as AcModal } from "./AcModal.vue";
 export { default as AcNavbar } from "./AcNavbar.vue";
 export { default as AcNavbarItem } from "./AcNavbarItem.vue";
 export { default as AcNotificationMenu } from "./AcNotificationMenu.vue";
+export { default as AcNumberInput } from "./AcNumberInput.vue";
+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";
@@ -62,12 +72,14 @@ export { default as AcStatCard } from "./AcStatCard.vue";
 export { default as AcStatusBar } from "./AcStatusBar.vue";
 export { default as AcSteps } from "./AcSteps.vue";
 export { default as AcSwitch } from "./AcSwitch.vue";
+export { default as AcSwitchCard } from "./AcSwitchCard.vue";
 export { default as AcTable } from "./AcTable.vue";
 export { default as AcTabs } from "./AcTabs.vue";
 export { default as AcTag } from "./AcTag.vue";
+export { default as AcTagInput } from "./AcTagInput.vue";
 export { default as AcTextarea } from "./AcTextarea.vue";
 export { default as AcThemeMode } from "./AcThemeMode.vue";
-export { default as AcFontScale } from "./AcFontScale.vue";
+export { default as AcTimePicker } from "./AcTimePicker.vue";
 export { default as AcToaster } from "./AcToaster.vue";
 export { default as AcTooltip } from "./AcTooltip.vue";
 export { default as AcUsageCard } from "./AcUsageCard.vue";

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

@@ -0,0 +1,26 @@
+/** Colour of a status. The names match AcBadge's `color`, so `statusMeta(s).tone` can be passed straight to it. */
+export type StatusTone = "success" | "info" | "warning" | "danger" | "pending" | "default";
+/** How a raw state is shown: its colour, a human label and whether it's mid-transition. */
+export interface StatusMeta {
+    /** Colour of the badge: `success`, `info`, `warning`, `danger`, `pending` or `default` (neutral). */
+    tone: StatusTone;
+    /** Human label in sentence case, e.g. "Pending provisioning". */
+    label: string;
+    /** The resource is changing state (provisioning, deleting…); badges pulse their dot. */
+    transient: boolean;
+}
+export interface StatusMetaOptions {
+    /** Enum prefix to strip before matching, e.g. `VPC_STATE` turns `VPC_STATE_AVAILABLE` into "Available". */
+    prefix?: string;
+    /** Label to show instead of the humanized state. */
+    label?: string;
+}
+/** `"PENDING_PROVISIONING"` → `"pending_provisioning"`, `"NotReady"` → `"not_ready"`, and strips `prefix` (`VPC_STATE`). */
+export declare function normalizeState(state: string, prefix?: string): string;
+/** `"pending_provisioning"` → `"Pending provisioning"`. */
+export declare function humanizeState(key: string): string;
+/**
+ * Resolves a raw API state ("RUNNING", "VPC_STATE_AVAILABLE", "pending_provisioning", "NotReady") to a tone,
+ * a sentence-case label and whether it's transient. Unknown states are neutral, never shown as healthy.
+ */
+export declare function statusMeta(state: string | null | undefined, options?: StatusMetaOptions): StatusMeta;

package/dist/lib/components/status.js

@@ -0,0 +1,110 @@
+//#region src/lib/components/status.ts
+var e = [
+	[
+		"success",
+		!1,
+		/* @__PURE__ */ "running.active.available.connected.healthy.up.succeeded.success.successful.ready.attached.enabled.completed.complete.online.bound.in_use.paid.accepted.joined.verified.approved.open.allocated.created.in_sync.current.provisioned.synced.true".split(".")
+	],
+	[
+		"info",
+		!0,
+		/* @__PURE__ */ "provisioning.pending_provisioning.creating.starting.updating.modifying.upgrading.resizing.restarting.rebooting.attaching.detaching.migrating.in_progress.processing.importing.uploading.scaling.initializing.syncing.connecting.associating.disassociating.recycling.expanding.allocating.initial.progressing".split(".")
+	],
+	[
+		"warning",
+		!0,
+		[
+			"stopping",
+			"shutting_down",
+			"draining",
+			"powering_off"
+		]
+	],
+	[
+		"danger",
+		!0,
+		[
+			"deleting",
+			"terminating",
+			"destroying",
+			"removing",
+			"pending_delete",
+			"tearing_down"
+		]
+	],
+	[
+		"warning",
+		!1,
+		[
+			"degraded",
+			"warning",
+			"suspended",
+			"impaired",
+			"expiring",
+			"partial",
+			"overdue",
+			"out_of_sync",
+			"halted",
+			"paused"
+		]
+	],
+	[
+		"danger",
+		!1,
+		[
+			"failed",
+			"failure",
+			"error",
+			"down",
+			"unhealthy",
+			"critical",
+			"rejected",
+			"disconnected",
+			"not_connected",
+			"unreachable",
+			"expired",
+			"cancelled",
+			"canceled",
+			"not_ready",
+			"crash_loop_back_off",
+			"lost",
+			"false"
+		]
+	],
+	[
+		"pending",
+		!1,
+		[
+			"pending",
+			"queued",
+			"waiting",
+			"invited",
+			"scheduled",
+			"requested",
+			"pending_acceptance"
+		]
+	]
+], t = /* @__PURE__ */ new Map();
+for (let [n, r, i] of e) for (let e of i) t.set(e.replace(/_/g, ""), {
+	tone: n,
+	transient: r
+});
+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(/_+$/, "") : "";
+	return i && r.startsWith(`${i}_`) && (r = r.slice(i.length + 1)), r;
+}
+function r(e) {
+	if (e === "unspecified" || e === "state_unspecified") return "Unknown";
+	let t = e.replace(/_+/g, " ").trim();
+	return t ? t.charAt(0).toUpperCase() + t.slice(1) : "Unknown";
+}
+function i(e, i = {}) {
+	let a = e ? n(e, i.prefix) : "unknown", o = i.label ?? r(a), s = t.get(a.replace(/_/g, ""));
+	return {
+		tone: s?.tone ?? "default",
+		label: o,
+		transient: s?.transient ?? !1
+	};
+}
+//#endregion
+export { r as humanizeState, n as normalizeState, i as statusMeta };

package/dist/lib/composables/copyText.d.ts

@@ -1,6 +1,7 @@
 /**
  * Copies text to the clipboard. Uses the async Clipboard API, which browsers only expose on
  * HTTPS and localhost, and falls back to a hidden textarea + `execCommand("copy")` so copying
- * still works on plain-HTTP hosts such as `http://bb.test`. Throws when both are blocked.
+ * still works on plain-HTTP hosts such as `http://bb.test`, or when the API rejects (permission denied).
+ * Throws when both are blocked.
  */
 export declare function copyText(text: string): Promise<void>;

package/dist/lib/composables/copyText.js

@@ -1,9 +1,9 @@
 //#region src/lib/composables/copyText.ts
 async function e(e) {
-	if (navigator.clipboard?.writeText) {
+	if (navigator.clipboard?.writeText) try {
 		await navigator.clipboard.writeText(e);
 		return;
-	}
+	} catch {}
 	let t = document.createElement("textarea");
 	t.value = e, t.setAttribute("readonly", ""), t.style.cssText = "position:fixed;top:0;left:0;opacity:0", document.body.appendChild(t), t.select();
 	try {

package/dist/lib/composables/useApiPagination.d.ts

@@ -0,0 +1,55 @@
+import type { ComputedRef, MaybeRefOrGetter, Ref } from "vue";
+export interface UseApiPaginationOptions {
+    /** Rows per page to start with. Default 10. */
+    pageSize?: number;
+    /** The next-page token of the latest response, e.g. `() => data.value?.pagination?.nextPageToken`. An empty string means it's the last page; `undefined` (still loading) is ignored. Without it, call `setNextToken` yourself. */
+    nextToken?: MaybeRefOrGetter<string | null | undefined>;
+    /** Total rows, when the API returns one. Passed on to AcPagination's `total`; bigint is accepted. */
+    total?: MaybeRefOrGetter<number | bigint | null | undefined>;
+    /** Rows in the latest response, for the "Showing 41–60" summary when there's no total. */
+    itemsOnPage?: MaybeRefOrGetter<number | bigint | null | undefined>;
+}
+export interface ApiPaginationProps {
+    total?: number;
+    hasNext: boolean;
+    hasPrev: boolean;
+    knownPages: number[];
+    itemsOnPage?: number;
+}
+export interface ApiPagination {
+    /** The current page, from 1. Bind to AcPagination with `v-model:page`; pages without a cached token are refused. */
+    page: Ref<number>;
+    /** Rows per page. Bind with `v-model:page-size`; a change goes back to page 1 and forgets the tokens. */
+    pageSize: Ref<number>;
+    /** The token to request the current page with. Empty on page 1. */
+    pageToken: ComputedRef<string>;
+    /** Cached tokens by page number. Page 1 is always `""`. */
+    tokens: Readonly<Ref<Readonly<Record<number, string>>>>;
+    /** Pages with a cached token, so the viewer can jump to them. */
+    knownPages: ComputedRef<number[]>;
+    hasNext: ComputedRef<boolean>;
+    hasPrev: ComputedRef<boolean>;
+    /** Moves to the next page if its token is known. */
+    next: () => void;
+    /** Moves to the previous page. */
+    prev: () => void;
+    /** Moves to `page` if its token is known; returns whether it moved. */
+    goTo: (page: number) => boolean;
+    /** Goes back to page 1 and forgets every token. Call it when a filter or search changes. */
+    reset: () => void;
+    /** Records the next-page token from a response for `forPage` (default the current page). `""` marks it as the last page. */
+    setNextToken: (token: string | null | undefined, forPage?: number) => void;
+    /** AcPagination props that aren't models: `v-bind="paginationProps"`. */
+    paginationProps: ComputedRef<ApiPaginationProps>;
+}
+/**
+ * Tracks token (cursor) paging for an API that returns a next-page token instead of offsets.
+ *
+ * It doesn't fetch. Request the page with `pageSize` and `pageToken`, and feed the response's
+ * next-page token back through `nextToken` (or `setNextToken`). Each token is cached under its page
+ * number, so visited pages can be jumped to. Bind it to AcPagination:
+ * `<AcPagination v-model:page="page" v-model:page-size="pageSize" v-bind="paginationProps" />`.
+ *
+ * @param options Start page size, and getters for the response's next token, total and row count. A number sets only the page size.
+ */
+export declare function useApiPagination(options?: UseApiPaginationOptions | number): ApiPagination;