@greypan/web-ui 6.3.1 → 7.0.0

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  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  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\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  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":""}
+{"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  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\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/* 面板本身是模态表面，不作为可聚焦控件；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  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\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  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.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.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.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: 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":""}

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

@@ -40,31 +40,47 @@ export declare class WebUiDrawer extends LitElement {
     private readonly _scrollLock;
     private readonly _presence;
     private readonly _nestedLayers;
+    private readonly _overlay;
+    /** 当前开启会话的句柄；未开启时为 null。 */
+    private _handle;
     private _dragGesture;
     private _dragInitialOffset;
     private _dragOffset;
-    private _dragAnimation;
+    private _cancelBaseline;
+    private _lastAxisPos;
+    private _swipeIntentDisp;
+    private _swipeCancelled;
+    private _settleFinish;
+    private _settleTimer;
     private _dragAwaitWriteback;
     private _dragRequestTimer;
     private get _dragAxis();
     private get _dragCloseSign();
     private _measureDragSize;
+    private _dragCloseThreshold;
     private _readDrawerInset;
     private _dragCloseDistance;
-    private _isReducedMotion;
     private _isDragging;
+    private _syncDragInert;
     private _cancelDragAwait;
     private _handleDragPointerDown;
+    private _trackSwipeCancel;
     private _cancelActiveDrag;
     private _applyDragOffset;
     private _clearDragStyles;
-    private _springToClose;
-    private _springRebound;
+    private _settleToClose;
+    private _settleRebound;
+    private _settleDuration;
+    private _startSettle;
+    private _finishSettle;
+    private _abortSettle;
     private _closeFromDrag;
     private readonly _handleDragWritebackTimeout;
     connectedCallback(): void;
     firstUpdated(): void;
     disconnectedCallback(): void;
+    /** 「重挂载恢复」的调用方一半：模块刻意不观察 DOM 连接状态。 */
+    private _reclaimIfOpen;
     private _checkSlotContent;
     private handleHeaderSlotChange;
     private handleFooterSlotChange;
@@ -76,6 +92,8 @@ export declare class WebUiDrawer extends LitElement {
     private readonly _closeFromUser;
     private handleCancel;
     private handleNativeClose;
+    private _backdropPress;
+    private handleDialogPointerDown;
     private handleBackdropClick;
     private emitOpenChange;
     private _syncScrollLock;

package/dist/components/drawer/index.js

@@ -1,27 +1,28 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
+import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 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 { dispatchOpenChangeEvent as i } from "../../shared/open-state/index.js";
-import { findNearestTheme as a } from "../../shared/overlay/theme-overlay-scope.js";
+import { defineOpenOverlay as a } from "../../shared/overlay/open-overlay.js";
 import { defineScrollLockLease as o } from "../../shared/scroll-lock/scroll-lock.js";
 import "../button/index.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";
+import { prefersReducedMotion as s } from "../../shared/theme/reduced-motion.js";
+import { UserChangeController as c } from "../../shared/events/user-change.js";
+import { defineNativeDialogPresence as l } from "../../shared/overlay/native-dialog-presence.js";
+import { attachDragGesture as u } from "../../shared/gesture/drag-gesture.js";
+import { dampOverscroll 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";
 //#region src/components/drawer/index.ts
-var x = [
+var b = [
 	"right",
 	"left",
 	"top",
 	"bottom"
-], S = 1 / 3, C = 500, w = 120, T = 16;
+], x = .5, S = 10, C = 500, w = 50, T = 10, E = 120, D = 10, O = 180, k = 420, A = "cubic-bezier(0.32, 0.72, 0, 1)", j = "cubic-bezier(0.22, 1.3, 0.36, 1)", M = 1, N = 80;
 if (typeof CSS < "u" && "registerProperty" in CSS) {
 	try {
 		CSS.registerProperty({
@@ -39,24 +40,32 @@ if (typeof CSS < "u" && "registerProperty" in CSS) {
 			initialValue: "8px"
 		});
 	} catch {}
+	try {
+		CSS.registerProperty({
+			name: "--wui-internal-settle-duration",
+			syntax: "<time>",
+			inherits: !0,
+			initialValue: "280ms"
+		});
+	} catch {}
 }
-var E = class extends h {
+var P = class extends m {
 	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 s(), this._scrollLock = o().make(), this._presence = c().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 c(), this._scrollLock = o().make(), this._presence = l().make({
 			getDialog: () => this.dialog,
 			isConnected: () => this.isConnected,
 			isOpen: () => this.open
-		}), this._nestedLayers = p().make({
+		}), this._nestedLayers = f().make({
 			getDialog: () => this.dialog,
 			getPlacement: () => this._placement
-		}), this._dragGesture = null, this._dragInitialOffset = 0, this._dragOffset = 0, this._dragAnimation = null, this._dragAwaitWriteback = !1, this._handleDragWritebackTimeout = () => {
+		}), this._overlay = a().make({ requestClose: () => this._closeFromUser() }), this._handle = null, this._dragGesture = null, this._dragInitialOffset = 0, this._dragOffset = 0, this._cancelBaseline = 0, this._lastAxisPos = 0, this._swipeIntentDisp = -1, this._swipeCancelled = !1, this._settleFinish = null, this._dragAwaitWriteback = !1, this._handleDragWritebackTimeout = () => {
 			if (this._dragRequestTimer = void 0, !this._dragAwaitWriteback || !this.open || this._isDragging()) {
 				this._dragAwaitWriteback = !1;
 				return;
 			}
 			this._dragAwaitWriteback = !1;
 			let e = this.dialog;
-			e && (e.classList.add("is-visible"), this._springRebound(e, 0, this._dragCloseDistance(e)));
+			e && (e.classList.add("is-visible"), this._settleRebound(e, 0, this._dragCloseDistance(e)));
 		}, this._closeFromUser = () => {
 			if (this.open && !this._dragAwaitWriteback) {
 				if (this.controlled) {
@@ -65,17 +74,17 @@ var E = class extends h {
 				}
 				this._userOpenChange.mark(), this.close();
 			}
-		};
+		}, this._backdropPress = null;
 	}
 	static {
-		this.styles = [v(n), v(m)];
+		this.styles = [_(n), _(p)];
 	}
 	get placement() {
 		return this._placement;
 	}
 	set placement(e) {
 		let t = this._placement;
-		this._placement = r(e, x, "right"), this.requestUpdate("placement", t);
+		this._placement = r(e, b, "right"), this.requestUpdate("placement", t);
 	}
 	get dialog() {
 		return this.shadowRoot?.querySelector("dialog") ?? null;
@@ -95,6 +104,9 @@ var E = class extends h {
 		let e = this.dialog;
 		return e ? this._dragAxis === "x" ? e.offsetWidth : e.offsetHeight : 0;
 	}
+	_dragCloseThreshold(e) {
+		return Math.max(e * x, S);
+	}
 	_readDrawerInset(e) {
 		let t = getComputedStyle(e).getPropertyValue("--wui-internal-drawer-inset"), n = Number.parseFloat(t);
 		return Number.isFinite(n) ? n : 0;
@@ -102,18 +114,12 @@ var E = class extends h {
 	_dragCloseDistance(e) {
 		return this._measureDragSize() + this._readDrawerInset(e);
 	}
-	_isReducedMotion() {
-		let e = a(this);
-		if (e) return e.isReducedMotion();
-		try {
-			return typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-		} catch {
-			return !1;
-		}
-	}
 	_isDragging() {
 		return this._dragGesture?.isDragging() ?? !1;
 	}
+	_syncDragInert() {
+		this._handle?.setInert(this._isDragging());
+	}
 	_cancelDragAwait() {
 		this._dragRequestTimer !== void 0 && (clearTimeout(this._dragRequestTimer), this._dragRequestTimer = void 0), this._dragAwaitWriteback = !1;
 	}
@@ -122,27 +128,39 @@ var E = class extends h {
 		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 = l(e, {
+		this._abortSettle(), this._cancelDragAwait(), this._dragInitialOffset = r * this._dragCloseSign, this._dragOffset = this._dragInitialOffset;
+		let i = this._dragAxis === "x" ? e.clientX : e.clientY;
+		this._cancelBaseline = i, this._lastAxisPos = i, this._swipeIntentDisp = -1, this._swipeCancelled = !1, t.classList.add("is-dragging"), this._applyDragOffset(t, this._dragOffset), this._dragGesture = u(e, {
 			axis: this._dragAxis,
+			calibrateOnFirstMove: !0,
 			onMove: (e) => {
-				let n = this._dragAxis === "x" ? e.deltaX : e.deltaY, r = this._dragInitialOffset + n * this._dragCloseSign;
-				this._dragOffset = d(r, this._measureDragSize() * .1, .15);
-				let i = this._measureDragSize();
-				t.classList.toggle("is-drag-close", i > 0 && this._dragOffset > i * S), this._applyDragOffset(t, this._dragOffset);
+				let n = (this._dragAxis === "x" ? e.deltaX : e.deltaY) * this._dragCloseSign;
+				this._dragOffset = this._dragInitialOffset + d(n), this._trackSwipeCancel(this._dragAxis === "x" ? e.clientX : e.clientY, n);
+				let r = this._measureDragSize(), i = this._dragOffset - this._dragInitialOffset;
+				t.classList.toggle("is-drag-close", i > this._dragCloseThreshold(r)), 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 * S || this._dragOffset > 8 && r > C ? this._springToClose(t, r) : this._springRebound(t, r, this._dragOffset);
+				this._dragGesture = null, this._syncDragInert(), t.classList.remove("is-dragging", "is-drag-close");
+				let n = this._measureDragSize(), r = (this._dragAxis === "x" ? e.velocityX : e.velocityY) * this._dragCloseSign, i = this._dragOffset - this._dragInitialOffset, a = e.duration > 0 ? i / Math.max(e.duration, w) * 1e3 : 0, o = i > 0 && a >= C && !this._swipeCancelled;
+				i > this._dragCloseThreshold(n) || o ? this._settleToClose(t, r) : this._settleRebound(t, r, this._dragOffset);
 			},
 			onCancel: () => {
-				this._dragGesture = null, t.classList.remove("is-dragging", "is-drag-close"), this._springRebound(t, 0, this._dragOffset);
+				this._dragGesture = null, this._syncDragInert(), t.classList.remove("is-dragging", "is-drag-close"), this._settleRebound(t, 0, this._dragOffset);
 			}
-		});
+		}), this._syncDragInert();
+	}
+	_trackSwipeCancel(e, t) {
+		let n = e - this._lastAxisPos;
+		if (this._lastAxisPos = e, (n < 0 && e > this._cancelBaseline || n > 0 && e < this._cancelBaseline) && (this._cancelBaseline = e), this._swipeIntentDisp < 0) {
+			t > 0 && (this._swipeIntentDisp = t);
+			return;
+		}
+		let r = (e - this._cancelBaseline) * this._dragCloseSign;
+		r > this._dragCloseThreshold(this._measureDragSize()) ? this._swipeCancelled = !1 : this._swipeIntentDisp - r >= T && (this._swipeCancelled = !0);
 	}
 	_cancelActiveDrag() {
 		if (!this._isDragging()) return;
-		this._dragGesture?.destroy(), this._dragGesture = null;
+		this._dragGesture?.destroy(), this._dragGesture = null, this._syncDragInert();
 		let e = this.dialog;
 		e && (e.classList.remove("is-dragging", "is-drag-close"), this._clearDragStyles(e));
 	}
@@ -155,68 +173,63 @@ var E = class extends h {
 	_clearDragStyles(e) {
 		e.style.removeProperty("transform"), e.style.removeProperty("--wui-internal-drag-backdrop-opacity");
 	}
-	_springToClose(e, t) {
+	_settleToClose(e, t) {
 		let n = this._dragOffset;
 		this._dragOffset = 0;
-		let r = this._dragCloseSign, i = this._dragCloseDistance(e), a = this._measureDragSize(), o = () => {
-			if (this.controlled) {
-				let t = i;
-				e.style.transform = this._dragAxis === "x" ? `translateX(${t * r}px)` : `translateY(${t * r}px)`, e.style.setProperty("--wui-internal-drag-backdrop-opacity", "0");
-			} else e.classList.remove("is-visible"), this._clearDragStyles(e);
-			this._closeFromDrag();
+		let r = this._dragCloseDistance(e), i = () => {
+			this.controlled ? this._applyDragOffset(e, r) : (e.classList.remove("is-visible"), this._clearDragStyles(e)), this._closeFromDrag();
 		};
-		if (this._isReducedMotion() || typeof e.animate != "function") {
-			o();
+		if (s(this) || Math.abs(r - n) < 1) {
+			e.classList.remove("is-dragging"), i();
 			return;
 		}
-		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))
-		})), l = (s.length - 1) * T, d = e.animate(c, {
-			duration: l,
-			easing: "linear",
-			fill: "both"
-		});
-		d.onfinish = () => {
-			o(), d.cancel();
-		};
+		this._startSettle(e, r, 0, this._settleDuration(Math.abs(r - n), t), A, i);
 	}
-	_springRebound(e, t, n) {
+	_settleRebound(e, t, n) {
 		this._dragOffset = 0;
 		let r = () => {
-			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"));
+			this._clearDragStyles(e);
 		};
-		if (this._isReducedMotion() || typeof e.animate != "function" || Math.abs(n) < 1) {
-			e.classList.add("is-dragging"), i(!0);
+		if (s(this) || Math.abs(n) < 1) {
+			e.classList.remove("is-dragging"), r();
 			return;
 		}
-		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 l = (s.length - 1) * T, d = e.animate(c, {
-			duration: l,
-			easing: "linear",
-			fill: "both"
-		});
-		d.onfinish = () => {
-			i(!1), d.cancel();
-		}, this._dragAnimation = d;
+		this._startSettle(e, 0, 1, this._settleDuration(Math.abs(n), t), j, r);
+	}
+	_settleDuration(e, t) {
+		let n = e / Math.max(Math.abs(t), M) * 1e3;
+		return Math.min(k, Math.max(O, n));
+	}
+	_startSettle(e, t, n, r, i, a) {
+		this._abortSettle();
+		let o = this._dragCloseSign;
+		e.style.setProperty("--wui-internal-settle-duration", `${r}ms`), e.style.setProperty("--wui-internal-settle-easing", i), e.style.transform = this._dragAxis === "x" ? `translateX(${t * o}px)` : `translateY(${t * o}px)`, e.style.setProperty("--wui-internal-drag-backdrop-opacity", String(n)), e.classList.add("is-settling"), e.classList.remove("is-dragging"), this._settleFinish = a, this._settleTimer = setTimeout(() => this._finishSettle(), r + N);
+	}
+	_finishSettle() {
+		let e = this._settleFinish;
+		e && (this._abortSettle(), e());
+	}
+	_abortSettle() {
+		this._settleFinish = null, this._settleTimer !== void 0 && (clearTimeout(this._settleTimer), this._settleTimer = void 0);
+		let e = this.dialog;
+		e && (e.classList.remove("is-settling"), e.style.removeProperty("--wui-internal-settle-duration"), e.style.removeProperty("--wui-internal-settle-easing"));
 	}
 	_closeFromDrag() {
-		this._closeFromUser(), this.controlled && (this._dragAwaitWriteback = !0, this._dragRequestTimer = setTimeout(this._handleDragWritebackTimeout, w));
+		this._closeFromUser(), this.controlled && (this._dragAwaitWriteback = !0, this._dragRequestTimer = setTimeout(this._handleDragWritebackTimeout, E));
 	}
 	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");
+		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"), this._presence.reconcile(), this.open && this._nestedLayers.register(), this._syncScrollLock(), this._reclaimIfOpen();
 	}
 	firstUpdated() {
 		this._checkSlotContent("footer");
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this._nestedLayers.dispose(), this._dragGesture?.destroy(), this._dragGesture = null, this._presence.dispose(), this._scrollLock.release(), this._dragAnimation?.cancel(), this._dragAnimation = null, this._cancelDragAwait();
+		super.disconnectedCallback(), this._nestedLayers.dispose(), this._dragGesture?.destroy(), this._dragGesture = null, this._presence.dispose(), this._scrollLock.release(), this._handle?.release(), this._handle = null, this._abortSettle(), this._cancelDragAwait();
+	}
+	_reclaimIfOpen() {
+		if (!this.open || this._handle) return;
+		let e = this.dialog;
+		e && (this._handle = this._overlay.claim(e, { ancestryFrom: this }), this._syncDragInert());
 	}
 	_checkSlotContent(e) {
 		let t = this.shadowRoot?.querySelector(`slot[name="${e}"]`);
@@ -238,22 +251,27 @@ var E = class extends h {
 				if (this._isDragging() && !this.open && this._cancelActiveDrag(), this._userOpenChange.consume() && this.emitOpenChange(), this._dragAwaitWriteback) {
 					this._cancelDragAwait();
 					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));
+					e && !this.open ? (e.classList.remove("is-visible"), this._clearDragStyles(e)) : e && this.open && this._settleRebound(e, 0, this._dragCloseDistance(e));
 				}
-				if (!this.open && this._dragAnimation === null && !this._isDragging()) {
+				if (!this.open && !this._isDragging()) {
+					this._abortSettle();
 					let e = this.dialog;
 					e && this._clearDragStyles(e);
 				}
-				this._presence.sync(this.open), this.open ? this._nestedLayers.register() : this._nestedLayers.unregister();
+				if (this._presence.sync(this.open), this.open) {
+					this._nestedLayers.register();
+					let e = this.dialog;
+					e && (this._handle?.release(), this._handle = this._overlay.claim(e, { ancestryFrom: this }), this._syncDragInert());
+				} else this._nestedLayers.unregister(), this._handle?.release(), this._handle = null;
 			}
 			(e.has("open") || e.has("noScrollLock")) && this._syncScrollLock();
 		}
 	}
 	handleTransitionEnd(e) {
-		this._presence.handleTransitionEnd(e);
+		e.target === e.currentTarget && (this._presence.handleTransitionEnd(e), e.propertyName === "transform" && this._finishSettle());
 	}
 	handleKeydown(e) {
-		if (e.key !== "Escape") return;
+		if (e.key !== "Escape" || e.defaultPrevented) return;
 		let t = e.composedPath(), n = t.indexOf(e.currentTarget);
 		if (!(n > 0 && t.slice(0, n).some((e) => e instanceof HTMLDialogElement))) {
 			if (this._isDragging()) {
@@ -289,8 +307,17 @@ var E = class extends h {
 			this._userOpenChange.mark(), this.open = !1;
 		}
 	}
+	handleDialogPointerDown(e) {
+		this._backdropPress = {
+			onMask: e.target === e.currentTarget,
+			x: e.clientX,
+			y: e.clientY
+		};
+	}
 	handleBackdropClick(e) {
-		e.target === e.currentTarget && (this.noBackdropClose || this._isDragging() || this._closeFromUser());
+		if (e.target !== e.currentTarget || this.noBackdropClose || this._isDragging() || e.detail === 0) return;
+		let t = this._backdropPress;
+		this._backdropPress = null, t && t.onMask && (Math.hypot(e.clientX - t.x, e.clientY - t.y) > D || this._closeFromUser());
 	}
 	emitOpenChange(e = this.open) {
 		i(this, e);
@@ -299,26 +326,27 @@ var E = class extends h {
 		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" : _, i = this.draggable ? g`
+		let e = this._hasHeaderSlot || !!this.heading, n = this.dialogLabel.trim(), r = !n && !this.headless && e ? "wui-drawer-heading" : g, i = this.draggable ? h`
           <div class="wui-drawer-drag-zone" @pointerdown=${this._handleDragPointerDown}>
             <div class="wui-drawer-drag-bar"></div>
           </div>
-        ` : _;
-		return g`
+        ` : g;
+		return h`
       <dialog
-        aria-label=${n || _}
+        aria-label=${n || g}
         aria-labelledby=${r}
         @cancel=${this.handleCancel}
         @close=${this.handleNativeClose}
         @click=${this.handleBackdropClick}
+        @pointerdown=${this.handleDialogPointerDown}
         @keydown=${this.handleKeydown}
         @transitionend=${this.handleTransitionEnd}
       >
-        ${this.headless ? g`<slot></slot>${i}` : g`
+        ${this.headless ? h`<slot></slot>${i}` : h`
                 <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 ? g`<span class="wui-drawer-heading">${this.heading}</span>` : _}
+                      ${this.heading ? h`<span class="wui-drawer-heading">${this.heading}</span>` : g}
                     </slot>
                   </div>
                   <div class="wui-drawer-content">
@@ -328,7 +356,7 @@ var E = class extends h {
                     <slot name="footer" @slotchange=${this.handleFooterSlotChange}></slot>
                   </div>
                 </div>
-                ${this.closable ? g`
+                ${this.closable ? h`
                         <web-ui-button
                           class="wui-drawer-close"
                           @click=${this._closeFromUser}
@@ -339,44 +367,44 @@ var E = class extends h {
                         >
                           <web-ui-icon size="14" .icon=${t}></web-ui-icon>
                         </web-ui-button>
-                      ` : _}
+                      ` : g}
                 ${i}
               `}
       </dialog>
     `;
 	}
 };
-e([b({
+e([y({
 	type: Boolean,
 	reflect: !0
-})], E.prototype, "open", void 0), e([b({
+})], P.prototype, "open", void 0), e([y({
 	type: Boolean,
 	reflect: !0,
 	attribute: "no-scroll-lock"
-})], E.prototype, "noScrollLock", void 0), e([b({
+})], P.prototype, "noScrollLock", void 0), e([y({
 	type: Boolean,
 	reflect: !0,
 	attribute: "no-backdrop-close"
-})], E.prototype, "noBackdropClose", void 0), e([b({
+})], P.prototype, "noBackdropClose", void 0), e([y({
 	type: Boolean,
 	reflect: !0
-})], E.prototype, "controlled", void 0), e([b({
+})], P.prototype, "controlled", void 0), e([y({
 	type: String,
 	reflect: !0
-})], E.prototype, "placement", null), e([b({ type: String })], E.prototype, "heading", void 0), e([b({
+})], P.prototype, "placement", null), e([y({ type: String })], P.prototype, "heading", void 0), e([y({
 	type: Boolean,
 	reflect: !0
-})], E.prototype, "closable", void 0), e([b({
+})], P.prototype, "closable", void 0), e([y({
 	type: Boolean,
 	reflect: !0
-})], E.prototype, "headless", void 0), e([b({
+})], P.prototype, "headless", void 0), e([y({
 	type: String,
 	attribute: "dialog-label"
-})], E.prototype, "dialogLabel", void 0), e([b({
+})], P.prototype, "dialogLabel", void 0), e([y({
 	type: Boolean,
 	reflect: !0
-})], E.prototype, "draggable", void 0), E = e([y("web-ui-drawer")], E);
+})], P.prototype, "draggable", void 0), P = e([v("web-ui-drawer")], P);
 //#endregion
-export { E as WebUiDrawer };
+export { P as WebUiDrawer };
 
 //# sourceMappingURL=index.js.map