html-combobox-element 0.0.3 → 0.0.5

package/dist/cjs/combobox/Boolean.attribute.value.normalizer.d.ts

@@ -0,0 +1,2 @@
+/** Transform invalid (nullish or stringed) values to correct boolean value */
+export declare function toBoolean(value: any): boolean;

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

@@ -0,0 +1,35 @@
+import { HTMLComboboxTagElement } from './HTML.combobox.tag.element.js';
+import { HTMLComboboxOptionElement } from './HTML.combobox.option.element.js';
+export declare class ComboboxMarkup {
+    #private;
+    tagsContainer: HTMLDivElement | null;
+    optionsContainer: HTMLDivElement | null;
+    clearAllButton: HTMLButtonElement | null;
+    dropdown: HTMLDivElement | null;
+    placeholder: HTMLDivElement | null;
+    searchInput: HTMLInputElement | null;
+    tagTemplate: HTMLComboboxTagElement | null;
+    constructor(shadowRoot: ShadowRoot, internals: ElementInternals);
+    connect(): void;
+    onHostConnected(): void;
+    disconnect(): void;
+    setPlaceholder(value: string): void;
+    setInputValue(value: string): void;
+    onClearAllFocusOut: (event: FocusEvent) => void;
+    onClickOutside: (ev: MouseEvent) => void;
+    sort(query: string): void;
+    get options(): NodeListOf<HTMLComboboxOptionElement>;
+    getTagControl(tag: HTMLComboboxTagElement): HTMLButtonElement;
+    setDropdownPosition(): void;
+    showDropdown(): void;
+    onFocusIn: () => void;
+    closeDropdown(): void;
+    onFocusOut: () => void;
+    createAndAppendTag(option: HTMLComboboxOptionElement): HTMLButtonElement;
+    getTagByValue(value: string): HTMLComboboxTagElement;
+    getOptionByValue(value: string): HTMLComboboxOptionElement;
+    get selectedOptions(): NodeListOf<HTMLComboboxOptionElement>;
+    static importCSS(urls: string[]): void;
+    static template: string;
+    static markup: HTMLTemplateElement;
+}

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

@@ -425,7 +425,7 @@ ${urls.map(url => `@import "${url}";`)}
 
 <div id="dropdown" popover="manual" part='dropdown' >
   <input placeholder='Поиск' name="search-input" part="search-input" inputmode='search' autofocus />
-  <div part="options" id='options'></div>
+  <div part="options" id='options' role="listbox"></div>
 </div>
 
 <template id='tag-template'>

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

@@ -0,0 +1,60 @@
+import { HTMLComboboxOptionElement } from './HTML.combobox.option.element.js';
+export declare class HTMLComboboxElement extends HTMLElement {
+    #private;
+    static OWN_IDL: Set<string>;
+    static observerOptions: {
+        childList: boolean;
+    };
+    static styleSheet: CSSStyleSheet[];
+    static formAssociated: boolean;
+    shadowRoot: ShadowRoot;
+    constructor();
+    connectedCallback(): void;
+    insertBefore: <T extends Node>(node: T, referenceNode: Node | null) => T;
+    appendChild: <T extends Node>(node: T) => T;
+    append: (...nodes: (Node | string)[]) => void;
+    prepend: (...nodes: (Node | string)[]) => void;
+    replaceChildren: (...nodes: (Node | string)[]) => void;
+    removeChild: <T extends Node>(child: T) => T;
+    replaceChild: <T extends Node>(newChild: Node, oldChild: T) => T;
+    get changed(): boolean;
+    disconnectedCallback(): void;
+    formResetCallback(): void;
+    formDisabledCallback(): void;
+    get valueAsArray(): string[];
+    get query(): string;
+    set query(value: string);
+    get placeholder(): string;
+    set placeholder(value: string);
+    get clearable(): boolean;
+    set clearable(value: boolean);
+    get filterable(): boolean;
+    set filterable(value: boolean);
+    get searchable(): boolean;
+    set searchable(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get form(): HTMLFormElement;
+    get labels(): NodeList;
+    get length(): number;
+    get multiple(): boolean;
+    set multiple(value: boolean);
+    get required(): boolean;
+    set required(value: boolean);
+    get selectedOptions(): NodeListOf<HTMLComboboxOptionElement>;
+    get type(): "select-multiple" | "select-one";
+    get validationMessage(): string;
+    get validity(): ValidityState;
+    get willValidate(): boolean;
+    get value(): string;
+    set value(value: string);
+    checkValidity(): void;
+    item(index: number): HTMLComboboxOptionElement;
+    reportValidity(): void;
+    setCustomValidity(message: string): void;
+    showPicker(): void;
+    setAttribute(name: string, value: any): void;
+    removeAttribute(name: string): void;
+    static loadCssFromUrls(urls: string[]): void;
+    static loadCssFromDocumentStyleSheets(): void;
+}

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

@@ -21,13 +21,13 @@ class HTMLComboboxElement extends HTMLElement {
         super();
         this.#internals = this.attachInternals();
         this.#internals.role = "combobox";
-        this.#internals.ariaHasPopup = "dialog";
         this.shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: true }); //delegatesFocus: true
         this.#markup = new Combobox_markup_js_1.ComboboxMarkup(this.shadowRoot, this.#internals);
         this.shadowRoot.appendChild(Combobox_markup_js_1.ComboboxMarkup.markup.content.cloneNode(true));
         this.shadowRoot.adoptedStyleSheets = _a.styleSheet;
         this.#observer = new MutationObserver(this.#onOptionsChanges);
         this.#markup.connect();
+        this.#syncPopupSemantics();
     }
     // Lifecycle callbacks
     connectedCallback() {
@@ -184,12 +184,14 @@ class HTMLComboboxElement extends HTMLElement {
     }
     set filterable(value) {
         super.toggleAttribute('filterable', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
+        this.#syncPopupSemantics();
     }
     get searchable() {
         return this.hasAttribute('searchable');
     }
     set searchable(value) {
         super.toggleAttribute('searchable', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
+        this.#syncPopupSemantics();
     }
     // <select> specific properties (implements HTMLSelectElement)
     get disabled() {
@@ -215,6 +217,7 @@ class HTMLComboboxElement extends HTMLElement {
     }
     set multiple(value) {
         super.toggleAttribute('multiple', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
+        this.#syncPopupSemantics();
     }
     // get options
     // (there is no constructor of HTMLOptionsCollection, need to implement)
@@ -400,6 +403,7 @@ class HTMLComboboxElement extends HTMLElement {
         if (state === oldState)
             return;
         if (state === 'open') {
+            this.#syncPopupSemantics();
             this.#prevValue = this.value;
             this.#changed = true;
         }
@@ -454,6 +458,26 @@ class HTMLComboboxElement extends HTMLElement {
             this.#markup.sort(this.#markup.searchInput?.value || '');
         }
     };
+    // Without a search field the popup is just the listbox. With one, it is a dialog holding the field and the listbox.
+    #syncPopupSemantics() {
+        const withSearch = this.searchable || this.filterable;
+        this.#internals.ariaHasPopup = withSearch ? 'dialog' : 'listbox';
+        if (withSearch) {
+            this.#markup?.dropdown?.setAttribute('role', 'dialog');
+        }
+        else {
+            this.#markup?.dropdown?.removeAttribute('role');
+        }
+        this.#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(' ');
+        for (const popup of [this.#markup?.dropdown, this.#markup?.optionsContainer]) {
+            if (name && popup?.hasAttribute('role'))
+                popup.setAttribute('aria-label', name);
+            else
+                popup?.removeAttribute('aria-label');
+        }
+    }
     #setValidityAndFormValue() {
         this.#markup.clearAllButton?.toggleAttribute('disabled', !Boolean(this.#values.size));
         let empty = false;

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

@@ -0,0 +1,24 @@
+export declare class HTMLComboboxOptionElement extends HTMLElement {
+    #private;
+    static OWN_IDL: Set<string>;
+    static EventInit: {
+        bubbles: boolean;
+        cancelable: boolean;
+        composed: boolean;
+    };
+    static captureFocus(event: FocusEvent): void;
+    static onNavigate(event: KeyboardEvent): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    get value(): string;
+    set value(value: string);
+    get label(): string;
+    set label(value: string);
+    get selected(): boolean;
+    set selected(value: boolean);
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    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

@@ -6,6 +6,8 @@ const Boolean_attribute_value_normalizer_js_1 = require("./Boolean.attribute.val
 class HTMLComboboxOptionElement extends HTMLElement {
     static OWN_IDL = new Set(['value', 'label', '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();
@@ -40,6 +42,7 @@ class HTMLComboboxOptionElement extends HTMLElement {
         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;
         if (!this.textContent)
@@ -82,6 +85,7 @@ class HTMLComboboxOptionElement extends HTMLElement {
         }
         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));
@@ -118,9 +122,12 @@ class HTMLComboboxOptionElement extends HTMLElement {
         }
     }
     toggleAttribute(name, force) {
-        if (name === 'selected')
-            this.part.toggle(name, force);
-        return super.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;

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

@@ -0,0 +1,12 @@
+export declare class HTMLComboboxTagElement extends HTMLElement {
+    static EventInit: {
+        bubbles: boolean;
+        cancelable: boolean;
+        composed: boolean;
+    };
+    get value(): string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static onClearTag(event: Event): void;
+    static captureFocus(event: Event): void;
+}

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

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

package/dist/cjs/index.d.ts

@@ -0,0 +1,253 @@
+export * from './combobox/index.js';
+interface HTMLComboboxTagElement extends HTMLElement {
+}
+interface HTMLComboboxOptionElement extends HTMLOptionElement {
+    value: string;
+    label: string;
+}
+interface HTMLComboboxElement extends HTMLSelectElement {
+    /** List of selected options value attribute */
+    valueAsArray: string[];
+    multiple: boolean;
+    /** The value of internal input
+     *
+     * Internal input is visible when either "searchable" or "filterable" attribute is presented */
+    query: string;
+    /** The placeholder of internal input
+     *
+     * Internal input is visible when either "searchable" or "filterable" attribute is presented
+     *
+     * When <combo-box> is empty, this value is also shown as <combo-box> placeholder itself
+     * */
+    placeholder: string;
+    /** When is true, the clear-all-button is shown in the <combo-box> itself,
+     * and the clear-button is shown for each selected tag.
+     *
+     * If multiple attribute is set to "true", this is also enabled.
+     *
+     * If multiple attribute is set to "false", i.e. the <combo-box> is used as a <select>,
+     * then setting this attribute to "true" will make the clear-button of selected tag visible
+     * */
+    clearable: boolean;
+    /** When is true, the internal input is shown.
+     *
+     * When user type something, available options are not filtered by this query.
+     * You have to set an "input" listener to the <combo-box> and filter options by yourself
+     *
+     * Setting both "searchable" and "filterable" make no sense, the "searchable" will have priority
+     * */
+    searchable: boolean;
+    /** When is true, the internal input is shown.
+     *
+     * When user type something, available options are filtered by this query.
+     *
+     * Setting both "filterable" and "searchable" make no sense, the "searchable" will have priority
+     * */
+    filterable: boolean;
+    selectedOptions: HTMLCollectionOf<HTMLComboboxOptionElement>;
+    addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLComboboxElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+    addEventListener<K extends keyof ComboboxEventMap>(type: K, listener: (this: HTMLComboboxElement, ev: ComboboxEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLComboboxElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+    removeEventListener<K extends keyof ComboboxEventMap>(type: K, listener: (this: HTMLComboboxElement, ev: ComboboxEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+interface ComboboxEventMap extends HTMLElementEventMap {
+    "change": ComboboxEvent;
+    "blur": ComboboxFocusEvent;
+    "focus": ComboboxFocusEvent;
+    "focusin": ComboboxFocusEvent;
+    "focusout": ComboboxFocusEvent;
+    "input": ComboboxInputEvent;
+    "invalid": ComboboxEvent;
+    "selectionchange": ComboboxEvent;
+    "selectstart": ComboboxEvent;
+}
+/** Own attributes/properties of `<combo-box>`, shared by every JSX integration below. */
+export interface ComboboxJsxAttributes {
+    /** The value of the internal input.
+     *
+     * The internal input is visible when either the `searchable` or `filterable` attribute is present.
+     *
+     * Setting ""
+     * */
+    query?: string;
+    /** A comma-separated list of descendant `<box-option>` value attributes to be selected by default.
+     *
+     * When the `multiple` attribute is present, only the first option will be selected.
+     *
+     * Alternatively, you can set default selections by adding the `selected` attribute directly to individual `<box-option>` elements. */
+    value?: string;
+    /** This Boolean attribute indicates that multiple options can be selected.
+     *
+     * When present, users can select multiple options. When absent, only one option can be selected at a time (the `<combo-box>` behaves like a `<select>`). */
+    multiple?: boolean;
+    /** The placeholder for the internal input.
+     *
+     * The internal input is visible when either the `searchable` or `filterable` attribute is present.
+     *
+     * When the `<combo-box>` is empty, this value is also shown as the `<combo-box>` placeholder itself. */
+    placeholder?: string;
+    /** When present, the clear-all button is shown in the `<combo-box>` itself, and the clear button is shown for each selected tag.
+     *
+     * This attribute is automatically enabled when the `multiple` attribute is present.
+     *
+     * When the `multiple` attribute is absent (single-select mode), setting `clearable` makes the clear button visible on the selected tag. */
+    clearable?: boolean;
+    /** When present, the internal input is shown.
+     *
+     * As the user types, available options are **not** filtered by the query. You must attach an `input` listener to the `<combo-box>` and filter options manually.
+     *
+     * Setting both `searchable` and `filterable` is not recommended—`searchable` takes precedence. */
+    searchable?: boolean;
+    /** When present, the internal input is shown.
+     *
+     * As the user types, available options are filtered by the query automatically.
+     *
+     * Setting both `filterable` and `searchable` is not recommended—`searchable` takes precedence. */
+    filterable?: boolean;
+    /** A Boolean attribute indicating that at least one option must be selected. */
+    required?: boolean;
+    disabled?: boolean;
+}
+export interface ComboboxOptionJsxAttributes {
+    value: string;
+    label?: string;
+    selected?: boolean;
+}
+/**
+ * Generic HTML/JSX passthrough attributes (class, style, event handlers, `data-*`, `aria-*`, ...).
+ *
+ * These are intentionally framework-agnostic: they don't reference React's, Preact's, Vue's
+ * or Solid's own type packages, so this file never requires any of them to be installed just
+ * to be imported. Every framework below layers `ComboboxJsxAttributes`/`ComboboxOptionJsxAttributes`
+ * on top of this instead of that framework's own `HTMLAttributes` type.
+ */
+export interface ComboboxCommonAttributes {
+    id?: string;
+    class?: string;
+    className?: string;
+    style?: unknown;
+    slot?: string;
+    title?: string;
+    tabIndex?: number;
+    hidden?: boolean;
+    children?: unknown;
+    ref?: unknown;
+    key?: string | number;
+    onChange?: (event: ComboboxEvent) => void;
+    onInput?: (event: ComboboxInputEvent) => void;
+    onFocus?: (event: ComboboxFocusEvent) => void;
+    onBlur?: (event: ComboboxFocusEvent) => void;
+    onInvalid?: (event: ComboboxEvent) => void;
+    [key: `data-${string}`]: unknown;
+    [key: `aria-${string}`]: unknown;
+    [key: `on${string}`]: ((event: any) => void) | undefined;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'combo-box': HTMLComboboxElement;
+        'box-option': HTMLComboboxOptionElement;
+        'box-tag': HTMLComboboxTagElement;
+    }
+    interface ComboboxEvent extends Event {
+        readonly target: HTMLComboboxElement;
+        readonly currentTarget: HTMLComboboxElement;
+    }
+    interface ComboboxInputEvent extends InputEvent {
+        readonly target: HTMLComboboxElement;
+        readonly currentTarget: HTMLComboboxElement;
+    }
+    interface ComboboxFocusEvent extends FocusEvent {
+        readonly target: HTMLComboboxElement;
+    }
+    type ComboboxElementAttributes = ComboboxCommonAttributes & ComboboxJsxAttributes;
+    type ComboboxOptionElementAttributes = ComboboxCommonAttributes & ComboboxOptionJsxAttributes;
+    type ComboboxTagElementAttributes = ComboboxCommonAttributes;
+    namespace JSX {
+        interface IntrinsicElements {
+            'combo-box': ComboboxElementAttributes;
+            'box-option': ComboboxOptionElementAttributes;
+            'box-tag': ComboboxTagElementAttributes;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'combo-box': ComboboxElementAttributes;
+            'box-option': ComboboxOptionElementAttributes;
+            'box-tag': ComboboxTagElementAttributes;
+        }
+    }
+}
+declare module 'react/jsx-runtime' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'combo-box': ComboboxElementAttributes;
+            'box-option': ComboboxOptionElementAttributes;
+            'box-tag': ComboboxTagElementAttributes;
+        }
+    }
+}
+declare module 'react/jsx-dev-runtime' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'combo-box': ComboboxElementAttributes;
+            'box-option': ComboboxOptionElementAttributes;
+            'box-tag': ComboboxTagElementAttributes;
+        }
+    }
+}
+declare module 'preact' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'combo-box': ComboboxElementAttributes;
+            'box-option': ComboboxOptionElementAttributes;
+            'box-tag': ComboboxTagElementAttributes;
+        }
+    }
+    namespace JSXInternal {
+        interface IntrinsicElements {
+            'combo-box': ComboboxElementAttributes;
+            'box-option': ComboboxOptionElementAttributes;
+            'box-tag': ComboboxTagElementAttributes;
+        }
+    }
+}
+declare module 'preact/jsx-runtime' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'combo-box': ComboboxElementAttributes;
+            'box-option': ComboboxOptionElementAttributes;
+            'box-tag': ComboboxTagElementAttributes;
+        }
+    }
+}
+declare module 'solid-js' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'combo-box': ComboboxElementAttributes;
+            'box-option': ComboboxOptionElementAttributes;
+            'box-tag': ComboboxTagElementAttributes;
+        }
+    }
+}
+declare module 'solid-js/jsx-runtime' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'combo-box': ComboboxElementAttributes;
+            'box-option': ComboboxOptionElementAttributes;
+            'box-tag': ComboboxTagElementAttributes;
+        }
+    }
+}
+declare module 'vue' {
+    namespace JSX {
+        interface IntrinsicElements {
+            'combo-box': ComboboxElementAttributes;
+            'box-option': ComboboxOptionElementAttributes;
+            'box-tag': ComboboxTagElementAttributes;
+        }
+    }
+}

package/dist/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

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

@@ -422,7 +422,7 @@ ${urls.map(url => `@import "${url}";`)}
 
 <div id="dropdown" popover="manual" part='dropdown' >
   <input placeholder='Поиск' name="search-input" part="search-input" inputmode='search' autofocus />
-  <div part="options" id='options'></div>
+  <div part="options" id='options' role="listbox"></div>
 </div>
 
 <template id='tag-template'>

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

@@ -17,13 +17,13 @@ export class HTMLComboboxElement extends HTMLElement {
         super();
         this.#internals = this.attachInternals();
         this.#internals.role = "combobox";
-        this.#internals.ariaHasPopup = "dialog";
         this.shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: true }); //delegatesFocus: true
         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();
     }
     // Lifecycle callbacks
     connectedCallback() {
@@ -180,12 +180,14 @@ export class HTMLComboboxElement extends HTMLElement {
     }
     set filterable(value) {
         super.toggleAttribute('filterable', toBoolean(value));
+        this.#syncPopupSemantics();
     }
     get searchable() {
         return this.hasAttribute('searchable');
     }
     set searchable(value) {
         super.toggleAttribute('searchable', toBoolean(value));
+        this.#syncPopupSemantics();
     }
     // <select> specific properties (implements HTMLSelectElement)
     get disabled() {
@@ -211,6 +213,7 @@ export class HTMLComboboxElement extends HTMLElement {
     }
     set multiple(value) {
         super.toggleAttribute('multiple', toBoolean(value));
+        this.#syncPopupSemantics();
     }
     // get options
     // (there is no constructor of HTMLOptionsCollection, need to implement)
@@ -396,6 +399,7 @@ export class HTMLComboboxElement extends HTMLElement {
         if (state === oldState)
             return;
         if (state === 'open') {
+            this.#syncPopupSemantics();
             this.#prevValue = this.value;
             this.#changed = true;
         }
@@ -450,6 +454,26 @@ export class HTMLComboboxElement extends HTMLElement {
             this.#markup.sort(this.#markup.searchInput?.value || '');
         }
     };
+    // Without a search field the popup is just the listbox. With one, it is a dialog holding the field and the listbox.
+    #syncPopupSemantics() {
+        const withSearch = this.searchable || this.filterable;
+        this.#internals.ariaHasPopup = withSearch ? 'dialog' : 'listbox';
+        if (withSearch) {
+            this.#markup?.dropdown?.setAttribute('role', 'dialog');
+        }
+        else {
+            this.#markup?.dropdown?.removeAttribute('role');
+        }
+        this.#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(' ');
+        for (const popup of [this.#markup?.dropdown, this.#markup?.optionsContainer]) {
+            if (name && popup?.hasAttribute('role'))
+                popup.setAttribute('aria-label', name);
+            else
+                popup?.removeAttribute('aria-label');
+        }
+    }
     #setValidityAndFormValue() {
         this.#markup.clearAllButton?.toggleAttribute('disabled', !Boolean(this.#values.size));
         let empty = false;

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

@@ -2,6 +2,8 @@ import { toBoolean } from './Boolean.attribute.value.normalizer.js';
 export class HTMLComboboxOptionElement extends HTMLElement {
     static OWN_IDL = new Set(['value', 'label', '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 HTMLComboboxOptionElement) {
             event.stopPropagation();
@@ -36,6 +38,7 @@ export class HTMLComboboxOptionElement extends HTMLElement {
         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;
         if (!this.textContent)
@@ -78,6 +81,7 @@ export class HTMLComboboxOptionElement extends HTMLElement {
         }
         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', HTMLComboboxOptionElement.EventInit));
@@ -114,9 +118,12 @@ export class HTMLComboboxOptionElement extends HTMLElement {
         }
     }
     toggleAttribute(name, force) {
-        if (name === 'selected')
-            this.part.toggle(name, force);
-        return super.toggleAttribute(name, force);
+        const result = super.toggleAttribute(name, force);
+        if (name === 'selected') {
+            this.part.toggle(name, result);
+            this.#internals.ariaSelected = String(result);
+        }
+        return result;
     }
 }
 if (!window.customElements.get('box-option')) {

package/dist/types/combobox/Boolean.attribute.value.normalizer.d.ts

@@ -1,3 +1,2 @@
 /** Transform invalid (nullish or stringed) values to correct boolean value */
 export declare function toBoolean(value: any): boolean;
-//# sourceMappingURL=Boolean.attribute.value.normalizer.d.ts.map

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

@@ -33,4 +33,3 @@ export declare class ComboboxMarkup {
     static template: string;
     static markup: HTMLTemplateElement;
 }
-//# sourceMappingURL=Combobox.markup.d.ts.map

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

@@ -58,4 +58,3 @@ export declare class HTMLComboboxElement extends HTMLElement {
     static loadCssFromUrls(urls: string[]): void;
     static loadCssFromDocumentStyleSheets(): void;
 }
-//# sourceMappingURL=HTML.combobox.element.d.ts.map

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

@@ -22,4 +22,3 @@ export declare class HTMLComboboxOptionElement extends HTMLElement {
     removeAttribute(name: string): void;
     toggleAttribute(name: string, force?: boolean): boolean;
 }
-//# sourceMappingURL=HTML.combobox.option.element.d.ts.map

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

@@ -10,4 +10,3 @@ export declare class HTMLComboboxTagElement extends HTMLElement {
     static onClearTag(event: Event): void;
     static captureFocus(event: Event): void;
 }
-//# sourceMappingURL=HTML.combobox.tag.element.d.ts.map

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

@@ -1,2 +1 @@
 export * from './HTML.combobox.element.js';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts

@@ -172,7 +172,6 @@ declare global {
         }
     }
 }
-export type { ComboboxEvent, ComboboxInputEvent, ComboboxFocusEvent, ComboboxElementAttributes, ComboboxOptionElementAttributes, ComboboxTagElementAttributes, };
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
@@ -252,4 +251,3 @@ declare module 'vue' {
         }
     }
 }
-//# sourceMappingURL=index.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-combobox-element",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "The combo-box web-component & customizable select polyfill",
   "type": "module",
   "scripts": {
@@ -8,6 +8,7 @@
     "clean": "rm -rf dist",
     "build:combobox": "tsc -b configs/tsconfig.cjs.json configs/tsconfig.esm.json configs/tsconfig.types.json",
     "build": "npm-run-all clean build:combobox",
+    "postbuild": "node scripts/fix-dual-package.mjs",
     "check-types": "tsc --noEmit"
   },
   "keywords": [
@@ -45,9 +46,14 @@
   "types": "dist/types/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/types/index.d.ts",
-      "require": "./dist/cjs/index.js",
-      "import": "./dist/esm/index.js"
+      "import": {
+        "types": "./dist/types/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.d.ts",
+        "default": "./dist/cjs/index.js"
+      }
     }
   }
 }

package/dist/types/combobox/Boolean.attribute.value.normalizer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Boolean.attribute.value.normalizer.d.ts","sourceRoot":"","sources":["../../../src/combobox/Boolean.attribute.value.normalizer.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,wBAAgB,SAAS,CAAC,KAAK,EAAE,GAAG,WAInC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"Combobox.markup.d.ts","sourceRoot":"","sources":["../../../src/combobox/Combobox.markup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAE9E,qBAAa,cAAc;;IAGzB,aAAa,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC5C,gBAAgB,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC/C,cAAc,EAAE,iBAAiB,GAAG,IAAI,CAAQ;IAChD,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAQ;IACvC,WAAW,EAAE,cAAc,GAAG,IAAI,CAAQ;IAC1C,WAAW,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IAC5C,WAAW,EAAE,sBAAsB,GAAG,IAAI,CAAQ;gBAOtC,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,gBAAgB;IAU/D,OAAO;IAuBP,eAAe;IAMf,UAAU;IAQV,cAAc,CAAC,KAAK,EAAE,MAAM;IAM5B,aAAa,CAAC,KAAK,EAAE,MAAM;IAM3B,kBAAkB,GAAI,OAAO,UAAU,UAStC;IAED,cAAc,GAAI,IAAI,UAAU,UAI/B;IAID,IAAI,CAAC,KAAK,EAAE,MAAM;IAgBlB,IAAI,OAAO,0CAEV;IAED,aAAa,CAAC,GAAG,EAAE,sBAAsB;IAczC,mBAAmB;IAqBnB,YAAY;IAIZ,SAAS,aASR;IAED,aAAa;IASb,UAAU,aAGT;IAGD,kBAAkB,CAAC,MAAM,EAAE,yBAAyB;IAsCpD,aAAa,CAAC,KAAK,EAAE,MAAM;IAI3B,gBAAgB,CAAC,KAAK,EAAE,MAAM;IAI9B,IAAI,eAAe,0CAElB;IAED,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE;IAQ/B,MAAM,CAAC,QAAQ,SAqOhB;IACC,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC;CAMpC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"HTML.combobox.element.d.ts","sourceRoot":"","sources":["../../../src/combobox/HTML.combobox.element.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAK9E,qBAAa,mBAAoB,SAAQ,WAAW;;IAClD,MAAM,CAAC,OAAO,cAA0H;IACxI,MAAM,CAAC,eAAe;;MAAuB;IAC7C,MAAM,CAAC,UAAU,kBAAuB;IACxC,MAAM,CAAC,cAAc,UAAQ;IAE7B,UAAU,EAAE,UAAU,CAAC;;IA2BvB,iBAAiB;IAyCjB,YAAY,GAAI,CAAC,SAAS,IAAI,EAAE,MAAM,CAAC,EAAE,eAAe,IAAI,GAAG,IAAI,KAAG,CAAC,CAOtE;IAED,WAAW,GAAI,CAAC,SAAS,IAAI,EAAE,MAAM,CAAC,KAAG,CAAC,CAOzC;IAED,MAAM,GAAI,GAAG,OAAO,CAAC,IAAI,GAAG,MAAM,CAAC,EAAE,UAEpC;IAED,OAAO,GAAI,GAAG,OAAO,CAAC,IAAI,GAAG,MAAM,CAAC,EAAE,UASrC;IAED,eAAe,GAAI,GAAG,OAAO,CAAC,IAAI,GAAG,MAAM,CAAC,EAAE,UAI7C;IAED,WAAW,GAAI,CAAC,SAAS,IAAI,EAAE,OAAO,CAAC,KAAG,CAAC,CAO1C;IAED,YAAY,GAAI,CAAC,SAAS,IAAI,EAAE,UAAU,IAAI,EAAE,UAAU,CAAC,KAAG,CAAC,CAO9D;IAED,IAAI,OAAO,YAEV;IAED,oBAAoB;IAWpB,iBAAiB;IAOjB,oBAAoB;IASpB,IAAI,YAAY,aAEf;IAED,IAAI,KAAK,IAGQ,MAAM,CADtB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAMtB;IAED,IAAI,WAAW,WAEd;IACD,IAAI,WAAW,CAAC,KAAK,QAAA,EAKpB;IAED,IAAI,SAAS,YAEZ;IACD,IAAI,SAAS,CAAC,KAAK,SAAA,EAElB;IAED,IAAI,UAAU,YAEb;IACD,IAAI,UAAU,CAAC,KAAK,SAAA,EAEnB;IAED,IAAI,UAAU,YAEb;IACD,IAAI,UAAU,CAAC,KAAK,SAAA,EAEnB;IAGD,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAKjB;IAED,IAAI,IAAI,oBAEP;IAED,IAAI,MAAM,aAET;IAED,IAAI,MAAM,WAET;IAED,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAEjB;IAKD,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAGjB;IAID,IAAI,eAAe,0CAElB;IAMD,IAAI,IAAI,qCAEP;IAED,IAAI,iBAAiB,WAEpB;IAED,IAAI,QAAQ,kBAEX;IAED,IAAI,YAAY,YAEf;IAED,IAAI,KAAK,IAGQ,MAAM,CADtB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAWtB;IAQD,aAAa;IAIb,IAAI,CAAC,KAAK,EAAE,MAAM;IASlB,cAAc;IAId,iBAAiB,CAAC,OAAO,EAAE,MAAM;IAQjC,UAAU;IAKV,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG;IAQrC,eAAe,CAAC,IAAI,EAAE,MAAM;IAuM5B,MAAM,CAAC,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE;IAIrC,MAAM,CAAC,8BAA8B;CAoBtC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"HTML.combobox.option.element.d.ts","sourceRoot":"","sources":["../../../src/combobox/HTML.combobox.option.element.ts"],"names":[],"mappings":"AAEA,qBAAa,yBAA0B,SAAQ,WAAW;;IACxD,MAAM,CAAC,OAAO,cAAuD;IACrE,MAAM,CAAC,SAAS;;;;MAAuD;IAGvE,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE,UAAU;IAOrC,MAAM,CAAC,UAAU,CAAC,KAAK,EAAE,aAAa;IAwBtC,iBAAiB;IAgBjB,oBAAoB;IAWpB,IAAI,KAAK,WAER;IACD,IAAI,KAAK,CAAC,KAAK,QAAA,EAGd;IAED,IAAI,KAAK,WAER;IACD,IAAI,KAAK,CAAC,KAAK,QAAA,EAGd;IAED,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAajB;IAGD,IAAI,QAAQ,YAEX;IACD,IAAI,QAAQ,CAAC,KAAK,SAAA,EAKjB;IAQD,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAQxC,eAAe,CAAC,IAAI,EAAE,MAAM;IAQ5B,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,GAAG,OAAO;CAIxD"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"HTML.combobox.tag.element.d.ts","sourceRoot":"","sources":["../../../src/combobox/HTML.combobox.tag.element.ts"],"names":[],"mappings":"AAAA,qBAAa,sBAAuB,SAAQ,WAAW;IACrD,MAAM,CAAC,SAAS;;;;MAAuD;IAEvE,IAAI,KAAK,WAER;IAED,iBAAiB;IAiBjB,oBAAoB;IAMpB,MAAM,CAAC,UAAU,CAAC,KAAK,EAAE,KAAK;IAK9B,MAAM,CAAC,YAAY,CAAC,KAAK,EAAE,KAAK;CAIjC"}

package/dist/types/combobox/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/combobox/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}

package/dist/types/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}