@greypan/web-ui 10.1.0 → 10.1.1

package/dist/components/collapse/index.js

@@ -13,7 +13,7 @@ function m() {
 		CSS.registerProperty({
 			name: p,
 			syntax: "<length>",
-			inherits: !1,
+			inherits: !0,
 			initialValue: "0px"
 		});
 	} catch {}

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 { 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\n/** peek 边缘渐隐的活动长度：关闭/收起态取由 peek 推导的长度，展开态归 0。 */\nconst PEEK_EDGE_ACTIVE = '--wui-collapse-peek-edge-active'\n\n/*\n * 注册成 `<length>` 才能被 transition 插值（未注册的自定义属性是离散值，只能瞬变）。\n *\n * 必须用 JS 的 `CSS.registerProperty` 而不是 CSS 里的 `@property`：实测后者写在\n * shadow root 的样式表里不产生注册（getComputedStyle 读打开态得到空串而非\n * initial-value），而自定义属性的注册本质上是 document 级的。\n * 注册失败（jsdom、旧浏览器、重复注册）时降级为离散过渡——渐变带长度瞬变，\n * 但位置百分比仍跟随裁剪边缘，行为依旧正确。\n */\nfunction registerPeekEdgeActive() {\n  // jsdom 与不支持的环境直接跳过；样式里的 var() fallback 保证声明仍然有效。\n  if (typeof CSS === 'undefined' || typeof CSS.registerProperty !== 'function') return\n  try {\n    CSS.registerProperty({\n      name: PEEK_EDGE_ACTIVE,\n      syntax: '<length>',\n      inherits: false,\n      initialValue: '0px'\n    })\n  } catch {\n    // 已注册过（HMR、多份副本）或定义冲突：保持现有注册即可。\n  }\n}\n\nregisterPeekEdgeActive()\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-0030\n * 选型保留）。关闭稳态三态（消费者 light DOM 永不移动，hidden 全部命令式管理，\n * 避免渲染绑定在关闭动画起点抢先 display:none）：\n * - 默认：content 容器 `hidden`（display:none，脱离渲染与可访问性树）；\n * - `keep-mounted`：inner `inert`（保留在 0fr 轨道内，滚动位置与布局可测量）；\n * - `peek`：inner `inert`，轨道停在固定长度的裁剪窗口，只露出内容头部；\n * - 动画进行中：inner `inert` + track pointer-events 禁用，结束后进入对应稳态。\n *\n * `peek` 与展开态之间是固定长度与内容自适应高度的过渡，CSS 无法插值；这两个\n * 方向的动画改为读出像素后以显式长度写入轨道，落稳态时清除内联值交回 CSS 规则。\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  /**\n   * 关闭稳态露出的尺寸（CSS 长度，如 `120px`、`6rem`），沿动画轴生效：默认是高度，\n   * `horizontal` 时为宽度；未设置时保持完全收起。\n   *\n   * 设置后关闭稳态语义等同 `keep-mounted`（内容留在轨道内、`inert` 阻断交互），\n   * 只露出 `peek` 范围内的部分；内容本身不足 `peek` 时按内容实际尺寸收起。\n   * 注意 `peek` 是固定长度与内容自适应高度之间的过渡：CSS 无法在两者之间插值，\n   * 因此这两个方向的动画由本组件读出内容尺寸后以显式长度驱动（其余路径仍是\n   * 零测量的 grid fr 过渡）。\n   *\n   * 露出区域末端自带一段边缘渐隐（提示下方还有内容），长度由 `peek` 按比例推导，\n   * 无需也不接受调用方单独指定——见 style.css 中 `--wui-collapse-peek-edge-*`\n   * 系列变量（比例、上限、末端颜色可用 CSS 覆盖，属于主题级调优而非组件 API）。\n   */\n  @property({ type: String, reflect: true }) peek: string | null = null\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    // peek 的稳态长度与动画写入共用轨道内联样式，先同步再落稳态，避免被稳态清除。\n    this._syncPeek()\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') || changed.has('peek')) && !this.open) {\n      // 运行态切换 keep-mounted / peek：关闭稳态需在 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  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-0030 迁移） =====\n\n  /** 关闭稳态是否露出部分内容；空值与非空判断避免 `peek=\"\"` 被当作有效长度。 */\n  private get _peeks(): boolean {\n    return typeof this.peek === 'string' && this.peek.trim() !== ''\n  }\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) track.dataset.wuiPresence = 'open'\n    this._clearInnerClamp()\n    this._setInnerInert(false)\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    this._clearInnerClamp()\n    if (this.keepMounted || this._peeks) {\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\n    if (this._peeks) {\n      const inner = this._contentInner()\n      // 无过渡时长（reduced motion、jsdom）或无 inner 时不做测量，直接落展开稳态。\n      if (!inner || getTransitionDuration(inner, 0) === 0) {\n        this._applyOpenSteadyState()\n        return\n      }\n      /*\n       * peek 的裁剪长度是固定值，展开目标是内容自适应高度，两者无法由 CSS 插值，\n       * 动画必须由两个显式长度驱动：起点是当前露出的长度，目标是内容完整尺寸。\n       * 起点要在同任务内先写入并提交回流，否则过渡会退化成跳变（实测分帧写入\n       * 反而完全不参与插值判定）；目标读 inner 的 scroll 尺寸，不写探针样式。\n       */\n      const from = this._measureInnerSize(inner)\n      const to = this._measureContentSize(inner)\n      this._setInnerClamp(inner, `${from}px`)\n      void this._measureInnerSize(inner)\n      track.dataset.wuiPresence = 'open'\n      this._setInnerClamp(inner, `${to}px`)\n      this._awaitTransition(inner, generation, () => this._settle(true), [this._clampProperty()])\n      return\n    }\n\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    const generation = this._generation\n\n    if (this._peeks) {\n      const inner = this._contentInner()\n      // 无过渡时长（reduced motion、jsdom）或无 inner 时不做测量，直接落裁剪稳态。\n      if (!inner || getTransitionDuration(inner, 0) === 0) {\n        this._applyClosedSteadyState()\n        return\n      }\n      /*\n       * 收起目标是 `peek` 长度本身：与内容尺寸的较小值由 CSS 稳态规则解析，\n       * 动画只需把当前展开长度过渡到这个长度。起点同样要先写入并提交回流，\n       * 顺序与 _beginExpand 一致。\n       */\n      const from = this._measureInnerSize(inner)\n      this._setInnerClamp(inner, `${from}px`)\n      void this._measureInnerSize(inner)\n      track.dataset.wuiPresence = 'closing'\n      this._setInnerClamp(inner, `${this.peek}`)\n      this._awaitTransition(inner, generation, () => this._settle(false), [this._clampProperty()])\n      return\n    }\n\n    track.dataset.wuiPresence = 'closing'\n    this._awaitTransition(track, generation, () => this._settle(false))\n  }\n\n  // 关闭稳态：keep-mounted → 内容保留在 0fr 轨道内并 inert；peek → 保留在裁剪\n  // 窗口内并 inert；默认 → 容器 hidden。\n  private _settle(open: boolean) {\n    this._clearExitTimer()\n    const track = this._contentTrack()\n    // peek 过渡以显式长度写入 inner：落稳态一律清除，交回 CSS 稳态规则（长度声明）。\n    this._clearInnerClamp()\n    if (open) {\n      this._setInnerInert(false)\n      return\n    }\n    // 落稳态必须清除 closing 瞬态标记：否则 track 永久保留 pointer-events:none\n    // 与 exit 过渡配置（keep-mounted 分支同样清除，避免残留）。\n    if (track) delete track.dataset.wuiPresence\n    if (this.keepMounted || this._peeks) return\n    const container = this._contentContainer()\n    this._setInnerInert(false)\n    if (container) container.hidden = true\n  }\n\n  // 等待动画属性过渡结束；时长为 0（reduced motion、jsdom）直接稳态，\n  // transitionend 不触发时按时长 + 缓冲兜底。默认等待 grid 轨道过渡；peek 的\n  // 过渡落在 inner 的裁剪长度上，由调用方传入对应属性。\n  private _awaitTransition(\n    animated: HTMLElement,\n    generation: number,\n    onDone: () => void,\n    properties: readonly string[] = ['grid-template-rows', 'grid-template-columns']\n  ) {\n    const duration = getTransitionDuration(animated, 0)\n    if (duration === 0) {\n      if (generation === this._generation) onDone()\n      return\n    }\n\n    let settled = false\n    const finish = () => {\n      animated.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 (event.target === animated && properties.includes(event.propertyName)) finish()\n    }\n    animated.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  // ===== peek 尺寸读写（裁剪长度落在 inner 上，轨道只负责 1fr 与裁剪窗口） =====\n\n  /*\n   * peek 长度经自定义属性下发给 shadow 样式规则，而不是直接写 inner 的裁剪长度：\n   * 关闭稳态由 CSS 声明（长度与内容尺寸的较小值由 CSS 原生解析），动画写入的内联\n   * 长度在其上覆盖，落稳态时清除即可回到声明值。\n   */\n  private _syncPeek() {\n    const track = this._contentTrack()\n    if (!track) return\n    track.toggleAttribute('data-wui-peek', this._peeks)\n    if (this._peeks) {\n      track.style.setProperty('--wui-collapse-peek', this.peek ?? '')\n    } else {\n      track.style.removeProperty('--wui-collapse-peek')\n    }\n  }\n\n  private _clampProperty(): 'max-height' | 'max-width' {\n    return this.horizontal ? 'max-width' : 'max-height'\n  }\n\n  private _measureInnerSize(inner: HTMLElement): number {\n    return this.horizontal ? inner.offsetWidth : inner.offsetHeight\n  }\n\n  /*\n   * 内容在动画轴上的完整尺寸（px）：裁剪只作用在 inner 的 max-height/max-width 上，\n   * 被测内容的布局盒子仍是完整尺寸，故读 scroll 尺寸即可，不写任何样式——写样式\n   * 会被 grid 过渡机制当作过渡起点读取，必须避开。\n   */\n  private _measureContentSize(inner: HTMLElement): number {\n    return this.horizontal ? inner.scrollWidth : inner.scrollHeight\n  }\n\n  private _setInnerClamp(inner: HTMLElement, size: string) {\n    inner.style.setProperty(this._clampProperty(), size)\n  }\n\n  private _clearInnerClamp() {\n    const inner = this._contentInner()\n    if (!inner) return\n    inner.style.removeProperty('max-height')\n    inner.style.removeProperty('max-width')\n  }\n\n  private _setInnerInert(inert: boolean) {\n    this._contentInner()?.toggleAttribute('inert', inert)\n  }\n\n  private _contentInner(): HTMLElement | null {\n    return this.shadowRoot?.querySelector<HTMLElement>('.wui-collapse-inner') ?? null\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\n/** peek 边缘渐隐的活动长度：关闭/收起态取由 peek 推导的长度，展开态归 0。 */\nconst PEEK_EDGE_ACTIVE = '--wui-collapse-peek-edge-active'\n\n/*\n * 注册成 `<length>` 才能被 transition 插值（未注册的自定义属性是离散值，只能瞬变）。\n *\n * 必须用 JS 的 `CSS.registerProperty` 而不是 CSS 里的 `@property`：实测后者写在\n * shadow root 的样式表里不产生注册（getComputedStyle 读打开态得到空串而非\n * initial-value），而自定义属性的注册本质上是 document 级的。\n * 注册失败（jsdom、旧浏览器、重复注册）时降级为离散过渡——渐变带长度瞬变，\n * 但位置百分比仍跟随裁剪边缘，行为依旧正确。\n *\n * `inherits` 必须是 true：晕染伪元素（style.css 的 ::after）读同一个值来调制模糊，\n * 继承为 false 时伪元素读到的是 initialValue 0px——mask 的各色标随之塌缩到 100%，\n * 模糊层静默消失且其余渲染一切照旧，只少一层效果。\n */\nfunction registerPeekEdgeActive() {\n  // jsdom 与不支持的环境直接跳过；样式里的 var() fallback 保证声明仍然有效。\n  if (typeof CSS === 'undefined' || typeof CSS.registerProperty !== 'function') return\n  try {\n    CSS.registerProperty({\n      name: PEEK_EDGE_ACTIVE,\n      syntax: '<length>',\n      inherits: true,\n      initialValue: '0px'\n    })\n  } catch {\n    // 已注册过（HMR、多份副本）或定义冲突：保持现有注册即可。\n  }\n}\n\nregisterPeekEdgeActive()\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-0030\n * 选型保留）。关闭稳态三态（消费者 light DOM 永不移动，hidden 全部命令式管理，\n * 避免渲染绑定在关闭动画起点抢先 display:none）：\n * - 默认：content 容器 `hidden`（display:none，脱离渲染与可访问性树）；\n * - `keep-mounted`：inner `inert`（保留在 0fr 轨道内，滚动位置与布局可测量）；\n * - `peek`：inner `inert`，轨道停在固定长度的裁剪窗口，只露出内容头部；\n * - 动画进行中：inner `inert` + track pointer-events 禁用，结束后进入对应稳态。\n *\n * `peek` 与展开态之间是固定长度与内容自适应高度的过渡，CSS 无法插值；这两个\n * 方向的动画改为读出像素后以显式长度写入轨道，落稳态时清除内联值交回 CSS 规则。\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  /**\n   * 关闭稳态露出的尺寸（CSS 长度，如 `120px`、`6rem`），沿动画轴生效：默认是高度，\n   * `horizontal` 时为宽度；未设置时保持完全收起。\n   *\n   * 设置后关闭稳态语义等同 `keep-mounted`（内容留在轨道内、`inert` 阻断交互），\n   * 只露出 `peek` 范围内的部分；内容本身不足 `peek` 时按内容实际尺寸收起。\n   * 注意 `peek` 是固定长度与内容自适应高度之间的过渡：CSS 无法在两者之间插值，\n   * 因此这两个方向的动画由本组件读出内容尺寸后以显式长度驱动（其余路径仍是\n   * 零测量的 grid fr 过渡）。\n   *\n   * 露出区域末端自带一段边缘渐隐（提示下方还有内容），长度由 `peek` 按比例推导，\n   * 无需也不接受调用方单独指定——见 style.css 中 `--wui-collapse-peek-edge-*`\n   * 系列变量（比例、上限、末端颜色可用 CSS 覆盖，属于主题级调优而非组件 API）。\n   */\n  @property({ type: String, reflect: true }) peek: string | null = null\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    // peek 的稳态长度与动画写入共用轨道内联样式，先同步再落稳态，避免被稳态清除。\n    this._syncPeek()\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') || changed.has('peek')) && !this.open) {\n      // 运行态切换 keep-mounted / peek：关闭稳态需在 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  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-0030 迁移） =====\n\n  /** 关闭稳态是否露出部分内容；空值与非空判断避免 `peek=\"\"` 被当作有效长度。 */\n  private get _peeks(): boolean {\n    return typeof this.peek === 'string' && this.peek.trim() !== ''\n  }\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) track.dataset.wuiPresence = 'open'\n    this._clearInnerClamp()\n    this._setInnerInert(false)\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    this._clearInnerClamp()\n    if (this.keepMounted || this._peeks) {\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\n    if (this._peeks) {\n      const inner = this._contentInner()\n      // 无过渡时长（reduced motion、jsdom）或无 inner 时不做测量，直接落展开稳态。\n      if (!inner || getTransitionDuration(inner, 0) === 0) {\n        this._applyOpenSteadyState()\n        return\n      }\n      /*\n       * peek 的裁剪长度是固定值，展开目标是内容自适应高度，两者无法由 CSS 插值，\n       * 动画必须由两个显式长度驱动：起点是当前露出的长度，目标是内容完整尺寸。\n       * 起点要在同任务内先写入并提交回流，否则过渡会退化成跳变（实测分帧写入\n       * 反而完全不参与插值判定）；目标读 inner 的 scroll 尺寸，不写探针样式。\n       */\n      const from = this._measureInnerSize(inner)\n      const to = this._measureContentSize(inner)\n      this._setInnerClamp(inner, `${from}px`)\n      void this._measureInnerSize(inner)\n      track.dataset.wuiPresence = 'open'\n      this._setInnerClamp(inner, `${to}px`)\n      this._awaitTransition(inner, generation, () => this._settle(true), [this._clampProperty()])\n      return\n    }\n\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    const generation = this._generation\n\n    if (this._peeks) {\n      const inner = this._contentInner()\n      // 无过渡时长（reduced motion、jsdom）或无 inner 时不做测量，直接落裁剪稳态。\n      if (!inner || getTransitionDuration(inner, 0) === 0) {\n        this._applyClosedSteadyState()\n        return\n      }\n      /*\n       * 收起目标是 `peek` 长度本身：与内容尺寸的较小值由 CSS 稳态规则解析，\n       * 动画只需把当前展开长度过渡到这个长度。起点同样要先写入并提交回流，\n       * 顺序与 _beginExpand 一致。\n       */\n      const from = this._measureInnerSize(inner)\n      this._setInnerClamp(inner, `${from}px`)\n      void this._measureInnerSize(inner)\n      track.dataset.wuiPresence = 'closing'\n      this._setInnerClamp(inner, `${this.peek}`)\n      this._awaitTransition(inner, generation, () => this._settle(false), [this._clampProperty()])\n      return\n    }\n\n    track.dataset.wuiPresence = 'closing'\n    this._awaitTransition(track, generation, () => this._settle(false))\n  }\n\n  // 关闭稳态：keep-mounted → 内容保留在 0fr 轨道内并 inert；peek → 保留在裁剪\n  // 窗口内并 inert；默认 → 容器 hidden。\n  private _settle(open: boolean) {\n    this._clearExitTimer()\n    const track = this._contentTrack()\n    // peek 过渡以显式长度写入 inner：落稳态一律清除，交回 CSS 稳态规则（长度声明）。\n    this._clearInnerClamp()\n    if (open) {\n      this._setInnerInert(false)\n      return\n    }\n    // 落稳态必须清除 closing 瞬态标记：否则 track 永久保留 pointer-events:none\n    // 与 exit 过渡配置（keep-mounted 分支同样清除，避免残留）。\n    if (track) delete track.dataset.wuiPresence\n    if (this.keepMounted || this._peeks) return\n    const container = this._contentContainer()\n    this._setInnerInert(false)\n    if (container) container.hidden = true\n  }\n\n  // 等待动画属性过渡结束；时长为 0（reduced motion、jsdom）直接稳态，\n  // transitionend 不触发时按时长 + 缓冲兜底。默认等待 grid 轨道过渡；peek 的\n  // 过渡落在 inner 的裁剪长度上，由调用方传入对应属性。\n  private _awaitTransition(\n    animated: HTMLElement,\n    generation: number,\n    onDone: () => void,\n    properties: readonly string[] = ['grid-template-rows', 'grid-template-columns']\n  ) {\n    const duration = getTransitionDuration(animated, 0)\n    if (duration === 0) {\n      if (generation === this._generation) onDone()\n      return\n    }\n\n    let settled = false\n    const finish = () => {\n      animated.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 (event.target === animated && properties.includes(event.propertyName)) finish()\n    }\n    animated.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  // ===== peek 尺寸读写（裁剪长度落在 inner 上，轨道只负责 1fr 与裁剪窗口） =====\n\n  /*\n   * peek 长度经自定义属性下发给 shadow 样式规则，而不是直接写 inner 的裁剪长度：\n   * 关闭稳态由 CSS 声明（长度与内容尺寸的较小值由 CSS 原生解析），动画写入的内联\n   * 长度在其上覆盖，落稳态时清除即可回到声明值。\n   */\n  private _syncPeek() {\n    const track = this._contentTrack()\n    if (!track) return\n    track.toggleAttribute('data-wui-peek', this._peeks)\n    if (this._peeks) {\n      track.style.setProperty('--wui-collapse-peek', this.peek ?? '')\n    } else {\n      track.style.removeProperty('--wui-collapse-peek')\n    }\n  }\n\n  private _clampProperty(): 'max-height' | 'max-width' {\n    return this.horizontal ? 'max-width' : 'max-height'\n  }\n\n  private _measureInnerSize(inner: HTMLElement): number {\n    return this.horizontal ? inner.offsetWidth : inner.offsetHeight\n  }\n\n  /*\n   * 内容在动画轴上的完整尺寸（px）：裁剪只作用在 inner 的 max-height/max-width 上，\n   * 被测内容的布局盒子仍是完整尺寸，故读 scroll 尺寸即可，不写任何样式——写样式\n   * 会被 grid 过渡机制当作过渡起点读取，必须避开。\n   */\n  private _measureContentSize(inner: HTMLElement): number {\n    return this.horizontal ? inner.scrollWidth : inner.scrollHeight\n  }\n\n  private _setInnerClamp(inner: HTMLElement, size: string) {\n    inner.style.setProperty(this._clampProperty(), size)\n  }\n\n  private _clearInnerClamp() {\n    const inner = this._contentInner()\n    if (!inner) return\n    inner.style.removeProperty('max-height')\n    inner.style.removeProperty('max-width')\n  }\n\n  private _setInnerInert(inert: boolean) {\n    this._contentInner()?.toggleAttribute('inert', inert)\n  }\n\n  private _contentInner(): HTMLElement | null {\n    return this.shadowRoot?.querySelector<HTMLElement>('.wui-collapse-inner') ?? null\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/collapse/style.js

@@ -1,5 +1,5 @@
 //#region src/components/collapse/style.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{display:block}.wui-collapse-track{transition:grid-template-rows var(--wui-duration-collapse-enter,.2s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));grid-template-rows:0fr;display:grid}.wui-collapse-track.is-horizontal{width:max-content;transition:grid-template-columns var(--wui-duration-collapse-enter,.2s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));grid-template-rows:none;grid-template-columns:0fr}.wui-collapse-track[data-wui-presence=open]{grid-template-rows:1fr}.wui-collapse-track[data-wui-presence=open].is-horizontal{grid-template-rows:none;grid-template-columns:1fr}.wui-collapse-track[data-wui-presence=closing]{pointer-events:none;transition:grid-template-rows var(--wui-duration-collapse-exit,.16s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1))}.wui-collapse-track[data-wui-presence=closing].is-horizontal{transition:grid-template-columns var(--wui-duration-collapse-exit,.16s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1))}.wui-collapse-track[data-wui-peek]{grid-template-rows:1fr}.wui-collapse-track[data-wui-peek].is-horizontal{grid-template-rows:none;grid-template-columns:1fr}.wui-collapse-inner{min-height:0;transition:max-height var(--wui-duration-collapse-enter,.2s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1)), --wui-collapse-peek-edge-active var(--wui-duration-collapse-enter,.2s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));overflow:hidden}.is-horizontal .wui-collapse-inner{min-width:0;transition-property:max-width,--wui-collapse-peek-edge-active}.wui-collapse-track[data-wui-presence=closing] .wui-collapse-inner{transition-duration:var(--wui-duration-collapse-exit,.16s)}.wui-collapse-track[data-wui-peek] .wui-collapse-inner{-webkit-mask-image:linear-gradient(to bottom, black 0%, black calc(100% - var(--wui-collapse-peek-edge-active,0px)), #0009 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .7), #00000042 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), var(--wui-collapse-peek-edge-color,transparent) 100%);-webkit-mask-image:linear-gradient(to bottom, black 0%, black calc(100% - var(--wui-collapse-peek-edge-active,0px)), #0009 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .7), #00000042 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), var(--wui-collapse-peek-edge-color,transparent) 100%);mask-image:linear-gradient(to bottom, black 0%, black calc(100% - var(--wui-collapse-peek-edge-active,0px)), #0009 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .7), #00000042 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), var(--wui-collapse-peek-edge-color,transparent) 100%)}.wui-collapse-track[data-wui-peek].is-horizontal .wui-collapse-inner{-webkit-mask-image:linear-gradient(to right, black 0%, black calc(100% - var(--wui-collapse-peek-edge-active,0px)), #0009 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .7), #00000042 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), var(--wui-collapse-peek-edge-color,transparent) 100%);-webkit-mask-image:linear-gradient(to right, black 0%, black calc(100% - var(--wui-collapse-peek-edge-active,0px)), #0009 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .7), #00000042 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), var(--wui-collapse-peek-edge-color,transparent) 100%);mask-image:linear-gradient(to right, black 0%, black calc(100% - var(--wui-collapse-peek-edge-active,0px)), #0009 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .7), #00000042 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), var(--wui-collapse-peek-edge-color,transparent) 100%)}.wui-collapse-track[data-wui-peek]:not([data-wui-presence]) .wui-collapse-inner{max-height:var(--wui-collapse-peek,0)}.wui-collapse-track[data-wui-peek]:not([data-wui-presence=open]) .wui-collapse-inner{--wui-collapse-peek-edge-active:var(--wui-collapse-peek-edge,clamp(0px, calc(var(--wui-collapse-peek,0px) * var(--wui-collapse-peek-edge-ratio,.4)), var(--wui-collapse-peek-edge-max,112px)))}.wui-collapse-track[data-wui-peek]:not([data-wui-presence]).is-horizontal .wui-collapse-inner{max-width:var(--wui-collapse-peek,0)}";
+var e = "*,:before,:after{box-sizing:border-box}:host{display:block}.wui-collapse-track{transition:grid-template-rows var(--wui-duration-collapse-enter,.2s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));grid-template-rows:0fr;display:grid}.wui-collapse-track.is-horizontal{width:max-content;transition:grid-template-columns var(--wui-duration-collapse-enter,.2s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));grid-template-rows:none;grid-template-columns:0fr}.wui-collapse-track[data-wui-presence=open]{grid-template-rows:1fr}.wui-collapse-track[data-wui-presence=open].is-horizontal{grid-template-rows:none;grid-template-columns:1fr}.wui-collapse-track[data-wui-presence=closing]{pointer-events:none;transition:grid-template-rows var(--wui-duration-collapse-exit,.16s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1))}.wui-collapse-track[data-wui-presence=closing].is-horizontal{transition:grid-template-columns var(--wui-duration-collapse-exit,.16s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1))}.wui-collapse-track[data-wui-peek]{grid-template-rows:1fr}.wui-collapse-track[data-wui-peek].is-horizontal{grid-template-rows:none;grid-template-columns:1fr}.wui-collapse-inner{min-height:0;transition:max-height var(--wui-duration-collapse-enter,.2s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1)), --wui-collapse-peek-edge-active var(--wui-duration-collapse-enter,.2s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));overflow:hidden}.is-horizontal .wui-collapse-inner{min-width:0;transition-property:max-width,--wui-collapse-peek-edge-active}.wui-collapse-track[data-wui-presence=closing] .wui-collapse-inner{transition-duration:var(--wui-duration-collapse-exit,.16s)}.wui-collapse-track[data-wui-peek] .wui-collapse-inner{-webkit-mask-image:linear-gradient(to bottom, black 0%, black calc(100% - var(--wui-collapse-peek-edge-active,0px)), #0009 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .7), #00000042 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), var(--wui-collapse-peek-edge-color,transparent) 100%);-webkit-mask-image:linear-gradient(to bottom, black 0%, black calc(100% - var(--wui-collapse-peek-edge-active,0px)), #0009 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .7), #00000042 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), var(--wui-collapse-peek-edge-color,transparent) 100%);mask-image:linear-gradient(to bottom, black 0%, black calc(100% - var(--wui-collapse-peek-edge-active,0px)), #0009 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .7), #00000042 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), var(--wui-collapse-peek-edge-color,transparent) 100%);position:relative}.wui-collapse-track[data-wui-peek] .wui-collapse-inner:after{pointer-events:none;content:\"\";z-index:1;-webkit-backdrop-filter:blur(var(--wui-collapse-peek-edge-blur,4px));backdrop-filter:blur(var(--wui-collapse-peek-edge-blur,4px));-webkit-mask-image:linear-gradient(to bottom, transparent calc(100% - var(--wui-collapse-peek-edge-active,0px)), black calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), transparent 100%);-webkit-mask-image:linear-gradient(to bottom, transparent calc(100% - var(--wui-collapse-peek-edge-active,0px)), black calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), transparent 100%);mask-image:linear-gradient(to bottom, transparent calc(100% - var(--wui-collapse-peek-edge-active,0px)), black calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), transparent 100%);position:absolute;inset:0}.wui-collapse-track[data-wui-peek].is-horizontal .wui-collapse-inner{-webkit-mask-image:linear-gradient(to right, black 0%, black calc(100% - var(--wui-collapse-peek-edge-active,0px)), #0009 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .7), #00000042 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), var(--wui-collapse-peek-edge-color,transparent) 100%);-webkit-mask-image:linear-gradient(to right, black 0%, black calc(100% - var(--wui-collapse-peek-edge-active,0px)), #0009 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .7), #00000042 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), var(--wui-collapse-peek-edge-color,transparent) 100%);mask-image:linear-gradient(to right, black 0%, black calc(100% - var(--wui-collapse-peek-edge-active,0px)), #0009 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .7), #00000042 calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), var(--wui-collapse-peek-edge-color,transparent) 100%)}.wui-collapse-track[data-wui-peek].is-horizontal .wui-collapse-inner:after{-webkit-mask-image:linear-gradient(to right, transparent calc(100% - var(--wui-collapse-peek-edge-active,0px)), black calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), transparent 100%);-webkit-mask-image:linear-gradient(to right, transparent calc(100% - var(--wui-collapse-peek-edge-active,0px)), black calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), transparent 100%);mask-image:linear-gradient(to right, transparent calc(100% - var(--wui-collapse-peek-edge-active,0px)), black calc(100% - var(--wui-collapse-peek-edge-active,0px) * .35), transparent 100%)}.wui-collapse-track[data-wui-peek]:not([data-wui-presence]) .wui-collapse-inner{max-height:var(--wui-collapse-peek,0)}.wui-collapse-track[data-wui-peek]:not([data-wui-presence=open]) .wui-collapse-inner{--wui-collapse-peek-edge-active:var(--wui-collapse-peek-edge,clamp(0px, calc(var(--wui-collapse-peek,0px) * var(--wui-collapse-peek-edge-ratio,.4)), var(--wui-collapse-peek-edge-max,112px)))}.wui-collapse-track[data-wui-peek]:not([data-wui-presence]).is-horizontal .wui-collapse-inner{max-width:var(--wui-collapse-peek,0)}";
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/collapse/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n/*\n * :host 仅限 display/contain（ADR-0003）。\n * headless 内核（ADR-0039）：不携带视觉样式，trigger 与内容的排版由消费者\n * 提供；这里只保留动画与三态关闭稳态必需的结构规则。\n */\n:host {\n  display: block;\n}\n\n/*\n * grid 0fr↔1fr 高度动画（ADR-0038 选型）：\n * 轨道行高在 0fr（收起）与 1fr（展开）间过渡，内容高度自适应、零 JS 测量；\n * inner 的 min-height/min-width 归零是轨道能收缩到 0 的必要条件，\n * overflow hidden 负责裁剪收起中的内容。\n */\n.wui-collapse-track {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows var(--wui-duration-collapse-enter, 200ms)\n    var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n\n  /*\n   * 水平方向：块级 grid 默认撑满可用宽度，1fr 列会解析为剩余空间而非内容宽度；\n   * width: max-content 让 1fr 列按内容 max-content 贡献解析（与行向 auto 高度同理），\n   * 0fr 收缩依赖 inner 的 min-width: 0。\n   */\n  &.is-horizontal {\n    grid-template-columns: 0fr;\n    grid-template-rows: none;\n    width: max-content;\n    transition: grid-template-columns var(--wui-duration-collapse-enter, 200ms)\n      var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n  }\n}\n\n.wui-collapse-track[data-wui-presence='open'] {\n  grid-template-rows: 1fr;\n\n  &.is-horizontal {\n    grid-template-columns: 1fr;\n    grid-template-rows: none;\n  }\n}\n\n.wui-collapse-track[data-wui-presence='closing'] {\n  pointer-events: none;\n  transition: grid-template-rows var(--wui-duration-collapse-exit, 160ms)\n    var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n\n  &.is-horizontal {\n    transition: grid-template-columns var(--wui-duration-collapse-exit, 160ms)\n      var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n  }\n}\n\n/*\n * peek 模式下轨道恒为 1fr（高度始终由内容驱动），裁剪长度交给 inner 的\n * max-height/max-width：这样 `peek` 与内容尺寸的较小值由 CSS 原生解析——内容不足\n * `peek` 时不残留空白，也不会被撑到 `peek`——而动画两端都是长度，可被浏览器插值\n * （fit-content 或 minmax 的关态与内容高度之间无法插值，实测会退化成跳变）。\n *\n * 注意不能限定 `:not([data-wui-presence])`：收起动画期间 presence='closing'，\n * 轨道会掉回 0fr 先把内容压成 0 再弹回，动画被毁。\n */\n.wui-collapse-track[data-wui-peek] {\n  grid-template-rows: 1fr;\n\n  &.is-horizontal {\n    grid-template-columns: 1fr;\n    grid-template-rows: none;\n  }\n}\n\n/*\n * peek 边缘渐隐的「活动长度」（替代直接读推导长度）：\n * 关闭/收起态取推导值，展开态归 0（fallback）——渐变带因此跟随开合动画\n * 平滑出现/消失，而不是在某一帧突然出现（旧实现把 mask 限定在关闭稳态，收起动画\n * 结束才显示，表现为明显的延迟）。\n *\n * 插值依赖 `CSS.registerProperty` 把它注册成 `<length>`（见 index.ts）：未注册的\n * 自定义属性是离散值、无法过渡，且不注册时「未定义」会让整条 mask-image 声明\n * 在打开态失效回退到 none，因此这里必须给 var() 显式 fallback。\n */\n.wui-collapse-inner {\n  overflow: hidden;\n  min-height: 0;\n\n  /*\n   * peek 展开/收起的过渡落在裁剪长度上；轨道静止在 1fr，只跟随 inner 的高度变化。\n   * 活动长度与裁剪长度同步过渡，渐变带才能跟着开合一起淡入淡出。\n   */\n  transition:\n    max-height var(--wui-duration-collapse-enter, 200ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)),\n    --wui-collapse-peek-edge-active var(--wui-duration-collapse-enter, 200ms)\n      var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n}\n\n.is-horizontal .wui-collapse-inner {\n  min-width: 0;\n\n  /* 覆盖轴向，但保留活动长度的过渡——否则水平模式下渐变带不淡入淡出。 */\n  transition-property: max-width, --wui-collapse-peek-edge-active;\n}\n\n.wui-collapse-track[data-wui-presence='closing'] .wui-collapse-inner {\n  transition-duration: var(--wui-duration-collapse-exit, 160ms);\n}\n\n/*\n * peek 露出区域的边缘渐隐（mask-image）：\n * 沿动画轴末端（默认底边、horizontal 时右边）做 alpha 渐变，让\"被裁掉的部分\"与\n * \"露出的部分\"之间柔和过渡，提示下方还有内容。设置 `peek` 即启用——渐隐长度由\n * `peek` 推导，不是独立入参。\n *\n * 长度推导：`peek * --wui-collapse-peek-edge-ratio`（默认 0.4），并夹在\n * `--wui-collapse-peek-edge-max`（默认 112px）以内，避免大 peek 算出过长的虚化带。\n * 纯 CSS 的 `calc(length * number)` —— 不需要 JS 解析单位，peek 用 rem/em 时\n * 渐隐长度自动跟着字号缩放。需要绝对长度时直接设 `--wui-collapse-peek-edge`\n * 覆盖（它优先于推导值），把比例设成 0 即可关掉渐隐。\n *\n * 渐变是四段「先陡后缓」而非线性：主体全黑延伸到渐变带起点后，前 30% 距离就\n * 掉到 0.6 alpha，65% 处 0.26，末端落到 edge-color（默认全透明）。线性渐变的\n * alpha 曲线前 40% 几乎贴着 1.0，人眼感知到的虚化远短于声明长度——实测同样\n * 50px 的带子，线性只让人觉得\"末尾一小截发虚\"，先陡后缓从带子起点就明显发虚，\n * 感知长度接近翻倍。\n *\n * 渐变带的位置用百分比而非绝对长度：百分比相对 inner 的**当前渲染高度**，而该高度\n * 在动画期间随 max-height 逐帧变化——mask 字符串本身不需要插值，渲染结果会自动\n * 跟随裁剪边缘移动（实测：mask 字符串恒定，容器高度变化时渐变带跟着走）。\n * 渐变长度由活动长度变量控制，其过渡见上方说明。\n * 末端颜色由 `--wui-collapse-peek-edge-color` 覆盖（需带 alpha，mask 按 alpha 解析）。\n */\n.wui-collapse-track[data-wui-peek] .wui-collapse-inner {\n  mask-image: linear-gradient(\n    to bottom,\n    black 0%,\n    black calc(100% - var(--wui-collapse-peek-edge-active, 0px)),\n    rgb(0 0 0 / 0.6) calc(100% - var(--wui-collapse-peek-edge-active, 0px) * 0.7),\n    rgb(0 0 0 / 0.26) calc(100% - var(--wui-collapse-peek-edge-active, 0px) * 0.35),\n    var(--wui-collapse-peek-edge-color, transparent) 100%\n  );\n}\n\n.wui-collapse-track[data-wui-peek].is-horizontal .wui-collapse-inner {\n  mask-image: linear-gradient(\n    to right,\n    black 0%,\n    black calc(100% - var(--wui-collapse-peek-edge-active, 0px)),\n    rgb(0 0 0 / 0.6) calc(100% - var(--wui-collapse-peek-edge-active, 0px) * 0.7),\n    rgb(0 0 0 / 0.26) calc(100% - var(--wui-collapse-peek-edge-active, 0px) * 0.35),\n    var(--wui-collapse-peek-edge-color, transparent) 100%\n  );\n}\n\n/*\n * 裁剪长度只在关闭稳态由 CSS 声明；动画期间由内联长度覆盖，落稳态清除后回到这里。\n * 下面几条 peek 规则按选择器特异性升序排列（`no-descending-specificity`）：\n * 不带 presence 限定的两条 mask 在最前，horizontal 的裁剪（多一个类）在最后。\n */\n.wui-collapse-track[data-wui-peek]:not([data-wui-presence]) .wui-collapse-inner {\n  max-height: var(--wui-collapse-peek, 0);\n}\n\n/*\n * 非展开态（关闭稳态 + 收起动画进行中）让活动长度取推导值：\n * 收起动画一开始渐变带就开始淡入，与裁剪长度同步，而不是落稳态才出现。\n * 展开态（presence='open'）不命中 → 活动长度回落到 0 → mask 整段不透明，\n * 完全展开的内容不再有底部淡出。\n *\n * 推导写成 `var(--wui-collapse-peek-edge, <推导式>)`：显式设了长度就听调用方的，\n * 没设才按比例算——逃生舱仍然是纯 CSS 变量，不占组件属性名额。\n */\n.wui-collapse-track[data-wui-peek]:not([data-wui-presence='open']) .wui-collapse-inner {\n  --wui-collapse-peek-edge-active: var(\n    --wui-collapse-peek-edge,\n    clamp(\n      0px,\n      calc(var(--wui-collapse-peek, 0px) * var(--wui-collapse-peek-edge-ratio, 0.4)),\n      var(--wui-collapse-peek-edge-max, 112px)\n    )\n  );\n}\n\n.wui-collapse-track[data-wui-peek]:not([data-wui-presence]).is-horizontal .wui-collapse-inner {\n  max-width: var(--wui-collapse-peek, 0);\n}\n"],"mappings":""}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/collapse/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n/*\n * :host 仅限 display/contain（ADR-0003）。\n * headless 内核（ADR-0039）：不携带视觉样式，trigger 与内容的排版由消费者\n * 提供；这里只保留动画与三态关闭稳态必需的结构规则。\n */\n:host {\n  display: block;\n}\n\n/*\n * grid 0fr↔1fr 高度动画（ADR-0038 选型）：\n * 轨道行高在 0fr（收起）与 1fr（展开）间过渡，内容高度自适应、零 JS 测量；\n * inner 的 min-height/min-width 归零是轨道能收缩到 0 的必要条件，\n * overflow hidden 负责裁剪收起中的内容。\n */\n.wui-collapse-track {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows var(--wui-duration-collapse-enter, 200ms)\n    var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n\n  /*\n   * 水平方向：块级 grid 默认撑满可用宽度，1fr 列会解析为剩余空间而非内容宽度；\n   * width: max-content 让 1fr 列按内容 max-content 贡献解析（与行向 auto 高度同理），\n   * 0fr 收缩依赖 inner 的 min-width: 0。\n   */\n  &.is-horizontal {\n    grid-template-columns: 0fr;\n    grid-template-rows: none;\n    width: max-content;\n    transition: grid-template-columns var(--wui-duration-collapse-enter, 200ms)\n      var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n  }\n}\n\n.wui-collapse-track[data-wui-presence='open'] {\n  grid-template-rows: 1fr;\n\n  &.is-horizontal {\n    grid-template-columns: 1fr;\n    grid-template-rows: none;\n  }\n}\n\n.wui-collapse-track[data-wui-presence='closing'] {\n  pointer-events: none;\n  transition: grid-template-rows var(--wui-duration-collapse-exit, 160ms)\n    var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n\n  &.is-horizontal {\n    transition: grid-template-columns var(--wui-duration-collapse-exit, 160ms)\n      var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n  }\n}\n\n/*\n * peek 模式下轨道恒为 1fr（高度始终由内容驱动），裁剪长度交给 inner 的\n * max-height/max-width：这样 `peek` 与内容尺寸的较小值由 CSS 原生解析——内容不足\n * `peek` 时不残留空白，也不会被撑到 `peek`——而动画两端都是长度，可被浏览器插值\n * （fit-content 或 minmax 的关态与内容高度之间无法插值，实测会退化成跳变）。\n *\n * 注意不能限定 `:not([data-wui-presence])`：收起动画期间 presence='closing'，\n * 轨道会掉回 0fr 先把内容压成 0 再弹回，动画被毁。\n */\n.wui-collapse-track[data-wui-peek] {\n  grid-template-rows: 1fr;\n\n  &.is-horizontal {\n    grid-template-columns: 1fr;\n    grid-template-rows: none;\n  }\n}\n\n/*\n * peek 边缘渐隐的「活动长度」（替代直接读推导长度）：\n * 关闭/收起态取推导值，展开态归 0（fallback）——渐变带因此跟随开合动画\n * 平滑出现/消失，而不是在某一帧突然出现（旧实现把 mask 限定在关闭稳态，收起动画\n * 结束才显示，表现为明显的延迟）。\n *\n * 插值依赖 `CSS.registerProperty` 把它注册成 `<length>`（见 index.ts）：未注册的\n * 自定义属性是离散值、无法过渡，且不注册时「未定义」会让整条 mask-image 声明\n * 在打开态失效回退到 none，因此这里必须给 var() 显式 fallback。\n */\n.wui-collapse-inner {\n  overflow: hidden;\n  min-height: 0;\n\n  /*\n   * peek 展开/收起的过渡落在裁剪长度上；轨道静止在 1fr，只跟随 inner 的高度变化。\n   * 活动长度与裁剪长度同步过渡，渐变带才能跟着开合一起淡入淡出。\n   */\n  transition:\n    max-height var(--wui-duration-collapse-enter, 200ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)),\n    --wui-collapse-peek-edge-active var(--wui-duration-collapse-enter, 200ms)\n      var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n}\n\n.is-horizontal .wui-collapse-inner {\n  min-width: 0;\n\n  /* 覆盖轴向，但保留活动长度的过渡——否则水平模式下渐变带不淡入淡出。 */\n  transition-property: max-width, --wui-collapse-peek-edge-active;\n}\n\n.wui-collapse-track[data-wui-presence='closing'] .wui-collapse-inner {\n  transition-duration: var(--wui-duration-collapse-exit, 160ms);\n}\n\n/*\n * peek 露出区域的边缘渐隐（mask-image）：\n * 沿动画轴末端（默认底边、horizontal 时右边）做 alpha 渐变，让\"被裁掉的部分\"与\n * \"露出的部分\"之间柔和过渡，提示下方还有内容。设置 `peek` 即启用——渐隐长度由\n * `peek` 推导，不是独立入参。\n *\n * 长度推导：`peek * --wui-collapse-peek-edge-ratio`（默认 0.4），并夹在\n * `--wui-collapse-peek-edge-max`（默认 112px）以内，避免大 peek 算出过长的虚化带。\n * 纯 CSS 的 `calc(length * number)` —— 不需要 JS 解析单位，peek 用 rem/em 时\n * 渐隐长度自动跟着字号缩放。需要绝对长度时直接设 `--wui-collapse-peek-edge`\n * 覆盖（它优先于推导值），把比例设成 0 即可关掉渐隐。\n *\n * 渐变是四段「先陡后缓」而非线性：主体全黑延伸到渐变带起点后，前 30% 距离就\n * 掉到 0.6 alpha，65% 处 0.26，末端落到 edge-color（默认全透明）。线性渐变的\n * alpha 曲线前 40% 几乎贴着 1.0，人眼感知到的虚化远短于声明长度——实测同样\n * 50px 的带子，线性只让人觉得\"末尾一小截发虚\"，先陡后缓从带子起点就明显发虚，\n * 感知长度接近翻倍。\n *\n * 渐变带的位置用百分比而非绝对长度：百分比相对 inner 的**当前渲染高度**，而该高度\n * 在动画期间随 max-height 逐帧变化——mask 字符串本身不需要插值，渲染结果会自动\n * 跟随裁剪边缘移动（实测：mask 字符串恒定，容器高度变化时渐变带跟着走）。\n * 渐变长度由活动长度变量控制，其过渡见上方说明。\n * 末端颜色由 `--wui-collapse-peek-edge-color` 覆盖（需带 alpha，mask 按 alpha 解析）。\n *\n * 这条 mask 管的是「内容的可见度」；同一条渐变带上还叠了一层真实的背景模糊，\n * 见下方 ::after。\n */\n.wui-collapse-track[data-wui-peek] .wui-collapse-inner {\n  /* 晕染伪元素以本盒为定位基准，见下方 ::after 的说明。 */\n  position: relative;\n  mask-image: linear-gradient(\n    to bottom,\n    black 0%,\n    black calc(100% - var(--wui-collapse-peek-edge-active, 0px)),\n    rgb(0 0 0 / 0.6) calc(100% - var(--wui-collapse-peek-edge-active, 0px) * 0.7),\n    rgb(0 0 0 / 0.26) calc(100% - var(--wui-collapse-peek-edge-active, 0px) * 0.35),\n    var(--wui-collapse-peek-edge-color, transparent) 100%\n  );\n}\n\n/*\n * peek 边缘晕染：叠一层真实的背景模糊（#221）\n * ==========================================\n *\n * mask 只把内容按 alpha 变透明，边缘仍是**锐的**——被裁掉一半的字与图标看得见轮廓，\n * 读起来像「贴了张半透明胶片」，不像 macOS 那种磨砂。header 的晕染（见\n * layout/style.css「Header 的装饰性背景晕染」）用 backdrop-filter 把背后的画面真的糊掉，\n * 这里对同一段渐变带补上同一层模糊，两处观感因此一致。\n *\n * 模糊强度用 mask 沿渐变带调制：`backdrop-filter` 只有一个全局半径，逐像素的强弱只能\n * 由本盒的 mask alpha 给。曲线两端都归 0——起点不归 0 的话，渐变带的上沿会出现一条\n * 「突然开始模糊」的接缝；末端不归 0 则会在裁剪边缘糊到盒外（本盒 overflow: hidden，\n * 盒外那段本就不可见，但模糊会在盒边界留下一圈亮边）。\n *\n * 活动长度为 0（展开态）时整条 mask 的各色标塌缩到 100%，取末位色标即全透明，\n * 伪元素自然什么都不画——不需要额外的开关规则，也不会在展开态留下一层灰纱。\n * 这也是**不**改用「页面色渐变盖住内容」那层的原因：那层在长度为 0 时塌缩成不透明页面色，\n * 会把展开后的内容整片盖住，要防住就得再加一个可过渡的开关量。\n *\n * 位置相对 inner（`position: relative`）：本盒就是被裁剪到 peek 长度的那一个，\n * 伪元素随它一起被裁剪，不需要第二层定位。z-index 让它压在 slot 内容之上。\n * --wui-collapse-peek-edge-active 必须以 inherits: true 注册（见 index.ts）：\n * 继承为 false 时伪元素读到的是 initialValue 0px，整条 mask 塌缩、模糊静默消失。\n */\n.wui-collapse-track[data-wui-peek] .wui-collapse-inner::after {\n  pointer-events: none;\n  content: '';\n\n  position: absolute;\n  z-index: 1;\n  inset: 0;\n\n  backdrop-filter: blur(var(--wui-collapse-peek-edge-blur, 4px));\n\n  mask-image: linear-gradient(\n    to bottom,\n    transparent calc(100% - var(--wui-collapse-peek-edge-active, 0px)),\n    black calc(100% - var(--wui-collapse-peek-edge-active, 0px) * 0.35),\n    transparent 100%\n  );\n}\n\n.wui-collapse-track[data-wui-peek].is-horizontal .wui-collapse-inner {\n  mask-image: linear-gradient(\n    to right,\n    black 0%,\n    black calc(100% - var(--wui-collapse-peek-edge-active, 0px)),\n    rgb(0 0 0 / 0.6) calc(100% - var(--wui-collapse-peek-edge-active, 0px) * 0.7),\n    rgb(0 0 0 / 0.26) calc(100% - var(--wui-collapse-peek-edge-active, 0px) * 0.35),\n    var(--wui-collapse-peek-edge-color, transparent) 100%\n  );\n}\n\n.wui-collapse-track[data-wui-peek].is-horizontal .wui-collapse-inner::after {\n  mask-image: linear-gradient(\n    to right,\n    transparent calc(100% - var(--wui-collapse-peek-edge-active, 0px)),\n    black calc(100% - var(--wui-collapse-peek-edge-active, 0px) * 0.35),\n    transparent 100%\n  );\n}\n\n/*\n * 裁剪长度只在关闭稳态由 CSS 声明；动画期间由内联长度覆盖，落稳态清除后回到这里。\n * 下面几条 peek 规则按选择器特异性升序排列（`no-descending-specificity`）：\n * 不带 presence 限定的两条 mask 在最前，horizontal 的裁剪（多一个类）在最后。\n */\n.wui-collapse-track[data-wui-peek]:not([data-wui-presence]) .wui-collapse-inner {\n  max-height: var(--wui-collapse-peek, 0);\n}\n\n/*\n * 非展开态（关闭稳态 + 收起动画进行中）让活动长度取推导值：\n * 收起动画一开始渐变带就开始淡入，与裁剪长度同步，而不是落稳态才出现。\n * 展开态（presence='open'）不命中 → 活动长度回落到 0 → mask 整段不透明，\n * 完全展开的内容不再有底部淡出。\n *\n * 推导写成 `var(--wui-collapse-peek-edge, <推导式>)`：显式设了长度就听调用方的，\n * 没设才按比例算——逃生舱仍然是纯 CSS 变量，不占组件属性名额。\n */\n.wui-collapse-track[data-wui-peek]:not([data-wui-presence='open']) .wui-collapse-inner {\n  --wui-collapse-peek-edge-active: var(\n    --wui-collapse-peek-edge,\n    clamp(\n      0px,\n      calc(var(--wui-collapse-peek, 0px) * var(--wui-collapse-peek-edge-ratio, 0.4)),\n      var(--wui-collapse-peek-edge-max, 112px)\n    )\n  );\n}\n\n.wui-collapse-track[data-wui-peek]:not([data-wui-presence]).is-horizontal .wui-collapse-inner {\n  max-width: var(--wui-collapse-peek, 0);\n}\n"],"mappings":""}

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

@@ -70,6 +70,21 @@ export declare class WebUiContextMenu extends LitElement {
      * 保留 dialog 默认效果 —— 那正是用户「回到原处」的期望。
      */
     private _closeSource;
+    /**
+     * 「可激活菜单项被点了」这件事是否发生在**当前这一次事件派发里**，且关闭尚未被组件接管。
+     *
+     * 由面板上的**捕获阶段**监听器置位，早于菜单项自己的监听器；作用域与理由（尤其是为什么
+     * 不能留到会话结束）见 `_onMenuItemActivation`。
+     *
+     * 存在的理由是 `close()` 的出顶层判定不能只看 `_closeSource`：消费方完全可以在自己的
+     * 菜单项回调里直接调 `close()`（interweave 的右键重命名就是 `emit` 之后自己关），
+     * 那时 `_closeSource` 还是 `'default'`，scrim 就一直留在 top layer 里没退出，
+     * 消费方随后把焦点送进编辑器的动作落在 inert 文档上被浏览器静默丢弃。
+     *
+     * 消费方先关、组件后关的路径（`_onMenuClick` 的 `_closeFromUser('menu-item')`）随后看到的是
+     * `'menu-item'`，两条判定同向，不会互相抵消。
+     */
+    private _menuItemActivated;
     /** 根面板的开启会话句柄；未开启时为 null。查询走它。 */
     private _menuHandle;
     /**
@@ -248,6 +263,7 @@ export declare class WebUiContextMenu extends LitElement {
     private _onContextMenu;
     private _onContextMenuOutside;
     private _onKeydown;
+    private _onMenuItemActivation;
     private _onMenuClick;
     private _getLevelContainer;
     private _getLevelItems;

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

@@ -18,7 +18,7 @@ import { computePosition as I, flip as L, shift as R } from "@floating-ui/dom";
 //#region src/components/context-menu/index.ts
 var z = "wui-context-menu-item", B = 500, V = 5e3, H = 10, U = 1e3, W = "data-wui-menu-scrim", G = 5, K = 8, q = class extends A {
 	constructor(...e) {
-		super(...e), this.disabled = !1, this.noScrollLock = !1, this.longPress = !1, this._longPressDelay = B, this._isOpen = !1, this._x = 0, this._y = 0, this._activeSubmenus = [], this._activeSubmenuItems = [], this._longPressOpenedAt = null, this._submenuPositionEpochs = /* @__PURE__ */ new WeakMap(), this._centerOnPressPoint = !1, this._closeSource = "default", this._menuHandle = null, this._submenuHandles = /* @__PURE__ */ new Map(), this._outsideClickGuard = C(this, (e) => this._menuHandle?.contains(e) ?? !1), this._closingSubmenus = x({
+		super(...e), this.disabled = !1, this.noScrollLock = !1, this.longPress = !1, this._longPressDelay = B, this._isOpen = !1, this._x = 0, this._y = 0, this._activeSubmenus = [], this._activeSubmenuItems = [], this._longPressOpenedAt = null, this._submenuPositionEpochs = /* @__PURE__ */ new WeakMap(), this._centerOnPressPoint = !1, this._closeSource = "default", this._menuItemActivated = !1, this._menuHandle = null, this._submenuHandles = /* @__PURE__ */ new Map(), this._outsideClickGuard = C(this, (e) => this._menuHandle?.contains(e) ?? !1), this._closingSubmenus = x({
 			getPanel: (e) => e.panel,
 			restoreItems: (e, t) => this._restoreSubmenuItems(e, t),
 			dispose: (e) => {
@@ -95,6 +95,11 @@ var z = "wui-context-menu-item", B = 500, V = 5e3, H = 10, U = 1e3, W = "data-wu
 				} else this._openAt(window.innerWidth / 2, window.innerHeight / 2, !0, !1) && this._userOpenChange.mark();
 				return;
 			}
+		}, this._onMenuItemActivation = (e) => {
+			let t = m(e);
+			!t || t.hasAttribute("disabled") || t.hasAttribute("submenu") || (this._menuItemActivated = !0, queueMicrotask(() => {
+				this._menuItemActivated = !1;
+			}));
 		}, this._onMenuClick = (e) => {
 			let t = m(e);
 			if (t && !t.hasAttribute("disabled")) {
@@ -146,7 +151,7 @@ var z = "wui-context-menu-item", B = 500, V = 5e3, H = 10, U = 1e3, W = "data-wu
 			if (this._isOpen) {
 				if (this._syncScrollLock(), !this._menu) {
 					let e = this._openScrim();
-					this._menu = D("context-menu", this, e), this._menu.panel.setAttribute("role", "menu"), this._menu.panel.setAttribute("aria-label", "上下文菜单"), this._menu.panel.addEventListener("click", this._onMenuClick);
+					this._menu = D("context-menu", this, e), this._menu.panel.setAttribute("role", "menu"), this._menu.panel.setAttribute("aria-label", "上下文菜单"), this._menu.panel.addEventListener("click", this._onMenuClick), this._menu.panel.addEventListener("click", this._onMenuItemActivation, !0);
 				}
 				if (!this._menuHandle) {
 					this._menuHandle = this._overlay.claim(this._menu.panel);
@@ -173,7 +178,7 @@ var z = "wui-context-menu-item", B = 500, V = 5e3, H = 10, U = 1e3, W = "data-wu
 		return !this.disabled && (this._x = e, this._y = t, this._shouldOpenInstantly = n, this._suppressInitialFocusVisible = r, this._centerOnPressPoint = i, this._outsideClickGuard.arm(), this._isOpen ? (this._closeSubmenusFrom(0, !0), this._closingSubmenus.restoreAll(), this._menuPositionGeneration.invalidate(), this._scheduleRefresh(), !1) : (this._isOpen = !0, !0));
 	}
 	close() {
-		this._isOpen && (this._isOpen = !1, this._menuPositionGeneration.invalidate(), this._closeSource === "menu-item" && this._releaseScrimModality(), this._closeSource = "default");
+		this._isOpen && (this._isOpen = !1, this._menuPositionGeneration.invalidate(), (this._closeSource === "menu-item" || this._menuItemActivated) && this._releaseScrimModality(), this._closeSource = "default", this._menuItemActivated = !1);
 	}
 	_scheduleRefresh() {
 		!this._refreshScheduled && this._isOpen && (this._refreshScheduled = !0, requestAnimationFrame(() => {
@@ -271,7 +276,7 @@ var z = "wui-context-menu-item", B = 500, V = 5e3, H = 10, U = 1e3, W = "data-wu
 		}
 		if (p(e).length === 0) return;
 		let i = D("context-submenu", this, this._scrim);
-		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), g(e, i.content), this._activeSubmenus[n] = i, this._activeSubmenuItems[n] = e, this._menuHandle && this._submenuHandles.set(i.panel, this._menuHandle.adopt(i.panel)), e.setAttribute("active", ""), this._positionSubmenu(e, i), a(i.panel, { isInstant: t }), this._hoverBinder.bind();
+		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), i.panel.addEventListener("click", this._onMenuItemActivation, !0), g(e, i.content), this._activeSubmenus[n] = i, this._activeSubmenuItems[n] = e, this._menuHandle && this._submenuHandles.set(i.panel, this._menuHandle.adopt(i.panel)), 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--) {