html-combobox-element 0.0.4 → 0.0.6

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

@@ -1,96 +1,138 @@
 import { toBoolean } from './Boolean.attribute.value.normalizer.js';
+/**
+ * The `<option>` of `<combo-box>`.
+ *
+ * The browser only knows what `selected`/`disabled` mean on a native `<option>`, so the role and
+ * both states are set through ElementInternals, and mirrored as `role`, `aria-selected` and
+ * `aria-disabled` attributes. Internals are invisible from outside the element, so the attributes
+ * are what tools reading the DOM (Playwright's getByRole, Testing Library, axe) can see.
+ * Both say the same thing; for the browser an attribute takes precedence over internals.
+ *
+ * Attributes and properties:
+ * - Setters (and the setAttribute/removeAttribute overrides that route to them) only normalize
+ *   the value and write the attribute.
+ * - attributeChangedCallback applies the side effects (state, ARIA, notifying the combobox).
+ *   It's the one hook the browser calls for every way an attribute can change: the setters,
+ *   the native Element.prototype methods, setAttributeNS/setAttributeNode, DevTools, and other
+ *   JavaScript worlds (test runners, extensions) that can't see this class at all.
+ */
 export class HTMLComboboxOptionElement extends HTMLElement {
     static OWN_IDL = new Set(['value', 'label', 'selected', 'disabled']);
+    static observedAttributes = ['selected', 'disabled'];
     static EventInit = { bubbles: true, cancelable: true, composed: true };
-    static captureFocus(event) {
-        if (event.relatedTarget && event.relatedTarget instanceof HTMLComboboxOptionElement) {
-            event.stopPropagation();
-            event.preventDefault();
-        }
-    }
-    static onNavigate(event) {
-        if (!event.target ||
-            !(event.target instanceof HTMLComboboxOptionElement) ||
-            event.key === 'Tab' ||
-            event.key === 'Enter')
-            return;
-        event.preventDefault();
-        if (event.key === 'ArrowDown') {
-            const next = event.target.nextElementSibling;
-            if (next && next instanceof HTMLComboboxOptionElement) {
-                next.focus();
-            }
-        }
-        if (event.key === 'ArrowUp') {
-            const prev = event.target.previousElementSibling;
-            if (prev && prev instanceof HTMLComboboxOptionElement) {
-                prev.focus();
-            }
-        }
+    #internals;
+    /** The states the side effects were last applied for (compared in attributeChangedCallback) */
+    #applied = { selected: false, disabled: false };
+    constructor() {
+        super();
+        this.#internals = this.attachInternals();
+        this.#internals.role = 'option';
     }
     connectedCallback() {
-        this.addEventListener('keydown', HTMLComboboxOptionElement.onNavigate);
-        this.addEventListener('focusout', HTMLComboboxOptionElement.captureFocus);
-        this.addEventListener('click', this.#toggleSelection);
         this.#initialAttributesSynchronization();
         this.part.add('option');
-        super.setAttribute('tabindex', "0");
-        super.setAttribute('role', "option");
-        if (!this.value)
-            this.value = this.label;
+        // Focusable on click and from script (arrow keys), but not a tab stop: like native options,
+        // the list is entered with the arrow keys from the combobox, not with Tab.
+        if (!this.hasAttribute('tabindex'))
+            super.setAttribute('tabindex', '-1');
+        if (!this.hasAttribute('role'))
+            super.setAttribute('role', 'option');
+        this.#syncSelected(this.selected);
+        this.#syncDisabled(this.disabled);
+        // No label → value copy: like <option>, the value is the value attribute or the text.
+        // (<box-option label="Plum"></box-option> displays its label through CSS, see the markup styles.)
         if (!this.textContent)
-            this.textContent = this.value;
+            this.textContent = this.getAttribute('value') ?? '';
         this.dispatchEvent(new Event('optionselectedstatechange', HTMLComboboxOptionElement.EventInit));
     }
-    disconnectedCallback() {
-        this.removeEventListener('click', this.#toggleSelection);
-        this.removeEventListener('keydown', HTMLComboboxOptionElement.onNavigate);
-        this.removeEventListener('focusout', HTMLComboboxOptionElement.captureFocus);
-    }
-    #toggleSelection = (event) => {
-        event.stopPropagation();
-        this.selected = !this.selected;
-    };
+    /** Like <option>: the value attribute, or the text when there is none */
     get value() {
-        return this.getAttribute('value');
+        return this.getAttribute('value') ?? this.text;
     }
     set value(value) {
         if (value == null)
             return;
         super.setAttribute('value', String(value));
     }
+    /** Like <option>: the label attribute when present, otherwise the text */
     get label() {
-        return this.getAttribute('label');
+        return this.getAttribute('label') ?? this.text;
     }
     set label(value) {
         if (value == null)
             return;
         super.setAttribute('label', String(value));
     }
+    /** Like <option>: the text content with whitespace stripped and collapsed */
+    get text() {
+        return (this.textContent ?? '').replace(/[\t\n\f\r ]+/g, ' ').trim();
+    }
+    set text(value) {
+        this.textContent = value;
+    }
     get selected() {
         return this.hasAttribute('selected');
     }
+    // Normalization only: the side effects run in attributeChangedCallback
     set selected(value) {
-        const prev = this.selected;
-        const force = toBoolean(value);
-        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));
-        }
+        super.toggleAttribute('selected', toBoolean(value));
     }
     get disabled() {
         return this.hasAttribute('disabled');
     }
     set disabled(value) {
-        const force = toBoolean(value);
-        super.toggleAttribute('disabled', force);
-        this.part.toggle('disabled', force);
-        super.toggleAttribute('inert', force);
+        super.toggleAttribute('disabled', toBoolean(value));
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        // A path that skipped the setters can leave a value they'd never write, e.g. selected="false".
+        // Fix it once: the removal calls back again with a valid value (which applies the change);
+        // that removal is valid, so it isn't fixed again: no loop.
+        if (newValue !== null && !toBoolean(newValue)) {
+            super.removeAttribute(name);
+            return;
+        }
+        const now = newValue !== null;
+        // Compared with the state last applied, not with the old attribute value: after a fix-up
+        // the old value is "false", which says nothing about what was applied before it.
+        if (this.#applied[name] === now)
+            return;
+        if (name === 'selected') {
+            this.#syncSelected(now);
+            if (this.isConnected) {
+                this.dispatchEvent(new Event('optionselectedstatechange', HTMLComboboxOptionElement.EventInit));
+            }
+        }
+        else {
+            this.#syncDisabled(now);
+        }
+    }
+    #syncSelected(selected) {
+        this.#applied.selected = selected;
+        this.part.toggle('selected', selected);
+        this.#syncAriaSelected();
+    }
+    // A disabled option stays in the accessibility tree (like a native disabled <option>), it is
+    // only marked as disabled. `inert` would remove it from the tree altogether.
+    #syncDisabled(disabled) {
+        this.#applied.disabled = disabled;
+        this.part.toggle('disabled', disabled);
+        this.#internals.ariaDisabled = disabled ? 'true' : null;
+        if (disabled)
+            super.setAttribute('aria-disabled', 'true');
+        else
+            super.removeAttribute('aria-disabled');
+        this.#syncAriaSelected();
+    }
+    // Like a native <option>: a disabled option that isn't selected isn't selectable, so it reports
+    // no selected state at all (rather than selected=false).
+    #syncAriaSelected() {
+        const selected = this.selected;
+        const ariaSelected = this.disabled && !selected ? null : String(selected);
+        this.#internals.ariaSelected = ariaSelected;
+        if (ariaSelected === null)
+            super.removeAttribute('aria-selected');
+        else
+            super.setAttribute('aria-selected', ariaSelected);
     }
     #initialAttributesSynchronization() {
         for (const key of HTMLComboboxOptionElement.OWN_IDL) {
@@ -106,18 +148,14 @@ export class HTMLComboboxOptionElement extends HTMLElement {
         }
     }
     removeAttribute(name) {
-        if (HTMLComboboxOptionElement.OWN_IDL.has(name)) {
-            this[name] = null;
+        // value/label setters ignore null (like option.value = null they'd need a string), so remove directly
+        if (name === 'selected' || name === 'disabled') {
+            this[name] = false;
         }
         else {
             super.removeAttribute(name);
         }
     }
-    toggleAttribute(name, force) {
-        if (name === 'selected')
-            this.part.toggle(name, force);
-        return super.toggleAttribute(name, force);
-    }
 }
 if (!window.customElements.get('box-option')) {
     window.customElements.define('box-option', HTMLComboboxOptionElement);

package/dist/esm/combobox/HTML.combobox.options.collection.js

@@ -0,0 +1,170 @@
+import { HTMLComboboxOptionElement } from './HTML.combobox.option.element.js';
+// Kept outside the instance: the collection is used through a Proxy, and private (#) fields
+// can't be read through a Proxy receiver.
+const sources = new WeakMap();
+const source = (collection) => sources.get(collection);
+const isIndex = (prop) => typeof prop === 'string' && /^(0|[1-9]\d*)$/.test(prop);
+/**
+ * The `options` of a `<combo-box>`: an implementation of `HTMLOptionsCollection`, whose constructor
+ * is not exposed (it can't be constructed or subclassed). Same behaviour as `select.options`:
+ * it is live, supports `options[i]` (also as an assignment target), `length` (also settable),
+ * `item()`, `namedItem()`, `add()`, `remove()`, `selectedIndex` and iteration.
+ */
+export class HTMLComboboxOptionsCollection {
+    constructor(source) {
+        sources.set(this, source);
+        const proxy = new Proxy(this, {
+            get(target, prop, receiver) {
+                if (isIndex(prop))
+                    return target.item(Number(prop)) ?? undefined;
+                if (typeof prop === 'symbol' || prop in target)
+                    return Reflect.get(target, prop, receiver);
+                return target.namedItem(prop) ?? undefined;
+            },
+            set(target, prop, value, receiver) {
+                if (isIndex(prop)) {
+                    target.#setIndexed(Number(prop), value);
+                    return true;
+                }
+                return Reflect.set(target, prop, value, receiver);
+            },
+            has(target, prop) {
+                if (isIndex(prop))
+                    return Number(prop) < target.length;
+                if (typeof prop === 'symbol' || prop in target)
+                    return Reflect.has(target, prop);
+                return target.namedItem(prop) !== null;
+            },
+            ownKeys(target) {
+                const names = new Set();
+                for (const option of target) {
+                    if (option.id)
+                        names.add(option.id);
+                    const name = option.getAttribute('name');
+                    if (name)
+                        names.add(name);
+                }
+                const indices = Array.from({ length: target.length }, (_, i) => String(i));
+                return [...indices, ...Array.from(names).filter((name) => !isIndex(name)), ...Reflect.ownKeys(target)];
+            },
+            getOwnPropertyDescriptor(target, prop) {
+                if (isIndex(prop)) {
+                    const value = target.item(Number(prop));
+                    return value ? { value, enumerable: true, configurable: true, writable: true } : undefined;
+                }
+                if (typeof prop === 'string' && !(prop in target)) {
+                    const value = target.namedItem(prop);
+                    return value ? { value, enumerable: true, configurable: true, writable: false } : undefined;
+                }
+                return Reflect.getOwnPropertyDescriptor(target, prop);
+            },
+            deleteProperty(target, prop) {
+                // Like the native collection, indexed and named properties can't be deleted
+                if (isIndex(prop) || (typeof prop === 'string' && !(prop in target)))
+                    return false;
+                return Reflect.deleteProperty(target, prop);
+            },
+        });
+        sources.set(proxy, source);
+        return proxy;
+    }
+    get [Symbol.toStringTag]() {
+        return 'HTMLOptionsCollection';
+    }
+    *[Symbol.iterator]() {
+        yield* Array.from(source(this).options());
+    }
+    get length() {
+        return source(this).options().length;
+    }
+    /** Like `select.options.length = n`: appends blank options, or removes the last ones. */
+    set length(value) {
+        const length = Number(value) >>> 0;
+        const options = Array.from(source(this).options());
+        if (length > options.length) {
+            source(this).container().append(...HTMLComboboxOptionsCollection.#blankOptions(length - options.length));
+        }
+        else {
+            options.slice(length).forEach((option) => option.remove());
+        }
+    }
+    item(index) {
+        return source(this).options().item(Number(index) >>> 0) ?? null;
+    }
+    /** The first option whose `id` or `name` attribute is `name` */
+    namedItem(name) {
+        if (name === '')
+            return null;
+        for (const option of this) {
+            if (option.id === name || option.getAttribute('name') === name)
+                return option;
+        }
+        return null;
+    }
+    /**
+     * Inserts an option (or optgroup) before `before` (an option/optgroup of this list, or an index),
+     * or at the end. Throws like `select.options.add()`.
+     */
+    add(element, before) {
+        const isOption = element instanceof HTMLComboboxOptionElement || (element instanceof Element && element.localName === 'box-option');
+        if (!isOption && !(element instanceof HTMLOptGroupElement)) {
+            throw new TypeError(`Failed to execute 'add' on 'HTMLOptionsCollection': The provided value is not a <box-option> or an <optgroup>.`);
+        }
+        const container = source(this).container();
+        let reference = null;
+        if (typeof before === 'number') {
+            reference = this.item(before);
+        }
+        else if (before != null) {
+            if (!container.contains(before)) {
+                throw new DOMException(`Failed to execute 'add' on 'HTMLOptionsCollection': The node before which the new node is to be inserted is not a child of this node.`, 'NotFoundError');
+            }
+            reference = before;
+        }
+        if (element === reference)
+            return;
+        const parent = reference?.parentNode ?? container;
+        parent.insertBefore(element, reference);
+    }
+    /** Removes the option at `index` (does nothing when out of range) */
+    remove(index) {
+        this.item(index)?.remove();
+    }
+    /** Index of the first selected option, or -1. Setting it selects only that option. */
+    get selectedIndex() {
+        return Array.from(this).findIndex((option) => option.selected);
+    }
+    set selectedIndex(value) {
+        const index = Number(value);
+        const options = Array.from(this);
+        // Deselect first, so a single-select combobox doesn't see two selections at once
+        options.forEach((option, i) => { if (i !== index)
+            option.selected = false; });
+        if (options[index])
+            options[index].selected = true;
+    }
+    // `options[i] = option`, as specified for HTMLOptionsCollection: null removes the option at i;
+    // past the end, pads with blank options; otherwise replaces the option at i in place (inside its
+    // optgroup, if any). Chrome's native implementation diverges there: it moves the new option out
+    // of the optgroup, or throws when the next option is in one.
+    #setIndexed(index, value) {
+        if (value == null) {
+            this.remove(index);
+            return;
+        }
+        if (!(value instanceof HTMLComboboxOptionElement) && !(value instanceof Element && value.localName === 'box-option')) {
+            throw new TypeError(`Failed to set an indexed property on 'HTMLOptionsCollection': The provided value is not a <box-option>.`);
+        }
+        const length = this.length;
+        if (index >= length) {
+            source(this).container().append(...HTMLComboboxOptionsCollection.#blankOptions(index - length), value);
+            return;
+        }
+        const current = this.item(index);
+        if (current !== value)
+            current.parentNode.replaceChild(value, current);
+    }
+    static #blankOptions(count) {
+        return Array.from({ length: count }, () => document.createElement('box-option'));
+    }
+}

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

@@ -1,35 +1,59 @@
+/**
+ * A selected value shown inside `<combo-box>`. The tags are exposed as a list of items,
+ * each with a "Remove …" button when the combobox is `clearable` or `multiple`.
+ */
 export class HTMLComboboxTagElement extends HTMLElement {
     static EventInit = { bubbles: true, cancelable: true, composed: true };
+    #internals;
+    constructor() {
+        super();
+        this.#internals = this.attachInternals();
+        this.#internals.role = 'listitem';
+    }
     get value() {
         return this.getAttribute('value') || '';
     }
+    get #control() {
+        return this.querySelector('[part*="clear-tag"]');
+    }
     connectedCallback() {
         this.part.add('tag');
-        const control = this.querySelector('[part*="clear-tag"]');
-        if (!this.hasAttribute('visible')) {
-            super.setAttribute('tabindex', '0');
+        const control = this.#control;
+        if (control && !(control instanceof HTMLButtonElement)) {
+            // A non-native button (e.g. <div part="clear-tag">) needs the button semantics and focusability added
+            if (!control.hasAttribute('role'))
+                control.setAttribute('role', 'button');
+            if (!control.hasAttribute('tabindex'))
+                control.setAttribute('tabindex', '0');
         }
-        control?.addEventListener('focusout', HTMLComboboxTagElement.captureFocus);
         control?.addEventListener('click', HTMLComboboxTagElement.onClearTag);
+        control?.addEventListener('keydown', HTMLComboboxTagElement.onControlKeyDown);
         const root = this.getRootNode();
-        if (root?.host.hasAttribute('multiple')) {
+        if (root?.host?.hasAttribute('multiple')) {
             if (!control) {
                 throw new Error(`A <button> with part="clear-tag" is required for <combo-box> with multiple attribute`);
             }
         }
     }
     disconnectedCallback() {
-        const control = this.querySelector('[part*="clear-tag"]');
-        control?.removeEventListener('focusout', HTMLComboboxTagElement.captureFocus);
+        const control = this.#control;
         control?.removeEventListener('click', HTMLComboboxTagElement.onClearTag);
+        control?.removeEventListener('keydown', HTMLComboboxTagElement.onControlKeyDown);
     }
     static onClearTag(event) {
-        const target = event.target;
-        target?.parentElement?.dispatchEvent(new Event('tagcleared', HTMLComboboxTagElement.EventInit));
+        const control = event.currentTarget;
+        control?.closest('box-tag')?.dispatchEvent(new Event('tagcleared', HTMLComboboxTagElement.EventInit));
     }
-    static captureFocus(event) {
-        event.stopPropagation();
-        event.preventDefault();
+    // role="button" on a non-<button> doesn't give it keyboard activation, add it.
+    static onControlKeyDown(event) {
+        const control = event.currentTarget;
+        if (control instanceof HTMLButtonElement)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            event.stopPropagation();
+            control.click();
+        }
     }
 }
 if (!window.customElements.get('box-tag')) {

package/dist/esm/combobox/index.js

@@ -1 +1,2 @@
 export * from './HTML.combobox.element.js';
+export * from './HTML.combobox.options.collection.js';

package/dist/esm/playwright.js

@@ -0,0 +1,123 @@
+/**
+ * Makes Playwright's `selectOption()`, `toHaveValue()` and `toHaveValues()` work on `<combo-box>`
+ * as they do on `<select>`.
+ *
+ * Why it's needed: Playwright runs its page-side code in an isolated JavaScript world. That world
+ * shares the DOM with the page, but not the page's JavaScript: the `<combo-box>` class (its
+ * `options`, `value`, `multiple`, …) doesn't exist there, so Playwright sees a plain element and
+ * refuses it ("Element is not a <select> element").
+ *
+ * What it does: Playwright's custom selector engines registered with `contentScript: true` are
+ * evaluated in that isolated world. This "engine" selects nothing; evaluating it teaches the
+ * isolated world the `<select>` API of `<combo-box>`/`<box-option>`, implemented through the DOM
+ * only (attributes, shadow root). `<combo-box>` reacts to `selected` attributes changed from any
+ * world, so this drives the real component.
+ *
+ * It never touches the page's own world, so the application under test sees no difference.
+ *
+ * @example
+ * // fixtures.ts
+ * import { test as base } from '@playwright/test';
+ * import { registerCombobox } from 'html-combobox-element/playwright';
+ *
+ * export const test = base.extend<{}, { combobox: void }>({
+ *   combobox: [async ({ playwright }, use) => {
+ *     await registerCombobox(playwright.selectors);
+ *     await use();
+ *   }, { scope: 'worker', auto: true }],
+ * });
+ *
+ * // in a test
+ * await page.getByLabel('Fruit').selectOption('banana');
+ * await expect(page.getByLabel('Fruit')).toHaveValue('banana');
+ */
+/** Name under which the engine is registered by default */
+export const COMBOBOX_ENGINE_NAME = 'combobox-select-api';
+// Evaluated inside Playwright's isolated world: must be self-contained (it's sent as source text).
+function installComboboxSelectApi() {
+    const engine = { query: () => null, queryAll: () => [] };
+    // Playwright evaluates engines in the page's own world too: never patch there. Unlike the page,
+    // Chrome's isolated worlds have no custom element registry.
+    if (globalThis.customElements)
+        return engine;
+    const marker = Symbol.for('html-combobox-element/playwright');
+    if (globalThis[marker])
+        return engine;
+    globalThis[marker] = true;
+    const isCombobox = (el) => !!el && el.localName === 'combo-box';
+    const isOption = (el) => !!el && el.localName === 'box-option';
+    const text = (option) => (option.textContent || '').replace(/[\t\n\f\r ]+/g, ' ').trim();
+    // Same rules as HTMLComboboxOptionElement (and <option>)
+    const optionValue = (option) => option.getAttribute('value') ?? text(option);
+    const optionLabel = (option) => option.getAttribute('label') ?? text(option);
+    const optionsOf = (combobox) => Array.from(combobox.shadowRoot?.querySelectorAll('box-option') ?? []);
+    // Playwright checks `nodeName === 'SELECT'` before using the <select> API
+    const nodeName = Object.getOwnPropertyDescriptor(Node.prototype, 'nodeName');
+    Object.defineProperty(Node.prototype, 'nodeName', {
+        configurable: true,
+        get() { return isCombobox(this) ? 'SELECT' : nodeName.get.call(this); },
+    });
+    // On HTMLElement.prototype, so elements with their own native property (<select>, <input>,
+    // <option>, …) are unaffected; for every other element the getters return undefined as before.
+    Object.defineProperties(HTMLElement.prototype, {
+        options: {
+            configurable: true,
+            get() { return isCombobox(this) ? optionsOf(this) : undefined; },
+        },
+        selectedOptions: {
+            configurable: true,
+            get() { return isCombobox(this) ? optionsOf(this).filter((o) => o.hasAttribute('selected')) : undefined; },
+        },
+        multiple: {
+            configurable: true,
+            get() { return isCombobox(this) ? this.hasAttribute('multiple') : undefined; },
+        },
+        // For getByLabel(): <label for> / wrapping <label> (label.control is native, so it works here)
+        labels: {
+            configurable: true,
+            get() {
+                if (!isCombobox(this))
+                    return undefined;
+                return Array.from(this.ownerDocument.querySelectorAll('label')).filter((label) => label.control === this);
+            },
+        },
+        label: {
+            configurable: true,
+            get() { return isOption(this) ? optionLabel(this) : undefined; },
+        },
+        selected: {
+            configurable: true,
+            get() { return isOption(this) ? this.hasAttribute('selected') : undefined; },
+            set(value) { if (isOption(this))
+                this.toggleAttribute('selected', !!value); },
+        },
+        value: {
+            configurable: true,
+            get() {
+                if (isOption(this))
+                    return optionValue(this);
+                if (isCombobox(this))
+                    return optionsOf(this).filter((o) => o.hasAttribute('selected')).map(optionValue).join(',');
+                return undefined;
+            },
+            // Like combobox.value = x: null/undefined clear, comma-separated values select several
+            set(value) {
+                if (!isCombobox(this))
+                    return;
+                const values = value == null ? [] : String(value).split(',');
+                for (const option of optionsOf(this))
+                    option.toggleAttribute('selected', values.includes(optionValue(option)));
+            },
+        },
+    });
+    return engine;
+}
+/** Source of the selector engine, for `selectors.register(name, source, { contentScript: true })` */
+export const comboboxSelectorEngine = `(${installComboboxSelectApi.toString()})()`;
+/**
+ * Registers the engine. Call it once per worker, before any page is created
+ * (Playwright requires selector engines to be registered before pages exist).
+ */
+export function registerCombobox(selectors, name = COMBOBOX_ENGINE_NAME) {
+    return selectors.register(name, comboboxSelectorEngine, { contentScript: true });
+}

package/dist/esm/tsconfig.esm.tsbuildinfo

@@ -1 +1 @@
-{"root":["../../src/index.ts","../../src/combobox/boolean.attribute.value.normalizer.ts","../../src/combobox/combobox.markup.ts","../../src/combobox/html.combobox.element.ts","../../src/combobox/html.combobox.option.element.ts","../../src/combobox/html.combobox.tag.element.ts","../../src/combobox/index.ts"],"version":"5.9.3"}
+{"root":["../../src/index.ts","../../src/playwright.ts","../../src/combobox/boolean.attribute.value.normalizer.ts","../../src/combobox/combobox.markup.ts","../../src/combobox/html.combobox.element.ts","../../src/combobox/html.combobox.option.element.ts","../../src/combobox/html.combobox.options.collection.ts","../../src/combobox/html.combobox.tag.element.ts","../../src/combobox/index.ts"],"version":"5.9.3"}

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

@@ -2,6 +2,13 @@ import { HTMLComboboxTagElement } from './HTML.combobox.tag.element.js';
 import { HTMLComboboxOptionElement } from './HTML.combobox.option.element.js';
 export declare class ComboboxMarkup {
     #private;
+    /** Texts used only by assistive technology. Override them to localize, e.g. `HTMLComboboxElement.strings.clearAll = 'Очистить'` */
+    static strings: {
+        /** Accessible name of the clear-all button */
+        clearAll: string;
+        /** Accessible name prefix of a tag's clear button: "Remove Banana" */
+        removeTag: string;
+    };
     tagsContainer: HTMLDivElement | null;
     optionsContainer: HTMLDivElement | null;
     clearAllButton: HTMLButtonElement | null;
@@ -9,16 +16,30 @@ export declare class ComboboxMarkup {
     placeholder: HTMLDivElement | null;
     searchInput: HTMLInputElement | null;
     tagTemplate: HTMLComboboxTagElement | null;
+    internal: HTMLDivElement | null;
+    valueText: HTMLSpanElement | null;
+    /** Set by the host when it (or its fieldset) is disabled. */
+    disabled: boolean;
     constructor(shadowRoot: ShadowRoot, internals: ElementInternals);
     connect(): void;
     onHostConnected(): void;
     disconnect(): void;
     setPlaceholder(value: string): void;
     setInputValue(value: string): void;
-    onClearAllFocusOut: (event: FocusEvent) => void;
+    /** The combobox value exposed to assistive technology is the text of the selected tags. */
+    syncValueText: () => void;
+    tagLabel(tag: HTMLComboboxTagElement): string;
+    static optionLabel(option: HTMLComboboxOptionElement): string;
     onClickOutside: (ev: MouseEvent) => void;
     sort(query: string): void;
     get options(): NodeListOf<HTMLComboboxOptionElement>;
+    /** Options reachable with the keyboard: not disabled (itself or by its optgroup) and not filtered out. */
+    get navigableOptions(): HTMLComboboxOptionElement[];
+    static isOptionDisabled(option: HTMLComboboxOptionElement): boolean;
+    get hasSearch(): boolean;
+    get expanded(): boolean;
+    /** Moves focus to the host without reopening the popup. */
+    focusHost(): void;
     getTagControl(tag: HTMLComboboxTagElement): HTMLButtonElement;
     setDropdownPosition(): void;
     showDropdown(): void;