@greypan/web-ui 9.0.0 → 9.1.0

package/dist/components/context-menu/scrim.js.map

@@ -1 +1 @@
-{"version":3,"file":"scrim.js","names":[],"sources":["../../../src/components/context-menu/scrim.css?inline"],"sourcesContent":["/*\n * context-menu 的模态 scrim。以内联 style 子节点挂在 scrim 元素自身，随 scrim 一起摘除。\n *\n * 三条硬约束，改动前先读：\n *\n * 1. **绝不能**出现 transform / filter / contain / backdrop-filter / will-change /\n *    perspective。菜单面板是 `position: fixed` + Floating UI `strategy: 'fixed'`，\n *    上面任意一条都会让 scrim 成为 fixed 的包含块，Floating UI 返回的坐标随即整体偏移。\n *    drawer 的 dialog 带着 `transform: translate(0,0)`，`_positionSubmenu` 里的\n *    `instanceof HTMLDialogElement && .open` 分支正是为那种情况才存在的。\n *\n * 2. 盒子必须**精确铺满视口**（下面把 margin / max-* / padding / border 全部清零）。\n *    Floating UI 的 `strategy: 'fixed'` 会把最近的 `position: fixed` 祖先当作 offsetParent，\n *    scrim 正是这样一个祖先 —— 它返回的坐标是**相对 scrim padding box** 的。\n *    padding box 与视口逐像素相等时两套坐标系恰好重合，位置才对。默认 UA 的\n *    `dialog:modal` 带 `margin: auto` 与 `max-width: calc(100% - 6px - 2em)`，\n *    会让 scrim 居中且比视口小一圈 —— 那是静默偏移，测试里必须用几何断言钉住。\n *\n * 3. 视觉上保持透明。scrim 的职责是**吃掉下层命中**（点外面必关菜单，且下层收不到这次\n *    click），不是给页面加一层遮罩变暗。给上下文菜单加全屏压暗会与 dialog / drawer 的\n *    遮罩语义混淆，而它们是有可见边框的实体卡片。\n *    **「保持透明」必须同时管住元素与 ::backdrop**，两者是各自独立的绘制层，见下方规则。\n */\ndialog.wui-context-menu-scrim {\n  position: fixed;\n  inset: 0;\n\n  /* 面板是 fixed，不在流内；UA 的 overflow: auto 在此既无内容可滚，也会引入滚动条。 */\n  overflow: visible;\n\n  width: auto;\n  max-width: none;\n  height: auto;\n  max-height: none;\n  margin: 0;\n  padding: 0;\n  border: 0;\n\n  color: inherit;\n\n  /* 透明底：不加变暗遮罩，理由见文件头第 3 条。 */\n  background: transparent;\n}\n\n/*\n * `::backdrop` 必须单独清，否则整屏蒙一层 10% 黑。\n *\n * 它是独立伪元素，**不继承**元素的 background：上面那条 `background: transparent`\n * 只作用于元素本身，`showModal()` 一开 UA 照样按 `dialog::backdrop` 的默认值画\n * `rgba(0, 0, 0, 0.1)`。真机表现为「菜单一打开整页灰了一层」，而元素级检查\n * （scrim 的 background / filter / backdrop-filter 全是透明或 none）完全查不出来 ——\n * 那层颜色根本不在元素上。\n *\n * drawer / dialog 的 ::backdrop 是**有意**的实体卡片遮罩，不要照抄它们的取值；\n * context-menu 按裁定不压暗，这里是纯透明。\n */\ndialog.wui-context-menu-scrim::backdrop {\n  background: transparent;\n}\n\n/*\n * 菜单项激活触发的关闭会**提前**出顶层（见 index.ts 的 `_releaseScrimModality`）：\n * 此刻焦点还在菜单里，UA 的焦点归还正好落在 opener 上；等退场结束再让顶层就晚了，\n * 那时焦点已经被应用送走，归还会把它拽回来 blur 掉编辑器。\n *\n * scrim 元素本身必须留到面板真正被摘除 —— 面板挂在它里面，一起摘掉就没有退场动画了。\n * 而 UA 的 `dialog:not([open]) { display: none }` 会把面板一起藏掉，所以这里显式恢复可见。\n *\n * 代价是这个尾巴上 scrim 已经在 top layer 之外：下层恢复可命中，面板的层级退回普通流。\n * 尾巴只有一次退场过渡的时长（默认 160ms），且只发生在菜单项激活时。\n */\ndialog.wui-context-menu-scrim:not([open]) {\n  display: block;\n}\n"],"mappings":""}
+{"version":3,"file":"scrim.js","names":[],"sources":["../../../src/components/context-menu/scrim.css?inline"],"sourcesContent":["/*\n * context-menu 的模态 scrim。以内联 style 子节点挂在 scrim 元素自身，随 scrim 一起摘除。\n *\n * 三条硬约束，改动前先读：\n *\n * 1. **绝不能**出现 transform / filter / contain / backdrop-filter / will-change /\n *    perspective。菜单面板是 `position: fixed` + Floating UI `strategy: 'fixed'`，\n *    上面任意一条都会让 scrim 成为 fixed 的包含块，Floating UI 返回的坐标随即整体偏移。\n *    drawer 的 dialog 带着 `transform: translate(0,0)`，`_positionSubmenu` 里的\n *    `instanceof HTMLDialogElement && .open` 分支正是为那种情况才存在的。\n *\n * 2. 盒子必须**精确铺满视口**（下面把 margin / max-* / padding / border 全部清零）。\n *    Floating UI 的 `strategy: 'fixed'` 会把最近的 `position: fixed` 祖先当作 offsetParent，\n *    scrim 正是这样一个祖先 —— 它返回的坐标是**相对 scrim padding box** 的。\n *    padding box 与视口逐像素相等时两套坐标系恰好重合，位置才对。默认 UA 的\n *    `dialog:modal` 带 `margin: auto` 与 `max-width: calc(100% - 6px - 2em)`，\n *    会让 scrim 居中且比视口小一圈 —— 那是静默偏移，测试里必须用几何断言钉住。\n *\n * 3. 视觉上保持透明。scrim 的职责是**吃掉下层命中**（点外面必关菜单，且下层收不到这次\n *    click），不是给页面加一层遮罩变暗。给上下文菜单加全屏压暗会与 dialog / drawer 的\n *    遮罩语义混淆，而它们是有可见边框的实体卡片。\n *    **「保持透明」必须同时管住元素与 ::backdrop**，两者是各自独立的绘制层，见下方规则。\n */\ndialog.wui-context-menu-scrim {\n  position: fixed;\n  inset: 0;\n\n  /* 面板是 fixed，不在流内；UA 的 overflow: auto 在此既无内容可滚，也会引入滚动条。 */\n  overflow: visible;\n\n  width: auto;\n  max-width: none;\n  height: auto;\n  max-height: none;\n  margin: 0;\n  padding: 0;\n  border: 0;\n\n  color: inherit;\n\n  /* 透明底：不加变暗遮罩，理由见文件头第 3 条。 */\n  background: transparent;\n}\n\n/*\n * `::backdrop` 必须单独清，否则整屏蒙一层 10% 黑。\n *\n * 它是独立伪元素，**不继承**元素的 background：上面那条 `background: transparent`\n * 只作用于元素本身，`showModal()` 一开 UA 照样按 `dialog::backdrop` 的默认值画\n * `rgba(0, 0, 0, 0.1)`。真机表现为「菜单一打开整页灰了一层」，而元素级检查\n * （scrim 的 background / filter / backdrop-filter 全是透明或 none）完全查不出来 ——\n * 那层颜色根本不在元素上。\n *\n * drawer / dialog 的 ::backdrop 是**有意**的实体卡片遮罩，不要照抄它们的取值；\n * context-menu 按裁定不压暗，这里是纯透明。\n */\ndialog.wui-context-menu-scrim::backdrop {\n  background: transparent;\n}\n\n/*\n * 菜单项激活触发的关闭会**提前**出顶层（见 index.ts 的 `_releaseScrimModality`）：\n * 此刻焦点还在菜单里，UA 的焦点归还正好落在 opener 上；等退场结束再让顶层就晚了，\n * 那时焦点已经被应用送走，归还会把它拽回来 blur 掉编辑器。\n *\n * scrim 元素本身必须留到面板真正被摘除 —— 面板挂在它里面，一起摘掉就没有退场动画了。\n * 而 UA 的 `dialog:not([open]) { display: none }` 会把面板一起藏掉，所以这里显式恢复可见。\n *\n * 代价是这个尾巴上 scrim 已经在 top layer 之外：下层恢复可命中，面板的层级退回普通流。\n * 尾巴只有一次退场过渡的时长（默认 160ms），且只发生在菜单项激活时。\n */\ndialog.wui-context-menu-scrim:not([open]) {\n  display: block;\n}\n\n/*\n * scrim 是模态表面，不是可聚焦控件：`showModal()` 的 focusing steps 在面板还没挂进去时\n * 会把焦点交给 scrim 本身，键盘路径下 UA 会给它画一枚默认 ring（整屏一圈蓝框）。\n * 与 dialog / drawer 同一条策略（见 assets/modal-surface.css）；这里就地收口，因为\n * scrim 的样式是注入到 theme overlay root / body 的独立样式表，够不到组件 shadow 内的共享层。\n */\ndialog.wui-context-menu-scrim:focus,\ndialog.wui-context-menu-scrim:focus-visible {\n  outline: none;\n}\n"],"mappings":""}

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

@@ -37,9 +37,9 @@ export declare class WebUiDialog extends LitElement {
     private _syncScrollLock;
     private _onBodySlotChange;
     /**
-     * 两种内容模式的关闭按钮位置不同：`inline` 参与 `.title-row` 的 flex 布局，
-     * `floating` 绝对定位到卡片右上角。分开命名而不是靠 CSS 就近覆盖，
-     * 是为了让每种模式的几何只由一个 class 决定。
+     * 两种内容模式共用同一枚关闭按钮：都绝对定位到卡片右上角，偏移由
+     * `--wui-dialog-close-top` / `--wui-dialog-close-right` 控制（见 style.css）。
+     * 标题模式只是把它放在 `.title-row` 的 DOM 位置，定位参照仍是卡片本身。
      */
     private _renderCloseButton;
     render(): import('lit').TemplateResult<1>;

package/dist/components/dialog/index.js

@@ -7,17 +7,18 @@ import { dispatchOpenChangeEvent as r } from "../../shared/open-state/index.js";
 import { defineOpenOverlay as i } from "../../shared/overlay/open-overlay.js";
 import { defineScrollLockLease as a } from "../../shared/scroll-lock/scroll-lock.js";
 import { UserChangeController as o } from "../../shared/events/user-change.js";
-import { defineNativeDialogPresence as s } from "../../shared/overlay/native-dialog-presence.js";
-import c from "./style.js";
-import { LitElement as l, html as u, nothing as d, unsafeCSS as f } from "lit";
-import { customElement as p, property as m, state as h } from "lit/decorators.js";
+import s from "../../assets/modal-surface.js";
+import { defineNativeDialogPresence as c } from "../../shared/overlay/native-dialog-presence.js";
+import l from "./style.js";
+import { LitElement as u, html as d, nothing as f, unsafeCSS as p } from "lit";
+import { customElement as m, property as h, state as g } from "lit/decorators.js";
 //#region src/components/dialog/index.ts
-var g = class extends l {
+var _ = class extends u {
 	constructor(...e) {
 		super(...e), this.open = !1, this.closable = !1, this.noScrollLock = !1, this.noBackdropClose = !1, this.noEscapeClose = !1, this.controlled = !1, this._hasBody = !1, this._userOpenChange = new o(), this._overlay = i().make({
 			requestClose: () => this._closeFromUser(),
 			isConnected: () => this.isConnected
-		}), this._handle = null, this._scrollLock = a().make(), this._presence = s().make({
+		}), this._handle = null, this._scrollLock = a().make(), this._presence = c().make({
 			getDialog: () => this.dialog,
 			isConnected: () => this.isConnected,
 			isOpen: () => this.open
@@ -44,7 +45,11 @@ var g = class extends l {
 		};
 	}
 	static {
-		this.styles = [f(t), f(c)];
+		this.styles = [
+			p(t),
+			p(s),
+			p(l)
+		];
 	}
 	get dialog() {
 		return this.shadowRoot?.querySelector("dialog") ?? null;
@@ -94,10 +99,10 @@ var g = class extends l {
 	_onBodySlotChange(e) {
 		e.target instanceof HTMLSlotElement && (this._hasBody = e.target.assignedElements().length > 0);
 	}
-	_renderCloseButton(e) {
-		return u`
+	_renderCloseButton() {
+		return d`
       <web-ui-button
-        class="wui-dialog-close wui-dialog-close-${e}"
+        class="wui-dialog-close"
         @click=${this._closeFromUser}
         aria-label="关闭"
         variant="secondary"
@@ -109,7 +114,7 @@ var g = class extends l {
     `;
 	}
 	render() {
-		return u`
+		return d`
       <dialog
         @cancel=${this.handleCancel}
         @close=${this._onNativeClose}
@@ -117,17 +122,19 @@ var g = class extends l {
         @transitionend=${this._onTransitionEnd}
       >
         <div class="wui-dialog-body wui-glass">
-          ${this._hasBody ? u`
-                  <slot name="body" @slotchange=${this._onBodySlotChange}></slot>
-                  ${this.closable ? this._renderCloseButton("floating") : d}
-                ` : u`
+          ${this._hasBody ? d`
+                  <div class="wui-dialog-content">
+                    <slot name="body" @slotchange=${this._onBodySlotChange}></slot>
+                  </div>
+                  ${this.closable ? this._renderCloseButton() : f}
+                ` : d`
                   <slot name="body" @slotchange=${this._onBodySlotChange} hidden></slot>
-                  ${this.closable ? u`
+                  ${this.closable ? d`
                           <div class="title-row">
                             <div class="title"><slot name="title"></slot></div>
-                            ${this._renderCloseButton("inline")}
+                            ${this._renderCloseButton()}
                           </div>
-                        ` : u`<div class="title"><slot name="title"></slot></div>`}
+                        ` : d`<div class="title"><slot name="title"></slot></div>`}
                   <div class="desc"><slot></slot></div>
                   <div class="wui-dialog-footer"><slot name="footer"></slot></div>
                 `}
@@ -136,29 +143,29 @@ var g = class extends l {
     `;
 	}
 };
-e([m({
+e([h({
 	type: Boolean,
 	reflect: !0
-})], g.prototype, "open", void 0), e([m({
+})], _.prototype, "open", void 0), e([h({
 	type: Boolean,
 	reflect: !0
-})], g.prototype, "closable", void 0), e([m({
+})], _.prototype, "closable", void 0), e([h({
 	type: Boolean,
 	reflect: !0,
 	attribute: "no-scroll-lock"
-})], g.prototype, "noScrollLock", void 0), e([m({
+})], _.prototype, "noScrollLock", void 0), e([h({
 	type: Boolean,
 	reflect: !0,
 	attribute: "no-backdrop-close"
-})], g.prototype, "noBackdropClose", void 0), e([m({
+})], _.prototype, "noBackdropClose", void 0), e([h({
 	type: Boolean,
 	reflect: !0,
 	attribute: "no-escape-close"
-})], g.prototype, "noEscapeClose", void 0), e([m({
+})], _.prototype, "noEscapeClose", void 0), e([h({
 	type: Boolean,
 	reflect: !0
-})], g.prototype, "controlled", void 0), e([h()], g.prototype, "_hasBody", void 0), g = e([p("web-ui-dialog")], g);
+})], _.prototype, "controlled", void 0), e([g()], _.prototype, "_hasBody", void 0), _ = e([m("web-ui-dialog")], _);
 //#endregion
-export { g as WebUiDialog };
+export { _ as WebUiDialog };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/dialog/index.ts"],"sourcesContent":["import { html, LitElement, nothing, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport '@/components/icon'\nimport '@/components/button'\nimport glass from '@/assets/glass.css?inline'\nimport { oouiClose } from '@/icons'\nimport { UserChangeController } from '@/shared/events/user-change'\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(style)]\n\n  @property({ type: Boolean, reflect: true }) open = false\n  @property({ type: Boolean, reflect: true }) closable = 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 和遮罩点击只派发 `open-change` 请求，\n   * 不会自行修改 `open`。Consumer 回写 `open` 后才执行关闭动画。\n   * 程序化 API（showModal/close/直接赋值 open）不受此模式影响，始终直通。\n   */\n  @property({ type: Boolean, reflect: true }) controlled = false\n\n  @state() private _hasBody = false\n  private readonly _userOpenChange = new UserChangeController()\n\n  /*\n   * 开启态浮层（issue #120 Block 1）。dialog 的 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  /** 当前开启会话的句柄；未开启时为 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        // 遮罩后面本来也已不可用。这里只清文档选区，不动 user-select，浮层内正文\n        // 仍可正常拖选。\n        window.getSelection()?.removeAllRanges()\n      }\n      // 原生 dialog 登记为开启态浮层：挂在它上面的 portal 面板成为本层后代，\n      // Escape 仲裁据此判出最内层（issue #120 Block 1）。\n      const dialog = this.dialog\n      if (dialog) {\n        if (this.open) {\n          // 同一面板重新 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   * 不走关闭入口。与旧的「跳过候选」语义不同：旧语义放任事件落到下层浮层，把外层\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 不关闭对话框」与 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  /** 用户发起的关闭入口（Escape、遮罩点击、关闭按钮）共用一条路径。 */\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  private _onBodySlotChange(e: Event) {\n    if (!(e.target instanceof HTMLSlotElement)) return\n    this._hasBody = e.target.assignedElements().length > 0\n  }\n\n  /**\n   * 两种内容模式的关闭按钮位置不同：`inline` 参与 `.title-row` 的 flex 布局，\n   * `floating` 绝对定位到卡片右上角。分开命名而不是靠 CSS 就近覆盖，\n   * 是为了让每种模式的几何只由一个 class 决定。\n   */\n  private _renderCloseButton(modifier: 'inline' | 'floating') {\n    return html`\n      <web-ui-button\n        class=\"wui-dialog-close wui-dialog-close-${modifier}\"\n        @click=${this._closeFromUser}\n        aria-label=\"关闭\"\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    return html`\n      <dialog\n        @cancel=${this.handleCancel}\n        @close=${this._onNativeClose}\n        @click=${this.handleBackdropClick}\n        @transitionend=${this._onTransitionEnd}\n      >\n        <div class=\"wui-dialog-body wui-glass\">\n          ${\n            this._hasBody\n              ? html`\n                  <slot name=\"body\" @slotchange=${this._onBodySlotChange}></slot>\n                  ${this.closable ? this._renderCloseButton('floating') : nothing}\n                `\n              : html`\n                  <slot name=\"body\" @slotchange=${this._onBodySlotChange} hidden></slot>\n                  ${\n                    this.closable\n                      ? html`\n                          <div class=\"title-row\">\n                            <div class=\"title\"><slot name=\"title\"></slot></div>\n                            ${this._renderCloseButton('inline')}\n                          </div>\n                        `\n                      : html`<div class=\"title\"><slot name=\"title\"></slot></div>`\n                  }\n                  <div class=\"desc\"><slot></slot></div>\n                  <div class=\"wui-dialog-footer\"><slot name=\"footer\"></slot></div>\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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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/dialog/index.ts"],"sourcesContent":["import { html, LitElement, nothing, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport '@/components/icon'\nimport '@/components/button'\nimport glass from '@/assets/glass.css?inline'\nimport modalSurface from '@/assets/modal-surface.css?inline'\nimport { oouiClose } from '@/icons'\nimport { UserChangeController } from '@/shared/events/user-change'\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(style)]\n\n  @property({ type: Boolean, reflect: true }) open = false\n  @property({ type: Boolean, reflect: true }) closable = 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 和遮罩点击只派发 `open-change` 请求，\n   * 不会自行修改 `open`。Consumer 回写 `open` 后才执行关闭动画。\n   * 程序化 API（showModal/close/直接赋值 open）不受此模式影响，始终直通。\n   */\n  @property({ type: Boolean, reflect: true }) controlled = false\n\n  @state() private _hasBody = false\n  private readonly _userOpenChange = new UserChangeController()\n\n  /*\n   * 开启态浮层（issue #120 Block 1）。dialog 的 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  /** 当前开启会话的句柄；未开启时为 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        // 遮罩后面本来也已不可用。这里只清文档选区，不动 user-select，浮层内正文\n        // 仍可正常拖选。\n        window.getSelection()?.removeAllRanges()\n      }\n      // 原生 dialog 登记为开启态浮层：挂在它上面的 portal 面板成为本层后代，\n      // Escape 仲裁据此判出最内层（issue #120 Block 1）。\n      const dialog = this.dialog\n      if (dialog) {\n        if (this.open) {\n          // 同一面板重新 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   * 不走关闭入口。与旧的「跳过候选」语义不同：旧语义放任事件落到下层浮层，把外层\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 不关闭对话框」与 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  /** 用户发起的关闭入口（Escape、遮罩点击、关闭按钮）共用一条路径。 */\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  private _onBodySlotChange(e: Event) {\n    if (!(e.target instanceof HTMLSlotElement)) return\n    this._hasBody = e.target.assignedElements().length > 0\n  }\n\n  /**\n   * 两种内容模式共用同一枚关闭按钮：都绝对定位到卡片右上角，偏移由\n   * `--wui-dialog-close-top` / `--wui-dialog-close-right` 控制（见 style.css）。\n   * 标题模式只是把它放在 `.title-row` 的 DOM 位置，定位参照仍是卡片本身。\n   */\n  private _renderCloseButton() {\n    return html`\n      <web-ui-button\n        class=\"wui-dialog-close\"\n        @click=${this._closeFromUser}\n        aria-label=\"关闭\"\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    return html`\n      <dialog\n        @cancel=${this.handleCancel}\n        @close=${this._onNativeClose}\n        @click=${this.handleBackdropClick}\n        @transitionend=${this._onTransitionEnd}\n      >\n        <div class=\"wui-dialog-body wui-glass\">\n          ${\n            this._hasBody\n              ? html`\n                  <div class=\"wui-dialog-content\">\n                    <slot name=\"body\" @slotchange=${this._onBodySlotChange}></slot>\n                  </div>\n                  ${this.closable ? this._renderCloseButton() : nothing}\n                `\n              : html`\n                  <slot name=\"body\" @slotchange=${this._onBodySlotChange} hidden></slot>\n                  ${\n                    this.closable\n                      ? html`\n                          <div class=\"title-row\">\n                            <div class=\"title\"><slot name=\"title\"></slot></div>\n                            ${this._renderCloseButton()}\n                          </div>\n                        `\n                      : html`<div class=\"title\"><slot name=\"title\"></slot></div>`\n                  }\n                  <div class=\"desc\"><slot></slot></div>\n                  <div class=\"wui-dialog-footer\"><slot name=\"footer\"></slot></div>\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

@@ -1,5 +1,5 @@
 //#region src/components/dialog/style.css?inline
-var e = "*,: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:has(.desc){flex-direction:column;display:flex}dialog:focus,dialog:focus-visible{outline:none}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-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(160%) brightness(var(--wui-glass-brightness,1.06));backdrop-filter:blur(0) saturate(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))}.wui-dialog-body:has(.desc){grid-template-rows:auto minmax(0,1fr) auto;min-height:0;display:grid}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(4px) saturate(160%) brightness(var(--wui-glass-brightness,1.06));backdrop-filter:blur(4px) saturate(160%) brightness(var(--wui-glass-brightness,1.06))}.wui-dialog-close-inline{flex:none}.wui-dialog-close-floating{z-index:3;top:var(--wui-dialog-close-top,var(--wui-space-4,16px));right:var(--wui-dialog-close-right,16px);position:absolute}.title-row{gap:var(--wui-space-3,12px);justify-content:space-between;align-items:flex-start;display:flex}@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)}}.title{margin:0 0 var(--wui-dialog-title-gap,var(--wui-space-4,16px));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);padding:0}.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)));margin-inline:calc(-1 * var(--wui-dialog-desc-focus-padding,6px));padding-block:var(--wui-dialog-desc-focus-padding,6px);padding-inline:var(--wui-dialog-desc-focus-padding,6px);font-size:var(--wui-font-size,14px);line-height:var(--wui-line-height-normal,1.5);color:var(--wui-color-text,#1b1b1b);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);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}";
+var e = "*,: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: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(160%) brightness(var(--wui-glass-brightness,1.06));backdrop-filter:blur(0) saturate(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))}.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(4px) saturate(160%) brightness(var(--wui-glass-brightness,1.06));backdrop-filter:blur(4px) saturate(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}.title-row{gap:var(--wui-space-3,12px);justify-content:space-between;align-items:flex-start;display:flex}@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)}}.title{margin:0 0 var(--wui-dialog-title-gap,var(--wui-space-4,16px));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);padding:0}:host([closable]) .title{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)));margin-inline:calc(-1 * var(--wui-dialog-desc-focus-padding,6px));padding-block:var(--wui-dialog-desc-focus-padding,6px);padding-inline:var(--wui-dialog-desc-focus-padding,6px);font-size:var(--wui-font-size,14px);line-height:var(--wui-line-height-normal,1.5);color:var(--wui-color-text,#1b1b1b);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);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}";
 //#endregion
 export { e as default };
 

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

@@ -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 里的\n     modal dialog 变成按文档流定位：渲染在页面顶部（用户看到的“残影”）且跟随页面\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。方向与浮动面板的 --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 会让遮罩在卡片落位后才走完大半透明度。 */\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 高度：AddDialog / RestoreDialog 都写\n   `height: min(calc(82vh - 108px), calc(var(--wui-dialog-max-height, 560px) - 108px))`\n   （改动前的写法，见 base b6b7eb34；这两处宿主已按新语义转换），\n   而那 108 里的 footer 一项就是 --wui-control-size——触摸端\n   `@media (pointer: coarse)` 把它从 36px 抬到 40px，chrome 随之长高，宿主的常数立刻腐坏。\n\n   现在 header / footer 完全由内容撑开，上限只落在 .desc。修掉的是「宿主必须知道 chrome\n   才能让内容区滚起来」：改动前 .desc 既没有上限也没有 overflow，内容超高时直接把卡片\n   顶出 dialog 盒子，唯一能滚的地方是宿主自己用 `min(calc(82vh - 108px), …)` 之类的\n   内层 height 撑出来的那一块。现在上限与滚动都归 .desc，宿主不必再为「让它滚」而算。\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   只对 **title 模式**生效——body 模式（走 slot=\"body\"、没有 .desc）的**卡片尺寸**不变。\n   但位置不保证：`dialog` 的整卡兜底从 min(90vh, 90dvh) 收紧到字面量 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 因此撑不满、两栏不等高。 */\ndialog:has(.desc) {\n  display: flex;\n  flex-direction: column;\n}\n\n/* 面板本身是模态表面，不作为可聚焦控件；Safari showModal() 会把焦点放到 dialog，不应画 UA ring。内部控件保留 focus ring。 */\ndialog:focus,\ndialog:focus-visible {\n  outline: none;\n}\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-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  padding: var(--wui-dialog-padding, var(--wui-space-5, 20px) var(--wui-space-6, 24px) var(--wui-space-6, 24px));\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(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 容器：title 与 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()` 的特异度高于类选择器，合并会让\n   「仅 title 模式变 grid」变成「所有模式都变 grid」，那会改掉 body 模式的几何\n   （实测高内容 body 的卡片会从 3044 被夹到 896）。位置也受 stylelint\n   no-descending-specificity 约束：须排在基础规则之后、dialog.is-closing 之前。 */\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\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   * body 模式的关闭按钮浮在卡片右上角，需要一个定位参照，所以显式重述一次\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 都早于本轮存在。\n   */\n  position: relative;\n}\n\ndialog[open].is-visible .wui-dialog-body {\n  opacity: 1;\n  backdrop-filter: blur(4px) saturate(160%) brightness(var(--wui-glass-brightness, 1.06));\n}\n\n/* inline：.title-row 的 flex 子项，与标题同行。 */\n.wui-dialog-close-inline {\n  flex: none;\n}\n\n/* floating：body 模式下浮在卡片右上角。 */\n.wui-dialog-close-floating {\n  position: absolute;\n  z-index: 3;\n  top: var(--wui-dialog-close-top, var(--wui-space-4, 16px));\n  right: var(--wui-dialog-close-right, 16px);\n}\n\n/*\n * 标题行只在 closable 时出现，因此 .title 自身的 margin-bottom 语义不变：\n * 它仍由 .title-row 的行高承担，行高 = 标题外高（含 16px 下边距）。\n */\n.title-row {\n  display: flex;\n  gap: var(--wui-space-3, 12px);\n  align-items: flex-start;\n  justify-content: space-between;\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.title {\n  margin: 0 0 var(--wui-dialog-title-gap, var(--wui-space-4, 16px));\n  padding: 0;\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.desc {\n  /* 横向显式 clip 而非留默认的 visible：一旦本轴成为滚动容器，另一轴的 visible 会被\n     计算成 auto，宿主内容横向溢出时就会多出一条不该出现的横向滚动条。\n     Chromium / WebKit 实测：clip 与本规则下面的 auto 配对时计算值会降级成 hidden\n     （仍可被脚本滚动）。Firefox ≥128 不做这个降级、保持 clip，但仓库的 browser-mode\n     项目只跑 chromium，这句未经本仓 CI 证实。两个引擎都不画横向滚动条，所以这里\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 余量：四个轴一视同仁，成对负 margin 原样扣回 =====\n\n     .desc 既是滚动容器又是裁剪盒（clip），贴在内容区任一沿的控件，其 ring\n     （offset 2 + width 3 = 5px）会被 padding box 裁掉；留 6px 余 1px。少补任何一条轴，\n     那一侧的 ring 就会退化成 1px 残条——只补 `padding-block` 的那版，全宽控件的左右环\n     就是这样被裁掉的（改动前 `.desc` 没有 overflow，最近裁剪祖先是 NONE，所以这是本轮\n     新引入的裁剪，不是既有限制）。\n\n     四条 padding 各配一条等量负 margin，把这 12px×2 从外部间距里扣回去，border box\n     回到改动前的样子，content box 的宽/高也不变（负 margin 让盒子外扩，padding 原样\n     吃回去）。所以 title→内容、内容→footer、内容与卡片左右沿的视觉间距与改动前逐像素\n     相同，宿主内层 grid 的可用尺寸也不变——后者是横向余量最该守住的不变量，否则\n     AddDialog 那种两栏 grid 的 drop zone 会换行（实测见\n     __tests__/dialog-content-height.browser.spec.ts 的「focus-ring 余量覆盖四条轴」）。\n\n     取舍，是取舍不是疏漏：负 margin 让 `.desc` 的 border box 溢出滚动内容区，所以\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\n     横向不需要同样的兜底：margin-inline 恒为 -focus-padding，没有第二个公开 token 参与\n     减法。它与卡片 inline padding（默认 24px）的关系是「focus-padding 不应超过该\n     padding，否则 .desc 会横向溢出卡片」，由上面那段注释交代。 */\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: calc(-1 * var(--wui-dialog-desc-focus-padding, 6px));\n  padding-block: var(--wui-dialog-desc-focus-padding, 6px);\n  padding-inline: var(--wui-dialog-desc-focus-padding, 6px);\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），使未覆写的 dialog 视觉高度与改动前一致：\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  & ::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":""}
+{"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 里的\n     modal dialog 变成按文档流定位：渲染在页面顶部（用户看到的“残影”）且跟随页面\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。方向与浮动面板的 --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 会让遮罩在卡片落位后才走完大半透明度。 */\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 高度：AddDialog / RestoreDialog 都写\n   `height: min(calc(82vh - 108px), calc(var(--wui-dialog-max-height, 560px) - 108px))`\n   （改动前的写法，见 base b6b7eb34；这两处宿主已按新语义转换），\n   而那 108 里的 footer 一项就是 --wui-control-size——触摸端\n   `@media (pointer: coarse)` 把它从 36px 抬到 40px，chrome 随之长高，宿主的常数立刻腐坏。\n\n   现在 header / footer 完全由内容撑开，上限只落在 .desc。修掉的是「宿主必须知道 chrome\n   才能让内容区滚起来」：改动前 .desc 既没有上限也没有 overflow，内容超高时直接把卡片\n   顶出 dialog 盒子，唯一能滚的地方是宿主自己用 `min(calc(82vh - 108px), …)` 之类的\n   内层 height 撑出来的那一块。现在上限与滚动都归 .desc，宿主不必再为「让它滚」而算。\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   只对 **title 模式**生效——body 模式（走 slot=\"body\"、没有 .desc）的**卡片尺寸**不变。\n   但位置不保证：`dialog` 的整卡兜底从 min(90vh, 90dvh) 收紧到字面量 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 因此撑不满、两栏不等高。 */\ndialog:has(.desc) {\n  display: flex;\n  flex-direction: column;\n}\n\n/* 模态表面的焦点环抑制（<dialog> 壳 + 面板滚动区）集中在 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  padding: var(--wui-dialog-padding, var(--wui-space-5, 20px) var(--wui-space-6, 24px) var(--wui-space-6, 24px));\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(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 容器：title 与 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()` 的特异度高于类选择器，合并会让\n   「仅 title 模式变 grid」变成「所有模式都变 grid」，那会改掉 body 模式的几何\n   （实测高内容 body 的卡片会从 3044 被夹到 896）。位置也受 stylelint\n   no-descending-specificity 约束：须排在基础规则之后、dialog.is-closing 之前。 */\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/* ===== body 模式：内容区是卡片内部的滚动层 =====\n\n   body 模式没有 title / footer，卡片就是内容区，所以这里要同时守住两件事：\n   内容不高时卡片贴合内容（与基础规则一致），内容高过视口时把上限交给视口、把溢出交给\n   滚动。少了后半件，卡片会一路长到内容高度并溢出 dialog 盒子；dialog 是 overflow:\n   visible（阴影与关闭按钮不能由同尺寸的原生 dialog 裁），溢出的那截落在视口之下，\n   既看不到也够不着。\n\n   上限取与整卡兜底相同的字面量，而不是 `--wui-dialog-max-height`：后者的公开语义是\n   `.desc` 的高度（README 有记录），body 模式根本没有 `.desc`，套上去会凭空改掉\n   这档的既有尺寸语义。\n\n   滚动单独成层而不是让卡片自己滚：关闭按钮是卡片的绝对定位直接子元素，卡片一旦自己\n   滚动，按钮会跟着内容一起滚走。padding 也跟着挪进内层，让内容与滚动容器的裁剪边\n   （padding 外沿）留出余量——贴边的控件焦点环才不会被裁成残条；内层没有滚动条槽的\n   引擎里，这圈余量与卡片直接持 padding 时逐像素相同。 */\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   * body 模式的关闭按钮浮在卡片右上角，需要一个定位参照，所以显式重述一次\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 都早于本轮存在。\n   */\n  position: relative;\n}\n\ndialog[open].is-visible .wui-dialog-body {\n  opacity: 1;\n  backdrop-filter: blur(4px) saturate(160%) brightness(var(--wui-glass-brightness, 1.06));\n}\n\n/* ===== 关闭按钮（绝对定位，两种内容模式同一套规则）=====\n\n   偏移由公开 token --wui-dialog-close-top / --wui-dialog-close-right 控制，默认都是字面量\n   20px。默认值不再经过 --wui-space-*：这两个 token 的参照系是卡片边缘，而不是相邻元素\n   之间的间距节奏，消费方调整主题间距时不应意外移动关闭按钮。dialog 本轮也不再与 drawer\n   的 16/16 对齐；--wui-drawer-close-* 保持不变。\n\n   两个公开 token 先在正文容器上解析成同一份内部变量，按钮定位和标题避让都读这份结果，\n   避免只改一个兜底字面量后按钮与标题各自按不同默认值计算。\n\n   标题模式此前是 .title-row 里的 flex 子项（flex: none），偏移由卡片 padding 决定——默认\n   上 20 / 右 24，二者不等，正是「设置」对话框里按钮离上沿近、离右沿远的来源。改成绝对\n   定位后两种模式同源，几何只由本条规则决定。\n\n   绝对定位的包含块是 .wui-dialog-body（:host([closable]) 给了它 position: relative），\n   不是 .title-row：后者是 static，按钮只是它名义上的孩子；top/right 因此量到卡片 padding\n   box 的右上角。 */\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 * 标题行只在 closable 时出现，因此 .title 自身的 margin-bottom 语义不变：\n * 它仍由 .title-row 的行高承担，行高 = 标题外高（含 16px 下边距）。\n * 关闭按钮已是绝对定位、不再是这一行的占位项（见上），所以这里的 flex/gap 只剩排版作用。\n */\n.title-row {\n  display: flex;\n  gap: var(--wui-space-3, 12px);\n  align-items: flex-start;\n  justify-content: space-between;\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.title {\n  margin: 0 0 var(--wui-dialog-title-gap, var(--wui-space-4, 16px));\n  padding: 0;\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/* 标题避让：关闭按钮绝对定位后不再占 .title-row 的位，长标题会一直排到按钮下面。\n   预留量取「按钮右偏移 + 按钮宽 + 呼吸间距」，而不是只减掉卡片 padding——这样即便消费者把\n   --wui-dialog-padding 的 inline 分量调到 0，标题文字右缘也不会越过按钮左缘；跟随\n   --wui-dialog-close-right 变化；这里复用正文容器上已解析的内部右侧偏移，与按钮定位同源。\n   26px 对应 index.ts 里按钮的 size=\"26\"，改按钮尺寸时一并改这里。\n   只在 closable 时生效：没有按钮就不必留白。 */\n:host([closable]) .title {\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，宿主内容横向溢出时就会多出一条不该出现的横向滚动条。\n     Chromium / WebKit 实测：clip 与本规则下面的 auto 配对时计算值会降级成 hidden\n     （仍可被脚本滚动）。Firefox ≥128 不做这个降级、保持 clip，但仓库的 browser-mode\n     项目只跑 chromium，这句未经本仓 CI 证实。两个引擎都不画横向滚动条，所以这里\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 余量：四个轴一视同仁，成对负 margin 原样扣回 =====\n\n     .desc 既是滚动容器又是裁剪盒（clip），贴在内容区任一沿的控件，其 ring\n     （offset 2 + width 3 = 5px）会被 padding box 裁掉；留 6px 余 1px。少补任何一条轴，\n     那一侧的 ring 就会退化成 1px 残条——只补 `padding-block` 的那版，全宽控件的左右环\n     就是这样被裁掉的（改动前 `.desc` 没有 overflow，最近裁剪祖先是 NONE，所以这是本轮\n     新引入的裁剪，不是既有限制）。\n\n     四条 padding 各配一条等量负 margin，把这 12px×2 从外部间距里扣回去，border box\n     回到改动前的样子，content box 的宽/高也不变（负 margin 让盒子外扩，padding 原样\n     吃回去）。所以 title→内容、内容→footer、内容与卡片左右沿的视觉间距与改动前逐像素\n     相同，宿主内层 grid 的可用尺寸也不变——后者是横向余量最该守住的不变量，否则\n     AddDialog 那种两栏 grid 的 drop zone 会换行（实测见\n     __tests__/dialog-content-height.browser.spec.ts 的「focus-ring 余量覆盖四条轴」）。\n\n     取舍，是取舍不是疏漏：负 margin 让 `.desc` 的 border box 溢出滚动内容区，所以\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\n     横向不需要同样的兜底：margin-inline 恒为 -focus-padding，没有第二个公开 token 参与\n     减法。它与卡片 inline padding（默认 24px）的关系是「focus-padding 不应超过该\n     padding，否则 .desc 会横向溢出卡片」，由上面那段注释交代。 */\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: calc(-1 * var(--wui-dialog-desc-focus-padding, 6px));\n  padding-block: var(--wui-dialog-desc-focus-padding, 6px);\n  padding-inline: var(--wui-dialog-desc-focus-padding, 6px);\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），使未覆写的 dialog 视觉高度与改动前一致：\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  & ::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":""}