@vscode-elements/elements 2.0.0-pre.1 → 2.0.0-pre.2

package/dist/vscode-single-select/vscode-single-select.d.ts

@@ -1,6 +1,9 @@
 import { TemplateResult } from 'lit';
 import { VscodeSelectBase } from '../includes/vscode-select/vscode-select-base.js';
 import { AssociatedFormControl } from '../includes/AssociatedFormControl.js';
+export type VscSingleSelectCreateOptionEvent = CustomEvent<{
+    value: string;
+}>;
 /**
  * Allows to select an item from multiple options.
  *
@@ -23,27 +26,29 @@ import { AssociatedFormControl } from '../includes/AssociatedFormControl.js';
  * @prop {boolean} invalid
  * @attr {boolean} invalid
  * @attr name - Name which is used as a variable name in the data of the form-container.
+ *
  * @cssprop [--dropdown-z-index=2]
- * @cssprop --vscode-badge-background
- * @cssprop --vscode-badge-foreground
- * @cssprop --vscode-settings-dropdownBorder
- * @cssprop --vscode-settings-checkboxBackground
- * @cssprop --vscode-settings-dropdownBackground
- * @cssprop --vscode-settings-dropdownListBorder
- * @cssprop --vscode-focusBorder
- * @cssprop --vscode-foreground
- * @cssprop --vscode-font-family
- * @cssprop --vscode-font-size
- * @cssprop --vscode-font-weight
- * @cssprop --vscode-list-activeSelectionBackground
- * @cssprop --vscode-list-activeSelectionForeground
- * @cssprop --vscode-list-focusOutline
- * @cssprop --vscode-list-highlightForeground
- * @cssprop --vscode-list-focusHighlightForeground
- * @cssprop --vscode-list-hoverBackground
- * @cssprop --vscode-list-hoverForeground
- * @cssprop --vscode-list-hoverBackground
- * @cssprop --vscode-settings-textInputBackground
+ * @cssprop [--vscode-badge-background=#616161]
+ * @cssprop [--vscode-badge-foreground=#f8f8f8]
+ * @cssprop [--vscode-settings-dropdownBorder=#3c3c3c]
+ * @cssprop [--vscode-settings-checkboxBackground=#313131]
+ * @cssprop [--vscode-settings-dropdownBackground=#313131]
+ * @cssprop [--vscode-settings-dropdownForeground=#cccccc]
+ * @cssprop [--vscode-settings-dropdownListBorder=#454545]
+ * @cssprop [--vscode-focusBorder=#0078d4]
+ * @cssprop [--vscode-foreground=#cccccc]
+ * @cssprop [--vscode-font-family=sans-serif]
+ * @cssprop [--vscode-font-size=13px]
+ * @cssprop [--vscode-font-weight=normal]
+ * @cssprop [--vscode-inputValidation-errorBackground=#5a1d1d]
+ * @cssprop [--vscode-inputValidation-errorBorder=#be1100]
+ * @cssprop [--vscode-list-activeSelectionBackground=#04395e]
+ * @cssprop [--vscode-list-activeSelectionForeground=#ffffff]
+ * @cssprop [--vscode-list-focusOutline=#0078d4]
+ * @cssprop [--vscode-list-focusHighlightForeground=#2aaaff]
+ * @cssprop [--vscode-list-highlightForeground=#2aaaff]
+ * @cssprop [--vscode-list-hoverBackground=#2a2d2e]
+ * @cssprop [--vscode-list-hoverForeground=#ffffff]
  */
 export declare class VscodeSingleSelect extends VscodeSelectBase implements AssociatedFormControl {
     static styles: import("lit").CSSResult[];
@@ -52,8 +57,6 @@ export declare class VscodeSingleSelect extends VscodeSelectBase implements Asso
     /** @internal */
     static formAssociated: boolean;
     defaultValue: string;
-    /** @internal */
-    role: string;
     name: string | undefined;
     set selectedIndex(val: number);
     get selectedIndex(): number;
@@ -77,20 +80,28 @@ export declare class VscodeSingleSelect extends VscodeSelectBase implements Asso
     /** @internal */
     get type(): 'select-one';
     get form(): HTMLFormElement | null;
+    /**
+     * This variable was introduced for cases where the value is set before the corresponding option
+     * exists. This can happen while a framework like Vue or React is rendering the component.
+     */
     private _requestedValueToSetLater;
+    protected _createAndSelectSuggestedOption(): Promise<void>;
+    protected _dispatchChangeEvent(): void;
+    protected _setStateFromSlottedElements(): void;
     protected _onSlotChange(): void;
-    protected _onArrowUpKeyDown(): void;
-    protected _onArrowDownKeyDown(): void;
-    protected _onEnterKeyDown(): void;
-    private _onOptionClick;
-    private _manageRequired;
+    protected _onEnterKeyDown(ev: KeyboardEvent): void;
+    protected _onOptionClick(ev: MouseEvent): void;
+    protected _manageRequired(): void;
     protected _renderSelectFace(): TemplateResult;
     protected _renderComboboxFace(): TemplateResult;
-    protected _renderOptions(): TemplateResult;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'vscode-single-select': VscodeSingleSelect;
     }
+    interface GlobalEventHandlersEventMap {
+        'vsc-single-select-create-option': VscSingleSelectCreateOptionEvent;
+    }
 }
 //# sourceMappingURL=vscode-single-select.d.ts.map

package/dist/vscode-single-select/vscode-single-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vscode-single-select.d.ts","sourceRoot":"","sources":["../../src/vscode-single-select/vscode-single-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,cAAc,EAAC,MAAM,KAAK,CAAC;AAIrD,OAAO,EAAC,gBAAgB,EAAC,MAAM,iDAAiD,CAAC;AAEjF,OAAO,EAAC,qBAAqB,EAAC,MAAM,sCAAsC,CAAC;AAG3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,qBACa,kBACX,SAAQ,gBACR,YAAW,qBAAqB;IAEhC,OAAgB,MAAM,4BAAU;IAEhC,gBAAgB;IAChB,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEF,gBAAgB;IAChB,MAAM,CAAC,cAAc,UAAQ;IAG7B,YAAY,SAAM;IAElB,gBAAgB;IAEP,IAAI,SAAa;IAG1B,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAErC,IACI,aAAa,CAAC,GAAG,EAAE,MAAM,EAK5B;IACD,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,IACI,KAAK,CAAC,GAAG,EAAE,MAAM,EAepB;IACD,IAAI,KAAK,IAAI,MAAM,CAMlB;IAGD,QAAQ,UAAS;IAEjB,IAAI,QAAQ,IAAI,aAAa,CAE5B;IAED,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IAED,IAAI,YAAY,YAEf;IAED,aAAa,IAAI,OAAO;IAIxB,cAAc,IAAI,OAAO;IAKzB,OAAO,CAAC,KAAK,CAAkB;IAE/B,OAAO,CAAC,UAAU,CAAmB;IAErC,OAAO,CAAC,gBAAgB;;IAuBf,iBAAiB,IAAI,IAAI;IAQlC,gBAAgB;IAChB,iBAAiB,IAAI,IAAI;IAIzB,gBAAgB;IAChB,wBAAwB,CACtB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,SAAS,GAAG,cAAc,GAChC,IAAI;IAMP,gBAAgB;IAChB,IAAI,IAAI,IAAI,YAAY,CAEvB;IAED,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED,OAAO,CAAC,yBAAyB,CAAM;cAEpB,aAAa,IAAI,IAAI;cAsBrB,iBAAiB,IAAI,IAAI;cAgBzB,mBAAmB,IAAI,IAAI;cAgB3B,eAAe,IAAI,IAAI;IAQ1C,OAAO,CAAC,cAAc;IAmBtB,OAAO,CAAC,eAAe;cAeJ,iBAAiB,IAAI,cAAc;cAcnC,mBAAmB,IAAI,cAAc;cA4BrC,cAAc,IAAI,cAAc;CAiCpD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF"}
+{"version":3,"file":"vscode-single-select.d.ts","sourceRoot":"","sources":["../../src/vscode-single-select/vscode-single-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,cAAc,EAAC,MAAM,KAAK,CAAC;AAKrD,OAAO,EAAC,gBAAgB,EAAC,MAAM,iDAAiD,CAAC;AACjF,OAAO,EAAC,qBAAqB,EAAC,MAAM,sCAAsC,CAAC;AAG3E,MAAM,MAAM,gCAAgC,GAAG,WAAW,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAC,CAAC,CAAC;AAE5E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,qBACa,kBACX,SAAQ,gBACR,YAAW,qBAAqB;IAEhC,OAAgB,MAAM,4BAAU;IAEhC,gBAAgB;IAChB,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IAEF,gBAAgB;IAChB,MAAM,CAAC,cAAc,UAAQ;IAG7B,YAAY,SAAM;IAGlB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAa;IAErC,IACI,aAAa,CAAC,GAAG,EAAE,MAAM,EAe5B;IACD,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,IACI,KAAK,CAAC,GAAG,EAAE,MAAM,EAWpB;IACD,IAAI,KAAK,IAAI,MAAM,CAElB;IAGD,QAAQ,UAAS;IAEjB,IAAI,QAAQ,IAAI,aAAa,CAE5B;IAED,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IAED,IAAI,YAAY,YAEf;IAED,aAAa,IAAI,OAAO;IAIxB,cAAc,IAAI,OAAO;IAKzB,OAAO,CAAC,KAAK,CAAkB;IAE/B,OAAO,CAAC,UAAU,CAAmB;IAErC,OAAO,CAAC,gBAAgB;;IAqBf,iBAAiB,IAAI,IAAI;IAQlC,gBAAgB;IAChB,iBAAiB,IAAI,IAAI;IAIzB,gBAAgB;IAChB,wBAAwB,CACtB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,SAAS,GAAG,cAAc,GAChC,IAAI;IAMP,gBAAgB;IAChB,IAAI,IAAI,IAAI,YAAY,CAEvB;IAED,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED;;;OAGG;IACH,OAAO,CAAC,yBAAyB,CAAM;cAEd,+BAA+B;cAgBrC,oBAAoB,IAAI,IAAI;cAc5B,4BAA4B,IAAI,IAAI;cASpC,aAAa,IAAI,IAAI;cAwBrB,eAAe,CAAC,EAAE,EAAE,aAAa,GAAG,IAAI;cAoCxC,cAAc,CAAC,EAAE,EAAE,UAAU;cAkC7B,eAAe;cAcf,iBAAiB,IAAI,cAAc;cAuBnC,mBAAmB,IAAI,cAAc;IAiD/C,MAAM,IAAI,cAAc;CAUlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;IAED,UAAU,2BAA2B;QACnC,iCAAiC,EAAE,gCAAgC,CAAC;KACrE;CACF"}

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

@@ -5,12 +5,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html, LitElement } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
+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 { highlightRanges } from '../includes/vscode-select/helpers.js';
 /**
  * Allows to select an item from multiple options.
  *
@@ -33,58 +33,62 @@ import { highlightRanges } from '../includes/vscode-select/helpers.js';
  * @prop {boolean} invalid
  * @attr {boolean} invalid
  * @attr name - Name which is used as a variable name in the data of the form-container.
+ *
  * @cssprop [--dropdown-z-index=2]
- * @cssprop --vscode-badge-background
- * @cssprop --vscode-badge-foreground
- * @cssprop --vscode-settings-dropdownBorder
- * @cssprop --vscode-settings-checkboxBackground
- * @cssprop --vscode-settings-dropdownBackground
- * @cssprop --vscode-settings-dropdownListBorder
- * @cssprop --vscode-focusBorder
- * @cssprop --vscode-foreground
- * @cssprop --vscode-font-family
- * @cssprop --vscode-font-size
- * @cssprop --vscode-font-weight
- * @cssprop --vscode-list-activeSelectionBackground
- * @cssprop --vscode-list-activeSelectionForeground
- * @cssprop --vscode-list-focusOutline
- * @cssprop --vscode-list-highlightForeground
- * @cssprop --vscode-list-focusHighlightForeground
- * @cssprop --vscode-list-hoverBackground
- * @cssprop --vscode-list-hoverForeground
- * @cssprop --vscode-list-hoverBackground
- * @cssprop --vscode-settings-textInputBackground
+ * @cssprop [--vscode-badge-background=#616161]
+ * @cssprop [--vscode-badge-foreground=#f8f8f8]
+ * @cssprop [--vscode-settings-dropdownBorder=#3c3c3c]
+ * @cssprop [--vscode-settings-checkboxBackground=#313131]
+ * @cssprop [--vscode-settings-dropdownBackground=#313131]
+ * @cssprop [--vscode-settings-dropdownForeground=#cccccc]
+ * @cssprop [--vscode-settings-dropdownListBorder=#454545]
+ * @cssprop [--vscode-focusBorder=#0078d4]
+ * @cssprop [--vscode-foreground=#cccccc]
+ * @cssprop [--vscode-font-family=sans-serif]
+ * @cssprop [--vscode-font-size=13px]
+ * @cssprop [--vscode-font-weight=normal]
+ * @cssprop [--vscode-inputValidation-errorBackground=#5a1d1d]
+ * @cssprop [--vscode-inputValidation-errorBorder=#be1100]
+ * @cssprop [--vscode-list-activeSelectionBackground=#04395e]
+ * @cssprop [--vscode-list-activeSelectionForeground=#ffffff]
+ * @cssprop [--vscode-list-focusOutline=#0078d4]
+ * @cssprop [--vscode-list-focusHighlightForeground=#2aaaff]
+ * @cssprop [--vscode-list-highlightForeground=#2aaaff]
+ * @cssprop [--vscode-list-hoverBackground=#2a2d2e]
+ * @cssprop [--vscode-list-hoverForeground=#ffffff]
  */
 let VscodeSingleSelect = class VscodeSingleSelect extends VscodeSelectBase {
     set selectedIndex(val) {
-        this._selectedIndex = val;
-        this._value = this._options[this._selectedIndex]
-            ? this._options[this._selectedIndex].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();
+        }
+        else {
+            this._value = '';
+            this._internals.setFormValue('');
+            this._manageRequired();
+        }
     }
     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;
@@ -107,21 +111,21 @@ 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;
+        /**
+         * This variable was introduced for cases where the value is set before the corresponding option
+         * 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() {
@@ -147,145 +151,199 @@ let VscodeSingleSelect = class VscodeSingleSelect extends VscodeSelectBase {
     get form() {
         return this._internals.form;
     }
+    async _createAndSelectSuggestedOption() {
+        const nextIndex = this._createSuggestedOption();
+        await this.updateComplete;
+        this._opts.selectedIndex = nextIndex;
+        this._dispatchChangeEvent();
+        const opCreateEvent = new CustomEvent('vsc-single-select-create-option', { detail: { value: this._opts.getOptionByIndex(nextIndex)?.value ?? '' } });
+        this.dispatchEvent(opCreateEvent);
+        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 {
             this._internals.setFormValue(null);
+            this._manageRequired();
         }
     }
-    _onArrowUpKeyDown() {
-        super._onArrowUpKeyDown();
-        if (this.open || this._selectedIndex <= 0) {
-            return;
+    _onEnterKeyDown(ev) {
+        super._onEnterKeyDown(ev);
+        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();
+            }
         }
-        this._filterPattern = '';
-        this._selectedIndex -= 1;
-        this._activeIndex = this._selectedIndex;
-        this._value = this._options[this._selectedIndex].value;
-        this._internals.setFormValue(this._value);
-        this._manageRequired();
-        this._dispatchChangeEvent();
-    }
-    _onArrowDownKeyDown() {
-        super._onArrowDownKeyDown();
-        if (this.open || this._selectedIndex >= this._options.length - 1) {
-            return;
+        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();
         }
-        this._filterPattern = '';
-        this._selectedIndex += 1;
-        this._activeIndex = this._selectedIndex;
-        this._value = this._options[this._selectedIndex].value;
-        this._internals.setFormValue(this._value);
-        this._manageRequired();
-        this._dispatchChangeEvent();
-    }
-    _onEnterKeyDown() {
-        super._onEnterKeyDown();
-        this.updateInputValue();
-        this._internals.setFormValue(this._value);
-        this._manageRequired();
     }
     _onOptionClick(ev) {
+        super._onOptionClick(ev);
         const composedPath = ev.composedPath();
-        const optEl = composedPath.find((et) => et?.matches('li.option'));
+        const optEl = composedPath.find((et) => {
+            const el = et;
+            if ('matches' in el) {
+                return el.matches('li.option');
+            }
+            return;
+        });
         if (!optEl || optEl.matches('.disabled')) {
             return;
         }
-        this._selectedIndex = Number(optEl.dataset.index);
-        this._value = this._options[this._selectedIndex].value;
-        this._toggleDropdown(false);
-        this._internals.setFormValue(this._value);
-        this._manageRequired();
-        this._dispatchChangeEvent();
+        const isPlaceholderOption = optEl.classList.contains('placeholder');
+        if (isPlaceholderOption) {
+            if (this.creatable) {
+                this._createAndSelectSuggestedOption();
+            }
+        }
+        else {
+            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) {
-            this._internals.setValidity({
-                valueMissing: true,
-            }, 'Please select an item in the list.', this._face);
+            this._internals.setValidity({ valueMissing: true }, 'Please select an item in the list.', this._face);
         }
         else {
             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() {
-        const inputVal = this._selectedIndex > -1 ? this._options[this._selectedIndex].label : '';
+        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>
     `;
     }
-    _renderOptions() {
-        const list = this.combobox ? this._filteredOptions : this._options;
-        const options = list.map((op, index) => {
-            const classes = classMap({
-                option: true,
-                disabled: op.disabled,
-                selected: op.selected,
-                active: index === this._activeIndex && !op.disabled,
-            });
-            return html `
-        <li
-          class=${classes}
-          data-index=${op.index}
-          data-filtered-index=${index}
-        >
-          ${(op.ranges?.length ?? 0 > 0)
-                ? highlightRanges(op.label, op.ranges ?? [])
-                : op.label}
-        </li>
-      `;
-        });
+    render() {
         return html `
-      <ul
-        class="options"
-        @mouseover=${this._onOptionMouseOver}
-        @click=${this._onOptionClick}
-      >
-        ${options}
-      </ul>
+      <div class="single-select">
+        <slot class="main-slot" @slotchange=${this._onSlotChange}></slot>
+        ${this.combobox ? this._renderComboboxFace() : this._renderSelectFace()}
+        ${this._renderDropdown()}
+      </div>
     `;
     }
 };
@@ -300,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 {customElement, property, query} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.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 {highlightRanges} from '../includes/vscode-select/helpers.js';\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 * @cssprop [--dropdown-z-index=2]\n * @cssprop --vscode-badge-background\n * @cssprop --vscode-badge-foreground\n * @cssprop --vscode-settings-dropdownBorder\n * @cssprop --vscode-settings-checkboxBackground\n * @cssprop --vscode-settings-dropdownBackground\n * @cssprop --vscode-settings-dropdownListBorder\n * @cssprop --vscode-focusBorder\n * @cssprop --vscode-foreground\n * @cssprop --vscode-font-family\n * @cssprop --vscode-font-size\n * @cssprop --vscode-font-weight\n * @cssprop --vscode-list-activeSelectionBackground\n * @cssprop --vscode-list-activeSelectionForeground\n * @cssprop --vscode-list-focusOutline\n * @cssprop --vscode-list-highlightForeground\n * @cssprop --vscode-list-focusHighlightForeground\n * @cssprop --vscode-list-hoverBackground\n * @cssprop --vscode-list-hoverForeground\n * @cssprop --vscode-list-hoverBackground\n * @cssprop --vscode-settings-textInputBackground\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    this._value = this._options[this._selectedIndex]\n      ? this._options[this._selectedIndex].value\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  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  private _requestedValueToSetLater = '';\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    } else {\n      this._internals.setFormValue(null);\n    }\n  }\n\n  protected override _onArrowUpKeyDown(): void {\n    super._onArrowUpKeyDown();\n\n    if (this.open || this._selectedIndex <= 0) {\n      return;\n    }\n\n    this._filterPattern = '';\n    this._selectedIndex -= 1;\n    this._activeIndex = this._selectedIndex;\n    this._value = this._options[this._selectedIndex].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    this._filterPattern = '';\n    this._selectedIndex += 1;\n    this._activeIndex = this._selectedIndex;\n    this._value = this._options[this._selectedIndex].value;\n    this._internals.setFormValue(this._value);\n    this._manageRequired();\n    this._dispatchChangeEvent();\n  }\n\n  protected override _onEnterKeyDown(): void {\n    super._onEnterKeyDown();\n\n    this.updateInputValue();\n    this._internals.setFormValue(this._value);\n    this._manageRequired();\n  }\n\n  private _onOptionClick(ev: MouseEvent) {\n    const composedPath = ev.composedPath();\n    const optEl = composedPath.find((et) =>\n      (et as HTMLElement)?.matches('li.option')\n    ) as HTMLElement | undefined;\n\n    if (!optEl || optEl.matches('.disabled')) {\n      return;\n    }\n\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  private _manageRequired() {\n    const {value} = this;\n    if (value === '' && this.required) {\n      this._internals.setValidity(\n        {\n          valueMissing: true,\n        },\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  protected override _renderComboboxFace(): TemplateResult {\n    const inputVal =\n      this._selectedIndex > -1 ? this._options[this._selectedIndex].label : '';\n\n    return html`\n      <div class=\"combobox-face face\">\n        <input\n          class=\"combobox-input\"\n          spellcheck=\"false\"\n          type=\"text\"\n          autocomplete=\"off\"\n          .value=${inputVal}\n          @focus=${this._onComboboxInputFocus}\n          @input=${this._onComboboxInputInput}\n          @click=${this._onComboboxInputClick}\n        >\n        <button\n          class=\"combobox-button\"\n          type=\"button\"\n          @click=${this._onComboboxButtonClick}\n          @keydown=${this._onComboboxButtonKeyDown}\n        >\n          ${chevronDownIcon}\n        </button>\n      </div>\n    `;\n  }\n\n  protected override _renderOptions(): TemplateResult {\n    const list = this.combobox ? this._filteredOptions : this._options;\n    const options = list.map((op, index) => {\n      const classes = classMap({\n        option: true,\n        disabled: op.disabled,\n        selected: op.selected,\n        active: index === this._activeIndex && !op.disabled,\n      });\n\n      return html`\n        <li\n          class=${classes}\n          data-index=${op.index}\n          data-filtered-index=${index}\n        >\n          ${(op.ranges?.length ?? 0 > 0)\n            ? highlightRanges(op.label, op.ranges ?? [])\n            : op.label}\n        </li>\n      `;\n    });\n\n    return html`\n      <ul\n        class=\"options\"\n        @mouseover=${this._onOptionMouseOver}\n        @click=${this._onOptionClick}\n      >\n        ${options}\n      </ul>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'vscode-single-select': VscodeSingleSelect;\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/dist/vscode-split-layout/vscode-split-layout.d.ts

@@ -18,7 +18,9 @@ export type VscSplitLayoutChangeEvent = CustomEvent<{
  *
  * @prop {'start' | 'end' | 'none'} fixedPane
  *
- * @cssprop [--hover-border=var(--vscode-sash-hoverBorder)]
+ * @cssprop [--separator-border=#454545]
+ * @cssprop [--vscode-editorWidget-border=#454545]
+ * @cssprop [--vscode-sash-hoverBorder=#0078d4]
  */
 export declare class VscodeSplitLayout extends VscElement {
     static styles: import("lit").CSSResultGroup;