bits-ui 1.0.0-next.8 → 1.0.0-next.81

package/dist/bits/select/select.svelte.js

@@ -1,158 +1,571 @@
-/**
- * This logic is adapted from Radix UI's Select component.
- * https://github.com/radix-ui/primitives/blob/main/packages/react/select/src/Select.tsx
- * Credit to the Radix UI team for the original implementation.
- */
-import { box } from "svelte-toolbelt";
-import { SvelteMap } from "svelte/reactivity";
-import { untrack } from "svelte";
-import { useId } from "../../internal/useId.js";
-import { createContext } from "../../internal/createContext.js";
-import { useFormControl } from "../../internal/useFormControl.svelte.js";
-import { useRefById } from "../../internal/useRefById.svelte.js";
-import { useTypeahead } from "../../internal/useTypeahead.svelte.js";
-import { getAriaDisabled, getAriaExpanded, getAriaHidden, getAriaRequired, getAriaSelected, getDataChecked, getDataDisabled, getDataOpenClosed, } from "../../internal/attrs.js";
+import { Context, Previous, watch } from "runed";
+import { afterTick, onDestroyEffect, srOnlyStyles, styleToString, useRefById, } from "svelte-toolbelt";
+import { on } from "svelte/events";
+import { backward, forward, next, prev } from "../../internal/arrays.js";
+import { getAriaExpanded, getAriaHidden, getDataDisabled, getDataOpenClosed, getDisabled, getRequired, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
-import { afterTick } from "../../internal/afterTick.js";
-import { clamp } from "../../internal/clamp.js";
-import { noop } from "../../internal/callbacks.js";
-import { addEventListener } from "../../internal/events.js";
-import { sleep } from "../../internal/sleep.js";
-import { afterSleep } from "../../internal/afterSleep.js";
-export const OPEN_KEYS = [kbd.SPACE, kbd.ENTER, kbd.ARROW_UP, kbd.ARROW_DOWN];
-export const SELECTION_KEYS = [" ", kbd.ENTER];
+import { noop } from "../../internal/noop.js";
+import { useDOMTypeahead } from "../../internal/use-dom-typeahead.svelte.js";
+import { useDataTypeahead } from "../../internal/use-data-typeahead.svelte.js";
+// prettier-ignore
+export const INTERACTION_KEYS = [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 FIRST_KEYS = [kbd.ARROW_DOWN, kbd.PAGE_UP, kbd.HOME];
+export const LAST_KEYS = [kbd.ARROW_UP, kbd.PAGE_DOWN, kbd.END];
+export const FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS];
+export const SELECTION_KEYS = [kbd.ENTER, kbd.SPACE];
 export const CONTENT_MARGIN = 10;
-const TRIGGER_ATTR = "data-select-trigger";
-const CONTENT_ATTR = "data-select-content";
-const ITEM_ATTR = "data-select-item";
-const VIEWPORT_ATTR = "data-select-viewport";
-const VALUE_ATTR = "data-select-value";
-const ITEM_TEXT_ATTR = "data-select-item-text";
-const CONTENT_WRAPPER_ATTR = "data-select-content-wrapper";
-const SCROLL_UP_BUTTON_ATTR = "data-select-scroll-up-button";
-const SCROLL_DOWN_BUTTON_ATTR = "data-select-scroll-down-button";
-const GROUP_ATTR = "data-select-group";
-const GROUP_LABEL_ATTR = "data-select-group-label";
-const SEPARATOR_ATTR = "data-select-separator";
-const ARROW_ATTR = "data-select-arrow";
-const ICON_ATTR = "data-select-icon";
-export const [setSelectRootContext, getSelectRootContext] = createContext("Select.Root");
-export const [setSelectTriggerContext] = createContext("Select.Trigger");
-export const [setSelectContentContext, getSelectContentContext] = createContext("Select.Content");
-export const [setSelectItemContext, getSelectItemContext] = createContext("Select.Item");
-export const [setSelectContentItemAlignedContext, getSelectContentItemAlignedContext] = createContext("Select.ContentItemAligned");
-const [setSelectGroupContext, getSelectGroupContext] = createContext("Select.Group");
-export class SelectRootState {
-    open;
-    value;
-    dir;
+class SelectBaseRootState {
     disabled;
     required;
-    triggerNode = $state(null);
-    valueId = box(useId());
-    valueNodeHasChildren = box(false);
-    valueNode = $state(null);
+    name;
+    loop;
+    open;
+    scrollAlignment;
+    items;
+    allowDeselect;
+    touchedInput = $state(false);
+    inputValue = $state("");
+    inputNode = $state(null);
     contentNode = $state(null);
-    contentId = $state(undefined);
-    triggerPointerDownPos = box({ x: 0, y: 0 });
-    contentFragment = $state(null);
-    // A set of all the native options we'll use to render the native select element under the hood
-    #nativeOptionsSet = new SvelteMap();
-    // A key we'll use to rerender the native select when the options change to keep it in sync
-    nativeSelectKey = $derived.by(() => {
-        return Array.from(this.#nativeOptionsSet.values())
-            .map((opt) => opt.current.value)
-            .join(";");
+    triggerNode = $state(null);
+    valueId = $state("");
+    highlightedNode = $state(null);
+    highlightedValue = $derived.by(() => {
+        if (!this.highlightedNode)
+            return null;
+        return this.highlightedNode.getAttribute("data-value");
+    });
+    highlightedId = $derived.by(() => {
+        if (!this.highlightedNode)
+            return undefined;
+        return this.highlightedNode.id;
     });
-    nativeOptionsArr = $derived.by(() => Array.from(this.#nativeOptionsSet.values()));
-    isFormControl = useFormControl(() => this.triggerNode);
+    highlightedLabel = $derived.by(() => {
+        if (!this.highlightedNode)
+            return null;
+        return this.highlightedNode.getAttribute("data-label");
+    });
+    isUsingKeyboard = $state(false);
+    isCombobox = $state(false);
+    bitsAttrs;
+    triggerPointerDownPos = $state.raw({ x: 0, y: 0 });
     constructor(props) {
-        this.open = props.open;
-        this.value = props.value;
-        this.dir = props.dir;
         this.disabled = props.disabled;
         this.required = props.required;
-    }
-    handleClose = () => {
-        this.open.current = false;
-        this.focusTriggerNode();
-    };
-    focusTriggerNode = (preventScroll = true) => {
-        const node = this.triggerNode;
-        if (!node)
-            return;
-        afterSleep(1, () => {
-            node.focus({ preventScroll });
+        this.name = props.name;
+        this.loop = props.loop;
+        this.open = props.open;
+        this.scrollAlignment = props.scrollAlignment;
+        this.isCombobox = props.isCombobox;
+        this.items = props.items;
+        this.allowDeselect = props.allowDeselect;
+        this.bitsAttrs = getSelectBitsAttrs(this);
+        $effect.pre(() => {
+            if (!this.open.current) {
+                this.setHighlightedNode(null);
+            }
         });
-    };
-    onNativeOptionAdd = (option) => {
-        this.#nativeOptionsSet.set(option.current.value, option);
-    };
-    onNativeOptionRemove = (option) => {
-        this.#nativeOptionsSet.delete(option.current.value);
-    };
-    getTriggerTypeaheadCandidateNodes = () => {
-        const node = this.contentFragment;
-        if (!node)
-            return [];
-        return Array.from(node.querySelectorAll(`[${ITEM_ATTR}]:not([data-disabled])`));
-    };
-    getCandidateNodes = () => {
+    }
+    setHighlightedNode(node) {
+        this.highlightedNode = node;
+        if (node) {
+            if (this.isUsingKeyboard) {
+                node.scrollIntoView({ block: "nearest" });
+            }
+        }
+    }
+    getCandidateNodes() {
         const node = this.contentNode;
         if (!node)
             return [];
-        return Array.from(node.querySelectorAll(`[${ITEM_ATTR}]:not([data-disabled])`));
-    };
-    createTrigger(props) {
-        return new SelectTriggerState(props, this);
+        const nodes = Array.from(node.querySelectorAll(`[${this.bitsAttrs.item}]:not([data-disabled])`));
+        return nodes;
     }
-    createValue() {
-        return new SelectValueState(this);
+    setHighlightedToFirstCandidate() {
+        this.setHighlightedNode(null);
+        const candidateNodes = this.getCandidateNodes();
+        if (!candidateNodes.length)
+            return;
+        this.setHighlightedNode(candidateNodes[0]);
     }
-    createContent() {
-        return new SelectContentFragState(this);
+    getNodeByValue(value) {
+        const candidateNodes = this.getCandidateNodes();
+        return candidateNodes.find((node) => node.dataset.value === value) ?? null;
     }
-    createContentImpl(props) {
-        return new SelectContentState(props, this);
+    setOpen(open) {
+        this.open.current = open;
+    }
+    toggleOpen() {
+        this.open.current = !this.open.current;
+    }
+    handleOpen() {
+        this.setOpen(true);
+    }
+    handleClose() {
+        this.setHighlightedNode(null);
+        this.setOpen(false);
+    }
+    toggleMenu() {
+        this.toggleOpen();
     }
 }
-class SelectTriggerState {
-    #root;
+class SelectSingleRootState extends SelectBaseRootState {
+    value;
+    isMulti = false;
+    hasValue = $derived.by(() => this.value.current !== "");
+    currentLabel = $derived.by(() => {
+        if (!this.items.current.length)
+            return "";
+        const match = this.items.current.find((item) => item.value === this.value.current)?.label;
+        return match ?? "";
+    });
+    candidateLabels = $derived.by(() => {
+        if (!this.items.current.length)
+            return [];
+        const filteredItems = this.items.current.filter((item) => !item.disabled);
+        return filteredItems.map((item) => item.label);
+    });
+    dataTypeaheadEnabled = $derived.by(() => {
+        if (this.isMulti)
+            return false;
+        if (this.items.current.length === 0)
+            return false;
+        return true;
+    });
+    constructor(props) {
+        super(props);
+        this.value = props.value;
+        $effect(() => {
+            if (!this.open.current && this.highlightedNode) {
+                this.setHighlightedNode(null);
+            }
+        });
+        watch(() => this.open.current, (isOpen) => {
+            if (!isOpen)
+                return;
+            afterTick(() => {
+                this.setInitialHighlightedNode();
+            });
+        });
+    }
+    includesItem(itemValue) {
+        return this.value.current === itemValue;
+    }
+    toggleItem(itemValue, itemLabel = itemValue) {
+        this.value.current = this.includesItem(itemValue) ? "" : itemValue;
+        this.inputValue = itemLabel;
+    }
+    setInitialHighlightedNode() {
+        if (this.highlightedNode && document.contains(this.highlightedNode))
+            return;
+        if (this.value.current !== "") {
+            const node = this.getNodeByValue(this.value.current);
+            if (node) {
+                this.setHighlightedNode(node);
+                return;
+            }
+        }
+        // if no value is set, we want to highlight the first item
+        const firstCandidate = this.getCandidateNodes()[0];
+        if (!firstCandidate)
+            return;
+        this.setHighlightedNode(firstCandidate);
+    }
+}
+class SelectMultipleRootState extends SelectBaseRootState {
+    value;
+    isMulti = true;
+    hasValue = $derived.by(() => this.value.current.length > 0);
+    constructor(props) {
+        super(props);
+        this.value = props.value;
+        watch(() => this.open.current, (isOpen) => {
+            if (!isOpen)
+                return;
+            afterTick(() => {
+                if (!this.highlightedNode) {
+                    this.setInitialHighlightedNode();
+                }
+            });
+        });
+    }
+    includesItem(itemValue) {
+        return this.value.current.includes(itemValue);
+    }
+    toggleItem(itemValue, itemLabel = itemValue) {
+        if (this.includesItem(itemValue)) {
+            this.value.current = this.value.current.filter((v) => v !== itemValue);
+        }
+        else {
+            this.value.current = [...this.value.current, itemValue];
+        }
+        this.inputValue = itemLabel;
+    }
+    setInitialHighlightedNode() {
+        if (this.highlightedNode)
+            return;
+        if (this.value.current.length && this.value.current[0] !== "") {
+            const node = this.getNodeByValue(this.value.current[0]);
+            if (node) {
+                this.setHighlightedNode(node);
+                return;
+            }
+        }
+        // if no value is set, we want to highlight the first item
+        const firstCandidate = this.getCandidateNodes()[0];
+        if (!firstCandidate)
+            return;
+        this.setHighlightedNode(firstCandidate);
+    }
+}
+class SelectInputState {
     #id;
     #ref;
-    #disabled;
-    #typeahead;
-    #isDisabled = $derived.by(() => {
-        return this.#root.disabled.current || this.#disabled.current;
-    });
+    root;
     constructor(props, root) {
+        this.root = root;
         this.#id = props.id;
         this.#ref = props.ref;
-        this.#root = root;
-        this.#disabled = props.disabled;
         useRefById({
             id: this.#id,
             ref: this.#ref,
             onRefChange: (node) => {
-                this.#root.triggerNode = node;
+                this.root.inputNode = node;
             },
         });
-        this.#typeahead = useTypeahead();
+        this.onkeydown = this.onkeydown.bind(this);
+        this.oninput = this.oninput.bind(this);
     }
-    #handleOpen = () => {
-        if (this.#isDisabled)
+    onkeydown(e) {
+        this.root.isUsingKeyboard = true;
+        if (e.key === kbd.ESCAPE)
             return;
-        this.#root.open.current = true;
-        this.#typeahead.resetTypeahead();
-    };
-    #handlePointerOpen = (e) => {
+        const open = this.root.open.current;
+        const inputValue = this.root.inputValue;
+        // 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 (!open) {
+            if (INTERACTION_KEYS.includes(e.key))
+                return;
+            if (e.key === kbd.TAB)
+                return;
+            if (e.key === kbd.BACKSPACE && inputValue === "")
+                return;
+            this.root.handleOpen();
+            // we need to wait for a tick after the menu opens to ensure the highlighted nodes are
+            // set correctly.
+            afterTick(() => {
+                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 highlightedValue = this.root.highlightedValue;
+            const isCurrentSelectedValue = highlightedValue === this.root.value.current;
+            if (!this.root.allowDeselect.current && isCurrentSelectedValue && !this.root.isMulti) {
+                this.root.handleClose();
+                return;
+            }
+            if (highlightedValue) {
+                this.root.toggleItem(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.loop.current;
+            let nextItem;
+            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();
+        }
+        // this.root.setHighlightedToFirstCandidate();
+    }
+    oninput(e) {
+        this.root.inputValue = e.currentTarget.value;
+        afterTick(() => {
+            this.root.setHighlightedToFirstCandidate();
+        });
+    }
+    props = $derived.by(() => ({
+        id: this.#id.current,
+        role: "combobox",
+        disabled: this.root.disabled.current ? true : undefined,
+        "aria-activedescendant": this.root.highlightedId,
+        "aria-autocomplete": "list",
+        "aria-expanded": getAriaExpanded(this.root.open.current),
+        "data-state": getDataOpenClosed(this.root.open.current),
+        "data-disabled": getDataDisabled(this.root.disabled.current),
+        onkeydown: this.onkeydown,
+        oninput: this.oninput,
+        [this.root.bitsAttrs.input]: "",
+    }));
+}
+class SelectComboTriggerState {
+    #id;
+    #ref;
+    root;
+    constructor(props, root) {
+        this.root = root;
+        this.#id = props.id;
+        this.#ref = props.ref;
+        useRefById({
+            id: this.#id,
+            ref: this.#ref,
+        });
+        this.onkeydown = this.onkeydown.bind(this);
+        this.onpointerdown = this.onpointerdown.bind(this);
+    }
+    onkeydown(e) {
+        if (e.key === kbd.ENTER || e.key === kbd.SPACE) {
+            e.preventDefault();
+            if (document.activeElement !== 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) {
+        if (this.root.disabled.current)
+            return;
+        e.preventDefault();
+        if (document.activeElement !== this.root.inputNode) {
+            this.root.inputNode?.focus();
+        }
+        this.root.toggleMenu();
+    }
+    props = $derived.by(() => ({
+        id: this.#id.current,
+        disabled: this.root.disabled.current ? true : undefined,
+        "aria-haspopup": "listbox",
+        "data-state": getDataOpenClosed(this.root.open.current),
+        "data-disabled": getDataDisabled(this.root.disabled.current),
+        [this.root.bitsAttrs.trigger]: "",
+        onpointerdown: this.onpointerdown,
+        onkeydown: this.onkeydown,
+    }));
+}
+class SelectTriggerState {
+    #id;
+    #ref;
+    root;
+    #domTypeahead;
+    #dataTypeahead;
+    constructor(props, root) {
+        this.root = root;
+        this.#id = props.id;
+        this.#ref = props.ref;
+        useRefById({
+            id: this.#id,
+            ref: this.#ref,
+            onRefChange: (node) => {
+                this.root.triggerNode = node;
+            },
+        });
+        this.#domTypeahead = useDOMTypeahead({
+            getCurrentItem: () => this.root.highlightedNode,
+            onMatch: (node) => {
+                this.root.setHighlightedNode(node);
+            },
+        });
+        this.#dataTypeahead = useDataTypeahead({
+            getCurrentItem: () => {
+                if (this.root.isMulti)
+                    return "";
+                return this.root.currentLabel;
+            },
+            onMatch: (label) => {
+                if (this.root.isMulti)
+                    return;
+                if (!this.root.items.current)
+                    return;
+                const matchedItem = this.root.items.current.find((item) => item.label === label);
+                if (!matchedItem)
+                    return;
+                this.root.value.current = matchedItem.value;
+            },
+            enabled: !this.root.isMulti && this.root.dataTypeaheadEnabled,
+        });
+        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.open.current = true;
+        this.#dataTypeahead.resetTypeahead();
+        this.#domTypeahead.resetTypeahead();
+    }
+    #handlePointerOpen(e) {
         this.#handleOpen();
-        this.#root.triggerPointerDownPos.current = {
+        this.root.triggerPointerDownPos = {
             x: Math.round(e.pageX),
             y: Math.round(e.pageY),
         };
-    };
-    #onclick = (e) => {
+    }
+    onkeydown(e) {
+        this.root.isUsingKeyboard = true;
+        if (e.key === kbd.ARROW_UP || e.key === kbd.ARROW_DOWN)
+            e.preventDefault();
+        if (!this.root.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.#dataTypeahead.handleTypeaheadSearch(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
+            afterTick(() => {
+                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.key === kbd.SPACE) && !e.isComposing) {
+            e.preventDefault();
+            const highlightedValue = this.root.highlightedValue;
+            const isCurrentSelectedValue = highlightedValue === this.root.value.current;
+            if (!this.root.allowDeselect.current && isCurrentSelectedValue && !this.root.isMulti) {
+                this.root.handleClose();
+                return;
+            }
+            //"" is a valid value for a select item so we need to check for that
+            if (highlightedValue !== null) {
+                this.root.toggleItem(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.loop.current;
+            let nextItem;
+            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;
+        // prevent space from being considered with typeahead
+        if (e.code === "Space")
+            return;
+        const candidateNodes = this.root.getCandidateNodes();
+        if (e.key === kbd.TAB)
+            return;
+        if (!isModifierKey && isCharacterKey) {
+            this.#domTypeahead.handleTypeaheadSearch(e.key, candidateNodes);
+            return;
+        }
+        if (!this.root.highlightedNode) {
+            this.root.setHighlightedToFirstCandidate();
+        }
+    }
+    onclick(e) {
         // 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
@@ -160,10 +573,15 @@ class SelectTriggerState {
         // this only runs for a label 'click'
         const currTarget = e.currentTarget;
         currTarget.focus();
-    };
-    #onpointerdown = (e) => {
-        // prevent opening on touch down which can be triggered
-        // when scrolling on touch devices (unexpected)
+    }
+    /**
+     * `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) => {
+        if (this.root.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
@@ -174,699 +592,298 @@ class SelectTriggerState {
         // 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.open.current === false) {
+            if (this.root.open.current === false) {
                 this.#handlePointerOpen(e);
                 e.preventDefault();
             }
             else {
-                this.#root.handleClose();
+                this.root.handleClose();
             }
         }
     };
-    #onpointerup = (e) => {
+    onpointerup = (e) => {
         e.preventDefault();
         if (e.pointerType === "touch") {
             this.#handlePointerOpen(e);
         }
     };
-    #onkeydown = (e) => {
-        const isTypingAhead = this.#typeahead.search.current !== "";
-        const isModifierKey = e.ctrlKey || e.altKey || e.metaKey;
-        if (!isModifierKey && e.key.length === 1) {
-            if (isTypingAhead && e.key === " ")
-                return;
-        }
-        const newItem = this.#typeahead.handleTypeaheadSearch(e.key, this.#root.getTriggerTypeaheadCandidateNodes());
-        if (newItem && newItem.dataset.value) {
-            this.#root.value.current = newItem.dataset.value;
-        }
-        if (OPEN_KEYS.includes(e.key)) {
-            this.#handleOpen();
-            e.preventDefault();
-        }
-    };
     props = $derived.by(() => ({
         id: this.#id.current,
-        disabled: this.#isDisabled,
-        role: "combobox",
-        type: "button",
-        "aria-controls": this.#root.contentId,
-        "aria-expanded": getAriaExpanded(this.#root.open.current),
-        "aria-required": getAriaRequired(this.#root.required.current),
-        "aria-autocomplete": "none",
-        dir: this.#root.dir.current,
-        "data-state": getDataOpenClosed(this.#root.open.current),
-        "data-disabled": getDataDisabled(this.#isDisabled),
-        "data-placeholder": shouldShowPlaceholder(this.#root.value.current)
-            ? ""
-            : undefined,
-        [TRIGGER_ATTR]: "",
-        onclick: this.#onclick,
-        onpointerdown: this.#onpointerdown,
-        onpointerup: this.#onpointerup,
-        onkeydown: this.#onkeydown,
-    }));
-}
-class SelectValueState {
-    root;
-    showPlaceholder = $derived.by(() => shouldShowPlaceholder(this.root.value.current));
-    ref = box(null);
-    constructor(root) {
-        this.root = root;
-        useRefById({
-            id: this.root.valueId,
-            ref: this.ref,
-            onRefChange: (node) => {
-                this.root.valueNode = node;
-            },
-        });
-    }
-    props = $derived.by(() => ({
-        id: this.root.valueId.current,
+        disabled: this.root.disabled.current ? true : undefined,
+        "aria-haspopup": "listbox",
         "data-state": getDataOpenClosed(this.root.open.current),
         "data-disabled": getDataDisabled(this.root.disabled.current),
-        [VALUE_ATTR]: "",
-        style: {
-            pointerEvents: "none",
-        },
+        "data-placeholder": this.root.hasValue ? undefined : "",
+        [this.root.bitsAttrs.trigger]: "",
+        onpointerdown: this.onpointerdown,
+        onkeydown: this.onkeydown,
+        onclick: this.onclick,
+        onpointerup: this.onpointerup,
     }));
 }
-class SelectContentFragState {
-    root;
-    constructor(root) {
-        this.root = root;
-        $effect(() => {
-            this.root.contentFragment = new DocumentFragment();
-        });
-    }
-}
-export class SelectContentState {
+class SelectContentState {
     id;
     ref;
-    root;
     viewportNode = $state(null);
-    selectedItemId = box(useId());
-    selectedItemTextId = box(useId());
-    selectedItemText = box(null);
-    position;
-    isPositioned = box(false);
-    firstValidItemFound = box(false);
-    typeahead;
-    alignedPositionState = null;
+    root;
+    isPositioned = $state(false);
     constructor(props, root) {
-        this.position = props.position;
+        this.root = root;
         this.id = props.id;
         this.ref = props.ref;
-        this.root = root;
-        this.typeahead = useTypeahead();
         useRefById({
             id: this.id,
             ref: this.ref,
-            condition: () => this.root.open.current,
             onRefChange: (node) => {
                 this.root.contentNode = node;
-                this.root.contentId = node?.id;
             },
+            deps: () => this.root.open.current,
         });
-        $effect(() => {
-            this.root.open.current;
-            untrack(() => {
-                let cleanup = [noop];
-                afterTick(() => {
-                    const node = document.getElementById(this.id.current);
-                    if (!node)
-                        return;
-                    let pointerMoveDelta = { x: 0, y: 0 };
-                    const handlePointerMove = (e) => {
-                        pointerMoveDelta = {
-                            x: Math.abs(Math.round(e.pageX) -
-                                (this.root.triggerPointerDownPos.current?.x ?? 0)),
-                            y: Math.abs(Math.round(e.pageY) -
-                                (this.root.triggerPointerDownPos.current?.y ?? 0)),
-                        };
-                    };
-                    const handlePointerUp = (e) => {
-                        if (e.pointerType === "touch")
-                            return;
-                        if (pointerMoveDelta.x <= 10 && pointerMoveDelta.y <= 10) {
-                            e.preventDefault();
-                        }
-                        else {
-                            if (!this.root.contentNode?.contains(e.target)) {
-                                this.root.handleClose();
-                            }
-                        }
-                        document.removeEventListener("pointermove", handlePointerMove);
-                        this.root.triggerPointerDownPos.current = null;
-                    };
-                    if (this.root.triggerPointerDownPos.current !== null) {
-                        const pointerMove = addEventListener(document, "pointermove", handlePointerMove);
-                        const pointerUp = addEventListener(document, "pointerup", handlePointerUp, {
-                            capture: true,
-                            once: true,
-                        });
-                        for (const cleanupFn of cleanup)
-                            cleanupFn();
-                        cleanup = [pointerMove, pointerUp];
-                    }
-                    return () => {
-                        for (const cleanupFn of cleanup)
-                            cleanupFn();
-                    };
-                });
-            });
-        });
-        $effect(() => {
-            if (this.isPositioned.current) {
-                this.focusSelectedItem();
-            }
-        });
-        $effect(() => {
-            if (this.root.open.current === false) {
-                this.isPositioned.current = false;
-            }
+        onDestroyEffect(() => (this.root.contentNode = null));
+        watch(() => this.root.open.current, (isOpen) => {
+            if (isOpen)
+                return;
+            this.isPositioned = false;
         });
+        this.onpointermove = this.onpointermove.bind(this);
+        this.handleInteractOutside = this.handleInteractOutside.bind(this);
     }
-    focusFirst = (candidates) => {
-        const [firstItem, ...restItems] = this.root.getCandidateNodes();
-        const [lastItem] = restItems.slice(-1);
-        const PREV_FOCUSED_ELEMENT = document.activeElement;
-        for (const candidate of candidates) {
-            if (candidate === PREV_FOCUSED_ELEMENT)
-                return;
-            candidate?.scrollIntoView({ block: "nearest" });
-            // viewport might have padding so scroll to the edge when focusing first/last
-            const viewport = this.viewportNode;
-            if (candidate === firstItem && viewport) {
-                viewport.scrollTop = 0;
-            }
-            if (candidate === lastItem && viewport) {
-                viewport.scrollTop = viewport.scrollHeight;
-            }
-            candidate?.focus();
-            if (document.activeElement !== PREV_FOCUSED_ELEMENT)
-                return;
-        }
-    };
-    onItemLeave = () => {
-        this.root.contentNode?.focus();
-    };
-    getSelectedItem = () => {
-        const candidates = this.root.getCandidateNodes();
-        const selectedItemNode = candidates.find((node) => node?.dataset.value === this.root.value.current) ?? null;
-        const first = candidates[0] ?? null;
-        if (selectedItemNode) {
-            const selectedItemTextNode = selectedItemNode.querySelector(`[${ITEM_TEXT_ATTR}]`);
+    onpointermove(_) {
+        this.root.isUsingKeyboard = false;
+    }
+    #styles = $derived.by(() => {
+        if (this.root.isCombobox) {
             return {
-                selectedItemNode,
-                selectedItemTextNode,
+                "--bits-combobox-content-transform-origin": "var(--bits-floating-transform-origin)",
+                "--bits-combobox-content-available-width": "var(--bits-floating-available-width)",
+                "--bits-combobox-content-available-height": "var(--bits-floating-available-height)",
+                "--bits-combobox-anchor-width": "var(--bits-floating-anchor-width)",
+                "--bits-combobox-anchor-height": "var(--bits-floating-anchor-height)",
             };
         }
         else {
-            if (first) {
-                const firstItemText = first.querySelector(`[${ITEM_TEXT_ATTR}]`);
-                return {
-                    selectedItemNode: first,
-                    selectedItemTextNode: firstItemText,
-                };
-            }
-        }
-        return {
-            selectedItemNode: null,
-            selectedItemTextNode: null,
-        };
-    };
-    focusSelectedItem = () => {
-        afterTick(() => {
-            const candidates = this.root.getCandidateNodes();
-            const selected = candidates.find((node) => node?.dataset.value === this.root.value.current) ?? null;
-            const first = candidates[0] ?? null;
-            this.focusFirst([selected, first]);
-        });
-    };
-    itemRegister = (value, disabled) => {
-        const isFirstValidItem = !this.firstValidItemFound.current && !disabled;
-        const isSelectedItem = this.root.value.current !== undefined && this.root.value.current === value;
-        if (isSelectedItem || isFirstValidItem) {
-            if (isFirstValidItem) {
-                this.firstValidItemFound.current = true;
-            }
-        }
-    };
-    itemTextRegister = (node, value, disabled) => {
-        const isFirstValidItem = !this.firstValidItemFound.current && !disabled;
-        const isSelectedItem = this.root.value.current !== undefined && this.root.value.current === value;
-        if (isSelectedItem || isFirstValidItem) {
-            this.selectedItemText.current = node;
-        }
-    };
-    #onkeydown = (e) => {
-        const isModifierKey = e.ctrlKey || e.altKey || e.metaKey;
-        if (e.key === "Tab")
-            e.preventDefault();
-        if (!isModifierKey && e.key.length === 1) {
-            this.typeahead.handleTypeaheadSearch(e.key, this.root.getCandidateNodes());
+            return {
+                "--bits-select-content-transform-origin": "var(--bits-floating-transform-origin)",
+                "--bits-select-content-available-width": "var(--bits-floating-available-width)",
+                "--bits-select-content-available-height": "var(--bits-floating-available-height)",
+                "--bits-select-anchor-width": "var(--bits-floating-anchor-width)",
+                "--bits-select-anchor-height": "var(--bits-floating-anchor-height)",
+            };
         }
-        if ([kbd.ARROW_UP, kbd.ARROW_DOWN, kbd.HOME, kbd.END].includes(e.key)) {
-            let candidateNodes = this.root.getCandidateNodes();
-            if (e.key === kbd.ARROW_UP || e.key === kbd.END) {
-                candidateNodes = candidateNodes.slice().reverse();
-            }
-            if (e.key === kbd.ARROW_UP || e.key === kbd.ARROW_DOWN) {
-                const currElement = e.target;
-                const currIndex = candidateNodes.indexOf(currElement);
-                candidateNodes = candidateNodes.slice(currIndex + 1);
-            }
-            setTimeout(() => this.focusFirst(candidateNodes));
+    });
+    handleInteractOutside(e) {
+        if (e.target === this.root.triggerNode || e.target === this.root.inputNode) {
             e.preventDefault();
         }
-    };
-    #oncontextmenu = (e) => {
-        e.preventDefault();
-    };
+    }
+    snippetProps = $derived.by(() => ({ open: this.root.open.current }));
     props = $derived.by(() => ({
         id: this.id.current,
         role: "listbox",
         "data-state": getDataOpenClosed(this.root.open.current),
+        [this.root.bitsAttrs.content]: "",
         style: {
             display: "flex",
             flexDirection: "column",
             outline: "none",
+            boxSizing: "border-box",
+            pointerEvents: "auto",
+            ...this.#styles,
         },
-        oncontextmenu: this.#oncontextmenu,
-        onkeydown: this.#onkeydown,
-        tabIndex: -1,
-        [CONTENT_ATTR]: "",
+        onpointermove: this.onpointermove,
     }));
-    createItem(props) {
-        return new SelectItemState(props, this);
-    }
-    createViewport(props) {
-        return new SelectViewportState(props, this);
-    }
-    createItemAlignedPosition(props) {
-        return new SelectItemAlignedPositionState(props, this);
-    }
-    createFloatingPosition() {
-        return new SelectFloatingPositionState(this);
-    }
-    createScrollDownButton(props) {
-        const state = new SelectScrollButtonImplState(props, this);
-        return new SelectScrollDownButtonState(state);
-    }
-    createScrollUpButton(props) {
-        const state = new SelectScrollButtonImplState(props, this);
-        return new SelectScrollUpButtonState(state);
-    }
 }
 class SelectItemState {
     #id;
     #ref;
     root;
-    content;
-    textId = box(undefined);
     value;
+    label;
+    onHighlight;
+    onUnhighlight;
     disabled;
-    textValue;
-    isSelected = $derived.by(() => this.root.value.current === this.value.current);
-    isFocused = box(false);
-    node = box(null);
-    trueTextValue = box("");
-    constructor(props, content) {
-        this.#id = props.id;
-        this.#ref = props.ref;
-        this.root = content.root;
-        this.content = content;
+    isSelected = $derived.by(() => this.root.includesItem(this.value.current));
+    isHighlighted = $derived.by(() => this.root.highlightedValue === this.value.current);
+    prevHighlighted = new Previous(() => this.isHighlighted);
+    textId = $state("");
+    mounted = $state(false);
+    constructor(props, root) {
+        this.root = root;
         this.value = props.value;
         this.disabled = props.disabled;
-        this.textValue = props.textValue;
+        this.label = props.label;
+        this.onHighlight = props.onHighlight;
+        this.onUnhighlight = props.onUnhighlight;
+        this.#id = props.id;
+        this.#ref = props.ref;
+        $effect(() => {
+            if (this.isHighlighted) {
+                this.onHighlight.current();
+            }
+            else if (this.prevHighlighted.current) {
+                this.onUnhighlight.current();
+            }
+        });
         useRefById({
             id: this.#id,
             ref: this.#ref,
         });
-        $effect(() => {
-            const node = this.#ref.current;
-            if (!node)
+        watch(() => this.mounted, (isMounted) => {
+            if (!isMounted)
                 return;
-            this.content.itemRegister(this.value.current, this.disabled.current);
+            this.root.setInitialHighlightedNode();
         });
+        this.onpointerdown = this.onpointerdown.bind(this);
+        this.onpointerup = this.onpointerup.bind(this);
+        this.onpointermove = this.onpointermove.bind(this);
     }
-    onItemTextChange = (node) => {
-        this.trueTextValue.current = ((this.textValue?.current || node?.textContent) ?? "").trim();
-    };
-    setTextId = (id) => {
-        this.textId.current = id;
-    };
-    handleSelect = async (e) => {
-        if (e?.defaultPrevented)
-            return;
-        if (!this.disabled.current) {
-            this.root.value.current = this.value.current;
-            this.root.handleClose();
-        }
-    };
-    #onpointermove = async (e) => {
-        if (e.defaultPrevented)
-            return;
-        if (this.disabled.current) {
-            this.content.onItemLeave();
-        }
-        else {
-            e.currentTarget.focus({ preventScroll: true });
-        }
-    };
-    #onpointerleave = async (e) => {
+    snippetProps = $derived.by(() => ({
+        selected: this.isSelected,
+        highlighted: this.isHighlighted,
+    }));
+    onpointerdown(e) {
+        // prevent focus from leaving the combobox
+        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) {
         if (e.defaultPrevented)
             return;
-        if (e.currentTarget === document.activeElement) {
-            this.content.onItemLeave();
-        }
-    };
-    #onpointerdown = (e) => {
-        e.currentTarget.focus({ preventScroll: true });
-    };
-    #onpointerup = async (e) => {
-        await this.handleSelect(e);
-    };
-    #onkeydown = async (e) => {
-        if (e.defaultPrevented)
+        // prevent any default behavior
+        e.preventDefault();
+        if (this.disabled.current)
             return;
-        const isTypingAhead = this.content.typeahead.search.current !== "";
-        if (isTypingAhead && e.key === kbd.SPACE)
+        const isCurrentSelectedValue = this.value.current === this.root.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.allowDeselect.current && isCurrentSelectedValue && !this.root.isMulti) {
+            this.root.handleClose();
             return;
-        if (SELECTION_KEYS.includes(e.key)) {
-            this.handleSelect();
         }
-        // prevent page scroll on space
-        if (e.key === kbd.SPACE)
-            e.preventDefault();
-    };
-    #onfocus = () => {
-        this.isFocused.current = true;
-    };
-    #onblur = () => {
-        this.isFocused.current = false;
-    };
-    #ontouchend = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-    };
+        // otherwise, toggle the item and if we're not in a multi select, close the menu
+        this.root.toggleItem(this.value.current, this.label.current);
+        if (!this.root.isMulti && !isCurrentSelectedValue) {
+            this.root.handleClose();
+        }
+    }
+    onpointermove(_) {
+        if (this.root.highlightedNode !== this.#ref.current) {
+            this.root.setHighlightedNode(this.#ref.current);
+        }
+    }
     props = $derived.by(() => ({
         id: this.#id.current,
         role: "option",
-        "aria-labelledby": this.textId.current ?? undefined,
-        "data-highlighted": this.isFocused.current ? "" : undefined,
-        "aria-selected": getAriaSelected(this.isSelected),
-        "data-state": getDataChecked(this.isSelected),
-        "aria-disabled": getAriaDisabled(this.disabled.current),
-        "data-disabled": getDataDisabled(this.disabled.current),
-        "data-selected": this.isSelected ? "" : undefined,
+        "aria-selected": this.root.includesItem(this.value.current) ? "true" : undefined,
         "data-value": this.value.current,
-        tabindex: this.disabled.current ? undefined : -1,
-        [ITEM_ATTR]: "",
-        //
-        onfocus: this.#onfocus,
-        onpointermove: this.#onpointermove,
-        onpointerleave: this.#onpointerleave,
-        onpointerdown: this.#onpointerdown,
-        onpointerup: this.#onpointerup,
-        onkeydown: this.#onkeydown,
-        onblur: this.#onblur,
-        ontouchend: this.#ontouchend,
+        "data-disabled": getDataDisabled(this.disabled.current),
+        "data-highlighted": this.root.highlightedValue === this.value.current ? "" : undefined,
+        "data-selected": this.root.includesItem(this.value.current) ? "" : undefined,
+        "data-label": this.label.current,
+        [this.root.bitsAttrs.item]: "",
+        onpointermove: this.onpointermove,
+        onpointerdown: this.onpointerdown,
+        onpointerup: this.onpointerup,
     }));
-    createText(props) {
-        return new SelectItemTextState(props, this);
-    }
 }
-class SelectItemTextState {
-    item;
+class SelectGroupState {
     #id;
     #ref;
-    node = box(null);
-    nativeOption = box.with(() => ({
-        key: this.item.value.current,
-        value: this.item.value.current,
-        disabled: this.item.disabled.current,
-        innerHTML: this.node.current?.textContent,
-    }));
-    constructor(props, item) {
+    root;
+    labelNode = $state(null);
+    constructor(props, root) {
         this.#id = props.id;
         this.#ref = props.ref;
-        this.item = item;
-        this.item.setTextId(this.#id.current);
+        this.root = root;
         useRefById({
             id: this.#id,
             ref: this.#ref,
         });
-        $effect(() => {
-            this.item.setTextId(this.#id.current);
-        });
-        $effect(() => {
-            untrack(() => {
-                const textNode = this.item.root.contentFragment?.getElementById(this.#id.current);
-                if (!textNode)
-                    return;
-                this.item.onItemTextChange(textNode);
-                this.item.content.itemTextRegister(textNode, this.item.value.current, this.item.disabled.current);
-                this.item.root.onNativeOptionAdd(box.with(() => ({
-                    key: this.item.value.current,
-                    value: this.item.value.current,
-                    disabled: this.item.disabled.current,
-                    innerHTML: textNode?.textContent,
-                })));
-            });
-        });
-        $effect(() => {
-            return () => {
-                this.item.root.onNativeOptionRemove(this.nativeOption);
-            };
-        });
     }
     props = $derived.by(() => ({
         id: this.#id.current,
-        [ITEM_TEXT_ATTR]: "",
+        role: "group",
+        [this.root.bitsAttrs.group]: "",
+        "aria-labelledby": this.labelNode?.id ?? undefined,
     }));
 }
-class SelectItemAlignedPositionState {
-    root;
-    content;
-    shouldExpandOnScroll = $state(false);
-    shouldReposition = $state(false);
-    contentWrapperId = $state(useId());
-    onPlaced;
-    contentZIndex = $state("");
-    constructor(props, content) {
-        this.root = content.root;
-        this.content = content;
-        this.onPlaced = props.onPlaced;
-        $effect(() => {
-            afterTick(() => {
-                this.position();
-                const contentNode = document.getElementById(this.content.id.current);
-                if (contentNode) {
-                    this.contentZIndex = window.getComputedStyle(contentNode).zIndex;
-                }
-            });
+class SelectGroupHeadingState {
+    #id;
+    #ref;
+    group;
+    constructor(props, group) {
+        this.#id = props.id;
+        this.#ref = props.ref;
+        this.group = group;
+        useRefById({
+            id: this.#id,
+            ref: this.#ref,
+            onRefChange: (node) => {
+                group.labelNode = node;
+            },
         });
     }
-    position = () => {
-        afterTick(() => {
-            const { selectedItemNode, selectedItemTextNode } = this.content.getSelectedItem();
-            const contentNode = this.root.contentNode;
-            const contentWrapperNode = document.getElementById(this.contentWrapperId);
-            const viewportNode = this.content.viewportNode;
-            const triggerNode = this.root.triggerNode;
-            const valueNode = document.getElementById(this.root.valueId.current);
-            if (!contentNode ||
-                !contentWrapperNode ||
-                !viewportNode ||
-                !selectedItemNode ||
-                !selectedItemTextNode ||
-                !triggerNode ||
-                !valueNode) {
-                return;
-            }
-            const triggerRect = triggerNode.getBoundingClientRect();
-            // horizontal positioning
-            const contentRect = contentNode.getBoundingClientRect();
-            const valueRect = valueNode.getBoundingClientRect();
-            const itemTextRect = selectedItemTextNode.getBoundingClientRect();
-            if (this.root.dir.current === "rtl") {
-                const itemTextOffset = itemTextRect.left - contentRect.left;
-                const left = valueRect.left - itemTextOffset;
-                const leftDelta = triggerRect.left - left;
-                const minContentWidth = triggerRect.width + leftDelta;
-                const contentWidth = Math.max(minContentWidth, contentRect.width);
-                const rightEdge = window.innerWidth - CONTENT_MARGIN;
-                const clampedLeft = clamp(left, CONTENT_MARGIN, rightEdge - contentWidth);
-                contentWrapperNode.style.minWidth = `${minContentWidth}px`;
-                contentWrapperNode.style.left = `${clampedLeft}px`;
-            }
-            else {
-                const itemTextOffset = contentRect.right - itemTextRect.right;
-                const right = window.innerWidth - valueRect.right - itemTextOffset;
-                const rightDelta = window.innerWidth - triggerRect.right - right;
-                const minContentWidth = triggerRect.width + rightDelta;
-                const contentWidth = Math.max(minContentWidth, contentRect.width);
-                const leftEdge = window.innerWidth - CONTENT_MARGIN;
-                const clampedRight = clamp(right, CONTENT_MARGIN, leftEdge - contentWidth);
-                contentWrapperNode.style.minWidth = `${minContentWidth}px`;
-                contentWrapperNode.style.right = `${clampedRight}px`;
-            }
-            // vertical positioning
-            const items = this.root.getCandidateNodes();
-            const availableHeight = window.innerHeight - CONTENT_MARGIN * 2;
-            const itemsHeight = viewportNode.scrollHeight;
-            const contentStyles = window.getComputedStyle(contentNode);
-            const contentBorderTopWidth = Number.parseInt(contentStyles.borderTopWidth, 10);
-            const contentPaddingTop = Number.parseInt(contentStyles.paddingTop, 10);
-            const contentBorderBottomWidth = Number.parseInt(contentStyles.borderBottomWidth, 10);
-            const contentPaddingBottom = Number.parseInt(contentStyles.paddingBottom, 10);
-            const fullContentHeight = contentBorderTopWidth +
-                contentPaddingTop +
-                itemsHeight +
-                contentPaddingBottom +
-                contentBorderBottomWidth;
-            const minContentHeight = Math.min(selectedItemNode.offsetHeight * 5, fullContentHeight);
-            const viewportStyles = window.getComputedStyle(viewportNode);
-            const viewportPaddingTop = Number.parseInt(viewportStyles.paddingTop, 10);
-            const viewportPaddingBottom = Number.parseInt(viewportStyles.paddingBottom, 10);
-            const topEdgeToTriggerMiddle = triggerRect.top + triggerRect.height / 2 - CONTENT_MARGIN;
-            const triggerMiddleToBottomEdge = availableHeight - topEdgeToTriggerMiddle;
-            const selectedItemHalfHeight = selectedItemNode.offsetHeight / 2;
-            const itemOffsetMiddle = selectedItemNode.offsetTop + selectedItemHalfHeight;
-            const contentTopToItemMiddle = contentBorderTopWidth + contentPaddingTop + itemOffsetMiddle;
-            const itemMiddleToContentBottom = fullContentHeight - contentTopToItemMiddle;
-            const willAlignWithoutTopOverflow = contentTopToItemMiddle <= topEdgeToTriggerMiddle;
-            if (willAlignWithoutTopOverflow) {
-                const isLastItem = selectedItemNode === items[items.length - 1];
-                contentWrapperNode.style.bottom = `${0}px`;
-                const viewportOffsetBottom = contentNode.clientHeight - viewportNode.offsetTop - viewportNode.offsetHeight;
-                const clampedTriggerMiddleToBottomEdge = Math.max(triggerMiddleToBottomEdge, selectedItemHalfHeight +
-                    // viewport might have padding bottom, include it to avoid a scrollable viewport
-                    (isLastItem ? viewportPaddingBottom : 0) +
-                    viewportOffsetBottom +
-                    contentBorderBottomWidth);
-                const height = contentTopToItemMiddle + clampedTriggerMiddleToBottomEdge;
-                contentWrapperNode.style.height = `${height}px`;
-            }
-            else {
-                const isFirstItem = selectedItemNode === items[0];
-                contentWrapperNode.style.top = `${0}px`;
-                const clampedTopEdgeToTriggerMiddle = Math.max(topEdgeToTriggerMiddle, contentBorderTopWidth +
-                    viewportNode.offsetTop +
-                    // viewport might have padding top, include it to avoid a scrollable viewport
-                    (isFirstItem ? viewportPaddingTop : 0) +
-                    selectedItemHalfHeight);
-                const height = clampedTopEdgeToTriggerMiddle + itemMiddleToContentBottom;
-                contentWrapperNode.style.height = `${height}px`;
-                viewportNode.scrollTop =
-                    contentTopToItemMiddle - topEdgeToTriggerMiddle + viewportNode.offsetTop;
-            }
-            contentWrapperNode.style.margin = `${CONTENT_MARGIN}px 0`;
-            contentWrapperNode.style.minHeight = `${minContentHeight}px`;
-            contentWrapperNode.style.maxHeight = `${availableHeight}px`;
-            this.onPlaced.current();
-        });
-        requestAnimationFrame(() => (this.shouldExpandOnScroll = true));
-    };
-    handleScrollButtonChange = (id) => {
-        afterTick(() => {
-            const node = document.getElementById(id);
-            if (!node)
-                return;
-            if (!this.shouldReposition)
-                return;
-            this.position();
-            this.content.focusSelectedItem();
-            this.shouldReposition = false;
-        });
-    };
-    wrapperProps = $derived.by(() => ({
-        id: this.contentWrapperId,
-        style: {
-            display: "flex",
-            flexDirection: "column",
-            position: "fixed",
-            zIndex: this.contentZIndex,
-        },
-        [CONTENT_WRAPPER_ATTR]: "",
-    }));
     props = $derived.by(() => ({
-        id: this.content.id.current,
-        style: {
-            boxSizing: "border-box",
-            maxHeight: "100%",
-        },
+        id: this.#id.current,
+        [this.group.root.bitsAttrs["group-label"]]: "",
     }));
 }
-class SelectFloatingPositionState {
+class SelectHiddenInputState {
+    #value;
     root;
-    content;
-    constructor(content) {
-        this.root = content.root;
-        this.content = content;
+    shouldRender = $derived.by(() => this.root.name.current !== "");
+    constructor(props, root) {
+        this.root = root;
+        this.#value = props.value;
+        this.onfocus = this.onfocus.bind(this);
     }
-    props = {
-        style: {
-            boxSizing: "border-box",
-            "--bits-select-content-transform-origin": "var(--bits-floating-transform-origin)",
-            "--bits-select-content-available-width": "var(--bits-floating-available-width)",
-            "--bits-select-content-available-height": "var(--bits-floating-available-height)",
-            "--bits-select-anchor-width": "var(--bits-floating-anchor-width)",
-            "--bits-select-anchor-height": "var(--bits-floating-anchor-height)",
-        },
-    };
+    onfocus(e) {
+        e.preventDefault();
+        if (!this.root.isCombobox) {
+            this.root.triggerNode?.focus();
+        }
+        else {
+            this.root.inputNode?.focus();
+        }
+    }
+    props = $derived.by(() => ({
+        disabled: getDisabled(this.root.disabled.current),
+        required: getRequired(this.root.required.current),
+        name: this.root.name.current,
+        value: this.#value.current,
+        style: styleToString(srOnlyStyles),
+        tabindex: -1,
+        onfocus: this.onfocus,
+    }));
 }
 class SelectViewportState {
-    id;
-    ref;
+    #id;
+    #ref;
+    root;
     content;
     prevScrollTop = $state(0);
     constructor(props, content) {
-        this.id = props.id;
+        this.#id = props.id;
+        this.#ref = props.ref;
         this.content = content;
-        this.ref = props.ref;
+        this.root = content.root;
         useRefById({
-            id: this.id,
-            ref: this.ref,
+            id: this.#id,
+            ref: this.#ref,
             onRefChange: (node) => {
                 this.content.viewportNode = node;
             },
-            condition: () => this.content.root.open.current,
+            deps: () => this.root.open.current,
         });
     }
-    #onscroll = (e) => {
-        afterTick(() => {
-            const viewport = e.currentTarget;
-            const shouldExpandOnScroll = this.content.alignedPositionState?.shouldExpandOnScroll ?? undefined;
-            const contentWrapper = document.getElementById(this.content.alignedPositionState?.contentWrapperId ?? "");
-            if (shouldExpandOnScroll && contentWrapper) {
-                const scrolledBy = Math.abs(this.prevScrollTop - viewport.scrollTop);
-                if (scrolledBy > 0) {
-                    const availableHeight = window.innerHeight - CONTENT_MARGIN * 2;
-                    const cssMinHeight = Number.parseFloat(contentWrapper.style.minHeight);
-                    const cssHeight = Number.parseFloat(contentWrapper.style.height);
-                    const prevHeight = Math.max(cssMinHeight, cssHeight);
-                    if (prevHeight < availableHeight) {
-                        const nextHeight = prevHeight + scrolledBy;
-                        const clampedNextHeight = Math.min(availableHeight, nextHeight);
-                        const heightDiff = nextHeight - clampedNextHeight;
-                        contentWrapper.style.height = `${clampedNextHeight}px`;
-                        if (contentWrapper.style.bottom === "0px") {
-                            viewport.scrollTop = heightDiff > 0 ? heightDiff : 0;
-                            contentWrapper.style.justifyContent = "flex-end";
-                        }
-                    }
-                }
-            }
-            this.prevScrollTop = viewport.scrollTop;
-        });
-    };
     props = $derived.by(() => ({
-        id: this.id.current,
+        id: this.#id.current,
         role: "presentation",
-        [VIEWPORT_ATTR]: "",
+        [this.root.bitsAttrs.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
@@ -875,321 +892,216 @@ class SelectViewportState {
             flex: 1,
             overflow: "auto",
         },
-        onscroll: this.#onscroll,
     }));
 }
 class SelectScrollButtonImplState {
     id;
     ref;
     content;
-    alignedPositionState;
+    root;
     autoScrollTimer = $state(null);
     onAutoScroll = noop;
     mounted;
     constructor(props, content) {
-        this.content = content;
         this.ref = props.ref;
-        this.alignedPositionState = content.alignedPositionState;
         this.id = props.id;
         this.mounted = props.mounted;
+        this.content = content;
+        this.root = content.root;
         useRefById({
             id: this.id,
             ref: this.ref,
-            condition: () => this.mounted.current,
-        });
-        $effect(() => {
-            if (this.mounted.current) {
-                const activeItem = this.content.root
-                    .getCandidateNodes()
-                    .find((node) => node === document.activeElement);
-                activeItem?.scrollIntoView({ block: "nearest" });
-            }
+            deps: () => this.mounted.current,
         });
-        $effect(() => {
-            return () => {
-                this.clearAutoScrollTimer();
-            };
+        watch(() => this.mounted.current, (isMounted) => {
+            if (!isMounted)
+                return;
+            const activeItem = this.root.highlightedNode;
+            activeItem?.scrollIntoView({ block: "nearest" });
         });
+        this.onpointerdown = this.onpointerdown.bind(this);
+        this.onpointermove = this.onpointermove.bind(this);
+        this.onpointerleave = this.onpointerleave.bind(this);
     }
-    clearAutoScrollTimer = () => {
-        if (this.autoScrollTimer !== null) {
-            window.clearInterval(this.autoScrollTimer);
-            this.autoScrollTimer = null;
-        }
-    };
-    #onpointerdown = () => {
+    clearAutoScrollTimer() {
+        if (this.autoScrollTimer === null)
+            return;
+        window.clearInterval(this.autoScrollTimer);
+        this.autoScrollTimer = null;
+    }
+    onpointerdown(_) {
         if (this.autoScrollTimer !== null)
             return;
         this.autoScrollTimer = window.setInterval(() => {
             this.onAutoScroll();
         }, 50);
-    };
-    #onpointermove = () => {
-        this.content.onItemLeave?.();
+    }
+    onpointermove(_) {
         if (this.autoScrollTimer !== null)
             return;
         this.autoScrollTimer = window.setInterval(() => {
             this.onAutoScroll();
         }, 50);
-    };
-    #onpointerleave = () => {
+    }
+    onpointerleave(_) {
         this.clearAutoScrollTimer();
-    };
+    }
     props = $derived.by(() => ({
         id: this.id.current,
-        "aria-hidden": "true",
+        "aria-hidden": getAriaHidden(true),
         style: {
             flexShrink: 0,
         },
-        onpointerdown: this.#onpointerdown,
-        onpointermove: this.#onpointermove,
-        onpointerleave: this.#onpointerleave,
+        onpointerdown: this.onpointerdown,
+        onpointermove: this.onpointermove,
+        onpointerleave: this.onpointerleave,
     }));
 }
 class SelectScrollDownButtonState {
     state;
     content;
+    root;
     canScrollDown = $state(false);
     constructor(state) {
         this.state = state;
         this.content = state.content;
+        this.root = state.root;
         this.state.onAutoScroll = this.handleAutoScroll;
-        $effect(() => {
-            const viewport = this.content.viewportNode;
-            const isPositioned = this.content.isPositioned.current;
-            if (!viewport || !isPositioned)
+        watch([() => this.content.viewportNode, () => this.content.isPositioned], ([viewportNode, isPositioned]) => {
+            if (!viewportNode || !isPositioned)
                 return;
-            let cleanup = noop;
-            untrack(() => {
-                const handleScroll = () => {
-                    const maxScroll = viewport.scrollHeight - viewport.clientHeight;
-                    this.canScrollDown = Math.ceil(viewport.scrollTop) < maxScroll;
-                };
-                handleScroll();
-                cleanup = addEventListener(viewport, "scroll", handleScroll);
-            });
-            return () => {
-                cleanup();
+            const handleScroll = () => {
+                afterTick(() => {
+                    const maxScroll = viewportNode.scrollHeight - viewportNode.clientHeight;
+                    const paddingTop = Number.parseInt(getComputedStyle(viewportNode).paddingTop, 10);
+                    this.canScrollDown =
+                        Math.ceil(viewportNode.scrollTop) < maxScroll - paddingTop;
+                });
             };
+            handleScroll();
+            return on(viewportNode, "scroll", handleScroll);
         });
         $effect(() => {
-            if (this.state.mounted.current) {
-                this.state.alignedPositionState?.handleScrollButtonChange(this.state.id.current);
-            }
-        });
-        $effect(() => {
-            if (!this.state.mounted.current) {
-                this.state.clearAutoScrollTimer();
-            }
+            if (this.state.mounted.current)
+                return;
+            this.state.clearAutoScrollTimer();
         });
     }
     handleAutoScroll = () => {
         afterTick(() => {
             const viewport = this.content.viewportNode;
-            const selectedItem = this.content.getSelectedItem().selectedItemNode;
-            if (!viewport || !selectedItem) {
+            const selectedItem = this.root.highlightedNode;
+            if (!viewport || !selectedItem)
                 return;
-            }
             viewport.scrollTop = viewport.scrollTop + selectedItem.offsetHeight;
         });
     };
-    props = $derived.by(() => ({ ...this.state.props, [SCROLL_DOWN_BUTTON_ATTR]: "" }));
+    props = $derived.by(() => ({ ...this.state.props, [this.root.bitsAttrs["scroll-down-button"]]: "" }));
 }
 class SelectScrollUpButtonState {
     state;
     content;
+    root;
     canScrollUp = $state(false);
     constructor(state) {
         this.state = state;
         this.content = state.content;
+        this.root = state.root;
         this.state.onAutoScroll = this.handleAutoScroll;
-        $effect(() => {
-            let cleanup = noop;
-            cleanup();
-            const viewport = this.content.viewportNode;
-            const isPositioned = this.content.isPositioned.current;
-            if (!viewport || !isPositioned)
+        watch([() => this.content.viewportNode, () => this.content.isPositioned], ([viewportNode, isPositioned]) => {
+            if (!viewportNode || !isPositioned)
                 return;
             const handleScroll = () => {
-                this.canScrollUp = viewport.scrollTop > 0;
+                const paddingTop = Number.parseInt(getComputedStyle(viewportNode).paddingTop, 10);
+                this.canScrollUp = viewportNode.scrollTop - paddingTop > 0;
             };
             handleScroll();
-            cleanup = addEventListener(viewport, "scroll", handleScroll);
-            return () => {
-                cleanup();
-            };
-        });
-        $effect(() => {
-            if (this.state.mounted.current) {
-                this.state.alignedPositionState?.handleScrollButtonChange(this.state.id.current);
-            }
+            return on(viewportNode, "scroll", handleScroll);
         });
         $effect(() => {
-            if (!this.state.mounted.current) {
-                this.state.clearAutoScrollTimer();
-            }
+            if (this.state.mounted.current)
+                return;
+            this.state.clearAutoScrollTimer();
         });
     }
     handleAutoScroll = () => {
         afterTick(() => {
             const viewport = this.content.viewportNode;
-            const selectedItem = this.content.getSelectedItem().selectedItemNode;
+            const selectedItem = this.root.highlightedNode;
             if (!viewport || !selectedItem)
                 return;
             viewport.scrollTop = viewport.scrollTop - selectedItem.offsetHeight;
         });
     };
-    props = $derived.by(() => ({ ...this.state.props, [SCROLL_UP_BUTTON_ATTR]: "" }));
-}
-class SelectGroupState {
-    #id;
-    #ref;
-    labelNode = $state(null);
-    constructor(props) {
-        this.#id = props.id;
-        this.#ref = props.ref;
-        useRefById({
-            id: this.#id,
-            ref: this.#ref,
-        });
-    }
-    props = $derived.by(() => ({
-        id: this.#id.current,
-        role: "group",
-        "aria-labelledby": this.labelNode?.id ?? undefined,
-        [GROUP_ATTR]: "",
-    }));
-    createGroupHeading(props) {
-        return new SelectGroupHeading(props, this);
-    }
-}
-class SelectGroupHeading {
-    #id;
-    #ref;
-    group;
-    constructor(props, group) {
-        this.#ref = props.ref;
-        this.#id = props.id;
-        this.group = group;
-        useRefById({
-            id: this.#id,
-            ref: this.#ref,
-            onRefChange: (node) => {
-                this.group.labelNode = node;
-            },
-        });
-    }
-    props = $derived.by(() => ({
-        id: this.#id.current,
-        [GROUP_LABEL_ATTR]: "",
-    }));
-}
-class SelectSeparatorState {
-    #id;
-    #ref;
-    constructor(props) {
-        this.#id = props.id;
-        this.#ref = props.ref;
-        useRefById({
-            id: this.#id,
-            ref: this.#ref,
-        });
-    }
-    props = $derived.by(() => ({
-        id: this.#id.current,
-        [SEPARATOR_ATTR]: "",
-        "aria-hidden": getAriaHidden(true),
-    }));
-}
-class SelectArrowState {
-    #id;
-    #ref;
-    constructor(props) {
-        this.#id = props.id;
-        this.#ref = props.ref;
-        useRefById({
-            id: this.#id,
-            ref: this.#ref,
-        });
-    }
-    props = $derived.by(() => ({
-        id: this.#id.current,
-        [ARROW_ATTR]: "",
-        "aria-hidden": getAriaHidden(true),
-    }));
-}
-class SelectIconState {
-    #id;
-    #ref;
-    constructor(props) {
-        this.#id = props.id;
-        this.#ref = props.ref;
-        useRefById({
-            id: this.#id,
-            ref: this.#ref,
-        });
-    }
-    props = $derived.by(() => ({
-        id: this.#id.current,
-        [ICON_ATTR]: "",
-        "aria-hidden": getAriaHidden(true),
-    }));
+    props = $derived.by(() => ({ ...this.state.props, [this.root.bitsAttrs["scroll-up-button"]]: "" }));
 }
+const SelectRootContext = new Context("Select.Root | Combobox.Root");
+const SelectGroupContext = new Context("Select.Group | Combobox.Group");
+const SelectContentContext = new Context("Select.Content | Combobox.Content");
 export function useSelectRoot(props) {
-    return setSelectRootContext(new SelectRootState(props));
+    const { type, ...rest } = props;
+    const rootState = type === "single"
+        ? new SelectSingleRootState(rest)
+        : new SelectMultipleRootState(rest);
+    return SelectRootContext.set(rootState);
 }
-export function useSelectContentFrag() {
-    return getSelectRootContext().createContent();
+export function useSelectInput(props) {
+    return new SelectInputState(props, SelectRootContext.get());
 }
 export function useSelectContent(props) {
-    return setSelectContentContext(getSelectRootContext().createContentImpl(props));
-}
-export function useSelectItemAlignedPosition(props) {
-    const contentContext = getSelectContentContext();
-    const alignedPositionState = contentContext.createItemAlignedPosition(props);
-    contentContext.alignedPositionState = alignedPositionState;
-    return setSelectContentItemAlignedContext(alignedPositionState);
-}
-export function useSelectFloatingPosition() {
-    return getSelectContentContext().createFloatingPosition();
+    return SelectContentContext.set(new SelectContentState(props, SelectRootContext.get()));
 }
 export function useSelectTrigger(props) {
-    return getSelectRootContext().createTrigger(props);
+    return new SelectTriggerState(props, SelectRootContext.get());
 }
-export function useSelectValue() {
-    return getSelectRootContext().createValue();
+export function useSelectComboTrigger(props) {
+    return new SelectComboTriggerState(props, SelectRootContext.get());
 }
 export function useSelectItem(props) {
-    return setSelectItemContext(getSelectContentContext().createItem(props));
-}
-export function useSelectItemText(props) {
-    return getSelectItemContext().createText(props);
+    return new SelectItemState(props, SelectRootContext.get());
 }
 export function useSelectViewport(props) {
-    return getSelectContentContext().createViewport(props);
+    return new SelectViewportState(props, SelectContentContext.get());
 }
 export function useSelectScrollUpButton(props) {
-    return getSelectContentContext().createScrollUpButton(props);
+    return new SelectScrollUpButtonState(new SelectScrollButtonImplState(props, SelectContentContext.get()));
 }
 export function useSelectScrollDownButton(props) {
-    return getSelectContentContext().createScrollDownButton(props);
+    return new SelectScrollDownButtonState(new SelectScrollButtonImplState(props, SelectContentContext.get()));
 }
 export function useSelectGroup(props) {
-    return setSelectGroupContext(new SelectGroupState(props));
+    return SelectGroupContext.set(new SelectGroupState(props, SelectRootContext.get()));
 }
 export function useSelectGroupHeading(props) {
-    return getSelectGroupContext().createGroupHeading(props);
-}
-export function useSelectArrow(props) {
-    return new SelectArrowState(props);
+    return new SelectGroupHeadingState(props, SelectGroupContext.get());
 }
-export function useSelectSeparator(props) {
-    return new SelectSeparatorState(props);
+export function useSelectHiddenInput(props) {
+    return new SelectHiddenInputState(props, SelectRootContext.get());
 }
-export function useSelectIcon(props) {
-    return new SelectIconState(props);
-}
-//
-export function shouldShowPlaceholder(value) {
-    return value === "" || value === undefined;
+////////////////////////////////////
+// Helpers
+////////////////////////////////////
+const selectParts = [
+    "trigger",
+    "content",
+    "item",
+    "viewport",
+    "scroll-up-button",
+    "scroll-down-button",
+    "group",
+    "group-label",
+    "separator",
+    "arrow",
+    "input",
+    "content-wrapper",
+    "item-text",
+    "value",
+];
+export function getSelectBitsAttrs(root) {
+    const isCombobox = root.isCombobox;
+    const attrObj = {};
+    for (const part of selectParts) {
+        attrObj[part] = isCombobox ? `data-combobox-${part}` : `data-select-${part}`;
+    }
+    return attrObj;
 }