@vuetify/v0 0.0.14 → 0.0.15

package/dist/{components-CziOUEkN.mjs → components-Cf1h368z.mjs}

@@ -1,10 +1,10 @@
 import { r as isSelfClosingTag } from "./htmlElements-BYo-fMlZ.mjs";
-import { a as isNull, u as isString } from "./utilities-C26nB74O.mjs";
-import { At as createContext, Mt as useContext, R as createSingleContext, T as useProxyModel, _ as createStepContext, at as useSelection, it as createSelectionContext, nt as useGroup, tt as createGroupContext, v as useStep, z as useSingle } from "./composables-CGvbvF3U.mjs";
-import { computed, createBlock, createCommentVNode, createPropsRestProxy, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeProps, normalizeStyle, onMounted, onUnmounted, openBlock, renderSlot, resolveDynamicComponent, toRef, toValue, unref, useAttrs, useId, useModel, useTemplateRef, vShow, watch, withCtx, withDirectives } from "vue";
+import { c as isNull, l as isNullOrUndefined, p as isString, r as genId } from "./utilities-C6o-keMm.mjs";
+import { A as usePagination, Bt as useContext, G as useSingle, Rt as createContext, S as useProxyModel, V as useLocale, W as createSingleContext, _ as createStepContext, ct as useGroup, dt as createSelectionContext, ft as useSelection, j as createOverflow, k as createPaginationContext, pt as createRegistryContext, st as createGroupContext, v as useStep } from "./composables-CrW3IMUM.mjs";
+import { computed, createBlock, createCommentVNode, createPropsRestProxy, createTextVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, onUnmounted, openBlock, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, toRef, toValue, unref, useAttrs, useId, useModel, useTemplateRef, vShow, watch, withCtx, withDirectives } from "vue";
 
 //#region src/components/Atom/Atom.vue
-const _sfc_main$18 = /* @__PURE__ */ defineComponent({
+const _sfc_main$25 = /* @__PURE__ */ defineComponent({
 	name: "Atom",
 	__name: "Atom",
 	props: {
@@ -35,11 +35,11 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var Atom_default = _sfc_main$18;
+var Atom_default = _sfc_main$25;
 
 //#endregion
 //#region src/components/Avatar/AvatarFallback.vue
-const _sfc_main$17 = /* @__PURE__ */ defineComponent({
+const _sfc_main$24 = /* @__PURE__ */ defineComponent({
 	name: "AvatarFallback",
 	__name: "AvatarFallback",
 	props: {
@@ -65,11 +65,11 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var AvatarFallback_default = _sfc_main$17;
+var AvatarFallback_default = _sfc_main$24;
 
 //#endregion
 //#region src/components/Avatar/AvatarImage.vue
-const _sfc_main$16 = /* @__PURE__ */ defineComponent({
+const _sfc_main$23 = /* @__PURE__ */ defineComponent({
 	name: "AvatarImage",
 	inheritAttrs: false,
 	__name: "AvatarImage",
@@ -126,11 +126,11 @@ const _sfc_main$16 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var AvatarImage_default = _sfc_main$16;
+var AvatarImage_default = _sfc_main$23;
 
 //#endregion
 //#region src/components/Avatar/AvatarRoot.vue
-const _sfc_main$15 = /* @__PURE__ */ defineComponent({
+const _sfc_main$22 = /* @__PURE__ */ defineComponent({
 	name: "AvatarRoot",
 	__name: "AvatarRoot",
 	props: {
@@ -156,7 +156,7 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var AvatarRoot_default = _sfc_main$15;
+var AvatarRoot_default = _sfc_main$22;
 
 //#endregion
 //#region src/components/Avatar/index.ts
@@ -168,7 +168,7 @@ const Avatar = {
 
 //#endregion
 //#region src/components/ExpansionPanel/ExpansionPanelActivator.vue
-const _sfc_main$14 = /* @__PURE__ */ defineComponent({
+const _sfc_main$21 = /* @__PURE__ */ defineComponent({
 	name: "ExpansionPanelActivator",
 	__name: "ExpansionPanelActivator",
 	props: {
@@ -184,7 +184,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
 				context.ticket.toggle();
 			}
 		}
-		const bindableProps = computed(() => ({
+		const slotProps = toRef(() => ({
 			"id": context.headerId.value,
 			"role": "button",
 			"tabindex": context.isDisabled.value ? -1 : 0,
@@ -196,20 +196,24 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
 			"onClick": context.ticket.toggle,
 			onKeydown
 		}));
+		const isExpanded = toRef(() => context.ticket.isSelected.value);
+		const isDisabled = toRef(() => context.isDisabled.value);
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(Atom_default), {
-				id: bindableProps.value.id,
-				"aria-controls": bindableProps.value["aria-controls"],
-				"aria-disabled": bindableProps.value["aria-disabled"],
-				"aria-expanded": bindableProps.value["aria-expanded"],
+				id: slotProps.value.id,
+				"aria-controls": slotProps.value["aria-controls"],
+				"aria-disabled": slotProps.value["aria-disabled"],
+				"aria-expanded": slotProps.value["aria-expanded"],
 				as: __props.as,
+				"data-disabled": isDisabled.value ? "" : void 0,
+				"data-expanded": isExpanded.value ? "" : void 0,
 				renderless: __props.renderless,
-				role: bindableProps.value.role,
-				tabindex: bindableProps.value.tabindex,
+				role: slotProps.value.role,
+				tabindex: slotProps.value.tabindex,
 				onClick: unref(context).ticket.toggle,
 				onKeydown
 			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(bindableProps.value)))]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
 				_: 3
 			}, 8, [
 				"id",
@@ -217,6 +221,8 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
 				"aria-disabled",
 				"aria-expanded",
 				"as",
+				"data-disabled",
+				"data-expanded",
 				"renderless",
 				"role",
 				"tabindex",
@@ -225,51 +231,54 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var ExpansionPanelActivator_default = _sfc_main$14;
+var ExpansionPanelActivator_default = _sfc_main$21;
 
 //#endregion
 //#region src/components/ExpansionPanel/ExpansionPanelContent.vue
-const _sfc_main$13 = /* @__PURE__ */ defineComponent({
+const _sfc_main$20 = /* @__PURE__ */ defineComponent({
 	name: "ExpansionPanelContent",
 	__name: "ExpansionPanelContent",
 	props: {
 		itemNamespace: { default: "v0:expansion-panel-item" },
-		as: {},
+		as: { default: "div" },
 		renderless: { type: Boolean }
 	},
 	setup(__props) {
 		const context = useContext(__props.itemNamespace);
-		const bindableProps = computed(() => ({
+		const slotProps = toRef(() => ({
 			"id": context.contentId.value,
 			"role": "region",
 			"aria-labelledby": context.headerId.value,
 			"isSelected": context.ticket.isSelected.value
 		}));
+		const isExpanded = toRef(() => context.ticket.isSelected.value);
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(Atom_default), {
-				id: bindableProps.value.id,
-				"aria-labelledby": bindableProps.value["aria-labelledby"],
+				id: slotProps.value.id,
+				"aria-labelledby": slotProps.value["aria-labelledby"],
 				as: __props.as,
+				"data-expanded": isExpanded.value ? "" : void 0,
 				renderless: __props.renderless,
-				role: bindableProps.value.role
+				role: slotProps.value.role
 			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(bindableProps.value)))]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
 				_: 3
 			}, 8, [
 				"id",
 				"aria-labelledby",
 				"as",
+				"data-expanded",
 				"renderless",
 				"role"
 			]);
 		};
 	}
 });
-var ExpansionPanelContent_default = _sfc_main$13;
+var ExpansionPanelContent_default = _sfc_main$20;
 
 //#endregion
 //#region src/components/ExpansionPanel/ExpansionPanelItem.vue
-const _sfc_main$12 = /* @__PURE__ */ defineComponent({
+const _sfc_main$19 = /* @__PURE__ */ defineComponent({
 	name: "ExpansionPanelItem",
 	__name: "ExpansionPanelItem",
 	props: {
@@ -312,11 +321,11 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var ExpansionPanelItem_default = _sfc_main$12;
+var ExpansionPanelItem_default = _sfc_main$19;
 
 //#endregion
 //#region src/components/ExpansionPanel/ExpansionPanelRoot.vue
-const _sfc_main$11 = /* @__PURE__ */ defineComponent({
+const _sfc_main$18 = /* @__PURE__ */ defineComponent({
 	name: "ExpansionPanelRoot",
 	__name: "ExpansionPanelRoot",
 	props: /* @__PURE__ */ mergeModels({
@@ -390,7 +399,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var ExpansionPanelRoot_default = _sfc_main$11;
+var ExpansionPanelRoot_default = _sfc_main$18;
 
 //#endregion
 //#region src/components/ExpansionPanel/index.ts
@@ -403,13 +412,14 @@ const ExpansionPanel = {
 
 //#endregion
 //#region src/components/Group/GroupItem.vue
-const _sfc_main$10 = /* @__PURE__ */ defineComponent({
+const _sfc_main$17 = /* @__PURE__ */ defineComponent({
 	name: "GroupItem",
 	__name: "GroupItem",
 	props: {
 		label: {},
 		id: {},
 		disabled: {},
+		indeterminate: { default: false },
 		value: {},
 		namespace: { default: "v0:group" }
 	},
@@ -418,9 +428,10 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
 		const ticket = group.register({
 			id: __props.id,
 			value: __props.value,
-			disabled: __props.disabled
+			disabled: __props.disabled,
+			indeterminate: __props.indeterminate
 		});
-		const isDisabled = toRef(() => ticket.disabled || group.disabled);
+		const isDisabled = toRef(() => toValue(ticket.disabled) || toValue(group.disabled));
 		onUnmounted(() => {
 			group.unregister(ticket.id);
 		});
@@ -430,21 +441,24 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
 				ariaDisabled: toValue(isDisabled.value),
 				ariaSelected: toValue(unref(ticket).isSelected),
 				disabled: toValue(isDisabled.value),
+				isMixed: toValue(unref(ticket).isMixed),
 				isSelected: toValue(unref(ticket).isSelected),
 				label: __props.label,
+				mix: unref(ticket).mix,
 				select: unref(ticket).select,
 				toggle: unref(ticket).toggle,
+				unmix: unref(ticket).unmix,
 				unselect: unref(ticket).unselect,
 				value: __props.value
 			});
 		};
 	}
 });
-var GroupItem_default = _sfc_main$10;
+var GroupItem_default = _sfc_main$17;
 
 //#endregion
 //#region src/components/Group/GroupRoot.vue
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$16 = /* @__PURE__ */ defineComponent({
 	name: "GroupRoot",
 	__name: "GroupRoot",
 	props: /* @__PURE__ */ mergeModels({
@@ -481,14 +495,20 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
 			return renderSlot(_ctx.$slots, "default", {
 				ariaMultiselectable: true,
 				disabled: toValue(unref(context).disabled),
+				isAllSelected: unref(context).isAllSelected.value,
+				isMixed: unref(context).isMixed.value,
+				isNoneSelected: unref(context).isNoneSelected.value,
 				select: unref(context).select,
+				selectAll: unref(context).selectAll,
 				toggle: unref(context).toggle,
-				unselect: unref(context).unselect
+				toggleAll: unref(context).toggleAll,
+				unselect: unref(context).unselect,
+				unselectAll: unref(context).unselectAll
 			});
 		};
 	}
 });
-var GroupRoot_default = _sfc_main$9;
+var GroupRoot_default = _sfc_main$16;
 
 //#endregion
 //#region src/components/Group/index.ts
@@ -497,6 +517,512 @@ const Group = {
 	Item: GroupItem_default
 };
 
+//#endregion
+//#region src/components/Pagination/PaginationRoot.vue
+function usePaginationControls(namespace) {
+	return useContext(`${namespace}:controls`);
+}
+function usePaginationItems(namespace) {
+	return useContext(`${namespace}:items`);
+}
+const _sfc_main$15 = /* @__PURE__ */ defineComponent({
+	name: "PaginationRoot",
+	__name: "PaginationRoot",
+	props: /* @__PURE__ */ mergeModels({
+		namespace: { default: "v0:pagination" },
+		size: { default: 1 },
+		totalVisible: {},
+		itemsPerPage: { default: 10 },
+		ellipsis: {
+			type: [String, Boolean],
+			default: "..."
+		},
+		as: { default: "nav" },
+		renderless: { type: Boolean }
+	}, {
+		"modelValue": { default: 1 },
+		"modelModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels(["update:model-value"], ["update:modelValue"]),
+	setup(__props) {
+		const page = useModel(__props, "modelValue");
+		const itemWidth = shallowRef(0);
+		const itemGap = shallowRef(0);
+		const atom = useTemplateRef("atom");
+		const locale = useLocale();
+		const [, provideControlContext, controls] = createRegistryContext({ namespace: `${__props.namespace}:controls` });
+		const [, provideItemContext, items] = createRegistryContext({ namespace: `${__props.namespace}:items` });
+		const overflow = createOverflow({
+			container: () => atom.value?.element,
+			itemWidth,
+			gap: itemGap
+		});
+		watch([() => items.size, () => overflow.width.value], () => {
+			const el = items.seek("first")?.value;
+			const root = overflow.container.value;
+			if (!el || !root) return;
+			const rootStyle = getComputedStyle(root);
+			const style = getComputedStyle(el);
+			const marginX = Number.parseFloat(style.marginLeft) + Number.parseFloat(style.marginRight);
+			const gapX = Number.parseFloat(rootStyle.gap) || 0;
+			itemWidth.value = el.offsetWidth + marginX;
+			itemGap.value = gapX;
+		}, { flush: "post" });
+		const visible = computed(() => {
+			const totalCap = overflow.capacity.value;
+			if (totalCap === Infinity) return __props.totalVisible ?? Infinity;
+			const pageCap = Math.max(0, totalCap - controls.size);
+			const noVisible = /* @__PURE__ */ isNullOrUndefined(__props.totalVisible);
+			if (pageCap > 0) return noVisible ? pageCap : Math.min(__props.totalVisible, pageCap);
+			return noVisible ? 1 : __props.totalVisible;
+		});
+		const [, providePaginationContext, pagination] = createPaginationContext({
+			namespace: __props.namespace,
+			page,
+			visible,
+			ellipsis: __props.ellipsis,
+			size: () => __props.size,
+			itemsPerPage: () => __props.itemsPerPage
+		});
+		const slotProps = toRef(() => ({
+			ariaLabel: locale.t("Pagination.label", void 0, "Pagination"),
+			page: pagination.page.value,
+			size: pagination.size,
+			pages: pagination.pages,
+			itemsPerPage: pagination.itemsPerPage,
+			items: pagination.items.value,
+			pageStart: pagination.pageStart.value,
+			pageStop: pagination.pageStop.value,
+			isFirst: pagination.isFirst.value,
+			isLast: pagination.isLast.value,
+			first: pagination.first,
+			last: pagination.last,
+			next: pagination.next,
+			prev: pagination.prev,
+			select: pagination.select
+		}));
+		providePaginationContext();
+		provideControlContext();
+		provideItemContext();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Atom_default), {
+				ref_key: "atom",
+				ref: atom,
+				"aria-label": slotProps.value.ariaLabel,
+				as: __props.as,
+				renderless: __props.renderless
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
+				_: 3
+			}, 8, [
+				"aria-label",
+				"as",
+				"renderless"
+			]);
+		};
+	}
+});
+var PaginationRoot_default = _sfc_main$15;
+
+//#endregion
+//#region src/components/Pagination/PaginationEllipsis.vue
+const _sfc_main$14 = /* @__PURE__ */ defineComponent({
+	name: "PaginationEllipsis",
+	__name: "PaginationEllipsis",
+	props: {
+		namespace: { default: "v0:pagination" },
+		ellipsis: {},
+		id: { default: () => /* @__PURE__ */ genId() },
+		as: { default: "span" },
+		renderless: { type: Boolean }
+	},
+	setup(__props) {
+		const pagination = usePagination(__props.namespace);
+		const items = usePaginationItems(__props.namespace);
+		const atom = useTemplateRef("atom");
+		watch(() => atom.value?.element, (el) => {
+			if (!el) return;
+			items.register({
+				id: __props.id,
+				value: el
+			});
+		}, { immediate: true });
+		onBeforeUnmount(() => items.unregister(__props.id));
+		const resolvedEllipsis = toRef(() => __props.ellipsis ?? pagination.ellipsis);
+		const slotProps = toRef(() => ({
+			ariaHidden: "true",
+			ellipsis: resolvedEllipsis.value
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Atom_default), {
+				ref_key: "atom",
+				ref: atom,
+				"aria-hidden": slotProps.value.ariaHidden,
+				as: __props.as,
+				renderless: __props.renderless
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)), () => [createTextVNode(toDisplayString(resolvedEllipsis.value), 1)])]),
+				_: 3
+			}, 8, [
+				"aria-hidden",
+				"as",
+				"renderless"
+			]);
+		};
+	}
+});
+var PaginationEllipsis_default = _sfc_main$14;
+
+//#endregion
+//#region src/components/Pagination/PaginationFirst.vue
+const _sfc_main$13 = /* @__PURE__ */ defineComponent({
+	name: "PaginationFirst",
+	__name: "PaginationFirst",
+	props: {
+		namespace: { default: "v0:pagination" },
+		disabled: { type: Boolean },
+		id: { default: () => /* @__PURE__ */ genId() },
+		as: { default: "button" },
+		renderless: { type: Boolean }
+	},
+	setup(__props) {
+		const locale = useLocale();
+		const pagination = usePagination(__props.namespace);
+		const controls = usePaginationControls(__props.namespace);
+		const atom = useTemplateRef("atom");
+		watch(() => atom.value?.element, (el) => {
+			if (!el) return;
+			controls.register({
+				id: __props.id,
+				value: el
+			});
+		}, { immediate: true });
+		onBeforeUnmount(() => controls.unregister(__props.id));
+		const isDisabled = toRef(() => __props.disabled || pagination.isFirst.value);
+		function onClick() {
+			if (isDisabled.value) return;
+			pagination.first();
+		}
+		const slotProps = toRef(() => ({
+			ariaLabel: locale.t("Pagination.first", void 0, "Go to first page"),
+			disabled: isDisabled.value,
+			onClick
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Atom_default), {
+				ref_key: "atom",
+				ref: atom,
+				"aria-disabled": slotProps.value.disabled,
+				"aria-label": slotProps.value.ariaLabel,
+				as: __props.as,
+				"data-disabled": slotProps.value.disabled || void 0,
+				disabled: __props.as === "button" ? slotProps.value.disabled : void 0,
+				renderless: __props.renderless,
+				type: __props.as === "button" ? "button" : void 0,
+				onClick: slotProps.value.onClick
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
+				_: 3
+			}, 8, [
+				"aria-disabled",
+				"aria-label",
+				"as",
+				"data-disabled",
+				"disabled",
+				"renderless",
+				"type",
+				"onClick"
+			]);
+		};
+	}
+});
+var PaginationFirst_default = _sfc_main$13;
+
+//#endregion
+//#region src/components/Pagination/PaginationItem.vue
+const _sfc_main$12 = /* @__PURE__ */ defineComponent({
+	name: "PaginationItem",
+	__name: "PaginationItem",
+	props: {
+		namespace: { default: "v0:pagination" },
+		value: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		id: { default: () => /* @__PURE__ */ genId() },
+		as: { default: "button" },
+		renderless: { type: Boolean }
+	},
+	setup(__props) {
+		const locale = useLocale();
+		const pagination = usePagination(__props.namespace);
+		const items = usePaginationItems(__props.namespace);
+		const atom = useTemplateRef("atom");
+		watch(() => atom.value?.element, (el) => {
+			if (!el) return;
+			items.register({
+				id: __props.id,
+				value: el
+			});
+		}, { immediate: true });
+		onBeforeUnmount(() => items.unregister(__props.id));
+		const isSelected = toRef(() => pagination.page.value === __props.value);
+		const ariaLabel = toRef(() => {
+			return isSelected.value ? locale.t("Pagination.currentPage", { page: __props.value }, `Page ${__props.value}, current page`) : locale.t("Pagination.goToPage", { page: __props.value }, `Go to page ${__props.value}`);
+		});
+		const slotProps = toRef(() => ({
+			ariaLabel: ariaLabel.value,
+			ariaCurrent: isSelected.value ? "page" : void 0,
+			page: __props.value,
+			isSelected: isSelected.value,
+			dataSelected: isSelected.value,
+			disabled: __props.disabled,
+			select
+		}));
+		function select() {
+			if (__props.disabled) return;
+			pagination.select(__props.value);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Atom_default), {
+				ref_key: "atom",
+				ref: atom,
+				"aria-current": slotProps.value.ariaCurrent,
+				"aria-label": slotProps.value.ariaLabel,
+				as: __props.as,
+				"data-disabled": slotProps.value.disabled || void 0,
+				"data-selected": slotProps.value.dataSelected || void 0,
+				disabled: __props.as === "button" ? slotProps.value.disabled : void 0,
+				renderless: __props.renderless,
+				type: __props.as === "button" ? "button" : void 0,
+				onClick: slotProps.value.select
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
+				_: 3
+			}, 8, [
+				"aria-current",
+				"aria-label",
+				"as",
+				"data-disabled",
+				"data-selected",
+				"disabled",
+				"renderless",
+				"type",
+				"onClick"
+			]);
+		};
+	}
+});
+var PaginationItem_default = _sfc_main$12;
+
+//#endregion
+//#region src/components/Pagination/PaginationLast.vue
+const _sfc_main$11 = /* @__PURE__ */ defineComponent({
+	name: "PaginationLast",
+	__name: "PaginationLast",
+	props: {
+		namespace: { default: "v0:pagination" },
+		disabled: { type: Boolean },
+		id: { default: () => /* @__PURE__ */ genId() },
+		as: { default: "button" },
+		renderless: { type: Boolean }
+	},
+	setup(__props) {
+		const locale = useLocale();
+		const pagination = usePagination(__props.namespace);
+		const controls = usePaginationControls(__props.namespace);
+		const atom = useTemplateRef("atom");
+		watch(() => atom.value?.element, (el) => {
+			if (!el) return;
+			controls.register({
+				id: __props.id,
+				value: el
+			});
+		}, { immediate: true });
+		onBeforeUnmount(() => controls.unregister(__props.id));
+		const isDisabled = toRef(() => __props.disabled || pagination.isLast.value);
+		function onClick() {
+			if (isDisabled.value) return;
+			pagination.last();
+		}
+		const slotProps = toRef(() => ({
+			ariaLabel: locale.t("Pagination.last", void 0, "Go to last page"),
+			disabled: isDisabled.value,
+			onClick
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Atom_default), {
+				ref_key: "atom",
+				ref: atom,
+				"aria-disabled": slotProps.value.disabled,
+				"aria-label": slotProps.value.ariaLabel,
+				as: __props.as,
+				"data-disabled": slotProps.value.disabled || void 0,
+				disabled: __props.as === "button" ? slotProps.value.disabled : void 0,
+				renderless: __props.renderless,
+				type: __props.as === "button" ? "button" : void 0,
+				onClick: slotProps.value.onClick
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
+				_: 3
+			}, 8, [
+				"aria-disabled",
+				"aria-label",
+				"as",
+				"data-disabled",
+				"disabled",
+				"renderless",
+				"type",
+				"onClick"
+			]);
+		};
+	}
+});
+var PaginationLast_default = _sfc_main$11;
+
+//#endregion
+//#region src/components/Pagination/PaginationNext.vue
+const _sfc_main$10 = /* @__PURE__ */ defineComponent({
+	name: "PaginationNext",
+	__name: "PaginationNext",
+	props: {
+		namespace: { default: "v0:pagination" },
+		disabled: { type: Boolean },
+		id: { default: () => /* @__PURE__ */ genId() },
+		as: { default: "button" },
+		renderless: { type: Boolean }
+	},
+	setup(__props) {
+		const locale = useLocale();
+		const pagination = usePagination(__props.namespace);
+		const controls = usePaginationControls(__props.namespace);
+		const atom = useTemplateRef("atom");
+		watch(() => atom.value?.element, (el) => {
+			if (!el) return;
+			controls.register({
+				id: __props.id,
+				value: el
+			});
+		}, { immediate: true });
+		onBeforeUnmount(() => controls.unregister(__props.id));
+		const isDisabled = toRef(() => __props.disabled || pagination.isLast.value);
+		function onClick() {
+			if (isDisabled.value) return;
+			pagination.next();
+		}
+		const slotProps = toRef(() => ({
+			ariaLabel: locale.t("Pagination.next", void 0, "Go to next page"),
+			disabled: isDisabled.value,
+			onClick
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Atom_default), {
+				ref_key: "atom",
+				ref: atom,
+				"aria-disabled": slotProps.value.disabled,
+				"aria-label": slotProps.value.ariaLabel,
+				as: __props.as,
+				"data-disabled": slotProps.value.disabled || void 0,
+				disabled: __props.as === "button" ? slotProps.value.disabled : void 0,
+				renderless: __props.renderless,
+				type: __props.as === "button" ? "button" : void 0,
+				onClick: slotProps.value.onClick
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
+				_: 3
+			}, 8, [
+				"aria-disabled",
+				"aria-label",
+				"as",
+				"data-disabled",
+				"disabled",
+				"renderless",
+				"type",
+				"onClick"
+			]);
+		};
+	}
+});
+var PaginationNext_default = _sfc_main$10;
+
+//#endregion
+//#region src/components/Pagination/PaginationPrev.vue
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+	name: "PaginationPrev",
+	__name: "PaginationPrev",
+	props: {
+		namespace: { default: "v0:pagination" },
+		disabled: { type: Boolean },
+		id: { default: () => /* @__PURE__ */ genId() },
+		as: { default: "button" },
+		renderless: { type: Boolean }
+	},
+	setup(__props) {
+		const locale = useLocale();
+		const pagination = usePagination(__props.namespace);
+		const controls = usePaginationControls(__props.namespace);
+		const atom = useTemplateRef("atom");
+		watch(() => atom.value?.element, (el) => {
+			if (!el) return;
+			controls.register({
+				id: __props.id,
+				value: el
+			});
+		}, { immediate: true });
+		onBeforeUnmount(() => controls.unregister(__props.id));
+		const isDisabled = toRef(() => __props.disabled || pagination.isFirst.value);
+		function onClick() {
+			if (isDisabled.value) return;
+			pagination.prev();
+		}
+		const slotProps = toRef(() => ({
+			ariaLabel: locale.t("Pagination.prev", void 0, "Go to previous page"),
+			disabled: isDisabled.value,
+			onClick
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Atom_default), {
+				ref_key: "atom",
+				ref: atom,
+				"aria-disabled": slotProps.value.disabled,
+				"aria-label": slotProps.value.ariaLabel,
+				as: __props.as,
+				"data-disabled": slotProps.value.disabled || void 0,
+				disabled: __props.as === "button" ? slotProps.value.disabled : void 0,
+				renderless: __props.renderless,
+				type: __props.as === "button" ? "button" : void 0,
+				onClick: slotProps.value.onClick
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
+				_: 3
+			}, 8, [
+				"aria-disabled",
+				"aria-label",
+				"as",
+				"data-disabled",
+				"disabled",
+				"renderless",
+				"type",
+				"onClick"
+			]);
+		};
+	}
+});
+var PaginationPrev_default = _sfc_main$9;
+
+//#endregion
+//#region src/components/Pagination/index.ts
+const Pagination = {
+	Root: PaginationRoot_default,
+	Item: PaginationItem_default,
+	First: PaginationFirst_default,
+	Prev: PaginationPrev_default,
+	Ellipsis: PaginationEllipsis_default,
+	Next: PaginationNext_default,
+	Last: PaginationLast_default
+};
+
 //#endregion
 //#region src/components/Popover/PopoverRoot.vue
 const [usePopoverContext, providePopoverContext] = createContext("Popover");
@@ -663,7 +1189,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 			value: __props.value,
 			disabled: __props.disabled
 		});
-		const isDisabled = toRef(() => ticket.disabled || selection.disabled);
+		const isDisabled = toRef(() => toValue(ticket.disabled) || toValue(selection.disabled));
 		onUnmounted(() => {
 			selection.unregister(ticket.id);
 		});
@@ -765,7 +1291,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
 			value: __props.value,
 			disabled: __props.disabled
 		});
-		const isDisabled = toRef(() => ticket.disabled || single.disabled);
+		const isDisabled = toRef(() => toValue(ticket.disabled) || toValue(single.disabled));
 		onUnmounted(() => {
 			single.unregister(ticket.id);
 		});
@@ -861,7 +1387,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 			value: __props.value,
 			disabled: __props.disabled
 		});
-		const isDisabled = toRef(() => ticket.disabled || step.disabled);
+		const isDisabled = toRef(() => toValue(ticket.disabled) || toValue(step.disabled));
 		onUnmounted(() => {
 			step.unregister(ticket.id);
 		});
@@ -944,4 +1470,4 @@ const Step = {
 };
 
 //#endregion
-export { providePopoverContext as a, ExpansionPanel as c, Popover as i, Avatar as l, Single as n, usePopoverContext as o, Selection as r, Group as s, Step as t, Atom_default as u };
+export { providePopoverContext as a, usePaginationControls as c, ExpansionPanel as d, Avatar as f, Popover as i, usePaginationItems as l, Single as n, usePopoverContext as o, Atom_default as p, Selection as r, Pagination as s, Step as t, Group as u };