@auronui/vue 1.0.22 → 1.1.0

package/dist/cjs/index.cjs

@@ -381,7 +381,7 @@ var _hoisted_2$31 = {
 	width: "100%",
 	height: "100%"
 };
-var _hoisted_3$20 = { fill: "none" };
+var _hoisted_3$19 = { fill: "none" };
 var _hoisted_4$13 = ["fill"];
 var _hoisted_5$9 = ["fill"];
 //#endregion
@@ -435,7 +435,7 @@ var Spinner_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				offset: "100%",
 				"stop-color": "currentColor",
 				"stop-opacity": "0.55"
-			}, null, -1)])])]), (0, vue.createElementVNode)("g", _hoisted_3$20, [
+			}, null, -1)])])]), (0, vue.createElementVNode)("g", _hoisted_3$19, [
 				_cache[2] || (_cache[2] = (0, vue.createElementVNode)("path", { d: "m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" }, null, -1)),
 				(0, vue.createElementVNode)("path", {
 					d: "M8.749.021a1.5 1.5 0 0 1 .497 2.958A7.5 7.5 0 0 0 3 10.375a7.5 7.5 0 0 0 7.5 7.5v3c-5.799 0-10.5-4.7-10.5-10.5C0 5.23 3.726.865 8.749.021",
@@ -2050,7 +2050,7 @@ var _hoisted_1$55 = [
 	"data-has-helper"
 ];
 var _hoisted_2$30 = ["for"];
-var _hoisted_3$19 = {
+var _hoisted_3$18 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -2218,7 +2218,7 @@ var Input_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 0,
 				for: inputId.value,
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
-			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$19, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$30)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [(0, vue.createElementVNode)("div", {
+			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$18, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$30)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [(0, vue.createElementVNode)("div", {
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.inputWrapper(), props.classNames?.inputWrapper)),
 				"data-filled": hasLabel.value ? isFilled.value || void 0 : void 0
 			}, [
@@ -2328,7 +2328,7 @@ var _hoisted_1$54 = [
 	"data-has-helper"
 ];
 var _hoisted_2$29 = ["for"];
-var _hoisted_3$18 = {
+var _hoisted_3$17 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -2465,7 +2465,7 @@ var Textarea_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 0,
 				for: inputId.value,
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
-			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$18, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$29)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [(0, vue.createElementVNode)("div", {
+			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$17, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$29)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [(0, vue.createElementVNode)("div", {
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.inputWrapper(), props.classNames?.inputWrapper)),
 				"data-filled": hasLabel.value ? isFilled.value || void 0 : void 0
 			}, [
@@ -2930,7 +2930,7 @@ var Checkbox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 //#region src/components/checkbox/CheckboxGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$50 = ["aria-labelledby", "data-orientation"];
 var _hoisted_2$27 = { class: "checkbox-group__wrapper" };
-var _hoisted_3$17 = {
+var _hoisted_3$16 = {
 	key: 1,
 	class: "checkbox-group__description"
 };
@@ -2995,7 +2995,7 @@ var CheckboxGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						_: 2
 					}, 1032, ["value", "disabled"]);
 				}), 128)) : (0, vue.renderSlot)(_ctx.$slots, "default", { key: 1 })]),
-				props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$17, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)
+				props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$16, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)
 			], 10, _hoisted_1$50);
 		};
 	}
@@ -13743,7 +13743,7 @@ var _hoisted_2$24 = {
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
 };
-var _hoisted_3$16 = {
+var _hoisted_3$15 = {
 	key: 2,
 	"data-slot": "alert-dialog-default-icon",
 	viewBox: "0 0 24 24",
@@ -13797,7 +13797,7 @@ var AlertDialogIcon_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				(0, vue.createElementVNode)("path", { d: "M12 3.5 2.8 19.5a1.2 1.2 0 0 0 1 1.8h16.4a1.2 1.2 0 0 0 1-1.8L12 3.5Z" }, null, -1),
 				(0, vue.createElementVNode)("path", { d: "M12 10v4" }, null, -1),
 				(0, vue.createElementVNode)("path", { d: "M12 17.5h.01" }, null, -1)
-			])])) : resolvedStatus() === "success" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_3$16, [..._cache[2] || (_cache[2] = [(0, vue.createElementVNode)("circle", {
+			])])) : resolvedStatus() === "success" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_3$15, [..._cache[2] || (_cache[2] = [(0, vue.createElementVNode)("circle", {
 				cx: "12",
 				cy: "12",
 				r: "9"
@@ -15529,7 +15529,7 @@ var { useProvide: useBreadcrumbsProvide, useInject: useBreadcrumbsInject, key: b
 //#region src/components/breadcrumbs/BreadcrumbItem.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$41 = ["aria-current"];
 var _hoisted_2$23 = ["href"];
-var _hoisted_3$15 = {
+var _hoisted_3$14 = {
 	key: 1,
 	xmlns: "http://www.w3.org/2000/svg",
 	viewBox: "0 0 24 24",
@@ -15578,7 +15578,7 @@ var BreadcrumbItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 2,
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)((0, vue.unref)(ctx).slotFns.value.separator(), props.classNames?.separator)),
 				"aria-hidden": "true"
-			}, [SeparatorRenderer.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(SeparatorRenderer.value), { key: 0 })) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_3$15, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("polyline", { points: "9 6 15 12 9 18" }, null, -1)])]))], 2)) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$41);
+			}, [SeparatorRenderer.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(SeparatorRenderer.value), { key: 0 })) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_3$14, [..._cache[0] || (_cache[0] = [(0, vue.createElementVNode)("polyline", { points: "9 6 15 12 9 18" }, null, -1)])]))], 2)) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$41);
 		};
 	}
 });
@@ -15962,7 +15962,7 @@ var _hoisted_2$22 = {
 	"stroke-linecap": "round",
 	"stroke-linejoin": "round"
 };
-var _hoisted_3$14 = {
+var _hoisted_3$13 = {
 	key: 2,
 	"data-slot": "alert-default-icon",
 	viewBox: "0 0 24 24",
@@ -16049,7 +16049,7 @@ var Alert_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							cx: "12",
 							cy: "12",
 							r: "9"
-						}, null, -1), (0, vue.createElementVNode)("path", { d: "m8.5 12.5 2.5 2.5 4.5-5" }, null, -1)])])) : __props.severity === "warning" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_3$14, [..._cache[2] || (_cache[2] = [
+						}, null, -1), (0, vue.createElementVNode)("path", { d: "m8.5 12.5 2.5 2.5 4.5-5" }, null, -1)])])) : __props.severity === "warning" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_3$13, [..._cache[2] || (_cache[2] = [
 							(0, vue.createElementVNode)("path", { d: "M12 3.5 2.8 19.5a1.2 1.2 0 0 0 1 1.8h16.4a1.2 1.2 0 0 0 1-1.8L12 3.5Z" }, null, -1),
 							(0, vue.createElementVNode)("path", { d: "M12 10v4" }, null, -1),
 							(0, vue.createElementVNode)("path", { d: "M12 17.5h.01" }, null, -1)
@@ -16630,6 +16630,10 @@ var ListBoxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		indicatorAsChild: {
 			type: Boolean,
 			default: false
+		},
+		hideSelectedIcon: {
+			type: Boolean,
+			default: void 0
 		}
 	},
 	emits: ["select"],
@@ -16639,10 +16643,12 @@ var ListBoxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const ctx = useListBoxInject({
 			variant: (0, vue.ref)("default"),
 			itemVariant: (0, vue.ref)("default"),
-			isDisabled: (0, vue.ref)(false)
+			isDisabled: (0, vue.ref)(false),
+			hideSelectedIcon: (0, vue.ref)(false)
 		});
 		const finalVariant = (0, vue.computed)(() => props.variant ?? ctx.itemVariant.value);
 		const finalDisabled = (0, vue.computed)(() => ctx.isDisabled.value || props.isDisabled);
+		const finalHideSelectedIcon = (0, vue.computed)(() => props.hideSelectedIcon ?? ctx.hideSelectedIcon.value);
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.listboxItemVariants)({ variant: finalVariant.value }));
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.ListboxItem), {
@@ -16658,7 +16664,8 @@ var ListBoxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					(0, vue.renderSlot)(_ctx.$slots, "startContent"),
 					(0, vue.renderSlot)(_ctx.$slots, "default"),
 					(0, vue.renderSlot)(_ctx.$slots, "endContent"),
-					(0, vue.createVNode)((0, vue.unref)(reka_ui.ListboxItemIndicator), {
+					!finalHideSelectedIcon.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.ListboxItemIndicator), {
+						key: 0,
 						as: props.indicatorAs,
 						"as-child": props.indicatorAsChild,
 						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.indicator(), props.classNames?.indicator))
@@ -16681,7 +16688,7 @@ var ListBoxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						"as",
 						"as-child",
 						"class"
-					])
+					])) : (0, vue.createCommentVNode)("", true)
 				]),
 				_: 3
 			}, 8, [
@@ -16696,6 +16703,19 @@ var ListBoxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	}
 });
 //#endregion
+//#region src/components/list-box/ListBox.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$38 = {
+	key: 0,
+	"data-slot": "list-box-loading",
+	role: "status",
+	"aria-live": "polite"
+};
+var _hoisted_2$21 = {
+	key: 1,
+	class: "flex justify-center p-2",
+	"data-slot": "list-box-load-more"
+};
+//#endregion
 //#region src/components/list-box/ListBox.vue
 var ListBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
@@ -16747,13 +16767,39 @@ var ListBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		contentAsChild: {
 			type: Boolean,
 			default: false
-		}
+		},
+		hideSelectedIcon: {
+			type: Boolean,
+			default: false
+		},
+		virtualized: {
+			type: Boolean,
+			default: false
+		},
+		estimateSize: {
+			type: [Number, Function],
+			default: 36
+		},
+		overscan: { default: 12 },
+		maxHeight: { default: "16rem" },
+		hasMore: {
+			type: Boolean,
+			default: false
+		},
+		isLoading: {
+			type: Boolean,
+			default: false
+		},
+		loadMoreDistance: { default: 120 },
+		loadMode: { default: "scroll" },
+		loadMoreLabel: { default: "Load more" }
 	},
 	emits: [
 		"update:modelValue",
 		"highlight",
 		"entry-focus",
-		"leave"
+		"leave",
+		"load-more"
 	],
 	setup(__props, { emit: __emit }) {
 		const props = __props;
@@ -16762,13 +16808,33 @@ var ListBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		useListBoxProvide({
 			variant: (0, vue.toRef)(props, "variant"),
 			itemVariant: (0, vue.toRef)(props, "variant"),
-			isDisabled: (0, vue.toRef)(props, "isDisabled")
+			isDisabled: (0, vue.toRef)(props, "isDisabled"),
+			hideSelectedIcon: (0, vue.toRef)(props, "hideSelectedIcon")
 		});
 		const slotFns = (0, vue.computed)(() => (0, _auronui_styles.listboxVariants)({ variant: props.variant }));
+		const contentRef = (0, vue.useTemplateRef)("content");
+		const lastRequestedCount = (0, vue.ref)(-1);
+		(0, _vueuse_core.useInfiniteScroll)(contentRef, () => {
+			lastRequestedCount.value = props.items?.length ?? 0;
+			emit("load-more");
+		}, {
+			distance: props.loadMoreDistance,
+			canLoadMore: () => props.loadMode === "scroll" && props.hasMore && !props.isLoading && (props.items?.length ?? 0) !== lastRequestedCount.value
+		});
+		function requestLoadMore() {
+			if (props.hasMore && !props.isLoading) emit("load-more");
+		}
+		const needsScroll = (0, vue.computed)(() => props.virtualized);
+		const contentStyle = (0, vue.computed)(() => needsScroll.value ? {
+			maxHeight: typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight,
+			overflowY: "auto"
+		} : void 0);
+		const rekaModelValue = (0, vue.computed)(() => props.modelValue == null ? void 0 : [].concat(props.modelValue));
+		const rekaDefaultValue = (0, vue.computed)(() => props.defaultValue == null ? void 0 : [].concat(props.defaultValue));
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.ListboxRoot), {
-				"model-value": props.modelValue == null ? void 0 : [].concat(props.modelValue),
-				"default-value": props.defaultValue == null ? void 0 : [].concat(props.defaultValue),
+				"model-value": rekaModelValue.value,
+				"default-value": rekaDefaultValue.value,
 				multiple: props.multiple ?? props.selectionMode === "multiple",
 				"selection-behavior": props.selectionBehavior ?? (props.selectionMode === "multiple" ? "toggle" : "replace"),
 				disabled: props.isDisabled,
@@ -16785,32 +16851,79 @@ var ListBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				onEntryFocus: _cache[2] || (_cache[2] = ($event) => emit("entry-focus", $event)),
 				onLeave: _cache[3] || (_cache[3] = ($event) => emit("leave", $event))
 			}, {
-				default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.ListboxContent), (0, vue.mergeProps)((0, vue.unref)(attrs), {
-					as: props.contentAs,
-					"as-child": props.contentAsChild,
-					class: (0, vue.unref)(composeClassName)(slotFns.value, props.class, props.classNames?.base)
-				}), {
-					default: (0, vue.withCtx)(() => [props.items ? ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, (0, vue.renderList)(props.items, (item) => {
-						return (0, vue.openBlock)(), (0, vue.createBlock)(ListBoxItem_default, {
-							key: item.value,
-							value: item.value,
-							"is-disabled": item.disabled,
-							"text-value": item.textValue
+				default: (0, vue.withCtx)(() => [
+					(0, vue.createVNode)((0, vue.unref)(reka_ui.ListboxContent), (0, vue.mergeProps)({ ref: "content" }, (0, vue.unref)(attrs), {
+						as: props.contentAs,
+						"as-child": props.contentAsChild,
+						style: contentStyle.value,
+						class: (0, vue.unref)(composeClassName)(slotFns.value, props.class, props.classNames?.base)
+					}), {
+						default: (0, vue.withCtx)(() => [props.virtualized && props.items ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.ListboxVirtualizer), {
+							key: 0,
+							options: props.items,
+							"estimate-size": props.estimateSize,
+							overscan: props.overscan,
+							"text-content": (o) => o.label ?? o.value
 						}, {
-							default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.label ?? item.value), 1)]),
-							_: 2
-						}, 1032, [
-							"value",
-							"is-disabled",
-							"text-value"
-						]);
-					}), 128)) : (0, vue.renderSlot)(_ctx.$slots, "default", { key: 1 })]),
-					_: 3
-				}, 16, [
-					"as",
-					"as-child",
-					"class"
-				])]),
+							default: (0, vue.withCtx)(({ option, virtualItem }) => [(0, vue.renderSlot)(_ctx.$slots, "item", {
+								item: option,
+								index: virtualItem.index
+							}, () => [(0, vue.createVNode)(ListBoxItem_default, {
+								value: option.value,
+								"is-disabled": option.disabled,
+								"text-value": option.textValue
+							}, {
+								default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(option.label ?? option.value), 1)]),
+								_: 2
+							}, 1032, [
+								"value",
+								"is-disabled",
+								"text-value"
+							])])]),
+							_: 3
+						}, 8, [
+							"options",
+							"estimate-size",
+							"overscan",
+							"text-content"
+						])) : props.items ? ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, (0, vue.renderList)(props.items, (item) => {
+							return (0, vue.openBlock)(), (0, vue.createBlock)(ListBoxItem_default, {
+								key: item.value,
+								value: item.value,
+								"is-disabled": item.disabled,
+								"text-value": item.textValue
+							}, {
+								default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(item.label ?? item.value), 1)]),
+								_: 2
+							}, 1032, [
+								"value",
+								"is-disabled",
+								"text-value"
+							]);
+						}), 128)) : (0, vue.renderSlot)(_ctx.$slots, "default", { key: 2 })]),
+						_: 3
+					}, 16, [
+						"as",
+						"as-child",
+						"style",
+						"class"
+					]),
+					props.loadMode === "scroll" && props.isLoading ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$38, [(0, vue.renderSlot)(_ctx.$slots, "loading", {}, () => [_cache[4] || (_cache[4] = (0, vue.createTextVNode)("Loading…", -1))])])) : (0, vue.createCommentVNode)("", true),
+					props.loadMode === "button" && props.hasMore ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_2$21, [(0, vue.renderSlot)(_ctx.$slots, "loadMore", {
+						loadMore: requestLoadMore,
+						isLoading: props.isLoading,
+						hasMore: props.hasMore
+					}, () => [(0, vue.createVNode)(Button_default, {
+						size: "sm",
+						"is-loading": props.isLoading,
+						disabled: props.isLoading,
+						"data-slot": "load-more-button",
+						onClick: requestLoadMore
+					}, {
+						default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(props.loadMoreLabel), 1)]),
+						_: 1
+					}, 8, ["is-loading", "disabled"])])])) : (0, vue.createCommentVNode)("", true)
+				]),
 				_: 3
 			}, 8, [
 				"model-value",
@@ -16924,8 +17037,8 @@ function hasSlotComponent(nodes, components) {
 }
 //#endregion
 //#region src/components/select/SelectTrigger.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$38 = ["for"];
-var _hoisted_2$21 = {
+var _hoisted_1$37 = ["for"];
+var _hoisted_2$20 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -16991,7 +17104,7 @@ var SelectTrigger_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						key: 0,
 						for: (0, vue.unref)(ctx).triggerId.value,
 						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.label())
-					}, [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(ctx).label.value), 1), (0, vue.unref)(ctx).isRequired.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$21, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$38)) : (0, vue.createCommentVNode)("", true),
+					}, [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(ctx).label.value), 1), (0, vue.unref)(ctx).isRequired.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$20, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$37)) : (0, vue.createCommentVNode)("", true),
 					_ctx.$slots.startContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 1,
 						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.startContent()),
@@ -17036,7 +17149,7 @@ var SelectTrigger_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/select/SelectOverflowChips.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$37 = {
+var _hoisted_1$36 = {
 	ref: "container",
 	style: {
 		"display": "flex",
@@ -17094,7 +17207,7 @@ var SelectOverflowChips_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		(0, _vueuse_core.useResizeObserver)(containerEl, reflow);
 		(0, vue.watch)(() => props.values.join("\0"), () => reflow(), { flush: "post" });
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$37, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.values, (val, i) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$36, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.values, (val, i) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)(Chip_default, {
 					key: val,
 					"data-chip-item": "",
@@ -17434,7 +17547,7 @@ var SelectItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/select/Select.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$36 = [
+var _hoisted_1$35 = [
 	"data-invalid",
 	"data-disabled",
 	"data-readonly",
@@ -17442,8 +17555,8 @@ var _hoisted_1$36 = [
 	"data-has-label",
 	"data-has-helper"
 ];
-var _hoisted_2$20 = ["for"];
-var _hoisted_3$13 = {
+var _hoisted_2$19 = ["for"];
+var _hoisted_3$12 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -17587,7 +17700,7 @@ var Select_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 0,
 				for: triggerId.value,
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
-			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$13, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$20)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.SelectRoot), {
+			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$12, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$19)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.SelectRoot), {
 				"model-value": props.modelValue,
 				"default-value": props.defaultValue,
 				multiple: props.multiple,
@@ -17647,7 +17760,7 @@ var Select_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 1,
 				id: descriptionId.value,
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.description(), props.classNames?.description))
-			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_5$6)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$36);
+			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_5$6)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$35);
 		};
 	}
 });
@@ -17913,9 +18026,9 @@ var DropdownMenu_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/dropdown/DropdownItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$35 = { class: "flex flex-1 flex-col" };
-var _hoisted_2$19 = { "data-slot": "label" };
-var _hoisted_3$12 = {
+var _hoisted_1$34 = { class: "flex flex-1 flex-col" };
+var _hoisted_2$18 = { "data-slot": "label" };
+var _hoisted_3$11 = {
 	key: 0,
 	"data-slot": "description"
 };
@@ -17964,7 +18077,7 @@ var DropdownItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, {
 				default: (0, vue.withCtx)(() => [
 					(0, vue.renderSlot)(_ctx.$slots, "startContent"),
-					(0, vue.createElementVNode)("div", _hoisted_1$35, [(0, vue.createElementVNode)("span", _hoisted_2$19, [(0, vue.renderSlot)(_ctx.$slots, "default")]), props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$12, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)]),
+					(0, vue.createElementVNode)("div", _hoisted_1$34, [(0, vue.createElementVNode)("span", _hoisted_2$18, [(0, vue.renderSlot)(_ctx.$slots, "default")]), props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$11, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)]),
 					props.shortcut ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("kbd", _hoisted_4$7, (0, vue.toDisplayString)(props.shortcut), 1)) : (0, vue.createCommentVNode)("", true),
 					(0, vue.renderSlot)(_ctx.$slots, "endContent")
 				]),
@@ -18995,9 +19108,9 @@ var ComboBoxItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/combo-box/ComboBox.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$34 = ["aria-invalid"];
-var _hoisted_2$18 = ["id"];
-var _hoisted_3$11 = {
+var _hoisted_1$33 = ["aria-invalid"];
+var _hoisted_2$17 = ["id"];
+var _hoisted_3$10 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -19183,7 +19296,7 @@ var ComboBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					key: 0,
 					id: (0, vue.unref)(labelId),
 					"data-slot": "label"
-				}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(props.label) + " ", 1), props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$11, " *")) : (0, vue.createCommentVNode)("", true)], 8, _hoisted_2$18)) : (0, vue.createCommentVNode)("", true),
+				}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(props.label) + " ", 1), props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$10, " *")) : (0, vue.createCommentVNode)("", true)], 8, _hoisted_2$17)) : (0, vue.createCommentVNode)("", true),
 				(0, vue.createVNode)((0, vue.unref)(reka_ui.ComboboxRoot), {
 					modelValue: internalValue.value,
 					"onUpdate:modelValue": [_cache[0] || (_cache[0] = ($event) => internalValue.value = $event), _cache[1] || (_cache[1] = ($event) => handleModelValueUpdate($event))],
@@ -19246,7 +19359,7 @@ var ComboBox_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"filter-function"
 				]),
 				props.description || props.isInvalid && props.errorMessage ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_4$6, [props.isInvalid && props.errorMessage ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", _hoisted_5$5, (0, vue.toDisplayString)(props.errorMessage), 1)) : props.description ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("p", _hoisted_6$4, (0, vue.toDisplayString)(props.description), 1)) : (0, vue.createCommentVNode)("", true)])) : (0, vue.createCommentVNode)("", true)
-			], 10, _hoisted_1$34);
+			], 10, _hoisted_1$33);
 		};
 	}
 });
@@ -19281,7 +19394,7 @@ var ComboBoxEmpty_default = /* @__PURE__ */ (0, vue.defineComponent)({
 var { useProvide: useAutocompleteProvide, useInject: useAutocompleteInject, key: autocompleteContextKey } = createContext("Autocomplete");
 //#endregion
 //#region src/components/autocomplete/AutocompleteOverflowChips.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$33 = {
+var _hoisted_1$32 = {
 	ref: "container",
 	style: {
 		"display": "flex",
@@ -19340,7 +19453,7 @@ var AutocompleteOverflowChips_default = /* @__PURE__ */ (0, vue.defineComponent)
 		(0, _vueuse_core.useResizeObserver)(containerEl, reflow);
 		(0, vue.watch)(() => props.values.join("\0"), () => reflow(), { flush: "post" });
 		return (_ctx, _cache) => {
-			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$33, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.values, (val, i) => {
+			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", _hoisted_1$32, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.values, (val, i) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)(Chip_default, {
 					key: val,
 					"data-chip-item": "",
@@ -19365,8 +19478,8 @@ var AutocompleteOverflowChips_default = /* @__PURE__ */ (0, vue.defineComponent)
 });
 //#endregion
 //#region src/components/autocomplete/AutocompleteInput.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$32 = ["for"];
-var _hoisted_2$17 = {
+var _hoisted_1$31 = ["for"];
+var _hoisted_2$16 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -19441,7 +19554,7 @@ var AutocompleteInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						key: 0,
 						for: (0, vue.unref)(ctx).inputId.value,
 						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.label())
-					}, [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(ctx).label.value), 1), (0, vue.unref)(ctx).isRequired.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$17, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$32)) : (0, vue.createCommentVNode)("", true),
+					}, [(0, vue.createTextVNode)((0, vue.toDisplayString)((0, vue.unref)(ctx).label.value), 1), (0, vue.unref)(ctx).isRequired.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$16, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_1$31)) : (0, vue.createCommentVNode)("", true),
 					_ctx.$slots.startContent ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 						key: 1,
 						class: (0, vue.normalizeClass)((0, vue.unref)(ctx).slots.value.startContent()),
@@ -19594,7 +19707,7 @@ var AutocompleteInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/autocomplete/AutocompleteContent.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$31 = [
+var _hoisted_1$30 = [
 	"inert",
 	"aria-disabled",
 	"data-disabled"
@@ -19806,7 +19919,7 @@ var AutocompleteContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 									_: 3
 								})) : (0, vue.createCommentVNode)("", true)]),
 								_: 3
-							})], 10, _hoisted_1$31)]),
+							})], 10, _hoisted_1$30)]),
 							_: 3
 						}, 8, [
 							"data-loading",
@@ -19854,11 +19967,11 @@ var AutocompleteContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/autocomplete/AutocompleteItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$30 = {
+var _hoisted_1$29 = {
 	class: "autocomplete-item__text",
 	"data-slot": "item-text"
 };
-var _hoisted_2$16 = {
+var _hoisted_2$15 = {
 	key: 1,
 	class: "list-box-item__indicator",
 	"data-slot": "list-box-item-indicator"
@@ -19937,7 +20050,7 @@ var AutocompleteItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, {
 				default: (0, vue.withCtx)(() => [
 					(0, vue.renderSlot)(_ctx.$slots, "startContent"),
-					(0, vue.createElementVNode)("span", _hoisted_1$30, [(0, vue.renderSlot)(_ctx.$slots, "default")]),
+					(0, vue.createElementVNode)("span", _hoisted_1$29, [(0, vue.renderSlot)(_ctx.$slots, "default")]),
 					!(0, vue.unref)(ctx).multiple.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.ComboboxItemIndicator), {
 						key: 0,
 						as: props.indicatorAs,
@@ -19959,7 +20072,7 @@ var AutocompleteItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							"aria-hidden": "true"
 						}, [(0, vue.createElementVNode)("polyline", { points: "20 6 9 17 4 12" })], -1))])]),
 						_: 3
-					}, 8, ["as", "as-child"])) : isChecked.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$16, [(0, vue.renderSlot)(_ctx.$slots, "selectedIcon", {}, () => [_cache[1] || (_cache[1] = (0, vue.createElementVNode)("svg", {
+					}, 8, ["as", "as-child"])) : isChecked.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_2$15, [(0, vue.renderSlot)(_ctx.$slots, "selectedIcon", {}, () => [_cache[1] || (_cache[1] = (0, vue.createElementVNode)("svg", {
 						xmlns: "http://www.w3.org/2000/svg",
 						width: "12",
 						height: "12",
@@ -19989,7 +20102,7 @@ var AutocompleteItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/autocomplete/Autocomplete.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$29 = [
+var _hoisted_1$28 = [
 	"data-invalid",
 	"data-disabled",
 	"data-readonly",
@@ -19997,8 +20110,8 @@ var _hoisted_1$29 = [
 	"data-has-label",
 	"data-has-helper"
 ];
-var _hoisted_2$15 = ["for"];
-var _hoisted_3$10 = {
+var _hoisted_2$14 = ["for"];
+var _hoisted_3$9 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -20338,7 +20451,7 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 0,
 				for: inputId.value,
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
-			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$10, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$15)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.AutocompleteRoot), {
+			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$9, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$14)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.AutocompleteRoot), {
 				"model-value": searchTerm.value,
 				"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchTerm.value = $event),
 				open: props.multiple ? internalOpen.value : singleOpen.value,
@@ -20399,13 +20512,13 @@ var Autocomplete_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 1,
 				id: descriptionId.value,
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.description(), props.classNames?.description))
-			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_5$4)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$29);
+			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_5$4)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$28);
 		};
 	}
 });
 //#endregion
 //#region src/components/autocomplete/AutocompleteCreateItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$28 = {
+var _hoisted_1$27 = {
 	class: "autocomplete-item__text",
 	"data-slot": "item-text"
 };
@@ -20463,7 +20576,7 @@ var AutocompleteCreateItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"data-create-item": "",
 				onSelect: handleSelect
 			}, {
-				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", { term: term.value }, () => [(0, vue.createElementVNode)("span", _hoisted_1$28, (0, vue.toDisplayString)(displayLabel.value), 1)])]),
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", { term: term.value }, () => [(0, vue.createElementVNode)("span", _hoisted_1$27, (0, vue.toDisplayString)(displayLabel.value), 1)])]),
 				_: 3
 			}, 8, [
 				"value",
@@ -20584,8 +20697,8 @@ var Pagination_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/pagination/PaginationContent.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$27 = ["disabled", "data-disabled"];
-var _hoisted_2$14 = ["disabled", "data-disabled"];
+var _hoisted_1$26 = ["disabled", "data-disabled"];
+var _hoisted_2$13 = ["disabled", "data-disabled"];
 //#endregion
 //#region src/components/pagination/PaginationContent.vue
 var PaginationContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -20627,7 +20740,7 @@ var PaginationContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"data-disabled": !hasPreviousPage.value || (0, vue.unref)(ctx).disabled.value || void 0,
 					"aria-label": "Before page",
 					onClick: _cache[0] || (_cache[0] = ($event) => (0, vue.unref)(ctx).onCursorChange((0, vue.unref)(ctx).beforeCursor.value, null))
-				}, [(0, vue.renderSlot)(_ctx.$slots, "before", {}, () => [_cache[2] || (_cache[2] = (0, vue.createTextVNode)(" Before ", -1))])], 10, _hoisted_1$27),
+				}, [(0, vue.renderSlot)(_ctx.$slots, "before", {}, () => [_cache[2] || (_cache[2] = (0, vue.createTextVNode)(" Before ", -1))])], 10, _hoisted_1$26),
 				(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)(styles.value.summary?.()) }, [(0, vue.renderSlot)(_ctx.$slots, "page-info", {}, () => [(0, vue.createTextVNode)("Page " + (0, vue.toDisplayString)((0, vue.unref)(ctx).page.value), 1)])], 2),
 				(0, vue.createElementVNode)("button", {
 					type: "button",
@@ -20636,7 +20749,7 @@ var PaginationContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"data-disabled": !hasNextPage.value || (0, vue.unref)(ctx).disabled.value || void 0,
 					"aria-label": "After page",
 					onClick: _cache[1] || (_cache[1] = ($event) => (0, vue.unref)(ctx).onCursorChange(null, (0, vue.unref)(ctx).afterCursor.value))
-				}, [(0, vue.renderSlot)(_ctx.$slots, "after", {}, () => [_cache[3] || (_cache[3] = (0, vue.createTextVNode)(" After ", -1))])], 10, _hoisted_2$14)
+				}, [(0, vue.renderSlot)(_ctx.$slots, "after", {}, () => [_cache[3] || (_cache[3] = (0, vue.createTextVNode)(" After ", -1))])], 10, _hoisted_2$13)
 			], 2));
 		};
 	}
@@ -23469,7 +23582,7 @@ function useTableKeyboardNav(options) {
 }
 //#endregion
 //#region src/components/table/TableHeader.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$26 = [
+var _hoisted_1$25 = [
 	"data-col-index",
 	"aria-sort",
 	"data-allows-sorting",
@@ -23526,7 +23639,7 @@ var TableHeader_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						key: 0,
 						render: header.column.columnDef.header,
 						props: header.getContext()
-					}, null, 8, ["render", "props"])) : (0, vue.createCommentVNode)("", true)], 42, _hoisted_1$26);
+					}, null, 8, ["render", "props"])) : (0, vue.createCommentVNode)("", true)], 42, _hoisted_1$25);
 				}), 128))], 2);
 			}), 128))], 2);
 		};
@@ -23534,14 +23647,14 @@ var TableHeader_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/table/TableBody.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$25 = [
+var _hoisted_1$24 = [
 	"aria-rowindex",
 	"aria-selected",
 	"data-state",
 	"onClick",
 	"onKeydown"
 ];
-var _hoisted_2$13 = [
+var _hoisted_2$12 = [
 	"data-row-index",
 	"data-col-index",
 	"tabindex"
@@ -23591,8 +23704,8 @@ var TableBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					}, () => [(0, vue.createVNode)((0, vue.unref)(FlexRender), {
 						render: cell.column.columnDef.cell,
 						props: cell.getContext()
-					}, null, 8, ["render", "props"])])], 10, _hoisted_2$13);
-				}), 128))], 42, _hoisted_1$25);
+					}, null, 8, ["render", "props"])])], 10, _hoisted_2$12);
+				}), 128))], 42, _hoisted_1$24);
 			}), 128))], 2);
 		};
 	}
@@ -24384,12 +24497,12 @@ function useVirtualizer(options) {
 }
 //#endregion
 //#region src/components/table/TableVirtualBody.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$24 = {
+var _hoisted_1$23 = {
 	key: 0,
 	"aria-hidden": "true"
 };
-var _hoisted_2$12 = ["colspan"];
-var _hoisted_3$9 = [
+var _hoisted_2$11 = ["colspan"];
+var _hoisted_3$8 = [
 	"aria-rowindex",
 	"aria-selected",
 	"data-state",
@@ -24453,14 +24566,14 @@ var TableVirtualBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		__expose({ scrollToIndex: (index) => virtualizer.value.scrollToIndex(index, { align: "auto" }) });
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("tbody", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.body(), props.classNames?.body)) }, [
-				paddingTop.value > 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("tr", _hoisted_1$24, [(0, vue.createElementVNode)("td", {
+				paddingTop.value > 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("tr", _hoisted_1$23, [(0, vue.createElementVNode)("td", {
 					colspan: columnCount.value,
 					style: (0, vue.normalizeStyle)({
 						height: `${paddingTop.value}px`,
 						padding: 0,
 						border: "none"
 					})
-				}, null, 12, _hoisted_2$12)])) : (0, vue.createCommentVNode)("", true),
+				}, null, 12, _hoisted_2$11)])) : (0, vue.createCommentVNode)("", true),
 				((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(virtualItems.value, (vItem) => {
 					return (0, vue.openBlock)(), (0, vue.createElementBlock)("tr", {
 						key: rows.value[vItem.index].id,
@@ -24483,7 +24596,7 @@ var TableVirtualBody_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							render: cell.column.columnDef.cell,
 							props: cell.getContext()
 						}, null, 8, ["render", "props"])], 10, _hoisted_4$4);
-					}), 128))], 42, _hoisted_3$9);
+					}), 128))], 42, _hoisted_3$8);
 				}), 128)),
 				paddingBottom.value > 0 ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("tr", _hoisted_5$3, [(0, vue.createElementVNode)("td", {
 					colspan: columnCount.value,
@@ -24558,7 +24671,7 @@ var TableCheckboxCell_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/table/Table.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$23 = [
+var _hoisted_1$22 = [
 	"aria-label",
 	"aria-rowcount",
 	"aria-colcount"
@@ -24732,7 +24845,7 @@ var Table_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "footer")]),
 					_: 3
 				})) : (0, vue.createCommentVNode)("", true)
-			], 40, _hoisted_1$23)], 6)], 2);
+			], 40, _hoisted_1$22)], 6)], 2);
 		};
 	}
 });
@@ -24764,7 +24877,7 @@ var TableRow_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/table/TableCell.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$22 = ["data-row-index", "data-col-index"];
+var _hoisted_1$21 = ["data-row-index", "data-col-index"];
 //#endregion
 //#region src/components/table/TableCell.vue
 var TableCell_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -24784,13 +24897,13 @@ var TableCell_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.cell(), props.classNames?.cell)),
 				"data-row-index": __props.rowIndex,
 				"data-col-index": __props.columnIndex
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$22);
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$21);
 		};
 	}
 });
 //#endregion
 //#region src/components/table/TableHeaderCell.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$21 = ["data-col-index", "aria-sort"];
+var _hoisted_1$20 = ["data-col-index", "aria-sort"];
 //#endregion
 //#region src/components/table/TableHeaderCell.vue
 var TableHeaderCell_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -24810,7 +24923,7 @@ var TableHeaderCell_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.column(), props.classNames?.column)),
 				"data-col-index": __props.columnIndex,
 				"aria-sort": __props.sortDirection
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$21);
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 10, _hoisted_1$20);
 		};
 	}
 });
@@ -24819,11 +24932,11 @@ var TableHeaderCell_default = /* @__PURE__ */ (0, vue.defineComponent)({
 var { useProvide: useAvatarGroupProvide, useInject: useAvatarGroupInject, key: avatarGroupContextKey } = createContext("AvatarGroup");
 //#endregion
 //#region src/components/avatar/Avatar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$20 = {
+var _hoisted_1$19 = {
 	key: 0,
 	class: /* @__PURE__ */ (0, vue.normalizeClass)("avatar__name text-xs font-medium leading-none")
 };
-var _hoisted_2$11 = {
+var _hoisted_2$10 = {
 	key: 1,
 	class: "avatar__icon size-4/5",
 	"aria-hidden": "true",
@@ -24932,7 +25045,7 @@ var Avatar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"delay-ms": props.delayMs,
 					class: (0, vue.unref)(composeClassName)(slotFns.value.fallback(), props.classNames?.fallback)
 				}, props.src && !props.showFallback && props.delayMs === void 0 ? { "delay-ms": 600 } : {}), {
-					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "fallback", {}, () => [initials.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1$20, (0, vue.toDisplayString)(initials.value), 1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$11, [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("path", { d: "M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z" }, null, -1)])]))])]),
+					default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "fallback", {}, () => [initials.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_1$19, (0, vue.toDisplayString)(initials.value), 1)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_2$10, [..._cache[1] || (_cache[1] = [(0, vue.createElementVNode)("path", { d: "M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v2.4h19.2v-2.4c0-3.2-6.4-4.8-9.6-4.8z" }, null, -1)])]))])]),
 					_: 3
 				}, 16, [
 					"as",
@@ -24953,7 +25066,7 @@ var Avatar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/avatar/AvatarGroup.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$19 = { class: "avatar__name text-xs font-medium leading-none" };
+var _hoisted_1$18 = { class: "avatar__name text-xs font-medium leading-none" };
 //#endregion
 //#region src/components/avatar/AvatarGroup.vue
 var AvatarGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -25026,7 +25139,7 @@ var AvatarGroup_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			}, [props.avatars ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(visibleAvatars.value, (avatar, idx) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)(Avatar_default, (0, vue.mergeProps)({ key: idx }, { ref_for: true }, avatar), null, 16);
 			}), 128)), avatarOverflowCount.value > 0 ? ((0, vue.openBlock)(), (0, vue.createBlock)(Avatar_default, { key: 0 }, {
-				fallback: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", _hoisted_1$19, (0, vue.toDisplayString)(avatarOverflowLabel.value), 1)]),
+				fallback: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("span", _hoisted_1$18, (0, vue.toDisplayString)(avatarOverflowLabel.value), 1)]),
 				_: 1
 			})) : (0, vue.createCommentVNode)("", true)], 64)) : props.max !== void 0 ? ((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, { key: 1 }, (0, vue.renderList)(getSlicedNodes(), (node, _i) => {
 				return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)(node), { key: _i });
@@ -25277,7 +25390,7 @@ var SplitterResizeHandle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 var stepperContextKey = Symbol("Stepper");
 //#endregion
 //#region src/components/stepper/StepperItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$18 = ["data-status", "data-step"];
+var _hoisted_1$17 = ["data-status", "data-step"];
 //#endregion
 //#region src/components/stepper/StepperItem.vue
 var StepperItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -25317,7 +25430,7 @@ var StepperItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				isCurrent: status.value === "current",
 				isCompleted: status.value === "completed",
 				isError: status.value === "error"
-			})], 10, _hoisted_1$18);
+			})], 10, _hoisted_1$17);
 		};
 	}
 });
@@ -25471,7 +25584,7 @@ var StepperContent_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/stepper/Stepper.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$17 = ["aria-label"];
+var _hoisted_1$16 = ["aria-label"];
 //#endregion
 //#region src/components/stepper/Stepper.vue
 var Stepper_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -25557,7 +25670,7 @@ var Stepper_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					]),
 					_: 2
 				}, 1032, ["step"]);
-			}), 128)) : (0, vue.renderSlot)(_ctx.$slots, "default", { key: 1 })], 10, _hoisted_1$17);
+			}), 128)) : (0, vue.renderSlot)(_ctx.$slots, "default", { key: 1 })], 10, _hoisted_1$16);
 		};
 	}
 });
@@ -25662,7 +25775,7 @@ var Tree_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/tree/TreeItem.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$16 = ["data-selected", "data-expanded"];
+var _hoisted_1$15 = ["data-selected", "data-expanded"];
 //#endregion
 //#region src/components/tree/TreeItem.vue
 var TreeItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -25719,7 +25832,7 @@ var TreeItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					handleToggle: s.handleToggle,
 					toggleClass: slotFns.value.itemToggle(),
 					iconClass: slotFns.value.itemIcon()
-				})], 14, _hoisted_1$16)]),
+				})], 14, _hoisted_1$15)]),
 				_: 3
 			}, 8, [
 				"value",
@@ -25733,7 +25846,7 @@ var TreeItem_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/tree/TreeItemToggle.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$15 = ["data-expanded", "data-no-children"];
+var _hoisted_1$14 = ["data-expanded", "data-no-children"];
 //#endregion
 //#region src/components/tree/TreeItemToggle.vue
 var TreeItemToggle_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -25779,18 +25892,18 @@ var TreeItemToggle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"stroke-linecap": "round",
 				"stroke-linejoin": "round",
 				"aria-hidden": "true"
-			}, [(0, vue.createElementVNode)("path", { d: "m9 18 6-6-6-6" })], -1))])], 10, _hoisted_1$15);
+			}, [(0, vue.createElementVNode)("path", { d: "m9 18 6-6-6-6" })], -1))])], 10, _hoisted_1$14);
 		};
 	}
 });
 //#endregion
 //#region src/components/slider/Slider.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$14 = ["data-orientation", "data-disabled"];
-var _hoisted_2$10 = {
+var _hoisted_1$13 = ["data-orientation", "data-disabled"];
+var _hoisted_2$9 = {
 	key: 0,
 	"data-slot": "label"
 };
-var _hoisted_3$8 = { class: "relative flex items-center gap-2" };
+var _hoisted_3$7 = { class: "relative flex items-center gap-2" };
 //#endregion
 //#region src/components/slider/Slider.vue
 var Slider_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -25914,10 +26027,10 @@ var Slider_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.base(), props.class, props.classNames?.base)),
 				"data-orientation": __props.orientation,
 				"data-disabled": __props.disabled || void 0
-			}, [showLabelWrapper.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [__props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", _hoisted_2$10, (0, vue.toDisplayString)(__props.label), 1)) : (0, vue.createCommentVNode)("", true), !__props.hideValue ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("output", {
+			}, [showLabelWrapper.value ? ((0, vue.openBlock)(), (0, vue.createElementBlock)(vue.Fragment, { key: 0 }, [__props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("label", _hoisted_2$9, (0, vue.toDisplayString)(__props.label), 1)) : (0, vue.createCommentVNode)("", true), !__props.hideValue ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("output", {
 				key: 1,
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.output(), props.classNames?.output))
-			}, (0, vue.toDisplayString)(formatted.value), 3)) : (0, vue.createCommentVNode)("", true)], 64)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", _hoisted_3$8, [
+			}, (0, vue.toDisplayString)(formatted.value), 3)) : (0, vue.createCommentVNode)("", true)], 64)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", _hoisted_3$7, [
 				(0, vue.renderSlot)(_ctx.$slots, "startContent"),
 				(0, vue.createVNode)((0, vue.unref)(reka_ui.SliderRoot), {
 					modelValue: internalValue.value,
@@ -26010,13 +26123,13 @@ var Slider_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"data-orientation"
 				]),
 				(0, vue.renderSlot)(_ctx.$slots, "endContent")
-			])], 10, _hoisted_1$14);
+			])], 10, _hoisted_1$13);
 		};
 	}
 });
 //#endregion
 //#region src/components/progress-bar/ProgressBar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$13 = ["data-disabled"];
+var _hoisted_1$12 = ["data-disabled"];
 //#endregion
 //#region src/components/progress-bar/ProgressBar.vue
 var ProgressBar_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -26138,14 +26251,14 @@ var ProgressBar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"get-value-text",
 				"class",
 				"aria-label"
-			])], 14, _hoisted_1$13);
+			])], 14, _hoisted_1$12);
 		};
 	}
 });
 //#endregion
 //#region src/components/progress-circle/ProgressCircle.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$12 = ["r", "stroke-width"];
-var _hoisted_2$9 = [
+var _hoisted_1$11 = ["r", "stroke-width"];
+var _hoisted_2$8 = [
 	"r",
 	"stroke-width",
 	"stroke-dasharray",
@@ -26245,7 +26358,7 @@ var ProgressCircle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					r: radius.value,
 					"stroke-width": __props.strokeWidth,
 					fill: "none"
-				}, null, 10, _hoisted_1$12), (0, vue.createElementVNode)("circle", {
+				}, null, 10, _hoisted_1$11), (0, vue.createElementVNode)("circle", {
 					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.indicator(), props.classNames?.indicator)),
 					cx: "16",
 					cy: "16",
@@ -26257,7 +26370,7 @@ var ProgressCircle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					"stroke-dashoffset": offset.value,
 					transform: "rotate(-90 16 16)",
 					style: { "transition": "stroke-dashoffset 300ms ease-out" }
-				}, null, 10, _hoisted_2$9)], 2)), __props.showValueLabel || __props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+				}, null, 10, _hoisted_2$8)], 2)), __props.showValueLabel || __props.label ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
 					key: 0,
 					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.value(), props.classNames?.value))
 				}, [(0, vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, vue.createTextVNode)((0, vue.toDisplayString)(formattedValue.value), 1)])], 2)) : (0, vue.createCommentVNode)("", true)]),
@@ -26278,7 +26391,7 @@ var ProgressCircle_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/meter/Meter.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$11 = [
+var _hoisted_1$10 = [
 	"aria-valuenow",
 	"aria-valuemin",
 	"aria-valuemax",
@@ -26348,14 +26461,14 @@ var Meter_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				}, [(0, vue.createElementVNode)("div", {
 					class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.fill(), props.classNames?.fill)),
 					style: (0, vue.normalizeStyle)({ width: percentage.value + "%" })
-				}, null, 6)], 10, _hoisted_1$11)
+				}, null, 6)], 10, _hoisted_1$10)
 			], 2);
 		};
 	}
 });
 //#endregion
 //#region src/components/scroll-shadow/ScrollShadow.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$10 = [
+var _hoisted_1$9 = [
 	"data-orientation",
 	"data-top-scroll",
 	"data-bottom-scroll",
@@ -26407,7 +26520,7 @@ var ScrollShadow_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				"data-left-scroll": leftScroll.value ? "true" : void 0,
 				"data-right-scroll": rightScroll.value ? "true" : void 0,
 				style: (0, vue.normalizeStyle)({ "--scroll-shadow-size": __props.size + "px" })
-			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 14, _hoisted_1$10);
+			}, [(0, vue.renderSlot)(_ctx.$slots, "default")], 14, _hoisted_1$9);
 		};
 	}
 });
@@ -27323,9 +27436,9 @@ var CalendarYearPicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/calendar/Calendar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$9 = ["aria-label"];
-var _hoisted_2$8 = ["aria-label"];
-var _hoisted_3$7 = ["aria-label"];
+var _hoisted_1$8 = ["aria-label"];
+var _hoisted_2$7 = ["aria-label"];
+var _hoisted_3$6 = ["aria-label"];
 //#endregion
 //#region src/components/calendar/Calendar.vue
 var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -27469,7 +27582,7 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.headingButton(), props.classNames?.headingButton)),
 									"aria-label": `Switch to ${nextViewLabel.value} view`,
 									onClick: cycleView
-								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_1$9)]),
+								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_1$8)]),
 								_: 1
 							}, 8, ["class"]),
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.CalendarNext), {
@@ -27624,7 +27737,7 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.headingButton(), props.classNames?.headingButton)),
 									"aria-label": `Switch to ${nextViewLabel.value} view`,
 									onClick: cycleView
-								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_2$8)]),
+								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_2$7)]),
 								_: 1
 							}, 8, ["class"]),
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerNext), {
@@ -27711,7 +27824,7 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.headingButton(), props.classNames?.headingButton)),
 						"aria-label": `Switch to ${nextViewLabel.value} view`,
 						onClick: cycleView
-					}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_3$7)]),
+					}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_3$6)]),
 					_: 1
 				}, 8, [
 					"placeholder",
@@ -27728,9 +27841,9 @@ var Calendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/range-calendar/RangeCalendar.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$8 = ["aria-label"];
-var _hoisted_2$7 = ["aria-label"];
-var _hoisted_3$6 = ["aria-label"];
+var _hoisted_1$7 = ["aria-label"];
+var _hoisted_2$6 = ["aria-label"];
+var _hoisted_3$5 = ["aria-label"];
 //#endregion
 //#region src/components/range-calendar/RangeCalendar.vue
 var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
@@ -27884,7 +27997,7 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.headingButton(), props.classNames?.headingButton)),
 									"aria-label": `Switch to ${nextViewLabel.value} view`,
 									onClick: cycleView
-								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_1$8)]),
+								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_1$7)]),
 								_: 1
 							}, 8, ["class"]),
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.RangeCalendarNext), {
@@ -28033,7 +28146,7 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.headingButton(), props.classNames?.headingButton)),
 									"aria-label": `Switch to ${nextViewLabel.value} view`,
 									onClick: cycleView
-								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_2$7)]),
+								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_2$6)]),
 								_: 1
 							}, 8, ["class"]),
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.MonthPickerNext), {
@@ -28135,7 +28248,7 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 									class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.headingButton(), props.classNames?.headingButton)),
 									"aria-label": `Switch to ${nextViewLabel.value} view`,
 									onClick: cycleView
-								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_3$6)]),
+								}, (0, vue.toDisplayString)(headingValue), 11, _hoisted_3$5)]),
 								_: 1
 							}, 8, ["class"]),
 							(0, vue.createVNode)((0, vue.unref)(reka_ui.YearPickerNext), {
@@ -28202,7 +28315,7 @@ var RangeCalendar_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/date-input/DateInput.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$7 = [
+var _hoisted_1$6 = [
 	"data-invalid",
 	"data-disabled",
 	"data-readonly",
@@ -28210,8 +28323,8 @@ var _hoisted_1$7 = [
 	"data-has-label",
 	"data-has-helper"
 ];
-var _hoisted_2$6 = ["id", "for"];
-var _hoisted_3$5 = {
+var _hoisted_2$5 = ["id", "for"];
+var _hoisted_3$4 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -28429,7 +28542,7 @@ var DateInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				id: labelId.value,
 				for: fieldId.value,
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
-			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$5, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$6)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.DateFieldRoot), {
+			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$4, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$5)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.DateFieldRoot), {
 				id: fieldId.value,
 				ref_key: "fieldRef",
 				ref: fieldRef,
@@ -28540,13 +28653,13 @@ var DateInput_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 1,
 				id: descriptionId.value,
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.description(), props.classNames?.description))
-			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_7$2)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$7);
+			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_7$2)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$6);
 		};
 	}
 });
 //#endregion
 //#region src/components/date-range-field/DateRangeField.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$6 = [
+var _hoisted_1$5 = [
 	"data-invalid",
 	"data-disabled",
 	"data-readonly",
@@ -28554,8 +28667,8 @@ var _hoisted_1$6 = [
 	"data-has-label",
 	"data-has-helper"
 ];
-var _hoisted_2$5 = ["id", "for"];
-var _hoisted_3$4 = {
+var _hoisted_2$4 = ["id", "for"];
+var _hoisted_3$3 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -28768,7 +28881,7 @@ var DateRangeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				id: labelId.value,
 				for: fieldId.value,
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
-			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$4, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$5)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.DateRangeFieldRoot), {
+			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$3, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$4)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.DateRangeFieldRoot), {
 				id: fieldId.value,
 				ref_key: "fieldRef",
 				ref: fieldRef,
@@ -28901,13 +29014,13 @@ var DateRangeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 1,
 				id: descriptionId.value,
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.description(), props.classNames?.description))
-			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_7$1)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$6);
+			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_7$1)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$5);
 		};
 	}
 });
 //#endregion
 //#region src/components/time-field/TimeField.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$5 = [
+var _hoisted_1$4 = [
 	"data-invalid",
 	"data-disabled",
 	"data-readonly",
@@ -28915,8 +29028,8 @@ var _hoisted_1$5 = [
 	"data-has-label",
 	"data-has-helper"
 ];
-var _hoisted_2$4 = ["id", "for"];
-var _hoisted_3$3 = {
+var _hoisted_2$3 = ["id", "for"];
+var _hoisted_3$2 = {
 	key: 0,
 	"aria-hidden": "true"
 };
@@ -29129,7 +29242,7 @@ var TimeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				id: labelId.value,
 				for: fieldId.value,
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.label(), props.classNames?.label))
-			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$3, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$4)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.TimeFieldRoot), {
+			}, [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.label), 1), __props.isRequired ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", _hoisted_3$2, " *")) : (0, vue.createCommentVNode)("", true)], 10, _hoisted_2$3)) : (0, vue.createCommentVNode)("", true), (0, vue.createElementVNode)("div", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.mainWrapper(), props.classNames?.mainWrapper)) }, [(0, vue.createVNode)((0, vue.unref)(reka_ui.TimeFieldRoot), {
 				id: fieldId.value,
 				ref_key: "fieldRef",
 				ref: fieldRef,
@@ -29240,7 +29353,7 @@ var TimeField_default = /* @__PURE__ */ (0, vue.defineComponent)({
 				key: 1,
 				id: descriptionId.value,
 				class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.description(), props.classNames?.description))
-			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_7)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$5);
+			}, (0, vue.toDisplayString)(__props.description), 11, _hoisted_7)) : (0, vue.createCommentVNode)("", true)], 2)) : (0, vue.createCommentVNode)("", true)], 2)], 10, _hoisted_1$4);
 		};
 	}
 });
@@ -30050,12 +30163,13 @@ var DateRangePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 });
 //#endregion
 //#region src/components/date-time-picker/DateTimePickerTimeScroller.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$4 = ["aria-label", "onScrollPassive"];
-var _hoisted_2$3 = [
+var _hoisted_1$3 = ["aria-label", "onScrollPassive"];
+var _hoisted_2$2 = [
 	"data-selected",
 	"aria-selected",
 	"onClick"
 ];
+var REPEAT = 3;
 var ITEM_H = 40;
 //#endregion
 //#region src/components/date-time-picker/DateTimePickerTimeScroller.vue
@@ -30080,51 +30194,62 @@ var DateTimePickerTimeScroller_default = /* @__PURE__ */ (0, vue.defineComponent
 		const columns = (0, vue.computed)(() => {
 			const cols = [{
 				key: "hour",
-				items: hourItems.value
+				items: hourItems.value,
+				loop: true
 			}, {
 				key: "minute",
-				items: minutes
+				items: minutes,
+				loop: true
 			}];
 			if (props.granularity === "second") cols.push({
 				key: "second",
-				items: seconds
+				items: seconds,
+				loop: true
 			});
 			if (props.hourCycle === 12) cols.push({
 				key: "ampm",
-				items: ampm
+				items: ampm,
+				loop: false
 			});
 			return cols;
 		});
-		function currentIndexFor(key) {
-			const v = props.modelValue;
-			if (key === "hour") {
-				if (props.hourCycle === 12) {
-					const h12 = v.hour % 12 === 0 ? 12 : v.hour % 12;
-					return hours12.indexOf(h12);
-				}
-				return v.hour;
-			}
-			if (key === "minute") return v.minute;
-			if (key === "second") return v.second ?? 0;
-			if (key === "ampm") return v.hour >= 12 ? 1 : 0;
-			return 0;
-		}
 		const columnRefs = (0, vue.ref)([]);
-		function scrollColumnToIndex(colEl, index) {
-			colEl.scrollTop = index * ITEM_H;
+		function renderItems(col) {
+			if (!col.loop) return col.items;
+			const out = [];
+			for (let r = 0; r < REPEAT; r++) out.push(...col.items);
+			return out;
+		}
+		function cycleHeight(col) {
+			return col.items.length * ITEM_H;
+		}
+		function onColumnScroll(i, colEl) {
+			const col = columns.value[i];
+			if (!col.loop) return;
+			const cycle = cycleHeight(col);
+			const total = cycle * REPEAT;
+			const recenter = (REPEAT - 2) * cycle;
+			if (colEl.scrollTop < cycle) colEl.scrollTop += recenter;
+			else if (colEl.scrollTop >= total - cycle) colEl.scrollTop -= recenter;
 		}
-		function syncScrollPositions() {
+		(0, vue.onMounted)(() => {
 			columns.value.forEach((col, i) => {
 				const el = columnRefs.value[i];
-				if (el) scrollColumnToIndex(el, currentIndexFor(col.key));
+				if (el && col.loop) el.scrollTop = cycleHeight(col) * Math.floor(REPEAT / 2);
 			});
+		});
+		function isSelected(key, item) {
+			const v = props.modelValue;
+			if (key === "hour") {
+				if (props.hourCycle === 12) return item === (v.hour % 12 === 0 ? 12 : v.hour % 12);
+				return item === v.hour;
+			}
+			if (key === "minute") return item === v.minute;
+			if (key === "second") return item === (v.second ?? 0);
+			if (key === "ampm") return item === (v.hour >= 12 ? "PM" : "AM");
+			return false;
 		}
-		(0, vue.onMounted)(() => (0, vue.nextTick)(syncScrollPositions));
-		(0, vue.watch)(() => props.modelValue, () => (0, vue.nextTick)(syncScrollPositions));
-		function onColumnScroll(key, colEl) {
-			const idx = Math.round(colEl.scrollTop / ITEM_H);
-			const item = columns.value.find((c) => c.key === key).items[idx];
-			if (item === void 0) return;
+		function onItemClick(key, item) {
 			const v = props.modelValue;
 			if (key === "hour") {
 				let newHour;
@@ -30141,35 +30266,19 @@ var DateTimePickerTimeScroller_default = /* @__PURE__ */ (0, vue.defineComponent
 				if (isPm !== v.hour >= 12) emit("update:modelValue", v.set({ hour: isPm ? v.hour + 12 : v.hour - 12 }));
 			}
 		}
-		function onKeyDown(e, colEl) {
-			if (e.key === "ArrowDown") {
-				e.preventDefault();
-				colEl.scrollTop += ITEM_H;
-			} else if (e.key === "ArrowUp") {
-				e.preventDefault();
-				colEl.scrollTop -= ITEM_H;
-			}
-		}
-		function onItemClick(colEl, idx) {
-			colEl.scrollTo({
-				top: idx * ITEM_H,
-				behavior: "smooth"
-			});
-		}
 		function columnLabel(key) {
 			if (key === "hour") return "Hour";
 			if (key === "minute") return "Minute";
 			if (key === "second") return "Second";
 			return "AM/PM";
 		}
-		function itemLabel(_key, item) {
+		function itemLabel(item) {
 			if (typeof item === "string") return item;
 			return String(item).padStart(2, "0");
 		}
 		__expose({
 			columnRefs,
-			columns,
-			currentIndexFor
+			columns
 		});
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
@@ -30187,39 +30296,22 @@ var DateTimePickerTimeScroller_default = /* @__PURE__ */ (0, vue.defineComponent
 					"data-slot": "scroller-column",
 					role: "listbox",
 					tabindex: "0",
-					onScrollPassive: ($event) => onColumnScroll(col.key, $event.currentTarget),
-					onKeydown: _cache[0] || (_cache[0] = ($event) => onKeyDown($event, $event.currentTarget))
-				}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(col.items, (item, idx) => {
+					onScrollPassive: ($event) => onColumnScroll(i, $event.currentTarget)
+				}, [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(renderItems(col), (item, idx) => {
 					return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 						key: idx,
 						class: "date-time-picker__scroller-item",
-						"data-selected": idx === currentIndexFor(col.key) ? "true" : void 0,
-						"aria-selected": idx === currentIndexFor(col.key),
+						"data-selected": isSelected(col.key, item) ? "true" : void 0,
+						"aria-selected": isSelected(col.key, item),
 						role: "option",
-						onClick: ($event) => onItemClick(columnRefs.value[i], idx)
-					}, (0, vue.toDisplayString)(itemLabel(col.key, item)), 9, _hoisted_2$3);
-				}), 128))], 40, _hoisted_1$4);
+						onClick: ($event) => onItemClick(col.key, item)
+					}, (0, vue.toDisplayString)(itemLabel(item)), 9, _hoisted_2$2);
+				}), 128))], 40, _hoisted_1$3);
 			}), 128))], 2);
 		};
 	}
 });
 //#endregion
-//#region src/components/date-time-picker/DateTimePicker.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$3 = ["data-hidden"];
-var _hoisted_2$2 = ["aria-label"];
-var _hoisted_3$2 = {
-	key: 1,
-	width: "14",
-	height: "14",
-	viewBox: "0 0 24 24",
-	fill: "none",
-	stroke: "currentColor",
-	"stroke-width": "2.5",
-	"stroke-linecap": "round",
-	"stroke-linejoin": "round",
-	"aria-hidden": "true"
-};
-//#endregion
 //#region src/components/date-time-picker/DateTimePicker.vue
 var DateTimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 	inheritAttrs: false,
@@ -30275,6 +30367,7 @@ var DateTimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Boolean,
 			default: true
 		},
+		doneLabel: { default: "Done" },
 		locale: {},
 		defaultValue: {},
 		defaultPlaceholder: {},
@@ -30342,11 +30435,6 @@ var DateTimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		const emit = __emit;
 		const modelValue = (0, vue.useModel)(__props, "modelValue");
 		const openModel = (0, vue.useModel)(__props, "open");
-		const STEP_TITLES = {
-			date: "Pick a date",
-			time: "Pick a time"
-		};
-		const STEP_ORDER = ["date", "time"];
 		if (props.defaultOpen && openModel.value === void 0) openModel.value = true;
 		if (modelValue.value == null && props.defaultValue != null) modelValue.value = props.defaultValue;
 		const _today = $ad063034c8620db8$export$d0bdf45af03a6ea3($ad063034c8620db8$export$aa8b41735afcabd2());
@@ -30359,37 +30447,6 @@ var DateTimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 			internalValue.value = v;
 			modelValue.value = v;
 		}
-		const activeStep = (0, vue.ref)("date");
-		const direction = (0, vue.ref)(1);
-		(0, vue.watch)(openModel, (open) => {
-			if (open) activeStep.value = "date";
-		});
-		function goTo(step) {
-			const from = STEP_ORDER.indexOf(activeStep.value);
-			direction.value = STEP_ORDER.indexOf(step) > from ? 1 : -1;
-			activeStep.value = step;
-		}
-		function goBack() {
-			const idx = STEP_ORDER.indexOf(activeStep.value);
-			if (idx > 0) goTo(STEP_ORDER[idx - 1]);
-		}
-		function goForward() {
-			const idx = STEP_ORDER.indexOf(activeStep.value);
-			if (idx < STEP_ORDER.length - 1) goTo(STEP_ORDER[idx + 1]);
-			else if (props.closeOnSelect) openModel.value = false;
-		}
-		const panelInitial = (0, vue.computed)(() => ({
-			x: direction.value > 0 ? "100%" : "-100%",
-			opacity: 0
-		}));
-		const panelAnimate = {
-			x: "0%",
-			opacity: 1
-		};
-		const panelExit = (0, vue.computed)(() => ({
-			x: direction.value > 0 ? "-100%" : "100%",
-			opacity: 0
-		}));
 		const calendarValue = (0, vue.computed)({
 			get: () => $d07e34cce18680fd$export$93522d1a439f3617(internalValue.value),
 			set: (val) => {
@@ -30400,7 +30457,6 @@ var DateTimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					day: val.day
 				});
 				modelValue.value = internalValue.value;
-				goTo("time");
 			}
 		});
 		function onTimeUpdate(val) {
@@ -30415,9 +30471,9 @@ var DateTimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 		return (_ctx, _cache) => {
 			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.DatePickerRoot), {
 				modelValue: modelValue.value,
-				"onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => modelValue.value = $event),
+				"onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => modelValue.value = $event),
 				open: openModel.value,
-				"onUpdate:open": _cache[9] || (_cache[9] = ($event) => openModel.value = $event),
+				"onUpdate:open": _cache[10] || (_cache[10] = ($event) => openModel.value = $event),
 				"default-value": __props.defaultValue,
 				"default-open": __props.defaultOpen,
 				"default-placeholder": __props.defaultPlaceholder,
@@ -30488,7 +30544,7 @@ var DateTimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 							"stroke-linejoin": "round",
 							"aria-hidden": "true",
 							focusable: "false"
-						}, [..._cache[10] || (_cache[10] = [
+						}, [..._cache[11] || (_cache[11] = [
 							(0, vue.createElementVNode)("rect", {
 								x: "3",
 								y: "4",
@@ -30569,104 +30625,75 @@ var DateTimePicker_default = /* @__PURE__ */ (0, vue.defineComponent)({
 					as: __props.contentAs,
 					"as-child": __props.contentAsChild,
 					"disable-outside-pointer-events": __props.disableOutsidePointerEvents,
-					onEscapeKeyDown: _cache[2] || (_cache[2] = ($event) => emit("escape-key-down", $event)),
-					onPointerDownOutside: _cache[3] || (_cache[3] = ($event) => emit("pointer-down-outside", $event)),
-					onFocusOutside: _cache[4] || (_cache[4] = ($event) => emit("focus-outside", $event)),
-					onInteractOutside: _cache[5] || (_cache[5] = ($event) => emit("interact-outside", $event)),
-					onOpenAutoFocus: _cache[6] || (_cache[6] = ($event) => emit("open-auto-focus", $event)),
-					onCloseAutoFocus: _cache[7] || (_cache[7] = ($event) => emit("close-auto-focus", $event))
+					onEscapeKeyDown: _cache[3] || (_cache[3] = ($event) => emit("escape-key-down", $event)),
+					onPointerDownOutside: _cache[4] || (_cache[4] = ($event) => emit("pointer-down-outside", $event)),
+					onFocusOutside: _cache[5] || (_cache[5] = ($event) => emit("focus-outside", $event)),
+					onInteractOutside: _cache[6] || (_cache[6] = ($event) => emit("interact-outside", $event)),
+					onOpenAutoFocus: _cache[7] || (_cache[7] = ($event) => emit("open-auto-focus", $event)),
+					onCloseAutoFocus: _cache[8] || (_cache[8] = ($event) => emit("close-auto-focus", $event))
 				}, {
 					default: (0, vue.withCtx)(() => [(0, vue.createElementVNode)("div", {
-						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.stepHeader(), props.classNames?.stepHeader)),
-						"data-slot": "step-header"
+						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.panel(), props.classNames?.panel)),
+						"data-slot": "panel"
 					}, [
-						(0, vue.createElementVNode)("button", {
-							type: "button",
-							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
-							"data-hidden": activeStep.value === "date" ? "true" : void 0,
-							"aria-label": "Previous step",
-							"data-slot": "back-button",
-							onClick: goBack
-						}, [..._cache[11] || (_cache[11] = [(0, vue.createElementVNode)("svg", {
-							width: "14",
-							height: "14",
-							viewBox: "0 0 24 24",
-							fill: "none",
-							stroke: "currentColor",
-							"stroke-width": "2.5",
-							"stroke-linecap": "round",
-							"stroke-linejoin": "round",
+						(0, vue.createElementVNode)("div", {
+							class: (0, vue.normalizeClass)(slotFns.value.calendarPane()),
+							"data-slot": "calendar-pane"
+						}, [(0, vue.createVNode)(Calendar_default, {
+							modelValue: calendarValue.value,
+							"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => calendarValue.value = $event),
+							"default-value": __props.defaultValue,
+							"min-value": __props.minValue,
+							"max-value": __props.maxValue,
+							"is-date-disabled": __props.isDateDisabled,
+							"is-date-unavailable": __props.isDateUnavailable,
+							locale: __props.locale,
+							readonly: __props.isReadOnly,
+							disabled: __props.isDisabled
+						}, null, 8, [
+							"modelValue",
+							"default-value",
+							"min-value",
+							"max-value",
+							"is-date-disabled",
+							"is-date-unavailable",
+							"locale",
+							"readonly",
+							"disabled"
+						])], 2),
+						(0, vue.createElementVNode)("div", {
+							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.divider(), props.classNames?.divider)),
+							"data-slot": "divider",
 							"aria-hidden": "true"
-						}, [(0, vue.createElementVNode)("polyline", { points: "15 18 9 12 15 6" })], -1)])], 10, _hoisted_1$3),
-						(0, vue.createElementVNode)("span", { class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.stepTitle(), props.classNames?.stepTitle)) }, (0, vue.toDisplayString)(STEP_TITLES[activeStep.value]), 3),
-						(0, vue.createElementVNode)("button", {
-							type: "button",
-							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.navButton(), props.classNames?.navButton)),
-							"aria-label": activeStep.value === "time" ? "Done" : "Next step",
-							"data-slot": "forward-button",
-							onClick: goForward
-						}, [activeStep.value === "time" ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
-							key: 0,
-							class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.doneLabel(), props.classNames?.doneLabel))
-						}, "Done", 2)) : ((0, vue.openBlock)(), (0, vue.createElementBlock)("svg", _hoisted_3$2, [..._cache[12] || (_cache[12] = [(0, vue.createElementVNode)("polyline", { points: "9 18 15 12 9 6" }, null, -1)])]))], 10, _hoisted_2$2)
-					], 2), (0, vue.createElementVNode)("div", {
-						class: (0, vue.normalizeClass)((0, vue.unref)(composeClassName)(slotFns.value.panelWrap(), props.classNames?.panelWrap)),
-						style: { "overflow": "hidden" }
-					}, [(0, vue.createVNode)((0, vue.unref)(AnimatePresence_default), { mode: "popLayout" }, {
-						default: (0, vue.withCtx)(() => [activeStep.value === "date" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(motion).div, {
-							key: "date",
-							initial: panelInitial.value,
-							animate: panelAnimate,
-							exit: panelExit.value,
-							transition: { duration: .15 },
-							class: "px-3 pb-3",
-							"data-slot": "calendar-panel"
+						}, null, 2),
+						(0, vue.createElementVNode)("div", {
+							class: (0, vue.normalizeClass)(slotFns.value.timePane()),
+							"data-slot": "time-pane"
+						}, [(0, vue.createVNode)(DateTimePickerTimeScroller_default, {
+							"model-value": internalValue.value,
+							granularity: __props.granularity,
+							"hour-cycle": __props.hourCycle,
+							"onUpdate:modelValue": onTimeUpdate
+						}, null, 8, [
+							"model-value",
+							"granularity",
+							"hour-cycle"
+						]), (0, vue.createElementVNode)("div", {
+							class: (0, vue.normalizeClass)(slotFns.value.timeDone()),
+							"data-slot": "time-done"
+						}, [(0, vue.renderSlot)(_ctx.$slots, "footer", { close: () => {
+							openModel.value = false;
+						} }, () => [(0, vue.createVNode)(Button_default, {
+							size: "sm",
+							color: "primary",
+							"data-slot": "done-button",
+							onClick: _cache[2] || (_cache[2] = ($event) => openModel.value = false)
 						}, {
-							default: (0, vue.withCtx)(() => [(0, vue.createVNode)(Calendar_default, {
-								modelValue: calendarValue.value,
-								"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => calendarValue.value = $event),
-								"default-value": __props.defaultValue,
-								"min-value": __props.minValue,
-								"max-value": __props.maxValue,
-								"is-date-disabled": __props.isDateDisabled,
-								"is-date-unavailable": __props.isDateUnavailable,
-								locale: __props.locale,
-								readonly: __props.isReadOnly,
-								disabled: __props.isDisabled
-							}, null, 8, [
-								"modelValue",
-								"default-value",
-								"min-value",
-								"max-value",
-								"is-date-disabled",
-								"is-date-unavailable",
-								"locale",
-								"readonly",
-								"disabled"
-							])]),
+							default: (0, vue.withCtx)(() => [(0, vue.createTextVNode)((0, vue.toDisplayString)(__props.doneLabel), 1)]),
 							_: 1
-						}, 8, ["initial", "exit"])) : activeStep.value === "time" ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(motion).div, {
-							key: "time",
-							initial: panelInitial.value,
-							animate: panelAnimate,
-							exit: panelExit.value,
-							transition: { duration: .15 }
-						}, {
-							default: (0, vue.withCtx)(() => [(0, vue.createVNode)(DateTimePickerTimeScroller_default, {
-								"model-value": internalValue.value,
-								granularity: __props.granularity,
-								"hour-cycle": __props.hourCycle,
-								"onUpdate:modelValue": onTimeUpdate
-							}, null, 8, [
-								"model-value",
-								"granularity",
-								"hour-cycle"
-							])]),
-							_: 1
-						}, 8, ["initial", "exit"])) : (0, vue.createCommentVNode)("", true)]),
-						_: 1
-					})], 2)]),
-					_: 1
+						})])], 2)], 2)
+					], 2)]),
+					_: 3
 				}, 8, [
 					"class",
 					"side-offset",