ropav 0.12.2 → 0.12.3

package/dist/components/color-area/color-area-root.js

@@ -3,10 +3,11 @@ import { useColorArea } from "../../composables/use-color-area.js";
 import { useColorAreaState } from "../../composables/use-color-area-state.js";
 import { useColorValueContext } from "../color-picker/color-picker.context.js";
 import { provideColorAreaContext } from "./color-area.context.js";
-import { computed, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, shallowRef, template, unref } from "vue";
+import { computed, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, shallowRef, template, unref } from "vue";
 import { colorAreaVariants } from "@ropav/styles";
 //#region src/components/color-area/color-area-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div>", 1);
+var k0 = ["data-disabled"];
 var color_area_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "color-area-root",
 	props: {
@@ -111,15 +112,15 @@ var color_area_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 				class: styles.value.base({ class: props.class }),
 				"data-disabled": unref(dataAttr)(_area.isDisabled.value),
 				"data-slot": "color-area",
-				style: style.value
-			}]);
+				style: style.value,
+				onPointerdown: (e) => _area.areaHandlers.onPointerdown(e)
+			}], k0);
 		});
 		setInsertionState(n1);
 		createSlot("default", {
 			color: () => unref(state).value.value,
 			isDisabled: () => unref(area).isDisabled.value
 		});
-		on(n1, "pointerdown", (e) => unref(area).areaHandlers.onPointerdown(e));
 		setTemplateRefBinding(n1, () => setContainerEl);
 		return n1;
 	}

package/dist/components/color-area/color-area-thumb.js

@@ -2,9 +2,16 @@ import { dataAttr } from "../../utils/assertion.js";
 import { composeSlotClassName } from "../../utils/compose.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { useColorAreaContext } from "./color-area.context.js";
-import { child, computed, createSlot, createTemplateRefSetter, defineVaporComponent, next, on, renderEffect, setDynamicProps, setInsertionState, template, unref } from "vue";
+import { child, computed, createSlot, createTemplateRefSetter, defineVaporComponent, next, renderEffect, setDynamicProps, setInsertionState, template, unref } from "vue";
 //#region src/components/color-area/color-area-thumb.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div><input><input>", 1);
+var k0 = [
+	"data-disabled",
+	"data-dragging",
+	"data-focus-visible",
+	"data-focused",
+	"data-hovered"
+];
 var color_area_thumb_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "color-area-thumb",
 	props: { class: {} },
@@ -30,14 +37,14 @@ var color_area_thumb_vue_vue_type_script_setup_true_vapor_true_lang_default = /*
 		const n3 = t0();
 		const n0 = child(n3);
 		const n1 = next(n0);
-		on(n0, "change", (e) => unref(area).xInputHandlers.onChange(e));
-		on(n0, "focus", () => (unref(onFocus)(), unref(area).xInputHandlers.onFocus()));
-		on(n1, "change", (e) => unref(area).yInputHandlers.onChange(e));
-		on(n1, "focus", () => (unref(onFocus)(), unref(area).yInputHandlers.onFocus()));
 		renderEffect(() => {
 			const _area = unref(area);
 			const _dataAttr = unref(dataAttr);
+			const _onFocus = unref(onFocus);
+			const _area_thumbHandlers = _area.thumbHandlers;
 			const _area_inputStyle = _area.inputStyle;
+			const _area_xInputHandlers = _area.xInputHandlers;
+			const _area_yInputHandlers = _area.yInputHandlers;
 			setDynamicProps(n3, [_area.thumbAttrs, {
 				class: unref(composeSlotClassName)(unref(slots).thumb, props.class),
 				"data-disabled": _dataAttr(_area.isDisabled.value),
@@ -46,11 +53,24 @@ var color_area_thumb_vue_vue_type_script_setup_true_vapor_true_lang_default = /*
 				"data-focused": _dataAttr(unref(isFocused)),
 				"data-hovered": _dataAttr(unref(isHovered)),
 				"data-slot": "color-area-thumb",
-				style: style.value
+				style: style.value,
+				onFocusout: onInputBlur,
+				onKeydown: (e) => _area_thumbHandlers.onKeydown(e),
+				onPointerdown: (e) => _area_thumbHandlers.onPointerdown(e),
+				onPointerenter: (e) => unref(onPointerenter)(e),
+				onPointerleave: (e) => unref(onPointerleave)(e)
+			}], k0);
+			setDynamicProps(n0, [_area.xInputProps.value, {
+				style: _area_inputStyle,
+				onChange: (e) => _area_xInputHandlers.onChange(e),
+				onFocus: () => (_onFocus(), _area_xInputHandlers.onFocus())
 			}]);
-			setDynamicProps(n0, [_area.xInputProps.value, { style: _area_inputStyle }]);
 			_setTemplateRef(n0, setInputXEl, null, "setInputXEl");
-			setDynamicProps(n1, [_area.yInputProps.value, { style: _area_inputStyle }]);
+			setDynamicProps(n1, [_area.yInputProps.value, {
+				style: _area_inputStyle,
+				onChange: (e) => _area_yInputHandlers.onChange(e),
+				onFocus: () => (_onFocus(), _area_yInputHandlers.onFocus())
+			}]);
 			_setTemplateRef(n1, setInputYEl, null, "setInputYEl");
 		});
 		setInsertionState(n3, 2);
@@ -62,11 +82,6 @@ var color_area_thumb_vue_vue_type_script_setup_true_vapor_true_lang_default = /*
 			isFocused: () => unref(isFocused),
 			isHovered: () => unref(isHovered)
 		});
-		on(n3, "focusout", onInputBlur);
-		on(n3, "keydown", (e) => unref(area).thumbHandlers.onKeydown(e));
-		on(n3, "pointerdown", (e) => unref(area).thumbHandlers.onPointerdown(e));
-		on(n3, "pointerenter", (e) => unref(onPointerenter)(e));
-		on(n3, "pointerleave", (e) => unref(onPointerleave)(e));
 		return n3;
 	}
 });

package/dist/components/color-input-group/color-input-group-input.js

@@ -1,9 +1,16 @@
 import { dataAttr } from "../../utils/assertion.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { useColorInputGroupControlContext } from "./color-input-group.context.js";
-import { computed, createTemplateRefSetter, defineVaporComponent, on, renderEffect, setDynamicProps, shallowRef, template, unref } from "vue";
+import { computed, createTemplateRefSetter, defineVaporComponent, renderEffect, setDynamicProps, shallowRef, template, unref } from "vue";
 //#region src/components/color-input-group/color-input-group-input.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<input>", 1);
+var k0 = [
+	"data-disabled",
+	"data-focus-visible",
+	"data-focused",
+	"data-hovered",
+	"data-invalid"
+];
 var color_input_group_input_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "color-input-group-input",
 	props: {
@@ -37,28 +44,33 @@ var color_input_group_input_vue_vue_type_script_setup_true_vapor_true_lang_defau
 		};
 		const _setTemplateRef = createTemplateRefSetter();
 		const n0 = t0();
-		on(n0, "blur", onBlur);
-		on(n0, "focus", onFocus);
-		on(n0, "input", (e) => unref(control)?.handlers.onInput(e));
-		on(n0, "keydown", (e) => unref(control)?.handlers.onKeydown(e));
-		on(n0, "keyup", (e) => unref(control)?.handlers.onKeyup(e));
-		on(n0, "paste", onPaste);
-		on(n0, "pointerdown", (e) => unref(interaction).onPointerdown(e));
-		on(n0, "pointerenter", (e) => unref(interaction).onPointerenter(e));
-		on(n0, "pointerleave", (e) => unref(interaction).onPointerleave(e));
 		renderEffect(() => {
 			const _dataAttr = unref(dataAttr);
 			const _control = unref(control);
 			const _interaction = unref(interaction);
-			setDynamicProps(n0, [{
-				class: ["rp-color-input-group__input", props.class],
-				"data-disabled": _dataAttr(_control?.isDisabled.value),
-				"data-focus-visible": _dataAttr(_interaction.isFocusVisible.value),
-				"data-focused": _dataAttr(_interaction.isFocused.value),
-				"data-hovered": _dataAttr(_interaction.isHovered.value),
-				"data-invalid": _dataAttr(_control?.isInvalid.value),
-				"data-slot": "color-input-group-input"
-			}, attrs.value]);
+			setDynamicProps(n0, [
+				{
+					class: ["rp-color-input-group__input", props.class],
+					"data-disabled": _dataAttr(_control?.isDisabled.value),
+					"data-focus-visible": _dataAttr(_interaction.isFocusVisible.value),
+					"data-focused": _dataAttr(_interaction.isFocused.value),
+					"data-hovered": _dataAttr(_interaction.isHovered.value),
+					"data-invalid": _dataAttr(_control?.isInvalid.value),
+					"data-slot": "color-input-group-input"
+				},
+				attrs.value,
+				{
+					onBlur,
+					onFocus,
+					onInput: (e) => _control?.handlers.onInput(e),
+					onKeydown: (e) => _control?.handlers.onKeydown(e),
+					onKeyup: (e) => _control?.handlers.onKeyup(e),
+					onPaste,
+					onPointerdown: (e) => _interaction.onPointerdown(e),
+					onPointerenter: (e) => _interaction.onPointerenter(e),
+					onPointerleave: (e) => _interaction.onPointerleave(e)
+				}
+			], k0);
 			_setTemplateRef(n0, setElement);
 		});
 		return n0;

package/dist/components/color-picker/color-picker-trigger.js

@@ -1,9 +1,14 @@
 import { dataAttr } from "../../utils/assertion.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { composePressResponder, usePressResponder } from "../../composables/press-responder.js";
-import { createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref } from "vue";
+import { createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref } from "vue";
 //#region src/components/color-picker/color-picker-trigger.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<button>", 1);
+var k0 = [
+	"data-focus-visible",
+	"data-pressed",
+	"type"
+];
 var color_picker_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "color-picker-trigger",
 	props: {
@@ -30,27 +35,33 @@ var color_picker_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default
 			const _props = props;
 			const _dataAttr = unref(dataAttr);
 			const _responder = unref(responder);
-			setDynamicProps(n1, [{
-				class: ["rp-color-picker__trigger", _props.class],
-				"data-focus-visible": _dataAttr(unref(isFocusVisible)),
-				"data-pressed": _dataAttr(_responder?.isPressed.value),
-				"data-slot": "color-picker-trigger",
-				tabindex: "0",
-				type: _props.type
-			}, _responder?.attrs.value]);
+			const _press = unref(press);
+			setDynamicProps(n1, [
+				{
+					class: ["rp-color-picker__trigger", _props.class],
+					"data-focus-visible": _dataAttr(unref(isFocusVisible)),
+					"data-pressed": _dataAttr(_responder?.isPressed.value),
+					"data-slot": "color-picker-trigger",
+					tabindex: "0",
+					type: _props.type
+				},
+				_responder?.attrs.value,
+				{
+					onBlur: (e) => unref(onBlur)(e),
+					onClick: (e) => _press.onClick(e),
+					onDragstart: (e) => _press.onDragstart(e),
+					onFocus: (e) => unref(onFocus)(e),
+					onKeydown: (e) => _press.onKeydown(e),
+					onMousedown: (e) => _press.onMousedown(e),
+					onPointerdown: (e) => _press.onPointerdown(e),
+					onPointerenter: (e) => _press.onPointerenter(e),
+					onPointerleave: (e) => _press.onPointerleave(e),
+					onPointerup: (e) => _press.onPointerup(e)
+				}
+			], k0);
 		});
 		setInsertionState(n1);
 		createSlot();
-		on(n1, "blur", (e) => unref(onBlur)(e));
-		on(n1, "click", (e) => unref(press).onClick(e));
-		on(n1, "dragstart", (e) => unref(press).onDragstart(e));
-		on(n1, "focus", (e) => unref(onFocus)(e));
-		on(n1, "keydown", (e) => unref(press).onKeydown(e));
-		on(n1, "mousedown", (e) => unref(press).onMousedown(e));
-		on(n1, "pointerdown", (e) => unref(press).onPointerdown(e));
-		on(n1, "pointerenter", (e) => unref(press).onPointerenter(e));
-		on(n1, "pointerleave", (e) => unref(press).onPointerleave(e));
-		on(n1, "pointerup", (e) => unref(press).onPointerup(e));
 		setTemplateRefBinding(n1, () => setElement);
 		return n1;
 	}

package/dist/components/color-slider/color-slider-output.js

@@ -5,6 +5,7 @@ import { computed, createSlot, defineVaporComponent, renderEffect, setDynamicPro
 //#region src/components/color-slider/color-slider-output.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template(" ");
 var t1 = template("<output>", 1);
+var k0 = ["data-disabled", "data-orientation"];
 var color_slider_output_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "color-slider-output",
 	props: { class: {} },
@@ -20,7 +21,7 @@ var color_slider_output_vue_vue_type_script_setup_true_vapor_true_lang_default =
 				"data-disabled": unref(dataAttr)(_state.isDisabled.value),
 				"data-orientation": _state.orientation.value,
 				"data-slot": "color-slider-output"
-			}]);
+			}], k0);
 		});
 		setInsertionState(n3);
 		createSlot("default", null, () => {

package/dist/components/color-slider/color-slider-thumb.js

@@ -31,9 +31,6 @@ var color_slider_thumb_vue_vue_type_script_setup_true_vapor_true_lang_default =
 		const _setTemplateRef = createTemplateRefSetter();
 		const n2 = t0();
 		const n0 = child(n2);
-		on(n0, "blur", onInputBlur);
-		on(n0, "change", (e) => unref(slider).inputHandlers.onChange(e));
-		on(n0, "focus", onInputFocus);
 		renderEffect(() => {
 			const _dataAttr = unref(dataAttr);
 			const _slider = unref(slider);
@@ -44,7 +41,12 @@ var color_slider_thumb_vue_vue_type_script_setup_true_vapor_true_lang_default =
 			setAttr(n2, "data-focused", _dataAttr(unref(isFocused)));
 			setAttr(n2, "data-hovered", _dataAttr(unref(isHovered)));
 			setStyle(n2, style.value);
-			setDynamicProps(n0, [_slider.inputProps.value, { style: _slider.inputStyle }]);
+			setDynamicProps(n0, [_slider.inputProps.value, {
+				style: _slider.inputStyle,
+				onBlur: onInputBlur,
+				onChange: (e) => _slider.inputHandlers.onChange(e),
+				onFocus: onInputFocus
+			}]);
 			_setTemplateRef(n0, setInputEl, null, "setInputEl");
 		});
 		setInsertionState(n2, 1);

package/dist/components/color-slider/color-slider-track.js

@@ -1,9 +1,10 @@
 import { dataAttr } from "../../utils/assertion.js";
 import { composeSlotClassName } from "../../utils/compose.js";
 import { useColorSliderContext } from "./color-slider.context.js";
-import { computed, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref } from "vue";
+import { computed, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref } from "vue";
 //#region src/components/color-slider/color-slider-track.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div>", 1);
+var k0 = ["data-disabled", "data-orientation"];
 var color_slider_track_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "color-slider-track",
 	props: { class: {} },
@@ -36,14 +37,16 @@ var color_slider_track_vue_vue_type_script_setup_true_vapor_true_lang_default =
 		}));
 		const n1 = t0();
 		renderEffect(() => {
+			const _slider = unref(slider);
 			const _state = unref(state);
-			setDynamicProps(n1, [unref(slider).trackAttrs.value, {
+			setDynamicProps(n1, [_slider.trackAttrs.value, {
 				class: unref(composeSlotClassName)(unref(slots).track, props.class),
 				"data-disabled": unref(dataAttr)(_state.isDisabled.value),
 				"data-orientation": _state.orientation.value,
 				"data-slot": "color-slider-track",
-				style: style.value
-			}]);
+				style: style.value,
+				onPointerdown: (e) => _slider.trackHandlers.onPointerdown(e)
+			}], k0);
 		});
 		setInsertionState(n1);
 		createSlot("default", {
@@ -51,7 +54,6 @@ var color_slider_track_vue_vue_type_script_setup_true_vapor_true_lang_default =
 			isDisabled: () => unref(state).isDisabled.value,
 			orientation: () => unref(state).orientation.value
 		});
-		on(n1, "pointerdown", (e) => unref(slider).trackHandlers.onPointerdown(e));
 		setTemplateRefBinding(n1, () => setTrackEl, void 0, "setTrackEl");
 		return n1;
 	}

package/dist/components/combo-box/combo-box-trigger.js

@@ -3,9 +3,16 @@ import icon_chevron_down_default from "../icons/icon-chevron-down.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { composePressResponder, usePressResponder } from "../../composables/press-responder.js";
 import { useComboBoxContext } from "./combo-box.context.js";
-import { computed, createComponent, createIf, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref, useSlots } from "vue";
+import { computed, createComponent, createIf, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref, useSlots } from "vue";
 //#region src/components/combo-box/combo-box-trigger.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<button>", 1);
+var k0 = [
+	"data-focus-visible",
+	"data-focused",
+	"data-hovered",
+	"data-open",
+	"data-pressed"
+];
 var combo_box_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "combo-box-trigger",
 	props: { class: {} },
@@ -32,15 +39,31 @@ var combo_box_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /
 		const n5 = t0();
 		renderEffect(() => {
 			const _dataAttr = unref(dataAttr);
-			setDynamicProps(n5, [{
-				class: styles.value,
-				"data-focus-visible": _dataAttr(unref(isFocusVisible)),
-				"data-focused": _dataAttr(unref(isFocused)),
-				"data-hovered": _dataAttr(unref(isHovered)),
-				"data-open": _dataAttr(unref(state).isOpen.value),
-				"data-pressed": _dataAttr(unref(responder)?.isPressed.value),
-				"data-slot": "combo-box-trigger"
-			}, unref(comboBox).triggerAttributes.value]);
+			const _press = unref(press);
+			setDynamicProps(n5, [
+				{
+					class: styles.value,
+					"data-focus-visible": _dataAttr(unref(isFocusVisible)),
+					"data-focused": _dataAttr(unref(isFocused)),
+					"data-hovered": _dataAttr(unref(isHovered)),
+					"data-open": _dataAttr(unref(state).isOpen.value),
+					"data-pressed": _dataAttr(unref(responder)?.isPressed.value),
+					"data-slot": "combo-box-trigger"
+				},
+				unref(comboBox).triggerAttributes.value,
+				{
+					onBlur: (e) => unref(onBlur)(e),
+					onClick: (e) => _press.onClick(e),
+					onDragstart: (e) => _press.onDragstart(e),
+					onFocus: (e) => unref(onFocus)(e),
+					onKeydown: (e) => _press.onKeydown(e),
+					onMousedown: (e) => _press.onMousedown(e),
+					onPointerdown: (e) => _press.onPointerdown(e),
+					onPointerenter: (e) => unref(onPointerenter)(e),
+					onPointerleave: (e) => unref(onPointerleave)(e),
+					onPointerup: (e) => _press.onPointerup(e)
+				}
+			], k0);
 		});
 		setInsertionState(n5);
 		createIf(() => hasSlot.value, () => {
@@ -48,16 +71,6 @@ var combo_box_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /
 		}, () => {
 			return createComponent(unref(icon_chevron_down_default), { "data-slot": "combo-box-trigger-default-icon" });
 		}, 261);
-		on(n5, "blur", (e) => unref(onBlur)(e));
-		on(n5, "click", (e) => unref(press).onClick(e));
-		on(n5, "dragstart", (e) => unref(press).onDragstart(e));
-		on(n5, "focus", (e) => unref(onFocus)(e));
-		on(n5, "keydown", (e) => unref(press).onKeydown(e));
-		on(n5, "mousedown", (e) => unref(press).onMousedown(e));
-		on(n5, "pointerdown", (e) => unref(press).onPointerdown(e));
-		on(n5, "pointerenter", (e) => unref(onPointerenter)(e));
-		on(n5, "pointerleave", (e) => unref(onPointerleave)(e));
-		on(n5, "pointerup", (e) => unref(press).onPointerup(e));
 		setTemplateRefBinding(n5, () => setElement);
 		return n5;
 	}

package/dist/components/combo-box/combo-box-value.js

@@ -49,7 +49,7 @@ var combo_box_value_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 			const n4 = t0();
 			renderEffect(() => setText(n4, toDisplayString(isPlaceholder.value ? props.placeholder ?? "" : unref(selectedText))));
 			return n4;
-		}, 261);
+		}, 265);
 		return n5;
 	}
 });

package/dist/components/date-input-group/date-input-group-input.js

@@ -1,10 +1,18 @@
 import { dataAttr } from "../../utils/assertion.js";
 import { useFocusWithin, useInteractionStates } from "../../composables/use-interaction-states.js";
 import { provideDateFieldControlContext, useDateFieldControlContext, useDateInputGroupContext } from "./date-input-group.context.js";
-import { computed, createFor, createSlot, createTemplateRefSetter, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, template, unref } from "vue";
+import { computed, createFor, createSlot, createTemplateRefSetter, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, template, unref } from "vue";
 //#region src/components/date-input-group/date-input-group-input.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div>");
 var t1 = template("<input>");
+var k0 = [
+	"data-disabled",
+	"data-focus-visible",
+	"data-focus-within",
+	"data-hovered",
+	"data-invalid",
+	"data-readonly"
+];
 var date_input_group_input_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "date-input-group-input",
 	props: {
@@ -49,6 +57,8 @@ var date_input_group_input_vue_vue_type_script_setup_true_vapor_true_lang_defaul
 			const _dataAttr = unref(dataAttr);
 			const _state = unref(state);
 			const _focusWithin = unref(focusWithin);
+			const _field = unref(field);
+			const _field_handlers = _field.handlers;
 			setDynamicProps(n3, [attrs.value, {
 				class: styles.value,
 				"data-disabled": _dataAttr(_state.isDisabled.value),
@@ -58,24 +68,24 @@ var date_input_group_input_vue_vue_type_script_setup_true_vapor_true_lang_defaul
 				"data-invalid": _dataAttr(_state.isInvalid.value),
 				"data-readonly": _dataAttr(_state.isReadOnly.value),
 				"data-slot": "date-input-group-input",
-				style: unref(field).style.value
-			}]);
+				style: _field.style.value,
+				onClick: (e) => _field_handlers.onClick(e),
+				onDragstart: (e) => _field_handlers.onDragstart(e),
+				onFocusin,
+				onFocusout,
+				onKeydown: (e) => _field.onKeydown(e),
+				onMousedown: (e) => _field_handlers.onMousedown(e),
+				onPointerdown: (e) => _field_handlers.onPointerdown(e),
+				onPointerenter,
+				onPointerleave,
+				onPointerup: (e) => _field_handlers.onPointerup(e)
+			}], k0);
 		});
 		setInsertionState(n3);
 		createFor(() => unref(state).segments.value, (_for_item0, _for_key0) => {
 			return createSlot("default", { segment: () => _for_item0.value });
 		}, (segment, index) => index, 17);
 		const n4 = t1();
-		on(n3, "click", (e) => unref(field).handlers.onClick(e));
-		on(n3, "dragstart", (e) => unref(field).handlers.onDragstart(e));
-		on(n3, "focusin", onFocusin);
-		on(n3, "focusout", onFocusout);
-		on(n3, "keydown", (e) => unref(field).onKeydown(e));
-		on(n3, "mousedown", (e) => unref(field).handlers.onMousedown(e));
-		on(n3, "pointerdown", (e) => unref(field).handlers.onPointerdown(e));
-		on(n3, "pointerenter", onPointerenter);
-		on(n3, "pointerleave", onPointerleave);
-		on(n3, "pointerup", (e) => unref(field).handlers.onPointerup(e));
 		renderEffect(() => {
 			_setTemplateRef(n3, setGroupElement);
 			setDynamicProps(n4, [unref(field).inputAttrs.value]);

package/dist/components/date-input-group/date-input-group-root.js

@@ -1,10 +1,18 @@
 import { dataAttr } from "../../utils/assertion.js";
 import { useFocusWithin, useInteractionStates } from "../../composables/use-interaction-states.js";
 import { provideDateInputGroupContext, useDateInputGroupOwnerContext } from "./date-input-group.context.js";
-import { computed, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref } from "vue";
+import { computed, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref } from "vue";
 import { dateInputGroupVariants } from "@ropav/styles";
 //#region src/components/date-input-group/date-input-group-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div>", 1);
+var k0 = [
+	"data-disabled",
+	"data-focus-visible",
+	"data-focus-within",
+	"data-hovered",
+	"data-invalid",
+	"data-readonly"
+];
 var date_input_group_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "date-input-group-root",
 	props: {
@@ -86,8 +94,18 @@ var date_input_group_root_vue_vue_type_script_setup_true_vapor_true_lang_default
 				"data-invalid": _dataAttr(isInvalid.value),
 				"data-readonly": _dataAttr(props.isReadOnly),
 				"data-slot": "date-input-group",
-				role: "group"
-			}]);
+				role: "group",
+				onClick,
+				onDragstart,
+				onFocusin,
+				onFocusout,
+				onKeydown,
+				onMousedown,
+				onPointerdown,
+				onPointerenter,
+				onPointerleave,
+				onPointerup
+			}], k0);
 		});
 		setInsertionState(n1);
 		createSlot("default", {
@@ -97,16 +115,6 @@ var date_input_group_root_vue_vue_type_script_setup_true_vapor_true_lang_default
 			isHovered: () => unref(interaction).isHovered.value,
 			isInvalid: () => Boolean(isInvalid.value)
 		});
-		on(n1, "click", onClick);
-		on(n1, "dragstart", onDragstart);
-		on(n1, "focusin", onFocusin);
-		on(n1, "focusout", onFocusout);
-		on(n1, "keydown", onKeydown);
-		on(n1, "mousedown", onMousedown);
-		on(n1, "pointerdown", onPointerdown);
-		on(n1, "pointerenter", onPointerenter);
-		on(n1, "pointerleave", onPointerleave);
-		on(n1, "pointerup", onPointerup);
 		setTemplateRefBinding(n1, () => setElement);
 		return n1;
 	}

package/dist/components/date-input-group/date-input-group-segment.js

@@ -2,10 +2,19 @@ import { dataAttr } from "../../utils/assertion.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { useDateFieldControlContext, useDateInputGroupContext } from "./date-input-group.context.js";
 import { useDateSegment } from "./use-date-segment.js";
-import { computed, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, setText, shallowRef, template, toDisplayString, unref } from "vue";
+import { computed, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, setText, shallowRef, template, toDisplayString, unref } from "vue";
 //#region src/components/date-input-group/date-input-group-segment.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template(" ");
 var t1 = template("<span>", 1);
+var k0 = [
+	"data-disabled",
+	"data-focus-visible",
+	"data-focused",
+	"data-hovered",
+	"data-invalid",
+	"data-readonly",
+	"data-type"
+];
 var date_input_group_segment_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "date-input-group-segment",
 	props: {
@@ -55,8 +64,17 @@ var date_input_group_segment_vue_vue_type_script_setup_true_vapor_true_lang_defa
 				"data-readonly": _dataAttr(_state.isReadOnly.value),
 				"data-slot": "date-input-group-segment",
 				"data-type": props.segment.type,
-				style: _segment.style.value
-			}]);
+				style: _segment.style.value,
+				onBeforeinput: (e) => _segment.onBeforeinput(e),
+				onBlur,
+				onFocus,
+				onInput: (e) => _segment.onInput(e),
+				onKeydown: (e) => _segment.onKeydown(e),
+				onMousedown: (e) => _segment.onMousedown(e),
+				onPointerdown: (e) => _segment.onPointerdown(e),
+				onPointerenter: (e) => _interaction.onPointerenter(e),
+				onPointerleave: (e) => _interaction.onPointerleave(e)
+			}], k0);
 		});
 		setInsertionState(n3);
 		createSlot("default", null, () => {
@@ -64,15 +82,6 @@ var date_input_group_segment_vue_vue_type_script_setup_true_vapor_true_lang_defa
 			renderEffect(() => setText(n2, toDisplayString(props.segment.text)));
 			return n2;
 		});
-		on(n3, "beforeinput", (e) => unref(segment).onBeforeinput(e));
-		on(n3, "blur", onBlur);
-		on(n3, "focus", onFocus);
-		on(n3, "input", (e) => unref(segment).onInput(e));
-		on(n3, "keydown", (e) => unref(segment).onKeydown(e));
-		on(n3, "mousedown", (e) => unref(segment).onMousedown(e));
-		on(n3, "pointerdown", (e) => unref(segment).onPointerdown(e));
-		on(n3, "pointerenter", (e) => unref(interaction).onPointerenter(e));
-		on(n3, "pointerleave", (e) => unref(interaction).onPointerleave(e));
 		setTemplateRefBinding(n3, () => setElement);
 		return n3;
 	}

package/dist/components/date-picker/date-picker-trigger.js

@@ -1,9 +1,17 @@
 import { dataAttr } from "../../utils/assertion.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { useDatePickerContext } from "./date-picker.context.js";
-import { computed, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref } from "vue";
+import { computed, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref } from "vue";
 //#region src/components/date-picker/date-picker-trigger.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<button>", 1);
+var k0 = [
+	"data-disabled",
+	"data-focus-visible",
+	"data-hovered",
+	"data-open",
+	"data-pressed",
+	"disabled"
+];
 var date_picker_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "date-picker-trigger",
 	props: { class: {} },
@@ -22,6 +30,7 @@ var date_picker_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default =
 			const _interaction = unref(interaction);
 			const _picker_isTriggerDisabled = _picker.isTriggerDisabled;
 			const _picker_isOpen = _picker.isOpen;
+			const _interaction_onPointerleave = _interaction.onPointerleave;
 			setDynamicProps(n1, [_picker.triggerAttrs.value, {
 				class: styles.value,
 				"data-disabled": _dataAttr(_picker_isTriggerDisabled.value),
@@ -31,18 +40,18 @@ var date_picker_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default =
 				"data-pressed": _dataAttr(_picker_isOpen.value || _interaction.isPressed.value),
 				"data-slot": "date-picker-trigger",
 				disabled: _picker_isTriggerDisabled.value || void 0,
-				type: "button"
-			}]);
+				type: "button",
+				onBlur: (e) => _interaction.onBlur(e),
+				onClick: (e) => _picker.onTriggerPress(e),
+				onFocus: (e) => _interaction.onFocus(e),
+				onPointercancel: (e) => _interaction_onPointerleave(e),
+				onPointerdown: (e) => _interaction.onPointerdown(e),
+				onPointerenter: (e) => _interaction.onPointerenter(e),
+				onPointerleave: (e) => _interaction_onPointerleave(e)
+			}], k0);
 		});
 		setInsertionState(n1);
 		createSlot();
-		on(n1, "blur", (e) => unref(interaction).onBlur(e));
-		on(n1, "click", (e) => unref(picker).onTriggerPress(e));
-		on(n1, "focus", (e) => unref(interaction).onFocus(e));
-		on(n1, "pointercancel", (e) => unref(interaction).onPointerleave(e));
-		on(n1, "pointerdown", (e) => unref(interaction).onPointerdown(e));
-		on(n1, "pointerenter", (e) => unref(interaction).onPointerenter(e));
-		on(n1, "pointerleave", (e) => unref(interaction).onPointerleave(e));
 		setTemplateRefBinding(n1, () => setElement);
 		return n1;
 	}