@greypan/web-ui 6.0.0 → 6.2.0

package/dist/components/dialog/index.js

@@ -1,33 +1,38 @@
 import e from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
 import t from "../../assets/glass.js";
-import { defineScrollLockLease as n } from "../../shared/scroll-lock/scroll-lock.js";
+import { dispatchOpenChangeEvent as n } from "../../shared/open-state/index.js";
+import { defineScrollLockLease as r } from "../../shared/scroll-lock/scroll-lock.js";
 import "../button/index.js";
-import { UserChangeController as r } from "../../shared/events/user-change.js";
-import { defineNativeDialogPresence as i } from "../../shared/overlay/native-dialog-presence.js";
-import a from "./style.js";
-import { LitElement as o, html as s, unsafeCSS as c } from "lit";
-import { customElement as l, property as u, state as d } from "lit/decorators.js";
+import { UserChangeController as i } from "../../shared/events/user-change.js";
+import { defineNativeDialogPresence as a } from "../../shared/overlay/native-dialog-presence.js";
+import o from "./style.js";
+import { LitElement as s, html as c, unsafeCSS as l } from "lit";
+import { customElement as u, property as d, state as f } from "lit/decorators.js";
 //#region src/components/dialog/index.ts
-var f = class extends o {
+var p = class extends s {
 	constructor(...e) {
-		super(...e), this.open = !1, this.noScrollLock = !1, this.noBackdropClose = !1, this.noEscapeClose = !1, this.controlled = !1, this._hasBody = !1, this._userOpenChange = new r(), this._scrollLock = n().make(), this._presence = i().make({
+		super(...e), this.open = !1, this.noScrollLock = !1, this.noBackdropClose = !1, this.noEscapeClose = !1, this.controlled = !1, this._hasBody = !1, this._userOpenChange = new i(), this._scrollLock = r().make(), this._presence = a().make({
 			getDialog: () => this.dialog,
 			isConnected: () => this.isConnected,
 			isOpen: () => this.open
 		}), this._onTransitionEnd = (e) => {
 			this._presence.handleTransitionEnd(e);
 		}, this._onNativeClose = () => {
-			if (this.open) {
+			if (!this.open) {
+				this._presence.handleNativeClose();
+				return;
+			}
+			if (!this._presence.handleNativeClose()) {
 				if (this.controlled) {
 					this._presence.sync(!0), this.emitOpenChange(!1);
 					return;
 				}
-				this._presence.handleNativeClose(), this._userOpenChange.mark(), this.open = !1;
+				this._userOpenChange.mark(), this.open = !1;
 			}
 		};
 	}
 	static {
-		this.styles = [c(t), c(a)];
+		this.styles = [l(t), l(o)];
 	}
 	get dialog() {
 		return this.shadowRoot?.querySelector("dialog") ?? null;
@@ -63,11 +68,7 @@ var f = class extends o {
 		}
 	}
 	emitOpenChange(e = this.open) {
-		this.dispatchEvent(new CustomEvent("open-change", {
-			detail: { open: e },
-			bubbles: !0,
-			composed: !0
-		}));
+		n(this, e);
 	}
 	_syncScrollLock(e = this.open) {
 		this._scrollLock.sync(e && !this.noScrollLock);
@@ -76,7 +77,7 @@ var f = class extends o {
 		e.target instanceof HTMLSlotElement && (this._hasBody = e.target.assignedElements().length > 0);
 	}
 	render() {
-		return s`
+		return c`
       <dialog
         @cancel=${this.handleCancel}
         @close=${this._onNativeClose}
@@ -84,7 +85,7 @@ var f = class extends o {
         @transitionend=${this._onTransitionEnd}
       >
         <div class="wui-dialog-body wui-glass">
-          ${this._hasBody ? s`<slot name="body" @slotchange=${this._onBodySlotChange}></slot>` : s`
+          ${this._hasBody ? c`<slot name="body" @slotchange=${this._onBodySlotChange}></slot>` : c`
                   <slot name="body" @slotchange=${this._onBodySlotChange} hidden></slot>
                   <div class="title"><slot name="title"></slot></div>
                   <div class="desc"><slot></slot></div>
@@ -95,26 +96,26 @@ var f = class extends o {
     `;
 	}
 };
-e([u({
+e([d({
 	type: Boolean,
 	reflect: !0
-})], f.prototype, "open", void 0), e([u({
+})], p.prototype, "open", void 0), e([d({
 	type: Boolean,
 	reflect: !0,
 	attribute: "no-scroll-lock"
-})], f.prototype, "noScrollLock", void 0), e([u({
+})], p.prototype, "noScrollLock", void 0), e([d({
 	type: Boolean,
 	reflect: !0,
 	attribute: "no-backdrop-close"
-})], f.prototype, "noBackdropClose", void 0), e([u({
+})], p.prototype, "noBackdropClose", void 0), e([d({
 	type: Boolean,
 	reflect: !0,
 	attribute: "no-escape-close"
-})], f.prototype, "noEscapeClose", void 0), e([u({
+})], p.prototype, "noEscapeClose", void 0), e([d({
 	type: Boolean,
 	reflect: !0
-})], f.prototype, "controlled", void 0), e([d()], f.prototype, "_hasBody", void 0), f = e([l("web-ui-dialog")], f);
+})], p.prototype, "controlled", void 0), e([f()], p.prototype, "_hasBody", void 0), p = e([u("web-ui-dialog")], p);
 //#endregion
-export { f as WebUiDialog };
+export { p 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, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport '@/components/button'\nimport glass from '@/assets/glass.css?inline'\nimport { UserChangeController } from '@/shared/events/user-change'\nimport { defineNativeDialogPresence } from '@/shared/overlay/native-dialog-presence'\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, 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  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    }\n    if (props.has('open') || props.has('noScrollLock')) this._syncScrollLock()\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    this._presence.dispose()\n    this._scrollLock.release()\n  }\n\n  // 以模态方式打开对话框（命令式）\n  showModal() {\n    if (this.open) return\n    this.open = true\n  }\n\n  close() {\n    this.open = false\n  }\n\n  private handleCancel(e: Event) {\n    // 子控件（例如 file input）可能派发冒泡的 cancel；只让 native dialog 自身的 cancel 关闭。\n    if (e.target !== e.currentTarget) return\n\n    // 保留 top layer 直到视觉退场完成，避免原生关闭跳过退出动画。\n    e.preventDefault()\n    if (this.noEscapeClose) return\n    if (this.controlled) {\n      this.emitOpenChange(false)\n      return\n    }\n    this._userOpenChange.mark()\n    this.close()\n  }\n\n  private handleBackdropClick(e: MouseEvent) {\n    if (e.target !== (e.currentTarget as HTMLDialogElement)) return\n    if (this.noBackdropClose) return\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    this.dispatchEvent(\n      new CustomEvent('open-change', {\n        detail: { open },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private _onTransitionEnd = (event: TransitionEvent) => {\n    this._presence.handleTransitionEnd(event)\n  }\n\n  private _onNativeClose = () => {\n    if (!this.open) 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._presence.handleNativeClose()\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  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`<slot name=\"body\" @slotchange=${this._onBodySlotChange}></slot>`\n              : html`\n                  <slot name=\"body\" @slotchange=${this._onBodySlotChange} hidden></slot>\n                  <div class=\"title\"><slot name=\"title\"></slot></div>\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, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport '@/components/button'\nimport glass from '@/assets/glass.css?inline'\nimport { UserChangeController } from '@/shared/events/user-change'\nimport { dispatchOpenChangeEvent } from '@/shared/open-state'\nimport { defineNativeDialogPresence } from '@/shared/overlay/native-dialog-presence'\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, 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  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    }\n    if (props.has('open') || props.has('noScrollLock')) this._syncScrollLock()\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    this._presence.dispose()\n    this._scrollLock.release()\n  }\n\n  // 以模态方式打开对话框（命令式）\n  showModal() {\n    if (this.open) return\n    this.open = true\n  }\n\n  close() {\n    this.open = false\n  }\n\n  private handleCancel(e: Event) {\n    // 子控件（例如 file input）可能派发冒泡的 cancel；只让 native dialog 自身的 cancel 关闭。\n    if (e.target !== e.currentTarget) return\n\n    // 保留 top layer 直到视觉退场完成，避免原生关闭跳过退出动画。\n    e.preventDefault()\n    if (this.noEscapeClose) return\n    if (this.controlled) {\n      this.emitOpenChange(false)\n      return\n    }\n    this._userOpenChange.mark()\n    this.close()\n  }\n\n  private handleBackdropClick(e: MouseEvent) {\n    if (e.target !== (e.currentTarget as HTMLDialogElement)) return\n    if (this.noBackdropClose) return\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  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`<slot name=\"body\" @slotchange=${this._onBodySlotChange}></slot>`\n              : html`\n                  <slot name=\"body\" @slotchange=${this._onBodySlotChange} hidden></slot>\n                  <div class=\"title\"><slot name=\"title\"></slot></div>\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":";;;;;;;;;;;AAaO,IAAM,IAAN,cAA0B,EAAW;;EA2FX,aAxFoB,KAAA,OAAA,IACqC,KAAA,eAAA,IACM,KAAA,kBAAA,IACJ,KAAA,gBAAA,IAOjC,KAAA,aAAA,IAE7B,KAAA,WAAA,IACO,KAAA,kBAAA,IAAI,EAAqB,GAE7B,KAAA,cAAA,EAAsB,CAAC,CAAC,KAAK,GAC/B,KAAA,YAAA,EAA2B,CAAC,CAAC,KAAK;GAC7D,iBAAiB,KAAK;GACtB,mBAAmB,KAAK;GACxB,cAAc,KAAK;EACrB,CAAC,GAgE2B,KAAA,oBAAA,MAA2B;GACrD,KAAK,UAAU,oBAAoB,CAAK;EAC1C,GAE+B,KAAA,uBAAA;GAG7B,IAAI,CAAC,KAAK,MAAM;IACd,KAAK,UAAU,kBAAkB;IACjC;GACF;GAKI,UAAK,UAAU,kBAAkB,GAIrC;QAAI,KAAK,YAAY;KAEnB,AADA,KAAK,UAAU,KAAK,EAAI,GACxB,KAAK,eAAe,EAAK;KACzB;IACF;IAGA,AADA,KAAK,gBAAgB,KAAK,GAC1B,KAAK,OAAO;GAHZ;EAIF;;;EAjHyB,KAAA,SAAA,CAAC,EAAU,CAAK,GAAG,EAAU,CAAK,CAAC;;CAwB5D,IAAY,SAAS;EACnB,OAAO,KAAK,YAAY,cAAc,QAAQ,KAAK;CACrD;CAEA,QAA2B,GAAuB;EAChD,MAAM,QAAQ,CAAK,GACd,KAAK,gBAEN,EAAM,IAAI,MAAM,MACd,KAAK,gBAAgB,QAAQ,KAAG,KAAK,eAAe,GACxD,KAAK,UAAU,KAAK,KAAK,IAAI,KAE3B,EAAM,IAAI,MAAM,KAAK,EAAM,IAAI,cAAc,MAAG,KAAK,gBAAgB;CAC3E;CAEA,uBAAgC;EAG9B,AAFA,MAAM,qBAAqB,GAC3B,KAAK,UAAU,QAAQ,GACvB,KAAK,YAAY,QAAQ;CAC3B;CAGA,YAAY;EACN,AACJ,KAAK,SAAO;CACd;CAEA,QAAQ;EACN,KAAK,OAAO;CACd;CAEA,aAAqB,GAAU;EAEzB,MAAE,WAAW,EAAE,kBAGnB,EAAE,eAAe,GACb,MAAK,gBACT;OAAI,KAAK,YAAY;IACnB,KAAK,eAAe,EAAK;IACzB;GACF;GAEA,AADA,KAAK,gBAAgB,KAAK,GAC1B,KAAK,MAAM;EAFX;CAGF;CAEA,oBAA4B,GAAe;EACrC,MAAE,WAAY,EAAE,iBAChB,MAAK,iBACT;OAAI,KAAK,YAAY;IACnB,KAAK,eAAe,EAAK;IACzB;GACF;GAEA,AADA,KAAK,gBAAgB,KAAK,GAC1B,KAAK,MAAM;EAFX;CAGF;CAGA,eAAuB,IAAO,KAAK,MAAM;EACvC,EAAwB,MAAM,CAAI;CACpC;CA+BA,gBAAwB,IAAS,KAAK,MAAM;EAC1C,KAAK,YAAY,KAAK,KAAU,CAAC,KAAK,YAAY;CACpD;CAEA,kBAA0B,GAAU;EAC5B,EAAE,kBAAkB,oBAC1B,KAAK,WAAW,EAAE,OAAO,iBAAiB,CAAC,CAAC,SAAS;CACvD;CAEA,SAAkB;EAChB,OAAO,CAAI;;kBAEG,KAAK,aAAa;iBACnB,KAAK,eAAe;iBACpB,KAAK,oBAAoB;yBACjB,KAAK,iBAAiB;;;YAInC,KAAK,WACD,CAAI,iCAAiC,KAAK,kBAAkB,YAC5D,CAAI;kDAC8B,KAAK,kBAAkB;;;;kBAK9D;;;;CAIT;AAKF;AArJG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAiB,CAAC,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,GACtE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAoB,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,GACzE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAkB,CAAC,CAAA,GAAA,EAAA,WAAA,iBAAA,KAAA,CAAA,GAOvE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GAEzC,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAhBR,IAAA,EAAA,CAAA,EAAc,eAAe,CAAA,GAAA,CAAA"}

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-scale-enter,.97));box-sizing:border-box;max-width:min(90vw, var(--wui-dialog-max-width,360px));max-height:90vh;color:var(--wui-color-text,#1b1b1b);opacity:0;transition:opacity var(--wui-duration-overlay-enter,.18s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1)), transform var(--wui-duration-overlay-enter,.18s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));background:0 0;border:none;padding:0;font-family:inherit;overflow:visible}dialog::backdrop{opacity:0;background:var(--wui-dialog-overlay-bg,var(--wui-color-backdrop,#0000001a));transition:opacity var(--wui-duration-overlay-enter,.18s) ease}dialog[open].is-visible{opacity:1;transform:scale(1)}dialog.is-closing{pointer-events:none;transition-duration:var(--wui-duration-overlay-exit,.14s)}dialog.is-closing::backdrop{transition-duration:var(--wui-duration-overlay-exit,.14s)}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:32px;background-color:var(--wui-dialog-bg,var(--wui-color-surface-overlay,#f6f6f6e0));border-radius:32px;padding:20px 24px 24px}.title{color:var(--wui-color-text,#1b1b1b);margin:0 0 16px;padding:0;font-size:18px;font-weight:600;line-height:1.2}.desc{color:var(--wui-color-text,#1b1b1b);margin:0 0 24px;padding:0;font-size:14px;line-height:1.5}.wui-dialog-footer{flex-direction:column;gap:10px;display:flex}.wui-dialog-footer ::slotted(web-ui-button){width:100%;display:flex}:host([horizontal]) .wui-dialog-footer{flex-direction:row;justify-content:center;gap:12px}: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-scale-enter,.97));box-sizing:border-box;width:min(90vw, var(--wui-dialog-width,360px));max-height:min(90vh,90dvh);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) ease}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,20px 24px 24px);border-radius:var(--wui-radius-overlay,28px);opacity:0;background-color:var(--wui-dialog-bg,var(--wui-color-surface-overlay,#f6f6f6d1));-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))}dialog.is-closing .wui-dialog-body{transition-duration:var(--wui-duration-dialog-exit,.26s)}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))}@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,16px);color:var(--wui-color-text,#1b1b1b);padding:0;font-size:18px;font-weight:600;line-height:1.2}.desc{margin:0 0 var(--wui-dialog-desc-gap,24px);color:var(--wui-color-text,#1b1b1b);padding:0;font-size:14px;line-height:1.5}.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: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  transform: scale(var(--wui-scale-enter, 0.97));\n\n  overflow: visible;\n\n  box-sizing: border-box;\n  max-width: min(90vw, var(--wui-dialog-max-width, 360px));\n  max-height: 90vh;\n  padding: 0;\n  border: none;\n\n  font-family: inherit;\n  color: var(--wui-color-text, #1b1b1b);\n\n  opacity: 0;\n  background: transparent;\n\n  transition:\n    opacity var(--wui-duration-overlay-enter, 180ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)),\n    transform var(--wui-duration-overlay-enter, 180ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n\n  &::backdrop {\n    opacity: 0;\n    background: var(--wui-dialog-overlay-bg, var(--wui-color-backdrop, rgb(0 0 0 / 0.1)));\n    transition: opacity var(--wui-duration-overlay-enter, 180ms) ease;\n  }\n}\n\ndialog[open].is-visible {\n  transform: scale(1);\n  opacity: 1;\n}\n\ndialog.is-closing {\n  pointer-events: none;\n  transition-duration: var(--wui-duration-overlay-exit, 140ms);\n}\n\ndialog.is-closing::backdrop {\n  transition-duration: var(--wui-duration-overlay-exit, 140ms);\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.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: 32px;\n  padding: 20px 24px 24px;\n  border-radius: 32px;\n  background-color: var(--wui-dialog-bg, var(--wui-color-surface-overlay, rgb(246 246 246 / 0.88)));\n}\n\n/* ===== 标题 ===== */\n\n.title {\n  margin: 0 0 16px;\n  padding: 0;\n\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 1.2;\n  color: var(--wui-color-text, #1b1b1b);\n}\n\n/* ===== 描述 ===== */\n\n.desc {\n  margin: 0 0 24px;\n  padding: 0;\n\n  font-size: 14px;\n  line-height: 1.5;\n  color: var(--wui-color-text, #1b1b1b);\n}\n\n/* ===== 按钮区域 ===== */\n\n.wui-dialog-footer {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n\n  /* ===== 按钮全宽（默认垂直排列） ===== */\n\n  & ::slotted(web-ui-button) {\n    display: flex;\n    width: 100%;\n  }\n}\n\n/* ===== horizontal 模式 ===== */\n\n:host([horizontal]) .wui-dialog-footer {\n  flex-direction: row;\n  gap: 12px;\n  justify-content: center;\n\n  /* 非 full 按钮：居中，不拉伸 */\n\n  & ::slotted(web-ui-button:not([full])) {\n    width: auto;\n  }\n\n  /* full 按钮：平分剩余空间 */\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  transform: scale(var(--wui-scale-enter, 0.97));\n\n  overflow: visible;\n\n  box-sizing: border-box;\n  width: min(90vw, var(--wui-dialog-width, 360px));\n  max-height: 90vh;\n  max-height: min(90vh, 90dvh);\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    transition: opacity var(--wui-duration-dialog-enter, 320ms) ease;\n  }\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, 20px 24px 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(246 246 246 / 0.82)));\n\n  /* stylelint-disable-next-line property-no-vendor-prefix */\n  -webkit-backdrop-filter: blur(0) saturate(160%) brightness(var(--wui-glass-brightness, 1.06));\n  backdrop-filter: blur(0) saturate(160%) brightness(var(--wui-glass-brightness, 1.06));\n\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\ndialog.is-closing .wui-dialog-body {\n  transition-duration: var(--wui-duration-dialog-exit, 260ms);\n}\n\ndialog[open].is-visible .wui-dialog-body {\n  opacity: 1;\n\n  /* stylelint-disable-next-line property-no-vendor-prefix */\n  -webkit-backdrop-filter: blur(4px) saturate(160%) brightness(var(--wui-glass-brightness, 1.06));\n  backdrop-filter: blur(4px) saturate(160%) brightness(var(--wui-glass-brightness, 1.06));\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/* ===== 标题 ===== */\n\n.title {\n  margin: 0 0 var(--wui-dialog-title-gap, 16px);\n  padding: 0;\n\n  font-size: 18px;\n  font-weight: 600;\n  line-height: 1.2;\n  color: var(--wui-color-text, #1b1b1b);\n}\n\n/* ===== 描述 ===== */\n\n.desc {\n  margin: 0 0 var(--wui-dialog-desc-gap, 24px);\n  padding: 0;\n\n  font-size: 14px;\n  line-height: 1.5;\n  color: var(--wui-color-text, #1b1b1b);\n}\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  /* ===== 按钮全宽（默认垂直排列） ===== */\n\n  & ::slotted(web-ui-button) {\n    display: flex;\n    width: 100%;\n  }\n}\n\n/* ===== horizontal 模式 ===== */\n\n:host([horizontal]) .wui-dialog-footer {\n  flex-direction: row;\n  gap: 12px;\n  justify-content: var(--wui-dialog-footer-justify, center);\n\n  /* 非 full 按钮：居中，不拉伸 */\n\n  & ::slotted(web-ui-button:not([full])) {\n    width: auto;\n  }\n\n  /* full 按钮：平分剩余空间 */\n\n  & ::slotted(web-ui-button[full]) {\n    flex: 1;\n    min-width: 0;\n  }\n}\n"],"mappings":""}

package/dist/components/drawer/index.js

@@ -3,24 +3,25 @@ import "../icon/index.js";
 import t from "../../icons/generated/ooui-close.js";
 import n from "../../assets/glass.js";
 import { normalizeLiteral as r } from "../../shared/normalize/index.js";
-import { findNearestTheme as i } from "../../shared/theme/theme-scope.js";
-import { defineScrollLockLease as a } from "../../shared/scroll-lock/scroll-lock.js";
+import { dispatchOpenChangeEvent as i } from "../../shared/open-state/index.js";
+import { findNearestTheme as a } from "../../shared/overlay/theme-overlay-scope.js";
+import { defineScrollLockLease as o } from "../../shared/scroll-lock/scroll-lock.js";
 import "../button/index.js";
-import { UserChangeController as o } from "../../shared/events/user-change.js";
-import { defineNativeDialogPresence as s } from "../../shared/overlay/native-dialog-presence.js";
-import { attachDragGesture as c } from "../../shared/gesture/drag-gesture.js";
-import { SPRING_PRESETS as l, rubberband as u, springOffsets as d } from "../../shared/gesture/physics.js";
-import { defineNestedDrawerLayers as f } from "../../shared/overlay/nested-drawer-layers.js";
-import p from "./style.js";
-import { LitElement as m, html as h, nothing as g, unsafeCSS as _ } from "lit";
-import { customElement as v, property as y } from "lit/decorators.js";
+import { UserChangeController as s } from "../../shared/events/user-change.js";
+import { defineNativeDialogPresence as c } from "../../shared/overlay/native-dialog-presence.js";
+import { attachDragGesture as l } from "../../shared/gesture/drag-gesture.js";
+import { SPRING_PRESETS as u, rubberband as d, springOffsets as f } from "../../shared/gesture/physics.js";
+import { defineNestedDrawerLayers as p } from "../../shared/overlay/nested-drawer-layers.js";
+import m from "./style.js";
+import { LitElement as h, html as g, nothing as _, unsafeCSS as v } from "lit";
+import { customElement as y, property as b } from "lit/decorators.js";
 //#region src/components/drawer/index.ts
-var b = [
+var x = [
 	"right",
 	"left",
 	"top",
 	"bottom"
-], x = 1 / 3, S = 500, C = 120, w = 16;
+], S = 1 / 3, C = 500, w = 120, T = 16;
 if (typeof CSS < "u" && "registerProperty" in CSS) {
 	try {
 		CSS.registerProperty({
@@ -39,13 +40,13 @@ if (typeof CSS < "u" && "registerProperty" in CSS) {
 		});
 	} catch {}
 }
-var T = class extends m {
+var E = class extends h {
 	constructor(...e) {
-		super(...e), this.open = !1, this.noScrollLock = !1, this.noBackdropClose = !1, this.controlled = !1, this._placement = "right", this.heading = "", this.closable = !1, this.headless = !1, this.dialogLabel = "", this.draggable = !1, this._hasHeaderSlot = !1, this._hasFooterSlot = !1, this._userOpenChange = new o(), this._scrollLock = a().make(), this._presence = s().make({
+		super(...e), this.open = !1, this.noScrollLock = !1, this.noBackdropClose = !1, this.controlled = !1, this._placement = "right", this.heading = "", this.closable = !1, this.headless = !1, this.dialogLabel = "", this.draggable = !1, this._hasHeaderSlot = !1, this._hasFooterSlot = !1, this._userOpenChange = new s(), this._scrollLock = o().make(), this._presence = c().make({
 			getDialog: () => this.dialog,
 			isConnected: () => this.isConnected,
 			isOpen: () => this.open
-		}), this._nestedLayers = f().make({
+		}), this._nestedLayers = p().make({
 			getDialog: () => this.dialog,
 			getPlacement: () => this._placement
 		}), this._dragGesture = null, this._dragInitialOffset = 0, this._dragOffset = 0, this._dragAnimation = null, this._dragAwaitWriteback = !1, this._handleDragWritebackTimeout = () => {
@@ -67,14 +68,14 @@ var T = class extends m {
 		};
 	}
 	static {
-		this.styles = [_(n), _(p)];
+		this.styles = [v(n), v(m)];
 	}
 	get placement() {
 		return this._placement;
 	}
 	set placement(e) {
 		let t = this._placement;
-		this._placement = r(e, b, "right"), this.requestUpdate("placement", t);
+		this._placement = r(e, x, "right"), this.requestUpdate("placement", t);
 	}
 	get dialog() {
 		return this.shadowRoot?.querySelector("dialog") ?? null;
@@ -102,7 +103,7 @@ var T = class extends m {
 		return this._measureDragSize() + this._readDrawerInset(e);
 	}
 	_isReducedMotion() {
-		let e = i(this);
+		let e = a(this);
 		if (e) return e.isReducedMotion();
 		try {
 			return typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
@@ -121,18 +122,18 @@ var T = class extends m {
 		let t = this.dialog;
 		if (!t || !t.classList.contains("is-visible")) return;
 		let n = getComputedStyle(t).transform, r = n && n !== "none" && typeof DOMMatrixReadOnly == "function" ? new DOMMatrixReadOnly(n)[this._dragAxis === "x" ? "m41" : "m42"] : 0;
-		this._dragAnimation?.cancel(), this._dragAnimation = null, this._cancelDragAwait(), this._dragInitialOffset = r * this._dragCloseSign, this._dragOffset = this._dragInitialOffset, t.classList.add("is-dragging"), this._dragGesture = c(e, {
+		this._dragAnimation?.cancel(), this._dragAnimation = null, this._cancelDragAwait(), this._dragInitialOffset = r * this._dragCloseSign, this._dragOffset = this._dragInitialOffset, t.classList.add("is-dragging"), this._dragGesture = l(e, {
 			axis: this._dragAxis,
 			onMove: (e) => {
 				let n = this._dragAxis === "x" ? e.deltaX : e.deltaY, r = this._dragInitialOffset + n * this._dragCloseSign;
-				this._dragOffset = u(r, this._measureDragSize() * .1, .15);
+				this._dragOffset = d(r, this._measureDragSize() * .1, .15);
 				let i = this._measureDragSize();
-				t.classList.toggle("is-drag-close", i > 0 && this._dragOffset > i * x), this._applyDragOffset(t, this._dragOffset);
+				t.classList.toggle("is-drag-close", i > 0 && this._dragOffset > i * S), this._applyDragOffset(t, this._dragOffset);
 			},
 			onEnd: (e) => {
 				this._dragGesture = null, t.classList.remove("is-dragging", "is-drag-close");
 				let n = this._measureDragSize(), r = (this._dragAxis === "x" ? e.velocityX : e.velocityY) * this._dragCloseSign;
-				this._dragOffset > n * x || this._dragOffset > 8 && r > S ? this._springToClose(t, r) : this._springRebound(t, r, this._dragOffset);
+				this._dragOffset > n * S || this._dragOffset > 8 && r > C ? this._springToClose(t, r) : this._springRebound(t, r, this._dragOffset);
 			},
 			onCancel: () => {
 				this._dragGesture = null, t.classList.remove("is-dragging", "is-drag-close"), this._springRebound(t, 0, this._dragOffset);
@@ -168,43 +169,45 @@ var T = class extends m {
 			o();
 			return;
 		}
-		let s = d(n, i, t, l.close), c = s.map((e) => ({
+		let s = f(n, i, t, u.close), c = s.map((e) => ({
 			transform: this._dragAxis === "x" ? `translateX(${e * r}px)` : `translateY(${e * r}px)`,
 			"--wui-internal-drag-backdrop-opacity": String(Math.max(0, 1 - e / a))
-		})), u = (s.length - 1) * w, f = e.animate(c, {
-			duration: u,
+		})), l = (s.length - 1) * T, d = e.animate(c, {
+			duration: l,
 			easing: "linear",
 			fill: "both"
 		});
-		f.onfinish = () => {
-			f.cancel(), o();
+		d.onfinish = () => {
+			o(), d.cancel();
 		};
 	}
 	_springRebound(e, t, n) {
 		this._dragOffset = 0;
 		let r = () => {
-			this._dragAnimation = null, e.classList.remove("is-dragging"), this._clearDragStyles(e);
+			e.style.transform = this._dragAxis === "x" ? "translateX(0px)" : "translateY(0px)", e.style.setProperty("--wui-internal-drag-backdrop-opacity", "1");
+		}, i = (t) => {
+			this._dragAnimation = null, e.isConnected && (t ? this._clearDragStyles(e) : r(), e.offsetWidth, e.classList.remove("is-dragging"));
 		};
 		if (this._isReducedMotion() || typeof e.animate != "function" || Math.abs(n) < 1) {
-			r();
+			e.classList.add("is-dragging"), i(!0);
 			return;
 		}
-		let i = this._dragCloseSign, a = this._measureDragSize(), o = d(n, 0, t, l.rebound), s = o.map((e) => ({
-			transform: this._dragAxis === "x" ? `translateX(${e * i}px)` : `translateY(${e * i}px)`,
-			"--wui-internal-drag-backdrop-opacity": String(Math.max(0, 1 - e / a))
+		let a = this._dragCloseSign, o = this._measureDragSize(), s = f(n, 0, t, u.rebound), c = s.map((e) => ({
+			transform: this._dragAxis === "x" ? `translateX(${e * a}px)` : `translateY(${e * a}px)`,
+			"--wui-internal-drag-backdrop-opacity": String(Math.max(0, 1 - e / o))
 		}));
 		e.classList.add("is-dragging");
-		let c = (o.length - 1) * w, u = e.animate(s, {
-			duration: c,
+		let l = (s.length - 1) * T, d = e.animate(c, {
+			duration: l,
 			easing: "linear",
 			fill: "both"
 		});
-		u.onfinish = () => {
-			u.cancel(), r();
-		}, this._dragAnimation = u;
+		d.onfinish = () => {
+			i(!1), d.cancel();
+		}, this._dragAnimation = d;
 	}
 	_closeFromDrag() {
-		this._closeFromUser(), this.controlled && (this._dragAwaitWriteback = !0, this._dragRequestTimer = setTimeout(this._handleDragWritebackTimeout, C));
+		this._closeFromUser(), this.controlled && (this._dragAwaitWriteback = !0, this._dragRequestTimer = setTimeout(this._handleDragWritebackTimeout, w));
 	}
 	connectedCallback() {
 		super.connectedCallback(), this._hasHeaderSlot = Array.from(this.children).some((e) => e.getAttribute?.("slot") === "header"), this._hasFooterSlot = Array.from(this.children).some((e) => e.getAttribute?.("slot") === "footer");
@@ -237,6 +240,10 @@ var T = class extends m {
 					let e = this.dialog;
 					e && !this.open ? (e.classList.remove("is-visible"), this._clearDragStyles(e)) : e && this.open && this._springRebound(e, 0, this._dragCloseDistance(e));
 				}
+				if (!this.open && this._dragAnimation === null && !this._isDragging()) {
+					let e = this.dialog;
+					e && this._clearDragStyles(e);
+				}
 				this._presence.sync(this.open), this.open ? this._nestedLayers.register() : this._nestedLayers.unregister();
 			}
 			(e.has("open") || e.has("noScrollLock")) && this._syncScrollLock();
@@ -266,7 +273,11 @@ var T = class extends m {
 		e.preventDefault(), this._closeFromUser();
 	}
 	handleNativeClose() {
-		if (this.open) {
+		if (!this.open) {
+			this._presence.handleNativeClose();
+			return;
+		}
+		if (!this._presence.handleNativeClose()) {
 			if (this._dragAwaitWriteback) {
 				this._cancelDragAwait();
 				return;
@@ -275,31 +286,27 @@ var T = class extends m {
 				this._presence.sync(!0), this.emitOpenChange(!1);
 				return;
 			}
-			this._presence.handleNativeClose(), this._userOpenChange.mark(), this.open = !1;
+			this._userOpenChange.mark(), this.open = !1;
 		}
 	}
 	handleBackdropClick(e) {
 		e.target === e.currentTarget && (this.noBackdropClose || this._isDragging() || this._closeFromUser());
 	}
 	emitOpenChange(e = this.open) {
-		this.dispatchEvent(new CustomEvent("open-change", {
-			detail: { open: e },
-			bubbles: !0,
-			composed: !0
-		}));
+		i(this, e);
 	}
 	_syncScrollLock(e = this.open) {
 		this._scrollLock.sync(e && !this.noScrollLock);
 	}
 	render() {
-		let e = this._hasHeaderSlot || !!this.heading, n = this.dialogLabel.trim(), r = !n && !this.headless && e ? "wui-drawer-heading" : g, i = this.draggable ? h`
+		let e = this._hasHeaderSlot || !!this.heading, n = this.dialogLabel.trim(), r = !n && !this.headless && e ? "wui-drawer-heading" : _, i = this.draggable ? g`
           <div class="wui-drawer-drag-zone" @pointerdown=${this._handleDragPointerDown}>
             <div class="wui-drawer-drag-bar"></div>
           </div>
-        ` : g;
-		return h`
+        ` : _;
+		return g`
       <dialog
-        aria-label=${n || g}
+        aria-label=${n || _}
         aria-labelledby=${r}
         @cancel=${this.handleCancel}
         @close=${this.handleNativeClose}
@@ -307,11 +314,11 @@ var T = class extends m {
         @keydown=${this.handleKeydown}
         @transitionend=${this.handleTransitionEnd}
       >
-        ${this.headless ? h`<slot></slot>${i}` : h`
+        ${this.headless ? g`<slot></slot>${i}` : g`
                 <div class="wui-drawer-body wui-glass">
                   <div class="wui-drawer-header" id="wui-drawer-heading" ?hidden=${!e}>
                     <slot name="header" @slotchange=${this.handleHeaderSlotChange}>
-                      ${this.heading ? h`<span class="wui-drawer-heading">${this.heading}</span>` : g}
+                      ${this.heading ? g`<span class="wui-drawer-heading">${this.heading}</span>` : _}
                     </slot>
                   </div>
                   <div class="wui-drawer-content">
@@ -321,7 +328,7 @@ var T = class extends m {
                     <slot name="footer" @slotchange=${this.handleFooterSlotChange}></slot>
                   </div>
                 </div>
-                ${this.closable ? h`
+                ${this.closable ? g`
                         <web-ui-button
                           class="wui-drawer-close"
                           @click=${this._closeFromUser}
@@ -332,44 +339,44 @@ var T = class extends m {
                         >
                           <web-ui-icon size="14" .icon=${t}></web-ui-icon>
                         </web-ui-button>
-                      ` : g}
+                      ` : _}
                 ${i}
               `}
       </dialog>
     `;
 	}
 };
-e([y({
+e([b({
 	type: Boolean,
 	reflect: !0
-})], T.prototype, "open", void 0), e([y({
+})], E.prototype, "open", void 0), e([b({
 	type: Boolean,
 	reflect: !0,
 	attribute: "no-scroll-lock"
-})], T.prototype, "noScrollLock", void 0), e([y({
+})], E.prototype, "noScrollLock", void 0), e([b({
 	type: Boolean,
 	reflect: !0,
 	attribute: "no-backdrop-close"
-})], T.prototype, "noBackdropClose", void 0), e([y({
+})], E.prototype, "noBackdropClose", void 0), e([b({
 	type: Boolean,
 	reflect: !0
-})], T.prototype, "controlled", void 0), e([y({
+})], E.prototype, "controlled", void 0), e([b({
 	type: String,
 	reflect: !0
-})], T.prototype, "placement", null), e([y({ type: String })], T.prototype, "heading", void 0), e([y({
+})], E.prototype, "placement", null), e([b({ type: String })], E.prototype, "heading", void 0), e([b({
 	type: Boolean,
 	reflect: !0
-})], T.prototype, "closable", void 0), e([y({
+})], E.prototype, "closable", void 0), e([b({
 	type: Boolean,
 	reflect: !0
-})], T.prototype, "headless", void 0), e([y({
+})], E.prototype, "headless", void 0), e([b({
 	type: String,
 	attribute: "dialog-label"
-})], T.prototype, "dialogLabel", void 0), e([y({
+})], E.prototype, "dialogLabel", void 0), e([b({
 	type: Boolean,
 	reflect: !0
-})], T.prototype, "draggable", void 0), T = e([v("web-ui-drawer")], T);
+})], E.prototype, "draggable", void 0), E = e([y("web-ui-drawer")], E);
 //#endregion
-export { T as WebUiDrawer };
+export { E as WebUiDrawer };
 
 //# sourceMappingURL=index.js.map