@icen.ai/ui 0.2.0 → 0.3.0

package/dist/index.mjs

@@ -1,7 +1,7 @@
 // package.json
 var package_default = {
   name: "@icen.ai/ui",
-  version: "0.2.0",
+  version: "0.3.0",
   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",
@@ -12,13 +12,21 @@ var package_default = {
   exports: {
     ".": "./dist/index.mjs",
     "./behaviors/*": "./dist/behaviors/*.mjs",
+    "./kit/*": "./dist/components/*.mjs",
     "./tokens.css": "./dist/tokens.css",
     "./ui.css": "./dist/ui.css",
     "./base.css": "./dist/base.css",
+    "./retro-effects.css": "./dist/retro-effects.css",
     "./tokens/*": "./dist/tokens/*",
     "./components/*": "./dist/components/*",
     "./registry.json": "./dist/registry.json"
   },
+  bin: {
+    "icen-ui": "./dist/cli.mjs"
+  },
+  sideEffects: [
+    "**/*.css"
+  ],
   files: [
     "dist"
   ],
@@ -104,64 +112,188 @@ function toggleDark() {
 function initTheme() {
   const t = getTheme();
   applyTheme(t);
+  if (isBrowser() && typeof window.matchMedia === "function" && !hasPersistedPreference()) {
+    let lastDark = t.dark;
+    try {
+      const mql = window.matchMedia("(prefers-color-scheme: dark)");
+      const onChange = (ev) => {
+        if (hasPersistedPreference()) return;
+        if (ev.matches === lastDark) return;
+        lastDark = ev.matches;
+        applyTheme({ ...getTheme(), dark: ev.matches });
+      };
+      if (typeof mql.addEventListener === "function") {
+        mql.addEventListener("change", onChange);
+      } else {
+        mql.addListener(onChange);
+      }
+    } catch {
+    }
+  }
   return t;
 }
+function hasPersistedPreference() {
+  if (!isBrowser()) return false;
+  try {
+    return window.localStorage.getItem(STORAGE_KEY) !== null;
+  } catch {
+    return false;
+  }
+}
 
 // src/behaviors/toast.ts
+var DEFAULT_MS = 2600;
+var ACTION_MS = 6e3;
+var maxStack = 5;
+function isBrowser2() {
+  return typeof document !== "undefined";
+}
 function ensureContainer() {
   const existing = document.body.querySelector(".toast-container");
   if (existing) return existing;
   const el = document.createElement("div");
   el.className = "toast-container";
+  el.setAttribute("role", "status");
+  el.setAttribute("aria-live", "polite");
+  el.setAttribute("aria-atomic", "false");
   document.body.appendChild(el);
   return el;
 }
-function show(message, kind = "info", ms = 2600) {
-  if (typeof document === "undefined") return;
+function trimStack(container) {
+  for (; ; ) {
+    const items = Array.from(container.querySelectorAll(":scope > .toast"));
+    if (items.length <= maxStack) return;
+    const oldest = items[0];
+    if (!oldest) return;
+    oldest.classList.add("leaving");
+    let done = false;
+    const finish = () => {
+      if (done) return;
+      done = true;
+      oldest.remove();
+    };
+    oldest.addEventListener("transitionend", finish, { once: true });
+    window.setTimeout(finish, 400);
+  }
+}
+function show(message, kind = "info", opts = {}) {
+  if (!isBrowser2()) return;
+  const { ms, actionLabel, onAction } = opts;
+  const container = ensureContainer();
   const el = document.createElement("div");
   el.className = kind === "info" ? "toast" : `toast ${kind}`;
-  el.textContent = message;
-  ensureContainer().appendChild(el);
+  el.setAttribute("role", kind === "err" ? "alert" : "status");
+  const msgNode = document.createElement("span");
+  msgNode.className = "toast-msg";
+  msgNode.textContent = message;
+  el.appendChild(msgNode);
+  let actionBtn = null;
+  if (actionLabel) {
+    actionBtn = document.createElement("button");
+    actionBtn.type = "button";
+    actionBtn.className = "toast-action";
+    actionBtn.textContent = actionLabel;
+    el.appendChild(actionBtn);
+  }
+  container.appendChild(el);
+  trimStack(container);
   let removed = false;
   const remove = () => {
     if (removed) return;
     removed = true;
-    el.remove();
-  };
-  window.setTimeout(() => {
     el.classList.add("leaving");
-    el.addEventListener("transitionend", remove, { once: true });
-    window.setTimeout(remove, 400);
-  }, ms);
-}
-var toast = Object.assign(show, {
-  ok: (message, ms) => show(message, "ok", ms),
-  err: (message, ms) => show(message, "err", ms),
-  warn: (message, ms) => show(message, "warn", ms)
-});
+    let done = false;
+    const finish = () => {
+      if (done) return;
+      done = true;
+      el.remove();
+    };
+    el.addEventListener("transitionend", finish, { once: true });
+    window.setTimeout(finish, 400);
+  };
+  const duration = ms ?? (actionLabel ? ACTION_MS : DEFAULT_MS);
+  const timer = window.setTimeout(remove, duration);
+  if (actionBtn && onAction) {
+    actionBtn.addEventListener("click", () => {
+      window.clearTimeout(timer);
+      const ret = onAction();
+      if (ret === false) return;
+      remove();
+    });
+  }
+}
+var toast = Object.assign(
+  (message, kind = "info", ms) => show(message, kind, { ms }),
+  {
+    ok: (message, ms) => show(message, "ok", { ms }),
+    err: (message, ms) => show(message, "err", { ms }),
+    warn: (message, ms) => show(message, "warn", { ms }),
+    info: (message, ms) => show(message, "info", { ms }),
+    action: (message, actionLabel, onAction, ms) => show(message, "info", { actionLabel, onAction, ms }),
+    dismiss: () => {
+      if (!isBrowser2()) return;
+      const c = document.body.querySelector(".toast-container");
+      if (!c) return;
+      c.querySelectorAll(".toast").forEach((t) => t.remove());
+    },
+    config: (opts) => {
+      if (typeof opts.maxStack === "number" && opts.maxStack > 0) maxStack = opts.maxStack;
+    }
+  }
+);
 
 // src/behaviors/tabs.ts
+function tabButtons(container) {
+  return Array.from(container.querySelectorAll("[data-tab]"));
+}
 function tabNames(container) {
-  return Array.from(container.querySelectorAll("[data-tab]")).map((t) => t.getAttribute("data-tab")).filter((n) => n !== null);
+  return tabButtons(container).map((t) => t.getAttribute("data-tab")).filter((n) => n !== null);
 }
 function currentHash() {
   return window.location.hash.replace(/^#/, "");
 }
 function activate(container, name, writeHash) {
+  const buttons = tabButtons(container);
   let matched = false;
-  container.querySelectorAll("[data-tab]").forEach((t) => {
+  buttons.forEach((t) => {
     const on = t.getAttribute("data-tab") === name;
     if (on) matched = true;
     t.classList.toggle("active", on);
+    t.setAttribute("aria-selected", String(on));
+    t.tabIndex = on ? 0 : -1;
   });
   if (!matched) return;
   container.querySelectorAll("[data-tab-panel]").forEach((p) => {
-    p.hidden = p.getAttribute("data-tab-panel") !== name;
+    const isOn = p.getAttribute("data-tab-panel") === name;
+    p.hidden = !isOn;
+    if (isOn && !p.getAttribute("aria-labelledby")) {
+      const btn = buttons.find((b) => b.getAttribute("data-tab") === name);
+      if (btn?.id) p.setAttribute("aria-labelledby", btn.id);
+    }
   });
   if (writeHash && typeof window !== "undefined") {
     window.history.replaceState(null, "", `#${name}`);
   }
 }
+function isDisabled(btn) {
+  return btn.hasAttribute("disabled") || btn.getAttribute("aria-disabled") === "true" || btn.classList.contains("is-disabled");
+}
+function focusTab(container, idx) {
+  const buttons = tabButtons(container);
+  const target = buttons[idx];
+  if (!target || isDisabled(target)) return;
+  target.focus();
+}
+function nextEnabled(container, from, dir) {
+  const buttons = tabButtons(container);
+  if (buttons.length === 0) return -1;
+  let idx = from;
+  for (let i = 0; i < buttons.length; i++) {
+    idx = (idx + dir + buttons.length) % buttons.length;
+    if (!isDisabled(buttons[idx])) return idx;
+  }
+  return -1;
+}
 function setup(container) {
   const el = container;
   if (el.__icenTabsInit) return;
@@ -169,14 +301,69 @@ function setup(container) {
   const useHash = container.hasAttribute("data-tabs-hash");
   const names = tabNames(container);
   if (names.length === 0) return;
-  container.addEventListener("click", (ev) => {
+  const buttons = tabButtons(container);
+  buttons.forEach((b) => {
+    if (!b.getAttribute("role")) b.setAttribute("role", "tab");
+    if (!b.hasAttribute("aria-selected")) b.setAttribute("aria-selected", "false");
+  });
+  const tablist = buttons[0]?.parentElement;
+  if (tablist && !tablist.getAttribute("role")) tablist.setAttribute("role", "tablist");
+  const onClick2 = (ev) => {
     const target = ev.target;
     if (!(target instanceof Element)) return;
     const btn = target.closest("[data-tab]");
     if (!btn || btn.closest("[data-tabs]") !== container) return;
+    if (btn instanceof HTMLElement && isDisabled(btn)) return;
     const name = btn.getAttribute("data-tab");
     if (name) activate(container, name, useHash);
-  });
+  };
+  const onKeyDown4 = (ev) => {
+    const kev = ev;
+    const target = kev.target;
+    if (!(target instanceof Element)) return;
+    const btn = target.closest("[data-tab]");
+    if (!btn || btn.closest("[data-tabs]") !== container) return;
+    const buttonsList = tabButtons(container);
+    const currentIdx = buttonsList.indexOf(btn);
+    if (currentIdx === -1) return;
+    switch (kev.key) {
+      case "ArrowRight":
+      case "ArrowDown": {
+        kev.preventDefault();
+        const next = nextEnabled(container, currentIdx, 1);
+        if (next >= 0) focusTab(container, next);
+        break;
+      }
+      case "ArrowLeft":
+      case "ArrowUp": {
+        kev.preventDefault();
+        const prev = nextEnabled(container, currentIdx, -1);
+        if (prev >= 0) focusTab(container, prev);
+        break;
+      }
+      case "Home": {
+        kev.preventDefault();
+        focusTab(container, 0);
+        break;
+      }
+      case "End": {
+        kev.preventDefault();
+        focusTab(container, buttonsList.length - 1);
+        break;
+      }
+      case "Enter":
+      case " ": {
+        if (btn instanceof HTMLElement && !isDisabled(btn)) {
+          kev.preventDefault();
+          const name = btn.getAttribute("data-tab");
+          if (name) activate(container, name, useHash);
+        }
+        break;
+      }
+    }
+  };
+  container.addEventListener("click", onClick2);
+  container.addEventListener("keydown", onKeyDown4);
   let initial;
   if (useHash) {
     const h = currentHash();
@@ -186,12 +373,18 @@ function setup(container) {
     if (n && names.includes(n)) initial = n;
   }
   activate(container, initial ?? names[0], false);
+  const onHash = () => {
+    const h = currentHash();
+    if (names.includes(h)) activate(container, h, false);
+  };
   if (useHash && typeof window !== "undefined") {
-    window.addEventListener("hashchange", () => {
-      const h = currentHash();
-      if (names.includes(h)) activate(container, h, false);
-    });
+    window.addEventListener("hashchange", onHash);
   }
+  el.__icenTabsCleanup = () => {
+    container.removeEventListener("click", onClick2);
+    container.removeEventListener("keydown", onKeyDown4);
+    window.removeEventListener("hashchange", onHash);
+  };
 }
 function initTabs(root = document) {
   if (typeof document === "undefined") return;
@@ -234,11 +427,12 @@ async function copyText(text) {
 function flashDone(btn) {
   const prev = flashing.get(btn);
   if (prev) window.clearTimeout(prev.timer);
-  const original = prev ? prev.original : btn.textContent;
-  btn.textContent = "\u5DF2\u590D\u5236";
+  const iconOnly = btn.hasAttribute("data-copy-icon");
+  const original = prev ? prev.original : iconOnly ? null : btn.textContent;
+  if (!iconOnly) btn.textContent = "\u5DF2\u590D\u5236";
   btn.classList.add("done");
   const timer = window.setTimeout(() => {
-    btn.textContent = original;
+    if (!iconOnly) btn.textContent = original;
     btn.classList.remove("done");
     flashing.delete(btn);
   }, 1400);
@@ -311,14 +505,25 @@ function setupOtp(group) {
   if (el.__icenInputInit) return;
   el.__icenInputInit = true;
   const cells = Array.from(group.querySelectorAll(".otp-cell"));
+  const syncFilled = (cell) => {
+    cell.classList.toggle("is-filled", cell.value.length > 0);
+  };
   cells.forEach((cell, i) => {
+    if (!cell.hasAttribute("aria-label")) {
+      cell.setAttribute("aria-label", `\u7B2C ${i + 1} \u4F4D\uFF0C\u5171 ${cells.length} \u4F4D`);
+    }
+    syncFilled(cell);
     cell.addEventListener("input", () => {
       const ch = cell.value.slice(-1);
       cell.value = ch;
+      syncFilled(cell);
       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 === "Backspace" && !cell.value && i > 0) {
+        ev.preventDefault();
+        cells[i - 1].focus();
+      }
       if (ev.key === "ArrowLeft" && i > 0) {
         ev.preventDefault();
         cells[i - 1].focus();
@@ -334,10 +539,18 @@ function setupOtp(group) {
       for (let k = 0; k < text.length; k++) {
         const target = cells[i + k];
         target.value = text[k] ?? "";
+        syncFilled(target);
       }
       cells[Math.min(i + text.length, cells.length - 1)].focus();
     });
   });
+  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("otp:complete", { detail: { code }, bubbles: true }));
+    }
+  };
+  cells.forEach((cell) => cell.addEventListener("input", fireComplete));
 }
 function initInput(root = document) {
   if (typeof document === "undefined") return;
@@ -507,7 +720,19 @@ function setupSingle(slider, native) {
     if (fill) fill.style.width = `${p}%`;
     if (thumb) thumb.style.left = `calc(${p}% - 8px)`;
   };
-  native.addEventListener("input", sync);
+  native.addEventListener("input", () => {
+    sync();
+    slider.dispatchEvent(new CustomEvent("icen:slider-input", {
+      bubbles: true,
+      detail: { value: Number(native.value) }
+    }));
+  });
+  native.addEventListener("change", () => {
+    slider.dispatchEvent(new CustomEvent("icen:slider-change", {
+      bubbles: true,
+      detail: { value: Number(native.value) }
+    }));
+  });
   sync();
 }
 function setupDual(slider, natives) {
@@ -540,8 +765,28 @@ function setupDual(slider, natives) {
     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));
+  lo.addEventListener("input", () => {
+    sync(lo);
+    slider.dispatchEvent(new CustomEvent("icen:slider-input", {
+      bubbles: true,
+      detail: { lo: Number(lo.value), hi: Number(hi.value) }
+    }));
+  });
+  hi.addEventListener("input", () => {
+    sync(hi);
+    slider.dispatchEvent(new CustomEvent("icen:slider-input", {
+      bubbles: true,
+      detail: { lo: Number(lo.value), hi: Number(hi.value) }
+    }));
+  });
+  const onChange = () => {
+    slider.dispatchEvent(new CustomEvent("icen:slider-change", {
+      bubbles: true,
+      detail: { lo: Number(lo.value), hi: Number(hi.value) }
+    }));
+  };
+  lo.addEventListener("change", onChange);
+  hi.addEventListener("change", onChange);
   sync(null);
 }
 function setup3(slider) {
@@ -577,10 +822,20 @@ function setup4(wrap) {
     wrap.setAttribute("data-tags", tags.join(","));
     wrap.classList.toggle("is-max", tags.length >= max);
     field.placeholder = tags.length === 0 ? placeholder : "";
+    if (!wrap.hasAttribute("aria-label")) {
+      wrap.setAttribute("aria-label", `\u6807\u7B7E\u8F93\u5165\uFF0C\u5171 ${tags.length} \u4E2A`);
+    }
+  }
+  function emit() {
+    wrap.dispatchEvent(new CustomEvent("icen:tags-change", {
+      bubbles: true,
+      detail: { tags: [...tags] }
+    }));
   }
   function remove(index) {
     tags.splice(index, 1);
     render();
+    emit();
   }
   function chip(tag, index) {
     const el2 = document.createElement("span");
@@ -613,6 +868,7 @@ function setup4(wrap) {
     tags.push(v);
     field.value = "";
     render();
+    emit();
   }
   field.addEventListener("keydown", (ev) => {
     if (ev.key === "Enter" || ev.key === ",") {
@@ -672,10 +928,9 @@ function setup5(zone) {
     }
     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 } }));
     }
+    const list = Array.from(files);
+    zone.dispatchEvent(new CustomEvent("icen:upload", { bubbles: true, detail: { files: list } }));
   });
 }
 function initUpload(root = document) {
@@ -716,6 +971,20 @@ function openModal(id) {
   panel2.setAttribute("role", "dialog");
   panel2.setAttribute("aria-modal", "true");
   if (!panel2.hasAttribute("tabindex")) panel2.tabIndex = -1;
+  if (!panel2.hasAttribute("aria-labelledby")) {
+    const title = panel2.querySelector(".modal-title");
+    if (title) {
+      if (!title.id) title.id = `modal-title-${CSS.escape(id)}`;
+      panel2.setAttribute("aria-labelledby", title.id);
+    }
+  }
+  if (!panel2.hasAttribute("aria-describedby")) {
+    const desc = panel2.querySelector(".modal-description");
+    if (desc) {
+      if (!desc.id) desc.id = `modal-desc-${CSS.escape(id)}`;
+      panel2.setAttribute("aria-describedby", desc.id);
+    }
+  }
   const closeOnEscape = backdrop.dataset.closeOnEscape !== "false";
   keyHandler = (e) => {
     if (e.key === "Escape") {
@@ -774,7 +1043,7 @@ function initModal(root = document) {
     const opener = target.closest("[data-modal-open]");
     if (opener?.dataset.modalOpen) {
       opener.setAttribute("aria-haspopup", "dialog");
-      open(opener.dataset.modalOpen);
+      openModal(opener.dataset.modalOpen);
       return;
     }
     const closer = target.closest("[data-modal-close]");
@@ -1314,9 +1583,10 @@ function setup6(container) {
     if (!trigger) return;
     const item = trigger.closest(".accordion-item");
     if (!item || trigger.closest(".accordion") !== container) return;
-    const open2 = item.classList.toggle("is-open");
-    trigger.setAttribute("aria-expanded", String(open2));
-    if (single && open2) {
+    if (item.classList.contains("is-disabled")) 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");
@@ -1324,6 +1594,25 @@ function setup6(container) {
       });
     }
   });
+  container.addEventListener("keydown", (ev) => {
+    const kev = ev;
+    const target = kev.target;
+    if (!(target instanceof Element)) return;
+    const trigger = target.closest(".accordion-trigger");
+    if (!trigger || trigger.closest(".accordion") !== container) return;
+    const triggers = Array.from(
+      container.querySelectorAll(".accordion-item:not(.is-disabled) > .accordion-trigger")
+    );
+    const idx = triggers.indexOf(trigger);
+    if (idx === -1) return;
+    if (kev.key === "Home") {
+      kev.preventDefault();
+      triggers[0]?.focus();
+    } else if (kev.key === "End") {
+      kev.preventDefault();
+      triggers[triggers.length - 1]?.focus();
+    }
+  });
 }
 function initAccordion(root = document) {
   if (typeof document === "undefined") return;
@@ -1338,6 +1627,9 @@ function setup7(tree) {
   const el = tree;
   if (el.__icenTreeInit) return;
   el.__icenTreeInit = true;
+  tree.querySelectorAll(".tree-node").forEach((node) => {
+    if (!node.hasAttribute("tabindex")) node.tabIndex = 0;
+  });
   tree.addEventListener("click", (ev) => {
     const target = ev.target;
     if (!(target instanceof Element)) return;
@@ -1363,8 +1655,61 @@ function setup7(tree) {
       return;
     }
     if (childUl) return;
-    tree.querySelectorAll(".tree-node.is-selected").forEach((n) => n.classList.remove("is-selected"));
+    tree.querySelectorAll('.tree-node.is-selected, .tree-node[aria-selected="true"]').forEach((n) => {
+      n.classList.remove("is-selected");
+      n.removeAttribute("aria-selected");
+    });
     node.classList.add("is-selected");
+    node.setAttribute("aria-selected", "true");
+    tree.dispatchEvent(new CustomEvent("icen:tree-select", {
+      bubbles: true,
+      detail: { node }
+    }));
+  });
+  tree.addEventListener("keydown", (ev) => {
+    const kev = ev;
+    const target = kev.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 allNodes = Array.from(tree.querySelectorAll(".tree-node:not(.is-disabled)"));
+    const idx = allNodes.indexOf(node);
+    if (idx === -1) return;
+    switch (kev.key) {
+      case "ArrowDown": {
+        kev.preventDefault();
+        allNodes[(idx + 1) % allNodes.length]?.focus();
+        break;
+      }
+      case "ArrowUp": {
+        kev.preventDefault();
+        allNodes[(idx - 1 + allNodes.length) % allNodes.length]?.focus();
+        break;
+      }
+      case "ArrowRight": {
+        const li = node.closest("li");
+        const childUl = li?.querySelector(":scope > ul");
+        if (childUl?.hasAttribute("hidden")) {
+          kev.preventDefault();
+          childUl.removeAttribute("hidden");
+          node.querySelector(".tree-toggle")?.setAttribute("aria-expanded", "true");
+          node.querySelector(".tree-toggle")?.classList.remove("is-collapsed");
+        }
+        break;
+      }
+      case "ArrowLeft": {
+        const li = node.closest("li");
+        const childUl = li?.querySelector(":scope > ul");
+        if (childUl && !childUl.hasAttribute("hidden")) {
+          kev.preventDefault();
+          childUl.setAttribute("hidden", "");
+          node.querySelector(".tree-toggle")?.setAttribute("aria-expanded", "false");
+          node.querySelector(".tree-toggle")?.classList.add("is-collapsed");
+        }
+        break;
+      }
+    }
   });
 }
 function initTree(root = document) {
@@ -1405,7 +1750,15 @@ function setup8(carousel) {
     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));
+    dots.forEach((d, i) => {
+      d.classList.toggle("active", i === index);
+      if (i === index) d.setAttribute("aria-current", "true");
+      else d.removeAttribute("aria-current");
+    });
+    carousel.dispatchEvent(new CustomEvent("icen:carousel-change", {
+      bubbles: true,
+      detail: { index, count }
+    }));
   }
   function go(i) {
     index = (i % count + count) % count;
@@ -1413,6 +1766,27 @@ function setup8(carousel) {
   }
   prev?.addEventListener("click", () => go(index - 1));
   next?.addEventListener("click", () => go(index + 1));
+  carousel.addEventListener("keydown", (ev) => {
+    const kev = ev;
+    switch (kev.key) {
+      case "ArrowLeft":
+        kev.preventDefault();
+        go(index - 1);
+        break;
+      case "ArrowRight":
+        kev.preventDefault();
+        go(index + 1);
+        break;
+      case "Home":
+        kev.preventDefault();
+        go(0);
+        break;
+      case "End":
+        kev.preventDefault();
+        go(count - 1);
+        break;
+    }
+  });
   render();
 }
 function initCarousel(root = document) {
@@ -1683,24 +2057,216 @@ function renderLine(el, opts) {
   wrap.append(svg, labelsRow(labels.slice(-7)));
   el.appendChild(wrap);
 }
+function isoDate(d) {
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${d.getFullYear()}-${m}-${day}`;
+}
+function renderHeatmap(el, opts) {
+  if (typeof document === "undefined") return;
+  el.textContent = "";
+  let entries;
+  if (opts.data && opts.data.length > 0) {
+    entries = opts.data;
+  } else if (opts.values && opts.values.length > 0) {
+    const today = /* @__PURE__ */ new Date();
+    entries = opts.values.map((value, i) => {
+      const d = new Date(today);
+      d.setDate(d.getDate() - (opts.values.length - 1 - i));
+      return { date: isoDate(d), value };
+    });
+  } else {
+    renderEmpty(el, opts.emptyLabel);
+    return;
+  }
+  const weeks = opts.weeks ?? Math.ceil(entries.length / 7);
+  if (entries.length > weeks * 7) entries = entries.slice(entries.length - weeks * 7);
+  const max = Math.max(...entries.map((e) => e.value), 1);
+  const levelOf = (v) => v <= 0 ? 0 : Math.min(4, Math.ceil(v / max * 4));
+  const wrap = document.createElement("div");
+  wrap.className = "chart-heatmap";
+  if (opts.tone) wrap.style.setProperty("--chart-tone", toneVar(opts.tone));
+  const grid = document.createElement("div");
+  grid.className = "chart-heatmap-grid";
+  grid.setAttribute("role", "img");
+  const first = /* @__PURE__ */ new Date(`${entries[0].date}T00:00:00`);
+  const pad = (first.getDay() + 6) % 7;
+  for (let i = 0; i < pad; i++) {
+    const blank = document.createElement("span");
+    blank.className = "chart-heatmap-cell is-blank";
+    grid.appendChild(blank);
+  }
+  for (const entry of entries) {
+    const cell = document.createElement("span");
+    cell.className = "chart-heatmap-cell";
+    cell.dataset.level = String(levelOf(entry.value));
+    cell.setAttribute("title", `${entry.date}\uFF1A${fmt(opts, entry.value)}`);
+    grid.appendChild(cell);
+  }
+  const legend = document.createElement("div");
+  legend.className = "chart-heatmap-legend";
+  const less = document.createElement("span");
+  less.textContent = "\u5C11";
+  const more = document.createElement("span");
+  more.textContent = "\u591A";
+  legend.appendChild(less);
+  for (let lv = 0; lv <= 4; lv++) {
+    const cell = document.createElement("span");
+    cell.className = "chart-heatmap-cell";
+    cell.dataset.level = String(lv);
+    legend.appendChild(cell);
+  }
+  legend.appendChild(more);
+  wrap.append(grid, legend);
+  el.appendChild(wrap);
+}
+function renderSparkline(el, opts) {
+  if (typeof document === "undefined") return;
+  el.textContent = "";
+  const values = opts.values;
+  if (values.length === 0) {
+    renderEmpty(el, opts.emptyLabel);
+    return;
+  }
+  const width = 96;
+  const height = 28;
+  const pad = 3;
+  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
+  }));
+  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-sparkline";
+  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.28" }));
+  gradient.appendChild(svgEl("stop", { offset: "100%", "stop-color": tone, "stop-opacity": "0.02" }));
+  defs.appendChild(gradient);
+  svg.appendChild(defs);
+  svg.appendChild(svgEl("path", { d: area, fill: `url(#${gradientId})` }));
+  svg.appendChild(svgEl("path", {
+    d: line,
+    fill: "none",
+    stroke: tone,
+    "stroke-width": "1.8",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round"
+  }));
+  const dot = svgEl("circle", {
+    cx: last.x.toFixed(1),
+    cy: last.y.toFixed(1),
+    r: "2.4",
+    fill: "var(--token-card)",
+    stroke: tone,
+    "stroke-width": "1.6"
+  });
+  const title = svgEl("title", {});
+  title.textContent = fmt(opts, last.value);
+  dot.appendChild(title);
+  svg.appendChild(dot);
+  wrap.appendChild(svg);
+  el.appendChild(wrap);
+}
+function renderGauge(el, opts) {
+  if (typeof document === "undefined") return;
+  el.textContent = "";
+  const max = opts.max ?? 100;
+  const ratio = max > 0 ? Math.min(1, Math.max(0, opts.value / max)) : 0;
+  const radius = 42;
+  const circumference = 2 * Math.PI * radius;
+  const wrap = document.createElement("div");
+  wrap.className = "chart-gauge";
+  if (opts.tone) wrap.style.setProperty("--chart-tone", toneVar(opts.tone));
+  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": "10"
+  }));
+  const dash = ratio * circumference;
+  svg.appendChild(svgEl("circle", {
+    cx: "60",
+    cy: "60",
+    r: String(radius),
+    fill: "none",
+    stroke: toneVar(opts.tone),
+    "stroke-width": "10",
+    "stroke-dasharray": `${dash} ${circumference - dash}`,
+    "stroke-linecap": "round"
+  }));
+  const center = document.createElement("div");
+  center.className = "chart-gauge-center";
+  const val = document.createElement("span");
+  val.className = "chart-gauge-value";
+  val.textContent = opts.formatValue ? opts.formatValue(opts.value) : `${Math.round(ratio * 100)}%`;
+  center.appendChild(val);
+  if (opts.label) {
+    const lab = document.createElement("span");
+    lab.className = "chart-gauge-label";
+    lab.textContent = opts.label;
+    center.appendChild(lab);
+  }
+  wrap.append(svg, center);
+  el.appendChild(wrap);
+}
 
 // src/behaviors/nav.ts
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
 function setup9(nav) {
   const el = nav;
   if (el.__icenNavInit) return;
   el.__icenNavInit = true;
+  const threshold = Number(nav.dataset.navThreshold ?? "12") || 12;
+  const hideOnScroll = nav.hasAttribute("data-nav-hide-on-scroll");
   let ticking = false;
-  const update = () => {
+  let lastY = window.scrollY;
+  let hidden = false;
+  const apply = () => {
     ticking = false;
-    el.classList.toggle("is-scrolled", window.scrollY > 12);
+    const y = window.scrollY;
+    nav.classList.toggle("is-scrolled", y > threshold);
+    if (hideOnScroll && !prefersReducedMotion()) {
+      const dy = y - lastY;
+      if (y < 8) {
+        hidden = false;
+      } else if (dy > 6 && !hidden) {
+        hidden = true;
+      } else if (dy < -6 && hidden) {
+        hidden = false;
+      }
+      nav.classList.toggle("is-nav-hidden", hidden);
+    }
+    lastY = y;
   };
   const onScroll2 = () => {
     if (ticking) return;
     ticking = true;
-    window.requestAnimationFrame(update);
+    window.requestAnimationFrame(apply);
+  };
+  const onResize = () => {
+    if (ticking) return;
+    ticking = true;
+    window.requestAnimationFrame(apply);
   };
   window.addEventListener("scroll", onScroll2, { passive: true });
-  update();
+  window.addEventListener("resize", onResize, { passive: true });
+  apply();
 }
 function initNav(root = document) {
   if (typeof document === "undefined") return;
@@ -1716,6 +2282,14 @@ function setup10(sidebar) {
   const el = sidebar;
   if (el.__icenSidebarInit) return;
   el.__icenSidebarInit = true;
+  sidebar.querySelectorAll(".sidebar-group-title").forEach((title) => {
+    const group = title.closest(".sidebar-group");
+    const panel2 = group?.querySelector(".sidebar-group-panel");
+    if (panel2 && !title.hasAttribute("aria-controls")) {
+      if (!panel2.id) panel2.id = `sb-panel-${Math.random().toString(36).slice(2, 9)}`;
+      title.setAttribute("aria-controls", panel2.id);
+    }
+  });
   el.addEventListener("click", (ev) => {
     const target = ev.target;
     if (!(target instanceof Element)) return;
@@ -1724,8 +2298,12 @@ function setup10(sidebar) {
     if (title.closest(".sidebar") !== el) return;
     const group = title.closest(".sidebar-group");
     if (!group) return;
-    const open2 = group.classList.toggle("is-open");
-    title.setAttribute("aria-expanded", String(open2));
+    const open = group.classList.toggle("is-open");
+    title.setAttribute("aria-expanded", String(open));
+    sidebar.dispatchEvent(new CustomEvent("icen:sidebar-toggle", {
+      bubbles: true,
+      detail: { group, open }
+    }));
   });
 }
 function initSidebar(root = document) {
@@ -1771,8 +2349,11 @@ export {
   openPopover,
   registerContextMenu,
   renderDonut,
+  renderGauge,
   renderHBar,
+  renderHeatmap,
   renderLine,
+  renderSparkline,
   renderStack,
   renderVBar,
   setTheme,