@ryanhelsing/ry-ui 1.0.8 → 1.0.10

package/dist/ry-ui.js

@@ -89,7 +89,7 @@ class u extends HTMLElement {
     this.on(t, "keydown", a), i?.focus();
   }
 }
-const H = [
+const B = [
   // Layout
   "page",
   "header",
@@ -148,13 +148,15 @@ const H = [
   "pricing",
   "pricing-card",
   "carousel",
-  "combobox"
-], B = new RegExp(
-  `<(/?)(${H.join("|")})(\\s|>|/)`,
+  "combobox",
+  "theme-panel",
+  "testimonial"
+], R = new RegExp(
+  `<(/?)(${B.join("|")})(\\s|>|/)`,
   "g"
 );
 function M(h) {
-  return h.replace(B, "<$1ry-$2$3");
+  return h.replace(R, "<$1ry-$2$3");
 }
 function C() {
   document.querySelectorAll("ry").forEach((h) => {
@@ -166,7 +168,7 @@ function C() {
   });
 }
 document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", C) : C();
-class R extends u {
+class P extends u {
   setup() {
     this.#t(), this.$$('[data-ry-target="trigger"]').forEach((t) => {
       this.on(t, "click", this.#i);
@@ -242,10 +244,10 @@ class R extends u {
     this.$$('[data-ry-target="item"]').forEach((t) => this.close(t));
   }
 }
-customElements.define("ry-accordion", R);
+customElements.define("ry-accordion", P);
 customElements.get("ry-accordion-item") || customElements.define("ry-accordion-item", class extends HTMLElement {
 });
-class P extends u {
+class F extends u {
   #t = null;
   #e = 0;
   setup() {
@@ -294,8 +296,8 @@ class P extends u {
     this.state === "open" ? this.close() : this.open();
   }
 }
-customElements.define("ry-modal", P);
-class F extends u {
+customElements.define("ry-modal", F);
+class j extends u {
   setup() {
     this.#t(), this.$$('[data-ry-target="trigger"]').forEach((t) => {
       this.on(t, "click", this.#i);
@@ -357,10 +359,10 @@ class F extends u {
     return this.$$('[data-ry-target="trigger"]').findIndex((e) => e.getAttribute("aria-selected") === "true");
   }
 }
-customElements.define("ry-tabs", F);
+customElements.define("ry-tabs", j);
 customElements.get("ry-tab") || customElements.define("ry-tab", class extends HTMLElement {
 });
-class j extends u {
+class O extends u {
   setup() {
     this.#t();
     const t = this.$('[data-ry-target="trigger"]');
@@ -408,12 +410,12 @@ class j extends u {
     this.state === "open" ? this.close() : this.open();
   }
 }
-customElements.define("ry-dropdown", j);
+customElements.define("ry-dropdown", O);
 customElements.get("ry-menu") || customElements.define("ry-menu", class extends HTMLElement {
 });
 customElements.get("ry-menu-item") || customElements.define("ry-menu-item", class extends HTMLElement {
 });
-class O extends u {
+class N extends u {
   setup() {
     this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.setAttribute("role", "button"), this.on(this, "click", this.#t), this.on(this, "keydown", this.#e);
   }
@@ -428,8 +430,8 @@ class O extends u {
     (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.click());
   };
 }
-customElements.define("ry-button", O);
-class N extends u {
+customElements.define("ry-button", N);
+class q extends u {
   static get observedAttributes() {
     return ["value"];
   }
@@ -458,7 +460,7 @@ class N extends u {
         e.getAttribute("value") === t ? (e.setAttribute("pressed", ""), e.setAttribute("aria-pressed", "true")) : (e.removeAttribute("pressed"), e.removeAttribute("aria-pressed"));
   }
 }
-customElements.define("ry-button-group", N);
+customElements.define("ry-button-group", q);
 class K extends u {
   #t = null;
   #e = !1;
@@ -481,12 +483,12 @@ class K extends u {
     const t = getComputedStyle(this).getPropertyValue("--ry-split-min-width").trim();
     return t ? parseFloat(t) : 100;
   }
-  #l() {
+  #h() {
     const t = getComputedStyle(this).getPropertyValue("--ry-split-max-width").trim();
     return t ? parseFloat(t) : this.getBoundingClientRect().width * 0.8;
   }
-  #h(t) {
-    const e = this.#o(), s = this.#l(), i = Math.round(Math.max(e, Math.min(s, t)));
+  #l(t) {
+    const e = this.#o(), s = this.#h(), i = Math.round(Math.max(e, Math.min(s, t)));
     this.style.setProperty("--ry-split-width", `${i}px`);
   }
   #c = (t) => {
@@ -514,7 +516,7 @@ class K extends u {
   #d(t) {
     if (!this.#e) return;
     const e = this.#i - t;
-    this.#h(this.#s + e);
+    this.#l(this.#s + e);
   }
   #m() {
     this.#e = !1, this.removeAttribute("data-ry-resizing"), document.body.style.cursor = "", document.body.style.userSelect = "", this.#u(), this.emit("resize", { width: this.#a() });
@@ -522,7 +524,7 @@ class K extends u {
   #f = (t) => {
     const e = t.shiftKey ? 50 : 10;
     let s = this.#a();
-    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());
+    t.key === "ArrowLeft" ? (t.preventDefault(), this.#l(s + e), this.#u()) : t.key === "ArrowRight" ? (t.preventDefault(), this.#l(s - e), this.#u()) : t.key === "Home" ? (t.preventDefault(), this.#l(this.#o()), this.#u()) : t.key === "End" && (t.preventDefault(), this.#l(this.#h()), this.#u());
   };
   #w = () => {
     this.style.removeProperty("--ry-split-width"), this.#v(), this.emit("resize", { width: this.#a() });
@@ -562,7 +564,7 @@ class K extends u {
   }
 }
 customElements.define("ry-split", K);
-class q extends u {
+class z extends u {
   #t = ["light", "dark"];
   #e = 0;
   setup() {
@@ -602,8 +604,8 @@ class q extends u {
     }
   }
 }
-customElements.define("ry-theme-toggle", q);
-class z extends u {
+customElements.define("ry-theme-toggle", z);
+class V extends u {
   setup() {
     this.hasAttribute("interactive") && (this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.setAttribute("role", "link"), this.on(this, "click", this.#t), this.on(this, "keydown", this.#e));
   }
@@ -616,8 +618,8 @@ class z extends u {
     (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.click());
   };
 }
-customElements.define("ry-card", z);
-class V extends u {
+customElements.define("ry-card", V);
+class U extends u {
   setup() {
     this.#t();
     const t = this.$("[close]");
@@ -637,8 +639,8 @@ class V extends u {
     }, 200), this.emit("close");
   }
 }
-customElements.define("ry-alert", V);
-class U extends u {
+customElements.define("ry-alert", U);
+class W extends u {
   static get observedAttributes() {
     return ["label", "error", "hint"];
   }
@@ -691,9 +693,9 @@ class U extends u {
     e && (e.textContent = t ?? "");
   }
 }
-customElements.define("ry-field", U);
-let W = 0;
-class Y extends u {
+customElements.define("ry-field", W);
+let Y = 0;
+class X extends u {
   #t = null;
   static observedAttributes = ["checked", "disabled"];
   setup() {
@@ -701,7 +703,7 @@ class Y extends u {
   }
   #e() {
     if (this.$('[data-ry-target="track"]')) return;
-    const t = `ry-switch-${++W}`, e = this.getAttribute("name") ?? "", s = this.hasAttribute("checked"), i = this.hasAttribute("disabled"), r = this.textContent?.trim() ?? "";
+    const t = `ry-switch-${++Y}`, e = this.getAttribute("name") ?? "", s = this.hasAttribute("checked"), i = this.hasAttribute("disabled"), r = this.textContent?.trim() ?? "";
     this.innerHTML = `
       <label data-ry-target="wrapper" class="ry-switch__wrapper" for="${t}">
         <input
@@ -746,16 +748,16 @@ class Y extends u {
     this.#t && (this.#t.value = t);
   }
 }
-customElements.define("ry-switch", Y);
-let X = 0;
-class G extends u {
+customElements.define("ry-switch", X);
+let G = 0;
+class J extends u {
   #t = null;
   #e = null;
   #i = null;
   setup() {
-    this.#i = `ry-tooltip-${++X}`, this.#s();
+    this.#i = `ry-tooltip-${++G}`, this.#s();
     const t = this.firstElementChild;
-    t && (t.setAttribute("aria-describedby", this.#i), this.on(t, "mouseenter", this.#r), this.on(t, "mouseleave", this.#o), this.on(t, "focusin", this.#r), this.on(t, "focusout", this.#o)), this.on(document, "keydown", this.#l);
+    t && (t.setAttribute("aria-describedby", this.#i), this.on(t, "mouseenter", this.#r), this.on(t, "mouseleave", this.#o), this.on(t, "focusin", this.#r), this.on(t, "focusout", this.#o)), this.on(document, "keydown", this.#h);
   }
   #s() {
     this.#e = document.createElement("div"), this.#e.id = this.#i, this.#e.setAttribute("data-ry-target", "content"), this.#e.className = "ry-tooltip__content", this.#e.setAttribute("role", "tooltip"), this.#e.textContent = this.getAttribute("content") ?? "", this.appendChild(this.#e);
@@ -772,15 +774,15 @@ class G extends u {
   #o = () => {
     this.#t && (clearTimeout(this.#t), this.#t = null), this.state = "closed";
   };
-  #l = (t) => {
+  #h = (t) => {
     t.key === "Escape" && this.state === "open" && this.#o();
   };
   teardown() {
     this.#t && clearTimeout(this.#t);
   }
 }
-customElements.define("ry-tooltip", G);
-class J extends u {
+customElements.define("ry-tooltip", J);
+class Z extends u {
   #t = null;
   #e = 0;
   setup() {
@@ -825,8 +827,8 @@ class J extends u {
     this.state === "open" ? this.close() : this.open();
   }
 }
-customElements.define("ry-drawer", J);
-const Z = 4e3;
+customElements.define("ry-drawer", Z);
+const Q = 4e3;
 class f extends u {
   #t = null;
   static observedAttributes = ["variant", "duration"];
@@ -856,7 +858,7 @@ class f extends u {
     this.#s();
     const t = this.$("[close]");
     t && this.on(t, "click", () => this.dismiss());
-    const e = parseInt(this.getAttribute("duration") ?? String(Z), 10);
+    const e = parseInt(this.getAttribute("duration") ?? String(Q), 10);
     e > 0 && (this.#t = setTimeout(() => this.dismiss(), e)), requestAnimationFrame(() => {
       this.state = "visible";
     });
@@ -957,22 +959,24 @@ const k = {
   // Shape: circle
   "shape-circle": '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/></svg>',
   // Shape: ellipse
-  "shape-ellipse": '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="12" rx="10" ry="6"/></svg>'
+  "shape-ellipse": '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="12" rx="10" ry="6"/></svg>',
+  // Quote
+  quote: '<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311C9.591 11.69 11 13.17 11 15c0 1.933-1.567 3.5-3.5 3.5-1.073 0-2.099-.49-2.917-1.179zM14.583 17.321C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311C19.591 11.69 21 13.17 21 15c0 1.933-1.567 3.5-3.5 3.5-1.073 0-2.099-.49-2.917-1.179z"/></svg>'
 };
 function p(h) {
   return k[h] ?? "";
 }
-function Bt(h, t) {
+function Ft(h, t) {
   k[h] = t;
 }
-function Rt(h) {
+function jt(h) {
   Object.assign(k, h);
 }
-function Pt() {
+function Ot() {
   return Object.keys(k);
 }
-let Q = 0;
-class tt extends u {
+let tt = 0;
+class et extends u {
   #t = null;
   #e = -1;
   #i = "";
@@ -985,7 +989,7 @@ class tt extends u {
   }
   static observedAttributes = ["value", "disabled"];
   setup() {
-    this.#t = `ry-select-${++Q}`, this.#o(), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.on(this, "click", this.#l), this.on(this, "keydown", this.#h), this.on(document, "click", this.#c), this.#a && this.on(this, "ry:remove", this.#n), this.hasAttribute("data-ry-state") || (this.state = "closed");
+    this.#t = `ry-select-${++tt}`, this.#o(), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.on(this, "click", this.#h), this.on(this, "keydown", this.#l), this.on(document, "click", this.#c), this.#a && this.on(this, "ry:remove", this.#n), this.hasAttribute("data-ry-state") || (this.state = "closed");
     const t = this.getAttribute("value");
     if (t)
       if (this.#a)
@@ -1048,7 +1052,7 @@ class tt extends u {
       `;
     this._options = t;
   }
-  #l = (t) => {
+  #h = (t) => {
     if (this.hasAttribute("disabled")) return;
     const e = t.target, s = e.closest('[data-ry-target="option"]');
     if (s instanceof HTMLElement && !s.hasAttribute("data-disabled")) {
@@ -1061,7 +1065,7 @@ class tt extends u {
     }
     e.closest('[data-ry-target="trigger"]') && this.toggle();
   };
-  #h = (t) => {
+  #l = (t) => {
     if (this.hasAttribute("disabled")) return;
     const e = this.state === "open";
     switch (t.key) {
@@ -1208,7 +1212,7 @@ class tt extends u {
     if (this.state === "open") return;
     this.state = "open";
     const t = this.$('[data-ry-target="trigger"]');
-    if (t && t.setAttribute("aria-expanded", "true"), this.#I(), this.#a)
+    if (t && t.setAttribute("aria-expanded", "true"), this.#D(), this.#a)
       this.#d(0);
     else {
       const e = this.getAttribute("value");
@@ -1220,7 +1224,7 @@ class tt extends u {
     }
     this.emit("open");
   }
-  #I() {
+  #D() {
     const t = this.$('[data-ry-target="dropdown"]');
     if (!t) return;
     this.removeAttribute("data-ry-position");
@@ -1259,20 +1263,20 @@ class tt extends u {
     this.#s && clearTimeout(this.#s);
   }
 }
-class et extends HTMLElement {
+class st extends HTMLElement {
 }
-customElements.define("ry-option", et);
-customElements.define("ry-select", tt);
-let st = 0;
-class it extends u {
+customElements.define("ry-option", st);
+customElements.define("ry-select", et);
+let it = 0;
+class rt extends u {
   #t = null;
   #e = -1;
   #i = [];
   static observedAttributes = ["value", "disabled"];
   setup() {
-    this.#t = `ry-combobox-${++st}`, this.#s();
+    this.#t = `ry-combobox-${++it}`, this.#s();
     const t = this.$('[data-ry-target="input"]');
-    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");
+    t && (this.on(t, "input", this.#r), this.on(t, "focus", this.#n)), this.on(this, "click", this.#o), this.on(this, "keydown", this.#h), this.on(this, "mouseover", this.#l), this.on(document, "click", this.#c), this.hasAttribute("data-ry-state") || (this.state = "closed");
     const e = this.getAttribute("value");
     e && (this.value = e);
   }
@@ -1356,7 +1360,7 @@ class it extends u {
       return;
     }
   };
-  #l = (t) => {
+  #h = (t) => {
     if (this.hasAttribute("disabled")) return;
     const e = this.state === "open";
     switch (t.key) {
@@ -1383,7 +1387,7 @@ class it extends u {
         break;
     }
   };
-  #h = (t) => {
+  #l = (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.$$(
@@ -1474,8 +1478,8 @@ class it extends u {
     e && this.#p(e);
   }
 }
-customElements.define("ry-combobox", it);
-class rt extends u {
+customElements.define("ry-combobox", rt);
+class at extends u {
   #t = "";
   static get observedAttributes() {
     return ["language", "title", "line-numbers"];
@@ -1522,7 +1526,7 @@ class rt extends u {
       case "html":
         return this.#o(t);
       case "json":
-        return this.#l(t);
+        return this.#h(t);
       default:
         return this.#c(t);
     }
@@ -1587,7 +1591,7 @@ class rt extends u {
       const y = s[0];
       y && e.push({ type: "text", value: y }), s = s.slice(1);
     }
-    return e.map((i) => this.#h(i)).join("");
+    return e.map((i) => this.#l(i)).join("");
   }
   #a(t) {
     const e = [];
@@ -1641,7 +1645,7 @@ class rt extends u {
       const c = s[0];
       c && e.push({ type: "text", value: c }), s = s.slice(1);
     }
-    return e.map((r) => this.#h(r)).join("");
+    return e.map((r) => this.#l(r)).join("");
   }
   #o(t) {
     const e = [];
@@ -1687,9 +1691,9 @@ class rt extends u {
       const l = s[0];
       l && e.push({ type: "text", value: l }), s = s.slice(1);
     }
-    return e.map((i) => this.#h(i)).join("");
+    return e.map((i) => this.#l(i)).join("");
   }
-  #l(t) {
+  #h(t) {
     const e = [];
     let s = t;
     for (; s.length > 0; ) {
@@ -1721,9 +1725,9 @@ class rt extends u {
       const l = s[0];
       l && e.push({ type: "text", value: l }), s = s.slice(1);
     }
-    return e.map((i) => this.#h(i)).join("");
+    return e.map((i) => this.#l(i)).join("");
   }
-  #h(t) {
+  #l(t) {
     const e = this.#c(t.value);
     switch (t.type) {
       case "keyword":
@@ -1774,8 +1778,8 @@ class rt extends u {
     this.#t = t, this.#e();
   }
 }
-customElements.define("ry-code", rt);
-class at extends u {
+customElements.define("ry-code", at);
+class nt extends u {
   setup() {
     const t = this.$("template");
     if (!t) return;
@@ -1819,8 +1823,8 @@ class at extends u {
 `).trim();
   }
 }
-customElements.define("ry-example", at);
-class nt extends u {
+customElements.define("ry-example", nt);
+class ot extends u {
   static get observedAttributes() {
     return ["name", "size", "label"];
   }
@@ -1853,24 +1857,24 @@ class nt extends u {
     this.setAttribute("size", String(t));
   }
 }
-customElements.define("ry-icon", nt);
-const ot = ["form", "section", "fieldset", "ry-section"], m = /* @__PURE__ */ new Map(), E = /* @__PURE__ */ new Set();
-function ht(h) {
+customElements.define("ry-icon", ot);
+const ht = ["form", "section", "fieldset", "ry-section"], m = /* @__PURE__ */ new Map(), E = /* @__PURE__ */ new Set();
+function lt(h) {
   let t = h.parentElement;
   for (; t; ) {
-    if (ot.some((e) => t.matches(e)))
+    if (ht.some((e) => t.matches(e)))
       return t;
     t = t.parentElement;
   }
   return null;
 }
-function lt(h) {
+function ct(h) {
   if (E.has(h)) return;
   const t = m.get(h);
   if (!t || t.size < 2) return;
   const e = /* @__PURE__ */ new Map();
   for (const s of t) {
-    const i = ht(s), r = e.get(i) ?? [];
+    const i = lt(s), r = e.get(i) ?? [];
     r.push(s), e.set(i, r);
   }
   if (e.size > 1) {
@@ -1886,7 +1890,7 @@ function lt(h) {
     ), E.add(h);
   }
 }
-class ct extends u {
+class dt extends u {
   static observedAttributes = ["pressed", "disabled", "name", "value"];
   #t = !1;
   setup() {
@@ -1897,7 +1901,7 @@ class ct extends u {
   }
   #e() {
     const t = this.name;
-    t && (m.has(t) || m.set(t, /* @__PURE__ */ new Set()), m.get(t).add(this), this.#t = !0, queueMicrotask(() => lt(t)));
+    t && (m.has(t) || m.set(t, /* @__PURE__ */ new Set()), m.get(t).add(this), this.#t = !0, queueMicrotask(() => ct(t)));
   }
   #i() {
     if (!this.#t) return;
@@ -1958,8 +1962,8 @@ class ct extends u {
     this.setAttribute("icon", t);
   }
 }
-customElements.define("ry-toggle-button", ct);
-class dt extends u {
+customElements.define("ry-toggle-button", dt);
+class ut extends u {
   #t = !1;
   #e = null;
   #i = null;
@@ -1968,7 +1972,7 @@ class dt extends u {
   #a = /* @__PURE__ */ new Map();
   static observedAttributes = ["min", "max", "step", "value", "start", "end", "disabled"];
   setup() {
-    this.#o(), this.#h(), this.#b();
+    this.#o(), this.#l(), this.#b();
   }
   #o() {
     const t = this.hasAttribute("range"), e = this.hasAttribute("labeled"), s = this.hasAttribute("tooltip");
@@ -1988,9 +1992,9 @@ class dt extends u {
         <div data-ry-target="thumb-value" class="ry-slider__thumb" tabindex="0" role="slider" aria-label="Value">
           ${s ? '<span data-ry-target="tooltip-value" class="ry-slider__tooltip"></span>' : ""}
         </div>
-      `, i += "</div>", e && (i += this.#l()), this.innerHTML = i, this.#i = this.$('[data-ry-target="track"]'), this.#s = this.$('[data-ry-target="fill"]'), t ? (this.#r.set("start", this.$('[data-ry-target="thumb-start"]')), this.#r.set("end", this.$('[data-ry-target="thumb-end"]')), s && (this.#a.set("start", this.$('[data-ry-target="tooltip-start"]')), this.#a.set("end", this.$('[data-ry-target="tooltip-end"]')))) : (this.#r.set("value", this.$('[data-ry-target="thumb-value"]')), s && this.#a.set("value", this.$('[data-ry-target="tooltip-value"]')));
+      `, i += "</div>", e && (i += this.#h()), this.innerHTML = i, this.#i = this.$('[data-ry-target="track"]'), this.#s = this.$('[data-ry-target="fill"]'), t ? (this.#r.set("start", this.$('[data-ry-target="thumb-start"]')), this.#r.set("end", this.$('[data-ry-target="thumb-end"]')), s && (this.#a.set("start", this.$('[data-ry-target="tooltip-start"]')), this.#a.set("end", this.$('[data-ry-target="tooltip-end"]')))) : (this.#r.set("value", this.$('[data-ry-target="thumb-value"]')), s && this.#a.set("value", this.$('[data-ry-target="tooltip-value"]')));
   }
-  #l() {
+  #h() {
     const t = this.min, e = this.max, s = this.getAttribute("labels")?.split(","), i = this.getAttribute("label-type") || "number";
     let r = [];
     if (s)
@@ -2011,7 +2015,7 @@ class dt extends u {
       </div>
     `;
   }
-  #h() {
+  #l() {
     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));
@@ -2164,8 +2168,8 @@ class dt extends u {
     t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
   }
 }
-customElements.define("ry-slider", dt);
-class ut extends u {
+customElements.define("ry-slider", ut);
+class pt extends u {
   #t = !1;
   #e = 0;
   #i = 0;
@@ -2174,7 +2178,7 @@ class ut extends u {
   #a = null;
   static observedAttributes = ["min", "max", "step", "value", "disabled", "label", "labels", "description"];
   setup() {
-    this.#o(), this.#l(), this.#u();
+    this.#o(), this.#h(), this.#u();
   }
   #o() {
     const t = this.getAttribute("label"), e = this.getAttribute("description"), s = e ? ` title="${e}"` : "";
@@ -2188,10 +2192,10 @@ class ut extends u {
       ${t ? `<span data-ry-target="label" class="ry-knob__label"${s}>${t}</span>` : ""}
     `, 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.#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() {
+    this.#s && (this.on(this.#s, "mousedown", this.#l), 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) => {
+  #l = (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", ""));
   };
   #c = (t) => {
@@ -2312,9 +2316,9 @@ class ut extends u {
     t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
   }
 }
-customElements.define("ry-knob", ut);
+customElements.define("ry-knob", pt);
 const S = 15, T = 3;
-class pt extends u {
+class gt extends u {
   #t = null;
   #e = null;
   #i = null;
@@ -2322,8 +2326,8 @@ class pt extends u {
   #r = null;
   #a = !1;
   #o = 0;
-  #l = 0;
   #h = 0;
+  #l = 0;
   #c = !1;
   #n = null;
   #p = null;
@@ -2364,7 +2368,7 @@ class pt extends u {
       t.preventDefault(), this.#g(-1);
     }), 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.#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) => {
+    }), this.on(this.#r, "mouseup", () => this.#u()), this.on(this.#r, "mouseleave", () => this.#u())), this.#t && this.on(this.#t, "mousedown", this.#D), 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.#q), this.#t && this.on(this.#t, "keydown", this.#K), 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();
     }));
   }
@@ -2391,10 +2395,10 @@ class pt extends u {
     return e === "stacked" || e === "stacked-end" || e === "stacked-start" ? "y" : "x";
   }
   #v(t, e) {
-    return this.#b === "y" ? this.#l - e : t - this.#o;
+    return this.#b === "y" ? this.#h - e : t - this.#o;
   }
   #y(t, e) {
-    return this.#b === "y" ? Math.abs(e - this.#l) : Math.abs(t - this.#o);
+    return this.#b === "y" ? Math.abs(e - this.#h) : Math.abs(t - this.#o);
   }
   #M(t, e) {
     if (!this.#e) return;
@@ -2402,14 +2406,14 @@ class pt extends u {
     this.#e.style.transform = i === "y" ? `translateY(${-s}px)` : `translateX(${s}px)`;
   }
   #$(t, e, s) {
-    const i = this.#v(t, e), r = this.step || 1, a = s ? r * 10 : r, n = s ? S * 2 : S, o = Math.round(i / n), l = this.#h + o * a, c = i - o * n;
+    const i = this.#v(t, e), r = this.step || 1, a = s ? r * 10 : r, n = s ? S * 2 : S, o = Math.round(i / n), l = this.#l + o * a, c = i - o * n;
     this.#M(c, n);
     const d = this.hasAttribute("wrap") ? this.#V(l) : this.#T(l), g = this.#F(d);
     g !== this.value && (this.value = g, this.#A(), this.#x());
   }
   // --- Mouse drag ---
-  #I = (t) => {
-    this.disabled || this.#c || this.#b === "none" || (t.preventDefault(), this.#a = !0, this.#o = t.clientX, this.#l = t.clientY, this.#h = this.value, this.setAttribute("data-dragging", ""));
+  #D = (t) => {
+    this.disabled || this.#c || this.#b === "none" || (t.preventDefault(), this.#a = !0, this.#o = t.clientX, this.#h = t.clientY, this.#l = this.value, this.setAttribute("data-dragging", ""));
   };
   #Y = (t) => {
     this.#a && this.#$(t.clientX, t.clientY, t.shiftKey);
@@ -2421,7 +2425,7 @@ class pt extends u {
   };
   // --- Touch drag ---
   #X = (t) => {
-    this.disabled || this.#c || this.#b === "none" || (t.preventDefault(), this.#a = !0, this.#o = t.touches[0]?.clientX ?? 0, this.#l = t.touches[0]?.clientY ?? 0, this.#h = this.value, this.setAttribute("data-dragging", ""));
+    this.disabled || this.#c || this.#b === "none" || (t.preventDefault(), this.#a = !0, this.#o = t.touches[0]?.clientX ?? 0, this.#h = t.touches[0]?.clientY ?? 0, this.#l = this.value, this.setAttribute("data-dragging", ""));
   };
   #G = (t) => {
     if (!this.#a) return;
@@ -2429,11 +2433,11 @@ class pt extends u {
     const e = t.touches[0];
     e && this.#$(e.clientX, e.clientY, !1);
   };
-  #K = () => {
+  #q = () => {
     this.#a && (this.#a = !1, this.removeAttribute("data-dragging"), this.#e && (this.#e.style.transform = ""), this.#_());
   };
   // --- Keyboard ---
-  #q = (t) => {
+  #K = (t) => {
     if (this.disabled || this.#c) return;
     const e = this.step || 1, s = e * 10;
     let i = 0;
@@ -2574,7 +2578,7 @@ class pt extends u {
     this.#u();
   }
 }
-customElements.define("ry-number-select", pt);
+customElements.define("ry-number-select", gt);
 function v(h) {
   const t = h.h / 360, e = h.s / 100, s = h.v / 100;
   let i = 0, r = 0, a = 0;
@@ -2635,7 +2639,7 @@ function L(h) {
     l: Math.round(s * 100)
   };
 }
-function gt(h) {
+function ft(h) {
   const t = h.s / 100, e = h.l / 100, s = e + t * Math.min(e, 1 - e), i = s === 0 ? 0 : 2 * (1 - e / s);
   return {
     h: h.h,
@@ -2643,11 +2647,11 @@ function gt(h) {
     v: Math.round(s * 100)
   };
 }
-function D(h) {
+function I(h) {
   const t = (e) => e.toString(16).padStart(2, "0");
   return `#${t(h.r)}${t(h.g)}${t(h.b)}`;
 }
-function ft(h) {
+function bt(h) {
   const t = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(h);
   if (!t) {
     const e = /^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(h);
@@ -2675,7 +2679,7 @@ function A(h) {
       }, n = parseInt(i[4], 16) / 255;
       return { hsv: $(a), alpha: Math.round(n * 100) };
     }
-    const r = ft(t);
+    const r = bt(t);
     return r ? { hsv: $(r), alpha: 100 } : null;
   }
   const e = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)$/.exec(t);
@@ -2694,11 +2698,11 @@ function A(h) {
       s: parseFloat(s[2]),
       l: parseFloat(s[3])
     }, r = s[4] ? parseFloat(s[4]) * 100 : 100;
-    return { hsv: gt(i), alpha: r };
+    return { hsv: ft(i), alpha: r };
   }
   return null;
 }
-class bt extends u {
+class yt extends u {
   #t = 0;
   #e = 100;
   #i = 100;
@@ -2706,8 +2710,8 @@ class bt extends u {
   #r = !1;
   #a = !1;
   #o = !1;
-  #l = null;
   #h = null;
+  #l = null;
   #c = null;
   #n = null;
   #p = null;
@@ -2760,10 +2764,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.#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"]');
+      `, this.#h = this.$('[data-ry-target="trigger"]'), this.#l = 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.#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));
+    this.#h && this.on(this.#h, "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.#K), 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"]');
@@ -2786,17 +2790,17 @@ class bt extends u {
     this.state === "open" && (this.contains(t.target) || this.close());
   };
   #$ = (t) => {
-    t.key === "Escape" && this.state === "open" && (this.close(), this.#l?.focus());
+    t.key === "Escape" && this.state === "open" && (this.close(), this.#h?.focus());
   };
   open() {
-    this.hasAttribute("inline") || (this.#I(), this.state = "open");
+    this.hasAttribute("inline") || (this.#D(), this.state = "open");
   }
   close() {
     this.hasAttribute("inline") || (this.state = "closed", this.removeAttribute("data-ry-position"));
   }
-  #I() {
-    if (!this.#h || !this.#l) return;
-    const t = this.#l.getBoundingClientRect(), e = 320, i = window.innerHeight - t.bottom, r = t.top;
+  #D() {
+    if (!this.#l || !this.#h) return;
+    const t = this.#h.getBoundingClientRect(), e = 320, i = window.innerHeight - t.bottom, r = t.top;
     i < e && r > i ? this.setAttribute("data-ry-position", "top") : this.setAttribute("data-ry-position", "bottom");
   }
   // ───────────────────────────────────────────────────────────────────────────
@@ -2834,14 +2838,14 @@ class bt extends u {
   // Hue handlers
   // ───────────────────────────────────────────────────────────────────────────
   #G = (t) => {
-    this.disabled || (t.preventDefault(), this.#a = !0, this.#d?.focus(), this.#K(t));
+    this.disabled || (t.preventDefault(), this.#a = !0, this.#d?.focus(), this.#q(t));
   };
-  #K(t) {
+  #q(t) {
     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) => {
+  #K = (t) => {
     if (this.disabled) return;
     const e = t.shiftKey ? 10 : 1;
     let s = !1;
@@ -2888,7 +2892,7 @@ class bt extends u {
   // Pointer move/up
   // ───────────────────────────────────────────────────────────────────────────
   #P = (t) => {
-    this.#r ? this.#C(t) : this.#a ? this.#K(t) : this.#o && this.#E(t);
+    this.#r ? this.#C(t) : this.#a ? this.#q(t) : this.#o && this.#E(t);
   };
   #R = () => {
     (this.#r || this.#a || this.#o) && (this.#r = !1, this.#a = !1, this.#o = !1, this.#k());
@@ -2974,7 +2978,7 @@ class bt extends u {
     const t = this.format, e = v({ h: this.#t, s: this.#e, v: this.#i }), s = this.hasAttribute("opacity");
     switch (t) {
       case "hex": {
-        const i = D(e);
+        const i = I(e);
         if (s && this.#s < 100) {
           const r = Math.round(this.#s / 100 * 255).toString(16).padStart(2, "0");
           return i + r;
@@ -2988,7 +2992,7 @@ class bt extends u {
         return s ? `hsla(${i.h}, ${i.s}%, ${i.l}%, ${(this.#s / 100).toFixed(2)})` : `hsl(${i.h}, ${i.s}%, ${i.l}%)`;
       }
       default:
-        return D(e);
+        return I(e);
     }
   }
   // ───────────────────────────────────────────────────────────────────────────
@@ -3059,8 +3063,8 @@ class bt extends u {
     return this.format = e, s;
   }
 }
-customElements.define("ry-color-picker", bt);
-class yt extends u {
+customElements.define("ry-color-picker", yt);
+class mt extends u {
   #t = null;
   #e = null;
   #i = null;
@@ -3099,15 +3103,15 @@ 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.#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);
+    this.#t && this.on(this.#t, "click", this.#o), this.#e && (this.on(this.#e, "input", this.#l), this.on(this.#e, "keydown", this.#p), this.on(this.#e, "focus", this.#h)), 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());
   };
-  #l = () => {
+  #h = () => {
     this.disabled || this.open();
   };
-  #h = () => {
+  #l = () => {
     if (!this.#e || !this.#s) return;
     let t = this.#e.value;
     const e = this.#e.selectionStart ?? t.length, r = "#" + t.replace(/[^#a-fA-F0-9]/g, "").replace(/#/g, "").slice(0, 6);
@@ -3137,7 +3141,7 @@ class yt extends u {
     return !!(/^#[a-fA-F0-9]{6}$/.test(t) || /^#[a-fA-F0-9]{3}$/.test(t));
   }
   #p = (t) => {
-    t.key === "Enter" && (t.preventDefault(), this.#h(), this.emit("change", { value: this.value }));
+    t.key === "Enter" && (t.preventDefault(), this.#l(), this.emit("change", { 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 }));
@@ -3211,7 +3215,7 @@ class yt extends u {
     return this.#s?.hsv ?? { h: 0, s: 0, v: 0 };
   }
 }
-customElements.define("ry-color-input", yt);
+customElements.define("ry-color-input", mt);
 function x(h) {
   const t = h.trim().toLowerCase();
   if (t.startsWith("#")) {
@@ -3244,19 +3248,19 @@ function x(h) {
   }
   return null;
 }
-function mt(h) {
+function vt(h) {
   const t = (e) => Math.max(0, Math.min(255, e)).toString(16).padStart(2, "0");
   return `#${t(h.r)}${t(h.g)}${t(h.b)}`;
 }
-function vt(h, t, e) {
+function At(h, t, e) {
   return {
     r: Math.round(h.r + (t.r - h.r) * e),
     g: Math.round(h.g + (t.g - h.g) * e),
     b: Math.round(h.b + (t.b - h.b) * e)
   };
 }
-const I = "linear-gradient(90deg, #000000 0%, #ffffff 100%)", At = 50;
-class wt extends u {
+const D = "linear-gradient(90deg, #000000 0%, #ffffff 100%)", wt = 50;
+class kt extends u {
   #t = "linear";
   #e = 90;
   #i = "circle";
@@ -3264,8 +3268,8 @@ class wt extends u {
   #r = null;
   #a = 0;
   #o = null;
-  #l = !1;
-  #h = null;
+  #h = !1;
+  #l = null;
   #c = !1;
   // Cached DOM refs
   #n = null;
@@ -3279,8 +3283,8 @@ class wt extends u {
   // Parsing / Serialization
   // ───────────────────────────────────────────────────────────────────────────
   #m() {
-    const t = this.getAttribute("value") || I;
-    this.#f(t) || this.#f(I);
+    const t = this.getAttribute("value") || D;
+    this.#f(t) || this.#f(D);
   }
   #f(t) {
     const e = t.trim();
@@ -3354,7 +3358,7 @@ class wt extends u {
   #$() {
     this.#s.sort((t, e) => t.position - e.position);
   }
-  #I() {
+  #D() {
     return this.#s.find((t) => t.id === this.#r) ?? null;
   }
   // ───────────────────────────────────────────────────────────────────────────
@@ -3402,7 +3406,7 @@ class wt extends u {
   // Event binding
   // ───────────────────────────────────────────────────────────────────────────
   #X() {
-    this.#n && (this.on(this.#n, "pointerdown", this.#G), this.on(this.#n, "pointermove", this.#K), this.on(this.#n, "pointerup", this.#q), this.on(this.#n, "lostpointercapture", this.#q));
+    this.#n && (this.on(this.#n, "pointerdown", this.#G), this.on(this.#n, "pointermove", this.#q), this.on(this.#n, "pointerup", this.#K), this.on(this.#n, "lostpointercapture", this.#K));
     const t = this.$('[data-ry-target="type-solid"]'), e = this.$('[data-ry-target="type-linear"]'), s = this.$('[data-ry-target="type-radial"]');
     t && this.on(t, "click", () => this.#E("solid")), e && this.on(e, "click", () => this.#E("linear")), s && this.on(s, "click", () => this.#E("radial"));
     const i = this.$('[data-ry-target="angle-select"]');
@@ -3421,26 +3425,26 @@ class wt extends u {
     if (s) {
       const i = s.getAttribute("data-stop-id");
       if (!i) return;
-      t.preventDefault(), this.#o = i, this.#l = !1, this.#h = this.#n.getBoundingClientRect(), this.#M(i), this.#n.setPointerCapture(t.pointerId), s.focus();
+      t.preventDefault(), this.#o = i, this.#h = !1, this.#l = this.#n.getBoundingClientRect(), this.#M(i), this.#n.setPointerCapture(t.pointerId), s.focus();
     } else {
       if (t.preventDefault(), !this.#n) return;
       const i = this.#n.getBoundingClientRect(), r = Math.round(Math.max(0, Math.min(100, (t.clientX - i.left) / i.width * 100))), a = this.#U(r);
-      this.#v(a, r), this.#n.querySelector(`[data-stop-id="${this.#r}"]`)?.focus(), this.#o = this.#r, this.#l = !1, this.#h = i, this.#n.setPointerCapture(t.pointerId), this.#D();
+      this.#v(a, r), this.#n.querySelector(`[data-stop-id="${this.#r}"]`)?.focus(), this.#o = this.#r, this.#h = !1, this.#l = i, this.#n.setPointerCapture(t.pointerId), this.#I();
     }
   };
-  #K = (t) => {
-    if (!this.#o || !this.#h) return;
+  #q = (t) => {
+    if (!this.#o || !this.#l) return;
     const e = this.#s.find((n) => n.id === this.#o);
     if (!e) return;
-    const s = Math.max(0, Math.min(1, (t.clientX - this.#h.left) / this.#h.width));
+    const s = Math.max(0, Math.min(1, (t.clientX - this.#l.left) / this.#l.width));
     e.position = Math.round(s * 100);
-    const i = this.#h.top + this.#h.height / 2, r = Math.abs(t.clientY - i);
-    this.#l = r > At && this.#s.length > 2;
+    const i = this.#l.top + this.#l.height / 2, r = Math.abs(t.clientY - i);
+    this.#h = r > wt && this.#s.length > 2;
     const a = this.#n?.querySelector(`[data-stop-id="${e.id}"]`);
-    a && (a.style.left = this.#b(e.position), this.#l ? (a.style.opacity = "0.3", a.style.transform = "translate(-50%, -50%) scale(0.7)") : (a.style.opacity = "", a.style.transform = "")), this.#$(), this.#O(), this.#H(), this.#k(), this.#D();
+    a && (a.style.left = this.#b(e.position), this.#h ? (a.style.opacity = "0.3", a.style.transform = "translate(-50%, -50%) scale(0.7)") : (a.style.opacity = "", a.style.transform = "")), this.#$(), this.#O(), this.#H(), this.#k(), this.#I();
   };
-  #q = () => {
-    this.#o && (this.#l && this.#y(this.#o), this.#o = null, this.#l = !1, this.#h = null, this.#S(), this.#B());
+  #K = () => {
+    this.#o && (this.#h && this.#y(this.#o), this.#o = null, this.#h = !1, this.#l = null, this.#S(), this.#B());
   };
   #J = (t) => {
     if (this.disabled) return;
@@ -3461,30 +3465,30 @@ class wt extends u {
         break;
       case "Delete":
       case "Backspace":
-        this.#y(i) && (this.#D(), this.#B()), t.preventDefault();
+        this.#y(i) && (this.#I(), this.#B()), t.preventDefault();
         return;
     }
-    n && (t.preventDefault(), this.#$(), this.#W(), this.#O(), this.#H(), this.#k(), this.#S(), this.#D(), this.#B());
+    n && (t.preventDefault(), this.#$(), this.#W(), this.#O(), this.#H(), this.#k(), this.#S(), this.#I(), this.#B());
   };
   // ───────────────────────────────────────────────────────────────────────────
   // Type / Angle / Shape handlers
   // ───────────────────────────────────────────────────────────────────────────
   #E(t) {
-    this.#t !== t && (this.#t = t, this.setAttribute("data-ry-type", t), this.#_(), this.#H(), this.#k(), this.#S(), this.#D(), this.#B());
+    this.#t !== t && (this.#t = t, this.setAttribute("data-ry-type", t), this.#_(), this.#H(), this.#k(), this.#S(), this.#I(), this.#B());
   }
   #z = (t) => {
     const e = t.detail;
-    this.#e = e.value, this.#H(), this.#k(), this.#S(), this.#D();
+    this.#e = e.value, this.#H(), this.#k(), this.#S(), this.#I();
   };
   #P(t) {
-    this.#i !== t && (this.#i = t, this.#_(), this.#k(), this.#S(), this.#D(), this.#B());
+    this.#i !== t && (this.#i = t, this.#_(), this.#k(), this.#S(), this.#I(), this.#B());
   }
   // ───────────────────────────────────────────────────────────────────────────
   // Color picker handlers
   // ───────────────────────────────────────────────────────────────────────────
   #R = () => {
-    const t = this.#I();
-    !t || !this.#p || (t.color = this.#p.value, this.#Z(t), this.#O(), this.#H(), this.#k(), this.#D());
+    const t = this.#D();
+    !t || !this.#p || (t.color = this.#p.value, this.#Z(t), this.#O(), this.#H(), this.#k(), this.#I());
   };
   #T = () => {
     this.#S(), this.#B();
@@ -3511,7 +3515,7 @@ class wt extends u {
   #A() {
     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();
+    t && this.#f(t) ? (this.#C(), this.#x(), this.#S(), this.#I(), this.#B()) : this.#k();
   }
   // ───────────────────────────────────────────────────────────────────────────
   // Color interpolation
@@ -3531,7 +3535,7 @@ class wt extends u {
     const r = i.position - s.position;
     if (r === 0) return s.color;
     const a = (t - s.position) / r, n = x(s.color), o = x(i.color);
-    return !n || !o ? s.color : mt(vt(n, o, a));
+    return !n || !o ? s.color : vt(At(n, o, a));
   }
   // ───────────────────────────────────────────────────────────────────────────
   // Update methods
@@ -3576,7 +3580,7 @@ class wt extends u {
       e.getAttribute("data-stop-id") === this.#r ? e.setAttribute("data-selected", "") : e.removeAttribute("data-selected");
   }
   #L() {
-    const t = this.#I();
+    const t = this.#D();
     !t || !this.#p || this.#p.setColor(t.color);
   }
   #k() {
@@ -3589,7 +3593,7 @@ class wt extends u {
   // ───────────────────────────────────────────────────────────────────────────
   // Events
   // ───────────────────────────────────────────────────────────────────────────
-  #D() {
+  #I() {
     this.emit("input", {
       value: this.#g(),
       type: this.#t,
@@ -3644,7 +3648,7 @@ class wt extends u {
     return this.#s.map((t) => ({ ...t }));
   }
   get selectedStop() {
-    const t = this.#I();
+    const t = this.#D();
     return t ? { ...t } : null;
   }
   get disabled() {
@@ -3654,16 +3658,16 @@ class wt extends u {
     t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
   }
   addStop(t, e) {
-    this.#v(t, e), this.#S(), this.#D(), this.#B();
+    this.#v(t, e), this.#S(), this.#I(), this.#B();
   }
   removeStop(t) {
     const e = this.#y(t);
     return e && (this.#k(), this.#S(), this.#B()), e;
   }
 }
-customElements.define("ry-gradient-picker", wt);
-let kt = 0;
-const $t = 5;
+customElements.define("ry-gradient-picker", kt);
+let $t = 0;
+const xt = 5;
 function _(h) {
   return p(h).replace(/width="24"/g, 'width="16"').replace(/height="24"/g, 'height="16"').replace(/viewBox/, 'class="ry-tree__icon" viewBox');
 }
@@ -3676,9 +3680,9 @@ class w extends u {
   #r = null;
   #a = null;
   #o = null;
-  #l = null;
+  #h = null;
   setup() {
-    this.#h(), this.on(this, "click", (t) => {
+    this.#l(), this.on(this, "click", (t) => {
       const s = t.target.closest('[data-ry-target="file"]');
       s && (this.$$("[data-ry-selected]").forEach((i) => i.removeAttribute("data-ry-selected")), s.setAttribute("data-ry-selected", ""), this.emit("select", {
         label: s.dataset.ryLabel ?? ""
@@ -3694,7 +3698,7 @@ class w extends u {
     }), this.hasAttribute("sortable") && this.#m();
   }
   // ── Build ──────────────────────────────────────────────────
-  #h() {
+  #l() {
     if (this.$(".ry-tree__root")) return;
     const t = Array.from(this.children), e = document.createElement("ul");
     e.className = "ry-tree__root";
@@ -3709,7 +3713,7 @@ class w extends u {
       (o) => o.tagName === "RY-TREE-ITEM"
     );
     if (a.length > 0) {
-      const o = `ry-tree-${++kt}`, l = document.createElement("input");
+      const o = `ry-tree-${++$t}`, l = document.createElement("input");
       l.type = "checkbox", l.id = o, l.className = "ry-tree__toggle", i && (l.checked = !0);
       const c = document.createElement("label");
       c.htmlFor = o, c.className = "ry-tree__label", c.setAttribute("data-ry-target", "folder"), c.dataset.ryLabel = s, c.innerHTML = `
@@ -3786,7 +3790,7 @@ class w extends u {
     if (!this.#t && !this.#e) return;
     if (this.#t && !this.#e) {
       const c = t.clientX - this.#i, d = t.clientY - this.#s;
-      if (Math.hypot(c, d) < $t) return;
+      if (Math.hypot(c, d) < xt) return;
       this.#t = !1, this.#e = !0, this.#u(t);
     }
     if (!this.#e || !this.#a) return;
@@ -3827,14 +3831,14 @@ class w extends u {
   }
   #b() {
     this.#a?.parentNode && this.#a.parentNode.removeChild(this.#a), this.#a = null, this.#r?.classList.remove("ry-tree__item--collapsed"), this.#r?.removeAttribute("data-ry-dragging");
-    const t = this.#o, e = this.#l;
+    const t = this.#o, e = this.#h;
     this.#y(), this.#r && t && e && this.#M(this.#r, t, e);
   }
   #v(t, e) {
-    this.#o === t && this.#l === e || (this.#y(), t.setAttribute("data-ry-drop-target", e), this.#o = t, this.#l = e);
+    this.#o === t && this.#h === e || (this.#y(), t.setAttribute("data-ry-drop-target", e), this.#o = t, this.#h = e);
   }
   #y() {
-    this.#o?.removeAttribute("data-ry-drop-target"), this.#o = null, this.#l = null;
+    this.#o?.removeAttribute("data-ry-drop-target"), this.#o = null, this.#h = null;
   }
   #M(t, e, s) {
     if (s === "inside" && e.contains(t)) return;
@@ -3862,12 +3866,12 @@ class w extends u {
     return e?.dataset.ryLabel ?? s?.dataset.ryLabel ?? "";
   }
 }
-class xt extends u {
+class _t extends u {
   // Declarative container consumed by RyTree#build
 }
 customElements.define("ry-tree", w);
-customElements.define("ry-tree-item", xt);
-class _t extends u {
+customElements.define("ry-tree-item", _t);
+class Mt extends u {
   setup() {
     this.#t();
   }
@@ -3888,8 +3892,8 @@ class _t extends u {
     return this.$('[data-ry-target="label"]')?.textContent?.trim() ?? "";
   }
 }
-customElements.define("ry-tag", _t);
-class Mt extends u {
+customElements.define("ry-tag", Mt);
+class Et extends u {
   #t = [];
   setup() {
     this.#e(), this.#i();
@@ -3924,7 +3928,7 @@ class Mt extends u {
       else if (t.key === "Tab")
         return;
     }
-    t.key === "Backspace" && !e.value && this.#t.length > 0 && this.#l();
+    t.key === "Backspace" && !e.value && this.#t.length > 0 && this.#h();
   };
   #r = (t) => {
     t.preventDefault();
@@ -3936,7 +3940,7 @@ class Mt extends u {
   };
   #a = (t) => {
     const e = t.detail.value, s = this.#t.indexOf(e);
-    s >= 0 && (this.#t.splice(s, 1), this.#h(), this.emit("change", { values: [...this.#t] }));
+    s >= 0 && (this.#t.splice(s, 1), this.#l(), this.emit("change", { values: [...this.#t] }));
   };
   #o(t) {
     const e = this.getAttribute("max-tags");
@@ -3947,16 +3951,16 @@ class Mt extends u {
       const i = document.createElement("ry-tag");
       i.setAttribute("removable", ""), i.setAttribute("size", "sm"), i.setAttribute("data-value", t), i.textContent = t, s.appendChild(i);
     }
-    this.#h(), this.emit("add", { value: t }), this.emit("change", { values: [...this.#t] });
+    this.#l(), this.emit("add", { value: t }), this.emit("change", { values: [...this.#t] });
   }
-  #l() {
+  #h() {
     const e = this.$('[data-ry-target="tags"]')?.lastElementChild;
     if (e) {
       const s = e.dataset.value ?? "";
-      e.remove(), this.#t.pop(), this.#h(), this.emit("remove", { value: s, label: s }), this.emit("change", { values: [...this.#t] });
+      e.remove(), this.#t.pop(), this.#l(), this.emit("remove", { value: s, label: s }), this.emit("change", { values: [...this.#t] });
     }
   }
-  #h() {
+  #l() {
     const t = this.$('[data-ry-target="hidden"]'), e = this.getAttribute("delimiter") ?? ",";
     t && (t.value = this.#t.join(e));
   }
@@ -3968,11 +3972,11 @@ class Mt extends u {
     return [...this.#t];
   }
 }
-customElements.define("ry-tag-input", Mt);
-class Et extends u {
-}
-customElements.define("ry-hero", Et);
+customElements.define("ry-tag-input", Et);
 class Ct extends u {
+}
+customElements.define("ry-hero", Ct);
+class St extends u {
   setup() {
     this.#t();
   }
@@ -3985,8 +3989,8 @@ class Ct extends u {
     `;
   }
 }
-customElements.define("ry-stat", Ct);
-class St extends u {
+customElements.define("ry-stat", St);
+class Tt extends u {
   setup() {
     this.#t();
   }
@@ -4000,17 +4004,17 @@ class St extends u {
     s.setAttribute("data-ry-target", "icon"), s.className = "ry-feature__icon", s.innerHTML = e, this.insertBefore(s, this.firstChild);
   }
 }
-class Tt extends u {
-}
-customElements.define("ry-feature", St);
-customElements.define("ry-feature-grid", Tt);
 class Lt extends u {
 }
+customElements.define("ry-feature", Tt);
+customElements.define("ry-feature-grid", Lt);
+class It extends u {
+}
 class Dt extends u {
 }
-customElements.define("ry-pricing", Lt);
+customElements.define("ry-pricing", It);
 customElements.define("ry-pricing-card", Dt);
-class It extends u {
+class Ht extends u {
   #t = 0;
   #e = 0;
   #i = null;
@@ -4045,15 +4049,15 @@ 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.#p()), this.on(this, "mouseleave", () => this.#n())), this.goTo(0);
+    this.on(r, "pointerdown", this.#h), this.on(r, "pointermove", this.#l), 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());
   };
-  #l = (t) => {
+  #h = (t) => {
     this.#s = t.clientX, this.#r = !0, t.currentTarget.setPointerCapture(t.pointerId);
   };
-  #h = (t) => {
+  #l = (t) => {
     this.#r && t.preventDefault();
   };
   #c = (t) => {
@@ -4090,54 +4094,187 @@ class It extends u {
     this.#p();
   }
 }
-customElements.define("ry-carousel", It);
+customElements.define("ry-carousel", Ht);
+const H = "ry-theme-panel";
+class Bt extends u {
+  #t = "default";
+  #e = "auto";
+  setup() {
+    const t = this.#l();
+    this.#t = t?.theme ?? this.getAttribute("theme") ?? document.documentElement.dataset.ryTheme ?? "default", this.#e = t?.mode ?? this.getAttribute("mode") ?? document.documentElement.dataset.ryMode ?? "auto", (this.#t === "light" || this.#t === "dark") && (this.#e = this.#t, this.#t = "default"), this.innerHTML = this.#c(), this.#i(), this.#s();
+  }
+  #i() {
+    this.$$('[data-ry-target="theme-btn"]').forEach((t) => {
+      this.on(t, "click", () => {
+        this.#t = t.dataset.value ?? "default", this.#s(), this.#o(), this.#h(), this.emit("theme-panel-change", {
+          theme: this.#t,
+          mode: this.#e
+        });
+      });
+    }), this.$$('[data-ry-target="mode-btn"]').forEach((t) => {
+      this.on(t, "click", () => {
+        this.#e = t.dataset.value ?? "auto", this.#s(), this.#o(), this.#h(), this.emit("theme-panel-change", {
+          theme: this.#t,
+          mode: this.#e
+        });
+      });
+    });
+  }
+  #s() {
+    const t = document.documentElement;
+    this.#t === "default" ? delete t.dataset.ryTheme : t.dataset.ryTheme = this.#t, this.#e === "auto" ? t.style.removeProperty("color-scheme") : t.style.colorScheme = this.#e, this.#r();
+  }
+  #r() {
+    if (document.querySelectorAll("link[data-ry-theme-panel]").forEach((t) => t.remove()), this.#t === "ocean") {
+      if (document.querySelector('link[href*="ocean.css"]')) return;
+      const t = document.createElement("link");
+      t.rel = "stylesheet", t.href = this.#a("ocean.css"), t.setAttribute("data-ry-theme-panel", ""), document.head.appendChild(t);
+    }
+  }
+  #a(t) {
+    const e = this.getAttribute("base-path");
+    if (e) return `${e}/${t}`;
+    const s = document.querySelector('link[href*="ry-"]');
+    if (s) {
+      const i = s.getAttribute("href") ?? "";
+      return `${i.substring(0, i.lastIndexOf("/"))}/../themes/${t}`;
+    }
+    return `/src/themes/${t}`;
+  }
+  #o() {
+    this.$$('[data-ry-target="theme-btn"]').forEach((t) => {
+      const e = t;
+      e.setAttribute("aria-pressed", String(e.dataset.value === this.#t));
+    }), this.$$('[data-ry-target="mode-btn"]').forEach((t) => {
+      const e = t;
+      e.setAttribute("aria-pressed", String(e.dataset.value === this.#e));
+    });
+  }
+  #h() {
+    try {
+      localStorage.setItem(H, JSON.stringify({
+        theme: this.#t,
+        mode: this.#e
+      }));
+    } catch {
+    }
+  }
+  #l() {
+    try {
+      const t = localStorage.getItem(H);
+      return t ? JSON.parse(t) : null;
+    } catch {
+      return null;
+    }
+  }
+  #c() {
+    return `
+      <div data-ry-target="panel" class="ry-theme-panel">
+        <div data-ry-target="theme-row" class="ry-theme-panel__row">
+          <span data-ry-target="label" class="ry-theme-panel__label">Theme</span>
+          <div data-ry-target="theme-options" class="ry-theme-panel__options">
+            ${this.#n("theme-btn", "none", "None")}
+            ${this.#n("theme-btn", "default", "Default")}
+            ${this.#n("theme-btn", "ocean", "Ocean")}
+          </div>
+        </div>
+        <div data-ry-target="mode-row" class="ry-theme-panel__row">
+          <span data-ry-target="label" class="ry-theme-panel__label">Mode</span>
+          <div data-ry-target="mode-options" class="ry-theme-panel__options">
+            ${this.#n("mode-btn", "auto", "Auto")}
+            ${this.#n("mode-btn", "light", "&#9728;")}
+            ${this.#n("mode-btn", "dark", "&#9790;")}
+          </div>
+        </div>
+      </div>`;
+  }
+  #n(t, e, s) {
+    const i = t === "theme-btn" ? this.#t : this.#e;
+    return `<button data-ry-target="${t}" data-value="${e}" class="ry-theme-panel__btn" aria-pressed="${e === i}">${s}</button>`;
+  }
+  // Public API
+  get theme() {
+    return this.#t;
+  }
+  set theme(t) {
+    this.#t = t, this.#s(), this.#o(), this.#h();
+  }
+  get mode() {
+    return this.#e;
+  }
+  set mode(t) {
+    this.#e = t, this.#s(), this.#o(), this.#h();
+  }
+}
+customElements.define("ry-theme-panel", Bt);
+class Rt extends u {
+  setup() {
+    this.#t();
+  }
+  #t() {
+    if (this.$('[data-ry-target="quote"]')) return;
+    const t = this.querySelector('[slot="avatar"]'), e = this.querySelector("blockquote"), s = this.querySelector('[slot="name"]'), i = this.querySelector('[slot="role"]'), r = parseInt(this.getAttribute("stars") ?? "0", 10), a = e?.innerHTML?.trim() ?? "", n = s?.textContent?.trim() ?? "", o = i?.textContent?.trim() ?? "", l = t ? `<div data-ry-target="avatar" class="ry-testimonial__avatar">${t.outerHTML}</div>` : "", c = r > 0 ? `<div data-ry-target="stars" class="ry-testimonial__stars">${Array.from({ length: r }, () => `<span class="ry-testimonial__star">${p("star")}</span>`).join("")}</div>` : "";
+    this.innerHTML = `
+      ${l}
+      ${c}
+      <blockquote data-ry-target="quote" class="ry-testimonial__quote">${a}</blockquote>
+      <div data-ry-target="attribution" class="ry-testimonial__attribution">
+        <span data-ry-target="name" class="ry-testimonial__name">${n}</span>
+        ${o ? `<span data-ry-target="role" class="ry-testimonial__role">${o}</span>` : ""}
+      </div>
+    `;
+  }
+}
+customElements.define("ry-testimonial", Rt);
 window.RyToast = f;
 console.log("ry-ui loaded");
 export {
-  R as RyAccordion,
-  V as RyAlert,
-  O as RyButton,
-  N as RyButtonGroup,
-  z as RyCard,
-  It as RyCarousel,
-  rt as RyCode,
-  yt as RyColorInput,
-  bt as RyColorPicker,
-  it as RyCombobox,
-  J as RyDrawer,
-  j as RyDropdown,
+  P as RyAccordion,
+  U as RyAlert,
+  N as RyButton,
+  q as RyButtonGroup,
+  V as RyCard,
+  Ht as RyCarousel,
+  at as RyCode,
+  mt as RyColorInput,
+  yt as RyColorPicker,
+  rt as RyCombobox,
+  Z as RyDrawer,
+  O as RyDropdown,
   u as RyElement,
-  at as RyExample,
-  St as RyFeature,
-  Tt as RyFeatureGrid,
-  U as RyField,
-  wt as RyGradientPicker,
-  Et as RyHero,
-  nt as RyIcon,
-  ut as RyKnob,
-  P as RyModal,
-  pt as RyNumberSelect,
-  Lt as RyPricing,
+  nt as RyExample,
+  Tt as RyFeature,
+  Lt as RyFeatureGrid,
+  W as RyField,
+  kt as RyGradientPicker,
+  Ct as RyHero,
+  ot as RyIcon,
+  pt as RyKnob,
+  F as RyModal,
+  gt as RyNumberSelect,
+  It as RyPricing,
   Dt as RyPricingCard,
-  tt as RySelect,
-  dt as RySlider,
+  et as RySelect,
+  ut as RySlider,
   K as RySplit,
-  Ct as RyStat,
-  Y as RySwitch,
-  F as RyTabs,
-  _t as RyTag,
-  Mt as RyTagInput,
-  q as RyThemeToggle,
+  St as RyStat,
+  X as RySwitch,
+  j as RyTabs,
+  Mt as RyTag,
+  Et as RyTagInput,
+  Rt as RyTestimonial,
+  Bt as RyThemePanel,
+  z as RyThemeToggle,
   f as RyToast,
-  ct as RyToggleButton,
-  G as RyTooltip,
+  dt as RyToggleButton,
+  J as RyTooltip,
   w as RyTree,
-  xt as RyTreeItem,
+  _t as RyTreeItem,
   p as getIcon,
-  Pt as getIconNames,
+  Ot as getIconNames,
   C as processTransforms,
-  Bt as registerIcon,
-  Rt as registerIcons,
+  Ft as registerIcon,
+  jt as registerIcons,
   M as transform
 };
 //# sourceMappingURL=ry-ui.js.map