@bridge-ui/vue 0.6.0 → 0.7.0

package/dist/Components/FormField/UnderlinedFormField.vue_vue_type_script_setup_true_lang.js

@@ -1,42 +1,47 @@
 import { hasNamedSlot as e, hasSlotOrProp as t, isPropPresent as n } from "../../Utils/slotOrProp.js";
 import r from "../Icon/Icon.js";
-import i from "./FormFieldLabel.js";
-import { Fragment as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createSlots as l, createTextVNode as u, createVNode as d, defineComponent as f, guardReactiveProps as p, mergeProps as m, normalizeProps as h, openBlock as g, renderSlot as _, toDisplayString as v, unref as y, useSlots as b, withCtx as x } from "vue";
+import i from "./FormFieldCorner.js";
+import a from "./FormFieldLabel.js";
+import { Fragment as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createSlots as u, createTextVNode as d, createVNode as f, defineComponent as p, guardReactiveProps as m, mergeProps as h, normalizeProps as g, openBlock as _, renderSlot as v, toDisplayString as y, unref as b, useSlots as x, withCtx as S } from "vue";
 //#region src/Components/FormField/UnderlinedFormField.vue?vue&type=script&setup=true&lang.ts
-var S = [
+var C = [
 	"data-invalid",
 	"aria-disabled",
 	"aria-readonly"
-], C = ["id"], w = ["id", "aria-hidden"], T = /*@__PURE__*/ f({
+], w = ["id"], T = ["id", "aria-hidden"], E = /*@__PURE__*/ p({
 	__name: "UnderlinedFormField",
 	props: { api: {} },
-	setup(f) {
-		let T = b();
-		return (b, E) => (g(), s("div", m(f.api.rootBind.value, {
-			"data-invalid": f.api.invalidated.value || void 0,
-			"aria-disabled": f.api.isDisabled.value || void 0,
-			"aria-readonly": f.api.isReadonly.value || void 0
+	setup(p) {
+		let E = x();
+		return (x, D) => (_(), c("div", h(p.api.rootBind.value, {
+			"data-invalid": p.api.invalidated.value || void 0,
+			"aria-disabled": p.api.isDisabled.value || void 0,
+			"aria-readonly": p.api.isReadonly.value || void 0
 		}), [
-			y(t)(y(T), "label", f.api.merged.value.label) || y(t)(y(T), "corner", f.api.merged.value.corner) ? (g(), s("div", h(m({ key: 0 }, f.api.headerBind.value)), [d(i, { api: f.api }, l({ _: 2 }, [y(e)(y(T), "label") ? {
+			b(t)(b(E), "label", p.api.merged.value.label) || b(t)(b(E), "corner", p.api.merged.value.corner) ? (_(), c("div", g(h({ key: 0 }, p.api.headerBind.value)), [f(a, { api: p.api }, u({ _: 2 }, [b(e)(b(E), "label") ? {
 				name: "label",
-				fn: x(() => [_(b.$slots, "label")]),
+				fn: S(() => [v(x.$slots, "label")]),
 				key: "0"
-			} : void 0]), 1032, ["api"]), y(t)(y(T), "corner", f.api.merged.value.corner) ? (g(), s("span", h(m({ key: 0 }, f.api.cornerBind.value)), [y(e)(y(T), "corner") ? _(b.$slots, "corner", {}, void 0, void 0, 0) : y(n)(f.api.merged.value.corner) ? (g(), s(a, { key: 1 }, [u(v(f.api.merged.value.corner), 1)], 64)) : o("", !0)], 16)) : o("", !0)], 16)) : o("", !0),
-			c("div", h(p(f.api.containerBind.value)), [
-				y(e)(y(T), "start") ? (g(), s("div", h(m({ key: 0 }, f.api.startSlotBind.value)), [_(b.$slots, "start")], 16)) : y(n)(f.api.merged.value.start) ? (g(), s("div", h(m({ key: 1 }, f.api.startBind.value)), v(f.api.merged.value.start), 17)) : f.api.merged.value.startIcon ? (g(), s("div", h(m({ key: 2 }, f.api.startBind.value)), [d(y(r), m({ size: f.api.merged.value.size }, f.api.startIconBind.value, { icon: f.api.merged.value.startIcon }), null, 16, ["size", "icon"])], 16)) : o("", !0),
-				_(b.$slots, "default"),
-				y(e)(y(T), "end") ? (g(), s("div", h(m({ key: 3 }, f.api.endSlotBind.value)), [_(b.$slots, "end")], 16)) : y(n)(f.api.merged.value.end) ? (g(), s("div", h(m({ key: 4 }, f.api.endBind.value)), v(f.api.merged.value.end), 17)) : f.api.invalidated.value && f.api.merged.value.showErrorIcon !== !1 ? (g(), s("div", h(m({ key: 5 }, f.api.endBind.value)), [d(y(r), m({
-					icon: f.api.errorIcon.value,
-					size: f.api.merged.value.size
-				}, f.api.endIconBind.value), null, 16, ["icon", "size"])], 16)) : f.api.merged.value.endIcon ? (g(), s("div", h(m({ key: 6 }, f.api.endBind.value)), [d(y(r), m({ size: f.api.merged.value.size }, f.api.endIconBind.value, { icon: f.api.merged.value.endIcon }), null, 16, ["size", "icon"])], 16)) : o("", !0)
+			} : void 0]), 1032, ["api"]), f(i, { api: p.api }, u({ _: 2 }, [b(e)(b(E), "corner") ? {
+				name: "corner",
+				fn: S(() => [v(x.$slots, "corner")]),
+				key: "0"
+			} : void 0]), 1032, ["api"])], 16)) : s("", !0),
+			l("div", g(m(p.api.containerBind.value)), [
+				b(e)(b(E), "start") ? (_(), c("div", g(h({ key: 0 }, p.api.startSlotBind.value)), [v(x.$slots, "start")], 16)) : b(n)(p.api.merged.value.start) ? (_(), c("div", g(h({ key: 1 }, p.api.startBind.value)), y(p.api.merged.value.start), 17)) : p.api.merged.value.startIcon ? (_(), c("div", g(h({ key: 2 }, p.api.startBind.value)), [f(b(r), h({ size: p.api.merged.value.size }, p.api.startIconBind.value, { icon: p.api.merged.value.startIcon }), null, 16, ["size", "icon"])], 16)) : s("", !0),
+				v(x.$slots, "default"),
+				b(e)(b(E), "end") ? (_(), c("div", g(h({ key: 3 }, p.api.endSlotBind.value)), [v(x.$slots, "end")], 16)) : b(n)(p.api.merged.value.end) ? (_(), c("div", g(h({ key: 4 }, p.api.endBind.value)), y(p.api.merged.value.end), 17)) : p.api.invalidated.value && p.api.merged.value.showErrorIcon !== !1 ? (_(), c("div", g(h({ key: 5 }, p.api.endBind.value)), [f(b(r), h({
+					icon: p.api.errorIcon.value,
+					size: p.api.merged.value.size
+				}, p.api.endIconBind.value), null, 16, ["icon", "size"])], 16)) : p.api.merged.value.endIcon ? (_(), c("div", g(h({ key: 6 }, p.api.endBind.value)), [f(b(r), h({ size: p.api.merged.value.size }, p.api.endIconBind.value, { icon: p.api.merged.value.endIcon }), null, 16, ["size", "icon"])], 16)) : s("", !0)
 			], 16),
-			!f.api.invalidated.value && y(t)(y(T), "description", f.api.merged.value.description) ? (g(), s("p", m({ key: 1 }, f.api.descriptionBind.value, { id: `${f.api.controlId.value}-description` }), [y(e)(y(T), "description") ? _(b.$slots, "description", {}, void 0, void 0, 0) : y(n)(f.api.merged.value.description) ? (g(), s(a, { key: 1 }, [u(v(f.api.merged.value.description), 1)], 64)) : o("", !0)], 16, C)) : o("", !0),
-			f.api.merged.value.hideErrorMessage ? o("", !0) : (g(), s("p", m({ key: 2 }, f.api.errorBind.value, {
-				id: `${f.api.controlId.value}-error`,
-				"aria-hidden": !f.api.showErrorMessageContent.value || void 0
-			}), [f.api.showErrorMessageContent.value ? (g(), s(a, { key: 0 }, [y(e)(y(T), "errorMessage") ? _(b.$slots, "errorMessage", {}, void 0, void 0, 0) : y(n)(f.api.merged.value.errorMessage) ? (g(), s(a, { key: 1 }, [u(v(f.api.merged.value.errorMessage), 1)], 64)) : o("", !0)], 64)) : o("", !0)], 16, w))
-		], 16, S));
+			!p.api.invalidated.value && b(t)(b(E), "description", p.api.merged.value.description) ? (_(), c("p", h({ key: 1 }, p.api.descriptionBind.value, { id: `${p.api.controlId.value}-description` }), [b(e)(b(E), "description") ? v(x.$slots, "description", {}, void 0, void 0, 0) : b(n)(p.api.merged.value.description) ? (_(), c(o, { key: 1 }, [d(y(p.api.merged.value.description), 1)], 64)) : s("", !0)], 16, w)) : s("", !0),
+			p.api.merged.value.hideErrorMessage ? s("", !0) : (_(), c("p", h({ key: 2 }, p.api.errorBind.value, {
+				id: `${p.api.controlId.value}-error`,
+				"aria-hidden": !p.api.showErrorMessageContent.value || void 0
+			}), [p.api.showErrorMessageContent.value ? (_(), c(o, { key: 0 }, [b(e)(b(E), "errorMessage") ? v(x.$slots, "errorMessage", {}, void 0, void 0, 0) : b(n)(p.api.merged.value.errorMessage) ? (_(), c(o, { key: 1 }, [d(y(p.api.merged.value.errorMessage), 1)], 64)) : s("", !0)], 64)) : s("", !0)], 16, T))
+		], 16, C));
 	}
 });
 //#endregion
-export { T as default };
+export { E as default };

package/dist/Components/FormField/composables/useFormField.d.ts

@@ -451,7 +451,6 @@ export declare function useFormField(props: MaybeRefOrGetter<Omit<FormFieldOwnPr
     isNotched: import('vue').ComputedRef<boolean>;
     isStacked: import('vue').ComputedRef<boolean>;
     startBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
-    cornerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
     headerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
     isDisabled: import('vue').ComputedRef<boolean>;
     isReadonly: import('vue').ComputedRef<boolean>;
@@ -469,6 +468,7 @@ export declare function useFormField(props: MaybeRefOrGetter<Omit<FormFieldOwnPr
     ariaDescribedBy: import('vue').ComputedRef<string | undefined>;
     descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
     stackedBodyBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;
+    fieldCornerProps: import('vue').ComputedRef<LabelProps>;
     hasInsetLabelRow: import('vue').ComputedRef<boolean>;
     insetLabelRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
     stackedInputRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;

package/dist/Components/FormField/composables/useFormField.js

@@ -90,10 +90,12 @@ function x(x, ee, S = {}) {
 			[A.value.root ?? ""]: !0
 		}));
 	}), ie = o(() => r(O.value?.errorMessage, {}, g({
-		"mt-2": !0,
+		"mt-1": !0,
 		"min-h-[1lh]": V.value,
 		"text-error-600 dark:text-error-400": !0,
 		[q.value?.text ?? ""]: !0,
+		[q.value?.insetStart ?? ""]: !0,
+		[q.value?.insetEnd ?? ""]: !0,
 		[A.value.errorMessage ?? ""]: !0
 	}))), ae = o(() => r({
 		...O.value?.input,
@@ -134,12 +136,14 @@ function x(x, ee, S = {}) {
 		"text-dark-400": !0,
 		[J.value?.start ?? ""]: !0,
 		[A.value.start ?? ""]: !0
-	}))), se = o(() => r(O.value?.corner, {}, g({
-		"text-dark-500 dark:text-dark-400": !I.value,
-		[q.value?.text ?? ""]: !0,
-		[X.value?.corner ?? ""]: I.value,
-		[A.value.corner ?? ""]: !0
-	}))), ce = o(() => {
+	}))), se = o(() => n(O.value?.corner, {
+		for: H.value,
+		size: E.value.size,
+		classes: { root: g({
+			[X.value?.corner ?? ""]: I.value,
+			[A.value.corner ?? ""]: !0
+		}) }
+	})), ce = o(() => {
 		let e = t(w, "label", E.value.label);
 		return r(O.value?.header, {}, g({
 			flex: !0,
@@ -181,7 +185,6 @@ function x(x, ee, S = {}) {
 		isNotched: I,
 		isStacked: L,
 		startBind: $,
-		cornerBind: se,
 		headerBind: le,
 		isDisabled: M,
 		isReadonly: N,
@@ -219,11 +222,14 @@ function x(x, ee, S = {}) {
 		fieldLabelProps: oe,
 		ariaDescribedBy: K,
 		descriptionBind: o(() => r(O.value?.description, {}, g({
-			"mt-2 text-dark-500 dark:text-dark-400": !0,
+			"mt-1 text-dark-500 dark:text-dark-400": !0,
 			[q.value?.text ?? ""]: !0,
+			[q.value?.insetStart ?? ""]: !0,
+			[q.value?.insetEnd ?? ""]: !0,
 			[A.value.description ?? ""]: !0
 		}))),
 		stackedBodyBind: fe,
+		fieldCornerProps: se,
 		hasInsetLabelRow: W,
 		insetLabelRowBind: ce,
 		stackedInputRowBind: pe,

package/dist/Components/FormField/formField.types.d.ts

@@ -61,9 +61,11 @@ export interface FormFieldCustomProps {
      */
     container?: HTMLAttributes;
     /**
-     * Props forwarded to the corner label element.
+     * Props forwarded to the corner `Label` (content stays owned by `FormField`).
+     *
+     * @default undefined
      */
-    corner?: HTMLAttributes;
+    corner?: Partial<LabelProps>;
     /**
      * Props forwarded to the helper text below the control.
      */

package/dist/Components/NumberField/composables/useNumberField.d.ts

@@ -439,7 +439,6 @@ export declare function useNumberField(props: NumberFieldOwnProps, model: Ref<nu
         isNotched: import('vue').ComputedRef<boolean>;
         isStacked: import('vue').ComputedRef<boolean>;
         startBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-        cornerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         headerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         isDisabled: import('vue').ComputedRef<boolean>;
         isReadonly: import('vue').ComputedRef<boolean>;
@@ -457,6 +456,7 @@ export declare function useNumberField(props: NumberFieldOwnProps, model: Ref<nu
         ariaDescribedBy: import('vue').ComputedRef<string | undefined>;
         descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         stackedBodyBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;
+        fieldCornerProps: import('vue').ComputedRef<import('../../Label').LabelProps>;
         hasInsetLabelRow: import('vue').ComputedRef<boolean>;
         insetLabelRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         stackedInputRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;

package/dist/Components/OtpField/composables/useOtpField.d.ts

@@ -41,7 +41,6 @@ export declare function useOtpField(props: MaybeRefOrGetter<OtpFieldOwnProps>, m
         }>>;
         controlId: import('vue').ComputedRef<string>;
         headerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-        cornerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         isDisabled: import('vue').ComputedRef<boolean>;
         isReadonly: import('vue').ComputedRef<boolean>;
         sizeClasses: import('vue').ComputedRef<import('@bridge-ui/core/Tokens').BaseFieldSizeItem | undefined>;
@@ -52,6 +51,7 @@ export declare function useOtpField(props: MaybeRefOrGetter<OtpFieldOwnProps>, m
         ariaDescribedBy: import('vue').ComputedRef<string | undefined>;
         fieldLabelProps: import('vue').ComputedRef<import('../../Label').LabelProps>;
         descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        fieldCornerProps: import('vue').ComputedRef<import('../../Label').LabelProps>;
         showErrorMessageContent: import('vue').ComputedRef<boolean>;
     };
     inputBind: (index: number) => import('@bridge-ui/core/Utils').MergePartBind<object, "class", {

package/dist/Components/Pagination/Pagination.vue_vue_type_script_setup_true_lang.js

@@ -51,25 +51,25 @@ var y = {
 		"update:modelValue"
 	], ["update:modelValue"]),
 	setup(c, { emit: u }) {
-		let S = u, C = c, w = v(c, "modelValue"), { entries: T, showPrev: E, showNext: D, rootBind: O, listBind: k, prevBind: A, nextBind: j, getItemBind: M, prevIconBind: N, nextIconBind: P, getEllipsisBind: F } = t(C, {
+		let S = u, C = c, w = v(c, "modelValue"), { entries: T, showPrev: E, showNext: D, rootBind: O, listBind: k, prevBind: A, nextBind: j, prevLabel: M, nextLabel: N, getItemBind: P, prevIconBind: F, nextIconBind: I, getEllipsisBind: L } = t(C, {
 			size: "md",
 			rounded: "md",
-			variant: "text",
+			color: "dark",
 			disabled: !1,
 			siblingCount: 1,
+			variant: "ghost",
 			mode: "numbered",
-			color: "primary",
 			boundaryCount: 1,
 			hideNextButton: !1,
 			hidePrevButton: !1
 		}, w, S);
 		return (t, c) => (p(), i("nav", f(l(_(O))), [a("ul", f(l(_(k))), [
-			_(E) ? (p(), i("li", y, [a("button", f(l(_(A))), [h(t.$slots, "prev", {}, () => [s(_(e), d({ icon: "chevronLeft" }, _(N)), null, 16)])], 16)])) : r("", !0),
+			_(E) ? (p(), i("li", y, [a("button", f(l(_(A))), [h(t.$slots, "prev", {}, () => [s(_(e), d({ icon: "chevronLeft" }, _(F)), null, 16), o(" " + g(_(M)), 1)])], 16)])) : r("", !0),
 			(p(!0), i(n, null, m(_(T), (e, r) => (p(), i(n, { key: `${e.type}-${r}` }, [e.type === "ellipsis" ? (p(), i("li", d({
 				key: 0,
 				ref_for: !0
-			}, _(F)(r)), [h(t.$slots, "ellipsis", {}, () => [c[0] ||= o("…", -1)])], 16)) : (p(), i("li", b, [a("button", d({ ref_for: !0 }, _(M)(e.page)), g(e.page), 17)]))], 64))), 128)),
-			_(D) ? (p(), i("li", x, [a("button", f(l(_(j))), [h(t.$slots, "next", {}, () => [s(_(e), d({ icon: "chevronRight" }, _(P)), null, 16)])], 16)])) : r("", !0)
+			}, _(L)(r)), [h(t.$slots, "ellipsis", {}, () => [c[0] ||= o("…", -1)])], 16)) : (p(), i("li", b, [a("button", d({ ref_for: !0 }, _(P)(e.page)), g(e.page), 17)]))], 64))), 128)),
+			_(D) ? (p(), i("li", x, [a("button", f(l(_(j))), [h(t.$slots, "next", {}, () => [o(g(_(N)) + " ", 1), s(_(e), d({ icon: "chevronRight" }, _(I)), null, 16)])], 16)])) : r("", !0)
 		], 16)], 16));
 	}
 });

package/dist/Components/Pagination/composables/usePagination.d.ts

@@ -24,17 +24,19 @@ export declare function usePagination(props: PaginationOwnProps, libDefaults: Pa
     prevBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         onClick: () => void;
         type: "button";
-        "aria-label": string;
         disabled: boolean;
+        "aria-label": string;
         class: string;
     }, "class", import('vue').ButtonHTMLAttributes | undefined, {}>>;
     nextBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         onClick: () => void;
-        "aria-label": string;
         type: "button";
         disabled: boolean;
+        "aria-label": string;
         class: string;
     }, "class", import('vue').ButtonHTMLAttributes | undefined, {}>>;
+    prevLabel: import('vue').ComputedRef<string>;
+    nextLabel: import('vue').ComputedRef<string>;
     getItemBind: (pageNumber: number) => import('@bridge-ui/core/Utils').MergePartBind<{
         type: "button";
         disabled: NonNullable<boolean | undefined>;

package/dist/Components/Pagination/composables/usePagination.js

@@ -1,11 +1,12 @@
-import { mergePartBind as e, useBridgeUIComponent as t, useBridgeUIMergedRegistryClasses as n } from "../../../Utils/index.js";
-import { computed as r, useAttrs as i, useSlots as a } from "vue";
-import { get as o } from "es-toolkit/compat";
-import { getPaginationItems as s } from "@bridge-ui/core/Domain";
-import { paginationColorProps as ee, paginationRoundedProps as c, paginationSizeProps as l, paginationVariantProps as u } from "@bridge-ui/core/Tokens";
-import { cn as d, mergeBridgeUILayeredClasses as f, splitComponentProps as p } from "@bridge-ui/core/Utils";
+import { useResolveMessage as e } from "../../../Adapters/I18n/useI18nAdapter.js";
+import { mergePartBind as t, useBridgeUIComponent as n, useBridgeUIMergedRegistryClasses as r } from "../../../Utils/index.js";
+import { computed as i, useAttrs as a, useSlots as o } from "vue";
+import { get as s } from "es-toolkit/compat";
+import { getPaginationItems as c } from "@bridge-ui/core/Domain";
+import { paginationColorProps as l, paginationRoundedProps as u, paginationSizeProps as d, paginationVariantProps as f } from "@bridge-ui/core/Tokens";
+import { cn as p, mergeBridgeUILayeredClasses as m, splitComponentProps as h } from "@bridge-ui/core/Utils";
 //#region src/Components/Pagination/composables/usePagination.ts
-var m = [
+var g = [
 	"mode",
 	"size",
 	"color",
@@ -23,166 +24,163 @@ var m = [
 	"hideNextButton",
 	"hidePrevButton"
 ];
-function h(h, g, _, v) {
-	let y = i(), b = a(), x = r(() => p({
+function _(_, v, y, b) {
+	let x = e(), S = a(), C = o(), w = i(() => h({
 		props: {
-			...y,
-			...h
+			...S,
+			..._
 		},
-		bridgeKeys: m
-	})), { merged: S, entry: C } = t({
-		libDefaults: g,
+		bridgeKeys: g
+	})), { merged: T, entry: E } = n({
+		libDefaults: v,
 		componentName: "Pagination",
-		props: () => x.value.componentProps
-	}), w = r(() => S.value.customProps), T = r(() => S.value.mode === "simple" ? 1 : _.value ?? 1), E = r(() => S.value.mode === "simple" ? [] : s({
-		page: T.value,
-		count: S.value.count ?? 0,
-		siblingCount: S.value.siblingCount,
-		boundaryCount: S.value.boundaryCount
-	})), D = n({
-		entry: C,
-		props: () => x.value.componentProps
-	}), O = r(() => f(l, C.value?.tokens?.size)), k = r(() => f(u, C.value?.tokens?.variant)), A = r(() => f(ee, C.value?.tokens?.color)), j = r(() => f(c, C.value?.tokens?.rounded)), M = r(() => o(O.value, S.value.size)), N = r(() => o(k.value, S.value.variant)), P = r(() => o(A.value, S.value.color)), F = r(() => o(j.value, S.value.rounded)), I = (e) => {
-		if (S.value.disabled) return;
-		let t = S.value.count ?? 0, n = Math.min(Math.max(1, e), Math.max(t, 1));
-		_.value = n, v("change", n), v("update:modelValue", n);
-	}, L = () => {
-		if (!S.value.disabled) {
-			if (S.value.mode === "simple") {
-				if (S.value.hasPrevious === !1) return;
-				v("previous");
+		props: () => w.value.componentProps
+	}), D = i(() => T.value.customProps), O = i(() => T.value.mode === "simple" ? 1 : y.value ?? 1), k = i(() => T.value.mode === "simple" ? [] : c({
+		page: O.value,
+		count: T.value.count ?? 0,
+		siblingCount: T.value.siblingCount,
+		boundaryCount: T.value.boundaryCount
+	})), A = r({
+		entry: E,
+		props: () => w.value.componentProps
+	}), j = i(() => m(d, E.value?.tokens?.size)), M = i(() => m(f, E.value?.tokens?.variant)), ee = i(() => m(l, E.value?.tokens?.color)), te = i(() => m(u, E.value?.tokens?.rounded)), N = i(() => s(j.value, T.value.size)), P = i(() => s(M.value, T.value.variant)), F = i(() => s(ee.value, T.value.color)), I = i(() => s(te.value, T.value.rounded)), L = (e) => {
+		if (T.value.disabled) return;
+		let t = T.value.count ?? 0, n = Math.min(Math.max(1, e), Math.max(t, 1));
+		y.value = n, b("change", n), b("update:modelValue", n);
+	}, R = () => {
+		if (!T.value.disabled) {
+			if (T.value.mode === "simple") {
+				if (T.value.hasPrevious === !1) return;
+				b("previous");
 				return;
 			}
-			I(T.value - 1);
+			L(O.value - 1);
 		}
-	}, R = () => {
-		if (!S.value.disabled) {
-			if (S.value.mode === "simple") {
-				if (S.value.hasNext === !1) return;
-				v("next");
+	}, z = () => {
+		if (!T.value.disabled) {
+			if (T.value.mode === "simple") {
+				if (T.value.hasNext === !1) return;
+				b("next");
 				return;
 			}
-			I(T.value + 1);
+			L(O.value + 1);
 		}
-	}, z = r(() => S.value.disabled ? !0 : S.value.mode === "simple" ? S.value.hasPrevious === !1 : T.value <= 1), B = r(() => S.value.disabled ? !0 : S.value.mode === "simple" ? S.value.hasNext === !1 : T.value >= (S.value.count ?? 0)), V = r(() => !S.value.hidePrevButton), H = r(() => !S.value.hideNextButton), U = r(() => S.value.variant === "outlined"), W = r(() => S.value.variant === "ghost"), G = r(() => d({
-		[o(M.value, "item") ?? ""]: !0,
-		[o(N.value, "item") ?? ""]: !0,
-		[o(F.value, "item") ?? ""]: W.value
-	})), K = r(() => d({
-		[o(M.value, "itemIcon") ?? ""]: !0,
-		[o(N.value, "item") ?? ""]: !0,
-		[o(F.value, "item") ?? ""]: W.value
-	})), q = r(() => {
-		let e = S.value.variant;
-		return d({
-			[o(N.value, "itemSelected") ?? ""]: !0,
-			[o(P.value, "itemSelectedFilled") ?? ""]: e === "outlined",
-			[o(P.value, "itemSelectedAccent") ?? ""]: e === "text" || e === "ghost",
-			[o(P.value, "itemSelectedSoft") ?? ""]: e === "ghost"
-		});
-	}), J = r(() => {
-		let e = E.value.filter((e) => e.type === "page");
+	}, B = i(() => T.value.disabled ? !0 : T.value.mode === "simple" ? T.value.hasPrevious === !1 : O.value <= 1), V = i(() => T.value.disabled ? !0 : T.value.mode === "simple" ? T.value.hasNext === !1 : O.value >= (T.value.count ?? 0)), H = i(() => !T.value.hidePrevButton), U = i(() => !T.value.hideNextButton), W = i(() => T.value.variant === "outlined"), G = i(() => T.value.variant === "ghost" || T.value.variant === "text"), K = i(() => p({
+		[s(N.value, "item") ?? ""]: !0,
+		[s(P.value, "item") ?? ""]: !0,
+		[s(I.value, "item") ?? ""]: G.value
+	})), q = i(() => p({
+		[s(N.value, "itemIcon") ?? ""]: !0,
+		[s(P.value, "item") ?? ""]: !0,
+		[s(I.value, "item") ?? ""]: G.value
+	})), J = i(() => p({
+		[s(P.value, "itemSelected") ?? ""]: !0,
+		[s(F.value, "itemSelectedAccent") ?? ""]: !0
+	})), Y = i(() => {
+		let e = k.value.filter((e) => e.type === "page");
 		return {
 			first: e[0]?.page,
 			last: e[e.length - 1]?.page
 		};
-	}), Y = (e, t) => {
-		if (!U.value) return !1;
+	}), X = (e, t) => {
+		if (!W.value) return !1;
 		if (e === "prev") return !0;
-		if (V.value) return !1;
-		let n = E.value[0];
+		if (H.value) return !1;
+		let n = k.value[0];
 		return e === "page" ? n?.type === "page" && n.page === t : e === "ellipsis" && n?.type === "ellipsis" && t === 0;
-	}, X = r(() => {
-		let t = x.value.inheritedAttrs;
-		return e(w.value?.root, t, {
-			"aria-label": t["aria-label"] ?? "Pagination",
-			class: d({
-				[o(M.value, "root") ?? ""]: !0,
-				[o(D.value, "root") ?? ""]: !0
+	}, Z = i(() => x("Previous")), Q = i(() => x("Next")), ne = i(() => {
+		let e = w.value.inheritedAttrs;
+		return t(D.value?.root, e, {
+			"aria-label": e["aria-label"] ?? x("Pagination"),
+			class: p({
+				[s(N.value, "root") ?? ""]: !0,
+				[s(A.value, "root") ?? ""]: !0
 			})
 		});
-	}), Z = r(() => e(w.value?.list, {}, { class: d({
-		[o(M.value, "list") ?? ""]: !0,
-		[o(N.value, "list") ?? ""]: !0,
-		[o(F.value, "list") ?? ""]: U.value,
-		[o(D.value, "list") ?? ""]: !0
-	}) })), Q = (t) => {
-		let n = t === T.value, r = U.value && !V.value && t === J.value.first, i = U.value && !H.value && t === J.value.last;
-		return e(w.value?.item, {}, {
+	}), re = i(() => t(D.value?.list, {}, { class: p({
+		[s(N.value, "list") ?? ""]: !0,
+		[s(P.value, "list") ?? ""]: !0,
+		[s(I.value, "list") ?? ""]: W.value,
+		[s(A.value, "list") ?? ""]: !0
+	}) })), ie = (e) => {
+		let n = e === O.value, r = W.value && !H.value && e === Y.value.first, i = W.value && !U.value && e === Y.value.last;
+		return t(D.value?.item, {}, {
 			type: "button",
-			disabled: S.value.disabled,
-			"aria-label": `Page ${t}`,
+			disabled: T.value.disabled,
+			"aria-label": `Page ${e}`,
 			"aria-current": n ? "page" : void 0,
 			onClick: () => {
-				n || I(t);
+				n || L(e);
 			},
-			class: d({
-				[G.value]: !0,
-				[q.value]: n,
-				[o(D.value, "item") ?? ""]: !0,
-				"ml-0": Y("page", t),
-				[o(F.value, "itemStart") ?? ""]: r,
-				[o(F.value, "itemEnd") ?? ""]: i
+			class: p({
+				[K.value]: !0,
+				[J.value]: n,
+				[s(A.value, "item") ?? ""]: !0,
+				"ml-0": X("page", e),
+				[s(I.value, "itemStart") ?? ""]: r,
+				[s(I.value, "itemEnd") ?? ""]: i
 			})
 		});
-	}, te = (t) => e(w.value?.ellipsis, {}, {
+	}, ae = (e) => t(D.value?.ellipsis, {}, {
 		"aria-hidden": !0,
-		"data-ellipsis-index": t,
-		class: d({
-			[o(M.value, "ellipsis") ?? ""]: !0,
-			[o(N.value, "ellipsis") ?? ""]: !0,
-			[o(F.value, "item") ?? ""]: W.value,
-			[o(D.value, "ellipsis") ?? ""]: !0,
-			"ml-0": Y("ellipsis", t)
+		"data-ellipsis-index": e,
+		class: p({
+			[s(N.value, "ellipsis") ?? ""]: !0,
+			[s(P.value, "ellipsis") ?? ""]: !0,
+			[s(I.value, "item") ?? ""]: G.value,
+			[s(A.value, "ellipsis") ?? ""]: !0,
+			"ml-0": X("ellipsis", e)
 		})
-	}), $ = r(() => o(M.value, "icon") ?? "sm");
+	}), $ = i(() => s(N.value, "icon") ?? "sm");
 	return {
-		page: T,
-		slots: b,
-		merged: S,
-		entries: E,
-		showPrev: V,
-		showNext: H,
-		rootBind: X,
-		listBind: Z,
-		prevBind: r(() => e(w.value?.prev, {}, {
-			onClick: L,
+		page: O,
+		slots: C,
+		merged: T,
+		entries: k,
+		showPrev: H,
+		showNext: U,
+		rootBind: ne,
+		listBind: re,
+		prevBind: i(() => t(D.value?.prev, {}, {
+			onClick: R,
 			type: "button",
-			"aria-label": "Previous",
-			disabled: z.value,
-			class: d({
-				[K.value]: !0,
-				[o(D.value, "prev") ?? ""]: !0,
-				[o(D.value, "item") ?? ""]: !0,
-				"ml-0": U.value,
-				[o(F.value, "itemStart") ?? ""]: U.value
+			disabled: B.value,
+			"aria-label": Z.value,
+			class: p({
+				[q.value]: !0,
+				[s(A.value, "prev") ?? ""]: !0,
+				[s(A.value, "item") ?? ""]: !0,
+				"ml-0": W.value,
+				[s(I.value, "itemStart") ?? ""]: W.value
 			})
 		})),
-		nextBind: r(() => e(w.value?.next, {}, {
-			onClick: R,
-			"aria-label": "Next",
+		nextBind: i(() => t(D.value?.next, {}, {
+			onClick: z,
 			type: "button",
-			disabled: B.value,
-			class: d({
-				[K.value]: !0,
-				[o(D.value, "next") ?? ""]: !0,
-				[o(D.value, "item") ?? ""]: !0,
-				[o(F.value, "itemEnd") ?? ""]: U.value
+			disabled: V.value,
+			"aria-label": Q.value,
+			class: p({
+				[q.value]: !0,
+				[s(A.value, "next") ?? ""]: !0,
+				[s(A.value, "item") ?? ""]: !0,
+				[s(I.value, "itemEnd") ?? ""]: W.value
 			})
 		})),
-		getItemBind: Q,
-		prevIconBind: r(() => e(w.value?.prevIcon, {}, {
+		prevLabel: Z,
+		nextLabel: Q,
+		getItemBind: ie,
+		prevIconBind: i(() => t(D.value?.prevIcon, {}, {
 			"aria-hidden": !0,
 			size: $.value,
 			class: "shrink-0 pointer-events-none"
 		})),
-		nextIconBind: r(() => e(w.value?.nextIcon, {}, {
+		nextIconBind: i(() => t(D.value?.nextIcon, {}, {
 			"aria-hidden": !0,
 			size: $.value,
 			class: "shrink-0 pointer-events-none"
 		})),
-		getEllipsisBind: te
+		getEllipsisBind: ae
 	};
 }
 //#endregion
-export { h as usePagination };
+export { _ as usePagination };

package/dist/Components/Pagination/pagination.types.d.ts

@@ -117,9 +117,9 @@ export interface PaginationOwnProps {
      */
     classes?: PaginationClasses;
     /**
-     * Selected page accent color.
+     * Optional text accent for the selected page. Selected surface comes from `variant`.
      *
-     * @default "primary"
+     * @default "dark"
      */
     color?: MergeProps<PaginationColor, PaginationColorOverrides>;
     /**
@@ -165,7 +165,7 @@ export interface PaginationOwnProps {
      */
     hidePrevButton?: boolean;
     /**
-     * Numbered pages vs prev/next only.
+     * Numbered pages, or prev/next only.
      *
      * @default "numbered"
      */
@@ -177,7 +177,7 @@ export interface PaginationOwnProps {
      */
     modelValue?: number;
     /**
-     * Control corner radius (`ghost` items / `outlined` group edges).
+     * Control corner radius (`ghost` / `text` items and `outlined` group edges).
      *
      * @default "md"
      */
@@ -197,7 +197,7 @@ export interface PaginationOwnProps {
     /**
      * Visual style of page / control buttons.
      *
-     * @default "text"
+     * @default "ghost"
      */
     variant?: MergeProps<PaginationVariant, PaginationVariantOverrides>;
 }