@substrate-system/select 0.0.0-stage → 0.0.0

package/dist/index.cjs

@@ -0,0 +1,405 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var index_exports = {};
+__export(index_exports, {
+  ARIA_ATTRIBUTES: () => ARIA_ATTRIBUTES,
+  SubstrateSelect: () => SubstrateSelect
+});
+module.exports = __toCommonJS(index_exports);
+var import_web_component = require("@substrate-system/web-component");
+var import_debug = __toESM(require("@substrate-system/debug"), 1);
+const debug = (0, import_debug.default)("substrate-select");
+const ARIA_ATTRIBUTES = [
+  "aria-activedescendant",
+  "aria-atomic",
+  "aria-autocomplete",
+  "aria-braillelabel",
+  "aria-brailleroledescription",
+  "aria-busy",
+  "aria-checked",
+  "aria-colcount",
+  "aria-colindex",
+  "aria-colindextext",
+  "aria-colspan",
+  "aria-controls",
+  "aria-current",
+  "aria-describedby",
+  "aria-description",
+  "aria-details",
+  "aria-disabled",
+  "aria-dropeffect",
+  "aria-errormessage",
+  "aria-expanded",
+  "aria-flowto",
+  "aria-grabbed",
+  "aria-haspopup",
+  "aria-hidden",
+  "aria-invalid",
+  "aria-keyshortcuts",
+  "aria-label",
+  "aria-labelledby",
+  "aria-level",
+  "aria-live",
+  "aria-modal",
+  "aria-multiline",
+  "aria-multiselectable",
+  "aria-orientation",
+  "aria-owns",
+  "aria-placeholder",
+  "aria-posinset",
+  "aria-pressed",
+  "aria-readonly",
+  "aria-relevant",
+  "aria-required",
+  "aria-roledescription",
+  "aria-rowcount",
+  "aria-rowindex",
+  "aria-rowindextext",
+  "aria-rowspan",
+  "aria-selected",
+  "aria-setsize",
+  "aria-sort",
+  "aria-valuemax",
+  "aria-valuemin",
+  "aria-valuenow",
+  "aria-valuetext"
+];
+const FORWARDED_ATTRIBUTES = [
+  "name",
+  "disabled",
+  "required",
+  "autocomplete",
+  "form"
+];
+const UPGRADED_PROPERTIES = [
+  "value",
+  "label",
+  "name",
+  "disabled",
+  "required"
+];
+function isOptionNode(node) {
+  return node instanceof HTMLOptionElement || node instanceof HTMLOptGroupElement;
+}
+__name(isOptionNode, "isOptionNode");
+class SubstrateSelect extends import_web_component.WebComponent.create("substrate-select") {
+  static {
+    __name(this, "SubstrateSelect");
+  }
+  /**
+   * The base class generates the accessors for these and derives
+   * `observedAttributes` from them.
+   *
+   * @see docs/adr/ADR-004-attributes-as-state.md
+   */
+  static reflectedStringAttributes = ["label", "name"];
+  static reflectedBooleanAttributes = ["disabled", "required"];
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "id",
+      "autocomplete",
+      "form",
+      ...ARIA_ATTRIBUTES
+    ];
+  }
+  /**
+   * The inner select's value. Before the first render this holds the
+   * value and `render` applies it once the options are in.
+   */
+  get value() {
+    if (this.#select) return this.#select.value;
+    return this.#pendingValue ?? "";
+  }
+  set value(value) {
+    const normalized = String(value ?? "");
+    if (this.#select) {
+      this.#adopt(Array.from(this.childNodes));
+      this.#pendingValue = null;
+      this.#select.value = normalized;
+      return;
+    }
+    this.#pendingValue = normalized;
+  }
+  /**
+   * The inner select, or `null` before the first render. An escape
+   * hatch, for example to remove options.
+   */
+  get select() {
+    return this.#select;
+  }
+  #select = null;
+  #label = null;
+  #pendingValue = null;
+  #observer = null;
+  #generatedId = "substrate-select-" + Math.random().toString(36).slice(2, 10);
+  connectedCallback() {
+    debug("connected");
+    for (const prop of UPGRADED_PROPERTIES) {
+      this.#upgradeProperty(prop);
+    }
+    this.render();
+    this.#adopt(Array.from(this.childNodes));
+    this.#observer ??= new MutationObserver((records) => {
+      this.#handleRecords(records);
+    });
+    this.#observer.observe(this, { childList: true });
+    if (this.#select) {
+      this.#observer.observe(this.#select, {
+        childList: true,
+        subtree: true
+      });
+    }
+  }
+  disconnectedCallback() {
+    debug("disconnected");
+    if (!this.#observer) return;
+    this.#handleRecords(this.#observer.takeRecords());
+    this.#observer.disconnect();
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "id" || name.startsWith("aria-")) {
+      this.#moveToSelect(name, newValue);
+      return;
+    }
+    super.attributeChangedCallback(
+      name,
+      oldValue,
+      newValue
+    );
+  }
+  handleChange_label(_oldValue, newValue) {
+    const select = this.#select;
+    if (!select) return;
+    if (!newValue) {
+      this.#label?.remove();
+      this.#label = null;
+      return;
+    }
+    if (!this.#label) {
+      this.#label = this.#createLabel(select.id);
+      this.insertBefore(this.#label, select);
+    }
+    this.#label.textContent = newValue;
+  }
+  handleChange_name(_oldValue, newValue) {
+    this.#forward("name", newValue);
+  }
+  handleChange_disabled(_oldValue, newValue) {
+    this.#forward("disabled", newValue);
+  }
+  handleChange_required(_oldValue, newValue) {
+    this.#forward("required", newValue);
+  }
+  handleChange_autocomplete(_oldValue, newValue) {
+    this.#forward("autocomplete", newValue);
+  }
+  handleChange_form(_oldValue, newValue) {
+    this.#forward("form", newValue);
+  }
+  /**
+   * Copy a forwarded attribute to the select. Before the first render
+   * there is no select, and `render` copies the host's attributes.
+   */
+  #forward(name, value) {
+    const select = this.#select;
+    if (!select) return;
+    if (value === null) {
+      select.removeAttribute(name);
+    } else {
+      select.setAttribute(name, value);
+    }
+  }
+  /**
+   * Move `id` or an `aria-*` attribute from the host to the select.
+   *
+   * A `null` value is ignored. The host never keeps these attributes
+   * after the first render, so a removal callback is always the one
+   * this method or `render` just caused. A consumer's removal goes
+   * through the `removeAttribute` override instead, because the host
+   * no longer has the attribute and no callback would fire.
+   *
+   * Before the first render there is no select; `render` reads the
+   * host attributes itself.
+   */
+  #moveToSelect(name, value) {
+    const select = this.#select;
+    if (value === null || !select) return;
+    if (name === "id") {
+      this.#setSelectId(value || this.#generatedId);
+    } else {
+      select.setAttribute(name, value);
+    }
+    super.removeAttribute(name);
+  }
+  #setSelectId(id) {
+    if (!this.#select) return;
+    this.#select.id = id;
+    if (this.#label) this.#label.htmlFor = id;
+  }
+  /**
+   * After the first render, `id` and `aria-*` live on the inner select,
+   * so removing one from the host removes it from the select. This is
+   * how frameworks clear an attribute (Preact calls `removeAttribute`
+   * for `undefined`). A removed `id` falls back to the generated one,
+   * so the label stays connected.
+   *
+   * Internal code calls `super.removeAttribute` to strip the host
+   * without touching the select. `toggleAttribute(name, false)` and
+   * `removeAttributeNode` on the host are not covered.
+   */
+  removeAttribute(qualifiedName) {
+    const name = qualifiedName.toLowerCase();
+    const select = this.#select;
+    if (select && name === "id") {
+      this.#setSelectId(this.#generatedId);
+    } else if (select && name.startsWith("aria-")) {
+      select.removeAttribute(name);
+    }
+    super.removeAttribute(qualifiedName);
+  }
+  /**
+   * Apply a value that was set before the first render. It stays
+   * pending until an option with that value exists, so a value set
+   * before the options arrive (an empty first render, then appended
+   * options) still lands. A later `value` set or a user change clears
+   * it.
+   */
+  #applyPendingValue() {
+    const select = this.#select;
+    const pending = this.#pendingValue;
+    if (!select || pending === null) return;
+    const options = Array.from(select.options);
+    if (!options.some((option) => option.value === pending)) return;
+    select.value = pending;
+    this.#pendingValue = null;
+  }
+  /**
+   * A property set before the element was defined is an own data
+   * property that hides the class accessor. Remove it and set it
+   * again so the accessor sees it.
+   */
+  #upgradeProperty(prop) {
+    if (!Object.prototype.hasOwnProperty.call(this, prop)) return;
+    const value = Reflect.get(this, prop);
+    Reflect.deleteProperty(this, prop);
+    Reflect.set(this, prop, value);
+  }
+  /**
+   * Move options added to the host into the select, and retry a
+   * waiting value when nodes were added inside the select.
+   */
+  #handleRecords(records) {
+    const fromHost = records.filter((record) => record.target === this);
+    this.#adopt(
+      fromHost.flatMap((record) => Array.from(record.addedNodes))
+    );
+    const intoSelect = records.some((record) => {
+      return record.target !== this && record.addedNodes.length > 0;
+    });
+    if (intoSelect) this.#applyPendingValue();
+  }
+  /**
+   * Move `<option>` and `<optgroup>` children of the host to the end of
+   * the select. The component's own label and select, and anything
+   * that is not an option, stay where they are.
+   */
+  #adopt(nodes) {
+    const select = this.#select;
+    if (!select) return;
+    let moved = false;
+    for (const node of nodes) {
+      if (node.parentNode !== this) continue;
+      if (!isOptionNode(node)) continue;
+      select.append(node);
+      moved = true;
+    }
+    if (moved) this.#applyPendingValue();
+  }
+  #createLabel(selectId) {
+    const label = document.createElement("label");
+    label.htmlFor = selectId;
+    return label;
+  }
+  render() {
+    if (this.#select) return;
+    const authored = [];
+    const stray = [];
+    for (const node of Array.from(this.childNodes)) {
+      if (isOptionNode(node)) {
+        authored.push(node);
+      } else if (node.nodeType !== Node.TEXT_NODE || node.textContent?.trim()) {
+        stray.push(node);
+      }
+    }
+    if (stray.length) debug("dropping non-option children", stray);
+    const chosen = authored.flatMap((node) => {
+      return node instanceof HTMLOptionElement ? [node] : Array.from(node.querySelectorAll("option"));
+    }).filter((option) => option.selected).pop();
+    const select = document.createElement("select");
+    select.id = this.getAttribute("id") ?? this.#generatedId;
+    for (const attr of Array.from(this.attributes)) {
+      if (attr.name.startsWith("aria-")) {
+        select.setAttribute(attr.name, attr.value);
+      }
+    }
+    for (const name of FORWARDED_ATTRIBUTES) {
+      const value = this.getAttribute(name);
+      if (value !== null) select.setAttribute(name, value);
+    }
+    select.addEventListener("change", () => {
+      this.#pendingValue = null;
+      this.emit("change", {
+        detail: { value: select.value }
+      });
+    });
+    select.append(...authored);
+    if (chosen) chosen.selected = true;
+    this.#select = select;
+    this.#applyPendingValue();
+    if (this.#pendingValue !== null) select.selectedIndex = -1;
+    const labelText = this.getAttribute("label");
+    if (labelText) {
+      this.#label = this.#createLabel(select.id);
+      this.#label.textContent = labelText;
+      this.replaceChildren(this.#label, select);
+    } else {
+      this.replaceChildren(select);
+    }
+    super.removeAttribute("id");
+    for (const attr of Array.from(this.attributes)) {
+      if (attr.name.startsWith("aria-")) {
+        super.removeAttribute(attr.name);
+      }
+    }
+  }
+}
+SubstrateSelect.define();
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["// pattern: Imperative Shell\nimport { WebComponent } from '@substrate-system/web-component'\nimport Debug from '@substrate-system/debug'\nconst debug = Debug('substrate-select')\n\n// for document.querySelector\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'substrate-select':SubstrateSelect\n    }\n}\n\n/**\n * ARIA attributes the component observes, so a change after upgrade is\n * moved to the inner select too. `attributeChangedCallback` only sees\n * attributes named in `observedAttributes`. Copied from\n * `@substrate-system/input` (`src/util.ts`). At first render every\n * `aria-*` attribute moves, listed here or not.\n */\nexport const ARIA_ATTRIBUTES = [\n    'aria-activedescendant',\n    'aria-atomic',\n    'aria-autocomplete',\n    'aria-braillelabel',\n    'aria-brailleroledescription',\n    'aria-busy',\n    'aria-checked',\n    'aria-colcount',\n    'aria-colindex',\n    'aria-colindextext',\n    'aria-colspan',\n    'aria-controls',\n    'aria-current',\n    'aria-describedby',\n    'aria-description',\n    'aria-details',\n    'aria-disabled',\n    'aria-dropeffect',\n    'aria-errormessage',\n    'aria-expanded',\n    'aria-flowto',\n    'aria-grabbed',\n    'aria-haspopup',\n    'aria-hidden',\n    'aria-invalid',\n    'aria-keyshortcuts',\n    'aria-label',\n    'aria-labelledby',\n    'aria-level',\n    'aria-live',\n    'aria-modal',\n    'aria-multiline',\n    'aria-multiselectable',\n    'aria-orientation',\n    'aria-owns',\n    'aria-placeholder',\n    'aria-posinset',\n    'aria-pressed',\n    'aria-readonly',\n    'aria-relevant',\n    'aria-required',\n    'aria-roledescription',\n    'aria-rowcount',\n    'aria-rowindex',\n    'aria-rowindextext',\n    'aria-rowspan',\n    'aria-selected',\n    'aria-setsize',\n    'aria-sort',\n    'aria-valuemax',\n    'aria-valuemin',\n    'aria-valuenow',\n    'aria-valuetext'\n]\n\n/**\n * Attributes copied to the inner select and also left on the host.\n */\nconst FORWARDED_ATTRIBUTES = [\n    'name',\n    'disabled',\n    'required',\n    'autocomplete',\n    'form'\n]\n\n/**\n * Properties a framework may set before this module defines the\n * element. See `#upgradeProperty`.\n */\nconst UPGRADED_PROPERTIES = [\n    'value',\n    'label',\n    'name',\n    'disabled',\n    'required'\n]\n\nfunction isOptionNode (\n    node:Node\n):node is HTMLOptionElement|HTMLOptGroupElement {\n    return (\n        node instanceof HTMLOptionElement ||\n        node instanceof HTMLOptGroupElement\n    )\n}\n\nexport interface SubstrateSelectChangeDetail {\n    value:string;\n}\n\n/**\n * Use the `create` factory rather than `class X extends WebComponent`\n * with `static TAG`. The base class declares `TAG` as an *instance*\n * field defaulting to `''`, and `emit`/`on` namespace from that instance\n * field while `static event()` reads the static one. Setting only\n * `static TAG` therefore emits `':change'` while listeners built from\n * `SubstrateSelect.event('change')` expect `'substrate-select:change'`,\n * and nothing fires. `create` sets both.\n */\nexport class SubstrateSelect extends WebComponent.create('substrate-select') {\n    /**\n     * The base class generates the accessors for these and derives\n     * `observedAttributes` from them.\n     *\n     * @see docs/adr/ADR-004-attributes-as-state.md\n     */\n    static reflectedStringAttributes = ['label', 'name']\n    static reflectedBooleanAttributes = ['disabled', 'required']\n\n    static get observedAttributes ():string[] {\n        return [\n            ...super.observedAttributes,\n            'id',\n            'autocomplete',\n            'form',\n            ...ARIA_ATTRIBUTES\n        ]\n    }\n\n    /**\n     * Installed at runtime by `define()`. `declare` types them without\n     * emitting a field that would shadow the generated accessor.\n     */\n    declare label:string|null\n    declare name:string|null\n    declare disabled:boolean\n    declare required:boolean\n\n    /**\n     * The inner select's value. Before the first render this holds the\n     * value and `render` applies it once the options are in.\n     */\n    get value ():string {\n        if (this.#select) return this.#select.value\n        return this.#pendingValue ?? ''\n    }\n\n    set value (value:string) {\n        const normalized = String(value ?? '')\n        if (this.#select) {\n            // Options appended this tick are still in the host, waiting\n            // for the observer. Move them now so the value can match.\n            this.#adopt(Array.from(this.childNodes))\n            // A later set replaces any value still waiting for its option\n            this.#pendingValue = null\n            this.#select.value = normalized\n            return\n        }\n        this.#pendingValue = normalized\n    }\n\n    /**\n     * The inner select, or `null` before the first render. An escape\n     * hatch, for example to remove options.\n     */\n    get select ():HTMLSelectElement|null {\n        return this.#select\n    }\n\n    #select:HTMLSelectElement|null = null\n    #label:HTMLLabelElement|null = null\n    #pendingValue:string|null = null\n    #observer:MutationObserver|null = null\n    #generatedId = 'substrate-select-' +\n        Math.random().toString(36).slice(2, 10)\n\n    connectedCallback () {\n        debug('connected')\n        for (const prop of UPGRADED_PROPERTIES) {\n            this.#upgradeProperty(prop)\n        }\n\n        // Not `super.connectedCallback()`: that renders on every\n        // connect. `render` is idempotent, so a reconnect keeps the\n        // existing select, its options, and the user's selection.\n        this.render()\n\n        // Options appended while disconnected\n        this.#adopt(Array.from(this.childNodes))\n\n        this.#observer ??= new MutationObserver(records => {\n            this.#handleRecords(records)\n        })\n        this.#observer.observe(this, { childList: true })\n        // Options added through `el.select` may be what a waiting value\n        // is waiting for. `subtree` covers options inside an optgroup.\n        if (this.#select) {\n            this.#observer.observe(this.#select, {\n                childList: true,\n                subtree: true\n            })\n        }\n    }\n\n    disconnectedCallback () {\n        debug('disconnected')\n        if (!this.#observer) return\n        // Deliver additions the observer has queued but not reported\n        this.#handleRecords(this.#observer.takeRecords())\n        this.#observer.disconnect()\n    }\n\n    attributeChangedCallback (\n        name:string,\n        oldValue:string|null,\n        newValue:string|null\n    ) {\n        if (name === 'id' || name.startsWith('aria-')) {\n            this.#moveToSelect(name, newValue)\n            return\n        }\n\n        // The base class types these as `string`; the DOM passes `null`\n        // for an absent attribute, and the handlers here accept it.\n        super.attributeChangedCallback(\n            name,\n            oldValue as string,\n            newValue as string\n        )\n    }\n\n    handleChange_label (_oldValue:string|null, newValue:string|null) {\n        const select = this.#select\n        if (!select) return  // render reads the attribute\n\n        if (!newValue) {\n            this.#label?.remove()\n            this.#label = null\n            return\n        }\n\n        if (!this.#label) {\n            this.#label = this.#createLabel(select.id)\n            this.insertBefore(this.#label, select)\n        }\n\n        this.#label.textContent = newValue\n    }\n\n    handleChange_name (_oldValue:string|null, newValue:string|null) {\n        this.#forward('name', newValue)\n    }\n\n    handleChange_disabled (_oldValue:string|null, newValue:string|null) {\n        this.#forward('disabled', newValue)\n    }\n\n    handleChange_required (_oldValue:string|null, newValue:string|null) {\n        this.#forward('required', newValue)\n    }\n\n    handleChange_autocomplete (\n        _oldValue:string|null,\n        newValue:string|null\n    ) {\n        this.#forward('autocomplete', newValue)\n    }\n\n    handleChange_form (_oldValue:string|null, newValue:string|null) {\n        this.#forward('form', newValue)\n    }\n\n    /**\n     * Copy a forwarded attribute to the select. Before the first render\n     * there is no select, and `render` copies the host's attributes.\n     */\n    #forward (name:string, value:string|null) {\n        const select = this.#select\n        if (!select) return\n\n        if (value === null) {\n            select.removeAttribute(name)\n        } else {\n            select.setAttribute(name, value)\n        }\n    }\n\n    /**\n     * Move `id` or an `aria-*` attribute from the host to the select.\n     *\n     * A `null` value is ignored. The host never keeps these attributes\n     * after the first render, so a removal callback is always the one\n     * this method or `render` just caused. A consumer's removal goes\n     * through the `removeAttribute` override instead, because the host\n     * no longer has the attribute and no callback would fire.\n     *\n     * Before the first render there is no select; `render` reads the\n     * host attributes itself.\n     */\n    #moveToSelect (name:string, value:string|null) {\n        const select = this.#select\n        if (value === null || !select) return\n\n        if (name === 'id') {\n            this.#setSelectId(value || this.#generatedId)\n        } else {\n            select.setAttribute(name, value)\n        }\n        super.removeAttribute(name)\n    }\n\n    #setSelectId (id:string) {\n        if (!this.#select) return\n        this.#select.id = id\n        if (this.#label) this.#label.htmlFor = id\n    }\n\n    /**\n     * After the first render, `id` and `aria-*` live on the inner select,\n     * so removing one from the host removes it from the select. This is\n     * how frameworks clear an attribute (Preact calls `removeAttribute`\n     * for `undefined`). A removed `id` falls back to the generated one,\n     * so the label stays connected.\n     *\n     * Internal code calls `super.removeAttribute` to strip the host\n     * without touching the select. `toggleAttribute(name, false)` and\n     * `removeAttributeNode` on the host are not covered.\n     */\n    removeAttribute (qualifiedName:string) {\n        const name = qualifiedName.toLowerCase()\n        const select = this.#select\n        if (select && name === 'id') {\n            this.#setSelectId(this.#generatedId)\n        } else if (select && name.startsWith('aria-')) {\n            select.removeAttribute(name)\n        }\n        super.removeAttribute(qualifiedName)\n    }\n\n    /**\n     * Apply a value that was set before the first render. It stays\n     * pending until an option with that value exists, so a value set\n     * before the options arrive (an empty first render, then appended\n     * options) still lands. A later `value` set or a user change clears\n     * it.\n     */\n    #applyPendingValue () {\n        const select = this.#select\n        const pending = this.#pendingValue\n        if (!select || pending === null) return\n        // Write only on a match. A write with no match would clear\n        // whatever is selected now, including a pick made through\n        // `el.select`, with no event.\n        const options = Array.from(select.options)\n        if (!options.some(option => option.value === pending)) return\n        select.value = pending\n        this.#pendingValue = null\n    }\n\n    /**\n     * A property set before the element was defined is an own data\n     * property that hides the class accessor. Remove it and set it\n     * again so the accessor sees it.\n     */\n    #upgradeProperty (prop:string) {\n        if (!Object.prototype.hasOwnProperty.call(this, prop)) return\n        const value = Reflect.get(this, prop)\n        Reflect.deleteProperty(this, prop)\n        Reflect.set(this, prop, value)\n    }\n\n    /**\n     * Move options added to the host into the select, and retry a\n     * waiting value when nodes were added inside the select.\n     */\n    #handleRecords (records:MutationRecord[]) {\n        const fromHost = records.filter(record => record.target === this)\n        this.#adopt(\n            fromHost.flatMap(record => Array.from(record.addedNodes))\n        )\n        const intoSelect = records.some(record => {\n            return record.target !== this && record.addedNodes.length > 0\n        })\n        if (intoSelect) this.#applyPendingValue()\n    }\n\n    /**\n     * Move `<option>` and `<optgroup>` children of the host to the end of\n     * the select. The component's own label and select, and anything\n     * that is not an option, stay where they are.\n     */\n    #adopt (nodes:Node[]) {\n        const select = this.#select\n        if (!select) return\n        let moved = false\n        for (const node of nodes) {\n            // already moved, or removed again before delivery\n            if (node.parentNode !== this) continue\n            if (!isOptionNode(node)) continue\n            select.append(node)\n            moved = true\n        }\n        // a value set before connect may be waiting for these options\n        if (moved) this.#applyPendingValue()\n    }\n\n    #createLabel (selectId:string):HTMLLabelElement {\n        const label = document.createElement('label')\n        label.htmlFor = selectId\n        return label\n    }\n\n    render () {\n        if (this.#select) return\n\n        const authored:(HTMLOptionElement|HTMLOptGroupElement)[] = []\n        const stray:Node[] = []\n        for (const node of Array.from(this.childNodes)) {\n            if (isOptionNode(node)) {\n                authored.push(node)\n            } else if (\n                node.nodeType !== Node.TEXT_NODE ||\n                node.textContent?.trim()\n            ) {\n                stray.push(node)\n            }\n        }\n        if (stray.length) debug('dropping non-option children', stray)\n\n        // The option the parser marked selected. Reapplied after the\n        // move instead of relying on insertion to keep it.\n        const chosen = authored\n            .flatMap(node => {\n                return node instanceof HTMLOptionElement ?\n                    [node] :\n                    Array.from(node.querySelectorAll('option'))\n            })\n            .filter(option => option.selected)\n            .pop()\n\n        // DOM APIs only, so attribute values are never parsed as HTML\n        const select = document.createElement('select')\n        select.id = this.getAttribute('id') ?? this.#generatedId\n        for (const attr of Array.from(this.attributes)) {\n            if (attr.name.startsWith('aria-')) {\n                select.setAttribute(attr.name, attr.value)\n            }\n        }\n        for (const name of FORWARDED_ATTRIBUTES) {\n            const value = this.getAttribute(name)\n            if (value !== null) select.setAttribute(name, value)\n        }\n\n        // Native `change` and `input` bubble out of the host as they\n        // are. Also emit the namespaced event (ADR-005).\n        select.addEventListener('change', () => {\n            // the user's pick replaces a value still waiting for its\n            // option\n            this.#pendingValue = null\n            this.emit<SubstrateSelectChangeDetail>('change', {\n                detail: { value: select.value }\n            })\n        })\n\n        select.append(...authored)\n        if (chosen) chosen.selected = true\n        this.#select = select\n        this.#applyPendingValue()\n        // A value set from code wins over an authored `selected`, as on\n        // a native select, so while it waits nothing is selected\n        if (this.#pendingValue !== null) select.selectedIndex = -1\n\n        const labelText = this.getAttribute('label')\n        if (labelText) {\n            this.#label = this.#createLabel(select.id)\n            this.#label.textContent = labelText\n            this.replaceChildren(this.#label, select)\n        } else {\n            this.replaceChildren(select)\n        }\n\n        // `super`, not `this`: strip the host only; the select keeps\n        // the values. The removal callbacks this causes carry `null`,\n        // which `#moveToSelect` ignores.\n        super.removeAttribute('id')\n        for (const attr of Array.from(this.attributes)) {\n            if (attr.name.startsWith('aria-')) {\n                super.removeAttribute(attr.name)\n            }\n        }\n    }\n}\n\nSubstrateSelect.define()\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,2BAA6B;AAC7B,mBAAkB;AAClB,MAAM,YAAQ,aAAAA,SAAM,kBAAkB;AAgB/B,MAAM,kBAAkB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ;AAKA,MAAM,uBAAuB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ;AAMA,MAAM,sBAAsB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACJ;AAEA,SAAS,aACL,MAC4C;AAC5C,SACI,gBAAgB,qBAChB,gBAAgB;AAExB;AAPS;AAsBF,MAAM,wBAAwB,kCAAa,OAAO,kBAAkB,EAAE;AAAA,EAxH7E,OAwH6E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOzE,OAAO,4BAA4B,CAAC,SAAS,MAAM;AAAA,EACnD,OAAO,6BAA6B,CAAC,YAAY,UAAU;AAAA,EAE3D,WAAW,qBAA+B;AACtC,WAAO;AAAA,MACH,GAAG,MAAM;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACP;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAeA,IAAI,QAAgB;AAChB,QAAI,KAAK,QAAS,QAAO,KAAK,QAAQ;AACtC,WAAO,KAAK,iBAAiB;AAAA,EACjC;AAAA,EAEA,IAAI,MAAO,OAAc;AACrB,UAAM,aAAa,OAAO,SAAS,EAAE;AACrC,QAAI,KAAK,SAAS;AAGd,WAAK,OAAO,MAAM,KAAK,KAAK,UAAU,CAAC;AAEvC,WAAK,gBAAgB;AACrB,WAAK,QAAQ,QAAQ;AACrB;AAAA,IACJ;AACA,SAAK,gBAAgB;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,IAAI,SAAiC;AACjC,WAAO,KAAK;AAAA,EAChB;AAAA,EAEA,UAAiC;AAAA,EACjC,SAA+B;AAAA,EAC/B,gBAA4B;AAAA,EAC5B,YAAkC;AAAA,EAClC,eAAe,sBACX,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,MAAM,GAAG,EAAE;AAAA,EAE1C,oBAAqB;AACjB,UAAM,WAAW;AACjB,eAAW,QAAQ,qBAAqB;AACpC,WAAK,iBAAiB,IAAI;AAAA,IAC9B;AAKA,SAAK,OAAO;AAGZ,SAAK,OAAO,MAAM,KAAK,KAAK,UAAU,CAAC;AAEvC,SAAK,cAAc,IAAI,iBAAiB,aAAW;AAC/C,WAAK,eAAe,OAAO;AAAA,IAC/B,CAAC;AACD,SAAK,UAAU,QAAQ,MAAM,EAAE,WAAW,KAAK,CAAC;AAGhD,QAAI,KAAK,SAAS;AACd,WAAK,UAAU,QAAQ,KAAK,SAAS;AAAA,QACjC,WAAW;AAAA,QACX,SAAS;AAAA,MACb,CAAC;AAAA,IACL;AAAA,EACJ;AAAA,EAEA,uBAAwB;AACpB,UAAM,cAAc;AACpB,QAAI,CAAC,KAAK,UAAW;AAErB,SAAK,eAAe,KAAK,UAAU,YAAY,CAAC;AAChD,SAAK,UAAU,WAAW;AAAA,EAC9B;AAAA,EAEA,yBACI,MACA,UACA,UACF;AACE,QAAI,SAAS,QAAQ,KAAK,WAAW,OAAO,GAAG;AAC3C,WAAK,cAAc,MAAM,QAAQ;AACjC;AAAA,IACJ;AAIA,UAAM;AAAA,MACF;AAAA,MACA;AAAA,MACA;AAAA,IACJ;AAAA,EACJ;AAAA,EAEA,mBAAoB,WAAuB,UAAsB;AAC7D,UAAM,SAAS,KAAK;AACpB,QAAI,CAAC,OAAQ;AAEb,QAAI,CAAC,UAAU;AACX,WAAK,QAAQ,OAAO;AACpB,WAAK,SAAS;AACd;AAAA,IACJ;AAEA,QAAI,CAAC,KAAK,QAAQ;AACd,WAAK,SAAS,KAAK,aAAa,OAAO,EAAE;AACzC,WAAK,aAAa,KAAK,QAAQ,MAAM;AAAA,IACzC;AAEA,SAAK,OAAO,cAAc;AAAA,EAC9B;AAAA,EAEA,kBAAmB,WAAuB,UAAsB;AAC5D,SAAK,SAAS,QAAQ,QAAQ;AAAA,EAClC;AAAA,EAEA,sBAAuB,WAAuB,UAAsB;AAChE,SAAK,SAAS,YAAY,QAAQ;AAAA,EACtC;AAAA,EAEA,sBAAuB,WAAuB,UAAsB;AAChE,SAAK,SAAS,YAAY,QAAQ;AAAA,EACtC;AAAA,EAEA,0BACI,WACA,UACF;AACE,SAAK,SAAS,gBAAgB,QAAQ;AAAA,EAC1C;AAAA,EAEA,kBAAmB,WAAuB,UAAsB;AAC5D,SAAK,SAAS,QAAQ,QAAQ;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,SAAU,MAAa,OAAmB;AACtC,UAAM,SAAS,KAAK;AACpB,QAAI,CAAC,OAAQ;AAEb,QAAI,UAAU,MAAM;AAChB,aAAO,gBAAgB,IAAI;AAAA,IAC/B,OAAO;AACH,aAAO,aAAa,MAAM,KAAK;AAAA,IACnC;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAcA,cAAe,MAAa,OAAmB;AAC3C,UAAM,SAAS,KAAK;AACpB,QAAI,UAAU,QAAQ,CAAC,OAAQ;AAE/B,QAAI,SAAS,MAAM;AACf,WAAK,aAAa,SAAS,KAAK,YAAY;AAAA,IAChD,OAAO;AACH,aAAO,aAAa,MAAM,KAAK;AAAA,IACnC;AACA,UAAM,gBAAgB,IAAI;AAAA,EAC9B;AAAA,EAEA,aAAc,IAAW;AACrB,QAAI,CAAC,KAAK,QAAS;AACnB,SAAK,QAAQ,KAAK;AAClB,QAAI,KAAK,OAAQ,MAAK,OAAO,UAAU;AAAA,EAC3C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaA,gBAAiB,eAAsB;AACnC,UAAM,OAAO,cAAc,YAAY;AACvC,UAAM,SAAS,KAAK;AACpB,QAAI,UAAU,SAAS,MAAM;AACzB,WAAK,aAAa,KAAK,YAAY;AAAA,IACvC,WAAW,UAAU,KAAK,WAAW,OAAO,GAAG;AAC3C,aAAO,gBAAgB,IAAI;AAAA,IAC/B;AACA,UAAM,gBAAgB,aAAa;AAAA,EACvC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,qBAAsB;AAClB,UAAM,SAAS,KAAK;AACpB,UAAM,UAAU,KAAK;AACrB,QAAI,CAAC,UAAU,YAAY,KAAM;AAIjC,UAAM,UAAU,MAAM,KAAK,OAAO,OAAO;AACzC,QAAI,CAAC,QAAQ,KAAK,YAAU,OAAO,UAAU,OAAO,EAAG;AACvD,WAAO,QAAQ;AACf,SAAK,gBAAgB;AAAA,EACzB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,iBAAkB,MAAa;AAC3B,QAAI,CAAC,OAAO,UAAU,eAAe,KAAK,MAAM,IAAI,EAAG;AACvD,UAAM,QAAQ,QAAQ,IAAI,MAAM,IAAI;AACpC,YAAQ,eAAe,MAAM,IAAI;AACjC,YAAQ,IAAI,MAAM,MAAM,KAAK;AAAA,EACjC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,eAAgB,SAA0B;AACtC,UAAM,WAAW,QAAQ,OAAO,YAAU,OAAO,WAAW,IAAI;AAChE,SAAK;AAAA,MACD,SAAS,QAAQ,YAAU,MAAM,KAAK,OAAO,UAAU,CAAC;AAAA,IAC5D;AACA,UAAM,aAAa,QAAQ,KAAK,YAAU;AACtC,aAAO,OAAO,WAAW,QAAQ,OAAO,WAAW,SAAS;AAAA,IAChE,CAAC;AACD,QAAI,WAAY,MAAK,mBAAmB;AAAA,EAC5C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAQ,OAAc;AAClB,UAAM,SAAS,KAAK;AACpB,QAAI,CAAC,OAAQ;AACb,QAAI,QAAQ;AACZ,eAAW,QAAQ,OAAO;AAEtB,UAAI,KAAK,eAAe,KAAM;AAC9B,UAAI,CAAC,aAAa,IAAI,EAAG;AACzB,aAAO,OAAO,IAAI;AAClB,cAAQ;AAAA,IACZ;AAEA,QAAI,MAAO,MAAK,mBAAmB;AAAA,EACvC;AAAA,EAEA,aAAc,UAAkC;AAC5C,UAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,UAAM,UAAU;AAChB,WAAO;AAAA,EACX;AAAA,EAEA,SAAU;AACN,QAAI,KAAK,QAAS;AAElB,UAAM,WAAqD,CAAC;AAC5D,UAAM,QAAe,CAAC;AACtB,eAAW,QAAQ,MAAM,KAAK,KAAK,UAAU,GAAG;AAC5C,UAAI,aAAa,IAAI,GAAG;AACpB,iBAAS,KAAK,IAAI;AAAA,MACtB,WACI,KAAK,aAAa,KAAK,aACvB,KAAK,aAAa,KAAK,GACzB;AACE,cAAM,KAAK,IAAI;AAAA,MACnB;AAAA,IACJ;AACA,QAAI,MAAM,OAAQ,OAAM,gCAAgC,KAAK;AAI7D,UAAM,SAAS,SACV,QAAQ,UAAQ;AACb,aAAO,gBAAgB,oBACnB,CAAC,IAAI,IACL,MAAM,KAAK,KAAK,iBAAiB,QAAQ,CAAC;AAAA,IAClD,CAAC,EACA,OAAO,YAAU,OAAO,QAAQ,EAChC,IAAI;AAGT,UAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,WAAO,KAAK,KAAK,aAAa,IAAI,KAAK,KAAK;AAC5C,eAAW,QAAQ,MAAM,KAAK,KAAK,UAAU,GAAG;AAC5C,UAAI,KAAK,KAAK,WAAW,OAAO,GAAG;AAC/B,eAAO,aAAa,KAAK,MAAM,KAAK,KAAK;AAAA,MAC7C;AAAA,IACJ;AACA,eAAW,QAAQ,sBAAsB;AACrC,YAAM,QAAQ,KAAK,aAAa,IAAI;AACpC,UAAI,UAAU,KAAM,QAAO,aAAa,MAAM,KAAK;AAAA,IACvD;AAIA,WAAO,iBAAiB,UAAU,MAAM;AAGpC,WAAK,gBAAgB;AACrB,WAAK,KAAkC,UAAU;AAAA,QAC7C,QAAQ,EAAE,OAAO,OAAO,MAAM;AAAA,MAClC,CAAC;AAAA,IACL,CAAC;AAED,WAAO,OAAO,GAAG,QAAQ;AACzB,QAAI,OAAQ,QAAO,WAAW;AAC9B,SAAK,UAAU;AACf,SAAK,mBAAmB;AAGxB,QAAI,KAAK,kBAAkB,KAAM,QAAO,gBAAgB;AAExD,UAAM,YAAY,KAAK,aAAa,OAAO;AAC3C,QAAI,WAAW;AACX,WAAK,SAAS,KAAK,aAAa,OAAO,EAAE;AACzC,WAAK,OAAO,cAAc;AAC1B,WAAK,gBAAgB,KAAK,QAAQ,MAAM;AAAA,IAC5C,OAAO;AACH,WAAK,gBAAgB,MAAM;AAAA,IAC/B;AAKA,UAAM,gBAAgB,IAAI;AAC1B,eAAW,QAAQ,MAAM,KAAK,KAAK,UAAU,GAAG;AAC5C,UAAI,KAAK,KAAK,WAAW,OAAO,GAAG;AAC/B,cAAM,gBAAgB,KAAK,IAAI;AAAA,MACnC;AAAA,IACJ;AAAA,EACJ;AACJ;AAEA,gBAAgB,OAAO;",
+  "names": ["Debug"]
+}

package/dist/index.css

@@ -0,0 +1,146 @@
+substrate-select {
+  --substrate-select-text: var(--substrate-text, black);
+  --substrate-select-surface: var(--substrate-surface, white);
+  --substrate-select-border: var(--substrate-border, #9b9b9b);
+  --substrate-select-accent: var(--substrate-accent, #2563eb);
+  --substrate-select-focus: var(--substrate-focus, #2563eb);
+  --substrate-select-focus-width: var(--substrate-focus-width, 2px);
+  --substrate-select-focus-offset: var(--substrate-focus-offset, 2px);
+  --substrate-select-radius: var(--substrate-radius, 0);
+  --substrate-select-option-hover: #f3f4f6;
+  --substrate-select-checked: #1d4ed8;
+  --substrate-select-shadow: 0 4px 12px #21212114;
+  gap: .25rem;
+  display: grid;
+
+  & select {
+    appearance: none;
+    box-sizing: border-box;
+    max-width: 100%;
+    font: inherit;
+    color: var(--substrate-select-text);
+    background-color: var(--substrate-select-surface);
+    border: 1px solid var(--substrate-select-border);
+    border-radius: var(--substrate-select-radius);
+    outline: var(--substrate-select-focus-width) solid transparent;
+    outline-offset: var(--substrate-select-focus-offset);
+    cursor: pointer;
+    background-image: linear-gradient(45deg, #0000 calc(50% - .07rem), currentColor calc(50% - .07rem) calc(50% + .07rem), #0000 calc(50% + .07rem)), linear-gradient(-45deg, #0000 calc(50% - .07rem), currentColor calc(50% - .07rem) calc(50% + .07rem), #0000 calc(50% + .07rem));
+    background-position: calc(100% - 1.4rem) calc(50% + .1rem), calc(100% - 1rem) calc(50% + .1rem);
+    background-repeat: no-repeat;
+    background-size: .4rem .4rem;
+    padding: 1rem 2.75rem .8rem 1rem;
+    transition: border-color .2s, outline-color .2s;
+
+    &:hover:not(:disabled) {
+      border-color: var(--substrate-select-accent);
+    }
+
+    &:focus-visible {
+      outline-color: var(--substrate-select-focus);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: .6;
+    }
+  }
+
+  @supports (appearance: base-select) {
+    & select, & select::picker(select) {
+      appearance: base-select;
+    }
+
+    & select {
+      background-image: none;
+      align-items: center;
+      gap: .75rem;
+      min-block-size: calc(1lh + 1.8rem + 2px);
+      padding-inline-end: 1rem;
+      display: flex;
+
+      &::picker-icon {
+        content: "";
+        box-sizing: border-box;
+        border-bottom: .125rem solid;
+        border-right: .125rem solid;
+        width: .5rem;
+        height: .5rem;
+        margin-inline-start: auto;
+        transition: transform .2s;
+        transform: translateY(-.125rem) rotate(45deg);
+      }
+
+      &:open::picker-icon {
+        transform: translateY(.125rem) rotate(225deg);
+      }
+
+      & option {
+        cursor: pointer;
+        gap: .5rem;
+        padding: .5rem .75rem;
+
+        &:hover, &:focus-visible {
+          background-color: var(--substrate-select-option-hover);
+        }
+
+        &:checked {
+          color: var(--substrate-select-checked);
+        }
+
+        &::checkmark {
+          content: "✓";
+          color: var(--substrate-select-accent);
+        }
+      }
+    }
+
+    & select::picker(select) {
+      color: var(--substrate-select-text);
+      background-color: var(--substrate-select-surface);
+      border: 1px solid var(--substrate-select-border);
+      border-radius: var(--substrate-select-radius);
+      box-shadow: var(--substrate-select-shadow);
+      opacity: 0;
+      transition: opacity .15s,
+                translate .15s,
+                display .15s allow-discrete,
+                overlay .15s allow-discrete;
+      margin-block: .25rem;
+      padding-block: .25rem;
+      translate: 0 -.5rem;
+    }
+
+    & select:open::picker(select) {
+      opacity: 1;
+      translate: 0;
+    }
+
+    @starting-style {
+      & select:open::picker(select) {
+        opacity: 0;
+        translate: 0 -.5rem;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      & select::picker-icon, & select::picker(select) {
+        transition: none;
+      }
+
+      & select::picker(select) {
+        translate: 0;
+      }
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    & select {
+      transition: none;
+    }
+  }
+}
+
+substrate-select:not(:defined) {
+  display: none;
+}