@ac-design/design-system 2.0.0 → 2.1.0

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

@@ -1,14 +1,14 @@
-import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createTextVNode as ee, createVNode as o, defineComponent as s, mergeModels as c, mergeProps as l, normalizeClass as u, onBeforeUnmount as d, openBlock as f, ref as p, renderList as te, renderSlot as ne, resolveDynamicComponent as re, toDisplayString as m, unref as h, useAttrs as g, useId as ie, useModel as ae, watch as oe, withModifiers as se } from "vue";
-import { CircleAlert as _, Minus as v, Plus as y } from "@lucide/vue";
+import { computed as e, createCommentVNode as t, createElementBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, mergeModels as o, mergeProps as s, normalizeClass as c, onBeforeUnmount as l, openBlock as u, ref as d, renderSlot as f, toDisplayString as p, unref as m, useAttrs as h, useId as g, useModel as _, watch as ee } from "vue";
+import { Minus as te, Plus as ne } from "@lucide/vue";
 //#region src/lib/components/AcNumberInput.vue?vue&type=script&setup=true&lang.ts
-var b = ["for"], x = {
+var re = ["for"], v = {
 	key: 0,
-	class: "font-normal text-muted"
-}, S = {
+	class: "text-muted"
+}, ie = {
 	key: 1,
 	class: "text-danger",
 	"aria-hidden": "true"
-}, C = ["id"], w = [
+}, y = ["id"], b = { class: "flex items-center gap-3" }, ae = [
 	"id",
 	"inputmode",
 	"value",
@@ -22,20 +22,10 @@ var b = ["for"], x = {
 	"aria-valuetext",
 	"aria-invalid",
 	"aria-describedby"
-], T = { key: 0 }, E = {
-	key: 1,
-	class: "mr-1 flex shrink-0 items-center gap-1"
-}, ce = [
-	"disabled",
-	"aria-label",
-	"aria-controls",
-	"data-testid",
-	"onPointerdown",
-	"onClick"
-], le = ["id"], D = /*@__PURE__*/ s({
+], oe = { key: 0 }, se = ["id"], x = /*@__PURE__*/ a({
 	inheritAttrs: !1,
 	__name: "AcNumberInput",
-	props: /*@__PURE__*/ c({
+	props: /*@__PURE__*/ o({
 		label: { default: "" },
 		name: { default: "" },
 		min: { default: void 0 },
@@ -45,7 +35,7 @@ var b = ["for"], x = {
 		unit: { default: "" },
 		stepButtons: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
 		holdDelay: { default: 300 },
 		holdIntervalDelay: { default: 100 },
@@ -68,184 +58,184 @@ var b = ["for"], x = {
 		modelValue: { default: null },
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ c(["change"], ["update:modelValue"]),
-	setup(s, { expose: c, emit: D }) {
-		let O = s, k = ae(s, "modelValue"), A = D, j = ie(), M = g(), N = t(() => ({
-			class: M.class,
-			style: M.style
-		})), P = t(() => {
-			let { class: e, style: t, ...n } = M;
+	emits: /*@__PURE__*/ o(["change"], ["update:modelValue"]),
+	setup(a, { expose: o, emit: x }) {
+		let S = a, C = _(a, "modelValue"), w = x, T = g(), E = h(), D = e(() => ({
+			class: E.class,
+			style: E.style
+		})), O = e(() => {
+			let { class: e, style: t, ...n } = E;
 			return n;
-		}), F = p(null), I = p(K(k.value)), L = p(!1), R, z, B = t(() => O.precision ?? pe(O.step)), V = t(() => O.min === void 0 || O.min < 0), H = t(() => O.disabled || O.readonly), U = t(() => O.min !== void 0 && k.value !== null && k.value <= O.min), W = t(() => O.max !== void 0 && k.value !== null && k.value >= O.max), ue = t(() => {
-			let e = k.value;
-			if (!L.value || e === null) return "";
-			let { min: t, max: n } = O;
+		}), k = d(null), A = d(G(C.value)), j = d(!1), M, N, P = e(() => S.precision ?? W(S.step)), F = e(() => S.min === void 0 || S.min < 0), I = e(() => S.disabled || S.readonly), L = e(() => S.min !== void 0 && C.value !== null && C.value <= S.min), R = e(() => S.max !== void 0 && C.value !== null && C.value >= S.max), z = e(() => {
+			let e = C.value;
+			if (!j.value || e === null) return "";
+			let { min: t, max: n } = S;
 			return (t === void 0 || e >= t) && (n === void 0 || e <= n) ? "" : t !== void 0 && n !== void 0 ? `Enter a value from ${t} to ${n}` : t === void 0 ? `Enter ${n} or less` : `Enter ${t} or more`;
-		}), G = t(() => O.errorMsg || ue.value), de = t(() => [O.hint && `${j}-hint`, G.value && `${j}-msg`].filter(Boolean).join(" ") || void 0), fe = t(() => k.value === null ? void 0 : [I.value, O.unit].filter(Boolean).join(" "));
-		function pe(e) {
+		}), B = e(() => S.errorMsg || z.value), V = e(() => [S.hint && `${T}-hint`, B.value && `${T}-msg`].filter(Boolean).join(" ") || void 0), H = e(() => ["inline-flex shrink-0 cursor-pointer items-center justify-center rounded-10 border border-border bg-accent text-heading transition-colors duration-200 select-none hover:bg-accent-hover active:bg-accent-active disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-accent", S.size === "small" ? "h-9 px-3" : "h-10.5 px-5"]), U = e(() => C.value === null ? void 0 : [A.value, S.unit].filter(Boolean).join(" "));
+		function W(e) {
 			let t = String(e);
 			return t.includes("e-") ? Number(t.split("e-")[1]) : t.split(".")[1]?.length ?? 0;
 		}
-		function K(e) {
+		function G(e) {
 			return e === null ? "" : String(e);
 		}
+		function K(e) {
+			return Number(e.toFixed(P.value));
+		}
 		function q(e) {
-			return Number(e.toFixed(B.value));
+			return S.min !== void 0 && e < S.min ? S.min : S.max !== void 0 && e > S.max ? S.max : e;
 		}
 		function J(e) {
-			return O.min !== void 0 && e < O.min ? O.min : O.max !== void 0 && e > O.max ? O.max : e;
-		}
-		function Y(e) {
 			if (e === "" || e === "-" || e === "." || e === "-.") return null;
 			let t = Number(e);
 			return Number.isNaN(t) ? null : t;
 		}
-		function X(e) {
-			let t = e !== k.value;
-			k.value = e, I.value = K(e), t && A("change", e);
+		function Y(e) {
+			let t = e !== C.value;
+			C.value = e, A.value = G(e), t && w("change", e);
 		}
-		function Z(e, t = 1) {
-			H.value || X(J(q((k.value ?? 0) + e * O.step * t)));
+		function X(e, t = 1) {
+			I.value || Y(q(K((C.value ?? 0) + e * S.step * t)));
 		}
-		function me(e) {
+		function ce(e) {
 			let t = e.target;
-			if (!RegExp(`^${V.value ? "-?" : ""}\\d*${B.value > 0 ? "(\\.\\d*)?" : ""}$`).test(t.value)) {
-				t.value = I.value;
+			if (!RegExp(`^${F.value ? "-?" : ""}\\d*${P.value > 0 ? "(\\.\\d*)?" : ""}$`).test(t.value)) {
+				t.value = A.value;
 				return;
 			}
-			I.value = t.value;
-			let n = Y(t.value);
-			(n !== null || t.value === "") && (k.value = n);
+			A.value = t.value;
+			let n = J(t.value);
+			(n !== null || t.value === "") && (C.value = n);
 		}
-		function Q() {
-			let e = Y(I.value);
-			X(e === null ? null : J(q(e)));
+		function Z() {
+			let e = J(A.value);
+			Y(e === null ? null : q(K(e)));
 		}
-		function he() {
-			L.value = !1, Q();
+		function le() {
+			j.value = !1, Z();
 		}
-		function ge(e) {
+		function ue(e) {
 			let t = {
-				ArrowUp: () => Z(1),
-				ArrowDown: () => Z(-1),
-				PageUp: () => Z(1, 10),
-				PageDown: () => Z(-1, 10)
+				ArrowUp: () => X(1),
+				ArrowDown: () => X(-1),
+				PageUp: () => X(1, 10),
+				PageDown: () => X(-1, 10)
 			};
-			if (O.min !== void 0 && (t.Home = () => !H.value && X(O.min)), O.max !== void 0 && (t.End = () => !H.value && X(O.max)), e.key === "Enter") return Q();
+			if (S.min !== void 0 && (t.Home = () => !I.value && Y(S.min)), S.max !== void 0 && (t.End = () => !I.value && Y(S.max)), e.key === "Enter") return Z();
 			let n = t[e.key];
 			n && (e.preventDefault(), n());
 		}
-		function $() {
-			clearTimeout(R), clearInterval(z);
+		function Q() {
+			clearTimeout(M), clearInterval(N);
+		}
+		function de(e, t) {
+			e.button !== 0 || I.value || (Q(), X(t), M = setTimeout(() => {
+				N = setInterval(() => {
+					X(t), (t > 0 && R.value || t < 0 && L.value) && Q();
+				}, S.holdIntervalDelay);
+			}, S.holdDelay));
 		}
-		function _e(e, t) {
-			e.button !== 0 || H.value || ($(), Z(t), R = setTimeout(() => {
-				z = setInterval(() => {
-					Z(t), (t > 0 && W.value || t < 0 && U.value) && $();
-				}, O.holdIntervalDelay);
-			}, O.holdDelay));
+		function fe(e, t) {
+			e.detail === 0 && X(t);
 		}
-		function ve(e, t) {
-			e.detail === 0 && Z(t);
+		function $(e) {
+			let t = e < 0 ? "Decrease" : "Increase";
+			return {
+				"aria-label": t,
+				"aria-controls": T,
+				"data-testid": `ac-number-input-${t.toLowerCase()}`,
+				disabled: I.value || (e < 0 ? L.value : R.value),
+				onMousedown: (e) => e.preventDefault(),
+				onPointerdown: (t) => de(t, e),
+				onPointerup: Q,
+				onPointerleave: Q,
+				onPointercancel: Q,
+				onClick: (t) => fe(t, e)
+			};
 		}
-		return oe(k, (e) => {
-			Y(I.value) !== e && (I.value = K(e));
-		}), d($), c({ focus: () => F.value?.focus() }), (t, c) => (f(), i("div", l(N.value, {
-			class: ["w-full", s.disabled && "opacity-50"],
+		return ee(C, (e) => {
+			J(A.value) !== e && (A.value = G(e));
+		}), l(Q), o({ focus: () => k.value?.focus() }), (e, o) => (u(), n("div", s(D.value, {
+			class: ["w-full", a.disabled && "opacity-50"],
 			"data-ac-ds": "",
 			"data-testid": "ac-number-input"
 		}), [
-			s.label ? (f(), i("label", {
+			a.label ? (u(), n("label", {
 				key: 0,
-				for: h(j),
+				for: m(T),
 				class: "mb-2 flex items-center gap-1 text-base font-medium text-heading"
 			}, [
-				a("span", null, m(s.label), 1),
-				s.readonly ? (f(), i("span", x, "(read only)")) : r("", !0),
-				s.required ? (f(), i("span", S, "*")) : r("", !0)
-			], 8, b)) : r("", !0),
-			s.hint ? (f(), i("p", {
+				r("span", null, p(a.label), 1),
+				a.readonly ? (u(), n("span", v, "(read only)")) : t("", !0),
+				a.required ? (u(), n("span", ie, "*")) : t("", !0)
+			], 8, re)) : t("", !0),
+			a.hint ? (u(), n("p", {
 				key: 1,
-				id: `${h(j)}-hint`,
+				id: `${m(T)}-hint`,
 				class: "mb-2 text-base text-muted"
-			}, m(s.hint), 9, C)) : r("", !0),
-			a("div", { class: u(["relative flex min-w-0 items-center rounded-10 border transition-[border-color,box-shadow,background-color] duration-200", [
-				s.size === "small" ? "h-9" : "h-10",
-				s.readonly ? "bg-surface-muted" : "bg-background",
-				G.value ? "border-danger/60 focus-within:border-danger focus-within:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]" : ["border-border focus-within:focus-ring", !s.disabled && "hover:border-accent-active"]
-			]]) }, [
-				a("input", l({
-					id: h(j),
+			}, p(a.hint), 9, y)) : t("", !0),
+			r("div", b, [
+				a.stepButtons ? (u(), n("button", s({
+					key: 0,
+					type: "button",
+					tabindex: "-1",
+					class: H.value
+				}, $(-1)), [i(m(te), {
+					class: c(a.size === "small" ? "size-4" : "size-6"),
+					"aria-hidden": "true"
+				}, null, 8, ["class"])], 16)) : t("", !0),
+				r("div", { class: c(["relative flex min-w-0 flex-1 items-center rounded-10 border transition-[border-color,box-shadow,background-color] duration-200", [
+					a.size === "small" ? "h-9" : "h-10.5",
+					a.readonly ? "bg-surface-muted" : "bg-background",
+					B.value ? "border-danger focus-within:shadow-[0_0_0_2px_color-mix(in_srgb,var(--color-danger)_20%,transparent)]" : ["border-border focus-within:focus-ring", !a.disabled && "hover:border-accent-active"]
+				]]) }, [r("input", s({
+					id: m(T),
 					ref_key: "input",
-					ref: F
-				}, P.value, {
+					ref: k
+				}, O.value, {
 					type: "text",
 					role: "spinbutton",
 					autocomplete: "off",
-					inputmode: B.value > 0 || V.value ? "decimal" : "numeric",
-					value: I.value,
-					name: s.name,
-					disabled: s.disabled,
-					readonly: s.readonly,
-					required: s.required,
-					"aria-valuenow": k.value ?? void 0,
-					"aria-valuemin": s.min,
-					"aria-valuemax": s.max,
-					"aria-valuetext": fe.value,
-					"aria-invalid": !!G.value || void 0,
-					"aria-describedby": de.value,
-					class: ["block h-full w-full min-w-0 flex-1 rounded-10 bg-transparent text-base font-normal text-heading tabular-nums outline-none placeholder:text-muted/80 disabled:cursor-not-allowed", [s.size === "small" ? "pl-3" : "pl-4", s.unit || t.$slots.suffix || s.stepButtons ? "pr-2" : s.size === "small" ? "pr-3" : "pr-4"]],
-					onInput: me,
-					onKeydown: ge,
-					onFocus: c[0] ||= (e) => L.value = !0,
-					onBlur: he
-				}), null, 16, w),
-				s.unit || t.$slots.suffix ? (f(), i("span", {
+					inputmode: P.value > 0 || F.value ? "decimal" : "numeric",
+					value: A.value,
+					name: a.name,
+					disabled: a.disabled,
+					readonly: a.readonly,
+					required: a.required,
+					"aria-valuenow": C.value ?? void 0,
+					"aria-valuemin": a.min,
+					"aria-valuemax": a.max,
+					"aria-valuetext": U.value,
+					"aria-invalid": !!B.value || void 0,
+					"aria-describedby": V.value,
+					class: "block h-full w-full min-w-0 flex-1 rounded-10 bg-transparent px-2 text-center text-base font-normal text-heading tabular-nums outline-none placeholder:text-muted/80 disabled:cursor-not-allowed",
+					onInput: ce,
+					onKeydown: ue,
+					onFocus: o[0] ||= (e) => j.value = !0,
+					onBlur: le
+				}), null, 16, ae), a.unit || e.$slots.suffix ? (u(), n("span", {
 					key: 0,
-					class: u(["flex h-full shrink-0 items-center gap-1.5 text-base whitespace-nowrap text-muted select-none [&_svg]:size-4", s.stepButtons ? "pr-2" : "pr-3.5"]),
+					class: c(["flex h-full shrink-0 items-center gap-1.5 text-base whitespace-nowrap text-muted select-none [&_svg]:size-4", a.size === "small" ? "pr-3" : "pr-4"]),
 					"aria-hidden": "true"
-				}, [ne(t.$slots, "suffix"), s.unit ? (f(), i("span", T, m(s.unit), 1)) : r("", !0)], 2)) : r("", !0),
-				s.stepButtons ? (f(), i("span", E, [(f(!0), i(e, null, te([{
-					dir: -1,
-					icon: h(v),
-					name: "Decrease",
-					off: U.value
-				}, {
-					dir: 1,
-					icon: h(y),
-					name: "Increase",
-					off: W.value
-				}], (e) => (f(), i("button", {
-					key: e.dir,
+				}, [f(e.$slots, "suffix"), a.unit ? (u(), n("span", oe, p(a.unit), 1)) : t("", !0)], 2)) : t("", !0)], 2),
+				a.stepButtons ? (u(), n("button", s({
+					key: 1,
 					type: "button",
 					tabindex: "-1",
-					class: u(["inline-flex shrink-0 cursor-pointer items-center justify-center rounded-8 bg-accent text-heading transition-colors duration-200 select-none hover:bg-accent-hover active:bg-accent-active disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-accent", s.size === "small" ? "size-7" : "size-8"]),
-					disabled: H.value || e.off,
-					"aria-label": e.name,
-					"aria-controls": h(j),
-					"data-testid": `ac-number-input-${e.name.toLowerCase()}`,
-					onMousedown: c[1] ||= se(() => {}, ["prevent"]),
-					onPointerdown: (t) => _e(t, e.dir),
-					onPointerup: $,
-					onPointerleave: $,
-					onPointercancel: $,
-					onClick: (t) => ve(t, e.dir)
-				}, [(f(), n(re(e.icon), {
-					class: "size-4",
+					class: H.value
+				}, $(1)), [i(m(ne), {
+					class: c(a.size === "small" ? "size-4" : "size-6"),
 					"aria-hidden": "true"
-				}))], 42, ce))), 128))])) : r("", !0)
-			], 2),
-			G.value ? (f(), i("p", {
+				}, null, 8, ["class"])], 16)) : t("", !0)
+			]),
+			B.value ? (u(), n("p", {
 				key: 2,
-				id: `${h(j)}-msg`,
-				class: "mt-1.5 flex items-center gap-1.5 text-base text-danger-strong",
+				id: `${m(T)}-msg`,
+				class: "mt-1 text-base text-danger-strong",
 				role: "alert"
-			}, [o(h(_), {
-				class: "size-4 shrink-0",
-				"aria-hidden": "true"
-			}), ee(" " + m(G.value), 1)], 8, le)) : r("", !0)
+			}, p(B.value), 9, se)) : t("", !0)
 		], 16));
 	}
 });
 //#endregion
-export { D as default };
+export { x as default };

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

@@ -1,9 +1,9 @@
 export interface Props {
-    /** Pads the page like cloud-ui's page container: 16px on the sides, 28px top and bottom (32px from 768px). Turn off when a parent already pads it. */
+    /** Pads the page like cloud-ui's page container: 16px on the sides, 32px top and bottom. Turn off when a parent already pads it. */
     padded?: boolean;
     /** Space between the page's direct children: `small` 12px, `normal` 20px, `large` 32px. */
     gap?: "small" | "normal" | "large";
-    /** Caps the content width and centres it: `narrow` 768px, `normal` 1024px, `wide` 1200px (cloud-ui's page width), `full` fills the area. */
+    /** Caps the content width and centres it: `narrow` 768px, `normal` 1024px, `wide` 1200px (cloud-ui's page column, the same as its `custom-container` and our `page-container` utility), `full` fills the area. Use `wide` for new cloud-ui-style pages. */
     width?: "full" | "wide" | "normal" | "narrow";
 }
 type __VLS_Slots = {

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

@@ -25,7 +25,7 @@ var a = /*@__PURE__*/ t({
 			class: n(["flex w-full min-w-0 flex-col", [
 				a[t.gap],
 				o[t.width],
-				t.padded && "px-4 py-7 md:py-8"
+				t.padded && "px-4 py-8"
 			]]),
 			"data-ac-ds": "",
 			"data-testid": "ac-page"

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

@@ -1,5 +1,5 @@
 export interface Props {
-    /** Total number of items across all pages. Leave it out when the API returns only a next-page token: the summary becomes "Page 3" (or "Showing 41–60" with `items-on-page`) and Next follows `has-next`. */
+    /** Total number of items across all pages. Leave it out when the API returns only a next-page token: the summary becomes "Page 3" (or "Showing 41 to 60" with `items-on-page`) and Next follows `has-next`. */
     total?: number;
     /** Whether a page after the current one exists, e.g. the response had a next-page token. Overrides the count worked out from `total`. */
     hasNext?: boolean;
@@ -7,21 +7,21 @@ export interface Props {
     hasPrev?: boolean;
     /** Pages the viewer can jump to, e.g. those whose tokens you've cached. Other page numbers are disabled, and a page-size change goes back to page 1. Leave it out when every page is reachable. */
     knownPages?: number[];
-    /** Rows on the current page, for "Showing 41–60" when `total` is unknown. Cloud-ui's `pagination.count`. */
+    /** Rows on the current page, for "Showing 41 to 60" when `total` is unknown. Cloud-ui's `pagination.count`. */
     itemsOnPage?: number;
     /** Choices in the page-size select. */
     pageSizes?: number[];
-    /** Hides the "Rows per page" select. */
+    /** Hides the "Items per page" select. */
     hidePageSize?: boolean;
     /** How many page numbers to show on each side of the current one before an ellipsis. */
     siblings?: number;
     /** Always use the compact "‹ 3 / 6 ›" control. It's used automatically below 640px. */
     compact?: boolean;
-    /** Noun after the count: "Showing 1–10 of 57 databases". */
+    /** Noun after the count: "Showing 1 to 10 of 57 databases". Defaults to "results". */
     itemLabel?: string;
     /** Disables every control, e.g. while a page loads. */
     disabled?: boolean;
-    /** `small` makes the buttons 28px high (default `normal` is 32px). Use it inside cards and dense tables. */
+    /** `small` makes the buttons 28px high with 14px text (default `normal` is 34px with 16px text, as cloud-ui's table pager). Use it inside cards and dense tables. */
     size?: "normal" | "small";
 }
 type __VLS_Props = Props;

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

@@ -15,12 +15,15 @@ var y = {
 }, w = {
 	"aria-label": "Pagination",
 	class: "ml-auto"
-}, T = { class: "flex items-center gap-1.5" }, E = ["disabled"], D = { class: "px-2 whitespace-nowrap tabular-nums" }, O = { class: "font-medium text-heading" }, k = { class: "font-medium text-heading" }, A = [
+}, T = { class: "flex items-center gap-2" }, E = ["disabled"], D = { class: "px-2 whitespace-nowrap tabular-nums" }, O = { class: "font-medium text-heading" }, k = { class: "font-medium text-heading" }, A = {
+	key: 0,
+	class: "hidden sm:flex"
+}, ee = { class: "flex items-center gap-1" }, j = [
 	"aria-label",
 	"aria-current",
 	"disabled",
 	"onClick"
-], j = ["disabled"], M = /*@__PURE__*/ c({
+], M = ["disabled"], N = /*@__PURE__*/ c({
 	__name: "AcPagination",
 	props: /*@__PURE__*/ l({
 		total: { default: void 0 },
@@ -67,23 +70,23 @@ var y = {
 		"prev"
 	], ["update:page", "update:pageSize"]),
 	setup(c, { emit: l }) {
-		let M = c, N = h(c, "page"), P = h(c, "pageSize"), F = l, I = n(() => [M.size === "small" ? "h-7 min-w-7 px-1.5 text-xs" : "h-8 min-w-8 px-2 text-base", !M.compact && (M.size === "small" ? "sm:px-2" : "sm:px-2.5")]), L = n(() => M.size === "small" ? "h-7 min-w-7 text-xs" : "h-8 min-w-8 text-base"), R = n(() => typeof M.total == "number"), z = n(() => Math.max(0, M.total ?? 0)), B = n(() => Math.max(1, P.value)), V = n(() => !R.value || M.knownPages !== void 0), H = n(() => R.value ? Math.max(1, Math.ceil(z.value / B.value)) : Math.max(1, N.value, ...M.knownPages ?? [])), U = n(() => Math.min(Math.max(1, N.value), H.value)), W = n(() => M.hasPrev ?? U.value > 1), G = n(() => M.hasNext ?? U.value < H.value), K = n(() => {
-			let e = (U.value - 1) * B.value;
-			return R.value ? {
-				start: Math.min(e, z.value),
-				end: Math.min(U.value * B.value, z.value)
+		let N = c, P = h(c, "page"), F = h(c, "pageSize"), I = l, L = n(() => [N.size === "small" ? "h-7 min-w-7 px-1.5 text-base" : "h-8.5 min-w-8.5 px-2 text-lg", !N.compact && (N.size === "small" ? "sm:px-2.5" : "sm:px-3")]), R = n(() => N.size === "small" ? "h-7 min-w-7 px-2.5 text-base" : "h-8.5 min-w-8.5 px-3 text-lg"), z = n(() => typeof N.total == "number"), B = n(() => Math.max(0, N.total ?? 0)), V = n(() => Math.max(1, F.value)), H = n(() => !z.value || N.knownPages !== void 0), U = n(() => z.value ? Math.max(1, Math.ceil(B.value / V.value)) : Math.max(1, P.value, ...N.knownPages ?? [])), W = n(() => Math.min(Math.max(1, P.value), U.value)), G = n(() => N.hasPrev ?? W.value > 1), K = n(() => N.hasNext ?? W.value < U.value), q = n(() => {
+			let e = (W.value - 1) * V.value;
+			return z.value ? {
+				start: Math.min(e, B.value),
+				end: Math.min(W.value * V.value, B.value)
 			} : {
 				start: e,
-				end: e + Math.max(0, M.itemsOnPage ?? B.value)
+				end: e + Math.max(0, N.itemsOnPage ?? V.value)
 			};
-		}), q = n(() => {
-			let e = M.itemLabel ? ` ${M.itemLabel}` : "";
-			return R.value ? z.value ? `Showing ${K.value.start + 1}–${K.value.end} of ${z.value}${e}` : `0${e || " items"}` : M.itemsOnPage === void 0 ? `Page ${U.value}` : M.itemsOnPage ? `Showing ${K.value.start + 1}–${K.value.end}${e}` : U.value === 1 ? `0${e || " items"}` : `Page ${U.value}`;
-		}), J = n(() => (M.pageSizes.includes(P.value) ? M.pageSizes : [...M.pageSizes, P.value].sort((e, t) => e - t)).map((e) => ({
+		}), J = n(() => {
+			let e = ` ${N.itemLabel || "results"}`;
+			return z.value ? B.value ? `Showing ${q.value.start + 1} to ${q.value.end} of ${B.value}${e}` : `0${e}` : N.itemsOnPage === void 0 ? `Page ${W.value}` : N.itemsOnPage ? `Showing ${q.value.start + 1} to ${q.value.end}${N.itemLabel ? e : ""}` : W.value === 1 ? `0${e}` : `Page ${W.value}`;
+		}), Y = n(() => (N.pageSizes.includes(F.value) ? N.pageSizes : [...N.pageSizes, F.value].sort((e, t) => e - t)).map((e) => ({
 			value: e,
 			label: String(e)
-		}))), Y = n(() => {
-			let e = H.value, t = U.value, n = Math.max(0, M.siblings);
+		}))), X = n(() => {
+			let e = U.value, t = W.value, n = Math.max(0, N.siblings);
 			if (e <= 5 + 2 * n) return Array.from({ length: e }, (e, t) => t + 1);
 			let r = Math.max(t - n, 1), i = Math.min(t + n, e), a = r > 3, o = i < e - 2, s = (e, t) => Array.from({ length: t - e + 1 }, (t, n) => e + n);
 			return a ? o ? [
@@ -102,87 +105,87 @@ var y = {
 				e
 			];
 		});
-		function X(e) {
-			return e === U.value || !M.knownPages || M.knownPages.includes(e);
-		}
 		function Z(e) {
-			if (M.disabled) return;
-			let t = R.value ? H.value : Infinity;
-			N.value = Math.min(Math.max(1, e), t);
+			return e === W.value || !N.knownPages || N.knownPages.includes(e);
 		}
 		function Q(e) {
-			!M.disabled && (e > 0 ? G.value : W.value) && (Z(U.value + e), F(e > 0 ? "next" : "prev", N.value));
+			if (N.disabled) return;
+			let t = z.value ? U.value : Infinity;
+			P.value = Math.min(Math.max(1, e), t);
 		}
 		function $(e) {
+			!N.disabled && (e > 0 ? K.value : G.value) && (Q(W.value + e), I(e > 0 ? "next" : "prev", P.value));
+		}
+		function te(e) {
 			let t = Number(e);
-			if (!t || t === P.value) return;
-			let n = K.value.start;
-			P.value = t, N.value = V.value ? 1 : Math.floor(n / t) + 1;
+			if (!t || t === F.value) return;
+			let n = q.value.start;
+			F.value = t, P.value = H.value ? 1 : Math.floor(n / t) + 1;
 		}
-		return g(H, (e) => {
-			R.value && N.value > e && (N.value = e);
-		}), g(K, (e) => F("range", { ...e }), { immediate: !0 }), (n, l) => (d(), i("div", y, [a("div", b, [c.hidePageSize ? r("", !0) : (d(), i("div", x, [l[2] ||= a("span", {
+		return g(U, (e) => {
+			z.value && P.value > e && (P.value = e);
+		}), g(q, (e) => I("range", { ...e }), { immediate: !0 }), (n, l) => (d(), i("div", y, [a("div", b, [c.hidePageSize ? r("", !0) : (d(), i("div", x, [l[2] ||= a("span", {
 			class: "whitespace-nowrap",
 			"aria-hidden": "true"
-		}, "Rows per page", -1), a("div", S, [s(e, {
-			"model-value": P.value,
-			options: J.value,
+		}, "Items per page", -1), a("div", S, [s(e, {
+			"model-value": F.value,
+			options: Y.value,
 			size: "compact",
-			placeholder: "Rows per page",
+			placeholder: "Items per page",
 			disabled: c.disabled,
-			"onUpdate:modelValue": $
+			"onUpdate:modelValue": te
 		}, null, 8, [
 			"model-value",
 			"options",
 			"disabled"
-		])])])), a("p", C, p(q.value), 1)]), a("nav", w, [a("ul", T, [
+		])])])), a("p", C, p(J.value), 1)]), a("nav", w, [a("ul", T, [
 			a("li", null, [a("button", {
 				type: "button",
-				class: u(["inline-flex cursor-pointer items-center justify-center gap-1 rounded-10 border border-border bg-background font-medium text-heading transition-colors duration-200 hover:bg-accent-hover focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-background", I.value]),
+				class: u(["inline-flex cursor-pointer items-center justify-center rounded-4 border border-border bg-transparent font-medium text-heading transition-colors duration-200 hover:bg-accent-hover focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent", L.value]),
 				"aria-label": "Previous page",
-				disabled: c.disabled || !W.value,
+				disabled: c.disabled || !G.value,
 				"data-ac-ds": "",
 				"data-testid": "ac-pagination-prev",
-				onClick: l[0] ||= (e) => Q(-1)
+				onClick: l[0] ||= (e) => $(-1)
 			}, [s(m(_), {
-				class: "size-4 shrink-0",
+				class: u(["size-4 shrink-0", !c.compact && "sm:hidden"]),
 				"aria-hidden": "true"
-			}), a("span", { class: u(c.compact ? "hidden" : "hidden sm:inline") }, "Previous", 2)], 10, E)]),
-			a("li", { class: u(c.compact ? "flex" : "flex sm:hidden") }, [a("span", D, [R.value ? (d(), i(t, { key: 0 }, [
+			}, null, 8, ["class"]), a("span", { class: u(c.compact ? "hidden" : "hidden sm:inline") }, "Previous", 2)], 10, E)]),
+			a("li", { class: u(c.compact ? "flex" : "flex sm:hidden") }, [a("span", D, [z.value ? (d(), i(t, { key: 0 }, [
 				l[3] ||= a("span", { class: "sr-only" }, "Page ", -1),
-				a("span", O, p(U.value), 1),
-				o(" / " + p(H.value), 1)
-			], 64)) : (d(), i(t, { key: 1 }, [l[4] ||= o("Page ", -1), a("span", k, p(U.value), 1)], 64))])], 2),
-			c.compact ? r("", !0) : (d(!0), i(t, { key: 0 }, f(Y.value, (e) => (d(), i("li", {
+				a("span", O, p(W.value), 1),
+				o(" / " + p(U.value), 1)
+			], 64)) : (d(), i(t, { key: 1 }, [l[4] ||= o("Page ", -1), a("span", k, p(W.value), 1)], 64))])], 2),
+			c.compact ? r("", !0) : (d(), i("li", A, [a("ul", ee, [(d(!0), i(t, null, f(X.value, (e) => (d(), i("li", {
 				key: e,
-				class: "hidden sm:flex"
+				class: "flex"
 			}, [typeof e == "string" ? (d(), i("span", {
 				key: 0,
-				class: u(["inline-flex w-5 items-center justify-center text-muted", c.size === "small" ? "h-7" : "h-8"]),
+				class: u(["inline-flex items-center justify-center px-2 text-muted", c.size === "small" ? "h-7" : "h-8.5"]),
 				"aria-hidden": "true"
 			}, "…", 2)) : (d(), i("button", {
 				key: 1,
 				type: "button",
-				class: u(["inline-flex cursor-pointer items-center justify-center rounded-10 border px-2 font-medium tabular-nums transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-40", [L.value, e === U.value ? "border-primary bg-primary text-white" : "border-border bg-background text-heading hover:bg-accent-hover disabled:hover:bg-background"]]),
+				class: u(["inline-flex cursor-pointer items-center justify-center rounded-4 border font-medium tabular-nums transition-colors duration-200 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-40", [R.value, e === W.value ? "border-primary bg-primary text-white" : "border-border bg-transparent text-heading hover:bg-accent-hover disabled:hover:bg-transparent"]]),
 				"aria-label": `Page ${e}`,
-				"aria-current": e === U.value ? "page" : void 0,
-				disabled: c.disabled || !X(e),
-				onClick: (t) => Z(e)
-			}, p(e), 11, A))]))), 128)),
+				"aria-current": e === W.value ? "page" : void 0,
+				disabled: c.disabled || !Z(e),
+				onClick: (t) => Q(e)
+			}, p(e), 11, j))]))), 128))])])),
 			a("li", null, [a("button", {
 				type: "button",
-				class: u(["inline-flex cursor-pointer items-center justify-center gap-1 rounded-10 border border-border bg-background font-medium text-heading transition-colors duration-200 hover:bg-accent-hover focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-background", I.value]),
+				class: u(["inline-flex cursor-pointer items-center justify-center rounded-4 border border-border bg-transparent font-medium text-heading transition-colors duration-200 hover:bg-accent-hover focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-transparent", L.value]),
 				"aria-label": "Next page",
-				disabled: c.disabled || !G.value,
+				disabled: c.disabled || !K.value,
 				"data-ac-ds": "",
 				"data-testid": "ac-pagination-next",
-				onClick: l[1] ||= (e) => Q(1)
+				onClick: l[1] ||= (e) => $(1)
 			}, [a("span", { class: u(c.compact ? "hidden" : "hidden sm:inline") }, "Next", 2), s(m(v), {
-				class: "size-4 shrink-0",
+				class: u(["size-4 shrink-0", !c.compact && "sm:hidden"]),
 				"aria-hidden": "true"
-			})], 10, j)])
+			}, null, 8, ["class"])], 10, M)])
 		])])]));
 	}
 });
 //#endregion
-export { M as default };
+export { N as default };

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

@@ -1,9 +1,9 @@
 export interface Props {
-    /** Text under the spinner, e.g. "Fetching resource layout". Also announced to screen readers. */
+    /** Text under the loader, e.g. "Fetching resource layout". Also announced to screen readers. */
     message?: string;
-    /** Shows the spinner. Turn off to show the message alone. */
+    /** Shows the loader: cloud-ui's ring and dots. Turn off to show the message alone. */
     showSpinner?: boolean;
-    /** Covers the whole viewport on the page background with a 32px spinner, for app start-up and sign-in checks. */
+    /** Covers the whole viewport on the page background with a 60px loader, for app start-up and sign-in checks. Inline, the ring is 40px. */
     fullPage?: boolean;
     /** CSS minimum height when not `fullPage`. The preloader also grows to fill its container. */
     minHeight?: string;