@icen.ai/ui 0.1.1 → 0.2.1

package/dist/index.mjs

@@ -1,7 +1,7 @@
 // package.json
 var package_default = {
   name: "@icen.ai/ui",
-  version: "0.1.1",
+  version: "0.2.1",
   description: "Icen Design System \u2014 \u8BBE\u8BA1 tokens\uFF086 \u9884\u8BBE \xD7 \u660E\u6697\uFF09\u3001\u65E0\u6846\u67B6\u7EC4\u4EF6 CSS \u4E0E\u884C\u4E3A JS",
   repository: {
     type: "git",
@@ -261,6 +261,1481 @@ function initCopy(root = document) {
   root.addEventListener("click", (ev) => onClick(root, ev));
 }
 
+// src/behaviors/input.ts
+function setupClear(wrap) {
+  const btn = wrap.querySelector(".input-clear");
+  const field = wrap.querySelector("input.input");
+  if (!btn || !field) return;
+  btn.addEventListener("click", () => {
+    field.value = "";
+    field.dispatchEvent(new Event("input", { bubbles: true }));
+    field.focus();
+  });
+}
+function setupPasswordToggle(wrap) {
+  const btn = wrap.querySelector(".input-pw-toggle");
+  const field = wrap.querySelector("input.input");
+  if (!btn || !field) return;
+  const iconShow = btn.querySelector('[data-icon="show"]');
+  const iconHide = btn.querySelector('[data-icon="hide"]');
+  btn.setAttribute("aria-label", "\u663E\u793A\u5BC6\u7801");
+  btn.addEventListener("click", () => {
+    const show2 = field.type === "password";
+    field.type = show2 ? "text" : "password";
+    if (iconShow) iconShow.hidden = show2;
+    if (iconHide) iconHide.hidden = !show2;
+    btn.setAttribute("aria-label", show2 ? "\u9690\u85CF\u5BC6\u7801" : "\u663E\u793A\u5BC6\u7801");
+  });
+}
+function resizeTextarea(ta) {
+  ta.style.height = "auto";
+  const cs = getComputedStyle(ta);
+  const lineHeight = parseFloat(cs.lineHeight) || 20;
+  const padY = (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0);
+  const minRows = Number(ta.getAttribute("data-min-rows") ?? "3") || 3;
+  const maxAttr = ta.getAttribute("data-max-rows");
+  const maxRows = maxAttr ? Number(maxAttr) || 0 : 0;
+  const minH = minRows * lineHeight + padY;
+  const maxH = maxRows > 0 ? maxRows * lineHeight + padY : Infinity;
+  ta.style.height = `${Math.max(minH, Math.min(ta.scrollHeight, maxH))}px`;
+}
+function setupAutosize(ta) {
+  const el = ta;
+  if (el.__icenInputInit) return;
+  el.__icenInputInit = true;
+  ta.addEventListener("input", () => resizeTextarea(ta));
+  resizeTextarea(ta);
+}
+function setupOtp(group) {
+  const el = group;
+  if (el.__icenInputInit) return;
+  el.__icenInputInit = true;
+  const cells = Array.from(group.querySelectorAll(".otp-cell"));
+  cells.forEach((cell, i) => {
+    cell.addEventListener("input", () => {
+      const ch = cell.value.slice(-1);
+      cell.value = ch;
+      if (ch && i < cells.length - 1) cells[i + 1].focus();
+    });
+    cell.addEventListener("keydown", (ev) => {
+      if (ev.key === "Backspace" && !cell.value && i > 0) cells[i - 1].focus();
+      if (ev.key === "ArrowLeft" && i > 0) {
+        ev.preventDefault();
+        cells[i - 1].focus();
+      }
+      if (ev.key === "ArrowRight" && i < cells.length - 1) {
+        ev.preventDefault();
+        cells[i + 1].focus();
+      }
+    });
+    cell.addEventListener("paste", (ev) => {
+      ev.preventDefault();
+      const text = (ev.clipboardData?.getData("text") ?? "").replace(/\s/g, "").slice(0, cells.length - i);
+      for (let k = 0; k < text.length; k++) {
+        const target = cells[i + k];
+        target.value = text[k] ?? "";
+      }
+      cells[Math.min(i + text.length, cells.length - 1)].focus();
+    });
+  });
+}
+function initInput(root = document) {
+  if (typeof document === "undefined") return;
+  const wraps = [];
+  if (root instanceof Element && root.matches(".input-wrap")) wraps.push(root);
+  wraps.push(...Array.from(root.querySelectorAll(".input-wrap")));
+  for (const w of wraps) {
+    const el = w;
+    if (el.__icenInputInit) continue;
+    el.__icenInputInit = true;
+    setupClear(w);
+    setupPasswordToggle(w);
+  }
+  const textareas = [];
+  if (root instanceof HTMLTextAreaElement && root.matches("[data-autosize]")) textareas.push(root);
+  textareas.push(...Array.from(root.querySelectorAll("textarea[data-autosize]")));
+  for (const ta of textareas) setupAutosize(ta);
+  const otps = [];
+  if (root instanceof Element && root.matches(".otp")) otps.push(root);
+  otps.push(...Array.from(root.querySelectorAll(".otp")));
+  for (const g of otps) setupOtp(g);
+}
+
+// src/behaviors/select.ts
+function setup2(container) {
+  const el = container;
+  if (el.__icenSelectInit) return;
+  el.__icenSelectInit = true;
+  const triggerEl = container.querySelector(".select-trigger");
+  const panelEl = container.querySelector(".select-panel");
+  const valueEl = container.querySelector(".select-value");
+  const hiddenInput = container.querySelector("input[data-select-value]");
+  if (!triggerEl || !panelEl) return;
+  const trigger = triggerEl;
+  const panel2 = panelEl;
+  const options = () => Array.from(panel2.querySelectorAll(".select-option"));
+  const isOpen = () => !panel2.hidden;
+  let focusIdx = -1;
+  function setFocus(idx) {
+    const opts = options();
+    focusIdx = Math.max(-1, Math.min(idx, opts.length - 1));
+    opts.forEach((o, i) => o.classList.toggle("is-focused", i === focusIdx));
+    const cur = focusIdx >= 0 ? opts[focusIdx] : void 0;
+    cur?.scrollIntoView({ block: "nearest" });
+  }
+  function firstEnabled() {
+    return options().findIndex((o) => !o.classList.contains("is-disabled"));
+  }
+  function moveFocus(delta) {
+    const opts = options();
+    if (opts.length === 0) return;
+    let n = focusIdx;
+    for (let guard = 0; guard < opts.length; guard++) {
+      n = (n + delta + opts.length) % opts.length;
+      const opt = opts[n];
+      if (opt && !opt.classList.contains("is-disabled")) break;
+    }
+    setFocus(n);
+  }
+  function openPanel() {
+    if (isOpen()) return;
+    panel2.hidden = false;
+    container.classList.add("is-open");
+    trigger.setAttribute("aria-expanded", "true");
+    const sel = options().findIndex((o) => o.classList.contains("is-selected"));
+    setFocus(sel >= 0 ? sel : firstEnabled());
+  }
+  function closePanel() {
+    if (!isOpen()) return;
+    panel2.hidden = true;
+    container.classList.remove("is-open");
+    trigger.setAttribute("aria-expanded", "false");
+    setFocus(-1);
+  }
+  function choose(opt) {
+    if (opt.classList.contains("is-disabled")) return;
+    options().forEach((o) => o.classList.toggle("is-selected", o === opt));
+    if (valueEl) {
+      valueEl.textContent = opt.textContent ?? "";
+      valueEl.classList.remove("is-empty");
+    }
+    const v = opt.getAttribute("data-value") ?? "";
+    container.setAttribute("data-value", v);
+    if (hiddenInput) {
+      hiddenInput.value = v;
+      hiddenInput.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+    closePanel();
+    trigger.focus();
+  }
+  trigger.addEventListener("click", () => isOpen() ? closePanel() : openPanel());
+  trigger.addEventListener("keydown", (ev) => {
+    if (!isOpen()) {
+      if (ev.key === "ArrowDown" || ev.key === "ArrowUp" || ev.key === "Enter" || ev.key === " ") {
+        ev.preventDefault();
+        openPanel();
+      }
+      return;
+    }
+    switch (ev.key) {
+      case "ArrowDown":
+        ev.preventDefault();
+        moveFocus(1);
+        break;
+      case "ArrowUp":
+        ev.preventDefault();
+        moveFocus(-1);
+        break;
+      case "Enter":
+      case " ": {
+        ev.preventDefault();
+        const opt = options()[focusIdx];
+        if (opt) choose(opt);
+        break;
+      }
+      case "Escape":
+        ev.preventDefault();
+        closePanel();
+        break;
+    }
+  });
+  panel2.addEventListener("click", (ev) => {
+    const t = ev.target;
+    if (!(t instanceof Element)) return;
+    const opt = t.closest(".select-option");
+    if (opt instanceof HTMLButtonElement && panel2.contains(opt)) choose(opt);
+  });
+  panel2.addEventListener("mouseover", (ev) => {
+    const t = ev.target;
+    if (!(t instanceof Element)) return;
+    const opt = t.closest(".select-option");
+    if (!opt) return;
+    const idx = options().indexOf(opt);
+    if (idx >= 0 && !opt.classList.contains("is-disabled")) setFocus(idx);
+  });
+  document.addEventListener("pointerdown", (ev) => {
+    if (isOpen() && ev.target instanceof Node && !container.contains(ev.target)) closePanel();
+  });
+  document.addEventListener("keydown", (ev) => {
+    if (ev.key === "Escape" && isOpen()) {
+      closePanel();
+      trigger.focus();
+    }
+  });
+}
+function initSelect(root = document) {
+  if (typeof document === "undefined") return;
+  const containers = [];
+  if (root instanceof Element && root.matches("[data-select]")) containers.push(root);
+  containers.push(...Array.from(root.querySelectorAll("[data-select]")));
+  for (const c of containers) setup2(c);
+}
+
+// src/behaviors/slider.ts
+function pct(input) {
+  const min = Number(input.min || "0");
+  const max = Number(input.max || "100");
+  const range = max - min;
+  if (range <= 0) return 0;
+  return (Number(input.value) - min) / range * 100;
+}
+function setupSingle(slider, native) {
+  const fill = slider.querySelector(".slider-fill");
+  const thumb = slider.querySelector(".slider-thumb");
+  const sync = () => {
+    const p = pct(native);
+    if (fill) fill.style.width = `${p}%`;
+    if (thumb) thumb.style.left = `calc(${p}% - 8px)`;
+  };
+  native.addEventListener("input", sync);
+  sync();
+}
+function setupDual(slider, natives) {
+  const lo = natives.find((n) => n.getAttribute("data-thumb") === "lo") ?? natives[0];
+  const hi = natives.find((n) => n.getAttribute("data-thumb") === "hi") ?? natives[1];
+  if (!lo || !hi || lo === hi) return;
+  const range = slider.querySelector(".slider-range");
+  const thumbLo = slider.querySelector(".slider-thumb--lo");
+  const thumbHi = slider.querySelector(".slider-thumb--hi");
+  const sync = (changed) => {
+    const step = Number(lo.step || "1") || 1;
+    let vLo = Number(lo.value);
+    let vHi = Number(hi.value);
+    if (changed === lo && vLo > vHi - step) {
+      vLo = vHi - step;
+      lo.value = String(vLo);
+    }
+    if (changed === hi && vHi < vLo + step) {
+      vHi = vLo + step;
+      hi.value = String(vHi);
+    }
+    const pLo = pct(lo);
+    const pHi = pct(hi);
+    if (range) {
+      range.style.left = `${pLo}%`;
+      range.style.right = `${100 - pHi}%`;
+    }
+    if (thumbLo) thumbLo.style.left = `calc(${pLo}% - 8px)`;
+    if (thumbHi) thumbHi.style.left = `calc(${pHi}% - 8px)`;
+    lo.style.clipPath = `inset(0 ${100 - pLo}% 0 0)`;
+    hi.style.clipPath = `inset(0 0 0 ${pHi}%)`;
+  };
+  lo.addEventListener("input", () => sync(lo));
+  hi.addEventListener("input", () => sync(hi));
+  sync(null);
+}
+function setup3(slider) {
+  const el = slider;
+  if (el.__icenSliderInit) return;
+  el.__icenSliderInit = true;
+  const natives = Array.from(slider.querySelectorAll(".slider-native"));
+  if (natives.length === 0) return;
+  if (slider.classList.contains("slider--dual")) setupDual(slider, natives);
+  else setupSingle(slider, natives[0]);
+}
+function initSlider(root = document) {
+  if (typeof document === "undefined") return;
+  const containers = [];
+  if (root instanceof Element && root.matches(".slider")) containers.push(root);
+  containers.push(...Array.from(root.querySelectorAll(".slider")));
+  for (const c of containers) setup3(c);
+}
+
+// src/behaviors/tag-input.ts
+function setup4(wrap) {
+  const el = wrap;
+  if (el.__icenTagInit) return;
+  el.__icenTagInit = true;
+  const fieldEl = wrap.querySelector(".tag-input-field");
+  if (!fieldEl) return;
+  const field = fieldEl;
+  const maxAttr = wrap.getAttribute("data-max");
+  const max = maxAttr ? Number(maxAttr) || Infinity : Infinity;
+  const placeholder = field.placeholder;
+  let tags = (wrap.getAttribute("data-tags") ?? "").split(",").map((s) => s.trim()).filter(Boolean);
+  function sync() {
+    wrap.setAttribute("data-tags", tags.join(","));
+    wrap.classList.toggle("is-max", tags.length >= max);
+    field.placeholder = tags.length === 0 ? placeholder : "";
+  }
+  function remove(index) {
+    tags.splice(index, 1);
+    render();
+  }
+  function chip(tag, index) {
+    const el2 = document.createElement("span");
+    el2.className = "tag-chip";
+    const label = document.createElement("span");
+    label.textContent = tag;
+    const x = document.createElement("button");
+    x.type = "button";
+    x.className = "tag-chip-x focus-ring";
+    x.textContent = "\xD7";
+    x.setAttribute("aria-label", `\u79FB\u9664 ${tag}`);
+    x.addEventListener("mousedown", (ev) => ev.preventDefault());
+    x.addEventListener("click", () => remove(index));
+    el2.append(label, x);
+    return el2;
+  }
+  function render() {
+    wrap.querySelectorAll(".tag-chip").forEach((c) => c.remove());
+    tags.forEach((t, i) => wrap.insertBefore(chip(t, i), field));
+    sync();
+  }
+  function commit() {
+    const v = field.value.trim();
+    if (!v) return;
+    if (tags.length >= max) return;
+    if (tags.includes(v)) {
+      field.value = "";
+      return;
+    }
+    tags.push(v);
+    field.value = "";
+    render();
+  }
+  field.addEventListener("keydown", (ev) => {
+    if (ev.key === "Enter" || ev.key === ",") {
+      ev.preventDefault();
+      commit();
+    } else if (ev.key === "Backspace" && !field.value && tags.length > 0) {
+      remove(tags.length - 1);
+    }
+  });
+  field.addEventListener("blur", commit);
+  render();
+}
+function initTagInput(root = document) {
+  if (typeof document === "undefined") return;
+  const containers = [];
+  if (root instanceof HTMLElement && root.matches(".tag-input[data-tags]")) containers.push(root);
+  containers.push(...Array.from(root.querySelectorAll(".tag-input[data-tags]")));
+  for (const c of containers) setup4(c);
+}
+
+// src/behaviors/upload.ts
+function setup5(zone) {
+  const el = zone;
+  if (el.__icenUploadInit) return;
+  el.__icenUploadInit = true;
+  const input = zone.querySelector('input[type="file"]');
+  if (!input) return;
+  const openPicker = () => input.click();
+  zone.addEventListener("click", (ev) => {
+    if (ev.target === input) return;
+    openPicker();
+  });
+  zone.addEventListener("keydown", (ev) => {
+    if (ev.key === "Enter" || ev.key === " ") {
+      ev.preventDefault();
+      openPicker();
+    }
+  });
+  zone.addEventListener("dragover", (ev) => {
+    ev.preventDefault();
+    zone.classList.add("is-drag");
+  });
+  zone.addEventListener("dragleave", () => zone.classList.remove("is-drag"));
+  zone.addEventListener("drop", (ev) => {
+    ev.preventDefault();
+    zone.classList.remove("is-drag");
+    const files = ev.dataTransfer?.files;
+    if (!files || files.length === 0) return;
+    let assigned = false;
+    try {
+      const dt = new DataTransfer();
+      for (const f of Array.from(files)) dt.items.add(f);
+      input.files = dt.files;
+      assigned = true;
+    } catch {
+      assigned = false;
+    }
+    if (assigned) {
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    } else {
+      const list = Array.from(files);
+      zone.dispatchEvent(new CustomEvent("icn:upload", { bubbles: true, detail: { files: list } }));
+    }
+  });
+}
+function initUpload(root = document) {
+  if (typeof document === "undefined") return;
+  const zones = [];
+  if (root instanceof HTMLElement && root.matches(".upload")) zones.push(root);
+  zones.push(...Array.from(root.querySelectorAll(".upload")));
+  for (const z of zones) setup5(z);
+}
+
+// src/behaviors/modal.ts
+var FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var openId = null;
+var restoreFocusTo = null;
+var prevBodyOverflow = "";
+var keyHandler = null;
+var initialized2 = false;
+function findBackdrop(id) {
+  return document.querySelector(`.modal-backdrop[data-modal="${CSS.escape(id)}"]`);
+}
+function portal(backdrop) {
+  if (backdrop.parentElement !== document.body) document.body.appendChild(backdrop);
+}
+function openModal(id) {
+  if (typeof document === "undefined") return;
+  if (openId === id) return;
+  if (openId) closeModal(openId);
+  const backdrop = findBackdrop(id);
+  if (!backdrop) return;
+  const panel2 = backdrop.querySelector(".modal");
+  if (!panel2) return;
+  portal(backdrop);
+  restoreFocusTo = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+  openId = id;
+  backdrop.hidden = false;
+  prevBodyOverflow = document.body.style.overflow;
+  document.body.style.overflow = "hidden";
+  panel2.setAttribute("role", "dialog");
+  panel2.setAttribute("aria-modal", "true");
+  if (!panel2.hasAttribute("tabindex")) panel2.tabIndex = -1;
+  const closeOnEscape = backdrop.dataset.closeOnEscape !== "false";
+  keyHandler = (e) => {
+    if (e.key === "Escape") {
+      if (closeOnEscape) {
+        e.preventDefault();
+        closeModal(id);
+      }
+      return;
+    }
+    if (e.key !== "Tab") return;
+    const els = panel2.querySelectorAll(FOCUSABLE);
+    if (els.length === 0) {
+      e.preventDefault();
+      panel2.focus();
+      return;
+    }
+    const first = els[0];
+    const last = els[els.length - 1];
+    if (e.shiftKey) {
+      if (document.activeElement === first || !panel2.contains(document.activeElement)) {
+        e.preventDefault();
+        last.focus();
+      }
+    } else if (document.activeElement === last || !panel2.contains(document.activeElement)) {
+      e.preventDefault();
+      first.focus();
+    }
+  };
+  window.addEventListener("keydown", keyHandler);
+  const focusable = panel2.querySelector(FOCUSABLE);
+  (focusable ?? panel2).focus();
+}
+function closeModal(id) {
+  if (typeof document === "undefined") return;
+  const backdrop = findBackdrop(id);
+  if (!backdrop) return;
+  backdrop.hidden = true;
+  if (openId !== id) return;
+  openId = null;
+  if (keyHandler) {
+    window.removeEventListener("keydown", keyHandler);
+    keyHandler = null;
+  }
+  document.body.style.overflow = prevBodyOverflow;
+  if (restoreFocusTo && restoreFocusTo.isConnected) restoreFocusTo.focus();
+  restoreFocusTo = null;
+}
+function initModal(root = document) {
+  if (typeof document === "undefined") return;
+  root.querySelectorAll("[data-modal-open]").forEach((el) => el.setAttribute("aria-haspopup", "dialog"));
+  if (initialized2) return;
+  initialized2 = true;
+  document.addEventListener("click", (e) => {
+    const target = e.target instanceof Element ? e.target : null;
+    if (!target) return;
+    const opener = target.closest("[data-modal-open]");
+    if (opener?.dataset.modalOpen) {
+      opener.setAttribute("aria-haspopup", "dialog");
+      openModal(opener.dataset.modalOpen);
+      return;
+    }
+    const closer = target.closest("[data-modal-close]");
+    if (closer) {
+      const backdrop = closer.closest("[data-modal]");
+      if (backdrop?.dataset.modal) closeModal(backdrop.dataset.modal);
+      return;
+    }
+    if (target instanceof HTMLElement && target.classList.contains("modal-backdrop") && target.dataset.modal && target.dataset.closeOnOverlay !== "false") {
+      closeModal(target.dataset.modal);
+    }
+  });
+}
+
+// src/behaviors/dropdown.ts
+var VIEWPORT_MARGIN = 12;
+var SIDE_OFFSET = 4;
+var active = null;
+var initialized3 = false;
+function clamp(value, min, max) {
+  if (max < min) return min;
+  return Math.min(max, Math.max(min, value));
+}
+function menuItems(panel2) {
+  return Array.from(panel2.querySelectorAll(".menu-item:not(.is-disabled):not(:disabled)"));
+}
+function setHighlight(next) {
+  if (!active) return;
+  active.items.forEach((el, i) => el.classList.toggle("is-highlighted", i === next));
+  active.highlight = next;
+}
+function place() {
+  if (!active) return;
+  const { trigger, panel: panel2 } = active;
+  const rect = trigger.getBoundingClientRect();
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const pw = panel2.offsetWidth;
+  const ph = panel2.offsetHeight;
+  const left = clamp(rect.left, VIEWPORT_MARGIN, vw - VIEWPORT_MARGIN - pw);
+  let top = rect.bottom + SIDE_OFFSET;
+  let side = "bottom";
+  if (top + ph > vh - VIEWPORT_MARGIN && rect.top - SIDE_OFFSET - ph >= VIEWPORT_MARGIN) {
+    top = rect.top - SIDE_OFFSET - ph;
+    side = "top";
+  }
+  top = clamp(top, VIEWPORT_MARGIN, vh - VIEWPORT_MARGIN - ph);
+  panel2.style.left = `${left}px`;
+  panel2.style.top = `${top}px`;
+  panel2.dataset.side = side;
+}
+function openDropdown(trigger, highlightFirst = false) {
+  closeDropdown();
+  const root = trigger.closest("[data-dropdown]");
+  const template = root?.querySelector("[data-dropdown-menu]");
+  if (!root || !template) return;
+  const panel2 = document.createElement("div");
+  panel2.className = "menu";
+  panel2.setAttribute("role", "menu");
+  panel2.style.visibility = "hidden";
+  while (template.firstChild) panel2.appendChild(template.firstChild);
+  panel2.querySelectorAll(".menu-item").forEach((el) => el.setAttribute("role", "menuitem"));
+  document.body.appendChild(panel2);
+  active = { trigger, template, panel: panel2, items: menuItems(panel2), highlight: -1 };
+  trigger.setAttribute("aria-expanded", "true");
+  place();
+  panel2.style.visibility = "";
+  if (highlightFirst && active.items.length > 0) setHighlight(0);
+  document.addEventListener("pointerdown", onOutsidePointerDown, true);
+  document.addEventListener("scroll", onScroll, true);
+  window.addEventListener("keydown", onKeyDown);
+}
+function closeDropdown(restoreFocus = false) {
+  if (!active) return;
+  const { trigger, template, panel: panel2 } = active;
+  active = null;
+  trigger.setAttribute("aria-expanded", "false");
+  while (panel2.firstChild) template.appendChild(panel2.firstChild);
+  panel2.remove();
+  document.removeEventListener("pointerdown", onOutsidePointerDown, true);
+  document.removeEventListener("scroll", onScroll, true);
+  window.removeEventListener("keydown", onKeyDown);
+  if (restoreFocus) trigger.focus();
+}
+function onOutsidePointerDown(e) {
+  if (!active) return;
+  const target = e.target;
+  if (!(target instanceof Node)) return;
+  if (active.panel.contains(target) || active.trigger.contains(target)) return;
+  closeDropdown();
+}
+function onScroll() {
+  closeDropdown();
+}
+function onKeyDown(e) {
+  if (!active) return;
+  const { items } = active;
+  if (e.key === "Escape") {
+    e.preventDefault();
+    closeDropdown(true);
+    return;
+  }
+  if (items.length === 0) return;
+  if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+    e.preventDefault();
+    const offset = e.key === "ArrowDown" ? 1 : -1;
+    const next = active.highlight < 0 ? offset > 0 ? 0 : items.length - 1 : (active.highlight + offset + items.length) % items.length;
+    setHighlight(next);
+    return;
+  }
+  if (e.key === "Enter" && active.highlight >= 0) {
+    e.preventDefault();
+    const item = items[active.highlight];
+    closeDropdown(true);
+    item.click();
+  }
+}
+function initDropdown(root = document) {
+  if (typeof document === "undefined") return;
+  root.querySelectorAll("[data-dropdown-trigger]").forEach((el) => el.setAttribute("aria-expanded", "false"));
+  if (initialized3) return;
+  initialized3 = true;
+  document.addEventListener("click", (e) => {
+    const target = e.target instanceof Element ? e.target : null;
+    if (!target) return;
+    if (active && target.closest(".menu-item") && active.panel.contains(target)) {
+      const item = target.closest(".menu-item");
+      if (item) {
+        closeDropdown();
+        return;
+      }
+    }
+    const trigger = target.closest("[data-dropdown-trigger]");
+    if (!trigger) return;
+    if (active && active.trigger === trigger) closeDropdown();
+    else openDropdown(trigger);
+  });
+  document.addEventListener("keydown", (e) => {
+    if (e.key !== "ArrowDown") return;
+    if (active) return;
+    const target = e.target instanceof Element ? e.target : null;
+    const trigger = target?.closest("[data-dropdown-trigger]");
+    if (!trigger) return;
+    e.preventDefault();
+    openDropdown(trigger, true);
+  });
+}
+
+// src/behaviors/context-menu.ts
+var LONG_PRESS_DELAY = 520;
+var LONG_PRESS_MOVE_LIMIT = 12;
+var FLIP_MARGIN = 10;
+var CLAMP_MARGIN = 8;
+var registry = /* @__PURE__ */ new Map();
+var fallbackItems = null;
+var initialized4 = false;
+var panel = null;
+var focusableItems = [];
+var focusedIndex = -1;
+var longPress = null;
+function registerContextMenu(id, items) {
+  registry.set(id, items);
+}
+function defaultItems() {
+  return [
+    {
+      label: "\u540E\u9000",
+      shortcut: "Alt \u2190",
+      disabled: window.history.length <= 1,
+      onClick: () => window.history.back()
+    },
+    { label: "\u524D\u8FDB", shortcut: "Alt \u2192", onClick: () => window.history.forward() },
+    { type: "separator" },
+    { label: "\u5237\u65B0", shortcut: "Ctrl R", onClick: () => window.location.reload() },
+    {
+      label: "\u590D\u5236\u9875\u9762\u94FE\u63A5",
+      onClick: () => {
+        void navigator.clipboard?.writeText(window.location.href);
+      }
+    }
+  ];
+}
+function resolveItems(target) {
+  const host = target?.closest("[data-context-menu]");
+  const id = host?.dataset.contextMenu;
+  if (id) {
+    const items = registry.get(id);
+    if (items) return items;
+  }
+  return fallbackItems ?? defaultItems();
+}
+function isEditable(target) {
+  return Boolean(target?.closest('input, textarea, [contenteditable="true"]'));
+}
+function buildItem(item) {
+  if ("type" in item && item.type === "separator") {
+    const sep = document.createElement("div");
+    sep.className = "menu-separator";
+    sep.setAttribute("role", "separator");
+    return sep;
+  }
+  if ("type" in item && item.type === "header") {
+    const header = document.createElement("div");
+    header.className = "menu-header";
+    const label2 = document.createElement("span");
+    label2.className = "menu-header-label";
+    label2.textContent = item.label;
+    header.appendChild(label2);
+    if (item.description) {
+      const desc = document.createElement("span");
+      desc.className = "menu-header-desc";
+      desc.textContent = item.description;
+      header.appendChild(desc);
+    }
+    return header;
+  }
+  const entry = item;
+  const btn = document.createElement("button");
+  btn.type = "button";
+  btn.className = entry.danger ? "menu-item pressable menu-item--danger" : "menu-item pressable";
+  if (entry.disabled) btn.disabled = true;
+  btn.setAttribute("role", "menuitem");
+  btn.tabIndex = -1;
+  const icon = document.createElement("span");
+  icon.className = "menu-item-icon";
+  if (entry.icon) icon.innerHTML = entry.icon;
+  btn.appendChild(icon);
+  const label = document.createElement("span");
+  label.className = "menu-item-label";
+  label.textContent = entry.label;
+  if (entry.subLabel) {
+    const sub = document.createElement("span");
+    sub.className = "menu-item-sub";
+    sub.textContent = entry.subLabel;
+    label.appendChild(sub);
+  }
+  btn.appendChild(label);
+  if (entry.shortcut) {
+    const shortcut = document.createElement("span");
+    shortcut.className = "menu-item-shortcut";
+    shortcut.textContent = entry.shortcut;
+    btn.appendChild(shortcut);
+  }
+  btn.addEventListener("click", () => {
+    entry.onClick?.();
+    closeMenu();
+  });
+  return btn;
+}
+function openContextMenu(x, y, items) {
+  if (typeof document === "undefined") return;
+  closeMenu();
+  panel = document.createElement("div");
+  panel.className = "menu menu--context";
+  panel.setAttribute("role", "menu");
+  panel.style.visibility = "hidden";
+  for (const item of items) panel.appendChild(buildItem(item));
+  document.body.appendChild(panel);
+  const rect = panel.getBoundingClientRect();
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  let nx = x;
+  let ny = y;
+  if (x + rect.width > vw - FLIP_MARGIN) nx = x - rect.width;
+  if (y + rect.height > vh - FLIP_MARGIN) ny = y - rect.height;
+  if (nx < CLAMP_MARGIN) nx = CLAMP_MARGIN;
+  if (ny < CLAMP_MARGIN) ny = CLAMP_MARGIN;
+  panel.style.left = `${nx}px`;
+  panel.style.top = `${ny}px`;
+  panel.style.visibility = "";
+  focusableItems = Array.from(panel.querySelectorAll(".menu-item:not(:disabled)"));
+  focusedIndex = -1;
+  requestAnimationFrame(() => {
+    if (!panel || focusableItems.length === 0) return;
+    setFocused(0);
+  });
+  document.addEventListener("pointerdown", onOutsidePointerDown2, true);
+  document.addEventListener("scroll", onCloseSignal, true);
+  window.addEventListener("resize", onCloseSignal);
+  window.addEventListener("keydown", onKeyDown2);
+}
+function closeMenu() {
+  if (!panel) return;
+  panel.remove();
+  panel = null;
+  focusableItems = [];
+  focusedIndex = -1;
+  document.removeEventListener("pointerdown", onOutsidePointerDown2, true);
+  document.removeEventListener("scroll", onCloseSignal, true);
+  window.removeEventListener("resize", onCloseSignal);
+  window.removeEventListener("keydown", onKeyDown2);
+}
+function setFocused(next) {
+  if (!panel || focusableItems.length === 0) return;
+  focusedIndex = (next % focusableItems.length + focusableItems.length) % focusableItems.length;
+  focusableItems[focusedIndex].focus();
+}
+function onOutsidePointerDown2(e) {
+  if (!panel) return;
+  const target = e.target;
+  if (!(target instanceof Node) || !panel.contains(target)) closeMenu();
+}
+function onCloseSignal() {
+  closeMenu();
+}
+function onKeyDown2(e) {
+  if (!panel) return;
+  if (e.key === "Escape") {
+    e.preventDefault();
+    closeMenu();
+    return;
+  }
+  if (focusableItems.length === 0) return;
+  if (e.key === "ArrowDown") {
+    e.preventDefault();
+    setFocused(focusedIndex + 1);
+  } else if (e.key === "ArrowUp") {
+    e.preventDefault();
+    setFocused(focusedIndex - 1);
+  } else if (e.key === "Enter" && focusedIndex >= 0) {
+    e.preventDefault();
+    focusableItems[focusedIndex].click();
+  }
+}
+function clearLongPress() {
+  if (!longPress) return;
+  window.clearTimeout(longPress.timer);
+  longPress = null;
+}
+function openForTarget(target, x, y) {
+  openContextMenu(x, y, resolveItems(target));
+}
+function initContextMenu(opts = {}) {
+  if (typeof document === "undefined") return;
+  if (opts.items) fallbackItems = opts.items;
+  if (initialized4) return;
+  initialized4 = true;
+  document.addEventListener("contextmenu", (e) => {
+    const target = e.target instanceof Element ? e.target : null;
+    if (isEditable(target)) return;
+    e.preventDefault();
+    openForTarget(target, e.clientX, e.clientY);
+  });
+  document.addEventListener("pointerdown", (e) => {
+    if (e.pointerType !== "touch") return;
+    const target = e.target instanceof Element ? e.target : null;
+    if (!target || isEditable(target)) return;
+    clearLongPress();
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const timer = window.setTimeout(() => {
+      longPress = null;
+      openForTarget(target, startX, startY);
+    }, LONG_PRESS_DELAY);
+    longPress = { timer, x: startX, y: startY, target };
+  });
+  document.addEventListener("pointermove", (e) => {
+    if (!longPress) return;
+    if (Math.hypot(e.clientX - longPress.x, e.clientY - longPress.y) > LONG_PRESS_MOVE_LIMIT) {
+      clearLongPress();
+    }
+  });
+  document.addEventListener("pointerup", clearLongPress);
+  document.addEventListener("pointercancel", clearLongPress);
+}
+
+// src/behaviors/popover.ts
+var DEFAULT_MIN_WIDTH = 220;
+var DEFAULT_MAX_WIDTH = 420;
+var DEFAULT_MIN_HEIGHT = 120;
+var DEFAULT_MAX_HEIGHT = 420;
+function clamp2(value, min, max) {
+  if (max < min) return min;
+  return Math.min(max, Math.max(min, value));
+}
+function chooseSide(preferredSide, availableTop, availableBottom, desiredHeight) {
+  const preferredSpace = preferredSide === "top" ? availableTop : availableBottom;
+  const oppositeSpace = preferredSide === "top" ? availableBottom : availableTop;
+  if (preferredSpace >= desiredHeight) return preferredSide;
+  if (oppositeSpace >= desiredHeight) return preferredSide === "top" ? "bottom" : "top";
+  if (preferredSpace >= oppositeSpace) return preferredSide;
+  return preferredSide === "top" ? "bottom" : "top";
+}
+function horizontalAnchor(anchor, width, align) {
+  if (align === "center") return anchor.left + anchor.width / 2 - width / 2;
+  if (align === "end") return anchor.right - width;
+  return anchor.left;
+}
+function computePopoverLayout(anchor, viewport, opts = {}) {
+  const margin = opts.margin ?? 12;
+  const offset = opts.offset ?? 8;
+  const availableWidth = Math.max(80, viewport.width - margin * 2);
+  const requestedMinWidth = Math.max(1, opts.minWidth ?? DEFAULT_MIN_WIDTH);
+  const requestedMaxWidth = Math.max(requestedMinWidth, opts.maxWidth ?? DEFAULT_MAX_WIDTH);
+  const maxWidth = Math.min(requestedMaxWidth, availableWidth);
+  const minWidth = Math.min(requestedMinWidth, maxWidth);
+  const preferredSide = opts.side ?? "top";
+  const align = opts.align ?? "start";
+  const availableTop = Math.max(0, anchor.top - margin - offset);
+  const availableBottom = Math.max(0, viewport.height - anchor.bottom - margin - offset);
+  const availableHeight = Math.max(80, viewport.height - margin * 2);
+  const minHeight = Math.min(Math.max(80, opts.minHeight ?? DEFAULT_MIN_HEIGHT), availableHeight);
+  const requestedMaxHeight = Math.max(minHeight, opts.maxHeight ?? DEFAULT_MAX_HEIGHT);
+  const fallbackHeight = Math.min(260, requestedMaxHeight);
+  const contentHeight = Math.max(opts.contentHeightHint ?? 0, fallbackHeight);
+  const desiredHeight = clamp2(contentHeight, minHeight, Math.min(requestedMaxHeight, availableHeight));
+  const side = chooseSide(preferredSide, availableTop, availableBottom, desiredHeight);
+  const sideSpace = side === "top" ? availableTop : availableBottom;
+  const maxHeight = Math.min(
+    requestedMaxHeight,
+    Math.max(80, sideSpace || Math.max(availableTop, availableBottom)),
+    availableHeight
+  );
+  const positionedHeight = clamp2(desiredHeight, 40, maxHeight);
+  const width = align === "stretch" ? clamp2(anchor.width, minWidth, maxWidth) : maxWidth;
+  const left = clamp2(horizontalAnchor(anchor, width, align), margin, viewport.width - margin - width);
+  const desiredTop = side === "top" ? anchor.top - offset - positionedHeight : anchor.bottom + offset;
+  const top = clamp2(desiredTop, margin, viewport.height - margin - positionedHeight);
+  return { side, left, top, width, maxHeight };
+}
+var openPanels = /* @__PURE__ */ new Map();
+function rectFromElement(el) {
+  const r = el.getBoundingClientRect();
+  return { left: r.left, top: r.top, right: r.right, bottom: r.bottom, width: r.width, height: r.height };
+}
+function resolveAnchor(state) {
+  if (state.anchor instanceof Element) {
+    if (!state.anchor.isConnected) return null;
+    return rectFromElement(state.anchor);
+  }
+  return state.anchor;
+}
+function relayout(state) {
+  const anchor = resolveAnchor(state);
+  if (!anchor) {
+    closePopover(state.panel);
+    return;
+  }
+  const layout = computePopoverLayout(
+    anchor,
+    { width: window.innerWidth, height: window.innerHeight },
+    state.opts
+  );
+  const { panel: panel2 } = state;
+  panel2.style.left = `${layout.left}px`;
+  panel2.style.top = `${layout.top}px`;
+  panel2.style.width = `${layout.width}px`;
+  panel2.style.maxHeight = `${layout.maxHeight}px`;
+  panel2.dataset.side = layout.side;
+  panel2.style.visibility = state.prevVisibility;
+}
+function onWindowChange() {
+  openPanels.forEach(relayout);
+}
+function onOutsidePointerDown3(e) {
+  const target = e.target;
+  if (!(target instanceof Node)) return;
+  openPanels.forEach((state) => {
+    if (state.panel.contains(target)) return;
+    if (state.anchor instanceof Element && state.anchor.contains(target)) return;
+    closePopover(state.panel);
+  });
+}
+function onKeyDown3(e) {
+  if (e.key !== "Escape") return;
+  const states = Array.from(openPanels.values());
+  const top = states[states.length - 1];
+  if (top) {
+    e.preventDefault();
+    closePopover(top.panel);
+  }
+}
+function openPopover(panel2, options) {
+  if (typeof document === "undefined") return;
+  if (openPanels.has(panel2)) closePopover(panel2);
+  const { anchor, onClose, ...layoutOpts } = options;
+  const placeholder = document.createComment("popover-anchor");
+  panel2.parentNode?.insertBefore(placeholder, panel2);
+  const wasHidden = panel2.hidden;
+  const prevVisibility = panel2.style.visibility;
+  const state = {
+    panel: panel2,
+    anchor,
+    opts: layoutOpts,
+    onClose,
+    placeholder,
+    wasHidden,
+    prevVisibility
+  };
+  openPanels.set(panel2, state);
+  document.body.appendChild(panel2);
+  panel2.hidden = false;
+  panel2.style.visibility = "hidden";
+  relayout(state);
+  if (openPanels.size === 1) {
+    window.addEventListener("resize", onWindowChange);
+    window.addEventListener("scroll", onWindowChange, true);
+    document.addEventListener("pointerdown", onOutsidePointerDown3, true);
+    window.addEventListener("keydown", onKeyDown3);
+  }
+}
+function closePopover(panel2) {
+  if (typeof document === "undefined") return;
+  const state = openPanels.get(panel2);
+  if (!state) return;
+  openPanels.delete(panel2);
+  panel2.style.visibility = state.prevVisibility;
+  panel2.hidden = state.wasHidden;
+  panel2.style.left = "";
+  panel2.style.top = "";
+  panel2.style.width = "";
+  panel2.style.maxHeight = "";
+  delete panel2.dataset.side;
+  if (state.placeholder.parentNode) {
+    state.placeholder.parentNode.insertBefore(panel2, state.placeholder);
+    state.placeholder.remove();
+  }
+  if (openPanels.size === 0) {
+    window.removeEventListener("resize", onWindowChange);
+    window.removeEventListener("scroll", onWindowChange, true);
+    document.removeEventListener("pointerdown", onOutsidePointerDown3, true);
+    window.removeEventListener("keydown", onKeyDown3);
+  }
+  state.onClose?.();
+}
+
+// src/behaviors/accordion.ts
+function setup6(container) {
+  const el = container;
+  if (el.__icenAccordionInit) return;
+  el.__icenAccordionInit = true;
+  const single = container.hasAttribute("data-single");
+  container.addEventListener("click", (ev) => {
+    const target = ev.target;
+    if (!(target instanceof Element)) return;
+    const trigger = target.closest(".accordion-trigger");
+    if (!trigger) return;
+    const item = trigger.closest(".accordion-item");
+    if (!item || trigger.closest(".accordion") !== container) return;
+    const open = item.classList.toggle("is-open");
+    trigger.setAttribute("aria-expanded", String(open));
+    if (single && open) {
+      container.querySelectorAll(".accordion-item.is-open").forEach((other) => {
+        if (other === item) return;
+        other.classList.remove("is-open");
+        other.querySelector(".accordion-trigger")?.setAttribute("aria-expanded", "false");
+      });
+    }
+  });
+}
+function initAccordion(root = document) {
+  if (typeof document === "undefined") return;
+  const containers = [];
+  if (root instanceof Element && root.matches(".accordion")) containers.push(root);
+  containers.push(...Array.from(root.querySelectorAll(".accordion")));
+  for (const c of containers) setup6(c);
+}
+
+// src/behaviors/tree.ts
+function setup7(tree) {
+  const el = tree;
+  if (el.__icenTreeInit) return;
+  el.__icenTreeInit = true;
+  tree.addEventListener("click", (ev) => {
+    const target = ev.target;
+    if (!(target instanceof Element)) return;
+    const node = target.closest(".tree-node");
+    if (!node || node.closest(".tree") !== tree) return;
+    if (node.classList.contains("is-disabled")) return;
+    const li = node.closest("li");
+    if (!li) return;
+    const childUl = li.querySelector(":scope > ul");
+    if (target.closest(".tree-toggle")) {
+      if (!childUl) return;
+      const toggle = node.querySelector(".tree-toggle");
+      const collapsed = childUl.hasAttribute("hidden");
+      if (collapsed) {
+        childUl.removeAttribute("hidden");
+        toggle?.classList.remove("is-collapsed");
+        toggle?.setAttribute("aria-expanded", "true");
+      } else {
+        childUl.setAttribute("hidden", "");
+        toggle?.classList.add("is-collapsed");
+        toggle?.setAttribute("aria-expanded", "false");
+      }
+      return;
+    }
+    if (childUl) return;
+    tree.querySelectorAll(".tree-node.is-selected").forEach((n) => n.classList.remove("is-selected"));
+    node.classList.add("is-selected");
+  });
+}
+function initTree(root = document) {
+  if (typeof document === "undefined") return;
+  const trees = [];
+  if (root instanceof Element && root.matches(".tree")) trees.push(root);
+  trees.push(...Array.from(root.querySelectorAll(".tree")));
+  for (const t of trees) setup7(t);
+}
+
+// src/behaviors/carousel.ts
+function setup8(carousel) {
+  const el = carousel;
+  if (el.__icenCarouselInit) return;
+  el.__icenCarouselInit = true;
+  const track = carousel.querySelector(":scope > .carousel-track");
+  if (!track) return;
+  const slides = Array.from(track.querySelectorAll(":scope > .carousel-slide"));
+  const count = slides.length;
+  if (count === 0) return;
+  const prev = carousel.querySelector(".carousel-arrow--prev");
+  const next = carousel.querySelector(".carousel-arrow--next");
+  const dotsBox = carousel.querySelector(".carousel-dots");
+  let index = 0;
+  const dots = [];
+  if (dotsBox && count > 1) {
+    for (let i = 0; i < count; i++) {
+      const dot = document.createElement("button");
+      dot.type = "button";
+      dot.className = "carousel-dot";
+      dot.setAttribute("aria-label", `\u7B2C ${i + 1} \u5F20`);
+      dot.addEventListener("click", () => go(i));
+      dotsBox.appendChild(dot);
+      dots.push(dot);
+    }
+  }
+  function render() {
+    if (!track) return;
+    track.style.transform = `translateX(${-index * 100}%)`;
+    slides.forEach((s, i) => s.setAttribute("aria-hidden", String(i !== index)));
+    dots.forEach((d, i) => d.classList.toggle("active", i === index));
+  }
+  function go(i) {
+    index = (i % count + count) % count;
+    render();
+  }
+  prev?.addEventListener("click", () => go(index - 1));
+  next?.addEventListener("click", () => go(index + 1));
+  render();
+}
+function initCarousel(root = document) {
+  if (typeof document === "undefined") return;
+  const containers = [];
+  if (root instanceof Element && root.matches(".carousel")) containers.push(root);
+  containers.push(...Array.from(root.querySelectorAll(".carousel")));
+  for (const c of containers) setup8(c);
+}
+
+// src/behaviors/charts.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+function toneVar(tone = "accent") {
+  switch (tone) {
+    case "success":
+      return "var(--token-success)";
+    case "warning":
+      return "var(--token-warning)";
+    case "error":
+      return "var(--token-error)";
+    case "muted":
+      return "var(--token-text-faint)";
+    case "accent":
+    default:
+      return "var(--token-accent)";
+  }
+}
+function fmt(opts, value) {
+  return opts.formatValue ? opts.formatValue(value) : String(value);
+}
+function svgEl(tag, attrs) {
+  const el = document.createElementNS(SVG_NS, tag);
+  for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v);
+  return el;
+}
+function renderEmpty(el, label) {
+  const box = document.createElement("div");
+  box.className = "chart-empty";
+  box.textContent = label ?? "\u6682\u65E0\u6570\u636E";
+  el.appendChild(box);
+}
+function legendItem(label, valueText, tone) {
+  const row = document.createElement("div");
+  row.className = "chart-legend-item";
+  const dot = document.createElement("span");
+  dot.className = "chart-legend-dot";
+  if (tone) dot.style.setProperty("--chart-tone", toneVar(tone));
+  const name = document.createElement("span");
+  name.className = "chart-legend-label";
+  name.textContent = label;
+  const val = document.createElement("span");
+  val.className = "chart-legend-value";
+  val.textContent = valueText;
+  row.append(dot, name, val);
+  return row;
+}
+function labelsRow(labels) {
+  const row = document.createElement("div");
+  row.className = "chart-labels";
+  for (const label of labels) {
+    const span = document.createElement("span");
+    span.textContent = label;
+    row.appendChild(span);
+  }
+  return row;
+}
+function renderVBar(el, opts) {
+  if (typeof document === "undefined") return;
+  el.textContent = "";
+  const n = Math.min(opts.labels.length, opts.values.length);
+  if (n === 0) {
+    renderEmpty(el, opts.emptyLabel);
+    return;
+  }
+  const labels = opts.labels.slice(0, n);
+  const values = opts.values.slice(0, n);
+  const max = Math.max(...values, 1);
+  const wrap = document.createElement("div");
+  wrap.className = "chart-vbar";
+  if (opts.tone) wrap.style.setProperty("--chart-tone", toneVar(opts.tone));
+  values.forEach((value, i) => {
+    const track = document.createElement("div");
+    track.className = "chart-vbar-track";
+    const bar = document.createElement("div");
+    bar.className = "chart-vbar-bar";
+    bar.style.height = `${Math.max(6, value / max * 100)}%`;
+    bar.setAttribute("title", `${labels[i]}: ${fmt(opts, value)}`);
+    track.appendChild(bar);
+    wrap.appendChild(track);
+  });
+  el.append(wrap, labelsRow(labels));
+}
+function renderHBar(el, opts) {
+  if (typeof document === "undefined") return;
+  el.textContent = "";
+  const n = Math.min(opts.labels.length, opts.values.length);
+  if (n === 0) {
+    renderEmpty(el, opts.emptyLabel);
+    return;
+  }
+  const labels = opts.labels.slice(0, n);
+  const values = opts.values.slice(0, n);
+  const max = Math.max(...values, 1);
+  const wrap = document.createElement("div");
+  wrap.className = "chart-hbar";
+  if (opts.tone) wrap.style.setProperty("--chart-tone", toneVar(opts.tone));
+  values.forEach((value, i) => {
+    const row = document.createElement("div");
+    row.className = "chart-hbar-row";
+    const label = document.createElement("span");
+    label.className = "chart-hbar-label";
+    label.textContent = labels[i] ?? "";
+    const track = document.createElement("div");
+    track.className = "chart-hbar-track";
+    const bar = document.createElement("div");
+    bar.className = "chart-hbar-bar";
+    bar.style.width = `${Math.max(2, value / max * 100)}%`;
+    const val = document.createElement("span");
+    val.className = "chart-hbar-value";
+    val.textContent = fmt(opts, value);
+    track.appendChild(bar);
+    row.append(label, track, val);
+    wrap.appendChild(row);
+  });
+  el.appendChild(wrap);
+}
+function renderStack(el, opts) {
+  if (typeof document === "undefined") return;
+  el.textContent = "";
+  const total = opts.segments.reduce((sum, s) => sum + s.value, 0);
+  if (opts.segments.length === 0 || total <= 0) {
+    renderEmpty(el, opts.emptyLabel);
+    return;
+  }
+  const bar = document.createElement("div");
+  bar.className = "chart-stack";
+  for (const seg of opts.segments) {
+    const s = document.createElement("div");
+    s.className = "chart-stack-seg";
+    s.style.width = `${seg.value / total * 100}%`;
+    if (seg.tone) s.style.setProperty("--chart-tone", toneVar(seg.tone));
+    s.setAttribute("title", `${seg.label}: ${fmt(opts, seg.value)}`);
+    bar.appendChild(s);
+  }
+  const legend = document.createElement("div");
+  legend.className = "chart-legend";
+  for (const seg of opts.segments) {
+    legend.appendChild(legendItem(seg.label, fmt(opts, seg.value), seg.tone));
+  }
+  el.append(bar, legend);
+}
+function renderDonut(el, opts) {
+  if (typeof document === "undefined") return;
+  el.textContent = "";
+  const total = opts.segments.reduce((sum, s) => sum + s.value, 0);
+  if (opts.segments.length === 0 || total <= 0) {
+    renderEmpty(el, opts.emptyLabel);
+    return;
+  }
+  const radius = 42;
+  const circumference = 2 * Math.PI * radius;
+  const wrap = document.createElement("div");
+  wrap.className = "chart-donut";
+  const svg = svgEl("svg", { viewBox: "0 0 120 120", role: "img" });
+  svg.style.transform = "rotate(-90deg)";
+  svg.appendChild(svgEl("circle", {
+    cx: "60",
+    cy: "60",
+    r: String(radius),
+    fill: "none",
+    stroke: "var(--token-line-soft)",
+    "stroke-width": "14"
+  }));
+  let offset = 0;
+  for (const seg of opts.segments) {
+    const dash = seg.value / total * circumference;
+    svg.appendChild(svgEl("circle", {
+      cx: "60",
+      cy: "60",
+      r: String(radius),
+      fill: "none",
+      stroke: toneVar(seg.tone),
+      "stroke-width": "14",
+      "stroke-dasharray": `${dash} ${circumference - dash}`,
+      "stroke-dashoffset": String(-offset),
+      "stroke-linecap": "butt"
+    }));
+    offset += dash;
+  }
+  const legend = document.createElement("div");
+  legend.className = "chart-legend";
+  for (const seg of opts.segments) {
+    legend.appendChild(legendItem(seg.label, `${Math.round(seg.value / total * 100)}%`, seg.tone));
+  }
+  wrap.append(svg, legend);
+  el.appendChild(wrap);
+}
+var lineGradientSeq = 0;
+function renderLine(el, opts) {
+  if (typeof document === "undefined") return;
+  el.textContent = "";
+  const n = Math.min(opts.labels.length, opts.values.length);
+  if (n === 0) {
+    renderEmpty(el, opts.emptyLabel);
+    return;
+  }
+  const labels = opts.labels.slice(0, n);
+  const values = opts.values.slice(0, n);
+  const width = 360;
+  const height = 150;
+  const pad = 14;
+  const max = Math.max(...values, 1);
+  const tone = toneVar(opts.tone);
+  const points = values.map((value, i) => ({
+    x: values.length <= 1 ? width / 2 : pad + i / (values.length - 1) * (width - pad * 2),
+    y: height - pad - value / max * (height - pad * 2),
+    value,
+    label: labels[i] ?? ""
+  }));
+  const line = points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(" ");
+  const last = points[points.length - 1];
+  const first = points[0];
+  const area = `${line} L${last.x.toFixed(1)},${height - pad} L${first.x.toFixed(1)},${height - pad} Z`;
+  const gradientId = `icen-chart-line-${++lineGradientSeq}`;
+  const wrap = document.createElement("div");
+  wrap.className = "chart-line";
+  const svg = svgEl("svg", { viewBox: `0 0 ${width} ${height}`, role: "img" });
+  const defs = svgEl("defs", {});
+  const gradient = svgEl("linearGradient", { id: gradientId, x1: "0", x2: "0", y1: "0", y2: "1" });
+  gradient.appendChild(svgEl("stop", { offset: "0%", "stop-color": tone, "stop-opacity": "0.32" }));
+  gradient.appendChild(svgEl("stop", { offset: "100%", "stop-color": tone, "stop-opacity": "0.02" }));
+  defs.appendChild(gradient);
+  svg.appendChild(defs);
+  for (let i = 0; i < 4; i++) {
+    const y = pad + i * (height - pad * 2) / 3;
+    svg.appendChild(svgEl("line", {
+      x1: String(pad),
+      x2: String(width - pad),
+      y1: String(y),
+      y2: String(y),
+      stroke: "var(--token-line-soft)",
+      "stroke-width": "1"
+    }));
+  }
+  svg.appendChild(svgEl("path", { d: area, fill: `url(#${gradientId})` }));
+  svg.appendChild(svgEl("path", {
+    d: line,
+    fill: "none",
+    stroke: tone,
+    "stroke-width": "2.5",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }));
+  for (const p of points) {
+    const dot = svgEl("circle", {
+      cx: p.x.toFixed(1),
+      cy: p.y.toFixed(1),
+      r: "3",
+      fill: "var(--token-card)",
+      stroke: tone,
+      "stroke-width": "2"
+    });
+    const title = svgEl("title", {});
+    title.textContent = `${p.label}: ${fmt(opts, p.value)}`;
+    dot.appendChild(title);
+    svg.appendChild(dot);
+  }
+  wrap.append(svg, labelsRow(labels.slice(-7)));
+  el.appendChild(wrap);
+}
+
+// src/behaviors/nav.ts
+function setup9(nav) {
+  const el = nav;
+  if (el.__icenNavInit) return;
+  el.__icenNavInit = true;
+  let ticking = false;
+  const update = () => {
+    ticking = false;
+    el.classList.toggle("is-scrolled", window.scrollY > 12);
+  };
+  const onScroll2 = () => {
+    if (ticking) return;
+    ticking = true;
+    window.requestAnimationFrame(update);
+  };
+  window.addEventListener("scroll", onScroll2, { passive: true });
+  update();
+}
+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) setup9(n);
+}
+
+// src/behaviors/sidebar.ts
+function setup10(sidebar) {
+  const el = sidebar;
+  if (el.__icenSidebarInit) return;
+  el.__icenSidebarInit = true;
+  el.addEventListener("click", (ev) => {
+    const target = ev.target;
+    if (!(target instanceof Element)) return;
+    const title = target.closest(".sidebar-group-title");
+    if (!(title instanceof HTMLElement)) return;
+    if (title.closest(".sidebar") !== el) return;
+    const group = title.closest(".sidebar-group");
+    if (!group) return;
+    const open = group.classList.toggle("is-open");
+    title.setAttribute("aria-expanded", String(open));
+  });
+}
+function initSidebar(root = document) {
+  if (typeof document === "undefined") return;
+  const sidebars = [];
+  if (root instanceof Element && root.matches(".sidebar")) sidebars.push(root);
+  sidebars.push(...Array.from(root.querySelectorAll(".sidebar")));
+  for (const s of sidebars) setup10(s);
+}
+
 // src/index.ts
 var VERSION = package_default.version;
 export {
@@ -269,11 +1744,37 @@ export {
   STYLES,
   VERSION,
   applyTheme,
+  closeMenu,
+  closeModal,
+  closePopover,
+  computePopoverLayout,
   getDefaultTheme,
   getTheme,
+  initAccordion,
+  initCarousel,
+  initContextMenu,
   initCopy,
+  initDropdown,
+  initInput,
+  initModal,
+  initNav,
+  initSelect,
+  initSidebar,
+  initSlider,
   initTabs,
+  initTagInput,
   initTheme,
+  initTree,
+  initUpload,
+  openContextMenu,
+  openModal,
+  openPopover,
+  registerContextMenu,
+  renderDonut,
+  renderHBar,
+  renderLine,
+  renderStack,
+  renderVBar,
   setTheme,
   toast,
   toggleDark