ropav 0.12.2 → 0.13.0

package/dist/components/select/select.types.d.ts

@@ -60,7 +60,10 @@ export interface SelectRootProps<T = unknown> {
     ariaLabelledby?: string;
     ariaDescribedby?: string;
     variant?: SelectVariants["variant"];
-    /** How tall the trigger stands, matching a button of the same size. @default "md" */
+    /**
+     * How tall the trigger stands, matching a button of the same size. Handed to the listbox in the
+     * popover, unless it declares one of its own. @default "md"
+     */
     size?: SelectVariants["size"];
     fullWidth?: boolean;
 }

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

@@ -5,6 +5,7 @@ import { computed, createSlot, defineVaporComponent, renderEffect, setDynamicPro
 //#region src/components/slider/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 slider_output_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "slider-output",
 	props: { class: {} },
@@ -20,7 +21,7 @@ var 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": "slider-output"
-			}]);
+			}], k0);
 		});
 		setInsertionState(n3);
 		createSlot("default", null, () => {

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

@@ -6,10 +6,11 @@ import { useSlider } from "../../composables/use-slider.js";
 import { useNumberFormatter } from "../../composables/use-number-formatter.js";
 import { useSliderState } from "../../composables/use-slider-state.js";
 import { provideSliderContext } from "./slider.context.js";
-import { computed, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, shallowRef, template, unref } from "vue";
+import { computed, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, shallowRef, template, unref } from "vue";
 import { sliderVariants } from "@ropav/styles";
 //#region src/components/slider/slider-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div>", 1);
+var k0 = ["data-disabled", "data-orientation"];
 var slider_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "slider-root",
 	props: {
@@ -97,8 +98,9 @@ var slider_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PU
 				class: styles.value.base({ class: props.class }),
 				"data-disabled": unref(dataAttr)(_state.isDisabled.value),
 				"data-orientation": _state.orientation.value,
-				"data-slot": "slider"
-			}]);
+				"data-slot": "slider",
+				onClick
+			}], k0);
 		});
 		setInsertionState(n1);
 		createSlot("default", {
@@ -106,7 +108,6 @@ var slider_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PU
 			orientation: () => unref(state).orientation.value,
 			values: () => unref(state).values.value
 		});
-		on(n1, "click", onClick);
 		return n1;
 	}
 });

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

@@ -48,9 +48,6 @@ var slider_thumb_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__P
 		const n3 = t0();
 		const n1 = child(n3);
 		const n0 = child(n1);
-		on(n0, "blur", onInputBlur);
-		on(n0, "change", (e) => unref(thumb).inputHandlers.onChange(e));
-		on(n0, "focus", onInputFocus);
 		renderEffect(() => {
 			const _dataAttr = unref(dataAttr);
 			const _thumb = unref(thumb);
@@ -62,7 +59,11 @@ var slider_thumb_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__P
 			setAttr(n3, "data-hovered", _dataAttr(unref(isHovered)));
 			setStyle(n3, _thumb.thumbStyle.value);
 			setStyle(n1, unref(visuallyHiddenStyle));
-			setDynamicProps(n0, [_thumb.inputProps.value]);
+			setDynamicProps(n0, [_thumb.inputProps.value, {
+				onBlur: onInputBlur,
+				onChange: (e) => _thumb.inputHandlers.onChange(e),
+				onFocus: onInputFocus
+			}]);
 			_setTemplateRef(n0, setInputEl);
 		});
 		setInsertionState(n3, 1);

package/dist/components/table/table-drop-indicator.js

@@ -3,7 +3,7 @@ import { useVirtualizerStateContext } from "../virtualizer/virtualizer.context.j
 import { visuallyHiddenStyle } from "../../utils/visually-hidden.js";
 import { useTableGridContext, useTableVirtualizerContext } from "./table.context.js";
 import table_virtualizer_item_default from "./table-virtualizer-item.js";
-import { computed, createComponent, createDynamicComponent, createIf, defineVaporComponent, extend, on, renderEffect, setDynamicProps, setStaticTemplateRef, shallowRef, template, unref } from "vue";
+import { computed, createComponent, createDynamicComponent, createIf, defineVaporComponent, extend, renderEffect, setDynamicProps, setStaticTemplateRef, shallowRef, template, unref } from "vue";
 //#region src/components/table/table-drop-indicator.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div>");
 /**
@@ -81,12 +81,15 @@ var table_drop_indicator_vue_vue_type_script_setup_true_vapor_true_lang_default
 						style: { padding: 0 }
 					}, () => {
 						const n2 = t0();
-						on(n2, "click", () => unref(indicator)?.handlers.onClick());
 						setStaticTemplateRef(n2, element, null, "element");
-						renderEffect(() => setDynamicProps(n2, [unref(indicator)?.attrs.value, {
-							role: "button",
-							style: unref(visuallyHiddenStyle)
-						}]));
+						renderEffect(() => {
+							const _indicator = unref(indicator);
+							setDynamicProps(n2, [_indicator?.attrs.value, {
+								role: "button",
+								style: unref(visuallyHiddenStyle),
+								onClick: () => _indicator?.handlers.onClick()
+							}]);
+						});
 						return n2;
 					}, 4);
 				}, { _: 1 }), 4);

package/dist/components/table/table-row.js

@@ -6,7 +6,7 @@ import { useVirtualizerItem } from "../virtualizer/use-virtualizer-item.js";
 import { visuallyHiddenStyle } from "../../utils/visually-hidden.js";
 import { provideTableRowContext, useTableGridContext, useTableVirtualizerContext } from "./table.context.js";
 import { createTableRegistry, tableCellId } from "./use-table-collection.js";
-import { computed, createDynamicComponent, createIf, createSlot, defineVaporComponent, extend, on, renderEffect, setDynamicProps, setStaticTemplateRef, shallowRef, template, unref, watch } from "vue";
+import { computed, createDynamicComponent, createIf, createSlot, defineVaporComponent, extend, renderEffect, setDynamicProps, setStaticTemplateRef, shallowRef, template, unref, watch } from "vue";
 //#region src/components/table/table-row.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div>");
 var table_row_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
@@ -173,12 +173,15 @@ var table_row_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 					style: { padding: 0 }
 				}, () => {
 					const n2 = t0();
-					on(n2, "click", () => unref(dropIndicator).handlers.onClick());
 					setStaticTemplateRef(n2, dropIndicatorElement, null, "dropIndicatorElement");
-					renderEffect(() => setDynamicProps(n2, [unref(dropIndicator).attrs.value, {
-						role: "button",
-						style: unref(visuallyHiddenStyle)
-					}]));
+					renderEffect(() => {
+						const _dropIndicator = unref(dropIndicator);
+						setDynamicProps(n2, [_dropIndicator.attrs.value, {
+							role: "button",
+							style: unref(visuallyHiddenStyle),
+							onClick: () => _dropIndicator.handlers.onClick()
+						}]);
+					});
 					return n2;
 				}, 4);
 			}, { _: 1 }));

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

@@ -23,8 +23,7 @@ var tabs_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 		},
 		orientation: { default: void 0 },
 		variant: { default: void 0 },
-		id: {},
-		onSelectionChange: {}
+		id: {}
 	},
 	emits: ["selectionChange", "update:selectedKey"],
 	setup(__props, { emit: __emit }) {
@@ -43,7 +42,6 @@ var tabs_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE
 			id: () => props.id,
 			isDisabled: () => props.isDisabled,
 			onSelectionChange: (key) => {
-				props.onSelectionChange?.(key);
 				emit("selectionChange", key);
 				emit("update:selectedKey", key);
 			},

package/dist/components/tabs/tabs.types.d.ts

@@ -32,7 +32,6 @@ export interface TabsRootProps {
      * for itself.
      */
     id?: string;
-    onSelectionChange?: (key: CollectionKey) => void;
 }
 export interface TabsRootSlotProps {
     orientation: TabsOrientation;

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

@@ -4,10 +4,17 @@ import { setFormValue } from "../../utils/form-value.js";
 import { useTextFieldControlContext } from "../../composables/use-text-field.js";
 import { useTextFieldContext } from "../textfield/textfield.context.js";
 import { useTextareaAutosize } from "../../composables/use-textarea-autosize.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 { textAreaVariants } from "@ropav/styles";
 //#region src/components/textarea/textarea-root.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 textarea_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "textarea-root",
 	props: {
@@ -101,27 +108,32 @@ var textarea_root_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: 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": "textarea"
-			}, 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": "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/textfield/textfield.context.d.ts

@@ -1,9 +1,10 @@
+import type { InputVariants } from "@ropav/styles";
 import type { ComputedRef } from "vue";
 export interface TextFieldContext {
     /** Visual variant the control inside picks up when it declares none of its own. */
-    variant: ComputedRef<"primary" | "secondary" | undefined>;
+    variant: ComputedRef<InputVariants["variant"] | undefined>;
     /** Size the control inside picks up when it declares none of its own. */
-    size: ComputedRef<"sm" | "md" | "lg" | undefined>;
+    size: ComputedRef<InputVariants["size"] | undefined>;
 }
 /**
  * Carries the variant alone, kept apart from the control context that carries the behaviour.

package/dist/components/textfield/textfield.types.d.ts

@@ -1,13 +1,14 @@
 import type { ValidationBehavior, ValidationDetails, ValidationFunction } from "../../composables/use-form-validation-state.js";
+import type { InputVariants } from "@ropav/styles";
 export interface TextFieldRootProps {
     class?: string;
     /** Visual variant handed down to the control inside. @default "primary" */
-    variant?: "primary" | "secondary";
+    variant?: InputVariants["variant"];
     /**
      * How tall the control inside stands, matching a button of the same size. Handed to the control
      * unless it declares one of its own. @default "md"
      */
-    size?: "sm" | "md" | "lg";
+    size?: InputVariants["size"];
     /** Whether the field stretches to fill its container. */
     fullWidth?: boolean;
     /** Text in the field. Makes it controlled. */

package/dist/components/toast/toast-default-content.js

@@ -73,7 +73,7 @@ var toast_default_content_vue_vue_type_script_setup_true_vapor_true_lang_default
 							variant: () => content.value.variant
 						});
 					}, 517), 261);
-				}),
+				}, null, 2),
 				createComponent(toast_content_default, null, extend(() => {
 					return [
 						createIf(() => Boolean(content.value.title), () => {

package/dist/components/toast/toast-provider.js

@@ -6,11 +6,12 @@ import { DEFAULT_SCALE_FACTOR, EXIT_FALLBACK } from "./toast.constants.js";
 import { useToastRegion } from "../../composables/use-toast-region.js";
 import toast_default_content_default from "./toast-default-content.js";
 import { toastQueue, useToastQueue } from "./toast-queue.js";
-import { VaporTeleport, child, computed, createComponent, createFor, createIf, createSlot, defineVaporComponent, on, onScopeDispose, renderEffect, setDynamicProps, setInsertionState, setStyle, setTemplateRefBinding, shallowRef, template, unref, watch } from "vue";
+import { VaporTeleport, child, computed, createComponent, createFor, createIf, createSlot, defineVaporComponent, onScopeDispose, renderEffect, setDynamicProps, setInsertionState, setStyle, setTemplateRefBinding, shallowRef, template, unref, watch } from "vue";
 import { toastVariants } from "@ropav/styles";
 //#region src/components/toast/toast-provider.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<li>");
 var t1 = template("<div><ol>");
+var k0 = ["data-expanded", "dir"];
 var toast_provider_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "toast-provider",
 	props: {
@@ -133,13 +134,23 @@ var toast_provider_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@_
 				const n8 = child(n9);
 				renderEffect(() => {
 					const _region = unref(region);
-					setDynamicProps(n9, [{
-						class: styles.value,
-						"data-expanded": unref(dataAttr)(_region.isExpanded.value),
-						"data-slot": "toast-region",
-						dir: unref(locale).direction,
-						style: regionStyle.value
-					}, _region.regionAttrs.value]);
+					setDynamicProps(n9, [
+						{
+							class: styles.value,
+							"data-expanded": unref(dataAttr)(_region.isExpanded.value),
+							"data-slot": "toast-region",
+							dir: unref(locale).direction,
+							style: regionStyle.value
+						},
+						_region.regionAttrs.value,
+						{
+							onFocusin: (e) => _region.onFocusin(e),
+							onFocusout: (e) => _region.onFocusout(e),
+							onPointerenter: (e) => _region.onPointerenter(e),
+							onPointerleave: (e) => _region.onPointerleave(e),
+							onPointermove: (e) => _region.onPointermove(e)
+						}
+					], k0);
 					setStyle(n8, CONTENTS_STYLE);
 				});
 				setInsertionState(n8);
@@ -155,11 +166,6 @@ var toast_provider_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@_
 					});
 					return n7;
 				}, (entry) => entry.key, 9);
-				on(n9, "focusin", (e) => unref(region).onFocusin(e));
-				on(n9, "focusout", (e) => unref(region).onFocusout(e));
-				on(n9, "pointerenter", (e) => unref(region).onPointerenter(e));
-				on(n9, "pointerleave", (e) => unref(region).onPointerleave(e));
-				on(n9, "pointermove", (e) => unref(region).onPointermove(e));
 				setTemplateRefBinding(n9, () => setElement);
 				return n9;
 			}, true);

package/dist/components/toast/toast-renderable.js

@@ -22,7 +22,7 @@ var toast_renderable_vue_vue_type_script_setup_true_vapor_true_lang_default = /*
 			return n3;
 		}, () => {
 			return createDynamicComponent(() => props.value, null, null, 1);
-		}, 517), 260);
+		}, 518), 262);
 	}
 });
 //#endregion

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

@@ -7,6 +7,15 @@ import { useToast } from "../../composables/use-toast.js";
 import { computed, createSlot, defineVaporComponent, onMounted, onScopeDispose, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, shallowRef, template, unref, watch } from "vue";
 //#region src/components/toast/toast-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div>", 1);
+var k0 = [
+	"data-entering",
+	"data-exiting",
+	"data-expanded",
+	"data-frontmost",
+	"data-hidden",
+	"data-index",
+	"tabindex"
+];
 var toast_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "toast-root",
 	props: {
@@ -143,7 +152,7 @@ var toast_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PUR
 				"data-slot": "toast",
 				style: style.value,
 				tabindex: _isFrontmost && !_isExiting ? 0 : -1
-			}, unref(api).toastAttrs.value]);
+			}, unref(api).toastAttrs.value], k0);
 		});
 		setInsertionState(n1);
 		createSlot();

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

@@ -2,9 +2,15 @@ import { dataAttr } from "../../utils/assertion.js";
 import { useInteractionStates } from "../../composables/use-interaction-states.js";
 import { composeFocusResponder, useFocusResponder } from "../../composables/focus-responder.js";
 import { FOCUSABLE_SELECTOR } from "../../utils/focus.js";
-import { computed, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, shallowRef, template, unref, watch } from "vue";
+import { computed, createSlot, defineVaporComponent, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, shallowRef, template, unref, watch } from "vue";
 //#region src/components/tooltip/tooltip-trigger.vue?vue&type=script&setup=true&vapor=true&lang.ts
 var t0 = template("<div>", 1);
+var k0 = [
+	"data-focus-visible",
+	"data-hovered",
+	"role",
+	"tabindex"
+];
 var tooltip_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
 	__name: "tooltip-trigger",
 	props: { class: {} },
@@ -32,23 +38,29 @@ var tooltip_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@
 		renderEffect(() => {
 			const _dataAttr = unref(dataAttr);
 			const _states = unref(states);
-			setDynamicProps(n1, [{
-				class: ["rp-tooltip__trigger", props.class],
-				"data-focus-visible": _dataAttr(_states.isFocusVisible.value),
-				"data-hovered": _dataAttr(_states.isHovered.value),
-				"data-slot": "tooltip-trigger",
-				role: hasFocusableContent.value ? void 0 : "button",
-				tabindex: hasFocusableContent.value ? void 0 : 0
-			}, wrapperAttrs.value]);
+			const _focus = unref(focus);
+			setDynamicProps(n1, [
+				{
+					class: ["rp-tooltip__trigger", props.class],
+					"data-focus-visible": _dataAttr(_states.isFocusVisible.value),
+					"data-hovered": _dataAttr(_states.isHovered.value),
+					"data-slot": "tooltip-trigger",
+					role: hasFocusableContent.value ? void 0 : "button",
+					tabindex: hasFocusableContent.value ? void 0 : 0
+				},
+				wrapperAttrs.value,
+				{
+					onBlur: (e) => _focus.onBlur(e),
+					onFocus: (e) => _focus.onFocus(e),
+					onKeydown: (e) => _focus.onKeydown(e),
+					onPointerdown: (e) => _focus.onPointerdown(e),
+					onPointerenter: (e) => _focus.onPointerenter(e),
+					onPointerleave: (e) => _focus.onPointerleave(e)
+				}
+			], k0);
 		});
 		setInsertionState(n1);
 		createSlot();
-		on(n1, "blur", (e) => unref(focus).onBlur(e));
-		on(n1, "focus", (e) => unref(focus).onFocus(e));
-		on(n1, "keydown", (e) => unref(focus).onKeydown(e));
-		on(n1, "pointerdown", (e) => unref(focus).onPointerdown(e));
-		on(n1, "pointerenter", (e) => unref(focus).onPointerenter(e));
-		on(n1, "pointerleave", (e) => unref(focus).onPointerleave(e));
 		setTemplateRefBinding(n1, () => setElement);
 		return n1;
 	}