@greypan/web-ui 5.0.0 → 6.1.0

package/dist/components/collapse/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/collapse/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport { UserChangeController } from '@/shared/events/user-change'\nimport { getTransitionDuration } from '@/shared/overlay/presence'\n\nimport style from './style.css?inline'\n\nconst EXIT_FALLBACK_BUFFER = 80\n\nlet collapseIdCounter = 0\n\n/**\n * 文档流内折叠面板：trigger 经默认 slot 提供，内容经 `slot=\"content\"` 提供。\n *\n * trigger 语义完全来自 slot 进来的交互元素（原生 button / web-ui-button 等）：\n * Enter/Space 激活走该元素的原生 click，不做 role=\"button\" 补齐；组件把\n * `aria-expanded` / `aria-controls` / `aria-disabled` 回写到首个 assigned\n * element（与 popover trigger 的既定回写模式一致）。wrapper 仅负责点击代理，\n * 不可聚焦，不承载 ARIA。\n *\n * 内容区在 shadow 内以 grid `0fr ↔ 1fr` track 过渡驱动高度/宽度动画（ADR-0038\n * 选型保留）。关闭稳态三态（消费者 light DOM 永不移动，hidden 全部命令式管理，\n * 避免渲染绑定在关闭动画起点抢先 display:none）：\n * - 默认：content 容器 `hidden`（display:none，脱离渲染与可访问性树）；\n * - `keep-mounted`：inner `inert`（保留在 0fr 轨道内，滚动位置与布局可测量）；\n * - 动画进行中：inner `inert` + track pointer-events 禁用，结束后进入对应稳态。\n */\n@customElement('web-ui-collapse')\nexport class WebUiCollapse extends LitElement {\n  static override styles = unsafeCSS(style)\n\n  /** 展开状态；严格受控，唯一状态源。 */\n  @property({ type: Boolean, reflect: true }) open = false\n\n  /** 禁用触发：点击忽略、aria-disabled 写入 trigger 元素；已展开内容保持现状。 */\n  @property({ type: Boolean, reflect: true }) disabled = false\n\n  /** 水平方向：true 时沿宽度展开，默认沿高度。 */\n  @property({ type: Boolean, reflect: true }) horizontal = false\n\n  /** 关闭稳态保持内容 `inert` 而非 `hidden`（保留滚动位置，可测量）。 */\n  @property({ type: Boolean, reflect: true, attribute: 'keep-mounted' }) keepMounted = false\n\n  @query('.wui-collapse-trigger-wrapper') private _triggerWrapper!: HTMLElement\n\n  private _contentId = `wui-collapse-content-${++collapseIdCounter}`\n\n  private readonly _userOpenChange = new UserChangeController()\n\n  private _exitTimer?: ReturnType<typeof setTimeout>\n  // 动画代际：每次管线启动自增，旧管线的 transitionend/兜底定时器/rAF 全部失效。\n  private _generation = 0\n  private _lastOpen?: boolean\n\n  override connectedCallback() {\n    super.connectedCallback()\n    // 点击监听与生命周期同寿（宿主移除即整体销毁），无需 disconnected 清理。\n    this.addEventListener('click', this._onTriggerClick)\n    // 断连可能打断动画管线（瞬态残留：presence='closing'、容器未 hidden）。\n    // 首次连接不必处理（初始 render 走 _lastOpen===undefined 落稳态，请求多余\n    // 渲染会触发「scheduled an update after update completed」告警）；重连时\n    // 重置同步状态并强制一轮 update，由首次同步分支重新落稳态、丢弃在途管线。\n    if (this.hasUpdated) {\n      this._generation++\n      this._clearExitTimer()\n      this._lastOpen = undefined\n      this.requestUpdate()\n    }\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    this._clearExitTimer()\n  }\n\n  protected override updated(changed: Map<string, unknown>) {\n    // ARIA 回写不依赖 open 分支，任何渲染后都保持与宿主状态同步。\n    this._syncTriggerAria()\n\n    // 首次同步（含 open 为默认值的场景，changed map 不含默认值属性）：\n    // 直接落到正确稳态，不播动画（popover 初始 open 同款）。\n    if (this._lastOpen === undefined) {\n      this._lastOpen = this.open\n      if (this.open) this._applyOpenSteadyState()\n      else this._applyClosedSteadyState()\n      return\n    }\n\n    if (changed.has('keepMounted') && !this.open) {\n      // 运行态切换 keep-mounted：关闭稳态需在 hidden/inert 间重新落地。\n      this._applyClosedSteadyState()\n    }\n    if (!changed.has('open') || this.open === this._lastOpen) return\n\n    this._lastOpen = this.open\n    if (this._userOpenChange.consume()) this._dispatchChange(this.open)\n    if (this.open) this._beginExpand()\n    else this._beginCollapse()\n  }\n\n  show() {\n    if (this.open) return\n    this.open = true\n  }\n\n  close() {\n    if (!this.open) return\n    this.open = false\n  }\n\n  toggle() {\n    if (this.open) this.close()\n    else this.show()\n  }\n\n  // ===== trigger slot =====\n\n  private _dispatchChange(open: boolean) {\n    this.dispatchEvent(\n      new CustomEvent('open-change', {\n        detail: { open },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  /*\n   * 点击代理：冒泡路径穿过 trigger wrapper 的 click 一律切换。语义由 slot 内\n   * 的交互元素（原生 button / web-ui-button）提供；slot 放纯文本时无激活语义\n   * （README 约定）。内容区与嵌套内层 collapse 的 click 不经过本 wrapper，天然隔离。\n   */\n  private _onTriggerClick = (event: MouseEvent) => {\n    if (this.disabled) return\n    if (!event.composedPath().includes(this._triggerWrapper)) return\n    this._userOpenChange.mark()\n    this.toggle()\n  }\n\n  /*\n   * Trigger 元素取首个 assigned element（与 popover `_queryTrigger` 同款惰性查询，\n   * 不依赖 slotchange——jsdom 不派发该事件，无法用状态缓存）。slot 为空时无回写目标。\n   */\n  private _queryTrigger(): HTMLElement | null {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('.wui-collapse-trigger-wrapper slot')\n    const el = slot?.assignedElements()[0]\n    return el instanceof HTMLElement ? el : null\n  }\n\n  /*\n   * slot 内容增删不触发宿主响应式更新：显式请求一轮渲染，由 updated() 的\n   * ARIA 回写覆盖晚到的 trigger 元素（slotchange 在 jsdom 不派发，无法监听）。\n   */\n  private readonly _onTriggerSlotChange = () => {\n    this.requestUpdate()\n  }\n\n  // ARIA 状态回写到 trigger 元素本身（wrapper 不可聚焦，AT 读不到）。\n  private _syncTriggerAria() {\n    const trigger = this._queryTrigger()\n    if (!trigger) return\n    trigger.setAttribute('aria-expanded', String(this.open))\n    trigger.setAttribute('aria-controls', this._contentId)\n    if (this.disabled) trigger.setAttribute('aria-disabled', 'true')\n    else trigger.removeAttribute('aria-disabled')\n  }\n\n  // ===== 内容区动画管线（三态语义自 ADR-0038 迁移） =====\n\n  private _applyOpenSteadyState() {\n    this._generation++\n    this._clearExitTimer()\n    const container = this._contentContainer()\n    const track = this._contentTrack()\n    if (container) container.hidden = false\n    if (track) {\n      track.dataset.wuiPresence = 'open'\n      this._setInnerInert(false)\n    }\n  }\n\n  private _applyClosedSteadyState() {\n    this._generation++\n    this._clearExitTimer()\n    const container = this._contentContainer()\n    const track = this._contentTrack()\n    if (track) delete track.dataset.wuiPresence\n    if (this.keepMounted) {\n      if (container) container.hidden = false\n      this._setInnerInert(true)\n      return\n    }\n    this._setInnerInert(false)\n    if (container) container.hidden = true\n  }\n\n  private _beginExpand() {\n    this._generation++\n    this._clearExitTimer()\n    const container = this._contentContainer()\n    const track = this._contentTrack()\n    if (!container || !track) return\n\n    const generation = this._generation\n    // 中断关闭动画时 inner 已 inert：先恢复可交互，内容随展开重新可见。\n    this._setInnerInert(false)\n    // 从 display:none 进入时无先前计算样式可过渡：提交 0fr 起点后再翻转。\n    container.hidden = false\n    void track.offsetWidth\n\n    requestAnimationFrame(() => {\n      if (generation !== this._generation || !this.open) return\n      track.dataset.wuiPresence = 'open'\n      this._awaitTransition(track, generation, () => this._settle(true))\n    })\n  }\n\n  private _beginCollapse() {\n    this._generation++\n    this._clearExitTimer()\n    const track = this._contentTrack()\n    if (!track) return\n\n    // 收起期间立即阻断交互，防止焦点落入正在消失的区域。\n    this._setInnerInert(true)\n    track.dataset.wuiPresence = 'closing'\n    const generation = this._generation\n    this._awaitTransition(track, generation, () => this._settle(false))\n  }\n\n  // 关闭稳态：keep-mounted → 内容保留在 0fr 轨道内并 inert；默认 → 容器 hidden。\n  private _settle(open: boolean) {\n    this._clearExitTimer()\n    if (open) {\n      this._setInnerInert(false)\n      return\n    }\n    // 落稳态必须清除 closing 瞬态标记：否则 track 永久保留 pointer-events:none\n    // 与 exit 过渡配置（keep-mounted 分支同样清除，避免残留）。\n    const track = this._contentTrack()\n    if (track) delete track.dataset.wuiPresence\n    if (this.keepMounted) return\n    const container = this._contentContainer()\n    this._setInnerInert(false)\n    if (container) container.hidden = true\n  }\n\n  // 等待 grid-template-rows/columns 过渡结束；时长为 0（reduced motion、jsdom）\n  // 直接稳态，transitionend 不触发时按时长 + 缓冲兜底。\n  private _awaitTransition(track: HTMLElement, generation: number, onDone: () => void) {\n    const duration = getTransitionDuration(track, 0)\n    if (duration === 0) {\n      if (generation === this._generation) onDone()\n      return\n    }\n\n    let settled = false\n    const finish = () => {\n      track.removeEventListener('transitionend', onTransitionEnd)\n      if (this._exitTimer === timer) this._exitTimer = undefined\n      clearTimeout(timer)\n      // 过渡可能被属性匹配的后续动画触发（如中断重开）：代际不符时静默退场。\n      if (settled || generation !== this._generation) return\n      settled = true\n      onDone()\n    }\n    const timer = setTimeout(finish, duration + EXIT_FALLBACK_BUFFER)\n    this._exitTimer = timer\n\n    const onTransitionEnd = (event: TransitionEvent) => {\n      if (\n        event.target === track &&\n        (event.propertyName === 'grid-template-rows' || event.propertyName === 'grid-template-columns')\n      )\n        finish()\n    }\n    track.addEventListener('transitionend', onTransitionEnd)\n  }\n\n  private _clearExitTimer() {\n    if (this._exitTimer !== undefined) {\n      clearTimeout(this._exitTimer)\n      this._exitTimer = undefined\n    }\n  }\n\n  private _setInnerInert(inert: boolean) {\n    this.shadowRoot?.querySelector<HTMLElement>('.wui-collapse-inner')?.toggleAttribute('inert', inert)\n  }\n\n  private _contentContainer(): HTMLElement | null {\n    return this.shadowRoot?.querySelector<HTMLElement>('.wui-collapse-content') ?? null\n  }\n\n  private _contentTrack(): HTMLElement | null {\n    return this.shadowRoot?.querySelector<HTMLElement>('.wui-collapse-track') ?? null\n  }\n\n  override render() {\n    // 三态由 data-wui-presence 驱动（open/closing），缺省即关闭稳态。\n    const trackClass = {\n      'wui-collapse-track': true,\n      'is-horizontal': this.horizontal\n    }\n\n    return html`\n      <div class=\"wui-collapse-trigger-wrapper\" @slotchange=${this._onTriggerSlotChange}><slot></slot></div>\n      <div class=\"wui-collapse-content\">\n        <div class=${classMap(trackClass)} id=${this._contentId}>\n          <div class=\"wui-collapse-inner\">\n            <slot name=\"content\"></slot>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  declare readonly $events: {\n    'open-change': CustomEvent<{ open: boolean }>\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-collapse': WebUiCollapse\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/collapse/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport { UserChangeController } from '@/shared/events/user-change'\nimport { dispatchOpenChangeEvent } from '@/shared/open-state'\nimport { getTransitionDuration } from '@/shared/overlay/presence'\n\nimport style from './style.css?inline'\n\nconst EXIT_FALLBACK_BUFFER = 80\n\nlet collapseIdCounter = 0\n\n/**\n * 文档流内折叠面板：trigger 经默认 slot 提供，内容经 `slot=\"content\"` 提供。\n *\n * trigger 语义完全来自 slot 进来的交互元素（原生 button / web-ui-button 等）：\n * Enter/Space 激活走该元素的原生 click，不做 role=\"button\" 补齐；组件把\n * `aria-expanded` / `aria-controls` / `aria-disabled` 回写到首个 assigned\n * element（与 popover trigger 的既定回写模式一致）。wrapper 仅负责点击代理，\n * 不可聚焦，不承载 ARIA。\n *\n * 内容区在 shadow 内以 grid `0fr ↔ 1fr` track 过渡驱动高度/宽度动画（ADR-0038\n * 选型保留）。关闭稳态三态（消费者 light DOM 永不移动，hidden 全部命令式管理，\n * 避免渲染绑定在关闭动画起点抢先 display:none）：\n * - 默认：content 容器 `hidden`（display:none，脱离渲染与可访问性树）；\n * - `keep-mounted`：inner `inert`（保留在 0fr 轨道内，滚动位置与布局可测量）；\n * - 动画进行中：inner `inert` + track pointer-events 禁用，结束后进入对应稳态。\n */\n@customElement('web-ui-collapse')\nexport class WebUiCollapse extends LitElement {\n  static override styles = unsafeCSS(style)\n\n  /** 展开状态；严格受控，唯一状态源。 */\n  @property({ type: Boolean, reflect: true }) open = false\n\n  /** 禁用触发：点击忽略、aria-disabled 写入 trigger 元素；已展开内容保持现状。 */\n  @property({ type: Boolean, reflect: true }) disabled = false\n\n  /** 水平方向：true 时沿宽度展开，默认沿高度。 */\n  @property({ type: Boolean, reflect: true }) horizontal = false\n\n  /** 关闭稳态保持内容 `inert` 而非 `hidden`（保留滚动位置，可测量）。 */\n  @property({ type: Boolean, reflect: true, attribute: 'keep-mounted' }) keepMounted = false\n\n  @query('.wui-collapse-trigger-wrapper') private _triggerWrapper!: HTMLElement\n\n  private _contentId = `wui-collapse-content-${++collapseIdCounter}`\n\n  private readonly _userOpenChange = new UserChangeController()\n\n  private _exitTimer?: ReturnType<typeof setTimeout>\n  // 动画代际：每次管线启动自增，旧管线的 transitionend/兜底定时器/rAF 全部失效。\n  private _generation = 0\n  private _lastOpen?: boolean\n\n  override connectedCallback() {\n    super.connectedCallback()\n    // 点击监听与生命周期同寿（宿主移除即整体销毁），无需 disconnected 清理。\n    this.addEventListener('click', this._onTriggerClick)\n    // 断连可能打断动画管线（瞬态残留：presence='closing'、容器未 hidden）。\n    // 首次连接不必处理（初始 render 走 _lastOpen===undefined 落稳态，请求多余\n    // 渲染会触发「scheduled an update after update completed」告警）；重连时\n    // 重置同步状态并强制一轮 update，由首次同步分支重新落稳态、丢弃在途管线。\n    if (this.hasUpdated) {\n      this._generation++\n      this._clearExitTimer()\n      this._lastOpen = undefined\n      this.requestUpdate()\n    }\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    this._clearExitTimer()\n  }\n\n  protected override updated(changed: Map<string, unknown>) {\n    // ARIA 回写不依赖 open 分支，任何渲染后都保持与宿主状态同步。\n    this._syncTriggerAria()\n\n    // 首次同步（含 open 为默认值的场景，changed map 不含默认值属性）：\n    // 直接落到正确稳态，不播动画（popover 初始 open 同款）。\n    if (this._lastOpen === undefined) {\n      this._lastOpen = this.open\n      if (this.open) this._applyOpenSteadyState()\n      else this._applyClosedSteadyState()\n      return\n    }\n\n    if (changed.has('keepMounted') && !this.open) {\n      // 运行态切换 keep-mounted：关闭稳态需在 hidden/inert 间重新落地。\n      this._applyClosedSteadyState()\n    }\n    if (!changed.has('open') || this.open === this._lastOpen) return\n\n    this._lastOpen = this.open\n    if (this._userOpenChange.consume()) this._dispatchChange(this.open)\n    if (this.open) this._beginExpand()\n    else this._beginCollapse()\n  }\n\n  show() {\n    if (this.open) return\n    this.open = true\n  }\n\n  close() {\n    if (!this.open) return\n    this.open = false\n  }\n\n  toggle() {\n    if (this.open) this.close()\n    else this.show()\n  }\n\n  // ===== trigger slot =====\n\n  private _dispatchChange(open: boolean) {\n    dispatchOpenChangeEvent(this, open)\n  }\n\n  /*\n   * 点击代理：冒泡路径穿过 trigger wrapper 的 click 一律切换。语义由 slot 内\n   * 的交互元素（原生 button / web-ui-button）提供；slot 放纯文本时无激活语义\n   * （README 约定）。内容区与嵌套内层 collapse 的 click 不经过本 wrapper，天然隔离。\n   */\n  private _onTriggerClick = (event: MouseEvent) => {\n    if (this.disabled) return\n    if (!event.composedPath().includes(this._triggerWrapper)) return\n    this._userOpenChange.mark()\n    this.toggle()\n  }\n\n  /*\n   * Trigger 元素取首个 assigned element（与 popover `_queryTrigger` 同款惰性查询，\n   * 不依赖 slotchange——jsdom 不派发该事件，无法用状态缓存）。slot 为空时无回写目标。\n   */\n  private _queryTrigger(): HTMLElement | null {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('.wui-collapse-trigger-wrapper slot')\n    const el = slot?.assignedElements()[0]\n    return el instanceof HTMLElement ? el : null\n  }\n\n  /*\n   * slot 内容增删不触发宿主响应式更新：显式请求一轮渲染，由 updated() 的\n   * ARIA 回写覆盖晚到的 trigger 元素（slotchange 在 jsdom 不派发，无法监听）。\n   */\n  private readonly _onTriggerSlotChange = () => {\n    this.requestUpdate()\n  }\n\n  // ARIA 状态回写到 trigger 元素本身（wrapper 不可聚焦，AT 读不到）。\n  private _syncTriggerAria() {\n    const trigger = this._queryTrigger()\n    if (!trigger) return\n    trigger.setAttribute('aria-expanded', String(this.open))\n    trigger.setAttribute('aria-controls', this._contentId)\n    if (this.disabled) trigger.setAttribute('aria-disabled', 'true')\n    else trigger.removeAttribute('aria-disabled')\n  }\n\n  // ===== 内容区动画管线（三态语义自 ADR-0038 迁移） =====\n\n  private _applyOpenSteadyState() {\n    this._generation++\n    this._clearExitTimer()\n    const container = this._contentContainer()\n    const track = this._contentTrack()\n    if (container) container.hidden = false\n    if (track) {\n      track.dataset.wuiPresence = 'open'\n      this._setInnerInert(false)\n    }\n  }\n\n  private _applyClosedSteadyState() {\n    this._generation++\n    this._clearExitTimer()\n    const container = this._contentContainer()\n    const track = this._contentTrack()\n    if (track) delete track.dataset.wuiPresence\n    if (this.keepMounted) {\n      if (container) container.hidden = false\n      this._setInnerInert(true)\n      return\n    }\n    this._setInnerInert(false)\n    if (container) container.hidden = true\n  }\n\n  private _beginExpand() {\n    this._generation++\n    this._clearExitTimer()\n    const container = this._contentContainer()\n    const track = this._contentTrack()\n    if (!container || !track) return\n\n    const generation = this._generation\n    // 中断关闭动画时 inner 已 inert：先恢复可交互，内容随展开重新可见。\n    this._setInnerInert(false)\n    // 从 display:none 进入时无先前计算样式可过渡：提交 0fr 起点后再翻转。\n    container.hidden = false\n    void track.offsetWidth\n\n    requestAnimationFrame(() => {\n      if (generation !== this._generation || !this.open) return\n      track.dataset.wuiPresence = 'open'\n      this._awaitTransition(track, generation, () => this._settle(true))\n    })\n  }\n\n  private _beginCollapse() {\n    this._generation++\n    this._clearExitTimer()\n    const track = this._contentTrack()\n    if (!track) return\n\n    // 收起期间立即阻断交互，防止焦点落入正在消失的区域。\n    this._setInnerInert(true)\n    track.dataset.wuiPresence = 'closing'\n    const generation = this._generation\n    this._awaitTransition(track, generation, () => this._settle(false))\n  }\n\n  // 关闭稳态：keep-mounted → 内容保留在 0fr 轨道内并 inert；默认 → 容器 hidden。\n  private _settle(open: boolean) {\n    this._clearExitTimer()\n    if (open) {\n      this._setInnerInert(false)\n      return\n    }\n    // 落稳态必须清除 closing 瞬态标记：否则 track 永久保留 pointer-events:none\n    // 与 exit 过渡配置（keep-mounted 分支同样清除，避免残留）。\n    const track = this._contentTrack()\n    if (track) delete track.dataset.wuiPresence\n    if (this.keepMounted) return\n    const container = this._contentContainer()\n    this._setInnerInert(false)\n    if (container) container.hidden = true\n  }\n\n  // 等待 grid-template-rows/columns 过渡结束；时长为 0（reduced motion、jsdom）\n  // 直接稳态，transitionend 不触发时按时长 + 缓冲兜底。\n  private _awaitTransition(track: HTMLElement, generation: number, onDone: () => void) {\n    const duration = getTransitionDuration(track, 0)\n    if (duration === 0) {\n      if (generation === this._generation) onDone()\n      return\n    }\n\n    let settled = false\n    const finish = () => {\n      track.removeEventListener('transitionend', onTransitionEnd)\n      if (this._exitTimer === timer) this._exitTimer = undefined\n      clearTimeout(timer)\n      // 过渡可能被属性匹配的后续动画触发（如中断重开）：代际不符时静默退场。\n      if (settled || generation !== this._generation) return\n      settled = true\n      onDone()\n    }\n    const timer = setTimeout(finish, duration + EXIT_FALLBACK_BUFFER)\n    this._exitTimer = timer\n\n    const onTransitionEnd = (event: TransitionEvent) => {\n      if (\n        event.target === track &&\n        (event.propertyName === 'grid-template-rows' || event.propertyName === 'grid-template-columns')\n      )\n        finish()\n    }\n    track.addEventListener('transitionend', onTransitionEnd)\n  }\n\n  private _clearExitTimer() {\n    if (this._exitTimer !== undefined) {\n      clearTimeout(this._exitTimer)\n      this._exitTimer = undefined\n    }\n  }\n\n  private _setInnerInert(inert: boolean) {\n    this.shadowRoot?.querySelector<HTMLElement>('.wui-collapse-inner')?.toggleAttribute('inert', inert)\n  }\n\n  private _contentContainer(): HTMLElement | null {\n    return this.shadowRoot?.querySelector<HTMLElement>('.wui-collapse-content') ?? null\n  }\n\n  private _contentTrack(): HTMLElement | null {\n    return this.shadowRoot?.querySelector<HTMLElement>('.wui-collapse-track') ?? null\n  }\n\n  override render() {\n    // 三态由 data-wui-presence 驱动（open/closing），缺省即关闭稳态。\n    const trackClass = {\n      'wui-collapse-track': true,\n      'is-horizontal': this.horizontal\n    }\n\n    return html`\n      <div class=\"wui-collapse-trigger-wrapper\" @slotchange=${this._onTriggerSlotChange}><slot></slot></div>\n      <div class=\"wui-collapse-content\">\n        <div class=${classMap(trackClass)} id=${this._contentId}>\n          <div class=\"wui-collapse-inner\">\n            <slot name=\"content\"></slot>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  declare readonly $events: {\n    'open-change': CustomEvent<{ open: boolean }>\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-collapse': WebUiCollapse\n  }\n}\n"],"mappings":"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"}

package/dist/components/context-menu/index.d.ts

@@ -9,12 +9,12 @@ export declare class WebUiContextMenu extends LitElement {
     private _activeSubmenus;
     private _activeSubmenuItems;
     private readonly _submenuPositionEpochs;
-    private readonly _closingSubmenus;
-    private _submenuTimer?;
-    private _ignoreOutsideClick;
-    private _ignoreOutsideClickTimer?;
-    private _hoverCleanupFns;
     private _menu?;
+    private readonly _outsideClickGuard;
+    private readonly _closingSubmenus;
+    private readonly _hoverDelegate;
+    private readonly _hoverBinder;
+    private readonly _keyboardDelegate;
     private readonly _menuItemAnchors;
     private readonly _scrollLock;
     private readonly _userOpenChange;
@@ -47,56 +47,28 @@ export declare class WebUiContextMenu extends LitElement {
     private _applyMenuPosition;
     private _focusFirstItem;
     private _setupMenuItems;
-    /**
-     * 捕获框架 v-if 注释锚点相对其后继元素的绑定，供重排后复位。
-     * 后继以 nextElementSibling 解析（跳过注释/文本，多个相邻锚点绑定同一后继）。
-     * 锚点在 content 末尾、无后继元素时记为 null（尾部锚点，复位时保持末尾）。
-     */
-    private _captureFrameworkAnchors;
-    /**
-     * 把锚点复位到捕获时其后继元素之前（尾部锚点保持末尾）。
-     * 元素重排用 insertBefore/appendChild 不会移动注释，锚点必须显式复位，
-     * 否则脱离模板位置后 Vue 下次 v-if 翻转会把新分支项插到错误插入点。
-     */
-    private _restoreFrameworkAnchors;
-    /**
-     * 全集 reconcile：以「content 现有元素 ∪ 宿主元素」为托管全集。
-     * 框架（如 Vue 的 v-if 翻转）可能不经宿主直接改写 portal 内节点——卸载旧项留下
-     * 注释锚点、把新项直接插进 content——它们都会被这里收编（补 marker + 补隐藏），
-     * 已被框架删除/移出两处的条目则被清理。
-     */
-    private _syncManagedItems;
-    private _orderMenuItems;
     private _returnItemsToSlot;
     private _closeMenuAfterPresence;
     private _hideMenuItems;
     private _openSubmenu;
     private _closeSubmenusFrom;
-    private _closeSubmenuAfterPresence;
     private _restoreSubmenuItems;
-    private _restoreClosingSubmenus;
     private _getItemLevel;
     private _positionSubmenu;
     private _dispatchChange;
-    private _isInsideShadowRoot;
     private _onContextMenu;
     private _onContextMenuOutside;
     private _onKeydown;
     private _onClickOutside;
     private _onMenuClick;
+    private _getLevelContainer;
     private _getLevelItems;
-    private _bindLevelHovers;
-    private _ignoreCurrentOutsideClick;
     private _onWheel;
     private _onTouchMove;
     private _onDocumentKeydown;
     private _closeLastSubmenuOrMenu;
     private _preventBackgroundScroll;
     private _syncScrollLock;
-    private _getEnabledLevelItems;
-    private _getFocusedItem;
-    private _getFocusedLevel;
-    private _focusMenuItem;
     private _isMenuPanelEvent;
     render(): import('lit').TemplateResult<1>;
     private _onSlotChange;

package/dist/components/context-menu/index.js

@@ -1,27 +1,56 @@
 import e from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
-import { computePosition as t, shift as n } from "../../node_modules/.pnpm/@floating-ui_dom@1.8.0/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
-import { hideOverlayPresence as r, showOverlayPresence as i } from "../../shared/overlay/presence.js";
-import { defineScrollLockLease as a } from "../../shared/scroll-lock/scroll-lock.js";
-import { UserChangeController as o } from "../../shared/events/user-change.js";
+import { dispatchOpenChangeEvent as t } from "../../shared/open-state/index.js";
+import { computePosition as n, shift as r } from "../../node_modules/.pnpm/@floating-ui_dom@1.8.0/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { hideOverlayPresence as i, showOverlayPresence as a } from "../../shared/overlay/presence.js";
+import { defineScrollLockLease as o } from "../../shared/scroll-lock/scroll-lock.js";
+import { UserChangeController as s } from "../../shared/events/user-change.js";
 import "../dropdown-divider/index.js";
 import "../dropdown-header/index.js";
 import "../dropdown-item/index.js";
-import { createMenuPortalOverlay as s } from "../../shared/menu-portal/menu-portal.js";
-import { findFocusedMenuItem as c, focusMenuItem as l, getEnabledMenuItems as u, getMenuChildren as d, getMenuItemFromEvent as f, getMovableMenuSubtrees as p, hideNestedMenuChildren as m, moveMenuChildren as h } from "../../shared/menu-portal/menu-tree.js";
-import g from "./style.js";
-import { LitElement as _, html as v, unsafeCSS as y } from "lit";
-import { customElement as b, property as x, state as S } from "lit/decorators.js";
+import { captureFrameworkAnchors as c, focusMenuItem as l, getMenuChildren as u, getMenuItemFromEvent as d, hideNestedMenuChildren as f, moveMenuChildren as p, orderManagedMenuItems as m, reconcileManagedMenuItems as h, restoreFrameworkAnchors as g, returnManagedMenuItemsToSlot as _ } from "../../shared/menu-portal/menu-tree.js";
+import { createClosingSubmenuStack as v, createMenuHoverBinder as y, createMenuOutsideClickGuard as b, getEnabledMenuLevelItems as x, getFocusedMenuItemFromPanels as S, handleMenuKeyboard as C } from "../../shared/menu-behavior/index.js";
+import { createMenuPortalOverlay as w } from "../../shared/menu-portal/menu-portal.js";
+import T from "./style.js";
+import { LitElement as E, html as D, unsafeCSS as O } from "lit";
+import { customElement as k, property as A, state as j } from "lit/decorators.js";
 //#region src/components/context-menu/index.ts
-var C = "wui-context-menu-item", w = class extends _ {
+var M = "wui-context-menu-item", N = class extends E {
 	constructor(...e) {
-		super(...e), this.disabled = !1, this.noScrollLock = !1, this._isOpen = !1, this._x = 0, this._y = 0, this._activeSubmenus = [], this._activeSubmenuItems = [], this._submenuPositionEpochs = /* @__PURE__ */ new WeakMap(), this._closingSubmenus = /* @__PURE__ */ new Map(), this._ignoreOutsideClick = !1, this._hoverCleanupFns = [], this._menuItemAnchors = /* @__PURE__ */ new Map(), this._scrollLock = a().make(), this._userOpenChange = new o(), this._shouldOpenInstantly = !0, this._refreshScheduled = !1, this._contentObserver = new MutationObserver(() => {
+		super(...e), this.disabled = !1, this.noScrollLock = !1, this._isOpen = !1, this._x = 0, this._y = 0, this._activeSubmenus = [], this._activeSubmenuItems = [], this._submenuPositionEpochs = /* @__PURE__ */ new WeakMap(), this._outsideClickGuard = b(this, (e) => this._menu?.panel.contains(e) === !0 || this._activeSubmenus.some((t) => t.panel.contains(e))), this._closingSubmenus = v({
+			getPanel: (e) => e.panel,
+			restoreItems: (e, t) => this._restoreSubmenuItems(e, t),
+			dispose: (e) => e.panel.remove()
+		}), this._hoverDelegate = {
+			getOpenDepth: () => this._activeSubmenus.length,
+			getLevelItems: (e) => this._getLevelItems(e),
+			getActiveItem: (e) => this._activeSubmenuItems[e],
+			isSubmenuItem: (e) => e.hasAttribute("submenu"),
+			openSubmenu: (e) => this._openSubmenu(e),
+			closeFrom: (e) => {
+				this._closeSubmenusFrom(e), this._hoverBinder.bind();
+			}
+		}, this._hoverBinder = y(this._hoverDelegate, "web-ui-dropdown-item"), this._keyboardDelegate = {
+			getFocusedItem: (e) => S(e, [this._menu?.content, ...this._activeSubmenus.map((e) => e.content)], "web-ui-dropdown-item"),
+			getLevelOf: (e) => {
+				let t = this._getItemLevel(e);
+				return t === -1 ? void 0 : t;
+			},
+			getEnabledItems: (e) => x(this._getLevelContainer(e)?.content),
+			isSubmenuItem: (e) => e.hasAttribute("submenu"),
+			openSubmenuInstant: (e) => this._openSubmenu(e, !0),
+			closeToParent: (e) => {
+				let t = this._activeSubmenuItems[e - 1];
+				return this._closeSubmenusFrom(e - 1), this._hoverBinder.bind(), t;
+			},
+			closeDeepestOrAll: () => this._closeLastSubmenuOrMenu()
+		}, this._menuItemAnchors = /* @__PURE__ */ new Map(), this._scrollLock = o().make(), this._userOpenChange = new s(), this._shouldOpenInstantly = !0, this._refreshScheduled = !1, this._contentObserver = new MutationObserver(() => {
 			this._isOpen && this._scheduleRefresh();
 		}), this._closeFromUser = () => {
 			this._isOpen && (this._userOpenChange.mark(), this.close());
 		}, this._onContextMenu = (e) => {
 			this.disabled || (e.preventDefault(), this._restoreFocusTarget = e.target instanceof HTMLElement ? e.target : void 0, this._openAt(e.clientX, e.clientY, !1) && this._userOpenChange.mark());
 		}, this._onContextMenuOutside = (e) => {
-			this._isOpen && !this._isInsideShadowRoot(e) && this._closeFromUser();
+			this._isOpen && !this._outsideClickGuard.isInside(e) && this._closeFromUser();
 		}, this._onKeydown = (e) => {
 			if (!this.disabled && (e.key === "ContextMenu" || e.shiftKey && e.key === "F10")) {
 				e.preventDefault();
@@ -33,9 +62,9 @@ var C = "wui-context-menu-item", w = class extends _ {
 				return;
 			}
 		}, this._onClickOutside = (e) => {
-			!this._isOpen || this._ignoreOutsideClick || this._isInsideShadowRoot(e) || this._closeFromUser();
+			!this._isOpen || this._outsideClickGuard.isArmed() || this._outsideClickGuard.isInside(e) || this._closeFromUser();
 		}, this._onMenuClick = (e) => {
-			let t = f(e);
+			let t = d(e);
 			if (!(!t || t.hasAttribute("disabled"))) {
 				if (t.hasAttribute("submenu")) {
 					this._openSubmenu(t);
@@ -48,50 +77,11 @@ var C = "wui-context-menu-item", w = class extends _ {
 		}, this._onTouchMove = (e) => {
 			this._preventBackgroundScroll(e);
 		}, this._onDocumentKeydown = (e) => {
-			if (!this._isOpen) return;
-			if (e.key === "Escape") {
-				this._closeLastSubmenuOrMenu(), e.preventDefault();
-				return;
-			}
-			let t = this._getFocusedLevel();
-			if (t === void 0) return;
-			let n = this._getEnabledLevelItems(t), r = this._getFocusedItem(), i = r ? n.indexOf(r) : -1;
-			switch (e.key) {
-				case "ArrowDown":
-					this._focusMenuItem(n[(i + 1 + n.length) % n.length]);
-					break;
-				case "ArrowUp":
-					this._focusMenuItem(n[(i - 1 + n.length) % n.length]);
-					break;
-				case "Home":
-					this._focusMenuItem(n[0]);
-					break;
-				case "End":
-					this._focusMenuItem(n.at(-1));
-					break;
-				case "ArrowRight":
-					r?.hasAttribute("submenu") && (this._openSubmenu(r, !0), requestAnimationFrame(() => this._focusMenuItem(this._getEnabledLevelItems(t + 1)[0])));
-					break;
-				case "ArrowLeft":
-					if (t > 0) {
-						let e = this._activeSubmenuItems[t - 1];
-						this._closeSubmenusFrom(t - 1), this._focusMenuItem(e), this._bindLevelHovers();
-					}
-					break;
-				case "Enter":
-				case " ":
-					r?.click();
-					break;
-				case "Escape":
-					this._closeLastSubmenuOrMenu();
-					break;
-				default: return;
-			}
-			e.preventDefault();
+			this._isOpen && C(this._keyboardDelegate, e);
 		};
 	}
 	static {
-		this.styles = y(g);
+		this.styles = O(T);
 	}
 	get isOpen() {
 		return this._isOpen;
@@ -106,25 +96,25 @@ var C = "wui-context-menu-item", w = class extends _ {
 		}), document.addEventListener("keydown", this._onDocumentKeydown);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.removeEventListener("contextmenu", this._onContextMenu), this.removeEventListener("keydown", this._onKeydown), this.removeEventListener("click", this._onMenuClick), document.removeEventListener("click", this._onClickOutside), document.removeEventListener("contextmenu", this._onContextMenuOutside), document.removeEventListener("wheel", this._onWheel, !0), document.removeEventListener("touchmove", this._onTouchMove, !0), document.removeEventListener("keydown", this._onDocumentKeydown), this._contentObserver.disconnect(), clearTimeout(this._submenuTimer), clearTimeout(this._ignoreOutsideClickTimer), this._hoverCleanupFns.forEach((e) => e()), this._scrollLock.release(), this._returnItemsToSlot(), this._menu?.panel.remove(), this._menu = void 0, this._closeSubmenusFrom(0, !0), this._restoreClosingSubmenus(), this._isOpen = !1, this._restoreFocusTarget = void 0;
+		super.disconnectedCallback(), this.removeEventListener("contextmenu", this._onContextMenu), this.removeEventListener("keydown", this._onKeydown), this.removeEventListener("click", this._onMenuClick), document.removeEventListener("click", this._onClickOutside), document.removeEventListener("contextmenu", this._onContextMenuOutside), document.removeEventListener("wheel", this._onWheel, !0), document.removeEventListener("touchmove", this._onTouchMove, !0), document.removeEventListener("keydown", this._onDocumentKeydown), this._contentObserver.disconnect(), this._outsideClickGuard.dispose(), this._hoverBinder.dispose(), this._scrollLock.release(), this._returnItemsToSlot(), this._menu?.panel.remove(), this._menu = void 0, this._closeSubmenusFrom(0, !0), this._closingSubmenus.restoreAll(), this._isOpen = !1, this._restoreFocusTarget = void 0;
 	}
 	updated(e) {
 		if (!this.isConnected) {
 			this._syncScrollLock(!1);
 			return;
 		}
-		e.has("_isOpen") && (this._isOpen ? (this._syncScrollLock(), this._menu || (this._menu = s("context-menu", this), this._menu.panel.setAttribute("role", "menu"), this._menu.panel.setAttribute("aria-label", "上下文菜单"), this._menu.panel.addEventListener("click", this._onMenuClick)), this._contentObserver.observe(this._menu.content, {
+		e.has("_isOpen") && (this._isOpen ? (this._syncScrollLock(), this._menu || (this._menu = w("context-menu", this), this._menu.panel.setAttribute("role", "menu"), this._menu.panel.setAttribute("aria-label", "上下文菜单"), this._menu.panel.addEventListener("click", this._onMenuClick)), this._contentObserver.observe(this._menu.content, {
 			childList: !0,
 			subtree: !0
 		}), requestAnimationFrame(() => {
-			!this._isOpen || !this._menu || (this._refreshMenu(), i(this._menu.panel, { isInstant: this._shouldOpenInstantly }), this._shouldOpenInstantly = !0, this._focusFirstItem());
+			!this._isOpen || !this._menu || (this._refreshMenu(), a(this._menu.panel, { isInstant: this._shouldOpenInstantly }), this._shouldOpenInstantly = !0, this._focusFirstItem());
 		})) : (this._syncScrollLock(!1), this._contentObserver.disconnect(), this._refreshScheduled = !1, this._closeMenuAfterPresence()), this._userOpenChange.consume() && this._dispatchChange(this._isOpen)), e.has("noScrollLock") && this._syncScrollLock();
 	}
 	openAt(e, t) {
 		this._openAt(e, t, !0);
 	}
 	_openAt(e, t, n) {
-		return !this.disabled && (this._x = e, this._y = t, this._shouldOpenInstantly = n, this._ignoreCurrentOutsideClick(), this._isOpen ? (this._closeSubmenusFrom(0, !0), this._restoreClosingSubmenus(), this._scheduleRefresh(), !1) : (this._restoreFocusTarget ??= document.activeElement instanceof HTMLElement ? document.activeElement : void 0, this._isOpen = !0, !0));
+		return !this.disabled && (this._x = e, this._y = t, this._shouldOpenInstantly = n, this._outsideClickGuard.arm(), this._isOpen ? (this._closeSubmenusFrom(0, !0), this._closingSubmenus.restoreAll(), this._scheduleRefresh(), !1) : (this._restoreFocusTarget ??= document.activeElement instanceof HTMLElement ? document.activeElement : void 0, this._isOpen = !0, !0));
 	}
 	close() {
 		this._isOpen &&= !1;
@@ -135,7 +125,7 @@ var C = "wui-context-menu-item", w = class extends _ {
 		}));
 	}
 	_refreshMenu() {
-		this._menu && (this._setupMenuItems(), this._positionMenu(), this._bindLevelHovers());
+		this._menu && (this._setupMenuItems(), this._positionMenu(), this._hoverBinder.bind());
 	}
 	_positionMenu() {
 		let e = this._menu?.panel;
@@ -144,10 +134,10 @@ var C = "wui-context-menu-item", w = class extends _ {
 				this._positionMenuInViewport(e);
 				return;
 			}
-			t({ getBoundingClientRect: () => new DOMRect(this._x, this._y, 0, 0) }, e, {
+			n({ getBoundingClientRect: () => new DOMRect(this._x, this._y, 0, 0) }, e, {
 				strategy: "fixed",
 				placement: "bottom-start",
-				middleware: [n({
+				middleware: [r({
 					padding: 8,
 					crossAxis: !0
 				})]
@@ -169,176 +159,90 @@ var C = "wui-context-menu-item", w = class extends _ {
 	}
 	_focusFirstItem() {
 		let e = this._menu?.content.querySelectorAll("web-ui-dropdown-item:not([disabled])")?.[0];
-		e && this._focusMenuItem(e);
+		e && l(e);
 	}
 	_setupMenuItems() {
 		let e = this._menu;
 		if (!e) return;
 		let t = e.content;
-		this._syncManagedItems(t), this._hideMenuItems(), m(t, "context-menu-hidden");
-		let n = this._captureFrameworkAnchors(t);
-		this._orderMenuItems(t), this._restoreFrameworkAnchors(t, n);
-	}
-	_captureFrameworkAnchors(e) {
-		let t = /* @__PURE__ */ new Map();
-		for (let n of Array.from(e.childNodes)) if (n instanceof Comment && n.textContent !== C) {
-			let e = n.nextElementSibling;
-			t.set(n, e instanceof HTMLElement ? e : null);
-		}
-		return t;
-	}
-	_restoreFrameworkAnchors(e, t) {
-		for (let [n, r] of t) n.parentNode === e && (r && r.parentNode === e ? n.nextElementSibling !== r && e.insertBefore(n, r) : e.appendChild(n));
-	}
-	_syncManagedItems(e) {
-		let t = p(e), n = p(this), r = /* @__PURE__ */ new Set([...t, ...n]);
-		this._menuItemAnchors.forEach((e, t) => {
-			r.has(t) || (e.remove(), this._menuItemAnchors.delete(t));
-		});
-		let i = (e, t, n) => {
-			let r = this._menuItemAnchors.get(e);
-			if (r && r.parentNode === this) return r;
-			r?.remove();
-			let i = document.createComment(C);
-			return t ? this.insertBefore(i, e) : n && n.parentNode === this ? this.insertBefore(i, n) : this.appendChild(i), this._menuItemAnchors.set(e, i), i;
-		};
-		for (let e = t.length - 1; e >= 0; e--) {
-			let n = t[e], r = t[e + 1];
-			i(n, !1, r ? this._menuItemAnchors.get(r) : void 0);
-		}
-		for (let e of n) i(e, !0);
-		for (let t of n) e.appendChild(t);
-	}
-	_orderMenuItems(e) {
-		let t = [];
-		for (let n of Array.from(this.childNodes)) n.nodeType === Node.COMMENT_NODE && n.textContent === C && this._menuItemAnchors.forEach((r, i) => {
-			r === n && i.parentNode === e && t.push(i);
-		});
-		if (t.length === 0) return;
-		let n = Array.from(e.children);
-		if (!(n.length === t.length && n.every((e, n) => e === t[n]))) for (let n = t.length - 1; n >= 0; n--) {
-			let r = t[n], i = t[n + 1];
-			i ? r.nextElementSibling !== i && e.insertBefore(r, i) : e.appendChild(r);
-		}
+		h(this, t, this._menuItemAnchors, M), this._hideMenuItems(), f(t, "context-menu-hidden");
+		let n = c(t, M);
+		m(this, t, this._menuItemAnchors, M), g(t, n);
 	}
 	_returnItemsToSlot() {
 		let e = this._menu;
-		if (!e) return;
-		this._closeSubmenusFrom(0, !0), this._restoreClosingSubmenus();
-		let t = e.content, n = [];
-		for (let e of Array.from(t.childNodes)) {
-			if (e instanceof Comment) {
-				n.push(e);
-				continue;
-			}
-			if (!(e instanceof HTMLElement)) continue;
-			let t = this._menuItemAnchors.get(e);
-			if (t) {
-				for (let e of n) t.parentNode === this ? this.insertBefore(e, t) : this.appendChild(e);
-				n.length = 0, t.parentNode === this ? this.insertBefore(e, t) : this.appendChild(e), t.remove(), this._menuItemAnchors.delete(e);
-			}
-		}
-		for (let e of n) this.appendChild(e);
-		this._menuItemAnchors.forEach((e) => e.remove()), this._menuItemAnchors.clear();
+		e && (this._closeSubmenusFrom(0, !0), this._closingSubmenus.restoreAll(), _(this, e.content, this._menuItemAnchors));
 	}
 	async _closeMenuAfterPresence() {
 		let e = this._menu;
-		e && !await r(e.panel) || this._isOpen || !this.isConnected || this._menu !== e || (this._returnItemsToSlot(), e?.panel.remove(), this._menu = void 0, this._restoreFocusTarget?.focus(), this._restoreFocusTarget = void 0);
+		e && !await i(e.panel) || this._isOpen || !this.isConnected || this._menu !== e || (this._returnItemsToSlot(), e?.panel.remove(), this._menu = void 0, this._restoreFocusTarget?.focus(), this._restoreFocusTarget = void 0);
 	}
 	_hideMenuItems() {
-		d(this).forEach((e) => e.setAttribute("slot", "context-menu-hidden")), m(this, "context-menu-hidden");
+		u(this).forEach((e) => e.setAttribute("slot", "context-menu-hidden")), f(this, "context-menu-hidden");
 	}
 	_openSubmenu(e, t = !1) {
 		if (!this._isOpen || !e.hasAttribute("submenu") || e.hasAttribute("disabled")) return;
 		let n = this._getItemLevel(e);
 		if (n === -1 || this._activeSubmenuItems[n] === e) return;
 		this._closeSubmenusFrom(n);
-		let r = this._closingSubmenus.get(e);
+		let r = this._closingSubmenus.take(e);
 		if (r) {
-			this._closingSubmenus.delete(e), this._activeSubmenus[n] = r, this._activeSubmenuItems[n] = e, e.setAttribute("active", ""), this._positionSubmenu(e, r), i(r.panel, { isInstant: t }), this._bindLevelHovers();
+			this._activeSubmenus[n] = r, this._activeSubmenuItems[n] = e, e.setAttribute("active", ""), this._positionSubmenu(e, r), a(r.panel, { isInstant: t }), this._hoverBinder.bind();
 			return;
 		}
-		if (d(e).length === 0) return;
-		let a = s("context-submenu", this);
-		a.panel.dataset.level = String(n), a.panel.setAttribute("role", "menu"), a.panel.setAttribute("aria-label", "子菜单"), a.panel.style.visibility = "hidden", a.panel.addEventListener("click", this._onMenuClick), h(e, a.content), this._activeSubmenus[n] = a, this._activeSubmenuItems[n] = e, e.setAttribute("active", ""), this._positionSubmenu(e, a), i(a.panel, { isInstant: t }), this._bindLevelHovers();
+		if (u(e).length === 0) return;
+		let i = w("context-submenu", this);
+		i.panel.dataset.level = String(n), i.panel.setAttribute("role", "menu"), i.panel.setAttribute("aria-label", "子菜单"), i.panel.style.visibility = "hidden", i.panel.addEventListener("click", this._onMenuClick), p(e, i.content), this._activeSubmenus[n] = i, this._activeSubmenuItems[n] = e, e.setAttribute("active", ""), this._positionSubmenu(e, i), a(i.panel, { isInstant: t }), this._hoverBinder.bind();
 	}
 	_closeSubmenusFrom(e, t = !1) {
 		for (let n = this._activeSubmenus.length - 1; n >= e; n--) {
 			let e = this._activeSubmenus[n], r = this._activeSubmenuItems[n];
-			r?.removeAttribute("active"), !r || t ? (this._restoreSubmenuItems(e, r), e.panel.remove()) : (this._closingSubmenus.set(r, e), this._closeSubmenuAfterPresence(e, r));
+			r?.removeAttribute("active"), !r || t ? (this._restoreSubmenuItems(e, r), e.panel.remove()) : this._closingSubmenus.closeAsync(r, e);
 		}
 		this._activeSubmenus.length = e, this._activeSubmenuItems.length = e;
 	}
-	async _closeSubmenuAfterPresence(e, t) {
-		await r(e.panel) && this._closingSubmenus.get(t) === e && (this._closingSubmenus.delete(t), this._restoreSubmenuItems(e, t), e.panel.remove());
-	}
 	_restoreSubmenuItems(e, t) {
-		t && (h(e.content, t), m(t, "context-menu-hidden"));
-	}
-	_restoreClosingSubmenus() {
-		this._closingSubmenus.forEach((e, t) => {
-			this._restoreSubmenuItems(e, t), e.panel.remove();
-		}), this._closingSubmenus.clear();
+		t && (p(e.content, t), f(t, "context-menu-hidden"));
 	}
 	_getItemLevel(e) {
 		if (this._menu?.panel.contains(e)) return 0;
 		let t = this._activeSubmenus.findIndex((t) => t.panel.contains(e));
 		return t === -1 ? -1 : t + 1;
 	}
-	_positionSubmenu(e, r) {
-		if (r.panel.parentElement instanceof HTMLDialogElement && r.panel.parentElement.open) {
-			let i = e.getBoundingClientRect().right + r.panel.getBoundingClientRect().width + 8 <= window.innerWidth, a = (this._submenuPositionEpochs.get(r.panel) ?? 0) + 1;
-			this._submenuPositionEpochs.set(r.panel, a), t(e, r.panel, {
+	_positionSubmenu(e, t) {
+		if (t.panel.parentElement instanceof HTMLDialogElement && t.panel.parentElement.open) {
+			let i = e.getBoundingClientRect().right + t.panel.getBoundingClientRect().width + 8 <= window.innerWidth, a = (this._submenuPositionEpochs.get(t.panel) ?? 0) + 1;
+			this._submenuPositionEpochs.set(t.panel, a), n(e, t.panel, {
 				strategy: "fixed",
 				placement: i ? "right-start" : "left-start",
-				middleware: [n({
+				middleware: [r({
 					padding: 8,
 					crossAxis: !0
 				})]
-			}).then(({ x: e, y: t, middlewareData: n }) => {
-				if (!this._activeSubmenus.includes(r) || a !== this._submenuPositionEpochs.get(r.panel)) return;
-				let i = n.shift?.x ?? 0, o = n.shift?.y ?? 0, s = i < 0 ? "right" : "left", c = o < 0 ? "bottom" : "top";
-				r.panel.style.left = `${e}px`, r.panel.style.top = `${t}px`, r.panel.style.setProperty("--wui-internal-overlay-transform-origin", `${c} ${s}`), r.panel.style.visibility = "";
+			}).then(({ x: e, y: n, middlewareData: r }) => {
+				if (!this._activeSubmenus.includes(t) || a !== this._submenuPositionEpochs.get(t.panel)) return;
+				let i = r.shift?.x ?? 0, o = r.shift?.y ?? 0, s = i < 0 ? "right" : "left", c = o < 0 ? "bottom" : "top";
+				t.panel.style.left = `${e}px`, t.panel.style.top = `${n}px`, t.panel.style.setProperty("--wui-internal-overlay-transform-origin", `${c} ${s}`), t.panel.style.visibility = "";
 			});
 			return;
 		}
-		let i = e.getBoundingClientRect(), a = r.panel.getBoundingClientRect(), o = i.right + a.width + 8 <= window.innerWidth, s = o ? i.right : Math.max(8, i.left - a.width), c = Math.min(Math.max(8, i.top), window.innerHeight - a.height - 8);
-		r.panel.style.left = `${s}px`, r.panel.style.top = `${c}px`, r.panel.style.setProperty("--wui-internal-overlay-transform-origin", o ? "top left" : "top right"), r.panel.style.visibility = "";
+		let i = e.getBoundingClientRect(), a = t.panel.getBoundingClientRect(), o = i.right + a.width + 8 <= window.innerWidth, s = o ? i.right : Math.max(8, i.left - a.width), c = Math.min(Math.max(8, i.top), window.innerHeight - a.height - 8);
+		t.panel.style.left = `${s}px`, t.panel.style.top = `${c}px`, t.panel.style.setProperty("--wui-internal-overlay-transform-origin", o ? "top left" : "top right"), t.panel.style.visibility = "";
 	}
 	_dispatchChange(e) {
-		this.dispatchEvent(new CustomEvent("open-change", {
-			detail: { open: e },
-			bubbles: !0,
-			composed: !0
-		}));
+		t(this, e);
 	}
-	_isInsideShadowRoot(e) {
-		for (let t of e.composedPath()) if (t === this || t === this.shadowRoot || t instanceof Node && t.getRootNode() === this.shadowRoot || t instanceof Node && (this._menu?.panel.contains(t) || this._activeSubmenus.some((e) => e.panel.contains(t)))) return !0;
-		return !1;
+	_getLevelContainer(e) {
+		return e === 0 ? this._menu : this._activeSubmenus[e - 1];
 	}
 	_getLevelItems(e) {
-		let t = e === 0 ? this._menu?.content : this._activeSubmenus[e - 1]?.content;
-		return t ? d(t) : [];
-	}
-	_bindLevelHovers() {
-		this._hoverCleanupFns.forEach((e) => e()), this._hoverCleanupFns.length = 0;
-		for (let e = 0; e <= this._activeSubmenus.length; e++) this._getLevelItems(e).forEach((t) => {
-			if (!t.matches("web-ui-dropdown-item") || t.hasAttribute("disabled")) return;
-			let n = (n) => {
-				n.pointerType !== "touch" && (clearTimeout(this._submenuTimer), t.hasAttribute("submenu") ? this._activeSubmenuItems[e] !== t && (this._submenuTimer = setTimeout(() => this._openSubmenu(t), 200)) : this._activeSubmenus.length > e && (this._closeSubmenusFrom(e), this._bindLevelHovers()));
-			};
-			t.addEventListener("pointerenter", n, { passive: !0 }), this._hoverCleanupFns.push(() => t.removeEventListener("pointerenter", n));
-		});
-	}
-	_ignoreCurrentOutsideClick() {
-		this._ignoreOutsideClick = !0, clearTimeout(this._ignoreOutsideClickTimer), this._ignoreOutsideClickTimer = setTimeout(() => {
-			this._ignoreOutsideClick = !1;
-		});
+		let t = this._getLevelContainer(e);
+		return t ? u(t.content) : [];
 	}
 	_closeLastSubmenuOrMenu() {
 		if (this._activeSubmenus.length > 0) {
 			let e = this._activeSubmenus.length - 1, t = this._activeSubmenuItems[e];
-			this._closeSubmenusFrom(e), this._focusMenuItem(t), this._bindLevelHovers();
+			this._closeSubmenusFrom(e), l(t), this._hoverBinder.bind();
 		} else this._closeFromUser();
 	}
 	_preventBackgroundScroll(e) {
@@ -347,28 +251,11 @@ var C = "wui-context-menu-item", w = class extends _ {
 	_syncScrollLock(e = this._isOpen) {
 		this._scrollLock.sync(e && !this.noScrollLock);
 	}
-	_getEnabledLevelItems(e) {
-		let t = e === 0 ? this._menu?.content : this._activeSubmenus[e - 1]?.content;
-		return t ? u(t) : [];
-	}
-	_getFocusedItem() {
-		return c([this._menu?.content, ...this._activeSubmenus.map((e) => e.content)]);
-	}
-	_getFocusedLevel() {
-		let e = this._getFocusedItem();
-		if (!e) return;
-		if (this._menu?.panel.contains(e)) return 0;
-		let t = this._activeSubmenus.findIndex((t) => t.panel.contains(e));
-		return t < 0 ? void 0 : t + 1;
-	}
-	_focusMenuItem(e) {
-		l(e);
-	}
 	_isMenuPanelEvent(e) {
 		return e.composedPath().some((e) => e instanceof HTMLElement && (e.classList.contains("context-menu") || e.classList.contains("context-submenu")));
 	}
 	render() {
-		return v`
+		return D`
       <div class="context-menu-anchor">
         <slot @slotchange=${this._onSlotChange}></slot>
       </div>
@@ -378,15 +265,15 @@ var C = "wui-context-menu-item", w = class extends _ {
 		this._hideMenuItems(), this._isOpen && this._scheduleRefresh();
 	}
 };
-e([x({
+e([A({
 	type: Boolean,
 	reflect: !0
-})], w.prototype, "disabled", void 0), e([x({
+})], N.prototype, "disabled", void 0), e([A({
 	type: Boolean,
 	reflect: !0,
 	attribute: "no-scroll-lock"
-})], w.prototype, "noScrollLock", void 0), e([S()], w.prototype, "_isOpen", void 0), e([S()], w.prototype, "_x", void 0), e([S()], w.prototype, "_y", void 0), w = e([b("web-ui-context-menu")], w);
+})], N.prototype, "noScrollLock", void 0), e([j()], N.prototype, "_isOpen", void 0), e([j()], N.prototype, "_x", void 0), e([j()], N.prototype, "_y", void 0), N = e([k("web-ui-context-menu")], N);
 //#endregion
-export { w as WebUiContextMenu };
+export { N as WebUiContextMenu };
 
 //# sourceMappingURL=index.js.map