@icen.ai/ui 0.9.0 → 0.11.0

package/dist/behaviors/design.d.mts

@@ -0,0 +1,54 @@
+/** Complete visual recipes share CSS, while each brand only supplies seeds.
+ * CSS is compiled without a DOM for SSR/static builds. Import tokens.css first.
+ * Mount a compiled recipe once, then put data-icen-preset on documentElement.
+ * Appearance belongs on html so body-portalled menus inherit the same tokens.
+ */
+interface DesignPalette {
+    canvas: string;
+    surface: string;
+    ink: string;
+    muted: string;
+    accent: string;
+    onAccent: string;
+    success?: string;
+    warning?: string;
+    error?: string;
+    info?: string;
+}
+interface DesignDefinition {
+    /** Lowercase CSS identifier; modern is the built-in 现代 recipe. */
+    name: string;
+    light: DesignPalette;
+    dark: DesignPalette;
+    /** CSS px; the shared recipe derives the six geometric roles. */
+    radius?: number;
+    space?: number;
+    controlHeight?: number;
+    fontSize?: number;
+    font?: string;
+    glassOpacity?: number;
+    glassBlur?: number;
+    motion?: number;
+}
+interface CompiledDesign {
+    readonly name: string;
+    readonly cssText: string;
+}
+/** WCAG sRGB contrast; six-digit opaque hex only, to keep compilation auditable. */
+declare function designContrast(a: string, b: string): number;
+/** Compile an independent brand with light AND dark palettes; never injects CSS.
+ * Validation covers body/muted/accent text on both surfaces and button labels.
+ * Translucent materials still need visual checks over representative content.
+ */
+declare function createDesign(definition: DesignDefinition): CompiledDesign;
+/** Attach trusted, compiled author CSS; safe on the server. CSP sites can write
+ * cssText into a static stylesheet instead, or provide the page's nonce. */
+declare function mountDesign(design: CompiledDesign, nonce?: string): () => void;
+/** Finish palette changes without crossfading text through unreadable midtones.
+ * Call before changing design/theme attributes; hover feedback resumes next frame.
+ */
+declare function prepareDesignChange(): void;
+/** Set a compiled brand theme. null restores the 现代 theme; primitives remain independent. */
+declare function setDesign(name: string | null): void;
+
+export { type CompiledDesign, type DesignDefinition, type DesignPalette, createDesign, designContrast, mountDesign, prepareDesignChange, setDesign };

package/dist/behaviors/design.mjs

@@ -0,0 +1,109 @@
+// src/behaviors/design.ts
+var NAME = /^[a-z][a-z0-9-]{1,30}$/;
+var HEX = /^#[\da-f]{6}$/i;
+var paletteKeys = ["canvas", "surface", "ink", "muted", "accent", "onAccent", "success", "warning", "error", "info"];
+var seedName = (name) => name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+function luminance(hex) {
+  const rgb = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255).map((c) => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+  return rgb[0] * 0.2126 + rgb[1] * 0.7152 + rgb[2] * 0.0722;
+}
+function designContrast(a, b) {
+  if (!HEX.test(a) || !HEX.test(b)) throw new Error("Design colors must use #rrggbb.");
+  const x = luminance(a), y = luminance(b);
+  return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
+}
+function compilePalette(palette, mode) {
+  const required = ["canvas", "surface", "ink", "muted", "accent", "onAccent"];
+  for (const key of required) {
+    if (typeof palette[key] !== "string" || !HEX.test(palette[key])) throw new Error(`${mode}.${key} must use #rrggbb.`);
+  }
+  for (const key of paletteKeys) {
+    const color = palette[key];
+    if (color !== void 0 && !HEX.test(color)) throw new Error(`${mode}.${key} must use #rrggbb.`);
+  }
+  for (const bg of ["canvas", "surface"]) {
+    for (const fg of ["ink", "muted", "accent"]) {
+      if (designContrast(palette[bg], palette[fg]) < 4.5) throw new Error(`${mode}.${fg} on ${bg} must reach 4.5:1 contrast.`);
+    }
+  }
+  if (designContrast(palette.accent, palette.onAccent) < 4.5) throw new Error(`${mode}.onAccent must reach 4.5:1 contrast.`);
+  return paletteKeys.filter((key) => palette[key] !== void 0).map((key) => `  --icen-design-${seedName(key)}: ${palette[key]};`).join("\n") + `
+  --icen-design-accent-strong: ${palette.accent};
+  --icen-design-accent-text: ${palette.accent};
+  --icen-design-faint: ${palette.muted};
+  --icen-design-raised: color-mix(in srgb, ${palette.surface} 96%, ${palette.ink});`;
+}
+function createDesign(definition) {
+  if (!NAME.test(definition.name)) throw new Error("Invalid design name.");
+  const knobs = [];
+  const ranges = {
+    radius: [0, 32, "px"],
+    space: [2, 8, "px"],
+    controlHeight: [32, 56, "px"],
+    fontSize: [12, 24, "px"],
+    glassOpacity: [70, 100, "%"],
+    glassBlur: [0, 40, "px"],
+    motion: [0, 1, ""]
+  };
+  for (const key of Object.keys(ranges)) {
+    const value = definition[key];
+    if (value === void 0) continue;
+    const [min, max, unit] = ranges[key];
+    if (typeof value !== "number" || !Number.isFinite(value) || value < min || value > max) throw new Error(`${key} must be between ${min} and ${max}.`);
+    knobs.push(`  --icen-design-${seedName(key)}: ${value}${unit};`);
+  }
+  if (definition.font !== void 0) {
+    if (!definition.font.trim() || /[;{}<>\\\n\r]|\/\*/.test(definition.font)) throw new Error("Invalid font stack.");
+    knobs.push(`  --icen-design-font: ${definition.font};`);
+  }
+  const selector = `:root[data-icen-preset="${definition.name}"]`;
+  const cssText = `${selector} {
+${compilePalette(definition.light, "light")}
+${knobs.join("\n")}
+}
+${selector}[data-icen-theme="dark"] {
+${compilePalette(definition.dark, "dark")}
+${knobs.join("\n")}
+}
+`;
+  return Object.freeze({ name: definition.name, cssText });
+}
+function mountDesign(design, nonce) {
+  if (typeof document === "undefined") return () => {
+  };
+  const style = document.createElement("style");
+  if (nonce) style.nonce = nonce;
+  style.textContent = design.cssText;
+  document.head.append(style);
+  return () => style.remove();
+}
+var appearanceFrame;
+function prepareDesignChange() {
+  if (typeof document === "undefined" || typeof window.requestAnimationFrame !== "function") return;
+  const root = document.documentElement;
+  root.setAttribute("data-icen-design-changing", "");
+  void root.offsetWidth;
+  if (appearanceFrame !== void 0) window.cancelAnimationFrame(appearanceFrame);
+  appearanceFrame = window.requestAnimationFrame(() => {
+    appearanceFrame = window.requestAnimationFrame(() => {
+      void root.offsetWidth;
+      root.removeAttribute("data-icen-design-changing");
+      appearanceFrame = void 0;
+    });
+  });
+}
+function setDesign(name) {
+  if (name !== null && !NAME.test(name)) throw new Error("Invalid design name.");
+  if (typeof document === "undefined") return;
+  prepareDesignChange();
+  document.documentElement.setAttribute("data-icen-preset", name ?? "modern");
+  if (!document.documentElement.hasAttribute("data-icen-style")) document.documentElement.setAttribute("data-icen-style", "modern");
+  document.documentElement.removeAttribute("data-icen-design");
+}
+export {
+  createDesign,
+  designContrast,
+  mountDesign,
+  prepareDesignChange,
+  setDesign
+};

package/dist/behaviors/dropdown.d.mts

@@ -1,8 +1,7 @@
-/**
- * 绑定全部 [data-dropdown-trigger]（document 级委托，重复调用安全）。
- * 返回销毁函数：摘除 document 委托并复位幂等标记（销毁后可重新 init）；
- * 销毁时若有面板开着会顺带收起。SSR 下返回 no-op。
- */
+/** Open an authored menu and focus its first/last available action. */
+declare function openDropdown(trigger: HTMLElement, edge?: 'first' | 'last'): void;
+/** Closing is interruptible: reopening/destroying first restores template nodes. */
+declare function closeDropdown(restoreFocus?: boolean): void;
 declare function initDropdown(root?: ParentNode): () => void;
 
-export { initDropdown };
+export { closeDropdown, initDropdown, openDropdown };

package/dist/behaviors/dropdown.mjs

@@ -1,10 +1,32 @@
 // src/behaviors/popover.ts
+function revealPopoverItem(item, scrollport, opts = {}) {
+  if (typeof document === "undefined") return;
+  if (opts.focus) item.focus({ preventScroll: true });
+  const rect = item.getBoundingClientRect(), bounds = scrollport.getBoundingClientRect();
+  const style = getComputedStyle(scrollport);
+  const inset = (value, extent) => {
+    const amount = Number.parseFloat(value) || 0;
+    return value.endsWith("%") ? amount * extent / 100 : amount;
+  };
+  if (opts.axis !== "inline") {
+    const top = bounds.top + scrollport.clientTop + inset(style.scrollPaddingTop, scrollport.clientHeight);
+    const bottom = bounds.top + scrollport.clientTop + scrollport.clientHeight - inset(style.scrollPaddingBottom, scrollport.clientHeight);
+    if (rect.top < top) scrollport.scrollTop -= top - rect.top;
+    else if (rect.bottom > bottom) scrollport.scrollTop += rect.bottom - bottom;
+  }
+  if (opts.axis === "inline" || opts.axis === "both") {
+    const left = bounds.left + scrollport.clientLeft + inset(style.scrollPaddingLeft, scrollport.clientWidth);
+    const right = bounds.left + scrollport.clientLeft + scrollport.clientWidth - inset(style.scrollPaddingRight, scrollport.clientWidth);
+    if (rect.left < left) scrollport.scrollLeft -= left - rect.left;
+    else if (rect.right > right) scrollport.scrollLeft += rect.right - right;
+  }
+}
 var PANEL_SIZING_ATTRS = {
-  width: "data-panel-width",
-  minWidth: "data-panel-min",
-  maxWidth: "data-panel-max",
-  minHeight: "data-panel-min-height",
-  maxHeight: "data-panel-max-height"
+  width: "data-icen-panel-width",
+  minWidth: "data-icen-panel-min",
+  maxWidth: "data-icen-panel-max",
+  minHeight: "data-icen-panel-min-height",
+  maxHeight: "data-icen-panel-max-height"
 };
 function readPanelSizing(el) {
   const out = {};
@@ -65,10 +87,10 @@ function computePopoverLayout(anchor, viewport, opts = {}) {
   const preferredSide = opts.side ?? "top";
   const align = opts.align ?? "start";
   if (preferredSide === "left" || preferredSide === "right") {
+    const minWidth2 = Math.max(1, opts.minWidth ?? DEFAULT_MIN_WIDTH);
     const availableLeft = Math.max(0, anchor.left - margin - offset);
     const availableRight = Math.max(0, viewport.width - anchor.right - margin - offset);
-    const side2 = (preferredSide === "left" ? availableLeft : availableRight) >= DEFAULT_MIN_WIDTH ? preferredSide : preferredSide === "left" ? "right" : "left";
-    const minWidth2 = Math.max(1, opts.minWidth ?? DEFAULT_MIN_WIDTH);
+    const side2 = (preferredSide === "left" ? availableLeft : availableRight) >= minWidth2 ? preferredSide : preferredSide === "left" ? "right" : "left";
     const maxWidth2 = Math.min(
       Math.max(opts.maxWidth ?? DEFAULT_MAX_WIDTH, minWidth2),
       side2 === "left" ? availableLeft : availableRight
@@ -97,7 +119,7 @@ function computePopoverLayout(anchor, viewport, opts = {}) {
   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 contentHeight = opts.contentHeightHint != null && opts.contentHeightHint > 0 ? opts.contentHeightHint : fallbackHeight;
   const desiredHeight = clamp(contentHeight, minHeight, Math.min(requestedMaxHeight, availableHeight));
   const side = chooseSide(preferredSide, availableTop, availableBottom, desiredHeight);
   const sideSpace = side === "top" ? availableTop : availableBottom;
@@ -113,6 +135,14 @@ function computePopoverLayout(anchor, viewport, opts = {}) {
   const top = clamp(desiredTop, margin, viewport.height - margin - positionedHeight);
   return { side, left, top, width, maxHeight };
 }
+var menuCloser = null;
+function claimMenuFocus(close) {
+  menuCloser?.();
+  menuCloser = close;
+  return () => {
+    if (menuCloser === close) menuCloser = null;
+  };
+}
 
 // src/behaviors/events.ts
 function emitIcen(source, type, detail) {
@@ -126,154 +156,276 @@ function emitMenuSelect(source, item) {
   emitIcen(item, "icen:menu-select", {
     source,
     item,
-    value: item.dataset.value ?? "",
+    value: item.dataset.icenValue ?? "",
     /* 优先专用 label 子元素（避开快捷键/图标文本混入），无则退整项文本 */
-    label: (item.querySelector(".menu-item-label, .command-item-label")?.textContent ?? item.textContent ?? "").trim().slice(0, 80)
+    label: (item.querySelector(".icen-menu-item-label, .command-item-label")?.textContent ?? item.textContent ?? "").trim().slice(0, 80)
   });
 }
 
 // src/behaviors/dropdown.ts
-var VIEWPORT_MARGIN = 12;
-var SIDE_OFFSET = 4;
 var active = null;
-var initialized = false;
-function menuItems(panel) {
-  return Array.from(panel.querySelectorAll(".menu-item:not(.is-disabled):not(:disabled)"));
-}
-function setHighlight(next) {
+var sequence = 0;
+var scopes = /* @__PURE__ */ new Map();
+var finishClosing = null;
+var releaseMenu = null;
+var classDisabled = /* @__PURE__ */ new WeakSet();
+var unavailable = (item) => item.matches(".is-disabled,:disabled") || Boolean(item.closest('[aria-disabled="true"],[hidden],[inert],[data-icen-disabled]'));
+var items = (menu) => Array.from(menu.querySelectorAll(".icen-menu-item")).filter((item) => !unavailable(item));
+var within = (scope, node) => scope === node || scope instanceof Node && scope.contains(node);
+function setHighlight(index, focus = true) {
   if (!active) return;
-  active.items.forEach((el, i) => el.classList.toggle("is-highlighted", i === next));
-  active.highlight = next;
+  const rows = items(active.panel);
+  active.highlight = index;
+  active.panel.querySelectorAll(".icen-menu-item").forEach((item) => {
+    const selected = item === rows[index];
+    item.classList.toggle("is-highlighted", selected);
+    item.tabIndex = selected ? 0 : -1;
+  });
+  if (rows[index]) revealPopoverItem(rows[index], active.panel, { focus });
 }
 function place() {
   if (!active) return;
   const { trigger, panel } = active;
-  const rect = trigger.getBoundingClientRect();
-  const layout = computePopoverLayout(
-    rect,
-    { width: window.innerWidth, height: window.innerHeight },
-    { side: "bottom", offset: SIDE_OFFSET, margin: VIEWPORT_MARGIN }
-  );
+  if (!trigger.isConnected) {
+    closeDropdown(false);
+    return;
+  }
+  const sizing = readPanelSizing(trigger.closest("[data-icen-dropdown]"));
+  applyPanelSizing(panel, null);
+  applyPanelSizing(panel, sizing);
+  const width = panel.offsetWidth || panel.getBoundingClientRect().width || 180;
+  const height = panel.scrollHeight || panel.offsetHeight;
+  const cssMax = parseFloat(getComputedStyle(panel).maxHeight);
+  const layout = computePopoverLayout(trigger.getBoundingClientRect(), { width: window.innerWidth, height: window.innerHeight }, {
+    side: "bottom",
+    align: getComputedStyle(trigger).direction === "rtl" ? "end" : "start",
+    offset: 4,
+    margin: 12,
+    minWidth: width,
+    maxWidth: width,
+    minHeight: 40,
+    maxHeight: sizing.maxHeight ?? (Number.isFinite(cssMax) ? cssMax : 420),
+    contentHeightHint: height
+  });
   panel.style.left = `${layout.left}px`;
   panel.style.top = `${layout.top}px`;
-  panel.dataset.side = layout.side;
+  panel.style.width = `${layout.width}px`;
+  panel.style.minWidth = `${layout.width}px`;
+  panel.style.maxHeight = `${layout.maxHeight}px`;
+  panel.dataset.icenSide = layout.side;
 }
-function openDropdown(trigger, highlightFirst = false) {
-  closeDropdown();
-  const root = trigger.closest("[data-dropdown]");
-  const template = root?.querySelector("[data-dropdown-menu]");
+function openDropdown(trigger, edge = "first") {
+  if (typeof document === "undefined" || unavailable(trigger)) return;
+  closeDropdown(false);
+  finishClosing?.();
+  const root = trigger.closest("[data-icen-dropdown]");
+  const template = root?.querySelector("[data-icen-dropdown-menu]");
   if (!root || !template) return;
+  releaseMenu = claimMenuFocus(() => closeDropdown(false));
+  if (trigger instanceof HTMLButtonElement && !trigger.hasAttribute("type")) trigger.type = "button";
+  trigger.setAttribute("aria-haspopup", "menu");
   const panel = document.createElement("div");
-  panel.className = "menu";
+  panel.className = "icen-menu";
+  panel.id = `icen-dropdown-${++sequence}`;
   panel.setAttribute("role", "menu");
+  panel.tabIndex = -1;
   panel.style.visibility = "hidden";
+  trigger.id ||= `icen-dropdown-trigger-${sequence}`;
+  panel.setAttribute("aria-labelledby", trigger.id);
+  trigger.setAttribute("aria-controls", panel.id);
   applyPanelSizing(panel, readPanelSizing(root));
-  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 };
+  while (template.firstChild) panel.append(template.firstChild);
+  panel.querySelectorAll(".icen-menu-item").forEach((item) => {
+    if (item instanceof HTMLButtonElement && !item.hasAttribute("type")) item.type = "button";
+    if (!item.hasAttribute("role")) item.setAttribute("role", item.hasAttribute("aria-checked") || item.classList.contains("icen-menu-item--checked") ? "menuitemcheckbox" : "menuitem");
+    if (item.getAttribute("role") === "menuitemcheckbox" && !item.hasAttribute("aria-checked")) item.setAttribute("aria-checked", String(item.classList.contains("icen-menu-item--checked")));
+    if (classDisabled.has(item)) {
+      item.removeAttribute("aria-disabled");
+      classDisabled.delete(item);
+    }
+    if (item.classList.contains("is-disabled") && !item.hasAttribute("aria-disabled")) {
+      item.setAttribute("aria-disabled", "true");
+      classDisabled.add(item);
+    }
+    item.tabIndex = -1;
+    item.querySelector(".icen-menu-item-check")?.remove();
+    item.querySelector(".icen-menu-item-shortcut")?.setAttribute("aria-hidden", "true");
+  });
+  panel.querySelectorAll(".icen-menu-separator").forEach((separator) => separator.setAttribute("role", "separator"));
+  document.body.append(panel);
+  active = { trigger, template, panel, highlight: -1, typed: "", typedAt: 0 };
   trigger.setAttribute("aria-expanded", "true");
   place();
   panel.style.visibility = "";
-  if (highlightFirst && active.items.length > 0) setHighlight(0);
+  const rows = items(panel);
+  if (rows.length) setHighlight(edge === "last" ? rows.length - 1 : 0);
+  else panel.focus({ preventScroll: true });
+  panel.addEventListener("pointermove", onPointerMove);
+  panel.addEventListener("focusin", (event) => {
+    const item = event.target instanceof Element ? event.target.closest(".icen-menu-item") : null;
+    if (active?.panel === panel && item) setHighlight(items(panel).indexOf(item), false);
+  });
+  panel.addEventListener("click", (event) => {
+    const item = event.target instanceof Element ? event.target.closest(".icen-menu-item") : null;
+    if (item && unavailable(item)) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+    }
+  }, true);
+  document.addEventListener("click", onClick);
   document.addEventListener("pointerdown", onOutsidePointerDown, true);
   document.addEventListener("scroll", onScroll, true);
-  window.addEventListener("keydown", onKeyDown);
+  window.addEventListener("resize", place);
+  window.addEventListener("keydown", onKeyDown, true);
 }
-function closeDropdown(restoreFocus = false) {
+function closeDropdown(restoreFocus = true) {
   if (!active) return;
   const { trigger, template, panel } = active;
   active = null;
+  releaseMenu?.();
+  releaseMenu = null;
   trigger.setAttribute("aria-expanded", "false");
-  while (panel.firstChild) template.appendChild(panel.firstChild);
-  panel.remove();
+  trigger.removeAttribute("aria-controls");
+  panel.removeEventListener("pointermove", onPointerMove);
   document.removeEventListener("pointerdown", onOutsidePointerDown, true);
   document.removeEventListener("scroll", onScroll, true);
-  window.removeEventListener("keydown", onKeyDown);
-  if (restoreFocus) trigger.focus();
+  window.removeEventListener("resize", place);
+  window.removeEventListener("keydown", onKeyDown, true);
+  if (!scopes.size) document.removeEventListener("click", onClick);
+  if (restoreFocus && trigger.isConnected) trigger.focus({ preventScroll: true });
+  panel.inert = true;
+  panel.setAttribute("aria-hidden", "true");
+  panel.dataset.icenState = "closing";
+  let done = false;
+  let animation;
+  const finish = () => {
+    if (done) return;
+    done = true;
+    animation?.cancel();
+    while (panel.firstChild) template.append(panel.firstChild);
+    panel.remove();
+    if (finishClosing === finish) finishClosing = null;
+  };
+  finishClosing = finish;
+  const css = getComputedStyle(panel), duration = parseFloat(css.animationDuration) * (css.animationDuration.endsWith("ms") ? 1 : 1e3);
+  if (typeof panel.animate === "function" && trigger.isConnected && duration !== 0 && !window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    animation = panel.animate([{ opacity: css.opacity, transform: css.transform === "none" ? "scale(1)" : css.transform }, { opacity: 0, transform: "scale(.985)" }], { duration: Number.isFinite(duration) ? Math.min(90, duration * 0.75) : 90, easing: css.getPropertyValue("--icen-ease-out").trim() || "ease-out", fill: "forwards" });
+    void animation.finished.then(finish, finish);
+  } else finish();
 }
-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 onOutsidePointerDown(event) {
+  if (active && event.target instanceof Node && !active.panel.contains(event.target) && !active.trigger.contains(event.target)) closeDropdown(false);
 }
-function onScroll(e) {
-  if (!active) return;
-  const target = e.target;
-  if (target instanceof Node && active.panel.contains(target)) return;
-  closeDropdown();
+function onScroll(event) {
+  if (active && !(event.target instanceof Node && active.panel.contains(event.target))) closeDropdown(false);
 }
-function onKeyDown(e) {
-  if (!active) return;
-  const { items } = active;
-  if (e.key === "Escape") {
-    e.preventDefault();
-    closeDropdown(true);
+function onPointerMove(event) {
+  if (!active || event.pointerType === "touch" || !(event.target instanceof Element)) return;
+  const item = event.target.closest(".icen-menu-item");
+  if (item && active.panel.contains(item)) setHighlight(items(active.panel).indexOf(item), false);
+}
+function onKeyDown(event) {
+  if (!active || event.isComposing || event.keyCode === 229) return;
+  if (event.key === "Escape") {
+    event.preventDefault();
+    event.stopPropagation();
+    closeDropdown();
     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;
+  if (event.key === "Tab") {
+    closeDropdown();
+    return;
+  }
+  if (event.target instanceof Element && event.target.matches('input,textarea,[contenteditable="true"]')) return;
+  const rows = items(active.panel);
+  if (!rows.length) return;
+  if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+    event.preventDefault();
+    const next = event.key === "Home" ? 0 : event.key === "End" ? rows.length - 1 : (active.highlight + (event.key === "ArrowDown" ? 1 : -1) + rows.length) % rows.length;
     setHighlight(next);
     return;
   }
-  if (e.key === "Enter" && active.highlight >= 0) {
-    e.preventDefault();
-    const item = items[active.highlight];
-    emitMenuSelect(active.panel, item);
-    closeDropdown(true);
-    item.click();
+  if (event.key === "Enter" || event.key === " ") {
+    event.preventDefault();
+    rows[active.highlight]?.click();
+    return;
+  }
+  if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return;
+  event.preventDefault();
+  const now = Date.now();
+  active.typed = now - active.typedAt < 600 ? active.typed + event.key : event.key;
+  active.typedAt = now;
+  let query = active.typed.toLocaleLowerCase();
+  if ([...query].every((character) => character === query[0])) query = active.typed = query[0];
+  for (let step = 1; step <= rows.length; step++) {
+    const index = (Math.max(0, active.highlight) + (query.length === 1 ? step : step - 1)) % rows.length;
+    const label = rows[index].querySelector(".icen-menu-item-label")?.textContent ?? rows[index].textContent ?? "";
+    if (label.trim().toLocaleLowerCase().startsWith(query)) {
+      setHighlight(index);
+      break;
+    }
+  }
+}
+function onClick(event) {
+  if (!(event.target instanceof Element)) return;
+  const item = event.target.closest(".icen-menu-item");
+  if (active && item && active.panel.contains(item)) {
+    if (unavailable(item)) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    const current = active;
+    emitMenuSelect(current.panel, item);
+    if (active === current && !item.hasAttribute("data-icen-menu-keep-open")) closeDropdown(current.panel.contains(document.activeElement));
+    return;
   }
+  const trigger = event.target.closest("[data-icen-dropdown-trigger]");
+  if (!trigger || ![...scopes.keys()].some((scope) => within(scope, trigger))) return;
+  event.preventDefault();
+  if (active?.trigger === trigger) closeDropdown();
+  else openDropdown(trigger);
+}
+function onTriggerKey(event) {
+  if (active || event.isComposing || !["ArrowDown", "ArrowUp", "Enter", " "].includes(event.key)) return;
+  const trigger = event.target instanceof Element ? event.target.closest("[data-icen-dropdown-trigger]") : null;
+  if (!trigger || ![...scopes.keys()].some((scope) => within(scope, trigger))) return;
+  event.preventDefault();
+  openDropdown(trigger, event.key === "ArrowUp" ? "last" : "first");
+  event.stopPropagation();
 }
 function initDropdown(root) {
   if (typeof document === "undefined") return () => {
   };
-  const scope = root ?? document;
-  scope.querySelectorAll("[data-dropdown-trigger]").forEach((el) => el.setAttribute("aria-expanded", "false"));
-  if (initialized) return () => {
-  };
-  initialized = true;
-  const onClick = (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) {
-        if (!item.matches(".is-disabled") && !item.matches(":disabled")) {
-          emitMenuSelect(active.panel, item);
-        }
-        closeDropdown();
-        return;
-      }
+  const scope = root ?? document, existing = scopes.get(scope);
+  if (existing) return existing;
+  const triggers = [...scope instanceof HTMLElement && scope.matches("[data-icen-dropdown-trigger]") ? [scope] : [], ...scope.querySelectorAll("[data-icen-dropdown-trigger]")];
+  triggers.forEach((trigger) => {
+    if (active?.trigger !== trigger) trigger.setAttribute("aria-expanded", "false");
+    trigger.setAttribute("aria-haspopup", "menu");
+    if (trigger instanceof HTMLButtonElement && !trigger.hasAttribute("type")) trigger.type = "button";
+  });
+  if (!scopes.size) {
+    document.addEventListener("click", onClick);
+    document.addEventListener("keydown", onTriggerKey);
+  }
+  let disposed = false;
+  const dispose = () => {
+    if (disposed) return;
+    disposed = true;
+    scopes.delete(scope);
+    if (active && within(scope, active.trigger)) closeDropdown(false);
+    finishClosing?.();
+    if (!scopes.size) {
+      if (!active) document.removeEventListener("click", onClick);
+      document.removeEventListener("keydown", onTriggerKey);
     }
-    const trigger = target.closest("[data-dropdown-trigger]");
-    if (!trigger) return;
-    if (active && active.trigger === trigger) closeDropdown();
-    else openDropdown(trigger);
-  };
-  document.addEventListener("click", onClick);
-  const onKeyDown2 = (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);
-  };
-  document.addEventListener("keydown", onKeyDown2);
-  const destroy = () => {
-    document.removeEventListener("click", onClick);
-    document.removeEventListener("keydown", onKeyDown2);
-    closeDropdown();
-    initialized = false;
   };
-  return destroy;
+  scopes.set(scope, dispose);
+  return dispose;
 }
 export {
-  initDropdown
+  closeDropdown,
+  initDropdown,
+  openDropdown
 };