entasis 0.11.0 → 0.12.0

package/dist/components/Form/Select/select.state.svelte.js

@@ -1,6 +1,10 @@
+import { untrack } from 'svelte';
 import { bind } from '../../../utils/state.svelte.js';
-import { useListNavigation } from '../../../utils/useListNavigation.svelte.js';
+import { createOptionIds, useListNavigation } from '../../../utils/useListNavigation.svelte.js';
+import { createTypeahead } from '../../../utils/typeahead.js';
+import { createOpenChangeDetails, getInteractionType, requestOpenChange } from '../../../utils/openChange.js';
 import { alignItemWithTrigger, SELECT_ALIGN_MARGIN } from './select.align.js';
+import { elementById } from '../../../utils/id.js';
 /** Inline-start edge of an element's first text: what lines up between the value and an option. */
 const textStart = (element, rtl) => {
     const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, {
@@ -17,13 +21,51 @@ const textStart = (element, rtl) => {
     return rtl ? rect.right : rect.left;
 };
 const isGroup = (entry) => Array.isArray(entry.items);
+/** A `max-height` in px, or `Infinity` for `none` and anything a pixel count cannot describe. */
+const pixelCap = (maxHeight) => {
+    const px = /^(-?\d*\.?\d+)px$/.exec(maxHeight.trim());
+    return px ? Math.max(0, Number(px[1])) : Infinity;
+};
 export class SelectState {
-    isOpen = $state(false);
+    #localOpen = $state(false);
+    /** The current open session was started by a finger: it is a dropdown, never item-aligned. */
+    #touch = $state(false);
+    /** Type of the last press on the trigger, for browsers whose click event does not carry it. */
+    #pointerType = null;
+    /** A click on a `<label for>` is on its way to the trigger as a second click. */
+    #labelClick = false;
+    /**
+     * The last press outside the trigger and panel while the list is open. The blur it causes
+     * arrives after the press, so it is reported as that press (`outside-press`, with the press's
+     * pointer type) instead of a keyboard `focus-out`.
+     */
+    #outsidePress = null;
     // Where this open session placed the panel. Measured once: later repositioning (the panel
     // resizing, the list scrolling) must not re-scroll the list under the pointer. A new viewport
     // size measures again.
     #alignment = null;
+    /** The open session in progress has been set up (opened through `setOpen`, or noticed by the effect). */
+    #sessionStarted = false;
+    /** Focus has been given to the trigger for the open session in progress. */
+    #focusedSession = false;
+    #ids;
     listboxId = $derived.by(() => `${this.id}-listbox`);
+    get isOpen() {
+        return this.openState ? this.openState.get() : this.#localOpen;
+    }
+    set isOpen(open) {
+        if (this.openState)
+            this.openState.set(open);
+        else
+            this.#localOpen = open;
+    }
+    /**
+     * The list is a dropdown below the trigger rather than item-aligned: the prop says so, or a
+     * finger opened it (the alignment is for mouse and keyboard).
+     */
+    get dropdown() {
+        return !this.alignItemWithTrigger || this.#touch;
+    }
     /** All options, flattened across groups — render order. */
     flatOptions = $derived.by(() => (this.items ?? []).flatMap((entry) => (isGroup(entry) ? entry.items : [entry])));
     /** Options as rendered: consecutive bare options bundled into one unlabeled group. */
@@ -45,26 +87,76 @@ export class SelectState {
         }
         return groups;
     });
-    selectedOption = $derived(this.flatOptions.find((option) => option.value === this.value) ?? null);
+    /** The enabled values in render order: what the highlight and the typeahead move over. */
+    enabledValues = $derived.by(() => this.flatOptions.filter((option) => !option.disabled).map((option) => option.value));
+    /** The selected values, in the order the value holds them. */
+    selectedValues = $derived.by(() => {
+        const value = this.value;
+        if (Array.isArray(value))
+            return [...value];
+        return typeof value === 'string' ? [value] : [];
+    });
+    /** The selected values as a set, so a row asks whether it is selected in constant time. */
+    selectedSet = $derived.by(
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity -- derived value, rebuilt whole
+    () => new Set(this.selectedValues));
+    /** The selected options in render order (the value of a single Select, at most one). */
+    selectedOptions = $derived.by(() => this.selectedSet.size === 0
+        ? []
+        : this.flatOptions.filter((option) => this.selectedSet.has(option.value)));
+    /** The first selected option in render order: what the trigger shows for a single Select. */
+    selectedOption = $derived(this.selectedOptions[0] ?? null);
+    /**
+     * The option the list opens on: the first enabled selected one in render order, found in one
+     * pass over the options (a Set lookup per option, never a search per selected value).
+     */
+    anchorOption = $derived.by(() => {
+        if (this.selectedSet.size === 0)
+            return undefined;
+        return this.flatOptions.find((option) => !option.disabled && this.selectedSet.has(option.value));
+    });
     /** Keyboard navigation: value-driven virtual focus — DOM focus stays on the trigger. */
     nav = useListNavigation({
-        values: () => this.flatOptions.filter((option) => !option.disabled).map((o) => o.value),
+        values: () => this.enabledValues,
         optionId: (value) => this.optionId(value),
-        onSelect: (value) => this.selectValue(value),
-        typeahead: (value) => this.flatOptions.find((option) => option.value === value)?.label ?? value
+        onSelect: (value) => this.activate(value),
+        open: () => this.isOpen,
+        anchor: () => this.anchorOption?.value,
+        scrollContainer: () => this.viewportEl
+    });
+    // One search session for the open list (moves the highlight) and the closed trigger (picks the
+    // match, as a native select does). Space belongs to the search while it has characters.
+    #keyEvent;
+    #typeahead = createTypeahead({
+        getItems: () => this.enabledValues,
+        getText: (value) => this.flatOptions.find((option) => option.value === value)?.label ?? value,
+        getCurrentIndex: () => {
+            const current = this.isOpen ? this.nav.highlighted : this.selectedValues[0];
+            return current === undefined ? -1 : this.enabledValues.indexOf(current);
+        },
+        onMatch: (_index, value) => {
+            if (this.isOpen)
+                this.nav.highlight(value, { reason: 'keyboard', event: this.#keyEvent });
+            else
+                this.#commitSingle(value);
+        }
     });
     constructor(options) {
         bind(this, options);
+        this.#ids = createOptionIds(this.id);
         // An item-aligned panel sits on the trigger, so the page holds still while it is open, as
         // it does for a native select. Popover's body lock does not reach an app's own scroll
         // container (a scrolling <main>), so wheel and touch scrolling are blocked outside the
         // panel. The panel is portaled under the locked body: its own scrolling cannot chain out.
         $effect(() => {
-            if (!this.isOpen || !this.alignItemWithTrigger)
+            if (!this.isOpen || this.dropdown)
                 return;
             const block = (event) => {
-                const panel = document.getElementById(this.listboxId)?.closest('dialog');
-                if (event.target instanceof Node && panel?.contains(event.target))
+                // The content sits in the popover's panel, the only child of its positioning wrapper.
+                const panel = this.contentEl?.parentElement?.parentElement;
+                // The composed path, not `event.target`: a window listener sees a shadow root's events
+                // retargeted to its host.
+                if (panel && event.composedPath().includes(panel))
                     return;
                 event.preventDefault();
             };
@@ -76,9 +168,74 @@ export class SelectState {
                 window.removeEventListener('touchmove', block, listen);
             };
         });
+        // A press outside the list moves focus away from the trigger, which closes it: remember the
+        // press so that close can name it. A key press ends the claim (Tab is a keyboard blur).
+        $effect(() => {
+            if (!this.isOpen)
+                return;
+            const press = (event) => {
+                this.#outsidePress = this.contains(event.composedPath()[0] ?? event.target) ? null : event;
+            };
+            const clear = () => (this.#outsidePress = null);
+            const listen = { capture: true };
+            window.addEventListener('pointerdown', press, listen);
+            window.addEventListener('keydown', clear, listen);
+            return () => {
+                window.removeEventListener('pointerdown', press, listen);
+                window.removeEventListener('keydown', clear, listen);
+                this.#outsidePress = null;
+            };
+        });
+        // A list opened from outside (`open`, `defaultOpen`) never went through `setOpen`: it starts
+        // a fresh session all the same, with no measurement or touch flag left from the last one.
+        // Before the DOM updates, so the panel positions against the clean state.
+        $effect.pre(() => {
+            if (!this.isOpen) {
+                this.#sessionStarted = false;
+                return;
+            }
+            if (this.#sessionStarted)
+                return;
+            this.#sessionStarted = true;
+            this.#alignment = null;
+            this.#touch = false;
+        });
+        // Keys and blur drive the list through the trigger, so an externally opened list takes focus
+        // there, as an open through the trigger does.
+        $effect(() => {
+            if (!this.isOpen || this.#focusedSession) {
+                if (!this.isOpen)
+                    this.#focusedSession = false;
+                return;
+            }
+            const trigger = this.triggerEl;
+            if (!trigger)
+                return;
+            this.#focusedSession = true;
+            untrack(() => {
+                if (document.activeElement !== trigger)
+                    trigger.focus();
+            });
+        });
+        // A disabled Select has no list.
+        $effect(() => {
+            if (!this.disabled || !this.isOpen)
+                return;
+            untrack(() => this.setOpen(false, { reason: 'imperative-action', cancelable: false }));
+        });
+        // A pending search must not outlive the Select.
+        $effect(() => () => this.#typeahead.reset());
     }
-    // Index-based ids — sanitizing values into ids can collide ('a.b' and 'a_b' both → 'a_b').
-    optionId = (value) => `${this.id}-option-${this.flatOptions.findIndex((o) => o.value === value)}`;
+    /**
+     * DOM id of an option. Each value gets the next number the first time it is asked for, so
+     * values that would collide once sanitised ('a.b', 'a_b') never share an id, and a lookup costs
+     * the same however long the list is.
+     */
+    optionId = (value) => this.#ids.get(value);
+    /** Whether `value` is selected. */
+    isSelected = (value) => this.selectedSet.has(value);
+    /** Whether a node is the trigger or inside the panel: focus there keeps the list open. */
+    contains = (node) => node instanceof Node && (!!this.triggerEl?.contains(node) || !!this.contentEl?.contains(node));
     /**
      * Popover `positionPanel`: places the open panel over the trigger with the selected option (or
      * the first one) on the value, and sizes and scrolls the list to keep it there. `null` falls
@@ -86,14 +243,17 @@ export class SelectState {
      */
     positionPanel = ({ panel, reference }) => {
         const { valueEl, listEl, viewportEl } = this;
-        if (!this.alignItemWithTrigger || !valueEl || !listEl || !viewportEl)
+        if (this.dropdown) {
+            // A previous aligned session left its measured height on the list.
+            listEl?.style.removeProperty('max-height');
+            return null;
+        }
+        if (!valueEl || !listEl || !viewportEl)
             return null;
         if (!(reference instanceof HTMLElement))
             return null;
-        const anchor = this.selectedOption && !this.selectedOption.disabled
-            ? this.selectedOption
-            : this.flatOptions.find((option) => !option.disabled);
-        const item = anchor && document.getElementById(this.optionId(anchor.value));
+        const anchor = this.anchorOption ?? this.flatOptions.find((option) => !option.disabled);
+        const item = anchor && elementById(reference, this.optionId(anchor.value));
         if (!item)
             return null;
         const width = window.innerWidth;
@@ -101,6 +261,10 @@ export class SelectState {
         const kept = this.#alignment;
         if (kept && kept.viewport.width === width && kept.viewport.height === height)
             return kept.position;
+        // A `max-height` the theme or consumer put on the list caps it. Read it without our own
+        // inline height from an earlier measurement in the way.
+        listEl.style.removeProperty('max-height');
+        const maxListHeight = pixelCap(getComputedStyle(listEl).maxHeight);
         // Measure the list at its natural height and scroll, the panel at least as wide as the
         // trigger (what `fitTrigger` applies on the next render).
         const trigger = reference.getBoundingClientRect();
@@ -126,7 +290,8 @@ export class SelectState {
             },
             list: { top: listRect.top, height: listRect.height },
             item: { top: itemRect.top, height: itemRect.height, textStart: textStart(item, rtl) },
-            rtl
+            rtl,
+            maxListHeight
         });
         listEl.style.maxHeight = `${placed.listHeight}px`;
         viewportEl.scrollTop = placed.scrollTop;
@@ -145,66 +310,196 @@ export class SelectState {
         this.#alignment = { position, viewport: { width, height } };
         return position;
     };
-    open = () => {
-        if (this.disabled)
-            return;
-        this.#alignment = null;
-        this.isOpen = true;
-        // Safari/Firefox-macOS don't focus buttons on click — grab focus explicitly so the
-        // blur-to-close and trigger keydown paths work for mouse users everywhere.
-        this.triggerEl?.focus();
-        // Anchor the highlight on the selected option (native <select> behavior), falling back
-        // to the first option so a previous session's highlight doesn't leak into this one.
-        const selected = this.selectedOption;
-        if (selected && !selected.disabled) {
-            this.nav.setHighlighted(selected.value);
-            // The dropdown mounts on the next flush — defer the scroll (setTimeout, not rAF:
-            // rAF stalls in hidden tabs). An item-aligned panel has already scrolled its list.
-            setTimeout(() => {
-                if (this.#alignment)
-                    return;
-                document
-                    .getElementById(this.optionId(selected.value))
-                    ?.scrollIntoView({ block: 'nearest' });
-            }, 0);
+    /**
+     * Opens or closes the list. `onOpenChange` runs first and may cancel; returns whether the
+     * change went through (or was already the state).
+     */
+    setOpen = (next, init = {}) => {
+        if (next === this.isOpen)
+            return true;
+        if (next && this.disabled)
+            return false;
+        // The press on the trigger knows what a click cannot: WebKit reports the click that follows a
+        // tap as a `mouse` pointer event.
+        const press = this.#pointerType;
+        const pressKind = press === 'mouse' || press === 'touch' || press === 'pen' ? press : null;
+        const interaction = init.interaction ??
+            (init.event?.type === 'click' && pressKind
+                ? pressKind
+                : getInteractionType(init.event, press));
+        const details = createOpenChangeDetails({
+            ...init,
+            interaction,
+            trigger: init.trigger ?? this.triggerEl ?? undefined
+        });
+        if (!requestOpenChange(this.onOpenChange, next, details))
+            return false;
+        this.#pointerType = null;
+        if (next) {
+            this.#sessionStarted = true;
+            this.#alignment = null;
+            this.#touch = interaction === 'touch';
+            this.isOpen = true;
+            // Safari/Firefox-macOS don't focus buttons on click — grab focus explicitly so the
+            // blur-to-close and trigger keydown paths work for mouse users everywhere.
+            this.triggerEl?.focus();
+            // The highlight lands on the selected option (native <select> behaviour) through the
+            // navigation's open/anchor rule, which also scrolls it into view inside the list.
         }
         else {
-            this.nav.first();
+            this.isOpen = false;
+            this.#sessionStarted = false;
+            this.#typeahead.reset();
         }
+        return true;
     };
-    close = () => {
-        this.isOpen = false;
+    open = (init) => this.setOpen(true, init);
+    close = (init) => this.setOpen(false, init);
+    toggle = (init) => this.setOpen(!this.isOpen, init);
+    /** Writes a single value through the field, which publishes one `onValueChange`. */
+    #commitSingle = (value) => {
+        if (this.readOnly || this.disabled)
+            return;
+        const option = this.flatOptions.find((entry) => entry.value === value);
+        if (!option || option.disabled)
+            return;
+        this.value = option.value;
     };
-    toggle = () => {
-        if (this.isOpen)
-            this.close();
+    /** The selection after toggling `value`, in render order (values no option names keep the end). */
+    #toggled = (value) => {
+        // Local sets, rebuilt per call and never read reactively.
+        /* eslint-disable svelte/prefer-svelte-reactivity */
+        const next = new Set(this.selectedValues);
+        if (next.has(value))
+            next.delete(value);
         else
-            this.open();
+            next.add(value);
+        const known = new Set(this.flatOptions.map((option) => option.value));
+        /* eslint-enable svelte/prefer-svelte-reactivity */
+        return [
+            ...this.flatOptions.filter((option) => next.has(option.value)).map((option) => option.value),
+            ...[...next].filter((entry) => !known.has(entry))
+        ];
     };
-    selectValue = (value) => {
-        const option = this.flatOptions.find((o) => o.value === value);
-        if (!option || option.disabled)
+    /**
+     * Chooses an option: a single Select takes it, closes and refocuses the trigger; a multiple
+     * Select toggles it and stays open. A read-only Select commits nothing.
+     */
+    activate = (value, event) => {
+        const option = this.flatOptions.find((entry) => entry.value === value);
+        if (!option || option.disabled || this.readOnly || this.disabled)
             return;
-        this.value = option.value;
-        this.close();
+        if (this.multiple) {
+            this.value = this.#toggled(option.value);
+            return;
+        }
+        this.#commitSingle(option.value);
+        this.close({ reason: 'item-press', event });
+        this.triggerEl?.focus();
+    };
+    /** @deprecated Use `activate`. */
+    selectValue = (value) => this.activate(value);
+    /** Empties the selection: `null` for a single Select, `[]` for a multiple one. */
+    clear = () => {
+        if (this.readOnly || this.disabled)
+            return;
+        this.value = this.multiple ? [] : null;
+    };
+    /**
+     * A label elsewhere on the page was clicked: the browser forwards the click to the trigger, which
+     * should take focus, as a label focuses a native select, rather than toggle the list.
+     */
+    noteLabelClick = () => {
+        this.#labelClick = true;
+        setTimeout(() => (this.#labelClick = false));
+    };
+    /** Whether the click now arriving at the trigger is a label's: consumed once. */
+    consumeLabelClick = () => {
+        const forwarded = this.#labelClick;
+        this.#labelClick = false;
+        return forwarded;
+    };
+    /** A press on the trigger: remembers the pointer type so a touch open can be told from a mouse one. */
+    onTriggerPointerDown = (event) => {
+        this.#pointerType = event.pointerType || null;
+    };
+    /** Focus left the trigger: the list closes, unless focus moved into the panel (a screen reader's cursor). */
+    onTriggerBlur = (event) => {
+        if (this.contains(event.relatedTarget))
+            return;
+        this.#closeFromFocusOut(event);
+    };
+    /** Focus left the panel: the list closes unless it went back to the trigger or stayed inside. */
+    onPanelFocusOut = (event) => {
+        if (this.contains(event.relatedTarget))
+            return;
+        this.#closeFromFocusOut(event);
+    };
+    /** Closes because focus left: as an `outside-press` when a recent press outside caused it. */
+    #closeFromFocusOut(event) {
+        const press = this.#outsidePress;
+        // A press is a recent cause only: a stale one (focus moved by code long after) is not.
+        if (press && event.timeStamp - press.timeStamp < 1000) {
+            const type = press.pointerType;
+            this.close({
+                reason: 'outside-press',
+                event: press,
+                interaction: type === 'touch' || type === 'pen' ? type : 'mouse'
+            });
+        }
+        else
+            this.close({ reason: 'focus-out', event });
+    }
+    /** Keys while focus rests in the panel (a screen reader moved it onto an option). */
+    onPanelKeydown = (event) => {
+        if (event.key !== 'Escape')
+            return;
+        if (this.close({ reason: 'escape-key', event })) {
+            event.preventDefault();
+            this.triggerEl?.focus();
+        }
+    };
+    /** The visually hidden close button, for touch screen-reader users with no Escape key. */
+    onCloseButton = (event) => {
+        this.close({ reason: 'close-press', event });
         this.triggerEl?.focus();
     };
-    /** Keydown handler for the trigger — closed: open on ArrowUp/Down/Enter/Space; open:
-     *  Escape/Tab close, Enter/Space select, arrows/Home/End delegate to the navigation hook. */
+    /** Keydown handler for the trigger — closed: open on ArrowUp/Down/Enter/Space and type to pick;
+     *  open: Escape/Tab close, Enter/Space choose, arrows/Home/End/typing move the highlight. */
     onTriggerKeydown = (event) => {
         if (this.disabled)
             return;
-        if (!this.isOpen) {
+        this.#pointerType = null;
+        const open = this.isOpen;
+        // Typing: a closed single Select picks the match like a native select (no list, one
+        // `onValueChange`); an open one moves its highlight. Space belongs to the search while it
+        // has characters, and only then.
+        if (open || (!this.multiple && !this.readOnly)) {
+            this.#keyEvent = event;
+            const consumed = this.#typeahead.handleKey(event);
+            this.#keyEvent = undefined;
+            if (consumed) {
+                event.preventDefault();
+                return;
+            }
+        }
+        if (!open) {
             if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(event.key)) {
                 event.preventDefault();
-                this.open();
+                // A held key repeats: the list that just opened must not toggle again.
+                if (event.repeat)
+                    return;
+                this.open({
+                    reason: event.key.startsWith('Arrow') ? 'list-navigation' : 'trigger-press',
+                    event
+                });
             }
             return;
         }
         switch (event.key) {
             case 'Escape':
-                event.preventDefault();
-                this.close();
+                if (this.close({ reason: 'escape-key', event }))
+                    event.preventDefault();
                 return;
             case 'Enter':
             case ' ':
@@ -214,11 +509,11 @@ export class SelectState {
                 if (event.repeat)
                     return;
                 if (this.nav.highlighted !== undefined)
-                    this.selectValue(this.nav.highlighted);
+                    this.activate(this.nav.highlighted, event);
                 return;
             case 'Tab':
                 // No preventDefault — let focus move on naturally.
-                this.close();
+                this.close({ reason: 'focus-out', event });
                 return;
             default:
                 this.nav.onKeydown(event);

package/dist/components/Form/Select/select.theme.d.ts

@@ -47,6 +47,13 @@ export declare const selectTheme: {
             large: string;
         };
     }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    list: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        dropdown: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    listbox: (props?: import("../../../utils/cva/types.js").CVAClassProp | undefined) => string;
     group: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
         size: {
             small: string;
@@ -119,6 +126,13 @@ export declare const setSelectTheme: (theme: InferComponentTheme<{
             large: string;
         };
     }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    list: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        dropdown: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    listbox: (props?: import("../../../utils/cva/types.js").CVAClassProp | undefined) => string;
     group: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
         size: {
             small: string;
@@ -189,6 +203,13 @@ export declare const useSelectTheme: import("../../../utils/cva/theme.js").UseCo
             large: string;
         };
     }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    list: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
+        dropdown: {
+            true: string;
+            false: string;
+        };
+    }> & import("../../../utils/cva/types.js").CVAClassProp) | undefined) => string;
+    listbox: (props?: import("../../../utils/cva/types.js").CVAClassProp | undefined) => string;
     group: (props?: (import("../../../utils/cva/types.js").CVAVariantSchema<{
         size: {
             small: string;

package/dist/components/Form/Select/select.theme.js

@@ -77,6 +77,26 @@ const defaultContent = cva({
         }
     }
 });
+// The scrolling list inside the panel. A dropdown (`alignItemWithTrigger={false}`, or a list
+// opened by touch) is capped at 240px or the room left beside the trigger; an item-aligned list
+// is sized by the viewport instead, and honours any `max-height` a theme puts here.
+const defaultList = cva({
+    base: 'flex flex-col',
+    variants: {
+        dropdown: {
+            true: 'max-h-[min(240px,calc(var(--available-height,100dvh)_-_2*var(--space-xs)))]',
+            false: ''
+        }
+    },
+    defaultVariants: {
+        dropdown: false
+    }
+});
+// The scrolling viewport is the listbox itself: it takes the keyboard-driven focus ring away and
+// keeps the highlighted option clear of the padded edges when it scrolls into view.
+const defaultListbox = cva({
+    base: 'scroll-py-xs outline-none'
+});
 const defaultGroup = cva({
     base: 'flex scroll-my-1 flex-col p-xs',
     variants: {
@@ -118,6 +138,8 @@ export const selectTheme = {
     value: defaultValue,
     triggerIcon: defaultTriggerIcon,
     content: defaultContent,
+    list: defaultList,
+    listbox: defaultListbox,
     group: defaultGroup,
     groupLabel: defaultGroupLabel,
     separator: defaultSeparator