sheer-ui 0.4.2 → 0.5.0

package/src/lib/components/combobox/select/select.svelte.ts

@@ -1,1596 +0,0 @@
-import { attachRef, DOMContext, type ReadableBoxedValues, type WritableBoxedValues, type Box, boxWith } from '../../../internal/tools/index.js';
-import { on } from 'svelte/events';
-import { createContext, onDestroy, tick, untrack } from 'svelte';
-import { backward, forward, next, prev } from '../../../internal/arrays.js';
-import {
-	boolToStr,
-	boolToStrTrueOrUndef,
-	boolToEmptyStrOrUndef,
-	getDataOpenClosed,
-	boolToTrueOrUndef,
-} from '../../../internal/attrs.js';
-import { kbd, FIRST_LAST_KEYS } from '../../../internal/kbd.js';
-import type {
-	BitsEvent,
-	BitsFocusEvent,
-	BitsKeyboardEvent,
-	BitsMouseEvent,
-	BitsPointerEvent,
-	OnChangeFn,
-	WithRefOpts,
-	RefAttachment,
-} from '../../../internal/types.js';
-import { isIOS } from '../../../internal/tools/utils/dom.js';
-import { createBitsAttrs } from '../../../internal/attrs.js';
-import { getFloatingContentCSSVars } from '../../../internal/floating-layer/index.js';
-import { Typeahead, textContentOf } from '../../../internal/typeahead.svelte.js';
-import { useOpenChangeComplete } from '../../../internal/animations-settled.svelte.js';
-import { DEV } from 'esm-env';
-import type { SelectValueSnippetProps } from './types.js';
-
-// prettier-ignore
-export const INTERACTION_KEYS: string[] = [kbd.ARROW_LEFT, kbd.ESCAPE, kbd.ARROW_RIGHT, kbd.SHIFT, kbd.CAPS_LOCK, kbd.CONTROL, kbd.ALT, kbd.META, kbd.ENTER, kbd.F1, kbd.F2, kbd.F3, kbd.F4, kbd.F5, kbd.F6, kbd.F7, kbd.F8, kbd.F9, kbd.F10, kbd.F11, kbd.F12];
-
-export const CONTENT_MARGIN = 10;
-
-const selectAttrs = createBitsAttrs({
-	component: 'select',
-	parts: [
-		'trigger',
-		'content',
-		'item',
-		'viewport',
-		'scroll-up-button',
-		'scroll-down-button',
-		'group',
-		'group-label',
-		'separator',
-		'arrow',
-		'input',
-		'content-wrapper',
-		'item-text',
-		'value',
-	],
-});
-
-const [getSelectRoot, setSelectRoot] = createContext<SelectRoot>();
-const [getSelectGroup, setSelectGroup] = createContext<SelectGroupState>();
-const [getSelectContent, setSelectContent] = createContext<SelectContentState>();
-
-interface SelectBaseRootStateOpts
-	extends
-		ReadableBoxedValues<{
-			disabled: boolean;
-			required: boolean;
-			name: string;
-			loop: boolean;
-			scrollAlignment: 'nearest' | 'center';
-			items: { value: string; label: string; disabled?: boolean }[];
-			allowDeselect: boolean;
-			onOpenChangeComplete: OnChangeFn<boolean>;
-		}>,
-		WritableBoxedValues<{
-			open: boolean;
-			inputValue: string;
-		}> {
-	isCombobox: boolean;
-}
-
-abstract class SelectBaseRootState {
-	readonly opts: SelectBaseRootStateOpts;
-	touchedInput = $state(false);
-	inputNode = $state<HTMLElement | null>(null);
-	contentNode = $state<HTMLElement | null>(null);
-	readonly #completion: { readonly pending: boolean };
-	/** Rendered: open, or closing with the exit still settling — the window the popper layer's scroll lock covers. */
-	readonly present = $derived.by(() => this.opts.open.current || this.#completion.pending);
-	viewportNode = $state<HTMLElement | null>(null);
-	triggerNode = $state<HTMLElement | null>(null);
-	valueNode = $state<HTMLElement | null>(null);
-	valueId = $state('');
-	highlightedNode = $state<HTMLElement | null>(null);
-	readonly highlightedValue = $derived.by(() => {
-		if (!this.highlightedNode) return null;
-		return this.highlightedNode.getAttribute('data-value');
-	});
-	readonly highlightedId = $derived.by(() => {
-		if (!this.highlightedNode) return undefined;
-		return this.highlightedNode.id;
-	});
-	readonly highlightedLabel = $derived.by(() => {
-		if (!this.highlightedNode) return null;
-		return this.highlightedNode.getAttribute('data-label');
-	});
-	contentIsPositioned = $state(false);
-	isKeyboard = $state(false);
-	isCombobox = false;
-	domContext = new DOMContext(() => null);
-
-	constructor(opts: SelectBaseRootStateOpts) {
-		this.opts = opts;
-		this.isCombobox = opts.isCombobox;
-
-		// Content stays mounted through its exit transition (CSS owns the motion; the closed state
-		// is the content's `contentStyle`); completion is settle-based on the content node.
-		this.#completion = useOpenChangeComplete(
-			() => this.opts.open.current,
-			() => this.contentNode,
-			(open) => this.opts.onOpenChangeComplete.current(open),
-		);
-
-		$effect.pre(() => {
-			if (!this.opts.open.current) {
-				this.setHighlightedNode(null);
-			}
-		});
-	}
-
-	setHighlightedNode(node: HTMLElement | null, initial = false) {
-		this.highlightedNode = node;
-		if (node && (this.isKeyboard || initial)) {
-			this.scrollHighlightedNodeIntoView(node);
-		}
-	}
-
-	scrollHighlightedNodeIntoView(node: HTMLElement) {
-		if (!this.viewportNode || !this.contentIsPositioned) return;
-		node.scrollIntoView({ block: this.opts.scrollAlignment.current });
-	}
-
-	getCandidateNodes(): HTMLElement[] {
-		const node = this.contentNode;
-		if (!node) return [];
-		return Array.from(node.querySelectorAll<HTMLElement>(`[${this.getBitsAttr('item')}]:not([data-disabled])`));
-	}
-
-	setHighlightedToFirstCandidate(initial = false) {
-		this.setHighlightedNode(null);
-
-		let nodes = this.getCandidateNodes();
-		if (!nodes.length) return;
-
-		// don't consider nodes that aren't visible within the viewport
-		if (this.viewportNode) {
-			const viewportRect = this.viewportNode.getBoundingClientRect();
-
-			nodes = nodes.filter((node) => {
-				if (!this.viewportNode) return false;
-
-				const nodeRect = node.getBoundingClientRect();
-
-				const isNodeFullyVisible =
-					nodeRect.right <= viewportRect.right &&
-					nodeRect.left >= viewportRect.left &&
-					nodeRect.bottom <= viewportRect.bottom &&
-					nodeRect.top >= viewportRect.top;
-
-				return isNodeFullyVisible;
-			});
-		}
-
-		this.setHighlightedNode(nodes[0]!, initial);
-	}
-
-	getNodeByValue(value: string): HTMLElement | null {
-		const candidateNodes = this.getCandidateNodes();
-		return candidateNodes.find((node) => node.dataset.value === value) ?? null;
-	}
-
-	/**
-	 * Resolves the display label for a value: `items` entry when present, otherwise the
-	 * mounted item's `data-label` or its text content.
-	 */
-	getLabelForValue(value: string): string {
-		if (value === '') return '';
-		const fromItems = this.opts.items.current.find((item) => item.value === value)?.label;
-		if (fromItems !== undefined) return fromItems;
-		const node = this.getNodeByValue(value);
-		if (node) {
-			const dataLabel = node.getAttribute('data-label');
-			if (dataLabel !== null && dataLabel !== '') return dataLabel;
-			return node.textContent?.trim() ?? value;
-		}
-		return value;
-	}
-
-	setOpen(open: boolean) {
-		this.opts.open.current = open;
-	}
-
-	toggleOpen() {
-		this.opts.open.current = !this.opts.open.current;
-	}
-
-	handleOpen() {
-		this.setOpen(true);
-	}
-
-	handleClose() {
-		this.setHighlightedNode(null);
-		this.setOpen(false);
-	}
-
-	toggleMenu() {
-		this.toggleOpen();
-	}
-
-	getBitsAttr: typeof selectAttrs.getAttr = (part) => {
-		return selectAttrs.getAttr(part, this.isCombobox ? 'combobox' : undefined);
-	};
-}
-
-interface SelectSingleRootStateOpts
-	extends
-		SelectBaseRootStateOpts,
-		WritableBoxedValues<{
-			value: string;
-		}> {}
-
-export class SelectSingleRootState extends SelectBaseRootState {
-	override readonly opts: SelectSingleRootStateOpts;
-	readonly isMulti = false as const;
-	readonly hasValue = $derived.by(() => this.opts.value.current !== '');
-	readonly currentLabel = $derived.by(() => {
-		if (!this.opts.items.current.length) return '';
-		return this.opts.items.current.find((item) => item.value === this.opts.value.current)?.label ?? '';
-	});
-	readonly candidateLabels = $derived.by(() => {
-		if (!this.opts.items.current.length) return [];
-		const filteredItems = this.opts.items.current.filter((item) => !item.disabled);
-		return filteredItems.map((item) => item.label);
-	});
-	readonly dataTypeaheadEnabled = $derived.by(() => {
-		if (this.isMulti) return false;
-		if (this.opts.items.current.length === 0) return false;
-		return true;
-	});
-
-	constructor(opts: SelectSingleRootStateOpts) {
-		super(opts);
-
-		this.opts = opts;
-
-		$effect(() => {
-			if (!this.opts.open.current && this.highlightedNode) {
-				this.setHighlightedNode(null);
-			}
-		});
-
-		$effect(() => {
-			this.opts.open.current;
-			untrack(() => {
-				if (!this.opts.open.current) return;
-				this.setInitialHighlightedNode();
-			});
-		});
-	}
-
-	includesItem(itemValue: string) {
-		return this.opts.value.current === itemValue;
-	}
-
-	toggleItem(itemValue: string, itemLabel: string = itemValue) {
-		const newValue = this.includesItem(itemValue) ? '' : itemValue;
-		this.opts.value.current = newValue;
-		if (newValue !== '') {
-			this.opts.inputValue.current = itemLabel;
-		}
-	}
-
-	setInitialHighlightedNode() {
-		tick().then(() => {
-			if (this.highlightedNode && this.domContext.getDocument().contains(this.highlightedNode)) return;
-			if (this.opts.value.current !== '') {
-				const node = this.getNodeByValue(this.opts.value.current);
-				if (node) {
-					this.setHighlightedNode(node, true);
-					return;
-				}
-			}
-			// if no value is set, we want to highlight the first item
-			this.setHighlightedToFirstCandidate(true);
-		});
-	}
-}
-
-interface SelectMultipleRootStateOpts
-	extends
-		SelectBaseRootStateOpts,
-		WritableBoxedValues<{
-			value: string[];
-		}> {}
-
-class SelectMultipleRootState extends SelectBaseRootState {
-	override readonly opts: SelectMultipleRootStateOpts;
-	readonly isMulti = true as const;
-	readonly hasValue = $derived.by(() => this.opts.value.current.length > 0);
-
-	constructor(opts: SelectMultipleRootStateOpts) {
-		super(opts);
-
-		this.opts = opts;
-
-		$effect(() => {
-			if (!this.opts.open.current && this.highlightedNode) {
-				this.setHighlightedNode(null);
-			}
-		});
-
-		$effect(() => {
-			this.opts.open.current;
-			untrack(() => {
-				if (!this.opts.open.current) return;
-				this.setInitialHighlightedNode();
-			});
-		});
-	}
-
-	includesItem(itemValue: string) {
-		return this.opts.value.current.includes(itemValue);
-	}
-
-	toggleItem(itemValue: string, itemLabel: string = itemValue) {
-		if (this.includesItem(itemValue)) {
-			this.opts.value.current = this.opts.value.current.filter((v) => v !== itemValue);
-		} else {
-			this.opts.value.current = [...this.opts.value.current, itemValue];
-		}
-		this.opts.inputValue.current = itemLabel;
-	}
-
-	setInitialHighlightedNode() {
-		tick().then(() => {
-			if (!this.domContext) return;
-			if (this.highlightedNode && this.domContext.getDocument().contains(this.highlightedNode)) return;
-			if (this.opts.value.current.length && this.opts.value.current[0] !== '') {
-				const node = this.getNodeByValue(this.opts.value.current[0]!);
-				if (node) {
-					this.setHighlightedNode(node, true);
-					return;
-				}
-			}
-			// if no value is set, we want to highlight the first item
-			this.setHighlightedToFirstCandidate(true);
-		});
-	}
-}
-
-interface SelectRootStateOpts
-	extends
-		ReadableBoxedValues<{
-			disabled: boolean;
-			required: boolean;
-			loop: boolean;
-			scrollAlignment: 'nearest' | 'center';
-			name: string;
-			items: { value: string; label: string; disabled?: boolean }[];
-			allowDeselect: boolean;
-			onOpenChangeComplete: OnChangeFn<boolean>;
-		}>,
-		WritableBoxedValues<{
-			open: boolean;
-			inputValue: string;
-		}> {
-	isCombobox: boolean;
-	type: 'single' | 'multiple';
-	value: Box<string> | Box<string[]>;
-}
-
-export class SelectRootState {
-	static create(props: SelectRootStateOpts): SelectRoot {
-		const { type, ...rest } = props;
-
-		const rootState =
-			type === 'single'
-				? new SelectSingleRootState(rest as SelectSingleRootStateOpts)
-				: new SelectMultipleRootState(rest as SelectMultipleRootStateOpts);
-
-		return setSelectRoot(rootState);
-	}
-}
-
-type SelectRoot = SelectSingleRootState | SelectMultipleRootState;
-
-type SelectValueStateProps = WithRefOpts<
-	ReadableBoxedValues<{
-		placeholder: string | null | undefined;
-	}>
->;
-
-export class SelectValueState {
-	static create(opts: SelectValueStateProps) {
-		return new SelectValueState(opts, getSelectRoot());
-	}
-	readonly root: SelectRoot;
-	readonly opts: SelectValueStateProps;
-	readonly attachment: RefAttachment;
-
-	constructor(opts: SelectValueStateProps, root: SelectRoot) {
-		this.root = root;
-		this.opts = opts;
-		this.attachment = attachRef(opts.ref, (v) => (this.root.valueNode = v));
-		this.setValue = this.setValue.bind(this);
-	}
-
-	setValue(value: string | string[]) {
-		if (this.root.isMulti && !Array.isArray(value)) {
-			if (DEV) throw new Error(`Expected an array of strings passed to \`setValue\` got ${typeof value}.`);
-			return;
-		}
-		if (!this.root.isMulti && typeof value !== 'string') {
-			if (DEV) throw new Error(`Expected a string passed to \`setValue\` got ${typeof value}.`);
-			return;
-		}
-		this.root.opts.value.current = value;
-	}
-
-	// this way consumers get type narrowing for the value on `type`
-	readonly snippetProps: SelectValueSnippetProps = $derived.by(() => {
-		if (this.root.isMulti) {
-			return {
-				selection: {
-					type: 'multiple' as const,
-					selected:
-						this.root.opts.value.current.length > 0
-							? this.root.opts.value.current.map((value) => ({
-									value,
-									label: this.root.getLabelForValue(value),
-								}))
-							: [],
-					setValue: this.setValue,
-				},
-				placeholder: this.opts.placeholder.current ?? null,
-				disabled: this.root.opts.disabled.current,
-			};
-		}
-		const value = this.root.opts.value.current;
-		return {
-			selection: {
-				type: 'single' as const,
-				selected: value !== '' ? { value, label: value === '' ? '' : this.root.getLabelForValue(value) } : undefined,
-				setValue: this.setValue,
-			},
-			placeholder: this.opts.placeholder.current ?? null,
-			disabled: this.root.opts.disabled.current,
-		};
-	});
-
-	readonly props = $derived.by(() => ({
-		id: this.opts.id.current,
-		'data-placeholder': this.root.hasValue ? undefined : '',
-		'data-select-value': '',
-		...this.attachment,
-	}));
-}
-
-interface SelectInputStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			clearOnDeselect: boolean;
-		}> {}
-
-export class SelectInputState {
-	static create(opts: SelectInputStateOpts) {
-		return new SelectInputState(opts, getSelectRoot());
-	}
-	readonly opts: SelectInputStateOpts;
-	readonly root: SelectRoot;
-	readonly attachment: RefAttachment;
-
-	constructor(opts: SelectInputStateOpts, root: SelectRoot) {
-		this.opts = opts;
-		this.root = root;
-		this.attachment = attachRef(opts.ref, (v) => (this.root.inputNode = v));
-		this.root.domContext = new DOMContext(opts.ref);
-
-		this.onkeydown = this.onkeydown.bind(this);
-		this.oninput = this.oninput.bind(this);
-
-		let prevValue: string | string[] | undefined = undefined;
-		$effect(() => {
-			const value = this.root.opts.value.current;
-			const clearOnDeselect = this.opts.clearOnDeselect.current;
-			untrack(() => {
-				if (!clearOnDeselect) return;
-				if (Array.isArray(value) && Array.isArray(prevValue)) {
-					if (value.length === 0 && prevValue.length !== 0) {
-						this.root.opts.inputValue.current = '';
-					}
-				} else if (value === '' && prevValue !== '') {
-					this.root.opts.inputValue.current = '';
-				}
-			});
-			prevValue = value;
-		});
-	}
-
-	onkeydown(e: BitsKeyboardEvent) {
-		this.root.isKeyboard = true;
-		if (e.key === kbd.ESCAPE) return;
-
-		// prevent arrow up/down from moving the position of the cursor in the input
-		if (e.key === kbd.ARROW_UP || e.key === kbd.ARROW_DOWN) e.preventDefault();
-		if (!this.root.opts.open.current) {
-			if (INTERACTION_KEYS.includes(e.key)) return;
-			if (e.key === kbd.TAB) return;
-			if (e.key === kbd.BACKSPACE && this.root.opts.inputValue.current === '') return;
-			this.root.handleOpen();
-			// we need to wait for a tick after the menu opens to ensure the highlighted nodes are
-			// set correctly.
-			if (this.root.hasValue) return;
-			const candidateNodes = this.root.getCandidateNodes();
-			if (!candidateNodes.length) return;
-
-			if (e.key === kbd.ARROW_DOWN) {
-				const firstCandidate = candidateNodes[0]!;
-				this.root.setHighlightedNode(firstCandidate);
-			} else if (e.key === kbd.ARROW_UP) {
-				const lastCandidate = candidateNodes[candidateNodes.length - 1]!;
-				this.root.setHighlightedNode(lastCandidate);
-			}
-			return;
-		}
-
-		if (e.key === kbd.TAB) {
-			this.root.handleClose();
-			return;
-		}
-
-		if (e.key === kbd.ENTER && !e.isComposing) {
-			e.preventDefault();
-
-			const isCurrentSelectedValue = this.root.highlightedValue === this.root.opts.value.current;
-
-			if (!this.root.opts.allowDeselect.current && isCurrentSelectedValue && !this.root.isMulti) {
-				this.root.handleClose();
-				return;
-			}
-
-			if (this.root.highlightedValue && this.root.highlightedNode && this.root.highlightedNode.isConnected) {
-				this.root.toggleItem(this.root.highlightedValue, this.root.highlightedLabel ?? undefined);
-			}
-			if (!this.root.isMulti && !isCurrentSelectedValue) {
-				this.root.handleClose();
-			}
-		}
-
-		if (e.key === kbd.ARROW_UP && e.altKey) {
-			this.root.handleClose();
-		}
-
-		if (FIRST_LAST_KEYS.includes(e.key)) {
-			e.preventDefault();
-			const candidateNodes = this.root.getCandidateNodes();
-			const currHighlightedNode = this.root.highlightedNode;
-			const currIndex = currHighlightedNode ? candidateNodes.indexOf(currHighlightedNode) : -1;
-
-			const loop = this.root.opts.loop.current;
-			let nextItem: HTMLElement | undefined;
-
-			if (e.key === kbd.ARROW_DOWN) {
-				nextItem = next(candidateNodes, currIndex, loop);
-			} else if (e.key === kbd.ARROW_UP) {
-				nextItem = prev(candidateNodes, currIndex, loop);
-			} else if (e.key === kbd.PAGE_DOWN) {
-				nextItem = forward(candidateNodes, currIndex, 10, loop);
-			} else if (e.key === kbd.PAGE_UP) {
-				nextItem = backward(candidateNodes, currIndex, 10, loop);
-			} else if (e.key === kbd.HOME) {
-				nextItem = candidateNodes[0];
-			} else if (e.key === kbd.END) {
-				nextItem = candidateNodes[candidateNodes.length - 1];
-			}
-			if (!nextItem) return;
-			this.root.setHighlightedNode(nextItem);
-			return;
-		}
-
-		if (INTERACTION_KEYS.includes(e.key)) return;
-		if (!this.root.highlightedNode) {
-			this.root.setHighlightedToFirstCandidate();
-		}
-	}
-
-	oninput(e: BitsEvent<Event, HTMLInputElement>) {
-		this.root.opts.inputValue.current = e.currentTarget.value;
-		this.root.setHighlightedToFirstCandidate();
-	}
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				role: 'combobox',
-				disabled: this.root.opts.disabled.current ? true : undefined,
-				'aria-activedescendant': this.root.highlightedId,
-				'aria-autocomplete': 'list',
-				'aria-expanded': boolToStr(this.root.opts.open.current),
-				'data-state': getDataOpenClosed(this.root.opts.open.current),
-				'data-disabled': boolToEmptyStrOrUndef(this.root.opts.disabled.current),
-				onkeydown: this.onkeydown,
-				oninput: this.oninput,
-				[this.root.getBitsAttr('input')]: '',
-				...this.attachment,
-			}) as const,
-	);
-}
-
-interface SelectComboTriggerStateOpts extends WithRefOpts {}
-
-export class SelectComboTriggerState {
-	static create(opts: SelectComboTriggerStateOpts) {
-		return new SelectComboTriggerState(opts, getSelectRoot());
-	}
-	readonly opts: SelectComboTriggerStateOpts;
-	readonly root: SelectBaseRootState;
-	readonly attachment: RefAttachment;
-
-	constructor(opts: SelectComboTriggerStateOpts, root: SelectBaseRootState) {
-		this.opts = opts;
-		this.root = root;
-		this.attachment = attachRef(opts.ref);
-		this.onkeydown = this.onkeydown.bind(this);
-		this.onpointerdown = this.onpointerdown.bind(this);
-	}
-
-	onkeydown(e: BitsKeyboardEvent) {
-		if (!this.root.domContext) return;
-		if (e.key === kbd.ENTER || e.key === kbd.SPACE) {
-			e.preventDefault();
-			if (this.root.domContext.getActiveElement() !== this.root.inputNode) {
-				this.root.inputNode?.focus();
-			}
-			this.root.toggleMenu();
-		}
-	}
-
-	/**
-	 * `pointerdown` fires before the `focus` event, so we can prevent the default
-	 * behavior of focusing the button and keep focus on the input.
-	 */
-	onpointerdown(e: BitsPointerEvent) {
-		if (this.root.opts.disabled.current || !this.root.domContext) return;
-		e.preventDefault();
-		if (this.root.domContext.getActiveElement() !== this.root.inputNode) {
-			this.root.inputNode?.focus();
-		}
-		this.root.toggleMenu();
-	}
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				disabled: this.root.opts.disabled.current ? true : undefined,
-				'aria-haspopup': 'listbox',
-				'data-state': getDataOpenClosed(this.root.opts.open.current),
-				'data-disabled': boolToEmptyStrOrUndef(this.root.opts.disabled.current),
-				[this.root.getBitsAttr('trigger')]: '',
-				onpointerdown: this.onpointerdown,
-				onkeydown: this.onkeydown,
-				...this.attachment,
-			}) as const,
-	);
-}
-
-interface SelectTriggerStateOpts extends WithRefOpts {}
-
-export class SelectTriggerState {
-	static create(opts: SelectTriggerStateOpts) {
-		return new SelectTriggerState(opts, getSelectRoot());
-	}
-	readonly opts: SelectTriggerStateOpts;
-	readonly root: SelectRoot;
-	readonly attachment: RefAttachment;
-	readonly #typeahead: Typeahead<HTMLElement>;
-	readonly #labelTypeahead: Typeahead<string>;
-
-	constructor(opts: SelectTriggerStateOpts, root: SelectRoot) {
-		this.opts = opts;
-		this.root = root;
-		this.attachment = attachRef(opts.ref, (v) => (this.root.triggerNode = v));
-		this.root.domContext = new DOMContext(opts.ref);
-
-		this.#typeahead = new Typeahead({
-			getSearchText: textContentOf,
-			getCurrentCandidate: () => this.root.highlightedNode,
-			onMatch: (node) => {
-				this.root.setHighlightedNode(node);
-			},
-			getWindow: () => this.root.domContext.getWindow(),
-		});
-
-		this.#labelTypeahead = new Typeahead({
-			getSearchText: (label) => label,
-			getCurrentCandidate: () => {
-				if (this.root.isMulti) return '';
-				return this.root.currentLabel;
-			},
-			onMatch: (label: string) => {
-				if (this.root.isMulti) return;
-				if (!this.root.opts.items.current) return;
-				const matchedItem = this.root.opts.items.current.find((item) => item.label === label);
-				if (!matchedItem) return;
-				this.root.opts.value.current = matchedItem.value;
-			},
-			getWindow: () => this.root.domContext.getWindow(),
-		});
-
-		this.onkeydown = this.onkeydown.bind(this);
-		this.onpointerdown = this.onpointerdown.bind(this);
-		this.onpointerup = this.onpointerup.bind(this);
-		this.onclick = this.onclick.bind(this);
-	}
-
-	#handleOpen() {
-		this.root.opts.open.current = true;
-		this.#labelTypeahead.reset();
-		this.#typeahead.reset();
-	}
-
-	#handlePointerOpen(_: PointerEvent) {
-		this.#handleOpen();
-	}
-
-	/**
-	 * Logic used to handle keyboard selection/deselection.
-	 *
-	 * If it returns true, it means the item was selected and whatever is calling
-	 * this function should return early
-	 *
-	 */
-	#handleKeyboardSelection() {
-		const isCurrentSelectedValue = this.root.highlightedValue === this.root.opts.value.current;
-
-		if (!this.root.opts.allowDeselect.current && isCurrentSelectedValue && !this.root.isMulti) {
-			this.root.handleClose();
-			return true;
-		}
-
-		// "" is a valid value for a select item so we need to check for that
-		if (this.root.highlightedValue !== null) {
-			this.root.toggleItem(this.root.highlightedValue, this.root.highlightedLabel ?? undefined);
-		}
-
-		if (!this.root.isMulti && !isCurrentSelectedValue) {
-			this.root.handleClose();
-			return true;
-		}
-
-		return false;
-	}
-
-	onkeydown(e: BitsKeyboardEvent) {
-		this.root.isKeyboard = true;
-		if (e.key === kbd.ARROW_UP || e.key === kbd.ARROW_DOWN) e.preventDefault();
-
-		if (!this.root.opts.open.current) {
-			if (e.key === kbd.ENTER || e.key === kbd.SPACE || e.key === kbd.ARROW_DOWN || e.key === kbd.ARROW_UP) {
-				e.preventDefault();
-				this.root.handleOpen();
-			} else if (!this.root.isMulti && this.root.dataTypeaheadEnabled) {
-				this.#labelTypeahead.handleKey(e.key, this.root.candidateLabels);
-				return;
-			}
-
-			// we need to wait for a tick after the menu opens to ensure
-			// the highlighted nodes are set correctly
-			if (this.root.hasValue) return;
-			const candidateNodes = this.root.getCandidateNodes();
-			if (!candidateNodes.length) return;
-
-			if (e.key === kbd.ARROW_DOWN) {
-				const firstCandidate = candidateNodes[0]!;
-				this.root.setHighlightedNode(firstCandidate);
-			} else if (e.key === kbd.ARROW_UP) {
-				const lastCandidate = candidateNodes[candidateNodes.length - 1]!;
-				this.root.setHighlightedNode(lastCandidate);
-			}
-			return;
-		}
-
-		if (e.key === kbd.TAB) {
-			this.root.handleClose();
-			return;
-		}
-
-		if (
-			(e.key === kbd.ENTER ||
-				// if we're currently "typing ahead", we don't want to select the item
-				// just yet as the item the user is trying to get to may have a space in it,
-				// so we defer handling the close for this case until further down
-				(e.key === kbd.SPACE && this.#typeahead.search === '')) &&
-			!e.isComposing
-		) {
-			e.preventDefault();
-			const shouldReturn = this.#handleKeyboardSelection();
-			if (shouldReturn) return;
-		}
-
-		if (e.key === kbd.ARROW_UP && e.altKey) {
-			this.root.handleClose();
-		}
-
-		if (FIRST_LAST_KEYS.includes(e.key)) {
-			e.preventDefault();
-			const candidateNodes = this.root.getCandidateNodes();
-			const currHighlightedNode = this.root.highlightedNode;
-			const currIndex = currHighlightedNode ? candidateNodes.indexOf(currHighlightedNode) : -1;
-
-			const loop = this.root.opts.loop.current;
-			let nextItem: HTMLElement | undefined;
-
-			if (e.key === kbd.ARROW_DOWN) {
-				nextItem = next(candidateNodes, currIndex, loop);
-			} else if (e.key === kbd.ARROW_UP) {
-				nextItem = prev(candidateNodes, currIndex, loop);
-			} else if (e.key === kbd.PAGE_DOWN) {
-				nextItem = forward(candidateNodes, currIndex, 10, loop);
-			} else if (e.key === kbd.PAGE_UP) {
-				nextItem = backward(candidateNodes, currIndex, 10, loop);
-			} else if (e.key === kbd.HOME) {
-				nextItem = candidateNodes[0];
-			} else if (e.key === kbd.END) {
-				nextItem = candidateNodes[candidateNodes.length - 1];
-			}
-			if (!nextItem) return;
-			this.root.setHighlightedNode(nextItem);
-			return;
-		}
-		const isModifierKey = e.ctrlKey || e.altKey || e.metaKey;
-		const isCharacterKey = e.key.length === 1;
-		const isSpaceKey = e.key === kbd.SPACE;
-
-		const candidateNodes = this.root.getCandidateNodes();
-
-		if (e.key === kbd.TAB) return;
-
-		if (!isModifierKey && (isCharacterKey || isSpaceKey)) {
-			const matchedNode = this.#typeahead.handleKey(e.key, candidateNodes);
-			if (!matchedNode && isSpaceKey) {
-				e.preventDefault();
-				this.#handleKeyboardSelection();
-			}
-			return;
-		}
-
-		if (!this.root.highlightedNode) {
-			this.root.setHighlightedToFirstCandidate();
-		}
-	}
-
-	onclick(e: BitsMouseEvent) {
-		// While browsers generally have no issue focusing the trigger when clicking
-		// on a label, Safari seems to struggle with the fact that there's no `onClick`.
-		// We force `focus` in this case. Note: this doesn't create any other side-effect
-		// because we are preventing default in `onpointerdown` so effectively
-		// this only runs for a label 'click'
-		const currTarget = e.currentTarget as HTMLElement;
-		currTarget.focus();
-	}
-
-	onpointerdown(e: BitsPointerEvent) {
-		if (this.root.opts.disabled.current) return;
-		// prevent opening on touch down which can be triggered when scrolling on touch devices
-		if (e.pointerType === 'touch') return e.preventDefault();
-
-		// prevent implicit pointer capture
-		const target = e.target as HTMLElement;
-		if (target?.hasPointerCapture(e.pointerId)) {
-			target?.releasePointerCapture(e.pointerId);
-		}
-
-		// only call the handle if it's a left click, since pointerdown is triggered
-		// by right clicks as well, but not when ctrl is pressed
-		if (e.button === 0 && e.ctrlKey === false) {
-			if (this.root.opts.open.current === false) {
-				this.#handlePointerOpen(e);
-			} else {
-				this.root.handleClose();
-			}
-		}
-	}
-
-	onpointerup(e: BitsPointerEvent) {
-		if (this.root.opts.disabled.current) return;
-		e.preventDefault();
-		if (e.pointerType === 'touch') {
-			if (this.root.opts.open.current === false) {
-				this.#handlePointerOpen(e);
-			} else {
-				this.root.handleClose();
-			}
-		}
-	}
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				disabled: this.root.opts.disabled.current ? true : undefined,
-				'aria-haspopup': 'listbox',
-				'aria-expanded': boolToStr(this.root.opts.open.current),
-				'aria-activedescendant': this.root.highlightedId,
-				'data-state': getDataOpenClosed(this.root.opts.open.current),
-				'data-disabled': boolToEmptyStrOrUndef(this.root.opts.disabled.current),
-				'data-placeholder': this.root.hasValue ? undefined : '',
-				[this.root.getBitsAttr('trigger')]: '',
-				onpointerdown: this.onpointerdown,
-				onkeydown: this.onkeydown,
-				onclick: this.onclick,
-				onpointerup: this.onpointerup,
-				...this.attachment,
-			}) as const,
-	);
-}
-
-interface SelectContentStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			onInteractOutside: (e: PointerEvent) => void;
-			onEscapeKeydown: (e: KeyboardEvent) => void;
-		}> {
-	/** Rendered in flow (ContentStatic) rather than in a floating wrapper. */
-	isStatic?: boolean;
-}
-
-export class SelectContentState {
-	static create(opts: SelectContentStateOpts) {
-		return setSelectContent(new SelectContentState(opts, getSelectRoot()));
-	}
-	readonly opts: SelectContentStateOpts;
-	readonly root: SelectRoot;
-	readonly attachment: RefAttachment;
-	isPositioned = $state(false);
-	domContext: DOMContext;
-	#isStatic: boolean;
-
-	constructor(opts: SelectContentStateOpts, root: SelectRoot) {
-		this.opts = opts;
-		this.root = root;
-		this.#isStatic = opts.isStatic ?? false;
-		this.attachment = attachRef(opts.ref, (v) => (this.root.contentNode = v));
-		this.domContext = new DOMContext(this.opts.ref);
-
-		if (this.root.domContext === null) {
-			this.root.domContext = this.domContext;
-		}
-
-		onDestroy(() => {
-			this.root.contentNode = null;
-			this.root.contentIsPositioned = false;
-			this.isPositioned = false;
-		});
-
-		$effect(() => {
-			this.root.opts.open.current;
-			untrack(() => {
-				if (this.root.opts.open.current) return;
-				this.root.contentIsPositioned = false;
-				this.isPositioned = false;
-			});
-		});
-
-		$effect(() => {
-			this.isPositioned;
-			this.root.highlightedNode;
-			untrack(() => {
-				if (!this.isPositioned || !this.root.highlightedNode) return;
-				this.root.scrollHighlightedNodeIntoView(this.root.highlightedNode);
-			});
-		});
-
-		this.onpointermove = this.onpointermove.bind(this);
-	}
-
-	onpointermove(_: BitsPointerEvent) {
-		this.root.isKeyboard = false;
-	}
-
-	readonly #styles = $derived.by(() => {
-		return getFloatingContentCSSVars(this.root.isCombobox ? 'combobox' : 'select');
-	});
-
-	onInteractOutside = (e: PointerEvent) => {
-		if (e.target === this.root.triggerNode || e.target === this.root.inputNode) {
-			e.preventDefault();
-			return;
-		}
-		this.opts.onInteractOutside.current(e);
-		if (e.defaultPrevented) return;
-		this.root.handleClose();
-	};
-
-	onEscapeKeydown = (e: KeyboardEvent) => {
-		this.opts.onEscapeKeydown.current(e);
-		if (e.defaultPrevented) return;
-		this.root.handleClose();
-	};
-
-	onOpenAutoFocus = (e: Event) => {
-		e.preventDefault();
-	};
-
-	onCloseAutoFocus = (e: Event) => {
-		e.preventDefault();
-	};
-
-	readonly snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				role: 'listbox',
-				'aria-multiselectable': this.root.isMulti ? 'true' : undefined,
-				'data-state': getDataOpenClosed(this.root.opts.open.current),
-				[this.root.getBitsAttr('content')]: '',
-				style: {
-					display: 'flex',
-					flexDirection: 'column',
-					outline: 'none',
-					boxSizing: 'border-box',
-					pointerEvents: 'auto',
-					...this.#styles,
-				},
-				onpointermove: this.onpointermove,
-				...this.attachment,
-			}) as const,
-	);
-
-	/**
-	 * Inline style for the content element alone — `props.style` also reaches the floating wrapper
-	 * through PopperLayer, and hiding the wrapper would cancel the content's exit transition.
-	 * Always mounted: closed floating content is visibility:hidden, closed static content is
-	 * display:none (it must leave the flow); `popup-surface` in ui.css adds the motion.
-	 */
-	readonly contentStyle = $derived.by(() => {
-		if (this.root.opts.open.current) return {};
-		return this.#isStatic ? { display: 'none' } : { visibility: 'hidden' };
-	});
-
-	readonly popperProps = {
-		onInteractOutside: this.onInteractOutside,
-		onEscapeKeydown: this.onEscapeKeydown,
-		onOpenAutoFocus: this.onOpenAutoFocus,
-		onCloseAutoFocus: this.onCloseAutoFocus,
-		trapFocus: false,
-		loop: false,
-		onPlaced: () => {
-			// onPlaced is also called when the menu is closed, so we need to check if the menu
-			// is actually open to avoid setting positioning to true when the menu is closed
-			if (this.root.opts.open.current) {
-				this.root.contentIsPositioned = true;
-				this.isPositioned = true;
-			}
-		},
-	};
-}
-
-interface SelectItemStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			value: string;
-			disabled: boolean;
-			label: string;
-			onHighlight: () => void;
-			onUnhighlight: () => void;
-		}> {}
-
-export class SelectItemState {
-	static create(opts: SelectItemStateOpts) {
-		return new SelectItemState(opts, getSelectRoot());
-	}
-	readonly opts: SelectItemStateOpts;
-	readonly root: SelectRoot;
-	readonly attachment: RefAttachment;
-	readonly isSelected = $derived.by(() => this.root.includesItem(this.opts.value.current));
-	readonly isHighlighted = $derived.by(() => this.root.highlightedValue === this.opts.value.current);
-	prevHighlighted = $state<boolean | undefined>(undefined);
-	mounted = $state(false);
-
-	constructor(opts: SelectItemStateOpts, root: SelectRoot) {
-		this.opts = opts;
-		this.root = root;
-		this.attachment = attachRef(opts.ref);
-
-		let lastHighlighted: boolean | undefined = undefined;
-		$effect.pre(() => {
-			const current = this.isHighlighted;
-			this.prevHighlighted = lastHighlighted;
-			lastHighlighted = current;
-		});
-
-		$effect(() => {
-			this.isHighlighted;
-			this.prevHighlighted;
-			untrack(() => {
-				if (this.isHighlighted) {
-					this.opts.onHighlight.current();
-				} else if (this.prevHighlighted) {
-					this.opts.onUnhighlight.current();
-				}
-			});
-		});
-
-		$effect(() => {
-			this.mounted;
-			untrack(() => {
-				if (!this.mounted) return;
-				this.root.setInitialHighlightedNode();
-			});
-		});
-
-		this.onpointerdown = this.onpointerdown.bind(this);
-		this.onpointerup = this.onpointerup.bind(this);
-		this.onpointermove = this.onpointermove.bind(this);
-	}
-
-	handleSelect() {
-		if (this.opts.disabled.current) return;
-		const isCurrentSelectedValue = this.opts.value.current === this.root.opts.value.current;
-
-		// if allowDeselect is false and the item is already selected and we're not in a
-		// multi select, do nothing and close the menu
-		if (!this.root.opts.allowDeselect.current && isCurrentSelectedValue && !this.root.isMulti) {
-			this.root.handleClose();
-			return;
-		}
-
-		// otherwise, toggle the item and if we're not in a multi select, close the menu
-		this.root.toggleItem(this.opts.value.current, this.opts.label.current);
-
-		if (!this.root.isMulti && !isCurrentSelectedValue) {
-			this.root.handleClose();
-		}
-	}
-
-	snippetProps = $derived.by(() => ({
-		selected: this.isSelected,
-		highlighted: this.isHighlighted,
-	}));
-
-	onpointerdown(e: BitsPointerEvent) {
-		// prevent focus from leaving the input/select trigger
-		e.preventDefault();
-	}
-
-	/**
-	 * Using `pointerup` instead of `click` allows power users to pointerdown
-	 * the trigger, then release pointerup on an item to select it vs having to do
-	 * multiple clicks.
-	 */
-	onpointerup(e: BitsPointerEvent) {
-		if (e.defaultPrevented || !this.opts.ref.current) return;
-		/**
-		 * For one reason or another, when it's a touch pointer and _not_ on IOS,
-		 * we need to listen for the immediate click event to handle the selection,
-		 * otherwise a click event will fire on the element _behind_ the item.
-		 */
-		if (e.pointerType === 'touch' && !isIOS) {
-			on(
-				this.opts.ref.current,
-				'click',
-				() => {
-					this.handleSelect();
-					// set highlighted node since we don't do it on `pointermove` events
-					// for touch devices
-					this.root.setHighlightedNode(this.opts.ref.current);
-				},
-				{ once: true },
-			);
-			return;
-		}
-		e.preventDefault();
-
-		this.handleSelect();
-		if (e.pointerType === 'touch') {
-			// set highlighted node since we don't do it on `pointermove` events
-			// for touch devices
-			this.root.setHighlightedNode(this.opts.ref.current);
-		}
-	}
-
-	onpointermove(e: BitsPointerEvent) {
-		/**
-		 * We don't want to highlight items on touch devices when scrolling,
-		 * as this is confusing behavior, so we return here and instead handle
-		 * the highlighting on the `pointerup` (or following `click`) event for
-		 * touch devices only.
-		 */
-		if (e.pointerType === 'touch') return;
-		if (this.root.highlightedNode !== this.opts.ref.current) {
-			this.root.setHighlightedNode(this.opts.ref.current);
-		}
-	}
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				role: 'option',
-				'aria-selected': this.root.includesItem(this.opts.value.current) ? 'true' : undefined,
-				'data-value': this.opts.value.current,
-				'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled.current),
-				'data-highlighted': this.root.highlightedValue === this.opts.value.current && !this.opts.disabled.current ? '' : undefined,
-				'data-selected': this.root.includesItem(this.opts.value.current) ? '' : undefined,
-				'data-label': this.opts.label.current,
-				[this.root.getBitsAttr('item')]: '',
-				onpointermove: this.onpointermove,
-				onpointerdown: this.onpointerdown,
-				onpointerup: this.onpointerup,
-				...this.attachment,
-			}) as const,
-	);
-}
-
-interface SelectGroupStateOpts extends WithRefOpts {}
-
-export class SelectGroupState {
-	static create(opts: SelectGroupStateOpts) {
-		return setSelectGroup(new SelectGroupState(opts, getSelectRoot()));
-	}
-	readonly opts: SelectGroupStateOpts;
-	readonly root: SelectBaseRootState;
-	labelNode = $state<HTMLElement | null>(null);
-	readonly attachment: RefAttachment;
-
-	constructor(opts: SelectGroupStateOpts, root: SelectBaseRootState) {
-		this.opts = opts;
-		this.root = root;
-		this.attachment = attachRef(opts.ref);
-	}
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				role: 'group',
-				[this.root.getBitsAttr('group')]: '',
-				'aria-labelledby': this.labelNode?.id ?? undefined,
-				...this.attachment,
-			}) as const,
-	);
-}
-
-interface SelectGroupHeadingStateOpts extends WithRefOpts {}
-
-export class SelectGroupHeadingState {
-	static create(opts: SelectGroupHeadingStateOpts) {
-		return new SelectGroupHeadingState(opts, getSelectGroup());
-	}
-	readonly opts: SelectGroupHeadingStateOpts;
-	readonly group: SelectGroupState;
-	readonly attachment: RefAttachment;
-
-	constructor(opts: SelectGroupHeadingStateOpts, group: SelectGroupState) {
-		this.opts = opts;
-		this.group = group;
-		this.attachment = attachRef(opts.ref, (v) => (this.group.labelNode = v));
-	}
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				[this.group.root.getBitsAttr('group-label')]: '',
-				...this.attachment,
-			}) as const,
-	);
-}
-
-interface SelectHiddenInputStateOpts extends ReadableBoxedValues<{
-	value: string | undefined;
-}> {}
-
-export class SelectHiddenInputState {
-	static create(opts: SelectHiddenInputStateOpts) {
-		return new SelectHiddenInputState(opts, getSelectRoot());
-	}
-	readonly opts: SelectHiddenInputStateOpts;
-	readonly root: SelectBaseRootState;
-	readonly shouldRender = $derived.by(() => this.root.opts.name.current !== '');
-
-	constructor(opts: SelectHiddenInputStateOpts, root: SelectBaseRootState) {
-		this.opts = opts;
-		this.root = root;
-		this.onfocus = this.onfocus.bind(this);
-	}
-
-	onfocus(e: BitsFocusEvent) {
-		e.preventDefault();
-
-		if (!this.root.isCombobox) {
-			this.root.triggerNode?.focus();
-		} else {
-			this.root.inputNode?.focus();
-		}
-	}
-
-	readonly props = $derived.by(
-		() =>
-			({
-				disabled: boolToTrueOrUndef(this.root.opts.disabled.current),
-				required: boolToTrueOrUndef(this.root.opts.required.current),
-				name: this.root.opts.name.current,
-				value: this.opts.value.current,
-				onfocus: this.onfocus,
-			}) as const,
-	);
-}
-
-interface SelectViewportStateOpts extends WithRefOpts {}
-
-export class SelectViewportState {
-	static create(opts: SelectViewportStateOpts) {
-		return new SelectViewportState(opts, getSelectContent());
-	}
-	readonly opts: SelectViewportStateOpts;
-	readonly content: SelectContentState;
-	readonly root: SelectBaseRootState;
-	readonly attachment: RefAttachment;
-	prevScrollTop = $state(0);
-
-	constructor(opts: SelectViewportStateOpts, content: SelectContentState) {
-		this.opts = opts;
-		this.content = content;
-		this.root = content.root;
-		this.attachment = attachRef(opts.ref, (v) => {
-			this.root.viewportNode = v;
-		});
-	}
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				role: 'presentation',
-				[this.root.getBitsAttr('viewport')]: '',
-				style: {
-					// we use position: 'relative' here on the `viewport` so that when we call
-					// `selectedItem.offsetTop` in calculations, the offset is relative to the viewport
-					// (independent of the scrollUpButton).
-					position: 'relative',
-					flex: 1,
-					overflow: 'auto',
-				},
-				...this.attachment,
-			}) as const,
-	);
-}
-
-interface SelectScrollButtonImplStateOpts
-	extends
-		WithRefOpts,
-		ReadableBoxedValues<{
-			delay: (tick: number) => number;
-		}> {}
-
-export class SelectScrollButtonImplState {
-	readonly opts: SelectScrollButtonImplStateOpts;
-	readonly content: SelectContentState;
-	readonly root: SelectBaseRootState;
-	readonly attachment: RefAttachment;
-	autoScrollTimer: number | null = null;
-	userScrollTimer = -1;
-	isUserScrolling = false;
-	onAutoScroll: () => void = () => {};
-	mounted = $state(false);
-
-	constructor(opts: SelectScrollButtonImplStateOpts, content: SelectContentState) {
-		this.opts = opts;
-		this.content = content;
-		this.root = content.root;
-		this.attachment = attachRef(opts.ref);
-
-		$effect(() => {
-			this.mounted;
-			untrack(() => {
-				if (!this.mounted) {
-					this.isUserScrolling = false;
-					return;
-				}
-				if (this.isUserScrolling) return;
-			});
-		});
-
-		$effect(() => {
-			if (this.mounted) return;
-			this.clearAutoScrollInterval();
-		});
-
-		this.onpointerdown = this.onpointerdown.bind(this);
-		this.onpointermove = this.onpointermove.bind(this);
-		this.onpointerleave = this.onpointerleave.bind(this);
-	}
-
-	handleUserScroll() {
-		this.content.domContext.clearTimeout(this.userScrollTimer);
-		this.isUserScrolling = true;
-		this.userScrollTimer = this.content.domContext.setTimeout(() => {
-			this.isUserScrolling = false;
-		}, 200);
-	}
-
-	clearAutoScrollInterval() {
-		if (this.autoScrollTimer === null) return;
-		this.content.domContext.clearTimeout(this.autoScrollTimer);
-		this.autoScrollTimer = null;
-	}
-
-	onpointerdown(_: BitsPointerEvent) {
-		if (this.autoScrollTimer !== null) return;
-		const autoScroll = (tick: number) => {
-			this.onAutoScroll();
-			this.autoScrollTimer = this.content.domContext.setTimeout(() => autoScroll(tick + 1), this.opts.delay.current(tick));
-		};
-		this.autoScrollTimer = this.content.domContext.setTimeout(() => autoScroll(1), this.opts.delay.current(0));
-	}
-
-	onpointermove(e: BitsPointerEvent) {
-		this.onpointerdown(e);
-	}
-
-	onpointerleave(_: BitsPointerEvent) {
-		this.clearAutoScrollInterval();
-	}
-
-	readonly props = $derived.by(
-		() =>
-			({
-				id: this.opts.id.current,
-				'aria-hidden': boolToStrTrueOrUndef(true),
-				style: {
-					flexShrink: 0,
-				},
-				onpointerdown: this.onpointerdown,
-				onpointermove: this.onpointermove,
-				onpointerleave: this.onpointerleave,
-				...this.attachment,
-			}) as const,
-	);
-}
-
-export class SelectScrollDownButtonState {
-	static create(opts: SelectScrollButtonImplStateOpts) {
-		return new SelectScrollDownButtonState(new SelectScrollButtonImplState(opts, getSelectContent()));
-	}
-	readonly scrollButtonState: SelectScrollButtonImplState;
-	readonly content: SelectContentState;
-	readonly root: SelectBaseRootState;
-	canScrollDown = $state(false);
-	scrollIntoViewTimer: ReturnType<typeof globalThis.setTimeout> | null = null;
-
-	constructor(scrollButtonState: SelectScrollButtonImplState) {
-		this.scrollButtonState = scrollButtonState;
-		this.content = scrollButtonState.content;
-		this.root = scrollButtonState.root;
-		this.scrollButtonState.onAutoScroll = this.handleAutoScroll;
-
-		$effect(() => {
-			this.root.viewportNode;
-			this.content.isPositioned;
-			return untrack(() => {
-				if (!this.root.viewportNode || !this.content.isPositioned) return;
-				this.handleScroll(true);
-
-				return on(this.root.viewportNode, 'scroll', () => this.handleScroll());
-			});
-		});
-
-		/**
-		 * If the input value changes, this means that the filtered items may have changed,
-		 * so we need to re-evaluate the scroll-ability of the list.
-		 */
-		$effect(() => {
-			this.root.opts.inputValue.current;
-			this.root.viewportNode;
-			this.content.isPositioned;
-			untrack(() => {
-				if (!this.root.viewportNode || !this.content.isPositioned) return;
-				this.handleScroll(true);
-			});
-		});
-
-		$effect(() => {
-			this.scrollButtonState.mounted;
-			untrack(() => {
-				if (!this.scrollButtonState.mounted) return;
-				if (this.scrollIntoViewTimer) {
-					clearTimeout(this.scrollIntoViewTimer);
-				}
-				this.scrollIntoViewTimer = setTimeout(() => {
-					const activeItem = this.root.highlightedNode;
-					if (!activeItem) return;
-					this.root.scrollHighlightedNodeIntoView(activeItem);
-				}, 5);
-			});
-		});
-	}
-	/**
-	 * @param manual - if true, it means the function was invoked manually outside of an event
-	 * listener, so we don't call `handleUserScroll` to prevent the auto scroll from kicking in.
-	 */
-	handleScroll = (manual = false) => {
-		if (!manual) {
-			this.scrollButtonState.handleUserScroll();
-		}
-		if (!this.root.viewportNode) return;
-		const maxScroll = this.root.viewportNode.scrollHeight - this.root.viewportNode.clientHeight;
-		const paddingTop = Number.parseInt(getComputedStyle(this.root.viewportNode).paddingTop, 10);
-
-		this.canScrollDown = Math.ceil(this.root.viewportNode.scrollTop) < maxScroll - paddingTop;
-	};
-
-	handleAutoScroll = () => {
-		const viewport = this.root.viewportNode;
-		const selectedItem = this.root.highlightedNode;
-		if (!viewport || !selectedItem) return;
-		viewport.scrollTop = viewport.scrollTop + selectedItem.offsetHeight;
-	};
-
-	readonly props = $derived.by(
-		() =>
-			({
-				...this.scrollButtonState.props,
-				[this.root.getBitsAttr('scroll-down-button')]: '',
-			}) as const,
-	);
-}
-
-export class SelectScrollUpButtonState {
-	static create(opts: SelectScrollButtonImplStateOpts) {
-		return new SelectScrollUpButtonState(new SelectScrollButtonImplState(opts, getSelectContent()));
-	}
-	readonly scrollButtonState: SelectScrollButtonImplState;
-	readonly content: SelectContentState;
-	readonly root: SelectBaseRootState;
-	canScrollUp = $state(false);
-
-	constructor(scrollButtonState: SelectScrollButtonImplState) {
-		this.scrollButtonState = scrollButtonState;
-		this.content = scrollButtonState.content;
-		this.root = scrollButtonState.root;
-		this.scrollButtonState.onAutoScroll = this.handleAutoScroll;
-
-		$effect(() => {
-			this.root.viewportNode;
-			this.content.isPositioned;
-			return untrack(() => {
-				if (!this.root.viewportNode || !this.content.isPositioned) return;
-
-				this.handleScroll(true);
-				return on(this.root.viewportNode, 'scroll', () => this.handleScroll());
-			});
-		});
-	}
-
-	/**
-	 * @param manual - if true, it means the function was invoked manually outside of an event
-	 * listener, so we don't call `handleUserScroll` to prevent the auto scroll from kicking in.
-	 */
-	handleScroll = (manual = false) => {
-		if (!manual) {
-			this.scrollButtonState.handleUserScroll();
-		}
-		if (!this.root.viewportNode) return;
-		const paddingTop = Number.parseInt(getComputedStyle(this.root.viewportNode).paddingTop, 10);
-		this.canScrollUp = this.root.viewportNode.scrollTop - paddingTop > 0.1;
-	};
-
-	handleAutoScroll = () => {
-		if (!this.root.viewportNode || !this.root.highlightedNode) return;
-		this.root.viewportNode.scrollTop = this.root.viewportNode.scrollTop - this.root.highlightedNode.offsetHeight;
-	};
-
-	readonly props = $derived.by(
-		() =>
-			({
-				...this.scrollButtonState.props,
-				[this.root.getBitsAttr('scroll-up-button')]: '',
-			}) as const,
-	);
-}