ropav 0.2.0 → 0.3.0

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

@@ -0,0 +1,129 @@
+import { useFormReset } from "../../composables/use-form-reset.js";
+import { useFormValidation } from "../../composables/use-form-validation.js";
+import { visuallyHiddenStyle } from "../../utils/visually-hidden.js";
+import { useSelectContext } from "./select.context.js";
+import { child, computed, createFor, defineVaporComponent, on, renderEffect, setAttr, setInsertionState, setProp, setStyle, setTemplateRefBinding, setText, setValue, shallowRef, template, toDisplayString, txt, unref, watch } from "vue";
+//#region src/components/select/select-hidden-select.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<option> ");
+var t1 = template("<div aria-hidden=true data-a11y-ignore=aria-hidden-focus data-react-aria-prevent-focus=true><label><select tabindex=-1><option label=\"\xA0\" value>\xA0</option>", 1);
+/**
+* A native `<select>`, out of sight, so a form can submit the value and the browser can autofill.
+*
+* Ported from React Aria's `HiddenSelect`. It is clipped rather than hidden: Safari refuses to
+* autofill a `display: none` control, and Firefox needs the `<label>` around it to identify what
+* it is. Hidden from assistive technology instead, and taken out of the tab order — the trigger
+* is what a user reaches.
+*/
+var select_hidden_select_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "select-hidden-select",
+	props: {
+		name: { default: void 0 },
+		form: { default: void 0 },
+		autocomplete: { default: void 0 },
+		isDisabled: {
+			type: Boolean,
+			default: void 0
+		},
+		isRequired: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const { select, state } = useSelectContext();
+		/** Fixed rather than absolute, so the control cannot add scroll to the page. */
+		const style = {
+			...visuallyHiddenStyle,
+			left: 0,
+			position: "fixed",
+			top: 0
+		};
+		const element = shallowRef(null);
+		const setElement = (next) => {
+			element.value = next instanceof HTMLSelectElement ? next : null;
+		};
+		const isMultiple = computed(() => state.selectionMode.value === "multiple");
+		const keys = computed(() => [...state.collection.orderedKeys()]);
+		const values = computed(() => {
+			const current = state.value.value;
+			if (current == null) return [];
+			return (Array.isArray(current) ? current : [current]).map(String);
+		});
+		const value = computed(() => isMultiple.value ? values.value : values.value[0] ?? "");
+		useFormReset(element, state.defaultValue, state.setValue);
+		useFormValidation(element, state, { focus: () => select.triggerElement.value?.focus() });
+		const defaultValues = computed(() => {
+			const initial = state.defaultValue.value;
+			if (initial == null) return [];
+			return (Array.isArray(initial) ? initial : [initial]).map(String);
+		});
+		/**
+		* The chosen options are written onto the element by hand, every time either side moves.
+		*
+		* Two halves, and both are needed. `selected` is the live state, which a binding could carry —
+		* except the browser owns the control once it exists, so it is written here alongside everything
+		* else. `defaultSelected` is the `selected` **attribute**, and it is the half a form reset reads:
+		* the browser restores each option's *default* selectedness, so without it a reset lands on the
+		* blank leading option and the form would submit nothing while the trigger still showed a value.
+		*
+		* Re-asserting after the `reset` event does not stand in for it: a reset from a real click drains
+		* microtasks *between* dispatching the event and restoring the controls, so a post-flush write is
+		* overwritten — the exact shape that leaves a script-driven test green while the real thing is
+		* broken.
+		*/
+		watch([
+			element,
+			value,
+			keys,
+			defaultValues
+		], ([control]) => {
+			if (!control) return;
+			const chosen = new Set(values.value);
+			const initial = new Set(defaultValues.value);
+			for (const option of control.options) {
+				option.defaultSelected = initial.has(option.value);
+				if (isMultiple.value) option.selected = chosen.has(option.value);
+			}
+			if (!isMultiple.value) control.value = values.value[0] ?? "";
+		}, {
+			flush: "post",
+			immediate: true
+		});
+		const onChange = (event) => {
+			const control = event.target;
+			if (control.multiple) {
+				state.setValue([...control.selectedOptions].map((option) => option.value));
+				return;
+			}
+			state.setValue(control.value === "" ? null : control.value);
+		};
+		const n4 = t1();
+		const n3 = child(child(n4));
+		renderEffect(() => {
+			const _props = props;
+			setStyle(n4, style);
+			setProp(n3, "autocomplete", _props.autocomplete);
+			setProp(n3, "disabled", _props.isDisabled || void 0);
+			setAttr(n3, "form", _props.form);
+			setProp(n3, "multiple", isMultiple.value || void 0);
+			setProp(n3, "name", _props.name);
+			setProp(n3, "required", unref(state).validationBehavior.value === "native" && _props.isRequired || void 0);
+		});
+		setInsertionState(n3, 1);
+		createFor(() => keys.value, (_for_item0) => {
+			const n2 = t0();
+			const x2 = txt(n2);
+			renderEffect(() => {
+				setValue(n2, String(_for_item0.value));
+				setText(x2, toDisplayString(unref(state).collection.getItem(_for_item0.value)?.textValue() ?? ""));
+			});
+			return n2;
+		}, (key) => key, 8);
+		on(n3, "change", onChange);
+		setTemplateRefBinding(n3, () => setElement);
+		return n4;
+	}
+});
+//#endregion
+export { select_hidden_select_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/select/select-hidden-select.vue.d.vue.ts

@@ -0,0 +1,24 @@
+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<{
+        name?: string;
+        form?: string;
+        autocomplete?: string;
+        isDisabled?: boolean;
+        isRequired?: boolean;
+    }> & (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/select/select-indicator.js

@@ -0,0 +1,42 @@
+import { composeSlotClassName } from "../../utils/compose.js";
+import { dataAttr } from "../../utils/assertion.js";
+import icon_chevron_down_default from "../icons/icon-chevron-down.js";
+import { useSelectContext } from "./select.context.js";
+import { computed, createComponent, createIf, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, template, unref, useSlots } from "vue";
+//#region src/components/select/select-indicator.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<span>", 1);
+var select_indicator_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "select-indicator",
+	props: { class: {} },
+	setup(__props) {
+		const props = __props;
+		const { slots, state } = useSelectContext();
+		const callerSlots = useSlots();
+		/**
+		* Which `data-slot` this carries, which the stylesheet reads: only the built-in chevron is given
+		* a size, since a glyph of its own brings one.
+		*
+		* Read off whether a slot was handed over at all, never by running it: presence is knowable in
+		* vapor, contents are not. Branching on it also keeps the built-in icon out of `<slot>` fallback
+		* content, which drops the slots of components a VDOM host nests inside.
+		*/
+		const hasSlot = computed(() => Boolean(callerSlots["default"]));
+		const dataSlot = computed(() => hasSlot.value ? "select-indicator" : "select-default-indicator");
+		const styles = computed(() => composeSlotClassName(slots.value.indicator, props.class));
+		const n5 = t0();
+		renderEffect(() => {
+			setClass(n5, styles.value);
+			setAttr(n5, "data-open", unref(dataAttr)(unref(state).isOpen.value));
+			setAttr(n5, "data-slot", dataSlot.value);
+		});
+		setInsertionState(n5);
+		createIf(() => hasSlot.value, () => {
+			return createSlot();
+		}, () => {
+			return createComponent(unref(icon_chevron_down_default));
+		}, 261);
+		return n5;
+	}
+});
+//#endregion
+export { select_indicator_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/select/select-indicator.vue.d.vue.ts

@@ -0,0 +1,21 @@
+import type { SelectIndicatorProps } from "./select.types";
+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<SelectIndicatorProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: () => 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/select/select-popover.js

@@ -0,0 +1,53 @@
+import { createOverlaySlotContexts, provideOverlaySlotContexts } from "../overlay/overlay-slots.js";
+import overlay_popover_default from "../overlay/overlay-popover.js";
+import { useSelectContext } from "./select.context.js";
+import { computed, createComponent, createSlot, defineVaporComponent, extend, unref } from "vue";
+//#region src/components/select/select-popover.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var select_popover_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "select-popover",
+	props: {
+		class: {},
+		placement: { default: "bottom" },
+		offset: {},
+		crossOffset: {},
+		shouldFlip: {
+			type: Boolean,
+			default: void 0
+		},
+		containerPadding: {},
+		arrowBoundaryOffset: {},
+		isKeyboardDismissDisabled: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const { slots } = useSelectContext();
+		/**
+		* Owned here rather than by the overlay itself.
+		*
+		* The listbox is handed to this component and forwarded through its slot, so it resolves its
+		* contexts against this component and not against the overlay that teleports it.
+		*/
+		const contexts = createOverlaySlotContexts();
+		provideOverlaySlotContexts(contexts);
+		const styles = computed(() => slots.value.popover({ class: props.class }));
+		return createComponent(unref(overlay_popover_default), {
+			"arrow-boundary-offset": () => props.arrowBoundaryOffset,
+			class: () => styles.value,
+			"container-padding": () => props.containerPadding,
+			"cross-offset": () => props.crossOffset,
+			"data-slot": "select-popover",
+			"is-keyboard-dismiss-disabled": () => props.isKeyboardDismissDisabled,
+			offset: () => props.offset,
+			placement: () => props.placement,
+			"should-flip": () => props.shouldFlip,
+			"slot-contexts": () => unref(contexts)
+		}, extend(() => {
+			return createSlot("default", null, null, 36);
+		}, { _: 8 }), true);
+	}
+});
+//#endregion
+export { select_popover_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/select/select-popover.vue.d.vue.ts

@@ -0,0 +1,21 @@
+import type { SelectPopoverProps } from "./select.types";
+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<SelectPopoverProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: () => 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/select/select-root.js

@@ -0,0 +1,202 @@
+import { dataAttr } from "../../utils/assertion.js";
+import { providePressResponder } from "../../composables/press-responder.js";
+import { provideOverlayTargetContext } from "../overlay/overlay.context.js";
+import { provideFieldIdsContext } from "../../composables/use-field-ids.js";
+import { useSelectState } from "../../composables/use-select-state.js";
+import { provideListBoxStateContext } from "../list-box/list-box.context.js";
+import { useLocale } from "../../composables/use-locale.js";
+import { useLocalizedStringFormatter } from "../../composables/use-localized-string-formatter.js";
+import { useSelect } from "../../composables/use-select.js";
+import { selectStrings } from "../../i18n/select.js";
+import { provideFieldErrorContext } from "../field-error/field-error.context.js";
+import { provideSelectContext } from "./select.context.js";
+import select_hidden_select_default from "./select-hidden-select.js";
+import { computed, createComponent, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, template, unref } from "vue";
+import { selectVariants } from "@ropav/styles";
+//#region src/components/select/select-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-slot=select>", 1);
+var select_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "select-root",
+	props: {
+		class: {},
+		items: {},
+		itemKey: {},
+		itemTextValue: {},
+		itemDisabled: {},
+		selectionMode: {},
+		value: {},
+		defaultValue: {},
+		isOpen: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultOpen: { type: Boolean },
+		shouldCloseOnSelect: {
+			type: Boolean,
+			default: void 0
+		},
+		allowsEmptyCollection: {
+			type: Boolean,
+			default: void 0
+		},
+		disabledKeys: {},
+		disabledBehavior: {},
+		isDisabled: {
+			type: Boolean,
+			default: void 0
+		},
+		isRequired: {
+			type: Boolean,
+			default: void 0
+		},
+		isInvalid: {
+			type: Boolean,
+			default: void 0
+		},
+		validate: {},
+		validationBehavior: {},
+		name: {},
+		form: {},
+		autoComplete: {},
+		placeholder: {},
+		ariaLabel: {},
+		ariaLabelledby: {},
+		ariaDescribedby: {},
+		variant: {},
+		fullWidth: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	emits: [
+		"change",
+		"update:value",
+		"openChange",
+		"update:isOpen",
+		"focusChange"
+	],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const state = useSelectState({
+			allowsEmptyCollection: () => props.allowsEmptyCollection,
+			defaultOpen: props.defaultOpen,
+			defaultValue: props.defaultValue,
+			disabledBehavior: () => props.disabledBehavior,
+			disabledKeys: () => props.disabledKeys,
+			isInvalid: () => props.isInvalid,
+			isOpen: () => props.isOpen,
+			itemDisabled: props.itemDisabled,
+			itemKey: props.itemKey,
+			items: () => props.items,
+			itemTextValue: props.itemTextValue,
+			name: () => props.name,
+			onChange: (value) => {
+				emit("change", value);
+				emit("update:value", value);
+			},
+			onOpenChange: (isOpen) => {
+				emit("openChange", isOpen);
+				emit("update:isOpen", isOpen);
+			},
+			selectionMode: () => props.selectionMode,
+			shouldCloseOnSelect: () => props.shouldCloseOnSelect,
+			validate: () => props.validate,
+			validationBehavior: () => props.validationBehavior,
+			value: () => props.value
+		});
+		const select = useSelect({
+			ariaDescribedby: () => props.ariaDescribedby,
+			ariaLabel: () => props.ariaLabel,
+			ariaLabelledby: () => props.ariaLabelledby,
+			isDisabled: () => props.isDisabled,
+			isRequired: () => props.isRequired,
+			onFocusChange: (isFocused) => emit("focusChange", isFocused)
+		}, state);
+		const strings = useLocalizedStringFormatter(selectStrings);
+		const locale = useLocale();
+		const placeholder = computed(() => props.placeholder ?? strings.value.format("selectPlaceholder"));
+		/**
+		* The chosen options' text, joined the way the locale joins a list.
+		*
+		* `Intl.ListFormat` rather than `", "`, exactly as upstream: English wants "A, B, and C" and most
+		* languages want something else entirely, none of which a hard-coded separator produces.
+		*/
+		const selectedText = computed(() => {
+			const texts = state.selectedItems.value.map((item) => item.textValue);
+			if (state.selectionMode.value === "single") return texts[0] ?? "";
+			return new Intl.ListFormat(locale.value.locale).format(texts);
+		});
+		const styles = computed(() => selectVariants({
+			fullWidth: props.fullWidth,
+			variant: props.variant
+		}));
+		provideFieldIdsContext(select.fieldIds.context);
+		provideFieldErrorContext({ validation: state.displayValidation });
+		provideSelectContext({
+			placeholder,
+			select,
+			selectedItems: state.selectedItems,
+			selectedText,
+			slots: styles,
+			state
+		});
+		/**
+		* The listbox in the popover runs on this select's state rather than one of its own.
+		*
+		* That is the whole arrangement: the select owns the collection because it has to answer for the
+		* options while the popover does not exist, and the listbox borrows it when it appears.
+		*/
+		provideListBoxStateContext({
+			autoFocus: () => state.focusStrategy.value ?? true,
+			collection: state.collection,
+			labelledBy: () => select.labelledBy.value,
+			listId: () => select.listId.value,
+			selection: state.selection,
+			shouldFocusOnHover: true
+		});
+		provideOverlayTargetContext({
+			autoFocus: computed(() => state.focusStrategy.value ?? true),
+			closeAll: state.close,
+			isNonModal: false,
+			labelledBy: select.labelledBy,
+			overlayId: select.listId,
+			placement: "bottom start",
+			state,
+			trigger: "Select",
+			triggerElement: select.triggerElement
+		});
+		providePressResponder(select.responder);
+		const n2 = t0();
+		renderEffect(() => {
+			const _props = props;
+			const _dataAttr = unref(dataAttr);
+			const _state = unref(state);
+			setClass(n2, styles.value.base({ class: _props.class }));
+			setAttr(n2, "data-disabled", _dataAttr(_props.isDisabled));
+			setAttr(n2, "data-focused", _dataAttr(_state.isFocused.value));
+			setAttr(n2, "data-invalid", _dataAttr(unref(select).isInvalid.value));
+			setAttr(n2, "data-open", _dataAttr(_state.isOpen.value));
+			setAttr(n2, "data-required", _dataAttr(_props.isRequired));
+		});
+		setInsertionState(n2);
+		createSlot("default", {
+			isDisabled: () => Boolean(props.isDisabled),
+			isFocused: () => unref(state).isFocused.value,
+			isInvalid: () => unref(select).isInvalid.value,
+			isOpen: () => unref(state).isOpen.value,
+			isRequired: () => Boolean(props.isRequired)
+		});
+		setInsertionState(n2, 1);
+		createComponent(select_hidden_select_default, {
+			autocomplete: () => props.autoComplete,
+			form: () => props.form,
+			"is-disabled": () => props.isDisabled,
+			"is-required": () => props.isRequired,
+			name: () => props.name
+		});
+		return n2;
+	}
+});
+//#endregion
+export { select_root_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/select/select-root.vue.d.vue.ts

@@ -0,0 +1,28 @@
+import type { SelectedValue } from "../../composables/use-select-state";
+import type { SelectRootProps, SelectRootSlotProps } from "./select.types";
+declare const __VLS_export: <T>(__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<SelectRootProps<T> & {
+        onChange?: ((value: SelectedValue) => any) | undefined;
+        onFocusChange?: ((isFocused: boolean) => any) | undefined;
+        onOpenChange?: ((isOpen: boolean) => any) | undefined;
+        "onUpdate:isOpen"?: ((isOpen: boolean) => any) | undefined;
+        "onUpdate:value"?: ((value: SelectedValue) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: SelectRootSlotProps) => unknown;
+    };
+    emit: ((evt: "change", value: SelectedValue) => void) & ((evt: "focusChange", isFocused: boolean) => void) & ((evt: "openChange", isOpen: boolean) => void) & ((evt: "update:isOpen", isOpen: boolean) => void) & ((evt: "update:value", value: SelectedValue) => 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/select/select-trigger.js

@@ -0,0 +1,71 @@
+import { dataAttr } from "../../utils/assertion.js";
+import { useInteractionStates } from "../../composables/use-interaction-states.js";
+import { composePressResponder, usePressResponder } from "../../composables/press-responder.js";
+import { useSelectContext } from "./select.context.js";
+import { computed, createSlot, defineVaporComponent, on, renderEffect, setDynamicProps, setInsertionState, setTemplateRefBinding, template, unref } from "vue";
+//#region src/components/select/select-trigger.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<button>", 1);
+var select_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "select-trigger",
+	props: { class: {} },
+	setup(__props) {
+		const props = __props;
+		const { select, slots, state } = useSelectContext();
+		const responder = usePressResponder();
+		const { isFocusVisible, isFocused, isHovered, onBlur, onFocus, onPointerenter, onPointerleave } = useInteractionStates({ isDisabled: () => Boolean(select.triggerAttributes.value["disabled"]) });
+		const styles = computed(() => slots.value.trigger({ class: props.class }));
+		const setElement = (element) => {
+			responder?.registerElement(element ?? null);
+		};
+		const press = composePressResponder(responder);
+		const onTriggerFocus = () => {
+			onFocus();
+			select.onFocus();
+		};
+		const onTriggerBlur = () => {
+			onBlur();
+			select.onBlur();
+		};
+		/**
+		* The select's own keys come first, and the press responder only sees what is left.
+		*
+		* `useSelect` claims the inline arrows and the type-to-choose characters while the popover is
+		* shut, and hands everything else — Enter, Space, ArrowDown, ArrowUp — on to the responder that
+		* opens the popover.
+		*/
+		const onKeydown = (event) => {
+			select.onKeydown(event);
+		};
+		const n1 = t0();
+		renderEffect(() => {
+			const _dataAttr = unref(dataAttr);
+			setDynamicProps(n1, [{
+				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": "select-trigger",
+				tabindex: "0"
+			}, unref(select).triggerAttributes.value]);
+		});
+		setInsertionState(n1);
+		createSlot();
+		on(n1, "blur", onTriggerBlur);
+		on(n1, "click", (e) => unref(press).onClick(e));
+		on(n1, "dragstart", (e) => unref(press).onDragstart(e));
+		on(n1, "focus", onTriggerFocus);
+		on(n1, "keydown", onKeydown);
+		on(n1, "keydown", (e) => unref(select).onKeydownCapture(e), { capture: true });
+		on(n1, "mousedown", (e) => unref(press).onMousedown(e));
+		on(n1, "pointerdown", (e) => unref(press).onPointerdown(e));
+		on(n1, "pointerenter", (e) => unref(onPointerenter)(e));
+		on(n1, "pointerleave", (e) => unref(onPointerleave)(e));
+		on(n1, "pointerup", (e) => unref(press).onPointerup(e));
+		setTemplateRefBinding(n1, () => setElement);
+		return n1;
+	}
+});
+//#endregion
+export { select_trigger_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/select/select-trigger.vue.d.vue.ts

@@ -0,0 +1,21 @@
+import type { SelectTriggerProps } from "./select.types";
+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<SelectTriggerProps> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: () => 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/select/select-value.js

@@ -0,0 +1,55 @@
+import { dataAttr } from "../../utils/assertion.js";
+import { useSelectContext } from "./select.context.js";
+import { computed, createIf, createSlot, defineVaporComponent, renderEffect, setAttr, setClass, setInsertionState, setProp, setText, template, toDisplayString, unref, useSlots } from "vue";
+//#region src/components/select/select-value.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template(" ");
+var t1 = template("<span data-slot=select-value>", 1);
+var select_value_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "select-value",
+	props: { class: {} },
+	setup(__props) {
+		const props = __props;
+		/**
+		* The slot is what rich content in the trigger goes through.
+		*
+		* The React build renders the chosen option's own markup here a second time. A slot's content
+		* belongs to whoever wrote it in vapor, so `Select.Value` cannot ask an option to render itself
+		* again — it shows the option's text by default, and anything more is written here, with the
+		* same values React hands its render function.
+		*/
+		const { placeholder, select, selectedItems, selectedText, slots } = useSelectContext();
+		const callerSlots = useSlots();
+		/**
+		* Whether the caller wrote a slot at all, read off its presence and never by running it.
+		*
+		* The default cannot be `<slot>` fallback content: a slot given content by a VDOM host drops the
+		* *nested* components' own slots on the first render when a fallback is declared beside them — a
+		* chip in the trigger comes out as an empty chip. Branching on presence keeps both paths intact.
+		*/
+		const hasSlot = computed(() => Boolean(callerSlots["default"]));
+		const isPlaceholder = computed(() => selectedItems.value.length === 0);
+		const styles = computed(() => slots.value.value({ class: props.class }));
+		const n5 = t1();
+		renderEffect(() => {
+			setProp(n5, "id", unref(select).valueId.value);
+			setClass(n5, styles.value);
+			setAttr(n5, "data-placeholder", unref(dataAttr)(isPlaceholder.value));
+		});
+		setInsertionState(n5);
+		createIf(() => hasSlot.value, () => {
+			return createSlot("default", {
+				isPlaceholder: () => isPlaceholder.value,
+				placeholder: () => unref(placeholder),
+				selectedItems: () => unref(selectedItems),
+				selectedText: () => unref(selectedText)
+			});
+		}, () => {
+			const n4 = t0();
+			renderEffect(() => setText(n4, toDisplayString(isPlaceholder.value ? unref(placeholder) : unref(selectedText))));
+			return n4;
+		}, 261);
+		return n5;
+	}
+});
+//#endregion
+export { select_value_vue_vue_type_script_setup_true_vapor_true_lang_default as default };