@icen.ai/ui 0.4.0 → 0.8.0

package/dist/behaviors/date-picker.mjs

@@ -0,0 +1,296 @@
+// src/behaviors/date-picker.ts
+var openPicker = null;
+var panelEl = null;
+var outsideHandler = null;
+var escHandler = null;
+var repositionHandler = null;
+function pad(n) {
+  return n < 10 ? "0" + n : String(n);
+}
+function toDateStr(d) {
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+function parseDateStr(s) {
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s.trim());
+  if (!m) return null;
+  const d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+  return Number.isNaN(d.getTime()) ? null : d;
+}
+function format(d, fmt) {
+  if (!d) return "";
+  return fmt.replace(/yyyy/g, String(d.getFullYear())).replace(/yy/g, String(d.getFullYear()).slice(-2)).replace(/mm/g, pad(d.getMonth() + 1)).replace(/m/g, String(d.getMonth() + 1)).replace(/dd/g, pad(d.getDate())).replace(/d/g, String(d.getDate()));
+}
+function ensurePanel() {
+  if (panelEl && panelEl.isConnected) return panelEl;
+  const el = document.createElement("div");
+  el.className = "date-picker-panel";
+  el.setAttribute("role", "dialog");
+  el.setAttribute("aria-label", "\u9009\u62E9\u65E5\u671F");
+  el.hidden = true;
+  document.body.appendChild(el);
+  panelEl = el;
+  return el;
+}
+function positionPanel(panel, trigger) {
+  const r = trigger.getBoundingClientRect();
+  const pw = 280;
+  const ph = panel.offsetHeight || 320;
+  let left = r.left;
+  let top = r.bottom + 4;
+  if (left + pw > window.innerWidth - 12) left = window.innerWidth - pw - 12;
+  if (left < 12) left = 12;
+  if (top + ph > window.innerHeight - 12) top = r.top - ph - 4;
+  if (top < 12) top = 12;
+  panel.style.left = left + "px";
+  panel.style.top = top + "px";
+}
+var SVG_NS = "http://www.w3.org/2000/svg";
+function buildCalIcon() {
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("fill", "none");
+  svg.setAttribute("stroke", "currentColor");
+  svg.setAttribute("stroke-width", "2");
+  svg.setAttribute("stroke-linecap", "round");
+  svg.setAttribute("stroke-linejoin", "round");
+  const rect = document.createElementNS(SVG_NS, "rect");
+  rect.setAttribute("x", "3");
+  rect.setAttribute("y", "4");
+  rect.setAttribute("width", "18");
+  rect.setAttribute("height", "18");
+  rect.setAttribute("rx", "2");
+  rect.setAttribute("ry", "2");
+  svg.appendChild(rect);
+  const lines = [
+    ["16", "16", "2", "6"],
+    ["8", "8", "2", "6"],
+    ["3", "21", "10", "10"]
+  ];
+  for (const [x1, x2, y1, y2] of lines) {
+    const line = document.createElementNS(SVG_NS, "line");
+    line.setAttribute("x1", x1);
+    line.setAttribute("x2", x2);
+    line.setAttribute("y1", y1);
+    line.setAttribute("y2", y2);
+    svg.appendChild(line);
+  }
+  return svg;
+}
+var WEEK_LABELS_ZH = ["\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D", "\u65E5"];
+var WEEK_LABELS_SUN = ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"];
+function renderCalendar(panel, ctx) {
+  const { view, selected, min, max, weekStart, onPick } = ctx;
+  const year = view.getFullYear();
+  const month = view.getMonth();
+  const labels = weekStart === 0 ? WEEK_LABELS_SUN : WEEK_LABELS_ZH;
+  const firstDay = new Date(year, month, 1);
+  const offsetRaw = firstDay.getDay();
+  const leadDays = weekStart === 0 ? offsetRaw : (offsetRaw + 6) % 7;
+  const gridStart = new Date(year, month, 1 - leadDays);
+  const today = /* @__PURE__ */ new Date();
+  today.setHours(0, 0, 0, 0);
+  const cells = [];
+  for (let i = 0; i < 42; i++) {
+    cells.push(new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + i));
+  }
+  panel.textContent = "";
+  const head = document.createElement("div");
+  head.className = "date-picker-head";
+  const prevBtn = document.createElement("button");
+  prevBtn.type = "button";
+  prevBtn.className = "date-picker-nav";
+  prevBtn.setAttribute("aria-label", "\u4E0A\u4E00\u6708");
+  prevBtn.textContent = "\u2039";
+  const title = document.createElement("span");
+  title.className = "date-picker-title";
+  title.textContent = `${year} \u5E74 ${month + 1} \u6708`;
+  const nextBtn = document.createElement("button");
+  nextBtn.type = "button";
+  nextBtn.className = "date-picker-nav";
+  nextBtn.setAttribute("aria-label", "\u4E0B\u4E00\u6708");
+  nextBtn.textContent = "\u203A";
+  head.append(prevBtn, title, nextBtn);
+  const weekdays = document.createElement("div");
+  weekdays.className = "date-picker-weekdays";
+  for (const label of labels) {
+    const s = document.createElement("span");
+    s.textContent = label;
+    weekdays.appendChild(s);
+  }
+  const grid = document.createElement("div");
+  grid.className = "date-picker-grid";
+  for (const d of cells) {
+    const isOutside = d.getMonth() !== month;
+    const isToday = d.getTime() === today.getTime();
+    const isSelected = selected !== null && toDateStr(d) === toDateStr(selected);
+    const disabled = min !== null && d < min || max !== null && d > max;
+    const classes = ["date-picker-cell"];
+    if (isOutside) classes.push("is-outside");
+    if (isToday) classes.push("is-today");
+    if (isSelected) classes.push("is-selected");
+    if (disabled) classes.push("is-disabled");
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = classes.join(" ");
+    btn.textContent = String(d.getDate());
+    if (disabled) btn.disabled = true;
+    btn.addEventListener("click", () => onPick(d));
+    grid.appendChild(btn);
+  }
+  const foot = document.createElement("div");
+  foot.className = "date-picker-foot";
+  const todayBtn = document.createElement("button");
+  todayBtn.type = "button";
+  todayBtn.className = "date-picker-today";
+  todayBtn.textContent = "\u4ECA\u5929";
+  const clearBtn = document.createElement("button");
+  clearBtn.type = "button";
+  clearBtn.className = "date-picker-clear";
+  clearBtn.textContent = "\u6E05\u9664";
+  foot.append(todayBtn, clearBtn);
+  panel.append(head, weekdays, grid, foot);
+  prevBtn.addEventListener("click", () => {
+    ctx.view = new Date(year, month - 1, 15);
+    renderCalendar(panel, { ...ctx, view: ctx.view });
+  });
+  nextBtn.addEventListener("click", () => {
+    ctx.view = new Date(year, month + 1, 15);
+    renderCalendar(panel, { ...ctx, view: ctx.view });
+  });
+  todayBtn.addEventListener("click", () => {
+    onPick(new Date(today.getFullYear(), today.getMonth(), today.getDate()));
+  });
+  clearBtn.addEventListener("click", () => {
+    onPick(null);
+  });
+}
+function closePanel() {
+  if (!panelEl) return;
+  panelEl.hidden = true;
+  openPicker?.querySelector(".date-picker-trigger")?.classList.remove("is-open");
+  openPicker = null;
+  if (outsideHandler) {
+    document.removeEventListener("mousedown", outsideHandler);
+    outsideHandler = null;
+  }
+  if (escHandler) {
+    window.removeEventListener("keydown", escHandler);
+    escHandler = null;
+  }
+  if (repositionHandler) {
+    window.removeEventListener("scroll", repositionHandler);
+    window.removeEventListener("resize", repositionHandler);
+    repositionHandler = null;
+  }
+}
+function setupPicker(container) {
+  const el = container;
+  if (el.__icenDatePickerInit) return;
+  el.__icenDatePickerInit = true;
+  const fmt = el.dataset.datePickerFormat ?? "yyyy-mm-dd";
+  const minStr = el.dataset.datePickerMin;
+  const maxStr = el.dataset.datePickerMax;
+  const weekStart = Number(el.dataset.datePickerWeekStart ?? "1");
+  const placeholder = el.dataset.datePickerPlaceholder ?? "\u9009\u62E9\u65E5\u671F";
+  const min = minStr ? parseDateStr(minStr) : null;
+  const max = maxStr ? parseDateStr(maxStr) : null;
+  const hidden = el.querySelector('input[type="hidden"]');
+  const initialStr = hidden?.value ?? "";
+  const initialDate = initialStr ? parseDateStr(initialStr) : null;
+  let trigger = el.querySelector(".date-picker-trigger");
+  if (!trigger) {
+    trigger = document.createElement("button");
+    trigger.type = "button";
+    trigger.className = "date-picker-trigger";
+    const value = document.createElement("span");
+    value.className = initialDate ? "date-picker-value" : "date-picker-value is-empty";
+    const icon = document.createElement("span");
+    icon.className = "date-picker-icon";
+    icon.appendChild(buildCalIcon());
+    trigger.append(value, icon);
+    el.prepend(trigger);
+  }
+  trigger.setAttribute("aria-haspopup", "dialog");
+  const valueEl = trigger.querySelector(".date-picker-value");
+  function paint() {
+    const v = hidden?.value ?? "";
+    const d = v ? parseDateStr(v) : null;
+    if (valueEl) {
+      valueEl.textContent = d ? format(d, fmt) : placeholder;
+      valueEl.classList.toggle("is-empty", !d);
+    }
+  }
+  paint();
+  if (hidden) {
+    const obs = new MutationObserver(() => paint());
+    obs.observe(hidden, { attributes: true, attributeFilter: ["value"] });
+  }
+  trigger.addEventListener("click", () => {
+    if (openPicker === el) {
+      closePanel();
+      return;
+    }
+    closePanel();
+    openPicker = el;
+    trigger.classList.add("is-open");
+    const panel = ensurePanel();
+    panel.hidden = false;
+    const selected = hidden?.value ? parseDateStr(hidden.value) : null;
+    const view = selected ? new Date(selected.getTime()) : /* @__PURE__ */ new Date();
+    view.setDate(15);
+    positionPanel(panel, trigger);
+    renderCalendar(panel, {
+      view,
+      selected,
+      min,
+      max,
+      weekStart,
+      onPick: (d) => {
+        if (d === null) {
+          if (hidden) {
+            hidden.value = "";
+            hidden.dispatchEvent(new Event("change", { bubbles: true }));
+          }
+        } else {
+          if (hidden) {
+            hidden.value = toDateStr(d);
+            hidden.dispatchEvent(new Event("change", { bubbles: true }));
+          }
+        }
+        paint();
+        closePanel();
+      }
+    });
+    outsideHandler = (ev) => {
+      const t = ev.target instanceof Node ? ev.target : null;
+      if (!t) return;
+      if (panel.contains(t) || el.contains(t)) return;
+      closePanel();
+    };
+    document.addEventListener("mousedown", outsideHandler);
+    escHandler = (ev) => {
+      if (ev.key === "Escape") {
+        ev.preventDefault();
+        closePanel();
+      }
+    };
+    window.addEventListener("keydown", escHandler);
+    repositionHandler = () => {
+      if (openPicker === el && !panel.hidden) positionPanel(panel, trigger);
+    };
+    window.addEventListener("scroll", repositionHandler, { passive: true });
+    window.addEventListener("resize", repositionHandler, { passive: true });
+  });
+}
+function initDatePicker(root) {
+  if (typeof document === "undefined") return;
+  if (typeof window === "undefined") return;
+  const scope = root ?? document;
+  const pickers = [];
+  if (scope instanceof Element && scope.matches(".date-picker[data-date-picker]")) pickers.push(scope);
+  pickers.push(...Array.from(scope.querySelectorAll(".date-picker[data-date-picker]")));
+  for (const p of pickers) setupPicker(p);
+}
+export {
+  initDatePicker
+};

package/dist/behaviors/dropdown.d.mts

@@ -0,0 +1,4 @@
+/** 绑定全部 [data-dropdown-trigger]（document 级委托，重复调用安全）。 */
+declare function initDropdown(root?: ParentNode): void;
+
+export { initDropdown };

package/dist/behaviors/dropdown.mjs

@@ -75,7 +75,10 @@ function onOutsidePointerDown(e) {
   if (active.panel.contains(target) || active.trigger.contains(target)) return;
   closeDropdown();
 }
-function onScroll() {
+function onScroll(e) {
+  if (!active) return;
+  const target = e.target;
+  if (target instanceof Node && active.panel.contains(target)) return;
   closeDropdown();
 }
 function onKeyDown(e) {
@@ -101,9 +104,10 @@ function onKeyDown(e) {
     item.click();
   }
 }
-function initDropdown(root = document) {
+function initDropdown(root) {
   if (typeof document === "undefined") return;
-  root.querySelectorAll("[data-dropdown-trigger]").forEach((el) => el.setAttribute("aria-expanded", "false"));
+  const scope = root ?? document;
+  scope.querySelectorAll("[data-dropdown-trigger]").forEach((el) => el.setAttribute("aria-expanded", "false"));
   if (initialized) return;
   initialized = true;
   document.addEventListener("click", (e) => {

package/dist/behaviors/input.d.mts

@@ -0,0 +1,4 @@
+/** 为 root 下所有输入类结构初始化（root 自身匹配也算）。幂等。 */
+declare function initInput(root?: ParentNode): void;
+
+export { initInput };

package/dist/behaviors/input.mjs

@@ -1,7 +1,16 @@
 // src/behaviors/input.ts
+var isComposing = false;
+if (typeof document !== "undefined") {
+  document.addEventListener("compositionstart", () => {
+    isComposing = true;
+  });
+  document.addEventListener("compositionend", () => {
+    isComposing = false;
+  });
+}
 function setupClear(wrap) {
   const btn = wrap.querySelector(".input-clear");
-  const field = wrap.querySelector("input.input");
+  const field = wrap.querySelector("input.input, textarea.textarea");
   if (!btn || !field) return;
   btn.addEventListener("click", () => {
     field.value = "";
@@ -43,6 +52,145 @@ function setupAutosize(ta) {
   ta.addEventListener("input", () => resizeTextarea(ta));
   resizeTextarea(ta);
 }
+function setupCounter(field) {
+  const el = field;
+  if (el.__icenCounterInit) return;
+  const maxAttr = field.getAttribute("maxlength");
+  const dataCount = field.getAttribute("data-count");
+  if (!maxAttr && dataCount === null) return;
+  el.__icenCounterInit = true;
+  const max = maxAttr ? Number(maxAttr) : 0;
+  let counter = null;
+  const wrap = field.closest(".input-wrap, .textarea-wrap");
+  if (wrap) {
+    counter = wrap.querySelector(".input-counter");
+    if (!counter) {
+      counter = document.createElement("span");
+      counter.className = "input-counter";
+      wrap.appendChild(counter);
+      if (wrap.classList.contains("input-wrap")) {
+        wrap.classList.add("input-wrap--has-counter");
+      }
+    }
+  }
+  const counterEl = counter;
+  if (!counterEl) return;
+  function update() {
+    const len = field.value.length;
+    counterEl.textContent = max > 0 ? `${len} / ${max}` : `${len}`;
+    counterEl.classList.remove("is-warn", "is-error");
+    if (max > 0) {
+      const ratio = len / max;
+      if (ratio >= 1) counterEl.classList.add("is-error");
+      else if (ratio >= 0.8) counterEl.classList.add("is-warn");
+    }
+  }
+  field.addEventListener("input", () => {
+    if (!isComposing) update();
+  });
+  update();
+}
+function setupMask(field) {
+  const el = field;
+  if (el.__icenMaskInit) return;
+  const mask = field.getAttribute("data-mask");
+  if (!mask) return;
+  el.__icenMaskInit = true;
+  const maskChars = [];
+  for (const ch of mask) maskChars.push(ch);
+  function isInputSlot(ch) {
+    return ch === "#" || ch === "A" || ch === "*";
+  }
+  function validate(rawChar, slotType) {
+    if (slotType === "#") return /[0-9]/.test(rawChar);
+    if (slotType === "A") return /[a-zA-Z]/.test(rawChar);
+    return true;
+  }
+  function applyMask(input) {
+    let result = "";
+    let rawIdx = 0;
+    const rawChars = input.split("");
+    for (let i = 0; i < maskChars.length && rawIdx < rawChars.length; i++) {
+      const slot = maskChars[i];
+      if (isInputSlot(slot)) {
+        while (rawIdx < rawChars.length && !validate(rawChars[rawIdx], slot)) {
+          rawIdx++;
+        }
+        if (rawIdx < rawChars.length) {
+          result += rawChars[rawIdx];
+          rawIdx++;
+        }
+      } else {
+        result += slot;
+      }
+    }
+    return result;
+  }
+  function extractRaw(formatted) {
+    let raw = "";
+    for (let i = 0; i < formatted.length && i < maskChars.length; i++) {
+      if (isInputSlot(maskChars[i])) raw += formatted[i];
+    }
+    return raw;
+  }
+  let lastFormatted = applyMask(field.value);
+  field.value = lastFormatted;
+  field.setAttribute("data-raw-value", extractRaw(lastFormatted));
+  field.addEventListener("input", () => {
+    if (isComposing) return;
+    const cursorPos = field.selectionStart ?? 0;
+    const oldRaw = extractRaw(lastFormatted);
+    const newFull = field.value;
+    const newRaw = extractRaw(newFull);
+    const formatted = applyMask(newRaw);
+    field.value = formatted;
+    field.setAttribute("data-raw-value", extractRaw(formatted));
+    lastFormatted = formatted;
+    const rawDelta = newRaw.length - oldRaw.length;
+    let targetCursor = cursorPos;
+    if (rawDelta > 0) {
+      let count = 0;
+      for (let i = 0; i < formatted.length; i++) {
+        if (isInputSlot(maskChars[i])) {
+          count++;
+          if (count >= newRaw.length) {
+            targetCursor = i + 1;
+            break;
+          }
+        }
+      }
+    } else if (rawDelta < 0) {
+      targetCursor = Math.min(cursorPos, formatted.length);
+    }
+    field.setSelectionRange(targetCursor, targetCursor);
+  });
+  field.addEventListener("keydown", (ev) => {
+    if (isComposing) return;
+    if (ev.ctrlKey || ev.metaKey || ev.altKey) return;
+    if (["Backspace", "Delete", "Tab", "Escape", "ArrowLeft", "ArrowRight", "Home", "End", "Enter"].includes(ev.key)) return;
+    const currentRaw = extractRaw(field.value);
+    const nextSlot = maskChars.find((ch, i) => {
+      const filledSlots = maskChars.slice(0, i).filter(isInputSlot).length;
+      return isInputSlot(ch) && filledSlots >= currentRaw.length;
+    });
+    if (nextSlot && !validate(ev.key, nextSlot)) {
+      ev.preventDefault();
+    }
+  });
+}
+function setupTrim(field) {
+  if (!field.hasAttribute("data-trim")) return;
+  const el = field;
+  if (el.__icenTrimInit) return;
+  el.__icenTrimInit = true;
+  field.addEventListener("blur", () => {
+    const trimmed = field.value.trim();
+    if (trimmed !== field.value) {
+      field.value = trimmed;
+      field.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+  });
+}
 function setupOtp(group) {
   const el = group;
   if (el.__icenInputInit) return;
@@ -57,6 +205,7 @@ function setupOtp(group) {
     }
     syncFilled(cell);
     cell.addEventListener("input", () => {
+      if (isComposing) return;
       const ch = cell.value.slice(-1);
       cell.value = ch;
       syncFilled(cell);
@@ -90,16 +239,18 @@ function setupOtp(group) {
   const fireComplete = () => {
     const code = cells.map((c) => c.value).join("");
     if (code.length === cells.length && cells.every((c) => c.value.length > 0)) {
+      group.dispatchEvent(new CustomEvent("icen:otp-complete", { detail: { code }, bubbles: true }));
       group.dispatchEvent(new CustomEvent("otp:complete", { detail: { code }, bubbles: true }));
     }
   };
   cells.forEach((cell) => cell.addEventListener("input", fireComplete));
 }
-function initInput(root = document) {
+function initInput(root) {
   if (typeof document === "undefined") return;
+  const scope = root ?? document;
   const wraps = [];
-  if (root instanceof Element && root.matches(".input-wrap")) wraps.push(root);
-  wraps.push(...Array.from(root.querySelectorAll(".input-wrap")));
+  if (scope instanceof Element && scope.matches(".input-wrap")) wraps.push(scope);
+  wraps.push(...Array.from(scope.querySelectorAll(".input-wrap")));
   for (const w of wraps) {
     const el = w;
     if (el.__icenInputInit) continue;
@@ -108,12 +259,37 @@ function initInput(root = document) {
     setupPasswordToggle(w);
   }
   const textareas = [];
-  if (root instanceof HTMLTextAreaElement && root.matches("[data-autosize]")) textareas.push(root);
-  textareas.push(...Array.from(root.querySelectorAll("textarea[data-autosize]")));
+  if (scope instanceof HTMLTextAreaElement && scope.matches("[data-autosize]")) textareas.push(scope);
+  textareas.push(...Array.from(scope.querySelectorAll("textarea[data-autosize]")));
   for (const ta of textareas) setupAutosize(ta);
+  const countedFields = [];
+  if (scope instanceof Element) {
+    const fields = Array.from(scope.querySelectorAll(
+      "input[maxlength], input[data-count], textarea[maxlength], textarea[data-count]"
+    ));
+    countedFields.push(...fields);
+    if (scope instanceof HTMLInputElement || scope instanceof HTMLTextAreaElement) {
+      if (scope.hasAttribute("maxlength") || scope.hasAttribute("data-count")) countedFields.push(scope);
+    }
+  }
+  for (const f of countedFields) setupCounter(f);
+  const maskedInputs = [];
+  if (scope instanceof Element) {
+    maskedInputs.push(...Array.from(scope.querySelectorAll("input[data-mask]")));
+    if (scope instanceof HTMLInputElement && scope.hasAttribute("data-mask")) maskedInputs.push(scope);
+  }
+  for (const inp of maskedInputs) setupMask(inp);
+  const trimFields = [];
+  if (scope instanceof Element) {
+    trimFields.push(...Array.from(scope.querySelectorAll("[data-trim]")));
+    if ((scope instanceof HTMLInputElement || scope instanceof HTMLTextAreaElement) && scope.hasAttribute("data-trim")) {
+      trimFields.push(scope);
+    }
+  }
+  for (const f of trimFields) setupTrim(f);
   const otps = [];
-  if (root instanceof Element && root.matches(".otp")) otps.push(root);
-  otps.push(...Array.from(root.querySelectorAll(".otp")));
+  if (scope instanceof Element && scope.matches(".otp")) otps.push(scope);
+  otps.push(...Array.from(scope.querySelectorAll(".otp")));
   for (const g of otps) setupOtp(g);
 }
 export {

package/dist/behaviors/modal.d.mts

@@ -0,0 +1,11 @@
+/** 打开指定 id 的 modal；已有其他 modal 打开时先关闭它。 */
+declare function openModal(id: string): void;
+/** 关闭指定 id 的 modal（backdrop 已被外部移除时也照常复位状态/监听/滚动锁）。 */
+declare function closeModal(id: string): void;
+/**
+ * 绑定触发器/关闭钮/backdrop 点击（document 级事件委托，重复调用安全）。
+ * root 用于扫描 [data-modal-open] 补 aria-haspopup=dialog。
+ */
+declare function initModal(root?: ParentNode): void;
+
+export { closeModal, initModal, openModal };

package/dist/behaviors/modal.mjs

@@ -16,7 +16,10 @@ function openModal(id) {
   if (openId === id) return;
   if (openId) closeModal(openId);
   const backdrop = findBackdrop(id);
-  if (!backdrop) return;
+  if (!backdrop) {
+    console.warn(`[@icen.ai/ui] modal: \u672A\u627E\u5230 data-modal="${id}" \u7684 .modal-backdrop\uFF0C\u5DF2\u8DF3\u8FC7\u6253\u5F00`);
+    return;
+  }
   const panel = backdrop.querySelector(".modal");
   if (!panel) return;
   portal(backdrop);
@@ -52,7 +55,9 @@ function openModal(id) {
       return;
     }
     if (e.key !== "Tab") return;
-    const els = panel.querySelectorAll(FOCUSABLE);
+    const els = Array.from(panel.querySelectorAll(FOCUSABLE)).filter(
+      (el) => !el.hidden && el.offsetParent !== null
+    );
     if (els.length === 0) {
       e.preventDefault();
       panel.focus();
@@ -77,8 +82,7 @@ function openModal(id) {
 function closeModal(id) {
   if (typeof document === "undefined") return;
   const backdrop = findBackdrop(id);
-  if (!backdrop) return;
-  backdrop.hidden = true;
+  if (backdrop) backdrop.hidden = true;
   if (openId !== id) return;
   openId = null;
   if (keyHandler) {
@@ -89,9 +93,10 @@ function closeModal(id) {
   if (restoreFocusTo && restoreFocusTo.isConnected) restoreFocusTo.focus();
   restoreFocusTo = null;
 }
-function initModal(root = document) {
+function initModal(root) {
   if (typeof document === "undefined") return;
-  root.querySelectorAll("[data-modal-open]").forEach((el) => el.setAttribute("aria-haspopup", "dialog"));
+  const scope = root ?? document;
+  scope.querySelectorAll("[data-modal-open]").forEach((el) => el.setAttribute("aria-haspopup", "dialog"));
   if (initialized) return;
   initialized = true;
   document.addEventListener("click", (e) => {

package/dist/behaviors/nav.d.mts

@@ -0,0 +1,7 @@
+/**
+ * 为 root 下每个 .nav[data-scroll-reactive] 初始化（root 自身匹配也算）。
+ * 返回销毁函数：移除本次初始化挂上的全部 window scroll/resize 监听。
+ */
+declare function initNav(root?: ParentNode): () => void;
+
+export { initNav };

package/dist/behaviors/nav.mjs

@@ -5,9 +5,11 @@ function prefersReducedMotion() {
 }
 function setup(nav) {
   const el = nav;
-  if (el.__icenNavInit) return;
+  if (el.__icenNavInit) return void 0;
   el.__icenNavInit = true;
-  const threshold = Number(nav.dataset.navThreshold ?? "12") || 12;
+  const rawThreshold = nav.dataset.navThreshold;
+  const parsedThreshold = rawThreshold === void 0 || rawThreshold === "" ? NaN : Number(rawThreshold);
+  const threshold = Number.isFinite(parsedThreshold) ? parsedThreshold : 12;
   const hideOnScroll = nav.hasAttribute("data-nav-hide-on-scroll");
   let ticking = false;
   let lastY = window.scrollY;
@@ -42,14 +44,28 @@ function setup(nav) {
   window.addEventListener("scroll", onScroll, { passive: true });
   window.addEventListener("resize", onResize, { passive: true });
   apply();
+  return () => {
+    window.removeEventListener("scroll", onScroll);
+    window.removeEventListener("resize", onResize);
+    el.__icenNavInit = false;
+  };
 }
-function initNav(root = document) {
-  if (typeof document === "undefined") return;
-  if (typeof window === "undefined") return;
-  const navs = [];
-  if (root instanceof Element && root.matches(".nav[data-scroll-reactive]")) navs.push(root);
-  navs.push(...Array.from(root.querySelectorAll(".nav[data-scroll-reactive]")));
-  for (const n of navs) setup(n);
+function initNav(root) {
+  const cleanups = [];
+  if (typeof document !== "undefined" && typeof window !== "undefined") {
+    const scope = root ?? document;
+    const navs = [];
+    if (scope instanceof Element && scope.matches(".nav[data-scroll-reactive]")) navs.push(scope);
+    navs.push(...Array.from(scope.querySelectorAll(".nav[data-scroll-reactive]")));
+    for (const n of navs) {
+      const cleanup = setup(n);
+      if (cleanup) cleanups.push(cleanup);
+    }
+  }
+  return () => {
+    for (const fn of cleanups) fn();
+    cleanups.length = 0;
+  };
 }
 export {
   initNav