npm - @greypan/web-ui - Versions diffs - 12.0.1 → 12.1.0 - Mend

@greypan/web-ui 12.0.1 → 12.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (129) hide show

package/dist/components/dialog/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["glass","modalSurface","scrollbarStyle","style","oouiClose"],"sources":["../../../src/components/dialog/index.ts"],"sourcesContent":["import '@/components/button'\nimport '@/components/icon'\n\nimport { html, LitElement, nothing, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport modalSurface from '@/assets/modal-surface.css?inline'\nimport scrollbarStyle from '@/assets/scrollbar.css?inline'\nimport glass from '@/classes/glass.css?inline'\nimport { oouiClose } from '@/icons'\nimport { UserChangeController } from '@/shared/events/user-change'\nimport { trapTabKey } from '@/shared/focus/tabbable'\nimport { resolveBuiltinLabel } from '@/shared/locale/builtin-labels'\nimport { dispatchOpenChangeEvent } from '@/shared/open-state'\nimport { defineNativeDialogPresence } from '@/shared/overlay/native-dialog-presence'\nimport { defineOpenOverlay, type OpenOverlayHandle } from '@/shared/overlay/open-overlay'\nimport { defineScrollLockLease } from '@/shared/scroll-lock/scroll-lock'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-dialog')\nexport class WebUiDialog extends LitElement {\n static override styles = [unsafeCSS(glass), unsafeCSS(modalSurface), unsafeCSS(scrollbarStyle), unsafeCSS(style)]\n\n @property({ type: Boolean, reflect: true }) open = false\n @property({ type: Boolean, reflect: true }) closable = false\n @property({ type: Boolean, reflect: true }) horizontal = false\n @property({ type: Boolean, reflect: true, attribute: 'no-scroll-lock' }) noScrollLock = false\n @property({ type: Boolean, reflect: true, attribute: 'no-backdrop-close' }) noBackdropClose = false\n @property({ type: Boolean, reflect: true, attribute: 'no-escape-close' }) noEscapeClose = false\n\n /*\n Controlled 模式下，Escape 和 backdrop 点击只派发 `open-change` 请求，\n * 不会自行修改 `open`。Consumer 回写 `open` 后才执行关闭动画。\n * 程序化 API（showModal/close/直接赋值 open）不受此模式影响，始终直通。\n /\n @property({ type: Boolean, reflect: true }) controlled = false\n\n /\n `header` 槽为空时的标题文案。槽优先：一旦有元素分配到 `header`，槽内容整条接管，\n * 属性被忽略。默认空串且槽也为空时不渲染 chrome 带。`headless` 模式不渲染 chrome 带，\n * `heading` 一并失效。\n /\n @property({ type: String }) heading = ''\n\n /\n Headless 模式：只保留 overlay 基础设施（backdrop、动画、scroll lock、`<dialog>` 语义），\n * 移除内置 UI（chrome 带、正文区、footer），默认槽的内容渲染进卡片内的滚动层\n * `.wui-dialog-content`，视觉交给 Consumer。形态与 `<web-ui-drawer>` 的 `headless` 一致。\n \n 该模式没有可自动关联的内置标题，内部原生 dialog 的 accessible name 必须由 Consumer\n * 用 `aria-dialog-label`（或自绘标题 + 自己的 `aria-labelledby`）提供。\n /\n @property({ type: Boolean, reflect: true }) headless = false\n\n /\n 内部原生 dialog 的 accessible name。`headless` 模式必须由 Consumer 提供，\n * 因为该模式不会渲染可自动关联的内置 chrome 带。\n /\n @property({ type: String, attribute: 'aria-dialog-label' }) ariaDialogLabel = ''\n\n /\n * `dialog-label` 自 11.1.0 发布，为已上线消费方保留兼容别名：attribute 仍可写，\n * 内部转发到 ariaDialogLabel。canonical 名是 aria-dialog-label；两个 attribute 同时\n * 设置时后处理者生效，文档不推荐这样做。下个 major 移除本别名。\n /\n /* @deprecated 用 `aria-dialog-label`。 /\n @property({ type: String, attribute: 'dialog-label' })\n get dialogLabel(): string {\n return this.ariaDialogLabel\n }\n set dialogLabel(value: string) {\n this.ariaDialogLabel = value\n }\n\n /* 关闭按钮的无障碍名称；未设置时回退内置英文文案（见 ADR-0016）。 /\n @property({ type: String, attribute: 'aria-close-label' }) ariaCloseLabel = ''\n\n @state() private _hasHeader = false\n private readonly _userOpenChange = new UserChangeController()\n\n /\n * 开启态 overlay（issue #120 Block 1）。Escape 不走原生 cancel 事件：仲裁者\n * 会在 keydown 上 preventDefault 压掉原生关闭请求并 stopPropagation，因此这里必须\n * 自己表达关闭语义（controlled 只派发请求）。\n /\n private readonly _overlay = defineOpenOverlay().make({\n requestClose: () => this._closeFromUser(),\n isConnected: () => this.isConnected\n })\n /* 当前开启会话的 handle；未开启时为 null。查询与惰性同步走它。 /\n private _handle: OpenOverlayHandle \| null = null\n private readonly _scrollLock = defineScrollLockLease().make()\n private readonly _presence = defineNativeDialogPresence().make({\n getDialog: () => this.dialog,\n isConnected: () => this.isConnected,\n isOpen: () => this.open\n })\n\n private get dialog() {\n return this.shadowRoot?.querySelector('dialog') ?? null\n }\n\n protected override updated(props: PropertyValues) {\n super.updated(props)\n if (!this.isConnected) return\n\n if (props.has('open')) {\n if (this._userOpenChange.consume()) this.emitOpenChange()\n this._presence.sync(this.open)\n if (this.open) {\n // presence.sync 内的 showModal() 把 dialog 提升进 top layer。双击手势本身\n // 留下的活选区会被浏览器拿去和提升后的新布局重新解析，结果选区落到刚挂载的\n // dialog 正文上。脆弱的是「手势来源的活选区」，不是 dblclick 的判定窗口：把\n // 打开推迟 250ms（早过双击判定）仍然复现。选区由浏览器在 showModal() 调用\n // 内部生成：脚本没有任何 Selection API 调用，在 dblclick 上 preventDefault\n // 也拦不住。\n //\n // 实测（Chromium）showModal() 不会动打开前已经存在的选区，所以这一次清理\n // 同时也覆盖「先选中页面文本、再打开」的情况——modal 打开后被选中的内容挡在\n // backdrop 后面本来也已不可用。这里只清文档选区，不动 user-select，overlay 内正文\n // 仍可正常拖选。\n window.getSelection()?.removeAllRanges()\n }\n // 原生 dialog 登记为开启态 overlay：挂在它上面的 portal panel 成为本层后代，\n // Escape 仲裁据此判出最内层（issue #120 Block 1）。\n const dialog = this.dialog\n if (dialog) {\n if (this.open) {\n // 同一 panel 重新 claim = 新的一次开启：旧会话（含其子层）整体作废。\n this._handle?.release()\n this._handle = this._overlay.claim(dialog, { ancestryFrom: this })\n } else {\n this._handle?.release()\n this._handle = null\n }\n }\n }\n if (props.has('open') \|\| props.has('noScrollLock')) this._syncScrollLock()\n this._syncOverlayInert()\n }\n\n override connectedCallback() {\n super.connectedCallback()\n // 重挂载对账：断连时 presence、滚动锁与登记都已被撤销，而 `open` 未变化时\n // `updated()` 不会补跑任何 sync 分支。首次连接时 shadow 尚未渲染、`this.dialog`\n // 为 null，三种情况都直接跳过；打开态的首次进入仍由 updated() 的\n // `props.has('open')` 分支处理。\n this._presence.reconcile()\n this._syncScrollLock()\n this._reclaimIfOpen()\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this._presence.dispose()\n this._scrollLock.release()\n // 断连即撤销登记：层不留在全局注册表里，重连后由 _reclaimIfOpen 显式重新声明。\n this._handle?.release()\n this._handle = null\n }\n\n /\n * 「重挂载恢复」的调用方一半：模块刻意不观察 DOM 连接状态，所以断连撤销登记之后，\n * 重连时仍有开启态就必须由组件重新声明。\n /\n private _reclaimIfOpen() {\n if (!this.open \|\| this._handle) return\n const dialog = this.dialog\n if (!dialog) return\n this._handle = this._overlay.claim(dialog, { ancestryFrom: this })\n this._syncOverlayInert()\n }\n\n /\n * `no-escape-close` 时 dialog 仍是候选（Escape 被吞掉、原生 cancel 被压掉），只是\n * 不走关闭入口：若改成跳过候选，事件会落到下层 overlay，把外层一起关掉。该属性可在开启\n * 期间改写，所以每次渲染后读它，而不是在 claim 时固定。\n /\n private _syncOverlayInert() {\n this._handle?.setInert(this.noEscapeClose)\n }\n\n showModal() {\n if (this.open) return\n this.open = true\n }\n\n close() {\n this.open = false\n }\n\n /\n * 仲裁者在 capture 阶段 preventDefault 了 Escape 的 keydown，UA 因此不再派发原生\n * cancel，但本 handler 仍有两个仲裁者不负责的职责，不可删：\n * ① 任何到达 dialog 的 cancel 都要 preventDefault，把 top layer 保留到视觉退场结束\n * （否则原生关闭会跳过退出动画）；\n * ② 忽略子控件（例如 file input）冒泡上来的 cancel。\n * 实测（overlay-open-owner-260918，2026-09-18）摘掉 `@cancel` 后 dialog.browser.spec.ts\n * 的「no-escape-close 存在时 Escape/cancel 不关闭 dialog」与 remount-reconcile 的\n * 「打开态被移出文档再接回」两例立刻转红，断言正是 `dispatchEvent(cancel) === false`。\n /\n private handleCancel(e: Event) {\n if (e.target !== e.currentTarget) return\n\n e.preventDefault()\n if (this.noEscapeClose) return\n this._closeFromUser()\n }\n\n private handleBackdropClick(e: MouseEvent) {\n if (e.target !== (e.currentTarget as HTMLDialogElement)) return\n if (this.noBackdropClose) return\n this._closeFromUser()\n }\n\n private handleKeydown(e: KeyboardEvent) {\n if (e.key !== 'Tab') return\n // 嵌套 drawer 的 Tab 沿 slot 宿主链冒泡到这里；边界回卷由最内层负责。\n const path = e.composedPath()\n const ownIndex = path.indexOf(e.currentTarget as Node)\n if (ownIndex > 0 && path.slice(0, ownIndex).some(node => node instanceof HTMLDialogElement)) return\n const dialog = this.dialog\n if (dialog) trapTabKey(e, dialog)\n }\n\n /* 用户发起的关闭入口（Escape、backdrop 点击、关闭 button）共用一条路径。 /\n private readonly _closeFromUser = () => {\n if (this.controlled) {\n this.emitOpenChange(false)\n return\n }\n this._userOpenChange.mark()\n this.close()\n }\n\n // controlled 下派发关闭请求：detail 固定 false（用户只能请求关闭，打开永远由 Consumer 写）。\n private emitOpenChange(open = this.open) {\n dispatchOpenChangeEvent(this, open)\n }\n\n private _onTransitionEnd = (event: TransitionEvent) => {\n this._presence.handleTransitionEnd(event)\n }\n\n private _onNativeClose = () => {\n // 关闭态下的 close 事件只可能是我们自己 finishClosing 排队的异步事件（或冗余的\n // 外部关闭）：交给 presence 消费 self-close 标志，避免标志泄漏到下一次真实关闭。\n if (!this.open) {\n this._presence.handleNativeClose()\n return\n }\n\n // 我们自己 dialog.close() 排队的 close 事件是异步任务：正常时序在本关闭会话内\n // 到达，快速「关闭→重开」时它在重新打开之后才到达（过期事件）。两种情况都已\n // 完成清理，由 presence 消费并返回 true，不能当成外部关闭把刚重开的 dialog 关掉。\n if (this._presence.handleNativeClose()) return\n\n // controlled 下原生关闭（如表单 method=\"dialog\"）视为未经 Consumer 批准的状态丢失：\n // 恢复受控状态并派发关闭请求，由 Consumer 决定是否关闭。\n if (this.controlled) {\n this._presence.sync(true)\n this.emitOpenChange(false)\n return\n }\n\n this._userOpenChange.mark()\n this.open = false\n }\n\n private _syncScrollLock(isOpen = this.open) {\n this._scrollLock.sync(isOpen && !this.noScrollLock)\n }\n\n /\n 只在「有/无」翻转时写 state：slotchange 在每次分配变化时都会触发，逐次赋值会让\n * Lit 无谓重渲染。`heading` 与槽共同决定 chrome 带的存在，见 `_showHeader`。\n /\n private _onHeaderSlotChange(e: Event) {\n if (!(e.target instanceof HTMLSlotElement)) return\n const has = e.target.assignedElements().length > 0\n if (has !== this._hasHeader) this._hasHeader = has\n }\n\n private get _showHeader(): boolean {\n return this._hasHeader \|\| this.heading !== ''\n }\n\n /\n 默认模式与 `headless` 模式共用同一枚关闭 button：都绝对定位到卡片右上角，偏移由\n * `--wui-dialog-close-top` / `--wui-dialog-close-right` 控制（见 style.css）。\n * 它在两种模式下都是卡片的直接子元素，定位参照是卡片本身（.wui-dialog-body）。\n /\n private _renderCloseButton() {\n return html`\n <web-ui-button\n class=\"wui-dialog-close\"\n @click=${this._closeFromUser}\n aria-label=${resolveBuiltinLabel('close', this.ariaCloseLabel)}\n variant=\"secondary\"\n icon\n size=\"26\"\n >\n <web-ui-icon size=\"14\" .icon=${oouiClose}></web-ui-icon>\n </web-ui-button>\n `\n }\n\n override render() {\n const showHeader = this._showHeader\n /\n * accessible name：显式 `aria-dialog-label` 优先；否则（非 headless 且带可见时）把原生 dialog\n * 的 `aria-labelledby` 指向 chrome 带——与 drawer 同形。headless 模式没有可自动关联的\n * 内置标题，名字留给 Consumer。\n */\n const dialogLabel = this.ariaDialogLabel.trim()\n const dialogLabelledBy = !dialogLabel && !this.headless && showHeader ? 'wui-dialog-heading' : nothing\n\n return html`\n <dialog\n aria-label=${dialogLabel \|\| nothing}\n aria-labelledby=${dialogLabelledBy}\n @cancel=${this.handleCancel}\n @close=${this._onNativeClose}\n @click=${this.handleBackdropClick}\n @keydown=${this.handleKeydown}\n @transitionend=${this._onTransitionEnd}\n >\n <div class=\"wui-dialog-body wui-glass\">\n ${\n this.headless\n ? html`\n <div class=\"wui-dialog-content wui-scroll\">\n <slot></slot>\n </div>\n ${this.closable ? this._renderCloseButton() : nothing}\n `\n : html`\n <div class=\"header\" id=\"wui-dialog-heading\" ?hidden=${!showHeader}>\n <slot name=\"header\" @slotchange=${this._onHeaderSlotChange}>\n ${this.heading ? html`<span class=\"wui-dialog-heading\">${this.heading}</span>` : nothing}\n </slot>\n </div>\n <div class=\"desc wui-scroll\"><slot></slot></div>\n <div class=\"wui-dialog-footer\"><slot name=\"footer\"></slot></div>\n ${this.closable ? this._renderCloseButton() : nothing}\n `\n }\n </div>\n </dialog>\n `\n }\n\n declare readonly $events: {\n 'open-change': CustomEvent<{ open: boolean }>\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-dialog': WebUiDialog\n }\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","names":["glass","modalSurface","scrollbarStyle","style","oouiClose"],"sources":["../../../src/components/dialog/index.ts"],"sourcesContent":["import '@/components/button'\nimport '@/components/icon'\n\nimport { html, LitElement, nothing, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport modalSurface from '@/assets/modal-surface.css?inline'\nimport scrollbarStyle from '@/assets/scrollbar.css?inline'\nimport glass from '@/classes/glass.css?inline'\nimport { oouiClose } from '@/icons'\nimport { UserChangeController } from '@/shared/events/user-change'\nimport { trapTabKey } from '@/shared/focus/tabbable'\nimport { resolveBuiltinLabel } from '@/shared/locale/builtin-labels'\nimport { normalizeLiteral } from '@/shared/normalize'\nimport { dispatchOpenChangeEvent } from '@/shared/open-state'\nimport { defineNativeDialogPresence } from '@/shared/overlay/native-dialog-presence'\nimport { defineOpenOverlay, type OpenOverlayHandle } from '@/shared/overlay/open-overlay'\nimport { defineScrollLockLease } from '@/shared/scroll-lock/scroll-lock'\n\nimport style from './style.css?inline'\n\nexport type DialogFooterOrientation = 'vertical' \| 'horizontal'\n\nconst ALLOWED_FOOTER_ORIENTATIONS = ['vertical', 'horizontal'] as const\n\n@customElement('web-ui-dialog')\nexport class WebUiDialog extends LitElement {\n static override styles = [unsafeCSS(glass), unsafeCSS(modalSurface), unsafeCSS(scrollbarStyle), unsafeCSS(style)]\n\n @property({ type: Boolean, reflect: true }) open = false\n @property({ type: Boolean, reflect: true }) closable = false\n\n /** footer 操作区的排列方向。默认纵向；横向时由子控件自己的布局能力决定宽度。 /\n @property({ type: String, reflect: true, attribute: 'footer-orientation' })\n get footerOrientation(): DialogFooterOrientation {\n return this._footerOrientation\n }\n set footerOrientation(value: string) {\n const previous = this._footerOrientation\n this._footerOrientation = normalizeLiteral(value, ALLOWED_FOOTER_ORIENTATIONS, 'vertical')\n this.requestUpdate('footerOrientation', previous)\n }\n private _footerOrientation: DialogFooterOrientation = 'vertical'\n\n @property({ type: Boolean, reflect: true, attribute: 'no-scroll-lock' }) noScrollLock = false\n @property({ type: Boolean, reflect: true, attribute: 'no-backdrop-close' }) noBackdropClose = false\n @property({ type: Boolean, reflect: true, attribute: 'no-escape-close' }) noEscapeClose = false\n\n /\n Controlled 模式下，Escape 和 backdrop 点击只派发 `open-change` 请求，\n * 不会自行修改 `open`。Consumer 回写 `open` 后才执行关闭动画。\n * 程序化 API（showModal/close/直接赋值 open）不受此模式影响，始终直通。\n /\n @property({ type: Boolean, reflect: true }) controlled = false\n\n /\n `header` 槽为空时的标题文案。槽优先：一旦有元素分配到 `header`，槽内容整条接管，\n * 属性被忽略。默认空串且槽也为空时不渲染 chrome 带。`headless` 模式不渲染 chrome 带，\n * `heading` 一并失效。\n /\n @property({ type: String }) heading = ''\n\n /\n Headless 模式：只保留 overlay 基础设施（backdrop、动画、scroll lock、`<dialog>` 语义），\n * 移除内置 UI（chrome 带、正文区、footer），默认槽的内容渲染进卡片内的滚动层\n * `.wui-dialog-content`，视觉交给 Consumer。形态与 `<web-ui-drawer>` 的 `headless` 一致。\n \n 该模式没有可自动关联的内置标题，内部原生 dialog 的 accessible name 必须由 Consumer\n * 用 `aria-dialog-label`（或自绘标题 + 自己的 `aria-labelledby`）提供。\n /\n @property({ type: Boolean, reflect: true }) headless = false\n\n /\n 内部原生 dialog 的 accessible name。`headless` 模式必须由 Consumer 提供，\n * 因为该模式不会渲染可自动关联的内置 chrome 带。\n /\n @property({ type: String, attribute: 'aria-dialog-label' }) ariaDialogLabel = ''\n\n /\n * `dialog-label` 自 11.1.0 发布，为已上线消费方保留兼容别名：attribute 仍可写，\n * 内部转发到 ariaDialogLabel。canonical 名是 aria-dialog-label；两个 attribute 同时\n * 设置时后处理者生效，文档不推荐这样做。下个 major 移除本别名。\n /\n /* @deprecated 用 `aria-dialog-label`。 /\n @property({ type: String, attribute: 'dialog-label' })\n get dialogLabel(): string {\n return this.ariaDialogLabel\n }\n set dialogLabel(value: string) {\n this.ariaDialogLabel = value\n }\n\n /* 关闭按钮的无障碍名称；未设置时回退内置英文文案（见 ADR-0016）。 /\n @property({ type: String, attribute: 'aria-close-label' }) ariaCloseLabel = ''\n\n @state() private _hasHeader = false\n private readonly _userOpenChange = new UserChangeController()\n\n /\n * 开启态 overlay（issue #120 Block 1）。Escape 不走原生 cancel 事件：仲裁者\n * 会在 keydown 上 preventDefault 压掉原生关闭请求并 stopPropagation，因此这里必须\n * 自己表达关闭语义（controlled 只派发请求）。\n /\n private readonly _overlay = defineOpenOverlay().make({\n requestClose: () => this._closeFromUser(),\n isConnected: () => this.isConnected\n })\n /* 当前开启会话的 handle；未开启时为 null。查询与惰性同步走它。 /\n private _handle: OpenOverlayHandle \| null = null\n private readonly _scrollLock = defineScrollLockLease().make()\n private readonly _presence = defineNativeDialogPresence().make({\n getDialog: () => this.dialog,\n isConnected: () => this.isConnected,\n isOpen: () => this.open\n })\n\n private get dialog() {\n return this.shadowRoot?.querySelector('dialog') ?? null\n }\n\n protected override updated(props: PropertyValues) {\n super.updated(props)\n if (!this.isConnected) return\n\n if (props.has('open')) {\n if (this._userOpenChange.consume()) this.emitOpenChange()\n this._presence.sync(this.open)\n if (this.open) {\n // presence.sync 内的 showModal() 把 dialog 提升进 top layer。双击手势本身\n // 留下的活选区会被浏览器拿去和提升后的新布局重新解析，结果选区落到刚挂载的\n // dialog 正文上。脆弱的是「手势来源的活选区」，不是 dblclick 的判定窗口：把\n // 打开推迟 250ms（早过双击判定）仍然复现。选区由浏览器在 showModal() 调用\n // 内部生成：脚本没有任何 Selection API 调用，在 dblclick 上 preventDefault\n // 也拦不住。\n //\n // 实测（Chromium）showModal() 不会动打开前已经存在的选区，所以这一次清理\n // 同时也覆盖「先选中页面文本、再打开」的情况——modal 打开后被选中的内容挡在\n // backdrop 后面本来也已不可用。这里只清文档选区，不动 user-select，overlay 内正文\n // 仍可正常拖选。\n window.getSelection()?.removeAllRanges()\n }\n // 原生 dialog 登记为开启态 overlay：挂在它上面的 portal panel 成为本层后代，\n // Escape 仲裁据此判出最内层（issue #120 Block 1）。\n const dialog = this.dialog\n if (dialog) {\n if (this.open) {\n // 同一 panel 重新 claim = 新的一次开启：旧会话（含其子层）整体作废。\n this._handle?.release()\n this._handle = this._overlay.claim(dialog, { ancestryFrom: this })\n } else {\n this._handle?.release()\n this._handle = null\n }\n }\n }\n if (props.has('open') \|\| props.has('noScrollLock')) this._syncScrollLock()\n this._syncOverlayInert()\n }\n\n override connectedCallback() {\n super.connectedCallback()\n // 重挂载对账：断连时 presence、滚动锁与登记都已被撤销，而 `open` 未变化时\n // `updated()` 不会补跑任何 sync 分支。首次连接时 shadow 尚未渲染、`this.dialog`\n // 为 null，三种情况都直接跳过；打开态的首次进入仍由 updated() 的\n // `props.has('open')` 分支处理。\n this._presence.reconcile()\n this._syncScrollLock()\n this._reclaimIfOpen()\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback()\n this._presence.dispose()\n this._scrollLock.release()\n // 断连即撤销登记：层不留在全局注册表里，重连后由 _reclaimIfOpen 显式重新声明。\n this._handle?.release()\n this._handle = null\n }\n\n /\n * 「重挂载恢复」的调用方一半：模块刻意不观察 DOM 连接状态，所以断连撤销登记之后，\n * 重连时仍有开启态就必须由组件重新声明。\n /\n private _reclaimIfOpen() {\n if (!this.open \|\| this._handle) return\n const dialog = this.dialog\n if (!dialog) return\n this._handle = this._overlay.claim(dialog, { ancestryFrom: this })\n this._syncOverlayInert()\n }\n\n /\n * `no-escape-close` 时 dialog 仍是候选（Escape 被吞掉、原生 cancel 被压掉），只是\n * 不走关闭入口：若改成跳过候选，事件会落到下层 overlay，把外层一起关掉。该属性可在开启\n * 期间改写，所以每次渲染后读它，而不是在 claim 时固定。\n /\n private _syncOverlayInert() {\n this._handle?.setInert(this.noEscapeClose)\n }\n\n showModal() {\n if (this.open) return\n this.open = true\n }\n\n close() {\n this.open = false\n }\n\n /\n * 仲裁者在 capture 阶段 preventDefault 了 Escape 的 keydown，UA 因此不再派发原生\n * cancel，但本 handler 仍有两个仲裁者不负责的职责，不可删：\n * ① 任何到达 dialog 的 cancel 都要 preventDefault，把 top layer 保留到视觉退场结束\n * （否则原生关闭会跳过退出动画）；\n * ② 忽略子控件（例如 file input）冒泡上来的 cancel。\n * 实测（overlay-open-owner-260918，2026-09-18）摘掉 `@cancel` 后 dialog.browser.spec.ts\n * 的「no-escape-close 存在时 Escape/cancel 不关闭 dialog」与 remount-reconcile 的\n * 「打开态被移出文档再接回」两例立刻转红，断言正是 `dispatchEvent(cancel) === false`。\n /\n private handleCancel(e: Event) {\n if (e.target !== e.currentTarget) return\n\n e.preventDefault()\n if (this.noEscapeClose) return\n this._closeFromUser()\n }\n\n private handleBackdropClick(e: MouseEvent) {\n if (e.target !== (e.currentTarget as HTMLDialogElement)) return\n if (this.noBackdropClose) return\n this._closeFromUser()\n }\n\n private handleKeydown(e: KeyboardEvent) {\n if (e.key !== 'Tab') return\n // 嵌套 drawer 的 Tab 沿 slot 宿主链冒泡到这里；边界回卷由最内层负责。\n const path = e.composedPath()\n const ownIndex = path.indexOf(e.currentTarget as Node)\n if (ownIndex > 0 && path.slice(0, ownIndex).some(node => node instanceof HTMLDialogElement)) return\n const dialog = this.dialog\n if (dialog) trapTabKey(e, dialog)\n }\n\n /* 用户发起的关闭入口（Escape、backdrop 点击、关闭 button）共用一条路径。 /\n private readonly _closeFromUser = () => {\n if (this.controlled) {\n this.emitOpenChange(false)\n return\n }\n this._userOpenChange.mark()\n this.close()\n }\n\n // controlled 下派发关闭请求：detail 固定 false（用户只能请求关闭，打开永远由 Consumer 写）。\n private emitOpenChange(open = this.open) {\n dispatchOpenChangeEvent(this, open)\n }\n\n private _onTransitionEnd = (event: TransitionEvent) => {\n this._presence.handleTransitionEnd(event)\n }\n\n private _onNativeClose = () => {\n // 关闭态下的 close 事件只可能是我们自己 finishClosing 排队的异步事件（或冗余的\n // 外部关闭）：交给 presence 消费 self-close 标志，避免标志泄漏到下一次真实关闭。\n if (!this.open) {\n this._presence.handleNativeClose()\n return\n }\n\n // 我们自己 dialog.close() 排队的 close 事件是异步任务：正常时序在本关闭会话内\n // 到达，快速「关闭→重开」时它在重新打开之后才到达（过期事件）。两种情况都已\n // 完成清理，由 presence 消费并返回 true，不能当成外部关闭把刚重开的 dialog 关掉。\n if (this._presence.handleNativeClose()) return\n\n // controlled 下原生关闭（如表单 method=\"dialog\"）视为未经 Consumer 批准的状态丢失：\n // 恢复受控状态并派发关闭请求，由 Consumer 决定是否关闭。\n if (this.controlled) {\n this._presence.sync(true)\n this.emitOpenChange(false)\n return\n }\n\n this._userOpenChange.mark()\n this.open = false\n }\n\n private _syncScrollLock(isOpen = this.open) {\n this._scrollLock.sync(isOpen && !this.noScrollLock)\n }\n\n /\n 只在「有/无」翻转时写 state：slotchange 在每次分配变化时都会触发，逐次赋值会让\n * Lit 无谓重渲染。`heading` 与槽共同决定 chrome 带的存在，见 `_showHeader`。\n /\n private _onHeaderSlotChange(e: Event) {\n if (!(e.target instanceof HTMLSlotElement)) return\n const has = e.target.assignedElements().length > 0\n if (has !== this._hasHeader) this._hasHeader = has\n }\n\n private get _showHeader(): boolean {\n return this._hasHeader \|\| this.heading !== ''\n }\n\n /\n 默认模式与 `headless` 模式共用同一枚关闭 button：都绝对定位到卡片右上角，偏移由\n * `--wui-dialog-close-top` / `--wui-dialog-close-right` 控制（见 style.css）。\n * 它在两种模式下都是卡片的直接子元素，定位参照是卡片本身（.wui-dialog-body）。\n /\n private _renderCloseButton() {\n return html`\n <web-ui-button\n class=\"wui-dialog-close\"\n @click=${this._closeFromUser}\n aria-label=${resolveBuiltinLabel('close', this.ariaCloseLabel)}\n variant=\"secondary\"\n icon\n size=\"26\"\n >\n <web-ui-icon size=\"14\" .icon=${oouiClose}></web-ui-icon>\n </web-ui-button>\n `\n }\n\n override render() {\n const showHeader = this._showHeader\n /\n * accessible name：显式 `aria-dialog-label` 优先；否则（非 headless 且带可见时）把原生 dialog\n * 的 `aria-labelledby` 指向 chrome 带——与 drawer 同形。headless 模式没有可自动关联的\n * 内置标题，名字留给 Consumer。\n */\n const dialogLabel = this.ariaDialogLabel.trim()\n const dialogLabelledBy = !dialogLabel && !this.headless && showHeader ? 'wui-dialog-heading' : nothing\n\n return html`\n <dialog\n aria-label=${dialogLabel \|\| nothing}\n aria-labelledby=${dialogLabelledBy}\n @cancel=${this.handleCancel}\n @close=${this._onNativeClose}\n @click=${this.handleBackdropClick}\n @keydown=${this.handleKeydown}\n @transitionend=${this._onTransitionEnd}\n >\n <div class=\"wui-dialog-body wui-glass\">\n ${\n this.headless\n ? html`\n <div class=\"wui-dialog-content wui-scroll\">\n <slot></slot>\n </div>\n ${this.closable ? this._renderCloseButton() : nothing}\n `\n : html`\n <div class=\"header\" id=\"wui-dialog-heading\" ?hidden=${!showHeader}>\n <slot name=\"header\" @slotchange=${this._onHeaderSlotChange}>\n ${this.heading ? html`<span class=\"wui-dialog-heading\">${this.heading}</span>` : nothing}\n </slot>\n </div>\n <div class=\"desc wui-scroll\"><slot></slot></div>\n <div class=\"wui-dialog-footer\"><slot name=\"footer\"></slot></div>\n ${this.closable ? this._renderCloseButton() : nothing}\n `\n }\n </div>\n </dialog>\n `\n }\n\n declare readonly $events: {\n 'open-change': CustomEvent<{ open: boolean }>\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'web-ui-dialog': WebUiDialog\n }\n}\n"],"mappings":"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"}

package/dist/components/dialog/style.js CHANGED Viewed

@@ -1,5 +1,5 @@
 // src/components/dialog/style.css?inline
-var style_default = "*,:before,:after{box-sizing:border-box}:host{display:contents}dialog{transform:scale(var(--wui-dialog-scale-enter,1.1));box-sizing:border-box;width:min(90vw, var(--wui-dialog-width,360px));max-height:100vh;color:var(--wui-color-text,#1b1b1b);transition:transform var(--wui-duration-dialog-enter,.32s) var(--wui-ease-dialog,cubic-bezier(.2, 0, 0, 1));background:0 0;border:none;padding:0;font-family:inherit;position:fixed;overflow:visible}dialog::backdrop{opacity:0;background:var(--wui-dialog-overlay-bg,var(--wui-color-backdrop,#0000001f));transition:opacity var(--wui-duration-dialog-enter,.32s) var(--wui-ease-dialog,cubic-bezier(.2, 0, 0, 1))}@supports (height:100dvh){dialog{max-height:100dvh}}dialog[open]:has(.desc){flex-direction:column;display:flex}dialog[open].is-visible{transform:scale(1)}dialog[open].is-closing{pointer-events:none;transition-duration:var(--wui-duration-dialog-exit,.26s)}dialog.is-closing::backdrop{transition-duration:var(--wui-duration-dialog-exit,.26s)}dialog[open].is-visible::backdrop{opacity:1}@media (prefers-reduced-motion:reduce){dialog,dialog[open].is-visible{transition-duration:var(--wui-duration-feedback,.1s);transform:none}}.wui-dialog-body{--wui-internal-dialog-close-top:var(--wui-dialog-close-top,20px);--wui-internal-dialog-close-right:var(--wui-dialog-close-right,20px);--wui-internal-glass-shadow:var(--wui-shadow-overlay,2px 16px 40px #0006);--wui-glass-corner-radius:var(--wui-radius-overlay,28px);padding:var(--wui-dialog-padding,var(--wui-space-5,20px) var(--wui-space-6,24px) var(--wui-space-6,24px));border-radius:var(--wui-radius-overlay,28px);opacity:0;background-color:var(--wui-dialog-bg,var(--wui-color-surface-overlay,#f8f8f8eb));-webkit-backdrop-filter:blur(0) saturate(var(--wui-glass-saturation,160%)) brightness(var(--wui-glass-brightness,1.06));backdrop-filter:blur(0) saturate(var(--wui-glass-saturation,160%)) brightness(var(--wui-glass-brightness,1.06));transition:opacity var(--wui-duration-dialog-enter,.32s) var(--wui-ease-dialog,cubic-bezier(.2, 0, 0, 1)), -webkit-backdrop-filter var(--wui-duration-dialog-enter,.32s) var(--wui-ease-dialog,cubic-bezier(.2, 0, 0, 1)), backdrop-filter var(--wui-duration-dialog-enter,.32s) var(--wui-ease-dialog,cubic-bezier(.2, 0, 0, 1));padding-inline:0}.wui-dialog-body:has(.desc){grid-template-rows:auto minmax(0,1fr) auto;min-height:0;display:grid}.wui-dialog-body:has(>.wui-dialog-content){grid-template-rows:minmax(0,1fr);max-height:100vh;padding:0;display:grid;overflow:hidden}@supports (height:100dvh){.wui-dialog-body:has(>.wui-dialog-content){max-height:100dvh}}.wui-dialog-content{min-height:0;padding:var(--wui-dialog-padding,var(--wui-space-5,20px) var(--wui-space-6,24px) var(--wui-space-6,24px));overflow-y:auto}dialog.is-closing .wui-dialog-body{transition-duration:var(--wui-duration-dialog-exit,.26s)}:host([closable]) .wui-dialog-body{position:relative}dialog[open].is-visible .wui-dialog-body{opacity:1;-webkit-backdrop-filter:blur(var(--wui-glass-blur,4px)) saturate(var(--wui-glass-saturation,160%)) brightness(var(--wui-glass-brightness,1.06));backdrop-filter:blur(var(--wui-glass-blur,4px)) saturate(var(--wui-glass-saturation,160%)) brightness(var(--wui-glass-brightness,1.06))}.wui-dialog-close{z-index:3;top:var(--wui-internal-dialog-close-top);right:var(--wui-internal-dialog-close-right);position:absolute}.header{gap:var(--wui-space-3,12px);margin:0 0 var(--wui-dialog-title-gap,var(--wui-space-4,16px));padding-inline:var(--wui-dialog-inline-padding,var(--wui-space-6,24px));font-size:var(--wui-font-size-title,18px);font-weight:var(--wui-font-weight-semibold,600);line-height:var(--wui-line-height-tight,1.2);color:var(--wui-color-text,#1b1b1b);justify-content:space-between;align-items:center;display:flex}.header[hidden]{display:none}@media (prefers-reduced-motion:reduce){dialog.is-closing .wui-dialog-body,dialog[open].is-visible .wui-dialog-body{transition-duration:var(--wui-duration-feedback,.1s)}}:host([closable]) .header{padding-inline-end:calc(var(--wui-internal-dialog-close-right) + 26px + var(--wui-space-3,12px))}.desc{min-height:0;max-height:calc(var(--wui-dialog-max-height,90vh) + var(--wui-dialog-desc-focus-padding,6px) * 2);margin-top:calc(-1 * var(--wui-dialog-desc-focus-padding,6px));margin-bottom:max(0px, calc(var(--wui-dialog-desc-gap,var(--wui-space-6,24px)) - var(--wui-dialog-desc-focus-padding,6px)));padding-block:var(--wui-dialog-desc-focus-padding,6px);padding-inline:var(--wui-dialog-inline-padding,var(--wui-space-6,24px));font-size:var(--wui-font-size,14px);line-height:var(--wui-line-height-normal,1.5);color:var(--wui-color-text,#1b1b1b);margin-inline:0;overflow:clip auto}@supports (height:100dvh){.desc{max-height:calc(var(--wui-dialog-max-height,min(90vh, 90dvh)) + var(--wui-dialog-desc-focus-padding,6px) * 2)}}.wui-dialog-footer{gap:var(--wui-dialog-footer-gap,10px);justify-content:var(--wui-dialog-footer-justify,flex-end);padding-inline:var(--wui-dialog-inline-padding,var(--wui-space-6,24px));flex-direction:column;display:flex}.wui-dialog-footer ::slotted(web-ui-button){width:100%;display:flex}:host([horizontal]) .wui-dialog-footer{gap:var(--wui-space-3,12px);justify-content:var(--wui-dialog-footer-justify,center);flex-direction:row}:host([horizontal]) .wui-dialog-footer ::slotted(web-ui-button:not([full])){width:auto}:host([horizontal]) .wui-dialog-footer ::slotted(web-ui-button[full]){flex:1;min-width:0}\n";
+var style_default = "*,:before,:after{box-sizing:border-box}:host{display:contents}dialog{transform:scale(var(--wui-dialog-scale-enter,1.1));box-sizing:border-box;width:min(90vw, var(--wui-dialog-width,360px));max-height:100vh;color:var(--wui-color-text,#1b1b1b);transition:transform var(--wui-duration-dialog-enter,.32s) var(--wui-ease-dialog,cubic-bezier(.2, 0, 0, 1));background:0 0;border:none;padding:0;font-family:inherit;position:fixed;overflow:visible}dialog::backdrop{opacity:0;background:var(--wui-dialog-overlay-bg,var(--wui-color-backdrop,#0000001f));transition:opacity var(--wui-duration-dialog-enter,.32s) var(--wui-ease-dialog,cubic-bezier(.2, 0, 0, 1))}@supports (height:100dvh){dialog{max-height:100dvh}}dialog[open]:has(.desc){flex-direction:column;display:flex}dialog[open].is-visible{transform:scale(1)}dialog[open].is-closing{pointer-events:none;transition-duration:var(--wui-duration-dialog-exit,.26s)}dialog.is-closing::backdrop{transition-duration:var(--wui-duration-dialog-exit,.26s)}dialog[open].is-visible::backdrop{opacity:1}@media (prefers-reduced-motion:reduce){dialog,dialog[open].is-visible{transition-duration:var(--wui-duration-feedback,.1s);transform:none}}.wui-dialog-body{--wui-internal-dialog-close-top:var(--wui-dialog-close-top,20px);--wui-internal-dialog-close-right:var(--wui-dialog-close-right,20px);--wui-internal-glass-shadow:var(--wui-shadow-overlay,2px 16px 40px #0006);--wui-glass-corner-radius:var(--wui-radius-overlay,28px);padding:var(--wui-dialog-padding,var(--wui-space-5,20px) var(--wui-space-6,24px) var(--wui-space-6,24px));border-radius:var(--wui-radius-overlay,28px);opacity:0;background-color:var(--wui-dialog-bg,var(--wui-color-surface-overlay,#f8f8f8eb));-webkit-backdrop-filter:blur(0) saturate(var(--wui-glass-saturation,160%)) brightness(var(--wui-glass-brightness,1.06));backdrop-filter:blur(0) saturate(var(--wui-glass-saturation,160%)) brightness(var(--wui-glass-brightness,1.06));transition:opacity var(--wui-duration-dialog-enter,.32s) var(--wui-ease-dialog,cubic-bezier(.2, 0, 0, 1)), -webkit-backdrop-filter var(--wui-duration-dialog-enter,.32s) var(--wui-ease-dialog,cubic-bezier(.2, 0, 0, 1)), backdrop-filter var(--wui-duration-dialog-enter,.32s) var(--wui-ease-dialog,cubic-bezier(.2, 0, 0, 1));padding-inline:0}.wui-dialog-body:has(.desc){grid-template-rows:auto minmax(0,1fr) auto;min-height:0;display:grid}.wui-dialog-body:has(>.wui-dialog-content){grid-template-rows:minmax(0,1fr);max-height:100vh;padding:0;display:grid;overflow:hidden}@supports (height:100dvh){.wui-dialog-body:has(>.wui-dialog-content){max-height:100dvh}}.wui-dialog-content{min-height:0;padding:var(--wui-dialog-padding,var(--wui-space-5,20px) var(--wui-space-6,24px) var(--wui-space-6,24px));overflow-y:auto}dialog.is-closing .wui-dialog-body{transition-duration:var(--wui-duration-dialog-exit,.26s)}:host([closable]) .wui-dialog-body{position:relative}dialog[open].is-visible .wui-dialog-body{opacity:1;-webkit-backdrop-filter:blur(var(--wui-glass-blur,4px)) saturate(var(--wui-glass-saturation,160%)) brightness(var(--wui-glass-brightness,1.06));backdrop-filter:blur(var(--wui-glass-blur,4px)) saturate(var(--wui-glass-saturation,160%)) brightness(var(--wui-glass-brightness,1.06))}.wui-dialog-close{z-index:3;top:var(--wui-internal-dialog-close-top);right:var(--wui-internal-dialog-close-right);position:absolute}.header{gap:var(--wui-space-3,12px);margin:0 0 var(--wui-dialog-title-gap,var(--wui-space-4,16px));padding-inline:var(--wui-dialog-inline-padding,var(--wui-space-6,24px));font-size:var(--wui-font-size-title,18px);font-weight:var(--wui-font-weight-semibold,600);line-height:var(--wui-line-height-tight,1.2);color:var(--wui-color-text,#1b1b1b);justify-content:space-between;align-items:center;display:flex}.header[hidden]{display:none}@media (prefers-reduced-motion:reduce){dialog.is-closing .wui-dialog-body,dialog[open].is-visible .wui-dialog-body{transition-duration:var(--wui-duration-feedback,.1s)}}:host([closable]) .header{padding-inline-end:calc(var(--wui-internal-dialog-close-right) + 26px + var(--wui-space-3,12px))}.desc{min-height:0;max-height:calc(var(--wui-dialog-max-height,90vh) + var(--wui-dialog-desc-focus-padding,6px) * 2);margin-top:calc(-1 * var(--wui-dialog-desc-focus-padding,6px));margin-bottom:max(0px, calc(var(--wui-dialog-desc-gap,var(--wui-space-6,24px)) - var(--wui-dialog-desc-focus-padding,6px)));padding-block:var(--wui-dialog-desc-focus-padding,6px);padding-inline:var(--wui-dialog-inline-padding,var(--wui-space-6,24px));font-size:var(--wui-font-size,14px);line-height:var(--wui-line-height-normal,1.5);color:var(--wui-color-text,#1b1b1b);margin-inline:0;overflow:clip auto}@supports (height:100dvh){.desc{max-height:calc(var(--wui-dialog-max-height,min(90vh, 90dvh)) + var(--wui-dialog-desc-focus-padding,6px) * 2)}}.wui-dialog-footer{gap:var(--wui-dialog-footer-gap,10px);align-items:stretch;justify-content:var(--wui-dialog-footer-justify,flex-end);padding-inline:var(--wui-dialog-inline-padding,var(--wui-space-6,24px));flex-direction:column;display:flex}:host([footer-orientation=horizontal]) .wui-dialog-footer{gap:var(--wui-space-3,12px);align-items:center;justify-content:var(--wui-dialog-footer-justify,center);flex-direction:row}\n";
 export { style_default as default };
 //# sourceMappingURL=style.js.map

package/dist/components/dialog/style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"style.js","names":[],"sources":["../../../src/components/dialog/style.css?inline"],"sourcesContent":[",\n::before,\n::after {\n box-sizing: border-box;\n}\n\n:host {\n display: contents;\n}\n\ndialog {\n / 必须显式 position: fixed：UA 的 dialog:modal 默认就是 fixed，但作者样式若出现\n position: relative 会把它覆盖到文档流——top layer 里的 modal dialog 变成按文档流\n 定位：渲染在页面顶部（用户看到的“残影”）且跟随页面滚动（“没有固定居中”）。\n 显式写死 fixed 防御未来任何作者类再覆盖。 /\n position: fixed;\n\n / 本元素不参与 opacity 过渡：opacity < 1 会让 dialog 成为 backdrop root，后代\n backdrop-filter 在该过渡期间被整体禁用。玻璃卡片（.wui-dialog-body）自身\n opacity + backdrop-filter 插值过渡（own opacity 不禁用自身 blur，见下）。 /\n\n / 进场由大到小收缩（1.1 → 1），退场反向。取消 .is-visible 后回落到本条起点值，\n enter/exit 共用同一 token。方向与浮动 panel 的 --wui-scale-enter 相反，故单独成 token。 /\n transform: scale(var(--wui-dialog-scale-enter, 1.1));\n\n overflow: visible;\n\n box-sizing: border-box;\n width: min(90vw, var(--wui-dialog-width, 360px));\n\n / 整卡兜底：防卡片高过视口。真正的内容区上限在 .desc（见下），这里只接住\n 「视口本身很矮、chrome + 内容区上限也放不下」的情况。字面量而非 token，\n 免得与 .desc 抢同一个数值——共用时外层必然先触发（它是整卡约束），\n .desc 的 max-height 就成了永远轮不到的死约束。dvh 增强见文件末尾。 /\n max-height: 100vh;\n padding: 0;\n border: none;\n\n font-family: inherit;\n color: var(--wui-color-text, #1b1b1b);\n\n background: transparent;\n\n transition: transform var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1));\n\n &::backdrop {\n opacity: 0;\n background: var(--wui-dialog-overlay-bg, var(--wui-color-backdrop, rgb(0 0 0 / 0.12)));\n\n / 与卡片共用同一条 dialog 缓动：用内置 ease 会让 backdrop 在卡片落位后才走完大半透明度。 /\n transition: opacity var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1));\n }\n}\n\n/ 动态视口高度兜底：移动端工具栏收放时不让 dialog 超出可见区域。\n 放在 @supports 内而非与上一条并列，是因为 var() 的回退值要到计算值阶段才替换；\n 不支持 dvh 的引擎会在该阶段拿到非法值，使整条声明变成 invalid-at-computed-value-time\n 而丢失 max-height。并列两条普通声明则由解析期丢弃，行为不同。dialog 这条是字面量，\n 并列也不会丢，但统一放在 @supports 内，免得两条规则看起来像两种不同的兜底策略。\n\n `.desc` 的 dvh 增强不在这里：它必须排在文件后面那条 `.desc` 规则之后才生效，\n 同特异度下靠后者胜。放在这里会被后面那条的 `90vh` 回退静默覆盖。 /\n@supports (height: 100dvh) {\n dialog {\n max-height: 100dvh;\n }\n}\n\n/ ===== 高度约束下移到内容区（chrome 由内容撑开） =====\n\n 宿主不应复述一个会变的 chrome 高度：chrome 里的 footer 一项就是 --wui-control-size——\n 触摸端 `@media (pointer: coarse)` 把它从 36px 抬到 40px，chrome 随之长高，宿主写死的\n 常数立刻腐坏。\n\n header / footer 完全由内容撑开，上限只落在 .desc：内容超高时滚动发生在内容区内部，\n 而不是把卡片顶出 dialog 盒子。宿主不必为「让它滚」而算。\n\n 但「宿主不需要知道 chrome 多高」并不成立，这样写会误导后人。--wui-dialog-max-height\n 的语义是内容区上限：宿主若要给整卡定上限，仍然得自己量出 chrome 再从 token 里减掉\n （AddDialog / RestoreDialog 减 142，SettingsDialog 减 106，三处不能互相照抄）。把整卡\n 上限原样写进 token，卡片会比预期高出一个 chrome。\n\n 实测（Chromium + WebKit，见 __tests__/dialog-content-height.browser.spec.ts）：本组 CSS\n 只对默认模式生效——headless 模式（默认槽渲染进 .wui-dialog-content、没有 .desc）的卡片尺寸不变。\n 但位置不保证：`dialog` 的整卡兜底是字面量 100vh，modal dialog\n 按自身盒子在视口里居中、卡片从盒子顶部起画，盒子更高 → 卡片在视口内上移。内容接近视口\n 高度时位移可观测（reviewer 实测 52px / 102px / 25.16px），只有内容远矮于视口时位移为 0\n （两个 demo 正是落在这一档，巧合而非保证）。 /\n\n/ dialog 不是 flex 容器时 .desc 的 height:100% 拿不到确定高度（:host 是 display:contents，\n dialog 自身默认 block），宿主的内层 grid 因此撑不满、两栏不等高。模式判定按 DOM 形状\n 而不是 attribute，理由见下方 grid 规则上的注释。 /\n\n/ 只在打开态覆盖原生 dialog 的 display，关闭后保留 UA 的 display:none。 /\ndialog[open]:has(.desc) {\n display: flex;\n flex-direction: column;\n}\n\n/ 模态表面的焦点环抑制（<dialog> 壳 + panel 滚动区）集中在 assets/modal-surface.css，见组件 index.ts 的 static styles。 /\n\ndialog[open].is-visible {\n transform: scale(1);\n}\n\ndialog[open].is-closing {\n pointer-events: none;\n transition-duration: var(--wui-duration-dialog-exit, 260ms);\n}\n\ndialog.is-closing::backdrop {\n transition-duration: var(--wui-duration-dialog-exit, 260ms);\n}\n\ndialog[open].is-visible::backdrop {\n opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n dialog,\n dialog[open].is-visible {\n transform: none;\n transition-duration: var(--wui-duration-feedback, 100ms);\n }\n}\n\n/ ===== 玻璃卡片主体（样式由 glass.css 提供） ===== /\n\n/ 单层玻璃：卡片自身承担背景/阴影/backdrop-filter。blur(0px) ↔ blur(4px) 平滑插值\n （none↔blur 不可插值，直接切换会跳变），own opacity 过渡不禁用自身 blur，\n 因此卡片直接 opacity + backdrop-filter 同步过渡即可，无需双层。 /\n.wui-dialog-body {\n --wui-internal-dialog-close-top: var(--wui-dialog-close-top, 20px);\n --wui-internal-dialog-close-right: var(--wui-dialog-close-right, 20px);\n --wui-internal-glass-shadow: var(--wui-shadow-overlay, 2px 16px 40px rgb(0 0 0 / 0.4));\n --wui-glass-corner-radius: var(--wui-radius-overlay, 28px);\n\n / 卡片只吃 --wui-dialog-padding 的 block 分量；inline 分量让给各分区\n （.header / .desc / .wui-dialog-footer，由 --wui-dialog-inline-padding 控制），\n .desc 这个滚动容器的边因此与卡片内沿重合，scrollbar 贴边（详见 .desc）。 /\n padding: var(--wui-dialog-padding, var(--wui-space-5, 20px) var(--wui-space-6, 24px) var(--wui-space-6, 24px));\n padding-inline: 0;\n border-radius: var(--wui-radius-overlay, 28px);\n\n opacity: 0;\n background-color: var(--wui-dialog-bg, var(--wui-color-surface-overlay, rgb(248 248 248 / 0.92)));\n backdrop-filter: blur(0) saturate(var(--wui-glass-saturation, 160%)) brightness(var(--wui-glass-brightness, 1.06));\n\n / transition 列表需手写 -webkit-backdrop-filter：lightningcss 不会在 transition\n 的 value 内追加 -webkit 项，而 iOS 16.4 上 blur 过渡依赖它（属性前缀会自动生成）。 /\n transition:\n opacity var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1)),\n -webkit-backdrop-filter var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1)),\n backdrop-filter var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1));\n}\n\n/ 卡片改 grid 容器：header 与 footer 走 auto（内容撑开），.desc 走 minmax(0,1fr)。\n minmax 的 0 是 .desc 能收缩的前提；配合 .desc 的 min-height:0 与 overflow-y:auto，\n 内容超高时滚动发生在内容区内部，而不是把卡片顶出 dialog 盒子。\n\n 单列而非与基础 .wui-dialog-body 合并：`:has(.desc)` 与类选择器叠加的特异度高于单个类\n 选择器，合并会让「仅默认模式变 grid」变成「所有模式都变 grid」，那会改掉 headless\n 模式的几何（实测高内容 headless 的卡片会从 3044 被夹到 896）。位置也受 stylelint\n no-descending-specificity 约束：须排在基础规则之后、dialog.is-closing 之前。\n\n 模式判定按 DOM 形状（`:has(.desc)`）而不是 attribute（`:host(:not([headless]))`）：\n 外部直接 `setAttribute('headless', '')` 时 attribute 立刻翻转，Lit 要等下一次 update 才\n 换模板——那个窗口里 DOM 仍是默认形状。`:has(.desc)` 描述的就是当下的 DOM，与它自洽；\n `:host([headless])` 会按 attribute 提前把卡片按 headless 几何渲染，而 DOM 里还带着\n `.desc`。改成 drawer 那种 attribute 形式还要把承重规则上移（`dialog.is-closing\n .wui-dialog-body`；焦点环抑制那条已挪去 `assets/modal-surface.css`）来满足\n no-descending-specificity，收益不抵风险。 /\n.wui-dialog-body:has(.desc) {\n display: grid;\n grid-template-rows: auto minmax(0, 1fr) auto;\n\n / 这条 min-height: 0 是承重的（`.desc` 那条不是）：卡片是 `dialog` 这个 column flex\n 容器的 flex 项，`min-height: auto` 会把它垫到内容高度，视口的 100dvh 兜底就再也\n 夹不住。删掉后 token=5000px 时卡片实测 3154、dialog 896。 /\n min-height: 0;\n}\n\n/ ===== headless 模式：内容区是卡片内部的滚动层 =====\n\n headless 模式没有 header / .desc / footer，卡片就是那个滚动层，所以这里要同时守住两件事：\n 内容不高时卡片贴合内容（与基础规则一致），内容高过视口时把上限交给视口、把溢出交给\n 滚动。少了后半件，卡片会一路长到内容高度并溢出 dialog 盒子；dialog 是 overflow:\n visible（阴影与关闭 button 不能由同尺寸的原生 dialog 裁），溢出的那截落在视口之下，\n 既看不到也够不着。\n\n 上限取与整卡兜底相同的字面量，而不是 `--wui-dialog-max-height`：后者的公开语义是\n `.desc` 的高度（README 有记录），headless 模式根本没有 `.desc`，套上去会凭空改掉\n 这档的既有尺寸语义。\n\n 滚动单独成层而不是让卡片自己滚：关闭 button 是卡片的绝对定位直接子元素，卡片一旦自己\n 滚动，button 会跟着内容一起滚走。padding 也跟着挪进内层，让内容与滚动容器的裁剪边\n （padding 外沿）留出余量——贴边的控件焦点环才不会被裁成残条；内层没有 scrollbar 槽的\n 引擎里，这圈余量与卡片直接持 padding 时逐像素相同。\n\n headless 的收窄也取结构（`:has(> .wui-dialog-content)`）而不是 `:host([headless])`，与上方\n grid 规则同一条理由：判定跟 DOM 形状走。attribute 与 DOM 在直接 setAttribute 的那个\n 窗口里会短暂分叉，结构选择器始终与 DOM 自洽。 /\n.wui-dialog-body:has(> .wui-dialog-content) {\n overflow: hidden;\n display: grid;\n grid-template-rows: minmax(0, 1fr);\n\n max-height: 100vh;\n padding: 0;\n}\n\n@supports (height: 100dvh) {\n .wui-dialog-body:has(> .wui-dialog-content) {\n max-height: 100dvh;\n }\n}\n\n.wui-dialog-content {\n overflow-y: auto;\n min-height: 0;\n padding: var(--wui-dialog-padding, var(--wui-space-5, 20px) var(--wui-space-6, 24px) var(--wui-space-6, 24px));\n}\n\ndialog.is-closing .wui-dialog-body {\n transition-duration: var(--wui-duration-dialog-exit, 260ms);\n}\n\n:host([closable]) .wui-dialog-body {\n /\n * headless 模式的关闭 button 浮在卡片右上角，需要一个定位参照，所以显式重述一次\n * position: relative。\n \n 实际提供这个上下文的是卡片自带的 .wui-glass（glass.css 的 .wui-glass 已有\n * position: relative），所以这条声明目前是冗余的，写在这里是为了不依赖\n * glass.css 的内部实现——若哪天 glass 改成非定位元素，这条仍然兜得住。\n * 它不是 closable 建立的包含块边界：body 上的 wui-glass class 与\n * static styles 里的 glass 都不依赖 closable。\n /\n position: relative;\n}\n\ndialog[open].is-visible .wui-dialog-body {\n opacity: 1;\n backdrop-filter: blur(var(--wui-glass-blur, 4px)) saturate(var(--wui-glass-saturation, 160%))\n brightness(var(--wui-glass-brightness, 1.06));\n}\n\n/ ===== 关闭 button（绝对定位，两种内容模式同一套规则）=====\n\n 偏移由公开 token --wui-dialog-close-top / --wui-dialog-close-right 控制，默认都是字面量\n 20px。默认值不经过 --wui-space-：这两个 token 的参照系是卡片边缘，而不是相邻元素\n 之间的间距节奏，消费方调整主题间距时不应意外移动关闭 button。dialog 的关闭偏移是 20px，\n 与 drawer 的 16/16 不同；--wui-drawer-close- 保持不变。\n\n 两个公开 token 先在正文容器上解析成同一份内部变量，button 定位和标题避让都读这份结果，\n 避免只改一个兜底字面量后 button 与标题各自按不同默认值计算。\n\n 两种模式下它都是卡片的直接子元素：绝对定位的包含块是 .wui-dialog-body\n （:host([closable]) 给了它 position: relative），top/right 因此量到卡片 padding box\n 的右上角，与 chrome 带的 padding 无关。 /\n.wui-dialog-close {\n position: absolute;\n z-index: 3;\n top: var(--wui-internal-dialog-close-top);\n right: var(--wui-internal-dialog-close-right);\n}\n\n/\n * chrome 带：`header` 槽 + `heading` 属性 fallback，与 drawer 的 header 同形。\n * 卡片把 inline padding 让给各分区后（见 .wui-dialog-body），这条带自带水平 padding，\n * 否则内容会贴到卡片内沿。带里装的不一定是标题——消费方可以放整条工具条\n * （SettingsDialog 就是），所以用 flex / space-between 让多个子项排布；fallback 的\n * .wui-dialog-heading 与带共用 title 级排版，与 drawer 的 .wui-drawer-heading 对齐。\n * 带为空（槽无分配元素且 heading 为空）时隐藏，由 index.ts 的 _showHeader 决定。\n /\n.header {\n display: flex;\n gap: var(--wui-space-3, 12px);\n align-items: center;\n justify-content: space-between;\n\n margin: 0 0 var(--wui-dialog-title-gap, var(--wui-space-4, 16px));\n padding-inline: var(--wui-dialog-inline-padding, var(--wui-space-6, 24px));\n\n font-size: var(--wui-font-size-title, 18px);\n font-weight: var(--wui-font-weight-semibold, 600);\n line-height: var(--wui-line-height-tight, 1.2);\n color: var(--wui-color-text, #1b1b1b);\n}\n\n.header[hidden] {\n display: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n dialog.is-closing .wui-dialog-body,\n dialog[open].is-visible .wui-dialog-body {\n transition-duration: var(--wui-duration-feedback, 100ms);\n }\n}\n\n/ 标题避让：关闭 button 绝对定位、不占 chrome 带的位，长标题会一直排到 button 下面。\n 预留量取「button 右偏移 + button 宽 + 呼吸间距」，而不是只减掉带自身的 padding——这样即便\n 消费者把 --wui-dialog-inline-padding 调到 0，内容右缘也不会越过 button 左缘；跟随\n --wui-dialog-close-right 变化；这里复用正文容器上已解析的内部右侧偏移，与 button 定位同源。\n 26px 对应 index.ts 里 button 的 size=\"26\"，改 button 尺寸时一并改这里。\n 只在 closable 时生效：没有 button 就不必留白。 /\n:host([closable]) .header {\n padding-inline-end: calc(var(--wui-internal-dialog-close-right) + 26px + var(--wui-space-3, 12px));\n}\n\n.desc {\n / 横向显式 clip 而非留默认的 visible：一旦本轴成为滚动容器，另一轴的 visible 会被\n 计算成 auto，宿主内容横向溢出时就会多出一条不该出现的横向 scrollbar。\n Chromium / WebKit 实测：clip 与本规则下面的 auto 配对时计算值会降级成 hidden\n （仍可被脚本滚动）。Firefox ≥128 不做这个降级、保持 clip，但仓库的 browser-mode\n 项目只跑 chromium，这句未经本仓 CI 证实。两个引擎都不画横向 scrollbar，所以这里\n 只需要「不是 auto」；断言写成 not.toBe('auto') 而非 toBe('clip')，否则会在\n 降级的引擎上误报。 /\n overflow-x: clip;\n overflow-y: auto;\n\n / 承重的是上面那条 `overflow-y: auto`：按 CSS Sizing 3，溢出轴不为 visible 的\n grid 项其自动最小尺寸就是 0，`.desc` 无需再显式归零（实测删掉本条测试仍全绿，\n 改成 `auto auto auto` 也一样）。这里保留是防御性的：哪天 `overflow-y` 被改回\n visible，显式归零仍在，minmax(0,1fr) 才不会被顶破。 /\n min-height: 0;\n\n / 内容区上限 = token + ring 余量：token 语义是内容区高度，ring 不该从它里面扣。\n token 只挂在这里，不与 dialog 的 max-height 共用——共用时外层（整卡）必然先触发。 /\n max-height: calc(var(--wui-dialog-max-height, 90vh) + var(--wui-dialog-desc-focus-padding, 6px) 2);\n\n /* ===== focus-ring 余量（block 轴）=====\n\n .desc 既是滚动容器又是裁剪盒（clip），贴在内容区任一沿的控件，其 ring\n （offset 2 + width 3 = 5px）会被 padding box 裁掉；block 轴留 6px 余 1px，配一条\n 等量负 margin 把这 6px 从外部间距里扣回去——标题带→内容、内容→footer 的视觉间距\n 不受这 6px 影响。\n\n inline 轴不走 focus 余量：卡片的 inline padding 归零，由本容器的 padding-inline 取\n --wui-dialog-inline-padding 承担（见 .wui-dialog-body），\n 滚动口因此与卡片内沿重合（scrollbar 贴边，与 headless 模式 / drawer 一致）。24px 的 inline\n padding 远大于 5px ring，左右焦点环不会被裁；也无需配负 margin——content box 的\n 可用宽度与卡片自带 inline padding 时相同（同一档 inline padding），否则 AddDialog 那种两栏\n grid 的 drop zone 会换行（实测见 __tests__/dialog-content-height.browser.spec.ts 的\n 「全宽控件的 focus ring 不被内容区裁掉，且宿主拿到的可用宽度不被改窄」）。\n\n 取舍，是取舍不是疏漏：负 margin 让 `.desc` 的 border box 在 block 轴溢出滚动内容区，\n 所以底部那圈 ring 余量不随内容滚动——滚到最底时 footer 那一侧仍留得住 padding，而\n 内容末端到 `.desc` 下沿的 desc-gap 恒定，不跟着内容走。 /\n margin-top: calc(-1 var(--wui-dialog-desc-focus-padding, 6px));\n\n /* margin-bottom 是「desc-gap 减去那对 padding-block」，两个都是公开 token：宿主把\n desc-gap 调到 focus-padding 以下就会算出负 margin（24/8 安全，4/2/0 会算出\n -2/-4/-6）。max() 兜住下界 0——那条路径下内容末端与 footer 会贴在一起，但盒模型\n 与 grid 行分配不进负值区间。 /\n margin-bottom: max(\n 0px,\n calc(var(--wui-dialog-desc-gap, var(--wui-space-6, 24px)) - var(--wui-dialog-desc-focus-padding, 6px))\n );\n margin-inline: 0;\n padding-block: var(--wui-dialog-desc-focus-padding, 6px);\n padding-inline: var(--wui-dialog-inline-padding, var(--wui-space-6, 24px));\n\n font-size: var(--wui-font-size, 14px);\n line-height: var(--wui-line-height-normal, 1.5);\n color: var(--wui-color-text, #1b1b1b);\n}\n\n/ `--wui-dialog-max-height` 是公开 token（README 有记录），语义是内容区高度。\n 默认值与整卡兜底同族（90vh / dvh），未覆写时内容区上限就是 90vh / 90dvh 这一档：\n 移动端 90vh 可能大于 90dvh（vh 取大视口高），少了 min() 内容区会探到工具栏下面。\n\n 必须紧跟在 `.desc` 之后而非文件开头的 @supports 块里：两者特异度相同（0,1,0），\n 靠后者胜。实测把本条挪到前面后，`.desc` 的计算值会退回 90vh。 /\n@supports (height: 100dvh) {\n .desc {\n max-height: calc(var(--wui-dialog-max-height, min(90vh, 90dvh)) + var(--wui-dialog-desc-focus-padding, 6px) 2);\n }\n}\n\n.wui-dialog-footer {\n display: flex;\n flex-direction: column;\n gap: var(--wui-dialog-footer-gap, 10px);\n justify-content: var(--wui-dialog-footer-justify, flex-end);\n\n /* 卡片 inline padding 归零后由本区自带水平 padding，与 .header / .desc 同源。 */\n padding-inline: var(--wui-dialog-inline-padding, var(--wui-space-6, 24px));\n\n & ::slotted(web-ui-button) {\n display: flex;\n width: 100%;\n }\n}\n\n:host([horizontal]) .wui-dialog-footer {\n flex-direction: row;\n gap: var(--wui-space-3, 12px);\n justify-content: var(--wui-dialog-footer-justify, center);\n\n & ::slotted(web-ui-button:not([full])) {\n width: auto;\n }\n\n & ::slotted(web-ui-button[full]) {\n flex: 1;\n min-width: 0;\n }\n}\n"],"mappings":";AAAA,IAAA,gBAAA"}
1	+ {"version":3,"file":"style.js","names":[],"sources":["../../../src/components/dialog/style.css?inline"],"sourcesContent":[",\n::before,\n::after {\n box-sizing: border-box;\n}\n\n:host {\n display: contents;\n}\n\ndialog {\n / 必须显式 position: fixed：UA 的 dialog:modal 默认就是 fixed，但作者样式若出现\n position: relative 会把它覆盖到文档流——top layer 里的 modal dialog 变成按文档流\n 定位：渲染在页面顶部（用户看到的“残影”）且跟随页面滚动（“没有固定居中”）。\n 显式写死 fixed 防御未来任何作者类再覆盖。 /\n position: fixed;\n\n / 本元素不参与 opacity 过渡：opacity < 1 会让 dialog 成为 backdrop root，后代\n backdrop-filter 在该过渡期间被整体禁用。玻璃卡片（.wui-dialog-body）自身\n opacity + backdrop-filter 插值过渡（own opacity 不禁用自身 blur，见下）。 /\n\n / 进场由大到小收缩（1.1 → 1），退场反向。取消 .is-visible 后回落到本条起点值，\n enter/exit 共用同一 token。方向与浮动 panel 的 --wui-scale-enter 相反，故单独成 token。 /\n transform: scale(var(--wui-dialog-scale-enter, 1.1));\n\n overflow: visible;\n\n box-sizing: border-box;\n width: min(90vw, var(--wui-dialog-width, 360px));\n\n / 整卡兜底：防卡片高过视口。真正的内容区上限在 .desc（见下），这里只接住\n 「视口本身很矮、chrome + 内容区上限也放不下」的情况。字面量而非 token，\n 免得与 .desc 抢同一个数值——共用时外层必然先触发（它是整卡约束），\n .desc 的 max-height 就成了永远轮不到的死约束。dvh 增强见文件末尾。 /\n max-height: 100vh;\n padding: 0;\n border: none;\n\n font-family: inherit;\n color: var(--wui-color-text, #1b1b1b);\n\n background: transparent;\n\n transition: transform var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1));\n\n &::backdrop {\n opacity: 0;\n background: var(--wui-dialog-overlay-bg, var(--wui-color-backdrop, rgb(0 0 0 / 0.12)));\n\n / 与卡片共用同一条 dialog 缓动：用内置 ease 会让 backdrop 在卡片落位后才走完大半透明度。 /\n transition: opacity var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1));\n }\n}\n\n/ 动态视口高度兜底：移动端工具栏收放时不让 dialog 超出可见区域。\n 放在 @supports 内而非与上一条并列，是因为 var() 的回退值要到计算值阶段才替换；\n 不支持 dvh 的引擎会在该阶段拿到非法值，使整条声明变成 invalid-at-computed-value-time\n 而丢失 max-height。并列两条普通声明则由解析期丢弃，行为不同。dialog 这条是字面量，\n 并列也不会丢，但统一放在 @supports 内，免得两条规则看起来像两种不同的兜底策略。\n\n `.desc` 的 dvh 增强不在这里：它必须排在文件后面那条 `.desc` 规则之后才生效，\n 同特异度下靠后者胜。放在这里会被后面那条的 `90vh` 回退静默覆盖。 /\n@supports (height: 100dvh) {\n dialog {\n max-height: 100dvh;\n }\n}\n\n/ ===== 高度约束下移到内容区（chrome 由内容撑开） =====\n\n 宿主不应复述一个会变的 chrome 高度：chrome 里的 footer 一项就是 --wui-control-size——\n 触摸端 `@media (pointer: coarse)` 把它从 36px 抬到 40px，chrome 随之长高，宿主写死的\n 常数立刻腐坏。\n\n header / footer 完全由内容撑开，上限只落在 .desc：内容超高时滚动发生在内容区内部，\n 而不是把卡片顶出 dialog 盒子。宿主不必为「让它滚」而算。\n\n 但「宿主不需要知道 chrome 多高」并不成立，这样写会误导后人。--wui-dialog-max-height\n 的语义是内容区上限：宿主若要给整卡定上限，仍然得自己量出 chrome 再从 token 里减掉\n （AddDialog / RestoreDialog 减 142，SettingsDialog 减 106，三处不能互相照抄）。把整卡\n 上限原样写进 token，卡片会比预期高出一个 chrome。\n\n 实测（Chromium + WebKit，见 __tests__/dialog-content-height.browser.spec.ts）：本组 CSS\n 只对默认模式生效——headless 模式（默认槽渲染进 .wui-dialog-content、没有 .desc）的卡片尺寸不变。\n 但位置不保证：`dialog` 的整卡兜底是字面量 100vh，modal dialog\n 按自身盒子在视口里居中、卡片从盒子顶部起画，盒子更高 → 卡片在视口内上移。内容接近视口\n 高度时位移可观测（reviewer 实测 52px / 102px / 25.16px），只有内容远矮于视口时位移为 0\n （两个 demo 正是落在这一档，巧合而非保证）。 /\n\n/ dialog 不是 flex 容器时 .desc 的 height:100% 拿不到确定高度（:host 是 display:contents，\n dialog 自身默认 block），宿主的内层 grid 因此撑不满、两栏不等高。模式判定按 DOM 形状\n 而不是 attribute，理由见下方 grid 规则上的注释。 /\n\n/ 只在打开态覆盖原生 dialog 的 display，关闭后保留 UA 的 display:none。 /\ndialog[open]:has(.desc) {\n display: flex;\n flex-direction: column;\n}\n\n/ 模态表面的焦点环抑制（<dialog> 壳 + panel 滚动区）集中在 assets/modal-surface.css，见组件 index.ts 的 static styles。 /\n\ndialog[open].is-visible {\n transform: scale(1);\n}\n\ndialog[open].is-closing {\n pointer-events: none;\n transition-duration: var(--wui-duration-dialog-exit, 260ms);\n}\n\ndialog.is-closing::backdrop {\n transition-duration: var(--wui-duration-dialog-exit, 260ms);\n}\n\ndialog[open].is-visible::backdrop {\n opacity: 1;\n}\n\n@media (prefers-reduced-motion: reduce) {\n dialog,\n dialog[open].is-visible {\n transform: none;\n transition-duration: var(--wui-duration-feedback, 100ms);\n }\n}\n\n/ ===== 玻璃卡片主体（样式由 glass.css 提供） ===== /\n\n/ 单层玻璃：卡片自身承担背景/阴影/backdrop-filter。blur(0px) ↔ blur(4px) 平滑插值\n （none↔blur 不可插值，直接切换会跳变），own opacity 过渡不禁用自身 blur，\n 因此卡片直接 opacity + backdrop-filter 同步过渡即可，无需双层。 /\n.wui-dialog-body {\n --wui-internal-dialog-close-top: var(--wui-dialog-close-top, 20px);\n --wui-internal-dialog-close-right: var(--wui-dialog-close-right, 20px);\n --wui-internal-glass-shadow: var(--wui-shadow-overlay, 2px 16px 40px rgb(0 0 0 / 0.4));\n --wui-glass-corner-radius: var(--wui-radius-overlay, 28px);\n\n / 卡片只吃 --wui-dialog-padding 的 block 分量；inline 分量让给各分区\n （.header / .desc / .wui-dialog-footer，由 --wui-dialog-inline-padding 控制），\n .desc 这个滚动容器的边因此与卡片内沿重合，scrollbar 贴边（详见 .desc）。 /\n padding: var(--wui-dialog-padding, var(--wui-space-5, 20px) var(--wui-space-6, 24px) var(--wui-space-6, 24px));\n padding-inline: 0;\n border-radius: var(--wui-radius-overlay, 28px);\n\n opacity: 0;\n background-color: var(--wui-dialog-bg, var(--wui-color-surface-overlay, rgb(248 248 248 / 0.92)));\n backdrop-filter: blur(0) saturate(var(--wui-glass-saturation, 160%)) brightness(var(--wui-glass-brightness, 1.06));\n\n / transition 列表需手写 -webkit-backdrop-filter：lightningcss 不会在 transition\n 的 value 内追加 -webkit 项，而 iOS 16.4 上 blur 过渡依赖它（属性前缀会自动生成）。 /\n transition:\n opacity var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1)),\n -webkit-backdrop-filter var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1)),\n backdrop-filter var(--wui-duration-dialog-enter, 320ms) var(--wui-ease-dialog, cubic-bezier(0.2, 0, 0, 1));\n}\n\n/ 卡片改 grid 容器：header 与 footer 走 auto（内容撑开），.desc 走 minmax(0,1fr)。\n minmax 的 0 是 .desc 能收缩的前提；配合 .desc 的 min-height:0 与 overflow-y:auto，\n 内容超高时滚动发生在内容区内部，而不是把卡片顶出 dialog 盒子。\n\n 单列而非与基础 .wui-dialog-body 合并：`:has(.desc)` 与类选择器叠加的特异度高于单个类\n 选择器，合并会让「仅默认模式变 grid」变成「所有模式都变 grid」，那会改掉 headless\n 模式的几何（实测高内容 headless 的卡片会从 3044 被夹到 896）。位置也受 stylelint\n no-descending-specificity 约束：须排在基础规则之后、dialog.is-closing 之前。\n\n 模式判定按 DOM 形状（`:has(.desc)`）而不是 attribute（`:host(:not([headless]))`）：\n 外部直接 `setAttribute('headless', '')` 时 attribute 立刻翻转，Lit 要等下一次 update 才\n 换模板——那个窗口里 DOM 仍是默认形状。`:has(.desc)` 描述的就是当下的 DOM，与它自洽；\n `:host([headless])` 会按 attribute 提前把卡片按 headless 几何渲染，而 DOM 里还带着\n `.desc`。改成 drawer 那种 attribute 形式还要把承重规则上移（`dialog.is-closing\n .wui-dialog-body`；焦点环抑制那条已挪去 `assets/modal-surface.css`）来满足\n no-descending-specificity，收益不抵风险。 /\n.wui-dialog-body:has(.desc) {\n display: grid;\n grid-template-rows: auto minmax(0, 1fr) auto;\n\n / 这条 min-height: 0 是承重的（`.desc` 那条不是）：卡片是 `dialog` 这个 column flex\n 容器的 flex 项，`min-height: auto` 会把它垫到内容高度，视口的 100dvh 兜底就再也\n 夹不住。删掉后 token=5000px 时卡片实测 3154、dialog 896。 /\n min-height: 0;\n}\n\n/ ===== headless 模式：内容区是卡片内部的滚动层 =====\n\n headless 模式没有 header / .desc / footer，卡片就是那个滚动层，所以这里要同时守住两件事：\n 内容不高时卡片贴合内容（与基础规则一致），内容高过视口时把上限交给视口、把溢出交给\n 滚动。少了后半件，卡片会一路长到内容高度并溢出 dialog 盒子；dialog 是 overflow:\n visible（阴影与关闭 button 不能由同尺寸的原生 dialog 裁），溢出的那截落在视口之下，\n 既看不到也够不着。\n\n 上限取与整卡兜底相同的字面量，而不是 `--wui-dialog-max-height`：后者的公开语义是\n `.desc` 的高度（README 有记录），headless 模式根本没有 `.desc`，套上去会凭空改掉\n 这档的既有尺寸语义。\n\n 滚动单独成层而不是让卡片自己滚：关闭 button 是卡片的绝对定位直接子元素，卡片一旦自己\n 滚动，button 会跟着内容一起滚走。padding 也跟着挪进内层，让内容与滚动容器的裁剪边\n （padding 外沿）留出余量——贴边的控件焦点环才不会被裁成残条；内层没有 scrollbar 槽的\n 引擎里，这圈余量与卡片直接持 padding 时逐像素相同。\n\n headless 的收窄也取结构（`:has(> .wui-dialog-content)`）而不是 `:host([headless])`，与上方\n grid 规则同一条理由：判定跟 DOM 形状走。attribute 与 DOM 在直接 setAttribute 的那个\n 窗口里会短暂分叉，结构选择器始终与 DOM 自洽。 /\n.wui-dialog-body:has(> .wui-dialog-content) {\n overflow: hidden;\n display: grid;\n grid-template-rows: minmax(0, 1fr);\n\n max-height: 100vh;\n padding: 0;\n}\n\n@supports (height: 100dvh) {\n .wui-dialog-body:has(> .wui-dialog-content) {\n max-height: 100dvh;\n }\n}\n\n.wui-dialog-content {\n overflow-y: auto;\n min-height: 0;\n padding: var(--wui-dialog-padding, var(--wui-space-5, 20px) var(--wui-space-6, 24px) var(--wui-space-6, 24px));\n}\n\ndialog.is-closing .wui-dialog-body {\n transition-duration: var(--wui-duration-dialog-exit, 260ms);\n}\n\n:host([closable]) .wui-dialog-body {\n /\n * headless 模式的关闭 button 浮在卡片右上角，需要一个定位参照，所以显式重述一次\n * position: relative。\n \n 实际提供这个上下文的是卡片自带的 .wui-glass（glass.css 的 .wui-glass 已有\n * position: relative），所以这条声明目前是冗余的，写在这里是为了不依赖\n * glass.css 的内部实现——若哪天 glass 改成非定位元素，这条仍然兜得住。\n * 它不是 closable 建立的包含块边界：body 上的 wui-glass class 与\n * static styles 里的 glass 都不依赖 closable。\n /\n position: relative;\n}\n\ndialog[open].is-visible .wui-dialog-body {\n opacity: 1;\n backdrop-filter: blur(var(--wui-glass-blur, 4px)) saturate(var(--wui-glass-saturation, 160%))\n brightness(var(--wui-glass-brightness, 1.06));\n}\n\n/ ===== 关闭 button（绝对定位，两种内容模式同一套规则）=====\n\n 偏移由公开 token --wui-dialog-close-top / --wui-dialog-close-right 控制，默认都是字面量\n 20px。默认值不经过 --wui-space-：这两个 token 的参照系是卡片边缘，而不是相邻元素\n 之间的间距节奏，消费方调整主题间距时不应意外移动关闭 button。dialog 的关闭偏移是 20px，\n 与 drawer 的 16/16 不同；--wui-drawer-close- 保持不变。\n\n 两个公开 token 先在正文容器上解析成同一份内部变量，button 定位和标题避让都读这份结果，\n 避免只改一个兜底字面量后 button 与标题各自按不同默认值计算。\n\n 两种模式下它都是卡片的直接子元素：绝对定位的包含块是 .wui-dialog-body\n （:host([closable]) 给了它 position: relative），top/right 因此量到卡片 padding box\n 的右上角，与 chrome 带的 padding 无关。 /\n.wui-dialog-close {\n position: absolute;\n z-index: 3;\n top: var(--wui-internal-dialog-close-top);\n right: var(--wui-internal-dialog-close-right);\n}\n\n/\n * chrome 带：`header` 槽 + `heading` 属性 fallback，与 drawer 的 header 同形。\n * 卡片把 inline padding 让给各分区后（见 .wui-dialog-body），这条带自带水平 padding，\n * 否则内容会贴到卡片内沿。带里装的不一定是标题——消费方可以放整条工具条\n * （SettingsDialog 就是），所以用 flex / space-between 让多个子项排布；fallback 的\n * .wui-dialog-heading 与带共用 title 级排版，与 drawer 的 .wui-drawer-heading 对齐。\n * 带为空（槽无分配元素且 heading 为空）时隐藏，由 index.ts 的 _showHeader 决定。\n /\n.header {\n display: flex;\n gap: var(--wui-space-3, 12px);\n align-items: center;\n justify-content: space-between;\n\n margin: 0 0 var(--wui-dialog-title-gap, var(--wui-space-4, 16px));\n padding-inline: var(--wui-dialog-inline-padding, var(--wui-space-6, 24px));\n\n font-size: var(--wui-font-size-title, 18px);\n font-weight: var(--wui-font-weight-semibold, 600);\n line-height: var(--wui-line-height-tight, 1.2);\n color: var(--wui-color-text, #1b1b1b);\n}\n\n.header[hidden] {\n display: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n dialog.is-closing .wui-dialog-body,\n dialog[open].is-visible .wui-dialog-body {\n transition-duration: var(--wui-duration-feedback, 100ms);\n }\n}\n\n/ 标题避让：关闭 button 绝对定位、不占 chrome 带的位，长标题会一直排到 button 下面。\n 预留量取「button 右偏移 + button 宽 + 呼吸间距」，而不是只减掉带自身的 padding——这样即便\n 消费者把 --wui-dialog-inline-padding 调到 0，内容右缘也不会越过 button 左缘；跟随\n --wui-dialog-close-right 变化；这里复用正文容器上已解析的内部右侧偏移，与 button 定位同源。\n 26px 对应 index.ts 里 button 的 size=\"26\"，改 button 尺寸时一并改这里。\n 只在 closable 时生效：没有 button 就不必留白。 /\n:host([closable]) .header {\n padding-inline-end: calc(var(--wui-internal-dialog-close-right) + 26px + var(--wui-space-3, 12px));\n}\n\n.desc {\n / 横向显式 clip 而非留默认的 visible：一旦本轴成为滚动容器，另一轴的 visible 会被\n 计算成 auto，宿主内容横向溢出时就会多出一条不该出现的横向 scrollbar。\n Chromium / WebKit 实测：clip 与本规则下面的 auto 配对时计算值会降级成 hidden\n （仍可被脚本滚动）。Firefox ≥128 不做这个降级、保持 clip，但仓库的 browser-mode\n 项目只跑 chromium，这句未经本仓 CI 证实。两个引擎都不画横向 scrollbar，所以这里\n 只需要「不是 auto」；断言写成 not.toBe('auto') 而非 toBe('clip')，否则会在\n 降级的引擎上误报。 /\n overflow-x: clip;\n overflow-y: auto;\n\n / 承重的是上面那条 `overflow-y: auto`：按 CSS Sizing 3，溢出轴不为 visible 的\n grid 项其自动最小尺寸就是 0，`.desc` 无需再显式归零（实测删掉本条测试仍全绿，\n 改成 `auto auto auto` 也一样）。这里保留是防御性的：哪天 `overflow-y` 被改回\n visible，显式归零仍在，minmax(0,1fr) 才不会被顶破。 /\n min-height: 0;\n\n / 内容区上限 = token + ring 余量：token 语义是内容区高度，ring 不该从它里面扣。\n token 只挂在这里，不与 dialog 的 max-height 共用——共用时外层（整卡）必然先触发。 /\n max-height: calc(var(--wui-dialog-max-height, 90vh) + var(--wui-dialog-desc-focus-padding, 6px) 2);\n\n /* ===== focus-ring 余量（block 轴）=====\n\n .desc 既是滚动容器又是裁剪盒（clip），贴在内容区任一沿的控件，其 ring\n （offset 2 + width 3 = 5px）会被 padding box 裁掉；block 轴留 6px 余 1px，配一条\n 等量负 margin 把这 6px 从外部间距里扣回去——标题带→内容、内容→footer 的视觉间距\n 不受这 6px 影响。\n\n inline 轴不走 focus 余量：卡片的 inline padding 归零，由本容器的 padding-inline 取\n --wui-dialog-inline-padding 承担（见 .wui-dialog-body），\n 滚动口因此与卡片内沿重合（scrollbar 贴边，与 headless 模式 / drawer 一致）。24px 的 inline\n padding 远大于 5px ring，左右焦点环不会被裁；也无需配负 margin——content box 的\n 可用宽度与卡片自带 inline padding 时相同（同一档 inline padding），否则 AddDialog 那种两栏\n grid 的 drop zone 会换行（实测见 __tests__/dialog-content-height.browser.spec.ts 的\n 「全宽控件的 focus ring 不被内容区裁掉，且宿主拿到的可用宽度不被改窄」）。\n\n 取舍，是取舍不是疏漏：负 margin 让 `.desc` 的 border box 在 block 轴溢出滚动内容区，\n 所以底部那圈 ring 余量不随内容滚动——滚到最底时 footer 那一侧仍留得住 padding，而\n 内容末端到 `.desc` 下沿的 desc-gap 恒定，不跟着内容走。 /\n margin-top: calc(-1 var(--wui-dialog-desc-focus-padding, 6px));\n\n /* margin-bottom 是「desc-gap 减去那对 padding-block」，两个都是公开 token：宿主把\n desc-gap 调到 focus-padding 以下就会算出负 margin（24/8 安全，4/2/0 会算出\n -2/-4/-6）。max() 兜住下界 0——那条路径下内容末端与 footer 会贴在一起，但盒模型\n 与 grid 行分配不进负值区间。 /\n margin-bottom: max(\n 0px,\n calc(var(--wui-dialog-desc-gap, var(--wui-space-6, 24px)) - var(--wui-dialog-desc-focus-padding, 6px))\n );\n margin-inline: 0;\n padding-block: var(--wui-dialog-desc-focus-padding, 6px);\n padding-inline: var(--wui-dialog-inline-padding, var(--wui-space-6, 24px));\n\n font-size: var(--wui-font-size, 14px);\n line-height: var(--wui-line-height-normal, 1.5);\n color: var(--wui-color-text, #1b1b1b);\n}\n\n/ `--wui-dialog-max-height` 是公开 token（README 有记录），语义是内容区高度。\n 默认值与整卡兜底同族（90vh / dvh），未覆写时内容区上限就是 90vh / 90dvh 这一档：\n 移动端 90vh 可能大于 90dvh（vh 取大视口高），少了 min() 内容区会探到工具栏下面。\n\n 必须紧跟在 `.desc` 之后而非文件开头的 @supports 块里：两者特异度相同（0,1,0），\n 靠后者胜。实测把本条挪到前面后，`.desc` 的计算值会退回 90vh。 /\n@supports (height: 100dvh) {\n .desc {\n max-height: calc(var(--wui-dialog-max-height, min(90vh, 90dvh)) + var(--wui-dialog-desc-focus-padding, 6px) 2);\n }\n}\n\n/* footer 是纯布局容器：只负责方向、间距、对齐和内边距。不要在这里用 ::slotted()\n 覆盖 slotted 控件的尺寸或外观；满宽等视觉状态由子组件自己的属性（例如 button 的\n `full`）表达，避免 Dialog 越过组件边界替消费者做样式决定。 /\n.wui-dialog-footer {\n display: flex;\n flex-direction: column;\n gap: var(--wui-dialog-footer-gap, 10px);\n align-items: stretch;\n justify-content: var(--wui-dialog-footer-justify, flex-end);\n\n / 卡片 inline padding 归零后由本区自带水平 padding，与 .header / .desc 同源。 */\n padding-inline: var(--wui-dialog-inline-padding, var(--wui-space-6, 24px));\n}\n\n:host([footer-orientation='horizontal']) .wui-dialog-footer {\n flex-direction: row;\n gap: var(--wui-space-3, 12px);\n align-items: center;\n justify-content: var(--wui-dialog-footer-justify, center);\n}\n"],"mappings":";AAAA,IAAA,gBAAA"}

package/dist/components/dropdown/index.js CHANGED Viewed

@@ -4,12 +4,12 @@ import { dispatchOpenChangeEvent } from "../../shared/open-state/index.js";
 import { defineOverlay } from "../../shared/overlay/overlay.js";
 import { hideOverlayPresence, showOverlayPresence } from "../../shared/overlay/presence.js";
 import { defineOpenOverlay } from "../../shared/overlay/open-overlay.js";
+import { FLOATING_PLACEMENTS } from "../../shared/overlay/placement-props.js";
 import { defineScrollLockLease } from "../../shared/scroll-lock/scroll-lock.js";
 import { UserChangeController } from "../../shared/events/user-change.js";
 import { captureFrameworkAnchors, focusMenuItem, getMenuChildren, getMenuItemFromEvent, hideNestedMenuChildren, moveMenuChildren, orderManagedMenuItems, reconcileManagedMenuItems, restoreFrameworkAnchors, returnManagedMenuItemsToSlot } from "../../shared/menu-portal/menu-tree.js";
 import { createClosingSubmenuStack, createMenuHoverBinder, createMenuOutsideClickGuard, getEnabledMenuLevelItems, getFocusedMenuItemFromPanels, handleMenuKeyboard } from "../../shared/menu-behavior/index.js";
 import { createMenuPortalOverlay } from "../../shared/menu-portal/menu-portal.js";
-import { FLOATING_PLACEMENTS } from "../../shared/overlay/placement-props.js";
 import style_default from "./style.js";
 import { LitElement, html, unsafeCSS } from "lit";
 import { customElement, property, state } from "lit/decorators.js";

package/dist/components/icon/index.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@ export declare class WebUiIcon extends LitElement {
   spin: boolean;
   size: number;
   color?: string;
-  render(): import("lit").TemplateResult<1> | typeof nothing;
+  render(): typeof nothing | import("lit").TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/components/icon/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/components/icon/index.ts"],"mappings":";;qBAgBa,kBAAkB;SACb,sBAAM;EAEU,OAAO;EACK;EACD;EACA;EAElC,~~wBAAM~~,~~2BAAA~~;;QAqBT;YACI;IACR,eAAe"}
1	+ {"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/components/icon/index.ts"],"mappings":";;qBAgBa,kBAAkB;SACb,sBAAM;EAEU,OAAO;EACK;EACD;EACA;EAElC,iBAAM,wBAAA;;QAqBT;YACI;IACR,eAAe"}

package/dist/components/index.d.ts CHANGED Viewed

@@ -10,7 +10,7 @@ import { WebUiCheckbox } from "./checkbox/index.js";
 import { WebUiCheckboxGroup } from "./checkbox-group/index.js";
 import { WebUiCollapse } from "./collapse/index.js";
 import { WebUiContextMenu } from "./context-menu/index.js";
-import { WebUiDialog } from "./dialog/index.js";
+import { DialogFooterOrientation, WebUiDialog } from "./dialog/index.js";
 import { DrawerPlacement, WebUiDrawer } from "./drawer/index.js";
 import { WebUiDropdownDivider } from "./dropdown-divider/index.js";
 import { WebUiDropdownHeader } from "./dropdown-header/index.js";
@@ -24,6 +24,7 @@ import { LayoutAriaLabels, WebUiLayout } from "./layout/index.js";
 import { WebUiMiddleEllipsis } from "./middle-ellipsis/index.js";
 import { WebUiOption } from "./option/index.js";
 import { WebUiPopover } from "./popover/index.js";
+import { WebUiProgress } from "./progress/index.js";
 import { WebUiRadio } from "./radio/index.js";
 import { WebUiRadioGroup } from "./radio-group/index.js";
 import { WebUiSegmented } from "./segmented/index.js";
@@ -42,5 +43,5 @@ import { WebUiSwitch } from "./switch/index.js";
 import { WebUiTooltip } from "./tooltip/index.js";
 import { WebUiEvent, WebUiEventName } from "../types/utils.js";
 export type WebUiElementMap = { [K in keyof HTMLElementTagNameMap as K extends `web-ui-${string}` ? K : never]: HTMLElementTagNameMap[K]; };
-export { DrawerPlacement, ImagePreviewAriaLabels, ImagePreviewHandle, ImagePreviewItem, ImagePreviewOptions, LayoutAriaLabels, type Placement, ReplayOptions, ResolvedThemeAppearance, ThemeAppearance, ThemeMotion, type ToastCloseReason, type ToastInstanceOptions, type ToastOptions, type ToastPosition, type ToastType, WebUiAutocomplete, WebUiAvatar, WebUiBackTop, WebUiBadge, WebUiButton, WebUiButtonGroup, WebUiCheckbox, WebUiCheckboxGroup, WebUiCollapse, WebUiContextMenu, WebUiDialog, WebUiDrawer, WebUiDropdown, WebUiDropdownDivider, WebUiDropdownHeader, WebUiDropdownItem, WebUiEditableText, WebUiEmpty, type WebUiEvent, type WebUiEventName, WebUiIcon, WebUiInput, WebUiInputNumber, WebUiLayout, WebUiMiddleEllipsis, WebUiOption, WebUiPopover, WebUiRadio, WebUiRadioGroup, WebUiSegmented, WebUiSegmentedTrigger, WebUiSelect, WebUiSlider, WebUiSpinner, WebUiSvgDrawLines, WebUiSwitch, WebUiTextarea, WebUiTheme, WebUiToast, WebUiTooltip, imagePreview, toast };
+export { DialogFooterOrientation, DrawerPlacement, ImagePreviewAriaLabels, ImagePreviewHandle, ImagePreviewItem, ImagePreviewOptions, LayoutAriaLabels, type Placement, ReplayOptions, ResolvedThemeAppearance, ThemeAppearance, ThemeMotion, type ToastCloseReason, type ToastInstanceOptions, type ToastOptions, type ToastPosition, type ToastType, WebUiAutocomplete, WebUiAvatar, WebUiBackTop, WebUiBadge, WebUiButton, WebUiButtonGroup, WebUiCheckbox, WebUiCheckboxGroup, WebUiCollapse, WebUiContextMenu, WebUiDialog, WebUiDrawer, WebUiDropdown, WebUiDropdownDivider, WebUiDropdownHeader, WebUiDropdownItem, WebUiEditableText, WebUiEmpty, type WebUiEvent, type WebUiEventName, WebUiIcon, WebUiInput, WebUiInputNumber, WebUiLayout, WebUiMiddleEllipsis, WebUiOption, WebUiPopover, WebUiProgress, WebUiRadio, WebUiRadioGroup, WebUiSegmented, WebUiSegmentedTrigger, WebUiSelect, WebUiSlider, WebUiSpinner, WebUiSvgDrawLines, WebUiSwitch, WebUiTextarea, WebUiTheme, WebUiToast, WebUiTooltip, imagePreview, toast };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","names":[],"sources":["../../src/components/index.ts"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA6CY~~,qBACT,WAAW,yBAAyB,+BAA+B,YAAY,sBAAsB"}
1	+ {"version":3,"file":"index.d.ts","names":[],"sources":["../../src/components/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YA8CY,qBACT,WAAW,yBAAyB,+BAA+B,YAAY,sBAAsB"}

package/dist/components/index.js CHANGED Viewed

@@ -25,6 +25,7 @@ import { WebUiLayout } from "./layout/index.js";
 import { WebUiMiddleEllipsis } from "./middle-ellipsis/index.js";
 import { WebUiOption } from "./option/index.js";
 import { WebUiPopover } from "./popover/index.js";
+import { WebUiProgress } from "./progress/index.js";
 import { WebUiRadio } from "./radio/index.js";
 import { WebUiRadioGroup } from "./radio-group/index.js";
 import { WebUiSegmented } from "./segmented/index.js";
@@ -39,4 +40,4 @@ import { WebUiToast } from "./toast/toast.js";
 import "./toast/index.js";
 import { WebUiSwitch } from "./switch/index.js";
 import { WebUiTooltip } from "./tooltip/index.js";
-export { WebUiAutocomplete, WebUiAvatar, WebUiBackTop, WebUiBadge, WebUiButton, WebUiButtonGroup, WebUiCheckbox, WebUiCheckboxGroup, WebUiCollapse, WebUiContextMenu, WebUiDialog, WebUiDrawer, WebUiDropdown, WebUiDropdownDivider, WebUiDropdownHeader, WebUiDropdownItem, WebUiEditableText, WebUiEmpty, WebUiIcon, WebUiInput, WebUiInputNumber, WebUiLayout, WebUiMiddleEllipsis, WebUiOption, WebUiPopover, WebUiRadio, WebUiRadioGroup, WebUiSegmented, WebUiSegmentedTrigger, WebUiSelect, WebUiSlider, WebUiSpinner, WebUiSvgDrawLines, WebUiSwitch, WebUiTextarea, WebUiTheme, WebUiToast, WebUiTooltip, imagePreview, toast };
+export { WebUiAutocomplete, WebUiAvatar, WebUiBackTop, WebUiBadge, WebUiButton, WebUiButtonGroup, WebUiCheckbox, WebUiCheckboxGroup, WebUiCollapse, WebUiContextMenu, WebUiDialog, WebUiDrawer, WebUiDropdown, WebUiDropdownDivider, WebUiDropdownHeader, WebUiDropdownItem, WebUiEditableText, WebUiEmpty, WebUiIcon, WebUiInput, WebUiInputNumber, WebUiLayout, WebUiMiddleEllipsis, WebUiOption, WebUiPopover, WebUiProgress, WebUiRadio, WebUiRadioGroup, WebUiSegmented, WebUiSegmentedTrigger, WebUiSelect, WebUiSlider, WebUiSpinner, WebUiSvgDrawLines, WebUiSwitch, WebUiTextarea, WebUiTheme, WebUiToast, WebUiTooltip, imagePreview, toast };

package/dist/components/layout/index.d.ts CHANGED Viewed

@@ -33,6 +33,14 @@ export declare class WebUiLayout extends LitElement {
    * 侧边栏相关事件与属性在该模式下不产生可见效果。
    */
   noSidebar: boolean;
+  /**
+   * 启用桌面端 Sidebar 的 collapse 入口。
+   *
+   * 只有声明了本属性，layout 才渲染收起 / 展开 Toggle，也才会因为点击而派发
+   * `sidebar-collapsed-change`。桌面宽度仍由受控属性 `sidebar-collapsed` 决定，
+   * 未声明本属性不会阻止它收窄；移动端 Drawer 的 header Toggle 不受影响。
+   */
+  sidebarCollapsible: boolean;
   /**
    * 桌面端 Sidebar 的持久布局偏好。
    *

package/dist/components/layout/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/components/layout/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;iBAyCiB;EACf;EACA;EACA;EACA;EACA;;qBAIW,oBAAoB;SACf,sBAAM;;;;;;;;EAUtB;;;;;;;;;;;;EAcA;EAGA;EAGA;;EAIA;;;;;EAOA;;EAIA;;;;;;;EASA;EAGA;;EAGgC,aAAa;UASrC;;;;;;;MAQJ;UAII;mBAES;UAST;EAUC,yBAAyB,cAAc,yBAAyB;mBAoBxD;mBAMA;UAET;UASA;UAUA;UAUA;UAKA;UACA;UAES;UAET;UAKA;UAMA;UASA;UAIA;UA+CA;UAUA;UAoDA;EAQC;EAQA;EAOA;UAID;UAIA;YAiBW,WAAW,SAAS;EAK9B,wBAAM;~~WAgIE~~;IACf,4BAA4B;MAAc;;IAC1C,uBAAuB;MAAc;;IACrC,wBAAwB;MAAc;;IACtC,iBAAiB;MAAc;;;;QAI3B;YACI;IACR,iBAAiB"}
1	+ {"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/components/layout/index.ts"],"mappings":";;;;;;;;;;;;;;;;;;iBAyCiB;EACf;EACA;EACA;EACA;EACA;;qBAIW,oBAAoB;SACf,sBAAM;;;;;;;;EAUtB;;;;;;;;EAUA;;;;;;;;;;;;EAcA;EAGA;EAGA;;EAIA;;;;;EAOA;;EAIA;;;;;;;EASA;EAGA;;EAGgC,aAAa;UASrC;;;;;;;MAQJ;UAII;mBAES;UAST;EAUC,yBAAyB,cAAc,yBAAyB;mBAoBxD;mBAMA;UAET;UASA;UAUA;UAUA;UAKA;UACA;UAES;UAET;UAKA;UAMA;UASA;UAIA;UA+CA;UAUA;UAoDA;EAQC;EAQA;EAOA;UAID;UAIA;YAiBW,WAAW,SAAS;EAK9B,wBAAM;WAqIE;IACf,4BAA4B;MAAc;;IAC1C,uBAAuB;MAAc;;IACrC,wBAAwB;MAAc;;IACtC,iBAAiB;MAAc;;;;QAI3B;YACI;IACR,iBAAiB"}

package/dist/components/layout/index.js CHANGED Viewed

@@ -2,6 +2,7 @@ import __decorate from "../../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm
 import "../icon/index.js";
 import glass_default from "../../classes/glass.js";
 import radix_icons_panel_left_minimized_default from "../../icons/generated/radix-icons-panel-left-minimized.js";
+import ic_round_menu_open_default from "../../icons/generated/ic-round-menu-open.js";
 import "../button/index.js";
 import { resolveBuiltinLabelSet } from "../../shared/locale/builtin-labels.js";
 import glow_default from "../../classes/glow.js";
@@ -27,9 +28,10 @@ let WebUiLayout = class WebUiLayout extends LitElement {
 	constructor(..._args) {
 		super(..._args);
 		this.noSidebar = false;
+		this.sidebarCollapsible = false;
 		this.sidebarCollapsed = false;
 		this.sidebarWidth = "240px";
-		this.collapsedWidth = "68px";
+		this.collapsedWidth = "60px";
 		this.sidebarResizable = false;
 		this.sidebarMinWidth = "";
 		this.sidebarMaxWidth = "";
@@ -246,17 +248,20 @@ let WebUiLayout = class WebUiLayout extends LitElement {
 		const isSidebarOpen = !this.sidebarCollapsed;
 		const sidebarStyle = this._mobile ? {} : { width: this._resizeWidth ?? (this.sidebarCollapsed ? this.collapsedWidth : this.sidebarWidth) };
 		const toggleLabel = resolveBuiltinLabelSet(this.ariaLabels, isSidebarOpen ? "collapseSidebar" : "expandSidebar");
-		const desktopToggle = html`
-      <web-ui-button
-        class="sidebar-toggle"
-        icon
-        variant="secondary"
-        @click="${this._toggleSidebar}"
-        aria-label=${toggleLabel}
-      >
-        <web-ui-icon .icon=${radix_icons_panel_left_minimized_default}></web-ui-icon>
-      </web-ui-button>
-    `;
+		const desktopToggle = this.sidebarCollapsible ? html`
+          <web-ui-button
+            class="sidebar-toggle"
+            icon
+            variant="ghost"
+            @click="${this._toggleSidebar}"
+            aria-label=${toggleLabel}
+          >
+            <web-ui-icon
+              .icon=${ic_round_menu_open_default}
+              style=${styleMap({ transform: isSidebarOpen ? "none" : "scaleX(-1)" })}
+            ></web-ui-icon>
+          </web-ui-button>
+        ` : nothing;
 		const sidebarViewport = html`
       <div class="sidebar-viewport">
         <slot name="sidebar"></slot>
@@ -294,7 +299,7 @@ let WebUiLayout = class WebUiLayout extends LitElement {
           >
             <div class="aside-panel wui-glass">
               ${sidebarViewport}
-              <div class="sidebar-toggle-area">${desktopToggle}</div>
+              ${this.sidebarCollapsible ? html`<div class="sidebar-toggle-area">${desktopToggle}</div>` : nothing}
             </div>
             ${this.sidebarResizable && !this.sidebarCollapsed ? html`
                     <div
@@ -344,6 +349,11 @@ __decorate([property({
 	attribute: "no-sidebar",
 	reflect: true
 })], WebUiLayout.prototype, "noSidebar", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "sidebar-collapsible",
+	reflect: true
+})], WebUiLayout.prototype, "sidebarCollapsible", void 0);
 __decorate([property({
 	type: Boolean,
 	attribute: "sidebar-collapsed",

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

	@@ -1 +1 @@
1	- {"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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"}
1	+ {"version":3,"file":"index.js","names":["glass","glow","style","icRoundMenuOpen","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 { icRoundMenuOpen, 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 的 collapse 入口。\n \n 只有声明了本属性，layout 才渲染收起 / 展开 Toggle，也才会因为点击而派发\n * `sidebar-collapsed-change`。桌面宽度仍由受控属性 `sidebar-collapsed` 决定，\n * 未声明本属性不会阻止它收窄；移动端 Drawer 的 header Toggle 不受影响。\n /\n @property({ type: Boolean, attribute: 'sidebar-collapsible', reflect: true })\n sidebarCollapsible = 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 = '60px'\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 = this.sidebarCollapsible\n ? 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\n .icon=${icRoundMenuOpen}\n style=${styleMap({ transform: isSidebarOpen ? 'none' : 'scaleX(-1)' })}\n ></web-ui-icon>\n </web-ui-button>\n `\n : nothing\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 ${this.sidebarCollapsible ? html`<div class=\"sidebar-toggle-area\">${desktopToggle}</div>` : nothing}\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":";;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAM,wBAAwB;AAyBvB,IAAM,cAAN,MAAM,oBAAoB,WAAW;;;EAW9B,KAAA,YAAA;EAUS,KAAA,qBAAA;EAcF,KAAA,mBAAA;EAGJ,KAAA,eAAA;EAGE,KAAA,iBAAA;EAIE,KAAA,mBAAA;EAOD,KAAA,kBAAA;EAIA,KAAA,kBAAA;EASJ,KAAA,cAAA;EAGD,KAAA,aAAA;EAYK,KAAA,UAAA;EAY4B,KAAA,eAAA;EAEL,KAAA,wBAAA,UAA+B;GACtE,KAAK,YAAY,MAAM,OAAO;EAChC;EAqCkC,KAAA,iBAAA,yBAAyB,EACzD,sBAAqB,SAAQ;GAC3B,KAAK,MAAM,YAAY,sCAAsC,GAAG,KAAK,OAAO,GAAG;EACjF,EACF,CAAC,CAAC,CAAC,KAAK;EAEoC,KAAA,2BAAA,IAAI,sBAAsB,MAAM,KAAK,cAAc;EAoC5C,KAAA,iBAAA;EACvB,KAAA,oBAAA;EAEmB,KAAA,eAAA;;;EAjLtB,KAAA,SAAA;GAAC,UAAUA,aAAK;GAAG,UAAUC,YAAI;GAAG,UAAUC,aAAK;EAAC;;;;;;;;CAuF7E,IAAI,SAAkB;EACpB,OAAO,KAAK;CACd;CAaA,YAAoB,MAAe;EACjC,IAAI,SAAS,KAAK,SAAS;EAC3B,KAAK,UAAU;EAGf,IAAI,KAAK,YAAY,GAAG,KAAK,mBAAmB;EAChD,KAAK,gBAAgB,UAAU,IAAI;EACnC,KAAK,cAAc,IAAI,YAAY,iBAAiB;GAAE,QAAQ,EAAE,QAAQ,KAAK;GAAG,SAAS;GAAM,UAAU;EAAK,CAAC,CAAC;CAClH;CAEA,yBAAkC,MAAc,UAAyB,UAAyB;EAChG,MAAM,yBAAyB,MAAM,UAAU,QAAQ;EAEvD,IAAI,SAAS,UAAU;EAEvB,MAAM,UAAU,KAAK,cAAc,WAAW;EAC9C,IAAI,KAAK,YAAY,SAAS,KAAK,UAAU;EAO7C,IAAI,SAAS;GACX,IAAI,KAAK,aAAa,QAAQ,MAAM,IAAI,KAAK,aAAa,UAAU,EAAE;GACtE;EACF;EACA,IAAI,KAAK,aAAa,QAAQ,GAAG,KAAK,gBAAgB,QAAQ;CAChE;CAUA,iBAAyB;EACvB,IAAI,KAAK,SAAS;GAChB,KAAK,uBAAuB,CAAC,KAAK,WAAW;GAC7C;EACF;EAEA,KAAK,4BAA4B,CAAC,KAAK,gBAAgB;CACzD;CAEA,4BAAoC,WAAoB;EACtD,KAAK,cACH,IAAI,YAAY,4BAA4B;GAC1C,QAAQ,EAAE,UAAU;GACpB,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAEA,uBAA+B,MAAe;EAC5C,KAAK,cACH,IAAI,YAAY,uBAAuB;GACrC,QAAQ,EAAE,KAAK;GACf,SAAS;GACT,UAAU;EACZ,CAAC,CACH;CACF;CAEA,gBAAwB,GAAmC;EACzD,EAAE,gBAAgB;EAClB,KAAK,uBAAuB,EAAE,OAAO,IAAI;CAC3C;CAOA,SAAiB,OAAe,UAA0B;EACxD,MAAM,SAAS,OAAO,WAAW,KAAK;EACtC,OAAO,OAAO,SAAS,MAAM,IAAI,SAAS;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,MAAM,eAAe,KAAK,MAAM,OAAO,aAAa,CAAC;EACrD,MAAM,aAAa,KAAK,kBAAkB,KAAK,SAAS,KAAK,iBAAiB,YAAY,IAAI;EAE9F,OAAO,KAAK,IADE,KAAK,IAAI,YAAY,YACf,GAAG,KAAK,wBAAwB,CAAC;CACvD;CAEA,cAA+B;EAC7B,OAAO,KAAK,gBAAgB,WAAW,KAAK;CAC9C;CAEA,yBAAiC,GAAiB;EAChD,IAAI,CAAC,KAAK,oBAAoB,KAAK,oBAAoB,KAAK,WAAW,KAAK,YAAY,GAAG;EAE3F,IAAI,EAAE,cAAc,OAAO;EAE3B,MAAM,QAAQ,KAAK,WAAW,cAAc,OAAO;EACnD,IAAI,CAAC,OAAO;EAIZ,KAAK,oBAAoB,KAAK,SAAS,OAAO,iBAAiB,KAAK,CAAC,CAAC,OAAO,KAAK,SAAS,KAAK,cAAc,GAAG,CAAC;EAClH,KAAK,eAAe;EACpB,MAAM,UAAU,IAAI,aAAa;EAEjC,KAAK,iBAAiB,kBAAkB,GAAG;GACzC,MAAM;GACN,SAAQ,SAAQ;IAEd,MAAM,OAAO,KAAK,oBAAoB,KAAK;IAC3C,MAAM,UAAU,MAAM,MAAM,KAAK,wBAAwB,GAAG,KAAK,wBAAwB,CAAC;IAC1F,KAAK,eAAe,GAAG,KAAK,MAAM,OAAO,EAAE;GAC7C;GACA,aAAa;IAEX,IAAI,KAAK,iBAAiB,MAAM;KAC9B,KAAK,mBAAmB;KACxB;IACF;IACA,MAAM,QAAQ,KAAK;IACnB,KAAK,mBAAmB;IAExB,KAAK,cACH,IAAI,YAAY,wBAAwB;KACtC,QAAQ,EAAE,MAAM;KAChB,SAAS;KACT,UAAU;IACZ,CAAC,CACH;GACF;GACA,gBAAgB;IACd,KAAK,mBAAmB;GAC1B;EACF,CAAC;CACH;CAIA,qBAA6B;EAC3B,KAAK,gBAAgB,QAAQ;EAC7B,KAAK,iBAAiB;EACtB,KAAK,WAAW,cAAc,OAAO,CAAC,EAAE,UAAU,OAAO,aAAa;EACtE,KAAK,eAAe;CACtB;CAKA,qBAA6B,GAAkB;EAC7C,IAAI,CAAC,KAAK,oBAAoB,KAAK,oBAAoB,KAAK,WAAW,KAAK,YAAY,GAAG;EAE3F,MAAM,MAAM,KAAK,wBAAwB;EACzC,MAAM,MAAM,KAAK,wBAAwB;EACzC,MAAM,QAAQ,KAAK,WAAW,cAAc,OAAO;EACnD,MAAM,UAAU,KAAK,eACjB,KAAK,SAAS,KAAK,cAAc,GAAG,IACpC,KAAK,SAAS,QAAQ,OAAO,iBAAiB,KAAK,CAAC,CAAC,QAAQ,KAAK,cAAc,GAAG;EACvF,MAAM,OAAO,EAAE,WAAW,KAAK;EAC/B,IAAI,OAAsB;EAE1B,QAAQ,EAAE,KAAV;GACE,KAAK;IACH,OAAO,KAAK,IAAI,KAAK,UAAU,IAAI;IACnC;GACF,KAAK;IACH,OAAO,KAAK,IAAI,KAAK,UAAU,IAAI;IACnC;GACF,KAAK;IACH,OAAO;IACP;GACF,KAAK;IACH,OAAO;IACP;GACF,KAAK;IAEH,IAAI,KAAK,iBAAiB,MAAM;KAC9B,MAAM,QAAQ,KAAK;KACnB,KAAK,eAAe;KACpB,KAAK,cACH,IAAI,YAAY,wBAAwB;MAAE,QAAQ,EAAE,MAAM;MAAG,SAAS;MAAM,UAAU;KAAK,CAAC,CAC9F;IACF;IACA,EAAE,eAAe;IACjB;GACF,KAAK;IACH,KAAK,eAAe;IACpB,EAAE,eAAe;IACjB;GACF,SACE;EACJ;EACA,EAAE,eAAe;EACjB,KAAK,eAAe,GAAG,KAAK,MAAM,IAAI,EAAE;CAC1C;CAOA,kCAA0C;EACxC,KAAK,cAAc,oBAAoB,UAAU,KAAK,oBAAoB;EAE1E,KAAK,eAAe,OAAO,OAAO,eAAe,aAAa,OAAO,WAAW,qBAAqB,IAAI;EACzG,KAAK,cAAc,iBAAiB,UAAU,KAAK,oBAAoB;EACvE,KAAK,YAAY,KAAK,cAAc,WAAW,KAAK;CACtD;CAEA,oBAA6B;EAC3B,MAAM,kBAAkB;EACxB,KAAK,gCAAgC;EACrC,KAAU,eAAe,WAAW;GAClC,IAAI,KAAK,aAAa,KAAK,oBAAoB;EACjD,CAAC;CACH;CAEA,uBAAgC;EAC9B,MAAM,qBAAqB;EAC3B,KAAK,mBAAmB;EACxB,KAAK,cAAc,oBAAoB,UAAU,KAAK,oBAAoB;EAC1E,KAAK,eAAe;CACtB;CAEA,eAAwB;EACtB,KAAK,oBAAoB;CAC3B;CAEA,sBAA8B;EAC5B,KAAK,oBAAoB;CAC3B;CAEA,sBAA8B;EAE5B,MAAM,YADa,KAAK,WAAW,cAA+B,uBAEvD,CAAC,EACN,cAAc,CAAC,CAChB,MACC,SACE,KAAK,aAAa,KAAK,gBAAiB,KAAK,aAAa,KAAK,aAAa,CAAC,CAAC,KAAK,aAAa,KAAK,CACzG,KAAK;EACT,MAAM,SAAS,KAAK,YAAY,cAA2B,gBAAgB,KAAK;EAChF,KAAK,eAAe,UAAU,YAAY,SAAS,IAAI;CACzD;CAMA,WAA8B,SAAyB;EACrD,MAAM,WAAW,OAAO;EACxB,IAAI,QAAQ,IAAI,WAAW,KAAK,KAAK,WAAW,KAAK,mBAAmB;CAC1E;CAEA,SAAkB;EAChB,MAAM,cAAc,CAAC,KAAK;EAC1B,MAAM,gBAAgB,CAAC,KAAK;EAE5B,MAAM,eAAe,KAAK,UACtB,CAAC,IACD,EAAE,OAAO,KAAK,iBAAiB,KAAK,mBAAmB,KAAK,iBAAiB,KAAK,cAAc;EAEpG,MAAM,cAAc,uBAAuB,KAAK,YAAY,gBAAgB,oBAAoB,eAAe;EAE/G,MAAM,gBAAgB,KAAK,qBACvB,IAAI;;;;;sBAKU,KAAK,eAAe;yBACjB,YAAY;;;sBAGfC,2BAAgB;sBAChB,SAAS,EAAE,WAAW,gBAAgB,SAAS,aAAa,CAAC,EAAE;;;YAI7E;EAEJ,MAAM,kBAAkB,IAAI;;;;;EAM5B,MAAM,SAAS,IAAI;uBACA,SAAS,EAAE,YAAY,KAAK,WAAW,CAAC,EAAE;UAEvD,KAAK,WAAW,cACZ,IAAI;;;;;4BAKU,KAAK,eAAe;+BACjB,uBAAuB,KAAK,YAAY,oBAAoB,EAAE;;uCAEtDC,yCAA6B;;kBAGtD,QACL;;;;EAKL,MAAM,gBAAgB,IAAI;;UAEpB,OAAO;;;;;EAMb,MAAM,gBAAgB,IAAI;;;;qBAIT,SAAS,EAChB,WAAW,CAAC,cACd,CAAC,EAAE;qBACM,SAAS,YAAY,EAAE;;;gBAG5B,gBAAgB;gBAChB,KAAK,qBAAqB,IAAI,oCAAoC,cAAc,UAAU,QAAQ;;cAGpG,KAAK,oBAAoB,CAAC,KAAK,mBAC3B,IAAI;;;;;;mCAMa,uBAAuB,KAAK,YAAY,eAAe,EAAE;qCACvD,KAAK,yBAAyB;iCAClC,KAAK,qBAAqB;;sBAGzC,QACL;;;UAGH,cAAc;;;EAIpB,MAAM,eAAe,IAAI;;;iBAGZ,KAAK,YAAY;;;4BAGN,uBAAuB,KAAK,YAAY,gBAAgB,EAAE;wBAC9D,KAAK,gBAAgB;iBAC5B,SAAS;GAChB,sBAAsB,KAAK;GAC3B,uBAAuB;EACzB,CAAC,EAAE;;UAED,gBAAgB;;;EAQtB,MAAM,aAAa,cACf,KAAK,UACH,IAAI,GAAG,gBAAgB,iBACvB,gBACF;EAEJ,OAAO,IAAI;;;6CAG8B,KAAK,oBAAoB;;UAE5D,WAAW;;;CAGnB;AAQF;AA/eG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAc,SAAS;AAAK,CAAC,CAAA,GAAA,YAAA,WAAA,aAAA,KAAA,CAAA;AAUlE,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAuB,SAAS;AAAK,CAAC,CAAA,GAAA,YAAA,WAAA,sBAAA,KAAA,CAAA;AAc3E,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAqB,SAAS;AAAK,CAAC,CAAA,GAAA,YAAA,WAAA,oBAAA,KAAA,CAAA;AAGzE,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAiB,SAAS;AAAK,CAAC,CAAA,GAAA,YAAA,WAAA,gBAAA,KAAA,CAAA;AAGpE,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAmB,SAAS;AAAK,CAAC,CAAA,GAAA,YAAA,WAAA,kBAAA,KAAA,CAAA;AAItE,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAqB,SAAS;AAAK,CAAC,CAAA,GAAA,YAAA,WAAA,oBAAA,KAAA,CAAA;AAOzE,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAqB,SAAS;AAAK,CAAC,CAAA,GAAA,YAAA,WAAA,mBAAA,KAAA,CAAA;AAIxE,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAqB,SAAS;AAAK,CAAC,CAAA,GAAA,YAAA,WAAA,mBAAA,KAAA,CAAA;AASxE,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAgB,SAAS;AAAK,CAAC,CAAA,GAAA,YAAA,WAAA,eAAA,KAAA,CAAA;AAGpE,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAe,SAAS;AAAK,CAAC,CAAA,GAAA,YAAA,WAAA,cAAA,KAAA,CAAA;AAInE,WAAA,CAAA,SAAS,EAAE,WAAW,MAAM,CAAC,CAAA,GAAA,YAAA,WAAA,cAAA,KAAA,CAAA;AAQ7B,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,WAAW;CAAU,SAAS;AAAK,CAAC,CAAA,GAAA,YAAA,WAAA,WAAA,KAAA,CAAA;AAmG9D,WAAA,CAAA,MAAM,CAAA,GAAA,YAAA,WAAA,gBAAA,KAAA,CAAA;AAnLR,cAAA,WAAA,CAAA,cAAc,eAAe,CAAA,GAAA,WAAA"}

package/dist/components/layout/style.js CHANGED Viewed

@@ -1,5 +1,5 @@
 // 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";
+var style_default = "*,:before,:after{box-sizing:border-box}:host{--wui-layout-visible-banner-height:0px;--wui-internal-layout-viewport-height:var(--wui-layout-viewport-height,100vh);display:block}.layout-page{min-height:var(--wui-internal-layout-viewport-height);flex-direction:column;display:flex}.layout-banner{z-index:var(--wui-layer-banner,300);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,500);max-width:50vw;height:calc(var(--wui-internal-layout-viewport-height) - var(--wui-layout-visible-banner-height));max-height:calc(var(--wui-internal-layout-viewport-height) - 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,36px);margin:var(--wui-space-2,8px)}aside.collapsed .sidebar-viewport{overflow:hidden}@supports (height:100dvh){:host{--wui-internal-layout-viewport-height:var(--wui-layout-viewport-height,100dvh)}}.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,100);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,400);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