@icen.ai/ui 0.2.1 → 0.4.0

package/dist/behaviors/input.mjs

@@ -48,14 +48,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();
@@ -71,10 +82,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;

package/dist/behaviors/modal.mjs

@@ -28,6 +28,20 @@ function openModal(id) {
   panel.setAttribute("role", "dialog");
   panel.setAttribute("aria-modal", "true");
   if (!panel.hasAttribute("tabindex")) panel.tabIndex = -1;
+  if (!panel.hasAttribute("aria-labelledby")) {
+    const title = panel.querySelector(".modal-title");
+    if (title) {
+      if (!title.id) title.id = `modal-title-${CSS.escape(id)}`;
+      panel.setAttribute("aria-labelledby", title.id);
+    }
+  }
+  if (!panel.hasAttribute("aria-describedby")) {
+    const desc = panel.querySelector(".modal-description");
+    if (desc) {
+      if (!desc.id) desc.id = `modal-desc-${CSS.escape(id)}`;
+      panel.setAttribute("aria-describedby", desc.id);
+    }
+  }
   const closeOnEscape = backdrop.dataset.closeOnEscape !== "false";
   keyHandler = (e) => {
     if (e.key === "Escape") {

package/dist/behaviors/nav.mjs

@@ -1,20 +1,47 @@
 // 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 setup(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 onScroll = () => {
     if (ticking) return;
     ticking = true;
-    window.requestAnimationFrame(update);
+    window.requestAnimationFrame(apply);
+  };
+  const onResize = () => {
+    if (ticking) return;
+    ticking = true;
+    window.requestAnimationFrame(apply);
   };
   window.addEventListener("scroll", onScroll, { passive: true });
-  update();
+  window.addEventListener("resize", onResize, { passive: true });
+  apply();
 }
 function initNav(root = document) {
   if (typeof document === "undefined") return;

package/dist/behaviors/sidebar.mjs

@@ -3,6 +3,14 @@ function setup(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 panel = group?.querySelector(".sidebar-group-panel");
+    if (panel && !title.hasAttribute("aria-controls")) {
+      if (!panel.id) panel.id = `sb-panel-${Math.random().toString(36).slice(2, 9)}`;
+      title.setAttribute("aria-controls", panel.id);
+    }
+  });
   el.addEventListener("click", (ev) => {
     const target = ev.target;
     if (!(target instanceof Element)) return;
@@ -13,6 +21,10 @@ function setup(sidebar) {
     if (!group) return;
     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) {

package/dist/behaviors/slider.mjs

@@ -14,7 +14,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) {
@@ -47,8 +59,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 setup(slider) {

package/dist/behaviors/tabs.mjs

@@ -1,25 +1,55 @@
 // 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;
@@ -27,14 +57,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 onClick = (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 onKeyDown = (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", onClick);
+  container.addEventListener("keydown", onKeyDown);
   let initial;
   if (useHash) {
     const h = currentHash();
@@ -44,12 +129,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", onClick);
+    container.removeEventListener("keydown", onKeyDown);
+    window.removeEventListener("hashchange", onHash);
+  };
 }
 function initTabs(root = document) {
   if (typeof document === "undefined") return;

package/dist/behaviors/tag-input.mjs

@@ -14,10 +14,20 @@ function setup(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");
@@ -50,6 +60,7 @@ function setup(wrap) {
     tags.push(v);
     field.value = "";
     render();
+    emit();
   }
   field.addEventListener("keydown", (ev) => {
     if (ev.key === "Enter" || ev.key === ",") {

package/dist/behaviors/theme.mjs

@@ -65,8 +65,34 @@ 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;
+  }
+}
 export {
   PRESETS,
   STORAGE_KEY,

package/dist/behaviors/toast.mjs

@@ -1,35 +1,103 @@
 // src/behaviors/toast.ts
+var DEFAULT_MS = 2600;
+var ACTION_MS = 6e3;
+var maxStack = 5;
+function isBrowser() {
+  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 (!isBrowser()) 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);
+    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(show, {
-  ok: (message, ms) => show(message, "ok", ms),
-  err: (message, ms) => show(message, "err", ms),
-  warn: (message, ms) => show(message, "warn", ms)
-});
+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 (!isBrowser()) 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;
+    }
+  }
+);
 export {
   toast
 };

package/dist/behaviors/tree.mjs

@@ -3,6 +3,9 @@ function setup(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;
@@ -28,8 +31,61 @@ function setup(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) {

package/dist/behaviors/upload.mjs

@@ -37,10 +37,9 @@ function setup(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) {