@expressivecss/expressive 0.15.0 → 0.17.0

package/dist/js/chunks/{chunk-WDK4T63U.mjs → chunk-XJPMW5SP.mjs}

@@ -1,23 +1,32 @@
 import {
-  Menu
-} from "./chunk-NUHMOAOY.mjs";
+  imageURL
+} from "./chunk-GE3YMFS6.mjs";
 import {
-  Utils
-} from "./chunk-M372EDXD.mjs";
+  Menu
+} from "./chunk-DWA5UYLJ.mjs";
 import {
   Component
-} from "./chunk-PD6HYHAE.mjs";
+} from "./chunk-EB2V4OKL.mjs";
+import {
+  Utils,
+  afterFormReset,
+  restoreAttribute
+} from "./chunk-67UNY7RH.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._bindReset = () => {
+    };
     this._handleSelectChange = () => {
       this._setValueToInput();
       this._setSelectedStates();
@@ -42,33 +51,28 @@ 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._handleSelectChange();
-          this._clearValidationError();
-        }
-      }, 0);
+    this._handleReset = () => {
+      this._resetSearch();
+      this._handleSelectChange();
+      this._clearValidationError();
     };
-    // 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,13 +80,25 @@ 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]")) {
+      Reflect.set(this.el, new.target.key, void 0);
+      return;
+    }
     this.isMultiple = this.el.multiple;
+    this._searchable = this._canSearch();
     this.nativeTabIndex = this.el.tabIndex;
     this.el.tabIndex = -1;
     this._values = [];
@@ -93,24 +109,17 @@ 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;
     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.
@@ -122,7 +131,7 @@ var FormSelect = class _FormSelect extends Component {
    */
   refresh() {
     if (!this.menuEl) return;
-    this._bindForm();
+    this._bindReset();
     const root = this.menuEl.getRootNode();
     const focused = this._values.find((value) => value.optionEl.contains(root.activeElement))?.el;
     this.input.disabled = this.el.matches(":disabled");
@@ -135,43 +144,30 @@ 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._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.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._bindReset = afterFormReset(this.el, this._handleReset, 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 +185,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 +217,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,24 +295,142 @@ 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() {
+    const visible = new Set(this._values.filter(({ optionEl }) => !optionEl.hidden).map(({ optionEl }) => optionEl.id));
+    for (const group of this._searchResults.querySelectorAll(":scope > li.optgroup")) {
+      group.hidden = !group.getAttribute("aria-owns").split(" ").some((id) => visible.has(id));
+    }
+  }
+  _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 (typeof userOnOpenEnd === "function")
         userOnOpenEnd.call(this.menu, this.el);
@@ -338,9 +444,29 @@ var FormSelect = class _FormSelect extends Component {
     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 +476,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 +489,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 +515,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;
@@ -436,83 +556,38 @@ var FormSelect = class _FormSelect extends Component {
     }
     li.appendChild(span);
     const iconUrl = realOption.getAttribute("data-icon");
-    let imageUrl;
-    if (iconUrl) {
-      try {
-        const url = new URL(iconUrl, this.el.ownerDocument.baseURI);
-        if (["http:", "https:", "blob:"].includes(url.protocol) || /^data:image\/(?:avif|bmp|gif|jpeg|png|svg\+xml|webp|x-icon)(?:;|,)/i.test(url.href)) {
-          imageUrl = url;
-        }
-      } catch {
-      }
-    }
+    const imageUrl = imageURL(iconUrl, this.el.ownerDocument.baseURI);
     const classes = realOption.getAttribute("class")?.split(" ").filter(Boolean);
     if (imageUrl) {
       const img = document.createElement("img");
       if (classes?.length) img.classList.add(...classes);
-      img.src = imageUrl.href;
+      img.src = imageUrl;
       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.from(this.el.selectedOptions);
-  }
   _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-WDK4T63U.mjs.map
+//# sourceMappingURL=chunk-XJPMW5SP.mjs.map