@icen.ai/ui 0.5.0 → 0.8.1

package/dist/behaviors/popover.d.mts

@@ -0,0 +1,82 @@
+/** 布局锚矩形（视口坐标，宽高齐全，元素锚或手工锚共用此形状）。 */
+interface PopoverRect {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    width: number;
+    height: number;
+}
+/** 视口尺寸（可用空间计算的基准）。 */
+interface PopoverViewport {
+    width: number;
+    height: number;
+}
+/** 浮层相对锚的展开侧。 */
+type PopoverSide = 'top' | 'bottom' | 'left' | 'right';
+/** 浮层与锚的对齐方式（stretch = 纵向侧时随锚宽拉伸）。 */
+type PopoverAlign = 'start' | 'center' | 'end' | 'stretch';
+interface PopoverLayoutOptions {
+    side?: PopoverSide;
+    align?: PopoverAlign;
+    offset?: number;
+    margin?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    /** 内容预期高度：避免用被裁剪的实测高度参与选侧 */
+    contentHeightHint?: number;
+}
+interface PanelSizing {
+    /** 固定宽（最高优先，跳过 min/max 夹取） */
+    width?: number;
+    /** 最小宽（默认 = 锚点/trigger 宽或组件 CSS 默认） */
+    minWidth?: number;
+    /** 最大宽 */
+    maxWidth?: number;
+    /** 最小高（与 PopoverLayoutOptions.minHeight 对齐） */
+    minHeight?: number;
+    /** 高度上限 */
+    maxHeight?: number;
+}
+/** 从元素读取 data-panel-* 尺寸属性（非法/缺失字段跳过，不抛异常）。 */
+declare function readPanelSizing(el: Element | null | undefined): PanelSizing;
+/** 合并尺寸：程序面 overrides 优先于属性面（undefined 字段不覆盖）。 */
+declare function resolvePanelSizing(el: Element | null | undefined, overrides?: PanelSizing | null): PanelSizing;
+/** 把 PanelSizing 折算进布局 opts：固定宽 → min=max；否则 min/max 夹取；maxHeight 透传。 */
+declare function sizingToLayout<T extends {
+    minWidth?: number;
+    maxWidth?: number;
+    maxHeight?: number;
+}>(sizing: PanelSizing, opts: T): T;
+/** 把尺寸契约内联到自建面板（dropdown / context-menu / date-picker 等 fixed 面板）。
+ *  传 null 复位全部内联尺寸——单例面板跨实例复用时防「上次的设置串味」。
+ *  视口守卫：width / maxWidth 一律夹到 视口宽 − 24px（窄屏上过大的 data-panel-width 不溢出，
+ *  与 computePopoverLayout 的 availableWidth 同一纪律，不再两套标准）。 */
+declare function applyPanelSizing(panel: HTMLElement, sizing: PanelSizing | null): void;
+interface PopoverLayout {
+    side: PopoverSide;
+    left: number;
+    top: number;
+    width: number;
+    maxHeight: number;
+}
+interface OpenPopoverOptions extends PopoverLayoutOptions {
+    anchor: Element | PopoverRect;
+    /** 统一面板尺寸契约（优先于面板元素的 data-panel-* 与上方直接尺寸字段） */
+    sizing?: PanelSizing;
+    /** 关闭（含外点/Esc 触发的关闭）后的回调 */
+    onClose?: () => void;
+}
+/** 视口智能布局：返回 {side, left, top, width, maxHeight}。
+ *  纵向侧（top/bottom）：选侧按上下空间，宽按 min/max 夹取，高按内容预期。
+ *  横向侧（left/right）：锚点左右翻转，宽取 min（无内容测量，横向侧取下限），
+ *  高占满可用空间，纵向按 align（start/center/end；stretch 视作 start）贴锚。 */
+declare function computePopoverLayout(anchor: PopoverRect, viewport: PopoverViewport, opts?: PopoverLayoutOptions): PopoverLayout;
+/** 打开浮层：panel 移入 body 并按 anchor 布局；重复调用同一 panel 为先关后开。 */
+declare function openPopover(panel: HTMLElement, options: OpenPopoverOptions): void;
+/** 关闭浮层：移除监听并把 panel 还原到打开前的位置与 hidden 状态。 */
+declare function closePopover(panel: HTMLElement): void;
+
+export { type OpenPopoverOptions, type PanelSizing, type PopoverAlign, type PopoverLayout, type PopoverLayoutOptions, type PopoverRect, type PopoverSide, type PopoverViewport, applyPanelSizing, closePopover, computePopoverLayout, openPopover, readPanelSizing, resolvePanelSizing, sizingToLayout };

package/dist/behaviors/popover.mjs

@@ -1,4 +1,63 @@
 // src/behaviors/popover.ts
+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"
+};
+function readPanelSizing(el) {
+  const out = {};
+  if (!el) return out;
+  for (const key of Object.keys(PANEL_SIZING_ATTRS)) {
+    const raw = el.getAttribute(PANEL_SIZING_ATTRS[key]);
+    if (raw == null) continue;
+    const n = Number(raw);
+    if (Number.isFinite(n) && n > 0) out[key] = n;
+  }
+  return out;
+}
+function resolvePanelSizing(el, overrides) {
+  const base = readPanelSizing(el);
+  if (!overrides) return base;
+  for (const key of Object.keys(overrides)) {
+    const v = overrides[key];
+    if (typeof v === "number" && Number.isFinite(v) && v > 0) base[key] = v;
+  }
+  return base;
+}
+function sizingToLayout(sizing, opts) {
+  const out = { ...opts };
+  if (sizing.minWidth != null) out.minWidth = sizing.minWidth;
+  if (sizing.maxWidth != null) out.maxWidth = sizing.maxWidth;
+  if (sizing.width != null) {
+    out.minWidth = sizing.width;
+    out.maxWidth = sizing.width;
+  }
+  if (sizing.maxHeight != null) out.maxHeight = sizing.maxHeight;
+  return out;
+}
+function applyPanelSizing(panel, sizing) {
+  if (sizing == null) {
+    panel.style.width = "";
+    panel.style.minWidth = "";
+    panel.style.maxWidth = "";
+    panel.style.minHeight = "";
+    panel.style.maxHeight = "";
+    return;
+  }
+  const vw = typeof document === "undefined" ? Number.POSITIVE_INFINITY : document.documentElement.clientWidth;
+  const fitW = (n) => Math.min(n, Math.max(80, vw - 24));
+  if (sizing.width != null) {
+    const w = fitW(sizing.width);
+    panel.style.width = `${w}px`;
+    panel.style.maxWidth = `${w}px`;
+  }
+  if (sizing.minWidth != null) panel.style.minWidth = `${fitW(sizing.minWidth)}px`;
+  if (sizing.maxWidth != null && sizing.width == null) panel.style.maxWidth = `${fitW(sizing.maxWidth)}px`;
+  if (sizing.minHeight != null) panel.style.minHeight = `${sizing.minHeight}px`;
+  if (sizing.maxHeight != null) panel.style.maxHeight = `${sizing.maxHeight}px`;
+}
 var DEFAULT_MIN_WIDTH = 220;
 var DEFAULT_MAX_WIDTH = 420;
 var DEFAULT_MIN_HEIGHT = 120;
@@ -23,13 +82,35 @@ function horizontalAnchor(anchor, width, align) {
 function computePopoverLayout(anchor, viewport, opts = {}) {
   const margin = opts.margin ?? 12;
   const offset = opts.offset ?? 8;
+  const preferredSide = opts.side ?? "top";
+  const align = opts.align ?? "start";
+  if (preferredSide === "left" || preferredSide === "right") {
+    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 maxWidth2 = Math.min(
+      Math.max(opts.maxWidth ?? DEFAULT_MAX_WIDTH, minWidth2),
+      side2 === "left" ? availableLeft : availableRight
+    );
+    const width2 = minWidth2;
+    const left2 = clamp(
+      side2 === "left" ? anchor.left - offset - width2 : anchor.right + offset,
+      margin,
+      viewport.width - margin - width2
+    );
+    const availableHeight2 = Math.max(80, viewport.height - margin * 2);
+    const maxHeight2 = Math.min(opts.maxHeight ?? DEFAULT_MAX_HEIGHT, availableHeight2);
+    const desired = clamp(opts.contentHeightHint ?? Math.min(anchor.height, maxHeight2), 40, maxHeight2);
+    const anchorTop = align === "center" ? anchor.top + anchor.height / 2 - desired / 2 : align === "end" ? anchor.bottom - desired : anchor.top;
+    const top2 = clamp(anchorTop, margin, viewport.height - margin - desired);
+    return { side: side2, left: left2, top: top2, width: width2, maxHeight: maxHeight2 };
+  }
   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);
@@ -107,7 +188,8 @@ function onKeyDown(e) {
 function openPopover(panel, options) {
   if (typeof document === "undefined") return;
   if (openPanels.has(panel)) closePopover(panel);
-  const { anchor, onClose, ...layoutOpts } = options;
+  const { anchor, onClose, sizing, ...rest } = options;
+  const layoutOpts = sizingToLayout(resolvePanelSizing(panel, sizing), rest);
   const placeholder = document.createComment("popover-anchor");
   panel.parentNode?.insertBefore(placeholder, panel);
   const wasHidden = panel.hidden;
@@ -139,7 +221,8 @@ function closePopover(panel) {
   if (!state) return;
   openPanels.delete(panel);
   panel.style.visibility = state.prevVisibility;
-  panel.hidden = state.wasHidden;
+  if (typeof state.wasHidden === "string") panel.setAttribute("hidden", state.wasHidden);
+  else panel.hidden = state.wasHidden;
   panel.style.left = "";
   panel.style.top = "";
   panel.style.width = "";
@@ -158,7 +241,11 @@ function closePopover(panel) {
   state.onClose?.();
 }
 export {
+  applyPanelSizing,
   closePopover,
   computePopoverLayout,
-  openPopover
+  openPopover,
+  readPanelSizing,
+  resolvePanelSizing,
+  sizingToLayout
 };

package/dist/behaviors/select.d.mts

@@ -0,0 +1,6 @@
+/** 为 root 下每个 [data-select] 容器初始化（root 自身是 [data-select] 也算）。
+ *  返回销毁函数：摘除本次初始化容器的全部监听并复位幂等标记（可重新 init）；
+ *  最后一个容器销毁时同时摘除 document 级单例委托。 */
+declare function initSelect(root?: ParentNode): () => void;
+
+export { initSelect };

package/dist/behaviors/select.mjs

@@ -1,19 +1,188 @@
+// src/behaviors/popover.ts
+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"
+};
+function readPanelSizing(el) {
+  const out = {};
+  if (!el) return out;
+  for (const key of Object.keys(PANEL_SIZING_ATTRS)) {
+    const raw = el.getAttribute(PANEL_SIZING_ATTRS[key]);
+    if (raw == null) continue;
+    const n = Number(raw);
+    if (Number.isFinite(n) && n > 0) out[key] = n;
+  }
+  return out;
+}
+function resolvePanelSizing(el, overrides) {
+  const base = readPanelSizing(el);
+  if (!overrides) return base;
+  for (const key of Object.keys(overrides)) {
+    const v = overrides[key];
+    if (typeof v === "number" && Number.isFinite(v) && v > 0) base[key] = v;
+  }
+  return base;
+}
+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 preferredSide = opts.side ?? "top";
+  const align = opts.align ?? "start";
+  if (preferredSide === "left" || preferredSide === "right") {
+    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 maxWidth2 = Math.min(
+      Math.max(opts.maxWidth ?? DEFAULT_MAX_WIDTH, minWidth2),
+      side2 === "left" ? availableLeft : availableRight
+    );
+    const width2 = minWidth2;
+    const left2 = clamp(
+      side2 === "left" ? anchor.left - offset - width2 : anchor.right + offset,
+      margin,
+      viewport.width - margin - width2
+    );
+    const availableHeight2 = Math.max(80, viewport.height - margin * 2);
+    const maxHeight2 = Math.min(opts.maxHeight ?? DEFAULT_MAX_HEIGHT, availableHeight2);
+    const desired = clamp(opts.contentHeightHint ?? Math.min(anchor.height, maxHeight2), 40, maxHeight2);
+    const anchorTop = align === "center" ? anchor.top + anchor.height / 2 - desired / 2 : align === "end" ? anchor.bottom - desired : anchor.top;
+    const top2 = clamp(anchorTop, margin, viewport.height - margin - desired);
+    return { side: side2, left: left2, top: top2, width: width2, maxHeight: maxHeight2 };
+  }
+  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 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 };
+}
+
+// src/behaviors/events.ts
+function emitIcen(source, type, detail) {
+  return source.dispatchEvent(
+    new CustomEvent(type, { detail, bubbles: true, composed: true, cancelable: true })
+  );
+}
+
 // src/behaviors/select.ts
+var openSelect = null;
+var globalBound = false;
+var PANEL_OFFSET = 4;
+var PANEL_MAX_HEIGHT = 240;
+function onGlobalPointerDown(ev) {
+  const cur = openSelect;
+  if (!cur) return;
+  const t = ev.target;
+  if (!(t instanceof Node)) return;
+  if (cur.container.contains(t) || cur.panel.contains(t)) return;
+  cur.close();
+}
+function onGlobalKeyDown(ev) {
+  if (ev.key !== "Escape") return;
+  const cur = openSelect;
+  if (!cur) return;
+  cur.close();
+  cur.trigger.focus();
+}
+function onWindowChange() {
+  const cur = openSelect;
+  if (!cur) return;
+  if (!cur.trigger.isConnected) {
+    cur.close();
+    return;
+  }
+  cur.reposition();
+}
+function bindGlobalListeners() {
+  if (globalBound) return;
+  globalBound = true;
+  document.addEventListener("pointerdown", onGlobalPointerDown);
+  document.addEventListener("keydown", onGlobalKeyDown);
+}
+function bindOpenListeners() {
+  window.addEventListener("scroll", onWindowChange, true);
+  window.addEventListener("resize", onWindowChange);
+}
+function unbindOpenListeners() {
+  window.removeEventListener("scroll", onWindowChange, true);
+  window.removeEventListener("resize", onWindowChange);
+}
 function setup(container) {
   const el = container;
-  if (el.__icenSelectInit) return;
-  el.__icenSelectInit = true;
+  if (el.__icenSelectInit) return () => {
+  };
+  const ac = new AbortController();
+  const on = (t, ev, fn) => {
+    const listener = (evt) => fn(evt);
+    t.addEventListener(ev, listener, { signal: ac.signal });
+  };
   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;
+  if (!triggerEl || !panelEl) return () => {
+  };
+  el.__icenSelectInit = true;
   const trigger = triggerEl;
   const panel = panelEl;
   const isMultiple = container.hasAttribute("data-select-multiple");
   const isSearchable = container.hasAttribute("data-select-search");
   const maxSelect = Number(container.getAttribute("data-select-max")) || 0;
+  const panelSizing = resolvePanelSizing(container);
+  function resolvedPanelWidth(triggerWidth) {
+    let w = triggerWidth;
+    if (panelSizing.minWidth != null) w = Math.max(w, panelSizing.minWidth);
+    if (panelSizing.maxWidth != null) w = Math.min(w, panelSizing.maxWidth);
+    if (panelSizing.width != null) w = panelSizing.width;
+    return w;
+  }
   const placeholder = container.getAttribute("data-select-placeholder") ?? (valueEl?.classList.contains("is-empty") ? valueEl?.textContent ?? "" : "");
+  if (isMultiple) panel.setAttribute("data-select-multiple", "");
   let searchInput = null;
   let focusIdx = -1;
   if (isSearchable && !panel.querySelector(".select-search-input")) {
@@ -79,8 +248,8 @@ function setup(container) {
     setFocus(firstEnabled());
   }
   if (searchInput) {
-    searchInput.addEventListener("input", () => filterOptions(searchInput.value));
-    searchInput.addEventListener("keydown", (ev) => {
+    on(searchInput, "input", () => filterOptions(searchInput.value));
+    on(searchInput, "keydown", (ev) => {
       if (ev.key === "Escape") {
         ev.stopPropagation();
         searchInput.value = "";
@@ -89,11 +258,38 @@ function setup(container) {
       }
     });
   }
+  function positionPanel() {
+    const rect = trigger.getBoundingClientRect();
+    const panelWidth = resolvedPanelWidth(rect.width);
+    const layout = computePopoverLayout(
+      rect,
+      { width: window.innerWidth, height: window.innerHeight },
+      {
+        side: "bottom",
+        align: "stretch",
+        offset: PANEL_OFFSET,
+        minWidth: panelWidth,
+        maxWidth: panelWidth,
+        maxHeight: panelSizing.maxHeight ?? PANEL_MAX_HEIGHT
+      }
+    );
+    panel.style.left = `${layout.left + window.scrollX}px`;
+    panel.style.top = `${layout.top + window.scrollY}px`;
+    panel.style.minWidth = `${layout.width}px`;
+    panel.style.width = `${layout.width}px`;
+    panel.style.maxHeight = `${layout.maxHeight}px`;
+    panel.dataset.side = layout.side;
+  }
   function openPanel() {
     if (isOpen()) return;
+    openSelect?.close();
+    if (panel.parentElement !== document.body) document.body.appendChild(panel);
     panel.hidden = false;
     container.classList.add("is-open");
     trigger.setAttribute("aria-expanded", "true");
+    positionPanel();
+    openSelect = { container, trigger, panel, close: closePanel, reposition: positionPanel };
+    bindOpenListeners();
     if (searchInput) {
       searchInput.value = "";
       filterOptions("");
@@ -109,6 +305,8 @@ function setup(container) {
     container.classList.remove("is-open");
     trigger.setAttribute("aria-expanded", "false");
     setFocus(-1);
+    if (openSelect?.panel === panel) openSelect = null;
+    unbindOpenListeners();
   }
   function getSelectedValues() {
     return allOptions().filter((o) => o.classList.contains("is-selected")).map((o) => o.getAttribute("data-value") ?? "");
@@ -116,19 +314,59 @@ function setup(container) {
   function updateMultiTrigger() {
     if (!valueEl) return;
     const selected = allOptions().filter((o) => o.classList.contains("is-selected"));
+    let chipsEl = trigger.querySelector(".select-chips");
     if (selected.length === 0) {
       valueEl.textContent = placeholder;
       valueEl.classList.add("is-empty");
+      valueEl.hidden = false;
+      if (chipsEl) chipsEl.hidden = true;
       container.removeAttribute("data-value");
     } else {
       valueEl.classList.remove("is-empty");
-      const maxLabel = Number(container.getAttribute("data-select-max-label")) || 2;
-      if (selected.length <= maxLabel) {
-        valueEl.textContent = selected.map((o) => o.textContent ?? "").join("\u3001");
-      } else {
-        valueEl.textContent = `\u5DF2\u9009 ${selected.length} \u9879`;
+      valueEl.hidden = true;
+      if (!chipsEl) {
+        chipsEl = document.createElement("span");
+        chipsEl.className = "select-chips";
+        valueEl.insertAdjacentElement("afterend", chipsEl);
       }
+      chipsEl.hidden = false;
+      chipsEl.textContent = "";
+      const maxLabel = Number(container.getAttribute("data-select-max-label")) || 3;
+      const shown = selected.slice(0, maxLabel);
+      const rest = selected.length - shown.length;
+      for (const o of shown) {
+        const label = o.textContent ?? "";
+        const chip = document.createElement("span");
+        chip.className = "select-chip";
+        const lb = document.createElement("span");
+        lb.textContent = label;
+        chip.appendChild(lb);
+        const x = document.createElement("span");
+        x.className = "select-chip-x";
+        x.setAttribute("role", "button");
+        x.setAttribute("tabindex", "-1");
+        x.setAttribute("aria-label", `\u79FB\u9664 ${label}`);
+        x.textContent = "\xD7";
+        on(x, "pointerdown", (ev) => ev.stopPropagation());
+        on(x, "click", (ev) => {
+          ev.stopPropagation();
+          ev.preventDefault();
+          o.classList.remove("is-selected");
+          updateMultiTrigger();
+          syncHiddenInput();
+        });
+        chip.appendChild(x);
+        chipsEl.appendChild(chip);
+      }
+      if (rest > 0) {
+        const more = document.createElement("span");
+        more.className = "select-chip select-chip--more";
+        more.textContent = `+${rest}`;
+        chipsEl.appendChild(more);
+      }
+      container.setAttribute("data-value", getSelectedValues().join(","));
     }
+    if (clearBtn) clearBtn.hidden = selected.length === 0;
     if (maxSelect > 0) {
       const atMax = selected.length >= maxSelect;
       allOptions().forEach((o) => {
@@ -139,8 +377,10 @@ function setup(container) {
     }
   }
   function syncHiddenInput() {
-    if (!hiddenInput) return;
     const values = getSelectedValues();
+    const label = allOptions().filter((o) => o.classList.contains("is-selected")).map((o) => (o.textContent ?? "").trim()).join(", ");
+    emitIcen(container, "icen:select-change", { value: values[0] ?? "", values, label });
+    if (!hiddenInput) return;
     hiddenInput.value = isMultiple ? values.join(",") : values[0] ?? "";
     hiddenInput.dispatchEvent(new Event("change", { bubbles: true }));
   }
@@ -171,16 +411,16 @@ function setup(container) {
   }
   const clearBtn = container.querySelector(".select-clear");
   if (clearBtn && isMultiple) {
-    clearBtn.addEventListener("click", (ev) => {
+    on(clearBtn, "click", (ev) => {
       ev.stopPropagation();
       allOptions().forEach((o) => o.classList.remove("is-selected"));
       updateMultiTrigger();
       syncHiddenInput();
     });
-    clearBtn.addEventListener("pointerdown", (ev) => ev.stopPropagation());
+    on(clearBtn, "pointerdown", (ev) => ev.stopPropagation());
   }
-  trigger.addEventListener("click", () => isOpen() ? closePanel() : openPanel());
-  trigger.addEventListener("keydown", (ev) => {
+  on(trigger, "click", () => isOpen() ? closePanel() : openPanel());
+  on(trigger, "keydown", (ev) => {
     if (!isOpen()) {
       if (ev.key === "ArrowDown" || ev.key === "ArrowUp" || ev.key === "Enter" || ev.key === " ") {
         ev.preventDefault();
@@ -188,20 +428,6 @@ function setup(container) {
       }
       return;
     }
-    if (searchInput && document.activeElement === searchInput) {
-      if (ev.key === "ArrowDown") {
-        ev.preventDefault();
-        moveFocus(1);
-      } else if (ev.key === "ArrowUp") {
-        ev.preventDefault();
-        moveFocus(-1);
-      } else if (ev.key === "Enter") {
-        ev.preventDefault();
-        const opt = visibleOptions()[focusIdx];
-        if (opt) choose(opt);
-      }
-      return;
-    }
     switch (ev.key) {
       case "ArrowDown":
         ev.preventDefault();
@@ -224,13 +450,13 @@ function setup(container) {
         break;
     }
   });
-  panel.addEventListener("click", (ev) => {
+  on(panel, "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) => {
+  on(panel, "mouseover", (ev) => {
     const t = ev.target;
     if (!(t instanceof Element)) return;
     const opt = t.closest(".select-option");
@@ -238,23 +464,39 @@ function setup(container) {
     const idx = visibleOptions().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();
-    }
-  });
   if (isMultiple) updateMultiTrigger();
+  return () => {
+    if (openSelect?.panel === panel) closePanel();
+    ac.abort();
+    el.__icenSelectInit = false;
+  };
 }
-function initSelect(root = document) {
-  if (typeof document === "undefined") return;
+var activeSetups = /* @__PURE__ */ new Set();
+function initSelect(root) {
+  if (typeof document === "undefined") return () => {
+  };
+  const scope = root ?? document;
+  bindGlobalListeners();
   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);
+  if (scope instanceof Element && scope.matches("[data-select]")) containers.push(scope);
+  containers.push(...Array.from(scope.querySelectorAll("[data-select]")));
+  const disposers = [];
+  for (const c of containers) {
+    const dispose = setup(c);
+    activeSetups.add(dispose);
+    disposers.push(dispose);
+  }
+  return () => {
+    for (const d of disposers) {
+      d();
+      activeSetups.delete(d);
+    }
+    if (activeSetups.size === 0 && globalBound) {
+      document.removeEventListener("pointerdown", onGlobalPointerDown);
+      document.removeEventListener("keydown", onGlobalKeyDown);
+      globalBound = false;
+    }
+  };
 }
 export {
   initSelect

package/dist/behaviors/sidebar.d.mts

@@ -0,0 +1,7 @@
+/**
+ * 为 root 下每个 .sidebar 初始化（root 自身是 .sidebar 也算）。
+ * 返回销毁函数：移除本次挂上的容器监听并复位幂等标记（销毁后可重新 init）。SSR 下返回 no-op。
+ */
+declare function initSidebar(root?: ParentNode): () => void;
+
+export { initSidebar };