@selkit/dom 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 cluion
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,685 @@
+"use strict";
+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, {
+  Selkit: () => SelkitDom,
+  SelkitDom: () => SelkitDom,
+  attachPositioner: () => attachPositioner,
+  computePosition: () => computePosition,
+  createSelkitDom: () => createSelkitDom,
+  sk: () => createSelkitDom
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/dom.ts
+var import_core = require("@selkit/core");
+
+// src/positioner.ts
+function computePosition(triggerRect, dropdownHeight, viewportHeight, gap = 4) {
+  const spaceBelow = viewportHeight - triggerRect.bottom;
+  const spaceAbove = triggerRect.top;
+  const placement = spaceBelow < dropdownHeight && spaceAbove > spaceBelow ? "top" : "bottom";
+  const top = placement === "bottom" ? triggerRect.bottom + gap : triggerRect.top - gap - dropdownHeight;
+  return { placement, top, left: triggerRect.left, width: triggerRect.width };
+}
+function attachPositioner(trigger, dropdown, autoWidth = false) {
+  const update = () => {
+    const rect = trigger.getBoundingClientRect();
+    const pos = computePosition(rect, dropdown.offsetHeight, window.innerHeight);
+    dropdown.style.position = "fixed";
+    dropdown.style.top = `${pos.top}px`;
+    dropdown.style.left = `${pos.left}px`;
+    if (autoWidth) {
+      dropdown.style.minWidth = `${pos.width}px`;
+      dropdown.style.width = "max-content";
+    } else {
+      dropdown.style.width = `${pos.width}px`;
+    }
+    dropdown.dataset.placement = pos.placement;
+  };
+  const onScroll = () => update();
+  const onResize = () => update();
+  window.addEventListener("scroll", onScroll, true);
+  window.addEventListener("resize", onResize);
+  update();
+  return {
+    update,
+    destroy() {
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onResize);
+    }
+  };
+}
+
+// src/dom.ts
+var LOAD_MORE_THRESHOLD = 32;
+var DEFAULT_ITEM_HEIGHT = 36;
+var SR_ONLY_CSS = "position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0";
+function resolveParent(parent) {
+  if (!parent) return null;
+  if (typeof parent !== "string") return parent;
+  const el = document.querySelector(parent);
+  if (!el) throw new Error(`[selkit] \u627E\u4E0D\u5230 dropdownParent ${parent}`);
+  return el;
+}
+function parseSelectElement(select) {
+  const options = [];
+  const selectedValues = [];
+  let placeholder = select.dataset.placeholder;
+  const readOption = (o) => {
+    if (o.value === "") {
+      if (!placeholder) placeholder = o.textContent?.trim() || void 0;
+      return null;
+    }
+    if (o.selected) selectedValues.push(o.value);
+    return {
+      value: o.value,
+      label: (o.label || o.textContent || o.value).trim(),
+      ...o.disabled ? { disabled: true } : {}
+    };
+  };
+  for (const child of Array.from(select.children)) {
+    if (child instanceof HTMLOptGroupElement) {
+      const opts = [];
+      for (const o of Array.from(child.children)) {
+        if (o instanceof HTMLOptionElement) {
+          const parsed = readOption(o);
+          if (parsed) opts.push(parsed);
+        }
+      }
+      if (opts.length) {
+        options.push({
+          label: child.label,
+          ...child.disabled ? { disabled: true } : {},
+          options: opts
+        });
+      }
+    } else if (child instanceof HTMLOptionElement) {
+      const parsed = readOption(child);
+      if (parsed) options.push(parsed);
+    }
+  }
+  const value = select.multiple ? selectedValues : selectedValues[0] ?? null;
+  return {
+    options,
+    value,
+    multiple: select.multiple,
+    disabled: select.disabled,
+    placeholder,
+    name: select.name || void 0
+  };
+}
+function mergeSelectConfig(config, select) {
+  const parsed = parseSelectElement(select);
+  return {
+    ...config,
+    options: config.options ?? parsed.options,
+    multiple: config.multiple ?? parsed.multiple,
+    value: config.value ?? parsed.value,
+    disabled: config.disabled ?? parsed.disabled,
+    placeholder: config.placeholder ?? parsed.placeholder,
+    name: config.name ?? parsed.name
+  };
+}
+var SelkitDom = class {
+  controller;
+  element;
+  #prefix;
+  #multiple;
+  #checkboxes;
+  #autogrow;
+  #dropdownAutoWidth;
+  #clearable;
+  #placeholder;
+  #name;
+  #virtual;
+  #itemHeight;
+  #dropdownParent;
+  #templateSelection;
+  #templateOption;
+  #sourceSelect;
+  #control;
+  #field;
+  #input;
+  #indicators;
+  #dropdown;
+  #live;
+  #hiddenContainer = null;
+  #selectPrevDisplay = "";
+  #dragFrom = -1;
+  #positioner = null;
+  #unsubscribe;
+  #offClose;
+  #offCreate;
+  #offAnnounce;
+  #onDocPointer;
+  constructor(target, config) {
+    const host = typeof target === "string" ? document.querySelector(target) : target;
+    if (!host) {
+      throw new Error(`[selkit] \u627E\u4E0D\u5230\u639B\u8F09\u76EE\u6A19 ${String(target)}`);
+    }
+    const sourceSelect = host instanceof HTMLSelectElement ? host : null;
+    const cfg = sourceSelect ? mergeSelectConfig(config, sourceSelect) : config;
+    this.#sourceSelect = sourceSelect;
+    this.#prefix = cfg.classPrefix ?? "selkit";
+    this.#multiple = cfg.multiple ?? false;
+    this.#checkboxes = cfg.checkboxes ?? false;
+    this.#autogrow = cfg.autogrow ?? false;
+    this.#dropdownAutoWidth = cfg.dropdownAutoWidth ?? false;
+    this.#clearable = cfg.clearable ?? !this.#multiple;
+    this.#placeholder = cfg.placeholder ?? "";
+    this.#name = cfg.name;
+    this.#virtual = cfg.virtualScroll ?? false;
+    this.#itemHeight = cfg.itemHeight ?? DEFAULT_ITEM_HEIGHT;
+    this.#dropdownParent = resolveParent(cfg.dropdownParent);
+    this.#templateSelection = cfg.templateSelection;
+    this.#templateOption = cfg.templateOption;
+    this.controller = (0, import_core.createSelkit)(cfg);
+    this.element = document.createElement("div");
+    this.element.className = this.#prefix;
+    if (this.#multiple) this.element.classList.add(this.#cls("", "multiple"));
+    if (this.#multiple && this.#checkboxes) {
+      this.element.classList.add(this.#cls("", "checkboxes"));
+    }
+    if (this.#autogrow) this.element.classList.add(this.#cls("", "autogrow"));
+    if (this.#dropdownAutoWidth) {
+      this.element.classList.add(this.#cls("", "auto-width"));
+    }
+    this.#control = document.createElement("div");
+    this.#control.className = this.#cls("control");
+    this.#control.tabIndex = 0;
+    this.#field = document.createElement("div");
+    this.#field.className = this.#cls("field");
+    this.#input = document.createElement("input");
+    this.#input.className = this.#cls("input");
+    this.#input.type = "text";
+    this.#input.autocomplete = "off";
+    this.#input.setAttribute("aria-autocomplete", "list");
+    const ariaLabel = cfg.ariaLabel ?? this.#placeholder;
+    if (ariaLabel) this.#input.setAttribute("aria-label", ariaLabel);
+    this.#indicators = document.createElement("div");
+    this.#indicators.className = this.#cls("indicators");
+    this.#dropdown = document.createElement("div");
+    this.#dropdown.className = this.#cls("dropdown");
+    this.#dropdown.hidden = true;
+    this.#live = document.createElement("div");
+    this.#live.className = this.#cls("live");
+    this.#live.setAttribute("role", "status");
+    this.#live.setAttribute("aria-live", "polite");
+    this.#live.setAttribute("aria-atomic", "true");
+    this.#live.style.cssText = SR_ONLY_CSS;
+    this.#field.append(this.#input);
+    this.#control.append(this.#field, this.#indicators);
+    if (this.#dropdownParent) {
+      this.#dropdown.classList.add(this.#prefix);
+      this.element.append(this.#control);
+      this.#dropdownParent.append(this.#dropdown);
+    } else {
+      this.element.append(this.#control, this.#dropdown);
+    }
+    this.element.append(this.#live);
+    if (sourceSelect) {
+      sourceSelect.after(this.element);
+      this.#selectPrevDisplay = sourceSelect.style.display;
+      sourceSelect.style.display = "none";
+      sourceSelect.setAttribute("aria-hidden", "true");
+      sourceSelect.tabIndex = -1;
+    } else {
+      host.append(this.element);
+      if (this.#name) {
+        this.#hiddenContainer = document.createElement("div");
+        this.#hiddenContainer.style.display = "none";
+        this.element.append(this.#hiddenContainer);
+      }
+    }
+    this.#bindEvents();
+    this.#onDocPointer = (e) => {
+      const target2 = e.target;
+      if (!this.element.contains(target2) && !this.#dropdown.contains(target2)) {
+        this.controller.close();
+      }
+    };
+    document.addEventListener("pointerdown", this.#onDocPointer);
+    this.#offClose = this.controller.on("close", () => {
+      if (this.#input.value !== "") {
+        this.#input.value = "";
+        this.controller.setQuery("");
+      }
+    });
+    this.#offCreate = this.controller.on("create", () => {
+      this.#input.value = "";
+    });
+    this.#offAnnounce = this.controller.on("announce", ({ message }) => {
+      this.#live.textContent = message;
+    });
+    this.#unsubscribe = this.controller.subscribe((s) => this.#render(s));
+    this.#render(this.controller.getState());
+  }
+  destroy() {
+    this.#unsubscribe();
+    this.#offClose();
+    this.#offCreate();
+    this.#offAnnounce();
+    this.#positioner?.destroy();
+    document.removeEventListener("pointerdown", this.#onDocPointer);
+    this.controller.destroy();
+    this.#dropdown.remove();
+    this.element.remove();
+    if (this.#sourceSelect) {
+      this.#sourceSelect.style.display = this.#selectPrevDisplay;
+      this.#sourceSelect.removeAttribute("aria-hidden");
+      this.#sourceSelect.tabIndex = 0;
+    }
+  }
+  // ── class 命名 (BEM) ─────────────────────────────────────
+  #cls(name, modifier) {
+    const base = name ? `${this.#prefix}__${name}` : this.#prefix;
+    return modifier ? `${base}--${modifier}` : base;
+  }
+  // ── 事件綁定（轉呼叫 controller 不含邏輯）─────────────────
+  #bindEvents() {
+    this.#control.addEventListener("pointerdown", (e) => {
+      e.stopPropagation();
+      const target = e.target;
+      if (target.closest(`.${this.#cls("clear")}`)) {
+        e.preventDefault();
+        this.controller.clear();
+        return;
+      }
+      const tagRemove = target.closest(
+        `.${this.#cls("tag-remove")}`
+      );
+      if (tagRemove) {
+        e.preventDefault();
+        const idx = Number(tagRemove.dataset.index);
+        const sel = this.controller.getState().selected[idx];
+        if (sel) this.controller.deselect(sel.value);
+        return;
+      }
+      if (target !== this.#input) {
+        e.preventDefault();
+        this.#input.focus();
+        this.controller.toggle();
+      } else {
+        this.controller.open();
+      }
+    });
+    this.#input.addEventListener("input", () => {
+      this.controller.open();
+      this.controller.setQuery(this.#input.value);
+      const q = this.controller.getState().query;
+      if (q !== this.#input.value) this.#input.value = q;
+    });
+    this.#control.addEventListener("keydown", (e) => this.#onKeydown(e));
+    this.#dropdown.addEventListener("pointerdown", (e) => {
+      e.stopPropagation();
+      const optEl = e.target.closest(
+        `.${this.#cls("option")}`
+      );
+      if (!optEl || optEl.getAttribute("aria-disabled") === "true") return;
+      e.preventDefault();
+      if (optEl.dataset.create === "true") {
+        this.controller.createTag();
+        return;
+      }
+      const index = Number(optEl.dataset.index);
+      const opt = this.controller.getState().visibleOptions[index];
+      if (!opt) return;
+      if (this.#multiple) this.controller.toggleSelect(opt.value);
+      else this.controller.select(opt.value);
+    });
+    this.#dropdown.addEventListener("scroll", () => {
+      const el = this.#dropdown;
+      if (el.scrollTop + el.clientHeight >= el.scrollHeight - LOAD_MORE_THRESHOLD) {
+        this.controller.loadMore();
+      }
+      if (this.#virtual) this.#renderOptions(this.controller.getState());
+    });
+    this.#field.addEventListener("dragstart", (e) => {
+      const tag = e.target.closest(
+        `.${this.#cls("tag")}`
+      );
+      if (!tag) return;
+      this.#dragFrom = Number(tag.dataset.index);
+      if (e.dataTransfer) e.dataTransfer.effectAllowed = "move";
+    });
+    this.#field.addEventListener("dragover", (e) => {
+      if (this.#dragFrom < 0) return;
+      e.preventDefault();
+    });
+    this.#field.addEventListener("drop", (e) => {
+      if (this.#dragFrom < 0) return;
+      e.preventDefault();
+      const tag = e.target.closest(
+        `.${this.#cls("tag")}`
+      );
+      const to = tag ? Number(tag.dataset.index) : this.controller.getState().selected.length - 1;
+      this.controller.moveSelected(this.#dragFrom, to);
+      this.#dragFrom = -1;
+    });
+    this.#field.addEventListener("dragend", () => {
+      this.#dragFrom = -1;
+    });
+  }
+  #onKeydown(e) {
+    const st = this.controller.getState();
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        st.isOpen ? this.controller.moveActive(1) : this.controller.open();
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        st.isOpen ? this.controller.moveActive(-1) : this.controller.open();
+        break;
+      case "Enter":
+        if (st.isOpen) {
+          e.preventDefault();
+          this.controller.selectActive();
+        }
+        break;
+      case "Escape":
+        if (st.isOpen) {
+          e.preventDefault();
+          this.controller.close();
+        }
+        break;
+      case "Home":
+        if (st.isOpen) {
+          e.preventDefault();
+          this.controller.moveActiveToStart();
+        }
+        break;
+      case "End":
+        if (st.isOpen) {
+          e.preventDefault();
+          this.controller.moveActiveToEnd();
+        }
+        break;
+      case "Backspace":
+        if (this.#multiple && this.#input.value === "" && st.selected.length) {
+          this.controller.backspace();
+          this.#input.value = this.controller.getState().query;
+        }
+        break;
+    }
+  }
+  // ── 渲染 ─────────────────────────────────────────────────
+  #render(s) {
+    this.#renderField(s);
+    this.#renderIndicators(s);
+    this.#renderOptions(s);
+    this.#syncA11y(s);
+    this.#syncOpen(s);
+    this.#syncForm();
+    this.element.classList.toggle(this.#cls("", "open"), s.isOpen);
+    this.element.classList.toggle(this.#cls("", "disabled"), s.disabled);
+  }
+  /** 套用 templateSelection 到已選容器 字串走 textContent Node 直接掛入 無模板則用 label */
+  #fillSelection(host, option, meta) {
+    if (!this.#templateSelection) {
+      host.textContent = option.label;
+      return;
+    }
+    const out = this.#templateSelection(option, meta);
+    if (out instanceof Node) host.append(out);
+    else host.textContent = out;
+  }
+  #renderField(s) {
+    for (const child of Array.from(this.#field.children)) {
+      if (child !== this.#input) child.remove();
+    }
+    const frag = document.createDocumentFragment();
+    if (this.#multiple) {
+      s.selected.forEach((opt, i) => {
+        const tag = document.createElement("span");
+        tag.className = this.#cls("tag");
+        tag.draggable = true;
+        tag.dataset.index = String(i);
+        const label = document.createElement("span");
+        label.className = this.#cls("tag-label");
+        this.#fillSelection(label, opt, { index: i, multiple: true });
+        const remove = document.createElement("button");
+        remove.type = "button";
+        remove.className = this.#cls("tag-remove");
+        remove.dataset.index = String(i);
+        remove.setAttribute("aria-label", `Remove ${opt.label}`);
+        remove.textContent = "\xD7";
+        tag.append(label, remove);
+        frag.append(tag);
+      });
+    } else {
+      const sel = s.selected[0];
+      if (sel && this.#input.value === "") {
+        const single = document.createElement("span");
+        single.className = this.#cls("single-value");
+        this.#fillSelection(single, sel, { index: 0, multiple: false });
+        frag.append(single);
+      }
+    }
+    this.#field.insertBefore(frag, this.#input);
+    this.#input.placeholder = s.selected.length === 0 ? this.#placeholder : "";
+    this.#syncInputSize();
+  }
+  /** autogrow：以 size 屬性讓輸入框寬度貼齊內容（值或佔位文字）*/
+  #syncInputSize() {
+    if (!this.#autogrow) return;
+    const basis = this.#input.value || this.#input.placeholder;
+    this.#input.size = Math.max(1, basis.length);
+  }
+  #renderIndicators(s) {
+    this.#indicators.replaceChildren();
+    if (this.#clearable && s.selected.length > 0) {
+      const clear = document.createElement("button");
+      clear.type = "button";
+      clear.className = this.#cls("clear");
+      clear.setAttribute("aria-label", "Clear");
+      clear.textContent = "\xD7";
+      this.#indicators.append(clear);
+    }
+    const arrow = document.createElement("span");
+    arrow.className = this.#cls("arrow");
+    arrow.setAttribute("aria-hidden", "true");
+    this.#indicators.append(arrow);
+  }
+  #renderOptions(s) {
+    this.#dropdown.replaceChildren();
+    const a11y = this.controller.a11y();
+    const view = this.controller.getGroupedView();
+    if (view.rows.length === 0) {
+      const empty = document.createElement("div");
+      empty.className = this.#cls("empty");
+      empty.textContent = this.controller.getEmptyMessage();
+      this.#dropdown.append(empty);
+      return;
+    }
+    const hasGroups = view.rows.some((r) => r.type === "group");
+    if (this.#virtual && !hasGroups) {
+      const range = (0, import_core.computeVirtualRange)({
+        scrollTop: this.#dropdown.scrollTop,
+        viewportHeight: this.#dropdown.clientHeight,
+        itemHeight: this.#itemHeight,
+        itemCount: view.rows.length
+      });
+      this.#dropdown.append(this.#spacer(range.paddingTop));
+      for (let i = range.startIndex; i < range.endIndex; i++) {
+        const row = view.rows[i];
+        if (row?.type === "option") {
+          this.#dropdown.append(this.#buildOption(row, a11y, s.activeIndex));
+        } else if (row?.type === "create") {
+          this.#dropdown.append(this.#buildCreateRow(row, a11y, s.activeIndex));
+        }
+      }
+      this.#dropdown.append(this.#spacer(range.paddingBottom));
+      return;
+    }
+    for (const row of view.rows) {
+      if (row.type === "group") {
+        const group = document.createElement("div");
+        group.className = this.#cls("group");
+        if (row.disabled) group.classList.add(this.#cls("group", "disabled"));
+        group.textContent = row.label;
+        this.#dropdown.append(group);
+        continue;
+      }
+      if (row.type === "create") {
+        this.#dropdown.append(this.#buildCreateRow(row, a11y, s.activeIndex));
+        continue;
+      }
+      this.#dropdown.append(this.#buildOption(row, a11y, s.activeIndex));
+    }
+  }
+  /** 「建立新項」列 共用 option 樣式與 a11y 但點擊走 createTag */
+  #buildCreateRow(row, a11y, activeIndex) {
+    const attrs = a11y.option(row.index);
+    const el = document.createElement("div");
+    el.className = `${this.#cls("option")} ${this.#cls("create")}`;
+    el.id = attrs.id;
+    el.dataset.index = String(row.index);
+    el.dataset.create = "true";
+    el.setAttribute("role", "option");
+    el.setAttribute("aria-selected", "false");
+    if (row.index === activeIndex) {
+      el.classList.add(this.#cls("option", "active"));
+    }
+    el.textContent = row.label;
+    return el;
+  }
+  /** 撐高佔位節點 維持虛擬捲動時的捲動總高度 */
+  #spacer(height) {
+    const el = document.createElement("div");
+    el.style.height = `${height}px`;
+    el.setAttribute("aria-hidden", "true");
+    return el;
+  }
+  #buildOption(row, a11y, activeIndex) {
+    const attrs = a11y.option(row.index);
+    const option = document.createElement("div");
+    option.className = this.#cls("option");
+    option.id = attrs.id;
+    option.dataset.index = String(row.index);
+    option.setAttribute("role", "option");
+    option.setAttribute("aria-selected", String(attrs["aria-selected"]));
+    if (attrs["aria-disabled"]) option.setAttribute("aria-disabled", "true");
+    if (row.index === activeIndex) {
+      option.classList.add(this.#cls("option", "active"));
+    }
+    if (attrs["aria-selected"]) {
+      option.classList.add(this.#cls("option", "selected"));
+    }
+    if (this.#templateOption) {
+      const out = this.#templateOption(row.option, {
+        index: row.index,
+        active: row.index === activeIndex,
+        selected: attrs["aria-selected"]
+      });
+      if (out instanceof Node) option.append(out);
+      else option.textContent = out;
+    } else {
+      option.textContent = row.option.label;
+    }
+    return option;
+  }
+  #syncA11y(s) {
+    const a = this.controller.a11y();
+    const c = this.#control;
+    c.setAttribute("role", a.trigger.role);
+    c.setAttribute("aria-expanded", String(a.trigger["aria-expanded"]));
+    c.setAttribute("aria-haspopup", a.trigger["aria-haspopup"]);
+    c.setAttribute("aria-controls", a.trigger["aria-controls"]);
+    const active = a.trigger["aria-activedescendant"];
+    if (active) c.setAttribute("aria-activedescendant", active);
+    else c.removeAttribute("aria-activedescendant");
+    if (a.trigger["aria-disabled"]) c.setAttribute("aria-disabled", "true");
+    else c.removeAttribute("aria-disabled");
+    this.#dropdown.id = a.listbox.id;
+    this.#dropdown.setAttribute("role", a.listbox.role);
+    if (a.listbox["aria-multiselectable"]) {
+      this.#dropdown.setAttribute("aria-multiselectable", "true");
+    }
+    this.#input.disabled = s.disabled;
+    this.#input.readOnly = !this.controller.isSearchable();
+  }
+  #syncOpen(s) {
+    if (s.isOpen) {
+      this.#dropdown.hidden = false;
+      if (this.#positioner) this.#positioner.update();
+      else
+        this.#positioner = attachPositioner(
+          this.#control,
+          this.#dropdown,
+          this.#dropdownAutoWidth
+        );
+    } else {
+      this.#dropdown.hidden = true;
+      this.#positioner?.destroy();
+      this.#positioner = null;
+    }
+  }
+  // ── 表單同步 ──────────────────────────────────────────────
+  #syncForm() {
+    if (this.#sourceSelect) this.#syncToSelect(this.#sourceSelect);
+    else if (this.#hiddenContainer) this.#syncHiddenInputs(this.#hiddenContainer);
+  }
+  #syncToSelect(select) {
+    const selected = this.controller.getState().selected;
+    const selectedSet = new Set(selected.map((o) => String(o.value)));
+    for (const opt of selected) {
+      const value = String(opt.value);
+      if (!Array.from(select.options).some((o) => o.value === value)) {
+        const el = document.createElement("option");
+        el.value = value;
+        el.textContent = opt.label;
+        select.append(el);
+      }
+    }
+    for (const o of Array.from(select.options)) {
+      o.selected = selectedSet.has(o.value);
+    }
+    select.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+  #syncHiddenInputs(container) {
+    container.replaceChildren();
+    const name = this.#name;
+    const inputName = this.#multiple ? `${name}[]` : name;
+    const selected = this.controller.getState().selected;
+    const values = this.#multiple ? selected : selected.slice(0, 1);
+    for (const opt of values) {
+      const input = document.createElement("input");
+      input.type = "hidden";
+      input.name = inputName;
+      input.value = String(opt.value);
+      container.append(input);
+    }
+  }
+};
+function createSelkitDom(host, config = {}) {
+  return new SelkitDom(host, config);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Selkit,
+  SelkitDom,
+  attachPositioner,
+  computePosition,
+  createSelkitDom,
+  sk
+});