@ryanhelsing/ry-ui 1.0.1 → 1.0.3

package/dist/ry-ui.js

@@ -1,4 +1,4 @@
-class d extends HTMLElement {
+class u extends HTMLElement {
   // Store for cleanup functions
   #t = [];
   // Store for MutationObserver
@@ -89,7 +89,7 @@ class d extends HTMLElement {
     this.on(t, "keydown", a), i?.focus();
   }
 }
-const E = [
+const D = [
   // Layout
   "page",
   "header",
@@ -132,26 +132,39 @@ const E = [
   "toggle-button",
   "slider",
   "knob",
+  "number-select",
   "color-picker",
-  "color-input"
-], S = new RegExp(
-  `<(/?)(${E.join("|")})(\\s|>|/)`,
+  "color-input",
+  "gradient-picker",
+  "tree",
+  "tree-item",
+  "tag",
+  "tag-input",
+  "hero",
+  "stat",
+  "feature",
+  "feature-grid",
+  "pricing",
+  "pricing-card",
+  "carousel"
+], B = new RegExp(
+  `<(/?)(${D.join("|")})(\\s|>|/)`,
   "g"
 );
-function k(o) {
-  return o.replace(S, "<$1ry-$2$3");
+function M(h) {
+  return h.replace(B, "<$1ry-$2$3");
 }
-function _() {
-  document.querySelectorAll("ry").forEach((o) => {
-    const t = k(o.innerHTML), e = document.createElement("template");
-    e.innerHTML = t, o.replaceWith(e.content);
-  }), document.querySelectorAll("template[ry]").forEach((o) => {
-    const t = k(o.innerHTML), e = document.createElement("template");
-    e.innerHTML = t, o.replaceWith(e.content);
+function E() {
+  document.querySelectorAll("ry").forEach((h) => {
+    const t = M(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");
+    e.innerHTML = t, h.replaceWith(e.content);
   });
 }
-document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", _) : _();
-class T extends d {
+document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", E) : E();
+class R extends u {
   setup() {
     this.#t(), this.$$('[data-ry-target="trigger"]').forEach((t) => {
       this.on(t, "click", this.#i);
@@ -227,10 +240,10 @@ class T extends d {
     this.$$('[data-ry-target="item"]').forEach((t) => this.close(t));
   }
 }
-customElements.define("ry-accordion", T);
+customElements.define("ry-accordion", R);
 customElements.get("ry-accordion-item") || customElements.define("ry-accordion-item", class extends HTMLElement {
 });
-class H extends d {
+class P extends u {
   #t = null;
   #e = 0;
   setup() {
@@ -279,8 +292,8 @@ class H extends d {
     this.state === "open" ? this.close() : this.open();
   }
 }
-customElements.define("ry-modal", H);
-class L extends d {
+customElements.define("ry-modal", P);
+class F extends u {
   setup() {
     this.#t(), this.$$('[data-ry-target="trigger"]').forEach((t) => {
       this.on(t, "click", this.#i);
@@ -291,8 +304,8 @@ class L extends d {
     if (t.length === 0) return;
     const e = t.findIndex((r) => r.hasAttribute("active")), s = e === -1 ? 0 : e, i = document.createElement("div");
     i.setAttribute("data-ry-target", "list"), i.className = "ry-tabs__list", i.setAttribute("role", "tablist"), t.forEach((r, a) => {
-      const n = r.getAttribute("title") ?? `Tab ${a + 1}`, l = a === s, h = document.createElement("button");
-      h.setAttribute("data-ry-target", "trigger"), h.className = "ry-tabs__trigger", h.setAttribute("role", "tab"), h.setAttribute("aria-selected", String(l)), h.textContent = n, i.appendChild(h), r.setAttribute("data-ry-target", "panel"), r.className = "ry-tabs__panel", r.setAttribute("role", "tabpanel"), r.dataset.ryState = l ? "active" : "", r.removeAttribute("title"), r.removeAttribute("active");
+      const n = r.getAttribute("title") ?? `Tab ${a + 1}`, o = a === s, l = document.createElement("button");
+      l.setAttribute("data-ry-target", "trigger"), l.className = "ry-tabs__trigger", l.setAttribute("role", "tab"), l.setAttribute("aria-selected", String(o)), l.textContent = n, i.appendChild(l), r.setAttribute("data-ry-target", "panel"), r.className = "ry-tabs__panel", r.setAttribute("role", "tabpanel"), r.dataset.ryState = o ? "active" : "", r.removeAttribute("title"), r.removeAttribute("active");
     }), this.insertBefore(i, this.firstChild);
   }
   #e() {
@@ -300,8 +313,8 @@ class L extends d {
     t.forEach((i, r) => {
       const a = e[r];
       if (!a) return;
-      const n = i.id || `ry-tab-${this.id || ""}-${r}`, l = a.id || `ry-tabpanel-${this.id || ""}-${r}`;
-      i.id = n, a.id = l, i.setAttribute("aria-controls", l), a.setAttribute("aria-labelledby", n), i.setAttribute("tabindex", i.getAttribute("aria-selected") === "true" ? "0" : "-1");
+      const n = i.id || `ry-tab-${this.id || ""}-${r}`, o = a.id || `ry-tabpanel-${this.id || ""}-${r}`;
+      i.id = n, a.id = o, i.setAttribute("aria-controls", o), a.setAttribute("aria-labelledby", n), i.setAttribute("tabindex", i.getAttribute("aria-selected") === "true" ? "0" : "-1");
     }), t.findIndex((i) => i.getAttribute("aria-selected") === "true") === -1 && t.length > 0 && this.select(0);
   }
   #i = (t) => {
@@ -342,10 +355,10 @@ class L extends d {
     return this.$$('[data-ry-target="trigger"]').findIndex((e) => e.getAttribute("aria-selected") === "true");
   }
 }
-customElements.define("ry-tabs", L);
+customElements.define("ry-tabs", F);
 customElements.get("ry-tab") || customElements.define("ry-tab", class extends HTMLElement {
 });
-class I extends d {
+class j extends u {
   setup() {
     this.#t();
     const t = this.$('[data-ry-target="trigger"]');
@@ -375,24 +388,30 @@ class I extends d {
   };
   open() {
     if (this.state === "open") return;
-    this.$('[data-ry-target="trigger"]')?.setAttribute("aria-expanded", "true"), this.state = "open", this.nextFrame().then(() => {
+    this.#s(), this.$('[data-ry-target="trigger"]')?.setAttribute("aria-expanded", "true"), this.state = "open", this.nextFrame().then(() => {
       this.$('[data-ry-target="item"], ry-menu-item')?.focus();
     }), this.emit("open");
   }
   close() {
     if (this.state === "closed") return;
-    this.$('[data-ry-target="trigger"]')?.setAttribute("aria-expanded", "false"), this.state = "closed", this.emit("close");
+    this.$('[data-ry-target="trigger"]')?.setAttribute("aria-expanded", "false"), this.state = "closed", this.removeAttribute("data-ry-position"), this.emit("close");
+  }
+  #s() {
+    const t = this.$('[data-ry-target="menu"], ry-menu');
+    if (!t) return;
+    const e = this.getBoundingClientRect(), s = t.scrollHeight || 240, i = window.innerHeight - e.bottom, r = e.top;
+    i < s && r > i ? this.setAttribute("data-ry-position", "top") : this.setAttribute("data-ry-position", "bottom");
   }
   toggle() {
     this.state === "open" ? this.close() : this.open();
   }
 }
-customElements.define("ry-dropdown", I);
+customElements.define("ry-dropdown", j);
 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 D extends d {
+class N extends u {
   setup() {
     this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.setAttribute("role", "button"), this.on(this, "click", this.#t), this.on(this, "keydown", this.#e);
   }
@@ -407,8 +426,8 @@ class D extends d {
     (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.click());
   };
 }
-customElements.define("ry-button", D);
-class F extends d {
+customElements.define("ry-button", N);
+class O extends u {
   #t = ["light", "dark"];
   #e = 0;
   setup() {
@@ -448,8 +467,8 @@ class F extends d {
     }
   }
 }
-customElements.define("ry-theme-toggle", F);
-class j extends d {
+customElements.define("ry-theme-toggle", O);
+class K extends u {
   setup() {
     this.#t();
     const t = this.$("[close]");
@@ -469,8 +488,8 @@ class j extends d {
     }, 200), this.emit("close");
   }
 }
-customElements.define("ry-alert", j);
-class B extends d {
+customElements.define("ry-alert", K);
+class q extends u {
   setup() {
     this.#t();
   }
@@ -486,9 +505,9 @@ class B extends d {
     i.setAttribute("data-ry-target", "label"), i.className = "ry-label", i.setAttribute("for", s), i.textContent = t, this.insertBefore(i, e);
   }
 }
-customElements.define("ry-field", B);
-let R = 0;
-class P extends d {
+customElements.define("ry-field", q);
+let V = 0;
+class z extends u {
   #t = null;
   static observedAttributes = ["checked", "disabled"];
   setup() {
@@ -496,7 +515,7 @@ class P extends d {
   }
   #e() {
     if (this.$('[data-ry-target="track"]')) return;
-    const t = `ry-switch-${++R}`, e = this.getAttribute("name") ?? "", s = this.hasAttribute("checked"), i = this.hasAttribute("disabled"), r = this.textContent?.trim() ?? "";
+    const t = `ry-switch-${++V}`, 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
@@ -541,41 +560,41 @@ class P extends d {
     this.#t && (this.#t.value = t);
   }
 }
-customElements.define("ry-switch", P);
-let O = 0;
-class K extends d {
+customElements.define("ry-switch", z);
+let U = 0;
+class Y extends u {
   #t = null;
   #e = null;
   #i = null;
   setup() {
-    this.#i = `ry-tooltip-${++O}`, this.#s();
+    this.#i = `ry-tooltip-${++U}`, this.#s();
     const t = this.firstElementChild;
-    t && (t.setAttribute("aria-describedby", this.#i), this.on(t, "mouseenter", this.#r), this.on(t, "mouseleave", this.#l), this.on(t, "focusin", this.#r), this.on(t, "focusout", this.#l)), this.on(document, "keydown", this.#c);
+    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);
   }
   #r = () => {
     this.#t && clearTimeout(this.#t), this.#t = setTimeout(() => {
-      this.#n();
+      this.#a();
     }, 200);
   };
-  #n = () => {
+  #a = () => {
     const t = this.getAttribute("position") ?? "top";
     this.setAttribute("data-ry-position", t), this.state = "open";
   };
-  #l = () => {
+  #o = () => {
     this.#t && (clearTimeout(this.#t), this.#t = null), this.state = "closed";
   };
-  #c = (t) => {
-    t.key === "Escape" && this.state === "open" && this.#l();
+  #l = (t) => {
+    t.key === "Escape" && this.state === "open" && this.#o();
   };
   teardown() {
     this.#t && clearTimeout(this.#t);
   }
 }
-customElements.define("ry-tooltip", K);
-class N extends d {
+customElements.define("ry-tooltip", Y);
+class W extends u {
   #t = null;
   #e = 0;
   setup() {
@@ -620,38 +639,38 @@ class N extends d {
     this.state === "open" ? this.close() : this.open();
   }
 }
-customElements.define("ry-drawer", N);
-const U = 4e3;
-class p extends d {
+customElements.define("ry-drawer", W);
+const X = 4e3;
+class f extends u {
   #t = null;
   static observedAttributes = ["variant", "duration"];
   // Static container for programmatic toasts
   static #e = null;
   static #i() {
-    return p.#e || (p.#e = document.createElement("div"), p.#e.setAttribute("data-ry-target", "toast-container"), p.#e.className = "ry-toast-container", document.body.appendChild(p.#e)), p.#e;
+    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;
   }
   // 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)), p.#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)), f.#i().appendChild(e), e;
   }
   static success(t, e) {
-    return p.show({ message: t, variant: "success", duration: e });
+    return f.show({ message: t, variant: "success", duration: e });
   }
   static error(t, e) {
-    return p.show({ message: t, variant: "error", duration: e });
+    return f.show({ message: t, variant: "error", duration: e });
   }
   static info(t, e) {
-    return p.show({ message: t, variant: "info", duration: e });
+    return f.show({ message: t, variant: "info", duration: e });
   }
   static warning(t, e) {
-    return p.show({ message: t, variant: "warning", duration: e });
+    return f.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(U), 10);
+    const e = parseInt(this.getAttribute("duration") ?? String(X), 10);
     e > 0 && (this.#t = setTimeout(() => this.dismiss(), e)), requestAnimationFrame(() => {
       this.state = "visible";
     });
@@ -683,62 +702,180 @@ class p extends d {
     this.#t && clearTimeout(this.#t);
   }
 }
-customElements.define("ry-toast", p);
-let W = 0;
-class V extends d {
+customElements.define("ry-toast", f);
+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
+  "chevron-down": '<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="M6 9l6 6 6-6"/></svg>',
+  // Chevron up
+  "chevron-up": '<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 15l-6-6-6 6"/></svg>',
+  // Chevron right
+  "chevron-right": '<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="M9 18l6-6-6-6"/></svg>',
+  // Chevron left
+  "chevron-left": '<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="M15 18l-6-6 6-6"/></svg>',
+  // Check / Checkmark
+  check: '<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="M20 6L9 17l-5-5"/></svg>',
+  // Copy
+  copy: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>',
+  // Sun (light mode)
+  sun: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="M4.93 4.93l1.41 1.41"/><path d="M17.66 17.66l1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="M6.34 17.66l-1.41 1.41"/><path d="M19.07 4.93l-1.41 1.41"/></svg>',
+  // Moon (dark mode)
+  moon: '<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="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>',
+  // Info
+  info: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>',
+  // Warning / Alert triangle
+  warning: '<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="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>',
+  // Error / X circle
+  error: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6"/><path d="M9 9l6 6"/></svg>',
+  // Success / Check circle
+  success: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9 12l2 2 4-4"/></svg>',
+  // Search
+  search: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>',
+  // Menu / Hamburger
+  menu: '<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="M3 12h18"/><path d="M3 6h18"/><path d="M3 18h18"/></svg>',
+  // Plus
+  plus: '<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="M12 5v14"/><path d="M5 12h14"/></svg>',
+  // Minus
+  minus: '<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="M5 12h14"/></svg>',
+  // Settings / Gear
+  settings: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/></svg>',
+  // User
+  user: '<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="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>',
+  // Heart
+  heart: '<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="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>',
+  // Star
+  star: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>',
+  // Trash
+  trash: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>',
+  // Edit / Pencil
+  edit: '<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="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>',
+  // External link
+  "external-link": '<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 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>',
+  // Download
+  download: '<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="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>',
+  // Upload
+  upload: '<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="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>',
+  // Folder (closed)
+  folder: '<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="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 2H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"/></svg>',
+  // Folder open
+  "folder-open": '<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="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 2H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z"/><path d="M2 10h20"/></svg>',
+  // File
+  file: '<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="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>',
+  // Gradient: solid color
+  "gradient-solid": '<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none"><rect x="4" y="4" width="16" height="16" rx="2"/></svg>',
+  // Gradient: linear
+  "gradient-linear": '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="21" x2="21" y2="3"/><line x1="3" y1="15" x2="15" y2="3"/><line x1="9" y1="21" x2="21" y2="9"/></svg>',
+  // Gradient: radial
+  "gradient-radial": '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="12" cy="12" r="3"/><circle cx="12" cy="12" r="6.5"/></svg>',
+  // Shape: circle
+  "shape-circle": '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/></svg>',
+  // Shape: ellipse
+  "shape-ellipse": '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="12" rx="10" ry="6"/></svg>'
+};
+function p(h) {
+  return w[h] ?? "";
+}
+function Tt(h, t) {
+  w[h] = t;
+}
+function Lt(h) {
+  Object.assign(w, h);
+}
+function It() {
+  return Object.keys(w);
+}
+let G = 0;
+class J extends u {
   #t = null;
   #e = -1;
   #i = "";
   #s = null;
+  #r = /* @__PURE__ */ new Set();
   // Store options reference
   _options = [];
+  get #a() {
+    return this.hasAttribute("multiple");
+  }
   static observedAttributes = ["value", "disabled"];
   setup() {
-    this.#t = `ry-select-${++W}`, this.#r(), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.on(this, "click", this.#n), this.on(this, "keydown", this.#l), this.on(document, "click", this.#c), this.hasAttribute("data-ry-state") || (this.state = "closed");
+    this.#t = `ry-select-${++G}`, 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.#h), this.#a && this.on(this, "ry:remove", this.#n), this.hasAttribute("data-ry-state") || (this.state = "closed");
     const t = this.getAttribute("value");
-    t && (this.value = t);
-  }
-  #r() {
-    const t = [...this.querySelectorAll("ry-option")].map((n) => ({
-      value: n.getAttribute("value") ?? n.textContent?.trim() ?? "",
-      label: n.textContent?.trim() ?? "",
-      disabled: n.hasAttribute("disabled")
-    })), e = this.getAttribute("placeholder") ?? "Select...", s = this.getAttribute("name") ?? "", i = this.hasAttribute("disabled"), r = t.map(
-      (n) => `<option value="${n.value}"${n.disabled ? " disabled" : ""}>${n.label}</option>`
-    ).join(""), a = t.map((n, l) => `
+    if (t)
+      if (this.#a)
+        for (const e of t.split(",").map((s) => s.trim()).filter(Boolean))
+          this.#d(e);
+      else
+        this.value = t;
+  }
+  #o() {
+    const t = [...this.querySelectorAll("ry-option")].map((o) => ({
+      value: o.getAttribute("value") ?? o.textContent?.trim() ?? "",
+      label: o.textContent?.trim() ?? "",
+      disabled: o.hasAttribute("disabled")
+    })), e = this.getAttribute("placeholder") ?? "Select...", s = this.getAttribute("name") ?? "", i = this.hasAttribute("disabled"), r = this.#a, a = t.map(
+      (o) => `<option value="${o.value}"${o.disabled ? " disabled" : ""}>${o.label}</option>`
+    ).join(""), n = t.map((o, l) => `
       <div data-ry-target="option" class="ry-select__option"
            role="option"
            id="${this.#t}-option-${l}"
-           data-value="${n.value}"
-           ${n.disabled ? "data-disabled" : ""}
-           aria-disabled="${n.disabled}">
-        ${n.label}
+           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>` : ""}
+        <span class="ry-select__option-label">${o.label}</span>
       </div>
     `).join("");
-    this.innerHTML = `
-      <div data-ry-target="trigger" class="ry-select__trigger" aria-haspopup="listbox" aria-expanded="false">
-        <span data-ry-target="value" class="ry-select__value">${e}</span>
-        <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">
-        ${a}
-      </div>
-      <select data-ry-target="native" class="ry-select__native" ${s ? `name="${s}"` : ""} tabindex="-1" aria-hidden="true" ${i ? "disabled" : ""}>
-        <option value="">${e}</option>
-        ${r}
-      </select>
-    `, this._options = t;
+    if (r) {
+      const o = this.hasAttribute("clearable");
+      this.innerHTML = `
+        <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>` : ""}
+          <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">
+          ${n}
+        </div>
+        <select data-ry-target="native" class="ry-select__native" ${s ? `name="${s}"` : ""} multiple tabindex="-1" aria-hidden="true" ${i ? "disabled" : ""}>
+          ${a}
+        </select>
+      `;
+      const l = this.$('[data-ry-target="clear"]');
+      l && this.on(l, "click", (c) => {
+        c.stopPropagation(), this.#M();
+      });
+    } else
+      this.innerHTML = `
+        <div data-ry-target="trigger" class="ry-select__trigger" aria-haspopup="listbox" aria-expanded="false">
+          <span data-ry-target="value" class="ry-select__value">${e}</span>
+          <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">
+          ${n}
+        </div>
+        <select data-ry-target="native" class="ry-select__native" ${s ? `name="${s}"` : ""} tabindex="-1" aria-hidden="true" ${i ? "disabled" : ""}>
+          <option value="">${e}</option>
+          ${a}
+        </select>
+      `;
+    this._options = t;
   }
-  #n = (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")) {
-      this.#o(s), this.close();
+      if (this.#a) {
+        const r = s.dataset.value ?? "";
+        this.#d(r);
+      } else
+        this.#$(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) {
@@ -746,7 +883,12 @@ class V extends d {
       case " ":
         if (t.preventDefault(), e && this.#e >= 0) {
           const i = this.$$('[data-ry-target="option"]:not([data-disabled])')[this.#e];
-          i && (this.#o(i), this.close());
+          if (i)
+            if (this.#a) {
+              const r = i.dataset.value ?? "";
+              this.#d(r);
+            } else
+              this.#$(i), this.close();
         } else
           this.toggle();
         break;
@@ -754,43 +896,54 @@ class V extends d {
         e && (t.preventDefault(), this.close());
         break;
       case "ArrowDown":
-        t.preventDefault(), e ? this.#u() : this.open();
+        t.preventDefault(), e ? this.#v() : this.open();
         break;
       case "ArrowUp":
-        t.preventDefault(), e && this.#f();
+        t.preventDefault(), e && this.#b();
         break;
       case "Home":
-        e && (t.preventDefault(), this.#b());
+        e && (t.preventDefault(), this.#w());
         break;
       case "End":
         e && (t.preventDefault(), this.#g());
         break;
+      case "Backspace":
+        if (this.#a && this.#r.size > 0) {
+          const s = [...this.#r], i = s[s.length - 1];
+          i && this.#d(i);
+        }
+        break;
       default:
         t.key.length === 1 && !t.ctrlKey && !t.metaKey && this.#p(t.key);
         break;
     }
   };
-  #c = (t) => {
+  #h = (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.#d(e);
+  };
   #p(t) {
     this.#s && clearTimeout(this.#s), this.#i += t.toLowerCase();
     const e = this.$$('[data-ry-target="option"]:not([data-disabled])'), s = e.findIndex(
       (i) => i.textContent?.trim().toLowerCase().startsWith(this.#i)
     );
-    if (s >= 0)
+    if (s >= 0) {
       if (this.state === "open")
-        this.#a(s);
-      else {
+        this.#u(s);
+      else if (!this.#a) {
         const i = e[s];
-        i && this.#o(i);
+        i && this.#$(i);
       }
+    }
     this.#s = setTimeout(() => {
       this.#i = "";
     }, 500);
   }
-  #a(t) {
+  #u(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) => {
@@ -802,22 +955,62 @@ class V extends d {
     const i = this.$('[data-ry-target="trigger"]');
     i && i.setAttribute("aria-activedescendant", s.id);
   }
-  #u() {
+  #v() {
     const t = this.$$('[data-ry-target="option"]:not([data-disabled])'), e = Math.min(this.#e + 1, t.length - 1);
-    this.#a(e);
+    this.#u(e);
   }
-  #f() {
+  #b() {
     const t = Math.max(this.#e - 1, 0);
-    this.#a(t);
+    this.#u(t);
   }
-  #b() {
-    this.#a(0);
+  #w() {
+    this.#u(0);
   }
   #g() {
     const t = this.$$('[data-ry-target="option"]:not([data-disabled])');
-    this.#a(t.length - 1);
+    this.#u(t.length - 1);
   }
-  #o(t) {
+  // --- Multi-select methods ---
+  #d(t) {
+    const e = this.getAttribute("max-selections");
+    if (this.#r.has(t))
+      this.#r.delete(t);
+    else {
+      if (e && this.#r.size >= parseInt(e, 10)) return;
+      this.#r.add(t);
+    }
+    this.#y(), this.#m(), this.#f(), this.setAttribute("value", [...this.#r].join(",")), this.emit("change", { value: this.value, label: "" });
+  }
+  #y() {
+    const t = this.$('[data-ry-target="tags"]'), e = this.$('[data-ry-target="value"]');
+    if (t) {
+      t.innerHTML = "";
+      for (const s of this.#r) {
+        const i = this._options.find((a) => a.value === s);
+        if (!i) continue;
+        const r = document.createElement("ry-tag");
+        r.setAttribute("removable", ""), r.setAttribute("size", "sm"), r.setAttribute("data-value", s), r.textContent = i.label, t.appendChild(r);
+      }
+      e && (this.#r.size > 0 ? e.style.display = "none" : e.style.display = "");
+    }
+  }
+  #m() {
+    const t = this.$('[data-ry-target="native"]');
+    if (t)
+      for (const e of t.options)
+        e.selected = this.#r.has(e.value);
+  }
+  #f() {
+    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.#y(), this.#m(), this.#f(), this.setAttribute("value", ""), this.emit("change", { value: "", label: "" });
+  }
+  // --- Single-select method ---
+  #$(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"]');
@@ -829,16 +1022,19 @@ class V extends d {
     if (this.state === "open") return;
     this.state = "open";
     const t = this.$('[data-ry-target="trigger"]');
-    t && t.setAttribute("aria-expanded", "true"), this.#w();
-    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.#a(i);
-    } else
-      this.#a(0);
+    if (t && t.setAttribute("aria-expanded", "true"), this.#H(), this.#a)
+      this.#u(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.#u(i);
+      } else
+        this.#u(0);
+    }
     this.emit("open");
   }
-  #w() {
+  #H() {
     const t = this.$('[data-ry-target="dropdown"]');
     if (!t) return;
     this.removeAttribute("data-ry-position");
@@ -857,94 +1053,38 @@ class V extends d {
     this.state === "open" ? this.close() : this.open();
   }
   get value() {
-    return this.getAttribute("value") ?? "";
+    return this.#a ? [...this.#r].join(",") : this.getAttribute("value") ?? "";
   }
   set value(t) {
-    const e = this.$(`[data-ry-target="option"][data-value="${t}"]`);
-    e && this.#o(e);
+    if (this.#a) {
+      this.#r.clear();
+      for (const e of t.split(",").map((s) => s.trim()).filter(Boolean))
+        this.#r.add(e);
+      this.#y(), this.#m(), this.#f(), this.setAttribute("value", t);
+    } else {
+      const e = this.$(`[data-ry-target="option"][data-value="${t}"]`);
+      e && this.#$(e);
+    }
+  }
+  get values() {
+    return [...this.#r];
   }
   teardown() {
     this.#s && clearTimeout(this.#s);
   }
 }
-class q extends HTMLElement {
-}
-customElements.define("ry-option", q);
-customElements.define("ry-select", V);
-const v = {
-  // 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
-  "chevron-down": '<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="M6 9l6 6 6-6"/></svg>',
-  // Chevron up
-  "chevron-up": '<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 15l-6-6-6 6"/></svg>',
-  // Chevron right
-  "chevron-right": '<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="M9 18l6-6-6-6"/></svg>',
-  // Chevron left
-  "chevron-left": '<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="M15 18l-6-6 6-6"/></svg>',
-  // Check / Checkmark
-  check: '<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="M20 6L9 17l-5-5"/></svg>',
-  // Copy
-  copy: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>',
-  // Sun (light mode)
-  sun: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2"/><path d="M12 20v2"/><path d="M4.93 4.93l1.41 1.41"/><path d="M17.66 17.66l1.41 1.41"/><path d="M2 12h2"/><path d="M20 12h2"/><path d="M6.34 17.66l-1.41 1.41"/><path d="M19.07 4.93l-1.41 1.41"/></svg>',
-  // Moon (dark mode)
-  moon: '<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="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"/></svg>',
-  // Info
-  info: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>',
-  // Warning / Alert triangle
-  warning: '<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="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>',
-  // Error / X circle
-  error: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M15 9l-6 6"/><path d="M9 9l6 6"/></svg>',
-  // Success / Check circle
-  success: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9 12l2 2 4-4"/></svg>',
-  // Search
-  search: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>',
-  // Menu / Hamburger
-  menu: '<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="M3 12h18"/><path d="M3 6h18"/><path d="M3 18h18"/></svg>',
-  // Plus
-  plus: '<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="M12 5v14"/><path d="M5 12h14"/></svg>',
-  // Minus
-  minus: '<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="M5 12h14"/></svg>',
-  // Settings / Gear
-  settings: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/></svg>',
-  // User
-  user: '<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="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>',
-  // Heart
-  heart: '<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="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>',
-  // Star
-  star: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>',
-  // Trash
-  trash: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>',
-  // Edit / Pencil
-  edit: '<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="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>',
-  // External link
-  "external-link": '<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 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>',
-  // Download
-  download: '<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="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>',
-  // Upload
-  upload: '<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="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>'
-};
-function y(o) {
-  return v[o] ?? "";
-}
-function ot(o, t) {
-  v[o] = t;
+class Z extends HTMLElement {
 }
-function ht(o) {
-  Object.assign(v, o);
-}
-function lt() {
-  return Object.keys(v);
-}
-class z extends d {
+customElements.define("ry-option", Z);
+customElements.define("ry-select", J);
+class Q extends u {
   #t = "";
   static get observedAttributes() {
     return ["language", "title", "line-numbers"];
   }
   setup() {
     const t = this.querySelector("template");
-    t ? this.#t = this.#u(t.innerHTML) : this.#t = this.textContent?.trim() ?? "", this.#e();
+    t ? this.#t = this.#n(t.innerHTML) : this.#t = this.textContent?.trim() ?? "", this.#e();
     const e = this.$('[data-ry-target="copy"]');
     e && this.on(e, "click", this.#i);
   }
@@ -955,7 +1095,7 @@ class z extends d {
       <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">
-          ${y("copy")}
+          ${p("copy")}
         </button>
       </div>
       <div data-ry-target="content" class="ry-code__content">
@@ -967,8 +1107,8 @@ class z extends d {
     const t = this.$('[data-ry-target="copy"]');
     if (t)
       try {
-        await navigator.clipboard.writeText(this.#t), t.innerHTML = y("check"), t.classList.add("ry-code__copy--success"), this.emit("copy", { code: this.#t }), setTimeout(() => {
-          t.innerHTML = y("copy"), t.classList.remove("ry-code__copy--success");
+        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");
         }, 2e3);
       } catch {
         this.emit("copy-error");
@@ -980,13 +1120,13 @@ class z extends d {
         return this.#r(t);
       case "js":
       case "javascript":
-        return this.#n(t);
+        return this.#a(t);
       case "html":
-        return this.#l(t);
+        return this.#o(t);
       case "json":
-        return this.#c(t);
+        return this.#l(t);
       default:
-        return this.#a(t);
+        return this.#h(t);
     }
   }
   #r(t) {
@@ -994,9 +1134,9 @@ class z extends d {
     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;
         }
       }
@@ -1020,14 +1160,14 @@ class z extends d {
         e.push({ type: "color", value: n[1], color: n[1] }), s = s.slice(n[1].length);
         continue;
       }
-      const l = s.match(/^(-?[\d.]+(?:px|em|rem|%|vh|vw|deg|s|ms)?)/);
-      if (l?.[1]) {
-        e.push({ type: "number", value: l[1] }), s = s.slice(l[1].length);
+      const o = s.match(/^(-?[\d.]+(?:px|em|rem|%|vh|vw|deg|s|ms)?)/);
+      if (o?.[1]) {
+        e.push({ type: "number", value: o[1] }), s = s.slice(o[1].length);
         continue;
       }
-      const h = s.match(/^(['"])((?:[^\\]|\\.)*?)\1/);
-      if (h) {
-        e.push({ type: "string", value: h[0] }), s = s.slice(h[0].length);
+      const l = s.match(/^(['"])((?:[^\\]|\\.)*?)\1/);
+      if (l) {
+        e.push({ type: "string", value: l[0] }), s = s.slice(l[0].length);
         continue;
       }
       const c = s[0];
@@ -1035,32 +1175,32 @@ class z extends d {
         e.push({ type: "punctuation", value: c }), s = s.slice(1);
         continue;
       }
-      const u = s.match(/^(\s+)/);
-      if (u?.[1]) {
-        e.push({ type: "text", value: u[1] }), s = s.slice(u[1].length);
+      const d = s.match(/^(\s+)/);
+      if (d?.[1]) {
+        e.push({ type: "text", value: d[1] }), s = s.slice(d[1].length);
         continue;
       }
-      const $ = s.match(/^([\w-]+)/);
-      if ($?.[1]) {
-        const b = $[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 g = s.match(/^([\w-]+)/);
+      if (g?.[1]) {
+        const y = g[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 x = s[0];
-      x && e.push({ type: "text", value: x }), s = s.slice(1);
+      const b = s[0];
+      b && e.push({ type: "text", value: b }), s = s.slice(1);
     }
-    return e.map((i) => this.#p(i)).join("");
+    return e.map((i) => this.#c(i)).join("");
   }
-  #n(t) {
+  #a(t) {
     const e = [];
     let s = t;
     const i = ["const", "let", "var", "function", "return", "if", "else", "for", "while", "do", "switch", "case", "break", "continue", "try", "catch", "finally", "throw", "new", "class", "extends", "import", "export", "default", "from", "async", "await", "typeof", "instanceof", "in", "of", "true", "false", "null", "undefined", "this", "super", "static", "get", "set"];
     for (; s.length > 0; ) {
       if (s.startsWith("//")) {
-        const u = s.indexOf(`
+        const d = s.indexOf(`
 `);
-        if (u !== -1) {
-          e.push({ type: "comment", value: s.slice(0, u) }), s = s.slice(u);
+        if (d !== -1) {
+          e.push({ type: "comment", value: s.slice(0, d) }), s = s.slice(d);
           continue;
         } else {
           e.push({ type: "comment", value: s });
@@ -1068,9 +1208,9 @@ class z extends d {
         }
       }
       if (s.startsWith("/*")) {
-        const u = s.indexOf("*/");
-        if (u !== -1) {
-          e.push({ type: "comment", value: s.slice(0, u + 2) }), s = s.slice(u + 2);
+        const d = s.indexOf("*/");
+        if (d !== -1) {
+          e.push({ type: "comment", value: s.slice(0, d + 2) }), s = s.slice(d + 2);
           continue;
         }
       }
@@ -1086,26 +1226,26 @@ class z extends d {
       }
       const n = s.match(/^([a-zA-Z_$][\w$]*)/);
       if (n?.[1]) {
-        const u = n[1];
-        i.includes(u) ? e.push({ type: "keyword", value: u }) : e.push({ type: "text", value: u }), s = s.slice(u.length);
+        const d = n[1];
+        i.includes(d) ? e.push({ type: "keyword", value: d }) : e.push({ type: "text", value: d }), s = s.slice(d.length);
         continue;
       }
-      const l = s[0];
-      if (l && /^[{}[\]();,.:?!<>=+\-*/&|^%~@#]/.test(l)) {
-        e.push({ type: "punctuation", value: l }), s = s.slice(1);
+      const o = s[0];
+      if (o && /^[{}[\]();,.:?!<>=+\-*/&|^%~@#]/.test(o)) {
+        e.push({ type: "punctuation", value: o }), s = s.slice(1);
         continue;
       }
-      const h = s.match(/^(\s+)/);
-      if (h?.[1]) {
-        e.push({ type: "text", value: h[1] }), s = s.slice(h[1].length);
+      const l = s.match(/^(\s+)/);
+      if (l?.[1]) {
+        e.push({ type: "text", value: l[1] }), s = s.slice(l[1].length);
         continue;
       }
       const c = s[0];
       c && e.push({ type: "text", value: c }), s = s.slice(1);
     }
-    return e.map((r) => this.#p(r)).join("");
+    return e.map((r) => this.#c(r)).join("");
   }
-  #l(t) {
+  #o(t) {
     const e = [];
     let s = t;
     for (; s.length > 0; ) {
@@ -1141,17 +1281,17 @@ class z extends d {
         e.push({ type: "text", value: n[1] }), s = s.slice(n[1].length);
         continue;
       }
-      const l = s.match(/^([^<]+)/);
-      if (l?.[1]) {
-        e.push({ type: "text", value: l[1] }), s = s.slice(l[1].length);
+      const o = s.match(/^([^<]+)/);
+      if (o?.[1]) {
+        e.push({ type: "text", value: o[1] }), s = s.slice(o[1].length);
         continue;
       }
-      const h = s[0];
-      h && e.push({ type: "text", value: h }), s = s.slice(1);
+      const l = s[0];
+      l && e.push({ type: "text", value: l }), s = s.slice(1);
     }
-    return e.map((i) => this.#p(i)).join("");
+    return e.map((i) => this.#c(i)).join("");
   }
-  #c(t) {
+  #l(t) {
     const e = [];
     let s = t;
     for (; s.length > 0; ) {
@@ -1175,18 +1315,18 @@ class z extends d {
         e.push({ type: "punctuation", value: n }), s = s.slice(1);
         continue;
       }
-      const l = s.match(/^(\s+)/);
-      if (l?.[1]) {
-        e.push({ type: "text", value: l[1] }), s = s.slice(l[1].length);
+      const o = s.match(/^(\s+)/);
+      if (o?.[1]) {
+        e.push({ type: "text", value: o[1] }), s = s.slice(o[1].length);
         continue;
       }
-      const h = s[0];
-      h && e.push({ type: "text", value: h }), s = s.slice(1);
+      const l = s[0];
+      l && e.push({ type: "text", value: l }), s = s.slice(1);
     }
-    return e.map((i) => this.#p(i)).join("");
+    return e.map((i) => this.#c(i)).join("");
   }
-  #p(t) {
-    const e = this.#a(t.value);
+  #c(t) {
+    const e = this.#h(t.value);
     switch (t.type) {
       case "keyword":
         return `<span class="ry-code__keyword">${e}</span>`;
@@ -1214,10 +1354,10 @@ class z extends d {
         return e;
     }
   }
-  #a(t) {
+  #h(t) {
     return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
   }
-  #u(t) {
+  #n(t) {
     const e = t.split(`
 `);
     for (; e.length && !e[0]?.trim(); ) e.shift();
@@ -1236,12 +1376,12 @@ class z extends d {
     this.#t = t, this.#e();
   }
 }
-customElements.define("ry-code", z);
-class Y extends d {
+customElements.define("ry-code", Q);
+class tt 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 = k(i), a = this.hasAttribute("stacked");
+    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");
     this.innerHTML = `
       <div data-ry-target="preview" class="ry-example__preview"></div>
       <div data-ry-target="code" class="ry-example__code"></div>
@@ -1249,8 +1389,8 @@ class Y extends d {
     `, a && this.setAttribute("data-stacked", "");
     const n = document.createElement("ry-code");
     n.setAttribute("language", "html"), n.setAttribute("title", this.getAttribute("title") ?? "Example"), n.textContent = i, this.$('[data-ry-target="code"]').appendChild(n);
-    const l = document.createElement("template");
-    l.innerHTML = r, this.$('[data-ry-target="preview"]').appendChild(l.content), s && this.#t(s);
+    const o = document.createElement("template");
+    o.innerHTML = r, this.$('[data-ry-target="preview"]').appendChild(o.content), s && this.#t(s);
   }
   #t(t) {
     const e = this.$('[data-ry-target="usage"]');
@@ -1281,8 +1421,8 @@ class Y extends d {
 `).trim();
   }
 }
-customElements.define("ry-example", Y);
-class G extends d {
+customElements.define("ry-example", tt);
+class et extends u {
   static get observedAttributes() {
     return ["name", "size", "label"];
   }
@@ -1293,7 +1433,7 @@ class G extends d {
     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 = y(t);
+    const t = this.getAttribute("name") ?? "", e = this.getAttribute("size") ?? "24", s = this.getAttribute("label"), i = p(t);
     if (!i) {
       this.innerHTML = "";
       return;
@@ -1315,24 +1455,24 @@ class G extends d {
     this.setAttribute("size", String(t));
   }
 }
-customElements.define("ry-icon", G);
-const X = ["form", "section", "fieldset", "ry-section"], g = /* @__PURE__ */ new Map(), A = /* @__PURE__ */ new Set();
-function J(o) {
-  let t = o.parentElement;
+customElements.define("ry-icon", et);
+const st = ["form", "section", "fieldset", "ry-section"], m = /* @__PURE__ */ new Map(), C = /* @__PURE__ */ new Set();
+function it(h) {
+  let t = h.parentElement;
   for (; t; ) {
-    if (X.some((e) => t.matches(e)))
+    if (st.some((e) => t.matches(e)))
       return t;
     t = t.parentElement;
   }
   return null;
 }
-function Z(o) {
-  if (A.has(o)) return;
-  const t = g.get(o);
+function rt(h) {
+  if (C.has(h)) return;
+  const t = m.get(h);
   if (!t || t.size < 2) return;
   const e = /* @__PURE__ */ new Map();
   for (const s of t) {
-    const i = J(s), r = e.get(i) ?? [];
+    const i = it(s), r = e.get(i) ?? [];
     r.push(s), e.set(i, r);
   }
   if (e.size > 1) {
@@ -1344,11 +1484,11 @@ function Z(o) {
       } else
         s.push("(no container)");
     console.warn(
-      `ry-toggle-button: Buttons with name="${o}" span multiple containers (${s.join(", ")}). Intentional?`
-    ), A.add(o);
+      `ry-toggle-button: Buttons with name="${h}" span multiple containers (${s.join(", ")}). Intentional?`
+    ), C.add(h);
   }
 }
-class Q extends d {
+class at extends u {
   static observedAttributes = ["pressed", "disabled", "name", "value"];
   #t = !1;
   setup() {
@@ -1359,12 +1499,12 @@ class Q extends d {
   }
   #e() {
     const t = this.name;
-    t && (g.has(t) || g.set(t, /* @__PURE__ */ new Set()), g.get(t).add(this), this.#t = !0, queueMicrotask(() => Z(t)));
+    t && (m.has(t) || m.set(t, /* @__PURE__ */ new Set()), m.get(t).add(this), this.#t = !0, queueMicrotask(() => rt(t)));
   }
   #i() {
     if (!this.#t) return;
     const t = this.name;
-    t && g.has(t) && (g.get(t).delete(this), g.get(t).size === 0 && (g.delete(t), A.delete(t))), this.#t = !1;
+    t && m.has(t) && (m.get(t).delete(this), m.get(t).size === 0 && (m.delete(t), C.delete(t))), this.#t = !1;
   }
   #s = (t) => {
     if (this.disabled) {
@@ -1376,10 +1516,10 @@ class Q extends d {
   #r = (t) => {
     (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.click());
   };
-  #n() {
+  #a() {
     const t = this.name;
     if (!t) return;
-    const e = g.get(t);
+    const e = m.get(t);
     if (e)
       for (const s of e)
         s !== this && s.pressed && (s.pressed = !1);
@@ -1390,7 +1530,7 @@ class Q extends d {
   }
   set pressed(t) {
     const e = this.pressed;
-    t ? (this.setAttribute("pressed", ""), this.setAttribute("aria-pressed", "true"), this.#n()) : (this.removeAttribute("pressed"), this.setAttribute("aria-pressed", "false")), e !== t && this.emit("change", {
+    t ? (this.setAttribute("pressed", ""), this.setAttribute("aria-pressed", "true"), this.#a()) : (this.removeAttribute("pressed"), this.setAttribute("aria-pressed", "false")), e !== t && this.emit("change", {
       value: this.value,
       label: t ? "pressed" : "unpressed"
     });
@@ -1420,19 +1560,19 @@ class Q extends d {
     this.setAttribute("icon", t);
   }
 }
-customElements.define("ry-toggle-button", Q);
-class tt extends d {
+customElements.define("ry-toggle-button", at);
+class nt extends u {
   #t = !1;
   #e = null;
   #i = null;
   #s = null;
   #r = /* @__PURE__ */ new Map();
-  #n = /* @__PURE__ */ new Map();
+  #a = /* @__PURE__ */ new Map();
   static observedAttributes = ["min", "max", "step", "value", "start", "end", "disabled"];
   setup() {
-    this.#l(), this.#p(), this.#k();
+    this.#o(), this.#c(), this.#y();
   }
-  #l() {
+  #o() {
     const t = this.hasAttribute("range"), e = this.hasAttribute("labeled"), s = this.hasAttribute("tooltip");
     this.hasAttribute("vertical");
     let i = `
@@ -1450,20 +1590,20 @@ class tt extends d {
         <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.#c()), 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.#n.set("start", this.$('[data-ry-target="tooltip-start"]')), this.#n.set("end", this.$('[data-ry-target="tooltip-end"]')))) : (this.#r.set("value", this.$('[data-ry-target="thumb-value"]')), s && this.#n.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"]')));
   }
-  #c() {
+  #l() {
     const t = this.min, e = this.max, s = this.getAttribute("labels")?.split(","), i = this.getAttribute("label-type") || "number";
     let r = [];
     if (s)
       r = s;
     else
       for (let n = 0; n < 5; n++) {
-        const l = n / 4, h = t + l * (e - t);
+        const o = n / 4, l = t + o * (e - t);
         if (i === "letter")
           r.push(String.fromCharCode(65 + n));
         else {
-          const c = Math.round(h * 100) / 100;
+          const c = Math.round(l * 100) / 100;
           r.push(String(Number.isInteger(c) ? c : c.toFixed(1)));
         }
       }
@@ -1473,13 +1613,13 @@ class tt extends d {
       </div>
     `;
   }
-  #p() {
-    this.#i && this.on(this.#i, "pointerdown", this.#a);
+  #c() {
+    this.#i && this.on(this.#i, "pointerdown", this.#h);
     for (const [t, e] of this.#r)
-      this.on(e, "pointerdown", (s) => this.#u(s, t)), this.on(e, "keydown", (s) => this.#g(s, t));
-    this.on(document, "pointermove", this.#f), this.on(document, "pointerup", this.#b);
+      this.on(e, "pointerdown", (s) => this.#n(s, t)), this.on(e, "keydown", (s) => this.#v(s, t));
+    this.on(document, "pointermove", this.#p), this.on(document, "pointerup", this.#u);
   }
-  #a = (t) => {
+  #h = (t) => {
     if (this.disabled) return;
     const e = this.#w(t);
     if (this.hasAttribute("range")) {
@@ -1487,20 +1627,20 @@ class tt extends d {
       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.#k(), this.#m();
+    this.#t = !0, this.#y(), this.#f();
   };
-  #u = (t, e) => {
+  #n = (t, e) => {
     this.disabled || (t.stopPropagation(), this.#t = !0, this.#e = e, t.target.setPointerCapture(t.pointerId));
   };
-  #f = (t) => {
+  #p = (t) => {
     if (!this.#t || !this.#e) return;
     const e = this.#w(t);
-    this.hasAttribute("range") ? this.#e === "start" ? this.start = Math.min(e, this.end) : this.#e === "end" && (this.end = Math.max(e, this.start)) : this.value = e, this.#k(), this.#m();
+    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.#f();
   };
-  #b = () => {
-    this.#t && (this.#t = !1, this.#e = null, this.#x());
+  #u = () => {
+    this.#t && (this.#t = !1, this.#e = null, this.#M());
   };
-  #g = (t, e) => {
+  #v = (t, e) => {
     if (this.disabled) return;
     const s = this.step || 1, i = (this.max - this.min) / 10;
     let r = 0;
@@ -1520,19 +1660,19 @@ class tt extends d {
         r = -i;
         break;
       case "Home":
-        r = this.min - this.#o(e);
+        r = this.min - this.#b(e);
         break;
       case "End":
-        r = this.max - this.#o(e);
+        r = this.max - this.#b(e);
         break;
       default:
         return;
     }
     t.preventDefault();
-    const a = this.#d(this.#o(e) + r);
-    e === "start" ? this.start = Math.min(a, this.end) : e === "end" ? this.end = Math.max(a, this.start) : this.value = a, this.#k(), this.#m(), this.#x();
+    const a = this.#d(this.#b(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.#f(), this.#M();
   };
-  #o(t) {
+  #b(t) {
     return t === "start" ? this.start : t === "end" ? this.end : this.value;
   }
   #w(t) {
@@ -1541,9 +1681,9 @@ class tt extends d {
     let r;
     s ? r = (e.bottom - t.clientY) / e.height : r = (t.clientX - e.left) / e.width, i && (r = 1 - r), r = Math.max(0, Math.min(1, r));
     const a = this.min + r * (this.max - this.min);
-    return this.#h(a);
+    return this.#g(a);
   }
-  #h(t) {
+  #g(t) {
     const e = this.step;
     if (e === 0) return this.#d(t);
     const s = Math.round((t - this.min) / e) * e + this.min;
@@ -1552,34 +1692,34 @@ class tt extends d {
   #d(t) {
     return Math.max(this.min, Math.min(this.max, t));
   }
-  #k() {
+  #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;
     };
     if (t) {
-      const r = i(this.start), a = i(this.end), n = Math.min(r, a), l = Math.max(r, a);
-      this.#s && (e ? (this.#s.style.bottom = `${n}%`, this.#s.style.height = `${l - n}%`, this.#s.style.left = "", this.#s.style.width = "") : (this.#s.style.left = `${n}%`, this.#s.style.width = `${l - n}%`, this.#s.style.bottom = "", this.#s.style.height = ""));
-      const h = this.#r.get("start"), c = this.#r.get("end");
-      h && (e ? (h.style.bottom = `${r}%`, h.style.left = "") : (h.style.left = `${r}%`, h.style.bottom = "")), c && (e ? (c.style.bottom = `${a}%`, c.style.left = "") : (c.style.left = `${a}%`, c.style.bottom = "")), this.#v("start", this.start), this.#v("end", this.end), h?.setAttribute("aria-valuenow", String(this.start)), h?.setAttribute("aria-valuemin", String(this.min)), h?.setAttribute("aria-valuemax", String(this.end)), c?.setAttribute("aria-valuenow", String(this.end)), c?.setAttribute("aria-valuemin", String(this.start)), c?.setAttribute("aria-valuemax", String(this.max));
+      const r = i(this.start), a = i(this.end), n = Math.min(r, a), o = Math.max(r, a);
+      this.#s && (e ? (this.#s.style.bottom = `${n}%`, this.#s.style.height = `${o - n}%`, this.#s.style.left = "", this.#s.style.width = "") : (this.#s.style.left = `${n}%`, this.#s.style.width = `${o - n}%`, this.#s.style.bottom = "", this.#s.style.height = ""));
+      const l = this.#r.get("start"), c = this.#r.get("end");
+      l && (e ? (l.style.bottom = `${r}%`, l.style.left = "") : (l.style.left = `${r}%`, l.style.bottom = "")), c && (e ? (c.style.bottom = `${a}%`, c.style.left = "") : (c.style.left = `${a}%`, c.style.bottom = "")), this.#m("start", this.start), this.#m("end", this.end), l?.setAttribute("aria-valuenow", String(this.start)), l?.setAttribute("aria-valuemin", String(this.min)), l?.setAttribute("aria-valuemax", String(this.end)), c?.setAttribute("aria-valuenow", String(this.end)), c?.setAttribute("aria-valuemin", String(this.start)), c?.setAttribute("aria-valuemax", String(this.max));
     } else {
       const r = i(this.value);
       this.#s && (e ? (this.#s.style.bottom = "0", this.#s.style.height = `${r}%`, this.#s.style.left = "", this.#s.style.width = "") : (this.#s.style.left = "0", this.#s.style.width = `${r}%`, this.#s.style.bottom = "", this.#s.style.height = ""));
       const a = this.#r.get("value");
-      a && (e ? (a.style.bottom = `${r}%`, a.style.left = "") : (a.style.left = `${r}%`, a.style.bottom = "")), this.#v("value", this.value), a?.setAttribute("aria-valuenow", String(this.value)), a?.setAttribute("aria-valuemin", String(this.min)), a?.setAttribute("aria-valuemax", String(this.max));
+      a && (e ? (a.style.bottom = `${r}%`, a.style.left = "") : (a.style.left = `${r}%`, a.style.bottom = "")), this.#m("value", this.value), a?.setAttribute("aria-valuenow", String(this.value)), a?.setAttribute("aria-valuemin", String(this.min)), a?.setAttribute("aria-valuemax", String(this.max));
     }
   }
-  #v(t, e) {
-    const s = this.#n.get(t);
+  #m(t, e) {
+    const s = this.#a.get(t);
     if (s) {
       const i = this.step === 0 ? 2 : String(this.step).split(".")[1]?.length || 0;
       s.textContent = e.toFixed(i);
     }
   }
-  #m() {
+  #f() {
     this.hasAttribute("range") ? this.emit("input", { start: this.start, end: this.end }) : this.emit("input", { value: this.value });
   }
-  #x() {
+  #M() {
     this.hasAttribute("range") ? this.emit("change", { start: this.start, end: this.end }) : this.emit("change", { value: this.value });
   }
   // --- Public API ---
@@ -1626,19 +1766,19 @@ class tt extends d {
     t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
   }
 }
-customElements.define("ry-slider", tt);
-class et extends d {
+customElements.define("ry-slider", nt);
+class ot extends u {
   #t = !1;
   #e = 0;
   #i = 0;
   #s = null;
   #r = null;
-  #n = null;
+  #a = null;
   static observedAttributes = ["min", "max", "step", "value", "disabled", "label", "labels", "description"];
   setup() {
-    this.#l(), this.#c(), this.#d();
+    this.#o(), this.#l(), this.#d();
   }
-  #l() {
+  #o() {
     const t = this.getAttribute("label"), e = this.getAttribute("description"), s = e ? ` title="${e}"` : "";
     this.innerHTML = `
       <div data-ry-target="ring" class="ry-knob__ring"${s}>
@@ -1648,41 +1788,41 @@ class et extends d {
       </div>
       <span data-ry-target="display" class="ry-knob__value"></span>
       ${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.#n = this.$('[data-ry-target="display"]');
+    `, this.#s = this.$('[data-ry-target="ring"]'), this.#r = this.$('[data-ry-target="indicator"]'), this.#a = this.$('[data-ry-target="display"]');
   }
-  #c() {
-    this.#s && (this.on(this.#s, "mousedown", this.#p), this.on(document, "mousemove", this.#a), this.on(document, "mouseup", this.#u), this.on(this.#s, "touchstart", this.#f), this.on(document, "touchmove", this.#b), this.on(document, "touchend", this.#g), this.on(this.#s, "wheel", this.#o), this.on(this, "keydown", this.#w));
+  #l() {
+    this.#s && (this.on(this.#s, "mousedown", this.#c), this.on(document, "mousemove", this.#h), this.on(document, "mouseup", this.#n), this.on(this.#s, "touchstart", this.#p), this.on(document, "touchmove", this.#u), this.on(document, "touchend", this.#v), this.on(this.#s, "wheel", this.#b), this.on(this, "keydown", this.#w));
   }
-  #p = (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", ""));
   };
-  #a = (t) => {
+  #h = (t) => {
     if (!this.#t) return;
     const e = this.#e - t.clientY, s = (this.max - this.min) / 100;
-    this.#h(this.#i + e * s);
+    this.#g(this.#i + e * s);
   };
-  #u = () => {
-    this.#t && (this.#t = !1, this.#s?.classList.remove("ry-knob__ring--dragging"), this.removeAttribute("data-dragging"), this.#m());
+  #n = () => {
+    this.#t && (this.#t = !1, this.#s?.classList.remove("ry-knob__ring--dragging"), this.removeAttribute("data-dragging"), this.#f());
   };
-  #f = (t) => {
+  #p = (t) => {
     this.disabled || (t.preventDefault(), this.#t = !0, this.#e = t.touches[0]?.clientY ?? 0, this.#i = this.value, this.#s?.classList.add("ry-knob__ring--dragging"), this.setAttribute("data-dragging", ""));
   };
-  #b = (t) => {
+  #u = (t) => {
     if (!this.#t) return;
     t.preventDefault();
     const e = t.touches[0];
     if (!e) return;
     const s = this.#e - e.clientY, i = (this.max - this.min) / 100;
-    this.#h(this.#i + s * i);
+    this.#g(this.#i + s * i);
   };
-  #g = () => {
-    this.#t && (this.#t = !1, this.#s?.classList.remove("ry-knob__ring--dragging"), this.removeAttribute("data-dragging"), this.#m());
+  #v = () => {
+    this.#t && (this.#t = !1, this.#s?.classList.remove("ry-knob__ring--dragging"), this.removeAttribute("data-dragging"), this.#f());
   };
-  #o = (t) => {
+  #b = (t) => {
     if (this.disabled) return;
     t.preventDefault();
     const e = this.step || (this.max - this.min) / 50, s = t.deltaY < 0 ? e : -e;
-    this.#h(this.value + s), this.#m();
+    this.#g(this.value + s), this.#f();
   };
   #w = (t) => {
     if (this.disabled) return;
@@ -1704,26 +1844,26 @@ class et extends d {
         i = -s;
         break;
       case "Home":
-        this.#h(this.min), this.#m();
+        this.#g(this.min), this.#f();
         return;
       case "End":
-        this.#h(this.max), this.#m();
+        this.#g(this.max), this.#f();
         return;
       default:
         return;
     }
-    t.preventDefault(), this.#h(this.value + i), this.#m();
+    t.preventDefault(), this.#g(this.value + i), this.#f();
   };
-  #h(t) {
+  #g(t) {
     let e = Math.max(this.min, Math.min(this.max, t));
     const s = this.step;
-    s > 0 && (e = Math.round((e - this.min) / s) * s + this.min, e = Math.max(this.min, Math.min(this.max, e))), this.value = e, this.#d(), this.#v();
+    s > 0 && (e = Math.round((e - this.min) / s) * s + this.min, e = Math.max(this.min, Math.min(this.max, e))), this.value = e, this.#d(), this.#m();
   }
   #d() {
     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.#n && (this.#n.textContent = this.#k(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));
   }
-  #k(t) {
+  #y(t) {
     const e = this.getAttribute("labels");
     if (e) {
       const i = e.split(","), r = Math.round(t);
@@ -1731,11 +1871,11 @@ class et extends d {
     }
     return this.step >= 1 ? Math.round(t).toString() : Math.abs(t) >= 1e3 ? (t / 1e3).toFixed(1) + "k" : Math.abs(t) >= 100 ? Math.round(t).toString() : Math.abs(t) >= 10 ? t.toFixed(1) : t.toFixed(2);
   }
-  #v() {
+  #m() {
     const t = (this.value - this.min) / (this.max - this.min);
     this.emit("input", { value: this.value, percent: t });
   }
-  #m() {
+  #f() {
     const t = (this.value - this.min) / (this.max - this.min);
     this.emit("change", { value: this.value, percent: t });
   }
@@ -1774,29 +1914,291 @@ class et extends d {
     t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
   }
 }
-customElements.define("ry-knob", et);
-function f(o) {
-  const t = o.h / 360, e = o.s / 100, s = o.v / 100;
-  let i = 0, r = 0, a = 0;
-  const n = Math.floor(t * 6), l = t * 6 - n, h = s * (1 - e), c = s * (1 - l * e), u = s * (1 - (1 - l) * e);
-  switch (n % 6) {
-    case 0:
-      i = s, r = u, a = h;
-      break;
-    case 1:
-      i = c, r = s, a = h;
-      break;
-    case 2:
-      i = h, r = s, a = u;
-      break;
-    case 3:
-      i = h, r = c, a = s;
+customElements.define("ry-knob", ot);
+const S = 15, T = 3;
+class ht extends u {
+  #t = null;
+  #e = null;
+  #i = null;
+  #s = null;
+  #r = null;
+  #a = !1;
+  #o = 0;
+  #l = 0;
+  #c = 0;
+  #h = !1;
+  #n = null;
+  #p = null;
+  static observedAttributes = ["min", "max", "step", "value", "disabled", "arrows", "icons", "drag", "editable", "wrap", "label", "prefix", "suffix"];
+  setup() {
+    this.#u(), this.#b(), this.#w(), this.#A();
+  }
+  #u() {
+    const t = this.getAttribute("arrows") ?? "both", e = this.getAttribute("label"), s = t === "stacked" || t === "stacked-end" || t === "stacked-start", [i, r] = this.#v(s), a = t !== "end" && t !== "none", n = t !== "start" && t !== "none", o = this.getAttribute("prefix"), l = this.getAttribute("suffix"), c = a ? `<button data-ry-target="decrement" class="ry-number-select__btn ry-number-select__decrement" aria-label="Decrease" tabindex="-1" type="button">${i}</button>` : "", d = n ? `<button data-ry-target="increment" class="ry-number-select__btn ry-number-select__increment" aria-label="Increase" tabindex="-1" type="button">${r}</button>` : "", g = `
+      <div data-ry-target="display" class="ry-number-select__display" tabindex="0" role="spinbutton"
+           aria-valuenow="${this.value}" aria-valuemin="${this.min}" aria-valuemax="${this.max}"
+           ${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>
+        ${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>`, b = e ? `<span data-ry-target="label" class="ry-number-select__label">${e}</span>` : "";
+    if (t === "stacked")
+      this.innerHTML = `${d}${g}${c}${b}`;
+    else if (t === "stacked-end") {
+      const y = `<div data-ry-target="btn-group" class="ry-number-select__btn-group">${d}${c}</div>`;
+      this.innerHTML = `${g}${y}${b}`;
+    } else if (t === "stacked-start") {
+      const y = `<div data-ry-target="btn-group" class="ry-number-select__btn-group">${d}${c}</div>`;
+      this.innerHTML = `${y}${g}${b}`;
+    } else
+      this.innerHTML = `${c}${g}${d}${b}`;
+  }
+  #v(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") ?? "+"];
+  }
+  #b() {
+    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() {
+    this.#s && (this.on(this.#s, "mousedown", (t) => {
+      t.preventDefault(), this.#g(-1);
+    }), this.on(this.#s, "mouseup", () => this.#d()), this.on(this.#s, "mouseleave", () => this.#d())), this.#r && (this.on(this.#r, "mousedown", (t) => {
+      t.preventDefault(), this.#g(1);
+    }), this.on(this.#r, "mouseup", () => this.#d()), this.on(this.#r, "mouseleave", () => this.#d())), this.#t && this.on(this.#t, "mousedown", this.#H), this.on(document, "mousemove", this.#W), this.on(document, "mouseup", this.#E), this.#t && this.on(this.#t, "touchstart", this.#X), this.on(document, "touchmove", this.#G), this.on(document, "touchend", this.#K), this.#t && this.on(this.#t, "keydown", this.#q), this.on(this, "wheel", this.#J), this.#t && this.on(this.#t, "dblclick", () => this.#C()), this.#i && (this.on(this.#i, "blur", () => this.#V()), this.on(this.#i, "keydown", (t) => {
+      t.key === "Enter" && (t.preventDefault(), this.#V()), t.key === "Escape" && (t.preventDefault(), this.#P()), t.stopPropagation();
+    }));
+  }
+  // --- Button hold-to-repeat ---
+  #g(t) {
+    if (this.disabled) return;
+    const e = this.step || 1;
+    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);
+      };
+      i();
+    }, 400);
+  }
+  #d() {
+    this.#n && (clearTimeout(this.#n), this.#n = null), this.#p && (clearTimeout(this.#p), this.#p = null);
+  }
+  // --- Drag helpers ---
+  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";
+  }
+  #m(t, e) {
+    return this.#y === "y" ? this.#l - e : t - this.#o;
+  }
+  #f(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.#y;
+    this.#e.style.transform = i === "y" ? `translateY(${-s}px)` : `translateX(${s}px)`;
+  }
+  #$(t, e, s) {
+    const i = this.#m(t, e), r = this.step || 1, a = s ? r * 10 : r, n = s ? S * 2 : S, o = Math.round(i / n), l = this.#c + o * a, c = i - o * n;
+    this.#M(c, n);
+    const d = this.hasAttribute("wrap") ? this.#z(l) : this.#T(l), g = this.#F(d);
+    g !== this.value && (this.value = g, this.#A(), this.#x());
+  }
+  // --- Mouse drag ---
+  #H = (t) => {
+    this.disabled || this.#h || this.#y === "none" || (t.preventDefault(), this.#a = !0, this.#o = t.clientX, this.#l = t.clientY, this.#c = this.value, this.setAttribute("data-dragging", ""));
+  };
+  #W = (t) => {
+    this.#a && this.#$(t.clientX, t.clientY, t.shiftKey);
+  };
+  #E = (t) => {
+    if (!this.#a) return;
+    const e = this.#f(t.clientX, t.clientY);
+    this.#a = !1, this.removeAttribute("data-dragging"), this.#e && (this.#e.style.transform = ""), e < T && this.hasAttribute("editable") ? this.#C() : e >= T && this.#_();
+  };
+  // --- Touch drag ---
+  #X = (t) => {
+    this.disabled || this.#h || 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.#$(e.clientX, e.clientY, !1);
+  };
+  #K = () => {
+    this.#a && (this.#a = !1, this.removeAttribute("data-dragging"), this.#e && (this.#e.style.transform = ""), this.#_());
+  };
+  // --- Keyboard ---
+  #q = (t) => {
+    if (this.disabled || this.#h) return;
+    const e = this.step || 1, s = e * 10;
+    let i = 0;
+    switch (t.key) {
+      case "ArrowUp":
+      case "ArrowRight":
+        i = t.shiftKey ? s : e;
+        break;
+      case "ArrowDown":
+      case "ArrowLeft":
+        i = -(t.shiftKey ? s : e);
+        break;
+      case "PageUp":
+        i = s;
+        break;
+      case "PageDown":
+        i = -s;
+        break;
+      case "Home":
+        i = this.min - this.value;
+        break;
+      case "End":
+        i = this.max - this.value;
+        break;
+      case "Enter":
+        this.hasAttribute("editable") && this.#C();
+        return;
+      default:
+        this.hasAttribute("editable") && /^[0-9.\-]$/.test(t.key) && (this.#C(t.key), t.preventDefault());
+        return;
+    }
+    t.preventDefault(), this.#R(i), this.#x(), this.#_();
+  };
+  // --- Wheel ---
+  #J = (t) => {
+    if (this.disabled || this.#h || !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 ---
+  #C(t) {
+    this.disabled || this.#h || (this.#h = !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()));
+  }
+  #V() {
+    if (!this.#h) return;
+    this.#h = !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();
+  }
+  #P() {
+    this.#h && (this.#h = !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.#z(e) : e = this.#T(e), e = this.#F(e), this.value = e, this.#A();
+  }
+  #T(t) {
+    return Math.max(this.min, Math.min(this.max, t));
+  }
+  #z(t) {
+    const e = this.step || 1, s = this.max - this.min + e;
+    let i = t;
+    for (; i > this.max; ) i -= s;
+    for (; i < this.min; ) i += s;
+    return i;
+  }
+  #F(t) {
+    const e = this.step;
+    if (e <= 0) return this.#T(t);
+    const s = Math.round((t - this.min) / e) * e + this.min;
+    return this.#T(s);
+  }
+  #j(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();
+  }
+  #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)));
+  }
+  #x() {
+    this.emit("input", { value: this.value });
+  }
+  #_() {
+    this.emit("change", { value: this.value });
+  }
+  // --- Public API ---
+  get value() {
+    return parseFloat(this.getAttribute("value") ?? "0");
+  }
+  set value(t) {
+    this.setAttribute("value", String(t));
+  }
+  get min() {
+    return parseFloat(this.getAttribute("min") ?? "0");
+  }
+  set min(t) {
+    this.setAttribute("min", String(t));
+  }
+  get max() {
+    return parseFloat(this.getAttribute("max") ?? "100");
+  }
+  set max(t) {
+    this.setAttribute("max", String(t));
+  }
+  get step() {
+    return parseFloat(this.getAttribute("step") ?? "1");
+  }
+  set step(t) {
+    this.setAttribute("step", String(t));
+  }
+  get drag() {
+    return this.#y;
+  }
+  set drag(t) {
+    this.setAttribute("drag", t);
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  attributeChangedCallback(t, e, s) {
+    e !== s && t === "value" && this.#t && this.#A();
+  }
+  teardown() {
+    this.#d();
+  }
+}
+customElements.define("ry-number-select", ht);
+function v(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);
+  switch (n % 6) {
+    case 0:
+      i = s, r = d, a = l;
+      break;
+    case 1:
+      i = c, r = s, a = l;
+      break;
+    case 2:
+      i = l, r = s, a = d;
+      break;
+    case 3:
+      i = l, r = c, a = s;
       break;
     case 4:
-      i = u, r = h, a = s;
+      i = d, r = l, a = s;
       break;
     case 5:
-      i = s, r = h, a = c;
+      i = s, r = l, a = c;
       break;
   }
   return {
@@ -1805,10 +2207,10 @@ function f(o) {
     b: Math.round(a * 255)
   };
 }
-function w(o) {
-  const t = o.r / 255, e = o.g / 255, s = o.b / 255, i = Math.max(t, e, s), r = Math.min(t, e, s), a = i - r;
+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 l = i === 0 ? 0 : a / i, h = i;
+  const o = i === 0 ? 0 : a / i, l = i;
   if (i !== r)
     switch (i) {
       case t:
@@ -1823,34 +2225,34 @@ function w(o) {
     }
   return {
     h: Math.round(n * 360),
-    s: Math.round(l * 100),
-    v: Math.round(h * 100)
+    s: Math.round(o * 100),
+    v: Math.round(l * 100)
   };
 }
-function M(o) {
-  const t = o.s / 100, e = o.v / 100, s = e * (1 - t / 2), i = s === 0 || s === 1 ? 0 : (e - s) / Math.min(s, 1 - s);
+function L(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: o.h,
+    h: h.h,
     s: Math.round(i * 100),
     l: Math.round(s * 100)
   };
 }
-function st(o) {
-  const t = o.s / 100, e = o.l / 100, s = e + t * Math.min(e, 1 - e), i = s === 0 ? 0 : 2 * (1 - e / s);
+function lt(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: o.h,
+    h: h.h,
     s: Math.round(i * 100),
     v: Math.round(s * 100)
   };
 }
-function C(o) {
+function I(h) {
   const t = (e) => e.toString(16).padStart(2, "0");
-  return `#${t(o.r)}${t(o.g)}${t(o.b)}`;
+  return `#${t(h.r)}${t(h.g)}${t(h.b)}`;
 }
-function it(o) {
-  const t = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(o);
+function ct(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(o);
+    const e = /^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(h);
     return e ? {
       r: parseInt(e[1] + e[1], 16),
       g: parseInt(e[2] + e[2], 16),
@@ -1863,8 +2265,8 @@ function it(o) {
     b: parseInt(t[3], 16)
   };
 }
-function m(o) {
-  const t = o.trim().toLowerCase();
+function A(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);
     if (i) {
@@ -1873,10 +2275,10 @@ function m(o) {
         g: parseInt(i[2], 16),
         b: parseInt(i[3], 16)
       }, n = parseInt(i[4], 16) / 255;
-      return { hsv: w(a), alpha: Math.round(n * 100) };
+      return { hsv: $(a), alpha: Math.round(n * 100) };
     }
-    const r = it(t);
-    return r ? { hsv: w(r), alpha: 100 } : null;
+    const r = ct(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) {
@@ -1885,7 +2287,7 @@ function m(o) {
       g: parseInt(e[2], 10),
       b: parseInt(e[3], 10)
     }, r = e[4] ? parseFloat(e[4]) * 100 : 100;
-    return { hsv: w(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) {
@@ -1894,31 +2296,31 @@ function m(o) {
       s: parseFloat(s[2]),
       l: parseFloat(s[3])
     }, r = s[4] ? parseFloat(s[4]) * 100 : 100;
-    return { hsv: st(i), alpha: r };
+    return { hsv: lt(i), alpha: r };
   }
   return null;
 }
-class rt extends d {
+class dt extends u {
   #t = 0;
   #e = 100;
   #i = 100;
   #s = 100;
   #r = !1;
-  #n = !1;
-  #l = !1;
+  #a = !1;
+  #o = !1;
+  #l = null;
   #c = null;
+  #h = null;
+  #n = null;
   #p = null;
-  #a = null;
   #u = null;
-  #f = null;
+  #v = null;
   #b = null;
-  #g = null;
-  #o = null;
   #w = null;
-  #h = null;
+  #g = null;
   static observedAttributes = ["value", "format", "opacity", "disabled", "swatches", "inline"];
   setup() {
-    this.#d(), this.#k(), this.#v(), this.#y();
+    this.#d(), this.#y(), this.#m(), this.#A();
   }
   #d() {
     const t = this.hasAttribute("inline"), e = this.hasAttribute("opacity"), s = this.getAttribute("swatches");
@@ -1960,57 +2362,57 @@ class rt extends d {
           <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.#c = this.$('[data-ry-target="trigger"]'), this.#p = this.$('[data-ry-target="panel"]'), this.#a = this.$('[data-ry-target="grid"]'), this.#u = this.$('[data-ry-target="grid-handle"]'), this.#f = this.$('[data-ry-target="hue-slider"]'), this.#b = this.$('[data-ry-target="hue-handle"]'), this.#g = this.$('[data-ry-target="alpha-slider"]'), this.#o = this.$('[data-ry-target="alpha-handle"]'), this.#w = this.$('[data-ry-target="preview"]'), this.#h = this.$('[data-ry-target="input"]');
+      `, this.#l = this.$('[data-ry-target="trigger"]'), this.#c = this.$('[data-ry-target="panel"]'), this.#h = this.$('[data-ry-target="grid"]'), this.#n = this.$('[data-ry-target="grid-handle"]'), this.#p = this.$('[data-ry-target="hue-slider"]'), this.#u = this.$('[data-ry-target="hue-handle"]'), this.#v = this.$('[data-ry-target="alpha-slider"]'), this.#b = this.$('[data-ry-target="alpha-handle"]'), this.#w = this.$('[data-ry-target="preview"]'), this.#g = this.$('[data-ry-target="input"]');
   }
-  #k() {
-    this.#c && this.on(this.#c, "click", this.#m), this.on(document, "click", this.#x), this.on(document, "keydown", this.#j), this.#a && this.on(this.#a, "pointerdown", this.#R), this.#u && this.on(this.#u, "keydown", this.#P), this.#f && this.on(this.#f, "pointerdown", this.#O), this.#b && this.on(this.#b, "keydown", this.#K), this.#g && this.on(this.#g, "pointerdown", this.#N), this.#o && this.on(this.#o, "keydown", this.#U), this.on(document, "pointermove", this.#W), this.on(document, "pointerup", this.#V), this.#h && (this.on(this.#h, "change", this.#T), this.on(this.#h, "keydown", this.#q));
+  #y() {
+    this.#l && this.on(this.#l, "click", this.#f), this.on(document, "click", this.#M), this.on(document, "keydown", this.#$), this.#h && this.on(this.#h, "pointerdown", this.#W), this.#n && this.on(this.#n, "keydown", this.#X), this.#p && this.on(this.#p, "pointerdown", this.#G), this.#u && this.on(this.#u, "keydown", this.#q), this.#v && this.on(this.#v, "pointerdown", this.#J), this.#b && this.on(this.#b, "keydown", this.#V), 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.#z));
     const t = this.$('[data-ry-target="format-toggle"]');
-    t && this.on(t, "click", this.#z);
+    t && this.on(t, "click", this.#F);
     const e = this.$('[data-ry-target="swatches"]');
-    e && this.on(e, "click", this.#Y);
+    e && this.on(e, "click", this.#j);
   }
-  #v() {
+  #m() {
     const t = this.getAttribute("value");
     if (t) {
-      const e = m(t);
+      const e = A(t);
       e && (this.#t = e.hsv.h, this.#e = e.hsv.s, this.#i = e.hsv.v, this.#s = e.alpha);
     }
   }
   // ───────────────────────────────────────────────────────────────────────────
   // Dropdown handlers
   // ───────────────────────────────────────────────────────────────────────────
-  #m = () => {
+  #f = () => {
     this.disabled || (this.state === "open" ? this.close() : this.open());
   };
-  #x = (t) => {
+  #M = (t) => {
     this.state === "open" && (this.contains(t.target) || this.close());
   };
-  #j = (t) => {
-    t.key === "Escape" && this.state === "open" && (this.close(), this.#c?.focus());
+  #$ = (t) => {
+    t.key === "Escape" && this.state === "open" && (this.close(), this.#l?.focus());
   };
   open() {
-    this.hasAttribute("inline") || (this.#B(), this.state = "open");
+    this.hasAttribute("inline") || (this.#H(), this.state = "open");
   }
   close() {
     this.hasAttribute("inline") || (this.state = "closed", this.removeAttribute("data-ry-position"));
   }
-  #B() {
-    if (!this.#p || !this.#c) return;
-    const t = this.#c.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");
   }
   // ───────────────────────────────────────────────────────────────────────────
   // Grid handlers
   // ───────────────────────────────────────────────────────────────────────────
-  #R = (t) => {
-    this.disabled || (t.preventDefault(), this.#r = !0, this.#u?.focus(), this.#C(t));
+  #W = (t) => {
+    this.disabled || (t.preventDefault(), this.#r = !0, this.#n?.focus(), this.#E(t));
   };
-  #C(t) {
-    if (!this.#a) return;
-    const e = this.#a.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.#y(), this.#A();
+  #E(t) {
+    if (!this.#h) return;
+    const e = this.#h.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();
   }
-  #P = (t) => {
+  #X = (t) => {
     if (this.disabled) return;
     const e = t.shiftKey ? 10 : 1;
     let s = !1;
@@ -2028,20 +2430,20 @@ class rt extends d {
         this.#i = Math.max(0, this.#i - e), s = !0;
         break;
     }
-    s && (t.preventDefault(), this.#y(), this.#A(), this.#$());
+    s && (t.preventDefault(), this.#A(), this.#L(), this.#k());
   };
   // ───────────────────────────────────────────────────────────────────────────
   // Hue handlers
   // ───────────────────────────────────────────────────────────────────────────
-  #O = (t) => {
-    this.disabled || (t.preventDefault(), this.#n = !0, this.#b?.focus(), this.#E(t));
+  #G = (t) => {
+    this.disabled || (t.preventDefault(), this.#a = !0, this.#u?.focus(), this.#K(t));
   };
-  #E(t) {
-    if (!this.#f) return;
-    const e = this.#f.getBoundingClientRect(), s = Math.max(0, Math.min(1, (t.clientX - e.left) / e.width));
-    this.#t = Math.round(s * 360), this.#y(), this.#A();
+  #K(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();
   }
-  #K = (t) => {
+  #q = (t) => {
     if (this.disabled) return;
     const e = t.shiftKey ? 10 : 1;
     let s = !1;
@@ -2055,20 +2457,20 @@ class rt extends d {
         this.#t = (this.#t - e + 360) % 360, s = !0;
         break;
     }
-    s && (t.preventDefault(), this.#y(), this.#A(), this.#$());
+    s && (t.preventDefault(), this.#A(), this.#L(), this.#k());
   };
   // ───────────────────────────────────────────────────────────────────────────
   // Alpha handlers
   // ───────────────────────────────────────────────────────────────────────────
-  #N = (t) => {
-    this.disabled || (t.preventDefault(), this.#l = !0, this.#o?.focus(), this.#S(t));
+  #J = (t) => {
+    this.disabled || (t.preventDefault(), this.#o = !0, this.#b?.focus(), this.#C(t));
   };
-  #S(t) {
-    if (!this.#g) return;
-    const e = this.#g.getBoundingClientRect(), s = Math.max(0, Math.min(1, (t.clientX - e.left) / e.width));
-    this.#s = Math.round(s * 100), this.#y(), this.#A();
+  #C(t) {
+    if (!this.#v) return;
+    const e = this.#v.getBoundingClientRect(), s = Math.max(0, Math.min(1, (t.clientX - e.left) / e.width));
+    this.#s = Math.round(s * 100), this.#A(), this.#L();
   }
-  #U = (t) => {
+  #V = (t) => {
     if (this.disabled) return;
     const e = t.shiftKey ? 10 : 1;
     let s = !1;
@@ -2082,99 +2484,99 @@ class rt extends d {
         this.#s = Math.max(0, this.#s - e), s = !0;
         break;
     }
-    s && (t.preventDefault(), this.#y(), this.#A(), this.#$());
+    s && (t.preventDefault(), this.#A(), this.#L(), this.#k());
   };
   // ───────────────────────────────────────────────────────────────────────────
   // Pointer move/up
   // ───────────────────────────────────────────────────────────────────────────
-  #W = (t) => {
-    this.#r ? this.#C(t) : this.#n ? this.#E(t) : this.#l && this.#S(t);
+  #P = (t) => {
+    this.#r ? this.#E(t) : this.#a ? this.#K(t) : this.#o && this.#C(t);
   };
-  #V = () => {
-    (this.#r || this.#n || this.#l) && (this.#r = !1, this.#n = !1, this.#l = !1, this.#$());
+  #R = () => {
+    (this.#r || this.#a || this.#o) && (this.#r = !1, this.#a = !1, this.#o = !1, this.#k());
   };
   // ───────────────────────────────────────────────────────────────────────────
   // Input handlers
   // ───────────────────────────────────────────────────────────────────────────
   #T = () => {
-    if (!this.#h) return;
-    const t = m(this.#h.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.#y(), this.#$()) : this.#M();
+    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.#k()) : this.#Y();
   };
-  #q = (t) => {
+  #z = (t) => {
     t.key === "Enter" && (t.preventDefault(), this.#T());
   };
   // ───────────────────────────────────────────────────────────────────────────
   // Format toggle
   // ───────────────────────────────────────────────────────────────────────────
-  #z = () => {
+  #F = () => {
     const t = ["hex", "rgb", "hsl"], e = this.format, s = t.indexOf(e), i = t[(s + 1) % t.length];
     this.format = i;
     const r = this.$('[data-ry-target="format-toggle"]');
-    r && (r.textContent = i.toUpperCase()), this.#M();
+    r && (r.textContent = i.toUpperCase()), this.#Y();
   };
   // ───────────────────────────────────────────────────────────────────────────
   // Swatches
   // ───────────────────────────────────────────────────────────────────────────
-  #Y = (t) => {
+  #j = (t) => {
     const e = t.target;
     if (e.classList.contains("ry-color-picker__swatch")) {
       const s = e.dataset.color;
       if (s) {
-        const i = m(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.#y(), this.#A(), this.#$());
+        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.#k());
       }
     }
   };
   // ───────────────────────────────────────────────────────────────────────────
   // Update methods
   // ───────────────────────────────────────────────────────────────────────────
-  #y() {
-    this.#H(), this.#L(), this.#I(), this.#D(), this.#F(), this.#M(), this.#G();
+  #A() {
+    this.#U(), this.#x(), this.#_(), this.#D(), this.#N(), this.#Y(), this.#Z();
   }
-  #H() {
+  #U() {
     const t = this.$('[data-ry-target="trigger-color"]');
     if (t) {
-      const e = f({ h: this.#t, s: this.#e, v: this.#i }), s = this.hasAttribute("opacity") ? this.#s / 100 : 1;
+      const e = v({ 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})`;
     }
   }
-  #L() {
-    if (this.#a) {
-      const t = f({ h: this.#t, s: 100, v: 100 });
-      this.#a.style.setProperty("--grid-hue-color", `rgb(${t.r}, ${t.g}, ${t.b})`);
+  #x() {
+    if (this.#h) {
+      const t = v({ h: this.#t, s: 100, v: 100 });
+      this.#h.style.setProperty("--grid-hue-color", `rgb(${t.r}, ${t.g}, ${t.b})`);
     }
-    this.#u && (this.#u.style.left = `${this.#e}%`, this.#u.style.top = `${100 - this.#i}%`);
+    this.#n && (this.#n.style.left = `${this.#e}%`, this.#n.style.top = `${100 - this.#i}%`);
   }
-  #I() {
-    this.#b && (this.#b.style.left = `${this.#t / 360 * 100}%`);
+  #_() {
+    this.#u && (this.#u.style.left = `${this.#t / 360 * 100}%`);
   }
   #D() {
-    if (this.#g) {
-      const t = f({ h: this.#t, s: this.#e, v: this.#i });
-      this.#g.style.setProperty("--alpha-color", `rgb(${t.r}, ${t.g}, ${t.b})`);
+    if (this.#v) {
+      const t = v({ h: this.#t, s: this.#e, v: this.#i });
+      this.#v.style.setProperty("--alpha-color", `rgb(${t.r}, ${t.g}, ${t.b})`);
     }
-    this.#o && (this.#o.style.left = `${this.#s}%`);
+    this.#b && (this.#b.style.left = `${this.#s}%`);
   }
-  #F() {
+  #N() {
     const t = this.$('[data-ry-target="preview-color"]');
     if (t) {
-      const e = f({ h: this.#t, s: this.#e, v: this.#i }), s = this.hasAttribute("opacity") ? this.#s / 100 : 1;
+      const e = v({ 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})`;
     }
   }
-  #M() {
-    this.#h && (this.#h.value = this.#_());
+  #Y() {
+    this.#g && (this.#g.value = this.#O());
   }
-  #G() {
-    const t = this.#_();
+  #Z() {
+    const t = this.#O();
     this.getAttribute("value") !== t && this.setAttribute("value", t);
   }
-  #_() {
-    const t = this.format, e = f({ h: this.#t, s: this.#e, v: this.#i }), s = this.hasAttribute("opacity");
+  #O() {
+    const t = this.format, e = v({ h: this.#t, s: this.#e, v: this.#i }), s = this.hasAttribute("opacity");
     switch (t) {
       case "hex": {
-        const i = C(e);
+        const i = I(e);
         if (s && this.#s < 100) {
           const r = Math.round(this.#s / 100 * 255).toString(16).padStart(2, "0");
           return i + r;
@@ -2184,40 +2586,40 @@ class rt extends d {
       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 = M({ h: this.#t, s: this.#e, v: this.#i });
+        const i = L({ 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 C(e);
+        return I(e);
     }
   }
   // ───────────────────────────────────────────────────────────────────────────
   // Events
   // ───────────────────────────────────────────────────────────────────────────
-  #A() {
+  #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.#a && s) {
-      const i = m(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.#H(), this.#L(), this.#I(), this.#D(), this.#F());
+    if (e !== s && t === "value" && this.#h && 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.#N());
     }
   }
   // ───────────────────────────────────────────────────────────────────────────
   // Public API
   // ───────────────────────────────────────────────────────────────────────────
   get value() {
-    return this.#_();
+    return this.#O();
   }
   set value(t) {
-    const e = m(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.#y());
+    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());
   }
   get format() {
     return this.getAttribute("format") || "hex";
@@ -2235,39 +2637,39 @@ class rt extends d {
     return { h: this.#t, s: this.#e, v: this.#i };
   }
   get rgb() {
-    return f(this.hsv);
+    return v(this.hsv);
   }
   get hsl() {
-    return M(this.hsv);
+    return L(this.hsv);
   }
   get alpha() {
     return this.#s;
   }
   set alpha(t) {
-    this.#s = Math.max(0, Math.min(100, t)), this.#y();
+    this.#s = Math.max(0, Math.min(100, t)), this.#A();
   }
   /** Set color from any valid color string */
   setColor(t) {
-    const e = m(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.#y(), !0) : !1;
+    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;
   }
   /** Get color in specific format */
   getFormattedValue(t) {
     const e = this.format;
     this.format = t;
-    const s = this.#_();
+    const s = this.#O();
     return this.format = e, s;
   }
 }
-customElements.define("ry-color-picker", rt);
-class at extends d {
+customElements.define("ry-color-picker", dt);
+class ut extends u {
   #t = null;
   #e = null;
   #i = null;
   #s = null;
   static observedAttributes = ["value", "format", "opacity", "disabled", "placeholder"];
   setup() {
-    this.#r(), this.#n(), this.#k(), 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";
@@ -2298,16 +2700,16 @@ class at extends d {
       </div>
     `, 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"]');
   }
-  #n() {
-    this.#t && this.on(this.#t, "click", this.#l), this.#e && (this.on(this.#e, "input", this.#p), this.on(this.#e, "keydown", this.#f), this.on(this.#e, "focus", this.#c)), this.#s && (this.on(this.#s, "ry:input", this.#b), this.on(this.#s, "ry:change", this.#g)), this.on(document, "click", this.#o), this.on(document, "keydown", this.#w);
+  #a() {
+    this.#t && this.on(this.#t, "click", this.#o), this.#e && (this.on(this.#e, "input", this.#c), this.on(this.#e, "keydown", this.#p), this.on(this.#e, "focus", this.#l)), this.#s && (this.on(this.#s, "ry:input", this.#u), this.on(this.#s, "ry:change", this.#v)), this.on(document, "click", this.#b), this.on(document, "keydown", this.#w);
   }
-  #l = () => {
+  #o = () => {
     this.disabled || (this.state === "open" ? this.close() : this.open());
   };
-  #c = () => {
+  #l = () => {
     this.disabled || this.open();
   };
-  #p = () => {
+  #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);
@@ -2316,10 +2718,10 @@ class at extends d {
       const n = Math.min(e, r.length);
       this.#e.setSelectionRange(n, n);
     }
-    const a = this.#a(r);
-    a && (this.#s.setColor(a), this.#d(), this.#u(r) && this.#v(), this.emit("input", { value: this.value }));
+    const a = this.#h(r);
+    a && (this.#s.setColor(a), this.#d(), this.#n(r) && this.#m(), this.emit("input", { value: this.value }));
   };
-  #a(t) {
+  #h(t) {
     let e = t;
     e.startsWith("#") || (e = "#" + e);
     const s = e.slice(1);
@@ -2333,31 +2735,31 @@ class at extends d {
     }
     return "#" + s.padEnd(6, "0");
   }
-  #u(t) {
+  #n(t) {
     return !!(/^#[a-fA-F0-9]{6}$/.test(t) || /^#[a-fA-F0-9]{3}$/.test(t));
   }
-  #f = (t) => {
-    t.key === "Enter" && (t.preventDefault(), this.#p(), this.emit("change", { value: this.value }));
+  #p = (t) => {
+    t.key === "Enter" && (t.preventDefault(), this.#c(), this.emit("change", { value: this.value }));
   };
-  #b = () => {
-    !this.#s || !this.#e || (document.activeElement !== this.#e && (this.#e.value = this.#s.value), this.#d(), this.#v(), this.emit("input", { value: this.value }));
+  #u = () => {
+    !this.#s || !this.#e || (document.activeElement !== this.#e && (this.#e.value = this.#s.value), this.#d(), this.#m(), this.emit("input", { value: this.value }));
   };
-  #g = () => {
+  #v = () => {
     this.emit("change", { value: this.value });
   };
-  #o = (t) => {
+  #b = (t) => {
     this.state === "open" && (this.contains(t.target) || this.close());
   };
   #w = (t) => {
     t.key === "Escape" && this.state === "open" && (this.close(), this.#t?.focus());
   };
   open() {
-    this.#h(), this.state = "open";
+    this.#g(), this.state = "open";
   }
   close() {
     this.state = "closed", this.removeAttribute("data-ry-position");
   }
-  #h() {
+  #g() {
     if (!this.#i) return;
     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");
@@ -2369,7 +2771,7 @@ class at extends d {
       t.style.backgroundColor = `rgba(${e.r}, ${e.g}, ${e.b}, ${s})`;
     }
   }
-  #k() {
+  #y() {
     const t = this.getAttribute("value") || "#000000";
     if (this.#s) {
       if (this.#s.setColor(t), this.#e) {
@@ -2379,7 +2781,7 @@ class at extends d {
       this.#d();
     }
   }
-  #v() {
+  #m() {
     if (this.#s) {
       const t = this.#s.value;
       this.getAttribute("value") !== t && this.setAttribute("value", t);
@@ -2393,7 +2795,7 @@ class at extends d {
     return this.#s?.value ?? this.getAttribute("value") ?? "#000000";
   }
   set value(t) {
-    this.#s?.setColor(t) && (this.#e && (this.#e.value = this.#s.value), this.#d(), this.#v());
+    this.#s?.setColor(t) && (this.#e && (this.#e.value = this.#s.value), this.#d(), this.#m());
   }
   get disabled() {
     return this.hasAttribute("disabled");
@@ -2411,37 +2813,929 @@ class at extends d {
     return this.#s?.hsv ?? { h: 0, s: 0, v: 0 };
   }
 }
-customElements.define("ry-color-input", at);
-window.RyToast = p;
+customElements.define("ry-color-input", ut);
+function x(h) {
+  const t = h.trim().toLowerCase();
+  if (t.startsWith("#")) {
+    const i = t.slice(1);
+    return i.length === 3 ? {
+      r: parseInt(i[0] + i[0], 16),
+      g: parseInt(i[1] + i[1], 16),
+      b: parseInt(i[2] + i[2], 16)
+    } : i.length >= 6 ? {
+      r: parseInt(i.slice(0, 2), 16),
+      g: parseInt(i.slice(2, 4), 16),
+      b: parseInt(i.slice(4, 6), 16)
+    } : null;
+  }
+  const e = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/.exec(t);
+  if (e)
+    return {
+      r: parseInt(e[1], 10),
+      g: parseInt(e[2], 10),
+      b: parseInt(e[3], 10)
+    };
+  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;
+    return {
+      r: Math.round(n(l, o, i + 1 / 3) * 255),
+      g: Math.round(n(l, o, i) * 255),
+      b: Math.round(n(l, o, i - 1 / 3) * 255)
+    };
+  }
+  return null;
+}
+function pt(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 gt(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 H = "linear-gradient(90deg, #000000 0%, #ffffff 100%)", ft = 50;
+class yt extends u {
+  #t = "linear";
+  #e = 90;
+  #i = "circle";
+  #s = [];
+  #r = null;
+  #a = 0;
+  #o = null;
+  #l = !1;
+  #c = null;
+  #h = !1;
+  // Cached DOM refs
+  #n = null;
+  #p = null;
+  #u = null;
+  static observedAttributes = ["value", "disabled", "output"];
+  setup() {
+    this.#v(), this.#W(), this.#X(), this.#x();
+  }
+  // ───────────────────────────────────────────────────────────────────────────
+  // Parsing / Serialization
+  // ───────────────────────────────────────────────────────────────────────────
+  #v() {
+    const t = this.getAttribute("value") || H;
+    this.#b(t) || this.#b(H);
+  }
+  #b(t) {
+    const e = t.trim();
+    if (!e.startsWith("linear-gradient(") && !e.startsWith("radial-gradient("))
+      return x(e) ? (this.#t = "solid", this.#s = [this.#d(e, 0), this.#d(e, 100)], this.#r = this.#s[0].id, !0) : !1;
+    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;
+    if (s === "linear") {
+      const d = /^([\d.]+)deg\s*,\s*/.exec(i);
+      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 b = g[0].trim().replace(/,\s*$/, "");
+          r = this.#w(b), n = i.slice(g[0].length);
+        }
+      }
+    } else {
+      const d = /^(circle|ellipse)(?:\s+at\s+[^,]+)?\s*,\s*/.exec(i);
+      d && (a = d[1], n = i.slice(d[0].length));
+    }
+    const o = [], l = /(#[a-fA-F0-9]{3,8}|rgba?\([^)]+\)|hsla?\([^)]+\)|[a-z]+)\s+([\d.]+)%/g;
+    let c;
+    for (; (c = l.exec(n)) !== null; )
+      o.push(this.#d(c[1], parseFloat(c[2])));
+    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) {
+    return {
+      "to top": 0,
+      "to top right": 45,
+      "to right": 90,
+      "to bottom right": 135,
+      "to bottom": 180,
+      "to bottom left": 225,
+      "to left": 270,
+      "to top left": 315
+    }[t] ?? 90;
+  }
+  #g() {
+    if (this.#t === "solid")
+      return this.#s[0]?.color ?? "#000000";
+    const t = this.#s.map((e) => `${e.color} ${Math.round(e.position)}%`).join(", ");
+    return this.#t === "linear" ? `linear-gradient(${Math.round(this.#e)}deg, ${t})` : `radial-gradient(${this.#i}, ${t})`;
+  }
+  // ───────────────────────────────────────────────────────────────────────────
+  // Stop management
+  // ───────────────────────────────────────────────────────────────────────────
+  #d(t, e) {
+    return { id: `stop-${this.#a++}`, color: t, position: e };
+  }
+  /** CSS left value clamped so the stop handle stays within the bar */
+  #y(t) {
+    const e = "calc(var(--ry-gradient-picker-stop-size, 16px) / 2)";
+    return `clamp(${e}, ${t}%, calc(100% - ${e}))`;
+  }
+  #m(t, e) {
+    const s = this.#d(t, e);
+    this.#s.push(s), this.#$(), this.#r = s.id, this.#E(), this.#x();
+  }
+  #f(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.#E(), this.#x(), !0);
+  }
+  #M(t) {
+    this.#r !== t && (this.#r = t, this.#O(), this.#L());
+  }
+  #$() {
+    this.#s.sort((t, e) => t.position - e.position);
+  }
+  #H() {
+    return this.#s.find((t) => t.id === this.#r) ?? null;
+  }
+  // ───────────────────────────────────────────────────────────────────────────
+  // Markup
+  // ───────────────────────────────────────────────────────────────────────────
+  #W() {
+    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");
+    let o = "";
+    t && (o = `
+      <div data-ry-target="output-row" class="ry-gradient-picker__output-row">
+        <input data-ry-target="output" type="text" class="ry-gradient-picker__output" spellcheck="false" />
+        <button data-ry-target="copy-btn" type="button" class="ry-gradient-picker__copy-btn">${e}</button>
+      </div>`), this.innerHTML = `
+      <div data-ry-target="controls" class="ry-gradient-picker__controls">
+        <div data-ry-target="type-toggle" class="ry-gradient-picker__type-toggle">
+          <button data-ry-target="type-solid" type="button" class="ry-gradient-picker__type-btn">${s}</button>
+          <button data-ry-target="type-linear" type="button" class="ry-gradient-picker__type-btn">${i}</button>
+          <button data-ry-target="type-radial" type="button" class="ry-gradient-picker__type-btn">${r}</button>
+        </div>
+        <div data-ry-target="angle-control" class="ry-gradient-picker__angle-control">
+          <ry-number-select data-ry-target="angle-select" min="0" max="360" step="1" value="${this.#e}" wrap suffix="°" size="xs" arrows="none"></ry-number-select>
+        </div>
+        <div data-ry-target="shape-control" class="ry-gradient-picker__shape-control">
+          <button data-ry-target="shape-circle" type="button" class="ry-gradient-picker__shape-btn">${a}</button>
+          <button data-ry-target="shape-ellipse" type="button" class="ry-gradient-picker__shape-btn">${n}</button>
+        </div>
+      </div>
+      <div data-ry-target="bar-container" class="ry-gradient-picker__bar-container">
+        <div data-ry-target="bar" class="ry-gradient-picker__bar"></div>
+      </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.#u = this.$('[data-ry-target="output"]'), this.#E();
+  }
+  #E() {
+    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.#y(t.position), e.style.setProperty("--stop-color", t.color), t.id === this.#r && e.setAttribute("data-selected", ""), this.#n.appendChild(e);
+      }
+    }
+  }
+  // ───────────────────────────────────────────────────────────────────────────
+  // Event binding
+  // ───────────────────────────────────────────────────────────────────────────
+  #X() {
+    this.#n && (this.on(this.#n, "pointerdown", this.#G), this.on(this.#n, "pointermove", this.#K), this.on(this.#n, "pointerup", this.#q), this.on(this.#n, "lostpointercapture", this.#q));
+    const t = this.$('[data-ry-target="type-solid"]'), e = this.$('[data-ry-target="type-linear"]'), s = this.$('[data-ry-target="type-radial"]');
+    t && this.on(t, "click", () => this.#C("solid")), e && this.on(e, "click", () => this.#C("linear")), s && this.on(s, "click", () => this.#C("radial"));
+    const i = this.$('[data-ry-target="angle-select"]');
+    i && this.on(i, "ry:input", this.#V);
+    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.#u && (this.on(this.#u, "keydown", this.#F), this.on(this.#u, "blur", this.#j));
+    const n = this.$('[data-ry-target="copy-btn"]');
+    n && this.on(n, "click", this.#z), this.#n && this.on(this.#n, "keydown", this.#J);
+  }
+  // ───────────────────────────────────────────────────────────────────────────
+  // Bar / Stop interaction handlers
+  // ───────────────────────────────────────────────────────────────────────────
+  #G = (t) => {
+    if (this.disabled) return;
+    const s = t.target.closest('[data-ry-target="stop"]');
+    if (s) {
+      const i = s.getAttribute("data-stop-id");
+      if (!i) return;
+      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.#m(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();
+    }
+  };
+  #K = (t) => {
+    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.#c.left) / this.#c.width));
+    e.position = Math.round(s * 100);
+    const i = this.#c.top + this.#c.height / 2, r = Math.abs(t.clientY - i);
+    this.#l = r > ft && this.#s.length > 2;
+    const a = this.#n?.querySelector(`[data-stop-id="${e.id}"]`);
+    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.#$(), this.#N(), this.#D(), this.#k(), this.#I();
+  };
+  #q = () => {
+    this.#o && (this.#l && this.#f(this.#o), this.#o = null, this.#l = !1, this.#c = null, this.#S(), this.#B());
+  };
+  #J = (t) => {
+    if (this.disabled) return;
+    const s = t.target.closest('[data-ry-target="stop"]');
+    if (!s) return;
+    const i = s.getAttribute("data-stop-id");
+    if (!i) return;
+    const r = this.#s.find((o) => o.id === i);
+    if (!r) return;
+    const a = t.shiftKey ? 10 : 1;
+    let n = !1;
+    switch (t.key) {
+      case "ArrowRight":
+        r.position = Math.min(100, r.position + a), n = !0;
+        break;
+      case "ArrowLeft":
+        r.position = Math.max(0, r.position - a), n = !0;
+        break;
+      case "Delete":
+      case "Backspace":
+        this.#f(i) && (this.#I(), this.#B()), t.preventDefault();
+        return;
+    }
+    n && (t.preventDefault(), this.#$(), this.#Y(), this.#N(), this.#D(), this.#k(), this.#S(), this.#I(), this.#B());
+  };
+  // ───────────────────────────────────────────────────────────────────────────
+  // Type / Angle / Shape handlers
+  // ───────────────────────────────────────────────────────────────────────────
+  #C(t) {
+    this.#t !== t && (this.#t = t, this.setAttribute("data-ry-type", t), this.#_(), this.#D(), this.#k(), this.#S(), this.#I(), this.#B());
+  }
+  #V = (t) => {
+    const e = t.detail;
+    this.#e = e.value, this.#D(), this.#k(), this.#S(), this.#I();
+  };
+  #P(t) {
+    this.#i !== t && (this.#i = t, this.#_(), this.#k(), this.#S(), this.#I(), this.#B());
+  }
+  // ───────────────────────────────────────────────────────────────────────────
+  // Color picker handlers
+  // ───────────────────────────────────────────────────────────────────────────
+  #R = () => {
+    const t = this.#H();
+    !t || !this.#p || (t.color = this.#p.value, this.#Z(t), this.#N(), this.#D(), this.#k(), this.#I());
+  };
+  #T = () => {
+    this.#S(), this.#B();
+  };
+  // ───────────────────────────────────────────────────────────────────────────
+  // Copy handler
+  // ───────────────────────────────────────────────────────────────────────────
+  #z = () => {
+    const t = this.#g();
+    navigator.clipboard.writeText(t).then(() => {
+      const e = this.$('[data-ry-target="copy-btn"]');
+      e && (e.setAttribute("data-copied", ""), setTimeout(() => e.removeAttribute("data-copied"), 1500));
+    });
+  };
+  // ───────────────────────────────────────────────────────────────────────────
+  // Output (editable CSS) handlers
+  // ───────────────────────────────────────────────────────────────────────────
+  #F = (t) => {
+    t.key === "Enter" && (t.preventDefault(), this.#A());
+  };
+  #j = () => {
+    this.#A();
+  };
+  #A() {
+    if (!this.#u) return;
+    const t = this.#u.value.trim();
+    t && this.#b(t) ? (this.#E(), this.#x(), this.#S(), this.#I(), this.#B()) : this.#k();
+  }
+  // ───────────────────────────────────────────────────────────────────────────
+  // Color interpolation
+  // ───────────────────────────────────────────────────────────────────────────
+  #U(t) {
+    if (this.#s.length === 0) return "#808080";
+    if (this.#s.length === 1) return this.#s[0].color;
+    const e = [...this.#s].sort((l, c) => l.position - c.position);
+    if (t <= e[0].position) return e[0].color;
+    if (t >= e[e.length - 1].position) return e[e.length - 1].color;
+    let s = e[0], i = e[1];
+    for (let l = 0; l < e.length - 1; l++)
+      if (e[l].position <= t && e[l + 1].position >= t) {
+        s = e[l], i = e[l + 1];
+        break;
+      }
+    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 : pt(gt(n, o, a));
+  }
+  // ───────────────────────────────────────────────────────────────────────────
+  // Update methods
+  // ───────────────────────────────────────────────────────────────────────────
+  #x() {
+    this.setAttribute("data-ry-type", this.#t), this.#_(), this.#N(), this.#D(), this.#Y(), this.#O(), 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"]');
+    t && t.toggleAttribute("data-active", this.#t === "solid"), e && e.toggleAttribute("data-active", this.#t === "linear"), s && s.toggleAttribute("data-active", this.#t === "radial");
+    const i = this.$('[data-ry-target="shape-circle"]'), r = this.$('[data-ry-target="shape-ellipse"]');
+    i && i.toggleAttribute("data-active", this.#i === "circle"), r && r.toggleAttribute("data-active", this.#i === "ellipse");
+    const a = this.$('[data-ry-target="angle-select"]');
+    a && a.setAttribute("value", String(this.#e));
+  }
+  #D() {
+    if (!this.#p) return;
+    const t = this.#p.querySelector('[data-ry-target="preview-color"]');
+    t && (t.style.backgroundImage = this.#t === "solid" ? "" : this.#g());
+  }
+  #N() {
+    if (!this.#n) return;
+    const t = this.#s.map((e) => `${e.color} ${e.position}%`).join(", ");
+    this.#n.style.backgroundImage = `linear-gradient(to right, ${t})`;
+  }
+  #Y() {
+    if (this.#n)
+      for (const t of this.#s) {
+        const e = this.#n.querySelector(`[data-stop-id="${t.id}"]`);
+        e && (e.style.left = this.#y(t.position));
+      }
+  }
+  #Z(t) {
+    if (!this.#n) return;
+    const e = this.#n.querySelector(`[data-stop-id="${t.id}"]`);
+    e && e.style.setProperty("--stop-color", t.color);
+  }
+  #O() {
+    if (!this.#n) return;
+    const t = this.#n.querySelectorAll('[data-ry-target="stop"]');
+    for (const e of t)
+      e.getAttribute("data-stop-id") === this.#r ? e.setAttribute("data-selected", "") : e.removeAttribute("data-selected");
+  }
+  #L() {
+    const t = this.#H();
+    !t || !this.#p || this.#p.setColor(t.color);
+  }
+  #k() {
+    this.#u && document.activeElement !== this.#u && (this.#u.value = this.#g());
+  }
+  #S() {
+    const t = this.#g();
+    this.getAttribute("value") !== t && (this.#h = !0, this.setAttribute("value", t), this.#h = !1);
+  }
+  // ───────────────────────────────────────────────────────────────────────────
+  // Events
+  // ───────────────────────────────────────────────────────────────────────────
+  #I() {
+    this.emit("input", {
+      value: this.#g(),
+      type: this.#t,
+      angle: this.#e,
+      shape: this.#i,
+      stops: this.stops
+    });
+  }
+  #B() {
+    this.emit("change", {
+      value: this.#g(),
+      type: this.#t,
+      angle: this.#e,
+      shape: this.#i,
+      stops: this.stops
+    });
+  }
+  // ───────────────────────────────────────────────────────────────────────────
+  // Attribute changed
+  // ───────────────────────────────────────────────────────────────────────────
+  attributeChangedCallback(t, e, s) {
+    e === s || this.#h || t === "value" && this.#n && s && this.#b(s) && (this.#E(), this.#x());
+  }
+  // ───────────────────────────────────────────────────────────────────────────
+  // Public API
+  // ───────────────────────────────────────────────────────────────────────────
+  get value() {
+    return this.#g();
+  }
+  set value(t) {
+    this.#b(t) && (this.#E(), this.#x(), this.#S());
+  }
+  get type() {
+    return this.#t;
+  }
+  set type(t) {
+    this.#C(t);
+  }
+  get angle() {
+    return this.#e;
+  }
+  set angle(t) {
+    this.#e = (t % 360 + 360) % 360, this.#_(), this.#k(), this.#S();
+  }
+  get shape() {
+    return this.#i;
+  }
+  set shape(t) {
+    this.#P(t);
+  }
+  get stops() {
+    return this.#s.map((t) => ({ ...t }));
+  }
+  get selectedStop() {
+    const t = this.#H();
+    return t ? { ...t } : null;
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  addStop(t, e) {
+    this.#m(t, e), this.#S(), this.#I(), this.#B();
+  }
+  removeStop(t) {
+    const e = this.#f(t);
+    return e && (this.#k(), this.#S(), this.#B()), e;
+  }
+}
+customElements.define("ry-gradient-picker", yt);
+let bt = 0;
+const mt = 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');
+}
+class k extends u {
+  // Drag state
+  #t = !1;
+  #e = !1;
+  #i = 0;
+  #s = 0;
+  #r = null;
+  #a = null;
+  #o = null;
+  #l = null;
+  setup() {
+    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 ?? ""
+      }));
+    }), this.on(this, "change", (t) => {
+      const e = t.target;
+      if (!e.classList.contains("ry-tree__toggle")) return;
+      const i = e.closest(".ry-tree__item")?.querySelector('[data-ry-target="folder"]')?.dataset.ryLabel ?? "";
+      this.emit("toggle", {
+        label: i,
+        open: e.checked
+      });
+    }), this.hasAttribute("sortable") && this.#v();
+  }
+  // ── Build ──────────────────────────────────────────────────
+  #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.#h(s));
+    this.innerHTML = "", this.appendChild(e);
+  }
+  #h(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-${++bt}`, 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>
+        ${s}
+      `;
+      const d = document.createElement("div");
+      d.className = "ry-tree__children-wrapper";
+      const g = document.createElement("ul");
+      g.className = "ry-tree__children";
+      for (const b of a)
+        g.appendChild(this.#h(b));
+      d.appendChild(g), 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);
+    }
+    return e;
+  }
+  // ── Serialization ──────────────────────────────────────────
+  /** Serialize the current tree state to JSON. */
+  toJSON() {
+    const t = this.$(".ry-tree__root");
+    return t ? this.#n(t) : [];
+  }
+  /** Alias for toJSON(). */
+  get value() {
+    return this.toJSON();
+  }
+  #n(t) {
+    return Array.from(t.children).filter(
+      (s) => s instanceof HTMLElement && s.classList.contains("ry-tree__item")
+    ).map((s) => this.#p(s));
+  }
+  #p(t) {
+    const e = t.querySelector(':scope > [data-ry-target="folder"]'), s = t.querySelector(':scope > [data-ry-target="file"]');
+    if (e) {
+      const r = t.querySelector(":scope > .ry-tree__toggle"), a = t.querySelector(".ry-tree__children"), n = { label: e.dataset.ryLabel ?? "" };
+      if (r?.checked && (n.open = !0), a) {
+        const o = this.#n(a);
+        o.length > 0 && (n.children = o);
+      }
+      return n;
+    }
+    const i = { label: s?.dataset.ryLabel ?? "" };
+    return s?.hasAttribute("data-ry-selected") && (i.selected = !0), i;
+  }
+  /** Create a tree element from JSON data. */
+  static from(t) {
+    const e = document.createElement("ry-tree");
+    for (const s of t)
+      e.appendChild(k.#u(s));
+    return e;
+  }
+  static #u(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(k.#u(s));
+    return e;
+  }
+  // ── Drag and Drop ──────────────────────────────────────────
+  #v() {
+    this.on(this, "pointerdown", this.#b), this.on(document, "pointermove", this.#w), this.on(document, "pointerup", this.#g);
+  }
+  #b = (t) => {
+    const s = t.target.closest(".ry-tree__label, .ry-tree__file");
+    if (!s) return;
+    const i = s.closest(".ry-tree__item");
+    i && (this.#t = !0, this.#i = t.clientX, this.#s = t.clientY, this.#r = i);
+  };
+  #w = (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) < mt) return;
+      this.#t = !1, this.#e = !0, this.#d(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.#f();
+      return;
+    }
+    const s = e.closest(".ry-tree__label, .ry-tree__file");
+    if (!s) {
+      this.#f();
+      return;
+    }
+    const i = s.closest(".ry-tree__item");
+    if (!i || i === this.#r) {
+      this.#f();
+      return;
+    }
+    if (this.#r?.contains(i)) {
+      this.#f();
+      return;
+    }
+    const r = s.getBoundingClientRect(), a = t.clientY - r.top, n = r.height, o = i.querySelector(":scope > .ry-tree__toggle") !== null;
+    let l;
+    o && a > n * 0.25 && a < n * 0.75 ? l = "inside" : a < n * 0.5 ? l = "before" : l = "after", this.#m(i, l);
+  };
+  #g = () => {
+    this.#e && this.#y(), this.#t = !1, this.#e = !1, this.#r = null;
+  };
+  #d(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");
+    if (!e) return;
+    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;
+  }
+  #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.#l;
+    this.#f(), this.#r && t && e && this.#M(this.#r, t, e);
+  }
+  #m(t, e) {
+    this.#o === t && this.#l === e || (this.#f(), t.setAttribute("data-ry-drop-target", e), this.#o = t, this.#l = e);
+  }
+  #f() {
+    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.#$(t), r = this.#$(e);
+    if (s === "before")
+      e.parentNode?.insertBefore(t, e);
+    else if (s === "after")
+      e.parentNode?.insertBefore(t, e.nextSibling);
+    else {
+      const a = e.querySelector(".ry-tree__children");
+      if (a) {
+        a.appendChild(t);
+        const n = e.querySelector(":scope > .ry-tree__toggle");
+        n && !n.checked && (n.checked = !0);
+      }
+    }
+    this.emit("move", {
+      item: i,
+      target: r,
+      position: s
+    });
+  }
+  #$(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 vt extends u {
+  // Declarative container consumed by RyTree#build
+}
+customElements.define("ry-tree", k);
+customElements.define("ry-tree-item", vt);
+class At 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) {
+      const s = this.$('[data-ry-target="remove"]');
+      s && this.on(s, "click", (i) => {
+        i.stopPropagation(), this.emit("remove", {
+          value: this.dataset.value ?? "",
+          label: t
+        }), this.remove();
+      });
+    }
+  }
+  get label() {
+    return this.$('[data-ry-target="label"]')?.textContent?.trim() ?? "";
+  }
+}
+customElements.define("ry-tag", At);
+class kt extends u {
+  #t = [];
+  setup() {
+    this.#e(), this.#i();
+  }
+  #e() {
+    if (this.$('[data-ry-target="container"]')) return;
+    const t = this.getAttribute("placeholder") ?? "Add tag...", e = this.getAttribute("name") ?? "", s = this.hasAttribute("disabled");
+    this.innerHTML = `
+      <div data-ry-target="container" class="ry-tag-input__container">
+        <div data-ry-target="tags" class="ry-tag-input__tags"></div>
+        <input data-ry-target="input" class="ry-tag-input__input" type="text" placeholder="${t}" ${s ? "disabled" : ""}>
+      </div>
+      <input data-ry-target="hidden" type="hidden" ${e ? `name="${e}"` : ""}>
+    `;
+    const i = this.$('[data-ry-target="input"]');
+    i && (this.on(i, "keydown", this.#s), this.on(i, "paste", this.#r));
+    const r = this.$('[data-ry-target="container"]');
+    r && this.on(r, "click", () => i?.focus()), this.on(this, "ry:remove", this.#a);
+  }
+  #i() {
+    const t = this.getAttribute("value");
+    if (!t) return;
+    const e = this.getAttribute("delimiter") ?? ",", s = t.split(e).map((i) => i.trim()).filter(Boolean);
+    for (const i of s)
+      this.#o(i);
+  }
+  #s = (t) => {
+    const e = t.target, s = this.getAttribute("delimiter") ?? ",", i = e.value.trim();
+    if (t.key === "Enter" || t.key === s || t.key === "Tab") {
+      if (i)
+        t.preventDefault(), this.#o(i), e.value = "";
+      else if (t.key === "Tab")
+        return;
+    }
+    t.key === "Backspace" && !e.value && this.#t.length > 0 && this.#l();
+  };
+  #r = (t) => {
+    t.preventDefault();
+    const e = t.clipboardData?.getData("text") ?? "", s = this.getAttribute("delimiter") ?? ",", i = e.split(new RegExp(`[${s}\\t\\n]+`)).map((a) => a.trim()).filter(Boolean);
+    for (const a of i)
+      this.#o(a);
+    const r = this.$('[data-ry-target="input"]');
+    r && (r.value = "");
+  };
+  #a = (t) => {
+    const e = t.detail.value, s = this.#t.indexOf(e);
+    s >= 0 && (this.#t.splice(s, 1), this.#c(), this.emit("change", { values: [...this.#t] }));
+  };
+  #o(t) {
+    const e = this.getAttribute("max-tags");
+    if (e && this.#t.length >= parseInt(e, 10) || !this.hasAttribute("allow-duplicates") && this.#t.includes(t)) return;
+    this.#t.push(t);
+    const s = this.$('[data-ry-target="tags"]');
+    if (s) {
+      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.#c(), this.emit("add", { value: t }), this.emit("change", { values: [...this.#t] });
+  }
+  #l() {
+    const e = this.$('[data-ry-target="tags"]')?.lastElementChild;
+    if (e) {
+      const s = e.dataset.value ?? "";
+      e.remove(), this.#t.pop(), this.#c(), this.emit("remove", { value: s, label: s }), this.emit("change", { values: [...this.#t] });
+    }
+  }
+  #c() {
+    const t = this.$('[data-ry-target="hidden"]'), e = this.getAttribute("delimiter") ?? ",";
+    t && (t.value = this.#t.join(e));
+  }
+  get value() {
+    const t = this.getAttribute("delimiter") ?? ",";
+    return this.#t.join(t);
+  }
+  get values() {
+    return [...this.#t];
+  }
+}
+customElements.define("ry-tag-input", kt);
+class wt extends u {
+}
+customElements.define("ry-hero", wt);
+class $t 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>` : "";
+    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>
+    `;
+  }
+}
+customElements.define("ry-stat", $t);
+class xt extends u {
+  setup() {
+    this.#t();
+  }
+  #t() {
+    if (this.$('[data-ry-target="icon"]')) return;
+    const t = this.getAttribute("icon");
+    if (!t) return;
+    const e = p(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 _t extends u {
+}
+customElements.define("ry-feature", xt);
+customElements.define("ry-feature-grid", _t);
+class Mt extends u {
+}
+class Ct extends u {
+}
+customElements.define("ry-pricing", Mt);
+customElements.define("ry-pricing-card", Ct);
+class Et extends u {
+  #t = 0;
+  #e = 0;
+  #i = null;
+  #s = 0;
+  #r = !1;
+  setup() {
+    this.#a(), this.#n(), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.on(this, "keydown", this.#o);
+  }
+  #a() {
+    if (this.$('[data-ry-target="viewport"]')) return;
+    const t = [...this.children];
+    if (this.#e = t.length, this.#e === 0) return;
+    const e = this.hasAttribute("arrows"), s = this.hasAttribute("dots"), i = document.createElement("div");
+    i.setAttribute("data-ry-target", "track"), i.className = "ry-carousel__track";
+    for (const a of t) {
+      const n = document.createElement("div");
+      n.setAttribute("data-ry-target", "slide"), n.className = "ry-carousel__slide", n.appendChild(a), i.appendChild(n);
+    }
+    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());
+      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());
+    }
+    if (s) {
+      const a = document.createElement("div");
+      a.setAttribute("data-ry-target", "dots"), a.className = "ry-carousel__dots";
+      for (let n = 0; n < this.#e; n++) {
+        const o = document.createElement("button");
+        o.setAttribute("data-ry-target", "dot"), o.className = "ry-carousel__dot", o.setAttribute("aria-label", `Go to slide ${n + 1}`), o.setAttribute("type", "button"), n === 0 && o.setAttribute("data-active", ""), this.on(o, "click", () => this.goTo(n)), a.appendChild(o);
+      }
+      this.appendChild(a);
+    }
+    this.on(r, "pointerdown", this.#l), this.on(r, "pointermove", this.#c), this.on(r, "pointerup", this.#h), this.on(r, "pointercancel", this.#h), this.hasAttribute("pause-on-hover") && (this.on(this, "mouseenter", () => this.#p()), this.on(this, "mouseleave", () => this.#n())), this.goTo(0);
+  }
+  #o = (t) => {
+    t.key === "ArrowLeft" ? (t.preventDefault(), this.prev()) : t.key === "ArrowRight" && (t.preventDefault(), this.next());
+  };
+  #l = (t) => {
+    this.#s = t.clientX, this.#r = !0, t.currentTarget.setPointerCapture(t.pointerId);
+  };
+  #c = (t) => {
+    this.#r && t.preventDefault();
+  };
+  #h = (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;
+    const t = parseInt(this.getAttribute("interval") ?? "5000", 10);
+    this.#i = setInterval(() => this.next(), t);
+  }
+  #p() {
+    this.#i && (clearInterval(this.#i), this.#i = null);
+  }
+  goTo(t) {
+    if (this.hasAttribute("loop"))
+      t < 0 && (t = this.#e - 1), t >= this.#e && (t = 0);
+    else if (t < 0 || t >= this.#e) return;
+    this.#t = t;
+    const s = this.$('[data-ry-target="track"]');
+    s && (s.style.transform = `translateX(-${t * 100}%)`), this.$$('[data-ry-target="dot"]').forEach((r, a) => {
+      a === t ? r.setAttribute("data-active", "") : r.removeAttribute("data-active");
+    }), this.emit("change", { index: t, slide: this.#t });
+  }
+  next() {
+    this.goTo(this.#t + 1);
+  }
+  prev() {
+    this.goTo(this.#t - 1);
+  }
+  teardown() {
+    this.#p();
+  }
+}
+customElements.define("ry-carousel", Et);
+window.RyToast = f;
 console.log("ry-ui loaded");
 export {
-  T as RyAccordion,
-  j as RyAlert,
-  D as RyButton,
-  z as RyCode,
-  at as RyColorInput,
-  rt as RyColorPicker,
-  N as RyDrawer,
-  I as RyDropdown,
-  d as RyElement,
-  Y as RyExample,
-  B as RyField,
-  G as RyIcon,
-  et as RyKnob,
-  H as RyModal,
-  V as RySelect,
-  tt as RySlider,
-  P as RySwitch,
-  L as RyTabs,
-  F as RyThemeToggle,
-  p as RyToast,
-  Q as RyToggleButton,
-  K as RyTooltip,
-  y as getIcon,
-  lt as getIconNames,
-  _ as processTransforms,
-  ot as registerIcon,
-  ht as registerIcons,
-  k as transform
+  R as RyAccordion,
+  K as RyAlert,
+  N as RyButton,
+  Et as RyCarousel,
+  Q as RyCode,
+  ut as RyColorInput,
+  dt as RyColorPicker,
+  W as RyDrawer,
+  j as RyDropdown,
+  u as RyElement,
+  tt as RyExample,
+  xt as RyFeature,
+  _t as RyFeatureGrid,
+  q as RyField,
+  yt as RyGradientPicker,
+  wt as RyHero,
+  et as RyIcon,
+  ot as RyKnob,
+  P as RyModal,
+  ht as RyNumberSelect,
+  Mt as RyPricing,
+  Ct as RyPricingCard,
+  J as RySelect,
+  nt as RySlider,
+  $t as RyStat,
+  z as RySwitch,
+  F as RyTabs,
+  At as RyTag,
+  kt as RyTagInput,
+  O as RyThemeToggle,
+  f as RyToast,
+  at as RyToggleButton,
+  Y as RyTooltip,
+  k as RyTree,
+  vt as RyTreeItem,
+  p as getIcon,
+  It as getIconNames,
+  E as processTransforms,
+  Tt as registerIcon,
+  Lt as registerIcons,
+  M as transform
 };
 //# sourceMappingURL=ry-ui.js.map