@selkit/dom 0.3.0 → 0.5.0

package/dist/index.cjs

@@ -72,7 +72,9 @@ 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;
@@ -152,7 +154,9 @@ var SelkitDom = class {
   #name;
   #virtual;
   #itemHeight;
+  #groupHeight;
   #dropdownParent;
+  #positionerFactory;
   #templateSelection;
   #templateOption;
   #templateArrow;
@@ -196,7 +200,9 @@ var SelkitDom = class {
     this.#name = cfg.name;
     this.#virtual = cfg.virtualScroll ?? false;
     this.#itemHeight = cfg.itemHeight ?? DEFAULT_ITEM_HEIGHT;
+    this.#groupHeight = cfg.groupHeight ?? DEFAULT_GROUP_HEIGHT;
     this.#dropdownParent = resolveParent(cfg.dropdownParent);
+    this.#positionerFactory = cfg.positioner ?? builtinPositioner;
     this.#templateSelection = cfg.templateSelection;
     this.#templateOption = cfg.templateOption;
     this.#templateArrow = cfg.templateArrow;
@@ -457,7 +463,8 @@ var SelkitDom = class {
     }
     if (s.activeIndex === this.#lastActive || s.activeIndex < 0) return;
     this.#lastActive = s.activeIndex;
-    const hasGroups = this.controller.getGroupedView().rows.some((r) => r.type === "group");
+    const rows = this.controller.getGroupedView().rows;
+    const hasGroups = rows.some((r) => r.type === "group");
     if (this.#virtual && !hasGroups) {
       const next = (0, import_core.computeScrollIntoView)({
         index: s.activeIndex,
@@ -471,6 +478,22 @@ var SelkitDom = class {
       }
       return;
     }
+    if (this.#virtual && hasGroups) {
+      const rowIndex = rows.findIndex(
+        (r) => r.type !== "group" && r.index === s.activeIndex
+      );
+      const next = (0, import_core.computeScrollIntoViewVariable)({
+        heights: this.#rowHeights(rows),
+        rowIndex,
+        scrollTop: this.#dropdown.scrollTop,
+        viewportHeight: this.#dropdown.clientHeight
+      });
+      if (next !== null) {
+        this.#dropdown.scrollTop = next;
+        this.#renderOptions(s);
+      }
+      return;
+    }
     const active = this.#dropdown.querySelector(
       `.${this.#cls("option", "active")}`
     );
@@ -588,40 +611,61 @@ var SelkitDom = class {
         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));
+      this.#renderVirtualSlice(view.rows, range, a11y, s.activeIndex);
       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"));
-        if (this.#templateGroup) {
-          this.#applyTemplate(
-            group,
-            this.#templateGroup({ label: row.label, disabled: !!row.disabled })
-          );
-        } else {
-          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));
+    if (this.#virtual && hasGroups) {
+      const win = (0, import_core.computeVirtualWindow)({
+        heights: this.#rowHeights(view.rows),
+        scrollTop: this.#dropdown.scrollTop,
+        viewportHeight: this.#dropdown.clientHeight
+      });
+      this.#renderVirtualSlice(view.rows, win, a11y, s.activeIndex);
+      return;
+    }
+    for (const row of view.rows) this.#renderRow(row, a11y, s.activeIndex);
+  }
+  /** 每列高度：分組標題用 groupHeight 其餘（option/create）用 itemHeight */
+  #rowHeights(rows) {
+    return rows.map(
+      (r) => r.type === "group" ? this.#groupHeight : this.#itemHeight
+    );
+  }
+  /** 渲染虛擬切片：上下佔位 + range 內各列 共用扁平與分組兩路徑 */
+  #renderVirtualSlice(rows, range, a11y, activeIndex) {
+    this.#dropdown.append(this.#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));
+  }
+  /** 依列型別渲染並掛入下拉 group / create / option */
+  #renderRow(row, a11y, activeIndex) {
+    if (row.type === "group") {
+      this.#dropdown.append(this.#buildGroupRow(row));
+      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 })
+      );
+    } else {
+      group.textContent = row.label;
+    }
+    return group;
   }
   /** 「建立新項」列 共用 option 樣式與 a11y 但點擊走 createTag */
   #buildCreateRow(row, a11y, activeIndex) {
@@ -699,11 +743,9 @@ var SelkitDom = class {
       this.#dropdown.hidden = false;
       if (this.#positioner) this.#positioner.update();
       else
-        this.#positioner = attachPositioner(
-          this.#control,
-          this.#dropdown,
-          this.#dropdownAutoWidth
-        );
+        this.#positioner = this.#positionerFactory(this.#control, this.#dropdown, {
+          autoWidth: this.#dropdownAutoWidth
+        });
     } else {
       this.#dropdown.hidden = true;
       this.#positioner?.destroy();

package/dist/index.d.cts

@@ -1,5 +1,48 @@
 import { SelkitController, SelkitConfig, SelkitOption, SelkitEmptyReason } from '@selkit/core';
 
+/**
+ * @selkit/dom — 預設輕量定位器（零依賴）
+ *
+ * 計算邏輯與 DOM 套用分離：computePosition 為純函式（可單元測）
+ * attachPositioner 負責讀取 rect、套 style、監聽 scroll/resize
+ */
+type Placement = 'bottom' | 'top';
+interface Rect {
+    top: number;
+    bottom: number;
+    left: number;
+    width: number;
+}
+interface PositionResult {
+    placement: Placement;
+    top: number;
+    left: number;
+    width: number;
+}
+/**
+ * 依觸發元件位置與下拉高度 決定放上方或下方（空間不足才翻轉）
+ * 並回傳套用座標 不做水平翻轉（select 下拉慣例對齊左緣、同寬）
+ */
+declare function computePosition(triggerRect: Rect, dropdownHeight: number, viewportHeight: number, gap?: number): PositionResult;
+interface Positioner {
+    update(): void;
+    destroy(): void;
+}
+/** 定位器工廠收到的選項 由 @selkit/dom 在開啟下拉時傳入 */
+interface PositionerOptions {
+    /** 下拉寬度貼齊內容（至少與控制項同寬）而非固定等寬 */
+    autoWidth?: boolean;
+    /** trigger 與下拉之間的間距 px 預設 4 */
+    gap?: number;
+}
+/**
+ * 定位器工廠 可插拔點：@selkit/dom 預設用內建 attachPositioner
+ * 傳入自訂工廠（如 @selkit/floating 的 createFloatingPositioner）即換成進階定位
+ */
+type PositionerFactory = (trigger: HTMLElement, dropdown: HTMLElement, opts?: PositionerOptions) => Positioner;
+/** 將 dropdown 定位到 trigger 旁 並隨 scroll/resize 更新  */
+declare function attachPositioner(trigger: HTMLElement, dropdown: HTMLElement, autoWidth?: boolean): Positioner;
+
 interface SelkitDomConfig<T = unknown> extends SelkitConfig<T> {
     /** class 前綴 預設 "selkit" */
     classPrefix?: string;
@@ -15,8 +58,12 @@ interface SelkitDomConfig<T = unknown> extends SelkitConfig<T> {
     virtualScroll?: boolean;
     /** 虛擬捲動的單列固定高度 px 預設 36 須與實際樣式高度一致 */
     itemHeight?: number;
+    /** 虛擬捲動下分組標題列的固定高度 px 預設 28 須與實際樣式高度一致 */
+    groupHeight?: number;
     /** 把下拉浮層掛到指定容器（元素或選擇器）逃離 overflow/transform 祖先的裁切 常用 document.body */
     dropdownParent?: HTMLElement | string;
+    /** 自訂定位器工廠 預設為內建零依賴定位器（垂直翻轉）傳入 @selkit/floating 的 createFloatingPositioner 即啟用 flip/shift/size 進階定位 */
+    positioner?: PositionerFactory;
     /** 自訂已選顯示內容（tag 或單值） 回傳字串走 textContent 防 XSS 需 markup（icon 等）請回傳 Node */
     templateSelection?: (option: SelkitOption<T>, meta: {
         index: number;
@@ -65,35 +112,4 @@ declare class SelkitDom<T> implements SelkitDomInstance<T> {
 /** 在指定元素或 selector 對應的元素內建立並掛載一個 Selkit 下拉 */
 declare function createSelkitDom<T = unknown>(host: HTMLElement | string, config?: SelkitDomConfig<T>): SelkitDomInstance<T>;
 
-/**
- * @selkit/dom — 預設輕量定位器（零依賴）
- *
- * 計算邏輯與 DOM 套用分離：computePosition 為純函式（可單元測）
- * attachPositioner 負責讀取 rect、套 style、監聽 scroll/resize
- */
-type Placement = 'bottom' | 'top';
-interface Rect {
-    top: number;
-    bottom: number;
-    left: number;
-    width: number;
-}
-interface PositionResult {
-    placement: Placement;
-    top: number;
-    left: number;
-    width: number;
-}
-/**
- * 依觸發元件位置與下拉高度 決定放上方或下方（空間不足才翻轉）
- * 並回傳套用座標 不做水平翻轉（select 下拉慣例對齊左緣、同寬）
- */
-declare function computePosition(triggerRect: Rect, dropdownHeight: number, viewportHeight: number, gap?: number): PositionResult;
-interface Positioner {
-    update(): void;
-    destroy(): void;
-}
-/** 將 dropdown 定位到 trigger 旁 並隨 scroll/resize 更新  */
-declare function attachPositioner(trigger: HTMLElement, dropdown: HTMLElement, autoWidth?: boolean): Positioner;
-
-export { type Placement, type PositionResult, type Positioner, type Rect, SelkitDom as Selkit, SelkitDom, type SelkitDomConfig, type SelkitDomInstance, attachPositioner, computePosition, createSelkitDom, createSelkitDom as sk };
+export { type Placement, type PositionResult, type Positioner, type PositionerFactory, type PositionerOptions, type Rect, SelkitDom as Selkit, SelkitDom, type SelkitDomConfig, type SelkitDomInstance, attachPositioner, computePosition, createSelkitDom, createSelkitDom as sk };

package/dist/index.d.ts

@@ -1,5 +1,48 @@
 import { SelkitController, SelkitConfig, SelkitOption, SelkitEmptyReason } from '@selkit/core';
 
+/**
+ * @selkit/dom — 預設輕量定位器（零依賴）
+ *
+ * 計算邏輯與 DOM 套用分離：computePosition 為純函式（可單元測）
+ * attachPositioner 負責讀取 rect、套 style、監聽 scroll/resize
+ */
+type Placement = 'bottom' | 'top';
+interface Rect {
+    top: number;
+    bottom: number;
+    left: number;
+    width: number;
+}
+interface PositionResult {
+    placement: Placement;
+    top: number;
+    left: number;
+    width: number;
+}
+/**
+ * 依觸發元件位置與下拉高度 決定放上方或下方（空間不足才翻轉）
+ * 並回傳套用座標 不做水平翻轉（select 下拉慣例對齊左緣、同寬）
+ */
+declare function computePosition(triggerRect: Rect, dropdownHeight: number, viewportHeight: number, gap?: number): PositionResult;
+interface Positioner {
+    update(): void;
+    destroy(): void;
+}
+/** 定位器工廠收到的選項 由 @selkit/dom 在開啟下拉時傳入 */
+interface PositionerOptions {
+    /** 下拉寬度貼齊內容（至少與控制項同寬）而非固定等寬 */
+    autoWidth?: boolean;
+    /** trigger 與下拉之間的間距 px 預設 4 */
+    gap?: number;
+}
+/**
+ * 定位器工廠 可插拔點：@selkit/dom 預設用內建 attachPositioner
+ * 傳入自訂工廠（如 @selkit/floating 的 createFloatingPositioner）即換成進階定位
+ */
+type PositionerFactory = (trigger: HTMLElement, dropdown: HTMLElement, opts?: PositionerOptions) => Positioner;
+/** 將 dropdown 定位到 trigger 旁 並隨 scroll/resize 更新  */
+declare function attachPositioner(trigger: HTMLElement, dropdown: HTMLElement, autoWidth?: boolean): Positioner;
+
 interface SelkitDomConfig<T = unknown> extends SelkitConfig<T> {
     /** class 前綴 預設 "selkit" */
     classPrefix?: string;
@@ -15,8 +58,12 @@ interface SelkitDomConfig<T = unknown> extends SelkitConfig<T> {
     virtualScroll?: boolean;
     /** 虛擬捲動的單列固定高度 px 預設 36 須與實際樣式高度一致 */
     itemHeight?: number;
+    /** 虛擬捲動下分組標題列的固定高度 px 預設 28 須與實際樣式高度一致 */
+    groupHeight?: number;
     /** 把下拉浮層掛到指定容器（元素或選擇器）逃離 overflow/transform 祖先的裁切 常用 document.body */
     dropdownParent?: HTMLElement | string;
+    /** 自訂定位器工廠 預設為內建零依賴定位器（垂直翻轉）傳入 @selkit/floating 的 createFloatingPositioner 即啟用 flip/shift/size 進階定位 */
+    positioner?: PositionerFactory;
     /** 自訂已選顯示內容（tag 或單值） 回傳字串走 textContent 防 XSS 需 markup（icon 等）請回傳 Node */
     templateSelection?: (option: SelkitOption<T>, meta: {
         index: number;
@@ -65,35 +112,4 @@ declare class SelkitDom<T> implements SelkitDomInstance<T> {
 /** 在指定元素或 selector 對應的元素內建立並掛載一個 Selkit 下拉 */
 declare function createSelkitDom<T = unknown>(host: HTMLElement | string, config?: SelkitDomConfig<T>): SelkitDomInstance<T>;
 
-/**
- * @selkit/dom — 預設輕量定位器（零依賴）
- *
- * 計算邏輯與 DOM 套用分離：computePosition 為純函式（可單元測）
- * attachPositioner 負責讀取 rect、套 style、監聽 scroll/resize
- */
-type Placement = 'bottom' | 'top';
-interface Rect {
-    top: number;
-    bottom: number;
-    left: number;
-    width: number;
-}
-interface PositionResult {
-    placement: Placement;
-    top: number;
-    left: number;
-    width: number;
-}
-/**
- * 依觸發元件位置與下拉高度 決定放上方或下方（空間不足才翻轉）
- * 並回傳套用座標 不做水平翻轉（select 下拉慣例對齊左緣、同寬）
- */
-declare function computePosition(triggerRect: Rect, dropdownHeight: number, viewportHeight: number, gap?: number): PositionResult;
-interface Positioner {
-    update(): void;
-    destroy(): void;
-}
-/** 將 dropdown 定位到 trigger 旁 並隨 scroll/resize 更新  */
-declare function attachPositioner(trigger: HTMLElement, dropdown: HTMLElement, autoWidth?: boolean): Positioner;
-
-export { type Placement, type PositionResult, type Positioner, type Rect, SelkitDom as Selkit, SelkitDom, type SelkitDomConfig, type SelkitDomInstance, attachPositioner, computePosition, createSelkitDom, createSelkitDom as sk };
+export { type Placement, type PositionResult, type Positioner, type PositionerFactory, type PositionerOptions, type Rect, SelkitDom as Selkit, SelkitDom, type SelkitDomConfig, type SelkitDomInstance, attachPositioner, computePosition, createSelkitDom, createSelkitDom as sk };

package/dist/index.js

@@ -1,7 +1,9 @@
 // src/dom.ts
 import {
   computeScrollIntoView,
+  computeScrollIntoViewVariable,
   computeVirtualRange,
+  computeVirtualWindow,
   createSelkit
 } from "@selkit/core";
 
@@ -45,7 +47,9 @@ 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;
@@ -125,7 +129,9 @@ var SelkitDom = class {
   #name;
   #virtual;
   #itemHeight;
+  #groupHeight;
   #dropdownParent;
+  #positionerFactory;
   #templateSelection;
   #templateOption;
   #templateArrow;
@@ -169,7 +175,9 @@ var SelkitDom = class {
     this.#name = cfg.name;
     this.#virtual = cfg.virtualScroll ?? false;
     this.#itemHeight = cfg.itemHeight ?? DEFAULT_ITEM_HEIGHT;
+    this.#groupHeight = cfg.groupHeight ?? DEFAULT_GROUP_HEIGHT;
     this.#dropdownParent = resolveParent(cfg.dropdownParent);
+    this.#positionerFactory = cfg.positioner ?? builtinPositioner;
     this.#templateSelection = cfg.templateSelection;
     this.#templateOption = cfg.templateOption;
     this.#templateArrow = cfg.templateArrow;
@@ -430,7 +438,8 @@ var SelkitDom = class {
     }
     if (s.activeIndex === this.#lastActive || s.activeIndex < 0) return;
     this.#lastActive = s.activeIndex;
-    const hasGroups = this.controller.getGroupedView().rows.some((r) => r.type === "group");
+    const rows = this.controller.getGroupedView().rows;
+    const hasGroups = rows.some((r) => r.type === "group");
     if (this.#virtual && !hasGroups) {
       const next = computeScrollIntoView({
         index: s.activeIndex,
@@ -444,6 +453,22 @@ var SelkitDom = class {
       }
       return;
     }
+    if (this.#virtual && hasGroups) {
+      const rowIndex = rows.findIndex(
+        (r) => r.type !== "group" && r.index === s.activeIndex
+      );
+      const next = computeScrollIntoViewVariable({
+        heights: this.#rowHeights(rows),
+        rowIndex,
+        scrollTop: this.#dropdown.scrollTop,
+        viewportHeight: this.#dropdown.clientHeight
+      });
+      if (next !== null) {
+        this.#dropdown.scrollTop = next;
+        this.#renderOptions(s);
+      }
+      return;
+    }
     const active = this.#dropdown.querySelector(
       `.${this.#cls("option", "active")}`
     );
@@ -561,40 +586,61 @@ var SelkitDom = class {
         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));
+      this.#renderVirtualSlice(view.rows, range, a11y, s.activeIndex);
       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"));
-        if (this.#templateGroup) {
-          this.#applyTemplate(
-            group,
-            this.#templateGroup({ label: row.label, disabled: !!row.disabled })
-          );
-        } else {
-          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));
+    if (this.#virtual && hasGroups) {
+      const win = computeVirtualWindow({
+        heights: this.#rowHeights(view.rows),
+        scrollTop: this.#dropdown.scrollTop,
+        viewportHeight: this.#dropdown.clientHeight
+      });
+      this.#renderVirtualSlice(view.rows, win, a11y, s.activeIndex);
+      return;
+    }
+    for (const row of view.rows) this.#renderRow(row, a11y, s.activeIndex);
+  }
+  /** 每列高度：分組標題用 groupHeight 其餘（option/create）用 itemHeight */
+  #rowHeights(rows) {
+    return rows.map(
+      (r) => r.type === "group" ? this.#groupHeight : this.#itemHeight
+    );
+  }
+  /** 渲染虛擬切片：上下佔位 + range 內各列 共用扁平與分組兩路徑 */
+  #renderVirtualSlice(rows, range, a11y, activeIndex) {
+    this.#dropdown.append(this.#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));
+  }
+  /** 依列型別渲染並掛入下拉 group / create / option */
+  #renderRow(row, a11y, activeIndex) {
+    if (row.type === "group") {
+      this.#dropdown.append(this.#buildGroupRow(row));
+      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 })
+      );
+    } else {
+      group.textContent = row.label;
+    }
+    return group;
   }
   /** 「建立新項」列 共用 option 樣式與 a11y 但點擊走 createTag */
   #buildCreateRow(row, a11y, activeIndex) {
@@ -672,11 +718,9 @@ var SelkitDom = class {
       this.#dropdown.hidden = false;
       if (this.#positioner) this.#positioner.update();
       else
-        this.#positioner = attachPositioner(
-          this.#control,
-          this.#dropdown,
-          this.#dropdownAutoWidth
-        );
+        this.#positioner = this.#positionerFactory(this.#control, this.#dropdown, {
+          autoWidth: this.#dropdownAutoWidth
+        });
     } else {
       this.#dropdown.hidden = true;
       this.#positioner?.destroy();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@selkit/dom",
-  "version": "0.3.0",
+  "version": "0.5.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.3.0"
+    "@selkit/core": "0.5.0"
   },
   "devDependencies": {
     "axe-core": "^4.12.1",