@greypan/web-ui 9.0.0 → 10.0.0

package/dist/components/drawer/index.js

@@ -9,21 +9,22 @@ import { defineOpenOverlay as a } from "../../shared/overlay/open-overlay.js";
 import { defineScrollLockLease as o } from "../../shared/scroll-lock/scroll-lock.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 { ElementHeightController as u } from "../../shared/element-height/index.js";
-import { attachDragGesture as d } from "../../shared/gesture/drag-gesture.js";
-import { dampOverscroll 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 l from "../../assets/modal-surface.js";
+import { defineNativeDialogPresence as u } from "../../shared/overlay/native-dialog-presence.js";
+import { ElementHeightController as d } from "../../shared/element-height/index.js";
+import { attachDragGesture as f } from "../../shared/gesture/drag-gesture.js";
+import { dampOverscroll as p } from "../../shared/gesture/physics.js";
+import { defineNestedDrawerLayers as m } from "../../shared/overlay/nested-drawer-layers.js";
+import h from "./style.js";
+import { LitElement as g, html as _, nothing as v, unsafeCSS as y } from "lit";
+import { customElement as b, property as x } from "lit/decorators.js";
 //#region src/components/drawer/index.ts
-var x = [
+var S = [
 	"right",
 	"left",
 	"top",
 	"bottom"
-], S = .5, C = 10, w = 500, T = 50, E = 10, D = 120, O = 10, k = [
+], C = .5, w = 10, T = 500, E = 50, D = 10, O = 120, k = 10, A = [
 	"button",
 	"input",
 	"select",
@@ -49,7 +50,7 @@ var x = [
 	"[role=\"combobox\"]",
 	"[role=\"slider\"]",
 	"[role=\"spinbutton\"]"
-].join(","), A = 180, j = 420, M = "cubic-bezier(0.32, 0.72, 0, 1)", N = "cubic-bezier(0.22, 1.3, 0.36, 1)", P = 1, F = 80;
+].join(","), j = 180, M = 420, N = "cubic-bezier(0.32, 0.72, 0, 1)", P = "cubic-bezier(0.22, 1.3, 0.36, 1)", F = 1, I = 80;
 if (typeof CSS < "u" && "registerProperty" in CSS) {
 	try {
 		CSS.registerProperty({
@@ -84,13 +85,13 @@ if (typeof CSS < "u" && "registerProperty" in CSS) {
 		});
 	} catch {}
 }
-var I = class extends h {
+var L = class extends g {
 	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 c(), this._headerHeight = new u(this, ".wui-drawer-header", (e) => this._setAvoidance("--wui-internal-drawer-header-inset", e)), this._footerHeight = new u(this, ".wui-drawer-footer", (e) => this._setAvoidance("--wui-internal-drawer-footer-inset", e)), this._scrollLock = o().make(), this._presence = l().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._headerHeight = new d(this, ".wui-drawer-header", (e) => this._setAvoidance("--wui-internal-drawer-header-inset", e)), this._footerHeight = new d(this, ".wui-drawer-footer", (e) => this._setAvoidance("--wui-internal-drawer-footer-inset", e)), this._scrollLock = o().make(), this._presence = u().make({
 			getDialog: () => this.dialog,
 			isConnected: () => this.isConnected,
 			isOpen: () => this.open
-		}), this._nestedLayers = p().make({
+		}), this._nestedLayers = m().make({
 			getDialog: () => this.dialog,
 			getPlacement: () => this._placement
 		}), this._overlay = a().make({
@@ -115,14 +116,18 @@ var I = class extends h {
 		}, this._backdropPress = null;
 	}
 	static {
-		this.styles = [v(t), v(m)];
+		this.styles = [
+			y(t),
+			y(l),
+			y(h)
+		];
 	}
 	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, S, "right"), this.requestUpdate("placement", t);
 	}
 	get dialog() {
 		return this.shadowRoot?.querySelector("dialog") ?? null;
@@ -146,7 +151,7 @@ var I = class extends h {
 		return e ? this._dragAxis === "x" ? e.offsetWidth : e.offsetHeight : 0;
 	}
 	_dragCloseThreshold(e) {
-		return Math.max(e * S, C);
+		return Math.max(e * C, w);
 	}
 	_readDrawerInset(e) {
 		let t = getComputedStyle(e).getPropertyValue("--wui-internal-drawer-inset"), n = Number.parseFloat(t);
@@ -171,7 +176,7 @@ var I = class extends h {
 	}
 	_isInteractivePath(e) {
 		let t = typeof e.composedPath == "function" ? e.composedPath() : [e.target];
-		for (let e of t) if (e instanceof Element && e.matches(k)) return !0;
+		for (let e of t) if (e instanceof Element && e.matches(A)) return !0;
 		return !1;
 	}
 	_handleDragPointerDown(e) {
@@ -181,18 +186,18 @@ var I = class extends h {
 		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 = d(e, {
+		this._cancelBaseline = i, this._lastAxisPos = i, this._swipeIntentDisp = -1, this._swipeCancelled = !1, t.classList.add("is-dragging"), this._applyDragOffset(t, this._dragOffset), this._dragGesture = f(e, {
 			axis: this._dragAxis,
 			calibrateOnFirstMove: !0,
 			onMove: (e) => {
 				let n = (this._dragAxis === "x" ? e.deltaX : e.deltaY) * this._dragCloseSign;
-				this._dragOffset = this._dragInitialOffset + f(n), this._trackSwipeCancel(this._dragAxis === "x" ? e.clientX : e.clientY, n);
+				this._dragOffset = this._dragInitialOffset + p(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, 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, T) * 1e3 : 0, o = i > 0 && a >= w && !this._swipeCancelled;
+				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, E) * 1e3 : 0, o = i > 0 && a >= T && !this._swipeCancelled;
 				i > this._dragCloseThreshold(n) || o ? this._settleToClose(t, r) : this._settleRebound(t, r, this._dragOffset);
 			},
 			onCancel: () => {
@@ -207,7 +212,7 @@ var I = class extends h {
 			return;
 		}
 		let r = (e - this._cancelBaseline) * this._dragCloseSign;
-		r > this._dragCloseThreshold(this._measureDragSize()) ? this._swipeCancelled = !1 : this._swipeIntentDisp - r >= E && (this._swipeCancelled = !0);
+		r > this._dragCloseThreshold(this._measureDragSize()) ? this._swipeCancelled = !1 : this._swipeIntentDisp - r >= D && (this._swipeCancelled = !0);
 	}
 	_cancelActiveDrag() {
 		if (!this._isDragging()) return;
@@ -234,7 +239,7 @@ var I = class extends h {
 			e.classList.remove("is-dragging"), i();
 			return;
 		}
-		this._startSettle(e, r, 0, this._settleDuration(Math.abs(r - n), t), M, i);
+		this._startSettle(e, r, 0, this._settleDuration(Math.abs(r - n), t), N, i);
 	}
 	_settleRebound(e, t, n) {
 		this._dragOffset = 0;
@@ -245,16 +250,16 @@ var I = class extends h {
 			e.classList.remove("is-dragging"), r();
 			return;
 		}
-		this._startSettle(e, 0, 1, this._settleDuration(Math.abs(n), t), N, r);
+		this._startSettle(e, 0, 1, this._settleDuration(Math.abs(n), t), P, r);
 	}
 	_settleDuration(e, t) {
-		let n = e / Math.max(Math.abs(t), P) * 1e3;
-		return Math.min(j, Math.max(A, n));
+		let n = e / Math.max(Math.abs(t), F) * 1e3;
+		return Math.min(M, Math.max(j, 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 + F);
+		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 + I);
 	}
 	_finishSettle() {
 		let e = this._settleFinish;
@@ -266,7 +271,7 @@ var I = class extends h {
 		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, D));
+		this._closeFromUser(), this.controlled && (this._dragAwaitWriteback = !0, this._dragRequestTimer = setTimeout(this._handleDragWritebackTimeout, O));
 	}
 	connectedCallback() {
 		super.connectedCallback(), this._resyncSlotPresence(), this._presence.reconcile(), this.open && this._nestedLayers.register(), this._syncScrollLock(), this._reclaimIfOpen();
@@ -375,7 +380,7 @@ var I = class extends h {
 	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) > O || this._closeFromUser());
+		this._backdropPress = null, t && t.onMask && (Math.hypot(e.clientX - t.x, e.clientY - t.y) > k || this._closeFromUser());
 	}
 	emitOpenChange(e = this.open) {
 		i(this, e);
@@ -384,14 +389,14 @@ var I = class extends h {
 		this._scrollLock.sync(e && !this.noScrollLock);
 	}
 	render() {
-		let e = this._hasHeaderSlot || !!this.heading, t = this.dialogLabel.trim(), r = !t && !this.headless && e ? "wui-drawer-heading" : _, i = this.placement === "top" || this.placement === "bottom", a = this.draggable ? g`
-          ${i ? g`<div class="wui-drawer-drag-edge" @pointerdown=${this._handleDragPointerDown}></div>` : _}
+		let e = this._hasHeaderSlot || !!this.heading, t = this.dialogLabel.trim(), r = !t && !this.headless && e ? "wui-drawer-heading" : v, i = this.placement === "top" || this.placement === "bottom", a = this.draggable ? _`
+          ${i ? _`<div class="wui-drawer-drag-edge" @pointerdown=${this._handleDragPointerDown}></div>` : v}
           <div class="wui-drawer-drag-zone" @pointerdown=${this._handleDragPointerDown}></div>
           <div class="wui-drawer-drag-bar"></div>
-        ` : _;
-		return g`
+        ` : v;
+		return _`
       <dialog
-        aria-label=${t || _}
+        aria-label=${t || v}
         aria-labelledby=${r}
         @cancel=${this.handleCancel}
         @close=${this.handleNativeClose}
@@ -400,7 +405,7 @@ var I = class extends h {
         @keydown=${this.handleKeydown}
         @transitionend=${this.handleTransitionEnd}
       >
-        ${this.headless ? g`<slot></slot>${a}` : g`
+        ${this.headless ? _`<slot></slot>${a}` : _`
                 <div class="wui-drawer-body wui-glass">
                   <div
                     class="wui-drawer-header"
@@ -409,7 +414,7 @@ var I = class extends h {
                     @pointerdown=${this._handleSectionDragPointerDown}
                   >
                     <slot name="header" @slotchange=${this.handleHeaderSlotChange}>
-                      ${this.heading ? g`<span class="wui-drawer-heading">${this.heading}</span>` : _}
+                      ${this.heading ? _`<span class="wui-drawer-heading">${this.heading}</span>` : v}
                     </slot>
                   </div>
                   <div class="wui-drawer-content">
@@ -423,7 +428,7 @@ var I = class extends h {
                     <slot name="footer" @slotchange=${this.handleFooterSlotChange}></slot>
                   </div>
                 </div>
-                ${this.closable ? g`
+                ${this.closable ? _`
                         <web-ui-button
                           class="wui-drawer-close"
                           @click=${this._closeFromUser}
@@ -434,44 +439,44 @@ var I = class extends h {
                         >
                           <web-ui-icon size="14" .icon=${n}></web-ui-icon>
                         </web-ui-button>
-                      ` : _}
+                      ` : v}
                 ${a}
               `}
       </dialog>
     `;
 	}
 };
-e([b({
+e([x({
 	type: Boolean,
 	reflect: !0
-})], I.prototype, "open", void 0), e([b({
+})], L.prototype, "open", void 0), e([x({
 	type: Boolean,
 	reflect: !0,
 	attribute: "no-scroll-lock"
-})], I.prototype, "noScrollLock", void 0), e([b({
+})], L.prototype, "noScrollLock", void 0), e([x({
 	type: Boolean,
 	reflect: !0,
 	attribute: "no-backdrop-close"
-})], I.prototype, "noBackdropClose", void 0), e([b({
+})], L.prototype, "noBackdropClose", void 0), e([x({
 	type: Boolean,
 	reflect: !0
-})], I.prototype, "controlled", void 0), e([b({
+})], L.prototype, "controlled", void 0), e([x({
 	type: String,
 	reflect: !0
-})], I.prototype, "placement", null), e([b({ type: String })], I.prototype, "heading", void 0), e([b({
+})], L.prototype, "placement", null), e([x({ type: String })], L.prototype, "heading", void 0), e([x({
 	type: Boolean,
 	reflect: !0
-})], I.prototype, "closable", void 0), e([b({
+})], L.prototype, "closable", void 0), e([x({
 	type: Boolean,
 	reflect: !0
-})], I.prototype, "headless", void 0), e([b({
+})], L.prototype, "headless", void 0), e([x({
 	type: String,
 	attribute: "dialog-label"
-})], I.prototype, "dialogLabel", void 0), e([b({
+})], L.prototype, "dialogLabel", void 0), e([x({
 	type: Boolean,
 	reflect: !0
-})], I.prototype, "draggable", void 0), I = e([y("web-ui-drawer")], I);
+})], L.prototype, "draggable", void 0), L = e([b("web-ui-drawer")], L);
 //#endregion
-export { I as WebUiDrawer };
+export { L as WebUiDrawer };
 
 //# sourceMappingURL=index.js.map