@nonoun/native-ui 0.2.8 → 0.2.10

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 (67) hide show
  1. package/dist/components-lean.css +119 -6
  2. package/dist/components.css +119 -6
  3. package/dist/{ui-icon-element.js → components.js} +1387 -465
  4. package/dist/containers/ui-layout-sidebar/ui-layout-sidebar-element.d.ts.map +1 -1
  5. package/dist/core/trait-runtime.d.ts.map +1 -1
  6. package/dist/{register-all2.js → core.js} +79 -35
  7. package/dist/custom-elements.json +2747 -2747
  8. package/dist/foundation.css +1 -15
  9. package/dist/inspector/build-inspector.d.ts +8 -0
  10. package/dist/inspector/build-inspector.d.ts.map +1 -0
  11. package/dist/inspector/index.d.ts +10 -0
  12. package/dist/inspector/index.d.ts.map +1 -0
  13. package/dist/{nav/inspector/ds-color-swatch-element.d.ts → inspector/native-tokens-color-swatch-element.d.ts} +3 -3
  14. package/dist/inspector/native-tokens-color-swatch-element.d.ts.map +1 -0
  15. package/dist/inspector/native-tokens-color-swatch.d.ts +3 -0
  16. package/dist/inspector/native-tokens-color-swatch.d.ts.map +1 -0
  17. package/dist/{nav/inspector/ds-colors-element.d.ts → inspector/native-tokens-colors-element.d.ts} +4 -4
  18. package/dist/inspector/native-tokens-colors-element.d.ts.map +1 -0
  19. package/dist/inspector/native-tokens-colors.d.ts +4 -0
  20. package/dist/inspector/native-tokens-colors.d.ts.map +1 -0
  21. package/dist/inspector/native-tokens-inspector-element.d.ts +15 -0
  22. package/dist/inspector/native-tokens-inspector-element.d.ts.map +1 -0
  23. package/dist/inspector/native-tokens-inspector.d.ts +3 -0
  24. package/dist/inspector/native-tokens-inspector.d.ts.map +1 -0
  25. package/dist/{nav/inspector/ds-themes-element.d.ts → inspector/native-tokens-themes-element.d.ts} +4 -4
  26. package/dist/inspector/native-tokens-themes-element.d.ts.map +1 -0
  27. package/dist/inspector/native-tokens-themes.d.ts +4 -0
  28. package/dist/inspector/native-tokens-themes.d.ts.map +1 -0
  29. package/dist/{nav/inspector/ds-variable-element.d.ts → inspector/native-tokens-variable-element.d.ts} +4 -4
  30. package/dist/inspector/native-tokens-variable-element.d.ts.map +1 -0
  31. package/dist/inspector/native-tokens-variable.d.ts +4 -0
  32. package/dist/inspector/native-tokens-variable.d.ts.map +1 -0
  33. package/dist/inspector.css +31 -31
  34. package/dist/inspector.d.ts +11 -6
  35. package/dist/inspector.d.ts.map +1 -1
  36. package/dist/inspector.js +123 -105
  37. package/dist/kernel.js +77 -77
  38. package/dist/native-ui-lean.css +120 -21
  39. package/dist/native-ui.css +120 -21
  40. package/dist/native-ui.js +4 -49
  41. package/dist/register-all.js +4 -3
  42. package/dist/traits/adapters/draggable-adapter.d.ts.map +1 -1
  43. package/dist/traits/drag-controller.d.ts +3 -0
  44. package/dist/traits/drag-controller.d.ts.map +1 -1
  45. package/dist/traits.js +3 -6
  46. package/dist/ui-icon.js +56 -0
  47. package/package.json +1 -1
  48. package/dist/define.js +0 -62
  49. package/dist/dialog-controller.js +0 -703
  50. package/dist/nav/inspector/build-inspector.d.ts +0 -8
  51. package/dist/nav/inspector/build-inspector.d.ts.map +0 -1
  52. package/dist/nav/inspector/ds-color-swatch-element.d.ts.map +0 -1
  53. package/dist/nav/inspector/ds-color-swatch.d.ts +0 -3
  54. package/dist/nav/inspector/ds-color-swatch.d.ts.map +0 -1
  55. package/dist/nav/inspector/ds-colors-element.d.ts.map +0 -1
  56. package/dist/nav/inspector/ds-colors.d.ts +0 -4
  57. package/dist/nav/inspector/ds-colors.d.ts.map +0 -1
  58. package/dist/nav/inspector/ds-themes-element.d.ts.map +0 -1
  59. package/dist/nav/inspector/ds-themes.d.ts +0 -4
  60. package/dist/nav/inspector/ds-themes.d.ts.map +0 -1
  61. package/dist/nav/inspector/ds-variable-element.d.ts.map +0 -1
  62. package/dist/nav/inspector/ds-variable.d.ts +0 -4
  63. package/dist/nav/inspector/ds-variable.d.ts.map +0 -1
  64. package/dist/nav/inspector/index.d.ts +0 -9
  65. package/dist/nav/inspector/index.d.ts.map +0 -1
  66. package/dist/ui-element.js +0 -133
  67. package/dist/uid.js +0 -87
@@ -1,703 +0,0 @@
1
- import { l as e, m as t, t as n } from "./uid.js";
2
- import { i as r } from "./define.js";
3
- function i(n) {
4
- let r = e();
5
- t(null);
6
- try {
7
- return n();
8
- } finally {
9
- t(r);
10
- }
11
- }
12
- var a = class {
13
- #e = /* @__PURE__ */ new Set();
14
- #t = null;
15
- #n = !1;
16
- register(e) {
17
- this.#e.add(e), this.#a();
18
- }
19
- unregister(e) {
20
- this.#e.delete(e), this.#t === e && (this.#t = null), this.#e.size === 0 && this.#o();
21
- }
22
- /** Release the current claim (e.g. on pointerup). */
23
- release() {
24
- this.#t = null;
25
- }
26
- /** Get the currently active (claiming) participant, if any. */
27
- get activeParticipant() {
28
- return this.#t;
29
- }
30
- #r = (e) => {
31
- if (this.#t) return;
32
- let t = e.target, n = [];
33
- for (let e of this.#e) e.host.contains(t) && n.push(e);
34
- if (n.length !== 0) {
35
- n.sort((e, t) => e.priority - t.priority);
36
- for (let t of n) if (t.onGestureStart(e) === "claim") {
37
- this.#t = t;
38
- for (let e of n) e !== t && e.onGestureCancel?.();
39
- return;
40
- }
41
- }
42
- };
43
- #i = () => {
44
- this.release();
45
- };
46
- #a() {
47
- this.#n ||= (document.addEventListener("pointerdown", this.#r, !0), document.addEventListener("pointerup", this.#i, !0), document.addEventListener("pointercancel", this.#i, !0), !0);
48
- }
49
- #o() {
50
- this.#n &&= (document.removeEventListener("pointerdown", this.#r, !0), document.removeEventListener("pointerup", this.#i, !0), document.removeEventListener("pointercancel", this.#i, !0), !1);
51
- }
52
- }, o = class {
53
- #e = [];
54
- #t = !1;
55
- #n = (e) => {
56
- let t = this.#e[this.#e.length - 1];
57
- t && (t.contains(e.target) || t.dispatchEvent(new CustomEvent("ui-dismiss", {
58
- bubbles: !0,
59
- composed: !0
60
- })));
61
- };
62
- #r = (e) => {
63
- if (e.key !== "Escape") return;
64
- let t = this.#e[this.#e.length - 1];
65
- t && (e.preventDefault(), t.dispatchEvent(new CustomEvent("ui-dismiss", {
66
- bubbles: !0,
67
- composed: !0
68
- })));
69
- };
70
- push(e) {
71
- let t = this.#e.indexOf(e);
72
- t !== -1 && this.#e.splice(t, 1), this.#e.push(e), this.#i();
73
- }
74
- remove(e) {
75
- let t = this.#e.indexOf(e);
76
- t !== -1 && this.#e.splice(t, 1), this.#a();
77
- }
78
- #i() {
79
- this.#t ||= (document.addEventListener("pointerdown", this.#n, !0), document.addEventListener("keydown", this.#r), !0);
80
- }
81
- #a() {
82
- this.#e.length > 0 || (document.removeEventListener("pointerdown", this.#n, !0), document.removeEventListener("keydown", this.#r), this.#t = !1);
83
- }
84
- }, s = class {
85
- #e = null;
86
- #t = 0;
87
- #n = [];
88
- #r() {
89
- return this.#e && this.#e.isConnected ? this.#e : (this.#e = document.createElement("div"), this.#e.className = "ui-toast-container", this.#e.setAttribute("role", "status"), this.#e.setAttribute("aria-live", "polite"), this.#e.setAttribute("aria-atomic", "false"), this.#e.style.cssText = "\n position: fixed;\n top: 1rem;\n right: 1rem;\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n z-index: 10000;\n pointer-events: none;\n ", document.body.appendChild(this.#e), this.#e);
90
- }
91
- toast(e, t) {
92
- let { message: n, intent: r = "info", duration: i = 4e3, dismissible: a = !0 } = t, o = this.#t++, s = this.#r(), c = document.createElement("div");
93
- c.className = "ui-toast", c.setAttribute("intent", r), c.setAttribute("role", "alert"), c.style.cssText = "pointer-events: auto;";
94
- let l = document.createElement("span");
95
- if (l.className = "ui-toast-message", l.textContent = n, c.appendChild(l), a) {
96
- let e = document.createElement("button");
97
- e.className = "ui-toast-close", e.setAttribute("aria-label", "Dismiss"), e.textContent = "×", e.addEventListener("click", () => this.dismiss(o)), c.appendChild(e);
98
- }
99
- s.appendChild(c);
100
- let u = i > 0 ? setTimeout(() => this.dismiss(o), i) : null;
101
- return this.#n.push({
102
- id: o,
103
- el: c,
104
- timer: u
105
- }), e.dispatchEvent(new CustomEvent("ui-toast", {
106
- bubbles: !0,
107
- composed: !0,
108
- detail: {
109
- id: o,
110
- message: n,
111
- intent: r
112
- }
113
- })), o;
114
- }
115
- dismiss(e) {
116
- let t = this.#n.findIndex((t) => t.id === e);
117
- if (t === -1) return;
118
- let n = this.#n[t];
119
- n.timer && clearTimeout(n.timer), n.el.remove(), this.#n.splice(t, 1), this.#n.length === 0 && this.#e && (this.#e.remove(), this.#e = null);
120
- }
121
- dismissAll() {
122
- for (let e of [...this.#n]) this.dismiss(e.id);
123
- }
124
- }, c = null;
125
- function l() {
126
- return c ||= {
127
- dismissStack: new o(),
128
- toastManager: new s(),
129
- gestureRouter: new a()
130
- }, c;
131
- }
132
- /** Enables pointer-driven drag-and-drop with drop, slot, or preview reordering. */
133
- var u = class {
134
- host;
135
- selector;
136
- dropZoneSelector;
137
- axis;
138
- mode;
139
- disabled;
140
- #e = null;
141
- #t = null;
142
- #n = null;
143
- #r = 0;
144
- #i = 0;
145
- #a = 0;
146
- #o = 0;
147
- #s = -1;
148
- #c = -1;
149
- #l = !1;
150
- #u = null;
151
- #d = null;
152
- #f = -1;
153
- constructor(e, t) {
154
- this.host = e, this.selector = t.selector, this.dropZoneSelector = t.dropZoneSelector ?? "", this.axis = t.axis ?? "both", this.mode = t.mode ?? "drop", this.disabled = t.disabled ?? !1, this.attach();
155
- }
156
- attach() {
157
- this.#l || (this.#l = !0, this.host.addEventListener("pointerdown", this.#_), this.host.addEventListener("pointerenter", this.#h, !0), this.host.addEventListener("pointerleave", this.#g, !0));
158
- }
159
- detach() {
160
- this.#l && (this.#l = !1, this.host.removeEventListener("pointerdown", this.#_), this.host.removeEventListener("pointerenter", this.#h, !0), this.host.removeEventListener("pointerleave", this.#g, !0), this.#O());
161
- }
162
- destroy() {
163
- this.detach();
164
- }
165
- #p() {
166
- return this.selector ? [...this.host.querySelectorAll(this.selector)] : [];
167
- }
168
- #m() {
169
- return this.dropZoneSelector ? [...this.host.querySelectorAll(this.dropZoneSelector)] : this.#p();
170
- }
171
- #h = (e) => {
172
- if (this.disabled || !this.selector || this.#t) return;
173
- let t = e.target.closest?.(this.selector);
174
- !t || !this.host.contains(t) || (t.style.outline = "2px solid var(--ui-focus-ring, highlight)", t.style.outlineOffset = "2px");
175
- };
176
- #g = (e) => {
177
- if (!this.selector) return;
178
- let t = e.target.closest?.(this.selector);
179
- !t || !this.host.contains(t) || (t.style.removeProperty("outline"), t.style.removeProperty("outline-offset"));
180
- };
181
- #_ = (e) => {
182
- if (e.button !== 0 || this.disabled || !this.selector) return;
183
- let t = e.target.closest?.(this.selector);
184
- if (!t || !this.host.contains(t)) return;
185
- let n = this.#p().indexOf(t);
186
- if (n === -1) return;
187
- e.preventDefault(), this.#e = t, this.#s = n, this.#r = e.clientX, this.#i = e.clientY;
188
- let r = t.getBoundingClientRect();
189
- this.#a = r.left + r.width / 2 - e.clientX, this.#o = r.top + r.height / 2 - e.clientY, document.addEventListener("pointermove", this.#v), document.addEventListener("pointerup", this.#w), document.addEventListener("pointercancel", this.#T), document.addEventListener("keydown", this.#E);
190
- };
191
- #v = (e) => {
192
- if (!this.#e) return;
193
- if (!this.#t) {
194
- this.#e.style.removeProperty("outline"), this.#e.style.removeProperty("outline-offset");
195
- try {
196
- this.#D(e);
197
- } catch {
198
- this.#O();
199
- return;
200
- }
201
- this.#e.setAttribute("dragging", ""), this.mode === "preview" && (this.#u = this.#e.parentElement, this.#d = this.#e.nextElementSibling, this.#f = -1), this.host.dispatchEvent(new CustomEvent("ui-drag-start", {
202
- bubbles: !0,
203
- composed: !0,
204
- detail: {
205
- item: this.#e,
206
- index: this.#s
207
- }
208
- }));
209
- }
210
- let t = e.clientX - this.#r, n = e.clientY - this.#i;
211
- this.#t.style.transform = `translate(${t}px, ${n}px) scale(0.9)`, this.host.dispatchEvent(new CustomEvent("ui-drag-move", {
212
- bubbles: !0,
213
- composed: !0,
214
- detail: {
215
- item: this.#e,
216
- x: e.clientX,
217
- y: e.clientY
218
- }
219
- }));
220
- let r = this.#m().filter((e) => e !== this.#t);
221
- if (this.mode === "slot") {
222
- let t = e.clientX + this.#a, n = e.clientY + this.#o, i = r.filter((e) => e !== this.#e), a = 0;
223
- for (let e = 0; e < i.length; e++) {
224
- let r = i[e].getBoundingClientRect(), o = r.left + r.width / 2, s = r.top + r.height / 2;
225
- if (this.axis === "horizontal" ? t > o : (this.axis === "vertical" || t > o) && n > s) a = e + 1;
226
- else break;
227
- }
228
- this.#b(r, a);
229
- } else if (this.mode === "preview") {
230
- let t = e.clientX + this.#a, n = e.clientY + this.#o;
231
- this.#S(r, t, n);
232
- } else {
233
- let t = null, n = -1;
234
- for (let i = 0; i < r.length; i++) {
235
- let a = r[i].getBoundingClientRect(), o = a.left + a.width / 2, s = a.top + a.height / 2;
236
- if (this.axis === "vertical" ? e.clientY >= a.top && e.clientY <= a.bottom : this.axis === "horizontal" ? e.clientX >= a.left && e.clientX <= a.right : e.clientX >= a.left && e.clientX <= a.right && e.clientY >= a.top && e.clientY <= a.bottom) {
237
- n = (this.axis === "horizontal" ? e.clientX < o : e.clientY < s) ? i : i + 1, t = r[i];
238
- break;
239
- }
240
- }
241
- this.#y(r, t, n);
242
- }
243
- };
244
- #y(e, t, n) {
245
- for (let n of e) n !== t && (n.removeAttribute("drag-over"), n.style.removeProperty("outline"), n.style.removeProperty("outline-offset"));
246
- t && (t.setAttribute("drag-over", ""), t.style.outline = "2px solid var(--ui-focus-ring, highlight)", t.style.outlineOffset = "2px", this.host.dispatchEvent(new CustomEvent("ui-drag-over", {
247
- bubbles: !0,
248
- composed: !0,
249
- detail: {
250
- item: this.#e,
251
- target: t,
252
- index: n
253
- }
254
- })));
255
- }
256
- #b(e, t) {
257
- if (t === -1 || t === this.#c) return;
258
- this.#c = t, this.#x(e), this.#n || (this.#n = document.createElement("div"), this.#n.className = "drag-placeholder", this.#n.setAttribute("aria-hidden", "true"));
259
- let n = e.filter((e) => e !== this.#e), r = Math.min(t, n.length);
260
- r < n.length ? n[r].before(this.#n) : n.length > 0 ? n[n.length - 1].after(this.#n) : this.host.appendChild(this.#n), r < n.length && n[r].setAttribute("drag-slot-before", ""), r > 0 && r - 1 < n.length && n[r - 1].setAttribute("drag-slot-after", "");
261
- let i = r < n.length ? n[r] : null;
262
- this.host.dispatchEvent(new CustomEvent("ui-drag-over", {
263
- bubbles: !0,
264
- composed: !0,
265
- detail: {
266
- item: this.#e,
267
- index: t,
268
- insertBefore: i
269
- }
270
- }));
271
- }
272
- #x(e) {
273
- for (let t of e) t.removeAttribute("drag-slot-before"), t.removeAttribute("drag-slot-after");
274
- }
275
- #S(e, t, n) {
276
- let r = e.filter((e) => e !== this.#e);
277
- if (r.length === 0) return;
278
- let i = e[0].getBoundingClientRect(), a = 1;
279
- for (let t = 1; t < e.length && Math.abs(e[t].getBoundingClientRect().top - i.top) < i.height * .5; t++) a = t + 1;
280
- let o = a > 1 ? e[1].getBoundingClientRect().left - i.left : i.width, s = a < e.length ? e[a].getBoundingClientRect().top - i.top : i.height, c = Math.round((t - (i.left + i.width / 2)) / o), l = Math.round((n - (i.top + i.height / 2)) / s), u = Math.ceil(r.length / a) - 1, d = Math.max(0, Math.min(c, a - 1)), f = Math.max(0, Math.min(l, u)) * a + d;
281
- if (f = Math.max(0, Math.min(f, r.length)), f === this.#f) return;
282
- this.#f = f;
283
- let p = f < r.length ? r[f] : null, m = () => {
284
- p ? p.before(this.#e) : r[r.length - 1].after(this.#e);
285
- };
286
- typeof document.startViewTransition == "function" ? document.startViewTransition(m) : m(), this.host.dispatchEvent(new CustomEvent("ui-drag-over", {
287
- bubbles: !0,
288
- composed: !0,
289
- detail: {
290
- item: this.#e,
291
- index: f,
292
- insertBefore: p
293
- }
294
- }));
295
- }
296
- #C() {
297
- if (this.mode !== "preview" || !this.#e || !this.#u) return;
298
- let e = this.#e, t = this.#d, n = this.#u, r = () => {
299
- t && t.isConnected ? t.before(e) : n.appendChild(e);
300
- };
301
- typeof document.startViewTransition == "function" ? document.startViewTransition(r) : r();
302
- }
303
- #w = (e) => {
304
- if (this.#e) {
305
- if (this.#t) if (this.mode === "slot") {
306
- let e = this.#p().filter((e) => e !== this.#e), t = this.#c >= 0 && this.#c < e.length ? e[this.#c] : null;
307
- this.host.dispatchEvent(new CustomEvent("ui-drop", {
308
- bubbles: !0,
309
- composed: !0,
310
- detail: {
311
- item: this.#e,
312
- fromIndex: this.#s,
313
- toIndex: this.#c,
314
- insertBefore: t
315
- }
316
- }));
317
- } else if (this.mode === "preview") {
318
- let e = this.#p(), t = this.#e ? e.indexOf(this.#e) : -1;
319
- this.#u = null, this.#d = null, this.host.dispatchEvent(new CustomEvent("ui-drop", {
320
- bubbles: !0,
321
- composed: !0,
322
- detail: {
323
- item: this.#e,
324
- fromIndex: this.#s,
325
- toIndex: t
326
- }
327
- }));
328
- } else {
329
- let e = this.#m(), t = e.find((e) => e.hasAttribute("drag-over")) ?? null, n = t ? e.indexOf(t) : -1;
330
- this.host.dispatchEvent(new CustomEvent("ui-drop", {
331
- bubbles: !0,
332
- composed: !0,
333
- detail: {
334
- item: this.#e,
335
- target: t,
336
- fromIndex: this.#s,
337
- toIndex: n
338
- }
339
- }));
340
- }
341
- this.#O();
342
- }
343
- };
344
- #T = () => {
345
- this.#e && (this.#C(), this.#t && this.host.dispatchEvent(new CustomEvent("ui-drag-cancel", {
346
- bubbles: !0,
347
- composed: !0,
348
- detail: { item: this.#e }
349
- })), this.#O());
350
- };
351
- #E = (e) => {
352
- e.key === "Escape" && this.#e && (e.preventDefault(), this.#C(), this.#t && this.host.dispatchEvent(new CustomEvent("ui-drag-cancel", {
353
- bubbles: !0,
354
- composed: !0,
355
- detail: { item: this.#e }
356
- })), this.#O());
357
- };
358
- #D(e) {
359
- if (!this.#e) return;
360
- let t = this.#e.getBoundingClientRect(), n = this.#e.cloneNode(!0);
361
- n.setAttribute("popover", "manual"), n.setAttribute("aria-hidden", "true"), document.body.appendChild(n), n.showPopover(), n.style.position = "fixed", n.style.inset = "unset", n.style.left = `${t.left}px`, n.style.top = `${t.top}px`, n.style.width = `${t.width}px`, n.style.height = `${t.height}px`, n.style.margin = "0", n.style.pointerEvents = "none", n.style.opacity = "0.8", n.style.transformOrigin = "center center", n.style.border = "none", n.style.outline = "none", this.#t = n, this.#r = e.clientX, this.#i = e.clientY;
362
- }
363
- #O() {
364
- if (this.#t) {
365
- if (this.#t.isConnected) try {
366
- this.#t.hidePopover();
367
- } catch {}
368
- this.#t.remove(), this.#t = null;
369
- }
370
- this.#e && this.#e.removeAttribute("dragging");
371
- let e = this.#m();
372
- if (this.mode === "slot") this.#x(e);
373
- else for (let t of e) t.removeAttribute("drag-over"), t.style.removeProperty("outline"), t.style.removeProperty("outline-offset");
374
- this.#n &&= (this.#n.remove(), null), this.#e = null, this.#s = -1, this.#c = -1, this.#u = null, this.#d = null, this.#f = -1, document.removeEventListener("pointermove", this.#v), document.removeEventListener("pointerup", this.#w), document.removeEventListener("pointercancel", this.#T), document.removeEventListener("keydown", this.#E);
375
- }
376
- }, d = class {
377
- host;
378
- handleSelector;
379
- axis;
380
- min;
381
- max;
382
- disabled;
383
- reverse;
384
- #e = 0;
385
- #t = 0;
386
- #n = 0;
387
- #r = 0;
388
- #i = !1;
389
- #a = !1;
390
- constructor(e, t) {
391
- this.host = e, this.handleSelector = t.handleSelector, this.axis = t.axis ?? "horizontal", this.min = t.min ?? 0, this.max = t.max ?? Infinity, this.disabled = t.disabled ?? !1, this.reverse = t.reverse ?? !1, this.attach();
392
- }
393
- attach() {
394
- this.#a || (this.#a = !0, this.host.addEventListener("pointerdown", this.#o));
395
- }
396
- detach() {
397
- this.#a && (this.#a = !1, this.host.removeEventListener("pointerdown", this.#o), this.#d());
398
- }
399
- destroy() {
400
- this.detach();
401
- }
402
- #o = (e) => {
403
- if (e.button !== 0 || this.disabled || !this.handleSelector) return;
404
- let t = e.target.closest?.(this.handleSelector);
405
- if (!t || !this.host.contains(t)) return;
406
- e.preventDefault(), this.#i = !0, this.#e = e.clientX, this.#t = e.clientY;
407
- let n = this.host.getBoundingClientRect();
408
- this.#n = n.width, this.#r = n.height, this.host.setAttribute("resizing", ""), this.host.setPointerCapture(e.pointerId), document.addEventListener("pointermove", this.#s), document.addEventListener("pointerup", this.#c), document.addEventListener("pointercancel", this.#l), document.addEventListener("keydown", this.#u), this.host.dispatchEvent(new CustomEvent("ui-resize-start", {
409
- bubbles: !0,
410
- composed: !0,
411
- detail: {
412
- width: this.#n,
413
- height: this.#r
414
- }
415
- }));
416
- };
417
- #s = (e) => {
418
- if (!this.#i) return;
419
- let t = this.reverse ? -1 : 1, n = (e.clientX - this.#e) * t, r = (e.clientY - this.#t) * t;
420
- if (this.axis === "horizontal" || this.axis === "both") {
421
- let e = Math.min(this.max, Math.max(this.min, this.#n + n));
422
- this.host.style.width = `${e}px`;
423
- }
424
- if (this.axis === "vertical" || this.axis === "both") {
425
- let e = Math.min(this.max, Math.max(this.min, this.#r + r));
426
- this.host.style.height = `${e}px`;
427
- }
428
- let i = this.host.getBoundingClientRect();
429
- this.host.dispatchEvent(new CustomEvent("ui-resize-move", {
430
- bubbles: !0,
431
- composed: !0,
432
- detail: {
433
- width: i.width,
434
- height: i.height
435
- }
436
- }));
437
- };
438
- #c = (e) => {
439
- if (!this.#i) return;
440
- let t = this.host.getBoundingClientRect();
441
- this.host.dispatchEvent(new CustomEvent("ui-resize-end", {
442
- bubbles: !0,
443
- composed: !0,
444
- detail: {
445
- width: t.width,
446
- height: t.height
447
- }
448
- })), this.#d();
449
- };
450
- #l = () => {
451
- this.#i && ((this.axis === "horizontal" || this.axis === "both") && (this.host.style.width = `${this.#n}px`), (this.axis === "vertical" || this.axis === "both") && (this.host.style.height = `${this.#r}px`), this.#d());
452
- };
453
- #u = (e) => {
454
- e.key === "Escape" && this.#i && (e.preventDefault(), (this.axis === "horizontal" || this.axis === "both") && (this.host.style.width = `${this.#n}px`), (this.axis === "vertical" || this.axis === "both") && (this.host.style.height = `${this.#r}px`), this.#d());
455
- };
456
- #d() {
457
- this.#i = !1, this.host.removeAttribute("resizing"), document.removeEventListener("pointermove", this.#s), document.removeEventListener("pointerup", this.#c), document.removeEventListener("pointercancel", this.#l), document.removeEventListener("keydown", this.#u);
458
- }
459
- }, f = class {
460
- host;
461
- disabled;
462
- #e = !1;
463
- #t = "mouse";
464
- #n = !1;
465
- constructor(e, t = {}) {
466
- this.host = e, this.disabled = t.disabled ?? !1, this.attach();
467
- }
468
- #r() {
469
- return typeof this.disabled == "function" ? this.disabled() : this.disabled ? !0 : this.host.disabled === !0;
470
- }
471
- attach() {
472
- this.#n || (this.#n = !0, this.host.addEventListener("pointerdown", this.#i), this.host.addEventListener("pointerup", this.#a), this.host.addEventListener("pointercancel", this.#o), this.host.addEventListener("lostpointercapture", this.#s), this.host.addEventListener("keydown", this.#c), this.host.addEventListener("keyup", this.#l));
473
- }
474
- detach() {
475
- this.#n && (this.#n = !1, this.host.removeEventListener("pointerdown", this.#i), this.host.removeEventListener("pointerup", this.#a), this.host.removeEventListener("pointercancel", this.#o), this.host.removeEventListener("lostpointercapture", this.#s), this.host.removeEventListener("keydown", this.#c), this.host.removeEventListener("keyup", this.#l), this.host.removeAttribute("pressed"));
476
- }
477
- destroy() {
478
- this.detach();
479
- }
480
- #i = (e) => {
481
- e.button === 0 && (this.#r() || (this.#t = e.pointerType, this.host.setPointerCapture(e.pointerId), this.#e = !0, this.host.toggleAttribute("pressed", !0)));
482
- };
483
- #a = (e) => {
484
- this.#e && (this.#e = !1, this.host.removeAttribute("pressed"), this.host.dispatchEvent(new CustomEvent("ui-press", {
485
- bubbles: !0,
486
- composed: !0,
487
- detail: { pointerType: this.#t }
488
- })));
489
- };
490
- #o = () => {
491
- this.#e = !1, this.host.removeAttribute("pressed");
492
- };
493
- #s = () => {
494
- this.#e = !1, this.host.removeAttribute("pressed");
495
- };
496
- #c = (e) => {
497
- e.repeat || this.#r() || e.key !== "Enter" && e.key !== " " || (e.key === " " && e.preventDefault(), this.host.toggleAttribute("pressed", !0));
498
- };
499
- #l = (e) => {
500
- e.key !== "Enter" && e.key !== " " || (this.host.removeAttribute("pressed"), !this.#r() && this.host.dispatchEvent(new CustomEvent("ui-press", {
501
- bubbles: !0,
502
- composed: !0,
503
- detail: { pointerType: "keyboard" }
504
- })));
505
- };
506
- }, p = class {
507
- host;
508
- selector;
509
- orientation;
510
- wrap;
511
- disabled;
512
- #e = 0;
513
- #t = !1;
514
- constructor(e, t = {}) {
515
- this.host = e, this.selector = t.selector ?? ":scope > [role]", this.orientation = t.orientation ?? "vertical", this.wrap = t.wrap ?? !0, this.disabled = t.disabled ?? !1, this.attach();
516
- }
517
- attach() {
518
- if (this.#t || this.disabled) return;
519
- this.#t = !0, this.host.addEventListener("keydown", this.#r), this.host.addEventListener("focusin", this.#i);
520
- let e = this.#n();
521
- for (let t = 0; t < e.length; t++) e[t].setAttribute("tabindex", t === 0 ? "0" : "-1");
522
- }
523
- detach() {
524
- this.#t && (this.#t = !1, this.host.removeEventListener("keydown", this.#r), this.host.removeEventListener("focusin", this.#i));
525
- }
526
- destroy() {
527
- this.detach();
528
- }
529
- #n() {
530
- return [...this.host.querySelectorAll(this.selector)].filter((e) => !e.hasAttribute("disabled") && e.getAttribute("aria-disabled") !== "true");
531
- }
532
- #r = (e) => {
533
- let t = this.#n();
534
- if (t.length === 0) return;
535
- let n = 0, r = this.orientation === "vertical" || this.orientation === "both", i = this.orientation === "horizontal" || this.orientation === "both";
536
- if (e.key === "ArrowDown" && r) n = 1;
537
- else if (e.key === "ArrowUp" && r) n = -1;
538
- else if (e.key === "ArrowRight" && i) n = 1;
539
- else if (e.key === "ArrowLeft" && i) n = -1;
540
- else if (e.key === "Home") {
541
- this.#a(t, 0), e.preventDefault();
542
- return;
543
- } else if (e.key === "End") {
544
- this.#a(t, t.length - 1), e.preventDefault();
545
- return;
546
- } else return;
547
- e.preventDefault();
548
- let a = this.#e + n;
549
- a = this.wrap ? (a + t.length) % t.length : Math.max(0, Math.min(t.length - 1, a)), this.#a(t, a);
550
- };
551
- #i = (e) => {
552
- e.target === this.host && this.#n()[this.#e]?.focus();
553
- };
554
- #a(e, t) {
555
- let n = e[this.#e];
556
- n && n.setAttribute("tabindex", "-1"), this.#e = t;
557
- let r = e[t];
558
- r && (r.setAttribute("tabindex", "0"), r.focus());
559
- }
560
- }, m = class {
561
- host;
562
- #e = 0;
563
- constructor(e) {
564
- this.host = e;
565
- }
566
- enable() {
567
- this.#e = requestAnimationFrame(() => {
568
- this.#e = 0, l().dismissStack.push(this.host);
569
- });
570
- }
571
- disable() {
572
- this.#e &&= (cancelAnimationFrame(this.#e), 0), l().dismissStack.remove(this.host);
573
- }
574
- destroy() {
575
- this.#e &&= (cancelAnimationFrame(this.#e), 0), l().dismissStack.remove(this.host);
576
- }
577
- }, h = class {
578
- host;
579
- #e;
580
- #t = null;
581
- #n = null;
582
- constructor(e) {
583
- this.host = e, this.#e = new m(e);
584
- }
585
- wirePopover(e, t) {
586
- this.#t = e, this.#n = t;
587
- let r = n("anchor");
588
- e.style.setProperty("anchor-name", `--${r}`), t.style.setProperty("position-anchor", `--${r}`);
589
- }
590
- syncPopover(e) {
591
- if (e) {
592
- try {
593
- this.#n?.showPopover();
594
- } catch {}
595
- this.#e.enable();
596
- } else {
597
- try {
598
- this.#n?.hidePopover();
599
- } catch {}
600
- this.#e.disable();
601
- }
602
- }
603
- destroy() {
604
- this.#e.destroy(), this.#t?.style.removeProperty("anchor-name"), this.#t = null, this.#n?.style.removeProperty("position-anchor"), this.#n = null;
605
- }
606
- }, g = class {
607
- host;
608
- listValue = r(null);
609
- itemSelector;
610
- ariaAttr;
611
- autoSync;
612
- onChildSelect;
613
- #e;
614
- #t = !1;
615
- constructor(e, t = {}) {
616
- if (this.host = e, this.itemSelector = t.itemSelector ?? ":scope > [role]", this.ariaAttr = t.ariaAttr ?? "aria-selected", this.autoSync = t.autoSync ?? !0, this.onChildSelect = t.onChildSelect ?? ((t) => {
617
- this.listValue.value = t.value, e.dispatchEvent(new CustomEvent("ui-change", {
618
- bubbles: !0,
619
- composed: !0,
620
- cancelable: !0,
621
- detail: t
622
- }));
623
- }), this.#e = new p(e, {
624
- selector: this.itemSelector,
625
- orientation: t.orientation ?? "vertical",
626
- wrap: t.wrap ?? !0,
627
- disabled: t.disabled ?? !1
628
- }), this.attach(), this.autoSync && t.addEffect && t.deferChildren) {
629
- let n = t.addEffect;
630
- t.deferChildren(() => {
631
- n(() => {
632
- let t = this.listValue.value, n = e.querySelectorAll(this.itemSelector), r = this.ariaAttr === "aria-current";
633
- for (let e of n) {
634
- let n = e.getAttribute("value") ?? e.value;
635
- if (n !== void 0) {
636
- let i = n === t;
637
- r ? i ? e.setAttribute("aria-current", "page") : e.removeAttribute("aria-current") : e.setAttribute(this.ariaAttr, i ? "true" : "false");
638
- }
639
- }
640
- });
641
- });
642
- }
643
- }
644
- attach() {
645
- this.#t || (this.#t = !0, this.host.addEventListener("ui-select", this.#n));
646
- }
647
- detach() {
648
- this.#t && (this.#t = !1, this.host.removeEventListener("ui-select", this.#n));
649
- }
650
- destroy() {
651
- this.detach(), this.#e.destroy();
652
- }
653
- /** Access the underlying roving focus controller for direct configuration. */
654
- get rovingFocus() {
655
- return this.#e;
656
- }
657
- #n = (e) => {
658
- if (this.host.disabled === !0) return;
659
- let t = e.detail;
660
- this.onChildSelect(t);
661
- };
662
- }, _ = class {
663
- host;
664
- #e = null;
665
- #t;
666
- constructor(e, t = {}) {
667
- this.host = e, this.#t = t.contentTarget, this.#a();
668
- }
669
- get open() {
670
- return this.#e?.open ?? !1;
671
- }
672
- showModal() {
673
- !this.#e || this.open || (this.#e.showModal(), this.host.toggleAttribute("open", !0), queueMicrotask(() => {
674
- let e = this.#e?.querySelector("[autofocus]");
675
- if (e) {
676
- e.focus();
677
- return;
678
- }
679
- (this.#e?.querySelector("ui-input, ui-textarea, ui-button, ui-select, ui-listbox, input, textarea, select, button, [tabindex]:not([tabindex=\"-1\"])"))?.focus();
680
- }));
681
- }
682
- close() {
683
- !this.#e || !this.open || (this.#e.close(), this.host.toggleAttribute("open", !1), this.host.dispatchEvent(new Event("close")));
684
- }
685
- destroy() {
686
- this.#e && (this.#e.removeEventListener("cancel", this.#n), this.#e.removeEventListener("click", this.#r)), this.host.removeEventListener("ui-dismiss", this.#i), this.#e = null;
687
- }
688
- #n = (e) => {
689
- e.preventDefault(), this.host.hasAttribute("no-close-on-escape") || this.close();
690
- };
691
- #r = (e) => {
692
- e.target === this.#e && !this.host.hasAttribute("no-close-on-backdrop") && this.close();
693
- };
694
- #i = () => {
695
- this.host.hasAttribute("no-close-on-escape") || this.close();
696
- };
697
- #a() {
698
- let e = document.createElement("dialog"), t = this.#t ? this.#t(e) : e;
699
- for (; this.host.firstChild;) t.appendChild(this.host.firstChild);
700
- t !== e && e.appendChild(t), this.host.appendChild(e), this.#e = e, e.addEventListener("cancel", this.#n), e.addEventListener("click", this.#r), this.host.addEventListener("ui-dismiss", this.#i);
701
- }
702
- };
703
- export { p as a, u as c, l as d, a as f, m as i, o as l, g as n, f as o, i as p, h as r, d as s, _ as t, s as u };