From 60a7ba3b0b5ccb264dc4a9268b4e5765a681e2f8 Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Mon, 15 Mar 2021 18:29:56 +0530
Subject: [PATCH] Code refactoring

---
 Standard UI Components/components.js | 1477 ++++++++++++++++++--------
 1 file changed, 1020 insertions(+), 457 deletions(-)

diff --git a/Standard UI Components/components.js b/Standard UI Components/components.js
index 7ebbf41..1008673 100644
--- a/Standard UI Components/components.js	
+++ b/Standard UI Components/components.js	
@@ -12,15 +12,18 @@ smButton.innerHTML = `
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
+    --padding: 0.6rem 1.2rem;
+    --border-radius: 0.3rem;
+    --background: rgba(var(--text-color), 0.1);
 }
-:host([disabled]) .button{
+:host([disable]) .button{
     cursor: not-allowed;
-    opacity: 1;
+    opacity: 0.6;
     background: rgba(var(--text-color), 0.3) !important;
-    color: rgba(var(--foreground-color), 1);
+    color: rgba(var(--foreground-color), 0.6);
 }
 :host([variant='primary']) .button{
-    background: hsl(var(--hue), var(--saturation), var(--lightness));
+    background: var(--accent-color);
     color: rgba(var(--foreground-color), 1);
 }
 :host([variant='outlined']) .button{
@@ -40,17 +43,18 @@ smButton.innerHTML = `
     border-radius: 10rem;
 }
 .button {
+    position: relative;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     width: 100%;
-    padding: 0.6rem 1rem;
+    padding: var(--padding);
     cursor: pointer;
     -webkit-user-select: none;
        -moz-user-select: none;
         -ms-user-select: none;
             user-select: none;
-    border-radius: 0.3rem; 
+    border-radius: var(--border-radius); 
     -webkit-box-pack: center; 
         -ms-flex-pack: center; 
             justify-content: center;
@@ -60,30 +64,26 @@ smButton.innerHTML = `
     transition: box-shadow 0.3s;
     transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
     text-transform: capitalize;
+    font-family: inherit;
     font-size: 0.9rem;
     font-weight: 500;
-    background: rgba(var(--text-color), 0.1); 
+    background: var(--background); 
     -webkit-tap-highlight-color: transparent;
     outline: none;
+    overflow: hidden;
+    border: none;
+    color: inherit;
 }
-:host(:not([disabled])) .button:focus{
-    -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
-            box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
+:host(:not([disable])) .button:focus-visible{
+    -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);
+            box-shadow: 0 0 0 0.1rem var(--accent-color);
 }
-:host([variant='outlined']) .button:focus{
-    -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
-            box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
+:host([variant='outlined']) .button:focus-visible{
+    -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0 0 0.1rem var(--accent-color);
+            box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0 0 0.1rem var(--accent-color);
 }
 @media (hover: hover){
-    :host(:not([disabled])) .button:active{
-        -webkit-box-shadow: none !important;
-                box-shadow: none !important;
-    }
-    :host([variant='outlined']) .button:active{
-        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset !important;
-                box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset !important;
-    }
-    :host(:not([disabled])) .button:hover{
+    :host(:not([disable])) .button:hover{
         -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);
                 box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);
     }
@@ -91,15 +91,9 @@ smButton.innerHTML = `
         -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
                 box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.12);
     }
-    :host([variant="primary"]:not([disabled])) .button:active{
-        background: hsl(var(--hue), var(--saturation), calc(var(--lightness) - 20%)) !important;
-    }
-    :host([variant="primary"]:not([disabled])) .button:hover{
-        background: hsl(var(--hue), var(--saturation), calc(var(--lightness) - 10%));
-    }
 }
 @media (hover: none){
-    :host(:not([disabled])) .button:active{
+    :host(:not([disable])) .button:active{
         -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
                 box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
     }
@@ -109,9 +103,9 @@ smButton.innerHTML = `
     }
 }
 </style>
-<div part="button" class="button" tabindex="0" role="button">
+<button part="button" class="button">
     <slot></slot>   
-</div>`;
+</button>`;
 customElements.define('sm-button',
     class extends HTMLElement {
         constructor() {
@@ -128,17 +122,17 @@ customElements.define('sm-button',
         set disabled(value) {
             if (value && !this.isDisabled) {
                 this.isDisabled = true
-                this.setAttribute('disabled', '')
+                this.setAttribute('disable', '')
                 this.button.removeAttribute('tabindex')
             } else if (!value && this.isDisabled) {
                 this.isDisabled = false
-                this.removeAttribute('disabled')
+                this.removeAttribute('disable')
             }
         }
 
         dispatch() {
             if (this.isDisabled) {
-                this.dispatchEvent(new CustomEvent('disabled', {
+                this.dispatchEvent(new CustomEvent('disable', {
                     bubbles: true,
                     composed: true
                 }))
@@ -153,15 +147,11 @@ customElements.define('sm-button',
         connectedCallback() {
             this.isDisabled = false
             this.button = this.shadowRoot.querySelector('.button')
-            if (this.hasAttribute('disabled') && !this.isDisabled)
+            if (this.hasAttribute('disable') && !this.isDisabled)
                 this.isDisabled = true
             this.addEventListener('click', (e) => {
                 this.dispatch()
             })
-            this.addEventListener('keyup', (e) => {
-                if (e.code === "Enter" || e.code === "Space")
-                    this.dispatch()
-            })
         }
     })
 
@@ -205,6 +195,10 @@ border: none;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
+    --font-size: 1rem;
+    --border-radius: 0.3rem;
+    --padding: 0.7rem 1rem;
+    --background: rgba(var(--text-color), 0.06);
 }
 .hide{
    opacity: 0 !important;
@@ -214,19 +208,14 @@ border: none;
     display: none;
 }
 .icon {
-    fill: none;
-    height: 1.6em;
-    width: 1.6em;
-    padding: 0.5em;
-    stroke: rgba(var(--text-color), 0.7);
-    stroke-width: 10;
-    overflow: visible;
-    stroke-linecap: round;
-    border-radius: 1em;
-    stroke-linejoin: round;
+    fill: rgba(var(--text-color), 0.6);
+    height: 1.4rem;
+    width: 1.4rem;
+    border-radius: 1rem;
     cursor: pointer;
     min-width: 0;
 }
+
 :host(.round) .input{
     border-radius: 10rem;
 }
@@ -234,51 +223,42 @@ border: none;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
+    cursor: text;
+    min-width: 0;
+    text-align: left;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
-    text-align: left;
     position: relative;
-    gap: 1em;
-    padding: 0.7em 1em;
-    border-radius: 0.3em;
+    gap: 0.5rem;
+    padding: var(--padding);
+    border-radius: var(--border-radius);
     -webkit-transition: opacity 0.3s;
     -o-transition: opacity 0.3s;
     transition: opacity 0.3s;
-    background: rgba(var(--text-color), 0.06);
-    -webkit-box-shadow: 0 0 0.2rem rgba(var(--text-color), 0.2) inset;
-            box-shadow: 0 0 0.2rem rgba(var(--text-color), 0.2) inset;
-    font-family: var(--font-family);
+    background: var(--background);
     width: 100%;
     outline: none;
-    min-width: 0;
 }
 .input.readonly .clear{
     opacity: 0 !important;
+    margin-right: -2rem;
     pointer-events: none !important;
 }
 .readonly{
     pointer-events: none;
 }
-input:focus{
-    caret-color: var(--accent-color);
-}
 .input:focus-within:not(.readonly){
-    -webkit-box-shadow: 0 0 0 0.1em var(--accent-color) inset;
-            box-shadow: 0 0 0 0.1em var(--accent-color) inset;
+    box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;
 }
 .disabled{
     pointer-events: none;
     opacity: 0.6;
 }
 .label {
-    -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
     opacity: .7;
     font-weight: 400;
-    font-size: 1em;
+    font-size: var(--font-size);
     position: absolute;
     top: 0;
     -webkit-transition: -webkit-transform 0.3s;
@@ -295,6 +275,7 @@ input:focus{
     -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
     width: 100%;
+    user-select: none;
     will-change: transform;
 }
 .outer-container{
@@ -315,38 +296,53 @@ input:focus{
             flex: 1;
 }    
 input{
-    font-size: 1em;
+    font-size: var(--font-size);
     border: none;
     background: transparent;
     outline: none;
     color: rgba(var(--text-color), 1);
     width: 100%;
 }
-.animate-label .container input {
-    -webkit-transform: translateY(0.6em);
-            -ms-transform: translateY(0.6em);
-        transform: translateY(0.6em);
+:host(:not(.outlined)) .animate-label .container input {
+    -webkit-transform: translateY(0.6rem);
+            -ms-transform: translateY(0.6rem);
+        transform: translateY(0.6rem);
     }
   
-.animate-label .container .label {
-    -webkit-transform: translateY(-0.6em) scale(0.8);
-            -ms-transform: translateY(-0.6em) scale(0.8);
-        transform: translateY(-0.6em) scale(0.8);
+:host(:not(.outlined)) .animate-label .label {
+    -webkit-transform: translateY(-0.7em) scale(0.8);
+            -ms-transform: translateY(-0.7em) scale(0.8);
+        transform: translateY(-0.7em) scale(0.8);
     opacity: 1;
     color: var(--accent-color)
 }
-.helper-text{
-    top: 100%;
-    width: 100%;
-    position: absolute;
-    color: var(--error-color);
+:host(.outlined) .input {
+    box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;
     background: rgba(var(--foreground-color), 1);
-    margin-top: 0.5em;
-    border-radius: 0.2em;
-    border: solid 1px rgba(var(--text-color), 0.2);
-    padding: 0.6em 1em;
 }
-.helper-text:empty{
+:host(.outlined) .label {
+    width: max-content;
+    margin-left: -0.5rem;
+    padding: 0 0.5rem;
+}
+:host(.outlined) .animate-label .label {
+    -webkit-transform: translate(0.1rem, -1.5rem) scale(0.8);
+            -ms-transform: translate(0.1rem, -1.5rem) scale(0.8);
+        transform: translate(0.1rem, -1.5rem) scale(0.8);
+    opacity: 1;
+    background: rgba(var(--foreground-color), 1);
+}
+.animate-label:focus-within:not(.readonly) .label{
+    color: var(--accent-color)
+}
+.feedback-text{
+    font-size: 0.9rem;
+    width: 100%;
+    color: var(--error-color);
+    padding: 0.6rem 1rem;
+    text-align: left;
+}
+.feedback-text:empty{
     padding: 0;
 }
 @media (any-hover: hover){
@@ -362,23 +358,23 @@ input{
             <input/>
             <div part="placeholder" class="label"></div>
         </div>
-        <svg class="icon clear hide" viewBox="0 0 64 64">
-            <title>clear</title>
-            <line x1="64" y1="0" x2="0" y2="64"/>
-            <line x1="64" y1="64" x2="0" y2="0"/>
-        </svg>
+        <svg class="icon clear hide" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>
     </label>
-    <div class="helper-text hide"></div>
+    <div class="feedback-text"></div>
 </div>
 `;
 customElements.define('sm-input',
     class extends HTMLElement {
+
+        static formAssociated = true;
+        
         constructor() {
             super()
             this.attachShadow({
                 mode: 'open'
             }).append(smInput.content.cloneNode(true))
         }
+
         static get observedAttributes() {
             return ['placeholder']
         }
@@ -409,6 +405,10 @@ customElements.define('sm-input',
             return this.shadowRoot.querySelector('input').checkValidity()
         }
 
+        get validity() {
+            return this.shadowRoot.querySelector('input').validity
+        }
+
         set disabled(value) {
             if (value)
                 this.shadowRoot.querySelector('.input').classList.add('disabled')
@@ -425,6 +425,18 @@ customElements.define('sm-input',
             }
         }
 
+        setValidity = (message) => {
+            this.feedbackText.textContent = message
+        }
+
+        showValidity = () => {
+            this.feedbackText.classList.remove('hide-completely')
+        }
+        
+        hideValidity = () => {
+            this.feedbackText.classList.add('hide-completely')
+        }
+
         focusIn = () => {
             this.input.focus()
         }
@@ -433,13 +445,6 @@ customElements.define('sm-input',
             this.input.blur()
         }
 
-        preventNonNumericalInput = (e) => {
-            let keyCode = e.keyCode;
-            if (!((keyCode > 47 && keyCode < 56) || (keyCode > 36 && keyCode < 39) || (keyCode > 95 && keyCode < 106) || keyCode === 110 || (keyCode > 7 && keyCode < 19))) {
-                e.preventDefault();
-            }
-        }
-
         fireEvent = () => {
             let event = new Event('input', {
                 bubbles: true,
@@ -450,22 +455,24 @@ customElements.define('sm-input',
         }
 
         checkInput = (e) => {
-            if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '')
-                return;
+            if (!this.readonly) {                
+                if (this.input.value !== '') {
+                    this.clearBtn.classList.remove('hide')
+                } else {
+                    this.clearBtn.classList.add('hide')
+                }
+            }
+            if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') return;
             if (this.input.value !== '') {
                 if (this.animate)
                     this.inputParent.classList.add('animate-label')
                 else
                     this.label.classList.add('hide')
-                if (!this.readonly)
-                    this.clearBtn.classList.remove('hide')
             } else {
                 if (this.animate)
                     this.inputParent.classList.remove('animate-label')
                 else
                     this.label.classList.remove('hide')
-                if (!this.readonly)
-                    this.clearBtn.classList.add('hide')
             }
         }
 
@@ -474,9 +481,10 @@ customElements.define('sm-input',
             this.inputParent = this.shadowRoot.querySelector('.input')
             this.clearBtn = this.shadowRoot.querySelector('.clear')
             this.label = this.shadowRoot.querySelector('.label')
-            this.helperText = this.shadowRoot.querySelector('.helper-text')
+            this.feedbackText = this.shadowRoot.querySelector('.feedback-text')
             this.valueChanged = false;
             this.readonly = false
+            this.isNumeric = false
             this.min
             this.max
             this.animate = this.hasAttribute('animate')
@@ -500,13 +508,17 @@ customElements.define('sm-input',
                 this.max = parseInt(maxValue)
             }
             if (this.hasAttribute('minlength')) {
-                let minValue = this.getAttribute('minlength')
+                const minValue = this.getAttribute('minlength')
                 this.input.setAttribute('minlength', minValue)
             }
             if (this.hasAttribute('maxlength')) {
-                let maxValue = this.getAttribute('maxlength')
+                const maxValue = this.getAttribute('maxlength')
                 this.input.setAttribute('maxlength', maxValue)
             }
+            if (this.hasAttribute('step')) {
+                const steps = this.getAttribute('step')
+                this.input.setAttribute('step', steps)
+            }
             if (this.hasAttribute('pattern')) {
                 this.input.setAttribute('pattern', this.getAttribute('pattern'))
             }
@@ -517,23 +529,20 @@ customElements.define('sm-input',
             if (this.hasAttribute('disabled')) {
                 this.inputParent.classList.add('disabled')
             }
-            if (this.hasAttribute('helper-text')) {
-                this.helperText.textContent = this.getAttribute('helper-text')
+            if (this.hasAttribute('error-text')) {
+                this.feedbackText.textContent = this.getAttribute('error-text')
             }
             if (this.hasAttribute('type')) {
                 if (this.getAttribute('type') === 'number') {
                     this.input.setAttribute('inputmode', 'numeric')
                     this.input.setAttribute('type', 'number')
+                    this.isNumeric = true
                 } else
                     this.input.setAttribute('type', this.getAttribute('type'))
             } else
                 this.input.setAttribute('type', 'text')
-            this.input.addEventListener('keydown', e => {
-                if (this.getAttribute('type') === 'number')
-                    this.preventNonNumericalInput(e);
-            })
             this.input.addEventListener('input', e => {
-                this.checkInput()
+                this.checkInput(e)
             })
             this.clearBtn.addEventListener('click', e => {
                 this.value = ''
@@ -554,7 +563,9 @@ customElements.define('sm-input',
 const smTextarea = document.createElement('template')
 smTextarea.innerHTML = `
 <style>
-*{
+*,
+*::before,
+*::after { 
     padding: 0;
     margin: 0;
     -webkit-box-sizing: border-box;
@@ -563,130 +574,85 @@ smTextarea.innerHTML = `
 ::-moz-focus-inner{
     border: none;
 }
-:host{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-}
 .hide{
-   opacity: 0 !important;
-   pointer-events: none !important;
+    opacity: 0 !important;
 }
-.hide-completely{
-    display: none;
+:host{
+    display: grid;
+    --border-radius: 0.3s;
+    --background: rgba(var(--text-color), 0.06);
+    --padding-right: initial;
+    --padding-left: initial;
+    --max-height: 8rem;
 }
-.icon {
-    fill: none;
-    height: 1.6em;
-    width: 1.6em;
-    padding: 0.5em;
-    stroke: rgba(var(--text-color), 0.7);
-    stroke-width: 10;
-    overflow: visible;
-    stroke-linecap: round;
-    border-radius: 1em;
-    stroke-linejoin: round;
-    cursor: pointer;
-    min-width: 0;
+:host(.outlined) .textarea {
+    box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;
+    background: rgba(var(--foreground-color), 1);
 }
-.input {
-    -webkit-box-flex: 1;
-        -ms-flex: 1;
-            flex: 1;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
+.textarea{
+    display: grid;
     position: relative;
-    padding: 0.7em 1em;
-    border-radius: 0.3em;
-    -webkit-transition: opacity 0.3s;
-    -o-transition: opacity 0.3s;
-    transition: opacity 0.3s;
-    background: rgba(var(--text-color), 0.1);
-    font-family: var(--font-family);
-    width: 100%;
-    outline: none;
+    cursor: text;
     min-width: 0;
+    text-align: left;
+    overflow: hidden auto;
+    grid-template-columns: 1fr;
+    align-items: stretch;
+    max-height: var(--max-height);
+    background: var(--background);
+    border-radius: var(--border-radius);
+    padding-left: var(--padding-left);
+    padding-right: var(--padding-right);
 }
-
-textarea:focus{
-    caret-color: var(--accent-color);
+.textarea::after,
+textarea{
+    padding: 0.7rem 1rem;
+    width: 100%;
+    min-width: 1em;
+    font: inherit;
+    color: inherit;
+    resize: none;
+    grid-area: 2/1;
+    justify-self: stretch;
+    background: none;
+    appearance: none;
+    border: none;
+    outline: none;
+    line-height: 1.5;
+    overflow: hidden;
 }
-.input:focus-within{
-    -webkit-box-shadow: 0 0 0 0.1em var(--accent-color) inset;
-            box-shadow: 0 0 0 0.1em var(--accent-color) inset;
+.textarea::after{
+    content: attr(data-value) ' ';
+    visibility: hidden;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    hyphens: auto;
 }
-
-.label {
-    -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
+.readonly{
+    pointer-events: none;
+}
+.textarea:focus-within:not(.readonly){
+    box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
+}
+.disabled{
+    pointer-events: none;
+    opacity: 0.6;
+}
+.placeholder{
+    position: absolute;
+    margin: 0.7rem 1rem;
     opacity: .7;
     font-weight: 400;
-    font-size: 1em;
-    position: absolute;
-    top: 0.9em;
-    -webkit-transition: -webkit-transform 0.3s;
-    transition: -webkit-transform 0.3s;
-    -o-transition: transform 0.3s;
-    transition: transform 0.3s;
-    transition: transform 0.3s, -webkit-transform 0.3s;
-    -webkit-transform-origin: left;
-    -ms-transform-origin: left;
-        transform-origin: left;
+    font-size: 1rem;
+    line-height: 1.5;
     pointer-events: none;
-    white-space: nowrap;
-    overflow: hidden;
-    -o-text-overflow: ellipsis;
-       text-overflow: ellipsis;
-    width: 100%;
-    will-change: transform;
-}   
-textarea{
-    font-size: 1em;
-    border: none;
-    background: transparent;
-    outline: none;
-    color: rgba(var(--text-color), 1);
-    width: 100%;
-    font-family: inherit;
-    line-height: 1.6;
-}
-.animate-label textarea {
-    -webkit-transform: translateY(0.6em);
-            -ms-transform: translateY(0.6em);
-        transform: translateY(0.6em);
-}
-  
-.animate-label .label {
-    -webkit-transform: translateY(-0.6em) scale(0.8);
-            -ms-transform: translateY(-0.6em) scale(0.8);
-        transform: translateY(-0.6em) scale(0.8);
-    opacity: 1;
-    color: var(--accent-color)
-}
-.clear{
-    -ms-flex-item-align: start;
-        align-self: flex-start;
-}
-@media (any-hover: hover){
-    .icon:hover{
-        background: rgba(var(--text-color), 0.1);
-    }
+    user-select: none;
 }
 </style>
-<label class="input">
-<textarea rows="1"></textarea>
-<div part="placeholder" class="label"></div>
-<svg class="icon clear hide" viewBox="0 0 64 64">
-    <title>clear</title>
-    <line x1="64" y1="0" x2="0" y2="64"/>
-    <line x1="64" y1="64" x2="0" y2="0"/>
-</svg>
+<label class="textarea" part="textarea">
+    <span class="placeholder"></span>
+    <textarea rows="1"></textarea>
 </label>
 `;
 customElements.define('sm-textarea',
@@ -696,29 +662,20 @@ customElements.define('sm-textarea',
             this.attachShadow({
                 mode: 'open'
             }).append(smTextarea.content.cloneNode(true))
+            this.textarea = this.shadowRoot.querySelector('textarea')
         }
-        static get observedAttributes() {
-            return ['placeholder']
-        }
-
         get value() {
-            return this.shadowRoot.querySelector('textarea').value
+            return this.textarea.value
         }
-
         set value(val) {
-            this.shadowRoot.querySelector('textarea').value = val;
+            this.textarea.value = val;
+            this.textareaBox.dataset.value = val
             this.checkInput()
             this.fireEvent()
         }
-
-        get placeholder() {
-            return this.getAttribute('placeholder')
+        focusIn = () => {
+            this.textarea.focus()
         }
-
-        set placeholder(val) {
-            this.setAttribute('placeholder', val)
-        }
-
         fireEvent() {
             let event = new Event('input', {
                 bubbles: true,
@@ -727,69 +684,39 @@ customElements.define('sm-textarea',
             });
             this.dispatchEvent(event);
         }
-
-        checkInput() {
+        checkInput = () => {
             if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '')
                 return;
-            if (this.input.value !== '') {
-                if (this.animate)
-                    this.inputParent.classList.add('animate-label')
-                else
-                    this.label.classList.add('hide')
+            if (this.textarea.value !== '') {
+                this.placeholder.classList.add('hide')
             } else {
-                if (this.animate)
-                    this.inputParent.classList.remove('animate-label')
-                else
-                    this.label.classList.remove('hide')
+                this.placeholder.classList.remove('hide')
             }
-
-            this.input.style.height = 'auto'
-            this.input.style.height = (this.input.scrollHeight) + 'px';
         }
-
-
         connectedCallback() {
-            this.inputParent = this.shadowRoot.querySelector('.input')
-            this.clearBtn = this.shadowRoot.querySelector('.clear')
-            this.label = this.shadowRoot.querySelector('.label')
-            this.helperText = this.shadowRoot.querySelector('.helper-text')
-            this.valueChanged = false;
-            this.animate = this.hasAttribute('animate')
-            this.input = this.shadowRoot.querySelector('textarea')
-            this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder')
+            this.textareaBox = this.shadowRoot.querySelector('.textarea')
+            this.placeholder = this.shadowRoot.querySelector('.placeholder')
 
-            this.input.setAttribute('style', 'height:' + (this.input.scrollHeight) + 'px;overflow-y:hidden;');
+            if(this.hasAttribute('placeholder'))
+                this.placeholder.textContent = this.getAttribute('placeholder')
 
             if (this.hasAttribute('value')) {
-                this.input.value = this.getAttribute('value')
+                this.textarea.value = this.getAttribute('value')
                 this.checkInput()
             }
             if (this.hasAttribute('required')) {
-                this.input.setAttribute('required', '')
+                this.textarea.setAttribute('required', '')
             }
             if (this.hasAttribute('readonly')) {
-                this.input.setAttribute('readonly', '')
+                this.textarea.setAttribute('readonly', '')
             }
-            if (this.hasAttribute('helper-text')) {
-                this.helperText.textContent = this.getAttribute('helper-text')
+            if (this.hasAttribute('rows')) {
+                this.textarea.setAttribute('rows', this.getAttribute('rows'))
             }
-            this.input.addEventListener('keydown', e => {
-                if (this.getAttribute('type') === 'number')
-                    this.preventNonNumericalInput(e);
-            })
-            this.input.addEventListener('input', e => {
+            this.textarea.addEventListener('input', e => {
+                this.textareaBox.dataset.value = this.textarea.value
                 this.checkInput()
             })
-            this.clearBtn.addEventListener('click', e => {
-                this.value = ''
-            })
-        }
-
-        attributeChangedCallback(name, oldValue, newValue) {
-            if (oldValue !== newValue) {
-                if (name === 'placeholder')
-                    this.shadowRoot.querySelector('.label').textContent = newValue;
-            }
         }
     })
 
@@ -824,7 +751,7 @@ smTab.innerHTML = `
         white-space: nowrap;
         padding: 0.4rem 0.8rem;
         font-weight: 500;
-        word-spacing: 0.1em;
+        word-spacing: 0.1rem;
         text-align: center;
         -webkit-transition: color 0.3s;
         -o-transition: color 0.3s;
@@ -873,6 +800,10 @@ smCheckbox.innerHTML = `
         display: -webkit-inline-box;
         display: -ms-inline-flexbox;
         display: inline-flex;
+        --height: 1.6rem;
+        --width: 1.6rem;
+        --border-radius: 0.2rem;
+        --border-color: rgba(var(--text-color), 0.7);
     }
     .checkbox {
         position: relative;
@@ -888,13 +819,9 @@ smCheckbox.innerHTML = `
         -webkit-tap-highlight-color: transparent;
     }
     
-    p{
-        margin-left: 2rem;
-    }
-    
     .checkbox:active .icon,
-    .checkbox:focus .icon{
-        background: rgba(var(--text-color), 0.2);
+    .checkbox:focus-within .icon{
+        box-shadow: 0 0 0 0.3rem var(--accent-color) inset;
     }
     
     .checkbox input {
@@ -913,28 +840,29 @@ smCheckbox.innerHTML = `
         stroke-dashoffset: 0;
         stroke: rgba(var(--foreground-color), 1);
     }
-    .checkbox input:checked ~ svg {
-        stroke: var(--accent-color);
-        fill: var(--accent-color);
+    .checkbox input:checked ~ .icon {
         stroke-width: 8; 
+        stroke: var(--accent-color);
+        background: var(--accent-color);
+    }
+    .checkbox input:not(:checked) ~ .icon {
+        box-shadow: 0 0 0 0.2rem var(--border-color) inset;
     }
     
     .icon {
-        position: absolute;
         fill: none;
-        height: 2.6rem;
-        width: 2.6rem;
-        padding: 0.7rem;
+        height: var(--height);
+        width: var(--width);
+        padding: 0.2rem;
         stroke: rgba(var(--text-color), 0.7);
         stroke-width: 6;
         overflow: visible;
         stroke-linecap: round;
         stroke-linejoin: round;
-        border-radius: 2rem;
         -webkit-transition: background 0.3s;
         -o-transition: background 0.3s;
         transition: background 0.3s;
-        left: -0.5rem;
+        border-radius: var(--border-radius);
     }
     .disabled {
         opacity: 0.6;
@@ -945,10 +873,9 @@ smCheckbox.innerHTML = `
     <input type="checkbox">
     <svg class="icon" viewBox="0 0 64 64">
         <title>checkbox</title>
-        <rect class="box" x="0" y="0" width="64" height="64" rx="4" />
         <path class="checkmark" d="M50.52,19.56,26,44.08,13.48,31.56" />
     </svg>
-    <p><slot></slot></p>
+    <slot></slot>
 </label>`
 customElements.define('sm-checkbox', class extends HTMLElement {
     constructor() {
@@ -977,27 +904,58 @@ customElements.define('sm-checkbox', class extends HTMLElement {
     }
 
     get checked() {
-        return this.getAttribute('checked')
+        return this.isChecked
     }
 
     set checked(value) {
-        this.setAttribute('checked', value)
+        if (value) {
+            this.setAttribute('checked', '')
+        }
+        else {
+            this.removeAttribute('checked')
+        }
     }
 
-    dispatch() {
+    set value(val) {
+        this.val = val
+        this.setAttribute('value', value)
+    }
+
+    get value() {
+        return getAttribute('value')
+    }
+
+    dispatch = () => {
         this.dispatchEvent(new CustomEvent('change', {
             bubbles: true,
             composed: true
         }))
     }
-
-    connectedCallback() {
-        this.addEventListener('keyup', e => {
-            if ((e.code === "Enter" || e.code === "Space") && this.isDisabled == false) {
-                this.isChecked = !this.isChecked
-                this.setAttribute('checked', this.isChecked)
+    handleKeyup = e => {
+        if ((e.code === "Enter" || e.code === "Space") && this.isDisabled == false) {
+            if (this.hasAttribute('checked')) {
+                this.input.checked = false
+                this.removeAttribute('checked')
             }
-        })
+            else {
+                this.input.checked = true
+                this.setAttribute('checked', '')
+            }
+        }
+    }
+    handleChange = e => {
+        if (this.input.checked) {
+            this.setAttribute('checked', '')
+        }
+        else {
+            this.removeAttribute('checked')
+        }
+    }
+    
+    connectedCallback() {
+        this.val = ''
+        this.addEventListener('keyup', this.handleKeyup)
+        this.input.addEventListener('change', this.handleChange)
     }
     attributeChangedCallback(name, oldValue, newValue) {
         if (oldValue !== newValue) {
@@ -1010,20 +968,23 @@ customElements.define('sm-checkbox', class extends HTMLElement {
                     this.isDisabled = false
                 }
             }
-            if (name === 'checked') {
-                if (newValue == 'true') {
+            else if (name === 'checked') {
+                if (this.hasAttribute('checked')) {
                     this.isChecked = true
                     this.input.checked = true
-                    this.dispatch()
-                } else {
-                    this.isChecked = false
-                    this.input.checked = false
-                    this.dispatch()
                 }
+                else {
+                    this.input.checked = false
+                    this.isChecked = false
+                }
+                this.dispatch()
             }
         }
     }
-
+    disconnectedCallback() {
+        this.removeEventListener('keyup', this.handleKeyup)
+        this.removeEventListener('change', this.handleChange)
+    }
 })
 
 //switch
@@ -1043,6 +1004,22 @@ smSwitch.innerHTML = `
         display: -ms-inline-flexbox;
         display: inline-flex;
     }
+    label{
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        width: 100%;
+        outline: none;
+        cursor: pointer;
+        -webkit-tap-highlight-color: transparent;
+    }
+    :host(:not([disable])) label:focus-visible{
+        -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);
+            box-shadow: 0 0 0 0.1rem var(--accent-color);
+    }
     .switch {
         position: relative;
         display: -webkit-box;
@@ -1052,11 +1029,11 @@ smSwitch.innerHTML = `
             -ms-flex-align: center;
                 align-items: center;
         width: 2.4rem;
+        flex-shrink: 0;
+        margin-left: auto;
         padding: 0.2rem;
         cursor: pointer;
-        outline: none;
         border-radius: 2rem;
-        -webkit-tap-highlight-color: transparent;
     }
     
     input {
@@ -1081,9 +1058,6 @@ smSwitch.innerHTML = `
     .switch:focus .button::after{
         opacity: 1
     }
-    .switch:focus:not(:focus-visible){
-        opacity: 0;
-    }
     .switch:focus-visible .button::after{
         opacity: 1
     }
@@ -1125,7 +1099,7 @@ smSwitch.innerHTML = `
         -o-transition: transform 0.3s;
         transition: transform 0.3s;
         transition: transform 0.3s, -webkit-transform 0.3s;
-        border: solid 0.3rem rgba(var(--foreground-color), 1);
+        border: solid 0.3rem white;
     }
     
     input:checked ~ .button {
@@ -1142,10 +1116,13 @@ smSwitch.innerHTML = `
         pointer-events: none;
     }
 </style>
-<label class="switch" tabindex="0">
-    <input type="checkbox">
-    <div class="track"></div>
-    <div class="button"></div>
+<label tabindex="0">
+    <slot name="left"></slot>
+    <div part="switch" class="switch">
+        <input type="checkbox">
+        <div class="track"></div>
+        <div class="button"></div>
+    </div>
 </label>`
 
 customElements.define('sm-switch', class extends HTMLElement {
@@ -1203,6 +1180,8 @@ customElements.define('sm-switch', class extends HTMLElement {
     connectedCallback() {
         if (this.hasAttribute('disabled'))
             this.switch.classList.add('disabled')
+        if (this.hasAttribute('checked'))
+            this.input.checked = true
         this.addEventListener('keyup', e => {
             if ((e.code === "Enter" || e.code === "Space") && !this.isDisabled) {
                 this.input.click()
@@ -1331,7 +1310,7 @@ smSelect.innerHTML = `
             <polyline points="63.65 15.99 32 47.66 0.35 15.99"/>
         </svg>
     </div>
-    <div class="options hide">
+    <div part="options" class="options hide">
         <slot></slot> 
     </div>
 </div>`;
@@ -1429,7 +1408,10 @@ customElements.define('sm-select', class extends HTMLElement {
                 this.shadowRoot.querySelector('.option-text').textContent = e.detail.text;
                 this.dispatchEvent(new CustomEvent('change', {
                     bubbles: true,
-                    composed: true
+                    composed: true,
+                    detail: {
+                        value: e.detail.value
+                    }
                 }))
                 if (previousOption) {
                     previousOption.classList.remove('check-selected')
@@ -1842,6 +1824,7 @@ smStripOption.innerHTML = `
     padding: 0.4rem 0.8rem;
     cursor: pointer;
     overflow-wrap: break-word;
+    white-space: nowrap;
     outline: none;
     border-radius: 2rem;
     text-transform: capitalize;
@@ -1918,6 +1901,21 @@ smPopup.innerHTML = `
     display: -ms-grid;
     display: grid;
     z-index: 10;
+    --width: 100%;
+    --min-width: auto;
+    --body-padding: 1.5rem;
+    --border-radius: 0.8rem 0.8rem 0 0;
+}
+::-webkit-scrollbar{
+    width: 0.5rem;
+}
+
+::-webkit-scrollbar-thumb{
+    background: rgba(var(--text-color), 0.3);
+    border-radius: 1rem;
+    &:hover{
+        background: rgba(var(--text-color), 0.5);
+    }
 }
 .popup-container{
     display: -ms-grid;
@@ -1929,14 +1927,14 @@ smPopup.innerHTML = `
     right: 0;
     place-items: center;
     background: rgba(0, 0, 0, 0.6);
-    -webkit-transition: opacity 0.3s ease;
-    -o-transition: opacity 0.3s ease;
-    transition: opacity 0.3s ease;
+    -webkit-transition: opacity 0.3s;
+    -o-transition: opacity 0.3s;
+    transition: opacity 0.3s;
     z-index: 10;
+    touch-action: none;
 }
 :host(.stacked) .popup{
     -webkit-transform: scale(0.9) translateY(-2rem) !important;
-        -ms-transform: scale(0.9) translateY(-2rem) !important;
             transform: scale(0.9) translateY(-2rem) !important;
 }
 .popup{
@@ -1945,7 +1943,6 @@ smPopup.innerHTML = `
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
-        -ms-flex-direction: column;
             flex-direction: column;
     position: relative;
     -ms-flex-item-align: end;
@@ -1953,39 +1950,38 @@ smPopup.innerHTML = `
     -webkit-box-align: start;
         -ms-flex-align: start;
             align-items: flex-start;
-    width: 100%;
-    border-radius: 0.8rem 0.8rem 0 0;
-    -webkit-transform: translateY(100%);
-        -ms-transform: translateY(100%);
-            transform: translateY(100%);
+    width: var(--width);
+    min-width: var(--min-width);
+    border-radius: var(--border-radius);
+    -webkit-transform: scale(1) translateY(100%);
+            transform: scale(1) translateY(100%);
     -webkit-transition: -webkit-transform 0.3s;
     transition: -webkit-transform 0.3s;
     -o-transition: transform 0.3s;
-    transition: transform 0.3s;
     transition: transform 0.3s, -webkit-transform 0.3s;
+    transition: transform 0.3s;
     background: rgba(var(--foreground-color), 1);
     -webkit-box-shadow: 0 -1rem 2rem #00000020;
             box-shadow: 0 -1rem 2rem #00000020;
     max-height: 90vh;
+    content-visibility: auto;
 }
 .container-header{
     display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
     width: 100%;
+    touch-action: none;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
 }
 .popup-top{
     display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
     width: 100%;
 }
 .popup-body{
     display: -webkit-box;
-    display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
@@ -1995,71 +1991,54 @@ smPopup.innerHTML = `
         -ms-flex: 1;
             flex: 1;
     width: 100%;
-    padding: 1.5rem;
+    padding: var(--body-padding);
     overflow-y: auto;
 }
-.heading{
-    font-weight: 400;
-}
-.heading:first-letter{
-    text-transform: uppercase;
-}
 .hide{
     opacity: 0;
     pointer-events: none;
+    visiblity: none;
 }
 @media screen and (min-width: 640px){
+    :host{
+        --border-radius: 0.4rem;
+    }
     .popup{
-        width: -webkit-max-content;
-        width: -moz-max-content;
-        width: max-content;
         -ms-flex-item-align: center;
             -ms-grid-row-align: center;
             align-self: center;
-        border-radius: 0.4rem;
+        border-radius: var(--border-radius);
         height: auto;
-        -webkit-transform: translateY(1rem);
-            -ms-transform: translateY(1rem);
-                transform: translateY(1rem);
+        -webkit-transform: scale(1) translateY(3rem);
+                transform: scale(1) translateY(3rem);
         -webkit-box-shadow: 0 3rem 2rem -0.5rem #00000040;
                 box-shadow: 0 3rem 2rem -0.5rem #00000040;
     }
 }
 @media screen and (max-width: 640px){
-.popup-top{
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-}
-.handle{
-    height: 0.3rem;
-    width: 2rem;
-    background: rgba(var(--text-color), .2);
-    border-radius: 1rem;
-    margin: 0.5rem 0;
-}
-.heading{
-    padding: 1rem 1.5rem
-}
-.close{
-    height: 2rem;
-    width: 2rem;
-    padding: 0.55rem;
-    margin-right: 1rem;
-}
+    .popup-top{
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+                flex-direction: column;
+        -webkit-box-align: center;
+                align-items: center;
+    }
+    .handle{
+        height: 0.3rem;
+        width: 2rem;
+        background: rgba(var(--text-color), .4);
+        border-radius: 1rem;
+        margin: 0.5rem 0;
+    }
 }
 </style>
 <div part="background" class="popup-container hide" role="dialog">
     <div part="popup" class="popup">
-        <div class="popup-top">
+        <div part="popup-header" class="popup-top">
             <div class="handle"></div>
             <slot name="header"></slot>
         </div>
-        <div class="popup-body">
+        <div part="popup-body" class="popup-body">
             <slot></slot>
         </div>
     </div>
@@ -2079,7 +2058,8 @@ customElements.define('sm-popup', class extends HTMLElement {
         const scrollY = document.body.style.top;
         window.scrollTo(0, parseInt(scrollY || '0') * -1);
         setTimeout(() => {
-            document.body.setAttribute('style', `overflow: auto; top: initial`)
+            document.body.style.overflow = 'auto';
+            document.body.style.top= 'initial'
         }, 300);
     }
 
@@ -2105,17 +2085,18 @@ customElements.define('sm-popup', class extends HTMLElement {
             )
             this.setAttribute('open', '')
             this.pinned = pinned
-            this.popupContainer.classList.remove('hide')
         }
-        this.popup.style.transform = 'translateY(0)';
-        document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`)
+        this.popupContainer.classList.remove('hide')
+        this.popup.style.transform = 'none';
+        document.body.style.overflow = 'hidden';
+        document.body.style.top= `-${window.scrollY}px`
         return this.popupStack
     }
     hide = () => {
         if (window.innerWidth < 640)
             this.popup.style.transform = 'translateY(100%)';
         else
-            this.popup.style.transform = 'translateY(1rem)';
+            this.popup.style.transform = 'translateY(3rem)';
         this.popupContainer.classList.add('hide')
         this.removeAttribute('open')
         if (typeof this.popupStack !== 'undefined') {
@@ -2134,20 +2115,22 @@ customElements.define('sm-popup', class extends HTMLElement {
                 this.inputFields.forEach(field => {
                     if (field.type === 'radio' || field.tagName === 'SM-CHECKBOX')
                         field.checked = false
-                    if (field.tagName === 'SM-INPUT' || field.tagName === 'TEXTAREA')
+                    if (field.tagName === 'SM-INPUT' || field.tagName === 'TEXTAREA'|| field.tagName === 'SM-TEXTAREA')
                         field.value = ''
                 })
             }, 300);
         }
-        this.dispatchEvent(
-            new CustomEvent("popupclosed", {
-                bubbles: true,
-                detail: {
-                    popup: this,
-                    popupStack: this.popupStack
-                }
-            })
-        )
+        setTimeout(() => {            
+            this.dispatchEvent(
+                new CustomEvent("popupclosed", {
+                    bubbles: true,
+                    detail: {
+                        popup: this,
+                        popupStack: this.popupStack
+                    }
+                })
+            )
+        }, 300);
     }
 
     handleTouchStart = (e) => {
@@ -2157,7 +2140,6 @@ customElements.define('sm-popup', class extends HTMLElement {
     }
 
     handleTouchMove = (e) => {
-        e.preventDefault()
         if (this.touchStartY < e.changedTouches[0].clientY) {
             this.offset = e.changedTouches[0].clientY - this.touchStartY;
             this.touchEndAnimataion = window.requestAnimationFrame(() => this.movePopup())
@@ -2173,6 +2155,7 @@ customElements.define('sm-popup', class extends HTMLElement {
         cancelAnimationFrame(this.touchEndAnimataion)
         this.touchEndY = e.changedTouches[0].clientY
         this.popup.style.transition = 'transform 0.3s'
+        this.threshold = this.popup.getBoundingClientRect().height * 0.3
         if (this.touchEndTime - this.touchStartTime > 200) {
             if (this.touchEndY - this.touchStartY > this.threshold) {
                 if (this.pinned) {
@@ -2210,8 +2193,8 @@ customElements.define('sm-popup', class extends HTMLElement {
         this.touchEndY = 0
         this.touchStartTime = 0
         this.touchEndTime = 0
-        this.threshold = this.popup.getBoundingClientRect().height * 0.3
         this.touchEndAnimataion;
+        this.threshold = this.popup.getBoundingClientRect().height * 0.3
 
         if (this.hasAttribute('open'))
             this.show()
@@ -2226,23 +2209,20 @@ customElements.define('sm-popup', class extends HTMLElement {
         })
 
         this.popupBodySlot.addEventListener('slotchange', () => {
-            this.inputFields = this.querySelectorAll('sm-input', 'sm-checkbox', 'textarea', 'radio')
+            setTimeout(() => {
+                this.threshold = this.popup.getBoundingClientRect().height * 0.3
+            }, 200);
+            this.inputFields = this.querySelectorAll('sm-input', 'sm-checkbox', 'textarea', 'sm-textarea', 'radio')
         })
 
-        this.popupHeader.addEventListener('touchstart', (e) => {
-            this.handleTouchStart(e)
-        })
-        this.popupHeader.addEventListener('touchmove', (e) => {
-            this.handleTouchMove(e)
-        })
-        this.popupHeader.addEventListener('touchend', (e) => {
-            this.handleTouchEnd(e)
-        })
+        this.popupHeader.addEventListener('touchstart', (e) => { this.handleTouchStart(e) }, {passive: true})
+        this.popupHeader.addEventListener('touchmove', (e) => {this.handleTouchMove(e)}, {passive: true})
+        this.popupHeader.addEventListener('touchend', (e) => {this.handleTouchEnd(e)}, {passive: true})
     }
     disconnectedCallback() {
-        this.popupHeader.removeEventListener('touchstart', this.handleTouchStart)
-        this.popupHeader.removeEventListener('touchmove', this.handleTouchMove)
-        this.popupHeader.removeEventListener('touchend', this.handleTouchEnd)
+        this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, {passive: true})
+        this.popupHeader.removeEventListener('touchmove', this.handleTouchMove, {passive: true})
+        this.popupHeader.removeEventListener('touchend', this.handleTouchEnd, {passive: true})
     }
 })
 
@@ -2580,6 +2560,9 @@ smNotifications.innerHTML = `
                 transform: none;
         opacity: 1;
     }
+    .notification-panel:empty{
+        display:none;
+    }
     .notification{
         display: -webkit-box;
         display: -ms-flexbox;
@@ -2612,6 +2595,7 @@ smNotifications.innerHTML = `
         -webkit-hyphens: auto;
         hyphens: auto;
         max-width: 100%;
+        touch-action: none;
     }
     h4:first-letter,
     p:first-letter{
@@ -2665,28 +2649,29 @@ smNotifications.innerHTML = `
     .notification-icon{
         height: 1.4rem;
         width: 1.4rem;
-        margin-right: 0.6rem;
+        margin: 0.3em 1rem 0 0;
         stroke-width: 6;
     }
     @media screen and (min-width: 640px){
-    .notification-panel{
-        width: 40vw;
-        -webkit-box-pack: end;
-            -ms-flex-pack: end;
-                justify-content: flex-end;
-    }
-    .notification{
-        -ms-grid-column-align: end;
-            justify-self: end;
-        width: auto;
-        margin-right: 1.5rem;
-        margin-bottom: 1rem;
-        border-bottom: none;
-        border: solid 1px rgba(var(--text-color), 0.2);
-        -webkit-transform: translateX(1rem);
-            -ms-transform: translateX(1rem);
-                transform: translateX(1rem);
-    }
+        .notification-panel{
+            max-width: 28rem;
+            width: max-content;
+            -webkit-box-pack: end;
+                -ms-flex-pack: end;
+            justify-content: flex-end;
+        }
+        .notification{
+            -ms-grid-column-align: end;
+                justify-self: end;
+            width: auto;
+            margin-right: 1.5rem;
+            margin-bottom: 1rem;
+            border-bottom: none;
+            border: solid 1px rgba(var(--text-color), 0.2);
+            -webkit-transform: translateX(1rem);
+                -ms-transform: translateX(1rem);
+                    transform: translateX(1rem);
+        }
     }
     @media screen and (any-hover: none){
         .close{
@@ -2694,8 +2679,7 @@ smNotifications.innerHTML = `
         }
     }
 </style>
-<div class="notification-panel">
-</div>
+<div class="notification-panel"></div>
 `
 
 customElements.define('sm-notifications', class extends HTMLElement {
@@ -2889,6 +2873,7 @@ customElements.define('sm-notifications', class extends HTMLElement {
 })
 
 
+
 // sm-menu
 const smMenu = document.createElement('template')
 smMenu.innerHTML = `
@@ -2932,6 +2917,7 @@ smMenu.innerHTML = `
 .hide{
     opacity: 0;
     pointer-events: none;
+    user-select: none;
 }
 .select{
     position: relative;
@@ -2990,9 +2976,9 @@ smMenu.innerHTML = `
 .moveUp{
     top: auto;
     bottom: 100%;
-    -webkit-transform: translateY(1rem);
-        -ms-transform: translateY(1rem);
-            transform: translateY(1rem);
+    -webkit-transform: translateY(3rem);
+        -ms-transform: translateY(3rem);
+            transform: translateY(3rem);
 }
 .moveLeft{
     left: auto;
@@ -3044,6 +3030,9 @@ customElements.define('sm-menu', class extends HTMLElement {
             this.optionList.classList.add('no-transformations')
             this.open = true
             this.icon.classList.add('focused')
+            this.availableOptions.forEach(option => {
+                option.setAttribute('tabindex', '0')
+            })
         }
     }
     collapse() {
@@ -3052,6 +3041,9 @@ customElements.define('sm-menu', class extends HTMLElement {
             this.icon.classList.remove('focused')
             this.optionList.classList.add('hide')
             this.optionList.classList.remove('no-transformations')
+            this.availableOptions.forEach(option => {
+                option.removeAttribute('tabindex')
+            })
         }
     }
     connectedCallback() {
@@ -3102,21 +3094,12 @@ customElements.define('sm-menu', class extends HTMLElement {
         slot.addEventListener('slotchange', e => {
             this.availableOptions = slot.assignedElements()
             this.containerDimensions = this.optionList.getBoundingClientRect()
-            this.menuDimensions = menu.getBoundingClientRect()
         });
         window.addEventListener('mousedown', e => {
             if (!this.contains(e.target) && e.button !== 2) {
                 this.collapse()
             }
         })
-        if (this.hasAttribute('set-context') && this.getAttribute('set-context') === 'true') {
-            this.parentNode.setAttribute('oncontextmenu', 'return false')
-            this.parentNode.addEventListener('mouseup', e => {
-                if (e.button === 2) {
-                    this.expand()
-                }
-            })
-        }
     }
 })
 
@@ -3136,7 +3119,7 @@ smMenuOption.innerHTML = `
     display: flex;
 }
 .option{
-    opacity: 0.7;
+    opacity: 0.9;
     min-width: 100%;
     padding: 0.6rem 2rem;
     cursor: pointer;
@@ -3146,10 +3129,10 @@ smMenuOption.innerHTML = `
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
+    user-select: none;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
-    text-transform: capitalize;
 }
 :host(:focus){
     outline: none;
@@ -3180,7 +3163,6 @@ customElements.define('sm-menu-option', class extends HTMLElement {
                 this.click()
             }
         })
-        this.setAttribute('tabindex', '0')
     }
 })
 
@@ -3608,4 +3590,585 @@ customElements.define('sm-section', class extends HTMLElement {
             mode: 'open'
         }).append(section.content.cloneNode(true))
     }
-})
\ No newline at end of file
+})
+
+const textField = document.createElement('template')
+textField.innerHTML = `
+<style>
+    *{
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+    } 
+    .text-field{
+        display: flex;
+        align-items: center;
+    }
+    .text{
+        padding: 0.6rem 0;
+        transition: background-color 0.3s;
+        border-bottom: 0.15rem solid transparent;
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        word-break: break-all;
+        word-break: break-word;
+        -moz-hyphens: auto;
+        -webkit-hyphens: auto;
+        hyphens: auto;
+    }
+    .text:focus{
+        outline: none;
+        border-bottom: 0.15rem solid var(--accent-color);
+    }
+    .text:focus-visible{
+        outline: none;
+        background: solid rgba(var(--text-color), 0.06);
+    }
+    .editable{
+        border-bottom: 0.15rem solid rgba(var(--text-color), 0.6);
+    }
+    .icon-container{
+        position: relative;
+        margin-left: 0.8rem;
+        height: 1.8rem;
+        width: 1.8rem;
+    }
+    .icon{
+        position: absolute;
+        cursor: pointer;
+        fill: rgba(var(--text-color), 0.7);
+        height: 1.8rem;
+        width: 1.8rem;
+        padding: 0.2rem;
+    }
+    .save-button{
+        padding: 0;
+    }
+    .hide{
+        display: none;
+    }
+</style>
+<div class="text-field">
+    <div class="text" part="text"></div>
+    <div class="icon-container">
+        <svg class="edit-button icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <title>Edit</title>
+            <path fill="none" d="M0 0h24v24H0z"/><path d="M12.9 6.858l4.242 4.243L7.242 21H3v-4.243l9.9-9.9zm1.414-1.414l2.121-2.122a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414l-2.122 2.121-4.242-4.242z"/>
+        </svg>
+        <svg class="save-button icon hide" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <title>Save</title>
+            <path fill="none" d="M0 0h24v24H0z"/><path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/>
+        </svg>
+    </div>
+</div>
+`
+
+customElements.define('text-field', class extends HTMLElement{
+    constructor(){
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(textField.content.cloneNode(true))
+
+        this.textField = this.shadowRoot.querySelector('.text-field')
+        this.textContainer = this.textField.children[0]
+        this.iconsContainer = this.textField.children[1]
+        this.editButton = this.textField.querySelector('.edit-button')
+        this.saveButton = this.textField.querySelector('.save-button')
+        this.isTextEditable = false
+        this.isDisabled = false
+    }
+
+    static get observedAttributes(){
+        return ['disable']
+    }
+
+    get value(){
+        return this.text
+    }
+    set value(val) {
+        this.text = val
+        this.textContainer.textContent = val
+        this.setAttribute('value', val)
+    }
+    set disabled(val) {
+        this.isDisabled = val
+        if(this.isDisabled)
+            this.setAttribute('disable', '')
+        else
+            this.removeAttribute('disable')
+    }
+    fireEvent = (value) => {
+        let event = new CustomEvent('contentchanged', {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            detail: {
+                value
+            }
+        });
+        this.dispatchEvent(event);
+    }
+    
+    setEditable = () => {
+        if(this.isTextEditable) return
+        this.textContainer.contentEditable = true
+        this.textContainer.classList.add('editable')
+        this.textContainer.focus()
+        document.execCommand('selectAll', false, null);
+        this.editButton.animate(this.rotateOut, this.animOptions).onfinish = () => {
+            this.editButton.classList.add('hide')
+        }
+        setTimeout(() => {
+            this.saveButton.classList.remove('hide')
+            this.saveButton.animate(this.rotateIn, this.animOptions)
+        }, 100);
+        this.isTextEditable = true
+    }
+    setNonEditable = () => {   
+        if (!this.isTextEditable) return
+        this.textContainer.contentEditable = false
+        this.textContainer.classList.remove('editable')
+        
+        if (this.text !== this.textContainer.textContent.trim()) {
+            this.setAttribute('value', this.textContainer.textContent)
+            this.text = this.textContainer.textContent.trim()
+            this.fireEvent(this.text)
+        }
+        this.saveButton.animate(this.rotateOut, this.animOptions).onfinish = () => {
+            this.saveButton.classList.add('hide')
+        }
+        setTimeout(() => {
+            this.editButton.classList.remove('hide')
+            this.editButton.animate(this.rotateIn, this.animOptions)
+        }, 100);
+        this.isTextEditable = false
+    }
+
+    revert = () => {
+        if (this.textContainer.isContentEditable) {
+            this.value = this.text
+            this.setNonEditable()
+        }
+    }
+
+    connectedCallback(){
+        this.text
+        if (this.hasAttribute('value')) {
+            this.text = this.getAttribute('value')
+            this.textContainer.textContent = this.text
+        }
+        if(this.hasAttribute('disable'))
+            this.isDisabled = true
+        else
+            this.isDisabled = false
+        
+        this.rotateOut = [
+            {
+                transform: 'rotate(0)',
+                opacity: 1
+            },
+            {
+                transform: 'rotate(90deg)',
+                opacity: 0
+            },
+        ]
+        this.rotateIn = [
+            {
+                transform: 'rotate(-90deg)',
+                opacity: 0
+            },
+            {
+                transform: 'rotate(0)',
+                opacity: 1
+            },
+        ]
+        this.animOptions = {
+            duration: 300,
+            easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+            fill: 'forwards'
+        }
+        if (!this.isDisabled) {
+            this.iconsContainer.classList.remove('hide')
+            this.textContainer.addEventListener('dblclick', this.setEditable)
+            this.editButton.addEventListener('click', this.setEditable)
+            this.saveButton.addEventListener('click', this.setNonEditable)
+        }
+    }
+    attributeChangedCallback(name) {
+        if (name === 'disable') {
+            if (this.hasAttribute('disable')) {
+                this.iconsContainer.classList.add('hide')
+                this.textContainer.removeEventListener('dblclick', this.setEditable)
+                this.editButton.removeEventListener('click', this.setEditable)
+                this.saveButton.removeEventListener('click', this.setNonEditable)
+                this.revert()
+            }
+            else {
+                this.iconsContainer.classList.remove('hide')
+                this.textContainer.addEventListener('dblclick', this.setEditable)
+                this.editButton.addEventListener('click', this.setEditable)
+                this.saveButton.addEventListener('click', this.setNonEditable)
+            }
+        }
+    }
+    disconnectedCallback() {
+        this.textContainer.removeEventListener('dblclick', this.setEditable)
+        this.editButton.removeEventListener('click', this.setEditable)
+        this.saveButton.removeEventListener('click', this.setNonEditable)
+    }
+})
+
+//Color Grid
+const colorGrid = document.createElement('template');
+colorGrid.innerHTML =`
+<style>
+    *{
+        padding:0;
+        margin:0;
+        -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+    }
+    :host{
+        display: flex;
+    }
+    .color-tile-container{
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+    .color-tile{
+        position: relative;
+        cursor: pointer;
+        display: flex;
+        height: 3rem;
+        width: 3rem;
+        border-radius: 0.5rem;
+    }
+    .color-tile input[type="radio"]{
+        display: none;
+    }
+    .border{
+        position: absolute;
+        z-index: 1;
+        border-radius: 0.5rem;
+        box-shadow: 0 0 0 0.5rem rgba(var(--text-color), 0.8) inset;
+        display: none;
+        height: 100%;
+        width: 100%;
+    }
+    .color-tile input[type="radio"]:checked ~ .border{
+        display: flex;
+    }
+
+</style>
+<div class="color-tile-container">
+</div>`;
+
+customElements.define('color-grid',
+class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(colorGrid.content.cloneNode(true))
+
+        this.colorArray = []
+        this.container = this.shadowRoot.querySelector('.color-tile-container')
+    }
+
+    set colors(arr) {
+        this.colorArray = arr
+        this.renderTiles()
+    }
+
+    set selectedColor(color) {
+        if (this.colorArray.includes(color) && this.container.querySelector(`[data-color="${color}"]`)) {
+            this.container.querySelector(`[data-color="${color}"] input`).checked = true
+        }
+    }
+
+    randString(length) {
+        let result = '';
+        let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+        for (let i = 0; i < length; i++)
+            result += characters.charAt(Math.floor(Math.random() * characters.length));
+        return result;
+    }
+
+    renderTiles() {
+        this.container.innerHTML = ''
+        const frag = document.createDocumentFragment()
+        const groupName = this.randString(6)
+        this.colorArray.forEach(color => {
+            const label = document.createElement('label')
+            label.classList.add('color-tile')
+            label.setAttribute('data-color', color)
+            if(color.includes('--'))
+                label.setAttribute('style', `background-color: var(${color})`)
+            else
+                label.setAttribute('style', `background-color: ${color}`)
+            label.innerHTML = `
+                <input type="radio" name="${groupName}">
+                <div class="border"></div>
+                `
+            frag.append(label)
+        })
+        this.container.append(frag)
+    }
+    
+    handleChange(e) {
+        const clickedTile = e.target.closest('.color-tile')
+        const clickedTileColor = clickedTile.dataset.color
+        const tileSelected = new CustomEvent('colorselected', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                value: clickedTileColor,
+            }
+        })
+        this.dispatchEvent(tileSelected)
+    }
+
+    connectedCallback() {
+        this.container.addEventListener('change', this.handleChange)
+    }
+
+    disconnectedCallback() {
+        this.container.removeEventListener('change', this.handleChange)
+    }
+})
+
+const pinInput = document.createElement('template');
+pinInput.innerHTML = `
+
+<style>
+		*{
+		padding:0;
+		margin:0;
+		-webkit-box-sizing: border-box;
+					box-sizing: border-box;
+		}
+		input::-ms-reveal,
+		input::-ms-clear {
+			display: none;
+		}
+		input:invalid{
+			outline: none;
+			-webkit-box-shadow: none;
+					box-shadow: none;
+		}
+		::-moz-focus-inner{
+			border: none;
+		}
+		:host{
+			--border-radius: 0.5rem;
+			--pin-length: 4;
+		}
+		.component{
+			display: flex;
+			align-items: center;
+		}
+		.pin-container{
+			display: grid;
+			grid-template-columns: repeat(var(--pin-length), 3rem);
+			width: auto;
+			gap: 0.5rem;
+		}
+		input{
+			width: 100%;
+			display: flex;
+			padding: 0.8rem 0.6rem;
+			border: none;
+			font-size: 1.5rem;
+			text-align: center;
+			color: rgba(var(--text-color), 1);
+			background: rgba(var(--text-color), 0.1);
+			border-radius: var(--border-radius);
+		}
+		
+		input:valid{
+			background-color: transparent;
+		}
+		input:focus,
+		button:focus{
+			outline: none;
+			box-shadow: 0 0 0 0.2rem var(--accent-color) inset;
+		}
+		button{
+            display: flex;
+            align-items: center;
+			background: none;
+			border: none;
+			cursor: pointer;
+            color: inherit;
+            font-family: inherit;
+            margin: 0 1rem;
+		}
+		svg{
+			margin: 0 0.5rem 0 0;
+			height: 1.5rem;
+			width: 1.5rem;
+			fill: rgba(var(--text-color), 1);
+		}
+</style>
+<div class="component">
+	<div class="pin-container"></div>
+	<button>
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="9.95"/><path d="M32,12.28C11.7,12.28,0,32,0,32S11.7,51.72,32,51.72,64,32,64,32,52.3,12.28,32,12.28Zm0,33.35A13.63,13.63,0,1,1,45.63,32,13.64,13.64,0,0,1,32,45.63Z"/></svg>
+        Show
+    </button>
+</div>
+`;
+
+customElements.define('pin-input',
+
+	class extends HTMLElement {
+		constructor() {
+			super()
+			this.attachShadow({
+				mode: 'open'
+			}).append(pinInput.content.cloneNode(true))
+
+			this.pinDigits = 4
+
+			this.arrayOfInput = [];
+			this.container = this.shadowRoot.querySelector('.pin-container');
+			this.toggleButton = this.shadowRoot.querySelector('button')
+		}
+
+        set value(val) {
+			this.arrayOfInput.forEach((input, index) => input.value = val[index] ? val[index] : '')
+        }
+        
+		get value() {
+			return this.getValue()
+		}
+
+		set pinLength(val) {
+			this.pinDigits = val
+			this.setAttribute('pin-length', val)
+			this.style.setProperty('--pin-length', val)
+			this.render()
+        }
+
+        get isValid(){
+            return this.arrayOfInput.every(input => input.value.trim().length)
+        }
+        
+        clear = () => {
+            this.value = ''
+        }
+        
+        focusIn = () => {
+            this.arrayOfInput[0].focus();
+        }
+
+		getValue = () => {
+			return this.arrayOfInput.reduce((acc, val) => {
+				return acc += val.value
+			}, '')
+		}
+
+		render = () => {
+			this.container.innerHTML = ''
+			const frag = document.createDocumentFragment();
+
+			for (let i = 0; i < this.pinDigits; i++) {
+				const inputBox = document.createElement('input')
+				inputBox.setAttribute('type', 'password')
+				inputBox.setAttribute('inputmode', 'numeric')
+				inputBox.setAttribute('maxlength', '1')
+				inputBox.setAttribute('required', '')
+				this.arrayOfInput.push(inputBox);
+				frag.append(inputBox);
+			}
+			this.container.append(frag);
+		}
+
+		handleKeydown = (e) => {
+            const activeInput = e.target.closest('input')
+			if (/[0-9]/.test(e.key)) {
+                if (activeInput.value.trim().length > 2) {
+                    e.preventDefault();
+				}
+				else {
+                    if (activeInput.value.trim().length === 1) {
+                        activeInput.value = e.key
+                    }
+					if (activeInput.nextElementSibling) {
+						setTimeout(() => {
+							activeInput.nextElementSibling.focus();
+						}, 0)
+					}
+				}
+			}
+			else if (e.key === "Backspace") {
+				if(activeInput.previousElementSibling)
+					setTimeout(() => {
+						activeInput.previousElementSibling.focus();
+					}, 0)
+			}
+			else if (e.key.length === 1 && !/[0-9]/.test(e.key)) {
+				e.preventDefault();
+			}
+		}
+		
+		handleInput = () => {			
+			if (this.isValid) {
+				this.fireEvent(this.getValue())
+			}
+		}
+
+		fireEvent = (value) => {
+			let event = new CustomEvent('pincomplete', {
+				bubbles: true,
+				cancelable: true,
+				composed: true,
+				detail: {
+					value
+				}
+			});
+			this.dispatchEvent(event);
+		}
+
+		toggleVisiblity = () => {
+			if (this.arrayOfInput[0].getAttribute('type') === 'password') {
+				this.toggleButton.innerHTML = `
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M22.05,31.44a10.12,10.12,0,0,0,.1,1.36L33.36,21.59a10.12,10.12,0,0,0-1.36-.1A10,10,0,0,0,22.05,31.44Z"/><path d="M19.11,35.84A13.6,13.6,0,0,1,36.4,18.55l5.28-5.27A31,31,0,0,0,32,11.72c-20.3,0-32,19.72-32,19.72A48.48,48.48,0,0,0,11.27,43.69Z"/><path d="M52.73,19.2l6.14-6.14L54.63,8.81l-7,7h0l-6,6h0L39,24.41h0l-7,7L20.09,43.35,16.4,47h0l-7,7,4.25,4.24,8.71-8.71A31.15,31.15,0,0,0,32,51.16c20.3,0,32-19.72,32-19.72A48.54,48.54,0,0,0,52.73,19.2ZM32,45.07a13.63,13.63,0,0,1-4.4-.74l3-3a10.12,10.12,0,0,0,1.36.1,10,10,0,0,0,10-9.95,10.12,10.12,0,0,0-.1-1.36l3-3A13.6,13.6,0,0,1,32,45.07Z"/></svg>
+                    Hide    
+                    `
+                    this.arrayOfInput.forEach(input => input.setAttribute('type', 'text'))
+                }
+                else {
+                    this.toggleButton.innerHTML = `
+					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="9.95"/><path d="M32,12.28C11.7,12.28,0,32,0,32S11.7,51.72,32,51.72,64,32,64,32,52.3,12.28,32,12.28Zm0,33.35A13.63,13.63,0,1,1,45.63,32,13.64,13.64,0,0,1,32,45.63Z"/></svg>
+                    Show
+                `
+				this.arrayOfInput.forEach(input => input.setAttribute('type', 'password'))
+				
+			}
+		}
+
+		connectedCallback() {
+			if (this.hasAttribute('pin-length')) {
+				const pinLength = parseInt(this.getAttribute('pin-length'))
+				this.pinDigits = pinLength
+				this.style.setProperty('--pin-length', pinLength)
+			}
+
+			this.render()
+
+			this.toggleButton.addEventListener('click', this.toggleVisiblity)
+			
+			this.container.addEventListener('input', this.handleInput);
+			this.container.addEventListener('keydown', this.handleKeydown);
+		}
+		disconnectedCallback() {
+			this.toggleButton.removeEventListener('click', this.toggleVisiblity)
+
+			this.container.removeEventListener('input', this.handleInput);
+			this.container.removeEventListener('keydown', this.handleKeydown);
+		}
+	})