ropav 0.4.0 → 0.5.0

package/dist/components/segmented-control/index.js

@@ -0,0 +1,15 @@
+import { useSegmentedControlContext, useSegmentedControlItemContext } from "./segmented-control.context.js";
+import segmented_control_indicator_default from "./segmented-control-indicator.js";
+import segmented_control_item_default from "./segmented-control-item.js";
+import segmented_control_root_default from "./segmented-control-root.js";
+import segmented_control_separator_default from "./segmented-control-separator.js";
+import { segmentedControlVariants } from "@ropav/styles";
+//#region src/components/segmented-control/index.ts
+var SegmentedControl = Object.assign(segmented_control_root_default, {
+	Indicator: segmented_control_indicator_default,
+	Item: segmented_control_item_default,
+	Root: segmented_control_root_default,
+	Separator: segmented_control_separator_default
+});
+//#endregion
+export { SegmentedControl, segmented_control_indicator_default as SegmentedControlIndicator, segmented_control_item_default as SegmentedControlItem, segmented_control_root_default as SegmentedControlRoot, segmented_control_separator_default as SegmentedControlSeparator, segmentedControlVariants, useSegmentedControlContext, useSegmentedControlItemContext };

package/dist/components/segmented-control/segmented-control-indicator.d.ts

@@ -0,0 +1,19 @@
+import type { SegmentedControlIndicatorProps } from "./segmented-control.types.js";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<SegmentedControlIndicatorProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/segmented-control/segmented-control-indicator.js

@@ -0,0 +1,36 @@
+import { composeSlotClassName } from "../../utils/compose.js";
+import { dataAttr } from "../../utils/assertion.js";
+import { useSharedElement, useSharedElementScope } from "../../composables/use-shared-element.js";
+import { useSegmentedControlContext, useSegmentedControlItemContext } from "./segmented-control.context.js";
+import { createIf, defineVaporComponent, renderEffect, setAttr, setClass, setStaticTemplateRef, shallowRef, template, unref } from "vue";
+//#region src/components/segmented-control/segmented-control-indicator.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<span aria-hidden=true data-slot=segmented-control-indicator>", 1);
+var segmented_control_indicator_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "segmented-control-indicator",
+	props: { class: {} },
+	setup(__props) {
+		const props = __props;
+		const { slots } = useSegmentedControlContext();
+		const { isSelected } = useSegmentedControlItemContext();
+		const element = shallowRef(null);
+		const { isEntering, isExiting, isPresent } = useSharedElement({
+			elementRef: element,
+			isVisible: () => isSelected.value,
+			name: "SelectionIndicator",
+			scope: useSharedElementScope()
+		});
+		return createIf(() => unref(isPresent), () => {
+			const n2 = t0();
+			setStaticTemplateRef(n2, element, null, "element");
+			renderEffect(() => {
+				const _dataAttr = unref(dataAttr);
+				setClass(n2, unref(composeSlotClassName)(unref(slots).indicator, props.class));
+				setAttr(n2, "data-entering", _dataAttr(unref(isEntering)));
+				setAttr(n2, "data-exiting", _dataAttr(unref(isExiting)));
+			});
+			return n2;
+		});
+	}
+});
+//#endregion
+export { segmented_control_indicator_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/segmented-control/segmented-control-item.d.ts

@@ -0,0 +1,21 @@
+import type { SegmentedControlItemProps, SegmentedControlItemSlotProps } from "./segmented-control.types.js";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<SegmentedControlItemProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: SegmentedControlItemSlotProps) => unknown;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/segmented-control/segmented-control-item.js

@@ -0,0 +1,96 @@
+import { dataAttr } from "../../utils/assertion.js";
+import { useInteractionStates } from "../../composables/use-interaction-states.js";
+import { getCollectionTextValue } from "../../utils/text-value.js";
+import { provideSegmentedControlItemContext, useSegmentedControlContext } from "./segmented-control.context.js";
+import { computed, createSlot, defineVaporComponent, on, renderEffect, setAttr, setClass, setInsertionState, setProp, setStaticTemplateRef, shallowRef, template, unref, watch } from "vue";
+//#region src/components/segmented-control/segmented-control-item.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<button data-slot=segmented-control-item role=radio type=button>", 1);
+var segmented_control_item_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "segmented-control-item",
+	props: {
+		class: {},
+		id: {},
+		isDisabled: {
+			type: Boolean,
+			default: void 0
+		},
+		textValue: {},
+		ariaLabel: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { isDisabled: isControlDisabled, keyboard, slots, state } = useSegmentedControlContext();
+		const itemKey = computed(() => props.id);
+		const element = shallowRef(null);
+		watch(element, (current, _previous, onCleanup) => {
+			if (!current) return;
+			onCleanup(state.collection.register(itemKey.value, {
+				element: () => element.value,
+				isDisabled: () => Boolean(props.isDisabled),
+				textValue: () => props.textValue ?? getCollectionTextValue(element.value)
+			}));
+		}, {
+			flush: "post",
+			immediate: true
+		});
+		const isSelected = computed(() => state.selectedKey.value === itemKey.value);
+		const isDisabled = computed(() => isControlDisabled.value || state.selection.isDisabled(itemKey.value));
+		const { isFocusVisible, isFocused, isHovered, isPressed, onBlur, onFocus, onPointerdown: onPointerdownState, onPointerenter, onPointerleave } = useInteractionStates({ isDisabled: () => isDisabled.value });
+		provideSegmentedControlItemContext({ isSelected });
+		const choose = () => {
+			if (isDisabled.value) return;
+			keyboard.focusKey(itemKey.value);
+			state.selection.replaceSelection(itemKey.value);
+		};
+		const onPointerdown = (event) => {
+			onPointerdownState(event);
+			if (event.button !== 0) return;
+			choose();
+		};
+		const onKeydown = (event) => {
+			if (event.key !== "Enter" && event.key !== " ") return;
+			event.preventDefault();
+			event.stopPropagation();
+			choose();
+		};
+		const n1 = t0();
+		renderEffect(() => {
+			const _isSelected = isSelected.value;
+			const _props = props;
+			const _dataAttr = unref(dataAttr);
+			const _isDisabled = isDisabled.value;
+			const _itemKey = itemKey.value;
+			setAttr(n1, "aria-checked", _isSelected);
+			setAttr(n1, "aria-label", _props.ariaLabel);
+			setClass(n1, unref(slots).item({ class: _props.class }));
+			setAttr(n1, "data-disabled", _dataAttr(_isDisabled));
+			setAttr(n1, "data-focus-visible", _dataAttr(unref(isFocusVisible)));
+			setAttr(n1, "data-focused", _dataAttr(unref(isFocused)));
+			setAttr(n1, "data-hovered", _dataAttr(unref(isHovered)));
+			setAttr(n1, "data-key", _itemKey);
+			setAttr(n1, "data-pressed", _dataAttr(unref(isPressed)));
+			setAttr(n1, "data-selected", _dataAttr(_isSelected));
+			setProp(n1, "disabled", _isDisabled || void 0);
+			setProp(n1, "tabindex", _isDisabled ? void 0 : unref(keyboard).itemTabIndex(_itemKey));
+		});
+		setInsertionState(n1);
+		createSlot("default", {
+			isDisabled: () => isDisabled.value,
+			isFocusVisible: () => unref(isFocusVisible),
+			isFocused: () => unref(isFocused),
+			isHovered: () => unref(isHovered),
+			isPressed: () => unref(isPressed),
+			isSelected: () => isSelected.value
+		});
+		on(n1, "blur", (e) => unref(onBlur)(e));
+		on(n1, "focus", (e) => unref(onFocus)(e));
+		on(n1, "keydown", onKeydown);
+		on(n1, "pointerdown", onPointerdown);
+		on(n1, "pointerenter", (e) => unref(onPointerenter)(e));
+		on(n1, "pointerleave", (e) => unref(onPointerleave)(e));
+		setStaticTemplateRef(n1, element, null, "element");
+		return n1;
+	}
+});
+//#endregion
+export { segmented_control_item_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/segmented-control/segmented-control-root.d.ts

@@ -0,0 +1,25 @@
+import type { CollectionKey } from "../../composables/use-collection.js";
+import type { SegmentedControlRootProps, SegmentedControlRootSlotProps } from "./segmented-control.types.js";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<SegmentedControlRootProps & {
+        onSelectionChange?: ((key: CollectionKey) => any) | undefined;
+        "onUpdate:selectedKey"?: ((key: CollectionKey) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: SegmentedControlRootSlotProps) => unknown;
+    };
+    emit: ((evt: "selectionChange", key: CollectionKey) => void) & ((evt: "update:selectedKey", key: CollectionKey) => void);
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/segmented-control/segmented-control-root.js

@@ -0,0 +1,112 @@
+import { dataAttr } from "../../utils/assertion.js";
+import { useListKeyboard } from "../../composables/use-list-keyboard.js";
+import { createSharedElementScope, provideSharedElementScope } from "../../composables/use-shared-element.js";
+import { provideSegmentedControlContext } from "./segmented-control.context.js";
+import { useSingleSelectListState } from "../../composables/use-single-select-list-state.js";
+import { computed, createSlot, defineVaporComponent, on, renderEffect, setAttr, setClass, setInsertionState, setStaticTemplateRef, shallowRef, template, unref } from "vue";
+import { segmentedControlVariants } from "@ropav/styles";
+//#region src/components/segmented-control/segmented-control-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-slot=segmented-control role=radiogroup>", 1);
+var segmented_control_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "segmented-control-root",
+	props: {
+		class: {},
+		size: { default: void 0 },
+		fullWidth: {
+			type: Boolean,
+			default: void 0
+		},
+		selectedKey: {},
+		defaultSelectedKey: {},
+		disabledKeys: {},
+		isDisabled: {
+			type: Boolean,
+			default: void 0
+		},
+		ariaLabel: {},
+		ariaLabelledby: {},
+		ariaDescribedby: {},
+		onSelectionChange: {}
+	},
+	emits: ["selectionChange", "update:selectedKey"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const orientation = computed(() => "horizontal");
+		const isDisabled = computed(() => Boolean(props.isDisabled));
+		const slots = computed(() => segmentedControlVariants({
+			fullWidth: props.fullWidth,
+			size: props.size
+		}));
+		const state = useSingleSelectListState({
+			defaultSelectedKey: props.defaultSelectedKey,
+			disabledKeys: () => props.disabledKeys,
+			isDisabled: () => props.isDisabled,
+			onSelectionChange: (key) => {
+				props.onSelectionChange?.(key);
+				emit("selectionChange", key);
+				emit("update:selectedKey", key);
+			},
+			selectedKey: () => props.selectedKey
+		});
+		const element = shallowRef(null);
+		const keyboard = useListKeyboard({
+			collection: state.collection,
+			disallowActivation: true,
+			element,
+			escapeKeyBehavior: "none",
+			layout: "stack",
+			orientation: () => orientation.value,
+			selection: state.selection,
+			selectOnFocus: true,
+			shouldFocusWrap: true
+		});
+		/**
+		* The keys a segmented control has no answer for.
+		*
+		* It has no notion of a page, and the delegate would answer PageUp and PageDown by jumping to an
+		* end — surprising, and a scroll the page should have had.
+		*
+		* The block arrows are deliberately not filtered, which is the one place this parts company with
+		* `tabs-list.vue`. A radio group answers all four arrows whatever its axis, and a horizontal
+		* stack already routes ArrowDown to the next key and ArrowUp to the previous.
+		*/
+		const onKeydown = (event) => {
+			if (event.key === "PageUp" || event.key === "PageDown") return;
+			keyboard.onKeydown(event);
+		};
+		provideSharedElementScope(createSharedElementScope());
+		provideSegmentedControlContext({
+			isDisabled,
+			keyboard,
+			slots,
+			state
+		});
+		const n1 = t0();
+		renderEffect(() => {
+			const _props = props;
+			const _isDisabled = isDisabled.value;
+			const _orientation = orientation.value;
+			setAttr(n1, "aria-describedby", _props.ariaDescribedby);
+			setAttr(n1, "aria-disabled", _isDisabled || void 0);
+			setAttr(n1, "aria-label", _props.ariaLabel);
+			setAttr(n1, "aria-labelledby", _props.ariaLabelledby);
+			setAttr(n1, "aria-orientation", _orientation);
+			setClass(n1, slots.value.base({ class: _props.class }));
+			setAttr(n1, "data-disabled", unref(dataAttr)(_isDisabled));
+			setAttr(n1, "data-orientation", _orientation);
+		});
+		setInsertionState(n1);
+		createSlot("default", {
+			isDisabled: () => isDisabled.value,
+			selectedKey: () => unref(state).selectedKey.value
+		});
+		on(n1, "focusin", (e) => unref(keyboard).onFocusin(e));
+		on(n1, "focusout", (e) => unref(keyboard).onFocusout(e));
+		on(n1, "keydown", onKeydown);
+		setStaticTemplateRef(n1, element, null, "element");
+		return n1;
+	}
+});
+//#endregion
+export { segmented_control_root_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/segmented-control/segmented-control-separator.d.ts

@@ -0,0 +1,19 @@
+import type { SegmentedControlSeparatorProps } from "./segmented-control.types.js";
+declare const __VLS_export: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, 'attrs' | 'emit' | 'slots'>>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<SegmentedControlSeparatorProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/segmented-control/segmented-control-separator.js

@@ -0,0 +1,18 @@
+import { composeSlotClassName } from "../../utils/compose.js";
+import { useSegmentedControlContext } from "./segmented-control.context.js";
+import { defineVaporComponent, renderEffect, setClass, template, unref } from "vue";
+//#region src/components/segmented-control/segmented-control-separator.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<span aria-hidden=true data-slot=segmented-control-separator>", 1);
+var segmented_control_separator_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "segmented-control-separator",
+	props: { class: {} },
+	setup(__props) {
+		const props = __props;
+		const { slots } = useSegmentedControlContext();
+		const n0 = t0();
+		renderEffect(() => setClass(n0, unref(composeSlotClassName)(unref(slots).separator, props.class)));
+		return n0;
+	}
+});
+//#endregion
+export { segmented_control_separator_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/segmented-control/segmented-control.context.d.ts

@@ -0,0 +1,17 @@
+import type { UseListKeyboardReturn } from "../../composables/use-list-keyboard.js";
+import type { UseSingleSelectListStateReturn } from "../../composables/use-single-select-list-state.js";
+import type { segmentedControlVariants } from "@ropav/styles";
+import type { ComputedRef } from "vue";
+export interface SegmentedControlContext {
+    slots: ComputedRef<ReturnType<typeof segmentedControlVariants>>;
+    isDisabled: ComputedRef<boolean>;
+    /** Which segment is selected, and the collection it is selected from. */
+    state: UseSingleSelectListStateReturn;
+    keyboard: UseListKeyboardReturn;
+}
+export declare const useSegmentedControlContext: () => SegmentedControlContext, provideSegmentedControlContext: (value: SegmentedControlContext) => SegmentedControlContext;
+export interface SegmentedControlItemContext {
+    /** Read by the indicator, which is rendered inside the segment it belongs to. */
+    isSelected: ComputedRef<boolean>;
+}
+export declare const useSegmentedControlItemContext: () => SegmentedControlItemContext, provideSegmentedControlItemContext: (value: SegmentedControlItemContext) => SegmentedControlItemContext;

package/dist/components/segmented-control/segmented-control.context.js

@@ -0,0 +1,12 @@
+import { createContext } from "../../utils/create-context.js";
+//#region src/components/segmented-control/segmented-control.context.ts
+var [useSegmentedControlContext, provideSegmentedControlContext] = createContext({
+	errorMessage: "A segment has to be rendered inside a SegmentedControl: it takes its selection and its place in the keyboard order from the control.",
+	name: "SegmentedControlContext"
+});
+var [useSegmentedControlItemContext, provideSegmentedControlItemContext] = createContext({
+	errorMessage: "A segmented control's indicator has to be rendered inside a segment.",
+	name: "SegmentedControlItemContext"
+});
+//#endregion
+export { provideSegmentedControlContext, provideSegmentedControlItemContext, useSegmentedControlContext, useSegmentedControlItemContext };

package/dist/components/segmented-control/segmented-control.types.d.ts

@@ -0,0 +1,67 @@
+import type { CollectionKey } from "../../composables/use-collection.js";
+import type { SegmentedControlVariants } from "@ropav/styles";
+export type SegmentedControlOrientation = "horizontal";
+export interface SegmentedControlRootProps {
+    class?: string;
+    /**
+     * The control's scale.
+     *
+     * The track lands on 32/36/40px, the three heights a button and a field stand at, so a
+     * segmented control lines up with either.
+     *
+     * @default "md"
+     */
+    size?: SegmentedControlVariants["size"];
+    /** Stretches the track across its container and shares the width between the segments. */
+    fullWidth?: boolean;
+    /** The selected segment, when the caller drives it. */
+    selectedKey?: CollectionKey;
+    /** The initially selected segment. Falls back to the first segment that is not disabled. */
+    defaultSelectedKey?: CollectionKey;
+    disabledKeys?: CollectionKey[];
+    /** Disables every segment: a selection that stays visible but cannot be moved. */
+    isDisabled?: boolean;
+    /**
+     * Names the control, which has no visible label of its own.
+     *
+     * Declared under this name because Vue normalises prop names, so a hyphenated one never
+     * resolves — it is mapped back to `aria-label` at the binding.
+     */
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+    ariaDescribedby?: string;
+    onSelectionChange?: (key: CollectionKey) => void;
+}
+export interface SegmentedControlRootSlotProps {
+    selectedKey: CollectionKey | null;
+    isDisabled: boolean;
+}
+export interface SegmentedControlItemProps {
+    class?: string;
+    /**
+     * Identifies the segment, and is what the selection reports.
+     *
+     * Deliberately does not reach the DOM as an `id`, so two controls that both hold a `"weekly"`
+     * segment cannot collide. It surfaces as `data-key` instead.
+     */
+    id: CollectionKey;
+    isDisabled?: boolean;
+    /** What typeahead and assistive technology read, when the rendered text will not do. */
+    textValue?: string;
+    /** Names the segment, for one drawn as an icon with no text beside it. */
+    ariaLabel?: string;
+}
+export interface SegmentedControlItemSlotProps {
+    isSelected: boolean;
+    isDisabled: boolean;
+    isFocused: boolean;
+    isFocusVisible: boolean;
+    isHovered: boolean;
+    isPressed: boolean;
+}
+export interface SegmentedControlIndicatorProps {
+    class?: string;
+}
+export interface SegmentedControlSeparatorProps {
+    class?: string;
+}

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

@@ -38,6 +38,7 @@ export declare const Select: (<T>(__VLS_props: NonNullable<Awaited<typeof __VLS_
         ariaLabelledby?: string;
         ariaDescribedby?: string;
         variant?: import("@ropav/styles").SelectVariants["variant"];
+        size?: import("@ropav/styles").SelectVariants["size"];
         fullWidth?: boolean;
         onChange?: ((value: import("../../index.js").SelectedValue) => any) | undefined;
         onFocusChange?: ((isFocused: boolean) => any) | undefined;
@@ -140,6 +141,7 @@ export declare const Select: (<T>(__VLS_props: NonNullable<Awaited<typeof __VLS_
             ariaLabelledby?: string;
             ariaDescribedby?: string;
             variant?: import("@ropav/styles").SelectVariants["variant"];
+            size?: import("@ropav/styles").SelectVariants["size"];
             fullWidth?: boolean;
             onChange?: ((value: import("../../index.js").SelectedValue) => any) | undefined;
             onFocusChange?: ((isFocused: boolean) => any) | undefined;
@@ -205,5 +207,6 @@ export { SelectIndicator, SelectPopover, SelectRoot, SelectTrigger, SelectValue
 export type { SelectIndicatorProps, SelectPopoverProps, SelectRootProps, SelectRootProps as SelectProps, SelectRootSlotProps, SelectTriggerProps, SelectValueProps, SelectValueSlotProps, } from "./select.types.js";
 export { useSelectContext } from "./select.context.js";
 export type { SelectContext } from "./select.context.js";
+export type { UseSelectReturn } from "../../composables/use-select.js";
 export { selectVariants } from "@ropav/styles";
 export type { SelectVariants } from "@ropav/styles";

package/dist/components/select/select-hidden-select.js

@@ -51,7 +51,7 @@ var select_hidden_select_vue_vue_type_script_setup_true_vapor_true_lang_default
 			return (Array.isArray(current) ? current : [current]).map(String);
 		});
 		const value = computed(() => isMultiple.value ? values.value : values.value[0] ?? "");
-		useFormReset(element, state.defaultValue, state.setValue);
+		useFormReset(element, state.defaultValue, state.setValue, () => props.form);
 		useFormValidation(element, state, { focus: () => select.triggerElement.value?.focus() });
 		const defaultValues = computed(() => {
 			const initial = state.defaultValue.value;

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

@@ -63,6 +63,7 @@ var select_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PU
 		ariaLabelledby: {},
 		ariaDescribedby: {},
 		variant: {},
+		size: {},
 		fullWidth: {
 			type: Boolean,
 			default: void 0
@@ -129,6 +130,7 @@ var select_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PU
 		});
 		const styles = computed(() => selectVariants({
 			fullWidth: props.fullWidth,
+			size: props.size,
 			variant: props.variant
 		}));
 		provideFieldIdsContext(select.fieldIds.context);

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

@@ -60,6 +60,8 @@ 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" */
+    size?: SelectVariants["size"];
     fullWidth?: boolean;
 }
 export interface SelectRootSlotProps {