@ryanhelsing/ry-ui 1.0.6 → 1.0.8

package/dist/ry-ui.js

@@ -490,8 +490,8 @@ class K extends u {
     this.style.setProperty("--ry-split-width", `${i}px`);
   }
   #c = (t) => {
-    t.preventDefault(), this.#u(t.clientX);
-    const e = (i) => this.#p(i.clientX), s = () => {
+    t.preventDefault(), this.#p(t.clientX);
+    const e = (i) => this.#d(i.clientX), s = () => {
       document.removeEventListener("mousemove", e), document.removeEventListener("mouseup", s), this.#m();
     };
     document.addEventListener("mousemove", e), document.addEventListener("mouseup", s);
@@ -499,30 +499,30 @@ class K extends u {
   #n = (t) => {
     const e = t.touches[0];
     if (!e) return;
-    t.preventDefault(), this.#u(e.clientX);
+    t.preventDefault(), this.#p(e.clientX);
     const s = (r) => {
       const a = r.touches[0];
-      a && this.#p(a.clientX);
+      a && this.#d(a.clientX);
     }, i = () => {
       document.removeEventListener("touchmove", s), document.removeEventListener("touchend", i), this.#m();
     };
     document.addEventListener("touchmove", s, { passive: !1 }), document.addEventListener("touchend", i);
   };
-  #u(t) {
+  #p(t) {
     this.#e = !0, this.#i = t, this.#s = this.#a(), this.setAttribute("data-ry-resizing", ""), document.body.style.cursor = "col-resize", document.body.style.userSelect = "none";
   }
-  #p(t) {
+  #d(t) {
     if (!this.#e) return;
     const e = this.#i - t;
     this.#h(this.#s + e);
   }
   #m() {
-    this.#e = !1, this.removeAttribute("data-ry-resizing"), document.body.style.cursor = "", document.body.style.userSelect = "", this.#d(), this.emit("resize", { width: this.#a() });
+    this.#e = !1, this.removeAttribute("data-ry-resizing"), document.body.style.cursor = "", document.body.style.userSelect = "", this.#u(), this.emit("resize", { width: this.#a() });
   }
   #f = (t) => {
     const e = t.shiftKey ? 50 : 10;
     let s = this.#a();
-    t.key === "ArrowLeft" ? (t.preventDefault(), this.#h(s + e), this.#d()) : t.key === "ArrowRight" ? (t.preventDefault(), this.#h(s - e), this.#d()) : t.key === "Home" ? (t.preventDefault(), this.#h(this.#o()), this.#d()) : t.key === "End" && (t.preventDefault(), this.#h(this.#l()), this.#d());
+    t.key === "ArrowLeft" ? (t.preventDefault(), this.#h(s + e), this.#u()) : t.key === "ArrowRight" ? (t.preventDefault(), this.#h(s - e), this.#u()) : t.key === "Home" ? (t.preventDefault(), this.#h(this.#o()), this.#u()) : t.key === "End" && (t.preventDefault(), this.#h(this.#l()), this.#u());
   };
   #w = () => {
     this.style.removeProperty("--ry-split-width"), this.#v(), this.emit("resize", { width: this.#a() });
@@ -532,7 +532,7 @@ class K extends u {
     const t = this.getAttribute("persist");
     return t ? `ry-split:${t}` : null;
   }
-  #d() {
+  #u() {
     const t = this.#g();
     if (t)
       try {
@@ -990,7 +990,7 @@ class tt extends u {
     if (t)
       if (this.#a)
         for (const e of t.split(",").map((s) => s.trim()).filter(Boolean))
-          this.#d(e);
+          this.#u(e);
       else
         this.value = t;
   }
@@ -1054,7 +1054,7 @@ class tt extends u {
     if (s instanceof HTMLElement && !s.hasAttribute("data-disabled")) {
       if (this.#a) {
         const r = s.dataset.value ?? "";
-        this.#d(r);
+        this.#u(r);
       } else
         this.#$(s), this.close();
       return;
@@ -1072,7 +1072,7 @@ class tt extends u {
           if (i)
             if (this.#a) {
               const r = i.dataset.value ?? "";
-              this.#d(r);
+              this.#u(r);
             } else
               this.#$(i), this.close();
         } else
@@ -1096,11 +1096,11 @@ class tt extends u {
       case "Backspace":
         if (this.#a && this.#r.size > 0) {
           const s = [...this.#r], i = s[s.length - 1];
-          i && this.#d(i);
+          i && this.#u(i);
         }
         break;
       default:
-        t.key.length === 1 && !t.ctrlKey && !t.metaKey && this.#u(t.key);
+        t.key.length === 1 && !t.ctrlKey && !t.metaKey && this.#p(t.key);
         break;
     }
   };
@@ -1110,16 +1110,16 @@ class tt extends u {
   };
   #n = (t) => {
     const e = t.detail.value;
-    this.#r.has(e) && this.#d(e);
+    this.#r.has(e) && this.#u(e);
   };
-  #u(t) {
+  #p(t) {
     this.#s && clearTimeout(this.#s), this.#i += t.toLowerCase();
     const e = this.$$('[data-ry-target="option"]:not([data-disabled])'), s = e.findIndex(
       (i) => i.textContent?.trim().toLowerCase().startsWith(this.#i)
     );
     if (s >= 0) {
       if (this.state === "open")
-        this.#p(s);
+        this.#d(s);
       else if (!this.#a) {
         const i = e[s];
         i && this.#$(i);
@@ -1129,7 +1129,7 @@ class tt extends u {
       this.#i = "";
     }, 500);
   }
-  #p(t) {
+  #d(t) {
     const e = this.$$('[data-ry-target="option"]:not([data-disabled])');
     if (t < 0 || t >= e.length) return;
     this.$$('[data-ry-target="option"][data-highlighted]').forEach((r) => {
@@ -1143,21 +1143,21 @@ class tt extends u {
   }
   #m() {
     const t = this.$$('[data-ry-target="option"]:not([data-disabled])'), e = Math.min(this.#e + 1, t.length - 1);
-    this.#p(e);
+    this.#d(e);
   }
   #f() {
     const t = Math.max(this.#e - 1, 0);
-    this.#p(t);
+    this.#d(t);
   }
   #w() {
-    this.#p(0);
+    this.#d(0);
   }
   #g() {
     const t = this.$$('[data-ry-target="option"]:not([data-disabled])');
-    this.#p(t.length - 1);
+    this.#d(t.length - 1);
   }
   // --- Multi-select methods ---
-  #d(t) {
+  #u(t) {
     const e = this.getAttribute("max-selections");
     if (this.#r.has(t))
       this.#r.delete(t);
@@ -1209,14 +1209,14 @@ class tt extends u {
     this.state = "open";
     const t = this.$('[data-ry-target="trigger"]');
     if (t && t.setAttribute("aria-expanded", "true"), this.#I(), this.#a)
-      this.#p(0);
+      this.#d(0);
     else {
       const e = this.getAttribute("value");
       if (e) {
         const i = this.$$('[data-ry-target="option"]:not([data-disabled])').findIndex((r) => r.dataset.value === e);
-        i >= 0 && this.#p(i);
+        i >= 0 && this.#d(i);
       } else
-        this.#p(0);
+        this.#d(0);
     }
     this.emit("open");
   }
@@ -1272,7 +1272,7 @@ class it extends u {
   setup() {
     this.#t = `ry-combobox-${++st}`, this.#s();
     const t = this.$('[data-ry-target="input"]');
-    t && (this.on(t, "input", this.#r), this.on(t, "focus", this.#c)), this.on(this, "click", this.#o), this.on(this, "keydown", this.#l), this.on(document, "click", this.#h), this.hasAttribute("data-ry-state") || (this.state = "closed");
+    t && (this.on(t, "input", this.#r), this.on(t, "focus", this.#n)), this.on(this, "click", this.#o), this.on(this, "keydown", this.#l), this.on(this, "mouseover", this.#h), this.on(document, "click", this.#c), this.hasAttribute("data-ry-state") || (this.state = "closed");
     const e = this.getAttribute("value");
     e && (this.value = e);
   }
@@ -1348,7 +1348,7 @@ class it extends u {
     if (this.hasAttribute("disabled")) return;
     const e = t.target, s = e.closest('[data-ry-target="option"]');
     if (s instanceof HTMLElement && !s.hasAttribute("data-disabled")) {
-      this.#n(s);
+      this.#p(s);
       return;
     }
     if (e.closest('[data-ry-target="arrow"]')) {
@@ -1361,10 +1361,10 @@ class it extends u {
     const e = this.state === "open";
     switch (t.key) {
       case "ArrowDown":
-        t.preventDefault(), e ? this.#p() : this.open();
+        t.preventDefault(), e ? this.#m() : this.open();
         break;
       case "ArrowUp":
-        t.preventDefault(), e && this.#m();
+        t.preventDefault(), e && this.#f();
         break;
       case "Enter":
         if (e && this.#e >= 0) {
@@ -1372,7 +1372,7 @@ class it extends u {
           const i = this.$$(
             '[data-ry-target="option"]:not([hidden]):not([data-disabled])'
           )[this.#e];
-          i && this.#n(i);
+          i && this.#p(i);
         }
         break;
       case "Escape":
@@ -1384,15 +1384,23 @@ class it extends u {
     }
   };
   #h = (t) => {
+    const s = t.target.closest('[data-ry-target="option"]');
+    if (!(s instanceof HTMLElement) || s.hasAttribute("data-disabled") || s.hasAttribute("hidden")) return;
+    const r = this.$$(
+      '[data-ry-target="option"]:not([hidden]):not([data-disabled])'
+    ).indexOf(s);
+    r >= 0 && this.#d(r);
+  };
+  #c = (t) => {
     const e = t.target;
     !this.contains(e) && this.state === "open" && this.close();
   };
-  #c = () => {
+  #n = () => {
     if (this.hasAttribute("disabled")) return;
     const t = this.$('[data-ry-target="input"]');
     t && t.value && t.select(), this.open();
   };
-  #n(t) {
+  #p(t) {
     const e = t.dataset.value ?? "", s = t.textContent?.trim() ?? "", i = this.$('[data-ry-target="input"]');
     i && (i.value = s);
     const r = this.$('[data-ry-target="native"]');
@@ -1400,7 +1408,7 @@ class it extends u {
       a.removeAttribute("aria-selected");
     }), t.setAttribute("aria-selected", "true"), this.close(), this.emit("change", { value: e, label: s });
   }
-  #u(t) {
+  #d(t) {
     const e = this.$$(
       '[data-ry-target="option"]:not([hidden]):not([data-disabled])'
     );
@@ -1414,15 +1422,15 @@ class it extends u {
     const i = this.$('[data-ry-target="input-wrapper"]');
     i && i.setAttribute("aria-activedescendant", s.id);
   }
-  #p() {
+  #m() {
     const t = this.$$('[data-ry-target="option"]:not([hidden]):not([data-disabled])'), e = Math.min(this.#e + 1, t.length - 1);
-    this.#u(e);
+    this.#d(e);
   }
-  #m() {
+  #f() {
     const t = Math.max(this.#e - 1, 0);
-    this.#u(t);
+    this.#d(t);
   }
-  #f() {
+  #w() {
     const t = this.$('[data-ry-target="dropdown"]');
     if (!t) return;
     this.removeAttribute("data-ry-position");
@@ -1437,13 +1445,13 @@ class it extends u {
       i.hasAttribute("data-disabled") || i.removeAttribute("hidden");
     });
     const e = this.$('[data-ry-target="empty"]');
-    e && e.setAttribute("hidden", ""), this.#f();
+    e && e.setAttribute("hidden", ""), this.#w();
     const s = this.getAttribute("value");
     if (s) {
       const r = this.$$(
         '[data-ry-target="option"]:not([hidden]):not([data-disabled])'
       ).findIndex((a) => a.dataset.value === s);
-      r >= 0 && this.#u(r);
+      r >= 0 && this.#d(r);
     }
     this.emit("open");
   }
@@ -1463,7 +1471,7 @@ class it extends u {
   }
   set value(t) {
     const e = this.$(`[data-ry-target="option"][data-value="${t}"]`);
-    e && this.#n(e);
+    e && this.#p(e);
   }
 }
 customElements.define("ry-combobox", it);
@@ -2007,7 +2015,7 @@ class dt extends u {
     this.#i && this.on(this.#i, "pointerdown", this.#c);
     for (const [t, e] of this.#r)
       this.on(e, "pointerdown", (s) => this.#n(s, t)), this.on(e, "keydown", (s) => this.#m(s, t));
-    this.on(document, "pointermove", this.#u), this.on(document, "pointerup", this.#p);
+    this.on(document, "pointermove", this.#p), this.on(document, "pointerup", this.#d);
   }
   #c = (t) => {
     if (this.disabled) return;
@@ -2022,12 +2030,12 @@ class dt extends u {
   #n = (t, e) => {
     this.disabled || (t.stopPropagation(), this.#t = !0, this.#e = e, t.target.setPointerCapture(t.pointerId));
   };
-  #u = (t) => {
+  #p = (t) => {
     if (!this.#t || !this.#e) return;
     const e = this.#w(t);
     this.hasAttribute("range") ? this.#e === "start" ? this.start = Math.min(e, this.end) : this.#e === "end" && (this.end = Math.max(e, this.start)) : this.value = e, this.#b(), this.#y();
   };
-  #p = () => {
+  #d = () => {
     this.#t && (this.#t = !1, this.#e = null, this.#M());
   };
   #m = (t, e) => {
@@ -2059,7 +2067,7 @@ class dt extends u {
         return;
     }
     t.preventDefault();
-    const a = this.#d(this.#f(e) + r);
+    const a = this.#u(this.#f(e) + r);
     e === "start" ? this.start = Math.min(a, this.end) : e === "end" ? this.end = Math.max(a, this.start) : this.value = a, this.#b(), this.#y(), this.#M();
   };
   #f(t) {
@@ -2075,11 +2083,11 @@ class dt extends u {
   }
   #g(t) {
     const e = this.step;
-    if (e === 0) return this.#d(t);
+    if (e === 0) return this.#u(t);
     const s = Math.round((t - this.min) / e) * e + this.min;
-    return this.#d(s);
+    return this.#u(s);
   }
-  #d(t) {
+  #u(t) {
     return Math.max(this.min, Math.min(this.max, t));
   }
   #b() {
@@ -2135,19 +2143,19 @@ class dt extends u {
     return parseFloat(this.getAttribute("value") ?? String(this.min));
   }
   set value(t) {
-    this.setAttribute("value", String(this.#d(t)));
+    this.setAttribute("value", String(this.#u(t)));
   }
   get start() {
     return parseFloat(this.getAttribute("start") ?? String(this.min));
   }
   set start(t) {
-    this.setAttribute("start", String(this.#d(t)));
+    this.setAttribute("start", String(this.#u(t)));
   }
   get end() {
     return parseFloat(this.getAttribute("end") ?? String(this.max));
   }
   set end(t) {
-    this.setAttribute("end", String(this.#d(t)));
+    this.setAttribute("end", String(this.#u(t)));
   }
   get disabled() {
     return this.hasAttribute("disabled");
@@ -2166,7 +2174,7 @@ class ut extends u {
   #a = null;
   static observedAttributes = ["min", "max", "step", "value", "disabled", "label", "labels", "description"];
   setup() {
-    this.#o(), this.#l(), this.#d();
+    this.#o(), this.#l(), this.#u();
   }
   #o() {
     const t = this.getAttribute("label"), e = this.getAttribute("description"), s = e ? ` title="${e}"` : "";
@@ -2181,7 +2189,7 @@ class ut extends u {
     `, this.#s = this.$('[data-ry-target="ring"]'), this.#r = this.$('[data-ry-target="indicator"]'), this.#a = this.$('[data-ry-target="display"]');
   }
   #l() {
-    this.#s && (this.on(this.#s, "mousedown", this.#h), this.on(document, "mousemove", this.#c), this.on(document, "mouseup", this.#n), this.on(this.#s, "touchstart", this.#u), this.on(document, "touchmove", this.#p), this.on(document, "touchend", this.#m), this.on(this.#s, "wheel", this.#f), this.on(this, "keydown", this.#w));
+    this.#s && (this.on(this.#s, "mousedown", this.#h), this.on(document, "mousemove", this.#c), this.on(document, "mouseup", this.#n), this.on(this.#s, "touchstart", this.#p), this.on(document, "touchmove", this.#d), this.on(document, "touchend", this.#m), this.on(this.#s, "wheel", this.#f), this.on(this, "keydown", this.#w));
   }
   #h = (t) => {
     this.disabled || (t.preventDefault(), this.#t = !0, this.#e = t.clientY, this.#i = this.value, this.#s?.classList.add("ry-knob__ring--dragging"), this.setAttribute("data-dragging", ""));
@@ -2194,10 +2202,10 @@ class ut extends u {
   #n = () => {
     this.#t && (this.#t = !1, this.#s?.classList.remove("ry-knob__ring--dragging"), this.removeAttribute("data-dragging"), this.#y());
   };
-  #u = (t) => {
+  #p = (t) => {
     this.disabled || (t.preventDefault(), this.#t = !0, this.#e = t.touches[0]?.clientY ?? 0, this.#i = this.value, this.#s?.classList.add("ry-knob__ring--dragging"), this.setAttribute("data-dragging", ""));
   };
-  #p = (t) => {
+  #d = (t) => {
     if (!this.#t) return;
     t.preventDefault();
     const e = t.touches[0];
@@ -2247,9 +2255,9 @@ class ut extends u {
   #g(t) {
     let e = Math.max(this.min, Math.min(this.max, t));
     const s = this.step;
-    s > 0 && (e = Math.round((e - this.min) / s) * s + this.min, e = Math.max(this.min, Math.min(this.max, e))), this.value = e, this.#d(), this.#v();
+    s > 0 && (e = Math.round((e - this.min) / s) * s + this.min, e = Math.max(this.min, Math.min(this.max, e))), this.value = e, this.#u(), this.#v();
   }
-  #d() {
+  #u() {
     const t = (this.value - this.min) / (this.max - this.min), e = -135 + t * 270;
     this.#s && (this.#s.style.setProperty("--knob-rotation", `${e}deg`), this.#s.style.setProperty("--knob-percent", String(t))), this.#a && (this.#a.textContent = this.#b(this.value)), this.setAttribute("aria-valuenow", String(this.value)), this.setAttribute("aria-valuemin", String(this.min)), this.setAttribute("aria-valuemax", String(this.max));
   }
@@ -2270,7 +2278,7 @@ class ut extends u {
     this.emit("change", { value: this.value, percent: t });
   }
   attributeChangedCallback(t, e, s) {
-    e !== s && t === "value" && this.#s && this.#d();
+    e !== s && t === "value" && this.#s && this.#u();
   }
   // --- Public API ---
   get min() {
@@ -2318,12 +2326,12 @@ class pt extends u {
   #h = 0;
   #c = !1;
   #n = null;
-  #u = null;
+  #p = null;
   static observedAttributes = ["min", "max", "step", "value", "disabled", "arrows", "icons", "drag", "editable", "wrap", "label", "prefix", "suffix"];
   setup() {
-    this.#p(), this.#f(), this.#w(), this.#A();
+    this.#d(), this.#f(), this.#w(), this.#A();
   }
-  #p() {
+  #d() {
     const t = this.getAttribute("arrows") ?? "both", e = this.getAttribute("label"), s = t === "stacked" || t === "stacked-end" || t === "stacked-start", [i, r] = this.#m(s), a = t !== "end" && t !== "none", n = t !== "start" && t !== "none", o = this.getAttribute("prefix"), l = this.getAttribute("suffix"), c = a ? `<button data-ry-target="decrement" class="ry-number-select__btn ry-number-select__decrement" aria-label="Decrease" tabindex="-1" type="button">${i}</button>` : "", d = n ? `<button data-ry-target="increment" class="ry-number-select__btn ry-number-select__increment" aria-label="Increase" tabindex="-1" type="button">${r}</button>` : "", g = `
       <div data-ry-target="display" class="ry-number-select__display" tabindex="0" role="spinbutton"
            aria-valuenow="${this.value}" aria-valuemin="${this.min}" aria-valuemax="${this.max}"
@@ -2354,9 +2362,9 @@ class pt extends u {
   #w() {
     this.#s && (this.on(this.#s, "mousedown", (t) => {
       t.preventDefault(), this.#g(-1);
-    }), this.on(this.#s, "mouseup", () => this.#d()), this.on(this.#s, "mouseleave", () => this.#d())), this.#r && (this.on(this.#r, "mousedown", (t) => {
+    }), this.on(this.#s, "mouseup", () => this.#u()), this.on(this.#s, "mouseleave", () => this.#u())), this.#r && (this.on(this.#r, "mousedown", (t) => {
       t.preventDefault(), this.#g(1);
-    }), this.on(this.#r, "mouseup", () => this.#d()), this.on(this.#r, "mouseleave", () => this.#d())), this.#t && this.on(this.#t, "mousedown", this.#I), this.on(document, "mousemove", this.#Y), this.on(document, "mouseup", this.#C), this.#t && this.on(this.#t, "touchstart", this.#X), this.on(document, "touchmove", this.#G), this.on(document, "touchend", this.#K), this.#t && this.on(this.#t, "keydown", this.#q), this.on(this, "wheel", this.#J), this.#t && this.on(this.#t, "dblclick", () => this.#E()), this.#i && (this.on(this.#i, "blur", () => this.#z()), this.on(this.#i, "keydown", (t) => {
+    }), this.on(this.#r, "mouseup", () => this.#u()), this.on(this.#r, "mouseleave", () => this.#u())), this.#t && this.on(this.#t, "mousedown", this.#I), this.on(document, "mousemove", this.#Y), this.on(document, "mouseup", this.#C), this.#t && this.on(this.#t, "touchstart", this.#X), this.on(document, "touchmove", this.#G), this.on(document, "touchend", this.#K), this.#t && this.on(this.#t, "keydown", this.#q), this.on(this, "wheel", this.#J), this.#t && this.on(this.#t, "dblclick", () => this.#E()), this.#i && (this.on(this.#i, "blur", () => this.#z()), this.on(this.#i, "keydown", (t) => {
       t.key === "Enter" && (t.preventDefault(), this.#z()), t.key === "Escape" && (t.preventDefault(), this.#P()), t.stopPropagation();
     }));
   }
@@ -2367,13 +2375,13 @@ class pt extends u {
     this.#R(t * e), this.#_(), this.#n = setTimeout(() => {
       let s = 150;
       const i = () => {
-        this.#R(t * e), this.#x(), s = Math.max(40, s * 0.85), this.#u = setTimeout(i, s);
+        this.#R(t * e), this.#x(), s = Math.max(40, s * 0.85), this.#p = setTimeout(i, s);
       };
       i();
     }, 400);
   }
-  #d() {
-    this.#n && (clearTimeout(this.#n), this.#n = null), this.#u && (clearTimeout(this.#u), this.#u = null);
+  #u() {
+    this.#n && (clearTimeout(this.#n), this.#n = null), this.#p && (clearTimeout(this.#p), this.#p = null);
   }
   // --- Drag helpers ---
   get #b() {
@@ -2563,7 +2571,7 @@ class pt extends u {
     e !== s && t === "value" && this.#t && this.#A();
   }
   teardown() {
-    this.#d();
+    this.#u();
   }
 }
 customElements.define("ry-number-select", pt);
@@ -2702,17 +2710,17 @@ class bt extends u {
   #h = null;
   #c = null;
   #n = null;
-  #u = null;
   #p = null;
+  #d = null;
   #m = null;
   #f = null;
   #w = null;
   #g = null;
   static observedAttributes = ["value", "format", "opacity", "disabled", "swatches", "inline"];
   setup() {
-    this.#d(), this.#b(), this.#v(), this.#A();
+    this.#u(), this.#b(), this.#v(), this.#A();
   }
-  #d() {
+  #u() {
     const t = this.hasAttribute("inline"), e = this.hasAttribute("opacity"), s = this.getAttribute("swatches");
     let i = `
       <div data-ry-target="grid" class="ry-color-picker__grid">
@@ -2752,10 +2760,10 @@ class bt extends u {
           <span data-ry-target="trigger-color" class="ry-color-picker__trigger-color"></span>
         </button>
         <div data-ry-target="panel" class="ry-color-picker__panel">${i}</div>
-      `, this.#l = this.$('[data-ry-target="trigger"]'), this.#h = this.$('[data-ry-target="panel"]'), this.#c = this.$('[data-ry-target="grid"]'), this.#n = this.$('[data-ry-target="grid-handle"]'), this.#u = this.$('[data-ry-target="hue-slider"]'), this.#p = this.$('[data-ry-target="hue-handle"]'), this.#m = this.$('[data-ry-target="alpha-slider"]'), this.#f = this.$('[data-ry-target="alpha-handle"]'), this.#w = this.$('[data-ry-target="preview"]'), this.#g = this.$('[data-ry-target="input"]');
+      `, this.#l = this.$('[data-ry-target="trigger"]'), this.#h = this.$('[data-ry-target="panel"]'), this.#c = this.$('[data-ry-target="grid"]'), this.#n = this.$('[data-ry-target="grid-handle"]'), this.#p = this.$('[data-ry-target="hue-slider"]'), this.#d = this.$('[data-ry-target="hue-handle"]'), this.#m = this.$('[data-ry-target="alpha-slider"]'), this.#f = this.$('[data-ry-target="alpha-handle"]'), this.#w = this.$('[data-ry-target="preview"]'), this.#g = this.$('[data-ry-target="input"]');
   }
   #b() {
-    this.#l && this.on(this.#l, "click", this.#y), this.on(document, "click", this.#M), this.on(document, "keydown", this.#$), this.#c && this.on(this.#c, "pointerdown", this.#Y), this.#n && this.on(this.#n, "keydown", this.#X), this.#u && this.on(this.#u, "pointerdown", this.#G), this.#p && this.on(this.#p, "keydown", this.#q), this.#m && this.on(this.#m, "pointerdown", this.#J), this.#f && this.on(this.#f, "keydown", this.#z), this.on(document, "pointermove", this.#P), this.on(document, "pointerup", this.#R), this.#g && (this.on(this.#g, "change", this.#T), this.on(this.#g, "keydown", this.#V));
+    this.#l && this.on(this.#l, "click", this.#y), this.on(document, "click", this.#M), this.on(document, "keydown", this.#$), this.#c && this.on(this.#c, "pointerdown", this.#Y), this.#n && this.on(this.#n, "keydown", this.#X), this.#p && this.on(this.#p, "pointerdown", this.#G), this.#d && this.on(this.#d, "keydown", this.#q), this.#m && this.on(this.#m, "pointerdown", this.#J), this.#f && this.on(this.#f, "keydown", this.#z), this.on(document, "pointermove", this.#P), this.on(document, "pointerup", this.#R), this.#g && (this.on(this.#g, "change", this.#T), this.on(this.#g, "keydown", this.#V));
     const t = this.$('[data-ry-target="format-toggle"]');
     t && this.on(t, "click", this.#F);
     const e = this.$('[data-ry-target="swatches"]');
@@ -2826,11 +2834,11 @@ class bt extends u {
   // Hue handlers
   // ───────────────────────────────────────────────────────────────────────────
   #G = (t) => {
-    this.disabled || (t.preventDefault(), this.#a = !0, this.#p?.focus(), this.#K(t));
+    this.disabled || (t.preventDefault(), this.#a = !0, this.#d?.focus(), this.#K(t));
   };
   #K(t) {
-    if (!this.#u) return;
-    const e = this.#u.getBoundingClientRect(), s = Math.max(0, Math.min(1, (t.clientX - e.left) / e.width));
+    if (!this.#p) return;
+    const e = this.#p.getBoundingClientRect(), s = Math.max(0, Math.min(1, (t.clientX - e.left) / e.width));
     this.#t = Math.round(s * 360), this.#A(), this.#L();
   }
   #q = (t) => {
@@ -2939,7 +2947,7 @@ class bt extends u {
     this.#n && (this.#n.style.left = `${this.#e}%`, this.#n.style.top = `${100 - this.#i}%`);
   }
   #_() {
-    this.#p && (this.#p.style.left = `${this.#t / 360 * 100}%`);
+    this.#d && (this.#d.style.left = `${this.#t / 360 * 100}%`);
   }
   #H() {
     if (this.#m) {
@@ -3091,7 +3099,7 @@ class yt extends u {
     `, this.#t = this.$('[data-ry-target="swatch"]'), this.#e = this.$('[data-ry-target="input"]'), this.#i = this.$('[data-ry-target="panel"]'), this.#s = this.$('[data-ry-target="picker"]');
   }
   #a() {
-    this.#t && this.on(this.#t, "click", this.#o), this.#e && (this.on(this.#e, "input", this.#h), this.on(this.#e, "keydown", this.#u), this.on(this.#e, "focus", this.#l)), this.#s && (this.on(this.#s, "ry:input", this.#p), this.on(this.#s, "ry:change", this.#m)), this.on(document, "click", this.#f), this.on(document, "keydown", this.#w);
+    this.#t && this.on(this.#t, "click", this.#o), this.#e && (this.on(this.#e, "input", this.#h), this.on(this.#e, "keydown", this.#p), this.on(this.#e, "focus", this.#l)), this.#s && (this.on(this.#s, "ry:input", this.#d), this.on(this.#s, "ry:change", this.#m)), this.on(document, "click", this.#f), this.on(document, "keydown", this.#w);
   }
   #o = () => {
     this.disabled || (this.state === "open" ? this.close() : this.open());
@@ -3109,7 +3117,7 @@ class yt extends u {
       this.#e.setSelectionRange(n, n);
     }
     const a = this.#c(r);
-    a && (this.#s.setColor(a), this.#d(), this.#n(r) && this.#v(), this.emit("input", { value: this.value }));
+    a && (this.#s.setColor(a), this.#u(), this.#n(r) && this.#v(), this.emit("input", { value: this.value }));
   };
   #c(t) {
     let e = t;
@@ -3128,11 +3136,11 @@ class yt extends u {
   #n(t) {
     return !!(/^#[a-fA-F0-9]{6}$/.test(t) || /^#[a-fA-F0-9]{3}$/.test(t));
   }
-  #u = (t) => {
+  #p = (t) => {
     t.key === "Enter" && (t.preventDefault(), this.#h(), this.emit("change", { value: this.value }));
   };
-  #p = () => {
-    !this.#s || !this.#e || (document.activeElement !== this.#e && (this.#e.value = this.#s.value), this.#d(), this.#v(), this.emit("input", { value: this.value }));
+  #d = () => {
+    !this.#s || !this.#e || (document.activeElement !== this.#e && (this.#e.value = this.#s.value), this.#u(), this.#v(), this.emit("input", { value: this.value }));
   };
   #m = () => {
     this.emit("change", { value: this.value });
@@ -3154,7 +3162,7 @@ class yt extends u {
     const t = this.getBoundingClientRect(), e = 280, i = window.innerHeight - t.bottom, r = t.top;
     i < e && r > i ? this.setAttribute("data-ry-position", "top") : this.setAttribute("data-ry-position", "bottom");
   }
-  #d() {
+  #u() {
     const t = this.$('[data-ry-target="swatch-color"]');
     if (t && this.#s) {
       const e = this.#s.rgb, s = this.hasAttribute("opacity") ? this.#s.alpha / 100 : 1;
@@ -3168,7 +3176,7 @@ class yt extends u {
         const e = this.#s.value;
         this.#e.value = e.startsWith("#") ? e : "#" + e;
       }
-      this.#d();
+      this.#u();
     }
   }
   #v() {
@@ -3178,14 +3186,14 @@ class yt extends u {
     }
   }
   attributeChangedCallback(t, e, s) {
-    e !== s && (t === "value" && this.#s && this.#e && s && (this.#s.setColor(s), document.activeElement !== this.#e && (this.#e.value = this.#s.value), this.#d()), t === "disabled" && this.#e && (s !== null ? this.#e.setAttribute("disabled", "") : this.#e.removeAttribute("disabled")));
+    e !== s && (t === "value" && this.#s && this.#e && s && (this.#s.setColor(s), document.activeElement !== this.#e && (this.#e.value = this.#s.value), this.#u()), t === "disabled" && this.#e && (s !== null ? this.#e.setAttribute("disabled", "") : this.#e.removeAttribute("disabled")));
   }
   // Public API
   get value() {
     return this.#s?.value ?? this.getAttribute("value") ?? "#000000";
   }
   set value(t) {
-    this.#s?.setColor(t) && (this.#e && (this.#e.value = this.#s.value), this.#d(), this.#v());
+    this.#s?.setColor(t) && (this.#e && (this.#e.value = this.#s.value), this.#u(), this.#v());
   }
   get disabled() {
     return this.hasAttribute("disabled");
@@ -3261,8 +3269,8 @@ class wt extends u {
   #c = !1;
   // Cached DOM refs
   #n = null;
-  #u = null;
   #p = null;
+  #d = null;
   static observedAttributes = ["value", "disabled", "output"];
   setup() {
     this.#m(), this.#Y(), this.#X(), this.#x();
@@ -3277,7 +3285,7 @@ class wt extends u {
   #f(t) {
     const e = t.trim();
     if (!e.startsWith("linear-gradient(") && !e.startsWith("radial-gradient("))
-      return x(e) ? (this.#t = "solid", this.#s = [this.#d(e, 0), this.#d(e, 100)], this.#r = this.#s[0].id, !0) : !1;
+      return x(e) ? (this.#t = "solid", this.#s = [this.#u(e, 0), this.#u(e, 100)], this.#r = this.#s[0].id, !0) : !1;
     let s, i;
     e.startsWith("linear-gradient(") ? (s = "linear", i = e.slice(16, -1)) : (s = "radial", i = e.slice(16, -1));
     let r = 90, a = "circle", n = i;
@@ -3299,7 +3307,7 @@ class wt extends u {
     const o = [], l = /(#[a-fA-F0-9]{3,8}|rgba?\([^)]+\)|hsla?\([^)]+\)|[a-z]+)\s+([\d.]+)%/g;
     let c;
     for (; (c = l.exec(n)) !== null; )
-      o.push(this.#d(c[1], parseFloat(c[2])));
+      o.push(this.#u(c[1], parseFloat(c[2])));
     return o.length < 2 ? !1 : (this.#t = s, this.#e = r, this.#i = a, this.#s = o, this.#r = o[0].id, !0);
   }
   #w(t) {
@@ -3323,7 +3331,7 @@ class wt extends u {
   // ───────────────────────────────────────────────────────────────────────────
   // Stop management
   // ───────────────────────────────────────────────────────────────────────────
-  #d(t, e) {
+  #u(t, e) {
     return { id: `stop-${this.#a++}`, color: t, position: e };
   }
   /** CSS left value clamped so the stop handle stays within the bar */
@@ -3332,7 +3340,7 @@ class wt extends u {
     return `clamp(${e}, ${t}%, calc(100% - ${e}))`;
   }
   #v(t, e) {
-    const s = this.#d(t, e);
+    const s = this.#u(t, e);
     this.#s.push(s), this.#$(), this.#r = s.id, this.#C(), this.#x();
   }
   #y(t) {
@@ -3379,7 +3387,7 @@ class wt extends u {
       </div>
       <ry-color-picker data-ry-target="picker" inline opacity></ry-color-picker>
       ${o}
-    `, this.#n = this.$('[data-ry-target="bar"]'), this.#u = this.$('[data-ry-target="picker"]'), this.#p = this.$('[data-ry-target="output"]'), this.#C();
+    `, this.#n = this.$('[data-ry-target="bar"]'), this.#p = this.$('[data-ry-target="picker"]'), this.#d = this.$('[data-ry-target="output"]'), this.#C();
   }
   #C() {
     if (this.#n) {
@@ -3400,7 +3408,7 @@ class wt extends u {
     const i = this.$('[data-ry-target="angle-select"]');
     i && this.on(i, "ry:input", this.#z);
     const r = this.$('[data-ry-target="shape-circle"]'), a = this.$('[data-ry-target="shape-ellipse"]');
-    r && this.on(r, "click", () => this.#P("circle")), a && this.on(a, "click", () => this.#P("ellipse")), this.#u && (this.on(this.#u, "ry:input", this.#R), this.on(this.#u, "ry:change", this.#T)), this.#p && (this.on(this.#p, "keydown", this.#F), this.on(this.#p, "blur", this.#j));
+    r && this.on(r, "click", () => this.#P("circle")), a && this.on(a, "click", () => this.#P("ellipse")), this.#p && (this.on(this.#p, "ry:input", this.#R), this.on(this.#p, "ry:change", this.#T)), this.#d && (this.on(this.#d, "keydown", this.#F), this.on(this.#d, "blur", this.#j));
     const n = this.$('[data-ry-target="copy-btn"]');
     n && this.on(n, "click", this.#V), this.#n && this.on(this.#n, "keydown", this.#J);
   }
@@ -3476,7 +3484,7 @@ class wt extends u {
   // ───────────────────────────────────────────────────────────────────────────
   #R = () => {
     const t = this.#I();
-    !t || !this.#u || (t.color = this.#u.value, this.#Z(t), this.#O(), this.#H(), this.#k(), this.#D());
+    !t || !this.#p || (t.color = this.#p.value, this.#Z(t), this.#O(), this.#H(), this.#k(), this.#D());
   };
   #T = () => {
     this.#S(), this.#B();
@@ -3501,8 +3509,8 @@ class wt extends u {
     this.#A();
   };
   #A() {
-    if (!this.#p) return;
-    const t = this.#p.value.trim();
+    if (!this.#d) return;
+    const t = this.#d.value.trim();
     t && this.#f(t) ? (this.#C(), this.#x(), this.#S(), this.#D(), this.#B()) : this.#k();
   }
   // ───────────────────────────────────────────────────────────────────────────
@@ -3540,8 +3548,8 @@ class wt extends u {
     a && a.setAttribute("value", String(this.#e));
   }
   #H() {
-    if (!this.#u) return;
-    const t = this.#u.querySelector('[data-ry-target="preview-color"]');
+    if (!this.#p) return;
+    const t = this.#p.querySelector('[data-ry-target="preview-color"]');
     t && (t.style.backgroundImage = this.#t === "solid" ? "" : this.#g());
   }
   #O() {
@@ -3569,10 +3577,10 @@ class wt extends u {
   }
   #L() {
     const t = this.#I();
-    !t || !this.#u || this.#u.setColor(t.color);
+    !t || !this.#p || this.#p.setColor(t.color);
   }
   #k() {
-    this.#p && document.activeElement !== this.#p && (this.#p.value = this.#g());
+    this.#d && document.activeElement !== this.#d && (this.#d.value = this.#g());
   }
   #S() {
     const t = this.#g();
@@ -3735,9 +3743,9 @@ class w extends u {
   #n(t) {
     return Array.from(t.children).filter(
       (s) => s instanceof HTMLElement && s.classList.contains("ry-tree__item")
-    ).map((s) => this.#u(s));
+    ).map((s) => this.#p(s));
   }
-  #u(t) {
+  #p(t) {
     const e = t.querySelector(':scope > [data-ry-target="folder"]'), s = t.querySelector(':scope > [data-ry-target="file"]');
     if (e) {
       const r = t.querySelector(":scope > .ry-tree__toggle"), a = t.querySelector(".ry-tree__children"), n = { label: e.dataset.ryLabel ?? "" };
@@ -3754,14 +3762,14 @@ class w extends u {
   static from(t) {
     const e = document.createElement("ry-tree");
     for (const s of t)
-      e.appendChild(w.#p(s));
+      e.appendChild(w.#d(s));
     return e;
   }
-  static #p(t) {
+  static #d(t) {
     const e = document.createElement("ry-tree-item");
     if (e.setAttribute("label", t.label), t.open && e.setAttribute("open", ""), t.selected && e.setAttribute("selected", ""), t.children)
       for (const s of t.children)
-        e.appendChild(w.#p(s));
+        e.appendChild(w.#d(s));
     return e;
   }
   // ── Drag and Drop ──────────────────────────────────────────
@@ -3779,7 +3787,7 @@ class w extends u {
     if (this.#t && !this.#e) {
       const c = t.clientX - this.#i, d = t.clientY - this.#s;
       if (Math.hypot(c, d) < $t) return;
-      this.#t = !1, this.#e = !0, this.#d(t);
+      this.#t = !1, this.#e = !0, this.#u(t);
     }
     if (!this.#e || !this.#a) return;
     this.#a.style.left = `${t.clientX + 12}px`, this.#a.style.top = `${t.clientY - 14}px`, this.#a.style.display = "none";
@@ -3809,7 +3817,7 @@ class w extends u {
   #g = () => {
     this.#e && this.#b(), this.#t = !1, this.#e = !1, this.#r = null;
   };
-  #d(t) {
+  #u(t) {
     if (!this.#r) return;
     t.preventDefault(), this.#r.setAttribute("data-ry-dragging", ""), this.#r.classList.add("ry-tree__item--collapsed");
     const e = this.#r.querySelector(".ry-tree__label, .ry-tree__file");
@@ -4037,7 +4045,7 @@ class It extends u {
       }
       this.appendChild(a);
     }
-    this.on(r, "pointerdown", this.#l), this.on(r, "pointermove", this.#h), this.on(r, "pointerup", this.#c), this.on(r, "pointercancel", this.#c), this.hasAttribute("pause-on-hover") && (this.on(this, "mouseenter", () => this.#u()), this.on(this, "mouseleave", () => this.#n())), this.goTo(0);
+    this.on(r, "pointerdown", this.#l), this.on(r, "pointermove", this.#h), this.on(r, "pointerup", this.#c), this.on(r, "pointercancel", this.#c), this.hasAttribute("pause-on-hover") && (this.on(this, "mouseenter", () => this.#p()), this.on(this, "mouseleave", () => this.#n())), this.goTo(0);
   }
   #o = (t) => {
     t.key === "ArrowLeft" ? (t.preventDefault(), this.prev()) : t.key === "ArrowRight" && (t.preventDefault(), this.next());
@@ -4055,11 +4063,11 @@ class It extends u {
     e > s ? this.prev() : e < -s && this.next();
   };
   #n() {
-    if (this.#u(), !this.hasAttribute("autoplay")) return;
+    if (this.#p(), !this.hasAttribute("autoplay")) return;
     const t = parseInt(this.getAttribute("interval") ?? "5000", 10);
     this.#i = setInterval(() => this.next(), t);
   }
-  #u() {
+  #p() {
     this.#i && (clearInterval(this.#i), this.#i = null);
   }
   goTo(t) {
@@ -4079,7 +4087,7 @@ class It extends u {
     this.goTo(this.#t - 1);
   }
   teardown() {
-    this.#u();
+    this.#p();
   }
 }
 customElements.define("ry-carousel", It);