From e1a46a20ca3d9fd1700b60e5b3ec4eb77cae2c8c Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Thu, 6 Jan 2022 16:06:41 +0530
Subject: [PATCH] components update

---
 components/components.js     | 2016 ++++++++++++++++++----------------
 components/components.min.js |   25 +-
 2 files changed, 1101 insertions(+), 940 deletions(-)

diff --git a/components/components.js b/components/components.js
index 244851d..efa4864 100644
--- a/components/components.js
+++ b/components/components.js
@@ -30,9 +30,13 @@ smButton.innerHTML = `
     color: var(--accent-color);
 }
 :host([variant='no-outline']) .button{
-    background: rgba(var(--background-color), 1); 
+    background: inherit; 
     color: var(--accent-color);
 }
+:host([disabled]){
+    pointer-events: none;
+    cursor: not-allowed;
+}
 .button {
     position: relative;
     display: -webkit-box;
@@ -62,17 +66,20 @@ smButton.innerHTML = `
     align-items: center;
 }
 :host([disabled]) .button{
+    pointer-events: none;
     cursor: not-allowed;
     opacity: 0.6;
     color: rgba(var(--text-color), 1);
     background-color: rgba(var(--text-color), 0.3);
 }
 @media (hover: hover){
-    :host(:not([disabled])) .button:hover{
+    :host(:not([disabled])) .button:hover,
+    :host(:focus-within:not([disabled])) .button{
         -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);
+        box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);
     }
-    :host([variant='outlined']) .button:hover{
+    :host([variant='outlined']:not([disabled])) .button:hover,
+    :host(:focus-within[variant='outlined']:not([disabled])) .button:hover{
         -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);
     }
@@ -94,49 +101,52 @@ smButton.innerHTML = `
 customElements.define('sm-button',
     class extends HTMLElement {
         constructor() {
-            super()
+            super();
             this.attachShadow({
                 mode: 'open'
-            }).append(smButton.content.cloneNode(true))
+            }).append(smButton.content.cloneNode(true));
         }
         static get observedAttributes() {
             return ['disabled'];
         }
 
         get disabled() {
-            return this.hasAttribute('disabled')
+            return this.hasAttribute('disabled');
         }
 
         set disabled(value) {
             if (value) {
-                this.setAttribute('disabled', '')
-            }else {
-                this.removeAttribute('disabled')
+                this.setAttribute('disabled', '');
+            } else {
+                this.removeAttribute('disabled');
             }
         }
+        focusIn() {
+            this.focus();
+        }
 
         handleKeyDown(e) {
             if (!this.hasAttribute('disabled') && (e.key === 'Enter' || e.code === 'Space')) {
-                e.preventDefault()
-                this.click()
+                e.preventDefault();
+                this.click();
             }
         }
 
         connectedCallback() {
             if (!this.hasAttribute('disabled')) {
-                this.setAttribute('tabindex', '0')
+                this.setAttribute('tabindex', '0');
             }
-            this.setAttribute('role', 'button')
-            this.addEventListener('keydown', this.handleKeyDown)
+            this.setAttribute('role', 'button');
+            this.addEventListener('keydown', this.handleKeyDown);
         }
-        attributeChangedCallback(name, oldVal, newVal) {
+        attributeChangedCallback(name) {
             if (name === 'disabled') {
-                this.removeAttribute('tabindex')
-                this.setAttribute('aria-disabled', 'true')
-            }
-            else {
-                this.setAttribute('tabindex', '0')
-                this.setAttribute('aria-disabled', 'false')
+                if (this.hasAttribute('disabled')) {
+                    this.removeAttribute('tabindex');
+                } else {
+                    this.setAttribute('tabindex', '0');
+                }
+                this.setAttribute('aria-disabled', this.hasAttribute('disabled'));
             }
         }
     })
@@ -512,14 +522,14 @@ customElements.define('sm-carousel', class extends HTMLElement {
 
         const resObs = new ResizeObserver(entries => {
             entries.forEach(entry => {
-                if(entry.contentBoxSize) {
+                if (entry.contentBoxSize) {
                     // Firefox implements `contentBoxSize` as a single content rect, rather than an array
                     const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
-                    
+
                     this.scrollDistance = contentBoxSize.inlineSize * 0.6
                 } else {
                     this.scrollDistance = entry.contentRect.width * 0.6
-                  }
+                }
             })
         })
         resObs.observe(this)
@@ -653,7 +663,6 @@ smCheckbox.innerHTML = `
 </style>
 <label class="checkbox">
     <svg class="icon" viewBox="0 0 64 64">
-        <title>checkbox</title>
         <path class="checkmark" d="M50.52,19.56,26,44.08,13.48,31.56" />
     </svg>
     <slot></slot>
@@ -665,6 +674,7 @@ customElements.define('sm-checkbox', class extends HTMLElement {
             mode: 'open'
         }).append(smCheckbox.content.cloneNode(true))
 
+        this.defaultState
         this.checkbox = this.shadowRoot.querySelector('.checkbox');
 
         this.reset = this.reset.bind(this)
@@ -710,31 +720,36 @@ customElements.define('sm-checkbox', class extends HTMLElement {
         return this.getAttribute('value')
     }
 
-    reset() {
-        this.removeAttribute('checked')
+    focusIn() {
+        this.focus()
     }
 
-    dispatch(){
+    reset() {
+        this.value = this.defaultState
+    }
+
+    dispatch() {
         this.dispatchEvent(new CustomEvent('change', {
             bubbles: true,
             composed: true
         }))
     }
-    handleKeyDown(e){
+    handleKeyDown(e) {
         if (e.code === "Space") {
             e.preventDefault()
             this.click()
         }
     }
-    handleClick(e){
+    handleClick(e) {
         this.toggleAttribute('checked')
     }
-    
+
     connectedCallback() {
         if (!this.hasAttribute('disabled')) {
             this.setAttribute('tabindex', '0')
         }
         this.setAttribute('role', 'checkbox')
+        this.defaultState = this.hasAttribute('checked')
         if (!this.hasAttribute('checked')) {
             this.setAttribute('aria-checked', 'false')
         }
@@ -762,7 +777,7 @@ customElements.define('sm-checkbox', class extends HTMLElement {
         this.removeEventListener('change', this.handleClick)
     }
 })
-const smCopy = document.createElement('template')
+const smCopy = document.createElement('template');
 smCopy.innerHTML = `
 <style>     
 *{
@@ -772,9 +787,8 @@ smCopy.innerHTML = `
             box-sizing: border-box;
 }       
 :host{
-    display: -webkit-inline-box;
-    display: -ms-inline-flexbox;
-    display: inline-flex;
+    display: -webkit-box;
+    display: flex;
     --accent-color: #4d2588;
     --text-color: 17, 17, 17;
     --background-color: 255, 255, 255;
@@ -785,11 +799,21 @@ smCopy.innerHTML = `
 }
 .copy{
     display: grid;
-    gap: 1rem;
+    width: 100%;
+    gap: 0.5rem;
     padding: var(--padding);
     align-items: center;
     grid-template-columns: minmax(0, 1fr) auto;
 }
+:host(:not([clip-text])) .copy-content{
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+}
+:host([clip-text]) .copy-content{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
 .copy-button{
     display: inline-flex;
     justify-content: center;
@@ -819,7 +843,6 @@ smCopy.innerHTML = `
     }
 }
 </style>
-</style>
 <section class="copy">
     <p class="copy-content"></p>
     <button part="button" class="copy-button" title="copy">
@@ -832,24 +855,24 @@ smCopy.innerHTML = `
 customElements.define('sm-copy',
     class extends HTMLElement {
         constructor() {
-            super()
+            super();
             this.attachShadow({
                 mode: 'open'
-            }).append(smCopy.content.cloneNode(true))
-            
-            this.copyContent = this.shadowRoot.querySelector('.copy-content')
-            this.copyButton = this.shadowRoot.querySelector('.copy-button')
+            }).append(smCopy.content.cloneNode(true));
 
-            this.copy = this.copy.bind(this)
+            this.copyContent = this.shadowRoot.querySelector('.copy-content');
+            this.copyButton = this.shadowRoot.querySelector('.copy-button');
+
+            this.copy = this.copy.bind(this);
         }
         static get observedAttributes() {
-            return ['value']
+            return ['value'];
         }
         set value(val) {
-            this.setAttribute('value', val)
+            this.setAttribute('value', val);
         }
         get value() {
-            return this.getAttribute('value')
+            return this.getAttribute('value');
         }
         fireEvent() {
             this.dispatchEvent(
@@ -858,25 +881,25 @@ customElements.define('sm-copy',
                     bubbles: true,
                     cancelable: true,
                 })
-            )
+            );
         }
         copy() {
             navigator.clipboard.writeText(this.copyContent.textContent)
                 .then(res => this.fireEvent())
-                .catch(err => console.error(err))
+                .catch(err => console.error(err));
         }
         connectedCallback() {
-            this.copyButton.addEventListener('click', this.copy)
+            this.copyButton.addEventListener('click', this.copy);
         }
         attributeChangedCallback(name, oldValue, newValue) {
             if (name === 'value') {
-                this.copyContent.textContent = newValue
+                this.copyContent.textContent = newValue;
             }
         }
         disconnectedCallback() {
-            this.copyButton.removeEventListener('click', this.copy)
+            this.copyButton.removeEventListener('click', this.copy);
         }
-    })
+    });
 const fileInput = document.createElement('template')
 fileInput.innerHTML = `
   	<style>
@@ -944,74 +967,74 @@ fileInput.innerHTML = `
 `
 
 customElements.define('file-input', class extends HTMLElement {
-	constructor() {
-		super()
-		this.attachShadow({
-			mode: 'open'
-		}).append(fileInput.content.cloneNode(true))
-		this.input = this.shadowRoot.querySelector('input')
-		this.fileInput = this.shadowRoot.querySelector('.file-input')
-		this.filesPreviewWraper = this.shadowRoot.querySelector('.files-preview-wrapper')
-		this.reflectedAttributes = ['accept', 'multiple', 'capture']
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(fileInput.content.cloneNode(true))
+        this.input = this.shadowRoot.querySelector('input')
+        this.fileInput = this.shadowRoot.querySelector('.file-input')
+        this.filesPreviewWraper = this.shadowRoot.querySelector('.files-preview-wrapper')
+        this.reflectedAttributes = ['accept', 'multiple', 'capture']
 
-		this.reset = this.reset.bind(this)
-		this.formatBytes = this.formatBytes.bind(this)
-		this.createFilePreview = this.createFilePreview.bind(this)
-		this.handleChange = this.handleChange.bind(this)
-		this.handleKeyDown = this.handleKeyDown.bind(this)
-	}
-	static get observedAttributes() {
-		return ['accept', 'multiple', 'capture']
-	}
-	get files() {
-		return this.input.files
-	}
-	set accept(val) {
-		this.setAttribute('accept', val)
-	}
-	set multiple(val) {
-		if (val) {
-			this.setAttribute('mutiple', '')
-		}
-		else {
-			this.removeAttribute('mutiple')
-		}
-	}
-	set capture(val) {
-		this.setAttribute('capture', val)
-	}
-	set value(val) {
-		this.input.value = val
+        this.reset = this.reset.bind(this)
+        this.formatBytes = this.formatBytes.bind(this)
+        this.createFilePreview = this.createFilePreview.bind(this)
+        this.handleChange = this.handleChange.bind(this)
+        this.handleKeyDown = this.handleKeyDown.bind(this)
+    }
+    static get observedAttributes() {
+        return ['accept', 'multiple', 'capture']
+    }
+    get files() {
+        return this.input.files
+    }
+    set accept(val) {
+        this.setAttribute('accept', val)
+    }
+    set multiple(val) {
+        if (val) {
+            this.setAttribute('mutiple', '')
+        }
+        else {
+            this.removeAttribute('mutiple')
+        }
+    }
+    set capture(val) {
+        this.setAttribute('capture', val)
+    }
+    set value(val) {
+        this.input.value = val
     }
     get isValid() {
         return this.input.value !== ''
     }
-    reset(){
+    reset() {
         this.input.value = ''
         this.filesPreviewWraper.innerHTML = ''
     }
-    formatBytes(a,b=2){if(0===a)return"0 Bytes";const c=0>b?0:b,d=Math.floor(Math.log(a)/Math.log(1024));return parseFloat((a/Math.pow(1024,d)).toFixed(c))+" "+["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][d]}
-	createFilePreview(file){
+    formatBytes(a, b = 2) { if (0 === a) return "0 Bytes"; const c = 0 > b ? 0 : b, d = Math.floor(Math.log(a) / Math.log(1024)); return parseFloat((a / Math.pow(1024, d)).toFixed(c)) + " " + ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"][d] }
+    createFilePreview(file) {
         const filePreview = document.createElement('li')
-        const {name, size} = file
-		filePreview.className = 'file-preview'
-		filePreview.innerHTML = `
+        const { name, size } = file
+        filePreview.className = 'file-preview'
+        filePreview.innerHTML = `
 			<div class="file-name">${name}</div>
             <h5 class="file-size">${this.formatBytes(size)}</h5>
 		`
-		return filePreview
-	}
-	handleChange(e){
-		this.filesPreviewWraper.innerHTML = ''
-		const frag = document.createDocumentFragment()
-		Array.from(e.target.files).forEach(file => {
-			frag.append(
-				this.createFilePreview(file)
-			)
-		});
-		this.filesPreviewWraper.append(frag)
+        return filePreview
     }
-    handleKeyDown(e){
+    handleChange(e) {
+        this.filesPreviewWraper.innerHTML = ''
+        const frag = document.createDocumentFragment()
+        Array.from(e.target.files).forEach(file => {
+            frag.append(
+                this.createFilePreview(file)
+            )
+        });
+        this.filesPreviewWraper.append(frag)
+    }
+    handleKeyDown(e) {
         if (e.key === 'Enter' || e.code === 'Space') {
             e.preventDefault()
             this.input.click()
@@ -1022,23 +1045,23 @@ customElements.define('file-input', class extends HTMLElement {
         this.setAttribute('aria-label', 'File upload')
         this.input.addEventListener('change', this.handleChange)
         this.fileInput.addEventListener('keydown', this.handleKeyDown)
-	}
-	attributeChangedCallback(name) {
-		if (this.reflectedAttributes.includes(name)){
+    }
+    attributeChangedCallback(name) {
+        if (this.reflectedAttributes.includes(name)) {
             if (this.hasAttribute(name)) {
                 this.input.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : '')
-			}
-			else {
+            }
+            else {
                 this.input.removeAttribute(name)
-			}
-		}
-	}
-	disconnectedCallback() {
+            }
+        }
+    }
+    disconnectedCallback() {
         this.input.removeEventListener('change', this.handleChange)
         this.fileInput.removeEventListener('keydown', this.handleKeyDown)
-	}
+    }
 })
-const smForm = document.createElement('template')
+const smForm = document.createElement('template');
 smForm.innerHTML = `
     <style>
     *{
@@ -1047,102 +1070,100 @@ smForm.innerHTML = `
         box-sizing: border-box;
     }
     :host{
-        --gap: 1rem;
+        display: flex;
         width: 100%;
     }
     form{
         display: grid;
-        gap: var(--gap);
+        gap: var(--gap, 1.5rem);
         width: 100%;
     }
     </style>
-	<form onsubmit="return false">
+	<form part="form" onsubmit="return false">
 		<slot></slot>
 	</form>
-`
+`;
 
 customElements.define('sm-form', class extends HTMLElement {
-	constructor() {
-		super()
-		this.attachShadow({
-			mode: 'open'
-		}).append(smForm.content.cloneNode(true))
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(smForm.content.cloneNode(true))
 
-		this.form = this.shadowRoot.querySelector('form')
-		this.formElements
-		this.requiredElements
-		this.submitButton
-		this.resetButton
-		this.allRequiredValid = false
+        this.form = this.shadowRoot.querySelector('form');
+        this.formElements
+        this.requiredElements
+        this.submitButton
+        this.resetButton
+        this.allRequiredValid = false;
 
-		this.debounce = this.debounce.bind(this)
-		this.handleInput = this.handleInput.bind(this)
-		this.handleKeydown = this.handleKeydown.bind(this)
-		this.reset = this.reset.bind(this)
-	}
-	debounce(callback, wait) {
-		let timeoutId = null;
-		return (...args) => {
-			window.clearTimeout(timeoutId);
-			timeoutId = window.setTimeout(() => {
-				callback.apply(null, args);
-			}, wait);
-		};
-	}
-	handleInput(e) {
-		this.allRequiredValid = this.requiredElements.every(elem => elem.isValid)
-		if (!this.submitButton) return;
-		if (this.allRequiredValid) {
-			this.submitButton.disabled = false;
-		}
-		else {
-			this.submitButton.disabled = true;
-		}
-	}
-	handleKeydown(e) {
-		if (e.key === 'Enter') {
-			if (this.allRequiredValid) {
-				this.submitButton.click()
-			}
-/* 			else {
-				this.requiredElements.find(elem => !elem.isValid)
-					.animate([
-						{ transform: 'translateX(-1rem)' },
-						{ transform: 'translateX(1rem)' },
-						{ transform: 'translateX(-0.5rem)' },
-						{ transform: 'translateX(0.5rem)' },
-						{ transform: 'translateX(0)' },
-					], {
-						duration: 300,
-						easing: 'ease'
-					})
-			} */
-		}
-	}
-	reset() {
-		this.formElements.forEach(elem => elem.reset())
-	}
-	connectedCallback() {
-		const slot = this.shadowRoot.querySelector('slot')
-		slot.addEventListener('slotchange', e => {
-			this.formElements = [...this.querySelectorAll('sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio')]
-			this.requiredElements = this.formElements.filter(elem => elem.hasAttribute('required'))
-			this.submitButton = e.target.assignedElements().find(elem => elem.getAttribute('variant') === 'primary' || elem.getAttribute('type') === 'submit');
-			this.resetButton = e.target.assignedElements().find(elem => elem.getAttribute('type') === 'reset');
-			if (this.resetButton) {
-				this.resetButton.addEventListener('click', this.reset)
-			}
-		})
-		this.addEventListener('input', this.debounce(this.handleInput, 100))
-		this.addEventListener('keydown', this.debounce(this.handleKeydown, 100))
-	}
-	disconnectedCallback() {
-		this.removeEventListener('input', this.debounce(this.handleInput, 100))
-		this.removeEventListener('keydown', this.debounce(this.handleKeydown, 100))
-	}
+        this.debounce = this.debounce.bind(this)
+        this._checkValidity = this._checkValidity.bind(this)
+        this.handleKeydown = this.handleKeydown.bind(this)
+        this.reset = this.reset.bind(this)
+        this.elementsChanged = this.elementsChanged.bind(this)
+    }
+    debounce(callback, wait) {
+        let timeoutId = null;
+        return (...args) => {
+            window.clearTimeout(timeoutId);
+            timeoutId = window.setTimeout(() => {
+                callback.apply(null, args);
+            }, wait);
+        };
+    }
+    _checkValidity() {
+        this.allRequiredValid = this.requiredElements.every(elem => elem.isValid)
+        if (!this.submitButton) return;
+        if (this.allRequiredValid) {
+            this.submitButton.disabled = false;
+        }
+        else {
+            this.submitButton.disabled = true;
+        }
+    }
+    handleKeydown(e) {
+        if (e.key === 'Enter' && e.target.tagName !== 'SM-TEXTAREA') {
+            if (this.allRequiredValid) {
+                if (this.submitButton && this.submitButton.tagName === 'SM-BUTTON') {
+                    this.submitButton.click()
+                }
+                this.dispatchEvent(new CustomEvent('submit', {
+                    bubbles: true,
+                    composed: true,
+                }))
+            }
+            else {
+                this.requiredElements.find(elem => !elem.isValid).vibrate()
+            }
+        }
+    }
+    reset() {
+        this.formElements.forEach(elem => elem.reset())
+    }
+    elementsChanged() {
+        this.formElements = [...this.querySelectorAll('sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio')]
+        this.requiredElements = this.formElements.filter(elem => elem.hasAttribute('required'));
+        this.submitButton = this.querySelector('[variant="primary"], [type="submit"]');
+        this.resetButton = this.querySelector('[type="reset"]');
+        if (this.resetButton) {
+            this.resetButton.addEventListener('click', this.reset);
+        }
+        this._checkValidity()
+    }
+    connectedCallback() {
+        const slot = this.shadowRoot.querySelector('slot')
+        slot.addEventListener('slotchange', this.elementsChanged)
+        this.addEventListener('input', this.debounce(this._checkValidity, 100));
+        this.addEventListener('keydown', this.debounce(this.handleKeydown, 100));
+    }
+    disconnectedCallback() {
+        this.removeEventListener('input', this.debounce(this._checkValidity, 100));
+        this.removeEventListener('keydown', this.debounce(this.handleKeydown, 100));
+    }
 })
 
-
 const hamburgerMenu = document.createElement('template')
 hamburgerMenu.innerHTML = `
 <style>
@@ -1374,7 +1395,6 @@ border: none;
     --success-color: #00C853;
     --danger-color: red;
     --width: 100%;
-    --font-size: 1rem;
     --icon-gap: 0.5rem;
     --border-radius: 0.3rem;
     --padding: 0.7rem 1rem;
@@ -1436,9 +1456,9 @@ border: none;
     opacity: 0.6;
 }
 .label {
+    font-size: inherit;
     opacity: .7;
     font-weight: 400;
-    font-size: var(--font-size);
     position: absolute;
     top: 0;
     -webkit-transition: -webkit-transform 0.3s;
@@ -1476,7 +1496,7 @@ border: none;
             flex: 1;
 }    
 input{
-    font-size: var(--font-size);
+    font-size: inherit;
     border: none;
     background: transparent;
     outline: none;
@@ -1497,7 +1517,7 @@ input{
     color: var(--accent-color)
 }
 :host([variant="outlined"]) .input {
-    box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;
+    box-shadow: 0 0 0 0.1rem var(--border-color, rgba(var(--text-color), 0.4)) inset;
     background: rgba(var(--background-color), 1);
 }
 :host([variant="outlined"]) .label {
@@ -1521,7 +1541,7 @@ input{
     text-align: left;
     font-size: 0.9rem;
     align-items: center;
-    padding: 0.8rem 1rem;
+    padding: 0.8rem 0;
     color: rgba(var(--text-color), 0.8);
 }
 .success{
@@ -1561,107 +1581,131 @@ customElements.define('sm-input',
     class extends HTMLElement {
 
         constructor() {
-            super()
+            super();
             this.attachShadow({
                 mode: 'open'
-            }).append(smInput.content.cloneNode(true))
+            }).append(smInput.content.cloneNode(true));
 
-            this.inputParent = this.shadowRoot.querySelector('.input')
-            this.input = this.shadowRoot.querySelector('input')
-            this.clearBtn = this.shadowRoot.querySelector('.clear')
-            this.label = this.shadowRoot.querySelector('.label')
-            this.feedbackText = this.shadowRoot.querySelector('.feedback-text')
-            this._helperText
-            this._errorText
-            this.isRequired = false
-            this.validationFunction
-            this.reflectedAttributes = ['value', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step']
-        
-            this.reset = this.reset.bind(this)
-            this.focusIn = this.focusIn.bind(this)
-            this.focusOut = this.focusOut.bind(this)
-            this.fireEvent = this.fireEvent.bind(this)
-            this.checkInput = this.checkInput.bind(this)
+            this.inputParent = this.shadowRoot.querySelector('.input');
+            this.input = this.shadowRoot.querySelector('input');
+            this.clearBtn = this.shadowRoot.querySelector('.clear');
+            this.label = this.shadowRoot.querySelector('.label');
+            this.feedbackText = this.shadowRoot.querySelector('.feedback-text');
+            this.outerContainer = this.shadowRoot.querySelector('.outer-container');
+            this._helperText = '';
+            this._errorText = '';
+            this.isRequired = false;
+            this.hideRequired = false;
+            this.validationFunction = undefined;
+            this.reflectedAttributes = ['value', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step'];
+
+            this.reset = this.reset.bind(this);
+            this.focusIn = this.focusIn.bind(this);
+            this.focusOut = this.focusOut.bind(this);
+            this.fireEvent = this.fireEvent.bind(this);
+            this.checkInput = this.checkInput.bind(this);
+            this.vibrate = this.vibrate.bind(this);
         }
 
         static get observedAttributes() {
-            return ['value', 'placeholder', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step', 'helper-text', 'error-text']
+            return ['value', 'placeholder', 'required', 'disabled', 'type', 'inputmode', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step', 'helper-text', 'error-text', 'hiderequired'];
         }
 
         get value() {
-            return this.input.value
+            return this.input.value;
         }
 
         set value(val) {
             this.input.value = val;
-            this.checkInput()
-            this.fireEvent()
+            this.checkInput();
+            this.fireEvent();
         }
 
         get placeholder() {
-            return this.getAttribute('placeholder')
+            return this.getAttribute('placeholder');
         }
 
         set placeholder(val) {
-            this.setAttribute('placeholder', val)
+            this.setAttribute('placeholder', val);
         }
 
         get type() {
-            return this.getAttribute('type')
+            return this.getAttribute('type');
         }
 
         set type(val) {
-            this.setAttribute('type', val)
-        }
-
-        get isValid() {
-            const _isValid = this.input.checkValidity()
-            let _customValid = true
-            if (this.customValidation) {
-                _customValid = this.validationFunction(this.input.value)
-            }
-            return (_isValid && _customValid)
+            this.setAttribute('type', val);
         }
 
         get validity() {
-            return this.input.validity
+            return this.input.validity;
         }
 
+        get disabled() {
+            return this.hasAttribute('disabled');
+        }
         set disabled(value) {
             if (value)
-                this.inputParent.classList.add('disabled')
+                this.inputParent.classList.add('disabled');
             else
-                this.inputParent.classList.remove('disabled')
+                this.inputParent.classList.remove('disabled');
+        }
+        get readOnly() {
+            return this.hasAttribute('readonly');
         }
         set readOnly(value) {
             if (value) {
-                this.setAttribute('readonly', '')
+                this.setAttribute('readonly', '');
             } else {
-                this.removeAttribute('readonly')
+                this.removeAttribute('readonly');
             }
         }
         set customValidation(val) {
-            this.validationFunction = val
+            this.validationFunction = val;
         }
         set errorText(val) {
-            this._errorText = val
+            this._errorText = val;
         }
         set helperText(val) {
-            this._helperText = val
+            this._helperText = val;
         }
-        reset(){
-            this.value = ''
+        get isValid() {
+            if (this.input.value !== '') {
+                const _isValid = this.input.checkValidity();
+                let _customValid = true;
+                if (this.validationFunction) {
+                    _customValid = Boolean(this.validationFunction(this.input.value));
+                }
+                if (_isValid && _customValid) {
+                    this.feedbackText.classList.remove('error');
+                    this.feedbackText.classList.add('success');
+                    this.feedbackText.textContent = '';
+                } else {
+                    if (this._errorText) {
+                        this.feedbackText.classList.add('error');
+                        this.feedbackText.classList.remove('success');
+                        this.feedbackText.innerHTML = `
+                            <svg class="status-icon status-icon--error" 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 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>
+                        ${this._errorText}
+                        `;
+                    }
+                }
+                return (_isValid && _customValid);
+            }
+        }
+        reset() {
+            this.value = '';
         }
 
-        focusIn(){
-            this.input.focus()
+        focusIn() {
+            this.input.focus();
         }
 
-        focusOut(){
-            this.input.blur()
+        focusOut() {
+            this.input.blur();
         }
 
-        fireEvent(){
+        fireEvent() {
             let event = new Event('input', {
                 bubbles: true,
                 cancelable: true,
@@ -1670,60 +1714,59 @@ customElements.define('sm-input',
             this.dispatchEvent(event);
         }
 
-        checkInput(e){
+        checkInput(e) {
             if (!this.hasAttribute('readonly')) {
-                if (this.input.value !== '') {
-                    this.clearBtn.classList.remove('hide')
+                if (this.input.value.trim() !== '') {
+                    this.clearBtn.classList.remove('hide');
                 } else {
-                    this.clearBtn.classList.add('hide')
-                    if (this.isRequired) {
-                        this.feedbackText.textContent = '* required'
+                    this.clearBtn.classList.add('hide');
+                    if (this.isRequired && !this.hideRequired) {
+                        this.feedbackText.textContent = '*required';
                     }
                 }
-                if (!this.isValid) {
-                    if (this._errorText) {
-                        this.feedbackText.classList.add('error')
-                        this.feedbackText.classList.remove('success')
-                        this.feedbackText.innerHTML = `
-                            <svg class="status-icon status-icon--error" 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 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>
-                        ${this._errorText}
-                        `
-                    }
-                } else {
-                    this.feedbackText.classList.remove('error')
-                    this.feedbackText.classList.add('success')
-                    this.feedbackText.textContent = ''
-                }
             }
             if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder').trim() === '') return;
             if (this.input.value !== '') {
                 if (this.animate)
-                    this.inputParent.classList.add('animate-label')
+                    this.inputParent.classList.add('animate-label');
                 else
-                    this.label.classList.add('hide')
+                    this.label.classList.add('hide');
             } else {
                 if (this.animate)
-                    this.inputParent.classList.remove('animate-label')
+                    this.inputParent.classList.remove('animate-label');
                 else
-                    this.label.classList.remove('hide')
+                    this.label.classList.remove('hide');
             }
         }
+        vibrate() {
+            this.outerContainer.animate([
+                { transform: 'translateX(-1rem)' },
+                { transform: 'translateX(1rem)' },
+                { transform: 'translateX(-0.5rem)' },
+                { transform: 'translateX(0.5rem)' },
+                { transform: 'translateX(0)' },
+            ], {
+                duration: 300,
+                easing: 'ease'
+            });
+        }
 
 
         connectedCallback() {
-            this.animate = this.hasAttribute('animate')
-            this.input.addEventListener('input', this.checkInput)
-            this.clearBtn.addEventListener('click', this.reset)
+            this.animate = this.hasAttribute('animate');
+            this.setAttribute('role', 'textbox');
+            this.input.addEventListener('input', this.checkInput);
+            this.clearBtn.addEventListener('click', this.reset);
         }
-        
+
         attributeChangedCallback(name, oldValue, newValue) {
             if (oldValue !== newValue) {
                 if (this.reflectedAttributes.includes(name)) {
                     if (this.hasAttribute(name)) {
-                        this.input.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : '')
+                        this.input.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : '');
                     }
                     else {
-                        this.input.removeAttribute(name)
+                        this.input.removeAttribute(name);
                     }
                 }
                 if (name === 'placeholder') {
@@ -1731,43 +1774,56 @@ customElements.define('sm-input',
                     this.setAttribute('aria-label', newValue);
                 }
                 else if (this.hasAttribute('value')) {
-                    this.checkInput()
+                    this.checkInput();
                 }
                 else if (name === 'type') {
                     if (this.hasAttribute('type') && this.getAttribute('type') === 'number') {
-                        this.input.setAttribute('inputmode', 'numeric')
+                        this.input.setAttribute('inputmode', 'numeric');
                     }
                 }
                 else if (name === 'helper-text') {
-                    this._helperText = this.getAttribute('helper-text')
+                    this._helperText = this.getAttribute('helper-text');
                 }
                 else if (name === 'error-text') {
-                    this._errorText = this.getAttribute('error-text')
+                    this._errorText = this.getAttribute('error-text');
                 }
                 else if (name === 'required') {
-                    this.isRequired = this.hasAttribute('required')
-                    this.feedbackText.textContent = '* required'
+                    this.isRequired = this.hasAttribute('required');
+                    if (this.isRequired && !this.hideRequired) {
+                        this.feedbackText.textContent = '';
+                    } else {
+                        this.feedbackText.textContent = '*required';
+                    }
+                    if (this.isRequired) {
+                        this.setAttribute('aria-required', 'true');
+                    }
+                    else {
+                        this.setAttribute('aria-required', 'false');
+                    }
+                }
+                else if (name === 'hiderequired') {
+                    this.hideRequired = this.hasAttribute('hiderequired')
                 }
                 else if (name === 'readonly') {
                     if (this.hasAttribute('readonly')) {
-                        this.inputParent.classList.add('readonly')
+                        this.inputParent.classList.add('readonly');
                     } else {
-                        this.inputParent.classList.remove('readonly')
+                        this.inputParent.classList.remove('readonly');
                     }
                 }
                 else if (name === 'disabled') {
                     if (this.hasAttribute('disabled')) {
-                        this.inputParent.classList.add('disabled')
+                        this.inputParent.classList.add('disabled');
                     }
                     else {
-                        this.inputParent.classList.remove('disabled')
+                        this.inputParent.classList.remove('disabled');
                     }
                 }
             }
         }
         disconnectedCallback() {
-            this.input.removeEventListener('input', this.checkInput)
-            this.clearBtn.removeEventListener('click', this.reset)
+            this.input.removeEventListener('input', this.checkInput);
+            this.clearBtn.removeEventListener('click', this.reset);
         }
     })
 const smMenu = document.createElement('template')
@@ -1783,6 +1839,7 @@ smMenu.innerHTML = `
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
+
 }
 .menu{
     display: -ms-grid;
@@ -1827,7 +1884,8 @@ smMenu.innerHTML = `
     right: 0;
 }
 .options{
-    padding: 0.5rem 0;
+    top: 100%;
+    padding: 0.3rem;
     overflow: hidden auto;
     position: absolute;
     display: -webkit-box;
@@ -1840,8 +1898,8 @@ smMenu.innerHTML = `
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
-    background: rgba(var(--background-color), 1);
-    border-radius: 0.3rem;
+    background: var(--background, rgba(var(--background-color), 1));
+    border-radius: var(--border-radius, 0.5rem);
     z-index: 1;
     -webkit-box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0,0,0,0.3);
             box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0,0,0,0.3);
@@ -1868,7 +1926,7 @@ smMenu.innerHTML = `
 </style>
 <div class="select">
     <div class="menu" tabindex="0">
-        <svg class="icon" 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 3c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-7c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
+        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
     </div>
     <div class="options hide">
         <slot></slot> 
@@ -1897,7 +1955,7 @@ customElements.define('sm-menu', class extends HTMLElement {
         this.collapse = this.collapse.bind(this)
         this.toggle = this.toggle.bind(this)
         this.handleKeyDown = this.handleKeyDown.bind(this)
-        this.handleClickoutSide = this.handleClickoutSide.bind(this)
+        this.handleClickOutside = this.handleClickOutside.bind(this)
 
     }
     static get observedAttributes() {
@@ -1965,7 +2023,7 @@ customElements.define('sm-menu', class extends HTMLElement {
                 e.preventDefault()
                 this.toggle()
             }
-        } else { // If mey is pressed over menu options
+        } else { // If key is pressed over menu options
             if (e.code === 'ArrowUp') {
                 e.preventDefault()
                 if (document.activeElement.previousElementSibling) {
@@ -1988,7 +2046,7 @@ customElements.define('sm-menu', class extends HTMLElement {
             }
         }
     }
-    handleClickoutSide(e) {
+    handleClickOutside(e) {
         if (!this.contains(e.target) && e.button !== 2) {
             this.collapse()
         }
@@ -2003,12 +2061,12 @@ customElements.define('sm-menu', class extends HTMLElement {
         });
         this.addEventListener('click', this.toggle)
         this.addEventListener('keydown', this.handleKeyDown)
-        document.addEventListener('mousedown', this.handleClickoutSide)
+        document.addEventListener('mousedown', this.handleClickOutside)
     }
     disconnectedCallback() {
         this.removeEventListener('click', this.toggle)
         this.removeEventListener('keydown', this.handleKeyDown)
-        document.removeEventListener('mousedown', this.handleClickoutSide)
+        document.removeEventListener('mousedown', this.handleClickOutside)
     }
 })
 
@@ -2026,20 +2084,19 @@ menuOption.innerHTML = `
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    --padding: 0.6rem 1.6rem;
 }
 .option{
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     min-width: 100%;
-    padding: var(--padding);
+    padding: var(--padding, 0.6rem 1rem);
     cursor: pointer;
     overflow-wrap: break-word;
     white-space: nowrap;
     outline: none;
-    font-size: 1rem;
     user-select: none;
+    border-radius: 0.3rem;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
@@ -2049,8 +2106,8 @@ menuOption.innerHTML = `
     background: rgba(var(--text-color), 0.1);
 }
 @media (any-hover: hover){
-    :host{
-        --padding: 0.8rem 1.6rem;
+    .option{
+        transition: background-color 0.2s;
     }
     .option:hover{
         background: rgba(var(--text-color), 0.1);
@@ -2070,6 +2127,7 @@ customElements.define('menu-option', class extends HTMLElement {
 
     connectedCallback() {
         this.setAttribute('role', 'option')
+        this.setAttribute('tabindex', '0')
         this.addEventListener('keyup', e => {
             if (e.code === 'Enter' || e.code === 'Space') {
                 e.preventDefault()
@@ -2176,6 +2234,13 @@ smNotifications.innerHTML = `
         width: 100%;
         fill: rgba(var(--text-color), 0.7);
     }
+    .icon--success {
+        fill: var(--green);
+      }
+      .icon--failure,
+      .icon--error {
+        fill: var(--danger-color);
+      }
     .close{
         height: 2rem;
         width: 2rem;
@@ -2222,7 +2287,7 @@ smNotifications.innerHTML = `
 
 customElements.define('sm-notifications', class extends HTMLElement {
     constructor() {
-        super()
+        super();
         this.shadow = this.attachShadow({
             mode: 'open'
         }).append(smNotifications.content.cloneNode(true))
@@ -2249,31 +2314,31 @@ customElements.define('sm-notifications', class extends HTMLElement {
         return result;
     }
 
-    createNotification(message, options) {
-        const { pinned = false, icon = '' } = options
+    createNotification(message, options = {}) {
+        const { pinned = false, icon = '' } = options;
         const notification = document.createElement('div')
         notification.id = this.randString(8)
-        notification.classList.add('notification')
-        let composition = ``
+        notification.classList.add('notification');
+        let composition = ``;
         composition += `
             <div class="icon-container">${icon}</div>
             <p>${message}</p>
-            `
+            `;
         if (pinned) {
-            notification.classList.add('pinned')
+            notification.classList.add('pinned');
             composition += `
                 <button class="close">
                     <svg class="icon" 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 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
                 </button>
-            `
+            `;
         }
-        notification.innerHTML = composition
-        return notification
+        notification.innerHTML = composition;
+        return notification;
     }
 
     push(message, options = {}) {
-        const notification = this.createNotification(message, options)
-        this.notificationPanel.append(notification)
+        const notification = this.createNotification(message, options);
+        this.notificationPanel.append(notification);
         notification.animate([
             {
                 transform: `translateY(1rem)`,
@@ -2283,8 +2348,8 @@ customElements.define('sm-notifications', class extends HTMLElement {
                 transform: `none`,
                 opacity: '1'
             },
-        ], this.animationOptions)
-        return notification.id
+        ], this.animationOptions);
+        return notification.id;
     }
 
     removeNotification(notification) {
@@ -2298,40 +2363,59 @@ customElements.define('sm-notifications', class extends HTMLElement {
                 opacity: '0'
             }
         ], this.animationOptions).onfinish = () => {
-            notification.remove()
-        }
+            notification.remove();
+        };
     }
 
     clearAll() {
         Array.from(this.notificationPanel.children).forEach(child => {
-            this.removeNotification(child)
-        })
+            this.removeNotification(child);
+        });
     }
 
     connectedCallback() {
         this.notificationPanel.addEventListener('click', e => {
-            if (e.target.closest('.close')) (
-                this.removeNotification(e.target.closest('.notification'))
-            )
-        })
+            if (e.target.closest('.close')) {
+                this.removeNotification(e.target.closest('.notification'));
+            }
+        });
 
         const observer = new MutationObserver(mutationList => {
             mutationList.forEach(mutation => {
                 if (mutation.type === 'childList') {
                     if (mutation.addedNodes.length && !mutation.addedNodes[0].classList.contains('pinned')) {
                         setTimeout(() => {
-                            this.removeNotification(mutation.addedNodes[0])
+                            this.removeNotification(mutation.addedNodes[0]);
                         }, 5000);
                     }
                 }
-            })
-        })
+            });
+        });
         observer.observe(this.notificationPanel, {
             childList: true,
-        })
+        });
     }
-})
-const smPopup = document.createElement('template')
+});
+
+class Stack {
+    constructor() {
+        this.items = [];
+    }
+    push(element) {
+        this.items.push(element);
+    }
+    pop() {
+        if (this.items.length == 0)
+            return "Underflow";
+        return this.items.pop();
+    }
+    peek() {
+        return this.items[this.items.length - 1];
+    }
+}
+const popupStack = new Stack();
+
+const smPopup = document.createElement('template');
 smPopup.innerHTML = `
 <style>
 *{
@@ -2352,7 +2436,6 @@ smPopup.innerHTML = `
     --height: auto;
     --min-width: auto;
     --min-height: auto;
-    --body-padding: 1.5rem;
     --backdrop-background: rgba(0, 0, 0, 0.6);
     --border-radius: 0.8rem 0.8rem 0 0;
 }
@@ -2365,10 +2448,6 @@ smPopup.innerHTML = `
     left: 0;
     right: 0;
     place-items: center;
-    background: var(--backdrop-background);
-    -webkit-transition: opacity 0.3s;
-    -o-transition: opacity 0.3s;
-    transition: opacity 0.3s;
     z-index: 10;
     touch-action: none;
 }
@@ -2376,6 +2455,18 @@ smPopup.innerHTML = `
     -webkit-transform: scale(0.9) translateY(-2rem) !important;
             transform: scale(0.9) translateY(-2rem) !important;
 }
+.background{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    pointer-events: none;
+    background: var(--backdrop-background);
+    -webkit-transition: opacity 0.3s;
+    -o-transition: opacity 0.3s;
+    transition: opacity 0.3s;
+}
 .popup{
     display: -webkit-box;
     display: -ms-flexbox;
@@ -2395,17 +2486,9 @@ smPopup.innerHTML = `
     min-height: var(--min-height);
     max-height: 90vh;
     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, -webkit-transform 0.3s;
-    transition: transform 0.3s;
     background: rgba(var(--background-color), 1);
     -webkit-box-shadow: 0 -1rem 2rem #00000020;
             box-shadow: 0 -1rem 2rem #00000020;
-    content-visibility: auto;
 }
 .container-header{
     display: -webkit-box;
@@ -2432,17 +2515,15 @@ smPopup.innerHTML = `
         -ms-flex: 1;
             flex: 1;
     width: 100%;
-    padding: var(--body-padding);
+    padding: var(--body-padding, 1.5rem);
     overflow-y: auto;
 }
 .hide{
-    opacity: 0;
-    pointer-events: none;
-    visiblity: none;
+    display:none;
 }
 @media screen and (min-width: 640px){
     :host{
-        --border-radius: 0.4rem;
+        --border-radius: 0.5rem;
     }
     .popup{
         -ms-flex-item-align: center;
@@ -2450,8 +2531,6 @@ smPopup.innerHTML = `
             align-self: center;
         border-radius: var(--border-radius);
         height: var(--height);
-        -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;
     }
@@ -2486,7 +2565,8 @@ smPopup.innerHTML = `
     }
 }
 </style>
-<div part="background" class="popup-container hide" role="dialog">
+<div class="popup-container hide" role="dialog">
+    <div part="background" class="background"></div>
     <div part="popup" class="popup">
         <div part="popup-header" class="popup-top">
             <div class="handle"></div>
@@ -2500,34 +2580,38 @@ smPopup.innerHTML = `
 `;
 customElements.define('sm-popup', class extends HTMLElement {
     constructor() {
-        super()
+        super();
         this.attachShadow({
             mode: 'open'
-        }).append(smPopup.content.cloneNode(true))
+        }).append(smPopup.content.cloneNode(true));
 
-        this.allowClosing = false
-        this.isOpen = false
-        this.pinned = false
-        this.popupStack
-        this.offset
-        this.touchStartY = 0
-        this.touchEndY = 0
-        this.touchStartTime = 0
-        this.touchEndTime = 0
-        this.touchEndAnimataion
+        this.allowClosing = false;
+        this.isOpen = false;
+        this.pinned = false;
+        this.offset = 0;
+        this.touchStartY = 0;
+        this.touchEndY = 0;
+        this.touchStartTime = 0;
+        this.touchEndTime = 0;
+        this.touchEndAnimation = undefined;
+        this.focusable
+        this.autoFocus
+        this.mutationObserver
 
-        this.popupContainer = this.shadowRoot.querySelector('.popup-container')
-        this.popup = this.shadowRoot.querySelector('.popup')
-        this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot')
-        this.popupHeader = this.shadowRoot.querySelector('.popup-top')
+        this.popupContainer = this.shadowRoot.querySelector('.popup-container');
+        this.backdrop = this.shadowRoot.querySelector('.background');
+        this.popup = this.shadowRoot.querySelector('.popup');
+        this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot');
+        this.popupHeader = this.shadowRoot.querySelector('.popup-top');
 
-        this.resumeScrolling = this.resumeScrolling.bind(this)
-        this.show = this.show.bind(this)
-        this.hide = this.hide.bind(this)
-        this.handleTouchStart = this.handleTouchStart.bind(this)
-        this.handleTouchMove = this.handleTouchMove.bind(this)
-        this.handleTouchEnd = this.handleTouchEnd.bind(this)
-        this.movePopup = this.movePopup.bind(this)
+        this.resumeScrolling = this.resumeScrolling.bind(this);
+        this.setStateOpen = this.setStateOpen.bind(this);
+        this.show = this.show.bind(this);
+        this.hide = this.hide.bind(this);
+        this.handleTouchStart = this.handleTouchStart.bind(this);
+        this.handleTouchMove = this.handleTouchMove.bind(this);
+        this.handleTouchEnd = this.handleTouchEnd.bind(this);
+        this.detectFocus = this.detectFocus.bind(this);
     }
 
     static get observedAttributes() {
@@ -2535,177 +2619,257 @@ customElements.define('sm-popup', class extends HTMLElement {
     }
 
     get open() {
-        return this.isOpen
+        return this.isOpen;
+    }
+
+    animateTo(element, keyframes, options) {
+        const anime = element.animate(keyframes, { ...options, fill: 'both' })
+        anime.finished.then(() => {
+            anime.commitStyles()
+            anime.cancel()
+        })
+        return anime
     }
 
     resumeScrolling() {
         const scrollY = document.body.style.top;
         window.scrollTo(0, parseInt(scrollY || '0') * -1);
-        setTimeout(() => {
-            document.body.style.overflow = 'auto';
-            document.body.style.top = 'initial'
-        }, 300);
+        document.body.style.overflow = 'auto';
+        document.body.style.top = 'initial';
+    }
+
+    setStateOpen() {
+        if (!this.isOpen || this.offset) {
+            const animOptions = {
+                duration: 300,
+                easing: 'ease'
+            }
+            const initialAnimation = (window.innerWidth > 640) ? 'scale(1.1)' : `translateY(${this.offset ? `${this.offset}px` : '100%'})`
+            this.animateTo(this.popup, [
+                {
+                    opacity: this.offset ? 1 : 0,
+                    transform: initialAnimation
+                },
+                {
+                    opacity: 1,
+                    transform: 'none'
+                },
+            ], animOptions)
+
+        }
     }
 
     show(options = {}) {
-        const {pinned = false, popupStack = undefined} = options
-        if (popupStack)
-            this.popupStack = popupStack
-        if (this.popupStack && !this.hasAttribute('open')) {
-            this.popupStack.push({
-                popup: this,
-                permission: pinned
-            })
-            if (this.popupStack.items.length > 1) {
-                this.popupStack.items[this.popupStack.items.length - 2].popup.classList.add('stacked')
+        const { pinned = false } = options;
+        if (!this.isOpen) {
+            const animOptions = {
+                duration: 300,
+                easing: 'ease'
             }
+            if (popupStack) {
+                popupStack.push({
+                    popup: this,
+                    permission: pinned
+                });
+                if (popupStack.items.length > 1) {
+                    this.animateTo(popupStack.items[popupStack.items.length - 2].popup.shadowRoot.querySelector('.popup'), [
+                        { transform: 'none' },
+                        { transform: 'translateY(-1.5rem) scale(0.9)' },
+                    ], animOptions)
+                }
+            }
+            this.popupContainer.classList.remove('hide');
+            if (!this.offset)
+                this.backdrop.animate([
+                    { opacity: 0 },
+                    { opacity: 1 },
+                ], animOptions)
+            this.setStateOpen()
             this.dispatchEvent(
                 new CustomEvent("popupopened", {
                     bubbles: true,
                     detail: {
                         popup: this,
-                        popupStack: this.popupStack
                     }
                 })
-            )
-            this.setAttribute('open', '')
-            this.pinned = pinned
-            this.isOpen = true
+            );
+            this.pinned = pinned;
+            this.isOpen = true;
+            document.body.style.overflow = 'hidden';
+            document.body.style.top = `-${window.scrollY}px`;
+            const elementToFocus = this.autoFocus || this.focusable[0];
+            elementToFocus.tagName.includes('SM-') ? elementToFocus.focusIn() : elementToFocus.focus();
+            if (!this.hasAttribute('open'))
+                this.setAttribute('open', '');
         }
-        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(3rem)';
-        this.popupContainer.classList.add('hide')
-        this.removeAttribute('open')
-        if (typeof this.popupStack !== 'undefined') {
-            this.popupStack.pop()
-            if (this.popupStack.items.length) {
-                this.popupStack.items[this.popupStack.items.length - 1].popup.classList.remove('stacked')
-            } else {
-                this.resumeScrolling()
-            }
-        } else {
-            this.resumeScrolling()
+        const animOptions = {
+            duration: 150,
+            easing: 'ease'
         }
+        this.backdrop.animate([
+            { opacity: 1 },
+            { opacity: 0 }
+        ], animOptions)
+        this.animateTo(this.popup, [
+            {
+                opacity: 1,
+                transform: (window.innerWidth > 640) ? 'none' : `translateY(${this.offset ? `${this.offset}px` : '0'})`
+            },
+            {
+                opacity: 0,
+                transform: (window.innerWidth > 640) ? 'scale(1.1)' : 'translateY(100%)'
+            },
+        ], animOptions).finished
+            .finally(() => {
+                this.popupContainer.classList.add('hide');
+                this.popup.style = ''
+                this.removeAttribute('open');
+                if (typeof popupStack !== 'undefined') {
+                    popupStack.pop();
+                    if (popupStack.items.length) {
+                        this.animateTo(popupStack.items[popupStack.items.length - 1].popup.shadowRoot.querySelector('.popup'), [
+                            { transform: 'translateY(-1.5rem) scale(0.9)' },
+                            { transform: 'none' },
+                        ], animOptions)
 
-        if (this.forms.length) {
-            setTimeout(() => {
-                this.forms.forEach(form => form.reset())
-            }, 300);
-        }
-        setTimeout(() => {
-            this.dispatchEvent(
-                new CustomEvent("popupclosed", {
-                    bubbles: true,
-                    detail: {
-                        popup: this,
-                        popupStack: this.popupStack
+                    } else {
+                        this.resumeScrolling();
                     }
-                })
-            )
-            this.isOpen = false
-        }, 300);
+                } else {
+                    this.resumeScrolling();
+                }
+
+                if (this.forms.length) {
+                    this.forms.forEach(form => form.reset());
+                }
+                this.dispatchEvent(
+                    new CustomEvent("popupclosed", {
+                        bubbles: true,
+                        detail: {
+                            popup: this,
+                        }
+                    })
+                );
+                this.isOpen = false;
+            })
     }
 
     handleTouchStart(e) {
-        this.touchStartY = e.changedTouches[0].clientY
-        this.popup.style.transition = 'transform 0.1s'
-        this.touchStartTime = e.timeStamp
+        this.offset = 0
+        this.popupHeader.addEventListener('touchmove', this.handleTouchMove, { passive: true });
+        this.popupHeader.addEventListener('touchend', this.handleTouchEnd, { passive: true });
+        this.touchStartY = e.changedTouches[0].clientY;
+        this.touchStartTime = e.timeStamp;
     }
 
     handleTouchMove(e) {
         if (this.touchStartY < e.changedTouches[0].clientY) {
             this.offset = e.changedTouches[0].clientY - this.touchStartY;
-            this.touchEndAnimataion = window.requestAnimationFrame(() => this.movePopup())
+            this.touchEndAnimation = window.requestAnimationFrame(() => {
+                this.popup.style.transform = `translateY(${this.offset}px)`;
+            });
         }
     }
 
     handleTouchEnd(e) {
-        this.touchEndTime = e.timeStamp
-        cancelAnimationFrame(this.touchEndAnimataion)
-        this.touchEndY = e.changedTouches[0].clientY
-        this.popup.style.transition = 'transform 0.3s'
-        this.threshold = this.popup.getBoundingClientRect().height * 0.3
+        this.touchEndTime = e.timeStamp;
+        cancelAnimationFrame(this.touchEndAnimation);
+        this.touchEndY = e.changedTouches[0].clientY;
+        this.threshold = this.popup.getBoundingClientRect().height * 0.3;
         if (this.touchEndTime - this.touchStartTime > 200) {
             if (this.touchEndY - this.touchStartY > this.threshold) {
                 if (this.pinned) {
-                    this.show()
-                    return
+                    this.setStateOpen();
+                    return;
                 } else
-                    this.hide()
+                    this.hide();
             } else {
-                this.show()
+                this.setStateOpen();
             }
         } else {
             if (this.touchEndY > this.touchStartY)
                 if (this.pinned) {
-                    this.show()
-                    return
+                    this.setStateOpen();
+                    return;
                 }
                 else
-                    this.hide()
+                    this.hide();
+        }
+        this.popupHeader.removeEventListener('touchmove', this.handleTouchMove, { passive: true });
+        this.popupHeader.removeEventListener('touchend', this.handleTouchEnd, { passive: true });
+    }
+
+
+    detectFocus(e) {
+        if (e.code === 'Tab') {
+            const lastElement = this.focusable[this.focusable.length - 1];
+            const firstElement = this.focusable[0];
+            if (e.shiftKey && document.activeElement === firstElement) {
+                e.preventDefault();
+                lastElement.tagName.includes('SM-') ? lastElement.focusIn() : lastElement.focus();
+            } else if (!e.shiftKey && document.activeElement === lastElement) {
+                e.preventDefault();
+                firstElement.tagName.includes('SM-') ? firstElement.focusIn() : firstElement.focus();
+            }
         }
     }
 
-    movePopup() {
-        this.popup.style.transform = `translateY(${this.offset}px)`
+    updateFocusableList() {
+        this.focusable = this.querySelectorAll('sm-button:not([disabled]), button:not([disabled]), [href], sm-input, input, sm-select, select, sm-checkbox, sm-textarea, textarea, [tabindex]:not([tabindex="-1"])')
+        this.autoFocus = this.querySelector('[autofocus]')
     }
 
     connectedCallback() {
-
         this.popupBodySlot.addEventListener('slotchange', () => {
-            this.forms = this.querySelectorAll('sm-form')
-        })
+            this.forms = this.querySelectorAll('sm-form');
+            this.updateFocusableList()
+        });
         this.popupContainer.addEventListener('mousedown', e => {
             if (e.target === this.popupContainer && !this.pinned) {
                 if (this.pinned) {
-                    this.show()
+                    this.setStateOpen();
                 } else
-                    this.hide()
+                    this.hide();
             }
-        })
+        });
 
         const resizeObserver = new ResizeObserver(entries => {
             for (let entry of entries) {
                 if (entry.contentBoxSize) {
                     // Firefox implements `contentBoxSize` as a single content rect, rather than an array
                     const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
-                    this.threshold = entry.blockSize.height * 0.3
+                    this.threshold = contentBoxSize.blockSize.height * 0.3;
                 } else {
-                    this.threshold = entry.contentRect.height * 0.3
+                    this.threshold = entry.contentRect.height * 0.3;
                 }
             }
         });
-        resizeObserver.observe(this)
-        
-        
-        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 })
+        resizeObserver.observe(this);
+
+        this.mutationObserver = new MutationObserver(entries => {
+            this.updateFocusableList()
+        })
+        this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true })
+
+        this.addEventListener('keydown', this.detectFocus);
+        this.popupHeader.addEventListener('touchstart', this.handleTouchStart, { passive: true });
     }
     disconnectedCallback() {
-        this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, { passive: true })
-        this.popupHeader.removeEventListener('touchmove', this.handleTouchMove, { passive: true })
-        this.popupHeader.removeEventListener('touchend', this.handleTouchEnd, { passive: true })
-        resizeObserver.unobserve()
+        this.removeEventListener('keydown', this.detectFocus);
+        resizeObserver.unobserve();
+        this.mutationObserver.disconnect()
+        this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, { passive: true });
     }
-    attributeChangedCallback(name, oldVal, newVal) {
+    attributeChangedCallback(name) {
         if (name === 'open') {
             if (this.hasAttribute('open')) {
-                this.show()
+                this.show();
             }
         }
     }
-})
-
+});
 const smRadio = document.createElement('template')
 smRadio.innerHTML = `
 <style>
@@ -2836,7 +3000,7 @@ window.customElements.define('sm-radio', class extends HTMLElement {
             this.dispatchEvent(new CustomEvent(`changed${this.getAttribute('name')}`, this.options))
         }
     }
-    handleKeyDown(e){
+    handleKeyDown(e) {
         if (e.code === "Space") {
             e.preventDefault()
             this.handleClick()
@@ -2847,7 +3011,7 @@ window.customElements.define('sm-radio', class extends HTMLElement {
             this.setAttribute('checked', '')
             this.dispatchGroupEvent()
         }
-        
+
     }
     handleRadioGroup(e) {
         if (e.detail.uid !== this.uniqueId) {
@@ -2936,10 +3100,6 @@ smSwitch.innerHTML = `
         cursor: pointer;
         -webkit-tap-highlight-color: transparent;
     }
-    :host(:not([disabled])) label:focus-visible{
-        -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);
-            box-shadow: 0 0 0 0.1rem var(--accent-color);
-    }
     :host([disabled]) {
         cursor: not-allowed;
         opacity: 0.6;
@@ -2979,15 +3139,12 @@ smSwitch.innerHTML = `
         border-radius: 1rem;
     }
     
-    .switch:active .button::after,
-    .switch:focus .button::after{
-        opacity: 1
-    }
-    .switch:focus-visible .button::after{
-        opacity: 1
+    label:active .thumb::after,
+    label:focus-within .thumb::after{
+        opacity: 1;
     }
     
-    .button::after{
+    .thumb::after{
         content: '';
         display: -webkit-box;
         display: -ms-flexbox;
@@ -3003,7 +3160,7 @@ smSwitch.innerHTML = `
         transition: opacity 0.3s;
     }
     
-    .button {
+    .thumb {
         position: relative;
         display: -webkit-inline-box;
         display: -ms-inline-flexbox;
@@ -3027,7 +3184,7 @@ smSwitch.innerHTML = `
         border: solid 0.3rem white;
     }
     
-    input:checked ~ .button {
+    input:checked ~ .thumb {
         -webkit-transform: translateX(100%);
             -ms-transform: translateX(100%);
                 transform: translateX(100%);
@@ -3042,7 +3199,7 @@ smSwitch.innerHTML = `
     <div part="switch" class="switch">
         <input type="checkbox">
         <div class="track"></div>
-        <div class="button"></div>
+        <div class="thumb"></div>
     </div>
     <slot name="right"></slot>
 </label>`
@@ -3089,12 +3246,16 @@ customElements.define('sm-switch', class extends HTMLElement {
         }
     }
 
-    dispatch(){
+    reset() {
+
+    }
+
+    dispatch() {
         this.dispatchEvent(new CustomEvent('change', {
             bubbles: true,
             composed: true,
             detail: {
-                value: this.isChecked 
+                value: this.isChecked
             }
         }))
     }
@@ -3118,21 +3279,21 @@ customElements.define('sm-switch', class extends HTMLElement {
         if (oldValue !== newValue) {
             if (name === 'disabled') {
                 if (this.hasAttribute('disabled')) {
-                    this.disabled = true                
+                    this.disabled = true
                 }
                 else {
-                    this.disabled = false                
+                    this.disabled = false
                 }
             }
             else if (name === 'checked') {
                 if (this.hasAttribute('checked')) {
                     this.isChecked = true
-                    this.input.checked = true            
+                    this.input.checked = true
                 }
                 else {
                     this.isChecked = false
-                    this.input.checked = false               
-                } 
+                    this.input.checked = false
+                }
             }
         }
     }
@@ -3148,9 +3309,9 @@ smSelect.innerHTML = `
             box-sizing: border-box;
 } 
 :host{
-    display: -webkit-inline-box;
-    display: -ms-inline-flexbox;
-    display: inline-flex;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
     --accent-color: #4d2588;
     --text-color: 17, 17, 17;
     --background-color: 255, 255, 255;
@@ -3161,9 +3322,6 @@ smSelect.innerHTML = `
     opacity: 0.6;
     cursor: not-allowed;
 }
-.hide{
-    display: none !important;
-}
 .select{
     position: relative;
     display: -webkit-box;
@@ -3178,16 +3336,18 @@ smSelect.innerHTML = `
     -webkit-tap-highlight-color: transparent;
 }
 .icon {
-    height: 1.5rem;
-    width: 1.5rem;
+    height: 1.2rem;
+    width: 1.2rem;
+    margin-left: 0.5rem;
     fill: rgba(var(--text-color), 0.7);
 }      
 .selected-option-text{
-    font-size: 0.9rem;
+    font-size: inherit;
     overflow: hidden;
     -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
     white-space: nowrap;
+    font-weight: 500;
 }
 .selection{
     border-radius: 0.3rem;
@@ -3196,21 +3356,19 @@ smSelect.innerHTML = `
     -ms-grid-columns: 1fr auto;
     grid-template-columns: 1fr auto;
         grid-template-areas: 'heading heading' '. .';
-    padding: 0.4rem 1rem;
+    padding: 0.4rem 0.8rem;
     background: rgba(var(--text-color), 0.06);
     border: solid 1px rgba(var(--text-color), 0.2);
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
     outline: none;
+    z-index: 2;
 }
 .selection:focus{
     -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);
             box-shadow: 0 0 0 0.1rem var(--accent-color) 
 }
-.icon{
-    margin-left: 1rem;
-}
 :host([align-select="left"]) .options{
     left: 0;
 }
@@ -3219,6 +3377,7 @@ smSelect.innerHTML = `
 }
 .options{
     top: 100%;
+    padding: var(--options-padding, 0.3rem);
     margin-top: 0.2rem; 
     overflow: hidden auto;
     position: absolute;
@@ -3234,8 +3393,8 @@ smSelect.innerHTML = `
     max-height: var(--max-height);
     background: rgba(var(--background-color), 1);
     border: solid 1px rgba(var(--text-color), 0.2);
-    border-radius: 0.3rem;
-    z-index: 2;
+    border-radius: var(--border-radius, 0.5rem);
+    z-index: 1;
     -webkit-box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
             box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
 }
@@ -3244,6 +3403,9 @@ smSelect.innerHTML = `
         -ms-transform: rotate(180deg);
             transform: rotate(180deg)
 }
+.hide{
+    display: none;
+}
 @media (any-hover: hover){
     ::-webkit-scrollbar{
         width: 0.5rem;
@@ -3259,7 +3421,7 @@ smSelect.innerHTML = `
     }
 }
 </style>
-<div class="select" >
+<div class="select">
     <div class="selection">
         <div class="selected-option-text"></div>
         <svg class="icon toggle" 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 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>
@@ -3275,6 +3437,7 @@ customElements.define('sm-select', class extends HTMLElement {
             mode: 'open'
         }).append(smSelect.content.cloneNode(true))
 
+        this.focusIn = this.focusIn.bind(this)
         this.reset = this.reset.bind(this)
         this.open = this.open.bind(this)
         this.collapse = this.collapse.bind(this)
@@ -3287,6 +3450,7 @@ customElements.define('sm-select', class extends HTMLElement {
         this.availableOptions
         this.previousOption
         this.isOpen = false;
+        this.label = ''
         this.slideDown = [{
             transform: `translateY(-0.5rem)`,
             opacity: 0
@@ -3317,7 +3481,7 @@ customElements.define('sm-select', class extends HTMLElement {
         this.selectedOptionText = this.shadowRoot.querySelector('.selected-option-text')
     }
     static get observedAttributes() {
-        return ['value', 'disabled']
+        return ['disabled', 'label']
     }
     get value() {
         return this.getAttribute('value')
@@ -3326,8 +3490,24 @@ customElements.define('sm-select', class extends HTMLElement {
         this.setAttribute('value', val)
     }
 
-    reset() {
+    reset(fire = true) {
+        if (this.availableOptions[0] && this.previousOption !== this.availableOptions[0]) {
+            const firstElement = this.availableOptions[0];
+            if (this.previousOption) {
+                this.previousOption.classList.remove('check-selected')
+            }
+            firstElement.classList.add('check-selected')
+            this.value = firstElement.getAttribute('value')
+            this.selectedOptionText.textContent = `${this.label}${firstElement.textContent}`
+            this.previousOption = firstElement;
+            if (fire) {
+                this.fireEvent()
+            }
+        }
+    }
 
+    focusIn() {
+        this.selection.focus()
     }
 
     open() {
@@ -3383,7 +3563,7 @@ customElements.define('sm-select', class extends HTMLElement {
     handleOptionSelection(e) {
         if (this.previousOption !== document.activeElement) {
             this.value = document.activeElement.getAttribute('value')
-            this.selectedOptionText.textContent = document.activeElement.textContent;
+            this.selectedOptionText.textContent = `${this.label}${document.activeElement.textContent}`;
             this.fireEvent()
             if (this.previousOption) {
                 this.previousOption.classList.remove('check-selected')
@@ -3435,16 +3615,7 @@ customElements.define('sm-select', class extends HTMLElement {
         let slot = this.shadowRoot.querySelector('slot')
         slot.addEventListener('slotchange', e => {
             this.availableOptions = slot.assignedElements()
-            if (this.availableOptions[0]) {
-                let firstElement = this.availableOptions[0];
-                this.previousOption = firstElement;
-                firstElement.classList.add('check-selected')
-                this.value = firstElement.getAttribute('value')
-                this.selectedOptionText.textContent = firstElement.textContent
-                this.availableOptions.forEach((element) => {
-                    element.setAttribute('tabindex', "0");
-                })
-            }
+            this.reset(false)
         });
         this.addEventListener('click', this.handleClick)
         this.addEventListener('keydown', this.handleKeydown)
@@ -3462,6 +3633,8 @@ customElements.define('sm-select', class extends HTMLElement {
             } else {
                 this.selection.setAttribute('tabindex', '0')
             }
+        } else if (name === 'label') {
+            this.label = this.hasAttribute('label') ? `${this.getAttribute('label')} ` : ''
         }
     }
 })
@@ -3482,18 +3655,20 @@ smOption.innerHTML = `
     display: flex;
 }
 .option{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
+    display: grid;
     -webkit-box-align: center;
         -ms-flex-align: center;
             align-items: center;
-    min-width: 100%;
-    padding: 0.8rem 1.2rem;
+    min-width: max-content;
+    width: 100%;
+    gap: 0.5rem;
+    grid-template-columns: max-content minmax(0, 1fr);
+    padding: var(--padding, 0.6rem 1rem);
     cursor: pointer;
-    overflow-wrap: break-word;
+    white-space: nowrap;
     outline: none;
     user-select: none;
+    border-radius: var(--border-radius, 0.3rem);
 }
 :host(:focus){
     outline: none;
@@ -3503,7 +3678,6 @@ smOption.innerHTML = `
     opacity: 0;
     height: 1.2rem;
     width: 1.2rem;
-    margin-right: 0.5rem;
     fill: rgba(var(--text-color), 0.8);
 }
 :host(:focus) .option .icon{
@@ -3535,10 +3709,10 @@ customElements.define('sm-option', class extends HTMLElement {
 
     connectedCallback() {
         this.setAttribute('role', 'option')
+        this.setAttribute('tabindex', '0')
     }
 })
-
-const spinner = document.createElement('template')
+const spinner = document.createElement('template');
 spinner.innerHTML = `
 <style>     
 *{
@@ -3549,10 +3723,12 @@ spinner.innerHTML = `
 }
 :host{
     --accent-color: #4d2588;
+    --height: 1.6rem;
+    --width: 1.6rem;
 }
 .loader {
-    height: 1.6rem;
-    width: 1.6rem;
+    height: var(--height);
+    width: var(--weight);
     stroke-width: 8;
     overflow: visible;
     stroke: var(--accent-color);
@@ -3578,18 +3754,17 @@ spinner.innerHTML = `
 </style>
 <svg viewBox="0 0 64 64" class="loader"><circle cx="32" cy="32" r="32" /></svg>
 
-`
-class SquareLoader extends HTMLElement {
+`;
+class SpinnerLoader extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({
             mode: 'open'
-        }).append(spinner.content.cloneNode(true))
+        }).append(spinner.content.cloneNode(true));
     }
 }
-
-window.customElements.define('sm-spinner', SquareLoader);
-const stripSelect = document.createElement('template')
+window.customElements.define('sm-spinner', SpinnerLoader);
+const stripSelect = document.createElement('template');
 stripSelect.innerHTML = `
 <style>
     *{
@@ -3602,7 +3777,7 @@ stripSelect.innerHTML = `
         --accent-color: #4d2588;
         --text-color: 17, 17, 17;
         --background-color: 255, 255, 255;
-        --gap: 0.5rem;
+        padding: 1rem 0;
     }
     .hide{
         display: none !important;
@@ -3614,7 +3789,6 @@ stripSelect.innerHTML = `
         position: relative;
         display: flex;
         align-items: center;
-        padding: 1rem 0;
     }
     .strip-select{
         position: relative;
@@ -3622,13 +3796,13 @@ stripSelect.innerHTML = `
     :host([multiline]) .strip-select{
         display: flex;
         flex-wrap: wrap;
-        gap: 0.5rem;
+        gap: var(--gap, 0.5rem);
         overflow: auto hidden;
     }
     :host(:not([multiline])) .strip-select{
         display: grid;
         grid-auto-flow: column;
-        gap: var(--gap);
+        gap: var(--gap, 0.5rem);
         max-width: 100%;   
         align-items: center;
         overflow: auto hidden;
@@ -3655,13 +3829,6 @@ stripSelect.innerHTML = `
         height: 100%;
         pointer-events: none;
     }
-    .cover--left{
-        background: linear-gradient(90deg, rgba(var(--background-color), 1) 60%, transparent);
-    }
-    .cover--right{
-        right: 0;
-        background: linear-gradient(90deg, transparent 0%, rgba(var(--background-color), 1) 40%);
-    }
     .nav-button--right::before{
         background-color: red;
     }
@@ -3671,6 +3838,9 @@ stripSelect.innerHTML = `
         fill: rgba(var(--text-color), .8);
     }
     @media (hover: none){
+        ::-webkit-scrollbar {
+            height: 0;
+        }
         .nav-button{
             display: none;
         }
@@ -3680,6 +3850,13 @@ stripSelect.innerHTML = `
         .cover{
             width: 2rem;
         }
+        .cover--left{
+            background: linear-gradient(90deg, rgba(var(--background-color), 1), transparent);
+        }
+        .cover--right{
+            right: 0;
+            background: linear-gradient(90deg, transparent, rgba(var(--background-color), 1));
+        }
     }
     @media (hover: hover){
         ::-webkit-scrollbar-track {
@@ -3692,6 +3869,13 @@ stripSelect.innerHTML = `
         .strip-select{
             overflow: hidden;
         }
+        .cover--left{
+            background: linear-gradient(90deg, rgba(var(--background-color), 1) 60%, transparent);
+        }
+        .cover--right{
+            right: 0;
+            background: linear-gradient(90deg, transparent 0%, rgba(var(--background-color), 1) 40%);
+        }
     }
 </style>
 <section class="scrolling-container">
@@ -3708,39 +3892,39 @@ stripSelect.innerHTML = `
     <div class="cover cover--right hide"></div>
 </section>
 
-`
-customElements.define('strip-select', class extends HTMLElement{
+`;
+customElements.define('strip-select', class extends HTMLElement {
     constructor() {
-        super()
+        super();
         this.attachShadow({
             mode: 'open'
-        }).append(stripSelect.content.cloneNode(true))
-        this.stripSelect = this.shadowRoot.querySelector('.strip-select')
-        this.slottedOptions
-        this._value
-        this.scrollDistance
+        }).append(stripSelect.content.cloneNode(true));
+        this.stripSelect = this.shadowRoot.querySelector('.strip-select');
+        this.slottedOptions = undefined;
+        this._value = undefined;
+        this.scrollDistance = 0;
 
-        this.scrollLeft = this.scrollLeft.bind(this)
-        this.scrollRight = this.scrollRight.bind(this)
-        this.fireEvent = this.fireEvent.bind(this)
+        this.scrollLeft = this.scrollLeft.bind(this);
+        this.scrollRight = this.scrollRight.bind(this);
+        this.fireEvent = this.fireEvent.bind(this);
     }
     get value() {
-        return this._value
+        return this._value;
     }
-    scrollLeft(){
+    scrollLeft() {
         this.stripSelect.scrollBy({
             left: -this.scrollDistance,
             behavior: 'smooth'
-        })
+        });
     }
 
-    scrollRight(){
+    scrollRight() {
         this.stripSelect.scrollBy({
             left: this.scrollDistance,
             behavior: 'smooth'
-        })
+        });
     }
-    fireEvent(){
+    fireEvent() {
         this.dispatchEvent(
             new CustomEvent("change", {
                 bubbles: true,
@@ -3749,104 +3933,104 @@ customElements.define('strip-select', class extends HTMLElement{
                     value: this._value
                 }
             })
-        )
+        );
     }
     connectedCallback() {
-        this.setAttribute('role', 'listbox')
+        this.setAttribute('role', 'listbox');
 
-        const slot = this.shadowRoot.querySelector('slot')
-        const coverLeft = this.shadowRoot.querySelector('.cover--left')
-        const coverRight = this.shadowRoot.querySelector('.cover--right')
-        const navButtonLeft = this.shadowRoot.querySelector('.nav-button--left')
-        const navButtonRight = this.shadowRoot.querySelector('.nav-button--right')
+        const slot = this.shadowRoot.querySelector('slot');
+        const coverLeft = this.shadowRoot.querySelector('.cover--left');
+        const coverRight = this.shadowRoot.querySelector('.cover--right');
+        const navButtonLeft = this.shadowRoot.querySelector('.nav-button--left');
+        const navButtonRight = this.shadowRoot.querySelector('.nav-button--right');
         slot.addEventListener('slotchange', e => {
-            const assignedElements = slot.assignedElements()
+            const assignedElements = slot.assignedElements();
             assignedElements.forEach(elem => {
                 if (elem.hasAttribute('selected')) {
-                    elem.setAttribute('active', '')
-                    this._value = elem.value
+                    elem.setAttribute('active', '');
+                    this._value = elem.value;
                 }
-            })
+            });
             if (!this.hasAttribute('multiline')) {
                 if (assignedElements.length > 0) {
-                    firstOptionObserver.observe(slot.assignedElements()[0])
-                    lastOptionObserver.observe(slot.assignedElements()[slot.assignedElements().length - 1])
+                    firstOptionObserver.observe(slot.assignedElements()[0]);
+                    lastOptionObserver.observe(slot.assignedElements()[slot.assignedElements().length - 1]);
                 }
                 else {
-                    navButtonLeft.classList.add('hide')
-                    navButtonRight.classList.add('hide')
-                    coverLeft.classList.add('hide')
-                    coverRight.classList.add('hide')
-                    firstOptionObserver.disconnect()
-                    lastOptionObserver.disconnect()
+                    navButtonLeft.classList.add('hide');
+                    navButtonRight.classList.add('hide');
+                    coverLeft.classList.add('hide');
+                    coverRight.classList.add('hide');
+                    firstOptionObserver.disconnect();
+                    lastOptionObserver.disconnect();
                 }
             }
-        })
+        });
         const resObs = new ResizeObserver(entries => {
             entries.forEach(entry => {
-                if(entry.contentBoxSize) {
+                if (entry.contentBoxSize) {
                     // Firefox implements `contentBoxSize` as a single content rect, rather than an array
                     const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
-                    
-                    this.scrollDistance = contentBoxSize.inlineSize * 0.6
+
+                    this.scrollDistance = contentBoxSize.inlineSize * 0.6;
                 } else {
-                    this.scrollDistance = entry.contentRect.width * 0.6
-                  }
-            })
-        })
-        resObs.observe(this)
+                    this.scrollDistance = entry.contentRect.width * 0.6;
+                }
+            });
+        });
+        resObs.observe(this);
         this.stripSelect.addEventListener('option-clicked', e => {
             if (this._value !== e.target.value) {
-                this._value = e.target.value
-                slot.assignedElements().forEach(elem => elem.removeAttribute('active'))
-                e.target.setAttribute('active', '')
-                e.target.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" })
-                this.fireEvent()
+                this._value = e.target.value;
+                slot.assignedElements().forEach(elem => elem.removeAttribute('active'));
+                e.target.setAttribute('active', '');
+                e.target.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
+                this.fireEvent();
             }
-        })
+        });
         const firstOptionObserver = new IntersectionObserver(entries => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
-                    navButtonLeft.classList.add('hide')
-                    coverLeft.classList.add('hide')
+                    navButtonLeft.classList.add('hide');
+                    coverLeft.classList.add('hide');
                 }
                 else {
-                    navButtonLeft.classList.remove('hide')
-                    coverLeft.classList.remove('hide')
+                    navButtonLeft.classList.remove('hide');
+                    coverLeft.classList.remove('hide');
                 }
-            })
+            });
         },
-        {
-            threshold: 0.9,
-            root: this
-        })
+            {
+                threshold: 0.9,
+                root: this
+            });
         const lastOptionObserver = new IntersectionObserver(entries => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
-                    navButtonRight.classList.add('hide')
-                    coverRight.classList.add('hide')
+                    navButtonRight.classList.add('hide');
+                    coverRight.classList.add('hide');
                 }
                 else {
-                    navButtonRight.classList.remove('hide')
-                    coverRight.classList.remove('hide')
+                    navButtonRight.classList.remove('hide');
+                    coverRight.classList.remove('hide');
                 }
-            })
+            });
         },
-        {
-            threshold: 0.9,
-            root: this
-        })
-        navButtonLeft.addEventListener('click', this.scrollLeft)
-        navButtonRight.addEventListener('click', this.scrollRight)
+            {
+                threshold: 0.9,
+                root: this
+            });
+        navButtonLeft.addEventListener('click', this.scrollLeft);
+        navButtonRight.addEventListener('click', this.scrollRight);
     }
     disconnectedCallback() {
-        navButtonLeft.removeEventListener('click', this.scrollLeft)
-        navButtonRight.removeEventListener('click', this.scrollRight)    
+        navButtonLeft.removeEventListener('click', this.scrollLeft);
+        navButtonRight.removeEventListener('click', this.scrollRight);
     }
-})
+});
 
 //Strip option
-const stripOption = document.createElement('template')
+const stripOption = document.createElement('template');
 stripOption.innerHTML = `
 <style>
     *{
@@ -3856,25 +4040,21 @@ stripOption.innerHTML = `
                 box-sizing: border-box;
     }  
     :host{
-        --border-radius: 2rem;
         --background-color: inherit;
-        --active-option-color: inherit;
-        --active-option-backgroud-color: rgba(var(--text-color), .2);
     }
     .strip-option{
         display: flex;
         flex-shrink: 0;
         cursor: pointer;
         white-space: nowrap;
-        padding: 0.5rem 0.8rem;
+        padding: var(--padding, 0.4rem 0.6rem);
         transition: background 0.3s;
-        border-radius: var(--border-radius);
-        box-shadow: 0 0 0 1px rgba(var(--text-color), .2) inset;
+        border-radius: var(--border-radius, 2rem);
         -webkit-tap-highlight-color: transparent;
     }
     :host([active]) .strip-option{
-        color: var(--active-option-color);
-        background-color: var(--active-option-backgroud-color);
+        color: var(--active-option-color, inherit);
+        background-color: var(--active-background-color, rgba(var(--text-color), 0.06));
     }
     :host(:focus-within){
         outline: none;
@@ -3889,23 +4069,23 @@ stripOption.innerHTML = `
 <label class="strip-option">
     <slot></slot>
 </label>
-`
-customElements.define('strip-option', class extends HTMLElement{
+`;
+customElements.define('strip-option', class extends HTMLElement {
     constructor() {
-        super()
+        super();
         this.attachShadow({
             mode: 'open'
-        }).append(stripOption.content.cloneNode(true))
-        this._value
-        this.radioButton = this.shadowRoot.querySelector('input')
-        
-        this.fireEvent = this.fireEvent.bind(this)
-        this.handleKeyDown = this.handleKeyDown.bind(this)
+        }).append(stripOption.content.cloneNode(true));
+        this._value = undefined;
+        this.radioButton = this.shadowRoot.querySelector('input');
+
+        this.fireEvent = this.fireEvent.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
     }
     get value() {
-        return this._value
+        return this._value;
     }
-    fireEvent(){
+    fireEvent() {
         this.dispatchEvent(
             new CustomEvent("option-clicked", {
                 bubbles: true,
@@ -3914,25 +4094,25 @@ customElements.define('strip-option', class extends HTMLElement{
                     value: this._value
                 }
             })
-        )
+        );
     }
-    handleKeyDown(e){
+    handleKeyDown(e) {
         if (e.key === 'Enter' || e.key === 'Space') {
-            this.fireEvent()
+            this.fireEvent();
         }
     }
     connectedCallback() {
-        this.setAttribute('role', 'option')
-        this.setAttribute('tabindex', '0')
-        this._value = this.getAttribute('value')
-        this.addEventListener('click', this.fireEvent)
-        this.addEventListener('keydown', this.handleKeyDown)
+        this.setAttribute('role', 'option');
+        this.setAttribute('tabindex', '0');
+        this._value = this.getAttribute('value');
+        this.addEventListener('click', this.fireEvent);
+        this.addEventListener('keydown', this.handleKeyDown);
     }
     disconnectedCallback() {
-        this.removeEventListener('click', this.fireEvent)
-        this.removeEventListener('keydown', this.handleKeyDown)
+        this.removeEventListener('click', this.fireEvent);
+        this.removeEventListener('keydown', this.handleKeyDown);
     }
-})
+});
 const smTabHeader = document.createElement('template')
 smTabHeader.innerHTML = `
 <style>
@@ -3949,6 +4129,8 @@ smTabHeader.innerHTML = `
         --accent-color: #4d2588;
         --text-color: 17, 17, 17;
         --background-color: 255, 255, 255;
+        --gap: 1rem;
+        --justify-content: flex-start;
         --tab-indicator-border-radius: 0.3rem;
     }
     .tabs{
@@ -3961,10 +4143,8 @@ smTabHeader.innerHTML = `
         display: -ms-grid;
         display: grid;
         grid-auto-flow: column;
-        -webkit-box-pack: start;
-            -ms-flex-pack: start;
-                justify-content: flex-start;
-        gap: 1rem;
+        justify-content: var(--justify-content);
+        gap: var(--gap);
         position: relative;
         overflow: auto hidden;
         max-width: 100%;
@@ -4008,7 +4188,7 @@ smTabHeader.innerHTML = `
         color: var(--accent-color);
         opacity: 1;
     }
-    @media (hover: none){
+    @media (any-hover: none){
         .tab-header::-webkit-scrollbar-track {
             -webkit-box-shadow: none !important;
             background-color: transparent !important;
@@ -4018,6 +4198,11 @@ smTabHeader.innerHTML = `
             background-color: transparent;
         }
     }         
+    @media (any-hover: hover){
+        .tab-header{
+            overflow: hidden;
+        }
+    }         
 </style>
 <div part="tab-container" class="tabs">
     <div part="tab-header" class="tab-header">
@@ -4045,6 +4230,7 @@ customElements.define('sm-tab-header', class extends HTMLElement {
         this.changeTab = this.changeTab.bind(this)
         this.handleClick = this.handleClick.bind(this)
         this.handlePanelChange = this.handlePanelChange.bind(this)
+        this.moveIndiactor = this.moveIndiactor.bind(this)
     }
 
     fireEvent(index) {
@@ -4070,10 +4256,9 @@ customElements.define('sm-tab-header', class extends HTMLElement {
             this.prevTab.classList.remove('active')
         target.classList.add('active')
 
-        target.scrollIntoView({
+        this.tabHeader.scrollTo({
             behavior: 'smooth',
-            block: 'nearest',
-            inline: 'center'
+            left: target.getBoundingClientRect().left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft
         })
         this.moveIndiactor(target.getBoundingClientRect())
         this.prevTab = target;
@@ -4085,9 +4270,8 @@ customElements.define('sm-tab-header', class extends HTMLElement {
             this.fireEvent(e.target.dataset.index)
         }
     }
-    
+
     handlePanelChange(e) {
-        console.log(this.allTabs)
         this.changeTab(this.allTabs[e.detail.index])
     }
 
@@ -4158,6 +4342,7 @@ smTab.innerHTML = `
         display: -ms-inline-flexbox;
         display: inline-flex;
         z-index: 1;
+        --padding: 0.8rem 1rem;
     }
     .tab{
         position: relative;
@@ -4171,7 +4356,7 @@ smTab.innerHTML = `
         cursor: pointer;
         -webkit-tap-highlight-color: transparent;
         white-space: nowrap;
-        padding: 0.4rem 0.8rem;
+        padding: var(--padding);
         font-weight: 500;
         word-spacing: 0.1rem;
         text-align: center;
@@ -4265,7 +4450,6 @@ customElements.define('sm-tab-panels', class extends HTMLElement {
         this.isTransitioning = false
 
         this.panelContainer = this.shadowRoot.querySelector('.panel-container');
-        this.panelSlot = this.shadowRoot.querySelector('slot');
         this.handleTabChange = this.handleTabChange.bind(this)
     }
     handleTabChange(e) {
@@ -4289,8 +4473,9 @@ customElements.define('sm-tab-panels', class extends HTMLElement {
         )
     }
     connectedCallback() {
-        this.panelSlot.addEventListener('slotchange', () => {
-            this.allPanels = this.panelSlot.assignedElements()
+        const slot = this.shadowRoot.querySelector('slot');
+        slot.addEventListener('slotchange', (e) => {
+            this.allPanels = e.target.assignedElements()
             this.allPanels.forEach((panel, index) => {
                 panel.dataset.index = index
                 intersectionObserver.observe(panel)
@@ -4302,7 +4487,7 @@ customElements.define('sm-tab-panels', class extends HTMLElement {
 
             entries.forEach(entry => {
                 if (!this.isTransitioning && entry.isIntersecting) {
-                    this.fireEvent(entry.target.dataset.index), 3000
+                    this.fireEvent(entry.target.dataset.index)
                 }
             })
         }, {
@@ -4314,7 +4499,6 @@ customElements.define('sm-tab-panels', class extends HTMLElement {
         document.removeEventListener(`switchedtab${this.id}`, this.handleTabChange)
     }
 })
-
 const tagsInput = document.createElement('template')
 tagsInput.innerHTML = `
   <style>
@@ -4400,135 +4584,138 @@ tagsInput.innerHTML = `
 `
 
 customElements.define('tags-input', class extends HTMLElement {
-	constructor() {
-		super()
-		this.attachShadow({
-			mode: 'open'
-		}).append(tagsInput.content.cloneNode(true))
-		
-		this.input = this.shadowRoot.querySelector('input')
-		this.tagsWrapper = this.shadowRoot.querySelector('.tags-wrapper')
-		this.placeholder = this.shadowRoot.querySelector('.placeholder')
-		this.reflectedAttributes = ['placeholder', 'limit']
-		this.limit = undefined
-		this.tags = new Set()
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(tagsInput.content.cloneNode(true))
 
-		this.reset = this.reset.bind(this)
-		this.handleInput = this.handleInput.bind(this)
-		this.handleKeydown = this.handleKeydown.bind(this)
-		this.handleClick = this.handleClick.bind(this)
-		this.removeTag = this.removeTag.bind(this)
-	}
-	static get observedAttributes() {
-		return ['placeholder', 'limit']
-	}
-	get value() {
-		return [...this.tags].join()
-	}
-	focusIn() {
-		this.input.focus()
-	}
-	reset(){
-		this.input.value = ''
-		this.tags.clear()
-		while (this.input.previousElementSibling) {
-			this.input.previousElementSibling.remove()
-		}
-	}
-	handleInput(e){
-		const inputValueLength = e.target.value.trim().length
-		e.target.setAttribute('size', inputValueLength ? inputValueLength : '3')
-		if (inputValueLength) {
-			this.placeholder.classList.add('hide')
-		}
-		else if (!inputValueLength && !this.tags.size) {
-			this.placeholder.classList.remove('hide')
-		}
-	}
-	handleKeydown(e){
-		if (e.key === ',' || e.key === '/') {
-			e.preventDefault()
-		}
-		if (e.target.value.trim() !== '') {
-			if (e.key === 'Enter' || e.key === ',' || e.key === '/' || e.code === 'Space') {
-				const tagValue = e.target.value.trim()
-				if (this.tags.has(tagValue)) {
-					this.tagsWrapper.querySelector(`[data-value="${tagValue}"]`).animate([
-						{
-							backgroundColor: 'initial'
-						},
-						{
-							backgroundColor: 'var(--accent-color)'
-						},
-						{
-							backgroundColor: 'initial'
-						},
-					], {
-						duration: 300,
-						easing: 'ease'
-					})
-				}
-				else {
-					const tag = document.createElement('span')
-					tag.dataset.value = tagValue
-					tag.className = 'tag'
-					tag.innerHTML = `
+        this.input = this.shadowRoot.querySelector('input')
+        this.tagsWrapper = this.shadowRoot.querySelector('.tags-wrapper')
+        this.placeholder = this.shadowRoot.querySelector('.placeholder')
+        this.reflectedAttributes = ['placeholder', 'limit']
+        this.limit = undefined
+        this.tags = new Set()
+
+        this.reset = this.reset.bind(this)
+        this.handleInput = this.handleInput.bind(this)
+        this.handleKeydown = this.handleKeydown.bind(this)
+        this.handleClick = this.handleClick.bind(this)
+        this.removeTag = this.removeTag.bind(this)
+    }
+    static get observedAttributes() {
+        return ['placeholder', 'limit']
+    }
+    get value() {
+        return [...this.tags].join()
+    }
+    get isValid() {
+        return this.tags.size
+    }
+    focusIn() {
+        this.input.focus()
+    }
+    reset() {
+        this.input.value = ''
+        this.tags.clear()
+        while (this.input.previousElementSibling) {
+            this.input.previousElementSibling.remove()
+        }
+    }
+    handleInput(e) {
+        const inputValueLength = e.target.value.trim().length
+        e.target.setAttribute('size', inputValueLength ? inputValueLength : '3')
+        if (inputValueLength) {
+            this.placeholder.classList.add('hide')
+        }
+        else if (!inputValueLength && !this.tags.size) {
+            this.placeholder.classList.remove('hide')
+        }
+    }
+    handleKeydown(e) {
+        if (e.key === ',' || e.key === '/') {
+            e.preventDefault()
+        }
+        if (e.target.value.trim() !== '') {
+            if (e.key === 'Enter' || e.key === ',' || e.key === '/' || e.code === 'Space') {
+                const tagValue = e.target.value.trim()
+                if (this.tags.has(tagValue)) {
+                    this.tagsWrapper.querySelector(`[data-value="${tagValue}"]`).animate([
+                        {
+                            backgroundColor: 'initial'
+                        },
+                        {
+                            backgroundColor: 'var(--accent-color)'
+                        },
+                        {
+                            backgroundColor: 'initial'
+                        },
+                    ], {
+                        duration: 300,
+                        easing: 'ease'
+                    })
+                }
+                else {
+                    const tag = document.createElement('span')
+                    tag.dataset.value = tagValue
+                    tag.className = 'tag'
+                    tag.innerHTML = `
                         <span class="tag-text">${tagValue}</span>
                         <svg class="icon" 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 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
                         `
-					this.input.before(tag)
-					this.tags.add(tagValue)
-				}
-				e.target.value = ''
-				e.target.setAttribute('size', '3')
-				if (this.limit && this.limit < this.tags.size + 1) {
-					this.input.readOnly = true
-					return
-				}
-			}
-		}
-		else {
-			if (e.key === 'Backspace' && this.input.previousElementSibling) {
-				this.removeTag(this.input.previousElementSibling)
-			}
-			if (this.limit && this.limit > this.tags.size) {
-				this.input.readOnly = false
-			}
-		}
-	}
-	handleClick(e){
-		if (e.target.closest('.tag')) {
-			this.removeTag(e.target.closest('.tag'))
-		}
-		else {
-			this.input.focus()
-		}
-	}
-	removeTag(tag){
-		this.tags.delete(tag.dataset.value)
-		tag.remove()
-		if (!this.tags.size) {
-			this.placeholder.classList.remove('hide')
-		}
-	}
-	connectedCallback() {
-		this.input.addEventListener('input', this.handleInput)
-		this.input.addEventListener('keydown', this.handleKeydown)
-		this.tagsWrapper.addEventListener('click', this.handleClick)
-	}
-	attributeChangedCallback(name, oldValue, newValue) {
-		if (name === 'placeholder') {
-			this.placeholder.textContent = newValue
-		}
-		if (name === 'limit') {
-			this.limit = parseInt(newValue)
-		}
-	}
-	disconnectedCallback() {
-		this.input.removeEventListener('input', this.handleInput)
-		this.input.removeEventListener('keydown', this.handleKeydown)
-		this.tagsWrapper.removeEventListener('click', this.handleClick)
-	}
+                    this.input.before(tag)
+                    this.tags.add(tagValue)
+                }
+                e.target.value = ''
+                e.target.setAttribute('size', '3')
+                if (this.limit && this.limit < this.tags.size + 1) {
+                    this.input.readOnly = true
+                    return
+                }
+            }
+        }
+        else {
+            if (e.key === 'Backspace' && this.input.previousElementSibling) {
+                this.removeTag(this.input.previousElementSibling)
+            }
+            if (this.limit && this.limit > this.tags.size) {
+                this.input.readOnly = false
+            }
+        }
+    }
+    handleClick(e) {
+        if (e.target.closest('.tag')) {
+            this.removeTag(e.target.closest('.tag'))
+        }
+        else {
+            this.input.focus()
+        }
+    }
+    removeTag(tag) {
+        this.tags.delete(tag.dataset.value)
+        tag.remove()
+        if (!this.tags.size) {
+            this.placeholder.classList.remove('hide')
+        }
+    }
+    connectedCallback() {
+        this.input.addEventListener('input', this.handleInput)
+        this.input.addEventListener('keydown', this.handleKeydown)
+        this.tagsWrapper.addEventListener('click', this.handleClick)
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'placeholder') {
+            this.placeholder.textContent = newValue
+        }
+        if (name === 'limit') {
+            this.limit = parseInt(newValue)
+        }
+    }
+    disconnectedCallback() {
+        this.input.removeEventListener('input', this.handleInput)
+        this.input.removeEventListener('keydown', this.handleKeydown)
+        this.tagsWrapper.removeEventListener('click', this.handleClick)
+    }
 })
 const smTextarea = document.createElement('template')
 smTextarea.innerHTML = `
@@ -4611,8 +4798,8 @@ textarea{
     position: absolute;
     margin: 0.7rem 1rem;
     opacity: .7;
-    font-weight: 400;
-    font-size: 1rem;
+    font-weight: inherit;
+    font-size: inherit;
     line-height: 1.5;
     pointer-events: none;
     user-select: none;
@@ -4653,7 +4840,7 @@ customElements.define('sm-textarea',
             this.textareaBox = this.shadowRoot.querySelector('.textarea')
             this.placeholder = this.shadowRoot.querySelector('.placeholder')
             this.reflectedAttributes = ['disabled', 'required', 'readonly', 'rows', 'minlength', 'maxlength']
-        
+
             this.reset = this.reset.bind(this)
             this.focusIn = this.focusIn.bind(this)
             this.fireEvent = this.fireEvent.bind(this)
@@ -4674,21 +4861,21 @@ customElements.define('sm-textarea',
         }
         set disabled(val) {
             if (val) {
-                this.setAttribute('disabled', '')   
+                this.setAttribute('disabled', '')
             } else {
-                this.removeAttribute('disabled')   
+                this.removeAttribute('disabled')
             }
         }
         get isValid() {
             return this.textarea.checkValidity()
         }
-        reset(){
+        reset() {
             this.setAttribute('value', '')
         }
-        focusIn(){
+        focusIn() {
             this.textarea.focus()
         }
-        fireEvent(){
+        fireEvent() {
             let event = new Event('input', {
                 bubbles: true,
                 cancelable: true,
@@ -4696,7 +4883,7 @@ customElements.define('sm-textarea',
             });
             this.dispatchEvent(event);
         }
-        checkInput(){
+        checkInput() {
             if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '')
                 return;
             if (this.textarea.value !== '') {
@@ -4748,7 +4935,6 @@ textField.innerHTML = `
         align-items: center;
     }
     .text{
-        padding: 0.6rem 0;
         transition: background-color 0.3s;
         border-bottom: 0.15rem solid transparent;
         overflow-wrap: break-word;
@@ -4770,44 +4956,38 @@ textField.innerHTML = `
     .editable{
         border-bottom: 0.15rem solid rgba(var(--text-color), 0.6);
     }
-    .icon-container{
+    .edit-button{
+        display: grid;
         position: relative;
         margin-left: 0.5rem;
-        height: 1.8rem;
-        width: 1.8rem;
+        background-color: transparent;
+        border: none;
     }
-    :host([disabled]) .icon-container{
+    :host([disabled]) .edit-button{
         display: none;
     }
     .icon{
-        position: absolute;
+        grid-area: 1/-1;
         cursor: pointer;
-        height: 2rem;
-        width: 2rem;
-        padding: 0.3rem;
+        height: 1.2rem;
+        width: 1.2rem;
         fill: rgba(var(--text-color), 1);
     }
     .hide{
-        display: none;
+        visibility: hidden;
     }
 </style>
 <div class="text-field">
     <div class="text" part="text"></div>
-    <div tabindex="0" class="icon-container">
-        <svg class="edit-button icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="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" width="24" height="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>
+    <button class="edit-button">
+        <svg class="icon" title="edit" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
+        <svg class="icon hide" title="Save" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>
+    </button>
 </div>
 `
 
-customElements.define('text-field', class extends HTMLElement{
-    constructor(){
+customElements.define('text-field', class extends HTMLElement {
+    constructor() {
         super()
         this.attachShadow({
             mode: 'open'
@@ -4817,36 +4997,34 @@ customElements.define('text-field', class extends HTMLElement{
         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
 
         this.fireEvent = this.fireEvent.bind(this)
         this.setEditable = this.setEditable.bind(this)
         this.setNonEditable = this.setNonEditable.bind(this)
+        this.toggleEditable = this.toggleEditable.bind(this)
         this.revert = this.revert.bind(this)
     }
 
-    static get observedAttributes(){
-        return ['disabled']
+    static get observedAttributes() {
+        return ['disabled', 'value']
     }
 
-    get value(){
+    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)
+        if (this.isDisabled)
             this.setAttribute('disabled', '')
         else
             this.removeAttribute('disabled')
     }
-    fireEvent(value){
+    fireEvent(value) {
         let event = new CustomEvent('change', {
             bubbles: true,
             cancelable: true,
@@ -4857,60 +5035,68 @@ customElements.define('text-field', class extends HTMLElement{
         });
         this.dispatchEvent(event);
     }
-    
-    setEditable(){
-        if(this.isTextEditable) return
+
+    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')
+        this.editButton.children[0].animate(this.rotateOut, this.animOptions).onfinish = () => {
+            this.editButton.children[0].classList.add('hide')
         }
         setTimeout(() => {
-            this.saveButton.classList.remove('hide')
-            this.saveButton.animate(this.rotateIn, this.animOptions)
+            this.editButton.children[1].classList.remove('hide')
+            this.editButton.children[1].animate(this.rotateIn, this.animOptions)
         }, 100);
         this.isTextEditable = true
     }
-    setNonEditable(){   
+    setNonEditable() {
         if (!this.isTextEditable) return
         this.textContainer.contentEditable = false
         this.textContainer.classList.remove('editable')
-        
-        if (this.text !== this.textContainer.textContent.trim()) {
+        const newValue = this.textContainer.textContent.trim()
+        if (this.text !== newValue && newValue !== '') {
             this.setAttribute('value', this.textContainer.textContent)
             this.text = this.textContainer.textContent.trim()
             this.fireEvent(this.text)
+        } else {
+            this.value = this.text
         }
-        this.saveButton.animate(this.rotateOut, this.animOptions).onfinish = () => {
-            this.saveButton.classList.add('hide')
+        this.editButton.children[1].animate(this.rotateOut, this.animOptions).onfinish = () => {
+            this.editButton.children[1].classList.add('hide')
         }
         setTimeout(() => {
-            this.editButton.classList.remove('hide')
-            this.editButton.animate(this.rotateIn, this.animOptions)
+            this.editButton.children[0].classList.remove('hide')
+            this.editButton.children[0].animate(this.rotateIn, this.animOptions)
         }, 100);
         this.isTextEditable = false
     }
+    toggleEditable() {
+        if (this.isTextEditable)
+            this.setNonEditable()
+        else
+            this.setEditable()
+    }
 
-    revert(){
+    revert() {
         if (this.textContainer.isContentEditable) {
             this.value = this.text
             this.setNonEditable()
         }
     }
 
-    connectedCallback(){
+    connectedCallback() {
         this.text
         if (this.hasAttribute('value')) {
             this.text = this.getAttribute('value')
             this.textContainer.textContent = this.text
         }
-        if(this.hasAttribute('disable'))
+        if (this.hasAttribute('disabled'))
             this.isDisabled = true
         else
             this.isDisabled = false
-        
+
         this.rotateOut = [
             {
                 transform: 'rotate(0)',
@@ -4939,32 +5125,31 @@ customElements.define('text-field', class extends HTMLElement{
         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)
+            this.editButton.addEventListener('click', this.toggleEditable)
         }
     }
-    attributeChangedCallback(name) {
+    attributeChangedCallback(name, oldValue, newValue) {
         if (name === 'disabled') {
             if (this.hasAttribute('disabled')) {
                 this.textContainer.removeEventListener('dblclick', this.setEditable)
-                this.editButton.removeEventListener('click', this.setEditable)
-                this.saveButton.removeEventListener('click', this.setNonEditable)
+                this.editButton.removeEventListener('click', this.toggleEditable)
                 this.revert()
             }
             else {
                 this.textContainer.addEventListener('dblclick', this.setEditable)
-                this.editButton.addEventListener('click', this.setEditable)
-                this.saveButton.addEventListener('click', this.setNonEditable)
+                this.editButton.addEventListener('click', this.toggleEditable)
             }
+        } else if (name === 'value') {
+            this.text = newValue
+            this.textContainer.textContent = newValue
         }
     }
     disconnectedCallback() {
         this.textContainer.removeEventListener('dblclick', this.setEditable)
-        this.editButton.removeEventListener('click', this.setEditable)
-        this.saveButton.removeEventListener('click', this.setNonEditable)
+        this.editButton.removeEventListener('click', this.toggleEditable)
     }
 })
-const themeToggle = document.createElement('template')
+const themeToggle = document.createElement('template');
 themeToggle.innerHTML = `
     <style>
     *{
@@ -5011,37 +5196,30 @@ themeToggle.innerHTML = `
         height: 100%;
         width: 100%;
         fill: rgba(var(--text-color), 1);
-        transition: transform 0.6s;
+        transition: transform 0.3s, opacity 0.1s;
     }
     
     .theme-switcher__checkbox {
         display: none;
     }
     :host([checked]) .moon-icon {
-        transform: scale(0) rotate(90deg);
+        transform: translateY(50%);
+        opacity: 0;
     }
     :host(:not([checked])) .sun-icon {
-        transform: scale(0) rotate(-90deg);
+        transform: translateY(50%);
+        opacity: 0;
     }
     </style>
     <label class="theme-toggle" title="Change theme" tabindex="0">
         <slot name="light-mode-icon">
-            <svg class="icon moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"
-                height="24">
-                <path fill="none" d="M0 0h24v24H0z" />
-                <path
-                    d="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z" />
-            </svg>
+        <svg xmlns="http://www.w3.org/2000/svg" class="icon moon-icon" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg>
         </slot>
         <slot name="dark-mode-icon">
-            <svg class="icon sun-icon" 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 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z" />
-            </svg>
+        <svg xmlns="http://www.w3.org/2000/svg" class="icon sun-icon" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg>
         </slot>
     </label>
-`
+`;
 
 class ThemeToggle extends HTMLElement {
     constructor() {
@@ -5049,47 +5227,47 @@ class ThemeToggle extends HTMLElement {
 
         this.attachShadow({
             mode: 'open'
-        }).append(themeToggle.content.cloneNode(true))
+        }).append(themeToggle.content.cloneNode(true));
 
-        this.isChecked = false
-        this.hasTheme = 'light'
+        this.isChecked = false;
+        this.hasTheme = 'light';
 
-        this.toggleState = this.toggleState.bind(this)
-        this.fireEvent = this.fireEvent.bind(this)
-        this.handleThemeChange = this.handleThemeChange.bind(this)
+        this.toggleState = this.toggleState.bind(this);
+        this.fireEvent = this.fireEvent.bind(this);
+        this.handleThemeChange = this.handleThemeChange.bind(this);
     }
     static get observedAttributes() {
         return ['checked'];
     }
 
     daylight() {
-        this.hasTheme = 'light'
-        document.body.dataset.theme = 'light'
-        this.setAttribute('aria-checked', 'false')
+        this.hasTheme = 'light';
+        document.body.dataset.theme = 'light';
+        this.setAttribute('aria-checked', 'false');
     }
-    
+
     nightlight() {
-        this.hasTheme = 'dark'
-        document.body.dataset.theme = 'dark'
-        this.setAttribute('aria-checked', 'true')
+        this.hasTheme = 'dark';
+        document.body.dataset.theme = 'dark';
+        this.setAttribute('aria-checked', 'true');
     }
 
     toggleState() {
-        this.toggleAttribute('checked')
-        this.fireEvent()
+        this.toggleAttribute('checked');
+        this.fireEvent();
     }
     handleKeyDown(e) {
         if (e.code === 'Space') {
-            this.toggleState()
+            this.toggleState();
         }
     }
     handleThemeChange(e) {
         if (e.detail.theme !== this.hasTheme) {
             if (e.detail.theme === 'dark') {
-                this.setAttribute('checked', '')
+                this.setAttribute('checked', '');
             }
             else {
-                this.removeAttribute('checked')   
+                this.removeAttribute('checked');
             }
         }
     }
@@ -5103,47 +5281,47 @@ class ThemeToggle extends HTMLElement {
                     theme: this.hasTheme
                 }
             })
-        )
+        );
     }
 
     connectedCallback() {
-        this.setAttribute('role', 'switch')
-        this.setAttribute('aria-label', 'theme toggle')
-        if (localStorage.theme === "dark") {
+        this.setAttribute('role', 'switch');
+        this.setAttribute('aria-label', 'theme toggle');
+        if (localStorage.getItem(`${window.location.hostname}-theme`) === "dark") {
             this.nightlight();
-            this.setAttribute('checked', '')
-        } else if (localStorage.theme === "light") {
+            this.setAttribute('checked', '');
+        } else if (localStorage.getItem(`${window.location.hostname}-theme`) === "light") {
             this.daylight();
-            this.removeAttribute('checked')
+            this.removeAttribute('checked');
         }
         else {
             if (window.matchMedia(`(prefers-color-scheme: dark)`).matches) {
                 this.nightlight();
-                this.setAttribute('checked', '')
+                this.setAttribute('checked', '');
             } else {
                 this.daylight();
-                this.removeAttribute('checked')
+                this.removeAttribute('checked');
             }
         }
         this.addEventListener("click", this.toggleState);
         this.addEventListener("keydown", this.handleKeyDown);
-        document.addEventListener('themechange', this.handleThemeChange)
+        document.addEventListener('themechange', this.handleThemeChange);
     }
-    
+
     disconnectedCallback() {
         this.removeEventListener("click", this.toggleState);
         this.removeEventListener("keydown", this.handleKeyDown);
-        document.removeEventListener('themechange', this.handleThemeChange)
+        document.removeEventListener('themechange', this.handleThemeChange);
     }
 
     attributeChangedCallback(name, oldVal, newVal) {
         if (name === 'checked') {
             if (this.hasAttribute('checked')) {
                 this.nightlight();
-                localStorage.setItem("theme", "dark");
+                localStorage.setItem(`${window.location.hostname}-theme`, "dark");
             } else {
                 this.daylight();
-                localStorage.setItem("theme", "light");
+                localStorage.setItem(`${window.location.hostname}-theme`, "light");
             }
         }
     }
diff --git a/components/components.min.js b/components/components.min.js
index c7a4723..534da50 100644
--- a/components/components.min.js
+++ b/components/components.min.js
@@ -1,21 +1,4 @@
-const smButton=document.createElement("template");smButton.innerHTML="\n<style>     \n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n}       \n:host{\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    width: auto;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --padding: 0.6rem 1.2rem;\n    --border-radius: 0.3rem;\n    --background: rgba(var(--text-color), 0.1);\n}\n:host([variant='primary']) .button{\n    background: var(--accent-color);\n    color: rgba(var(--background-color), 1);\n}\n:host([variant='outlined']) .button{\n    -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n            box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n    background: transparent; \n    color: var(--accent-color);\n}\n:host([variant='no-outline']) .button{\n    background: rgba(var(--background-color), 1); \n    color: var(--accent-color);\n}\n.button {\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    width: 100%;\n    padding: var(--padding);\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    border-radius: var(--border-radius); \n    -webkit-box-pack: center; \n        -ms-flex-pack: center; \n            justify-content: center;\n    transition: box-shadow 0.3s, background-color 0.3s;\n    font-family: inherit;\n    font-size: 0.9rem;\n    font-weight: 500;\n    background-color: var(--background); \n    -webkit-tap-highlight-color: transparent;\n    outline: none;\n    overflow: hidden;\n    border: none;\n    color: inherit;\n    align-items: center;\n}\n:host([disabled]) .button{\n    cursor: not-allowed;\n    opacity: 0.6;\n    color: rgba(var(--text-color), 1);\n    background-color: rgba(var(--text-color), 0.3);\n}\n@media (hover: hover){\n    :host(:not([disabled])) .button:hover{\n        -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);\n                box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n    }\n    :host([variant='outlined']) .button:hover{\n        -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);\n                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);\n    }\n}\n@media (hover: none){\n    :host(:not([disabled])) .button:active{\n        -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);\n                box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n    }\n    :host([variant='outlined']) .button:active{\n        -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);\n                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);\n    }\n}\n</style>\n<div part=\"button\" class=\"button\">\n    <slot></slot>   \n</div>",customElements.define("sm-button",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smButton.content.cloneNode(!0))}static get observedAttributes(){return["disabled"]}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}handleKeyDown(e){this.hasAttribute("disabled")||"Enter"!==e.key&&"Space"!==e.code||(e.preventDefault(),this.click())}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","button"),this.addEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(e,t,n){"disabled"===e?(this.removeAttribute("tabindex"),this.setAttribute("aria-disabled","true")):(this.setAttribute("tabindex","0"),this.setAttribute("aria-disabled","false"))}});
-const smCarousel=document.createElement("template");smCarousel.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \n:host{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --arrow-left: 1rem;\n    --arrow-right: 1rem;\n    --arrow-top: auto;\n    --arrow-bottom: auto;\n    --nav-icon-fill: rgba(var(--background-color), 1);\n    --nav-background-color: rgba(var(--text-color), 1);\n    --nav-box-shadow: 0 0.2rem 0.2rem #00000020, 0 0.5rem 1rem #00000040;\n    --indicator-top: auto;\n    --indicator-bottom: -1.5rem;\n    --indicator-height: 0.2rem;\n    --indicator-width: 0.4rem;\n    --indicator-border-radius: 0.4rem;\n    --indicators-gap: 0.5rem;\n    --active-indicator-color: var(--accent-color);\n}\n.carousel__button{\n    position: absolute;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    cursor: pointer;\n    min-width: 0;\n    top:  var(--arrow-top);\n    bottom:  var(--arrow-bottom);\n    border: none;\n    background: var(--nav-background-color);\n    -webkit-box-shadow: var(--nav-box-shadow);\n            box-shadow:  var(--nav-box-shadow); \n    -webkit-tap-highlight-color: transparent;\n    transition: transform 0.3s, opacity 0.3s;\n    z-index: 1;\n    border-radius: 3rem;\n    padding: 0.5rem;\n}\nbutton:focus{\n    outline: none;\n}\nbutton:focus-visible{\n    outline: rgba(var(--text-color), 1) 0.1rem solid;\n}\n.carousel__button:active{\n    transform: scale(0.9);\n}\n.carousel__button--left{\n    left: var(--arrow-left);\n}\n.carousel__button--right{\n    right: var(--arrow-right);\n}\n.icon {\n    height: 1.5rem;\n    width: 1.5rem;\n    fill: var(--nav-icon-fill);\n}\n.hide{\n    display: none !important;\n}\n:host([indicator]) .carousel-container{\n    margin-bottom: 2rem;\n}\n.carousel-container{\n    position: relative;\n    display: grid;\n    width: 100%;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.carousel{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    max-width: 100%;\n    width: 100%;\n    overflow: auto hidden;\n    -ms-scroll-snap-type: x mandatory;\n        scroll-snap-type: x mandatory;\n}\n.indicators{\n    display: -ms-grid;\n    display: grid;\n    grid-auto-flow: column;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    position: absolute;\n    padding: 0.5rem 0;\n    top: var(--indicator-top);\n    bottom: var(--indicator-bottom);\n    gap: var(--indicators-gap);\n    width: 100%;\n}\n.indicator{\n    position: relative;\n    height: var(--indicator-height);\n    width: var(--indicator-width);\n    background: rgba(var(--text-color), 0.3);\n    border-radius: var(--indicator-border-radius);\n    -webkit-transition: 0.2s;\n    -o-transition: 0.2s;\n    transition: 0.2s;\n    cursor: pointer;\n}\n.indicator.active{\n    -webkit-transform: scale(1.5);\n        -ms-transform: scale(1.5);\n            transform: scale(1.5);\n    background: var(--active-indicator-color);\n}\nslot::slotted(*){\n    scroll-snap-align: center;\n}\n:host([align-items="start"]) slot::slotted(*){\n    scroll-snap-align: start;\n}\n:host([align-items="center"]) slot::slotted(*){\n    scroll-snap-align: center;\n}\n:host([align-items="end"]) slot::slotted(*){\n    scroll-snap-align: end;\n}\n@media (hover: hover){\n    .carousel{\n        overflow: hidden;\n    }\n    .carousel__button{\n        opacity: 0.8;\n    }\n    :host(:hover) .carousel__button{\n        opacity: 1;\n    }\n    .left,.right{\n        display: none;\n    }\n    .indicators{\n        transition: gap 0.3s;\n    }\n    .indicators:hover{\n        gap: calc(var(--indicators-gap) * 2);\n    }\n    .indicators:hover .indicator{\n        transform: scale(2);\n    }\n}\n@media (hover: none){\n    ::-webkit-scrollbar-track {\n        -webkit-box-shadow: none !important;\n        background-color: transparent !important;\n    }\n    ::-webkit-scrollbar {\n        height: 0;\n        background-color: transparent;\n    }\n    .carousel{\n        overflow: auto none;\n    }\n    .carousel__button{\n        display: none;\n    }\n    .left,.right{\n        display: block;\n    }\n}\n</style>\n<div class="carousel-container">\n    <button class="carousel__button carousel__button--left hide">\n        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"/></svg>\n    </button>\n    <div part="carousel" class="carousel">\n        <slot></slot>\n    </div>\n    <button class="carousel__button carousel__button--right hide">\n        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>\n    </button>\n    <div class="indicators"></div>\n</div>\n',customElements.define("sm-carousel",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCarousel.content.cloneNode(!0)),this.isAutoPlaying=!1,this.autoPlayInterval=5e3,this.autoPlayTimeout,this.initialTimeout,this.activeSlideNum=0,this.carouselItems,this.indicators,this.showIndicator=!1,this.carousel=this.shadowRoot.querySelector(".carousel"),this.carouselContainer=this.shadowRoot.querySelector(".carousel-container"),this.carouselSlot=this.shadowRoot.querySelector("slot"),this.navButtonRight=this.shadowRoot.querySelector(".carousel__button--right"),this.navButtonLeft=this.shadowRoot.querySelector(".carousel__button--left"),this.indicatorsContainer=this.shadowRoot.querySelector(".indicators"),this.scrollLeft=this.scrollLeft.bind(this),this.scrollRight=this.scrollRight.bind(this),this.handleIndicatorClick=this.handleIndicatorClick.bind(this),this.showSlide=this.showSlide.bind(this),this.nextSlide=this.nextSlide.bind(this),this.autoPlay=this.autoPlay.bind(this),this.startAutoPlay=this.startAutoPlay.bind(this),this.stopAutoPlay=this.stopAutoPlay.bind(this)}static get observedAttributes(){return["indicator","autoplay","interval"]}scrollLeft(){this.carousel.scrollBy({left:-this.scrollDistance,behavior:"smooth"})}scrollRight(){this.carousel.scrollBy({left:this.scrollDistance,behavior:"smooth"})}showSlide(t){this.carousel.scrollTo({left:this.carouselItems[t].getBoundingClientRect().left-this.carousel.getBoundingClientRect().left+this.carousel.scrollLeft,behavior:"smooth"})}nextSlide(){if(!this.carouselItems)return;let t=this.activeSlideNum+1<this.carouselItems.length?this.activeSlideNum+1:0;this.showSlide(t)}autoPlay(){this.nextSlide(),this.isAutoPlaying&&(this.autoPlayTimeout=setTimeout(()=>{this.autoPlay()},this.autoPlayInterval))}startAutoPlay(){this.setAttribute("autoplay","")}stopAutoPlay(){this.removeAttribute("autoplay")}createIndicator(t){let n=document.createElement("div");return n.classList.add("indicator"),n.dataset.rank=t,n}handleIndicatorClick(t){if(t.target.closest(".indicator")){const n=parseInt(t.target.closest(".indicator").dataset.rank);this.activeSlideNum!==n&&this.showSlide(n)}}handleKeyDown(t){"ArrowLeft"===t.code?this.scrollRight():"ArrowRight"===t.code&&this.scrollRight()}connectedCallback(){let t=document.createDocumentFragment();this.carouselSlot.addEventListener("slotchange",n=>{this.carouselItems=this.carouselSlot.assignedElements(),this.carouselItems.forEach(t=>i.observe(t)),this.carouselItems.length>0?(o.observe(this.carouselItems[0]),e.observe(this.carouselItems[this.carouselItems.length-1])):(navButtonLeft.classList.add("hide"),navButtonRight.classList.add("hide"),o.disconnect(),e.disconnect()),this.showIndicator&&(this.indicatorsContainer.innerHTML="",this.carouselItems.forEach((n,i)=>{t.append(this.createIndicator(i)),n.dataset.rank=i}),this.indicatorsContainer.append(t),this.indicators=this.indicatorsContainer.children)});const n={threshold:.9,root:this},i=new IntersectionObserver(t=>{t.forEach(t=>{if(this.showIndicator){const n=parseInt(t.target.dataset.rank);t.isIntersecting?(this.indicators[n].classList.add("active"),this.activeSlideNum=n):this.indicators[n].classList.remove("active")}})},n),o=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?this.navButtonLeft.classList.add("hide"):this.navButtonLeft.classList.remove("hide")})},n),e=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?this.navButtonRight.classList.add("hide"):this.navButtonRight.classList.remove("hide")})},n),s=new ResizeObserver(t=>{t.forEach(t=>{if(t.contentBoxSize){const n=Array.isArray(t.contentBoxSize)?t.contentBoxSize[0]:t.contentBoxSize;this.scrollDistance=.6*n.inlineSize}else this.scrollDistance=.6*t.contentRect.width})});s.observe(this),this.addEventListener("keydown",this.handleKeyDown),this.navButtonRight.addEventListener("click",this.scrollRight),this.navButtonLeft.addEventListener("click",this.scrollLeft),this.indicatorsContainer.addEventListener("click",this.handleIndicatorClick)}attributeChangedCallback(t,n,i){n!==i&&("indicator"===t&&(this.showIndicator=this.hasAttribute("indicator")),"autoplay"===t&&(this.hasAttribute("autoplay")?this.initialTimeout=setTimeout(()=>{this.isAutoPlaying=!0,this.autoPlay()},this.autoPlayInterval):(this.isAutoPlaying=!1,clearTimeout(this.autoPlayTimeout),clearTimeout(this.initialTimeout))),"interval"===t&&(this.hasAttribute("interval")&&""!==this.getAttribute("interval").trim()?this.autoPlayInterval=Math.abs(parseInt(this.getAttribute("interval").trim())):this.autoPlayInterval=5e3))}disconnectedCallback(){this.navButtonRight.removeEventListener("click",this.scrollRight),this.navButtonLeft.removeEventListener("click",this.scrollLeft),this.indicatorsContainer.removeEventListener("click",this.handleIndicatorClick)}});
-const smCheckbox=document.createElement("template");smCheckbox.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    } \n    :host{\n        display: -webkit-inline-box;\n        display: -ms-inline-flexbox;\n        display: inline-flex;\n        --accent-color: #4d2588;\n        --text-color: 17, 17, 17;\n        --background-color: 255, 255, 255;\n        --height: 1.2rem;\n        --width: 1.2rem;\n        --border-radius: 0.2rem;\n        --border-color: rgba(var(--text-color), 0.7);\n    }\n    :host([disabled]) {\n        opacity: 0.6;\n        user-select: none;\n        pointer-events: none;\n    }\n    .checkbox {\n        position: relative;\n        display:-webkit-box;\n        display:-ms-flexbox;\n        display:flex;\n        -webkit-box-align: center;\n            -ms-flex-align: center;\n                align-items: center;\n        cursor: pointer;\n        outline: none;\n        -webkit-tap-highlight-color: transparent;\n    }\n    \n    .checkbox:focus-visible{\n        outline: auto;\n    }\n    .checkbox:active .icon,\n    .checkbox:focus-within .icon{\n        box-shadow: 0 0 0 0.1rem var(--accent-color) inset;\n    }\n    \n    input {\n        display: none;\n    }\n    \n    .checkmark {\n        stroke-dashoffset: -65;\n        stroke-dasharray: 65;\n        -webkit-transition: stroke-dashoffset 0.3s; \n        -o-transition: stroke-dashoffset 0.3s; \n        transition: stroke-dashoffset 0.3s;\n    }\n    \n    :host([checked]) .checkmark {\n        stroke-dashoffset: 0;\n        stroke: rgba(var(--background-color), 1);\n    }\n    :host([checked]) .icon {\n        background: var(--accent-color);\n        box-shadow: 0 0 0 0.1rem var(--accent-color) inset;\n    }    \n    .icon {\n        fill: none;\n        height: var(--height);\n        width: var(--width);\n        padding: 0.1rem;\n        stroke-width: 8; \n        stroke: var(--border-color);\n        overflow: visible;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n        -webkit-transition: background 0.3s;\n        -o-transition: background 0.3s;\n        transition: background 0.3s;\n        border-radius: var(--border-radius);\n        box-shadow: 0 0 0 0.1rem var(--border-color) inset;\n    }\n</style>\n<label class="checkbox">\n    <svg class="icon" viewBox="0 0 64 64">\n        <title>checkbox</title>\n        <path class="checkmark" d="M50.52,19.56,26,44.08,13.48,31.56" />\n    </svg>\n    <slot></slot>\n</label>',customElements.define("sm-checkbox",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCheckbox.content.cloneNode(!0)),this.checkbox=this.shadowRoot.querySelector(".checkbox"),this.reset=this.reset.bind(this),this.dispatch=this.dispatch.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleClick=this.handleClick.bind(this)}static get observedAttributes(){return["value","disabled","checked"]}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.hasAttribute("checked")}set checked(e){e?this.setAttribute("checked",""):this.removeAttribute("checked")}set value(e){this.setAttribute("value",e)}get value(){return this.getAttribute("value")}reset(){this.removeAttribute("checked")}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0}))}handleKeyDown(e){"Space"===e.code&&(e.preventDefault(),this.click())}handleClick(e){this.toggleAttribute("checked")}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","checkbox"),this.hasAttribute("checked")||this.setAttribute("aria-checked","false"),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("click",this.handleClick)}attributeChangedCallback(e,t,n){t!==n&&("checked"===e?(this.setAttribute("aria-checked",this.hasAttribute("checked")),this.dispatch()):"disabled"===e&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0")))}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("change",this.handleClick)}});
-const smCopy=document.createElement("template");smCopy.innerHTML='\n<style>     \n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n}       \n:host{\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --padding: 0;\n    --background-color: inherit;\n    --button-background-color: rgba(var(--text-color), 0.2);\n    --button-border-radius: 0.3rem;\n}\n.copy{\n    display: grid;\n    gap: 1rem;\n    padding: var(--padding);\n    align-items: center;\n    grid-template-columns: minmax(0, 1fr) auto;\n}\n.copy-button{\n    display: inline-flex;\n    justify-content: center;\n    cursor: pointer;\n    border: none;\n    padding: 0.4rem;\n    background-color: inherit;\n    border-radius: var(--button-border-radius);\n}\n.copy-button:active{\n    background-color: var(--button-background-color);\n}\n.icon{\n    height: 1.2rem;\n    width: 1.2rem;\n    fill: rgba(var(--text-color), 0.8);\n}\n@media (any-hover: hover){\n    .copy:hover .copy-button{\n        opacity: 1;\n    }\n    .copy-button{\n        opacity: 0.6;\n    }\n    .copy-button:hover{\n        background-color: var(--button-background-color);\n    }\n}\n</style>\n</style>\n<section class="copy">\n    <p class="copy-content"></p>\n    <button part="button" class="copy-button" title="copy">\n        <slot name="copy-icon">\n            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"/></svg>\n        </slot>\n    </button>\n</section>\n',customElements.define("sm-copy",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCopy.content.cloneNode(!0)),this.copyContent=this.shadowRoot.querySelector(".copy-content"),this.copyButton=this.shadowRoot.querySelector(".copy-button"),this.copy=this.copy.bind(this)}static get observedAttributes(){return["value"]}set value(n){this.setAttribute("value",n)}get value(){return this.getAttribute("value")}fireEvent(){this.dispatchEvent(new CustomEvent("copy",{composed:!0,bubbles:!0,cancelable:!0}))}copy(){navigator.clipboard.writeText(this.copyContent.textContent).then(n=>this.fireEvent()).catch(n=>console.error(n))}connectedCallback(){this.copyButton.addEventListener("click",this.copy)}attributeChangedCallback(n,t,o){"value"===n&&(this.copyContent.textContent=o)}disconnectedCallback(){this.copyButton.removeEventListener("click",this.copy)}});
-const fileInput=document.createElement("template");fileInput.innerHTML='\n  \t<style>\n\t\t*{\n\t\t\tpadding: 0;\n\t\t\tmargin: 0;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t:host{\n\t\t\t--accent-color: #4d2588;\n\t\t\t--text-color: 17, 17, 17;\n\t\t\t--background-color: 255, 255, 255;\n\t\t\t--border-radius: 0.3rem;\n\t\t\t--button-color: rgba(var(--background-color), 1);\n\t\t\t--button-font-weight: 500;\n\t\t\t--button-background-color: var(--accent-color);\n\t\t}\n\t\t.file-input {\n\t\t\tdisplay: flex;\n\t\t}\n\t\t\n\t\t.file-picker-button {\n            display: flex;\n\t\t\tcursor: pointer;\n\t\t\tuser-select: none;\n            align-items: center;\n\t\t\tpadding: 0.5rem 0.8rem;\n\t\t\tcolor: var(--button-color);\n\t\t\tborder-radius: var(--border-radius);\n\t\t\tfont-weight: var(--button-font-weight);\n\t\t\tbackground-color: var(--button-background-color);\n\t\t}\n\t\t.files-preview-wrapper{\n\t\t\tdisplay: grid;\n\t\t\tgap: 0.5rem;\n\t\t\tlist-style: none;\n\t\t}\n\t\t.files-preview-wrapper:not(:empty){\n            margin-bottom: 1rem;\n\t\t}\n\t\t.file-preview{\n\t\t\tdisplay: grid;\n            gap: 0.5rem;\n            align-items: center;\n\t\t\tpadding: 0.5rem 0.8rem;\n\t\t\tborder-radius: var(--border-radius);\n\t\t\tbackground-color: rgba(var(--text-color), 0.06)\n\t\t}\n\t\t.file-name{\n\t\t}\n        .file-size{\n            font-size: 0.8rem;\n            font-weight: 400;\n            color: rgba(var(--text-color), 0.8);\n        }\n\t\tinput[type=file] {\n\t\t\tdisplay: none;\n\t\t}\n  \t</style>\n\t<ul class="files-preview-wrapper"></ul>\n  \t<label tabindex="0" class="file-input">\n\t\t<div class="file-picker-button"><slot>Choose file</slot></div>\n\t\t<input type="file">\n\t</label>\n',customElements.define("file-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(fileInput.content.cloneNode(!0)),this.input=this.shadowRoot.querySelector("input"),this.fileInput=this.shadowRoot.querySelector(".file-input"),this.filesPreviewWraper=this.shadowRoot.querySelector(".files-preview-wrapper"),this.reflectedAttributes=["accept","multiple","capture"],this.reset=this.reset.bind(this),this.formatBytes=this.formatBytes.bind(this),this.createFilePreview=this.createFilePreview.bind(this),this.handleChange=this.handleChange.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}static get observedAttributes(){return["accept","multiple","capture"]}get files(){return this.input.files}set accept(t){this.setAttribute("accept",t)}set multiple(t){t?this.setAttribute("mutiple",""):this.removeAttribute("mutiple")}set capture(t){this.setAttribute("capture",t)}set value(t){this.input.value=t}get isValid(){return""!==this.input.value}reset(){this.input.value="",this.filesPreviewWraper.innerHTML=""}formatBytes(t,e=2){if(0===t)return"0 Bytes";const n=0>e?0:e,i=Math.floor(Math.log(t)/Math.log(1024));return parseFloat((t/Math.pow(1024,i)).toFixed(n))+" "+["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][i]}createFilePreview(t){const e=document.createElement("li"),{name:n,size:i}=t;return e.className="file-preview",e.innerHTML=`\n\t\t\t<div class="file-name">${n}</div>\n            <h5 class="file-size">${this.formatBytes(i)}</h5>\n\t\t`,e}handleChange(t){this.filesPreviewWraper.innerHTML="";const e=document.createDocumentFragment();Array.from(t.target.files).forEach(t=>{e.append(this.createFilePreview(t))}),this.filesPreviewWraper.append(e)}handleKeyDown(t){"Enter"!==t.key&&"Space"!==t.code||(t.preventDefault(),this.input.click())}connectedCallback(){this.setAttribute("role","button"),this.setAttribute("aria-label","File upload"),this.input.addEventListener("change",this.handleChange),this.fileInput.addEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(t){this.reflectedAttributes.includes(t)&&(this.hasAttribute(t)?this.input.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.input.removeAttribute(t))}disconnectedCallback(){this.input.removeEventListener("change",this.handleChange),this.fileInput.removeEventListener("keydown",this.handleKeyDown)}});
-const smForm=document.createElement("template");smForm.innerHTML='\n    <style>\n    *{\n        padding: 0;\n        margin: 0;\n        box-sizing: border-box;\n    }\n    :host{\n        --gap: 1rem;\n        width: 100%;\n    }\n    form{\n        display: grid;\n        gap: var(--gap);\n        width: 100%;\n    }\n    </style>\n\t<form onsubmit="return false">\n\t\t<slot></slot>\n\t</form>\n',customElements.define("sm-form",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smForm.content.cloneNode(!0)),this.form=this.shadowRoot.querySelector("form"),this.formElements,this.requiredElements,this.submitButton,this.resetButton,this.allRequiredValid=!1,this.debounce=this.debounce.bind(this),this.handleInput=this.handleInput.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.reset=this.reset.bind(this)}debounce(t,e){let n=null;return(...s)=>{window.clearTimeout(n),n=window.setTimeout(()=>{t.apply(null,s)},e)}}handleInput(t){this.allRequiredValid=this.requiredElements.every(t=>t.isValid),this.submitButton&&(this.allRequiredValid?this.submitButton.disabled=!1:this.submitButton.disabled=!0)}handleKeydown(t){"Enter"===t.key&&this.allRequiredValid&&this.submitButton.click()}reset(){this.formElements.forEach(t=>t.reset())}connectedCallback(){const t=this.shadowRoot.querySelector("slot");t.addEventListener("slotchange",t=>{this.formElements=[...this.querySelectorAll("sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio")],this.requiredElements=this.formElements.filter(t=>t.hasAttribute("required")),this.submitButton=t.target.assignedElements().find(t=>"primary"===t.getAttribute("variant")||"submit"===t.getAttribute("type")),this.resetButton=t.target.assignedElements().find(t=>"reset"===t.getAttribute("type")),this.resetButton&&this.resetButton.addEventListener("click",this.reset)}),this.addEventListener("input",this.debounce(this.handleInput,100)),this.addEventListener("keydown",this.debounce(this.handleKeydown,100))}disconnectedCallback(){this.removeEventListener("input",this.debounce(this.handleInput,100)),this.removeEventListener("keydown",this.debounce(this.handleKeydown,100))}});
-const hamburgerMenu=document.createElement("template");hamburgerMenu.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \n:host{\n    display: flex;\n    width: 100%;\n    height: 100%;\n    overflow-y: auto;\n    scrollbar-width: thin;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --padding: 0 0 3rem 0;\n    --backdrop-color: rgba(0,0,0,0.5);\n}\n.backdrop{\n    position: fixed;\n}\n.side-nav{\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n}\n.hide{\n    display: none !important;\n}\n@media screen and (max-width: 640px){\n    :host{\n        position: fixed;\n        z-index: 10;\n    }\n    .side-nav{\n        height: 100%;\n        overflow-y: auto;  \n        width: calc(100% - 4rem);\n        transition: transform 0.3s;\n        background-color: rgba(var(--background-color), 1);\n        box-shadow: 0.5rem 0 2rem rgba(0,0,0, 0.1);\n        z-index: 1;\n    }\n    .side-nav:not(.reveal){\n        transform: translateX(-100%);\n    }\n    .reveal{\n        transform: none;\n    }\n    .backdrop{\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        background-color: var(--backdrop-color);\n        -webkit-transition: opacity 0.3s;\n        -o-transition: opacity 0.3s;\n        transition: opacity 0.3s;\n    }\n}\n@media screen and (min-width: 640px){\n    .backdrop{\n        pointer-events: none;\n    }\n}\n@media (any-hover: hover){\n    ::-webkit-scrollbar{\n        width: 0.5rem;\n    }\n    ::-webkit-scrollbar-thumb{\n        border-radius: 1rem;\n        background: rgba(var(--text-color), 0.3);\n        &:hover{\n            background: rgba(var(--text-color), 0.5);\n        }\n    }\n}\n</style>\n<section class="backdrop hide"></section>\n<nav class="side-nav">\n    <slot></slot>\n</nav>\n';class HamburgerMenu extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(hamburgerMenu.content.cloneNode(!0)),this.resumeScrolling=this.resumeScrolling.bind(this),this.open=this.open.bind(this),this.close=this.close.bind(this),this.sideNav=this.shadowRoot.querySelector(".side-nav"),this.backdrop=this.shadowRoot.querySelector(".backdrop"),this.isOpen=!1,this.animeOptions={duration:300,easing:"ease"}}static get observedAttributes(){return["open"]}resumeScrolling(){const n=document.body.style.top;window.scrollTo(0,-1*parseInt(n||"0")),setTimeout(()=>{document.body.style.overflow="auto",document.body.style.top="initial"},300)}open(){this.isOpen||(document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`,this.classList.remove("hide"),this.sideNav.classList.add("reveal"),this.backdrop.classList.remove("hide"),this.backdrop.animate([{opacity:0},{opacity:1}],this.animeOptions).onfinish=(()=>{this.isOpen=!0,this.setAttribute("open","")}))}close(){this.isOpen&&(this.sideNav.classList.remove("reveal"),this.backdrop.animate([{opacity:1},{opacity:0}],this.animeOptions).onfinish=(()=>{this.backdrop.classList.add("hide"),this.classList.add("hide"),this.isOpen=!1,this.removeAttribute("open")}))}connectedCallback(){this.backdrop.addEventListener("click",this.close);const n=new ResizeObserver(n=>{window.innerWidth<640&&this.isOpen?this.classList.remove("hide"):this.classList.add("hide"),window.innerWidth>640&&this.classList.remove("hide")});n.observe(this)}disconnectedCallback(){this.backdrop.removeEventListener("click",this.close)}attributeChangedCallback(n,e,t){"open"===n&&this.hasAttribute("open")&&this.open()}}window.customElements.define("hamburger-menu",HamburgerMenu);
-const smInput=document.createElement("template");smInput.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \ninput[type="search"]::-webkit-search-decoration,\ninput[type="search"]::-webkit-search-cancel-button,\ninput[type="search"]::-webkit-search-results-button,\ninput[type="search"]::-webkit-search-results-decoration { display: none; }\ninput[type=number] {\n-moz-appearance:textfield;\n}\ninput[type=number]::-webkit-inner-spin-button, \ninput[type=number]::-webkit-outer-spin-button { \n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    margin: 0; \n}\ninput::-ms-reveal,\ninput::-ms-clear {\n  display: none;\n}\ninput:invalid{\n    outline: none;\n    -webkit-box-shadow: none;\n            box-shadow: none;\n}\n::-moz-focus-inner{\nborder: none;\n}\n:host{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --success-color: #00C853;\n    --danger-color: red;\n    --width: 100%;\n    --font-size: 1rem;\n    --icon-gap: 0.5rem;\n    --border-radius: 0.3rem;\n    --padding: 0.7rem 1rem;\n    --background: rgba(var(--text-color), 0.06);\n}\n.hide{\n   opacity: 0 !important;\n   pointer-events: none !important;\n}\n.hide-completely{\n    display: none;\n}\n.icon {\n    fill: rgba(var(--text-color), 0.6);\n    height: 1.4rem;\n    width: 1.4rem;\n    border-radius: 1rem;\n    cursor: pointer;\n    min-width: 0;\n}\n\n:host(.round) .input{\n    border-radius: 10rem;\n}\n.input {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    cursor: text;\n    min-width: 0;\n    text-align: left;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    position: relative;\n    gap: var(--icon-gap);\n    padding: var(--padding);\n    border-radius: var(--border-radius);\n    -webkit-transition: opacity 0.3s;\n    -o-transition: opacity 0.3s;\n    transition: opacity 0.3s;\n    background: var(--background);\n    width: 100%;\n    outline: none;\n}\n.input.readonly .clear{\n    opacity: 0 !important;\n    margin-right: -2rem;\n    pointer-events: none !important;\n}\n.readonly{\n    pointer-events: none;\n}\n.input:focus-within:not(.readonly){\n    box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;\n}\n.disabled{\n    pointer-events: none;\n    opacity: 0.6;\n}\n.label {\n    opacity: .7;\n    font-weight: 400;\n    font-size: var(--font-size);\n    position: absolute;\n    top: 0;\n    -webkit-transition: -webkit-transform 0.3s;\n    transition: -webkit-transform 0.3s;\n    -o-transition: transform 0.3s;\n    transition: transform 0.3s;\n    transition: transform 0.3s, -webkit-transform 0.3s;\n    -webkit-transform-origin: left;\n    -ms-transform-origin: left;\n        transform-origin: left;\n    pointer-events: none;\n    white-space: nowrap;\n    overflow: hidden;\n    -o-text-overflow: ellipsis;\n       text-overflow: ellipsis;\n    width: 100%;\n    user-select: none;\n    will-change: transform;\n}\n.outer-container{\n    position: relative;\n    width: var(--width);\n}\n.container{\n    width: 100%;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    position: relative;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n}    \ninput{\n    font-size: var(--font-size);\n    border: none;\n    background: transparent;\n    outline: none;\n    color: rgba(var(--text-color), 1);\n    width: 100%;\n}\n:host(:not([variant="outlined"])) .animate-label .container input {\n    -webkit-transform: translateY(0.6rem);\n            -ms-transform: translateY(0.6rem);\n        transform: translateY(0.6rem);\n    }\n  \n:host(:not([variant="outlined"])) .animate-label .label {\n    -webkit-transform: translateY(-0.7em) scale(0.8);\n            -ms-transform: translateY(-0.7em) scale(0.8);\n        transform: translateY(-0.7em) scale(0.8);\n    opacity: 1;\n    color: var(--accent-color)\n}\n:host([variant="outlined"]) .input {\n    box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;\n    background: rgba(var(--background-color), 1);\n}\n:host([variant="outlined"]) .label {\n    width: max-content;\n    margin-left: -0.5rem;\n    padding: 0 0.5rem;\n}\n:host([variant="outlined"]) .animate-label .label {\n    -webkit-transform: translate(0.1rem, -1.5rem) scale(0.8);\n            -ms-transform: translate(0.1rem, -1.5rem) scale(0.8);\n        transform: translate(0.1rem, -1.5rem) scale(0.8);\n    opacity: 1;\n    background: rgba(var(--background-color), 1);\n}\n.animate-label:focus-within:not(.readonly) .label{\n    color: var(--accent-color)\n}\n.feedback-text:not(:empty){\n    display: flex;\n    width: 100%;\n    text-align: left;\n    font-size: 0.9rem;\n    align-items: center;\n    padding: 0.8rem 1rem;\n    color: rgba(var(--text-color), 0.8);\n}\n.success{\n    color: var(--success-color);\n}\n.error{\n    color: var(--danger-color);\n}\n.status-icon{\n    margin-right: 0.2rem;\n}\n.status-icon--error{\n    fill: var(--danger-color);\n}\n.status-icon--success{\n    fill: var(--success-color);\n}\n@media (any-hover: hover){\n    .icon:hover{\n        background: rgba(var(--text-color), 0.1);\n    }\n}\n</style>\n<div class="outer-container">\n    <label part="input" class="input">\n        <slot name="icon"></slot>\n        <div class="container">\n            <input type="text"/>\n            <div part="placeholder" class="label"></div>\n        </div>\n        <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>\n    </label>\n    <p class="feedback-text"></p>\n</div>\n',customElements.define("sm-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smInput.content.cloneNode(!0)),this.inputParent=this.shadowRoot.querySelector(".input"),this.input=this.shadowRoot.querySelector("input"),this.clearBtn=this.shadowRoot.querySelector(".clear"),this.label=this.shadowRoot.querySelector(".label"),this.feedbackText=this.shadowRoot.querySelector(".feedback-text"),this._helperText,this._errorText,this.isRequired=!1,this.validationFunction,this.reflectedAttributes=["value","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step"],this.reset=this.reset.bind(this),this.focusIn=this.focusIn.bind(this),this.focusOut=this.focusOut.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this)}static get observedAttributes(){return["value","placeholder","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","helper-text","error-text"]}get value(){return this.input.value}set value(t){this.input.value=t,this.checkInput(),this.fireEvent()}get placeholder(){return this.getAttribute("placeholder")}set placeholder(t){this.setAttribute("placeholder",t)}get type(){return this.getAttribute("type")}set type(t){this.setAttribute("type",t)}get isValid(){const t=this.input.checkValidity();let e=!0;return this.customValidation&&(e=this.validationFunction(this.input.value)),t&&e}get validity(){return this.input.validity}set disabled(t){t?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")}set readOnly(t){t?this.setAttribute("readonly",""):this.removeAttribute("readonly")}set customValidation(t){this.validationFunction=t}set errorText(t){this._errorText=t}set helperText(t){this._helperText=t}reset(){this.value=""}focusIn(){this.input.focus()}focusOut(){this.input.blur()}fireEvent(){let t=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(t)}checkInput(t){this.hasAttribute("readonly")||(""!==this.input.value?this.clearBtn.classList.remove("hide"):(this.clearBtn.classList.add("hide"),this.isRequired&&(this.feedbackText.textContent="* required")),this.isValid?(this.feedbackText.classList.remove("error"),this.feedbackText.classList.add("success"),this.feedbackText.textContent=""):this._errorText&&(this.feedbackText.classList.add("error"),this.feedbackText.classList.remove("success"),this.feedbackText.innerHTML=`\n                            <svg class="status-icon status-icon--error" 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 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>\n                        ${this._errorText}\n                        `)),this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder").trim()&&(""!==this.input.value?this.animate?this.inputParent.classList.add("animate-label"):this.label.classList.add("hide"):this.animate?this.inputParent.classList.remove("animate-label"):this.label.classList.remove("hide"))}connectedCallback(){this.animate=this.hasAttribute("animate"),this.input.addEventListener("input",this.checkInput),this.clearBtn.addEventListener("click",this.reset)}attributeChangedCallback(t,e,n){e!==n&&(this.reflectedAttributes.includes(t)&&(this.hasAttribute(t)?this.input.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.input.removeAttribute(t)),"placeholder"===t?(this.label.textContent=n,this.setAttribute("aria-label",n)):this.hasAttribute("value")?this.checkInput():"type"===t?this.hasAttribute("type")&&"number"===this.getAttribute("type")&&this.input.setAttribute("inputmode","numeric"):"helper-text"===t?this._helperText=this.getAttribute("helper-text"):"error-text"===t?this._errorText=this.getAttribute("error-text"):"required"===t?(this.isRequired=this.hasAttribute("required"),this.feedbackText.textContent="* required"):"readonly"===t?this.hasAttribute("readonly")?this.inputParent.classList.add("readonly"):this.inputParent.classList.remove("readonly"):"disabled"===t&&(this.hasAttribute("disabled")?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")))}disconnectedCallback(){this.input.removeEventListener("input",this.checkInput),this.clearBtn.removeEventListener("click",this.reset)}});
-const smMenu=document.createElement("template");smMenu.innerHTML='\n<style>     \n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n}\n:host{\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n}\n.menu{\n    display: -ms-grid;\n    display: grid;\n    place-items: center;\n    height: 2rem;\n    width: 2rem;\n    outline: none;\n}\n.icon {\n    position: absolute;\n    fill: rgba(var(--text-color), 0.7);\n    height: 2.4rem;\n    width: 2.4rem;\n    padding: 0.5rem;\n    border-radius: 2rem;\n    -webkit-transition: background 0.3s;\n    -o-transition: background 0.3s;\n    transition: background 0.3s;\n}      \n.select{\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    cursor: pointer;\n    width: 100%;\n    -webkit-tap-highlight-color: transparent;\n}\n.menu:focus .icon,\n.focused{\n    background: rgba(var(--text-color), 0.1); \n}\n:host([align-options="left"]) .options{\n    left: 0;\n}\n:host([align-options="right"]) .options{\n    right: 0;\n}\n.options{\n    padding: 0.5rem 0;\n    overflow: hidden auto;\n    position: absolute;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    min-width: -webkit-max-content;\n    min-width: -moz-max-content;\n    min-width: max-content;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    background: rgba(var(--background-color), 1);\n    border-radius: 0.3rem;\n    z-index: 1;\n    -webkit-box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0,0,0,0.3);\n            box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0,0,0,0.3);\n    bottom: auto;\n}\n.hide{\n    display: none;\n}\n@media screen and (max-width: 640px){\n    .options{\n        position: fixed;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        top: auto;\n        border-radius: 0.5rem 0.5rem 0 0;\n    }\n}\n@media (hover: hover){\n    .menu:hover .icon{\n        background: rgba(var(--text-color), 0.1); \n    }\n}\n</style>\n<div class="select">\n    <div class="menu" tabindex="0">\n        <svg class="icon" 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 3c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-7c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>\n    </div>\n    <div class="options hide">\n        <slot></slot> \n    </div>\n</div>',customElements.define("sm-menu",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smMenu.content.cloneNode(!0)),this.isOpen=!1,this.availableOptions,this.containerDimensions,this.animOptions={duration:200,easing:"ease"},this.optionList=this.shadowRoot.querySelector(".options"),this.menu=this.shadowRoot.querySelector(".menu"),this.icon=this.shadowRoot.querySelector(".icon"),this.expand=this.expand.bind(this),this.collapse=this.collapse.bind(this),this.toggle=this.toggle.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleClickoutSide=this.handleClickoutSide.bind(this)}static get observedAttributes(){return["value"]}get value(){return this.getAttribute("value")}set value(n){this.setAttribute("value",n)}expand(){this.isOpen||(this.optionList.classList.remove("hide"),this.optionList.animate([{transform:window.innerWidth<640?"translateY(1.5rem)":"translateY(-1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animOptions).onfinish=(()=>{this.isOpen=!0,this.icon.classList.add("focused")}))}collapse(){this.isOpen&&(this.optionList.animate([{transform:"none",opacity:"1"},{transform:window.innerWidth<640?"translateY(1.5rem)":"translateY(-1rem)",opacity:"0"}],this.animOptions).onfinish=(()=>{this.isOpen=!1,this.icon.classList.remove("focused"),this.optionList.classList.add("hide")}))}toggle(){this.isOpen?this.collapse():this.expand()}handleKeyDown(n){n.target===this?"ArrowDown"===n.code?(n.preventDefault(),this.availableOptions[0].focus()):"Enter"!==n.code&&"Space"!==n.code||(n.preventDefault(),this.toggle()):"ArrowUp"===n.code?(n.preventDefault(),document.activeElement.previousElementSibling?document.activeElement.previousElementSibling.focus():this.availableOptions[this.availableOptions.length-1].focus()):"ArrowDown"===n.code?(n.preventDefault(),document.activeElement.nextElementSibling?document.activeElement.nextElementSibling.focus():this.availableOptions[0].focus()):"Enter"!==n.code&&"Space"!==n.code||(n.preventDefault(),n.target.click())}handleClickoutSide(n){this.contains(n.target)||2===n.button||this.collapse()}connectedCallback(){this.setAttribute("role","listbox"),this.setAttribute("aria-label","dropdown menu");const n=this.shadowRoot.querySelector(".options slot");n.addEventListener("slotchange",n=>{this.availableOptions=n.target.assignedElements(),this.containerDimensions=this.optionList.getBoundingClientRect()}),this.addEventListener("click",this.toggle),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("mousedown",this.handleClickoutSide)}disconnectedCallback(){this.removeEventListener("click",this.toggle),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("mousedown",this.handleClickoutSide)}});const menuOption=document.createElement("template");menuOption.innerHTML='\n<style>     \n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n}     \n:host{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    --padding: 0.6rem 1.6rem;\n}\n.option{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    min-width: 100%;\n    padding: var(--padding);\n    cursor: pointer;\n    overflow-wrap: break-word;\n    white-space: nowrap;\n    outline: none;\n    font-size: 1rem;\n    user-select: none;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n:host(:focus){\n    outline: none;\n    background: rgba(var(--text-color), 0.1);\n}\n@media (any-hover: hover){\n    :host{\n        --padding: 0.8rem 1.6rem;\n    }\n    .option:hover{\n        background: rgba(var(--text-color), 0.1);\n    }\n}\n</style>\n<div class="option">\n    <slot></slot> \n</div>',customElements.define("menu-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(menuOption.content.cloneNode(!0))}connectedCallback(){this.setAttribute("role","option"),this.addEventListener("keyup",n=>{"Enter"!==n.code&&"Space"!==n.code||(n.preventDefault(),this.click())})}});
-const smNotifications=document.createElement("template");smNotifications.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    } \n    :host{\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        --accent-color: #4d2588;\n        --text-color: 17, 17, 17;\n        --background-color: 255, 255, 255;\n        --danger-color: red;\n        --icon-height: 1.5rem;\n        --icon-width: 1.5rem;\n    }\n    .hide{\n        opacity: 0 !important;\n        pointer-events: none !important;\n    }\n    .notification-panel{\n        display: grid;\n        width: 100%;\n        gap: 0.5rem;\n        position: fixed;\n        left: 0;\n        bottom: 0;\n        z-index: 100;\n        max-height: 100%;\n        padding: 1rem;\n        overflow: hidden auto;\n        -ms-scroll-chaining: none;\n            overscroll-behavior: contain;\n    }\n    .notification-panel:empty{\n        display:none;\n    }\n    .notification{\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        position: relative;\n        border-radius: 0.3rem;\n        background: rgba(var(--background-color), 1);\n        overflow: hidden;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        -ms-word-break: break-all;\n        word-break: break-all;\n        word-break: break-word;\n        -ms-hyphens: auto;\n        -webkit-hyphens: auto;\n        hyphens: auto;\n        max-width: 100%;\n        padding: 1rem;\n        align-items: center;\n    }\n    .icon-container:not(:empty){\n        margin-right: 0.5rem;\n        height: var(--icon-height);\n        width: var(--icon-width);\n    }\n    h4:first-letter,\n    p:first-letter{\n        text-transform: uppercase;\n    }\n    h4{\n        font-weight: 400;\n    }\n    p{\n        line-height: 1.6;\n        -webkit-box-flex: 1;\n            -ms-flex: 1;\n                flex: 1;\n        color: rgba(var(--text-color), 0.9);\n        overflow-wrap: break-word;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        -ms-word-break: break-all;\n        word-break: break-all;\n        word-break: break-word;\n        -ms-hyphens: auto;\n        -webkit-hyphens: auto;\n        hyphens: auto;\n        max-width: 100%;\n    }\n    .notification:last-of-type{\n        margin-bottom: 0;\n    }\n    .icon {\n        height: 100%;\n        width: 100%;\n        fill: rgba(var(--text-color), 0.7);\n    }\n    .close{\n        height: 2rem;\n        width: 2rem;\n        border: none;\n        cursor: pointer;\n        margin-left: 1rem;\n        border-radius: 50%;\n        padding: 0.3rem;\n        transition: background-color 0.3s, transform 0.3s;\n        background-color: transparent;\n    }\n    .close:active{\n        transform: scale(0.9);\n    }\n    @media screen and (min-width: 640px){\n        .notification-panel{\n            max-width: 28rem;\n            width: max-content;\n        }\n        .notification{\n            width: auto;\n            border: solid 1px rgba(var(--text-color), 0.2);\n        }\n    }\n    @media (any-hover: hover){\n        ::-webkit-scrollbar{\n            width: 0.5rem;\n        }\n        \n        ::-webkit-scrollbar-thumb{\n            background: rgba(var(--text-color), 0.3);\n            border-radius: 1rem;\n            &:hover{\n                background: rgba(var(--text-color), 0.5);\n            }\n        }\n        .close:hover{\n            background-color: rgba(var(--text-color), 0.1);\n        }\n    }\n</style>\n<div class="notification-panel"></div>\n',customElements.define("sm-notifications",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smNotifications.content.cloneNode(!0)),this.notificationPanel=this.shadowRoot.querySelector(".notification-panel"),this.animationOptions={duration:300,fill:"forwards",easing:"cubic-bezier(0.175, 0.885, 0.32, 1.275)"},this.push=this.push.bind(this),this.createNotification=this.createNotification.bind(this),this.removeNotification=this.removeNotification.bind(this),this.clearAll=this.clearAll.bind(this)}randString(n){let t="";const i="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for(let o=0;o<n;o++)t+=i.charAt(Math.floor(Math.random()*i.length));return t}createNotification(n,t){const{pinned:i=!1,icon:o=""}=t,e=document.createElement("div");e.id=this.randString(8),e.classList.add("notification");let a="";return a+=`\n            <div class="icon-container">${o}</div>\n            <p>${n}</p>\n            `,i&&(e.classList.add("pinned"),a+='\n                <button class="close">\n                    <svg class="icon" 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 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>\n                </button>\n            '),e.innerHTML=a,e}push(n,t={}){const i=this.createNotification(n,t);return this.notificationPanel.append(i),i.animate([{transform:"translateY(1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animationOptions),i.id}removeNotification(n){n.animate([{transform:"none",opacity:"1"},{transform:"translateY(0.5rem)",opacity:"0"}],this.animationOptions).onfinish=(()=>{n.remove()})}clearAll(){Array.from(this.notificationPanel.children).forEach(n=>{this.removeNotification(n)})}connectedCallback(){this.notificationPanel.addEventListener("click",n=>{n.target.closest(".close")&&this.removeNotification(n.target.closest(".notification"))});const n=new MutationObserver(n=>{n.forEach(n=>{"childList"===n.type&&n.addedNodes.length&&!n.addedNodes[0].classList.contains("pinned")&&setTimeout(()=>{this.removeNotification(n.addedNodes[0])},5e3)})});n.observe(this.notificationPanel,{childList:!0})}});
-const smPopup=document.createElement("template");smPopup.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \n:host{\n    position: fixed;\n    display: -ms-grid;\n    display: grid;\n    z-index: 10;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --width: 100%;\n    --height: auto;\n    --min-width: auto;\n    --min-height: auto;\n    --body-padding: 1.5rem;\n    --backdrop-background: rgba(0, 0, 0, 0.6);\n    --border-radius: 0.8rem 0.8rem 0 0;\n}\n.popup-container{\n    display: -ms-grid;\n    display: grid;\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    place-items: center;\n    background: var(--backdrop-background);\n    -webkit-transition: opacity 0.3s;\n    -o-transition: opacity 0.3s;\n    transition: opacity 0.3s;\n    z-index: 10;\n    touch-action: none;\n}\n:host(.stacked) .popup{\n    -webkit-transform: scale(0.9) translateY(-2rem) !important;\n            transform: scale(0.9) translateY(-2rem) !important;\n}\n.popup{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n            flex-direction: column;\n    position: relative;\n    -ms-flex-item-align: end;\n        align-self: flex-end;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n    width: var(--width);\n    min-width: var(--min-width);\n    height: var(--height);\n    min-height: var(--min-height);\n    max-height: 90vh;\n    border-radius: var(--border-radius);\n    -webkit-transform: scale(1) translateY(100%);\n            transform: scale(1) translateY(100%);\n    -webkit-transition: -webkit-transform 0.3s;\n    transition: -webkit-transform 0.3s;\n    -o-transition: transform 0.3s;\n    transition: transform 0.3s, -webkit-transform 0.3s;\n    transition: transform 0.3s;\n    background: rgba(var(--background-color), 1);\n    -webkit-box-shadow: 0 -1rem 2rem #00000020;\n            box-shadow: 0 -1rem 2rem #00000020;\n    content-visibility: auto;\n}\n.container-header{\n    display: -webkit-box;\n    display: flex;\n    width: 100%;\n    touch-action: none;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.popup-top{\n    display: -webkit-box;\n    display: flex;\n    width: 100%;\n}\n.popup-body{\n    display: -webkit-box;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n    width: 100%;\n    padding: var(--body-padding);\n    overflow-y: auto;\n}\n.hide{\n    opacity: 0;\n    pointer-events: none;\n    visiblity: none;\n}\n@media screen and (min-width: 640px){\n    :host{\n        --border-radius: 0.4rem;\n    }\n    .popup{\n        -ms-flex-item-align: center;\n            -ms-grid-row-align: center;\n            align-self: center;\n        border-radius: var(--border-radius);\n        height: var(--height);\n        -webkit-transform: scale(1) translateY(3rem);\n                transform: scale(1) translateY(3rem);\n        -webkit-box-shadow: 0 3rem 2rem -0.5rem #00000040;\n                box-shadow: 0 3rem 2rem -0.5rem #00000040;\n    }\n}\n@media screen and (max-width: 640px){\n    .popup-top{\n        -webkit-box-orient: vertical;\n        -webkit-box-direction: normal;\n                flex-direction: column;\n        -webkit-box-align: center;\n                align-items: center;\n    }\n    .handle{\n        height: 0.3rem;\n        width: 2rem;\n        background: rgba(var(--text-color), .4);\n        border-radius: 1rem;\n        margin: 0.5rem 0;\n    }\n}\n@media (any-hover: hover){\n    ::-webkit-scrollbar{\n        width: 0.5rem;\n    }\n    \n    ::-webkit-scrollbar-thumb{\n        background: rgba(var(--text-color), 0.3);\n        border-radius: 1rem;\n        &:hover{\n            background: rgba(var(--text-color), 0.5);\n        }\n    }\n}\n</style>\n<div part="background" class="popup-container hide" role="dialog">\n    <div part="popup" class="popup">\n        <div part="popup-header" class="popup-top">\n            <div class="handle"></div>\n            <slot name="header"></slot>\n        </div>\n        <div part="popup-body" class="popup-body">\n            <slot></slot>\n        </div>\n    </div>\n</div>\n',customElements.define("sm-popup",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smPopup.content.cloneNode(!0)),this.allowClosing=!1,this.isOpen=!1,this.pinned=!1,this.popupStack,this.offset,this.touchStartY=0,this.touchEndY=0,this.touchStartTime=0,this.touchEndTime=0,this.touchEndAnimataion,this.popupContainer=this.shadowRoot.querySelector(".popup-container"),this.popup=this.shadowRoot.querySelector(".popup"),this.popupBodySlot=this.shadowRoot.querySelector(".popup-body slot"),this.popupHeader=this.shadowRoot.querySelector(".popup-top"),this.resumeScrolling=this.resumeScrolling.bind(this),this.show=this.show.bind(this),this.hide=this.hide.bind(this),this.handleTouchStart=this.handleTouchStart.bind(this),this.handleTouchMove=this.handleTouchMove.bind(this),this.handleTouchEnd=this.handleTouchEnd.bind(this),this.movePopup=this.movePopup.bind(this)}static get observedAttributes(){return["open"]}get open(){return this.isOpen}resumeScrolling(){const t=document.body.style.top;window.scrollTo(0,-1*parseInt(t||"0")),setTimeout(()=>{document.body.style.overflow="auto",document.body.style.top="initial"},300)}show(t={}){const{pinned:e=!1,popupStack:n}=t;return n&&(this.popupStack=n),this.popupStack&&!this.hasAttribute("open")&&(this.popupStack.push({popup:this,permission:e}),this.popupStack.items.length>1&&this.popupStack.items[this.popupStack.items.length-2].popup.classList.add("stacked"),this.dispatchEvent(new CustomEvent("popupopened",{bubbles:!0,detail:{popup:this,popupStack:this.popupStack}})),this.setAttribute("open",""),this.pinned=e,this.isOpen=!0),this.popupContainer.classList.remove("hide"),this.popup.style.transform="none",document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`,this.popupStack}hide(){window.innerWidth<640?this.popup.style.transform="translateY(100%)":this.popup.style.transform="translateY(3rem)",this.popupContainer.classList.add("hide"),this.removeAttribute("open"),void 0!==this.popupStack?(this.popupStack.pop(),this.popupStack.items.length?this.popupStack.items[this.popupStack.items.length-1].popup.classList.remove("stacked"):this.resumeScrolling()):this.resumeScrolling(),this.forms.length&&setTimeout(()=>{this.forms.forEach(t=>t.reset())},300),setTimeout(()=>{this.dispatchEvent(new CustomEvent("popupclosed",{bubbles:!0,detail:{popup:this,popupStack:this.popupStack}})),this.isOpen=!1},300)}handleTouchStart(t){this.touchStartY=t.changedTouches[0].clientY,this.popup.style.transition="transform 0.1s",this.touchStartTime=t.timeStamp}handleTouchMove(t){this.touchStartY<t.changedTouches[0].clientY&&(this.offset=t.changedTouches[0].clientY-this.touchStartY,this.touchEndAnimataion=window.requestAnimationFrame(()=>this.movePopup()))}handleTouchEnd(t){if(this.touchEndTime=t.timeStamp,cancelAnimationFrame(this.touchEndAnimataion),this.touchEndY=t.changedTouches[0].clientY,this.popup.style.transition="transform 0.3s",this.threshold=.3*this.popup.getBoundingClientRect().height,this.touchEndTime-this.touchStartTime>200)if(this.touchEndY-this.touchStartY>this.threshold){if(this.pinned)return void this.show();this.hide()}else this.show();else if(this.touchEndY>this.touchStartY){if(this.pinned)return void this.show();this.hide()}}movePopup(){this.popup.style.transform=`translateY(${this.offset}px)`}connectedCallback(){this.popupBodySlot.addEventListener("slotchange",()=>{this.forms=this.querySelectorAll("sm-form")}),this.popupContainer.addEventListener("mousedown",t=>{t.target!==this.popupContainer||this.pinned||(this.pinned?this.show():this.hide())});const t=new ResizeObserver(t=>{for(let e of t)if(e.contentBoxSize){Array.isArray(e.contentBoxSize)?e.contentBoxSize[0]:e.contentBoxSize;this.threshold=.3*e.blockSize.height}else this.threshold=.3*e.contentRect.height});t.observe(this),this.popupHeader.addEventListener("touchstart",t=>{this.handleTouchStart(t)},{passive:!0}),this.popupHeader.addEventListener("touchmove",t=>{this.handleTouchMove(t)},{passive:!0}),this.popupHeader.addEventListener("touchend",t=>{this.handleTouchEnd(t)},{passive:!0})}disconnectedCallback(){this.popupHeader.removeEventListener("touchstart",this.handleTouchStart,{passive:!0}),this.popupHeader.removeEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.popupHeader.removeEventListener("touchend",this.handleTouchEnd,{passive:!0}),resizeObserver.unobserve()}attributeChangedCallback(t,e,n){"open"===t&&this.hasAttribute("open")&&this.show()}});
-const smRadio=document.createElement("template");smRadio.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    }  \n    :host{\n        --accent-color: #4d2588;\n        --text-color: 17, 17, 17;\n        --background-color: 255, 255, 255;\n        --gap: 0.5rem;\n        --height: 1.4rem;\n    }\n    :host([disabled]) {\n        opacity: 0.6;\n        user-select: none;\n        pointer-events: none;\n    }\n    .hide{\n        display: none !important;\n    }\n    .radio{\n        display: flex;\n        cursor: pointer;\n    }\n    .radio__button{\n        position: relative;\n        height: var(--height);\n        width: var(--height);\n        overflow: visible;\n        padding: 0.1rem;\n    }\n    .outer-disc{\n        fill: none;\n        stroke-width: 3;\n        stroke: rgba(var(--text-color), 0.7);\n    }\n    .inner-disc{\n        fill: var(--accent-color);\n        transition: transform 0.3s;\n        transform: scale(0);\n        transform-origin: center;\n    }\n    :host([checked]) .outer-disc{\n        stroke: var(--accent-color);\n    }\n    :host([checked]) .inner-disc{\n        transform: scale(1);\n    }\n\n    @media (any-hover: hover){\n    }\n</style>\n<div class="radio">\n    <slot name="left"></slot>\n    <svg class="radio__button" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="outer-disc" cx="12" cy="12" r="11"/><circle class="inner-disc" cx="12" cy="12" r="6"/></svg>\n    <slot></slot>\n</div>\n',window.customElements.define("sm-radio",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smRadio.content.cloneNode(!0)),this.radio=this.shadowRoot.querySelector(".radio"),this.reset=this.reset.bind(this),this.dispatchChangeEvent=this.dispatchChangeEvent.bind(this),this.dispatchGroupEvent=this.dispatchGroupEvent.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleClick=this.handleClick.bind(this),this.handleRadioGroup=this.handleRadioGroup.bind(this),this.uniqueId,this.options}static get observedAttributes(){return["value","disabled","checked"]}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.hasAttribute("checked")}set checked(t){t?this.setAttribute("checked",""):this.removeAttribute("checked")}set value(t){this.setAttribute("value",t)}get value(){return this.getAttribute("value")}reset(){this.removeAttribute("checked")}dispatchChangeEvent(){this.dispatchEvent(new CustomEvent("change",this.options))}dispatchGroupEvent(){this.hasAttribute("name")&&""!==this.getAttribute("name").trim()&&this.dispatchEvent(new CustomEvent(`changed${this.getAttribute("name")}`,this.options))}handleKeyDown(t){"Space"===t.code&&(t.preventDefault(),this.handleClick())}handleClick(){this.hasAttribute("checked")||(this.setAttribute("checked",""),this.dispatchGroupEvent())}handleRadioGroup(t){t.detail.uid!==this.uniqueId&&this.reset()}randString(t){let e="";const i="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for(let n=0;n<t;n++)e+=i.charAt(Math.floor(Math.random()*i.length));return e}connectedCallback(){this.uniqueId=this.randString(8),this.options={bubbles:!0,composed:!0,detail:{uid:this.uniqueId,value:this.value}},this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","radio"),this.hasAttribute("checked")||this.setAttribute("aria-checked","false"),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("click",this.handleClick),this.hasAttribute("name")&&""!==this.getAttribute("name").trim()&&document.addEventListener(`changed${this.getAttribute("name")}`,this.handleRadioGroup)}attributeChangedCallback(t,e,i){e!==i&&("checked"===t?this.dispatchChangeEvent():"disabled"===t&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0")))}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("change",this.handleClick)}});
-const smSwitch=document.createElement("template");smSwitch.innerHTML='\t\n<style>\n    *{\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n        padding: 0;\n        margin: 0;\n    }\n    \n    :host{\n        display: -webkit-inline-box;\n        display: -ms-inline-flexbox;\n        display: inline-flex;\n        --accent-color: #4d2588;\n        --text-color: 17, 17, 17;\n        --background-color: 255, 255, 255;\n    }\n    label{\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        -webkit-box-align: center;\n            -ms-flex-align: center;\n                align-items: center;\n        width: 100%;\n        outline: none;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n    }\n    :host(:not([disabled])) label:focus-visible{\n        -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);\n            box-shadow: 0 0 0 0.1rem var(--accent-color);\n    }\n    :host([disabled]) {\n        cursor: not-allowed;\n        opacity: 0.6;\n        pointer-events: none;\n    }\n    .switch {\n        position: relative;\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        -webkit-box-align: center;\n            -ms-flex-align: center;\n                align-items: center;\n        width: 2.4rem;\n        flex-shrink: 0;\n        margin-left: auto;\n        padding: 0.2rem;\n        cursor: pointer;\n        border-radius: 2rem;\n    }\n    \n    input {\n        display: none;\n    }\n    \n    .track {\n        position: absolute;\n        left: 0;\n        right: 0;\n        height: 1.4rem;\n        -webkit-transition: background 0.3s;\n        -o-transition: background 0.3s;\n        transition: background 0.3s;\n        background: rgba(var(--text-color), 0.4);\n        -webkit-box-shadow: 0 0.1rem 0.3rem #00000040 inset;\n                box-shadow: 0 0.1rem 0.3rem #00000040 inset;\n        border-radius: 1rem;\n    }\n    \n    .switch:active .button::after,\n    .switch:focus .button::after{\n        opacity: 1\n    }\n    .switch:focus-visible .button::after{\n        opacity: 1\n    }\n    \n    .button::after{\n        content: \'\';\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        position: absolute;\n        height: 2.6rem;\n        width: 2.6rem;\n        background: rgba(var(--text-color), 0.2);\n        border-radius: 2rem;\n        opacity: 0;\n        -webkit-transition: opacity 0.3s;\n        -o-transition: opacity 0.3s;\n        transition: opacity 0.3s;\n    }\n    \n    .button {\n        position: relative;\n        display: -webkit-inline-box;\n        display: -ms-inline-flexbox;\n        display: inline-flex;\n        height: 1rem;\n        width: 1rem;\n        -webkit-box-pack: center;\n            -ms-flex-pack: center;\n                justify-content: center;\n        -webkit-box-align: center;\n            -ms-flex-align: center;\n                align-items: center;\n        border-radius: 1rem;\n        -webkit-box-shadow: 0 0.1rem 0.4rem #00000060;\n                box-shadow: 0 0.1rem 0.4rem #00000060;\n        -webkit-transition: -webkit-transform 0.3s;\n        transition: -webkit-transform 0.3s;\n        -o-transition: transform 0.3s;\n        transition: transform 0.3s;\n        transition: transform 0.3s, -webkit-transform 0.3s;\n        border: solid 0.3rem white;\n    }\n    \n    input:checked ~ .button {\n        -webkit-transform: translateX(100%);\n            -ms-transform: translateX(100%);\n                transform: translateX(100%);\n    }\n    \n    input:checked ~ .track {\n        background: var(--accent-color);\n    }\n</style>\n<label tabindex="0">\n    <slot name="left"></slot>\n    <div part="switch" class="switch">\n        <input type="checkbox">\n        <div class="track"></div>\n        <div class="button"></div>\n    </div>\n    <slot name="right"></slot>\n</label>',customElements.define("sm-switch",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smSwitch.content.cloneNode(!0)),this.switch=this.shadowRoot.querySelector(".switch"),this.input=this.shadowRoot.querySelector("input"),this.isChecked=!1,this.isDisabled=!1,this.dispatch=this.dispatch.bind(this)}static get observedAttributes(){return["disabled","checked"]}get disabled(){return this.isDisabled}set disabled(n){n?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.isChecked}set checked(n){n?this.setAttribute("checked",""):this.removeAttribute("checked")}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.isChecked}}))}connectedCallback(){this.addEventListener("keydown",n=>{"Space"!==n.code||this.isDisabled||(n.preventDefault(),this.input.click())}),this.input.addEventListener("click",n=>{this.input.checked?this.checked=!0:this.checked=!1,this.dispatch()})}attributeChangedCallback(n,t,e){t!==e&&("disabled"===n?this.hasAttribute("disabled")?this.disabled=!0:this.disabled=!1:"checked"===n&&(this.hasAttribute("checked")?(this.isChecked=!0,this.input.checked=!0):(this.isChecked=!1,this.input.checked=!1)))}});
-const smSelect=document.createElement("template");smSelect.innerHTML='\n<style>     \n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \n:host{\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --max-height: auto;\n    --min-width: 100%;\n}\n:host([disabled]) .select{\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n.hide{\n    display: none !important;\n}\n.select{\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n    -ms-flex-direction: column;\n    flex-direction: column;\n    cursor: pointer;\n    width: 100%;\n    -webkit-tap-highlight-color: transparent;\n}\n.icon {\n    height: 1.5rem;\n    width: 1.5rem;\n    fill: rgba(var(--text-color), 0.7);\n}      \n.selected-option-text{\n    font-size: 0.9rem;\n    overflow: hidden;\n    -o-text-overflow: ellipsis;\n       text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.selection{\n    border-radius: 0.3rem;\n    display: -ms-grid;\n    display: grid;\n    -ms-grid-columns: 1fr auto;\n    grid-template-columns: 1fr auto;\n        grid-template-areas: \'heading heading\' \'. .\';\n    padding: 0.4rem 1rem;\n    background: rgba(var(--text-color), 0.06);\n    border: solid 1px rgba(var(--text-color), 0.2);\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    outline: none;\n}\n.selection:focus{\n    -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);\n            box-shadow: 0 0 0 0.1rem var(--accent-color) \n}\n.icon{\n    margin-left: 1rem;\n}\n:host([align-select="left"]) .options{\n    left: 0;\n}\n:host([align-select="right"]) .options{\n    right: 0;\n}\n.options{\n    top: 100%;\n    margin-top: 0.2rem; \n    overflow: hidden auto;\n    position: absolute;\n    grid-area: options;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    min-width: var(--min-width);\n    max-height: var(--max-height);\n    background: rgba(var(--background-color), 1);\n    border: solid 1px rgba(var(--text-color), 0.2);\n    border-radius: 0.3rem;\n    z-index: 2;\n    -webkit-box-shadow: 0.4rem 0.8rem 1.2rem #00000030;\n            box-shadow: 0.4rem 0.8rem 1.2rem #00000030;\n}\n.rotate{\n    -webkit-transform: rotate(180deg);\n        -ms-transform: rotate(180deg);\n            transform: rotate(180deg)\n}\n@media (any-hover: hover){\n    ::-webkit-scrollbar{\n        width: 0.5rem;\n        height: 0.5rem;\n    }\n    \n    ::-webkit-scrollbar-thumb{\n        background: rgba(var(--text-color), 0.3);\n        border-radius: 1rem;\n        &:hover{\n            background: rgba(var(--text-color), 0.5);\n        }\n    }\n}\n</style>\n<div class="select" >\n    <div class="selection">\n        <div class="selected-option-text"></div>\n        <svg class="icon toggle" 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 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>\n    </div>\n    <div part="options" class="options hide">\n        <slot></slot> \n    </div>\n</div>',customElements.define("sm-select",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smSelect.content.cloneNode(!0)),this.reset=this.reset.bind(this),this.open=this.open.bind(this),this.collapse=this.collapse.bind(this),this.toggle=this.toggle.bind(this),this.handleOptionsNavigation=this.handleOptionsNavigation.bind(this),this.handleOptionSelection=this.handleOptionSelection.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.handleClickOutside=this.handleClickOutside.bind(this),this.availableOptions,this.previousOption,this.isOpen=!1,this.slideDown=[{transform:"translateY(-0.5rem)",opacity:0},{transform:"translateY(0)",opacity:1}],this.slideUp=[{transform:"translateY(0)",opacity:1},{transform:"translateY(-0.5rem)",opacity:0}],this.animationOptions={duration:300,fill:"forwards",easing:"ease"},this.optionList=this.shadowRoot.querySelector(".options"),this.chevron=this.shadowRoot.querySelector(".toggle"),this.selection=this.shadowRoot.querySelector(".selection"),this.selectedOptionText=this.shadowRoot.querySelector(".selected-option-text")}static get observedAttributes(){return["value","disabled"]}get value(){return this.getAttribute("value")}set value(e){this.setAttribute("value",e)}reset(){}open(){this.optionList.classList.remove("hide"),this.optionList.animate(this.slideDown,this.animationOptions),this.chevron.classList.add("rotate"),this.isOpen=!0}collapse(){this.chevron.classList.remove("rotate"),this.optionList.animate(this.slideUp,this.animationOptions).onfinish=(()=>{this.optionList.classList.add("hide"),this.isOpen=!1})}toggle(){this.isOpen||this.hasAttribute("disabled")?this.collapse():this.open()}fireEvent(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleOptionsNavigation(e){"ArrowUp"===e.code?(e.preventDefault(),document.activeElement.previousElementSibling?document.activeElement.previousElementSibling.focus():this.availableOptions[this.availableOptions.length-1].focus()):"ArrowDown"===e.code&&(e.preventDefault(),document.activeElement.nextElementSibling?document.activeElement.nextElementSibling.focus():this.availableOptions[0].focus())}handleOptionSelection(e){this.previousOption!==document.activeElement&&(this.value=document.activeElement.getAttribute("value"),this.selectedOptionText.textContent=document.activeElement.textContent,this.fireEvent(),this.previousOption&&this.previousOption.classList.remove("check-selected"),document.activeElement.classList.add("check-selected"),this.previousOption=document.activeElement)}handleClick(e){e.target===this?this.toggle():(this.handleOptionSelection(),this.collapse())}handleKeydown(e){e.target===this?this.isOpen&&"ArrowDown"===e.code?(e.preventDefault(),this.availableOptions[0].focus(),this.handleOptionSelection(e)):"Enter"!==e.code&&"Space"!==e.code||(e.preventDefault(),this.toggle()):(this.handleOptionsNavigation(e),this.handleOptionSelection(e),"Enter"!==e.code&&"Space"!==e.code||(e.preventDefault(),this.collapse()))}handleClickOutside(e){this.isOpen&&!this.contains(e.target)&&this.collapse()}connectedCallback(){this.setAttribute("role","listbox"),this.hasAttribute("disabled")||this.selection.setAttribute("tabindex","0");let e=this.shadowRoot.querySelector("slot");e.addEventListener("slotchange",t=>{if(this.availableOptions=e.assignedElements(),this.availableOptions[0]){let e=this.availableOptions[0];this.previousOption=e,e.classList.add("check-selected"),this.value=e.getAttribute("value"),this.selectedOptionText.textContent=e.textContent,this.availableOptions.forEach(e=>{e.setAttribute("tabindex","0")})}}),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeydown),document.addEventListener("mousedown",this.handleClickOutside)}disconnectedCallback(){this.removeEventListener("click",this.toggle),this.removeEventListener("keydown",this.handleKeydown),document.removeEventListener("mousedown",this.handleClickOutside)}attributeChangedCallback(e){"disabled"===e&&(this.hasAttribute("disabled")?this.selection.removeAttribute("tabindex"):this.selection.setAttribute("tabindex","0"))}});const smOption=document.createElement("template");smOption.innerHTML='\n<style>     \n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n}     \n:host{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.option{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    min-width: 100%;\n    padding: 0.8rem 1.2rem;\n    cursor: pointer;\n    overflow-wrap: break-word;\n    outline: none;\n    user-select: none;\n}\n:host(:focus){\n    outline: none;\n    background: rgba(var(--text-color), 0.1);\n}\n.icon {\n    opacity: 0;\n    height: 1.2rem;\n    width: 1.2rem;\n    margin-right: 0.5rem;\n    fill: rgba(var(--text-color), 0.8);\n}\n:host(:focus) .option .icon{\n    opacity: 0.4\n}\n:host(.check-selected) .icon{\n    opacity: 1\n}\n@media (hover: hover){\n    .option:hover{\n        background: rgba(var(--text-color), 0.1);\n    }\n    :host(:not(.check-selected):hover) .icon{\n        opacity: 0.4\n    }\n}\n</style>\n<div class="option">\n    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><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>\n    <slot></slot> \n</div>',customElements.define("sm-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smOption.content.cloneNode(!0))}connectedCallback(){this.setAttribute("role","option")}});
-const spinner=document.createElement("template");spinner.innerHTML='\n<style>     \n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n}\n:host{\n    --accent-color: #4d2588;\n}\n.loader {\n    height: 1.6rem;\n    width: 1.6rem;\n    stroke-width: 8;\n    overflow: visible;\n    stroke: var(--accent-color);\n    fill: none;\n    stroke-dashoffset: 180;\n    stroke-dasharray: 180;\n    animation: load 2s infinite, spin 1s linear infinite;\n}\n@keyframes load {\n    50% {\n        stroke-dashoffset: 0;\n    }\n    100%{\n        stroke-dashoffset: -180;\n    }\n}\n\n@keyframes spin {\n    100% {\n        transform: rotate(360deg);\n    }\n}\n</style>\n<svg viewBox="0 0 64 64" class="loader"><circle cx="32" cy="32" r="32" /></svg>\n\n';class SquareLoader extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(spinner.content.cloneNode(!0))}}window.customElements.define("sm-spinner",SquareLoader);
-const stripSelect=document.createElement("template");stripSelect.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    }  \n    :host{\n        --accent-color: #4d2588;\n        --text-color: 17, 17, 17;\n        --background-color: 255, 255, 255;\n        --gap: 0.5rem;\n    }\n    .hide{\n        display: none !important;\n    }\n    input[type="radio"]{\n        display: none;\n    }\n    .scrolling-container{\n        position: relative;\n        display: flex;\n        align-items: center;\n        padding: 1rem 0;\n    }\n    .strip-select{\n        position: relative;\n    }\n    :host([multiline]) .strip-select{\n        display: flex;\n        flex-wrap: wrap;\n        gap: 0.5rem;\n        overflow: auto hidden;\n    }\n    :host(:not([multiline])) .strip-select{\n        display: grid;\n        grid-auto-flow: column;\n        gap: var(--gap);\n        max-width: 100%;   \n        align-items: center;\n        overflow: auto hidden;\n    }\n    .nav-button{\n        display: flex;\n        top: 50%;\n        z-index: 2;\n        border: none;\n        padding: 0.3rem;\n        cursor: pointer;\n        position: absolute;\n        align-items: center;\n        background: rgba(var(--background-color), 1);\n        transform: translateY(-50%);\n    }\n    .nav-button--right{\n        right: 0;\n    }\n    .cover{\n        position: absolute;\n        z-index: 1;\n        width: 5rem;\n        height: 100%;\n        pointer-events: none;\n    }\n    .cover--left{\n        background: linear-gradient(90deg, rgba(var(--background-color), 1) 60%, transparent);\n    }\n    .cover--right{\n        right: 0;\n        background: linear-gradient(90deg, transparent 0%, rgba(var(--background-color), 1) 40%);\n    }\n    .nav-button--right::before{\n        background-color: red;\n    }\n    .icon{\n        height: 1.5rem;\n        width: 1.5rem;\n        fill: rgba(var(--text-color), .8);\n    }\n    @media (hover: none){\n        .nav-button{\n            display: none;\n        }\n        .strip-select{\n            overflow: auto hidden;\n        }\n        .cover{\n            width: 2rem;\n        }\n    }\n    @media (hover: hover){\n        ::-webkit-scrollbar-track {\n            background-color: transparent !important;\n        }\n        ::-webkit-scrollbar {\n            height: 0;\n            background-color: transparent;\n        }\n        .strip-select{\n            overflow: hidden;\n        }\n    }\n</style>\n<section class="scrolling-container">\n    <div class="cover cover--left hide"></div>\n    <button class="nav-button nav-button--left hide">\n        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"/></svg>\n    </button>\n    <section class="strip-select">\n        <slot></slot>\n    </section>\n    <button class="nav-button nav-button--right hide">\n        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>\n    </button>\n    <div class="cover cover--right hide"></div>\n</section>\n\n',customElements.define("strip-select",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(stripSelect.content.cloneNode(!0)),this.stripSelect=this.shadowRoot.querySelector(".strip-select"),this.slottedOptions,this._value,this.scrollDistance,this.scrollLeft=this.scrollLeft.bind(this),this.scrollRight=this.scrollRight.bind(this),this.fireEvent=this.fireEvent.bind(this)}get value(){return this._value}scrollLeft(){this.stripSelect.scrollBy({left:-this.scrollDistance,behavior:"smooth"})}scrollRight(){this.stripSelect.scrollBy({left:this.scrollDistance,behavior:"smooth"})}fireEvent(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this._value}}))}connectedCallback(){this.setAttribute("role","listbox");const t=this.shadowRoot.querySelector("slot"),e=this.shadowRoot.querySelector(".cover--left"),n=this.shadowRoot.querySelector(".cover--right"),i=this.shadowRoot.querySelector(".nav-button--left"),o=this.shadowRoot.querySelector(".nav-button--right");t.addEventListener("slotchange",s=>{const l=t.assignedElements();l.forEach(t=>{t.hasAttribute("selected")&&(t.setAttribute("active",""),this._value=t.value)}),this.hasAttribute("multiline")||(l.length>0?(r.observe(t.assignedElements()[0]),a.observe(t.assignedElements()[t.assignedElements().length-1])):(i.classList.add("hide"),o.classList.add("hide"),e.classList.add("hide"),n.classList.add("hide"),r.disconnect(),a.disconnect()))});const s=new ResizeObserver(t=>{t.forEach(t=>{if(t.contentBoxSize){const e=Array.isArray(t.contentBoxSize)?t.contentBoxSize[0]:t.contentBoxSize;this.scrollDistance=.6*e.inlineSize}else this.scrollDistance=.6*t.contentRect.width})});s.observe(this),this.stripSelect.addEventListener("option-clicked",e=>{this._value!==e.target.value&&(this._value=e.target.value,t.assignedElements().forEach(t=>t.removeAttribute("active")),e.target.setAttribute("active",""),e.target.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"}),this.fireEvent())});const r=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?(i.classList.add("hide"),e.classList.add("hide")):(i.classList.remove("hide"),e.classList.remove("hide"))})},{threshold:.9,root:this}),a=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?(o.classList.add("hide"),n.classList.add("hide")):(o.classList.remove("hide"),n.classList.remove("hide"))})},{threshold:.9,root:this});i.addEventListener("click",this.scrollLeft),o.addEventListener("click",this.scrollRight)}disconnectedCallback(){navButtonLeft.removeEventListener("click",this.scrollLeft),navButtonRight.removeEventListener("click",this.scrollRight)}});const stripOption=document.createElement("template");stripOption.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    }  \n    :host{\n        --border-radius: 2rem;\n        --background-color: inherit;\n        --active-option-color: inherit;\n        --active-option-backgroud-color: rgba(var(--text-color), .2);\n    }\n    .strip-option{\n        display: flex;\n        flex-shrink: 0;\n        cursor: pointer;\n        white-space: nowrap;\n        padding: 0.5rem 0.8rem;\n        transition: background 0.3s;\n        border-radius: var(--border-radius);\n        box-shadow: 0 0 0 1px rgba(var(--text-color), .2) inset;\n        -webkit-tap-highlight-color: transparent;\n    }\n    :host([active]) .strip-option{\n        color: var(--active-option-color);\n        background-color: var(--active-option-backgroud-color);\n    }\n    :host(:focus-within){\n        outline: none;\n    }\n    :host(:focus-within) .strip-option{\n        box-shadow: 0 0 0 0.1rem var(--accent-color) inset;\n    }\n    :host(:hover:not([active])) .strip-option{\n        background-color: rgba(var(--text-color), 0.06);\n    }\n</style>\n<label class="strip-option">\n    <slot></slot>\n</label>\n',customElements.define("strip-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(stripOption.content.cloneNode(!0)),this._value,this.radioButton=this.shadowRoot.querySelector("input"),this.fireEvent=this.fireEvent.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}get value(){return this._value}fireEvent(){this.dispatchEvent(new CustomEvent("option-clicked",{bubbles:!0,composed:!0,detail:{value:this._value}}))}handleKeyDown(t){"Enter"!==t.key&&"Space"!==t.key||this.fireEvent()}connectedCallback(){this.setAttribute("role","option"),this.setAttribute("tabindex","0"),this._value=this.getAttribute("value"),this.addEventListener("click",this.fireEvent),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("click",this.fireEvent),this.removeEventListener("keydown",this.handleKeyDown)}});
-const smTabHeader=document.createElement("template");smTabHeader.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    } \n    :host{\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        --accent-color: #4d2588;\n        --text-color: 17, 17, 17;\n        --background-color: 255, 255, 255;\n        --tab-indicator-border-radius: 0.3rem;\n    }\n    .tabs{\n        position: relative;\n        display: -ms-grid;\n        display: grid;\n        width: 100%;\n    }\n    .tab-header{\n        display: -ms-grid;\n        display: grid;\n        grid-auto-flow: column;\n        -webkit-box-pack: start;\n            -ms-flex-pack: start;\n                justify-content: flex-start;\n        gap: 1rem;\n        position: relative;\n        overflow: auto hidden;\n        max-width: 100%;\n        scrollbar-width: 0;\n    }\n    .indicator{\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        height: 0.15rem;\n        border-radius: 1rem 1rem 0 0;  \n        background: var(--accent-color);\n        -webkit-transition: width 0.3s, -webkit-transform 0.3s;\n        transition: width 0.3s, -webkit-transform 0.3s;\n        -o-transition: transform 0.3s, width 0.3s;\n        transition: transform 0.3s, width 0.3s;\n        transition: transform 0.3s, width 0.3s, -webkit-transform 0.3s;\n        pointer-events: none;\n    }\n    :host([variant="tab"]) .indicator{\n        height: 100%;\n        border-radius: var(--tab-indicator-border-radius);\n    }\n    :host([variant="tab"]) .tab-header{\n        border-bottom: none; \n    }\n    .hide-completely{\n        display: none;\n    }\n    :host([variant="tab"]) .tab-header{\n        gap: 0.2rem;\n        display: -ms-inline-grid;\n        display: inline-grid;\n        justify-self: flex-start;\n        border-radius: 0.3rem;\n    }\n    :host([variant="tab"]) slot::slotted(.active){\n        color: rgba(var(--background-color), 1);\n    }\n    slot::slotted(.active){\n        color: var(--accent-color);\n        opacity: 1;\n    }\n    @media (hover: none){\n        .tab-header::-webkit-scrollbar-track {\n            -webkit-box-shadow: none !important;\n            background-color: transparent !important;\n        }\n        .tab-header::-webkit-scrollbar {\n            height: 0;\n            background-color: transparent;\n        }\n    }         \n</style>\n<div part="tab-container" class="tabs">\n    <div part="tab-header" class="tab-header">\n        <slot></slot>\n        <div part="indicator" class="indicator"></div>\n    </div>\n</div>\n',customElements.define("sm-tab-header",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTabHeader.content.cloneNode(!0)),this.prevTab,this.allTabs,this.activeTab,this.indicator=this.shadowRoot.querySelector(".indicator"),this.tabSlot=this.shadowRoot.querySelector("slot"),this.tabHeader=this.shadowRoot.querySelector(".tab-header"),this.changeTab=this.changeTab.bind(this),this.handleClick=this.handleClick.bind(this),this.handlePanelChange=this.handlePanelChange.bind(this)}fireEvent(t){this.dispatchEvent(new CustomEvent(`switchedtab${this.target}`,{bubbles:!0,detail:{index:parseInt(t)}}))}moveIndiactor(t){this.indicator.setAttribute("style",`width: ${t.width}px; transform: translateX(${t.left-this.tabHeader.getBoundingClientRect().left+this.tabHeader.scrollLeft}px)`)}changeTab(t){t!==this.prevTab&&t.closest("sm-tab")&&(this.prevTab&&this.prevTab.classList.remove("active"),t.classList.add("active"),t.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"}),this.moveIndiactor(t.getBoundingClientRect()),this.prevTab=t,this.activeTab=t)}handleClick(t){t.target.closest("sm-tab")&&(this.changeTab(t.target),this.fireEvent(t.target.dataset.index))}handlePanelChange(t){this.changeTab(this.allTabs[t.detail.index])}connectedCallback(){if(!this.hasAttribute("target")||""===this.getAttribute("target").value)return;this.target=this.getAttribute("target"),this.tabSlot.addEventListener("slotchange",()=>{this.allTabs=this.tabSlot.assignedElements(),this.allTabs.forEach((t,n)=>{t.dataset.index=n})}),this.addEventListener("click",this.handleClick),document.addEventListener(`switchedpanel${this.target}`,this.handlePanelChange);let t=new ResizeObserver(t=>{t.forEach(t=>{if(this.prevTab){let t=this.activeTab.getBoundingClientRect();this.moveIndiactor(t)}})});t.observe(this);let n=new IntersectionObserver(t=>{t.forEach(t=>{if(t.isIntersecting)if(this.indicator.style.transition="none",this.activeTab){let t=this.activeTab.getBoundingClientRect();this.moveIndiactor(t)}else{this.allTabs[0].classList.add("active");let t=this.allTabs[0].getBoundingClientRect();this.moveIndiactor(t),this.fireEvent(0),this.prevTab=this.tabSlot.assignedElements()[0],this.activeTab=this.prevTab}})},{threshold:1});n.observe(this)}disconnectedCallback(){this.removeEventListener("click",this.handleClick),document.removeEventListener(`switchedpanel${this.target}`,this.handlePanelChange)}});const smTab=document.createElement("template");smTab.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    } \n    :host{\n        position: relative;\n        display: -webkit-inline-box;\n        display: -ms-inline-flexbox;\n        display: inline-flex;\n        z-index: 1;\n    }\n    .tab{\n        position: relative;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n            -ms-user-select: none;\n                user-select: none;\n        -webkit-box-pack: center;\n            -ms-flex-pack: center;\n                justify-content: center;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n        white-space: nowrap;\n        padding: 0.4rem 0.8rem;\n        font-weight: 500;\n        word-spacing: 0.1rem;\n        text-align: center;\n        -webkit-transition: color 0.3s;\n        -o-transition: color 0.3s;\n        transition: color 0.3s;\n        text-transform: capitalize;\n        height: 100%;\n    }\n    @media (hover: hover){\n        :host(.active) .tab{\n            opacity: 1;\n        }\n        .tab{\n            opacity: 0.7\n        }\n        .tab:hover{\n            opacity: 1\n        }\n    }\n</style>\n<div part="tab" class="tab">\n<slot></slot>\n</div>\n',customElements.define("sm-tab",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smTab.content.cloneNode(!0))}});const smTabPanels=document.createElement("template");smTabPanels.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \n:host{\n    width: 100%;\n}\n.panel-container{\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    scroll-snap-type: x mandatory;\n    content-visibility: auto;\n}\n::slotted(*){\n    min-width: 100%;\n    scroll-snap-align: center;\n}\n@media (any-hover: none) {\n    .panel-container{\n        overflow-x: auto;\n        scrollbar-width: none;\n    }\n    .container {\n        overflow-y: scroll;\n    }\n    ::-webkit-scrollbar {\n        width: 0;\n        height: 0;\n    }\n}\n</style>\n<div part="panel-container" class="panel-container">\n    <slot>Nothing to see here.</slot>\n</div>\n',customElements.define("sm-tab-panels",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTabPanels.content.cloneNode(!0)),this.isTransitioning=!1,this.panelContainer=this.shadowRoot.querySelector(".panel-container"),this.panelSlot=this.shadowRoot.querySelector("slot"),this.handleTabChange=this.handleTabChange.bind(this)}handleTabChange(t){this.isTransitioning=!0,this.panelContainer.scrollTo({left:this.allPanels[t.detail.index].getBoundingClientRect().left-this.panelContainer.getBoundingClientRect().left+this.panelContainer.scrollLeft,behavior:"smooth"}),setTimeout(()=>{this.isTransitioning=!1},300)}fireEvent(t){this.dispatchEvent(new CustomEvent(`switchedpanel${this.id}`,{bubbles:!0,detail:{index:parseInt(t)}}))}connectedCallback(){this.panelSlot.addEventListener("slotchange",()=>{this.allPanels=this.panelSlot.assignedElements(),this.allPanels.forEach((n,e)=>{n.dataset.index=e,t.observe(n)})}),document.addEventListener(`switchedtab${this.id}`,this.handleTabChange);const t=new IntersectionObserver(t=>{t.forEach(t=>{!this.isTransitioning&&t.isIntersecting&&this.fireEvent(t.target.dataset.index)})},{threshold:.6})}disconnectedCallback(){intersectionObserver.disconnect(),document.removeEventListener(`switchedtab${this.id}`,this.handleTabChange)}});
-const tagsInput=document.createElement("template");tagsInput.innerHTML='\n  <style>\n  *{\n    padding: 0;\n    margin: 0;\n    box-sizing: border-box;\n  }\n  :host{\n\t--accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --danger-color: red;\n    --border-radius: 0.3rem;\n\t--background: rgba(var(--text-color), 0.06);\n    }\n.hide{\n    display: none !important;\n}\n.tags-wrapper{\n    position: relative;\n    display: flex;\n    cursor: text;\n    flex-wrap: wrap;\n    justify-items: flex-start;\n    align-items: center;\n    padding: 0.5rem 0.5rem 0 0.5rem;\n    border-radius: var(--border-radius);\n    background: var(--background);\n  }\n  .tags-wrapper:focus-within{\n    box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;\n  }\n  \n  .tag {\n    cursor: pointer;\n    user-select: none;\n    align-items: center;\n    display: inline-flex;\n    border-radius: 0.3rem;\n    padding: 0.3rem 0.5rem;\n    margin: 0 0.5rem 0.5rem 0;\n    background-color: rgba(var(--text-color), 0.06);\n  }\n  \n  .icon {\n    height: 1.2rem;\n    width: 1.2rem;\n    margin-left: 0.3rem;\n    fill: rgba(var(--text-color), 0.8);\n  }\n  \n  input,\n  input:focus {\n    outline: none;\n    border: none;\n  }\n  \n  input {\n    display: inline-flex;\n    width: auto;\n    color: inherit;\n    max-width: inherit;\n    font-size: inherit;\n    font-family: inherit;\n    padding: 0.4rem 0.5rem;\n    margin: 0 0.5rem 0.5rem 0;\n    background-color: transparent;\n  }\n  .placeholder{\n      position: absolute;\n      padding: 0 0.5rem;\n      top: 50%;\n      font-weight: 500;\n      transform: translateY(-50%);\n      color: rgba(var(--text-color), 0.6);\n  }\n  </style>\n  <div class="tags-wrapper">\n    <input type="text" size="3"/>\n    <p class="placeholder"></p>\n  </div>\n',customElements.define("tags-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(tagsInput.content.cloneNode(!0)),this.input=this.shadowRoot.querySelector("input"),this.tagsWrapper=this.shadowRoot.querySelector(".tags-wrapper"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["placeholder","limit"],this.limit=void 0,this.tags=new Set,this.reset=this.reset.bind(this),this.handleInput=this.handleInput.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.handleClick=this.handleClick.bind(this),this.removeTag=this.removeTag.bind(this)}static get observedAttributes(){return["placeholder","limit"]}get value(){return[...this.tags].join()}focusIn(){this.input.focus()}reset(){for(this.input.value="",this.tags.clear();this.input.previousElementSibling;)this.input.previousElementSibling.remove()}handleInput(t){const e=t.target.value.trim().length;t.target.setAttribute("size",e||"3"),e?this.placeholder.classList.add("hide"):e||this.tags.size||this.placeholder.classList.remove("hide")}handleKeydown(t){if(","!==t.key&&"/"!==t.key||t.preventDefault(),""!==t.target.value.trim()){if("Enter"===t.key||","===t.key||"/"===t.key||"Space"===t.code){const e=t.target.value.trim();if(this.tags.has(e))this.tagsWrapper.querySelector(`[data-value="${e}"]`).animate([{backgroundColor:"initial"},{backgroundColor:"var(--accent-color)"},{backgroundColor:"initial"}],{duration:300,easing:"ease"});else{const t=document.createElement("span");t.dataset.value=e,t.className="tag",t.innerHTML=`\n                        <span class="tag-text">${e}</span>\n                        <svg class="icon" 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 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>\n                        `,this.input.before(t),this.tags.add(e)}if(t.target.value="",t.target.setAttribute("size","3"),this.limit&&this.limit<this.tags.size+1)return void(this.input.readOnly=!0)}}else"Backspace"===t.key&&this.input.previousElementSibling&&this.removeTag(this.input.previousElementSibling),this.limit&&this.limit>this.tags.size&&(this.input.readOnly=!1)}handleClick(t){t.target.closest(".tag")?this.removeTag(t.target.closest(".tag")):this.input.focus()}removeTag(t){this.tags.delete(t.dataset.value),t.remove(),this.tags.size||this.placeholder.classList.remove("hide")}connectedCallback(){this.input.addEventListener("input",this.handleInput),this.input.addEventListener("keydown",this.handleKeydown),this.tagsWrapper.addEventListener("click",this.handleClick)}attributeChangedCallback(t,e,n){"placeholder"===t&&(this.placeholder.textContent=n),"limit"===t&&(this.limit=parseInt(n))}disconnectedCallback(){this.input.removeEventListener("input",this.handleInput),this.input.removeEventListener("keydown",this.handleKeydown),this.tagsWrapper.removeEventListener("click",this.handleClick)}});
-const smTextarea=document.createElement("template");smTextarea.innerHTML='\n<style>\n*,\n*::before,\n*::after { \n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \n::-moz-focus-inner{\n    border: none;\n}\n.hide{\n    opacity: 0 !important;\n}\n:host{\n    display: grid;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --danger-color: red;\n    --border-radius: 0.3rem;\n    --background: rgba(var(--text-color), 0.06);\n    --padding: initial;\n    --max-height: 8rem;\n}\n:host([variant="outlined"]) .textarea {\n    box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;\n    background: rgba(var(--background-color), 1);\n}\n.textarea{\n    display: grid;\n    position: relative;\n    cursor: text;\n    min-width: 0;\n    text-align: left;\n    overflow: hidden auto;\n    grid-template-columns: 1fr;\n    align-items: stretch;\n    max-height: var(--max-height);\n    background: var(--background);\n    border-radius: var(--border-radius);\n    padding: var(--padding);\n}\n.textarea::after,\ntextarea{\n    padding: 0.7rem 1rem;\n    width: 100%;\n    min-width: 1em;\n    font: inherit;\n    color: inherit;\n    resize: none;\n    grid-area: 2/1;\n    justify-self: stretch;\n    background: none;\n    appearance: none;\n    border: none;\n    outline: none;\n    line-height: 1.5;\n    overflow: hidden;\n}\n.textarea::after{\n    content: attr(data-value) \' \';\n    visibility: hidden;\n    white-space: pre-wrap;\n    overflow-wrap: break-word;\n    word-wrap: break-word;\n    hyphens: auto;\n}\n.readonly{\n    pointer-events: none;\n}\n.textarea:focus-within:not(.readonly){\n    box-shadow: 0 0 0 0.1rem var(--accent-color) inset;\n}\n.placeholder{\n    position: absolute;\n    margin: 0.7rem 1rem;\n    opacity: .7;\n    font-weight: 400;\n    font-size: 1rem;\n    line-height: 1.5;\n    pointer-events: none;\n    user-select: none;\n}\n:host([disabled]) .textarea{\n    cursor: not-allowed;\n    opacity: 0.6;\n}\n@media (any-hover: hover){\n    ::-webkit-scrollbar{\n        width: 0.5rem;\n        height: 0.5rem;\n    }\n    \n    ::-webkit-scrollbar-thumb{\n        background: rgba(var(--text-color), 0.3);\n        border-radius: 1rem;\n        &:hover{\n            background: rgba(var(--text-color), 0.5);\n        }\n    }\n}\n</style>\n<label class="textarea" part="textarea">\n    <span class="placeholder"></span>\n    <textarea rows="1"></textarea>\n</label>\n',customElements.define("sm-textarea",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTextarea.content.cloneNode(!0)),this.textarea=this.shadowRoot.querySelector("textarea"),this.textareaBox=this.shadowRoot.querySelector(".textarea"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["disabled","required","readonly","rows","minlength","maxlength"],this.reset=this.reset.bind(this),this.focusIn=this.focusIn.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this)}static get observedAttributes(){return["disabled","value","placeholder","required","readonly","rows","minlength","maxlength"]}get value(){return this.textarea.value}set value(e){this.setAttribute("value",e),this.fireEvent()}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get isValid(){return this.textarea.checkValidity()}reset(){this.setAttribute("value","")}focusIn(){this.textarea.focus()}fireEvent(){let e=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(e)}checkInput(){this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder")&&(""!==this.textarea.value?this.placeholder.classList.add("hide"):this.placeholder.classList.remove("hide"))}connectedCallback(){this.textarea.addEventListener("input",e=>{this.textareaBox.dataset.value=this.textarea.value,this.checkInput()})}attributeChangedCallback(e,t,n){this.reflectedAttributes.includes(e)?this.hasAttribute(e)?this.textarea.setAttribute(e,this.getAttribute(e)?this.getAttribute(e):""):this.textContent.removeAttribute(e):"placeholder"===e?this.placeholder.textContent=this.getAttribute("placeholder"):"value"===e&&(this.textarea.value=n,this.textareaBox.dataset.value=n,this.checkInput())}});
-const textField=document.createElement("template");textField.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        box-sizing: border-box;\n    }\n    :host{\n        --accent-color: #4d2588;\n        --text-color: 17, 17, 17;\n        --background-color: 255, 255, 255;\n    }\n    .text-field{\n        display: flex;\n        align-items: center;\n    }\n    .text{\n        padding: 0.6rem 0;\n        transition: background-color 0.3s;\n        border-bottom: 0.15rem solid transparent;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        word-break: break-all;\n        word-break: break-word;\n        -moz-hyphens: auto;\n        -webkit-hyphens: auto;\n        hyphens: auto;\n    }\n    .text:focus{\n        outline: none;\n        border-bottom: 0.15rem solid var(--accent-color);\n    }\n    .text:focus-visible{\n        outline: none;\n        background: solid rgba(var(--text-color), 0.06);\n    }\n    .editable{\n        border-bottom: 0.15rem solid rgba(var(--text-color), 0.6);\n    }\n    .icon-container{\n        position: relative;\n        margin-left: 0.5rem;\n        height: 1.8rem;\n        width: 1.8rem;\n    }\n    :host([disabled]) .icon-container{\n        display: none;\n    }\n    .icon{\n        position: absolute;\n        cursor: pointer;\n        height: 2rem;\n        width: 2rem;\n        padding: 0.3rem;\n        fill: rgba(var(--text-color), 1);\n    }\n    .hide{\n        display: none;\n    }\n</style>\n<div class="text-field">\n    <div class="text" part="text"></div>\n    <div tabindex="0" class="icon-container">\n        <svg class="edit-button icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">\n            <title>Edit</title>\n            <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"/>\n        </svg>\n        <svg class="save-button icon hide" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">\n            <title>Save</title>\n            <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"/>\n        </svg>\n    </div>\n</div>\n',customElements.define("text-field",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(textField.content.cloneNode(!0)),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=!1,this.isDisabled=!1,this.fireEvent=this.fireEvent.bind(this),this.setEditable=this.setEditable.bind(this),this.setNonEditable=this.setNonEditable.bind(this),this.revert=this.revert.bind(this)}static get observedAttributes(){return["disabled"]}get value(){return this.text}set value(t){this.text=t,this.textContainer.textContent=t,this.setAttribute("value",t)}set disabled(t){this.isDisabled=t,this.isDisabled?this.setAttribute("disabled",""):this.removeAttribute("disabled")}fireEvent(t){let e=new CustomEvent("change",{bubbles:!0,cancelable:!0,composed:!0,detail:{value:t}});this.dispatchEvent(e)}setEditable(){this.isTextEditable||(this.textContainer.contentEditable=!0,this.textContainer.classList.add("editable"),this.textContainer.focus(),document.execCommand("selectAll",!1,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=!0)}setNonEditable(){this.isTextEditable&&(this.textContainer.contentEditable=!1,this.textContainer.classList.remove("editable"),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=!1)}revert(){this.textContainer.isContentEditable&&(this.value=this.text,this.setNonEditable())}connectedCallback(){this.text,this.hasAttribute("value")&&(this.text=this.getAttribute("value"),this.textContainer.textContent=this.text),this.hasAttribute("disable")?this.isDisabled=!0:this.isDisabled=!1,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"},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(t){"disabled"===t&&(this.hasAttribute("disabled")?(this.textContainer.removeEventListener("dblclick",this.setEditable),this.editButton.removeEventListener("click",this.setEditable),this.saveButton.removeEventListener("click",this.setNonEditable),this.revert()):(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)}});
-const themeToggle=document.createElement("template");themeToggle.innerHTML='\n    <style>\n    *{\n        padding: 0;\n        margin: 0;\n        box-sizing: border-box;\n    }\n    :host{\n        cursor: pointer;\n        --height: 2.5rem;\n        --width: 2.5rem;\n    }\n    .theme-toggle {\n        display: flex;\n        position: relative;\n        width: 1.4rem;\n        height: 1.4rem;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n    }\n    .theme-toggle::after{\n        content: \'\';\n        position: absolute;\n        height: var(--height);\n        width: var(--width);\n        top: 50%;\n        left: 50%;\n        opacity: 0;\n        border-radius: 50%;\n        pointer-events: none;\n        transition: transform 0.3s, opacity 0.3s;\n        transform: translate(-50%, -50%) scale(1.2);\n        background-color: rgba(var(--text-color), 0.12);\n    }\n    :host(:focus-within) .theme-toggle{\n        outline: none;\n    }\n    :host(:focus-within) .theme-toggle::after{\n        opacity: 1;\n        transform: translate(-50%, -50%) scale(1);\n    }\n    .icon {\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        fill: rgba(var(--text-color), 1);\n        transition: transform 0.6s;\n    }\n    \n    .theme-switcher__checkbox {\n        display: none;\n    }\n    :host([checked]) .moon-icon {\n        transform: scale(0) rotate(90deg);\n    }\n    :host(:not([checked])) .sun-icon {\n        transform: scale(0) rotate(-90deg);\n    }\n    </style>\n    <label class="theme-toggle" title="Change theme" tabindex="0">\n        <slot name="light-mode-icon">\n            <svg class="icon moon-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24"\n                height="24">\n                <path fill="none" d="M0 0h24v24H0z" />\n                <path\n                    d="M10 6a8 8 0 0 0 11.955 6.956C21.474 18.03 17.2 22 12 22 6.477 22 2 17.523 2 12c0-5.2 3.97-9.474 9.044-9.955A7.963 7.963 0 0 0 10 6zm-6 6a8 8 0 0 0 8 8 8.006 8.006 0 0 0 6.957-4.045c-.316.03-.636.045-.957.045-5.523 0-10-4.477-10-10 0-.321.015-.64.045-.957A8.006 8.006 0 0 0 4 12zm14.164-9.709L19 2.5v1l-.836.209a2 2 0 0 0-1.455 1.455L16.5 6h-1l-.209-.836a2 2 0 0 0-1.455-1.455L13 3.5v-1l.836-.209A2 2 0 0 0 15.29.836L15.5 0h1l.209.836a2 2 0 0 0 1.455 1.455zm5 5L24 7.5v1l-.836.209a2 2 0 0 0-1.455 1.455L21.5 11h-1l-.209-.836a2 2 0 0 0-1.455-1.455L18 8.5v-1l.836-.209a2 2 0 0 0 1.455-1.455L20.5 5h1l.209.836a2 2 0 0 0 1.455 1.455z" />\n            </svg>\n        </slot>\n        <slot name="dark-mode-icon">\n            <svg class="icon sun-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">\n                <path fill="none" d="M0 0h24v24H0z" />\n                <path\n                d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z" />\n            </svg>\n        </slot>\n    </label>\n';class ThemeToggle extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(themeToggle.content.cloneNode(!0)),this.isChecked=!1,this.hasTheme="light",this.toggleState=this.toggleState.bind(this),this.fireEvent=this.fireEvent.bind(this),this.handleThemeChange=this.handleThemeChange.bind(this)}static get observedAttributes(){return["checked"]}daylight(){this.hasTheme="light",document.body.dataset.theme="light",this.setAttribute("aria-checked","false")}nightlight(){this.hasTheme="dark",document.body.dataset.theme="dark",this.setAttribute("aria-checked","true")}toggleState(){this.toggleAttribute("checked"),this.fireEvent()}handleKeyDown(e){"Space"===e.code&&this.toggleState()}handleThemeChange(e){e.detail.theme!==this.hasTheme&&("dark"===e.detail.theme?this.setAttribute("checked",""):this.removeAttribute("checked"))}fireEvent(){this.dispatchEvent(new CustomEvent("themechange",{bubbles:!0,composed:!0,detail:{theme:this.hasTheme}}))}connectedCallback(){this.setAttribute("role","switch"),this.setAttribute("aria-label","theme toggle"),"dark"===localStorage.theme?(this.nightlight(),this.setAttribute("checked","")):"light"===localStorage.theme?(this.daylight(),this.removeAttribute("checked")):window.matchMedia("(prefers-color-scheme: dark)").matches?(this.nightlight(),this.setAttribute("checked","")):(this.daylight(),this.removeAttribute("checked")),this.addEventListener("click",this.toggleState),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("themechange",this.handleThemeChange)}disconnectedCallback(){this.removeEventListener("click",this.toggleState),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("themechange",this.handleThemeChange)}attributeChangedCallback(e,t,n){"checked"===e&&(this.hasAttribute("checked")?(this.nightlight(),localStorage.setItem("theme","dark")):(this.daylight(),localStorage.setItem("theme","light")))}}window.customElements.define("theme-toggle",ThemeToggle);
\ No newline at end of file
+const smButton=document.createElement("template");smButton.innerHTML="\n<style>     \n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n}       \n:host{\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    width: auto;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --padding: 0.6rem 1.2rem;\n    --border-radius: 0.3rem;\n    --background: rgba(var(--text-color), 0.1);\n}\n:host([variant='primary']) .button{\n    background: var(--accent-color);\n    color: rgba(var(--background-color), 1);\n}\n:host([variant='outlined']) .button{\n    -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n            box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;\n    background: transparent; \n    color: var(--accent-color);\n}\n:host([variant='no-outline']) .button{\n    background: inherit; \n    color: var(--accent-color);\n}\n:host([disabled]){\n    pointer-events: none;\n    cursor: not-allowed;\n}\n.button {\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    width: 100%;\n    padding: var(--padding);\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    border-radius: var(--border-radius); \n    -webkit-box-pack: center; \n        -ms-flex-pack: center; \n            justify-content: center;\n    transition: box-shadow 0.3s, background-color 0.3s;\n    font-family: inherit;\n    font-size: 0.9rem;\n    font-weight: 500;\n    background-color: var(--background); \n    -webkit-tap-highlight-color: transparent;\n    outline: none;\n    overflow: hidden;\n    border: none;\n    color: inherit;\n    align-items: center;\n}\n:host([disabled]) .button{\n    pointer-events: none;\n    cursor: not-allowed;\n    opacity: 0.6;\n    color: rgba(var(--text-color), 1);\n    background-color: rgba(var(--text-color), 0.3);\n}\n@media (hover: hover){\n    :host(:not([disabled])) .button:hover,\n    :host(:focus-within:not([disabled])) .button{\n        -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);\n        box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);\n    }\n    :host([variant='outlined']:not([disabled])) .button:hover,\n    :host(:focus-within[variant='outlined']:not([disabled])) .button:hover{\n        -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);\n                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);\n    }\n}\n@media (hover: none){\n    :host(:not([disabled])) .button:active{\n        -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);\n                box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);\n    }\n    :host([variant='outlined']) .button:active{\n        -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);\n                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);\n    }\n}\n</style>\n<div part=\"button\" class=\"button\">\n    <slot></slot>   \n</div>",customElements.define("sm-button",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smButton.content.cloneNode(!0))}static get observedAttributes(){return["disabled"]}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}focusIn(){this.focus()}handleKeyDown(t){this.hasAttribute("disabled")||"Enter"!==t.key&&"Space"!==t.code||(t.preventDefault(),this.click())}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","button"),this.addEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(t){"disabled"===t&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0"),this.setAttribute("aria-disabled",this.hasAttribute("disabled")))}});const smCarousel=document.createElement("template");smCarousel.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \n:host{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --arrow-left: 1rem;\n    --arrow-right: 1rem;\n    --arrow-top: auto;\n    --arrow-bottom: auto;\n    --nav-icon-fill: rgba(var(--background-color), 1);\n    --nav-background-color: rgba(var(--text-color), 1);\n    --nav-box-shadow: 0 0.2rem 0.2rem #00000020, 0 0.5rem 1rem #00000040;\n    --indicator-top: auto;\n    --indicator-bottom: -1.5rem;\n    --indicator-height: 0.2rem;\n    --indicator-width: 0.4rem;\n    --indicator-border-radius: 0.4rem;\n    --indicators-gap: 0.5rem;\n    --active-indicator-color: var(--accent-color);\n}\n.carousel__button{\n    position: absolute;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    cursor: pointer;\n    min-width: 0;\n    top:  var(--arrow-top);\n    bottom:  var(--arrow-bottom);\n    border: none;\n    background: var(--nav-background-color);\n    -webkit-box-shadow: var(--nav-box-shadow);\n            box-shadow:  var(--nav-box-shadow); \n    -webkit-tap-highlight-color: transparent;\n    transition: transform 0.3s, opacity 0.3s;\n    z-index: 1;\n    border-radius: 3rem;\n    padding: 0.5rem;\n}\nbutton:focus{\n    outline: none;\n}\nbutton:focus-visible{\n    outline: rgba(var(--text-color), 1) 0.1rem solid;\n}\n.carousel__button:active{\n    transform: scale(0.9);\n}\n.carousel__button--left{\n    left: var(--arrow-left);\n}\n.carousel__button--right{\n    right: var(--arrow-right);\n}\n.icon {\n    height: 1.5rem;\n    width: 1.5rem;\n    fill: var(--nav-icon-fill);\n}\n.hide{\n    display: none !important;\n}\n:host([indicator]) .carousel-container{\n    margin-bottom: 2rem;\n}\n.carousel-container{\n    position: relative;\n    display: grid;\n    width: 100%;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.carousel{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    max-width: 100%;\n    width: 100%;\n    overflow: auto hidden;\n    -ms-scroll-snap-type: x mandatory;\n        scroll-snap-type: x mandatory;\n}\n.indicators{\n    display: -ms-grid;\n    display: grid;\n    grid-auto-flow: column;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    position: absolute;\n    padding: 0.5rem 0;\n    top: var(--indicator-top);\n    bottom: var(--indicator-bottom);\n    gap: var(--indicators-gap);\n    width: 100%;\n}\n.indicator{\n    position: relative;\n    height: var(--indicator-height);\n    width: var(--indicator-width);\n    background: rgba(var(--text-color), 0.3);\n    border-radius: var(--indicator-border-radius);\n    -webkit-transition: 0.2s;\n    -o-transition: 0.2s;\n    transition: 0.2s;\n    cursor: pointer;\n}\n.indicator.active{\n    -webkit-transform: scale(1.5);\n        -ms-transform: scale(1.5);\n            transform: scale(1.5);\n    background: var(--active-indicator-color);\n}\nslot::slotted(*){\n    scroll-snap-align: center;\n}\n:host([align-items="start"]) slot::slotted(*){\n    scroll-snap-align: start;\n}\n:host([align-items="center"]) slot::slotted(*){\n    scroll-snap-align: center;\n}\n:host([align-items="end"]) slot::slotted(*){\n    scroll-snap-align: end;\n}\n@media (hover: hover){\n    .carousel{\n        overflow: hidden;\n    }\n    .carousel__button{\n        opacity: 0.8;\n    }\n    :host(:hover) .carousel__button{\n        opacity: 1;\n    }\n    .left,.right{\n        display: none;\n    }\n    .indicators{\n        transition: gap 0.3s;\n    }\n    .indicators:hover{\n        gap: calc(var(--indicators-gap) * 2);\n    }\n    .indicators:hover .indicator{\n        transform: scale(2);\n    }\n}\n@media (hover: none){\n    ::-webkit-scrollbar-track {\n        -webkit-box-shadow: none !important;\n        background-color: transparent !important;\n    }\n    ::-webkit-scrollbar {\n        height: 0;\n        background-color: transparent;\n    }\n    .carousel{\n        overflow: auto none;\n    }\n    .carousel__button{\n        display: none;\n    }\n    .left,.right{\n        display: block;\n    }\n}\n</style>\n<div class="carousel-container">\n    <button class="carousel__button carousel__button--left hide">\n        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"/></svg>\n    </button>\n    <div part="carousel" class="carousel">\n        <slot></slot>\n    </div>\n    <button class="carousel__button carousel__button--right hide">\n        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>\n    </button>\n    <div class="indicators"></div>\n</div>\n',customElements.define("sm-carousel",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCarousel.content.cloneNode(!0)),this.isAutoPlaying=!1,this.autoPlayInterval=5e3,this.autoPlayTimeout,this.initialTimeout,this.activeSlideNum=0,this.carouselItems,this.indicators,this.showIndicator=!1,this.carousel=this.shadowRoot.querySelector(".carousel"),this.carouselContainer=this.shadowRoot.querySelector(".carousel-container"),this.carouselSlot=this.shadowRoot.querySelector("slot"),this.navButtonRight=this.shadowRoot.querySelector(".carousel__button--right"),this.navButtonLeft=this.shadowRoot.querySelector(".carousel__button--left"),this.indicatorsContainer=this.shadowRoot.querySelector(".indicators"),this.scrollLeft=this.scrollLeft.bind(this),this.scrollRight=this.scrollRight.bind(this),this.handleIndicatorClick=this.handleIndicatorClick.bind(this),this.showSlide=this.showSlide.bind(this),this.nextSlide=this.nextSlide.bind(this),this.autoPlay=this.autoPlay.bind(this),this.startAutoPlay=this.startAutoPlay.bind(this),this.stopAutoPlay=this.stopAutoPlay.bind(this)}static get observedAttributes(){return["indicator","autoplay","interval"]}scrollLeft(){this.carousel.scrollBy({left:-this.scrollDistance,behavior:"smooth"})}scrollRight(){this.carousel.scrollBy({left:this.scrollDistance,behavior:"smooth"})}showSlide(t){this.carousel.scrollTo({left:this.carouselItems[t].getBoundingClientRect().left-this.carousel.getBoundingClientRect().left+this.carousel.scrollLeft,behavior:"smooth"})}nextSlide(){if(!this.carouselItems)return;let t=this.activeSlideNum+1<this.carouselItems.length?this.activeSlideNum+1:0;this.showSlide(t)}autoPlay(){this.nextSlide(),this.isAutoPlaying&&(this.autoPlayTimeout=setTimeout(()=>{this.autoPlay()},this.autoPlayInterval))}startAutoPlay(){this.setAttribute("autoplay","")}stopAutoPlay(){this.removeAttribute("autoplay")}createIndicator(t){let e=document.createElement("div");return e.classList.add("indicator"),e.dataset.rank=t,e}handleIndicatorClick(t){if(t.target.closest(".indicator")){const e=parseInt(t.target.closest(".indicator").dataset.rank);this.activeSlideNum!==e&&this.showSlide(e)}}handleKeyDown(t){"ArrowLeft"===t.code?this.scrollRight():"ArrowRight"===t.code&&this.scrollRight()}connectedCallback(){let t=document.createDocumentFragment();this.carouselSlot.addEventListener("slotchange",e=>{this.carouselItems=this.carouselSlot.assignedElements(),this.carouselItems.forEach(t=>n.observe(t)),this.carouselItems.length>0?(i.observe(this.carouselItems[0]),s.observe(this.carouselItems[this.carouselItems.length-1])):(navButtonLeft.classList.add("hide"),navButtonRight.classList.add("hide"),i.disconnect(),s.disconnect()),this.showIndicator&&(this.indicatorsContainer.innerHTML="",this.carouselItems.forEach((e,n)=>{t.append(this.createIndicator(n)),e.dataset.rank=n}),this.indicatorsContainer.append(t),this.indicators=this.indicatorsContainer.children)});const e={threshold:.9,root:this},n=new IntersectionObserver(t=>{t.forEach(t=>{if(this.showIndicator){const e=parseInt(t.target.dataset.rank);t.isIntersecting?(this.indicators[e].classList.add("active"),this.activeSlideNum=e):this.indicators[e].classList.remove("active")}})},e),i=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?this.navButtonLeft.classList.add("hide"):this.navButtonLeft.classList.remove("hide")})},e),s=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?this.navButtonRight.classList.add("hide"):this.navButtonRight.classList.remove("hide")})},e),o=new ResizeObserver(t=>{t.forEach(t=>{if(t.contentBoxSize){const e=Array.isArray(t.contentBoxSize)?t.contentBoxSize[0]:t.contentBoxSize;this.scrollDistance=.6*e.inlineSize}else this.scrollDistance=.6*t.contentRect.width})});o.observe(this),this.addEventListener("keydown",this.handleKeyDown),this.navButtonRight.addEventListener("click",this.scrollRight),this.navButtonLeft.addEventListener("click",this.scrollLeft),this.indicatorsContainer.addEventListener("click",this.handleIndicatorClick)}attributeChangedCallback(t,e,n){e!==n&&("indicator"===t&&(this.showIndicator=this.hasAttribute("indicator")),"autoplay"===t&&(this.hasAttribute("autoplay")?this.initialTimeout=setTimeout(()=>{this.isAutoPlaying=!0,this.autoPlay()},this.autoPlayInterval):(this.isAutoPlaying=!1,clearTimeout(this.autoPlayTimeout),clearTimeout(this.initialTimeout))),"interval"===t&&(this.hasAttribute("interval")&&""!==this.getAttribute("interval").trim()?this.autoPlayInterval=Math.abs(parseInt(this.getAttribute("interval").trim())):this.autoPlayInterval=5e3))}disconnectedCallback(){this.navButtonRight.removeEventListener("click",this.scrollRight),this.navButtonLeft.removeEventListener("click",this.scrollLeft),this.indicatorsContainer.removeEventListener("click",this.handleIndicatorClick)}});const smCheckbox=document.createElement("template");smCheckbox.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    } \n    :host{\n        display: -webkit-inline-box;\n        display: -ms-inline-flexbox;\n        display: inline-flex;\n        --accent-color: #4d2588;\n        --text-color: 17, 17, 17;\n        --background-color: 255, 255, 255;\n        --height: 1.2rem;\n        --width: 1.2rem;\n        --border-radius: 0.2rem;\n        --border-color: rgba(var(--text-color), 0.7);\n    }\n    :host([disabled]) {\n        opacity: 0.6;\n        user-select: none;\n        pointer-events: none;\n    }\n    .checkbox {\n        position: relative;\n        display:-webkit-box;\n        display:-ms-flexbox;\n        display:flex;\n        -webkit-box-align: center;\n            -ms-flex-align: center;\n                align-items: center;\n        cursor: pointer;\n        outline: none;\n        -webkit-tap-highlight-color: transparent;\n    }\n    \n    .checkbox:focus-visible{\n        outline: auto;\n    }\n    .checkbox:active .icon,\n    .checkbox:focus-within .icon{\n        box-shadow: 0 0 0 0.1rem var(--accent-color) inset;\n    }\n    \n    input {\n        display: none;\n    }\n    \n    .checkmark {\n        stroke-dashoffset: -65;\n        stroke-dasharray: 65;\n        -webkit-transition: stroke-dashoffset 0.3s; \n        -o-transition: stroke-dashoffset 0.3s; \n        transition: stroke-dashoffset 0.3s;\n    }\n    \n    :host([checked]) .checkmark {\n        stroke-dashoffset: 0;\n        stroke: rgba(var(--background-color), 1);\n    }\n    :host([checked]) .icon {\n        background: var(--accent-color);\n        box-shadow: 0 0 0 0.1rem var(--accent-color) inset;\n    }    \n    .icon {\n        fill: none;\n        height: var(--height);\n        width: var(--width);\n        padding: 0.1rem;\n        stroke-width: 8; \n        stroke: var(--border-color);\n        overflow: visible;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n        -webkit-transition: background 0.3s;\n        -o-transition: background 0.3s;\n        transition: background 0.3s;\n        border-radius: var(--border-radius);\n        box-shadow: 0 0 0 0.1rem var(--border-color) inset;\n    }\n</style>\n<label class="checkbox">\n    <svg class="icon" viewBox="0 0 64 64">\n        <path class="checkmark" d="M50.52,19.56,26,44.08,13.48,31.56" />\n    </svg>\n    <slot></slot>\n</label>',customElements.define("sm-checkbox",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCheckbox.content.cloneNode(!0)),this.defaultState,this.checkbox=this.shadowRoot.querySelector(".checkbox"),this.reset=this.reset.bind(this),this.dispatch=this.dispatch.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleClick=this.handleClick.bind(this)}static get observedAttributes(){return["value","disabled","checked"]}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.hasAttribute("checked")}set checked(t){t?this.setAttribute("checked",""):this.removeAttribute("checked")}set value(t){this.setAttribute("value",t)}get value(){return this.getAttribute("value")}focusIn(){this.focus()}reset(){this.value=this.defaultState}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0}))}handleKeyDown(t){"Space"===t.code&&(t.preventDefault(),this.click())}handleClick(t){this.toggleAttribute("checked")}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","checkbox"),this.defaultState=this.hasAttribute("checked"),this.hasAttribute("checked")||this.setAttribute("aria-checked","false"),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("click",this.handleClick)}attributeChangedCallback(t,e,n){e!==n&&("checked"===t?(this.setAttribute("aria-checked",this.hasAttribute("checked")),this.dispatch()):"disabled"===t&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0")))}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("change",this.handleClick)}});const smCopy=document.createElement("template");smCopy.innerHTML='\n<style>     \n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n}       \n:host{\n    display: -webkit-box;\n    display: flex;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --padding: 0;\n    --background-color: inherit;\n    --button-background-color: rgba(var(--text-color), 0.2);\n    --button-border-radius: 0.3rem;\n}\n.copy{\n    display: grid;\n    width: 100%;\n    gap: 0.5rem;\n    padding: var(--padding);\n    align-items: center;\n    grid-template-columns: minmax(0, 1fr) auto;\n}\n:host(:not([clip-text])) .copy-content{\n    overflow-wrap: break-word;\n    word-wrap: break-word;\n}\n:host([clip-text]) .copy-content{\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n.copy-button{\n    display: inline-flex;\n    justify-content: center;\n    cursor: pointer;\n    border: none;\n    padding: 0.4rem;\n    background-color: inherit;\n    border-radius: var(--button-border-radius);\n}\n.copy-button:active{\n    background-color: var(--button-background-color);\n}\n.icon{\n    height: 1.2rem;\n    width: 1.2rem;\n    fill: rgba(var(--text-color), 0.8);\n}\n@media (any-hover: hover){\n    .copy:hover .copy-button{\n        opacity: 1;\n    }\n    .copy-button{\n        opacity: 0.6;\n    }\n    .copy-button:hover{\n        background-color: var(--button-background-color);\n    }\n}\n</style>\n<section class="copy">\n    <p class="copy-content"></p>\n    <button part="button" class="copy-button" title="copy">\n        <slot name="copy-icon">\n            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"/></svg>\n        </slot>\n    </button>\n</section>\n',customElements.define("sm-copy",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCopy.content.cloneNode(!0)),this.copyContent=this.shadowRoot.querySelector(".copy-content"),this.copyButton=this.shadowRoot.querySelector(".copy-button"),this.copy=this.copy.bind(this)}static get observedAttributes(){return["value"]}set value(t){this.setAttribute("value",t)}get value(){return this.getAttribute("value")}fireEvent(){this.dispatchEvent(new CustomEvent("copy",{composed:!0,bubbles:!0,cancelable:!0}))}copy(){navigator.clipboard.writeText(this.copyContent.textContent).then(t=>this.fireEvent()).catch(t=>console.error(t))}connectedCallback(){this.copyButton.addEventListener("click",this.copy)}attributeChangedCallback(t,e,n){"value"===t&&(this.copyContent.textContent=n)}disconnectedCallback(){this.copyButton.removeEventListener("click",this.copy)}});const fileInput=document.createElement("template");fileInput.innerHTML='\n  \t<style>\n\t\t*{\n\t\t\tpadding: 0;\n\t\t\tmargin: 0;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t:host{\n\t\t\t--accent-color: #4d2588;\n\t\t\t--text-color: 17, 17, 17;\n\t\t\t--background-color: 255, 255, 255;\n\t\t\t--border-radius: 0.3rem;\n\t\t\t--button-color: rgba(var(--background-color), 1);\n\t\t\t--button-font-weight: 500;\n\t\t\t--button-background-color: var(--accent-color);\n\t\t}\n\t\t.file-input {\n\t\t\tdisplay: flex;\n\t\t}\n\t\t\n\t\t.file-picker-button {\n            display: flex;\n\t\t\tcursor: pointer;\n\t\t\tuser-select: none;\n            align-items: center;\n\t\t\tpadding: 0.5rem 0.8rem;\n\t\t\tcolor: var(--button-color);\n\t\t\tborder-radius: var(--border-radius);\n\t\t\tfont-weight: var(--button-font-weight);\n\t\t\tbackground-color: var(--button-background-color);\n\t\t}\n\t\t.files-preview-wrapper{\n\t\t\tdisplay: grid;\n\t\t\tgap: 0.5rem;\n\t\t\tlist-style: none;\n\t\t}\n\t\t.files-preview-wrapper:not(:empty){\n            margin-bottom: 1rem;\n\t\t}\n\t\t.file-preview{\n\t\t\tdisplay: grid;\n            gap: 0.5rem;\n            align-items: center;\n\t\t\tpadding: 0.5rem 0.8rem;\n\t\t\tborder-radius: var(--border-radius);\n\t\t\tbackground-color: rgba(var(--text-color), 0.06)\n\t\t}\n\t\t.file-name{\n\t\t}\n        .file-size{\n            font-size: 0.8rem;\n            font-weight: 400;\n            color: rgba(var(--text-color), 0.8);\n        }\n\t\tinput[type=file] {\n\t\t\tdisplay: none;\n\t\t}\n  \t</style>\n\t<ul class="files-preview-wrapper"></ul>\n  \t<label tabindex="0" class="file-input">\n\t\t<div class="file-picker-button"><slot>Choose file</slot></div>\n\t\t<input type="file">\n\t</label>\n',customElements.define("file-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(fileInput.content.cloneNode(!0)),this.input=this.shadowRoot.querySelector("input"),this.fileInput=this.shadowRoot.querySelector(".file-input"),this.filesPreviewWraper=this.shadowRoot.querySelector(".files-preview-wrapper"),this.reflectedAttributes=["accept","multiple","capture"],this.reset=this.reset.bind(this),this.formatBytes=this.formatBytes.bind(this),this.createFilePreview=this.createFilePreview.bind(this),this.handleChange=this.handleChange.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}static get observedAttributes(){return["accept","multiple","capture"]}get files(){return this.input.files}set accept(t){this.setAttribute("accept",t)}set multiple(t){t?this.setAttribute("mutiple",""):this.removeAttribute("mutiple")}set capture(t){this.setAttribute("capture",t)}set value(t){this.input.value=t}get isValid(){return""!==this.input.value}reset(){this.input.value="",this.filesPreviewWraper.innerHTML=""}formatBytes(t,e=2){if(0===t)return"0 Bytes";const n=0>e?0:e,i=Math.floor(Math.log(t)/Math.log(1024));return parseFloat((t/Math.pow(1024,i)).toFixed(n))+" "+["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][i]}createFilePreview(t){const e=document.createElement("li"),{name:n,size:i}=t;return e.className="file-preview",e.innerHTML=`\n\t\t\t<div class="file-name">${n}</div>\n            <h5 class="file-size">${this.formatBytes(i)}</h5>\n\t\t`,e}handleChange(t){this.filesPreviewWraper.innerHTML="";const e=document.createDocumentFragment();Array.from(t.target.files).forEach(t=>{e.append(this.createFilePreview(t))}),this.filesPreviewWraper.append(e)}handleKeyDown(t){"Enter"!==t.key&&"Space"!==t.code||(t.preventDefault(),this.input.click())}connectedCallback(){this.setAttribute("role","button"),this.setAttribute("aria-label","File upload"),this.input.addEventListener("change",this.handleChange),this.fileInput.addEventListener("keydown",this.handleKeyDown)}attributeChangedCallback(t){this.reflectedAttributes.includes(t)&&(this.hasAttribute(t)?this.input.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.input.removeAttribute(t))}disconnectedCallback(){this.input.removeEventListener("change",this.handleChange),this.fileInput.removeEventListener("keydown",this.handleKeyDown)}});const smForm=document.createElement("template");smForm.innerHTML='\n    <style>\n    *{\n        padding: 0;\n        margin: 0;\n        box-sizing: border-box;\n    }\n    :host{\n        display: flex;\n        width: 100%;\n    }\n    form{\n        display: grid;\n        gap: var(--gap, 1.5rem);\n        width: 100%;\n    }\n    </style>\n\t<form part="form" onsubmit="return false">\n\t\t<slot></slot>\n\t</form>\n',customElements.define("sm-form",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smForm.content.cloneNode(!0)),this.form=this.shadowRoot.querySelector("form"),this.formElements,this.requiredElements,this.submitButton,this.resetButton,this.allRequiredValid=!1,this.debounce=this.debounce.bind(this),this._checkValidity=this._checkValidity.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.reset=this.reset.bind(this),this.elementsChanged=this.elementsChanged.bind(this)}debounce(t,e){let n=null;return(...i)=>{window.clearTimeout(n),n=window.setTimeout(()=>{t.apply(null,i)},e)}}_checkValidity(){this.allRequiredValid=this.requiredElements.every(t=>t.isValid),this.submitButton&&(this.allRequiredValid?this.submitButton.disabled=!1:this.submitButton.disabled=!0)}handleKeydown(t){"Enter"===t.key&&"SM-TEXTAREA"!==t.target.tagName&&(this.allRequiredValid?(this.submitButton&&"SM-BUTTON"===this.submitButton.tagName&&this.submitButton.click(),this.dispatchEvent(new CustomEvent("submit",{bubbles:!0,composed:!0}))):this.requiredElements.find(t=>!t.isValid).vibrate())}reset(){this.formElements.forEach(t=>t.reset())}elementsChanged(){this.formElements=[...this.querySelectorAll("sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio")],this.requiredElements=this.formElements.filter(t=>t.hasAttribute("required")),this.submitButton=this.querySelector('[variant="primary"], [type="submit"]'),this.resetButton=this.querySelector('[type="reset"]'),this.resetButton&&this.resetButton.addEventListener("click",this.reset),this._checkValidity()}connectedCallback(){const t=this.shadowRoot.querySelector("slot");t.addEventListener("slotchange",this.elementsChanged),this.addEventListener("input",this.debounce(this._checkValidity,100)),this.addEventListener("keydown",this.debounce(this.handleKeydown,100))}disconnectedCallback(){this.removeEventListener("input",this.debounce(this._checkValidity,100)),this.removeEventListener("keydown",this.debounce(this.handleKeydown,100))}});const hamburgerMenu=document.createElement("template");hamburgerMenu.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \n:host{\n    display: flex;\n    width: 100%;\n    height: 100%;\n    overflow-y: auto;\n    scrollbar-width: thin;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --padding: 0 0 3rem 0;\n    --backdrop-color: rgba(0,0,0,0.5);\n}\n.backdrop{\n    position: fixed;\n}\n.side-nav{\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n}\n.hide{\n    display: none !important;\n}\n@media screen and (max-width: 640px){\n    :host{\n        position: fixed;\n        z-index: 10;\n    }\n    .side-nav{\n        height: 100%;\n        overflow-y: auto;  \n        width: calc(100% - 4rem);\n        transition: transform 0.3s;\n        background-color: rgba(var(--background-color), 1);\n        box-shadow: 0.5rem 0 2rem rgba(0,0,0, 0.1);\n        z-index: 1;\n    }\n    .side-nav:not(.reveal){\n        transform: translateX(-100%);\n    }\n    .reveal{\n        transform: none;\n    }\n    .backdrop{\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        background-color: var(--backdrop-color);\n        -webkit-transition: opacity 0.3s;\n        -o-transition: opacity 0.3s;\n        transition: opacity 0.3s;\n    }\n}\n@media screen and (min-width: 640px){\n    .backdrop{\n        pointer-events: none;\n    }\n}\n@media (any-hover: hover){\n    ::-webkit-scrollbar{\n        width: 0.5rem;\n    }\n    ::-webkit-scrollbar-thumb{\n        border-radius: 1rem;\n        background: rgba(var(--text-color), 0.3);\n        &:hover{\n            background: rgba(var(--text-color), 0.5);\n        }\n    }\n}\n</style>\n<section class="backdrop hide"></section>\n<nav class="side-nav">\n    <slot></slot>\n</nav>\n';class HamburgerMenu extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(hamburgerMenu.content.cloneNode(!0)),this.resumeScrolling=this.resumeScrolling.bind(this),this.open=this.open.bind(this),this.close=this.close.bind(this),this.sideNav=this.shadowRoot.querySelector(".side-nav"),this.backdrop=this.shadowRoot.querySelector(".backdrop"),this.isOpen=!1,this.animeOptions={duration:300,easing:"ease"}}static get observedAttributes(){return["open"]}resumeScrolling(){const t=document.body.style.top;window.scrollTo(0,-1*parseInt(t||"0")),setTimeout(()=>{document.body.style.overflow="auto",document.body.style.top="initial"},300)}open(){this.isOpen||(document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`,this.classList.remove("hide"),this.sideNav.classList.add("reveal"),this.backdrop.classList.remove("hide"),this.backdrop.animate([{opacity:0},{opacity:1}],this.animeOptions).onfinish=(()=>{this.isOpen=!0,this.setAttribute("open","")}))}close(){this.isOpen&&(this.sideNav.classList.remove("reveal"),this.backdrop.animate([{opacity:1},{opacity:0}],this.animeOptions).onfinish=(()=>{this.backdrop.classList.add("hide"),this.classList.add("hide"),this.isOpen=!1,this.removeAttribute("open")}))}connectedCallback(){this.backdrop.addEventListener("click",this.close);const t=new ResizeObserver(t=>{window.innerWidth<640&&this.isOpen?this.classList.remove("hide"):this.classList.add("hide"),window.innerWidth>640&&this.classList.remove("hide")});t.observe(this)}disconnectedCallback(){this.backdrop.removeEventListener("click",this.close)}attributeChangedCallback(t,e,n){"open"===t&&this.hasAttribute("open")&&this.open()}}window.customElements.define("hamburger-menu",HamburgerMenu)
+;const smInput=document.createElement("template");smInput.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \ninput[type="search"]::-webkit-search-decoration,\ninput[type="search"]::-webkit-search-cancel-button,\ninput[type="search"]::-webkit-search-results-button,\ninput[type="search"]::-webkit-search-results-decoration { display: none; }\ninput[type=number] {\n-moz-appearance:textfield;\n}\ninput[type=number]::-webkit-inner-spin-button, \ninput[type=number]::-webkit-outer-spin-button { \n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    margin: 0; \n}\ninput::-ms-reveal,\ninput::-ms-clear {\n  display: none;\n}\ninput:invalid{\n    outline: none;\n    -webkit-box-shadow: none;\n            box-shadow: none;\n}\n::-moz-focus-inner{\nborder: none;\n}\n:host{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --success-color: #00C853;\n    --danger-color: red;\n    --width: 100%;\n    --icon-gap: 0.5rem;\n    --border-radius: 0.3rem;\n    --padding: 0.7rem 1rem;\n    --background: rgba(var(--text-color), 0.06);\n}\n.hide{\n   opacity: 0 !important;\n   pointer-events: none !important;\n}\n.hide-completely{\n    display: none;\n}\n.icon {\n    fill: rgba(var(--text-color), 0.6);\n    height: 1.4rem;\n    width: 1.4rem;\n    border-radius: 1rem;\n    cursor: pointer;\n    min-width: 0;\n}\n\n:host(.round) .input{\n    border-radius: 10rem;\n}\n.input {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    cursor: text;\n    min-width: 0;\n    text-align: left;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    position: relative;\n    gap: var(--icon-gap);\n    padding: var(--padding);\n    border-radius: var(--border-radius);\n    -webkit-transition: opacity 0.3s;\n    -o-transition: opacity 0.3s;\n    transition: opacity 0.3s;\n    background: var(--background);\n    width: 100%;\n    outline: none;\n}\n.input.readonly .clear{\n    opacity: 0 !important;\n    margin-right: -2rem;\n    pointer-events: none !important;\n}\n.readonly{\n    pointer-events: none;\n}\n.input:focus-within:not(.readonly){\n    box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;\n}\n.disabled{\n    pointer-events: none;\n    opacity: 0.6;\n}\n.label {\n    font-size: inherit;\n    opacity: .7;\n    font-weight: 400;\n    position: absolute;\n    top: 0;\n    -webkit-transition: -webkit-transform 0.3s;\n    transition: -webkit-transform 0.3s;\n    -o-transition: transform 0.3s;\n    transition: transform 0.3s;\n    transition: transform 0.3s, -webkit-transform 0.3s;\n    -webkit-transform-origin: left;\n    -ms-transform-origin: left;\n        transform-origin: left;\n    pointer-events: none;\n    white-space: nowrap;\n    overflow: hidden;\n    -o-text-overflow: ellipsis;\n       text-overflow: ellipsis;\n    width: 100%;\n    user-select: none;\n    will-change: transform;\n}\n.outer-container{\n    position: relative;\n    width: var(--width);\n}\n.container{\n    width: 100%;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    position: relative;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n}    \ninput{\n    font-size: inherit;\n    border: none;\n    background: transparent;\n    outline: none;\n    color: rgba(var(--text-color), 1);\n    width: 100%;\n}\n:host(:not([variant="outlined"])) .animate-label .container input {\n    -webkit-transform: translateY(0.6rem);\n            -ms-transform: translateY(0.6rem);\n        transform: translateY(0.6rem);\n    }\n  \n:host(:not([variant="outlined"])) .animate-label .label {\n    -webkit-transform: translateY(-0.7em) scale(0.8);\n            -ms-transform: translateY(-0.7em) scale(0.8);\n        transform: translateY(-0.7em) scale(0.8);\n    opacity: 1;\n    color: var(--accent-color)\n}\n:host([variant="outlined"]) .input {\n    box-shadow: 0 0 0 0.1rem var(--border-color, rgba(var(--text-color), 0.4)) inset;\n    background: rgba(var(--background-color), 1);\n}\n:host([variant="outlined"]) .label {\n    width: max-content;\n    margin-left: -0.5rem;\n    padding: 0 0.5rem;\n}\n:host([variant="outlined"]) .animate-label .label {\n    -webkit-transform: translate(0.1rem, -1.5rem) scale(0.8);\n            -ms-transform: translate(0.1rem, -1.5rem) scale(0.8);\n        transform: translate(0.1rem, -1.5rem) scale(0.8);\n    opacity: 1;\n    background: rgba(var(--background-color), 1);\n}\n.animate-label:focus-within:not(.readonly) .label{\n    color: var(--accent-color)\n}\n.feedback-text:not(:empty){\n    display: flex;\n    width: 100%;\n    text-align: left;\n    font-size: 0.9rem;\n    align-items: center;\n    padding: 0.8rem 0;\n    color: rgba(var(--text-color), 0.8);\n}\n.success{\n    color: var(--success-color);\n}\n.error{\n    color: var(--danger-color);\n}\n.status-icon{\n    margin-right: 0.2rem;\n}\n.status-icon--error{\n    fill: var(--danger-color);\n}\n.status-icon--success{\n    fill: var(--success-color);\n}\n@media (any-hover: hover){\n    .icon:hover{\n        background: rgba(var(--text-color), 0.1);\n    }\n}\n</style>\n<div class="outer-container">\n    <label part="input" class="input">\n        <slot name="icon"></slot>\n        <div class="container">\n            <input type="text"/>\n            <div part="placeholder" class="label"></div>\n        </div>\n        <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>\n    </label>\n    <p class="feedback-text"></p>\n</div>\n',customElements.define("sm-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smInput.content.cloneNode(!0)),this.inputParent=this.shadowRoot.querySelector(".input"),this.input=this.shadowRoot.querySelector("input"),this.clearBtn=this.shadowRoot.querySelector(".clear"),this.label=this.shadowRoot.querySelector(".label"),this.feedbackText=this.shadowRoot.querySelector(".feedback-text"),this.outerContainer=this.shadowRoot.querySelector(".outer-container"),this._helperText="",this._errorText="",this.isRequired=!1,this.hideRequired=!1,this.validationFunction=void 0,this.reflectedAttributes=["value","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step"],this.reset=this.reset.bind(this),this.focusIn=this.focusIn.bind(this),this.focusOut=this.focusOut.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this),this.vibrate=this.vibrate.bind(this)}static get observedAttributes(){return["value","placeholder","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","helper-text","error-text","hiderequired"]}get value(){return this.input.value}set value(t){this.input.value=t,this.checkInput(),this.fireEvent()}get placeholder(){return this.getAttribute("placeholder")}set placeholder(t){this.setAttribute("placeholder",t)}get type(){return this.getAttribute("type")}set type(t){this.setAttribute("type",t)}get validity(){return this.input.validity}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")}get readOnly(){return this.hasAttribute("readonly")}set readOnly(t){t?this.setAttribute("readonly",""):this.removeAttribute("readonly")}set customValidation(t){this.validationFunction=t}set errorText(t){this._errorText=t}set helperText(t){this._helperText=t}get isValid(){if(""!==this.input.value){const t=this.input.checkValidity();let e=!0;return this.validationFunction&&(e=Boolean(this.validationFunction(this.input.value))),t&&e?(this.feedbackText.classList.remove("error"),this.feedbackText.classList.add("success"),this.feedbackText.textContent=""):this._errorText&&(this.feedbackText.classList.add("error"),this.feedbackText.classList.remove("success"),this.feedbackText.innerHTML=`\n                            <svg class="status-icon status-icon--error" 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 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>\n                        ${this._errorText}\n                        `),t&&e}}reset(){this.value=""}focusIn(){this.input.focus()}focusOut(){this.input.blur()}fireEvent(){let t=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(t)}checkInput(t){this.hasAttribute("readonly")||(""!==this.input.value.trim()?this.clearBtn.classList.remove("hide"):(this.clearBtn.classList.add("hide"),this.isRequired&&!this.hideRequired&&(this.feedbackText.textContent="*required"))),this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder").trim()&&(""!==this.input.value?this.animate?this.inputParent.classList.add("animate-label"):this.label.classList.add("hide"):this.animate?this.inputParent.classList.remove("animate-label"):this.label.classList.remove("hide"))}vibrate(){this.outerContainer.animate([{transform:"translateX(-1rem)"},{transform:"translateX(1rem)"},{transform:"translateX(-0.5rem)"},{transform:"translateX(0.5rem)"},{transform:"translateX(0)"}],{duration:300,easing:"ease"})}connectedCallback(){this.animate=this.hasAttribute("animate"),this.setAttribute("role","textbox"),this.input.addEventListener("input",this.checkInput),this.clearBtn.addEventListener("click",this.reset)}attributeChangedCallback(t,e,n){e!==n&&(this.reflectedAttributes.includes(t)&&(this.hasAttribute(t)?this.input.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.input.removeAttribute(t)),"placeholder"===t?(this.label.textContent=n,this.setAttribute("aria-label",n)):this.hasAttribute("value")?this.checkInput():"type"===t?this.hasAttribute("type")&&"number"===this.getAttribute("type")&&this.input.setAttribute("inputmode","numeric"):"helper-text"===t?this._helperText=this.getAttribute("helper-text"):"error-text"===t?this._errorText=this.getAttribute("error-text"):"required"===t?(this.isRequired=this.hasAttribute("required"),this.isRequired&&!this.hideRequired?this.feedbackText.textContent="":this.feedbackText.textContent="*required",this.isRequired?this.setAttribute("aria-required","true"):this.setAttribute("aria-required","false")):"hiderequired"===t?this.hideRequired=this.hasAttribute("hiderequired"):"readonly"===t?this.hasAttribute("readonly")?this.inputParent.classList.add("readonly"):this.inputParent.classList.remove("readonly"):"disabled"===t&&(this.hasAttribute("disabled")?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")))}disconnectedCallback(){this.input.removeEventListener("input",this.checkInput),this.clearBtn.removeEventListener("click",this.reset)}});const smMenu=document.createElement("template");smMenu.innerHTML='\n<style>     \n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n}\n:host{\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n\n}\n.menu{\n    display: -ms-grid;\n    display: grid;\n    place-items: center;\n    height: 2rem;\n    width: 2rem;\n    outline: none;\n}\n.icon {\n    position: absolute;\n    fill: rgba(var(--text-color), 0.7);\n    height: 2.4rem;\n    width: 2.4rem;\n    padding: 0.5rem;\n    border-radius: 2rem;\n    -webkit-transition: background 0.3s;\n    -o-transition: background 0.3s;\n    transition: background 0.3s;\n}      \n.select{\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    cursor: pointer;\n    width: 100%;\n    -webkit-tap-highlight-color: transparent;\n}\n.menu:focus .icon,\n.focused{\n    background: rgba(var(--text-color), 0.1); \n}\n:host([align-options="left"]) .options{\n    left: 0;\n}\n:host([align-options="right"]) .options{\n    right: 0;\n}\n.options{\n    top: 100%;\n    padding: 0.3rem;\n    overflow: hidden auto;\n    position: absolute;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    min-width: -webkit-max-content;\n    min-width: -moz-max-content;\n    min-width: max-content;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    background: var(--background, rgba(var(--background-color), 1));\n    border-radius: var(--border-radius, 0.5rem);\n    z-index: 1;\n    -webkit-box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0,0,0,0.3);\n            box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0,0,0,0.3);\n    bottom: auto;\n}\n.hide{\n    display: none;\n}\n@media screen and (max-width: 640px){\n    .options{\n        position: fixed;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        top: auto;\n        border-radius: 0.5rem 0.5rem 0 0;\n    }\n}\n@media (hover: hover){\n    .menu:hover .icon{\n        background: rgba(var(--text-color), 0.1); \n    }\n}\n</style>\n<div class="select">\n    <div class="menu" tabindex="0">\n        <svg class="icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>\n    </div>\n    <div class="options hide">\n        <slot></slot> \n    </div>\n</div>',customElements.define("sm-menu",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smMenu.content.cloneNode(!0)),this.isOpen=!1,this.availableOptions,this.containerDimensions,this.animOptions={duration:200,easing:"ease"},this.optionList=this.shadowRoot.querySelector(".options"),this.menu=this.shadowRoot.querySelector(".menu"),this.icon=this.shadowRoot.querySelector(".icon"),this.expand=this.expand.bind(this),this.collapse=this.collapse.bind(this),this.toggle=this.toggle.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleClickOutside=this.handleClickOutside.bind(this)}static get observedAttributes(){return["value"]}get value(){return this.getAttribute("value")}set value(t){this.setAttribute("value",t)}expand(){this.isOpen||(this.optionList.classList.remove("hide"),this.optionList.animate([{transform:window.innerWidth<640?"translateY(1.5rem)":"translateY(-1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animOptions).onfinish=(()=>{this.isOpen=!0,this.icon.classList.add("focused")}))}collapse(){this.isOpen&&(this.optionList.animate([{transform:"none",opacity:"1"},{transform:window.innerWidth<640?"translateY(1.5rem)":"translateY(-1rem)",opacity:"0"}],this.animOptions).onfinish=(()=>{this.isOpen=!1,this.icon.classList.remove("focused"),this.optionList.classList.add("hide")}))}toggle(){this.isOpen?this.collapse():this.expand()}handleKeyDown(t){t.target===this?"ArrowDown"===t.code?(t.preventDefault(),this.availableOptions[0].focus()):"Enter"!==t.code&&"Space"!==t.code||(t.preventDefault(),this.toggle()):"ArrowUp"===t.code?(t.preventDefault(),document.activeElement.previousElementSibling?document.activeElement.previousElementSibling.focus():this.availableOptions[this.availableOptions.length-1].focus()):"ArrowDown"===t.code?(t.preventDefault(),document.activeElement.nextElementSibling?document.activeElement.nextElementSibling.focus():this.availableOptions[0].focus()):"Enter"!==t.code&&"Space"!==t.code||(t.preventDefault(),t.target.click())}handleClickOutside(t){this.contains(t.target)||2===t.button||this.collapse()}connectedCallback(){this.setAttribute("role","listbox"),this.setAttribute("aria-label","dropdown menu");const t=this.shadowRoot.querySelector(".options slot");t.addEventListener("slotchange",t=>{this.availableOptions=t.target.assignedElements(),this.containerDimensions=this.optionList.getBoundingClientRect()}),this.addEventListener("click",this.toggle),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("mousedown",this.handleClickOutside)}disconnectedCallback(){this.removeEventListener("click",this.toggle),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("mousedown",this.handleClickOutside)}});const menuOption=document.createElement("template");menuOption.innerHTML='\n<style>     \n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n}     \n:host{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.option{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    min-width: 100%;\n    padding: var(--padding, 0.6rem 1rem);\n    cursor: pointer;\n    overflow-wrap: break-word;\n    white-space: nowrap;\n    outline: none;\n    user-select: none;\n    border-radius: 0.3rem;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n:host(:focus){\n    outline: none;\n    background: rgba(var(--text-color), 0.1);\n}\n@media (any-hover: hover){\n    .option{\n        transition: background-color 0.2s;\n    }\n    .option:hover{\n        background: rgba(var(--text-color), 0.1);\n    }\n}\n</style>\n<div class="option">\n    <slot></slot> \n</div>',customElements.define("menu-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(menuOption.content.cloneNode(!0))}connectedCallback(){this.setAttribute("role","option"),this.setAttribute("tabindex","0"),this.addEventListener("keyup",t=>{"Enter"!==t.code&&"Space"!==t.code||(t.preventDefault(),this.click())})}});const smNotifications=document.createElement("template");smNotifications.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    } \n    :host{\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        --accent-color: #4d2588;\n        --text-color: 17, 17, 17;\n        --background-color: 255, 255, 255;\n        --danger-color: red;\n        --icon-height: 1.5rem;\n        --icon-width: 1.5rem;\n    }\n    .hide{\n        opacity: 0 !important;\n        pointer-events: none !important;\n    }\n    .notification-panel{\n        display: grid;\n        width: 100%;\n        gap: 0.5rem;\n        position: fixed;\n        left: 0;\n        bottom: 0;\n        z-index: 100;\n        max-height: 100%;\n        padding: 1rem;\n        overflow: hidden auto;\n        -ms-scroll-chaining: none;\n            overscroll-behavior: contain;\n    }\n    .notification-panel:empty{\n        display:none;\n    }\n    .notification{\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        position: relative;\n        border-radius: 0.3rem;\n        background: rgba(var(--background-color), 1);\n        overflow: hidden;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        -ms-word-break: break-all;\n        word-break: break-all;\n        word-break: break-word;\n        -ms-hyphens: auto;\n        -webkit-hyphens: auto;\n        hyphens: auto;\n        max-width: 100%;\n        padding: 1rem;\n        align-items: center;\n    }\n    .icon-container:not(:empty){\n        margin-right: 0.5rem;\n        height: var(--icon-height);\n        width: var(--icon-width);\n    }\n    h4:first-letter,\n    p:first-letter{\n        text-transform: uppercase;\n    }\n    h4{\n        font-weight: 400;\n    }\n    p{\n        line-height: 1.6;\n        -webkit-box-flex: 1;\n            -ms-flex: 1;\n                flex: 1;\n        color: rgba(var(--text-color), 0.9);\n        overflow-wrap: break-word;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        -ms-word-break: break-all;\n        word-break: break-all;\n        word-break: break-word;\n        -ms-hyphens: auto;\n        -webkit-hyphens: auto;\n        hyphens: auto;\n        max-width: 100%;\n    }\n    .notification:last-of-type{\n        margin-bottom: 0;\n    }\n    .icon {\n        height: 100%;\n        width: 100%;\n        fill: rgba(var(--text-color), 0.7);\n    }\n    .icon--success {\n        fill: var(--green);\n      }\n      .icon--failure,\n      .icon--error {\n        fill: var(--danger-color);\n      }\n    .close{\n        height: 2rem;\n        width: 2rem;\n        border: none;\n        cursor: pointer;\n        margin-left: 1rem;\n        border-radius: 50%;\n        padding: 0.3rem;\n        transition: background-color 0.3s, transform 0.3s;\n        background-color: transparent;\n    }\n    .close:active{\n        transform: scale(0.9);\n    }\n    @media screen and (min-width: 640px){\n        .notification-panel{\n            max-width: 28rem;\n            width: max-content;\n        }\n        .notification{\n            width: auto;\n            border: solid 1px rgba(var(--text-color), 0.2);\n        }\n    }\n    @media (any-hover: hover){\n        ::-webkit-scrollbar{\n            width: 0.5rem;\n        }\n        \n        ::-webkit-scrollbar-thumb{\n            background: rgba(var(--text-color), 0.3);\n            border-radius: 1rem;\n            &:hover{\n                background: rgba(var(--text-color), 0.5);\n            }\n        }\n        .close:hover{\n            background-color: rgba(var(--text-color), 0.1);\n        }\n    }\n</style>\n<div class="notification-panel"></div>\n',customElements.define("sm-notifications",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smNotifications.content.cloneNode(!0)),this.notificationPanel=this.shadowRoot.querySelector(".notification-panel"),this.animationOptions={duration:300,fill:"forwards",easing:"cubic-bezier(0.175, 0.885, 0.32, 1.275)"},this.push=this.push.bind(this),this.createNotification=this.createNotification.bind(this),this.removeNotification=this.removeNotification.bind(this),this.clearAll=this.clearAll.bind(this)}randString(t){let e="";const n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for(let i=0;i<t;i++)e+=n.charAt(Math.floor(Math.random()*n.length));return e}createNotification(t,e={}){const{pinned:n=!1,icon:i=""}=e,s=document.createElement("div");s.id=this.randString(8),s.classList.add("notification");let o="";return o+=`\n            <div class="icon-container">${i}</div>\n            <p>${t}</p>\n            `,n&&(s.classList.add("pinned"),o+='\n                <button class="close">\n                    <svg class="icon" 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 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>\n                </button>\n            '),s.innerHTML=o,s}push(t,e={}){const n=this.createNotification(t,e);return this.notificationPanel.append(n),n.animate([{transform:"translateY(1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animationOptions),n.id}removeNotification(t){t.animate([{transform:"none",opacity:"1"},{transform:"translateY(0.5rem)",opacity:"0"}],this.animationOptions).onfinish=(()=>{t.remove()})}clearAll(){Array.from(this.notificationPanel.children).forEach(t=>{this.removeNotification(t)})}connectedCallback(){this.notificationPanel.addEventListener("click",t=>{t.target.closest(".close")&&this.removeNotification(t.target.closest(".notification"))});const t=new MutationObserver(t=>{t.forEach(t=>{"childList"===t.type&&t.addedNodes.length&&!t.addedNodes[0].classList.contains("pinned")&&setTimeout(()=>{this.removeNotification(t.addedNodes[0])},5e3)})});t.observe(this.notificationPanel,{childList:!0})}});class Stack{constructor(){this.items=[]}push(t){this.items.push(t)}pop(){return 0==this.items.length?"Underflow":this.items.pop()}peek(){return this.items[this.items.length-1]}}const popupStack=new Stack,smPopup=document.createElement("template");smPopup.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \n:host{\n    position: fixed;\n    display: -ms-grid;\n    display: grid;\n    z-index: 10;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --width: 100%;\n    --height: auto;\n    --min-width: auto;\n    --min-height: auto;\n    --backdrop-background: rgba(0, 0, 0, 0.6);\n    --border-radius: 0.8rem 0.8rem 0 0;\n}\n.popup-container{\n    display: -ms-grid;\n    display: grid;\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    place-items: center;\n    z-index: 10;\n    touch-action: none;\n}\n:host(.stacked) .popup{\n    -webkit-transform: scale(0.9) translateY(-2rem) !important;\n            transform: scale(0.9) translateY(-2rem) !important;\n}\n.background{\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    pointer-events: none;\n    background: var(--backdrop-background);\n    -webkit-transition: opacity 0.3s;\n    -o-transition: opacity 0.3s;\n    transition: opacity 0.3s;\n}\n.popup{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n            flex-direction: column;\n    position: relative;\n    -ms-flex-item-align: end;\n        align-self: flex-end;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n    width: var(--width);\n    min-width: var(--min-width);\n    height: var(--height);\n    min-height: var(--min-height);\n    max-height: 90vh;\n    border-radius: var(--border-radius);\n    background: rgba(var(--background-color), 1);\n    -webkit-box-shadow: 0 -1rem 2rem #00000020;\n            box-shadow: 0 -1rem 2rem #00000020;\n}\n.container-header{\n    display: -webkit-box;\n    display: flex;\n    width: 100%;\n    touch-action: none;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.popup-top{\n    display: -webkit-box;\n    display: flex;\n    width: 100%;\n}\n.popup-body{\n    display: -webkit-box;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n    width: 100%;\n    padding: var(--body-padding, 1.5rem);\n    overflow-y: auto;\n}\n.hide{\n    display:none;\n}\n@media screen and (min-width: 640px){\n    :host{\n        --border-radius: 0.5rem;\n    }\n    .popup{\n        -ms-flex-item-align: center;\n            -ms-grid-row-align: center;\n            align-self: center;\n        border-radius: var(--border-radius);\n        height: var(--height);\n        -webkit-box-shadow: 0 3rem 2rem -0.5rem #00000040;\n                box-shadow: 0 3rem 2rem -0.5rem #00000040;\n    }\n}\n@media screen and (max-width: 640px){\n    .popup-top{\n        -webkit-box-orient: vertical;\n        -webkit-box-direction: normal;\n                flex-direction: column;\n        -webkit-box-align: center;\n                align-items: center;\n    }\n    .handle{\n        height: 0.3rem;\n        width: 2rem;\n        background: rgba(var(--text-color), .4);\n        border-radius: 1rem;\n        margin: 0.5rem 0;\n    }\n}\n@media (any-hover: hover){\n    ::-webkit-scrollbar{\n        width: 0.5rem;\n    }\n    \n    ::-webkit-scrollbar-thumb{\n        background: rgba(var(--text-color), 0.3);\n        border-radius: 1rem;\n        &:hover{\n            background: rgba(var(--text-color), 0.5);\n        }\n    }\n}\n</style>\n<div class="popup-container hide" role="dialog">\n    <div part="background" class="background"></div>\n    <div part="popup" class="popup">\n        <div part="popup-header" class="popup-top">\n            <div class="handle"></div>\n            <slot name="header"></slot>\n        </div>\n        <div part="popup-body" class="popup-body">\n            <slot></slot>\n        </div>\n    </div>\n</div>\n',customElements.define("sm-popup",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smPopup.content.cloneNode(!0)),this.allowClosing=!1,this.isOpen=!1,this.pinned=!1,this.offset=0,this.touchStartY=0,this.touchEndY=0,this.touchStartTime=0,this.touchEndTime=0,this.touchEndAnimation=void 0,this.focusable,this.autoFocus,this.mutationObserver,this.popupContainer=this.shadowRoot.querySelector(".popup-container"),this.backdrop=this.shadowRoot.querySelector(".background"),this.popup=this.shadowRoot.querySelector(".popup"),this.popupBodySlot=this.shadowRoot.querySelector(".popup-body slot"),this.popupHeader=this.shadowRoot.querySelector(".popup-top"),this.resumeScrolling=this.resumeScrolling.bind(this),this.setStateOpen=this.setStateOpen.bind(this),this.show=this.show.bind(this),this.hide=this.hide.bind(this),this.handleTouchStart=this.handleTouchStart.bind(this),this.handleTouchMove=this.handleTouchMove.bind(this),this.handleTouchEnd=this.handleTouchEnd.bind(this),this.detectFocus=this.detectFocus.bind(this)}static get observedAttributes(){return["open"]}get open(){return this.isOpen}animateTo(t,e,n){const i=t.animate(e,{...n,fill:"both"});return i.finished.then(()=>{i.commitStyles(),i.cancel()}),i}resumeScrolling(){const t=document.body.style.top;window.scrollTo(0,-1*parseInt(t||"0")),document.body.style.overflow="auto",document.body.style.top="initial"}setStateOpen(){if(!this.isOpen||this.offset){const t={duration:300,easing:"ease"},e=window.innerWidth>640?"scale(1.1)":`translateY(${this.offset?`${this.offset}px`:"100%"})`;this.animateTo(this.popup,[{opacity:this.offset?1:0,transform:e},{opacity:1,transform:"none"}],t)}}show(t={}){const{pinned:e=!1}=t;if(!this.isOpen){const t={duration:300,easing:"ease"};popupStack&&(popupStack.push({popup:this,permission:e}),popupStack.items.length>1&&this.animateTo(popupStack.items[popupStack.items.length-2].popup.shadowRoot.querySelector(".popup"),[{transform:"none"},{transform:"translateY(-1.5rem) scale(0.9)"}],t)),this.popupContainer.classList.remove("hide"),this.offset||this.backdrop.animate([{opacity:0},{opacity:1}],t),this.setStateOpen(),this.dispatchEvent(new CustomEvent("popupopened",{bubbles:!0,detail:{popup:this}})),this.pinned=e,this.isOpen=!0,document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`;const n=this.autoFocus||this.focusable[0];n.tagName.includes("SM-")?n.focusIn():n.focus(),this.hasAttribute("open")||this.setAttribute("open","")}}hide(){const t={duration:150,easing:"ease"};this.backdrop.animate([{opacity:1},{opacity:0}],t),this.animateTo(this.popup,[{opacity:1,transform:window.innerWidth>640?"none":`translateY(${this.offset?`${this.offset}px`:"0"})`},{opacity:0,transform:window.innerWidth>640?"scale(1.1)":"translateY(100%)"}],t).finished.finally(()=>{this.popupContainer.classList.add("hide"),this.popup.style="",this.removeAttribute("open"),void 0!==popupStack?(popupStack.pop(),popupStack.items.length?this.animateTo(popupStack.items[popupStack.items.length-1].popup.shadowRoot.querySelector(".popup"),[{
+transform:"translateY(-1.5rem) scale(0.9)"},{transform:"none"}],t):this.resumeScrolling()):this.resumeScrolling(),this.forms.length&&this.forms.forEach(t=>t.reset()),this.dispatchEvent(new CustomEvent("popupclosed",{bubbles:!0,detail:{popup:this}})),this.isOpen=!1})}handleTouchStart(t){this.offset=0,this.popupHeader.addEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.popupHeader.addEventListener("touchend",this.handleTouchEnd,{passive:!0}),this.touchStartY=t.changedTouches[0].clientY,this.touchStartTime=t.timeStamp}handleTouchMove(t){this.touchStartY<t.changedTouches[0].clientY&&(this.offset=t.changedTouches[0].clientY-this.touchStartY,this.touchEndAnimation=window.requestAnimationFrame(()=>{this.popup.style.transform=`translateY(${this.offset}px)`}))}handleTouchEnd(t){if(this.touchEndTime=t.timeStamp,cancelAnimationFrame(this.touchEndAnimation),this.touchEndY=t.changedTouches[0].clientY,this.threshold=.3*this.popup.getBoundingClientRect().height,this.touchEndTime-this.touchStartTime>200)if(this.touchEndY-this.touchStartY>this.threshold){if(this.pinned)return void this.setStateOpen();this.hide()}else this.setStateOpen();else if(this.touchEndY>this.touchStartY){if(this.pinned)return void this.setStateOpen();this.hide()}this.popupHeader.removeEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.popupHeader.removeEventListener("touchend",this.handleTouchEnd,{passive:!0})}detectFocus(t){if("Tab"===t.code){const e=this.focusable[this.focusable.length-1],n=this.focusable[0];t.shiftKey&&document.activeElement===n?(t.preventDefault(),e.tagName.includes("SM-")?e.focusIn():e.focus()):t.shiftKey||document.activeElement!==e||(t.preventDefault(),n.tagName.includes("SM-")?n.focusIn():n.focus())}}updateFocusableList(){this.focusable=this.querySelectorAll('sm-button:not([disabled]), button:not([disabled]), [href], sm-input, input, sm-select, select, sm-checkbox, sm-textarea, textarea, [tabindex]:not([tabindex="-1"])'),this.autoFocus=this.querySelector("[autofocus]")}connectedCallback(){this.popupBodySlot.addEventListener("slotchange",()=>{this.forms=this.querySelectorAll("sm-form"),this.updateFocusableList()}),this.popupContainer.addEventListener("mousedown",t=>{t.target!==this.popupContainer||this.pinned||(this.pinned?this.setStateOpen():this.hide())});const t=new ResizeObserver(t=>{for(let e of t)if(e.contentBoxSize){const t=Array.isArray(e.contentBoxSize)?e.contentBoxSize[0]:e.contentBoxSize;this.threshold=.3*t.blockSize.height}else this.threshold=.3*e.contentRect.height});t.observe(this),this.mutationObserver=new MutationObserver(t=>{this.updateFocusableList()}),this.mutationObserver.observe(this,{attributes:!0,childList:!0,subtree:!0}),this.addEventListener("keydown",this.detectFocus),this.popupHeader.addEventListener("touchstart",this.handleTouchStart,{passive:!0})}disconnectedCallback(){this.removeEventListener("keydown",this.detectFocus),resizeObserver.unobserve(),this.mutationObserver.disconnect(),this.popupHeader.removeEventListener("touchstart",this.handleTouchStart,{passive:!0})}attributeChangedCallback(t){"open"===t&&this.hasAttribute("open")&&this.show()}});const smRadio=document.createElement("template");smRadio.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    }  \n    :host{\n        --accent-color: #4d2588;\n        --text-color: 17, 17, 17;\n        --background-color: 255, 255, 255;\n        --gap: 0.5rem;\n        --height: 1.4rem;\n    }\n    :host([disabled]) {\n        opacity: 0.6;\n        user-select: none;\n        pointer-events: none;\n    }\n    .hide{\n        display: none !important;\n    }\n    .radio{\n        display: flex;\n        cursor: pointer;\n    }\n    .radio__button{\n        position: relative;\n        height: var(--height);\n        width: var(--height);\n        overflow: visible;\n        padding: 0.1rem;\n    }\n    .outer-disc{\n        fill: none;\n        stroke-width: 3;\n        stroke: rgba(var(--text-color), 0.7);\n    }\n    .inner-disc{\n        fill: var(--accent-color);\n        transition: transform 0.3s;\n        transform: scale(0);\n        transform-origin: center;\n    }\n    :host([checked]) .outer-disc{\n        stroke: var(--accent-color);\n    }\n    :host([checked]) .inner-disc{\n        transform: scale(1);\n    }\n\n    @media (any-hover: hover){\n    }\n</style>\n<div class="radio">\n    <slot name="left"></slot>\n    <svg class="radio__button" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle class="outer-disc" cx="12" cy="12" r="11"/><circle class="inner-disc" cx="12" cy="12" r="6"/></svg>\n    <slot></slot>\n</div>\n',window.customElements.define("sm-radio",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smRadio.content.cloneNode(!0)),this.radio=this.shadowRoot.querySelector(".radio"),this.reset=this.reset.bind(this),this.dispatchChangeEvent=this.dispatchChangeEvent.bind(this),this.dispatchGroupEvent=this.dispatchGroupEvent.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleClick=this.handleClick.bind(this),this.handleRadioGroup=this.handleRadioGroup.bind(this),this.uniqueId,this.options}static get observedAttributes(){return["value","disabled","checked"]}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.hasAttribute("checked")}set checked(t){t?this.setAttribute("checked",""):this.removeAttribute("checked")}set value(t){this.setAttribute("value",t)}get value(){return this.getAttribute("value")}reset(){this.removeAttribute("checked")}dispatchChangeEvent(){this.dispatchEvent(new CustomEvent("change",this.options))}dispatchGroupEvent(){this.hasAttribute("name")&&""!==this.getAttribute("name").trim()&&this.dispatchEvent(new CustomEvent(`changed${this.getAttribute("name")}`,this.options))}handleKeyDown(t){"Space"===t.code&&(t.preventDefault(),this.handleClick())}handleClick(){this.hasAttribute("checked")||(this.setAttribute("checked",""),this.dispatchGroupEvent())}handleRadioGroup(t){t.detail.uid!==this.uniqueId&&this.reset()}randString(t){let e="";const n="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";for(let i=0;i<t;i++)e+=n.charAt(Math.floor(Math.random()*n.length));return e}connectedCallback(){this.uniqueId=this.randString(8),this.options={bubbles:!0,composed:!0,detail:{uid:this.uniqueId,value:this.value}},this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","radio"),this.hasAttribute("checked")||this.setAttribute("aria-checked","false"),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("click",this.handleClick),this.hasAttribute("name")&&""!==this.getAttribute("name").trim()&&document.addEventListener(`changed${this.getAttribute("name")}`,this.handleRadioGroup)}attributeChangedCallback(t,e,n){e!==n&&("checked"===t?this.dispatchChangeEvent():"disabled"===t&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0")))}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("change",this.handleClick)}});const smSwitch=document.createElement("template");smSwitch.innerHTML='\t\n<style>\n    *{\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n        padding: 0;\n        margin: 0;\n    }\n    \n    :host{\n        display: -webkit-inline-box;\n        display: -ms-inline-flexbox;\n        display: inline-flex;\n        --accent-color: #4d2588;\n        --text-color: 17, 17, 17;\n        --background-color: 255, 255, 255;\n    }\n    label{\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        -webkit-box-align: center;\n            -ms-flex-align: center;\n                align-items: center;\n        width: 100%;\n        outline: none;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n    }\n    :host([disabled]) {\n        cursor: not-allowed;\n        opacity: 0.6;\n        pointer-events: none;\n    }\n    .switch {\n        position: relative;\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        -webkit-box-align: center;\n            -ms-flex-align: center;\n                align-items: center;\n        width: 2.4rem;\n        flex-shrink: 0;\n        margin-left: auto;\n        padding: 0.2rem;\n        cursor: pointer;\n        border-radius: 2rem;\n    }\n    \n    input {\n        display: none;\n    }\n    \n    .track {\n        position: absolute;\n        left: 0;\n        right: 0;\n        height: 1.4rem;\n        -webkit-transition: background 0.3s;\n        -o-transition: background 0.3s;\n        transition: background 0.3s;\n        background: rgba(var(--text-color), 0.4);\n        -webkit-box-shadow: 0 0.1rem 0.3rem #00000040 inset;\n                box-shadow: 0 0.1rem 0.3rem #00000040 inset;\n        border-radius: 1rem;\n    }\n    \n    label:active .thumb::after,\n    label:focus-within .thumb::after{\n        opacity: 1;\n    }\n    \n    .thumb::after{\n        content: \'\';\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        position: absolute;\n        height: 2.6rem;\n        width: 2.6rem;\n        background: rgba(var(--text-color), 0.2);\n        border-radius: 2rem;\n        opacity: 0;\n        -webkit-transition: opacity 0.3s;\n        -o-transition: opacity 0.3s;\n        transition: opacity 0.3s;\n    }\n    \n    .thumb {\n        position: relative;\n        display: -webkit-inline-box;\n        display: -ms-inline-flexbox;\n        display: inline-flex;\n        height: 1rem;\n        width: 1rem;\n        -webkit-box-pack: center;\n            -ms-flex-pack: center;\n                justify-content: center;\n        -webkit-box-align: center;\n            -ms-flex-align: center;\n                align-items: center;\n        border-radius: 1rem;\n        -webkit-box-shadow: 0 0.1rem 0.4rem #00000060;\n                box-shadow: 0 0.1rem 0.4rem #00000060;\n        -webkit-transition: -webkit-transform 0.3s;\n        transition: -webkit-transform 0.3s;\n        -o-transition: transform 0.3s;\n        transition: transform 0.3s;\n        transition: transform 0.3s, -webkit-transform 0.3s;\n        border: solid 0.3rem white;\n    }\n    \n    input:checked ~ .thumb {\n        -webkit-transform: translateX(100%);\n            -ms-transform: translateX(100%);\n                transform: translateX(100%);\n    }\n    \n    input:checked ~ .track {\n        background: var(--accent-color);\n    }\n</style>\n<label tabindex="0">\n    <slot name="left"></slot>\n    <div part="switch" class="switch">\n        <input type="checkbox">\n        <div class="track"></div>\n        <div class="thumb"></div>\n    </div>\n    <slot name="right"></slot>\n</label>',customElements.define("sm-switch",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smSwitch.content.cloneNode(!0)),this.switch=this.shadowRoot.querySelector(".switch"),this.input=this.shadowRoot.querySelector("input"),this.isChecked=!1,this.isDisabled=!1,this.dispatch=this.dispatch.bind(this)}static get observedAttributes(){return["disabled","checked"]}get disabled(){return this.isDisabled}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.isChecked}set checked(t){t?this.setAttribute("checked",""):this.removeAttribute("checked")}reset(){}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.isChecked}}))}connectedCallback(){this.addEventListener("keydown",t=>{"Space"!==t.code||this.isDisabled||(t.preventDefault(),this.input.click())}),this.input.addEventListener("click",t=>{this.input.checked?this.checked=!0:this.checked=!1,this.dispatch()})}attributeChangedCallback(t,e,n){e!==n&&("disabled"===t?this.hasAttribute("disabled")?this.disabled=!0:this.disabled=!1:"checked"===t&&(this.hasAttribute("checked")?(this.isChecked=!0,this.input.checked=!0):(this.isChecked=!1,this.input.checked=!1)))}});const smSelect=document.createElement("template");smSelect.innerHTML='\n<style>     \n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \n:host{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --max-height: auto;\n    --min-width: 100%;\n}\n:host([disabled]) .select{\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n.select{\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n    -ms-flex-direction: column;\n    flex-direction: column;\n    cursor: pointer;\n    width: 100%;\n    -webkit-tap-highlight-color: transparent;\n}\n.icon {\n    height: 1.2rem;\n    width: 1.2rem;\n    margin-left: 0.5rem;\n    fill: rgba(var(--text-color), 0.7);\n}      \n.selected-option-text{\n    font-size: inherit;\n    overflow: hidden;\n    -o-text-overflow: ellipsis;\n       text-overflow: ellipsis;\n    white-space: nowrap;\n    font-weight: 500;\n}\n.selection{\n    border-radius: 0.3rem;\n    display: -ms-grid;\n    display: grid;\n    -ms-grid-columns: 1fr auto;\n    grid-template-columns: 1fr auto;\n        grid-template-areas: \'heading heading\' \'. .\';\n    padding: 0.4rem 0.8rem;\n    background: rgba(var(--text-color), 0.06);\n    border: solid 1px rgba(var(--text-color), 0.2);\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    outline: none;\n    z-index: 2;\n}\n.selection:focus{\n    -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);\n            box-shadow: 0 0 0 0.1rem var(--accent-color) \n}\n:host([align-select="left"]) .options{\n    left: 0;\n}\n:host([align-select="right"]) .options{\n    right: 0;\n}\n.options{\n    top: 100%;\n    padding: var(--options-padding, 0.3rem);\n    margin-top: 0.2rem; \n    overflow: hidden auto;\n    position: absolute;\n    grid-area: options;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    min-width: var(--min-width);\n    max-height: var(--max-height);\n    background: rgba(var(--background-color), 1);\n    border: solid 1px rgba(var(--text-color), 0.2);\n    border-radius: var(--border-radius, 0.5rem);\n    z-index: 1;\n    -webkit-box-shadow: 0.4rem 0.8rem 1.2rem #00000030;\n            box-shadow: 0.4rem 0.8rem 1.2rem #00000030;\n}\n.rotate{\n    -webkit-transform: rotate(180deg);\n        -ms-transform: rotate(180deg);\n            transform: rotate(180deg)\n}\n.hide{\n    display: none;\n}\n@media (any-hover: hover){\n    ::-webkit-scrollbar{\n        width: 0.5rem;\n        height: 0.5rem;\n    }\n    \n    ::-webkit-scrollbar-thumb{\n        background: rgba(var(--text-color), 0.3);\n        border-radius: 1rem;\n        &:hover{\n            background: rgba(var(--text-color), 0.5);\n        }\n    }\n}\n</style>\n<div class="select">\n    <div class="selection">\n        <div class="selected-option-text"></div>\n        <svg class="icon toggle" 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 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"/></svg>\n    </div>\n    <div part="options" class="options hide">\n        <slot></slot> \n    </div>\n</div>',customElements.define("sm-select",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smSelect.content.cloneNode(!0)),this.focusIn=this.focusIn.bind(this),this.reset=this.reset.bind(this),this.open=this.open.bind(this),this.collapse=this.collapse.bind(this),this.toggle=this.toggle.bind(this),this.handleOptionsNavigation=this.handleOptionsNavigation.bind(this),this.handleOptionSelection=this.handleOptionSelection.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.handleClickOutside=this.handleClickOutside.bind(this),this.availableOptions,this.previousOption,this.isOpen=!1,this.label="",this.slideDown=[{transform:"translateY(-0.5rem)",opacity:0},{transform:"translateY(0)",opacity:1}],this.slideUp=[{transform:"translateY(0)",opacity:1},{transform:"translateY(-0.5rem)",opacity:0}],this.animationOptions={duration:300,fill:"forwards",easing:"ease"},this.optionList=this.shadowRoot.querySelector(".options"),this.chevron=this.shadowRoot.querySelector(".toggle"),this.selection=this.shadowRoot.querySelector(".selection"),this.selectedOptionText=this.shadowRoot.querySelector(".selected-option-text")}static get observedAttributes(){return["disabled","label"]}get value(){return this.getAttribute("value")}set value(t){this.setAttribute("value",t)}reset(t=!0){if(this.availableOptions[0]&&this.previousOption!==this.availableOptions[0]){const e=this.availableOptions[0];this.previousOption&&this.previousOption.classList.remove("check-selected"),e.classList.add("check-selected"),this.value=e.getAttribute("value"),this.selectedOptionText.textContent=`${this.label}${e.textContent}`,this.previousOption=e,t&&this.fireEvent()}}focusIn(){this.selection.focus()}open(){this.optionList.classList.remove("hide"),this.optionList.animate(this.slideDown,this.animationOptions),this.chevron.classList.add("rotate"),this.isOpen=!0}collapse(){this.chevron.classList.remove("rotate"),this.optionList.animate(this.slideUp,this.animationOptions).onfinish=(()=>{this.optionList.classList.add("hide"),this.isOpen=!1})}toggle(){this.isOpen||this.hasAttribute("disabled")?this.collapse():this.open()}fireEvent(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this.value}}))}handleOptionsNavigation(t){"ArrowUp"===t.code?(t.preventDefault(),document.activeElement.previousElementSibling?document.activeElement.previousElementSibling.focus():this.availableOptions[this.availableOptions.length-1].focus()):"ArrowDown"===t.code&&(t.preventDefault(),document.activeElement.nextElementSibling?document.activeElement.nextElementSibling.focus():this.availableOptions[0].focus())}handleOptionSelection(t){this.previousOption!==document.activeElement&&(this.value=document.activeElement.getAttribute("value"),this.selectedOptionText.textContent=`${this.label}${document.activeElement.textContent}`,this.fireEvent(),this.previousOption&&this.previousOption.classList.remove("check-selected"),document.activeElement.classList.add("check-selected"),this.previousOption=document.activeElement)}handleClick(t){t.target===this?this.toggle():(this.handleOptionSelection(),this.collapse())}handleKeydown(t){t.target===this?this.isOpen&&"ArrowDown"===t.code?(t.preventDefault(),this.availableOptions[0].focus(),this.handleOptionSelection(t)):"Enter"!==t.code&&"Space"!==t.code||(t.preventDefault(),this.toggle()):(this.handleOptionsNavigation(t),this.handleOptionSelection(t),"Enter"!==t.code&&"Space"!==t.code||(t.preventDefault(),this.collapse()))}handleClickOutside(t){this.isOpen&&!this.contains(t.target)&&this.collapse()}connectedCallback(){this.setAttribute("role","listbox"),this.hasAttribute("disabled")||this.selection.setAttribute("tabindex","0");let t=this.shadowRoot.querySelector("slot");t.addEventListener("slotchange",e=>{this.availableOptions=t.assignedElements(),this.reset(!1)}),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeydown),document.addEventListener("mousedown",this.handleClickOutside)}disconnectedCallback(){this.removeEventListener("click",this.toggle),this.removeEventListener("keydown",this.handleKeydown),document.removeEventListener("mousedown",this.handleClickOutside)}attributeChangedCallback(t){"disabled"===t?this.hasAttribute("disabled")?this.selection.removeAttribute("tabindex"):this.selection.setAttribute("tabindex","0"):"label"===t&&(this.label=this.hasAttribute("label")?`${this.getAttribute("label")} `:"")}});const smOption=document.createElement("template");smOption.innerHTML='\n<style>     \n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n}     \n:host{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.option{\n    display: grid;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    min-width: max-content;\n    width: 100%;\n    gap: 0.5rem;\n    grid-template-columns: max-content minmax(0, 1fr);\n    padding: var(--padding, 0.6rem 1rem);\n    cursor: pointer;\n    white-space: nowrap;\n    outline: none;\n    user-select: none;\n    border-radius: var(--border-radius, 0.3rem);\n}\n:host(:focus){\n    outline: none;\n    background: rgba(var(--text-color), 0.1);\n}\n.icon {\n    opacity: 0;\n    height: 1.2rem;\n    width: 1.2rem;\n    fill: rgba(var(--text-color), 0.8);\n}\n:host(:focus) .option .icon{\n    opacity: 0.4\n}\n:host(.check-selected) .icon{\n    opacity: 1\n}\n@media (hover: hover){\n    .option:hover{\n        background: rgba(var(--text-color), 0.1);\n    }\n    :host(:not(.check-selected):hover) .icon{\n        opacity: 0.4\n    }\n}\n</style>\n<div class="option">\n    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><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>\n    <slot></slot> \n</div>',customElements.define("sm-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smOption.content.cloneNode(!0))}connectedCallback(){this.setAttribute("role","option"),this.setAttribute("tabindex","0")}});const spinner=document.createElement("template");spinner.innerHTML='\n<style>     \n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n}\n:host{\n    --accent-color: #4d2588;\n    --height: 1.6rem;\n    --width: 1.6rem;\n}\n.loader {\n    height: var(--height);\n    width: var(--weight);\n    stroke-width: 8;\n    overflow: visible;\n    stroke: var(--accent-color);\n    fill: none;\n    stroke-dashoffset: 180;\n    stroke-dasharray: 180;\n    animation: load 2s infinite, spin 1s linear infinite;\n}\n@keyframes load {\n    50% {\n        stroke-dashoffset: 0;\n    }\n    100%{\n        stroke-dashoffset: -180;\n    }\n}\n\n@keyframes spin {\n    100% {\n        transform: rotate(360deg);\n    }\n}\n</style>\n<svg viewBox="0 0 64 64" class="loader"><circle cx="32" cy="32" r="32" /></svg>\n\n';class SpinnerLoader extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(spinner.content.cloneNode(!0))}}window.customElements.define("sm-spinner",SpinnerLoader);const stripSelect=document.createElement("template");stripSelect.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    }  \n    :host{\n        --accent-color: #4d2588;\n        --text-color: 17, 17, 17;\n        --background-color: 255, 255, 255;\n        padding: 1rem 0;\n    }\n    .hide{\n        display: none !important;\n    }\n    input[type="radio"]{\n        display: none;\n    }\n    .scrolling-container{\n        position: relative;\n        display: flex;\n        align-items: center;\n    }\n    .strip-select{\n        position: relative;\n    }\n    :host([multiline]) .strip-select{\n        display: flex;\n        flex-wrap: wrap;\n        gap: var(--gap, 0.5rem);\n        overflow: auto hidden;\n    }\n    :host(:not([multiline])) .strip-select{\n        display: grid;\n        grid-auto-flow: column;\n        gap: var(--gap, 0.5rem);\n        max-width: 100%;   \n        align-items: center;\n        overflow: auto hidden;\n    }\n    .nav-button{\n        display: flex;\n        top: 50%;\n        z-index: 2;\n        border: none;\n        padding: 0.3rem;\n        cursor: pointer;\n        position: absolute;\n        align-items: center;\n        background: rgba(var(--background-color), 1);\n        transform: translateY(-50%);\n    }\n    .nav-button--right{\n        right: 0;\n    }\n    .cover{\n        position: absolute;\n        z-index: 1;\n        width: 5rem;\n        height: 100%;\n        pointer-events: none;\n    }\n    .nav-button--right::before{\n        background-color: red;\n    }\n    .icon{\n        height: 1.5rem;\n        width: 1.5rem;\n        fill: rgba(var(--text-color), .8);\n    }\n    @media (hover: none){\n        ::-webkit-scrollbar {\n            height: 0;\n        }\n        .nav-button{\n            display: none;\n        }\n        .strip-select{\n            overflow: auto hidden;\n        }\n        .cover{\n            width: 2rem;\n        }\n        .cover--left{\n            background: linear-gradient(90deg, rgba(var(--background-color), 1), transparent);\n        }\n        .cover--right{\n            right: 0;\n            background: linear-gradient(90deg, transparent, rgba(var(--background-color), 1));\n        }\n    }\n    @media (hover: hover){\n        ::-webkit-scrollbar-track {\n            background-color: transparent !important;\n        }\n        ::-webkit-scrollbar {\n            height: 0;\n            background-color: transparent;\n        }\n        .strip-select{\n            overflow: hidden;\n        }\n        .cover--left{\n            background: linear-gradient(90deg, rgba(var(--background-color), 1) 60%, transparent);\n        }\n        .cover--right{\n            right: 0;\n            background: linear-gradient(90deg, transparent 0%, rgba(var(--background-color), 1) 40%);\n        }\n    }\n</style>\n<section class="scrolling-container">\n    <div class="cover cover--left hide"></div>\n    <button class="nav-button nav-button--left hide">\n        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"/></svg>\n    </button>\n    <section class="strip-select">\n        <slot></slot>\n    </section>\n    <button class="nav-button nav-button--right hide">\n        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>\n    </button>\n    <div class="cover cover--right hide"></div>\n</section>\n\n',customElements.define("strip-select",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(stripSelect.content.cloneNode(!0)),this.stripSelect=this.shadowRoot.querySelector(".strip-select"),this.slottedOptions=void 0,this._value=void 0,this.scrollDistance=0,this.scrollLeft=this.scrollLeft.bind(this),this.scrollRight=this.scrollRight.bind(this),this.fireEvent=this.fireEvent.bind(this)}get value(){return this._value}scrollLeft(){this.stripSelect.scrollBy({left:-this.scrollDistance,behavior:"smooth"})}scrollRight(){this.stripSelect.scrollBy({left:this.scrollDistance,behavior:"smooth"})}fireEvent(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this._value}}))}connectedCallback(){this.setAttribute("role","listbox");const t=this.shadowRoot.querySelector("slot"),e=this.shadowRoot.querySelector(".cover--left"),n=this.shadowRoot.querySelector(".cover--right"),i=this.shadowRoot.querySelector(".nav-button--left"),s=this.shadowRoot.querySelector(".nav-button--right");t.addEventListener("slotchange",o=>{const l=t.assignedElements();l.forEach(t=>{t.hasAttribute("selected")&&(t.setAttribute("active",""),this._value=t.value)}),this.hasAttribute("multiline")||(l.length>0?(a.observe(t.assignedElements()[0]),r.observe(t.assignedElements()[t.assignedElements().length-1])):(i.classList.add("hide"),s.classList.add("hide"),e.classList.add("hide"),n.classList.add("hide"),a.disconnect(),r.disconnect()))});const o=new ResizeObserver(t=>{t.forEach(t=>{if(t.contentBoxSize){const e=Array.isArray(t.contentBoxSize)?t.contentBoxSize[0]:t.contentBoxSize;this.scrollDistance=.6*e.inlineSize}else this.scrollDistance=.6*t.contentRect.width})});o.observe(this),this.stripSelect.addEventListener("option-clicked",e=>{this._value!==e.target.value&&(this._value=e.target.value,t.assignedElements().forEach(t=>t.removeAttribute("active")),e.target.setAttribute("active",""),e.target.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"}),this.fireEvent())});const a=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?(i.classList.add("hide"),e.classList.add("hide")):(i.classList.remove("hide"),e.classList.remove("hide"))})},{threshold:.9,root:this}),r=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?(s.classList.add("hide"),n.classList.add("hide")):(s.classList.remove("hide"),n.classList.remove("hide"))})},{threshold:.9,root:this});i.addEventListener("click",this.scrollLeft),s.addEventListener("click",this.scrollRight)}disconnectedCallback(){navButtonLeft.removeEventListener("click",this.scrollLeft),navButtonRight.removeEventListener("click",this.scrollRight)}});const stripOption=document.createElement("template");stripOption.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    }  \n    :host{\n        --background-color: inherit;\n    }\n    .strip-option{\n        display: flex;\n        flex-shrink: 0;\n        cursor: pointer;\n        white-space: nowrap;\n        padding: var(--padding, 0.4rem 0.6rem);\n        transition: background 0.3s;\n        border-radius: var(--border-radius, 2rem);\n        -webkit-tap-highlight-color: transparent;\n    }\n    :host([active]) .strip-option{\n        color: var(--active-option-color, inherit);\n        background-color: var(--active-background-color, rgba(var(--text-color), 0.06));\n    }\n    :host(:focus-within){\n        outline: none;\n    }\n    :host(:focus-within) .strip-option{\n        box-shadow: 0 0 0 0.1rem var(--accent-color) inset;\n    }\n    :host(:hover:not([active])) .strip-option{\n        background-color: rgba(var(--text-color), 0.06);\n    }\n</style>\n<label class="strip-option">\n    <slot></slot>\n</label>\n',customElements.define("strip-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(stripOption.content.cloneNode(!0)),this._value=void 0,this.radioButton=this.shadowRoot.querySelector("input"),this.fireEvent=this.fireEvent.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}get value(){return this._value}fireEvent(){this.dispatchEvent(new CustomEvent("option-clicked",{bubbles:!0,composed:!0,detail:{value:this._value}}))}handleKeyDown(t){"Enter"!==t.key&&"Space"!==t.key||this.fireEvent()}connectedCallback(){this.setAttribute("role","option"),this.setAttribute("tabindex","0"),this._value=this.getAttribute("value"),this.addEventListener("click",this.fireEvent),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("click",this.fireEvent),this.removeEventListener("keydown",this.handleKeyDown)}});const smTabHeader=document.createElement("template")
+;smTabHeader.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    } \n    :host{\n        display: -webkit-box;\n        display: -ms-flexbox;\n        display: flex;\n        --accent-color: #4d2588;\n        --text-color: 17, 17, 17;\n        --background-color: 255, 255, 255;\n        --gap: 1rem;\n        --justify-content: flex-start;\n        --tab-indicator-border-radius: 0.3rem;\n    }\n    .tabs{\n        position: relative;\n        display: -ms-grid;\n        display: grid;\n        width: 100%;\n    }\n    .tab-header{\n        display: -ms-grid;\n        display: grid;\n        grid-auto-flow: column;\n        justify-content: var(--justify-content);\n        gap: var(--gap);\n        position: relative;\n        overflow: auto hidden;\n        max-width: 100%;\n        scrollbar-width: 0;\n    }\n    .indicator{\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        height: 0.15rem;\n        border-radius: 1rem 1rem 0 0;  \n        background: var(--accent-color);\n        -webkit-transition: width 0.3s, -webkit-transform 0.3s;\n        transition: width 0.3s, -webkit-transform 0.3s;\n        -o-transition: transform 0.3s, width 0.3s;\n        transition: transform 0.3s, width 0.3s;\n        transition: transform 0.3s, width 0.3s, -webkit-transform 0.3s;\n        pointer-events: none;\n    }\n    :host([variant="tab"]) .indicator{\n        height: 100%;\n        border-radius: var(--tab-indicator-border-radius);\n    }\n    :host([variant="tab"]) .tab-header{\n        border-bottom: none; \n    }\n    .hide-completely{\n        display: none;\n    }\n    :host([variant="tab"]) .tab-header{\n        gap: 0.2rem;\n        display: -ms-inline-grid;\n        display: inline-grid;\n        justify-self: flex-start;\n        border-radius: 0.3rem;\n    }\n    :host([variant="tab"]) slot::slotted(.active){\n        color: rgba(var(--background-color), 1);\n    }\n    slot::slotted(.active){\n        color: var(--accent-color);\n        opacity: 1;\n    }\n    @media (any-hover: none){\n        .tab-header::-webkit-scrollbar-track {\n            -webkit-box-shadow: none !important;\n            background-color: transparent !important;\n        }\n        .tab-header::-webkit-scrollbar {\n            height: 0;\n            background-color: transparent;\n        }\n    }         \n    @media (any-hover: hover){\n        .tab-header{\n            overflow: hidden;\n        }\n    }         \n</style>\n<div part="tab-container" class="tabs">\n    <div part="tab-header" class="tab-header">\n        <slot></slot>\n        <div part="indicator" class="indicator"></div>\n    </div>\n</div>\n',customElements.define("sm-tab-header",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTabHeader.content.cloneNode(!0)),this.prevTab,this.allTabs,this.activeTab,this.indicator=this.shadowRoot.querySelector(".indicator"),this.tabSlot=this.shadowRoot.querySelector("slot"),this.tabHeader=this.shadowRoot.querySelector(".tab-header"),this.changeTab=this.changeTab.bind(this),this.handleClick=this.handleClick.bind(this),this.handlePanelChange=this.handlePanelChange.bind(this),this.moveIndiactor=this.moveIndiactor.bind(this)}fireEvent(t){this.dispatchEvent(new CustomEvent(`switchedtab${this.target}`,{bubbles:!0,detail:{index:parseInt(t)}}))}moveIndiactor(t){this.indicator.setAttribute("style",`width: ${t.width}px; transform: translateX(${t.left-this.tabHeader.getBoundingClientRect().left+this.tabHeader.scrollLeft}px)`)}changeTab(t){t!==this.prevTab&&t.closest("sm-tab")&&(this.prevTab&&this.prevTab.classList.remove("active"),t.classList.add("active"),this.tabHeader.scrollTo({behavior:"smooth",left:t.getBoundingClientRect().left-this.tabHeader.getBoundingClientRect().left+this.tabHeader.scrollLeft}),this.moveIndiactor(t.getBoundingClientRect()),this.prevTab=t,this.activeTab=t)}handleClick(t){t.target.closest("sm-tab")&&(this.changeTab(t.target),this.fireEvent(t.target.dataset.index))}handlePanelChange(t){this.changeTab(this.allTabs[t.detail.index])}connectedCallback(){if(!this.hasAttribute("target")||""===this.getAttribute("target").value)return;this.target=this.getAttribute("target"),this.tabSlot.addEventListener("slotchange",()=>{this.allTabs=this.tabSlot.assignedElements(),this.allTabs.forEach((t,e)=>{t.dataset.index=e})}),this.addEventListener("click",this.handleClick),document.addEventListener(`switchedpanel${this.target}`,this.handlePanelChange);let t=new ResizeObserver(t=>{t.forEach(t=>{if(this.prevTab){let t=this.activeTab.getBoundingClientRect();this.moveIndiactor(t)}})});t.observe(this);let e=new IntersectionObserver(t=>{t.forEach(t=>{if(t.isIntersecting)if(this.indicator.style.transition="none",this.activeTab){let t=this.activeTab.getBoundingClientRect();this.moveIndiactor(t)}else{this.allTabs[0].classList.add("active");let t=this.allTabs[0].getBoundingClientRect();this.moveIndiactor(t),this.fireEvent(0),this.prevTab=this.tabSlot.assignedElements()[0],this.activeTab=this.prevTab}})},{threshold:1});e.observe(this)}disconnectedCallback(){this.removeEventListener("click",this.handleClick),document.removeEventListener(`switchedpanel${this.target}`,this.handlePanelChange)}});const smTab=document.createElement("template");smTab.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    } \n    :host{\n        position: relative;\n        display: -webkit-inline-box;\n        display: -ms-inline-flexbox;\n        display: inline-flex;\n        z-index: 1;\n        --padding: 0.8rem 1rem;\n    }\n    .tab{\n        position: relative;\n        -webkit-user-select: none;\n        -moz-user-select: none;\n            -ms-user-select: none;\n                user-select: none;\n        -webkit-box-pack: center;\n            -ms-flex-pack: center;\n                justify-content: center;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n        white-space: nowrap;\n        padding: var(--padding);\n        font-weight: 500;\n        word-spacing: 0.1rem;\n        text-align: center;\n        -webkit-transition: color 0.3s;\n        -o-transition: color 0.3s;\n        transition: color 0.3s;\n        text-transform: capitalize;\n        height: 100%;\n    }\n    @media (hover: hover){\n        :host(.active) .tab{\n            opacity: 1;\n        }\n        .tab{\n            opacity: 0.7\n        }\n        .tab:hover{\n            opacity: 1\n        }\n    }\n</style>\n<div part="tab" class="tab">\n<slot></slot>\n</div>\n',customElements.define("sm-tab",class extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}).append(smTab.content.cloneNode(!0))}});const smTabPanels=document.createElement("template");smTabPanels.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \n:host{\n    width: 100%;\n}\n.panel-container{\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    scroll-snap-type: x mandatory;\n    content-visibility: auto;\n}\n::slotted(*){\n    min-width: 100%;\n    scroll-snap-align: center;\n}\n@media (any-hover: none) {\n    .panel-container{\n        overflow-x: auto;\n        scrollbar-width: none;\n    }\n    .container {\n        overflow-y: scroll;\n    }\n    ::-webkit-scrollbar {\n        width: 0;\n        height: 0;\n    }\n}\n</style>\n<div part="panel-container" class="panel-container">\n    <slot>Nothing to see here.</slot>\n</div>\n',customElements.define("sm-tab-panels",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTabPanels.content.cloneNode(!0)),this.isTransitioning=!1,this.panelContainer=this.shadowRoot.querySelector(".panel-container"),this.handleTabChange=this.handleTabChange.bind(this)}handleTabChange(t){this.isTransitioning=!0,this.panelContainer.scrollTo({left:this.allPanels[t.detail.index].getBoundingClientRect().left-this.panelContainer.getBoundingClientRect().left+this.panelContainer.scrollLeft,behavior:"smooth"}),setTimeout(()=>{this.isTransitioning=!1},300)}fireEvent(t){this.dispatchEvent(new CustomEvent(`switchedpanel${this.id}`,{bubbles:!0,detail:{index:parseInt(t)}}))}connectedCallback(){const t=this.shadowRoot.querySelector("slot");t.addEventListener("slotchange",t=>{this.allPanels=t.target.assignedElements(),this.allPanels.forEach((t,n)=>{t.dataset.index=n,e.observe(t)})}),document.addEventListener(`switchedtab${this.id}`,this.handleTabChange);const e=new IntersectionObserver(t=>{t.forEach(t=>{!this.isTransitioning&&t.isIntersecting&&this.fireEvent(t.target.dataset.index)})},{threshold:.6})}disconnectedCallback(){intersectionObserver.disconnect(),document.removeEventListener(`switchedtab${this.id}`,this.handleTabChange)}});const tagsInput=document.createElement("template");tagsInput.innerHTML='\n  <style>\n  *{\n    padding: 0;\n    margin: 0;\n    box-sizing: border-box;\n  }\n  :host{\n\t--accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --danger-color: red;\n    --border-radius: 0.3rem;\n\t--background: rgba(var(--text-color), 0.06);\n    }\n.hide{\n    display: none !important;\n}\n.tags-wrapper{\n    position: relative;\n    display: flex;\n    cursor: text;\n    flex-wrap: wrap;\n    justify-items: flex-start;\n    align-items: center;\n    padding: 0.5rem 0.5rem 0 0.5rem;\n    border-radius: var(--border-radius);\n    background: var(--background);\n  }\n  .tags-wrapper:focus-within{\n    box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;\n  }\n  \n  .tag {\n    cursor: pointer;\n    user-select: none;\n    align-items: center;\n    display: inline-flex;\n    border-radius: 0.3rem;\n    padding: 0.3rem 0.5rem;\n    margin: 0 0.5rem 0.5rem 0;\n    background-color: rgba(var(--text-color), 0.06);\n  }\n  \n  .icon {\n    height: 1.2rem;\n    width: 1.2rem;\n    margin-left: 0.3rem;\n    fill: rgba(var(--text-color), 0.8);\n  }\n  \n  input,\n  input:focus {\n    outline: none;\n    border: none;\n  }\n  \n  input {\n    display: inline-flex;\n    width: auto;\n    color: inherit;\n    max-width: inherit;\n    font-size: inherit;\n    font-family: inherit;\n    padding: 0.4rem 0.5rem;\n    margin: 0 0.5rem 0.5rem 0;\n    background-color: transparent;\n  }\n  .placeholder{\n      position: absolute;\n      padding: 0 0.5rem;\n      top: 50%;\n      font-weight: 500;\n      transform: translateY(-50%);\n      color: rgba(var(--text-color), 0.6);\n  }\n  </style>\n  <div class="tags-wrapper">\n    <input type="text" size="3"/>\n    <p class="placeholder"></p>\n  </div>\n',customElements.define("tags-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(tagsInput.content.cloneNode(!0)),this.input=this.shadowRoot.querySelector("input"),this.tagsWrapper=this.shadowRoot.querySelector(".tags-wrapper"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["placeholder","limit"],this.limit=void 0,this.tags=new Set,this.reset=this.reset.bind(this),this.handleInput=this.handleInput.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.handleClick=this.handleClick.bind(this),this.removeTag=this.removeTag.bind(this)}static get observedAttributes(){return["placeholder","limit"]}get value(){return[...this.tags].join()}get isValid(){return this.tags.size}focusIn(){this.input.focus()}reset(){for(this.input.value="",this.tags.clear();this.input.previousElementSibling;)this.input.previousElementSibling.remove()}handleInput(t){const e=t.target.value.trim().length;t.target.setAttribute("size",e||"3"),e?this.placeholder.classList.add("hide"):e||this.tags.size||this.placeholder.classList.remove("hide")}handleKeydown(t){if(","!==t.key&&"/"!==t.key||t.preventDefault(),""!==t.target.value.trim()){if("Enter"===t.key||","===t.key||"/"===t.key||"Space"===t.code){const e=t.target.value.trim();if(this.tags.has(e))this.tagsWrapper.querySelector(`[data-value="${e}"]`).animate([{backgroundColor:"initial"},{backgroundColor:"var(--accent-color)"},{backgroundColor:"initial"}],{duration:300,easing:"ease"});else{const t=document.createElement("span");t.dataset.value=e,t.className="tag",t.innerHTML=`\n                        <span class="tag-text">${e}</span>\n                        <svg class="icon" 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 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>\n                        `,this.input.before(t),this.tags.add(e)}if(t.target.value="",t.target.setAttribute("size","3"),this.limit&&this.limit<this.tags.size+1)return void(this.input.readOnly=!0)}}else"Backspace"===t.key&&this.input.previousElementSibling&&this.removeTag(this.input.previousElementSibling),this.limit&&this.limit>this.tags.size&&(this.input.readOnly=!1)}handleClick(t){t.target.closest(".tag")?this.removeTag(t.target.closest(".tag")):this.input.focus()}removeTag(t){this.tags.delete(t.dataset.value),t.remove(),this.tags.size||this.placeholder.classList.remove("hide")}connectedCallback(){this.input.addEventListener("input",this.handleInput),this.input.addEventListener("keydown",this.handleKeydown),this.tagsWrapper.addEventListener("click",this.handleClick)}attributeChangedCallback(t,e,n){"placeholder"===t&&(this.placeholder.textContent=n),"limit"===t&&(this.limit=parseInt(n))}disconnectedCallback(){this.input.removeEventListener("input",this.handleInput),this.input.removeEventListener("keydown",this.handleKeydown),this.tagsWrapper.removeEventListener("click",this.handleClick)}});const smTextarea=document.createElement("template");smTextarea.innerHTML='\n<style>\n*,\n*::before,\n*::after { \n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \n::-moz-focus-inner{\n    border: none;\n}\n.hide{\n    opacity: 0 !important;\n}\n:host{\n    display: grid;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --danger-color: red;\n    --border-radius: 0.3rem;\n    --background: rgba(var(--text-color), 0.06);\n    --padding: initial;\n    --max-height: 8rem;\n}\n:host([variant="outlined"]) .textarea {\n    box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;\n    background: rgba(var(--background-color), 1);\n}\n.textarea{\n    display: grid;\n    position: relative;\n    cursor: text;\n    min-width: 0;\n    text-align: left;\n    overflow: hidden auto;\n    grid-template-columns: 1fr;\n    align-items: stretch;\n    max-height: var(--max-height);\n    background: var(--background);\n    border-radius: var(--border-radius);\n    padding: var(--padding);\n}\n.textarea::after,\ntextarea{\n    padding: 0.7rem 1rem;\n    width: 100%;\n    min-width: 1em;\n    font: inherit;\n    color: inherit;\n    resize: none;\n    grid-area: 2/1;\n    justify-self: stretch;\n    background: none;\n    appearance: none;\n    border: none;\n    outline: none;\n    line-height: 1.5;\n    overflow: hidden;\n}\n.textarea::after{\n    content: attr(data-value) \' \';\n    visibility: hidden;\n    white-space: pre-wrap;\n    overflow-wrap: break-word;\n    word-wrap: break-word;\n    hyphens: auto;\n}\n.readonly{\n    pointer-events: none;\n}\n.textarea:focus-within:not(.readonly){\n    box-shadow: 0 0 0 0.1rem var(--accent-color) inset;\n}\n.placeholder{\n    position: absolute;\n    margin: 0.7rem 1rem;\n    opacity: .7;\n    font-weight: inherit;\n    font-size: inherit;\n    line-height: 1.5;\n    pointer-events: none;\n    user-select: none;\n}\n:host([disabled]) .textarea{\n    cursor: not-allowed;\n    opacity: 0.6;\n}\n@media (any-hover: hover){\n    ::-webkit-scrollbar{\n        width: 0.5rem;\n        height: 0.5rem;\n    }\n    \n    ::-webkit-scrollbar-thumb{\n        background: rgba(var(--text-color), 0.3);\n        border-radius: 1rem;\n        &:hover{\n            background: rgba(var(--text-color), 0.5);\n        }\n    }\n}\n</style>\n<label class="textarea" part="textarea">\n    <span class="placeholder"></span>\n    <textarea rows="1"></textarea>\n</label>\n',customElements.define("sm-textarea",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTextarea.content.cloneNode(!0)),this.textarea=this.shadowRoot.querySelector("textarea"),this.textareaBox=this.shadowRoot.querySelector(".textarea"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["disabled","required","readonly","rows","minlength","maxlength"],this.reset=this.reset.bind(this),this.focusIn=this.focusIn.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this)}static get observedAttributes(){return["disabled","value","placeholder","required","readonly","rows","minlength","maxlength"]}get value(){return this.textarea.value}set value(t){this.setAttribute("value",t),this.fireEvent()}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get isValid(){return this.textarea.checkValidity()}reset(){this.setAttribute("value","")}focusIn(){this.textarea.focus()}fireEvent(){let t=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(t)}checkInput(){this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder")&&(""!==this.textarea.value?this.placeholder.classList.add("hide"):this.placeholder.classList.remove("hide"))}connectedCallback(){this.textarea.addEventListener("input",t=>{this.textareaBox.dataset.value=this.textarea.value,this.checkInput()})}attributeChangedCallback(t,e,n){this.reflectedAttributes.includes(t)?this.hasAttribute(t)?this.textarea.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.textContent.removeAttribute(t):"placeholder"===t?this.placeholder.textContent=this.getAttribute("placeholder"):"value"===t&&(this.textarea.value=n,this.textareaBox.dataset.value=n,this.checkInput())}});const textField=document.createElement("template");textField.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        box-sizing: border-box;\n    }\n    :host{\n        --accent-color: #4d2588;\n        --text-color: 17, 17, 17;\n        --background-color: 255, 255, 255;\n    }\n    .text-field{\n        display: flex;\n        align-items: center;\n    }\n    .text{\n        transition: background-color 0.3s;\n        border-bottom: 0.15rem solid transparent;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        word-break: break-all;\n        word-break: break-word;\n        -moz-hyphens: auto;\n        -webkit-hyphens: auto;\n        hyphens: auto;\n    }\n    .text:focus{\n        outline: none;\n        border-bottom: 0.15rem solid var(--accent-color);\n    }\n    .text:focus-visible{\n        outline: none;\n        background: solid rgba(var(--text-color), 0.06);\n    }\n    .editable{\n        border-bottom: 0.15rem solid rgba(var(--text-color), 0.6);\n    }\n    .edit-button{\n        display: grid;\n        position: relative;\n        margin-left: 0.5rem;\n        background-color: transparent;\n        border: none;\n    }\n    :host([disabled]) .edit-button{\n        display: none;\n    }\n    .icon{\n        grid-area: 1/-1;\n        cursor: pointer;\n        height: 1.2rem;\n        width: 1.2rem;\n        fill: rgba(var(--text-color), 1);\n    }\n    .hide{\n        visibility: hidden;\n    }\n</style>\n<div class="text-field">\n    <div class="text" part="text"></div>\n    <button class="edit-button">\n        <svg class="icon" title="edit" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>\n        <svg class="icon hide" title="Save" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>\n    </button>\n</div>\n',customElements.define("text-field",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(textField.content.cloneNode(!0)),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.isTextEditable=!1,this.isDisabled=!1,this.fireEvent=this.fireEvent.bind(this),this.setEditable=this.setEditable.bind(this),this.setNonEditable=this.setNonEditable.bind(this),this.toggleEditable=this.toggleEditable.bind(this),this.revert=this.revert.bind(this)}static get observedAttributes(){return["disabled","value"]}get value(){return this.text}set value(t){this.setAttribute("value",t)}set disabled(t){this.isDisabled=t,this.isDisabled?this.setAttribute("disabled",""):this.removeAttribute("disabled")}fireEvent(t){let e=new CustomEvent("change",{bubbles:!0,cancelable:!0,composed:!0,detail:{value:t}});this.dispatchEvent(e)}setEditable(){this.isTextEditable||(this.textContainer.contentEditable=!0,this.textContainer.classList.add("editable"),this.textContainer.focus(),document.execCommand("selectAll",!1,null),this.editButton.children[0].animate(this.rotateOut,this.animOptions).onfinish=(()=>{this.editButton.children[0].classList.add("hide")}),setTimeout(()=>{this.editButton.children[1].classList.remove("hide"),this.editButton.children[1].animate(this.rotateIn,this.animOptions)},100),this.isTextEditable=!0)}setNonEditable(){if(!this.isTextEditable)return;this.textContainer.contentEditable=!1,this.textContainer.classList.remove("editable");const t=this.textContainer.textContent.trim();this.text!==t&&""!==t?(this.setAttribute("value",this.textContainer.textContent),this.text=this.textContainer.textContent.trim(),this.fireEvent(this.text)):this.value=this.text,this.editButton.children[1].animate(this.rotateOut,this.animOptions).onfinish=(()=>{this.editButton.children[1].classList.add("hide")}),setTimeout(()=>{this.editButton.children[0].classList.remove("hide"),this.editButton.children[0].animate(this.rotateIn,this.animOptions)},100),this.isTextEditable=!1}toggleEditable(){this.isTextEditable?this.setNonEditable():this.setEditable()}revert(){this.textContainer.isContentEditable&&(this.value=this.text,this.setNonEditable())}connectedCallback(){this.text,this.hasAttribute("value")&&(this.text=this.getAttribute("value"),this.textContainer.textContent=this.text),this.hasAttribute("disabled")?this.isDisabled=!0:this.isDisabled=!1,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"},this.isDisabled||(this.iconsContainer.classList.remove("hide"),this.textContainer.addEventListener("dblclick",this.setEditable),this.editButton.addEventListener("click",this.toggleEditable))}attributeChangedCallback(t,e,n){"disabled"===t?this.hasAttribute("disabled")?(this.textContainer.removeEventListener("dblclick",this.setEditable),this.editButton.removeEventListener("click",this.toggleEditable),this.revert()):(this.textContainer.addEventListener("dblclick",this.setEditable),this.editButton.addEventListener("click",this.toggleEditable)):"value"===t&&(this.text=n,this.textContainer.textContent=n)}disconnectedCallback(){this.textContainer.removeEventListener("dblclick",this.setEditable),this.editButton.removeEventListener("click",this.toggleEditable)}});const themeToggle=document.createElement("template");themeToggle.innerHTML='\n    <style>\n    *{\n        padding: 0;\n        margin: 0;\n        box-sizing: border-box;\n    }\n    :host{\n        cursor: pointer;\n        --height: 2.5rem;\n        --width: 2.5rem;\n    }\n    .theme-toggle {\n        display: flex;\n        position: relative;\n        width: 1.4rem;\n        height: 1.4rem;\n        cursor: pointer;\n        -webkit-tap-highlight-color: transparent;\n    }\n    .theme-toggle::after{\n        content: \'\';\n        position: absolute;\n        height: var(--height);\n        width: var(--width);\n        top: 50%;\n        left: 50%;\n        opacity: 0;\n        border-radius: 50%;\n        pointer-events: none;\n        transition: transform 0.3s, opacity 0.3s;\n        transform: translate(-50%, -50%) scale(1.2);\n        background-color: rgba(var(--text-color), 0.12);\n    }\n    :host(:focus-within) .theme-toggle{\n        outline: none;\n    }\n    :host(:focus-within) .theme-toggle::after{\n        opacity: 1;\n        transform: translate(-50%, -50%) scale(1);\n    }\n    .icon {\n        position: absolute;\n        height: 100%;\n        width: 100%;\n        fill: rgba(var(--text-color), 1);\n        transition: transform 0.3s, opacity 0.1s;\n    }\n    \n    .theme-switcher__checkbox {\n        display: none;\n    }\n    :host([checked]) .moon-icon {\n        transform: translateY(50%);\n        opacity: 0;\n    }\n    :host(:not([checked])) .sun-icon {\n        transform: translateY(50%);\n        opacity: 0;\n    }\n    </style>\n    <label class="theme-toggle" title="Change theme" tabindex="0">\n        <slot name="light-mode-icon">\n        <svg xmlns="http://www.w3.org/2000/svg" class="icon moon-icon" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"/></svg>\n        </slot>\n        <slot name="dark-mode-icon">\n        <svg xmlns="http://www.w3.org/2000/svg" class="icon sun-icon" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><rect fill="none" height="24" width="24"/><path d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"/></svg>\n        </slot>\n    </label>\n';class ThemeToggle extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(themeToggle.content.cloneNode(!0)),this.isChecked=!1,this.hasTheme="light",this.toggleState=this.toggleState.bind(this),this.fireEvent=this.fireEvent.bind(this),this.handleThemeChange=this.handleThemeChange.bind(this)}static get observedAttributes(){return["checked"]}daylight(){this.hasTheme="light",document.body.dataset.theme="light",this.setAttribute("aria-checked","false")}nightlight(){this.hasTheme="dark",document.body.dataset.theme="dark",this.setAttribute("aria-checked","true")}toggleState(){this.toggleAttribute("checked"),this.fireEvent()}handleKeyDown(t){"Space"===t.code&&this.toggleState()}handleThemeChange(t){t.detail.theme!==this.hasTheme&&("dark"===t.detail.theme?this.setAttribute("checked",""):this.removeAttribute("checked"))}fireEvent(){this.dispatchEvent(new CustomEvent("themechange",{bubbles:!0,composed:!0,detail:{theme:this.hasTheme}}))}connectedCallback(){this.setAttribute("role","switch"),this.setAttribute("aria-label","theme toggle"),"dark"===localStorage.getItem(`${window.location.hostname}-theme`)?(this.nightlight(),this.setAttribute("checked","")):"light"===localStorage.getItem(`${window.location.hostname}-theme`)?(this.daylight(),this.removeAttribute("checked")):window.matchMedia("(prefers-color-scheme: dark)").matches?(this.nightlight(),this.setAttribute("checked","")):(this.daylight(),this.removeAttribute("checked")),this.addEventListener("click",this.toggleState),this.addEventListener("keydown",this.handleKeyDown),document.addEventListener("themechange",this.handleThemeChange)}disconnectedCallback(){this.removeEventListener("click",this.toggleState),this.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("themechange",this.handleThemeChange)}attributeChangedCallback(t,e,n){"checked"===t&&(this.hasAttribute("checked")?(this.nightlight(),localStorage.setItem(`${window.location.hostname}-theme`,"dark")):(this.daylight(),localStorage.setItem(`${window.location.hostname}-theme`,"light")))}}window.customElements.define("theme-toggle",ThemeToggle);
\ No newline at end of file