@greypan/web-ui 11.2.0 → 12.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/layout/index.ts"],"sourcesContent":["import '@/components/button'\nimport '@/components/drawer'\nimport '@/components/icon'\n\nimport { 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 '@/classes/glass.css?inline'\nimport glow from '@/classes/glow.css?inline'\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 * 移动端断点的媒体查询。\n *\n * 必须与 `style.css` 里那份 `@media (width <= 640px)` 是同一条条件：CSS 用它在窄视口隐藏桌面\n * aside，TS 用同一条件决定渲染哪一套树，两者错开就会出现「树还在桌面、aside 已经被藏起来」\n * 的空档。两份字面量的相等由 `components/drawer/__tests__/breakpoint-parity.spec.ts` 守着。\n */\nconst MOBILE_VIEWPORT_QUERY = '(width <= 640px)'\n\n/**\n * Layout 组件 - 提供页面布局框架，支持 collapsible sidebar\n *\n * @fires sidebar-collapsed-change - 桌面端侧边栏 collapse 状态变更请求时触发\n * @fires sidebar-open-change - 移动端侧边栏 Drawer toggle 请求时触发\n * @fires sidebar-width-change - 桌面端侧边栏拖拽调宽结束时触发，携带最终宽度（受控请求）\n * @fires mobile-change - 视口跨越移动端断点、`mobile` 翻转时触发（派生状态通知）\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(glow), unsafeCSS(style)]\n\n  /**\n   * 桌面端 Sidebar 的持久布局偏好。\n   *\n   * `true` 只会将桌面 Sidebar 收窄到 `collapsedWidth`，不会影响移动端 Drawer。\n   * 它不与 `sidebarOpen` 合并：前者是跨视口保留的密度选择，后者是移动端瞬时的 modal 可见性。\n   *\n   * 两处渲染的是同一份 `sidebar` slot 内容，所以本属性只负责桌面 aside 的几何：Consumer\n   * 若让自己的 slot 内容跟着它变形态（隐藏 label、改排布），必须按 `mobile` 收窄那个条件\n   * （例如 `collapsed && !layout.mobile`，或 CSS 的 `web-ui-layout[mobile]`），\n   * 否则 collapsed state 会一路渲染进移动端 Drawer（issue #195）。\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 拖拽调宽（collapsed state 隐藏 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 和 backdrop 关闭都通过 `sidebar-open-change` 请求更新它；它不会改变桌面端的 collapse preference。\n   * 因而不与 `sidebarCollapsed` 合并，避免响应式切换时将一次移动端交互误写为桌面端布局选择。\n   */\n  @property({ type: Boolean, attribute: 'sidebar-open', reflect: true })\n  sidebarOpen = false\n\n  @property({ type: Boolean, attribute: 'header-glow', reflect: true })\n  headerGlow = false\n\n  /*\n   * `mobile` 是派生输出，不是第二个输入：像 `web-ui-theme` 的 `resolved-appearance` 一样由组件\n   * 独占写入，读取取 `MOBILE_VIEWPORT_QUERY`。外部写 attribute 会在同一次 reaction 内被恢复，\n   * 写 property 不生效（只读 accessor，严格模式下抛错）——两种写法都不构成本属性之外的\n   * 第三个视口来源。\n   */\n  @property({ type: Boolean, attribute: 'mobile', reflect: true })\n  private _mobile = false\n\n  /**\n   * 当前视口是否落在移动端分支（即 `MOBILE_VIEWPORT_QUERY` 命中）。\n   *\n   * 与组件渲染哪一套树、以及 `mobile-change` 的派发是同一个值：翻转瞬间三者一起变，\n   * Consumer 不必自己写断点判断，也不会与 layout 内部的树切换错开半拍。派生状态只读。\n   */\n  get mobile(): boolean {\n    return this._mobile\n  }\n\n  private _mobileQuery: MediaQueryList | null = null\n\n  private readonly _onMobileQueryChange = (event: MediaQueryListEvent) => {\n    this._syncMobile(event.matches)\n  }\n\n  /*\n   * 本方法由媒体查询翻转驱动，也被连接时的初次求值调用；attribute 的恢复路径见\n   * `attributeChangedCallback`，那里不改判、也不派发通知，所以 `mobile-change` 只在\n   * 视口真正跨断点时出现一次（窄视口挂载时那次算第一次）。\n   */\n  private _syncMobile(next: boolean) {\n    if (next === this._mobile) return\n    this._mobile = next\n    // 跨断点会卸载桌面 layout（resize handle 随之消失）；必须先终结进行中的拖拽，\n    // 否则手势悬挂，切回桌面后所有新拖拽都在入口被 `_isResizing()` 拦下。\n    if (this._isResizing()) this._resetActiveResize()\n    this.toggleAttribute('mobile', next)\n    this.dispatchEvent(new CustomEvent('mobile-change', { detail: { mobile: next }, bubbles: true, composed: true }))\n  }\n\n  override attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {\n    super.attributeChangedCallback(name, oldValue, newValue)\n    // super 已把外部值写进 backing field，所以这里要按媒体查询重算，不能拿字段当真相。\n    if (name !== 'mobile') return\n    // 无 matchMedia 的环境没有视口可判，`mobile` 恒为 false（见 connectedCallback）。\n    const derived = this._mobileQuery?.matches ?? false\n    if (this._mobile !== derived) this._mobile = derived\n    /*\n     * 布尔 attribute 只论存在性，但值本身也要归位：`setAttribute('mobile', 'false')` 在移动端\n     * 会让 backing field 与 attribute 的**存在性**一致、值却留在宿主上（`getAttribute` 会回读\n     * 到 consumer 写的那串）。组件写的形态是空串，这里按同一形态恢复，主题的\n     * `resolved-appearance` 先例同理。\n     */\n    if (derived) {\n      if (this.getAttribute('mobile') !== '') this.setAttribute('mobile', '')\n      return\n    }\n    if (this.hasAttribute('mobile')) this.removeAttribute('mobile')\n  }\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._mobile) {\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._mobile || 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._mobile || 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  /*\n   * 视口判定订阅媒体查询，而不是监听 window resize：跨断点每次只派发一次 change，没有\n   * resize 事件流要挡。判定、CSS 的 `@media (width <= 640px)` 与对外暴露的 `mobile` 因此\n   * 在同一时刻翻转，不会留下「树还在桌面、aside 已被 CSS 藏起来」的空档。\n   */\n  private _syncMobileViewportSubscription() {\n    this._mobileQuery?.removeEventListener('change', this._onMobileQueryChange)\n    // jsdom 等没有 matchMedia 的环境没有视口可判：`mobile` 停在 false，订阅与渲染照常。\n    this._mobileQuery = typeof window.matchMedia === 'function' ? window.matchMedia(MOBILE_VIEWPORT_QUERY) : null\n    this._mobileQuery?.addEventListener('change', this._onMobileQueryChange)\n    this._syncMobile(this._mobileQuery?.matches ?? false)\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this._syncMobileViewportSubscription()\n    void this.updateComplete.then(() => {\n      if (this.isConnected) this._syncBannerPresence()\n    })\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    this._resetActiveResize()\n    this._mobileQuery?.removeEventListener('change', this._onMobileQueryChange)\n    this._mobileQuery = 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._mobile\n      ? {}\n      : { width: this._resizeWidth ?? (this.sidebarCollapsed ? this.collapsedWidth : this.sidebarWidth) }\n\n    const toggleLabel = isSidebarOpen ? 'Collapse sidebar' : 'Expand sidebar'\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    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=\"Resize sidebar\"\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 class=\"${classMap({ 'wui-glow': this.headerGlow })}\">\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 class=\"${classMap({ 'wui-glow': this.headerGlow })}\">\n          <web-ui-button\n            class=\"mobile-toggle\"\n            icon\n            variant=\"glass\"\n            @click=\"${this._toggleSidebar}\"\n            aria-label=\"Open navigation menu\"\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=\"Main navigation\"\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._mobile ? 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    'mobile-change': CustomEvent<{ mobile: boolean }>\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-layout': WebUiLayout\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["glass","glow","style","radixIconsPanelLeftMinimized"],"sources":["../../../src/components/layout/index.ts"],"sourcesContent":["import '@/components/button'\nimport '@/components/drawer'\nimport '@/components/icon'\n\nimport { html, LitElement, nothing, type PropertyValues, 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 '@/classes/glass.css?inline'\nimport glow from '@/classes/glow.css?inline'\nimport { radixIconsPanelLeftMinimized } from '@/icons'\nimport { attachDragGesture, clamp, type DragGestureHandle } from '@/shared/gesture'\nimport { resolveBuiltinLabelSet } from '@/shared/locale/builtin-labels'\nimport { defineVisibleAreaTracker, VisibleAreaController } from '@/shared/visible-area'\n\nimport style from './style.css?inline'\n\n/**\n * 移动端断点的媒体查询。\n *\n * 必须与 `style.css` 里那份 `@media (width <= 640px)` 是同一条条件：CSS 用它在窄视口隐藏桌面\n * aside，TS 用同一条件决定渲染哪一套树，两者错开就会出现「树还在桌面、aside 已经被藏起来」\n * 的空档。两份字面量的相等由 `components/drawer/__tests__/breakpoint-parity.spec.ts` 守着。\n */\nconst MOBILE_VIEWPORT_QUERY = '(width <= 640px)'\n\n/**\n * Layout 组件 - 提供页面布局框架，支持 collapsible sidebar 与无 sidebar 模式\n *\n * @fires sidebar-collapsed-change - 桌面端侧边栏 collapse 状态变更请求时触发\n * @fires sidebar-open-change - 移动端侧边栏 Drawer toggle 请求时触发\n * @fires sidebar-width-change - 桌面端侧边栏拖拽调宽结束时触发，携带最终宽度（受控请求）\n * @fires mobile-change - 视口跨越移动端断点、`mobile` 翻转时触发（派生状态通知）\n * @slot banner - 顶部 Banner 区域（全宽，随页面滚动，可选）\n * @slot header - 内容区顶部 header（sticky）\n * @slot sidebar - 侧边栏内容；Consumer 决定其内部固定区域与滚动容器；`no-sidebar` 置位时不渲染\n * @slot tabbar - 底部 tabbar 区域\n * @slot default - 主内容区\n */\n/** `web-ui-layout` 内置无障碍名的成组覆盖；每个 key 对应一处图标控件的 accessible name。 */\nexport interface LayoutAriaLabels {\n  collapseSidebar?: string\n  expandSidebar?: string\n  resizeSidebar?: string\n  openNavigationMenu?: string\n  mainNavigation?: string\n}\n\n@customElement('web-ui-layout')\nexport class WebUiLayout extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(glow), unsafeCSS(style)]\n\n  /**\n   * 关闭整块 sidebar：桌面端不渲染 aside 与 collapse Toggle，移动端不渲染 header Toggle 与 Drawer。\n   *\n   * 它是布局模式而不是 collapse 的别名：`sidebar-collapsed` 只收窄桌面 aside，本属性把侧边栏\n   * 结构本身从树里去掉。`sidebar` slot 随之不渲染（消费方节点仍留在 light DOM），\n   * 侧边栏相关事件与属性在该模式下不产生可见效果。\n   */\n  @property({ type: Boolean, attribute: 'no-sidebar', reflect: true })\n  noSidebar = false\n\n  /**\n   * 桌面端 Sidebar 的持久布局偏好。\n   *\n   * `true` 只会将桌面 Sidebar 收窄到 `collapsedWidth`，不会影响移动端 Drawer。\n   * 它不与 `sidebarOpen` 合并：前者是跨视口保留的密度选择，后者是移动端瞬时的 modal 可见性。\n   *\n   * 两处渲染的是同一份 `sidebar` slot 内容，所以本属性只负责桌面 aside 的几何：Consumer\n   * 若让自己的 slot 内容跟着它变形态（隐藏 label、改排布），必须按 `mobile` 收窄那个条件\n   * （例如 `collapsed && !layout.mobile`，或 CSS 的 `web-ui-layout[mobile]`），\n   * 否则 collapsed state 会一路渲染进移动端 Drawer（issue #195）。\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 拖拽调宽（collapsed state 隐藏 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 和 backdrop 关闭都通过 `sidebar-open-change` 请求更新它；它不会改变桌面端的 collapse preference。\n   * 因而不与 `sidebarCollapsed` 合并，避免响应式切换时将一次移动端交互误写为桌面端布局选择。\n   */\n  @property({ type: Boolean, attribute: 'sidebar-open', reflect: true })\n  sidebarOpen = false\n\n  @property({ type: Boolean, attribute: 'header-glow', reflect: true })\n  headerGlow = false\n\n  /** 内置无障碍名的成组覆盖；未提供的 key 回退内置英文文案（见 ADR-0016）。 */\n  @property({ attribute: false }) ariaLabels?: LayoutAriaLabels\n\n  /*\n   * `mobile` 是派生输出，不是第二个输入：像 `web-ui-theme` 的 `resolved-appearance` 一样由组件\n   * 独占写入，读取取 `MOBILE_VIEWPORT_QUERY`。外部写 attribute 会在同一次 reaction 内被恢复，\n   * 写 property 不生效（只读 accessor，严格模式下抛错）——两种写法都不构成本属性之外的\n   * 第三个视口来源。\n   */\n  @property({ type: Boolean, attribute: 'mobile', reflect: true })\n  private _mobile = false\n\n  /**\n   * 当前视口是否落在移动端分支（即 `MOBILE_VIEWPORT_QUERY` 命中）。\n   *\n   * 与组件渲染哪一套树、以及 `mobile-change` 的派发是同一个值：翻转瞬间三者一起变，\n   * Consumer 不必自己写断点判断，也不会与 layout 内部的树切换错开半拍。派生状态只读。\n   */\n  get mobile(): boolean {\n    return this._mobile\n  }\n\n  private _mobileQuery: MediaQueryList | null = null\n\n  private readonly _onMobileQueryChange = (event: MediaQueryListEvent) => {\n    this._syncMobile(event.matches)\n  }\n\n  /*\n   * 本方法由媒体查询翻转驱动，也被连接时的初次求值调用；attribute 的恢复路径见\n   * `attributeChangedCallback`，那里不改判、也不派发通知，所以 `mobile-change` 只在\n   * 视口真正跨断点时出现一次（窄视口挂载时那次算第一次）。\n   */\n  private _syncMobile(next: boolean) {\n    if (next === this._mobile) return\n    this._mobile = next\n    // 跨断点会卸载桌面 layout（resize handle 随之消失）；必须先终结进行中的拖拽，\n    // 否则手势悬挂，切回桌面后所有新拖拽都在入口被 `_isResizing()` 拦下。\n    if (this._isResizing()) this._resetActiveResize()\n    this.toggleAttribute('mobile', next)\n    this.dispatchEvent(new CustomEvent('mobile-change', { detail: { mobile: next }, bubbles: true, composed: true }))\n  }\n\n  override attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null) {\n    super.attributeChangedCallback(name, oldValue, newValue)\n    // super 已把外部值写进 backing field，所以这里要按媒体查询重算，不能拿字段当真相。\n    if (name !== 'mobile') return\n    // 无 matchMedia 的环境没有视口可判，`mobile` 恒为 false（见 connectedCallback）。\n    const derived = this._mobileQuery?.matches ?? false\n    if (this._mobile !== derived) this._mobile = derived\n    /*\n     * 布尔 attribute 只论存在性，但值本身也要归位：`setAttribute('mobile', 'false')` 在移动端\n     * 会让 backing field 与 attribute 的**存在性**一致、值却留在宿主上（`getAttribute` 会回读\n     * 到 consumer 写的那串）。组件写的形态是空串，这里按同一形态恢复，主题的\n     * `resolved-appearance` 先例同理。\n     */\n    if (derived) {\n      if (this.getAttribute('mobile') !== '') this.setAttribute('mobile', '')\n      return\n    }\n    if (this.hasAttribute('mobile')) this.removeAttribute('mobile')\n  }\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._mobile) {\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._mobile || 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、跨越移动端断点和切入 no-sidebar 时共用此收尾。\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._mobile || 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  /*\n   * 视口判定订阅媒体查询，而不是监听 window resize：跨断点每次只派发一次 change，没有\n   * resize 事件流要挡。判定、CSS 的 `@media (width <= 640px)` 与对外暴露的 `mobile` 因此\n   * 在同一时刻翻转，不会留下「树还在桌面、aside 已被 CSS 藏起来」的空档。\n   */\n  private _syncMobileViewportSubscription() {\n    this._mobileQuery?.removeEventListener('change', this._onMobileQueryChange)\n    // jsdom 等没有 matchMedia 的环境没有视口可判：`mobile` 停在 false，订阅与渲染照常。\n    this._mobileQuery = typeof window.matchMedia === 'function' ? window.matchMedia(MOBILE_VIEWPORT_QUERY) : null\n    this._mobileQuery?.addEventListener('change', this._onMobileQueryChange)\n    this._syncMobile(this._mobileQuery?.matches ?? false)\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this._syncMobileViewportSubscription()\n    void this.updateComplete.then(() => {\n      if (this.isConnected) this._syncBannerPresence()\n    })\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    this._resetActiveResize()\n    this._mobileQuery?.removeEventListener('change', this._onMobileQueryChange)\n    this._mobileQuery = 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  /*\n   * 切到无 sidebar 模式会卸载 aside；先终结进行中的拖拽与未提交的临时宽度，\n   * 否则手势悬挂，切回桌面后新拖拽会在 `_isResizing()` 入口被拦下。\n   */\n  protected override willUpdate(changed: PropertyValues) {\n    super.willUpdate(changed)\n    if (changed.has('noSidebar') && this.noSidebar) this._resetActiveResize()\n  }\n\n  override render() {\n    const showSidebar = !this.noSidebar\n    const isSidebarOpen = !this.sidebarCollapsed\n    // 拖拽中的临时宽度优先于 prop 宽度；移动端宽度由 Drawer 内部变量管理。\n    const sidebarStyle = this._mobile\n      ? {}\n      : { width: this._resizeWidth ?? (this.sidebarCollapsed ? this.collapsedWidth : this.sidebarWidth) }\n\n    const toggleLabel = resolveBuiltinLabelSet(this.ariaLabels, isSidebarOpen ? 'collapseSidebar' : 'expandSidebar')\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    const header = html`\n      <header class=\"${classMap({ 'wui-glow': this.headerGlow })}\">\n        ${\n          this._mobile && showSidebar\n            ? html`\n                <web-ui-button\n                  class=\"mobile-toggle\"\n                  icon\n                  variant=\"glass\"\n                  @click=\"${this._toggleSidebar}\"\n                  aria-label=${resolveBuiltinLabelSet(this.ariaLabels, 'openNavigationMenu')}\n                >\n                  <web-ui-icon .icon=${radixIconsPanelLeftMinimized}></web-ui-icon>\n                </web-ui-button>\n              `\n            : nothing\n        }\n        <slot name=\"header\"></slot>\n      </header>\n    `\n\n    const contentLayout = html`\n      <div class=\"layout-content\">\n        ${header}\n        <main><slot></slot></main>\n        <footer><slot name=\"tabbar\"></slot></footer>\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=${resolveBuiltinLabelSet(this.ariaLabels, 'resizeSidebar')}\n                      @pointerdown=${this._handleResizePointerDown}\n                      @keydown=${this._handleResizeKeydown}\n                    ></div>\n                  `\n                : nothing\n            }\n          </aside>\n        </div>\n        ${contentLayout}\n      </div>\n    `\n\n    const mobileDrawer = html`\n      <web-ui-drawer\n        placement=\"left\"\n        ?open=\"${this.sidebarOpen}\"\n        controlled\n        draggable\n        aria-dialog-label=${resolveBuiltinLabelSet(this.ariaLabels, 'mainNavigation')}\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    /*\n     * 无 sidebar 模式只留内容列：桌面 aside 与移动端 Toggle / Drawer 都不进树，\n     * `sidebar` slot 因而没有渲染出口（消费方节点仍留在 light DOM）。\n     */\n    const layoutBody = showSidebar\n      ? this._mobile\n        ? html`${contentLayout}${mobileDrawer}`\n        : desktopLayout\n      : contentLayout\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        ${layoutBody}\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    'mobile-change': CustomEvent<{ mobile: boolean }>\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-layout': WebUiLayout\n  }\n}\n"],"mappings":"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"}

package/dist/components/layout/style.js

@@ -1,6 +1,5 @@
-//#region src/components/layout/style.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{--wui-layout-visible-banner-height:0px;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));padding:var(--wui-space-2,8px) 0 var(--wui-space-2,8px) var(--wui-space-2,8px);transition:width var(--wui-duration-layout,.2s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));flex-direction:column;flex-shrink:0;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,#e9e9e9d1);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:var(--wui-layout-sidebar-toggle-width,44px);margin:var(--wui-space-2,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,#0071e3);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}.sidebar-resize-handle:focus-visible{border-radius:var(--wui-radius-control,calc(infinity * 1px));outline:var(--wui-focus-ring-width,3px) solid var(--wui-color-focus-ring,color-mix(in srgb, var(--wui-color-accent,#0071e3) 40%, transparent));outline-offset:2px}aside.is-resizing{transition:none}.layout-content{flex-direction:column;flex:1;min-width:0;display:flex;overflow-x:clip}header{isolation:isolate;z-index:var(--wui-layer-header,10);gap:var(--wui-space-2,8px);align-items:center;display:flex;position:sticky;top:0}.mobile-toggle{margin-left:var(--wui-layout-mobile-toggle-inset,8px)}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{margin-top:var(--wui-space-2,8px);align-self:flex-start}}@media (prefers-reduced-motion:reduce){aside,.sidebar-resize-handle:before{transition:none}}";
-//#endregion
-export { e as default };
+// src/components/layout/style.css?inline
+var style_default = "*,:before,:after{box-sizing:border-box}:host{--wui-layout-visible-banner-height:0px;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));padding:var(--wui-space-2,8px) 0 var(--wui-space-2,8px) var(--wui-space-2,8px);transition:width var(--wui-duration-layout,.2s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));flex-direction:column;flex-shrink:0;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,#e9e9e9d1);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:var(--wui-layout-sidebar-toggle-width,44px);margin:var(--wui-space-2,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,#0071e3);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}.sidebar-resize-handle:focus-visible{border-radius:var(--wui-radius-control,calc(infinity * 1px));outline:var(--wui-focus-ring-width,3px) solid var(--wui-color-focus-ring,color-mix(in srgb, var(--wui-color-accent,#0071e3) 40%, transparent));outline-offset:2px}aside.is-resizing{transition:none}.layout-content{flex-direction:column;flex:1;min-width:0;display:flex;overflow-x:clip}header{isolation:isolate;z-index:var(--wui-layer-header,10);gap:var(--wui-space-2,8px);align-items:center;display:flex;position:sticky;top:0}.mobile-toggle{margin-left:var(--wui-layout-mobile-toggle-inset,8px)}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{margin-top:var(--wui-space-2,8px);align-self:flex-start}}@media (prefers-reduced-motion:reduce){aside,.sidebar-resize-handle:before{transition:none}}\n";
+export { style_default as default };
 
 //# sourceMappingURL=style.js.map

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\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: var(--wui-space-2, 8px) 0 var(--wui-space-2, 8px) var(--wui-space-2, 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       浅色保持中性分层，无 theme 时回退到同一字面量。 */\n    background-color: var(--wui-color-surface-sidebar, rgb(233 233 233 / 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    /*\n     * 走可覆盖的 var：`.sidebar-toggle` 自身声明的 `--wui-button-width` 优先于从\n     * 祖先继承的同名变量，app 侧无法直接改写它。要让 collapsed state 的 toggle 跟着 collapsed width\n     * 一起变，只能由这里显式接一个出口。取值由 app 决定，本组件不假设 collapsed width。\n     * 默认值与历史硬编码一致，不设置时行为不变。\n     */\n    --wui-button-width: var(--wui-layout-sidebar-toggle-width, 44px);\n\n    margin: var(--wui-space-2, 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, #0071e3);\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/*\n * 键盘 focus 同时给出两样东西：竖条与 hover / 拖拽同形，ring 与其余组件同一套浅蓝\n * 样式。竖条说明「命中条在哪」，ring 说明「键盘落点在哪」——handle 宽 12px 且通高，\n * 命中区远大于 3px 竖条本身，只靠竖条不足以说明焦点位置。\n *\n * ring 沿用 --wui-focus-ring-width / --wui-color-focus-ring 两个 token。圆角取\n * control token 后 outline 呈细长胶囊，与 button 的胶囊 ring 同一形状语言；offset\n * 2px 让 ring 骑在 aside 右缘内外两侧，不被 aside 裁掉。\n */\n.sidebar-resize-handle:focus-visible {\n  border-radius: var(--wui-radius-control, calc(infinity * 1px));\n  outline: var(--wui-focus-ring-width, 3px) solid\n    var(--wui-color-focus-ring, color-mix(in srgb, var(--wui-color-accent, #0071e3) 40%, transparent));\n  outline-offset: 2px;\n}\n\n/* 拖拽中禁用宽度过渡，保证实时跟手。 */\naside.is-resizing {\n  transition: none;\n}\n\n.layout-content {\n  /*\n   * 内容列的横向溢出由本层裁掉，避免撑出页面横向 scrollbar；它有 min-width: 0，\n   * 是容纳横向溢出的位置。glow 伪元素已收在 header 盒内（见 header 的注释），\n   * 不再依赖这层裁剪。\n   *\n   * clip 不创建滚动容器，因此不影响 header / footer 自身的 sticky；也不用 hidden——\n   * 那会把本层变成滚动容器，sticky 随即失效。\n   */\n  overflow-x: clip;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n\n  min-width: 0;\n}\n\nheader {\n  /*\n   * isolation: isolate 把负层级的 .wui-glow 伪元素限定在本 Header 的局部 stacking\n   * context，slot 内容自然位于其上。晕染本身来自共享样式（src/classes/glow.css），\n   * header-glow 属性负责挂 class。\n   *\n   * 「纵向必须 visible 才留得住模糊尾巴与下拉 overlay 的溢出空间」仍然成立——\n   * overflow-* 一旦生效就会裁剪该轴，visible 是这些内容的唯一溢出出口。\n   */\n  isolation: isolate;\n  position: sticky;\n  z-index: var(--wui-layer-header, 10);\n  top: 0;\n\n  display: flex;\n  gap: var(--wui-space-2, 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\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: var(--wui-space-2, 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\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: var(--wui-space-2, 8px) 0 var(--wui-space-2, 8px) var(--wui-space-2, 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       浅色保持中性分层，无 theme 时回退到同一字面量。 */\n    background-color: var(--wui-color-surface-sidebar, rgb(233 233 233 / 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    /*\n     * 走可覆盖的 var：`.sidebar-toggle` 自身声明的 `--wui-button-width` 优先于从\n     * 祖先继承的同名变量，app 侧无法直接改写它。要让 collapsed state 的 toggle 跟着 collapsed width\n     * 一起变，只能由这里显式接一个出口。取值由 app 决定，本组件不假设 collapsed width。\n     * 默认值 44px；app 侧不覆盖时就是这个宽度。\n     */\n    --wui-button-width: var(--wui-layout-sidebar-toggle-width, 44px);\n\n    margin: var(--wui-space-2, 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, #0071e3);\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/*\n * 键盘 focus 同时给出两样东西：竖条与 hover / 拖拽同形，ring 与其余组件同一套浅蓝\n * 样式。竖条说明「命中条在哪」，ring 说明「键盘落点在哪」——handle 宽 12px 且通高，\n * 命中区远大于 3px 竖条本身，只靠竖条不足以说明焦点位置。\n *\n * ring 沿用 --wui-focus-ring-width / --wui-color-focus-ring 两个 token。圆角取\n * control token 后 outline 呈细长胶囊，与 button 的胶囊 ring 同一形状语言；offset\n * 2px 让 ring 骑在 aside 右缘内外两侧，不被 aside 裁掉。\n */\n.sidebar-resize-handle:focus-visible {\n  border-radius: var(--wui-radius-control, calc(infinity * 1px));\n  outline: var(--wui-focus-ring-width, 3px) solid\n    var(--wui-color-focus-ring, color-mix(in srgb, var(--wui-color-accent, #0071e3) 40%, transparent));\n  outline-offset: 2px;\n}\n\n/* 拖拽中禁用宽度过渡，保证实时跟手。 */\naside.is-resizing {\n  transition: none;\n}\n\n.layout-content {\n  /*\n   * 内容列的横向溢出由本层裁掉，避免撑出页面横向 scrollbar；它有 min-width: 0，\n   * 是容纳横向溢出的位置。glow 伪元素已收在 header 盒内（见 header 的注释），\n   * 不再依赖这层裁剪。\n   *\n   * clip 不创建滚动容器，因此不影响 header / footer 自身的 sticky；也不用 hidden——\n   * 那会把本层变成滚动容器，sticky 随即失效。\n   */\n  overflow-x: clip;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n\n  min-width: 0;\n}\n\nheader {\n  /*\n   * isolation: isolate 把负层级的 .wui-glow 伪元素限定在本 Header 的局部 stacking\n   * context，slot 内容自然位于其上。晕染本身来自共享样式（src/classes/glow.css），\n   * header-glow 属性负责挂 class。\n   *\n   * 「纵向必须 visible 才留得住模糊尾巴与下拉 overlay 的溢出空间」仍然成立——\n   * overflow-* 一旦生效就会裁剪该轴，visible 是这些内容的唯一溢出出口。\n   */\n  isolation: isolate;\n  position: sticky;\n  z-index: var(--wui-layer-header, 10);\n  top: 0;\n\n  display: flex;\n  gap: var(--wui-space-2, 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\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: var(--wui-space-2, 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":";AAAA,IAAA,gBAAA"}

package/dist/components/middle-ellipsis/index.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, PropertyValues } from 'lit';
+import { LitElement, PropertyValues } from "lit";
 /**
  * 单行中间省略：把超长文本截成 `首段…尾段`，省略号出现在中间而不是末尾。
  *
@@ -11,97 +11,98 @@ import { LitElement, PropertyValues } from 'lit';
  * JS 方案绕不开的代价，见 docs/research/web-ui-middle-ellipsis-261007.md。
  */
 export declare class WebUiMiddleEllipsis extends LitElement {
-    static styles: import('lit').CSSResult[];
-    /** 要显示的完整文本。组件只读它，不回写。 */
-    text: string;
-    /** 中间插入的标记，默认 `…`（U+2026）。空串即「只截断不给信号」，是否这样用由调用方判断。 */
-    set marker(value: string);
-    get marker(): string;
-    private _marker;
-    /**
-     * 标记所在的横向比例，0–100，默认 `50`（居中）。
-     *
-     * 与 CSSWG css-overflow-5 的 `text-overflow: ellipsis <length-percentage>` 同向：量的是标记
-     * 结束边距行末边的距离占可用行内空间的比例。`0` 只剩头部（等价于末尾省略），`100` 只剩尾部。
-     * 文件名这类「头部是路径噪声、尾部才是扩展名」的场景用**大于** 50 的值让尾部多留一些。
-     */
-    set markerPosition(value: number);
-    get markerPosition(): number;
-    private _markerPosition;
-    private _display;
-    private _truncated;
-    private _root?;
-    private _textEl?;
-    private _measure?;
-    private _markerProbe?;
-    /** 最近一次切分依据的可用宽度（px）；-1 表示还没量到过布局。 */
-    private _available;
-    /** 最近一次 ResizeObserver 测得的宿主内容盒宽度；收敛守卫跳过拟合时也继续更新。 */
-    private _observedWidth;
-    /** 当前渲染出来的文本实际占宽（px）。收敛守卫靠它判断现有输出是否已经放得下。 */
-    private _rendered;
-    /** 输入或字体度量变过、还没重新拟合。 */
-    private _dirty;
-    private _refineRound;
-    private _observedMeasure?;
-    private readonly _range;
-    private readonly _width;
-    private readonly _onMeasurementChange;
-    private readonly _probe;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    willUpdate(changed: PropertyValues<this>): void;
-    updated(): void;
-    /**
-     * 容器宽度变化。
-     *
-     * 收缩方向带一条收敛守卫：宿主宽度由内容决定时（flex 主轴 `auto`、或 `width: fit-content` 在内容
-     * 缩到容器以内之后），把自己截短会反过来把宿主量窄，于是排下一次尺寸回调。这个自驱动收缩**可能**
-     * 一路棘轮到只剩标记，是否发生取决于度量：
-     *
-     * - flex + 等宽 16px + 默认 50%：缩掉的量小于一个簇宽时，重新二分落回同一组切点，走一步就停。
-     * - `width: fit-content` + `marker-position: 80` + CJK：每个簇都是整宽块，切短一簇与宿主窄一簇
-     *   互相咬合，摘掉本守卫后 300px 容器里逐帧 282→266→…→10，九步塌到只剩标记（同仓 browser spec
-     *   的「fit-content 宿主 + 非居中标记」用例钉住了这一条）。
-     *
-     * 判据因此取「当前输出已经放得下」：放得下就没有必须重切的理由，自驱动收缩在第一步就停，与度量
-     * 无关；真正的容器收缩会让输出宽于新宽度，那时才重切。放长方向没有这个问题，一律重切（可能能
-     * 少截一些）。
-     */
-    private _onWidth;
-    /**
-     * 把一次重切排到当前更新周期之外。
-     *
-     * 重切只能在渲染之后量到宽度才做得了，所以第二次更新是必然的；区别只在它从哪里排出去。
-     * 微任务仍排在下一帧渲染之前，画面不会先闪一版全文，而 `updated()` 返回时更新已不再是
-     * pending，Lit 的 `change-in-update` 警告不会触发。
-     */
-    private _defer;
-    /**
-     * 同步可读的可用行内空间。
-     *
-     * ResizeObserver 的回调在布局之后才到，属性刚改完的那一帧还没有宽度可用；用 `.root` 的
-     * 内容盒补上，免得先按全文画一帧再切。jsdom 没有布局，读到的 0 由 `_apply` 跳过。
-     */
-    private _currentWidth;
-    /**
-     * 按可用宽度切分并写回渲染结果。
-     *
-     * 宽度为 0（没有布局）时什么都不做，**并且保留 `_dirty`**：宿主不可见期间改 text 时这一趟
-     * 必然被跳过，若在这里就把「有未落的拟合」清掉，等它重新有布局时就没有任何东西记得要切了。
-     * 清标记因此只发生在真的切完之后。
-     */
-    private _apply;
-    private _settle;
-    /** 把全文装进隐藏量具。它没有 Lit 绑定，改它不会触发重渲染。 */
-    private _syncMeasure;
-    private _observeMeasure;
-    /** `[from, to)` 这段原文在量具里的渲染宽度。空区间恒为 0——Range 塌缩矩形的宽度不可靠。 */
-    private _rangeWidth;
-    render(): import('lit').TemplateResult<1>;
+  static styles: import("lit").CSSResult[];
+  /** 要显示的完整文本。组件只读它，不回写。 */
+  text: string;
+  /** 中间插入的标记，默认 `…`（U+2026）。空串即「只截断不给信号」，是否这样用由调用方判断。 */
+  set marker(value: string);
+  get marker(): string;
+  private _marker;
+  /**
+   * 标记所在的横向比例，0–100，默认 `50`（居中）。
+   *
+   * 与 CSSWG css-overflow-5 的 `text-overflow: ellipsis <length-percentage>` 同向：量的是标记
+   * 结束边距行末边的距离占可用行内空间的比例。`0` 只剩头部（等价于末尾省略），`100` 只剩尾部。
+   * 文件名这类「头部是路径噪声、尾部才是扩展名」的场景用**大于** 50 的值让尾部多留一些。
+   */
+  set markerPosition(value: number);
+  get markerPosition(): number;
+  private _markerPosition;
+  private _display;
+  private _truncated;
+  private _root?;
+  private _textEl?;
+  private _measure?;
+  private _markerProbe?;
+  /** 最近一次切分依据的可用宽度（px）；-1 表示还没量到过布局。 */
+  private _available;
+  /** 最近一次 ResizeObserver 测得的宿主内容盒宽度；收敛守卫跳过拟合时也继续更新。 */
+  private _observedWidth;
+  /** 当前渲染出来的文本实际占宽（px）。收敛守卫靠它判断现有输出是否已经放得下。 */
+  private _rendered;
+  /** 输入或字体度量变过、还没重新拟合。 */
+  private _dirty;
+  private _refineRound;
+  private _observedMeasure?;
+  private readonly _range;
+  private readonly _width;
+  private readonly _onMeasurementChange;
+  private readonly _probe;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  willUpdate(changed: PropertyValues<this>): void;
+  updated(): void;
+  /**
+   * 容器宽度变化。
+   *
+   * 收缩方向带一条收敛守卫：宿主宽度由内容决定时（flex 主轴 `auto`、或 `width: fit-content` 在内容
+   * 缩到容器以内之后），把自己截短会反过来把宿主量窄，于是排下一次尺寸回调。这个自驱动收缩**可能**
+   * 一路棘轮到只剩标记，是否发生取决于度量：
+   *
+   * - flex + 等宽 16px + 默认 50%：缩掉的量小于一个簇宽时，重新二分落回同一组切点，走一步就停。
+   * - `width: fit-content` + `marker-position: 80` + CJK：每个簇都是整宽块，切短一簇与宿主窄一簇
+   *   互相咬合，摘掉本守卫后 300px 容器里逐帧 282→266→…→10，九步塌到只剩标记（同仓 browser spec
+   *   的「fit-content 宿主 + 非居中标记」用例钉住了这一条）。
+   *
+   * 判据因此取「当前输出已经放得下」：放得下就没有必须重切的理由，自驱动收缩在第一步就停，与度量
+   * 无关；真正的容器收缩会让输出宽于新宽度，那时才重切。放长方向没有这个问题，一律重切（可能能
+   * 少截一些）。
+   */
+  private _onWidth;
+  /**
+   * 把一次重切排到当前更新周期之外。
+   *
+   * 重切只能在渲染之后量到宽度才做得了，所以第二次更新是必然的；区别只在它从哪里排出去。
+   * 微任务仍排在下一帧渲染之前，画面不会先闪一版全文，而 `updated()` 返回时更新已不再是
+   * pending，Lit 的 `change-in-update` 警告不会触发。
+   */
+  private _defer;
+  /**
+   * 同步可读的可用行内空间。
+   *
+   * ResizeObserver 的回调在布局之后才到，属性刚改完的那一帧还没有宽度可用；用 `.root` 的
+   * 内容盒补上，免得先按全文画一帧再切。jsdom 没有布局，读到的 0 由 `_apply` 跳过。
+   */
+  private _currentWidth;
+  /**
+   * 按可用宽度切分并写回渲染结果。
+   *
+   * 宽度为 0（没有布局）时什么都不做，**并且保留 `_dirty`**：宿主不可见期间改 text 时这一趟
+   * 必然被跳过，若在这里就把「有未落的拟合」清掉，等它重新有布局时就没有任何东西记得要切了。
+   * 清标记因此只发生在真的切完之后。
+   */
+  private _apply;
+  private _settle;
+  /** 把全文装进隐藏量具。它没有 Lit 绑定，改它不会触发重渲染。 */
+  private _syncMeasure;
+  private _observeMeasure;
+  /** `[from, to)` 这段原文在量具里的渲染宽度。空区间恒为 0——Range 塌缩矩形的宽度不可靠。 */
+  private _rangeWidth;
+  render(): import("lit").TemplateResult<1>;
 }
 declare global {
-    interface HTMLElementTagNameMap {
-        'web-ui-middle-ellipsis': WebUiMiddleEllipsis;
-    }
+  interface HTMLElementTagNameMap {
+    'web-ui-middle-ellipsis': WebUiMiddleEllipsis;
+  }
 }
+//# sourceMappingURL=index.d.ts.map

package/dist/components/middle-ellipsis/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/components/middle-ellipsis/index.ts"],"mappings":";;;;;;;;;;;;qBA4Ia,4BAA4B;SACvB,sBAAM;;EAGM;;MAIxB,OAAO;MAUP;UAII;;;;;;;;MAUJ,eAAe;MAYf;UAII;UAQA;UACA;UAEgB;UACA;UACG;UACK;;UAGxB;;UAEA;;UAEA;;UAEA;UACA;UACA;mBAES;mBAEA;mBAEA;mBAOA;EAMR;EASA;EAQA,WAAW,SAAS;EAapB;;;;;;;;;;;;;;;;;UAgDD;;;;;;;;UA+BA;;;;;;;UAUA;;;;;;;;UAWA;UAaA;;UAUA;UAQA;;UAUA;EAWC,wBAAM;;QAWT;YACI;IACR,0BAA0B"}