@ryanhelsing/ry-ui 1.0.14 → 1.0.15

package/dist/ry-ui.js

@@ -89,7 +89,7 @@ class u extends HTMLElement {
     this.on(t, "keydown", a), i?.focus();
   }
 }
-const B = [
+const P = [
   // Layout
   "page",
   "header",
@@ -119,7 +119,6 @@ const B = [
   "alert",
   "card",
   "button",
-  "button-group",
   "badge",
   "field",
   "switch",
@@ -151,25 +150,29 @@ const B = [
   "combobox",
   "theme-panel",
   "testimonial",
-  "heading"
-], R = new RegExp(
-  `<(/?)(${B.join("|")})(\\s|>|/)`,
+  "heading",
+  "search-list",
+  "search-item",
+  "search-group",
+  "logo-bar"
+], F = new RegExp(
+  `<(/?)(${P.join("|")})(\\s|>|/)`,
   "g"
 );
-function M(h) {
-  return h.replace(R, "<$1ry-$2$3");
+function C(h) {
+  return h.replace(F, "<$1ry-$2$3");
 }
-function C() {
+function T() {
   document.querySelectorAll("ry").forEach((h) => {
-    const t = M(h.innerHTML), e = document.createElement("template");
+    const t = C(h.innerHTML), e = document.createElement("template");
     e.innerHTML = t, h.replaceWith(e.content);
   }), document.querySelectorAll("template[ry]").forEach((h) => {
-    const t = M(h.innerHTML), e = document.createElement("template");
+    const t = C(h.innerHTML), e = document.createElement("template");
     e.innerHTML = t, h.replaceWith(e.content);
   });
 }
-document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", C) : C();
-class P extends u {
+document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", T) : T();
+class O extends u {
   setup() {
     this.#t(), this.$$('[data-ry-target="trigger"]').forEach((t) => {
       this.on(t, "click", this.#i);
@@ -245,10 +248,10 @@ class P extends u {
     this.$$('[data-ry-target="item"]').forEach((t) => this.close(t));
   }
 }
-customElements.define("ry-accordion", P);
+customElements.define("ry-accordion", O);
 customElements.get("ry-accordion-item") || customElements.define("ry-accordion-item", class extends HTMLElement {
 });
-class F extends u {
+class j extends u {
   #t = null;
   #e = 0;
   setup() {
@@ -266,7 +269,7 @@ class F extends u {
   }
   #i() {
     if (this.$('[data-ry-target="dialog"]')) return;
-    const t = this.getAttribute("title") ?? "", s = this.$('[slot="footer"]')?.innerHTML ?? "", i = Array.from(this.childNodes).filter((r) => !(r instanceof Element && r.getAttribute("slot") === "footer")).map((r) => r instanceof Element ? r.outerHTML : r.textContent).join("");
+    const t = this.getAttribute("title") ?? "", s = this.$("footer")?.innerHTML ?? "", i = Array.from(this.childNodes).filter((r) => !(r instanceof HTMLElement && r.tagName === "FOOTER")).map((r) => r instanceof Element ? r.outerHTML : r.textContent).join("");
     this.innerHTML = `
       <div data-ry-target="backdrop" class="ry-modal__backdrop"></div>
       <div data-ry-target="dialog" class="ry-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="ry-modal-title-${this.id}">
@@ -297,8 +300,8 @@ class F extends u {
     this.state === "open" ? this.close() : this.open();
   }
 }
-customElements.define("ry-modal", F);
-class j extends u {
+customElements.define("ry-modal", j);
+class N extends u {
   setup() {
     this.#t(), this.$$('[data-ry-target="trigger"]').forEach((t) => {
       this.on(t, "click", this.#i);
@@ -360,10 +363,10 @@ class j extends u {
     return this.$$('[data-ry-target="trigger"]').findIndex((e) => e.getAttribute("aria-selected") === "true");
   }
 }
-customElements.define("ry-tabs", j);
+customElements.define("ry-tabs", N);
 customElements.get("ry-tab") || customElements.define("ry-tab", class extends HTMLElement {
 });
-class O extends u {
+class q extends u {
   setup() {
     this.#t();
     const t = this.$('[data-ry-target="trigger"]');
@@ -372,7 +375,7 @@ class O extends u {
     }), this.state = "closed";
   }
   #t() {
-    const t = this.$('[slot="trigger"], ry-button:first-of-type');
+    const t = this.$("ry-button:first-of-type");
     t && !this.$('[data-ry-target="trigger"]') && t.setAttribute("data-ry-target", "trigger");
     const e = this.$("ry-menu");
     e && !e.hasAttribute("data-ry-target") && (e.setAttribute("data-ry-target", "menu"), e.classList.add("ry-dropdown__menu"), e.setAttribute("role", "menu")), this.$$("ry-menu-item").forEach((s) => {
@@ -411,12 +414,12 @@ class O extends u {
     this.state === "open" ? this.close() : this.open();
   }
 }
-customElements.define("ry-dropdown", O);
+customElements.define("ry-dropdown", q);
 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 N extends u {
+class K 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);
   }
@@ -431,47 +434,17 @@ class N extends u {
     (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.click());
   };
 }
-customElements.define("ry-button", N);
-class q extends u {
-  static get observedAttributes() {
-    return ["value"];
-  }
-  get value() {
-    return this.getAttribute("value") ?? "";
-  }
-  set value(t) {
-    this.setAttribute("value", t);
-  }
-  setup() {
-    this.setAttribute("role", "group"), this.#e(), this.on(this, "click", this.#t);
-  }
-  attributeChangedCallback(t, e, s) {
-    t === "value" && e !== s && this.#e();
-  }
-  #t = (t) => {
-    const e = t.target.closest("ry-button, ry-toggle-button");
-    if (!e || !this.contains(e)) return;
-    const s = e.getAttribute("value");
-    s != null && this.value !== s && (this.value = s, this.emit("change", { value: s }));
-  };
-  #e() {
-    const t = this.value;
-    if (t)
-      for (const e of this.querySelectorAll("ry-button, ry-toggle-button"))
-        e.getAttribute("value") === t ? (e.setAttribute("pressed", ""), e.setAttribute("aria-pressed", "true")) : (e.removeAttribute("pressed"), e.removeAttribute("aria-pressed"));
-  }
-}
-customElements.define("ry-button-group", q);
-class K extends u {
+customElements.define("ry-button", K);
+class z extends u {
   #t = null;
   #e = !1;
   #i = 0;
   #s = 0;
   setup() {
     if (!this.hasAttribute("resizable")) return;
-    this.#b(), this.#t = document.createElement("div"), this.#t.setAttribute("data-ry-target", "handle"), this.#t.className = "ry-split__handle", this.#t.setAttribute("role", "separator"), this.#t.setAttribute("aria-orientation", "vertical"), this.#t.setAttribute("tabindex", "0");
+    this.#y(), this.#t = document.createElement("div"), this.#t.setAttribute("data-ry-target", "handle"), this.#t.className = "ry-split__handle", this.#t.setAttribute("role", "separator"), this.#t.setAttribute("aria-orientation", "vertical"), this.#t.setAttribute("tabindex", "0");
     const t = this.lastElementChild;
-    t && this.insertBefore(this.#t, t), this.on(this.#t, "mousedown", this.#c), this.on(this.#t, "touchstart", this.#n), this.on(this.#t, "keydown", this.#f), this.on(this.#t, "dblclick", this.#w);
+    t && this.insertBefore(this.#t, t), this.on(this.#t, "mousedown", this.#u), this.on(this.#t, "touchstart", this.#n), this.on(this.#t, "keydown", this.#f), this.on(this.#t, "dblclick", this.#A);
   }
   #r() {
     return this.lastElementChild;
@@ -484,50 +457,50 @@ class K extends u {
     const t = getComputedStyle(this).getPropertyValue("--ry-split-min-width").trim();
     return t ? parseFloat(t) : 100;
   }
-  #h() {
+  #l() {
     const t = getComputedStyle(this).getPropertyValue("--ry-split-max-width").trim();
     return t ? parseFloat(t) : this.getBoundingClientRect().width * 0.8;
   }
-  #l(t) {
-    const e = this.#o(), s = this.#h(), i = Math.round(Math.max(e, Math.min(s, t)));
+  #c(t) {
+    const e = this.#o(), s = this.#l(), i = Math.round(Math.max(e, Math.min(s, t)));
     this.style.setProperty("--ry-split-width", `${i}px`);
   }
-  #c = (t) => {
-    t.preventDefault(), this.#p(t.clientX);
-    const e = (i) => this.#d(i.clientX), s = () => {
-      document.removeEventListener("mousemove", e), document.removeEventListener("mouseup", s), this.#m();
+  #u = (t) => {
+    t.preventDefault(), this.#d(t.clientX);
+    const e = (i) => this.#h(i.clientX), s = () => {
+      document.removeEventListener("mousemove", e), document.removeEventListener("mouseup", s), this.#b();
     };
     document.addEventListener("mousemove", e), document.addEventListener("mouseup", s);
   };
   #n = (t) => {
     const e = t.touches[0];
     if (!e) return;
-    t.preventDefault(), this.#p(e.clientX);
+    t.preventDefault(), this.#d(e.clientX);
     const s = (r) => {
       const a = r.touches[0];
-      a && this.#d(a.clientX);
+      a && this.#h(a.clientX);
     }, i = () => {
-      document.removeEventListener("touchmove", s), document.removeEventListener("touchend", i), this.#m();
+      document.removeEventListener("touchmove", s), document.removeEventListener("touchend", i), this.#b();
     };
     document.addEventListener("touchmove", s, { passive: !1 }), document.addEventListener("touchend", i);
   };
-  #p(t) {
+  #d(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";
   }
-  #d(t) {
+  #h(t) {
     if (!this.#e) return;
     const e = this.#i - t;
-    this.#l(this.#s + e);
+    this.#c(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() });
+  #b() {
+    this.#e = !1, this.removeAttribute("data-ry-resizing"), document.body.style.cursor = "", document.body.style.userSelect = "", this.#p(), this.emit("resize", { width: this.#a() });
   }
   #f = (t) => {
     const e = t.shiftKey ? 50 : 10;
     let s = this.#a();
-    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());
+    t.key === "ArrowLeft" ? (t.preventDefault(), this.#c(s + e), this.#p()) : t.key === "ArrowRight" ? (t.preventDefault(), this.#c(s - e), this.#p()) : t.key === "Home" ? (t.preventDefault(), this.#c(this.#o()), this.#p()) : t.key === "End" && (t.preventDefault(), this.#c(this.#l()), this.#p());
   };
-  #w = () => {
+  #A = () => {
     this.style.removeProperty("--ry-split-width"), this.#v(), this.emit("resize", { width: this.#a() });
   };
   // Persistence
@@ -535,7 +508,7 @@ class K extends u {
     const t = this.getAttribute("persist");
     return t ? `ry-split:${t}` : null;
   }
-  #u() {
+  #p() {
     const t = this.#g();
     if (t)
       try {
@@ -543,7 +516,7 @@ class K extends u {
       } catch {
       }
   }
-  #b() {
+  #y() {
     const t = this.#g();
     if (t)
       try {
@@ -564,8 +537,8 @@ class K extends u {
       }
   }
 }
-customElements.define("ry-split", K);
-class z extends u {
+customElements.define("ry-split", z);
+class V extends u {
   #t = ["light", "dark"];
   #e = 0;
   setup() {
@@ -605,8 +578,8 @@ class z extends u {
     }
   }
 }
-customElements.define("ry-theme-toggle", z);
-class V extends u {
+customElements.define("ry-theme-toggle", V);
+class U 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));
   }
@@ -619,8 +592,8 @@ class V extends u {
     (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.click());
   };
 }
-customElements.define("ry-card", V);
-class U extends u {
+customElements.define("ry-card", U);
+class W extends u {
   setup() {
     this.#t();
     const t = this.$("[close]");
@@ -640,8 +613,8 @@ class U extends u {
     }, 200), this.emit("close");
   }
 }
-customElements.define("ry-alert", U);
-class W extends u {
+customElements.define("ry-alert", W);
+class Y extends u {
   static get observedAttributes() {
     return ["label", "error", "hint"];
   }
@@ -694,9 +667,9 @@ class W extends u {
     e && (e.textContent = t ?? "");
   }
 }
-customElements.define("ry-field", W);
-let Y = 0;
-class X extends u {
+customElements.define("ry-field", Y);
+let X = 0;
+class G extends u {
   #t = null;
   static observedAttributes = ["checked", "disabled"];
   setup() {
@@ -704,7 +677,7 @@ class X extends u {
   }
   #e() {
     if (this.$('[data-ry-target="track"]')) return;
-    const t = `ry-switch-${++Y}`, e = this.getAttribute("name") ?? "", s = this.hasAttribute("checked"), i = this.hasAttribute("disabled"), r = this.textContent?.trim() ?? "";
+    const t = `ry-switch-${++X}`, 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
@@ -749,16 +722,16 @@ class X extends u {
     this.#t && (this.#t.value = t);
   }
 }
-customElements.define("ry-switch", X);
-let G = 0;
-class J extends u {
+customElements.define("ry-switch", G);
+let J = 0;
+class Z extends u {
   #t = null;
   #e = null;
   #i = null;
   setup() {
-    this.#i = `ry-tooltip-${++G}`, this.#s();
+    this.#i = `ry-tooltip-${++J}`, 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.#h);
+    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);
   }
   #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);
@@ -775,15 +748,15 @@ class J extends u {
   #o = () => {
     this.#t && (clearTimeout(this.#t), this.#t = null), this.state = "closed";
   };
-  #h = (t) => {
+  #l = (t) => {
     t.key === "Escape" && this.state === "open" && this.#o();
   };
   teardown() {
     this.#t && clearTimeout(this.#t);
   }
 }
-customElements.define("ry-tooltip", J);
-class Z extends u {
+customElements.define("ry-tooltip", Z);
+class Q extends u {
   #t = null;
   #e = 0;
   setup() {
@@ -828,38 +801,38 @@ class Z extends u {
     this.state === "open" ? this.close() : this.open();
   }
 }
-customElements.define("ry-drawer", Z);
-const Q = 4e3;
-class f extends u {
+customElements.define("ry-drawer", Q);
+const tt = 4e3;
+class m extends u {
   #t = null;
   static observedAttributes = ["variant", "duration"];
   // Static container for programmatic toasts
   static #e = null;
   static #i() {
-    return f.#e || (f.#e = document.createElement("div"), f.#e.setAttribute("data-ry-target", "toast-container"), f.#e.className = "ry-toast-container", document.body.appendChild(f.#e)), f.#e;
+    return m.#e || (m.#e = document.createElement("div"), m.#e.setAttribute("data-ry-target", "toast-container"), m.#e.className = "ry-toast-container", document.body.appendChild(m.#e)), m.#e;
   }
   // Static API
   static show(t) {
     const e = document.createElement("ry-toast");
-    return e.textContent = t.message, t.variant && e.setAttribute("variant", t.variant), t.duration !== void 0 && e.setAttribute("duration", String(t.duration)), f.#i().appendChild(e), e;
+    return e.textContent = t.message, t.variant && e.setAttribute("variant", t.variant), t.duration !== void 0 && e.setAttribute("duration", String(t.duration)), m.#i().appendChild(e), e;
   }
   static success(t, e) {
-    return f.show({ message: t, variant: "success", duration: e });
+    return m.show({ message: t, variant: "success", duration: e });
   }
   static error(t, e) {
-    return f.show({ message: t, variant: "error", duration: e });
+    return m.show({ message: t, variant: "error", duration: e });
   }
   static info(t, e) {
-    return f.show({ message: t, variant: "info", duration: e });
+    return m.show({ message: t, variant: "info", duration: e });
   }
   static warning(t, e) {
-    return f.show({ message: t, variant: "warning", duration: e });
+    return m.show({ message: t, variant: "warning", duration: e });
   }
   setup() {
     this.#s();
     const t = this.$("[close]");
     t && this.on(t, "click", () => this.dismiss());
-    const e = parseInt(this.getAttribute("duration") ?? String(Q), 10);
+    const e = parseInt(this.getAttribute("duration") ?? String(tt), 10);
     e > 0 && (this.#t = setTimeout(() => this.dismiss(), e)), requestAnimationFrame(() => {
       this.state = "visible";
     });
@@ -891,8 +864,8 @@ class f extends u {
     this.#t && clearTimeout(this.#t);
   }
 }
-customElements.define("ry-toast", f);
-const $ = {
+customElements.define("ry-toast", m);
+const w = {
   // Close / X
   close: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg>',
   // Chevron down
@@ -964,20 +937,20 @@ const $ = {
   // 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 $[h] ?? "";
+function g(h) {
+  return w[h] ?? "";
 }
-function jt(h, t) {
-  $[h] = t;
+function Ut(h, t) {
+  w[h] = t;
 }
-function Ot(h) {
-  Object.assign($, h);
+function Wt(h) {
+  Object.assign(w, h);
 }
-function Nt() {
-  return Object.keys($);
+function Yt() {
+  return Object.keys(w);
 }
-let tt = 0;
-class et extends u {
+let et = 0;
+class st extends u {
   #t = null;
   #e = -1;
   #i = "";
@@ -990,12 +963,12 @@ class et extends u {
   }
   static observedAttributes = ["value", "disabled"];
   setup() {
-    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");
+    this.#t = `ry-select-${++et}`, this.#o(), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.on(this, "click", this.#l), this.on(this, "keydown", this.#c), this.on(document, "click", this.#u), 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)
         for (const e of t.split(",").map((s) => s.trim()).filter(Boolean))
-          this.#u(e);
+          this.#p(e);
       else
         this.value = t;
   }
@@ -1013,7 +986,7 @@ class et extends u {
            data-value="${o.value}"
            ${o.disabled ? "data-disabled" : ""}
            aria-disabled="${o.disabled}">
-        ${r ? `<span data-ry-target="check" class="ry-select__check">${p("check")}</span>` : ""}
+        ${r ? `<span data-ry-target="check" class="ry-select__check">${g("check")}</span>` : ""}
         <span class="ry-select__option-label">${o.label}</span>
       </div>
     `).join("");
@@ -1023,7 +996,7 @@ class et extends u {
         <div data-ry-target="trigger" class="ry-select__trigger ry-select__trigger--multi" aria-haspopup="listbox" aria-expanded="false">
           <div data-ry-target="tags" class="ry-select__tags"></div>
           <span data-ry-target="value" class="ry-select__value">${e}</span>
-          ${o ? `<button data-ry-target="clear" class="ry-select__clear" aria-label="Clear all" type="button">${p("close")}</button>` : ""}
+          ${o ? `<button data-ry-target="clear" class="ry-select__clear" aria-label="Clear all" type="button">${g("close")}</button>` : ""}
           <span data-ry-target="arrow" class="ry-select__arrow">▾</span>
         </div>
         <div data-ry-target="dropdown" class="ry-select__dropdown" role="listbox" id="${this.#t}-listbox" tabindex="-1" aria-multiselectable="true">
@@ -1053,20 +1026,20 @@ class et extends u {
       `;
     this._options = t;
   }
-  #h = (t) => {
+  #l = (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")) {
       if (this.#a) {
         const r = s.dataset.value ?? "";
-        this.#u(r);
+        this.#p(r);
       } else
-        this.#k(s), this.close();
+        this.#w(s), this.close();
       return;
     }
     e.closest('[data-ry-target="trigger"]') && this.toggle();
   };
-  #l = (t) => {
+  #c = (t) => {
     if (this.hasAttribute("disabled")) return;
     const e = this.state === "open";
     switch (t.key) {
@@ -1077,9 +1050,9 @@ class et extends u {
           if (i)
             if (this.#a) {
               const r = i.dataset.value ?? "";
-              this.#u(r);
+              this.#p(r);
             } else
-              this.#k(i), this.close();
+              this.#w(i), this.close();
         } else
           this.toggle();
         break;
@@ -1087,13 +1060,13 @@ class et extends u {
         e && (t.preventDefault(), this.close());
         break;
       case "ArrowDown":
-        t.preventDefault(), e ? this.#m() : this.open();
+        t.preventDefault(), e ? this.#b() : this.open();
         break;
       case "ArrowUp":
         t.preventDefault(), e && this.#f();
         break;
       case "Home":
-        e && (t.preventDefault(), this.#w());
+        e && (t.preventDefault(), this.#A());
         break;
       case "End":
         e && (t.preventDefault(), this.#g());
@@ -1101,40 +1074,40 @@ class et extends u {
       case "Backspace":
         if (this.#a && this.#r.size > 0) {
           const s = [...this.#r], i = s[s.length - 1];
-          i && this.#u(i);
+          i && this.#p(i);
         }
         break;
       default:
-        t.key.length === 1 && !t.ctrlKey && !t.metaKey && this.#p(t.key);
+        t.key.length === 1 && !t.ctrlKey && !t.metaKey && this.#d(t.key);
         break;
     }
   };
-  #c = (t) => {
+  #u = (t) => {
     const e = t.target;
     !this.contains(e) && this.state === "open" && this.close();
   };
   #n = (t) => {
     const e = t.detail.value;
-    this.#r.has(e) && this.#u(e);
+    this.#r.has(e) && this.#p(e);
   };
-  #p(t) {
+  #d(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.#d(s);
+        this.#h(s);
       else if (!this.#a) {
         const i = e[s];
-        i && this.#k(i);
+        i && this.#w(i);
       }
     }
     this.#s = setTimeout(() => {
       this.#i = "";
     }, 500);
   }
-  #d(t) {
+  #h(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) => {
@@ -1146,23 +1119,23 @@ class et extends u {
     const i = this.$('[data-ry-target="trigger"]');
     i && i.setAttribute("aria-activedescendant", s.id);
   }
-  #m() {
+  #b() {
     const t = this.$$('[data-ry-target="option"]:not([data-disabled])'), e = Math.min(this.#e + 1, t.length - 1);
-    this.#d(e);
+    this.#h(e);
   }
   #f() {
     const t = Math.max(this.#e - 1, 0);
-    this.#d(t);
+    this.#h(t);
   }
-  #w() {
-    this.#d(0);
+  #A() {
+    this.#h(0);
   }
   #g() {
     const t = this.$$('[data-ry-target="option"]:not([data-disabled])');
-    this.#d(t.length - 1);
+    this.#h(t.length - 1);
   }
   // --- Multi-select methods ---
-  #u(t) {
+  #p(t) {
     const e = this.getAttribute("max-selections");
     if (this.#r.has(t))
       this.#r.delete(t);
@@ -1170,9 +1143,9 @@ class et extends u {
       if (e && this.#r.size >= parseInt(e, 10)) return;
       this.#r.add(t);
     }
-    this.#b(), this.#v(), this.#y(), this.setAttribute("value", [...this.#r].join(",")), this.emit("change", { value: this.value, label: "" });
+    this.#y(), this.#v(), this.#m(), this.setAttribute("value", [...this.#r].join(",")), this.emit("change", { value: this.value, label: "" });
   }
-  #b() {
+  #y() {
     const t = this.$('[data-ry-target="tags"]'), e = this.$('[data-ry-target="value"]');
     if (t) {
       t.innerHTML = "";
@@ -1191,17 +1164,17 @@ class et extends u {
       for (const e of t.options)
         e.selected = this.#r.has(e.value);
   }
-  #y() {
+  #m() {
     this.$$('[data-ry-target="option"]').forEach((t) => {
       const e = t.dataset.value ?? "";
       this.#r.has(e) ? t.setAttribute("aria-selected", "true") : t.removeAttribute("aria-selected");
     });
   }
   #M() {
-    this.#r.clear(), this.#b(), this.#v(), this.#y(), this.setAttribute("value", ""), this.emit("change", { value: "", label: "" });
+    this.#r.clear(), this.#y(), this.#v(), this.#m(), this.setAttribute("value", ""), this.emit("change", { value: "", label: "" });
   }
   // --- Single-select method ---
-  #k(t) {
+  #w(t) {
     const e = t.dataset.value ?? "", s = t.textContent?.trim() ?? "", i = this.$('[data-ry-target="value"]');
     i && (i.textContent = s, i.setAttribute("data-selected", ""));
     const r = this.$('[data-ry-target="native"]');
@@ -1213,19 +1186,19 @@ class et 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)
-      this.#d(0);
+    if (t && t.setAttribute("aria-expanded", "true"), this.#H(), this.#a)
+      this.#h(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.#d(i);
+        i >= 0 && this.#h(i);
       } else
-        this.#d(0);
+        this.#h(0);
     }
     this.emit("open");
   }
-  #I() {
+  #H() {
     const t = this.$('[data-ry-target="dropdown"]');
     if (!t) return;
     this.removeAttribute("data-ry-position");
@@ -1251,10 +1224,10 @@ class et extends u {
       this.#r.clear();
       for (const e of t.split(",").map((s) => s.trim()).filter(Boolean))
         this.#r.add(e);
-      this.#b(), this.#v(), this.#y(), this.setAttribute("value", t);
+      this.#y(), this.#v(), this.#m(), this.setAttribute("value", t);
     } else {
       const e = this.$(`[data-ry-target="option"][data-value="${t}"]`);
-      e && this.#k(e);
+      e && this.#w(e);
     }
   }
   get values() {
@@ -1264,20 +1237,20 @@ class et extends u {
     this.#s && clearTimeout(this.#s);
   }
 }
-class st extends HTMLElement {
+class it extends HTMLElement {
 }
-customElements.define("ry-option", st);
-customElements.define("ry-select", et);
-let it = 0;
-class rt extends u {
+customElements.define("ry-option", it);
+customElements.define("ry-select", st);
+let rt = 0;
+class at extends u {
   #t = null;
   #e = -1;
   #i = [];
   static observedAttributes = ["value", "disabled"];
   setup() {
-    this.#t = `ry-combobox-${++it}`, this.#s();
+    this.#t = `ry-combobox-${++rt}`, 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.#h), this.on(this, "mouseover", this.#l), 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.#l), this.on(this, "mouseover", this.#c), this.on(document, "click", this.#u), this.hasAttribute("data-ry-state") || (this.state = "closed");
     const e = this.getAttribute("value");
     e && (this.value = e);
   }
@@ -1353,7 +1326,7 @@ class rt 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.#p(s);
+      this.#d(s);
       return;
     }
     if (e.closest('[data-ry-target="arrow"]')) {
@@ -1361,12 +1334,12 @@ class rt extends u {
       return;
     }
   };
-  #h = (t) => {
+  #l = (t) => {
     if (this.hasAttribute("disabled")) return;
     const e = this.state === "open";
     switch (t.key) {
       case "ArrowDown":
-        t.preventDefault(), e ? this.#m() : this.open();
+        t.preventDefault(), e ? this.#b() : this.open();
         break;
       case "ArrowUp":
         t.preventDefault(), e && this.#f();
@@ -1377,7 +1350,7 @@ class rt extends u {
           const i = this.$$(
             '[data-ry-target="option"]:not([hidden]):not([data-disabled])'
           )[this.#e];
-          i && this.#p(i);
+          i && this.#d(i);
         }
         break;
       case "Escape":
@@ -1388,15 +1361,15 @@ class rt extends u {
         break;
     }
   };
-  #l = (t) => {
+  #c = (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);
+    r >= 0 && this.#h(r);
   };
-  #c = (t) => {
+  #u = (t) => {
     const e = t.target;
     !this.contains(e) && this.state === "open" && this.close();
   };
@@ -1405,7 +1378,7 @@ class rt extends u {
     const t = this.$('[data-ry-target="input"]');
     t && t.value && t.select(), this.open();
   };
-  #p(t) {
+  #d(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"]');
@@ -1413,7 +1386,7 @@ class rt extends u {
       a.removeAttribute("aria-selected");
     }), t.setAttribute("aria-selected", "true"), this.close(), this.emit("change", { value: e, label: s });
   }
-  #d(t) {
+  #h(t) {
     const e = this.$$(
       '[data-ry-target="option"]:not([hidden]):not([data-disabled])'
     );
@@ -1427,15 +1400,15 @@ class rt extends u {
     const i = this.$('[data-ry-target="input-wrapper"]');
     i && i.setAttribute("aria-activedescendant", s.id);
   }
-  #m() {
+  #b() {
     const t = this.$$('[data-ry-target="option"]:not([hidden]):not([data-disabled])'), e = Math.min(this.#e + 1, t.length - 1);
-    this.#d(e);
+    this.#h(e);
   }
   #f() {
     const t = Math.max(this.#e - 1, 0);
-    this.#d(t);
+    this.#h(t);
   }
-  #w() {
+  #A() {
     const t = this.$('[data-ry-target="dropdown"]');
     if (!t) return;
     this.removeAttribute("data-ry-position");
@@ -1450,13 +1423,13 @@ class rt extends u {
       i.hasAttribute("data-disabled") || i.removeAttribute("hidden");
     });
     const e = this.$('[data-ry-target="empty"]');
-    e && e.setAttribute("hidden", ""), this.#w();
+    e && e.setAttribute("hidden", ""), this.#A();
     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.#d(r);
+      r >= 0 && this.#h(r);
     }
     this.emit("open");
   }
@@ -1476,11 +1449,11 @@ class rt extends u {
   }
   set value(t) {
     const e = this.$(`[data-ry-target="option"][data-value="${t}"]`);
-    e && this.#p(e);
+    e && this.#d(e);
   }
 }
-customElements.define("ry-combobox", rt);
-class at extends u {
+customElements.define("ry-combobox", at);
+class nt extends u {
   #t = "";
   static get observedAttributes() {
     return ["language", "title", "line-numbers"];
@@ -1498,7 +1471,7 @@ class at extends u {
       <div data-ry-target="header" class="ry-code__header">
         <span data-ry-target="title" class="ry-code__title">${e}</span>
         <button data-ry-target="copy" class="ry-code__copy" type="button" aria-label="Copy code">
-          ${p("copy")}
+          ${g("copy")}
         </button>
       </div>
       <div data-ry-target="content" class="ry-code__content">
@@ -1510,8 +1483,8 @@ class at extends u {
     const t = this.$('[data-ry-target="copy"]');
     if (t)
       try {
-        await navigator.clipboard.writeText(this.#t), t.innerHTML = p("check"), t.classList.add("ry-code__copy--success"), this.emit("copy", { code: this.#t }), setTimeout(() => {
-          t.innerHTML = p("copy"), t.classList.remove("ry-code__copy--success");
+        await navigator.clipboard.writeText(this.#t), t.innerHTML = g("check"), t.classList.add("ry-code__copy--success"), this.emit("copy", { code: this.#t }), setTimeout(() => {
+          t.innerHTML = g("copy"), t.classList.remove("ry-code__copy--success");
         }, 2e3);
       } catch {
         this.emit("copy-error");
@@ -1527,9 +1500,9 @@ class at extends u {
       case "html":
         return this.#o(t);
       case "json":
-        return this.#h(t);
+        return this.#l(t);
       default:
-        return this.#c(t);
+        return this.#u(t);
     }
   }
   #r(t) {
@@ -1537,9 +1510,9 @@ class at extends u {
     let s = t;
     for (; s.length > 0; ) {
       if (s.startsWith("/*")) {
-        const b = s.indexOf("*/");
-        if (b !== -1) {
-          e.push({ type: "comment", value: s.slice(0, b + 2) }), s = s.slice(b + 2);
+        const y = s.indexOf("*/");
+        if (y !== -1) {
+          e.push({ type: "comment", value: s.slice(0, y + 2) }), s = s.slice(y + 2);
           continue;
         }
       }
@@ -1583,16 +1556,16 @@ class at extends u {
         e.push({ type: "text", value: d[1] }), s = s.slice(d[1].length);
         continue;
       }
-      const g = s.match(/^([\w-]+)/);
-      if (g?.[1]) {
-        const b = g[1];
-        ["inherit", "initial", "unset", "none", "auto", "transparent", "solid", "dashed", "dotted", "flex", "grid", "block", "inline", "inline-block", "absolute", "relative", "fixed", "sticky"].includes(b) ? e.push({ type: "keyword", value: b }) : e.push({ type: "value", value: b }), s = s.slice(b.length);
+      const p = s.match(/^([\w-]+)/);
+      if (p?.[1]) {
+        const y = p[1];
+        ["inherit", "initial", "unset", "none", "auto", "transparent", "solid", "dashed", "dotted", "flex", "grid", "block", "inline", "inline-block", "absolute", "relative", "fixed", "sticky"].includes(y) ? e.push({ type: "keyword", value: y }) : e.push({ type: "value", value: y }), s = s.slice(y.length);
         continue;
       }
-      const y = s[0];
-      y && e.push({ type: "text", value: y }), s = s.slice(1);
+      const f = s[0];
+      f && e.push({ type: "text", value: f }), s = s.slice(1);
     }
-    return e.map((i) => this.#l(i)).join("");
+    return e.map((i) => this.#c(i)).join("");
   }
   #a(t) {
     const e = [];
@@ -1646,7 +1619,7 @@ class at extends u {
       const c = s[0];
       c && e.push({ type: "text", value: c }), s = s.slice(1);
     }
-    return e.map((r) => this.#l(r)).join("");
+    return e.map((r) => this.#c(r)).join("");
   }
   #o(t) {
     const e = [];
@@ -1692,9 +1665,9 @@ class at extends u {
       const l = s[0];
       l && e.push({ type: "text", value: l }), s = s.slice(1);
     }
-    return e.map((i) => this.#l(i)).join("");
+    return e.map((i) => this.#c(i)).join("");
   }
-  #h(t) {
+  #l(t) {
     const e = [];
     let s = t;
     for (; s.length > 0; ) {
@@ -1726,10 +1699,10 @@ class at extends u {
       const l = s[0];
       l && e.push({ type: "text", value: l }), s = s.slice(1);
     }
-    return e.map((i) => this.#l(i)).join("");
+    return e.map((i) => this.#c(i)).join("");
   }
-  #l(t) {
-    const e = this.#c(t.value);
+  #c(t) {
+    const e = this.#u(t.value);
     switch (t.type) {
       case "keyword":
         return `<span class="ry-code__keyword">${e}</span>`;
@@ -1757,7 +1730,7 @@ class at extends u {
         return e;
     }
   }
-  #c(t) {
+  #u(t) {
     return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
   }
   #n(t) {
@@ -1779,12 +1752,12 @@ class at extends u {
     this.#t = t, this.#e();
   }
 }
-customElements.define("ry-code", at);
-class nt extends u {
+customElements.define("ry-code", nt);
+class ot extends u {
   setup() {
     const t = this.$("template");
     if (!t) return;
-    const e = this.$('script[slot="js"]'), s = e ? this.#e(e.textContent ?? "") : null, i = this.#e(t.innerHTML), r = M(i), a = this.hasAttribute("stacked");
+    const e = this.$('script[slot="js"]'), s = e ? this.#e(e.textContent ?? "") : null, i = this.#e(t.innerHTML), r = C(i), a = this.hasAttribute("stacked");
     this.innerHTML = `
       <div data-ry-target="preview" class="ry-example__preview"></div>
       <div data-ry-target="code" class="ry-example__code"></div>
@@ -1824,8 +1797,8 @@ class nt extends u {
 `).trim();
   }
 }
-customElements.define("ry-example", nt);
-class ot extends u {
+customElements.define("ry-example", ot);
+class ht extends u {
   static get observedAttributes() {
     return ["name", "size", "label"];
   }
@@ -1836,7 +1809,7 @@ class ot extends u {
     e !== s && this.hasAttribute("data-ry-initialized") && this.#t();
   }
   #t() {
-    const t = this.getAttribute("name") ?? "", e = this.getAttribute("size") ?? "24", s = this.getAttribute("label"), i = p(t);
+    const t = this.getAttribute("name") ?? "", e = this.getAttribute("size") ?? "24", s = this.getAttribute("label"), i = g(t);
     if (!i) {
       this.innerHTML = "";
       return;
@@ -1858,24 +1831,24 @@ class ot extends u {
     this.setAttribute("size", String(t));
   }
 }
-customElements.define("ry-icon", ot);
-const ht = ["form", "section", "fieldset", "ry-section"], m = /* @__PURE__ */ new Map(), E = /* @__PURE__ */ new Set();
-function lt(h) {
+customElements.define("ry-icon", ht);
+const lt = ["form", "section", "fieldset", "ry-section"], v = /* @__PURE__ */ new Map(), S = /* @__PURE__ */ new Set();
+function ct(h) {
   let t = h.parentElement;
   for (; t; ) {
-    if (ht.some((e) => t.matches(e)))
+    if (lt.some((e) => t.matches(e)))
       return t;
     t = t.parentElement;
   }
   return null;
 }
-function ct(h) {
-  if (E.has(h)) return;
-  const t = m.get(h);
+function dt(h) {
+  if (S.has(h)) return;
+  const t = v.get(h);
   if (!t || t.size < 2) return;
   const e = /* @__PURE__ */ new Map();
   for (const s of t) {
-    const i = lt(s), r = e.get(i) ?? [];
+    const i = ct(s), r = e.get(i) ?? [];
     r.push(s), e.set(i, r);
   }
   if (e.size > 1) {
@@ -1888,10 +1861,10 @@ function ct(h) {
         s.push("(no container)");
     console.warn(
       `ry-toggle-button: Buttons with name="${h}" span multiple containers (${s.join(", ")}). Intentional?`
-    ), E.add(h);
+    ), S.add(h);
   }
 }
-class dt extends u {
+class ut extends u {
   static observedAttributes = ["pressed", "disabled", "name", "value"];
   #t = !1;
   setup() {
@@ -1902,12 +1875,12 @@ class dt 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(() => ct(t)));
+    t && (v.has(t) || v.set(t, /* @__PURE__ */ new Set()), v.get(t).add(this), this.#t = !0, queueMicrotask(() => dt(t)));
   }
   #i() {
     if (!this.#t) return;
     const t = this.name;
-    t && m.has(t) && (m.get(t).delete(this), m.get(t).size === 0 && (m.delete(t), E.delete(t))), this.#t = !1;
+    t && v.has(t) && (v.get(t).delete(this), v.get(t).size === 0 && (v.delete(t), S.delete(t))), this.#t = !1;
   }
   #s = (t) => {
     if (this.disabled) {
@@ -1922,7 +1895,7 @@ class dt extends u {
   #a() {
     const t = this.name;
     if (!t) return;
-    const e = m.get(t);
+    const e = v.get(t);
     if (e)
       for (const s of e)
         s !== this && s.pressed && (s.pressed = !1);
@@ -1963,8 +1936,8 @@ class dt extends u {
     this.setAttribute("icon", t);
   }
 }
-customElements.define("ry-toggle-button", dt);
-class ut extends u {
+customElements.define("ry-toggle-button", ut);
+class pt extends u {
   #t = !1;
   #e = null;
   #i = null;
@@ -1973,7 +1946,7 @@ class ut extends u {
   #a = /* @__PURE__ */ new Map();
   static observedAttributes = ["min", "max", "step", "value", "start", "end", "disabled"];
   setup() {
-    this.#o(), this.#l(), this.#b();
+    this.#o(), this.#c(), this.#y();
   }
   #o() {
     const t = this.hasAttribute("range"), e = this.hasAttribute("labeled"), s = this.hasAttribute("tooltip");
@@ -1993,9 +1966,9 @@ class ut 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.#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"]')));
+      `, 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"]')));
   }
-  #h() {
+  #l() {
     const t = this.min, e = this.max, s = this.getAttribute("labels")?.split(","), i = this.getAttribute("label-type") || "number";
     let r = [];
     if (s)
@@ -2016,34 +1989,34 @@ class ut extends u {
       </div>
     `;
   }
-  #l() {
-    this.#i && this.on(this.#i, "pointerdown", this.#c);
+  #c() {
+    this.#i && this.on(this.#i, "pointerdown", this.#u);
     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.#p), this.on(document, "pointerup", this.#d);
+      this.on(e, "pointerdown", (s) => this.#n(s, t)), this.on(e, "keydown", (s) => this.#b(s, t));
+    this.on(document, "pointermove", this.#d), this.on(document, "pointerup", this.#h);
   }
-  #c = (t) => {
+  #u = (t) => {
     if (this.disabled) return;
-    const e = this.#w(t);
+    const e = this.#A(t);
     if (this.hasAttribute("range")) {
       const i = Math.abs(e - this.start), r = Math.abs(e - this.end);
       i < r ? (this.start = e, this.#e = "start") : (this.end = e, this.#e = "end");
     } else
       this.value = e, this.#e = "value";
-    this.#t = !0, this.#b(), this.#y();
+    this.#t = !0, this.#y(), this.#m();
   };
   #n = (t, e) => {
     this.disabled || (t.stopPropagation(), this.#t = !0, this.#e = e, t.target.setPointerCapture(t.pointerId));
   };
-  #p = (t) => {
+  #d = (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();
+    const e = this.#A(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.#y(), this.#m();
   };
-  #d = () => {
+  #h = () => {
     this.#t && (this.#t = !1, this.#e = null, this.#M());
   };
-  #m = (t, e) => {
+  #b = (t, e) => {
     if (this.disabled) return;
     const s = this.step || 1, i = (this.max - this.min) / 10;
     let r = 0;
@@ -2072,13 +2045,13 @@ class ut extends u {
         return;
     }
     t.preventDefault();
-    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();
+    const a = this.#p(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.#y(), this.#m(), this.#M();
   };
   #f(t) {
     return t === "start" ? this.start : t === "end" ? this.end : this.value;
   }
-  #w(t) {
+  #A(t) {
     if (!this.#i) return this.min;
     const e = this.#i.getBoundingClientRect(), s = this.hasAttribute("vertical"), i = this.hasAttribute("reversed");
     let r;
@@ -2088,14 +2061,14 @@ class ut extends u {
   }
   #g(t) {
     const e = this.step;
-    if (e === 0) return this.#u(t);
+    if (e === 0) return this.#p(t);
     const s = Math.round((t - this.min) / e) * e + this.min;
-    return this.#u(s);
+    return this.#p(s);
   }
-  #u(t) {
+  #p(t) {
     return Math.max(this.min, Math.min(this.max, t));
   }
-  #b() {
+  #y() {
     const t = this.hasAttribute("range"), e = this.hasAttribute("vertical"), s = this.hasAttribute("reversed"), i = (r) => {
       let a = (r - this.min) / (this.max - this.min) * 100;
       return s && (a = 100 - a), a;
@@ -2119,7 +2092,7 @@ class ut extends u {
       s.textContent = e.toFixed(i);
     }
   }
-  #y() {
+  #m() {
     this.hasAttribute("range") ? this.emit("input", { start: this.start, end: this.end }) : this.emit("input", { value: this.value });
   }
   #M() {
@@ -2148,19 +2121,19 @@ class ut extends u {
     return parseFloat(this.getAttribute("value") ?? String(this.min));
   }
   set value(t) {
-    this.setAttribute("value", String(this.#u(t)));
+    this.setAttribute("value", String(this.#p(t)));
   }
   get start() {
     return parseFloat(this.getAttribute("start") ?? String(this.min));
   }
   set start(t) {
-    this.setAttribute("start", String(this.#u(t)));
+    this.setAttribute("start", String(this.#p(t)));
   }
   get end() {
     return parseFloat(this.getAttribute("end") ?? String(this.max));
   }
   set end(t) {
-    this.setAttribute("end", String(this.#u(t)));
+    this.setAttribute("end", String(this.#p(t)));
   }
   get disabled() {
     return this.hasAttribute("disabled");
@@ -2169,8 +2142,8 @@ class ut extends u {
     t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
   }
 }
-customElements.define("ry-slider", ut);
-class pt extends u {
+customElements.define("ry-slider", pt);
+class gt extends u {
   #t = !1;
   #e = 0;
   #i = 0;
@@ -2179,7 +2152,7 @@ class pt extends u {
   #a = null;
   static observedAttributes = ["min", "max", "step", "value", "disabled", "label", "labels", "description"];
   setup() {
-    this.#o(), this.#h(), this.#u();
+    this.#o(), this.#l(), this.#p();
   }
   #o() {
     const t = this.getAttribute("label"), e = this.getAttribute("description"), s = e ? ` title="${e}"` : "";
@@ -2193,24 +2166,24 @@ class pt 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"]');
   }
-  #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));
+  #l() {
+    this.#s && (this.on(this.#s, "mousedown", this.#c), this.on(document, "mousemove", this.#u), this.on(document, "mouseup", this.#n), this.on(this.#s, "touchstart", this.#d), this.on(document, "touchmove", this.#h), this.on(document, "touchend", this.#b), this.on(this.#s, "wheel", this.#f), this.on(this, "keydown", this.#A));
   }
-  #l = (t) => {
+  #c = (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) => {
+  #u = (t) => {
     if (!this.#t) return;
     const e = this.#e - t.clientY, s = (this.max - this.min) / 100;
     this.#g(this.#i + e * s);
   };
   #n = () => {
-    this.#t && (this.#t = !1, this.#s?.classList.remove("ry-knob__ring--dragging"), this.removeAttribute("data-dragging"), this.#y());
+    this.#t && (this.#t = !1, this.#s?.classList.remove("ry-knob__ring--dragging"), this.removeAttribute("data-dragging"), this.#m());
   };
-  #p = (t) => {
+  #d = (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", ""));
   };
-  #d = (t) => {
+  #h = (t) => {
     if (!this.#t) return;
     t.preventDefault();
     const e = t.touches[0];
@@ -2218,16 +2191,16 @@ class pt extends u {
     const s = this.#e - e.clientY, i = (this.max - this.min) / 100;
     this.#g(this.#i + s * i);
   };
-  #m = () => {
-    this.#t && (this.#t = !1, this.#s?.classList.remove("ry-knob__ring--dragging"), this.removeAttribute("data-dragging"), this.#y());
+  #b = () => {
+    this.#t && (this.#t = !1, this.#s?.classList.remove("ry-knob__ring--dragging"), this.removeAttribute("data-dragging"), this.#m());
   };
   #f = (t) => {
     if (this.disabled) return;
     t.preventDefault();
     const e = this.step || (this.max - this.min) / 50, s = t.deltaY < 0 ? e : -e;
-    this.#g(this.value + s), this.#y();
+    this.#g(this.value + s), this.#m();
   };
-  #w = (t) => {
+  #A = (t) => {
     if (this.disabled) return;
     const e = this.step || 1, s = (this.max - this.min) / 10;
     let i = 0;
@@ -2247,26 +2220,26 @@ class pt extends u {
         i = -s;
         break;
       case "Home":
-        this.#g(this.min), this.#y();
+        this.#g(this.min), this.#m();
         return;
       case "End":
-        this.#g(this.max), this.#y();
+        this.#g(this.max), this.#m();
         return;
       default:
         return;
     }
-    t.preventDefault(), this.#g(this.value + i), this.#y();
+    t.preventDefault(), this.#g(this.value + i), this.#m();
   };
   #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.#u(), 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.#p(), this.#v();
   }
-  #u() {
+  #p() {
     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));
+    this.#s && (this.#s.style.setProperty("--knob-rotation", `${e}deg`), this.#s.style.setProperty("--knob-percent", String(t))), this.#a && (this.#a.textContent = this.#y(this.value)), this.setAttribute("aria-valuenow", String(this.value)), this.setAttribute("aria-valuemin", String(this.min)), this.setAttribute("aria-valuemax", String(this.max));
   }
-  #b(t) {
+  #y(t) {
     const e = this.getAttribute("labels");
     if (e) {
       const i = e.split(","), r = Math.round(t);
@@ -2278,12 +2251,12 @@ class pt extends u {
     const t = (this.value - this.min) / (this.max - this.min);
     this.emit("input", { value: this.value, percent: t });
   }
-  #y() {
+  #m() {
     const t = (this.value - this.min) / (this.max - this.min);
     this.emit("change", { value: this.value, percent: t });
   }
   attributeChangedCallback(t, e, s) {
-    e !== s && t === "value" && this.#s && this.#u();
+    e !== s && t === "value" && this.#s && this.#p();
   }
   // --- Public API ---
   get min() {
@@ -2317,9 +2290,9 @@ class pt extends u {
     t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
   }
 }
-customElements.define("ry-knob", pt);
-const S = 15, T = 3;
-class gt extends u {
+customElements.define("ry-knob", gt);
+const L = 15, I = 3;
+class ft extends u {
   #t = null;
   #e = null;
   #i = null;
@@ -2327,49 +2300,49 @@ class gt extends u {
   #r = null;
   #a = !1;
   #o = 0;
-  #h = 0;
   #l = 0;
-  #c = !1;
+  #c = 0;
+  #u = !1;
   #n = null;
-  #p = null;
+  #d = null;
   static observedAttributes = ["min", "max", "step", "value", "disabled", "arrows", "icons", "drag", "editable", "wrap", "label", "prefix", "suffix"];
   setup() {
-    this.#d(), this.#f(), this.#w(), this.#A();
+    this.#h(), this.#f(), this.#A(), this.#$();
   }
-  #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 = `
+  #h() {
+    const t = this.getAttribute("arrows") ?? "both", e = this.getAttribute("label"), s = t === "stacked" || t === "stacked-end" || t === "stacked-start", [i, r] = this.#b(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>` : "", p = `
       <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}"
            ${e ? `aria-label="${e}"` : ""}>
         ${o ? `<span data-ry-target="prefix" class="ry-number-select__affix">${o}</span>` : ""}
-        <span data-ry-target="value" class="ry-number-select__value">${this.#j(this.value)}</span>
+        <span data-ry-target="value" class="ry-number-select__value">${this.#O(this.value)}</span>
         ${l ? `<span data-ry-target="suffix" class="ry-number-select__affix">${l}</span>` : ""}
         <input data-ry-target="input" class="ry-number-select__input" type="text" inputmode="decimal" tabindex="-1">
-      </div>`, y = e ? `<span data-ry-target="label" class="ry-number-select__label">${e}</span>` : "";
+      </div>`, f = e ? `<span data-ry-target="label" class="ry-number-select__label">${e}</span>` : "";
     if (t === "stacked")
-      this.innerHTML = `${d}${g}${c}${y}`;
+      this.innerHTML = `${d}${p}${c}${f}`;
     else if (t === "stacked-end") {
-      const b = `<div data-ry-target="btn-group" class="ry-number-select__btn-group">${d}${c}</div>`;
-      this.innerHTML = `${g}${b}${y}`;
+      const y = `<div data-ry-target="btn-group" class="ry-number-select__btn-group">${d}${c}</div>`;
+      this.innerHTML = `${p}${y}${f}`;
     } else if (t === "stacked-start") {
-      const b = `<div data-ry-target="btn-group" class="ry-number-select__btn-group">${d}${c}</div>`;
-      this.innerHTML = `${b}${g}${y}`;
+      const y = `<div data-ry-target="btn-group" class="ry-number-select__btn-group">${d}${c}</div>`;
+      this.innerHTML = `${y}${p}${f}`;
     } else
-      this.innerHTML = `${c}${g}${d}${y}`;
+      this.innerHTML = `${c}${p}${d}${f}`;
   }
-  #m(t) {
+  #b(t) {
     const e = this.getAttribute("icons") ?? "plus-minus";
-    return e === "chevron" ? t ? [p("chevron-down") ?? "▾", p("chevron-up") ?? "▴"] : [p("chevron-left") ?? "‹", p("chevron-right") ?? "›"] : e === "arrow" ? t ? [p("chevron-down") ?? "▼", p("chevron-up") ?? "▲"] : [p("chevron-left") ?? "◀", p("chevron-right") ?? "▶"] : [p("minus") ?? "−", p("plus") ?? "+"];
+    return e === "chevron" ? t ? [g("chevron-down") ?? "▾", g("chevron-up") ?? "▴"] : [g("chevron-left") ?? "‹", g("chevron-right") ?? "›"] : e === "arrow" ? t ? [g("chevron-down") ?? "▼", g("chevron-up") ?? "▲"] : [g("chevron-left") ?? "◀", g("chevron-right") ?? "▶"] : [g("minus") ?? "−", g("plus") ?? "+"];
   }
   #f() {
     this.#t = this.$('[data-ry-target="display"]'), this.#e = this.$('[data-ry-target="value"]'), this.#i = this.$('[data-ry-target="input"]'), this.#s = this.$('[data-ry-target="decrement"]'), this.#r = this.$('[data-ry-target="increment"]');
   }
-  #w() {
+  #A() {
     this.#s && (this.on(this.#s, "mousedown", (t) => {
       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) => {
+    }), this.on(this.#s, "mouseup", () => this.#p()), this.on(this.#s, "mouseleave", () => this.#p())), 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.#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) => {
+    }), this.on(this.#r, "mouseup", () => this.#p()), this.on(this.#r, "mouseleave", () => this.#p())), this.#t && this.on(this.#t, "mousedown", this.#H), 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();
     }));
   }
@@ -2380,66 +2353,66 @@ class gt 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.#p = setTimeout(i, s);
+        this.#R(t * e), this.#x(), s = Math.max(40, s * 0.85), this.#d = setTimeout(i, s);
       };
       i();
     }, 400);
   }
-  #u() {
-    this.#n && (clearTimeout(this.#n), this.#n = null), this.#p && (clearTimeout(this.#p), this.#p = null);
+  #p() {
+    this.#n && (clearTimeout(this.#n), this.#n = null), this.#d && (clearTimeout(this.#d), this.#d = null);
   }
   // --- Drag helpers ---
-  get #b() {
+  get #y() {
     const t = this.getAttribute("drag");
     if (t === "x" || t === "y" || t === "none") return t;
     const e = this.getAttribute("arrows");
     return e === "stacked" || e === "stacked-end" || e === "stacked-start" ? "y" : "x";
   }
   #v(t, e) {
-    return this.#b === "y" ? this.#h - e : t - this.#o;
+    return this.#y === "y" ? this.#l - e : t - this.#o;
   }
-  #y(t, e) {
-    return this.#b === "y" ? Math.abs(e - this.#h) : Math.abs(t - this.#o);
+  #m(t, e) {
+    return this.#y === "y" ? Math.abs(e - this.#l) : Math.abs(t - this.#o);
   }
   #M(t, e) {
     if (!this.#e) return;
-    const s = t / e * 4, i = this.#b;
+    const s = t / e * 4, i = this.#y;
     this.#e.style.transform = i === "y" ? `translateY(${-s}px)` : `translateX(${s}px)`;
   }
-  #k(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.#l + o * a, c = i - o * n;
+  #w(t, e, s) {
+    const i = this.#v(t, e), r = this.step || 1, a = s ? r * 10 : r, n = s ? L * 2 : L, o = Math.round(i / n), l = this.#c + 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());
+    const d = this.hasAttribute("wrap") ? this.#V(l) : this.#T(l), p = this.#F(d);
+    p !== this.value && (this.value = p, this.#$(), this.#x());
   }
   // --- Mouse drag ---
-  #I = (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", ""));
+  #H = (t) => {
+    this.disabled || this.#u || this.#y === "none" || (t.preventDefault(), this.#a = !0, this.#o = t.clientX, this.#l = t.clientY, this.#c = this.value, this.setAttribute("data-dragging", ""));
   };
   #Y = (t) => {
-    this.#a && this.#k(t.clientX, t.clientY, t.shiftKey);
+    this.#a && this.#w(t.clientX, t.clientY, t.shiftKey);
   };
   #C = (t) => {
     if (!this.#a) return;
-    const e = this.#y(t.clientX, t.clientY);
-    this.#a = !1, this.removeAttribute("data-dragging"), this.#e && (this.#e.style.transform = ""), e < T && this.hasAttribute("editable") ? this.#E() : e >= T && this.#_();
+    const e = this.#m(t.clientX, t.clientY);
+    this.#a = !1, this.removeAttribute("data-dragging"), this.#e && (this.#e.style.transform = ""), e < I && this.hasAttribute("editable") ? this.#E() : e >= I && this.#_();
   };
   // --- Touch drag ---
   #X = (t) => {
-    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", ""));
+    this.disabled || this.#u || this.#y === "none" || (t.preventDefault(), this.#a = !0, this.#o = t.touches[0]?.clientX ?? 0, this.#l = t.touches[0]?.clientY ?? 0, this.#c = this.value, this.setAttribute("data-dragging", ""));
   };
   #G = (t) => {
     if (!this.#a) return;
     t.preventDefault();
     const e = t.touches[0];
-    e && this.#k(e.clientX, e.clientY, !1);
+    e && this.#w(e.clientX, e.clientY, !1);
   };
   #q = () => {
     this.#a && (this.#a = !1, this.removeAttribute("data-dragging"), this.#e && (this.#e.style.transform = ""), this.#_());
   };
   // --- Keyboard ---
   #K = (t) => {
-    if (this.disabled || this.#c) return;
+    if (this.disabled || this.#u) return;
     const e = this.step || 1, s = e * 10;
     let i = 0;
     switch (t.key) {
@@ -2474,32 +2447,32 @@ class gt extends u {
   };
   // --- Wheel ---
   #J = (t) => {
-    if (this.disabled || this.#c || !this.matches(":hover") && !this.contains(document.activeElement)) return;
+    if (this.disabled || this.#u || !this.matches(":hover") && !this.contains(document.activeElement)) return;
     t.preventDefault();
     const e = this.step || 1, s = t.shiftKey ? e * 10 : e, i = t.deltaY < 0 ? s : -s;
     this.#R(i), this.#x(), this.#_();
   };
   // --- Edit mode ---
   #E(t) {
-    this.disabled || this.#c || (this.#c = !0, this.state = "editing", this.#e && (this.#e.style.display = "none"), this.#i && (this.#i.style.display = "block", this.#i.value = t ?? this.#j(this.value), this.#i.focus(), t ? this.#i.setSelectionRange(1, 1) : this.#i.select()));
+    this.disabled || this.#u || (this.#u = !0, this.state = "editing", this.#e && (this.#e.style.display = "none"), this.#i && (this.#i.style.display = "block", this.#i.value = t ?? this.#O(this.value), this.#i.focus(), t ? this.#i.setSelectionRange(1, 1) : this.#i.select()));
   }
   #z() {
-    if (!this.#c) return;
-    this.#c = !1, this.state = "";
+    if (!this.#u) return;
+    this.#u = !1, this.state = "";
     const t = parseFloat(this.#i?.value ?? "");
     if (!isNaN(t)) {
       const e = this.#T(t), s = this.#F(e);
       this.value = s, this.#_();
     }
-    this.#e && (this.#e.style.display = ""), this.#i && (this.#i.style.display = "none"), this.#A(), this.#t?.focus();
+    this.#e && (this.#e.style.display = ""), this.#i && (this.#i.style.display = "none"), this.#$(), this.#t?.focus();
   }
   #P() {
-    this.#c && (this.#c = !1, this.state = "", this.#e && (this.#e.style.display = ""), this.#i && (this.#i.style.display = "none"), this.#t?.focus());
+    this.#u && (this.#u = !1, this.state = "", this.#e && (this.#e.style.display = ""), this.#i && (this.#i.style.display = "none"), this.#t?.focus());
   }
   // --- Value management ---
   #R(t) {
     let e = this.value + t;
-    this.hasAttribute("wrap") ? e = this.#V(e) : e = this.#T(e), e = this.#F(e), this.value = e, this.#A();
+    this.hasAttribute("wrap") ? e = this.#V(e) : e = this.#T(e), e = this.#F(e), this.value = e, this.#$();
   }
   #T(t) {
     return Math.max(this.min, Math.min(this.max, t));
@@ -2517,14 +2490,14 @@ class gt extends u {
     const s = Math.round((t - this.min) / e) * e + this.min;
     return this.#T(s);
   }
-  #j(t) {
+  #O(t) {
     const e = this.step;
     if (e >= 1) return Math.round(t).toString();
     const s = Math.max(0, -Math.floor(Math.log10(e)));
     return t.toFixed(s);
   }
-  #A() {
-    this.#e && (this.#e.textContent = this.#j(this.value)), this.#U();
+  #$() {
+    this.#e && (this.#e.textContent = this.#O(this.value)), this.#U();
   }
   #U() {
     this.#t && (this.#t.setAttribute("aria-valuenow", String(this.value)), this.#t.setAttribute("aria-valuemin", String(this.min)), this.#t.setAttribute("aria-valuemax", String(this.max)));
@@ -2561,7 +2534,7 @@ class gt extends u {
     this.setAttribute("step", String(t));
   }
   get drag() {
-    return this.#b;
+    return this.#y;
   }
   set drag(t) {
     this.setAttribute("drag", t);
@@ -2573,14 +2546,14 @@ class gt extends u {
     t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
   }
   attributeChangedCallback(t, e, s) {
-    e !== s && t === "value" && this.#t && this.#A();
+    e !== s && t === "value" && this.#t && this.#$();
   }
   teardown() {
-    this.#u();
+    this.#p();
   }
 }
-customElements.define("ry-number-select", gt);
-function v(h) {
+customElements.define("ry-number-select", ft);
+function A(h) {
   const t = h.h / 360, e = h.s / 100, s = h.v / 100;
   let i = 0, r = 0, a = 0;
   const n = Math.floor(t * 6), o = t * 6 - n, l = s * (1 - e), c = s * (1 - o * e), d = s * (1 - (1 - o) * e);
@@ -2610,7 +2583,7 @@ function v(h) {
     b: Math.round(a * 255)
   };
 }
-function k(h) {
+function _(h) {
   const t = h.r / 255, e = h.g / 255, s = h.b / 255, i = Math.max(t, e, s), r = Math.min(t, e, s), a = i - r;
   let n = 0;
   const o = i === 0 ? 0 : a / i, l = i;
@@ -2632,7 +2605,7 @@ function k(h) {
     v: Math.round(l * 100)
   };
 }
-function L(h) {
+function H(h) {
   const t = h.s / 100, e = h.v / 100, s = e * (1 - t / 2), i = s === 0 || s === 1 ? 0 : (e - s) / Math.min(s, 1 - s);
   return {
     h: h.h,
@@ -2640,7 +2613,7 @@ function L(h) {
     l: Math.round(s * 100)
   };
 }
-function ft(h) {
+function yt(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,
@@ -2648,11 +2621,11 @@ function ft(h) {
     v: Math.round(s * 100)
   };
 }
-function H(h) {
+function D(h) {
   const t = (e) => e.toString(16).padStart(2, "0");
   return `#${t(h.r)}${t(h.g)}${t(h.b)}`;
 }
-function bt(h) {
+function mt(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);
@@ -2668,7 +2641,7 @@ function bt(h) {
     b: parseInt(t[3], 16)
   };
 }
-function A(h) {
+function $(h) {
   const t = h.trim().toLowerCase();
   if (t.startsWith("#")) {
     const i = /^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(t);
@@ -2678,10 +2651,10 @@ function A(h) {
         g: parseInt(i[2], 16),
         b: parseInt(i[3], 16)
       }, n = parseInt(i[4], 16) / 255;
-      return { hsv: k(a), alpha: Math.round(n * 100) };
+      return { hsv: _(a), alpha: Math.round(n * 100) };
     }
-    const r = bt(t);
-    return r ? { hsv: k(r), alpha: 100 } : null;
+    const r = mt(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);
   if (e) {
@@ -2690,7 +2663,7 @@ function A(h) {
       g: parseInt(e[2], 10),
       b: parseInt(e[3], 10)
     }, r = e[4] ? parseFloat(e[4]) * 100 : 100;
-    return { hsv: k(i), alpha: r };
+    return { hsv: _(i), alpha: r };
   }
   const s = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*(?:,\s*([\d.]+))?\s*\)$/.exec(t);
   if (s) {
@@ -2699,11 +2672,11 @@ function A(h) {
       s: parseFloat(s[2]),
       l: parseFloat(s[3])
     }, r = s[4] ? parseFloat(s[4]) * 100 : 100;
-    return { hsv: ft(i), alpha: r };
+    return { hsv: yt(i), alpha: r };
   }
   return null;
 }
-class yt extends u {
+class bt extends u {
   #t = 0;
   #e = 100;
   #i = 100;
@@ -2711,21 +2684,21 @@ class yt extends u {
   #r = !1;
   #a = !1;
   #o = !1;
-  #h = null;
   #l = null;
   #c = null;
+  #u = null;
   #n = null;
-  #p = null;
   #d = null;
-  #m = null;
+  #h = null;
+  #b = null;
   #f = null;
-  #w = null;
+  #A = null;
   #g = null;
   static observedAttributes = ["value", "format", "opacity", "disabled", "swatches", "inline"];
   setup() {
-    this.#u(), this.#b(), this.#v(), this.#A();
+    this.#p(), this.#y(), this.#v(), this.#$();
   }
-  #u() {
+  #p() {
     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">
@@ -2765,43 +2738,43 @@ class yt 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.#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"]');
+      `, this.#l = this.$('[data-ry-target="trigger"]'), this.#c = this.$('[data-ry-target="panel"]'), this.#u = this.$('[data-ry-target="grid"]'), this.#n = this.$('[data-ry-target="grid-handle"]'), this.#d = this.$('[data-ry-target="hue-slider"]'), this.#h = this.$('[data-ry-target="hue-handle"]'), this.#b = this.$('[data-ry-target="alpha-slider"]'), this.#f = this.$('[data-ry-target="alpha-handle"]'), this.#A = this.$('[data-ry-target="preview"]'), this.#g = this.$('[data-ry-target="input"]');
   }
-  #b() {
-    this.#h && this.on(this.#h, "click", this.#y), this.on(document, "click", this.#M), this.on(document, "keydown", this.#k), 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));
+  #y() {
+    this.#l && this.on(this.#l, "click", this.#m), this.on(document, "click", this.#M), this.on(document, "keydown", this.#w), this.#u && this.on(this.#u, "pointerdown", this.#Y), this.#n && this.on(this.#n, "keydown", this.#X), this.#d && this.on(this.#d, "pointerdown", this.#G), this.#h && this.on(this.#h, "keydown", this.#K), this.#b && this.on(this.#b, "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"]');
-    e && this.on(e, "click", this.#j);
+    e && this.on(e, "click", this.#O);
   }
   #v() {
     const t = this.getAttribute("value");
     if (t) {
-      const e = A(t);
+      const e = $(t);
       e && (this.#t = e.hsv.h, this.#e = e.hsv.s, this.#i = e.hsv.v, this.#s = e.alpha);
     }
   }
   // ───────────────────────────────────────────────────────────────────────────
   // Dropdown handlers
   // ───────────────────────────────────────────────────────────────────────────
-  #y = () => {
+  #m = () => {
     this.disabled || (this.state === "open" ? this.close() : this.open());
   };
   #M = (t) => {
     this.state === "open" && (this.contains(t.target) || this.close());
   };
-  #k = (t) => {
-    t.key === "Escape" && this.state === "open" && (this.close(), this.#h?.focus());
+  #w = (t) => {
+    t.key === "Escape" && this.state === "open" && (this.close(), this.#l?.focus());
   };
   open() {
-    this.hasAttribute("inline") || (this.#I(), this.state = "open");
+    this.hasAttribute("inline") || (this.#H(), this.state = "open");
   }
   close() {
     this.hasAttribute("inline") || (this.state = "closed", this.removeAttribute("data-ry-position"));
   }
-  #I() {
-    if (!this.#l || !this.#h) return;
-    const t = this.#h.getBoundingClientRect(), e = 320, i = window.innerHeight - t.bottom, r = t.top;
+  #H() {
+    if (!this.#c || !this.#l) return;
+    const t = this.#l.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");
   }
   // ───────────────────────────────────────────────────────────────────────────
@@ -2811,9 +2784,9 @@ class yt extends u {
     this.disabled || (t.preventDefault(), this.#r = !0, this.#n?.focus(), this.#C(t));
   };
   #C(t) {
-    if (!this.#c) return;
-    const e = this.#c.getBoundingClientRect(), s = Math.max(0, Math.min(1, (t.clientX - e.left) / e.width)), i = Math.max(0, Math.min(1, (t.clientY - e.top) / e.height));
-    this.#e = Math.round(s * 100), this.#i = Math.round((1 - i) * 100), this.#A(), this.#L();
+    if (!this.#u) return;
+    const e = this.#u.getBoundingClientRect(), s = Math.max(0, Math.min(1, (t.clientX - e.left) / e.width)), i = Math.max(0, Math.min(1, (t.clientY - e.top) / e.height));
+    this.#e = Math.round(s * 100), this.#i = Math.round((1 - i) * 100), this.#$(), this.#L();
   }
   #X = (t) => {
     if (this.disabled) return;
@@ -2833,18 +2806,18 @@ class yt extends u {
         this.#i = Math.max(0, this.#i - e), s = !0;
         break;
     }
-    s && (t.preventDefault(), this.#A(), this.#L(), this.#$());
+    s && (t.preventDefault(), this.#$(), this.#L(), this.#k());
   };
   // ───────────────────────────────────────────────────────────────────────────
   // Hue handlers
   // ───────────────────────────────────────────────────────────────────────────
   #G = (t) => {
-    this.disabled || (t.preventDefault(), this.#a = !0, this.#d?.focus(), this.#q(t));
+    this.disabled || (t.preventDefault(), this.#a = !0, this.#h?.focus(), this.#q(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();
+    if (!this.#d) return;
+    const e = this.#d.getBoundingClientRect(), s = Math.max(0, Math.min(1, (t.clientX - e.left) / e.width));
+    this.#t = Math.round(s * 360), this.#$(), this.#L();
   }
   #K = (t) => {
     if (this.disabled) return;
@@ -2860,7 +2833,7 @@ class yt extends u {
         this.#t = (this.#t - e + 360) % 360, s = !0;
         break;
     }
-    s && (t.preventDefault(), this.#A(), this.#L(), this.#$());
+    s && (t.preventDefault(), this.#$(), this.#L(), this.#k());
   };
   // ───────────────────────────────────────────────────────────────────────────
   // Alpha handlers
@@ -2869,9 +2842,9 @@ class yt extends u {
     this.disabled || (t.preventDefault(), this.#o = !0, this.#f?.focus(), this.#E(t));
   };
   #E(t) {
-    if (!this.#m) return;
-    const e = this.#m.getBoundingClientRect(), s = Math.max(0, Math.min(1, (t.clientX - e.left) / e.width));
-    this.#s = Math.round(s * 100), this.#A(), this.#L();
+    if (!this.#b) return;
+    const e = this.#b.getBoundingClientRect(), s = Math.max(0, Math.min(1, (t.clientX - e.left) / e.width));
+    this.#s = Math.round(s * 100), this.#$(), this.#L();
   }
   #z = (t) => {
     if (this.disabled) return;
@@ -2887,7 +2860,7 @@ class yt extends u {
         this.#s = Math.max(0, this.#s - e), s = !0;
         break;
     }
-    s && (t.preventDefault(), this.#A(), this.#L(), this.#$());
+    s && (t.preventDefault(), this.#$(), this.#L(), this.#k());
   };
   // ───────────────────────────────────────────────────────────────────────────
   // Pointer move/up
@@ -2896,15 +2869,15 @@ class yt extends u {
     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.#$());
+    (this.#r || this.#a || this.#o) && (this.#r = !1, this.#a = !1, this.#o = !1, this.#k());
   };
   // ───────────────────────────────────────────────────────────────────────────
   // Input handlers
   // ───────────────────────────────────────────────────────────────────────────
   #T = () => {
     if (!this.#g) return;
-    const t = A(this.#g.value);
-    t ? (this.#t = t.hsv.h, this.#e = t.hsv.s, this.#i = t.hsv.v, this.hasAttribute("opacity") && (this.#s = t.alpha), this.#A(), this.#$()) : this.#W();
+    const t = $(this.#g.value);
+    t ? (this.#t = t.hsv.h, this.#e = t.hsv.s, this.#i = t.hsv.v, this.hasAttribute("opacity") && (this.#s = t.alpha), this.#$(), this.#k()) : this.#W();
   };
   #V = (t) => {
     t.key === "Enter" && (t.preventDefault(), this.#T());
@@ -2921,50 +2894,50 @@ class yt extends u {
   // ───────────────────────────────────────────────────────────────────────────
   // Swatches
   // ───────────────────────────────────────────────────────────────────────────
-  #j = (t) => {
+  #O = (t) => {
     const e = t.target;
     if (e.classList.contains("ry-color-picker__swatch")) {
       const s = e.dataset.color;
       if (s) {
-        const i = A(s);
-        i && (this.#t = i.hsv.h, this.#e = i.hsv.s, this.#i = i.hsv.v, this.hasAttribute("opacity") && (this.#s = i.alpha), this.#A(), this.#L(), this.#$());
+        const i = $(s);
+        i && (this.#t = i.hsv.h, this.#e = i.hsv.s, this.#i = i.hsv.v, this.hasAttribute("opacity") && (this.#s = i.alpha), this.#$(), this.#L(), this.#k());
       }
     }
   };
   // ───────────────────────────────────────────────────────────────────────────
   // Update methods
   // ───────────────────────────────────────────────────────────────────────────
-  #A() {
-    this.#U(), this.#x(), this.#_(), this.#D(), this.#O(), this.#W(), this.#Z();
+  #$() {
+    this.#U(), this.#x(), this.#_(), this.#D(), this.#j(), this.#W(), this.#Z();
   }
   #U() {
     const t = this.$('[data-ry-target="trigger-color"]');
     if (t) {
-      const e = v({ h: this.#t, s: this.#e, v: this.#i }), s = this.hasAttribute("opacity") ? this.#s / 100 : 1;
+      const e = A({ h: this.#t, s: this.#e, v: this.#i }), s = this.hasAttribute("opacity") ? this.#s / 100 : 1;
       t.style.backgroundColor = `rgba(${e.r}, ${e.g}, ${e.b}, ${s})`;
     }
   }
   #x() {
-    if (this.#c) {
-      const t = v({ h: this.#t, s: 100, v: 100 });
-      this.#c.style.setProperty("--grid-hue-color", `rgb(${t.r}, ${t.g}, ${t.b})`);
+    if (this.#u) {
+      const t = A({ h: this.#t, s: 100, v: 100 });
+      this.#u.style.setProperty("--grid-hue-color", `rgb(${t.r}, ${t.g}, ${t.b})`);
     }
     this.#n && (this.#n.style.left = `${this.#e}%`, this.#n.style.top = `${100 - this.#i}%`);
   }
   #_() {
-    this.#d && (this.#d.style.left = `${this.#t / 360 * 100}%`);
+    this.#h && (this.#h.style.left = `${this.#t / 360 * 100}%`);
   }
   #D() {
-    if (this.#m) {
-      const t = v({ h: this.#t, s: this.#e, v: this.#i });
-      this.#m.style.setProperty("--alpha-color", `rgb(${t.r}, ${t.g}, ${t.b})`);
+    if (this.#b) {
+      const t = A({ h: this.#t, s: this.#e, v: this.#i });
+      this.#b.style.setProperty("--alpha-color", `rgb(${t.r}, ${t.g}, ${t.b})`);
     }
     this.#f && (this.#f.style.left = `${this.#s}%`);
   }
-  #O() {
+  #j() {
     const t = this.$('[data-ry-target="preview-color"]');
     if (t) {
-      const e = v({ h: this.#t, s: this.#e, v: this.#i }), s = this.hasAttribute("opacity") ? this.#s / 100 : 1;
+      const e = A({ h: this.#t, s: this.#e, v: this.#i }), s = this.hasAttribute("opacity") ? this.#s / 100 : 1;
       t.style.backgroundColor = `rgba(${e.r}, ${e.g}, ${e.b}, ${s})`;
     }
   }
@@ -2976,10 +2949,10 @@ class yt extends u {
     this.getAttribute("value") !== t && this.setAttribute("value", t);
   }
   #N() {
-    const t = this.format, e = v({ h: this.#t, s: this.#e, v: this.#i }), s = this.hasAttribute("opacity");
+    const t = this.format, e = A({ h: this.#t, s: this.#e, v: this.#i }), s = this.hasAttribute("opacity");
     switch (t) {
       case "hex": {
-        const i = H(e);
+        const i = D(e);
         if (s && this.#s < 100) {
           const r = Math.round(this.#s / 100 * 255).toString(16).padStart(2, "0");
           return i + r;
@@ -2989,11 +2962,11 @@ class yt extends u {
       case "rgb":
         return s ? `rgba(${e.r}, ${e.g}, ${e.b}, ${(this.#s / 100).toFixed(2)})` : `rgb(${e.r}, ${e.g}, ${e.b})`;
       case "hsl": {
-        const i = L({ h: this.#t, s: this.#e, v: this.#i });
+        const i = H({ h: this.#t, s: this.#e, v: this.#i });
         return s ? `hsla(${i.h}, ${i.s}%, ${i.l}%, ${(this.#s / 100).toFixed(2)})` : `hsl(${i.h}, ${i.s}%, ${i.l}%)`;
       }
       default:
-        return H(e);
+        return D(e);
     }
   }
   // ───────────────────────────────────────────────────────────────────────────
@@ -3002,16 +2975,16 @@ class yt extends u {
   #L() {
     this.emit("input", { value: this.value, hsv: this.hsv, rgb: this.rgb });
   }
-  #$() {
+  #k() {
     this.emit("change", { value: this.value, hsv: this.hsv, rgb: this.rgb });
   }
   // ───────────────────────────────────────────────────────────────────────────
   // Attribute changed
   // ───────────────────────────────────────────────────────────────────────────
   attributeChangedCallback(t, e, s) {
-    if (e !== s && t === "value" && this.#c && s) {
-      const i = A(s);
-      i && (this.#t = i.hsv.h, this.#e = i.hsv.s, this.#i = i.hsv.v, this.hasAttribute("opacity") && (this.#s = i.alpha), this.#U(), this.#x(), this.#_(), this.#D(), this.#O());
+    if (e !== s && t === "value" && this.#u && s) {
+      const i = $(s);
+      i && (this.#t = i.hsv.h, this.#e = i.hsv.s, this.#i = i.hsv.v, this.hasAttribute("opacity") && (this.#s = i.alpha), this.#U(), this.#x(), this.#_(), this.#D(), this.#j());
     }
   }
   // ───────────────────────────────────────────────────────────────────────────
@@ -3021,8 +2994,8 @@ class yt extends u {
     return this.#N();
   }
   set value(t) {
-    const e = A(t);
-    e && (this.#t = e.hsv.h, this.#e = e.hsv.s, this.#i = e.hsv.v, this.hasAttribute("opacity") && (this.#s = e.alpha), this.#A());
+    const e = $(t);
+    e && (this.#t = e.hsv.h, this.#e = e.hsv.s, this.#i = e.hsv.v, this.hasAttribute("opacity") && (this.#s = e.alpha), this.#$());
   }
   get format() {
     return this.getAttribute("format") || "hex";
@@ -3040,21 +3013,21 @@ class yt extends u {
     return { h: this.#t, s: this.#e, v: this.#i };
   }
   get rgb() {
-    return v(this.hsv);
+    return A(this.hsv);
   }
   get hsl() {
-    return L(this.hsv);
+    return H(this.hsv);
   }
   get alpha() {
     return this.#s;
   }
   set alpha(t) {
-    this.#s = Math.max(0, Math.min(100, t)), this.#A();
+    this.#s = Math.max(0, Math.min(100, t)), this.#$();
   }
   /** Set color from any valid color string */
   setColor(t) {
-    const e = A(t);
-    return e ? (this.#t = e.hsv.h, this.#e = e.hsv.s, this.#i = e.hsv.v, this.hasAttribute("opacity") && (this.#s = e.alpha), this.#A(), !0) : !1;
+    const e = $(t);
+    return e ? (this.#t = e.hsv.h, this.#e = e.hsv.s, this.#i = e.hsv.v, this.hasAttribute("opacity") && (this.#s = e.alpha), this.#$(), !0) : !1;
   }
   /** Get color in specific format */
   getFormattedValue(t) {
@@ -3064,15 +3037,15 @@ class yt extends u {
     return this.format = e, s;
   }
 }
-customElements.define("ry-color-picker", yt);
-class mt extends u {
+customElements.define("ry-color-picker", bt);
+class vt extends u {
   #t = null;
   #e = null;
   #i = null;
   #s = null;
   static observedAttributes = ["value", "format", "opacity", "disabled", "placeholder"];
   setup() {
-    this.#r(), this.#a(), this.#b(), this.state = "closed";
+    this.#r(), this.#a(), this.#y(), this.state = "closed";
   }
   #r() {
     const t = this.hasAttribute("opacity"), e = this.getAttribute("format") || "hex", s = this.getAttribute("value") || "#000000", i = this.getAttribute("placeholder") || "#000000";
@@ -3104,15 +3077,15 @@ class mt 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.#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);
+    this.#t && this.on(this.#t, "click", this.#o), this.#e && (this.on(this.#e, "input", this.#c), this.on(this.#e, "keydown", this.#d), this.on(this.#e, "focus", this.#l)), this.#s && (this.on(this.#s, "ry:input", this.#h), this.on(this.#s, "ry:change", this.#b)), this.on(document, "click", this.#f), this.on(document, "keydown", this.#A);
   }
   #o = () => {
     this.disabled || (this.state === "open" ? this.close() : this.open());
   };
-  #h = () => {
+  #l = () => {
     this.disabled || this.open();
   };
-  #l = () => {
+  #c = () => {
     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);
@@ -3121,10 +3094,10 @@ class mt extends u {
       const n = Math.min(e, r.length);
       this.#e.setSelectionRange(n, n);
     }
-    const a = this.#c(r);
-    a && (this.#s.setColor(a), this.#u(), this.#n(r) && this.#v(), this.emit("input", { value: this.value }));
+    const a = this.#u(r);
+    a && (this.#s.setColor(a), this.#p(), this.#n(r) && this.#v(), this.emit("input", { value: this.value }));
   };
-  #c(t) {
+  #u(t) {
     let e = t;
     e.startsWith("#") || (e = "#" + e);
     const s = e.slice(1);
@@ -3141,19 +3114,19 @@ class mt extends u {
   #n(t) {
     return !!(/^#[a-fA-F0-9]{6}$/.test(t) || /^#[a-fA-F0-9]{3}$/.test(t));
   }
-  #p = (t) => {
-    t.key === "Enter" && (t.preventDefault(), this.#l(), this.emit("change", { value: this.value }));
+  #d = (t) => {
+    t.key === "Enter" && (t.preventDefault(), this.#c(), 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 }));
+  #h = () => {
+    !this.#s || !this.#e || (document.activeElement !== this.#e && (this.#e.value = this.#s.value), this.#p(), this.#v(), this.emit("input", { value: this.value }));
   };
-  #m = () => {
+  #b = () => {
     this.emit("change", { value: this.value });
   };
   #f = (t) => {
     this.state === "open" && (this.contains(t.target) || this.close());
   };
-  #w = (t) => {
+  #A = (t) => {
     t.key === "Escape" && this.state === "open" && (this.close(), this.#t?.focus());
   };
   open() {
@@ -3167,21 +3140,21 @@ class mt 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");
   }
-  #u() {
+  #p() {
     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;
       t.style.backgroundColor = `rgba(${e.r}, ${e.g}, ${e.b}, ${s})`;
     }
   }
-  #b() {
+  #y() {
     const t = this.getAttribute("value") || "#000000";
     if (this.#s) {
       if (this.#s.setColor(t), this.#e) {
         const e = this.#s.value;
         this.#e.value = e.startsWith("#") ? e : "#" + e;
       }
-      this.#u();
+      this.#p();
     }
   }
   #v() {
@@ -3191,14 +3164,14 @@ class mt 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.#u()), 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.#p()), 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.#u(), this.#v());
+    this.#s?.setColor(t) && (this.#e && (this.#e.value = this.#s.value), this.#p(), this.#v());
   }
   get disabled() {
     return this.hasAttribute("disabled");
@@ -3216,8 +3189,8 @@ class mt extends u {
     return this.#s?.hsv ?? { h: 0, s: 0, v: 0 };
   }
 }
-customElements.define("ry-color-input", mt);
-function x(h) {
+customElements.define("ry-color-input", vt);
+function M(h) {
   const t = h.trim().toLowerCase();
   if (t.startsWith("#")) {
     const i = t.slice(1);
@@ -3240,7 +3213,7 @@ function x(h) {
     };
   const s = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%/.exec(t);
   if (s) {
-    const i = parseFloat(s[1]) / 360, r = parseFloat(s[2]) / 100, a = parseFloat(s[3]) / 100, n = (c, d, g) => (g < 0 && (g += 1), g > 1 && (g -= 1), g < 1 / 6 ? c + (d - c) * 6 * g : g < 1 / 2 ? d : g < 2 / 3 ? c + (d - c) * (2 / 3 - g) * 6 : c), o = a < 0.5 ? a * (1 + r) : a + r - a * r, l = 2 * a - o;
+    const i = parseFloat(s[1]) / 360, r = parseFloat(s[2]) / 100, a = parseFloat(s[3]) / 100, n = (c, d, p) => (p < 0 && (p += 1), p > 1 && (p -= 1), p < 1 / 6 ? c + (d - c) * 6 * p : p < 1 / 2 ? d : p < 2 / 3 ? c + (d - c) * (2 / 3 - p) * 6 : c), o = a < 0.5 ? a * (1 + r) : a + r - a * r, l = 2 * a - o;
     return {
       r: Math.round(n(l, o, i + 1 / 3) * 255),
       g: Math.round(n(l, o, i) * 255),
@@ -3249,19 +3222,19 @@ function x(h) {
   }
   return null;
 }
-function vt(h) {
+function At(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 At(h, t, e) {
+function $t(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%)", wt = 50;
-class $t extends u {
+const B = "linear-gradient(90deg, #000000 0%, #ffffff 100%)", kt = 50;
+class wt extends u {
   #t = "linear";
   #e = 90;
   #i = "circle";
@@ -3269,28 +3242,28 @@ class $t extends u {
   #r = null;
   #a = 0;
   #o = null;
-  #h = !1;
-  #l = null;
-  #c = !1;
+  #l = !1;
+  #c = null;
+  #u = !1;
   // Cached DOM refs
   #n = null;
-  #p = null;
   #d = null;
+  #h = null;
   static observedAttributes = ["value", "disabled", "output"];
   setup() {
-    this.#m(), this.#Y(), this.#X(), this.#x();
+    this.#b(), this.#Y(), this.#X(), this.#x();
   }
   // ───────────────────────────────────────────────────────────────────────────
   // Parsing / Serialization
   // ───────────────────────────────────────────────────────────────────────────
-  #m() {
-    const t = this.getAttribute("value") || I;
-    this.#f(t) || this.#f(I);
+  #b() {
+    const t = this.getAttribute("value") || B;
+    this.#f(t) || this.#f(B);
   }
   #f(t) {
     const e = t.trim();
     if (!e.startsWith("linear-gradient(") && !e.startsWith("radial-gradient("))
-      return x(e) ? (this.#t = "solid", this.#s = [this.#u(e, 0), this.#u(e, 100)], this.#r = this.#s[0].id, !0) : !1;
+      return M(e) ? (this.#t = "solid", this.#s = [this.#p(e, 0), this.#p(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,10 +3272,10 @@ class $t extends u {
       if (d)
         r = parseFloat(d[1]), n = i.slice(d[0].length);
       else {
-        const g = /^to\s+\w+(?:\s+\w+)?\s*,\s*/.exec(i);
-        if (g) {
-          const y = g[0].trim().replace(/,\s*$/, "");
-          r = this.#w(y), n = i.slice(g[0].length);
+        const p = /^to\s+\w+(?:\s+\w+)?\s*,\s*/.exec(i);
+        if (p) {
+          const f = p[0].trim().replace(/,\s*$/, "");
+          r = this.#A(f), n = i.slice(p[0].length);
         }
       }
     } else {
@@ -3312,10 +3285,10 @@ class $t 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.#u(c[1], parseFloat(c[2])));
+      o.push(this.#p(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) {
+  #A(t) {
     return {
       "to top": 0,
       "to top right": 45,
@@ -3336,19 +3309,19 @@ class $t extends u {
   // ───────────────────────────────────────────────────────────────────────────
   // Stop management
   // ───────────────────────────────────────────────────────────────────────────
-  #u(t, e) {
+  #p(t, e) {
     return { id: `stop-${this.#a++}`, color: t, position: e };
   }
   /** CSS left value clamped so the stop handle stays within the bar */
-  #b(t) {
+  #y(t) {
     const e = "calc(var(--ry-gradient-picker-stop-size, 16px) / 2)";
     return `clamp(${e}, ${t}%, calc(100% - ${e}))`;
   }
   #v(t, e) {
-    const s = this.#u(t, e);
-    this.#s.push(s), this.#k(), this.#r = s.id, this.#C(), this.#x();
+    const s = this.#p(t, e);
+    this.#s.push(s), this.#w(), this.#r = s.id, this.#C(), this.#x();
   }
-  #y(t) {
+  #m(t) {
     if (this.#s.length <= 2) return !1;
     const e = this.#s.findIndex((s) => s.id === t);
     return e === -1 ? !1 : (this.#s.splice(e, 1), this.#r === t && (this.#r = this.#s[Math.min(e, this.#s.length - 1)]?.id ?? null), this.#C(), this.#x(), !0);
@@ -3356,17 +3329,17 @@ class $t extends u {
   #M(t) {
     this.#r !== t && (this.#r = t, this.#N(), this.#L());
   }
-  #k() {
+  #w() {
     this.#s.sort((t, e) => t.position - e.position);
   }
-  #I() {
+  #H() {
     return this.#s.find((t) => t.id === this.#r) ?? null;
   }
   // ───────────────────────────────────────────────────────────────────────────
   // Markup
   // ───────────────────────────────────────────────────────────────────────────
   #Y() {
-    const t = this.hasAttribute("output"), e = p("copy"), s = p("gradient-solid"), i = p("gradient-linear"), r = p("gradient-radial"), a = p("shape-circle"), n = p("shape-ellipse");
+    const t = this.hasAttribute("output"), e = g("copy"), s = g("gradient-solid"), i = g("gradient-linear"), r = g("gradient-radial"), a = g("shape-circle"), n = g("shape-ellipse");
     let o = "";
     t && (o = `
       <div data-ry-target="output-row" class="ry-gradient-picker__output-row">
@@ -3392,14 +3365,14 @@ class $t extends u {
       </div>
       <ry-color-picker data-ry-target="picker" inline opacity></ry-color-picker>
       ${o}
-    `, this.#n = this.$('[data-ry-target="bar"]'), this.#p = this.$('[data-ry-target="picker"]'), this.#d = this.$('[data-ry-target="output"]'), this.#C();
+    `, this.#n = this.$('[data-ry-target="bar"]'), this.#d = this.$('[data-ry-target="picker"]'), this.#h = this.$('[data-ry-target="output"]'), this.#C();
   }
   #C() {
     if (this.#n) {
       this.#n.querySelectorAll('[data-ry-target="stop"]').forEach((t) => t.remove());
       for (const t of this.#s) {
         const e = document.createElement("div");
-        e.setAttribute("data-ry-target", "stop"), e.setAttribute("data-stop-id", t.id), e.classList.add("ry-gradient-picker__stop"), e.tabIndex = 0, e.style.left = this.#b(t.position), e.style.setProperty("--stop-color", t.color), t.id === this.#r && e.setAttribute("data-selected", ""), this.#n.appendChild(e);
+        e.setAttribute("data-ry-target", "stop"), e.setAttribute("data-stop-id", t.id), e.classList.add("ry-gradient-picker__stop"), e.tabIndex = 0, e.style.left = this.#y(t.position), e.style.setProperty("--stop-color", t.color), t.id === this.#r && e.setAttribute("data-selected", ""), this.#n.appendChild(e);
       }
     }
   }
@@ -3413,7 +3386,7 @@ class $t 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.#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));
+    r && this.on(r, "click", () => this.#P("circle")), a && this.on(a, "click", () => this.#P("ellipse")), this.#d && (this.on(this.#d, "ry:input", this.#R), this.on(this.#d, "ry:change", this.#T)), this.#h && (this.on(this.#h, "keydown", this.#F), this.on(this.#h, "blur", this.#O));
     const n = this.$('[data-ry-target="copy-btn"]');
     n && this.on(n, "click", this.#V), this.#n && this.on(this.#n, "keydown", this.#J);
   }
@@ -3426,26 +3399,26 @@ class $t extends u {
     if (s) {
       const i = s.getAttribute("data-stop-id");
       if (!i) return;
-      t.preventDefault(), this.#o = i, this.#h = !1, this.#l = this.#n.getBoundingClientRect(), this.#M(i), this.#n.setPointerCapture(t.pointerId), s.focus();
+      t.preventDefault(), this.#o = i, this.#l = !1, this.#c = 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.#h = !1, this.#l = i, this.#n.setPointerCapture(t.pointerId), this.#H();
+      this.#v(a, r), this.#n.querySelector(`[data-stop-id="${this.#r}"]`)?.focus(), this.#o = this.#r, this.#l = !1, this.#c = i, this.#n.setPointerCapture(t.pointerId), this.#I();
     }
   };
   #q = (t) => {
-    if (!this.#o || !this.#l) return;
+    if (!this.#o || !this.#c) 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.#l.left) / this.#l.width));
+    const s = Math.max(0, Math.min(1, (t.clientX - this.#c.left) / this.#c.width));
     e.position = Math.round(s * 100);
-    const i = this.#l.top + this.#l.height / 2, r = Math.abs(t.clientY - i);
-    this.#h = r > wt && this.#s.length > 2;
+    const i = this.#c.top + this.#c.height / 2, r = Math.abs(t.clientY - i);
+    this.#l = r > kt && this.#s.length > 2;
     const a = this.#n?.querySelector(`[data-stop-id="${e.id}"]`);
-    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.#k(), this.#O(), this.#D(), this.#$(), this.#H();
+    a && (a.style.left = this.#y(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.#w(), this.#j(), this.#D(), this.#k(), this.#I();
   };
   #K = () => {
-    this.#o && (this.#h && this.#y(this.#o), this.#o = null, this.#h = !1, this.#l = null, this.#S(), this.#B());
+    this.#o && (this.#l && this.#m(this.#o), this.#o = null, this.#l = !1, this.#c = null, this.#S(), this.#B());
   };
   #J = (t) => {
     if (this.disabled) return;
@@ -3466,30 +3439,30 @@ class $t extends u {
         break;
       case "Delete":
       case "Backspace":
-        this.#y(i) && (this.#H(), this.#B()), t.preventDefault();
+        this.#m(i) && (this.#I(), this.#B()), t.preventDefault();
         return;
     }
-    n && (t.preventDefault(), this.#k(), this.#W(), this.#O(), this.#D(), this.#$(), this.#S(), this.#H(), this.#B());
+    n && (t.preventDefault(), this.#w(), this.#W(), this.#j(), this.#D(), 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.#D(), this.#$(), this.#S(), this.#H(), this.#B());
+    this.#t !== t && (this.#t = t, this.setAttribute("data-ry-type", t), this.#_(), this.#D(), this.#k(), this.#S(), this.#I(), this.#B());
   }
   #z = (t) => {
     const e = t.detail;
-    this.#e = e.value, this.#D(), this.#$(), this.#S(), this.#H();
+    this.#e = e.value, this.#D(), this.#k(), this.#S(), this.#I();
   };
   #P(t) {
-    this.#i !== t && (this.#i = t, this.#_(), this.#$(), this.#S(), this.#H(), 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.#D(), this.#$(), this.#H());
+    const t = this.#H();
+    !t || !this.#d || (t.color = this.#d.value, this.#Z(t), this.#j(), this.#D(), this.#k(), this.#I());
   };
   #T = () => {
     this.#S(), this.#B();
@@ -3508,15 +3481,15 @@ class $t extends u {
   // Output (editable CSS) handlers
   // ───────────────────────────────────────────────────────────────────────────
   #F = (t) => {
-    t.key === "Enter" && (t.preventDefault(), this.#A());
+    t.key === "Enter" && (t.preventDefault(), this.#$());
   };
-  #j = () => {
-    this.#A();
+  #O = () => {
+    this.#$();
   };
-  #A() {
-    if (!this.#d) return;
-    const t = this.#d.value.trim();
-    t && this.#f(t) ? (this.#C(), this.#x(), this.#S(), this.#H(), this.#B()) : this.#$();
+  #$() {
+    if (!this.#h) return;
+    const t = this.#h.value.trim();
+    t && this.#f(t) ? (this.#C(), this.#x(), this.#S(), this.#I(), this.#B()) : this.#k();
   }
   // ───────────────────────────────────────────────────────────────────────────
   // Color interpolation
@@ -3535,14 +3508,14 @@ class $t 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 : vt(At(n, o, a));
+    const a = (t - s.position) / r, n = M(s.color), o = M(i.color);
+    return !n || !o ? s.color : At($t(n, o, a));
   }
   // ───────────────────────────────────────────────────────────────────────────
   // Update methods
   // ───────────────────────────────────────────────────────────────────────────
   #x() {
-    this.setAttribute("data-ry-type", this.#t), this.#_(), this.#O(), this.#D(), this.#W(), this.#N(), this.#L(), this.#$();
+    this.setAttribute("data-ry-type", this.#t), this.#_(), this.#j(), this.#D(), this.#W(), this.#N(), this.#L(), this.#k();
   }
   #_() {
     const t = this.$('[data-ry-target="type-solid"]'), e = this.$('[data-ry-target="type-linear"]'), s = this.$('[data-ry-target="type-radial"]');
@@ -3553,11 +3526,11 @@ class $t extends u {
     a && a.setAttribute("value", String(this.#e));
   }
   #D() {
-    if (!this.#p) return;
-    const t = this.#p.querySelector('[data-ry-target="preview-color"]');
+    if (!this.#d) return;
+    const t = this.#d.querySelector('[data-ry-target="preview-color"]');
     t && (t.style.backgroundImage = this.#t === "solid" ? "" : this.#g());
   }
-  #O() {
+  #j() {
     if (!this.#n) return;
     const t = this.#s.map((e) => `${e.color} ${e.position}%`).join(", ");
     this.#n.style.backgroundImage = `linear-gradient(to right, ${t})`;
@@ -3566,7 +3539,7 @@ class $t extends u {
     if (this.#n)
       for (const t of this.#s) {
         const e = this.#n.querySelector(`[data-stop-id="${t.id}"]`);
-        e && (e.style.left = this.#b(t.position));
+        e && (e.style.left = this.#y(t.position));
       }
   }
   #Z(t) {
@@ -3581,20 +3554,20 @@ class $t extends u {
       e.getAttribute("data-stop-id") === this.#r ? e.setAttribute("data-selected", "") : e.removeAttribute("data-selected");
   }
   #L() {
-    const t = this.#I();
-    !t || !this.#p || this.#p.setColor(t.color);
+    const t = this.#H();
+    !t || !this.#d || this.#d.setColor(t.color);
   }
-  #$() {
-    this.#d && document.activeElement !== this.#d && (this.#d.value = this.#g());
+  #k() {
+    this.#h && document.activeElement !== this.#h && (this.#h.value = this.#g());
   }
   #S() {
     const t = this.#g();
-    this.getAttribute("value") !== t && (this.#c = !0, this.setAttribute("value", t), this.#c = !1);
+    this.getAttribute("value") !== t && (this.#u = !0, this.setAttribute("value", t), this.#u = !1);
   }
   // ───────────────────────────────────────────────────────────────────────────
   // Events
   // ───────────────────────────────────────────────────────────────────────────
-  #H() {
+  #I() {
     this.emit("input", {
       value: this.#g(),
       type: this.#t,
@@ -3616,7 +3589,7 @@ class $t extends u {
   // Attribute changed
   // ───────────────────────────────────────────────────────────────────────────
   attributeChangedCallback(t, e, s) {
-    e === s || this.#c || t === "value" && this.#n && s && this.#f(s) && (this.#C(), this.#x());
+    e === s || this.#u || t === "value" && this.#n && s && this.#f(s) && (this.#C(), this.#x());
   }
   // ───────────────────────────────────────────────────────────────────────────
   // Public API
@@ -3637,7 +3610,7 @@ class $t extends u {
     return this.#e;
   }
   set angle(t) {
-    this.#e = (t % 360 + 360) % 360, this.#_(), this.#$(), this.#S();
+    this.#e = (t % 360 + 360) % 360, this.#_(), this.#k(), this.#S();
   }
   get shape() {
     return this.#i;
@@ -3649,7 +3622,7 @@ class $t extends u {
     return this.#s.map((t) => ({ ...t }));
   }
   get selectedStop() {
-    const t = this.#I();
+    const t = this.#H();
     return t ? { ...t } : null;
   }
   get disabled() {
@@ -3659,20 +3632,20 @@ class $t extends u {
     t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
   }
   addStop(t, e) {
-    this.#v(t, e), this.#S(), this.#H(), this.#B();
+    this.#v(t, e), this.#S(), this.#I(), this.#B();
   }
   removeStop(t) {
-    const e = this.#y(t);
-    return e && (this.#$(), this.#S(), this.#B()), e;
+    const e = this.#m(t);
+    return e && (this.#k(), this.#S(), this.#B()), e;
   }
 }
-customElements.define("ry-gradient-picker", $t);
-let kt = 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');
+customElements.define("ry-gradient-picker", wt);
+let xt = 0;
+const _t = 5;
+function E(h) {
+  return g(h).replace(/width="24"/g, 'width="16"').replace(/height="24"/g, 'height="16"').replace(/viewBox/, 'class="ry-tree__icon" viewBox');
 }
-class w extends u {
+class k extends u {
   // Drag state
   #t = !1;
   #e = !1;
@@ -3681,9 +3654,9 @@ class w extends u {
   #r = null;
   #a = null;
   #o = null;
-  #h = null;
+  #l = null;
   setup() {
-    this.#l(), this.on(this, "click", (t) => {
+    this.#c(), 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 ?? ""
@@ -3696,42 +3669,42 @@ class w extends u {
         label: i,
         open: e.checked
       });
-    }), this.hasAttribute("sortable") && this.#m();
+    }), this.hasAttribute("sortable") && this.#b();
   }
   // ── Build ──────────────────────────────────────────────────
-  #l() {
+  #c() {
     if (this.$(".ry-tree__root")) return;
     const t = Array.from(this.children), e = document.createElement("ul");
     e.className = "ry-tree__root";
     for (const s of t)
-      e.appendChild(this.#c(s));
+      e.appendChild(this.#u(s));
     this.innerHTML = "", this.appendChild(e);
   }
-  #c(t) {
+  #u(t) {
     const e = document.createElement("li");
     e.className = "ry-tree__item";
     const s = t.getAttribute("label") ?? "", i = t.hasAttribute("open"), r = t.hasAttribute("selected"), a = Array.from(t.children).filter(
       (o) => o.tagName === "RY-TREE-ITEM"
     );
     if (a.length > 0) {
-      const o = `ry-tree-${++kt}`, l = document.createElement("input");
+      const o = `ry-tree-${++xt}`, 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 = `
-        <span class="ry-tree__icon-closed">${_("folder")}</span>
-        <span class="ry-tree__icon-open">${_("folder-open")}</span>
+        <span class="ry-tree__icon-closed">${E("folder")}</span>
+        <span class="ry-tree__icon-open">${E("folder-open")}</span>
         ${s}
       `;
       const d = document.createElement("div");
       d.className = "ry-tree__children-wrapper";
-      const g = document.createElement("ul");
-      g.className = "ry-tree__children";
-      for (const y of a)
-        g.appendChild(this.#c(y));
-      d.appendChild(g), e.appendChild(l), e.appendChild(c), e.appendChild(d);
+      const p = document.createElement("ul");
+      p.className = "ry-tree__children";
+      for (const f of a)
+        p.appendChild(this.#u(f));
+      d.appendChild(p), e.appendChild(l), e.appendChild(c), e.appendChild(d);
     } else {
       const o = document.createElement("div");
-      o.className = "ry-tree__file", o.setAttribute("data-ry-target", "file"), o.dataset.ryLabel = s, r && o.setAttribute("data-ry-selected", ""), o.innerHTML = `${_("file")} ${s}`, e.appendChild(o);
+      o.className = "ry-tree__file", o.setAttribute("data-ry-target", "file"), o.dataset.ryLabel = s, r && o.setAttribute("data-ry-selected", ""), o.innerHTML = `${E("file")} ${s}`, e.appendChild(o);
     }
     return e;
   }
@@ -3748,9 +3721,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.#p(s));
+    ).map((s) => this.#d(s));
   }
-  #p(t) {
+  #d(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 ?? "" };
@@ -3767,19 +3740,19 @@ class w extends u {
   static from(t) {
     const e = document.createElement("ry-tree");
     for (const s of t)
-      e.appendChild(w.#d(s));
+      e.appendChild(k.#h(s));
     return e;
   }
-  static #d(t) {
+  static #h(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.#d(s));
+        e.appendChild(k.#h(s));
     return e;
   }
   // ── Drag and Drop ──────────────────────────────────────────
-  #m() {
-    this.on(this, "pointerdown", this.#f), this.on(document, "pointermove", this.#w), this.on(document, "pointerup", this.#g);
+  #b() {
+    this.on(this, "pointerdown", this.#f), this.on(document, "pointermove", this.#A), this.on(document, "pointerup", this.#g);
   }
   #f = (t) => {
     const s = t.target.closest(".ry-tree__label, .ry-tree__file");
@@ -3787,32 +3760,32 @@ class w extends u {
     const i = s.closest(".ry-tree__item");
     i && (this.#t = !0, this.#i = t.clientX, this.#s = t.clientY, this.#r = i);
   };
-  #w = (t) => {
+  #A = (t) => {
     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) < xt) return;
-      this.#t = !1, this.#e = !0, this.#u(t);
+      if (Math.hypot(c, d) < _t) return;
+      this.#t = !1, this.#e = !0, this.#p(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";
     const e = document.elementFromPoint(t.clientX, t.clientY);
     if (this.#a.style.display = "", !e) {
-      this.#y();
+      this.#m();
       return;
     }
     const s = e.closest(".ry-tree__label, .ry-tree__file");
     if (!s) {
-      this.#y();
+      this.#m();
       return;
     }
     const i = s.closest(".ry-tree__item");
     if (!i || i === this.#r) {
-      this.#y();
+      this.#m();
       return;
     }
     if (this.#r?.contains(i)) {
-      this.#y();
+      this.#m();
       return;
     }
     const r = s.getBoundingClientRect(), a = t.clientY - r.top, n = r.height, o = i.querySelector(":scope > .ry-tree__toggle") !== null;
@@ -3820,9 +3793,9 @@ class w extends u {
     o && a > n * 0.25 && a < n * 0.75 ? l = "inside" : a < n * 0.5 ? l = "before" : l = "after", this.#v(i, l);
   };
   #g = () => {
-    this.#e && this.#b(), this.#t = !1, this.#e = !1, this.#r = null;
+    this.#e && this.#y(), this.#t = !1, this.#e = !1, this.#r = null;
   };
-  #u(t) {
+  #p(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");
@@ -3830,20 +3803,20 @@ class w extends u {
     const s = e.cloneNode(!0);
     s.className = "ry-tree__ghost", s.style.display = "flex", s.style.alignItems = "center", s.style.gap = "var(--ry-space-2, 0.5rem)", s.style.padding = "var(--ry-space-1, 0.25rem) var(--ry-space-2, 0.5rem)", s.style.height = "28px", s.style.fontSize = "var(--ry-text-sm, 0.875rem)", s.style.whiteSpace = "nowrap", s.style.left = `${t.clientX + 12}px`, s.style.top = `${t.clientY - 14}px`, document.body.appendChild(s), this.#a = s;
   }
-  #b() {
+  #y() {
     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.#h;
-    this.#y(), this.#r && t && e && this.#M(this.#r, t, e);
+    const t = this.#o, e = this.#l;
+    this.#m(), this.#r && t && e && this.#M(this.#r, t, e);
   }
   #v(t, e) {
-    this.#o === t && this.#h === e || (this.#y(), t.setAttribute("data-ry-drop-target", e), this.#o = t, this.#h = e);
+    this.#o === t && this.#l === e || (this.#m(), t.setAttribute("data-ry-drop-target", e), this.#o = t, this.#l = e);
   }
-  #y() {
-    this.#o?.removeAttribute("data-ry-drop-target"), this.#o = null, this.#h = null;
+  #m() {
+    this.#o?.removeAttribute("data-ry-drop-target"), this.#o = null, this.#l = null;
   }
   #M(t, e, s) {
     if (s === "inside" && e.contains(t)) return;
-    const i = this.#k(t), r = this.#k(e);
+    const i = this.#w(t), r = this.#w(e);
     if (s === "before")
       e.parentNode?.insertBefore(t, e);
     else if (s === "after")
@@ -3862,24 +3835,24 @@ class w extends u {
       position: s
     });
   }
-  #k(t) {
+  #w(t) {
     const e = t.querySelector(':scope > [data-ry-target="folder"]'), s = t.querySelector(':scope > [data-ry-target="file"]');
     return e?.dataset.ryLabel ?? s?.dataset.ryLabel ?? "";
   }
 }
-class _t extends u {
+class Mt extends u {
   // Declarative container consumed by RyTree#build
 }
-customElements.define("ry-tree", w);
-customElements.define("ry-tree-item", _t);
-class Mt extends u {
+customElements.define("ry-tree", k);
+customElements.define("ry-tree-item", Mt);
+class Et extends u {
   setup() {
     this.#t();
   }
   #t() {
     if (this.$('[data-ry-target="label"]')) return;
     const t = this.textContent?.trim() ?? "", e = this.hasAttribute("removable");
-    if (this.innerHTML = `<span data-ry-target="label" class="ry-tag__label">${t}</span>${e ? `<button data-ry-target="remove" class="ry-tag__remove" aria-label="Remove" type="button">${p("close")}</button>` : ""}`, e) {
+    if (this.innerHTML = `<span data-ry-target="label" class="ry-tag__label">${t}</span>${e ? `<button data-ry-target="remove" class="ry-tag__remove" aria-label="Remove" type="button">${g("close")}</button>` : ""}`, e) {
       const s = this.$('[data-ry-target="remove"]');
       s && this.on(s, "click", (i) => {
         i.stopPropagation(), this.emit("remove", {
@@ -3893,8 +3866,8 @@ class Mt extends u {
     return this.$('[data-ry-target="label"]')?.textContent?.trim() ?? "";
   }
 }
-customElements.define("ry-tag", Mt);
-class Et extends u {
+customElements.define("ry-tag", Et);
+class Ct extends u {
   #t = [];
   setup() {
     this.#e(), this.#i();
@@ -3929,7 +3902,7 @@ class Et extends u {
       else if (t.key === "Tab")
         return;
     }
-    t.key === "Backspace" && !e.value && this.#t.length > 0 && this.#h();
+    t.key === "Backspace" && !e.value && this.#t.length > 0 && this.#l();
   };
   #r = (t) => {
     t.preventDefault();
@@ -3941,7 +3914,7 @@ class Et extends u {
   };
   #a = (t) => {
     const e = t.detail.value, s = this.#t.indexOf(e);
-    s >= 0 && (this.#t.splice(s, 1), this.#l(), this.emit("change", { values: [...this.#t] }));
+    s >= 0 && (this.#t.splice(s, 1), this.#c(), this.emit("change", { values: [...this.#t] }));
   };
   #o(t) {
     const e = this.getAttribute("max-tags");
@@ -3952,16 +3925,16 @@ class Et 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.#l(), this.emit("add", { value: t }), this.emit("change", { values: [...this.#t] });
+    this.#c(), this.emit("add", { value: t }), this.emit("change", { values: [...this.#t] });
   }
-  #h() {
+  #l() {
     const e = this.$('[data-ry-target="tags"]')?.lastElementChild;
     if (e) {
       const s = e.dataset.value ?? "";
-      e.remove(), this.#t.pop(), this.#l(), this.emit("remove", { value: s, label: s }), this.emit("change", { values: [...this.#t] });
+      e.remove(), this.#t.pop(), this.#c(), this.emit("remove", { value: s, label: s }), this.emit("change", { values: [...this.#t] });
     }
   }
-  #l() {
+  #c() {
     const t = this.$('[data-ry-target="hidden"]'), e = this.getAttribute("delimiter") ?? ",";
     t && (t.value = this.#t.join(e));
   }
@@ -3973,25 +3946,25 @@ class Et extends u {
     return [...this.#t];
   }
 }
-customElements.define("ry-tag-input", Et);
-class Ct extends u {
-}
-customElements.define("ry-hero", Ct);
+customElements.define("ry-tag-input", Ct);
 class St extends u {
+}
+customElements.define("ry-hero", St);
+class Tt extends u {
   setup() {
     this.#t();
   }
   #t() {
     if (this.$('[data-ry-target="value"]')) return;
-    const t = this.querySelector('[slot="value"]'), e = this.querySelector('[slot="label"]'), s = this.getAttribute("trend"), i = t?.textContent?.trim() ?? "", r = e?.textContent?.trim() ?? "", a = s === "up" ? `<span data-ry-target="trend" class="ry-stat__trend ry-stat__trend--up">${p("chevron-up")}</span>` : s === "down" ? `<span data-ry-target="trend" class="ry-stat__trend ry-stat__trend--down">${p("chevron-down")}</span>` : "";
+    const t = this.getAttribute("value") ?? "", e = this.getAttribute("label") ?? "", s = this.getAttribute("trend"), i = s === "up" ? `<span data-ry-target="trend" class="ry-stat__trend ry-stat__trend--up">${g("chevron-up")}</span>` : s === "down" ? `<span data-ry-target="trend" class="ry-stat__trend ry-stat__trend--down">${g("chevron-down")}</span>` : "";
     this.innerHTML = `
-      <div data-ry-target="value" class="ry-stat__value">${i}${a}</div>
-      <div data-ry-target="label" class="ry-stat__label">${r}</div>
+      <div data-ry-target="value" class="ry-stat__value">${t}${i}</div>
+      <div data-ry-target="label" class="ry-stat__label">${e}</div>
     `;
   }
 }
-customElements.define("ry-stat", St);
-class Tt extends u {
+customElements.define("ry-stat", Tt);
+class Lt extends u {
   setup() {
     this.#t();
   }
@@ -3999,23 +3972,35 @@ class Tt extends u {
     if (this.$('[data-ry-target="icon"]')) return;
     const t = this.getAttribute("icon");
     if (!t) return;
-    const e = p(t);
+    const e = g(t);
     if (!e) return;
     const s = document.createElement("div");
     s.setAttribute("data-ry-target", "icon"), s.className = "ry-feature__icon", s.innerHTML = e, this.insertBefore(s, this.firstChild);
   }
 }
-class Lt extends u {
+class It extends u {
 }
-customElements.define("ry-feature", Tt);
-customElements.define("ry-feature-grid", Lt);
+customElements.define("ry-feature", Lt);
+customElements.define("ry-feature-grid", It);
 class Ht extends u {
 }
-class It extends u {
+class Dt extends u {
+  setup() {
+    this.#t();
+  }
+  #t() {
+    if (this.$('[data-ry-target="title"]')) return;
+    const t = this.getAttribute("title") ?? "", e = this.getAttribute("price") ?? "", s = this.innerHTML;
+    this.innerHTML = `
+      ${t ? `<h3 data-ry-target="title" class="ry-pricing-card__title">${t}</h3>` : ""}
+      ${e ? `<div data-ry-target="price" class="ry-pricing-card__price">${e}</div>` : ""}
+      ${s}
+    `;
+  }
 }
 customElements.define("ry-pricing", Ht);
-customElements.define("ry-pricing-card", It);
-class Dt extends u {
+customElements.define("ry-pricing-card", Dt);
+class Bt extends u {
   #t = 0;
   #e = 0;
   #i = null;
@@ -4037,9 +4022,9 @@ class Dt extends u {
     const r = document.createElement("div");
     if (r.setAttribute("data-ry-target", "viewport"), r.className = "ry-carousel__viewport", r.appendChild(i), this.innerHTML = "", this.appendChild(r), e) {
       const a = document.createElement("button");
-      a.setAttribute("data-ry-target", "prev"), a.className = "ry-carousel__arrow ry-carousel__arrow--prev", a.setAttribute("aria-label", "Previous slide"), a.setAttribute("type", "button"), a.innerHTML = p("chevron-left"), this.appendChild(a), this.on(a, "click", () => this.prev());
+      a.setAttribute("data-ry-target", "prev"), a.className = "ry-carousel__arrow ry-carousel__arrow--prev", a.setAttribute("aria-label", "Previous slide"), a.setAttribute("type", "button"), a.innerHTML = g("chevron-left"), this.appendChild(a), this.on(a, "click", () => this.prev());
       const n = document.createElement("button");
-      n.setAttribute("data-ry-target", "next"), n.className = "ry-carousel__arrow ry-carousel__arrow--next", n.setAttribute("aria-label", "Next slide"), n.setAttribute("type", "button"), n.innerHTML = p("chevron-right"), this.appendChild(n), this.on(n, "click", () => this.next());
+      n.setAttribute("data-ry-target", "next"), n.className = "ry-carousel__arrow ry-carousel__arrow--next", n.setAttribute("aria-label", "Next slide"), n.setAttribute("type", "button"), n.innerHTML = g("chevron-right"), this.appendChild(n), this.on(n, "click", () => this.next());
     }
     if (s) {
       const a = document.createElement("div");
@@ -4050,29 +4035,29 @@ class Dt extends u {
       }
       this.appendChild(a);
     }
-    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);
+    this.on(r, "pointerdown", this.#l), this.on(r, "pointermove", this.#c), this.on(r, "pointerup", this.#u), this.on(r, "pointercancel", this.#u), this.hasAttribute("pause-on-hover") && (this.on(this, "mouseenter", () => this.#d()), 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());
   };
-  #h = (t) => {
+  #l = (t) => {
     this.#s = t.clientX, this.#r = !0, t.currentTarget.setPointerCapture(t.pointerId);
   };
-  #l = (t) => {
+  #c = (t) => {
     this.#r && t.preventDefault();
   };
-  #c = (t) => {
+  #u = (t) => {
     if (!this.#r) return;
     this.#r = !1;
     const e = t.clientX - this.#s, s = 50;
     e > s ? this.prev() : e < -s && this.next();
   };
   #n() {
-    if (this.#p(), !this.hasAttribute("autoplay")) return;
+    if (this.#d(), !this.hasAttribute("autoplay")) return;
     const t = parseInt(this.getAttribute("interval") ?? "5000", 10);
     this.#i = setInterval(() => this.next(), t);
   }
-  #p() {
+  #d() {
     this.#i && (clearInterval(this.#i), this.#i = null);
   }
   goTo(t) {
@@ -4092,29 +4077,29 @@ class Dt extends u {
     this.goTo(this.#t - 1);
   }
   teardown() {
-    this.#p();
+    this.#d();
   }
 }
-customElements.define("ry-carousel", Dt);
-const D = "ry-theme-panel";
-class Bt extends u {
+customElements.define("ry-carousel", Bt);
+const R = "ry-theme-panel";
+class Rt 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();
+    const t = this.#c();
+    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.#u(), 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", {
+        this.#t = t.dataset.value ?? "default", this.#s(), this.#o(), this.#l(), 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", {
+        this.#e = t.dataset.value ?? "auto", this.#s(), this.#o(), this.#l(), this.emit("theme-panel-change", {
           theme: this.#t,
           mode: this.#e
         });
@@ -4135,13 +4120,7 @@ class Bt extends u {
   }
   #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}`;
+    return e ? `${e}/${t}` : `/themes/${t}`;
   }
   #o() {
     this.$$('[data-ry-target="theme-btn"]').forEach((t) => {
@@ -4152,24 +4131,24 @@ class Bt extends u {
       e.setAttribute("aria-pressed", String(e.dataset.value === this.#e));
     });
   }
-  #h() {
+  #l() {
     try {
-      localStorage.setItem(D, JSON.stringify({
+      localStorage.setItem(R, JSON.stringify({
         theme: this.#t,
         mode: this.#e
       }));
     } catch {
     }
   }
-  #l() {
+  #c() {
     try {
-      const t = localStorage.getItem(D);
+      const t = localStorage.getItem(R);
       return t ? JSON.parse(t) : null;
     } catch {
       return null;
     }
   }
-  #c() {
+  #u() {
     return `
       <div data-ry-target="panel" class="ry-theme-panel">
         <div data-ry-target="theme-row" class="ry-theme-panel__row">
@@ -4200,101 +4179,391 @@ class Bt extends u {
     return this.#t;
   }
   set theme(t) {
-    this.#t = t, this.#s(), this.#o(), this.#h();
+    this.#t = t, this.#s(), this.#o(), this.#l();
   }
   get mode() {
     return this.#e;
   }
   set mode(t) {
-    this.#e = t, this.#s(), this.#o(), this.#h();
+    this.#e = t, this.#s(), this.#o(), this.#l();
   }
 }
-customElements.define("ry-theme-panel", Bt);
-class Rt extends u {
+customElements.define("ry-theme-panel", Rt);
+class Pt 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>` : "";
+    const t = this.getAttribute("avatar") ?? "", e = this.getAttribute("name") ?? "", s = this.getAttribute("role") ?? "", i = parseInt(this.getAttribute("stars") ?? "0", 10), r = this.textContent?.trim() ?? "", a = t ? `<div data-ry-target="avatar" class="ry-testimonial__avatar"><img src="${t}" alt="${e}"></div>` : "", n = i > 0 ? `<div data-ry-target="stars" class="ry-testimonial__stars">${Array.from({ length: i }, () => `<span class="ry-testimonial__star">${g("star")}</span>`).join("")}</div>` : "";
     this.innerHTML = `
-      ${l}
-      ${c}
-      <blockquote data-ry-target="quote" class="ry-testimonial__quote">${a}</blockquote>
+      ${a}
+      ${n}
+      <blockquote data-ry-target="quote" class="ry-testimonial__quote">${r}</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>` : ""}
+        <span data-ry-target="name" class="ry-testimonial__name">${e}</span>
+        ${s ? `<span data-ry-target="role" class="ry-testimonial__role">${s}</span>` : ""}
       </div>
     `;
   }
 }
-customElements.define("ry-testimonial", Rt);
-class Pt extends u {
+customElements.define("ry-testimonial", Pt);
+class Ft extends u {
   setup() {
     this.#t();
   }
   #t() {
     if (this.$('[data-ry-target="title"]')) return;
-    const t = this.querySelector('[slot="sub"]'), e = t?.innerHTML?.trim() ?? "";
-    t?.remove();
-    const s = this.innerHTML.trim();
+    const t = this.getAttribute("sub") ?? "", e = this.innerHTML.trim();
     this.innerHTML = `
-      <div data-ry-target="title" class="ry-heading__title">${s}</div>
-      ${e ? `<div data-ry-target="sub" class="ry-heading__sub">${e}</div>` : ""}
+      <div data-ry-target="title" class="ry-heading__title">${e}</div>
+      ${t ? `<div data-ry-target="sub" class="ry-heading__sub">${t}</div>` : ""}
     `;
   }
 }
-customElements.define("ry-heading", Pt);
-window.RyToast = f;
+customElements.define("ry-heading", Ft);
+function Ot(h, t) {
+  const e = h.toLowerCase(), s = t.toLowerCase();
+  if (s.startsWith(e))
+    return { score: 1, indices: Array.from({ length: e.length }, (l, c) => c) };
+  const i = s.indexOf(e);
+  if (i >= 0)
+    return { score: 0.8, indices: Array.from({ length: e.length }, (l, c) => i + c) };
+  const r = [];
+  let a = 0;
+  for (let l = 0; l < s.length && a < e.length; l++)
+    s[l] === e[a] && (r.push(l), a++);
+  if (a < e.length) return null;
+  let n = 0;
+  for (let l = 1; l < r.length; l++)
+    r[l] === (r[l - 1] ?? 0) + 1 && n++;
+  return { score: 0.3 + n / Math.max(r.length - 1, 1) * 0.4, indices: r };
+}
+function jt(h, t) {
+  if (t.length === 0) return b(h);
+  const e = new Set(t);
+  let s = "", i = !1;
+  for (let r = 0; r < h.length; r++) {
+    const a = e.has(r);
+    a && !i && (s += "<mark>", i = !0), !a && i && (s += "</mark>", i = !1), s += b(h[r] ?? "");
+  }
+  return i && (s += "</mark>"), s;
+}
+function b(h) {
+  return h.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+class Nt extends HTMLElement {
+}
+customElements.get("ry-search-item") || customElements.define("ry-search-item", Nt);
+class qt extends HTMLElement {
+}
+customElements.get("ry-search-group") || customElements.define("ry-search-group", qt);
+let Kt = 0;
+class zt extends u {
+  #t = "";
+  #e = -1;
+  #i = "keyboard";
+  #s = [];
+  setup() {
+    this.#t = `ry-search-list-${++Kt}`, this.#r();
+    const t = this.$('[data-ry-target="input"]');
+    t && this.on(t, "input", this.#a), this.on(document, "keydown", this.#c), this.on(this, "click", this.#u), this.on(this, "mouseover", this.#n);
+  }
+  #r() {
+    const t = this.getAttribute("placeholder") ?? "Search...", e = [...this.querySelectorAll("ry-search-group")], s = e.length > 0;
+    let i = 0;
+    const r = [];
+    let a = "";
+    s ? e.forEach((o, l) => {
+      const c = o.getAttribute("label") ?? "", d = [...o.querySelectorAll("ry-search-item")];
+      let p = `
+          <div data-ry-target="group-header" class="ry-search-list__group-header">${b(c)}</div>
+        `;
+      d.forEach((f) => {
+        const y = f.getAttribute("value") ?? f.textContent?.trim() ?? "", x = f.textContent?.trim() ?? "";
+        p += `
+            <div data-ry-target="item" class="ry-search-list__item"
+                 role="option" id="${this.#t}-item-${i}"
+                 data-value="${b(y)}" data-ry-order="${i}"
+                 aria-selected="false">
+              <span data-ry-target="item-label">${b(x)}</span>
+            </div>
+          `, r.push({ value: y, label: x, el: null, order: i, groupEl: null }), i++;
+      }), a += `<div data-ry-target="group" class="ry-search-list__group" data-group-index="${l}">${p}</div>`;
+    }) : [...this.querySelectorAll("ry-search-item")].forEach((l) => {
+      const c = l.getAttribute("value") ?? l.textContent?.trim() ?? "", d = l.textContent?.trim() ?? "";
+      a += `
+          <div data-ry-target="item" class="ry-search-list__item"
+               role="option" id="${this.#t}-item-${i}"
+               data-value="${b(c)}" data-ry-order="${i}"
+               aria-selected="false">
+            <span data-ry-target="item-label">${b(d)}</span>
+          </div>
+        `, r.push({ value: c, label: d, el: null, order: i, groupEl: null }), i++;
+    }), this.innerHTML = `
+      <div data-ry-target="search" class="ry-search-list__search">
+        <input data-ry-target="input" class="ry-search-list__input"
+               type="text" placeholder="${b(t)}"
+               autocomplete="off"
+               role="combobox" aria-expanded="true"
+               aria-controls="${this.#t}" aria-autocomplete="list">
+      </div>
+      <div data-ry-target="list" class="ry-search-list__list"
+           role="listbox" id="${this.#t}">
+        ${a}
+      </div>
+      <div data-ry-target="empty" class="ry-search-list__empty" hidden>No results</div>
+    `, this.$$('[data-ry-target="item"]').forEach((o, l) => {
+      const c = r[l];
+      c && (c.el = o, c.groupEl = o.closest('[data-ry-target="group"]'));
+    }), this.#s = r;
+  }
+  // --- Filter ---
+  #a = () => {
+    const t = this.$('[data-ry-target="input"]');
+    if (!t) return;
+    const e = t.value.trim();
+    this.#o(e);
+  };
+  #o(t) {
+    let e = 0;
+    if (!t)
+      this.#s.forEach((i) => {
+        i.el.removeAttribute("hidden");
+        const r = i.el.querySelector('[data-ry-target="item-label"]');
+        r && (r.innerHTML = b(i.label));
+      }), this.$$('[data-ry-target="group"]').forEach((i) => i.removeAttribute("hidden")), e = this.#s.length, this.#l();
+    else {
+      const i = [];
+      this.#s.forEach((a) => {
+        const n = Ot(t, a.label);
+        if (n) {
+          a.el.removeAttribute("hidden");
+          const o = a.el.querySelector('[data-ry-target="item-label"]');
+          o && (o.innerHTML = jt(a.label, n.indices)), i.push({ item: a, result: n }), e++;
+        } else {
+          a.el.setAttribute("hidden", "");
+          const o = a.el.querySelector('[data-ry-target="item-label"]');
+          o && (o.innerHTML = b(a.label));
+        }
+      }), i.sort((a, n) => n.result.score - a.result.score);
+      const r = /* @__PURE__ */ new Map();
+      i.forEach((a) => {
+        const n = a.item.groupEl, o = r.get(n) ?? [];
+        o.push(a), r.set(n, o);
+      }), r.forEach((a, n) => {
+        const o = n ?? this.$('[data-ry-target="list"]');
+        o && a.forEach((l) => o.appendChild(l.item.el));
+      }), this.$$('[data-ry-target="group"]').forEach((a) => {
+        a.querySelector('[data-ry-target="item"]:not([hidden])') ? a.removeAttribute("hidden") : a.setAttribute("hidden", "");
+      });
+    }
+    const s = this.$('[data-ry-target="empty"]');
+    s && (e === 0 ? s.removeAttribute("hidden") : s.setAttribute("hidden", "")), this.#e = -1, this.$$('[data-ry-target="item"][data-highlighted]').forEach((i) => {
+      i.removeAttribute("data-highlighted");
+    }), this.emit("filter", { query: t, count: e });
+  }
+  #l() {
+    const t = this.$('[data-ry-target="list"]');
+    if (!t) return;
+    const e = this.$$('[data-ry-target="group"]');
+    if (e.length > 0)
+      e.forEach((s) => {
+        const i = [...s.querySelectorAll('[data-ry-target="item"]')];
+        i.sort((r, a) => Number(r.dataset.ryOrder ?? 0) - Number(a.dataset.ryOrder ?? 0)), i.forEach((r) => s.appendChild(r));
+      });
+    else {
+      const s = [...t.querySelectorAll('[data-ry-target="item"]')];
+      s.sort((i, r) => Number(i.dataset.ryOrder ?? 0) - Number(r.dataset.ryOrder ?? 0)), s.forEach((i) => t.appendChild(i));
+    }
+  }
+  // --- Keyboard ---
+  #c = (t) => {
+    const e = document.activeElement, s = this.$('[data-ry-target="input"]');
+    if (!(e && e !== s && e !== document.body && (e instanceof HTMLInputElement || e instanceof HTMLTextAreaElement || e.isContentEditable)))
+      switch (t.key) {
+        case "ArrowDown":
+          t.preventDefault(), this.#i = "keyboard", this.#b();
+          break;
+        case "ArrowUp":
+          t.preventDefault(), this.#i = "keyboard", this.#f();
+          break;
+        case "Home":
+          t.preventDefault(), this.#i = "keyboard", this.#h(0);
+          break;
+        case "End": {
+          t.preventDefault(), this.#i = "keyboard";
+          const i = this.#d();
+          this.#h(i.length - 1);
+          break;
+        }
+        case "Enter":
+          if (this.#e >= 0) {
+            t.preventDefault();
+            const r = this.#d()[this.#e];
+            r && this.#g(r);
+          }
+          break;
+        case "Escape": {
+          t.preventDefault();
+          const i = this.$('[data-ry-target="input"]');
+          i && (i.value = "", i.blur()), this.#o("");
+          break;
+        }
+        default:
+          if (t.key.length === 1 && !t.ctrlKey && !t.metaKey && !t.altKey) {
+            const i = this.$('[data-ry-target="input"]');
+            i && e !== i && i.focus();
+          }
+      }
+  };
+  // --- Click / Hover ---
+  #u = (t) => {
+    const s = t.target.closest('[data-ry-target="item"]');
+    s instanceof HTMLElement && !s.hasAttribute("hidden") && this.#g(s);
+  };
+  #n = (t) => {
+    const s = t.target.closest('[data-ry-target="item"]');
+    if (!(s instanceof HTMLElement) || s.hasAttribute("hidden")) return;
+    const r = this.#d().indexOf(s);
+    r >= 0 && (this.#i = "mouse", this.#h(r));
+  };
+  // --- Highlight ---
+  #d() {
+    return this.$$('[data-ry-target="item"]:not([hidden])');
+  }
+  #h(t) {
+    const e = this.#d();
+    if (t < 0 || t >= e.length) return;
+    this.$$('[data-ry-target="item"][data-highlighted]').forEach((r) => {
+      r.removeAttribute("data-highlighted");
+    });
+    const s = e[t];
+    if (!s) return;
+    s.setAttribute("data-highlighted", ""), this.#i === "keyboard" && s.scrollIntoView({ block: "center" }), this.#e = t;
+    const i = this.$('[data-ry-target="input"]');
+    if (i && i.setAttribute("aria-activedescendant", s.id), this.#i === "keyboard") {
+      const r = s.dataset.value ?? "", n = s.querySelector('[data-ry-target="item-label"]')?.textContent?.trim() ?? "";
+      this.emit("highlight", { value: r, label: n });
+    }
+  }
+  #b() {
+    const t = this.#d();
+    if (this.#e < 0) {
+      this.#h(this.#A(t));
+      return;
+    }
+    const e = Math.min(this.#e + 1, t.length - 1);
+    this.#h(e);
+  }
+  #f() {
+    if (this.#e < 0) {
+      this.#h(this.#A(this.#d()));
+      return;
+    }
+    const t = Math.max(this.#e - 1, 0);
+    this.#h(t);
+  }
+  #A(t) {
+    const e = this.$('[data-ry-target="item"][aria-selected="true"]');
+    if (e instanceof HTMLElement) {
+      const s = t.indexOf(e);
+      if (s >= 0) return s;
+    }
+    return 0;
+  }
+  // --- Selection ---
+  #g(t) {
+    const e = t.dataset.value ?? "", i = t.querySelector('[data-ry-target="item-label"]')?.textContent?.trim() ?? "";
+    this.$$('[data-ry-target="item"]').forEach((a) => {
+      a.setAttribute("aria-selected", "false");
+    }), t.setAttribute("aria-selected", "true"), this.setAttribute("value", e);
+    const r = this.$('[data-ry-target="input"]');
+    r && r.value && (r.value = "", this.#o("")), this.#i === "keyboard" && t.scrollIntoView({ block: "center" }), this.emit("select", { value: e, label: i });
+  }
+  // --- Public API ---
+  get value() {
+    return this.getAttribute("value") ?? "";
+  }
+  set value(t) {
+    const e = this.$(`[data-ry-target="item"][data-value="${t}"]`);
+    e && this.#g(e);
+  }
+  clear() {
+    const t = this.$('[data-ry-target="input"]');
+    t && (t.value = ""), this.#o("");
+  }
+}
+customElements.define("ry-search-list", zt);
+class Vt extends u {
+  setup() {
+    this.getAttribute("layout") === "marquee" && this.#t();
+  }
+  #t() {
+    const t = this.$("p"), e = [...this.children].filter((i) => i.tagName !== "P");
+    if (e.length === 0) return;
+    const s = document.createElement("div");
+    s.setAttribute("data-ry-target", "track"), s.classList.add("ry-logo-bar__track"), e.forEach((i) => s.appendChild(i));
+    for (let i = 0; i < 3; i++)
+      e.forEach((r) => {
+        const a = r.cloneNode(!0);
+        a.setAttribute("aria-hidden", "true"), s.appendChild(a);
+      });
+    this.innerHTML = "", t && this.appendChild(t), this.appendChild(s);
+  }
+}
+customElements.define("ry-logo-bar", Vt);
+window.RyToast = m;
 console.log("ry-ui loaded");
 export {
-  P as RyAccordion,
-  U as RyAlert,
-  N as RyButton,
-  q as RyButtonGroup,
-  V as RyCard,
-  Dt as RyCarousel,
-  at as RyCode,
-  mt as RyColorInput,
-  yt as RyColorPicker,
-  rt as RyCombobox,
-  Z as RyDrawer,
-  O as RyDropdown,
+  O as RyAccordion,
+  W as RyAlert,
+  K as RyButton,
+  U as RyCard,
+  Bt as RyCarousel,
+  nt as RyCode,
+  vt as RyColorInput,
+  bt as RyColorPicker,
+  at as RyCombobox,
+  Q as RyDrawer,
+  q as RyDropdown,
   u as RyElement,
-  nt as RyExample,
-  Tt as RyFeature,
-  Lt as RyFeatureGrid,
-  W as RyField,
-  $t as RyGradientPicker,
-  Pt as RyHeading,
-  Ct as RyHero,
-  ot as RyIcon,
-  pt as RyKnob,
-  F as RyModal,
-  gt as RyNumberSelect,
+  ot as RyExample,
+  Lt as RyFeature,
+  It as RyFeatureGrid,
+  Y as RyField,
+  wt as RyGradientPicker,
+  Ft as RyHeading,
+  St as RyHero,
+  ht as RyIcon,
+  gt as RyKnob,
+  Vt as RyLogoBar,
+  j as RyModal,
+  ft as RyNumberSelect,
   Ht as RyPricing,
-  It as RyPricingCard,
-  et as RySelect,
-  ut as RySlider,
-  K as RySplit,
-  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,
-  dt as RyToggleButton,
-  J as RyTooltip,
-  w as RyTree,
-  _t as RyTreeItem,
-  p as getIcon,
-  Nt as getIconNames,
-  C as processTransforms,
-  jt as registerIcon,
-  Ot as registerIcons,
-  M as transform
+  Dt as RyPricingCard,
+  zt as RySearchList,
+  st as RySelect,
+  pt as RySlider,
+  z as RySplit,
+  Tt as RyStat,
+  G as RySwitch,
+  N as RyTabs,
+  Et as RyTag,
+  Ct as RyTagInput,
+  Pt as RyTestimonial,
+  Rt as RyThemePanel,
+  V as RyThemeToggle,
+  m as RyToast,
+  ut as RyToggleButton,
+  Z as RyTooltip,
+  k as RyTree,
+  Mt as RyTreeItem,
+  g as getIcon,
+  Yt as getIconNames,
+  T as processTransforms,
+  Ut as registerIcon,
+  Wt as registerIcons,
+  C as transform
 };
 //# sourceMappingURL=ry-ui.js.map