@icen.ai/ui 0.4.0 → 0.5.0

package/dist/behaviors/back-top.mjs

@@ -0,0 +1,84 @@
+// src/behaviors/back-top.ts
+var AUTO_BTN_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>';
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function getScrollTarget(target) {
+  if (!target) return { el: null, isWindow: true };
+  const el = document.querySelector(target);
+  return { el, isWindow: false };
+}
+function getScrollY(target) {
+  if (!target) return window.scrollY;
+  const el = document.querySelector(target);
+  return el ? el.scrollTop : window.scrollY;
+}
+function scrollToTop(target, offset = 0) {
+  const reduce = prefersReducedMotion();
+  const behavior = reduce ? "auto" : "smooth";
+  if (!target) {
+    window.scrollTo({ top: offset, behavior });
+    return;
+  }
+  const el = document.querySelector(target);
+  if (el) el.scrollTo({ top: offset, behavior });
+}
+function setup(btn, opts = {}) {
+  const el = btn;
+  if (el.__icenBackTopInit) return;
+  el.__icenBackTopInit = true;
+  const threshold = Number(btn.dataset.backTopThreshold ?? opts.threshold ?? 320) || 320;
+  const target = btn.dataset.backTopTarget ?? opts.target;
+  const offset = Number(btn.dataset.backTopOffset ?? opts.offset ?? 0) || 0;
+  let ticking = false;
+  const apply = () => {
+    ticking = false;
+    const y = getScrollY(target);
+    btn.classList.toggle("is-shown", y > threshold);
+  };
+  const onScroll = () => {
+    if (ticking) return;
+    ticking = true;
+    window.requestAnimationFrame(apply);
+  };
+  const { el: targetEl, isWindow } = getScrollTarget(target);
+  if (isWindow) {
+    window.addEventListener("scroll", onScroll, { passive: true });
+  } else if (targetEl) {
+    targetEl.addEventListener("scroll", onScroll, { passive: true });
+  }
+  window.addEventListener("resize", onScroll, { passive: true });
+  btn.addEventListener("click", () => scrollToTop(target, offset));
+  apply();
+}
+function initBackTop(opts = {}) {
+  if (typeof document === "undefined") return;
+  if (typeof window === "undefined") return;
+  const root = opts.root ?? document;
+  if (opts.autoCreate) {
+    let btn = document.body.querySelector(".back-top[data-back-top-auto]");
+    if (!btn) {
+      btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "back-top";
+      btn.setAttribute("data-back-top", "");
+      btn.setAttribute("data-back-top-auto", "");
+      btn.setAttribute("aria-label", "\u56DE\u5230\u9876\u90E8");
+      btn.innerHTML = AUTO_BTN_SVG;
+      document.body.appendChild(btn);
+    }
+    setup(btn, opts);
+  }
+  const candidates = [];
+  if (root instanceof Element && root.matches(".back-top[data-back-top]")) candidates.push(root);
+  candidates.push(...Array.from(root.querySelectorAll(".back-top[data-back-top]")));
+  for (const c of candidates) {
+    const el = c;
+    if (el.hasAttribute("data-back-top-auto") && opts.autoCreate) continue;
+    setup(el, opts);
+  }
+}
+export {
+  initBackTop
+};

package/dist/behaviors/command-palette.mjs

@@ -0,0 +1,177 @@
+// src/behaviors/command-palette.ts
+var FOCUSABLE = 'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var openId = null;
+var restoreFocusTo = null;
+var prevBodyOverflow = "";
+var keyHandler = null;
+var globalKeyHandler = null;
+var initialized = false;
+function findBackdrop(id) {
+  return document.querySelector(
+    `.command-palette-backdrop[data-command-palette="${CSS.escape(id)}"]`
+  );
+}
+function getVisibleItems(panel) {
+  return Array.from(
+    panel.querySelectorAll(".command-palette-item:not([hidden]):not([disabled])")
+  ).filter((el) => el.offsetParent !== null || el.getClientRects().length > 0);
+}
+function isDisabledItem(el) {
+  return el.hasAttribute("disabled") || el.getAttribute("aria-disabled") === "true";
+}
+function setActive(panel, idx) {
+  const items = getVisibleItems(panel);
+  items.forEach((el, i) => el.classList.toggle("is-active", i === idx));
+  const active = items[idx];
+  if (active && typeof active.scrollIntoView === "function") {
+    active.scrollIntoView({ block: "nearest" });
+  }
+}
+function filterPanel(panel, query) {
+  const q = query.trim().toLowerCase();
+  let visibleCount = 0;
+  panel.querySelectorAll(".command-palette-item").forEach((item) => {
+    if (isDisabledItem(item)) return;
+    const label = (item.querySelector(".command-palette-item-label")?.textContent ?? "").toLowerCase();
+    const hint = (item.querySelector(".command-palette-item-hint")?.textContent ?? "").toLowerCase();
+    const keyword = (item.dataset.commandPaletteKeyword ?? "").toLowerCase();
+    const match = !q || label.includes(q) || hint.includes(q) || keyword.includes(q);
+    item.hidden = !match;
+    item.classList.remove("is-active");
+    if (match) visibleCount++;
+  });
+  panel.querySelectorAll(".command-palette-group").forEach((group) => {
+    const hasVisible = Array.from(group.querySelectorAll(".command-palette-item")).some(
+      (it) => !it.hidden
+    );
+    group.hidden = !hasVisible;
+  });
+  const empty = panel.querySelector(".command-palette-empty");
+  if (empty) empty.hidden = visibleCount !== 0;
+  if (visibleCount > 0) setActive(panel, 0);
+}
+function openCommandPalette(id) {
+  if (typeof document === "undefined") return;
+  if (openId === id) return;
+  if (openId) closeCommandPalette(openId);
+  const backdrop = findBackdrop(id);
+  if (!backdrop) return;
+  const panel = backdrop.querySelector(".command-palette");
+  if (!panel) return;
+  if (backdrop.parentElement !== document.body) document.body.appendChild(backdrop);
+  restoreFocusTo = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+  openId = id;
+  backdrop.hidden = false;
+  prevBodyOverflow = document.body.style.overflow;
+  document.body.style.overflow = "hidden";
+  const input = panel.querySelector(".command-palette-input");
+  if (input) {
+    input.value = "";
+    input.focus();
+  } else {
+    panel.focus();
+  }
+  filterPanel(panel, "");
+  keyHandler = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      closeCommandPalette(id);
+      return;
+    }
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const items = getVisibleItems(panel);
+      if (items.length === 0) return;
+      const cur = items.findIndex((el) => el.classList.contains("is-active"));
+      const next = e.key === "ArrowDown" ? (cur + 1) % items.length : (cur - 1 + items.length) % items.length;
+      setActive(panel, next);
+      return;
+    }
+    if (e.key === "Enter") {
+      const active = panel.querySelector(".command-palette-item.is-active");
+      if (active && !isDisabledItem(active)) {
+        e.preventDefault();
+        active.click();
+      }
+      return;
+    }
+    if (e.key === "Tab") {
+      e.preventDefault();
+      const els = Array.from(panel.querySelectorAll(FOCUSABLE)).filter(
+        (el) => !el.hidden && el.offsetParent !== null
+      );
+      if (els.length === 0) return;
+      const cur = els.findIndex((el) => el === document.activeElement);
+      const next = e.shiftKey ? (cur - 1 + els.length) % els.length : (cur + 1) % els.length;
+      els[next]?.focus();
+    }
+  };
+  window.addEventListener("keydown", keyHandler);
+}
+function closeCommandPalette(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 initCommandPalette(root = document) {
+  if (typeof document === "undefined") return;
+  if (typeof window === "undefined") return;
+  root.querySelectorAll("[data-command-palette-open]").forEach((el) => el.setAttribute("aria-haspopup", "dialog"));
+  if (initialized) return;
+  initialized = true;
+  document.addEventListener("click", (e) => {
+    const target = e.target instanceof Element ? e.target : null;
+    if (!target) return;
+    const opener = target.closest("[data-command-palette-open]");
+    if (opener?.dataset.commandPaletteOpen) {
+      openCommandPalette(opener.dataset.commandPaletteOpen);
+      return;
+    }
+    const item = target.closest(".command-palette-item");
+    if (item) {
+      const backdrop = item.closest("[data-command-palette]");
+      if (backdrop?.dataset.commandPalette) {
+        if (!item.hasAttribute("data-command-palette-keep-open")) {
+          closeCommandPalette(backdrop.dataset.commandPalette);
+        }
+      }
+      return;
+    }
+    if (target instanceof HTMLElement && target.classList.contains("command-palette-backdrop") && target.dataset.commandPalette) {
+      closeCommandPalette(target.dataset.commandPalette);
+    }
+  });
+  document.addEventListener("input", (e) => {
+    if (!(e.target instanceof HTMLElement)) return;
+    if (!e.target.matches(".command-palette-input")) return;
+    const backdrop = e.target.closest("[data-command-palette]");
+    const panel = backdrop?.querySelector(".command-palette");
+    if (panel) filterPanel(panel, e.target.value);
+  });
+  globalKeyHandler = (e) => {
+    if ((e.metaKey || e.ctrlKey) && (e.key === "k" || e.key === "K")) {
+      e.preventDefault();
+      const first = document.querySelector(".command-palette-backdrop[data-command-palette]");
+      if (first?.dataset.commandPalette) {
+        if (openId === first.dataset.commandPalette) closeCommandPalette(openId);
+        else openCommandPalette(first.dataset.commandPalette);
+      }
+    }
+  };
+  window.addEventListener("keydown", globalKeyHandler);
+}
+export {
+  closeCommandPalette,
+  initCommandPalette,
+  openCommandPalette
+};

package/dist/behaviors/date-picker.mjs

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

package/dist/behaviors/input.mjs

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