@greypan/web-ui 11.2.0 → 12.0.0

package/dist/components/drawer/index.js

@@ -1,31 +1,41 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import "../icon/index.js";
-import t from "../../classes/glass.js";
-import n from "../../icons/generated/ooui-close.js";
-import { normalizeLiteral as r } from "../../shared/normalize/index.js";
+import glass_default from "../../classes/glass.js";
+import ooui_close_default from "../../icons/generated/ooui-close.js";
+import { normalizeLiteral } from "../../shared/normalize/index.js";
 import "../button/index.js";
-import i from "../../scrollbars/internal.js";
-import { dispatchOpenChangeEvent as a } from "../../shared/open-state/index.js";
-import { defineOpenOverlay as o } from "../../shared/overlay/open-overlay.js";
-import { defineScrollLockLease as s } from "../../shared/scroll-lock/scroll-lock.js";
-import { prefersReducedMotion as c } from "../../shared/theme/reduced-motion.js";
-import { UserChangeController as l } from "../../shared/events/user-change.js";
-import u from "../../assets/modal-surface.js";
-import { defineNativeDialogPresence as d } from "../../shared/overlay/native-dialog-presence.js";
-import { ElementHeightController as f } from "../../shared/element-height/index.js";
-import { attachDragGesture as p } from "../../shared/gesture/drag-gesture.js";
-import { dampOverscroll as m } from "../../shared/gesture/physics.js";
-import { defineNestedDrawerLayers as h } from "../../shared/overlay/nested-drawer-layers.js";
-import g from "./style.js";
-import { LitElement as _, html as v, nothing as y, unsafeCSS as b } from "lit";
-import { customElement as x, property as S } from "lit/decorators.js";
-//#region src/components/drawer/index.ts
-var C = [
+import { resolveBuiltinLabel } from "../../shared/locale/builtin-labels.js";
+import scrollbar_default from "../../assets/scrollbar.js";
+import { dispatchOpenChangeEvent } from "../../shared/open-state/index.js";
+import { defineOpenOverlay } from "../../shared/overlay/open-overlay.js";
+import { defineScrollLockLease } from "../../shared/scroll-lock/scroll-lock.js";
+import { prefersReducedMotion } from "../../shared/theme/reduced-motion.js";
+import { UserChangeController } from "../../shared/events/user-change.js";
+import modal_surface_default from "../../assets/modal-surface.js";
+import { trapTabKey } from "../../shared/focus/tabbable.js";
+import { defineNativeDialogPresence } from "../../shared/overlay/native-dialog-presence.js";
+import { ElementHeightController } from "../../shared/element-height/index.js";
+import { attachDragGesture } from "../../shared/gesture/drag-gesture.js";
+import { dampOverscroll } from "../../shared/gesture/physics.js";
+import { defineNestedDrawerLayers } from "../../shared/overlay/nested-drawer-layers.js";
+import style_default from "./style.js";
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+// src/components/drawer/index.ts
+const ALLOWED_PLACEMENTS = [
 	"right",
 	"left",
 	"top",
 	"bottom"
-], w = .5, T = 10, E = 500, D = 50, O = 10, k = 120, A = 10, j = [
+];
+const DRAG_CLOSE_RATIO = .5;
+const DRAG_MIN_CLOSE_DISTANCE = 10;
+const DRAG_FLICK_VELOCITY = 500;
+const DRAG_MIN_VELOCITY_SPAN_MS = 50;
+const DRAG_REVERSE_CANCEL_THRESHOLD = 10;
+const DRAG_REQUEST_WINDOW_MS = 120;
+const BACKDROP_TAP_DISTANCE = 10;
+const HEADER_FOOTER_INTERACTIVE_SELECTOR = [
 	"button",
 	"input",
 	"select",
@@ -51,13 +61,19 @@ var C = [
 	"[role=\"combobox\"]",
 	"[role=\"slider\"]",
 	"[role=\"spinbutton\"]"
-].join(","), M = 180, N = 420, P = "cubic-bezier(0.32, 0.72, 0, 1)", F = "cubic-bezier(0.22, 1.3, 0.36, 1)", I = 1, L = 80;
-if (typeof CSS < "u" && "registerProperty" in CSS) {
+].join(",");
+const SETTLE_MIN_MS = 180;
+const SETTLE_MAX_MS = 420;
+const SETTLE_EASE_CLOSE = "cubic-bezier(0.32, 0.72, 0, 1)";
+const SETTLE_EASE_REBOUND = "cubic-bezier(0.22, 1.3, 0.36, 1)";
+const SETTLE_MIN_VELOCITY = 1;
+const SETTLE_GRACE_MS = 80;
+if (typeof CSS !== "undefined" && "registerProperty" in CSS) {
 	try {
 		CSS.registerProperty({
 			name: "--wui-internal-drag-backdrop-opacity",
 			syntax: "<number>",
-			inherits: !0,
+			inherits: true,
 			initialValue: "1"
 		});
 	} catch {}
@@ -65,7 +81,7 @@ if (typeof CSS < "u" && "registerProperty" in CSS) {
 		CSS.registerProperty({
 			name: "--wui-drawer-inset",
 			syntax: "<length>",
-			inherits: !0,
+			inherits: true,
 			initialValue: "8px"
 		});
 	} catch {}
@@ -73,7 +89,7 @@ if (typeof CSS < "u" && "registerProperty" in CSS) {
 		CSS.registerProperty({
 			name: "--wui-drawer-nested-peek-base",
 			syntax: "<length>",
-			inherits: !0,
+			inherits: true,
 			initialValue: "43.2px"
 		});
 	} catch {}
@@ -81,61 +97,106 @@ if (typeof CSS < "u" && "registerProperty" in CSS) {
 		CSS.registerProperty({
 			name: "--wui-internal-settle-duration",
 			syntax: "<time>",
-			inherits: !0,
+			inherits: true,
 			initialValue: "280ms"
 		});
 	} catch {}
 }
-var R = class extends _ {
-	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 l(), this._headerHeight = new f(this, ".wui-drawer-header", (e) => this._setAvoidance("--wui-internal-drawer-header-inset", e)), this._footerHeight = new f(this, ".wui-drawer-footer", (e) => this._setAvoidance("--wui-internal-drawer-footer-inset", e)), this._scrollLock = s().make(), this._presence = d().make({
+let WebUiDrawer = class WebUiDrawer extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.open = false;
+		this.noScrollLock = false;
+		this.noBackdropClose = false;
+		this.controlled = false;
+		this._placement = "right";
+		this.heading = "";
+		this.closable = false;
+		this.headless = false;
+		this.ariaDialogLabel = "";
+		this.ariaCloseLabel = "";
+		this.draggable = false;
+		this._hasHeaderSlot = false;
+		this._hasFooterSlot = false;
+		this._userOpenChange = new UserChangeController();
+		this._headerHeight = new ElementHeightController(this, ".wui-drawer-header", (height) => this._setAvoidance("--wui-internal-drawer-header-inset", height));
+		this._footerHeight = new ElementHeightController(this, ".wui-drawer-footer", (height) => this._setAvoidance("--wui-internal-drawer-footer-inset", height));
+		this._scrollLock = defineScrollLockLease().make();
+		this._presence = defineNativeDialogPresence().make({
 			getDialog: () => this.dialog,
 			isConnected: () => this.isConnected,
 			isOpen: () => this.open
-		}), this._nestedLayers = h().make({
+		});
+		this._nestedLayers = defineNestedDrawerLayers().make({
 			getDialog: () => this.dialog,
 			getPlacement: () => this._placement
-		}), this._overlay = o().make({
+		});
+		this._overlay = defineOpenOverlay().make({
 			requestClose: () => this._closeFromUser(),
 			isConnected: () => this.isConnected
-		}), 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;
+		});
+		this._handle = null;
+		this._dragGesture = null;
+		this._dragInitialOffset = 0;
+		this._dragOffset = 0;
+		this._cancelBaseline = 0;
+		this._lastAxisPos = 0;
+		this._swipeIntentDisp = -1;
+		this._swipeCancelled = false;
+		this._settleFinish = null;
+		this._dragAwaitWriteback = false;
+		this._handleDragWritebackTimeout = () => {
+			this._dragRequestTimer = void 0;
+			if (!this._dragAwaitWriteback || !this.open || this._isDragging()) {
+				this._dragAwaitWriteback = false;
 				return;
 			}
-			this._dragAwaitWriteback = !1;
-			let e = this.dialog;
-			e && (e.classList.add("is-visible"), this._settleRebound(e, 0, this._dragCloseDistance(e)));
-		}, this._closeFromUser = () => {
-			if (this.open && !this._dragAwaitWriteback) {
-				if (this.controlled) {
-					this.emitOpenChange(!1);
-					return;
-				}
-				this._userOpenChange.mark(), this.close();
+			this._dragAwaitWriteback = false;
+			const dialog = this.dialog;
+			if (!dialog) return;
+			dialog.classList.add("is-visible");
+			this._settleRebound(dialog, 0, this._dragCloseDistance(dialog));
+		};
+		this._closeFromUser = () => {
+			if (!this.open) return;
+			if (this._dragAwaitWriteback) return;
+			if (this.controlled) {
+				this.emitOpenChange(false);
+				return;
 			}
-		}, this._backdropPress = null;
+			this._userOpenChange.mark();
+			this.close();
+		};
+		this._backdropPress = null;
 	}
 	static {
 		this.styles = [
-			b(t),
-			b(u),
-			b(i),
-			b(g)
+			unsafeCSS(glass_default),
+			unsafeCSS(modal_surface_default),
+			unsafeCSS(scrollbar_default),
+			unsafeCSS(style_default)
 		];
 	}
 	get placement() {
 		return this._placement;
 	}
-	set placement(e) {
-		let t = this._placement;
-		this._placement = r(e, C, "right"), this.requestUpdate("placement", t);
+	set placement(v) {
+		const old = this._placement;
+		this._placement = normalizeLiteral(v, ALLOWED_PLACEMENTS, "right");
+		this.requestUpdate("placement", old);
+	}
+	/** @deprecated 用 `aria-dialog-label`。 */
+	get dialogLabel() {
+		return this.ariaDialogLabel;
+	}
+	set dialogLabel(value) {
+		this.ariaDialogLabel = value;
 	}
 	get dialog() {
 		return this.shadowRoot?.querySelector("dialog") ?? null;
 	}
-	_setAvoidance(e, t) {
-		this.style.setProperty(e, t > 0 ? `calc(${t}px + var(--wui-drawer-drag-zone-inset, var(--wui-space-1, 4px)))` : "0px");
+	_setAvoidance(property, height) {
+		this.style.setProperty(property, height > 0 ? `calc(${height}px + var(--wui-drawer-drag-zone-inset, var(--wui-space-1, 4px)))` : "0px");
 	}
 	get _dragAxis() {
 		return this._placement === "left" || this._placement === "right" ? "x" : "y";
@@ -149,228 +210,401 @@ var R = class extends _ {
 		}
 	}
 	_measureDragSize() {
-		let e = this.dialog;
-		return e ? this._dragAxis === "x" ? e.offsetWidth : e.offsetHeight : 0;
+		const dialog = this.dialog;
+		if (!dialog) return 0;
+		return this._dragAxis === "x" ? dialog.offsetWidth : dialog.offsetHeight;
 	}
-	_dragCloseThreshold(e) {
-		return Math.max(e * w, T);
+	_dragCloseThreshold(size) {
+		return Math.max(size * DRAG_CLOSE_RATIO, DRAG_MIN_CLOSE_DISTANCE);
 	}
-	_readDrawerInset(e) {
-		let t = getComputedStyle(e).getPropertyValue("--wui-internal-drawer-inset"), n = Number.parseFloat(t);
-		return Number.isFinite(n) ? n : 0;
+	_readDrawerInset(dialog) {
+		const raw = getComputedStyle(dialog).getPropertyValue("--wui-internal-drawer-inset");
+		const parsed = Number.parseFloat(raw);
+		return Number.isFinite(parsed) ? parsed : 0;
 	}
-	_dragCloseDistance(e) {
-		return this._measureDragSize() + this._readDrawerInset(e);
+	_dragCloseDistance(dialog) {
+		return this._measureDragSize() + this._readDrawerInset(dialog);
 	}
 	_isDragging() {
-		return this._dragGesture?.isDragging() ?? !1;
+		return this._dragGesture?.isDragging() ?? false;
 	}
 	_syncDragInert() {
 		this._handle?.setInert(this._isDragging());
 	}
 	_cancelDragAwait() {
-		this._dragRequestTimer !== void 0 && (clearTimeout(this._dragRequestTimer), this._dragRequestTimer = void 0), this._dragAwaitWriteback = !1;
-	}
+		if (this._dragRequestTimer !== void 0) {
+			clearTimeout(this._dragRequestTimer);
+			this._dragRequestTimer = void 0;
+		}
+		this._dragAwaitWriteback = false;
+	}
+	/**
+	* 上下 placement 的 header / footer 自己接拖拽手势。
+	*
+	* 为什么不是「把 drag zone 铺到 header 上」：那样 header 里的控件会被透明命中层吞掉，
+	* 正是 A6 修掉的那条缺陷。这里在事件层让开——控件照常收自己的事件，拖拽只在
+	* 「落点不是可点控件」时起手。
+	*
+	* 三道闸门任一不成立就不接管：
+	* 1. placement 必须是上下。左右 placement 的拖拽轴是 x，端头在竖边上，header
+	*    既不在可抓边缘上也不该起手（R4 的行为侧）。
+	* 2. 下层嵌套 drawer 整套拖拽提示一起退场。drag zone 与 drag edge 靠 CSS 的 pointer-events 退场，
+	*    事件层必须自己判同一条，否则 header 会成为唯一一条漏网的入口。
+	* 3. 落点路径里有可点控件就让开——控件优先于「这一块可拖」。
+	*/
 	_handleSectionDragPointerDown(e) {
 		if (this._placement !== "top" && this._placement !== "bottom") return;
-		let t = (e.currentTarget?.closest(".wui-drawer-header, .wui-drawer-footer"))?.classList.contains("wui-drawer-header") ?? !1;
-		(this._placement !== "bottom" || t) && (this._placement === "top" && t || this.dialog?.classList.contains("is-nested-lower") || this._isInteractivePath(e) || this._handleDragPointerDown(e));
-	}
+		const isHeader = (e.currentTarget?.closest(".wui-drawer-header, .wui-drawer-footer"))?.classList.contains("wui-drawer-header") ?? false;
+		if (this._placement === "bottom" && !isHeader) return;
+		if (this._placement === "top" && isHeader) return;
+		if (this.dialog?.classList.contains("is-nested-lower")) return;
+		if (this._isInteractivePath(e)) return;
+		this._handleDragPointerDown(e);
+	}
+	/**
+	* 按下路径上是否出现可点控件。
+	*
+	* 走 composedPath 而不是 event.target：消费侧 slotted 控件与组件库自绘控件都各有
+	* shadow root，target 只给出最内层那个节点，沿 parentElement 上行会在 shadow 边界
+	* 断掉，控件自己那层反而看不见。
+	*/
 	_isInteractivePath(e) {
-		let t = typeof e.composedPath == "function" ? e.composedPath() : [e.target];
-		for (let e of t) if (e instanceof Element && e.matches(j)) return !0;
-		return !1;
+		const path = typeof e.composedPath === "function" ? e.composedPath() : [e.target];
+		for (const node of path) if (node instanceof Element && node.matches(HEADER_FOOTER_INTERACTIVE_SELECTOR)) return true;
+		return false;
 	}
 	_handleDragPointerDown(e) {
-		if (!this.open || !this.draggable || this._isDragging() || e.isPrimary === !1) return;
-		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._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 = p(e, {
+		if (!this.open || !this.draggable || this._isDragging()) return;
+		if (e.isPrimary === false) return;
+		const dialog = this.dialog;
+		if (!dialog) return;
+		if (!dialog.classList.contains("is-visible")) return;
+		const currentTransform = getComputedStyle(dialog).transform;
+		const axisValue = currentTransform && currentTransform !== "none" && typeof DOMMatrixReadOnly === "function" ? new DOMMatrixReadOnly(currentTransform)[this._dragAxis === "x" ? "m41" : "m42"] : 0;
+		this._abortSettle();
+		this._cancelDragAwait();
+		this._dragInitialOffset = axisValue * this._dragCloseSign;
+		this._dragOffset = this._dragInitialOffset;
+		const axisPos = this._dragAxis === "x" ? e.clientX : e.clientY;
+		this._cancelBaseline = axisPos;
+		this._lastAxisPos = axisPos;
+		this._swipeIntentDisp = -1;
+		this._swipeCancelled = false;
+		dialog.classList.add("is-dragging");
+		this._applyDragOffset(dialog, this._dragOffset);
+		this._dragGesture = attachDragGesture(e, {
 			axis: this._dragAxis,
-			calibrateOnFirstMove: !0,
-			onMove: (e) => {
-				let n = (this._dragAxis === "x" ? e.deltaX : e.deltaY) * this._dragCloseSign;
-				this._dragOffset = this._dragInitialOffset + m(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);
+			calibrateOnFirstMove: true,
+			onMove: (info) => {
+				const dragDelta = (this._dragAxis === "x" ? info.deltaX : info.deltaY) * this._dragCloseSign;
+				this._dragOffset = this._dragInitialOffset + dampOverscroll(dragDelta);
+				this._trackSwipeCancel(this._dragAxis === "x" ? info.clientX : info.clientY, dragDelta);
+				const dragSize = this._measureDragSize();
+				const dragDisplacement = this._dragOffset - this._dragInitialOffset;
+				dialog.classList.toggle("is-drag-close", dragDisplacement > this._dragCloseThreshold(dragSize));
+				this._applyDragOffset(dialog, this._dragOffset);
 			},
-			onEnd: (e) => {
-				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, D) * 1e3 : 0, o = i > 0 && a >= E && !this._swipeCancelled;
-				i > this._dragCloseThreshold(n) || o ? this._settleToClose(t, r) : this._settleRebound(t, r, this._dragOffset);
+			onEnd: (info) => {
+				this._dragGesture = null;
+				this._syncDragInert();
+				dialog.classList.remove("is-dragging", "is-drag-close");
+				const size = this._measureDragSize();
+				const velocity = (this._dragAxis === "x" ? info.velocityX : info.velocityY) * this._dragCloseSign;
+				const displacement = this._dragOffset - this._dragInitialOffset;
+				const netVelocity = info.duration > 0 ? displacement / Math.max(info.duration, DRAG_MIN_VELOCITY_SPAN_MS) * 1e3 : 0;
+				const flicked = displacement > 0 && netVelocity >= DRAG_FLICK_VELOCITY && !this._swipeCancelled;
+				if (displacement > this._dragCloseThreshold(size) || flicked) this._settleToClose(dialog, velocity);
+				else this._settleRebound(dialog, velocity, this._dragOffset);
 			},
 			onCancel: () => {
-				this._dragGesture = null, this._syncDragInert(), t.classList.remove("is-dragging", "is-drag-close"), this._settleRebound(t, 0, this._dragOffset);
+				this._dragGesture = null;
+				this._syncDragInert();
+				dialog.classList.remove("is-dragging", "is-drag-close");
+				this._settleRebound(dialog, 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);
+		});
+		this._syncDragInert();
+	}
+	_trackSwipeCancel(axisPos, displacement) {
+		const movement = axisPos - this._lastAxisPos;
+		this._lastAxisPos = axisPos;
+		if (movement < 0 && axisPos > this._cancelBaseline || movement > 0 && axisPos < this._cancelBaseline) this._cancelBaseline = axisPos;
+		if (this._swipeIntentDisp < 0) {
+			if (displacement > 0) this._swipeIntentDisp = displacement;
 			return;
 		}
-		let r = (e - this._cancelBaseline) * this._dragCloseSign;
-		r > this._dragCloseThreshold(this._measureDragSize()) ? this._swipeCancelled = !1 : this._swipeIntentDisp - r >= O && (this._swipeCancelled = !0);
+		const cancelDisplacement = (axisPos - this._cancelBaseline) * this._dragCloseSign;
+		if (cancelDisplacement > this._dragCloseThreshold(this._measureDragSize())) this._swipeCancelled = false;
+		else if (this._swipeIntentDisp - cancelDisplacement >= DRAG_REVERSE_CANCEL_THRESHOLD) this._swipeCancelled = true;
 	}
 	_cancelActiveDrag() {
 		if (!this._isDragging()) return;
-		this._dragGesture?.destroy(), this._dragGesture = null, this._syncDragInert();
-		let e = this.dialog;
-		e && (e.classList.remove("is-dragging", "is-drag-close"), this._clearDragStyles(e));
-	}
-	_applyDragOffset(e, t) {
-		let n = t * this._dragCloseSign;
-		e.style.transform = this._dragAxis === "x" ? `translateX(${n}px)` : `translateY(${n}px)`;
-		let r = this._measureDragSize(), i = r > 0 ? Math.min(1, Math.max(0, t / r)) : 0;
-		e.style.setProperty("--wui-internal-drag-backdrop-opacity", String(1 - i));
-	}
-	_clearDragStyles(e) {
-		e.style.removeProperty("transform"), e.style.removeProperty("--wui-internal-drag-backdrop-opacity");
-	}
-	_settleToClose(e, t) {
-		let n = this._dragOffset;
+		this._dragGesture?.destroy();
+		this._dragGesture = null;
+		this._syncDragInert();
+		const dialog = this.dialog;
+		if (!dialog) return;
+		dialog.classList.remove("is-dragging", "is-drag-close");
+		this._clearDragStyles(dialog);
+	}
+	_applyDragOffset(dialog, offset) {
+		const value = offset * this._dragCloseSign;
+		dialog.style.transform = this._dragAxis === "x" ? `translateX(${value}px)` : `translateY(${value}px)`;
+		const size = this._measureDragSize();
+		const progress = size > 0 ? Math.min(1, Math.max(0, offset / size)) : 0;
+		dialog.style.setProperty("--wui-internal-drag-backdrop-opacity", String(1 - progress));
+	}
+	_clearDragStyles(dialog) {
+		dialog.style.removeProperty("transform");
+		dialog.style.removeProperty("--wui-internal-drag-backdrop-opacity");
+	}
+	_settleToClose(dialog, velocity) {
+		const from = this._dragOffset;
 		this._dragOffset = 0;
-		let r = this._dragCloseDistance(e), i = () => {
-			this.controlled ? this._applyDragOffset(e, r) : (e.classList.remove("is-visible"), this._clearDragStyles(e)), this._closeFromDrag();
+		const to = this._dragCloseDistance(dialog);
+		const finishClose = () => {
+			if (this.controlled) this._applyDragOffset(dialog, to);
+			else {
+				dialog.classList.remove("is-visible");
+				this._clearDragStyles(dialog);
+			}
+			this._closeFromDrag();
 		};
-		if (c(this) || Math.abs(r - n) < 1) {
-			e.classList.remove("is-dragging"), i();
+		if (prefersReducedMotion(this) || Math.abs(to - from) < 1) {
+			dialog.classList.remove("is-dragging");
+			finishClose();
 			return;
 		}
-		this._startSettle(e, r, 0, this._settleDuration(Math.abs(r - n), t), P, i);
+		this._startSettle(dialog, to, 0, this._settleDuration(Math.abs(to - from), velocity), SETTLE_EASE_CLOSE, finishClose);
 	}
-	_settleRebound(e, t, n) {
+	_settleRebound(dialog, velocity, from) {
 		this._dragOffset = 0;
-		let r = () => {
-			this._clearDragStyles(e);
+		const finishRebound = () => {
+			this._clearDragStyles(dialog);
 		};
-		if (c(this) || Math.abs(n) < 1) {
-			e.classList.remove("is-dragging"), r();
+		if (prefersReducedMotion(this) || Math.abs(from) < 1) {
+			dialog.classList.remove("is-dragging");
+			finishRebound();
 			return;
 		}
-		this._startSettle(e, 0, 1, this._settleDuration(Math.abs(n), t), F, r);
+		this._startSettle(dialog, 0, 1, this._settleDuration(Math.abs(from), velocity), SETTLE_EASE_REBOUND, finishRebound);
 	}
-	_settleDuration(e, t) {
-		let n = e / Math.max(Math.abs(t), I) * 1e3;
-		return Math.min(N, Math.max(M, n));
+	_settleDuration(distance, velocity) {
+		const ms = distance / Math.max(Math.abs(velocity), SETTLE_MIN_VELOCITY) * 1e3;
+		return Math.min(SETTLE_MAX_MS, Math.max(SETTLE_MIN_MS, ms));
 	}
-	_startSettle(e, t, n, r, i, a) {
+	_startSettle(dialog, offset, backdropOpacity, duration, easing, onDone) {
 		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 + L);
+		const sign = this._dragCloseSign;
+		dialog.style.setProperty("--wui-internal-settle-duration", `${duration}ms`);
+		dialog.style.setProperty("--wui-internal-settle-easing", easing);
+		dialog.style.transform = this._dragAxis === "x" ? `translateX(${offset * sign}px)` : `translateY(${offset * sign}px)`;
+		dialog.style.setProperty("--wui-internal-drag-backdrop-opacity", String(backdropOpacity));
+		dialog.classList.add("is-settling");
+		dialog.classList.remove("is-dragging");
+		this._settleFinish = onDone;
+		this._settleTimer = setTimeout(() => this._finishSettle(), duration + SETTLE_GRACE_MS);
 	}
 	_finishSettle() {
-		let e = this._settleFinish;
-		e && (this._abortSettle(), e());
+		const finish = this._settleFinish;
+		if (!finish) return;
+		this._abortSettle();
+		finish();
 	}
 	_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"));
+		this._settleFinish = null;
+		if (this._settleTimer !== void 0) {
+			clearTimeout(this._settleTimer);
+			this._settleTimer = void 0;
+		}
+		const dialog = this.dialog;
+		if (!dialog) return;
+		dialog.classList.remove("is-settling");
+		dialog.style.removeProperty("--wui-internal-settle-duration");
+		dialog.style.removeProperty("--wui-internal-settle-easing");
 	}
 	_closeFromDrag() {
-		this._closeFromUser(), this.controlled && (this._dragAwaitWriteback = !0, this._dragRequestTimer = setTimeout(this._handleDragWritebackTimeout, k));
+		this._closeFromUser();
+		if (this.controlled) {
+			this._dragAwaitWriteback = true;
+			this._dragRequestTimer = setTimeout(this._handleDragWritebackTimeout, DRAG_REQUEST_WINDOW_MS);
+		}
 	}
 	connectedCallback() {
-		super.connectedCallback(), this._resyncSlotPresence(), this._presence.reconcile(), this.open && this._nestedLayers.register(), this._syncScrollLock(), this._reclaimIfOpen();
+		super.connectedCallback();
+		this._resyncSlotPresence();
+		this._presence.reconcile();
+		if (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._handle?.release(), this._handle = null, this._abortSettle(), 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();
 	}
+	/** 「重挂载恢复」的调用方一半：模块刻意不观察 DOM 连接状态。 */
 	_reclaimIfOpen() {
 		if (!this.open || this._handle) return;
-		let e = this.dialog;
-		e && (this._handle = this._overlay.claim(e, { ancestryFrom: this }), this._syncDragInert());
-	}
+		const dialog = this.dialog;
+		if (!dialog) return;
+		this._handle = this._overlay.claim(dialog, { ancestryFrom: this });
+		this._syncDragInert();
+	}
+	/**
+	* 对账 header / footer slot 的有无，**只在真的变了时排一次更新**。
+	*
+	* 排更新是这条对账不可省的一半：`showHeader` 与 footer 的 `?hidden` 只在 render 里求值，
+	* 而 Lit 的 `connectedCallback` 只做 `enableUpdating(true)` 与 `setConnected(true)`，本身不排
+	* 更新。两条 slotchange 处理器也接不住这条路径——slotchange 只在**分配集合**变化时派发，
+	* 断连期间清空槽位内容时宿主节点本身没动，事件不触发（Chromium 实测）。
+	*
+	* 漏掉这一半的后果：断连前有 footer、重连时已清空的 drawer 留下一节空的 footer。它在 style.css
+	* 的 padding 下仍有真实高度（实测 32px），于是底部一条点不动的死带，拖拽 drag zone 的让位量也照
+	* 它算而不归零。
+	*
+	* 判据取 light DOM 子节点而非 `slot.assignedNodes()`：首次连接时 shadow 尚未渲染，slot 元素
+	* 还不存在，那一侧会直接跳过（首次连接的 presence 由 `firstUpdated()` 与 slotchange 兜底）；
+	* 这里要的正是重连对账——shadow root 跨断连保留，两侧都可用，但只有子节点扫描不依赖渲染
+	* 时序。「只在真变了才排」与两条 slotchange 处理器同一纪律，避免每次重连都多一次空渲染。
+	*/
 	_resyncSlotPresence() {
-		let e = this._hasSlottedChild("header"), t = this._hasSlottedChild("footer");
-		(e !== this._hasHeaderSlot || t !== this._hasFooterSlot) && (this._hasHeaderSlot = e, this._hasFooterSlot = t, this.requestUpdate());
-	}
-	_hasSlottedChild(e) {
-		return Array.from(this.children).some((t) => t.getAttribute("slot") === e);
-	}
-	_checkSlotContent(e) {
-		let t = this.shadowRoot?.querySelector(`slot[name="${e}"]`);
-		if (!t) return;
-		let n = t.assignedNodes().length > 0;
-		e === "footer" && n !== this._hasFooterSlot && (this._hasFooterSlot = n, this.requestUpdate());
+		const hasHeader = this._hasSlottedChild("header");
+		const hasFooter = this._hasSlottedChild("footer");
+		if (hasHeader === this._hasHeaderSlot && hasFooter === this._hasFooterSlot) return;
+		this._hasHeaderSlot = hasHeader;
+		this._hasFooterSlot = hasFooter;
+		this.requestUpdate();
+	}
+	_hasSlottedChild(name) {
+		return Array.from(this.children).some((child) => child.getAttribute("slot") === name);
+	}
+	_checkSlotContent(name) {
+		const slot = this.shadowRoot?.querySelector(`slot[name="${name}"]`);
+		if (!slot) return;
+		const has = slot.assignedNodes().length > 0;
+		if (name === "footer" && has !== this._hasFooterSlot) {
+			this._hasFooterSlot = has;
+			this.requestUpdate();
+		}
 	}
 	handleHeaderSlotChange(e) {
-		let t = e.target.assignedNodes().length > 0;
-		t !== this._hasHeaderSlot && (this._hasHeaderSlot = t, this.requestUpdate());
+		const has = e.target.assignedNodes().length > 0;
+		if (has !== this._hasHeaderSlot) {
+			this._hasHeaderSlot = has;
+			this.requestUpdate();
+		}
 	}
 	handleFooterSlotChange(e) {
-		let t = e.target.assignedNodes().length > 0;
-		t !== this._hasFooterSlot && (this._hasFooterSlot = t, this.requestUpdate());
-	}
-	updated(e) {
-		if (super.updated(e), this.isConnected) {
-			if (e.has("open")) {
-				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._settleRebound(e, 0, this._dragCloseDistance(e));
-				}
-				if (!this.open && !this._isDragging()) {
-					this._abortSettle();
-					let e = this.dialog;
-					e && this._clearDragStyles(e);
+		const has = e.target.assignedNodes().length > 0;
+		if (has !== this._hasFooterSlot) {
+			this._hasFooterSlot = has;
+			this.requestUpdate();
+		}
+	}
+	updated(props) {
+		super.updated(props);
+		if (!this.isConnected) return;
+		if (props.has("open")) {
+			if (this._isDragging() && !this.open) this._cancelActiveDrag();
+			if (this._userOpenChange.consume()) this.emitOpenChange();
+			if (this._dragAwaitWriteback) {
+				this._cancelDragAwait();
+				const dialog = this.dialog;
+				if (dialog && !this.open) {
+					dialog.classList.remove("is-visible");
+					this._clearDragStyles(dialog);
+				} else if (dialog && this.open) this._settleRebound(dialog, 0, this._dragCloseDistance(dialog));
+			}
+			if (!this.open && !this._isDragging()) {
+				this._abortSettle();
+				const dialog = this.dialog;
+				if (dialog) this._clearDragStyles(dialog);
+			}
+			this._presence.sync(this.open);
+			if (this.open) {
+				window.getSelection()?.removeAllRanges();
+				this._nestedLayers.register();
+				const dialog = this.dialog;
+				if (dialog) {
+					this._handle?.release();
+					this._handle = this._overlay.claim(dialog, { ancestryFrom: this });
+					this._syncDragInert();
 				}
-				if (this._presence.sync(this.open), this.open) {
-					window.getSelection()?.removeAllRanges(), 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;
+			} else {
+				this._nestedLayers.unregister();
+				this._handle?.release();
+				this._handle = null;
 			}
-			(e.has("open") || e.has("noScrollLock")) && this._syncScrollLock();
 		}
+		if (props.has("open") || props.has("noScrollLock")) this._syncScrollLock();
 	}
 	handleTransitionEnd(e) {
-		e.target === e.currentTarget && (this._presence.handleTransitionEnd(e), e.propertyName === "transform" && this._finishSettle());
+		if (e.target !== e.currentTarget) return;
+		this._presence.handleTransitionEnd(e);
+		if (e.propertyName === "transform") this._finishSettle();
+	}
+	_isNestedDialogEvent(e) {
+		const path = e.composedPath();
+		const ownDialogIndex = path.indexOf(e.currentTarget);
+		return ownDialogIndex > 0 && path.slice(0, ownDialogIndex).some((node) => node instanceof HTMLDialogElement);
 	}
 	handleKeydown(e) {
-		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()) {
-				e.preventDefault();
-				return;
-			}
-			e.preventDefault(), this._closeFromUser();
+		if (e.key === "Tab") {
+			if (e.defaultPrevented || this._isNestedDialogEvent(e)) return;
+			const dialog = this.dialog;
+			if (dialog) trapTabKey(e, dialog);
+			return;
+		}
+		if (e.key !== "Escape") return;
+		if (e.defaultPrevented) return;
+		if (this._isNestedDialogEvent(e)) return;
+		if (this._isDragging()) {
+			e.preventDefault();
+			return;
 		}
+		e.preventDefault();
+		this._closeFromUser();
 	}
 	show() {
-		this.open ||= !0;
+		if (this.open) return;
+		this.open = true;
 	}
 	close() {
-		this.open &&= !1;
+		if (!this.open) return;
+		this.open = false;
 	}
 	handleCancel(e) {
-		e.preventDefault(), this._closeFromUser();
+		e.preventDefault();
+		this._closeFromUser();
 	}
 	handleNativeClose() {
 		if (!this.open) {
 			this._presence.handleNativeClose();
 			return;
 		}
-		if (!this._presence.handleNativeClose()) {
-			if (this._dragAwaitWriteback) {
-				this._cancelDragAwait();
-				return;
-			}
-			if (this.controlled) {
-				this._presence.sync(!0), this.emitOpenChange(!1);
-				return;
-			}
-			this._userOpenChange.mark(), this.open = !1;
+		if (this._presence.handleNativeClose()) return;
+		if (this._dragAwaitWriteback) {
+			this._cancelDragAwait();
+			return;
+		}
+		if (this.controlled) {
+			this._presence.sync(true);
+			this.emitOpenChange(false);
+			return;
 		}
+		this._userOpenChange.mark();
+		this.open = false;
 	}
 	handleDialogPointerDown(e) {
 		this._backdropPress = {
@@ -380,26 +614,36 @@ var R = class extends _ {
 		};
 	}
 	handleBackdropClick(e) {
-		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) > A || this._closeFromUser());
-	}
-	emitOpenChange(e = this.open) {
-		a(this, e);
-	}
-	_syncScrollLock(e = this.open) {
-		this._scrollLock.sync(e && !this.noScrollLock);
+		if (e.target !== e.currentTarget) return;
+		if (this.noBackdropClose) return;
+		if (this._isDragging()) return;
+		if (e.detail === 0) return;
+		const press = this._backdropPress;
+		this._backdropPress = null;
+		if (!press || !press.onMask) return;
+		if (Math.hypot(e.clientX - press.x, e.clientY - press.y) > BACKDROP_TAP_DISTANCE) return;
+		this._closeFromUser();
+	}
+	emitOpenChange(open = this.open) {
+		dispatchOpenChangeEvent(this, open);
+	}
+	_syncScrollLock(isOpen = this.open) {
+		this._scrollLock.sync(isOpen && !this.noScrollLock);
 	}
 	render() {
-		let e = this._hasHeaderSlot || !!this.heading, t = this.dialogLabel.trim(), r = !t && !this.headless && e ? "wui-drawer-heading" : y, i = this.placement === "top" || this.placement === "bottom", a = this.draggable ? v`
-          ${i ? v`<div class="wui-drawer-drag-edge" @pointerdown=${this._handleDragPointerDown}></div>` : y}
+		const showHeader = this._hasHeaderSlot || !!this.heading;
+		const dialogLabel = this.ariaDialogLabel.trim();
+		const dialogLabelledBy = !dialogLabel && !this.headless && showHeader ? "wui-drawer-heading" : nothing;
+		const needsEdgeBand = this.placement === "top" || this.placement === "bottom";
+		const dragBar = this.draggable ? html`
+          ${needsEdgeBand ? html`<div class="wui-drawer-drag-edge" @pointerdown=${this._handleDragPointerDown}></div>` : nothing}
           <div class="wui-drawer-drag-zone" @pointerdown=${this._handleDragPointerDown}></div>
           <div class="wui-drawer-drag-bar"></div>
-        ` : y;
-		return v`
+        ` : nothing;
+		return html`
       <dialog
-        aria-label=${t || y}
-        aria-labelledby=${r}
+        aria-label=${dialogLabel || nothing}
+        aria-labelledby=${dialogLabelledBy}
         @cancel=${this.handleCancel}
         @close=${this.handleNativeClose}
         @click=${this.handleBackdropClick}
@@ -407,16 +651,16 @@ var R = class extends _ {
         @keydown=${this.handleKeydown}
         @transitionend=${this.handleTransitionEnd}
       >
-        ${this.headless ? v`<slot></slot>${a}` : v`
+        ${this.headless ? html`<slot></slot>${dragBar}` : html`
                 <div class="wui-drawer-body wui-glass">
                   <div
                     class="wui-drawer-header"
                     id="wui-drawer-heading"
-                    ?hidden=${!e}
+                    ?hidden=${!showHeader}
                     @pointerdown=${this._handleSectionDragPointerDown}
                   >
                     <slot name="header" @slotchange=${this.handleHeaderSlotChange}>
-                      ${this.heading ? v`<span class="wui-drawer-heading">${this.heading}</span>` : y}
+                      ${this.heading ? html`<span class="wui-drawer-heading">${this.heading}</span>` : nothing}
                     </slot>
                   </div>
                   <div class="wui-drawer-content wui-scroll">
@@ -430,55 +674,72 @@ var R = class extends _ {
                     <slot name="footer" @slotchange=${this.handleFooterSlotChange}></slot>
                   </div>
                 </div>
-                ${this.closable ? v`
+                ${this.closable ? html`
                         <web-ui-button
                           class="wui-drawer-close"
                           @click=${this._closeFromUser}
-                          aria-label="Close"
+                          aria-label=${resolveBuiltinLabel("close", this.ariaCloseLabel)}
                           variant="secondary"
                           icon
                           size="26"
                         >
-                          <web-ui-icon size="14" .icon=${n}></web-ui-icon>
+                          <web-ui-icon size="14" .icon=${ooui_close_default}></web-ui-icon>
                         </web-ui-button>
-                      ` : y}
-                ${a}
+                      ` : nothing}
+                ${dragBar}
               `}
       </dialog>
     `;
 	}
 };
-e([S({
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], R.prototype, "open", void 0), e([S({
+	reflect: true
+})], WebUiDrawer.prototype, "open", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0,
+	reflect: true,
 	attribute: "no-scroll-lock"
-})], R.prototype, "noScrollLock", void 0), e([S({
+})], WebUiDrawer.prototype, "noScrollLock", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0,
+	reflect: true,
 	attribute: "no-backdrop-close"
-})], R.prototype, "noBackdropClose", void 0), e([S({
+})], WebUiDrawer.prototype, "noBackdropClose", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], R.prototype, "controlled", void 0), e([S({
+	reflect: true
+})], WebUiDrawer.prototype, "controlled", void 0);
+__decorate([property({
 	type: String,
-	reflect: !0
-})], R.prototype, "placement", null), e([S({ type: String })], R.prototype, "heading", void 0), e([S({
+	reflect: true
+})], WebUiDrawer.prototype, "placement", null);
+__decorate([property({ type: String })], WebUiDrawer.prototype, "heading", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], R.prototype, "closable", void 0), e([S({
+	reflect: true
+})], WebUiDrawer.prototype, "closable", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], R.prototype, "headless", void 0), e([S({
+	reflect: true
+})], WebUiDrawer.prototype, "headless", void 0);
+__decorate([property({
+	type: String,
+	attribute: "aria-dialog-label"
+})], WebUiDrawer.prototype, "ariaDialogLabel", void 0);
+__decorate([property({
 	type: String,
 	attribute: "dialog-label"
-})], R.prototype, "dialogLabel", void 0), e([S({
+})], WebUiDrawer.prototype, "dialogLabel", null);
+__decorate([property({
+	type: String,
+	attribute: "aria-close-label"
+})], WebUiDrawer.prototype, "ariaCloseLabel", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], R.prototype, "draggable", void 0), R = e([x("web-ui-drawer")], R);
-//#endregion
-export { R as WebUiDrawer };
+	reflect: true
+})], WebUiDrawer.prototype, "draggable", void 0);
+WebUiDrawer = __decorate([customElement("web-ui-drawer")], WebUiDrawer);
+export { WebUiDrawer };
 
 //# sourceMappingURL=index.js.map