@vscode-elements/elements 1.16.0 → 1.16.2-pre.0

package/dist/vscode-single-select/vscode-single-select.js

@@ -6,11 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { html, LitElement } from 'lit';
 import { property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { customElement } from '../includes/VscElement.js';
 import { chevronDownIcon } from '../includes/vscode-select/template-elements.js';
 import { VscodeSelectBase } from '../includes/vscode-select/vscode-select-base.js';
 import styles from './vscode-single-select.styles.js';
-import { findNextSelectableOptionIndex, findPrevSelectableOptionIndex, } from '../includes/vscode-select/helpers.js';
 /**
  * Allows to select an item from multiple options.
  *
@@ -59,10 +59,11 @@ import { findNextSelectableOptionIndex, findPrevSelectableOptionIndex, } from '.
  */
 let VscodeSingleSelect = class VscodeSingleSelect extends VscodeSelectBase {
     set selectedIndex(val) {
-        this._selectedIndex = val;
-        if (this._options[val]) {
-            this._activeIndex = val;
-            this._value = this._options[val].value;
+        this._opts.selectedIndex = val;
+        const op = this._opts.getOptionByIndex(val);
+        if (op) {
+            this._opts.activeIndex = val;
+            this._value = op.value;
             this._internals.setFormValue(this._value);
             this._manageRequired();
         }
@@ -73,30 +74,21 @@ let VscodeSingleSelect = class VscodeSingleSelect extends VscodeSelectBase {
         }
     }
     get selectedIndex() {
-        return this._selectedIndex;
+        return this._opts.selectedIndex;
     }
     set value(val) {
-        if (this._options[this._selectedIndex]) {
-            this._options[this._selectedIndex].selected = false;
-        }
-        this._selectedIndex = this._options.findIndex((op) => op.value === val);
-        if (this._selectedIndex > -1) {
-            this._options[this._selectedIndex].selected = true;
-            this._value = val;
+        this._opts.value = val;
+        if (this._opts.selectedIndex > -1) {
             this._requestedValueToSetLater = '';
         }
         else {
-            this._value = '';
             this._requestedValueToSetLater = val;
         }
         this._internals.setFormValue(this._value);
         this._manageRequired();
     }
     get value() {
-        if (this._options[this._selectedIndex]) {
-            return this._options[this._selectedIndex]?.value ?? '';
-        }
-        return '';
+        return this._opts.value;
     }
     get validity() {
         return this._internals.validity;
@@ -119,16 +111,13 @@ let VscodeSingleSelect = class VscodeSingleSelect extends VscodeSelectBase {
         }
         const input = this.renderRoot.querySelector('.combobox-input');
         if (input) {
-            input.value = this._options[this._selectedIndex]
-                ? this._options[this._selectedIndex].label
-                : '';
+            const selectedOption = this._opts.getSelectedOption();
+            input.value = selectedOption?.label ?? '';
         }
     }
     constructor() {
         super();
         this.defaultValue = '';
-        /** @internal */
-        this.role = 'listbox';
         this.name = undefined;
         this.required = false;
         /**
@@ -136,8 +125,7 @@ let VscodeSingleSelect = class VscodeSingleSelect extends VscodeSelectBase {
          * exists. This can happen while a framework like Vue or React is rendering the component.
          */
         this._requestedValueToSetLater = '';
-        /** @internal */
-        this._multiple = false;
+        this._opts.multiSelect = false;
         this._internals = this.attachInternals();
     }
     connectedCallback() {
@@ -166,25 +154,42 @@ let VscodeSingleSelect = class VscodeSingleSelect extends VscodeSelectBase {
     async _createAndSelectSuggestedOption() {
         const nextIndex = this._createSuggestedOption();
         await this.updateComplete;
-        this.selectedIndex = nextIndex;
+        this._opts.selectedIndex = nextIndex;
         this._dispatchChangeEvent();
-        const opCreateEvent = new CustomEvent('vsc-single-select-create-option', { detail: { value: this._options[nextIndex]?.value ?? '' } });
+        const opCreateEvent = new CustomEvent('vsc-single-select-create-option', { detail: { value: this._opts.getOptionByIndex(nextIndex)?.value ?? '' } });
         this.dispatchEvent(opCreateEvent);
-        this._toggleDropdown(false);
+        this.open = false;
         this._isPlaceholderOptionActive = false;
     }
+    _dispatchChangeEvent() {
+        /** @deprecated */
+        this.dispatchEvent(new CustomEvent('vsc-change', {
+            detail: {
+                selectedIndex: this._opts.selectedIndex,
+                value: this._value,
+            },
+        }));
+        super._dispatchChangeEvent();
+    }
+    _setStateFromSlottedElements() {
+        super._setStateFromSlottedElements();
+        if (!this.combobox && this._opts.selectedIndexes.length === 0) {
+            this._opts.selectedIndex = this._opts.options.length > 0 ? 0 : -1;
+        }
+    }
+    //#region event handlers
     _onSlotChange() {
         super._onSlotChange();
         if (this._requestedValueToSetLater) {
             // the value is set before the available options are appended
-            const foundIndex = this._options.findIndex((op) => op.value === this._requestedValueToSetLater);
-            if (foundIndex > 0) {
-                this._selectedIndex = foundIndex;
+            const foundOption = this._opts.getOptionByValue(this._requestedValueToSetLater);
+            if (foundOption) {
+                this._opts.selectedIndex = foundOption.index;
                 this._requestedValueToSetLater = '';
             }
         }
-        if (this._selectedIndex > -1 && this._options.length > 0) {
-            this._internals.setFormValue(this._options[this._selectedIndex].value);
+        if (this._opts.selectedIndex > -1 && this._opts.numOptions > 0) {
+            this._internals.setFormValue(this._opts.value);
             this._manageRequired();
         }
         else {
@@ -192,41 +197,42 @@ let VscodeSingleSelect = class VscodeSingleSelect extends VscodeSelectBase {
             this._manageRequired();
         }
     }
-    _onArrowUpKeyDown() {
-        super._onArrowUpKeyDown();
-        if (this.open || this._selectedIndex <= 0) {
-            return;
-        }
-        const options = this.combobox ? this._filteredOptions : this._options;
-        const prevIndex = findPrevSelectableOptionIndex(options, this._activeIndex);
-        this._filterPattern = '';
-        this._selectedIndex = prevIndex;
-        this._activeIndex = prevIndex;
-        this._value = prevIndex > -1 ? this._options[prevIndex].value : '';
-        this._internals.setFormValue(this._value);
-        this._manageRequired();
-        this._dispatchChangeEvent();
-    }
-    _onArrowDownKeyDown() {
-        super._onArrowDownKeyDown();
-        if (this.open || this._selectedIndex >= this._options.length - 1) {
-            return;
-        }
-        const options = this.combobox ? this._filteredOptions : this._options;
-        const nextIndex = findNextSelectableOptionIndex(options, this._activeIndex);
-        this._filterPattern = '';
-        this._selectedIndex = nextIndex;
-        this._activeIndex = nextIndex;
-        this._value = nextIndex > -1 ? this._options[nextIndex].value : '';
-        this._internals.setFormValue(this._value);
-        this._manageRequired();
-        this._dispatchChangeEvent();
-    }
     _onEnterKeyDown(ev) {
         super._onEnterKeyDown(ev);
-        this.updateInputValue();
-        this._internals.setFormValue(this._value);
-        this._manageRequired();
+        let valueChanged = false;
+        if (this.combobox) {
+            if (this.open) {
+                if (this._isPlaceholderOptionActive) {
+                    this._createAndSelectSuggestedOption();
+                }
+                else {
+                    valueChanged = this._opts.activeIndex !== this._opts.selectedIndex;
+                    this._opts.selectedIndex = this._opts.activeIndex;
+                    this.open = false;
+                }
+            }
+            else {
+                this.open = true;
+                this._scrollActiveElementToTop();
+            }
+        }
+        else {
+            if (this.open) {
+                valueChanged = this._opts.activeIndex !== this._opts.selectedIndex;
+                this._opts.selectedIndex = this._opts.activeIndex;
+                this.open = false;
+            }
+            else {
+                this.open = true;
+                this._scrollActiveElementToTop();
+            }
+        }
+        if (valueChanged) {
+            this._dispatchChangeEvent();
+            this.updateInputValue();
+            this._internals.setFormValue(this._opts.value);
+            this._manageRequired();
+        }
     }
     _onOptionClick(ev) {
         super._onOptionClick(ev);
@@ -248,14 +254,14 @@ let VscodeSingleSelect = class VscodeSingleSelect extends VscodeSelectBase {
             }
         }
         else {
-            this._selectedIndex = Number(optEl.dataset.index);
-            this._value = this._options[this._selectedIndex].value;
-            this._toggleDropdown(false);
+            this._opts.selectedIndex = Number(optEl.dataset.index);
+            this.open = false;
             this._internals.setFormValue(this._value);
             this._manageRequired();
             this._dispatchChangeEvent();
         }
     }
+    //#endregion
     _manageRequired() {
         const { value } = this;
         if (value === '' && this.required) {
@@ -265,18 +271,81 @@ let VscodeSingleSelect = class VscodeSingleSelect extends VscodeSelectBase {
             this._internals.setValidity({});
         }
     }
+    //#region render functions
     _renderSelectFace() {
-        const label = this._options[this._selectedIndex]?.label ?? '';
+        const selectedOption = this._opts.getSelectedOption();
+        const label = selectedOption?.label ?? '';
+        const activeDescendant = this._opts.activeIndex > -1 ? `op-${this._opts.activeIndex}` : '';
         return html `
       <div
+        aria-activedescendant=${activeDescendant}
+        aria-controls="select-listbox"
+        aria-expanded=${this.open ? 'true' : 'false'}
+        aria-haspopup="listbox"
+        aria-label=${ifDefined(this.label)}
         class="select-face face"
         @click=${this._onFaceClick}
-        tabindex=${this.tabIndex > -1 ? 0 : -1}
+        role="combobox"
+        tabindex="0"
       >
         <span class="text">${label}</span> ${chevronDownIcon}
       </div>
     `;
     }
+    _renderComboboxFace() {
+        let inputVal = '';
+        if (this._isBeingFiltered) {
+            inputVal = this._opts.filterPattern;
+        }
+        else {
+            const op = this._opts.getSelectedOption();
+            inputVal = op?.label ?? '';
+        }
+        const activeDescendant = this._opts.activeIndex > -1 ? `op-${this._opts.activeIndex}` : '';
+        const expanded = this.open ? 'true' : 'false';
+        return html `
+      <div class="combobox-face face">
+        <input
+          aria-activedescendant=${activeDescendant}
+          aria-autocomplete="list"
+          aria-controls="select-listbox"
+          aria-expanded=${expanded}
+          aria-haspopup="listbox"
+          aria-label=${ifDefined(this.label)}
+          class="combobox-input"
+          role="combobox"
+          spellcheck="false"
+          type="text"
+          autocomplete="off"
+          .value=${inputVal}
+          @focus=${this._onComboboxInputFocus}
+          @blur=${this._onComboboxInputBlur}
+          @input=${this._onComboboxInputInput}
+          @click=${this._onComboboxInputClick}
+          @keydown=${this._onComboboxInputSpaceKeyDown}
+        >
+        <button
+          aria-label="Open the list of options"
+          class="combobox-button"
+          type="button"
+          @click=${this._onComboboxButtonClick}
+          @keydown=${this._onComboboxButtonKeyDown}
+          tabindex="-1"
+        >
+          ${chevronDownIcon}
+        </button>
+      </div>
+    `;
+    }
+    render() {
+        return html `
+      <div class="single-select">
+        <slot class="main-slot" @slotchange=${this._onSlotChange}></slot>
+        ${this.combobox ? this._renderComboboxFace() : this._renderSelectFace()}
+        ${this._renderDropdown()}
+      </div>
+    `;
+    }
 };
 VscodeSingleSelect.styles = styles;
 /** @internal */
@@ -289,9 +358,6 @@ VscodeSingleSelect.formAssociated = true;
 __decorate([
     property({ attribute: 'default-value' })
 ], VscodeSingleSelect.prototype, "defaultValue", void 0);
-__decorate([
-    property({ type: String, attribute: true, reflect: true })
-], VscodeSingleSelect.prototype, "role", void 0);
 __decorate([
     property({ reflect: true })
 ], VscodeSingleSelect.prototype, "name", void 0);

package/dist/vscode-single-select/vscode-single-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"vscode-single-select.js","sourceRoot":"","sources":["../../src/vscode-single-select/vscode-single-select.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, LitElement, TemplateResult} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {customElement} from '../includes/VscElement.js';\nimport {chevronDownIcon} from '../includes/vscode-select/template-elements.js';\nimport {VscodeSelectBase} from '../includes/vscode-select/vscode-select-base.js';\nimport styles from './vscode-single-select.styles.js';\nimport {AssociatedFormControl} from '../includes/AssociatedFormControl.js';\nimport {\n  findNextSelectableOptionIndex,\n  findPrevSelectableOptionIndex,\n} from '../includes/vscode-select/helpers.js';\n\nexport type VscSingleSelectCreateOptionEvent = CustomEvent<{value: string}>;\n\n/**\n * Allows to select an item from multiple options.\n *\n * When participating in a form, it supports the `:invalid` pseudo class. Otherwise the error styles\n * can be applied through the `invalid` property.\n *\n * @tag vscode-single-select\n *\n * ## Types\n *\n * ```typescript\n *interface Option {\n *  label: string;\n *  value: string;\n *  description: string;\n *  selected: boolean;\n *  disabled: boolean;\n *}\n * ```\n * @prop {boolean} invalid\n * @attr {boolean} invalid\n * @attr name - Name which is used as a variable name in the data of the form-container.\n *\n * @cssprop [--dropdown-z-index=2]\n * @cssprop [--vscode-badge-background=#616161]\n * @cssprop [--vscode-badge-foreground=#f8f8f8]\n * @cssprop [--vscode-settings-dropdownBorder=#3c3c3c]\n * @cssprop [--vscode-settings-checkboxBackground=#313131]\n * @cssprop [--vscode-settings-dropdownBackground=#313131]\n * @cssprop [--vscode-settings-dropdownForeground=#cccccc]\n * @cssprop [--vscode-settings-dropdownListBorder=#454545]\n * @cssprop [--vscode-focusBorder=#0078d4]\n * @cssprop [--vscode-foreground=#cccccc]\n * @cssprop [--vscode-font-family=sans-serif]\n * @cssprop [--vscode-font-size=13px]\n * @cssprop [--vscode-font-weight=normal]\n * @cssprop [--vscode-inputValidation-errorBackground=#5a1d1d]\n * @cssprop [--vscode-inputValidation-errorBorder=#be1100]\n * @cssprop [--vscode-list-activeSelectionBackground=#04395e]\n * @cssprop [--vscode-list-activeSelectionForeground=#ffffff]\n * @cssprop [--vscode-list-focusOutline=#0078d4]\n * @cssprop [--vscode-list-focusHighlightForeground=#2aaaff]\n * @cssprop [--vscode-list-highlightForeground=#2aaaff]\n * @cssprop [--vscode-list-hoverBackground=#2a2d2e]\n * @cssprop [--vscode-list-hoverForeground=#ffffff]\n */\n@customElement('vscode-single-select')\nexport class VscodeSingleSelect\n  extends VscodeSelectBase\n  implements AssociatedFormControl\n{\n  static override styles = styles;\n\n  /** @internal */\n  static override shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /** @internal */\n  static formAssociated = true;\n\n  @property({attribute: 'default-value'})\n  defaultValue = '';\n\n  /** @internal */\n  @property({type: String, attribute: true, reflect: true})\n  override role = 'listbox';\n\n  @property({reflect: true})\n  name: string | undefined = undefined;\n\n  @property({type: Number, attribute: 'selected-index'})\n  set selectedIndex(val: number) {\n    this._selectedIndex = val;\n\n    if (this._options[val]) {\n      this._activeIndex = val;\n      this._value = this._options[val].value;\n      this._internals.setFormValue(this._value);\n      this._manageRequired();\n    } else {\n      this._value = '';\n      this._internals.setFormValue('');\n      this._manageRequired();\n    }\n  }\n  get selectedIndex(): number {\n    return this._selectedIndex;\n  }\n\n  @property({type: String})\n  set value(val: string) {\n    if (this._options[this._selectedIndex]) {\n      this._options[this._selectedIndex].selected = false;\n    }\n\n    this._selectedIndex = this._options.findIndex((op) => op.value === val);\n\n    if (this._selectedIndex > -1) {\n      this._options[this._selectedIndex].selected = true;\n      this._value = val;\n      this._requestedValueToSetLater = '';\n    } else {\n      this._value = '';\n      this._requestedValueToSetLater = val;\n    }\n\n    this._internals.setFormValue(this._value);\n    this._manageRequired();\n  }\n  get value(): string {\n    if (this._options[this._selectedIndex]) {\n      return this._options[this._selectedIndex]?.value ?? '';\n    }\n\n    return '';\n  }\n\n  @property({type: Boolean, reflect: true})\n  required = false;\n\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  get willValidate() {\n    return this._internals.willValidate;\n  }\n\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n\n  @query('.face')\n  private _face!: HTMLDivElement;\n\n  private _internals: ElementInternals;\n\n  private updateInputValue() {\n    if (!this.combobox) {\n      return;\n    }\n\n    const input = this.renderRoot.querySelector(\n      '.combobox-input'\n    ) as HTMLInputElement;\n\n    if (input) {\n      input.value = this._options[this._selectedIndex]\n        ? this._options[this._selectedIndex].label\n        : '';\n    }\n  }\n\n  constructor() {\n    super();\n    /** @internal */\n    this._multiple = false;\n    this._internals = this.attachInternals();\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.updateComplete.then(() => {\n      this._manageRequired();\n    });\n  }\n\n  /** @internal */\n  formResetCallback(): void {\n    this.value = this.defaultValue;\n  }\n\n  /** @internal */\n  formStateRestoreCallback(\n    state: string,\n    _mode: 'restore' | 'autocomplete'\n  ): void {\n    this.updateComplete.then(() => {\n      this.value = state;\n    });\n  }\n\n  /** @internal */\n  get type(): 'select-one' {\n    return 'select-one';\n  }\n\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /**\n   * This variable was introduced for cases where the value is set before the corresponding option\n   * exists. This can happen while a framework like Vue or React is rendering the component.\n   */\n  private _requestedValueToSetLater = '';\n\n  protected override async _createAndSelectSuggestedOption() {\n    const nextIndex = this._createSuggestedOption();\n\n    await this.updateComplete;\n\n    this.selectedIndex = nextIndex;\n    this._dispatchChangeEvent();\n    const opCreateEvent: VscSingleSelectCreateOptionEvent = new CustomEvent(\n      'vsc-single-select-create-option',\n      {detail: {value: this._options[nextIndex]?.value ?? ''}}\n    );\n    this.dispatchEvent(opCreateEvent);\n    this._toggleDropdown(false);\n    this._isPlaceholderOptionActive = false;\n  }\n\n  protected override _onSlotChange(): void {\n    super._onSlotChange();\n\n    if (this._requestedValueToSetLater) {\n      // the value is set before the available options are appended\n      const foundIndex = this._options.findIndex(\n        (op) => op.value === this._requestedValueToSetLater\n      );\n\n      if (foundIndex > 0) {\n        this._selectedIndex = foundIndex;\n        this._requestedValueToSetLater = '';\n      }\n    }\n\n    if (this._selectedIndex > -1 && this._options.length > 0) {\n      this._internals.setFormValue(this._options[this._selectedIndex].value);\n      this._manageRequired();\n    } else {\n      this._internals.setFormValue(null);\n      this._manageRequired();\n    }\n  }\n\n  protected override _onArrowUpKeyDown(): void {\n    super._onArrowUpKeyDown();\n\n    if (this.open || this._selectedIndex <= 0) {\n      return;\n    }\n\n    const options = this.combobox ? this._filteredOptions : this._options;\n    const prevIndex = findPrevSelectableOptionIndex(options, this._activeIndex);\n\n    this._filterPattern = '';\n    this._selectedIndex = prevIndex;\n    this._activeIndex = prevIndex;\n    this._value = prevIndex > -1 ? this._options[prevIndex].value : '';\n    this._internals.setFormValue(this._value);\n    this._manageRequired();\n    this._dispatchChangeEvent();\n  }\n\n  protected override _onArrowDownKeyDown(): void {\n    super._onArrowDownKeyDown();\n\n    if (this.open || this._selectedIndex >= this._options.length - 1) {\n      return;\n    }\n\n    const options = this.combobox ? this._filteredOptions : this._options;\n    const nextIndex = findNextSelectableOptionIndex(options, this._activeIndex);\n\n    this._filterPattern = '';\n    this._selectedIndex = nextIndex;\n    this._activeIndex = nextIndex;\n    this._value = nextIndex > -1 ? this._options[nextIndex].value : '';\n    this._internals.setFormValue(this._value);\n    this._manageRequired();\n    this._dispatchChangeEvent();\n  }\n\n  protected override _onEnterKeyDown(ev: KeyboardEvent): void {\n    super._onEnterKeyDown(ev);\n\n    this.updateInputValue();\n    this._internals.setFormValue(this._value);\n    this._manageRequired();\n  }\n\n  protected override _onOptionClick(ev: MouseEvent) {\n    super._onOptionClick(ev);\n    const composedPath = ev.composedPath();\n    const optEl = composedPath.find((et) => {\n      const el = et as HTMLElement;\n\n      if ('matches' in el) {\n        return el.matches('li.option');\n      }\n\n      return;\n    }) as HTMLElement | undefined;\n\n    if (!optEl || optEl.matches('.disabled')) {\n      return;\n    }\n\n    const isPlaceholderOption = optEl.classList.contains('placeholder');\n\n    if (isPlaceholderOption) {\n      if (this.creatable) {\n        this._createAndSelectSuggestedOption();\n      }\n    } else {\n      this._selectedIndex = Number((optEl as HTMLElement).dataset.index);\n      this._value = this._options[this._selectedIndex].value;\n\n      this._toggleDropdown(false);\n      this._internals.setFormValue(this._value);\n      this._manageRequired();\n      this._dispatchChangeEvent();\n    }\n  }\n\n  protected override _manageRequired() {\n    const {value} = this;\n    if (value === '' && this.required) {\n      this._internals.setValidity(\n        {valueMissing: true},\n        'Please select an item in the list.',\n        this._face\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  protected override _renderSelectFace(): TemplateResult {\n    const label = this._options[this._selectedIndex]?.label ?? '';\n\n    return html`\n      <div\n        class=\"select-face face\"\n        @click=${this._onFaceClick}\n        tabindex=${this.tabIndex > -1 ? 0 : -1}\n      >\n        <span class=\"text\">${label}</span> ${chevronDownIcon}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'vscode-single-select': VscodeSingleSelect;\n  }\n\n  interface GlobalEventHandlersEventMap {\n    'vsc-single-select-create-option': VscSingleSelectCreateOptionEvent;\n  }\n}\n"]}
+{"version":3,"file":"vscode-single-select.js","sourceRoot":"","sources":["../../src/vscode-single-select/vscode-single-select.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, LitElement, TemplateResult} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport {ifDefined} from 'lit/directives/if-defined.js';\nimport {customElement} from '../includes/VscElement.js';\nimport {chevronDownIcon} from '../includes/vscode-select/template-elements.js';\nimport {VscodeSelectBase} from '../includes/vscode-select/vscode-select-base.js';\nimport {AssociatedFormControl} from '../includes/AssociatedFormControl.js';\nimport styles from './vscode-single-select.styles.js';\n\nexport type VscSingleSelectCreateOptionEvent = CustomEvent<{value: string}>;\n\n/**\n * Allows to select an item from multiple options.\n *\n * When participating in a form, it supports the `:invalid` pseudo class. Otherwise the error styles\n * can be applied through the `invalid` property.\n *\n * @tag vscode-single-select\n *\n * ## Types\n *\n * ```typescript\n *interface Option {\n *  label: string;\n *  value: string;\n *  description: string;\n *  selected: boolean;\n *  disabled: boolean;\n *}\n * ```\n * @prop {boolean} invalid\n * @attr {boolean} invalid\n * @attr name - Name which is used as a variable name in the data of the form-container.\n *\n * @cssprop [--dropdown-z-index=2]\n * @cssprop [--vscode-badge-background=#616161]\n * @cssprop [--vscode-badge-foreground=#f8f8f8]\n * @cssprop [--vscode-settings-dropdownBorder=#3c3c3c]\n * @cssprop [--vscode-settings-checkboxBackground=#313131]\n * @cssprop [--vscode-settings-dropdownBackground=#313131]\n * @cssprop [--vscode-settings-dropdownForeground=#cccccc]\n * @cssprop [--vscode-settings-dropdownListBorder=#454545]\n * @cssprop [--vscode-focusBorder=#0078d4]\n * @cssprop [--vscode-foreground=#cccccc]\n * @cssprop [--vscode-font-family=sans-serif]\n * @cssprop [--vscode-font-size=13px]\n * @cssprop [--vscode-font-weight=normal]\n * @cssprop [--vscode-inputValidation-errorBackground=#5a1d1d]\n * @cssprop [--vscode-inputValidation-errorBorder=#be1100]\n * @cssprop [--vscode-list-activeSelectionBackground=#04395e]\n * @cssprop [--vscode-list-activeSelectionForeground=#ffffff]\n * @cssprop [--vscode-list-focusOutline=#0078d4]\n * @cssprop [--vscode-list-focusHighlightForeground=#2aaaff]\n * @cssprop [--vscode-list-highlightForeground=#2aaaff]\n * @cssprop [--vscode-list-hoverBackground=#2a2d2e]\n * @cssprop [--vscode-list-hoverForeground=#ffffff]\n */\n@customElement('vscode-single-select')\nexport class VscodeSingleSelect\n  extends VscodeSelectBase\n  implements AssociatedFormControl\n{\n  static override styles = styles;\n\n  /** @internal */\n  static override shadowRootOptions: ShadowRootInit = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /** @internal */\n  static formAssociated = true;\n\n  @property({attribute: 'default-value'})\n  defaultValue = '';\n\n  @property({reflect: true})\n  name: string | undefined = undefined;\n\n  @property({type: Number, attribute: 'selected-index'})\n  set selectedIndex(val: number) {\n    this._opts.selectedIndex = val;\n\n    const op = this._opts.getOptionByIndex(val);\n\n    if (op) {\n      this._opts.activeIndex = val;\n      this._value = op.value;\n      this._internals.setFormValue(this._value);\n      this._manageRequired();\n    } else {\n      this._value = '';\n      this._internals.setFormValue('');\n      this._manageRequired();\n    }\n  }\n  get selectedIndex(): number {\n    return this._opts.selectedIndex;\n  }\n\n  @property({type: String})\n  set value(val: string) {\n    this._opts.value = val;\n\n    if (this._opts.selectedIndex > -1) {\n      this._requestedValueToSetLater = '';\n    } else {\n      this._requestedValueToSetLater = val;\n    }\n\n    this._internals.setFormValue(this._value);\n    this._manageRequired();\n  }\n  get value(): string {\n    return this._opts.value as string;\n  }\n\n  @property({type: Boolean, reflect: true})\n  required = false;\n\n  get validity(): ValidityState {\n    return this._internals.validity;\n  }\n\n  get validationMessage(): string {\n    return this._internals.validationMessage;\n  }\n\n  get willValidate() {\n    return this._internals.willValidate;\n  }\n\n  checkValidity(): boolean {\n    return this._internals.checkValidity();\n  }\n\n  reportValidity(): boolean {\n    return this._internals.reportValidity();\n  }\n\n  @query('.face')\n  private _face!: HTMLDivElement;\n\n  private _internals: ElementInternals;\n\n  private updateInputValue() {\n    if (!this.combobox) {\n      return;\n    }\n\n    const input = this.renderRoot.querySelector(\n      '.combobox-input'\n    ) as HTMLInputElement;\n\n    if (input) {\n      const selectedOption = this._opts.getSelectedOption();\n      input.value = selectedOption?.label ?? '';\n    }\n  }\n\n  constructor() {\n    super();\n    this._opts.multiSelect = false;\n    this._internals = this.attachInternals();\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    this.updateComplete.then(() => {\n      this._manageRequired();\n    });\n  }\n\n  /** @internal */\n  formResetCallback(): void {\n    this.value = this.defaultValue;\n  }\n\n  /** @internal */\n  formStateRestoreCallback(\n    state: string,\n    _mode: 'restore' | 'autocomplete'\n  ): void {\n    this.updateComplete.then(() => {\n      this.value = state;\n    });\n  }\n\n  /** @internal */\n  get type(): 'select-one' {\n    return 'select-one';\n  }\n\n  get form(): HTMLFormElement | null {\n    return this._internals.form;\n  }\n\n  /**\n   * This variable was introduced for cases where the value is set before the corresponding option\n   * exists. This can happen while a framework like Vue or React is rendering the component.\n   */\n  private _requestedValueToSetLater = '';\n\n  protected override async _createAndSelectSuggestedOption() {\n    const nextIndex = this._createSuggestedOption();\n\n    await this.updateComplete;\n\n    this._opts.selectedIndex = nextIndex;\n    this._dispatchChangeEvent();\n    const opCreateEvent: VscSingleSelectCreateOptionEvent = new CustomEvent(\n      'vsc-single-select-create-option',\n      {detail: {value: this._opts.getOptionByIndex(nextIndex)?.value ?? ''}}\n    );\n    this.dispatchEvent(opCreateEvent);\n    this.open = false;\n    this._isPlaceholderOptionActive = false;\n  }\n\n  protected override _dispatchChangeEvent(): void {\n    /** @deprecated */\n    this.dispatchEvent(\n      new CustomEvent('vsc-change', {\n        detail: {\n          selectedIndex: this._opts.selectedIndex,\n          value: this._value,\n        },\n      })\n    );\n\n    super._dispatchChangeEvent();\n  }\n\n  protected override _setStateFromSlottedElements(): void {\n    super._setStateFromSlottedElements();\n\n    if (!this.combobox && this._opts.selectedIndexes.length === 0) {\n      this._opts.selectedIndex = this._opts.options.length > 0 ? 0 : -1;\n    }\n  }\n\n  //#region event handlers\n  protected override _onSlotChange(): void {\n    super._onSlotChange();\n\n    if (this._requestedValueToSetLater) {\n      // the value is set before the available options are appended\n      const foundOption = this._opts.getOptionByValue(\n        this._requestedValueToSetLater\n      );\n\n      if (foundOption) {\n        this._opts.selectedIndex = foundOption.index;\n        this._requestedValueToSetLater = '';\n      }\n    }\n\n    if (this._opts.selectedIndex > -1 && this._opts.numOptions > 0) {\n      this._internals.setFormValue(this._opts.value as string);\n      this._manageRequired();\n    } else {\n      this._internals.setFormValue(null);\n      this._manageRequired();\n    }\n  }\n\n  protected override _onEnterKeyDown(ev: KeyboardEvent): void {\n    super._onEnterKeyDown(ev);\n    let valueChanged = false;\n\n    if (this.combobox) {\n      if (this.open) {\n        if (this._isPlaceholderOptionActive) {\n          this._createAndSelectSuggestedOption();\n        } else {\n          valueChanged = this._opts.activeIndex !== this._opts.selectedIndex;\n          this._opts.selectedIndex = this._opts.activeIndex;\n          this.open = false;\n        }\n      } else {\n        this.open = true;\n        this._scrollActiveElementToTop();\n      }\n    } else {\n      if (this.open) {\n        valueChanged = this._opts.activeIndex !== this._opts.selectedIndex;\n        this._opts.selectedIndex = this._opts.activeIndex;\n        this.open = false;\n      } else {\n        this.open = true;\n        this._scrollActiveElementToTop();\n      }\n    }\n\n    if (valueChanged) {\n      this._dispatchChangeEvent();\n      this.updateInputValue();\n      this._internals.setFormValue(this._opts.value as string);\n      this._manageRequired();\n    }\n  }\n\n  protected override _onOptionClick(ev: MouseEvent) {\n    super._onOptionClick(ev);\n    const composedPath = ev.composedPath();\n    const optEl = composedPath.find((et) => {\n      const el = et as HTMLElement;\n\n      if ('matches' in el) {\n        return el.matches('li.option');\n      }\n\n      return;\n    }) as HTMLElement | undefined;\n\n    if (!optEl || optEl.matches('.disabled')) {\n      return;\n    }\n\n    const isPlaceholderOption = optEl.classList.contains('placeholder');\n\n    if (isPlaceholderOption) {\n      if (this.creatable) {\n        this._createAndSelectSuggestedOption();\n      }\n    } else {\n      this._opts.selectedIndex = Number((optEl as HTMLElement).dataset.index);\n\n      this.open = false;\n      this._internals.setFormValue(this._value);\n      this._manageRequired();\n      this._dispatchChangeEvent();\n    }\n  }\n  //#endregion\n\n  protected override _manageRequired() {\n    const {value} = this;\n    if (value === '' && this.required) {\n      this._internals.setValidity(\n        {valueMissing: true},\n        'Please select an item in the list.',\n        this._face\n      );\n    } else {\n      this._internals.setValidity({});\n    }\n  }\n\n  //#region render functions\n  protected override _renderSelectFace(): TemplateResult {\n    const selectedOption = this._opts.getSelectedOption();\n    const label = selectedOption?.label ?? '';\n    const activeDescendant =\n      this._opts.activeIndex > -1 ? `op-${this._opts.activeIndex}` : '';\n\n    return html`\n      <div\n        aria-activedescendant=${activeDescendant}\n        aria-controls=\"select-listbox\"\n        aria-expanded=${this.open ? 'true' : 'false'}\n        aria-haspopup=\"listbox\"\n        aria-label=${ifDefined(this.label)}\n        class=\"select-face face\"\n        @click=${this._onFaceClick}\n        role=\"combobox\"\n        tabindex=\"0\"\n      >\n        <span class=\"text\">${label}</span> ${chevronDownIcon}\n      </div>\n    `;\n  }\n\n  protected override _renderComboboxFace(): TemplateResult {\n    let inputVal = '';\n\n    if (this._isBeingFiltered) {\n      inputVal = this._opts.filterPattern;\n    } else {\n      const op = this._opts.getSelectedOption();\n      inputVal = op?.label ?? '';\n    }\n\n    const activeDescendant =\n      this._opts.activeIndex > -1 ? `op-${this._opts.activeIndex}` : '';\n    const expanded = this.open ? 'true' : 'false';\n\n    return html`\n      <div class=\"combobox-face face\">\n        <input\n          aria-activedescendant=${activeDescendant}\n          aria-autocomplete=\"list\"\n          aria-controls=\"select-listbox\"\n          aria-expanded=${expanded}\n          aria-haspopup=\"listbox\"\n          aria-label=${ifDefined(this.label)}\n          class=\"combobox-input\"\n          role=\"combobox\"\n          spellcheck=\"false\"\n          type=\"text\"\n          autocomplete=\"off\"\n          .value=${inputVal}\n          @focus=${this._onComboboxInputFocus}\n          @blur=${this._onComboboxInputBlur}\n          @input=${this._onComboboxInputInput}\n          @click=${this._onComboboxInputClick}\n          @keydown=${this._onComboboxInputSpaceKeyDown}\n        >\n        <button\n          aria-label=\"Open the list of options\"\n          class=\"combobox-button\"\n          type=\"button\"\n          @click=${this._onComboboxButtonClick}\n          @keydown=${this._onComboboxButtonKeyDown}\n          tabindex=\"-1\"\n        >\n          ${chevronDownIcon}\n        </button>\n      </div>\n    `;\n  }\n\n  override render(): TemplateResult {\n    return html`\n      <div class=\"single-select\">\n        <slot class=\"main-slot\" @slotchange=${this._onSlotChange}></slot>\n        ${this.combobox ? this._renderComboboxFace() : this._renderSelectFace()}\n        ${this._renderDropdown()}\n      </div>\n    `;\n  }\n  //#endregion\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'vscode-single-select': VscodeSingleSelect;\n  }\n\n  interface GlobalEventHandlersEventMap {\n    'vsc-single-select-create-option': VscSingleSelectCreateOptionEvent;\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vscode-elements/elements",
-  "version": "1.16.0",
+  "version": "1.16.2-pre.0",
   "description": "Webcomponents for creating Visual Studio Code extensions",
   "main": "dist/main.js",
   "module": "dist/main.js",
@@ -32,7 +32,8 @@
     "checksize": "npm run build && cat dist/bundled.js | gzip -9 | wc -c",
     "icons": "node scripts/generateIconList.js",
     "vscode-data": "wireit",
-    "ncu": "ncu -u"
+    "ncu": "ncu -u",
+    "prepare": "npx playwright install chromium --only-shell"
   },
   "wireit": {
     "analyze": {
@@ -173,9 +174,9 @@
     "rimraf": "^6.0.1",
     "rollup": "^4.39.0",
     "rollup-plugin-filesize": "^10.0.0",
-    "rollup-plugin-visualizer": "^5.14.0",
+    "rollup-plugin-visualizer": "^6.0.0",
     "semver": "^7.7.1",
-    "sinon": "^20.0.0",
+    "sinon": "^21.0.0",
     "ts-lit-plugin": "^2.0.2",
     "typescript": "^5.8.2",
     "wireit": "^0.14.11"

package/vscode.css-custom-data.json

@@ -225,8 +225,6 @@
     { "name": "--vscode-panelTitle-activeBorder", "values": [] },
     { "name": "--vscode-focusBorder", "values": [] },
     { "name": "--vscode-settings-headerForeground", "values": [] },
-    { "name": "--vscode-panel--background", "values": [] },
-    { "name": "--vscode-focusBorder", "values": [] },
     { "name": "--border", "values": [] },
     { "name": "--foreground", "values": [] },
     { "name": "--resize-hover-border", "values": [] },
@@ -239,6 +237,8 @@
     { "name": "--vscode-foreground", "values": [] },
     { "name": "--vscode-font-family", "values": [] },
     { "name": "--vscode-font-size", "values": [] },
+    { "name": "--vscode-panel--background", "values": [] },
+    { "name": "--vscode-focusBorder", "values": [] },
     {
       "name": "--vscode-keybindingTable-headerBackground",
       "description": "Table header background",

package/vscode.html-custom-data.json

@@ -281,6 +281,11 @@
           "description": "Options can be filtered by typing into a text input field.",
           "values": []
         },
+        {
+          "name": "label",
+          "description": "Accessible label for screen readers. When a `<vscode-label>` is connected\nto the component, it will be filled automatically.",
+          "values": []
+        },
         {
           "name": "disabled",
           "description": "The element cannot be used and is not focusable.",
@@ -407,6 +412,11 @@
           "description": "Options can be filtered by typing into a text input field.",
           "values": []
         },
+        {
+          "name": "label",
+          "description": "Accessible label for screen readers. When a `<vscode-label>` is connected\nto the component, it will be filled automatically.",
+          "values": []
+        },
         {
           "name": "disabled",
           "description": "The element cannot be used and is not focusable.",
@@ -486,15 +496,6 @@
       ],
       "references": []
     },
-    {
-      "name": "vscode-tab-panel",
-      "description": "\n---\n\n\n### **CSS Properties:**\n - **--vscode-panel--background** - undefined _(default: undefined)_\n- **--vscode-focusBorder** - undefined _(default: undefined)_",
-      "attributes": [
-        { "name": "hidden", "values": [] },
-        { "name": "panel", "description": "Panel-like look", "values": [] }
-      ],
-      "references": []
-    },
     {
       "name": "vscode-table",
       "description": "\n---\n\n\n### **CSS Properties:**\n - **--border** - undefined _(default: var(--vscode-editorGroup-border))_\n- **--foreground** - undefined _(default: var(--vscode-foreground))_\n- **--resize-hover-border** - undefined _(default: var(--vscode-sash-hoverBorder))_\n- **--tinted-row-background** - undefined _(default: var(--vscode-keybindingTable-rowsBackground))_\n- **--header-background** - undefined _(default: var(--vscode-keybindingTable-headerBackground))_\n- **--font-size** - undefined _(default: var(--vscode-font-size))_\n- **--font-family** - undefined _(default: var(--vscode-font-family))_",
@@ -564,6 +565,15 @@
       ],
       "references": []
     },
+    {
+      "name": "vscode-tab-panel",
+      "description": "\n---\n\n\n### **CSS Properties:**\n - **--vscode-panel--background** - undefined _(default: undefined)_\n- **--vscode-focusBorder** - undefined _(default: undefined)_",
+      "attributes": [
+        { "name": "hidden", "values": [] },
+        { "name": "panel", "description": "Panel-like look", "values": [] }
+      ],
+      "references": []
+    },
     {
       "name": "vscode-table-header",
       "description": "\n---\n\n\n### **CSS Properties:**\n - **--vscode-keybindingTable-headerBackground** - Table header background _(default: undefined)_",