html-combobox-element 0.0.5 → 0.0.6

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

@@ -1,24 +1,45 @@
+/**
+ * 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 declare class HTMLComboboxOptionElement extends HTMLElement {
     #private;
     static OWN_IDL: Set<string>;
+    static observedAttributes: string[];
     static EventInit: {
         bubbles: boolean;
         cancelable: boolean;
         composed: boolean;
     };
-    static captureFocus(event: FocusEvent): void;
-    static onNavigate(event: KeyboardEvent): void;
+    constructor();
     connectedCallback(): void;
-    disconnectedCallback(): void;
+    /** Like <option>: the value attribute, or the text when there is none */
     get value(): string;
     set value(value: string);
+    /** Like <option>: the label attribute when present, otherwise the text */
     get label(): string;
     set label(value: string);
+    /** Like <option>: the text content with whitespace stripped and collapsed */
+    get text(): string;
+    set text(value: string);
     get selected(): boolean;
     set selected(value: boolean);
     get disabled(): boolean;
     set disabled(value: boolean);
+    attributeChangedCallback(name: 'selected' | 'disabled', _oldValue: string | null, newValue: string | null): void;
     setAttribute(name: string, value: string): void;
     removeAttribute(name: string): void;
-    toggleAttribute(name: string, force?: boolean): boolean;
 }

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

@@ -3,102 +3,140 @@ var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HTMLComboboxOptionElement = void 0;
 const Boolean_attribute_value_normalizer_js_1 = require("./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.
+ */
 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 };
-    // The browser only knows what `selected` means on a native <option>; here the state reaches assistive tech through internals.
-    #internals = this.attachInternals();
-    static captureFocus(event) {
-        if (event.relatedTarget && event.relatedTarget instanceof _a) {
-            event.stopPropagation();
-            event.preventDefault();
-        }
-    }
-    static onNavigate(event) {
-        if (!event.target ||
-            !(event.target instanceof _a) ||
-            event.key === 'Tab' ||
-            event.key === 'Enter')
-            return;
-        event.preventDefault();
-        if (event.key === 'ArrowDown') {
-            const next = event.target.nextElementSibling;
-            if (next && next instanceof _a) {
-                next.focus();
-            }
-        }
-        if (event.key === 'ArrowUp') {
-            const prev = event.target.previousElementSibling;
-            if (prev && prev instanceof _a) {
-                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', _a.onNavigate);
-        this.addEventListener('focusout', _a.captureFocus);
-        this.addEventListener('click', this.#toggleSelection);
         this.#initialAttributesSynchronization();
         this.part.add('option');
-        super.setAttribute('tabindex', "0");
-        super.setAttribute('role', "option");
-        this.#internals.ariaSelected = String(this.selected);
-        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', _a.EventInit));
     }
-    disconnectedCallback() {
-        this.removeEventListener('click', this.#toggleSelection);
-        this.removeEventListener('keydown', _a.onNavigate);
-        this.removeEventListener('focusout', _a.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 = (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value);
-        if (prev === force) {
-            return;
-        }
-        super.toggleAttribute('selected', force);
-        this.part.toggle('selected', force);
-        this.#internals.ariaSelected = String(force);
-        // console.log('this.isConnected', this.isConnected)
-        if (this.isConnected) {
-            this.dispatchEvent(new Event('optionselectedstatechange', _a.EventInit));
-        }
+        super.toggleAttribute('selected', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
     }
     get disabled() {
         return this.hasAttribute('disabled');
     }
     set disabled(value) {
-        const force = (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value);
-        super.toggleAttribute('disabled', force);
-        this.part.toggle('disabled', force);
-        super.toggleAttribute('inert', force);
+        super.toggleAttribute('disabled', (0, Boolean_attribute_value_normalizer_js_1.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 && !(0, Boolean_attribute_value_normalizer_js_1.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', _a.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 _a.OWN_IDL) {
@@ -114,21 +152,14 @@ class HTMLComboboxOptionElement extends HTMLElement {
         }
     }
     removeAttribute(name) {
-        if (_a.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) {
-        const result = super.toggleAttribute(name, force);
-        if (name === 'selected') {
-            this.part.toggle(name, result);
-            this.#internals.ariaSelected = String(result);
-        }
-        return result;
-    }
 }
 exports.HTMLComboboxOptionElement = HTMLComboboxOptionElement;
 _a = HTMLComboboxOptionElement;

package/dist/cjs/combobox/HTML.combobox.options.collection.d.ts

@@ -0,0 +1,37 @@
+import { HTMLComboboxOptionElement } from './HTML.combobox.option.element.js';
+interface CollectionSource {
+    /** The listbox the options live in (inside the combobox shadow root) */
+    container: () => HTMLElement;
+    /** Live list of the options, in tree order (optgroup children included) */
+    options: () => NodeListOf<HTMLComboboxOptionElement>;
+}
+/**
+ * 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 declare class HTMLComboboxOptionsCollection {
+    #private;
+    [index: number]: HTMLComboboxOptionElement;
+    constructor(source: CollectionSource);
+    get [Symbol.toStringTag](): string;
+    [Symbol.iterator](): IterableIterator<HTMLComboboxOptionElement>;
+    get length(): number;
+    /** Like `select.options.length = n`: appends blank options, or removes the last ones. */
+    set length(value: number);
+    item(index: number): HTMLComboboxOptionElement | null;
+    /** The first option whose `id` or `name` attribute is `name` */
+    namedItem(name: string): HTMLComboboxOptionElement | 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: HTMLComboboxOptionElement | HTMLOptGroupElement, before?: HTMLElement | number | null): void;
+    /** Removes the option at `index` (does nothing when out of range) */
+    remove(index: number): void;
+    /** Index of the first selected option, or -1. Setting it selects only that option. */
+    get selectedIndex(): number;
+    set selectedIndex(value: number);
+}
+export {};

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

@@ -0,0 +1,176 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HTMLComboboxOptionsCollection = void 0;
+const HTML_combobox_option_element_js_1 = require("./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.
+ */
+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(..._a.#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 HTML_combobox_option_element_js_1.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 HTML_combobox_option_element_js_1.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(..._a.#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'));
+    }
+}
+exports.HTMLComboboxOptionsCollection = HTMLComboboxOptionsCollection;
+_a = HTMLComboboxOptionsCollection;

package/dist/cjs/combobox/HTML.combobox.tag.element.d.ts

@@ -1,12 +1,18 @@
+/**
+ * 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 declare class HTMLComboboxTagElement extends HTMLElement {
+    #private;
     static EventInit: {
         bubbles: boolean;
         cancelable: boolean;
         composed: boolean;
     };
+    constructor();
     get value(): string;
     connectedCallback(): void;
     disconnectedCallback(): void;
     static onClearTag(event: Event): void;
-    static captureFocus(event: Event): void;
+    static onControlKeyDown(event: KeyboardEvent): void;
 }

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

@@ -1,38 +1,62 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HTMLComboboxTagElement = void 0;
+/**
+ * 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`.
+ */
 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();
+        }
     }
 }
 exports.HTMLComboboxTagElement = HTMLComboboxTagElement;

package/dist/cjs/combobox/index.d.ts

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

package/dist/cjs/combobox/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./HTML.combobox.element.js"), exports);
+__exportStar(require("./HTML.combobox.options.collection.js"), exports);

package/dist/cjs/playwright.d.ts

@@ -0,0 +1,48 @@
+/**
+ * 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');
+ */
+/** The part of Playwright's `Selectors` this module uses (no dependency on Playwright) */
+export interface SelectorsLike {
+    register(name: string, script: string, options?: {
+        contentScript?: boolean;
+    }): Promise<void>;
+}
+/** Name under which the engine is registered by default */
+export declare const COMBOBOX_ENGINE_NAME = "combobox-select-api";
+/** Source of the selector engine, for `selectors.register(name, source, { contentScript: true })` */
+export declare const comboboxSelectorEngine: string;
+/**
+ * Registers the engine. Call it once per worker, before any page is created
+ * (Playwright requires selector engines to be registered before pages exist).
+ */
+export declare function registerCombobox(selectors: SelectorsLike, name?: string): Promise<void>;