@3r1s_s/erisui 1.0.19 → 1.0.20

package/dist/erisui.js

@@ -232,7 +232,7 @@
             <div class="progressbar">
                 <span class="progress"></span>
             </div>
-        `}set value(t){this.setAttribute("value",t)}attributeChangedCallback(){this.connectedCallback()}connectedCallback(){const t=this.shadowRoot.querySelector(".progress");this.hasAttribute("id")&&(t.id=this.getAttribute("id")),this.hasAttribute("intermediate")&&t.classList.add("intermediate"),this.hasAttribute("value")&&(t.style.width=this.getAttribute("value")+"%")}}customElements.define("eui-progressbar",T);const v={is:{iPhone:/iPhone/.test(navigator.userAgent),iPad:/iPad/.test(navigator.userAgent),iOS:/iPhone|iPad|iPod/.test(navigator.userAgent),android:/Android/.test(navigator.userAgent),mobile:/Mobi|Android/i.test(navigator.userAgent)},prefers:{language:navigator.language||navigator.userLanguage,reducedMotion:window.matchMedia("(prefers-reduced-motion: reduce)").matches,reducedTransparency:window.matchMedia("(prefers-reduced-transparency: reduce)").matches},supports:{share:typeof navigator.share=="function",directDownload:"download"in document.createElement("a"),haptics:"vibrate"in navigator||"Vibrate"in window||typeof window.navigator.vibrate=="function"},userAgent:navigator.userAgent},z=Object.freeze(Object.defineProperty({__proto__:null,device:v},Symbol.toStringTag,{value:"Module"}));function M(){try{const s=document.createElement("label");s.ariaHidden="true",s.style.display="none";const t=document.createElement("input");t.type="checkbox",t.setAttribute("switch",""),s.appendChild(t),document.head.appendChild(s),s.click(),document.head.removeChild(s)}catch{}}function x(s){v.supports.haptics?navigator.vibrate(s||50):v.is.iPhone&&M()}const $=Object.freeze(Object.defineProperty({__proto__:null,haptic:x},Symbol.toStringTag,{value:"Module"})),C=(()=>{let s={},t;try{s=JSON.parse(localStorage.getItem(t)||"{}")}catch(i){console.error(i)}return{get(i){return s[i]},set(i,e){s[i]=e,localStorage.setItem(t,JSON.stringify(s))},delete(i){delete s[i],localStorage.setItem(t,JSON.stringify(s))},all(){return s},clear(){s={},localStorage.setItem(t,JSON.stringify(s))},name(i){t=i;try{s=JSON.parse(localStorage.getItem(t)||"{}")}catch(e){console.error(e)}},settings:{get(i){return s&&s.settings&&s.settings[i]},set(i,e){s.settings||(s.settings={}),s.settings[i]=e,localStorage.setItem(t,JSON.stringify(s))},delete(i){s.settings&&(delete s.settings[i],localStorage.setItem(t,JSON.stringify(s)))},all(){return s.settings||{}},clear(){s.settings&&(s.settings={},localStorage.setItem(t,JSON.stringify(s)))}}}})(),R=C.settings,H=Object.freeze(Object.defineProperty({__proto__:null,settings:R,storage:C},Symbol.toStringTag,{value:"Module"}));class _ extends HTMLElement{static get observedAttributes(){return["selected"]}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
+        `}set value(t){this.setAttribute("value",t)}set intermediate(t){t?this.setAttribute("intermediate",""):this.removeAttribute("intermediate")}set id(t){this.setAttribute("id",t)}get intermediate(){return this.hasAttribute("intermediate")}get value(){return this.getAttribute("value")}attributeChangedCallback(){this.connectedCallback()}connectedCallback(){const t=this.shadowRoot.querySelector(".progress");this.hasAttribute("id")&&(t.id=this.getAttribute("id")),this.hasAttribute("intermediate")?t.classList.add("intermediate"):t.classList.remove("intermediate"),this.hasAttribute("value")&&(t.style.width=this.getAttribute("value")+"%")}}customElements.define("eui-progressbar",T);const v={is:{iPhone:/iPhone/.test(navigator.userAgent),iPad:/iPad/.test(navigator.userAgent),iOS:/iPhone|iPad|iPod/.test(navigator.userAgent),android:/Android/.test(navigator.userAgent),mobile:/Mobi|Android/i.test(navigator.userAgent)},prefers:{language:navigator.language||navigator.userLanguage,reducedMotion:window.matchMedia("(prefers-reduced-motion: reduce)").matches,reducedTransparency:window.matchMedia("(prefers-reduced-transparency: reduce)").matches},supports:{share:typeof navigator.share=="function",directDownload:"download"in document.createElement("a"),haptics:"vibrate"in navigator||"Vibrate"in window||typeof window.navigator.vibrate=="function"},userAgent:navigator.userAgent},z=Object.freeze(Object.defineProperty({__proto__:null,device:v},Symbol.toStringTag,{value:"Module"}));function M(){try{const s=document.createElement("label");s.ariaHidden="true",s.style.display="none";const t=document.createElement("input");t.type="checkbox",t.setAttribute("switch",""),s.appendChild(t),document.head.appendChild(s),s.click(),document.head.removeChild(s)}catch{}}function x(s){v.supports.haptics?navigator.vibrate(s||50):v.is.iPhone&&M()}const $=Object.freeze(Object.defineProperty({__proto__:null,haptic:x},Symbol.toStringTag,{value:"Module"})),C=(()=>{let s={},t;try{s=JSON.parse(localStorage.getItem(t)||"{}")}catch(i){console.error(i)}return{get(i){return s[i]},set(i,e){s[i]=e,localStorage.setItem(t,JSON.stringify(s))},delete(i){delete s[i],localStorage.setItem(t,JSON.stringify(s))},all(){return s},clear(){s={},localStorage.setItem(t,JSON.stringify(s))},name(i){t=i;try{s=JSON.parse(localStorage.getItem(t)||"{}")}catch(e){console.error(e)}},settings:{get(i){return s&&s.settings&&s.settings[i]},set(i,e){s.settings||(s.settings={}),s.settings[i]=e,localStorage.setItem(t,JSON.stringify(s))},delete(i){s.settings&&(delete s.settings[i],localStorage.setItem(t,JSON.stringify(s)))},all(){return s.settings||{}},clear(){s.settings&&(s.settings={},localStorage.setItem(t,JSON.stringify(s)))}}}})(),R=C.settings,H=Object.freeze(Object.defineProperty({__proto__:null,settings:R,storage:C},Symbol.toStringTag,{value:"Module"}));class _ extends HTMLElement{static get observedAttributes(){return["selected"]}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
             <style>
                 .switch {
                     background-color: var(--app-200);

package/dist/erisui.mjs

@@ -64,8 +64,8 @@ class E extends HTMLElement {
     }
     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();
+      let o = "";
+      a.length === 1 ? o = a[0][0] || "" : o = (a[0][0] || "") + (a[a.length - 1][0] || ""), this.initials.textContent = o.toUpperCase();
     }
   }
 }
@@ -111,10 +111,10 @@ class A extends HTMLElement {
     }
     const e = document.createElement("template");
     e.innerHTML = i.trim();
-    const a = e.content.cloneNode(!0), n = a.firstElementChild;
-    if (n && n.style) {
+    const a = e.content.cloneNode(!0), o = a.firstElementChild;
+    if (o && o.style) {
       const r = this.getAttribute("width"), l = this.getAttribute("height");
-      r && n.setAttribute("width", r), l && n.setAttribute("height", l), n.style.display = "block";
+      r && o.setAttribute("width", r), l && o.setAttribute("height", l), o.style.display = "block";
     }
     this.shadowRoot.innerHTML = "", this.shadowRoot.appendChild(a);
   }
@@ -361,12 +361,24 @@ class z extends HTMLElement {
   set value(t) {
     this.setAttribute("value", t);
   }
+  set intermediate(t) {
+    t ? this.setAttribute("intermediate", "") : this.removeAttribute("intermediate");
+  }
+  set id(t) {
+    this.setAttribute("id", t);
+  }
+  get intermediate() {
+    return this.hasAttribute("intermediate");
+  }
+  get value() {
+    return this.getAttribute("value");
+  }
   attributeChangedCallback() {
     this.connectedCallback();
   }
   connectedCallback() {
     const t = this.shadowRoot.querySelector(".progress");
-    this.hasAttribute("id") && (t.id = this.getAttribute("id")), this.hasAttribute("intermediate") && t.classList.add("intermediate"), this.hasAttribute("value") && (t.style.width = this.getAttribute("value") + "%");
+    this.hasAttribute("id") && (t.id = this.getAttribute("id")), this.hasAttribute("intermediate") ? t.classList.add("intermediate") : t.classList.remove("intermediate"), this.hasAttribute("value") && (t.style.width = this.getAttribute("value") + "%");
   }
 }
 customElements.define("eui-progressbar", z);
@@ -621,13 +633,13 @@ class R extends HTMLElement {
 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}$`);
+  function t(n, d) {
+    const h = [], g = n.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) {
+  function i(n) {
     for (const { regex: d, paramNames: h, renderFn: g } of s) {
-      const p = o.match(d);
+      const p = n.match(d);
       if (p) {
         const m = {};
         return h.forEach((f, C) => {
@@ -637,38 +649,38 @@ const b = "", y = (() => {
     }
     return null;
   }
-  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];
+  function e(n, d = !0) {
+    n.startsWith(b) || (n = b + (n.startsWith("/") ? "" : "/") + n);
+    const h = n.split(/[?#]/)[0];
+    if (h === window.location.pathname && n.includes("#")) {
+      d && history.pushState({}, "", n);
+      const p = "#" + n.split("#")[1];
       a(p);
       return;
     }
     const g = i(h);
     if (g)
-      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];
+      if (d && history.pushState({}, "", n), g.renderFn(g.params), window.dispatchEvent(new CustomEvent("route-changed", { detail: { path: n } })), n.includes("#")) {
+        const p = "#" + n.split("#")[1];
         setTimeout(() => a(p), 100);
       } else {
         const p = document.getElementById("main");
         p && p.scrollTo(0, 0);
       }
-    else n ? (d && history.pushState({}, "", o), n()) : console.warn(`No route found for ${h}`);
+    else o ? (d && history.pushState({}, "", n), o()) : console.warn(`No route found for ${h}`);
   }
-  function a(o) {
-    if (o)
+  function a(n) {
+    if (n)
       try {
-        const d = document.querySelector(o);
+        const d = document.querySelector(n);
         d && d.scrollIntoView({ behavior: "smooth" });
       } catch {
-        console.warn("Invalid hash:", o);
+        console.warn("Invalid hash:", n);
       }
   }
-  let n = null;
-  function r(o) {
-    n = o;
+  let o = null;
+  function r(n) {
+    o = n;
   }
   function l() {
     history.back();
@@ -677,15 +689,15 @@ const b = "", y = (() => {
     return window.location.pathname.replace(b, "") || "/";
   }
   return window.addEventListener("popstate", () => {
-    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");
+    const n = window.location.pathname + window.location.search + window.location.hash;
+    e(n, !1);
+  }), window.addEventListener("click", (n) => {
+    if (n.button !== 0 || n.metaKey || n.altKey || n.ctrlKey || n.shiftKey) return;
+    const d = n.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 (o.preventDefault(), h.startsWith("#")) {
+      if (n.preventDefault(), h.startsWith("#")) {
         history.pushState({}, "", h), a(h);
         return;
       }
@@ -737,30 +749,30 @@ class H extends HTMLElement {
   };
   setupEventListeners() {
     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", () => {
+      const i = document.createElement("span"), e = t.currentTarget, a = e.getBoundingClientRect(), o = Math.max(e.offsetWidth, e.offsetHeight), r = o / 2;
+      i.classList.add("ripple"), i.style.width = `${o}px`, i.style.height = `${o}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 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)
+    const t = this.getAttribute("icon"), i = this.getAttribute("avatar-src"), e = this.getAttribute("avatar-name"), a = this.getAttribute("label") || "", o = this.getAttribute("badge"), r = this.shadowRoot.querySelector(".badge");
+    if (o)
       if (r)
-        r.textContent = n;
+        r.textContent = o;
       else {
-        const o = document.createElement("span");
-        o.className = "badge", o.textContent = n, this.shadowRoot.appendChild(o);
+        const n = document.createElement("span");
+        n.className = "badge", n.textContent = o, this.shadowRoot.appendChild(n);
       }
     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;
+        let n = '<eui-avatar size="24"';
+        e && (n += ` name="${e}"`), n += ">", i && (n += `<img src="${i}" alt="${e || "Avatar"}" />`), n += "</eui-avatar>", l.innerHTML = n;
       } else {
-        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 n = l.querySelector("eui-icon");
+        t && n ? n.getAttribute("name") !== t && n.setAttribute("name", t) : t ? l.innerHTML = `<eui-icon width="24" height="24" name="${t}"></eui-icon>` : l.innerHTML = "";
       }
     const c = this.shadowRoot.querySelector(".label");
     c && (c.textContent = a);
@@ -1103,8 +1115,8 @@ class F extends HTMLElement {
     this.hd = this.shadowRoot.querySelector(".header"), this.hasAttribute("type") && this.hd.classList.add(this.getAttribute("type"));
   }
   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})` : "");
+    const a = this.shadowRoot.querySelector("h1"), o = this.shadowRoot.querySelector("p"), r = this.shadowRoot.querySelector(".img");
+    t === "title" && (a.textContent = e), t === "subtitle" && (o.textContent = e), t === "img" && (r.style.backgroundImage = e ? `url(${e})` : "");
   }
 }
 customElements.define("eui-header", F);
@@ -1339,9 +1351,9 @@ class q extends HTMLElement {
         `;
     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();
+      const o = document.createElement("span"), r = a.currentTarget, l = r.getBoundingClientRect(), c = Math.max(r.offsetWidth, r.offsetHeight), n = c / 2;
+      o.classList.add("ripple"), o.style.width = `${c}px`, o.style.height = `${c}px`, o.style.left = `${a.clientX - l.left - n}px`, o.style.top = `${a.clientY - l.top - n}px`, e.appendChild(o), o.addEventListener("animationend", () => {
+        o.remove();
       });
     });
   }
@@ -1421,12 +1433,12 @@ class j extends HTMLElement {
 }
 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`;
+  const e = Date.now() - s, a = Math.floor(e / 1e3), o = Math.floor(a / 60), r = Math.floor(o / 60), l = Math.floor(r / 24), c = Math.floor(l / 30), n = Math.floor(c / 12);
+  return n > 0 ? `${n}y` : c > 0 ? `${c}mo` : l > 0 ? `${l}d` : r > 0 ? `${r}h` : o > 0 ? `${o}m` : `${a}s`;
 }
 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`;
+  const e = Date.now() - s, a = Math.floor(e / 1e3), o = Math.floor(a / 60), r = Math.floor(o / 60), l = Math.floor(r / 24), c = Math.floor(l / 30), n = Math.floor(c / 12);
+  return n > 0 ? `${n} year${n > 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` : o > 0 ? `${o} minute${o > 1 ? "s" : ""} ago` : `${a} second${a > 1 ? "s" : ""} ago`;
 }
 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;");
@@ -1517,8 +1529,8 @@ class U extends HTMLElement {
     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(`
+`), a = e.filter((r) => r.trim()).map((r) => r.match(/^\s*/)[0].length), o = a.length ? Math.min(...a) : 0;
+    return e.map((r) => r.slice(o)).join(`
 `);
   }
   _unescapeHtml(t) {
@@ -1529,11 +1541,11 @@ class U extends HTMLElement {
     t = t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
     const e = {};
     let a = 0;
-    function n(r, l) {
+    function o(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(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) => {
+    return ["javascript", "js", "json", "bash", "sh", "css"].includes(i) ? (t = t.replace(/("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')/g, (r) => o(r, "string")), i === "bash" || i === "sh" ? t = t.replace(/(#.*$)/gm, (r) => o(r, "comment")) : i === "css" ? t = t.replace(/(\/\*[\s\S]*?\*\/)/g, (r) => o(r, "comment")) : t = t.replace(/(\/\/.*$|\/\*[\s\S]*?\*\/)/gm, (r) => o(r, "comment"))) : ["html", "xml"].includes(i) && (t = t.replace(/(&lt;!--[\s\S]*?--&gt;)/g, (r) => o(r, "comment")), t = t.replace(/(&lt;\/?[a-z0-9:-]+)/gi, (r) => o(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) => " " + o(l, "attr-name") + "="), t = t.replace(/(".*?")/g, (r) => o(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;
   }
@@ -1684,8 +1696,8 @@ class V extends HTMLElement {
     this.removeEventListener("mousedown", this._handleMouseDown), this.hasAttribute("ripple") && this.addEventListener("mousedown", this._handleMouseDown);
   }
   _addRipple(t) {
-    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", () => {
+    const i = this.getBoundingClientRect(), e = document.createElement("span"), a = Math.max(i.width, i.height), o = a / 2;
+    e.style.width = e.style.height = `${a}px`, e.style.left = `${t.clientX - i.left - o}px`, e.style.top = `${t.clientY - i.top - o}px`, e.classList.add("ripple"), this.shadowRoot.querySelector(".surface").appendChild(e), e.addEventListener("animationend", () => {
       e.remove();
     });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3r1s_s/erisui",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "description": "an awesome ui library for web apps",
   "type": "module",
   "files": [