@ryanhelsing/ry-ui 1.0.0

package/dist/ry-ui.js

@@ -0,0 +1,2433 @@
+class d extends HTMLElement {
+  // Store for cleanup functions
+  #t = [];
+  // Store for MutationObserver
+  #e = null;
+  constructor() {
+    super();
+  }
+  /**
+   * Called when element is added to DOM.
+   * Override setup() in subclass instead of this.
+   */
+  connectedCallback() {
+    this.setAttribute("data-ry-initialized", ""), this.setup?.();
+  }
+  /**
+   * Called when element is removed from DOM.
+   * Automatically cleans up event listeners and observers.
+   */
+  disconnectedCallback() {
+    this.#t.forEach((t) => t()), this.#t = [], this.#e && (this.#e.disconnect(), this.#e = null), this.teardown?.();
+  }
+  on(t, e, s, i = {}) {
+    const r = s.bind(this);
+    return t.addEventListener(e, r, i), this.#t.push(() => {
+      t.removeEventListener(e, r, i);
+    }), r;
+  }
+  /**
+   * Emit a custom event with ry: prefix.
+   */
+  emit(t, e, s = {}) {
+    const i = new CustomEvent(`ry:${t}`, {
+      bubbles: !0,
+      cancelable: !0,
+      detail: e,
+      ...s
+    });
+    return this.dispatchEvent(i);
+  }
+  /**
+   * Get/set component state via data attribute.
+   */
+  get state() {
+    return this.dataset.ryState ?? "closed";
+  }
+  set state(t) {
+    const e = this.state;
+    e !== t && (this.dataset.ryState = t, this.emit("state-change", { oldState: e, newState: t }));
+  }
+  /**
+   * Query within this element.
+   */
+  $(t) {
+    return this.querySelector(t);
+  }
+  /**
+   * Query all within this element.
+   */
+  $$(t) {
+    return [...this.querySelectorAll(t)];
+  }
+  /**
+   * Setup a MutationObserver on this element.
+   */
+  observe(t, e = { childList: !0, subtree: !0 }) {
+    this.#e && this.#e.disconnect(), this.#e = new MutationObserver(t.bind(this)), this.#e.observe(this, e);
+  }
+  /**
+   * Wait for next animation frame.
+   */
+  nextFrame() {
+    return new Promise((t) => requestAnimationFrame(t));
+  }
+  /**
+   * Trap focus within a container (for modals, dropdowns).
+   */
+  trapFocus(t) {
+    const e = [
+      "a[href]",
+      "button:not([disabled])",
+      "input:not([disabled])",
+      "select:not([disabled])",
+      "textarea:not([disabled])",
+      '[tabindex]:not([tabindex="-1"])'
+    ].join(","), s = t.querySelectorAll(e), i = s[0], r = s[s.length - 1], a = (n) => {
+      n.key === "Tab" && (n.shiftKey ? document.activeElement === i && (n.preventDefault(), r?.focus()) : document.activeElement === r && (n.preventDefault(), i?.focus()));
+    };
+    this.on(t, "keydown", a), i?.focus();
+  }
+}
+const C = [
+  // Layout
+  "page",
+  "header",
+  "main",
+  "footer",
+  "section",
+  "aside",
+  "grid",
+  "stack",
+  "cluster",
+  "split",
+  "center",
+  "nav",
+  "logo",
+  "actions",
+  // Components
+  "accordion",
+  "accordion-item",
+  "tabs",
+  "tab",
+  "modal",
+  "dropdown",
+  "menu",
+  "menu-item",
+  "drawer",
+  "toast",
+  "alert",
+  "card",
+  "button",
+  "badge",
+  "field",
+  "switch",
+  "tooltip",
+  "select",
+  "option",
+  "theme-toggle",
+  "divider",
+  "icon",
+  "example",
+  "toggle-button",
+  "slider",
+  "knob",
+  "color-picker",
+  "color-input"
+], S = new RegExp(
+  `<(/?)(${C.join("|")})(\\s|>|/)`,
+  "g"
+);
+function k(o) {
+  return o.replace(S, "<$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);
+  });
+}
+document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", _) : _();
+class T extends d {
+  setup() {
+    this.#t(), this.$$('[data-ry-target="trigger"]').forEach((t) => {
+      this.on(t, "click", this.#i);
+    }), this.on(this, "keydown", this.#s), this.#e();
+  }
+  #t() {
+    this.$$("ry-accordion-item").forEach((t) => {
+      const e = t.getAttribute("title") ?? "Untitled", s = t.hasAttribute("open"), i = t.innerHTML;
+      t.outerHTML = `
+        <div data-ry-target="item" class="ry-accordion__item" data-ry-state="${s ? "open" : "closed"}">
+          <button data-ry-target="trigger" class="ry-accordion__trigger" aria-expanded="${s}">
+            ${e}
+            <span data-ry-target="icon" class="ry-accordion__icon">&#9660;</span>
+          </button>
+          <div data-ry-target="panel" class="ry-accordion__panel">
+            <div class="ry-accordion__content">${i}</div>
+          </div>
+        </div>
+      `;
+    });
+  }
+  #e() {
+    this.$$('[data-ry-target="item"]').forEach((t, e) => {
+      const s = t.querySelector('[data-ry-target="trigger"]'), i = t.querySelector('[data-ry-target="panel"]');
+      if (!s || !i) return;
+      const r = s.id || `ry-accordion-trigger-${this.id || ""}-${e}`, a = i.id || `ry-accordion-panel-${this.id || ""}-${e}`;
+      s.id = r, i.id = a, s.setAttribute("aria-controls", a), i.setAttribute("aria-labelledby", r), i.setAttribute("role", "region");
+      const n = t.dataset.ryState === "open";
+      s.setAttribute("aria-expanded", String(n));
+    });
+  }
+  #i = (t) => {
+    const s = t.currentTarget.closest('[data-ry-target="item"]');
+    s && this.toggle(s);
+  };
+  #s = (t) => {
+    const e = this.$$('[data-ry-target="trigger"]'), s = e.indexOf(document.activeElement);
+    if (s === -1) return;
+    let i;
+    switch (t.key) {
+      case "ArrowDown":
+        t.preventDefault(), i = (s + 1) % e.length, e[i]?.focus();
+        break;
+      case "ArrowUp":
+        t.preventDefault(), i = (s - 1 + e.length) % e.length, e[i]?.focus();
+        break;
+      case "Home":
+        t.preventDefault(), e[0]?.focus();
+        break;
+      case "End":
+        t.preventDefault(), e[e.length - 1]?.focus();
+        break;
+    }
+  };
+  toggle(t) {
+    t.dataset.ryState === "open" ? this.close(t) : this.open(t);
+  }
+  open(t) {
+    this.hasAttribute("multiple") || this.$$('[data-ry-target="item"][data-ry-state="open"]').forEach((s) => {
+      s !== t && this.close(s);
+    });
+    const e = t.querySelector('[data-ry-target="trigger"]');
+    t.dataset.ryState = "open", e?.setAttribute("aria-expanded", "true"), this.emit("open", { item: t });
+  }
+  close(t) {
+    const e = t.querySelector('[data-ry-target="trigger"]');
+    t.dataset.ryState = "closed", e?.setAttribute("aria-expanded", "false"), this.emit("close", { item: t });
+  }
+  openAll() {
+    this.$$('[data-ry-target="item"]').forEach((t) => this.open(t));
+  }
+  closeAll() {
+    this.$$('[data-ry-target="item"]').forEach((t) => this.close(t));
+  }
+}
+customElements.define("ry-accordion", T);
+customElements.get("ry-accordion-item") || customElements.define("ry-accordion-item", class extends HTMLElement {
+});
+class H extends d {
+  #t = null;
+  #e = 0;
+  setup() {
+    this.#i();
+    const t = this.id;
+    t && (document.querySelectorAll(`[data-ry-modal-trigger="${t}"]`).forEach((s) => {
+      this.on(s, "click", () => this.open());
+    }), document.querySelectorAll(`ry-button[modal="${t}"], [modal="${t}"]`).forEach((s) => {
+      this.on(s, "click", () => this.open());
+    })), this.$$("[close]").forEach((s) => {
+      this.on(s, "click", () => this.close());
+    });
+    const e = this.$('[data-ry-target="backdrop"]');
+    e && this.on(e, "click", () => this.close()), this.on(document, "keydown", this.#s), this.#e = window.innerWidth - document.documentElement.clientWidth, this.hasAttribute("data-ry-state") || (this.state = "closed");
+  }
+  #i() {
+    if (this.$('[data-ry-target="dialog"]')) return;
+    const t = this.getAttribute("title") ?? "", s = this.$('[slot="footer"]')?.innerHTML ?? "", i = Array.from(this.childNodes).filter((r) => !(r instanceof Element && r.getAttribute("slot") === "footer")).map((r) => r instanceof Element ? r.outerHTML : r.textContent).join("");
+    this.innerHTML = `
+      <div data-ry-target="backdrop" class="ry-modal__backdrop"></div>
+      <div data-ry-target="dialog" class="ry-modal__dialog" role="dialog" aria-modal="true" aria-labelledby="ry-modal-title-${this.id}">
+        <div data-ry-target="header" class="ry-modal__header">
+          <h3 class="ry-modal__title" id="ry-modal-title-${this.id}">${t}</h3>
+          <button data-ry-target="close" class="ry-modal__close" close aria-label="Close">&times;</button>
+        </div>
+        <div data-ry-target="body" class="ry-modal__body">${i}</div>
+        ${s ? `<div data-ry-target="footer" class="ry-modal__footer">${s}</div>` : ""}
+      </div>
+    `;
+  }
+  #s = (t) => {
+    t.key === "Escape" && this.state === "open" && this.close();
+  };
+  open() {
+    if (this.state === "open") return;
+    this.#t = document.activeElement, document.body.setAttribute("data-ry-scroll-lock", ""), document.body.style.setProperty("--ry-scrollbar-width", `${this.#e}px`), this.state = "open";
+    const t = this.$('[data-ry-target="dialog"]');
+    t && this.nextFrame().then(() => {
+      this.trapFocus(t);
+    }), this.emit("open");
+  }
+  close() {
+    this.state !== "closed" && (document.body.removeAttribute("data-ry-scroll-lock"), document.body.style.removeProperty("--ry-scrollbar-width"), this.state = "closed", this.#t instanceof HTMLElement && (this.#t.focus(), this.#t = null), this.emit("close"));
+  }
+  toggle() {
+    this.state === "open" ? this.close() : this.open();
+  }
+}
+customElements.define("ry-modal", H);
+class L extends d {
+  setup() {
+    this.#t(), this.$$('[data-ry-target="trigger"]').forEach((t) => {
+      this.on(t, "click", this.#i);
+    }), this.on(this, "keydown", this.#s), this.#e();
+  }
+  #t() {
+    const t = this.$$("ry-tab");
+    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");
+    }), this.insertBefore(i, this.firstChild);
+  }
+  #e() {
+    const t = this.$$('[data-ry-target="trigger"]'), e = this.$$('[data-ry-target="panel"], ry-tab');
+    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");
+    }), t.findIndex((i) => i.getAttribute("aria-selected") === "true") === -1 && t.length > 0 && this.select(0);
+  }
+  #i = (t) => {
+    const e = t.currentTarget, i = this.$$('[data-ry-target="trigger"]').indexOf(e);
+    i !== -1 && this.select(i);
+  };
+  #s = (t) => {
+    const e = this.$$('[data-ry-target="trigger"]'), s = e.indexOf(document.activeElement);
+    if (s === -1) return;
+    let i;
+    switch (t.key) {
+      case "ArrowRight":
+        t.preventDefault(), i = (s + 1) % e.length, this.select(i), e[i]?.focus();
+        break;
+      case "ArrowLeft":
+        t.preventDefault(), i = (s - 1 + e.length) % e.length, this.select(i), e[i]?.focus();
+        break;
+      case "Home":
+        t.preventDefault(), this.select(0), e[0]?.focus();
+        break;
+      case "End":
+        t.preventDefault(), this.select(e.length - 1), e[e.length - 1]?.focus();
+        break;
+    }
+  };
+  select(t) {
+    const e = this.$$('[data-ry-target="trigger"]'), s = this.$$('[data-ry-target="panel"], ry-tab');
+    if (t < 0 || t >= e.length) return;
+    e.forEach((a) => {
+      a.setAttribute("aria-selected", "false"), a.setAttribute("tabindex", "-1");
+    }), s.forEach((a) => {
+      a.dataset.ryState = "", a.removeAttribute("active");
+    });
+    const i = e[t], r = s[t];
+    i && r && (i.setAttribute("aria-selected", "true"), i.setAttribute("tabindex", "0"), r.dataset.ryState = "active", this.emit("change", { index: t, trigger: i, panel: r }));
+  }
+  get selectedIndex() {
+    return this.$$('[data-ry-target="trigger"]').findIndex((e) => e.getAttribute("aria-selected") === "true");
+  }
+}
+customElements.define("ry-tabs", L);
+customElements.get("ry-tab") || customElements.define("ry-tab", class extends HTMLElement {
+});
+class I extends d {
+  setup() {
+    this.#t();
+    const t = this.$('[data-ry-target="trigger"]');
+    t && (this.on(t, "click", () => this.toggle()), t.setAttribute("aria-haspopup", "true"), t.setAttribute("aria-expanded", "false")), this.on(document, "click", this.#e), this.on(document, "keydown", this.#i), this.$$('[data-ry-target="item"], ry-menu-item').forEach((e) => {
+      this.on(e, "click", () => this.close());
+    }), this.state = "closed";
+  }
+  #t() {
+    const t = this.$('[slot="trigger"], ry-button:first-of-type');
+    t && !this.$('[data-ry-target="trigger"]') && t.setAttribute("data-ry-target", "trigger");
+    const e = this.$("ry-menu");
+    e && !e.hasAttribute("data-ry-target") && (e.setAttribute("data-ry-target", "menu"), e.classList.add("ry-dropdown__menu"), e.setAttribute("role", "menu")), this.$$("ry-menu-item").forEach((s) => {
+      s.hasAttribute("data-ry-target") || (s.setAttribute("data-ry-target", "item"), s.classList.add("ry-dropdown__item"), s.setAttribute("role", "menuitem"));
+    });
+  }
+  #e = (t) => {
+    const e = t.target;
+    this.state === "open" && !this.contains(e) && this.close();
+  };
+  #i = (t) => {
+    if (t.key === "Escape" && this.state === "open" && (this.close(), this.$('[data-ry-target="trigger"]')?.focus()), this.state === "open" && ["ArrowDown", "ArrowUp"].includes(t.key)) {
+      t.preventDefault();
+      const e = this.$$('[data-ry-target="item"], ry-menu-item'), s = e.indexOf(document.activeElement);
+      let i;
+      t.key === "ArrowDown" ? i = s < e.length - 1 ? s + 1 : 0 : i = s > 0 ? s - 1 : e.length - 1, e[i]?.focus();
+    }
+  };
+  open() {
+    if (this.state === "open") return;
+    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");
+  }
+  toggle() {
+    this.state === "open" ? this.close() : this.open();
+  }
+}
+customElements.define("ry-dropdown", I);
+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 {
+  setup() {
+    this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.setAttribute("role", "button"), this.on(this, "click", this.#t), this.on(this, "keydown", this.#e);
+  }
+  #t = (t) => {
+    if (this.hasAttribute("disabled")) {
+      t.preventDefault();
+      return;
+    }
+    this.emit("click", { originalEvent: t });
+  };
+  #e = (t) => {
+    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.click());
+  };
+}
+customElements.define("ry-button", D);
+class F extends d {
+  #t = ["light", "dark"];
+  #e = 0;
+  setup() {
+    const t = this.getAttribute("themes");
+    t && (this.#t = t.split(",").map((s) => s.trim()));
+    const e = document.documentElement.dataset.ryTheme ?? "light";
+    this.#e = this.#t.indexOf(e), this.#e === -1 && (this.#e = 0), this.innerHTML.trim() || (this.innerHTML = `<button data-ry-target="button" class="ry-btn ry-btn--ghost">${this.#i()}</button>`), this.on(this, "click", () => this.toggle());
+  }
+  #i() {
+    switch (this.#t[this.#e]) {
+      case "dark":
+        return "&#9790;";
+      // Moon
+      case "ocean":
+        return "&#127754;";
+      // Wave
+      default:
+        return "&#9728;";
+    }
+  }
+  toggle() {
+    this.#e = (this.#e + 1) % this.#t.length;
+    const t = this.#t[this.#e];
+    document.documentElement.dataset.ryTheme = t;
+    const e = this.$('[data-ry-target="button"]');
+    e && (e.innerHTML = this.#i()), this.emit("theme-change", { theme: t });
+  }
+  get theme() {
+    return this.#t[this.#e] ?? "light";
+  }
+  set theme(t) {
+    const e = this.#t.indexOf(t);
+    if (e !== -1) {
+      this.#e = e, document.documentElement.dataset.ryTheme = t;
+      const s = this.$('[data-ry-target="button"]');
+      s && (s.innerHTML = this.#i());
+    }
+  }
+}
+customElements.define("ry-theme-toggle", F);
+class B extends d {
+  setup() {
+    this.#t();
+    const t = this.$("[close]");
+    t && this.on(t, "click", () => this.dismiss());
+  }
+  #t() {
+    if (this.$('[data-ry-target="content"]')) return;
+    const t = this.getAttribute("variant") ?? "info", e = this.hasAttribute("dismissible"), s = this.innerHTML;
+    this.innerHTML = `
+      <div data-ry-target="content" class="ry-alert__content">${s}</div>
+      ${e ? '<button data-ry-target="close" class="ry-alert__close" close aria-label="Dismiss">&times;</button>' : ""}
+    `, this.setAttribute("role", "alert"), this.setAttribute("data-variant", t);
+  }
+  dismiss() {
+    this.state = "closed", setTimeout(() => {
+      this.remove();
+    }, 200), this.emit("close");
+  }
+}
+customElements.define("ry-alert", B);
+class j extends d {
+  setup() {
+    this.#t();
+  }
+  #t() {
+    if (this.$('[data-ry-target="label"]')) return;
+    const t = this.getAttribute("label");
+    if (!t) return;
+    const e = this.$("input, textarea, select");
+    if (!e) return;
+    const s = e.id || `ry-field-${Math.random().toString(36).slice(2, 9)}`;
+    e.id = s;
+    const i = document.createElement("label");
+    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);
+let R = 0;
+class P extends d {
+  #t = null;
+  static observedAttributes = ["checked", "disabled"];
+  setup() {
+    this.#e(), this.#t = this.$('input[type="checkbox"]'), this.#t && this.on(this.#t, "change", this.#i), this.on(this, "keydown", this.#s);
+  }
+  #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() ?? "";
+    this.innerHTML = `
+      <label data-ry-target="wrapper" class="ry-switch__wrapper" for="${t}">
+        <input
+          type="checkbox"
+          id="${t}"
+          data-ry-target="input"
+          class="ry-switch__input"
+          ${e ? `name="${e}"` : ""}
+          ${s ? "checked" : ""}
+          ${i ? "disabled" : ""}
+          role="switch"
+          aria-checked="${s}"
+        >
+        <span data-ry-target="track" class="ry-switch__track">
+          <span data-ry-target="thumb" class="ry-switch__thumb"></span>
+        </span>
+        ${r ? `<span data-ry-target="label" class="ry-switch__label">${r}</span>` : ""}
+      </label>
+    `;
+  }
+  #i = () => {
+    if (!this.#t) return;
+    const t = this.#t.checked;
+    this.#t.setAttribute("aria-checked", String(t)), t ? this.setAttribute("checked", "") : this.removeAttribute("checked"), this.emit("change", {
+      value: String(t),
+      label: t ? "on" : "off"
+    });
+  };
+  #s = (t) => {
+    (t.key === " " || t.key === "Enter") && (t.preventDefault(), this.#t?.click());
+  };
+  get checked() {
+    return this.#t?.checked ?? !1;
+  }
+  set checked(t) {
+    this.#t && (this.#t.checked = t, this.#t.setAttribute("aria-checked", String(t)), t ? this.setAttribute("checked", "") : this.removeAttribute("checked"));
+  }
+  get value() {
+    return this.#t?.value ?? "";
+  }
+  set value(t) {
+    this.#t && (this.#t.value = t);
+  }
+}
+customElements.define("ry-switch", P);
+let O = 0;
+class K extends d {
+  #t = null;
+  #e = null;
+  #i = null;
+  setup() {
+    this.#i = `ry-tooltip-${++O}`, 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);
+  }
+  #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();
+    }, 200);
+  };
+  #n = () => {
+    const t = this.getAttribute("position") ?? "top";
+    this.setAttribute("data-ry-position", t), this.state = "open";
+  };
+  #l = () => {
+    this.#t && (clearTimeout(this.#t), this.#t = null), this.state = "closed";
+  };
+  #c = (t) => {
+    t.key === "Escape" && this.state === "open" && this.#l();
+  };
+  teardown() {
+    this.#t && clearTimeout(this.#t);
+  }
+}
+customElements.define("ry-tooltip", K);
+class W extends d {
+  #t = null;
+  #e = 0;
+  setup() {
+    this.#i();
+    const t = this.id;
+    t && document.querySelectorAll(`ry-button[drawer="${t}"], [drawer="${t}"]`).forEach((s) => {
+      this.on(s, "click", () => this.open());
+    }), this.$$("[close]").forEach((s) => {
+      this.on(s, "click", () => this.close());
+    });
+    const e = this.$('[data-ry-target="backdrop"]');
+    e && this.on(e, "click", () => this.close()), this.on(document, "keydown", this.#s), this.#e = window.innerWidth - document.documentElement.clientWidth, this.hasAttribute("open") ? this.state = "open" : this.hasAttribute("data-ry-state") || (this.state = "closed");
+  }
+  #i() {
+    if (this.$('[data-ry-target="panel"]')) return;
+    const t = this.getAttribute("side") ?? "left", e = this.innerHTML;
+    this.innerHTML = `
+      <div data-ry-target="backdrop" class="ry-drawer__backdrop"></div>
+      <div data-ry-target="panel" class="ry-drawer__panel" role="dialog" aria-modal="true" data-ry-side="${t}">
+        <button data-ry-target="close" class="ry-drawer__close" close aria-label="Close">&times;</button>
+        <div data-ry-target="content" class="ry-drawer__content">
+          ${e}
+        </div>
+      </div>
+    `, this.setAttribute("data-ry-side", t);
+  }
+  #s = (t) => {
+    t.key === "Escape" && this.state === "open" && this.close();
+  };
+  open() {
+    if (this.state === "open") return;
+    this.#t = document.activeElement, document.body.setAttribute("data-ry-scroll-lock", ""), document.body.style.setProperty("--ry-scrollbar-width", `${this.#e}px`), this.state = "open";
+    const t = this.$('[data-ry-target="panel"]');
+    t && this.nextFrame().then(() => {
+      this.trapFocus(t);
+    }), this.emit("open");
+  }
+  close() {
+    this.state !== "closed" && (document.body.removeAttribute("data-ry-scroll-lock"), document.body.style.removeProperty("--ry-scrollbar-width"), this.state = "closed", this.#t instanceof HTMLElement && (this.#t.focus(), this.#t = null), this.emit("close"));
+  }
+  toggle() {
+    this.state === "open" ? this.close() : this.open();
+  }
+}
+customElements.define("ry-drawer", W);
+const V = 4e3;
+class p extends d {
+  #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;
+  }
+  // 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;
+  }
+  static success(t, e) {
+    return p.show({ message: t, variant: "success", duration: e });
+  }
+  static error(t, e) {
+    return p.show({ message: t, variant: "error", duration: e });
+  }
+  static info(t, e) {
+    return p.show({ message: t, variant: "info", duration: e });
+  }
+  static warning(t, e) {
+    return p.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(V), 10);
+    e > 0 && (this.#t = setTimeout(() => this.dismiss(), e)), requestAnimationFrame(() => {
+      this.state = "visible";
+    });
+  }
+  #s() {
+    if (this.$('[data-ry-target="content"]')) return;
+    const t = this.getAttribute("variant") ?? "info", e = this.textContent?.trim() ?? "", s = this.#r(t);
+    this.innerHTML = `
+      <div data-ry-target="icon" class="ry-toast__icon">${s}</div>
+      <div data-ry-target="content" class="ry-toast__content">${e}</div>
+      <button data-ry-target="close" class="ry-toast__close" close aria-label="Dismiss">&times;</button>
+    `;
+  }
+  #r(t) {
+    const e = {
+      info: "ℹ",
+      success: "✓",
+      warning: "⚠",
+      error: "✕"
+    };
+    return e[t] ?? e.info;
+  }
+  dismiss() {
+    this.#t && (clearTimeout(this.#t), this.#t = null), this.state = "hiding", setTimeout(() => {
+      this.remove();
+    }, 300), this.emit("close");
+  }
+  teardown() {
+    this.#t && clearTimeout(this.#t);
+  }
+}
+customElements.define("ry-toast", p);
+let q = 0;
+class N extends d {
+  #t = null;
+  #e = -1;
+  #i = "";
+  #s = null;
+  // Store options reference
+  _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");
+    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) => `
+      <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}
+      </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;
+  }
+  #n = (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();
+      return;
+    }
+    e.closest('[data-ry-target="trigger"]') && this.toggle();
+  };
+  #l = (t) => {
+    if (this.hasAttribute("disabled")) return;
+    const e = this.state === "open";
+    switch (t.key) {
+      case "Enter":
+      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());
+        } else
+          this.toggle();
+        break;
+      case "Escape":
+        e && (t.preventDefault(), this.close());
+        break;
+      case "ArrowDown":
+        t.preventDefault(), e ? this.#u() : this.open();
+        break;
+      case "ArrowUp":
+        t.preventDefault(), e && this.#b();
+        break;
+      case "Home":
+        e && (t.preventDefault(), this.#f());
+        break;
+      case "End":
+        e && (t.preventDefault(), this.#g());
+        break;
+      default:
+        t.key.length === 1 && !t.ctrlKey && !t.metaKey && this.#p(t.key);
+        break;
+    }
+  };
+  #c = (t) => {
+    const e = t.target;
+    !this.contains(e) && this.state === "open" && this.close();
+  };
+  #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 (this.state === "open")
+        this.#a(s);
+      else {
+        const i = e[s];
+        i && this.#o(i);
+      }
+    this.#s = setTimeout(() => {
+      this.#i = "";
+    }, 500);
+  }
+  #a(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) => {
+      r.removeAttribute("data-highlighted");
+    });
+    const s = e[t];
+    if (!s) return;
+    s.setAttribute("data-highlighted", ""), s.scrollIntoView({ block: "nearest" }), this.#e = t;
+    const i = this.$('[data-ry-target="trigger"]');
+    i && i.setAttribute("aria-activedescendant", s.id);
+  }
+  #u() {
+    const t = this.$$('[data-ry-target="option"]:not([data-disabled])'), e = Math.min(this.#e + 1, t.length - 1);
+    this.#a(e);
+  }
+  #b() {
+    const t = Math.max(this.#e - 1, 0);
+    this.#a(t);
+  }
+  #f() {
+    this.#a(0);
+  }
+  #g() {
+    const t = this.$$('[data-ry-target="option"]:not([data-disabled])');
+    this.#a(t.length - 1);
+  }
+  #o(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"]');
+    r && (r.value = e), this.setAttribute("value", e), this.$$('[data-ry-target="option"]').forEach((a) => {
+      a.removeAttribute("aria-selected");
+    }), t.setAttribute("aria-selected", "true"), this.emit("change", { value: e, label: s });
+  }
+  open() {
+    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);
+    this.emit("open");
+  }
+  #w() {
+    const t = this.$('[data-ry-target="dropdown"]');
+    if (!t) return;
+    this.removeAttribute("data-ry-position");
+    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");
+  }
+  close() {
+    if (this.state === "closed") return;
+    this.state = "closed";
+    const t = this.$('[data-ry-target="trigger"]');
+    t && t.setAttribute("aria-expanded", "false"), this.$$('[data-ry-target="option"][data-highlighted]').forEach((e) => {
+      e.removeAttribute("data-highlighted");
+    }), this.#e = -1, this.emit("close");
+  }
+  toggle() {
+    this.state === "open" ? this.close() : this.open();
+  }
+  get value() {
+    return this.getAttribute("value") ?? "";
+  }
+  set value(t) {
+    const e = this.$(`[data-ry-target="option"][data-value="${t}"]`);
+    e && this.#o(e);
+  }
+  teardown() {
+    this.#s && clearTimeout(this.#s);
+  }
+}
+class U extends HTMLElement {
+}
+customElements.define("ry-option", U);
+customElements.define("ry-select", N);
+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;
+}
+function ht(o) {
+  Object.assign(v, o);
+}
+function lt() {
+  return Object.keys(v);
+}
+class z extends d {
+  #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();
+    const e = this.$('[data-ry-target="copy"]');
+    e && this.on(e, "click", this.#i);
+  }
+  #e() {
+    const t = this.getAttribute("language") ?? "text", e = this.getAttribute("title") ?? t.toUpperCase(), s = this.hasAttribute("line-numbers"), i = this.#s(this.#t, t), r = i.split(`
+`);
+    this.innerHTML = `
+      <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")}
+        </button>
+      </div>
+      <div data-ry-target="content" class="ry-code__content">
+        <pre data-ry-target="pre" class="ry-code__pre"><code data-ry-target="code" class="ry-code__code">${s ? r.map((a, n) => `<span class="ry-code__line"><span class="ry-code__line-number">${n + 1}</span><span class="ry-code__line-content">${a || " "}</span></span>`).join("") : i}</code></pre>
+      </div>
+    `;
+  }
+  #i = async () => {
+    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");
+        }, 2e3);
+      } catch {
+        this.emit("copy-error");
+      }
+  };
+  #s(t, e) {
+    switch (e) {
+      case "css":
+        return this.#r(t);
+      case "js":
+      case "javascript":
+        return this.#n(t);
+      case "html":
+        return this.#l(t);
+      case "json":
+        return this.#c(t);
+      default:
+        return this.#a(t);
+    }
+  }
+  #r(t) {
+    const e = [];
+    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);
+          continue;
+        }
+      }
+      const i = s.match(/^([.#]?[\w-]+(?:\s*,\s*[.#]?[\w-]+)*)\s*(?=\{)/);
+      if (i?.[1]) {
+        e.push({ type: "selector", value: i[1] }), s = s.slice(i[0].length);
+        continue;
+      }
+      const r = s.match(/^([\w-]+)\s*:/);
+      if (r?.[1]) {
+        e.push({ type: "property", value: r[1] }), e.push({ type: "punctuation", value: ":" }), s = s.slice(r[0].length);
+        continue;
+      }
+      const a = s.match(/^(#[0-9a-fA-F]{3,8})/);
+      if (a?.[1]) {
+        e.push({ type: "color", value: a[1], color: a[1] }), s = s.slice(a[1].length);
+        continue;
+      }
+      const n = s.match(/^(rgba?\([^)]+\)|hsla?\([^)]+\))/i);
+      if (n?.[1]) {
+        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);
+        continue;
+      }
+      const h = s.match(/^(['"])((?:[^\\]|\\.)*?)\1/);
+      if (h) {
+        e.push({ type: "string", value: h[0] }), s = s.slice(h[0].length);
+        continue;
+      }
+      const c = s[0];
+      if (c && /^[{};,()]/.test(c)) {
+        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);
+        continue;
+      }
+      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);
+        continue;
+      }
+      const x = s[0];
+      x && e.push({ type: "text", value: x }), s = s.slice(1);
+    }
+    return e.map((i) => this.#p(i)).join("");
+  }
+  #n(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(`
+`);
+        if (u !== -1) {
+          e.push({ type: "comment", value: s.slice(0, u) }), s = s.slice(u);
+          continue;
+        } else {
+          e.push({ type: "comment", value: s });
+          break;
+        }
+      }
+      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);
+          continue;
+        }
+      }
+      const r = s.match(/^(['"`])((?:[^\\]|\\.)*?)\1/);
+      if (r) {
+        e.push({ type: "string", value: r[0] }), s = s.slice(r[0].length);
+        continue;
+      }
+      const a = s.match(/^(-?\d+\.?\d*(?:e[+-]?\d+)?)/i);
+      if (a?.[1]) {
+        e.push({ type: "number", value: a[1] }), s = s.slice(a[1].length);
+        continue;
+      }
+      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);
+        continue;
+      }
+      const l = s[0];
+      if (l && /^[{}[\]();,.:?!<>=+\-*/&|^%~@#]/.test(l)) {
+        e.push({ type: "punctuation", value: l }), 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);
+        continue;
+      }
+      const c = s[0];
+      c && e.push({ type: "text", value: c }), s = s.slice(1);
+    }
+    return e.map((r) => this.#p(r)).join("");
+  }
+  #l(t) {
+    const e = [];
+    let s = t;
+    for (; s.length > 0; ) {
+      if (s.startsWith("<!--")) {
+        const c = s.indexOf("-->");
+        if (c !== -1) {
+          e.push({ type: "comment", value: s.slice(0, c + 3) }), s = s.slice(c + 3);
+          continue;
+        }
+      }
+      const i = s.match(/^(<\/?)([\w-]+)/);
+      if (i?.[1] && i[2]) {
+        e.push({ type: "punctuation", value: i[1] }), e.push({ type: "tag", value: i[2] }), s = s.slice(i[0].length);
+        continue;
+      }
+      const r = s.match(/^([\w-]+)(=)/);
+      if (r?.[1]) {
+        e.push({ type: "attribute", value: r[1] }), e.push({ type: "punctuation", value: "=" }), s = s.slice(r[0].length);
+        continue;
+      }
+      const a = s.match(/^(['"])((?:[^\\]|\\.)*?)\1/);
+      if (a) {
+        e.push({ type: "string", value: a[0] }), s = s.slice(a[0].length);
+        continue;
+      }
+      if (s[0] === ">" || s.startsWith("/>")) {
+        const c = s.startsWith("/>") ? "/>" : ">";
+        e.push({ type: "punctuation", value: c }), s = s.slice(c.length);
+        continue;
+      }
+      const n = s.match(/^(\s+)/);
+      if (n?.[1]) {
+        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);
+        continue;
+      }
+      const h = s[0];
+      h && e.push({ type: "text", value: h }), s = s.slice(1);
+    }
+    return e.map((i) => this.#p(i)).join("");
+  }
+  #c(t) {
+    const e = [];
+    let s = t;
+    for (; s.length > 0; ) {
+      const i = s.match(/^("(?:[^\\"]|\\.)*")/);
+      if (i?.[1]) {
+        s.slice(i[0].length).trimStart().startsWith(":") ? e.push({ type: "property", value: i[1] }) : e.push({ type: "string", value: i[1] }), s = s.slice(i[0].length);
+        continue;
+      }
+      const r = s.match(/^(-?\d+\.?\d*(?:e[+-]?\d+)?)/i);
+      if (r?.[1]) {
+        e.push({ type: "number", value: r[1] }), s = s.slice(r[1].length);
+        continue;
+      }
+      const a = s.match(/^(true|false|null)/);
+      if (a?.[1]) {
+        e.push({ type: "keyword", value: a[1] }), s = s.slice(a[1].length);
+        continue;
+      }
+      const n = s[0];
+      if (n && /^[{}[\]:,]/.test(n)) {
+        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);
+        continue;
+      }
+      const h = s[0];
+      h && e.push({ type: "text", value: h }), s = s.slice(1);
+    }
+    return e.map((i) => this.#p(i)).join("");
+  }
+  #p(t) {
+    const e = this.#a(t.value);
+    switch (t.type) {
+      case "keyword":
+        return `<span class="ry-code__keyword">${e}</span>`;
+      case "property":
+        return `<span class="ry-code__property">${e}</span>`;
+      case "value":
+        return `<span class="ry-code__value">${e}</span>`;
+      case "string":
+        return `<span class="ry-code__string">${e}</span>`;
+      case "number":
+        return `<span class="ry-code__number">${e}</span>`;
+      case "comment":
+        return `<span class="ry-code__comment">${e}</span>`;
+      case "selector":
+        return `<span class="ry-code__selector">${e}</span>`;
+      case "punctuation":
+        return `<span class="ry-code__punctuation">${e}</span>`;
+      case "tag":
+        return `<span class="ry-code__tag">${e}</span>`;
+      case "attribute":
+        return `<span class="ry-code__attribute">${e}</span>`;
+      case "color":
+        return `<span class="ry-code__color"><span class="ry-code__color-preview" style="background-color: ${t.color}"></span>${e}</span>`;
+      default:
+        return e;
+    }
+  }
+  #a(t) {
+    return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+  }
+  #u(t) {
+    const e = t.split(`
+`);
+    for (; e.length && !e[0]?.trim(); ) e.shift();
+    for (; e.length && !e[e.length - 1]?.trim(); ) e.pop();
+    if (e.length === 0) return "";
+    const s = Math.min(
+      ...e.filter((i) => i.trim()).map((i) => i.match(/^(\s*)/)?.[1]?.length ?? 0)
+    );
+    return e.map((i) => i.slice(s)).join(`
+`).trim();
+  }
+  get code() {
+    return this.#t;
+  }
+  set code(t) {
+    this.#t = t, this.#e();
+  }
+}
+customElements.define("ry-code", z);
+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");
+    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", "");
+    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);
+  }
+  /**
+   * Normalize indentation by removing common leading whitespace
+   */
+  #t(t) {
+    const e = t.split(`
+`);
+    for (; e.length && !e[0].trim(); ) e.shift();
+    for (; e.length && !e[e.length - 1].trim(); ) e.pop();
+    if (e.length === 0) return "";
+    const s = Math.min(
+      ...e.filter((i) => i.trim()).map((i) => i.match(/^(\s*)/)?.[1]?.length ?? 0)
+    );
+    return e.map((i) => i.slice(s)).join(`
+`).trim();
+  }
+}
+customElements.define("ry-example", Y);
+class G extends d {
+  static get observedAttributes() {
+    return ["name", "size", "label"];
+  }
+  setup() {
+    this.#t();
+  }
+  attributeChangedCallback(t, e, s) {
+    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);
+    if (!i) {
+      this.innerHTML = "";
+      return;
+    }
+    this.innerHTML = i;
+    const r = this.querySelector("svg");
+    r && (r.setAttribute("width", e), r.setAttribute("height", e), s ? (r.setAttribute("role", "img"), r.setAttribute("aria-label", s)) : r.setAttribute("aria-hidden", "true"));
+  }
+  get name() {
+    return this.getAttribute("name") ?? "";
+  }
+  set name(t) {
+    this.setAttribute("name", t);
+  }
+  get size() {
+    return parseInt(this.getAttribute("size") ?? "24", 10);
+  }
+  set size(t) {
+    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;
+  for (; t; ) {
+    if (X.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);
+  if (!t || t.size < 2) return;
+  const e = /* @__PURE__ */ new Map();
+  for (const s of t) {
+    const i = J(s), r = e.get(i) ?? [];
+    r.push(s), e.set(i, r);
+  }
+  if (e.size > 1) {
+    const s = [];
+    for (const [i] of e)
+      if (i) {
+        const r = i.id ? `#${i.id}` : "", a = i.tagName.toLowerCase();
+        s.push(`${a}${r}`);
+      } else
+        s.push("(no container)");
+    console.warn(
+      `ry-toggle-button: Buttons with name="${o}" span multiple containers (${s.join(", ")}). Intentional?`
+    ), A.add(o);
+  }
+}
+class Q extends d {
+  static observedAttributes = ["pressed", "disabled", "name", "value"];
+  #t = !1;
+  setup() {
+    this.setAttribute("role", "button"), this.setAttribute("aria-pressed", String(this.pressed)), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.#e(), this.on(this, "click", this.#s), this.on(this, "keydown", this.#r);
+  }
+  teardown() {
+    this.#i();
+  }
+  #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)));
+  }
+  #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;
+  }
+  #s = (t) => {
+    if (this.disabled) {
+      t.preventDefault();
+      return;
+    }
+    this.pressed || (this.pressed = !0);
+  };
+  #r = (t) => {
+    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.click());
+  };
+  #n() {
+    const t = this.name;
+    if (!t) return;
+    const e = g.get(t);
+    if (e)
+      for (const s of e)
+        s !== this && s.pressed && (s.pressed = !1);
+  }
+  // --- Public API ---
+  get pressed() {
+    return this.hasAttribute("pressed");
+  }
+  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", {
+      value: this.value,
+      label: t ? "pressed" : "unpressed"
+    });
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? (this.setAttribute("disabled", ""), this.setAttribute("aria-disabled", "true"), this.setAttribute("tabindex", "-1")) : (this.removeAttribute("disabled"), this.removeAttribute("aria-disabled"), this.setAttribute("tabindex", "0"));
+  }
+  get name() {
+    return this.getAttribute("name") ?? "";
+  }
+  set name(t) {
+    this.name !== t && (this.#i(), t ? this.setAttribute("name", t) : this.removeAttribute("name"), this.#e());
+  }
+  get value() {
+    return this.getAttribute("value") ?? "";
+  }
+  set value(t) {
+    this.setAttribute("value", t);
+  }
+  get icon() {
+    return this.getAttribute("icon") ?? "";
+  }
+  set icon(t) {
+    this.setAttribute("icon", t);
+  }
+}
+customElements.define("ry-toggle-button", Q);
+class tt extends d {
+  #t = !1;
+  #e = null;
+  #i = null;
+  #s = null;
+  #r = /* @__PURE__ */ new Map();
+  #n = /* @__PURE__ */ new Map();
+  static observedAttributes = ["min", "max", "step", "value", "start", "end", "disabled"];
+  setup() {
+    this.#l(), this.#p(), this.#k();
+  }
+  #l() {
+    const t = this.hasAttribute("range"), e = this.hasAttribute("labeled"), s = this.hasAttribute("tooltip");
+    this.hasAttribute("vertical");
+    let i = `
+      <div data-ry-target="track" class="ry-slider__track">
+        <div data-ry-target="fill" class="ry-slider__fill"></div>
+    `;
+    t ? i += `
+        <div data-ry-target="thumb-start" class="ry-slider__thumb" tabindex="0" role="slider" aria-label="Start value">
+          ${s ? '<span data-ry-target="tooltip-start" class="ry-slider__tooltip"></span>' : ""}
+        </div>
+        <div data-ry-target="thumb-end" class="ry-slider__thumb" tabindex="0" role="slider" aria-label="End value">
+          ${s ? '<span data-ry-target="tooltip-end" class="ry-slider__tooltip"></span>' : ""}
+        </div>
+      ` : i += `
+        <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"]')));
+  }
+  #c() {
+    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);
+        if (i === "letter")
+          r.push(String.fromCharCode(65 + n));
+        else {
+          const c = Math.round(h * 100) / 100;
+          r.push(String(Number.isInteger(c) ? c : c.toFixed(1)));
+        }
+      }
+    return `
+      <div data-ry-target="labels" class="ry-slider__labels">
+        ${r.map((a) => `<span>${a}</span>`).join("")}
+      </div>
+    `;
+  }
+  #p() {
+    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);
+  }
+  #a = (t) => {
+    if (this.disabled) return;
+    const e = this.#w(t);
+    if (this.hasAttribute("range")) {
+      const i = Math.abs(e - this.start), r = Math.abs(e - this.end);
+      i < r ? (this.start = e, this.#e = "start") : (this.end = e, this.#e = "end");
+    } else
+      this.value = e, this.#e = "value";
+    this.#t = !0, this.#k(), this.#m();
+  };
+  #u = (t, e) => {
+    this.disabled || (t.stopPropagation(), this.#t = !0, this.#e = e, t.target.setPointerCapture(t.pointerId));
+  };
+  #b = (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 = () => {
+    this.#t && (this.#t = !1, this.#e = null, this.#x());
+  };
+  #g = (t, e) => {
+    if (this.disabled) return;
+    const s = this.step || 1, i = (this.max - this.min) / 10;
+    let r = 0;
+    switch (t.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        r = this.hasAttribute("reversed") ? -s : s;
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        r = this.hasAttribute("reversed") ? s : -s;
+        break;
+      case "PageUp":
+        r = i;
+        break;
+      case "PageDown":
+        r = -i;
+        break;
+      case "Home":
+        r = this.min - this.#o(e);
+        break;
+      case "End":
+        r = this.max - this.#o(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();
+  };
+  #o(t) {
+    return t === "start" ? this.start : t === "end" ? this.end : this.value;
+  }
+  #w(t) {
+    if (!this.#i) return this.min;
+    const e = this.#i.getBoundingClientRect(), s = this.hasAttribute("vertical"), i = this.hasAttribute("reversed");
+    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);
+  }
+  #h(t) {
+    const e = this.step;
+    if (e === 0) return this.#d(t);
+    const s = Math.round((t - this.min) / e) * e + this.min;
+    return this.#d(s);
+  }
+  #d(t) {
+    return Math.max(this.min, Math.min(this.max, t));
+  }
+  #k() {
+    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));
+    } 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));
+    }
+  }
+  #v(t, e) {
+    const s = this.#n.get(t);
+    if (s) {
+      const i = this.step === 0 ? 2 : String(this.step).split(".")[1]?.length || 0;
+      s.textContent = e.toFixed(i);
+    }
+  }
+  #m() {
+    this.hasAttribute("range") ? this.emit("input", { start: this.start, end: this.end }) : this.emit("input", { value: this.value });
+  }
+  #x() {
+    this.hasAttribute("range") ? this.emit("change", { start: this.start, end: this.end }) : this.emit("change", { value: this.value });
+  }
+  // --- Public API ---
+  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 value() {
+    return parseFloat(this.getAttribute("value") ?? String(this.min));
+  }
+  set value(t) {
+    this.setAttribute("value", String(this.#d(t)));
+  }
+  get start() {
+    return parseFloat(this.getAttribute("start") ?? String(this.min));
+  }
+  set start(t) {
+    this.setAttribute("start", String(this.#d(t)));
+  }
+  get end() {
+    return parseFloat(this.getAttribute("end") ?? String(this.max));
+  }
+  set end(t) {
+    this.setAttribute("end", String(this.#d(t)));
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+}
+customElements.define("ry-slider", tt);
+class et extends d {
+  #t = !1;
+  #e = 0;
+  #i = 0;
+  #s = null;
+  #r = null;
+  #n = null;
+  static observedAttributes = ["min", "max", "step", "value", "disabled", "label", "labels", "description"];
+  setup() {
+    this.#l(), this.#c(), this.#d();
+  }
+  #l() {
+    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}>
+        <div data-ry-target="cap" class="ry-knob__cap">
+          <div data-ry-target="indicator" class="ry-knob__indicator"></div>
+        </div>
+      </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"]');
+  }
+  #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));
+  }
+  #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", ""));
+  };
+  #a = (t) => {
+    if (!this.#t) return;
+    const e = this.#e - t.clientY, s = (this.max - this.min) / 100;
+    this.#h(this.#i + e * s);
+  };
+  #u = () => {
+    this.#t && (this.#t = !1, this.#s?.classList.remove("ry-knob__ring--dragging"), this.removeAttribute("data-dragging"), this.#m());
+  };
+  #b = (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) => {
+    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);
+  };
+  #g = () => {
+    this.#t && (this.#t = !1, this.#s?.classList.remove("ry-knob__ring--dragging"), this.removeAttribute("data-dragging"), this.#m());
+  };
+  #o = (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();
+  };
+  #w = (t) => {
+    if (this.disabled) return;
+    const e = this.step || 1, s = (this.max - this.min) / 10;
+    let i = 0;
+    switch (t.key) {
+      case "ArrowUp":
+      case "ArrowRight":
+        i = e;
+        break;
+      case "ArrowDown":
+      case "ArrowLeft":
+        i = -e;
+        break;
+      case "PageUp":
+        i = s;
+        break;
+      case "PageDown":
+        i = -s;
+        break;
+      case "Home":
+        this.#h(this.min), this.#m();
+        return;
+      case "End":
+        this.#h(this.max), this.#m();
+        return;
+      default:
+        return;
+    }
+    t.preventDefault(), this.#h(this.value + i), this.#m();
+  };
+  #h(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();
+  }
+  #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));
+  }
+  #k(t) {
+    const e = this.getAttribute("labels");
+    if (e) {
+      const i = e.split(","), r = Math.round(t);
+      return i[r] ?? String(r);
+    }
+    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() {
+    const t = (this.value - this.min) / (this.max - this.min);
+    this.emit("input", { value: this.value, percent: t });
+  }
+  #m() {
+    const t = (this.value - this.min) / (this.max - this.min);
+    this.emit("change", { value: this.value, percent: t });
+  }
+  attributeChangedCallback(t, e, s) {
+    e !== s && t === "value" && this.#s && this.#d();
+  }
+  // --- Public API ---
+  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") ?? "0");
+  }
+  set step(t) {
+    this.setAttribute("step", String(t));
+  }
+  get value() {
+    return parseFloat(this.getAttribute("value") ?? String(this.min));
+  }
+  set value(t) {
+    this.setAttribute("value", String(t));
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+}
+customElements.define("ry-knob", et);
+function b(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;
+      break;
+    case 4:
+      i = u, r = h, a = s;
+      break;
+    case 5:
+      i = s, r = h, a = c;
+      break;
+  }
+  return {
+    r: Math.round(i * 255),
+    g: Math.round(r * 255),
+    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;
+  let n = 0;
+  const l = i === 0 ? 0 : a / i, h = i;
+  if (i !== r)
+    switch (i) {
+      case t:
+        n = ((e - s) / a + (e < s ? 6 : 0)) / 6;
+        break;
+      case e:
+        n = ((s - t) / a + 2) / 6;
+        break;
+      case s:
+        n = ((t - e) / a + 4) / 6;
+        break;
+    }
+  return {
+    h: Math.round(n * 360),
+    s: Math.round(l * 100),
+    v: Math.round(h * 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);
+  return {
+    h: o.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);
+  return {
+    h: o.h,
+    s: Math.round(i * 100),
+    v: Math.round(s * 100)
+  };
+}
+function E(o) {
+  const t = (e) => e.toString(16).padStart(2, "0");
+  return `#${t(o.r)}${t(o.g)}${t(o.b)}`;
+}
+function it(o) {
+  const t = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(o);
+  if (!t) {
+    const e = /^#?([a-f\d])([a-f\d])([a-f\d])$/i.exec(o);
+    return e ? {
+      r: parseInt(e[1] + e[1], 16),
+      g: parseInt(e[2] + e[2], 16),
+      b: parseInt(e[3] + e[3], 16)
+    } : null;
+  }
+  return {
+    r: parseInt(t[1], 16),
+    g: parseInt(t[2], 16),
+    b: parseInt(t[3], 16)
+  };
+}
+function m(o) {
+  const t = o.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) {
+      const a = {
+        r: parseInt(i[1], 16),
+        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) };
+    }
+    const r = it(t);
+    return r ? { hsv: w(r), alpha: 100 } : null;
+  }
+  const e = /^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+))?\s*\)$/.exec(t);
+  if (e) {
+    const i = {
+      r: parseInt(e[1], 10),
+      g: parseInt(e[2], 10),
+      b: parseInt(e[3], 10)
+    }, r = e[4] ? parseFloat(e[4]) * 100 : 100;
+    return { hsv: w(i), alpha: r };
+  }
+  const s = /^hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*(?:,\s*([\d.]+))?\s*\)$/.exec(t);
+  if (s) {
+    const i = {
+      h: parseFloat(s[1]),
+      s: parseFloat(s[2]),
+      l: parseFloat(s[3])
+    }, r = s[4] ? parseFloat(s[4]) * 100 : 100;
+    return { hsv: st(i), alpha: r };
+  }
+  return null;
+}
+class rt extends d {
+  #t = 0;
+  #e = 100;
+  #i = 100;
+  #s = 100;
+  #r = !1;
+  #n = !1;
+  #l = !1;
+  #c = null;
+  #p = null;
+  #a = null;
+  #u = null;
+  #b = null;
+  #f = null;
+  #g = null;
+  #o = null;
+  #w = null;
+  #h = null;
+  static observedAttributes = ["value", "format", "opacity", "disabled", "swatches", "inline"];
+  setup() {
+    this.#d(), this.#k(), this.#v(), this.#y();
+  }
+  #d() {
+    const t = this.hasAttribute("inline"), e = this.hasAttribute("opacity"), s = this.getAttribute("swatches");
+    let i = `
+      <div data-ry-target="grid" class="ry-color-picker__grid">
+        <div data-ry-target="grid-handle" class="ry-color-picker__grid-handle" tabindex="0"></div>
+      </div>
+      <div data-ry-target="controls" class="ry-color-picker__controls">
+        <div data-ry-target="sliders" class="ry-color-picker__sliders">
+          <div data-ry-target="hue-slider" class="ry-color-picker__slider ry-color-picker__hue">
+            <div data-ry-target="hue-handle" class="ry-color-picker__slider-handle" tabindex="0"></div>
+          </div>
+          ${e ? `
+          <div data-ry-target="alpha-slider" class="ry-color-picker__slider ry-color-picker__alpha">
+            <div data-ry-target="alpha-handle" class="ry-color-picker__slider-handle" tabindex="0"></div>
+          </div>
+          ` : ""}
+        </div>
+        <div data-ry-target="preview" class="ry-color-picker__preview">
+          <span data-ry-target="preview-color" class="ry-color-picker__preview-color"></span>
+        </div>
+      </div>
+      <div data-ry-target="input-row" class="ry-color-picker__input-row">
+        <input data-ry-target="input" type="text" class="ry-color-picker__input" spellcheck="false" />
+        <button data-ry-target="format-toggle" type="button" class="ry-color-picker__format-toggle">${this.format.toUpperCase()}</button>
+      </div>
+    `;
+    if (s) {
+      const r = s.split(";").map((a) => a.trim()).filter(Boolean);
+      if (r.length > 0) {
+        i += '<div data-ry-target="swatches" class="ry-color-picker__swatches">';
+        for (const a of r)
+          i += `<button type="button" class="ry-color-picker__swatch" data-color="${a}" style="background-color: ${a}"></button>`;
+        i += "</div>";
+      }
+    }
+    t ? this.innerHTML = `<div data-ry-target="panel" class="ry-color-picker__panel ry-color-picker__panel--inline">${i}</div>` : this.innerHTML = `
+        <button data-ry-target="trigger" type="button" class="ry-color-picker__trigger">
+          <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"]');
+  }
+  #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));
+    const t = this.$('[data-ry-target="format-toggle"]');
+    t && this.on(t, "click", this.#z);
+    const e = this.$('[data-ry-target="swatches"]');
+    e && this.on(e, "click", this.#Y);
+  }
+  #v() {
+    const t = this.getAttribute("value");
+    if (t) {
+      const e = m(t);
+      e && (this.#t = e.hsv.h, this.#e = e.hsv.s, this.#i = e.hsv.v, this.#s = e.alpha);
+    }
+  }
+  // ───────────────────────────────────────────────────────────────────────────
+  // Dropdown handlers
+  // ───────────────────────────────────────────────────────────────────────────
+  #m = () => {
+    this.disabled || (this.state === "open" ? this.close() : this.open());
+  };
+  #x = (t) => {
+    this.state === "open" && (this.contains(t.target) || this.close());
+  };
+  #B = (t) => {
+    t.key === "Escape" && this.state === "open" && (this.close(), this.#c?.focus());
+  };
+  open() {
+    this.hasAttribute("inline") || (this.#j(), this.state = "open");
+  }
+  close() {
+    this.hasAttribute("inline") || (this.state = "closed", this.removeAttribute("data-ry-position"));
+  }
+  #j() {
+    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");
+  }
+  // ───────────────────────────────────────────────────────────────────────────
+  // Grid handlers
+  // ───────────────────────────────────────────────────────────────────────────
+  #R = (t) => {
+    this.disabled || (t.preventDefault(), this.#r = !0, this.#u?.focus(), this.#E(t));
+  };
+  #E(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();
+  }
+  #P = (t) => {
+    if (this.disabled) return;
+    const e = t.shiftKey ? 10 : 1;
+    let s = !1;
+    switch (t.key) {
+      case "ArrowRight":
+        this.#e = Math.min(100, this.#e + e), s = !0;
+        break;
+      case "ArrowLeft":
+        this.#e = Math.max(0, this.#e - e), s = !0;
+        break;
+      case "ArrowUp":
+        this.#i = Math.min(100, this.#i + e), s = !0;
+        break;
+      case "ArrowDown":
+        this.#i = Math.max(0, this.#i - e), s = !0;
+        break;
+    }
+    s && (t.preventDefault(), this.#y(), this.#A(), this.#$());
+  };
+  // ───────────────────────────────────────────────────────────────────────────
+  // Hue handlers
+  // ───────────────────────────────────────────────────────────────────────────
+  #O = (t) => {
+    this.disabled || (t.preventDefault(), this.#n = !0, this.#f?.focus(), this.#C(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));
+    this.#t = Math.round(s * 360), this.#y(), this.#A();
+  }
+  #K = (t) => {
+    if (this.disabled) return;
+    const e = t.shiftKey ? 10 : 1;
+    let s = !1;
+    switch (t.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        this.#t = (this.#t + e) % 360, s = !0;
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        this.#t = (this.#t - e + 360) % 360, s = !0;
+        break;
+    }
+    s && (t.preventDefault(), this.#y(), this.#A(), this.#$());
+  };
+  // ───────────────────────────────────────────────────────────────────────────
+  // Alpha handlers
+  // ───────────────────────────────────────────────────────────────────────────
+  #W = (t) => {
+    this.disabled || (t.preventDefault(), this.#l = !0, this.#o?.focus(), this.#S(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();
+  }
+  #V = (t) => {
+    if (this.disabled) return;
+    const e = t.shiftKey ? 10 : 1;
+    let s = !1;
+    switch (t.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        this.#s = Math.min(100, this.#s + e), s = !0;
+        break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        this.#s = Math.max(0, this.#s - e), s = !0;
+        break;
+    }
+    s && (t.preventDefault(), this.#y(), this.#A(), this.#$());
+  };
+  // ───────────────────────────────────────────────────────────────────────────
+  // Pointer move/up
+  // ───────────────────────────────────────────────────────────────────────────
+  #q = (t) => {
+    this.#r ? this.#E(t) : this.#n ? this.#C(t) : this.#l && this.#S(t);
+  };
+  #N = () => {
+    (this.#r || this.#n || this.#l) && (this.#r = !1, this.#n = !1, this.#l = !1, this.#$());
+  };
+  // ───────────────────────────────────────────────────────────────────────────
+  // 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();
+  };
+  #U = (t) => {
+    t.key === "Enter" && (t.preventDefault(), this.#T());
+  };
+  // ───────────────────────────────────────────────────────────────────────────
+  // Format toggle
+  // ───────────────────────────────────────────────────────────────────────────
+  #z = () => {
+    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();
+  };
+  // ───────────────────────────────────────────────────────────────────────────
+  // Swatches
+  // ───────────────────────────────────────────────────────────────────────────
+  #Y = (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.#$());
+      }
+    }
+  };
+  // ───────────────────────────────────────────────────────────────────────────
+  // Update methods
+  // ───────────────────────────────────────────────────────────────────────────
+  #y() {
+    this.#H(), this.#L(), this.#I(), this.#D(), this.#F(), this.#M(), this.#G();
+  }
+  #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;
+      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 });
+      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}%`);
+  }
+  #D() {
+    if (this.#g) {
+      const t = b({ 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}%`);
+  }
+  #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;
+      t.style.backgroundColor = `rgba(${e.r}, ${e.g}, ${e.b}, ${s})`;
+    }
+  }
+  #M() {
+    this.#h && (this.#h.value = this.#_());
+  }
+  #G() {
+    const t = this.#_();
+    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");
+    switch (t) {
+      case "hex": {
+        const i = E(e);
+        if (s && this.#s < 100) {
+          const r = Math.round(this.#s / 100 * 255).toString(16).padStart(2, "0");
+          return i + r;
+        }
+        return i;
+      }
+      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 });
+        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);
+    }
+  }
+  // ───────────────────────────────────────────────────────────────────────────
+  // Events
+  // ───────────────────────────────────────────────────────────────────────────
+  #A() {
+    this.emit("input", { value: this.value, hsv: this.hsv, rgb: this.rgb });
+  }
+  #$() {
+    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());
+    }
+  }
+  // ───────────────────────────────────────────────────────────────────────────
+  // Public API
+  // ───────────────────────────────────────────────────────────────────────────
+  get value() {
+    return this.#_();
+  }
+  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());
+  }
+  get format() {
+    return this.getAttribute("format") || "hex";
+  }
+  set format(t) {
+    this.setAttribute("format", t);
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  get hsv() {
+    return { h: this.#t, s: this.#e, v: this.#i };
+  }
+  get rgb() {
+    return b(this.hsv);
+  }
+  get hsl() {
+    return M(this.hsv);
+  }
+  get alpha() {
+    return this.#s;
+  }
+  set alpha(t) {
+    this.#s = Math.max(0, Math.min(100, t)), this.#y();
+  }
+  /** 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;
+  }
+  /** Get color in specific format */
+  getFormattedValue(t) {
+    const e = this.format;
+    this.format = t;
+    const s = this.#_();
+    return this.format = e, s;
+  }
+}
+customElements.define("ry-color-picker", rt);
+class at extends d {
+  #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";
+  }
+  #r() {
+    const t = this.hasAttribute("opacity"), e = this.getAttribute("format") || "hex", s = this.getAttribute("value") || "#000000", i = this.getAttribute("placeholder") || "#000000";
+    this.innerHTML = `
+      <div data-ry-target="trigger" class="ry-color-input__trigger">
+        <button data-ry-target="swatch" type="button" class="ry-color-input__swatch">
+          <span data-ry-target="swatch-color" class="ry-color-input__swatch-color"></span>
+        </button>
+        <input
+          data-ry-target="input"
+          type="text"
+          class="ry-color-input__input"
+          value="${s.startsWith("#") ? s : "#" + s}"
+          placeholder="${i.startsWith("#") ? i : "#" + i}"
+          spellcheck="false"
+          autocomplete="off"
+          maxlength="7"
+        />
+      </div>
+      <div data-ry-target="panel" class="ry-color-input__panel">
+        <ry-color-picker
+          data-ry-target="picker"
+          inline
+          value="${s}"
+          format="${e}"
+          ${t ? "opacity" : ""}
+        ></ry-color-picker>
+      </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.#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);
+  }
+  #l = () => {
+    this.disabled || (this.state === "open" ? this.close() : this.open());
+  };
+  #c = () => {
+    this.disabled || this.open();
+  };
+  #p = () => {
+    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);
+    if (t !== r) {
+      this.#e.value = r;
+      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 }));
+  };
+  #a(t) {
+    let e = t;
+    e.startsWith("#") || (e = "#" + e);
+    const s = e.slice(1);
+    if (!/^[a-fA-F0-9]+$/.test(s) || s.length === 0)
+      return null;
+    if (s.length === 6)
+      return e;
+    if (s.length <= 3) {
+      const i = s.padEnd(3, s[s.length - 1]), [r, a, n] = i.split("");
+      return `#${r}${r}${a}${a}${n}${n}`;
+    }
+    return "#" + s.padEnd(6, "0");
+  }
+  #u(t) {
+    return !!(/^#[a-fA-F0-9]{6}$/.test(t) || /^#[a-fA-F0-9]{3}$/.test(t));
+  }
+  #b = (t) => {
+    t.key === "Enter" && (t.preventDefault(), this.#p(), this.emit("change", { value: this.value }));
+  };
+  #f = () => {
+    !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 = () => {
+    this.emit("change", { value: this.value });
+  };
+  #o = (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";
+  }
+  close() {
+    this.state = "closed", this.removeAttribute("data-ry-position");
+  }
+  #h() {
+    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");
+  }
+  #d() {
+    const t = this.$('[data-ry-target="swatch-color"]');
+    if (t && this.#s) {
+      const e = this.#s.rgb, s = this.hasAttribute("opacity") ? this.#s.alpha / 100 : 1;
+      t.style.backgroundColor = `rgba(${e.r}, ${e.g}, ${e.b}, ${s})`;
+    }
+  }
+  #k() {
+    const t = this.getAttribute("value") || "#000000";
+    if (this.#s) {
+      if (this.#s.setColor(t), this.#e) {
+        const e = this.#s.value;
+        this.#e.value = e.startsWith("#") ? e : "#" + e;
+      }
+      this.#d();
+    }
+  }
+  #v() {
+    if (this.#s) {
+      const t = this.#s.value;
+      this.getAttribute("value") !== t && this.setAttribute("value", t);
+    }
+  }
+  attributeChangedCallback(t, e, s) {
+    e !== s && (t === "value" && this.#s && this.#e && s && (this.#s.setColor(s), document.activeElement !== this.#e && (this.#e.value = this.#s.value), this.#d()), t === "disabled" && this.#e && (s !== null ? this.#e.setAttribute("disabled", "") : this.#e.removeAttribute("disabled")));
+  }
+  // Public API
+  get value() {
+    return this.#s?.value ?? this.getAttribute("value") ?? "#000000";
+  }
+  set value(t) {
+    this.#s?.setColor(t) && (this.#e && (this.#e.value = this.#s.value), this.#d(), this.#v());
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(t) {
+    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
+  }
+  get rgb() {
+    return this.#s?.rgb ?? { r: 0, g: 0, b: 0 };
+  }
+  get hsl() {
+    return this.#s?.hsl ?? { h: 0, s: 0, l: 0 };
+  }
+  get hsv() {
+    return this.#s?.hsv ?? { h: 0, s: 0, v: 0 };
+  }
+}
+customElements.define("ry-color-input", at);
+window.RyToast = p;
+console.log("ry-ui loaded");
+export {
+  T as RyAccordion,
+  B as RyAlert,
+  D as RyButton,
+  z as RyCode,
+  at as RyColorInput,
+  rt as RyColorPicker,
+  W as RyDrawer,
+  I as RyDropdown,
+  d as RyElement,
+  Y as RyExample,
+  j as RyField,
+  G as RyIcon,
+  et as RyKnob,
+  H as RyModal,
+  N 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
+};
+//# sourceMappingURL=ry-ui.js.map