@icen.ai/ui 0.1.1 → 0.2.1

package/dist/behaviors/dropdown.mjs

@@ -0,0 +1,136 @@
+// src/behaviors/dropdown.ts
+var VIEWPORT_MARGIN = 12;
+var SIDE_OFFSET = 4;
+var active = null;
+var initialized = false;
+function clamp(value, min, max) {
+  if (max < min) return min;
+  return Math.min(max, Math.max(min, value));
+}
+function menuItems(panel) {
+  return Array.from(panel.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 } = active;
+  const rect = trigger.getBoundingClientRect();
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const pw = panel.offsetWidth;
+  const ph = panel.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);
+  panel.style.left = `${left}px`;
+  panel.style.top = `${top}px`;
+  panel.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 panel = document.createElement("div");
+  panel.className = "menu";
+  panel.setAttribute("role", "menu");
+  panel.style.visibility = "hidden";
+  while (template.firstChild) panel.appendChild(template.firstChild);
+  panel.querySelectorAll(".menu-item").forEach((el) => el.setAttribute("role", "menuitem"));
+  document.body.appendChild(panel);
+  active = { trigger, template, panel, items: menuItems(panel), highlight: -1 };
+  trigger.setAttribute("aria-expanded", "true");
+  place();
+  panel.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 } = active;
+  active = null;
+  trigger.setAttribute("aria-expanded", "false");
+  while (panel.firstChild) template.appendChild(panel.firstChild);
+  panel.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 (initialized) return;
+  initialized = 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);
+  });
+}
+export {
+  initDropdown
+};

package/dist/behaviors/input.mjs

@@ -0,0 +1,102 @@
+// 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 show = field.type === "password";
+    field.type = show ? "text" : "password";
+    if (iconShow) iconShow.hidden = show;
+    if (iconHide) iconHide.hidden = !show;
+    btn.setAttribute("aria-label", show ? "\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);
+}
+export {
+  initInput
+};

package/dist/behaviors/modal.mjs

@@ -0,0 +1,107 @@
+// 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 initialized = 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 panel = backdrop.querySelector(".modal");
+  if (!panel) 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";
+  panel.setAttribute("role", "dialog");
+  panel.setAttribute("aria-modal", "true");
+  if (!panel.hasAttribute("tabindex")) panel.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 = panel.querySelectorAll(FOCUSABLE);
+    if (els.length === 0) {
+      e.preventDefault();
+      panel.focus();
+      return;
+    }
+    const first = els[0];
+    const last = els[els.length - 1];
+    if (e.shiftKey) {
+      if (document.activeElement === first || !panel.contains(document.activeElement)) {
+        e.preventDefault();
+        last.focus();
+      }
+    } else if (document.activeElement === last || !panel.contains(document.activeElement)) {
+      e.preventDefault();
+      first.focus();
+    }
+  };
+  window.addEventListener("keydown", keyHandler);
+  const focusable = panel.querySelector(FOCUSABLE);
+  (focusable ?? panel).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 (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-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);
+    }
+  });
+}
+export {
+  closeModal,
+  initModal,
+  openModal
+};

package/dist/behaviors/nav.mjs

@@ -0,0 +1,29 @@
+// src/behaviors/nav.ts
+function setup(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 onScroll = () => {
+    if (ticking) return;
+    ticking = true;
+    window.requestAnimationFrame(update);
+  };
+  window.addEventListener("scroll", onScroll, { 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) setup(n);
+}
+export {
+  initNav
+};

package/dist/behaviors/popover.mjs

@@ -0,0 +1,164 @@
+// 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 clamp(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 = clamp(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 = clamp(desiredHeight, 40, maxHeight);
+  const width = align === "stretch" ? clamp(anchor.width, minWidth, maxWidth) : maxWidth;
+  const left = clamp(horizontalAnchor(anchor, width, align), margin, viewport.width - margin - width);
+  const desiredTop = side === "top" ? anchor.top - offset - positionedHeight : anchor.bottom + offset;
+  const top = clamp(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 } = state;
+  panel.style.left = `${layout.left}px`;
+  panel.style.top = `${layout.top}px`;
+  panel.style.width = `${layout.width}px`;
+  panel.style.maxHeight = `${layout.maxHeight}px`;
+  panel.dataset.side = layout.side;
+  panel.style.visibility = state.prevVisibility;
+}
+function onWindowChange() {
+  openPanels.forEach(relayout);
+}
+function onOutsidePointerDown(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 onKeyDown(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(panel, options) {
+  if (typeof document === "undefined") return;
+  if (openPanels.has(panel)) closePopover(panel);
+  const { anchor, onClose, ...layoutOpts } = options;
+  const placeholder = document.createComment("popover-anchor");
+  panel.parentNode?.insertBefore(placeholder, panel);
+  const wasHidden = panel.hidden;
+  const prevVisibility = panel.style.visibility;
+  const state = {
+    panel,
+    anchor,
+    opts: layoutOpts,
+    onClose,
+    placeholder,
+    wasHidden,
+    prevVisibility
+  };
+  openPanels.set(panel, state);
+  document.body.appendChild(panel);
+  panel.hidden = false;
+  panel.style.visibility = "hidden";
+  relayout(state);
+  if (openPanels.size === 1) {
+    window.addEventListener("resize", onWindowChange);
+    window.addEventListener("scroll", onWindowChange, true);
+    document.addEventListener("pointerdown", onOutsidePointerDown, true);
+    window.addEventListener("keydown", onKeyDown);
+  }
+}
+function closePopover(panel) {
+  if (typeof document === "undefined") return;
+  const state = openPanels.get(panel);
+  if (!state) return;
+  openPanels.delete(panel);
+  panel.style.visibility = state.prevVisibility;
+  panel.hidden = state.wasHidden;
+  panel.style.left = "";
+  panel.style.top = "";
+  panel.style.width = "";
+  panel.style.maxHeight = "";
+  delete panel.dataset.side;
+  if (state.placeholder.parentNode) {
+    state.placeholder.parentNode.insertBefore(panel, state.placeholder);
+    state.placeholder.remove();
+  }
+  if (openPanels.size === 0) {
+    window.removeEventListener("resize", onWindowChange);
+    window.removeEventListener("scroll", onWindowChange, true);
+    document.removeEventListener("pointerdown", onOutsidePointerDown, true);
+    window.removeEventListener("keydown", onKeyDown);
+  }
+  state.onClose?.();
+}
+export {
+  closePopover,
+  computePopoverLayout,
+  openPopover
+};

package/dist/behaviors/select.mjs

@@ -0,0 +1,132 @@
+// src/behaviors/select.ts
+function setup(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 panel = panelEl;
+  const options = () => Array.from(panel.querySelectorAll(".select-option"));
+  const isOpen = () => !panel.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;
+    panel.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;
+    panel.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;
+    }
+  });
+  panel.addEventListener("click", (ev) => {
+    const t = ev.target;
+    if (!(t instanceof Element)) return;
+    const opt = t.closest(".select-option");
+    if (opt instanceof HTMLButtonElement && panel.contains(opt)) choose(opt);
+  });
+  panel.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) setup(c);
+}
+export {
+  initSelect
+};