ropav 0.12.1 → 0.12.3

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;
 	}

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

@@ -1,9 +1,17 @@
 import { dataAttr } from "../../utils/assertion.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { useDateRangePickerContext } from "./date-range-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-range-picker/date-range-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_range_picker_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "date-range-picker-trigger",
 	props: { class: {} },
@@ -22,6 +30,7 @@ var date_range_picker_trigger_vue_vue_type_script_setup_true_vapor_true_lang_def
 			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_range_picker_trigger_vue_vue_type_script_setup_true_vapor_true_lang_def
 				"data-pressed": _dataAttr(_picker_isOpen.value || _interaction.isPressed.value),
 				"data-slot": "date-range-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;
 	}

package/dist/components/drawer/drawer-content.js

@@ -41,11 +41,9 @@ var drawer_content_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@_
 		const onKeydown = (event) => overlay?.onKeydown(event);
 		const n4 = t0();
 		renderEffect(() => {
-			const _dataAttr = unref(dataAttr);
-			const _overlay = unref(overlay);
 			setClass(n4, styles.value);
-			setAttr(n4, "data-entering", _dataAttr(_overlay?.isContentEntering.value));
-			setAttr(n4, "data-exiting", _dataAttr(_overlay?.isExiting.value));
+			setAttr(n4, "data-entering", unref(dataAttr)(unref(overlay)?.isContentEntering.value));
+			setAttr(n4, "data-exiting", unref(dataAttr)(unref(overlay)?.isExiting.value));
 			setAttr(n4, "data-placement", props.placement);
 		});
 		setInsertionState(n4);

package/dist/components/drawer/drawer-trigger.js

@@ -2,9 +2,18 @@ import { dataAttr } from "../../utils/assertion.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { composeFocusResponder, useFocusResponder } from "../../composables/focus-responder.js";
 import { composePressResponder, usePressResponder } from "../../composables/press-responder.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/drawer/drawer-trigger.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<button>", 1);
+var k0 = [
+	"data-disabled",
+	"data-focus-visible",
+	"data-focused",
+	"data-hovered",
+	"data-pressed",
+	"disabled",
+	"tabindex"
+];
 var drawer_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "drawer-trigger",
 	props: {
@@ -59,31 +68,38 @@ var drawer_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@_
 		renderEffect(() => {
 			const _props = props;
 			const _dataAttr = unref(dataAttr);
-			setDynamicProps(n1, [{
-				class: ["rp-drawer__trigger", _props.class],
-				"data-disabled": _dataAttr(_props.isDisabled),
-				"data-focus-visible": _dataAttr(unref(isFocusVisible)),
-				"data-focused": _dataAttr(unref(isFocused)),
-				"data-hovered": _dataAttr(unref(isHovered)),
-				"data-pressed": _dataAttr(unref(isPressed) || unref(responder)?.isPressed.value),
-				"data-slot": "drawer-trigger",
-				disabled: _props.isDisabled || void 0,
-				tabindex: tabindex.value,
-				type: "button"
-			}, attrs.value]);
+			const _focus = unref(focus);
+			const _press = unref(press);
+			setDynamicProps(n1, [
+				{
+					class: ["rp-drawer__trigger", _props.class],
+					"data-disabled": _dataAttr(_props.isDisabled),
+					"data-focus-visible": _dataAttr(unref(isFocusVisible)),
+					"data-focused": _dataAttr(unref(isFocused)),
+					"data-hovered": _dataAttr(unref(isHovered)),
+					"data-pressed": _dataAttr(unref(isPressed) || unref(responder)?.isPressed.value),
+					"data-slot": "drawer-trigger",
+					disabled: _props.isDisabled || void 0,
+					tabindex: tabindex.value,
+					type: "button"
+				},
+				attrs.value,
+				{
+					onBlur: (e) => _focus.onBlur(e),
+					onClick: (e) => _press.onClick(e),
+					onDragstart: (e) => _press.onDragstart(e),
+					onFocus: (e) => _focus.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(focus).onBlur(e));
-		on(n1, "click", (e) => unref(press).onClick(e));
-		on(n1, "dragstart", (e) => unref(press).onDragstart(e));
-		on(n1, "focus", (e) => unref(focus).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/dropdown/dropdown-menu.js

@@ -1,10 +1,11 @@
 import { provideSeparatorContext } from "../separator/separator.context.js";
 import { useMenu } from "../../composables/use-menu.js";
 import { useDropdownPopoverTarget } from "./dropdown.context.js";
-import { computed, createIf, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref, useSlots } from "vue";
+import { computed, createIf, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref, useSlots } from "vue";
 //#region src/components/dropdown/dropdown-menu.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div>");
 var t1 = template("<div>", 1);
+var k0 = ["data-selection-mode"];
 var dropdown_menu_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "dropdown-menu",
 	props: {
@@ -62,11 +63,21 @@ var dropdown_menu_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 		const n5 = t1();
 		renderEffect(() => {
 			const _props = props;
-			setDynamicProps(n5, [{
-				class: ["rp-menu rp-dropdown__menu", _props.class],
-				"data-selection-mode": _props.selectionMode,
-				"data-slot": "dropdown-menu"
-			}, unref(menu).menuAttributes.value]);
+			const _menu = unref(menu);
+			setDynamicProps(n5, [
+				{
+					class: ["rp-menu rp-dropdown__menu", _props.class],
+					"data-selection-mode": _props.selectionMode,
+					"data-slot": "dropdown-menu"
+				},
+				_menu.menuAttributes.value,
+				{
+					onFocusin: (e) => _menu.onFocusin(e),
+					onFocusout: (e) => _menu.onFocusout(e),
+					onKeydown: (e) => _menu.onKeydown(e),
+					onKeydownCapture: (e) => _menu.onKeydownCapture(e)
+				}
+			], k0);
 		});
 		setInsertionState(n5);
 		createIf(() => hasEmptySlot.value && unref(menu).isEmpty.value, () => {
@@ -78,10 +89,6 @@ var dropdown_menu_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 		});
 		setInsertionState(n5, 1);
 		createSlot();
-		on(n5, "focusin", (e) => unref(menu).onFocusin(e));
-		on(n5, "focusout", (e) => unref(menu).onFocusout(e));
-		on(n5, "keydown", (e) => unref(menu).onKeydown(e));
-		on(n5, "keydown", (e) => unref(menu).onKeydownCapture(e), { capture: true });
 		setTemplateRefBinding(n5, () => setElement);
 		return n5;
 	}

package/dist/components/dropdown/dropdown-trigger.js

@@ -1,9 +1,19 @@
 import { dataAttr } from "../../utils/assertion.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { composePressResponder, usePressResponder } from "../../composables/press-responder.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/dropdown/dropdown-trigger.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<button>", 1);
+var k0 = [
+	"data-disabled",
+	"data-focus-visible",
+	"data-focused",
+	"data-hovered",
+	"data-pressed",
+	"disabled",
+	"tabindex",
+	"type"
+];
 var dropdown_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "dropdown-trigger",
 	props: {
@@ -34,31 +44,37 @@ var dropdown_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*
 			const _dataAttr = unref(dataAttr);
 			const _resolvedIsDisabled = resolvedIsDisabled.value;
 			const _responder = unref(responder);
-			setDynamicProps(n1, [{
-				class: ["rp-dropdown__trigger", _props.class],
-				"data-disabled": _dataAttr(_resolvedIsDisabled),
-				"data-focus-visible": _dataAttr(unref(isFocusVisible)),
-				"data-focused": _dataAttr(unref(isFocused)),
-				"data-hovered": _dataAttr(unref(isHovered)),
-				"data-pressed": _dataAttr(unref(isPressed) || _responder?.isPressed.value),
-				"data-slot": "dropdown-trigger",
-				disabled: _resolvedIsDisabled || void 0,
-				tabindex: tabindex.value,
-				type: _props.type
-			}, _responder?.attrs.value]);
+			const _press = unref(press);
+			setDynamicProps(n1, [
+				{
+					class: ["rp-dropdown__trigger", _props.class],
+					"data-disabled": _dataAttr(_resolvedIsDisabled),
+					"data-focus-visible": _dataAttr(unref(isFocusVisible)),
+					"data-focused": _dataAttr(unref(isFocused)),
+					"data-hovered": _dataAttr(unref(isHovered)),
+					"data-pressed": _dataAttr(unref(isPressed) || _responder?.isPressed.value),
+					"data-slot": "dropdown-trigger",
+					disabled: _resolvedIsDisabled || void 0,
+					tabindex: tabindex.value,
+					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/input/input-root.js

@@ -3,10 +3,17 @@ import { useInteractionStates } from "../../composables/use-interaction-states.j
 import { setFormValue } from "../../utils/form-value.js";
 import { useTextFieldControlContext } from "../../composables/use-text-field.js";
 import { useTextFieldContext } from "../textfield/textfield.context.js";
-import { computed, createTemplateRefSetter, defineVaporComponent, on, renderEffect, setDynamicProps, shallowRef, template, unref, watch } from "vue";
+import { computed, createTemplateRefSetter, defineVaporComponent, renderEffect, setDynamicProps, shallowRef, template, unref, watch } from "vue";
 import { inputVariants } from "@ropav/styles";
 //#region src/components/input/input-root.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 input_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "input-root",
 	props: {
@@ -87,27 +94,32 @@ var input_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PUR
 		};
 		const _setTemplateRef = createTemplateRefSetter();
 		const n0 = t0();
-		on(n0, "blur", onBlur);
-		on(n0, "focus", onFocus);
-		on(n0, "input", onInput);
-		on(n0, "keydown", (e) => unref(control)?.handlers.onKeydown(e));
-		on(n0, "keyup", (e) => unref(control)?.handlers.onKeyup(e));
-		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: styles.value,
-				"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": "input"
-			}, attrs.value]);
+			setDynamicProps(n0, [
+				{
+					class: styles.value,
+					"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": "input"
+				},
+				attrs.value,
+				{
+					onBlur,
+					onFocus,
+					onInput,
+					onKeydown: (e) => _control?.handlers.onKeydown(e),
+					onKeyup: (e) => _control?.handlers.onKeyup(e),
+					onPointerdown: (e) => _interaction.onPointerdown(e),
+					onPointerenter: (e) => _interaction.onPointerenter(e),
+					onPointerleave: (e) => _interaction.onPointerleave(e)
+				}
+			], k0);
 			_setTemplateRef(n0, setElement);
 		});
 		return n0;

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

@@ -2,9 +2,16 @@ import { dataAttr } from "../../utils/assertion.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { setFormValue } from "../../utils/form-value.js";
 import { useTextFieldControlContext } from "../../composables/use-text-field.js";
-import { computed, createTemplateRefSetter, defineVaporComponent, on, renderEffect, setDynamicProps, shallowRef, template, unref, watch } from "vue";
+import { computed, createTemplateRefSetter, defineVaporComponent, renderEffect, setDynamicProps, shallowRef, template, unref, watch } from "vue";
 //#region src/components/input-group/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 input_group_input_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "input-group-input",
 	props: {
@@ -70,27 +77,32 @@ var input_group_input_vue_vue_type_script_setup_true_vapor_true_lang_default = /
 		};
 		const _setTemplateRef = createTemplateRefSetter();
 		const n0 = t0();
-		on(n0, "blur", onBlur);
-		on(n0, "focus", onFocus);
-		on(n0, "input", onInput);
-		on(n0, "keydown", (e) => unref(control)?.handlers.onKeydown(e));
-		on(n0, "keyup", (e) => unref(control)?.handlers.onKeyup(e));
-		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-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": "input-group-input"
-			}, attrs.value]);
+			setDynamicProps(n0, [
+				{
+					class: ["rp-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": "input-group-input"
+				},
+				attrs.value,
+				{
+					onBlur,
+					onFocus,
+					onInput,
+					onKeydown: (e) => _control?.handlers.onKeydown(e),
+					onKeyup: (e) => _control?.handlers.onKeyup(e),
+					onPointerdown: (e) => _interaction.onPointerdown(e),
+					onPointerenter: (e) => _interaction.onPointerenter(e),
+					onPointerleave: (e) => _interaction.onPointerleave(e)
+				}
+			], k0);
 			_setTemplateRef(n0, setElement);
 		});
 		return n0;

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

@@ -2,9 +2,16 @@ import { dataAttr } from "../../utils/assertion.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { setFormValue } from "../../utils/form-value.js";
 import { useTextFieldControlContext } from "../../composables/use-text-field.js";
-import { computed, createTemplateRefSetter, defineVaporComponent, on, renderEffect, setDynamicProps, shallowRef, template, unref, watch } from "vue";
+import { computed, createTemplateRefSetter, defineVaporComponent, renderEffect, setDynamicProps, shallowRef, template, unref, watch } from "vue";
 //#region src/components/input-group/input-group-textarea.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<textarea>", 1);
+var k0 = [
+	"data-disabled",
+	"data-focus-visible",
+	"data-focused",
+	"data-hovered",
+	"data-invalid"
+];
 var input_group_textarea_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "input-group-textarea",
 	props: {
@@ -70,27 +77,32 @@ var input_group_textarea_vue_vue_type_script_setup_true_vapor_true_lang_default
 		};
 		const _setTemplateRef = createTemplateRefSetter();
 		const n0 = t0();
-		on(n0, "blur", onBlur);
-		on(n0, "focus", onFocus);
-		on(n0, "input", onInput);
-		on(n0, "keydown", (e) => unref(control)?.handlers.onKeydown(e));
-		on(n0, "keyup", (e) => unref(control)?.handlers.onKeyup(e));
-		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-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": "input-group-textarea"
-			}, attrs.value]);
+			setDynamicProps(n0, [
+				{
+					class: ["rp-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": "input-group-textarea"
+				},
+				attrs.value,
+				{
+					onBlur,
+					onFocus,
+					onInput,
+					onKeydown: (e) => _control?.handlers.onKeydown(e),
+					onKeyup: (e) => _control?.handlers.onKeyup(e),
+					onPointerdown: (e) => _interaction.onPointerdown(e),
+					onPointerenter: (e) => _interaction.onPointerenter(e),
+					onPointerleave: (e) => _interaction.onPointerleave(e)
+				}
+			], k0);
 			_setTemplateRef(n0, setElement);
 		});
 		return n0;