@greypan/web-ui 8.1.0 → 9.1.0

package/dist/components/context-menu/index.js

@@ -1,24 +1,24 @@
 import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
-import { dispatchOpenChangeEvent as t } from "../../shared/open-state/index.js";
-import { computePosition as n, shift as r } from "../../node_modules/.pnpm/@floating-ui_dom@1.8.0/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
-import { defineOverlayPositioningGeneration as i } from "../../shared/overlay/positioning-generation.js";
-import { hideOverlayPresence as a, showOverlayPresence as o } from "../../shared/overlay/presence.js";
-import { defineOpenOverlay as s } from "../../shared/overlay/open-overlay.js";
-import { defineScrollLockLease as c } from "../../shared/scroll-lock/scroll-lock.js";
-import { UserChangeController as l } from "../../shared/events/user-change.js";
-import "../dropdown-divider/index.js";
-import "../dropdown-header/index.js";
-import "../dropdown-item/index.js";
-import { captureFrameworkAnchors as u, focusMenuItem as d, getMenuChildren as f, getMenuItemFromEvent as p, hideNestedMenuChildren as m, moveMenuChildren as h, orderManagedMenuItems as g, reconcileManagedMenuItems as _, restoreFrameworkAnchors as v, returnManagedMenuItemsToSlot as y } from "../../shared/menu-portal/menu-tree.js";
-import { createClosingSubmenuStack as b, createMenuHoverBinder as x, createMenuOutsideClickGuard as S, getEnabledMenuLevelItems as C, getFocusedMenuItemFromPanels as w, handleMenuKeyboard as T } from "../../shared/menu-behavior/index.js";
-import { createMenuPortalOverlay as E } from "../../shared/menu-portal/menu-portal.js";
-import D from "./style.js";
-import { LitElement as O, html as k, unsafeCSS as A } from "lit";
-import { customElement as j, property as M, state as N } from "lit/decorators.js";
+import { normalizeNumber as t } from "../../shared/normalize/index.js";
+import { dispatchOpenChangeEvent as n } from "../../shared/open-state/index.js";
+import { computePosition as r, flip as i, shift as a } from "../../node_modules/.pnpm/@floating-ui_dom@1.8.0/node_modules/@floating-ui/dom/dist/floating-ui.dom.js";
+import { defineOverlayPositioningGeneration as o } from "../../shared/overlay/positioning-generation.js";
+import { hideOverlayPresence as s, showOverlayPresence as c } from "../../shared/overlay/presence.js";
+import { defineOpenOverlay as l } from "../../shared/overlay/open-overlay.js";
+import { findNearestTheme as u } from "../../shared/overlay/theme-overlay-scope.js";
+import { defineScrollLockLease as d } from "../../shared/scroll-lock/scroll-lock.js";
+import { UserChangeController as f } from "../../shared/events/user-change.js";
+import { captureFrameworkAnchors as p, findFocusedMenuItem as m, focusMenuItem as h, getMenuChildren as g, getMenuItemFromEvent as _, hideNestedMenuChildren as v, moveMenuChildren as y, orderManagedMenuItems as b, reconcileManagedMenuItems as x, restoreFrameworkAnchors as S, returnManagedMenuItemsToSlot as C } from "../../shared/menu-portal/menu-tree.js";
+import { createClosingSubmenuStack as w, createMenuHoverBinder as T, createMenuOutsideClickGuard as E, getEnabledMenuLevelItems as D, getFocusedMenuItemFromPanels as O, handleMenuKeyboard as k } from "../../shared/menu-behavior/index.js";
+import { createMenuPortalOverlay as A } from "../../shared/menu-portal/menu-portal.js";
+import j from "./scrim.js";
+import M from "./style.js";
+import { LitElement as N, html as P, unsafeCSS as F } from "lit";
+import { customElement as I, property as L, state as R } from "lit/decorators.js";
 //#region src/components/context-menu/index.ts
-var P = "wui-context-menu-item", F = class extends O {
+var z = "wui-context-menu-item", B = 500, V = 5e3, H = 10, U = 1e3, W = "data-wui-menu-scrim", G = 5, K = 8, q = class extends N {
 	constructor(...e) {
-		super(...e), this.disabled = !1, this.noScrollLock = !1, this._isOpen = !1, this._x = 0, this._y = 0, this._activeSubmenus = [], this._activeSubmenuItems = [], this._submenuPositionEpochs = /* @__PURE__ */ new WeakMap(), this._menuHandle = null, this._submenuHandles = /* @__PURE__ */ new Map(), this._outsideClickGuard = S(this, (e) => this._menuHandle?.contains(e) ?? !1), this._closingSubmenus = b({
+		super(...e), this.disabled = !1, this.noScrollLock = !1, this.longPress = !1, this._longPressDelay = B, this._isOpen = !1, this._x = 0, this._y = 0, this._activeSubmenus = [], this._activeSubmenuItems = [], this._longPressOpenedAt = null, this._submenuPositionEpochs = /* @__PURE__ */ new WeakMap(), this._centerOnPressPoint = !1, this._closeSource = "default", this._menuHandle = null, this._submenuHandles = /* @__PURE__ */ new Map(), this._outsideClickGuard = E(this, (e) => this._menuHandle?.contains(e) ?? !1), this._closingSubmenus = w({
 			getPanel: (e) => e.panel,
 			restoreItems: (e, t) => this._restoreSubmenuItems(e, t),
 			dispose: (e) => {
@@ -33,13 +33,13 @@ var P = "wui-context-menu-item", F = class extends O {
 			closeFrom: (e) => {
 				this._closeSubmenusFrom(e), this._hoverBinder.bind();
 			}
-		}, this._hoverBinder = x(this._hoverDelegate, "web-ui-dropdown-item"), this._keyboardDelegate = {
-			getFocusedItem: (e) => w(e, [this._menu?.content, ...this._activeSubmenus.map((e) => e.content)], "web-ui-dropdown-item"),
+		}, this._hoverBinder = T(this._hoverDelegate, "web-ui-dropdown-item"), this._keyboardDelegate = {
+			getFocusedItem: (e) => O(e, [this._menu?.content, ...this._activeSubmenus.map((e) => e.content)], "web-ui-dropdown-item"),
 			getLevelOf: (e) => {
 				let t = this._getItemLevel(e);
 				return t === -1 ? void 0 : t;
 			},
-			getEnabledItems: (e) => C(this._getLevelContainer(e)?.content),
+			getEnabledItems: (e) => D(this._getLevelContainer(e)?.content),
 			isSubmenuItem: (e) => e.hasAttribute("submenu"),
 			openSubmenuInstant: (e) => this._openSubmenu(e, !0),
 			closeToParent: (e) => {
@@ -47,15 +47,42 @@ var P = "wui-context-menu-item", F = class extends O {
 				return this._closeSubmenusFrom(e - 1), this._hoverBinder.bind(), t;
 			},
 			closeDeepestOrAll: () => this._closeLastSubmenuOrMenu()
-		}, this._overlay = s().make({
+		}, this._overlay = l().make({
 			requestClose: () => this._keyboardDelegate.closeDeepestOrAll(),
 			isConnected: () => this.isConnected
-		}), this._menuItemAnchors = /* @__PURE__ */ new Map(), this._scrollLock = c().make(), this._userOpenChange = new l(), this._shouldOpenInstantly = !0, this._refreshScheduled = !1, this._menuPositionGeneration = i().make(), this._contentObserver = new MutationObserver(() => {
+		}), this._menuItemAnchors = /* @__PURE__ */ new Map(), this._scrollLock = d().make(), this._userOpenChange = new f(), this._shouldOpenInstantly = !0, this._suppressInitialFocusVisible = !0, this._refreshScheduled = !1, this._menuPositionGeneration = o().make(), this._contentObserver = new MutationObserver(() => {
 			this._isOpen && this._scheduleRefresh();
-		}), this._closeFromUser = () => {
-			this._isOpen && (this._userOpenChange.mark(), this.close());
+		}), this._closeFromUser = (e = "default") => {
+			this._isOpen && (this._userOpenChange.mark(), this._closeSource = e, this.close());
+		}, this._onScrimClick = (e) => {
+			e.target === this._scrim && (this._isLongPressFollowUp() || this._closeFromUser());
+		}, this._onScrimCancel = (e) => {
+			e.preventDefault();
+		}, this._onPointerDown = (e) => {
+			this._longPressOpenedAt = null, this.longPress && !this.disabled && e.pointerType === "touch" && (this._cancelLongPress(), this._longPressOrigin = {
+				x: e.clientX,
+				y: e.clientY
+			}, this._longPressTimer = setTimeout(() => {
+				this._longPressTimer = void 0;
+				let e = this._longPressOrigin;
+				e && (this._longPressOrigin = void 0, !this._isOpen && (this._longPressOpenedAt = performance.now(), this._openAt(e.x, e.y, !1, !0, !0) && this._userOpenChange.mark()));
+			}, this.longPressDelay));
+		}, this._onPointerMove = (e) => {
+			if (e.pointerType !== "touch") return;
+			let t = this._longPressOrigin;
+			t && Math.hypot(e.clientX - t.x, e.clientY - t.y) > H && this._cancelLongPress();
+		}, this._onPointerUp = (e) => {
+			e.pointerType === "touch" && this._cancelLongPress();
+		}, this._onPointerCancel = () => {
+			this._cancelLongPress();
 		}, this._onContextMenu = (e) => {
-			this.disabled || (e.preventDefault(), this._restoreFocusTarget = e.target instanceof HTMLElement ? e.target : void 0, this._openAt(e.clientX, e.clientY, !1) && this._userOpenChange.mark());
+			if (!this.disabled) {
+				if (this._isLongPressFollowUp()) {
+					e.preventDefault();
+					return;
+				}
+				e.preventDefault(), this._openAt(e.clientX, e.clientY, !1, !0) && this._userOpenChange.mark();
+			}
 		}, this._onContextMenuOutside = (e) => {
 			this._isOpen && !this._outsideClickGuard.isInside(e) && this._closeFromUser();
 		}, this._onKeydown = (e) => {
@@ -64,37 +91,42 @@ var P = "wui-context-menu-item", F = class extends O {
 				let t = document.activeElement;
 				if (t && t !== document.body) {
 					let e = t.getBoundingClientRect();
-					this._openAt(e.left, e.bottom, !0) && this._userOpenChange.mark();
-				} else this._openAt(window.innerWidth / 2, window.innerHeight / 2, !0) && this._userOpenChange.mark();
+					this._openAt(e.left, e.bottom, !0, !1) && this._userOpenChange.mark();
+				} else this._openAt(window.innerWidth / 2, window.innerHeight / 2, !0, !1) && this._userOpenChange.mark();
 				return;
 			}
-		}, this._onClickOutside = (e) => {
-			this._isOpen && !this._outsideClickGuard.isArmed() && (this._outsideClickGuard.isInside(e) || this._closeFromUser());
 		}, this._onMenuClick = (e) => {
-			let t = p(e);
+			let t = _(e);
 			if (t && !t.hasAttribute("disabled")) {
 				if (t.hasAttribute("submenu")) {
 					this._openSubmenu(t);
 					return;
 				}
-				this._closeFromUser();
+				this._closeFromUser("menu-item");
 			}
 		}, this._onWheel = (e) => {
 			this._preventBackgroundScroll(e);
 		}, this._onTouchMove = (e) => {
 			this._preventBackgroundScroll(e);
 		}, this._onDocumentKeydown = (e) => {
-			this._isOpen && T(this._keyboardDelegate, e);
+			this._isOpen && k(this._keyboardDelegate, e);
 		};
 	}
 	static {
-		this.styles = A(D);
+		this.styles = F(M);
+	}
+	get longPressDelay() {
+		return this._longPressDelay;
+	}
+	set longPressDelay(e) {
+		let n = this._longPressDelay;
+		this._longPressDelay = t(e, 0, V, B), this.requestUpdate("longPressDelay", n);
 	}
 	get isOpen() {
 		return this._isOpen;
 	}
 	connectedCallback() {
-		super.connectedCallback(), this._hideMenuItems(), this.addEventListener("contextmenu", this._onContextMenu), this.addEventListener("keydown", this._onKeydown), this.addEventListener("click", this._onMenuClick), document.addEventListener("click", this._onClickOutside), document.addEventListener("contextmenu", this._onContextMenuOutside), document.addEventListener("wheel", this._onWheel, {
+		super.connectedCallback(), this._hideMenuItems(), this.addEventListener("contextmenu", this._onContextMenu), this.addEventListener("keydown", this._onKeydown), this.addEventListener("click", this._onMenuClick), this.addEventListener("pointerdown", this._onPointerDown), this.addEventListener("pointermove", this._onPointerMove), this.addEventListener("pointerup", this._onPointerUp), this.addEventListener("pointercancel", this._onPointerCancel), document.addEventListener("contextmenu", this._onContextMenuOutside), document.addEventListener("wheel", this._onWheel, {
 			capture: !0,
 			passive: !1
 		}), document.addEventListener("touchmove", this._onTouchMove, {
@@ -103,7 +135,7 @@ var P = "wui-context-menu-item", F = class extends O {
 		}), document.addEventListener("keydown", this._onDocumentKeydown);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.removeEventListener("contextmenu", this._onContextMenu), this.removeEventListener("keydown", this._onKeydown), this.removeEventListener("click", this._onMenuClick), document.removeEventListener("click", this._onClickOutside), document.removeEventListener("contextmenu", this._onContextMenuOutside), document.removeEventListener("wheel", this._onWheel, !0), document.removeEventListener("touchmove", this._onTouchMove, !0), document.removeEventListener("keydown", this._onDocumentKeydown), this._contentObserver.disconnect(), this._menuPositionGeneration.invalidate(), this._outsideClickGuard.dispose(), this._hoverBinder.dispose(), this._scrollLock.release(), this._menuHandle?.release(), this._menuHandle = null, this._returnItemsToSlot(), this._menu?.panel.remove(), this._menu = void 0, this._closeSubmenusFrom(0, !0), this._closingSubmenus.restoreAll(), this._isOpen = !1, this._restoreFocusTarget = void 0;
+		super.disconnectedCallback(), this.removeEventListener("contextmenu", this._onContextMenu), this.removeEventListener("keydown", this._onKeydown), this.removeEventListener("click", this._onMenuClick), this.removeEventListener("pointerdown", this._onPointerDown), this.removeEventListener("pointermove", this._onPointerMove), this.removeEventListener("pointerup", this._onPointerUp), this.removeEventListener("pointercancel", this._onPointerCancel), document.removeEventListener("contextmenu", this._onContextMenuOutside), document.removeEventListener("wheel", this._onWheel, !0), document.removeEventListener("touchmove", this._onTouchMove, !0), document.removeEventListener("keydown", this._onDocumentKeydown), this._contentObserver.disconnect(), this._menuPositionGeneration.invalidate(), this._outsideClickGuard.dispose(), this._hoverBinder.dispose(), this._scrollLock.release(), this._menuHandle?.release(), this._menuHandle = null, this._returnItemsToSlot(), this._menu?.panel.remove(), this._menu = void 0, this._closeSubmenusFrom(0, !0), this._closingSubmenus.restoreAll(), this._closeScrim(), this._isOpen = !1, this._cancelLongPress(), this._longPressOpenedAt = null;
 	}
 	updated(e) {
 		if (!this.isConnected) {
@@ -112,7 +144,11 @@ var P = "wui-context-menu-item", F = class extends O {
 		}
 		if (e.has("_isOpen")) {
 			if (this._isOpen) {
-				if (this._syncScrollLock(), this._menu || (this._menu = E("context-menu", this), this._menu.panel.setAttribute("role", "menu"), this._menu.panel.setAttribute("aria-label", "上下文菜单"), this._menu.panel.addEventListener("click", this._onMenuClick)), !this._menuHandle) {
+				if (this._syncScrollLock(), !this._menu) {
+					let e = this._openScrim();
+					this._menu = A("context-menu", this, e), this._menu.panel.setAttribute("role", "menu"), this._menu.panel.setAttribute("aria-label", "上下文菜单"), this._menu.panel.addEventListener("click", this._onMenuClick);
+				}
+				if (!this._menuHandle) {
 					this._menuHandle = this._overlay.claim(this._menu.panel);
 					for (let e of this._activeSubmenus) this._submenuHandles.delete(e.panel), this._submenuHandles.set(e.panel, this._menuHandle.adopt(e.panel));
 					for (let e of this._closingSubmenus.closing()) this._submenuHandles.set(e.panel, this._menuHandle.adopt(e.panel));
@@ -121,21 +157,23 @@ var P = "wui-context-menu-item", F = class extends O {
 					childList: !0,
 					subtree: !0
 				}), requestAnimationFrame(() => {
-					this._isOpen && this._menu && (this._refreshMenu(), o(this._menu.panel, { isInstant: this._shouldOpenInstantly }), this._shouldOpenInstantly = !0, this._focusFirstItem());
+					this._isOpen && this._menu && (this._refreshMenu(), c(this._menu.panel, { isInstant: this._shouldOpenInstantly }), this._shouldOpenInstantly = !0, requestAnimationFrame(() => {
+						this._isOpen && this._menu && this._focusFirstItem();
+					}));
 				});
-			} else this._syncScrollLock(!1), this._menuHandle?.release(), this._menuHandle = null, this._contentObserver.disconnect(), this._menuPositionGeneration.invalidate(), this._refreshScheduled = !1, this._closeMenuAfterPresence();
+			} else this._syncScrollLock(!1), this._longPressOpenedAt = null, this._menuHandle?.release(), this._menuHandle = null, this._contentObserver.disconnect(), this._menuPositionGeneration.invalidate(), this._refreshScheduled = !1, this._closeMenuAfterPresence();
 			this._userOpenChange.consume() && this._dispatchChange(this._isOpen);
 		}
 		e.has("noScrollLock") && this._syncScrollLock();
 	}
 	openAt(e, t) {
-		this._openAt(e, t, !0);
+		this._openAt(e, t, !0, !0);
 	}
-	_openAt(e, t, n) {
-		return !this.disabled && (this._x = e, this._y = t, this._shouldOpenInstantly = n, this._outsideClickGuard.arm(), this._isOpen ? (this._closeSubmenusFrom(0, !0), this._closingSubmenus.restoreAll(), this._menuPositionGeneration.invalidate(), this._scheduleRefresh(), !1) : (this._restoreFocusTarget ??= document.activeElement instanceof HTMLElement ? document.activeElement : void 0, this._isOpen = !0, !0));
+	_openAt(e, t, n, r, i = !1) {
+		return !this.disabled && (this._x = e, this._y = t, this._shouldOpenInstantly = n, this._suppressInitialFocusVisible = r, this._centerOnPressPoint = i, this._outsideClickGuard.arm(), this._isOpen ? (this._closeSubmenusFrom(0, !0), this._closingSubmenus.restoreAll(), this._menuPositionGeneration.invalidate(), this._scheduleRefresh(), !1) : (this._isOpen = !0, !0));
 	}
 	close() {
-		this._isOpen && (this._isOpen = !1, this._menuPositionGeneration.invalidate());
+		this._isOpen && (this._isOpen = !1, this._menuPositionGeneration.invalidate(), this._closeSource === "menu-item" && this._releaseScrimModality(), this._closeSource = "default");
 	}
 	_scheduleRefresh() {
 		!this._refreshScheduled && this._isOpen && (this._refreshScheduled = !0, requestAnimationFrame(() => {
@@ -148,55 +186,78 @@ var P = "wui-context-menu-item", F = class extends O {
 	_positionMenu() {
 		let e = this._menu?.panel;
 		if (!e) return;
-		if (e.style.visibility = "hidden", e.style.display = "", !(e.parentElement instanceof HTMLDialogElement && e.parentElement.open)) {
-			this._positionMenuInViewport(e);
-			return;
-		}
-		let t = this._menuPositionGeneration.next();
-		n({ getBoundingClientRect: () => new DOMRect(this._x, this._y, 0, 0) }, e, {
+		let t = this._safeAreaBottom();
+		e.style.visibility = "hidden", e.style.display = "";
+		let n = this._menuPositionGeneration.next(), o = {
+			top: K,
+			bottom: K + t,
+			left: K,
+			right: K
+		}, s = this._centerOnPressPoint ? ["bottom", "top"] : ["bottom-start", "top-start"];
+		r({ getBoundingClientRect: () => new DOMRect(this._x, this._y, 0, 0) }, e, {
 			strategy: "fixed",
-			placement: "bottom-start",
-			middleware: [r({
-				padding: 8,
+			placement: s[0],
+			middleware: [i({
+				fallbackPlacements: [...s],
+				padding: o
+			}), a({
+				padding: o,
 				crossAxis: !0
 			})]
-		}).then(({ x: n, y: r, middlewareData: i }) => {
-			if (!this._isOpen || this._menu?.panel !== e || !this._menuPositionGeneration.isCurrent(t)) return;
-			let a = i.shift?.x ?? 0, o = i.shift?.y ?? 0;
-			this._applyMenuPosition(e, n, r, a < 0 ? "right" : "left", o < 0 ? "bottom" : "top");
+		}).then(({ x: t, y: r, placement: i, middlewareData: a }) => {
+			if (!this._isOpen || this._menu?.panel !== e || !this._menuPositionGeneration.isCurrent(n)) return;
+			let o = a.shift?.x ?? 0, s = i.includes("-") ? o < 0 ? "right" : "left" : o === 0 ? "center" : o < 0 ? "right" : "left";
+			this._applyMenuPosition(e, t, r, s, i.startsWith("bottom") ? "top" : "bottom");
 		});
 	}
-	_positionMenuInViewport(e) {
-		let { width: t, height: n } = e.getBoundingClientRect(), r = window.innerWidth, i = window.innerHeight, a = this._x, o = this._y;
-		a + t > r && (a = r - t - 8), o + n > i && (o = i - n - 8), a < 0 && (a = 8), o < 0 && (o = 8), this._applyMenuPosition(e, a, o);
+	_safeAreaBottom() {
+		let e = Number.parseFloat(getComputedStyle(this).getPropertyValue("--wui-context-menu-safe-area-bottom"));
+		return Number.isFinite(e) ? e : 0;
 	}
 	_applyMenuPosition(e, t, n, r, i) {
-		e.style.left = `${t}px`, e.style.top = `${n}px`;
-		let a = r ?? (t < this._x ? "right" : "left"), o = i ?? (n < this._y ? "bottom" : "top");
-		e.style.setProperty("--wui-internal-overlay-transform-origin", `${o} ${a}`), e.style.visibility = "";
+		e.style.left = `${t}px`, e.style.top = `${n}px`, e.style.setProperty("--wui-internal-overlay-transform-origin", `${i} ${r}`), e.style.visibility = "";
 	}
-	_focusFirstItem() {
-		let e = this._menu?.content.querySelectorAll("web-ui-dropdown-item:not([disabled])")?.[0];
-		e && d(e);
+	_focusFirstItem(e = 0) {
+		let t = this._menu?.content.querySelectorAll("web-ui-dropdown-item:not([disabled])")?.[0];
+		t && (h(t, { suppressFocusVisible: this._suppressInitialFocusVisible }), !(e + 1 >= G) && (m([this._menu?.panel]) || requestAnimationFrame(() => {
+			this._isOpen && this._menu && this._focusFirstItem(e + 1);
+		})));
 	}
 	_setupMenuItems() {
 		let e = this._menu;
 		if (!e) return;
 		let t = e.content;
-		_(this, t, this._menuItemAnchors, P), this._hideMenuItems(), m(t, "context-menu-hidden");
-		let n = u(t, P);
-		g(this, t, this._menuItemAnchors, P), v(t, n);
+		x(this, t, this._menuItemAnchors, z), this._hideMenuItems(), v(t, "context-menu-hidden");
+		let n = p(t, z);
+		b(this, t, this._menuItemAnchors, z), S(t, n);
 	}
 	_returnItemsToSlot() {
 		let e = this._menu;
-		e && (this._closeSubmenusFrom(0, !0), this._closingSubmenus.restoreAll(), y(this, e.content, this._menuItemAnchors));
+		e && (this._closeSubmenusFrom(0, !0), this._closingSubmenus.restoreAll(), C(this, e.content, this._menuItemAnchors));
+	}
+	_openScrim() {
+		let e = document.createElement("dialog");
+		e.className = "wui-context-menu-scrim";
+		let t = document.createElement("style");
+		return t.textContent = j, e.append(t), e.setAttribute(W, ""), e.addEventListener("click", this._onScrimClick), e.addEventListener("cancel", this._onScrimCancel), this._scrimParent().append(e), e.showModal(), this._scrim = e, e;
+	}
+	_scrimParent() {
+		return u(this)?.getOverlayRoot() ?? document.body;
+	}
+	_closeScrim() {
+		let e = this._scrim;
+		e && (this._scrim = void 0, e.open && e.close(), e.remove());
+	}
+	_releaseScrimModality() {
+		let e = this._scrim;
+		e?.open && e.close();
 	}
 	async _closeMenuAfterPresence() {
 		let e = this._menu;
-		(!e || await a(e.panel)) && !this._isOpen && this.isConnected && this._menu === e && (this._returnItemsToSlot(), e?.panel.remove(), this._menu = void 0, this._restoreFocusTarget?.focus(), this._restoreFocusTarget = void 0);
+		(!e || await s(e.panel)) && !this._isOpen && this.isConnected && this._menu === e && (this._closeScrim(), this._returnItemsToSlot(), e?.panel.remove(), this._menu = void 0);
 	}
 	_hideMenuItems() {
-		f(this).forEach((e) => e.setAttribute("slot", "context-menu-hidden")), m(this, "context-menu-hidden");
+		g(this).forEach((e) => e.setAttribute("slot", "context-menu-hidden")), v(this, "context-menu-hidden");
 	}
 	_openSubmenu(e, t = !1) {
 		if (!this._isOpen || !e.hasAttribute("submenu") || e.hasAttribute("disabled")) return;
@@ -205,12 +266,12 @@ var P = "wui-context-menu-item", F = class extends O {
 		this._closeSubmenusFrom(n);
 		let r = this._closingSubmenus.take(e);
 		if (r) {
-			this._activeSubmenus[n] = r, this._activeSubmenuItems[n] = e, this._menuHandle && this._submenuHandles.set(r.panel, this._menuHandle.adopt(r.panel)), e.setAttribute("active", ""), this._positionSubmenu(e, r), o(r.panel, { isInstant: t }), this._hoverBinder.bind();
+			this._activeSubmenus[n] = r, this._activeSubmenuItems[n] = e, this._menuHandle && this._submenuHandles.set(r.panel, this._menuHandle.adopt(r.panel)), e.setAttribute("active", ""), this._positionSubmenu(e, r), c(r.panel, { isInstant: t }), this._hoverBinder.bind();
 			return;
 		}
-		if (f(e).length === 0) return;
-		let i = E("context-submenu", this);
-		i.panel.dataset.level = String(n), i.panel.setAttribute("role", "menu"), i.panel.setAttribute("aria-label", "子菜单"), i.panel.style.visibility = "hidden", i.panel.addEventListener("click", this._onMenuClick), h(e, i.content), this._activeSubmenus[n] = i, this._activeSubmenuItems[n] = e, this._menuHandle && this._submenuHandles.set(i.panel, this._menuHandle.adopt(i.panel)), e.setAttribute("active", ""), this._positionSubmenu(e, i), o(i.panel, { isInstant: t }), this._hoverBinder.bind();
+		if (g(e).length === 0) return;
+		let i = A("context-submenu", this, this._scrim);
+		i.panel.dataset.level = String(n), i.panel.setAttribute("role", "menu"), i.panel.setAttribute("aria-label", "子菜单"), i.panel.style.visibility = "hidden", i.panel.addEventListener("click", this._onMenuClick), y(e, i.content), this._activeSubmenus[n] = i, this._activeSubmenuItems[n] = e, this._menuHandle && this._submenuHandles.set(i.panel, this._menuHandle.adopt(i.panel)), e.setAttribute("active", ""), this._positionSubmenu(e, i), c(i.panel, { isInstant: t }), this._hoverBinder.bind();
 	}
 	_closeSubmenusFrom(e, t = !1) {
 		for (let n = this._activeSubmenus.length - 1; n >= e; n--) {
@@ -220,7 +281,7 @@ var P = "wui-context-menu-item", F = class extends O {
 		this._activeSubmenus.length = e, this._activeSubmenuItems.length = e;
 	}
 	_restoreSubmenuItems(e, t) {
-		t && (h(e.content, t), m(t, "context-menu-hidden"));
+		t && (y(e.content, t), v(t, "context-menu-hidden"));
 	}
 	_getItemLevel(e) {
 		if (this._menu?.panel.contains(e)) return 0;
@@ -229,38 +290,45 @@ var P = "wui-context-menu-item", F = class extends O {
 	}
 	_positionSubmenu(e, t) {
 		if (t.panel.parentElement instanceof HTMLDialogElement && t.panel.parentElement.open) {
-			let i = e.getBoundingClientRect().right + t.panel.getBoundingClientRect().width + 8 <= window.innerWidth, a = (this._submenuPositionEpochs.get(t.panel) ?? 0) + 1;
-			this._submenuPositionEpochs.set(t.panel, a), n(e, t.panel, {
+			let n = e.getBoundingClientRect().right + t.panel.getBoundingClientRect().width + 8 <= window.innerWidth, i = (this._submenuPositionEpochs.get(t.panel) ?? 0) + 1;
+			this._submenuPositionEpochs.set(t.panel, i), r(e, t.panel, {
 				strategy: "fixed",
-				placement: i ? "right-start" : "left-start",
-				middleware: [r({
+				placement: n ? "right-start" : "left-start",
+				middleware: [a({
 					padding: 8,
 					crossAxis: !0
 				})]
 			}).then(({ x: e, y: n, middlewareData: r }) => {
-				if (!this._activeSubmenus.includes(t) || a !== this._submenuPositionEpochs.get(t.panel)) return;
-				let i = r.shift?.x ?? 0, o = r.shift?.y ?? 0, s = i < 0 ? "right" : "left", c = o < 0 ? "bottom" : "top";
+				if (!this._activeSubmenus.includes(t) || i !== this._submenuPositionEpochs.get(t.panel)) return;
+				let a = r.shift?.x ?? 0, o = r.shift?.y ?? 0, s = a < 0 ? "right" : "left", c = o < 0 ? "bottom" : "top";
 				t.panel.style.left = `${e}px`, t.panel.style.top = `${n}px`, t.panel.style.setProperty("--wui-internal-overlay-transform-origin", `${c} ${s}`), t.panel.style.visibility = "";
 			});
 			return;
 		}
-		let i = e.getBoundingClientRect(), a = t.panel.getBoundingClientRect(), o = i.right + a.width + 8 <= window.innerWidth, s = o ? i.right : Math.max(8, i.left - a.width), c = Math.min(Math.max(8, i.top), window.innerHeight - a.height - 8);
+		let n = e.getBoundingClientRect(), i = t.panel.getBoundingClientRect(), o = n.right + i.width + 8 <= window.innerWidth, s = o ? n.right : Math.max(8, n.left - i.width), c = Math.min(Math.max(8, n.top), window.innerHeight - i.height - 8);
 		t.panel.style.left = `${s}px`, t.panel.style.top = `${c}px`, t.panel.style.setProperty("--wui-internal-overlay-transform-origin", o ? "top left" : "top right"), t.panel.style.visibility = "";
 	}
 	_dispatchChange(e) {
-		t(this, e);
+		n(this, e);
+	}
+	_cancelLongPress() {
+		this._longPressTimer !== void 0 && (clearTimeout(this._longPressTimer), this._longPressTimer = void 0), this._longPressOrigin = void 0;
+	}
+	_isLongPressFollowUp() {
+		let e = this._longPressOpenedAt;
+		return e === null ? !1 : performance.now() - e > U ? (this._longPressOpenedAt = null, !1) : !0;
 	}
 	_getLevelContainer(e) {
 		return e === 0 ? this._menu : this._activeSubmenus[e - 1];
 	}
 	_getLevelItems(e) {
 		let t = this._getLevelContainer(e);
-		return t ? f(t.content) : [];
+		return t ? g(t.content) : [];
 	}
 	_closeLastSubmenuOrMenu() {
 		if (this._activeSubmenus.length > 0) {
 			let e = this._activeSubmenus.length - 1, t = this._activeSubmenuItems[e];
-			this._closeSubmenusFrom(e), d(t), this._hoverBinder.bind();
+			this._closeSubmenusFrom(e), h(t), this._hoverBinder.bind();
 		} else this._closeFromUser();
 	}
 	_preventBackgroundScroll(e) {
@@ -276,7 +344,7 @@ var P = "wui-context-menu-item", F = class extends O {
 		return this._menuHandle?.containsEvent(e) ?? !1;
 	}
 	render() {
-		return k`
+		return P`
       <div class="context-menu-anchor">
         <slot @slotchange=${this._onSlotChange}></slot>
       </div>
@@ -286,15 +354,22 @@ var P = "wui-context-menu-item", F = class extends O {
 		this._hideMenuItems(), this._isOpen && this._scheduleRefresh();
 	}
 };
-e([M({
+e([L({
 	type: Boolean,
 	reflect: !0
-})], F.prototype, "disabled", void 0), e([M({
+})], q.prototype, "disabled", void 0), e([L({
 	type: Boolean,
 	reflect: !0,
 	attribute: "no-scroll-lock"
-})], F.prototype, "noScrollLock", void 0), e([N()], F.prototype, "_isOpen", void 0), e([N()], F.prototype, "_x", void 0), e([N()], F.prototype, "_y", void 0), F = e([j("web-ui-context-menu")], F);
+})], q.prototype, "noScrollLock", void 0), e([L({
+	type: Boolean,
+	reflect: !0,
+	attribute: "long-press"
+})], q.prototype, "longPress", void 0), e([L({
+	type: Number,
+	attribute: "long-press-delay"
+})], q.prototype, "longPressDelay", null), e([R()], q.prototype, "_isOpen", void 0), e([R()], q.prototype, "_x", void 0), e([R()], q.prototype, "_y", void 0), q = e([I("web-ui-context-menu")], q);
 //#endregion
-export { F as WebUiContextMenu };
+export { q as WebUiContextMenu };
 
 //# sourceMappingURL=index.js.map