html-combobox-element 0.0.2-beta.6 → 0.0.2-beta.7

package/dist/esm/combobox/HTML.combobox.element.js

@@ -11,41 +11,70 @@ export class HTMLComboboxElement extends HTMLElement {
     #observer;
     #markup;
     #values = new Set;
+    #prevValue = '';
+    #changed = false;
     constructor() {
         super();
         this.#internals = this.attachInternals();
         this.#internals.role = "combobox";
         this.#internals.ariaHasPopup = "dialog";
-        this.shadowRoot = this.attachShadow({ mode: 'closed', delegatesFocus: true });
+        this.shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: true }); //delegatesFocus: true
         this.#markup = new ComboboxMarkup(this.shadowRoot, this.#internals);
         this.shadowRoot.innerHTML = ComboboxMarkup.template;
         this.shadowRoot.adoptedStyleSheets = HTMLComboboxElement.styleSheet;
         this.#observer = new MutationObserver(this.#onOptionsChanges);
+        this.#markup.connect();
     }
     // Lifecycle callbacks
     connectedCallback() {
-        this.#markup.connect();
-        this.#initialAttributesSynchronization();
+        // super.setAttribute('tabindex', '0');
+        this.shadowRoot.addEventListener('optionselectedstatechange', this.#onOptionSelectedStateChanges);
+        this.shadowRoot.addEventListener('tagcleared', this.#onClearTag);
         this.#onOptionsChanges([{ addedNodes: Array.from(this.children) }]);
+        this.#initialAttributesSynchronization();
         this.#observer.observe(this, HTMLComboboxElement.observerOptions);
-        this.#markup.clearAllButton.addEventListener('click', this.#onClear);
+        this.addEventListener('keydown', this.#onKeyDown);
+        this.#markup.clearAllButton.addEventListener('click', this.#onClearAll);
         this.#markup.searchInput.addEventListener('input', this.#onInput);
+        this.#markup.dropdown.addEventListener('toggle', this.#onPickerToggle);
+        this.#setValidityAndFormValue();
+    }
+    insertBefore = (node, referenceNode) => {
+        // Since we just move options to the #markup.optionsContainer, they are no more part of this children
+        // next time, when someone is calling this(combo-box).insertBefore, an error will be thrown:
+        // Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
+        // Here we overwrite this method, and if new node is HTMLComboboxOptionElement,
+        // we just delegate this job to the real option parent: optionsContainer
+        if (node instanceof HTMLComboboxOptionElement || node instanceof HTMLOptGroupElement) {
+            this.#markup.optionsContainer?.insertBefore(node, referenceNode);
+        }
+        else {
+            super.insertBefore(node, referenceNode);
+        }
+        return node;
+    };
+    get changed() {
+        return this.#changed;
     }
     disconnectedCallback() {
         this.#observer.disconnect();
         this.#markup.disconnect();
-        this.#markup.clearAllButton.removeEventListener('click', this.#onClear);
+        this.removeEventListener('keydown', this.#onKeyDown);
+        this.#markup.clearAllButton.removeEventListener('click', this.#onClearAll);
         this.#markup.searchInput.removeEventListener('input', this.#onInput);
+        this.#markup.dropdown.removeEventListener('toggle', this.#onPickerToggle);
+        this.shadowRoot.removeEventListener('optionselectedstatechange', this.#onOptionSelectedStateChanges);
+        this.shadowRoot.removeEventListener('tagcleared', this.#onClearTag);
     }
     formResetCallback() {
-        this.#values = new Set;
         this.selectedOptions.forEach(option => option.selected = false);
-        this.#markup.tagsContainer.replaceChildren();
-        this.#setValidityAndFormValue();
-        this.dispatchEvent(new Event('change'));
+        this.dispatchEvent(new Event('reset'));
+        requestAnimationFrame(() => this.#markup.searchInput?.focus());
     }
-    formDisabledCallback(isDisabled) {
-        this.disabled = isDisabled;
+    formDisabledCallback() {
+        // toDo
+        // when inside fieldset, this callback is only invoked for the first time
+        // isDisabled: boolean
     }
     // Instance properties
     // <combo-box> specific properties
@@ -62,9 +91,7 @@ export class HTMLComboboxElement extends HTMLElement {
             value = '';
         value = String(value);
         super.setAttribute('query', value);
-        if (this.#markup.connected) {
-            this.#markup.searchInput.value = value;
-        }
+        this.#markup?.setInputValue(value);
     }
     get placeholder() {
         return this.getAttribute('placeholder');
@@ -74,10 +101,7 @@ export class HTMLComboboxElement extends HTMLElement {
             value = ' ';
         value = String(value);
         super.setAttribute('placeholder', value);
-        if (this.#markup.connected) {
-            this.#markup.placeholder.innerText = value;
-            this.#markup.searchInput.placeholder = value;
-        }
+        this.#markup?.setPlaceholder(value);
     }
     get clearable() {
         return this.hasAttribute('clearable');
@@ -103,7 +127,9 @@ export class HTMLComboboxElement extends HTMLElement {
     }
     set disabled(value) {
         this.#internals.ariaDisabled = String(value);
-        super.toggleAttribute('disabled', toBoolean(value));
+        value = toBoolean(value);
+        super.toggleAttribute('disabled', value);
+        super.toggleAttribute('inert', value);
     }
     get form() {
         return this.#internals.form;
@@ -154,34 +180,11 @@ export class HTMLComboboxElement extends HTMLElement {
     set value(value) {
         if (this.value === value || typeof value !== 'string')
             return;
-        const prevValue = new Set(this.#values);
-        this.#values = new Set;
         const values = value.split(',').filter(Boolean);
-        Promise.resolve(values)
-            .then(values => {
-            if (values.length) {
-                if (!this.multiple) {
-                    if (this.#values.size === 0) {
-                        values.length = 1;
-                    }
-                    else {
-                        values.length = 0;
-                    }
-                }
-                for (const key of values) {
-                    const option = this.#markup.getOptionByValue(key);
-                    if (option)
-                        this.#selectOption(option);
-                }
-            }
-            for (const key of prevValue) {
-                if (this.#values.has(key))
-                    continue;
-                const option = this.#markup.getOptionByValue(key);
-                const tag = this.#markup.getTagByValue(key);
-                tag?.remove();
-                option?.toggleAttribute('selected', false);
-            }
+        this.#values = new Set(values);
+        this.#markup.options.forEach(option => {
+            const value = option.value;
+            option.selected = this.#values.has(value);
         });
     }
     // Instance methods
@@ -228,64 +231,38 @@ export class HTMLComboboxElement extends HTMLElement {
         }
     }
     // Internal
-    #onInput = (event) => {
-        if (!this.searchable && this.filterable) {
-            if (event.target && event.target instanceof HTMLInputElement) {
-                this.#markup.sort(event.target.value);
-            }
-        }
-    };
     #onOptionsChanges = (records) => {
         records.forEach(record => {
             record.addedNodes.forEach(node => {
-                if (node instanceof HTMLComboboxOptionElement) {
-                    node.addEventListener('click', this.#onSelectOption);
-                    if (node.selected) {
-                        if (this.multiple) {
-                            this.#selectOption(node);
-                        }
-                        else if (this.#values.size === 0) {
-                            this.#selectOption(node);
-                        }
-                    }
-                }
                 if (node instanceof HTMLComboboxOptionElement || node instanceof HTMLOptGroupElement) {
                     this.#markup.optionsContainer.append(node);
                 }
             });
         });
-        this.#markup.invalidateOptionsCache();
-        this.#setValidityAndFormValue();
     };
-    #selectOption(option) {
-        if (this.#values.has(option.value))
-            return;
+    #onOptionSelectedStateChanges = (event) => {
+        const option = event.target;
         const value = option.value;
-        this.#values.add(value);
-        option.toggleAttribute('selected', true);
-        const control = this.#markup.createAndAppendTag(option);
-        control?.addEventListener('click', this.#onClearTag);
-        if (!this.multiple) {
-            this.#markup.closeDropdown();
+        if (option.selected) {
+            if (!this.multiple) {
+                this.#values.forEach(value => {
+                    const prevOption = this.#markup.getOptionByValue(value);
+                    if (prevOption)
+                        prevOption.selected = false;
+                });
+            }
+            if (!this.#values.has(value)) {
+                this.#values.add(value);
+                this.#markup.createAndAppendTag(option);
+                this.#setValidityAndFormValue();
+                this.dispatchEvent(new Event('change'));
+            }
         }
-    }
-    #onSelectOption = (event) => {
-        const target = event.target;
-        if (target) {
-            const option = target.closest('box-option');
-            if (option) {
-                if (this.#values.has(option.value))
-                    return;
-                if (!this.multiple) {
-                    event.stopPropagation();
-                    this.#values.forEach(value => {
-                        this.#markup.getTagByValue(value)?.remove();
-                        this.#markup.getOptionByValue(value)?.toggleAttribute('selected', false);
-                    });
-                    this.#values.clear();
-                    this.#markup.tagsContainer.replaceChildren();
-                }
-                this.#selectOption(option);
+        else {
+            if (this.#values.has(value)) {
+                this.#values.delete(value);
+                const control = this.#markup.getTagByValue(value);
+                control?.remove();
                 this.#setValidityAndFormValue();
                 this.dispatchEvent(new Event('change'));
             }
@@ -294,25 +271,90 @@ export class HTMLComboboxElement extends HTMLElement {
     #onClearTag = (event) => {
         const target = event.target;
         if (target) {
-            const tag = target.closest('box-tag');
-            if (tag) {
-                const value = tag.getAttribute('value');
-                const option = this.#markup.getOptionByValue(value);
-                option.removeAttribute('selected');
-                this.#values.delete(value);
-                tag.remove();
-                this.#setValidityAndFormValue();
-                this.dispatchEvent(new Event('change'));
-            }
+            const option = this.#markup.getOptionByValue(target.value);
+            if (option)
+                option.selected = false;
+            requestAnimationFrame(() => {
+                if (this.#values.size) {
+                    this.focus();
+                }
+                else if (this.searchable || this.filterable) {
+                    this.#markup.searchInput?.focus();
+                }
+                else {
+                    this.focus();
+                }
+            });
         }
     };
-    #onClear = () => {
+    #onClearAll = () => {
         this.formResetCallback();
     };
+    #onPickerToggle = (event) => {
+        const state = Reflect.get(event, 'newState');
+        const oldState = Reflect.get(event, 'oldState');
+        if (state === oldState)
+            return;
+        if (state === 'open') {
+            this.#prevValue = this.value;
+            this.#changed = true;
+        }
+        else {
+            this.#changed = this.#prevValue !== this.value;
+            this.dispatchEvent(new Event('close'));
+        }
+    };
+    #onKeyDown = (event) => {
+        if (this.#internals.ariaExpanded !== 'true')
+            return;
+        const activeElement = this.shadowRoot.activeElement;
+        if (!activeElement) {
+            // ??? how we should react ???
+            return;
+        }
+        if (activeElement === this.#markup.searchInput && event.key === 'Enter') {
+            event.stopPropagation();
+            if (!this.searchable && this.filterable) {
+                this.#markup.sort(this.#markup.searchInput.value);
+            }
+            if (this.searchable) {
+                this.dispatchEvent(new Event('search'));
+            }
+            return;
+        }
+        if (event.key === 'Enter' && activeElement instanceof HTMLComboboxOptionElement) {
+            if (!activeElement.selected) {
+                event.stopPropagation();
+                return;
+            }
+        }
+        if (event.key === 'Enter' && activeElement instanceof HTMLElement && activeElement.part.contains('clear-tag')) {
+            activeElement.click();
+            return;
+        }
+        if (event.key === 'Escape' || event.key === 'Enter') {
+            this.#markup.closeDropdown();
+            this.blur();
+        }
+    };
+    #onInput = () => {
+        this.query = this.#markup.searchInput.value;
+        if (!this.searchable && this.filterable) {
+            this.#markup.sort(this.#markup.searchInput?.value || '');
+        }
+    };
     #setValidityAndFormValue() {
+        this.#markup.clearAllButton?.toggleAttribute('disabled', !Boolean(this.#values.size));
+        let empty = false;
+        if (this.#values.size === 0)
+            empty = true;
+        if (this.#values.size > 0 && !this.clearable && !this.multiple && (this.searchable || this.filterable)) {
+            empty = true;
+        }
+        this.#markup.searchInput?.toggleAttribute('autofocus', empty);
         this.#internals.setFormValue(this.value);
         if (this.required && this.value === '') {
-            this.#internals.setValidity({ valueMissing: true });
+            this.#internals.setValidity({ valueMissing: true }, 'Value missing');
         }
         else {
             this.#internals.setValidity({});
@@ -320,6 +362,7 @@ export class HTMLComboboxElement extends HTMLElement {
     }
     #initialAttributesSynchronization() {
         for (const key of HTMLComboboxElement.OWN_IDL) {
+            // @ts-ignore
             this[key] = this.getAttribute(key);
         }
     }

package/dist/esm/combobox/HTML.combobox.option.element.js

@@ -1,15 +1,56 @@
 import { toBoolean } from './Boolean.attribute.value.normalizer.js';
 export class HTMLComboboxOptionElement extends HTMLElement {
-    static OWN_IDL = new Set(['value', 'label', 'selected']);
+    static OWN_IDL = new Set(['value', 'label', 'selected', 'disabled']);
+    static EventInit = { bubbles: true, cancelable: true, composed: true };
+    static captureFocus(event) {
+        if (event.relatedTarget && event.relatedTarget instanceof HTMLComboboxOptionElement) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+    static onNavigate(event) {
+        if (!event.target ||
+            !(event.target instanceof HTMLComboboxOptionElement) ||
+            event.key === 'Tab' ||
+            event.key === 'Enter')
+            return;
+        event.preventDefault();
+        if (event.key === 'ArrowDown') {
+            const next = event.target.nextElementSibling;
+            if (next && next instanceof HTMLComboboxOptionElement) {
+                next.focus();
+            }
+        }
+        if (event.key === 'ArrowUp') {
+            const prev = event.target.previousElementSibling;
+            if (prev && prev instanceof HTMLComboboxOptionElement) {
+                prev.focus();
+            }
+        }
+    }
     connectedCallback() {
+        this.addEventListener('keydown', HTMLComboboxOptionElement.onNavigate);
+        this.addEventListener('focusout', HTMLComboboxOptionElement.captureFocus);
+        this.addEventListener('click', this.#toggleSelection);
         this.#initialAttributesSynchronization();
         this.part.add('option');
         super.setAttribute('tabindex', "0");
         super.setAttribute('role', "option");
-        if (!this.value) {
-            this.value = this.textContent;
-        }
+        if (!this.value)
+            this.value = this.label;
+        if (!this.textContent)
+            this.textContent = this.value;
+        this.dispatchEvent(new Event('optionselectedstatechange', HTMLComboboxOptionElement.EventInit));
     }
+    disconnectedCallback() {
+        this.removeEventListener('click', this.#toggleSelection);
+        this.removeEventListener('keydown', HTMLComboboxOptionElement.onNavigate);
+        this.removeEventListener('focusout', HTMLComboboxOptionElement.captureFocus);
+    }
+    #toggleSelection = (event) => {
+        event.stopPropagation();
+        this.selected = !this.selected;
+    };
     get value() {
         return this.getAttribute('value');
     }
@@ -30,15 +71,34 @@ export class HTMLComboboxOptionElement extends HTMLElement {
         return this.hasAttribute('selected');
     }
     set selected(value) {
-        super.toggleAttribute('selected', toBoolean(value));
+        const prev = this.selected;
+        const force = toBoolean(value);
+        if (prev === force)
+            return;
+        super.toggleAttribute('selected', force);
+        this.part.toggle('selected', force);
+        if (this.isConnected) {
+            this.dispatchEvent(new Event('optionselectedstatechange', HTMLComboboxOptionElement.EventInit));
+        }
+    }
+    get disabled() {
+        return this.hasAttribute('disabled');
+    }
+    set disabled(value) {
+        const force = toBoolean(value);
+        super.toggleAttribute('disabled', force);
+        this.part.toggle('disabled', force);
+        super.toggleAttribute('inert', force);
     }
     #initialAttributesSynchronization() {
         for (const key of HTMLComboboxOptionElement.OWN_IDL) {
+            // @ts-ignore
             this[key] = this.getAttribute(key);
         }
     }
     setAttribute(name, value) {
         if (HTMLComboboxOptionElement.OWN_IDL.has(name)) {
+            // @ts-ignore
             this[name] = value;
         }
         else {
@@ -47,12 +107,18 @@ export class HTMLComboboxOptionElement extends HTMLElement {
     }
     removeAttribute(name) {
         if (HTMLComboboxOptionElement.OWN_IDL.has(name)) {
+            // @ts-ignore
             this[name] = null;
         }
         else {
             super.removeAttribute(name);
         }
     }
+    toggleAttribute(name, force) {
+        if (name === 'selected')
+            this.part.toggle(name, force);
+        return super.toggleAttribute(name, force);
+    }
 }
 if (!window.customElements.get('box-option')) {
     window.customElements.define('box-option', HTMLComboboxOptionElement);

package/dist/esm/combobox/HTML.combobox.tag.element.js

@@ -1,17 +1,36 @@
 export class HTMLComboboxTagElement extends HTMLElement {
-    constructor() {
-        super();
+    static EventInit = { bubbles: true, cancelable: true, composed: true };
+    get value() {
+        return this.getAttribute('value') || '';
     }
     connectedCallback() {
         this.part.add('tag');
-        if (this.parentElement) {
-            if (this.parentElement.hasAttribute('multiple')) {
-                if (!this.querySelector('[part*="clear-tag"]')) {
-                    throw new Error(`A <button> with part="clear-tag" is required for <combo-box> with multiple attribute`);
-                }
+        const control = this.querySelector('[part*="clear-tag"]');
+        if (!control?.checkVisibility()) {
+            super.setAttribute('tabindex', '0');
+        }
+        control?.addEventListener('focusout', HTMLComboboxTagElement.captureFocus);
+        control?.addEventListener('click', HTMLComboboxTagElement.onClearTag);
+        const root = this.getRootNode();
+        if (root?.host.hasAttribute('multiple')) {
+            if (!control) {
+                throw new Error(`A <button> with part="clear-tag" is required for <combo-box> with multiple attribute`);
             }
         }
     }
+    disconnectedCallback() {
+        const control = this.querySelector('[part*="clear-tag"]');
+        control?.removeEventListener('focusout', HTMLComboboxTagElement.captureFocus);
+        control?.removeEventListener('click', HTMLComboboxTagElement.onClearTag);
+    }
+    static onClearTag(event) {
+        const target = event.target;
+        target?.parentElement?.dispatchEvent(new Event('tagcleared', HTMLComboboxTagElement.EventInit));
+    }
+    static captureFocus(event) {
+        event.stopPropagation();
+        event.preventDefault();
+    }
 }
 if (!window.customElements.get('box-tag')) {
     window.customElements.define('box-tag', HTMLComboboxTagElement);

package/dist/esm/index.js

@@ -3,65 +3,3 @@
 /// <reference types="react" />
 /// <reference types="vue" />
 export * from './combobox/index.js';
-// declare global {
-//   namespace React {
-//     namespace JSX {
-//       interface IntrinsicElements {
-//         'combo-box': React.DetailedHTMLProps<Omit<React.HTMLAttributes<HTMLComboboxElement>, 'defaultValue'>,
-//           HTMLComboboxElement
-//         > & ComboboxJsxAttributes;
-//
-//         'box-option': React.DetailedHTMLProps<
-//           React.HTMLAttributes<HTMLComboboxOptionElement>,
-//           HTMLComboboxOptionElement>
-//         & ComboboxOptionJsxAttributes;
-//
-//         'box-tag': React.DetailedHTMLProps<React.HTMLAttributes<HTMLComboboxTagElement>, HTMLComboboxTagElement>;
-//       }
-//     }
-//   }
-//
-//
-//   namespace preact {
-//     namespace JSX {
-//       interface IntrinsicElements {
-//         'combo-box': preact.HTMLAttributes<HTMLComboboxElement> & ComboboxJsxAttributes;
-//         'box-option': preact.HTMLAttributes<HTMLComboboxOptionElement> & ComboboxOptionJsxAttributes;
-//         'box-tag': preact.HTMLAttributes<HTMLComboboxTagElement>;
-//       }
-//     }
-//   }
-//
-// }
-//
-// declare module 'preact' {
-//   namespace JSX {
-//     interface IntrinsicElements {
-//       'combo-box': preact.HTMLAttributes<HTMLComboboxElement> & ComboboxJsxAttributes;
-//       'box-option': preact.HTMLAttributes<HTMLComboboxOptionElement> & ComboboxOptionJsxAttributes;
-//       'box-tag': preact.HTMLAttributes<HTMLComboboxTagElement>;
-//     }
-//   }
-// }
-//
-// // Solid
-// declare module 'solid-js' {
-//   namespace JSX {
-//     interface IntrinsicElements {
-//       'combo-box': HTMLAttributes<HTMLComboboxElement> & ComboboxJsxAttributes
-//       'box-option': HTMLAttributes<HTMLComboboxOptionElement> & ComboboxOptionJsxAttributes
-//       'box-tag': HTMLAttributes<HTMLElement>
-//     }
-//   }
-// }
-//
-//
-// declare global {
-//   namespace JSX {
-//     interface IntrinsicElements {
-//       'combo-box': ComboboxJsxAttributes;
-//       'box-option': ComboboxOptionJsxAttributes;
-//       'box-tag': HTMLElement;
-//     }
-//   }
-// }

package/dist/types/combobox/Combobox.markup.d.ts

@@ -9,18 +9,21 @@ export declare class ComboboxMarkup {
     placeholder: HTMLDivElement | null;
     searchInput: HTMLInputElement | null;
     tagTemplate: HTMLComboboxTagElement | null;
-    options: NodeListOf<HTMLComboboxOptionElement> | null;
-    connected: boolean;
     constructor(shadowRoot: ShadowRoot, internals: ElementInternals);
     connect(): void;
-    invalidateOptionsCache(): void;
-    sort(query: string): void;
     disconnect(): void;
-    onPageScroll: () => void;
-    setDropdownPosition(rect: DOMRect): void;
-    showDropdown: () => void;
+    setPlaceholder(value: string): void;
+    setInputValue(value: string): void;
+    onClearAllFocusOut: (event: FocusEvent) => void;
+    onClickOutside: (ev: MouseEvent) => void;
+    sort(query: string): void;
+    get options(): NodeListOf<HTMLComboboxOptionElement>;
+    getTagControl(tag: HTMLComboboxTagElement): HTMLButtonElement;
+    setDropdownPosition(): void;
+    showDropdown(): void;
+    onFocusIn: () => void;
     closeDropdown(): void;
-    hideDropdown: (event: Event) => void;
+    onFocusOut: () => void;
     createAndAppendTag(option: HTMLComboboxOptionElement): HTMLButtonElement;
     getTagByValue(value: string): HTMLComboboxTagElement;
     getOptionByValue(value: string): HTMLComboboxOptionElement;

package/dist/types/combobox/Combobox.markup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.markup.d.ts","sourceRoot":"","sources":["../../../src/combobox/Combobox.markup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAE9E,qBAAa,cAAc;;IAGzB,aAAa,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC5C,gBAAgB,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC/C,cAAc,EAAE,iBAAiB,GAAG,IAAI,CAAQ;IAChD,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAQ;IACvC,WAAW,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC1C,WAAW,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IAC5C,WAAW,EAAE,sBAAsB,GAAG,IAAI,CAAQ;IAClD,OAAO,EAAE,UAAU,CAAC,yBAAyB,CAAC,GAAG,IAAI,CAAC;IACtD,SAAS,UAAS;gBAEN,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,gBAAgB;IAU/D,OAAO;IAiBP,sBAAsB;IAMtB,IAAI,CAAC,KAAK,EAAE,MAAM;IAelB,UAAU;IASV,YAAY,aAIX;IAED,mBAAmB,CAAC,IAAI,EAAE,OAAO;IAmBjC,YAAY,aAaX;IAED,aAAa;IAWb,YAAY,GAAI,OAAO,KAAK,UAG3B;IAED,kBAAkB,CAAC,MAAM,EAAE,yBAAyB;IAsCpD,aAAa,CAAC,KAAK,EAAE,MAAM;IAI3B,gBAAgB,CAAC,KAAK,EAAE,MAAM;IAI9B,IAAI,eAAe,0CAGlB;IAED,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE;IAQ/B,MAAM,CAAC,QAAQ,SAgMhB;CACA"}
+{"version":3,"file":"Combobox.markup.d.ts","sourceRoot":"","sources":["../../../src/combobox/Combobox.markup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAE9E,qBAAa,cAAc;;IAGzB,aAAa,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC5C,gBAAgB,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC/C,cAAc,EAAE,iBAAiB,GAAG,IAAI,CAAQ;IAChD,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAQ;IACvC,WAAW,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC1C,WAAW,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IAC5C,WAAW,EAAE,sBAAsB,GAAG,IAAI,CAAQ;gBAOtC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,gBAAgB;IAa/D,OAAO;IAyBP,UAAU;IAQV,cAAc,CAAC,KAAK,EAAE,MAAM;IAM5B,aAAa,CAAC,KAAK,EAAE,MAAM;IAM3B,kBAAkB,GAAI,OAAO,UAAU,UAStC;IAED,cAAc,GAAI,IAAI,UAAU,UAI/B;IAID,IAAI,CAAC,KAAK,EAAE,MAAM;IAiBlB,IAAI,OAAO,0CAEV;IAED,aAAa,CAAC,GAAG,EAAE,sBAAsB;IAczC,mBAAmB;IAqBnB,YAAY;IAIZ,SAAS,aAWR;IAED,aAAa;IAWb,UAAU,aAGT;IAGD,kBAAkB,CAAC,MAAM,EAAE,yBAAyB;IAyCpD,aAAa,CAAC,KAAK,EAAE,MAAM;IAI3B,gBAAgB,CAAC,KAAK,EAAE,MAAM;IAI9B,IAAI,eAAe,0CAElB;IAED,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE;IAQ/B,MAAM,CAAC,QAAQ,SAkQhB;CACA"}

package/dist/types/combobox/HTML.combobox.element.d.ts

@@ -12,9 +12,11 @@ export declare class HTMLComboboxElement extends HTMLElement {
     shadowRoot: ShadowRoot;
     constructor();
     connectedCallback(): void;
+    insertBefore: (node: Node, referenceNode: Node | null) => any;
+    get changed(): boolean;
     disconnectedCallback(): void;
     formResetCallback(): void;
-    formDisabledCallback(isDisabled: boolean): void;
+    formDisabledCallback(): void;
     get valueAsArray(): string[];
     get query(): string;
     set query(value: string);

package/dist/types/combobox/HTML.combobox.element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HTML.combobox.element.d.ts","sourceRoot":"","sources":["../../../src/combobox/HTML.combobox.element.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAI9E,qBAAa,mBAAoB,SAAQ,WAAW;;IAClD,MAAM,CAAC,OAAO,cAA0H;IACxI,MAAM,CAAC,eAAe;;;;MAA0D;IAChF,MAAM,CAAC,UAAU,kBAAuB;IACxC,MAAM,CAAC,cAAc,UAAQ;IAE7B,UAAU,EAAE,UAAU,CAAC;;IAoBvB,iBAAiB;IASjB,oBAAoB;IAOpB,iBAAiB;IAQjB,oBAAoB,CAAC,UAAU,EAAE,OAAO;IAOxC,IAAI,YAAY,aAEf;IAED,IAAI,KAAK,IAGQ,MAAM,CADtB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAQtB;IAED,IAAI,WAAW,WAEd;IACD,IAAI,WAAW,CAAC,KAAK,QAAA,EAQpB;IAED,IAAI,SAAS,YAEZ;IACD,IAAI,SAAS,CAAC,KAAK,SAAA,EAElB;IAED,IAAI,UAAU,YAEb;IACD,IAAI,UAAU,CAAC,KAAK,SAAA,EAEnB;IAED,IAAI,UAAU,YAEb;IACD,IAAI,UAAU,CAAC,KAAK,SAAA,EAEnB;IAGD,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAGjB;IAED,IAAI,IAAI,oBAEP;IAED,IAAI,MAAM,aAET;IAED,IAAI,MAAM,WAET;IAED,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAEjB;IAKD,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAGjB;IAID,IAAI,eAAe,0CAElB;IAMD,IAAI,IAAI,qCAEP;IAED,IAAI,iBAAiB,WAEpB;IAED,IAAI,QAAQ,kBAEX;IAED,IAAI,YAAY,YAEf;IAED,IAAI,KAAK,IAGQ,MAAM,CADtB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAgCtB;IAQD,aAAa;IAIb,IAAI,CAAC,KAAK,EAAE,MAAM;IASlB,cAAc;IAId,iBAAiB,CAAC,OAAO,EAAE,MAAM;IAQjC,UAAU;IAKV,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG;IAQrC,eAAe,CAAC,IAAI,EAAE,MAAM;IA4G5B,MAAM,CAAC,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE;IAIrC,MAAM,CAAC,8BAA8B;CAoBtC"}
+{"version":3,"file":"HTML.combobox.element.d.ts","sourceRoot":"","sources":["../../../src/combobox/HTML.combobox.element.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAI9E,qBAAa,mBAAoB,SAAQ,WAAW;;IAClD,MAAM,CAAC,OAAO,cAA0H;IACxI,MAAM,CAAC,eAAe;;;;MAA0D;IAChF,MAAM,CAAC,UAAU,kBAAuB;IACxC,MAAM,CAAC,cAAc,UAAQ;IAE7B,UAAU,EAAE,UAAU,CAAC;;IAyBvB,iBAAiB;IAejB,YAAY,GAAI,MAAM,IAAI,EAAE,eAAe,IAAI,GAAG,IAAI,KAWrC,GAAG,CACnB;IAGD,IAAI,OAAO,YAEV;IAED,oBAAoB;IAWpB,iBAAiB;IAMjB,oBAAoB;IASpB,IAAI,YAAY,aAEf;IAED,IAAI,KAAK,IAGQ,MAAM,CADtB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAMtB;IAED,IAAI,WAAW,WAEd;IACD,IAAI,WAAW,CAAC,KAAK,QAAA,EAKpB;IAED,IAAI,SAAS,YAEZ;IACD,IAAI,SAAS,CAAC,KAAK,SAAA,EAElB;IAED,IAAI,UAAU,YAEb;IACD,IAAI,UAAU,CAAC,KAAK,SAAA,EAEnB;IAED,IAAI,UAAU,YAEb;IACD,IAAI,UAAU,CAAC,KAAK,SAAA,EAEnB;IAGD,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAKjB;IAED,IAAI,IAAI,oBAEP;IAED,IAAI,MAAM,aAET;IAED,IAAI,MAAM,WAET;IAED,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAEjB;IAKD,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAGjB;IAID,IAAI,eAAe,0CAElB;IAMD,IAAI,IAAI,qCAEP;IAED,IAAI,iBAAiB,WAEpB;IAED,IAAI,QAAQ,kBAEX;IAED,IAAI,YAAY,YAEf;IAED,IAAI,KAAK,IAGQ,MAAM,CADtB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAQtB;IAQD,aAAa;IAIb,IAAI,CAAC,KAAK,EAAE,MAAM;IASlB,cAAc;IAId,iBAAiB,CAAC,OAAO,EAAE,MAAM;IAQjC,UAAU;IAKV,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG;IAQrC,eAAe,CAAC,IAAI,EAAE,MAAM;IAkK5B,MAAM,CAAC,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE;IAIrC,MAAM,CAAC,8BAA8B;CAoBtC"}

package/dist/types/combobox/HTML.combobox.option.element.d.ts

@@ -1,14 +1,25 @@
 export declare class HTMLComboboxOptionElement extends HTMLElement {
     #private;
     static OWN_IDL: Set<string>;
+    static EventInit: {
+        bubbles: boolean;
+        cancelable: boolean;
+        composed: boolean;
+    };
+    static captureFocus(event: FocusEvent): void;
+    static onNavigate(event: KeyboardEvent): void;
     connectedCallback(): void;
+    disconnectedCallback(): void;
     get value(): string;
     set value(value: string);
     get label(): string;
     set label(value: string);
     get selected(): boolean;
     set selected(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
     setAttribute(name: string, value: string): void;
     removeAttribute(name: string): void;
+    toggleAttribute(name: string, force?: boolean): boolean;
 }
 //# sourceMappingURL=HTML.combobox.option.element.d.ts.map