@ryanhelsing/ry-ui 1.0.0 → 1.0.1

package/dist/ry-ui.js

@@ -89,7 +89,7 @@ class d extends HTMLElement {
     this.on(t, "keydown", a), i?.focus();
   }
 }
-const C = [
+const E = [
   // Layout
   "page",
   "header",
@@ -135,7 +135,7 @@ const C = [
   "color-picker",
   "color-input"
 ], S = new RegExp(
-  `<(/?)(${C.join("|")})(\\s|>|/)`,
+  `<(/?)(${E.join("|")})(\\s|>|/)`,
   "g"
 );
 function k(o) {
@@ -449,7 +449,7 @@ class F extends d {
   }
 }
 customElements.define("ry-theme-toggle", F);
-class B extends d {
+class j extends d {
   setup() {
     this.#t();
     const t = this.$("[close]");
@@ -469,8 +469,8 @@ class B extends d {
     }, 200), this.emit("close");
   }
 }
-customElements.define("ry-alert", B);
-class j extends d {
+customElements.define("ry-alert", j);
+class B extends d {
   setup() {
     this.#t();
   }
@@ -486,7 +486,7 @@ class j 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", j);
+customElements.define("ry-field", B);
 let R = 0;
 class P extends d {
   #t = null;
@@ -575,7 +575,7 @@ class K extends d {
   }
 }
 customElements.define("ry-tooltip", K);
-class W extends d {
+class N extends d {
   #t = null;
   #e = 0;
   setup() {
@@ -620,8 +620,8 @@ class W extends d {
     this.state === "open" ? this.close() : this.open();
   }
 }
-customElements.define("ry-drawer", W);
-const V = 4e3;
+customElements.define("ry-drawer", N);
+const U = 4e3;
 class p extends d {
   #t = null;
   static observedAttributes = ["variant", "duration"];
@@ -651,7 +651,7 @@ class p extends d {
     this.#s();
     const t = this.$("[close]");
     t && this.on(t, "click", () => this.dismiss());
-    const e = parseInt(this.getAttribute("duration") ?? String(V), 10);
+    const e = parseInt(this.getAttribute("duration") ?? String(U), 10);
     e > 0 && (this.#t = setTimeout(() => this.dismiss(), e)), requestAnimationFrame(() => {
       this.state = "visible";
     });
@@ -684,8 +684,8 @@ class p extends d {
   }
 }
 customElements.define("ry-toast", p);
-let q = 0;
-class N extends d {
+let W = 0;
+class V extends d {
   #t = null;
   #e = -1;
   #i = "";
@@ -694,7 +694,7 @@ class N extends d {
   _options = [];
   static observedAttributes = ["value", "disabled"];
   setup() {
-    this.#t = `ry-select-${++q}`, 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-${++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");
     const t = this.getAttribute("value");
     t && (this.value = t);
   }
@@ -757,10 +757,10 @@ class N extends d {
         t.preventDefault(), e ? this.#u() : this.open();
         break;
       case "ArrowUp":
-        t.preventDefault(), e && this.#b();
+        t.preventDefault(), e && this.#f();
         break;
       case "Home":
-        e && (t.preventDefault(), this.#f());
+        e && (t.preventDefault(), this.#b());
         break;
       case "End":
         e && (t.preventDefault(), this.#g());
@@ -806,11 +806,11 @@ class N extends d {
     const t = this.$$('[data-ry-target="option"]:not([data-disabled])'), e = Math.min(this.#e + 1, t.length - 1);
     this.#a(e);
   }
-  #b() {
+  #f() {
     const t = Math.max(this.#e - 1, 0);
     this.#a(t);
   }
-  #f() {
+  #b() {
     this.#a(0);
   }
   #g() {
@@ -867,10 +867,10 @@ class N extends d {
     this.#s && clearTimeout(this.#s);
   }
 }
-class U extends HTMLElement {
+class q extends HTMLElement {
 }
-customElements.define("ry-option", U);
-customElements.define("ry-select", N);
+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>',
@@ -994,9 +994,9 @@ class z extends d {
     let s = t;
     for (; s.length > 0; ) {
       if (s.startsWith("/*")) {
-        const f = s.indexOf("*/");
-        if (f !== -1) {
-          e.push({ type: "comment", value: s.slice(0, f + 2) }), s = s.slice(f + 2);
+        const b = s.indexOf("*/");
+        if (b !== -1) {
+          e.push({ type: "comment", value: s.slice(0, b + 2) }), s = s.slice(b + 2);
           continue;
         }
       }
@@ -1042,8 +1042,8 @@ class z extends d {
       }
       const $ = s.match(/^([\w-]+)/);
       if ($?.[1]) {
-        const f = $[1];
-        ["inherit", "initial", "unset", "none", "auto", "transparent", "solid", "dashed", "dotted", "flex", "grid", "block", "inline", "inline-block", "absolute", "relative", "fixed", "sticky"].includes(f) ? e.push({ type: "keyword", value: f }) : e.push({ type: "value", value: f }), s = s.slice(f.length);
+        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);
         continue;
       }
       const x = s[0];
@@ -1241,20 +1241,34 @@ class Y extends d {
   setup() {
     const t = this.$("template");
     if (!t) return;
-    const e = this.#t(t.innerHTML), s = k(e), i = this.hasAttribute("stacked");
+    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");
     this.innerHTML = `
       <div data-ry-target="preview" class="ry-example__preview"></div>
       <div data-ry-target="code" class="ry-example__code"></div>
-    `, i && this.setAttribute("data-stacked", "");
+      ${s ? '<div data-ry-target="usage" class="ry-example__usage"></div>' : ""}
+    `, 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);
+  }
+  #t(t) {
+    const e = this.$('[data-ry-target="usage"]');
+    if (!e) return;
+    const s = document.createElement("button");
+    s.className = "ry-example__usage-toggle", s.type = "button", s.innerHTML = '<span>JS Usage</span><ry-icon name="chevron-down" size="16"></ry-icon>', s.setAttribute("aria-expanded", "false");
+    const i = document.createElement("div");
+    i.className = "ry-example__usage-panel", i.hidden = !0;
     const r = document.createElement("ry-code");
-    r.setAttribute("language", "html"), r.setAttribute("title", this.getAttribute("title") ?? "Example"), r.textContent = e, this.$('[data-ry-target="code"]').appendChild(r);
-    const a = document.createElement("template");
-    a.innerHTML = s, this.$('[data-ry-target="preview"]').appendChild(a.content);
+    r.setAttribute("language", "js"), r.setAttribute("title", "JavaScript"), r.textContent = t, i.appendChild(r), e.appendChild(s), e.appendChild(i), this.on(s, "click", () => {
+      const a = s.getAttribute("aria-expanded") === "true";
+      s.setAttribute("aria-expanded", String(!a)), i.hidden = a;
+    });
   }
   /**
    * Normalize indentation by removing common leading whitespace
    */
-  #t(t) {
+  #e(t) {
     const e = t.split(`
 `);
     for (; e.length && !e[0].trim(); ) e.shift();
@@ -1463,7 +1477,7 @@ class tt extends d {
     this.#i && this.on(this.#i, "pointerdown", this.#a);
     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.#b), this.on(document, "pointerup", this.#f);
+    this.on(document, "pointermove", this.#f), this.on(document, "pointerup", this.#b);
   }
   #a = (t) => {
     if (this.disabled) return;
@@ -1478,12 +1492,12 @@ class tt extends d {
   #u = (t, e) => {
     this.disabled || (t.stopPropagation(), this.#t = !0, this.#e = e, t.target.setPointerCapture(t.pointerId));
   };
-  #b = (t) => {
+  #f = (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();
   };
-  #f = () => {
+  #b = () => {
     this.#t && (this.#t = !1, this.#e = null, this.#x());
   };
   #g = (t, e) => {
@@ -1637,7 +1651,7 @@ class et extends d {
     `, this.#s = this.$('[data-ry-target="ring"]'), this.#r = this.$('[data-ry-target="indicator"]'), this.#n = 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.#b), this.on(document, "touchmove", this.#f), this.on(document, "touchend", this.#g), this.on(this.#s, "wheel", this.#o), this.on(this, "keydown", this.#w));
+    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));
   }
   #p = (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", ""));
@@ -1650,10 +1664,10 @@ class et extends d {
   #u = () => {
     this.#t && (this.#t = !1, this.#s?.classList.remove("ry-knob__ring--dragging"), this.removeAttribute("data-dragging"), this.#m());
   };
-  #b = (t) => {
+  #f = (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", ""));
   };
-  #f = (t) => {
+  #b = (t) => {
     if (!this.#t) return;
     t.preventDefault();
     const e = t.touches[0];
@@ -1761,7 +1775,7 @@ class et extends d {
   }
 }
 customElements.define("ry-knob", et);
-function b(o) {
+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);
@@ -1829,7 +1843,7 @@ function st(o) {
     v: Math.round(s * 100)
   };
 }
-function E(o) {
+function C(o) {
   const t = (e) => e.toString(16).padStart(2, "0");
   return `#${t(o.r)}${t(o.g)}${t(o.b)}`;
 }
@@ -1896,8 +1910,8 @@ class rt extends d {
   #p = null;
   #a = null;
   #u = null;
-  #b = null;
   #f = null;
+  #b = null;
   #g = null;
   #o = null;
   #w = null;
@@ -1946,10 +1960,10 @@ 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.#b = this.$('[data-ry-target="hue-slider"]'), this.#f = 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.#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"]');
   }
   #k() {
-    this.#c && this.on(this.#c, "click", this.#m), this.on(document, "click", this.#x), this.on(document, "keydown", this.#B), this.#a && this.on(this.#a, "pointerdown", this.#R), this.#u && this.on(this.#u, "keydown", this.#P), this.#b && this.on(this.#b, "pointerdown", this.#O), this.#f && this.on(this.#f, "keydown", this.#K), this.#g && this.on(this.#g, "pointerdown", this.#W), this.#o && this.on(this.#o, "keydown", this.#V), this.on(document, "pointermove", this.#q), this.on(document, "pointerup", this.#N), this.#h && (this.on(this.#h, "change", this.#T), this.on(this.#h, "keydown", this.#U));
+    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));
     const t = this.$('[data-ry-target="format-toggle"]');
     t && this.on(t, "click", this.#z);
     const e = this.$('[data-ry-target="swatches"]');
@@ -1971,16 +1985,16 @@ class rt extends d {
   #x = (t) => {
     this.state === "open" && (this.contains(t.target) || this.close());
   };
-  #B = (t) => {
+  #j = (t) => {
     t.key === "Escape" && this.state === "open" && (this.close(), this.#c?.focus());
   };
   open() {
-    this.hasAttribute("inline") || (this.#j(), this.state = "open");
+    this.hasAttribute("inline") || (this.#B(), this.state = "open");
   }
   close() {
     this.hasAttribute("inline") || (this.state = "closed", this.removeAttribute("data-ry-position"));
   }
-  #j() {
+  #B() {
     if (!this.#p || !this.#c) return;
     const t = this.#c.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");
@@ -1989,9 +2003,9 @@ class rt extends d {
   // Grid handlers
   // ───────────────────────────────────────────────────────────────────────────
   #R = (t) => {
-    this.disabled || (t.preventDefault(), this.#r = !0, this.#u?.focus(), this.#E(t));
+    this.disabled || (t.preventDefault(), this.#r = !0, this.#u?.focus(), this.#C(t));
   };
-  #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();
@@ -2020,11 +2034,11 @@ class rt extends d {
   // Hue handlers
   // ───────────────────────────────────────────────────────────────────────────
   #O = (t) => {
-    this.disabled || (t.preventDefault(), this.#n = !0, this.#f?.focus(), this.#C(t));
+    this.disabled || (t.preventDefault(), this.#n = !0, this.#b?.focus(), this.#E(t));
   };
-  #C(t) {
-    if (!this.#b) return;
-    const e = this.#b.getBoundingClientRect(), s = Math.max(0, Math.min(1, (t.clientX - e.left) / e.width));
+  #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) => {
@@ -2046,7 +2060,7 @@ class rt extends d {
   // ───────────────────────────────────────────────────────────────────────────
   // Alpha handlers
   // ───────────────────────────────────────────────────────────────────────────
-  #W = (t) => {
+  #N = (t) => {
     this.disabled || (t.preventDefault(), this.#l = !0, this.#o?.focus(), this.#S(t));
   };
   #S(t) {
@@ -2054,7 +2068,7 @@ class rt extends d {
     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();
   }
-  #V = (t) => {
+  #U = (t) => {
     if (this.disabled) return;
     const e = t.shiftKey ? 10 : 1;
     let s = !1;
@@ -2073,10 +2087,10 @@ class rt extends d {
   // ───────────────────────────────────────────────────────────────────────────
   // Pointer move/up
   // ───────────────────────────────────────────────────────────────────────────
-  #q = (t) => {
-    this.#r ? this.#E(t) : this.#n ? this.#C(t) : this.#l && this.#S(t);
+  #W = (t) => {
+    this.#r ? this.#C(t) : this.#n ? this.#E(t) : this.#l && this.#S(t);
   };
-  #N = () => {
+  #V = () => {
     (this.#r || this.#n || this.#l) && (this.#r = !1, this.#n = !1, this.#l = !1, this.#$());
   };
   // ───────────────────────────────────────────────────────────────────────────
@@ -2087,7 +2101,7 @@ class rt extends d {
     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();
   };
-  #U = (t) => {
+  #q = (t) => {
     t.key === "Enter" && (t.preventDefault(), this.#T());
   };
   // ───────────────────────────────────────────────────────────────────────────
@@ -2121,23 +2135,23 @@ class rt extends d {
   #H() {
     const t = this.$('[data-ry-target="trigger-color"]');
     if (t) {
-      const e = b({ h: this.#t, s: this.#e, v: this.#i }), s = this.hasAttribute("opacity") ? this.#s / 100 : 1;
+      const e = f({ 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 = b({ h: this.#t, s: 100, v: 100 });
+      const t = f({ h: this.#t, s: 100, v: 100 });
       this.#a.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}%`);
   }
   #I() {
-    this.#f && (this.#f.style.left = `${this.#t / 360 * 100}%`);
+    this.#b && (this.#b.style.left = `${this.#t / 360 * 100}%`);
   }
   #D() {
     if (this.#g) {
-      const t = b({ h: this.#t, s: this.#e, v: this.#i });
+      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})`);
     }
     this.#o && (this.#o.style.left = `${this.#s}%`);
@@ -2145,7 +2159,7 @@ class rt extends d {
   #F() {
     const t = this.$('[data-ry-target="preview-color"]');
     if (t) {
-      const e = b({ h: this.#t, s: this.#e, v: this.#i }), s = this.hasAttribute("opacity") ? this.#s / 100 : 1;
+      const e = f({ 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})`;
     }
   }
@@ -2157,10 +2171,10 @@ class rt extends d {
     this.getAttribute("value") !== t && this.setAttribute("value", t);
   }
   #_() {
-    const t = this.format, e = b({ h: this.#t, s: this.#e, v: this.#i }), s = this.hasAttribute("opacity");
+    const t = this.format, e = f({ h: this.#t, s: this.#e, v: this.#i }), s = this.hasAttribute("opacity");
     switch (t) {
       case "hex": {
-        const i = E(e);
+        const i = C(e);
         if (s && this.#s < 100) {
           const r = Math.round(this.#s / 100 * 255).toString(16).padStart(2, "0");
           return i + r;
@@ -2174,7 +2188,7 @@ class rt extends d {
         return s ? `hsla(${i.h}, ${i.s}%, ${i.l}%, ${(this.#s / 100).toFixed(2)})` : `hsl(${i.h}, ${i.s}%, ${i.l}%)`;
       }
       default:
-        return E(e);
+        return C(e);
     }
   }
   // ───────────────────────────────────────────────────────────────────────────
@@ -2221,7 +2235,7 @@ class rt extends d {
     return { h: this.#t, s: this.#e, v: this.#i };
   }
   get rgb() {
-    return b(this.hsv);
+    return f(this.hsv);
   }
   get hsl() {
     return M(this.hsv);
@@ -2285,7 +2299,7 @@ class at extends d {
     `, 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.#b), this.on(this.#e, "focus", this.#c)), this.#s && (this.on(this.#s, "ry:input", this.#f), this.on(this.#s, "ry:change", this.#g)), this.on(document, "click", this.#o), this.on(document, "keydown", this.#w);
+    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);
   }
   #l = () => {
     this.disabled || (this.state === "open" ? this.close() : this.open());
@@ -2322,10 +2336,10 @@ class at extends d {
   #u(t) {
     return !!(/^#[a-fA-F0-9]{6}$/.test(t) || /^#[a-fA-F0-9]{3}$/.test(t));
   }
-  #b = (t) => {
+  #f = (t) => {
     t.key === "Enter" && (t.preventDefault(), this.#p(), this.emit("change", { value: this.value }));
   };
-  #f = () => {
+  #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 }));
   };
   #g = () => {
@@ -2402,20 +2416,20 @@ window.RyToast = p;
 console.log("ry-ui loaded");
 export {
   T as RyAccordion,
-  B as RyAlert,
+  j as RyAlert,
   D as RyButton,
   z as RyCode,
   at as RyColorInput,
   rt as RyColorPicker,
-  W as RyDrawer,
+  N as RyDrawer,
   I as RyDropdown,
   d as RyElement,
   Y as RyExample,
-  j as RyField,
+  B as RyField,
   G as RyIcon,
   et as RyKnob,
   H as RyModal,
-  N as RySelect,
+  V as RySelect,
   tt as RySlider,
   P as RySwitch,
   L as RyTabs,