ropav 0.12.2 → 0.13.0

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;

package/dist/components/input-otp/input-otp-root.js

@@ -2,10 +2,21 @@ import { dataAttr } from "../../utils/assertion.js";
 import { provideFieldErrorContext } from "../field-error/field-error.context.js";
 import { provideInputOTPStateContext, useInputOTP } from "../../composables/use-input-otp.js";
 import { provideInputOTPContext } from "./input-otp.context.js";
-import { child, computed, createSlot, createTemplateRefSetter, defineVaporComponent, next, on, renderEffect, setClass, setDynamicProps, setInsertionState, setStyle, template, unref } from "vue";
+import { child, computed, createSlot, createTemplateRefSetter, defineVaporComponent, next, renderEffect, setClass, setDynamicProps, setInsertionState, setStyle, template, unref } from "vue";
 import { inputOTPVariants } from "@ropav/styles";
 //#region src/components/input-otp/input-otp-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div data-input-otp-container=true><!><div><input>", 1);
+var k0 = [
+	"id",
+	"aria-describedby",
+	"aria-label",
+	"aria-labelledby",
+	"data-disabled",
+	"data-invalid",
+	"disabled",
+	"form",
+	"name"
+];
 var input_otp_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "input-otp-root",
 	props: {
@@ -115,31 +126,37 @@ var input_otp_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@_
 		});
 		setInsertionState(n4, n3);
 		createSlot();
-		on(n1, "blur", (e) => unref(otp).handlers.onBlur(e));
-		on(n1, "focus", (e) => unref(otp).handlers.onFocus(e));
-		on(n1, "input", (e) => unref(otp).handlers.onInput(e));
-		on(n1, "mouseleave", (e) => unref(otp).handlers.onMouseleave(e));
-		on(n1, "mouseover", (e) => unref(otp).handlers.onMouseover(e));
-		on(n1, "paste", (e) => unref(otp).handlers.onPaste(e));
 		renderEffect(() => {
 			const _dataAttr = unref(dataAttr);
 			const _isDisabled = isDisabled.value;
 			const _otp = unref(otp);
+			const _otp_handlers = _otp.handlers;
 			setStyle(n2, wrapperStyle);
-			setDynamicProps(n1, [{
-				id: __props.id,
-				"aria-describedby": __props.ariaDescribedby,
-				"aria-label": __props.ariaLabel,
-				"aria-labelledby": __props.ariaLabelledby,
-				class: inputStyles.value,
-				"data-disabled": _dataAttr(_isDisabled),
-				"data-invalid": _dataAttr(isInvalid.value),
-				"data-slot": "input-otp",
-				disabled: _isDisabled || void 0,
-				form: __props.form,
-				name: __props.name,
-				style: _otp.inputStyle.value
-			}, _otp.attrs.value]);
+			setDynamicProps(n1, [
+				{
+					id: __props.id,
+					"aria-describedby": __props.ariaDescribedby,
+					"aria-label": __props.ariaLabel,
+					"aria-labelledby": __props.ariaLabelledby,
+					class: inputStyles.value,
+					"data-disabled": _dataAttr(_isDisabled),
+					"data-invalid": _dataAttr(isInvalid.value),
+					"data-slot": "input-otp",
+					disabled: _isDisabled || void 0,
+					form: __props.form,
+					name: __props.name,
+					style: _otp.inputStyle.value
+				},
+				_otp.attrs.value,
+				{
+					onBlur: (e) => _otp_handlers.onBlur(e),
+					onFocus: (e) => _otp_handlers.onFocus(e),
+					onInput: (e) => _otp_handlers.onInput(e),
+					onMouseleave: (e) => _otp_handlers.onMouseleave(e),
+					onMouseover: (e) => _otp_handlers.onMouseover(e),
+					onPaste: (e) => _otp_handlers.onPaste(e)
+				}
+			], k0);
 			_setTemplateRef(n1, _otp.registerInput);
 			_setTemplateRef(n4, _otp.registerContainer);
 		});

package/dist/components/list-box/list-box-drop-indicator.js

@@ -2,7 +2,7 @@ import { dataAttr } from "../../utils/assertion.js";
 import { useVirtualizerStateContext } from "../virtualizer/virtualizer.context.js";
 import virtualizer_item_default from "../virtualizer/virtualizer-item.js";
 import { useListBoxContext } from "./list-box.context.js";
-import { computed, createComponent, createIf, defineVaporComponent, on, renderEffect, setDynamicProps, setStaticTemplateRef, shallowRef, template, unref } from "vue";
+import { computed, createComponent, createIf, defineVaporComponent, renderEffect, setDynamicProps, setStaticTemplateRef, shallowRef, template, unref } from "vue";
 //#region src/components/list-box/list-box-drop-indicator.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div>");
 var t1 = template("<div>", 1);
@@ -56,19 +56,17 @@ var list_box_drop_indicator_vue_vue_type_script_setup_true_vapor_true_lang_defau
 			return createIf(() => layoutInfo.value, () => {
 				return createComponent(unref(virtualizer_item_default), { "layout-info": () => layoutInfo.value }, () => {
 					const n4 = t0();
-					on(n4, "click", () => unref(indicator)?.handlers.onClick());
 					setStaticTemplateRef(n4, element, null, "element");
-					renderEffect(() => setDynamicProps(n4, [attrs.value]));
+					renderEffect(() => setDynamicProps(n4, [attrs.value, { onClick: () => unref(indicator)?.handlers.onClick() }]));
 					return n4;
 				}, true);
 			}, () => {
 				const n7 = t1();
-				on(n7, "click", () => unref(indicator)?.handlers.onClick());
 				setStaticTemplateRef(n7, element, null, "element");
-				renderEffect(() => setDynamicProps(n7, [attrs.value]));
+				renderEffect(() => setDynamicProps(n7, [attrs.value, { onClick: () => unref(indicator)?.handlers.onClick() }]));
 				return n7;
 			}, 261);
-		});
+		}, null, 2);
 	}
 });
 //#endregion

package/dist/components/list-box/list-box-root.js

@@ -59,11 +59,6 @@ var list_box_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 		* built the collection out of its own `items`, so naming `T` here restates what went in.
 		*/
 		const itemOf = (node) => node?.content;
-		const styles = computed(() => listboxVariants({
-			class: props.class,
-			size: props.size,
-			variant: props.variant
-		}));
 		/**
 		* The state this listbox runs on, which is not always its own.
 		*
@@ -72,6 +67,12 @@ var list_box_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 		* one is there the listbox borrows it whole rather than keeping a second copy that would drift.
 		*/
 		const owner = useListBoxStateContext();
+		const resolvedSize = computed(() => props.size ?? toValue(owner?.size));
+		const styles = computed(() => listboxVariants({
+			class: props.class,
+			size: resolvedSize.value,
+			variant: props.variant
+		}));
 		const ownListId = useId$1();
 		const collectionId = useId$1();
 		const listId = computed(() => toValue(owner?.listId) ?? ownListId.value);

package/dist/components/list-box/list-box.context.d.ts

@@ -5,6 +5,7 @@ import type { UseDroppableCollectionStateReturn } from "../../composables/use-dr
 import type { UseListKeyboardReturn } from "../../composables/use-list-keyboard.js";
 import type { FocusStrategy } from "../../composables/use-overlay-trigger-state.js";
 import type { UseSelectionManagerReturn } from "../../composables/use-selection-manager.js";
+import type { ListBoxVariants } from "@ropav/styles";
 import type { ComputedRef, MaybeRefOrGetter } from "vue";
 export interface ListBoxContext {
     collection: UseCollectionReturn;
@@ -66,6 +67,13 @@ export interface ListBoxStateContext {
     ariaLabel?: MaybeRefOrGetter<string | undefined>;
     /** Where focus lands when the listbox appears, given how its owner was opened. */
     autoFocus?: MaybeRefOrGetter<boolean | FocusStrategy | undefined>;
+    /**
+     * The owner's size, which the listbox's rows take when it declares none of its own.
+     *
+     * Handed down rather than reached by a selector: a picker's listbox is teleported out of the
+     * picker's DOM along with the popover, so no rule keyed on the root can find its rows.
+     */
+    size?: MaybeRefOrGetter<ListBoxVariants["size"] | undefined>;
     /** Whether hovering an option moves focus to it. @default false */
     shouldFocusOnHover?: MaybeRefOrGetter<boolean | undefined>;
     /**

package/dist/components/list-box-item/list-box-item-root.js

@@ -6,10 +6,31 @@ import { useVirtualizerStateContext } from "../virtualizer/virtualizer.context.j
 import { useListBoxContext } from "../list-box/list-box.context.js";
 import { provideListBoxItemContext } from "./list-box-item.context.js";
 import { getCollectionTextValue } from "../../utils/text-value.js";
-import { computed, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, shallowRef, template, unref, watch } from "vue";
+import { computed, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, setStaticTemplateRef, shallowRef, template, unref, watch } from "vue";
 import { listboxItemVariants } from "@ropav/styles";
 //#region src/components/list-box-item/list-box-item-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div>", 1);
+var k0 = [
+	"id",
+	"aria-describedby",
+	"aria-disabled",
+	"aria-posinset",
+	"aria-selected",
+	"aria-setsize",
+	"data-allows-dragging",
+	"data-collection",
+	"data-disabled",
+	"data-dragging",
+	"data-drop-target",
+	"data-focus-visible",
+	"data-focused",
+	"data-hovered",
+	"data-key",
+	"data-pressed",
+	"data-selected",
+	"data-selection-mode",
+	"tabindex"
+];
 var list_box_item_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "list-box-item-root",
 	props: {
@@ -192,6 +213,7 @@ var list_box_item_root_vue_vue_type_script_setup_true_vapor_true_lang_default =
 			const _selectionMode = selectionMode.value;
 			const _isSelected = isSelected.value;
 			const _dataAttr = unref(dataAttr);
+			const _draggable = unref(draggable);
 			setDynamicProps(n1, [
 				{
 					id: `${unref(listId)}-option-${_itemKey}`,
@@ -204,7 +226,7 @@ var list_box_item_root_vue_vue_type_script_setup_true_vapor_true_lang_default =
 				},
 				dndAttrs.value,
 				{
-					"data-allows-dragging": _dataAttr(unref(draggable) != null),
+					"data-allows-dragging": _dataAttr(_draggable != null),
 					"data-collection": unref(collectionId),
 					"data-disabled": _dataAttr(_isDisabled),
 					"data-dragging": _dataAttr(isDragging.value),
@@ -218,9 +240,21 @@ var list_box_item_root_vue_vue_type_script_setup_true_vapor_true_lang_default =
 					"data-selection-mode": _selectionMode === "none" ? void 0 : _selectionMode,
 					"data-slot": "list-box-item",
 					role: "option",
-					tabindex: unref(keyboard).itemTabIndex(_itemKey)
+					tabindex: unref(keyboard).itemTabIndex(_itemKey),
+					onBlur: (e) => unref(onBlur)(e),
+					onClick,
+					onDrag: ($event) => _draggable?.handlers.onDrag($event),
+					onDragend: ($event) => _draggable?.handlers.onDragend($event),
+					onDragstart: ($event) => _draggable?.handlers.onDragstart($event),
+					onFocus,
+					onKeydownCapture: ($event) => _draggable?.handlers.onKeydownCapture?.($event),
+					onKeyupCapture: ($event) => _draggable?.handlers.onKeyupCapture?.($event),
+					onMousedown,
+					onPointerdown: (e) => unref(onPointerdown)(e),
+					onPointerenter,
+					onPointerleave: (e) => unref(onPointerleave)(e)
 				}
-			]);
+			], k0);
 		});
 		setInsertionState(n1);
 		createSlot("default", {
@@ -234,18 +268,6 @@ var list_box_item_root_vue_vue_type_script_setup_true_vapor_true_lang_default =
 			isSelected: () => isSelected.value,
 			selectionMode: () => selectionMode.value
 		});
-		on(n1, "blur", (e) => unref(onBlur)(e));
-		on(n1, "click", onClick);
-		on(n1, "drag", ($event) => unref(draggable)?.handlers.onDrag($event));
-		on(n1, "dragend", ($event) => unref(draggable)?.handlers.onDragend($event));
-		on(n1, "dragstart", ($event) => unref(draggable)?.handlers.onDragstart($event));
-		on(n1, "focus", onFocus);
-		on(n1, "keydown", ($event) => unref(draggable)?.handlers.onKeydownCapture?.($event), { capture: true });
-		on(n1, "keyup", ($event) => unref(draggable)?.handlers.onKeyupCapture?.($event), { capture: true });
-		on(n1, "mousedown", onMousedown);
-		on(n1, "pointerdown", (e) => unref(onPointerdown)(e));
-		on(n1, "pointerenter", onPointerenter);
-		on(n1, "pointerleave", (e) => unref(onPointerleave)(e));
 		setStaticTemplateRef(n1, element, null, "element");
 		return n1;
 	}

package/dist/components/menu/menu-root.js

@@ -1,6 +1,6 @@
 import { provideSeparatorContext } from "../separator/separator.context.js";
 import { useMenu } from "../../composables/use-menu.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";
 import { menuVariants } from "@ropav/styles";
 //#region src/components/menu/menu-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div>");
@@ -69,10 +69,22 @@ var menu_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 		};
 		const hasEmptySlot = computed(() => Boolean(callerSlots["empty"]));
 		const n5 = t1();
-		renderEffect(() => setDynamicProps(n5, [{
-			class: styles.value,
-			"data-slot": "menu"
-		}, unref(menu).menuAttributes.value]));
+		renderEffect(() => {
+			const _menu = unref(menu);
+			setDynamicProps(n5, [
+				{
+					class: styles.value,
+					"data-slot": "menu"
+				},
+				_menu.menuAttributes.value,
+				{
+					onFocusin: (e) => _menu.onFocusin(e),
+					onFocusout: (e) => _menu.onFocusout(e),
+					onKeydown: (e) => _menu.onKeydown(e),
+					onKeydownCapture: (e) => _menu.onKeydownCapture(e)
+				}
+			]);
+		});
 		setInsertionState(n5);
 		createIf(() => hasEmptySlot.value && unref(menu).isEmpty.value, () => {
 			const n3 = t0();
@@ -83,10 +95,6 @@ var menu_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 		});
 		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/modal/modal-container.js

@@ -45,11 +45,9 @@ var modal_container_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/modal/modal-trigger.js

@@ -1,9 +1,10 @@
 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/modal/modal-trigger.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div>", 1);
+var k0 = ["data-focus-visible", "data-pressed"];
 var modal_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "modal-trigger",
 	props: { class: {} },
@@ -19,27 +20,33 @@ var modal_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__
 		renderEffect(() => {
 			const _dataAttr = unref(dataAttr);
 			const _responder = unref(responder);
-			setDynamicProps(n1, [{
-				class: ["rp-modal__trigger", props.class],
-				"data-focus-visible": _dataAttr(unref(isFocusVisible)),
-				"data-pressed": _dataAttr(_responder?.isPressed.value),
-				"data-slot": "modal-trigger",
-				role: "button",
-				tabindex: "0"
-			}, _responder?.attrs.value]);
+			const _press = unref(press);
+			setDynamicProps(n1, [
+				{
+					class: ["rp-modal__trigger", props.class],
+					"data-focus-visible": _dataAttr(unref(isFocusVisible)),
+					"data-pressed": _dataAttr(_responder?.isPressed.value),
+					"data-slot": "modal-trigger",
+					role: "button",
+					tabindex: "0"
+				},
+				_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/number-field/number-field-decrement-button.js

@@ -2,9 +2,16 @@ import { dataAttr } from "../../utils/assertion.js";
 import icon_minus_default from "../icons/icon-minus.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { useNumberFieldContext } from "./number-field.context.js";
-import { computed, createComponent, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, template, unref } from "vue";
+import { computed, createComponent, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, template, unref } from "vue";
 //#region src/components/number-field/number-field-decrement-button.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-pressed",
+	"disabled"
+];
 var number_field_decrement_button_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "number-field-decrement-button",
 	props: { class: {} },
@@ -67,28 +74,33 @@ var number_field_decrement_button_vue_vue_type_script_setup_true_vapor_true_lang
 			const _decrement = unref(decrement);
 			const _interaction = unref(interaction);
 			const _decrement_isDisabled = _decrement.isDisabled;
-			setDynamicProps(n3, [{
-				class: styles.value,
-				"data-disabled": _dataAttr(_decrement_isDisabled.value),
-				"data-focus-visible": _dataAttr(_interaction.isFocusVisible.value),
-				"data-hovered": _dataAttr(_interaction.isHovered.value),
-				"data-pressed": _dataAttr(_interaction.isPressed.value),
-				"data-slot": "number-field-decrement-button",
-				disabled: _decrement_isDisabled.value || void 0,
-				type: "button"
-			}, attrs.value]);
+			setDynamicProps(n3, [
+				{
+					class: styles.value,
+					"data-disabled": _dataAttr(_decrement_isDisabled.value),
+					"data-focus-visible": _dataAttr(_interaction.isFocusVisible.value),
+					"data-hovered": _dataAttr(_interaction.isHovered.value),
+					"data-pressed": _dataAttr(_interaction.isPressed.value),
+					"data-slot": "number-field-decrement-button",
+					disabled: _decrement_isDisabled.value || void 0,
+					type: "button"
+				},
+				attrs.value,
+				{
+					onBlur: (e) => _interaction.onBlur(e),
+					onFocus: (e) => _interaction.onFocus(e),
+					onPointercancel,
+					onPointerdown,
+					onPointerenter: (e) => _interaction.onPointerenter(e),
+					onPointerleave,
+					onPointerup
+				}
+			], k0);
 		});
 		setInsertionState(n3);
 		createSlot("default", null, () => {
 			return createComponent(unref(icon_minus_default), { "data-slot": "number-field-decrement-button-icon" });
 		});
-		on(n3, "blur", (e) => unref(interaction).onBlur(e));
-		on(n3, "focus", (e) => unref(interaction).onFocus(e));
-		on(n3, "pointercancel", onPointercancel);
-		on(n3, "pointerdown", onPointerdown);
-		on(n3, "pointerenter", (e) => unref(interaction).onPointerenter(e));
-		on(n3, "pointerleave", onPointerleave);
-		on(n3, "pointerup", onPointerup);
 		return n3;
 	}
 });

package/dist/components/number-field/number-field-group.js

@@ -1,9 +1,15 @@
 import { dataAttr } from "../../utils/assertion.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { useNumberFieldContext } from "./number-field.context.js";
-import { computed, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, template, unref } from "vue";
+import { computed, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, template, unref } from "vue";
 //#region src/components/number-field/number-field-group.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div>", 1);
+var k0 = [
+	"data-disabled",
+	"data-focus-within",
+	"data-hovered",
+	"data-invalid"
+];
 var number_field_group_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "number-field-group",
 	props: { class: {} },
@@ -16,14 +22,24 @@ var number_field_group_vue_vue_type_script_setup_true_vapor_true_lang_default =
 		renderEffect(() => {
 			const _dataAttr = unref(dataAttr);
 			const _field = unref(field);
-			setDynamicProps(n1, [{
-				class: styles.value,
-				"data-disabled": _dataAttr(_field.isDisabled.value),
-				"data-focus-within": _dataAttr(_field.isFocusWithin.value),
-				"data-hovered": _dataAttr(unref(interaction).isHovered.value),
-				"data-invalid": _dataAttr(_field.isInvalid.value),
-				"data-slot": "number-field-group"
-			}, _field.groupAttrs.value]);
+			const _interaction = unref(interaction);
+			setDynamicProps(n1, [
+				{
+					class: styles.value,
+					"data-disabled": _dataAttr(_field.isDisabled.value),
+					"data-focus-within": _dataAttr(_field.isFocusWithin.value),
+					"data-hovered": _dataAttr(_interaction.isHovered.value),
+					"data-invalid": _dataAttr(_field.isInvalid.value),
+					"data-slot": "number-field-group"
+				},
+				_field.groupAttrs.value,
+				{
+					onFocusin: (e) => _field.onFocusin(e),
+					onFocusout: (e) => _field.onFocusout(e),
+					onPointerenter: (e) => _interaction.onPointerenter(e),
+					onPointerleave: (e) => _interaction.onPointerleave(e)
+				}
+			], k0);
 		});
 		setInsertionState(n1);
 		createSlot("default", {
@@ -32,10 +48,6 @@ var number_field_group_vue_vue_type_script_setup_true_vapor_true_lang_default =
 			isHovered: () => unref(interaction).isHovered.value,
 			isInvalid: () => unref(field).isInvalid.value
 		});
-		on(n1, "focusin", (e) => unref(field).onFocusin(e));
-		on(n1, "focusout", (e) => unref(field).onFocusout(e));
-		on(n1, "pointerenter", (e) => unref(interaction).onPointerenter(e));
-		on(n1, "pointerleave", (e) => unref(interaction).onPointerleave(e));
 		return n1;
 	}
 });

package/dist/components/number-field/number-field-increment-button.js

@@ -2,9 +2,16 @@ import { dataAttr } from "../../utils/assertion.js";
 import icon_plus_default from "../icons/icon-plus.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { useNumberFieldContext } from "./number-field.context.js";
-import { computed, createComponent, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, template, unref } from "vue";
+import { computed, createComponent, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, template, unref } from "vue";
 //#region src/components/number-field/number-field-increment-button.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-pressed",
+	"disabled"
+];
 var number_field_increment_button_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "number-field-increment-button",
 	props: { class: {} },
@@ -67,28 +74,33 @@ var number_field_increment_button_vue_vue_type_script_setup_true_vapor_true_lang
 			const _increment = unref(increment);
 			const _interaction = unref(interaction);
 			const _increment_isDisabled = _increment.isDisabled;
-			setDynamicProps(n3, [{
-				class: styles.value,
-				"data-disabled": _dataAttr(_increment_isDisabled.value),
-				"data-focus-visible": _dataAttr(_interaction.isFocusVisible.value),
-				"data-hovered": _dataAttr(_interaction.isHovered.value),
-				"data-pressed": _dataAttr(_interaction.isPressed.value),
-				"data-slot": "number-field-increment-button",
-				disabled: _increment_isDisabled.value || void 0,
-				type: "button"
-			}, attrs.value]);
+			setDynamicProps(n3, [
+				{
+					class: styles.value,
+					"data-disabled": _dataAttr(_increment_isDisabled.value),
+					"data-focus-visible": _dataAttr(_interaction.isFocusVisible.value),
+					"data-hovered": _dataAttr(_interaction.isHovered.value),
+					"data-pressed": _dataAttr(_interaction.isPressed.value),
+					"data-slot": "number-field-increment-button",
+					disabled: _increment_isDisabled.value || void 0,
+					type: "button"
+				},
+				attrs.value,
+				{
+					onBlur: (e) => _interaction.onBlur(e),
+					onFocus: (e) => _interaction.onFocus(e),
+					onPointercancel,
+					onPointerdown,
+					onPointerenter: (e) => _interaction.onPointerenter(e),
+					onPointerleave,
+					onPointerup
+				}
+			], k0);
 		});
 		setInsertionState(n3);
 		createSlot("default", null, () => {
 			return createComponent(unref(icon_plus_default), { "data-slot": "number-field-increment-button-icon" });
 		});
-		on(n3, "blur", (e) => unref(interaction).onBlur(e));
-		on(n3, "focus", (e) => unref(interaction).onFocus(e));
-		on(n3, "pointercancel", onPointercancel);
-		on(n3, "pointerdown", onPointerdown);
-		on(n3, "pointerenter", (e) => unref(interaction).onPointerenter(e));
-		on(n3, "pointerleave", onPointerleave);
-		on(n3, "pointerup", onPointerup);
 		return n3;
 	}
 });