ropav 0.2.0 → 0.3.0

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

@@ -0,0 +1,359 @@
+import { dataAttr } from "../../utils/assertion.js";
+import { useId as useId$1 } from "../../composables/use-id.js";
+import { useCollection } from "../../composables/use-collection.js";
+import { createListCollection } from "../../utils/virtualizer-collection.js";
+import { useSelectionManager } from "../../composables/use-selection-manager.js";
+import { provideListBoxContext, useListBoxStateContext } from "./list-box.context.js";
+import { provideVirtualizerStateContext, useVirtualizerConfigContext } from "../virtualizer/virtualizer.context.js";
+import virtualizer_item_default from "../virtualizer/virtualizer-item.js";
+import list_box_drop_indicator_default from "./list-box-drop-indicator.js";
+import { toDragCollection } from "../../composables/drag-collection.js";
+import { useCollectionAutoFocus } from "../../composables/use-collection-auto-focus.js";
+import { useDndPersistedKeys } from "../../composables/use-dnd-persisted-keys.js";
+import { useListKeyboard } from "../../composables/use-list-keyboard.js";
+import { useTypeahead } from "../../composables/use-typeahead.js";
+import { useVirtualizer } from "../../composables/use-virtualizer.js";
+import { useVirtualizerScroll } from "../../composables/use-virtualizer-scroll.js";
+import { provideSeparatorContext } from "../separator/separator.context.js";
+import { computed, createComponent, createFor, createIf, createSlot, defineVaporComponent, extend, on, onScopeDispose, renderEffect, setAttr, setClass, setInsertionState, setProp, setStaticTemplateRef, setStyle, shallowRef, template, toValue, unref, useSlots } from "vue";
+import { listboxVariants } from "@ropav/styles";
+//#region src/components/list-box/list-box-root.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div role=presentation>");
+var t1 = template("<div aria-orientation=vertical data-layout=stack data-orientation=vertical data-slot=list-box role=listbox>", 1);
+/** Stands in while a virtualized listbox has no data yet, so the layout has something to read. */
+var list_box_root_vue_vue_type_script_setup_true_vapor_true_lang_default = /*@__PURE__*/ defineVaporComponent({
+	__name: "list-box-root",
+	props: {
+		class: {},
+		items: {},
+		itemKey: { type: Function },
+		itemTextValue: { type: Function },
+		selectionMode: {},
+		selectionBehavior: {},
+		selectedKeys: {},
+		defaultSelectedKeys: {},
+		disabledKeys: {},
+		disabledBehavior: {},
+		disallowEmptySelection: { type: Boolean },
+		variant: {},
+		dragAndDropHooks: {}
+	},
+	emits: [
+		"action",
+		"selectionChange",
+		"update:selectedKeys"
+	],
+	setup(__props, { emit: __emit }) {
+		const EMPTY_COLLECTION = createListCollection({ items: [] });
+		const props = __props;
+		const emit = __emit;
+		const callerSlots = useSlots();
+		/**
+		* A node's datum, back as the item type it came in as.
+		*
+		* `VirtualizerNode.content` is `unknown` on purpose — the virtualizer carries data it never looks
+		* at, and the same layout serves a table. This listbox is the one place that knows better: it
+		* built the collection out of its own `items`, so naming `T` here restates what went in.
+		*/
+		const itemOf = (node) => node?.content;
+		const styles = computed(() => listboxVariants({
+			class: props.class,
+			variant: props.variant
+		}));
+		/**
+		* The state this listbox runs on, which is not always its own.
+		*
+		* A picker above owns the collection and the selection, because it has to answer for them while
+		* the listbox does not exist — the value in its trigger, the options in its hidden control. When
+		* one is there the listbox borrows it whole rather than keeping a second copy that would drift.
+		*/
+		const owner = useListBoxStateContext();
+		const ownListId = useId$1();
+		const collectionId = useId$1();
+		const listId = computed(() => toValue(owner?.listId) ?? ownListId.value);
+		const labelledBy = computed(() => toValue(owner?.labelledBy));
+		const ownerAriaLabel = computed(() => toValue(owner?.ariaLabel));
+		const shouldFocusOnHover = computed(() => Boolean(toValue(owner?.shouldFocusOnHover)));
+		/**
+		* Whether the caret stays outside the listbox while the arrows drive it.
+		*
+		* Only an owner can turn this on, because only an owner has a control to keep the caret in.
+		*/
+		const shouldUseVirtualFocus = computed(() => Boolean(toValue(owner?.shouldUseVirtualFocus)));
+		const element = shallowRef(null);
+		const virtualizerConfig = useVirtualizerConfigContext();
+		/**
+		* The collection built from data rather than from what rendered.
+		*
+		* Only when both halves are there: data on this listbox, and a `Virtualizer` above it. Data
+		* without a virtualizer would mean rendering every item anyway, which is what the plain slot
+		* already does.
+		*/
+		const source = computed(() => {
+			if (!virtualizerConfig || !props.items) return null;
+			return createListCollection({
+				getKey: props.itemKey,
+				getTextValue: props.itemTextValue,
+				items: props.items
+			});
+		});
+		const isVirtualized = computed(() => source.value != null);
+		const collection = owner?.collection ?? useCollection({ source: () => source.value });
+		const selection = owner?.selection ?? useSelectionManager({
+			collection,
+			defaultSelectedKeys: props.defaultSelectedKeys,
+			disabledBehavior: () => props.disabledBehavior,
+			disabledKeys: () => props.disabledKeys,
+			disallowEmptySelection: () => props.disallowEmptySelection,
+			onSelectionChange: (keys) => {
+				emit("selectionChange", keys);
+				emit("update:selectedKeys", keys);
+			},
+			selectedKeys: () => props.selectedKeys,
+			selectionBehavior: () => props.selectionBehavior,
+			selectionMode: () => props.selectionMode
+		});
+		const onAction = (key) => emit("action", key);
+		/**
+		* Both halves are opt-in, and the hooks only exist when the caller asked for them.
+		*
+		* Reading them off `dragAndDropHooks` rather than importing them is what keeps the whole drag and
+		* drop layer out of a listbox that does not use it.
+		*
+		* Split in two: the state is built here because the persisted keys are derived from it and the
+		* virtualizer needs those, while the hooks that *use* the state need the keyboard delegate and so
+		* have to wait until below it.
+		*/
+		const dnd = props.dragAndDropHooks;
+		const dragCollection = toDragCollection(collection);
+		const dragState = dnd?.useDraggableCollectionState?.({
+			collection: dragCollection,
+			getAllowedDropOperations: dnd.options.getAllowedDropOperations,
+			getItems: (keys) => dnd.options.getItems?.(keys) ?? [],
+			isDisabled: dnd.options.isDisabled,
+			onDragEnd: (event) => dnd.options.onDragEnd?.(event),
+			onDragStart: (event) => dnd.options.onDragStart?.(event),
+			selectionManager: selection
+		});
+		const dropState = dnd?.useDroppableCollectionState?.({
+			...dnd.options,
+			collection: dragCollection,
+			selectionManager: selection
+		});
+		/**
+		* The keys kept rendered wherever they are.
+		*
+		* The focused key always, exactly as React Aria does — the roving tab stop lives on that element,
+		* and letting it leave the DOM drops focus to the document. During a keyboard or screen reader
+		* drag the drop target joins it, because that one is reached by pressing a key rather than by
+		* scrolling to it. Selected keys are deliberately *not* kept: React does not keep them either.
+		*/
+		const persistedKeys = useDndPersistedKeys(() => selection.focusedKey.value, dnd, dropState);
+		const virtualizer = virtualizerConfig ? useVirtualizer({
+			collection: () => source.value ?? EMPTY_COLLECTION,
+			layout: () => virtualizerConfig.layout.value,
+			layoutOptions: () => virtualizerConfig.layoutOptions.value,
+			persistedKeys: () => persistedKeys.value
+		}) : null;
+		const scroll = virtualizer && useVirtualizerScroll({
+			contentSize: () => virtualizer.contentSize.value,
+			element,
+			isScrolling: () => virtualizer.isScrolling.value,
+			onScrollEnd: virtualizer.endScrolling,
+			onScrollStart: virtualizer.startScrolling,
+			onSizeChange: virtualizer.setSize,
+			onVisibleRectChange: virtualizer.setVisibleRect
+		});
+		/**
+		* Paging asks the layout where the rows are, not the DOM.
+		*
+		* `PageDown` in a virtualized listbox has to move by a viewport of *collection*, and most of
+		* that viewport is not rendered. Without a virtualizer above, there is no delegate and paging
+		* measures elements as before.
+		*/
+		const keyboardLayout = computed(() => virtualizer ? {
+			getContentSize: () => virtualizer.contentSize.value,
+			getItemRect: (key) => virtualizer.getLayoutInfo(key)?.rect ?? null,
+			getVisibleRect: () => virtualizer.visibleRect.value
+		} : null);
+		const keyboard = useListKeyboard({
+			collection,
+			element,
+			layoutDelegate: () => keyboardLayout.value,
+			listId,
+			onAction,
+			selection,
+			shouldUseVirtualFocus
+		});
+		/**
+		* A press on the listbox itself — its padding, or its scrollbar — must not move focus.
+		*
+		* The browser's default for a mousedown is to focus what was pressed, and the gap between two
+		* options is the listbox. Where the caret belongs to a control outside the collection that takes it
+		* away: the field's ring drops, and it reads the blur as the user leaving, so the popover flickers
+		* or closes on a press that hit nothing. Ported from React Aria's `useSelectableCollection`, which
+		* guards the same way and for the same reason, and only when the press landed on this element
+		* rather than travelling up from an option that wants the focus.
+		*/
+		const onMousedown = (event) => {
+			if (event.target === element.value) event.preventDefault();
+		};
+		if (owner?.registerKeyboard) {
+			owner.registerKeyboard(keyboard);
+			onScopeDispose(() => owner.registerKeyboard?.(null));
+		}
+		if (dnd && dragState) dnd.useDraggableCollection?.(dragState, element);
+		/**
+		* The pointer half of dropping, attached statically below.
+		*
+		* A keyboard drag runs through the session's own document listeners, so it works without these;
+		* a pointer drag reaches nothing but the element's own `dragover`, and has to be given them.
+		*/
+		let droppable;
+		if (dnd && dropState) {
+			/**
+			* Which delegate resolves a pointer position.
+			*
+			* The DOM-based one searches for elements, and outside the window there are none — so a
+			* virtualized list asks its layout instead, which knows where every item *would* be. The
+			* layout only answers when it implements the method, so one without drag and drop support
+			* falls back.
+			*/
+			const dropLayout = virtualizerConfig?.layout.value;
+			const pointerDelegate = dropLayout?.getDropTargetFromPoint != null ? dropLayout : new dnd.ListDropTargetDelegate(dragCollection, element, {
+				layout: "stack",
+				orientation: "vertical"
+			});
+			droppable = dnd.useDroppableCollection?.({
+				...dnd.options,
+				dropTargetDelegate: dnd.dropTargetDelegate ?? pointerDelegate,
+				keyboardDelegate: keyboard
+			}, dropState, element);
+		}
+		/** Whether the collection as a whole is the current drop target. */
+		const isRootDropTarget = computed(() => dropState?.isDropTarget({ type: "root" }) ?? false);
+		/**
+		* A windowed listbox renders its own drop indicators; a plain one leaves them to the caller.
+		*
+		* Not a second way of doing the same thing — it is the only way. An indicator is positioned
+		* against the item wrappers it sits between, which makes it their **sibling**, and this is the
+		* level that produces them. Markup written in the item slot lands *inside* one wrapper, where an
+		* absolute offset would be measured from the wrong origin and clipped by its overflow.
+		*/
+		const rendersDropIndicators = computed(() => isVirtualized.value && dropState != null);
+		/** The gap after the last item, which no item's own "before" indicator covers. */
+		const lastItemKey = computed(() => collection.getLastKey());
+		provideSeparatorContext({ elementType: "div" });
+		const typeahead = useTypeahead({
+			focusedKey: () => selection.focusedKey.value,
+			getKeyForSearch: keyboard.getKeyForSearch,
+			isDisabled: shouldUseVirtualFocus,
+			onSearchMatch: (key) => keyboard.focusKey(key, { scroll: true })
+		});
+		provideListBoxContext({
+			collection,
+			collectionId,
+			dragAndDropHooks: dnd,
+			dragState,
+			dropState,
+			keyboard,
+			listId,
+			onAction,
+			selection,
+			shouldFocusOnHover,
+			shouldUseVirtualFocus
+		});
+		/**
+		* A listbox owned from above appears already open, so it has to place focus itself.
+		*
+		* One standing on its own is part of the page and never does: taking focus on mount would steal
+		* it from wherever the user actually is.
+		*/
+		if (owner) useCollectionAutoFocus({
+			autoFocus: owner.autoFocus,
+			element,
+			keyboard,
+			selection
+		});
+		if (virtualizer && virtualizerConfig) provideVirtualizerStateContext({
+			getIndex: (key) => collection.getIndex(key),
+			getDropTargetLayoutInfo: virtualizerConfig.layout.value.getDropTargetLayoutInfo?.bind(virtualizerConfig.layout.value),
+			getLayoutInfo: virtualizer.getLayoutInfo,
+			itemCount: computed(() => source.value?.itemCount ?? 0),
+			shouldObserveItemSize: virtualizerConfig.shouldObserveItemSize,
+			updateItemSize: virtualizer.updateItemSize
+		});
+		const onKeydown = (event) => {
+			typeahead.onKeydown(event);
+			if (!event.defaultPrevented) keyboard.onKeydown(event);
+		};
+		const isEmpty = computed(() => collection.size.value === 0);
+		const hasEmptySlot = computed(() => Boolean(callerSlots["empty"]));
+		const n19 = t1();
+		renderEffect(() => {
+			const _selection = unref(selection);
+			const _dataAttr = unref(dataAttr);
+			setProp(n19, "id", listId.value);
+			setAttr(n19, "aria-label", ownerAriaLabel.value);
+			setAttr(n19, "aria-labelledby", labelledBy.value);
+			setAttr(n19, "aria-multiselectable", _selection.selectionMode.value === "multiple" ? true : void 0);
+			setClass(n19, styles.value);
+			setAttr(n19, "data-collection", unref(collectionId));
+			setAttr(n19, "data-drop-target", _dataAttr(isRootDropTarget.value));
+			setAttr(n19, "data-empty", _dataAttr(isEmpty.value));
+			setAttr(n19, "data-focus-visible", _dataAttr(_selection.isFocused.value));
+			setProp(n19, "tabindex", unref(keyboard).collectionTabIndex.value);
+		});
+		setInsertionState(n19);
+		createIf(() => hasEmptySlot.value && isEmpty.value, () => {
+			const n3 = t0();
+			setInsertionState(n3);
+			createSlot("empty");
+			return n3;
+		});
+		setInsertionState(n19, 1);
+		createIf(() => isVirtualized.value, () => {
+			const n16 = t0();
+			renderEffect(() => setStyle(n16, unref(scroll)?.contentStyle.value));
+			setInsertionState(n16);
+			createFor(() => unref(virtualizer)?.visibleViews.value, (_for_item0) => {
+				return [createIf(() => rendersDropIndicators.value, () => {
+					return createComponent(list_box_drop_indicator_default, { target: () => ({
+						dropPosition: "before",
+						key: _for_item0.value.key,
+						type: "item"
+					}) });
+				}, null, 10), createComponent(unref(virtualizer_item_default), { "layout-info": () => _for_item0.value.layoutInfo }, extend(() => {
+					return createSlot("default", {
+						index: () => _for_item0.value.node?.index,
+						item: () => itemOf(_for_item0.value.node)
+					}, null, 36);
+				}, { _: 8 }))];
+			}, (view) => view.key);
+			setInsertionState(n16, 1);
+			createIf(() => rendersDropIndicators.value && lastItemKey.value != null, () => {
+				return createComponent(list_box_drop_indicator_default, { target: () => ({
+					dropPosition: "after",
+					key: lastItemKey.value,
+					type: "item"
+				}) });
+			});
+			return n16;
+		}, () => {
+			return createSlot();
+		}, 1029);
+		on(n19, "dragenter", ($event) => unref(droppable)?.handlers.onDragenter($event));
+		on(n19, "dragleave", ($event) => unref(droppable)?.handlers.onDragleave($event));
+		on(n19, "dragover", ($event) => unref(droppable)?.handlers.onDragover($event));
+		on(n19, "drop", ($event) => unref(droppable)?.handlers.onDrop($event));
+		on(n19, "focusin", (e) => unref(keyboard).onFocusin(e));
+		on(n19, "focusout", (e) => unref(keyboard).onFocusout(e));
+		on(n19, "keydown", onKeydown);
+		on(n19, "keydown", (e) => unref(typeahead).onKeydownCapture(e), { capture: true });
+		on(n19, "mousedown", onMousedown);
+		setStaticTemplateRef(n19, element, null, "element");
+		return n19;
+	}
+});
+//#endregion
+export { list_box_root_vue_vue_type_script_setup_true_vapor_true_lang_default as default };

package/dist/components/list-box/list-box-root.vue.d.vue.ts

@@ -0,0 +1,29 @@
+import type { CollectionKey } from "../../composables/use-collection";
+import type { CollectionSelection } from "../../composables/use-selection-manager";
+import type { ListBoxRootProps, ListBoxRootSlotProps } from "./list-box.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<ListBoxRootProps<T> & {
+        onAction?: ((key: CollectionKey) => any) | undefined;
+        onSelectionChange?: ((keys: CollectionSelection) => any) | undefined;
+        "onUpdate:selectedKeys"?: ((keys: CollectionSelection) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: ListBoxRootSlotProps<T>) => unknown;
+        /** Shown instead of nothing when there is not a single option to show. */
+        empty?: () => unknown;
+    };
+    emit: ((evt: "action", key: CollectionKey) => void) & ((evt: "selectionChange", keys: CollectionSelection) => void) & ((evt: "update:selectedKeys", keys: CollectionSelection) => 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/list-box/list-box.context.d.ts

@@ -0,0 +1,97 @@
+import type { CollectionKey, UseCollectionReturn } from "../../composables/use-collection";
+import type { DragAndDropHooks } from "../../composables/use-drag-and-drop";
+import type { UseDraggableCollectionStateReturn } from "../../composables/use-draggable-collection-state";
+import type { UseDroppableCollectionStateReturn } from "../../composables/use-droppable-collection-state";
+import type { UseListKeyboardReturn } from "../../composables/use-list-keyboard";
+import type { FocusStrategy } from "../../composables/use-overlay-trigger-state";
+import type { UseSelectionManagerReturn } from "../../composables/use-selection-manager";
+import type { ComputedRef, MaybeRefOrGetter } from "vue";
+export interface ListBoxContext {
+    collection: UseCollectionReturn;
+    selection: UseSelectionManagerReturn;
+    keyboard: UseListKeyboardReturn;
+    /** The listbox's own id, which item ids are derived from. */
+    listId: ComputedRef<string>;
+    /** Shared marker so an item can tell which collection it belongs to. */
+    collectionId: ComputedRef<string>;
+    /** Called when an item is activated rather than selected. */
+    onAction?: (key: CollectionKey) => void;
+    /**
+     * Whether hovering an option moves focus to it.
+     *
+     * Off for a listbox standing on its own, on for one inside a picker: there the pointer and the
+     * keyboard drive the same single choice, so the highlight has to follow the mouse or the next
+     * arrow press would jump back to wherever the keyboard left off.
+     */
+    shouldFocusOnHover: ComputedRef<boolean>;
+    /**
+     * Whether focus over the options is nominal rather than real.
+     *
+     * An option cannot read its focus off focus events then — nothing inside ever receives one —
+     * so the focused key is what it has to draw its ring from.
+     */
+    shouldUseVirtualFocus: ComputedRef<boolean>;
+    /**
+     * The drag and drop configuration, when there is any.
+     *
+     * Items read the hooks from here rather than importing them, so a listbox without drag and
+     * drop leaves the whole layer out of the bundle.
+     */
+    dragAndDropHooks?: DragAndDropHooks;
+    dragState?: UseDraggableCollectionStateReturn<unknown>;
+    dropState?: UseDroppableCollectionStateReturn<unknown>;
+}
+/**
+ * Strict: an item, section or indicator outside a listbox has no collection to join and no
+ * selection to read, so it would render something that looks interactive but is not.
+ */
+export declare const useListBoxContext: () => ListBoxContext, provideListBoxContext: (value: ListBoxContext) => ListBoxContext;
+export interface ListBoxStateContext {
+    /** The collection the listbox navigates over, owned by whatever provided this. */
+    collection: UseCollectionReturn;
+    /** The selection the listbox reads and writes. */
+    selection: UseSelectionManagerReturn;
+    /** The listbox's id, so the owner's trigger can point `aria-controls` at it. */
+    listId?: MaybeRefOrGetter<string | undefined>;
+    /** Id of the element naming the listbox, normally the owner's label. */
+    labelledBy?: MaybeRefOrGetter<string | undefined>;
+    /**
+     * A name of the listbox's own, for an owner whose label alone does not say what the list is.
+     *
+     * A combo box's suggestions are one: its label names the *field*, so the list beside it needs to
+     * announce itself as the suggestions for that field rather than as the field a second time.
+     * Rendered alongside `labelledBy`, which is why that one leads with the listbox's own id — an
+     * `aria-label` is dropped outright when `aria-labelledby` is present and does not include it.
+     */
+    ariaLabel?: MaybeRefOrGetter<string | undefined>;
+    /** Where focus lands when the listbox appears, given how its owner was opened. */
+    autoFocus?: MaybeRefOrGetter<boolean | FocusStrategy | undefined>;
+    /** Whether hovering an option moves focus to it. @default false */
+    shouldFocusOnHover?: MaybeRefOrGetter<boolean | undefined>;
+    /**
+     * Whether focus over the options is nominal, because a control beside the listbox holds the
+     * caret and names the focused option with `aria-activedescendant`.
+     * @default false
+     */
+    shouldUseVirtualFocus?: MaybeRefOrGetter<boolean | undefined>;
+    /**
+     * Handed the listbox's keyboard behaviour once the listbox exists, and `null` when it goes away.
+     *
+     * The counterpart of virtual focus: the owner is the one holding the control the arrows are
+     * pressed in, so it needs the behaviour that answers them — but only the listbox can build it,
+     * because only the listbox knows its own element and its own layout. That is what makes paging
+     * and virtualized paging work from outside instead of falling back to the ends of the list.
+     */
+    registerKeyboard?: (keyboard: UseListKeyboardReturn | null) => void;
+}
+/**
+ * A listbox whose state belongs to something above it.
+ *
+ * A picker owns the collection and the selection because it has to answer for them while the
+ * listbox does not exist — the value in its trigger, the options in its hidden native control.
+ * Handing that state down mirrors what React Aria does with `ListStateContext`, and it is what
+ * lets the same `ListBox` component serve both cases.
+ *
+ * Optional, and absent is the ordinary case: a listbox on its own owns everything it needs.
+ */
+export declare const useListBoxStateContext: () => ListBoxStateContext | null, provideListBoxStateContext: (value: ListBoxStateContext | null) => ListBoxStateContext | null;

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

@@ -0,0 +1,24 @@
+import { createContext } from "../../utils/create-context.js";
+//#region src/components/list-box/list-box.context.ts
+/**
+* Strict: an item, section or indicator outside a listbox has no collection to join and no
+* selection to read, so it would render something that looks interactive but is not.
+*/
+var [useListBoxContext, provideListBoxContext] = createContext({ name: "ListBoxContext" });
+/**
+* A listbox whose state belongs to something above it.
+*
+* A picker owns the collection and the selection because it has to answer for them while the
+* listbox does not exist — the value in its trigger, the options in its hidden native control.
+* Handing that state down mirrors what React Aria does with `ListStateContext`, and it is what
+* lets the same `ListBox` component serve both cases.
+*
+* Optional, and absent is the ordinary case: a listbox on its own owns everything it needs.
+*/
+var [useListBoxStateContext, provideListBoxStateContext] = createContext({
+	defaultValue: null,
+	name: "ListBoxStateContext",
+	strict: false
+});
+//#endregion
+export { provideListBoxContext, provideListBoxStateContext, useListBoxContext, useListBoxStateContext };

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

@@ -0,0 +1,70 @@
+import type { CollectionKey } from "../../composables/use-collection";
+import type { DragAndDropHooks } from "../../composables/use-drag-and-drop";
+import type { DisabledBehavior, SelectionBehavior, SelectionMode } from "../../composables/use-selection-manager";
+import type { DropTarget } from "../../utils/dnd-types";
+import type { ListBoxVariants } from "@ropav/styles";
+/**
+ * @typeParam T - The item type, inferred from `items`.
+ *
+ * Vapor costs the type parameter nothing: `vapor` picks which codegen the SFC compiles to, while
+ * `generic` is read by `vue-tsc`, and the two never meet. The emitted `.d.ts` carries `<T>` either
+ * way.
+ */
+export interface ListBoxRootProps<T = unknown> {
+    class?: string;
+    /**
+     * The data to render, for a virtualized listbox.
+     *
+     * Only meaningful inside a `Virtualizer`, which renders a window of the items rather than all
+     * of them. The listbox then calls its default slot once per rendered item.
+     */
+    items?: readonly T[];
+    /** An item's key. Defaults to its own `id`, then `key`, then its index. */
+    itemKey?: (item: T, index: number) => CollectionKey;
+    /**
+     * Text an item is matched on by typeahead.
+     *
+     * A rendered item names itself from its content, as in the React build. This is for the items
+     * that are *not* rendered: typeahead has to reach them, and only the data can answer.
+     */
+    itemTextValue?: (item: T) => string | undefined;
+    /** Whether one, many or no items can be selected. @default "none" */
+    selectionMode?: SelectionMode;
+    /** What a press means when several items can be selected. @default "toggle" */
+    selectionBehavior?: SelectionBehavior;
+    /** Selected keys, for controlled use. */
+    selectedKeys?: "all" | Iterable<CollectionKey>;
+    /** Selected keys the listbox starts with. */
+    defaultSelectedKeys?: "all" | Iterable<CollectionKey>;
+    /** Keys that cannot be selected, and by default cannot be focused either. */
+    disabledKeys?: Iterable<CollectionKey>;
+    /** Whether a disabled key is also unfocusable. @default "all" */
+    disabledBehavior?: DisabledBehavior;
+    /** Whether the listbox must always keep something selected. */
+    disallowEmptySelection?: boolean;
+    /** Visual variant. */
+    variant?: ListBoxVariants["variant"];
+    /** Drag and drop behaviour, from `useDragAndDrop`. */
+    dragAndDropHooks?: DragAndDropHooks;
+}
+export interface ListBoxRootSlotProps<T = unknown> {
+    /** The datum this row was built from, when the listbox is virtualized. */
+    item?: T;
+    /** The row's position among all of them, zero-based. */
+    index?: number;
+}
+export interface ListBoxDropIndicatorProps {
+    /** The position this indicator stands for. */
+    target: DropTarget;
+    class?: string;
+}
+export interface ListBoxLoadMoreItemProps {
+    class?: string;
+    /** Whether the next page is on its way, which is when the indicator row is rendered. */
+    isLoading?: boolean;
+    /**
+     * How far from the end of the scroll box loading starts, as a multiple of the box's own height.
+     * `1` is one screen ahead; `0` waits until the very end comes into view. @default 1
+     */
+    scrollOffset?: number;
+}

package/dist/components/list-box-item/index.d.ts

@@ -0,0 +1,80 @@
+import ListBoxItemIndicator from "./list-box-item-indicator.vue";
+import ListBoxItemRoot from "./list-box-item-root.vue";
+export declare const ListBoxItem: ((__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+    attrs: any;
+    slots: {
+        default?: (props: import("./list-box-item.types").ListBoxItemSlotProps) => unknown;
+    };
+    emit: {};
+}, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & {
+        class?: string;
+        id?: import("../..").CollectionKey;
+        isDisabled?: boolean;
+        textValue?: string;
+        variant?: import("@ropav/styles").ListBoxItemVariants["variant"];
+    } & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {
+        default?: (props: import("./list-box-item.types").ListBoxItemSlotProps) => unknown;
+    };
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+}) & {
+    Indicator: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+        attrs: any;
+        slots: {
+            default?: (props: import("./list-box-item.types").ListBoxItemIndicatorSlotProps) => unknown;
+        };
+        emit: {};
+    }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+        props: import('vue').PublicProps & {
+            class?: string;
+        } & (typeof globalThis extends {
+            __VLS_PROPS_FALLBACK: infer P;
+        } ? P : {});
+        expose: (exposed: {}) => void;
+        attrs: any;
+        slots: {
+            default?: (props: import("./list-box-item.types").ListBoxItemIndicatorSlotProps) => unknown;
+        };
+        emit: {};
+    }>) => import('vue').VNode & {
+        __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+    };
+    Root: (__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>['props'], __VLS_ctx?: {
+        attrs: any;
+        slots: {
+            default?: (props: import("./list-box-item.types").ListBoxItemSlotProps) => unknown;
+        };
+        emit: {};
+    }, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>['expose'], __VLS_setup?: Promise<{
+        props: import('vue').PublicProps & {
+            class?: string;
+            id?: import("../..").CollectionKey;
+            isDisabled?: boolean;
+            textValue?: string;
+            variant?: import("@ropav/styles").ListBoxItemVariants["variant"];
+        } & (typeof globalThis extends {
+            __VLS_PROPS_FALLBACK: infer P;
+        } ? P : {});
+        expose: (exposed: {}) => void;
+        attrs: any;
+        slots: {
+            default?: (props: import("./list-box-item.types").ListBoxItemSlotProps) => unknown;
+        };
+        emit: {};
+    }>) => import('vue').VNode & {
+        __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+    };
+};
+export { ListBoxItemIndicator, ListBoxItemRoot };
+export type { ListBoxItemIndicatorProps, ListBoxItemIndicatorSlotProps, ListBoxItemRootProps, ListBoxItemRootProps as ListBoxItemProps, ListBoxItemSlotProps, } from "./list-box-item.types";
+export { useListBoxItemContext } from "./list-box-item.context";
+export type { ListBoxItemContext } from "./list-box-item.context";
+export { listboxItemVariants } from "@ropav/styles";
+export type { ListBoxItemVariants } from "@ropav/styles";

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

@@ -0,0 +1,11 @@
+import { useListBoxItemContext } from "./list-box-item.context.js";
+import list_box_item_indicator_default from "./list-box-item-indicator.js";
+import list_box_item_root_default from "./list-box-item-root.js";
+import { listboxItemVariants } from "@ropav/styles";
+//#region src/components/list-box-item/index.ts
+var ListBoxItem = Object.assign(list_box_item_root_default, {
+	Indicator: list_box_item_indicator_default,
+	Root: list_box_item_root_default
+});
+//#endregion
+export { ListBoxItem, list_box_item_indicator_default as ListBoxItemIndicator, list_box_item_root_default as ListBoxItemRoot, listboxItemVariants, useListBoxItemContext };