@3r1s_s/erisui 1.0.15 → 1.0.16

package/dist/erisui.js

@@ -43,7 +43,7 @@
                 <slot></slot>
                 <span id="initials"></span>
             </div>
-        `}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")}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"}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 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);const u=(()=>{let o={};return{register(t,e){o[t]=e},get(t){return o[t]||""}}})();u.register("menu",'<svg width="24" height="24" viewBox="0 0 24 24" focusable="false"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="currentColor"></path></svg>'),u.register("home",'<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.5258 0.204649C11.2291 -0.0682165 10.7709 -0.0682161 10.4742 0.204649L0.249923 9.68588C-0.266994 10.1612 0.0714693 11.0197 0.775759 11.0197L3.48971 11.0197V18.6923C3.48971 19.542 4.18295 20.2308 5.03811 20.2308H16.9619C17.8171 20.2308 18.5103 19.542 18.5103 18.6923V11.0197L21.2242 11.0197C21.9285 11.0197 22.267 10.1612 21.7501 9.68588L11.5258 0.204649Z" fill="currentColor"/></svg>'),u.register("kit",'<svg width="26" height="28" viewBox="0 0 26 28" xmlns="http://www.w3.org/2000/svg"><path d="m13.118 14.831c0.433 0 1.257-0.024 1.795-0.344l9.151-4.057c0.869-0.59 1.051-1.255 1.067-1.773 0.02-0.662-0.313-1.634-1.181-2.15l-8.515-3.921c-0.537-0.309-2.096-0.552-2.529-0.552-0.444 0-1.958 0.42-2.496 0.73l-8.643 4.034c-0.85 0.602-1.022 1.284-0.951 1.942 0.098 0.887 0.206 0.857 0.889 1.503l9.577 4.212c0.537 0.32 1.391 0.376 1.836 0.376zm-0.12 5.467c0.403 0 1.443-0.068 1.928-0.345l8.858-3.991c0.497-0.3 1.448-1.117 1.382-1.952-0.091-1.138-0.598-1.7-0.948-1.906l-9.22 3.888c-0.454 0.261-1.417 0.478-1.916 0.478-0.542 0-1.539-0.228-1.766-0.362l-9.395-4.012c-0.462 0.022-1.174 0.911-1.201 1.642-0.03 0.761 0.7 1.62 1.135 1.839l9.408 4.384c0.485 0.278 1.322 0.337 1.735 0.337zm0.09 5.344c0.403 0 1.296-0.053 1.781-0.342l9.147-4.299c0.485-0.289 1.129-0.789 1.053-1.879-0.056-0.794-0.071-1.123-0.918-1.765l-9.203 4.113c-0.228 0.134-0.948 0.39-1.853 0.39-0.939 0-1.603-0.224-1.831-0.359l-9.451-4.017c-0.979 0.247-1.005 1.45-1.005 1.947 0 0.455 0.403 1.279 0.9 1.568l9.465 4.262c0.486 0.29 1.502 0.381 1.915 0.381z" fill="currentColor"></path></svg>'),u.register("settings",'<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.644169 15.2044C0.751639 15.4175 0.866389 15.627 0.988219 15.8323C1.34503 16.445 1.76284 17.0223 2.23048 17.545C2.3967 17.7307 2.65856 17.7968 2.89375 17.7126L5.25826 16.8621C5.96645 16.608 6.74841 17.07 6.87902 17.8018L7.32018 20.2764C7.36418 20.5227 7.55119 20.7167 7.79454 20.7688C8.86201 20.9976 9.95753 21.057 11.0418 20.9452C11.427 20.9061 11.8095 20.8457 12.1863 20.7643C12.375 20.7232 12.5303 20.5969 12.6121 20.4275C12.6441 20.37 12.6671 20.3068 12.6794 20.2397L13.132 17.7739C13.1978 17.4162 13.4191 17.1252 13.7102 16.9498C13.7478 16.9275 13.7867 16.9072 13.8264 16.8889C14.1041 16.7654 14.426 16.7408 14.7301 16.8496L17.0889 17.6938C17.2068 17.7362 17.3318 17.7406 17.4482 17.7107C17.5805 17.6872 17.7044 17.6208 17.7983 17.5172C18.2857 16.9783 18.7189 16.3833 19.0875 15.7497C19.4503 15.1137 19.748 14.4403 19.9703 13.7471C20.0128 13.6142 20.0083 13.4742 19.9629 13.3481C19.9307 13.2315 19.8646 13.1245 19.7685 13.043L17.8596 11.4179C17.6114 11.2067 17.4714 10.912 17.4409 10.6065C17.4371 10.563 17.4355 10.5194 17.4361 10.4758C17.444 10.1379 17.5847 9.80337 17.8591 9.56905L19.7638 7.94348C19.8146 7.90007 19.857 7.84958 19.8904 7.7944C19.9978 7.63842 20.0299 7.43844 19.9706 7.25291C19.8534 6.88733 19.7151 6.52704 19.5572 6.17466C19.1114 5.17572 18.5115 4.2528 17.7787 3.43934C17.612 3.25429 17.3509 3.18886 17.1161 3.27382L14.7569 4.12827C14.0592 4.38082 13.2679 3.93321 13.1344 3.19155L12.6871 0.714256C12.6423 0.468053 12.4542 0.273849 12.2106 0.22246C11.5182 0.0764882 10.803 0.00250031 10.088 0.000608251C9.88769 -0.0015584 9.68739 0.002064 9.48735 0.0114648C8.92415 0.0369819 8.36389 0.107332 7.81778 0.222459C7.78135 0.230146 7.74615 0.241028 7.71249 0.2548C7.5098 0.328781 7.35888 0.505679 7.31996 0.723547L6.8788 3.19817C6.81394 3.56157 6.58834 3.85866 6.29097 4.03446C5.98991 4.2061 5.61923 4.25412 5.27153 4.12827L2.91237 3.27382C2.70694 3.1995 2.48138 3.24016 2.31657 3.37545C2.2857 3.39886 2.25676 3.42543 2.23026 3.45505C1.81793 3.91588 1.44433 4.4192 1.11714 4.95183C1.05788 5.04799 1.00019 5.14513 0.944072 5.24319C0.878302 5.35619 0.814661 5.4704 0.753186 5.58577C0.464267 6.12611 0.222113 6.69081 0.0338354 7.26739C0.0213426 7.30567 0.0127871 7.34455 0.00802709 7.38352C-0.0257478 7.59364 0.0518458 7.809 0.218337 7.94974L2.13633 9.56992C2.41146 9.80242 2.55518 10.1364 2.56469 10.4743C2.56917 10.8294 2.42529 11.1857 2.13611 11.4301L0.218115 13.0503C0.0484589 13.1937 -0.0289685 13.4145 0.00982709 13.6284C0.0147983 13.6634 0.0228404 13.6982 0.0340542 13.7326C0.198098 14.235 0.403035 14.7283 0.644169 15.2044ZM10 14.5C12.2091 14.5 14 12.7091 14 10.5C14 8.29086 12.2091 6.5 10 6.5C7.79086 6.5 6 8.29086 6 10.5C6 12.7091 7.79086 14.5 10 14.5Z" fill="currentColor"></path></svg>'),u.register("home",'<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.5258 0.204649C11.2291 -0.0682165 10.7709 -0.0682161 10.4742 0.204649L0.249923 9.68588C-0.266994 10.1612 0.0714693 11.0197 0.775759 11.0197L3.48971 11.0197V18.6923C3.48971 19.542 4.18295 20.2308 5.03811 20.2308H16.9619C17.8171 20.2308 18.5103 19.542 18.5103 18.6923V11.0197L21.2242 11.0197C21.9285 11.0197 22.267 10.1612 21.7501 9.68588L11.5258 0.204649Z" fill="currentColor"/></svg>'),u.register("copy",'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 11C2 11.7956 2.31607 12.5587 2.87868 13.1213C3.44129 13.6839 4.20435 14 5 14H11C11.7956 14 12.5587 13.6839 13.1213 13.1213C13.6839 12.5587 14 11.7956 14 11V8H11.75C10.7554 8 9.80161 7.60491 9.09835 6.90165C8.39509 6.19839 8 5.24456 8 4.25V2H5C4.20435 2 3.44129 2.31607 2.87868 2.87868C2.31607 3.44129 2 4.20435 2 5V11Z" fill="currentColor"/><path d="M13.7975 6.49965C13.6881 6.25457 13.5357 6.03105 13.3475 5.83965L10.16 2.65965C9.96921 2.4688 9.74565 2.31384 9.5 2.20215V4.24965C9.5 4.54512 9.5582 4.8377 9.67127 5.11069C9.78434 5.38367 9.95008 5.63171 10.159 5.84064C10.3679 6.04957 10.616 6.2153 10.889 6.32838C11.1619 6.44145 11.4545 6.49965 11.75 6.49965H13.7975Z" fill="currentColor"/></svg>'),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 A extends HTMLElement{static get observedAttributes(){return["name","width","height"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}render(){const t=this.getAttribute("name"),e=u.get(t);if(!e){this.shadowRoot.innerHTML='<span style="color:red;">?</span>';return}const i=document.createElement("template");i.innerHTML=e.trim();const a=i.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(a)}}customElements.define("eui-icon",A);class L extends HTMLElement{static get observedAttributes(){return["label","value","id","type","filled"]}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
+        `}connectedCallback(){this.avatar=this.shadowRoot.querySelector(".avatar"),this.initials=this.shadowRoot.querySelector("#initials");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 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")),!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);const u=(()=>{let s={};return{register(t,i){s[t]=i},get(t){return s[t]||""}}})();u.register("menu",'<svg width="24" height="24" viewBox="0 0 24 24" focusable="false"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="currentColor"></path></svg>'),u.register("home",'<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.5258 0.204649C11.2291 -0.0682165 10.7709 -0.0682161 10.4742 0.204649L0.249923 9.68588C-0.266994 10.1612 0.0714693 11.0197 0.775759 11.0197L3.48971 11.0197V18.6923C3.48971 19.542 4.18295 20.2308 5.03811 20.2308H16.9619C17.8171 20.2308 18.5103 19.542 18.5103 18.6923V11.0197L21.2242 11.0197C21.9285 11.0197 22.267 10.1612 21.7501 9.68588L11.5258 0.204649Z" fill="currentColor"/></svg>'),u.register("kit",'<svg width="26" height="28" viewBox="0 0 26 28" xmlns="http://www.w3.org/2000/svg"><path d="m13.118 14.831c0.433 0 1.257-0.024 1.795-0.344l9.151-4.057c0.869-0.59 1.051-1.255 1.067-1.773 0.02-0.662-0.313-1.634-1.181-2.15l-8.515-3.921c-0.537-0.309-2.096-0.552-2.529-0.552-0.444 0-1.958 0.42-2.496 0.73l-8.643 4.034c-0.85 0.602-1.022 1.284-0.951 1.942 0.098 0.887 0.206 0.857 0.889 1.503l9.577 4.212c0.537 0.32 1.391 0.376 1.836 0.376zm-0.12 5.467c0.403 0 1.443-0.068 1.928-0.345l8.858-3.991c0.497-0.3 1.448-1.117 1.382-1.952-0.091-1.138-0.598-1.7-0.948-1.906l-9.22 3.888c-0.454 0.261-1.417 0.478-1.916 0.478-0.542 0-1.539-0.228-1.766-0.362l-9.395-4.012c-0.462 0.022-1.174 0.911-1.201 1.642-0.03 0.761 0.7 1.62 1.135 1.839l9.408 4.384c0.485 0.278 1.322 0.337 1.735 0.337zm0.09 5.344c0.403 0 1.296-0.053 1.781-0.342l9.147-4.299c0.485-0.289 1.129-0.789 1.053-1.879-0.056-0.794-0.071-1.123-0.918-1.765l-9.203 4.113c-0.228 0.134-0.948 0.39-1.853 0.39-0.939 0-1.603-0.224-1.831-0.359l-9.451-4.017c-0.979 0.247-1.005 1.45-1.005 1.947 0 0.455 0.403 1.279 0.9 1.568l9.465 4.262c0.486 0.29 1.502 0.381 1.915 0.381z" fill="currentColor"></path></svg>'),u.register("settings",'<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.644169 15.2044C0.751639 15.4175 0.866389 15.627 0.988219 15.8323C1.34503 16.445 1.76284 17.0223 2.23048 17.545C2.3967 17.7307 2.65856 17.7968 2.89375 17.7126L5.25826 16.8621C5.96645 16.608 6.74841 17.07 6.87902 17.8018L7.32018 20.2764C7.36418 20.5227 7.55119 20.7167 7.79454 20.7688C8.86201 20.9976 9.95753 21.057 11.0418 20.9452C11.427 20.9061 11.8095 20.8457 12.1863 20.7643C12.375 20.7232 12.5303 20.5969 12.6121 20.4275C12.6441 20.37 12.6671 20.3068 12.6794 20.2397L13.132 17.7739C13.1978 17.4162 13.4191 17.1252 13.7102 16.9498C13.7478 16.9275 13.7867 16.9072 13.8264 16.8889C14.1041 16.7654 14.426 16.7408 14.7301 16.8496L17.0889 17.6938C17.2068 17.7362 17.3318 17.7406 17.4482 17.7107C17.5805 17.6872 17.7044 17.6208 17.7983 17.5172C18.2857 16.9783 18.7189 16.3833 19.0875 15.7497C19.4503 15.1137 19.748 14.4403 19.9703 13.7471C20.0128 13.6142 20.0083 13.4742 19.9629 13.3481C19.9307 13.2315 19.8646 13.1245 19.7685 13.043L17.8596 11.4179C17.6114 11.2067 17.4714 10.912 17.4409 10.6065C17.4371 10.563 17.4355 10.5194 17.4361 10.4758C17.444 10.1379 17.5847 9.80337 17.8591 9.56905L19.7638 7.94348C19.8146 7.90007 19.857 7.84958 19.8904 7.7944C19.9978 7.63842 20.0299 7.43844 19.9706 7.25291C19.8534 6.88733 19.7151 6.52704 19.5572 6.17466C19.1114 5.17572 18.5115 4.2528 17.7787 3.43934C17.612 3.25429 17.3509 3.18886 17.1161 3.27382L14.7569 4.12827C14.0592 4.38082 13.2679 3.93321 13.1344 3.19155L12.6871 0.714256C12.6423 0.468053 12.4542 0.273849 12.2106 0.22246C11.5182 0.0764882 10.803 0.00250031 10.088 0.000608251C9.88769 -0.0015584 9.68739 0.002064 9.48735 0.0114648C8.92415 0.0369819 8.36389 0.107332 7.81778 0.222459C7.78135 0.230146 7.74615 0.241028 7.71249 0.2548C7.5098 0.328781 7.35888 0.505679 7.31996 0.723547L6.8788 3.19817C6.81394 3.56157 6.58834 3.85866 6.29097 4.03446C5.98991 4.2061 5.61923 4.25412 5.27153 4.12827L2.91237 3.27382C2.70694 3.1995 2.48138 3.24016 2.31657 3.37545C2.2857 3.39886 2.25676 3.42543 2.23026 3.45505C1.81793 3.91588 1.44433 4.4192 1.11714 4.95183C1.05788 5.04799 1.00019 5.14513 0.944072 5.24319C0.878302 5.35619 0.814661 5.4704 0.753186 5.58577C0.464267 6.12611 0.222113 6.69081 0.0338354 7.26739C0.0213426 7.30567 0.0127871 7.34455 0.00802709 7.38352C-0.0257478 7.59364 0.0518458 7.809 0.218337 7.94974L2.13633 9.56992C2.41146 9.80242 2.55518 10.1364 2.56469 10.4743C2.56917 10.8294 2.42529 11.1857 2.13611 11.4301L0.218115 13.0503C0.0484589 13.1937 -0.0289685 13.4145 0.00982709 13.6284C0.0147983 13.6634 0.0228404 13.6982 0.0340542 13.7326C0.198098 14.235 0.403035 14.7283 0.644169 15.2044ZM10 14.5C12.2091 14.5 14 12.7091 14 10.5C14 8.29086 12.2091 6.5 10 6.5C7.79086 6.5 6 8.29086 6 10.5C6 12.7091 7.79086 14.5 10 14.5Z" fill="currentColor"></path></svg>'),u.register("home",'<svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.5258 0.204649C11.2291 -0.0682165 10.7709 -0.0682161 10.4742 0.204649L0.249923 9.68588C-0.266994 10.1612 0.0714693 11.0197 0.775759 11.0197L3.48971 11.0197V18.6923C3.48971 19.542 4.18295 20.2308 5.03811 20.2308H16.9619C17.8171 20.2308 18.5103 19.542 18.5103 18.6923V11.0197L21.2242 11.0197C21.9285 11.0197 22.267 10.1612 21.7501 9.68588L11.5258 0.204649Z" fill="currentColor"/></svg>'),u.register("copy",'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 11C2 11.7956 2.31607 12.5587 2.87868 13.1213C3.44129 13.6839 4.20435 14 5 14H11C11.7956 14 12.5587 13.6839 13.1213 13.1213C13.6839 12.5587 14 11.7956 14 11V8H11.75C10.7554 8 9.80161 7.60491 9.09835 6.90165C8.39509 6.19839 8 5.24456 8 4.25V2H5C4.20435 2 3.44129 2.31607 2.87868 2.87868C2.31607 3.44129 2 4.20435 2 5V11Z" fill="currentColor"/><path d="M13.7975 6.49965C13.6881 6.25457 13.5357 6.03105 13.3475 5.83965L10.16 2.65965C9.96921 2.4688 9.74565 2.31384 9.5 2.20215V4.24965C9.5 4.54512 9.5582 4.8377 9.67127 5.11069C9.78434 5.38367 9.95008 5.63171 10.159 5.84064C10.3679 6.04957 10.616 6.2153 10.889 6.32838C11.1619 6.44145 11.4545 6.49965 11.75 6.49965H13.7975Z" fill="currentColor"/></svg>'),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 A extends HTMLElement{static get observedAttributes(){return["name","width","height"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}attributeChangedCallback(){this.render()}render(){const t=this.getAttribute("name"),i=u.get(t);if(!i){this.shadowRoot.innerHTML='<span style="color:red;">?</span>';return}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(a)}}customElements.define("eui-icon",A);class L extends HTMLElement{static get observedAttributes(){return["label","value","id","type","filled"]}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
             <style>
                 .form {
                     display: flex;
@@ -143,7 +143,7 @@
                 <input class="form-input" placeholder=" ">
                 <label></label>
             </div>
-        `}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",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){if(!(!this.inputEl||!this.labelEl))switch(t){case"value":this.inputEl.value!==i&&(this.inputEl.value=i);break;case"id":this.inputEl.id=i;break;case"label":this.labelEl.textContent=i;break}}get value(){return this.inputEl.value}set value(t){this.setAttribute("value",t)}}customElements.define("eui-input",L);class S extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
+        `}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",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,i,e){if(!(!this.inputEl||!this.labelEl))switch(t){case"value":this.inputEl.value!==e&&(this.inputEl.value=e);break;case"id":this.inputEl.id=e;break;case"label":this.labelEl.textContent=e;break}}get value(){return this.inputEl.value}set value(t){this.setAttribute("value",t)}}customElements.define("eui-input",L);class S extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
             <style>
                 .loader {
                     width: 24px;
@@ -188,7 +188,7 @@
             <span class="loader animate">
                 <svg viewBox="0 0 16 16"><circle class="loader-icon" cx="8px" cy="8px" r="7px"></circle></svg>
             </span>
-        `}}customElements.define("eui-loader",S);class M extends HTMLElement{static get observedAttributes(){return["value","intermediate","id"]}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
+        `}}customElements.define("eui-loader",S);class T extends HTMLElement{static get observedAttributes(){return["value","intermediate","id"]}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
             <style>
                 .progressbar {
                     width: 100%;
@@ -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")&&(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",M);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 T(){try{const o=document.createElement("label");o.ariaHidden="true",o.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)}catch{}}function x(o){v.supports.haptics?navigator.vibrate(o||50):v.is.iPhone&&T()}const $=Object.freeze(Object.defineProperty({__proto__:null,haptic:x},Symbol.toStringTag,{value:"Module"})),C=(()=>{let o={},t;try{o=JSON.parse(localStorage.getItem(t)||"{}")}catch(e){console.error(e)}return{get(e){return o[e]},set(e,i){o[e]=i,localStorage.setItem(t,JSON.stringify(o))},delete(e){delete o[e],localStorage.setItem(t,JSON.stringify(o))},all(){return o},clear(){o={},localStorage.setItem(t,JSON.stringify(o))},name(e){t=e;try{o=JSON.parse(localStorage.getItem(t)||"{}")}catch(i){console.error(i)}},settings:{get(e){return o&&o.settings&&o.settings[e]},set(e,i){o.settings||(o.settings={}),o.settings[e]=i,localStorage.setItem(t,JSON.stringify(o))},delete(e){o.settings&&(delete o.settings[e],localStorage.setItem(t,JSON.stringify(o)))},all(){return o.settings||{}},clear(){o.settings&&(o.settings={},localStorage.setItem(t,JSON.stringify(o)))}}}})(),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)}attributeChangedCallback(){this.connectedCallback()}connectedCallback(){const t=this.shadowRoot.querySelector(".progress");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",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);
@@ -301,7 +301,7 @@
                 <input type="checkbox" role="switch">
                 <span class="handle"></span>
             </div>
-        `}connectedCallback(){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,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){t==="selected"&&this.inputEl&&this.updateFromAttribute()}get selected(){return this.hasAttribute("selected")}set selected(t){t?this.setAttribute("selected",""):this.removeAttribute("selected")}}customElements.define("eui-switch",_);class F extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.shadowRoot.innerHTML=`
+        `}connectedCallback(){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,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,i,e){t==="selected"&&this.inputEl&&this.updateFromAttribute()}get selected(){return this.hasAttribute("selected")}set selected(t){t?this.setAttribute("selected",""):this.removeAttribute("selected")}}customElements.define("eui-switch",_);class F extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.shadowRoot.innerHTML=`
             <style>
                 :host {
                     display: inline-flex;
@@ -346,7 +346,7 @@
                 }
             </style>
             <slot></slot>
-        `,this.addEventListener("pointerdown",t=>{const e=document.createElement("span"),i=t.currentTarget,a=Math.max(i.offsetWidth,i.offsetHeight);e.classList.add("ripple"),e.style.left=t.clientX-i.getBoundingClientRect().left-a/2+"px",e.style.top=t.clientY-i.getBoundingClientRect().top-a/2+"px",e.style.width=a+"px",e.style.height=a+"px",this.shadowRoot.appendChild(e),setTimeout(()=>{e.remove()},600)})}}customElements.define("eui-chip",F);const f="",w=(()=>{const o=[];function t(s,d){const h=[],b=s.replace(/:([^/]+)/g,(y,k)=>(h.push(k),"([^/]+)")).replace(/\//g,"\\/"),g=new RegExp(`^${f}${b}$`);o.push({regex:g,paramNames:h,renderFn:d})}function e(s){for(const{regex:d,paramNames:h,renderFn:b}of o){const g=s.match(d);if(g){const y={};return h.forEach((k,K)=>{y[k]=decodeURIComponent(g[K+1])}),{renderFn:b,params:y}}}return null}function i(s,d=!0){s.startsWith(f)||(s=f+(s.startsWith("/")?"":"/")+s);const h=s.split(/[?#]/)[0];if(h===window.location.pathname&&s.includes("#")){d&&history.pushState({},"",s);const g="#"+s.split("#")[1];a(g);return}const b=e(h);if(b)if(d&&history.pushState({},"",s),b.renderFn(b.params),window.dispatchEvent(new CustomEvent("route-changed",{detail:{path:s}})),s.includes("#")){const g="#"+s.split("#")[1];setTimeout(()=>a(g),100)}else{const g=document.getElementById("main");g&&g.scrollTo(0,0)}else n?(d&&history.pushState({},"",s),n()):console.warn(`No route found for ${h}`)}function a(s){if(s)try{const d=document.querySelector(s);d&&d.scrollIntoView({behavior:"smooth"})}catch{console.warn("Invalid hash:",s)}}let n=null;function r(s){n=s}function l(){history.back()}function c(){return window.location.pathname.replace(f,"")||"/"}return window.addEventListener("popstate",()=>{const s=window.location.pathname+window.location.search+window.location.hash;i(s,!1)}),window.addEventListener("click",s=>{if(s.button!==0||s.metaKey||s.altKey||s.ctrlKey||s.shiftKey)return;const d=s.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(s.preventDefault(),h.startsWith("#")){history.pushState({},"",h),a(h);return}i(h)}}),{add:t,navigate:i,back:l,location:c,setNotFound:r}})();async function I(o){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(()=>{try{const i=document.querySelector(window.location.hash);i&&i.scrollIntoView({behavior:"smooth"})}catch{}},100):t&&t.scrollTo(0,0),setTimeout(()=>{t.classList.remove("fade-in")},200)}catch(t){console.error("Page load failed:",t)}}class j 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(t,e,i){if(e!==i&&this.hasRendered){if(t==="active")return;this.updateContent()}}handleClick=()=>{const t=this.getAttribute("path");t&&w.navigate(t)};setupEventListeners(){this.addEventListener("pointerdown",t=>{const e=document.createElement("span"),i=t.currentTarget,a=i.getBoundingClientRect(),n=Math.max(i.offsetWidth,i.offsetHeight),r=n/2;e.classList.add("ripple"),e.style.width=`${n}px`,e.style.height=`${n}px`,e.style.left=`${t.clientX-a.left-r}px`,e.style.top=`${t.clientY-a.top-r}px`,this.shadowRoot.appendChild(e),e.addEventListener("animationend",()=>{e.remove()})})}updateContent(){const t=this.getAttribute("icon"),e=this.getAttribute("avatar-src"),i=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 s=document.createElement("span");s.className="badge",s.textContent=n,this.shadowRoot.appendChild(s)}else r&&r.remove();const l=this.shadowRoot.querySelector("slot[name='icon']");if(l)if(e||i){let s='<eui-avatar size="24"';i&&(s+=` name="${i}"`),s+=">",e&&(s+=`<img src="${e}" alt="${i||"Avatar"}" />`),s+="</eui-avatar>",l.innerHTML=s}else{const s=l.querySelector("eui-icon");t&&s?s.getAttribute("name")!==t&&s.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)}render(){this.shadowRoot.innerHTML=`
+        `,this.addEventListener("pointerdown",t=>{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",F);const f="",w=(()=>{const s=[];function t(o,d){const h=[],b=o.replace(/:([^/]+)/g,(y,k)=>(h.push(k),"([^/]+)")).replace(/\//g,"\\/"),g=new RegExp(`^${f}${b}$`);s.push({regex:g,paramNames:h,renderFn:d})}function i(o){for(const{regex:d,paramNames:h,renderFn:b}of s){const g=o.match(d);if(g){const y={};return h.forEach((k,Y)=>{y[k]=decodeURIComponent(g[Y+1])}),{renderFn:b,params:y}}}return null}function e(o,d=!0){o.startsWith(f)||(o=f+(o.startsWith("/")?"":"/")+o);const h=o.split(/[?#]/)[0];if(h===window.location.pathname&&o.includes("#")){d&&history.pushState({},"",o);const g="#"+o.split("#")[1];a(g);return}const b=i(h);if(b)if(d&&history.pushState({},"",o),b.renderFn(b.params),window.dispatchEvent(new CustomEvent("route-changed",{detail:{path:o}})),o.includes("#")){const g="#"+o.split("#")[1];setTimeout(()=>a(g),100)}else{const g=document.getElementById("main");g&&g.scrollTo(0,0)}else n?(d&&history.pushState({},"",o),n()):console.warn(`No route found for ${h}`)}function a(o){if(o)try{const d=document.querySelector(o);d&&d.scrollIntoView({behavior:"smooth"})}catch{console.warn("Invalid hash:",o)}}let n=null;function r(o){n=o}function l(){history.back()}function c(){return window.location.pathname.replace(f,"")||"/"}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");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("#")){history.pushState({},"",h),a(h);return}e(h)}}),{add:t,navigate:e,back:l,location:c,setNotFound:r}})();async function I(s){try{const t=document.getElementById("main");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 e=document.querySelector(window.location.hash);e&&e.scrollIntoView({behavior:"smooth"})}catch{}},100):t&&t.scrollTo(0,0),setTimeout(()=>{t.classList.remove("fade-in")},200)}catch(t){console.error("Page load failed:",t)}}class j 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(t,i,e){if(i!==e&&this.hasRendered){if(t==="active")return;this.updateContent()}}handleClick=()=>{const t=this.getAttribute("path");t&&w.navigate(t)};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",()=>{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)if(r)r.textContent=n;else{const o=document.createElement("span");o.className="badge",o.textContent=n,this.shadowRoot.appendChild(o)}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 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 c=this.shadowRoot.querySelector(".label");c&&(c.textContent=a)}render(){this.shadowRoot.innerHTML=`
         <style>
             :host {
                 position: relative;
@@ -451,7 +451,7 @@
             </slot>
         </div>
         <span class="label"></span>
-        `}}customElements.define("eui-nav-item",j);class B extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.updateActiveState(),window.addEventListener("popstate",()=>this.updateActiveState()),window.addEventListener("route-changed",()=>this.updateActiveState()),window.addEventListener("toggle-nav",()=>this.classList.toggle("expanded"))}render(){this.shadowRoot.innerHTML=`
+        `}}customElements.define("eui-nav-item",j);class q extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.updateActiveState(),window.addEventListener("popstate",()=>this.updateActiveState()),window.addEventListener("route-changed",()=>this.updateActiveState()),window.addEventListener("toggle-nav",()=>this.classList.toggle("expanded"))}render(){this.shadowRoot.innerHTML=`
         <style>
             :host {
                 position: fixed;
@@ -551,10 +551,10 @@
         <div class="app-nav-container">
             <a href="#content" id="skip_navigation_link">Skip To Content</a>
             <div class="nav-items">
-                ${this.navItems.map(t=>{if(t.type==="divider")return'<div style="height: 1px; background: var(--app-300); margin: 0.5rem 0;"></div>';const e=t.avatar?.src||"",i=t.avatar?.name||"";return`<eui-nav-item path="${t.path}" icon="${t.icon}" avatar-src="${e}" avatar-name="${i}" label="${t.label}"></eui-nav-item>`}).join("")}
+                ${this.navItems.map(t=>{if(t.type==="divider")return'<div style="height: 1px; background: var(--app-300); margin: 0.5rem 0;"></div>';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>
-        `}set navItems(t){this._navItems=t,this.render(),this.updateActiveState()}get navItems(){return this._navItems||[]}updateActiveState(t){t||(t=w.location()),t.startsWith("/")||(t="/"+t),this.shadowRoot.querySelectorAll("eui-nav-item").forEach(i=>{i.getAttribute("path")===t?i.setAttribute("active",""):i.removeAttribute("active")})}}customElements.define("eui-app-nav",B);class q extends HTMLElement{static get observedAttributes(){return["type","title","subtitle","img"]}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
+        `}set navItems(t){this._navItems=t,this.render(),this.updateActiveState()}get navItems(){return this._navItems||[]}updateActiveState(t){t||(t=w.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{static get observedAttributes(){return["type","title","subtitle","img"]}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
             <style>
                 :host {
                     border-radius: 24px;
@@ -640,7 +640,7 @@
                     <p></p>
                 </div>
             </div>
-        `}connectedCallback(){this.hd=this.shadowRoot.querySelector(".header"),this.hasAttribute("type")&&this.hd.classList.add(this.getAttribute("type"))}attributeChangedCallback(t,e,i){const a=this.shadowRoot.querySelector("h1"),n=this.shadowRoot.querySelector("p"),r=this.shadowRoot.querySelector(".img");t==="title"&&(a.textContent=i),t==="subtitle"&&(n.textContent=i),t==="img"&&(r.style.backgroundImage=i?`url(${i})`:"")}}customElements.define("eui-header",q);class N extends HTMLElement{static get observedAttributes(){return["selected"]}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
+        `}connectedCallback(){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})`:"")}}customElements.define("eui-header",B);class N extends HTMLElement{static get observedAttributes(){return["selected"]}constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.innerHTML=`
             <style>
                 :host {
                     display: inline-block;
@@ -724,7 +724,7 @@
                     <rect class="mark long"></rect>
                 </svg>
             </div>
-        `}connectedCallback(){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,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){t==="selected"&&this.inputEl&&this.updateFromAttribute()}get selected(){return this.hasAttribute("selected")}set selected(t){t?this.setAttribute("selected",""):this.removeAttribute("selected")}}customElements.define("eui-checkbox",N);class O extends HTMLElement{static observedAttributes=["type","width","height","border-radius","icon","link","href"];constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}render(){const t=this.getAttribute("href"),e=t?"a":"button";this.shadowRoot.innerHTML=`
+        `}connectedCallback(){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,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,i,e){t==="selected"&&this.inputEl&&this.updateFromAttribute()}get selected(){return this.hasAttribute("selected")}set selected(t){t?this.setAttribute("selected",""):this.removeAttribute("selected")}}customElements.define("eui-checkbox",N);class O extends HTMLElement{static observedAttributes=["type","width","height","border-radius","icon","link","href"];constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render()}render(){const t=this.getAttribute("href"),i=t?"a":"button";this.shadowRoot.innerHTML=`
             <style>
                 button, a {
                     display: flex;
@@ -827,10 +827,10 @@
                 }
 
             </style>
-            <${e}>
+            <${i}>
                 <slot></slot>
-            </${e}>
-        `;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",a=>{const n=document.createElement("span"),r=a.currentTarget,l=r.getBoundingClientRect(),c=Math.max(r.offsetWidth,r.offsetHeight),s=c/2;n.classList.add("ripple"),n.style.width=`${c}px`,n.style.height=`${c}px`,n.style.left=`${a.clientX-l.left-s}px`,n.style.top=`${a.clientY-l.top-s}px`,i.appendChild(n),n.addEventListener("animationend",()=>{n.remove()})})}}customElements.define("eui-button",O);class P extends HTMLElement{static get observedAttributes(){return["type","anchor"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.hd=this.shadowRoot.querySelector(".hd"),this.hasAttribute("type")&&this.hd.classList.add(this.getAttribute("type"))}render(){this.shadowRoot.innerHTML=`
+            </${i}>
+        `;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()})})}}customElements.define("eui-button",O);class U extends HTMLElement{static get observedAttributes(){return["type","anchor"]}constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.hd=this.shadowRoot.querySelector(".hd"),this.hasAttribute("type")&&this.hd.classList.add(this.getAttribute("type"))}render(){this.shadowRoot.innerHTML=`
             <style>
                 :host {
                     display: block;
@@ -888,7 +888,7 @@
                 <span class="anchor-hash">#</span>
             </a>
             `:""}
-        `}}customElements.define("eui-heading",P);function V(o){const i=Date.now()-o,a=Math.floor(i/1e3),n=Math.floor(a/60),r=Math.floor(n/60),l=Math.floor(r/24),c=Math.floor(l/30),s=Math.floor(c/12);return s>0?`${s}y`:c>0?`${c}mo`:l>0?`${l}d`:r>0?`${r}h`:n>0?`${n}m`:`${a}s`}function D(o){const i=Date.now()-o,a=Math.floor(i/1e3),n=Math.floor(a/60),r=Math.floor(n/60),l=Math.floor(r/24),c=Math.floor(l/30),s=Math.floor(c/12);return s>0?`${s} year${s>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 U(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 E(o){const t=document.createElement("input");t.value=o,document.body.appendChild(t),t.select(),document.execCommand("copy"),document.body.removeChild(t)}const Z=Object.freeze(Object.defineProperty({__proto__:null,copystr:E,joinedAgo:D,sanitize:U,timeAgo:V},Symbol.toStringTag,{value:"Module"}));class X extends HTMLElement{static get observedAttributes(){return["copy","id","type","language"]}constructor(){super(),this.attachShadow({mode:"open"}),this._boundCopy=this._onCopy.bind(this),this._isRendered=!1}connectedCallback(){this._isRendered||(this.render(),this._isRendered=!0)}attributeChangedCallback(t,e,i){this._isRendered&&e!==i&&this.render()}render(){const t=this.hasAttribute("copy"),e=this.getAttribute("language")||"text";this.shadowRoot.innerHTML=`
+        `}}customElements.define("eui-heading",U);function P(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(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(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 E(s){const t=document.createElement("input");t.value=s,document.body.appendChild(t),t.select(),document.execCommand("copy"),document.body.removeChild(t)}const Z=Object.freeze(Object.defineProperty({__proto__:null,copystr:E,joinedAgo:V,sanitize:D,timeAgo:P},Symbol.toStringTag,{value:"Module"}));class X extends HTMLElement{static get observedAttributes(){return["copy","id","type","language"]}constructor(){super(),this.attachShadow({mode:"open"}),this._boundCopy=this._onCopy.bind(this),this._isRendered=!1}connectedCallback(){this._isRendered||(this.render(),this._isRendered=!0)}attributeChangedCallback(t,i,e){this._isRendered&&i!==e&&this.render()}render(){const t=this.hasAttribute("copy"),i=this.getAttribute("language")||"text";this.shadowRoot.innerHTML=`
             <style>
             :host {
                 position: relative;
@@ -940,9 +940,9 @@
             </eui-button>
 
             <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"}_getFormattedText(){let e=(this.querySelector("code")||this).innerHTML||"";e=this._unescapeHtml(e),e=e.replace(/^\s*\n/,"").replace(/\n\s*$/,"");const i=e.split(`
-`),a=i.filter(r=>r.trim()).map(r=>r.match(/^\s*/)[0].length),n=a.length?Math.min(...a):0;return i.map(r=>r.slice(n)).join(`
-`)}_unescapeHtml(t){const e=document.createElement("textarea");return e.innerHTML=t,e.value}_highlight(t,e){t=t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");const i={};let a=0;function n(r,l){const c=`__TOKEN_${l}_${a++}__`;return i[c]=`<span class="token ${l}">${r}</span>`,c}return["javascript","js","json","bash","sh","css"].includes(e)?(t=t.replace(/("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')/g,r=>n(r,"string")),e==="bash"||e==="sh"?t=t.replace(/(#.*$)/gm,r=>n(r,"comment")):e==="css"?t=t.replace(/(\/\*[\s\S]*?\*\/)/g,r=>n(r,"comment")):t=t.replace(/(\/\/.*$|\/\*[\s\S]*?\*\/)/gm,r=>n(r,"comment"))):["html","xml"].includes(e)&&(t=t.replace(/(&lt;!--[\s\S]*?--&gt;)/g,r=>n(r,"comment")),t=t.replace(/(&lt;\/?[a-z0-9:-]+)/gi,r=>n(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,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>')):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])}),t}_onCopy(){E(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)}}disconnectedCallback(){this.copyBtn&&this.copyBtn.removeEventListener("click",this._boundCopy)}}customElements.define("eui-code",X);class W extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.setupEventListeners()}static get observedAttributes(){return["name"]}attributeChangedCallback(t,e,i){t==="name"&&(this.render(),this.setupEventListeners())}setupEventListeners(){const t=this.shadowRoot.querySelector("#nav-toggle");t&&t.addEventListener("click",()=>{window.dispatchEvent(new CustomEvent("toggle-nav"))})}render(){const t=this.getAttribute("name")||"Title";this.shadowRoot.innerHTML=`
+        `,this.copyBtn=this.shadowRoot.querySelector(".copy"),this.codeEl=this.shadowRoot.querySelector("code");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 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 i=document.createElement("textarea");return i.innerHTML=t,i.value}_highlight(t,i){t=t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");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(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(){E(this._getFormattedText());const t=this.copyBtn.querySelector("eui-icon");if(t){const i=t.getAttribute("name");t.setAttribute("name","check"),setTimeout(()=>t.setAttribute("name",i),2e3)}}disconnectedCallback(){this.copyBtn&&this.copyBtn.removeEventListener("click",this._boundCopy)}}customElements.define("eui-code",X);class W extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"})}connectedCallback(){this.render(),this.setupEventListeners()}static get observedAttributes(){return["name"]}attributeChangedCallback(t,i,e){t==="name"&&(this.render(),this.setupEventListeners())}setupEventListeners(){const t=this.shadowRoot.querySelector("#nav-toggle");t&&t.addEventListener("click",()=>{window.dispatchEvent(new CustomEvent("toggle-nav"))})}render(){const t=this.getAttribute("name")||"Title";this.shadowRoot.innerHTML=`
         <style>
             :host {
                 display: block;
@@ -1034,7 +1034,7 @@
                 <slot></slot>
             </div>
         </div>
-        `}}customElements.define("eui-app-titlebar",W);class J extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this._handleMouseDown=this._addRipple.bind(this)}connectedCallback(){this.render(),this.setupEventListeners()}static get observedAttributes(){return["elevated","interactive","ripple"]}attributeChangedCallback(t,e,i){e!==i&&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"),a=Math.max(e.width,e.height),n=a/2;i.style.width=i.style.height=`${a}px`,i.style.left=`${t.clientX-e.left-n}px`,i.style.top=`${t.clientY-e.top-n}px`,i.classList.add("ripple"),this.shadowRoot.querySelector(".surface").appendChild(i),i.addEventListener("animationend",()=>{i.remove()})}render(){this.shadowRoot.innerHTML=`
+        `}}customElements.define("eui-app-titlebar",W);class J extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this._handleMouseDown=this._addRipple.bind(this)}connectedCallback(){this.render(),this.setupEventListeners()}static get observedAttributes(){return["elevated","interactive","ripple"]}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 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(){this.shadowRoot.innerHTML=`
         <style>
             :host {
                 display: block;
@@ -1095,4 +1095,100 @@
         <div class="surface">
             <slot></slot>
         </div>
-        `}}customElements.define("eui-surface",J),typeof window<"u"&&console.log("ErisUI loaded successfully"),p.device=z,p.haptics=$,p.icons=u,p.loadPage=I,p.router=w,p.storage=H,p.utils=Z,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})}));
+        `}}customElements.define("eui-surface",J);class K 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",K),typeof window<"u"&&console.log("ErisUI loaded successfully"),p.device=z,p.haptics=$,p.icons=u,p.loadPage=I,p.router=w,p.storage=H,p.utils=Z,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})}));

package/dist/erisui.mjs

@@ -52,17 +52,17 @@ class E 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")) {
+    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();
@@ -71,13 +71,13 @@ class E extends HTMLElement {
 }
 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] || "";
     }
   };
 })();
@@ -104,14 +104,14 @@ class A 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 a = i.content.cloneNode(!0), n = a.firstElementChild;
+    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";
@@ -234,17 +234,17 @@ class L extends HTMLElement {
       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;
       }
   }
@@ -390,77 +390,77 @@ const v = {
     haptics: "vibrate" in navigator || "Vibrate" in window || typeof window.navigator.vibrate == "function"
   },
   userAgent: navigator.userAgent
-}, U = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}, Z = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   device: v
 }, Symbol.toStringTag, { value: "Module" }));
-function M() {
+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 x(o) {
-  v.supports.haptics ? navigator.vibrate(o || 50) : v.is.iPhone && M();
+function x(s) {
+  v.supports.haptics ? navigator.vibrate(s || 50) : v.is.iPhone && T();
 }
-const Z = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const X = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   haptic: x
 }, Symbol.toStringTag, { value: "Module" })), w = (() => {
-  let o = {}, t;
+  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)));
       }
     }
   };
-})(), T = w.settings, X = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+})(), M = w.settings, W = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  settings: T,
+  settings: M,
   storage: w
 }, Symbol.toStringTag, { value: "Module" }));
 class $ extends HTMLElement {
@@ -549,7 +549,7 @@ class $ extends HTMLElement {
     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() {
@@ -611,23 +611,23 @@ class R extends HTMLElement {
             </style>
             <slot></slot>
         `, this.addEventListener("pointerdown", (t) => {
-      const e = document.createElement("span"), i = t.currentTarget, a = Math.max(i.offsetWidth, i.offsetHeight);
-      e.classList.add("ripple"), e.style.left = t.clientX - i.getBoundingClientRect().left - a / 2 + "px", e.style.top = t.clientY - i.getBoundingClientRect().top - a / 2 + "px", e.style.width = a + "px", e.style.height = a + "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", R);
 const b = "", y = (() => {
-  const o = [];
-  function t(s, d) {
-    const h = [], g = s.replace(/:([^/]+)/g, (m, f) => (h.push(f), "([^/]+)")).replace(/\//g, "\\/"), p = new RegExp(`^${b}${g}$`);
-    o.push({ regex: p, paramNames: h, renderFn: d });
-  }
-  function e(s) {
-    for (const { regex: d, paramNames: h, renderFn: g } of o) {
-      const p = s.match(d);
+  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 m = {};
         return h.forEach((f, C) => {
@@ -637,38 +637,38 @@ const b = "", y = (() => {
     }
     return null;
   }
-  function i(s, d = !0) {
-    s.startsWith(b) || (s = b + (s.startsWith("/") ? "" : "/") + s);
-    const h = s.split(/[?#]/)[0];
-    if (h === window.location.pathname && s.includes("#")) {
-      d && history.pushState({}, "", s);
-      const p = "#" + s.split("#")[1];
+  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 (d && history.pushState({}, "", s), g.renderFn(g.params), window.dispatchEvent(new CustomEvent("route-changed", { detail: { path: s } })), s.includes("#")) {
-        const p = "#" + s.split("#")[1];
+      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 n ? (d && history.pushState({}, "", s), n()) : console.warn(`No route found for ${h}`);
+    else n ? (d && history.pushState({}, "", o), n()) : console.warn(`No route found for ${h}`);
   }
-  function a(s) {
-    if (s)
+  function a(o) {
+    if (o)
       try {
-        const d = document.querySelector(s);
+        const d = document.querySelector(o);
         d && d.scrollIntoView({ behavior: "smooth" });
       } catch {
-        console.warn("Invalid hash:", s);
+        console.warn("Invalid hash:", o);
       }
   }
   let n = null;
-  function r(s) {
-    n = s;
+  function r(o) {
+    n = o;
   }
   function l() {
     history.back();
@@ -677,31 +677,31 @@ const b = "", y = (() => {
     return window.location.pathname.replace(b, "") || "/";
   }
   return window.addEventListener("popstate", () => {
-    const s = window.location.pathname + window.location.search + window.location.hash;
-    i(s, !1);
-  }), window.addEventListener("click", (s) => {
-    if (s.button !== 0 || s.metaKey || s.altKey || s.ctrlKey || s.shiftKey) return;
-    const d = s.target.closest("a");
+    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 (s.preventDefault(), h.startsWith("#")) {
+      if (o.preventDefault(), h.startsWith("#")) {
         history.pushState({}, "", h), a(h);
         return;
       }
-      i(h);
+      e(h);
     }
-  }), { add: t, navigate: i, back: l, location: c, setNotFound: r };
+  }), { add: t, navigate: e, back: l, location: c, setNotFound: r };
 })();
-async function W(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(() => {
@@ -724,8 +724,8 @@ class H extends HTMLElement {
   disconnectedCallback() {
     this.removeEventListener("click", this.handleClick);
   }
-  attributeChangedCallback(t, e, i) {
-    if (e !== i && this.hasRendered) {
+  attributeChangedCallback(t, i, e) {
+    if (i !== e && this.hasRendered) {
       if (t === "active")
         return;
       this.updateContent();
@@ -737,30 +737,30 @@ class H extends HTMLElement {
   };
   setupEventListeners() {
     this.addEventListener("pointerdown", (t) => {
-      const e = document.createElement("span"), i = t.currentTarget, a = i.getBoundingClientRect(), n = Math.max(i.offsetWidth, i.offsetHeight), r = n / 2;
-      e.classList.add("ripple"), e.style.width = `${n}px`, e.style.height = `${n}px`, e.style.left = `${t.clientX - a.left - r}px`, e.style.top = `${t.clientY - a.top - r}px`, this.shadowRoot.appendChild(e), e.addEventListener("animationend", () => {
-        e.remove();
+      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 t = this.getAttribute("icon"), e = this.getAttribute("avatar-src"), i = this.getAttribute("avatar-name"), a = this.getAttribute("label") || "", n = this.getAttribute("badge"), r = this.shadowRoot.querySelector(".badge");
+    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 s = document.createElement("span");
-        s.className = "badge", s.textContent = n, this.shadowRoot.appendChild(s);
+        const o = document.createElement("span");
+        o.className = "badge", o.textContent = n, this.shadowRoot.appendChild(o);
       }
     else r && r.remove();
     const l = this.shadowRoot.querySelector("slot[name='icon']");
     if (l)
-      if (e || i) {
-        let s = '<eui-avatar size="24"';
-        i && (s += ` name="${i}"`), s += ">", e && (s += `<img src="${e}" alt="${i || "Avatar"}" />`), s += "</eui-avatar>", l.innerHTML = s;
+      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 s = l.querySelector("eui-icon");
-        t && s ? s.getAttribute("name") !== t && s.setAttribute("name", t) : t ? l.innerHTML = `<eui-icon width="24" height="24" name="${t}"></eui-icon>` : l.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 c = this.shadowRoot.querySelector(".label");
     c && (c.textContent = a);
@@ -986,8 +986,8 @@ class _ extends HTMLElement {
                 ${this.navItems.map((t) => {
       if (t.type === "divider")
         return '<div style="height: 1px; background: var(--app-300); margin: 0.5rem 0;"></div>';
-      const e = t.avatar?.src || "", i = t.avatar?.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>
@@ -1000,8 +1000,8 @@ class _ extends HTMLElement {
     return this._navItems || [];
   }
   updateActiveState(t) {
-    t || (t = y.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");
     });
   }
 }
@@ -1102,9 +1102,9 @@ class F extends HTMLElement {
   connectedCallback() {
     this.hd = this.shadowRoot.querySelector(".header"), this.hasAttribute("type") && this.hd.classList.add(this.getAttribute("type"));
   }
-  attributeChangedCallback(t, e, 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 = i), t === "subtitle" && (n.textContent = i), t === "img" && (r.style.backgroundImage = i ? `url(${i})` : "");
+    t === "title" && (a.textContent = e), t === "subtitle" && (n.textContent = e), t === "img" && (r.style.backgroundImage = e ? `url(${e})` : "");
   }
 }
 customElements.define("eui-header", F);
@@ -1209,7 +1209,7 @@ class I extends HTMLElement {
     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() {
@@ -1220,7 +1220,7 @@ class I extends HTMLElement {
   }
 }
 customElements.define("eui-checkbox", I);
-class j extends HTMLElement {
+class q extends HTMLElement {
   static observedAttributes = ["type", "width", "height", "border-radius", "icon", "link", "href"];
   constructor() {
     super(), this.attachShadow({ mode: "open" });
@@ -1229,7 +1229,7 @@ class j 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 {
@@ -1333,21 +1333,21 @@ class j 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", (a) => {
-      const n = document.createElement("span"), r = a.currentTarget, l = r.getBoundingClientRect(), c = Math.max(r.offsetWidth, r.offsetHeight), s = c / 2;
-      n.classList.add("ripple"), n.style.width = `${c}px`, n.style.height = `${c}px`, n.style.left = `${a.clientX - l.left - s}px`, n.style.top = `${a.clientY - l.top - s}px`, i.appendChild(n), n.addEventListener("animationend", () => {
+    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();
       });
     });
   }
 }
-customElements.define("eui-button", j);
-class B extends HTMLElement {
+customElements.define("eui-button", q);
+class j extends HTMLElement {
   static get observedAttributes() {
     return ["type", "anchor"];
   }
@@ -1419,30 +1419,30 @@ class B extends HTMLElement {
         `;
   }
 }
-customElements.define("eui-heading", B);
-function q(o) {
-  const i = Date.now() - o, a = Math.floor(i / 1e3), n = Math.floor(a / 60), r = Math.floor(n / 60), l = Math.floor(r / 24), c = Math.floor(l / 30), s = Math.floor(c / 12);
-  return s > 0 ? `${s}y` : c > 0 ? `${c}mo` : l > 0 ? `${l}d` : r > 0 ? `${r}h` : n > 0 ? `${n}m` : `${a}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 N(o) {
-  const i = Date.now() - o, a = Math.floor(i / 1e3), n = Math.floor(a / 60), r = Math.floor(n / 60), l = Math.floor(r / 24), c = Math.floor(l / 30), s = Math.floor(c / 12);
-  return s > 0 ? `${s} year${s > 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 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 O(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 k(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 J = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const K = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   copystr: k,
   joinedAgo: N,
   sanitize: O,
-  timeAgo: q
+  timeAgo: B
 }, Symbol.toStringTag, { value: "Module" }));
-class P extends HTMLElement {
+class U extends HTMLElement {
   static get observedAttributes() {
     return ["copy", "id", "type", "language"];
   }
@@ -1452,11 +1452,11 @@ class P 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 {
@@ -1510,47 +1510,47 @@ class P 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(`
-`), a = i.filter((r) => r.trim()).map((r) => r.match(/^\s*/)[0].length), n = a.length ? Math.min(...a) : 0;
-    return i.map((r) => r.slice(n)).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 = {};
+    const e = {};
     let a = 0;
     function n(r, l) {
       const c = `__TOKEN_${l}_${a++}__`;
-      return i[c] = `<span class="token ${l}">${r}</span>`, c;
+      return e[c] = `<span class="token ${l}">${r}</span>`, c;
     }
-    return ["javascript", "js", "json", "bash", "sh", "css"].includes(e) ? (t = t.replace(/("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')/g, (r) => n(r, "string")), e === "bash" || e === "sh" ? t = t.replace(/(#.*$)/gm, (r) => n(r, "comment")) : e === "css" ? t = t.replace(/(\/\*[\s\S]*?\*\/)/g, (r) => n(r, "comment")) : t = t.replace(/(\/\/.*$|\/\*[\s\S]*?\*\/)/gm, (r) => n(r, "comment"))) : ["html", "xml"].includes(e) && (t = t.replace(/(&lt;!--[\s\S]*?--&gt;)/g, (r) => n(r, "comment")), t = t.replace(/(&lt;\/?[a-z0-9:-]+)/gi, (r) => n(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, 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>')) : 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() {
     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() {
     this.copyBtn && this.copyBtn.removeEventListener("click", this._boundCopy);
   }
 }
-customElements.define("eui-code", P);
-class V extends HTMLElement {
+customElements.define("eui-code", U);
+class P extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" });
   }
@@ -1560,7 +1560,7 @@ class V extends HTMLElement {
   static get observedAttributes() {
     return ["name"];
   }
-  attributeChangedCallback(t, e, i) {
+  attributeChangedCallback(t, i, e) {
     t === "name" && (this.render(), this.setupEventListeners());
   }
   setupEventListeners() {
@@ -1666,8 +1666,8 @@ class V extends HTMLElement {
         `;
   }
 }
-customElements.define("eui-app-titlebar", V);
-class D extends HTMLElement {
+customElements.define("eui-app-titlebar", P);
+class V extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" }), this._handleMouseDown = this._addRipple.bind(this);
   }
@@ -1677,16 +1677,16 @@ class D 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"), a = Math.max(e.width, e.height), n = a / 2;
-    i.style.width = i.style.height = `${a}px`, i.style.left = `${t.clientX - e.left - n}px`, i.style.top = `${t.clientY - e.top - n}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() {
@@ -1754,14 +1754,143 @@ class D extends HTMLElement {
         `;
   }
 }
-customElements.define("eui-surface", D);
+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 {
-  U as device,
-  Z as haptics,
+  Z as device,
+  X as haptics,
   u as icons,
-  W as loadPage,
+  J as loadPage,
   y as router,
-  X as storage,
-  J as utils
+  W as storage,
+  K as utils
 };

package/package.json

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