@ryanhelsing/ry-ui 1.0.4 → 1.0.5

package/dist/ry-ui.js

@@ -603,6 +603,20 @@ class q extends u {
 }
 customElements.define("ry-theme-toggle", q);
 class z extends u {
+  setup() {
+    this.hasAttribute("interactive") && (this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.setAttribute("role", "link"), this.on(this, "click", this.#t), this.on(this, "keydown", this.#e));
+  }
+  #t = (t) => {
+    if (t.target.closest("a, button, ry-button")) return;
+    const s = this.getAttribute("href");
+    s && (window.location.href = s), this.emit("click", { originalEvent: t });
+  };
+  #e = (t) => {
+    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.click());
+  };
+}
+customElements.define("ry-card", z);
+class U extends u {
   setup() {
     this.#t();
     const t = this.$("[close]");
@@ -622,8 +636,8 @@ class z extends u {
     }, 200), this.emit("close");
   }
 }
-customElements.define("ry-alert", z);
-class U extends u {
+customElements.define("ry-alert", U);
+class V extends u {
   static get observedAttributes() {
     return ["label", "error", "hint"];
   }
@@ -676,9 +690,9 @@ class U extends u {
     e && (e.textContent = t ?? "");
   }
 }
-customElements.define("ry-field", U);
-let V = 0;
-class W extends u {
+customElements.define("ry-field", V);
+let W = 0;
+class Y extends u {
   #t = null;
   static observedAttributes = ["checked", "disabled"];
   setup() {
@@ -686,7 +700,7 @@ class W extends u {
   }
   #e() {
     if (this.$('[data-ry-target="track"]')) return;
-    const t = `ry-switch-${++V}`, e = this.getAttribute("name") ?? "", s = this.hasAttribute("checked"), i = this.hasAttribute("disabled"), r = this.textContent?.trim() ?? "";
+    const t = `ry-switch-${++W}`, 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
@@ -731,14 +745,14 @@ class W extends u {
     this.#t && (this.#t.value = t);
   }
 }
-customElements.define("ry-switch", W);
-let Y = 0;
-class X extends u {
+customElements.define("ry-switch", Y);
+let X = 0;
+class G extends u {
   #t = null;
   #e = null;
   #i = null;
   setup() {
-    this.#i = `ry-tooltip-${++Y}`, this.#s();
+    this.#i = `ry-tooltip-${++X}`, this.#s();
     const t = this.firstElementChild;
     t && (t.setAttribute("aria-describedby", this.#i), this.on(t, "mouseenter", this.#r), this.on(t, "mouseleave", this.#o), this.on(t, "focusin", this.#r), this.on(t, "focusout", this.#o)), this.on(document, "keydown", this.#c);
   }
@@ -764,8 +778,8 @@ class X extends u {
     this.#t && clearTimeout(this.#t);
   }
 }
-customElements.define("ry-tooltip", X);
-class G extends u {
+customElements.define("ry-tooltip", G);
+class J extends u {
   #t = null;
   #e = 0;
   setup() {
@@ -810,8 +824,8 @@ class G extends u {
     this.state === "open" ? this.close() : this.open();
   }
 }
-customElements.define("ry-drawer", G);
-const J = 4e3;
+customElements.define("ry-drawer", J);
+const Z = 4e3;
 class f extends u {
   #t = null;
   static observedAttributes = ["variant", "duration"];
@@ -841,7 +855,7 @@ class f extends u {
     this.#s();
     const t = this.$("[close]");
     t && this.on(t, "click", () => this.dismiss());
-    const e = parseInt(this.getAttribute("duration") ?? String(J), 10);
+    const e = parseInt(this.getAttribute("duration") ?? String(Z), 10);
     e > 0 && (this.#t = setTimeout(() => this.dismiss(), e)), requestAnimationFrame(() => {
       this.state = "visible";
     });
@@ -947,17 +961,17 @@ const w = {
 function p(h) {
   return w[h] ?? "";
 }
-function Dt(h, t) {
+function It(h, t) {
   w[h] = t;
 }
-function It(h) {
+function Ht(h) {
   Object.assign(w, h);
 }
-function Ht() {
+function Bt() {
   return Object.keys(w);
 }
-let Z = 0;
-class Q extends u {
+let Q = 0;
+class tt extends u {
   #t = null;
   #e = -1;
   #i = "";
@@ -970,7 +984,7 @@ class Q extends u {
   }
   static observedAttributes = ["value", "disabled"];
   setup() {
-    this.#t = `ry-select-${++Z}`, this.#o(), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.on(this, "click", this.#c), this.on(this, "keydown", this.#h), this.on(document, "click", this.#d), this.#a && this.on(this, "ry:remove", this.#n), this.hasAttribute("data-ry-state") || (this.state = "closed");
+    this.#t = `ry-select-${++Q}`, this.#o(), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.on(this, "click", this.#c), this.on(this, "keydown", this.#h), this.on(document, "click", this.#d), this.#a && this.on(this, "ry:remove", this.#n), this.hasAttribute("data-ry-state") || (this.state = "closed");
     const t = this.getAttribute("value");
     if (t)
       if (this.#a)
@@ -1244,11 +1258,11 @@ class Q extends u {
     this.#s && clearTimeout(this.#s);
   }
 }
-class tt extends HTMLElement {
+class et extends HTMLElement {
 }
-customElements.define("ry-option", tt);
-customElements.define("ry-select", Q);
-class et extends u {
+customElements.define("ry-option", et);
+customElements.define("ry-select", tt);
+class st extends u {
   #t = "";
   static get observedAttributes() {
     return ["language", "title", "line-numbers"];
@@ -1547,8 +1561,8 @@ class et extends u {
     this.#t = t, this.#e();
   }
 }
-customElements.define("ry-code", et);
-class st extends u {
+customElements.define("ry-code", st);
+class it extends u {
   setup() {
     const t = this.$("template");
     if (!t) return;
@@ -1592,8 +1606,8 @@ class st extends u {
 `).trim();
   }
 }
-customElements.define("ry-example", st);
-class it extends u {
+customElements.define("ry-example", it);
+class rt extends u {
   static get observedAttributes() {
     return ["name", "size", "label"];
   }
@@ -1626,24 +1640,24 @@ class it extends u {
     this.setAttribute("size", String(t));
   }
 }
-customElements.define("ry-icon", it);
-const rt = ["form", "section", "fieldset", "ry-section"], m = /* @__PURE__ */ new Map(), E = /* @__PURE__ */ new Set();
-function at(h) {
+customElements.define("ry-icon", rt);
+const at = ["form", "section", "fieldset", "ry-section"], m = /* @__PURE__ */ new Map(), E = /* @__PURE__ */ new Set();
+function nt(h) {
   let t = h.parentElement;
   for (; t; ) {
-    if (rt.some((e) => t.matches(e)))
+    if (at.some((e) => t.matches(e)))
       return t;
     t = t.parentElement;
   }
   return null;
 }
-function nt(h) {
+function ot(h) {
   if (E.has(h)) return;
   const t = m.get(h);
   if (!t || t.size < 2) return;
   const e = /* @__PURE__ */ new Map();
   for (const s of t) {
-    const i = at(s), r = e.get(i) ?? [];
+    const i = nt(s), r = e.get(i) ?? [];
     r.push(s), e.set(i, r);
   }
   if (e.size > 1) {
@@ -1659,7 +1673,7 @@ function nt(h) {
     ), E.add(h);
   }
 }
-class ot extends u {
+class ht extends u {
   static observedAttributes = ["pressed", "disabled", "name", "value"];
   #t = !1;
   setup() {
@@ -1670,7 +1684,7 @@ class ot extends u {
   }
   #e() {
     const t = this.name;
-    t && (m.has(t) || m.set(t, /* @__PURE__ */ new Set()), m.get(t).add(this), this.#t = !0, queueMicrotask(() => nt(t)));
+    t && (m.has(t) || m.set(t, /* @__PURE__ */ new Set()), m.get(t).add(this), this.#t = !0, queueMicrotask(() => ot(t)));
   }
   #i() {
     if (!this.#t) return;
@@ -1731,8 +1745,8 @@ class ot extends u {
     this.setAttribute("icon", t);
   }
 }
-customElements.define("ry-toggle-button", ot);
-class ht extends u {
+customElements.define("ry-toggle-button", ht);
+class lt extends u {
   #t = !1;
   #e = null;
   #i = null;
@@ -1937,8 +1951,8 @@ class ht extends u {
     t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
   }
 }
-customElements.define("ry-slider", ht);
-class lt extends u {
+customElements.define("ry-slider", lt);
+class ct extends u {
   #t = !1;
   #e = 0;
   #i = 0;
@@ -2085,9 +2099,9 @@ class lt extends u {
     t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
   }
 }
-customElements.define("ry-knob", lt);
+customElements.define("ry-knob", ct);
 const S = 15, T = 3;
-class ct extends u {
+class dt extends u {
   #t = null;
   #e = null;
   #i = null;
@@ -2347,7 +2361,7 @@ class ct extends u {
     this.#l();
   }
 }
-customElements.define("ry-number-select", ct);
+customElements.define("ry-number-select", dt);
 function v(h) {
   const t = h.h / 360, e = h.s / 100, s = h.v / 100;
   let i = 0, r = 0, a = 0;
@@ -2408,7 +2422,7 @@ function L(h) {
     l: Math.round(s * 100)
   };
 }
-function dt(h) {
+function ut(h) {
   const t = h.s / 100, e = h.l / 100, s = e + t * Math.min(e, 1 - e), i = s === 0 ? 0 : 2 * (1 - e / s);
   return {
     h: h.h,
@@ -2420,7 +2434,7 @@ function D(h) {
   const t = (e) => e.toString(16).padStart(2, "0");
   return `#${t(h.r)}${t(h.g)}${t(h.b)}`;
 }
-function ut(h) {
+function pt(h) {
   const t = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(h);
   if (!t) {
     const e = /^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(h);
@@ -2448,7 +2462,7 @@ function A(h) {
       }, n = parseInt(i[4], 16) / 255;
       return { hsv: $(a), alpha: Math.round(n * 100) };
     }
-    const r = ut(t);
+    const r = pt(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);
@@ -2467,11 +2481,11 @@ function A(h) {
       s: parseFloat(s[2]),
       l: parseFloat(s[3])
     }, r = s[4] ? parseFloat(s[4]) * 100 : 100;
-    return { hsv: dt(i), alpha: r };
+    return { hsv: ut(i), alpha: r };
   }
   return null;
 }
-class pt extends u {
+class gt extends u {
   #t = 0;
   #e = 100;
   #i = 100;
@@ -2832,8 +2846,8 @@ class pt extends u {
     return this.format = e, s;
   }
 }
-customElements.define("ry-color-picker", pt);
-class gt extends u {
+customElements.define("ry-color-picker", gt);
+class ft extends u {
   #t = null;
   #e = null;
   #i = null;
@@ -2984,7 +2998,7 @@ class gt extends u {
     return this.#s?.hsv ?? { h: 0, s: 0, v: 0 };
   }
 }
-customElements.define("ry-color-input", gt);
+customElements.define("ry-color-input", ft);
 function x(h) {
   const t = h.trim().toLowerCase();
   if (t.startsWith("#")) {
@@ -3017,19 +3031,19 @@ function x(h) {
   }
   return null;
 }
-function ft(h) {
+function yt(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 yt(h, t, e) {
+function bt(h, t, e) {
   return {
     r: Math.round(h.r + (t.r - h.r) * e),
     g: Math.round(h.g + (t.g - h.g) * e),
     b: Math.round(h.b + (t.b - h.b) * e)
   };
 }
-const I = "linear-gradient(90deg, #000000 0%, #ffffff 100%)", bt = 50;
-class mt extends u {
+const I = "linear-gradient(90deg, #000000 0%, #ffffff 100%)", mt = 50;
+class vt extends u {
   #t = "linear";
   #e = 90;
   #i = "circle";
@@ -3208,7 +3222,7 @@ class mt extends u {
     const s = Math.max(0, Math.min(1, (t.clientX - this.#h.left) / this.#h.width));
     e.position = Math.round(s * 100);
     const i = this.#h.top + this.#h.height / 2, r = Math.abs(t.clientY - i);
-    this.#c = r > bt && this.#s.length > 2;
+    this.#c = r > mt && this.#s.length > 2;
     const a = this.#n?.querySelector(`[data-stop-id="${e.id}"]`);
     a && (a.style.left = this.#f(e.position), this.#c ? (a.style.opacity = "0.3", a.style.transform = "translate(-50%, -50%) scale(0.7)") : (a.style.opacity = "", a.style.transform = "")), this.#$(), this.#N(), this.#H(), this.#w(), this.#D();
   };
@@ -3304,7 +3318,7 @@ class mt extends u {
     const r = i.position - s.position;
     if (r === 0) return s.color;
     const a = (t - s.position) / r, n = x(s.color), o = x(i.color);
-    return !n || !o ? s.color : ft(yt(n, o, a));
+    return !n || !o ? s.color : yt(bt(n, o, a));
   }
   // ───────────────────────────────────────────────────────────────────────────
   // Update methods
@@ -3434,9 +3448,9 @@ class mt extends u {
     return e && (this.#w(), this.#S(), this.#B()), e;
   }
 }
-customElements.define("ry-gradient-picker", mt);
-let vt = 0;
-const At = 5;
+customElements.define("ry-gradient-picker", vt);
+let At = 0;
+const kt = 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');
 }
@@ -3482,7 +3496,7 @@ class k extends u {
       (o) => o.tagName === "RY-TREE-ITEM"
     );
     if (a.length > 0) {
-      const o = `ry-tree-${++vt}`, l = document.createElement("input");
+      const o = `ry-tree-${++At}`, 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 = `
@@ -3559,7 +3573,7 @@ class k extends u {
     if (!this.#t && !this.#e) return;
     if (this.#t && !this.#e) {
       const c = t.clientX - this.#i, d = t.clientY - this.#s;
-      if (Math.hypot(c, d) < At) return;
+      if (Math.hypot(c, d) < kt) return;
       this.#t = !1, this.#e = !0, this.#l(t);
     }
     if (!this.#e || !this.#a) return;
@@ -3635,12 +3649,12 @@ class k extends u {
     return e?.dataset.ryLabel ?? s?.dataset.ryLabel ?? "";
   }
 }
-class kt extends u {
+class wt extends u {
   // Declarative container consumed by RyTree#build
 }
 customElements.define("ry-tree", k);
-customElements.define("ry-tree-item", kt);
-class wt extends u {
+customElements.define("ry-tree-item", wt);
+class $t extends u {
   setup() {
     this.#t();
   }
@@ -3661,8 +3675,8 @@ class wt extends u {
     return this.$('[data-ry-target="label"]')?.textContent?.trim() ?? "";
   }
 }
-customElements.define("ry-tag", wt);
-class $t extends u {
+customElements.define("ry-tag", $t);
+class xt extends u {
   #t = [];
   setup() {
     this.#e(), this.#i();
@@ -3741,11 +3755,11 @@ class $t extends u {
     return [...this.#t];
   }
 }
-customElements.define("ry-tag-input", $t);
-class xt extends u {
-}
-customElements.define("ry-hero", xt);
+customElements.define("ry-tag-input", xt);
 class _t extends u {
+}
+customElements.define("ry-hero", _t);
+class Mt extends u {
   setup() {
     this.#t();
   }
@@ -3758,8 +3772,8 @@ class _t extends u {
     `;
   }
 }
-customElements.define("ry-stat", _t);
-class Mt extends u {
+customElements.define("ry-stat", Mt);
+class Et extends u {
   setup() {
     this.#t();
   }
@@ -3773,17 +3787,17 @@ class Mt extends u {
     s.setAttribute("data-ry-target", "icon"), s.className = "ry-feature__icon", s.innerHTML = e, this.insertBefore(s, this.firstChild);
   }
 }
-class Et extends u {
-}
-customElements.define("ry-feature", Mt);
-customElements.define("ry-feature-grid", Et);
 class Ct extends u {
 }
+customElements.define("ry-feature", Et);
+customElements.define("ry-feature-grid", Ct);
 class St extends u {
 }
-customElements.define("ry-pricing", Ct);
-customElements.define("ry-pricing-card", St);
 class Tt extends u {
+}
+customElements.define("ry-pricing", St);
+customElements.define("ry-pricing-card", Tt);
+class Lt extends u {
   #t = 0;
   #e = 0;
   #i = null;
@@ -3863,52 +3877,53 @@ class Tt extends u {
     this.#p();
   }
 }
-customElements.define("ry-carousel", Tt);
+customElements.define("ry-carousel", Lt);
 window.RyToast = f;
 console.log("ry-ui loaded");
 export {
   R as RyAccordion,
-  z as RyAlert,
+  U as RyAlert,
   N as RyButton,
   O as RyButtonGroup,
-  Tt as RyCarousel,
-  et as RyCode,
-  gt as RyColorInput,
-  pt as RyColorPicker,
-  G as RyDrawer,
+  z as RyCard,
+  Lt as RyCarousel,
+  st as RyCode,
+  ft as RyColorInput,
+  gt as RyColorPicker,
+  J as RyDrawer,
   j as RyDropdown,
   u as RyElement,
-  st as RyExample,
-  Mt as RyFeature,
-  Et as RyFeatureGrid,
-  U as RyField,
-  mt as RyGradientPicker,
-  xt as RyHero,
-  it as RyIcon,
-  lt as RyKnob,
+  it as RyExample,
+  Et as RyFeature,
+  Ct as RyFeatureGrid,
+  V as RyField,
+  vt as RyGradientPicker,
+  _t as RyHero,
+  rt as RyIcon,
+  ct as RyKnob,
   P as RyModal,
-  ct as RyNumberSelect,
-  Ct as RyPricing,
-  St as RyPricingCard,
-  Q as RySelect,
-  ht as RySlider,
+  dt as RyNumberSelect,
+  St as RyPricing,
+  Tt as RyPricingCard,
+  tt as RySelect,
+  lt as RySlider,
   K as RySplit,
-  _t as RyStat,
-  W as RySwitch,
+  Mt as RyStat,
+  Y as RySwitch,
   F as RyTabs,
-  wt as RyTag,
-  $t as RyTagInput,
+  $t as RyTag,
+  xt as RyTagInput,
   q as RyThemeToggle,
   f as RyToast,
-  ot as RyToggleButton,
-  X as RyTooltip,
+  ht as RyToggleButton,
+  G as RyTooltip,
   k as RyTree,
-  kt as RyTreeItem,
+  wt as RyTreeItem,
   p as getIcon,
-  Ht as getIconNames,
+  Bt as getIconNames,
   C as processTransforms,
-  Dt as registerIcon,
-  It as registerIcons,
+  It as registerIcon,
+  Ht as registerIcons,
   M as transform
 };
 //# sourceMappingURL=ry-ui.js.map