@ac-design/design-system 1.0.2 → 2.0.0

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

@@ -0,0 +1,79 @@
+export interface Props {
+    /** Label above the field. Without one, pass `aria-label` so the field still has a name. */
+    label?: string;
+    /** Native `name` attribute. */
+    name?: string;
+    /** Lowest allowed value. ↓, − and Home stop here, and typed values are clamped to it on blur. No limit by default. */
+    min?: number;
+    /** Highest allowed value. ↑, + and End stop here, and typed values are clamped to it on blur. No limit by default. */
+    max?: number;
+    /** Amount one − / + press or one ↑ / ↓ adds. Page Up / Page Down move 10 steps. Its decimals set the precision, e.g. `0.1` keeps one decimal. */
+    step?: number;
+    /** Decimal places to keep. Defaults to the decimals in `step`; values are rounded to it on blur. */
+    precision?: number;
+    /** Unit shown after the value, e.g. `GiB`, `vCPU` or `%`. Also read out with the value. */
+    unit?: string;
+    /** Shows the − and + buttons inside the field. Cloud `is-show-inc-dec`. */
+    stepButtons?: boolean;
+    /** Milliseconds a − / + press is held before it starts repeating. */
+    holdDelay?: number;
+    /** Milliseconds between repeats while − / + is held. */
+    holdIntervalDelay?: number;
+    /** Marks the field required and adds a red asterisk. */
+    required?: boolean;
+    /** Disables the field and its buttons. */
+    disabled?: boolean;
+    /** Read-only field: a muted fill, "(read only)" after the label, and no stepping. */
+    readonly?: boolean;
+    /** Error text under the field. Turns the border red and sets `aria-invalid`. */
+    errorMsg?: string;
+    /** Help text between the label and the field. */
+    hint?: string;
+    /** `small` 36px or `normal` 40px tall. */
+    size?: "small" | "normal";
+}
+type __VLS_Props = Props;
+type __VLS_Slots = {
+    /** Content inside the field after the value, before the buttons: an icon or richer unit text. */
+    suffix?: () => unknown;
+};
+type __VLS_ModelProps = {
+    /** The number, or `null` while the field is empty. */
+    modelValue?: number | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    /** Moves focus to the input. */
+    focus: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: number | null) => any;
+    change: (value: number | null) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: number | null) => any) | undefined;
+    onChange?: ((value: number | null) => any) | undefined;
+}>, {
+    required: boolean;
+    label: string;
+    disabled: boolean;
+    max: number;
+    min: number;
+    name: string;
+    size: "small" | "normal";
+    step: number;
+    readonly: boolean;
+    hint: string;
+    errorMsg: string;
+    unit: string;
+    precision: number;
+    stepButtons: boolean;
+    holdDelay: number;
+    holdIntervalDelay: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,251 @@
+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";
+//#region src/lib/components/AcNumberInput.vue?vue&type=script&setup=true&lang.ts
+var b = ["for"], x = {
+	key: 0,
+	class: "font-normal text-muted"
+}, S = {
+	key: 1,
+	class: "text-danger",
+	"aria-hidden": "true"
+}, C = ["id"], w = [
+	"id",
+	"inputmode",
+	"value",
+	"name",
+	"disabled",
+	"readonly",
+	"required",
+	"aria-valuenow",
+	"aria-valuemin",
+	"aria-valuemax",
+	"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({
+	inheritAttrs: !1,
+	__name: "AcNumberInput",
+	props: /*@__PURE__*/ c({
+		label: { default: "" },
+		name: { default: "" },
+		min: { default: void 0 },
+		max: { default: void 0 },
+		step: { default: 1 },
+		precision: { default: void 0 },
+		unit: { default: "" },
+		stepButtons: {
+			type: Boolean,
+			default: !0
+		},
+		holdDelay: { default: 300 },
+		holdIntervalDelay: { default: 100 },
+		required: {
+			type: Boolean,
+			default: !1
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		readonly: {
+			type: Boolean,
+			default: !1
+		},
+		errorMsg: { default: "" },
+		hint: { default: "" },
+		size: { default: "normal" }
+	}, {
+		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;
+			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;
+			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) {
+			let t = String(e);
+			return t.includes("e-") ? Number(t.split("e-")[1]) : t.split(".")[1]?.length ?? 0;
+		}
+		function K(e) {
+			return e === null ? "" : String(e);
+		}
+		function q(e) {
+			return Number(e.toFixed(B.value));
+		}
+		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 Z(e, t = 1) {
+			H.value || X(J(q((k.value ?? 0) + e * O.step * t)));
+		}
+		function me(e) {
+			let t = e.target;
+			if (!RegExp(`^${V.value ? "-?" : ""}\\d*${B.value > 0 ? "(\\.\\d*)?" : ""}$`).test(t.value)) {
+				t.value = I.value;
+				return;
+			}
+			I.value = t.value;
+			let n = Y(t.value);
+			(n !== null || t.value === "") && (k.value = n);
+		}
+		function Q() {
+			let e = Y(I.value);
+			X(e === null ? null : J(q(e)));
+		}
+		function he() {
+			L.value = !1, Q();
+		}
+		function ge(e) {
+			let t = {
+				ArrowUp: () => Z(1),
+				ArrowDown: () => Z(-1),
+				PageUp: () => Z(1, 10),
+				PageDown: () => Z(-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();
+			let n = t[e.key];
+			n && (e.preventDefault(), n());
+		}
+		function $() {
+			clearTimeout(R), clearInterval(z);
+		}
+		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 ve(e, t) {
+			e.detail === 0 && Z(t);
+		}
+		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"],
+			"data-ac-ds": "",
+			"data-testid": "ac-number-input"
+		}), [
+			s.label ? (f(), i("label", {
+				key: 0,
+				for: h(j),
+				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", {
+				key: 1,
+				id: `${h(j)}-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),
+					ref_key: "input",
+					ref: F
+				}, P.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", {
+					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"]),
+					"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,
+					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",
+					"aria-hidden": "true"
+				}))], 42, ce))), 128))])) : r("", !0)
+			], 2),
+			G.value ? (f(), i("p", {
+				key: 2,
+				id: `${h(j)}-msg`,
+				class: "mt-1.5 flex items-center gap-1.5 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)
+		], 16));
+	}
+});
+//#endregion
+export { D as default };

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

@@ -1,9 +1,9 @@
 export interface Props {
-    /** Pads the page on all sides (20px). Turn off when a parent already pads it. */
+    /** 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. */
     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` 1280px, `full` fills the area. */
+    /** Caps the content width and centres it: `narrow` 768px, `normal` 1024px, `wide` 1200px (cloud-ui's page width), `full` fills the area. */
     width?: "full" | "wide" | "normal" | "narrow";
 }
 type __VLS_Slots = {

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

@@ -17,7 +17,7 @@ var a = /*@__PURE__*/ t({
 			large: "gap-8"
 		}, o = {
 			full: "",
-			wide: "mx-auto max-w-7xl",
+			wide: "mx-auto max-w-page",
 			normal: "mx-auto max-w-5xl",
 			narrow: "mx-auto max-w-3xl"
 		};
@@ -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 && "p-5"
+				t.padded && "px-4 py-7 md:py-8"
 			]]),
 			"data-ac-ds": "",
 			"data-testid": "ac-page"

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

@@ -1,6 +1,14 @@
 export interface Props {
-    /** Total number of items across all pages. */
-    total: number;
+    /** 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;
+    /** 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;
+    /** Whether a page before the current one exists. Defaults to any page after 1. */
+    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`. */
+    itemsOnPage?: number;
     /** Choices in the page-size select. */
     pageSizes?: number[];
     /** Hides the "Rows per page" select. */
@@ -13,7 +21,7 @@ export interface Props {
     itemLabel?: string;
     /** Disables every control, e.g. while a page loads. */
     disabled?: boolean;
-    /** `small` makes the page buttons 28px (default `normal` is 32px). Use it inside cards and dense tables. */
+    /** `small` makes the buttons 28px high (default `normal` is 32px). Use it inside cards and dense tables. */
     size?: "normal" | "small";
 }
 type __VLS_Props = Props;
@@ -25,23 +33,32 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    next: (page: number) => any;
     range: (range: {
         start: number;
         end: number;
     }) => any;
+    prev: (page: number) => any;
     "update:page": (value: number) => any;
     "update:pageSize": (value: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onNext?: ((page: number) => any) | undefined;
     onRange?: ((range: {
         start: number;
         end: number;
     }) => any) | undefined;
+    onPrev?: ((page: number) => any) | undefined;
     "onUpdate:page"?: ((value: number) => any) | undefined;
     "onUpdate:pageSize"?: ((value: number) => any) | undefined;
 }>, {
     disabled: boolean;
     size: "normal" | "small";
     compact: boolean;
+    total: number;
+    hasNext: boolean;
+    hasPrev: boolean;
+    knownPages: number[];
+    itemsOnPage: number;
     pageSizes: number[];
     hidePageSize: boolean;
     siblings: number;

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

@@ -3,27 +3,37 @@ import { Fragment as t, computed as n, createCommentVNode as r, createElementBlo
 import { ChevronLeft as _, ChevronRight as v } from "@lucide/vue";
 //#region src/lib/components/AcPagination.vue?vue&type=script&setup=true&lang.ts
 var y = {
-	class: "flex flex-wrap items-center justify-between gap-x-6 gap-y-3 text-base",
+	class: "flex flex-wrap items-center justify-between gap-x-6 gap-y-3 text-base text-muted",
 	"data-ac-ds": "",
 	"data-testid": "ac-pagination"
-}, b = { class: "flex min-w-0 flex-wrap items-center gap-x-5 gap-y-2" }, x = {
+}, b = { class: "flex min-w-0 flex-wrap items-center gap-x-4 gap-y-2" }, x = {
 	key: 0,
 	class: "flex items-center gap-2"
 }, S = { class: "w-18" }, C = {
-	class: "text-xs whitespace-nowrap text-muted tabular-nums",
+	class: "whitespace-nowrap tabular-nums",
 	"aria-live": "polite"
 }, w = {
 	"aria-label": "Pagination",
 	class: "ml-auto"
-}, T = { class: "flex items-center gap-1" }, E = ["disabled"], D = { class: "px-2 text-xs whitespace-nowrap text-body tabular-nums" }, O = { class: "font-medium text-heading" }, k = [
+}, 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 = [
 	"aria-label",
 	"aria-current",
 	"disabled",
 	"onClick"
-], A = ["disabled"], j = /*@__PURE__*/ c({
+], j = ["disabled"], M = /*@__PURE__*/ c({
 	__name: "AcPagination",
 	props: /*@__PURE__*/ l({
-		total: {},
+		total: { default: void 0 },
+		hasNext: {
+			type: Boolean,
+			default: void 0
+		},
+		hasPrev: {
+			type: Boolean,
+			default: void 0
+		},
+		knownPages: { default: void 0 },
+		itemsOnPage: { default: void 0 },
 		pageSizes: { default: () => [
 			10,
 			20,
@@ -51,19 +61,29 @@ var y = {
 		pageSize: { default: 10 },
 		pageSizeModifiers: {}
 	}),
-	emits: /*@__PURE__*/ l(["range"], ["update:page", "update:pageSize"]),
+	emits: /*@__PURE__*/ l([
+		"range",
+		"next",
+		"prev"
+	], ["update:page", "update:pageSize"]),
 	setup(c, { emit: l }) {
-		let j = c, M = h(c, "page"), N = h(c, "pageSize"), P = l, F = n(() => j.size === "small" ? "size-7" : "size-8"), I = n(() => j.size === "small" ? "h-7 min-w-7 text-sm" : "h-8 min-w-8 text-base"), L = n(() => Math.max(1, Math.ceil(j.total / Math.max(1, N.value)))), R = n(() => Math.min(Math.max(1, M.value), L.value)), z = n(() => ({
-			start: Math.min((R.value - 1) * N.value, j.total),
-			end: Math.min(R.value * N.value, j.total)
-		})), B = n(() => {
-			let e = j.itemLabel ? ` ${j.itemLabel}` : "";
-			return j.total ? `Showing ${z.value.start + 1}–${z.value.end} of ${j.total}${e}` : `0${e || " items"}`;
-		}), V = n(() => (j.pageSizes.includes(N.value) ? j.pageSizes : [...j.pageSizes, N.value].sort((e, t) => e - t)).map((e) => ({
+		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)
+			} : {
+				start: e,
+				end: e + Math.max(0, M.itemsOnPage ?? B.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) => ({
 			value: e,
 			label: String(e)
-		}))), H = n(() => {
-			let e = L.value, t = R.value, n = Math.max(0, j.siblings);
+		}))), Y = n(() => {
+			let e = H.value, t = U.value, n = Math.max(0, M.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 ? [
@@ -82,79 +102,87 @@ var y = {
 				e
 			];
 		});
-		function U(e) {
-			j.disabled || (M.value = Math.min(Math.max(1, e), L.value));
+		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);
+		}
+		function Q(e) {
+			!M.disabled && (e > 0 ? G.value : W.value) && (Z(U.value + e), F(e > 0 ? "next" : "prev", N.value));
 		}
-		function W(e) {
+		function $(e) {
 			let t = Number(e);
-			if (!t || t === N.value) return;
-			let n = z.value.start;
-			N.value = t, M.value = Math.floor(n / t) + 1;
+			if (!t || t === P.value) return;
+			let n = K.value.start;
+			P.value = t, N.value = V.value ? 1 : Math.floor(n / t) + 1;
 		}
-		return g(L, (e) => {
-			M.value > e && (M.value = e);
-		}), g(z, (e) => P("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: "text-xs whitespace-nowrap text-muted",
+		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", {
+			class: "whitespace-nowrap",
 			"aria-hidden": "true"
 		}, "Rows per page", -1), a("div", S, [s(e, {
-			"model-value": N.value,
-			options: V.value,
+			"model-value": P.value,
+			options: J.value,
 			size: "compact",
 			placeholder: "Rows per page",
 			disabled: c.disabled,
-			"onUpdate:modelValue": W
+			"onUpdate:modelValue": $
 		}, null, 8, [
 			"model-value",
 			"options",
 			"disabled"
-		])])])), a("p", C, p(B.value), 1)]), a("nav", w, [a("ul", T, [
+		])])])), a("p", C, p(q.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 rounded-6 border border-border bg-surface text-body shadow-xs transition hover:border-border-dark hover:bg-surface-muted hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40 disabled:shadow-none disabled:hover:bg-surface", F.value]),
+				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]),
 				"aria-label": "Previous page",
-				disabled: c.disabled || R.value <= 1,
+				disabled: c.disabled || !W.value,
 				"data-ac-ds": "",
 				"data-testid": "ac-pagination-prev",
-				onClick: l[0] ||= (e) => U(R.value - 1)
+				onClick: l[0] ||= (e) => Q(-1)
 			}, [s(m(_), {
-				class: "size-4",
+				class: "size-4 shrink-0",
 				"aria-hidden": "true"
-			})], 10, E)]),
-			a("li", { class: u(c.compact ? "flex" : "flex sm:hidden") }, [a("span", D, [
+			}), 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 }, [
 				l[3] ||= a("span", { class: "sr-only" }, "Page ", -1),
-				a("span", O, p(R.value), 1),
-				o(" / " + p(L.value), 1)
-			])], 2),
-			c.compact ? r("", !0) : (d(!0), i(t, { key: 0 }, f(H.value, (e) => (d(), i("li", {
+				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", {
 				key: e,
 				class: "hidden sm:flex"
 			}, [typeof e == "string" ? (d(), i("span", {
 				key: 0,
-				class: u(["inline-flex w-6 items-end justify-center text-xs text-muted", c.size === "small" ? "h-7 pb-1.5" : "h-8 pb-2"]),
+				class: u(["inline-flex w-5 items-center justify-center text-muted", c.size === "small" ? "h-7" : "h-8"]),
 				"aria-hidden": "true"
 			}, "…", 2)) : (d(), i("button", {
 				key: 1,
 				type: "button",
-				class: u(["inline-flex cursor-pointer items-center justify-center rounded-6 border px-2 font-medium tabular-nums transition focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40", [I.value, e === R.value ? "border-primary bg-primary-95 text-primary-20" : "border-transparent text-body hover:bg-surface-sunken hover:text-heading"]]),
+				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"]]),
 				"aria-label": `Page ${e}`,
-				"aria-current": e === R.value ? "page" : void 0,
-				disabled: c.disabled,
-				onClick: (t) => U(e)
-			}, p(e), 11, k))]))), 128)),
+				"aria-current": e === U.value ? "page" : void 0,
+				disabled: c.disabled || !X(e),
+				onClick: (t) => Z(e)
+			}, p(e), 11, A))]))), 128)),
 			a("li", null, [a("button", {
 				type: "button",
-				class: u(["inline-flex cursor-pointer items-center justify-center rounded-6 border border-border bg-surface text-body shadow-xs transition hover:border-border-dark hover:bg-surface-muted hover:text-heading focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40 disabled:shadow-none disabled:hover:bg-surface", F.value]),
+				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]),
 				"aria-label": "Next page",
-				disabled: c.disabled || R.value >= L.value,
+				disabled: c.disabled || !G.value,
 				"data-ac-ds": "",
 				"data-testid": "ac-pagination-next",
-				onClick: l[1] ||= (e) => U(R.value + 1)
-			}, [s(m(v), {
-				class: "size-4",
+				onClick: l[1] ||= (e) => Q(1)
+			}, [a("span", { class: u(c.compact ? "hidden" : "hidden sm:inline") }, "Next", 2), s(m(v), {
+				class: "size-4 shrink-0",
 				"aria-hidden": "true"
-			})], 10, A)])
+			})], 10, j)])
 		])])]));
 	}
 });
 //#endregion
-export { j as default };
+export { M as default };

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

@@ -3,7 +3,7 @@ export interface Props {
     message?: string;
     /** Shows the spinner. Turn off to show the message alone. */
     showSpinner?: boolean;
-    /** Covers the whole viewport on a plain surface, for app start-up and sign-in checks. */
+    /** Covers the whole viewport on the page background with a 32px spinner, for app start-up and sign-in checks. */
     fullPage?: boolean;
     /** CSS minimum height when not `fullPage`. The preloader also grows to fill its container. */
     minHeight?: string;