kr-elements 0.0.1-alpha.34 → 0.0.1-alpha.35

package/dist/cjs/combobox/Combobox.markup.js

@@ -94,7 +94,6 @@ class ComboboxMarkup {
         try {
             this.setDropdownPosition(this.#shadowRoot.host.getBoundingClientRect());
             this.dropdown.style.display = 'flex';
-            // @ts-ignore
             this.dropdown.showPopover();
             this.#internals.ariaExpanded = "true";
             if (this.tagsContainer?.children.length === 0) {
@@ -108,7 +107,6 @@ class ComboboxMarkup {
     };
     closeDropdown() {
         try {
-            // @ts-ignore
             this.dropdown.hidePopover();
             this.dropdown.style.display = 'none';
             this.#internals.ariaExpanded = "false";
@@ -137,6 +135,7 @@ class ComboboxMarkup {
                     const clone = relatedNode.cloneNode(true);
                     clone.part.remove(...clone.part.values());
                     clone.part.add(...node.part.values());
+                    clone.classList.add(...node.classList.values());
                     tag.replaceChild(clone, node);
                 }
             });
@@ -151,7 +150,7 @@ class ComboboxMarkup {
             label.textContent = option.label;
             button = tag.querySelector('[part="clear-tag"]');
         }
-        button.setAttribute('value', value);
+        button?.setAttribute('value', value);
         tag.setAttribute('value', value);
         this.tagsContainer.appendChild(tag);
         return button;
@@ -264,7 +263,7 @@ class ComboboxMarkup {
     border-radius: inherit;
   }
 
-  [part*="tag"] {
+  box-tag {
     width: 100%;
     justify-self: start;
     box-sizing: border-box;
@@ -279,13 +278,13 @@ class ComboboxMarkup {
     text-transform: uppercase;
   }
   
-  :host([multiple]) [part*="tag"] {
+  :host([multiple]) box-tag {
     background-color: Highlight;
     width: fit-content;
     max-width: 100%;
   }
 
-  [part*="tag-label"] {
+  box-tag [part*="tag-label"] {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -294,7 +293,7 @@ class ComboboxMarkup {
     flex-grow: 1;
   }
   
-  :host([multiple]) [part*="tag-label"] {
+  :host([multiple]) box-tag [part*="tag-label"] {
     flex-grow: unset;
   }
   

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

@@ -10,17 +10,18 @@ class HTMLComboboxElement extends HTMLElement {
     static observerOptions = { childList: true, attributes: false, subtree: false };
     static styleSheet = [new CSSStyleSheet];
     static formAssociated = true;
-    internals;
     shadowRoot;
+    #internals;
     #observer;
     #markup;
     #values = new Set;
     constructor() {
         super();
-        this.internals = this.attachInternals();
-        this.internals.role = "combobox";
+        this.#internals = this.attachInternals();
+        this.#internals.role = "combobox";
+        this.#internals.ariaHasPopup = "dialog";
         this.shadowRoot = this.attachShadow({ mode: 'closed', delegatesFocus: true });
-        this.#markup = new Combobox_markup_js_1.ComboboxMarkup(this.shadowRoot, this.internals);
+        this.#markup = new Combobox_markup_js_1.ComboboxMarkup(this.shadowRoot, this.#internals);
         this.shadowRoot.innerHTML = Combobox_markup_js_1.ComboboxMarkup.template;
         this.shadowRoot.adoptedStyleSheets = _a.styleSheet;
         this.#observer = new MutationObserver(this.#onOptionsChanges);
@@ -31,12 +32,14 @@ class HTMLComboboxElement extends HTMLElement {
         this.#initialAttributesSynchronization();
         this.#onOptionsChanges([{ addedNodes: Array.from(this.children) }]);
         this.#observer.observe(this, _a.observerOptions);
-        this.#markup.clearAllButton.addEventListener('click', this.#onClickClearAllButton);
+        this.#markup.clearAllButton.addEventListener('click', this.#onClear);
         this.#markup.searchInput.addEventListener('input', this.#onInput);
     }
     disconnectedCallback() {
         this.#observer.disconnect();
         this.#markup.disconnect();
+        this.#markup.clearAllButton.removeEventListener('click', this.#onClear);
+        this.#markup.searchInput.removeEventListener('input', this.#onInput);
     }
     formResetCallback() {
         this.#values = new Set;
@@ -49,56 +52,10 @@ class HTMLComboboxElement extends HTMLElement {
         this.disabled = isDisabled;
     }
     // Instance properties
-    // readonly
+    // <combo-box> specific properties
     get valueAsArray() {
         return Array.from(this.#values);
     }
-    get selectedOptions() {
-        return this.#markup.selectedOptions;
-    }
-    get validity() {
-        return this.internals.validity;
-    }
-    get willValidate() {
-        return this.internals.willValidate;
-    }
-    // configurable
-    get value() {
-        return this.valueAsArray.join(',');
-    }
-    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);
-            }
-        });
-    }
     get query() {
         return this.getAttribute('query');
     }
@@ -132,12 +89,6 @@ class HTMLComboboxElement extends HTMLElement {
     set clearable(value) {
         super.toggleAttribute('clearable', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
     }
-    get multiple() {
-        return this.hasAttribute('multiple');
-    }
-    set multiple(value) {
-        super.toggleAttribute('multiple', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
-    }
     get filterable() {
         return this.hasAttribute('filterable');
     }
@@ -150,21 +101,120 @@ class HTMLComboboxElement extends HTMLElement {
     set searchable(value) {
         super.toggleAttribute('searchable', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
     }
+    // <select> specific properties (implements HTMLSelectElement)
     get disabled() {
         return this.hasAttribute('disabled');
     }
     set disabled(value) {
-        this.internals.ariaDisabled = String(value);
+        this.#internals.ariaDisabled = String(value);
         super.toggleAttribute('disabled', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
     }
+    get form() {
+        return this.#internals.form;
+    }
+    get labels() {
+        return this.#internals.labels;
+    }
+    get length() {
+        return this.#markup.options.length;
+    }
+    get multiple() {
+        return this.hasAttribute('multiple');
+    }
+    set multiple(value) {
+        super.toggleAttribute('multiple', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
+    }
+    // get options
+    // (there is no constructor of HTMLOptionsCollection, need to implement)
     get required() {
         return this.hasAttribute('required');
     }
     set required(value) {
-        this.internals.ariaRequired = String(value);
+        this.#internals.ariaRequired = String(value);
         super.toggleAttribute('required', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
     }
+    // selected index is part of HTMLOptionsCollection, see option above
+    get selectedOptions() {
+        return this.#markup.selectedOptions;
+    }
+    // get/set size
+    // for the original select, this is the same as rowsCount of textarea
+    // probably, there are no reasons to this one, but it should be implemented for interface compatibility
+    get type() {
+        return this.multiple ? "select-multiple" : "select-one";
+    }
+    get validationMessage() {
+        return this.#internals.validationMessage;
+    }
+    get validity() {
+        return this.#internals.validity;
+    }
+    get willValidate() {
+        return this.#internals.willValidate;
+    }
+    get value() {
+        return this.valueAsArray.join(',');
+    }
+    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);
+            }
+        });
+    }
     // Instance methods
+    // <select> specific methods (implements HTMLSelectElement)
+    // add()
+    checkValidity() {
+        this.#internals.checkValidity();
+    }
+    item(index) {
+        return this.#markup.options.item(index);
+    }
+    // namedItem()
+    // !!! Conflicts with node.remove()
+    // remove(index: number)
+    reportValidity() {
+        this.#internals.reportValidity();
+    }
+    setCustomValidity(message) {
+        if (message === '') {
+            this.#internals.setValidity({});
+        }
+        else {
+            this.#internals.setValidity({ customError: true }, message);
+        }
+    }
+    showPicker() {
+        this.#markup.showDropdown();
+    }
+    // Overwritten methods
     setAttribute(name, value) {
         if (_a.OWN_IDL.has(name)) {
             Reflect.set(this, name, value);
@@ -181,20 +231,6 @@ class HTMLComboboxElement extends HTMLElement {
             super.removeAttribute(name);
         }
     }
-    reportValidity() {
-        this.internals.reportValidity();
-    }
-    checkValidity() {
-        this.internals.checkValidity();
-    }
-    setCustomValidity(message) {
-        if (message === '') {
-            this.internals.setValidity({});
-        }
-        else {
-            this.internals.setValidity({ customError: true }, message);
-        }
-    }
     // Internal
     #onInput = (event) => {
         if (!this.searchable && this.filterable) {
@@ -232,76 +268,63 @@ class HTMLComboboxElement extends HTMLElement {
         this.#values.add(value);
         option.toggleAttribute('selected', true);
         const control = this.#markup.createAndAppendTag(option);
-        control?.addEventListener('click', this.#onClickTagClearButton);
+        control?.addEventListener('click', this.#onClearTag);
         if (!this.multiple) {
             this.#markup.closeDropdown();
         }
     }
     #onSelectOption = (event) => {
-        let option;
-        if (event.target instanceof HTML_combobox_option_element_js_1.HTMLComboboxOptionElement) {
-            option = event.target;
-        }
-        else {
-            option = event.composedPath()
-                .find(el => el instanceof HTML_combobox_option_element_js_1.HTMLComboboxOptionElement);
-        }
-        if (option) {
-            if (this.#values.has(option.value))
-                return;
-            if (!this.multiple) {
-                this.#values.forEach(value => {
-                    this.#markup.getTagByValue(value)?.remove();
-                    this.#markup.getOptionByValue(value)?.toggleAttribute('selected', false);
-                });
-                this.#values.clear();
-                this.#markup.tagsContainer.replaceChildren();
-            }
-            if (!this.multiple) {
-                event.stopPropagation();
+        const target = event.target;
+        if (target && target instanceof HTMLElement) {
+            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);
+                this.#setValidityAndFormValue();
+                this.dispatchEvent(new Event('change'));
             }
-            this.#selectOption(option);
-            this.#setValidityAndFormValue();
-            this.dispatchEvent(new Event('change'));
         }
     };
-    #onClickTagClearButton = (event) => {
-        let button;
-        if (event.target instanceof HTMLButtonElement) {
-            button = event.target;
-        }
-        else {
-            button = event.composedPath()
-                .find(el => {
-                return el instanceof HTMLElement && el.part.contains('clear-tag');
-            });
-        }
-        if (button) {
-            const value = button.value;
-            const option = this.#markup.getOptionByValue(value);
-            const tag = this.#markup.getTagByValue(value);
-            option.removeAttribute('selected');
-            this.#values.delete(value);
-            tag.remove();
-            this.#setValidityAndFormValue();
-            this.dispatchEvent(new Event('change'));
+    #onClearTag = (event) => {
+        const target = event.target;
+        if (target && target instanceof HTMLElement) {
+            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'));
+            }
         }
     };
-    #onClickClearAllButton = () => {
+    #onClear = () => {
         this.formResetCallback();
     };
     #setValidityAndFormValue() {
-        this.internals.setFormValue(this.value);
+        this.#internals.setFormValue(this.value);
         if (this.required && this.value === '') {
-            this.internals.setValidity({ valueMissing: true });
+            this.#internals.setValidity({ valueMissing: true });
         }
         else {
-            this.internals.setValidity({});
+            this.#internals.setValidity({});
         }
     }
     #initialAttributesSynchronization() {
         for (const key of _a.OWN_IDL) {
-            Reflect.set(this, key, this.getAttribute(key));
+            this[key] = this.getAttribute(key);
         }
     }
     static staticLoadCssByUrls(urls) {

package/dist/esm/combobox/Combobox.markup.js

@@ -91,7 +91,6 @@ export class ComboboxMarkup {
         try {
             this.setDropdownPosition(this.#shadowRoot.host.getBoundingClientRect());
             this.dropdown.style.display = 'flex';
-            // @ts-ignore
             this.dropdown.showPopover();
             this.#internals.ariaExpanded = "true";
             if (this.tagsContainer?.children.length === 0) {
@@ -105,7 +104,6 @@ export class ComboboxMarkup {
     };
     closeDropdown() {
         try {
-            // @ts-ignore
             this.dropdown.hidePopover();
             this.dropdown.style.display = 'none';
             this.#internals.ariaExpanded = "false";
@@ -134,6 +132,7 @@ export class ComboboxMarkup {
                     const clone = relatedNode.cloneNode(true);
                     clone.part.remove(...clone.part.values());
                     clone.part.add(...node.part.values());
+                    clone.classList.add(...node.classList.values());
                     tag.replaceChild(clone, node);
                 }
             });
@@ -148,7 +147,7 @@ export class ComboboxMarkup {
             label.textContent = option.label;
             button = tag.querySelector('[part="clear-tag"]');
         }
-        button.setAttribute('value', value);
+        button?.setAttribute('value', value);
         tag.setAttribute('value', value);
         this.tagsContainer.appendChild(tag);
         return button;
@@ -261,7 +260,7 @@ export class ComboboxMarkup {
     border-radius: inherit;
   }
 
-  [part*="tag"] {
+  box-tag {
     width: 100%;
     justify-self: start;
     box-sizing: border-box;
@@ -276,13 +275,13 @@ export class ComboboxMarkup {
     text-transform: uppercase;
   }
   
-  :host([multiple]) [part*="tag"] {
+  :host([multiple]) box-tag {
     background-color: Highlight;
     width: fit-content;
     max-width: 100%;
   }
 
-  [part*="tag-label"] {
+  box-tag [part*="tag-label"] {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -291,7 +290,7 @@ export class ComboboxMarkup {
     flex-grow: 1;
   }
   
-  :host([multiple]) [part*="tag-label"] {
+  :host([multiple]) box-tag [part*="tag-label"] {
     flex-grow: unset;
   }
   

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

@@ -6,17 +6,18 @@ export class HTMLComboboxElement extends HTMLElement {
     static observerOptions = { childList: true, attributes: false, subtree: false };
     static styleSheet = [new CSSStyleSheet];
     static formAssociated = true;
-    internals;
     shadowRoot;
+    #internals;
     #observer;
     #markup;
     #values = new Set;
     constructor() {
         super();
-        this.internals = this.attachInternals();
-        this.internals.role = "combobox";
+        this.#internals = this.attachInternals();
+        this.#internals.role = "combobox";
+        this.#internals.ariaHasPopup = "dialog";
         this.shadowRoot = this.attachShadow({ mode: 'closed', delegatesFocus: true });
-        this.#markup = new ComboboxMarkup(this.shadowRoot, this.internals);
+        this.#markup = new ComboboxMarkup(this.shadowRoot, this.#internals);
         this.shadowRoot.innerHTML = ComboboxMarkup.template;
         this.shadowRoot.adoptedStyleSheets = HTMLComboboxElement.styleSheet;
         this.#observer = new MutationObserver(this.#onOptionsChanges);
@@ -27,12 +28,14 @@ export class HTMLComboboxElement extends HTMLElement {
         this.#initialAttributesSynchronization();
         this.#onOptionsChanges([{ addedNodes: Array.from(this.children) }]);
         this.#observer.observe(this, HTMLComboboxElement.observerOptions);
-        this.#markup.clearAllButton.addEventListener('click', this.#onClickClearAllButton);
+        this.#markup.clearAllButton.addEventListener('click', this.#onClear);
         this.#markup.searchInput.addEventListener('input', this.#onInput);
     }
     disconnectedCallback() {
         this.#observer.disconnect();
         this.#markup.disconnect();
+        this.#markup.clearAllButton.removeEventListener('click', this.#onClear);
+        this.#markup.searchInput.removeEventListener('input', this.#onInput);
     }
     formResetCallback() {
         this.#values = new Set;
@@ -45,56 +48,10 @@ export class HTMLComboboxElement extends HTMLElement {
         this.disabled = isDisabled;
     }
     // Instance properties
-    // readonly
+    // <combo-box> specific properties
     get valueAsArray() {
         return Array.from(this.#values);
     }
-    get selectedOptions() {
-        return this.#markup.selectedOptions;
-    }
-    get validity() {
-        return this.internals.validity;
-    }
-    get willValidate() {
-        return this.internals.willValidate;
-    }
-    // configurable
-    get value() {
-        return this.valueAsArray.join(',');
-    }
-    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);
-            }
-        });
-    }
     get query() {
         return this.getAttribute('query');
     }
@@ -128,12 +85,6 @@ export class HTMLComboboxElement extends HTMLElement {
     set clearable(value) {
         super.toggleAttribute('clearable', toBoolean(value));
     }
-    get multiple() {
-        return this.hasAttribute('multiple');
-    }
-    set multiple(value) {
-        super.toggleAttribute('multiple', toBoolean(value));
-    }
     get filterable() {
         return this.hasAttribute('filterable');
     }
@@ -146,21 +97,120 @@ export class HTMLComboboxElement extends HTMLElement {
     set searchable(value) {
         super.toggleAttribute('searchable', toBoolean(value));
     }
+    // <select> specific properties (implements HTMLSelectElement)
     get disabled() {
         return this.hasAttribute('disabled');
     }
     set disabled(value) {
-        this.internals.ariaDisabled = String(value);
+        this.#internals.ariaDisabled = String(value);
         super.toggleAttribute('disabled', toBoolean(value));
     }
+    get form() {
+        return this.#internals.form;
+    }
+    get labels() {
+        return this.#internals.labels;
+    }
+    get length() {
+        return this.#markup.options.length;
+    }
+    get multiple() {
+        return this.hasAttribute('multiple');
+    }
+    set multiple(value) {
+        super.toggleAttribute('multiple', toBoolean(value));
+    }
+    // get options
+    // (there is no constructor of HTMLOptionsCollection, need to implement)
     get required() {
         return this.hasAttribute('required');
     }
     set required(value) {
-        this.internals.ariaRequired = String(value);
+        this.#internals.ariaRequired = String(value);
         super.toggleAttribute('required', toBoolean(value));
     }
+    // selected index is part of HTMLOptionsCollection, see option above
+    get selectedOptions() {
+        return this.#markup.selectedOptions;
+    }
+    // get/set size
+    // for the original select, this is the same as rowsCount of textarea
+    // probably, there are no reasons to this one, but it should be implemented for interface compatibility
+    get type() {
+        return this.multiple ? "select-multiple" : "select-one";
+    }
+    get validationMessage() {
+        return this.#internals.validationMessage;
+    }
+    get validity() {
+        return this.#internals.validity;
+    }
+    get willValidate() {
+        return this.#internals.willValidate;
+    }
+    get value() {
+        return this.valueAsArray.join(',');
+    }
+    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);
+            }
+        });
+    }
     // Instance methods
+    // <select> specific methods (implements HTMLSelectElement)
+    // add()
+    checkValidity() {
+        this.#internals.checkValidity();
+    }
+    item(index) {
+        return this.#markup.options.item(index);
+    }
+    // namedItem()
+    // !!! Conflicts with node.remove()
+    // remove(index: number)
+    reportValidity() {
+        this.#internals.reportValidity();
+    }
+    setCustomValidity(message) {
+        if (message === '') {
+            this.#internals.setValidity({});
+        }
+        else {
+            this.#internals.setValidity({ customError: true }, message);
+        }
+    }
+    showPicker() {
+        this.#markup.showDropdown();
+    }
+    // Overwritten methods
     setAttribute(name, value) {
         if (HTMLComboboxElement.OWN_IDL.has(name)) {
             Reflect.set(this, name, value);
@@ -177,20 +227,6 @@ export class HTMLComboboxElement extends HTMLElement {
             super.removeAttribute(name);
         }
     }
-    reportValidity() {
-        this.internals.reportValidity();
-    }
-    checkValidity() {
-        this.internals.checkValidity();
-    }
-    setCustomValidity(message) {
-        if (message === '') {
-            this.internals.setValidity({});
-        }
-        else {
-            this.internals.setValidity({ customError: true }, message);
-        }
-    }
     // Internal
     #onInput = (event) => {
         if (!this.searchable && this.filterable) {
@@ -228,76 +264,63 @@ export class HTMLComboboxElement extends HTMLElement {
         this.#values.add(value);
         option.toggleAttribute('selected', true);
         const control = this.#markup.createAndAppendTag(option);
-        control?.addEventListener('click', this.#onClickTagClearButton);
+        control?.addEventListener('click', this.#onClearTag);
         if (!this.multiple) {
             this.#markup.closeDropdown();
         }
     }
     #onSelectOption = (event) => {
-        let option;
-        if (event.target instanceof HTMLComboboxOptionElement) {
-            option = event.target;
-        }
-        else {
-            option = event.composedPath()
-                .find(el => el instanceof HTMLComboboxOptionElement);
-        }
-        if (option) {
-            if (this.#values.has(option.value))
-                return;
-            if (!this.multiple) {
-                this.#values.forEach(value => {
-                    this.#markup.getTagByValue(value)?.remove();
-                    this.#markup.getOptionByValue(value)?.toggleAttribute('selected', false);
-                });
-                this.#values.clear();
-                this.#markup.tagsContainer.replaceChildren();
-            }
-            if (!this.multiple) {
-                event.stopPropagation();
+        const target = event.target;
+        if (target && target instanceof HTMLElement) {
+            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);
+                this.#setValidityAndFormValue();
+                this.dispatchEvent(new Event('change'));
             }
-            this.#selectOption(option);
-            this.#setValidityAndFormValue();
-            this.dispatchEvent(new Event('change'));
         }
     };
-    #onClickTagClearButton = (event) => {
-        let button;
-        if (event.target instanceof HTMLButtonElement) {
-            button = event.target;
-        }
-        else {
-            button = event.composedPath()
-                .find(el => {
-                return el instanceof HTMLElement && el.part.contains('clear-tag');
-            });
-        }
-        if (button) {
-            const value = button.value;
-            const option = this.#markup.getOptionByValue(value);
-            const tag = this.#markup.getTagByValue(value);
-            option.removeAttribute('selected');
-            this.#values.delete(value);
-            tag.remove();
-            this.#setValidityAndFormValue();
-            this.dispatchEvent(new Event('change'));
+    #onClearTag = (event) => {
+        const target = event.target;
+        if (target && target instanceof HTMLElement) {
+            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'));
+            }
         }
     };
-    #onClickClearAllButton = () => {
+    #onClear = () => {
         this.formResetCallback();
     };
     #setValidityAndFormValue() {
-        this.internals.setFormValue(this.value);
+        this.#internals.setFormValue(this.value);
         if (this.required && this.value === '') {
-            this.internals.setValidity({ valueMissing: true });
+            this.#internals.setValidity({ valueMissing: true });
         }
         else {
-            this.internals.setValidity({});
+            this.#internals.setValidity({});
         }
     }
     #initialAttributesSynchronization() {
         for (const key of HTMLComboboxElement.OWN_IDL) {
-            Reflect.set(this, key, this.getAttribute(key));
+            this[key] = this.getAttribute(key);
         }
     }
     static staticLoadCssByUrls(urls) {

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,aAcX;IAED,aAAa;IAYb,YAAY,GAAI,OAAO,KAAK,UAG3B;IAED,kBAAkB,CAAC,MAAM,EAAE,yBAAyB;IAqCpD,aAAa,CAAC,KAAK,EAAE,MAAM;IAI3B,gBAAgB,CAAC,KAAK,EAAE,MAAM;IAI9B,IAAI,eAAe,0CAGlB;IAED,MAAM,KAAK,QAAQ,WAoMlB;CACF"}
+{"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,KAAK,QAAQ,WAoMlB;CACF"}

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

@@ -9,7 +9,6 @@ export declare class HTMLComboboxElement extends HTMLElement {
     };
     static styleSheet: CSSStyleSheet[];
     static formAssociated: boolean;
-    internals: ElementInternals;
     shadowRoot: ShadowRoot;
     constructor();
     connectedCallback(): void;
@@ -17,32 +16,39 @@ export declare class HTMLComboboxElement extends HTMLElement {
     formResetCallback(): void;
     formDisabledCallback(isDisabled: boolean): void;
     get valueAsArray(): string[];
-    get selectedOptions(): NodeListOf<HTMLComboboxOptionElement>;
-    get validity(): ValidityState;
-    get willValidate(): boolean;
-    get value(): string;
-    set value(value: string);
     get query(): string;
     set query(value: string);
     get placeholder(): string;
     set placeholder(value: string);
     get clearable(): boolean;
     set clearable(value: boolean);
-    get multiple(): boolean;
-    set multiple(value: boolean);
     get filterable(): boolean;
     set filterable(value: boolean);
     get searchable(): boolean;
     set searchable(value: boolean);
     get disabled(): boolean;
     set disabled(value: boolean);
+    get form(): HTMLFormElement;
+    get labels(): NodeList;
+    get length(): number;
+    get multiple(): boolean;
+    set multiple(value: boolean);
     get required(): boolean;
     set required(value: boolean);
-    setAttribute(name: string, value: any): void;
-    removeAttribute(name: string): void;
-    reportValidity(): void;
+    get selectedOptions(): NodeListOf<HTMLComboboxOptionElement>;
+    get type(): "select-one" | "select-multiple";
+    get validationMessage(): string;
+    get validity(): ValidityState;
+    get willValidate(): boolean;
+    get value(): string;
+    set value(value: string);
     checkValidity(): void;
+    item(index: number): HTMLComboboxOptionElement;
+    reportValidity(): void;
     setCustomValidity(message: string): void;
+    showPicker(): void;
+    setAttribute(name: string, value: any): void;
+    removeAttribute(name: string): void;
     static staticLoadCssByUrls(urls: string[]): void;
     static loadCssFromDocumentStyleSheets(): void;
 }

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;AAG9E,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,SAAS,EAAE,gBAAgB,CAAC;IAC5B,UAAU,EAAE,UAAU,CAAC;;IAkBvB,iBAAiB;IASjB,oBAAoB;IAKpB,iBAAiB;IAQjB,oBAAoB,CAAC,UAAU,EAAE,OAAO;IAMxC,IAAI,YAAY,aAEf;IACD,IAAI,eAAe,0CAElB;IACD,IAAI,QAAQ,kBAEX;IACD,IAAI,YAAY,YAEf;IAGD,IAAI,KAAK,IAGQ,MAAM,CADtB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAgCtB;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,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAEjB;IAED,IAAI,UAAU,YAEb;IACD,IAAI,UAAU,CAAC,KAAK,SAAA,EAEnB;IAED,IAAI,UAAU,YAEb;IACD,IAAI,UAAU,CAAC,KAAK,SAAA,EAEnB;IAED,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAGjB;IAED,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAGjB;IAGD,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG;IAQrC,eAAe,CAAC,IAAI,EAAE,MAAM;IAQ5B,cAAc;IAId,aAAa;IAIb,iBAAiB,CAAC,OAAO,EAAE,MAAM;IAwHjC,MAAM,CAAC,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE;IAIzC,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;;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,mBAAmB,CAAC,IAAI,EAAE,MAAM,EAAE;IAIzC,MAAM,CAAC,8BAA8B;CAoBtC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kr-elements",
-  "version": "0.0.1-alpha.34",
+  "version": "0.0.1-alpha.35",
   "description": "Custom elements",
   "type": "module",
   "scripts": {