@nonoun/native-ui 0.2.8 → 0.2.9

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 (62) hide show
  1. package/dist/components-lean.css +119 -6
  2. package/dist/components.css +119 -6
  3. package/dist/containers/ui-layout-sidebar/ui-layout-sidebar-element.d.ts.map +1 -1
  4. package/dist/core/trait-runtime.d.ts.map +1 -1
  5. package/dist/custom-elements.json +1602 -1602
  6. package/dist/dialog-controller.js +38 -350
  7. package/dist/foundation.css +1 -15
  8. package/dist/{nav/inspector → inspector}/build-inspector.d.ts +2 -2
  9. package/dist/inspector/build-inspector.d.ts.map +1 -0
  10. package/dist/{nav/inspector → inspector}/ds-color-swatch-element.d.ts +1 -1
  11. package/dist/inspector/ds-color-swatch-element.d.ts.map +1 -0
  12. package/dist/inspector/ds-color-swatch.d.ts.map +1 -0
  13. package/dist/{nav/inspector → inspector}/ds-colors-element.d.ts +1 -1
  14. package/dist/inspector/ds-colors-element.d.ts.map +1 -0
  15. package/dist/inspector/ds-colors.d.ts.map +1 -0
  16. package/dist/inspector/ds-inspector-element.d.ts +15 -0
  17. package/dist/inspector/ds-inspector-element.d.ts.map +1 -0
  18. package/dist/inspector/ds-inspector.d.ts +3 -0
  19. package/dist/inspector/ds-inspector.d.ts.map +1 -0
  20. package/dist/{nav/inspector → inspector}/ds-themes-element.d.ts +1 -1
  21. package/dist/inspector/ds-themes-element.d.ts.map +1 -0
  22. package/dist/inspector/ds-themes.d.ts.map +1 -0
  23. package/dist/{nav/inspector → inspector}/ds-variable-element.d.ts +1 -1
  24. package/dist/inspector/ds-variable-element.d.ts.map +1 -0
  25. package/dist/inspector/ds-variable.d.ts.map +1 -0
  26. package/dist/{nav/inspector → inspector}/index.d.ts +1 -0
  27. package/dist/inspector/index.d.ts.map +1 -0
  28. package/dist/inspector.css +1 -1
  29. package/dist/inspector.d.ts +10 -6
  30. package/dist/inspector.d.ts.map +1 -1
  31. package/dist/inspector.js +94 -75
  32. package/dist/kernel.js +185 -186
  33. package/dist/list-navigate-controller.js +457 -0
  34. package/dist/native-ui-lean.css +120 -21
  35. package/dist/native-ui.css +120 -21
  36. package/dist/native-ui.js +7 -7
  37. package/dist/register-all.js +4 -3
  38. package/dist/register-all2.js +20 -19
  39. package/dist/traits/adapters/draggable-adapter.d.ts.map +1 -1
  40. package/dist/traits/drag-controller.d.ts +3 -0
  41. package/dist/traits/drag-controller.d.ts.map +1 -1
  42. package/dist/traits.js +5 -6
  43. package/dist/ui-icon-element.js +391 -4153
  44. package/dist/ui-layout-inspector-element.js +3777 -0
  45. package/dist/uid.js +63 -3
  46. package/package.json +1 -1
  47. package/dist/define.js +0 -62
  48. package/dist/nav/inspector/build-inspector.d.ts.map +0 -1
  49. package/dist/nav/inspector/ds-color-swatch-element.d.ts.map +0 -1
  50. package/dist/nav/inspector/ds-color-swatch.d.ts.map +0 -1
  51. package/dist/nav/inspector/ds-colors-element.d.ts.map +0 -1
  52. package/dist/nav/inspector/ds-colors.d.ts.map +0 -1
  53. package/dist/nav/inspector/ds-themes-element.d.ts.map +0 -1
  54. package/dist/nav/inspector/ds-themes.d.ts.map +0 -1
  55. package/dist/nav/inspector/ds-variable-element.d.ts.map +0 -1
  56. package/dist/nav/inspector/ds-variable.d.ts.map +0 -1
  57. package/dist/nav/inspector/index.d.ts.map +0 -1
  58. package/dist/ui-element.js +0 -133
  59. /package/dist/{nav/inspector → inspector}/ds-color-swatch.d.ts +0 -0
  60. /package/dist/{nav/inspector → inspector}/ds-colors.d.ts +0 -0
  61. /package/dist/{nav/inspector → inspector}/ds-themes.d.ts +0 -0
  62. /package/dist/{nav/inspector → inspector}/ds-variable.d.ts +0 -0
@@ -1,6 +1,5 @@
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) {
1
+ import { c as e, u as t } from "./uid.js";
2
+ function n(n) {
4
3
  let r = e();
5
4
  t(null);
6
5
  try {
@@ -9,134 +8,15 @@ function i(n) {
9
8
  t(r);
10
9
  }
11
10
  }
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
11
  /** Enables pointer-driven drag-and-drop with drop, slot, or preview reordering. */
133
- var u = class {
12
+ var r = class {
134
13
  host;
135
14
  selector;
136
15
  dropZoneSelector;
137
16
  axis;
138
17
  mode;
139
18
  disabled;
19
+ animate;
140
20
  #e = null;
141
21
  #t = null;
142
22
  #n = null;
@@ -151,13 +31,13 @@ var u = class {
151
31
  #d = null;
152
32
  #f = -1;
153
33
  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();
34
+ 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.animate = t.animate ?? !0, this.attach();
155
35
  }
156
36
  attach() {
157
37
  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
38
  }
159
39
  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());
40
+ 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.#A());
161
41
  }
162
42
  destroy() {
163
43
  this.detach();
@@ -186,19 +66,19 @@ var u = class {
186
66
  if (n === -1) return;
187
67
  e.preventDefault(), this.#e = t, this.#s = n, this.#r = e.clientX, this.#i = e.clientY;
188
68
  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);
69
+ 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.#E), document.addEventListener("pointercancel", this.#D), document.addEventListener("keydown", this.#O);
190
70
  };
191
71
  #v = (e) => {
192
72
  if (!this.#e) return;
193
73
  if (!this.#t) {
194
74
  this.#e.style.removeProperty("outline"), this.#e.style.removeProperty("outline-offset");
195
75
  try {
196
- this.#D(e);
76
+ this.#k(e);
197
77
  } catch {
198
- this.#O();
78
+ this.#A();
199
79
  return;
200
80
  }
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", {
81
+ this.#e.setAttribute("dragging", ""), this.mode === "preview" && (this.#u = this.#e.parentElement, this.#d = this.#e.nextElementSibling, this.#f = -1, this.animate && this.#C()), this.host.dispatchEvent(new CustomEvent("ui-drag-start", {
202
82
  bubbles: !0,
203
83
  composed: !0,
204
84
  detail: {
@@ -283,7 +163,9 @@ var u = class {
283
163
  let p = f < r.length ? r[f] : null, m = () => {
284
164
  p ? p.before(this.#e) : r[r.length - 1].after(this.#e);
285
165
  };
286
- typeof document.startViewTransition == "function" ? document.startViewTransition(m) : m(), this.host.dispatchEvent(new CustomEvent("ui-drag-over", {
166
+ this.animate && typeof document.startViewTransition == "function" ? document.startViewTransition(() => {
167
+ m(), this.#C();
168
+ }) : m(), this.host.dispatchEvent(new CustomEvent("ui-drag-over", {
287
169
  bubbles: !0,
288
170
  composed: !0,
289
171
  detail: {
@@ -294,13 +176,22 @@ var u = class {
294
176
  }));
295
177
  }
296
178
  #C() {
179
+ let e = this.#p();
180
+ for (let t = 0; t < e.length; t++) e[t].style.viewTransitionName = e[t] === this.#e ? "none" : `drag-item-${t}`;
181
+ }
182
+ #w() {
183
+ for (let e of this.#p()) e.style.removeProperty("view-transition-name");
184
+ }
185
+ #T() {
297
186
  if (this.mode !== "preview" || !this.#e || !this.#u) return;
298
187
  let e = this.#e, t = this.#d, n = this.#u, r = () => {
299
188
  t && t.isConnected ? t.before(e) : n.appendChild(e);
300
189
  };
301
- typeof document.startViewTransition == "function" ? document.startViewTransition(r) : r();
190
+ this.animate && typeof document.startViewTransition == "function" ? document.startViewTransition(() => {
191
+ r(), this.#C();
192
+ }) : r();
302
193
  }
303
- #w = (e) => {
194
+ #E = (e) => {
304
195
  if (this.#e) {
305
196
  if (this.#t) if (this.mode === "slot") {
306
197
  let e = this.#p().filter((e) => e !== this.#e), t = this.#c >= 0 && this.#c < e.length ? e[this.#c] : null;
@@ -338,42 +229,42 @@ var u = class {
338
229
  }
339
230
  }));
340
231
  }
341
- this.#O();
232
+ this.#A();
342
233
  }
343
234
  };
344
- #T = () => {
345
- this.#e && (this.#C(), this.#t && this.host.dispatchEvent(new CustomEvent("ui-drag-cancel", {
235
+ #D = () => {
236
+ this.#e && (this.#T(), this.#t && this.host.dispatchEvent(new CustomEvent("ui-drag-cancel", {
346
237
  bubbles: !0,
347
238
  composed: !0,
348
239
  detail: { item: this.#e }
349
- })), this.#O());
240
+ })), this.#A());
350
241
  };
351
- #E = (e) => {
352
- e.key === "Escape" && this.#e && (e.preventDefault(), this.#C(), this.#t && this.host.dispatchEvent(new CustomEvent("ui-drag-cancel", {
242
+ #O = (e) => {
243
+ e.key === "Escape" && this.#e && (e.preventDefault(), this.#T(), this.#t && this.host.dispatchEvent(new CustomEvent("ui-drag-cancel", {
353
244
  bubbles: !0,
354
245
  composed: !0,
355
246
  detail: { item: this.#e }
356
- })), this.#O());
247
+ })), this.#A());
357
248
  };
358
- #D(e) {
249
+ #k(e) {
359
250
  if (!this.#e) return;
360
251
  let t = this.#e.getBoundingClientRect(), n = this.#e.cloneNode(!0);
361
252
  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
253
  }
363
- #O() {
254
+ #A() {
364
255
  if (this.#t) {
365
256
  if (this.#t.isConnected) try {
366
257
  this.#t.hidePopover();
367
258
  } catch {}
368
259
  this.#t.remove(), this.#t = null;
369
260
  }
370
- this.#e && this.#e.removeAttribute("dragging");
261
+ this.#e && this.#e.removeAttribute("dragging"), this.mode === "preview" && this.animate && this.#w();
371
262
  let e = this.#m();
372
263
  if (this.mode === "slot") this.#x(e);
373
264
  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);
265
+ 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.#E), document.removeEventListener("pointercancel", this.#D), document.removeEventListener("keydown", this.#O);
375
266
  }
376
- }, d = class {
267
+ }, i = class {
377
268
  host;
378
269
  handleSelector;
379
270
  axis;
@@ -456,210 +347,7 @@ var u = class {
456
347
  #d() {
457
348
  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
349
  }
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 {
350
+ }, a = class {
663
351
  host;
664
352
  #e = null;
665
353
  #t;
@@ -700,4 +388,4 @@ var u = class {
700
388
  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
389
  }
702
390
  };
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 };
391
+ export { n as i, i as n, r, a as t };
@@ -1374,21 +1374,6 @@
1374
1374
 
1375
1375
 
1376
1376
 
1377
- /* ── Popover Anchor Positioning ──
1378
- Shared anchor-to-trigger positioning for dropdown popovers.
1379
- Coordinators (select, combobox) use this for their popover listbox. */
1380
-
1381
- :where(ui-select) > :where(ui-listbox[popover]),
1382
- :where(ui-combobox) > :where(ui-listbox[popover]) {
1383
- position: fixed;
1384
- position-area: block-end span-inline-end;
1385
- position-try-fallbacks: flip-block;
1386
- margin: var(--ui-popover-gap) 0 0;
1387
- min-width: anchor-size(inline);
1388
- max-height: var(--ui-popover-max-height);
1389
- overflow-y: auto;
1390
- }
1391
-
1392
1377
  /* ── Container-Level Disabled ──
1393
1378
  Containers that disable all children use aria-disabled="true".
1394
1379
  Disabled colors propagate via inheritance — children inherit the muted text.
@@ -1510,6 +1495,7 @@
1510
1495
  /* Popover (select / combobox / command) */
1511
1496
  --ui-popover-max-height: calc(100dvh - 2rem);
1512
1497
  --ui-popover-gap: 0.25rem;
1498
+ --ui-popover-viewport-margin: 0.5rem;
1513
1499
 
1514
1500
  /* Drawer */
1515
1501
  --ui-drawer-width: 24rem;
@@ -2,7 +2,7 @@ import './ds-variable.ts';
2
2
  import './ds-colors.ts';
3
3
  import './ds-color-swatch.ts';
4
4
  import './ds-themes.ts';
5
- import '../../components/ui-range/ui-range.ts';
6
- import '../../components/ui-combobox/ui-combobox.ts';
5
+ import '../components/ui-range/ui-range.ts';
6
+ import '../components/ui-select/ui-select.ts';
7
7
  export declare function buildInspector(container: HTMLElement): void;
8
8
  //# sourceMappingURL=build-inspector.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"build-inspector.d.ts","sourceRoot":"","sources":["../../src/inspector/build-inspector.ts"],"names":[],"mappings":"AAGA,OAAO,kBAAkB,CAAC;AAC1B,OAAO,gBAAgB,CAAC;AACxB,OAAO,sBAAsB,CAAC;AAC9B,OAAO,gBAAgB,CAAC;AACxB,OAAO,oCAAoC,CAAC;AAC5C,OAAO,sCAAsC,CAAC;AA4E9C,wBAAgB,cAAc,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,CAgI3D"}
@@ -1,4 +1,4 @@
1
- import { UIElement } from '../../core/ui-element.ts';
1
+ import { UIElement } from '../core/ui-element.ts';
2
2
  export declare class DSColorSwatch extends UIElement {
3
3
  #private;
4
4
  static observedAttributes: string[];
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ds-color-swatch-element.d.ts","sourceRoot":"","sources":["../../src/inspector/ds-color-swatch-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAoJlD,qBAAa,aAAc,SAAQ,SAAS;;IAC1C,MAAM,CAAC,kBAAkB,WAAqB;IAM9C,IAAI,KAAK,IAAI,MAAM,CAA6C;IAChE,IAAI,KAAK,CAAC,GAAG,EAAE,MAAM,EAAsC;IAE3D,IAAI,IAAI,IAAI,MAAM,CAA4C;IAC9D,IAAI,IAAI,CAAC,GAAG,EAAE,MAAM,EAAqC;IAEzD,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAapF,KAAK,IAAI,IAAI;IAqCb,QAAQ,IAAI,IAAI;IAUhB,gEAAgE;IAChE,OAAO,IAAI,IAAI;CAsEhB"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ds-color-swatch.d.ts","sourceRoot":"","sources":["../../src/inspector/ds-color-swatch.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAI7D,OAAO,EAAE,aAAa,EAAE,CAAC"}
@@ -1,4 +1,4 @@
1
- import { UIElement } from '../../core/ui-element.ts';
1
+ import { UIElement } from '../core/ui-element.ts';
2
2
  export interface DSColorEntry {
3
3
  name: string;
4
4
  token: string;
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ds-colors-element.d.ts","sourceRoot":"","sources":["../../src/inspector/ds-colors-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,qBAAa,QAAS,SAAQ,SAAS;;IACrC,MAAM,CAAC,kBAAkB,WAAY;IAIrC,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAQpF,KAAK,IAAI,IAAI;IAab,QAAQ,IAAI,IAAI;IAWhB,OAAO,IAAI,IAAI;CAuBhB"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ds-colors.d.ts","sourceRoot":"","sources":["../../src/inspector/ds-colors.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAIlD,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC"}
@@ -0,0 +1,15 @@
1
+ import { UIElement } from '../core/ui-element.ts';
2
+ /**
3
+ * Self-contained design system inspector.
4
+ *
5
+ * Stamps the full color/variable inspector UI on connection.
6
+ * Consumer usage: `<ds-inspector></ds-inspector>`.
7
+ *
8
+ * All `ds-*` sub-elements are registered by the `@nonoun/native-ui/inspector`
9
+ * entry point as a side effect of import.
10
+ */
11
+ export declare class DSInspector extends UIElement {
12
+ setup(): void;
13
+ teardown(): void;
14
+ }
15
+ //# sourceMappingURL=ds-inspector-element.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ds-inspector-element.d.ts","sourceRoot":"","sources":["../../src/inspector/ds-inspector-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAGlD;;;;;;;;GAQG;AACH,qBAAa,WAAY,SAAQ,SAAS;IACxC,KAAK,IAAI,IAAI;IAKb,QAAQ,IAAI,IAAI;CAIjB"}
@@ -0,0 +1,3 @@
1
+ import { DSInspector } from './ds-inspector-element.ts';
2
+ export { DSInspector };
3
+ //# sourceMappingURL=ds-inspector.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ds-inspector.d.ts","sourceRoot":"","sources":["../../src/inspector/ds-inspector.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAIxD,OAAO,EAAE,WAAW,EAAE,CAAC"}
@@ -1,4 +1,4 @@
1
- import { UIElement } from '../../core/ui-element.ts';
1
+ import { UIElement } from '../core/ui-element.ts';
2
2
  export interface DSThemeEntry {
3
3
  name: string;
4
4
  value: string;
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ds-themes-element.d.ts","sourceRoot":"","sources":["../../src/inspector/ds-themes-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAeD,qBAAa,QAAS,SAAQ,SAAS;;IACrC,MAAM,CAAC,kBAAkB,WAAY;IAIrC,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAQpF,KAAK,IAAI,IAAI;IASb,QAAQ,IAAI,IAAI;CA8CjB"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ds-themes.d.ts","sourceRoot":"","sources":["../../src/inspector/ds-themes.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAIlD,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC"}
@@ -1,4 +1,4 @@
1
- import { UIElement } from '../../core/ui-element.ts';
1
+ import { UIElement } from '../core/ui-element.ts';
2
2
  export interface DSVariableData {
3
3
  name: string;
4
4
  type: 'number';
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ds-variable-element.d.ts","sourceRoot":"","sources":["../../src/inspector/ds-variable-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,qBAAa,UAAW,SAAQ,SAAS;;IACvC,MAAM,CAAC,kBAAkB,WAAY;IAMrC,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAQpF,KAAK,IAAI,IAAI;IAWb,QAAQ,IAAI,IAAI;IAYhB,IAAI,IAAI,IAAI;CA8Db"}
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ds-variable.d.ts","sourceRoot":"","sources":["../../src/inspector/ds-variable.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAItD,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC"}
@@ -5,5 +5,6 @@ export { DSVariable } from './ds-variable-element.ts';
5
5
  export type { DSVariableData } from './ds-variable-element.ts';
6
6
  export { DSThemes } from './ds-themes-element.ts';
7
7
  export type { DSThemeEntry } from './ds-themes-element.ts';
8
+ export { DSInspector } from './ds-inspector-element.ts';
8
9
  export { buildInspector } from './build-inspector.ts';
9
10
  //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/inspector/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,YAAY,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,YAAY,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAClD,YAAY,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC"}
@@ -225,7 +225,7 @@
225
225
  /* ── ds-themes ── */
226
226
 
227
227
  :where(ds-themes) {
228
- display: block;
228
+ display: contents;
229
229
  }
230
230
 
231
231
  } /* @layer ui */