html-combobox-element 0.0.4 → 0.0.6

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

@@ -1,8 +1,14 @@
 import { ComboboxMarkup } from './Combobox.markup.js';
 import { HTMLComboboxOptionElement } from './HTML.combobox.option.element.js';
 import { toBoolean } from './Boolean.attribute.value.normalizer.js';
+import { HTMLComboboxOptionsCollection } from './HTML.combobox.options.collection.js';
 export class HTMLComboboxElement extends HTMLElement {
     static OWN_IDL = new Set(['required', 'disabled', 'clearable', 'multiple', 'filterable', 'searchable', 'value', 'placeholder', 'query']);
+    // Setters (and the setAttribute/removeAttribute overrides routed to them) only normalize and write
+    // the attribute; attributeChangedCallback applies the side effects, whatever changed the attribute
+    // (setters, native Element.prototype methods, DevTools, other JavaScript worlds).
+    static observedAttributes = [...HTMLComboboxElement.OWN_IDL];
+    static #BOOLEAN_ATTRIBUTES = new Set(['required', 'disabled', 'clearable', 'multiple', 'filterable', 'searchable']);
     static observerOptions = { childList: true };
     static styleSheet = [new CSSStyleSheet];
     static formAssociated = true;
@@ -13,34 +19,61 @@ export class HTMLComboboxElement extends HTMLElement {
     #values = new Set;
     #prevValue = '';
     #changed = false;
+    /** Disabled by an ancestor <fieldset disabled> (see formDisabledCallback) */
+    #formDisabled = false;
+    /** Whether aria-disabled on the host was set by the component (see #applyDisabledState) */
+    #ariaDisabledMirrored = false;
+    #options = null;
+    #typeahead = '';
+    #typeaheadTimer = undefined;
     constructor() {
         super();
         this.#internals = this.attachInternals();
         this.#internals.role = "combobox";
-        this.#internals.ariaHasPopup = "dialog";
-        this.shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: true }); //delegatesFocus: true
+        // The host itself takes focus (like a native <select>), so assistive technology reports the
+        // focused combobox with its name and value. Inner controls (tag buttons, search field, options)
+        // are focused explicitly. With delegatesFocus the focus would land on an inner element instead.
+        this.shadowRoot = this.attachShadow({ mode: 'open' });
         this.#markup = new ComboboxMarkup(this.shadowRoot, this.#internals);
         this.shadowRoot.appendChild(ComboboxMarkup.markup.content.cloneNode(true));
         this.shadowRoot.adoptedStyleSheets = HTMLComboboxElement.styleSheet;
         this.#observer = new MutationObserver(this.#onOptionsChanges);
         this.#markup.connect();
+        this.#syncPopupSemantics();
+    }
+    /** Texts used only by assistive technology, override them to localize. */
+    static get strings() {
+        return ComboboxMarkup.strings;
     }
     // Lifecycle callbacks
     connectedCallback() {
+        // Listen before sweeping the options in: a moved option reconnects and reports its `selected`
+        // state, which is how options pre-selected in the markup become the initial value.
+        this.shadowRoot.addEventListener('optionselectedstatechange', this.#onOptionSelectedStateChanges);
+        this.shadowRoot.addEventListener('tagcleared', this.#onClearTag);
+        this.shadowRoot.addEventListener('click', this.#onOptionClick, true);
         for (const child of Array.from(this.children)) {
             if (HTMLComboboxElement.#isOptionLike(child)) {
                 this.#markup.optionsContainer?.appendChild(child);
             }
         }
+        this.#syncOptgroups();
         this.#markup.onHostConnected();
-        this.shadowRoot.addEventListener('optionselectedstatechange', this.#onOptionSelectedStateChanges);
-        this.shadowRoot.addEventListener('tagcleared', this.#onClearTag);
+        if (!this.hasAttribute('tabindex'))
+            super.setAttribute('tabindex', '0');
+        // Mirrors the internals role, so tools that only read attributes (Playwright's getByRole,
+        // Testing Library) find the combobox too. The states stay in internals only.
+        if (!this.hasAttribute('role'))
+            super.setAttribute('role', 'combobox');
         this.#initialAttributesSynchronization();
         this.#observer.observe(this.#markup.optionsContainer, HTMLComboboxElement.observerOptions);
         this.addEventListener('keydown', this.#onKeyDown);
+        this.addEventListener('click', this.#onHostClick);
         this.#markup.clearAllButton.addEventListener('click', this.#onClearAll);
         this.#markup.searchInput.addEventListener('input', this.#onInput);
         this.#markup.dropdown.addEventListener('toggle', this.#onPickerToggle);
+        this.#applyDisabledState();
+        this.#syncPopupSemantics();
         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,
@@ -48,8 +81,11 @@ export class HTMLComboboxElement extends HTMLElement {
         // <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.
     }
+    // Matched by name too: content created with innerHTML connects <combo-box> before its
+    // <box-option> children are upgraded, so they aren't instances of the class yet.
     static #isOptionLike(node) {
-        return node instanceof HTMLComboboxOptionElement || node instanceof HTMLOptGroupElement;
+        return node instanceof HTMLComboboxOptionElement || node instanceof HTMLOptGroupElement
+            || (node instanceof Element && node.localName === 'box-option');
     }
     // Overwritten child-mutation methods.
     //
@@ -125,22 +161,64 @@ export class HTMLComboboxElement extends HTMLElement {
         this.#observer.disconnect();
         this.#markup.disconnect();
         this.removeEventListener('keydown', this.#onKeyDown);
+        this.removeEventListener('click', this.#onHostClick);
         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);
+        this.shadowRoot.removeEventListener('click', this.#onOptionClick, true);
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue || !this.#markup)
+            return;
+        // A path that skipped the setters can leave e.g. multiple="false": fix it once. The removal
+        // calls back again with a valid value, which applies the change; that one isn't fixed again,
+        // so this can't loop. The side effects below are safe to repeat.
+        if (HTMLComboboxElement.#BOOLEAN_ATTRIBUTES.has(name) && newValue !== null && !toBoolean(newValue)) {
+            super.removeAttribute(name);
+            return;
+        }
+        switch (name) {
+            case 'required':
+                this.#internals.ariaRequired = newValue !== null ? 'true' : null;
+                if (this.isConnected)
+                    this.#setValidityAndFormValue();
+                break;
+            case 'disabled':
+                if (this.isConnected)
+                    this.#applyDisabledState();
+                break;
+            case 'clearable':
+            case 'multiple':
+            case 'filterable':
+            case 'searchable':
+                this.#syncPopupSemantics();
+                break;
+            case 'placeholder':
+                this.#markup.setPlaceholder(newValue ?? '');
+                break;
+            case 'query':
+                this.#markup.setInputValue(newValue ?? '');
+                break;
+            case 'value':
+                // The value attribute is an initial value: the value setter doesn't write it back.
+                // Changed from outside the setter (natively, DevTools), apply it.
+                if (newValue !== null)
+                    this.value = newValue;
+                break;
+        }
     }
     formResetCallback() {
         this.selectedOptions.forEach(option => option.selected = false);
+        this.#values.clear();
         this.#markup.tagsContainer?.replaceChildren();
+        this.#setValidityAndFormValue();
         this.dispatchEvent(new Event('reset'));
-        requestAnimationFrame(() => this.#markup.searchInput?.focus());
     }
-    formDisabledCallback() {
-        // toDo
-        // when inside fieldset, this callback is only invoked for the first time
-        // isDisabled: boolean
+    formDisabledCallback(disabled) {
+        this.#formDisabled = disabled;
+        this.#applyDisabledState();
     }
     // Instance properties
     // <combo-box> specific properties
@@ -157,7 +235,6 @@ export class HTMLComboboxElement extends HTMLElement {
             value = '';
         value = String(value);
         super.setAttribute('query', value);
-        this.#markup?.setInputValue(value);
     }
     get placeholder() {
         return this.getAttribute('placeholder');
@@ -167,7 +244,6 @@ export class HTMLComboboxElement extends HTMLElement {
             value = ' ';
         value = String(value);
         super.setAttribute('placeholder', value);
-        this.#markup?.setPlaceholder(value);
     }
     get clearable() {
         return this.hasAttribute('clearable');
@@ -192,10 +268,7 @@ export class HTMLComboboxElement extends HTMLElement {
         return this.hasAttribute('disabled');
     }
     set disabled(value) {
-        this.#internals.ariaDisabled = String(value);
-        value = toBoolean(value);
-        super.toggleAttribute('disabled', value);
-        super.toggleAttribute('inert', value);
+        super.toggleAttribute('disabled', toBoolean(value));
     }
     get form() {
         return this.#internals.form;
@@ -204,7 +277,11 @@ export class HTMLComboboxElement extends HTMLElement {
         return this.#internals.labels;
     }
     get length() {
-        return this.#markup.options.length;
+        return this.options.length;
+    }
+    /** Like `select.length = n`: appends blank options, or removes the last ones */
+    set length(value) {
+        this.options.length = value;
     }
     get multiple() {
         return this.hasAttribute('multiple');
@@ -212,16 +289,27 @@ export class HTMLComboboxElement extends HTMLElement {
     set multiple(value) {
         super.toggleAttribute('multiple', toBoolean(value));
     }
-    // get options
-    // (there is no constructor of HTMLOptionsCollection, need to implement)
+    /** The options, as a live `HTMLOptionsCollection`-like list (like `select.options`) */
+    get options() {
+        this.#options ??= new HTMLComboboxOptionsCollection({
+            container: () => this.#markup.optionsContainer,
+            options: () => this.#markup.options,
+        });
+        return this.#options;
+    }
     get required() {
         return this.hasAttribute('required');
     }
     set required(value) {
-        this.#internals.ariaRequired = String(value);
         super.toggleAttribute('required', toBoolean(value));
     }
-    // selected index is part of HTMLOptionsCollection, see option above
+    /** Index of the first selected option, or -1. Setting it selects only that option. */
+    get selectedIndex() {
+        return this.options.selectedIndex;
+    }
+    set selectedIndex(value) {
+        this.options.selectedIndex = value;
+    }
     get selectedOptions() {
         return this.#markup.selectedOptions;
     }
@@ -243,10 +331,14 @@ export class HTMLComboboxElement extends HTMLElement {
     get value() {
         return this.valueAsArray.join(',');
     }
+    // Like select.value: null/undefined clear the selection, anything else is converted to a string
+    // (42 selects the option with value "42"); a value no option has clears the selection.
+    // Comma-separated values select several options.
     set value(value) {
-        if (this.value === value || typeof value !== 'string')
+        const next = value == null ? '' : String(value);
+        if (this.value === next)
             return;
-        const nextValues = new Set(value.split(',').filter(Boolean));
+        const nextValues = new Set(next.split(',').filter(Boolean));
         this.#markup.options.forEach(option => {
             const optionValue = option.value;
             // toggling `selected` drives #onOptionSelectedStateChanges, which is the
@@ -258,18 +350,30 @@ export class HTMLComboboxElement extends HTMLElement {
     }
     // Instance methods
     // <select> specific methods (implements HTMLSelectElement)
-    // add()
+    /** Like `select.add()`: inserts an option or optgroup before `before` (an element or an index), or at the end */
+    add(element, before) {
+        this.options.add(element, before);
+    }
     checkValidity() {
-        this.#internals.checkValidity();
+        return this.#internals.checkValidity();
     }
     item(index) {
-        return this.#markup.options.item(index);
+        return this.options.item(index);
+    }
+    /** The first option whose `id` or `name` attribute is `name` */
+    namedItem(name) {
+        return this.options.namedItem(name);
+    }
+    remove(...args) {
+        if (args.length === 0) {
+            super.remove();
+        }
+        else {
+            this.options.remove(args[0]);
+        }
     }
-    // namedItem()
-    // !!! Conflicts with node.remove()
-    // remove(index: number)
     reportValidity() {
-        this.#internals.reportValidity();
+        return this.#internals.reportValidity();
     }
     setCustomValidity(message) {
         if (message === '') {
@@ -282,6 +386,10 @@ export class HTMLComboboxElement extends HTMLElement {
     showPicker() {
         this.#markup.showDropdown();
     }
+    /** Closes the dropdown, if open */
+    hidePicker() {
+        this.#markup.closeDropdown();
+    }
     // Overwritten methods
     setAttribute(name, value) {
         if (HTMLComboboxElement.OWN_IDL.has(name)) {
@@ -292,15 +400,21 @@ export class HTMLComboboxElement extends HTMLElement {
         }
     }
     removeAttribute(name) {
-        if (HTMLComboboxElement.OWN_IDL.has(name)) {
+        if (HTMLComboboxElement.#BOOLEAN_ATTRIBUTES.has(name)) {
             Reflect.set(this, name, false);
         }
+        else if (name === 'placeholder' || name === 'query') {
+            Reflect.set(this, name, null);
+        }
         else {
+            // includes `value`: the attribute is only an initial value, removing it keeps the selection
             super.removeAttribute(name);
         }
     }
     // Internal
     #onOptionsChanges = (records) => {
+        this.#syncOptgroups();
+        this.#markup.syncValueText();
         records.forEach(record => {
             record.removedNodes.forEach(option => {
                 if (option instanceof HTMLComboboxOptionElement) {
@@ -315,7 +429,7 @@ export class HTMLComboboxElement extends HTMLElement {
                     }
                     // 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}"]`)) {
+                    if (this.#values.has(value) && !this.#markup.getOptionByValue(value)) {
                         this.#values.delete(value);
                         const control = this.#markup.getTagByValue(value);
                         control?.remove();
@@ -330,6 +444,9 @@ export class HTMLComboboxElement extends HTMLElement {
         if (option.selected) {
             if (!this.multiple) {
                 this.#values.forEach(value => {
+                    // The same option can report its state more than once (moved, upgraded): never deselect it
+                    if (value === option.value)
+                        return;
                     const prevOption = this.#markup.getOptionByValue(value);
                     if (prevOption) {
                         prevOption.selected = false;
@@ -345,7 +462,6 @@ export class HTMLComboboxElement extends HTMLElement {
                 this.#values.add(value);
                 this.#markup.createAndAppendTag(option);
                 this.#setValidityAndFormValue();
-                this.dispatchEvent(new Event('change'));
             }
         }
         else {
@@ -354,7 +470,6 @@ export class HTMLComboboxElement extends HTMLElement {
                 const control = this.#markup.getTagByValue(value);
                 control?.remove();
                 this.#setValidityAndFormValue();
-                this.dispatchEvent(new Event('change'));
             }
             else {
                 const tag = this.#markup.getTagByValue(value);
@@ -364,7 +479,11 @@ export class HTMLComboboxElement extends HTMLElement {
     };
     #onClearTag = (event) => {
         const target = event.target;
-        if (target) {
+        if (!target)
+            return;
+        const tags = Array.from(this.#markup.tagsContainer?.querySelectorAll('box-tag') ?? []);
+        const index = tags.indexOf(target);
+        this.#asUserAction(() => {
             const option = this.#markup.getOptionByValue(target.value);
             if (option) {
                 option.selected = false;
@@ -373,29 +492,79 @@ export class HTMLComboboxElement extends HTMLElement {
                 const tag = this.#markup.getTagByValue(target.value);
                 this.#values.delete(target.value);
                 tag?.remove();
+                this.#setValidityAndFormValue();
             }
-            requestAnimationFrame(() => {
-                if (this.#values.size) {
-                    this.focus();
-                }
-                else if (this.searchable || this.filterable) {
-                    this.#markup.searchInput?.focus();
-                }
-                else {
-                    this.focus();
-                }
-            });
+        });
+        // Keep the keyboard user where they were: on the next remaining tag's button,
+        // otherwise on the search field (when it's shown) or on the combobox itself.
+        const remaining = Array.from(this.#markup.tagsContainer?.querySelectorAll('[part*="clear-tag"]') ?? [])
+            .filter((button) => button.checkVisibility());
+        const next = remaining[Math.min(index, remaining.length - 1)];
+        if (next) {
+            next.focus();
+        }
+        else if (this.#markup.hasSearch && this.#markup.expanded) {
+            this.#markup.searchInput?.focus();
+        }
+        else {
+            this.#markup.focusHost();
         }
     };
     #onClearAll = () => {
-        this.formResetCallback();
+        this.#asUserAction(() => this.formResetCallback());
+        if (this.#markup.hasSearch && this.#markup.expanded) {
+            this.#markup.searchInput?.focus();
+        }
+        else {
+            this.#markup.focusHost();
+        }
+    };
+    // The dropdown opens when focus arrives. A combobox that keeps focus after it closed (an option
+    // was picked, Escape) gets no new focus from a click, so the click itself opens it.
+    // Not for clicks inside the dropdown (picking an option) or on the tag/clear buttons.
+    #onHostClick = (event) => {
+        if (this.#isDisabled || this.#markup.expanded)
+            return;
+        const path = event.composedPath();
+        if (this.#markup.dropdown && path.includes(this.#markup.dropdown))
+            return;
+        const onButton = path.some((node) => node instanceof Element && /\bclear-(tag|all)\b/.test(node.getAttribute('part') ?? ''));
+        if (onButton)
+            return;
+        this.#markup.showDropdown();
     };
+    // Picking an option with the pointer: toggles it (multiple) or selects it and closes (single),
+    // like <select>. The click may land on content inside the option.
+    #onOptionClick = (event) => {
+        const option = event.target?.closest?.('box-option');
+        if (!option || ComboboxMarkup.isOptionDisabled(option))
+            return;
+        this.#asUserAction(() => {
+            option.selected = this.multiple ? !option.selected : true;
+        });
+        if (!this.multiple) {
+            this.#markup.closeDropdown();
+            this.#markup.focusHost();
+        }
+    };
+    // Events follow the native rule: `change` reports what the *user* did, once per action, and
+    // only when the value actually changed. Changes made by script (value, selectedIndex,
+    // option.selected, attributes, the options collection, form reset) dispatch nothing: firing
+    // for them makes frameworks that set a value and listen for change loop or handle twice.
+    // (`input` is the search field's own event: the user typed.)
+    #asUserAction(action) {
+        const before = this.value;
+        action();
+        if (this.value !== before)
+            this.dispatchEvent(new Event('change', { bubbles: true }));
+    }
     #onPickerToggle = (event) => {
         const state = Reflect.get(event, 'newState');
         const oldState = Reflect.get(event, 'oldState');
         if (state === oldState)
             return;
         if (state === 'open') {
+            this.#syncPopupSemantics();
             this.#prevValue = this.value;
             this.#changed = true;
         }
@@ -404,54 +573,246 @@ export class HTMLComboboxElement extends HTMLElement {
             this.dispatchEvent(new Event('close'));
         }
     };
+    // Keyboard interaction follows the WAI-ARIA "select-only combobox" pattern:
+    // https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
     #onKeyDown = (event) => {
-        if (this.#internals.ariaExpanded !== 'true')
+        if (this.#isDisabled || event.defaultPrevented)
             return;
-        const activeElement = this.shadowRoot.activeElement;
-        if (!activeElement) {
-            // ??? how we should react ???
+        const active = this.shadowRoot.activeElement;
+        const expanded = this.#markup.expanded;
+        const { key } = event;
+        if (key === 'Escape') {
+            if (!expanded)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            this.#markup.closeDropdown();
+            this.#markup.focusHost();
             return;
         }
-        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);
+        // Focus is on the combobox itself
+        if (!active) {
+            if (key === 'ArrowDown' || key === 'ArrowUp' || key === 'Enter' || key === ' ' || key === 'Home' || key === 'End') {
+                event.preventDefault();
+                this.#markup.showDropdown();
+                if (this.#markup.hasSearch && key !== 'ArrowUp' && key !== 'End' && key !== 'Home') {
+                    this.#markup.searchInput?.focus();
+                }
+                else if (key === 'ArrowUp' || key === 'End') {
+                    this.#focusOption(key === 'End' ? this.#lastOption() : this.#selectedNavigableOption() ?? this.#lastOption());
+                }
+                else if (key === 'Home') {
+                    this.#focusOption(this.#firstOption());
+                }
+                else {
+                    this.#focusOption(this.#selectedNavigableOption() ?? this.#firstOption());
+                }
+                return;
             }
-            if (this.searchable) {
-                this.dispatchEvent(new Event('search'));
+            if (this.#isTypeaheadKey(event) && !this.#markup.hasSearch) {
+                event.preventDefault();
+                this.#markup.showDropdown();
+                this.#typeaheadFocus(key, null);
             }
             return;
         }
-        if (event.key === 'Enter' && activeElement instanceof HTMLComboboxOptionElement) {
-            if (!activeElement.selected) {
+        if (active === this.#markup.searchInput) {
+            if (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.part.contains('clear-tag')) {
-            // @ts-ignore
-            // this.#onClearTag(event);
-            // event.stopPropagation();
-            // event.preventDefault()
-            // @ts-ignore
-            activeElement.click();
-            // event.stopPropagation();
+            if (key === 'ArrowDown') {
+                event.preventDefault();
+                this.#markup.showDropdown();
+                this.#focusOption(this.#firstOption());
+            }
             return;
         }
-        if (event.key === 'Escape' || event.key === 'Enter') {
-            this.#markup.closeDropdown();
-            this.blur();
+        if (active instanceof HTMLComboboxOptionElement) {
+            const options = this.#markup.navigableOptions;
+            const index = options.indexOf(active);
+            switch (key) {
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this.#focusOption(options[index + 1] ?? null);
+                    return;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    if (index <= 0 && this.#markup.hasSearch) {
+                        this.#markup.searchInput?.focus();
+                    }
+                    else {
+                        this.#focusOption(options[index - 1] ?? null);
+                    }
+                    return;
+                case 'Home':
+                case 'PageUp':
+                    event.preventDefault();
+                    this.#focusOption(this.#firstOption());
+                    return;
+                case 'End':
+                case 'PageDown':
+                    event.preventDefault();
+                    this.#focusOption(this.#lastOption());
+                    return;
+                case 'Enter':
+                case ' ':
+                    event.preventDefault();
+                    event.stopPropagation();
+                    if (ComboboxMarkup.isOptionDisabled(active))
+                        return;
+                    this.#asUserAction(() => {
+                        active.selected = this.multiple ? !active.selected : true;
+                    });
+                    if (!this.multiple) {
+                        this.#markup.closeDropdown();
+                        this.#markup.focusHost();
+                    }
+                    return;
+                default:
+                    if (this.#isTypeaheadKey(event)) {
+                        event.preventDefault();
+                        this.#typeaheadFocus(key, active);
+                    }
+            }
         }
     };
+    #firstOption() {
+        return this.#markup.navigableOptions[0] ?? null;
+    }
+    #lastOption() {
+        return this.#markup.navigableOptions.at(-1) ?? null;
+    }
+    #selectedNavigableOption() {
+        return this.#markup.navigableOptions.find((option) => option.selected) ?? null;
+    }
+    #focusOption(option) {
+        if (!option)
+            return;
+        option.focus();
+        option.scrollIntoView?.({ block: 'nearest' });
+    }
+    #isTypeaheadKey(event) {
+        return event.key.length === 1 && event.key !== ' ' && !event.ctrlKey && !event.metaKey && !event.altKey;
+    }
+    // Typing characters moves to the next option whose label starts with them, as in <select>
+    #typeaheadFocus(char, from) {
+        clearTimeout(this.#typeaheadTimer);
+        this.#typeaheadTimer = setTimeout(() => this.#typeahead = '', 500);
+        const repeated = this.#typeahead.length === 1 && this.#typeahead === char.toLowerCase();
+        this.#typeahead = repeated ? this.#typeahead : this.#typeahead + char.toLowerCase();
+        const options = this.#markup.navigableOptions;
+        const start = from ? options.indexOf(from) + (repeated || this.#typeahead.length === 1 ? 1 : 0) : 0;
+        const ordered = [...options.slice(start), ...options.slice(0, start)];
+        const match = ordered.find((option) => ComboboxMarkup.optionLabel(option).toLowerCase().startsWith(this.#typeahead));
+        this.#focusOption(match ?? null);
+    }
     #onInput = () => {
         this.query = this.#markup.searchInput.value;
         if (!this.searchable && this.filterable) {
             this.#markup.sort(this.#markup.searchInput?.value || '');
         }
     };
+    get #isDisabled() {
+        return this.disabled || this.#formDisabled;
+    }
+    // A disabled combobox stays in the accessibility tree, exposed as disabled like a native
+    // <select disabled> (`inert` would remove it from the tree). The browser already takes a
+    // disabled form-associated element out of the focus order; its inner controls are made inert
+    // and it ignores the pointer (:state(disabled)).
+    // Known Chrome limitation: the value of a disabled combobox is not exposed, because Chrome
+    // computes the value of an ARIA combobox only while it is focusable.
+    #applyDisabledState() {
+        const disabled = this.#isDisabled;
+        this.#markup.disabled = disabled;
+        this.#internals.ariaDisabled = disabled ? 'true' : null;
+        // Mirrored as an attribute, like role: tools reading the DOM (Playwright's actionability
+        // checks and toBeDisabled(), Testing Library) can't see internals. An author's own
+        // aria-disabled is left alone.
+        if (disabled && !this.hasAttribute('aria-disabled')) {
+            super.setAttribute('aria-disabled', 'true');
+            this.#ariaDisabledMirrored = true;
+        }
+        else if (!disabled && this.#ariaDisabledMirrored) {
+            super.removeAttribute('aria-disabled');
+            this.#ariaDisabledMirrored = false;
+        }
+        try {
+            if (disabled)
+                this.#internals.states.add('disabled');
+            else
+                this.#internals.states.delete('disabled');
+        }
+        catch (e) { /* CustomStateSet not supported */ }
+        if (this.#markup.internal)
+            this.#markup.internal.inert = disabled;
+        if (this.#markup.dropdown)
+            this.#markup.dropdown.inert = disabled;
+        if (disabled) {
+            this.#markup.closeDropdown();
+            if (this.matches(':focus, :focus-within'))
+                this.blur();
+        }
+    }
+    // <optgroup> has its group semantics only inside a <select>; restore them here.
+    #syncOptgroups() {
+        this.#markup.optionsContainer?.querySelectorAll('optgroup').forEach((group) => {
+            group.setAttribute('role', 'group');
+            if (group.label)
+                group.setAttribute('aria-label', group.label);
+            else
+                group.removeAttribute('aria-label');
+            if (group.disabled)
+                group.setAttribute('aria-disabled', 'true');
+            else
+                group.removeAttribute('aria-disabled');
+        });
+    }
+    // Without a search field the popup is just the listbox, unnamed like the popup of a native <select>.
+    // With one, it is a dialog holding the field and the listbox.
+    // Note: any *named* element inside the combobox would be read as part of its value
+    // (Chrome computes the value of a non-editable combobox from its content), so the
+    // dialog stays unnamed; the listbox inside it is named after the <label>.
+    #syncPopupSemantics() {
+        const markup = this.#markup;
+        if (!markup)
+            return;
+        const withSearch = this.searchable || this.filterable;
+        this.#internals.ariaHasPopup = withSearch ? 'dialog' : 'listbox';
+        // Without a search field the popup has no role of its own: Chrome exposes the bare popover as an
+        // unnamed group around the listbox. Keep it: a listbox directly inside the combobox would add
+        // its selected option to the combobox value a second time ("Banana Banana").
+        if (withSearch)
+            markup.dropdown?.setAttribute('role', 'dialog');
+        else
+            markup.dropdown?.removeAttribute('role');
+        const popup = withSearch ? markup.dropdown : markup.optionsContainer;
+        if (popup)
+            this.#internals.ariaControlsElements = [popup];
+        markup.optionsContainer?.setAttribute('aria-multiselectable', String(this.multiple));
+        // Shadow content can't point at the outer <label> with aria-labelledby, so it borrows the label's text.
+        const name = Array.from(this.#internals.labels ?? [], (label) => label.textContent?.trim()).filter(Boolean).join(' ')
+            || this.getAttribute('aria-label') || '';
+        if (withSearch && name)
+            markup.optionsContainer?.setAttribute('aria-label', name);
+        else
+            markup.optionsContainer?.removeAttribute('aria-label');
+        markup.dropdown?.removeAttribute('aria-label');
+        // The tags area has interactive content (remove buttons) only when clearable or multiple.
+        // Otherwise it only repeats the value, which is already exposed, so hide it.
+        if (this.clearable || this.multiple)
+            markup.internal?.removeAttribute('aria-hidden');
+        else
+            markup.internal?.setAttribute('aria-hidden', 'true');
+    }
     #setValidityAndFormValue() {
-        this.#markup.clearAllButton?.toggleAttribute('disabled', !Boolean(this.#values.size));
+        this.#markup.syncValueText();
         let empty = false;
         if (this.#values.size === 0)
             empty = true;
@@ -469,6 +830,10 @@ export class HTMLComboboxElement extends HTMLElement {
     }
     #initialAttributesSynchronization() {
         for (const key of HTMLComboboxElement.OWN_IDL) {
+            // Without a value attribute, the selection comes from the options' `selected` attributes:
+            // `value = null` would clear it
+            if (key === 'value' && !this.hasAttribute('value'))
+                continue;
             this[key] = this.getAttribute(key);
         }
     }
@@ -495,14 +860,6 @@ export class HTMLComboboxElement extends HTMLElement {
         }
     }
 }
-document.addEventListener('keypress', () => {
-    if (document.activeElement instanceof HTMLComboboxElement) {
-        const maybeHost = document.activeElement.shadowRoot.activeElement;
-        if (maybeHost instanceof HTMLComboboxOptionElement) {
-            maybeHost.click();
-        }
-    }
-});
 if (!window.customElements.get('combo-box')) {
     window.customElements.define('combo-box', HTMLComboboxElement);
 }