@3r1s_s/erisui 1.0.17 → 1.0.19

package/README.md

@@ -3,7 +3,7 @@
 # ErisUI 2
 
 [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
-[![Version](https://img.shields.io/badge/version-1.0.0-green.svg)](https://semver.org)
+[![Version](https://img.shields.io/badge/version-1.0.15-green.svg)](https://semver.org)
 
 ErisUI 2 is a very simple and easy to use UI Framework for building pretty and speedy user interfaces.
 
@@ -78,4 +78,4 @@ This code snippet is an example of a basic app using ErisUI.
             </div>
         </div>
     </div>
-</body>
+</body>

package/dist/erisui.css

@@ -1 +1 @@
-:root{-webkit-touch-callout:none;-webkit-user-callout:none;-webkit-user-drag:none;-webkit-user-modify:none;-webkit-highlight:none;-webkit-tap-highlight-color:transparent}:root{--app-text: #F2F3F6;--app-link: #549fff;--app-100: #131318;--app-200: #202027;--app-300: #2c2c34;--app-400: #35353b;--app-500: #40404a;--app-600: #4b4b55;--app-700: #575761;--app-800: #62626e;--app-900: #6e6e7b;--banner-color: #182233;--nav-width: 75px;--nav-expanded-width: 250px;--titlebar-height: 65px;--content-width: 100%;--tab-bar-height: 0px;--app-accent: #6366f1;--app-accent-50: #7376ff;--app-accent-100: #6366f1;--app-accent-200: #4b4ecf;--app-blue: #3679f0;--app-red: #ee4d3c;--app-green: #4dca9a;--app-yellow: #fffc5c;--app-pink: #ff5bff;--app-purple: #895bff;--app-orange: #ff9b5b;--app-white: #fff;--app-dark-blue: #1e4d9e;--app-dark-red: #c33f33;--app-dark-green: #2c7e4b;--app-dark-yellow: #c7b200;--app-dark-pink: #c95bff;--app-dark-purple: #5f5bff;--app-dark-orange: #c86f33;--transition-function: cubic-bezier(.4, 0, .2, 1);--specular-highlight: -.5px -.5px 1px #ffffff52 inset, 1px 1px .5px #ffffff52 inset, 0 4px 24px #0000003d}:root{--card-blue: #A8C7FA;--card-cyan: #80CFFF;--card-red: #ffadb5;--card-pink: #FFADE4;--card-green: #6CD58B;--card-yellow: #fff7c1;--card-purple: #D9BAFD;--card-orange: #FFB683}.light{--app-text: #1F1F1F;--app-link: #1868f2;--app-100: #fefefe;--app-200: #F0F4FA;--app-300: #dde3f0;--app-400: #C6CFD7;--app-500: #AEB9C3;--app-600: #99A3AE;--app-700: #7F8C98;--app-800: #66717C;--app-900: #4B5563;--banner-color: #d3e3fd}body{margin:0;padding:0;background-color:var(--app-100);color:var(--app-text);overflow:hidden}a{color:var(--app-link);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin:0}button{color:inherit;font-family:inherit}#app{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--app-200)}.app-wrapper{margin-left:var(--nav-width);display:flex;flex-direction:column;padding:var(--titlebar-height) .5rem calc(var(--tab-bar-height) + .5rem) .5rem;box-sizing:border-box;height:100%;overflow-y:auto;background-color:var(--app-200);transition:margin-left .2s cubic-bezier(.2,0,0,1)}eui-app-nav.expanded+.app-wrapper{margin-left:var(--nav-expanded-width)}#main{width:100%;height:100%;padding:1.5rem;box-sizing:border-box;gap:1.5rem;display:flex;overflow-y:auto;scrollbar-color:var(--app-300) var(--app-100)}.main-wrapper{width:100%;height:100%;border-radius:2rem;background-color:var(--app-100);overflow:hidden}.content{width:var(--content-width);margin:0 auto}.content-header h1{font-size:2.375rem}.content-sidebar{display:flex;flex-direction:column;gap:.5rem}.content-sidebar-inner{width:300px;margin:0 auto;border-radius:12px;background-color:var(--app-200);height:100%}@keyframes ripple{to{transform:scale(4);opacity:0;filter:blur(10px)}}#main{opacity:1;transform:translateY(0);transition:transform .3s cubic-bezier(.2,0,0,1),opacity .3s cubic-bezier(.2,0,0,1)}#main.fade-out{opacity:0;transform:translateY(1rem);transition:none}@media(max-width:768px){.app-wrapper{margin-left:0;padding:var(--titlebar-height) 0 var(--tab-bar-height) 0}.main-wrapper{border-radius:0}eui-app-nav.expanded+.app-wrapper{margin-left:0}eui-app-nav{width:0;overflow:hidden}eui-app-nav.expanded{width:var(--nav-expanded-width);border-radius:0 2rem 2rem 0}}
+:root{-webkit-touch-callout:none;-webkit-user-callout:none;-webkit-user-drag:none;-webkit-user-modify:none;-webkit-highlight:none;-webkit-tap-highlight-color:transparent}:root{--app-text: #F2F3F6;--app-link: #549fff;--app-100: #131318;--app-200: #202027;--app-300: #2c2c34;--app-400: #35353b;--app-500: #40404a;--app-600: #4b4b55;--app-700: #575761;--app-800: #62626e;--app-900: #6e6e7b;--banner-color: #182233;--nav-width: 75px;--nav-expanded-width: 250px;--titlebar-height: 65px;--content-width: 100%;--tab-bar-height: 0px;--app-accent: #6366f1;--app-accent-50: #7376ff;--app-accent-100: #6366f1;--app-accent-200: #4b4ecf;--app-blue: #3679f0;--app-red: #ee4d3c;--app-green: #4dca9a;--app-yellow: #fffc5c;--app-pink: #ff5bff;--app-purple: #895bff;--app-orange: #ff9b5b;--app-white: #fff;--app-dark-blue: #1e4d9e;--app-dark-red: #c33f33;--app-dark-green: #2c7e4b;--app-dark-yellow: #c7b200;--app-dark-pink: #c95bff;--app-dark-purple: #5f5bff;--app-dark-orange: #c86f33;--transition-function: cubic-bezier(.4, 0, .2, 1);--specular-highlight: -.5px -.5px 1px #ffffff52 inset, 1px 1px .5px #ffffff52 inset, 0 4px 24px #0000003d;--slider-track: var(--app-200)}:root{--card-blue: #A8C7FA;--card-cyan: #80CFFF;--card-red: #ffadb5;--card-pink: #FFADE4;--card-green: #6CD58B;--card-yellow: #fff7c1;--card-purple: #D9BAFD;--card-orange: #FFB683}.light{--app-text: #1F1F1F;--app-link: #1868f2;--app-100: #fefefe;--app-200: #F0F4FA;--app-300: #dde3f0;--app-400: #C6CFD7;--app-500: #AEB9C3;--app-600: #99A3AE;--app-700: #7F8C98;--app-800: #66717C;--app-900: #4B5563;--banner-color: #d3e3fd}body{margin:0;padding:0;background-color:var(--app-100);color:var(--app-text);overflow:hidden}a{color:var(--app-link);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4,h5,h6{margin:0}button{color:inherit;font-family:inherit}#app{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--app-200)}.app-wrapper{margin-left:var(--nav-width);display:flex;flex-direction:column;padding:var(--titlebar-height) .5rem calc(var(--tab-bar-height) + .5rem) .5rem;box-sizing:border-box;height:100%;overflow-y:auto;background-color:var(--app-200);transition:margin-left .2s cubic-bezier(.2,0,0,1)}eui-app-nav.expanded+.app-wrapper{margin-left:var(--nav-expanded-width)}#main{width:100%;height:100%;padding:1.5rem;box-sizing:border-box;gap:1.5rem;display:flex;overflow-y:auto;scrollbar-color:var(--app-300) var(--app-100)}.main-wrapper{width:100%;height:100%;border-radius:2rem;background-color:var(--app-100);overflow:hidden}.content{width:var(--content-width);margin:0 auto}.content-header h1{font-size:2.375rem}.content-sidebar{display:flex;flex-direction:column;gap:.5rem}.content-sidebar-inner{width:300px;margin:0 auto;border-radius:12px;background-color:var(--app-200);height:100%}@keyframes ripple{to{transform:scale(4);opacity:0;filter:blur(10px)}}#main{opacity:1;transform:translateY(0);transition:transform .3s cubic-bezier(.2,0,0,1),opacity .3s cubic-bezier(.2,0,0,1)}#main.fade-out{opacity:0;transform:translateY(1rem);transition:none}@media(max-width:768px){.app-wrapper{margin-left:0;padding:var(--titlebar-height) 0 var(--tab-bar-height) 0}.main-wrapper{border-radius:0}eui-app-nav.expanded+.app-wrapper{margin-left:0}eui-app-nav{width:0;overflow:hidden}eui-app-nav.expanded{width:var(--nav-expanded-width);border-radius:0 2rem 2rem 0}}

package/dist/erisui.js

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

package/dist/erisui.mjs

@@ -366,7 +366,7 @@ class z extends HTMLElement {
   }
   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") + "%");
+    this.hasAttribute("id") && (t.id = this.getAttribute("id")), this.hasAttribute("intermediate") && t.classList.add("intermediate"), this.hasAttribute("value") && (t.style.width = this.getAttribute("value") + "%");
   }
 }
 customElements.define("eui-progressbar", z);
@@ -1807,7 +1807,7 @@ class D extends HTMLElement {
                     position: absolute;
                     height: 4px;
                     width: 100%;
-                    background: var(--app-200, #333);
+                    background: var(--slider-track, #333);
                     border-radius: 3px;
                     overflow: hidden;
                     pointer-events: none;

package/package.json

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