@vscode-elements/elements 1.16.1 → 1.17.0

package/dist/includes/vscode-select/vscode-select-base.js

@@ -5,20 +5,34 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, render, nothing } from 'lit';
-import { property, query, queryAssignedElements, state } from 'lit/decorators.js';
+import { property, queryAssignedElements, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { repeat } from 'lit/directives/repeat.js';
+import { when } from 'lit/directives/when.js';
 import '../../vscode-button/index.js';
 import '../../vscode-option/index.js';
-import { filterOptionsByPattern, findNextSelectableOptionIndex, findPrevSelectableOptionIndex, highlightRanges, } from './helpers.js';
+import { stylePropertyMap } from '../style-property-map.js';
 import { VscElement } from '../VscElement.js';
-import { chevronDownIcon } from './template-elements.js';
-const VISIBLE_OPTS = 10;
-const OPT_HEIGHT = 22;
+import { filterOptionsByPattern, highlightRanges } from './helpers.js';
+import { OptionListController } from './OptionListController.js';
+import { checkIcon } from './template-elements.js';
+import '../../vscode-scrollable/vscode-scrollable.js';
+export const VISIBLE_OPTS = 10;
+export const OPT_HEIGHT = 22;
 /**
  * @cssprop --dropdown-z-index - workaround for dropdown z-index issues
  */
 export class VscodeSelectBase extends VscElement {
+    /**
+     * Options can be filtered by typing into a text input field.
+     */
+    set combobox(enabled) {
+        this._opts.comboboxMode = enabled;
+    }
+    get combobox() {
+        return this._opts.comboboxMode;
+    }
     /**
      * The element cannot be used and is not focusable.
      */
@@ -55,26 +69,31 @@ export class VscodeSelectBase extends VscElement {
             'startsWith',
             'startsWithPerTerm',
         ];
+        let fm;
         if (validValues.includes(val)) {
-            this._filter = val;
+            // this._filter = val as FilterMethod;
+            fm = val;
         }
         else {
-            this._filter = 'fuzzy';
+            // this._filter = 'fuzzy';
+            // eslint-disable-next-line no-console
             console.warn(`[VSCode Webview Elements] Invalid filter: "${val}", fallback to default. Valid values are: "contains", "fuzzy", "startsWith", "startsWithPerm".`, this);
+            fm = 'fuzzy';
         }
+        this._opts.filterMethod = fm;
     }
     get filter() {
-        return this._filter;
+        return this._opts.filterMethod;
     }
     /**
      * @attr [options=[]]
      * @type {Option[]}
      */
     set options(opts) {
-        this._options = opts.map((op, index) => ({ ...op, index }));
+        this._opts.populate(opts);
     }
     get options() {
-        return this._options.map(({ label, value, description, selected, disabled }) => ({
+        return this._opts.options.map(({ label, value, description, selected, disabled }) => ({
             label,
             value,
             description,
@@ -84,13 +103,12 @@ export class VscodeSelectBase extends VscElement {
     }
     constructor() {
         super();
-        /** @internal */
-        this.ariaExpanded = 'false';
         this.creatable = false;
         /**
-         * Options can be filtered by typing into a text input field.
+         * Accessible label for screen readers. When a `<vscode-label>` is connected
+         * to the component, it will be filled automatically.
          */
-        this.combobox = false;
+        this.label = '';
         /**
          * Sets the invalid state manually.
          */
@@ -107,29 +125,17 @@ export class VscodeSelectBase extends VscElement {
          * Position of the options list when visible.
          */
         this.position = 'below';
-        /** @internal */
-        this.tabIndex = 0;
+        this._opts = new OptionListController(this);
         this._firstUpdateCompleted = false;
-        this._activeIndex = -1;
         this._currentDescription = '';
         this._filter = 'fuzzy';
-        this._filterPattern = '';
-        this._selectedIndex = -1;
         this._selectedIndexes = [];
         this._options = [];
         this._value = '';
         this._values = [];
-        this._listScrollTop = 0;
         this._isPlaceholderOptionActive = false;
         this._isBeingFiltered = false;
-        /** @internal */
-        this._multiple = false;
-        /**
-         * @internal
-         * Quick-searchable map for searching a value in the options list.
-         * Keys are the options values, values are the option indexes.
-         */
-        this._valueOptionIndexMap = {};
+        this._optionListScrollPos = 0;
         this._isHoverForbidden = false;
         this._disabled = false;
         this._originalTabIndex = undefined;
@@ -137,14 +143,16 @@ export class VscodeSelectBase extends VscElement {
             const path = event.composedPath();
             const found = path.findIndex((et) => et === this);
             if (found === -1) {
-                this._toggleDropdown(false);
-                window.removeEventListener('click', this._onClickOutside);
+                this.open = false;
             }
         };
         this._onMouseMove = () => {
             this._isHoverForbidden = false;
             window.removeEventListener('mousemove', this._onMouseMove);
         };
+        this._onOptionListScroll = (ev) => {
+            this._optionListScrollPos = ev.detail;
+        };
         this._onComponentKeyDown = (event) => {
             if ([' ', 'ArrowUp', 'ArrowDown', 'Escape'].includes(event.key)) {
                 event.stopPropagation();
@@ -157,7 +165,7 @@ export class VscodeSelectBase extends VscElement {
                 this._onSpaceKeyDown();
             }
             if (event.key === 'Escape') {
-                this._toggleDropdown(false);
+                this._onEscapeKeyDown();
             }
             if (event.key === 'ArrowUp') {
                 this._onArrowUpKeyDown();
@@ -183,6 +191,7 @@ export class VscodeSelectBase extends VscElement {
         this.addEventListener('keydown', this._onComponentKeyDown);
         this.addEventListener('focus', this._onComponentFocus);
         this.addEventListener('blur', this._onComponentBlur);
+        this._setAutoFocus();
     }
     disconnectedCallback() {
         super.disconnectedCallback();
@@ -198,32 +207,59 @@ export class VscodeSelectBase extends VscElement {
             this._manageRequired();
         }
     }
+    update(changedProperties) {
+        super.update(changedProperties);
+        if (changedProperties.has('open')) {
+            if (this.open) {
+                this._opts.activateDefault();
+                this._scrollActiveElementToTop();
+                window.addEventListener('click', this._onClickOutside);
+            }
+            else {
+                window.removeEventListener('click', this._onClickOutside);
+            }
+        }
+    }
     get _filteredOptions() {
-        if (!this.combobox || this._filterPattern === '') {
+        if (!this.combobox || this._opts.filterPattern === '') {
             return this._options;
         }
-        return filterOptionsByPattern(this._options, this._filterPattern, this._filter);
+        return filterOptionsByPattern(this._options, this._opts.filterPattern, this._filter);
     }
-    get _currentOptions() {
-        return this.combobox ? this._filteredOptions : this._options;
+    _setAutoFocus() {
+        if (this.hasAttribute('autofocus')) {
+            if (this.tabIndex < 0) {
+                this.tabIndex = 0;
+            }
+            if (this.combobox) {
+                this.updateComplete.then(() => {
+                    this.shadowRoot
+                        ?.querySelector('.combobox-input')
+                        .focus();
+                });
+            }
+            else {
+                this.updateComplete.then(() => {
+                    this.shadowRoot
+                        ?.querySelector('.select-face')
+                        .focus();
+                });
+            }
+        }
     }
     get _isSuggestedOptionVisible() {
         if (!(this.combobox && this.creatable)) {
             return false;
         }
-        const filterPatternExistsAsOption = typeof this._valueOptionIndexMap[this._filterPattern] !== 'undefined';
-        const filtered = this._filterPattern.length > 0;
+        const filterPatternExistsAsOption = this._opts.getOptionByValue(this._opts.filterPattern) !== null;
+        const filtered = this._opts.filterPattern.length > 0;
         return !filterPatternExistsAsOption && filtered;
     }
     _manageRequired() { }
     _setStateFromSlottedElements() {
-        const options = [];
-        let nextIndex = 0;
         const optionElements = this._assignedOptions ?? [];
-        const selectedIndexes = [];
-        const values = [];
-        this._valueOptionIndexMap = {};
-        optionElements.forEach((el, i) => {
+        this._opts.clear();
+        optionElements.forEach((el) => {
             const { innerText, description, disabled } = el;
             const value = typeof el.value === 'string' ? el.value : innerText.trim();
             const selected = el.selected ?? false;
@@ -232,93 +268,61 @@ export class VscodeSelectBase extends VscElement {
                 value,
                 description,
                 selected,
-                index: nextIndex,
                 disabled,
             };
-            nextIndex = options.push(op);
-            if (selected && !this._multiple) {
-                this._activeIndex = i;
-            }
-            if (selected) {
-                selectedIndexes.push(options.length - 1);
-                values.push(value);
-            }
-            this._valueOptionIndexMap[op.value] = op.index;
+            this._opts.add(op);
         });
-        this._options = options;
-        if (selectedIndexes.length > 0) {
-            this._selectedIndex = selectedIndexes[0];
-            this._selectedIndexes = selectedIndexes;
-            this._value = values[0];
-            this._values = values;
-        }
-        if (!this._multiple && !this.combobox && selectedIndexes.length === 0) {
-            this._selectedIndex = this._options.length > 0 ? 0 : -1;
-        }
-    }
-    async _toggleDropdown(visible) {
-        this.open = visible;
-        this.ariaExpanded = String(visible);
-        if (visible && !this._multiple) {
-            this._activeIndex = this._selectedIndex;
-        }
-        if (visible && !this._multiple && !this.combobox) {
-            this._activeIndex = this._selectedIndex;
-            if (this._activeIndex > VISIBLE_OPTS - 1) {
-                await this.updateComplete;
-                this._listElement.scrollTop = Math.floor(this._activeIndex * OPT_HEIGHT);
-            }
-        }
-        if (visible) {
-            window.addEventListener('click', this._onClickOutside);
-        }
-        else {
-            window.removeEventListener('click', this._onClickOutside);
-        }
     }
     _createSuggestedOption() {
-        const nextSelectedIndex = this._options.length;
+        const nextSelectedIndex = this._opts.numOptions;
         const op = document.createElement('vscode-option');
-        op.value = this._filterPattern;
-        render(this._filterPattern, op);
+        op.value = this._opts.filterPattern;
+        render(this._opts.filterPattern, op);
         this.appendChild(op);
         return nextSelectedIndex;
     }
     _dispatchChangeEvent() {
-        if (!this._multiple) {
-            /** @deprecated */
-            this.dispatchEvent(new CustomEvent('vsc-change', {
-                detail: {
-                    selectedIndex: this._selectedIndex,
-                    value: this._value,
-                },
-            }));
-        }
-        else {
-            /** @deprecated */
-            this.dispatchEvent(new CustomEvent('vsc-change', {
-                detail: {
-                    selectedIndexes: this._selectedIndexes,
-                    value: this._values,
-                },
-            }));
-        }
         this.dispatchEvent(new Event('change'));
         this.dispatchEvent(new Event('input'));
     }
     async _createAndSelectSuggestedOption() { }
-    _onFaceClick() {
-        this._toggleDropdown(!this.open);
-        if (this._multiple) {
-            this._activeIndex = 0;
-        }
-    }
     _toggleComboboxDropdown() {
-        this._filterPattern = '';
-        this._toggleDropdown(!this.open);
-        if (this._multiple) {
-            this._activeIndex = -1;
+        this._opts.filterPattern = '';
+        this.open = !this.open;
+    }
+    _scrollActiveElementToTop() {
+        this._optionListScrollPos = Math.floor(this._opts.relativeActiveIndex * OPT_HEIGHT);
+    }
+    async _adjustOptionListScrollPos(direction, optionIndex) {
+        let numOpts = this._opts.numOfVisibleOptions;
+        const suggestedOptionVisible = this._isSuggestedOptionVisible;
+        if (suggestedOptionVisible) {
+            numOpts += 1;
+        }
+        if (numOpts <= VISIBLE_OPTS) {
+            return;
+        }
+        this._isHoverForbidden = true;
+        window.addEventListener('mousemove', this._onMouseMove);
+        const ulScrollTop = this._optionListScrollPos;
+        const liPosY = optionIndex * OPT_HEIGHT;
+        const fullyVisible = liPosY >= ulScrollTop &&
+            liPosY <= ulScrollTop + VISIBLE_OPTS * OPT_HEIGHT - OPT_HEIGHT;
+        if (direction === 'down') {
+            if (!fullyVisible) {
+                this._optionListScrollPos =
+                    optionIndex * OPT_HEIGHT - (VISIBLE_OPTS - 1) * OPT_HEIGHT;
+            }
         }
+        if (direction === 'up') {
+            if (!fullyVisible) {
+                this._optionListScrollPos = Math.floor(this._opts.relativeActiveIndex * OPT_HEIGHT);
+            }
+        }
+    }
+    //#region event handlers
+    _onFaceClick() {
+        this.open = !this.open;
     }
     _onComboboxButtonClick() {
         this._toggleComboboxDropdown();
@@ -338,11 +342,11 @@ export class VscodeSelectBase extends VscElement {
         }
         if (el.matches('.placeholder')) {
             this._isPlaceholderOptionActive = true;
-            this._activeIndex = -1;
+            this._opts.activeIndex = -1;
         }
         else {
             this._isPlaceholderOptionActive = false;
-            this._activeIndex = Number(this.combobox ? el.dataset.filteredIndex : el.dataset.index);
+            this._opts.activeIndex = +el.dataset.index;
         }
     }
     _onPlaceholderOptionMouseOut() {
@@ -363,143 +367,70 @@ export class VscodeSelectBase extends VscElement {
         if (clickedOnAcceptButton) {
             return;
         }
-        const list = this.combobox ? this._filteredOptions : this._options;
-        const showDropdownNext = !this.open;
-        this._toggleDropdown(showDropdownNext);
-        if (!this._multiple &&
-            !showDropdownNext &&
-            this._selectedIndex !== this._activeIndex) {
-            this._selectedIndex =
-                this._activeIndex > -1 ? list[this._activeIndex].index : -1;
-            this._value =
-                this._selectedIndex > -1
-                    ? this._options[this._selectedIndex].value
-                    : '';
-            this._dispatchChangeEvent();
-        }
-        if (this.combobox) {
-            if (this._isPlaceholderOptionActive) {
-                this._createAndSelectSuggestedOption();
-            }
-            else {
-                if (!this._multiple && !showDropdownNext) {
-                    this._selectedIndex =
-                        this._activeIndex > -1
-                            ? this._filteredOptions[this._activeIndex].index
-                            : -1;
-                }
-                if (!this._multiple && showDropdownNext) {
-                    this.updateComplete.then(() => {
-                        this._scrollActiveElementToTop();
-                    });
-                }
-            }
-        }
-        if (this._multiple && showDropdownNext) {
-            this._activeIndex = 0;
-        }
     }
     _onSpaceKeyDown() {
         if (!this.open) {
-            this._toggleDropdown(true);
+            this.open = true;
             return;
         }
-        if (this.open && this._multiple && this._activeIndex > -1) {
-            const opts = this.combobox ? this._filteredOptions : this._options;
-            const selectedOption = opts[this._activeIndex];
-            const nextSelectedIndexes = [];
-            this._options[selectedOption.index].selected = !selectedOption.selected;
-            opts.forEach(({ index }) => {
-                const { selected } = this._options[index];
-                if (selected) {
-                    nextSelectedIndexes.push(index);
-                }
-            });
-            this._selectedIndexes = nextSelectedIndexes;
-        }
-    }
-    _scrollActiveElementToTop() {
-        this._listElement.scrollTop = Math.floor(this._activeIndex * OPT_HEIGHT);
-    }
-    async _adjustOptionListScrollPos(direction, optionIndex) {
-        let numOpts = this.combobox
-            ? this._filteredOptions.length
-            : this._options.length;
-        const suggestedOptionVisible = this._isSuggestedOptionVisible;
-        if (suggestedOptionVisible) {
-            numOpts += 1;
-        }
-        if (numOpts <= VISIBLE_OPTS) {
-            return;
-        }
-        this._isHoverForbidden = true;
-        window.addEventListener('mousemove', this._onMouseMove);
-        const ulScrollTop = this._listElement.scrollTop;
-        const liPosY = optionIndex * OPT_HEIGHT;
-        const fullyVisible = liPosY >= ulScrollTop &&
-            liPosY <= ulScrollTop + VISIBLE_OPTS * OPT_HEIGHT - OPT_HEIGHT;
-        if (direction === 'down') {
-            if (!fullyVisible) {
-                this._listElement.scrollTop =
-                    optionIndex * OPT_HEIGHT - (VISIBLE_OPTS - 1) * OPT_HEIGHT;
-            }
-        }
-        if (direction === 'up') {
-            if (!fullyVisible) {
-                this._listElement.scrollTop = Math.floor(this._activeIndex * OPT_HEIGHT);
-            }
-        }
     }
     _onArrowUpKeyDown() {
         if (this.open) {
-            if (this._activeIndex <= 0 && !(this.combobox && this.creatable)) {
+            if (this._opts.activeIndex <= 0 && !(this.combobox && this.creatable)) {
                 return;
             }
             if (this._isPlaceholderOptionActive) {
-                const optionIndex = this._currentOptions.length - 1;
-                this._activeIndex = optionIndex;
+                const optionIndex = this._opts.numOfVisibleOptions - 1;
+                this._opts.activeIndex = optionIndex;
                 this._isPlaceholderOptionActive = false;
             }
             else {
-                const currentOptions = this.combobox
-                    ? this._filteredOptions
-                    : this._options;
-                const prevSelectable = findPrevSelectableOptionIndex(currentOptions, this._activeIndex);
-                if (prevSelectable > -1) {
-                    this._activeIndex = prevSelectable;
-                    this._adjustOptionListScrollPos('up', prevSelectable);
+                const prevOp = this._opts.prev();
+                if (prevOp !== null) {
+                    this._opts.activeIndex = prevOp?.index ?? -1;
+                    const prevSelectableIndex = prevOp?.filteredIndex ?? -1;
+                    if (prevSelectableIndex > -1) {
+                        this._adjustOptionListScrollPos('up', prevSelectableIndex);
+                    }
                 }
             }
         }
+        else {
+            this.open = true;
+            this._opts.activateDefault();
+        }
     }
     _onArrowDownKeyDown() {
-        let numOpts = this.combobox
-            ? this._filteredOptions.length
-            : this._options.length;
-        const currentOptions = this.combobox
-            ? this._filteredOptions
-            : this._options;
+        let numOpts = this._opts.numOfVisibleOptions;
         const suggestedOptionVisible = this._isSuggestedOptionVisible;
         if (suggestedOptionVisible) {
             numOpts += 1;
         }
         if (this.open) {
-            if (this._isPlaceholderOptionActive && this._activeIndex === -1) {
+            if (this._isPlaceholderOptionActive && this._opts.activeIndex === -1) {
                 return;
             }
-            if (suggestedOptionVisible && this._activeIndex === numOpts - 2) {
+            const nextOp = this._opts.next();
+            if (suggestedOptionVisible && nextOp === null) {
                 this._isPlaceholderOptionActive = true;
                 this._adjustOptionListScrollPos('down', numOpts - 1);
-                this._activeIndex = -1;
+                this._opts.activeIndex = -1;
             }
-            else if (this._activeIndex < numOpts - 1) {
-                const nextSelectable = findNextSelectableOptionIndex(currentOptions, this._activeIndex);
-                if (nextSelectable > -1) {
-                    this._activeIndex = nextSelectable;
-                    this._adjustOptionListScrollPos('down', nextSelectable);
+            else if (nextOp !== null) {
+                const nextSelectableIndex = nextOp?.filteredIndex ?? -1;
+                this._opts.activeIndex = nextOp?.index ?? -1;
+                if (nextSelectableIndex > -1) {
+                    this._adjustOptionListScrollPos('down', nextSelectableIndex);
                 }
             }
         }
+        else {
+            this.open = true;
+            this._opts.activateDefault();
+        }
+    }
+    _onEscapeKeyDown() {
+        this.open = false;
     }
     _onSlotChange() {
         this._setStateFromSlottedElements();
@@ -508,61 +439,83 @@ export class VscodeSelectBase extends VscElement {
     _onComboboxInputFocus(ev) {
         ev.target.select();
         this._isBeingFiltered = false;
-        this._filterPattern = '';
+        this._opts.filterPattern = '';
     }
     _onComboboxInputBlur() {
         this._isBeingFiltered = false;
     }
     _onComboboxInputInput(ev) {
         this._isBeingFiltered = true;
-        this._filterPattern = ev.target.value;
-        this._activeIndex = -1;
-        this._toggleDropdown(true);
+        this._opts.filterPattern = ev.target.value;
+        this._opts.activeIndex = -1;
+        this.open = true;
     }
     _onComboboxInputClick() {
-        this._isBeingFiltered = this._filterPattern !== '';
-        this._toggleDropdown(true);
+        this._isBeingFiltered = this._opts.filterPattern !== '';
+        this.open = true;
+    }
+    _onComboboxInputSpaceKeyDown(ev) {
+        if (ev.key === ' ') {
+            ev.stopPropagation();
+        }
     }
     _onOptionClick(_ev) {
         this._isBeingFiltered = false;
         return;
     }
+    //#endregion
+    //#region render functions
+    _renderCheckbox(checked, label) {
+        const checkboxClasses = {
+            'checkbox-icon': true,
+            checked,
+        };
+        return html `<span class=${classMap(checkboxClasses)}>${checkIcon}</span
+      ><span class="option-label">${label}</span>`;
+    }
     _renderOptions() {
-        const list = this.combobox ? this._filteredOptions : this._options;
+        const list = this._opts.options;
         return html `
       <ul
+        aria-label=${ifDefined(this.label ?? undefined)}
+        aria-multiselectable=${ifDefined(this._opts.multiSelect ? 'true' : undefined)}
         class="options"
+        id="select-listbox"
+        role="listbox"
+        tabindex="-1"
         @click=${this._onOptionClick}
         @mouseover=${this._onOptionMouseOver}
       >
         ${repeat(list, (op) => op.index, (op, index) => {
+            if (!op.visible) {
+                return nothing;
+            }
+            const active = op.index === this._opts.activeIndex && !op.disabled;
+            const selected = this._opts.getIsIndexSelected(op.index);
             const optionClasses = {
-                active: index === this._activeIndex && !op.disabled,
+                active,
                 disabled: op.disabled,
                 option: true,
-                selected: op.selected,
-            };
-            const checkboxClasses = {
-                'checkbox-icon': true,
-                checked: op.selected,
+                selected,
             };
             const labelText = (op.ranges?.length ?? 0 > 0)
                 ? highlightRanges(op.label, op.ranges ?? [])
                 : op.label;
             return html `
               <li
+                aria-selected=${selected ? 'true' : 'false'}
                 class=${classMap(optionClasses)}
                 data-index=${op.index}
                 data-filtered-index=${index}
+                id=${`op-${op.index}`}
+                role="option"
+                tabindex="-1"
               >
-                ${this._multiple
-                ? html `<span class=${classMap(checkboxClasses)}></span
-                      ><span class="option-label">${labelText}</span>`
-                : labelText}
+                ${when(this._opts.multiSelect, () => this._renderCheckbox(selected, labelText), () => labelText)}
               </li>
             `;
         })}
-        ${this._renderPlaceholderOption(list.length < 1)}
+        ${this._renderPlaceholderOption(this._opts.numOfVisibleOptions < 1)}
       </ul>
     `;
     }
@@ -570,10 +523,11 @@ export class VscodeSelectBase extends VscElement {
         if (!this.combobox) {
             return nothing;
         }
-        if (this._valueOptionIndexMap[this._filterPattern]) {
+        const foundOption = this._opts.getOptionByLabel(this._opts.filterPattern);
+        if (foundOption) {
             return nothing;
         }
-        if (this.creatable && this._filterPattern.length > 0) {
+        if (this.creatable && this._opts.filterPattern.length > 0) {
             return html `<li
         class=${classMap({
                 option: true,
@@ -582,7 +536,7 @@ export class VscodeSelectBase extends VscElement {
             })}
         @mouseout=${this._onPlaceholderOptionMouseOut}
       >
-        Add "${this._filterPattern}"
+        Add "${this._opts.filterPattern}"
       </li>`;
         }
         else {
@@ -594,10 +548,11 @@ export class VscodeSelectBase extends VscElement {
         }
     }
     _renderDescription() {
-        if (!this._options[this._activeIndex]) {
+        const op = this._opts.getActiveOption();
+        if (!op) {
             return nothing;
         }
-        const { description } = this._options[this._activeIndex];
+        const { description } = op;
         return description
             ? html `<div class="description">${description}</div>`
             : nothing;
@@ -605,89 +560,52 @@ export class VscodeSelectBase extends VscElement {
     _renderSelectFace() {
         return html `${nothing}`;
     }
-    _renderMultiSelectLabel() {
-        switch (this._selectedIndexes.length) {
-            case 0:
-                return html `<span class="select-face-badge no-item"
-          >No items selected</span
-        >`;
-            case 1:
-                return html `<span class="select-face-badge">1 item selected</span>`;
-            default:
-                return html `<span class="select-face-badge"
-          >${this._selectedIndexes.length} items selected</span
-        >`;
-        }
-    }
     _renderComboboxFace() {
-        let inputVal = '';
-        if (this._isBeingFiltered) {
-            inputVal = this._filterPattern;
-        }
-        else {
-            inputVal =
-                this._selectedIndex > -1
-                    ? (this._options[this._selectedIndex]?.label ?? '')
-                    : '';
-        }
-        return html `
-      <div class="combobox-face face">
-        ${this._multiple ? this._renderMultiSelectLabel() : nothing}
-        <input
-          class="combobox-input"
-          spellcheck="false"
-          type="text"
-          autocomplete="off"
-          .value=${inputVal}
-          @focus=${this._onComboboxInputFocus}
-          @blur=${this._onComboboxInputBlur}
-          @input=${this._onComboboxInputInput}
-          @click=${this._onComboboxInputClick}
-        >
-        <button
-          class="combobox-button"
-          type="button"
-          @click=${this._onComboboxButtonClick}
-          @keydown=${this._onComboboxButtonKeyDown}
-        >
-          ${chevronDownIcon}
-        </button>
-      </div>
-    `;
+        return html `${nothing}`;
     }
     _renderDropdownControls() {
         return html `${nothing}`;
     }
     _renderDropdown() {
-        const classes = classMap({
+        const classes = {
             dropdown: true,
-            multiple: this._multiple,
-        });
+            multiple: this._opts.multiSelect,
+            open: this.open,
+        };
+        const visibleOptions = this._isSuggestedOptionVisible || this._opts.numOfVisibleOptions === 0
+            ? this._opts.numOfVisibleOptions + 1
+            : this._opts.numOfVisibleOptions;
+        const scrollPaneHeight = Math.min(visibleOptions * OPT_HEIGHT, VISIBLE_OPTS * OPT_HEIGHT);
         return html `
-      <div class=${classes}>
+      <div class=${classMap(classes)}>
         ${this.position === 'above' ? this._renderDescription() : nothing}
-        ${this._renderOptions()} ${this._renderDropdownControls()}
+        <vscode-scrollable
+          always-visible
+          class="scrollable"
+          min-thumb-size="40"
+          tabindex="-1"
+          @vsc-scrollable-scroll=${this._onOptionListScroll}
+          .scrollPos=${this._optionListScrollPos}
+          .style=${stylePropertyMap({
+            height: `${scrollPaneHeight}px`,
+        })}
+        >
+          ${this._renderOptions()} ${this._renderDropdownControls()}
+        </vscode-scrollable>
         ${this.position === 'below' ? this._renderDescription() : nothing}
       </div>
     `;
     }
-    render() {
-        return html `
-      <slot class="main-slot" @slotchange=${this._onSlotChange}></slot>
-      ${this.combobox ? this._renderComboboxFace() : this._renderSelectFace()}
-      ${this.open ? this._renderDropdown() : nothing}
-    `;
-    }
 }
-__decorate([
-    property({ type: String, reflect: true, attribute: 'aria-expanded' })
-], VscodeSelectBase.prototype, "ariaExpanded", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], VscodeSelectBase.prototype, "creatable", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], VscodeSelectBase.prototype, "combobox", void 0);
+], VscodeSelectBase.prototype, "combobox", null);
+__decorate([
+    property({ reflect: true })
+], VscodeSelectBase.prototype, "label", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], VscodeSelectBase.prototype, "disabled", null);
@@ -709,18 +627,12 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], VscodeSelectBase.prototype, "position", void 0);
-__decorate([
-    property({ type: Number, attribute: true, reflect: true })
-], VscodeSelectBase.prototype, "tabIndex", void 0);
 __decorate([
     queryAssignedElements({
         flatten: true,
         selector: 'vscode-option',
     })
 ], VscodeSelectBase.prototype, "_assignedOptions", void 0);
-__decorate([
-    state()
-], VscodeSelectBase.prototype, "_activeIndex", void 0);
 __decorate([
     state()
 ], VscodeSelectBase.prototype, "_currentDescription", void 0);
@@ -730,12 +642,6 @@ __decorate([
 __decorate([
     state()
 ], VscodeSelectBase.prototype, "_filteredOptions", null);
-__decorate([
-    state()
-], VscodeSelectBase.prototype, "_filterPattern", void 0);
-__decorate([
-    state()
-], VscodeSelectBase.prototype, "_selectedIndex", void 0);
 __decorate([
     state()
 ], VscodeSelectBase.prototype, "_selectedIndexes", void 0);
@@ -748,9 +654,6 @@ __decorate([
 __decorate([
     state()
 ], VscodeSelectBase.prototype, "_values", void 0);
-__decorate([
-    state()
-], VscodeSelectBase.prototype, "_listScrollTop", void 0);
 __decorate([
     state()
 ], VscodeSelectBase.prototype, "_isPlaceholderOptionActive", void 0);
@@ -758,6 +661,6 @@ __decorate([
     state()
 ], VscodeSelectBase.prototype, "_isBeingFiltered", void 0);
 __decorate([
-    query('.options')
-], VscodeSelectBase.prototype, "_listElement", void 0);
+    state()
+], VscodeSelectBase.prototype, "_optionListScrollPos", void 0);
 //# sourceMappingURL=vscode-select-base.js.map