@vuetify/v0 0.0.15 → 0.0.16

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

@@ -1,10 +1,11 @@
 import { r as isSelfClosingTag } from "./htmlElements-BYo-fMlZ.mjs";
-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";
+import { c as isNull, l as isNullOrUndefined, p as isString, r as genId } from "./utilities-DQWf_4V_.mjs";
+import { F as createSelection, N as useProxyModel, Y as createContext, c as useLocale, g as createPagination, k as createGroup, p as createSingle, t as createStep, y as createOverflow, z as useRegistry } from "./useStep-Bqhi_DDs.mjs";
+import { t as IN_BROWSER } from "./globals-Rnihe4SF.mjs";
+import { computed, createBlock, createCommentVNode, createPropsRestProxy, createTextVNode, defineComponent, guardReactiveProps, mergeModels, mergeProps, normalizeProps, 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$25 = /* @__PURE__ */ defineComponent({
+const _sfc_main$26 = /* @__PURE__ */ defineComponent({
 	name: "Atom",
 	__name: "Atom",
 	props: {
@@ -35,7 +36,37 @@ const _sfc_main$25 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var Atom_default = _sfc_main$25;
+var Atom_default = _sfc_main$26;
+
+//#endregion
+//#region src/components/Avatar/AvatarRoot.vue
+const [useAvatarRoot, provideAvatarContext] = createContext();
+const _sfc_main$25 = /* @__PURE__ */ defineComponent({
+	name: "AvatarRoot",
+	__name: "AvatarRoot",
+	props: {
+		namespace: { default: "v0:avatar" },
+		as: { default: "div" },
+		renderless: { type: Boolean }
+	},
+	setup(__props) {
+		const selection = createSelection({
+			mandatory: "force",
+			multiple: false
+		});
+		provideAvatarContext(__props.namespace, selection);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Atom_default), {
+				as: __props.as,
+				renderless: __props.renderless
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				_: 3
+			}, 8, ["as", "renderless"]);
+		};
+	}
+});
+var AvatarRoot_default = _sfc_main$25;
 
 //#endregion
 //#region src/components/Avatar/AvatarFallback.vue
@@ -48,18 +79,17 @@ const _sfc_main$24 = /* @__PURE__ */ defineComponent({
 		renderless: { type: Boolean }
 	},
 	setup(__props) {
-		const context = useContext(__props.namespace);
+		const context = useAvatarRoot(__props.namespace);
 		const ticket = context.register({ type: "fallback" });
-		onUnmounted(() => {
-			context.unregister(ticket.id);
-		});
+		const slotProps = toRef(() => ({ isSelected: ticket.isSelected.value }));
+		onUnmounted(() => context.unregister(ticket.id));
 		return (_ctx, _cache) => {
 			return unref(ticket).isSelected.value ? (openBlock(), createBlock(unref(Atom_default), {
 				key: 0,
 				as: __props.as,
 				renderless: __props.renderless
 			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
 				_: 3
 			}, 8, ["as", "renderless"])) : createCommentVNode("v-if", true);
 		};
@@ -89,7 +119,7 @@ const _sfc_main$23 = /* @__PURE__ */ defineComponent({
 			"namespace"
 		]);
 		const emit = __emit;
-		const context = useContext(__props.namespace);
+		const context = useAvatarRoot(__props.namespace);
 		const ticket = context.register({
 			priority: __props.priority,
 			type: "image",
@@ -109,18 +139,21 @@ const _sfc_main$23 = /* @__PURE__ */ defineComponent({
 		onUnmounted(() => {
 			context.unregister(ticket.id);
 		});
-		const bindableProps = toRef(() => ({
-			onError,
-			onLoad,
-			role: "img",
-			...props
+		const slotProps = toRef(() => ({
+			isSelected: ticket.isSelected.value,
+			attrs: {
+				role: "img",
+				onLoad,
+				onError,
+				...props
+			}
 		}));
 		return (_ctx, _cache) => {
-			return withDirectives((openBlock(), createBlock(unref(Atom_default), mergeProps({
+			return withDirectives((openBlock(), createBlock(unref(Atom_default), mergeProps(slotProps.value.attrs, {
 				as: __props.as,
 				renderless: __props.renderless
-			}, bindableProps.value), {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(bindableProps.value)))]),
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
 				_: 3
 			}, 16, ["as", "renderless"])), [[vShow, unref(ticket).isSelected.value]]);
 		};
@@ -129,207 +162,256 @@ const _sfc_main$23 = /* @__PURE__ */ defineComponent({
 var AvatarImage_default = _sfc_main$23;
 
 //#endregion
-//#region src/components/Avatar/AvatarRoot.vue
+//#region src/components/Avatar/index.ts
+const Avatar = {
+	Fallback: AvatarFallback_default,
+	Image: AvatarImage_default,
+	Root: AvatarRoot_default
+};
+
+//#endregion
+//#region src/components/ExpansionPanel/ExpansionPanelRoot.vue
+const [useExpansionPanelRoot, provideExpansionPanelSelection] = createContext();
 const _sfc_main$22 = /* @__PURE__ */ defineComponent({
-	name: "AvatarRoot",
-	__name: "AvatarRoot",
-	props: {
-		namespace: { default: "v0:avatar" },
-		as: { default: "div" },
+	name: "ExpansionPanelRoot",
+	__name: "ExpansionPanelRoot",
+	props: /* @__PURE__ */ mergeModels({
+		namespace: { default: "v0:expansion-panel" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		enroll: {
+			type: Boolean,
+			default: false
+		},
+		mandatory: {
+			type: [Boolean, String],
+			default: false
+		},
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		as: {},
 		renderless: { type: Boolean }
-	},
+	}, {
+		"modelValue": {},
+		"modelModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels(["update:model-value"], ["update:modelValue"]),
 	setup(__props) {
-		const [, provideAvatarContext] = createSelectionContext({
-			namespace: __props.namespace,
-			mandatory: "force",
-			multiple: false
+		const model = useModel(__props, "modelValue");
+		const isDisabled = toRef(() => __props.disabled);
+		const selection = createSelection({
+			disabled: isDisabled,
+			enroll: __props.enroll,
+			mandatory: __props.mandatory,
+			multiple: __props.multiple,
+			events: true
 		});
-		provideAvatarContext();
+		useProxyModel(selection, model, { multiple: __props.multiple });
+		const slotProps = toRef(() => ({
+			isDisabled,
+			select: selection.select,
+			unselect: selection.unselect,
+			toggle: selection.toggle
+		}));
+		provideExpansionPanelSelection(__props.namespace, selection);
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(unref(Atom_default), {
 				as: __props.as,
 				renderless: __props.renderless
 			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
 				_: 3
 			}, 8, ["as", "renderless"]);
 		};
 	}
 });
-var AvatarRoot_default = _sfc_main$22;
+var ExpansionPanelRoot_default = _sfc_main$22;
 
 //#endregion
-//#region src/components/Avatar/index.ts
-const Avatar = {
-	Fallback: AvatarFallback_default,
-	Image: AvatarImage_default,
-	Root: AvatarRoot_default
-};
+//#region src/components/ExpansionPanel/ExpansionPanelItem.vue
+const [useExpansionPanelItem, provideExpansionPanelItem] = createContext({ suffix: "item" });
+const _sfc_main$21 = /* @__PURE__ */ defineComponent({
+	name: "ExpansionPanelItem",
+	__name: "ExpansionPanelItem",
+	props: {
+		id: {},
+		value: {},
+		disabled: {},
+		namespace: { default: "v0:expansion-panel" },
+		as: {},
+		renderless: { type: Boolean }
+	},
+	setup(__props) {
+		const selection = useExpansionPanelRoot(__props.namespace);
+		const ticket = selection.register({
+			id: __props.id,
+			value: __props.value,
+			disabled: __props.disabled
+		});
+		const headerId = toRef(() => `${ticket.id}-header`);
+		const contentId = toRef(() => `${ticket.id}-content`);
+		const isDisabled = toRef(() => toValue(ticket.disabled) || toValue(selection.disabled));
+		const slotProps = toRef(() => ({
+			isSelected: ticket.isSelected.value,
+			isDisabled: isDisabled.value,
+			attrs: { "data-selected": ticket.isSelected.value || void 0 }
+		}));
+		onBeforeUnmount(() => selection.unregister(ticket.id));
+		provideExpansionPanelItem(__props.namespace, {
+			ticket,
+			headerId,
+			contentId,
+			isDisabled
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Atom_default), mergeProps(slotProps.value.attrs, {
+				as: __props.as,
+				renderless: __props.renderless
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
+				_: 3
+			}, 16, ["as", "renderless"]);
+		};
+	}
+});
+var ExpansionPanelItem_default = _sfc_main$21;
 
 //#endregion
 //#region src/components/ExpansionPanel/ExpansionPanelActivator.vue
-const _sfc_main$21 = /* @__PURE__ */ defineComponent({
+const _sfc_main$20 = /* @__PURE__ */ defineComponent({
 	name: "ExpansionPanelActivator",
 	__name: "ExpansionPanelActivator",
 	props: {
-		itemNamespace: { default: "v0:expansion-panel-item" },
+		namespace: { default: "v0:expansion-panel" },
 		as: { default: "button" },
 		renderless: { type: Boolean }
 	},
 	setup(__props) {
-		const context = useContext(__props.itemNamespace);
+		const item = useExpansionPanelItem(__props.namespace);
 		function onKeydown(e) {
 			if (e.key === "Enter" || e.key === " ") {
 				e.preventDefault();
-				context.ticket.toggle();
+				item.ticket.toggle();
 			}
 		}
 		const slotProps = toRef(() => ({
-			"id": context.headerId.value,
-			"role": "button",
-			"tabindex": context.isDisabled.value ? -1 : 0,
-			"aria-expanded": context.ticket.isSelected.value,
-			"aria-controls": context.contentId.value,
-			"aria-disabled": context.isDisabled.value,
-			"isSelected": context.ticket.isSelected.value,
-			"toggle": context.ticket.toggle,
-			"onClick": context.ticket.toggle,
-			onKeydown
+			isDisabled: item.isDisabled.value,
+			isSelected: item.ticket.isSelected.value,
+			toggle: item.ticket.toggle,
+			attrs: {
+				"id": item.headerId.value,
+				"role": __props.as === "button" ? void 0 : "button",
+				"tabindex": item.isDisabled.value ? -1 : 0,
+				"aria-expanded": item.ticket.isSelected.value,
+				"aria-controls": item.contentId.value,
+				"aria-disabled": item.isDisabled.value,
+				"data-disabled": item.isDisabled.value || void 0,
+				"data-selected": item.ticket.isSelected.value || void 0,
+				"disabled": __props.as === "button" ? item.isDisabled.value : void 0,
+				"type": __props.as === "button" ? "button" : void 0,
+				"onClick": item.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: slotProps.value.id,
-				"aria-controls": slotProps.value["aria-controls"],
-				"aria-disabled": slotProps.value["aria-disabled"],
-				"aria-expanded": slotProps.value["aria-expanded"],
+			return openBlock(), createBlock(unref(Atom_default), mergeProps(slotProps.value.attrs, {
 				as: __props.as,
-				"data-disabled": isDisabled.value ? "" : void 0,
-				"data-expanded": isExpanded.value ? "" : void 0,
-				renderless: __props.renderless,
-				role: slotProps.value.role,
-				tabindex: slotProps.value.tabindex,
-				onClick: unref(context).ticket.toggle,
-				onKeydown
-			}, {
+				renderless: __props.renderless
+			}), {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
 				_: 3
-			}, 8, [
-				"id",
-				"aria-controls",
-				"aria-disabled",
-				"aria-expanded",
-				"as",
-				"data-disabled",
-				"data-expanded",
-				"renderless",
-				"role",
-				"tabindex",
-				"onClick"
-			]);
+			}, 16, ["as", "renderless"]);
 		};
 	}
 });
-var ExpansionPanelActivator_default = _sfc_main$21;
+var ExpansionPanelActivator_default = _sfc_main$20;
 
 //#endregion
 //#region src/components/ExpansionPanel/ExpansionPanelContent.vue
-const _sfc_main$20 = /* @__PURE__ */ defineComponent({
+const _sfc_main$19 = /* @__PURE__ */ defineComponent({
 	name: "ExpansionPanelContent",
 	__name: "ExpansionPanelContent",
 	props: {
-		itemNamespace: { default: "v0:expansion-panel-item" },
+		namespace: { default: "v0:expansion-panel" },
 		as: { default: "div" },
 		renderless: { type: Boolean }
 	},
 	setup(__props) {
-		const context = useContext(__props.itemNamespace);
+		const item = useExpansionPanelItem(__props.namespace);
 		const slotProps = toRef(() => ({
-			"id": context.contentId.value,
-			"role": "region",
-			"aria-labelledby": context.headerId.value,
-			"isSelected": context.ticket.isSelected.value
+			isSelected: item.ticket.isSelected.value,
+			attrs: {
+				"data-selected": item.ticket.isSelected.value,
+				"id": item.contentId.value,
+				"role": "region",
+				"aria-labelledby": item.headerId.value,
+				"hidden": !item.ticket.isSelected.value
+			}
 		}));
-		const isExpanded = toRef(() => context.ticket.isSelected.value);
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Atom_default), {
-				id: slotProps.value.id,
-				"aria-labelledby": slotProps.value["aria-labelledby"],
+			return openBlock(), createBlock(unref(Atom_default), mergeProps(slotProps.value.attrs, {
 				as: __props.as,
-				"data-expanded": isExpanded.value ? "" : void 0,
-				renderless: __props.renderless,
-				role: slotProps.value.role
-			}, {
+				renderless: __props.renderless
+			}), {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
 				_: 3
-			}, 8, [
-				"id",
-				"aria-labelledby",
-				"as",
-				"data-expanded",
-				"renderless",
-				"role"
-			]);
+			}, 16, ["as", "renderless"]);
 		};
 	}
 });
-var ExpansionPanelContent_default = _sfc_main$20;
+var ExpansionPanelContent_default = _sfc_main$19;
 
 //#endregion
-//#region src/components/ExpansionPanel/ExpansionPanelItem.vue
-const _sfc_main$19 = /* @__PURE__ */ defineComponent({
-	name: "ExpansionPanelItem",
-	__name: "ExpansionPanelItem",
+//#region src/components/ExpansionPanel/ExpansionPanelHeader.vue
+const _sfc_main$18 = /* @__PURE__ */ defineComponent({
+	name: "ExpansionPanelHeader",
+	__name: "ExpansionPanelHeader",
 	props: {
-		id: {},
-		value: {},
-		disabled: {},
 		namespace: { default: "v0:expansion-panel" },
-		itemNamespace: { default: "v0:expansion-panel-item" },
-		as: {},
+		as: { default: "h3" },
 		renderless: { type: Boolean }
 	},
 	setup(__props) {
-		const expansion = useSelection(__props.namespace);
-		const ticket = expansion.register({
-			id: __props.id,
-			value: __props.value,
-			disabled: __props.disabled
-		});
-		const headerId = toRef(() => `${ticket.id}-header`);
-		const contentId = toRef(() => `${ticket.id}-content`);
-		const isDisabled = toRef(() => toValue(ticket.disabled) || toValue(expansion.disabled));
-		const [, provideItemContext] = createContext(__props.itemNamespace);
-		provideItemContext({
-			ticket,
-			headerId,
-			contentId,
-			isDisabled
-		});
-		onUnmounted(() => {
-			expansion.unregister(ticket.id);
-		});
+		const item = useExpansionPanelItem(__props.namespace);
+		const slotProps = toRef(() => ({
+			isSelected: item.ticket.isSelected.value,
+			attrs: { "data-selected": item.ticket.isSelected.value || void 0 }
+		}));
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Atom_default), {
+			return openBlock(), createBlock(unref(Atom_default), mergeProps(slotProps.value.attrs, {
 				as: __props.as,
 				renderless: __props.renderless
-			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+			}), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
 				_: 3
-			}, 8, ["as", "renderless"]);
+			}, 16, ["as", "renderless"]);
 		};
 	}
 });
-var ExpansionPanelItem_default = _sfc_main$19;
+var ExpansionPanelHeader_default = _sfc_main$18;
 
 //#endregion
-//#region src/components/ExpansionPanel/ExpansionPanelRoot.vue
-const _sfc_main$18 = /* @__PURE__ */ defineComponent({
-	name: "ExpansionPanelRoot",
-	__name: "ExpansionPanelRoot",
+//#region src/components/ExpansionPanel/index.ts
+const ExpansionPanel = {
+	Root: ExpansionPanelRoot_default,
+	Item: ExpansionPanelItem_default,
+	Header: ExpansionPanelHeader_default,
+	Activator: ExpansionPanelActivator_default,
+	Content: ExpansionPanelContent_default
+};
+
+//#endregion
+//#region src/components/Group/GroupRoot.vue
+const [useGroupRoot, provideGroupRoot] = createContext();
+const _sfc_main$17 = /* @__PURE__ */ defineComponent({
+	name: "GroupRoot",
+	__name: "GroupRoot",
 	props: /* @__PURE__ */ mergeModels({
-		namespace: { default: "v0:expansion-panel" },
+		namespace: { default: "v0:group" },
 		disabled: {
 			type: Boolean,
 			default: false
@@ -341,90 +423,57 @@ const _sfc_main$18 = /* @__PURE__ */ defineComponent({
 		mandatory: {
 			type: [Boolean, String],
 			default: false
-		},
-		multiple: {
-			type: Boolean,
-			default: false
-		},
-		as: {},
-		renderless: { type: Boolean }
+		}
 	}, {
 		"modelValue": {},
 		"modelModifiers": {}
 	}),
-	emits: /* @__PURE__ */ mergeModels(["update:model-value"], ["update:modelValue"]),
+	emits: ["update:modelValue"],
 	setup(__props) {
 		const model = useModel(__props, "modelValue");
-		const [, provideExpansionControl, context] = createSelectionContext({
-			namespace: __props.namespace,
+		const group = createGroup({
 			disabled: toRef(() => __props.disabled),
 			enroll: __props.enroll,
 			mandatory: __props.mandatory,
-			multiple: __props.multiple,
 			events: true
 		});
-		const bindableProps = computed(() => ({
-			disabled: toValue(context.disabled),
-			multiple: __props.multiple,
-			select: context.select,
-			unselect: context.unselect,
-			toggle: context.toggle,
-			ariaMultiselectable: __props.multiple
+		useProxyModel(group, model, { multiple: true });
+		provideGroupRoot(__props.namespace, group);
+		const slotProps = toRef(() => ({
+			isDisabled: toValue(group.disabled),
+			isNoneSelected: group.isNoneSelected.value,
+			isAllSelected: group.isAllSelected.value,
+			isMixed: group.isMixed.value,
+			select: group.select,
+			unselect: group.unselect,
+			toggle: group.toggle,
+			selectAll: group.selectAll,
+			unselectAll: group.unselectAll,
+			toggleAll: group.toggleAll,
+			attrs: { "aria-multiselectable": true }
 		}));
-		useProxyModel(context, model, { multiple: __props.multiple });
-		provideExpansionControl(context);
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Atom_default), {
-				"aria-multiselectable": bindableProps.value.ariaMultiselectable,
-				as: __props.as,
-				disabled: bindableProps.value.disabled,
-				multiple: bindableProps.value.multiple,
-				renderless: __props.renderless,
-				select: bindableProps.value.select,
-				toggle: bindableProps.value.toggle,
-				unselect: bindableProps.value.unselect
-			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(bindableProps.value)))]),
-				_: 3
-			}, 8, [
-				"aria-multiselectable",
-				"as",
-				"disabled",
-				"multiple",
-				"renderless",
-				"select",
-				"toggle",
-				"unselect"
-			]);
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)));
 		};
 	}
 });
-var ExpansionPanelRoot_default = _sfc_main$18;
-
-//#endregion
-//#region src/components/ExpansionPanel/index.ts
-const ExpansionPanel = {
-	Root: ExpansionPanelRoot_default,
-	Item: ExpansionPanelItem_default,
-	Activator: ExpansionPanelActivator_default,
-	Content: ExpansionPanelContent_default
-};
+var GroupRoot_default = _sfc_main$17;
 
 //#endregion
 //#region src/components/Group/GroupItem.vue
-const _sfc_main$17 = /* @__PURE__ */ defineComponent({
+const _sfc_main$16 = /* @__PURE__ */ defineComponent({
 	name: "GroupItem",
 	__name: "GroupItem",
 	props: {
-		label: {},
 		id: {},
+		label: {},
+		value: {},
 		disabled: {},
 		indeterminate: { default: false },
-		value: {},
 		namespace: { default: "v0:group" }
 	},
 	setup(__props) {
-		const group = useGroup(__props.namespace);
+		const group = useGroupRoot(__props.namespace);
 		const ticket = group.register({
 			id: __props.id,
 			value: __props.value,
@@ -435,80 +484,32 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
 		onUnmounted(() => {
 			group.unregister(ticket.id);
 		});
+		const slotProps = toRef(() => ({
+			id: String(ticket.id),
+			label: __props.label,
+			value: __props.value,
+			isSelected: toValue(ticket.isSelected),
+			isMixed: toValue(ticket.isMixed),
+			isDisabled: toValue(isDisabled),
+			select: ticket.select,
+			unselect: ticket.unselect,
+			toggle: ticket.toggle,
+			mix: ticket.mix,
+			unmix: ticket.unmix,
+			attrs: {
+				"aria-selected": toValue(ticket.isSelected),
+				"aria-disabled": toValue(isDisabled),
+				"data-selected": toValue(ticket.isSelected) || void 0,
+				"data-disabled": toValue(isDisabled) || void 0,
+				"data-mixed": toValue(ticket.isMixed) || void 0
+			}
+		}));
 		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default", {
-				id: String(unref(ticket).id),
-				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$17;
-
-//#endregion
-//#region src/components/Group/GroupRoot.vue
-const _sfc_main$16 = /* @__PURE__ */ defineComponent({
-	name: "GroupRoot",
-	__name: "GroupRoot",
-	props: /* @__PURE__ */ mergeModels({
-		namespace: { default: "v0:group" },
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		enroll: {
-			type: Boolean,
-			default: false
-		},
-		mandatory: {
-			type: [Boolean, String],
-			default: false
-		}
-	}, {
-		"modelValue": {},
-		"modelModifiers": {}
-	}),
-	emits: ["update:modelValue"],
-	setup(__props) {
-		const model = useModel(__props, "modelValue");
-		const [, provideGroupControl, context] = createGroupContext({
-			namespace: __props.namespace,
-			disabled: toRef(() => __props.disabled),
-			enroll: __props.enroll,
-			mandatory: __props.mandatory,
-			events: true
-		});
-		useProxyModel(context, model, { multiple: true });
-		provideGroupControl(context);
-		return (_ctx, _cache) => {
-			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,
-				toggleAll: unref(context).toggleAll,
-				unselect: unref(context).unselect,
-				unselectAll: unref(context).unselectAll
-			});
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)));
 		};
 	}
 });
-var GroupRoot_default = _sfc_main$16;
+var GroupItem_default = _sfc_main$16;
 
 //#endregion
 //#region src/components/Group/index.ts
@@ -519,12 +520,9 @@ const Group = {
 
 //#endregion
 //#region src/components/Pagination/PaginationRoot.vue
-function usePaginationControls(namespace) {
-	return useContext(`${namespace}:controls`);
-}
-function usePaginationItems(namespace) {
-	return useContext(`${namespace}:items`);
-}
+const [usePaginationRoot, providePaginationRoot] = createContext();
+const [usePaginationControls, providePaginationControls] = createContext({ suffix: "controls" });
+const [usePaginationItems, providePaginationItems] = createContext({ suffix: "items" });
 const _sfc_main$15 = /* @__PURE__ */ defineComponent({
 	name: "PaginationRoot",
 	__name: "PaginationRoot",
@@ -546,18 +544,19 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
 	emits: /* @__PURE__ */ mergeModels(["update:model-value"], ["update:modelValue"]),
 	setup(__props) {
 		const page = useModel(__props, "modelValue");
+		const locale = useLocale();
+		const controls = useRegistry();
+		const items = useRegistry();
+		const atom = useTemplateRef("atom");
 		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], () => {
+			if (!IN_BROWSER) return;
 			const el = items.seek("first")?.value;
 			const root = overflow.container.value;
 			if (!el || !root) return;
@@ -568,24 +567,21 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
 			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,
+		const pagination = createPagination({
 			page,
-			visible,
+			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;
+			}),
 			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,
@@ -599,26 +595,23 @@ const _sfc_main$15 = /* @__PURE__ */ defineComponent({
 			last: pagination.last,
 			next: pagination.next,
 			prev: pagination.prev,
-			select: pagination.select
+			select: pagination.select,
+			attrs: { "aria-label": locale.t("Pagination.label", void 0, "Pagination") }
 		}));
-		providePaginationContext();
-		provideControlContext();
-		provideItemContext();
+		providePaginationRoot(__props.namespace, pagination);
+		providePaginationControls(__props.namespace, controls);
+		providePaginationItems(__props.namespace, items);
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Atom_default), {
+			return openBlock(), createBlock(unref(Atom_default), mergeProps({
 				ref_key: "atom",
-				ref: atom,
-				"aria-label": slotProps.value.ariaLabel,
+				ref: atom
+			}, slotProps.value.attrs, {
 				as: __props.as,
 				renderless: __props.renderless
-			}, {
+			}), {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
 				_: 3
-			}, 8, [
-				"aria-label",
-				"as",
-				"renderless"
-			]);
+			}, 16, ["as", "renderless"]);
 		};
 	}
 });
@@ -637,7 +630,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
 		renderless: { type: Boolean }
 	},
 	setup(__props) {
-		const pagination = usePagination(__props.namespace);
+		const pagination = usePaginationRoot(__props.namespace);
 		const items = usePaginationItems(__props.namespace);
 		const atom = useTemplateRef("atom");
 		watch(() => atom.value?.element, (el) => {
@@ -647,27 +640,23 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
 				value: el
 			});
 		}, { immediate: true });
-		onBeforeUnmount(() => items.unregister(__props.id));
 		const resolvedEllipsis = toRef(() => __props.ellipsis ?? pagination.ellipsis);
 		const slotProps = toRef(() => ({
-			ariaHidden: "true",
-			ellipsis: resolvedEllipsis.value
+			ellipsis: resolvedEllipsis.value,
+			attrs: { "aria-hidden": "true" }
 		}));
+		onBeforeUnmount(() => items.unregister(__props.id));
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Atom_default), {
+			return openBlock(), createBlock(unref(Atom_default), mergeProps({
 				ref_key: "atom",
-				ref: atom,
-				"aria-hidden": slotProps.value.ariaHidden,
+				ref: atom
+			}, slotProps.value.attrs, {
 				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"
-			]);
+			}, 16, ["as", "renderless"]);
 		};
 	}
 });
@@ -687,7 +676,7 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const locale = useLocale();
-		const pagination = usePagination(__props.namespace);
+		const pagination = usePaginationRoot(__props.namespace);
 		const controls = usePaginationControls(__props.namespace);
 		const atom = useTemplateRef("atom");
 		watch(() => atom.value?.element, (el) => {
@@ -697,42 +686,35 @@ const _sfc_main$13 = /* @__PURE__ */ defineComponent({
 				value: el
 			});
 		}, { immediate: true });
-		onBeforeUnmount(() => controls.unregister(__props.id));
 		const isDisabled = toRef(() => __props.disabled || pagination.isFirst.value);
-		function onClick() {
+		function first() {
 			if (isDisabled.value) return;
 			pagination.first();
 		}
 		const slotProps = toRef(() => ({
-			ariaLabel: locale.t("Pagination.first", void 0, "Go to first page"),
-			disabled: isDisabled.value,
-			onClick
+			isDisabled: isDisabled.value,
+			first,
+			attrs: {
+				"aria-label": locale.t("Pagination.first", void 0, "Go to first page"),
+				"aria-disabled": __props.as === "button" ? void 0 : isDisabled.value,
+				"data-disabled": isDisabled.value || void 0,
+				"disabled": __props.as === "button" ? isDisabled.value : void 0,
+				"type": __props.as === "button" ? "button" : void 0,
+				"onClick": first
+			}
 		}));
+		onBeforeUnmount(() => controls.unregister(__props.id));
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Atom_default), {
+			return openBlock(), createBlock(unref(Atom_default), mergeProps({
 				ref_key: "atom",
-				ref: atom,
-				"aria-disabled": slotProps.value.disabled,
-				"aria-label": slotProps.value.ariaLabel,
+				ref: atom
+			}, slotProps.value.attrs, {
 				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
-			}, {
+				renderless: __props.renderless
+			}), {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
 				_: 3
-			}, 8, [
-				"aria-disabled",
-				"aria-label",
-				"as",
-				"data-disabled",
-				"disabled",
-				"renderless",
-				"type",
-				"onClick"
-			]);
+			}, 16, ["as", "renderless"]);
 		};
 	}
 });
@@ -756,7 +738,7 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const locale = useLocale();
-		const pagination = usePagination(__props.namespace);
+		const pagination = usePaginationRoot(__props.namespace);
 		const items = usePaginationItems(__props.namespace);
 		const atom = useTemplateRef("atom");
 		watch(() => atom.value?.element, (el) => {
@@ -766,51 +748,41 @@ const _sfc_main$12 = /* @__PURE__ */ defineComponent({
 				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);
 		}
+		const slotProps = toRef(() => ({
+			page: __props.value,
+			isSelected: isSelected.value,
+			isDisabled: __props.disabled,
+			select,
+			attrs: {
+				"aria-label": ariaLabel.value,
+				"aria-current": isSelected.value ? "page" : void 0,
+				"data-selected": isSelected.value || void 0,
+				"data-disabled": __props.disabled || void 0,
+				"disabled": __props.as === "button" ? __props.disabled : void 0,
+				"type": __props.as === "button" ? "button" : void 0,
+				"onClick": select
+			}
+		}));
+		onBeforeUnmount(() => items.unregister(__props.id));
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Atom_default), {
+			return openBlock(), createBlock(unref(Atom_default), mergeProps({
 				ref_key: "atom",
-				ref: atom,
-				"aria-current": slotProps.value.ariaCurrent,
-				"aria-label": slotProps.value.ariaLabel,
+				ref: atom
+			}, slotProps.value.attrs, {
 				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
-			}, {
+				renderless: __props.renderless
+			}), {
 				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"
-			]);
+			}, 16, ["as", "renderless"]);
 		};
 	}
 });
@@ -830,7 +802,7 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const locale = useLocale();
-		const pagination = usePagination(__props.namespace);
+		const pagination = usePaginationRoot(__props.namespace);
 		const controls = usePaginationControls(__props.namespace);
 		const atom = useTemplateRef("atom");
 		watch(() => atom.value?.element, (el) => {
@@ -840,42 +812,35 @@ const _sfc_main$11 = /* @__PURE__ */ defineComponent({
 				value: el
 			});
 		}, { immediate: true });
-		onBeforeUnmount(() => controls.unregister(__props.id));
 		const isDisabled = toRef(() => __props.disabled || pagination.isLast.value);
-		function onClick() {
+		function last() {
 			if (isDisabled.value) return;
 			pagination.last();
 		}
 		const slotProps = toRef(() => ({
-			ariaLabel: locale.t("Pagination.last", void 0, "Go to last page"),
-			disabled: isDisabled.value,
-			onClick
+			isDisabled: isDisabled.value,
+			last,
+			attrs: {
+				"aria-label": locale.t("Pagination.last", void 0, "Go to last page"),
+				"aria-disabled": __props.as === "button" ? void 0 : isDisabled.value,
+				"data-disabled": isDisabled.value || void 0,
+				"disabled": __props.as === "button" ? isDisabled.value : void 0,
+				"type": __props.as === "button" ? "button" : void 0,
+				"onClick": last
+			}
 		}));
+		onBeforeUnmount(() => controls.unregister(__props.id));
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Atom_default), {
+			return openBlock(), createBlock(unref(Atom_default), mergeProps({
 				ref_key: "atom",
-				ref: atom,
-				"aria-disabled": slotProps.value.disabled,
-				"aria-label": slotProps.value.ariaLabel,
+				ref: atom
+			}, slotProps.value.attrs, {
 				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
-			}, {
+				renderless: __props.renderless
+			}), {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
 				_: 3
-			}, 8, [
-				"aria-disabled",
-				"aria-label",
-				"as",
-				"data-disabled",
-				"disabled",
-				"renderless",
-				"type",
-				"onClick"
-			]);
+			}, 16, ["as", "renderless"]);
 		};
 	}
 });
@@ -895,7 +860,7 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const locale = useLocale();
-		const pagination = usePagination(__props.namespace);
+		const pagination = usePaginationRoot(__props.namespace);
 		const controls = usePaginationControls(__props.namespace);
 		const atom = useTemplateRef("atom");
 		watch(() => atom.value?.element, (el) => {
@@ -905,42 +870,35 @@ const _sfc_main$10 = /* @__PURE__ */ defineComponent({
 				value: el
 			});
 		}, { immediate: true });
-		onBeforeUnmount(() => controls.unregister(__props.id));
 		const isDisabled = toRef(() => __props.disabled || pagination.isLast.value);
-		function onClick() {
+		function next() {
 			if (isDisabled.value) return;
 			pagination.next();
 		}
 		const slotProps = toRef(() => ({
-			ariaLabel: locale.t("Pagination.next", void 0, "Go to next page"),
-			disabled: isDisabled.value,
-			onClick
+			isDisabled: isDisabled.value,
+			next,
+			attrs: {
+				"aria-label": locale.t("Pagination.next", void 0, "Go to next page"),
+				"aria-disabled": __props.as === "button" ? void 0 : isDisabled.value,
+				"data-disabled": isDisabled.value || void 0,
+				"disabled": __props.as === "button" ? isDisabled.value : void 0,
+				"type": __props.as === "button" ? "button" : void 0,
+				"onClick": next
+			}
 		}));
+		onBeforeUnmount(() => controls.unregister(__props.id));
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Atom_default), {
+			return openBlock(), createBlock(unref(Atom_default), mergeProps({
 				ref_key: "atom",
-				ref: atom,
-				"aria-disabled": slotProps.value.disabled,
-				"aria-label": slotProps.value.ariaLabel,
+				ref: atom
+			}, slotProps.value.attrs, {
 				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
-			}, {
+				renderless: __props.renderless
+			}), {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
 				_: 3
-			}, 8, [
-				"aria-disabled",
-				"aria-label",
-				"as",
-				"data-disabled",
-				"disabled",
-				"renderless",
-				"type",
-				"onClick"
-			]);
+			}, 16, ["as", "renderless"]);
 		};
 	}
 });
@@ -960,7 +918,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
 	},
 	setup(__props) {
 		const locale = useLocale();
-		const pagination = usePagination(__props.namespace);
+		const pagination = usePaginationRoot(__props.namespace);
 		const controls = usePaginationControls(__props.namespace);
 		const atom = useTemplateRef("atom");
 		watch(() => atom.value?.element, (el) => {
@@ -970,42 +928,35 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
 				value: el
 			});
 		}, { immediate: true });
-		onBeforeUnmount(() => controls.unregister(__props.id));
 		const isDisabled = toRef(() => __props.disabled || pagination.isFirst.value);
-		function onClick() {
+		function prev() {
 			if (isDisabled.value) return;
 			pagination.prev();
 		}
 		const slotProps = toRef(() => ({
-			ariaLabel: locale.t("Pagination.prev", void 0, "Go to previous page"),
-			disabled: isDisabled.value,
-			onClick
+			isDisabled: isDisabled.value,
+			prev,
+			attrs: {
+				"aria-label": locale.t("Pagination.prev", void 0, "Go to previous page"),
+				"aria-disabled": __props.as === "button" ? void 0 : isDisabled.value,
+				"data-disabled": isDisabled.value || void 0,
+				"disabled": __props.as === "button" ? isDisabled.value : void 0,
+				"type": __props.as === "button" ? "button" : void 0,
+				"onClick": prev
+			}
 		}));
+		onBeforeUnmount(() => controls.unregister(__props.id));
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Atom_default), {
+			return openBlock(), createBlock(unref(Atom_default), mergeProps({
 				ref_key: "atom",
-				ref: atom,
-				"aria-disabled": slotProps.value.disabled,
-				"aria-label": slotProps.value.ariaLabel,
+				ref: atom
+			}, slotProps.value.attrs, {
 				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
-			}, {
+				renderless: __props.renderless
+			}), {
 				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
 				_: 3
-			}, 8, [
-				"aria-disabled",
-				"aria-label",
-				"as",
-				"data-disabled",
-				"disabled",
-				"renderless",
-				"type",
-				"onClick"
-			]);
+			}, 16, ["as", "renderless"]);
 		};
 	}
 });
@@ -1048,24 +999,24 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
 		function toggle() {
 			isSelected.value = !isSelected.value;
 		}
-		const bindableProps = toRef(() => ({
-			id,
-			isSelected,
-			toggle
-		}));
 		providePopoverContext({
 			isSelected,
 			toggle,
-			id: id.value
+			id: toValue(id)
 		});
+		const slotProps = toRef(() => ({
+			id: toValue(id),
+			isSelected: isSelected.value,
+			toggle
+		}));
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Atom_default), mergeProps({
+			return openBlock(), createBlock(unref(Atom_default), {
 				as: __props.as,
-				renderless: __props.renderless
-			}, bindableProps.value), {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(bindableProps.value)))]),
+				renderless: ""
+			}, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
 				_: 3
-			}, 16, ["as", "renderless"]);
+			}, 8, ["as"]);
 		};
 	}
 });
@@ -1085,24 +1036,23 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
 		const props = createPropsRestProxy(__props, ["as"]);
 		const context = usePopoverContext();
 		const popovertarget = toRef(() => props.target ?? context.id);
-		const style = toRef(() => ({ anchorName: `--${popovertarget.value}` }));
+		const style = toRef(() => ({ anchorName: `--${toValue(popovertarget)}` }));
+		const slotProps = toRef(() => ({
+			isOpen: context.isSelected.value,
+			attrs: {
+				"popovertarget": toValue(popovertarget),
+				"type": __props.as === "button" ? "button" : void 0,
+				"data-popover-open": context.isSelected.value ? "" : void 0
+			}
+		}));
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Atom_default), {
+			return openBlock(), createBlock(unref(Atom_default), mergeProps({
 				as: __props.as,
-				"data-popover-open": unref(context).isSelected.value ? "" : void 0,
-				popovertarget: popovertarget.value,
-				style: normalizeStyle(style.value),
-				type: __props.as === "button" ? "button" : void 0
-			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				style: style.value
+			}, slotProps.value.attrs), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
 				_: 3
-			}, 8, [
-				"as",
-				"data-popover-open",
-				"popovertarget",
-				"style",
-				"type"
-			]);
+			}, 16, ["as", "style"]);
 		};
 	}
 });
@@ -1129,7 +1079,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
 		const id = toRef(() => props.id ?? context.id);
 		const style = toRef(() => ({
 			positionArea: __props.positionArea,
-			positionAnchor: `--${id.value}`,
+			positionAnchor: `--${toValue(id)}`,
 			positionTry: __props.positionTry
 		}));
 		onMounted(() => {
@@ -1145,18 +1095,22 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
 			context.isSelected.value = e.newState === "open";
 			emit("beforetoggle", e);
 		}
+		const slotProps = toRef(() => ({
+			isOpen: context.isSelected.value,
+			attrs: {
+				id: toValue(id),
+				popover: ""
+			}
+		}));
 		return (_ctx, _cache) => {
-			return openBlock(), createBlock(unref(Atom_default), {
-				id: id.value,
+			return openBlock(), createBlock(unref(Atom_default), mergeProps({
 				ref_key: "ref",
 				ref: ref$1,
-				popover: "",
-				style: normalizeStyle(style.value),
-				onBeforetoggle: onBeforeToggle
-			}, {
-				default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+				style: style.value
+			}, slotProps.value.attrs, { onBeforetoggle: onBeforeToggle }), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)))]),
 				_: 3
-			}, 8, ["id", "style"]);
+			}, 16, ["style"]);
 		};
 	}
 });
@@ -1170,50 +1124,10 @@ const Popover = {
 	Content: PopoverContent_default
 };
 
-//#endregion
-//#region src/components/Selection/SelectionItem.vue
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
-	name: "SelectionItem",
-	__name: "SelectionItem",
-	props: {
-		label: {},
-		id: {},
-		disabled: {},
-		value: {},
-		namespace: { default: "v0:selection" }
-	},
-	setup(__props) {
-		const selection = useSelection(__props.namespace);
-		const ticket = selection.register({
-			id: __props.id,
-			value: __props.value,
-			disabled: __props.disabled
-		});
-		const isDisabled = toRef(() => toValue(ticket.disabled) || toValue(selection.disabled));
-		onUnmounted(() => {
-			selection.unregister(ticket.id);
-		});
-		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default", {
-				id: String(unref(ticket).id),
-				ariaDisabled: toValue(isDisabled.value),
-				ariaSelected: toValue(unref(ticket).isSelected),
-				disabled: toValue(isDisabled.value),
-				isSelected: toValue(unref(ticket).isSelected),
-				label: __props.label,
-				select: unref(ticket).select,
-				toggle: unref(ticket).toggle,
-				unselect: unref(ticket).unselect,
-				value: __props.value
-			});
-		};
-	}
-});
-var SelectionItem_default = _sfc_main$5;
-
 //#endregion
 //#region src/components/Selection/SelectionRoot.vue
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const [useSelectionRoot, provideSelectionRoot] = createContext();
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 	name: "SelectionRoot",
 	__name: "SelectionRoot",
 	props: /* @__PURE__ */ mergeModels({
@@ -1241,81 +1155,87 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
 	emits: ["update:modelValue"],
 	setup(__props) {
 		const model = useModel(__props, "modelValue");
-		const [, provideSelectionControl, context] = createSelectionContext({
-			namespace: __props.namespace,
+		const selection = createSelection({
 			disabled: toRef(() => __props.disabled),
 			enroll: __props.enroll,
 			mandatory: __props.mandatory,
 			multiple: __props.multiple,
 			events: true
 		});
-		useProxyModel(context, model, { multiple: __props.multiple });
-		provideSelectionControl(context);
+		useProxyModel(selection, model, { multiple: __props.multiple });
+		provideSelectionRoot(__props.namespace, selection);
+		const slotProps = toRef(() => ({
+			isDisabled: toValue(selection.disabled),
+			multiple: __props.multiple,
+			select: selection.select,
+			unselect: selection.unselect,
+			toggle: selection.toggle,
+			attrs: { "aria-multiselectable": __props.multiple }
+		}));
 		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default", {
-				ariaMultiselectable: __props.multiple,
-				disabled: toValue(unref(context).disabled),
-				multiple: __props.multiple,
-				select: unref(context).select,
-				toggle: unref(context).toggle,
-				unselect: unref(context).unselect
-			});
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)));
 		};
 	}
 });
-var SelectionRoot_default = _sfc_main$4;
-
-//#endregion
-//#region src/components/Selection/index.ts
-const Selection = {
-	Root: SelectionRoot_default,
-	Item: SelectionItem_default
-};
+var SelectionRoot_default = _sfc_main$5;
 
 //#endregion
-//#region src/components/Single/SingleItem.vue
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-	name: "SingleItem",
-	__name: "SingleItem",
+//#region src/components/Selection/SelectionItem.vue
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+	name: "SelectionItem",
+	__name: "SelectionItem",
 	props: {
-		label: {},
 		id: {},
-		disabled: {},
+		label: {},
 		value: {},
-		namespace: { default: "v0:single" }
+		disabled: {},
+		namespace: { default: "v0:selection" }
 	},
 	setup(__props) {
-		const single = useSingle(__props.namespace);
-		const ticket = single.register({
+		const selection = useSelectionRoot(__props.namespace);
+		const ticket = selection.register({
 			id: __props.id,
 			value: __props.value,
 			disabled: __props.disabled
 		});
-		const isDisabled = toRef(() => toValue(ticket.disabled) || toValue(single.disabled));
+		const isDisabled = toRef(() => toValue(ticket.disabled) || toValue(selection.disabled));
 		onUnmounted(() => {
-			single.unregister(ticket.id);
+			selection.unregister(ticket.id);
 		});
+		const slotProps = toRef(() => ({
+			id: String(ticket.id),
+			label: __props.label,
+			value: __props.value,
+			isSelected: toValue(ticket.isSelected),
+			isDisabled: toValue(isDisabled),
+			select: ticket.select,
+			unselect: ticket.unselect,
+			toggle: ticket.toggle,
+			attrs: {
+				"aria-selected": toValue(ticket.isSelected),
+				"aria-disabled": toValue(isDisabled),
+				"data-selected": toValue(ticket.isSelected) || void 0,
+				"data-disabled": toValue(isDisabled) || void 0
+			}
+		}));
 		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default", {
-				id: String(unref(ticket).id),
-				ariaDisabled: toValue(isDisabled.value),
-				ariaSelected: toValue(unref(ticket).isSelected),
-				disabled: toValue(isDisabled.value),
-				isSelected: toValue(unref(ticket).isSelected),
-				label: __props.label,
-				select: unref(ticket).select,
-				toggle: unref(ticket).toggle,
-				unselect: unref(ticket).unselect,
-				value: __props.value
-			});
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)));
 		};
 	}
 });
-var SingleItem_default = _sfc_main$3;
+var SelectionItem_default = _sfc_main$4;
+
+//#endregion
+//#region src/components/Selection/index.ts
+const Selection = {
+	Root: SelectionRoot_default,
+	Item: SelectionItem_default
+};
 
 //#endregion
 //#region src/components/Single/SingleRoot.vue
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const [useSingleRoot, provideSingleRoot] = createContext();
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
 	name: "SingleRoot",
 	__name: "SingleRoot",
 	props: /* @__PURE__ */ mergeModels({
@@ -1339,79 +1259,85 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
 	emits: ["update:modelValue"],
 	setup(__props) {
 		const model = useModel(__props, "modelValue");
-		const [, provideSingleControl, context] = createSingleContext({
-			namespace: __props.namespace,
+		const single = createSingle({
 			disabled: toRef(() => __props.disabled),
 			enroll: __props.enroll,
 			mandatory: __props.mandatory,
 			events: true
 		});
-		useProxyModel(context, model, { multiple: false });
-		provideSingleControl(context);
+		useProxyModel(single, model, { multiple: false });
+		provideSingleRoot(__props.namespace, single);
+		const slotProps = toRef(() => ({
+			isDisabled: toValue(single.disabled),
+			select: single.select,
+			unselect: single.unselect,
+			toggle: single.toggle,
+			attrs: { "aria-multiselectable": false }
+		}));
 		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default", {
-				ariaMultiselectable: true,
-				disabled: toValue(unref(context).disabled),
-				select: unref(context).select,
-				toggle: unref(context).toggle,
-				unselect: unref(context).unselect
-			});
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)));
 		};
 	}
 });
-var SingleRoot_default = _sfc_main$2;
-
-//#endregion
-//#region src/components/Single/index.ts
-const Single = {
-	Root: SingleRoot_default,
-	Item: SingleItem_default
-};
+var SingleRoot_default = _sfc_main$3;
 
 //#endregion
-//#region src/components/Step/StepItem.vue
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-	name: "StepItem",
-	__name: "StepItem",
+//#region src/components/Single/SingleItem.vue
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+	name: "SingleItem",
+	__name: "SingleItem",
 	props: {
-		label: {},
 		id: {},
-		disabled: {},
+		label: {},
 		value: {},
-		namespace: { default: "v0:step" }
+		disabled: {},
+		namespace: { default: "v0:single" }
 	},
 	setup(__props) {
-		const step = useStep(__props.namespace);
-		const ticket = step.register({
+		const single = useSingleRoot(__props.namespace);
+		const ticket = single.register({
 			id: __props.id,
 			value: __props.value,
 			disabled: __props.disabled
 		});
-		const isDisabled = toRef(() => toValue(ticket.disabled) || toValue(step.disabled));
+		const isDisabled = toRef(() => toValue(ticket.disabled) || toValue(single.disabled));
 		onUnmounted(() => {
-			step.unregister(ticket.id);
+			single.unregister(ticket.id);
 		});
+		const slotProps = toRef(() => ({
+			id: String(ticket.id),
+			label: __props.label,
+			value: __props.value,
+			isSelected: toValue(ticket.isSelected),
+			isDisabled: toValue(isDisabled),
+			select: ticket.select,
+			unselect: ticket.unselect,
+			toggle: ticket.toggle,
+			attrs: {
+				"aria-selected": toValue(ticket.isSelected),
+				"aria-disabled": toValue(isDisabled),
+				"data-selected": toValue(ticket.isSelected) || void 0,
+				"data-disabled": toValue(isDisabled) || void 0
+			}
+		}));
 		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default", {
-				id: String(unref(ticket).id),
-				ariaDisabled: toValue(isDisabled.value),
-				ariaSelected: toValue(unref(ticket).isSelected),
-				disabled: toValue(isDisabled.value),
-				isSelected: toValue(unref(ticket).isSelected),
-				label: __props.label,
-				select: unref(ticket).select,
-				toggle: unref(ticket).toggle,
-				unselect: unref(ticket).unselect,
-				value: __props.value
-			});
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)));
 		};
 	}
 });
-var StepItem_default = _sfc_main$1;
+var SingleItem_default = _sfc_main$2;
+
+//#endregion
+//#region src/components/Single/index.ts
+const Single = {
+	Root: SingleRoot_default,
+	Item: SingleItem_default
+};
 
 //#endregion
 //#region src/components/Step/StepRoot.vue
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const [useStepRoot, provideStepRoot] = createContext();
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 	name: "StepRoot",
 	__name: "StepRoot",
 	props: /* @__PURE__ */ mergeModels({
@@ -1435,32 +1361,78 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 	emits: ["update:modelValue"],
 	setup(__props) {
 		const model = useModel(__props, "modelValue");
-		const [, provideStepControl, context] = createStepContext({
-			namespace: __props.namespace,
+		const step = createStep({
 			disabled: toRef(() => __props.disabled),
 			enroll: __props.enroll,
 			mandatory: __props.mandatory,
 			events: true
 		});
-		useProxyModel(context, model, { multiple: false });
-		provideStepControl(context);
+		useProxyModel(step, model, { multiple: false });
+		provideStepRoot(__props.namespace, step);
+		const slotProps = toRef(() => ({
+			isDisabled: toValue(step.disabled),
+			first: step.first,
+			last: step.last,
+			next: step.next,
+			prev: step.prev,
+			step: step.step,
+			select: step.select,
+			unselect: step.unselect,
+			toggle: step.toggle,
+			attrs: { "aria-multiselectable": false }
+		}));
+		return (_ctx, _cache) => {
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)));
+		};
+	}
+});
+var StepRoot_default = _sfc_main$1;
+
+//#endregion
+//#region src/components/Step/StepItem.vue
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	name: "StepItem",
+	__name: "StepItem",
+	props: {
+		id: {},
+		label: {},
+		value: {},
+		disabled: {},
+		namespace: { default: "v0:step" }
+	},
+	setup(__props) {
+		const step = useStepRoot(__props.namespace);
+		const ticket = step.register({
+			id: __props.id,
+			value: __props.value,
+			disabled: __props.disabled
+		});
+		const isDisabled = toRef(() => toValue(ticket.disabled) || toValue(step.disabled));
+		onUnmounted(() => {
+			step.unregister(ticket.id);
+		});
+		const slotProps = toRef(() => ({
+			id: String(ticket.id),
+			label: __props.label,
+			value: __props.value,
+			isSelected: toValue(ticket.isSelected),
+			isDisabled: toValue(isDisabled),
+			select: ticket.select,
+			unselect: ticket.unselect,
+			toggle: ticket.toggle,
+			attrs: {
+				"aria-selected": toValue(ticket.isSelected),
+				"aria-disabled": toValue(isDisabled),
+				"data-selected": toValue(ticket.isSelected) || void 0,
+				"data-disabled": toValue(isDisabled) || void 0
+			}
+		}));
 		return (_ctx, _cache) => {
-			return renderSlot(_ctx.$slots, "default", {
-				ariaMultiselectable: true,
-				disabled: toValue(unref(context).disabled),
-				first: unref(context).first,
-				last: unref(context).last,
-				next: unref(context).next,
-				prev: unref(context).prev,
-				select: unref(context).select,
-				step: unref(context).step,
-				toggle: unref(context).toggle,
-				unselect: unref(context).unselect
-			});
+			return renderSlot(_ctx.$slots, "default", normalizeProps(guardReactiveProps(slotProps.value)));
 		};
 	}
 });
-var StepRoot_default = _sfc_main;
+var StepItem_default = _sfc_main;
 
 //#endregion
 //#region src/components/Step/index.ts
@@ -1470,4 +1442,4 @@ const Step = {
 };
 
 //#endregion
-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 };
+export { useAvatarRoot as A, ExpansionPanel as C, useExpansionPanelRoot as D, provideExpansionPanelSelection as E, Avatar as O, useGroupRoot as S, useExpansionPanelItem as T, usePaginationControls as _, provideSingleRoot as a, Group as b, provideSelectionRoot as c, providePopoverContext as d, usePopoverContext as f, providePaginationRoot as g, providePaginationItems as h, Single as i, Atom_default as j, provideAvatarContext as k, useSelectionRoot as l, providePaginationControls as m, provideStepRoot as n, useSingleRoot as o, Pagination as p, useStepRoot as r, Selection as s, Step as t, Popover as u, usePaginationItems as v, provideExpansionPanelItem as w, provideGroupRoot as x, usePaginationRoot as y };