@greypan/web-ui 6.4.0 → 7.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (126) hide show
  1. package/README.CN.md +134 -40
  2. package/README.md +145 -51
  3. package/dist/assets/glass.js +1 -1
  4. package/dist/assets/glass.js.map +1 -1
  5. package/dist/assets/selection-control.js +6 -0
  6. package/dist/assets/selection-control.js.map +1 -0
  7. package/dist/assets/toast-containers.js.map +1 -1
  8. package/dist/components/autocomplete/index.d.ts +2 -0
  9. package/dist/components/autocomplete/index.js +19 -20
  10. package/dist/components/autocomplete/index.js.map +1 -1
  11. package/dist/components/autocomplete/style.js.map +1 -1
  12. package/dist/components/badge/style.js.map +1 -1
  13. package/dist/components/button/style.js.map +1 -1
  14. package/dist/components/checkbox/index.d.ts +9 -2
  15. package/dist/components/checkbox/index.js +50 -26
  16. package/dist/components/checkbox/index.js.map +1 -1
  17. package/dist/components/checkbox/style.js +1 -1
  18. package/dist/components/checkbox/style.js.map +1 -1
  19. package/dist/components/checkbox-group/index.d.ts +3 -0
  20. package/dist/components/checkbox-group/index.js +24 -13
  21. package/dist/components/checkbox-group/index.js.map +1 -1
  22. package/dist/components/checkbox-group/style.js +1 -1
  23. package/dist/components/checkbox-group/style.js.map +1 -1
  24. package/dist/components/collapse/index.js.map +1 -1
  25. package/dist/components/context-menu/index.d.ts +10 -0
  26. package/dist/components/context-menu/index.js +48 -34
  27. package/dist/components/context-menu/index.js.map +1 -1
  28. package/dist/components/dialog/index.d.ts +6 -0
  29. package/dist/components/dialog/index.js +45 -20
  30. package/dist/components/dialog/index.js.map +1 -1
  31. package/dist/components/dialog/style.js +1 -1
  32. package/dist/components/dialog/style.js.map +1 -1
  33. package/dist/components/drawer/index.d.ts +22 -4
  34. package/dist/components/drawer/index.js +134 -106
  35. package/dist/components/drawer/index.js.map +1 -1
  36. package/dist/components/drawer/style.js +1 -1
  37. package/dist/components/drawer/style.js.map +1 -1
  38. package/dist/components/dropdown/index.d.ts +21 -1
  39. package/dist/components/dropdown/index.js +74 -51
  40. package/dist/components/dropdown/index.js.map +1 -1
  41. package/dist/components/image-preview/index.js +86 -66
  42. package/dist/components/image-preview/index.js.map +1 -1
  43. package/dist/components/image-preview/style.js +1 -1
  44. package/dist/components/image-preview/style.js.map +1 -1
  45. package/dist/components/index.js +29 -29
  46. package/dist/components/input/index.js +2 -2
  47. package/dist/components/input/index.js.map +1 -1
  48. package/dist/components/input/style.js.map +1 -1
  49. package/dist/components/layout/index.js +2 -2
  50. package/dist/components/layout/index.js.map +1 -1
  51. package/dist/components/layout/style.js +1 -1
  52. package/dist/components/layout/style.js.map +1 -1
  53. package/dist/components/popover/index.d.ts +8 -2
  54. package/dist/components/popover/index.js +47 -52
  55. package/dist/components/popover/index.js.map +1 -1
  56. package/dist/components/radio/index.d.ts +1 -1
  57. package/dist/components/radio/index.js +14 -13
  58. package/dist/components/radio/index.js.map +1 -1
  59. package/dist/components/radio/style.js +1 -1
  60. package/dist/components/radio/style.js.map +1 -1
  61. package/dist/components/radio-group/index.d.ts +3 -0
  62. package/dist/components/radio-group/index.js +24 -13
  63. package/dist/components/radio-group/index.js.map +1 -1
  64. package/dist/components/radio-group/style.js +1 -1
  65. package/dist/components/radio-group/style.js.map +1 -1
  66. package/dist/components/segmented/style.js +1 -1
  67. package/dist/components/segmented/style.js.map +1 -1
  68. package/dist/components/select/index.d.ts +2 -0
  69. package/dist/components/select/index.js +20 -19
  70. package/dist/components/select/index.js.map +1 -1
  71. package/dist/components/slider/index.js.map +1 -1
  72. package/dist/components/slider/style.js +1 -1
  73. package/dist/components/slider/style.js.map +1 -1
  74. package/dist/components/svg-draw-lines/index.d.ts +13 -2
  75. package/dist/components/svg-draw-lines/index.js +44 -31
  76. package/dist/components/svg-draw-lines/index.js.map +1 -1
  77. package/dist/components/switch/index.js.map +1 -1
  78. package/dist/components/switch/style.js.map +1 -1
  79. package/dist/components/textarea/index.js +2 -2
  80. package/dist/components/textarea/index.js.map +1 -1
  81. package/dist/components/textarea/style.js.map +1 -1
  82. package/dist/components/theme/index.d.ts +17 -0
  83. package/dist/components/theme/index.js +180 -20
  84. package/dist/components/theme/index.js.map +1 -1
  85. package/dist/components/theme/style.js +1 -1
  86. package/dist/components/theme/style.js.map +1 -1
  87. package/dist/components/toast/index.d.ts +1 -1
  88. package/dist/components/toast/manager.d.ts +1 -3
  89. package/dist/components/toast/manager.js +92 -49
  90. package/dist/components/toast/manager.js.map +1 -1
  91. package/dist/components/toast/style.js.map +1 -1
  92. package/dist/components/toast/toast.d.ts +37 -0
  93. package/dist/components/toast/toast.js +61 -8
  94. package/dist/components/toast/toast.js.map +1 -1
  95. package/dist/components/toast/types.d.ts +0 -4
  96. package/dist/components/tooltip/index.d.ts +6 -1
  97. package/dist/components/tooltip/index.js +11 -12
  98. package/dist/components/tooltip/index.js.map +1 -1
  99. package/dist/shared/gesture/drag-gesture.js +66 -64
  100. package/dist/shared/gesture/drag-gesture.js.map +1 -1
  101. package/dist/shared/gesture/physics.js +7 -29
  102. package/dist/shared/gesture/physics.js.map +1 -1
  103. package/dist/shared/menu-behavior/index.js +3 -4
  104. package/dist/shared/menu-behavior/index.js.map +1 -1
  105. package/dist/shared/option-portal/combobox-shell.js +7 -8
  106. package/dist/shared/option-portal/combobox-shell.js.map +1 -1
  107. package/dist/shared/overlay/anchored-panel.js +36 -31
  108. package/dist/shared/overlay/anchored-panel.js.map +1 -1
  109. package/dist/shared/overlay/native-dialog-presence.js +16 -0
  110. package/dist/shared/overlay/native-dialog-presence.js.map +1 -1
  111. package/dist/shared/overlay/nested-drawer-layers.js +7 -4
  112. package/dist/shared/overlay/nested-drawer-layers.js.map +1 -1
  113. package/dist/shared/overlay/open-overlay.js +182 -0
  114. package/dist/shared/overlay/open-overlay.js.map +1 -0
  115. package/dist/shared/overlay/presence.js +19 -22
  116. package/dist/shared/overlay/presence.js.map +1 -1
  117. package/dist/shared/theme/duration.js +9 -0
  118. package/dist/shared/theme/duration.js.map +1 -0
  119. package/dist/shared/theme/reduced-motion.js +15 -0
  120. package/dist/shared/theme/reduced-motion.js.map +1 -0
  121. package/package.json +1 -1
  122. package/dist/shared/overlay/composition.js +0 -57
  123. package/dist/shared/overlay/composition.js.map +0 -1
  124. package/dist/shared/overlay/lifecycle.js +0 -41
  125. package/dist/shared/overlay/lifecycle.js.map +0 -1
  126. package/dist/vite.svg +0 -1
@@ -4,24 +4,25 @@ import t from "../../icons/generated/ooui-close.js";
4
4
  import n from "../../assets/glass.js";
5
5
  import { normalizeLiteral as r } from "../../shared/normalize/index.js";
6
6
  import { dispatchOpenChangeEvent as i } from "../../shared/open-state/index.js";
7
- import { findNearestTheme as a } from "../../shared/overlay/theme-overlay-scope.js";
7
+ import { defineOpenOverlay as a } from "../../shared/overlay/open-overlay.js";
8
8
  import { defineScrollLockLease as o } from "../../shared/scroll-lock/scroll-lock.js";
9
9
  import "../button/index.js";
10
- import { UserChangeController as s } from "../../shared/events/user-change.js";
11
- import { defineNativeDialogPresence as c } from "../../shared/overlay/native-dialog-presence.js";
12
- import { attachDragGesture as l } from "../../shared/gesture/drag-gesture.js";
13
- import { SPRING_PRESETS as u, rubberband as d, springOffsets as f } from "../../shared/gesture/physics.js";
14
- import { defineNestedDrawerLayers as p } from "../../shared/overlay/nested-drawer-layers.js";
15
- import m from "./style.js";
16
- import { LitElement as h, html as g, nothing as _, unsafeCSS as v } from "lit";
17
- import { customElement as y, property as b } from "lit/decorators.js";
10
+ import { prefersReducedMotion as s } from "../../shared/theme/reduced-motion.js";
11
+ import { UserChangeController as c } from "../../shared/events/user-change.js";
12
+ import { defineNativeDialogPresence as l } from "../../shared/overlay/native-dialog-presence.js";
13
+ import { attachDragGesture as u } from "../../shared/gesture/drag-gesture.js";
14
+ import { dampOverscroll as d } from "../../shared/gesture/physics.js";
15
+ import { defineNestedDrawerLayers as f } from "../../shared/overlay/nested-drawer-layers.js";
16
+ import p from "./style.js";
17
+ import { LitElement as m, html as h, nothing as g, unsafeCSS as _ } from "lit";
18
+ import { customElement as v, property as y } from "lit/decorators.js";
18
19
  //#region src/components/drawer/index.ts
19
- var x = [
20
+ var b = [
20
21
  "right",
21
22
  "left",
22
23
  "top",
23
24
  "bottom"
24
- ], S = 1 / 3, C = 500, w = 120, T = 16;
25
+ ], 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;
25
26
  if (typeof CSS < "u" && "registerProperty" in CSS) {
26
27
  try {
27
28
  CSS.registerProperty({
@@ -39,24 +40,32 @@ if (typeof CSS < "u" && "registerProperty" in CSS) {
39
40
  initialValue: "8px"
40
41
  });
41
42
  } catch {}
43
+ try {
44
+ CSS.registerProperty({
45
+ name: "--wui-internal-settle-duration",
46
+ syntax: "<time>",
47
+ inherits: !0,
48
+ initialValue: "280ms"
49
+ });
50
+ } catch {}
42
51
  }
43
- var E = class extends h {
52
+ var P = class extends m {
44
53
  constructor(...e) {
45
- 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({
54
+ 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({
46
55
  getDialog: () => this.dialog,
47
56
  isConnected: () => this.isConnected,
48
57
  isOpen: () => this.open
49
- }), this._nestedLayers = p().make({
58
+ }), this._nestedLayers = f().make({
50
59
  getDialog: () => this.dialog,
51
60
  getPlacement: () => this._placement
52
- }), this._dragGesture = null, this._dragInitialOffset = 0, this._dragOffset = 0, this._dragAnimation = null, this._dragAwaitWriteback = !1, this._handleDragWritebackTimeout = () => {
61
+ }), 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 = () => {
53
62
  if (this._dragRequestTimer = void 0, !this._dragAwaitWriteback || !this.open || this._isDragging()) {
54
63
  this._dragAwaitWriteback = !1;
55
64
  return;
56
65
  }
57
66
  this._dragAwaitWriteback = !1;
58
67
  let e = this.dialog;
59
- e && (e.classList.add("is-visible"), this._springRebound(e, 0, this._dragCloseDistance(e)));
68
+ e && (e.classList.add("is-visible"), this._settleRebound(e, 0, this._dragCloseDistance(e)));
60
69
  }, this._closeFromUser = () => {
61
70
  if (this.open && !this._dragAwaitWriteback) {
62
71
  if (this.controlled) {
@@ -65,17 +74,17 @@ var E = class extends h {
65
74
  }
66
75
  this._userOpenChange.mark(), this.close();
67
76
  }
68
- };
77
+ }, this._backdropPress = null;
69
78
  }
70
79
  static {
71
- this.styles = [v(n), v(m)];
80
+ this.styles = [_(n), _(p)];
72
81
  }
73
82
  get placement() {
74
83
  return this._placement;
75
84
  }
76
85
  set placement(e) {
77
86
  let t = this._placement;
78
- this._placement = r(e, x, "right"), this.requestUpdate("placement", t);
87
+ this._placement = r(e, b, "right"), this.requestUpdate("placement", t);
79
88
  }
80
89
  get dialog() {
81
90
  return this.shadowRoot?.querySelector("dialog") ?? null;
@@ -95,6 +104,9 @@ var E = class extends h {
95
104
  let e = this.dialog;
96
105
  return e ? this._dragAxis === "x" ? e.offsetWidth : e.offsetHeight : 0;
97
106
  }
107
+ _dragCloseThreshold(e) {
108
+ return Math.max(e * x, S);
109
+ }
98
110
  _readDrawerInset(e) {
99
111
  let t = getComputedStyle(e).getPropertyValue("--wui-internal-drawer-inset"), n = Number.parseFloat(t);
100
112
  return Number.isFinite(n) ? n : 0;
@@ -102,18 +114,12 @@ var E = class extends h {
102
114
  _dragCloseDistance(e) {
103
115
  return this._measureDragSize() + this._readDrawerInset(e);
104
116
  }
105
- _isReducedMotion() {
106
- let e = a(this);
107
- if (e) return e.isReducedMotion();
108
- try {
109
- return typeof window.matchMedia == "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
110
- } catch {
111
- return !1;
112
- }
113
- }
114
117
  _isDragging() {
115
118
  return this._dragGesture?.isDragging() ?? !1;
116
119
  }
120
+ _syncDragInert() {
121
+ this._handle?.setInert(this._isDragging());
122
+ }
117
123
  _cancelDragAwait() {
118
124
  this._dragRequestTimer !== void 0 && (clearTimeout(this._dragRequestTimer), this._dragRequestTimer = void 0), this._dragAwaitWriteback = !1;
119
125
  }
@@ -122,27 +128,39 @@ var E = class extends h {
122
128
  let t = this.dialog;
123
129
  if (!t || !t.classList.contains("is-visible")) return;
124
130
  let n = getComputedStyle(t).transform, r = n && n !== "none" && typeof DOMMatrixReadOnly == "function" ? new DOMMatrixReadOnly(n)[this._dragAxis === "x" ? "m41" : "m42"] : 0;
125
- 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, {
131
+ this._abortSettle(), this._cancelDragAwait(), this._dragInitialOffset = r * this._dragCloseSign, this._dragOffset = this._dragInitialOffset;
132
+ let i = this._dragAxis === "x" ? e.clientX : e.clientY;
133
+ 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, {
126
134
  axis: this._dragAxis,
135
+ calibrateOnFirstMove: !0,
127
136
  onMove: (e) => {
128
- let n = this._dragAxis === "x" ? e.deltaX : e.deltaY, r = this._dragInitialOffset + n * this._dragCloseSign;
129
- this._dragOffset = d(r, this._measureDragSize() * .1, .15);
130
- let i = this._measureDragSize();
131
- t.classList.toggle("is-drag-close", i > 0 && this._dragOffset > i * S), this._applyDragOffset(t, this._dragOffset);
137
+ let n = (this._dragAxis === "x" ? e.deltaX : e.deltaY) * this._dragCloseSign;
138
+ this._dragOffset = this._dragInitialOffset + d(n), this._trackSwipeCancel(this._dragAxis === "x" ? e.clientX : e.clientY, n);
139
+ let r = this._measureDragSize(), i = this._dragOffset - this._dragInitialOffset;
140
+ t.classList.toggle("is-drag-close", i > this._dragCloseThreshold(r)), this._applyDragOffset(t, this._dragOffset);
132
141
  },
133
142
  onEnd: (e) => {
134
- this._dragGesture = null, t.classList.remove("is-dragging", "is-drag-close");
135
- let n = this._measureDragSize(), r = (this._dragAxis === "x" ? e.velocityX : e.velocityY) * this._dragCloseSign;
136
- this._dragOffset > n * S || this._dragOffset > 8 && r > C ? this._springToClose(t, r) : this._springRebound(t, r, this._dragOffset);
143
+ this._dragGesture = null, this._syncDragInert(), t.classList.remove("is-dragging", "is-drag-close");
144
+ 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;
145
+ i > this._dragCloseThreshold(n) || o ? this._settleToClose(t, r) : this._settleRebound(t, r, this._dragOffset);
137
146
  },
138
147
  onCancel: () => {
139
- this._dragGesture = null, t.classList.remove("is-dragging", "is-drag-close"), this._springRebound(t, 0, this._dragOffset);
148
+ this._dragGesture = null, this._syncDragInert(), t.classList.remove("is-dragging", "is-drag-close"), this._settleRebound(t, 0, this._dragOffset);
140
149
  }
141
- });
150
+ }), this._syncDragInert();
151
+ }
152
+ _trackSwipeCancel(e, t) {
153
+ let n = e - this._lastAxisPos;
154
+ if (this._lastAxisPos = e, (n < 0 && e > this._cancelBaseline || n > 0 && e < this._cancelBaseline) && (this._cancelBaseline = e), this._swipeIntentDisp < 0) {
155
+ t > 0 && (this._swipeIntentDisp = t);
156
+ return;
157
+ }
158
+ let r = (e - this._cancelBaseline) * this._dragCloseSign;
159
+ r > this._dragCloseThreshold(this._measureDragSize()) ? this._swipeCancelled = !1 : this._swipeIntentDisp - r >= T && (this._swipeCancelled = !0);
142
160
  }
143
161
  _cancelActiveDrag() {
144
162
  if (!this._isDragging()) return;
145
- this._dragGesture?.destroy(), this._dragGesture = null;
163
+ this._dragGesture?.destroy(), this._dragGesture = null, this._syncDragInert();
146
164
  let e = this.dialog;
147
165
  e && (e.classList.remove("is-dragging", "is-drag-close"), this._clearDragStyles(e));
148
166
  }
@@ -155,68 +173,63 @@ var E = class extends h {
155
173
  _clearDragStyles(e) {
156
174
  e.style.removeProperty("transform"), e.style.removeProperty("--wui-internal-drag-backdrop-opacity");
157
175
  }
158
- _springToClose(e, t) {
176
+ _settleToClose(e, t) {
159
177
  let n = this._dragOffset;
160
178
  this._dragOffset = 0;
161
- let r = this._dragCloseSign, i = this._dragCloseDistance(e), a = this._measureDragSize(), o = () => {
162
- if (this.controlled) {
163
- let t = i;
164
- e.style.transform = this._dragAxis === "x" ? `translateX(${t * r}px)` : `translateY(${t * r}px)`, e.style.setProperty("--wui-internal-drag-backdrop-opacity", "0");
165
- } else e.classList.remove("is-visible"), this._clearDragStyles(e);
166
- this._closeFromDrag();
179
+ let r = this._dragCloseDistance(e), i = () => {
180
+ this.controlled ? this._applyDragOffset(e, r) : (e.classList.remove("is-visible"), this._clearDragStyles(e)), this._closeFromDrag();
167
181
  };
168
- if (this._isReducedMotion() || typeof e.animate != "function") {
169
- o();
182
+ if (s(this) || Math.abs(r - n) < 1) {
183
+ e.classList.remove("is-dragging"), i();
170
184
  return;
171
185
  }
172
- let s = f(n, i, t, u.close), c = s.map((e) => ({
173
- transform: this._dragAxis === "x" ? `translateX(${e * r}px)` : `translateY(${e * r}px)`,
174
- "--wui-internal-drag-backdrop-opacity": String(Math.max(0, 1 - e / a))
175
- })), l = (s.length - 1) * T, d = e.animate(c, {
176
- duration: l,
177
- easing: "linear",
178
- fill: "both"
179
- });
180
- d.onfinish = () => {
181
- o(), d.cancel();
182
- };
186
+ this._startSettle(e, r, 0, this._settleDuration(Math.abs(r - n), t), A, i);
183
187
  }
184
- _springRebound(e, t, n) {
188
+ _settleRebound(e, t, n) {
185
189
  this._dragOffset = 0;
186
190
  let r = () => {
187
- e.style.transform = this._dragAxis === "x" ? "translateX(0px)" : "translateY(0px)", e.style.setProperty("--wui-internal-drag-backdrop-opacity", "1");
188
- }, i = (t) => {
189
- this._dragAnimation = null, e.isConnected && (t ? this._clearDragStyles(e) : r(), e.offsetWidth, e.classList.remove("is-dragging"));
191
+ this._clearDragStyles(e);
190
192
  };
191
- if (this._isReducedMotion() || typeof e.animate != "function" || Math.abs(n) < 1) {
192
- e.classList.add("is-dragging"), i(!0);
193
+ if (s(this) || Math.abs(n) < 1) {
194
+ e.classList.remove("is-dragging"), r();
193
195
  return;
194
196
  }
195
- let a = this._dragCloseSign, o = this._measureDragSize(), s = f(n, 0, t, u.rebound), c = s.map((e) => ({
196
- transform: this._dragAxis === "x" ? `translateX(${e * a}px)` : `translateY(${e * a}px)`,
197
- "--wui-internal-drag-backdrop-opacity": String(Math.max(0, 1 - e / o))
198
- }));
199
- e.classList.add("is-dragging");
200
- let l = (s.length - 1) * T, d = e.animate(c, {
201
- duration: l,
202
- easing: "linear",
203
- fill: "both"
204
- });
205
- d.onfinish = () => {
206
- i(!1), d.cancel();
207
- }, this._dragAnimation = d;
197
+ this._startSettle(e, 0, 1, this._settleDuration(Math.abs(n), t), j, r);
198
+ }
199
+ _settleDuration(e, t) {
200
+ let n = e / Math.max(Math.abs(t), M) * 1e3;
201
+ return Math.min(k, Math.max(O, n));
202
+ }
203
+ _startSettle(e, t, n, r, i, a) {
204
+ this._abortSettle();
205
+ let o = this._dragCloseSign;
206
+ 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);
207
+ }
208
+ _finishSettle() {
209
+ let e = this._settleFinish;
210
+ e && (this._abortSettle(), e());
211
+ }
212
+ _abortSettle() {
213
+ this._settleFinish = null, this._settleTimer !== void 0 && (clearTimeout(this._settleTimer), this._settleTimer = void 0);
214
+ let e = this.dialog;
215
+ e && (e.classList.remove("is-settling"), e.style.removeProperty("--wui-internal-settle-duration"), e.style.removeProperty("--wui-internal-settle-easing"));
208
216
  }
209
217
  _closeFromDrag() {
210
- this._closeFromUser(), this.controlled && (this._dragAwaitWriteback = !0, this._dragRequestTimer = setTimeout(this._handleDragWritebackTimeout, w));
218
+ this._closeFromUser(), this.controlled && (this._dragAwaitWriteback = !0, this._dragRequestTimer = setTimeout(this._handleDragWritebackTimeout, E));
211
219
  }
212
220
  connectedCallback() {
213
- 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");
221
+ 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();
214
222
  }
215
223
  firstUpdated() {
216
224
  this._checkSlotContent("footer");
217
225
  }
218
226
  disconnectedCallback() {
219
- 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();
227
+ 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();
228
+ }
229
+ _reclaimIfOpen() {
230
+ if (!this.open || this._handle) return;
231
+ let e = this.dialog;
232
+ e && (this._handle = this._overlay.claim(e, { ancestryFrom: this }), this._syncDragInert());
220
233
  }
221
234
  _checkSlotContent(e) {
222
235
  let t = this.shadowRoot?.querySelector(`slot[name="${e}"]`);
@@ -238,22 +251,27 @@ var E = class extends h {
238
251
  if (this._isDragging() && !this.open && this._cancelActiveDrag(), this._userOpenChange.consume() && this.emitOpenChange(), this._dragAwaitWriteback) {
239
252
  this._cancelDragAwait();
240
253
  let e = this.dialog;
241
- e && !this.open ? (e.classList.remove("is-visible"), this._clearDragStyles(e)) : e && this.open && this._springRebound(e, 0, this._dragCloseDistance(e));
254
+ e && !this.open ? (e.classList.remove("is-visible"), this._clearDragStyles(e)) : e && this.open && this._settleRebound(e, 0, this._dragCloseDistance(e));
242
255
  }
243
- if (!this.open && this._dragAnimation === null && !this._isDragging()) {
256
+ if (!this.open && !this._isDragging()) {
257
+ this._abortSettle();
244
258
  let e = this.dialog;
245
259
  e && this._clearDragStyles(e);
246
260
  }
247
- this._presence.sync(this.open), this.open ? this._nestedLayers.register() : this._nestedLayers.unregister();
261
+ if (this._presence.sync(this.open), this.open) {
262
+ this._nestedLayers.register();
263
+ let e = this.dialog;
264
+ e && (this._handle?.release(), this._handle = this._overlay.claim(e, { ancestryFrom: this }), this._syncDragInert());
265
+ } else this._nestedLayers.unregister(), this._handle?.release(), this._handle = null;
248
266
  }
249
267
  (e.has("open") || e.has("noScrollLock")) && this._syncScrollLock();
250
268
  }
251
269
  }
252
270
  handleTransitionEnd(e) {
253
- this._presence.handleTransitionEnd(e);
271
+ e.target === e.currentTarget && (this._presence.handleTransitionEnd(e), e.propertyName === "transform" && this._finishSettle());
254
272
  }
255
273
  handleKeydown(e) {
256
- if (e.key !== "Escape") return;
274
+ if (e.key !== "Escape" || e.defaultPrevented) return;
257
275
  let t = e.composedPath(), n = t.indexOf(e.currentTarget);
258
276
  if (!(n > 0 && t.slice(0, n).some((e) => e instanceof HTMLDialogElement))) {
259
277
  if (this._isDragging()) {
@@ -289,8 +307,17 @@ var E = class extends h {
289
307
  this._userOpenChange.mark(), this.open = !1;
290
308
  }
291
309
  }
310
+ handleDialogPointerDown(e) {
311
+ this._backdropPress = {
312
+ onMask: e.target === e.currentTarget,
313
+ x: e.clientX,
314
+ y: e.clientY
315
+ };
316
+ }
292
317
  handleBackdropClick(e) {
293
- e.target === e.currentTarget && (this.noBackdropClose || this._isDragging() || this._closeFromUser());
318
+ if (e.target !== e.currentTarget || this.noBackdropClose || this._isDragging() || e.detail === 0) return;
319
+ let t = this._backdropPress;
320
+ this._backdropPress = null, t && t.onMask && (Math.hypot(e.clientX - t.x, e.clientY - t.y) > D || this._closeFromUser());
294
321
  }
295
322
  emitOpenChange(e = this.open) {
296
323
  i(this, e);
@@ -299,26 +326,27 @@ var E = class extends h {
299
326
  this._scrollLock.sync(e && !this.noScrollLock);
300
327
  }
301
328
  render() {
302
- let e = this._hasHeaderSlot || !!this.heading, n = this.dialogLabel.trim(), r = !n && !this.headless && e ? "wui-drawer-heading" : _, i = this.draggable ? g`
329
+ let e = this._hasHeaderSlot || !!this.heading, n = this.dialogLabel.trim(), r = !n && !this.headless && e ? "wui-drawer-heading" : g, i = this.draggable ? h`
303
330
  <div class="wui-drawer-drag-zone" @pointerdown=${this._handleDragPointerDown}>
304
331
  <div class="wui-drawer-drag-bar"></div>
305
332
  </div>
306
- ` : _;
307
- return g`
333
+ ` : g;
334
+ return h`
308
335
  <dialog
309
- aria-label=${n || _}
336
+ aria-label=${n || g}
310
337
  aria-labelledby=${r}
311
338
  @cancel=${this.handleCancel}
312
339
  @close=${this.handleNativeClose}
313
340
  @click=${this.handleBackdropClick}
341
+ @pointerdown=${this.handleDialogPointerDown}
314
342
  @keydown=${this.handleKeydown}
315
343
  @transitionend=${this.handleTransitionEnd}
316
344
  >
317
- ${this.headless ? g`<slot></slot>${i}` : g`
345
+ ${this.headless ? h`<slot></slot>${i}` : h`
318
346
  <div class="wui-drawer-body wui-glass">
319
347
  <div class="wui-drawer-header" id="wui-drawer-heading" ?hidden=${!e}>
320
348
  <slot name="header" @slotchange=${this.handleHeaderSlotChange}>
321
- ${this.heading ? g`<span class="wui-drawer-heading">${this.heading}</span>` : _}
349
+ ${this.heading ? h`<span class="wui-drawer-heading">${this.heading}</span>` : g}
322
350
  </slot>
323
351
  </div>
324
352
  <div class="wui-drawer-content">
@@ -328,7 +356,7 @@ var E = class extends h {
328
356
  <slot name="footer" @slotchange=${this.handleFooterSlotChange}></slot>
329
357
  </div>
330
358
  </div>
331
- ${this.closable ? g`
359
+ ${this.closable ? h`
332
360
  <web-ui-button
333
361
  class="wui-drawer-close"
334
362
  @click=${this._closeFromUser}
@@ -339,44 +367,44 @@ var E = class extends h {
339
367
  >
340
368
  <web-ui-icon size="14" .icon=${t}></web-ui-icon>
341
369
  </web-ui-button>
342
- ` : _}
370
+ ` : g}
343
371
  ${i}
344
372
  `}
345
373
  </dialog>
346
374
  `;
347
375
  }
348
376
  };
349
- e([b({
377
+ e([y({
350
378
  type: Boolean,
351
379
  reflect: !0
352
- })], E.prototype, "open", void 0), e([b({
380
+ })], P.prototype, "open", void 0), e([y({
353
381
  type: Boolean,
354
382
  reflect: !0,
355
383
  attribute: "no-scroll-lock"
356
- })], E.prototype, "noScrollLock", void 0), e([b({
384
+ })], P.prototype, "noScrollLock", void 0), e([y({
357
385
  type: Boolean,
358
386
  reflect: !0,
359
387
  attribute: "no-backdrop-close"
360
- })], E.prototype, "noBackdropClose", void 0), e([b({
388
+ })], P.prototype, "noBackdropClose", void 0), e([y({
361
389
  type: Boolean,
362
390
  reflect: !0
363
- })], E.prototype, "controlled", void 0), e([b({
391
+ })], P.prototype, "controlled", void 0), e([y({
364
392
  type: String,
365
393
  reflect: !0
366
- })], E.prototype, "placement", null), e([b({ type: String })], E.prototype, "heading", void 0), e([b({
394
+ })], P.prototype, "placement", null), e([y({ type: String })], P.prototype, "heading", void 0), e([y({
367
395
  type: Boolean,
368
396
  reflect: !0
369
- })], E.prototype, "closable", void 0), e([b({
397
+ })], P.prototype, "closable", void 0), e([y({
370
398
  type: Boolean,
371
399
  reflect: !0
372
- })], E.prototype, "headless", void 0), e([b({
400
+ })], P.prototype, "headless", void 0), e([y({
373
401
  type: String,
374
402
  attribute: "dialog-label"
375
- })], E.prototype, "dialogLabel", void 0), e([b({
403
+ })], P.prototype, "dialogLabel", void 0), e([y({
376
404
  type: Boolean,
377
405
  reflect: !0
378
- })], E.prototype, "draggable", void 0), E = e([y("web-ui-drawer")], E);
406
+ })], P.prototype, "draggable", void 0), P = e([v("web-ui-drawer")], P);
379
407
  //#endregion
380
- export { E as WebUiDrawer };
408
+ export { P as WebUiDrawer };
381
409
 
382
410
  //# sourceMappingURL=index.js.map