@greypan/web-ui 6.4.0 → 8.0.0

package/dist/components/input-number/index.js

@@ -1,17 +1,17 @@
 import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import "../icon/index.js";
-import t from "../../icons/generated/lucide-plus.js";
-import n from "../../icons/generated/lucide-minus.js";
-import r from "../../assets/glass.js";
-import { FormAssociated as i, FormAssociationController as a, defineFormAssociation as o, forwardInputValidity as s } from "../../shared/form-association/index.js";
-import { normalizeNumber as c } from "../../shared/normalize/index.js";
+import t from "../../assets/glass.js";
+import n from "../../icons/generated/lucide-plus.js";
+import r from "../../icons/generated/lucide-minus.js";
+import { normalizeNumber as i } from "../../shared/normalize/index.js";
+import { FormAssociated as a, FormAssociationController as o, defineFormAssociation as s, forwardInputValidity as c } from "../../shared/form-association/index.js";
 import l from "./style.js";
 import { LitElement as u, html as d, unsafeCSS as f } from "lit";
 import { customElement as p, property as m, state as h } from "lit/decorators.js";
 //#region src/components/input-number/index.ts
-var g = class extends i(u) {
+var g = class extends a(u) {
 	constructor(...e) {
-		super(...e), this.placeholder = "", this.name = "", this.disabled = !1, this.readonly = !1, this.required = !1, this._value = 0, this._min = 0, this._max = Infinity, this._step = 1, this._focused = !1, this._precision = 0, this._formAssociation = o({
+		super(...e), this.placeholder = "", this.name = "", this.disabled = !1, this.readonly = !1, this.required = !1, this._value = 0, this._min = 0, this._max = Infinity, this._step = 1, this._focused = !1, this._precision = 0, this._formAssociation = s({
 			host: this,
 			getState: () => this._value,
 			setState: (e) => {
@@ -25,10 +25,10 @@ var g = class extends i(u) {
 				Number.isFinite(t) && (this.value = t);
 			},
 			syncValidity: () => this._syncValidity()
-		}).make(), this._formAssociationController = new a(this, this._formAssociation);
+		}).make(), this._formAssociationController = new o(this, this._formAssociation);
 	}
 	static {
-		this.styles = [f(r), f(l)];
+		this.styles = [f(t), f(l)];
 	}
 	get precision() {
 		return this._precision;
@@ -53,19 +53,19 @@ var g = class extends i(u) {
 		return this._min;
 	}
 	set min(e) {
-		this._min = c(e, -Infinity, Infinity, 0);
+		this._min = i(e, -Infinity, Infinity, 0);
 	}
 	get max() {
 		return this._max;
 	}
 	set max(e) {
-		this._max = c(e, -Infinity, Infinity, Infinity);
+		this._max = i(e, -Infinity, Infinity, Infinity);
 	}
 	get step() {
 		return this._step;
 	}
 	set step(e) {
-		this._step = c(e, 0, Infinity, 1);
+		this._step = i(e, 0, Infinity, 1);
 	}
 	get _effectiveStep() {
 		return this._step;
@@ -81,7 +81,7 @@ var g = class extends i(u) {
 	}
 	_syncValidity() {
 		let e = this.shadowRoot?.querySelector("input"), t = this._formAssociation.getInternals();
-		t && e && typeof t.setValidity == "function" && s(t, e, [
+		t && e && typeof t.setValidity == "function" && c(t, e, [
 			"valueMissing",
 			"rangeUnderflow",
 			"rangeOverflow",
@@ -141,7 +141,7 @@ var g = class extends i(u) {
           ?disabled=${this._isDisabled || this.readonly || this.atMin}
           @click=${() => this.handleStep(-1)}
         >
-          <web-ui-icon .icon=${n}></web-ui-icon>
+          <web-ui-icon .icon=${r}></web-ui-icon>
         </button>
         <input
           type="number"
@@ -163,7 +163,7 @@ var g = class extends i(u) {
           ?disabled=${this._isDisabled || this.readonly || this.atMax}
           @click=${() => this.handleStep(1)}
         >
-          <web-ui-icon .icon=${t}></web-ui-icon>
+          <web-ui-icon .icon=${n}></web-ui-icon>
         </button>
       </div>
     `;

package/dist/components/layout/index.js

@@ -1,7 +1,7 @@
 import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import "../icon/index.js";
-import t from "../../icons/generated/radix-icons-panel-left-minimized.js";
-import n from "../../assets/glass.js";
+import t from "../../assets/glass.js";
+import n from "../../icons/generated/radix-icons-panel-left-minimized.js";
 import "../button/index.js";
 import { attachDragGesture as r } from "../../shared/gesture/drag-gesture.js";
 import { clamp as i } from "../../shared/gesture/physics.js";
@@ -24,7 +24,7 @@ var _ = class extends c {
 		};
 	}
 	static {
-		this.styles = [d(n), d(s)];
+		this.styles = [d(t), d(s)];
 	}
 	_toggleSidebar() {
 		if (this._isMobile) {
@@ -150,15 +150,15 @@ var _ = class extends c {
 		this._visibleBanner.setTarget(e ? t : null);
 	}
 	render() {
-		let e = !this.sidebarCollapsed, n = this._isMobile ? {} : { width: this._resizeWidth ?? (this.sidebarCollapsed ? this.collapsedWidth : this.sidebarWidth) }, r = e ? "折叠侧边栏" : "展开侧边栏", i = l`
+		let e = !this.sidebarCollapsed, t = this._isMobile ? {} : { width: this._resizeWidth ?? (this.sidebarCollapsed ? this.collapsedWidth : this.sidebarWidth) }, r = e ? "折叠侧边栏" : "展开侧边栏", i = l`
       <web-ui-button
         class="sidebar-toggle"
         icon
-        variant="secondary"
+        variant="ghost"
         @click="${this._toggleSidebar}"
         aria-label="${r}"
       >
-        <web-ui-icon .icon=${t}></web-ui-icon>
+        <web-ui-icon .icon=${n}></web-ui-icon>
       </web-ui-button>
     `, a = l`
       <div class="sidebar-viewport">
@@ -169,7 +169,7 @@ var _ = class extends c {
         <div class="sidebar-wrapper">
           <aside
             class="${h({ collapsed: !e })}"
-            style="${g(n)}"
+            style="${g(t)}"
           >
             <div class="aside-panel wui-glass">
               ${a}
@@ -206,7 +206,7 @@ var _ = class extends c {
             @click="${this._toggleSidebar}"
             aria-label="打开导航菜单"
           >
-            <web-ui-icon .icon=${t}></web-ui-icon>
+            <web-ui-icon .icon=${n}></web-ui-icon>
           </web-ui-button>
           <slot name="header"></slot>
         </header>
@@ -223,7 +223,7 @@ var _ = class extends c {
         @open-change="${this._onDrawerChange}"
         style="${g({
 			"--wui-drawer-width": this.sidebarWidth,
-			"--wui-drawer-radius": "var(--wui-layout-sidebar-radius, var(--wui-radius-overlay, 28px))"
+			"--wui-drawer-radius": "var(--wui-layout-sidebar-radius, 24px)"
 		})}"
       >
         ${a}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/layout/index.ts"],"sourcesContent":["import { html, LitElement, nothing, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { styleMap } from 'lit/directives/style-map.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport '@/components/icon'\nimport '@/components/button'\nimport '@/components/drawer'\nimport { radixIconsPanelLeftMinimized } from '@/icons'\nimport { attachDragGesture, clamp, type DragGestureHandle } from '@/shared/gesture'\nimport { defineVisibleAreaTracker, VisibleAreaController } from '@/shared/visible-area'\n\nimport style from './style.css?inline'\n\n/**\n * Layout 组件 - 提供页面布局框架，支持可折叠侧边栏\n *\n * @fires sidebar-collapsed-change - 桌面端侧边栏折叠状态变更请求时触发\n * @fires sidebar-open-change - 移动端侧边栏 Drawer 开关请求时触发\n * @fires sidebar-width-change - 桌面端侧边栏拖拽调宽结束时触发，携带最终宽度（受控请求）\n * @slot banner - 顶部 Banner 区域（全宽，随页面滚动，可选）\n * @slot header - 内容区顶部 header（sticky）\n * @slot sidebar - 侧边栏内容；Consumer 决定其内部固定区域与滚动容器\n * @slot tabbar - 底部 tabbar 区域\n * @slot default - 主内容区\n */\n@customElement('web-ui-layout')\nexport class WebUiLayout extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n  /**\n   * 桌面端 Sidebar 的持久布局偏好。\n   *\n   * `true` 只会将桌面 Sidebar 收窄到 `collapsedWidth`，不会影响移动端 Drawer。\n   * 它不与 `sidebarOpen` 合并：前者是跨视口保留的密度选择，后者是移动端瞬时的 modal 可见性。\n   */\n  @property({ type: Boolean, attribute: 'sidebar-collapsed', reflect: true })\n  sidebarCollapsed = false\n\n  @property({ type: String, attribute: 'sidebar-width', reflect: true })\n  sidebarWidth = '240px'\n\n  @property({ type: String, attribute: 'collapsed-width', reflect: true })\n  collapsedWidth = '68px'\n\n  /** 启用桌面端 Sidebar 拖拽调宽（折叠态隐藏 handle）。 */\n  @property({ type: Boolean, attribute: 'sidebar-resizable', reflect: true })\n  sidebarResizable = false\n\n  /**\n   * 拖拽调宽的下限（px，其他单位不解析）；未设置时回退为 `collapsedWidth`，\n   * 防止拖到不可用宽度。上限 `sidebar-max-width` 受内置 50vw 硬上限钳制。\n   */\n  @property({ type: String, attribute: 'sidebar-min-width', reflect: true })\n  sidebarMinWidth = ''\n\n  /** 拖拽调宽的上限（px，其他单位不解析）；始终受内置 50vw 硬上限钳制。 */\n  @property({ type: String, attribute: 'sidebar-max-width', reflect: true })\n  sidebarMaxWidth = ''\n\n  /**\n   * 移动端 web-ui-drawer 的瞬时可见性。\n   *\n   * Drawer Toggle、Escape 和遮罩关闭都通过 `sidebar-open-change` 请求更新它；它不会改变桌面端的折叠偏好。\n   * 因而不与 `sidebarCollapsed` 合并，避免响应式切换时将一次移动端交互误写为桌面端布局选择。\n   */\n  @property({ type: Boolean, attribute: 'sidebar-open', reflect: true })\n  sidebarOpen = false\n\n  /**\n   * 启用 header 晕染效果\n   */\n  @property({ type: Boolean, attribute: 'header-glow', reflect: true })\n  headerGlow = false\n\n  @state() private _isMobile = false\n\n  private readonly _visibleBanner = defineVisibleAreaTracker({\n    onVisibleAreaChange: area => {\n      this.style.setProperty('--wui-layout-visible-banner-height', `${area.height}px`)\n    }\n  }).make()\n\n  private readonly _visibleBannerController = new VisibleAreaController(this, this._visibleBanner)\n\n  private _toggleSidebar() {\n    if (this._isMobile) {\n      this._emitSidebarOpenChange(!this.sidebarOpen)\n      return\n    }\n\n    this._emitSidebarCollapsedChange(!this.sidebarCollapsed)\n  }\n\n  private _emitSidebarCollapsedChange(collapsed: boolean) {\n    this.dispatchEvent(\n      new CustomEvent('sidebar-collapsed-change', {\n        detail: { collapsed },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private _emitSidebarOpenChange(open: boolean) {\n    this.dispatchEvent(\n      new CustomEvent('sidebar-open-change', {\n        detail: { open },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private _onDrawerChange(e: CustomEvent<{ open: boolean }>) {\n    e.stopPropagation()\n    this._emitSidebarOpenChange(e.detail.open)\n  }\n\n  // ===== 桌面端 Sidebar 拖拽调宽 =====\n\n  private _resizeGesture: DragGestureHandle | null = null\n  private _resizeStartWidth = 0\n  // 拖拽中的临时宽度；由 render 的 styleMap 统一写入，避免与 Lit 样式管理竞争。\n  @state() private _resizeWidth: string | null = null\n\n  private _parsePx(value: string, fallback: number): number {\n    const parsed = Number.parseFloat(value)\n    return Number.isFinite(parsed) ? parsed : fallback\n  }\n\n  private _resolveSidebarMinWidth(): number {\n    // 未设置时回退为折叠宽度，防止拖到不可用宽度。\n    return this.sidebarMinWidth\n      ? this._parsePx(this.sidebarMinWidth, this._parsePx(this.collapsedWidth, 68))\n      : this._parsePx(this.collapsedWidth, 68)\n  }\n\n  private _resolveSidebarMaxWidth(): number {\n    // 组件内置硬上限：Sidebar 最多占视口一半（无需调用方设置）。\n    // 调用方 sidebar-max-width 在该上限内生效，防止拖拽占据整个视口。\n    const halfViewport = Math.floor(window.innerWidth / 2)\n    const configured = this.sidebarMaxWidth ? this._parsePx(this.sidebarMaxWidth, halfViewport) : halfViewport\n    const upper = Math.min(configured, halfViewport)\n    return Math.max(upper, this._resolveSidebarMinWidth())\n  }\n\n  private _isResizing(): boolean {\n    return this._resizeGesture?.isDragging() ?? false\n  }\n\n  private _handleResizePointerDown(e: PointerEvent) {\n    if (!this.sidebarResizable || this.sidebarCollapsed || this._isMobile || this._isResizing()) return\n    // jsdom 等环境的 PointerEvent 可能缺失 isPrimary，仅在明确为 false（多点触控副指针）时拒绝。\n    if (e.isPrimary === false) return\n\n    const aside = this.renderRoot.querySelector('aside')\n    if (!aside) return\n\n    // 拖拽起点以 computed width 为准，并丢弃键盘未提交的调整（Enter 才提交、\n    // Escape 撤回；抓取隐式放弃），保证零位移松手不会派发陈旧宽度。\n    this._resizeStartWidth = this._parsePx(window.getComputedStyle(aside).width, this._parsePx(this.sidebarWidth, 240))\n    this._resizeWidth = null\n    aside.classList.add('is-resizing')\n\n    this._resizeGesture = attachDragGesture(e, {\n      axis: 'x',\n      onMove: info => {\n        // 向右拖增宽、向左拖收窄（handle 在右缘）；钳制在 [min, max] 与视口内。\n        const next = this._resizeStartWidth + info.deltaX\n        const clamped = clamp(next, this._resolveSidebarMinWidth(), this._resolveSidebarMaxWidth())\n        this._resizeWidth = `${Math.round(clamped)}px`\n      },\n      onEnd: () => {\n        // 零位移松手（点击而非拖拽）不视为调宽动作：按 cancel 语义静默收尾。\n        if (this._resizeWidth === null) {\n          this._resetActiveResize()\n          return\n        }\n        const width = this._resizeWidth\n        this._resetActiveResize()\n        // 受控契约：松手派发请求并交还 prop 管辖，由 Consumer 回写 sidebar-width。\n        this.dispatchEvent(\n          new CustomEvent('sidebar-width-change', {\n            detail: { width },\n            bubbles: true,\n            composed: true\n          })\n        )\n      },\n      onCancel: () => {\n        this._resetActiveResize()\n      }\n    })\n  }\n\n  // 终结进行中的拖拽：清手势状态、移除跟手 class，宽度过渡回 prop 管辖，不派发事件。\n  // pointer cancel 与视口跨越移动端断点（handle 随桌面 layout 卸载）共用此收尾。\n  private _resetActiveResize() {\n    this._resizeGesture?.destroy()\n    this._resizeGesture = null\n    this.renderRoot.querySelector('aside')?.classList.remove('is-resizing')\n    this._resizeWidth = null\n  }\n\n  // 键盘调宽（WAI-ARIA splitter 模式）：方向键步进 16px（Shift 加速 64px）调整\n  // 临时宽度，Enter 以受控请求派发 `sidebar-width-change`（与指针松手同语义），\n  // Escape 撤回临时宽度交还 prop 管辖，Home/End 直接到 min/max。\n  private _handleResizeKeydown(e: KeyboardEvent) {\n    if (!this.sidebarResizable || this.sidebarCollapsed || this._isMobile || this._isResizing()) return\n\n    const min = this._resolveSidebarMinWidth()\n    const max = this._resolveSidebarMaxWidth()\n    const aside = this.renderRoot.querySelector('aside')\n    const current = this._resizeWidth\n      ? this._parsePx(this._resizeWidth, min)\n      : this._parsePx(aside ? window.getComputedStyle(aside).width : this.sidebarWidth, min)\n    const step = e.shiftKey ? 64 : 16\n    let next: number | null = null\n\n    switch (e.key) {\n      case 'ArrowLeft':\n        next = Math.max(min, current - step)\n        break\n      case 'ArrowRight':\n        next = Math.min(max, current + step)\n        break\n      case 'Home':\n        next = min\n        break\n      case 'End':\n        next = max\n        break\n      case 'Enter':\n        // 无未提交调整时不派发（焦点停留时的回车噪声）\n        if (this._resizeWidth !== null) {\n          const width = this._resizeWidth\n          this._resizeWidth = null\n          this.dispatchEvent(\n            new CustomEvent('sidebar-width-change', { detail: { width }, bubbles: true, composed: true })\n          )\n        }\n        e.preventDefault()\n        return\n      case 'Escape':\n        this._resizeWidth = null\n        e.preventDefault()\n        return\n      default:\n        return\n    }\n    e.preventDefault()\n    this._resizeWidth = `${Math.round(next)}px`\n  }\n\n  private _checkMobile() {\n    const nextMobile = window.innerWidth <= 640\n    // 视口跨越移动端断点会卸载桌面 layout（handle 随之消失）；必须先终结进行中的\n    // 拖拽，否则 _resizePointerId 悬挂，切回桌面后所有新的拖拽在入口被拦截。\n    if (nextMobile !== this._isMobile && this._isResizing()) this._resetActiveResize()\n    this._isMobile = nextMobile\n  }\n\n  private _resizeTimeout: ReturnType<typeof setTimeout> | null = null\n\n  private _handleResize = () => {\n    if (this._resizeTimeout !== null) clearTimeout(this._resizeTimeout)\n    this._resizeTimeout = setTimeout(() => {\n      this._checkMobile()\n      this._resizeTimeout = null\n    }, 100)\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this._checkMobile()\n    window.addEventListener('resize', this._handleResize)\n    void this.updateComplete.then(() => {\n      if (this.isConnected) this._syncBannerPresence()\n    })\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    this._resetActiveResize()\n    window.removeEventListener('resize', this._handleResize)\n    if (this._resizeTimeout !== null) clearTimeout(this._resizeTimeout)\n    this._resizeTimeout = null\n  }\n\n  override firstUpdated() {\n    this._syncBannerPresence()\n  }\n\n  private _onBannerSlotChange() {\n    this._syncBannerPresence()\n  }\n\n  private _syncBannerPresence() {\n    const bannerSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"banner\"]')\n    const hasBanner =\n      bannerSlot\n        ?.assignedNodes()\n        .some(\n          node =>\n            node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && !!node.textContent?.trim())\n        ) ?? false\n    const banner = this.shadowRoot?.querySelector<HTMLElement>('.layout-banner') ?? null\n    this._visibleBanner.setTarget(hasBanner ? banner : null)\n  }\n\n  override render() {\n    const isSidebarOpen = !this.sidebarCollapsed\n    // 拖拽中的临时宽度优先于 prop 宽度；移动端宽度由 Drawer 内部变量管理。\n    const sidebarStyle = this._isMobile\n      ? {}\n      : { width: this._resizeWidth ?? (this.sidebarCollapsed ? this.collapsedWidth : this.sidebarWidth) }\n\n    const toggleLabel = isSidebarOpen ? '折叠侧边栏' : '展开侧边栏'\n\n    const desktopToggle = html`\n      <web-ui-button\n        class=\"sidebar-toggle\"\n        icon\n        variant=\"secondary\"\n        @click=\"${this._toggleSidebar}\"\n        aria-label=\"${toggleLabel}\"\n      >\n        <web-ui-icon .icon=${radixIconsPanelLeftMinimized}></web-ui-icon>\n      </web-ui-button>\n    `\n\n    const sidebarViewport = html`\n      <div class=\"sidebar-viewport\">\n        <slot name=\"sidebar\"></slot>\n      </div>\n    `\n\n    // 桌面端布局\n    const desktopLayout = html`\n      <div class=\"layout-body\">\n        <div class=\"sidebar-wrapper\">\n          <aside\n            class=\"${classMap({\n              collapsed: !isSidebarOpen\n            })}\"\n            style=\"${styleMap(sidebarStyle)}\"\n          >\n            <div class=\"aside-panel wui-glass\">\n              ${sidebarViewport}\n              <div class=\"sidebar-toggle-area\">${desktopToggle}</div>\n            </div>\n            ${\n              this.sidebarResizable && !this.sidebarCollapsed\n                ? html`\n                    <div\n                      class=\"sidebar-resize-handle\"\n                      role=\"separator\"\n                      tabindex=\"0\"\n                      aria-orientation=\"vertical\"\n                      aria-label=\"调整侧边栏宽度\"\n                      @pointerdown=${this._handleResizePointerDown}\n                      @keydown=${this._handleResizeKeydown}\n                    ></div>\n                  `\n                : nothing\n            }\n          </aside>\n        </div>\n        <div class=\"layout-content\">\n          <header>\n            <slot name=\"header\"></slot>\n          </header>\n          <main><slot></slot></main>\n          <footer><slot name=\"tabbar\"></slot></footer>\n        </div>\n      </div>\n    `\n\n    // 移动端布局\n    const mobileLayout = html`\n      <div class=\"layout-content\">\n        <header>\n          <web-ui-button\n            class=\"mobile-toggle\"\n            icon\n            variant=\"glass\"\n            @click=\"${this._toggleSidebar}\"\n            aria-label=\"打开导航菜单\"\n          >\n            <web-ui-icon .icon=${radixIconsPanelLeftMinimized}></web-ui-icon>\n          </web-ui-button>\n          <slot name=\"header\"></slot>\n        </header>\n        <main><slot></slot></main>\n        <footer><slot name=\"tabbar\"></slot></footer>\n      </div>\n\n      <web-ui-drawer\n        placement=\"left\"\n        ?open=\"${this.sidebarOpen}\"\n        controlled\n        draggable\n        dialog-label=\"主导航\"\n        @open-change=\"${this._onDrawerChange}\"\n        style=\"${styleMap({\n          '--wui-drawer-width': this.sidebarWidth,\n          '--wui-drawer-radius': 'var(--wui-layout-sidebar-radius, var(--wui-radius-overlay, 28px))'\n        })}\"\n      >\n        ${sidebarViewport}\n      </web-ui-drawer>\n    `\n\n    return html`\n      <div class=\"layout-page\">\n        <div class=\"layout-banner\">\n          <slot name=\"banner\" @slotchange=\"${this._onBannerSlotChange}\"></slot>\n        </div>\n        ${this._isMobile ? mobileLayout : desktopLayout}\n      </div>\n    `\n  }\n\n  declare readonly $events: {\n    'sidebar-collapsed-change': CustomEvent<{ collapsed: boolean }>\n    'sidebar-open-change': CustomEvent<{ open: boolean }>\n    'sidebar-width-change': CustomEvent<{ width: string }>\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-layout': WebUiLayout\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AA4BO,IAAM,IAAN,cAA0B,EAAW;;EA8OZ,aApOX,KAAA,mBAAA,IAGJ,KAAA,eAAA,SAGE,KAAA,iBAAA,QAIE,KAAA,mBAAA,IAOD,KAAA,kBAAA,IAIA,KAAA,kBAAA,IASJ,KAAA,cAAA,IAMD,KAAA,aAAA,IAEgB,KAAA,YAAA,IAEK,KAAA,iBAAA,EAAyB,EACzD,sBAAqB,MAAQ;GAC3B,KAAK,MAAM,YAAY,sCAAsC,GAAG,EAAK,OAAO,GAAG;EACjF,EACF,CAAC,CAAC,CAAC,KAAK,GAEoC,KAAA,2BAAA,IAAI,EAAsB,MAAM,KAAK,cAAc,GAsC5C,KAAA,iBAAA,MACvB,KAAA,oBAAA,GAEmB,KAAA,eAAA,MA2IgB,KAAA,iBAAA,MAEjC,KAAA,sBAAA;GAE5B,AADI,KAAK,mBAAmB,QAAM,aAAa,KAAK,cAAc,GAClE,KAAK,iBAAiB,iBAAiB;IAErC,AADA,KAAK,aAAa,GAClB,KAAK,iBAAiB;GACxB,GAAG,GAAG;EACR;;;EAnPyB,KAAA,SAAA,CAAC,EAAU,CAAK,GAAG,EAAU,CAAK,CAAC;;CAyD5D,iBAAyB;EACvB,IAAI,KAAK,WAAW;GAClB,KAAK,uBAAuB,CAAC,KAAK,WAAW;GAC7C;EACF;EAEA,KAAK,4BAA4B,CAAC,KAAK,gBAAgB;CACzD;CAEA,4BAAoC,GAAoB;EACtD,KAAK,cACH,IAAI,YAAY,4BAA4B;GAC1C,QAAQ,EAAE,aAAU;GACpB,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAEA,uBAA+B,GAAe;EAC5C,KAAK,cACH,IAAI,YAAY,uBAAuB;GACrC,QAAQ,EAAE,QAAK;GACf,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAEA,gBAAwB,GAAmC;EAEzD,AADA,EAAE,gBAAgB,GAClB,KAAK,uBAAuB,EAAE,OAAO,IAAI;CAC3C;CASA,SAAiB,GAAe,GAA0B;EACxD,IAAM,IAAS,OAAO,WAAW,CAAK;EACtC,OAAO,OAAO,SAAS,CAAM,IAAI,IAAS;CAC5C;CAEA,0BAA0C;EAExC,OAAO,KAAK,kBACR,KAAK,SAAS,KAAK,iBAAiB,KAAK,SAAS,KAAK,gBAAgB,EAAE,CAAC,IAC1E,KAAK,SAAS,KAAK,gBAAgB,EAAE;CAC3C;CAEA,0BAA0C;EAGxC,IAAM,IAAe,KAAK,MAAM,OAAO,aAAa,CAAC,GAC/C,IAAa,KAAK,kBAAkB,KAAK,SAAS,KAAK,iBAAiB,CAAY,IAAI;EAE9F,OAAO,KAAK,IADE,KAAK,IAAI,GAAY,CACnB,GAAO,KAAK,wBAAwB,CAAC;CACvD;CAEA,cAA+B;EAC7B,OAAO,KAAK,gBAAgB,WAAW,KAAK;CAC9C;CAEA,yBAAiC,GAAiB;EAGhD,IAFI,CAAC,KAAK,oBAAoB,KAAK,oBAAoB,KAAK,aAAa,KAAK,YAAY,KAEtF,EAAE,cAAc,IAAO;EAE3B,IAAM,IAAQ,KAAK,WAAW,cAAc,OAAO;EAC9C,MAIL,KAAK,oBAAoB,KAAK,SAAS,OAAO,iBAAiB,CAAK,CAAC,CAAC,OAAO,KAAK,SAAS,KAAK,cAAc,GAAG,CAAC,GAClH,KAAK,eAAe,MACpB,EAAM,UAAU,IAAI,aAAa,GAEjC,KAAK,iBAAiB,EAAkB,GAAG;GACzC,MAAM;GACN,SAAQ,MAAQ;IAEd,IAAM,IAAO,KAAK,oBAAoB,EAAK,QACrC,IAAU,EAAM,GAAM,KAAK,wBAAwB,GAAG,KAAK,wBAAwB,CAAC;IAC1F,KAAK,eAAe,GAAG,KAAK,MAAM,CAAO,EAAE;GAC7C;GACA,aAAa;IAEX,IAAI,KAAK,iBAAiB,MAAM;KAC9B,KAAK,mBAAmB;KACxB;IACF;IACA,IAAM,IAAQ,KAAK;IAGnB,AAFA,KAAK,mBAAmB,GAExB,KAAK,cACH,IAAI,YAAY,wBAAwB;KACtC,QAAQ,EAAE,SAAM;KAChB,SAAS;KACT,UAAU;IACZ,CAAC,CACH;GACF;GACA,gBAAgB;IACd,KAAK,mBAAmB;GAC1B;EACF,CAAC;CACH;CAIA,qBAA6B;EAI3B,AAHA,KAAK,gBAAgB,QAAQ,GAC7B,KAAK,iBAAiB,MACtB,KAAK,WAAW,cAAc,OAAO,CAAC,EAAE,UAAU,OAAO,aAAa,GACtE,KAAK,eAAe;CACtB;CAKA,qBAA6B,GAAkB;EAC7C,IAAI,CAAC,KAAK,oBAAoB,KAAK,oBAAoB,KAAK,aAAa,KAAK,YAAY,GAAG;EAE7F,IAAM,IAAM,KAAK,wBAAwB,GACnC,IAAM,KAAK,wBAAwB,GACnC,IAAQ,KAAK,WAAW,cAAc,OAAO,GAC7C,IAAU,KAAK,eACjB,KAAK,SAAS,KAAK,cAAc,CAAG,IACpC,KAAK,SAAS,IAAQ,OAAO,iBAAiB,CAAK,CAAC,CAAC,QAAQ,KAAK,cAAc,CAAG,GACjF,IAAO,EAAE,WAAW,KAAK,IAC3B,IAAsB;EAE1B,QAAQ,EAAE,KAAV;GACE,KAAK;IACH,IAAO,KAAK,IAAI,GAAK,IAAU,CAAI;IACnC;GACF,KAAK;IACH,IAAO,KAAK,IAAI,GAAK,IAAU,CAAI;IACnC;GACF,KAAK;IACH,IAAO;IACP;GACF,KAAK;IACH,IAAO;IACP;GACF,KAAK;IAEH,IAAI,KAAK,iBAAiB,MAAM;KAC9B,IAAM,IAAQ,KAAK;KAEnB,AADA,KAAK,eAAe,MACpB,KAAK,cACH,IAAI,YAAY,wBAAwB;MAAE,QAAQ,EAAE,SAAM;MAAG,SAAS;MAAM,UAAU;KAAK,CAAC,CAC9F;IACF;IACA,EAAE,eAAe;IACjB;GACF,KAAK;IAEH,AADA,KAAK,eAAe,MACpB,EAAE,eAAe;IACjB;GACF,SACE;EACJ;EAEA,AADA,EAAE,eAAe,GACjB,KAAK,eAAe,GAAG,KAAK,MAAM,CAAI,EAAE;CAC1C;CAEA,eAAuB;EACrB,IAAM,IAAa,OAAO,cAAc;EAIxC,AADI,MAAe,KAAK,aAAa,KAAK,YAAY,KAAG,KAAK,mBAAmB,GACjF,KAAK,YAAY;CACnB;CAYA,oBAA6B;EAI3B,AAHA,MAAM,kBAAkB,GACxB,KAAK,aAAa,GAClB,OAAO,iBAAiB,UAAU,KAAK,aAAa,GACpD,KAAU,eAAe,WAAW;GAClC,AAAI,KAAK,eAAa,KAAK,oBAAoB;EACjD,CAAC;CACH;CAEA,uBAAgC;EAK9B,AAJA,MAAM,qBAAqB,GAC3B,KAAK,mBAAmB,GACxB,OAAO,oBAAoB,UAAU,KAAK,aAAa,GACnD,KAAK,mBAAmB,QAAM,aAAa,KAAK,cAAc,GAClE,KAAK,iBAAiB;CACxB;CAEA,eAAwB;EACtB,KAAK,oBAAoB;CAC3B;CAEA,sBAA8B;EAC5B,KAAK,oBAAoB;CAC3B;CAEA,sBAA8B;EAE5B,IAAM,IADa,KAAK,WAAW,cAA+B,uBAEhE,CAAA,EACI,cAAc,CAAC,CAChB,MACC,MACE,EAAK,aAAa,KAAK,gBAAiB,EAAK,aAAa,KAAK,aAAa,CAAC,CAAC,EAAK,aAAa,KAAK,CACzG,KAAK,IACH,IAAS,KAAK,YAAY,cAA2B,gBAAgB,KAAK;EAChF,KAAK,eAAe,UAAU,IAAY,IAAS,IAAI;CACzD;CAEA,SAAkB;EAChB,IAAM,IAAgB,CAAC,KAAK,kBAEtB,IAAe,KAAK,YACtB,CAAC,IACD,EAAE,OAAO,KAAK,iBAAiB,KAAK,mBAAmB,KAAK,iBAAiB,KAAK,cAAc,GAE9F,IAAc,IAAgB,UAAU,SAExC,IAAgB,CAAI;;;;;kBAKZ,KAAK,eAAe;sBAChB,EAAY;;6BAEL,EAA6B;;OAIhD,IAAkB,CAAI;;;;OAOtB,IAAgB,CAAI;;;;qBAIT,EAAS,EAChB,WAAW,CAAC,EACd,CAAC,EAAE;qBACM,EAAS,CAAY,EAAE;;;gBAG5B,EAAgB;iDACiB,EAAc;;cAGjD,KAAK,oBAAoB,CAAC,KAAK,mBAC3B,CAAI;;;;;;;qCAOe,KAAK,yBAAyB;iCAClC,KAAK,qBAAqB;;sBAGzC,EACL;;;;;;;;;;;OAcH,IAAe,CAAI;;;;;;;sBAOP,KAAK,eAAe;;;iCAGT,EAA6B;;;;;;;;;;iBAU7C,KAAK,YAAY;;;;wBAIV,KAAK,gBAAgB;iBAC5B,EAAS;GAChB,sBAAsB,KAAK;GAC3B,uBAAuB;EACzB,CAAC,EAAE;;UAED,EAAgB;;;EAItB,OAAO,CAAI;;;6CAG8B,KAAK,oBAAoB;;UAE5D,KAAK,YAAY,IAAe,EAAc;;;CAGtD;AAOF;AAzYG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,WAAW;CAAqB,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,oBAAA,KAAA,CAAA,GAGzE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,WAAW;CAAiB,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,GAGpE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,WAAW;CAAmB,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,GAItE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,WAAW;CAAqB,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,oBAAA,KAAA,CAAA,GAOzE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,WAAW;CAAqB,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,GAIxE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,WAAW;CAAqB,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,GASxE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,WAAW;CAAgB,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,GAMpE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,WAAW;CAAe,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GAGnE,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAiDN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,GAlGR,IAAA,EAAA,CAAA,EAAc,eAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/layout/index.ts"],"sourcesContent":["import { html, LitElement, nothing, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { styleMap } from 'lit/directives/style-map.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport '@/components/icon'\nimport '@/components/button'\nimport '@/components/drawer'\nimport { radixIconsPanelLeftMinimized } from '@/icons'\nimport { attachDragGesture, clamp, type DragGestureHandle } from '@/shared/gesture'\nimport { defineVisibleAreaTracker, VisibleAreaController } from '@/shared/visible-area'\n\nimport style from './style.css?inline'\n\n/**\n * Layout 组件 - 提供页面布局框架，支持可折叠侧边栏\n *\n * @fires sidebar-collapsed-change - 桌面端侧边栏折叠状态变更请求时触发\n * @fires sidebar-open-change - 移动端侧边栏 Drawer 开关请求时触发\n * @fires sidebar-width-change - 桌面端侧边栏拖拽调宽结束时触发，携带最终宽度（受控请求）\n * @slot banner - 顶部 Banner 区域（全宽，随页面滚动，可选）\n * @slot header - 内容区顶部 header（sticky）\n * @slot sidebar - 侧边栏内容；Consumer 决定其内部固定区域与滚动容器\n * @slot tabbar - 底部 tabbar 区域\n * @slot default - 主内容区\n */\n@customElement('web-ui-layout')\nexport class WebUiLayout extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n  /**\n   * 桌面端 Sidebar 的持久布局偏好。\n   *\n   * `true` 只会将桌面 Sidebar 收窄到 `collapsedWidth`，不会影响移动端 Drawer。\n   * 它不与 `sidebarOpen` 合并：前者是跨视口保留的密度选择，后者是移动端瞬时的 modal 可见性。\n   */\n  @property({ type: Boolean, attribute: 'sidebar-collapsed', reflect: true })\n  sidebarCollapsed = false\n\n  @property({ type: String, attribute: 'sidebar-width', reflect: true })\n  sidebarWidth = '240px'\n\n  @property({ type: String, attribute: 'collapsed-width', reflect: true })\n  collapsedWidth = '68px'\n\n  /** 启用桌面端 Sidebar 拖拽调宽（折叠态隐藏 handle）。 */\n  @property({ type: Boolean, attribute: 'sidebar-resizable', reflect: true })\n  sidebarResizable = false\n\n  /**\n   * 拖拽调宽的下限（px，其他单位不解析）；未设置时回退为 `collapsedWidth`，\n   * 防止拖到不可用宽度。上限 `sidebar-max-width` 受内置 50vw 硬上限钳制。\n   */\n  @property({ type: String, attribute: 'sidebar-min-width', reflect: true })\n  sidebarMinWidth = ''\n\n  /** 拖拽调宽的上限（px，其他单位不解析）；始终受内置 50vw 硬上限钳制。 */\n  @property({ type: String, attribute: 'sidebar-max-width', reflect: true })\n  sidebarMaxWidth = ''\n\n  /**\n   * 移动端 web-ui-drawer 的瞬时可见性。\n   *\n   * Drawer Toggle、Escape 和遮罩关闭都通过 `sidebar-open-change` 请求更新它；它不会改变桌面端的折叠偏好。\n   * 因而不与 `sidebarCollapsed` 合并，避免响应式切换时将一次移动端交互误写为桌面端布局选择。\n   */\n  @property({ type: Boolean, attribute: 'sidebar-open', reflect: true })\n  sidebarOpen = false\n\n  /**\n   * 启用 header 晕染效果\n   */\n  @property({ type: Boolean, attribute: 'header-glow', reflect: true })\n  headerGlow = false\n\n  @state() private _isMobile = false\n\n  private readonly _visibleBanner = defineVisibleAreaTracker({\n    onVisibleAreaChange: area => {\n      this.style.setProperty('--wui-layout-visible-banner-height', `${area.height}px`)\n    }\n  }).make()\n\n  private readonly _visibleBannerController = new VisibleAreaController(this, this._visibleBanner)\n\n  private _toggleSidebar() {\n    if (this._isMobile) {\n      this._emitSidebarOpenChange(!this.sidebarOpen)\n      return\n    }\n\n    this._emitSidebarCollapsedChange(!this.sidebarCollapsed)\n  }\n\n  private _emitSidebarCollapsedChange(collapsed: boolean) {\n    this.dispatchEvent(\n      new CustomEvent('sidebar-collapsed-change', {\n        detail: { collapsed },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private _emitSidebarOpenChange(open: boolean) {\n    this.dispatchEvent(\n      new CustomEvent('sidebar-open-change', {\n        detail: { open },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private _onDrawerChange(e: CustomEvent<{ open: boolean }>) {\n    e.stopPropagation()\n    this._emitSidebarOpenChange(e.detail.open)\n  }\n\n  private _resizeGesture: DragGestureHandle | null = null\n  private _resizeStartWidth = 0\n  // 拖拽中的临时宽度；由 render 的 styleMap 统一写入，避免与 Lit 样式管理竞争。\n  @state() private _resizeWidth: string | null = null\n\n  private _parsePx(value: string, fallback: number): number {\n    const parsed = Number.parseFloat(value)\n    return Number.isFinite(parsed) ? parsed : fallback\n  }\n\n  private _resolveSidebarMinWidth(): number {\n    return this.sidebarMinWidth\n      ? this._parsePx(this.sidebarMinWidth, this._parsePx(this.collapsedWidth, 68))\n      : this._parsePx(this.collapsedWidth, 68)\n  }\n\n  private _resolveSidebarMaxWidth(): number {\n    // 组件内置硬上限：Sidebar 最多占视口一半（无需调用方设置）。\n    // 调用方 sidebar-max-width 在该上限内生效，防止拖拽占据整个视口。\n    const halfViewport = Math.floor(window.innerWidth / 2)\n    const configured = this.sidebarMaxWidth ? this._parsePx(this.sidebarMaxWidth, halfViewport) : halfViewport\n    const upper = Math.min(configured, halfViewport)\n    return Math.max(upper, this._resolveSidebarMinWidth())\n  }\n\n  private _isResizing(): boolean {\n    return this._resizeGesture?.isDragging() ?? false\n  }\n\n  private _handleResizePointerDown(e: PointerEvent) {\n    if (!this.sidebarResizable || this.sidebarCollapsed || this._isMobile || this._isResizing()) return\n    // jsdom 等环境的 PointerEvent 可能缺失 isPrimary，仅在明确为 false（多点触控副指针）时拒绝。\n    if (e.isPrimary === false) return\n\n    const aside = this.renderRoot.querySelector('aside')\n    if (!aside) return\n\n    // 拖拽起点以 computed width 为准，并丢弃键盘未提交的调整（Enter 才提交、\n    // Escape 撤回；抓取隐式放弃），保证零位移松手不会派发陈旧宽度。\n    this._resizeStartWidth = this._parsePx(window.getComputedStyle(aside).width, this._parsePx(this.sidebarWidth, 240))\n    this._resizeWidth = null\n    aside.classList.add('is-resizing')\n\n    this._resizeGesture = attachDragGesture(e, {\n      axis: 'x',\n      onMove: info => {\n        // 向右拖增宽、向左拖收窄（handle 在右缘）；钳制在 [min, max] 与视口内。\n        const next = this._resizeStartWidth + info.deltaX\n        const clamped = clamp(next, this._resolveSidebarMinWidth(), this._resolveSidebarMaxWidth())\n        this._resizeWidth = `${Math.round(clamped)}px`\n      },\n      onEnd: () => {\n        // 零位移松手（点击而非拖拽）不视为调宽动作：按 cancel 语义静默收尾。\n        if (this._resizeWidth === null) {\n          this._resetActiveResize()\n          return\n        }\n        const width = this._resizeWidth\n        this._resetActiveResize()\n        // 受控契约：松手派发请求并交还 prop 管辖，由 Consumer 回写 sidebar-width。\n        this.dispatchEvent(\n          new CustomEvent('sidebar-width-change', {\n            detail: { width },\n            bubbles: true,\n            composed: true\n          })\n        )\n      },\n      onCancel: () => {\n        this._resetActiveResize()\n      }\n    })\n  }\n\n  // 终结进行中的拖拽：清手势状态、移除跟手 class，宽度过渡回 prop 管辖，不派发事件。\n  // pointer cancel 与视口跨越移动端断点（handle 随桌面 layout 卸载）共用此收尾。\n  private _resetActiveResize() {\n    this._resizeGesture?.destroy()\n    this._resizeGesture = null\n    this.renderRoot.querySelector('aside')?.classList.remove('is-resizing')\n    this._resizeWidth = null\n  }\n\n  // 键盘调宽（WAI-ARIA splitter 模式）：方向键步进 16px（Shift 加速 64px）调整\n  // 临时宽度，Enter 以受控请求派发 `sidebar-width-change`（与指针松手同语义），\n  // Escape 撤回临时宽度交还 prop 管辖，Home/End 直接到 min/max。\n  private _handleResizeKeydown(e: KeyboardEvent) {\n    if (!this.sidebarResizable || this.sidebarCollapsed || this._isMobile || this._isResizing()) return\n\n    const min = this._resolveSidebarMinWidth()\n    const max = this._resolveSidebarMaxWidth()\n    const aside = this.renderRoot.querySelector('aside')\n    const current = this._resizeWidth\n      ? this._parsePx(this._resizeWidth, min)\n      : this._parsePx(aside ? window.getComputedStyle(aside).width : this.sidebarWidth, min)\n    const step = e.shiftKey ? 64 : 16\n    let next: number | null = null\n\n    switch (e.key) {\n      case 'ArrowLeft':\n        next = Math.max(min, current - step)\n        break\n      case 'ArrowRight':\n        next = Math.min(max, current + step)\n        break\n      case 'Home':\n        next = min\n        break\n      case 'End':\n        next = max\n        break\n      case 'Enter':\n        // 无未提交调整时不派发（焦点停留时的回车噪声）\n        if (this._resizeWidth !== null) {\n          const width = this._resizeWidth\n          this._resizeWidth = null\n          this.dispatchEvent(\n            new CustomEvent('sidebar-width-change', { detail: { width }, bubbles: true, composed: true })\n          )\n        }\n        e.preventDefault()\n        return\n      case 'Escape':\n        this._resizeWidth = null\n        e.preventDefault()\n        return\n      default:\n        return\n    }\n    e.preventDefault()\n    this._resizeWidth = `${Math.round(next)}px`\n  }\n\n  private _checkMobile() {\n    const nextMobile = window.innerWidth <= 640\n    // 视口跨越移动端断点会卸载桌面 layout（handle 随之消失）；必须先终结进行中的\n    // 拖拽，否则 _resizePointerId 悬挂，切回桌面后所有新的拖拽在入口被拦截。\n    if (nextMobile !== this._isMobile && this._isResizing()) this._resetActiveResize()\n    this._isMobile = nextMobile\n  }\n\n  private _resizeTimeout: ReturnType<typeof setTimeout> | null = null\n\n  private _handleResize = () => {\n    if (this._resizeTimeout !== null) clearTimeout(this._resizeTimeout)\n    this._resizeTimeout = setTimeout(() => {\n      this._checkMobile()\n      this._resizeTimeout = null\n    }, 100)\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this._checkMobile()\n    window.addEventListener('resize', this._handleResize)\n    void this.updateComplete.then(() => {\n      if (this.isConnected) this._syncBannerPresence()\n    })\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    this._resetActiveResize()\n    window.removeEventListener('resize', this._handleResize)\n    if (this._resizeTimeout !== null) clearTimeout(this._resizeTimeout)\n    this._resizeTimeout = null\n  }\n\n  override firstUpdated() {\n    this._syncBannerPresence()\n  }\n\n  private _onBannerSlotChange() {\n    this._syncBannerPresence()\n  }\n\n  private _syncBannerPresence() {\n    const bannerSlot = this.renderRoot.querySelector<HTMLSlotElement>('slot[name=\"banner\"]')\n    const hasBanner =\n      bannerSlot\n        ?.assignedNodes()\n        .some(\n          node =>\n            node.nodeType === Node.ELEMENT_NODE || (node.nodeType === Node.TEXT_NODE && !!node.textContent?.trim())\n        ) ?? false\n    const banner = this.shadowRoot?.querySelector<HTMLElement>('.layout-banner') ?? null\n    this._visibleBanner.setTarget(hasBanner ? banner : null)\n  }\n\n  override render() {\n    const isSidebarOpen = !this.sidebarCollapsed\n    // 拖拽中的临时宽度优先于 prop 宽度；移动端宽度由 Drawer 内部变量管理。\n    const sidebarStyle = this._isMobile\n      ? {}\n      : { width: this._resizeWidth ?? (this.sidebarCollapsed ? this.collapsedWidth : this.sidebarWidth) }\n\n    const toggleLabel = isSidebarOpen ? '折叠侧边栏' : '展开侧边栏'\n\n    const desktopToggle = html`\n      <web-ui-button\n        class=\"sidebar-toggle\"\n        icon\n        variant=\"ghost\"\n        @click=\"${this._toggleSidebar}\"\n        aria-label=\"${toggleLabel}\"\n      >\n        <web-ui-icon .icon=${radixIconsPanelLeftMinimized}></web-ui-icon>\n      </web-ui-button>\n    `\n\n    const sidebarViewport = html`\n      <div class=\"sidebar-viewport\">\n        <slot name=\"sidebar\"></slot>\n      </div>\n    `\n\n    const desktopLayout = html`\n      <div class=\"layout-body\">\n        <div class=\"sidebar-wrapper\">\n          <aside\n            class=\"${classMap({\n              collapsed: !isSidebarOpen\n            })}\"\n            style=\"${styleMap(sidebarStyle)}\"\n          >\n            <div class=\"aside-panel wui-glass\">\n              ${sidebarViewport}\n              <div class=\"sidebar-toggle-area\">${desktopToggle}</div>\n            </div>\n            ${\n              this.sidebarResizable && !this.sidebarCollapsed\n                ? html`\n                    <div\n                      class=\"sidebar-resize-handle\"\n                      role=\"separator\"\n                      tabindex=\"0\"\n                      aria-orientation=\"vertical\"\n                      aria-label=\"调整侧边栏宽度\"\n                      @pointerdown=${this._handleResizePointerDown}\n                      @keydown=${this._handleResizeKeydown}\n                    ></div>\n                  `\n                : nothing\n            }\n          </aside>\n        </div>\n        <div class=\"layout-content\">\n          <header>\n            <slot name=\"header\"></slot>\n          </header>\n          <main><slot></slot></main>\n          <footer><slot name=\"tabbar\"></slot></footer>\n        </div>\n      </div>\n    `\n\n    const mobileLayout = html`\n      <div class=\"layout-content\">\n        <header>\n          <web-ui-button\n            class=\"mobile-toggle\"\n            icon\n            variant=\"glass\"\n            @click=\"${this._toggleSidebar}\"\n            aria-label=\"打开导航菜单\"\n          >\n            <web-ui-icon .icon=${radixIconsPanelLeftMinimized}></web-ui-icon>\n          </web-ui-button>\n          <slot name=\"header\"></slot>\n        </header>\n        <main><slot></slot></main>\n        <footer><slot name=\"tabbar\"></slot></footer>\n      </div>\n\n      <web-ui-drawer\n        placement=\"left\"\n        ?open=\"${this.sidebarOpen}\"\n        controlled\n        draggable\n        dialog-label=\"主导航\"\n        @open-change=\"${this._onDrawerChange}\"\n        style=\"${styleMap({\n          '--wui-drawer-width': this.sidebarWidth,\n          '--wui-drawer-radius': 'var(--wui-layout-sidebar-radius, 24px)'\n        })}\"\n      >\n        ${sidebarViewport}\n      </web-ui-drawer>\n    `\n\n    return html`\n      <div class=\"layout-page\">\n        <div class=\"layout-banner\">\n          <slot name=\"banner\" @slotchange=\"${this._onBannerSlotChange}\"></slot>\n        </div>\n        ${this._isMobile ? mobileLayout : desktopLayout}\n      </div>\n    `\n  }\n\n  declare readonly $events: {\n    'sidebar-collapsed-change': CustomEvent<{ collapsed: boolean }>\n    'sidebar-open-change': CustomEvent<{ open: boolean }>\n    'sidebar-width-change': CustomEvent<{ width: string }>\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-layout': WebUiLayout\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AA4BO,IAAM,IAAN,cAA0B,EAAW;;EA2OZ,aAjOX,KAAA,mBAAA,IAGJ,KAAA,eAAA,SAGE,KAAA,iBAAA,QAIE,KAAA,mBAAA,IAOD,KAAA,kBAAA,IAIA,KAAA,kBAAA,IASJ,KAAA,cAAA,IAMD,KAAA,aAAA,IAEgB,KAAA,YAAA,IAEK,KAAA,iBAAA,EAAyB,EACzD,sBAAqB,MAAQ;GAC3B,KAAK,MAAM,YAAY,sCAAsC,GAAG,EAAK,OAAO,GAAG;EACjF,EACF,CAAC,CAAC,CAAC,KAAK,GAEoC,KAAA,2BAAA,IAAI,EAAsB,MAAM,KAAK,cAAc,GAoC5C,KAAA,iBAAA,MACvB,KAAA,oBAAA,GAEmB,KAAA,eAAA,MA0IgB,KAAA,iBAAA,MAEjC,KAAA,sBAAA;GAE5B,AADI,KAAK,mBAAmB,QAAM,aAAa,KAAK,cAAc,GAClE,KAAK,iBAAiB,iBAAiB;IAErC,AADA,KAAK,aAAa,GAClB,KAAK,iBAAiB;GACxB,GAAG,GAAG;EACR;;;EAhPyB,KAAA,SAAA,CAAC,EAAU,CAAK,GAAG,EAAU,CAAK,CAAC;;CAyD5D,iBAAyB;EACvB,IAAI,KAAK,WAAW;GAClB,KAAK,uBAAuB,CAAC,KAAK,WAAW;GAC7C;EACF;EAEA,KAAK,4BAA4B,CAAC,KAAK,gBAAgB;CACzD;CAEA,4BAAoC,GAAoB;EACtD,KAAK,cACH,IAAI,YAAY,4BAA4B;GAC1C,QAAQ,EAAE,aAAU;GACpB,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAEA,uBAA+B,GAAe;EAC5C,KAAK,cACH,IAAI,YAAY,uBAAuB;GACrC,QAAQ,EAAE,QAAK;GACf,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAEA,gBAAwB,GAAmC;EAEzD,AADA,EAAE,gBAAgB,GAClB,KAAK,uBAAuB,EAAE,OAAO,IAAI;CAC3C;CAOA,SAAiB,GAAe,GAA0B;EACxD,IAAM,IAAS,OAAO,WAAW,CAAK;EACtC,OAAO,OAAO,SAAS,CAAM,IAAI,IAAS;CAC5C;CAEA,0BAA0C;EACxC,OAAO,KAAK,kBACR,KAAK,SAAS,KAAK,iBAAiB,KAAK,SAAS,KAAK,gBAAgB,EAAE,CAAC,IAC1E,KAAK,SAAS,KAAK,gBAAgB,EAAE;CAC3C;CAEA,0BAA0C;EAGxC,IAAM,IAAe,KAAK,MAAM,OAAO,aAAa,CAAC,GAC/C,IAAa,KAAK,kBAAkB,KAAK,SAAS,KAAK,iBAAiB,CAAY,IAAI;EAE9F,OAAO,KAAK,IADE,KAAK,IAAI,GAAY,CACnB,GAAO,KAAK,wBAAwB,CAAC;CACvD;CAEA,cAA+B;EAC7B,OAAO,KAAK,gBAAgB,WAAW,KAAK;CAC9C;CAEA,yBAAiC,GAAiB;EAGhD,IAFI,CAAC,KAAK,oBAAoB,KAAK,oBAAoB,KAAK,aAAa,KAAK,YAAY,KAEtF,EAAE,cAAc,IAAO;EAE3B,IAAM,IAAQ,KAAK,WAAW,cAAc,OAAO;EAC9C,MAIL,KAAK,oBAAoB,KAAK,SAAS,OAAO,iBAAiB,CAAK,CAAC,CAAC,OAAO,KAAK,SAAS,KAAK,cAAc,GAAG,CAAC,GAClH,KAAK,eAAe,MACpB,EAAM,UAAU,IAAI,aAAa,GAEjC,KAAK,iBAAiB,EAAkB,GAAG;GACzC,MAAM;GACN,SAAQ,MAAQ;IAEd,IAAM,IAAO,KAAK,oBAAoB,EAAK,QACrC,IAAU,EAAM,GAAM,KAAK,wBAAwB,GAAG,KAAK,wBAAwB,CAAC;IAC1F,KAAK,eAAe,GAAG,KAAK,MAAM,CAAO,EAAE;GAC7C;GACA,aAAa;IAEX,IAAI,KAAK,iBAAiB,MAAM;KAC9B,KAAK,mBAAmB;KACxB;IACF;IACA,IAAM,IAAQ,KAAK;IAGnB,AAFA,KAAK,mBAAmB,GAExB,KAAK,cACH,IAAI,YAAY,wBAAwB;KACtC,QAAQ,EAAE,SAAM;KAChB,SAAS;KACT,UAAU;IACZ,CAAC,CACH;GACF;GACA,gBAAgB;IACd,KAAK,mBAAmB;GAC1B;EACF,CAAC;CACH;CAIA,qBAA6B;EAI3B,AAHA,KAAK,gBAAgB,QAAQ,GAC7B,KAAK,iBAAiB,MACtB,KAAK,WAAW,cAAc,OAAO,CAAC,EAAE,UAAU,OAAO,aAAa,GACtE,KAAK,eAAe;CACtB;CAKA,qBAA6B,GAAkB;EAC7C,IAAI,CAAC,KAAK,oBAAoB,KAAK,oBAAoB,KAAK,aAAa,KAAK,YAAY,GAAG;EAE7F,IAAM,IAAM,KAAK,wBAAwB,GACnC,IAAM,KAAK,wBAAwB,GACnC,IAAQ,KAAK,WAAW,cAAc,OAAO,GAC7C,IAAU,KAAK,eACjB,KAAK,SAAS,KAAK,cAAc,CAAG,IACpC,KAAK,SAAS,IAAQ,OAAO,iBAAiB,CAAK,CAAC,CAAC,QAAQ,KAAK,cAAc,CAAG,GACjF,IAAO,EAAE,WAAW,KAAK,IAC3B,IAAsB;EAE1B,QAAQ,EAAE,KAAV;GACE,KAAK;IACH,IAAO,KAAK,IAAI,GAAK,IAAU,CAAI;IACnC;GACF,KAAK;IACH,IAAO,KAAK,IAAI,GAAK,IAAU,CAAI;IACnC;GACF,KAAK;IACH,IAAO;IACP;GACF,KAAK;IACH,IAAO;IACP;GACF,KAAK;IAEH,IAAI,KAAK,iBAAiB,MAAM;KAC9B,IAAM,IAAQ,KAAK;KAEnB,AADA,KAAK,eAAe,MACpB,KAAK,cACH,IAAI,YAAY,wBAAwB;MAAE,QAAQ,EAAE,SAAM;MAAG,SAAS;MAAM,UAAU;KAAK,CAAC,CAC9F;IACF;IACA,EAAE,eAAe;IACjB;GACF,KAAK;IAEH,AADA,KAAK,eAAe,MACpB,EAAE,eAAe;IACjB;GACF,SACE;EACJ;EAEA,AADA,EAAE,eAAe,GACjB,KAAK,eAAe,GAAG,KAAK,MAAM,CAAI,EAAE;CAC1C;CAEA,eAAuB;EACrB,IAAM,IAAa,OAAO,cAAc;EAIxC,AADI,MAAe,KAAK,aAAa,KAAK,YAAY,KAAG,KAAK,mBAAmB,GACjF,KAAK,YAAY;CACnB;CAYA,oBAA6B;EAI3B,AAHA,MAAM,kBAAkB,GACxB,KAAK,aAAa,GAClB,OAAO,iBAAiB,UAAU,KAAK,aAAa,GACpD,KAAU,eAAe,WAAW;GAClC,AAAI,KAAK,eAAa,KAAK,oBAAoB;EACjD,CAAC;CACH;CAEA,uBAAgC;EAK9B,AAJA,MAAM,qBAAqB,GAC3B,KAAK,mBAAmB,GACxB,OAAO,oBAAoB,UAAU,KAAK,aAAa,GACnD,KAAK,mBAAmB,QAAM,aAAa,KAAK,cAAc,GAClE,KAAK,iBAAiB;CACxB;CAEA,eAAwB;EACtB,KAAK,oBAAoB;CAC3B;CAEA,sBAA8B;EAC5B,KAAK,oBAAoB;CAC3B;CAEA,sBAA8B;EAE5B,IAAM,IADa,KAAK,WAAW,cAA+B,uBAEhE,CAAA,EACI,cAAc,CAAC,CAChB,MACC,MACE,EAAK,aAAa,KAAK,gBAAiB,EAAK,aAAa,KAAK,aAAa,CAAC,CAAC,EAAK,aAAa,KAAK,CACzG,KAAK,IACH,IAAS,KAAK,YAAY,cAA2B,gBAAgB,KAAK;EAChF,KAAK,eAAe,UAAU,IAAY,IAAS,IAAI;CACzD;CAEA,SAAkB;EAChB,IAAM,IAAgB,CAAC,KAAK,kBAEtB,IAAe,KAAK,YACtB,CAAC,IACD,EAAE,OAAO,KAAK,iBAAiB,KAAK,mBAAmB,KAAK,iBAAiB,KAAK,cAAc,GAE9F,IAAc,IAAgB,UAAU,SAExC,IAAgB,CAAI;;;;;kBAKZ,KAAK,eAAe;sBAChB,EAAY;;6BAEL,EAA6B;;OAIhD,IAAkB,CAAI;;;;OAMtB,IAAgB,CAAI;;;;qBAIT,EAAS,EAChB,WAAW,CAAC,EACd,CAAC,EAAE;qBACM,EAAS,CAAY,EAAE;;;gBAG5B,EAAgB;iDACiB,EAAc;;cAGjD,KAAK,oBAAoB,CAAC,KAAK,mBAC3B,CAAI;;;;;;;qCAOe,KAAK,yBAAyB;iCAClC,KAAK,qBAAqB;;sBAGzC,EACL;;;;;;;;;;;OAaH,IAAe,CAAI;;;;;;;sBAOP,KAAK,eAAe;;;iCAGT,EAA6B;;;;;;;;;;iBAU7C,KAAK,YAAY;;;;wBAIV,KAAK,gBAAgB;iBAC5B,EAAS;GAChB,sBAAsB,KAAK;GAC3B,uBAAuB;EACzB,CAAC,EAAE;;UAED,EAAgB;;;EAItB,OAAO,CAAI;;;6CAG8B,KAAK,oBAAoB;;UAE5D,KAAK,YAAY,IAAe,EAAc;;;CAGtD;AAOF;AApYG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,WAAW;CAAqB,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,oBAAA,KAAA,CAAA,GAGzE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,WAAW;CAAiB,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,GAGpE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,WAAW;CAAmB,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,GAItE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,WAAW;CAAqB,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,oBAAA,KAAA,CAAA,GAOzE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,WAAW;CAAqB,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,GAIxE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,WAAW;CAAqB,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,GASxE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,WAAW;CAAgB,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,GAMpE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,WAAW;CAAe,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GAGnE,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GA+CN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,GAhGR,IAAA,EAAA,CAAA,EAAc,eAAe,CAAA,GAAA,CAAA"}

package/dist/components/layout/style.js

@@ -1,5 +1,5 @@
 //#region src/components/layout/style.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{--wui-layout-visible-banner-height:0px;--wui-layout-header-glow-color:var(--wui-color-page,#fff);display:block}.layout-page{flex-direction:column;min-height:100dvh;display:flex}.layout-banner{z-index:var(--wui-layer-banner,30);position:relative}.layout-body{flex:1;display:flex}.sidebar-wrapper{align-self:stretch;position:relative}.sidebar-viewport{flex:1;min-height:0}aside{z-index:var(--wui-layer-sidebar,50);max-width:50vw;height:calc(100vh - var(--wui-layout-visible-banner-height));height:calc(100dvh - var(--wui-layout-visible-banner-height));max-height:calc(100vh - var(--wui-layout-visible-banner-height));max-height:calc(100dvh - var(--wui-layout-visible-banner-height));transition:width var(--wui-duration-layout,.2s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));flex-direction:column;flex-shrink:0;padding:8px 0 8px 8px;display:flex;position:sticky;top:0}aside .aside-panel{--wui-glass-corner-radius:var(--wui-layout-sidebar-radius,var(--wui-radius-overlay,28px));border-radius:var(--wui-layout-sidebar-radius,var(--wui-radius-overlay,28px));background-color:var(--wui-color-surface-overlay,#f6f6f6d1);flex-direction:column;flex:1;min-height:0;display:flex}aside .sidebar-toggle-area{flex-shrink:0;align-items:center;display:flex}aside .sidebar-toggle{margin:8px}aside.collapsed .sidebar-viewport{overflow:hidden}.sidebar-resize-handle{touch-action:none;cursor:col-resize;z-index:1;width:12px;position:absolute;top:0;bottom:0;right:-6px}.sidebar-resize-handle:before{content:\"\";border-radius:var(--wui-radius-control,calc(infinity * 1px));opacity:0;background:var(--wui-color-accent,#08f);width:3px;transition:opacity var(--wui-duration-feedback,.1s) ease;position:absolute;top:0;bottom:0;left:50%;translate:-50%}.sidebar-resize-handle:hover:before,.sidebar-resize-handle:focus-visible:before,aside.is-resizing .sidebar-resize-handle:before{opacity:1}aside.is-resizing{transition:none}.layout-content{flex-direction:column;flex:1;min-width:0;display:flex}header{isolation:isolate;z-index:var(--wui-layer-header,10);align-items:center;gap:8px;display:flex;position:sticky;top:0;overflow-x:clip}.mobile-toggle{margin-left:var(--wui-layout-mobile-toggle-inset,8px)}:host([header-glow]) header:before{pointer-events:none;content:\"\";z-index:-1;opacity:.95;background-color:var(--wui-layout-header-glow-color);filter:blur(10px);position:absolute;inset:0;transform:translate(20px,-50%)scale(1.05,2)}main{flex:1}footer{z-index:var(--wui-layer-tabbar,40);position:sticky;bottom:0}@media (width<=640px){aside,.sidebar-wrapper{display:none}header{align-items:flex-start}.mobile-toggle{align-self:flex-start;margin-top:8px}}@media (prefers-reduced-motion:reduce){aside,.sidebar-resize-handle:before{transition:none}}";
+var e = "*,:before,:after{box-sizing:border-box}:host{--wui-layout-visible-banner-height:0px;--wui-layout-header-glow-color:var(--wui-color-page,#fff);display:block}.layout-page{flex-direction:column;min-height:100dvh;display:flex}.layout-banner{z-index:var(--wui-layer-banner,30);position:relative}.layout-body{flex:1;display:flex}.sidebar-wrapper{align-self:stretch;position:relative}.sidebar-viewport{flex:1;min-height:0}aside{z-index:var(--wui-layer-sidebar,50);max-width:50vw;height:calc(100vh - var(--wui-layout-visible-banner-height));height:calc(100dvh - var(--wui-layout-visible-banner-height));max-height:calc(100vh - var(--wui-layout-visible-banner-height));max-height:calc(100dvh - var(--wui-layout-visible-banner-height));transition:width var(--wui-duration-layout,.2s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));flex-direction:column;flex-shrink:0;padding:8px 0 8px 8px;display:flex;position:sticky;top:0}aside .aside-panel{--wui-glass-corner-radius:var(--wui-layout-sidebar-radius,24px);border-radius:var(--wui-layout-sidebar-radius,24px);background-color:var(--wui-color-surface-sidebar,#f6f6f6d1);flex-direction:column;flex:1;min-height:0;display:flex}aside .sidebar-toggle-area{flex-shrink:0;align-items:center;display:flex}aside .sidebar-toggle{--wui-button-width:44px;margin:8px}aside.collapsed .sidebar-viewport{overflow:hidden}.sidebar-resize-handle{touch-action:none;cursor:col-resize;z-index:1;width:12px;position:absolute;top:0;bottom:0;right:-6px}.sidebar-resize-handle:before{content:\"\";border-radius:var(--wui-radius-control,calc(infinity * 1px));opacity:0;background:var(--wui-color-accent,#08f);width:3px;transition:opacity var(--wui-duration-feedback,.1s) ease;position:absolute;top:0;bottom:0;left:50%;translate:-50%}.sidebar-resize-handle:hover:before,.sidebar-resize-handle:focus-visible:before,aside.is-resizing .sidebar-resize-handle:before{opacity:1}aside.is-resizing{transition:none}.layout-content{flex-direction:column;flex:1;min-width:0;display:flex}header{isolation:isolate;z-index:var(--wui-layer-header,10);align-items:center;gap:8px;display:flex;position:sticky;top:0;overflow-x:clip}.mobile-toggle{margin-left:var(--wui-layout-mobile-toggle-inset,8px)}:host([header-glow]) header:before{pointer-events:none;content:\"\";z-index:-1;opacity:.95;background-color:var(--wui-layout-header-glow-color);filter:blur(10px);position:absolute;inset:0;transform:translateY(-50%)scale(1.05,2)}main{flex:1}footer{z-index:var(--wui-layer-tabbar,40);position:sticky;bottom:0}@media (width<=640px){aside,.sidebar-wrapper{display:none}header{align-items:flex-start}.mobile-toggle{align-self:flex-start;margin-top:8px}}@media (prefers-reduced-motion:reduce){aside,.sidebar-resize-handle:before{transition:none}}";
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/layout/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  --wui-layout-visible-banner-height: 0px;\n  --wui-layout-header-glow-color: var(--wui-color-page, #fff);\n\n  display: block;\n}\n\n/* 页面级滚动容器。Banner 位于正文前，随页面一起滚动。 */\n.layout-page {\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n  min-height: 100dvh;\n}\n\n.layout-banner {\n  position: relative;\n  z-index: var(--wui-layer-banner, 30);\n}\n\n/* 参考 book-fe：正文区域负责撑高 sidebar 的 relative wrapper。 */\n.layout-body {\n  display: flex;\n  flex: 1;\n}\n\n.sidebar-wrapper {\n  position: relative;\n  align-self: stretch;\n}\n\n/* Layout 只提供可用高度；桌面端由 Consumer 决定 scrollport，移动端由 Drawer content 提供。 */\n.sidebar-viewport {\n  flex: 1;\n  min-height: 0;\n}\n\n/*\n * Banner 可见时，组件用它的当前可见高度缩短 aside；Banner 滚出后该值归零。\n * 因而圆角卡片始终完整可见，同时 sticky Sidebar 可在 Banner 消失后填满视口。\n */\naside {\n  position: sticky;\n  z-index: var(--wui-layer-sidebar, 50);\n  top: 0;\n\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n\n  max-width: 50vw;\n  height: calc(100vh - var(--wui-layout-visible-banner-height));\n  height: calc(100dvh - var(--wui-layout-visible-banner-height));\n  max-height: calc(100vh - var(--wui-layout-visible-banner-height));\n  max-height: calc(100dvh - var(--wui-layout-visible-banner-height));\n  padding: 8px 0 8px 8px;\n\n  transition: width var(--wui-duration-layout, 200ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n\n  .aside-panel {\n    --wui-glass-corner-radius: var(--wui-layout-sidebar-radius, var(--wui-radius-overlay, 28px));\n\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n\n    min-height: 0;\n    border-radius: var(--wui-layout-sidebar-radius, var(--wui-radius-overlay, 28px));\n\n    background-color: var(--wui-color-surface-overlay, rgb(246 246 246 / 0.82));\n  }\n\n  .sidebar-toggle-area {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n  }\n\n  .sidebar-toggle {\n    margin: 8px;\n  }\n\n  &.collapsed {\n    .sidebar-viewport {\n      overflow: hidden;\n    }\n  }\n}\n\n/* ===== Sidebar 拖拽调宽 handle ===== */\n\n/*\n * 命中条贴 aside 右缘（约 12px 宽），hover 或拖拽中显示 3px accent 竖线。\n * aside 有 8px padding，handle 定位在 padding 区外缘，不遮挡 aside-panel 内容。\n */\n.sidebar-resize-handle {\n  touch-action: none;\n  cursor: col-resize;\n\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: -6px;\n  bottom: 0;\n\n  width: 12px;\n}\n\n.sidebar-resize-handle::before {\n  content: '';\n\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  translate: -50%;\n\n  width: 3px;\n  border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n  opacity: 0;\n  background: var(--wui-color-accent, #08f);\n\n  transition: opacity var(--wui-duration-feedback, 100ms) ease;\n}\n\n.sidebar-resize-handle:hover::before,\n.sidebar-resize-handle:focus-visible::before,\naside.is-resizing .sidebar-resize-handle::before {\n  opacity: 1;\n}\n\n/* 拖拽中禁用宽度过渡，保证实时跟手。 */\naside.is-resizing {\n  transition: none;\n}\n\n.layout-content {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  min-width: 0;\n}\n\nheader {\n  /* 将负层级 glow 限定在 Header 的局部 stacking context，slot 内容自然位于其上。 */\n  isolation: isolate;\n  position: sticky;\n  z-index: var(--wui-layer-header, 10);\n  top: 0;\n\n  /*\n   * glow 伪元素用 scale + translate 向外扩展，会溢出 header 盒子并撑出页面横向滚动条\n   * （移动端约 30px）。这里只裁横向：纵向保持 visible，下拉浮层等槽位内容仍可溢出。\n   * clip 不创建滚动容器，因此不影响 header 自身的 sticky。\n   */\n  overflow-x: clip;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n/* 移动端 Toggle 属于组件自身，不随 Consumer 的 header 内边距缩进；\n   默认 8px 使其脱离视口边缘，Consumer 可用同名变量对齐自身内容左缘。 */\n.mobile-toggle {\n  margin-left: var(--wui-layout-mobile-toggle-inset, 8px);\n}\n\n/*\n * Header 的装饰性背景晕染\n * ========================\n *\n * 伪元素随 header 的实际盒子尺寸和 sticky 位置变化，自然适配 header slot 的\n * 高度与位置，无需单独维护一层 DOM。\n *\n * 通过 translate + scale 将晕染区域从 header 中心向外扩展，\n * 并使用 blur 模糊边缘，实现柔和的渐变过渡效果。\n */\n:host([header-glow]) header::before {\n  pointer-events: none;\n  content: '';\n\n  position: absolute;\n  z-index: -1;\n  inset: 0;\n  transform: translate(20px, -50%) scale(1.05, 2);\n\n  opacity: 0.95;\n  background-color: var(--wui-layout-header-glow-color);\n  filter: blur(10px);\n}\n\nmain {\n  flex: 1;\n}\n\nfooter {\n  position: sticky;\n  z-index: var(--wui-layer-tabbar, 40);\n  bottom: 0;\n}\n\n@media (width <= 640px) {\n  aside,\n  .sidebar-wrapper {\n    display: none;\n  }\n\n  /* Slot 可能包含展开后的多行 header；Toggle 对齐首行，而不是被整段 header 高度居中。 */\n  header {\n    align-items: flex-start;\n  }\n\n  .mobile-toggle {\n    align-self: flex-start;\n    margin-top: 8px;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  aside {\n    transition: none;\n  }\n\n  .sidebar-resize-handle::before {\n    transition: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/layout/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  --wui-layout-visible-banner-height: 0px;\n  --wui-layout-header-glow-color: var(--wui-color-page, #fff);\n\n  display: block;\n}\n\n/* 页面级滚动容器。Banner 位于正文前，随页面一起滚动。 */\n.layout-page {\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n  min-height: 100dvh;\n}\n\n.layout-banner {\n  position: relative;\n  z-index: var(--wui-layer-banner, 30);\n}\n\n/* 参考 book-fe：正文区域负责撑高 sidebar 的 relative wrapper。 */\n.layout-body {\n  display: flex;\n  flex: 1;\n}\n\n.sidebar-wrapper {\n  position: relative;\n  align-self: stretch;\n}\n\n/* Layout 只提供可用高度；桌面端由 Consumer 决定 scrollport，移动端由 Drawer content 提供。 */\n.sidebar-viewport {\n  flex: 1;\n  min-height: 0;\n}\n\n/*\n * Banner 可见时，组件用它的当前可见高度缩短 aside；Banner 滚出后该值归零。\n * 因而圆角卡片始终完整可见，同时 sticky Sidebar 可在 Banner 消失后填满视口。\n */\naside {\n  position: sticky;\n  z-index: var(--wui-layer-sidebar, 50);\n  top: 0;\n\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n\n  max-width: 50vw;\n  height: calc(100vh - var(--wui-layout-visible-banner-height));\n  height: calc(100dvh - var(--wui-layout-visible-banner-height));\n  max-height: calc(100vh - var(--wui-layout-visible-banner-height));\n  max-height: calc(100dvh - var(--wui-layout-visible-banner-height));\n  padding: 8px 0 8px 8px;\n\n  transition: width var(--wui-duration-layout, 200ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n\n  .aside-panel {\n    --wui-glass-corner-radius: var(--wui-layout-sidebar-radius, 24px);\n\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n\n    min-height: 0;\n    border-radius: var(--wui-layout-sidebar-radius, 24px);\n\n    /* 深色下比 page 浅一档的专用表面 token。不直接复用 --wui-color-surface-overlay：\n       该 token 同时服务 dialog/drawer/toast，整体抬升会带偏不在本次范围内的表面。\n       浅色值与 overlay 一致，无 theme 时回退到同一字面量，行为不变。 */\n    background-color: var(--wui-color-surface-sidebar, rgb(246 246 246 / 0.82));\n  }\n\n  .sidebar-toggle-area {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n  }\n\n  .sidebar-toggle {\n    --wui-button-width: 44px;\n    margin: 8px;\n  }\n\n  &.collapsed {\n    .sidebar-viewport {\n      overflow: hidden;\n    }\n  }\n}\n\n/*\n * 命中条贴 aside 右缘（约 12px 宽），hover 或拖拽中显示 3px accent 竖线。\n * aside 有 8px padding，handle 定位在 padding 区外缘，不遮挡 aside-panel 内容。\n */\n.sidebar-resize-handle {\n  touch-action: none;\n  cursor: col-resize;\n\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  right: -6px;\n  bottom: 0;\n\n  width: 12px;\n}\n\n.sidebar-resize-handle::before {\n  content: '';\n\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 50%;\n  translate: -50%;\n\n  width: 3px;\n  border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n  opacity: 0;\n  background: var(--wui-color-accent, #08f);\n\n  transition: opacity var(--wui-duration-feedback, 100ms) ease;\n}\n\n.sidebar-resize-handle:hover::before,\n.sidebar-resize-handle:focus-visible::before,\naside.is-resizing .sidebar-resize-handle::before {\n  opacity: 1;\n}\n\n/* 拖拽中禁用宽度过渡，保证实时跟手。 */\naside.is-resizing {\n  transition: none;\n}\n\n.layout-content {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  min-width: 0;\n}\n\nheader {\n  /* 将负层级 glow 限定在 Header 的局部 stacking context，slot 内容自然位于其上。 */\n  isolation: isolate;\n  position: sticky;\n  z-index: var(--wui-layer-header, 10);\n  top: 0;\n\n  /*\n   * glow 伪元素用 scale + translate 向外扩展，会溢出 header 盒子并撑出页面横向滚动条\n   * （移动端约 30px）。这里只裁横向：纵向保持 visible，下拉浮层等槽位内容仍可溢出。\n   * clip 不创建滚动容器，因此不影响 header 自身的 sticky。\n   */\n  overflow-x: clip;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n/* 移动端 Toggle 属于组件自身，不随 Consumer 的 header 内边距缩进；\n   默认 8px 使其脱离视口边缘，Consumer 可用同名变量对齐自身内容左缘。 */\n.mobile-toggle {\n  margin-left: var(--wui-layout-mobile-toggle-inset, 8px);\n}\n\n/*\n * Header 的装饰性背景晕染\n * ========================\n *\n * 伪元素随 header 的实际盒子尺寸和 sticky 位置变化，自然适配 header slot 的\n * 高度与位置，无需单独维护一层 DOM。\n */\n:host([header-glow]) header::before {\n  pointer-events: none;\n  content: '';\n\n  position: absolute;\n  z-index: -1;\n  inset: 0;\n  transform: translateY(-50%) scale(1.05, 2);\n\n  opacity: 0.95;\n  background-color: var(--wui-layout-header-glow-color);\n  filter: blur(10px);\n}\n\nmain {\n  flex: 1;\n}\n\nfooter {\n  position: sticky;\n  z-index: var(--wui-layer-tabbar, 40);\n  bottom: 0;\n}\n\n@media (width <= 640px) {\n  aside,\n  .sidebar-wrapper {\n    display: none;\n  }\n\n  /* Slot 可能包含展开后的多行 header；Toggle 对齐首行，而不是被整段 header 高度居中。 */\n  header {\n    align-items: flex-start;\n  }\n\n  .mobile-toggle {\n    align-self: flex-start;\n    margin-top: 8px;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  aside {\n    transition: none;\n  }\n\n  .sidebar-resize-handle::before {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/popover/index.d.ts

@@ -22,7 +22,13 @@ export declare class WebUiPopover extends LitElement {
     private _shouldOpenInstantly;
     private _panelId;
     private _portal?;
-    private readonly _lifecycle;
+    /**
+     * 开启态浮层（issue #120 Block 1）：本组件不再自行监听 keydown，只声明「我开着」，
+     * 由唯一仲裁者决定一次 Escape 关谁。实例作用域的帧事务入口也在这里（合并了原
+     * lifecycle）—— 它的 lifetime 长于一次开合（跨 `suspend()`/`resume()`），
+     * 但不长于实例本身。
+     */
+    private readonly _overlay;
     private readonly _panel;
     get isOpen(): boolean;
     connectedCallback(): void;
@@ -34,6 +40,7 @@ export declare class WebUiPopover extends LitElement {
     toggle(): void;
     private _isInsideShadowRoot;
     private _syncTriggerListeners;
+    private _syncOverlayInert;
     private _openOverlay;
     private _migratableContentNodes;
     private _createPortal;
@@ -47,7 +54,6 @@ export declare class WebUiPopover extends LitElement {
     private _onTriggerClick;
     private _onClickOutside;
     private _onFocusOut;
-    private _onKeydown;
     private _onPointerEnter;
     private _onPointerLeave;
     private _onPanelPointerEnter;

package/dist/components/popover/index.js

@@ -1,28 +1,29 @@
 import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import t from "../../assets/glass.js";
-import n from "../../assets/overlay-motion.js";
-import { normalizeLiteral as r, normalizeNumber as i } from "../../shared/normalize/index.js";
+import { normalizeLiteral as n, normalizeNumber as r } from "../../shared/normalize/index.js";
+import i from "../../assets/overlay-motion.js";
 import { dispatchOpenChangeEvent as a } from "../../shared/open-state/index.js";
-import { overlayComposition as o } from "../../shared/overlay/composition.js";
-import { defineAnchoredPanel as s } from "../../shared/overlay/anchored-panel.js";
+import { defineAnchoredPanel as o } from "../../shared/overlay/anchored-panel.js";
+import { defineOpenOverlay as s } from "../../shared/overlay/open-overlay.js";
 import { defineOverlayPortal as c } from "../../shared/overlay/portal.js";
 import { UserChangeController as l } from "../../shared/events/user-change.js";
-import { defineOverlayLifecycle as u } from "../../shared/overlay/lifecycle.js";
-import { FLOATING_PLACEMENTS as d } from "../../shared/overlay/placement-props.js";
-import f from "./style.js";
-import { LitElement as p, html as m, unsafeCSS as h } from "lit";
-import { customElement as g, property as _ } from "lit/decorators.js";
+import { FLOATING_PLACEMENTS as u } from "../../shared/overlay/placement-props.js";
+import d from "./style.js";
+import { LitElement as f, html as p, unsafeCSS as m } from "lit";
+import { customElement as h, property as g } from "lit/decorators.js";
 //#region src/components/popover/index.ts
-var v = [
+var _ = [
 	"click",
 	"hover",
 	"manual"
-], y = 0, b = class extends p {
+], v = 0, y = class extends f {
 	constructor(...e) {
-		super(...e), this.open = !1, this.disabled = !1, this._placement = "bottom", this._offset = 8, this._trigger = "click", this.portal = !1, this._userOpenChange = new l(), this._shouldOpenInstantly = !0, this._panelId = `wui-popover-panel-${++y}`, this._lifecycle = u().make({
-			isConnected: () => this.isConnected,
-			isOpen: () => this.open
-		}), this._panel = s().make({
+		super(...e), this.open = !1, this.disabled = !1, this._placement = "bottom", this._offset = 8, this._trigger = "click", this.portal = !1, this._userOpenChange = new l(), this._shouldOpenInstantly = !0, this._panelId = `wui-popover-panel-${++v}`, this._overlay = s().make({
+			requestClose: () => {
+				this._userOpenChange.mark(), this.open = !1;
+			},
+			isConnected: () => this.isConnected
+		}), this._panel = o().make({
 			getAnchor: () => this.shadowRoot?.querySelector(".popover-trigger") ?? null,
 			getLocalPanel: () => this.shadowRoot?.querySelector(".popover-panel") ?? null,
 			getPositioning: () => ({
@@ -31,20 +32,16 @@ var v = [
 				strategy: this.portal ? "fixed" : "absolute"
 			}),
 			isPortal: () => this.portal,
-			createPortal: () => this._createPortal()
+			createPortal: () => this._createPortal(),
+			openOverlay: this._overlay
 		}), this._onTriggerClick = (e) => {
 			this.disabled || (clearTimeout(this._showTimer), clearTimeout(this._hideTimer), this.trigger !== "hover" && (this.open || (this._shouldOpenInstantly = e.detail === 0), this._userOpenChange.mark(), this.toggle()));
 		}, this._onClickOutside = (e) => {
-			if (!this.open || this.trigger === "manual" || this.trigger === "hover") return;
-			let t = this._panel.getPanel();
-			t && o.containsEvent(t, e) || this._isInsideShadowRoot(e) || (this._userOpenChange.mark(), this.open = !1);
+			this.open && this.trigger !== "manual" && this.trigger !== "hover" && (this._panel.getHandle()?.containsEvent(e) || this._isInsideShadowRoot(e) || (this._userOpenChange.mark(), this.open = !1));
 		}, this._onFocusOut = () => {
-			this.trigger !== "manual" && this.trigger !== "hover" && this._lifecycle.scheduleFrame(() => {
-				let e = this._panel.getPanel();
-				!this.matches(":focus-within") && !(e && o.hasFocusWithin(e)) && (this._userOpenChange.mark(), this.open = !1);
-			}, { expectedOpen: !0 });
-		}, this._onKeydown = (e) => {
-			this.open && this.trigger !== "manual" && e.key === "Escape" && (this._userOpenChange.mark(), this.open = !1, e.preventDefault());
+			this.trigger !== "manual" && this.trigger !== "hover" && this._overlay.scheduleFrame(() => {
+				!this.matches(":focus-within") && !this._panel.getHandle()?.hasFocusWithin() && (this._userOpenChange.mark(), this.open = !1);
+			});
 		}, this._onPointerEnter = (e) => {
 			e.pointerType !== "touch" && (this.disabled || this.trigger !== "hover" || (clearTimeout(this._hideTimer), this._showTimer = setTimeout(() => {
 				this._shouldOpenInstantly = !1, !this.open && (this._userOpenChange.mark(), this.show());
@@ -63,9 +60,9 @@ var v = [
 	}
 	static {
 		this.styles = [
-			h(t),
-			h(n),
-			h(f)
+			m(t),
+			m(i),
+			m(d)
 		];
 	}
 	get placement() {
@@ -73,46 +70,46 @@ var v = [
 	}
 	set placement(e) {
 		let t = this._placement;
-		this._placement = r(e, d, "bottom"), this.requestUpdate("placement", t);
+		this._placement = n(e, u, "bottom"), this.requestUpdate("placement", t);
 	}
 	get offset() {
 		return this._offset;
 	}
 	set offset(e) {
 		let t = this._offset;
-		this._offset = i(e, 0, 100, 8), this.requestUpdate("offset", t);
+		this._offset = r(e, 0, 100, 8), this.requestUpdate("offset", t);
 	}
 	get trigger() {
 		return this._trigger;
 	}
 	set trigger(e) {
 		let t = this._trigger;
-		this._trigger = r(e, v, "click"), this.requestUpdate("trigger", t);
+		this._trigger = n(e, _, "click"), this.requestUpdate("trigger", t);
 	}
 	get isOpen() {
 		return this.open;
 	}
 	connectedCallback() {
-		super.connectedCallback(), this._lifecycle.resume(), document.addEventListener("click", this._onClickOutside), document.addEventListener("keydown", this._onKeydown), this.addEventListener("focusout", this._onFocusOut), this._syncTriggerListeners();
+		super.connectedCallback(), this._overlay.resume(), document.addEventListener("click", this._onClickOutside), this.addEventListener("focusout", this._onFocusOut), this._syncTriggerListeners();
 	}
 	firstUpdated() {
-		this.shadowRoot?.querySelector("slot[name=\"trigger\"]")?.addEventListener("slotchange", () => this.requestUpdate()), this.open && (this._lifecycle.scheduleFrame(() => {
+		this.shadowRoot?.querySelector("slot[name=\"trigger\"]")?.addEventListener("slotchange", () => this.requestUpdate()), this.open && (this._overlay.scheduleFrame(() => {
 			this._openOverlay(this._shouldOpenInstantly);
-		}, { expectedOpen: !0 }), this._shouldOpenInstantly = !0);
+		}), this._shouldOpenInstantly = !0);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), document.removeEventListener("click", this._onClickOutside), document.removeEventListener("keydown", this._onKeydown), this.removeEventListener("focusout", this._onFocusOut), this.removeEventListener("pointerenter", this._onPointerEnter), this.removeEventListener("pointerleave", this._onPointerLeave), this._lifecycle.dispose(), clearTimeout(this._showTimer), clearTimeout(this._hideTimer), this._panel.dispose();
+		super.disconnectedCallback(), document.removeEventListener("click", this._onClickOutside), this.removeEventListener("focusout", this._onFocusOut), this.removeEventListener("pointerenter", this._onPointerEnter), this.removeEventListener("pointerleave", this._onPointerLeave), this._overlay.suspend(), clearTimeout(this._showTimer), clearTimeout(this._hideTimer), this._panel.dispose();
 	}
 	updated(e) {
-		if (this._syncTriggerAria(), e.has("portal") || e.has("overlayContainer") ? (this._lifecycle.invalidate(), this._lifecycle.scheduleFrame(() => this._reconfigureOverlay())) : (e.has("placement") || e.has("offset")) && requestAnimationFrame(() => this._panel.updatePosition()), e.has("open")) {
+		if (this._syncTriggerAria(), e.has("portal") || e.has("overlayContainer") ? (this._overlay.invalidate(), this._overlay.scheduleFrame(() => this._reconfigureOverlay())) : (e.has("placement") || e.has("offset")) && requestAnimationFrame(() => this._panel.updatePosition()), e.has("open")) {
 			if (this.open) {
 				let e = this._shouldOpenInstantly;
-				this._shouldOpenInstantly = !0, this._lifecycle.scheduleFrame(() => {
+				this._shouldOpenInstantly = !0, this._overlay.scheduleFrame(() => {
 					this._openOverlay(e);
-				}, { expectedOpen: !0 }), this._userOpenChange.consume() && this._dispatchChange(!0), this._focusPanel();
-			} else this._lifecycle.invalidate(), this._returnFocus(), this._closeOverlay(), this._userOpenChange.consume() && this._dispatchChange(!1);
+				}), this._userOpenChange.consume() && this._dispatchChange(!0), this._focusPanel();
+			} else this._overlay.invalidate(), this._returnFocus(), this._closeOverlay(), this._userOpenChange.consume() && this._dispatchChange(!1);
 		}
-		e.has("trigger") && (this.removeEventListener("pointerenter", this._onPointerEnter), this.removeEventListener("pointerleave", this._onPointerLeave), clearTimeout(this._showTimer), clearTimeout(this._hideTimer), this._syncTriggerListeners());
+		e.has("trigger") && (this.removeEventListener("pointerenter", this._onPointerEnter), this.removeEventListener("pointerleave", this._onPointerLeave), clearTimeout(this._showTimer), clearTimeout(this._hideTimer), this._syncTriggerListeners()), this._syncOverlayInert();
 	}
 	show() {
 		this.disabled || this.open || (this.open = !0);
@@ -130,10 +127,11 @@ var v = [
 	_syncTriggerListeners() {
 		this.trigger === "hover" && (this.addEventListener("pointerenter", this._onPointerEnter), this.addEventListener("pointerleave", this._onPointerLeave));
 	}
+	_syncOverlayInert() {
+		this._panel.getHandle()?.setInert(this.trigger === "manual");
+	}
 	_openOverlay(e = !1) {
-		this._panel.open(e);
-		let t = this._panel.getPanel();
-		t && o.registerPanelFromAncestry(t, this);
+		this._panel.open(e), this._syncOverlayInert();
 	}
 	_migratableContentNodes(e) {
 		return e.filter((e) => !(e instanceof Comment) && !(e instanceof HTMLElement && e.slot === "trigger"));
@@ -142,7 +140,7 @@ var v = [
 		let e = c().make({
 			container: this.overlayContainer,
 			target: this,
-			style: `${t}\n${n}\n${f}`,
+			style: `${t}\n${i}\n${d}`,
 			className: "popover-panel portal wui-glass wui-floating-panel",
 			migrateAddedNodes: (e) => this._migratableContentNodes(e)
 		});
@@ -152,7 +150,7 @@ var v = [
 		await this._panel.close(() => this.open);
 	}
 	_reconfigureOverlay() {
-		this.isConnected && this._panel.reconfigure(this.open);
+		this.isConnected && (this._panel.reconfigure(this.open), this._syncOverlayInert());
 	}
 	_dispatchChange(e) {
 		a(this, e);
@@ -162,10 +160,10 @@ var v = [
 		e && (e.setAttribute("aria-expanded", String(this.open)), e.setAttribute("aria-controls", this._panelId));
 	}
 	_focusPanel() {
-		this._lifecycle.scheduleFrame(() => {
+		this._overlay.scheduleFrame(() => {
 			let e = this._panel.getPanel()?.querySelector("[autofocus]");
 			e && !e.matches(":disabled, [disabled]") && e.focus();
-		}, { expectedOpen: !0 });
+		});
 	}
 	_returnFocus() {
 		this._panel.getPanel()?.matches(":focus-within") && this._queryTrigger()?.focus();
@@ -175,7 +173,7 @@ var v = [
 		return e instanceof HTMLElement ? e : null;
 	}
 	render() {
-		return m`
+		return p`
       <div class="popover-anchor">
         <div
           class="popover-trigger"
@@ -200,23 +198,23 @@ var v = [
     `;
 	}
 };
-e([_({
+e([g({
 	type: Boolean,
 	reflect: !0
-})], b.prototype, "open", void 0), e([_({
+})], y.prototype, "open", void 0), e([g({
 	type: Boolean,
 	reflect: !0
-})], b.prototype, "disabled", void 0), e([_({
+})], y.prototype, "disabled", void 0), e([g({
 	type: String,
 	reflect: !0
-})], b.prototype, "placement", null), e([_({ type: Number })], b.prototype, "offset", null), e([_({
+})], y.prototype, "placement", null), e([g({ type: Number })], y.prototype, "offset", null), e([g({
 	type: String,
 	reflect: !0
-})], b.prototype, "trigger", null), e([_({
+})], y.prototype, "trigger", null), e([g({
 	type: Boolean,
 	reflect: !0
-})], b.prototype, "portal", void 0), e([_({ attribute: !1 })], b.prototype, "overlayContainer", void 0), b = e([g("web-ui-popover")], b);
+})], y.prototype, "portal", void 0), e([g({ attribute: !1 })], y.prototype, "overlayContainer", void 0), y = e([h("web-ui-popover")], y);
 //#endregion
-export { b as WebUiPopover };
+export { y as WebUiPopover };
 
 //# sourceMappingURL=index.js.map