@expressivecss/expressive 0.14.1 → 0.16.0

package/dist/js/chunks/{chunk-QDAL4IYN.mjs → chunk-EC26RU2D.mjs}

@@ -1,12 +1,12 @@
 import {
   Component
-} from "./chunk-LTWPGFBR.mjs";
+} from "./chunk-CMGXGYUC.mjs";
 
 // src/ts/components/characterCounter.ts
 var _defaults = Object.freeze({});
-var CharacterCounter = class _CharacterCounter extends Component {
+var CharacterCounter = class extends Component {
   constructor(el, options) {
-    super(el, {}, _CharacterCounter);
+    super(el, options);
     this.updateCounter = () => {
       const maxLength = parseInt(this.el.getAttribute("maxlength")), actualLength = this.el.value.length;
       this.isValidLength = actualLength <= maxLength;
@@ -17,49 +17,30 @@ var CharacterCounter = class _CharacterCounter extends Component {
       }
       this.counterEl.textContent = counterString;
     };
-    this.el["Expressive_CharacterCounter"] = this;
-    this.options = {
-      ..._CharacterCounter.defaults,
-      ...options
-    };
     this.isInvalid = false;
     this.isValidLength = false;
     this._setupCounter();
     this._setupEventHandlers();
+    this.updateCounter();
   }
   static get defaults() {
     return _defaults;
   }
-  /**
-   * Initializes instances of CharacterCounter.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els, options = {}) {
-    return super.init(els, options, _CharacterCounter);
-  }
-  static getInstance(el) {
-    return el["Expressive_CharacterCounter"];
-  }
   destroy() {
-    this._removeEventHandlers();
-    this.el["Expressive_CharacterCounter"] = void 0;
+    super.destroy();
     this._removeCounter();
+    if (this.isInvalid) this.el.classList.remove("invalid");
   }
   _setupEventHandlers() {
-    this.el.addEventListener("focus", this.updateCounter, true);
-    this.el.addEventListener("input", this.updateCounter, true);
-  }
-  _removeEventHandlers() {
-    this.el.removeEventListener("focus", this.updateCounter, true);
-    this.el.removeEventListener("input", this.updateCounter, true);
+    const options = { capture: true, signal: this._events.signal };
+    this.el.addEventListener("focus", this.updateCounter, options);
+    this.el.addEventListener("input", this.updateCounter, options);
   }
   _setupCounter() {
     this.counterEl = document.createElement("span");
     this.counterEl.classList.add("character-counter");
     this.counterEl.setAttribute("aria-live", "polite");
     this.counterEl.setAttribute("aria-atomic", "true");
-    this.counterEl.style.float = "right";
     this.counterEl.style.fontSize = "12px";
     this.counterEl.style.height = "1";
     this.el.parentElement.appendChild(this.counterEl);
@@ -78,8 +59,9 @@ var CharacterCounter = class _CharacterCounter extends Component {
     }
   }
 };
+CharacterCounter.key = "Expressive_CharacterCounter";
 
 export {
   CharacterCounter
 };
-//# sourceMappingURL=chunk-QDAL4IYN.mjs.map
+//# sourceMappingURL=chunk-EC26RU2D.mjs.map

package/dist/js/chunks/chunk-EC26RU2D.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ts/components/characterCounter.ts"],
+  "sourcesContent": ["import { Component, BaseOptions } from '../core/component';\n\nconst _defaults = Object.freeze({});\n\ntype InputElement = HTMLInputElement | HTMLTextAreaElement;\n\nexport class CharacterCounter extends Component<BaseOptions> {\n  declare el: InputElement;\n  /** Stores the reference to the counter HTML element. */\n  counterEl: HTMLSpanElement;\n  /** Specifies whether the input is valid or not. */\n  isInvalid: boolean;\n  /** Specifies whether the input text has valid length or not. */\n  isValidLength: boolean;\n\n  constructor(el: HTMLInputElement | HTMLTextAreaElement, options: Partial<BaseOptions>) {\n    super(el, options);\n\n    this.isInvalid = false;\n    this.isValidLength = false;\n\n    this._setupCounter();\n    this._setupEventHandlers();\n    // A prefilled field shows its count and over-length state before focus.\n    this.updateCounter();\n  }\n\n  static get defaults(): BaseOptions {\n    return _defaults;\n  }\n\n  static key = 'Expressive_CharacterCounter';\n\n  destroy() {\n    super.destroy();\n    this._removeCounter();\n    if (this.isInvalid) this.el.classList.remove('invalid');\n  }\n\n  _setupEventHandlers() {\n    const options = { capture: true, signal: this._events.signal };\n    this.el.addEventListener('focus', this.updateCounter, options);\n    this.el.addEventListener('input', this.updateCounter, options);\n  }\n\n  _setupCounter() {\n    this.counterEl = document.createElement('span');\n    this.counterEl.classList.add('character-counter');\n    // The count is the whole point of the component and it changes as the\n    // user types, so it has to be a live region - otherwise a screen reader\n    // user reaches the limit without ever being told one existed. Polite so\n    // it waits for a pause instead of interrupting every keystroke, and\n    // atomic so \"18/20\" is read as one figure rather than a changed digit.\n    this.counterEl.setAttribute('aria-live', 'polite');\n    this.counterEl.setAttribute('aria-atomic', 'true');\n    this.counterEl.style.fontSize = '12px';\n    this.counterEl.style.height = '1';\n    this.el.parentElement.appendChild(this.counterEl);\n  }\n\n  _removeCounter() {\n    this.counterEl.remove();\n  }\n\n  updateCounter = () => {\n    const maxLength = parseInt(this.el.getAttribute('maxlength')),\n      actualLength = this.el.value.length;\n\n    this.isValidLength = actualLength <= maxLength;\n    let counterString = actualLength.toString();\n    if (maxLength) {\n      counterString += '/' + maxLength;\n      this._validateInput();\n    }\n    this.counterEl.textContent = counterString;\n  };\n\n  _validateInput() {\n    if (this.isValidLength && this.isInvalid) {\n      this.isInvalid = false;\n      this.el.classList.remove('invalid');\n    } else if (!this.isValidLength && !this.isInvalid) {\n      this.isInvalid = true;\n      this.el.classList.remove('valid');\n      this.el.classList.add('invalid');\n    }\n  }\n}\n"],
+  "mappings": ";;;;;AAEA,IAAM,YAAY,OAAO,OAAO,CAAC,CAAC;AAI3B,IAAM,mBAAN,cAA+B,UAAuB;AAAA,EAS3D,YAAY,IAA4C,SAA+B;AACrF,UAAM,IAAI,OAAO;AAgDnB,yBAAgB,MAAM;AACpB,YAAM,YAAY,SAAS,KAAK,GAAG,aAAa,WAAW,CAAC,GAC1D,eAAe,KAAK,GAAG,MAAM;AAE/B,WAAK,gBAAgB,gBAAgB;AACrC,UAAI,gBAAgB,aAAa,SAAS;AAC1C,UAAI,WAAW;AACb,yBAAiB,MAAM;AACvB,aAAK,eAAe;AAAA,MACtB;AACA,WAAK,UAAU,cAAc;AAAA,IAC/B;AAzDE,SAAK,YAAY;AACjB,SAAK,gBAAgB;AAErB,SAAK,cAAc;AACnB,SAAK,oBAAoB;AAEzB,SAAK,cAAc;AAAA,EACrB;AAAA,EAEA,WAAW,WAAwB;AACjC,WAAO;AAAA,EACT;AAAA,EAIA,UAAU;AACR,UAAM,QAAQ;AACd,SAAK,eAAe;AACpB,QAAI,KAAK,UAAW,MAAK,GAAG,UAAU,OAAO,SAAS;AAAA,EACxD;AAAA,EAEA,sBAAsB;AACpB,UAAM,UAAU,EAAE,SAAS,MAAM,QAAQ,KAAK,QAAQ,OAAO;AAC7D,SAAK,GAAG,iBAAiB,SAAS,KAAK,eAAe,OAAO;AAC7D,SAAK,GAAG,iBAAiB,SAAS,KAAK,eAAe,OAAO;AAAA,EAC/D;AAAA,EAEA,gBAAgB;AACd,SAAK,YAAY,SAAS,cAAc,MAAM;AAC9C,SAAK,UAAU,UAAU,IAAI,mBAAmB;AAMhD,SAAK,UAAU,aAAa,aAAa,QAAQ;AACjD,SAAK,UAAU,aAAa,eAAe,MAAM;AACjD,SAAK,UAAU,MAAM,WAAW;AAChC,SAAK,UAAU,MAAM,SAAS;AAC9B,SAAK,GAAG,cAAc,YAAY,KAAK,SAAS;AAAA,EAClD;AAAA,EAEA,iBAAiB;AACf,SAAK,UAAU,OAAO;AAAA,EACxB;AAAA,EAeA,iBAAiB;AACf,QAAI,KAAK,iBAAiB,KAAK,WAAW;AACxC,WAAK,YAAY;AACjB,WAAK,GAAG,UAAU,OAAO,SAAS;AAAA,IACpC,WAAW,CAAC,KAAK,iBAAiB,CAAC,KAAK,WAAW;AACjD,WAAK,YAAY;AACjB,WAAK,GAAG,UAAU,OAAO,OAAO;AAChC,WAAK,GAAG,UAAU,IAAI,SAAS;AAAA,IACjC;AAAA,EACF;AACF;AAjFa,iBAyBJ,MAAM;",
+  "names": []
+}

package/dist/js/chunks/{chunk-3GVFZ4XO.mjs → chunk-EVCVFEV3.mjs}

@@ -1,21 +1,24 @@
 import {
   Menu
-} from "./chunk-JIDMQGK6.mjs";
-import {
-  Utils
-} from "./chunk-MNPROCZF.mjs";
+} from "./chunk-CSYWKEK3.mjs";
 import {
   Component
-} from "./chunk-LTWPGFBR.mjs";
+} from "./chunk-CMGXGYUC.mjs";
+import {
+  Utils,
+  restoreAttribute
+} from "./chunk-ZVLOUDIJ.mjs";
 
 // src/ts/components/select.ts
 var _defaults = {
   classes: "",
-  menuOptions: {}
+  menuOptions: {},
+  searchable: false,
+  i18n: { searchLabel: "Search options", noResults: "No results" }
 };
-var FormSelect = class _FormSelect extends Component {
+var _FormSelect = class _FormSelect extends Component {
   constructor(el, options) {
-    super(el, options, _FormSelect);
+    super(el, options);
     this._originalLabels = /* @__PURE__ */ new Map();
     this._validationMessage = null;
     this._handleSelectChange = () => {
@@ -42,33 +45,33 @@ var FormSelect = class _FormSelect extends Component {
     // Native reporting chooses the control; static checks never focus. Wait until
     // reporting finishes so Firefox dismisses its native popup when focus moves.
     this._handleNativeFocus = () => queueMicrotask(() => {
-      if (_FormSelect.getInstance(this.el) === this && this.el.matches(":focus")) this.input.focus();
+      if (this.constructor.getInstance(this.el) === this && this.el.matches(":focus")) this.input.focus();
     });
     this._handleReset = (e) => {
       clearTimeout(this._resetTimer);
       this._resetTimer = setTimeout(() => {
         if (!e.defaultPrevented) {
+          this._resetSearch();
           this._handleSelectChange();
           this._clearValidationError();
         }
       }, 0);
     };
-    // Named rather than inline so that _removeEventHandlers can actually detach
-    // it - an anonymous listener per option was unremovable.
     this._handleOptionKeydown = (e) => {
       if (e.key === " " || e.key === "Enter") this._handleOptionClick(e);
     };
     this._handleOptionClick = (e) => {
-      e.preventDefault();
+      if (!e.target.matches('input[type="checkbox"]')) e.preventDefault();
       const virtualOption = e.target.closest("li");
       this._selectOptionElement(virtualOption);
       e.stopPropagation();
     };
     this._handleOptionFocus = (e) => {
+      if (this._searchInput) return;
       const target = e.target;
       if (!(target instanceof Element)) return;
       const li = target.closest('li[role="option"]');
-      if (li?.id) this.input.setAttribute("aria-activedescendant", li.id);
+      if (li) this.input.setAttribute("aria-activedescendant", li.id);
     };
     this._handleInputClick = () => {
       if (this.menu && this.menu.isOpen) {
@@ -76,14 +79,26 @@ var FormSelect = class _FormSelect extends Component {
         this._setSelectedStates();
       }
     };
-    if (this.el.classList.contains("browser-default")) return;
-    this.el["Expressive_FormSelect"] = this;
-    this.options = {
-      ..._FormSelect.defaults,
-      ...options
+    this._filterOptions = () => {
+      const query = this._searchInput.value.trim().toLowerCase();
+      this._filterSearch(query);
+      this._searchStatus.textContent = this._values.some(({ optionEl }) => !optionEl.hidden) ? "" : this.options.i18n.noResults;
+      this.input.removeAttribute("aria-activedescendant");
+      this.menu?.recalculateDimensions();
+    };
+    this._handleSearchKeydown = (e) => {
+      e.stopPropagation();
+      if (!Utils.plainKey(e) || Utils.isComposing(e)) return;
+      if (this._searchDismissKey(e)) return;
+      this._searchNavigate(e);
     };
+    if (this.el.classList.contains("browser-default") || new.target === _FormSelect && this.el.matches("[data-tree]")) {
+      this.el[new.target.key] = void 0;
+      return;
+    }
     this.isMultiple = this.el.multiple;
-    this.nativeTabIndex = this.el.tabIndex ?? -1;
+    this._searchable = this._canSearch();
+    this.nativeTabIndex = this.el.tabIndex;
     this.el.tabIndex = -1;
     this._values = [];
     this._createdWrapper = false;
@@ -93,24 +108,18 @@ var FormSelect = class _FormSelect extends Component {
   static get defaults() {
     return _defaults;
   }
-  /**
-   * Initializes instances of FormSelect.
-   * @param els HTML elements.
-   * @param options Component options.
-   */
-  static init(els, options = {}) {
-    return super.init(els, options, _FormSelect);
-  }
-  static getInstance(el) {
-    return el["Expressive_FormSelect"];
+  _canSearch() {
+    return this.constructor === _FormSelect && this.options.searchable;
   }
   destroy() {
-    this._removeEventHandlers();
+    this._events.abort();
+    if (!this.menuEl) return;
+    clearTimeout(this._resetTimer);
     this._clearValidationError();
     this.menu?.destroy();
     this._removeMenu();
     this.el.tabIndex = this.nativeTabIndex;
-    this.el["Expressive_FormSelect"] = void 0;
+    super.destroy();
   }
   /**
    * Re-read the native `<select>` and update the generated menu to match.
@@ -135,43 +144,35 @@ var FormSelect = class _FormSelect extends Component {
     if (this.menu) this.menu.focusedIndex = -1;
     if (this.menu?.isOpen) {
       this.menu.recalculateDimensions();
-      if (focused) (this._values.find((value) => value.el === focused)?.optionEl ?? this.input).focus();
+      this._restoreOptionFocus(focused);
     }
   }
+  _restoreOptionFocus(option) {
+    if (!option) return;
+    const rows = this._values.filter(({ el, optionEl }) => el === option && optionEl.tabIndex === 0).map(({ optionEl }) => optionEl);
+    (rows[0] || this._searchInput || this.input).focus();
+  }
   _setupEventHandlers() {
+    const { signal } = this._events;
     this._setupOptionHandlers();
-    this.el.addEventListener("change", this._handleSelectChange);
-    this.el.addEventListener("invalid", this._handleInvalid);
-    this.el.addEventListener("focus", this._handleNativeFocus);
-    this.input.addEventListener("click", this._handleInputClick);
-    this.menuEl.addEventListener("focusin", this._handleOptionFocus);
+    this.el.addEventListener("change", this._handleSelectChange, { signal });
+    this.el.addEventListener("invalid", this._handleInvalid, { signal });
+    this.el.addEventListener("focus", this._handleNativeFocus, { signal });
+    this.input.addEventListener("click", this._handleInputClick, { signal });
+    this.menuEl.addEventListener("focusin", this._handleOptionFocus, { signal });
     this._bindForm();
   }
   _bindForm() {
     this._form?.removeEventListener("reset", this._handleReset);
     this._form = this.el.form;
-    this._form?.addEventListener("reset", this._handleReset);
-  }
-  _removeEventHandlers() {
-    this._removeOptionHandlers();
-    this.el.removeEventListener("change", this._handleSelectChange);
-    this.el.removeEventListener("invalid", this._handleInvalid);
-    this.el.removeEventListener("focus", this._handleNativeFocus);
-    this.input?.removeEventListener("click", this._handleInputClick);
-    this.menuEl?.removeEventListener("focusin", this._handleOptionFocus);
-    this._form?.removeEventListener("reset", this._handleReset);
-    clearTimeout(this._resetTimer);
+    this._form?.addEventListener("reset", this._handleReset, { signal: this._events.signal });
   }
+  // A rebuild replaces the rows, and no event reaches the old ones.
   _setupOptionHandlers() {
+    const { signal } = this._events;
     this.menuEl.querySelectorAll("li:not(.optgroup)").forEach((el) => {
-      el.addEventListener("click", this._handleOptionClick);
-      el.addEventListener("keydown", this._handleOptionKeydown);
-    });
-  }
-  _removeOptionHandlers() {
-    this.menuEl?.querySelectorAll("li:not(.optgroup)").forEach((el) => {
-      el.removeEventListener("click", this._handleOptionClick);
-      el.removeEventListener("keydown", this._handleOptionKeydown);
+      el.addEventListener("click", this._handleOptionClick, { signal });
+      el.addEventListener("keydown", this._handleOptionKeydown, { signal });
     });
   }
   _syncValidationError() {
@@ -189,34 +190,25 @@ var FormSelect = class _FormSelect extends Component {
     this._validationMessage.remove();
     this._validationMessage = null;
   }
-  _arraysEqual(a, b) {
-    if (a === b) return true;
-    if (a == null || b == null) return false;
-    if (a.length !== b.length) return false;
-    for (let i = 0; i < a.length; ++i) if (a[i] !== b[i]) return false;
-    return true;
-  }
   _selectOptionElement(virtualOption) {
+    if (virtualOption.hidden) return;
     if (this.el.matches(":disabled")) return;
     if (!virtualOption.classList.contains("disabled") && !virtualOption.classList.contains("optgroup")) {
       const value = this._values.find((value2) => value2.optionEl === virtualOption);
       if (!value || value.el.matches(":disabled")) return;
-      const previousSelectedValues = this.getSelectedValues();
-      if (this.isMultiple) {
-        this._toggleEntryFromArray(value);
-      } else {
-        this._deselectAll();
-        this._selectValue(value);
-      }
+      const previousSelectedValues = JSON.stringify(this.getSelectedValues());
+      value.el.selected = !this.isMultiple || !value.el.selected;
       this._handleSelectChange();
-      const actualSelectedValues = this.getSelectedValues();
-      const selectionHasChanged = !this._arraysEqual(previousSelectedValues, actualSelectedValues);
-      if (selectionHasChanged)
+      if (JSON.stringify(this.getSelectedValues()) !== previousSelectedValues)
         this.el.dispatchEvent(
           new Event("change", { bubbles: true, cancelable: true, composed: true })
         );
+      if (!this.isMultiple) this._closeSingleSelect();
     }
-    if (!this.isMultiple) this.menu?.close();
+  }
+  _closeSingleSelect() {
+    this.menu?.close();
+    if (this._searchInput) this.input.focus();
   }
   _setupMenu() {
     this.labelEl = this.el.labels?.[0] ?? null;
@@ -230,15 +222,16 @@ var FormSelect = class _FormSelect extends Component {
     this._setupWrapper();
     this._hideNativeSelect();
     if (this.el.matches(":disabled")) this.wrapper.classList.add("disabled");
-    this.menuEl = document.createElement("menu");
+    this.menuEl = document.createElement(this._searchable ? "div" : "menu");
+    this.menuEl.popover = "manual";
     this.menuEl.id = `select-options-${Utils.guid()}`;
-    this.menuEl.setAttribute("popover", "auto");
     this.menuEl.setAttribute("role", "listbox");
     this.menuEl.ariaMultiSelectable = this.isMultiple.toString();
     if (this.isMultiple) this.menuEl.classList.add("multiple-select-menu");
     this._buildOptions();
     this.wrapper.append(this.menuEl);
     this._buildInput();
+    if (this._searchable) this._buildSearch();
     this._buildCaret();
     this._initMenu();
     this._setSelectedStates();
@@ -307,40 +300,178 @@ var FormSelect = class _FormSelect extends Component {
     caret.setAttribute("aria-hidden", "true");
     this.wrapper.prepend(caret);
   }
+  _buildSearch() {
+    this.menuEl.classList.add("select-search-popup");
+    this.menuEl.setAttribute("role", "dialog");
+    this.menuEl.removeAttribute("aria-multiselectable");
+    this.menuEl.classList.remove("multiple-select-menu");
+    this.input.setAttribute("aria-haspopup", "dialog");
+    this._searchResults = this._searchList();
+    this._searchInput = document.createElement("input");
+    this._searchInput.type = "search";
+    this._searchInput.placeholder = this.options.i18n.searchLabel;
+    this._searchInput.setAttribute("aria-label", this.options.i18n.searchLabel);
+    this._searchStatus = document.createElement("div");
+    this._searchStatus.setAttribute("role", "status");
+    this.menuEl.append(this._searchInput, this._searchStatus, this._searchResults);
+    this._searchInput.addEventListener("input", this._filterOptions, { signal: this._events.signal });
+    this.menuEl.addEventListener("keydown", this._handleSearchKeydown, { signal: this._events.signal, capture: true });
+    this._nameSearch();
+    this._filterOptions();
+  }
+  _searchList() {
+    const list = document.createElement("menu");
+    list.id = this.menuEl.id + "-list";
+    list.setAttribute("role", "listbox");
+    list.ariaMultiSelectable = this.isMultiple.toString();
+    list.classList.toggle("multiple-select-menu", this.isMultiple);
+    list.append(...this.menuEl.childNodes);
+    return list;
+  }
+  _nameSearch() {
+    const labels = Array.from(this._originalLabels.keys(), (label, index) => {
+      if (!label.id) label.id = this.input.id + "-label-" + index;
+      return label.id;
+    }).join(" ");
+    const attribute = this.input.hasAttribute("aria-labelledby") ? "aria-labelledby" : "aria-label";
+    const name = this.input.getAttribute(attribute);
+    [this.menuEl, this._searchResults].forEach((el) => el.setAttribute(name ? attribute : "aria-labelledby", name || labels));
+  }
+  _filterSearch(query) {
+    this._values.forEach(({ el, optionEl }) => {
+      optionEl.hidden = !el.textContent.trim().toLowerCase().includes(query);
+      optionEl.tabIndex = optionEl.hidden || el.matches(":disabled") ? -1 : 0;
+    });
+    this._filterGroups();
+  }
+  _filterGroups() {
+    for (const group of this._searchResults.querySelectorAll(":scope > li.optgroup")) {
+      const ids = new Set(group.getAttribute("aria-owns").split(" "));
+      group.hidden = !this._values.some(({ optionEl }) => ids.has(optionEl.id) && !optionEl.hidden);
+    }
+  }
+  _searchRows() {
+    return this._values.map(({ optionEl }) => optionEl).filter((row) => row.tabIndex !== -1);
+  }
+  _searchDismissKey(e) {
+    if (e.key === "Tab") {
+      this._searchTab(e);
+      return true;
+    }
+    if (e.key !== "Escape") return false;
+    e.preventDefault();
+    this._closeSingleSelect();
+    return true;
+  }
+  _searchTab(e) {
+    if (e.shiftKey) {
+      e.preventDefault();
+      this._searchBackwardTab(e);
+      return;
+    }
+    const first = this._searchRows()[0];
+    if (e.target === this._searchInput && first) {
+      e.preventDefault();
+      first.focus();
+      return;
+    }
+    this._closeSingleSelect();
+  }
+  _searchBackwardTab(e) {
+    if (e.target === this._searchInput) this._closeSingleSelect();
+    else this._searchInput.focus();
+  }
+  _searchNavigate(e) {
+    if (e.target === this._searchInput) {
+      this._searchInputKey(e);
+      return;
+    }
+    this._searchRowKey(e);
+  }
+  _searchInputKey(e) {
+    if (e.key === "Enter") e.preventDefault();
+    if (!["ArrowDown", "ArrowUp"].includes(e.key)) return;
+    e.preventDefault();
+    const rows = this._searchRows();
+    this._focusSearchRow(rows[e.key === "ArrowUp" ? rows.length - 1 : 0]);
+  }
+  _focusSearchRow(row) {
+    if (row) row.focus();
+  }
+  _searchRowKey(e) {
+    if (["Enter", " "].includes(e.key)) {
+      e.preventDefault();
+      this._selectOptionElement(e.target);
+      return;
+    }
+    const target = Utils.focusTarget([this._searchInput, ...this._searchRows()], e, { ArrowDown: 1, ArrowUp: -1 });
+    if (!target) return;
+    e.preventDefault();
+    if (e.key === "Home") this._searchRows()[0]?.focus();
+    else target.focus();
+  }
+  _clearSearch() {
+    if (!this._searchInput) return;
+    this._searchInput.value = "";
+    this._filterOptions();
+  }
+  _resetSearch() {
+    if (!this._searchInput) return;
+    this.menu?.close();
+    this._clearSearch();
+  }
+  _bindSearchClose(options) {
+    const onCloseStart = options.onCloseStart;
+    options.onCloseStart = () => {
+      this._clearSearch();
+      return onCloseStart?.call(this.menu, this.el);
+    };
+  }
   _initMenu() {
     if (this.el.matches(":disabled")) return;
     const menuOptions = { ...this.options.menuOptions };
+    if (this._searchInput) this._bindSearchClose(menuOptions);
     menuOptions.coverTrigger = false;
     const userOnOpenEnd = menuOptions.onOpenEnd;
     const userOnCloseEnd = menuOptions.onCloseEnd;
     menuOptions.onOpenEnd = () => {
-      const selectedOption = this.menuEl.querySelector(".selected");
-      if (selectedOption) {
-        this.menu.focusedIndex = [...selectedOption.parentNode.children].indexOf(selectedOption);
-        this.menu._focusFocusedItem();
-        if (this.menu.isScrollable) {
-          let scrollOffset = selectedOption.getBoundingClientRect().top - this.menuEl.getBoundingClientRect().top;
-          scrollOffset -= this.menuEl.clientHeight / 2;
-          this.menuEl.scrollTop = scrollOffset;
-        }
-        if (selectedOption.id) this.input.setAttribute("aria-activedescendant", selectedOption.id);
-      }
+      this._focusMenu();
       this.input.ariaExpanded = "true";
-      if (userOnOpenEnd && typeof userOnOpenEnd === "function")
+      if (typeof userOnOpenEnd === "function")
         userOnOpenEnd.call(this.menu, this.el);
     };
     menuOptions.onCloseEnd = () => {
       this.input.ariaExpanded = "false";
       this.input.removeAttribute("aria-activedescendant");
-      if (userOnCloseEnd && typeof userOnCloseEnd === "function")
+      if (typeof userOnCloseEnd === "function")
         userOnCloseEnd.call(this.menu, this.el);
     };
     menuOptions.closeOnClick = false;
     this.menu = Menu.init(this.input, menuOptions);
   }
+  _focusMenu() {
+    if (!this._searchInput) return this._focusSelected();
+    if (this.menu.options.autoFocus && !Utils.focusIsIn(this.menuEl)) this._searchInput.focus();
+  }
+  /** Moves focus to the selected row of the opened menu, centred when it scrolls. */
+  _focusSelected() {
+    const selectedOption = this.menuEl.querySelector(".selected");
+    if (!selectedOption) return;
+    this.menu.focusedIndex = [...selectedOption.parentNode.children].indexOf(selectedOption);
+    this.menu._focusFocusedItem();
+    if (this.menu.isScrollable) {
+      let scrollOffset = selectedOption.getBoundingClientRect().top - this.menuEl.getBoundingClientRect().top;
+      scrollOffset -= this.menuEl.clientHeight / 2;
+      this.menuEl.scrollTop = scrollOffset;
+    }
+    if (selectedOption.id) this.input.setAttribute("aria-activedescendant", selectedOption.id);
+  }
   _nativeOptions() {
     return Array.from(this.el.children).filter((el) => ["OPTION", "OPTGROUP"].includes(el.tagName));
   }
+  get _optionList() {
+    return this._searchResults ?? this.menuEl;
+  }
   _buildOptions() {
     this.selectOptions = this._nativeOptions();
     this._values = [];
@@ -350,7 +481,7 @@ var FormSelect = class _FormSelect extends Component {
           realOption,
           this.isMultiple ? "multiple" : void 0
         );
-        this._addOptionToValues(realOption, virtualOption);
+        this._values.push({ el: realOption, optionEl: virtualOption });
       } else if (realOption.tagName === "OPTGROUP") {
         const groupId = "opt-group-" + Utils.guid();
         const groupParent = document.createElement("li");
@@ -363,27 +494,24 @@ var FormSelect = class _FormSelect extends Component {
         groupLabel.setAttribute("role", "presentation");
         groupLabel.textContent = realOption.getAttribute("label") ?? "";
         groupParent.replaceChildren(groupLabel);
-        this.menuEl.append(groupParent);
+        this._optionList.append(groupParent);
         const groupChildren = [];
         const selectOptions = Array.from(realOption.children).filter((el) => el.tagName === "OPTION");
         selectOptions.forEach((child) => {
           const virtualOption = this._createAndAppendOptionWithIcon(child, "optgroup-option");
           groupChildren.push(virtualOption.id);
-          this._addOptionToValues(child, virtualOption);
+          this._values.push({ el: child, optionEl: virtualOption });
         });
         groupParent.setAttribute("aria-owns", groupChildren.join(" "));
       }
     });
   }
   _rebuildOptions() {
-    this._removeOptionHandlers();
-    this.menuEl.replaceChildren();
+    this._optionList.replaceChildren();
     this._buildOptions();
     this._setupOptionHandlers();
     this.menu?._makeMenuFocusable();
-  }
-  _addOptionToValues(realOption, virtualOption) {
-    this._values.push({ el: realOption, optionEl: virtualOption });
+    if (this._searchInput) this._filterOptions();
   }
   _removeMenu() {
     this.wrapper?.querySelector(":scope > .caret")?.remove();
@@ -392,10 +520,7 @@ var FormSelect = class _FormSelect extends Component {
     const hide = this.el.parentElement;
     if (hide?.classList.contains("hide-select")) hide.replaceWith(this.el);
     this._originalLabels.forEach((original, label) => {
-      for (const name of ["for", "id"]) {
-        if (original[name] === null) label.removeAttribute(name);
-        else label.setAttribute(name, original[name]);
-      }
+      for (const name of ["for", "id"]) restoreAttribute(label, name, original[name]);
     });
     this._labelPlaceholder?.replaceWith(this.labelEl);
     if (!this.wrapper) return;
@@ -454,68 +579,29 @@ var FormSelect = class _FormSelect extends Component {
       img.ariaHidden = "true";
       li.prepend(img);
     }
-    this.menuEl.append(li);
+    this._optionList.append(li);
     return li;
   }
-  _selectValue(value) {
-    value.el.selected = true;
-    value.optionEl.classList.add("selected");
-    value.optionEl.ariaSelected = "true";
-    const checkbox = value.optionEl.querySelector('input[type="checkbox"]');
-    if (checkbox) checkbox.checked = true;
-  }
-  _deselectValue(value) {
-    value.el.selected = false;
-    value.optionEl.classList.remove("selected");
-    value.optionEl.ariaSelected = "false";
-    const checkbox = value.optionEl.querySelector('input[type="checkbox"]');
-    if (checkbox) checkbox.checked = false;
-  }
-  _deselectAll() {
-    this._values.forEach((value) => this._deselectValue(value));
-  }
-  _isValueSelected(value) {
-    return value.el.selected;
-  }
-  _toggleEntryFromArray(value) {
-    if (this._isValueSelected(value)) this._deselectValue(value);
-    else this._selectValue(value);
-  }
-  _getSelectedOptions() {
-    return Array.prototype.filter.call(
-      this.el.selectedOptions,
-      (realOption) => realOption
-    );
-  }
   _setValueToInput() {
-    this.input.value = this._getSelectedOptions().map((option) => option.textContent.trim()).join(", ");
+    this.input.value = Array.from(this.el.selectedOptions, (option) => option.textContent.trim()).join(", ");
   }
+  /** Shows each option's selection on its row and checkbox. */
   _setSelectedStates() {
-    this._values.forEach((value) => {
-      const optionIsSelected = value.el.selected;
-      const cb = value.optionEl.querySelector('input[type="checkbox"]');
-      if (cb) cb.checked = optionIsSelected;
-      if (optionIsSelected) {
-        this._activateOption(this.menuEl, value.optionEl);
-      } else {
-        value.optionEl.classList.remove("selected");
-        value.optionEl.ariaSelected = "false";
-      }
+    this._values.forEach(({ el, optionEl }) => {
+      optionEl.classList.toggle("selected", el.selected);
+      optionEl.ariaSelected = String(el.selected);
+      const checkbox = optionEl.querySelector('input[type="checkbox"]');
+      if (checkbox) checkbox.checked = el.selected;
     });
   }
-  _activateOption(ul, li) {
-    if (!li) return;
-    if (!this.isMultiple)
-      ul.querySelectorAll("li.selected").forEach((row) => row.classList.remove("selected"));
-    li.classList.add("selected");
-    li.ariaSelected = "true";
-  }
   getSelectedValues() {
-    return this._getSelectedOptions().map((realOption) => realOption.value);
+    return Array.from(this.el.selectedOptions, (option) => option.value);
   }
 };
+_FormSelect.key = "Expressive_FormSelect";
+var FormSelect = _FormSelect;
 
 export {
   FormSelect
 };
-//# sourceMappingURL=chunk-3GVFZ4XO.mjs.map
+//# sourceMappingURL=chunk-EVCVFEV3.mjs.map