ropav 0.12.2 → 0.13.0

package/dist/components/close-button/close-button-root.js

@@ -3,10 +3,22 @@ import icon_close_default from "../icons/icon-close.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, createComponent, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref } from "vue";
+import { computed, createComponent, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref } from "vue";
 import { closeButtonVariants } from "@ropav/styles";
 //#region src/components/close-button/close-button-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<button>", 1);
+var k0 = [
+	"aria-disabled",
+	"data-disabled",
+	"data-focus-visible",
+	"data-focused",
+	"data-hovered",
+	"data-pending",
+	"data-pressed",
+	"disabled",
+	"tabindex",
+	"type"
+];
 var close_button_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "close-button-root",
 	props: {
@@ -79,21 +91,38 @@ var close_button_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /
 		renderEffect(() => {
 			const _props = props;
 			const _dataAttr = unref(dataAttr);
-			setDynamicProps(n3, [{
-				"aria-disabled": _props.isPending || void 0,
-				"aria-label": "Close",
-				class: styles.value,
-				"data-disabled": _dataAttr(_props.isDisabled),
-				"data-focus-visible": _dataAttr(unref(isFocusVisible)),
-				"data-focused": _dataAttr(unref(isFocused)),
-				"data-hovered": _dataAttr(unref(isHovered)),
-				"data-pending": _dataAttr(_props.isPending),
-				"data-pressed": _dataAttr(unref(isPressed) || unref(responder)?.isPressed.value),
-				"data-slot": "close-button",
-				disabled: _props.isDisabled || void 0,
-				tabindex: tabindex.value,
-				type: type.value
-			}, attrs.value]);
+			const _focus = unref(focus);
+			const _press = unref(press);
+			setDynamicProps(n3, [
+				{
+					"aria-disabled": _props.isPending || void 0,
+					"aria-label": "Close",
+					class: styles.value,
+					"data-disabled": _dataAttr(_props.isDisabled),
+					"data-focus-visible": _dataAttr(unref(isFocusVisible)),
+					"data-focused": _dataAttr(unref(isFocused)),
+					"data-hovered": _dataAttr(unref(isHovered)),
+					"data-pending": _dataAttr(_props.isPending),
+					"data-pressed": _dataAttr(unref(isPressed) || unref(responder)?.isPressed.value),
+					"data-slot": "close-button",
+					disabled: _props.isDisabled || void 0,
+					tabindex: tabindex.value,
+					type: type.value
+				},
+				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(n3);
 		createSlot("default", {
@@ -105,16 +134,6 @@ var close_button_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /
 		}, () => {
 			return createComponent(unref(icon_close_default), { "data-slot": "close-button-icon" });
 		});
-		on(n3, "blur", (e) => unref(focus).onBlur(e));
-		on(n3, "click", (e) => unref(press).onClick(e));
-		on(n3, "dragstart", (e) => unref(press).onDragstart(e));
-		on(n3, "focus", (e) => unref(focus).onFocus(e));
-		on(n3, "keydown", (e) => unref(press).onKeydown(e));
-		on(n3, "mousedown", (e) => unref(press).onMousedown(e));
-		on(n3, "pointerdown", (e) => unref(press).onPointerdown(e));
-		on(n3, "pointerenter", (e) => unref(press).onPointerenter(e));
-		on(n3, "pointerleave", (e) => unref(press).onPointerleave(e));
-		on(n3, "pointerup", (e) => unref(press).onPointerup(e));
 		setTemplateRefBinding(n3, () => setElement);
 		return n3;
 	}

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-root.js

@@ -189,10 +189,7 @@ var combo_box_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@_
 			if (state.selectionMode.value === "single") return texts[0] ?? "";
 			return new Intl.ListFormat(locale.value.locale).format(texts);
 		});
-		const styles = computed(() => comboBoxVariants({
-			fullWidth: props.fullWidth,
-			size: props.size
-		}));
+		const styles = computed(() => comboBoxVariants({ fullWidth: props.fullWidth }));
 		const isDisabled = computed(() => Boolean(props.isDisabled));
 		/**
 		* The options that matched, handed to whoever writes the listbox.
@@ -245,7 +242,8 @@ var combo_box_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@_
 			},
 			selection: state.selection,
 			shouldFocusOnHover: true,
-			shouldUseVirtualFocus: true
+			shouldUseVirtualFocus: true,
+			size: () => props.size
 		});
 		/**
 		* The popover is anchored to the group around the field, not to the chevron inside it.

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/combo-box/combo-box.types.d.ts

@@ -4,7 +4,7 @@ import type { ValidationBehavior, ValidationFunction } from "../../composables/u
 import type { SelectSelectionMode, SelectedItem, SelectedValue } from "../../composables/use-select-state.js";
 import type { DisabledBehavior } from "../../composables/use-selection-manager.js";
 import type { Placement } from "../../utils/position.js";
-import type { ComboBoxVariants } from "@ropav/styles";
+import type { InputVariants } from "@ropav/styles";
 /**
  * A combo box is a text field that filters a list of options, and the text is part of the value.
  *
@@ -95,12 +95,15 @@ export interface ComboBoxRootProps<T = unknown> {
     ariaLabel?: string;
     ariaLabelledby?: string;
     ariaDescribedby?: string;
-    /** How tall the field stands, matching a button of the same size. @default "md" */
-    size?: ComboBoxVariants["size"];
+    /**
+     * How tall the field stands, matching a button of the same size. Handed to the `Input` inside and
+     * to the listbox in the popover, unless either declares one of its own. @default "md"
+     */
+    size?: InputVariants["size"];
     /** Whether the combo box stretches to fill its container. */
     fullWidth?: boolean;
     /** Visual variant the `Input` inside picks up. @default "primary" */
-    variant?: "primary" | "secondary";
+    variant?: InputVariants["variant"];
 }
 export interface ComboBoxRootEmits {
     change: [value: SelectedValue];

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]);