@selkit/dom 0.6.0 → 0.8.0

package/dist/index.cjs

@@ -69,19 +69,7 @@ function attachPositioner(trigger, dropdown, autoWidth = false) {
   };
 }
 
-// src/dom.ts
-var LOAD_MORE_THRESHOLD = 32;
-var DEFAULT_ITEM_HEIGHT = 36;
-var DEFAULT_GROUP_HEIGHT = 28;
-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";
-var builtinPositioner = (trigger, dropdown, opts) => attachPositioner(trigger, dropdown, opts?.autoWidth ?? false);
-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;
-}
+// src/select-form.ts
 function parseSelectElement(select) {
   const options = [];
   const selectedValues = [];
@@ -141,6 +129,115 @@ function mergeSelectConfig(config, select) {
     name: config.name ?? parsed.name
   };
 }
+function syncToSelect(select, 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 }));
+}
+function syncHiddenInputs(container, opts) {
+  container.replaceChildren();
+  const inputName = opts.multiple ? `${opts.name}[]` : opts.name;
+  const values = opts.multiple ? opts.selected : opts.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);
+  }
+}
+
+// src/templates.ts
+function applyTemplate(host, out) {
+  if (out instanceof Node) host.append(out);
+  else host.textContent = out;
+}
+function spacer(height) {
+  const el = document.createElement("div");
+  el.style.height = `${height}px`;
+  el.setAttribute("aria-hidden", "true");
+  return el;
+}
+function buildGroupRow(row, prefix, templateGroup) {
+  const group = document.createElement("div");
+  group.className = `${prefix}__group`;
+  if (row.disabled) group.classList.add(`${prefix}__group--disabled`);
+  if (templateGroup) {
+    applyTemplate(
+      group,
+      templateGroup({ label: row.label, disabled: !!row.disabled })
+    );
+  } else {
+    group.textContent = row.label;
+  }
+  return group;
+}
+function buildCreateRow(row, prefix, a11y, activeIndex) {
+  const attrs = a11y.option(row.index);
+  const el = document.createElement("div");
+  el.className = `${prefix}__option ${prefix}__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(`${prefix}__option--active`);
+  el.textContent = row.label;
+  return el;
+}
+function buildOption(row, prefix, a11y, activeIndex, templateOption) {
+  const attrs = a11y.option(row.index);
+  const option = document.createElement("div");
+  option.className = `${prefix}__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(`${prefix}__option--active`);
+  }
+  if (attrs["aria-selected"]) {
+    option.classList.add(`${prefix}__option--selected`);
+  }
+  if (templateOption) {
+    const out = 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;
+}
+
+// src/dom.ts
+var LOAD_MORE_THRESHOLD = 32;
+var DEFAULT_ITEM_HEIGHT = 36;
+var DEFAULT_GROUP_HEIGHT = 28;
+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";
+var builtinPositioner = (trigger, dropdown, opts) => attachPositioner(trigger, dropdown, opts?.autoWidth ?? false);
+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;
+}
 var SelkitDom = class {
   controller;
   element;
@@ -450,6 +547,7 @@ var SelkitDom = class {
     this.#syncForm();
     this.element.classList.toggle(this.#cls("", "open"), s.isOpen);
     this.element.classList.toggle(this.#cls("", "disabled"), s.disabled);
+    this.element.classList.toggle(this.#cls("", "resolving"), s.resolving);
     this.#scrollActiveIntoView(s);
   }
   /**
@@ -499,18 +597,13 @@ var SelkitDom = class {
     );
     active?.scrollIntoView?.({ block: "nearest" });
   }
-  /** 套用模板輸出：字串走 textContent（防 XSS）Node 直接掛入 */
-  #applyTemplate(host, out) {
-    if (out instanceof Node) host.append(out);
-    else host.textContent = out;
-  }
   /** 套用 templateSelection 到已選容器 無模板則用 label */
   #fillSelection(host, option, meta) {
     if (!this.#templateSelection) {
       host.textContent = option.label;
       return;
     }
-    this.#applyTemplate(host, this.#templateSelection(option, meta));
+    applyTemplate(host, this.#templateSelection(option, meta));
   }
   #renderField(s) {
     for (const child of Array.from(this.#field.children)) {
@@ -532,7 +625,7 @@ var SelkitDom = class {
         remove.dataset.index = String(i);
         remove.setAttribute("aria-label", `Remove ${opt.label}`);
         if (this.#templateTagRemove) {
-          this.#applyTemplate(remove, this.#templateTagRemove(opt, { index: i }));
+          applyTemplate(remove, this.#templateTagRemove(opt, { index: i }));
         } else {
           remove.textContent = "\xD7";
         }
@@ -566,7 +659,7 @@ var SelkitDom = class {
       clear.className = this.#cls("clear");
       clear.setAttribute("aria-label", "Clear");
       if (this.#templateClear) {
-        this.#applyTemplate(clear, this.#templateClear());
+        applyTemplate(clear, this.#templateClear());
       } else {
         clear.textContent = "\xD7";
       }
@@ -576,7 +669,7 @@ var SelkitDom = class {
     arrow.className = this.#cls("arrow");
     arrow.setAttribute("aria-hidden", "true");
     if (this.#templateArrow) {
-      this.#applyTemplate(arrow, this.#templateArrow({ open: s.isOpen }));
+      applyTemplate(arrow, this.#templateArrow({ open: s.isOpen }));
     }
     this.#indicators.append(arrow);
   }
@@ -589,7 +682,7 @@ var SelkitDom = class {
       empty.className = this.#cls("empty");
       const message = this.controller.getEmptyMessage();
       if (this.#templateEmpty) {
-        this.#applyTemplate(
+        applyTemplate(
           empty,
           this.#templateEmpty({
             reason: this.controller.getEmptyReason(),
@@ -633,90 +726,30 @@ var SelkitDom = class {
   }
   /** 渲染虛擬切片：上下佔位 + range 內各列 共用扁平與分組兩路徑 */
   #renderVirtualSlice(rows, range, a11y, activeIndex) {
-    this.#dropdown.append(this.#spacer(range.paddingTop));
+    this.#dropdown.append(spacer(range.paddingTop));
     for (let i = range.startIndex; i < range.endIndex; i++) {
       const row = rows[i];
       if (row) this.#renderRow(row, a11y, activeIndex);
     }
-    this.#dropdown.append(this.#spacer(range.paddingBottom));
+    this.#dropdown.append(spacer(range.paddingBottom));
   }
   /** 依列型別渲染並掛入下拉 group / create / option */
   #renderRow(row, a11y, activeIndex) {
     if (row.type === "group") {
-      this.#dropdown.append(this.#buildGroupRow(row));
+      this.#dropdown.append(
+        buildGroupRow(row, this.#prefix, this.#templateGroup)
+      );
       return;
     }
     if (row.type === "create") {
-      this.#dropdown.append(this.#buildCreateRow(row, a11y, activeIndex));
-      return;
-    }
-    this.#dropdown.append(this.#buildOption(row, a11y, activeIndex));
-  }
-  /** 分組標題列 套用 templateGroup（無則用 label）*/
-  #buildGroupRow(row) {
-    const group = document.createElement("div");
-    group.className = this.#cls("group");
-    if (row.disabled) group.classList.add(this.#cls("group", "disabled"));
-    if (this.#templateGroup) {
-      this.#applyTemplate(
-        group,
-        this.#templateGroup({ label: row.label, disabled: !!row.disabled })
+      this.#dropdown.append(
+        buildCreateRow(row, this.#prefix, a11y, activeIndex)
       );
-    } else {
-      group.textContent = row.label;
-    }
-    return group;
-  }
-  /** 「建立新項」列 共用 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;
     }
-    return option;
+    this.#dropdown.append(
+      buildOption(row, this.#prefix, a11y, activeIndex, this.#templateOption)
+    );
   }
   #syncA11y(s) {
     const a = this.controller.a11y();
@@ -754,38 +787,15 @@ var SelkitDom = class {
   }
   // ── 表單同步 ──────────────────────────────────────────────
   #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);
+    if (this.#sourceSelect) {
+      syncToSelect(this.#sourceSelect, selected);
+    } else if (this.#hiddenContainer) {
+      syncHiddenInputs(this.#hiddenContainer, {
+        name: this.#name,
+        multiple: this.#multiple,
+        selected
+      });
     }
   }
 };

package/dist/index.d.cts

@@ -43,6 +43,12 @@ type PositionerFactory = (trigger: HTMLElement, dropdown: HTMLElement, opts?: Po
 /** 將 dropdown 定位到 trigger 旁 並隨 scroll/resize 更新  */
 declare function attachPositioner(trigger: HTMLElement, dropdown: HTMLElement, autoWidth?: boolean): Positioner;
 
+/**
+ * @selkit/dom — 公開型別契約
+ *
+ * 從 dom.ts 抽出：config / instance / row 型別，供 dom.ts 與 select-form.ts 共用
+ */
+
 interface SelkitDomConfig<T = unknown> extends SelkitConfig<T> {
     /** class 前綴 預設 "selkit" */
     classPrefix?: string;
@@ -102,6 +108,7 @@ interface SelkitDomInstance<T = unknown> {
     readonly element: HTMLElement;
     destroy(): void;
 }
+
 declare class SelkitDom<T> implements SelkitDomInstance<T> {
     #private;
     readonly controller: SelkitController<T>;

package/dist/index.d.ts

@@ -43,6 +43,12 @@ type PositionerFactory = (trigger: HTMLElement, dropdown: HTMLElement, opts?: Po
 /** 將 dropdown 定位到 trigger 旁 並隨 scroll/resize 更新  */
 declare function attachPositioner(trigger: HTMLElement, dropdown: HTMLElement, autoWidth?: boolean): Positioner;
 
+/**
+ * @selkit/dom — 公開型別契約
+ *
+ * 從 dom.ts 抽出：config / instance / row 型別，供 dom.ts 與 select-form.ts 共用
+ */
+
 interface SelkitDomConfig<T = unknown> extends SelkitConfig<T> {
     /** class 前綴 預設 "selkit" */
     classPrefix?: string;
@@ -102,6 +108,7 @@ interface SelkitDomInstance<T = unknown> {
     readonly element: HTMLElement;
     destroy(): void;
 }
+
 declare class SelkitDom<T> implements SelkitDomInstance<T> {
     #private;
     readonly controller: SelkitController<T>;

package/dist/index.js

@@ -44,19 +44,7 @@ function attachPositioner(trigger, dropdown, autoWidth = false) {
   };
 }
 
-// src/dom.ts
-var LOAD_MORE_THRESHOLD = 32;
-var DEFAULT_ITEM_HEIGHT = 36;
-var DEFAULT_GROUP_HEIGHT = 28;
-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";
-var builtinPositioner = (trigger, dropdown, opts) => attachPositioner(trigger, dropdown, opts?.autoWidth ?? false);
-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;
-}
+// src/select-form.ts
 function parseSelectElement(select) {
   const options = [];
   const selectedValues = [];
@@ -116,6 +104,115 @@ function mergeSelectConfig(config, select) {
     name: config.name ?? parsed.name
   };
 }
+function syncToSelect(select, 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 }));
+}
+function syncHiddenInputs(container, opts) {
+  container.replaceChildren();
+  const inputName = opts.multiple ? `${opts.name}[]` : opts.name;
+  const values = opts.multiple ? opts.selected : opts.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);
+  }
+}
+
+// src/templates.ts
+function applyTemplate(host, out) {
+  if (out instanceof Node) host.append(out);
+  else host.textContent = out;
+}
+function spacer(height) {
+  const el = document.createElement("div");
+  el.style.height = `${height}px`;
+  el.setAttribute("aria-hidden", "true");
+  return el;
+}
+function buildGroupRow(row, prefix, templateGroup) {
+  const group = document.createElement("div");
+  group.className = `${prefix}__group`;
+  if (row.disabled) group.classList.add(`${prefix}__group--disabled`);
+  if (templateGroup) {
+    applyTemplate(
+      group,
+      templateGroup({ label: row.label, disabled: !!row.disabled })
+    );
+  } else {
+    group.textContent = row.label;
+  }
+  return group;
+}
+function buildCreateRow(row, prefix, a11y, activeIndex) {
+  const attrs = a11y.option(row.index);
+  const el = document.createElement("div");
+  el.className = `${prefix}__option ${prefix}__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(`${prefix}__option--active`);
+  el.textContent = row.label;
+  return el;
+}
+function buildOption(row, prefix, a11y, activeIndex, templateOption) {
+  const attrs = a11y.option(row.index);
+  const option = document.createElement("div");
+  option.className = `${prefix}__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(`${prefix}__option--active`);
+  }
+  if (attrs["aria-selected"]) {
+    option.classList.add(`${prefix}__option--selected`);
+  }
+  if (templateOption) {
+    const out = 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;
+}
+
+// src/dom.ts
+var LOAD_MORE_THRESHOLD = 32;
+var DEFAULT_ITEM_HEIGHT = 36;
+var DEFAULT_GROUP_HEIGHT = 28;
+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";
+var builtinPositioner = (trigger, dropdown, opts) => attachPositioner(trigger, dropdown, opts?.autoWidth ?? false);
+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;
+}
 var SelkitDom = class {
   controller;
   element;
@@ -425,6 +522,7 @@ var SelkitDom = class {
     this.#syncForm();
     this.element.classList.toggle(this.#cls("", "open"), s.isOpen);
     this.element.classList.toggle(this.#cls("", "disabled"), s.disabled);
+    this.element.classList.toggle(this.#cls("", "resolving"), s.resolving);
     this.#scrollActiveIntoView(s);
   }
   /**
@@ -474,18 +572,13 @@ var SelkitDom = class {
     );
     active?.scrollIntoView?.({ block: "nearest" });
   }
-  /** 套用模板輸出：字串走 textContent（防 XSS）Node 直接掛入 */
-  #applyTemplate(host, out) {
-    if (out instanceof Node) host.append(out);
-    else host.textContent = out;
-  }
   /** 套用 templateSelection 到已選容器 無模板則用 label */
   #fillSelection(host, option, meta) {
     if (!this.#templateSelection) {
       host.textContent = option.label;
       return;
     }
-    this.#applyTemplate(host, this.#templateSelection(option, meta));
+    applyTemplate(host, this.#templateSelection(option, meta));
   }
   #renderField(s) {
     for (const child of Array.from(this.#field.children)) {
@@ -507,7 +600,7 @@ var SelkitDom = class {
         remove.dataset.index = String(i);
         remove.setAttribute("aria-label", `Remove ${opt.label}`);
         if (this.#templateTagRemove) {
-          this.#applyTemplate(remove, this.#templateTagRemove(opt, { index: i }));
+          applyTemplate(remove, this.#templateTagRemove(opt, { index: i }));
         } else {
           remove.textContent = "\xD7";
         }
@@ -541,7 +634,7 @@ var SelkitDom = class {
       clear.className = this.#cls("clear");
       clear.setAttribute("aria-label", "Clear");
       if (this.#templateClear) {
-        this.#applyTemplate(clear, this.#templateClear());
+        applyTemplate(clear, this.#templateClear());
       } else {
         clear.textContent = "\xD7";
       }
@@ -551,7 +644,7 @@ var SelkitDom = class {
     arrow.className = this.#cls("arrow");
     arrow.setAttribute("aria-hidden", "true");
     if (this.#templateArrow) {
-      this.#applyTemplate(arrow, this.#templateArrow({ open: s.isOpen }));
+      applyTemplate(arrow, this.#templateArrow({ open: s.isOpen }));
     }
     this.#indicators.append(arrow);
   }
@@ -564,7 +657,7 @@ var SelkitDom = class {
       empty.className = this.#cls("empty");
       const message = this.controller.getEmptyMessage();
       if (this.#templateEmpty) {
-        this.#applyTemplate(
+        applyTemplate(
           empty,
           this.#templateEmpty({
             reason: this.controller.getEmptyReason(),
@@ -608,90 +701,30 @@ var SelkitDom = class {
   }
   /** 渲染虛擬切片：上下佔位 + range 內各列 共用扁平與分組兩路徑 */
   #renderVirtualSlice(rows, range, a11y, activeIndex) {
-    this.#dropdown.append(this.#spacer(range.paddingTop));
+    this.#dropdown.append(spacer(range.paddingTop));
     for (let i = range.startIndex; i < range.endIndex; i++) {
       const row = rows[i];
       if (row) this.#renderRow(row, a11y, activeIndex);
     }
-    this.#dropdown.append(this.#spacer(range.paddingBottom));
+    this.#dropdown.append(spacer(range.paddingBottom));
   }
   /** 依列型別渲染並掛入下拉 group / create / option */
   #renderRow(row, a11y, activeIndex) {
     if (row.type === "group") {
-      this.#dropdown.append(this.#buildGroupRow(row));
+      this.#dropdown.append(
+        buildGroupRow(row, this.#prefix, this.#templateGroup)
+      );
       return;
     }
     if (row.type === "create") {
-      this.#dropdown.append(this.#buildCreateRow(row, a11y, activeIndex));
-      return;
-    }
-    this.#dropdown.append(this.#buildOption(row, a11y, activeIndex));
-  }
-  /** 分組標題列 套用 templateGroup（無則用 label）*/
-  #buildGroupRow(row) {
-    const group = document.createElement("div");
-    group.className = this.#cls("group");
-    if (row.disabled) group.classList.add(this.#cls("group", "disabled"));
-    if (this.#templateGroup) {
-      this.#applyTemplate(
-        group,
-        this.#templateGroup({ label: row.label, disabled: !!row.disabled })
+      this.#dropdown.append(
+        buildCreateRow(row, this.#prefix, a11y, activeIndex)
       );
-    } else {
-      group.textContent = row.label;
-    }
-    return group;
-  }
-  /** 「建立新項」列 共用 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;
     }
-    return option;
+    this.#dropdown.append(
+      buildOption(row, this.#prefix, a11y, activeIndex, this.#templateOption)
+    );
   }
   #syncA11y(s) {
     const a = this.controller.a11y();
@@ -729,38 +762,15 @@ var SelkitDom = class {
   }
   // ── 表單同步 ──────────────────────────────────────────────
   #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);
+    if (this.#sourceSelect) {
+      syncToSelect(this.#sourceSelect, selected);
+    } else if (this.#hiddenContainer) {
+      syncHiddenInputs(this.#hiddenContainer, {
+        name: this.#name,
+        multiple: this.#multiple,
+        selected
+      });
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selkit/dom",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "Vanilla JS renderer for Selkit — DOM, events, a11y and default positioner.",
   "license": "MIT",
   "type": "module",
@@ -19,7 +19,7 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@selkit/core": "0.6.0"
+    "@selkit/core": "0.8.0"
   },
   "devDependencies": {
     "axe-core": "^4.12.1",