@3r1s_s/erisui 1.0.14 → 1.0.16

package/dist/erisui.mjs

@@ -1,7 +1,4 @@
-var S = Object.defineProperty;
-var z = (o, t, e) => t in o ? S(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
-var v = (o, t, e) => z(o, typeof t != "symbol" ? t + "" : t, e);
-class M extends HTMLElement {
+class E extends HTMLElement {
   static get observedAttributes() {
     return ["size", "border-radius", "name", "color"];
   }
@@ -55,32 +52,32 @@ class M extends HTMLElement {
   }
   connectedCallback() {
     this.avatar = this.shadowRoot.querySelector(".avatar"), this.initials = this.shadowRoot.querySelector("#initials");
-    const t = this.shadowRoot.querySelector("slot"), e = t && t.assignedNodes().length > 0;
-    if (e) {
-      const i = t.assignedNodes()[0];
-      i && i.tagName === "IMG" && (this.initials.style.display = "none", this.avatar.style.backgroundColor = "transparent");
+    const t = this.shadowRoot.querySelector("slot"), i = t && t.assignedNodes().length > 0;
+    if (i) {
+      const e = t.assignedNodes()[0];
+      e && e.tagName === "IMG" && (this.initials.style.display = "none", this.avatar.style.backgroundColor = "transparent");
     } else
       this.hasAttribute("color") && (this.avatar.style.backgroundColor = this.getAttribute("color"));
     if (this.hasAttribute("color") && (this.avatar.style.backgroundColor = this.getAttribute("color")), this.hasAttribute("size")) {
-      const i = this.getAttribute("size");
-      this.avatar.style.width = i + "px", this.avatar.style.height = i + "px", this.initials.style.fontSize = i / 2 + "px";
+      const e = this.getAttribute("size");
+      this.avatar.style.width = e + "px", this.avatar.style.height = e + "px", this.initials.style.fontSize = e / 2 + "px";
     }
-    if (this.hasAttribute("border-radius") && (this.avatar.style.borderRadius = this.getAttribute("border-radius") + "px"), this.hasAttribute("name") && (this.avatar.title = this.getAttribute("name")), !e && this.hasAttribute("name")) {
-      const n = this.getAttribute("name").trim().split(/\s+/);
-      let s = "";
-      n.length === 1 ? s = n[0][0] || "" : s = (n[0][0] || "") + (n[n.length - 1][0] || ""), this.initials.textContent = s.toUpperCase();
+    if (this.hasAttribute("border-radius") && (this.avatar.style.borderRadius = this.getAttribute("border-radius") + "px"), this.hasAttribute("name") && (this.avatar.title = this.getAttribute("name")), !i && this.hasAttribute("name")) {
+      const a = this.getAttribute("name").trim().split(/\s+/);
+      let n = "";
+      a.length === 1 ? n = a[0][0] || "" : n = (a[0][0] || "") + (a[a.length - 1][0] || ""), this.initials.textContent = n.toUpperCase();
     }
   }
 }
-customElements.define("eui-avatar", M);
+customElements.define("eui-avatar", E);
 const u = /* @__PURE__ */ (() => {
-  let o = {};
+  let s = {};
   return {
-    register(t, e) {
-      o[t] = e;
+    register(t, i) {
+      s[t] = i;
     },
     get(t) {
-      return o[t] || "";
+      return s[t] || "";
     }
   };
 })();
@@ -93,7 +90,7 @@ u.register("copy", '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="1
 u.register("arrow", '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M9.3 5.3a1 1 0 0 0 0 1.4l5.29 5.3-5.3 5.3a1 1 0 1 0 1.42 1.4l6-6a1 1 0 0 0 0-1.4l-6-6a1 1 0 0 0-1.42 0Z"></path></svg>');
 u.register("back", '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" style="transform: rotate(180deg)"><path d="M9.3 5.3a1 1 0 0 0 0 1.4l5.29 5.3-5.3 5.3a1 1 0 1 0 1.42 1.4l6-6a1 1 0 0 0 0-1.4l-6-6a1 1 0 0 0-1.42 0Z"></path></svg>');
 u.register("check", '<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.86368 9.12226C3.82463 9.16131 3.76131 9.16131 3.72226 9.12226L0.146522 5.54652C-0.0487403 5.35126 -0.0487401 5.03468 0.146522 4.83942L0.839416 4.14652C1.03468 3.95126 1.35126 3.95126 1.54652 4.14652L3.72226 6.32226C3.76131 6.36131 3.82463 6.36131 3.86368 6.32226L10.0394 0.146522C10.2347 -0.0487398 10.5513 -0.0487399 10.7465 0.146522L11.4394 0.839416C11.6347 1.03468 11.6347 1.35126 11.4394 1.54652L3.86368 9.12226Z" fill="currentColor"/></svg>');
-class T extends HTMLElement {
+class A extends HTMLElement {
   static get observedAttributes() {
     return ["name", "width", "height"];
   }
@@ -107,23 +104,23 @@ class T extends HTMLElement {
     this.render();
   }
   render() {
-    const t = this.getAttribute("name"), e = u.get(t);
-    if (!e) {
+    const t = this.getAttribute("name"), i = u.get(t);
+    if (!i) {
       this.shadowRoot.innerHTML = '<span style="color:red;">?</span>';
       return;
     }
-    const i = document.createElement("template");
-    i.innerHTML = e.trim();
-    const n = i.content.cloneNode(!0), s = n.firstElementChild;
-    if (s && s.style) {
-      const r = this.getAttribute("width"), c = this.getAttribute("height");
-      r && s.setAttribute("width", r), c && s.setAttribute("height", c), s.style.display = "block";
+    const e = document.createElement("template");
+    e.innerHTML = i.trim();
+    const a = e.content.cloneNode(!0), n = a.firstElementChild;
+    if (n && n.style) {
+      const r = this.getAttribute("width"), l = this.getAttribute("height");
+      r && n.setAttribute("width", r), l && n.setAttribute("height", l), n.style.display = "block";
     }
-    this.shadowRoot.innerHTML = "", this.shadowRoot.appendChild(n);
+    this.shadowRoot.innerHTML = "", this.shadowRoot.appendChild(a);
   }
 }
-customElements.define("eui-icon", T);
-class $ extends HTMLElement {
+customElements.define("eui-icon", A);
+class L extends HTMLElement {
   static get observedAttributes() {
     return ["label", "value", "id", "type", "filled"];
   }
@@ -231,21 +228,23 @@ class $ extends HTMLElement {
         `;
   }
   connectedCallback() {
-    this.form = this.shadowRoot.querySelector(".form"), this.inputEl = this.shadowRoot.querySelector(".form-input"), this.labelEl = this.shadowRoot.querySelector("label"), this.hasAttribute("value") && (this.inputEl.value = this.getAttribute("value")), this.hasAttribute("id") && (this.inputEl.id = this.getAttribute("id")), this.hasAttribute("label") && (this.labelEl.textContent = this.getAttribute("label")), this.hasAttribute("type") && (this.inputEl.type = this.getAttribute("type")), this.hasAttribute("filled") && this.form.classList.add("filled"), this.inputEl.addEventListener("input", () => {
-      this.setAttribute("value", this.inputEl.value);
+    this.form = this.shadowRoot.querySelector(".form"), this.inputEl = this.shadowRoot.querySelector(".form-input"), this.labelEl = this.shadowRoot.querySelector("label"), this.hasAttribute("value") && (this.inputEl.value = this.getAttribute("value")), this.hasAttribute("id") && (this.inputEl.id = this.getAttribute("id")), this.hasAttribute("label") && (this.labelEl.textContent = this.getAttribute("label")), this.hasAttribute("type") && (this.inputEl.type = this.getAttribute("type")), this.hasAttribute("filled") && this.form.classList.add("filled"), this.inputEl.addEventListener("input", (t) => {
+      this.setAttribute("value", this.inputEl.value), this.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 }));
+    }), this.inputEl.addEventListener("change", (t) => {
+      this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 }));
     });
   }
-  attributeChangedCallback(t, e, i) {
+  attributeChangedCallback(t, i, e) {
     if (!(!this.inputEl || !this.labelEl))
       switch (t) {
         case "value":
-          this.inputEl.value !== i && (this.inputEl.value = i);
+          this.inputEl.value !== e && (this.inputEl.value = e);
           break;
         case "id":
-          this.inputEl.id = i;
+          this.inputEl.id = e;
           break;
         case "label":
-          this.labelEl.textContent = i;
+          this.labelEl.textContent = e;
           break;
       }
   }
@@ -256,8 +255,8 @@ class $ extends HTMLElement {
     this.setAttribute("value", t);
   }
 }
-customElements.define("eui-input", $);
-class R extends HTMLElement {
+customElements.define("eui-input", L);
+class S extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
             <style>
@@ -307,8 +306,8 @@ class R extends HTMLElement {
         `;
   }
 }
-customElements.define("eui-loader", R);
-class H extends HTMLElement {
+customElements.define("eui-loader", S);
+class z extends HTMLElement {
   static get observedAttributes() {
     return ["value", "intermediate", "id"];
   }
@@ -370,8 +369,8 @@ class H extends HTMLElement {
     this.hasAttribute("id") && (this.progress.id = this.getAttribute("id")), this.hasAttribute("intermediate") && t.classList.add("intermediate"), this.hasAttribute("value") && (t.style.width = this.getAttribute("value") + "%");
   }
 }
-customElements.define("eui-progressbar", H);
-const x = {
+customElements.define("eui-progressbar", z);
+const v = {
   is: {
     iPhone: /iPhone/.test(navigator.userAgent),
     iPad: /iPad/.test(navigator.userAgent),
@@ -391,80 +390,80 @@ const x = {
     haptics: "vibrate" in navigator || "Vibrate" in window || typeof window.navigator.vibrate == "function"
   },
   userAgent: navigator.userAgent
-}, J = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, Z = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  device: x
+  device: v
 }, Symbol.toStringTag, { value: "Module" }));
-function _() {
+function T() {
   try {
-    const o = document.createElement("label");
-    o.ariaHidden = "true", o.style.display = "none";
+    const s = document.createElement("label");
+    s.ariaHidden = "true", s.style.display = "none";
     const t = document.createElement("input");
-    t.type = "checkbox", t.setAttribute("switch", ""), o.appendChild(t), document.head.appendChild(o), o.click(), document.head.removeChild(o);
+    t.type = "checkbox", t.setAttribute("switch", ""), s.appendChild(t), document.head.appendChild(s), s.click(), document.head.removeChild(s);
   } catch {
   }
 }
-function w(o) {
-  x.supports.haptics ? navigator.vibrate(o || 50) : x.is.iPhone && _();
+function x(s) {
+  v.supports.haptics ? navigator.vibrate(s || 50) : v.is.iPhone && T();
 }
-const K = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const X = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  haptic: w
-}, Symbol.toStringTag, { value: "Module" })), y = (() => {
-  let o = {}, t;
+  haptic: x
+}, Symbol.toStringTag, { value: "Module" })), w = (() => {
+  let s = {}, t;
   try {
-    o = JSON.parse(localStorage.getItem(t) || "{}");
-  } catch (e) {
-    console.error(e);
+    s = JSON.parse(localStorage.getItem(t) || "{}");
+  } catch (i) {
+    console.error(i);
   }
   return {
-    get(e) {
-      return o[e];
+    get(i) {
+      return s[i];
     },
-    set(e, i) {
-      o[e] = i, localStorage.setItem(t, JSON.stringify(o));
+    set(i, e) {
+      s[i] = e, localStorage.setItem(t, JSON.stringify(s));
     },
-    delete(e) {
-      delete o[e], localStorage.setItem(t, JSON.stringify(o));
+    delete(i) {
+      delete s[i], localStorage.setItem(t, JSON.stringify(s));
     },
     all() {
-      return o;
+      return s;
     },
     clear() {
-      o = {}, localStorage.setItem(t, JSON.stringify(o));
+      s = {}, localStorage.setItem(t, JSON.stringify(s));
     },
-    name(e) {
-      t = e;
+    name(i) {
+      t = i;
       try {
-        o = JSON.parse(localStorage.getItem(t) || "{}");
-      } catch (i) {
-        console.error(i);
+        s = JSON.parse(localStorage.getItem(t) || "{}");
+      } catch (e) {
+        console.error(e);
       }
     },
     settings: {
-      get(e) {
-        return o && o.settings && o.settings[e];
+      get(i) {
+        return s && s.settings && s.settings[i];
       },
-      set(e, i) {
-        o.settings || (o.settings = {}), o.settings[e] = i, localStorage.setItem(t, JSON.stringify(o));
+      set(i, e) {
+        s.settings || (s.settings = {}), s.settings[i] = e, localStorage.setItem(t, JSON.stringify(s));
       },
-      delete(e) {
-        o.settings && (delete o.settings[e], localStorage.setItem(t, JSON.stringify(o)));
+      delete(i) {
+        s.settings && (delete s.settings[i], localStorage.setItem(t, JSON.stringify(s)));
       },
       all() {
-        return o.settings || {};
+        return s.settings || {};
       },
       clear() {
-        o.settings && (o.settings = {}, localStorage.setItem(t, JSON.stringify(o)));
+        s.settings && (s.settings = {}, localStorage.setItem(t, JSON.stringify(s)));
       }
     }
   };
-})(), k = y.settings, Y = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+})(), M = w.settings, W = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  settings: k,
-  storage: y
+  settings: M,
+  storage: w
 }, Symbol.toStringTag, { value: "Module" }));
-class F extends HTMLElement {
+class $ extends HTMLElement {
   static get observedAttributes() {
     return ["selected"];
   }
@@ -544,13 +543,13 @@ class F extends HTMLElement {
     this.inputEl = this.shadowRoot.querySelector("input"), this.switchEl = this.shadowRoot.querySelector(".switch"), this.updateFromAttribute(), this.switchEl.addEventListener("click", () => this.toggle());
   }
   toggle() {
-    this.selected = !this.selected, w();
+    this.selected = !this.selected, x(), this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 }));
   }
   updateFromAttribute() {
     const t = this.hasAttribute("selected");
     this.inputEl.checked = t, this.switchEl.classList.toggle("selected", t);
   }
-  attributeChangedCallback(t, e, i) {
+  attributeChangedCallback(t, i, e) {
     t === "selected" && this.inputEl && this.updateFromAttribute();
   }
   get selected() {
@@ -560,8 +559,8 @@ class F extends HTMLElement {
     t ? this.setAttribute("selected", "") : this.removeAttribute("selected");
   }
 }
-customElements.define("eui-switch", F);
-class I extends HTMLElement {
+customElements.define("eui-switch", $);
+class R extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
@@ -612,97 +611,97 @@ class I extends HTMLElement {
             </style>
             <slot></slot>
         `, this.addEventListener("pointerdown", (t) => {
-      const e = document.createElement("span"), i = t.currentTarget, n = Math.max(i.offsetWidth, i.offsetHeight);
-      e.classList.add("ripple"), e.style.left = t.clientX - i.getBoundingClientRect().left - n / 2 + "px", e.style.top = t.clientY - i.getBoundingClientRect().top - n / 2 + "px", e.style.width = n + "px", e.style.height = n + "px", this.shadowRoot.appendChild(e), setTimeout(() => {
-        e.remove();
+      const i = document.createElement("span"), e = t.currentTarget, a = Math.max(e.offsetWidth, e.offsetHeight);
+      i.classList.add("ripple"), i.style.left = t.clientX - e.getBoundingClientRect().left - a / 2 + "px", i.style.top = t.clientY - e.getBoundingClientRect().top - a / 2 + "px", i.style.width = a + "px", i.style.height = a + "px", this.shadowRoot.appendChild(i), setTimeout(() => {
+        i.remove();
       }, 600);
     });
   }
 }
-customElements.define("eui-chip", I);
-const m = "", C = (() => {
-  const o = [];
-  function t(a, l) {
-    const h = [], g = a.replace(/:([^/]+)/g, (b, f) => (h.push(f), "([^/]+)")).replace(/\//g, "\\/"), p = new RegExp(`^${m}${g}$`);
-    o.push({ regex: p, paramNames: h, renderFn: l });
-  }
-  function e(a) {
-    for (const { regex: l, paramNames: h, renderFn: g } of o) {
-      const p = a.match(l);
+customElements.define("eui-chip", R);
+const b = "", y = (() => {
+  const s = [];
+  function t(o, d) {
+    const h = [], g = o.replace(/:([^/]+)/g, (m, f) => (h.push(f), "([^/]+)")).replace(/\//g, "\\/"), p = new RegExp(`^${b}${g}$`);
+    s.push({ regex: p, paramNames: h, renderFn: d });
+  }
+  function i(o) {
+    for (const { regex: d, paramNames: h, renderFn: g } of s) {
+      const p = o.match(d);
       if (p) {
-        const b = {};
-        return h.forEach((f, L) => {
-          b[f] = decodeURIComponent(p[L + 1]);
-        }), { renderFn: g, params: b };
+        const m = {};
+        return h.forEach((f, C) => {
+          m[f] = decodeURIComponent(p[C + 1]);
+        }), { renderFn: g, params: m };
       }
     }
     return null;
   }
-  function i(a, l = !0) {
-    a.startsWith(m) || (a = m + (a.startsWith("/") ? "" : "/") + a);
-    const h = a.split(/[?#]/)[0];
-    if (h === window.location.pathname && a.includes("#")) {
-      l && history.pushState({}, "", a);
-      const p = "#" + a.split("#")[1];
-      n(p);
+  function e(o, d = !0) {
+    o.startsWith(b) || (o = b + (o.startsWith("/") ? "" : "/") + o);
+    const h = o.split(/[?#]/)[0];
+    if (h === window.location.pathname && o.includes("#")) {
+      d && history.pushState({}, "", o);
+      const p = "#" + o.split("#")[1];
+      a(p);
       return;
     }
-    const g = e(h);
+    const g = i(h);
     if (g)
-      if (l && history.pushState({}, "", a), g.renderFn(g.params), window.dispatchEvent(new CustomEvent("route-changed", { detail: { path: a } })), a.includes("#")) {
-        const p = "#" + a.split("#")[1];
-        setTimeout(() => n(p), 100);
+      if (d && history.pushState({}, "", o), g.renderFn(g.params), window.dispatchEvent(new CustomEvent("route-changed", { detail: { path: o } })), o.includes("#")) {
+        const p = "#" + o.split("#")[1];
+        setTimeout(() => a(p), 100);
       } else {
         const p = document.getElementById("main");
         p && p.scrollTo(0, 0);
       }
-    else s ? (l && history.pushState({}, "", a), s()) : console.warn(`No route found for ${h}`);
+    else n ? (d && history.pushState({}, "", o), n()) : console.warn(`No route found for ${h}`);
   }
-  function n(a) {
-    if (a)
+  function a(o) {
+    if (o)
       try {
-        const l = document.querySelector(a);
-        l && l.scrollIntoView({ behavior: "smooth" });
+        const d = document.querySelector(o);
+        d && d.scrollIntoView({ behavior: "smooth" });
       } catch {
-        console.warn("Invalid hash:", a);
+        console.warn("Invalid hash:", o);
       }
   }
-  let s = null;
-  function r(a) {
-    s = a;
+  let n = null;
+  function r(o) {
+    n = o;
   }
-  function c() {
+  function l() {
     history.back();
   }
-  function d() {
-    return window.location.pathname.replace(m, "") || "/";
+  function c() {
+    return window.location.pathname.replace(b, "") || "/";
   }
   return window.addEventListener("popstate", () => {
-    const a = window.location.pathname + window.location.search + window.location.hash;
-    i(a, !1);
-  }), window.addEventListener("click", (a) => {
-    if (a.button !== 0 || a.metaKey || a.altKey || a.ctrlKey || a.shiftKey) return;
-    const l = a.target.closest("a");
-    if (!l || l.hasAttribute("download") || l.getAttribute("target") === "_blank") return;
-    const h = l.getAttribute("href");
+    const o = window.location.pathname + window.location.search + window.location.hash;
+    e(o, !1);
+  }), window.addEventListener("click", (o) => {
+    if (o.button !== 0 || o.metaKey || o.altKey || o.ctrlKey || o.shiftKey) return;
+    const d = o.target.closest("a");
+    if (!d || d.hasAttribute("download") || d.getAttribute("target") === "_blank") return;
+    const h = d.getAttribute("href");
     if (!(!h || h.startsWith("http") && !h.startsWith(window.location.origin))) {
-      if (a.preventDefault(), h.startsWith("#")) {
-        history.pushState({}, "", h), n(h);
+      if (o.preventDefault(), h.startsWith("#")) {
+        history.pushState({}, "", h), a(h);
         return;
       }
-      i(h);
+      e(h);
     }
-  }), { add: t, navigate: i, back: c, location: d, setNotFound: r };
+  }), { add: t, navigate: e, back: l, location: c, setNotFound: r };
 })();
-async function G(o) {
+async function J(s) {
   try {
     const t = document.getElementById("main");
-    t.classList.add("fade-out"), await new Promise((i) => setTimeout(i, 200));
-    const e = await fetch(`/src/pages/${o}.html`).then((i) => i.text());
-    t.innerHTML = e, t.classList.remove("fade-out"), t.classList.add("fade-in"), window.location.hash ? setTimeout(() => {
+    t.classList.add("fade-out"), await new Promise((e) => setTimeout(e, 200));
+    const i = await fetch(`/src/pages/${s}.html`).then((e) => e.text());
+    t.innerHTML = i, t.classList.remove("fade-out"), t.classList.add("fade-in"), window.location.hash ? setTimeout(() => {
       try {
-        const i = document.querySelector(window.location.hash);
-        i && i.scrollIntoView({ behavior: "smooth" });
+        const e = document.querySelector(window.location.hash);
+        e && e.scrollIntoView({ behavior: "smooth" });
       } catch {
       }
     }, 100) : t && t.scrollTo(0, 0), setTimeout(() => {
@@ -712,60 +711,59 @@ async function G(o) {
     console.error("Page load failed:", t);
   }
 }
-class j extends HTMLElement {
-  constructor() {
-    super();
-    v(this, "handleClick", () => {
-      const e = this.getAttribute("path");
-      e && C.navigate(e);
-    });
-    this.attachShadow({ mode: "open" });
-  }
+class H extends HTMLElement {
   static get observedAttributes() {
     return ["path", "icon", "label", "badge", "active", "avatar-src", "avatar-name"];
   }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" });
+  }
   connectedCallback() {
     this.hasRendered || (this.render(), this.setupEventListeners(), this.hasRendered = !0), this.updateContent(), this.addEventListener("click", this.handleClick);
   }
   disconnectedCallback() {
     this.removeEventListener("click", this.handleClick);
   }
-  attributeChangedCallback(e, i, n) {
-    if (i !== n && this.hasRendered) {
-      if (e === "active")
+  attributeChangedCallback(t, i, e) {
+    if (i !== e && this.hasRendered) {
+      if (t === "active")
         return;
       this.updateContent();
     }
   }
+  handleClick = () => {
+    const t = this.getAttribute("path");
+    t && y.navigate(t);
+  };
   setupEventListeners() {
-    this.addEventListener("pointerdown", (e) => {
-      const i = document.createElement("span"), n = e.currentTarget, s = n.getBoundingClientRect(), r = Math.max(n.offsetWidth, n.offsetHeight), c = r / 2;
-      i.classList.add("ripple"), i.style.width = `${r}px`, i.style.height = `${r}px`, i.style.left = `${e.clientX - s.left - c}px`, i.style.top = `${e.clientY - s.top - c}px`, this.shadowRoot.appendChild(i), i.addEventListener("animationend", () => {
+    this.addEventListener("pointerdown", (t) => {
+      const i = document.createElement("span"), e = t.currentTarget, a = e.getBoundingClientRect(), n = Math.max(e.offsetWidth, e.offsetHeight), r = n / 2;
+      i.classList.add("ripple"), i.style.width = `${n}px`, i.style.height = `${n}px`, i.style.left = `${t.clientX - a.left - r}px`, i.style.top = `${t.clientY - a.top - r}px`, this.shadowRoot.appendChild(i), i.addEventListener("animationend", () => {
         i.remove();
       });
     });
   }
   updateContent() {
-    const e = this.getAttribute("icon"), i = this.getAttribute("avatar-src"), n = this.getAttribute("avatar-name"), s = this.getAttribute("label") || "", r = this.getAttribute("badge"), c = this.shadowRoot.querySelector(".badge");
-    if (r)
-      if (c)
-        c.textContent = r;
+    const t = this.getAttribute("icon"), i = this.getAttribute("avatar-src"), e = this.getAttribute("avatar-name"), a = this.getAttribute("label") || "", n = this.getAttribute("badge"), r = this.shadowRoot.querySelector(".badge");
+    if (n)
+      if (r)
+        r.textContent = n;
       else {
-        const l = document.createElement("span");
-        l.className = "badge", l.textContent = r, this.shadowRoot.appendChild(l);
+        const o = document.createElement("span");
+        o.className = "badge", o.textContent = n, this.shadowRoot.appendChild(o);
       }
-    else c && c.remove();
-    const d = this.shadowRoot.querySelector("slot[name='icon']");
-    if (d)
-      if (i || n) {
-        let l = '<eui-avatar size="24"';
-        n && (l += ` name="${n}"`), l += ">", i && (l += `<img src="${i}" alt="${n || "Avatar"}" />`), l += "</eui-avatar>", d.innerHTML = l;
+    else r && r.remove();
+    const l = this.shadowRoot.querySelector("slot[name='icon']");
+    if (l)
+      if (i || e) {
+        let o = '<eui-avatar size="24"';
+        e && (o += ` name="${e}"`), o += ">", i && (o += `<img src="${i}" alt="${e || "Avatar"}" />`), o += "</eui-avatar>", l.innerHTML = o;
       } else {
-        const l = d.querySelector("eui-icon");
-        e && l ? l.getAttribute("name") !== e && l.setAttribute("name", e) : e ? d.innerHTML = `<eui-icon width="24" height="24" name="${e}"></eui-icon>` : d.innerHTML = "";
+        const o = l.querySelector("eui-icon");
+        t && o ? o.getAttribute("name") !== t && o.setAttribute("name", t) : t ? l.innerHTML = `<eui-icon width="24" height="24" name="${t}"></eui-icon>` : l.innerHTML = "";
       }
-    const a = this.shadowRoot.querySelector(".label");
-    a && (a.textContent = s);
+    const c = this.shadowRoot.querySelector(".label");
+    c && (c.textContent = a);
   }
   render() {
     this.shadowRoot.innerHTML = `
@@ -876,8 +874,8 @@ class j extends HTMLElement {
         `;
   }
 }
-customElements.define("eui-nav-item", j);
-class q extends HTMLElement {
+customElements.define("eui-nav-item", H);
+class _ extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
@@ -986,11 +984,10 @@ class q extends HTMLElement {
             <a href="#content" id="skip_navigation_link">Skip To Content</a>
             <div class="nav-items">
                 ${this.navItems.map((t) => {
-      var n, s;
       if (t.type === "divider")
         return '<div style="height: 1px; background: var(--app-300); margin: 0.5rem 0;"></div>';
-      const e = ((n = t.avatar) == null ? void 0 : n.src) || "", i = ((s = t.avatar) == null ? void 0 : s.name) || "";
-      return `<eui-nav-item path="${t.path}" icon="${t.icon}" avatar-src="${e}" avatar-name="${i}" label="${t.label}"></eui-nav-item>`;
+      const i = t.avatar?.src || "", e = t.avatar?.name || "";
+      return `<eui-nav-item path="${t.path}" icon="${t.icon}" avatar-src="${i}" avatar-name="${e}" label="${t.label}"></eui-nav-item>`;
     }).join("")}
             </div>
         </div>
@@ -1003,13 +1000,13 @@ class q extends HTMLElement {
     return this._navItems || [];
   }
   updateActiveState(t) {
-    t || (t = C.location()), t.startsWith("/") || (t = "/" + t), this.shadowRoot.querySelectorAll("eui-nav-item").forEach((i) => {
-      i.getAttribute("path") === t ? i.setAttribute("active", "") : i.removeAttribute("active");
+    t || (t = y.location()), t.startsWith("/") || (t = "/" + t), this.shadowRoot.querySelectorAll("eui-nav-item").forEach((e) => {
+      e.getAttribute("path") === t ? e.setAttribute("active", "") : e.removeAttribute("active");
     });
   }
 }
-customElements.define("eui-app-nav", q);
-class B extends HTMLElement {
+customElements.define("eui-app-nav", _);
+class F extends HTMLElement {
   static get observedAttributes() {
     return ["type", "title", "subtitle", "img"];
   }
@@ -1105,13 +1102,13 @@ class B extends HTMLElement {
   connectedCallback() {
     this.hd = this.shadowRoot.querySelector(".header"), this.hasAttribute("type") && this.hd.classList.add(this.getAttribute("type"));
   }
-  attributeChangedCallback(t, e, i) {
-    const n = this.shadowRoot.querySelector("h1"), s = this.shadowRoot.querySelector("p"), r = this.shadowRoot.querySelector(".img");
-    t === "title" && (n.textContent = i), t === "subtitle" && (s.textContent = i), t === "img" && (r.style.backgroundImage = i ? `url(${i})` : "");
+  attributeChangedCallback(t, i, e) {
+    const a = this.shadowRoot.querySelector("h1"), n = this.shadowRoot.querySelector("p"), r = this.shadowRoot.querySelector(".img");
+    t === "title" && (a.textContent = e), t === "subtitle" && (n.textContent = e), t === "img" && (r.style.backgroundImage = e ? `url(${e})` : "");
   }
 }
-customElements.define("eui-header", B);
-class N extends HTMLElement {
+customElements.define("eui-header", F);
+class I extends HTMLElement {
   static get observedAttributes() {
     return ["selected"];
   }
@@ -1119,7 +1116,8 @@ class N extends HTMLElement {
     super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
             <style>
                 :host {
-                    display: block;
+                    display: inline-block;
+                    vertical-align: bottom;
                     position: relative;
                     cursor: pointer;
                     width: 24px;
@@ -1205,15 +1203,13 @@ class N extends HTMLElement {
     this.inputEl = this.shadowRoot.querySelector("input"), this.checkEl = this.shadowRoot.querySelector(".checkbox"), this.updateFromAttribute(), this.checkEl.addEventListener("click", () => this.toggle());
   }
   toggle() {
-    this.selected = !this.selected, w();
-    const t = this.selected, e = this.dataset.setting;
-    e && k.set(e, t);
+    this.selected = !this.selected, x(), this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 }));
   }
   updateFromAttribute() {
     const t = this.hasAttribute("selected");
     this.inputEl.checked = t, this.checkEl.classList.toggle("selected", t);
   }
-  attributeChangedCallback(t, e, i) {
+  attributeChangedCallback(t, i, e) {
     t === "selected" && this.inputEl && this.updateFromAttribute();
   }
   get selected() {
@@ -1223,8 +1219,9 @@ class N extends HTMLElement {
     t ? this.setAttribute("selected", "") : this.removeAttribute("selected");
   }
 }
-customElements.define("eui-checkbox", N);
-class E extends HTMLElement {
+customElements.define("eui-checkbox", I);
+class q extends HTMLElement {
+  static observedAttributes = ["type", "width", "height", "border-radius", "icon", "link", "href"];
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
@@ -1232,7 +1229,7 @@ class E extends HTMLElement {
     this.render();
   }
   render() {
-    const t = this.getAttribute("href"), e = t ? "a" : "button";
+    const t = this.getAttribute("href"), i = t ? "a" : "button";
     this.shadowRoot.innerHTML = `
             <style>
                 button, a {
@@ -1336,22 +1333,21 @@ class E extends HTMLElement {
                 }
 
             </style>
-            <${e}>
+            <${i}>
                 <slot></slot>
-            </${e}>
+            </${i}>
         `;
-    const i = this.shadowRoot.querySelector(e);
-    t && i.setAttribute("href", t), this.hasAttribute("type") && i.classList.add(this.getAttribute("type")), this.hasAttribute("icon") && i.classList.add("icon"), this.hasAttribute("width") && (i.style.width = this.getAttribute("width") + "px"), this.hasAttribute("height") && (i.style.height = this.getAttribute("height") + "px"), this.hasAttribute("border-radius") && (i.style.borderRadius = this.getAttribute("border-radius") + "px"), i.addEventListener("pointerdown", (n) => {
-      const s = document.createElement("span"), r = n.currentTarget, c = r.getBoundingClientRect(), d = Math.max(r.offsetWidth, r.offsetHeight), a = d / 2;
-      s.classList.add("ripple"), s.style.width = `${d}px`, s.style.height = `${d}px`, s.style.left = `${n.clientX - c.left - a}px`, s.style.top = `${n.clientY - c.top - a}px`, i.appendChild(s), s.addEventListener("animationend", () => {
-        s.remove();
+    const e = this.shadowRoot.querySelector(i);
+    t && e.setAttribute("href", t), this.hasAttribute("type") && e.classList.add(this.getAttribute("type")), this.hasAttribute("icon") && e.classList.add("icon"), this.hasAttribute("width") && (e.style.width = this.getAttribute("width") + "px"), this.hasAttribute("height") && (e.style.height = this.getAttribute("height") + "px"), this.hasAttribute("border-radius") && (e.style.borderRadius = this.getAttribute("border-radius") + "px"), e.addEventListener("pointerdown", (a) => {
+      const n = document.createElement("span"), r = a.currentTarget, l = r.getBoundingClientRect(), c = Math.max(r.offsetWidth, r.offsetHeight), o = c / 2;
+      n.classList.add("ripple"), n.style.width = `${c}px`, n.style.height = `${c}px`, n.style.left = `${a.clientX - l.left - o}px`, n.style.top = `${a.clientY - l.top - o}px`, e.appendChild(n), n.addEventListener("animationend", () => {
+        n.remove();
       });
     });
   }
 }
-v(E, "observedAttributes", ["type", "width", "height", "border-radius", "icon", "link", "href"]);
-customElements.define("eui-button", E);
-class O extends HTMLElement {
+customElements.define("eui-button", q);
+class j extends HTMLElement {
   static get observedAttributes() {
     return ["type", "anchor"];
   }
@@ -1423,28 +1419,28 @@ class O extends HTMLElement {
         `;
   }
 }
-customElements.define("eui-heading", O);
-function P(o) {
-  const i = Date.now() - o, n = Math.floor(i / 1e3), s = Math.floor(n / 60), r = Math.floor(s / 60), c = Math.floor(r / 24), d = Math.floor(c / 30), a = Math.floor(d / 12);
-  return a > 0 ? `${a}y` : d > 0 ? `${d}mo` : c > 0 ? `${c}d` : r > 0 ? `${r}h` : s > 0 ? `${s}m` : `${n}s`;
+customElements.define("eui-heading", j);
+function B(s) {
+  const e = Date.now() - s, a = Math.floor(e / 1e3), n = Math.floor(a / 60), r = Math.floor(n / 60), l = Math.floor(r / 24), c = Math.floor(l / 30), o = Math.floor(c / 12);
+  return o > 0 ? `${o}y` : c > 0 ? `${c}mo` : l > 0 ? `${l}d` : r > 0 ? `${r}h` : n > 0 ? `${n}m` : `${a}s`;
 }
-function V(o) {
-  const i = Date.now() - o, n = Math.floor(i / 1e3), s = Math.floor(n / 60), r = Math.floor(s / 60), c = Math.floor(r / 24), d = Math.floor(c / 30), a = Math.floor(d / 12);
-  return a > 0 ? `${a} year${a > 1 ? "s" : ""} ago` : d > 0 ? `${d} month${d > 1 ? "s" : ""} ago` : c > 0 ? `${c} day${c > 1 ? "s" : ""} ago` : r > 0 ? `${r} hour${r > 1 ? "s" : ""} ago` : s > 0 ? `${s} minute${s > 1 ? "s" : ""} ago` : `${n} second${n > 1 ? "s" : ""} ago`;
+function N(s) {
+  const e = Date.now() - s, a = Math.floor(e / 1e3), n = Math.floor(a / 60), r = Math.floor(n / 60), l = Math.floor(r / 24), c = Math.floor(l / 30), o = Math.floor(c / 12);
+  return o > 0 ? `${o} year${o > 1 ? "s" : ""} ago` : c > 0 ? `${c} month${c > 1 ? "s" : ""} ago` : l > 0 ? `${l} day${l > 1 ? "s" : ""} ago` : r > 0 ? `${r} hour${r > 1 ? "s" : ""} ago` : n > 0 ? `${n} minute${n > 1 ? "s" : ""} ago` : `${a} second${a > 1 ? "s" : ""} ago`;
 }
-function D(o) {
-  return o.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;").replace(/`/g, "&#96;").replace(/'/g, "&#39;");
+function O(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;").replace(/`/g, "&#96;").replace(/'/g, "&#39;");
 }
-function A(o) {
+function k(s) {
   const t = document.createElement("input");
-  t.value = o, document.body.appendChild(t), t.select(), document.execCommand("copy"), document.body.removeChild(t);
+  t.value = s, document.body.appendChild(t), t.select(), document.execCommand("copy"), document.body.removeChild(t);
 }
-const Q = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const K = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  copystr: A,
-  joinedAgo: V,
-  sanitize: D,
-  timeAgo: P
+  copystr: k,
+  joinedAgo: N,
+  sanitize: O,
+  timeAgo: B
 }, Symbol.toStringTag, { value: "Module" }));
 class U extends HTMLElement {
   static get observedAttributes() {
@@ -1456,11 +1452,11 @@ class U extends HTMLElement {
   connectedCallback() {
     this._isRendered || (this.render(), this._isRendered = !0);
   }
-  attributeChangedCallback(t, e, i) {
-    this._isRendered && e !== i && this.render();
+  attributeChangedCallback(t, i, e) {
+    this._isRendered && i !== e && this.render();
   }
   render() {
-    const t = this.hasAttribute("copy"), e = this.getAttribute("language") || "text";
+    const t = this.hasAttribute("copy"), i = this.getAttribute("language") || "text";
     this.shadowRoot.innerHTML = `
             <style>
             :host {
@@ -1514,39 +1510,39 @@ class U extends HTMLElement {
 
             <pre class="${t ? "g" : ""}"><code></code></pre>
         `, this.copyBtn = this.shadowRoot.querySelector(".copy"), this.codeEl = this.shadowRoot.querySelector("code");
-    const i = this._getFormattedText();
-    this.codeEl.innerHTML = this._highlight(i, e), t ? this.copyBtn.addEventListener("click", this._boundCopy) : this.copyBtn.style.display = "none";
+    const e = this._getFormattedText();
+    this.codeEl.innerHTML = this._highlight(e, i), t ? this.copyBtn.addEventListener("click", this._boundCopy) : this.copyBtn.style.display = "none";
   }
   _getFormattedText() {
-    let e = (this.querySelector("code") || this).innerHTML || "";
-    e = this._unescapeHtml(e), e = e.replace(/^\s*\n/, "").replace(/\n\s*$/, "");
-    const i = e.split(`
-`), n = i.filter((r) => r.trim()).map((r) => r.match(/^\s*/)[0].length), s = n.length ? Math.min(...n) : 0;
-    return i.map((r) => r.slice(s)).join(`
+    let i = (this.querySelector("code") || this).innerHTML || "";
+    i = this._unescapeHtml(i), i = i.replace(/^\s*\n/, "").replace(/\n\s*$/, "");
+    const e = i.split(`
+`), a = e.filter((r) => r.trim()).map((r) => r.match(/^\s*/)[0].length), n = a.length ? Math.min(...a) : 0;
+    return e.map((r) => r.slice(n)).join(`
 `);
   }
   _unescapeHtml(t) {
-    const e = document.createElement("textarea");
-    return e.innerHTML = t, e.value;
+    const i = document.createElement("textarea");
+    return i.innerHTML = t, i.value;
   }
-  _highlight(t, e) {
+  _highlight(t, i) {
     t = t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-    const i = {};
-    let n = 0;
-    function s(r, c) {
-      const d = `__TOKEN_${c}_${n++}__`;
-      return i[d] = `<span class="token ${c}">${r}</span>`, d;
+    const e = {};
+    let a = 0;
+    function n(r, l) {
+      const c = `__TOKEN_${l}_${a++}__`;
+      return e[c] = `<span class="token ${l}">${r}</span>`, c;
     }
-    return ["javascript", "js", "json", "bash", "sh", "css"].includes(e) ? (t = t.replace(/("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')/g, (r) => s(r, "string")), e === "bash" || e === "sh" ? t = t.replace(/(#.*$)/gm, (r) => s(r, "comment")) : e === "css" ? t = t.replace(/(\/\*[\s\S]*?\*\/)/g, (r) => s(r, "comment")) : t = t.replace(/(\/\/.*$|\/\*[\s\S]*?\*\/)/gm, (r) => s(r, "comment"))) : ["html", "xml"].includes(e) && (t = t.replace(/(&lt;!--[\s\S]*?--&gt;)/g, (r) => s(r, "comment")), t = t.replace(/(&lt;\/?[a-z0-9:-]+)/gi, (r) => s(r, "tag"))), e === "javascript" || e === "js" || e === "json" ? (t = t.replace(/\b(const|let|var|if|else|for|while|return|function|class|import|export|from|default|switch|case|break|continue|new|this|async|await)\b/g, '<span class="token keyword">$1</span>'), t = t.replace(/\b(true|false|null|undefined)\b/g, '<span class="token boolean">$1</span>'), t = t.replace(/\b([a-zA-Z0-9_]+)\s*(?=\()/g, '<span class="token function">$1</span>')) : e === "bash" || e === "sh" ? (t = t.replace(/\b(npm|npx|node|git|cd|ls|mkdir|rm|mv|cp|echo|cat|sudo|docker|brew|grep|curl|wget|chmod|chown|touch)\b/g, '<span class="token keyword">$1</span>'), t = t.replace(/\b(install|run|build|start|test|dev|init|clone|pull|push|commit|add|checkout|branch|merge)\b/g, '<span class="token function">$1</span>'), t = t.replace(/(\s-+[a-zA-Z0-9-]+)/g, '<span class="token attr-name">$1</span>'), t = t.replace(/(\$[A-Z0-9_]+)/g, '<span class="token number">$1</span>')) : e === "html" || e === "xml" ? (t = t.replace(/\s([a-z0-9:-]+)=/gi, (r, c) => " " + s(c, "attr-name") + "="), t = t.replace(/(".*?")/g, (r) => s(r, "attr-value")), t = t.replace(/&gt;/g, '<span class="token tag">&gt;</span>')) : e === "css" && (t = t.replace(/([a-z-]+)(?=:)/g, '<span class="token keyword">$1</span>')), Object.keys(i).reverse().forEach((r) => {
-      t = t.replace(r, i[r]);
+    return ["javascript", "js", "json", "bash", "sh", "css"].includes(i) ? (t = t.replace(/("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')/g, (r) => n(r, "string")), i === "bash" || i === "sh" ? t = t.replace(/(#.*$)/gm, (r) => n(r, "comment")) : i === "css" ? t = t.replace(/(\/\*[\s\S]*?\*\/)/g, (r) => n(r, "comment")) : t = t.replace(/(\/\/.*$|\/\*[\s\S]*?\*\/)/gm, (r) => n(r, "comment"))) : ["html", "xml"].includes(i) && (t = t.replace(/(&lt;!--[\s\S]*?--&gt;)/g, (r) => n(r, "comment")), t = t.replace(/(&lt;\/?[a-z0-9:-]+)/gi, (r) => n(r, "tag"))), i === "javascript" || i === "js" || i === "json" ? (t = t.replace(/\b(const|let|var|if|else|for|while|return|function|class|import|export|from|default|switch|case|break|continue|new|this|async|await)\b/g, '<span class="token keyword">$1</span>'), t = t.replace(/\b(true|false|null|undefined)\b/g, '<span class="token boolean">$1</span>'), t = t.replace(/\b([a-zA-Z0-9_]+)\s*(?=\()/g, '<span class="token function">$1</span>')) : i === "bash" || i === "sh" ? (t = t.replace(/\b(npm|npx|node|git|cd|ls|mkdir|rm|mv|cp|echo|cat|sudo|docker|brew|grep|curl|wget|chmod|chown|touch)\b/g, '<span class="token keyword">$1</span>'), t = t.replace(/\b(install|run|build|start|test|dev|init|clone|pull|push|commit|add|checkout|branch|merge)\b/g, '<span class="token function">$1</span>'), t = t.replace(/(\s-+[a-zA-Z0-9-]+)/g, '<span class="token attr-name">$1</span>'), t = t.replace(/(\$[A-Z0-9_]+)/g, '<span class="token number">$1</span>')) : i === "html" || i === "xml" ? (t = t.replace(/\s([a-z0-9:-]+)=/gi, (r, l) => " " + n(l, "attr-name") + "="), t = t.replace(/(".*?")/g, (r) => n(r, "attr-value")), t = t.replace(/&gt;/g, '<span class="token tag">&gt;</span>')) : i === "css" && (t = t.replace(/([a-z-]+)(?=:)/g, '<span class="token keyword">$1</span>')), Object.keys(e).reverse().forEach((r) => {
+      t = t.replace(r, e[r]);
     }), t;
   }
   _onCopy() {
-    A(this._getFormattedText());
+    k(this._getFormattedText());
     const t = this.copyBtn.querySelector("eui-icon");
     if (t) {
-      const e = t.getAttribute("name");
-      t.setAttribute("name", "check"), setTimeout(() => t.setAttribute("name", e), 2e3);
+      const i = t.getAttribute("name");
+      t.setAttribute("name", "check"), setTimeout(() => t.setAttribute("name", i), 2e3);
     }
   }
   disconnectedCallback() {
@@ -1554,7 +1550,7 @@ class U extends HTMLElement {
   }
 }
 customElements.define("eui-code", U);
-class Z extends HTMLElement {
+class P extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
@@ -1564,7 +1560,7 @@ class Z extends HTMLElement {
   static get observedAttributes() {
     return ["name"];
   }
-  attributeChangedCallback(t, e, i) {
+  attributeChangedCallback(t, i, e) {
     t === "name" && (this.render(), this.setupEventListeners());
   }
   setupEventListeners() {
@@ -1670,8 +1666,8 @@ class Z extends HTMLElement {
         `;
   }
 }
-customElements.define("eui-app-titlebar", Z);
-class X extends HTMLElement {
+customElements.define("eui-app-titlebar", P);
+class V extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" }), this._handleMouseDown = this._addRipple.bind(this);
   }
@@ -1681,16 +1677,16 @@ class X extends HTMLElement {
   static get observedAttributes() {
     return ["elevated", "interactive", "ripple"];
   }
-  attributeChangedCallback(t, e, i) {
-    e !== i && t === "ripple" && this.setupEventListeners();
+  attributeChangedCallback(t, i, e) {
+    i !== e && t === "ripple" && this.setupEventListeners();
   }
   setupEventListeners() {
     this.removeEventListener("mousedown", this._handleMouseDown), this.hasAttribute("ripple") && this.addEventListener("mousedown", this._handleMouseDown);
   }
   _addRipple(t) {
-    const e = this.getBoundingClientRect(), i = document.createElement("span"), n = Math.max(e.width, e.height), s = n / 2;
-    i.style.width = i.style.height = `${n}px`, i.style.left = `${t.clientX - e.left - s}px`, i.style.top = `${t.clientY - e.top - s}px`, i.classList.add("ripple"), this.shadowRoot.querySelector(".surface").appendChild(i), i.addEventListener("animationend", () => {
-      i.remove();
+    const i = this.getBoundingClientRect(), e = document.createElement("span"), a = Math.max(i.width, i.height), n = a / 2;
+    e.style.width = e.style.height = `${a}px`, e.style.left = `${t.clientX - i.left - n}px`, e.style.top = `${t.clientY - i.top - n}px`, e.classList.add("ripple"), this.shadowRoot.querySelector(".surface").appendChild(e), e.addEventListener("animationend", () => {
+      e.remove();
     });
   }
   render() {
@@ -1758,14 +1754,143 @@ class X extends HTMLElement {
         `;
   }
 }
-customElements.define("eui-surface", X);
+customElements.define("eui-surface", V);
+class D extends HTMLElement {
+  static get observedAttributes() {
+    return ["value", "min", "max", "step", "label"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 8px;
+                    width: 100%;
+                    max-width: 300px;
+                    margin: 0.75rem 0;
+                    user-select: none;
+                }
+
+                .header {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    color: var(--app-400, #999);
+                    font-size: 0.85rem;
+                    font-weight: 500;
+                    padding: 0 4px;
+                }
+
+                .slider-container {
+                    position: relative;
+                    height: 32px;
+                    display: flex;
+                    align-items: center;
+                }
+
+                input[type="range"] {
+                    -webkit-appearance: none;
+                    appearance: none;
+                    opacity: 0;
+                    width: 100%;
+                    height: 4px;
+                    background: var(--app-300, #333);
+                    border-radius: 3px;
+                    outline: none;
+                    margin: 0;
+                    cursor: pointer;
+                    position: relative;
+                    z-index: 1;
+                }
+
+                .track {
+                    position: absolute;
+                    height: 4px;
+                    width: 100%;
+                    background: var(--app-200, #333);
+                    border-radius: 3px;
+                    overflow: hidden;
+                    pointer-events: none;
+                    z-index: 0;
+                }
+
+                .track-fill {
+                    position: absolute;
+                    height: 4px;
+                    background: var(--app-accent, #6366f1);
+                    pointer-events: none;
+                    z-index: 0;
+                    left: 0;
+                }
+
+                .slider-thumb {
+                    position: absolute;
+                    width: 20px;
+                    height: 20px;
+                    background: var(--app-accent, #6366f1);
+                    box-shadow: inset 0 0 0 1px var(--app-500, #131318), inset 0 0 0 4px var(--app-200, #131318);
+                    border-radius: 50%;
+                    pointer-events: none;
+                    z-index: 0;
+                    left: 0;
+                }
+
+                .slider-thumb.active {
+                    background: var(--app-accent-50, #7376ff);
+                }
+
+                .value-badge {
+                    color: var(--app-text);
+                    font-weight: 600;
+                }
+            </style>
+            <div class="header">
+                <span class="label"></span>
+                <span class="value-badge"></span>
+            </div>
+            <div class="slider-container">
+            <div class="track">
+            <div class="track-fill"></div>
+            </div>
+                <div class="slider-thumb"></div>
+                <input type="range">
+            </div>
+        `;
+  }
+  connectedCallback() {
+    this.inputEl = this.shadowRoot.querySelector("input"), this.labelEl = this.shadowRoot.querySelector(".label"), this.valueEl = this.shadowRoot.querySelector(".value-badge"), this.trackFillEl = this.shadowRoot.querySelector(".track-fill"), this.sliderThumbEl = this.shadowRoot.querySelector(".slider-thumb"), this.inputEl.min = this.getAttribute("min") || 0, this.inputEl.max = this.getAttribute("max") || 100, this.inputEl.step = this.getAttribute("step") || 1, this.inputEl.value = this.getAttribute("value") || 50, this.hasAttribute("label") && (this.labelEl.textContent = this.getAttribute("label")), this.updateUI(), this.inputEl.addEventListener("input", () => {
+      this.updateValue(this.inputEl.value), this.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 }));
+    }), this.inputEl.addEventListener("change", () => {
+      this.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 }));
+    }), this.inputEl.addEventListener("mousedown", () => this.sliderThumbEl.classList.add("active")), this.inputEl.addEventListener("touchstart", () => this.sliderThumbEl.classList.add("active"), { passive: !0 }), window.addEventListener("mouseup", () => this.sliderThumbEl.classList.remove("active")), window.addEventListener("touchend", () => this.sliderThumbEl.classList.remove("active"));
+  }
+  updateValue(t) {
+    this.setAttribute("value", t), this.updateUI();
+  }
+  updateUI() {
+    if (!this.inputEl) return;
+    const t = parseFloat(this.inputEl.min), i = parseFloat(this.inputEl.max), e = parseFloat(this.inputEl.value), a = (e - t) / (i - t) * 100;
+    this.trackFillEl.style.width = `${a}%`, this.sliderThumbEl.style.left = `calc(${a}% - ${a / 100 * 20}px)`, this.valueEl.textContent = e;
+  }
+  attributeChangedCallback(t, i, e) {
+    this.inputEl && (t === "value" && e !== this.inputEl.value ? (this.inputEl.value = e, this.updateUI()) : ["min", "max", "step"].includes(t) ? (this.inputEl[t] = e, this.updateUI()) : t === "label" && (this.labelEl.textContent = e));
+  }
+  get value() {
+    return parseFloat(this.inputEl.value);
+  }
+  set value(t) {
+    this.setAttribute("value", t);
+  }
+}
+customElements.define("eui-slider", D);
 typeof window < "u" && console.log("ErisUI loaded successfully");
 export {
-  J as device,
-  K as haptics,
+  Z as device,
+  X as haptics,
   u as icons,
-  G as loadPage,
-  C as router,
-  Y as storage,
-  Q as utils
+  J as loadPage,
+  y as router,
+  W as storage,
+  K as utils
 };