@7pmlabs/design-system 2.0.8 → 2.1.0

package/dist/design-system166.js

@@ -1,9 +1,310 @@
-import e from "./design-system14.js";
-import t from "./design-system164.js";
-/* empty css                 */
-//#region src/components/BRadio/BRadio.vue
-var n = /* @__PURE__ */ e(t, [["__scopeId", "data-v-58cd3e1a"]]);
+import e from "./design-system27.js";
+import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, openBlock as l, ref as u, renderList as d, toDisplayString as f, unref as p, watch as m } from "vue";
+//#region src/components/BPagination/BPagination.vue?vue&type=script&setup=true&lang.ts
+var h = ["aria-label"], g = {
+	key: 0,
+	class: "b-pagination__total"
+}, _ = [
+	"disabled",
+	"aria-disabled",
+	"title"
+], v = { class: "b-pagination__simple-pager" }, y = [
+	"value",
+	"disabled",
+	"aria-label"
+], b = {
+	key: 1,
+	class: "b-pagination__simple-current",
+	"aria-current": "page"
+}, x = { class: "b-pagination__simple-total" }, S = [
+	"disabled",
+	"aria-disabled",
+	"title"
+], C = [
+	"disabled",
+	"aria-disabled",
+	"title"
+], w = [
+	"disabled",
+	"title",
+	"aria-label",
+	"onClick"
+], ee = [
+	"disabled",
+	"aria-current",
+	"aria-label",
+	"title",
+	"onClick"
+], T = [
+	"disabled",
+	"aria-disabled",
+	"title"
+], E = ["value", "disabled"], D = ["value"], O = {
+	key: 4,
+	class: "b-pagination__quick-jumper"
+}, k = ["value", "disabled"], A = /* @__PURE__ */ s({
+	__name: "BPagination",
+	props: {
+		current: {},
+		defaultCurrent: { default: 1 },
+		defaultPageSize: { default: 10 },
+		pageSize: {},
+		pageSizeOptions: { default: () => [
+			10,
+			20,
+			50,
+			100
+		] },
+		total: { default: 0 },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
+		hideOnSinglePage: {
+			type: Boolean,
+			default: !1
+		},
+		showLessItems: {
+			type: Boolean,
+			default: !1
+		},
+		showQuickJumper: {
+			type: [Boolean, Object],
+			default: !1
+		},
+		showSizeChanger: {
+			type: Boolean,
+			default: void 0
+		},
+		showTitle: {
+			type: Boolean,
+			default: !0
+		},
+		showTotal: {},
+		simple: {
+			type: [Boolean, Object],
+			default: !1
+		},
+		size: { default: "default" },
+		align: { default: "start" },
+		totalBoundaryShowSizeChanger: { default: 50 },
+		ariaLabel: { default: "Pagination" }
+	},
+	emits: [
+		"change",
+		"showSizeChange",
+		"update:current",
+		"update:pageSize"
+	],
+	setup(s, { emit: A }) {
+		let j = s, M = A, N = u(j.current ?? j.defaultCurrent), P = u(j.pageSize ?? j.defaultPageSize), F = n(() => j.current !== void 0), I = n(() => j.pageSize !== void 0);
+		m(() => j.current, (e) => {
+			e !== void 0 && (N.value = e);
+		}), m(() => j.pageSize, (e) => {
+			e !== void 0 && (P.value = e);
+		});
+		let L = n(() => F.value ? j.current : N.value), R = n(() => I.value ? j.pageSize : P.value), z = n(() => j.total <= 0 || R.value <= 0 ? 0 : Math.ceil(j.total / R.value)), B = n(() => j.hideOnSinglePage && z.value <= 1), V = n(() => j.showSizeChanger === void 0 ? j.total > j.totalBoundaryShowSizeChanger : j.showSizeChanger), H = n(() => !!j.simple), U = n(() => typeof j.simple == "object" && j.simple.readOnly === !0), W = n(() => {
+			if (!j.showTotal) return "";
+			let e = (L.value - 1) * R.value + 1, t = Math.min(L.value * R.value, j.total);
+			return j.showTotal(j.total, [e, t]);
+		}), G = n(() => {
+			let e = z.value;
+			if (e <= 0) return [];
+			let t = j.showLessItems ? 1 : 2, n = L.value, r = [];
+			if (r.push({
+				type: "page",
+				page: 1
+			}), e <= (j.showLessItems ? 4 : 6) + 2) {
+				for (let t = 2; t <= e; t++) r.push({
+					type: "page",
+					page: t
+				});
+				return r;
+			}
+			let i = Math.max(2, n - t), a = Math.min(e - 1, n + t);
+			i > 2 && r.push({
+				type: "prev-ellipsis",
+				page: Math.max(1, n - (j.showLessItems ? 3 : 5))
+			});
+			for (let e = i; e <= a; e++) r.push({
+				type: "page",
+				page: e
+			});
+			return a < e - 1 && r.push({
+				type: "next-ellipsis",
+				page: Math.min(e, n + (j.showLessItems ? 3 : 5))
+			}), e > 1 && r.push({
+				type: "page",
+				page: e
+			}), r;
+		});
+		function K(e) {
+			if (j.disabled) return;
+			let t = Math.max(1, Math.min(e, z.value));
+			t !== L.value && (F.value || (N.value = t), M("update:current", t), M("change", t, R.value));
+		}
+		function q(e) {
+			if (j.disabled || e === R.value) return;
+			let t = Math.ceil(j.total / e), n = Math.min(L.value, t) || 1;
+			I.value || (P.value = e), F.value || (N.value = n), M("update:pageSize", e), M("update:current", n), M("showSizeChange", n, e), M("change", n, e);
+		}
+		function J() {
+			K(L.value - 1);
+		}
+		function Y() {
+			K(L.value + 1);
+		}
+		let X = u("");
+		function Z(e) {
+			e.key === "Enter" && Q();
+		}
+		function Q() {
+			let e = parseInt(X.value, 10);
+			!isNaN(e) && e >= 1 && e <= z.value && K(e), X.value = "";
+		}
+		let $ = u(String(L.value));
+		m(L, (e) => {
+			$.value = String(e);
+		});
+		function te(e) {
+			if (e.key === "Enter") {
+				let e = parseInt($.value, 10);
+				isNaN(e) ? $.value = String(L.value) : K(e);
+			}
+		}
+		function ne() {
+			let e = parseInt($.value, 10);
+			!isNaN(e) && e >= 1 && e <= z.value ? K(e) : $.value = String(L.value);
+		}
+		let re = n(() => ["b-pagination", {
+			"b-pagination--disabled": j.disabled,
+			"b-pagination--simple": H.value,
+			"b-pagination--small": j.size === "small",
+			"b-pagination--large": j.size === "large",
+			"b-pagination--align-start": j.align === "start",
+			"b-pagination--align-center": j.align === "center",
+			"b-pagination--align-end": j.align === "end"
+		}]);
+		return (n, u) => B.value ? r("", !0) : (l(), i("nav", {
+			key: 0,
+			class: c(re.value),
+			role: "navigation",
+			"aria-label": j.ariaLabel
+		}, [
+			j.showTotal ? (l(), i("span", g, f(W.value), 1)) : r("", !0),
+			H.value ? (l(), i(t, { key: 1 }, [
+				a("button", {
+					class: "b-pagination__item b-pagination__prev",
+					type: "button",
+					disabled: j.disabled || L.value <= 1,
+					"aria-disabled": j.disabled || L.value <= 1 ? "true" : void 0,
+					title: j.showTitle ? "Previous Page" : void 0,
+					"aria-label": "Previous Page",
+					onClick: J
+				}, [o(p(e), {
+					icon: "chevron-left",
+					"aria-hidden": "true"
+				})], 8, _),
+				a("span", v, [
+					U.value ? (l(), i("span", b, f(L.value), 1)) : (l(), i("input", {
+						key: 0,
+						class: "b-pagination__simple-input",
+						type: "text",
+						inputmode: "numeric",
+						value: $.value,
+						disabled: j.disabled,
+						"aria-label": `Page ${L.value} of ${z.value}`,
+						onInput: u[0] ||= (e) => $.value = e.target.value,
+						onKeydown: te,
+						onBlur: ne
+					}, null, 40, y)),
+					u[3] ||= a("span", {
+						class: "b-pagination__simple-separator",
+						"aria-hidden": "true"
+					}, "/", -1),
+					a("span", x, f(z.value), 1)
+				]),
+				a("button", {
+					class: "b-pagination__item b-pagination__next",
+					type: "button",
+					disabled: j.disabled || L.value >= z.value,
+					"aria-disabled": j.disabled || L.value >= z.value ? "true" : void 0,
+					title: j.showTitle ? "Next Page" : void 0,
+					"aria-label": "Next Page",
+					onClick: Y
+				}, [o(p(e), {
+					icon: "chevron-right",
+					"aria-hidden": "true"
+				})], 8, S)
+			], 64)) : (l(), i(t, { key: 2 }, [
+				a("button", {
+					class: "b-pagination__item b-pagination__prev",
+					type: "button",
+					disabled: j.disabled || L.value <= 1,
+					"aria-disabled": j.disabled || L.value <= 1 ? "true" : void 0,
+					title: j.showTitle ? "Previous Page" : void 0,
+					"aria-label": "Previous Page",
+					onClick: J
+				}, [o(p(e), {
+					icon: "chevron-left",
+					"aria-hidden": "true"
+				})], 8, C),
+				(l(!0), i(t, null, d(G.value, (e) => (l(), i(t, { key: `${e.type}-${e.page}` }, [e.type === "prev-ellipsis" || e.type === "next-ellipsis" ? (l(), i("button", {
+					key: 0,
+					class: "b-pagination__item b-pagination__ellipsis",
+					type: "button",
+					disabled: j.disabled,
+					title: j.showTitle ? e.type === "prev-ellipsis" ? "Previous 5 Pages" : "Next 5 Pages" : void 0,
+					"aria-label": e.type === "prev-ellipsis" ? "Previous 5 Pages" : "Next 5 Pages",
+					onClick: (t) => K(e.page)
+				}, [...u[4] ||= [a("span", { "aria-hidden": "true" }, "•••", -1)]], 8, w)) : (l(), i("button", {
+					key: 1,
+					class: c(["b-pagination__item b-pagination__page", { "b-pagination__page--active": e.page === L.value }]),
+					type: "button",
+					disabled: j.disabled,
+					"aria-current": e.page === L.value ? "page" : void 0,
+					"aria-label": `Page ${e.page}`,
+					title: j.showTitle ? `${e.page}` : void 0,
+					onClick: (t) => K(e.page)
+				}, f(e.page), 11, ee))], 64))), 128)),
+				a("button", {
+					class: "b-pagination__item b-pagination__next",
+					type: "button",
+					disabled: j.disabled || L.value >= z.value,
+					"aria-disabled": j.disabled || L.value >= z.value ? "true" : void 0,
+					title: j.showTitle ? "Next Page" : void 0,
+					"aria-label": "Next Page",
+					onClick: Y
+				}, [o(p(e), {
+					icon: "chevron-right",
+					"aria-hidden": "true"
+				})], 8, T)
+			], 64)),
+			V.value && !H.value ? (l(), i("select", {
+				key: 3,
+				class: "b-pagination__size-changer",
+				value: R.value,
+				disabled: j.disabled,
+				"aria-label": "Items per page",
+				onChange: u[1] ||= (e) => q(Number(e.target.value))
+			}, [(l(!0), i(t, null, d(s.pageSizeOptions, (e) => (l(), i("option", {
+				key: e,
+				value: e
+			}, f(e) + " / page", 9, D))), 128))], 40, E)) : r("", !0),
+			j.showQuickJumper && !H.value ? (l(), i("span", O, [u[5] ||= a("span", null, "Go to", -1), a("input", {
+				class: "b-pagination__jumper-input",
+				type: "text",
+				inputmode: "numeric",
+				value: X.value,
+				disabled: j.disabled,
+				"aria-label": "Go to page",
+				onInput: u[2] ||= (e) => X.value = e.target.value,
+				onKeydown: Z
+			}, null, 40, k)])) : r("", !0)
+		], 10, h));
+	}
+});
 //#endregion
-export { n as default };
+export { A as default };
 
 //# sourceMappingURL=design-system166.js.map

package/dist/design-system166.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system166.js","names":[],"sources":["../src/components/BRadio/BRadio.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { computed, inject } from 'vue';\nimport { B_RADIO_GROUP_KEY, type BRadioGroupContext } from './types';\n\n//#region Props\nconst {\n  id = '',\n  disabled = false,\n  value = '',\n  name = '',\n} = defineProps<{\n  /** Custom id attribute for the radio input. */\n  id?: string;\n  /** Whether the radio is disabled. */\n  disabled?: boolean;\n  /** Value when used inside BRadioGroup. */\n  value?: string | number;\n  /** The name attribute for the input element. */\n  name?: string;\n}>();\n\n/**\n * The checked state of the radio.\n */\nconst model = defineModel<boolean>({ default: false });\n\nconst emit = defineEmits<{\n  change: [checked: boolean, event: Event];\n}>();\n//#endregion\n\n//#region Group integration\nconst group = inject<BRadioGroupContext | null>(B_RADIO_GROUP_KEY, null);\n\nconst isDisabled = computed(() => disabled || group?.disabled.value || false);\nconst inputName = computed(() => name || group?.name.value || '');\n\nconst isChecked = computed(() => {\n  if (group) {\n    return group.modelValue.value === value;\n  }\n  return model.value;\n});\n//#endregion\n\n//#region ID generation\nconst { componentUID } = useComponentId();\nconst inputId = computed(() => id || `b-radio-${componentUID.value}`);\n//#endregion\n\n//#region Handlers\nfunction handleChange(event: Event) {\n  if (isDisabled.value) return;\n\n  if (group) {\n    group.setValue(value);\n  } else {\n    model.value = true;\n  }\n  emit('change', true, event);\n}\n//#endregion\n</script>\n\n<template>\n  <label\n    class=\"b-radio b:inline-flex b:cursor-pointer b:items-center b:gap-2 b:leading-none b:select-none\"\n    :class=\"{ 'b-radio--disabled b:cursor-not-allowed b:opacity-50': isDisabled }\"\n    :for=\"inputId\"\n  >\n    <span\n      class=\"b-radio__indicator b:relative b:inline-flex b:shrink-0 b:items-center b:justify-center\"\n      :class=\"{\n        'b-radio__indicator--checked': isChecked,\n        'b-radio__indicator--disabled': isDisabled,\n      }\"\n    >\n      <input\n        :id=\"inputId\"\n        type=\"radio\"\n        class=\"b-radio__input\"\n        :checked=\"isChecked\"\n        :disabled=\"isDisabled\"\n        :name=\"inputName\"\n        :value=\"value\"\n        @change=\"handleChange\"\n      />\n      <span class=\"b-radio__inner\" aria-hidden=\"true\" />\n    </span>\n    <span v-if=\"$slots.default\" class=\"b-radio__label\">\n      <slot />\n    </span>\n  </label>\n</template>\n\n<style scoped>\n.b-radio {\n  --b-radio-size: 16px;\n  --b-radio-dot-size: 8px;\n  --b-radio-color-primary: #1677ff;\n  --b-radio-color-primary-hover: #4096ff;\n  --b-radio-color-border: #d9d9d9;\n  --b-radio-color-bg-container: #ffffff;\n  --b-radio-color-bg-container-disabled: rgba(0, 0, 0, 0.04);\n  --b-radio-color-text-disabled: rgba(0, 0, 0, 0.25);\n  --b-radio-color-border-disabled: #d9d9d9;\n  --b-radio-dot-color-disabled: rgba(0, 0, 0, 0.25);\n  --b-radio-border-width: 1px;\n  --b-radio-font-size: 14px;\n  --b-radio-line-height: 1.5714;\n  --b-radio-wrapper-margin-inline-end: 8px;\n  --b-radio-transition-duration: 0.2s;\n}\n\n[data-prefers-color='dark'] .b-radio {\n  --b-radio-color-primary: #3c89e8;\n  --b-radio-color-primary-hover: #65a9f3;\n  --b-radio-color-border: #424242;\n  --b-radio-color-bg-container: #141414;\n  --b-radio-color-bg-container-disabled: rgba(255, 255, 255, 0.08);\n  --b-radio-color-text-disabled: rgba(255, 255, 255, 0.25);\n  --b-radio-color-border-disabled: #424242;\n  --b-radio-dot-color-disabled: rgba(255, 255, 255, 0.25);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-radio {\n    --b-radio-color-primary: #3c89e8;\n    --b-radio-color-primary-hover: #65a9f3;\n    --b-radio-color-border: #424242;\n    --b-radio-color-bg-container: #141414;\n    --b-radio-color-bg-container-disabled: rgba(255, 255, 255, 0.08);\n    --b-radio-color-text-disabled: rgba(255, 255, 255, 0.25);\n    --b-radio-color-border-disabled: #424242;\n    --b-radio-dot-color-disabled: rgba(255, 255, 255, 0.25);\n  }\n}\n\n.b-radio__label {\n  font-size: var(--b-radio-font-size);\n  line-height: var(--b-radio-line-height);\n  color: inherit;\n}\n\n.b-radio--disabled .b-radio__label {\n  color: var(--b-radio-color-text-disabled);\n}\n\n.b-radio__indicator {\n  width: var(--b-radio-size);\n  height: var(--b-radio-size);\n}\n\n.b-radio__inner {\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  border: var(--b-radio-border-width) solid var(--b-radio-color-border);\n  background-color: var(--b-radio-color-bg-container);\n  transition:\n    background-color var(--b-radio-transition-duration) ease-in-out,\n    border-color var(--b-radio-transition-duration) ease-in-out;\n}\n\n/* Hover state */\n.b-radio:not(.b-radio--disabled):hover .b-radio__inner {\n  border-color: var(--b-radio-color-primary-hover);\n}\n\n/* Checked state */\n.b-radio__indicator--checked .b-radio__inner {\n  border-color: var(--b-radio-color-primary);\n}\n\n.b-radio__indicator--checked .b-radio__inner::after {\n  content: '';\n  position: absolute;\n  display: block;\n  top: 50%;\n  left: 50%;\n  width: var(--b-radio-dot-size);\n  height: var(--b-radio-dot-size);\n  background-color: var(--b-radio-color-primary);\n  border-radius: 50%;\n  transform: translate(-50%, -50%) scale(1);\n  opacity: 1;\n  transition:\n    transform var(--b-radio-transition-duration) ease-in-out,\n    opacity var(--b-radio-transition-duration) ease-in-out;\n}\n\n/* Disabled state */\n.b-radio__indicator--disabled .b-radio__inner {\n  background-color: var(--b-radio-color-bg-container-disabled);\n  border-color: var(--b-radio-color-border-disabled);\n}\n\n.b-radio__indicator--disabled.b-radio__indicator--checked .b-radio__inner {\n  border-color: var(--b-radio-color-border-disabled);\n}\n\n.b-radio__indicator--disabled.b-radio__indicator--checked .b-radio__inner::after {\n  background-color: var(--b-radio-dot-color-disabled);\n}\n\n.b-radio__input {\n  appearance: none;\n  -webkit-appearance: none;\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  margin: 0;\n  padding: 0;\n  cursor: pointer;\n  z-index: 1;\n}\n\n.b-radio--disabled .b-radio__input {\n  cursor: not-allowed;\n}\n\n/* Focus-visible ring */\n.b-radio__input:focus-visible + .b-radio__inner {\n  outline: 2px solid var(--b-radio-color-primary);\n  outline-offset: 2px;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .b-radio__inner,\n  .b-radio__inner::after {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system166.js","names":[],"sources":["../src/components/BPagination/BPagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BIcon } from '@/components';\nimport { computed, ref, watch } from 'vue';\n\nimport type {\n  BPaginationAlign,\n  BPaginationQuickJumper,\n  BPaginationShowTotal,\n  BPaginationSimple,\n  BPaginationSize,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst props = withDefaults(\n  defineProps<{\n    /** Current page number (controlled). */\n    current?: number;\n    /** Default initial page number (uncontrolled). @default 1 */\n    defaultCurrent?: number;\n    /** Default number of items per page. @default 10 */\n    defaultPageSize?: number;\n    /** Number of items per page (controlled). */\n    pageSize?: number;\n    /** Available page size options. @default [10, 20, 50, 100] */\n    pageSizeOptions?: number[];\n    /** Total number of data items. @default 0 */\n    total?: number;\n    /** Disable pagination. @default false */\n    disabled?: boolean;\n    /** Hide on single page. @default false */\n    hideOnSinglePage?: boolean;\n    /** Show less page items. @default false */\n    showLessItems?: boolean;\n    /** Show quick jumper input. @default false */\n    showQuickJumper?: BPaginationQuickJumper;\n    /** Show page size changer. Auto-shown when total > totalBoundaryShowSizeChanger. */\n    showSizeChanger?: boolean;\n    /** Show title attribute on page items. @default true */\n    showTitle?: boolean;\n    /** Show total number and range. */\n    showTotal?: BPaginationShowTotal;\n    /** Simple mode. @default false */\n    simple?: BPaginationSimple;\n    /** Size of the pagination. @default 'default' */\n    size?: BPaginationSize;\n    /** Alignment of pagination within container. @default 'start' */\n    align?: BPaginationAlign;\n    /** When total exceeds this value, showSizeChanger defaults to true. @default 50 */\n    totalBoundaryShowSizeChanger?: number;\n    /** Custom aria-label for the nav element. @default 'Pagination' */\n    ariaLabel?: string;\n  }>(),\n  {\n    defaultCurrent: 1,\n    defaultPageSize: 10,\n    pageSizeOptions: () => [10, 20, 50, 100],\n    total: 0,\n    disabled: false,\n    hideOnSinglePage: false,\n    showLessItems: false,\n    showQuickJumper: false,\n    showSizeChanger: undefined,\n    showTitle: true,\n    simple: false,\n    size: 'default',\n    align: 'start',\n    totalBoundaryShowSizeChanger: 50,\n    ariaLabel: 'Pagination',\n  },\n);\n\n// ─────────────────────────────────────────────\n// Emits\n// ─────────────────────────────────────────────\nconst emit = defineEmits<{\n  /** Fires when page number or page size changes. */\n  (e: 'change', page: number, pageSize: number): void;\n  /** Fires when page size changes. */\n  (e: 'showSizeChange', current: number, size: number): void;\n  /** v-model:current binding. */\n  (e: 'update:current', page: number): void;\n  /** v-model:pageSize binding. */\n  (e: 'update:pageSize', size: number): void;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst internalCurrent = ref(props.current ?? props.defaultCurrent);\nconst internalPageSize = ref(props.pageSize ?? props.defaultPageSize);\n\nconst isCurrentControlled = computed(() => props.current !== undefined);\nconst isPageSizeControlled = computed(() => props.pageSize !== undefined);\n\nwatch(\n  () => props.current,\n  (val) => {\n    if (val !== undefined) internalCurrent.value = val;\n  },\n);\n\nwatch(\n  () => props.pageSize,\n  (val) => {\n    if (val !== undefined) internalPageSize.value = val;\n  },\n);\n\nconst activePage = computed(() =>\n  isCurrentControlled.value ? props.current! : internalCurrent.value,\n);\nconst activePageSize = computed(() =>\n  isPageSizeControlled.value ? props.pageSize! : internalPageSize.value,\n);\n\n// ─────────────────────────────────────────────\n// Derived\n// ─────────────────────────────────────────────\nconst totalPages = computed(() => {\n  if (props.total <= 0 || activePageSize.value <= 0) return 0;\n  return Math.ceil(props.total / activePageSize.value);\n});\n\nconst shouldHide = computed(() => props.hideOnSinglePage && totalPages.value <= 1);\n\nconst computedShowSizeChanger = computed(() => {\n  if (props.showSizeChanger !== undefined) return props.showSizeChanger;\n  return props.total > props.totalBoundaryShowSizeChanger;\n});\n\nconst isSimple = computed(() => !!props.simple);\nconst isSimpleReadOnly = computed(\n  () => typeof props.simple === 'object' && props.simple.readOnly === true,\n);\n\nconst totalRangeText = computed(() => {\n  if (!props.showTotal) return '';\n  const start = (activePage.value - 1) * activePageSize.value + 1;\n  const end = Math.min(activePage.value * activePageSize.value, props.total);\n  return props.showTotal(props.total, [start, end]);\n});\n\n// ─────────────────────────────────────────────\n// Page list computation\n// ─────────────────────────────────────────────\nconst pageList = computed(() => {\n  const tp = totalPages.value;\n  if (tp <= 0) return [];\n\n  const siblingCount = props.showLessItems ? 1 : 2;\n  const cur = activePage.value;\n\n  const items: Array<{ type: 'page' | 'prev-ellipsis' | 'next-ellipsis'; page: number }> = [];\n\n  items.push({ type: 'page', page: 1 });\n\n  if (tp <= (props.showLessItems ? 4 : 6) + 2) {\n    for (let i = 2; i <= tp; i++) {\n      items.push({ type: 'page', page: i });\n    }\n    return items;\n  }\n\n  const left = Math.max(2, cur - siblingCount);\n  const right = Math.min(tp - 1, cur + siblingCount);\n\n  if (left > 2) {\n    items.push({ type: 'prev-ellipsis', page: Math.max(1, cur - (props.showLessItems ? 3 : 5)) });\n  }\n\n  for (let i = left; i <= right; i++) {\n    items.push({ type: 'page', page: i });\n  }\n\n  if (right < tp - 1) {\n    items.push({\n      type: 'next-ellipsis',\n      page: Math.min(tp, cur + (props.showLessItems ? 3 : 5)),\n    });\n  }\n\n  if (tp > 1) {\n    items.push({ type: 'page', page: tp });\n  }\n\n  return items;\n});\n\n// ─────────────────────────────────────────────\n// Actions\n// ─────────────────────────────────────────────\nfunction setPage(page: number) {\n  if (props.disabled) return;\n  const clamped = Math.max(1, Math.min(page, totalPages.value));\n  if (clamped === activePage.value) return;\n\n  if (!isCurrentControlled.value) {\n    internalCurrent.value = clamped;\n  }\n  emit('update:current', clamped);\n  emit('change', clamped, activePageSize.value);\n}\n\nfunction setPageSize(newSize: number) {\n  if (props.disabled) return;\n  if (newSize === activePageSize.value) return;\n\n  const newTotalPages = Math.ceil(props.total / newSize);\n  const newCurrent = Math.min(activePage.value, newTotalPages) || 1;\n\n  if (!isPageSizeControlled.value) {\n    internalPageSize.value = newSize;\n  }\n  if (!isCurrentControlled.value) {\n    internalCurrent.value = newCurrent;\n  }\n\n  emit('update:pageSize', newSize);\n  emit('update:current', newCurrent);\n  emit('showSizeChange', newCurrent, newSize);\n  emit('change', newCurrent, newSize);\n}\n\nfunction goPrev() {\n  setPage(activePage.value - 1);\n}\n\nfunction goNext() {\n  setPage(activePage.value + 1);\n}\n\n// ─────────────────────────────────────────────\n// Quick jumper\n// ─────────────────────────────────────────────\nconst jumperValue = ref('');\n\nfunction handleJumperKeydown(event: KeyboardEvent) {\n  if (event.key === 'Enter') {\n    submitJumper();\n  }\n}\n\nfunction submitJumper() {\n  const val = parseInt(jumperValue.value, 10);\n  if (!isNaN(val) && val >= 1 && val <= totalPages.value) {\n    setPage(val);\n  }\n  jumperValue.value = '';\n}\n\n// ─────────────────────────────────────────────\n// Simple mode input\n// ─────────────────────────────────────────────\nconst simpleInputValue = ref(String(activePage.value));\n\nwatch(activePage, (val) => {\n  simpleInputValue.value = String(val);\n});\n\nfunction handleSimpleInputKeydown(event: KeyboardEvent) {\n  if (event.key === 'Enter') {\n    const val = parseInt(simpleInputValue.value, 10);\n    if (!isNaN(val)) {\n      setPage(val);\n    } else {\n      simpleInputValue.value = String(activePage.value);\n    }\n  }\n}\n\nfunction handleSimpleInputBlur() {\n  const val = parseInt(simpleInputValue.value, 10);\n  if (!isNaN(val) && val >= 1 && val <= totalPages.value) {\n    setPage(val);\n  } else {\n    simpleInputValue.value = String(activePage.value);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-pagination',\n  {\n    'b-pagination--disabled': props.disabled,\n    'b-pagination--simple': isSimple.value,\n    'b-pagination--small': props.size === 'small',\n    'b-pagination--large': props.size === 'large',\n    'b-pagination--align-start': props.align === 'start',\n    'b-pagination--align-center': props.align === 'center',\n    'b-pagination--align-end': props.align === 'end',\n  },\n]);\n</script>\n\n<template>\n  <nav v-if=\"!shouldHide\" :class=\"rootClasses\" role=\"navigation\" :aria-label=\"props.ariaLabel\">\n    <!-- Total display -->\n    <span v-if=\"props.showTotal\" class=\"b-pagination__total\">\n      {{ totalRangeText }}\n    </span>\n\n    <!-- Simple mode -->\n    <template v-if=\"isSimple\">\n      <!-- Prev -->\n      <button\n        class=\"b-pagination__item b-pagination__prev\"\n        type=\"button\"\n        :disabled=\"props.disabled || activePage <= 1\"\n        :aria-disabled=\"props.disabled || activePage <= 1 ? 'true' : undefined\"\n        :title=\"props.showTitle ? 'Previous Page' : undefined\"\n        aria-label=\"Previous Page\"\n        @click=\"goPrev\"\n      >\n        <BIcon icon=\"chevron-left\" aria-hidden=\"true\" />\n      </button>\n\n      <!-- Simple input -->\n      <span class=\"b-pagination__simple-pager\">\n        <input\n          v-if=\"!isSimpleReadOnly\"\n          class=\"b-pagination__simple-input\"\n          type=\"text\"\n          inputmode=\"numeric\"\n          :value=\"simpleInputValue\"\n          :disabled=\"props.disabled\"\n          :aria-label=\"`Page ${activePage} of ${totalPages}`\"\n          @input=\"simpleInputValue = ($event.target as HTMLInputElement).value\"\n          @keydown=\"handleSimpleInputKeydown\"\n          @blur=\"handleSimpleInputBlur\"\n        />\n        <span v-else class=\"b-pagination__simple-current\" aria-current=\"page\">\n          {{ activePage }}\n        </span>\n        <span class=\"b-pagination__simple-separator\" aria-hidden=\"true\">/</span>\n        <span class=\"b-pagination__simple-total\">{{ totalPages }}</span>\n      </span>\n\n      <!-- Next -->\n      <button\n        class=\"b-pagination__item b-pagination__next\"\n        type=\"button\"\n        :disabled=\"props.disabled || activePage >= totalPages\"\n        :aria-disabled=\"props.disabled || activePage >= totalPages ? 'true' : undefined\"\n        :title=\"props.showTitle ? 'Next Page' : undefined\"\n        aria-label=\"Next Page\"\n        @click=\"goNext\"\n      >\n        <BIcon icon=\"chevron-right\" aria-hidden=\"true\" />\n      </button>\n    </template>\n\n    <!-- Normal mode -->\n    <template v-else>\n      <!-- Prev -->\n      <button\n        class=\"b-pagination__item b-pagination__prev\"\n        type=\"button\"\n        :disabled=\"props.disabled || activePage <= 1\"\n        :aria-disabled=\"props.disabled || activePage <= 1 ? 'true' : undefined\"\n        :title=\"props.showTitle ? 'Previous Page' : undefined\"\n        aria-label=\"Previous Page\"\n        @click=\"goPrev\"\n      >\n        <BIcon icon=\"chevron-left\" aria-hidden=\"true\" />\n      </button>\n\n      <!-- Page items -->\n      <template v-for=\"item in pageList\" :key=\"`${item.type}-${item.page}`\">\n        <!-- Ellipsis -->\n        <button\n          v-if=\"item.type === 'prev-ellipsis' || item.type === 'next-ellipsis'\"\n          class=\"b-pagination__item b-pagination__ellipsis\"\n          type=\"button\"\n          :disabled=\"props.disabled\"\n          :title=\"\n            props.showTitle\n              ? item.type === 'prev-ellipsis'\n                ? 'Previous 5 Pages'\n                : 'Next 5 Pages'\n              : undefined\n          \"\n          :aria-label=\"item.type === 'prev-ellipsis' ? 'Previous 5 Pages' : 'Next 5 Pages'\"\n          @click=\"setPage(item.page)\"\n        >\n          <span aria-hidden=\"true\">•••</span>\n        </button>\n\n        <!-- Page number -->\n        <button\n          v-else\n          class=\"b-pagination__item b-pagination__page\"\n          :class=\"{ 'b-pagination__page--active': item.page === activePage }\"\n          type=\"button\"\n          :disabled=\"props.disabled\"\n          :aria-current=\"item.page === activePage ? 'page' : undefined\"\n          :aria-label=\"`Page ${item.page}`\"\n          :title=\"props.showTitle ? `${item.page}` : undefined\"\n          @click=\"setPage(item.page)\"\n        >\n          {{ item.page }}\n        </button>\n      </template>\n\n      <!-- Next -->\n      <button\n        class=\"b-pagination__item b-pagination__next\"\n        type=\"button\"\n        :disabled=\"props.disabled || activePage >= totalPages\"\n        :aria-disabled=\"props.disabled || activePage >= totalPages ? 'true' : undefined\"\n        :title=\"props.showTitle ? 'Next Page' : undefined\"\n        aria-label=\"Next Page\"\n        @click=\"goNext\"\n      >\n        <BIcon icon=\"chevron-right\" aria-hidden=\"true\" />\n      </button>\n    </template>\n\n    <!-- Size changer -->\n    <select\n      v-if=\"computedShowSizeChanger && !isSimple\"\n      class=\"b-pagination__size-changer\"\n      :value=\"activePageSize\"\n      :disabled=\"props.disabled\"\n      aria-label=\"Items per page\"\n      @change=\"setPageSize(Number(($event.target as HTMLSelectElement).value))\"\n    >\n      <option v-for=\"opt in pageSizeOptions\" :key=\"opt\" :value=\"opt\">{{ opt }} / page</option>\n    </select>\n\n    <!-- Quick jumper -->\n    <span v-if=\"props.showQuickJumper && !isSimple\" class=\"b-pagination__quick-jumper\">\n      <span>Go to</span>\n      <input\n        class=\"b-pagination__jumper-input\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        :value=\"jumperValue\"\n        :disabled=\"props.disabled\"\n        aria-label=\"Go to page\"\n        @input=\"jumperValue = ($event.target as HTMLInputElement).value\"\n        @keydown=\"handleJumperKeydown\"\n      />\n    </span>\n  </nav>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BPagination - CSS custom properties\n   ───────────────────────────────────────────── */\n.b-pagination {\n  /* Item */\n  --b-pagination-item-bg: #ffffff;\n  --b-pagination-item-bg-hover: rgba(0, 0, 0, 0.04);\n  --b-pagination-item-size: 32px;\n  --b-pagination-item-size-sm: 24px;\n  --b-pagination-item-size-lg: 40px;\n  --b-pagination-item-border-radius: 6px;\n  --b-pagination-item-font-size: 14px;\n\n  /* Active */\n  --b-pagination-item-active-bg: #ffffff;\n  --b-pagination-item-active-color: #0958d9;\n  --b-pagination-item-active-border-color: #0958d9;\n  --b-pagination-item-active-color-hover: #1677ff;\n  --b-pagination-item-active-border-color-hover: #1677ff;\n\n  /* Disabled */\n  --b-pagination-item-active-bg-disabled: rgba(0, 0, 0, 0.15);\n  --b-pagination-item-active-color-disabled: rgba(0, 0, 0, 0.25);\n  --b-pagination-item-color-disabled: rgba(0, 0, 0, 0.25);\n\n  /* Input */\n  --b-pagination-item-input-bg: #ffffff;\n\n  /* Link */\n  --b-pagination-item-link-bg: #ffffff;\n\n  /* Layout */\n  --b-pagination-gap: 8px;\n  --b-pagination-color: rgba(0, 0, 0, 0.88);\n  --b-pagination-font-family: inherit;\n  --b-pagination-mini-options-size-changer-top: 0px;\n\n  /* Focus */\n  --b-pagination-focus-ring: 0 0 0 2px rgba(22, 119, 255, 0.2);\n\n  /* ── Layout ── */\n  display: flex;\n  align-items: center;\n  gap: var(--b-pagination-gap);\n  font-family: var(--b-pagination-font-family);\n  font-size: var(--b-pagination-item-font-size);\n  color: var(--b-pagination-color);\n  flex-wrap: wrap;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n/* ── Alignment ── */\n.b-pagination--align-start {\n  justify-content: flex-start;\n}\n\n.b-pagination--align-center {\n  justify-content: center;\n}\n\n.b-pagination--align-end {\n  justify-content: flex-end;\n}\n\n/* ── Size variants ── */\n.b-pagination--small {\n  --b-pagination-item-size: var(--b-pagination-item-size-sm);\n  --b-pagination-item-font-size: 12px;\n  --b-pagination-gap: 4px;\n}\n\n.b-pagination--large {\n  --b-pagination-item-size: var(--b-pagination-item-size-lg);\n  --b-pagination-item-font-size: 16px;\n  --b-pagination-gap: 10px;\n}\n\n/* ── Item (shared styles for page, prev, next, ellipsis) ── */\n.b-pagination__item {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--b-pagination-item-size);\n  height: var(--b-pagination-item-size);\n  padding: 0 6px;\n  border: 1px solid transparent;\n  border-radius: var(--b-pagination-item-border-radius);\n  background: var(--b-pagination-item-bg);\n  color: var(--b-pagination-color);\n  font-size: var(--b-pagination-item-font-size);\n  font-family: inherit;\n  line-height: 1;\n  text-align: center;\n  cursor: pointer;\n  user-select: none;\n  transition:\n    color 200ms,\n    border-color 200ms,\n    background 200ms;\n  outline: none;\n  box-sizing: border-box;\n}\n\n.b-pagination__item:hover:not(:disabled):not(.b-pagination__page--active) {\n  background: var(--b-pagination-item-bg-hover);\n  color: var(--b-pagination-item-active-color);\n}\n\n.b-pagination__item:focus-visible {\n  box-shadow: var(--b-pagination-focus-ring);\n}\n\n.b-pagination__item:disabled {\n  color: var(--b-pagination-item-color-disabled);\n  cursor: not-allowed;\n  background: transparent;\n}\n\n/* ── Active page ── */\n.b-pagination__page--active {\n  background: var(--b-pagination-item-active-bg);\n  color: var(--b-pagination-item-active-color);\n  border-color: var(--b-pagination-item-active-border-color);\n  font-weight: 500;\n  cursor: default;\n}\n\n.b-pagination__page--active:hover:not(:disabled) {\n  color: var(--b-pagination-item-active-color-hover);\n  border-color: var(--b-pagination-item-active-border-color-hover);\n  background: var(--b-pagination-item-active-bg);\n}\n\n.b-pagination__page--active:disabled {\n  background: var(--b-pagination-item-active-bg-disabled);\n  color: var(--b-pagination-item-active-color-disabled);\n  border-color: transparent;\n}\n\n/* ── Ellipsis ── */\n.b-pagination__ellipsis {\n  border-color: transparent;\n  letter-spacing: 1px;\n  color: rgba(0, 0, 0, 0.25);\n}\n\n.b-pagination__ellipsis:hover:not(:disabled) {\n  color: var(--b-pagination-item-active-color);\n  background: transparent;\n}\n\n/* ── Prev/Next arrows ── */\n.b-pagination__prev,\n.b-pagination__next {\n  background: var(--b-pagination-item-link-bg);\n}\n\n/* ── Total ── */\n.b-pagination__total {\n  white-space: nowrap;\n  font-size: var(--b-pagination-item-font-size);\n}\n\n/* ── Simple mode ── */\n.b-pagination--simple .b-pagination__simple-pager {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.b-pagination__simple-input {\n  width: 48px;\n  height: var(--b-pagination-item-size);\n  padding: 0 6px;\n  border: 1px solid #d9d9d9;\n  border-radius: var(--b-pagination-item-border-radius);\n  background: var(--b-pagination-item-input-bg);\n  color: var(--b-pagination-color);\n  font-size: var(--b-pagination-item-font-size);\n  text-align: center;\n  outline: none;\n  box-sizing: border-box;\n  transition: border-color 200ms;\n}\n\n.b-pagination__simple-input:focus {\n  border-color: var(--b-pagination-item-active-border-color);\n  box-shadow: var(--b-pagination-focus-ring);\n}\n\n.b-pagination__simple-input:disabled {\n  background: rgba(0, 0, 0, 0.04);\n  color: var(--b-pagination-item-color-disabled);\n  cursor: not-allowed;\n}\n\n.b-pagination__simple-separator {\n  color: rgba(0, 0, 0, 0.25);\n  padding: 0 2px;\n}\n\n.b-pagination__simple-current {\n  font-weight: 500;\n  color: var(--b-pagination-item-active-color);\n}\n\n/* ── Size changer ── */\n.b-pagination__size-changer {\n  height: var(--b-pagination-item-size);\n  padding: 0 8px;\n  border: 1px solid #d9d9d9;\n  border-radius: var(--b-pagination-item-border-radius);\n  background: var(--b-pagination-item-input-bg);\n  color: var(--b-pagination-color);\n  font-size: var(--b-pagination-item-font-size);\n  font-family: inherit;\n  cursor: pointer;\n  outline: none;\n  box-sizing: border-box;\n  margin-top: var(--b-pagination-mini-options-size-changer-top);\n  transition: border-color 200ms;\n}\n\n.b-pagination__size-changer:focus {\n  border-color: var(--b-pagination-item-active-border-color);\n  box-shadow: var(--b-pagination-focus-ring);\n}\n\n.b-pagination__size-changer:disabled {\n  background: rgba(0, 0, 0, 0.04);\n  color: var(--b-pagination-item-color-disabled);\n  cursor: not-allowed;\n}\n\n/* ── Quick jumper ── */\n.b-pagination__quick-jumper {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-size: var(--b-pagination-item-font-size);\n  white-space: nowrap;\n}\n\n.b-pagination__jumper-input {\n  width: 50px;\n  height: var(--b-pagination-item-size);\n  padding: 0 6px;\n  border: 1px solid #d9d9d9;\n  border-radius: var(--b-pagination-item-border-radius);\n  background: var(--b-pagination-item-input-bg);\n  color: var(--b-pagination-color);\n  font-size: var(--b-pagination-item-font-size);\n  text-align: center;\n  outline: none;\n  box-sizing: border-box;\n  transition: border-color 200ms;\n}\n\n.b-pagination__jumper-input:focus {\n  border-color: var(--b-pagination-item-active-border-color);\n  box-shadow: var(--b-pagination-focus-ring);\n}\n\n.b-pagination__jumper-input:disabled {\n  background: rgba(0, 0, 0, 0.04);\n  color: var(--b-pagination-item-color-disabled);\n  cursor: not-allowed;\n}\n\n/* ── Disabled state (entire control) ── */\n.b-pagination--disabled {\n  opacity: 0.65;\n  pointer-events: none;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-pagination {\n  --b-pagination-item-bg: #1d1d1d;\n  --b-pagination-item-bg-hover: rgba(255, 255, 255, 0.08);\n  --b-pagination-item-active-bg: #1d1d1d;\n  --b-pagination-item-active-color: #4096ff;\n  --b-pagination-item-active-border-color: #4096ff;\n  --b-pagination-item-active-color-hover: #69b1ff;\n  --b-pagination-item-active-border-color-hover: #69b1ff;\n  --b-pagination-item-active-bg-disabled: rgba(255, 255, 255, 0.08);\n  --b-pagination-item-active-color-disabled: rgba(255, 255, 255, 0.3);\n  --b-pagination-item-color-disabled: rgba(255, 255, 255, 0.3);\n  --b-pagination-item-input-bg: #1d1d1d;\n  --b-pagination-item-link-bg: #1d1d1d;\n  --b-pagination-color: rgba(255, 255, 255, 0.88);\n  --b-pagination-focus-ring: 0 0 0 2px rgba(64, 150, 255, 0.25);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-pagination {\n    --b-pagination-item-bg: #1d1d1d;\n    --b-pagination-item-bg-hover: rgba(255, 255, 255, 0.08);\n    --b-pagination-item-active-bg: #1d1d1d;\n    --b-pagination-item-active-color: #4096ff;\n    --b-pagination-item-active-border-color: #4096ff;\n    --b-pagination-item-active-color-hover: #69b1ff;\n    --b-pagination-item-active-border-color-hover: #69b1ff;\n    --b-pagination-item-active-bg-disabled: rgba(255, 255, 255, 0.08);\n    --b-pagination-item-active-color-disabled: rgba(255, 255, 255, 0.3);\n    --b-pagination-item-color-disabled: rgba(255, 255, 255, 0.3);\n    --b-pagination-item-input-bg: #1d1d1d;\n    --b-pagination-item-link-bg: #1d1d1d;\n    --b-pagination-color: rgba(255, 255, 255, 0.88);\n    --b-pagination-focus-ring: 0 0 0 2px rgba(64, 150, 255, 0.25);\n  }\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-pagination__item,\n  .b-pagination__simple-input,\n  .b-pagination__size-changer,\n  .b-pagination__jumper-input {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/{design-system156.js → design-system168.js}

@@ -1,8 +1,8 @@
-import e from "./design-system154.js";
+import e from "./design-system166.js";
 /* empty css                 */
 //#region src/components/BPagination/BPagination.vue
 var t = e;
 //#endregion
 export { t as default };
 
-//# sourceMappingURL=design-system156.js.map
+//# sourceMappingURL=design-system168.js.map

package/dist/{design-system156.js.map → design-system168.js.map}

@@ -1 +1 @@
-{"version":3,"file":"design-system156.js","names":[],"sources":["../src/components/BPagination/BPagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BIcon } from '@/components';\nimport { computed, ref, watch } from 'vue';\n\nimport type {\n  BPaginationAlign,\n  BPaginationQuickJumper,\n  BPaginationShowTotal,\n  BPaginationSimple,\n  BPaginationSize,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst props = withDefaults(\n  defineProps<{\n    /** Current page number (controlled). */\n    current?: number;\n    /** Default initial page number (uncontrolled). @default 1 */\n    defaultCurrent?: number;\n    /** Default number of items per page. @default 10 */\n    defaultPageSize?: number;\n    /** Number of items per page (controlled). */\n    pageSize?: number;\n    /** Available page size options. @default [10, 20, 50, 100] */\n    pageSizeOptions?: number[];\n    /** Total number of data items. @default 0 */\n    total?: number;\n    /** Disable pagination. @default false */\n    disabled?: boolean;\n    /** Hide on single page. @default false */\n    hideOnSinglePage?: boolean;\n    /** Show less page items. @default false */\n    showLessItems?: boolean;\n    /** Show quick jumper input. @default false */\n    showQuickJumper?: BPaginationQuickJumper;\n    /** Show page size changer. Auto-shown when total > totalBoundaryShowSizeChanger. */\n    showSizeChanger?: boolean;\n    /** Show title attribute on page items. @default true */\n    showTitle?: boolean;\n    /** Show total number and range. */\n    showTotal?: BPaginationShowTotal;\n    /** Simple mode. @default false */\n    simple?: BPaginationSimple;\n    /** Size of the pagination. @default 'default' */\n    size?: BPaginationSize;\n    /** Alignment of pagination within container. @default 'start' */\n    align?: BPaginationAlign;\n    /** When total exceeds this value, showSizeChanger defaults to true. @default 50 */\n    totalBoundaryShowSizeChanger?: number;\n    /** Custom aria-label for the nav element. @default 'Pagination' */\n    ariaLabel?: string;\n  }>(),\n  {\n    defaultCurrent: 1,\n    defaultPageSize: 10,\n    pageSizeOptions: () => [10, 20, 50, 100],\n    total: 0,\n    disabled: false,\n    hideOnSinglePage: false,\n    showLessItems: false,\n    showQuickJumper: false,\n    showSizeChanger: undefined,\n    showTitle: true,\n    simple: false,\n    size: 'default',\n    align: 'start',\n    totalBoundaryShowSizeChanger: 50,\n    ariaLabel: 'Pagination',\n  },\n);\n\n// ─────────────────────────────────────────────\n// Emits\n// ─────────────────────────────────────────────\nconst emit = defineEmits<{\n  /** Fires when page number or page size changes. */\n  (e: 'change', page: number, pageSize: number): void;\n  /** Fires when page size changes. */\n  (e: 'showSizeChange', current: number, size: number): void;\n  /** v-model:current binding. */\n  (e: 'update:current', page: number): void;\n  /** v-model:pageSize binding. */\n  (e: 'update:pageSize', size: number): void;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst internalCurrent = ref(props.current ?? props.defaultCurrent);\nconst internalPageSize = ref(props.pageSize ?? props.defaultPageSize);\n\nconst isCurrentControlled = computed(() => props.current !== undefined);\nconst isPageSizeControlled = computed(() => props.pageSize !== undefined);\n\nwatch(\n  () => props.current,\n  (val) => {\n    if (val !== undefined) internalCurrent.value = val;\n  },\n);\n\nwatch(\n  () => props.pageSize,\n  (val) => {\n    if (val !== undefined) internalPageSize.value = val;\n  },\n);\n\nconst activePage = computed(() =>\n  isCurrentControlled.value ? props.current! : internalCurrent.value,\n);\nconst activePageSize = computed(() =>\n  isPageSizeControlled.value ? props.pageSize! : internalPageSize.value,\n);\n\n// ─────────────────────────────────────────────\n// Derived\n// ─────────────────────────────────────────────\nconst totalPages = computed(() => {\n  if (props.total <= 0 || activePageSize.value <= 0) return 0;\n  return Math.ceil(props.total / activePageSize.value);\n});\n\nconst shouldHide = computed(() => props.hideOnSinglePage && totalPages.value <= 1);\n\nconst computedShowSizeChanger = computed(() => {\n  if (props.showSizeChanger !== undefined) return props.showSizeChanger;\n  return props.total > props.totalBoundaryShowSizeChanger;\n});\n\nconst isSimple = computed(() => !!props.simple);\nconst isSimpleReadOnly = computed(\n  () => typeof props.simple === 'object' && props.simple.readOnly === true,\n);\n\nconst totalRangeText = computed(() => {\n  if (!props.showTotal) return '';\n  const start = (activePage.value - 1) * activePageSize.value + 1;\n  const end = Math.min(activePage.value * activePageSize.value, props.total);\n  return props.showTotal(props.total, [start, end]);\n});\n\n// ─────────────────────────────────────────────\n// Page list computation\n// ─────────────────────────────────────────────\nconst pageList = computed(() => {\n  const tp = totalPages.value;\n  if (tp <= 0) return [];\n\n  const siblingCount = props.showLessItems ? 1 : 2;\n  const cur = activePage.value;\n\n  const items: Array<{ type: 'page' | 'prev-ellipsis' | 'next-ellipsis'; page: number }> = [];\n\n  items.push({ type: 'page', page: 1 });\n\n  if (tp <= (props.showLessItems ? 4 : 6) + 2) {\n    for (let i = 2; i <= tp; i++) {\n      items.push({ type: 'page', page: i });\n    }\n    return items;\n  }\n\n  const left = Math.max(2, cur - siblingCount);\n  const right = Math.min(tp - 1, cur + siblingCount);\n\n  if (left > 2) {\n    items.push({ type: 'prev-ellipsis', page: Math.max(1, cur - (props.showLessItems ? 3 : 5)) });\n  }\n\n  for (let i = left; i <= right; i++) {\n    items.push({ type: 'page', page: i });\n  }\n\n  if (right < tp - 1) {\n    items.push({\n      type: 'next-ellipsis',\n      page: Math.min(tp, cur + (props.showLessItems ? 3 : 5)),\n    });\n  }\n\n  if (tp > 1) {\n    items.push({ type: 'page', page: tp });\n  }\n\n  return items;\n});\n\n// ─────────────────────────────────────────────\n// Actions\n// ─────────────────────────────────────────────\nfunction setPage(page: number) {\n  if (props.disabled) return;\n  const clamped = Math.max(1, Math.min(page, totalPages.value));\n  if (clamped === activePage.value) return;\n\n  if (!isCurrentControlled.value) {\n    internalCurrent.value = clamped;\n  }\n  emit('update:current', clamped);\n  emit('change', clamped, activePageSize.value);\n}\n\nfunction setPageSize(newSize: number) {\n  if (props.disabled) return;\n  if (newSize === activePageSize.value) return;\n\n  const newTotalPages = Math.ceil(props.total / newSize);\n  const newCurrent = Math.min(activePage.value, newTotalPages) || 1;\n\n  if (!isPageSizeControlled.value) {\n    internalPageSize.value = newSize;\n  }\n  if (!isCurrentControlled.value) {\n    internalCurrent.value = newCurrent;\n  }\n\n  emit('update:pageSize', newSize);\n  emit('update:current', newCurrent);\n  emit('showSizeChange', newCurrent, newSize);\n  emit('change', newCurrent, newSize);\n}\n\nfunction goPrev() {\n  setPage(activePage.value - 1);\n}\n\nfunction goNext() {\n  setPage(activePage.value + 1);\n}\n\n// ─────────────────────────────────────────────\n// Quick jumper\n// ─────────────────────────────────────────────\nconst jumperValue = ref('');\n\nfunction handleJumperKeydown(event: KeyboardEvent) {\n  if (event.key === 'Enter') {\n    submitJumper();\n  }\n}\n\nfunction submitJumper() {\n  const val = parseInt(jumperValue.value, 10);\n  if (!isNaN(val) && val >= 1 && val <= totalPages.value) {\n    setPage(val);\n  }\n  jumperValue.value = '';\n}\n\n// ─────────────────────────────────────────────\n// Simple mode input\n// ─────────────────────────────────────────────\nconst simpleInputValue = ref(String(activePage.value));\n\nwatch(activePage, (val) => {\n  simpleInputValue.value = String(val);\n});\n\nfunction handleSimpleInputKeydown(event: KeyboardEvent) {\n  if (event.key === 'Enter') {\n    const val = parseInt(simpleInputValue.value, 10);\n    if (!isNaN(val)) {\n      setPage(val);\n    } else {\n      simpleInputValue.value = String(activePage.value);\n    }\n  }\n}\n\nfunction handleSimpleInputBlur() {\n  const val = parseInt(simpleInputValue.value, 10);\n  if (!isNaN(val) && val >= 1 && val <= totalPages.value) {\n    setPage(val);\n  } else {\n    simpleInputValue.value = String(activePage.value);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-pagination',\n  {\n    'b-pagination--disabled': props.disabled,\n    'b-pagination--simple': isSimple.value,\n    'b-pagination--small': props.size === 'small',\n    'b-pagination--large': props.size === 'large',\n    'b-pagination--align-start': props.align === 'start',\n    'b-pagination--align-center': props.align === 'center',\n    'b-pagination--align-end': props.align === 'end',\n  },\n]);\n</script>\n\n<template>\n  <nav v-if=\"!shouldHide\" :class=\"rootClasses\" role=\"navigation\" :aria-label=\"props.ariaLabel\">\n    <!-- Total display -->\n    <span v-if=\"props.showTotal\" class=\"b-pagination__total\">\n      {{ totalRangeText }}\n    </span>\n\n    <!-- Simple mode -->\n    <template v-if=\"isSimple\">\n      <!-- Prev -->\n      <button\n        class=\"b-pagination__item b-pagination__prev\"\n        type=\"button\"\n        :disabled=\"props.disabled || activePage <= 1\"\n        :aria-disabled=\"props.disabled || activePage <= 1 ? 'true' : undefined\"\n        :title=\"props.showTitle ? 'Previous Page' : undefined\"\n        aria-label=\"Previous Page\"\n        @click=\"goPrev\"\n      >\n        <BIcon icon=\"chevron-left\" aria-hidden=\"true\" />\n      </button>\n\n      <!-- Simple input -->\n      <span class=\"b-pagination__simple-pager\">\n        <input\n          v-if=\"!isSimpleReadOnly\"\n          class=\"b-pagination__simple-input\"\n          type=\"text\"\n          inputmode=\"numeric\"\n          :value=\"simpleInputValue\"\n          :disabled=\"props.disabled\"\n          :aria-label=\"`Page ${activePage} of ${totalPages}`\"\n          @input=\"simpleInputValue = ($event.target as HTMLInputElement).value\"\n          @keydown=\"handleSimpleInputKeydown\"\n          @blur=\"handleSimpleInputBlur\"\n        />\n        <span v-else class=\"b-pagination__simple-current\" aria-current=\"page\">\n          {{ activePage }}\n        </span>\n        <span class=\"b-pagination__simple-separator\" aria-hidden=\"true\">/</span>\n        <span class=\"b-pagination__simple-total\">{{ totalPages }}</span>\n      </span>\n\n      <!-- Next -->\n      <button\n        class=\"b-pagination__item b-pagination__next\"\n        type=\"button\"\n        :disabled=\"props.disabled || activePage >= totalPages\"\n        :aria-disabled=\"props.disabled || activePage >= totalPages ? 'true' : undefined\"\n        :title=\"props.showTitle ? 'Next Page' : undefined\"\n        aria-label=\"Next Page\"\n        @click=\"goNext\"\n      >\n        <BIcon icon=\"chevron-right\" aria-hidden=\"true\" />\n      </button>\n    </template>\n\n    <!-- Normal mode -->\n    <template v-else>\n      <!-- Prev -->\n      <button\n        class=\"b-pagination__item b-pagination__prev\"\n        type=\"button\"\n        :disabled=\"props.disabled || activePage <= 1\"\n        :aria-disabled=\"props.disabled || activePage <= 1 ? 'true' : undefined\"\n        :title=\"props.showTitle ? 'Previous Page' : undefined\"\n        aria-label=\"Previous Page\"\n        @click=\"goPrev\"\n      >\n        <BIcon icon=\"chevron-left\" aria-hidden=\"true\" />\n      </button>\n\n      <!-- Page items -->\n      <template v-for=\"item in pageList\" :key=\"`${item.type}-${item.page}`\">\n        <!-- Ellipsis -->\n        <button\n          v-if=\"item.type === 'prev-ellipsis' || item.type === 'next-ellipsis'\"\n          class=\"b-pagination__item b-pagination__ellipsis\"\n          type=\"button\"\n          :disabled=\"props.disabled\"\n          :title=\"\n            props.showTitle\n              ? item.type === 'prev-ellipsis'\n                ? 'Previous 5 Pages'\n                : 'Next 5 Pages'\n              : undefined\n          \"\n          :aria-label=\"item.type === 'prev-ellipsis' ? 'Previous 5 Pages' : 'Next 5 Pages'\"\n          @click=\"setPage(item.page)\"\n        >\n          <span aria-hidden=\"true\">•••</span>\n        </button>\n\n        <!-- Page number -->\n        <button\n          v-else\n          class=\"b-pagination__item b-pagination__page\"\n          :class=\"{ 'b-pagination__page--active': item.page === activePage }\"\n          type=\"button\"\n          :disabled=\"props.disabled\"\n          :aria-current=\"item.page === activePage ? 'page' : undefined\"\n          :aria-label=\"`Page ${item.page}`\"\n          :title=\"props.showTitle ? `${item.page}` : undefined\"\n          @click=\"setPage(item.page)\"\n        >\n          {{ item.page }}\n        </button>\n      </template>\n\n      <!-- Next -->\n      <button\n        class=\"b-pagination__item b-pagination__next\"\n        type=\"button\"\n        :disabled=\"props.disabled || activePage >= totalPages\"\n        :aria-disabled=\"props.disabled || activePage >= totalPages ? 'true' : undefined\"\n        :title=\"props.showTitle ? 'Next Page' : undefined\"\n        aria-label=\"Next Page\"\n        @click=\"goNext\"\n      >\n        <BIcon icon=\"chevron-right\" aria-hidden=\"true\" />\n      </button>\n    </template>\n\n    <!-- Size changer -->\n    <select\n      v-if=\"computedShowSizeChanger && !isSimple\"\n      class=\"b-pagination__size-changer\"\n      :value=\"activePageSize\"\n      :disabled=\"props.disabled\"\n      aria-label=\"Items per page\"\n      @change=\"setPageSize(Number(($event.target as HTMLSelectElement).value))\"\n    >\n      <option v-for=\"opt in pageSizeOptions\" :key=\"opt\" :value=\"opt\">{{ opt }} / page</option>\n    </select>\n\n    <!-- Quick jumper -->\n    <span v-if=\"props.showQuickJumper && !isSimple\" class=\"b-pagination__quick-jumper\">\n      <span>Go to</span>\n      <input\n        class=\"b-pagination__jumper-input\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        :value=\"jumperValue\"\n        :disabled=\"props.disabled\"\n        aria-label=\"Go to page\"\n        @input=\"jumperValue = ($event.target as HTMLInputElement).value\"\n        @keydown=\"handleJumperKeydown\"\n      />\n    </span>\n  </nav>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BPagination - CSS custom properties\n   ───────────────────────────────────────────── */\n.b-pagination {\n  /* Item */\n  --b-pagination-item-bg: #ffffff;\n  --b-pagination-item-bg-hover: rgba(0, 0, 0, 0.04);\n  --b-pagination-item-size: 32px;\n  --b-pagination-item-size-sm: 24px;\n  --b-pagination-item-size-lg: 40px;\n  --b-pagination-item-border-radius: 6px;\n  --b-pagination-item-font-size: 14px;\n\n  /* Active */\n  --b-pagination-item-active-bg: #ffffff;\n  --b-pagination-item-active-color: #0958d9;\n  --b-pagination-item-active-border-color: #0958d9;\n  --b-pagination-item-active-color-hover: #1677ff;\n  --b-pagination-item-active-border-color-hover: #1677ff;\n\n  /* Disabled */\n  --b-pagination-item-active-bg-disabled: rgba(0, 0, 0, 0.15);\n  --b-pagination-item-active-color-disabled: rgba(0, 0, 0, 0.25);\n  --b-pagination-item-color-disabled: rgba(0, 0, 0, 0.25);\n\n  /* Input */\n  --b-pagination-item-input-bg: #ffffff;\n\n  /* Link */\n  --b-pagination-item-link-bg: #ffffff;\n\n  /* Layout */\n  --b-pagination-gap: 8px;\n  --b-pagination-color: rgba(0, 0, 0, 0.88);\n  --b-pagination-font-family: inherit;\n  --b-pagination-mini-options-size-changer-top: 0px;\n\n  /* Focus */\n  --b-pagination-focus-ring: 0 0 0 2px rgba(22, 119, 255, 0.2);\n\n  /* ── Layout ── */\n  display: flex;\n  align-items: center;\n  gap: var(--b-pagination-gap);\n  font-family: var(--b-pagination-font-family);\n  font-size: var(--b-pagination-item-font-size);\n  color: var(--b-pagination-color);\n  flex-wrap: wrap;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n/* ── Alignment ── */\n.b-pagination--align-start {\n  justify-content: flex-start;\n}\n\n.b-pagination--align-center {\n  justify-content: center;\n}\n\n.b-pagination--align-end {\n  justify-content: flex-end;\n}\n\n/* ── Size variants ── */\n.b-pagination--small {\n  --b-pagination-item-size: var(--b-pagination-item-size-sm);\n  --b-pagination-item-font-size: 12px;\n  --b-pagination-gap: 4px;\n}\n\n.b-pagination--large {\n  --b-pagination-item-size: var(--b-pagination-item-size-lg);\n  --b-pagination-item-font-size: 16px;\n  --b-pagination-gap: 10px;\n}\n\n/* ── Item (shared styles for page, prev, next, ellipsis) ── */\n.b-pagination__item {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--b-pagination-item-size);\n  height: var(--b-pagination-item-size);\n  padding: 0 6px;\n  border: 1px solid transparent;\n  border-radius: var(--b-pagination-item-border-radius);\n  background: var(--b-pagination-item-bg);\n  color: var(--b-pagination-color);\n  font-size: var(--b-pagination-item-font-size);\n  font-family: inherit;\n  line-height: 1;\n  text-align: center;\n  cursor: pointer;\n  user-select: none;\n  transition:\n    color 200ms,\n    border-color 200ms,\n    background 200ms;\n  outline: none;\n  box-sizing: border-box;\n}\n\n.b-pagination__item:hover:not(:disabled):not(.b-pagination__page--active) {\n  background: var(--b-pagination-item-bg-hover);\n  color: var(--b-pagination-item-active-color);\n}\n\n.b-pagination__item:focus-visible {\n  box-shadow: var(--b-pagination-focus-ring);\n}\n\n.b-pagination__item:disabled {\n  color: var(--b-pagination-item-color-disabled);\n  cursor: not-allowed;\n  background: transparent;\n}\n\n/* ── Active page ── */\n.b-pagination__page--active {\n  background: var(--b-pagination-item-active-bg);\n  color: var(--b-pagination-item-active-color);\n  border-color: var(--b-pagination-item-active-border-color);\n  font-weight: 500;\n  cursor: default;\n}\n\n.b-pagination__page--active:hover:not(:disabled) {\n  color: var(--b-pagination-item-active-color-hover);\n  border-color: var(--b-pagination-item-active-border-color-hover);\n  background: var(--b-pagination-item-active-bg);\n}\n\n.b-pagination__page--active:disabled {\n  background: var(--b-pagination-item-active-bg-disabled);\n  color: var(--b-pagination-item-active-color-disabled);\n  border-color: transparent;\n}\n\n/* ── Ellipsis ── */\n.b-pagination__ellipsis {\n  border-color: transparent;\n  letter-spacing: 1px;\n  color: rgba(0, 0, 0, 0.25);\n}\n\n.b-pagination__ellipsis:hover:not(:disabled) {\n  color: var(--b-pagination-item-active-color);\n  background: transparent;\n}\n\n/* ── Prev/Next arrows ── */\n.b-pagination__prev,\n.b-pagination__next {\n  background: var(--b-pagination-item-link-bg);\n}\n\n/* ── Total ── */\n.b-pagination__total {\n  white-space: nowrap;\n  font-size: var(--b-pagination-item-font-size);\n}\n\n/* ── Simple mode ── */\n.b-pagination--simple .b-pagination__simple-pager {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.b-pagination__simple-input {\n  width: 48px;\n  height: var(--b-pagination-item-size);\n  padding: 0 6px;\n  border: 1px solid #d9d9d9;\n  border-radius: var(--b-pagination-item-border-radius);\n  background: var(--b-pagination-item-input-bg);\n  color: var(--b-pagination-color);\n  font-size: var(--b-pagination-item-font-size);\n  text-align: center;\n  outline: none;\n  box-sizing: border-box;\n  transition: border-color 200ms;\n}\n\n.b-pagination__simple-input:focus {\n  border-color: var(--b-pagination-item-active-border-color);\n  box-shadow: var(--b-pagination-focus-ring);\n}\n\n.b-pagination__simple-input:disabled {\n  background: rgba(0, 0, 0, 0.04);\n  color: var(--b-pagination-item-color-disabled);\n  cursor: not-allowed;\n}\n\n.b-pagination__simple-separator {\n  color: rgba(0, 0, 0, 0.25);\n  padding: 0 2px;\n}\n\n.b-pagination__simple-current {\n  font-weight: 500;\n  color: var(--b-pagination-item-active-color);\n}\n\n/* ── Size changer ── */\n.b-pagination__size-changer {\n  height: var(--b-pagination-item-size);\n  padding: 0 8px;\n  border: 1px solid #d9d9d9;\n  border-radius: var(--b-pagination-item-border-radius);\n  background: var(--b-pagination-item-input-bg);\n  color: var(--b-pagination-color);\n  font-size: var(--b-pagination-item-font-size);\n  font-family: inherit;\n  cursor: pointer;\n  outline: none;\n  box-sizing: border-box;\n  margin-top: var(--b-pagination-mini-options-size-changer-top);\n  transition: border-color 200ms;\n}\n\n.b-pagination__size-changer:focus {\n  border-color: var(--b-pagination-item-active-border-color);\n  box-shadow: var(--b-pagination-focus-ring);\n}\n\n.b-pagination__size-changer:disabled {\n  background: rgba(0, 0, 0, 0.04);\n  color: var(--b-pagination-item-color-disabled);\n  cursor: not-allowed;\n}\n\n/* ── Quick jumper ── */\n.b-pagination__quick-jumper {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-size: var(--b-pagination-item-font-size);\n  white-space: nowrap;\n}\n\n.b-pagination__jumper-input {\n  width: 50px;\n  height: var(--b-pagination-item-size);\n  padding: 0 6px;\n  border: 1px solid #d9d9d9;\n  border-radius: var(--b-pagination-item-border-radius);\n  background: var(--b-pagination-item-input-bg);\n  color: var(--b-pagination-color);\n  font-size: var(--b-pagination-item-font-size);\n  text-align: center;\n  outline: none;\n  box-sizing: border-box;\n  transition: border-color 200ms;\n}\n\n.b-pagination__jumper-input:focus {\n  border-color: var(--b-pagination-item-active-border-color);\n  box-shadow: var(--b-pagination-focus-ring);\n}\n\n.b-pagination__jumper-input:disabled {\n  background: rgba(0, 0, 0, 0.04);\n  color: var(--b-pagination-item-color-disabled);\n  cursor: not-allowed;\n}\n\n/* ── Disabled state (entire control) ── */\n.b-pagination--disabled {\n  opacity: 0.65;\n  pointer-events: none;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-pagination {\n  --b-pagination-item-bg: #1d1d1d;\n  --b-pagination-item-bg-hover: rgba(255, 255, 255, 0.08);\n  --b-pagination-item-active-bg: #1d1d1d;\n  --b-pagination-item-active-color: #4096ff;\n  --b-pagination-item-active-border-color: #4096ff;\n  --b-pagination-item-active-color-hover: #69b1ff;\n  --b-pagination-item-active-border-color-hover: #69b1ff;\n  --b-pagination-item-active-bg-disabled: rgba(255, 255, 255, 0.08);\n  --b-pagination-item-active-color-disabled: rgba(255, 255, 255, 0.3);\n  --b-pagination-item-color-disabled: rgba(255, 255, 255, 0.3);\n  --b-pagination-item-input-bg: #1d1d1d;\n  --b-pagination-item-link-bg: #1d1d1d;\n  --b-pagination-color: rgba(255, 255, 255, 0.88);\n  --b-pagination-focus-ring: 0 0 0 2px rgba(64, 150, 255, 0.25);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-pagination {\n    --b-pagination-item-bg: #1d1d1d;\n    --b-pagination-item-bg-hover: rgba(255, 255, 255, 0.08);\n    --b-pagination-item-active-bg: #1d1d1d;\n    --b-pagination-item-active-color: #4096ff;\n    --b-pagination-item-active-border-color: #4096ff;\n    --b-pagination-item-active-color-hover: #69b1ff;\n    --b-pagination-item-active-border-color-hover: #69b1ff;\n    --b-pagination-item-active-bg-disabled: rgba(255, 255, 255, 0.08);\n    --b-pagination-item-active-color-disabled: rgba(255, 255, 255, 0.3);\n    --b-pagination-item-color-disabled: rgba(255, 255, 255, 0.3);\n    --b-pagination-item-input-bg: #1d1d1d;\n    --b-pagination-item-link-bg: #1d1d1d;\n    --b-pagination-color: rgba(255, 255, 255, 0.88);\n    --b-pagination-focus-ring: 0 0 0 2px rgba(64, 150, 255, 0.25);\n  }\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-pagination__item,\n  .b-pagination__simple-input,\n  .b-pagination__size-changer,\n  .b-pagination__jumper-input {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system168.js","names":[],"sources":["../src/components/BPagination/BPagination.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { BIcon } from '@/components';\nimport { computed, ref, watch } from 'vue';\n\nimport type {\n  BPaginationAlign,\n  BPaginationQuickJumper,\n  BPaginationShowTotal,\n  BPaginationSimple,\n  BPaginationSize,\n} from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst props = withDefaults(\n  defineProps<{\n    /** Current page number (controlled). */\n    current?: number;\n    /** Default initial page number (uncontrolled). @default 1 */\n    defaultCurrent?: number;\n    /** Default number of items per page. @default 10 */\n    defaultPageSize?: number;\n    /** Number of items per page (controlled). */\n    pageSize?: number;\n    /** Available page size options. @default [10, 20, 50, 100] */\n    pageSizeOptions?: number[];\n    /** Total number of data items. @default 0 */\n    total?: number;\n    /** Disable pagination. @default false */\n    disabled?: boolean;\n    /** Hide on single page. @default false */\n    hideOnSinglePage?: boolean;\n    /** Show less page items. @default false */\n    showLessItems?: boolean;\n    /** Show quick jumper input. @default false */\n    showQuickJumper?: BPaginationQuickJumper;\n    /** Show page size changer. Auto-shown when total > totalBoundaryShowSizeChanger. */\n    showSizeChanger?: boolean;\n    /** Show title attribute on page items. @default true */\n    showTitle?: boolean;\n    /** Show total number and range. */\n    showTotal?: BPaginationShowTotal;\n    /** Simple mode. @default false */\n    simple?: BPaginationSimple;\n    /** Size of the pagination. @default 'default' */\n    size?: BPaginationSize;\n    /** Alignment of pagination within container. @default 'start' */\n    align?: BPaginationAlign;\n    /** When total exceeds this value, showSizeChanger defaults to true. @default 50 */\n    totalBoundaryShowSizeChanger?: number;\n    /** Custom aria-label for the nav element. @default 'Pagination' */\n    ariaLabel?: string;\n  }>(),\n  {\n    defaultCurrent: 1,\n    defaultPageSize: 10,\n    pageSizeOptions: () => [10, 20, 50, 100],\n    total: 0,\n    disabled: false,\n    hideOnSinglePage: false,\n    showLessItems: false,\n    showQuickJumper: false,\n    showSizeChanger: undefined,\n    showTitle: true,\n    simple: false,\n    size: 'default',\n    align: 'start',\n    totalBoundaryShowSizeChanger: 50,\n    ariaLabel: 'Pagination',\n  },\n);\n\n// ─────────────────────────────────────────────\n// Emits\n// ─────────────────────────────────────────────\nconst emit = defineEmits<{\n  /** Fires when page number or page size changes. */\n  (e: 'change', page: number, pageSize: number): void;\n  /** Fires when page size changes. */\n  (e: 'showSizeChange', current: number, size: number): void;\n  /** v-model:current binding. */\n  (e: 'update:current', page: number): void;\n  /** v-model:pageSize binding. */\n  (e: 'update:pageSize', size: number): void;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst internalCurrent = ref(props.current ?? props.defaultCurrent);\nconst internalPageSize = ref(props.pageSize ?? props.defaultPageSize);\n\nconst isCurrentControlled = computed(() => props.current !== undefined);\nconst isPageSizeControlled = computed(() => props.pageSize !== undefined);\n\nwatch(\n  () => props.current,\n  (val) => {\n    if (val !== undefined) internalCurrent.value = val;\n  },\n);\n\nwatch(\n  () => props.pageSize,\n  (val) => {\n    if (val !== undefined) internalPageSize.value = val;\n  },\n);\n\nconst activePage = computed(() =>\n  isCurrentControlled.value ? props.current! : internalCurrent.value,\n);\nconst activePageSize = computed(() =>\n  isPageSizeControlled.value ? props.pageSize! : internalPageSize.value,\n);\n\n// ─────────────────────────────────────────────\n// Derived\n// ─────────────────────────────────────────────\nconst totalPages = computed(() => {\n  if (props.total <= 0 || activePageSize.value <= 0) return 0;\n  return Math.ceil(props.total / activePageSize.value);\n});\n\nconst shouldHide = computed(() => props.hideOnSinglePage && totalPages.value <= 1);\n\nconst computedShowSizeChanger = computed(() => {\n  if (props.showSizeChanger !== undefined) return props.showSizeChanger;\n  return props.total > props.totalBoundaryShowSizeChanger;\n});\n\nconst isSimple = computed(() => !!props.simple);\nconst isSimpleReadOnly = computed(\n  () => typeof props.simple === 'object' && props.simple.readOnly === true,\n);\n\nconst totalRangeText = computed(() => {\n  if (!props.showTotal) return '';\n  const start = (activePage.value - 1) * activePageSize.value + 1;\n  const end = Math.min(activePage.value * activePageSize.value, props.total);\n  return props.showTotal(props.total, [start, end]);\n});\n\n// ─────────────────────────────────────────────\n// Page list computation\n// ─────────────────────────────────────────────\nconst pageList = computed(() => {\n  const tp = totalPages.value;\n  if (tp <= 0) return [];\n\n  const siblingCount = props.showLessItems ? 1 : 2;\n  const cur = activePage.value;\n\n  const items: Array<{ type: 'page' | 'prev-ellipsis' | 'next-ellipsis'; page: number }> = [];\n\n  items.push({ type: 'page', page: 1 });\n\n  if (tp <= (props.showLessItems ? 4 : 6) + 2) {\n    for (let i = 2; i <= tp; i++) {\n      items.push({ type: 'page', page: i });\n    }\n    return items;\n  }\n\n  const left = Math.max(2, cur - siblingCount);\n  const right = Math.min(tp - 1, cur + siblingCount);\n\n  if (left > 2) {\n    items.push({ type: 'prev-ellipsis', page: Math.max(1, cur - (props.showLessItems ? 3 : 5)) });\n  }\n\n  for (let i = left; i <= right; i++) {\n    items.push({ type: 'page', page: i });\n  }\n\n  if (right < tp - 1) {\n    items.push({\n      type: 'next-ellipsis',\n      page: Math.min(tp, cur + (props.showLessItems ? 3 : 5)),\n    });\n  }\n\n  if (tp > 1) {\n    items.push({ type: 'page', page: tp });\n  }\n\n  return items;\n});\n\n// ─────────────────────────────────────────────\n// Actions\n// ─────────────────────────────────────────────\nfunction setPage(page: number) {\n  if (props.disabled) return;\n  const clamped = Math.max(1, Math.min(page, totalPages.value));\n  if (clamped === activePage.value) return;\n\n  if (!isCurrentControlled.value) {\n    internalCurrent.value = clamped;\n  }\n  emit('update:current', clamped);\n  emit('change', clamped, activePageSize.value);\n}\n\nfunction setPageSize(newSize: number) {\n  if (props.disabled) return;\n  if (newSize === activePageSize.value) return;\n\n  const newTotalPages = Math.ceil(props.total / newSize);\n  const newCurrent = Math.min(activePage.value, newTotalPages) || 1;\n\n  if (!isPageSizeControlled.value) {\n    internalPageSize.value = newSize;\n  }\n  if (!isCurrentControlled.value) {\n    internalCurrent.value = newCurrent;\n  }\n\n  emit('update:pageSize', newSize);\n  emit('update:current', newCurrent);\n  emit('showSizeChange', newCurrent, newSize);\n  emit('change', newCurrent, newSize);\n}\n\nfunction goPrev() {\n  setPage(activePage.value - 1);\n}\n\nfunction goNext() {\n  setPage(activePage.value + 1);\n}\n\n// ─────────────────────────────────────────────\n// Quick jumper\n// ─────────────────────────────────────────────\nconst jumperValue = ref('');\n\nfunction handleJumperKeydown(event: KeyboardEvent) {\n  if (event.key === 'Enter') {\n    submitJumper();\n  }\n}\n\nfunction submitJumper() {\n  const val = parseInt(jumperValue.value, 10);\n  if (!isNaN(val) && val >= 1 && val <= totalPages.value) {\n    setPage(val);\n  }\n  jumperValue.value = '';\n}\n\n// ─────────────────────────────────────────────\n// Simple mode input\n// ─────────────────────────────────────────────\nconst simpleInputValue = ref(String(activePage.value));\n\nwatch(activePage, (val) => {\n  simpleInputValue.value = String(val);\n});\n\nfunction handleSimpleInputKeydown(event: KeyboardEvent) {\n  if (event.key === 'Enter') {\n    const val = parseInt(simpleInputValue.value, 10);\n    if (!isNaN(val)) {\n      setPage(val);\n    } else {\n      simpleInputValue.value = String(activePage.value);\n    }\n  }\n}\n\nfunction handleSimpleInputBlur() {\n  const val = parseInt(simpleInputValue.value, 10);\n  if (!isNaN(val) && val >= 1 && val <= totalPages.value) {\n    setPage(val);\n  } else {\n    simpleInputValue.value = String(activePage.value);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Classes\n// ─────────────────────────────────────────────\nconst rootClasses = computed(() => [\n  'b-pagination',\n  {\n    'b-pagination--disabled': props.disabled,\n    'b-pagination--simple': isSimple.value,\n    'b-pagination--small': props.size === 'small',\n    'b-pagination--large': props.size === 'large',\n    'b-pagination--align-start': props.align === 'start',\n    'b-pagination--align-center': props.align === 'center',\n    'b-pagination--align-end': props.align === 'end',\n  },\n]);\n</script>\n\n<template>\n  <nav v-if=\"!shouldHide\" :class=\"rootClasses\" role=\"navigation\" :aria-label=\"props.ariaLabel\">\n    <!-- Total display -->\n    <span v-if=\"props.showTotal\" class=\"b-pagination__total\">\n      {{ totalRangeText }}\n    </span>\n\n    <!-- Simple mode -->\n    <template v-if=\"isSimple\">\n      <!-- Prev -->\n      <button\n        class=\"b-pagination__item b-pagination__prev\"\n        type=\"button\"\n        :disabled=\"props.disabled || activePage <= 1\"\n        :aria-disabled=\"props.disabled || activePage <= 1 ? 'true' : undefined\"\n        :title=\"props.showTitle ? 'Previous Page' : undefined\"\n        aria-label=\"Previous Page\"\n        @click=\"goPrev\"\n      >\n        <BIcon icon=\"chevron-left\" aria-hidden=\"true\" />\n      </button>\n\n      <!-- Simple input -->\n      <span class=\"b-pagination__simple-pager\">\n        <input\n          v-if=\"!isSimpleReadOnly\"\n          class=\"b-pagination__simple-input\"\n          type=\"text\"\n          inputmode=\"numeric\"\n          :value=\"simpleInputValue\"\n          :disabled=\"props.disabled\"\n          :aria-label=\"`Page ${activePage} of ${totalPages}`\"\n          @input=\"simpleInputValue = ($event.target as HTMLInputElement).value\"\n          @keydown=\"handleSimpleInputKeydown\"\n          @blur=\"handleSimpleInputBlur\"\n        />\n        <span v-else class=\"b-pagination__simple-current\" aria-current=\"page\">\n          {{ activePage }}\n        </span>\n        <span class=\"b-pagination__simple-separator\" aria-hidden=\"true\">/</span>\n        <span class=\"b-pagination__simple-total\">{{ totalPages }}</span>\n      </span>\n\n      <!-- Next -->\n      <button\n        class=\"b-pagination__item b-pagination__next\"\n        type=\"button\"\n        :disabled=\"props.disabled || activePage >= totalPages\"\n        :aria-disabled=\"props.disabled || activePage >= totalPages ? 'true' : undefined\"\n        :title=\"props.showTitle ? 'Next Page' : undefined\"\n        aria-label=\"Next Page\"\n        @click=\"goNext\"\n      >\n        <BIcon icon=\"chevron-right\" aria-hidden=\"true\" />\n      </button>\n    </template>\n\n    <!-- Normal mode -->\n    <template v-else>\n      <!-- Prev -->\n      <button\n        class=\"b-pagination__item b-pagination__prev\"\n        type=\"button\"\n        :disabled=\"props.disabled || activePage <= 1\"\n        :aria-disabled=\"props.disabled || activePage <= 1 ? 'true' : undefined\"\n        :title=\"props.showTitle ? 'Previous Page' : undefined\"\n        aria-label=\"Previous Page\"\n        @click=\"goPrev\"\n      >\n        <BIcon icon=\"chevron-left\" aria-hidden=\"true\" />\n      </button>\n\n      <!-- Page items -->\n      <template v-for=\"item in pageList\" :key=\"`${item.type}-${item.page}`\">\n        <!-- Ellipsis -->\n        <button\n          v-if=\"item.type === 'prev-ellipsis' || item.type === 'next-ellipsis'\"\n          class=\"b-pagination__item b-pagination__ellipsis\"\n          type=\"button\"\n          :disabled=\"props.disabled\"\n          :title=\"\n            props.showTitle\n              ? item.type === 'prev-ellipsis'\n                ? 'Previous 5 Pages'\n                : 'Next 5 Pages'\n              : undefined\n          \"\n          :aria-label=\"item.type === 'prev-ellipsis' ? 'Previous 5 Pages' : 'Next 5 Pages'\"\n          @click=\"setPage(item.page)\"\n        >\n          <span aria-hidden=\"true\">•••</span>\n        </button>\n\n        <!-- Page number -->\n        <button\n          v-else\n          class=\"b-pagination__item b-pagination__page\"\n          :class=\"{ 'b-pagination__page--active': item.page === activePage }\"\n          type=\"button\"\n          :disabled=\"props.disabled\"\n          :aria-current=\"item.page === activePage ? 'page' : undefined\"\n          :aria-label=\"`Page ${item.page}`\"\n          :title=\"props.showTitle ? `${item.page}` : undefined\"\n          @click=\"setPage(item.page)\"\n        >\n          {{ item.page }}\n        </button>\n      </template>\n\n      <!-- Next -->\n      <button\n        class=\"b-pagination__item b-pagination__next\"\n        type=\"button\"\n        :disabled=\"props.disabled || activePage >= totalPages\"\n        :aria-disabled=\"props.disabled || activePage >= totalPages ? 'true' : undefined\"\n        :title=\"props.showTitle ? 'Next Page' : undefined\"\n        aria-label=\"Next Page\"\n        @click=\"goNext\"\n      >\n        <BIcon icon=\"chevron-right\" aria-hidden=\"true\" />\n      </button>\n    </template>\n\n    <!-- Size changer -->\n    <select\n      v-if=\"computedShowSizeChanger && !isSimple\"\n      class=\"b-pagination__size-changer\"\n      :value=\"activePageSize\"\n      :disabled=\"props.disabled\"\n      aria-label=\"Items per page\"\n      @change=\"setPageSize(Number(($event.target as HTMLSelectElement).value))\"\n    >\n      <option v-for=\"opt in pageSizeOptions\" :key=\"opt\" :value=\"opt\">{{ opt }} / page</option>\n    </select>\n\n    <!-- Quick jumper -->\n    <span v-if=\"props.showQuickJumper && !isSimple\" class=\"b-pagination__quick-jumper\">\n      <span>Go to</span>\n      <input\n        class=\"b-pagination__jumper-input\"\n        type=\"text\"\n        inputmode=\"numeric\"\n        :value=\"jumperValue\"\n        :disabled=\"props.disabled\"\n        aria-label=\"Go to page\"\n        @input=\"jumperValue = ($event.target as HTMLInputElement).value\"\n        @keydown=\"handleJumperKeydown\"\n      />\n    </span>\n  </nav>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BPagination - CSS custom properties\n   ───────────────────────────────────────────── */\n.b-pagination {\n  /* Item */\n  --b-pagination-item-bg: #ffffff;\n  --b-pagination-item-bg-hover: rgba(0, 0, 0, 0.04);\n  --b-pagination-item-size: 32px;\n  --b-pagination-item-size-sm: 24px;\n  --b-pagination-item-size-lg: 40px;\n  --b-pagination-item-border-radius: 6px;\n  --b-pagination-item-font-size: 14px;\n\n  /* Active */\n  --b-pagination-item-active-bg: #ffffff;\n  --b-pagination-item-active-color: #0958d9;\n  --b-pagination-item-active-border-color: #0958d9;\n  --b-pagination-item-active-color-hover: #1677ff;\n  --b-pagination-item-active-border-color-hover: #1677ff;\n\n  /* Disabled */\n  --b-pagination-item-active-bg-disabled: rgba(0, 0, 0, 0.15);\n  --b-pagination-item-active-color-disabled: rgba(0, 0, 0, 0.25);\n  --b-pagination-item-color-disabled: rgba(0, 0, 0, 0.25);\n\n  /* Input */\n  --b-pagination-item-input-bg: #ffffff;\n\n  /* Link */\n  --b-pagination-item-link-bg: #ffffff;\n\n  /* Layout */\n  --b-pagination-gap: 8px;\n  --b-pagination-color: rgba(0, 0, 0, 0.88);\n  --b-pagination-font-family: inherit;\n  --b-pagination-mini-options-size-changer-top: 0px;\n\n  /* Focus */\n  --b-pagination-focus-ring: 0 0 0 2px rgba(22, 119, 255, 0.2);\n\n  /* ── Layout ── */\n  display: flex;\n  align-items: center;\n  gap: var(--b-pagination-gap);\n  font-family: var(--b-pagination-font-family);\n  font-size: var(--b-pagination-item-font-size);\n  color: var(--b-pagination-color);\n  flex-wrap: wrap;\n  list-style: none;\n  padding: 0;\n  margin: 0;\n}\n\n/* ── Alignment ── */\n.b-pagination--align-start {\n  justify-content: flex-start;\n}\n\n.b-pagination--align-center {\n  justify-content: center;\n}\n\n.b-pagination--align-end {\n  justify-content: flex-end;\n}\n\n/* ── Size variants ── */\n.b-pagination--small {\n  --b-pagination-item-size: var(--b-pagination-item-size-sm);\n  --b-pagination-item-font-size: 12px;\n  --b-pagination-gap: 4px;\n}\n\n.b-pagination--large {\n  --b-pagination-item-size: var(--b-pagination-item-size-lg);\n  --b-pagination-item-font-size: 16px;\n  --b-pagination-gap: 10px;\n}\n\n/* ── Item (shared styles for page, prev, next, ellipsis) ── */\n.b-pagination__item {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--b-pagination-item-size);\n  height: var(--b-pagination-item-size);\n  padding: 0 6px;\n  border: 1px solid transparent;\n  border-radius: var(--b-pagination-item-border-radius);\n  background: var(--b-pagination-item-bg);\n  color: var(--b-pagination-color);\n  font-size: var(--b-pagination-item-font-size);\n  font-family: inherit;\n  line-height: 1;\n  text-align: center;\n  cursor: pointer;\n  user-select: none;\n  transition:\n    color 200ms,\n    border-color 200ms,\n    background 200ms;\n  outline: none;\n  box-sizing: border-box;\n}\n\n.b-pagination__item:hover:not(:disabled):not(.b-pagination__page--active) {\n  background: var(--b-pagination-item-bg-hover);\n  color: var(--b-pagination-item-active-color);\n}\n\n.b-pagination__item:focus-visible {\n  box-shadow: var(--b-pagination-focus-ring);\n}\n\n.b-pagination__item:disabled {\n  color: var(--b-pagination-item-color-disabled);\n  cursor: not-allowed;\n  background: transparent;\n}\n\n/* ── Active page ── */\n.b-pagination__page--active {\n  background: var(--b-pagination-item-active-bg);\n  color: var(--b-pagination-item-active-color);\n  border-color: var(--b-pagination-item-active-border-color);\n  font-weight: 500;\n  cursor: default;\n}\n\n.b-pagination__page--active:hover:not(:disabled) {\n  color: var(--b-pagination-item-active-color-hover);\n  border-color: var(--b-pagination-item-active-border-color-hover);\n  background: var(--b-pagination-item-active-bg);\n}\n\n.b-pagination__page--active:disabled {\n  background: var(--b-pagination-item-active-bg-disabled);\n  color: var(--b-pagination-item-active-color-disabled);\n  border-color: transparent;\n}\n\n/* ── Ellipsis ── */\n.b-pagination__ellipsis {\n  border-color: transparent;\n  letter-spacing: 1px;\n  color: rgba(0, 0, 0, 0.25);\n}\n\n.b-pagination__ellipsis:hover:not(:disabled) {\n  color: var(--b-pagination-item-active-color);\n  background: transparent;\n}\n\n/* ── Prev/Next arrows ── */\n.b-pagination__prev,\n.b-pagination__next {\n  background: var(--b-pagination-item-link-bg);\n}\n\n/* ── Total ── */\n.b-pagination__total {\n  white-space: nowrap;\n  font-size: var(--b-pagination-item-font-size);\n}\n\n/* ── Simple mode ── */\n.b-pagination--simple .b-pagination__simple-pager {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.b-pagination__simple-input {\n  width: 48px;\n  height: var(--b-pagination-item-size);\n  padding: 0 6px;\n  border: 1px solid #d9d9d9;\n  border-radius: var(--b-pagination-item-border-radius);\n  background: var(--b-pagination-item-input-bg);\n  color: var(--b-pagination-color);\n  font-size: var(--b-pagination-item-font-size);\n  text-align: center;\n  outline: none;\n  box-sizing: border-box;\n  transition: border-color 200ms;\n}\n\n.b-pagination__simple-input:focus {\n  border-color: var(--b-pagination-item-active-border-color);\n  box-shadow: var(--b-pagination-focus-ring);\n}\n\n.b-pagination__simple-input:disabled {\n  background: rgba(0, 0, 0, 0.04);\n  color: var(--b-pagination-item-color-disabled);\n  cursor: not-allowed;\n}\n\n.b-pagination__simple-separator {\n  color: rgba(0, 0, 0, 0.25);\n  padding: 0 2px;\n}\n\n.b-pagination__simple-current {\n  font-weight: 500;\n  color: var(--b-pagination-item-active-color);\n}\n\n/* ── Size changer ── */\n.b-pagination__size-changer {\n  height: var(--b-pagination-item-size);\n  padding: 0 8px;\n  border: 1px solid #d9d9d9;\n  border-radius: var(--b-pagination-item-border-radius);\n  background: var(--b-pagination-item-input-bg);\n  color: var(--b-pagination-color);\n  font-size: var(--b-pagination-item-font-size);\n  font-family: inherit;\n  cursor: pointer;\n  outline: none;\n  box-sizing: border-box;\n  margin-top: var(--b-pagination-mini-options-size-changer-top);\n  transition: border-color 200ms;\n}\n\n.b-pagination__size-changer:focus {\n  border-color: var(--b-pagination-item-active-border-color);\n  box-shadow: var(--b-pagination-focus-ring);\n}\n\n.b-pagination__size-changer:disabled {\n  background: rgba(0, 0, 0, 0.04);\n  color: var(--b-pagination-item-color-disabled);\n  cursor: not-allowed;\n}\n\n/* ── Quick jumper ── */\n.b-pagination__quick-jumper {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  font-size: var(--b-pagination-item-font-size);\n  white-space: nowrap;\n}\n\n.b-pagination__jumper-input {\n  width: 50px;\n  height: var(--b-pagination-item-size);\n  padding: 0 6px;\n  border: 1px solid #d9d9d9;\n  border-radius: var(--b-pagination-item-border-radius);\n  background: var(--b-pagination-item-input-bg);\n  color: var(--b-pagination-color);\n  font-size: var(--b-pagination-item-font-size);\n  text-align: center;\n  outline: none;\n  box-sizing: border-box;\n  transition: border-color 200ms;\n}\n\n.b-pagination__jumper-input:focus {\n  border-color: var(--b-pagination-item-active-border-color);\n  box-shadow: var(--b-pagination-focus-ring);\n}\n\n.b-pagination__jumper-input:disabled {\n  background: rgba(0, 0, 0, 0.04);\n  color: var(--b-pagination-item-color-disabled);\n  cursor: not-allowed;\n}\n\n/* ── Disabled state (entire control) ── */\n.b-pagination--disabled {\n  opacity: 0.65;\n  pointer-events: none;\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] .b-pagination {\n  --b-pagination-item-bg: #1d1d1d;\n  --b-pagination-item-bg-hover: rgba(255, 255, 255, 0.08);\n  --b-pagination-item-active-bg: #1d1d1d;\n  --b-pagination-item-active-color: #4096ff;\n  --b-pagination-item-active-border-color: #4096ff;\n  --b-pagination-item-active-color-hover: #69b1ff;\n  --b-pagination-item-active-border-color-hover: #69b1ff;\n  --b-pagination-item-active-bg-disabled: rgba(255, 255, 255, 0.08);\n  --b-pagination-item-active-color-disabled: rgba(255, 255, 255, 0.3);\n  --b-pagination-item-color-disabled: rgba(255, 255, 255, 0.3);\n  --b-pagination-item-input-bg: #1d1d1d;\n  --b-pagination-item-link-bg: #1d1d1d;\n  --b-pagination-color: rgba(255, 255, 255, 0.88);\n  --b-pagination-focus-ring: 0 0 0 2px rgba(64, 150, 255, 0.25);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-pagination {\n    --b-pagination-item-bg: #1d1d1d;\n    --b-pagination-item-bg-hover: rgba(255, 255, 255, 0.08);\n    --b-pagination-item-active-bg: #1d1d1d;\n    --b-pagination-item-active-color: #4096ff;\n    --b-pagination-item-active-border-color: #4096ff;\n    --b-pagination-item-active-color-hover: #69b1ff;\n    --b-pagination-item-active-border-color-hover: #69b1ff;\n    --b-pagination-item-active-bg-disabled: rgba(255, 255, 255, 0.08);\n    --b-pagination-item-active-color-disabled: rgba(255, 255, 255, 0.3);\n    --b-pagination-item-color-disabled: rgba(255, 255, 255, 0.3);\n    --b-pagination-item-input-bg: #1d1d1d;\n    --b-pagination-item-link-bg: #1d1d1d;\n    --b-pagination-color: rgba(255, 255, 255, 0.88);\n    --b-pagination-focus-ring: 0 0 0 2px rgba(64, 150, 255, 0.25);\n  }\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-pagination__item,\n  .b-pagination__simple-input,\n  .b-pagination__size-changer,\n  .b-pagination__jumper-input {\n    transition: none;\n  }\n}\n</style>\n"],"mappings":""}