forge-select 0.2.0 → 0.3.0

package/dist/index.global.js

@@ -1,901 +1,2 @@
-"use strict";
-var ForgeSelectBundle = (() => {
-  var __defProp = Object.defineProperty;
-  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-  var __getOwnPropNames = Object.getOwnPropertyNames;
-  var __hasOwnProp = Object.prototype.hasOwnProperty;
-  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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-  // src/index.ts
-  var index_exports = {};
-  __export(index_exports, {
-    ForgeSelect: () => ForgeSelect,
-    default: () => ForgeSelect
-  });
-
-  // src/emitter.ts
-  var Emitter = class {
-    constructor() {
-      this.handlers = /* @__PURE__ */ new Map();
-    }
-    on(event, handler) {
-      let set = this.handlers.get(event);
-      if (!set) {
-        set = /* @__PURE__ */ new Set();
-        this.handlers.set(event, set);
-      }
-      set.add(handler);
-    }
-    off(event, handler) {
-      this.handlers.get(event)?.delete(handler);
-    }
-    emit(event, ...args) {
-      const set = this.handlers.get(event);
-      if (!set) return;
-      for (const handler of [...set]) handler(...args);
-    }
-    clear() {
-      this.handlers.clear();
-    }
-  };
-
-  // src/i18n.ts
-  var locales = {
-    en: {
-      noResults: "No results found",
-      loading: "Loading\u2026",
-      loadingMore: "Loading more\u2026",
-      createOption: 'Create "{query}"',
-      clearSelection: "Clear selection",
-      removeItem: "Remove {label}",
-      search: "Search"
-    },
-    vi: {
-      noResults: "Kh\xF4ng t\xECm th\u1EA5y k\u1EBFt qu\u1EA3",
-      loading: "\u0110ang t\u1EA3i\u2026",
-      loadingMore: "\u0110ang t\u1EA3i th\xEAm\u2026",
-      createOption: 'T\u1EA1o "{query}"',
-      clearSelection: "X\xF3a l\u1EF1a ch\u1ECDn",
-      removeItem: "X\xF3a {label}",
-      search: "T\xECm ki\u1EBFm"
-    }
-  };
-  function getStrings(language) {
-    if (typeof language === "string") {
-      return locales[language] ?? locales.en;
-    }
-    return { ...locales.en, ...language };
-  }
-  function format(template, vars) {
-    return template.replace(/\{(\w+)\}/g, (match, key) => vars[key] ?? match);
-  }
-
-  // src/ForgeSelect.ts
-  var DEFAULT_ITEM_HEIGHT = 36;
-  var VIRTUAL_BUFFER = 5;
-  var VIRTUAL_THRESHOLD = 100;
-  var ROW_CACHE_LIMIT = 2e3;
-  var uidCounter = 0;
-  function isGroup(item) {
-    return item.options !== void 0;
-  }
-  function collectDescendantValues(option) {
-    if (!option.children) return [];
-    const values = [];
-    for (const child of option.children) {
-      values.push(child.value, ...collectDescendantValues(child));
-    }
-    return values;
-  }
-  function computeCheckState(option, selected) {
-    if (!option.children || option.children.length === 0) {
-      return selected.includes(option.value) ? "all" : "none";
-    }
-    const states = option.children.map((child) => computeCheckState(child, selected));
-    if (states.every((s) => s === "all")) return "all";
-    if (states.every((s) => s === "none")) return "none";
-    return "some";
-  }
-  var ForgeSelect = class {
-    constructor(target, options = {}) {
-      this.selected = [];
-      this.selectedOptions = /* @__PURE__ */ new Map();
-      this.emitter = new Emitter();
-      this.uid = `forge-select-${++uidCounter}`;
-      this.searchInput = null;
-      this.isOpen = false;
-      this.isDisabled = false;
-      this.destroyed = false;
-      this.query = "";
-      this.rows = [];
-      this.navItems = [];
-      this.highlightedIndex = -1;
-      this.rowContentCache = /* @__PURE__ */ new Map();
-      this.expandedValues = /* @__PURE__ */ new Set();
-      this.loading = false;
-      this.loadingMore = false;
-      this.page = 0;
-      this.hasMore = true;
-      this.ajaxTimer = null;
-      this.ajaxRequestId = 0;
-      this.remoteLoaded = false;
-      this.onDocumentMouseDown = (event) => {
-        if (!this.root.contains(event.target)) this.close();
-      };
-      const el = typeof target === "string" ? document.querySelector(target) : target;
-      if (!el) {
-        throw new Error(`ForgeSelect: target element not found: ${String(target)}`);
-      }
-      this.el = el;
-      const nativeSelect = el instanceof HTMLSelectElement ? el : null;
-      this.opts = {
-        placeholder: options.placeholder ?? "",
-        searchable: options.searchable ?? true,
-        multiple: options.multiple ?? nativeSelect?.multiple ?? false,
-        clearable: options.clearable ?? false,
-        allowCreate: options.allowCreate ?? false,
-        theme: options.theme ?? "default",
-        disabled: options.disabled ?? false,
-        data: options.data,
-        ajax: options.ajax,
-        templateResult: options.templateResult,
-        templateSelection: options.templateSelection,
-        virtualScroll: options.virtualScroll,
-        itemHeight: options.itemHeight ?? DEFAULT_ITEM_HEIGHT,
-        language: options.language ?? "en",
-        plugins: options.plugins ?? []
-      };
-      this.strings = getStrings(this.opts.language);
-      this.plugins = this.opts.plugins;
-      this.data = this.opts.data ?? (nativeSelect ? parseNativeOptions(nativeSelect) : []);
-      if (nativeSelect && !this.opts.data) {
-        for (const option of Array.from(nativeSelect.querySelectorAll("option"))) {
-          if (option.hasAttribute("selected")) this.selectValue(option.value, false);
-        }
-      }
-      this.buildDom();
-      this.renderValue();
-      if (this.opts.disabled) this.disable();
-      for (const plugin of this.plugins) plugin.onInit?.(this);
-    }
-    // ---------------------------------------------------------------- public API
-    open() {
-      if (this.isOpen || this.isDisabled || this.destroyed) return;
-      this.isOpen = true;
-      this.dropdown.hidden = false;
-      this.root.classList.add("forge-select--open");
-      this.control.setAttribute("aria-expanded", "true");
-      document.addEventListener("mousedown", this.onDocumentMouseDown);
-      if (this.opts.ajax && !this.remoteLoaded) {
-        this.scheduleRemoteLoad(this.query, 0);
-      }
-      this.renderList();
-      if (this.searchInput) this.searchInput.focus();
-      this.emitter.emit("open");
-      for (const plugin of this.plugins) plugin.onOpen?.(this);
-    }
-    close() {
-      if (!this.isOpen) return;
-      this.isOpen = false;
-      this.dropdown.hidden = true;
-      this.root.classList.remove("forge-select--open");
-      this.control.setAttribute("aria-expanded", "false");
-      document.removeEventListener("mousedown", this.onDocumentMouseDown);
-      this.highlightedIndex = -1;
-      if (this.searchInput) {
-        this.searchInput.value = "";
-        this.query = "";
-      }
-      this.emitter.emit("close");
-      for (const plugin of this.plugins) plugin.onClose?.(this);
-    }
-    destroy() {
-      if (this.destroyed) return;
-      this.close();
-      for (const plugin of this.plugins) plugin.onDestroy?.(this);
-      this.destroyed = true;
-      if (this.ajaxTimer) clearTimeout(this.ajaxTimer);
-      this.rowContentCache.clear();
-      this.root.remove();
-      this.el.style.display = "";
-      this.emitter.clear();
-    }
-    getValue() {
-      if (this.opts.multiple) return [...this.selected];
-      return this.selected[0] ?? null;
-    }
-    setValue(value) {
-      const values = value == null ? [] : Array.isArray(value) ? value : [value];
-      const next = this.opts.multiple ? values : values.slice(0, 1);
-      if (arraysEqual(next, this.selected)) return;
-      this.selected = [];
-      for (const v of next) this.selectValue(v, false);
-      this.afterSelectionChange();
-    }
-    enable() {
-      this.isDisabled = false;
-      this.root.classList.remove("forge-select--disabled");
-      this.control.tabIndex = 0;
-      this.control.setAttribute("aria-disabled", "false");
-    }
-    disable() {
-      this.close();
-      this.isDisabled = true;
-      this.root.classList.add("forge-select--disabled");
-      this.control.tabIndex = -1;
-      this.control.setAttribute("aria-disabled", "true");
-    }
-    on(event, handler) {
-      this.emitter.on(event, handler);
-    }
-    off(event, handler) {
-      this.emitter.off(event, handler);
-    }
-    // ---------------------------------------------------------------- DOM setup
-    buildDom() {
-      this.root = document.createElement("div");
-      this.root.className = "forge-select";
-      this.root.dataset.theme = this.opts.theme;
-      this.root.style.setProperty("--fs-item-height", `${this.opts.itemHeight}px`);
-      this.control = document.createElement("div");
-      this.control.className = "forge-select__control";
-      this.control.setAttribute("role", "combobox");
-      this.control.setAttribute("aria-haspopup", "listbox");
-      this.control.setAttribute("aria-expanded", "false");
-      this.control.setAttribute("aria-controls", `${this.uid}-list`);
-      this.control.tabIndex = 0;
-      this.valueEl = document.createElement("div");
-      this.valueEl.className = "forge-select__value";
-      this.clearBtn = document.createElement("button");
-      this.clearBtn.type = "button";
-      this.clearBtn.className = "forge-select__clear";
-      this.clearBtn.setAttribute("aria-label", this.strings.clearSelection);
-      this.clearBtn.textContent = "\xD7";
-      this.clearBtn.hidden = true;
-      const arrow = document.createElement("span");
-      arrow.className = "forge-select__arrow";
-      arrow.setAttribute("aria-hidden", "true");
-      this.control.append(this.valueEl, this.clearBtn, arrow);
-      this.dropdown = document.createElement("div");
-      this.dropdown.className = "forge-select__dropdown";
-      this.dropdown.hidden = true;
-      if (this.opts.searchable) {
-        this.searchInput = document.createElement("input");
-        this.searchInput.type = "search";
-        this.searchInput.className = "forge-select__search";
-        this.searchInput.setAttribute("aria-label", this.strings.search);
-        this.searchInput.setAttribute("aria-autocomplete", "list");
-        this.searchInput.setAttribute("aria-controls", `${this.uid}-list`);
-        this.dropdown.append(this.searchInput);
-      }
-      this.list = document.createElement("ul");
-      this.list.className = "forge-select__list";
-      this.list.id = `${this.uid}-list`;
-      this.list.setAttribute("role", "listbox");
-      if (this.opts.multiple) this.list.setAttribute("aria-multiselectable", "true");
-      this.dropdown.append(this.list);
-      this.root.append(this.control, this.dropdown);
-      this.el.style.display = "none";
-      this.el.insertAdjacentElement("afterend", this.root);
-      this.bindEvents();
-    }
-    bindEvents() {
-      this.control.addEventListener("click", (event) => {
-        if (event.target === this.clearBtn) return;
-        if (this.isDisabled) return;
-        this.isOpen ? this.close() : this.open();
-      });
-      this.control.addEventListener("keydown", (event) => this.handleKeydown(event));
-      this.clearBtn.addEventListener("click", (event) => {
-        event.stopPropagation();
-        this.clearSelection();
-      });
-      if (this.searchInput) {
-        this.searchInput.addEventListener("input", () => {
-          this.query = this.searchInput.value;
-          this.highlightedIndex = -1;
-          this.list.scrollTop = 0;
-          this.emitter.emit("search", this.query);
-          if (this.opts.ajax) {
-            this.scheduleRemoteLoad(this.query, this.opts.ajax.debounce ?? 250);
-          } else {
-            this.renderList();
-          }
-        });
-        this.searchInput.addEventListener("keydown", (event) => this.handleKeydown(event));
-      }
-      this.list.addEventListener("click", (event) => {
-        const target = event.target;
-        const twisty = target.closest("[data-twisty]");
-        if (twisty) {
-          const value = twisty.dataset.twisty;
-          if (this.expandedValues.has(value)) this.expandedValues.delete(value);
-          else this.expandedValues.add(value);
-          this.renderList();
-          return;
-        }
-        const li = target.closest("li[data-nav-index]");
-        if (!li) return;
-        const navIndex = Number(li.dataset.navIndex);
-        this.activateNavItem(navIndex);
-      });
-      this.list.addEventListener("scroll", () => {
-        if (this.usesVirtualScroll()) this.renderRows();
-        this.maybeLoadNextPage();
-      });
-    }
-    handleKeydown(event) {
-      if (this.isDisabled) return;
-      switch (event.key) {
-        case "Enter":
-          event.preventDefault();
-          if (!this.isOpen) this.open();
-          else if (this.highlightedIndex >= 0) this.activateNavItem(this.highlightedIndex);
-          break;
-        case " ":
-          if (event.target === this.control) {
-            event.preventDefault();
-            if (!this.isOpen) this.open();
-          }
-          break;
-        case "ArrowDown":
-          event.preventDefault();
-          if (!this.isOpen) this.open();
-          else this.moveHighlight(1);
-          break;
-        case "ArrowUp":
-          event.preventDefault();
-          if (this.isOpen) this.moveHighlight(-1);
-          break;
-        case "Escape":
-          if (this.isOpen) {
-            event.preventDefault();
-            this.close();
-            this.control.focus();
-          }
-          break;
-        case "Tab":
-          this.close();
-          break;
-      }
-    }
-    // ---------------------------------------------------------------- selection
-    selectValue(value, notify) {
-      if (this.selected.includes(value)) return;
-      const option = this.findOption(value) ?? this.selectedOptions.get(value) ?? { value, label: value };
-      this.selectedOptions.set(value, option);
-      if (this.opts.multiple) {
-        this.selected.push(value);
-        for (const v of collectDescendantValues(option)) {
-          if (!this.selected.includes(v)) this.selected.push(v);
-        }
-        this.syncTreeAncestors();
-      } else {
-        this.selected = [value];
-      }
-      if (notify) this.afterSelectionChange();
-    }
-    deselectValue(value, notify) {
-      const index = this.selected.indexOf(value);
-      if (index === -1) return;
-      this.selected.splice(index, 1);
-      if (this.opts.multiple) {
-        const option = this.findOption(value) ?? this.selectedOptions.get(value);
-        if (option) {
-          for (const v of collectDescendantValues(option)) {
-            const i = this.selected.indexOf(v);
-            if (i !== -1) this.selected.splice(i, 1);
-          }
-        }
-        this.syncTreeAncestors();
-      }
-      if (notify) this.afterSelectionChange();
-    }
-    /**
-     * Keeps every tree parent's own membership in `selected` consistent with
-     * its descendants (post-order, so parents see already-corrected children):
-     * a parent counts as selected only when `computeCheckState` says "all".
-     * No-op for data with no `children` anywhere.
-     */
-    syncTreeAncestors() {
-      const sync = (option) => {
-        if (!option.children || option.children.length === 0) return;
-        for (const child of option.children) sync(child);
-        const state = computeCheckState(option, this.selected);
-        const index = this.selected.indexOf(option.value);
-        if (state === "all" && index === -1) this.selected.push(option.value);
-        else if (state !== "all" && index !== -1) this.selected.splice(index, 1);
-      };
-      for (const item of this.data) {
-        const options = isGroup(item) ? item.options : [item];
-        options.forEach(sync);
-      }
-    }
-    clearSelection() {
-      if (this.selected.length === 0) return;
-      this.selected = [];
-      this.emitter.emit("clear");
-      this.afterSelectionChange();
-    }
-    afterSelectionChange() {
-      this.renderValue();
-      this.syncNativeSelect();
-      if (this.isOpen) this.renderList();
-      this.emitter.emit("change", this.getValue());
-    }
-    syncNativeSelect() {
-      if (!(this.el instanceof HTMLSelectElement)) return;
-      const existing = /* @__PURE__ */ new Set();
-      for (const option of Array.from(this.el.options)) {
-        existing.add(option.value);
-        option.selected = this.selected.includes(option.value);
-      }
-      for (const value of this.selected) {
-        if (existing.has(value)) continue;
-        const option = document.createElement("option");
-        option.value = value;
-        option.textContent = this.selectedOptions.get(value)?.label ?? value;
-        option.selected = true;
-        this.el.append(option);
-      }
-      this.el.dispatchEvent(new Event("change", { bubbles: true }));
-    }
-    findOption(value) {
-      const search = (options) => {
-        for (const option of options) {
-          if (option.value === value) return option;
-          if (option.children) {
-            const found = search(option.children);
-            if (found) return found;
-          }
-        }
-        return void 0;
-      };
-      for (const item of this.data) {
-        const found = search(isGroup(item) ? item.options : [item]);
-        if (found) return found;
-      }
-      return void 0;
-    }
-    createFromQuery() {
-      const label = this.query.trim();
-      if (!label) return;
-      const option = { value: label, label };
-      this.data.push(option);
-      if (this.searchInput) {
-        this.searchInput.value = "";
-        this.query = "";
-      }
-      this.selectValue(option.value, true);
-      if (!this.opts.multiple) this.close();
-    }
-    activateNavItem(navIndex) {
-      const item = this.navItems[navIndex];
-      if (!item) return;
-      if (item.kind === "create") {
-        this.createFromQuery();
-        return;
-      }
-      const { value } = item.option;
-      if (this.opts.multiple) {
-        this.selected.includes(value) ? this.deselectValue(value, true) : this.selectValue(value, true);
-      } else {
-        this.selectValue(value, true);
-        this.close();
-        this.control.focus();
-      }
-    }
-    // ---------------------------------------------------------------- rendering
-    renderValue() {
-      this.valueEl.textContent = "";
-      const hasValue = this.selected.length > 0;
-      this.clearBtn.hidden = !(this.opts.clearable && hasValue);
-      if (!hasValue) {
-        const placeholder = document.createElement("span");
-        placeholder.className = "forge-select__placeholder";
-        placeholder.textContent = this.opts.placeholder;
-        this.valueEl.append(placeholder);
-        return;
-      }
-      if (this.opts.multiple) {
-        for (const value of this.selected) {
-          const option = this.selectedOptions.get(value) ?? { value, label: value };
-          const tag = document.createElement("span");
-          tag.className = "forge-select__tag";
-          const label = document.createElement("span");
-          label.className = "forge-select__tag-label";
-          this.renderTemplate(label, option, this.opts.templateSelection, "inline");
-          const remove = document.createElement("button");
-          remove.type = "button";
-          remove.className = "forge-select__tag-remove";
-          remove.setAttribute("aria-label", format(this.strings.removeItem, { label: option.label }));
-          remove.textContent = "\xD7";
-          remove.addEventListener("click", (event) => {
-            event.stopPropagation();
-            if (!this.isDisabled) this.deselectValue(value, true);
-          });
-          tag.append(label, remove);
-          this.valueEl.append(tag);
-        }
-      } else {
-        const option = this.selectedOptions.get(this.selected[0]) ?? {
-          value: this.selected[0],
-          label: this.selected[0]
-        };
-        const span = document.createElement("span");
-        span.className = "forge-select__single-value";
-        this.renderTemplate(span, option, this.opts.templateSelection, "inline");
-        this.valueEl.append(span);
-      }
-    }
-    renderTemplate(container, option, template, variant = "row") {
-      if (template) {
-        const result = template(option);
-        if (typeof result === "string") container.innerHTML = result;
-        else container.append(result);
-        return;
-      }
-      if (!option.avatar && !option.description) {
-        container.textContent = option.label;
-        return;
-      }
-      if (option.avatar) {
-        const avatar = document.createElement("img");
-        avatar.className = variant === "row" ? "forge-select__option-avatar" : "forge-select__inline-avatar";
-        avatar.src = option.avatar;
-        avatar.alt = "";
-        avatar.setAttribute("loading", "lazy");
-        avatar.setAttribute("decoding", "async");
-        container.append(avatar);
-      }
-      if (variant === "row" && option.description) {
-        const body = document.createElement("span");
-        body.className = "forge-select__option-body";
-        const label = document.createElement("span");
-        label.className = "forge-select__option-label";
-        label.textContent = option.label;
-        const desc = document.createElement("span");
-        desc.className = "forge-select__option-desc";
-        desc.textContent = option.description;
-        body.append(label, desc);
-        container.append(body);
-      } else {
-        const label = document.createElement("span");
-        label.className = "forge-select__option-label";
-        label.textContent = option.label;
-        container.append(label);
-      }
-    }
-    buildRows() {
-      this.rows = [];
-      this.navItems = [];
-      const query = this.query.trim().toLowerCase();
-      const matches = (option) => query === "" || option.label.toLowerCase().includes(query) || (option.description?.toLowerCase().includes(query) ?? false);
-      const subtreeMatches = (option) => query === "" || matches(option) || (option.children ?? []).some(subtreeMatches);
-      const pushOption = (option, depth) => {
-        let navIndex = -1;
-        if (!option.disabled) {
-          navIndex = this.navItems.length;
-          this.navItems.push({ kind: "option", option });
-        }
-        const hasChildren = !!option.children && option.children.length > 0;
-        this.rows.push({ kind: "option", option, navIndex, depth, hasChildren });
-        if (hasChildren) {
-          const expanded = query !== "" || this.expandedValues.has(option.value);
-          if (expanded) {
-            for (const child of option.children) {
-              if (subtreeMatches(child)) pushOption(child, depth + 1);
-            }
-          }
-        }
-      };
-      if (this.loading) {
-        this.rows.push({ kind: "loading" });
-        return;
-      }
-      for (const item of this.data) {
-        if (isGroup(item)) {
-          const visible = item.options.filter(subtreeMatches);
-          if (visible.length === 0) continue;
-          this.rows.push({ kind: "group", label: item.label });
-          visible.forEach((o) => pushOption(o, 0));
-        } else if (subtreeMatches(item)) {
-          pushOption(item, 0);
-        }
-      }
-      if (this.opts.allowCreate && query !== "" && !this.hasExactMatch(query)) {
-        const navIndex = this.navItems.length;
-        this.navItems.push({ kind: "create" });
-        this.rows.push({ kind: "create", navIndex });
-      }
-      if (this.rows.length === 0) this.rows.push({ kind: "empty" });
-      else if (this.loadingMore) this.rows.push({ kind: "loading-more" });
-    }
-    hasExactMatch(lowerQuery) {
-      const matchesExactly = (option) => option.label.toLowerCase() === lowerQuery || (option.children ?? []).some(matchesExactly);
-      for (const item of this.data) {
-        const options = isGroup(item) ? item.options : [item];
-        if (options.some(matchesExactly)) return true;
-      }
-      return false;
-    }
-    usesVirtualScroll() {
-      return this.opts.virtualScroll !== false && this.rows.length > VIRTUAL_THRESHOLD;
-    }
-    renderList() {
-      this.buildRows();
-      this.renderRows();
-    }
-    renderRows() {
-      const scrollTop = this.list.scrollTop;
-      const clientHeight = this.list.clientHeight;
-      const virtual = this.usesVirtualScroll();
-      this.list.textContent = "";
-      const rowHeight = this.opts.itemHeight;
-      let start = 0;
-      let end = this.rows.length;
-      if (virtual) {
-        const viewport = clientHeight || rowHeight * 8;
-        start = Math.max(0, Math.floor(scrollTop / rowHeight) - VIRTUAL_BUFFER);
-        end = Math.min(this.rows.length, start + Math.ceil(viewport / rowHeight) + VIRTUAL_BUFFER * 2);
-        const topSpacer = document.createElement("li");
-        topSpacer.className = "forge-select__spacer";
-        topSpacer.setAttribute("aria-hidden", "true");
-        topSpacer.style.height = `${start * rowHeight}px`;
-        this.list.append(topSpacer);
-      }
-      for (let i = start; i < end; i++) {
-        this.list.append(this.renderRow(this.rows[i]));
-      }
-      if (virtual) {
-        const bottomSpacer = document.createElement("li");
-        bottomSpacer.className = "forge-select__spacer";
-        bottomSpacer.setAttribute("aria-hidden", "true");
-        bottomSpacer.style.height = `${(this.rows.length - end) * rowHeight}px`;
-        this.list.append(bottomSpacer);
-        if (this.list.scrollTop !== scrollTop) {
-          this.list.scrollTop = scrollTop;
-        }
-      }
-      this.updateActiveDescendant();
-    }
-    renderRow(row) {
-      const li = document.createElement("li");
-      switch (row.kind) {
-        case "group":
-          li.className = "forge-select__group-label";
-          li.setAttribute("role", "presentation");
-          li.textContent = row.label;
-          break;
-        case "empty":
-          li.className = "forge-select__empty";
-          li.textContent = this.strings.noResults;
-          break;
-        case "loading":
-          li.className = "forge-select__loading";
-          li.textContent = this.strings.loading;
-          break;
-        case "loading-more":
-          li.className = "forge-select__loading-more";
-          li.setAttribute("aria-hidden", "true");
-          li.textContent = this.strings.loadingMore;
-          break;
-        case "create":
-          li.className = "forge-select__option forge-select__option--create";
-          li.setAttribute("role", "option");
-          li.id = `${this.uid}-nav-${row.navIndex}`;
-          li.dataset.navIndex = String(row.navIndex);
-          li.textContent = format(this.strings.createOption, { query: this.query.trim() });
-          if (row.navIndex === this.highlightedIndex) li.classList.add("forge-select__option--highlighted");
-          break;
-        case "option": {
-          li.className = "forge-select__option";
-          li.setAttribute("role", "option");
-          const isSelected = this.selected.includes(row.option.value);
-          li.setAttribute("aria-selected", String(isSelected));
-          if (isSelected) li.classList.add("forge-select__option--selected");
-          if (this.opts.multiple && row.hasChildren && computeCheckState(row.option, this.selected) === "some") {
-            li.classList.add("forge-select__option--indeterminate");
-          }
-          if (row.depth > 0) {
-            li.style.paddingLeft = `calc(12px + ${row.depth} * var(--fs-tree-indent, 18px))`;
-          }
-          if (row.option.disabled) {
-            li.classList.add("forge-select__option--disabled");
-            li.setAttribute("aria-disabled", "true");
-          } else {
-            li.id = `${this.uid}-nav-${row.navIndex}`;
-            li.dataset.navIndex = String(row.navIndex);
-            if (row.navIndex === this.highlightedIndex) li.classList.add("forge-select__option--highlighted");
-          }
-          if (row.hasChildren) {
-            const twisty = document.createElement("span");
-            twisty.className = "forge-select__twisty";
-            twisty.dataset.twisty = row.option.value;
-            twisty.setAttribute("aria-hidden", "true");
-            twisty.textContent = this.expandedValues.has(row.option.value) ? "\u25BC" : "\u25B6";
-            li.append(twisty);
-          }
-          li.append(this.optionContent(row.option));
-          break;
-        }
-      }
-      return li;
-    }
-    /**
-     * Rendered row content is cached per option value and cloned on each render,
-     * so templates run once per option instead of once per scroll frame.
-     * State classes (selected/highlighted/disabled) live on the <li>, keeping the
-     * cached content state-free.
-     */
-    optionContent(option) {
-      let cached = this.rowContentCache.get(option.value);
-      if (!cached) {
-        const holder = document.createElement("span");
-        holder.className = "forge-select__option-content";
-        this.renderTemplate(holder, option, this.opts.templateResult);
-        if (this.rowContentCache.size >= ROW_CACHE_LIMIT) {
-          const oldest = this.rowContentCache.keys().next().value;
-          this.rowContentCache.delete(oldest);
-        }
-        this.rowContentCache.set(option.value, holder);
-        cached = holder;
-      }
-      return cached.cloneNode(true);
-    }
-    moveHighlight(delta) {
-      if (this.navItems.length === 0) return;
-      const next = this.highlightedIndex === -1 && delta > 0 ? 0 : (this.highlightedIndex + delta + this.navItems.length) % this.navItems.length;
-      this.highlightedIndex = next;
-      if (this.usesVirtualScroll()) {
-        const rowIndex = this.rows.findIndex(
-          (row) => (row.kind === "option" || row.kind === "create") && row.navIndex === next
-        );
-        if (rowIndex >= 0) {
-          const rowHeight = this.opts.itemHeight;
-          const top = rowIndex * rowHeight;
-          const viewport = this.list.clientHeight || rowHeight * 8;
-          let target = this.list.scrollTop;
-          if (top < target) target = top;
-          else if (top + rowHeight > target + viewport) target = top + rowHeight - viewport;
-          if (target !== this.list.scrollTop) this.list.scrollTop = target;
-        }
-        this.renderRows();
-      } else {
-        this.renderRows();
-        const highlighted = this.list.querySelector(".forge-select__option--highlighted");
-        highlighted?.scrollIntoView?.({ block: "nearest" });
-      }
-    }
-    updateActiveDescendant() {
-      const target = this.searchInput ?? this.control;
-      if (this.highlightedIndex >= 0) {
-        target.setAttribute("aria-activedescendant", `${this.uid}-nav-${this.highlightedIndex}`);
-      } else {
-        target.removeAttribute("aria-activedescendant");
-      }
-    }
-    // ---------------------------------------------------------------- remote data
-    scheduleRemoteLoad(query, delay) {
-      if (this.ajaxTimer) clearTimeout(this.ajaxTimer);
-      this.page = 0;
-      this.hasMore = true;
-      this.loading = true;
-      this.renderList();
-      this.ajaxTimer = setTimeout(() => {
-        void this.loadRemote(query);
-      }, delay);
-    }
-    /**
-     * Fires on every list scroll. Only acts when pagination is opted into via
-     * `ajax.pagination`; reads real scroll geometry rather than row counts so
-     * it works whether or not virtual scrolling is active for this list.
-     */
-    maybeLoadNextPage() {
-      const ajax = this.opts.ajax;
-      if (!ajax?.pagination || !this.hasMore || this.loading || this.loadingMore) return;
-      const { scrollHeight, scrollTop, clientHeight } = this.list;
-      const threshold = this.opts.itemHeight * 2;
-      if (scrollHeight - scrollTop - clientHeight >= threshold) return;
-      this.loadingMore = true;
-      this.renderList();
-      void this.loadRemote(this.query, { append: true });
-    }
-    async loadRemote(query, { append = false } = {}) {
-      const ajax = this.opts.ajax;
-      const requestId = ++this.ajaxRequestId;
-      const page = append ? this.page + 1 : 0;
-      try {
-        const url = buildUrl(ajax, query, page);
-        const response = await fetch(url);
-        const json = await response.json();
-        if (requestId !== this.ajaxRequestId || this.destroyed) return;
-        const result = ajax.transform ? ajax.transform(json) : json;
-        const options = Array.isArray(result) ? result : result.options;
-        const hasMore = ajax.pagination ? Array.isArray(result) ? false : result.hasMore : false;
-        if (append) {
-          const existing = collectValues(this.data);
-          this.data = [...this.data, ...options.filter((o) => !existing.has(o.value))];
-        } else {
-          this.data = options;
-          this.rowContentCache.clear();
-        }
-        this.page = page;
-        this.hasMore = hasMore;
-        this.remoteLoaded = true;
-      } catch {
-        if (requestId !== this.ajaxRequestId || this.destroyed) return;
-        if (!append) {
-          this.data = [];
-          this.rowContentCache.clear();
-        }
-        this.hasMore = false;
-      } finally {
-        if (requestId === this.ajaxRequestId && !this.destroyed) {
-          this.loading = false;
-          this.loadingMore = false;
-          if (this.isOpen) this.renderList();
-        }
-      }
-    }
-  };
-  function parseNativeOptions(select) {
-    const data = [];
-    for (const child of Array.from(select.children)) {
-      if (child instanceof HTMLOptGroupElement) {
-        data.push({
-          label: child.label,
-          options: Array.from(child.querySelectorAll("option")).map(parseOption)
-        });
-      } else if (child instanceof HTMLOptionElement) {
-        data.push(parseOption(child));
-      }
-    }
-    return data;
-  }
-  function parseOption(option) {
-    return {
-      value: option.value,
-      label: option.textContent?.trim() ?? option.value,
-      disabled: option.disabled || void 0
-    };
-  }
-  function buildUrl(ajax, query, page) {
-    if (typeof ajax.url === "function") return ajax.url(query);
-    if (!ajax.params) return ajax.url;
-    const params = new URLSearchParams();
-    for (const [key, value] of Object.entries(ajax.params(query, page))) {
-      params.set(key, String(value));
-    }
-    const separator = ajax.url.includes("?") ? "&" : "?";
-    return `${ajax.url}${separator}${params.toString()}`;
-  }
-  function collectValues(items) {
-    const values = /* @__PURE__ */ new Set();
-    for (const item of items) {
-      if (isGroup(item)) {
-        for (const option of item.options) values.add(option.value);
-      } else {
-        values.add(item.value);
-      }
-    }
-    return values;
-  }
-  function arraysEqual(a, b) {
-    return a.length === b.length && a.every((value, index) => value === b[index]);
-  }
-  return __toCommonJS(index_exports);
-})();
+"use strict";var ForgeSelectBundle=(()=>{var I=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var j=Object.prototype.hasOwnProperty;var q=(r,e)=>{for(var t in e)I(r,t,{get:e[t],enumerable:!0})},P=(r,e,t,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of F(e))!j.call(r,s)&&s!==t&&I(r,s,{get:()=>e[s],enumerable:!(i=V(e,s))||i.enumerable});return r};var B=r=>P(I({},"__esModule",{value:!0}),r);var X={};q(X,{ForgeSelect:()=>p,default:()=>p});var v=class{constructor(){this.handlers=new Map}on(e,t){let i=this.handlers.get(e);i||(i=new Set,this.handlers.set(e,i)),i.add(t)}off(e,t){this.handlers.get(e)?.delete(t)}emit(e,...t){let i=this.handlers.get(e);if(i)for(let s of[...i])s(...t)}clear(){this.handlers.clear()}};var L={en:{noResults:"No results found",loading:"Loading\u2026",loadingMore:"Loading more\u2026",errorLoading:"Could not load options",createOption:'Create "{query}"',clearSelection:"Clear selection",removeItem:"Remove {label}",search:"Search",reorderHint:"{label}. Press Alt+Left or Alt+Right to reorder."},vi:{noResults:"Kh\xF4ng t\xECm th\u1EA5y k\u1EBFt qu\u1EA3",loading:"\u0110ang t\u1EA3i\u2026",loadingMore:"\u0110ang t\u1EA3i th\xEAm\u2026",errorLoading:"Kh\xF4ng th\u1EC3 t\u1EA3i t\xF9y ch\u1ECDn",createOption:'T\u1EA1o "{query}"',clearSelection:"X\xF3a l\u1EF1a ch\u1ECDn",removeItem:"X\xF3a {label}",search:"T\xECm ki\u1EBFm",reorderHint:"{label}. Nh\u1EA5n Alt+Tr\xE1i ho\u1EB7c Alt+Ph\u1EA3i \u0111\u1EC3 s\u1EAFp x\u1EBFp l\u1EA1i."}};function C(r){return typeof r=="string"?L[r]??L.en:{...L.en,...r}}function b(r,e){return r.replace(/\{(\w+)\}/g,(t,i)=>e[i]??t)}function T(r){let e=[];for(let t of Array.from(r.children))t instanceof HTMLOptGroupElement?e.push({label:t.label,options:Array.from(t.querySelectorAll("option")).map(O)}):t instanceof HTMLOptionElement&&e.push(O(t));return e}function O(r){let e=r.parentElement instanceof HTMLOptGroupElement&&r.parentElement.disabled;return{value:r.value,label:r.textContent?.trim()??r.value,disabled:r.disabled||e||void 0}}function x(r,e,t,i="row"){if(t){let s=t(e);typeof s=="string"?r.innerHTML=s:r.append(s);return}if(!e.avatar&&!e.description){r.textContent=e.label;return}if(e.avatar){let s=document.createElement("img");s.className=i==="row"?"forge-select__option-avatar":"forge-select__inline-avatar",s.src=e.avatar,s.alt="",s.setAttribute("loading","lazy"),s.setAttribute("decoding","async"),r.append(s)}if(i==="row"&&e.description){let s=document.createElement("span");s.className="forge-select__option-body";let n=document.createElement("span");n.className="forge-select__option-label",n.textContent=e.label;let a=document.createElement("span");a.className="forge-select__option-desc",a.textContent=e.description,s.append(n,a),r.append(s)}else{let s=document.createElement("span");s.className="forge-select__option-label",s.textContent=e.label,r.append(s)}}function _(r,e,t){if(typeof r.url=="function")return r.url(e,t);if(!r.params)return r.url;let i=new URLSearchParams;for(let[n,a]of Object.entries(r.params(e,t)))i.set(n,String(a));let s=r.url.includes("?")?"&":"?";return`${r.url}${s}${i.toString()}`}function R(r,e){let t=r.transform?r.transform(e):e;if(Array.isArray(t))return{options:t,hasMore:!1};if(!t||!Array.isArray(t.options))throw new Error("ForgeSelect: ajax.transform must return an array of options, or an object shaped like { options: Option[], hasMore?: boolean }.");return{options:t.options,hasMore:r.pagination?!!t.hasMore:!1}}function u(r){return r.options!==void 0}function y(r){if(!r.children)return[];let e=[];for(let t of r.children)t.disabled||e.push(t.value),e.push(...y(t));return e}function E(r,e){if(!r.children?.length)return e.includes(r.value)?"all":"none";let t=r.children.filter(i=>!i.disabled).map(i=>E(i,e));return t.length===0?"none":t.every(i=>i==="all")?"all":t.every(i=>i==="none")?"none":"some"}function k(r,e){let t=i=>{for(let s of i){if(s.value===e)return s;let n=s.children?t(s.children):void 0;if(n)return n}};for(let i of r){let s=t(u(i)?i.options:[i]);if(s)return s}}function M(r,e){let t=i=>{if(!i.children?.length)return;for(let a of i.children)t(a);let s=E(i,e),n=e.indexOf(i.value);s==="all"&&n===-1?e.push(i.value):s!=="all"&&n!==-1&&e.splice(n,1)};for(let i of r)(u(i)?i.options:[i]).forEach(t)}function N(r){let e=new Set,t=i=>{e.add(i.value),i.children?.forEach(t)};for(let i of r)(u(i)?i.options:[i]).forEach(t);return e}function H(r,e){return r.length===e.length&&r.every((t,i)=>t===e[i])}var $=36,D=5,G=100,K=2e3,U=0,p=class{constructor(e,t={}){this.selected=[];this.selectedOptions=new Map;this.suppressNextTagClick=!1;this.emitter=new v;this.uid=`forge-select-${++U}`;this.searchInput=null;this.isOpen=!1;this.isDisabled=!1;this.destroyed=!1;this.query="";this.rows=[];this.navItems=[];this.highlightedIndex=-1;this.rowContentCache=new Map;this.expandedValues=new Set;this.loading=!1;this.loadingMore=!1;this.page=0;this.hasMore=!0;this.ajaxTimer=null;this.ajaxRequestId=0;this.ajaxController=null;this.remoteLoaded=!1;this.loadError=null;this.originalDisplay="";this.originalDisabled=!1;this.nativeSelect=null;this.nativeForm=null;this.syncingNative=!1;this.onDocumentMouseDown=e=>{this.root.contains(e.target)||this.close()};this.onNativeChange=()=>{if(!this.nativeSelect||this.destroyed||this.syncingNative)return;let e=Array.from(this.nativeSelect.selectedOptions,t=>t.value);this.applyNativeValues(e)};this.onFormReset=()=>{if(!this.nativeSelect||this.destroyed)return;let e=Array.from(this.nativeSelect.options).filter(t=>t.defaultSelected).map(t=>t.value);this.applyNativeValues(e)};let i=typeof e=="string"?document.querySelector(e):e;if(!i)throw new Error(`ForgeSelect: target element not found: ${String(e)}`);this.el=i;let s=i instanceof HTMLSelectElement?i:null;if(this.nativeSelect=s,this.nativeForm=s?.form??null,this.originalDisplay=i.style.display,this.originalDisabled=s?.disabled??!1,this.opts={placeholder:t.placeholder??"",searchable:t.searchable??!0,multiple:t.multiple??s?.multiple??!1,clearable:t.clearable??!1,allowCreate:t.allowCreate??!1,sortable:t.sortable??!1,theme:t.theme??"default",disabled:t.disabled??s?.disabled??!1,data:t.data,ajax:t.ajax,templateResult:t.templateResult,templateSelection:t.templateSelection,virtualScroll:t.virtualScroll,itemHeight:t.itemHeight??$,language:t.language??"en",plugins:t.plugins??[]},this.strings=C(this.opts.language),this.plugins=this.opts.plugins,this.data=this.opts.data??(s?T(s):[]),s&&!this.opts.data){let n=Array.from(s.options),a=s.multiple||s.selectedIndex>0||n.some(o=>o.defaultSelected);for(let o of n)a&&o.selected&&this.selectValue(o.value,!1)}this.buildDom(),this.renderValue(),this.opts.disabled&&this.disable(),s?.addEventListener("change",this.onNativeChange),this.nativeForm?.addEventListener("reset",this.onFormReset);for(let n of this.plugins)n.onInit?.(this)}applyNativeValues(e){this.selected=[];for(let t of this.opts.multiple?e:e.slice(0,1))this.selectValue(t,!1);this.renderValue(),this.isOpen&&this.renderList(),this.emitter.emit("change",this.getValue())}open(){if(!(this.isOpen||this.isDisabled||this.destroyed)){this.isOpen=!0,this.dropdown.hidden=!1,this.root.classList.add("forge-select--open"),this.control.setAttribute("aria-expanded","true"),document.addEventListener("mousedown",this.onDocumentMouseDown),this.opts.ajax&&!this.remoteLoaded&&this.scheduleRemoteLoad(this.query,0),this.renderList(),this.searchInput&&this.searchInput.focus(),this.emitter.emit("open");for(let e of this.plugins)e.onOpen?.(this)}}close(){if(this.isOpen){this.isOpen=!1,this.dropdown.hidden=!0,this.root.classList.remove("forge-select--open"),this.control.setAttribute("aria-expanded","false"),document.removeEventListener("mousedown",this.onDocumentMouseDown),this.highlightedIndex=-1,this.searchInput&&(this.searchInput.value="",this.query=""),this.emitter.emit("close");for(let e of this.plugins)e.onClose?.(this)}}destroy(){if(!this.destroyed){this.close();for(let e of this.plugins)e.onDestroy?.(this);this.destroyed=!0,this.ajaxTimer&&clearTimeout(this.ajaxTimer),this.ajaxController?.abort(),this.nativeSelect?.removeEventListener("change",this.onNativeChange),this.nativeForm?.removeEventListener("reset",this.onFormReset),this.rowContentCache.clear(),this.root.remove(),this.el.style.display=this.originalDisplay,this.nativeSelect&&(this.nativeSelect.disabled=this.originalDisabled),this.emitter.clear()}}getValue(){return this.opts.multiple?[...this.selected]:this.selected[0]??null}setValue(e,t={}){let i=e==null?[]:Array.isArray(e)?e:[e],s=this.opts.multiple?i:i.slice(0,1);if(!H(s,this.selected)){this.selected=[];for(let n of s)this.selectValue(n,!1);this.afterSelectionChange(t.emitChange??!0)}}enable(){this.isDisabled=!1,this.root.classList.remove("forge-select--disabled"),this.control.tabIndex=0,this.control.setAttribute("aria-disabled","false"),this.nativeSelect&&(this.nativeSelect.disabled=!1)}disable(){this.close(),this.isDisabled=!0,this.root.classList.add("forge-select--disabled"),this.control.tabIndex=-1,this.control.setAttribute("aria-disabled","true"),this.nativeSelect&&(this.nativeSelect.disabled=!0)}on(e,t){this.emitter.on(e,t)}off(e,t){this.emitter.off(e,t)}applyAccessibleName(){let e=this.el.getAttribute("aria-labelledby"),t=this.el.getAttribute("aria-label");if(e)this.control.setAttribute("aria-labelledby",e);else if(t)this.control.setAttribute("aria-label",t);else if(this.el.id){let i=Array.from(document.getElementsByTagName("label")).find(s=>s.htmlFor===this.el.id);i&&(i.id||(i.id=`${this.uid}-label`),this.control.setAttribute("aria-labelledby",i.id))}}buildDom(){this.root=document.createElement("div"),this.root.className="forge-select",this.root.dataset.theme=this.opts.theme,this.root.style.setProperty("--fs-item-height",`${this.opts.itemHeight}px`),this.opts.sortable&&this.opts.multiple&&this.root.classList.add("forge-select--sortable"),this.control=document.createElement("div"),this.control.className="forge-select__control",this.control.setAttribute("role","combobox"),this.control.setAttribute("aria-haspopup","listbox"),this.control.setAttribute("aria-expanded","false"),this.control.setAttribute("aria-controls",`${this.uid}-list`),this.control.tabIndex=0,this.applyAccessibleName(),this.valueEl=document.createElement("div"),this.valueEl.className="forge-select__value",this.clearBtn=document.createElement("button"),this.clearBtn.type="button",this.clearBtn.className="forge-select__clear",this.clearBtn.setAttribute("aria-label",this.strings.clearSelection),this.clearBtn.textContent="\xD7",this.clearBtn.hidden=!0;let e=document.createElement("span");e.className="forge-select__arrow",e.setAttribute("aria-hidden","true"),this.control.append(this.valueEl,this.clearBtn,e),this.dropdown=document.createElement("div"),this.dropdown.className="forge-select__dropdown",this.dropdown.hidden=!0,this.opts.searchable&&(this.searchInput=document.createElement("input"),this.searchInput.type="search",this.searchInput.className="forge-select__search",this.searchInput.setAttribute("aria-label",this.strings.search),this.searchInput.setAttribute("aria-autocomplete","list"),this.searchInput.setAttribute("aria-controls",`${this.uid}-list`),this.dropdown.append(this.searchInput)),this.list=document.createElement("ul"),this.list.className="forge-select__list",this.list.id=`${this.uid}-list`,this.list.setAttribute("role","listbox"),this.opts.multiple&&this.list.setAttribute("aria-multiselectable","true"),this.dropdown.append(this.list),this.liveRegion=document.createElement("div"),this.liveRegion.className="forge-select__sr-only",this.liveRegion.setAttribute("role","status"),this.liveRegion.setAttribute("aria-live","polite"),this.root.append(this.control,this.dropdown,this.liveRegion),this.el.style.display="none",this.el.insertAdjacentElement("afterend",this.root),this.bindEvents()}bindEvents(){this.control.addEventListener("click",e=>{if(e.target!==this.clearBtn){if(this.suppressNextTagClick){this.suppressNextTagClick=!1;return}this.isDisabled||(this.isOpen?this.close():this.open())}}),this.control.addEventListener("keydown",e=>this.handleKeydown(e)),this.clearBtn.addEventListener("click",e=>{e.stopPropagation(),this.clearSelection()}),this.searchInput&&(this.searchInput.addEventListener("input",()=>{this.query=this.searchInput.value,this.highlightedIndex=-1,this.list.scrollTop=0,this.emitter.emit("search",this.query),this.opts.ajax?this.scheduleRemoteLoad(this.query,this.opts.ajax.debounce??250):this.renderList()}),this.searchInput.addEventListener("keydown",e=>this.handleKeydown(e))),this.list.addEventListener("click",e=>{let t=e.target,i=t.closest("[data-twisty]");if(i){let a=i.dataset.twisty;this.expandedValues.has(a)?this.expandedValues.delete(a):this.expandedValues.add(a),this.renderList();return}let s=t.closest("li[data-nav-index]");if(!s)return;let n=Number(s.dataset.navIndex);this.activateNavItem(n)}),this.list.addEventListener("scroll",()=>{this.usesVirtualScroll()&&this.renderRows(),this.maybeLoadNextPage()})}handleKeydown(e){if(!this.isDisabled)switch(e.key){case"Enter":e.preventDefault(),this.isOpen?this.highlightedIndex>=0&&this.activateNavItem(this.highlightedIndex):this.open();break;case" ":e.target===this.control&&(e.preventDefault(),this.isOpen||this.open());break;case"ArrowDown":e.preventDefault(),this.isOpen?this.moveHighlight(1):this.open();break;case"ArrowUp":e.preventDefault(),this.isOpen&&this.moveHighlight(-1);break;case"Escape":this.isOpen&&(e.preventDefault(),this.close(),this.control.focus());break;case"ArrowRight":this.isOpen&&this.navigateTree("right")&&e.preventDefault();break;case"ArrowLeft":this.isOpen&&this.navigateTree("left")&&e.preventDefault();break;case"Tab":this.close();break}}selectValue(e,t){if(this.selected.includes(e))return;let i=this.findOption(e)??this.selectedOptions.get(e)??{value:e,label:e};if(this.selectedOptions.set(e,i),this.opts.multiple){this.selected.push(e);for(let s of y(i))this.selected.includes(s)||this.selected.push(s);this.syncTreeAncestors()}else this.selected=[e];t&&this.afterSelectionChange()}deselectValue(e,t){let i=this.selected.indexOf(e);if(i!==-1){if(this.selected.splice(i,1),this.opts.multiple){let s=this.findOption(e)??this.selectedOptions.get(e);if(s)for(let n of y(s)){let a=this.selected.indexOf(n);a!==-1&&this.selected.splice(a,1)}this.syncTreeAncestors()}t&&this.afterSelectionChange()}}syncTreeAncestors(){M(this.data,this.selected)}clearSelection(){this.selected.length!==0&&(this.selected=[],this.emitter.emit("clear"),this.afterSelectionChange())}afterSelectionChange(e=!0){this.renderValue(),this.syncNativeSelect(e),this.isOpen&&this.renderList(),e&&this.emitter.emit("change",this.getValue())}syncNativeSelect(e=!0){if(!(this.el instanceof HTMLSelectElement))return;let t=new Set;for(let i of Array.from(this.el.options))t.add(i.value),i.selected=this.selected.includes(i.value);for(let i of this.selected){if(t.has(i))continue;let s=document.createElement("option");s.value=i,s.textContent=this.selectedOptions.get(i)?.label??i,s.selected=!0,this.el.append(s)}if(this.opts.sortable&&this.opts.multiple)for(let i of this.selected){let s=Array.from(this.el.options).find(n=>n.value===i);s&&this.el.append(s)}if(e){this.syncingNative=!0;try{this.el.dispatchEvent(new Event("change",{bubbles:!0}))}finally{this.syncingNative=!1}}}findOption(e){return k(this.data,e)}createFromQuery(){let e=this.query.trim();if(!e)return;let t={value:e,label:e};this.data.push(t),this.searchInput&&(this.searchInput.value="",this.query=""),this.selectValue(t.value,!0),this.opts.multiple||this.close()}activateNavItem(e){let t=this.navItems[e];if(!t)return;if(t.kind==="create"){this.createFromQuery();return}let{value:i}=t.option;this.opts.multiple?this.selected.includes(i)?this.deselectValue(i,!0):this.selectValue(i,!0):(this.selectValue(i,!0),this.close(),this.control.focus())}renderValue(){this.valueEl.textContent="";let e=this.selected.length>0;if(this.clearBtn.hidden=!(this.opts.clearable&&e),!e){let t=document.createElement("span");t.className="forge-select__placeholder",t.textContent=this.opts.placeholder,this.valueEl.append(t);return}if(this.opts.multiple)for(let t of this.selected){let i=this.selectedOptions.get(t)??{value:t,label:t},s=document.createElement("span");s.className="forge-select__tag";let n=document.createElement("span");n.className="forge-select__tag-label",x(n,i,this.opts.templateSelection,"inline");let a=document.createElement("button");a.type="button",a.className="forge-select__tag-remove",a.setAttribute("aria-label",b(this.strings.removeItem,{label:i.label})),a.textContent="\xD7",a.addEventListener("click",o=>{o.stopPropagation(),this.isDisabled||this.deselectValue(t,!0)}),s.append(n,a),this.opts.sortable&&(s.dataset.value=t,s.tabIndex=0,s.setAttribute("aria-roledescription","draggable item"),s.setAttribute("aria-label",b(this.strings.reorderHint,{label:i.label})),s.addEventListener("keydown",o=>this.handleTagKeydown(o,t)),this.bindTagDrag(s,t)),this.valueEl.append(s)}else{let t=this.selectedOptions.get(this.selected[0])??{value:this.selected[0],label:this.selected[0]},i=document.createElement("span");i.className="forge-select__single-value",x(i,t,this.opts.templateSelection,"inline"),this.valueEl.append(i)}}bindTagDrag(e,t){let s=0,n=!1,a=[],o=h=>{if(!n){if(Math.abs(h.clientX-s)<4)return;n=!0,a=[...this.selected],typeof this.valueEl.setPointerCapture=="function"&&this.valueEl.setPointerCapture(h.pointerId),e.classList.add("forge-select__tag--dragging")}h.preventDefault();let f=a.indexOf(t),d=Array.from(this.valueEl.querySelectorAll(".forge-select__tag"));for(let c of d){if(c===e)continue;let m=c.dataset.value;if(!m)continue;let g=a.indexOf(m);if(g===-1)continue;let S=c.getBoundingClientRect(),w=S.left+S.width/2,A=f<g;if(A?h.clientX>w:h.clientX<w){a.splice(f,1),a.splice(g,0,t),A?this.valueEl.insertBefore(e,c.nextSibling):this.valueEl.insertBefore(e,c);break}}},l=h=>{this.valueEl.removeEventListener("pointermove",o),this.valueEl.removeEventListener("pointerup",l),this.valueEl.removeEventListener("pointercancel",l),n&&(typeof this.valueEl.releasePointerCapture=="function"&&this.valueEl.releasePointerCapture(h.pointerId),e.classList.remove("forge-select__tag--dragging"),this.selected=a,this.suppressNextTagClick=!0,this.afterSelectionChange())};e.addEventListener("pointerdown",h=>{this.isDisabled||h.button!==0||h.target.closest(".forge-select__tag-remove")||(s=h.clientX,n=!1,this.valueEl.addEventListener("pointermove",o),this.valueEl.addEventListener("pointerup",l),this.valueEl.addEventListener("pointercancel",l))})}handleTagKeydown(e,t){if(!e.altKey||e.key!=="ArrowLeft"&&e.key!=="ArrowRight")return;let i=this.selected.indexOf(t),s=e.key==="ArrowLeft"?i-1:i+1;if(i===-1||s<0||s>=this.selected.length)return;e.preventDefault(),e.stopPropagation();let n=[...this.selected];[n[i],n[s]]=[n[s],n[i]],this.selected=n,this.afterSelectionChange(),this.focusTagByValue(t)}focusTagByValue(e){for(let t of Array.from(this.valueEl.querySelectorAll(".forge-select__tag")))if(t.dataset.value===e){t.focus();return}}buildRows(){this.rows=[],this.navItems=[];let e=this.query.trim().toLowerCase(),t=n=>e===""||n.label.toLowerCase().includes(e)||(n.description?.toLowerCase().includes(e)??!1),i=n=>e===""||t(n)||(n.children??[]).some(i),s=(n,a,o)=>{let l=-1;n.disabled||(l=this.navItems.length,this.navItems.push({kind:"option",option:n,parentValue:o}));let h=!!n.children&&n.children.length>0;if(this.rows.push({kind:"option",option:n,navIndex:l,depth:a,hasChildren:h}),h&&(e!==""||this.expandedValues.has(n.value)))for(let d of n.children)i(d)&&s(d,a+1,n.value)};if(this.loading){this.rows.push({kind:"loading"});return}if(this.loadError){this.rows.push({kind:"error"});return}for(let n of this.data)if(u(n)){let a=n.options.filter(i);if(a.length===0)continue;this.rows.push({kind:"group",label:n.label}),a.forEach(o=>s(o,0))}else i(n)&&s(n,0);if(this.opts.allowCreate&&e!==""&&!this.hasExactMatch(e)){let n=this.navItems.length;this.navItems.push({kind:"create"}),this.rows.push({kind:"create",navIndex:n})}this.rows.length===0?this.rows.push({kind:"empty"}):this.loadingMore&&this.rows.push({kind:"loading-more"})}hasExactMatch(e){let t=i=>i.label.toLowerCase()===e||(i.children??[]).some(t);for(let i of this.data)if((u(i)?i.options:[i]).some(t))return!0;return!1}usesVirtualScroll(){return this.opts.virtualScroll!==!1&&this.rows.length>G}renderList(){this.buildRows(),this.renderRows(),this.announceStatus()}announceStatus(){let e=this.rows[0],t=e?.kind==="loading"?this.strings.loading:e?.kind==="error"?this.strings.errorLoading:e?.kind==="empty"?this.strings.noResults:"";this.liveRegion.textContent!==t&&(this.liveRegion.textContent=t)}renderRows(){let e=this.list.scrollTop,t=this.list.clientHeight,i=this.usesVirtualScroll();this.list.textContent="";let s=this.opts.itemHeight,n=0,a=this.rows.length;if(i){let o=t||s*8;n=Math.max(0,Math.floor(e/s)-D),a=Math.min(this.rows.length,n+Math.ceil(o/s)+D*2);let l=document.createElement("li");l.className="forge-select__spacer",l.setAttribute("aria-hidden","true"),l.style.height=`${n*s}px`,this.list.append(l)}for(let o=n;o<a;o++)this.list.append(this.renderRow(this.rows[o]));if(i){let o=document.createElement("li");o.className="forge-select__spacer",o.setAttribute("aria-hidden","true"),o.style.height=`${(this.rows.length-a)*s}px`,this.list.append(o),this.list.scrollTop!==e&&(this.list.scrollTop=e)}this.updateActiveDescendant()}renderRow(e){let t=document.createElement("li");switch(e.kind){case"group":t.className="forge-select__group-label",t.setAttribute("role","presentation"),t.textContent=e.label;break;case"empty":t.className="forge-select__empty",t.setAttribute("role","option"),t.setAttribute("aria-disabled","true"),t.setAttribute("aria-selected","false"),t.textContent=this.strings.noResults;break;case"error":t.className="forge-select__error",t.setAttribute("role","option"),t.setAttribute("aria-disabled","true"),t.setAttribute("aria-selected","false"),t.textContent=this.strings.errorLoading;break;case"loading":t.className="forge-select__loading",t.setAttribute("role","option"),t.setAttribute("aria-disabled","true"),t.setAttribute("aria-selected","false"),t.textContent=this.strings.loading;break;case"loading-more":t.className="forge-select__loading-more",t.setAttribute("aria-hidden","true"),t.textContent=this.strings.loadingMore;break;case"create":t.className="forge-select__option forge-select__option--create",t.setAttribute("role","option"),t.id=`${this.uid}-nav-${e.navIndex}`,t.dataset.navIndex=String(e.navIndex),t.textContent=b(this.strings.createOption,{query:this.query.trim()}),e.navIndex===this.highlightedIndex&&t.classList.add("forge-select__option--highlighted");break;case"option":{t.className="forge-select__option",t.setAttribute("role","option");let i=this.selected.includes(e.option.value);if(t.setAttribute("aria-selected",String(i)),i&&t.classList.add("forge-select__option--selected"),this.opts.multiple&&e.hasChildren&&E(e.option,this.selected)==="some"&&t.classList.add("forge-select__option--indeterminate"),e.depth>0&&(t.style.paddingLeft=`calc(12px + ${e.depth} * var(--fs-tree-indent, 18px))`),e.option.disabled?(t.classList.add("forge-select__option--disabled"),t.setAttribute("aria-disabled","true")):(t.id=`${this.uid}-nav-${e.navIndex}`,t.dataset.navIndex=String(e.navIndex),e.navIndex===this.highlightedIndex&&t.classList.add("forge-select__option--highlighted")),e.hasChildren){let s=this.query!==""||this.expandedValues.has(e.option.value);t.setAttribute("aria-expanded",String(s));let n=document.createElement("span");n.className="forge-select__twisty",n.dataset.twisty=e.option.value,n.setAttribute("aria-hidden","true"),n.textContent=s?"\u25BC":"\u25B6",t.append(n)}t.append(this.optionContent(e.option));break}}return t}optionContent(e){let t=this.rowContentCache.get(e.value);if(!t){let i=document.createElement("span");if(i.className="forge-select__option-content",x(i,e,this.opts.templateResult),this.rowContentCache.size>=K){let s=this.rowContentCache.keys().next().value;this.rowContentCache.delete(s)}this.rowContentCache.set(e.value,i),t=i}return t.cloneNode(!0)}moveHighlight(e){if(this.navItems.length===0)return;let t=this.highlightedIndex===-1?e>0?0:this.navItems.length-1:(this.highlightedIndex+e+this.navItems.length)%this.navItems.length;this.focusNavIndex(t)}focusNavIndex(e){if(this.highlightedIndex=e,this.usesVirtualScroll()){let t=this.rows.findIndex(i=>(i.kind==="option"||i.kind==="create")&&i.navIndex===e);if(t>=0){let i=this.opts.itemHeight,s=t*i,n=this.list.clientHeight||i*8,a=this.list.scrollTop;s<a?a=s:s+i>a+n&&(a=s+i-n),a!==this.list.scrollTop&&(this.list.scrollTop=a)}this.renderRows()}else this.renderRows(),this.list.querySelector(".forge-select__option--highlighted")?.scrollIntoView?.({block:"nearest"})}navigateTree(e){let t=this.navItems[this.highlightedIndex];if(!t||t.kind!=="option")return!1;let{option:i,parentValue:s}=t,n=!!i.children?.length,a=this.query!==""||this.expandedValues.has(i.value);if(e==="right"){if(n&&!a)return this.expandedValues.add(i.value),this.renderList(),!0;if(n){let o=this.navItems.findIndex(l=>l.kind==="option"&&l.parentValue===i.value);if(o>=0)return this.focusNavIndex(o),!0}return!1}if(n&&a&&this.query==="")return this.expandedValues.delete(i.value),this.renderList(),!0;if(s){let o=this.navItems.findIndex(l=>l.kind==="option"&&l.option.value===s);if(o>=0)return this.focusNavIndex(o),!0}return!1}updateActiveDescendant(){let e=this.searchInput??this.control;this.highlightedIndex>=0?e.setAttribute("aria-activedescendant",`${this.uid}-nav-${this.highlightedIndex}`):e.removeAttribute("aria-activedescendant")}scheduleRemoteLoad(e,t){this.ajaxTimer&&clearTimeout(this.ajaxTimer);let i=++this.ajaxRequestId;this.ajaxController?.abort(),this.ajaxController=null,this.page=0,this.hasMore=!0,this.loading=!0,this.loadingMore=!1,this.loadError=null,this.renderList(),this.ajaxTimer=setTimeout(()=>{this.ajaxTimer=null,this.loadRemote(e,{requestId:i})},t)}maybeLoadNextPage(){if(!this.opts.ajax?.pagination||!this.hasMore||this.loading||this.loadingMore)return;let{scrollHeight:t,scrollTop:i,clientHeight:s}=this.list,n=this.opts.itemHeight*2;t-i-s>=n||(this.loadingMore=!0,this.renderList(),this.loadRemote(this.query,{append:!0}))}async loadRemote(e,{append:t=!1,requestId:i}={}){let s=this.opts.ajax,n=i??++this.ajaxRequestId;if(n!==this.ajaxRequestId)return;this.ajaxController?.abort();let a=new AbortController;this.ajaxController=a;let o=t?this.page+1:0;try{let l=_(s,e,o),h=await fetch(l,{signal:a.signal});if(h.ok===!1)throw new Error(`ForgeSelect: remote request failed with HTTP ${h.status}`);let f=await h.json();if(n!==this.ajaxRequestId||this.destroyed)return;let{options:d,hasMore:c}=R(s,f);if(t){let m=N(this.data);this.data=[...this.data,...d.filter(g=>!m.has(g.value))]}else this.data=d,this.rowContentCache.clear();this.page=o,this.hasMore=c,this.remoteLoaded=!0,this.loadError=null}catch(l){if(n!==this.ajaxRequestId||this.destroyed||a.signal.aborted)return;let h=l instanceof Error?l:new Error(String(l));t||(this.data=[],this.rowContentCache.clear()),this.hasMore=!1,this.loadError=h,this.emitter.emit("error",h)}finally{n===this.ajaxRequestId&&!this.destroyed&&(this.ajaxController=null,this.loading=!1,this.loadingMore=!1,this.isOpen&&this.renderList())}}};return B(X);})();
 //# sourceMappingURL=index.global.js.map