@nonoun/native-ui 0.2.9 → 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 (57) hide show
  1. package/dist/{ui-layout-inspector-element.js → components.js} +2279 -386
  2. package/dist/{register-all2.js → core.js} +78 -35
  3. package/dist/custom-elements.json +2502 -2502
  4. package/dist/inspector/build-inspector.d.ts +4 -4
  5. package/dist/inspector/build-inspector.d.ts.map +1 -1
  6. package/dist/inspector/index.d.ts +8 -8
  7. package/dist/inspector/index.d.ts.map +1 -1
  8. package/dist/inspector/{ds-color-swatch-element.d.ts → native-tokens-color-swatch-element.d.ts} +2 -2
  9. package/dist/inspector/native-tokens-color-swatch-element.d.ts.map +1 -0
  10. package/dist/inspector/native-tokens-color-swatch.d.ts +3 -0
  11. package/dist/inspector/native-tokens-color-swatch.d.ts.map +1 -0
  12. package/dist/inspector/{ds-colors-element.d.ts → native-tokens-colors-element.d.ts} +3 -3
  13. package/dist/inspector/native-tokens-colors-element.d.ts.map +1 -0
  14. package/dist/inspector/native-tokens-colors.d.ts +4 -0
  15. package/dist/inspector/native-tokens-colors.d.ts.map +1 -0
  16. package/dist/inspector/native-tokens-inspector-element.d.ts +15 -0
  17. package/dist/inspector/native-tokens-inspector-element.d.ts.map +1 -0
  18. package/dist/inspector/native-tokens-inspector.d.ts +3 -0
  19. package/dist/inspector/native-tokens-inspector.d.ts.map +1 -0
  20. package/dist/inspector/{ds-themes-element.d.ts → native-tokens-themes-element.d.ts} +3 -3
  21. package/dist/inspector/native-tokens-themes-element.d.ts.map +1 -0
  22. package/dist/inspector/native-tokens-themes.d.ts +4 -0
  23. package/dist/inspector/native-tokens-themes.d.ts.map +1 -0
  24. package/dist/inspector/{ds-variable-element.d.ts → native-tokens-variable-element.d.ts} +3 -3
  25. package/dist/inspector/native-tokens-variable-element.d.ts.map +1 -0
  26. package/dist/inspector/native-tokens-variable.d.ts +4 -0
  27. package/dist/inspector/native-tokens-variable.d.ts.map +1 -0
  28. package/dist/inspector.css +30 -30
  29. package/dist/inspector.d.ts +10 -9
  30. package/dist/inspector.d.ts.map +1 -1
  31. package/dist/inspector.js +102 -103
  32. package/dist/kernel.js +175 -174
  33. package/dist/native-ui.js +4 -49
  34. package/dist/register-all.js +4 -4
  35. package/dist/traits.js +3 -5
  36. package/dist/ui-icon.js +56 -0
  37. package/package.json +1 -1
  38. package/dist/dialog-controller.js +0 -391
  39. package/dist/inspector/ds-color-swatch-element.d.ts.map +0 -1
  40. package/dist/inspector/ds-color-swatch.d.ts +0 -3
  41. package/dist/inspector/ds-color-swatch.d.ts.map +0 -1
  42. package/dist/inspector/ds-colors-element.d.ts.map +0 -1
  43. package/dist/inspector/ds-colors.d.ts +0 -4
  44. package/dist/inspector/ds-colors.d.ts.map +0 -1
  45. package/dist/inspector/ds-inspector-element.d.ts +0 -15
  46. package/dist/inspector/ds-inspector-element.d.ts.map +0 -1
  47. package/dist/inspector/ds-inspector.d.ts +0 -3
  48. package/dist/inspector/ds-inspector.d.ts.map +0 -1
  49. package/dist/inspector/ds-themes-element.d.ts.map +0 -1
  50. package/dist/inspector/ds-themes.d.ts +0 -4
  51. package/dist/inspector/ds-themes.d.ts.map +0 -1
  52. package/dist/inspector/ds-variable-element.d.ts.map +0 -1
  53. package/dist/inspector/ds-variable.d.ts +0 -4
  54. package/dist/inspector/ds-variable.d.ts.map +0 -1
  55. package/dist/list-navigate-controller.js +0 -457
  56. package/dist/ui-icon-element.js +0 -986
  57. package/dist/uid.js +0 -147
@@ -1,986 +0,0 @@
1
- import { a as e, o as t, r as n, t as r } from "./uid.js";
2
- import { a as i, n as a, t as o, u as s } from "./list-navigate-controller.js";
3
- function c(e, t, n, r) {
4
- let i;
5
- return () => {
6
- let n = t.value;
7
- e.toggleAttribute("disabled", n), n ? e.setAttribute("aria-disabled", "true") : e.removeAttribute("aria-disabled"), r?.manageTabindex && e.setAttribute("tabindex", n ? "-1" : "0"), i !== void 0 && i !== n && e.dispatchEvent(new CustomEvent("ui-disabled", {
8
- bubbles: !0,
9
- composed: !0,
10
- detail: { disabled: n }
11
- })), i = n;
12
- };
13
- }
14
- function l(e, n, r) {
15
- let i = r.attribute ?? n;
16
- if (r.type === "boolean") {
17
- let n = t(!1);
18
- return {
19
- get signal() {
20
- return n;
21
- },
22
- get value() {
23
- return n.value;
24
- },
25
- set(t) {
26
- n.value = t, e.toggleAttribute(i, t);
27
- },
28
- fromAttribute(e) {
29
- n.value = e !== null;
30
- }
31
- };
32
- }
33
- if (r.type === "number") {
34
- let n = r.initial ?? 0, a = t(n);
35
- return {
36
- get signal() {
37
- return a;
38
- },
39
- get value() {
40
- return a.value;
41
- },
42
- set(t) {
43
- a.value = t, e.setAttribute(i, String(t));
44
- },
45
- fromAttribute(e) {
46
- a.value = parseFloat(e ?? String(n)) || n;
47
- }
48
- };
49
- }
50
- let a = r.initial ?? "", o = t(a);
51
- return {
52
- get signal() {
53
- return o;
54
- },
55
- get value() {
56
- return o.value;
57
- },
58
- set(t) {
59
- o.value = t, t ? e.getAttribute(i) !== t && e.setAttribute(i, t) : e.removeAttribute(i);
60
- },
61
- fromAttribute(e) {
62
- o.value = e ?? a;
63
- }
64
- };
65
- }
66
- /**
67
- * Dispatches an attribute change to the matching reactive prop.
68
- * Returns true if handled, false if no matching prop was found.
69
- *
70
- * ```ts
71
- * attributeChangedCallback(name, old, val) {
72
- * if (old === val) return;
73
- * if (syncProp(this.#props, name, val)) return;
74
- * // handle non-prop attributes...
75
- * super.attributeChangedCallback?.(name, old, val);
76
- * }
77
- * ```
78
- */
79
- function u(e, t, n) {
80
- let r = e[t];
81
- return r ? (r.fromAttribute(n), !0) : !1;
82
- }
83
- /**
84
- * Mixin that provides the common form-association boilerplate:
85
- *
86
- * - `static formAssociated = true`
87
- * - `formDisabledCallback` → calls `onFormDisabled(disabled)`
88
- * - `formResetCallback` → calls `onFormReset()`
89
- * - `formStateRestoreCallback` → calls `onFormStateRestore(state)`
90
- *
91
- * Must remain a mixin (not a controller) because the Web Components spec
92
- * requires `static formAssociated = true` on the class constructor.
93
- *
94
- * ```ts
95
- * class UIInput extends FormAssociable(UIElement) {
96
- * #internals = this.attachInternals();
97
- * onFormDisabled(disabled: boolean) { this.#disabled.value = disabled; }
98
- * onFormReset() { this.textContent = ''; }
99
- * }
100
- * ```
101
- */
102
- function d(e) {
103
- return class extends e {
104
- static formAssociated = !0;
105
- /** Override to handle form-initiated disabled state changes. */
106
- onFormDisabled(e) {}
107
- /** Override to handle form reset. */
108
- onFormReset() {}
109
- /** Override to handle form state restore (e.g. back/forward navigation). */
110
- onFormStateRestore(e) {}
111
- formDisabledCallback(e) {
112
- this.onFormDisabled(e);
113
- }
114
- formResetCallback() {
115
- this.onFormReset();
116
- }
117
- formStateRestoreCallback(e, t) {
118
- this.onFormStateRestore(e);
119
- }
120
- formAssociatedCallback(e) {}
121
- };
122
- }
123
- function f(e, t) {
124
- return e.label.toLowerCase().includes(t.toLowerCase());
125
- }
126
- var p = class {
127
- data;
128
- query;
129
- #e;
130
- #t;
131
- filtered;
132
- sorted;
133
- activeIndex;
134
- activeItem;
135
- value;
136
- selected;
137
- #n;
138
- selectedItem;
139
- empty;
140
- constructor(n = {}) {
141
- this.data = t([]), this.query = t(""), this.#e = t(n.filterFn ?? f), this.#t = t(n.sortFn ?? null), this.#n = t(n.multiple ?? !1), this.activeIndex = t(n.initialActiveIndex ?? -1), this.value = t(null), this.selected = t(/* @__PURE__ */ new Set()), this.filtered = e(() => {
142
- let e = this.data.value, t = this.query.value, n = this.#e.value;
143
- return t ? e.filter((e) => n(e, t)) : e;
144
- }), this.sorted = e(() => {
145
- let e = this.filtered.value, t = this.#t.value;
146
- return t ? [...e].sort(t) : e;
147
- }), this.activeItem = e(() => {
148
- let e = this.view.value, t = this.activeIndex.value;
149
- return t >= 0 && t < e.length ? e[t] : null;
150
- }), this.selectedItem = e(() => {
151
- let e = this.value.value;
152
- return e === null ? null : this.data.value.find((t) => t.value === e) ?? null;
153
- }), this.empty = e(() => this.view.value.length === 0);
154
- }
155
- get view() {
156
- return this.sorted;
157
- }
158
- get multiple() {
159
- return this.#n.value;
160
- }
161
- set multiple(e) {
162
- this.#n.value = e;
163
- }
164
- setQuery(e, t) {
165
- n(() => {
166
- this.query.value = e, this.activeIndex.value = t ?? -1;
167
- });
168
- }
169
- moveActive(e, t) {
170
- let n = t ?? this.view.value.length;
171
- if (n === 0) return;
172
- let r = this.activeIndex.value;
173
- if (t == null) {
174
- let t = this.view.value, i = (r + e + n) % n, a = 0;
175
- for (; t[i]?.disabled && a < n;) i = (i + e + n) % n, a++;
176
- this.activeIndex.value = i;
177
- return;
178
- }
179
- this.activeIndex.value = (r + e + n) % n;
180
- }
181
- selectActive() {
182
- let e = this.activeItem.value;
183
- e && this.select(e.value);
184
- }
185
- select(e) {
186
- if (this.#n.value) {
187
- let t = new Set(this.selected.value);
188
- t.add(e), n(() => {
189
- this.selected.value = t, this.value.value = e;
190
- });
191
- } else this.value.value = e;
192
- }
193
- deselect(e) {
194
- if (!this.#n.value) return;
195
- let t = new Set(this.selected.value);
196
- t.delete(e), n(() => {
197
- this.selected.value = t, this.value.value === e && (this.value.value = null);
198
- });
199
- }
200
- toggle(e) {
201
- this.#n.value && this.selected.value.has(e) ? this.deselect(e) : this.select(e);
202
- }
203
- selectAll() {
204
- if (!this.#n.value) return;
205
- let e = this.view.value;
206
- this.selected.value = new Set(e.map((e) => e.value));
207
- }
208
- clearSelection() {
209
- n(() => {
210
- this.value.value = null, this.selected.value = /* @__PURE__ */ new Set();
211
- });
212
- }
213
- reset() {
214
- n(() => {
215
- this.data.value = [], this.query.value = "", this.activeIndex.value = -1, this.value.value = null, this.selected.value = /* @__PURE__ */ new Set();
216
- });
217
- }
218
- setFilter(e) {
219
- this.#e.value = e;
220
- }
221
- setSort(e) {
222
- this.#t.value = e;
223
- }
224
- };
225
- function m(e) {
226
- return new p(e);
227
- }
228
- /**
229
- * Validates a JSON string → typed option array.
230
- * Filters out entries missing `value` or `label` strings.
231
- */
232
- function h(e, t) {
233
- try {
234
- let t = JSON.parse(e);
235
- return Array.isArray(t) ? t.filter((e) => typeof e == "object" && !!e && typeof e.value == "string" && typeof e.label == "string") : [];
236
- } catch {
237
- return console.warn(`<${t}>: invalid options JSON`, e), [];
238
- }
239
- }
240
- /**
241
- * Fetches remote options with abort-guard and stale-response protection.
242
- * Aborts any in-flight request before starting a new one.
243
- * Returns the new AbortController for the caller to store.
244
- */
245
- async function g(e, t, n, r) {
246
- t?.abort();
247
- let i = new AbortController();
248
- try {
249
- let t = await fetch(e, { signal: i.signal });
250
- if (!t.ok) return console.warn(`<${r}>: fetch failed (${t.status}) for ${e}`), i;
251
- let a = await t.json();
252
- if (i.signal.aborted) return i;
253
- n.value = (Array.isArray(a) ? a : []).filter((e) => typeof e == "object" && !!e && typeof e.value == "string" && typeof e.label == "string");
254
- } catch (e) {
255
- if (e instanceof DOMException && e.name === "AbortError") return i;
256
- console.warn(`<${r}>: fetch error`, e);
257
- }
258
- return i;
259
- }
260
- /**
261
- * Button component with press feedback and form association.
262
- * @attr {boolean} disabled - Disables interaction
263
- * @attr {string} type - Form button type: "button" | "submit" | "reset"
264
- * @fires ui-press - Fired on activation (click, Enter, Space)
265
- */
266
- var _ = class extends d(s) {
267
- static observedAttributes = ["disabled", "type"];
268
- #e;
269
- #t;
270
- #n;
271
- #r;
272
- constructor() {
273
- super(), this.#e = this.attachInternals(), this.#e.role = "button", this.#t = l(this, "disabled", { type: "boolean" }), this.#n = l(this, "type", {
274
- type: "string",
275
- initial: "button"
276
- });
277
- }
278
- get disabled() {
279
- return this.#t.value;
280
- }
281
- set disabled(e) {
282
- this.#t.set(e);
283
- }
284
- get type() {
285
- return this.#n.value;
286
- }
287
- set type(e) {
288
- this.#n.set(e);
289
- }
290
- attributeChangedCallback(e, t, n) {
291
- t !== n && (u({
292
- disabled: this.#t,
293
- type: this.#n
294
- }, e, n), super.attributeChangedCallback?.(e, t, n));
295
- }
296
- setup() {
297
- super.setup(), this.#r = new i(this, { disabled: () => this.disabled }), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.addEffect(c(this, this.#t.signal, this.#e, { manageTabindex: !0 })), this.addEventListener("ui-press", this.#i);
298
- }
299
- teardown() {
300
- this.removeEventListener("ui-press", this.#i), this.#r.destroy(), super.teardown();
301
- }
302
- #i = () => {
303
- if (this.#t.value) return;
304
- let e = this.#e.form;
305
- if (!e) return;
306
- let t = this.#n.value;
307
- t === "submit" ? e.requestSubmit() : t === "reset" && e.reset();
308
- };
309
- onFormDisabled(e) {
310
- this.#t.signal.value = e;
311
- }
312
- onFormReset() {
313
- this.#t.signal.value = this.hasAttribute("disabled");
314
- }
315
- }, v = class extends s {
316
- static observedAttributes = [
317
- "disabled",
318
- "multiple",
319
- "virtual-focus"
320
- ];
321
- #e;
322
- #t;
323
- #n = t(!1);
324
- #r = new p();
325
- #i;
326
- constructor() {
327
- super(), this.#e = this.attachInternals(), this.#e.role = "listbox", this.#t = l(this, "disabled", { type: "boolean" });
328
- }
329
- get virtualFocus() {
330
- return this.hasAttribute("virtual-focus");
331
- }
332
- set virtualFocus(e) {
333
- this.toggleAttribute("virtual-focus", e);
334
- }
335
- get disabled() {
336
- return this.#t.value;
337
- }
338
- set disabled(e) {
339
- this.#t.set(e);
340
- }
341
- get multiple() {
342
- return this.#n.value;
343
- }
344
- set multiple(e) {
345
- this.#n.value = e, this.#r.multiple = e, this.toggleAttribute("multiple", e);
346
- }
347
- get value() {
348
- return this.#r.value.value;
349
- }
350
- get controller() {
351
- return this.#r;
352
- }
353
- get listValue() {
354
- return this.#i.listValue;
355
- }
356
- attributeChangedCallback(e, t, n) {
357
- if (t !== n) {
358
- if (u({ disabled: this.#t }, e, n)) {
359
- super.attributeChangedCallback?.(e, t, n);
360
- return;
361
- }
362
- switch (e) {
363
- case "multiple":
364
- this.#n.value = n !== null, this.#r.multiple = n !== null;
365
- break;
366
- case "virtual-focus":
367
- this.#i && (this.#i.rovingFocus.disabled = n !== null);
368
- break;
369
- }
370
- super.attributeChangedCallback?.(e, t, n);
371
- }
372
- }
373
- setup() {
374
- super.setup(), this.#i = new o(this, {
375
- itemSelector: ":scope ui-option:not([disabled])",
376
- autoSync: !1,
377
- orientation: "vertical",
378
- disabled: this.virtualFocus,
379
- onChildSelect: (e) => {
380
- this.#n.value ? this.#r.toggle(e.value) : this.#r.select(e.value), this.dispatchEvent(new CustomEvent("ui-change", {
381
- bubbles: !0,
382
- composed: !0,
383
- cancelable: !0,
384
- detail: e
385
- }));
386
- },
387
- addEffect: (e) => this.addEffect(e),
388
- deferChildren: (e) => this.deferChildren(e)
389
- }), this.addEffect(c(this, this.#t.signal, this.#e)), this.deferChildren(() => {
390
- this.addEffect(() => {
391
- let e = this.#r.value.value, t = this.#r.selected.value, n = this.#n.value, r = this.querySelectorAll(":scope ui-option");
392
- for (let i of r) {
393
- let r = i.getAttribute("value") ?? "", a = n ? t.has(r) : r === e;
394
- i.setAttribute("aria-selected", a ? "true" : "false");
395
- }
396
- }), this.addEffect(() => {
397
- let e = this.#r.activeIndex.value, t = this.querySelectorAll(":scope ui-option:not([disabled])");
398
- for (let n = 0; n < t.length; n++) {
399
- let i = t[n], a = n === e;
400
- i.toggleAttribute("active", a), a && (i.id ||= r("opt"), this.setAttribute("aria-activedescendant", i.id));
401
- }
402
- (e < 0 || e >= t.length) && this.removeAttribute("aria-activedescendant");
403
- });
404
- });
405
- }
406
- teardown() {
407
- this.#i.destroy(), super.teardown();
408
- }
409
- getActiveOption() {
410
- let e = this.#r.activeIndex.value;
411
- return this.querySelectorAll(":scope ui-option:not([disabled])")[e] ?? null;
412
- }
413
- }, y = class extends s {
414
- static observedAttributes = [
415
- "value",
416
- "disabled",
417
- "label"
418
- ];
419
- #e;
420
- #t = t("");
421
- #n;
422
- #r = t("");
423
- constructor() {
424
- super(), this.#e = this.attachInternals(), this.#e.role = "option", this.#n = l(this, "disabled", { type: "boolean" });
425
- }
426
- get value() {
427
- return this.#t.value;
428
- }
429
- set value(e) {
430
- this.#t.value = e, this.getAttribute("value") !== e && this.setAttribute("value", e);
431
- }
432
- get disabled() {
433
- return this.#n.value;
434
- }
435
- set disabled(e) {
436
- this.#n.set(e);
437
- }
438
- get label() {
439
- return this.#r.value || this.textContent?.trim() || "";
440
- }
441
- set label(e) {
442
- this.#r.value = e, e ? this.getAttribute("label") !== e && this.setAttribute("label", e) : this.removeAttribute("label");
443
- }
444
- attributeChangedCallback(e, t, n) {
445
- if (t !== n) {
446
- if (u({ disabled: this.#n }, e, n)) {
447
- super.attributeChangedCallback?.(e, t, n);
448
- return;
449
- }
450
- switch (e) {
451
- case "value":
452
- this.#t.value = n ?? "";
453
- break;
454
- case "label":
455
- this.#r.value = n ?? "";
456
- break;
457
- }
458
- super.attributeChangedCallback?.(e, t, n);
459
- }
460
- }
461
- setup() {
462
- super.setup(), this.addEffect(c(this, this.#n.signal, this.#e)), this.addEventListener("click", this.#i);
463
- }
464
- teardown() {
465
- this.removeEventListener("click", this.#i), super.teardown();
466
- }
467
- #i = () => {
468
- this.disabled || this.dispatchEvent(new CustomEvent("ui-select", {
469
- bubbles: !0,
470
- composed: !0,
471
- detail: {
472
- value: this.#t.value,
473
- label: this.label
474
- }
475
- }));
476
- };
477
- }, b = class {
478
- open = t(!1);
479
- value = t(null);
480
- label = t("");
481
- toggle() {
482
- this.open.value = !this.open.value;
483
- }
484
- show() {
485
- this.open.value = !0;
486
- }
487
- hide() {
488
- this.open.value = !1;
489
- }
490
- select(e, t) {
491
- n(() => {
492
- this.value.value = e, this.label.value = t, this.open.value = !1;
493
- });
494
- }
495
- reset() {
496
- n(() => {
497
- this.open.value = !1, this.value.value = null, this.label.value = "";
498
- });
499
- }
500
- }, x = class extends d(s) {
501
- static observedAttributes = [
502
- "value",
503
- "disabled",
504
- "name",
505
- "options",
506
- "src",
507
- "placeholder",
508
- "required"
509
- ];
510
- #e;
511
- #t = new b();
512
- #n = t(!1);
513
- #r = t(!1);
514
- #i;
515
- #a = t([]);
516
- #o = t(null);
517
- #s = t("");
518
- #c = !1;
519
- #l = null;
520
- #u = null;
521
- #d = null;
522
- #f = null;
523
- #p = "";
524
- constructor() {
525
- super(), this.#e = this.attachInternals();
526
- }
527
- get controller() {
528
- return this.#t;
529
- }
530
- get value() {
531
- return this.#t.value.value;
532
- }
533
- set value(e) {
534
- if (e === null) {
535
- this.#t.reset();
536
- return;
537
- }
538
- let t = this.querySelector(`ui-option[value="${CSS.escape(e)}"]`), n = t?.getAttribute("label") ?? t?.textContent?.trim() ?? e;
539
- this.#t.select(e, n);
540
- }
541
- get name() {
542
- return this.getAttribute("name") ?? "";
543
- }
544
- set name(e) {
545
- this.setAttribute("name", e);
546
- }
547
- get disabled() {
548
- return this.#n.value;
549
- }
550
- set disabled(e) {
551
- this.#n.value = e, this.toggleAttribute("disabled", e);
552
- }
553
- get required() {
554
- return this.#r.value;
555
- }
556
- set required(e) {
557
- this.#r.value = e, this.toggleAttribute("required", e);
558
- }
559
- get options() {
560
- return this.#a.value;
561
- }
562
- set options(e) {
563
- this.#a.value = e, this.setAttribute("options", JSON.stringify(e));
564
- }
565
- get src() {
566
- return this.#o.value;
567
- }
568
- set src(e) {
569
- this.#o.value = e, e == null ? this.removeAttribute("src") : this.setAttribute("src", e);
570
- }
571
- get placeholder() {
572
- return this.#s.value;
573
- }
574
- set placeholder(e) {
575
- this.#s.value = e, e ? this.setAttribute("placeholder", e) : this.removeAttribute("placeholder");
576
- }
577
- #m(e) {
578
- return h(e, "ui-select");
579
- }
580
- async #h(e) {
581
- this.#l = await g(e, this.#l, this.#a, "ui-select");
582
- }
583
- #g() {
584
- let e = document.createElement("ui-button");
585
- e.setAttribute("justify", "spread");
586
- let t = document.createElement("span");
587
- t.setAttribute("slot", "label"), t.textContent = this.#s.value || "\xA0", e.appendChild(t);
588
- let n = document.createElement("ui-icon");
589
- n.setAttribute("name", "caret-up-down"), n.setAttribute("slot", "trailing"), e.appendChild(n);
590
- let r = document.createElement("ui-listbox");
591
- r.setAttribute("popover", "manual"), this.appendChild(e), this.appendChild(r);
592
- }
593
- #_(e) {
594
- let t = this.#u;
595
- if (t) {
596
- for (; t.firstChild;) t.removeChild(t.firstChild);
597
- for (let n of e) {
598
- let e = document.createElement("ui-option");
599
- e.setAttribute("value", n.value), e.setAttribute("label", n.label), e.textContent = n.label, n.disabled && e.setAttribute("disabled", ""), t.appendChild(e);
600
- }
601
- }
602
- }
603
- attributeChangedCallback(e, t, n) {
604
- if (t !== n) {
605
- switch (e) {
606
- case "value":
607
- if (n !== null) {
608
- let e = this.querySelector(`ui-option[value="${CSS.escape(n)}"]`), t = e?.getAttribute("label") ?? e?.textContent?.trim() ?? n;
609
- this.#t.select(n, t);
610
- } else this.#t.reset();
611
- break;
612
- case "disabled":
613
- this.#n.value = n !== null;
614
- break;
615
- case "required":
616
- this.#r.value = n !== null;
617
- break;
618
- case "options":
619
- n ? this.#a.value = this.#m(n) : this.#a.value = [];
620
- break;
621
- case "src":
622
- this.#o.value = n;
623
- break;
624
- case "placeholder":
625
- this.#s.value = n ?? "";
626
- break;
627
- }
628
- super.attributeChangedCallback?.(e, t, n);
629
- }
630
- }
631
- setup() {
632
- if (super.setup(), this.#i = new a(this), this.#c = this.hasAttribute("options") || this.hasAttribute("src"), this.#c) {
633
- let e = this.getAttribute("options");
634
- e && (this.#a.value = this.#m(e)), this.#o.value = this.getAttribute("src"), this.#s.value = this.getAttribute("placeholder") ?? "", this.#g();
635
- }
636
- let e = this.querySelector(":scope > ui-button");
637
- this.#d = e;
638
- let t = this.querySelector(":scope > ui-listbox[popover]");
639
- this.#u = t, t?.setAttribute("popover", "manual"), e && t && this.#i.wirePopover(e, t), e?.setAttribute("aria-haspopup", "listbox"), e && t && (t.id ||= r("lb"), e.setAttribute("aria-controls", t.id)), this.#c && (this.addEffect(() => {
640
- let e = this.#a.value;
641
- this.#_(e);
642
- }), this.addEffect(() => {
643
- let e = this.#o.value;
644
- e && this.#h(e);
645
- }), this.addEffect(() => {
646
- let t = this.#s.value, n = this.#t.label.value, r = e?.querySelector("[slot=\"label\"]");
647
- r && !n && (r.textContent = t || "\xA0");
648
- })), this.deferChildren(() => {
649
- let n = this.getAttribute("value");
650
- if (n) {
651
- let e = this.querySelector(`ui-option[value="${CSS.escape(n)}"]`), t = e?.getAttribute("label") ?? e?.textContent?.trim() ?? n;
652
- this.#t.value.value = n, this.#t.label.value = t, this.#f = n, this.#p = t;
653
- }
654
- this.addEffect(() => {
655
- let t = this.#t.label.value, n = e?.querySelector("[slot=\"label\"]");
656
- n && (n.textContent = t || (this.#c ? this.#s.value || "\xA0" : n.textContent ?? ""));
657
- }), this.addEffect(() => {
658
- let e = this.#t.value.value, n = t?.querySelectorAll("ui-option") ?? [];
659
- for (let t of n) {
660
- let n = t.getAttribute("value") === e;
661
- t.setAttribute("aria-selected", String(n));
662
- }
663
- });
664
- }), this.addEffect(c(this, this.#n, this.#e)), this.addEffect(() => {
665
- let t = this.#n.value;
666
- e && e.toggleAttribute("disabled", t), t && this.#t.open.peek() && this.#t.hide();
667
- }), this.#r.value = this.hasAttribute("required"), this.addEffect(() => {
668
- let e = this.#t.value.value;
669
- this.#r.value && (e === null || e === "") ? this.#e.setValidity({ valueMissing: !0 }, "Please select an option.", this) : this.#e.setValidity({});
670
- }), this.addEffect(() => {
671
- let t = this.#t.open.value;
672
- this.#i.syncPopover(t), e?.setAttribute("aria-expanded", String(t));
673
- }), this.addEffect(() => {
674
- let e = this.#t.value.value;
675
- this.#e.setFormValue(e ?? ""), e == null ? this.removeAttribute("value") : this.setAttribute("value", e);
676
- }), e?.addEventListener("ui-press", this.#v), this.addEventListener("ui-change", this.#y), this.addEventListener("ui-select", this.#b), this.addEventListener("ui-dismiss", this.#x), e?.addEventListener("keydown", this.#S);
677
- }
678
- #v = () => {
679
- this.#n.value || this.#t.toggle();
680
- };
681
- #y = (e) => {
682
- e.target !== this && e.stopImmediatePropagation();
683
- };
684
- #b = (e) => {
685
- let t = e.detail;
686
- this.#t.select(t.value, t.label), this.dispatchEvent(new CustomEvent("ui-change", {
687
- bubbles: !0,
688
- composed: !0,
689
- detail: t
690
- }));
691
- };
692
- #x = () => {
693
- this.#t.hide();
694
- };
695
- #S = (e) => {
696
- if (this.#n.value) return;
697
- let t = this.#u;
698
- switch (e.key) {
699
- case "ArrowDown":
700
- case "ArrowUp": {
701
- e.preventDefault();
702
- let n = t?.controller;
703
- if (this.#t.open.value || this.#t.show(), n) {
704
- let r = t?.querySelectorAll(":scope ui-option:not([disabled])")?.length ?? 0;
705
- n.moveActive(e.key === "ArrowDown" ? 1 : -1, r);
706
- }
707
- break;
708
- }
709
- case "Enter":
710
- case " ":
711
- if (e.preventDefault(), this.#t.open.value) {
712
- let e = t?.getActiveOption();
713
- e && e.click();
714
- } else this.#t.toggle();
715
- break;
716
- case "Escape":
717
- this.#t.open.value && (e.preventDefault(), this.#t.hide());
718
- break;
719
- case "Home": {
720
- e.preventDefault();
721
- let n = t?.controller;
722
- n && (n.activeIndex.value = 0);
723
- break;
724
- }
725
- case "End": {
726
- e.preventDefault();
727
- let n = t?.controller;
728
- if (n) {
729
- let e = t?.querySelectorAll(":scope ui-option:not([disabled])");
730
- n.activeIndex.value = Math.max(0, (e?.length ?? 1) - 1);
731
- }
732
- break;
733
- }
734
- }
735
- };
736
- teardown() {
737
- this.#d?.removeEventListener("ui-press", this.#v), this.#d?.removeEventListener("keydown", this.#S), this.removeEventListener("ui-change", this.#y), this.removeEventListener("ui-select", this.#b), this.removeEventListener("ui-dismiss", this.#x), this.#d = null, this.#l?.abort(), this.#l = null, this.#u = null, this.#i.destroy(), super.teardown();
738
- }
739
- onFormReset() {
740
- this.#f === null ? this.#t.reset() : this.#t.select(this.#f, this.#p);
741
- }
742
- onFormStateRestore(e) {
743
- typeof e == "string" && e && (this.value = e);
744
- }
745
- onFormDisabled(e) {
746
- this.#n.value = e;
747
- }
748
- }, S = class extends d(s) {
749
- static observedAttributes = [
750
- "value",
751
- "min",
752
- "max",
753
- "step",
754
- "disabled",
755
- "name",
756
- "required"
757
- ];
758
- #e;
759
- #t = t(!1);
760
- #n = t(!1);
761
- #r = t(50);
762
- #i = 50;
763
- #a = t(0);
764
- #o = t(100);
765
- #s = t(1);
766
- #c = null;
767
- #l = !1;
768
- constructor() {
769
- super(), this.#e = this.attachInternals(), this.#e.role = "slider";
770
- }
771
- get value() {
772
- return this.#r.value;
773
- }
774
- set value(e) {
775
- this.#r.value = this.#u(e);
776
- }
777
- get min() {
778
- return this.#a.value;
779
- }
780
- set min(e) {
781
- this.#a.value = e, this.setAttribute("min", String(e));
782
- }
783
- get max() {
784
- return this.#o.value;
785
- }
786
- set max(e) {
787
- this.#o.value = e, this.setAttribute("max", String(e));
788
- }
789
- get step() {
790
- return this.#s.value;
791
- }
792
- set step(e) {
793
- this.#s.value = e, this.setAttribute("step", String(e));
794
- }
795
- get disabled() {
796
- return this.#t.value;
797
- }
798
- set disabled(e) {
799
- this.#t.value = e, this.toggleAttribute("disabled", e);
800
- }
801
- get required() {
802
- return this.#n.value;
803
- }
804
- set required(e) {
805
- this.#n.value = e, this.toggleAttribute("required", e);
806
- }
807
- get name() {
808
- return this.getAttribute("name") ?? "";
809
- }
810
- set name(e) {
811
- this.setAttribute("name", e);
812
- }
813
- attributeChangedCallback(e, t, n) {
814
- if (t !== n) {
815
- switch (e) {
816
- case "value":
817
- this.#r.value = this.#u(parseFloat(n ?? "50") || 50);
818
- break;
819
- case "min":
820
- this.#a.value = parseFloat(n ?? "0") || 0;
821
- break;
822
- case "max":
823
- this.#o.value = parseFloat(n ?? "100") || 100;
824
- break;
825
- case "step":
826
- this.#s.value = parseFloat(n ?? "1") || 1;
827
- break;
828
- case "disabled":
829
- this.#t.value = n !== null;
830
- break;
831
- case "required":
832
- this.#n.value = n !== null;
833
- break;
834
- }
835
- super.attributeChangedCallback(e, t, n);
836
- }
837
- }
838
- setup() {
839
- super.setup(), this.#i = this.#r.value, this.#c = document.createElement("div"), this.#c.classList.add("ui-range-thumb"), this.appendChild(this.#c), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.addEffect(c(this, this.#t, this.#e, { manageTabindex: !0 })), this.#n.value = this.hasAttribute("required"), this.addEffect(() => {
840
- let e = this.#r.value, t = this.#d();
841
- this.style.setProperty("--_progress", String(t)), this.setAttribute("aria-valuenow", String(e)), this.setAttribute("aria-valuemin", String(this.#a.value)), this.setAttribute("aria-valuemax", String(this.#o.value)), this.#e.setFormValue(String(e));
842
- }), this.addEventListener("pointerdown", this.#p), this.addEventListener("keydown", this.#_);
843
- }
844
- teardown() {
845
- this.removeEventListener("pointerdown", this.#p), this.removeEventListener("keydown", this.#_), this.#c &&= (this.#c.remove(), null), super.teardown();
846
- }
847
- onFormDisabled(e) {
848
- this.#t.value = e;
849
- }
850
- onFormReset() {
851
- this.#r.value = this.#i;
852
- }
853
- onFormStateRestore(e) {
854
- if (typeof e == "string") {
855
- let t = parseFloat(e);
856
- isNaN(t) || (this.value = t);
857
- }
858
- }
859
- #u(e) {
860
- let t = this.#a.value, n = this.#o.value, r = this.#s.value, i = Math.round((e - t) / r) * r + t;
861
- return Math.min(n, Math.max(t, i));
862
- }
863
- #d() {
864
- let e = this.#o.value - this.#a.value;
865
- return e === 0 ? 0 : (this.#r.value - this.#a.value) / e;
866
- }
867
- #f(e) {
868
- let t = this.getBoundingClientRect(), n = this.#c?.offsetWidth ?? 0, r = n / 2, i = t.width - n;
869
- if (i <= 0) return this.#a.value;
870
- let a = e.clientX - t.left - r, o = Math.min(1, Math.max(0, a / i));
871
- return this.#a.value + o * (this.#o.value - this.#a.value);
872
- }
873
- #p = (e) => {
874
- if (e.button !== 0 || this.#t.value) return;
875
- this.setPointerCapture(e.pointerId), this.#l = !0, this.toggleAttribute("pressed", !0);
876
- let t = this.#u(this.#f(e));
877
- this.#r.value = t, this.#v(), this.addEventListener("pointermove", this.#m), this.addEventListener("pointerup", this.#h), this.addEventListener("pointercancel", this.#g);
878
- };
879
- #m = (e) => {
880
- if (!this.#l || this.#t.value) return;
881
- let t = this.#u(this.#f(e));
882
- t !== this.#r.value && (this.#r.value = t, this.#v());
883
- };
884
- #h = () => {
885
- this.#l = !1, this.removeAttribute("pressed"), this.removeEventListener("pointermove", this.#m), this.removeEventListener("pointerup", this.#h), this.removeEventListener("pointercancel", this.#g), this.#y();
886
- };
887
- #g = () => {
888
- this.#l = !1, this.removeAttribute("pressed"), this.removeEventListener("pointermove", this.#m), this.removeEventListener("pointerup", this.#h), this.removeEventListener("pointercancel", this.#g);
889
- };
890
- #_ = (e) => {
891
- if (this.#t.value) return;
892
- let t = this.#s.value, n = t * 10, r = this.#r.value;
893
- switch (e.key) {
894
- case "ArrowRight":
895
- case "ArrowUp":
896
- r += t;
897
- break;
898
- case "ArrowLeft":
899
- case "ArrowDown":
900
- r -= t;
901
- break;
902
- case "PageUp":
903
- r += n;
904
- break;
905
- case "PageDown":
906
- r -= n;
907
- break;
908
- case "Home":
909
- r = this.#a.value;
910
- break;
911
- case "End":
912
- r = this.#o.value;
913
- break;
914
- default: return;
915
- }
916
- e.preventDefault(), r = this.#u(r), r !== this.#r.value && (this.#r.value = r, this.#v(), this.#y());
917
- };
918
- #v() {
919
- this.dispatchEvent(new CustomEvent("ui-input", {
920
- bubbles: !0,
921
- composed: !0,
922
- detail: { value: this.#r.value }
923
- }));
924
- }
925
- #y() {
926
- this.dispatchEvent(new CustomEvent("ui-change", {
927
- bubbles: !0,
928
- composed: !0,
929
- detail: { value: this.#r.value }
930
- }));
931
- }
932
- }, C = /* @__PURE__ */ new Map(), w = /* @__PURE__ */ new Set();
933
- function T(e, t) {
934
- C.set(e, t), w.forEach((t) => t(e));
935
- }
936
- function E(e) {
937
- return C.get(e);
938
- }
939
- function D(e) {
940
- return w.add(e), () => w.delete(e);
941
- }
942
- /**
943
- * Icon component rendering SVG from the global icon registry.
944
- * @attr {string} name - Icon name from the Phosphor icon set
945
- * @attr {string} weight - Icon weight: "regular" (default) or "fill"
946
- * @attr {string} size - Icon size override
947
- * @attr {string} aria-label - Accessible label (sets role="img" when present)
948
- */
949
- var O = class extends s {
950
- static observedAttributes = [
951
- "name",
952
- "weight",
953
- "size",
954
- "aria-label"
955
- ];
956
- #e = null;
957
- setup() {
958
- super.setup(), this.#t(), this.#r();
959
- }
960
- attributeChangedCallback(e, t, n) {
961
- super.attributeChangedCallback(e, t, n), (e === "name" || e === "weight") && this.#r(), e === "aria-label" && this.#t();
962
- }
963
- disconnectedCallback() {
964
- super.disconnectedCallback(), this.#e?.(), this.#e = null;
965
- }
966
- #t() {
967
- this.hasAttribute("aria-label") ? (this.setAttribute("role", "img"), this.removeAttribute("aria-hidden")) : (this.setAttribute("aria-hidden", "true"), this.removeAttribute("role"));
968
- }
969
- /** Compute the effective registry key from name + weight attributes. */
970
- #n() {
971
- let e = this.getAttribute("name");
972
- return e ? this.getAttribute("weight") === "fill" && !e.endsWith("-fill") ? `${e}-fill` : e : null;
973
- }
974
- #r() {
975
- let e = this.#n();
976
- if (!e) {
977
- this.innerHTML = "", this.#e?.(), this.#e = null;
978
- return;
979
- }
980
- let t = E(e);
981
- t ? (this.innerHTML = t, this.#e?.(), this.#e = null) : (this.innerHTML = "", this.#e ||= D((e) => {
982
- e === this.#n() && this.#r();
983
- }));
984
- }
985
- };
986
- export { u as _, S as a, y as c, g as d, h as f, l as g, d as h, T as i, v as l, m, E as n, x as o, p, D as r, b as s, O as t, _ as u, c as v };