@ryanhelsing/ry-ui 1.0.13 → 1.0.14

package/dist/ry-ui.js

@@ -150,7 +150,8 @@ const B = [
   "carousel",
   "combobox",
   "theme-panel",
-  "testimonial"
+  "testimonial",
+  "heading"
 ], R = new RegExp(
   `<(/?)(${B.join("|")})(\\s|>|/)`,
   "g"
@@ -891,7 +892,7 @@ class f extends u {
   }
 }
 customElements.define("ry-toast", f);
-const k = {
+const $ = {
   // Close / X
   close: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18"/><path d="M6 6l12 12"/></svg>',
   // Chevron down
@@ -964,16 +965,16 @@ const k = {
   quote: '<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M4.583 17.321C3.553 16.227 3 15 3 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311C9.591 11.69 11 13.17 11 15c0 1.933-1.567 3.5-3.5 3.5-1.073 0-2.099-.49-2.917-1.179zM14.583 17.321C13.553 16.227 13 15 13 13.011c0-3.5 2.457-6.637 6.03-8.188l.893 1.378c-3.335 1.804-3.987 4.145-4.247 5.621.537-.278 1.24-.375 1.929-.311C19.591 11.69 21 13.17 21 15c0 1.933-1.567 3.5-3.5 3.5-1.073 0-2.099-.49-2.917-1.179z"/></svg>'
 };
 function p(h) {
-  return k[h] ?? "";
+  return $[h] ?? "";
 }
-function Ft(h, t) {
-  k[h] = t;
+function jt(h, t) {
+  $[h] = t;
 }
-function jt(h) {
-  Object.assign(k, h);
+function Ot(h) {
+  Object.assign($, h);
 }
-function Ot() {
-  return Object.keys(k);
+function Nt() {
+  return Object.keys($);
 }
 let tt = 0;
 class et extends u {
@@ -1060,7 +1061,7 @@ class et extends u {
         const r = s.dataset.value ?? "";
         this.#u(r);
       } else
-        this.#$(s), this.close();
+        this.#k(s), this.close();
       return;
     }
     e.closest('[data-ry-target="trigger"]') && this.toggle();
@@ -1078,7 +1079,7 @@ class et extends u {
               const r = i.dataset.value ?? "";
               this.#u(r);
             } else
-              this.#$(i), this.close();
+              this.#k(i), this.close();
         } else
           this.toggle();
         break;
@@ -1126,7 +1127,7 @@ class et extends u {
         this.#d(s);
       else if (!this.#a) {
         const i = e[s];
-        i && this.#$(i);
+        i && this.#k(i);
       }
     }
     this.#s = setTimeout(() => {
@@ -1200,7 +1201,7 @@ class et extends u {
     this.#r.clear(), this.#b(), this.#v(), this.#y(), this.setAttribute("value", ""), this.emit("change", { value: "", label: "" });
   }
   // --- Single-select method ---
-  #$(t) {
+  #k(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"]');
@@ -1212,7 +1213,7 @@ class et extends u {
     if (this.state === "open") return;
     this.state = "open";
     const t = this.$('[data-ry-target="trigger"]');
-    if (t && t.setAttribute("aria-expanded", "true"), this.#D(), this.#a)
+    if (t && t.setAttribute("aria-expanded", "true"), this.#I(), this.#a)
       this.#d(0);
     else {
       const e = this.getAttribute("value");
@@ -1224,7 +1225,7 @@ class et extends u {
     }
     this.emit("open");
   }
-  #D() {
+  #I() {
     const t = this.$('[data-ry-target="dropdown"]');
     if (!t) return;
     this.removeAttribute("data-ry-position");
@@ -1253,7 +1254,7 @@ class et extends u {
       this.#b(), this.#v(), this.#y(), this.setAttribute("value", t);
     } else {
       const e = this.$(`[data-ry-target="option"][data-value="${t}"]`);
-      e && this.#$(e);
+      e && this.#k(e);
     }
   }
   get values() {
@@ -2368,7 +2369,7 @@ class gt extends u {
       t.preventDefault(), this.#g(-1);
     }), this.on(this.#s, "mouseup", () => this.#u()), this.on(this.#s, "mouseleave", () => this.#u())), this.#r && (this.on(this.#r, "mousedown", (t) => {
       t.preventDefault(), this.#g(1);
-    }), this.on(this.#r, "mouseup", () => this.#u()), this.on(this.#r, "mouseleave", () => this.#u())), this.#t && this.on(this.#t, "mousedown", this.#D), this.on(document, "mousemove", this.#Y), this.on(document, "mouseup", this.#C), this.#t && this.on(this.#t, "touchstart", this.#X), this.on(document, "touchmove", this.#G), this.on(document, "touchend", this.#q), this.#t && this.on(this.#t, "keydown", this.#K), this.on(this, "wheel", this.#J), this.#t && this.on(this.#t, "dblclick", () => this.#E()), this.#i && (this.on(this.#i, "blur", () => this.#z()), this.on(this.#i, "keydown", (t) => {
+    }), this.on(this.#r, "mouseup", () => this.#u()), this.on(this.#r, "mouseleave", () => this.#u())), this.#t && this.on(this.#t, "mousedown", this.#I), this.on(document, "mousemove", this.#Y), this.on(document, "mouseup", this.#C), this.#t && this.on(this.#t, "touchstart", this.#X), this.on(document, "touchmove", this.#G), this.on(document, "touchend", this.#q), this.#t && this.on(this.#t, "keydown", this.#K), this.on(this, "wheel", this.#J), this.#t && this.on(this.#t, "dblclick", () => this.#E()), this.#i && (this.on(this.#i, "blur", () => this.#z()), this.on(this.#i, "keydown", (t) => {
       t.key === "Enter" && (t.preventDefault(), this.#z()), t.key === "Escape" && (t.preventDefault(), this.#P()), t.stopPropagation();
     }));
   }
@@ -2405,18 +2406,18 @@ class gt extends u {
     const s = t / e * 4, i = this.#b;
     this.#e.style.transform = i === "y" ? `translateY(${-s}px)` : `translateX(${s}px)`;
   }
-  #$(t, e, s) {
+  #k(t, e, s) {
     const i = this.#v(t, e), r = this.step || 1, a = s ? r * 10 : r, n = s ? S * 2 : S, o = Math.round(i / n), l = this.#l + o * a, c = i - o * n;
     this.#M(c, n);
     const d = this.hasAttribute("wrap") ? this.#V(l) : this.#T(l), g = this.#F(d);
     g !== this.value && (this.value = g, this.#A(), this.#x());
   }
   // --- Mouse drag ---
-  #D = (t) => {
+  #I = (t) => {
     this.disabled || this.#c || this.#b === "none" || (t.preventDefault(), this.#a = !0, this.#o = t.clientX, this.#h = t.clientY, this.#l = this.value, this.setAttribute("data-dragging", ""));
   };
   #Y = (t) => {
-    this.#a && this.#$(t.clientX, t.clientY, t.shiftKey);
+    this.#a && this.#k(t.clientX, t.clientY, t.shiftKey);
   };
   #C = (t) => {
     if (!this.#a) return;
@@ -2431,7 +2432,7 @@ class gt extends u {
     if (!this.#a) return;
     t.preventDefault();
     const e = t.touches[0];
-    e && this.#$(e.clientX, e.clientY, !1);
+    e && this.#k(e.clientX, e.clientY, !1);
   };
   #q = () => {
     this.#a && (this.#a = !1, this.removeAttribute("data-dragging"), this.#e && (this.#e.style.transform = ""), this.#_());
@@ -2609,7 +2610,7 @@ function v(h) {
     b: Math.round(a * 255)
   };
 }
-function $(h) {
+function k(h) {
   const t = h.r / 255, e = h.g / 255, s = h.b / 255, i = Math.max(t, e, s), r = Math.min(t, e, s), a = i - r;
   let n = 0;
   const o = i === 0 ? 0 : a / i, l = i;
@@ -2647,7 +2648,7 @@ function ft(h) {
     v: Math.round(s * 100)
   };
 }
-function I(h) {
+function H(h) {
   const t = (e) => e.toString(16).padStart(2, "0");
   return `#${t(h.r)}${t(h.g)}${t(h.b)}`;
 }
@@ -2677,10 +2678,10 @@ function A(h) {
         g: parseInt(i[2], 16),
         b: parseInt(i[3], 16)
       }, n = parseInt(i[4], 16) / 255;
-      return { hsv: $(a), alpha: Math.round(n * 100) };
+      return { hsv: k(a), alpha: Math.round(n * 100) };
     }
     const r = bt(t);
-    return r ? { hsv: $(r), alpha: 100 } : null;
+    return r ? { hsv: k(r), alpha: 100 } : null;
   }
   const e = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)$/.exec(t);
   if (e) {
@@ -2689,7 +2690,7 @@ function A(h) {
       g: parseInt(e[2], 10),
       b: parseInt(e[3], 10)
     }, r = e[4] ? parseFloat(e[4]) * 100 : 100;
-    return { hsv: $(i), alpha: r };
+    return { hsv: k(i), alpha: r };
   }
   const s = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*(?:,\s*([\d.]+))?\s*\)$/.exec(t);
   if (s) {
@@ -2767,7 +2768,7 @@ class yt extends u {
       `, this.#h = this.$('[data-ry-target="trigger"]'), this.#l = this.$('[data-ry-target="panel"]'), this.#c = this.$('[data-ry-target="grid"]'), this.#n = this.$('[data-ry-target="grid-handle"]'), this.#p = this.$('[data-ry-target="hue-slider"]'), this.#d = this.$('[data-ry-target="hue-handle"]'), this.#m = this.$('[data-ry-target="alpha-slider"]'), this.#f = this.$('[data-ry-target="alpha-handle"]'), this.#w = this.$('[data-ry-target="preview"]'), this.#g = this.$('[data-ry-target="input"]');
   }
   #b() {
-    this.#h && this.on(this.#h, "click", this.#y), this.on(document, "click", this.#M), this.on(document, "keydown", this.#$), this.#c && this.on(this.#c, "pointerdown", this.#Y), this.#n && this.on(this.#n, "keydown", this.#X), this.#p && this.on(this.#p, "pointerdown", this.#G), this.#d && this.on(this.#d, "keydown", this.#K), this.#m && this.on(this.#m, "pointerdown", this.#J), this.#f && this.on(this.#f, "keydown", this.#z), this.on(document, "pointermove", this.#P), this.on(document, "pointerup", this.#R), this.#g && (this.on(this.#g, "change", this.#T), this.on(this.#g, "keydown", this.#V));
+    this.#h && this.on(this.#h, "click", this.#y), this.on(document, "click", this.#M), this.on(document, "keydown", this.#k), this.#c && this.on(this.#c, "pointerdown", this.#Y), this.#n && this.on(this.#n, "keydown", this.#X), this.#p && this.on(this.#p, "pointerdown", this.#G), this.#d && this.on(this.#d, "keydown", this.#K), this.#m && this.on(this.#m, "pointerdown", this.#J), this.#f && this.on(this.#f, "keydown", this.#z), this.on(document, "pointermove", this.#P), this.on(document, "pointerup", this.#R), this.#g && (this.on(this.#g, "change", this.#T), this.on(this.#g, "keydown", this.#V));
     const t = this.$('[data-ry-target="format-toggle"]');
     t && this.on(t, "click", this.#F);
     const e = this.$('[data-ry-target="swatches"]');
@@ -2789,16 +2790,16 @@ class yt extends u {
   #M = (t) => {
     this.state === "open" && (this.contains(t.target) || this.close());
   };
-  #$ = (t) => {
+  #k = (t) => {
     t.key === "Escape" && this.state === "open" && (this.close(), this.#h?.focus());
   };
   open() {
-    this.hasAttribute("inline") || (this.#D(), this.state = "open");
+    this.hasAttribute("inline") || (this.#I(), this.state = "open");
   }
   close() {
     this.hasAttribute("inline") || (this.state = "closed", this.removeAttribute("data-ry-position"));
   }
-  #D() {
+  #I() {
     if (!this.#l || !this.#h) return;
     const t = this.#h.getBoundingClientRect(), e = 320, i = window.innerHeight - t.bottom, r = t.top;
     i < e && r > i ? this.setAttribute("data-ry-position", "top") : this.setAttribute("data-ry-position", "bottom");
@@ -2832,7 +2833,7 @@ class yt extends u {
         this.#i = Math.max(0, this.#i - e), s = !0;
         break;
     }
-    s && (t.preventDefault(), this.#A(), this.#L(), this.#k());
+    s && (t.preventDefault(), this.#A(), this.#L(), this.#$());
   };
   // ───────────────────────────────────────────────────────────────────────────
   // Hue handlers
@@ -2859,7 +2860,7 @@ class yt extends u {
         this.#t = (this.#t - e + 360) % 360, s = !0;
         break;
     }
-    s && (t.preventDefault(), this.#A(), this.#L(), this.#k());
+    s && (t.preventDefault(), this.#A(), this.#L(), this.#$());
   };
   // ───────────────────────────────────────────────────────────────────────────
   // Alpha handlers
@@ -2886,7 +2887,7 @@ class yt extends u {
         this.#s = Math.max(0, this.#s - e), s = !0;
         break;
     }
-    s && (t.preventDefault(), this.#A(), this.#L(), this.#k());
+    s && (t.preventDefault(), this.#A(), this.#L(), this.#$());
   };
   // ───────────────────────────────────────────────────────────────────────────
   // Pointer move/up
@@ -2895,7 +2896,7 @@ class yt extends u {
     this.#r ? this.#C(t) : this.#a ? this.#q(t) : this.#o && this.#E(t);
   };
   #R = () => {
-    (this.#r || this.#a || this.#o) && (this.#r = !1, this.#a = !1, this.#o = !1, this.#k());
+    (this.#r || this.#a || this.#o) && (this.#r = !1, this.#a = !1, this.#o = !1, this.#$());
   };
   // ───────────────────────────────────────────────────────────────────────────
   // Input handlers
@@ -2903,7 +2904,7 @@ class yt extends u {
   #T = () => {
     if (!this.#g) return;
     const t = A(this.#g.value);
-    t ? (this.#t = t.hsv.h, this.#e = t.hsv.s, this.#i = t.hsv.v, this.hasAttribute("opacity") && (this.#s = t.alpha), this.#A(), this.#k()) : this.#W();
+    t ? (this.#t = t.hsv.h, this.#e = t.hsv.s, this.#i = t.hsv.v, this.hasAttribute("opacity") && (this.#s = t.alpha), this.#A(), this.#$()) : this.#W();
   };
   #V = (t) => {
     t.key === "Enter" && (t.preventDefault(), this.#T());
@@ -2926,7 +2927,7 @@ class yt extends u {
       const s = e.dataset.color;
       if (s) {
         const i = A(s);
-        i && (this.#t = i.hsv.h, this.#e = i.hsv.s, this.#i = i.hsv.v, this.hasAttribute("opacity") && (this.#s = i.alpha), this.#A(), this.#L(), this.#k());
+        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.#$());
       }
     }
   };
@@ -2934,7 +2935,7 @@ class yt extends u {
   // Update methods
   // ───────────────────────────────────────────────────────────────────────────
   #A() {
-    this.#U(), this.#x(), this.#_(), this.#H(), this.#O(), this.#W(), this.#Z();
+    this.#U(), this.#x(), this.#_(), this.#D(), this.#O(), this.#W(), this.#Z();
   }
   #U() {
     const t = this.$('[data-ry-target="trigger-color"]');
@@ -2953,7 +2954,7 @@ class yt extends u {
   #_() {
     this.#d && (this.#d.style.left = `${this.#t / 360 * 100}%`);
   }
-  #H() {
+  #D() {
     if (this.#m) {
       const t = v({ h: this.#t, s: this.#e, v: this.#i });
       this.#m.style.setProperty("--alpha-color", `rgb(${t.r}, ${t.g}, ${t.b})`);
@@ -2978,7 +2979,7 @@ class yt extends u {
     const t = this.format, e = v({ h: this.#t, s: this.#e, v: this.#i }), s = this.hasAttribute("opacity");
     switch (t) {
       case "hex": {
-        const i = I(e);
+        const i = H(e);
         if (s && this.#s < 100) {
           const r = Math.round(this.#s / 100 * 255).toString(16).padStart(2, "0");
           return i + r;
@@ -2992,7 +2993,7 @@ class yt extends u {
         return s ? `hsla(${i.h}, ${i.s}%, ${i.l}%, ${(this.#s / 100).toFixed(2)})` : `hsl(${i.h}, ${i.s}%, ${i.l}%)`;
       }
       default:
-        return I(e);
+        return H(e);
     }
   }
   // ───────────────────────────────────────────────────────────────────────────
@@ -3001,7 +3002,7 @@ class yt extends u {
   #L() {
     this.emit("input", { value: this.value, hsv: this.hsv, rgb: this.rgb });
   }
-  #k() {
+  #$() {
     this.emit("change", { value: this.value, hsv: this.hsv, rgb: this.rgb });
   }
   // ───────────────────────────────────────────────────────────────────────────
@@ -3010,7 +3011,7 @@ class yt extends u {
   attributeChangedCallback(t, e, s) {
     if (e !== s && t === "value" && this.#c && s) {
       const i = A(s);
-      i && (this.#t = i.hsv.h, this.#e = i.hsv.s, this.#i = i.hsv.v, this.hasAttribute("opacity") && (this.#s = i.alpha), this.#U(), this.#x(), this.#_(), this.#H(), this.#O());
+      i && (this.#t = i.hsv.h, this.#e = i.hsv.s, this.#i = i.hsv.v, this.hasAttribute("opacity") && (this.#s = i.alpha), this.#U(), this.#x(), this.#_(), this.#D(), this.#O());
     }
   }
   // ───────────────────────────────────────────────────────────────────────────
@@ -3259,8 +3260,8 @@ function At(h, t, e) {
     b: Math.round(h.b + (t.b - h.b) * e)
   };
 }
-const D = "linear-gradient(90deg, #000000 0%, #ffffff 100%)", wt = 50;
-class kt extends u {
+const I = "linear-gradient(90deg, #000000 0%, #ffffff 100%)", wt = 50;
+class $t extends u {
   #t = "linear";
   #e = 90;
   #i = "circle";
@@ -3283,8 +3284,8 @@ class kt extends u {
   // Parsing / Serialization
   // ───────────────────────────────────────────────────────────────────────────
   #m() {
-    const t = this.getAttribute("value") || D;
-    this.#f(t) || this.#f(D);
+    const t = this.getAttribute("value") || I;
+    this.#f(t) || this.#f(I);
   }
   #f(t) {
     const e = t.trim();
@@ -3345,7 +3346,7 @@ class kt extends u {
   }
   #v(t, e) {
     const s = this.#u(t, e);
-    this.#s.push(s), this.#$(), this.#r = s.id, this.#C(), this.#x();
+    this.#s.push(s), this.#k(), this.#r = s.id, this.#C(), this.#x();
   }
   #y(t) {
     if (this.#s.length <= 2) return !1;
@@ -3355,10 +3356,10 @@ class kt extends u {
   #M(t) {
     this.#r !== t && (this.#r = t, this.#N(), this.#L());
   }
-  #$() {
+  #k() {
     this.#s.sort((t, e) => t.position - e.position);
   }
-  #D() {
+  #I() {
     return this.#s.find((t) => t.id === this.#r) ?? null;
   }
   // ───────────────────────────────────────────────────────────────────────────
@@ -3429,7 +3430,7 @@ class kt extends u {
     } else {
       if (t.preventDefault(), !this.#n) return;
       const i = this.#n.getBoundingClientRect(), r = Math.round(Math.max(0, Math.min(100, (t.clientX - i.left) / i.width * 100))), a = this.#U(r);
-      this.#v(a, r), this.#n.querySelector(`[data-stop-id="${this.#r}"]`)?.focus(), this.#o = this.#r, this.#h = !1, this.#l = i, this.#n.setPointerCapture(t.pointerId), this.#I();
+      this.#v(a, r), this.#n.querySelector(`[data-stop-id="${this.#r}"]`)?.focus(), this.#o = this.#r, this.#h = !1, this.#l = i, this.#n.setPointerCapture(t.pointerId), this.#H();
     }
   };
   #q = (t) => {
@@ -3441,7 +3442,7 @@ class kt extends u {
     const i = this.#l.top + this.#l.height / 2, r = Math.abs(t.clientY - i);
     this.#h = r > wt && this.#s.length > 2;
     const a = this.#n?.querySelector(`[data-stop-id="${e.id}"]`);
-    a && (a.style.left = this.#b(e.position), this.#h ? (a.style.opacity = "0.3", a.style.transform = "translate(-50%, -50%) scale(0.7)") : (a.style.opacity = "", a.style.transform = "")), this.#$(), this.#O(), this.#H(), this.#k(), this.#I();
+    a && (a.style.left = this.#b(e.position), this.#h ? (a.style.opacity = "0.3", a.style.transform = "translate(-50%, -50%) scale(0.7)") : (a.style.opacity = "", a.style.transform = "")), this.#k(), this.#O(), this.#D(), this.#$(), this.#H();
   };
   #K = () => {
     this.#o && (this.#h && this.#y(this.#o), this.#o = null, this.#h = !1, this.#l = null, this.#S(), this.#B());
@@ -3465,30 +3466,30 @@ class kt extends u {
         break;
       case "Delete":
       case "Backspace":
-        this.#y(i) && (this.#I(), this.#B()), t.preventDefault();
+        this.#y(i) && (this.#H(), this.#B()), t.preventDefault();
         return;
     }
-    n && (t.preventDefault(), this.#$(), this.#W(), this.#O(), this.#H(), this.#k(), this.#S(), this.#I(), this.#B());
+    n && (t.preventDefault(), this.#k(), this.#W(), this.#O(), this.#D(), this.#$(), this.#S(), this.#H(), this.#B());
   };
   // ───────────────────────────────────────────────────────────────────────────
   // Type / Angle / Shape handlers
   // ───────────────────────────────────────────────────────────────────────────
   #E(t) {
-    this.#t !== t && (this.#t = t, this.setAttribute("data-ry-type", t), this.#_(), this.#H(), this.#k(), this.#S(), this.#I(), this.#B());
+    this.#t !== t && (this.#t = t, this.setAttribute("data-ry-type", t), this.#_(), this.#D(), this.#$(), this.#S(), this.#H(), this.#B());
   }
   #z = (t) => {
     const e = t.detail;
-    this.#e = e.value, this.#H(), this.#k(), this.#S(), this.#I();
+    this.#e = e.value, this.#D(), this.#$(), this.#S(), this.#H();
   };
   #P(t) {
-    this.#i !== t && (this.#i = t, this.#_(), this.#k(), this.#S(), this.#I(), this.#B());
+    this.#i !== t && (this.#i = t, this.#_(), this.#$(), this.#S(), this.#H(), this.#B());
   }
   // ───────────────────────────────────────────────────────────────────────────
   // Color picker handlers
   // ───────────────────────────────────────────────────────────────────────────
   #R = () => {
-    const t = this.#D();
-    !t || !this.#p || (t.color = this.#p.value, this.#Z(t), this.#O(), this.#H(), this.#k(), this.#I());
+    const t = this.#I();
+    !t || !this.#p || (t.color = this.#p.value, this.#Z(t), this.#O(), this.#D(), this.#$(), this.#H());
   };
   #T = () => {
     this.#S(), this.#B();
@@ -3515,7 +3516,7 @@ class kt extends u {
   #A() {
     if (!this.#d) return;
     const t = this.#d.value.trim();
-    t && this.#f(t) ? (this.#C(), this.#x(), this.#S(), this.#I(), this.#B()) : this.#k();
+    t && this.#f(t) ? (this.#C(), this.#x(), this.#S(), this.#H(), this.#B()) : this.#$();
   }
   // ───────────────────────────────────────────────────────────────────────────
   // Color interpolation
@@ -3541,7 +3542,7 @@ class kt extends u {
   // Update methods
   // ───────────────────────────────────────────────────────────────────────────
   #x() {
-    this.setAttribute("data-ry-type", this.#t), this.#_(), this.#O(), this.#H(), this.#W(), this.#N(), this.#L(), this.#k();
+    this.setAttribute("data-ry-type", this.#t), this.#_(), this.#O(), this.#D(), this.#W(), this.#N(), this.#L(), this.#$();
   }
   #_() {
     const t = this.$('[data-ry-target="type-solid"]'), e = this.$('[data-ry-target="type-linear"]'), s = this.$('[data-ry-target="type-radial"]');
@@ -3551,7 +3552,7 @@ class kt extends u {
     const a = this.$('[data-ry-target="angle-select"]');
     a && a.setAttribute("value", String(this.#e));
   }
-  #H() {
+  #D() {
     if (!this.#p) return;
     const t = this.#p.querySelector('[data-ry-target="preview-color"]');
     t && (t.style.backgroundImage = this.#t === "solid" ? "" : this.#g());
@@ -3580,10 +3581,10 @@ class kt extends u {
       e.getAttribute("data-stop-id") === this.#r ? e.setAttribute("data-selected", "") : e.removeAttribute("data-selected");
   }
   #L() {
-    const t = this.#D();
+    const t = this.#I();
     !t || !this.#p || this.#p.setColor(t.color);
   }
-  #k() {
+  #$() {
     this.#d && document.activeElement !== this.#d && (this.#d.value = this.#g());
   }
   #S() {
@@ -3593,7 +3594,7 @@ class kt extends u {
   // ───────────────────────────────────────────────────────────────────────────
   // Events
   // ───────────────────────────────────────────────────────────────────────────
-  #I() {
+  #H() {
     this.emit("input", {
       value: this.#g(),
       type: this.#t,
@@ -3636,7 +3637,7 @@ class kt extends u {
     return this.#e;
   }
   set angle(t) {
-    this.#e = (t % 360 + 360) % 360, this.#_(), this.#k(), this.#S();
+    this.#e = (t % 360 + 360) % 360, this.#_(), this.#$(), this.#S();
   }
   get shape() {
     return this.#i;
@@ -3648,7 +3649,7 @@ class kt extends u {
     return this.#s.map((t) => ({ ...t }));
   }
   get selectedStop() {
-    const t = this.#D();
+    const t = this.#I();
     return t ? { ...t } : null;
   }
   get disabled() {
@@ -3658,15 +3659,15 @@ class kt extends u {
     t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
   }
   addStop(t, e) {
-    this.#v(t, e), this.#S(), this.#I(), this.#B();
+    this.#v(t, e), this.#S(), this.#H(), this.#B();
   }
   removeStop(t) {
     const e = this.#y(t);
-    return e && (this.#k(), this.#S(), this.#B()), e;
+    return e && (this.#$(), this.#S(), this.#B()), e;
   }
 }
-customElements.define("ry-gradient-picker", kt);
-let $t = 0;
+customElements.define("ry-gradient-picker", $t);
+let kt = 0;
 const xt = 5;
 function _(h) {
   return p(h).replace(/width="24"/g, 'width="16"').replace(/height="24"/g, 'height="16"').replace(/viewBox/, 'class="ry-tree__icon" viewBox');
@@ -3713,7 +3714,7 @@ class w extends u {
       (o) => o.tagName === "RY-TREE-ITEM"
     );
     if (a.length > 0) {
-      const o = `ry-tree-${++$t}`, l = document.createElement("input");
+      const o = `ry-tree-${++kt}`, 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 = `
@@ -3842,7 +3843,7 @@ class w extends u {
   }
   #M(t, e, s) {
     if (s === "inside" && e.contains(t)) return;
-    const i = this.#$(t), r = this.#$(e);
+    const i = this.#k(t), r = this.#k(e);
     if (s === "before")
       e.parentNode?.insertBefore(t, e);
     else if (s === "after")
@@ -3861,7 +3862,7 @@ class w extends u {
       position: s
     });
   }
-  #$(t) {
+  #k(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 ?? "";
   }
@@ -4008,13 +4009,13 @@ class Lt extends u {
 }
 customElements.define("ry-feature", Tt);
 customElements.define("ry-feature-grid", Lt);
+class Ht extends u {
+}
 class It extends u {
 }
+customElements.define("ry-pricing", Ht);
+customElements.define("ry-pricing-card", It);
 class Dt extends u {
-}
-customElements.define("ry-pricing", It);
-customElements.define("ry-pricing-card", Dt);
-class Ht extends u {
   #t = 0;
   #e = 0;
   #i = null;
@@ -4094,8 +4095,8 @@ class Ht extends u {
     this.#p();
   }
 }
-customElements.define("ry-carousel", Ht);
-const H = "ry-theme-panel";
+customElements.define("ry-carousel", Dt);
+const D = "ry-theme-panel";
 class Bt extends u {
   #t = "default";
   #e = "auto";
@@ -4125,10 +4126,11 @@ class Bt extends u {
     this.#t === "default" ? delete t.dataset.ryTheme : t.dataset.ryTheme = this.#t, this.#e === "auto" ? t.style.removeProperty("color-scheme") : t.style.colorScheme = this.#e, this.#r();
   }
   #r() {
-    if (document.querySelectorAll("link[data-ry-theme-panel]").forEach((t) => t.remove()), this.#t === "ocean") {
-      if (document.querySelector('link[href*="ocean.css"]')) return;
-      const t = document.createElement("link");
-      t.rel = "stylesheet", t.href = this.#a("ocean.css"), t.setAttribute("data-ry-theme-panel", ""), document.head.appendChild(t);
+    if (document.querySelectorAll("link[data-ry-theme-panel]").forEach((t) => t.remove()), this.#t !== "none" && this.#t !== "default") {
+      const t = `${this.#t}.css`;
+      if (document.querySelector(`link[href*="${t}"]`)) return;
+      const e = document.createElement("link");
+      e.rel = "stylesheet", e.href = this.#a(t), e.setAttribute("data-ry-theme-panel", ""), document.head.appendChild(e);
     }
   }
   #a(t) {
@@ -4152,7 +4154,7 @@ class Bt extends u {
   }
   #h() {
     try {
-      localStorage.setItem(H, JSON.stringify({
+      localStorage.setItem(D, JSON.stringify({
         theme: this.#t,
         mode: this.#e
       }));
@@ -4161,7 +4163,7 @@ class Bt extends u {
   }
   #l() {
     try {
-      const t = localStorage.getItem(H);
+      const t = localStorage.getItem(D);
       return t ? JSON.parse(t) : null;
     } catch {
       return null;
@@ -4176,6 +4178,7 @@ class Bt extends u {
             ${this.#n("theme-btn", "none", "None")}
             ${this.#n("theme-btn", "default", "Default")}
             ${this.#n("theme-btn", "ocean", "Ocean")}
+            ${this.#n("theme-btn", "antigravity", "Antigravity")}
           </div>
         </div>
         <div data-ry-target="mode-row" class="ry-theme-panel__row">
@@ -4226,6 +4229,22 @@ class Rt extends u {
   }
 }
 customElements.define("ry-testimonial", Rt);
+class Pt extends u {
+  setup() {
+    this.#t();
+  }
+  #t() {
+    if (this.$('[data-ry-target="title"]')) return;
+    const t = this.querySelector('[slot="sub"]'), e = t?.innerHTML?.trim() ?? "";
+    t?.remove();
+    const s = this.innerHTML.trim();
+    this.innerHTML = `
+      <div data-ry-target="title" class="ry-heading__title">${s}</div>
+      ${e ? `<div data-ry-target="sub" class="ry-heading__sub">${e}</div>` : ""}
+    `;
+  }
+}
+customElements.define("ry-heading", Pt);
 window.RyToast = f;
 console.log("ry-ui loaded");
 export {
@@ -4234,7 +4253,7 @@ export {
   N as RyButton,
   q as RyButtonGroup,
   V as RyCard,
-  Ht as RyCarousel,
+  Dt as RyCarousel,
   at as RyCode,
   mt as RyColorInput,
   yt as RyColorPicker,
@@ -4246,14 +4265,15 @@ export {
   Tt as RyFeature,
   Lt as RyFeatureGrid,
   W as RyField,
-  kt as RyGradientPicker,
+  $t as RyGradientPicker,
+  Pt as RyHeading,
   Ct as RyHero,
   ot as RyIcon,
   pt as RyKnob,
   F as RyModal,
   gt as RyNumberSelect,
-  It as RyPricing,
-  Dt as RyPricingCard,
+  Ht as RyPricing,
+  It as RyPricingCard,
   et as RySelect,
   ut as RySlider,
   K as RySplit,
@@ -4271,10 +4291,10 @@ export {
   w as RyTree,
   _t as RyTreeItem,
   p as getIcon,
-  Ot as getIconNames,
+  Nt as getIconNames,
   C as processTransforms,
-  Ft as registerIcon,
-  jt as registerIcons,
+  jt as registerIcon,
+  Ot as registerIcons,
   M as transform
 };
 //# sourceMappingURL=ry-ui.js.map