html-combobox-element 0.0.2-beta.9 → 0.0.3

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

@@ -77,10 +77,12 @@ class HTMLComboboxOptionElement extends HTMLElement {
     set selected(value) {
         const prev = this.selected;
         const force = (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value);
-        if (prev === force)
+        if (prev === force) {
             return;
+        }
         super.toggleAttribute('selected', force);
         this.part.toggle('selected', force);
+        // console.log('this.isConnected', this.isConnected)
         if (this.isConnected) {
             this.dispatchEvent(new Event('optionselectedstatechange', _a.EventInit));
         }
@@ -96,13 +98,11 @@ class HTMLComboboxOptionElement extends HTMLElement {
     }
     #initialAttributesSynchronization() {
         for (const key of _a.OWN_IDL) {
-            // @ts-ignore
             this[key] = this.getAttribute(key);
         }
     }
     setAttribute(name, value) {
         if (_a.OWN_IDL.has(name)) {
-            // @ts-ignore
             this[name] = value;
         }
         else {
@@ -111,7 +111,6 @@ class HTMLComboboxOptionElement extends HTMLElement {
     }
     removeAttribute(name) {
         if (_a.OWN_IDL.has(name)) {
-            // @ts-ignore
             this[name] = null;
         }
         else {

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

@@ -9,7 +9,7 @@ class HTMLComboboxTagElement extends HTMLElement {
     connectedCallback() {
         this.part.add('tag');
         const control = this.querySelector('[part*="clear-tag"]');
-        if (!control?.checkVisibility()) {
+        if (!this.hasAttribute('visible')) {
             super.setAttribute('tabindex', '0');
         }
         control?.addEventListener('focusout', HTMLComboboxTagElement.captureFocus);

package/dist/cjs/index.js

@@ -1,8 +1,4 @@
 "use strict";
-/// <reference types="solid-js" />
-/// <reference types="preact" />
-/// <reference types="react" />
-/// <reference types="vue" />
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);

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

@@ -19,10 +19,7 @@ export class ComboboxMarkup {
         window.addEventListener('click', this.onClickOutside);
         this.#shadowRoot.host.addEventListener('focusin', this.onFocusIn);
         this.#shadowRoot.host.addEventListener('focusout', this.onFocusOut);
-        // document.addEventListener('scroll', this.#onDimensionsChanges);
-        // document.addEventListener('resize', this.#onDimensionsChanges);
         this.#rso = new ResizeObserver(this.#onDimensionsChanges);
-        // document.addEventListener('scrollend', this.onConnected);
     }
     connect() {
         const placeholder = this.#shadowRoot.host.getAttribute('placeholder') || `Выбрать`;
@@ -41,6 +38,11 @@ export class ComboboxMarkup {
         const doc = document.importNode(innerTemplate.content, true);
         this.tagTemplate = doc.querySelector('box-tag');
     }
+    onHostConnected() {
+        const host = this.#shadowRoot.host;
+        const clearable = host.hasAttribute('clearable') || host.hasAttribute('multiple');
+        this.tagTemplate.toggleAttribute('visible', clearable);
+    }
     disconnect() {
         this.#shadowRoot.host.removeEventListener('focusin', this.onFocusIn);
         this.#shadowRoot.host.removeEventListener('focusout', this.onFocusOut);
@@ -79,7 +81,6 @@ export class ComboboxMarkup {
     sort(query) {
         clearTimeout(this.#timer);
         this.#timer = setTimeout(() => {
-            // console.log(this.options)
             const regex = new RegExp(query.trim(), 'i');
             this.options.forEach((option) => {
                 if (!regex.test(option.textContent)) {
@@ -129,8 +130,6 @@ export class ComboboxMarkup {
             return;
         this.#hostTop = this.#shadowRoot.host.getBoundingClientRect().top;
         try {
-            this.dropdown.style.display = 'flex';
-            // @ts-ignore
             this.dropdown.showPopover();
             this.#internals.ariaExpanded = "true";
         }
@@ -140,9 +139,7 @@ export class ComboboxMarkup {
     };
     closeDropdown() {
         try {
-            // @ts-ignore
             this.dropdown.hidePopover();
-            this.dropdown.style.display = 'none';
             this.#internals.ariaExpanded = "false";
         }
         catch (e) {
@@ -178,14 +175,12 @@ export class ComboboxMarkup {
         }
         else {
             const template = this.tagTemplate;
-            // console.log(this)
             tag = template.cloneNode(true);
             const label = tag.querySelector('[part="tag-label"]');
             label.textContent = option.label || option.textContent;
             button = tag.querySelector('[part="clear-tag"]');
         }
         button?.setAttribute('value', value);
-        // button.addEventListener('blur', e => e.stopPropagation());
         tag.setAttribute('value', value);
         this.tagsContainer.appendChild(tag);
         this.clearAllButton?.removeAttribute('disabled');
@@ -233,6 +228,7 @@ ${urls.map(url => `@import "${url}";`)}
   }
 
   #dropdown {
+    contain: layout style paint;
     inset: unset;
     margin: 0;
     /*position: absolute;*/
@@ -244,29 +240,30 @@ ${urls.map(url => `@import "${url}";`)}
     border-width: inherit;
     background-color: Canvas;
     outline: none;
-    
-    top: anchor(bottom);
+    display: none;
+    top: calc(anchor(bottom) + 2px);
     left: anchor(left);
     position-anchor: --position;
     position-try: normal flip-block;
   }
   
+  #dropdown:popover-open {
+    display: flex;
+  }
+  
   #dropdown::-webkit-scrollbar {
     display: none;
   }
   
-  [part="options"] {
+  #options {
     display: flex;
     flex-direction: column;
     justify-content: start;
     gap: 2px;
-    /*padding: inherit;*/
-    /*padding-block: .5rem;*/
-    border-radius: inherit;
-    
+    border-radius: inherit;  
   }
   
-  :host([filterable]) [part="options"], :host([searchable]) [part="options"] {
+  :host([filterable]) #options, :host([searchable]) #options {
     padding-top: .5rem;
   }
   
@@ -277,8 +274,6 @@ ${urls.map(url => `@import "${url}";`)}
     cursor: pointer;
     padding: inherit;
     padding-inline: .5lh;
-    /*padding-inline: 2px;*/
-    /*padding-block: 1px;*/
   }
   
   box-option:hover {
@@ -291,26 +286,17 @@ ${urls.map(url => `@import "${url}";`)}
     pointer-events: none;
   }
   
-  [part="search-input"] { 
+  #dropdown > [part="search-input"] { 
     display: none;
     position: sticky;
     top: 0;
     z-index: 2;
-    /*border-radius: inherit;*/
-    /*border-style: inherit;*/
-    /*border-width: inherit;*/
-    /*border-color: inherit;*/
-    /*padding: inherit;*/
-    /*padding-inline: .4lh;*/
     font-size: inherit;
     outline: inherit;
-    &::placeholder {
-      color: var(--search-input-placeholder-color);
-    }  
   }
   
-  :host([searchable]) [part="search-input"],
-  :host([filterable]) [part="search-input"] {
+  :host([searchable]) #dropdown > [part="search-input"],
+  :host([filterable]) #dropdown > [part="search-input"] {
     display: flow-root;
   }
   
@@ -318,7 +304,6 @@ ${urls.map(url => `@import "${url}";`)}
     text-align: left;
     overflow: hidden;
     padding-inline-start: 2px;
-    /*font-size: smaller;*/
     color: dimgrey;
     outline: none;
     user-select: none;
@@ -332,15 +317,12 @@ ${urls.map(url => `@import "${url}";`)}
     grid-column: 1 / span 2;
     width: 100%;
   }
-  
- 
 
   #tags {
     display: flex;
     flex-wrap: wrap;
     overflow: hidden;
     gap: 2px;
-    /*border-radius: inherit;*/
   }
 
   box-tag {
@@ -349,13 +331,10 @@ ${urls.map(url => `@import "${url}";`)}
     box-sizing: border-box;
     display: flex;
     align-items: center;
-    /*border-radius: inherit;*/
     padding-inline-start: 0.4lh;
     padding-inline-end: 0.2lh;
     background-color: transparent;
     gap: 5px;
-    /*font-size: medium;*/
-    text-transform: uppercase;
     border-radius: 1lh;
   }
   
@@ -365,31 +344,28 @@ ${urls.map(url => `@import "${url}";`)}
     max-width: 100%;
   }
 
-  box-tag [part*="tag-label"] {
+  [part*="tag-label"] {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     user-select: none;
-    /*font-size: 95%;*/
     flex-grow: 1;
   }
   
-  :host([multiple]) box-tag[part*="tag-label"] {
+  :host([multiple]) [part*="tag-label"] {
     flex-grow: unset;
   }
   
-  [part*="clear-tag"], [part*="clear-all"] {
+  [part*="clear-tag"], #internal > [part*="clear-all"] {
     border-radius: 100%;
     border: none;
     aspect-ratio: 1;
-    /*line-height: 0;*/
     padding: 0!important;
     user-select: none;
     background-color: transparent;
   }
   
   [part*="clear-tag"] {
-    /*inline-size: 1lh;*/
     block-size: 1lh;
     font-size: .7lh;
     text-transform: uppercase;
@@ -401,7 +377,7 @@ ${urls.map(url => `@import "${url}";`)}
     outline-width: 1px;
   }
 
-  :host([multiple]) [part*="clear-all"] {
+  :host([multiple]) #internal > [part*="clear-all"] {
    display: block;
   }
   
@@ -411,13 +387,10 @@ ${urls.map(url => `@import "${url}";`)}
     place-content: center;
   }
 
-  [part*="clear-all"] {
+  #internal > [part*="clear-all"] {
     font-size: inherit;
     text-transform: uppercase;
-    /*inline-size: 1lh;*/
     block-size: 1lh;
-    /*inline-size: 1.2em;*/
-    /*block-size: 1.2em;*/
     display: none;
   }
   
@@ -425,28 +398,20 @@ ${urls.map(url => `@import "${url}";`)}
     outline: none;
   }
 
-  [part*="clear-all"]:hover, 
+  #internal > [part*="clear-all"]:hover, 
   [part*="clear-tag"]:hover {
     color: ActiveText;
     cursor: pointer;
   }
 
-  [part*="clear-all"]:hover {
+  #internal >[part*="clear-all"]:hover {
     background-color: ButtonFace;
   }
   
-  :host:has(#tags:empty) [part*="clear-all"] {
+  #tags:empty + [part*="clear-all"] {
     pointer-events: none;
     outline: none;
   }
-  
-  [part*="not-found"] {
-    visibility: visible;
-  }
-  
-  /*:host:has(#dropdown:popover-open) #dropdown {*/
-  /*  border-top-left-radius: 0;*/
-  /*}*/
  
 </style>
 <div id='internal' part='internal'>
@@ -457,8 +422,9 @@ ${urls.map(url => `@import "${url}";`)}
 
 <div id="dropdown" popover="manual" part='dropdown' >
   <input placeholder='Поиск' name="search-input" part="search-input" inputmode='search' autofocus />
-  <div part="options"></div>
+  <div part="options" id='options'></div>
 </div>
+
 <template id='tag-template'>
   <box-tag>
     <span part="tag-label"></span>
@@ -466,4 +432,10 @@ ${urls.map(url => `@import "${url}";`)}
   </box-tag>
 </template>
 `;
+    static markup;
+    static {
+        const template = document.createElement('template');
+        template.innerHTML = ComboboxMarkup.template;
+        ComboboxMarkup.markup = template;
+    }
 }

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

@@ -3,7 +3,7 @@ import { HTMLComboboxOptionElement } from './HTML.combobox.option.element.js';
 import { toBoolean } from './Boolean.attribute.value.normalizer.js';
 export class HTMLComboboxElement extends HTMLElement {
     static OWN_IDL = new Set(['required', 'disabled', 'clearable', 'multiple', 'filterable', 'searchable', 'value', 'placeholder', 'query']);
-    static observerOptions = { childList: true, attributes: false, subtree: false };
+    static observerOptions = { childList: true };
     static styleSheet = [new CSSStyleSheet];
     static formAssociated = true;
     shadowRoot;
@@ -20,32 +20,51 @@ export class HTMLComboboxElement extends HTMLElement {
         this.#internals.ariaHasPopup = "dialog";
         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.appendChild(ComboboxMarkup.markup.content.cloneNode(true));
         this.shadowRoot.adoptedStyleSheets = HTMLComboboxElement.styleSheet;
         this.#observer = new MutationObserver(this.#onOptionsChanges);
         this.#markup.connect();
     }
     // Lifecycle callbacks
     connectedCallback() {
-        // super.setAttribute('tabindex', '0');
+        for (const child of Array.from(this.children)) {
+            if (HTMLComboboxElement.#isOptionLike(child)) {
+                this.#markup.optionsContainer?.appendChild(child);
+            }
+        }
+        this.#markup.onHostConnected();
         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.#observer.observe(this.#markup.optionsContainer, HTMLComboboxElement.observerOptions);
         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();
-    }
+        // Options/optgroups can end up as direct light-DOM children of <combo-box> without ever
+        // going through insertBefore/appendChild below: parsed straight from static HTML markup,
+        // or - notably - Solid's compiler, which renders static JSX subtrees via a single
+        // <template> + cloneNode(true), never calling any child-mutation method at all. Sweep
+        // whatever is already here once on connect and move it into the real options container.
+    }
+    static #isOptionLike(node) {
+        return node instanceof HTMLComboboxOptionElement || node instanceof HTMLOptGroupElement;
+    }
+    // Overwritten child-mutation methods.
+    //
+    // <box-option>/<optgroup> children don't actually live under <combo-box> itself - they're
+    // redirected into #markup.optionsContainer inside the shadow root, which is what the
+    // dropdown renders from and what #observer watches. Every native method a framework's
+    // renderer or plain user code might use to add/move/remove children needs to funnel through
+    // the same redirect, since browsers implement each of these independently (overriding one,
+    // e.g. insertBefore, does not make the others call it under the hood):
+    //   - React calls appendChild for a plain append and insertBefore only when reordering.
+    //   - Vue and Preact always call insertBefore, with a null reference for a plain append.
+    //   - Solid mostly bypasses all of them for static subtrees (see connectedCallback above),
+    //     but dynamic option lists still go through insert()/insertBefore().
     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) {
+        if (HTMLComboboxElement.#isOptionLike(node)) {
             this.#markup.optionsContainer?.insertBefore(node, referenceNode);
         }
         else {
@@ -53,6 +72,52 @@ export class HTMLComboboxElement extends HTMLElement {
         }
         return node;
     };
+    appendChild = (node) => {
+        if (HTMLComboboxElement.#isOptionLike(node)) {
+            this.#markup.optionsContainer?.appendChild(node);
+        }
+        else {
+            super.appendChild(node);
+        }
+        return node;
+    };
+    append = (...nodes) => {
+        nodes.forEach(node => this.appendChild(typeof node === 'string' ? new Text(node) : node));
+    };
+    prepend = (...nodes) => {
+        [...nodes].reverse().forEach(node => {
+            const n = typeof node === 'string' ? new Text(node) : node;
+            if (HTMLComboboxElement.#isOptionLike(n)) {
+                this.#markup.optionsContainer?.insertBefore(n, this.#markup.optionsContainer.firstChild);
+            }
+            else {
+                super.insertBefore(n, this.firstChild);
+            }
+        });
+    };
+    replaceChildren = (...nodes) => {
+        this.#markup.optionsContainer?.replaceChildren();
+        super.replaceChildren();
+        this.append(...nodes);
+    };
+    removeChild = (child) => {
+        if (child.parentNode === this.#markup.optionsContainer) {
+            this.#markup.optionsContainer.removeChild(child);
+        }
+        else if (child.parentNode === this) {
+            super.removeChild(child);
+        }
+        return child;
+    };
+    replaceChild = (newChild, oldChild) => {
+        if (oldChild.parentNode === this.#markup.optionsContainer) {
+            this.#markup.optionsContainer.replaceChild(newChild, oldChild);
+        }
+        else {
+            super.replaceChild(newChild, oldChild);
+        }
+        return oldChild;
+    };
     get changed() {
         return this.#changed;
     }
@@ -68,6 +133,7 @@ export class HTMLComboboxElement extends HTMLElement {
     }
     formResetCallback() {
         this.selectedOptions.forEach(option => option.selected = false);
+        this.#markup.tagsContainer?.replaceChildren();
         this.dispatchEvent(new Event('reset'));
         requestAnimationFrame(() => this.#markup.searchInput?.focus());
     }
@@ -180,11 +246,14 @@ export class HTMLComboboxElement extends HTMLElement {
     set value(value) {
         if (this.value === value || typeof value !== 'string')
             return;
-        const values = value.split(',').filter(Boolean);
-        this.#values = new Set(values);
+        const nextValues = new Set(value.split(',').filter(Boolean));
         this.#markup.options.forEach(option => {
-            const value = option.value;
-            option.selected = this.#values.has(value);
+            const optionValue = option.value;
+            // toggling `selected` drives #onOptionSelectedStateChanges, which is the
+            // single source of truth for #values and tags - don't pre-assign #values
+            // here, or the dedup logic there ends up deselecting the option it's in
+            // the middle of selecting (see: stale tag left behind on next selection)
+            option.selected = nextValues.has(optionValue);
         });
     }
     // Instance methods
@@ -233,9 +302,24 @@ export class HTMLComboboxElement extends HTMLElement {
     // Internal
     #onOptionsChanges = (records) => {
         records.forEach(record => {
-            record.addedNodes.forEach(node => {
-                if (node instanceof HTMLComboboxOptionElement || node instanceof HTMLOptGroupElement) {
-                    this.#markup.optionsContainer.append(node);
+            record.removedNodes.forEach(option => {
+                if (option instanceof HTMLComboboxOptionElement) {
+                    const value = option.value;
+                    // mode is searchable,
+                    // user type "a", select a result,
+                    // then types "b". Here previous options will be replaced with new ones,
+                    // this.#values may contain "a", but there is no relevant option yet,
+                    // so just wait
+                    if (this.searchable && this.#internals.ariaExpanded === 'true') {
+                        return;
+                    }
+                    // options was removed, but values still include this value,
+                    // just clear, this is like a reset was called
+                    if (this.#values.has(value) && !this.#markup.optionsContainer?.querySelector(`[value="${value}"]`)) {
+                        this.#values.delete(value);
+                        const control = this.#markup.getTagByValue(value);
+                        control?.remove();
+                    }
                 }
             });
         });
@@ -247,11 +331,17 @@ export class HTMLComboboxElement extends HTMLElement {
             if (!this.multiple) {
                 this.#values.forEach(value => {
                     const prevOption = this.#markup.getOptionByValue(value);
-                    if (prevOption)
+                    if (prevOption) {
                         prevOption.selected = false;
+                    }
+                    else {
+                        const tag = this.#markup.getTagByValue(value);
+                        this.#values.delete(value);
+                        tag?.remove();
+                    }
                 });
             }
-            if (!this.#values.has(value)) {
+            if (!this.#values.has(value) || !this.#markup.getTagByValue(value)) {
                 this.#values.add(value);
                 this.#markup.createAndAppendTag(option);
                 this.#setValidityAndFormValue();
@@ -266,14 +356,24 @@ export class HTMLComboboxElement extends HTMLElement {
                 this.#setValidityAndFormValue();
                 this.dispatchEvent(new Event('change'));
             }
+            else {
+                const tag = this.#markup.getTagByValue(value);
+                tag?.remove();
+            }
         }
     };
     #onClearTag = (event) => {
         const target = event.target;
         if (target) {
             const option = this.#markup.getOptionByValue(target.value);
-            if (option)
+            if (option) {
                 option.selected = false;
+            }
+            else {
+                const tag = this.#markup.getTagByValue(target.value);
+                this.#values.delete(target.value);
+                tag?.remove();
+            }
             requestAnimationFrame(() => {
                 if (this.#values.size) {
                     this.focus();
@@ -315,6 +415,7 @@ export class HTMLComboboxElement extends HTMLElement {
         if (activeElement === this.#markup.searchInput && event.key === 'Enter') {
             event.stopPropagation();
             if (!this.searchable && this.filterable) {
+                console.log('sss');
                 this.#markup.sort(this.#markup.searchInput.value);
             }
             if (this.searchable) {
@@ -328,8 +429,14 @@ export class HTMLComboboxElement extends HTMLElement {
                 return;
             }
         }
-        if (event.key === 'Enter' && activeElement instanceof HTMLElement && activeElement.part.contains('clear-tag')) {
+        if (event.key === 'Enter' && activeElement.part.contains('clear-tag')) {
+            // @ts-ignore
+            // this.#onClearTag(event);
+            // event.stopPropagation();
+            // event.preventDefault()
+            // @ts-ignore
             activeElement.click();
+            // event.stopPropagation();
             return;
         }
         if (event.key === 'Escape' || event.key === 'Enter') {
@@ -362,7 +469,6 @@ export class HTMLComboboxElement extends HTMLElement {
     }
     #initialAttributesSynchronization() {
         for (const key of HTMLComboboxElement.OWN_IDL) {
-            // @ts-ignore
             this[key] = this.getAttribute(key);
         }
     }
@@ -389,7 +495,7 @@ export class HTMLComboboxElement extends HTMLElement {
         }
     }
 }
-document.addEventListener('keypress', (event) => {
+document.addEventListener('keypress', () => {
     if (document.activeElement instanceof HTMLComboboxElement) {
         const maybeHost = document.activeElement.shadowRoot.activeElement;
         if (maybeHost instanceof HTMLComboboxOptionElement) {

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

@@ -73,10 +73,12 @@ export class HTMLComboboxOptionElement extends HTMLElement {
     set selected(value) {
         const prev = this.selected;
         const force = toBoolean(value);
-        if (prev === force)
+        if (prev === force) {
             return;
+        }
         super.toggleAttribute('selected', force);
         this.part.toggle('selected', force);
+        // console.log('this.isConnected', this.isConnected)
         if (this.isConnected) {
             this.dispatchEvent(new Event('optionselectedstatechange', HTMLComboboxOptionElement.EventInit));
         }
@@ -92,13 +94,11 @@ export class HTMLComboboxOptionElement extends HTMLElement {
     }
     #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 {
@@ -107,7 +107,6 @@ export class HTMLComboboxOptionElement extends HTMLElement {
     }
     removeAttribute(name) {
         if (HTMLComboboxOptionElement.OWN_IDL.has(name)) {
-            // @ts-ignore
             this[name] = null;
         }
         else {

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

@@ -6,7 +6,7 @@ export class HTMLComboboxTagElement extends HTMLElement {
     connectedCallback() {
         this.part.add('tag');
         const control = this.querySelector('[part*="clear-tag"]');
-        if (!control?.checkVisibility()) {
+        if (!this.hasAttribute('visible')) {
             super.setAttribute('tabindex', '0');
         }
         control?.addEventListener('focusout', HTMLComboboxTagElement.captureFocus);

package/dist/esm/index.js

@@ -1,5 +1 @@
-/// <reference types="solid-js" />
-/// <reference types="preact" />
-/// <reference types="react" />
-/// <reference types="vue" />
 export * from './combobox/index.js';

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

@@ -11,6 +11,7 @@ export declare class ComboboxMarkup {
     tagTemplate: HTMLComboboxTagElement | null;
     constructor(shadowRoot: ShadowRoot, internals: ElementInternals);
     connect(): void;
+    onHostConnected(): void;
     disconnect(): void;
     setPlaceholder(value: string): void;
     setInputValue(value: string): void;
@@ -30,5 +31,6 @@ export declare class ComboboxMarkup {
     get selectedOptions(): NodeListOf<HTMLComboboxOptionElement>;
     static importCSS(urls: string[]): void;
     static template: string;
+    static markup: HTMLTemplateElement;
 }
 //# sourceMappingURL=Combobox.markup.d.ts.map