html-combobox-element 0.0.6 → 0.0.8

package/README.md

@@ -45,6 +45,7 @@ This registers the `<combo-box>`, `<box-option>` and `<box-tag>` custom elements
 
 ### Differences from `<select>`
 - In `multiple` mode, the `combobox.value` lists every selected value, where `select.value` gives only the first;
+- In `multiple` mode, the selected values are displayed as chips;
 - In `single`mode, the `<combo-box>` without a selected option stays empty, where a `<select>` selects its first option.
 
 ### Events – type: when
@@ -55,23 +56,24 @@ This registers the `<combo-box>`, `<box-option>` and `<box-tag>` custom elements
 - `reset`: The form was reset
 
 Read from event:
-- `event.target.changed`: tells whether the value differs from when it opened
-- `event.target.query`: tells the search field current text
-- `event.target.query`: the combobox selection
+- `event.target.changed`: tells whether the value differs from when it opened;
+- `event.target.query`: tells the search field current text;
+- `event.target.value`: the combobox selection;
+- `event.target.valueAsArray`: the combobox selection as an array of strings.
 
-Like native form controls, changes made by script dispatch no `change`.
-Framework bindings that assume `input` means "the value changed" need the `change` event instead.
+Like native form controls, changes made by script dispatch no `change`. Framework bindings that assume `input` means "the value changed" need the `change` event instead.
 
 ### Attributes
 All `<select>`'s attributes are supported, and few extra:
-- `filterable`: Displays search field in picker; options are automatically filtered against input value
-- `searchable`: Displays search field in picker; you listen for input events and implement own filter. Usefully for fuzzy search, etc.
-- `placeholder`: The combobox own placeholder, shown when there is no selection
-- `query`: The search field input value
+- `filterable`: Displays search field in picker; options are automatically filtered against input value;
+- `searchable`: Displays search field in picker; you listen for input events and implement own filter. Usefully for fuzzy search, etc.;
+- `placeholder`: The combobox own placeholder, shown when there is no selection;
+- `query`: The search field input value.
 
 ## Options API
 Like `select.options`, `combobox.options` is a live collection too, but a fully compatible polyfill – `HTMLComboboxOptionsCollection`, because `HTMLOptionsCollection` can't be constructed or subclassed.
 The only difference between `select.options` and `combobox.options`, is that `combobox.options` will false on `instanceof HTMLOptionsCollection` check.
+The `<box-option>` itself has the same API as native `<option>`. It exists, because the `<option>` can't be styled at all.
 
 ## Accessibility
 - Roles and states are set through `ElementInternals`, and mirrored as `role` and `aria`attributes, so tools that read the DOM can see it too.
@@ -144,95 +146,52 @@ That teaches it the `<select>` API of `<combo-box>` through the DOM only. Your p
 Playwright names a custom element from `<label for>` only for native controls, 
 so query `getByRole('combobox', { name })` with `aria-label` or `aria-labelledby` on the `<combo-box>`, or without a name.
 
-## TypeScript and JSX
-JSX/template type-checking only picks up custom element typings from a file in your own project - not from a package's shipped `.d.ts`.
-Due to this TypeScript limitation that affects any library adding custom elements to `JSX.IntrinsicElements` under the modern automatic JSX runtime – using `<combo-box>` in JSX or a Vue template needs one extra step. 
-
-So, in addition to `import 'html-combobox-element'`, create and include one small file in tsconfig.json, with the snippet for your framework: 
-
-<details>
-<summary><strong>React</strong> (<code>jsx: "react-jsx"</code>)</summary>
-
-```ts
-// combo-box.d.ts
-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;
-    }
-  }
-}
-```
-
-</details>
-
-<details>
-<summary><strong>Preact</strong> (<code>jsx: "react-jsx"</code>, <code>jsxImportSource: "preact"</code>)</summary>
-
-```ts
-// combo-box.d.ts
-declare module 'preact/jsx-runtime' {
-  namespace JSX {
-    interface IntrinsicElements {
-      'combo-box': ComboboxElementAttributes;
-      'box-option': ComboboxOptionElementAttributes;
-      'box-tag': ComboboxTagElementAttributes;
-    }
-  }
-}
-```
-
-</details>
-
-<details>
-<summary><strong>Solid</strong> (<code>jsx: "preserve"</code>, <code>jsxImportSource: "solid-js"</code>)</summary>
-
+## TypeScript and JSX frameworks
+`import 'html-combobox-element'` also brings the typings for: 
+- `document.createElement('combo-box')`;
+- `querySelector`;
+- `addEventListener` with a typed `event.target`.
+
+### Event listeners attached through the props
+The props are the same everywhere, but which handlers get called, and with what, depends on the framework:
+
+| Handler prop | React 19 | React 18 | Vue/Preact/SolidJS |
+|--------------|---|---|--------------------|
+| `onInput`    | SyntheticEvent | SyntheticEvent | DOM event          |
+| `onChange`   | SyntheticEvent | never called | DOM event          |
+| `onsearch`   | DOM event | never called | DOM event          |
+| `oninvalid`  | DOM event | never called | DOM event          |
+| `onreset`    | DOM event | never called | DOM event          |
+| `onclose`    | DOM event | never called | DOM event          |
+| `onClose`    | never called | never called | DOM event          |
+| `onSearch`   | never called | never called | DOM event          |
+| `onReset`    | never called | never called | DOM event          |
+| `onInvalid`  | never called | never called | DOM event          |
+
+The `combobox.addEventListener(type, cb)` works seamlessly in all frameworks.
+
+### Boolean props
+The `multiple`, `clearable`, `disabled`, ... behave like native ones in every framework, except that the string `'false'` is also `false`, i.e. turns the feature off.
+
+### React
+Package ships types, for `jsx: "react-jsx"`, `"react-jsxdev"` and classic `"react"`.
+Handlers are typed accordingly: `onChange`, `onInput`, `onFocus`, `onClick`, ... receive a SyntheticEvent: `event.target` is the `<combo-box>`, `event.nativeEvent` is the DOM event.
+
+- In React 19, events it doesn't know ("close", "search") are attached as native listeners under the exact, case-sensitive name, so use `onclose` and `onsearch`.
+- In React 18, listen to `change`, `close` and `search` on the element itself through the ref.
+- In a project written in React, but aliased to _Preact_ at build time – types may confuse. Rely on runtime behaviour, rather than on Typescript errors.
+
+### Preact and SolidJS
+Nothing to do, everything just work.
+
+### Vue
+Vue template compiler treats unknown tags as Vue components by default. You must tell it to treat `<combo-box>`, `<box-option>` and `<box-tag>` tags as custom elements.
+
+### Monorepos and microservices
+The typings are part of a TypeScript program only if the program includes this package. 
+A workspace package that renders `<combo-box>` but leaves the import to the app shell type-checks inside the app, 
+but not on its own (its CI, editor, project references). 
+Add a type-only import there - it's removed from the JS output, nothing is registered twice:
 ```ts
-// combo-box.d.ts
-declare module 'solid-js/jsx-runtime' {
-  namespace JSX {
-    interface IntrinsicElements {
-      'combo-box': ComboboxElementAttributes;
-      'box-option': ComboboxOptionElementAttributes;
-      'box-tag': ComboboxTagElementAttributes;
-    }
-  }
-}
+import type {} from 'html-combobox-element';
 ```
-
-</details>
-
-<details>
-<summary><strong>Vue</strong> (SFC <code>&lt;template&gt;</code>, checked via <code>vue-tsc</code>)</summary>
-
-Vue templates aren't JSX, so they're type-checked through `GlobalComponents` instead:
-
-```ts
-// combo-box.d.ts
-declare module 'vue' {
-  export interface GlobalComponents {
-    'combo-box': new () => { $props: ComboboxElementAttributes };
-    'box-option': new () => { $props: ComboboxOptionElementAttributes };
-  }
-}
-
-```
-
-This checks required props and value types for props you pass; like any native custom
-element, Vue still allows extra/unrecognized attributes through (that's expected Vue
-behavior for custom elements, not a gap in this typing). The trailing `export {};` may be 
-required here (without it the file is treated as a script, not a module, and the
-augmentation breaks Vue's own types).
-
-</details>

package/README.md.rej

@@ -0,0 +1,34 @@
+diff a/README.md b/README.md	(rejected hunks)
+@@ -152,7 +152,7 @@ Nothing to add: `<combo-box>`, `<box-option>` and `<box-tag>` are typed with Rea
+ 
+ React wraps events in its own SyntheticEvents, so handlers are typed accordingly:
+ - `onChange`, `onInput`, `onFocus`, `onClick`, ... receive a SyntheticEvent: `event.target` is the `<combo-box>` (`event.target.value`, `event.target.query`), `event.nativeEvent` is the DOM event.
+-- Events React doesn't know are attached by React 19 as native listeners under the exact, case-sensitive name: use `onclose` and `onsearch` (lowercase). `onClose`/`onSearch` never fire, and are type errors.
++- Events React doesn't handle for custom elements are attached by React 19 as native listeners under the exact, case-sensitive name: use `onclose`, `onsearch`, `onreset` and `oninvalid` (lowercase). `onClose`/`onSearch`/`onReset`/`onInvalid` never fire, and are type errors. (`reset` and `invalid` don't bubble, and React handles them only for its own form elements.)
+ 
+ ```tsx
+ <combo-box
+@@ -170,14 +170,16 @@ With `@types/react` 18 the framework-agnostic typings are used, as in previous v
+ ### What each runtime does
+ The props are the same everywhere, but which handlers get called, and with what, depends on the framework (verified in `tests/frameworks.spec.ts`):
+ 
+-| Handler prop | React 19 | React 18 | Preact (also as `preact/compat`) | Vue |
+-|---|---|---|---|---|
+-| `onChange` | SyntheticEvent | **never called** | DOM event | DOM event |
+-| `onInput` | SyntheticEvent | SyntheticEvent | DOM event | DOM event |
+-| `onClose` / `onSearch` | never called | never called | DOM event | DOM event |
+-| `onclose` / `onsearch` | DOM event | never called | DOM event | DOM event |
++| Handler prop | React 19 | React 18 | Preact (also as `preact/compat`) | Solid | Vue |
++|---|---|---|---|---|---|
++| `onChange` | SyntheticEvent | **never called** | DOM event | DOM event | DOM event |
++| `onInput` | SyntheticEvent | SyntheticEvent | DOM event | DOM event | DOM event |
++| `onClose` / `onSearch` / `onReset` / `onInvalid` | never called | never called | DOM event | DOM event | DOM event |
++| `onclose` / `onsearch` / `onreset` / `oninvalid` | DOM event | never called | DOM event | DOM event | DOM event |
+ 
+-With React 18, listen to `change`, `close` and `search` on the element itself:
++In Solid, `on:close` (its explicit native-listener syntax) works too.
++
++With React 18, listen to `change`, `close`, `search`, `reset` and `invalid` on the element itself:
+ ```tsx
+ function useComboboxEvent<K extends keyof ComboboxEventMap>(
+   ref: React.RefObject<HTMLElementTagNameMap['combo-box'] | null>,

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

@@ -1,2 +1,15 @@
-/** Transform invalid (nullish or stringed) values to correct boolean value */
+/**
+ * An ATTRIBUTE value as a boolean: present means true (`multiple=""`, `multiple="multiple"`),
+ * absent (`null`) means false. The string "false" also means false, so `multiple="false"` from a
+ * template or a framework that stringifies values doesn't turn the feature on.
+ */
 export declare function toBoolean(value: any): boolean;
+/**
+ * A PROPERTY value as a boolean, like native boolean properties (`select.multiple = ''` is false):
+ * JavaScript truthiness, except the string "false", which stays false as with attributes.
+ *
+ * Frameworks that set properties rely on this: Preact clears a removed or `undefined` prop with
+ * `element.multiple = ''`, which must turn the feature off. Attribute values (`setAttribute`,
+ * the initial attributes) go through `toBoolean` instead.
+ */
+export declare function propertyToBoolean(value: unknown): boolean;

package/dist/cjs/combobox/Boolean.attribute.value.normalizer.js

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.toBoolean = toBoolean;
-/** Transform invalid (nullish or stringed) values to correct boolean value */
+exports.propertyToBoolean = propertyToBoolean;
+/**
+ * An ATTRIBUTE value as a boolean: present means true (`multiple=""`, `multiple="multiple"`),
+ * absent (`null`) means false. The string "false" also means false, so `multiple="false"` from a
+ * template or a framework that stringifies values doesn't turn the feature on.
+ */
 function toBoolean(value) {
     if (value == null || value === 'false' || value === false)
         value = false;
@@ -9,3 +14,14 @@ function toBoolean(value) {
         value = true;
     return Boolean(value);
 }
+/**
+ * A PROPERTY value as a boolean, like native boolean properties (`select.multiple = ''` is false):
+ * JavaScript truthiness, except the string "false", which stays false as with attributes.
+ *
+ * Frameworks that set properties rely on this: Preact clears a removed or `undefined` prop with
+ * `element.multiple = ''`, which must turn the feature off. Attribute values (`setAttribute`,
+ * the initial attributes) go through `toBoolean` instead.
+ */
+function propertyToBoolean(value) {
+    return value !== 'false' && Boolean(value);
+}

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

@@ -1,5 +1,4 @@
 "use strict";
-var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HTMLComboboxElement = void 0;
 const Combobox_markup_js_1 = require("./Combobox.markup.js");
@@ -11,7 +10,7 @@ class HTMLComboboxElement extends HTMLElement {
     // Setters (and the setAttribute/removeAttribute overrides routed to them) only normalize and write
     // the attribute; attributeChangedCallback applies the side effects, whatever changed the attribute
     // (setters, native Element.prototype methods, DevTools, other JavaScript worlds).
-    static observedAttributes = [..._a.OWN_IDL];
+    static observedAttributes = [...HTMLComboboxElement.OWN_IDL];
     static #BOOLEAN_ATTRIBUTES = new Set(['required', 'disabled', 'clearable', 'multiple', 'filterable', 'searchable']);
     static observerOptions = { childList: true };
     static styleSheet = [new CSSStyleSheet];
@@ -40,7 +39,7 @@ class HTMLComboboxElement extends HTMLElement {
         this.shadowRoot = this.attachShadow({ mode: 'open' });
         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.shadowRoot.adoptedStyleSheets = HTMLComboboxElement.styleSheet;
         this.#observer = new MutationObserver(this.#onOptionsChanges);
         this.#markup.connect();
         this.#syncPopupSemantics();
@@ -57,7 +56,7 @@ class HTMLComboboxElement extends HTMLElement {
         this.shadowRoot.addEventListener('tagcleared', this.#onClearTag);
         this.shadowRoot.addEventListener('click', this.#onOptionClick, true);
         for (const child of Array.from(this.children)) {
-            if (_a.#isOptionLike(child)) {
+            if (HTMLComboboxElement.#isOptionLike(child)) {
                 this.#markup.optionsContainer?.appendChild(child);
             }
         }
@@ -70,7 +69,7 @@ class HTMLComboboxElement extends HTMLElement {
         if (!this.hasAttribute('role'))
             super.setAttribute('role', 'combobox');
         this.#initialAttributesSynchronization();
-        this.#observer.observe(this.#markup.optionsContainer, _a.observerOptions);
+        this.#observer.observe(this.#markup.optionsContainer, HTMLComboboxElement.observerOptions);
         this.addEventListener('keydown', this.#onKeyDown);
         this.addEventListener('click', this.#onHostClick);
         this.#markup.clearAllButton.addEventListener('click', this.#onClearAll);
@@ -104,7 +103,7 @@ class HTMLComboboxElement extends HTMLElement {
     //   - Solid mostly bypasses all of them for static subtrees (see connectedCallback above),
     //     but dynamic option lists still go through insert()/insertBefore().
     insertBefore = (node, referenceNode) => {
-        if (_a.#isOptionLike(node)) {
+        if (HTMLComboboxElement.#isOptionLike(node)) {
             this.#markup.optionsContainer?.insertBefore(node, referenceNode);
         }
         else {
@@ -113,7 +112,7 @@ class HTMLComboboxElement extends HTMLElement {
         return node;
     };
     appendChild = (node) => {
-        if (_a.#isOptionLike(node)) {
+        if (HTMLComboboxElement.#isOptionLike(node)) {
             this.#markup.optionsContainer?.appendChild(node);
         }
         else {
@@ -127,7 +126,7 @@ class HTMLComboboxElement extends HTMLElement {
     prepend = (...nodes) => {
         [...nodes].reverse().forEach(node => {
             const n = typeof node === 'string' ? new Text(node) : node;
-            if (_a.#isOptionLike(n)) {
+            if (HTMLComboboxElement.#isOptionLike(n)) {
                 this.#markup.optionsContainer?.insertBefore(n, this.#markup.optionsContainer.firstChild);
             }
             else {
@@ -179,7 +178,7 @@ class HTMLComboboxElement extends HTMLElement {
         // A path that skipped the setters can leave e.g. multiple="false": fix it once. The removal
         // calls back again with a valid value, which applies the change; that one isn't fixed again,
         // so this can't loop. The side effects below are safe to repeat.
-        if (_a.#BOOLEAN_ATTRIBUTES.has(name) && newValue !== null && !(0, Boolean_attribute_value_normalizer_js_1.toBoolean)(newValue)) {
+        if (HTMLComboboxElement.#BOOLEAN_ATTRIBUTES.has(name) && newValue !== null && !(0, Boolean_attribute_value_normalizer_js_1.toBoolean)(newValue)) {
             super.removeAttribute(name);
             return;
         }
@@ -253,26 +252,26 @@ class HTMLComboboxElement extends HTMLElement {
         return this.hasAttribute('clearable');
     }
     set clearable(value) {
-        super.toggleAttribute('clearable', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
+        super.toggleAttribute('clearable', (0, Boolean_attribute_value_normalizer_js_1.propertyToBoolean)(value));
     }
     get filterable() {
         return this.hasAttribute('filterable');
     }
     set filterable(value) {
-        super.toggleAttribute('filterable', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
+        super.toggleAttribute('filterable', (0, Boolean_attribute_value_normalizer_js_1.propertyToBoolean)(value));
     }
     get searchable() {
         return this.hasAttribute('searchable');
     }
     set searchable(value) {
-        super.toggleAttribute('searchable', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
+        super.toggleAttribute('searchable', (0, Boolean_attribute_value_normalizer_js_1.propertyToBoolean)(value));
     }
     // <select> specific properties (implements HTMLSelectElement)
     get disabled() {
         return this.hasAttribute('disabled');
     }
     set disabled(value) {
-        super.toggleAttribute('disabled', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
+        super.toggleAttribute('disabled', (0, Boolean_attribute_value_normalizer_js_1.propertyToBoolean)(value));
     }
     get form() {
         return this.#internals.form;
@@ -291,7 +290,7 @@ class HTMLComboboxElement extends HTMLElement {
         return this.hasAttribute('multiple');
     }
     set multiple(value) {
-        super.toggleAttribute('multiple', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
+        super.toggleAttribute('multiple', (0, Boolean_attribute_value_normalizer_js_1.propertyToBoolean)(value));
     }
     /** The options, as a live `HTMLOptionsCollection`-like list (like `select.options`) */
     get options() {
@@ -305,7 +304,7 @@ class HTMLComboboxElement extends HTMLElement {
         return this.hasAttribute('required');
     }
     set required(value) {
-        super.toggleAttribute('required', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
+        super.toggleAttribute('required', (0, Boolean_attribute_value_normalizer_js_1.propertyToBoolean)(value));
     }
     /** Index of the first selected option, or -1. Setting it selects only that option. */
     get selectedIndex() {
@@ -396,15 +395,16 @@ class HTMLComboboxElement extends HTMLElement {
     }
     // Overwritten methods
     setAttribute(name, value) {
-        if (_a.OWN_IDL.has(name)) {
-            Reflect.set(this, name, value);
+        if (HTMLComboboxElement.OWN_IDL.has(name)) {
+            // through the setter, with attribute semantics: setAttribute('multiple', '') turns it on
+            Reflect.set(this, name, HTMLComboboxElement.#BOOLEAN_ATTRIBUTES.has(name) ? (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value) : value);
         }
         else {
             super.setAttribute(name, value);
         }
     }
     removeAttribute(name) {
-        if (_a.#BOOLEAN_ATTRIBUTES.has(name)) {
+        if (HTMLComboboxElement.#BOOLEAN_ATTRIBUTES.has(name)) {
             Reflect.set(this, name, false);
         }
         else if (name === 'placeholder' || name === 'query') {
@@ -833,12 +833,13 @@ class HTMLComboboxElement extends HTMLElement {
         }
     }
     #initialAttributesSynchronization() {
-        for (const key of _a.OWN_IDL) {
+        for (const key of HTMLComboboxElement.OWN_IDL) {
             // Without a value attribute, the selection comes from the options' `selected` attributes:
             // `value = null` would clear it
             if (key === 'value' && !this.hasAttribute('value'))
                 continue;
-            this[key] = this.getAttribute(key);
+            const attribute = this.getAttribute(key);
+            Reflect.set(this, key, HTMLComboboxElement.#BOOLEAN_ATTRIBUTES.has(key) ? (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(attribute) : attribute);
         }
     }
     static loadCssFromUrls(urls) {
@@ -846,17 +847,17 @@ class HTMLComboboxElement extends HTMLElement {
     }
     static loadCssFromDocumentStyleSheets() {
         if (document.readyState === 'complete') {
-            _a.#loadDocumentStyleSheets();
+            HTMLComboboxElement.#loadDocumentStyleSheets();
         }
         if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', _a.#loadDocumentStyleSheets);
+            document.addEventListener('DOMContentLoaded', HTMLComboboxElement.#loadDocumentStyleSheets);
         }
         if (document.readyState === 'interactive') {
-            queueMicrotask(_a.#loadDocumentStyleSheets);
+            queueMicrotask(HTMLComboboxElement.#loadDocumentStyleSheets);
         }
     }
     static #loadDocumentStyleSheets() {
-        const [innerSheet] = _a.styleSheet;
+        const [innerSheet] = HTMLComboboxElement.styleSheet;
         for (const outerSheet of document.styleSheets) {
             for (const rule of outerSheet.cssRules) {
                 innerSheet.insertRule(rule.cssText, innerSheet.cssRules.length);
@@ -865,7 +866,6 @@ class HTMLComboboxElement extends HTMLElement {
     }
 }
 exports.HTMLComboboxElement = HTMLComboboxElement;
-_a = HTMLComboboxElement;
 if (!window.customElements.get('combo-box')) {
     window.customElements.define('combo-box', HTMLComboboxElement);
 }

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

@@ -1,5 +1,4 @@
 "use strict";
-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");
@@ -22,6 +21,7 @@ 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 #BOOLEAN_ATTRIBUTES = new Set(['selected', 'disabled']);
     static observedAttributes = ['selected', 'disabled'];
     static EventInit = { bubbles: true, cancelable: true, composed: true };
     #internals;
@@ -47,7 +47,7 @@ class HTMLComboboxOptionElement extends HTMLElement {
         // (<box-option label="Plum"></box-option> displays its label through CSS, see the markup styles.)
         if (!this.textContent)
             this.textContent = this.getAttribute('value') ?? '';
-        this.dispatchEvent(new Event('optionselectedstatechange', _a.EventInit));
+        this.dispatchEvent(new Event('optionselectedstatechange', HTMLComboboxOptionElement.EventInit));
     }
     /** Like <option>: the value attribute, or the text when there is none */
     get value() {
@@ -79,13 +79,13 @@ class HTMLComboboxOptionElement extends HTMLElement {
     }
     // Normalization only: the side effects run in attributeChangedCallback
     set selected(value) {
-        super.toggleAttribute('selected', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
+        super.toggleAttribute('selected', (0, Boolean_attribute_value_normalizer_js_1.propertyToBoolean)(value));
     }
     get disabled() {
         return this.hasAttribute('disabled');
     }
     set disabled(value) {
-        super.toggleAttribute('disabled', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
+        super.toggleAttribute('disabled', (0, Boolean_attribute_value_normalizer_js_1.propertyToBoolean)(value));
     }
     attributeChangedCallback(name, _oldValue, newValue) {
         // A path that skipped the setters can leave a value they'd never write, e.g. selected="false".
@@ -103,7 +103,7 @@ class HTMLComboboxOptionElement extends HTMLElement {
         if (name === 'selected') {
             this.#syncSelected(now);
             if (this.isConnected) {
-                this.dispatchEvent(new Event('optionselectedstatechange', _a.EventInit));
+                this.dispatchEvent(new Event('optionselectedstatechange', HTMLComboboxOptionElement.EventInit));
             }
         }
         else {
@@ -139,13 +139,15 @@ class HTMLComboboxOptionElement extends HTMLElement {
             super.setAttribute('aria-selected', ariaSelected);
     }
     #initialAttributesSynchronization() {
-        for (const key of _a.OWN_IDL) {
-            this[key] = this.getAttribute(key);
+        for (const key of HTMLComboboxOptionElement.OWN_IDL) {
+            const attribute = this.getAttribute(key);
+            Reflect.set(this, key, HTMLComboboxOptionElement.#BOOLEAN_ATTRIBUTES.has(key) ? (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(attribute) : attribute);
         }
     }
     setAttribute(name, value) {
-        if (_a.OWN_IDL.has(name)) {
-            this[name] = value;
+        if (HTMLComboboxOptionElement.OWN_IDL.has(name)) {
+            // through the setter, with attribute semantics: setAttribute('selected', '') selects
+            Reflect.set(this, name, HTMLComboboxOptionElement.#BOOLEAN_ATTRIBUTES.has(name) ? (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value) : value);
         }
         else {
             super.setAttribute(name, value);
@@ -162,7 +164,6 @@ class HTMLComboboxOptionElement extends HTMLElement {
     }
 }
 exports.HTMLComboboxOptionElement = HTMLComboboxOptionElement;
-_a = HTMLComboboxOptionElement;
 if (!window.customElements.get('box-option')) {
     window.customElements.define('box-option', HTMLComboboxOptionElement);
 }

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

@@ -1,5 +1,4 @@
 "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");
@@ -86,7 +85,7 @@ class HTMLComboboxOptionsCollection {
         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));
+            source(this).container().append(...HTMLComboboxOptionsCollection.#blankOptions(length - options.length));
         }
         else {
             options.slice(length).forEach((option) => option.remove());
@@ -161,7 +160,7 @@ class HTMLComboboxOptionsCollection {
         }
         const length = this.length;
         if (index >= length) {
-            source(this).container().append(..._a.#blankOptions(index - length), value);
+            source(this).container().append(...HTMLComboboxOptionsCollection.#blankOptions(index - length), value);
             return;
         }
         const current = this.item(index);
@@ -173,4 +172,3 @@ class HTMLComboboxOptionsCollection {
     }
 }
 exports.HTMLComboboxOptionsCollection = HTMLComboboxOptionsCollection;
-_a = HTMLComboboxOptionsCollection;