From 15357150d4350088d87079eea24d818257f638db Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Sat, 10 Jul 2021 16:55:55 +0530
Subject: [PATCH] New components

---
 Standard UI Components/.gitattributes         |    2 +
 Standard UI Components/README.md              |   83 +-
 Standard UI Components/_config.yml            |    5 +
 Standard UI Components/components.js          | 2480 ++++++------
 Standard UI Components/components.min.js      |    1 +
 Standard UI Components/components.ts          | 3591 +++++++++++++++++
 Standard UI Components/css/main.css           |  713 +++-
 Standard UI Components/css/main.css.map       |   10 +-
 Standard UI Components/css/main.min.css       |    1 +
 Standard UI Components/css/main.scss          |  577 ++-
 Standard UI Components/dist/button.js         |  157 +
 Standard UI Components/dist/button.min.js     |    1 +
 Standard UI Components/dist/carousel.js       |  400 ++
 Standard UI Components/dist/carousel.min.js   |    1 +
 Standard UI Components/dist/checkbox.js       |  196 +
 Standard UI Components/dist/checkbox.min.js   |    1 +
 Standard UI Components/dist/copy.js           |  112 +
 Standard UI Components/dist/copy.min.js       |    1 +
 Standard UI Components/dist/file-input.js     |  158 +
 Standard UI Components/dist/file-input.min.js |    1 +
 Standard UI Components/dist/form.js           |   93 +
 Standard UI Components/dist/form.min.js       |    1 +
 Standard UI Components/dist/input.js          |  419 ++
 Standard UI Components/dist/input.min.js      |    1 +
 Standard UI Components/dist/menu.js           |  291 ++
 Standard UI Components/dist/menu.min.js       |    1 +
 Standard UI Components/dist/notifications.js  |  224 +
 .../dist/notifications.min.js                 |    1 +
 Standard UI Components/dist/popup.js          |  360 ++
 Standard UI Components/dist/popup.min.js      |    1 +
 Standard UI Components/dist/radio.js          |  185 +
 Standard UI Components/dist/radio.min.js      |    1 +
 Standard UI Components/dist/select.js         |  387 ++
 Standard UI Components/dist/select.min.js     |    1 +
 Standard UI Components/dist/strip-select.js   |  324 ++
 .../dist/strip-select.min.js                  |    1 +
 Standard UI Components/dist/switch.js         |  228 ++
 Standard UI Components/dist/switch.min.js     |    1 +
 Standard UI Components/dist/tabs.js           |  412 ++
 Standard UI Components/dist/tabs.min.js       |    1 +
 Standard UI Components/dist/tags-input.js     |  207 +
 Standard UI Components/dist/tags-input.min.js |    1 +
 Standard UI Components/dist/textarea.js       |  188 +
 Standard UI Components/dist/textarea.min.js   |    1 +
 Standard UI Components/index.html             | 1005 ++++-
 Standard UI Components/prettify.js            |   46 +
 Standard UI Components/tsconfig.json          |   11 +
 47 files changed, 11078 insertions(+), 1805 deletions(-)
 create mode 100644 Standard UI Components/.gitattributes
 create mode 100644 Standard UI Components/_config.yml
 create mode 100644 Standard UI Components/components.min.js
 create mode 100644 Standard UI Components/components.ts
 create mode 100644 Standard UI Components/css/main.min.css
 create mode 100644 Standard UI Components/dist/button.js
 create mode 100644 Standard UI Components/dist/button.min.js
 create mode 100644 Standard UI Components/dist/carousel.js
 create mode 100644 Standard UI Components/dist/carousel.min.js
 create mode 100644 Standard UI Components/dist/checkbox.js
 create mode 100644 Standard UI Components/dist/checkbox.min.js
 create mode 100644 Standard UI Components/dist/copy.js
 create mode 100644 Standard UI Components/dist/copy.min.js
 create mode 100644 Standard UI Components/dist/file-input.js
 create mode 100644 Standard UI Components/dist/file-input.min.js
 create mode 100644 Standard UI Components/dist/form.js
 create mode 100644 Standard UI Components/dist/form.min.js
 create mode 100644 Standard UI Components/dist/input.js
 create mode 100644 Standard UI Components/dist/input.min.js
 create mode 100644 Standard UI Components/dist/menu.js
 create mode 100644 Standard UI Components/dist/menu.min.js
 create mode 100644 Standard UI Components/dist/notifications.js
 create mode 100644 Standard UI Components/dist/notifications.min.js
 create mode 100644 Standard UI Components/dist/popup.js
 create mode 100644 Standard UI Components/dist/popup.min.js
 create mode 100644 Standard UI Components/dist/radio.js
 create mode 100644 Standard UI Components/dist/radio.min.js
 create mode 100644 Standard UI Components/dist/select.js
 create mode 100644 Standard UI Components/dist/select.min.js
 create mode 100644 Standard UI Components/dist/strip-select.js
 create mode 100644 Standard UI Components/dist/strip-select.min.js
 create mode 100644 Standard UI Components/dist/switch.js
 create mode 100644 Standard UI Components/dist/switch.min.js
 create mode 100644 Standard UI Components/dist/tabs.js
 create mode 100644 Standard UI Components/dist/tabs.min.js
 create mode 100644 Standard UI Components/dist/tags-input.js
 create mode 100644 Standard UI Components/dist/tags-input.min.js
 create mode 100644 Standard UI Components/dist/textarea.js
 create mode 100644 Standard UI Components/dist/textarea.min.js
 create mode 100644 Standard UI Components/prettify.js
 create mode 100644 Standard UI Components/tsconfig.json

diff --git a/Standard UI Components/.gitattributes b/Standard UI Components/.gitattributes
new file mode 100644
index 0000000..dfe0770
--- /dev/null
+++ b/Standard UI Components/.gitattributes	
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/Standard UI Components/README.md b/Standard UI Components/README.md
index d646da4..ef4600e 100644
--- a/Standard UI Components/README.md	
+++ b/Standard UI Components/README.md	
@@ -51,7 +51,6 @@ Now you are ready to use them in your HTML markup as any other standard HMTL tag
 | [Carousel](#carousel) |
 | [Checkbox](#checkbox) |
 | [Input](#input) |
-| [Menu](#menu) |
 | [Notifications](#notifications) |
 | [Popup](#popup) |
 | [Switch](#switch) |
@@ -89,16 +88,19 @@ Variants are different stylistic versions of same component, But they have same
 
 #### Disabled State
 
-These can disabled adding `disable` attribute. That makes them look in-active but they still will receive events. ***Thats why it's important to only use it's custom event to listen for click event*** more on that further. 
+These can disabled adding `disabled="true` attribute. That makes them look in-active but they still will receive events. ***Thats why it's important to only use it's custom event to listen for click event*** more on that further. 
 ```html
-<sm-button disable>Disabled</sm-button>
+<sm-button disabled="true">Disabled</sm-button>
 ```
 #### Custom Events
 
-1. `clicked` is a custom event specified for `sm-button` that listens to button being clicked like normal `click` event. The main difference being `click` event will fire even if `disable` is set as sm-button doesn't stop actual component from receiving pointer events. The reason being it has another event to handle disabled state.  
+1. `clicked` is a custom event specified for `sm-button` that listens to button being clicked like normal `click` event. The main difference being `click` event will fire even if `disabled="true"` is set as sm-button doesn't stop actual component from receiving pointer events. The reason being it has another event to handle disabled state.  
 
 2. `disabled` event fires when button is disabled and user tries to click on it. This event can be useful if you want to validate a form but user clicked submit before all data so you show message according to situation.
 
+#### Is it ***Responsive***?
+
+No, As by default this is an inline element that means it won't strech accross whole horizontal space. But this behaviour can be changed that by following css.
 ```css
 sm-button{
   width: 100%;
@@ -166,22 +168,22 @@ This has two custom attributes `checked` and `disabled`.
 1. Checked
 ```html
 <!--To set checkbox as checked-->
-<sm-checkbox checked></sm-checkbox>
+<sm-checkbox checked="true"></sm-checkbox>
 ```
 2. disabled
 ```html
 <!-- To set disabled -->
-<sm-checkbox disable></sm-checkbox>
+<sm-checkbox disabled="true"></sm-checkbox>
 ```
 
 #### Disabled State
 
-This component can disabled adding `disable` attribute.
+This component can disabled adding `disabled="true` attribute.
 
 You can also have option to use both of these attributes at the same time.
 ```html
 <!-- Setting checkbox true while it's disabled -->
-<sm-checkbox disable checked></sm-checkbox>
+<sm-checkbox disabled="true" checked="true"></sm-checkbox>
 ```
 
 #### Supported Events
@@ -205,7 +207,7 @@ let myCheckbox = document.getElementById('my_checkbox');
 ```
 ##### To set checked 
 ```js
-checkbox.checked = true
+checkbox.checked="true"
 //or
 myCheckbox.setAttribute('checked', 'true')
 ```
@@ -213,9 +215,9 @@ Replace `"true"` with `"false"` to un-tick checkbox
 
 ##### To set disabled
 ```js
-myCheckbox.disabled = true
+myCheckbox.disabled="true"
 //or
-myCheckbox.setAttribute('disable', '')
+myCheckbox.setAttribute('disabled', 'true')
 ```
 
 ### Input
@@ -243,7 +245,9 @@ By default placeholder will disappear when input field has some value.
 
 All events supported by traditional input.
 
+#### Is it ***Responsive***?
 
+No, As by default this is an inline element that means it won't strech accross whole horizontal space. But this behaviour can be changed that by following css.
 ```css
 sm-input{
   width: 100%;
@@ -274,32 +278,6 @@ console.log(myInput.value)
 console.log(myInput.isValid)
 ```
 
-### Menu
-[See Demo](https://sairaj-mote.github.io/components/)
-
-```html
-<sm-menu></sm-menu>
-```
-You can add options using `<sm-menu-option></sm-menu-option>` instead of `<option>`. 
-
-#### Syntax 
-```html
-<sm-menu id="my_menu">
-    <sm-menu-option>first option</sm-menu-option>
-    <sm-menu-option>second option</sm-menu-option>
-    <sm-menu-option>third option</sm-menu-option>
-</sm-menu>
-```
-
-#### Is it ***Responsive***?
-
-No, As by default this is an inline element that means it won't strech accross whole horizontal space.
-
-#### Accessibility
-
-This component supports keyboard interactivity like ***Enter*** or ***Spacebar*** to expand/collapse options. ***Arrow keys*** can be used to navigate between options.
-Also can be accessed using ***Tab***. 
-
 ### Notifications
 [See Demo](https://sairaj-mote.github.io/components/)
 
@@ -427,12 +405,12 @@ This has two custom attributes `checked` and `disabled`.
 1. Checked
 ```html
 <!--To set switch as checked or on -->
-<sm-switch checked></sm-switch>
+<sm-switch checked="true"></sm-switch>
 ```
 2. disabled
 ```html
 <!--To set switch as disabled  -->
-<sm-switch disabled></sm-switch>
+<sm-switch disabled="true"></sm-switch>
 ```
 
 #### Disabled State
@@ -442,7 +420,7 @@ This component can disabled adding `disabled="true` attribute.
 You can also have option to use both of these attributes at the same time.
 ```html
 <!-- Setting switch checked true while it's disabled -->
-<sm-checkbox disable checked></sm-checkbox>
+<sm-checkbox disabled="true" checked="true"></sm-checkbox>
 ```
 
 #### Supported Events
@@ -466,17 +444,19 @@ let mySwitch = document.getElementById('mySwitch');
 ```
 ##### To set checked 
 ```js
-mySwitch.checked = true
+mySwitch.checked="true"
 //or
-mySwitch.setAttribute('checked', '')
+mySwitch.setAttribute('checked', 'true')
 ```
+Replace `"true"` with `"false"` to turn switch off.
 
 ##### To set disabled
 ```js
-mySwitch.disabled = true
+mySwitch.disabled="true"
 //or
-mySwitch.setAttribute('disable', '')
+mySwitch.setAttribute('disabled', 'true')
 ```
+Replace `"true"` with `"false"` to enable switch.
 
 ### Select
 [See Demo](https://sairaj-mote.github.io/components/)
@@ -501,6 +481,9 @@ You can specify `sm-option` value using `value=""` attribute in option markup.
 
 This supports `change` event that fires when new value is selected from dropdown.
 
+#### Is it ***Responsive***?
+
+No, As by default this is an inline element that means it won't strech accross whole horizontal space. But this behaviour can be changed that by following css.
 ```css
 sm-select{
   width: 100%;
@@ -577,7 +560,15 @@ This component supports keyboard interactivity like ***Enter*** or ***Spacebar**
 Notice how every `sm-tab` is folloed by `sm-option`, This is default structure or syntax for using `sm-tabs`. ***If you didn't add a panel after a tab, the component won't work.***
 Another key part is `sm-tab` should have `slot="tab"` as attribute and `slot="panel"` for `sm-panel`. As this component uses HTML5 ***[<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot)*** tag to organize user added data. For more information, please refer to this [MDN article](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots).
 
+#### Custom Attributes
 
+1. enable-flick
+```html
+<!--To enable flick gesture to change panel in view -->
+<sm-tabs enable-flick="true">
+//Tabs body
+</sm-tabs>
+```
 #### Variants
 Variants are different stylistic versions of same component, But they have same functions.
 
@@ -590,6 +581,9 @@ Setting this variant will change default sliding indicator to a block for provid
 </sm-tabs>
 ```
 
+#### Is it ***Responsive***?
+
+Yes, it will adjust according to screen size and input interrfaces like mouse, touch. 
 
 #### Interactions
 
@@ -598,3 +592,4 @@ This supports touch gesture flick to change visible panels if enabled with `enab
 #### Accessibility
 
 This component supports keyboard interactivity like ***Enter*** or ***Spacebar*** to select an option. Also can be accessed using ***Tab***. 
+
diff --git a/Standard UI Components/_config.yml b/Standard UI Components/_config.yml
new file mode 100644
index 0000000..405c432
--- /dev/null
+++ b/Standard UI Components/_config.yml	
@@ -0,0 +1,5 @@
+theme: jekyll-theme-minimal
+highlighter: rouge
+markdown: kramdown
+kramdown:
+  input: GFM
diff --git a/Standard UI Components/components.js b/Standard UI Components/components.js
index 1008673..2cac250 100644
--- a/Standard UI Components/components.js	
+++ b/Standard UI Components/components.js	
@@ -1,3 +1,4 @@
+/*jshint esversion: 6 */
 //Button
 const smButton = document.createElement('template')
 smButton.innerHTML = `
@@ -16,12 +17,15 @@ smButton.innerHTML = `
     --border-radius: 0.3rem;
     --background: rgba(var(--text-color), 0.1);
 }
-:host([disable]) .button{
+:host([disabled]) .button{
     cursor: not-allowed;
     opacity: 0.6;
     background: rgba(var(--text-color), 0.3) !important;
     color: rgba(var(--foreground-color), 0.6);
 }
+:host([disabled][variant="primary"]) .button{
+    color: rgba(var(--text-color), 1);
+}
 :host([variant='primary']) .button{
     background: var(--accent-color);
     color: rgba(var(--foreground-color), 1);
@@ -63,7 +67,6 @@ smButton.innerHTML = `
     -o-transition: box-shadow 0.3s;
     transition: box-shadow 0.3s;
     transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
-    text-transform: capitalize;
     font-family: inherit;
     font-size: 0.9rem;
     font-weight: 500;
@@ -73,8 +76,9 @@ smButton.innerHTML = `
     overflow: hidden;
     border: none;
     color: inherit;
+    align-items: center;
 }
-:host(:not([disable])) .button:focus-visible{
+:host(:not([disabled])) .button:focus-visible{
     -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);
             box-shadow: 0 0 0 0.1rem var(--accent-color);
 }
@@ -83,7 +87,7 @@ smButton.innerHTML = `
             box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0 0 0.1rem var(--accent-color);
 }
 @media (hover: hover){
-    :host(:not([disable])) .button:hover{
+    :host(:not([disabled])) .button:hover{
         -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);
                 box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);
     }
@@ -93,7 +97,7 @@ smButton.innerHTML = `
     }
 }
 @media (hover: none){
-    :host(:not([disable])) .button:active{
+    :host(:not([disabled])) .button:active{
         -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
                 box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
     }
@@ -122,17 +126,17 @@ customElements.define('sm-button',
         set disabled(value) {
             if (value && !this.isDisabled) {
                 this.isDisabled = true
-                this.setAttribute('disable', '')
+                this.setAttribute('disabled', '')
                 this.button.removeAttribute('tabindex')
             } else if (!value && this.isDisabled) {
                 this.isDisabled = false
-                this.removeAttribute('disable')
+                this.removeAttribute('disabled')
             }
         }
 
         dispatch() {
             if (this.isDisabled) {
-                this.dispatchEvent(new CustomEvent('disable', {
+                this.dispatchEvent(new CustomEvent('disabled', {
                     bubbles: true,
                     composed: true
                 }))
@@ -147,7 +151,7 @@ customElements.define('sm-button',
         connectedCallback() {
             this.isDisabled = false
             this.button = this.shadowRoot.querySelector('.button')
-            if (this.hasAttribute('disable') && !this.isDisabled)
+            if (this.hasAttribute('disabled') && !this.isDisabled)
                 this.isDisabled = true
             this.addEventListener('click', (e) => {
                 this.dispatch()
@@ -195,7 +199,9 @@ border: none;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
+    --width: 100%;
     --font-size: 1rem;
+    --icon-gap: 0.5rem;
     --border-radius: 0.3rem;
     --padding: 0.7rem 1rem;
     --background: rgba(var(--text-color), 0.06);
@@ -230,7 +236,7 @@ border: none;
         -ms-flex-align: center;
             align-items: center;
     position: relative;
-    gap: 0.5rem;
+    gap: var(--icon-gap);
     padding: var(--padding);
     border-radius: var(--border-radius);
     -webkit-transition: opacity 0.3s;
@@ -280,7 +286,7 @@ border: none;
 }
 .outer-container{
     position: relative;
-    width: 100%;
+    width: var(--width);
 }
 .container{
     width: 100%;
@@ -366,25 +372,31 @@ input{
 customElements.define('sm-input',
     class extends HTMLElement {
 
-        static formAssociated = true;
-        
         constructor() {
             super()
             this.attachShadow({
                 mode: 'open'
             }).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.validationFunction
+            this.observeList = ['type', 'required', 'disabled', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step']
         }
 
         static get observedAttributes() {
-            return ['placeholder']
+            return ['placeholder', 'type', 'required', 'disabled', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step']
         }
 
         get value() {
-            return this.shadowRoot.querySelector('input').value
+            return this.input.value
         }
 
         set value(val) {
-            this.shadowRoot.querySelector('input').value = val;
+            this.input.value = val;
             this.checkInput()
             this.fireEvent()
         }
@@ -401,29 +413,42 @@ customElements.define('sm-input',
             return this.getAttribute('type')
         }
 
+        set type(val) {
+            this.setAttribute('type', val)
+        }
+
         get isValid() {
-            return this.shadowRoot.querySelector('input').checkValidity()
+            if (this.hasAttribute('data-flo-id') || this.hasAttribute('data-private-key')) {
+                return this.validationFunction(this.input.value)
+            }
+            else {
+                return this.input.checkValidity()
+            }
         }
 
         get validity() {
-            return this.shadowRoot.querySelector('input').validity
+            return this.input.validity
         }
 
         set disabled(value) {
             if (value)
-                this.shadowRoot.querySelector('.input').classList.add('disabled')
+                this.inputParent.classList.add('disabled')
             else
-                this.shadowRoot.querySelector('.input').classList.remove('disabled')
+                this.inputParent.classList.remove('disabled')
         }
         set readOnly(value) {
             if (value) {
-                this.shadowRoot.querySelector('input').setAttribute('readonly', '')
-                this.shadowRoot.querySelector('.input').classList.add('readonly')
+                this.setAttribute('readonly', '')
             } else {
-                this.shadowRoot.querySelector('input').removeAttribute('readonly')
-                this.shadowRoot.querySelector('.input').classList.remove('readonly')
+                this.removeAttribute('readonly')
             }
         }
+        set customValidation(val) {
+            this.validationFunction = val
+        }
+        reset = () => {
+            this.value = ''
+        }
 
         setValidity = (message) => {
             this.feedbackText.textContent = message
@@ -432,7 +457,7 @@ customElements.define('sm-input',
         showValidity = () => {
             this.feedbackText.classList.remove('hide-completely')
         }
-        
+
         hideValidity = () => {
             this.feedbackText.classList.add('hide-completely')
         }
@@ -455,7 +480,7 @@ customElements.define('sm-input',
         }
 
         checkInput = (e) => {
-            if (!this.readonly) {                
+            if (!this.hasAttribute('readonly')) {
                 if (this.input.value !== '') {
                     this.clearBtn.classList.remove('hide')
                 } else {
@@ -478,83 +503,58 @@ customElements.define('sm-input',
 
 
         connectedCallback() {
-            this.inputParent = this.shadowRoot.querySelector('.input')
-            this.clearBtn = this.shadowRoot.querySelector('.clear')
-            this.label = this.shadowRoot.querySelector('.label')
-            this.feedbackText = this.shadowRoot.querySelector('.feedback-text')
-            this.valueChanged = false;
-            this.readonly = false
-            this.isNumeric = false
-            this.min
-            this.max
             this.animate = this.hasAttribute('animate')
-            this.input = this.shadowRoot.querySelector('input')
-            this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder')
             if (this.hasAttribute('value')) {
                 this.input.value = this.getAttribute('value')
                 this.checkInput()
             }
-            if (this.hasAttribute('required')) {
-                this.input.setAttribute('required', '')
-            }
-            if (this.hasAttribute('min')) {
-                let minValue = this.getAttribute('min')
-                this.input.setAttribute('min', minValue)
-                this.min = parseInt(minValue)
-            }
-            if (this.hasAttribute('max')) {
-                let maxValue = this.getAttribute('max')
-                this.input.setAttribute('max', maxValue)
-                this.max = parseInt(maxValue)
-            }
-            if (this.hasAttribute('minlength')) {
-                const minValue = this.getAttribute('minlength')
-                this.input.setAttribute('minlength', minValue)
-            }
-            if (this.hasAttribute('maxlength')) {
-                const maxValue = this.getAttribute('maxlength')
-                this.input.setAttribute('maxlength', maxValue)
-            }
-            if (this.hasAttribute('step')) {
-                const steps = this.getAttribute('step')
-                this.input.setAttribute('step', steps)
-            }
-            if (this.hasAttribute('pattern')) {
-                this.input.setAttribute('pattern', this.getAttribute('pattern'))
-            }
-            if (this.hasAttribute('readonly')) {
-                this.input.setAttribute('readonly', '')
-                this.readonly = true
-            }
-            if (this.hasAttribute('disabled')) {
-                this.inputParent.classList.add('disabled')
-            }
             if (this.hasAttribute('error-text')) {
                 this.feedbackText.textContent = this.getAttribute('error-text')
             }
-            if (this.hasAttribute('type')) {
-                if (this.getAttribute('type') === 'number') {
-                    this.input.setAttribute('inputmode', 'numeric')
-                    this.input.setAttribute('type', 'number')
-                    this.isNumeric = true
-                } else
-                    this.input.setAttribute('type', this.getAttribute('type'))
-            } else
-                this.input.setAttribute('type', 'text')
+            if (!this.hasAttribute('type')) {
+                this.setAttribute('type', 'text')
+            }
+
             this.input.addEventListener('input', e => {
                 this.checkInput(e)
             })
-            this.clearBtn.addEventListener('click', e => {
-                this.value = ''
-            })
+            this.clearBtn.addEventListener('click', this.reset)
         }
 
         attributeChangedCallback(name, oldValue, newValue) {
             if (oldValue !== newValue) {
+                if (this.observeList.includes(name)) {
+                    if (this.hasAttribute(name)) {
+                        this.input.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : '')
+                    }
+                    else {
+                        this.input.removeAttribute(name)
+                    }
+                }
                 if (name === 'placeholder') {
-                    this.shadowRoot.querySelector('.label').textContent = newValue;
+                    this.label.textContent = newValue;
                     this.setAttribute('aria-label', newValue);
                 }
+                else if (name === 'type') {
+                    if (this.hasAttribute('type') && this.getAttribute('type') === 'number') {
+                        this.input.setAttribute('inputmode', 'numeric')
+                    }
+                }
+                else if (name === 'readonly') {
+                    if (this.hasAttribute('readonly')) {
+                        this.inputParent.classList.add('readonly')
+                    } else {
+                        this.inputParent.classList.remove('readonly')
+                    }
+                }
+                else if (name === 'disabled') {
+                    if (this.hasAttribute('disabled')) {
+                        this.inputParent.classList.add('disabled')
+                    }
+                    else {
+                        this.inputParent.classList.remove('disabled')
+                    }
+                }
             }
         }
     })
@@ -579,7 +579,7 @@ smTextarea.innerHTML = `
 }
 :host{
     display: grid;
-    --border-radius: 0.3s;
+    --border-radius: 0.3rem;
     --background: rgba(var(--text-color), 0.06);
     --padding-right: initial;
     --padding-left: initial;
@@ -649,6 +649,20 @@ textarea{
     pointer-events: none;
     user-select: none;
 }
+@media (any-hover: hover){
+    ::-webkit-scrollbar{
+        width: 0.5rem;
+        height: 0.5rem;
+    }
+    
+    ::-webkit-scrollbar-thumb{
+        background: rgba(var(--text-color), 0.3);
+        border-radius: 1rem;
+        &:hover{
+            background: rgba(var(--text-color), 0.5);
+        }
+    }
+}
 </style>
 <label class="textarea" part="textarea">
     <span class="placeholder"></span>
@@ -662,21 +676,32 @@ customElements.define('sm-textarea',
             this.attachShadow({
                 mode: 'open'
             }).append(smTextarea.content.cloneNode(true))
+
             this.textarea = this.shadowRoot.querySelector('textarea')
+            this.textareaBox = this.shadowRoot.querySelector('.textarea')
+            this.placeholder = this.shadowRoot.querySelector('.placeholder')
+            this.observeList = ['required', 'readonly', 'rows', 'minlength', 'maxlength']
+        }
+        static get observedAttributes() {
+            return ['value', 'placeholder', 'required', 'readonly', 'rows', 'minlength', 'maxlength']
         }
         get value() {
             return this.textarea.value
         }
         set value(val) {
-            this.textarea.value = val;
-            this.textareaBox.dataset.value = val
-            this.checkInput()
+            this.setAttribute('value', val)
             this.fireEvent()
         }
+        get isValid() {
+            return this.textarea.checkValidity()
+        }
+        reset = () => {
+            this.setAttribute('value', '')
+        }
         focusIn = () => {
             this.textarea.focus()
         }
-        fireEvent() {
+        fireEvent = () => {
             let event = new Event('input', {
                 bubbles: true,
                 cancelable: true,
@@ -694,97 +719,31 @@ customElements.define('sm-textarea',
             }
         }
         connectedCallback() {
-            this.textareaBox = this.shadowRoot.querySelector('.textarea')
-            this.placeholder = this.shadowRoot.querySelector('.placeholder')
-
-            if(this.hasAttribute('placeholder'))
-                this.placeholder.textContent = this.getAttribute('placeholder')
-
-            if (this.hasAttribute('value')) {
-                this.textarea.value = this.getAttribute('value')
-                this.checkInput()
-            }
-            if (this.hasAttribute('required')) {
-                this.textarea.setAttribute('required', '')
-            }
-            if (this.hasAttribute('readonly')) {
-                this.textarea.setAttribute('readonly', '')
-            }
-            if (this.hasAttribute('rows')) {
-                this.textarea.setAttribute('rows', this.getAttribute('rows'))
-            }
             this.textarea.addEventListener('input', e => {
                 this.textareaBox.dataset.value = this.textarea.value
                 this.checkInput()
             })
         }
+        attributeChangedCallback(name, oldValue, newValue) {
+            if (this.observeList.includes(name)) {
+                if (this.hasAttribute(name)) {
+                    this.textarea.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : '')
+                }
+                else {
+                    this.input.removeAttribute(name)
+                }
+            }
+            else if (name === 'placeholder') {
+                this.placeholder.textContent = this.getAttribute('placeholder')
+            }
+            else if (name === 'value') {
+                this.textarea.value = newValue;
+                this.textareaBox.dataset.value = newValue
+                this.checkInput()
+            }
+        }
     })
 
-// tab
-const smTab = document.createElement('template')
-smTab.innerHTML = `
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-        -webkit-box-sizing: border-box;
-                box-sizing: border-box;
-    } 
-    :host{
-        position: relative;
-        display: -webkit-inline-box;
-        display: -ms-inline-flexbox;
-        display: inline-flex;
-        z-index: 1;
-    }
-    .tab{
-        position: relative;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-            -ms-user-select: none;
-                user-select: none;
-        -webkit-box-pack: center;
-            -ms-flex-pack: center;
-                justify-content: center;
-        cursor: pointer;
-        -webkit-tap-highlight-color: transparent;
-        white-space: nowrap;
-        padding: 0.4rem 0.8rem;
-        font-weight: 500;
-        word-spacing: 0.1rem;
-        text-align: center;
-        -webkit-transition: color 0.3s;
-        -o-transition: color 0.3s;
-        transition: color 0.3s;
-        text-transform: capitalize;
-        height: 100%;
-    }
-    @media (hover: hover){
-        :host(.active) .tab{
-            opacity: 1;
-        }
-        .tab{
-            opacity: 0.7
-        }
-        .tab:hover{
-            opacity: 1
-        }
-    }
-</style>
-<div part="tab" class="tab">
-<slot></slot>
-</div>
-`;
-
-customElements.define('sm-tab', class extends HTMLElement {
-    constructor() {
-        super()
-        this.shadow = this.attachShadow({
-            mode: 'open'
-        }).append(smTab.content.cloneNode(true))
-    }
-})
-
 //chcekbox
 
 const smCheckbox = document.createElement('template')
@@ -805,6 +764,10 @@ smCheckbox.innerHTML = `
         --border-radius: 0.2rem;
         --border-color: rgba(var(--text-color), 0.7);
     }
+    :host([disabled]) {
+        opacity: 0.6;
+        pointer-events: none;
+    }
     .checkbox {
         position: relative;
         display:-webkit-box;
@@ -864,10 +827,6 @@ smCheckbox.innerHTML = `
         transition: background 0.3s;
         border-radius: var(--border-radius);
     }
-    .disabled {
-        opacity: 0.6;
-        pointer-events: none;
-    }
 </style>
 <label class="checkbox" tabindex="0">
     <input type="checkbox">
@@ -896,11 +855,15 @@ customElements.define('sm-checkbox', class extends HTMLElement {
     }
 
     get disabled() {
-        return this.getAttribute('disabled')
+        return this.isDisabled
     }
 
     set disabled(val) {
-        this.setAttribute('disabled', val)
+        if (val) {
+            this.setAttribute('disabled', '')
+        } else {
+            this.removeAttribute('disabled')
+        }
     }
 
     get checked() {
@@ -961,10 +924,8 @@ customElements.define('sm-checkbox', class extends HTMLElement {
         if (oldValue !== newValue) {
             if (name === 'disabled') {
                 if (newValue === 'true') {
-                    this.checkbox.classList.add('disabled')
                     this.isDisabled = true
                 } else {
-                    this.checkbox.classList.remove('disabled')
                     this.isDisabled = false
                 }
             }
@@ -1016,10 +977,15 @@ smSwitch.innerHTML = `
         cursor: pointer;
         -webkit-tap-highlight-color: transparent;
     }
-    :host(:not([disable])) label:focus-visible{
+    :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;
+        pointer-events: none;
+    }
     .switch {
         position: relative;
         display: -webkit-box;
@@ -1111,10 +1077,6 @@ smSwitch.innerHTML = `
     input:checked ~ .track {
         background: var(--accent-color);
     }
-    .disabled {
-        opacity: 0.6;
-        pointer-events: none;
-    }
 </style>
 <label tabindex="0">
     <slot name="left"></slot>
@@ -1123,6 +1085,7 @@ smSwitch.innerHTML = `
         <div class="track"></div>
         <div class="button"></div>
     </div>
+    <slot name="right"></slot>
 </label>`
 
 customElements.define('sm-switch', class extends HTMLElement {
@@ -1137,20 +1100,19 @@ customElements.define('sm-switch', class extends HTMLElement {
         this.isDisabled = false
     }
 
+    static get observedAttributes() {
+        return ['disabled', 'checked']
+    }
+
     get disabled() {
-        return this.getAttribute('disabled')
+        return this.isDisabled
     }
 
     set disabled(val) {
         if (val) {
-            this.disabled = true
             this.setAttribute('disabled', '')
-            this.switch.classList.add('disabled')
         } else {
-            this.disabled = false
             this.removeAttribute('disabled')
-            this.switch.classList.remove('disabled')
-
         }
     }
 
@@ -1161,27 +1123,22 @@ customElements.define('sm-switch', class extends HTMLElement {
     set checked(value) {
         if (value) {
             this.setAttribute('checked', '')
-            this.isChecked = true
-            this.input.checked = true
         } else {
             this.removeAttribute('checked')
-            this.isChecked = false
-            this.input.checked = false
         }
     }
 
     dispatch = () => {
         this.dispatchEvent(new CustomEvent('change', {
             bubbles: true,
-            composed: true
+            composed: true,
+            detail: {
+                value: this.isChecked 
+            }
         }))
     }
 
     connectedCallback() {
-        if (this.hasAttribute('disabled'))
-            this.switch.classList.add('disabled')
-        if (this.hasAttribute('checked'))
-            this.input.checked = true
         this.addEventListener('keyup', e => {
             if ((e.code === "Enter" || e.code === "Space") && !this.isDisabled) {
                 this.input.click()
@@ -1195,6 +1152,29 @@ customElements.define('sm-switch', class extends HTMLElement {
             this.dispatch()
         })
     }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            if (name === 'disabled') {
+                if (this.hasAttribute('disabled')) {
+                    this.disabled = true                
+                }
+                else {
+                    this.disabled = false                
+                }
+            }
+            else if (name === 'checked') {
+                if (this.hasAttribute('checked')) {
+                    this.isChecked = true
+                    this.input.checked = true            
+                }
+                else {
+                    this.isChecked = false
+                    this.input.checked = false               
+                } 
+            }
+        }
+    }
+
 })
 
 // select
@@ -1221,10 +1201,11 @@ smSelect.innerHTML = `
     display: -webkit-inline-box;
     display: -ms-inline-flexbox;
     display: inline-flex;
+    --max-height: auto;
+    --min-width: 100%;
 }
 .hide{
-    opacity: 0;
-    pointer-events: none;
+    display: none !important;
 }
 .select{
     position: relative;
@@ -1240,6 +1221,7 @@ smSelect.innerHTML = `
     -webkit-tap-highlight-color: transparent;
 }
 .option-text{
+    font-size: 0.9rem;
     overflow: hidden;
     -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
@@ -1286,11 +1268,9 @@ smSelect.innerHTML = `
     -webkit-box-direction: normal;
         -ms-flex-direction: column;
             flex-direction: column;
-    min-width: 100%;
+    min-width: var(--min-width);
+    max-height: var(--max-height);
     background: rgba(var(--foreground-color), 1);
-    -webkit-transition: opacity 0.3s, top 0.3s;
-    -o-transition: opacity 0.3s, top 0.3s;
-    transition: opacity 0.3s, top 0.3s;
     border: solid 1px rgba(var(--text-color), 0.2);
     border-radius: 0.3rem;
     z-index: 2;
@@ -1302,6 +1282,20 @@ smSelect.innerHTML = `
         -ms-transform: rotate(180deg);
             transform: rotate(180deg)
 }
+@media (any-hover: hover){
+    ::-webkit-scrollbar{
+        width: 0.5rem;
+        height: 0.5rem;
+    }
+    
+    ::-webkit-scrollbar-thumb{
+        background: rgba(var(--text-color), 0.3);
+        border-radius: 1rem;
+        &:hover{
+            background: rgba(var(--text-color), 0.5);
+        }
+    }
+}
 </style>
 <div class="select" >
     <div class="selection" tabindex="0">
@@ -1331,11 +1325,17 @@ customElements.define('sm-select', class extends HTMLElement {
         this.setAttribute('value', val)
     }
 
+    reset = () => {
+
+    }
+
     collapse() {
-        this.optionList.animate(this.slideUp, this.animationOptions)
-        this.optionList.classList.add('hide')
         this.chevron.classList.remove('rotate')
-        this.open = false
+        this.optionList.animate(this.slideUp, this.animationOptions)
+        .onfinish = () => {
+            this.optionList.classList.add('hide')
+            this.open = false
+        }
     }
     connectedCallback() {
         this.availableOptions
@@ -1346,24 +1346,28 @@ customElements.define('sm-select', class extends HTMLElement {
             previousOption
         this.open = false;
         this.slideDown = [{
-                    transform: `translateY(-0.5rem)`
-                },
-                {
-                    transform: `translateY(0)`
-                }
-            ],
-            this.slideUp = [{
-                    transform: `translateY(0)`
-                },
-                {
-                    transform: `translateY(-0.5rem)`
-                }
-            ],
-            this.animationOptions = {
-                duration: 300,
-                fill: "forwards",
-                easing: 'ease'
+                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'
+        }
         selection.addEventListener('click', e => {
             if (!this.open) {
                 this.optionList.classList.remove('hide')
@@ -1560,332 +1564,321 @@ customElements.define('sm-option', class extends HTMLElement {
     }
 })
 
-// select
-const smStripSelect = document.createElement('template')
-smStripSelect.innerHTML = `
-<style>     
-*{
-    padding: 0;
-    margin: 0;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-}    
-:host{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-}
-.icon {
-    position: absolute;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    fill: none;
-    height: 2.6rem;
-    width: 2.6rem;
-    padding: 0.9rem;
-    stroke: rgba(var(--text-color), 0.7);
-    stroke-width: 10;
-    overflow: visible;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-    cursor: pointer;
-    min-width: 0;
-    z-index: 1;
-    background: rgba(var(--foreground-color), 1);
-    -webkit-tap-highlight-color: transparent;
-    -webkit-transition: opacity 0.3s;
-    -o-transition: opacity 0.3s;
-    transition: opacity 0.3s; 
-}
-.hide{
-    pointer-events: none;
-    opacity: 0;
-}
-.select-container{
-    position: relative;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    width: 100%;
-    -webkit-box-align: center;
-        -ms-flex-align: center;
-            align-items: center;
-}
-.select{
-    position: relative;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    gap: 0.5rem;
-    max-width: 100%;
-    overflow: auto hidden;
-}
-.previous-item{
-    left: 0;
-}
-.next-item{
-    right: 0;
-}
-.left,.right{
-    position: absolute;
-    width: 1rem;
-    height: 100%; 
-    -webkit-transition: opacity 0.3s; 
-    -o-transition: opacity 0.3s; 
-    transition: opacity 0.3s;
-    z-index: 1;
-}
-.left{
-    background: -webkit-gradient(linear, right top, left top, from(transparent), to(rgba(var(--foreground-color), 1)));
-    background: -o-linear-gradient(right, transparent, rgba(var(--foreground-color), 1));
-    background: linear-gradient(to left, transparent, rgba(var(--foreground-color), 1))
-}
-.right{
-    right: 0;
-    background: -webkit-gradient(linear, left top, right top, from(transparent), to(rgba(var(--foreground-color), 1)));
-    background: -o-linear-gradient(left, transparent, rgba(var(--foreground-color), 1));
-    background: linear-gradient(to right, transparent, rgba(var(--foreground-color), 1))
-}
-slot::slotted(.active){
-    border-radius: 2rem;
-    opacity: 1;
-    background-color: rgba(var(--text-color), .6);  
-    color: rgba(var(--foreground-color), 1);
-}
-@media (hover: none){
-    ::-webkit-scrollbar-track {
-        -webkit-box-shadow: none !important;
-        background-color: transparent !important;
+// strip select
+const stripSelect = document.createElement('template')
+stripSelect.innerHTML = `
+<style>
+    *{
+        padding: 0;
+        margin: 0;
+        -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+    }  
+    :host{
+        --gap: 0.5rem;
     }
-    ::-webkit-scrollbar {
-        height: 0;
-        background-color: transparent;
+    .hide{
+        display: none !important;
+    }
+    input[type="radio"]{
+        display: none;
+    }
+    .scrolling-container{
+        position: relative;
+        display: flex;
+        align-items: center;
+        padding: 1rem 0;
+    }
+    .strip-select{
+        display: grid;
+        grid-auto-flow: column;
+        gap: var(--gap);
+        position: relative;
+        max-width: 100%;   
+        align-items: center;
+        overflow: auto hidden;
+    }
+    .nav-button{
+        display: flex;
+        top: 50%;
+        z-index: 2;
+        border: none;
+        padding: 0.3rem;
+        cursor: pointer;
+        position: absolute;
+        align-items: center;
+        background: var(--background-color);
+        transform: translateY(-50%);
+    }
+    .nav-button--right{
+        right: 0;
+    }
+    .cover{
+        position: absolute;
+        z-index: 1;
+        width: 5rem;
+        height: 100%;
+        pointer-events: none;
+    }
+    .cover--left{
+        background: linear-gradient(90deg, var(--background-color) 60%, transparent);
+    }
+    .cover--right{
+        right: 0;
+        background: linear-gradient(90deg, transparent 0%, var(--background-color) 40%);
+    }
+    .nav-button--right::before{
+        background-color: red;
     }
     .icon{
-        display: none;
+        height: 1.5rem;
+        width: 1.5rem;
+        fill: rgba(var(--text-color), .8);
     }
-    .left,.right{
-        display: block;
+    @media (hover: none){
+        ::-webkit-scrollbar-track {
+            background-color: transparent !important;
+        }
+        ::-webkit-scrollbar {
+            height: 0;
+            background-color: transparent;
+        }
+        .nav-button{
+            display: none;
+        }
+        .strip-select{
+            overflow: auto hidden;
+        }
+        .cover{
+            width: 2rem;
+        }
     }
-}
-@media (hover: hover){
-    .select{
-        overflow: hidden;
+    @media (hover: hover){
+        .strip-select{
+            overflow: hidden;
+        }
     }
-    .left,.right{
-        display: none;
-    }
-}
 </style>
-<div class="select-container">
-    <div class="left hide"></div>
-    <svg class="icon previous-item hide" viewBox="4 0 64 64">
-        <title>Previous</title>
-        <polyline points="48.01 0.35 16.35 32 48.01 63.65"/>
-    </svg>
-    <div class="select">
-        <slot></slot> 
-    </div>
-    <svg class="icon next-item hide" viewBox="-6 0 64 64">
-        <title>Next</title>
-        <polyline points="15.99 0.35 47.65 32 15.99 63.65"/>
-    </svg>
-    <div class="right hide"></div>
-</div>`;
-customElements.define('sm-strip-select', class extends HTMLElement {
+<section class="scrolling-container">
+    <div class="cover cover--left hide"></div>
+    <button class="nav-button nav-button--left hide">
+        <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>
+    </button>
+    <section class="strip-select">
+        <slot></slot>
+    </section>
+    <button class="nav-button nav-button--right hide">
+        <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>
+    </button>
+    <div class="cover cover--right hide"></div>
+</section>
+
+`
+customElements.define('strip-select', class extends HTMLElement{
     constructor() {
         super()
         this.attachShadow({
             mode: 'open'
-        }).append(smStripSelect.content.cloneNode(true))
-    }
-    static get observedAttributes() {
-        return ['value']
+        }).append(stripSelect.content.cloneNode(true))
+        this.stripSelect = this.shadowRoot.querySelector('.strip-select')
+        this.slottedOptions
+        this._value
+        this.scrollDistance
     }
     get value() {
-        return this.getAttribute('value')
-    }
-    set value(val) {
-        this.setAttribute('value', val)
+        return this._value
     }
     scrollLeft = () => {
-        this.select.scrollBy({
-            top: 0,
+        this.stripSelect.scrollBy({
             left: -this.scrollDistance,
             behavior: 'smooth'
         })
     }
 
     scrollRight = () => {
-        this.select.scrollBy({
-            top: 0,
+        this.stripSelect.scrollBy({
             left: this.scrollDistance,
             behavior: 'smooth'
         })
     }
-    connectedCallback() {
-        let previousOption,
-            slot = this.shadowRoot.querySelector('slot');
-        this.selectContainer = this.shadowRoot.querySelector('.select-container')
-        this.select = this.shadowRoot.querySelector('.select')
-        this.nextArrow = this.shadowRoot.querySelector('.next-item')
-        this.previousArrow = this.shadowRoot.querySelector('.previous-item')
-        this.nextGradient = this.shadowRoot.querySelector('.right')
-        this.previousGradient = this.shadowRoot.querySelector('.left')
-        this.selectOptions
-        this.scrollDistance = this.selectContainer.getBoundingClientRect().width
-        const firstElementObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting) {
-                this.previousArrow.classList.add('hide')
-                this.previousGradient.classList.add('hide')
-            } else {
-                this.previousArrow.classList.remove('hide')
-                this.previousGradient.classList.remove('hide')
-            }
-        }, {
-            root: this.selectContainer,
-            threshold: 0.95
-        })
-        const lastElementObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting) {
-                this.nextArrow.classList.add('hide')
-                this.nextGradient.classList.add('hide')
-            } else {
-                this.nextArrow.classList.remove('hide')
-                this.nextGradient.classList.remove('hide')
-            }
-        }, {
-            root: this.selectContainer,
-            threshold: 0.95
-        })
-
-        const selectObserver = new IntersectionObserver(entries => {
-            if (entries[0].isIntersecting) {
-                this.scrollDistance = this.selectContainer.getBoundingClientRect().width
-            }
-        })
-
-        selectObserver.observe(this.selectContainer)
-        this.addEventListener('optionSelected', e => {
-            if (previousOption === e.target) return;
-            if (previousOption)
-                previousOption.classList.remove('active')
-            e.target.classList.add('active')
-            e.target.scrollIntoView({
-                behavior: 'smooth',
-                inline: 'center',
-                block: 'nearest'
-            })
-            this.setAttribute('value', e.detail.value)
-            this.dispatchEvent(new CustomEvent('change', {
+    fireEvent = () => {
+        this.dispatchEvent(
+            new CustomEvent("change", {
                 bubbles: true,
-                composed: true
-            }))
-            previousOption = e.target;
-        })
-        slot.addEventListener('slotchange', e => {
-            this.selectOptions = slot.assignedElements()
-            firstElementObserver.observe(this.selectOptions[0])
-            lastElementObserver.observe(this.selectOptions[this.selectOptions.length - 1])
-            if (this.selectOptions[0]) {
-                let firstElement = this.selectOptions[0];
-                this.setAttribute('value', firstElement.getAttribute('value'))
-                firstElement.classList.add('active')
-                previousOption = firstElement;
-            }
-        });
-        this.nextArrow.addEventListener('click', this.scrollRight)
-        this.previousArrow.addEventListener('click', this.scrollLeft)
+                composed: true,
+                detail: {
+                    value: this._value
+                }
+            })
+        )
     }
-
-    disconnectedCallback() {
-        this.nextArrow.removeEventListener('click', this.scrollRight)
-        this.previousArrow.removeEventListener('click', this.scrollLeft)
+    connectedCallback() {
+        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()
+            assignedElements.forEach(elem => {
+                if (elem.hasAttribute('selected')) {
+                    elem.setAttribute('active', '')
+                    this._value = elem.value
+                }
+            })
+            if (assignedElements.length > 0) {
+                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()
+            }
+        })
+        const resObs = new ResizeObserver(entries => {
+            entries.forEach(entry => {
+                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)
+        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()
+            }
+        })
+        const firstOptionObserver = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    navButtonLeft.classList.add('hide')
+                    coverLeft.classList.add('hide')
+                }
+                else {
+                    navButtonLeft.classList.remove('hide')
+                    coverLeft.classList.remove('hide')
+                }
+            })
+        },
+        {
+            threshold: 0.9,
+            root: this
+        })
+        const lastOptionObserver = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    navButtonRight.classList.add('hide')
+                    coverRight.classList.add('hide')
+                }
+                else {
+                    navButtonRight.classList.remove('hide')
+                    coverRight.classList.remove('hide')
+                }
+            })
+        },
+        {
+            threshold: 0.9,
+            root: this
+        })
+        navButtonLeft.addEventListener('click', this.scrollLeft)
+        navButtonRight.addEventListener('click', this.scrollRight)
     }
 })
 
-// option
-const smStripOption = document.createElement('template')
-smStripOption.innerHTML = `
-<style>     
-*{
-    padding: 0;
-    margin: 0;
-    -webkit-box-sizing: border-box;
-            box-sizing: border-box;
-}     
-:host{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-}
-.option{
-    padding: 0.4rem 0.8rem;
-    cursor: pointer;
-    overflow-wrap: break-word;
-    white-space: nowrap;
-    outline: none;
-    border-radius: 2rem;
-    text-transform: capitalize;
-    border: solid 1px rgba(var(--text-color), .3);
-    opacity: 0.9;
-}
-.option:focus{
-    background: rgba(var(--text-color), 0.1);
-}
-
-@media (hover: hover){
-    .option{
-        -webkit-transition: background 0.3s;
-        -o-transition: background 0.3s;
+//Strip option
+const stripOption = document.createElement('template')
+stripOption.innerHTML = `
+<style>
+    *{
+        padding: 0;
+        margin: 0;
+        -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+    }  
+    :host{
+        --border-radius: 2rem;
+        --background-color: inherit;
+        --active-option-color: inherit;
+        --active-option-backgroud-color: rgba(var(--text-color), .2);
+    }
+    .hide{
+        display: none !important;
+    }
+    .strip-option{
+        display: flex;
+        flex-shrink: 0;
+        cursor: pointer;
+        white-space: nowrap;
+        padding: 0.5rem 0.8rem;
         transition: background 0.3s;
+        border-radius: var(--border-radius);
+        -webkit-tap-highlight-color: transparent;
     }
-    .option:hover{
-        background: rgba(var(--text-color), 0.1);
+    :host([active]) .strip-option{
+        color: var(--active-option-color);
+        background-color: var(--active-option-backgroud-color);
+    }
+    :host(:hover:not([active])) .strip-option{
+        background-color: rgba(var(--text-color), 0.06);
     }
-}
 </style>
-<div class="option" tabindex="0">
-    <slot></slot> 
-</div>`;
-customElements.define('sm-strip-option', class extends HTMLElement {
+<label class="strip-option" tabindex="0">
+    <slot></slot>
+</label>
+`
+customElements.define('strip-option', class extends HTMLElement{
     constructor() {
         super()
         this.attachShadow({
             mode: 'open'
-        }).append(smStripOption.content.cloneNode(true))
+        }).append(stripOption.content.cloneNode(true))
+        this._value
+        this.radioButton = this.shadowRoot.querySelector('input')
     }
-    sendDetails() {
-        let optionSelected = new CustomEvent('optionSelected', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                text: this.textContent,
-                value: this.getAttribute('value')
-            }
-        })
-        this.dispatchEvent(optionSelected)
+    get value() {
+        return this._value
     }
-
-    connectedCallback() {
-        this.addEventListener('click', e => {
-            this.sendDetails()
-        })
-        this.addEventListener('keyup', e => {
-            if (e.code === 'Enter' || e.code === 'Space') {
-                e.preventDefault()
-                this.sendDetails(false)
-            }
-        })
-        if (this.hasAttribute('default')) {
-            setTimeout(() => {
-                this.sendDetails()
-            }, 0);
+    fireEvent = () => {
+        this.dispatchEvent(
+            new CustomEvent("option-clicked", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    value: this._value
+                }
+            })
+        )
+    }
+    handleKeyDown = (e) => {
+        if (e.key === 'Enter' || e.key === 'Space') {
+            this.fireEvent()
         }
     }
+    connectedCallback() {
+        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)
+    }
 })
 
+
 //popup
 const smPopup = document.createElement('template')
 smPopup.innerHTML = `
@@ -1902,21 +1895,13 @@ smPopup.innerHTML = `
     display: grid;
     z-index: 10;
     --width: 100%;
+    --height: auto;
     --min-width: auto;
+    --min-height: auto;
     --body-padding: 1.5rem;
+    --backdrop: rgba(0, 0, 0, 0.6);
     --border-radius: 0.8rem 0.8rem 0 0;
 }
-::-webkit-scrollbar{
-    width: 0.5rem;
-}
-
-::-webkit-scrollbar-thumb{
-    background: rgba(var(--text-color), 0.3);
-    border-radius: 1rem;
-    &:hover{
-        background: rgba(var(--text-color), 0.5);
-    }
-}
 .popup-container{
     display: -ms-grid;
     display: grid;
@@ -1926,7 +1911,7 @@ smPopup.innerHTML = `
     left: 0;
     right: 0;
     place-items: center;
-    background: rgba(0, 0, 0, 0.6);
+    background: var(--backdrop);
     -webkit-transition: opacity 0.3s;
     -o-transition: opacity 0.3s;
     transition: opacity 0.3s;
@@ -1952,6 +1937,9 @@ smPopup.innerHTML = `
             align-items: flex-start;
     width: var(--width);
     min-width: var(--min-width);
+    height: var(--height);
+    min-height: var(--min-height);
+    max-height: 90vh;
     border-radius: var(--border-radius);
     -webkit-transform: scale(1) translateY(100%);
             transform: scale(1) translateY(100%);
@@ -1963,7 +1951,6 @@ smPopup.innerHTML = `
     background: rgba(var(--foreground-color), 1);
     -webkit-box-shadow: 0 -1rem 2rem #00000020;
             box-shadow: 0 -1rem 2rem #00000020;
-    max-height: 90vh;
     content-visibility: auto;
 }
 .container-header{
@@ -2008,7 +1995,7 @@ smPopup.innerHTML = `
             -ms-grid-row-align: center;
             align-self: center;
         border-radius: var(--border-radius);
-        height: auto;
+        height: var(--height);
         -webkit-transform: scale(1) translateY(3rem);
                 transform: scale(1) translateY(3rem);
         -webkit-box-shadow: 0 3rem 2rem -0.5rem #00000040;
@@ -2031,6 +2018,19 @@ smPopup.innerHTML = `
         margin: 0.5rem 0;
     }
 }
+@media (any-hover: hover){
+    ::-webkit-scrollbar{
+        width: 0.5rem;
+    }
+    
+    ::-webkit-scrollbar-thumb{
+        background: rgba(var(--text-color), 0.3);
+        border-radius: 1rem;
+        &:hover{
+            background: rgba(var(--text-color), 0.5);
+        }
+    }
+}
 </style>
 <div part="background" class="popup-container hide" role="dialog">
     <div part="popup" class="popup">
@@ -2052,6 +2052,11 @@ customElements.define('sm-popup', class extends HTMLElement {
         }).append(smPopup.content.cloneNode(true))
 
         this.allowClosing = false
+        this.isOpen = false
+    }
+
+    get open() {
+        return this.isOpen
     }
 
     resumeScrolling = () => {
@@ -2085,6 +2090,7 @@ customElements.define('sm-popup', class extends HTMLElement {
             )
             this.setAttribute('open', '')
             this.pinned = pinned
+            this.isOpen = true
         }
         this.popupContainer.classList.remove('hide')
         this.popup.style.transform = 'none';
@@ -2130,6 +2136,7 @@ customElements.define('sm-popup', class extends HTMLElement {
                     }
                 })
             )
+            this.isOpen = false
         }, 300);
     }
 
@@ -2241,34 +2248,57 @@ smCarousel.innerHTML = `
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
+    --arrow-left: 1rem;
+    --arrow-right: 1rem;
+    --arrow-top: auto;
+    --arrow-bottom: auto;
+    --arrow-fill: rgba(var(--foreground-color), 1);
+    --arrow-background: rgba(var(--text-color), 1);
+    --arrow-box-shadow: 0 0.2rem 0.2rem #00000020, 0 0.5rem 1rem #00000040;
+    --indicator-top: auto;
+    --indicator-bottom: -1rem;
+    --active-indicator-color: var(--accent-color);
 }
-.icon {
+.carousel__button{
     position: absolute;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
-    fill: none;
-    height: 2.6rem;
-    width: 2.6rem;
-    border-radius: 3rem;
-    padding: 0.9rem;
-    stroke: rgba(var(--foreground-color), 0.8);
-    stroke-width: 14;
-    overflow: visible;
-    stroke-linecap: round;
-    stroke-linejoin: round;
     cursor: pointer;
     min-width: 0;
-    background: rgba(var(--text-color), 1);
-    -webkit-box-shadow: 0 0.2rem 0.2rem #00000020, 
-                0 0.5rem 1rem #00000040;
-            box-shadow: 0 0.2rem 0.2rem #00000020, 
-                0 0.5rem 1rem #00000040; 
+    top:  var(--arrow-top);
+    bottom:  var(--arrow-bottom);
+    border: none;
+    background: var(--arrow-background);
+    -webkit-box-shadow: var(--arrow-box-shadow);
+            box-shadow:  var(--arrow-box-shadow); 
     -webkit-tap-highlight-color: transparent;
     -webkit-transform: scale(0);
         -ms-transform: scale(0);
             transform: scale(0);
     z-index: 1;
+    border-radius: 3rem;
+    padding: 0.5rem;
+}
+.carousel__button:active{
+    background: rgba(var(--text-color), 0.1);
+}
+button:focus{
+    outline: none;
+}
+button:focus-visible{
+    outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+.carousel__button--left{
+    left: var(--arrow-left);
+}
+.carousel__button--right{
+    right: var(--arrow-right);
+}
+.icon {
+    height: 1.5rem;
+    width: 1.5rem;
+    fill: var(--arrow-fill);
 }
 .hide{
     pointer-events: none;
@@ -2279,17 +2309,9 @@ smCarousel.innerHTML = `
         -ms-transform: scale(1);
             transform: scale(1)
 }
-.previous-item{
-    left: 1rem;
-}
-.next-item{
-    right: 1rem;
-}
 .carousel-container{
     position: relative;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
+    display: grid;
     width: 100%;
     -webkit-box-align: center;
         -ms-flex-align: center;
@@ -2313,7 +2335,8 @@ smCarousel.innerHTML = `
         -ms-flex-pack: center;
             justify-content: center;
     position: absolute;
-    bottom: -1rem;
+    top: var(--indicator-top);
+    bottom: var(--indicator-bottom);
     gap: 0.5rem;
     width: 100%;
 }
@@ -2325,12 +2348,13 @@ smCarousel.innerHTML = `
     -webkit-transition: 0.2s;
     -o-transition: 0.2s;
     transition: 0.2s;
+    cursor: pointer;
 }
 .dot.active{
     -webkit-transform: scale(1.5);
         -ms-transform: scale(1.5);
             transform: scale(1.5);
-    background: var(--accent-color);
+    background: var(--active-indicator-color);
 }
 slot::slotted(*){
     scroll-snap-align: center;
@@ -2342,48 +2366,49 @@ slot::slotted(*){
     scroll-snap-align: center;
 }
 :host([align-items="end"]) slot::slotted(*){
-scroll-snap-align: end;
+    scroll-snap-align: end;
 }
 @media (hover: hover){
-.carousel{
-    overflow: hidden;
-}
-.left,.right{
-    display: none;
-}
+    .carousel{
+        overflow: hidden;
+    }
+    .left,.right{
+        display: none;
+    }
+    .carousel__button:hover{
+        background: rgba(var(--text-color), 0.06);
+    }
 }
 @media (hover: none){
-::-webkit-scrollbar-track {
-    -webkit-box-shadow: none !important;
-    background-color: transparent !important;
-}
-::-webkit-scrollbar {
-    height: 0;
-    background-color: transparent;
-}
-.carousel{
-    overflow: auto none;
-}
-.icon{
-    display: none;
-}
-.left,.right{
-    display: block;
-}
+    ::-webkit-scrollbar-track {
+        -webkit-box-shadow: none !important;
+        background-color: transparent !important;
+    }
+    ::-webkit-scrollbar {
+        height: 0;
+        background-color: transparent;
+    }
+    .carousel{
+        overflow: auto none;
+    }
+    .carousel__button{
+        display: none;
+    }
+    .left,.right{
+        display: block;
+    }
 }
 </style>
 <div class="carousel-container">
-    <svg class="icon previous-item" viewBox="4 0 64 64">
-        <title>Previous</title>
-        <polyline points="48.01 0.35 16.35 32 48.01 63.65"/>
-    </svg>
+    <button class="carousel__button carousel__button--left">
+        <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>
+    </button>
     <div part="carousel" class="carousel">
         <slot></slot>
     </div>
-    <svg class="icon next-item" viewBox="-6 0 64 64">
-        <title>Next</title>
-        <polyline points="15.99 0.35 47.65 32 15.99 63.65"/>
-    </svg>
+    <button class="carousel__button carousel__button--right">
+        <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>
+    </button>
     <div class="indicators"></div>
 </div>
 `;
@@ -2394,15 +2419,29 @@ customElements.define('sm-carousel', class extends HTMLElement {
         this.attachShadow({
             mode: 'open'
         }).append(smCarousel.content.cloneNode(true))
+
+        this.isAutoPlaying = false
+        this.autoPlayInterval = 5000
+        this.autoPlayTimeout
+        this.initialTimeout
+        this.activeSlideNum = 0
+        this.carouselItems
+        this.indicators
+        this.showIndicator = false
+        this.carousel = this.shadowRoot.querySelector('.carousel')
+        this.carouselContainer = this.shadowRoot.querySelector('.carousel-container')
+        this.carouselSlot = this.shadowRoot.querySelector('slot')
+        this.nextArrow = this.shadowRoot.querySelector('.carousel__button--right')
+        this.previousArrow = this.shadowRoot.querySelector('.carousel__button--left')
+        this.indicatorsContainer = this.shadowRoot.querySelector('.indicators')
     }
 
     static get observedAttributes() {
-        return ['indicator']
+        return ['indicator', 'autoplay', 'interval']
     }
 
     scrollLeft = () => {
         this.carousel.scrollBy({
-            top: 0,
             left: -this.scrollDistance,
             behavior: 'smooth'
         })
@@ -2410,22 +2449,51 @@ customElements.define('sm-carousel', class extends HTMLElement {
 
     scrollRight = () => {
         this.carousel.scrollBy({
-            top: 0,
             left: this.scrollDistance,
             behavior: 'smooth'
         })
     }
 
+    handleIndicatorClick = (e) => {
+        if (e.target.closest('.dot')) {
+            const slideNum = parseInt(e.target.closest('.dot').dataset.rank)
+            if (this.activeSlideNum !== slideNum) {
+                this.showSlide(slideNum)
+            }
+        }
+    }
+
+    showSlide = (slideNum) => {
+        this.carousel.scrollTo({
+            left: (this.carouselItems[slideNum].getBoundingClientRect().left - this.carousel.getBoundingClientRect().left + this.carousel.scrollLeft),
+            behavior: 'smooth'
+        })
+    }
+
+    nextSlide = () => {
+        if (!this.carouselItems) return
+        let showSlideNo = (this.activeSlideNum + 1) < this.carouselItems.length ? this.activeSlideNum + 1 : 0
+        this.showSlide(showSlideNo)
+    }
+    
+    autoPlay = () => {
+        this.nextSlide()
+        if (this.isAutoPlaying) {
+            this.autoPlayTimeout = setTimeout(() => {
+                this.autoPlay()
+            }, this.autoPlayInterval);
+        }
+    }
+
+    startAutoPlay = () => {
+        this.setAttribute('autoplay', '')
+    }
+
+    stopAutoPlay = () => {
+        this.removeAttribute('autoplay')
+    }
+
     connectedCallback() {
-        this.carousel = this.shadowRoot.querySelector('.carousel')
-        this.carouselContainer = this.shadowRoot.querySelector('.carousel-container')
-        this.carouselSlot = this.shadowRoot.querySelector('slot')
-        this.nextArrow = this.shadowRoot.querySelector('.next-item')
-        this.previousArrow = this.shadowRoot.querySelector('.previous-item')
-        this.indicatorsContainer = this.shadowRoot.querySelector('.indicators')
-        this.carouselItems
-        this.indicators
-        this.showIndicator = false
         this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3
         let frag = document.createDocumentFragment();
         if (this.hasAttribute('indicator'))
@@ -2436,12 +2504,15 @@ customElements.define('sm-carousel', class extends HTMLElement {
             lastVisible = false
         const allElementsObserver = new IntersectionObserver(entries => {
             entries.forEach(entry => {
-                if (this.showIndicator)
+                if (this.showIndicator) {                    
+                    const activeRank = parseInt(entry.target.dataset.rank)
                     if (entry.isIntersecting) {
-                        this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.add('active')
+                        this.indicators[activeRank].classList.add('active')
+                        this.activeSlideNum = activeRank
                     }
-                else
-                    this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.remove('active')
+                    else
+                        this.indicators[activeRank].classList.remove('active')
+                }
                 if (!entry.target.previousElementSibling)
                     if (entry.isIntersecting) {
                         this.previousArrow.classList.remove('expand')
@@ -2458,7 +2529,6 @@ customElements.define('sm-carousel', class extends HTMLElement {
                     }
                 else {
                     this.nextArrow.classList.add('expand')
-
                     lastVisible = false
                 }
                 if (firstVisible && lastVisible)
@@ -2487,8 +2557,9 @@ customElements.define('sm-carousel', class extends HTMLElement {
                 this.carouselItems.forEach((item, index) => {
                     let dot = document.createElement('div')
                     dot.classList.add('dot')
+                    dot.dataset.rank = index
                     frag.append(dot)
-                    item.setAttribute('rank', index)
+                    item.dataset.rank = index
                 })
                 this.indicatorsContainer.append(frag)
                 this.indicators = this.indicatorsContainer.children
@@ -2498,26 +2569,52 @@ customElements.define('sm-carousel', class extends HTMLElement {
         this.addEventListener('keyup', e => {
             if (e.code === 'ArrowLeft')
                 this.scrollRight()
-            else
+            else if (e.code === 'ArrowRight')
                 this.scrollRight()
         })
 
         this.nextArrow.addEventListener('click', this.scrollRight)
         this.previousArrow.addEventListener('click', this.scrollLeft)
+        this.indicatorsContainer.addEventListener('click', this.handleIndicatorClick)
     }
 
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (name === 'indicator') {
-            if (this.hasAttribute('indicator'))
-                this.showIndicator = true
-            else
-                this.showIndicator = false
+    async attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {            
+            if (name === 'indicator') {
+                if (this.hasAttribute('indicator'))
+                    this.showIndicator = true
+                else
+                    this.showIndicator = false
+                }
+            if (name === 'autoplay') {
+                if (this.hasAttribute('autoplay')) {
+                    this.initialTimeout = setTimeout(() => {
+                        this.isAutoPlaying = true
+                        this.autoPlay()
+                    }, this.autoPlayInterval);
+                }
+                else {
+                    this.isAutoPlaying = false
+                    clearTimeout(this.autoPlayTimeout)
+                    clearTimeout(this.initialTimeout)
+                }
+                
+            }
+            if (name === 'interval') {
+                if (this.hasAttribute('interval') && this.getAttribute('interval').trim() !== '') {
+                    this.autoPlayInterval = Math.abs(parseInt(this.getAttribute('interval').trim()))
+                }
+                else {
+                    this.autoPlayInterval = 5000
+                }
+            }
         }
     }
 
     disconnectedCallback() {
         this.nextArrow.removeEventListener('click', this.scrollRight)
         this.previousArrow.removeEventListener('click', this.scrollLeft)
+        this.indicatorsContainer.removeEventListener('click', this.handleIndicatorClick)
     }
 })
 
@@ -3166,6 +3263,451 @@ customElements.define('sm-menu-option', class extends HTMLElement {
     }
 })
 
+
+// tags input
+const tagsInput = document.createElement('template')
+tagsInput.innerHTML = `
+  <style>
+  *{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+  }
+  :host{
+    --border-radius: 0.3rem;
+    }
+.hide{
+    display: none !important;
+}
+.tags-wrapper{
+    position: relative;
+    display: flex;
+    cursor: text;
+    flex-wrap: wrap;
+    justify-items: flex-start;
+    align-items: center;
+    padding: 0.5rem 0.5rem 0 0.5rem;
+    border-radius: var(--border-radius);
+    background-color: rgba(var(--text-color), 0.06);
+  }
+  .tags-wrapper:focus-within{
+    box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;
+  }
+  
+  .tag {
+    cursor: pointer;
+    user-select: none;
+    align-items: center;
+    display: inline-flex;
+    border-radius: 0.3rem;
+    padding: 0.3rem 0.5rem;
+    margin: 0 0.5rem 0.5rem 0;
+    background-color: rgba(var(--text-color), 0.06);
+  }
+  
+  .icon {
+    height: 1.2rem;
+    width: 1.2rem;
+    margin-left: 0.3rem;
+    fill: rgba(var(--text-color), 0.8);
+  }
+  
+  input,
+  input:focus {
+    outline: none;
+    border: none;
+  }
+  
+  input {
+    display: inline-flex;
+    width: auto;
+    color: inherit;
+    max-width: inherit;
+    font-size: inherit;
+    font-family: inherit;
+    padding: 0.4rem 0.5rem;
+    margin: 0 0.5rem 0.5rem 0;
+    background-color: transparent;
+  }
+  .placeholder{
+      position: absolute;
+      padding: 0 0.5rem;
+      top: 50%;
+      font-weight: 500;
+      transform: translateY(-50%);
+      color: rgba(var(--text-color), 0.6);
+  }
+  </style>
+  <div class="tags-wrapper">
+    <input type="text" size="3"/>
+    <p class="placeholder"></p>
+  </div>
+`
+
+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.observeList = ['placeholder', 'limit']
+        this.limit = undefined
+        this.tags = new Set()
+    }
+    static get observedAttributes() {
+        return ['placeholder', 'limit']
+    }
+	get value() {
+		return [...this.tags].join()
+    }
+    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
+					})
+				}
+				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)
+	}
+})
+
+// file input
+const fileInput = document.createElement('template')
+fileInput.innerHTML = `
+  	<style>
+		*{
+			padding: 0;
+			margin: 0;
+			box-sizing: border-box;
+		}
+		:host{
+			--border-radius: 0.3rem;
+			--button-color: inherit;
+			--button-font-weight: 500;
+			--button-background-color: var(--accent-color);
+		}
+		.file-input {
+			display: flex;
+		}
+		
+		.file-picker {
+            display: flex;
+			cursor: pointer;
+			user-select: none;
+            align-items: center;
+			padding: 0.5rem 0.8rem;
+			color: var(--button-color);
+			border-radius: var(--border-radius);
+			font-weight: var(--button-font-weigh);
+			background-color: var(--button-background-color);
+		}
+		.files-preview-wrapper{
+			display: grid;
+			gap: 0.5rem;
+			list-style: none;
+		}
+		.files-preview-wrapper:not(:empty){
+            margin-bottom: 1rem;
+		}
+		.file-preview{
+			display: grid;
+            gap: 0.5rem;
+            align-items: center;
+			padding: 0.5rem 0.8rem;
+			border-radius: var(--border-radius);
+			background-color: rgba(var(--text-color), 0.06)
+		}
+		.file-name{
+		}
+        .file-size{
+            font-size: 0.8rem;
+            font-weight: 400;
+            color: rgba(var(--text-color), 0.8);
+        }
+		input[type=file] {
+			display: none;
+		}
+  	</style>
+	<ul class="files-preview-wrapper"></ul>
+  	<label tabindex="0" class="file-input">
+		<div class="file-picker"><slot>Choose file</slot></div>
+		<input type="file">
+	</label>
+`
+
+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.observeList = ['accept', 'multiple', 'capture']
+	}
+	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 = () => {
+        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) => {
+        const filePreview = document.createElement('li')
+        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)
+    }
+    handleKeyDown = e => {
+        if (e.key === 'Enter' || e.code === 'Space') {
+            e.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(name) {
+		if (this.observeList.includes(name)){
+            if (this.hasAttribute(name)) {
+                this.input.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : '')
+			}
+			else {
+                this.input.removeAttribute(name)
+			}
+		}
+	}
+	disconnectedCallback() {
+        this.input.removeEventListener('change', this.handleChange)
+        this.fileInput.removeEventListener('keydown', this.handleKeyDown)
+	}
+})
+
+// sm-form
+const smForm = document.createElement('template')
+smForm.innerHTML = `
+    <style>
+    *{
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+    }
+    :host{
+        --gap: 1rem;
+        width: 100%;
+    }
+    form{
+        display: grid;
+        gap: var(--gap);
+        width: 100%;
+    }
+    </style>
+	<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))
+
+		this.form = this.shadowRoot.querySelector('form')
+		this.formElements
+		this.requiredElements
+		this.submitButton
+		this.resetButton
+		this.allRequiredValid = false
+	}
+	debounce = (callback, wait) => {
+		let timeoutId = null;
+		return (...args) => {
+			window.clearTimeout(timeoutId);
+			timeoutId = window.setTimeout(() => {
+				callback.apply(null, args);
+			}, wait);
+		};
+	}
+	handleInput = this.debounce((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;
+		}
+	}, 100)
+	handleKeydown = this.debounce((e) => {
+		if (e.key === 'Enter') {
+			if (this.allRequiredValid) {
+				this.submitButton.click()
+			}
+			else {
+				// implement show validity logic 
+			}
+		}
+	}, 100)
+	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-checkbox')]
+			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.handleInput)
+		this.addEventListener('keydown', this.handleKeydown)
+	}
+	disconnectedCallback() {
+		this.removeEventListener('input', this.handleInput)
+	}
+})
+
 // tab-header
 
 const smTabHeader = document.createElement('template')
@@ -3361,6 +3903,71 @@ customElements.define('sm-tab-header', class extends HTMLElement {
     }
 })
 
+// tab
+const smTab = document.createElement('template')
+smTab.innerHTML = `
+<style>
+    *{
+        padding: 0;
+        margin: 0;
+        -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+    } 
+    :host{
+        position: relative;
+        display: -webkit-inline-box;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+        z-index: 1;
+    }
+    .tab{
+        position: relative;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+            -ms-user-select: none;
+                user-select: none;
+        -webkit-box-pack: center;
+            -ms-flex-pack: center;
+                justify-content: center;
+        cursor: pointer;
+        -webkit-tap-highlight-color: transparent;
+        white-space: nowrap;
+        padding: 0.4rem 0.8rem;
+        font-weight: 500;
+        word-spacing: 0.1rem;
+        text-align: center;
+        -webkit-transition: color 0.3s;
+        -o-transition: color 0.3s;
+        transition: color 0.3s;
+        text-transform: capitalize;
+        height: 100%;
+    }
+    @media (hover: hover){
+        :host(.active) .tab{
+            opacity: 1;
+        }
+        .tab{
+            opacity: 0.7
+        }
+        .tab:hover{
+            opacity: 1
+        }
+    }
+</style>
+<div part="tab" class="tab">
+<slot></slot>
+</div>
+`;
+
+customElements.define('sm-tab', class extends HTMLElement {
+    constructor() {
+        super()
+        this.shadow = this.attachShadow({
+            mode: 'open'
+        }).append(smTab.content.cloneNode(true))
+    }
+})
+
 // tab-panels
 
 const smTabPanels = document.createElement('template')
@@ -3515,660 +4122,3 @@ customElements.define('sm-tab-panels', class extends HTMLElement {
         })
     }
 })
-
-
-const slidingSection = document.createElement('template')
-slidingSection.innerHTML = `
-<style>
-*{
-    margin: 0;
-    padding: 0;
-    box-sizzing: border-box;
-}
-:host{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    height: 100%;
-    width: 100%;
-}
-.section{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    max-width: 100%;
-    overflow: hidden auto;
-    -ms-scroll-snap-type: mandatory x;
-        scroll-snap-type: mandatory x;
-}
-
-</style>
-<section class="section">
-    <slot></slot>
-</section>
-`
-
-customElements.define('sm-sliding-section', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({
-            mode: 'open'
-        }).append(slidingSection.content.cloneNode(true))
-    }
-    connectedCallback() {
-
-    }
-})
-
-const section = document.createElement('template')
-section.innerHTML = `
-<style>
-*{
-    margin: 0;
-    padding: 0;
-    box-sizzing: border-box;
-}
-:host{
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-}
-.section{
-    min-width: 100%;
-    scroll-snap-align: start;
-}
-</style>
-<section class="section">
-    <slot></slot>
-</section>
-`
-
-customElements.define('sm-section', class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({
-            mode: 'open'
-        }).append(section.content.cloneNode(true))
-    }
-})
-
-const textField = document.createElement('template')
-textField.innerHTML = `
-<style>
-    *{
-        padding: 0;
-        margin: 0;
-        box-sizing: border-box;
-    } 
-    .text-field{
-        display: flex;
-        align-items: center;
-    }
-    .text{
-        padding: 0.6rem 0;
-        transition: background-color 0.3s;
-        border-bottom: 0.15rem solid transparent;
-        overflow-wrap: break-word;
-        word-wrap: break-word;
-        word-break: break-all;
-        word-break: break-word;
-        -moz-hyphens: auto;
-        -webkit-hyphens: auto;
-        hyphens: auto;
-    }
-    .text:focus{
-        outline: none;
-        border-bottom: 0.15rem solid var(--accent-color);
-    }
-    .text:focus-visible{
-        outline: none;
-        background: solid rgba(var(--text-color), 0.06);
-    }
-    .editable{
-        border-bottom: 0.15rem solid rgba(var(--text-color), 0.6);
-    }
-    .icon-container{
-        position: relative;
-        margin-left: 0.8rem;
-        height: 1.8rem;
-        width: 1.8rem;
-    }
-    .icon{
-        position: absolute;
-        cursor: pointer;
-        fill: rgba(var(--text-color), 0.7);
-        height: 1.8rem;
-        width: 1.8rem;
-        padding: 0.2rem;
-    }
-    .save-button{
-        padding: 0;
-    }
-    .hide{
-        display: none;
-    }
-</style>
-<div class="text-field">
-    <div class="text" part="text"></div>
-    <div class="icon-container">
-        <svg class="edit-button icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-            <title>Edit</title>
-            <path fill="none" d="M0 0h24v24H0z"/><path d="M12.9 6.858l4.242 4.243L7.242 21H3v-4.243l9.9-9.9zm1.414-1.414l2.121-2.122a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414l-2.122 2.121-4.242-4.242z"/>
-        </svg>
-        <svg class="save-button icon hide" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-            <title>Save</title>
-            <path fill="none" d="M0 0h24v24H0z"/><path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/>
-        </svg>
-    </div>
-</div>
-`
-
-customElements.define('text-field', class extends HTMLElement{
-    constructor(){
-        super()
-        this.attachShadow({
-            mode: 'open'
-        }).append(textField.content.cloneNode(true))
-
-        this.textField = this.shadowRoot.querySelector('.text-field')
-        this.textContainer = this.textField.children[0]
-        this.iconsContainer = this.textField.children[1]
-        this.editButton = this.textField.querySelector('.edit-button')
-        this.saveButton = this.textField.querySelector('.save-button')
-        this.isTextEditable = false
-        this.isDisabled = false
-    }
-
-    static get observedAttributes(){
-        return ['disable']
-    }
-
-    get value(){
-        return this.text
-    }
-    set value(val) {
-        this.text = val
-        this.textContainer.textContent = val
-        this.setAttribute('value', val)
-    }
-    set disabled(val) {
-        this.isDisabled = val
-        if(this.isDisabled)
-            this.setAttribute('disable', '')
-        else
-            this.removeAttribute('disable')
-    }
-    fireEvent = (value) => {
-        let event = new CustomEvent('contentchanged', {
-            bubbles: true,
-            cancelable: true,
-            composed: true,
-            detail: {
-                value
-            }
-        });
-        this.dispatchEvent(event);
-    }
-    
-    setEditable = () => {
-        if(this.isTextEditable) return
-        this.textContainer.contentEditable = true
-        this.textContainer.classList.add('editable')
-        this.textContainer.focus()
-        document.execCommand('selectAll', false, null);
-        this.editButton.animate(this.rotateOut, this.animOptions).onfinish = () => {
-            this.editButton.classList.add('hide')
-        }
-        setTimeout(() => {
-            this.saveButton.classList.remove('hide')
-            this.saveButton.animate(this.rotateIn, this.animOptions)
-        }, 100);
-        this.isTextEditable = true
-    }
-    setNonEditable = () => {   
-        if (!this.isTextEditable) return
-        this.textContainer.contentEditable = false
-        this.textContainer.classList.remove('editable')
-        
-        if (this.text !== this.textContainer.textContent.trim()) {
-            this.setAttribute('value', this.textContainer.textContent)
-            this.text = this.textContainer.textContent.trim()
-            this.fireEvent(this.text)
-        }
-        this.saveButton.animate(this.rotateOut, this.animOptions).onfinish = () => {
-            this.saveButton.classList.add('hide')
-        }
-        setTimeout(() => {
-            this.editButton.classList.remove('hide')
-            this.editButton.animate(this.rotateIn, this.animOptions)
-        }, 100);
-        this.isTextEditable = false
-    }
-
-    revert = () => {
-        if (this.textContainer.isContentEditable) {
-            this.value = this.text
-            this.setNonEditable()
-        }
-    }
-
-    connectedCallback(){
-        this.text
-        if (this.hasAttribute('value')) {
-            this.text = this.getAttribute('value')
-            this.textContainer.textContent = this.text
-        }
-        if(this.hasAttribute('disable'))
-            this.isDisabled = true
-        else
-            this.isDisabled = false
-        
-        this.rotateOut = [
-            {
-                transform: 'rotate(0)',
-                opacity: 1
-            },
-            {
-                transform: 'rotate(90deg)',
-                opacity: 0
-            },
-        ]
-        this.rotateIn = [
-            {
-                transform: 'rotate(-90deg)',
-                opacity: 0
-            },
-            {
-                transform: 'rotate(0)',
-                opacity: 1
-            },
-        ]
-        this.animOptions = {
-            duration: 300,
-            easing: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
-            fill: 'forwards'
-        }
-        if (!this.isDisabled) {
-            this.iconsContainer.classList.remove('hide')
-            this.textContainer.addEventListener('dblclick', this.setEditable)
-            this.editButton.addEventListener('click', this.setEditable)
-            this.saveButton.addEventListener('click', this.setNonEditable)
-        }
-    }
-    attributeChangedCallback(name) {
-        if (name === 'disable') {
-            if (this.hasAttribute('disable')) {
-                this.iconsContainer.classList.add('hide')
-                this.textContainer.removeEventListener('dblclick', this.setEditable)
-                this.editButton.removeEventListener('click', this.setEditable)
-                this.saveButton.removeEventListener('click', this.setNonEditable)
-                this.revert()
-            }
-            else {
-                this.iconsContainer.classList.remove('hide')
-                this.textContainer.addEventListener('dblclick', this.setEditable)
-                this.editButton.addEventListener('click', this.setEditable)
-                this.saveButton.addEventListener('click', this.setNonEditable)
-            }
-        }
-    }
-    disconnectedCallback() {
-        this.textContainer.removeEventListener('dblclick', this.setEditable)
-        this.editButton.removeEventListener('click', this.setEditable)
-        this.saveButton.removeEventListener('click', this.setNonEditable)
-    }
-})
-
-//Color Grid
-const colorGrid = document.createElement('template');
-colorGrid.innerHTML =`
-<style>
-    *{
-        padding:0;
-        margin:0;
-        -webkit-box-sizing: border-box;
-                box-sizing: border-box;
-    }
-    :host{
-        display: flex;
-    }
-    .color-tile-container{
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.5rem;
-    }
-    .color-tile{
-        position: relative;
-        cursor: pointer;
-        display: flex;
-        height: 3rem;
-        width: 3rem;
-        border-radius: 0.5rem;
-    }
-    .color-tile input[type="radio"]{
-        display: none;
-    }
-    .border{
-        position: absolute;
-        z-index: 1;
-        border-radius: 0.5rem;
-        box-shadow: 0 0 0 0.5rem rgba(var(--text-color), 0.8) inset;
-        display: none;
-        height: 100%;
-        width: 100%;
-    }
-    .color-tile input[type="radio"]:checked ~ .border{
-        display: flex;
-    }
-
-</style>
-<div class="color-tile-container">
-</div>`;
-
-customElements.define('color-grid',
-class extends HTMLElement {
-    constructor() {
-        super()
-        this.attachShadow({
-            mode: 'open'
-        }).append(colorGrid.content.cloneNode(true))
-
-        this.colorArray = []
-        this.container = this.shadowRoot.querySelector('.color-tile-container')
-    }
-
-    set colors(arr) {
-        this.colorArray = arr
-        this.renderTiles()
-    }
-
-    set selectedColor(color) {
-        if (this.colorArray.includes(color) && this.container.querySelector(`[data-color="${color}"]`)) {
-            this.container.querySelector(`[data-color="${color}"] input`).checked = true
-        }
-    }
-
-    randString(length) {
-        let result = '';
-        let characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-
-        for (let i = 0; i < length; i++)
-            result += characters.charAt(Math.floor(Math.random() * characters.length));
-        return result;
-    }
-
-    renderTiles() {
-        this.container.innerHTML = ''
-        const frag = document.createDocumentFragment()
-        const groupName = this.randString(6)
-        this.colorArray.forEach(color => {
-            const label = document.createElement('label')
-            label.classList.add('color-tile')
-            label.setAttribute('data-color', color)
-            if(color.includes('--'))
-                label.setAttribute('style', `background-color: var(${color})`)
-            else
-                label.setAttribute('style', `background-color: ${color}`)
-            label.innerHTML = `
-                <input type="radio" name="${groupName}">
-                <div class="border"></div>
-                `
-            frag.append(label)
-        })
-        this.container.append(frag)
-    }
-    
-    handleChange(e) {
-        const clickedTile = e.target.closest('.color-tile')
-        const clickedTileColor = clickedTile.dataset.color
-        const tileSelected = new CustomEvent('colorselected', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                value: clickedTileColor,
-            }
-        })
-        this.dispatchEvent(tileSelected)
-    }
-
-    connectedCallback() {
-        this.container.addEventListener('change', this.handleChange)
-    }
-
-    disconnectedCallback() {
-        this.container.removeEventListener('change', this.handleChange)
-    }
-})
-
-const pinInput = document.createElement('template');
-pinInput.innerHTML = `
-
-<style>
-		*{
-		padding:0;
-		margin:0;
-		-webkit-box-sizing: border-box;
-					box-sizing: border-box;
-		}
-		input::-ms-reveal,
-		input::-ms-clear {
-			display: none;
-		}
-		input:invalid{
-			outline: none;
-			-webkit-box-shadow: none;
-					box-shadow: none;
-		}
-		::-moz-focus-inner{
-			border: none;
-		}
-		:host{
-			--border-radius: 0.5rem;
-			--pin-length: 4;
-		}
-		.component{
-			display: flex;
-			align-items: center;
-		}
-		.pin-container{
-			display: grid;
-			grid-template-columns: repeat(var(--pin-length), 3rem);
-			width: auto;
-			gap: 0.5rem;
-		}
-		input{
-			width: 100%;
-			display: flex;
-			padding: 0.8rem 0.6rem;
-			border: none;
-			font-size: 1.5rem;
-			text-align: center;
-			color: rgba(var(--text-color), 1);
-			background: rgba(var(--text-color), 0.1);
-			border-radius: var(--border-radius);
-		}
-		
-		input:valid{
-			background-color: transparent;
-		}
-		input:focus,
-		button:focus{
-			outline: none;
-			box-shadow: 0 0 0 0.2rem var(--accent-color) inset;
-		}
-		button{
-            display: flex;
-            align-items: center;
-			background: none;
-			border: none;
-			cursor: pointer;
-            color: inherit;
-            font-family: inherit;
-            margin: 0 1rem;
-		}
-		svg{
-			margin: 0 0.5rem 0 0;
-			height: 1.5rem;
-			width: 1.5rem;
-			fill: rgba(var(--text-color), 1);
-		}
-</style>
-<div class="component">
-	<div class="pin-container"></div>
-	<button>
-		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="9.95"/><path d="M32,12.28C11.7,12.28,0,32,0,32S11.7,51.72,32,51.72,64,32,64,32,52.3,12.28,32,12.28Zm0,33.35A13.63,13.63,0,1,1,45.63,32,13.64,13.64,0,0,1,32,45.63Z"/></svg>
-        Show
-    </button>
-</div>
-`;
-
-customElements.define('pin-input',
-
-	class extends HTMLElement {
-		constructor() {
-			super()
-			this.attachShadow({
-				mode: 'open'
-			}).append(pinInput.content.cloneNode(true))
-
-			this.pinDigits = 4
-
-			this.arrayOfInput = [];
-			this.container = this.shadowRoot.querySelector('.pin-container');
-			this.toggleButton = this.shadowRoot.querySelector('button')
-		}
-
-        set value(val) {
-			this.arrayOfInput.forEach((input, index) => input.value = val[index] ? val[index] : '')
-        }
-        
-		get value() {
-			return this.getValue()
-		}
-
-		set pinLength(val) {
-			this.pinDigits = val
-			this.setAttribute('pin-length', val)
-			this.style.setProperty('--pin-length', val)
-			this.render()
-        }
-
-        get isValid(){
-            return this.arrayOfInput.every(input => input.value.trim().length)
-        }
-        
-        clear = () => {
-            this.value = ''
-        }
-        
-        focusIn = () => {
-            this.arrayOfInput[0].focus();
-        }
-
-		getValue = () => {
-			return this.arrayOfInput.reduce((acc, val) => {
-				return acc += val.value
-			}, '')
-		}
-
-		render = () => {
-			this.container.innerHTML = ''
-			const frag = document.createDocumentFragment();
-
-			for (let i = 0; i < this.pinDigits; i++) {
-				const inputBox = document.createElement('input')
-				inputBox.setAttribute('type', 'password')
-				inputBox.setAttribute('inputmode', 'numeric')
-				inputBox.setAttribute('maxlength', '1')
-				inputBox.setAttribute('required', '')
-				this.arrayOfInput.push(inputBox);
-				frag.append(inputBox);
-			}
-			this.container.append(frag);
-		}
-
-		handleKeydown = (e) => {
-            const activeInput = e.target.closest('input')
-			if (/[0-9]/.test(e.key)) {
-                if (activeInput.value.trim().length > 2) {
-                    e.preventDefault();
-				}
-				else {
-                    if (activeInput.value.trim().length === 1) {
-                        activeInput.value = e.key
-                    }
-					if (activeInput.nextElementSibling) {
-						setTimeout(() => {
-							activeInput.nextElementSibling.focus();
-						}, 0)
-					}
-				}
-			}
-			else if (e.key === "Backspace") {
-				if(activeInput.previousElementSibling)
-					setTimeout(() => {
-						activeInput.previousElementSibling.focus();
-					}, 0)
-			}
-			else if (e.key.length === 1 && !/[0-9]/.test(e.key)) {
-				e.preventDefault();
-			}
-		}
-		
-		handleInput = () => {			
-			if (this.isValid) {
-				this.fireEvent(this.getValue())
-			}
-		}
-
-		fireEvent = (value) => {
-			let event = new CustomEvent('pincomplete', {
-				bubbles: true,
-				cancelable: true,
-				composed: true,
-				detail: {
-					value
-				}
-			});
-			this.dispatchEvent(event);
-		}
-
-		toggleVisiblity = () => {
-			if (this.arrayOfInput[0].getAttribute('type') === 'password') {
-				this.toggleButton.innerHTML = `
-					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><path d="M22.05,31.44a10.12,10.12,0,0,0,.1,1.36L33.36,21.59a10.12,10.12,0,0,0-1.36-.1A10,10,0,0,0,22.05,31.44Z"/><path d="M19.11,35.84A13.6,13.6,0,0,1,36.4,18.55l5.28-5.27A31,31,0,0,0,32,11.72c-20.3,0-32,19.72-32,19.72A48.48,48.48,0,0,0,11.27,43.69Z"/><path d="M52.73,19.2l6.14-6.14L54.63,8.81l-7,7h0l-6,6h0L39,24.41h0l-7,7L20.09,43.35,16.4,47h0l-7,7,4.25,4.24,8.71-8.71A31.15,31.15,0,0,0,32,51.16c20.3,0,32-19.72,32-19.72A48.54,48.54,0,0,0,52.73,19.2ZM32,45.07a13.63,13.63,0,0,1-4.4-.74l3-3a10.12,10.12,0,0,0,1.36.1,10,10,0,0,0,10-9.95,10.12,10.12,0,0,0-.1-1.36l3-3A13.6,13.6,0,0,1,32,45.07Z"/></svg>
-                    Hide    
-                    `
-                    this.arrayOfInput.forEach(input => input.setAttribute('type', 'text'))
-                }
-                else {
-                    this.toggleButton.innerHTML = `
-					<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="9.95"/><path d="M32,12.28C11.7,12.28,0,32,0,32S11.7,51.72,32,51.72,64,32,64,32,52.3,12.28,32,12.28Zm0,33.35A13.63,13.63,0,1,1,45.63,32,13.64,13.64,0,0,1,32,45.63Z"/></svg>
-                    Show
-                `
-				this.arrayOfInput.forEach(input => input.setAttribute('type', 'password'))
-				
-			}
-		}
-
-		connectedCallback() {
-			if (this.hasAttribute('pin-length')) {
-				const pinLength = parseInt(this.getAttribute('pin-length'))
-				this.pinDigits = pinLength
-				this.style.setProperty('--pin-length', pinLength)
-			}
-
-			this.render()
-
-			this.toggleButton.addEventListener('click', this.toggleVisiblity)
-			
-			this.container.addEventListener('input', this.handleInput);
-			this.container.addEventListener('keydown', this.handleKeydown);
-		}
-		disconnectedCallback() {
-			this.toggleButton.removeEventListener('click', this.toggleVisiblity)
-
-			this.container.removeEventListener('input', this.handleInput);
-			this.container.removeEventListener('keydown', this.handleKeydown);
-		}
-	})
diff --git a/Standard UI Components/components.min.js b/Standard UI Components/components.min.js
new file mode 100644
index 0000000..d7c08f2
--- /dev/null
+++ b/Standard UI Components/components.min.js	
@@ -0,0 +1 @@
+//Buttonconst smButton=document.createElement('template')smButton.innerHTML=` <style>*{padding: 0; margin: 0; box-sizing: border-box;}:host{display: inline-flex;}:host([disabled='true']) .button{cursor: default; opacity: 1; background: rgba(var(--text-color), 0.4) !important; color: rgba(var(--foreground-color), 1);}:host([variant='primary']) .button{background: var(--accent-color); color: rgba(var(--foreground-color), 1);}:host([variant='outlined']) .button{box-shadow: 0 0 0 0.1rem var(--accent-color) inset; background: rgba(var(--foreground-color), 1); color: var(--accent-color);}:host([variant='no-outline']) .button{background: rgba(var(--foreground-color), 1); color: var(--accent-color);}.button{display: flex; padding: 0.6rem 0.9rem; cursor: pointer; user-select: none; border-radius: 0.2rem; justify-content: center; transition: box-shadow 0.3s; text-transform: uppercase; font-weight: 500; color: rgba(var(--text-color), 0.9); letter-spacing: 0.1rem; font-family: var(--font-family); font-size: 0.9rem; background: rgba(var(--text-color), 0.1); -webkit-tap-highlight-color: transparent; outline: none;}:host(:not([disabled="true"])) .button:focus{box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);}:host([variant='outlined']) .button:focus{box-shadow: 0 0 0 0.1rem var(--accent-color)inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);}@media (hover: hover){:host(:not([disabled="true"])) .button:active{box-shadow: none !important;}:host([variant='outlined']) .button:active{box-shadow: 0 0 0 0.1rem var(--accent-color)inset !important;}:host(:not([disabled="true"])) .button:hover{box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);}:host([variant='outlined']) .button:hover{box-shadow: 0 0 0 0.1rem var(--accent-color)inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);}}@media (hover: none){:host(:not([disabled="true"])) .button:active{box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);}:host([variant='outlined']) .button:active{box-shadow: 0 0 0 0.1rem var(--accent-color)inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);}}</style> <div class="button" tabindex="0" role="button"> <slot></slot> </div>`;customElements.define('sm-button', class extends HTMLElement{constructor(){super() this.attachShadow({mode: 'open'}).append(smButton.content.cloneNode(true))}static get observedAttributes(){return ['disabled']}get disabled(){return this.getAttribute('disabled')}set disabled(val){this.setAttribute('disabled', val)}dispatch(){if (this.getAttribute('disabled')==='true'){this.dispatchEvent(new CustomEvent('disabled',{bubbles: true, composed: true}))}else{this.dispatchEvent(new CustomEvent('clicked',{bubbles: true, composed: true}))}}connectedCallback(){this.addEventListener('click', (e)=>{this.dispatch()}) this.addEventListener('keyup', (e)=>{if (e.code==="Enter" || e.code==="Space") this.dispatch()})}attributeChangedCallback(name, oldValue, newValue){}})//Inputconst smInput=document.createElement('template')smInput.innerHTML=` <style>*{padding: 0; margin: 0; box-sizing: border-box;}input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration{display: none;}input[type=number]{-moz-appearance:textfield;}input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{-webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0;}input:invalid{outline: none; box-shadow: none;}::-moz-focus-inner{border: none;}:host{display: inline-flex;}.hide{opacity: 0 !important; pointer-events: none !important;}.icon{fill: none; height: 1.6rem; width: 1.6rem; padding: 0.5rem; stroke: rgba(var(--text-color), 0.7); stroke-width: 10; overflow: visible; stroke-linecap: round; border-radius: 1rem; stroke-linejoin: round; cursor: pointer; min-width: 0;}.input{display: flex; align-items: center; position: relative; gap: 1rem; padding: 0.6rem 1rem; border-radius: 0.2em; transition: opacity 0.3s; background: rgba(var(--text-color), 0.1); font-family: var(--font-family); width: 100% outline: none;}input:focus{caret-color: var(--accent-color);}.input:focus-within{box-shadow: 0 0 0 0.1rem var(--accent-color);}.label{user-select: none; opacity: .7; font-weight: 400; font-size: 1rem; position: absolute; top: 0; transition: transform 0.3s; -webkit-transform-origin: left; transform-origin: left; pointer-events: none; will-change: transform; text-transform: capitalize;}.container{display: flex; position: relative; align-items: center; flex: 1;}input{font-size: 1rem; border: none; background: transparent; outline: none; color: rgba(var(--text-color), 1); width: 100%;}.animate-label .container input{-webkit-transform: translateY(0.5rem); transform: translateY(0.5rem);}.animate-label .container .label{-webkit-transform: translateY(-60%) scale(0.7); transform: translateY(-60%) scale(0.7); opacity: 1; color: var(--accent-color)}.helper-text{color: var(--error-color); padding: 0.4rem 1rem;}@media (any-hover: hover){.icon:hover{background: rgba(var(--text-color), 0.1);}}</style> <div> <label class="input"> <slot name="icon"></slot> <div class="container"> <input/> <div class="label"></div></div><svg class="icon clear hide" viewBox="0 0 64 64"> <title>clear</title> <line x1="64" y1="0" x2="0" y2="64"/> <line x1="64" y1="64" x2="0" y2="0"/> </svg> </label> <div class="helper-text hide"></div></div>`;customElements.define('sm-input', class extends HTMLElement{constructor(){super() this.attachShadow({mode: 'open'}).append(smInput.content.cloneNode(true))}static get observedAttributes(){return ['placeholder']}get value(){return this.shadowRoot.querySelector('input').value}set value(val){this.shadowRoot.querySelector('input').value=val;}get placeholder(){return this.getAttribute('placeholder')}set placeholder(val){this.setAttribute('placeholder', val)}get type(){return this.getAttribute('type')}get isValid(){return this.shadowRoot.querySelector('input').checkValidity()}preventNonNumericalInput(e){let keyCode=e.keyCode; if (!((keyCode > 47 && keyCode < 56) || (keyCode > 36 && keyCode < 39) || (keyCode > 95 && keyCode < 104) || keyCode===110 || (keyCode > 7 && keyCode < 19))){e.preventDefault();}}checkInput(){if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder')==='') return; if (this.input.value !==''){if (this.animate) this.inputParent.classList.add('animate-label') else this.label.classList.add('hide') this.clearBtn.classList.remove('hide')}else{if (this.animate) this.inputParent.classList.remove('animate-label') else this.label.classList.remove('hide') this.clearBtn.classList.add('hide')}if (this.valueChanged){if (this.input.checkValidity()){this.helperText.classList.add('hide') this.inputParent.style.boxShadow=``}else{this.helperText.classList.remove('hide') this.inputParent.style.boxShadow=`0 0 0 0.1rem ${this.computedStyle.getPropertyValue('--error-color')}`}}}connectedCallback(){this.inputParent=this.shadowRoot.querySelector('.input') this.computedStyle=window.getComputedStyle(this.inputParent) this.clearBtn=this.shadowRoot.querySelector('.clear') this.label=this.shadowRoot.querySelector('.label') this.helperText=this.shadowRoot.querySelector('.helper-text') this.valueChanged=false; this.animate=this.hasAttribute('animate') this.input=this.shadowRoot.querySelector('input') this.shadowRoot.querySelector('.label').textContent=this.getAttribute('placeholder') if (this.hasAttribute('value')){this.input.value=this.getAttribute('value') this.checkInput()}if (this.hasAttribute('helper-text')){this.helperText.textContent=this.getAttribute('helper-text')}if (this.hasAttribute('type')){if (this.getAttribute('type')==='number'){this.input.setAttribute('inputmode', 'numeric')}else this.input.setAttribute('type', this.getAttribute('type'))}else this.input.setAttribute('type', 'text') this.input.addEventListener('keydown', e=>{if (this.getAttribute('type')==='number') this.preventNonNumericalInput(e);}) this.input.addEventListener('input', e=>{this.checkInput()}) this.input.addEventListener('change', e=>{this.valueChanged=true; if (this.input.checkValidity()) this.helperText.classList.add('hide') else this.helperText.classList.remove('hide')}) this.clearBtn.addEventListener('click', e=>{this.input.value='' this.checkInput()})}attributeChangedCallback(name, oldValue, newValue){if (oldValue !==newValue){if (name==='placeholder') this.shadowRoot.querySelector('.label').textContent=newValue;}}})// tab-headerconst smTabs=document.createElement('template')smTabs.innerHTML=`<style>*{padding: 0; margin: 0; box-sizing: border-box;}:host{display: flex;}.tabs{position: relative; display: grid; grid-template-rows: auto 1fr;}.panel-container{position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden auto;}.tab-header{display: grid; grid-auto-flow: column; justify-content: flex-start; gap: 1rem; position: relative; overflow: auto hidden; max-width: 100%; scrollbar-width: 0;}.indicator{position: absolute; left: 0; bottom: 0; height: 0.15rem; border-radius: 1rem 1rem 0 0; background: var(--accent-color); transition: transform 0.3s, width 0.3s;}:host([variant="tab"]) .indicator{height: 100%; border-radius: 0.2rem}:host([variant="tab"]) .tab-header{border-bottom: none;}.hide-completely{display: none;}:host([variant="tab"]) .tab-header{gap: 0; display: inline-grid; justify-self: flex-start; background: rgba(var(--text-color), 0.1); border-radius: 0.2rem;}:host([variant="tab"]) slot[name="tab"]::slotted(.active){color: rgba(var(--foreground-color), 1);}slot[name="tab"]::slotted(.active){color: var(--accent-color); opacity: 1;}slot[name="panel"]::slotted(.hide-completely){display: none;}@media (hover: none){.tab-header::-webkit-scrollbar-track{-webkit-box-shadow: none !important; background-color: transparent !important;}.tab-header::-webkit-scrollbar{height: 0; background-color: transparent;}}</style><div class="tabs"> <div part="tab-header" class="tab-header"> <slot name="tab">Nothing to see here</slot> <div class="indicator"></div></div><div part="panel-container" class="panel-container"> <slot name="panel">Nothing to see here</slot> </div></div>`;customElements.define('sm-tabs', class extends HTMLElement{constructor(){super() this.attachShadow({mode: 'open'}).append(smTabs.content.cloneNode(true)) this.indicator=this.shadowRoot.querySelector('.indicator'); this.tabSlot=this.shadowRoot.querySelector('slot[name="tab"]'); this.panelSlot=this.shadowRoot.querySelector('slot[name="panel"]'); this.tabHeader=this.shadowRoot.querySelector('.tab-header');}connectedCallback(){//animations let flyInLeft=[{opacity: 0, transform: 'translateX(-1rem)'},{opacity: 1, transform: 'none'}], flyInRight=[{opacity: 0, transform: 'translateX(1rem)'},{opacity: 1, transform: 'none'}], flyOutLeft=[{opacity: 1, transform: 'none'},{opacity: 0, transform: 'translateX(-1rem)'}], flyOutRight=[{opacity: 1, transform: 'none'},{opacity: 0, transform: 'translateX(1rem)'}], animationOptions={duration: 300, fill: 'forwards', easing: 'ease'}this.prevTab this.allTabs this.shadowRoot.querySelector('slot[name="panel"]').addEventListener('slotchange', ()=>{this.shadowRoot.querySelector('slot[name="panel"]').assignedElements().forEach((panel, index)=>{panel.classList.add('hide-completely')})}) this.shadowRoot.querySelector('slot[name="tab"]').addEventListener('slotchange', ()=>{this.allTabs=this.shadowRoot.querySelector('slot[name="tab"]').assignedElements(); this.shadowRoot.querySelector('slot[name="tab"]').assignedElements().forEach((panel, index)=>{panel.setAttribute('rank', index + 1)})}) this._targetBodyFlyRight=(targetBody)=>{targetBody.classList.remove('hide-completely') targetBody.animate(flyInRight, animationOptions)}this._targetBodyFlyLeft=(targetBody)=>{targetBody.classList.remove('hide-completely') targetBody.animate(flyInLeft, animationOptions)}this.tabSlot.addEventListener('click', e=>{if (e.target===this.prevTab || !e.target.closest('sm-tab')) return if (this.prevTab) this.prevTab.classList.remove('active') e.target.classList.add('active') e.target.scrollIntoView({behavior: 'smooth', block: 'nearest', inline: 'center'}) this.indicator.setAttribute('style', `width: ${e.target.getBoundingClientRect().width}px; transform: translateX(${e.target.getBoundingClientRect().left - e.target.parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`) if (this.prevTab){let targetBody=e.target.nextElementSibling, currentBody=this.prevTab.nextElementSibling; if (this.prevTab.getAttribute('rank') < e.target.getAttribute('rank')){if (currentBody && !targetBody) currentBody.animate(flyOutLeft, animationOptions).onfinish=()=>{currentBody.classList.add('hide-completely')}else if (targetBody && !currentBody){this._targetBodyFlyRight(targetBody)}else if (currentBody && targetBody){currentBody.animate(flyOutLeft, animationOptions).onfinish=()=>{currentBody.classList.add('hide-completely') this._targetBodyFlyRight(targetBody)}}}else{if (currentBody && !targetBody) currentBody.animate(flyOutRight, animationOptions).onfinish=()=>{currentBody.classList.add('hide-completely')}else if (targetBody && !currentBody){this._targetBodyFlyLeft(targetBody)}else if (currentBody && targetBody){currentBody.animate(flyOutRight, animationOptions).onfinish=()=>{currentBody.classList.add('hide-completely') this._targetBodyFlyLeft(targetBody)}}}}else{e.target.nextElementSibling.classList.remove('hide-completely')}this.prevTab=e.target;}) let resizeObserver=new ResizeObserver(entries=>{entries.forEach((entry)=>{if (this.prevTab){let tabDimensions=this.prevTab.getBoundingClientRect(); this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabSlot.assignedElements()[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)}})}) resizeObserver.observe(this) let observer=new IntersectionObserver((entries)=>{entries.forEach((entry)=>{this.indicator.style.transition='none' if (entry.isIntersecting){let activeElement=this.tabSlot.assignedElements().filter(element=>{if (element.classList.contains('active')) return true}) if (activeElement.length){let tabDimensions=activeElement[0].getBoundingClientRect(); this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - activeElement[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)}else{this.tabSlot.assignedElements()[0].classList.add('active') this.panelSlot.assignedElements()[0].classList.remove('hide-completely') let tabDimensions=this.tabSlot.assignedElements()[0].getBoundingClientRect(); this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabSlot.assignedElements()[0].parentNode.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`) this.prevTab=this.tabSlot.assignedElements()[0];}}})},{threshold: 1.0}) observer.observe(this) if (this.hasAttribute('enable-flick') && this.getAttribute('enable-flick')=='true'){let touchStartTime=0, touchEndTime=0, swipeTimeThreshold=200, swipeDistanceThreshold=20, startingPointX=0, endingPointX=0, currentIndex=0; this.addEventListener('touchstart', e=>{touchStartTime=e.timeStamp startingPointX=e.changedTouches[0].clientX}) this.panelSlot.addEventListener('touchend', e=>{touchEndTime=e.timeStamp endingPointX=e.changedTouches[0].clientX if (touchEndTime - touchStartTime < swipeTimeThreshold){currentIndex=this.allTabs.findIndex(element=> element.classList.contains('active')) if (startingPointX > endingPointX && startingPointX - endingPointX > swipeDistanceThreshold && currentIndex < this.allTabs.length){this.allTabs[currentIndex + 1].click()}else if (startingPointX < endingPointX && endingPointX - startingPointX > swipeDistanceThreshold && currentIndex > 0){this.allTabs[currentIndex - 1].click()}}})}}})// tabconst smTab=document.createElement('template')smTab.innerHTML=`<style>*{padding: 0; margin: 0; box-sizing: border-box;}:host{position: relative; display: inline-flex; z-index: 1;}.tab{position: relative; user-select: none; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; white-space: nowrap; padding: 0.6rem 0.8rem; font-weight: 500; word-spacing: 0.1em; text-align: center; transition: color 0.3s; text-transform: capitalize; font-family: var(--font-family);}@media (hover: hover){:host(.active) .tab{opacity: 1;}.tab{opacity: 0.7}.tab:hover{opacity: 1}}</style><div part="tab" class="tab"> <slot></slot></div>`;customElements.define('sm-tab', class extends HTMLElement{constructor(){super() this.shadow=this.attachShadow({mode: 'open'}).append(smTab.content.cloneNode(true))}})//chcekboxconst smCheckbox=document.createElement('template')smCheckbox.innerHTML=`<style>*{padding: 0; margin: 0; box-sizing: border-box;}:host{display: inline-flex;}.checkbox{position: relative; display:flex; align-items: center; cursor: pointer; height: 1.5rem; outline: none; -webkit-tap-highlight-color: transparent;}p{margin-left: 2rem;}.checkbox:active .icon,.checkbox:focus .icon{background: rgba(var(--text-color), 0.2);}.checkbox input{display: none;}.checkbox .checkmark{stroke-dashoffset: -65; stroke-dasharray: 65; -webkit-transition: stroke-dashoffset 0.3s; transition: stroke-dashoffset 0.3s;}.checkbox input:checked ~ svg .checkmark{stroke-dashoffset: 0; stroke: rgba(var(--foreground-color), 1);}.checkbox input:checked ~ svg{stroke: var(--accent-color); fill: var(--accent-color); stroke-width: 8;}.icon{position: absolute; fill: none; height: 2.6rem; width: 2.6rem; padding: 0.7rem; stroke: rgba(var(--text-color), 0.7); stroke-width: 6; overflow: visible; stroke-linecap: round; stroke-linejoin: round; border-radius: 2rem; transition: background 0.3s; left: -0.5rem;}.disabled{opacity: 0.6; pointer-events: none;}</style><label class="checkbox" tabindex="0"> <input type="checkbox"> <svg class="icon" viewBox="0 0 64 64"> <title>checkbox</title> <rect class="box" x="0" y="0" width="64" height="64" rx="4"/> <path class="checkmark" d="M50.52,19.56,26,44.08,13.48,31.56"/> </svg> <p><slot></slot></p></label>`customElements.define('sm-checkbox', class extends HTMLElement{constructor(){super() this.attachShadow({mode: 'open'}).append(smCheckbox.content.cloneNode(true)) this.checkbox=this.shadowRoot.querySelector('.checkbox'); this.input=this.shadowRoot.querySelector('input') this.isChecked=false this.isDisabled=false}static get observedAttributes(){return ['disabled', 'checked']}get disabled(){return this.getAttribute('disabled')}set disabled(val){this.setAttribute('disabled', val)}get checked(){return this.getAttribute('checked')}set checked(value){this.setAttribute('checked', value)}dispatch(){this.dispatchEvent(new CustomEvent('change',{bubbles: true, composed: true}))}connectedCallback(){this.addEventListener('keyup', e=>{if ((e.code==="Enter" || e.code==="Space") && this.isDisabled==false){this.isChecked=!this.isChecked this.setAttribute('checked', this.isChecked)}})}attributeChangedCallback(name, oldValue, newValue){if (oldValue !==newValue){if (name==='disabled'){if (newValue==='true'){this.checkbox.classList.add('disabled') this.isDisabled=true}else{this.checkbox.classList.remove('disabled') this.isDisabled=false}}if (name==='checked'){if (newValue=='true'){this.isChecked=true this.input.checked=true this.dispatch()}else{this.isChecked=false this.input.checked=false this.dispatch()}}}}})//audioconst smAudio=document.createElement('template')smAudio.innerHTML=`<style>*{box-sizing: border-box; padding: 0; margin: 0;}:host{display: flex;}.audio{position: relative; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-user-select: none; user-select: none; padding: 0.6rem; border-radius: 0.2rem; background: rgba(var(--text-color), 0.08); overflow: hidden; width: 100%;}.hide{display: none;}.icon{stroke: rgba(var(--text-color), 1); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; fill: none; overflow: visible; height: 2.1rem; width: 2.1rem; padding: 0.6rem; cursor: pointer; border-radius: 2rem; margin-right: 0.5rem;}.icon:hover{background: rgba(var(--text-color), 0.1);}audio{display: none;}.track{position: absolute; height: 0.2rem; bottom: 0; background: var(--accent-color); left: 0; -webkit-transition: width 0.2s; transition: width 0.2s; pointer-events: none; z-index: 0; border-radius: 0.2rem;}.disabled{opacity: 0.6; pointer-events: none;}</style><div class="audio"><svg class="icon play" viewBox="-6 0 64 64"><title>play</title><path d="M57.12,26.79,12.88,1.31a6,6,0,0,0-9,5.21v51a6,6,0,0,0,9,5.21L57.12,37.21A6,6,0,0,0,57.12,26.79Z"/></svg><svg class="icon pause hide" viewBox="0 0 64 64"><title>pause</title><line x1="17.5" x2="17.5" y2="64"/><line x1="46.5" x2="46.5" y2="64"/></svg><h5 class="current-time"></h5> / <h5 class="duration"></h5><audio src=""></audio><div class="track"></div></audio>`;customElements.define('sm-audio', class extends HTMLElement{constructor(){super(); this.attachShadow({mode: 'open'}).append(smAudio.content.cloneNode(true)) this.playing=false;}static get observedAttributes(){return ['src']}play(){this.audio.play() this.playing=false; this.pauseBtn.classList.remove('hide') this.playBtn.classList.add('hide')}pause(){this.audio.pause() this.playing=true; this.pauseBtn.classList.add('hide') this.playBtn.classList.remove('hide')}get isPlaying(){return this.playing;}connectedCallback(){this.playBtn=this.shadowRoot.querySelector('.play'); this.pauseBtn=this.shadowRoot.querySelector('.pause'); this.audio=this.shadowRoot.querySelector('audio') this.playBtn.addEventListener('click', e=>{this.play()}) this.pauseBtn.addEventListener('click', e=>{this.pause()}) this.audio.addEventListener('ended', e=>{this.pause()}) let width; if ('ResizeObserver' in window){let resizeObserver=new ResizeObserver(entries=>{entries.forEach(entry=>{width=entry.contentRect.width;})}) resizeObserver.observe(this)}else{let observer=new IntersectionObserver((entries, observer)=>{if (entries[0].isIntersecting) width=this.shadowRoot.querySelector('.audio').offsetWidth;},{threshold: 1}) observer.observe(this)}this.audio.addEventListener('timeupdate', e=>{let time=this.audio.currentTime, minutes=Math.floor(time / 60), seconds=Math.floor(time - minutes * 60), y=seconds < 10 ? "0" + seconds : seconds; this.shadowRoot.querySelector('.current-time').textContent=`${minutes}:${y}` this.shadowRoot.querySelector('.track').style.width=(width / this.audio.duration) * this.audio.currentTime + 'px'})}attributeChangedCallback(name, oldValue, newValue){if (oldValue !==newValue){if (name==='src'){if (this.hasAttribute('src') && newValue.trim() !==''){this.shadowRoot.querySelector('audio').src=newValue; this.shadowRoot.querySelector('audio').onloadedmetadata=()=>{let duration=this.audio.duration, minutes=Math.floor(duration / 60), seconds=Math.floor(duration - minutes * 60), y=seconds < 10 ? "0" + seconds : seconds; this.shadowRoot.querySelector('.duration').textContent=`${minutes}:${y}`;}}else this.classList.add('disabled')}}}})//switchconst smSwitch=document.createElement('template')smSwitch.innerHTML=`<style>*{box-sizing: border-box; padding: 0; margin: 0;}:host{display: inline-flex;}.switch{position: relative; display: flex; align-items: center; width: 2.4rem; padding: 0.2rem; cursor: pointer; outline: none; border-radius: 2rem; -webkit-tap-highlight-color: transparent;}input{display: none;}.track{position: absolute; left: 0; right: 0; height: 1.4rem; -webkit-transition: background 0.3s; transition: background 0.3s; background: rgba(var(--text-color), 0.4); box-shadow: 0 0.1rem 0.3rem #00000040 inset; border-radius: 1rem;}.switch:active .button::after,.switch:focus .button::after{opacity: 1}.switch:focus:not(:focus-visible){opacity: 0;}.switch:focus-visible .button::after{opacity: 1}.button::after{content: ''; display: flex; position: absolute; height: 2.6rem; width: 2.6rem; background: rgba(var(--text-color), 0.2); border-radius: 2rem; opacity: 0; transition: opacity 0.3s;}.button{position: relative; display: inline-flex; height: 1rem; width: 1rem; justify-content: center; align-items: center; border-radius: 1rem; box-shadow: 0 0.1rem 0.4rem #00000060; transition: transform 0.3s; border: solid 0.3rem rgba(var(--foreground-color), 1);}input:checked ~ .button{transform: translateX(100%);}input:checked ~ .track{background: var(--accent-color);}.disabled{opacity: 0.6; pointer-events: none;}</style><label class="switch" tabindex="0"> <input type="checkbox"> <div class="track"></div><div class="button"></div></label>`customElements.define('sm-switch', class extends HTMLElement{constructor(){super() this.attachShadow({mode: 'open'}).append(smSwitch.content.cloneNode(true)) this.switch=this.shadowRoot.querySelector('.switch'); this.input=this.shadowRoot.querySelector('input') this.isChecked=false this.isDisabled=false}static get observedAttributes(){return ['disabled', 'checked']}get disabled(){return this.getAttribute('disabled')}set disabled(val){this.setAttribute('disabled', val)}get checked(){return this.isChecked}set checked(value){this.setAttribute('checked', value)}dispatch(){this.dispatchEvent(new CustomEvent('change',{bubbles: true, composed: true}))}connectedCallback(){this.addEventListener('keyup', e=>{if ((e.code==="Enter" || e.code==="Space") && this.isDisabled==false){this.isChecked=!this.isChecked this.setAttribute('checked', this.isChecked)}})}attributeChangedCallback(name, oldValue, newValue){if (oldValue !==newValue){if (name==='disabled'){if (newValue==='true'){this.switch.classList.add('disabled') this.isDisabled=true}else{this.switch.classList.remove('disabled') this.isDisabled=false}}if (name==='checked'){if (newValue=='true'){this.isChecked=true this.input.checked=true this.dispatch()}else{this.isChecked=false this.input.checked=false this.dispatch()}}}}})// selectconst smSelect=document.createElement('template')smSelect.innerHTML=` <style>*{padding: 0; margin: 0; box-sizing: border-box;}.icon{fill: none; height: 0.8rem; width: 0.8rem; stroke: rgba(var(--text-color), 0.7); stroke-width: 6; overflow: visible; stroke-linecap: round; stroke-linejoin: round;}:host{display: inline-flex;}.hide{opacity: 0; pointer-events: none;}.select{position: relative; display: flex; flex-direction: column; cursor: pointer; width: 100%; -webkit-tap-highlight-color: transparent;}.option-text{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.selection{border-radius: 0.2rem; display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'heading heading' '. .'; padding: 0.4rem 1rem; background: rgba(var(--text-color), 0.06); border: solid 1px rgba(var(--text-color), 0.2); align-items: center; outline: none;}.selection:focus{box-shadow: 0 0 0 0.1rem var(--accent-color)}.icon{margin-left: 1rem;}:host([align-select="left"]) .options{left: 0;}:host([align-select="right"]) .options{right: 0;}.options{top: 100%; margin-top: 0.5rem; overflow: hidden auto; position: absolute; grid-area: options; display: flex; flex-direction: column; min-width: 100%; background: rgba(var(--foreground-color), 1); transition: opacity 0.3s, top 0.3s; border: solid 1px rgba(var(--text-color), 0.2); border-radius: 0.2rem; z-index: 2; box-shadow: 0.4rem 0.8rem 1.2rem #00000030;}.rotate{transform: rotate(180deg)}</style> <div class="select" > <div class="selection" tabindex="0"> <div class="option-text"></div><svg class="icon toggle" viewBox="0 0 64 64"> <polyline points="63.65 15.99 32 47.66 0.35 15.99"/> </svg> </div><div class="options hide"> <slot></slot> </div></div>`;customElements.define('sm-select', class extends HTMLElement{constructor(){super() this.attachShadow({mode: 'open'}).append(smSelect.content.cloneNode(true))}static get observedAttributes(){return ['value']}get value(){return this.getAttribute('value')}set value(val){this.setAttribute('value', val)}collapse(){this.optionList.animate(this.slideUp, this.animationOptions) this.optionList.classList.add('hide') this.chevron.classList.remove('rotate') this.open=false}connectedCallback(){this.availableOptions this.optionList=this.shadowRoot.querySelector('.options') this.chevron=this.shadowRoot.querySelector('.toggle') let slot=this.shadowRoot.querySelector('.options slot'), selection=this.shadowRoot.querySelector('.selection'), previousOption this.open=false; this.slideDown=[{transform: `translateY(-0.5rem)`},{transform: `translateY(0)`}], this.slideUp=[{transform: `translateY(0)`},{transform: `translateY(-0.5rem)`}], this.animationOptions={duration: 300, fill: "forwards", easing: 'ease'}selection.addEventListener('click', e=>{if (!this.open){this.optionList.classList.remove('hide') this.optionList.animate(this.slideDown, this.animationOptions) this.chevron.classList.add('rotate') this.open=true}else{this.collapse()}}) selection.addEventListener('keydown', e=>{if (e.code==='ArrowDown' || e.code==='ArrowRight'){e.preventDefault() this.availableOptions[0].focus()}if (e.code==='Enter' || e.code==='Space') if (!this.open){this.optionList.classList.remove('hide') this.optionList.animate(this.slideDown, this.animationOptions) this.chevron.classList.add('rotate') this.open=true}else{this.collapse()}}) this.optionList.addEventListener('keydown', e=>{if (e.code==='ArrowUp' || e.code==='ArrowRight'){e.preventDefault() if (document.activeElement.previousElementSibling){document.activeElement.previousElementSibling.focus()}}if (e.code==='ArrowDown' || e.code==='ArrowLeft'){e.preventDefault() if (document.activeElement.nextElementSibling) document.activeElement.nextElementSibling.focus()}}) this.addEventListener('optionSelected', e=>{if (previousOption !==e.target){this.setAttribute('value', e.detail.value) this.shadowRoot.querySelector('.option-text').textContent=e.detail.text; this.dispatchEvent(new CustomEvent('change',{bubbles: true, composed: true})) if (previousOption){previousOption.classList.remove('check-selected')}previousOption=e.target;}if (!e.detail.switching) this.collapse() e.target.classList.add('check-selected')}) slot.addEventListener('slotchange', e=>{this.availableOptions=slot.assignedElements() if (this.availableOptions[0]){let firstElement=this.availableOptions[0]; previousOption=firstElement; firstElement.classList.add('check-selected') this.setAttribute('value', firstElement.getAttribute('value')) this.shadowRoot.querySelector('.option-text').textContent=firstElement.textContent this.availableOptions.forEach((element, index)=>{element.setAttribute('data-rank', index + 1); element.setAttribute('tabindex', "0");})}}); document.addEventListener('mousedown', e=>{if (!this.contains(e.target) && this.open){this.collapse()}})}})// optionconst smOption=document.createElement('template')smOption.innerHTML=` <style>*{padding: 0; margin: 0; box-sizing: border-box;}:host{display: flex;}.option{min-width: 100%; padding: 0.8rem 1.2rem; cursor: pointer; overflow-wrap: break-word; outline: none; display: flex; align-items: center;}:host(:focus){outline: none; background: rgba(var(--text-color), 0.1);}:host(:focus) .option .icon{opacity: 0.4}:host(.check-selected) .icon{opacity: 1 !important}.icon{margin-right: 0.8rem; fill: none; height: 0.8rem; width: 0.8rem; stroke: rgba(var(--text-color), 0.7); stroke-width: 10; overflow: visible; stroke-linecap: round; border-radius: 1rem; stroke-linejoin: round; opacity: 0;}@media (hover: hover){.option:hover{background: rgba(var(--text-color), 0.1);}.option:hover .icon{opacity: 0.4}}</style> <div class="option"> <svg class="icon" viewBox="0 0 64 64"> <polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/> </svg> <slot></slot> </div>`;customElements.define('sm-option', class extends HTMLElement{constructor(){super() this.attachShadow({mode: 'open'}).append(smOption.content.cloneNode(true))}sendDetails(switching){let optionSelected=new CustomEvent('optionSelected',{bubbles: true, composed: true, detail:{text: this.textContent, value: this.getAttribute('value'), switching: switching}}) this.dispatchEvent(optionSelected)}connectedCallback(){let validKey=[ 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'] this.addEventListener('click', e=>{this.sendDetails()}) this.addEventListener('keyup', e=>{if (e.code==='Enter' || e.code==='Space'){e.preventDefault() this.sendDetails(false)}if (validKey.includes(e.code)){e.preventDefault() this.sendDetails(true)}}) if (this.hasAttribute('default')){setTimeout(()=>{this.sendDetails()}, 0);}}})// selectconst smStripSelect=document.createElement('template')smStripSelect.innerHTML=` <style>*{padding: 0; margin: 0; box-sizing: border-box;}:host{display: flex;}.icon{position: absolute; display: flex; fill: none; height: 2.6rem; width: 2.6rem; padding: 0.9rem; stroke: rgba(var(--text-color), 0.7); stroke-width: 10; overflow: visible; stroke-linecap: round; stroke-linejoin: round; cursor: pointer; min-width: 0; z-index: 1; background: rgba(var(--foreground-color), 1); -webkit-tap-highlight-color: transparent; transition: opacity 0.3s;}.hide{pointer-events: none; opacity: 0;}.select-container{position: relative; display: flex; width: 100%; align-items: center;}.select{position: relative; display: flex; gap: 0.5rem; max-width: 100%; overflow: auto hidden;}.previous-item{left: 0;}.next-item{right: 0;}.left,.right{position: absolute; width: 1rem; height: 100%; transition: opacity 0.3s; z-index: 1;}.left{background: linear-gradient(to left, transparent, rgba(var(--foreground-color), 1))}.right{right: 0; background: linear-gradient(to right, transparent, rgba(var(--foreground-color), 1))}slot::slotted(.active){border-radius: 2rem; opacity: 1; background-color: rgba(var(--text-color), .6); color: rgba(var(--foreground-color), 1);}@media (hover: none){::-webkit-scrollbar-track{-webkit-box-shadow: none !important; background-color: transparent !important;}::-webkit-scrollbar{height: 0; background-color: transparent;}.icon{display: none;}.left,.right{display: block;}}@media (hover: hover){.select{overflow: hidden;}.left,.right{display: none;}}</style> <div class="select-container"> <div class="left hide"></div><svg class="icon previous-item hide" viewBox="4 0 64 64"> <title>Previous</title> <polyline points="48.01 0.35 16.35 32 48.01 63.65"/> </svg> <div class="select"> <slot></slot> </div><svg class="icon next-item hide" viewBox="-6 0 64 64"> <title>Next</title> <polyline points="15.99 0.35 47.65 32 15.99 63.65"/> </svg> <div class="right hide"></div></div>`;customElements.define('sm-strip-select', class extends HTMLElement{constructor(){super() this.attachShadow({mode: 'open'}).append(smStripSelect.content.cloneNode(true))}static get observedAttributes(){return ['value']}get value(){return this.getAttribute('value')}set value(val){this.setAttribute('value', val)}scrollLeft(){this.select.scrollBy({top: 0, left: -this.scrollDistance, behavior: 'smooth'})}scrollRight(){this.select.scrollBy({top: 0, left: this.scrollDistance, behavior: 'smooth'})}connectedCallback(){let previousOption, slot=this.shadowRoot.querySelector('slot'); this.selectContainer=this.shadowRoot.querySelector('.select-container') this.select=this.shadowRoot.querySelector('.select') this.nextArrow=this.shadowRoot.querySelector('.next-item') this.previousArrow=this.shadowRoot.querySelector('.previous-item') this.nextGradient=this.shadowRoot.querySelector('.right') this.previousGradient=this.shadowRoot.querySelector('.left') this.selectOptions this.scrollDistance=this.selectContainer.getBoundingClientRect().width const firstElementObserver=new IntersectionObserver(entries=>{if (entries[0].isIntersecting){this.previousArrow.classList.add('hide') this.previousGradient.classList.add('hide')}else{this.previousArrow.classList.remove('hide') this.previousGradient.classList.remove('hide')}},{root: this.selectContainer, threshold: 0.95}) const lastElementObserver=new IntersectionObserver(entries=>{if (entries[0].isIntersecting){this.nextArrow.classList.add('hide') this.nextGradient.classList.add('hide')}else{this.nextArrow.classList.remove('hide') this.nextGradient.classList.remove('hide')}},{root: this.selectContainer, threshold: 0.95}) const selectObserver=new IntersectionObserver(entries=>{if (entries[0].isIntersecting){this.scrollDistance=this.selectContainer.getBoundingClientRect().width}}) selectObserver.observe(this.selectContainer) this.addEventListener('optionSelected', e=>{if (previousOption===e.target) return; if (previousOption) previousOption.classList.remove('active') e.target.classList.add('active') e.target.scrollIntoView({behavior: 'smooth', inline: 'center', block: 'nearest'}) this.setAttribute('value', e.detail.value) this.dispatchEvent(new CustomEvent('change',{bubbles: true, composed: true})) previousOption=e.target;}) slot.addEventListener('slotchange', e=>{this.selectOptions=slot.assignedElements() firstElementObserver.observe(this.selectOptions[0]) lastElementObserver.observe(this.selectOptions[this.selectOptions.length - 1]) if (this.selectOptions[0]){let firstElement=this.selectOptions[0]; this.setAttribute('value', firstElement.getAttribute('value')) firstElement.classList.add('active') previousOption=firstElement;}}); this.nextArrow.addEventListener('click', this.scrollRight) this.previousArrow.addEventListener('click', this.scrollLeft)}disconnectedCallback(){this.nextArrow.removeEventListener('click', this.scrollRight) this.previousArrow.removeEventListener('click', this.scrollLeft)}})// optionconst smStripOption=document.createElement('template')smStripOption.innerHTML=` <style>*{padding: 0; margin: 0; box-sizing: border-box;}:host{display: flex;}.option{padding: 0.4rem 0.8rem; cursor: pointer; overflow-wrap: break-word; outline: none; border-radius: 2rem; text-transform: capitalize; border: solid 1px rgba(var(--text-color), .3); opacity: 0.9;}.option:focus{background: rgba(var(--text-color), 0.1);}@media (hover: hover){.option{transition: background 0.3s;}.option:hover{background: rgba(var(--text-color), 0.1);}}</style> <div class="option" tabindex="0"> <slot></slot> </div>`;customElements.define('sm-strip-option', class extends HTMLElement{constructor(){super() this.attachShadow({mode: 'open'}).append(smStripOption.content.cloneNode(true))}sendDetails(){let optionSelected=new CustomEvent('optionSelected',{bubbles: true, composed: true, detail:{text: this.textContent, value: this.getAttribute('value')}}) this.dispatchEvent(optionSelected)}connectedCallback(){this.addEventListener('click', e=>{this.sendDetails()}) this.addEventListener('keyup', e=>{if (e.code==='Enter' || e.code==='Space'){e.preventDefault() this.sendDetails(false)}}) if (this.hasAttribute('default')){setTimeout(()=>{this.sendDetails()}, 0);}}})//popupconst smPopup=document.createElement('template')smPopup.innerHTML=`<style>*{padding: 0; margin: 0; box-sizing: border-box;}:host{display: grid;}.popup-container{display: grid; position: fixed; top: 0; bottom: 0; left: 0; right: 0; place-items: center; background: #00000060; z-index: 10; transition: opacity 0.3s ease;}.popup{flex-direction: column; align-self: flex-end; align-items: flex-start; flex-wrap: wrap; width: 100%; border-radius: 0.5rem 0.5rem 0 0; position: relative; display: flex; transform: translateY(100%); transition: transform 0.3s; background: rgba(var(--foreground-color), 1); box-shadow: 0 -1rem 2rem #00000020; overflow-y: auto; max-height: 100%;}.container-header{display: flex; width: 100%; align-items: center; justify-content: space-between;}.popup-top{display: flex; width: 100%;}.popup-body{padding: 1.5rem;}.heading{font-weight: 400;}.heading:first-letter{text-transform: uppercase;}.hide{opacity: 0; pointer-events: none;}.icon{fill: none; height: 1.6rem; width: 1.6rem; padding: 0.4rem; stroke: rgba(var(--text-color), 0.7); stroke-width: 8; overflow: visible; stroke-linecap: round; border-radius: 1rem; stroke-linejoin: round; cursor: pointer; min-width: 0; -webkit-tap-highlight-color: transparent;}@media screen and (min-width: 640px){.popup{width: 24rem; align-self: center; border-radius: 0.4rem; height: auto; transform: translateY(0) scale(0.9); box-shadow: 0 2rem 2rem #00000040;}.container-header{padding: 1.2rem 1.5rem;}}@media screen and (max-width: 640px){.popup-top{flex-direction: column; align-items: center;}.handle{height: 0.3rem; width: 2rem; background: rgba(var(--text-color), .2); border-radius: 1rem; margin: 0.5rem 0;}.heading{padding: 1rem 1.5rem}.close{height: 2rem; width: 2rem; padding: 0.55rem; margin-right: 1rem;}}</style><div class="popup-container hide" role="dialog"> <div class="popup"> <div class="popup-top"> <div class="handle"></div><div class="container-header"> <h3 class="heading"></h3> <svg class="icon close" viewBox="0 0 64 64"> <title>Close</title> <line x1="64" y1="0" x2="0" y2="64"/> <line x1="64" y1="64" x2="0" y2="0"/> </svg> </div></div><div class="popup-body"> <slot></slot> </div></div></div>`;customElements.define('sm-popup', class extends HTMLElement{constructor(){super() this.attachShadow({mode: 'open'}).append(smPopup.content.cloneNode(true))}resumeScrolling(){const scrollY=document.body.style.top; window.scrollTo(0, parseInt(scrollY || '0') * -1); setTimeout(()=>{document.body.setAttribute('style', `overflow: auto; top: initial`)}, 300);}show(pinned, popupStack){this.pinned=pinned this.popupStack=popupStack this.popupContainer.classList.remove('hide') if (window.innerWidth < 648) this.popup.style.transform='translateY(0)'; else this.popup.style.transform='scale(1)'; document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`)}hide(){this.popupContainer.classList.add('hide') if (window.innerWidth < 648) this.popup.style.transform='translateY(100%)'; else this.popup.style.transform='scale(0.9)'; if (typeof this.popupStack !=='undefined'){this.popupStack.pop() if (this.popupStack.items.length===0){this.resumeScrolling()}}else{this.resumeScrolling()}}handleTouchStart(e){this.touchStartY=e.changedTouches[0].clientY this.popup.style.transition='initial' 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)}/*else{offset=touchStartY - e.changedTouches[0].clientY; this.popup.style.transform=`translateY(-${offset}px)`}*/}handleTouchEnd(e){this.touchEndTime=e.timeStamp cancelAnimationFrame(this.touchEndAnimataion) this.touchEndY=e.changedTouches[0].clientY this.popup.style.transition='transform 0.3s' if (this.touchEndTime - this.touchStartTime > 200){if (this.touchEndY - this.touchStartY > this.threshold){this.hide()}else{this.show()}}else{if (this.touchEndY > this.touchStartY) this.hide()}}movePopup(){this.popup.style.transform=`translateY(${this.offset}px)`}connectedCallback(){this.pinned=false this.popupStack this.popupContainer=this.shadowRoot.querySelector('.popup-container') this.popup=this.shadowRoot.querySelector('.popup') this.offset this.popupHeader=this.shadowRoot.querySelector('.popup-top') this.touchStartY=0 this.touchEndY=0 this.touchStartTime=0 this.touchEndTime=0 this.threshold=this.popup.getBoundingClientRect().height * 0.3 this.touchEndAnimataion; if (this.hasAttribute('heading')) this.shadowRoot.querySelector('.heading').textContent=this.getAttribute('heading') this.popupContainer.addEventListener('mousedown', e=>{if (e.target===this.popupContainer && !this.pinned){this.hide()}}) this.shadowRoot.querySelector('.close').addEventListener('click', e=>{this.hide()}) this.popupHeader.addEventListener('touchstart', this.handleTouchStart) this.popupHeader.addEventListener('touchmove', this.handleTouchMove) this.popupHeader.addEventListener('touchend', this.handleTouchEnd)}disconnectedCallback(){this.popupHeader.removeEventListener('touchstart', this.handleTouchStart) this.popupHeader.removeEventListener('touchmove', this.handleTouchMove) this.popupHeader.removeEventListener('touchend', this.handleTouchEnd)}})//carouselconst smCarousel=document.createElement('template')smCarousel.innerHTML=`<style>*{padding: 0; margin: 0; box-sizing: border-box;}:host{display: flex;}.icon{position: absolute; display: flex; fill: none; height: 2.6rem; width: 2.6rem; border-radius: 3rem; padding: 0.9rem; stroke: rgba(var(--foreground-color), 0.8); stroke-width: 14; overflow: visible; stroke-linecap: round; stroke-linejoin: round; cursor: pointer; min-width: 0; background: rgba(var(--text-color), 1); box-shadow: 0 0.2rem 0.2rem #00000020, 0 0.5rem 1rem #00000040; -webkit-tap-highlight-color: transparent; transform: scale(0)}.hide{pointer-events: none; opacity: 0;}.expand{transform: scale(1)}.previous-item{left: 1rem;}.next-item{right: 1rem;}.left,.right{position: absolute; width: 2rem; height: 100%; transition: opacity 0.3s;}.left{background: linear-gradient(to left, transparent, rgba(var(--foreground-color), 0.6))}.right{right: 0; background: linear-gradient(to right, transparent, rgba(var(--foreground-color), 0.6))}.carousel-container{position: relative; display: flex; width: 100%; align-items: center;}.carousel{display: flex; max-width: 100%; overflow: auto hidden; scroll-snap-type: x mandatory;}slot::slotted(*){scroll-snap-align: center;}:host([align-items="start"]) slot::slotted(*){scroll-snap-align: start;}:host([align-items="center"]) slot::slotted(*){scroll-snap-align: center;}:host([align-items="end"]) slot::slotted(*){scroll-snap-align: end;}@media (hover: hover){.carousel{overflow: hidden;}.left,.right{display: none;}}@media (hover: none){::-webkit-scrollbar-track{-webkit-box-shadow: none !important; background-color: transparent !important;}::-webkit-scrollbar{height: 0; background-color: transparent;}.carousel{overflow: auto none;}.icon{display: none;}.left,.right{display: block;}}</style><div class="carousel-container"> <div class="left"></div><svg class="icon previous-item" viewBox="4 0 64 64"> <title>Previous</title> <polyline points="48.01 0.35 16.35 32 48.01 63.65"/> </svg> <div class="carousel"> <slot></slot> </div><svg class="icon next-item" viewBox="-6 0 64 64"> <title>Next</title> <polyline points="15.99 0.35 47.65 32 15.99 63.65"/> </svg> <div class="right"></div></div>`;customElements.define('sm-carousel', class extends HTMLElement{constructor(){super() this.shadow=this.attachShadow({mode: 'open'}).append(smCarousel.content.cloneNode(true))}scrollLeft(){this.carousel.scrollBy({top: 0, left: -this.scrollDistance, behavior: 'smooth'})}scrollRight(){this.carousel.scrollBy({top: 0, left: this.scrollDistance, behavior: 'smooth'})}connectedCallback(){this.carousel=this.shadowRoot.querySelector('.carousel') this.carouselContainer=this.shadowRoot.querySelector('.carousel-container') this.carouselSlot=this.shadowRoot.querySelector('slot') this.nextArrow=this.shadowRoot.querySelector('.next-item') this.previousArrow=this.shadowRoot.querySelector('.previous-item') this.nextGradient=this.shadowRoot.querySelector('.right') this.previousGradient=this.shadowRoot.querySelector('.left') this.carouselItems this.scrollDistance=this.carouselContainer.getBoundingClientRect().width / 3 const firstElementObserver=new IntersectionObserver(entries=>{if (entries[0].isIntersecting){this.previousArrow.classList.remove('expand') this.previousGradient.classList.add('hide')}else{this.previousArrow.classList.add('expand') this.previousGradient.classList.remove('hide')}},{root: this.carouselContainer, threshold: 0.9}) const lastElementObserver=new IntersectionObserver(entries=>{if (entries[0].isIntersecting){this.nextArrow.classList.remove('expand') this.nextGradient.classList.add('hide')}else{this.nextArrow.classList.add('expand') this.nextGradient.classList.remove('hide')}},{root: this.carouselContainer, threshold: 0.9}) const carouselObserver=new IntersectionObserver(entries=>{if (entries[0].isIntersecting){this.scrollDistance=this.carouselContainer.getBoundingClientRect().width / 3}}) carouselObserver.observe(this.carouselContainer) this.carouselSlot.addEventListener('slotchange', e=>{this.carouselItems=this.carouselSlot.assignedElements() firstElementObserver.observe(this.carouselItems[0]) lastElementObserver.observe(this.carouselItems[this.carouselItems.length - 1])}) this.addEventListener('keyup', e=>{if (e.code==='ArrowLeft') this.scrollRight() else this.scrollRight()}) this.nextArrow.addEventListener('click', this.scrollRight) this.previousArrow.addEventListener('click', this.scrollLeft)}disconnectedCallback(){this.nextArrow.removeEventListener('click', this.scrollRight) this.previousArrow.removeEventListener('click', this.scrollLeft)}})//notificationsconst smNotifications=document.createElement('template')smNotifications.innerHTML=`<style>*{padding: 0; margin: 0; box-sizing: border-box;}:host{display: flex;}.hide{opacity: 0 !important; pointer-events: none !important;}.notification-panel{display: grid; width: 100%; position: fixed; top: 0; right: 0; z-index: 100; max-height: 100%; overflow: hidden auto; overscroll-behavior: contain;}.inner-body{padding: 1rem 1.5rem;}.no-transformations{transform: none; opacity: 1;}.notification{opacity: 0; transform: translateY(-1rem); position: relative; border-radius: 0.3rem; box-shadow: 0.1rem 0.2rem 0.2rem rgba(0, 0, 0, 0.1), 0.5rem 1rem 2rem rgba(0, 0, 0, 0.1); background: rgba(var(--foreground-color), 1); transition: height 0.3s, transform 0.3s, opacity 0.3s; overflow: hidden; border-bottom: 1px solid rgba(var(--text-color), 0.2);}h4:first-letter, p:first-letter{text-transform: uppercase;}h4{font-weight: 400;}p{line-height: 1.6; color: rgba(var(--text-color), 0.8); overflow-wrap: break-word;}.notification:last-of-type{margin-bottom: 0;}header{display: flex; align-items: center; margin-bottom: 0.4rem; width: 100%;}.icon{fill: none; height: 1.6rem; width: 1.6rem; stroke: rgba(var(--text-color), 0.7); overflow: visible; stroke-linecap: round; border-radius: 1rem; stroke-linejoin: round; cursor: pointer; min-width: 0;}.error-icon{stroke: #E53935;}.success-icon{stroke: #00C853;}.close{margin-left: auto; padding: 0.5rem; stroke-width: 10;}.notification-icon{height: 1.2rem; width: 1.2rem; margin-right: 0.6rem; stroke-width: 6;}@media screen and (min-width: 640px){.notification-panel{width: 40vw;}.notification{margin-right: 1.5rem; margin-bottom: 1rem; border-bottom: none; border: solid 1px rgba(var(--text-color), 0.2); transform: translateX(1rem);}}@media screen and (max-width: 640px){.close{display: none}}</style><div class="notification-panel"></div>`customElements.define('sm-notifications', class extends HTMLElement{constructor(){super() this.shadow=this.attachShadow({mode: 'open'}).append(smNotifications.content.cloneNode(true))}handleTouchStart(e){this.notification=e.target.closest('.notification') this.touchStartX=e.changedTouches[0].clientX this.notification.style.transition='initial' this.touchStartTime=e.timeStamp}handleTouchMove(e){if (this.touchStartX < e.changedTouches[0].clientX){this.offset=e.changedTouches[0].clientX - this.touchStartX; this.touchEndAnimataion=requestAnimationFrame(this.movePopup)}else{this.offset=-(this.touchStartX - e.changedTouches[0].clientX); this.touchEndAnimataion=requestAnimationFrame(this.movePopup)}}handleTouchEnd(e){this.notification.style.transition='height 0.3s, transform 0.3s, opacity 0.3s' this.touchEndTime=e.timeStamp cancelAnimationFrame(this.touchEndAnimataion) this.touchEndX=e.changedTouches[0].clientX if (this.touchEndTime - this.touchStartTime > 200){if (this.touchEndX - this.touchStartX > this.threshold){this.removeNotification(this.notification)}else if (this.touchStartX - this.touchEndX > this.threshold){this.removeNotification(this.notification, true)}else{this.resetPosition()}}else{if (this.touchEndX > this.touchStartX){this.removeNotification(this.notification)}else{this.removeNotification(this.notification, true)}}}movePopup(){this.notification.style.transform=`translateX(${this.offset}px)`}resetPosition(){this.notification.style.transform=`translateX(0)`}push(messageHeader, messageBody, options){let notification=document.createElement('div'), composition=``,{pinned, type}=options; notification.classList.add('notification') if (pinned) notification.classList.add('pinned') composition +=` <div class="inner-body"> <header> ` if (type==='error'){composition +=` <svg class="notification-icon icon error-icon" viewBox="0 0 64 64"> <path d="M32,4.73a3.17,3.17,0,0,1,2.76,1.59l13.9,24.09L62.57,54.49a3.19,3.19,0,0,1-2.76,4.78H4.19a3.19,3.19,0,0,1-2.76-4.78L15.34,30.41,29.24,6.32A3.17,3.17,0,0,1,32,4.73m0-1a4.14,4.14,0,0,0-3.62,2.09L14.47,29.91.57,54a4.19,4.19,0,0,0,3.62,6.28H59.81A4.19,4.19,0,0,0,63.43,54L49.53,29.91,35.62,5.82A4.14,4.14,0,0,0,32,3.73Z"/> <line x1="32" y1="24" x2="32" y2="36"/> <line x1="32" y1="46" x2="32" y2="48"/> </svg>`}else if (type==='success'){composition +=` <svg class="notification-icon icon success-icon" viewBox="0 0 64 64"> <polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/> </svg> `}composition +=` <h4>${messageHeader}</h4> <svg class="icon close" viewBox="0 0 64 64"> <title>Close</title> <line x1="64" y1="0" x2="0" y2="64"/> <line x1="64" y1="64" x2="0" y2="0"/> </svg> </header> <p>${messageBody}</p></div>` notification.innerHTML=composition this.notificationPanel.prepend(notification) if (window.innerWidth > 640){notification.animate([{transform: `translateX(1rem)`, opacity: '0'},{transform: 'translateX(0)', opacity: '1'}], this.animationOptions).onfinish=()=>{notification.setAttribute('style', `transform: none;`);}}else{notification.setAttribute('style', `transform: translateY(0); opacity: 1`)}notification.addEventListener('touchstart', this.handleTouchStart) notification.addEventListener('touchmove', this.handleTouchMove) notification.addEventListener('touchend', this.handleTouchEnd)}removeNotification(notification, toLeft){notification.style.height=notification.scrollHeight + 'px'; if (!this.offset) this.offset=0; if (toLeft) notification.animate([{transform: `translateX(${this.offset}px)`, opacity: '1'},{transform: `translateX(-100%)`, opacity: '0'}], this.animationOptions).onfinish=()=>{notification.setAttribute('style', `height: 0; margin-bottom: 0`);}else{notification.animate([{transform: `translateX(${this.offset}px)`, opacity: '1'},{transform: `translateX(100%)`, opacity: '0'}], this.animationOptions).onfinish=()=>{notification.setAttribute('style', `height: 0; margin-bottom: 0`);}}setTimeout(()=>{notification.remove()}, this.animationOptions.duration * 2)}connectedCallback(){this.notificationPanel=this.shadowRoot.querySelector('.notification-panel') this.animationOptions={duration: 300, fill: "forwards", easing: "ease"}this.fontSize=Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0]) this.notification this.offset this.touchStartX=0 this.touchEndX=0 this.touchStartTime=0 this.touchEndTime=0 this.threshold=this.notificationPanel.getBoundingClientRect().width * 0.3 this.touchEndAnimataion; this.notificationPanel.addEventListener('click', e=>{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){if (!mutation.addedNodes[0].classList.contains('pinned')) setTimeout(()=>{this.removeNotification(mutation.addedNodes[0])}, 4000); if (window.innerWidth > 640) this.notificationPanel.style.padding='1.5rem 0 3rem 1.5rem'; else this.notificationPanel.style.padding='1rem 1rem 2rem 1rem';}else if (mutation.removedNodes.length && !this.notificationPanel.children.length){this.notificationPanel.style.padding=0;}}})}) observer.observe(this.notificationPanel,{attributes: true, childList: true, subtree: true})}})// sm-menuconst smMenu=document.createElement('template')smMenu.innerHTML=` <style>*{padding: 0; margin: 0; box-sizing: border-box;}.menu{display: grid; place-items: center; position: relative; height: 2rem; width: 2rem; outline: none;}.icon{position: absolute; fill: rgba(var(--text-color), 0.7); height: 2.4rem; width: 2.4rem; padding: 0.7rem; stroke: rgba(var(--text-color), 0.7); stroke-width: 6; overflow: visible; stroke-linecap: round; stroke-linejoin: round; border-radius: 2rem; transition: background 0.3s;}:host{display: inline-flex;}.hide{opacity: 0; pointer-events: none;}.select{position: relative; display: flex; flex-direction: column; cursor: pointer; width: 100%; -webkit-tap-highlight-color: transparent;}.menu:focus .icon, .focused{background: rgba(var(--text-color), 0.1);}:host([align-options="left"]) .options{left: 0;}:host([align-options="right"]) .options{right: 0;}.options{padding: 0.5rem 0; overflow: hidden auto; position: absolute; display: flex; min-width: 100%; transform: translateY(-1rem); flex-direction: column; background: rgba(var(--foreground-color), 1); transition: opacity 0.3s, transform 0.3s; border: solid 1px rgba(var(--text-color), 0.2); border-radius: 0.2rem; z-index: 2; box-shadow: 0.4rem 0.8rem 1.2rem #00000030; top: 100%; margin: 0.4rem 0 0 0; bottom: auto;}.moveUp{top: auto; margin: 0 0 0.4rem 0; bottom: 100%; transform: translateY(1rem);}.moveLeft{left: auto: right: 0;}.no-transformations{transform: none !important;}@media (hover: hover){.menu:hover .icon{background: rgba(var(--text-color), 0.1);}}</style> <div class="select"> <div class="menu" tabindex="0"> <svg class="icon" viewBox="0 0 64 64"> <title>options</title> <circle cx="32" cy="6" r="5.5"/> <circle cx="32" cy="58" r="5.5"/> <circle cx="32" cy="31.89" r="5.5"/> </svg> </div><div class="options hide"> <slot></slot> </div></div>`;customElements.define('sm-menu', class extends HTMLElement{constructor(){super() this.attachShadow({mode: 'open'}).append(smMenu.content.cloneNode(true))}static get observedAttributes(){return ['value']}get value(){return this.getAttribute('value')}set value(val){this.setAttribute('value', val)}expand(){if (!this.open){if (this.containerDimensions.left > this.containerDimensions.width){this.optionList.style.right=0}else{this.optionList.style.right='auto'}this.optionList.classList.remove('hide') this.optionList.classList.add('no-transformations') this.open=true this.icon.classList.add('focused')}}collapse(){if (this.open){this.open=false this.icon.classList.remove('focused') this.optionList.classList.add('hide') this.optionList.classList.remove('no-transformations')}}connectedCallback(){this.availableOptions this.containerDimensions this.optionList=this.shadowRoot.querySelector('.options') let slot=this.shadowRoot.querySelector('.options slot'), menu=this.shadowRoot.querySelector('.menu') this.icon=this.shadowRoot.querySelector('.icon') this.open=false; menu.addEventListener('click', e=>{if (!this.open){this.expand()}else{this.collapse()}}) menu.addEventListener('keydown', e=>{if (e.code==='ArrowDown' || e.code==='ArrowRight'){e.preventDefault() this.availableOptions[0].focus()}if (e.code==='Enter' || e.code==='Space'){e.preventDefault() if (!this.open){this.expand()}else{this.collapse()}}}) this.optionList.addEventListener('keydown', e=>{if (e.code==='ArrowUp' || e.code==='ArrowRight'){e.preventDefault() if (document.activeElement.previousElementSibling){document.activeElement.previousElementSibling.focus()}}if (e.code==='ArrowDown' || e.code==='ArrowLeft'){e.preventDefault() if (document.activeElement.nextElementSibling) document.activeElement.nextElementSibling.focus()}}) this.optionList.addEventListener('click', e=>{this.collapse()}) slot.addEventListener('slotchange', e=>{this.availableOptions=slot.assignedElements() this.containerDimensions=this.optionList.getBoundingClientRect() this.menuDimensions=menu.getBoundingClientRect() if (this.containerDimensions.left > this.containerDimensions.width){this.optionList.style.right=0}else{this.optionList.style.right='auto'}}); window.addEventListener('mousedown', e=>{if (!this.contains(e.target) && e.button !==2){this.collapse()}}) if (this.hasAttribute('set-context') && this.getAttribute('set-context')==='true'){this.parentNode.setAttribute('oncontextmenu', 'return false') this.parentNode.addEventListener('mouseup', e=>{if (e.button===2){this.expand()}})}const intersectionObserver=new IntersectionObserver(entries=>{entries.forEach(entry=>{if (!entry.isIntersecting && this.open){if (window.innerHeight - entry.intersectionRect.top < this.containerDimensions.height) this.optionList.classList.add('moveUp') else this.optionList.classList.remove('moveUp') if (entry.intersectionRect.left > this.containerDimensions.width){this.optionList.style.right=0}else{this.optionList.style.right='auto'}}})},{threshold: 1}) intersectionObserver.observe(this.optionList)}})// optionconst smMenuOption=document.createElement('template')smMenuOption.innerHTML=` <style>*{padding: 0; margin: 0; box-sizing: border-box;}:host{display: flex;}.option{min-width: 100%; padding: 0.8rem 1.6rem; cursor: pointer; overflow-wrap: break-word; white-space: nowrap; outline: none; display: flex; align-items: center; text-transform: capitalize;}:host(:focus){outline: none; background: rgba(var(--text-color), 0.1);}@media (hover: hover){.option:hover{background: rgba(var(--text-color), 0.1);}}</style> <div class="option"> <slot></slot> </div>`;customElements.define('sm-menu-option', class extends HTMLElement{constructor(){super() this.attachShadow({mode: 'open'}).append(smMenuOption.content.cloneNode(true))}connectedCallback(){this.addEventListener('keyup', e=>{if (e.code==='Enter' || e.code==='Space'){e.preventDefault() this.click()}}) this.setAttribute('tabindex', '0')}})// tab-headerconst smTabHeader=document.createElement('template')smTabHeader.innerHTML=`<style>*{padding: 0; margin: 0; box-sizing: border-box;}:host{display: flex;}.tabs{position: relative; display: grid; width: 100%;}.tab-header{display: grid; grid-auto-flow: column; justify-content: flex-start; gap: 1rem; position: relative; overflow: auto hidden; max-width: 100%; scrollbar-width: 0;}.indicator{position: absolute; left: 0; bottom: 0; height: 0.15rem; border-radius: 1rem 1rem 0 0; background: var(--accent-color); transition: transform 0.3s, width 0.3s;}:host([variant="tab"]) .indicator{height: 100%; border-radius: 0.2rem}:host([variant="tab"]) .tab-header{border-bottom: none;}.hide-completely{display: none;}:host([variant="tab"]) .tab-header{gap: 0; display: inline-grid; justify-self: flex-start; box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.2); border-radius: 0.2rem;}:host([variant="tab"]) slot::slotted(.active){color: rgba(var(--foreground-color), 1);}slot::slotted(.active){color: var(--accent-color); opacity: 1;}@media (hover: none){.tab-header::-webkit-scrollbar-track{-webkit-box-shadow: none !important; background-color: transparent !important;}.tab-header::-webkit-scrollbar{height: 0; background-color: transparent;}}</style><div part="tab-container" class="tabs"> <div part="tab-header" class="tab-header"> <slot></slot> <div part="indicator" class="indicator"></div></div></div>`;customElements.define('sm-tab-header', class extends HTMLElement{constructor(){super() this.attachShadow({mode: 'open'}).append(smTabHeader.content.cloneNode(true)) this.indicator=this.shadowRoot.querySelector('.indicator'); this.tabSlot=this.shadowRoot.querySelector('slot'); this.tabHeader=this.shadowRoot.querySelector('.tab-header');}sendDetails(element){this.dispatchEvent( new CustomEvent("switchtab",{bubbles: true, detail:{target: this.target, rank: parseInt(element.getAttribute('rank'))}}) )}connectedCallback(){if (!this.hasAttribute('target') || this.getAttribute('target').value==='') return; this.prevTab this.allTabs this.activeTab this.target=this.getAttribute('target') this.tabSlot.addEventListener('slotchange', ()=>{this.tabSlot.assignedElements().forEach((tab, index)=>{tab.setAttribute('rank', index)})}) this.allTabs=this.tabSlot.assignedElements(); this.tabSlot.addEventListener('click', e=>{if (e.target===this.prevTab || !e.target.closest('sm-tab')) return if (this.prevTab) this.prevTab.classList.remove('active') e.target.classList.add('active') e.target.scrollIntoView({behavior: 'smooth', block: 'nearest', inline: 'center'}) this.indicator.setAttribute('style', `width: ${e.target.getBoundingClientRect().width}px; transform: translateX(${e.target.getBoundingClientRect().left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`) this.sendDetails(e.target) this.prevTab=e.target; this.activeTab=e.target;}) let resizeObserver=new ResizeObserver(entries=>{entries.forEach((entry)=>{if (this.prevTab){let tabDimensions=this.activeTab.getBoundingClientRect(); this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)}})}) resizeObserver.observe(this) let observer=new IntersectionObserver((entries)=>{entries.forEach((entry)=>{if (entry.isIntersecting){this.indicator.style.transition='none' if (this.activeTab){let tabDimensions=this.activeTab.getBoundingClientRect(); this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)}else{this.allTabs[0].classList.add('active') let tabDimensions=this.allTabs[0].getBoundingClientRect(); this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`) this.sendDetails(this.allTabs[0]) this.prevTab=this.tabSlot.assignedElements()[0]; this.activeTab=this.prevTab;}}})},{threshold: 1.0}) observer.observe(this)}})// tab-panelsconst smTabPanels=document.createElement('template')smTabPanels.innerHTML=`<style>*{padding: 0; margin: 0; box-sizing: border-box;}:host{display: flex; width: 100%;}.panel-container{position: relative; display: flex; width: 100%; overflow: hidden auto;}slot::slotted(.hide-completely){display: none;}@media (hover: none){.tab-header::-webkit-scrollbar-track{-webkit-box-shadow: none !important; background-color: transparent !important;}.tab-header::-webkit-scrollbar{height: 0; background-color: transparent;}}</style><div part="panel-container" class="panel-container"> <slot>Nothing to see here.</slot></div>`;customElements.define('sm-tab-panels', class extends HTMLElement{constructor(){super() this.attachShadow({mode: 'open'}).append(smTabPanels.content.cloneNode(true)) this.panelSlot=this.shadowRoot.querySelector('slot');}connectedCallback(){//animations let flyInLeft=[{opacity: 0, transform: 'translateX(-1rem)'},{opacity: 1, transform: 'none'}], flyInRight=[{opacity: 0, transform: 'translateX(1rem)'},{opacity: 1, transform: 'none'}], flyOutLeft=[{opacity: 1, transform: 'none'},{opacity: 0, transform: 'translateX(-1rem)'}], flyOutRight=[{opacity: 1, transform: 'none'},{opacity: 0, transform: 'translateX(1rem)'}], animationOptions={duration: 300, fill: 'forwards', easing: 'ease'}this.prevPanel this.allPanels this.previousRank this.panelSlot.addEventListener('slotchange', ()=>{this.panelSlot.assignedElements().forEach((panel)=>{panel.classList.add('hide-completely')})}) this.allPanels=this.panelSlot.assignedElements() this._targetBodyFlyRight=(targetBody)=>{targetBody.classList.remove('hide-completely') targetBody.animate(flyInRight, animationOptions)}this._targetBodyFlyLeft=(targetBody)=>{targetBody.classList.remove('hide-completely') targetBody.animate(flyInLeft, animationOptions)}document.addEventListener('switchtab', e=>{if (e.detail.target !==this.id) return if (this.prevPanel){let targetBody=this.allPanels[e.detail.rank], currentBody=this.prevPanel; if (this.previousRank < e.detail.rank){if (currentBody && !targetBody) currentBody.animate(flyOutLeft, animationOptions).onfinish=()=>{currentBody.classList.add('hide-completely')}else if (targetBody && !currentBody){this._targetBodyFlyRight(targetBody)}else if (currentBody && targetBody){currentBody.animate(flyOutLeft, animationOptions).onfinish=()=>{currentBody.classList.add('hide-completely') this._targetBodyFlyRight(targetBody)}}}else{if (currentBody && !targetBody) currentBody.animate(flyOutRight, animationOptions).onfinish=()=>{currentBody.classList.add('hide-completely')}else if (targetBody && !currentBody){this._targetBodyFlyLeft(targetBody)}else if (currentBody && targetBody){currentBody.animate(flyOutRight, animationOptions).onfinish=()=>{currentBody.classList.add('hide-completely') this._targetBodyFlyLeft(targetBody)}}}}else{this.allPanels[e.detail.rank].classList.remove('hide-completely')}this.previousRank=e.detail.rank this.prevPanel=this.allPanels[e.detail.rank];})}})
\ No newline at end of file
diff --git a/Standard UI Components/components.ts b/Standard UI Components/components.ts
new file mode 100644
index 0000000..0ecb216
--- /dev/null
+++ b/Standard UI Components/components.ts	
@@ -0,0 +1,3591 @@
+//Button
+const smButton = document.createElement('template')
+smButton.innerHTML = `
+<style>     
+*{
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+}       
+:host{
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+}
+:host([disabled]) .button{
+    cursor: not-allowed;
+    opacity: 1;
+    background: rgba(var(--text-color), 0.3) !important;
+    color: rgba(var(--foreground-color), 1);
+}
+:host([variant='primary']) .button{
+    background: hsl(var(--hue), var(--saturation), var(--lightness));
+    color: rgba(var(--foreground-color), 1);
+}
+:host([variant='outlined']) .button{
+    -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;
+            box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;
+    background: transparent; 
+    color: var(--accent-color);
+}
+:host([variant='no-outline']) .button{
+    background: rgba(var(--foreground-color), 1); 
+    color: var(--accent-color);
+}
+:host(.small) .button{
+    padding: 0.4rem 0.8rem;
+}
+:host(.round) .button{
+    border-radius: 10rem;
+}
+.button {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    width: 100%;
+    padding: 0.6rem 1.2rem;
+    cursor: pointer;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    border-radius: 0.3rem; 
+    -webkit-box-pack: center; 
+        -ms-flex-pack: center; 
+            justify-content: center;
+    -webkit-transition: -webkit-box-shadow 0.3s;
+    transition: -webkit-box-shadow 0.3s;
+    -o-transition: box-shadow 0.3s;
+    transition: box-shadow 0.3s;
+    transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
+    text-transform: capitalize;
+    font-size: 0.9rem;
+    font-weight: 500;
+    background: rgba(var(--text-color), 0.1); 
+    -webkit-tap-highlight-color: transparent;
+    outline: none;
+}
+:host(:not([disabled])) .button:focus{
+    -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
+            box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
+}
+:host([variant='outlined']) .button:focus{
+    -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
+            box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
+}
+@media (hover: hover){
+    :host(:not([disabled])) .button:active{
+        -webkit-box-shadow: none !important;
+                box-shadow: none !important;
+    }
+    :host([variant='outlined']) .button:active{
+        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset !important;
+                box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset !important;
+    }
+    :host(:not([disabled])) .button:hover{
+        -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);
+    }
+    :host([variant='outlined']) .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);
+    }
+    :host([variant="primary"]:not([disabled])) .button:active{
+        background: hsl(var(--hue), var(--saturation), calc(var(--lightness) - 20%)) !important;
+    }
+    :host([variant="primary"]:not([disabled])) .button:hover{
+        background: hsl(var(--hue), var(--saturation), calc(var(--lightness) - 10%));
+    }
+}
+@media (hover: none){
+    :host(:not([disabled])) .button:active{
+        -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
+                box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
+    }
+    :host([variant='outlined']) .button:active{
+        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
+                box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
+    }
+}
+</style>
+<div part="button" class="button" tabindex="0" role="button">
+    <slot></slot>   
+</div>`;
+customElements.define('sm-button',
+    class extends HTMLElement {
+        constructor() {
+            super()
+            this.attachShadow({
+                mode: 'open'
+            }).append(smButton.content.cloneNode(true))
+        }
+
+        get disabled() {
+            return this.isDisabled
+        }
+
+        set disabled(value) {
+            if (value && !this.isDisabled) {
+                this.isDisabled = true
+                this.setAttribute('disabled', '')
+                this.button.removeAttribute('tabindex')
+            } else if (!value && this.isDisabled) {
+                this.isDisabled = false
+                this.removeAttribute('disabled')
+            }
+        }
+
+        dispatch() {
+            if (this.isDisabled) {
+                this.dispatchEvent(new CustomEvent('disabled', {
+                    bubbles: true,
+                    composed: true
+                }))
+            } else {
+                this.dispatchEvent(new CustomEvent('clicked', {
+                    bubbles: true,
+                    composed: true
+                }))
+            }
+        }
+
+        connectedCallback() {
+            this.isDisabled = false
+            this.button = this.shadowRoot.querySelector('.button')
+            if (this.hasAttribute('disabled') && !this.isDisabled)
+                this.isDisabled = true
+            this.addEventListener('click', (e) => {
+                this.dispatch()
+            })
+            this.addEventListener('keyup', (e) => {
+                if (e.code === "Enter" || e.code === "Space")
+                    this.dispatch()
+            })
+        }
+    })
+
+//Input
+const smInput = document.createElement('template')
+smInput.innerHTML = `
+<style>
+*{
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+} 
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration { display: none; }
+input[type=number] {
+-moz-appearance:textfield;
+}
+input[type=number]::-webkit-inner-spin-button, 
+input[type=number]::-webkit-outer-spin-button { 
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    margin: 0; 
+}
+input::-ms-reveal,
+input::-ms-clear {
+  display: none;
+}
+input:invalid{
+    outline: none;
+    -webkit-box-shadow: none;
+            box-shadow: none;
+}
+::-moz-focus-inner{
+border: none;
+}
+:host{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+}
+.hide{
+   opacity: 0 !important;
+   pointer-events: none !important;
+}
+.hide-completely{
+    display: none;
+}
+.icon {
+    fill: none;
+    height: 1.6em;
+    width: 1.6em;
+    padding: 0.5em;
+    stroke: rgba(var(--text-color), 0.7);
+    stroke-width: 10;
+    overflow: visible;
+    stroke-linecap: round;
+    border-radius: 1em;
+    stroke-linejoin: round;
+    cursor: pointer;
+    min-width: 0;
+}
+:host(.round) .input{
+    border-radius: 10rem;
+}
+.input {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    text-align: left;
+    position: relative;
+    gap: 1em;
+    padding: 0.7em 1em;
+    border-radius: 0.3em;
+    -webkit-transition: opacity 0.3s;
+    -o-transition: opacity 0.3s;
+    transition: opacity 0.3s;
+    background: rgba(var(--text-color), 0.06);
+    -webkit-box-shadow: 0 0 0.2rem rgba(var(--text-color), 0.2) inset;
+            box-shadow: 0 0 0.2rem rgba(var(--text-color), 0.2) inset;
+    font-family: var(--font-family);
+    width: 100%;
+    outline: none;
+    min-width: 0;
+}
+.input.readonly .clear{
+    opacity: 0 !important;
+    margin-right: -2em;
+    pointer-events: none !important;
+}
+.readonly{
+    pointer-events: none;
+}
+input:focus{
+    caret-color: var(--accent-color);
+}
+.input:focus-within:not(.readonly){
+    -webkit-box-shadow: 0 0 0 0.1em var(--accent-color) inset;
+            box-shadow: 0 0 0 0.1em var(--accent-color) inset;
+}
+.disabled{
+    pointer-events: none;
+    opacity: 0.6;
+}
+.label {
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    opacity: .7;
+    font-weight: 400;
+    font-size: 1em;
+    position: absolute;
+    top: 0;
+    -webkit-transition: -webkit-transform 0.3s;
+    transition: -webkit-transform 0.3s;
+    -o-transition: transform 0.3s;
+    transition: transform 0.3s;
+    transition: transform 0.3s, -webkit-transform 0.3s;
+    -webkit-transform-origin: left;
+    -ms-transform-origin: left;
+        transform-origin: left;
+    pointer-events: none;
+    white-space: nowrap;
+    overflow: hidden;
+    -o-text-overflow: ellipsis;
+       text-overflow: ellipsis;
+    width: 100%;
+    will-change: transform;
+}
+.outer-container{
+    position: relative;
+    width: 100%;
+}
+.container{
+    width: 100%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    position: relative;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+}    
+input{
+    font-size: 1em;
+    border: none;
+    background: transparent;
+    outline: none;
+    color: rgba(var(--text-color), 1);
+    width: 100%;
+}
+.animate-label .container input {
+    -webkit-transform: translateY(0.6em);
+            -ms-transform: translateY(0.6em);
+        transform: translateY(0.6em);
+    }
+  
+.animate-label .container .label {
+    -webkit-transform: translateY(-0.6em) scale(0.8);
+            -ms-transform: translateY(-0.6em) scale(0.8);
+        transform: translateY(-0.6em) scale(0.8);
+    opacity: 1;
+    color: var(--accent-color)
+}
+.feedback-text{
+    font-size: 0.9rem;
+    width: 100%;
+    color: var(--error-color);
+    background: rgba(var(--foreground-color), 1);
+    padding: 0.6rem 1rem;
+}
+.feedback-text:empty{
+    padding: 0;
+}
+@media (any-hover: hover){
+    .icon:hover{
+        background: rgba(var(--text-color), 0.1);
+    }
+}
+</style>
+<div class="outer-container">
+    <label part="input" class="input">
+        <slot name="icon"></slot>
+        <div class="container">
+            <input/>
+            <div part="placeholder" class="label"></div>
+        </div>
+        <svg class="icon clear hide" viewBox="0 0 64 64">
+            <title>clear</title>
+            <line x1="64" y1="0" x2="0" y2="64"/>
+            <line x1="64" y1="64" x2="0" y2="0"/>
+        </svg>
+    </label>
+    <div class="feedback-text"></div>
+</div>
+`;
+customElements.define('sm-input',
+    class extends HTMLElement {
+        constructor() {
+            super()
+            this.attachShadow({
+                mode: 'open'
+            }).append(smInput.content.cloneNode(true))
+        }
+        static get observedAttributes() {
+            return ['placeholder']
+        }
+
+        get value() {
+            return this.shadowRoot.querySelector('input').value
+        }
+
+        set value(val) {
+            this.shadowRoot.querySelector('input').value = val;
+            this.checkInput()
+            this.fireEvent()
+        }
+
+        get placeholder() {
+            return this.getAttribute('placeholder')
+        }
+
+        set placeholder(val) {
+            this.setAttribute('placeholder', val)
+        }
+
+        get type() {
+            return this.getAttribute('type')
+        }
+
+        get isValid() {
+            return this.shadowRoot.querySelector('input').checkValidity()
+        }
+
+        get validity() {
+            return this.shadowRoot.querySelector('input').validity
+        }
+
+        set disabled(value) {
+            if (value)
+                this.shadowRoot.querySelector('.input').classList.add('disabled')
+            else
+                this.shadowRoot.querySelector('.input').classList.remove('disabled')
+        }
+        set readOnly(value) {
+            if (value) {
+                this.shadowRoot.querySelector('input').setAttribute('readonly', '')
+                this.shadowRoot.querySelector('.input').classList.add('readonly')
+            } else {
+                this.shadowRoot.querySelector('input').removeAttribute('readonly')
+                this.shadowRoot.querySelector('.input').classList.remove('readonly')
+            }
+        }
+
+        setValidity = (message) => {
+            this.feedbackText.textContent = message
+        }
+
+        showValidity = () => {
+            this.feedbackText.classList.remove('hide-completely')
+        }
+        
+        hideValidity = () => {
+            this.feedbackText.classList.add('hide-completely')
+        }
+
+        focusIn = () => {
+            this.input.focus()
+        }
+
+        focusOut = () => {
+            this.input.blur()
+        }
+
+        fireEvent = () => {
+            let event = new Event('input', {
+                bubbles: true,
+                cancelable: true,
+                composed: true
+            });
+            this.dispatchEvent(event);
+        }
+
+        checkInput = (e) => {
+            if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') return;
+            if (this.input.value !== '') {
+                if (this.animate)
+                    this.inputParent.classList.add('animate-label')
+                else
+                    this.label.classList.add('hide')
+                if (!this.readonly)
+                    this.clearBtn.classList.remove('hide')
+            } else {
+                if (this.animate)
+                    this.inputParent.classList.remove('animate-label')
+                else
+                    this.label.classList.remove('hide')
+                if (!this.readonly)
+                    this.clearBtn.classList.add('hide')
+            }
+        }
+
+
+        connectedCallback() {
+            this.inputParent = this.shadowRoot.querySelector('.input')
+            this.clearBtn = this.shadowRoot.querySelector('.clear')
+            this.label = this.shadowRoot.querySelector('.label')
+            this.feedbackText = this.shadowRoot.querySelector('.feedback-text')
+            this.valueChanged = false;
+            this.readonly = false
+            this.isNumeric = false
+            this.min
+            this.max
+            this.animate = this.hasAttribute('animate')
+            this.input = this.shadowRoot.querySelector('input')
+            this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder')
+            if (this.hasAttribute('value')) {
+                this.input.value = this.getAttribute('value')
+                this.checkInput(e)
+            }
+            if (this.hasAttribute('required')) {
+                this.input.setAttribute('required', '')
+            }
+            if (this.hasAttribute('min')) {
+                let minValue = this.getAttribute('min')
+                this.input.setAttribute('min', minValue)
+                this.min = parseInt(minValue)
+            }
+            if (this.hasAttribute('max')) {
+                let maxValue = this.getAttribute('max')
+                this.input.setAttribute('max', maxValue)
+                this.max = parseInt(maxValue)
+            }
+            if (this.hasAttribute('minlength')) {
+                let minValue = this.getAttribute('minlength')
+                this.input.setAttribute('minlength', minValue)
+            }
+            if (this.hasAttribute('maxlength')) {
+                let maxValue = this.getAttribute('maxlength')
+                this.input.setAttribute('maxlength', maxValue)
+            }
+            if (this.hasAttribute('pattern')) {
+                this.input.setAttribute('pattern', this.getAttribute('pattern'))
+            }
+            if (this.hasAttribute('readonly')) {
+                this.input.setAttribute('readonly', '')
+                this.readonly = true
+            }
+            if (this.hasAttribute('disabled')) {
+                this.inputParent.classList.add('disabled')
+            }
+            if (this.hasAttribute('error-text')) {
+                this.feedbackText.textContent = this.getAttribute('error-text')
+            }
+            if (this.hasAttribute('type')) {
+                if (this.getAttribute('type') === 'number') {
+                    this.input.setAttribute('inputmode', 'numeric')
+                    this.input.setAttribute('type', 'number')
+                    this.isNumeric = true
+                } else
+                    this.input.setAttribute('type', this.getAttribute('type'))
+            } else
+                this.input.setAttribute('type', 'text')
+            this.input.addEventListener('input', e => {
+                this.checkInput(e)
+            })
+            this.clearBtn.addEventListener('click', e => {
+                this.value = ''
+            })
+        }
+
+        attributeChangedCallback(name, oldValue, newValue) {
+            if (oldValue !== newValue) {
+                if (name === 'placeholder') {
+                    this.shadowRoot.querySelector('.label').textContent = newValue;
+                    this.setAttribute('aria-label', newValue);
+                }
+            }
+        }
+    })
+
+//textarea
+const smTextarea = document.createElement('template')
+smTextarea.innerHTML = `
+<style>
+*{
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+} 
+::-moz-focus-inner{
+    border: none;
+}
+:host{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+}
+.hide{
+   opacity: 0 !important;
+   pointer-events: none !important;
+}
+.hide-completely{
+    display: none;
+}
+.icon {
+    fill: none;
+    height: 1.6em;
+    width: 1.6em;
+    padding: 0.5em;
+    stroke: rgba(var(--text-color), 0.7);
+    stroke-width: 10;
+    overflow: visible;
+    stroke-linecap: round;
+    border-radius: 1em;
+    stroke-linejoin: round;
+    cursor: pointer;
+    min-width: 0;
+}
+.input {
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    position: relative;
+    padding: 0.7em 1em;
+    border-radius: 0.3em;
+    -webkit-transition: opacity 0.3s;
+    -o-transition: opacity 0.3s;
+    transition: opacity 0.3s;
+    background: rgba(var(--text-color), 0.1);
+    font-family: var(--font-family);
+    width: 100%;
+    outline: none;
+    min-width: 0;
+}
+
+textarea:focus{
+    caret-color: var(--accent-color);
+}
+.input:focus-within{
+    -webkit-box-shadow: 0 0 0 0.1em var(--accent-color) inset;
+            box-shadow: 0 0 0 0.1em var(--accent-color) inset;
+}
+
+.label {
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    opacity: .7;
+    font-weight: 400;
+    font-size: 1em;
+    position: absolute;
+    top: 0.9em;
+    -webkit-transition: -webkit-transform 0.3s;
+    transition: -webkit-transform 0.3s;
+    -o-transition: transform 0.3s;
+    transition: transform 0.3s;
+    transition: transform 0.3s, -webkit-transform 0.3s;
+    -webkit-transform-origin: left;
+    -ms-transform-origin: left;
+        transform-origin: left;
+    pointer-events: none;
+    white-space: nowrap;
+    overflow: hidden;
+    -o-text-overflow: ellipsis;
+       text-overflow: ellipsis;
+    width: 100%;
+    will-change: transform;
+}   
+textarea{
+    font-size: 1em;
+    border: none;
+    background: transparent;
+    outline: none;
+    color: rgba(var(--text-color), 1);
+    width: 100%;
+    font-family: inherit;
+    line-height: 1.6;
+}
+.animate-label textarea {
+    -webkit-transform: translateY(0.6em);
+            -ms-transform: translateY(0.6em);
+        transform: translateY(0.6em);
+}
+  
+.animate-label .label {
+    -webkit-transform: translateY(-0.6em) scale(0.8);
+            -ms-transform: translateY(-0.6em) scale(0.8);
+        transform: translateY(-0.6em) scale(0.8);
+    opacity: 1;
+    color: var(--accent-color)
+}
+.clear{
+    -ms-flex-item-align: start;
+        align-self: flex-start;
+}
+@media (any-hover: hover){
+    .icon:hover{
+        background: rgba(var(--text-color), 0.1);
+    }
+}
+</style>
+<label class="input">
+<textarea rows="1"></textarea>
+<div part="placeholder" class="label"></div>
+<svg class="icon clear hide" viewBox="0 0 64 64">
+    <title>clear</title>
+    <line x1="64" y1="0" x2="0" y2="64"/>
+    <line x1="64" y1="64" x2="0" y2="0"/>
+</svg>
+</label>
+`;
+customElements.define('sm-textarea',
+    class extends HTMLElement {
+        constructor() {
+            super()
+            this.attachShadow({
+                mode: 'open'
+            }).append(smTextarea.content.cloneNode(true))
+        }
+        static get observedAttributes() {
+            return ['placeholder']
+        }
+
+        get value() {
+            return this.shadowRoot.querySelector('textarea').value
+        }
+
+        set value(val) {
+            this.shadowRoot.querySelector('textarea').value = val;
+            this.checkInput()
+            this.fireEvent()
+        }
+
+        get placeholder() {
+            return this.getAttribute('placeholder')
+        }
+
+        set placeholder(val) {
+            this.setAttribute('placeholder', val)
+        }
+
+        fireEvent() {
+            let event = new Event('input', {
+                bubbles: true,
+                cancelable: true,
+                composed: true
+            });
+            this.dispatchEvent(event);
+        }
+
+        checkInput() {
+            if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '')
+                return;
+            if (this.input.value !== '') {
+                if (this.animate)
+                    this.inputParent.classList.add('animate-label')
+                else
+                    this.label.classList.add('hide')
+            } else {
+                if (this.animate)
+                    this.inputParent.classList.remove('animate-label')
+                else
+                    this.label.classList.remove('hide')
+            }
+
+            this.input.style.height = 'auto'
+            this.input.style.height = (this.input.scrollHeight) + 'px';
+        }
+
+
+        connectedCallback() {
+            this.inputParent = this.shadowRoot.querySelector('.input')
+            this.clearBtn = this.shadowRoot.querySelector('.clear')
+            this.label = this.shadowRoot.querySelector('.label')
+            this.valueChanged = false;
+            this.animate = this.hasAttribute('animate')
+            this.input = this.shadowRoot.querySelector('textarea')
+            this.shadowRoot.querySelector('.label').textContent = this.getAttribute('placeholder')
+
+            this.input.setAttribute('style', 'height:' + (this.input.scrollHeight) + 'px;overflow-y:hidden;');
+
+            if (this.hasAttribute('value')) {
+                this.input.value = this.getAttribute('value')
+                this.checkInput()
+            }
+            if (this.hasAttribute('required')) {
+                this.input.setAttribute('required', '')
+            }
+            if (this.hasAttribute('readonly')) {
+                this.input.setAttribute('readonly', '')
+            }
+            this.input.addEventListener('input', e => {
+                this.checkInput()
+            })
+            this.clearBtn.addEventListener('click', e => {
+                this.value = ''
+            })
+        }
+
+        attributeChangedCallback(name, oldValue, newValue) {
+            if (oldValue !== newValue) {
+                if (name === 'placeholder')
+                    this.shadowRoot.querySelector('.label').textContent = newValue;
+            }
+        }
+    })
+
+// tab
+const smTab = document.createElement('template')
+smTab.innerHTML = `
+<style>
+    *{
+        padding: 0;
+        margin: 0;
+        -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+    } 
+    :host{
+        position: relative;
+        display: -webkit-inline-box;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+        z-index: 1;
+    }
+    .tab{
+        position: relative;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+            -ms-user-select: none;
+                user-select: none;
+        -webkit-box-pack: center;
+            -ms-flex-pack: center;
+                justify-content: center;
+        cursor: pointer;
+        -webkit-tap-highlight-color: transparent;
+        white-space: nowrap;
+        padding: 0.4rem 0.8rem;
+        font-weight: 500;
+        word-spacing: 0.1em;
+        text-align: center;
+        -webkit-transition: color 0.3s;
+        -o-transition: color 0.3s;
+        transition: color 0.3s;
+        text-transform: capitalize;
+        height: 100%;
+    }
+    @media (hover: hover){
+        :host(.active) .tab{
+            opacity: 1;
+        }
+        .tab{
+            opacity: 0.7
+        }
+        .tab:hover{
+            opacity: 1
+        }
+    }
+</style>
+<div part="tab" class="tab">
+<slot></slot>
+</div>
+`;
+
+customElements.define('sm-tab', class extends HTMLElement {
+    constructor() {
+        super()
+        this.shadow = this.attachShadow({
+            mode: 'open'
+        }).append(smTab.content.cloneNode(true))
+    }
+})
+
+//chcekbox
+
+const smCheckbox = document.createElement('template')
+smCheckbox.innerHTML = `
+<style>
+    *{
+        padding: 0;
+        margin: 0;
+        -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+    } 
+    :host{
+        display: -webkit-inline-box;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+    }
+    .checkbox {
+        position: relative;
+        display:-webkit-box;
+        display:-ms-flexbox;
+        display:flex;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        cursor: pointer;
+        height: 1.5rem;
+        outline: none;
+        -webkit-tap-highlight-color: transparent;
+    }
+    
+    p{
+        margin-left: 2rem;
+    }
+    
+    .checkbox:active .icon,
+    .checkbox:focus .icon{
+        background: rgba(var(--text-color), 0.2);
+    }
+    
+    .checkbox input {
+        display: none;
+    }
+    
+    .checkbox .checkmark {
+        stroke-dashoffset: -65;
+        stroke-dasharray: 65;
+        -webkit-transition: stroke-dashoffset 0.3s; 
+        -o-transition: stroke-dashoffset 0.3s; 
+        transition: stroke-dashoffset 0.3s;
+    }
+    
+    .checkbox input:checked ~ svg .checkmark {
+        stroke-dashoffset: 0;
+        stroke: rgba(var(--foreground-color), 1);
+    }
+    .checkbox input:checked ~ svg {
+        stroke: var(--accent-color);
+        fill: var(--accent-color);
+        stroke-width: 8; 
+    }
+    
+    .icon {
+        position: absolute;
+        fill: none;
+        height: 2.6rem;
+        width: 2.6rem;
+        padding: 0.7rem;
+        stroke: rgba(var(--text-color), 0.7);
+        stroke-width: 6;
+        overflow: visible;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        border-radius: 2rem;
+        -webkit-transition: background 0.3s;
+        -o-transition: background 0.3s;
+        transition: background 0.3s;
+        left: -0.5rem;
+    }
+    .disabled {
+        opacity: 0.6;
+        pointer-events: none;
+    }
+</style>
+<label class="checkbox" tabindex="0">
+    <input type="checkbox">
+    <svg class="icon" viewBox="0 0 64 64">
+        <title>checkbox</title>
+        <rect class="box" x="0" y="0" width="64" height="64" rx="4" />
+        <path class="checkmark" d="M50.52,19.56,26,44.08,13.48,31.56" />
+    </svg>
+    <p><slot></slot></p>
+</label>`
+customElements.define('sm-checkbox', class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(smCheckbox.content.cloneNode(true))
+
+        this.checkbox = this.shadowRoot.querySelector('.checkbox');
+        this.input = this.shadowRoot.querySelector('input')
+
+        this.isChecked = false
+        this.isDisabled = false
+    }
+
+    static get observedAttributes() {
+        return ['disabled', 'checked']
+    }
+
+    get disabled() {
+        return this.getAttribute('disabled')
+    }
+
+    set disabled(val) {
+        this.setAttribute('disabled', val)
+    }
+
+    get checked() {
+        return this.getAttribute('checked')
+    }
+
+    set checked(value) {
+        this.setAttribute('checked', value)
+    }
+
+    dispatch() {
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true
+        }))
+    }
+
+    connectedCallback() {
+        this.addEventListener('keyup', e => {
+            if ((e.code === "Enter" || e.code === "Space") && this.isDisabled == false) {
+                this.isChecked = !this.isChecked
+                this.setAttribute('checked', this.isChecked)
+            }
+        })
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            if (name === 'disabled') {
+                if (newValue === 'true') {
+                    this.checkbox.classList.add('disabled')
+                    this.isDisabled = true
+                } else {
+                    this.checkbox.classList.remove('disabled')
+                    this.isDisabled = false
+                }
+            }
+            if (name === 'checked') {
+                if (newValue == 'true') {
+                    this.isChecked = true
+                    this.input.checked = true
+                    this.dispatch()
+                } else {
+                    this.isChecked = false
+                    this.input.checked = false
+                    this.dispatch()
+                }
+            }
+        }
+    }
+
+})
+
+//switch
+
+const smSwitch = document.createElement('template')
+smSwitch.innerHTML = `	
+<style>
+    *{
+        -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+        padding: 0;
+        margin: 0;
+    }
+    
+    :host{
+        display: -webkit-inline-box;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+    }
+    .switch {
+        position: relative;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        width: 2.4rem;
+        padding: 0.2rem;
+        cursor: pointer;
+        outline: none;
+        border-radius: 2rem;
+        -webkit-tap-highlight-color: transparent;
+    }
+    
+    input {
+        display: none;
+    }
+    
+    .track {
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 1.4rem;
+        -webkit-transition: background 0.3s;
+        -o-transition: background 0.3s;
+        transition: background 0.3s;
+        background: rgba(var(--text-color), 0.4);
+        -webkit-box-shadow: 0 0.1rem 0.3rem #00000040 inset;
+                box-shadow: 0 0.1rem 0.3rem #00000040 inset;
+        border-radius: 1rem;
+    }
+    
+    .switch:active .button::after,
+    .switch:focus .button::after{
+        opacity: 1
+    }
+    .switch:focus-visible .button::after{
+        opacity: 1
+    }
+    
+    .button::after{
+        content: '';
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        position: absolute;
+        height: 2.6rem;
+        width: 2.6rem;
+        background: rgba(var(--text-color), 0.2);
+        border-radius: 2rem;
+        opacity: 0;
+        -webkit-transition: opacity 0.3s;
+        -o-transition: opacity 0.3s;
+        transition: opacity 0.3s;
+    }
+    
+    .button {
+        position: relative;
+        display: -webkit-inline-box;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+        height: 1rem;
+        width: 1rem;
+        -webkit-box-pack: center;
+            -ms-flex-pack: center;
+                justify-content: center;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        border-radius: 1rem;
+        -webkit-box-shadow: 0 0.1rem 0.4rem #00000060;
+                box-shadow: 0 0.1rem 0.4rem #00000060;
+        -webkit-transition: -webkit-transform 0.3s;
+        transition: -webkit-transform 0.3s;
+        -o-transition: transform 0.3s;
+        transition: transform 0.3s;
+        transition: transform 0.3s, -webkit-transform 0.3s;
+        border: solid 0.3rem rgba(var(--foreground-color), 1);
+    }
+    
+    input:checked ~ .button {
+        -webkit-transform: translateX(100%);
+            -ms-transform: translateX(100%);
+                transform: translateX(100%);
+    }
+    
+    input:checked ~ .track {
+        background: var(--accent-color);
+    }
+    .disabled {
+        opacity: 0.6;
+        pointer-events: none;
+    }
+</style>
+<label class="switch" tabindex="0">
+    <input type="checkbox">
+    <div class="track"></div>
+    <div class="button"></div>
+</label>`
+
+customElements.define('sm-switch', class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(smSwitch.content.cloneNode(true))
+        this.switch = this.shadowRoot.querySelector('.switch');
+        this.input = this.shadowRoot.querySelector('input')
+        this.isChecked = false
+        this.isDisabled = false
+    }
+
+    get disabled() {
+        return this.getAttribute('disabled')
+    }
+
+    set disabled(val) {
+        if (val) {
+            this.disabled = true
+            this.setAttribute('disabled', '')
+            this.switch.classList.add('disabled')
+        } else {
+            this.disabled = false
+            this.removeAttribute('disabled')
+            this.switch.classList.remove('disabled')
+
+        }
+    }
+
+    get checked() {
+        return this.isChecked
+    }
+
+    set checked(value) {
+        if (value) {
+            this.setAttribute('checked', '')
+            this.isChecked = true
+            this.input.checked = true
+        } else {
+            this.removeAttribute('checked')
+            this.isChecked = false
+            this.input.checked = false
+        }
+    }
+
+    dispatch = () => {
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true
+        }))
+    }
+
+    connectedCallback() {
+        if (this.hasAttribute('disabled'))
+            this.switch.classList.add('disabled')
+        this.addEventListener('keyup', e => {
+            if ((e.code === "Enter" || e.code === "Space") && !this.isDisabled) {
+                this.input.click()
+            }
+        })
+        this.input.addEventListener('click', e => {
+            if (this.input.checked)
+                this.checked = true
+            else
+                this.checked = false
+            this.dispatch()
+        })
+    }
+})
+
+// select
+const smSelect = document.createElement('template')
+smSelect.innerHTML = `
+<style>     
+*{
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+} 
+.icon {
+    fill: none;
+    height: 0.8rem;
+    width: 0.8rem;
+    stroke: rgba(var(--text-color), 0.7);
+    stroke-width: 6;
+    overflow: visible;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}      
+:host{
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+}
+.hide{
+    opacity: 0;
+    pointer-events: none;
+}
+.select{
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    cursor: pointer;
+    width: 100%;
+    -webkit-tap-highlight-color: transparent;
+}
+.option-text{
+    overflow: hidden;
+    -o-text-overflow: ellipsis;
+       text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.selection{
+    border-radius: 0.3rem;
+    display: -ms-grid;
+    display: grid;
+    -ms-grid-columns: 1fr auto;
+    grid-template-columns: 1fr auto;
+        grid-template-areas: 'heading heading' '. .';
+    padding: 0.4rem 1rem;
+    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;
+}
+.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;
+}
+:host([align-select="right"]) .options{
+    right: 0;
+}
+.options{
+    top: 100%;
+    margin-top: 0.5rem; 
+    overflow: hidden auto;
+    position: absolute;
+    grid-area: options;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    min-width: 100%;
+    background: rgba(var(--foreground-color), 1);
+    -webkit-transition: opacity 0.3s, top 0.3s;
+    -o-transition: opacity 0.3s, top 0.3s;
+    transition: opacity 0.3s, top 0.3s;
+    border: solid 1px rgba(var(--text-color), 0.2);
+    border-radius: 0.3rem;
+    z-index: 2;
+    -webkit-box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
+            box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
+}
+.rotate{
+    -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+            transform: rotate(180deg)
+}
+</style>
+<div class="select" >
+    <div class="selection" tabindex="0">
+        <div class="option-text"></div>
+        <svg class="icon toggle" viewBox="0 0 64 64">
+            <polyline points="63.65 15.99 32 47.66 0.35 15.99"/>
+        </svg>
+    </div>
+    <div class="options hide">
+        <slot></slot> 
+    </div>
+</div>`;
+customElements.define('sm-select', class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(smSelect.content.cloneNode(true))
+    }
+    static get observedAttributes() {
+        return ['value']
+    }
+    get value() {
+        return this.getAttribute('value')
+    }
+    set value(val) {
+        this.setAttribute('value', val)
+    }
+
+    collapse() {
+        this.optionList.animate(this.slideUp, this.animationOptions)
+        this.optionList.classList.add('hide')
+        this.chevron.classList.remove('rotate')
+        this.open = false
+    }
+    connectedCallback() {
+        this.availableOptions
+        this.optionList = this.shadowRoot.querySelector('.options')
+        this.chevron = this.shadowRoot.querySelector('.toggle')
+        let slot = this.shadowRoot.querySelector('.options slot'),
+            selection = this.shadowRoot.querySelector('.selection'),
+            previousOption
+        this.open = false;
+        this.slideDown = [{
+                    transform: `translateY(-0.5rem)`
+                },
+                {
+                    transform: `translateY(0)`
+                }
+            ],
+            this.slideUp = [{
+                    transform: `translateY(0)`
+                },
+                {
+                    transform: `translateY(-0.5rem)`
+                }
+            ],
+            this.animationOptions = {
+                duration: 300,
+                fill: "forwards",
+                easing: 'ease'
+            }
+        selection.addEventListener('click', e => {
+            if (!this.open) {
+                this.optionList.classList.remove('hide')
+                this.optionList.animate(this.slideDown, this.animationOptions)
+                this.chevron.classList.add('rotate')
+                this.open = true
+            } else {
+                this.collapse()
+            }
+        })
+        selection.addEventListener('keydown', e => {
+            if (e.code === 'ArrowDown' || e.code === 'ArrowRight') {
+                e.preventDefault()
+                this.availableOptions[0].focus()
+            }
+            if (e.code === 'Enter' || e.code === 'Space')
+                if (!this.open) {
+                    this.optionList.classList.remove('hide')
+                    this.optionList.animate(this.slideDown, this.animationOptions)
+                    this.chevron.classList.add('rotate')
+                    this.open = true
+                } else {
+                    this.collapse()
+                }
+        })
+        this.optionList.addEventListener('keydown', e => {
+            if (e.code === 'ArrowUp' || e.code === 'ArrowRight') {
+                e.preventDefault()
+                if (document.activeElement.previousElementSibling) {
+                    document.activeElement.previousElementSibling.focus()
+                }
+            }
+            if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') {
+                e.preventDefault()
+                if (document.activeElement.nextElementSibling)
+                    document.activeElement.nextElementSibling.focus()
+            }
+        })
+        this.addEventListener('optionSelected', e => {
+            if (previousOption !== e.target) {
+                this.setAttribute('value', e.detail.value)
+                this.shadowRoot.querySelector('.option-text').textContent = e.detail.text;
+                this.dispatchEvent(new CustomEvent('change', {
+                    bubbles: true,
+                    composed: true
+                }))
+                if (previousOption) {
+                    previousOption.classList.remove('check-selected')
+                }
+                previousOption = e.target;
+            }
+            if (!e.detail.switching)
+                this.collapse()
+
+            e.target.classList.add('check-selected')
+        })
+        slot.addEventListener('slotchange', e => {
+            this.availableOptions = slot.assignedElements()
+            if (this.availableOptions[0]) {
+                let firstElement = this.availableOptions[0];
+                previousOption = firstElement;
+                firstElement.classList.add('check-selected')
+                this.setAttribute('value', firstElement.getAttribute('value'))
+                this.shadowRoot.querySelector('.option-text').textContent = firstElement.textContent
+                this.availableOptions.forEach((element, index) => {
+                    element.setAttribute('data-rank', index + 1);
+                    element.setAttribute('tabindex', "0");
+                })
+            }
+        });
+        document.addEventListener('mousedown', e => {
+            if (!this.contains(e.target) && this.open) {
+                this.collapse()
+            }
+        })
+    }
+})
+
+// option
+const smOption = document.createElement('template')
+smOption.innerHTML = `
+<style>     
+*{
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+}     
+:host{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+}
+.option{
+    min-width: 100%;
+    padding: 0.8rem 1.2rem;
+    cursor: pointer;
+    overflow-wrap: break-word;
+    outline: none;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+}
+:host(:focus){
+    outline: none;
+    background: rgba(var(--text-color), 0.1);
+}
+:host(:focus) .option .icon{
+    opacity: 0.4
+}
+:host(.check-selected) .icon{
+    opacity: 1 !important
+}
+.icon {
+    margin-right: 0.8rem;
+    fill: none;
+    height: 0.8rem;
+    width: 0.8rem;
+    stroke: rgba(var(--text-color), 0.7);
+    stroke-width: 10;
+    overflow: visible;
+    stroke-linecap: round;
+    border-radius: 1rem;
+    stroke-linejoin: round;
+    opacity: 0;
+}
+@media (hover: hover){
+    .option:hover{
+        background: rgba(var(--text-color), 0.1);
+    }
+    .option:hover .icon{
+        opacity: 0.4
+    }
+}
+</style>
+<div class="option">
+    <svg class="icon" viewBox="0 0 64 64">
+        <polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/>
+    </svg>
+    <slot></slot> 
+</div>`;
+customElements.define('sm-option', class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(smOption.content.cloneNode(true))
+    }
+
+    sendDetails(switching) {
+        let optionSelected = new CustomEvent('optionSelected', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                text: this.textContent,
+                value: this.getAttribute('value'),
+                switching: switching
+            }
+        })
+        this.dispatchEvent(optionSelected)
+    }
+
+    connectedCallback() {
+        let validKey = [
+            'ArrowUp',
+            'ArrowDown',
+            'ArrowLeft',
+            'ArrowRight'
+        ]
+        this.addEventListener('click', e => {
+            this.sendDetails()
+        })
+        this.addEventListener('keyup', e => {
+            if (e.code === 'Enter' || e.code === 'Space') {
+                e.preventDefault()
+                this.sendDetails(false)
+            }
+            if (validKey.includes(e.code)) {
+                e.preventDefault()
+                this.sendDetails(true)
+            }
+        })
+        if (this.hasAttribute('default')) {
+            setTimeout(() => {
+                this.sendDetails()
+            }, 0);
+        }
+    }
+})
+
+// select
+const smStripSelect = document.createElement('template')
+smStripSelect.innerHTML = `
+<style>     
+*{
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+}    
+:host{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+}
+.icon {
+    position: absolute;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    fill: none;
+    height: 2.6rem;
+    width: 2.6rem;
+    padding: 0.9rem;
+    stroke: rgba(var(--text-color), 0.7);
+    stroke-width: 10;
+    overflow: visible;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    cursor: pointer;
+    min-width: 0;
+    z-index: 1;
+    background: rgba(var(--foreground-color), 1);
+    -webkit-tap-highlight-color: transparent;
+    -webkit-transition: opacity 0.3s;
+    -o-transition: opacity 0.3s;
+    transition: opacity 0.3s; 
+}
+.hide{
+    pointer-events: none;
+    opacity: 0;
+}
+.select-container{
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    width: 100%;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+}
+.select{
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    gap: 0.5rem;
+    max-width: 100%;
+    overflow: auto hidden;
+}
+.previous-item{
+    left: 0;
+}
+.next-item{
+    right: 0;
+}
+.left,.right{
+    position: absolute;
+    width: 1rem;
+    height: 100%; 
+    -webkit-transition: opacity 0.3s; 
+    -o-transition: opacity 0.3s; 
+    transition: opacity 0.3s;
+    z-index: 1;
+}
+.left{
+    background: -webkit-gradient(linear, right top, left top, from(transparent), to(rgba(var(--foreground-color), 1)));
+    background: -o-linear-gradient(right, transparent, rgba(var(--foreground-color), 1));
+    background: linear-gradient(to left, transparent, rgba(var(--foreground-color), 1))
+}
+.right{
+    right: 0;
+    background: -webkit-gradient(linear, left top, right top, from(transparent), to(rgba(var(--foreground-color), 1)));
+    background: -o-linear-gradient(left, transparent, rgba(var(--foreground-color), 1));
+    background: linear-gradient(to right, transparent, rgba(var(--foreground-color), 1))
+}
+slot::slotted(.active){
+    border-radius: 2rem;
+    opacity: 1;
+    background-color: rgba(var(--text-color), .6);  
+    color: rgba(var(--foreground-color), 1);
+}
+@media (hover: none){
+    ::-webkit-scrollbar-track {
+        -webkit-box-shadow: none !important;
+        background-color: transparent !important;
+    }
+    ::-webkit-scrollbar {
+        height: 0;
+        background-color: transparent;
+    }
+    .icon{
+        display: none;
+    }
+    .left,.right{
+        display: block;
+    }
+}
+@media (hover: hover){
+    .select{
+        overflow: hidden;
+    }
+    .left,.right{
+        display: none;
+    }
+}
+</style>
+<div class="select-container">
+    <div class="left hide"></div>
+    <svg class="icon previous-item hide" viewBox="4 0 64 64">
+        <title>Previous</title>
+        <polyline points="48.01 0.35 16.35 32 48.01 63.65"/>
+    </svg>
+    <div class="select">
+        <slot></slot> 
+    </div>
+    <svg class="icon next-item hide" viewBox="-6 0 64 64">
+        <title>Next</title>
+        <polyline points="15.99 0.35 47.65 32 15.99 63.65"/>
+    </svg>
+    <div class="right hide"></div>
+</div>`;
+customElements.define('sm-strip-select', class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(smStripSelect.content.cloneNode(true))
+    }
+    static get observedAttributes() {
+        return ['value']
+    }
+    get value() {
+        return this.getAttribute('value')
+    }
+    set value(val) {
+        this.setAttribute('value', val)
+    }
+    scrollLeft = () => {
+        this.select.scrollBy({
+            top: 0,
+            left: -this.scrollDistance,
+            behavior: 'smooth'
+        })
+    }
+
+    scrollRight = () => {
+        this.select.scrollBy({
+            top: 0,
+            left: this.scrollDistance,
+            behavior: 'smooth'
+        })
+    }
+    connectedCallback() {
+        let previousOption,
+            slot = this.shadowRoot.querySelector('slot');
+        this.selectContainer = this.shadowRoot.querySelector('.select-container')
+        this.select = this.shadowRoot.querySelector('.select')
+        this.nextArrow = this.shadowRoot.querySelector('.next-item')
+        this.previousArrow = this.shadowRoot.querySelector('.previous-item')
+        this.nextGradient = this.shadowRoot.querySelector('.right')
+        this.previousGradient = this.shadowRoot.querySelector('.left')
+        this.selectOptions
+        this.scrollDistance = this.selectContainer.getBoundingClientRect().width
+        const firstElementObserver = new IntersectionObserver(entries => {
+            if (entries[0].isIntersecting) {
+                this.previousArrow.classList.add('hide')
+                this.previousGradient.classList.add('hide')
+            } else {
+                this.previousArrow.classList.remove('hide')
+                this.previousGradient.classList.remove('hide')
+            }
+        }, {
+            root: this.selectContainer,
+            threshold: 0.95
+        })
+        const lastElementObserver = new IntersectionObserver(entries => {
+            if (entries[0].isIntersecting) {
+                this.nextArrow.classList.add('hide')
+                this.nextGradient.classList.add('hide')
+            } else {
+                this.nextArrow.classList.remove('hide')
+                this.nextGradient.classList.remove('hide')
+            }
+        }, {
+            root: this.selectContainer,
+            threshold: 0.95
+        })
+
+        const selectObserver = new IntersectionObserver(entries => {
+            if (entries[0].isIntersecting) {
+                this.scrollDistance = this.selectContainer.getBoundingClientRect().width
+            }
+        })
+
+        selectObserver.observe(this.selectContainer)
+        this.addEventListener('optionSelected', e => {
+            if (previousOption === e.target) return;
+            if (previousOption)
+                previousOption.classList.remove('active')
+            e.target.classList.add('active')
+            e.target.scrollIntoView({
+                behavior: 'smooth',
+                inline: 'center',
+                block: 'nearest'
+            })
+            this.setAttribute('value', e.detail.value)
+            this.dispatchEvent(new CustomEvent('change', {
+                bubbles: true,
+                composed: true
+            }))
+            previousOption = e.target;
+        })
+        slot.addEventListener('slotchange', e => {
+            this.selectOptions = slot.assignedElements()
+            firstElementObserver.observe(this.selectOptions[0])
+            lastElementObserver.observe(this.selectOptions[this.selectOptions.length - 1])
+            if (this.selectOptions[0]) {
+                let firstElement = this.selectOptions[0];
+                this.setAttribute('value', firstElement.getAttribute('value'))
+                firstElement.classList.add('active')
+                previousOption = firstElement;
+            }
+        });
+        this.nextArrow.addEventListener('click', this.scrollRight)
+        this.previousArrow.addEventListener('click', this.scrollLeft)
+    }
+
+    disconnectedCallback() {
+        this.nextArrow.removeEventListener('click', this.scrollRight)
+        this.previousArrow.removeEventListener('click', this.scrollLeft)
+    }
+})
+
+// option
+const smStripOption = document.createElement('template')
+smStripOption.innerHTML = `
+<style>     
+*{
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+}     
+:host{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+}
+.option{
+    padding: 0.4rem 0.8rem;
+    cursor: pointer;
+    overflow-wrap: break-word;
+    outline: none;
+    border-radius: 2rem;
+    text-transform: capitalize;
+    border: solid 1px rgba(var(--text-color), .3);
+    opacity: 0.9;
+}
+.option:focus{
+    background: rgba(var(--text-color), 0.1);
+}
+
+@media (hover: hover){
+    .option{
+        -webkit-transition: background 0.3s;
+        -o-transition: background 0.3s;
+        transition: background 0.3s;
+    }
+    .option:hover{
+        background: rgba(var(--text-color), 0.1);
+    }
+}
+</style>
+<div class="option" tabindex="0">
+    <slot></slot> 
+</div>`;
+customElements.define('sm-strip-option', class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(smStripOption.content.cloneNode(true))
+    }
+    sendDetails() {
+        let optionSelected = new CustomEvent('optionSelected', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                text: this.textContent,
+                value: this.getAttribute('value')
+            }
+        })
+        this.dispatchEvent(optionSelected)
+    }
+
+    connectedCallback() {
+        this.addEventListener('click', e => {
+            this.sendDetails()
+        })
+        this.addEventListener('keyup', e => {
+            if (e.code === 'Enter' || e.code === 'Space') {
+                e.preventDefault()
+                this.sendDetails(false)
+            }
+        })
+        if (this.hasAttribute('default')) {
+            setTimeout(() => {
+                this.sendDetails()
+            }, 0);
+        }
+    }
+})
+
+//popup
+const smPopup = document.createElement('template')
+smPopup.innerHTML = `
+<style>
+*{
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+} 
+:host{
+    position: fixed;
+    display: -ms-grid;
+    display: grid;
+    z-index: 10;
+}
+.popup-container{
+    display: -ms-grid;
+    display: grid;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    place-items: center;
+    background: rgba(0, 0, 0, 0.6);
+    -webkit-transition: opacity 0.3s ease;
+    -o-transition: opacity 0.3s ease;
+    transition: opacity 0.3s ease;
+    z-index: 10;
+}
+:host(.stacked) .popup{
+    -webkit-transform: scale(0.9) translateY(-2rem) !important;
+        -ms-transform: scale(0.9) translateY(-2rem) !important;
+            transform: scale(0.9) translateY(-2rem) !important;
+}
+.popup{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    position: relative;
+    -ms-flex-item-align: end;
+        align-self: flex-end;
+    -webkit-box-align: start;
+        -ms-flex-align: start;
+            align-items: flex-start;
+    width: 100%;
+    border-radius: 0.8rem 0.8rem 0 0;
+    -webkit-transform: translateY(100%);
+        -ms-transform: translateY(100%);
+            transform: translateY(100%);
+    -webkit-transition: -webkit-transform 0.3s;
+    transition: -webkit-transform 0.3s;
+    -o-transition: transform 0.3s;
+    transition: transform 0.3s;
+    transition: transform 0.3s, -webkit-transform 0.3s;
+    background: rgba(var(--foreground-color), 1);
+    -webkit-box-shadow: 0 -1rem 2rem #00000020;
+            box-shadow: 0 -1rem 2rem #00000020;
+    max-height: 90vh;
+}
+.container-header{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    width: 100%;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+}
+.popup-top{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    width: 100%;
+}
+.popup-body{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+    width: 100%;
+    padding: 1.5rem;
+    overflow-y: auto;
+}
+.hide{
+    opacity: 0;
+    pointer-events: none;
+}
+@media screen and (min-width: 640px){
+    .popup{
+        width: -webkit-max-content;
+        width: -moz-max-content;
+        width: max-content;
+        -ms-flex-item-align: center;
+            -ms-grid-row-align: center;
+            align-self: center;
+        border-radius: 0.4rem;
+        height: auto;
+        -webkit-transform: translateY(1rem);
+            -ms-transform: translateY(1rem);
+                transform: translateY(1rem);
+        -webkit-box-shadow: 0 3rem 2rem -0.5rem #00000040;
+                box-shadow: 0 3rem 2rem -0.5rem #00000040;
+    }
+}
+@media screen and (max-width: 640px){
+.popup-top{
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+}
+.handle{
+    height: 0.3rem;
+    width: 2rem;
+    background: rgba(var(--text-color), .2);
+    border-radius: 1rem;
+    margin: 0.5rem 0;
+}
+}
+</style>
+<div part="background" class="popup-container hide" role="dialog">
+    <div part="popup" class="popup">
+        <div class="popup-top">
+            <div class="handle"></div>
+            <slot name="header"></slot>
+        </div>
+        <div part="popup-body" class="popup-body">
+            <slot></slot>
+        </div>
+    </div>
+</div>
+`;
+customElements.define('sm-popup', class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(smPopup.content.cloneNode(true))
+
+        this.allowClosing = false
+    }
+
+    resumeScrolling = () => {
+        const scrollY = document.body.style.top;
+        window.scrollTo(0, parseInt(scrollY || '0') * -1);
+        setTimeout(() => {
+            document.body.setAttribute('style', `overflow: auto; top: initial`)
+        }, 300);
+    }
+
+    show = (pinned, popupStack) => {
+        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')
+            }
+            this.dispatchEvent(
+                new CustomEvent("popupopened", {
+                    bubbles: true,
+                    detail: {
+                        popup: this,
+                        popupStack: this.popupStack
+                    }
+                })
+            )
+            this.setAttribute('open', '')
+            this.pinned = pinned
+        }
+        this.popupContainer.classList.remove('hide')
+        this.popup.style.transform = 'translateY(0)';
+        document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`)
+        return this.popupStack
+    }
+    hide = () => {
+        if (window.innerWidth < 640)
+            this.popup.style.transform = 'translateY(100%)';
+        else
+            this.popup.style.transform = 'translateY(1rem)';
+        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()
+        }
+
+        if (this.inputFields.length) {
+            setTimeout(() => {
+                this.inputFields.forEach(field => {
+                    if (field.type === 'radio' || field.tagName === 'SM-CHECKBOX')
+                        field.checked = false
+                    if (field.tagName === 'SM-INPUT' || field.tagName === 'TEXTAREA')
+                        field.value = ''
+                })
+            }, 300);
+        }
+        this.dispatchEvent(
+            new CustomEvent("popupclosed", {
+                bubbles: true,
+                detail: {
+                    popup: this,
+                    popupStack: this.popupStack
+                }
+            })
+        )
+    }
+
+    handleTouchStart = (e) => {
+        this.touchStartY = e.changedTouches[0].clientY
+        this.popup.style.transition = 'transform 0.1s'
+        this.touchStartTime = e.timeStamp
+    }
+
+    handleTouchMove = (e) => {
+        e.preventDefault()
+        if (this.touchStartY < e.changedTouches[0].clientY) {
+            this.offset = e.changedTouches[0].clientY - this.touchStartY;
+            this.touchEndAnimataion = window.requestAnimationFrame(() => this.movePopup())
+        }
+        /*else {
+            this.offset = this.touchStartY - e.changedTouches[0].clientY;
+            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'
+        if (this.touchEndTime - this.touchStartTime > 200) {
+            if (this.touchEndY - this.touchStartY > this.threshold) {
+                if (this.pinned) {
+                    this.show()
+                    return
+                } else
+                    this.hide()
+            } else {
+                this.show()
+            }
+        } else {
+            if (this.touchEndY > this.touchStartY)
+                if (this.pinned) {
+                    this.show()
+                    return
+                }
+            else
+                this.hide()
+        }
+    }
+
+    movePopup = () => {
+        this.popup.style.transform = `translateY(${this.offset}px)`
+    }
+
+    connectedCallback() {
+        this.pinned = false
+        this.popupStack
+        this.popupContainer = this.shadowRoot.querySelector('.popup-container')
+        this.popup = this.shadowRoot.querySelector('.popup')
+        this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot')
+        this.offset
+        this.popupHeader = this.shadowRoot.querySelector('.popup-top')
+        this.touchStartY = 0
+        this.touchEndY = 0
+        this.touchStartTime = 0
+        this.touchEndTime = 0
+        this.touchEndAnimataion;
+        this.threshold
+
+        if (this.hasAttribute('open'))
+            this.show()
+        this.popupContainer.addEventListener('mousedown', e => {
+            if (e.target === this.popupContainer && !this.pinned) {
+                if (this.pinned) {
+                    this.show()
+                    return
+                } else
+                    this.hide()
+            }
+        })
+
+        this.popupBodySlot.addEventListener('slotchange', () => {
+            setTimeout(() => {
+                this.threshold = this.popup.getBoundingClientRect().height * 0.3
+            }, 200);
+            this.inputFields = this.querySelectorAll('sm-input', 'sm-checkbox', 'textarea', 'radio')
+        })
+
+        this.popupHeader.addEventListener('touchstart', (e) => {
+            this.handleTouchStart(e)
+        })
+        this.popupHeader.addEventListener('touchmove', (e) => {
+            this.handleTouchMove(e)
+        })
+        this.popupHeader.addEventListener('touchend', (e) => {
+            this.handleTouchEnd(e)
+        })
+    }
+    disconnectedCallback() {
+        this.popupHeader.removeEventListener('touchstart', this.handleTouchStart)
+        this.popupHeader.removeEventListener('touchmove', this.handleTouchMove)
+        this.popupHeader.removeEventListener('touchend', this.handleTouchEnd)
+    }
+})
+
+//carousel
+
+const smCarousel = document.createElement('template')
+smCarousel.innerHTML = `
+<style>
+*{
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+} 
+:host{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+}
+.icon {
+    position: absolute;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    fill: none;
+    height: 2.6rem;
+    width: 2.6rem;
+    border-radius: 3rem;
+    padding: 0.9rem;
+    stroke: rgba(var(--foreground-color), 0.8);
+    stroke-width: 14;
+    overflow: visible;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    cursor: pointer;
+    min-width: 0;
+    background: rgba(var(--text-color), 1);
+    -webkit-box-shadow: 0 0.2rem 0.2rem #00000020, 
+                0 0.5rem 1rem #00000040;
+            box-shadow: 0 0.2rem 0.2rem #00000020, 
+                0 0.5rem 1rem #00000040; 
+    -webkit-tap-highlight-color: transparent;
+    -webkit-transform: scale(0);
+        -ms-transform: scale(0);
+            transform: scale(0);
+    z-index: 1;
+}
+.hide{
+    pointer-events: none;
+    opacity: 0;
+}
+.expand{
+    -webkit-transform: scale(1);
+        -ms-transform: scale(1);
+            transform: scale(1)
+}
+.previous-item{
+    left: 1rem;
+}
+.next-item{
+    right: 1rem;
+}
+.carousel-container{
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    width: 100%;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+}
+.carousel{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    max-width: 100%;
+    width: 100%;
+    overflow: auto hidden;
+    -ms-scroll-snap-type: x mandatory;
+        scroll-snap-type: x mandatory;
+}
+.indicators{
+    display: -ms-grid;
+    display: grid;
+    grid-auto-flow: column;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    position: absolute;
+    bottom: -1rem;
+    gap: 0.5rem;
+    width: 100%;
+}
+.dot{
+    position: relative;
+    padding: 0.2rem;
+    background: rgba(var(--text-color), 0.3);
+    border-radius: 1rem;
+    -webkit-transition: 0.2s;
+    -o-transition: 0.2s;
+    transition: 0.2s;
+}
+.dot.active{
+    -webkit-transform: scale(1.5);
+        -ms-transform: scale(1.5);
+            transform: scale(1.5);
+    background: var(--accent-color);
+}
+slot::slotted(*){
+    scroll-snap-align: center;
+}
+:host([align-items="start"]) slot::slotted(*){
+    scroll-snap-align: start;
+}
+:host([align-items="center"]) slot::slotted(*){
+    scroll-snap-align: center;
+}
+:host([align-items="end"]) slot::slotted(*){
+scroll-snap-align: end;
+}
+@media (hover: hover){
+.carousel{
+    overflow: hidden;
+}
+.left,.right{
+    display: none;
+}
+}
+@media (hover: none){
+::-webkit-scrollbar-track {
+    -webkit-box-shadow: none !important;
+    background-color: transparent !important;
+}
+::-webkit-scrollbar {
+    height: 0;
+    background-color: transparent;
+}
+.carousel{
+    overflow: auto none;
+}
+.icon{
+    display: none;
+}
+.left,.right{
+    display: block;
+}
+}
+</style>
+<div class="carousel-container">
+    <svg class="icon previous-item" viewBox="4 0 64 64">
+        <title>Previous</title>
+        <polyline points="48.01 0.35 16.35 32 48.01 63.65"/>
+    </svg>
+    <div part="carousel" class="carousel">
+        <slot></slot>
+    </div>
+    <svg class="icon next-item" viewBox="-6 0 64 64">
+        <title>Next</title>
+        <polyline points="15.99 0.35 47.65 32 15.99 63.65"/>
+    </svg>
+    <div class="indicators"></div>
+</div>
+`;
+
+customElements.define('sm-carousel', class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(smCarousel.content.cloneNode(true))
+    }
+
+    static get observedAttributes() {
+        return ['indicator']
+    }
+
+    scrollLeft = () => {
+        this.carousel.scrollBy({
+            top: 0,
+            left: -this.scrollDistance,
+            behavior: 'smooth'
+        })
+    }
+
+    scrollRight = () => {
+        this.carousel.scrollBy({
+            top: 0,
+            left: this.scrollDistance,
+            behavior: 'smooth'
+        })
+    }
+
+    connectedCallback() {
+        this.carousel = this.shadowRoot.querySelector('.carousel')
+        this.carouselContainer = this.shadowRoot.querySelector('.carousel-container')
+        this.carouselSlot = this.shadowRoot.querySelector('slot')
+        this.nextArrow = this.shadowRoot.querySelector('.next-item')
+        this.previousArrow = this.shadowRoot.querySelector('.previous-item')
+        this.indicatorsContainer = this.shadowRoot.querySelector('.indicators')
+        this.carouselItems
+        this.indicators
+        this.showIndicator = false
+        this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3
+        let frag = document.createDocumentFragment();
+        if (this.hasAttribute('indicator'))
+            this.showIndicator = true
+
+
+        let firstVisible = false,
+            lastVisible = false
+        const allElementsObserver = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (this.showIndicator)
+                    if (entry.isIntersecting) {
+                        this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.add('active')
+                    }
+                else
+                    this.indicators[parseInt(entry.target.attributes.rank.textContent)].classList.remove('active')
+                if (!entry.target.previousElementSibling)
+                    if (entry.isIntersecting) {
+                        this.previousArrow.classList.remove('expand')
+                        firstVisible = true
+                    }
+                else {
+                    this.previousArrow.classList.add('expand')
+                    firstVisible = false
+                }
+                if (!entry.target.nextElementSibling)
+                    if (entry.isIntersecting) {
+                        this.nextArrow.classList.remove('expand')
+                        lastVisible = true
+                    }
+                else {
+                    this.nextArrow.classList.add('expand')
+
+                    lastVisible = false
+                }
+                if (firstVisible && lastVisible)
+                    this.indicatorsContainer.classList.add('hide')
+                else
+                    this.indicatorsContainer.classList.remove('hide')
+            })
+        }, {
+            root: this.carouselContainer,
+            threshold: 0.9
+        })
+
+        const carouselObserver = new IntersectionObserver(entries => {
+            if (entries[0].isIntersecting) {
+                this.scrollDistance = this.carouselContainer.getBoundingClientRect().width / 3
+            }
+        })
+
+        carouselObserver.observe(this.carouselContainer)
+
+        this.carouselSlot.addEventListener('slotchange', e => {
+            this.carouselItems = this.carouselSlot.assignedElements()
+            this.carouselItems.forEach(item => allElementsObserver.observe(item))
+            if (this.showIndicator) {
+                this.indicatorsContainer.innerHTML = ``
+                this.carouselItems.forEach((item, index) => {
+                    let dot = document.createElement('div')
+                    dot.classList.add('dot')
+                    frag.append(dot)
+                    item.setAttribute('rank', index)
+                })
+                this.indicatorsContainer.append(frag)
+                this.indicators = this.indicatorsContainer.children
+            }
+        })
+
+        this.addEventListener('keyup', e => {
+            if (e.code === 'ArrowLeft')
+                this.scrollRight()
+            else
+                this.scrollRight()
+        })
+
+        this.nextArrow.addEventListener('click', this.scrollRight)
+        this.previousArrow.addEventListener('click', this.scrollLeft)
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'indicator') {
+            if (this.hasAttribute('indicator'))
+                this.showIndicator = true
+            else
+                this.showIndicator = false
+        }
+    }
+
+    disconnectedCallback() {
+        this.nextArrow.removeEventListener('click', this.scrollRight)
+        this.previousArrow.removeEventListener('click', this.scrollLeft)
+    }
+})
+
+//notifications
+
+const smNotifications = document.createElement('template')
+smNotifications.innerHTML = `
+<style>
+    *{
+        padding: 0;
+        margin: 0;
+        -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+    } 
+    :host{
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+    }
+    .hide{
+        opacity: 0 !important;
+        pointer-events: none !important;
+    }
+    .notification-panel{
+        display: -ms-grid;
+        display: grid;
+        width: 100%;
+        position: fixed;
+        top: 0;
+        right: 0;
+        z-index: 100;
+        max-height: 100%;
+        overflow: hidden auto;
+        -ms-scroll-chaining: none;
+            overscroll-behavior: contain;
+        }
+        .no-transformations{
+        -webkit-transform: none;
+            -ms-transform: none;
+                transform: none;
+        opacity: 1;
+    }
+    .notification{
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        opacity: 0;
+        padding: 1rem 1.5rem;
+        margin-bottom: 0.5rem;
+        -webkit-transform: translateY(-1rem);
+            -ms-transform: translateY(-1rem);
+                transform: translateY(-1rem);
+        position: relative;
+        border-radius: 0.3rem;
+        -webkit-box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1),
+                    0.5rem 1rem 2rem rgba(0, 0, 0, 0.1);
+                box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1),
+                    0.5rem 1rem 2rem rgba(0, 0, 0, 0.1);
+        background: rgba(var(--foreground-color), 1);
+        -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
+        transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
+        -o-transition: height 0.3s, transform 0.3s, opacity 0.3s;
+        transition: height 0.3s, transform 0.3s, opacity 0.3s;
+        transition: height 0.3s, transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
+        overflow: hidden;
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        -ms-word-break: break-all;
+        word-break: break-all;
+        word-break: break-word;
+        -ms-hyphens: auto;
+        -webkit-hyphens: auto;
+        hyphens: auto;
+        max-width: 100%;
+    }
+    h4:first-letter,
+    p:first-letter{
+        text-transform: uppercase;
+    }
+    h4{
+        font-weight: 400;
+    }
+    p{
+        line-height: 1.6;
+        -webkit-box-flex: 1;
+            -ms-flex: 1;
+                flex: 1;
+        color: rgba(var(--text-color), 0.9);
+        overflow-wrap: break-word;
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        -ms-word-break: break-all;
+        word-break: break-all;
+        word-break: break-word;
+        -ms-hyphens: auto;
+        -webkit-hyphens: auto;
+        hyphens: auto;
+        max-width: 100%;
+    }
+    .notification:last-of-type{
+        margin-bottom: 0;
+    }
+    .icon {
+        fill: none;
+        height: 1.6rem;
+        width: 1.6rem;
+        stroke: rgba(var(--text-color), 0.7);
+        overflow: visible;
+        stroke-linecap: round;
+        border-radius: 1rem;
+        stroke-linejoin: round;
+        cursor: pointer;
+    }
+    .error-icon{
+        stroke: #E53935;
+    }
+    .success-icon{
+        stroke: #00C853;
+    }
+    .close{
+        margin-left: 1rem;
+        padding: 0.5rem;
+        stroke-width: 10;
+    }
+    .notification-icon{
+        height: 1.4rem;
+        width: 1.4rem;
+        margin-right: 0.6rem;
+        stroke-width: 6;
+    }
+    @media screen and (min-width: 640px){
+    .notification-panel{
+        width: 40vw;
+        -webkit-box-pack: end;
+            -ms-flex-pack: end;
+                justify-content: flex-end;
+    }
+    .notification{
+        -ms-grid-column-align: end;
+            justify-self: end;
+        width: auto;
+        margin-right: 1.5rem;
+        margin-bottom: 1rem;
+        border-bottom: none;
+        border: solid 1px rgba(var(--text-color), 0.2);
+        -webkit-transform: translateX(1rem);
+            -ms-transform: translateX(1rem);
+                transform: translateX(1rem);
+    }
+    }
+    @media screen and (any-hover: none){
+        .close{
+            display: none
+        }
+    }
+</style>
+<div class="notification-panel">
+</div>
+`
+
+customElements.define('sm-notifications', class extends HTMLElement {
+    constructor() {
+        super()
+        this.shadow = this.attachShadow({
+            mode: 'open'
+        }).append(smNotifications.content.cloneNode(true))
+    }
+
+    handleTouchStart = (e) => {
+        this.notification = e.target.closest('.notification')
+        this.touchStartX = e.changedTouches[0].clientX
+        this.notification.style.transition = 'initial'
+        this.touchStartTime = e.timeStamp
+    }
+
+    handleTouchMove = (e) => {
+        e.preventDefault()
+        if (this.touchStartX < e.changedTouches[0].clientX) {
+            this.offset = e.changedTouches[0].clientX - this.touchStartX;
+            this.touchEndAnimataion = requestAnimationFrame(this.movePopup)
+        } else {
+            this.offset = -(this.touchStartX - e.changedTouches[0].clientX);
+            this.touchEndAnimataion = requestAnimationFrame(this.movePopup)
+        }
+    }
+
+    handleTouchEnd = (e) => {
+        this.notification.style.transition = 'transform 0.3s, opacity 0.3s'
+        this.touchEndTime = e.timeStamp
+        cancelAnimationFrame(this.touchEndAnimataion)
+        this.touchEndX = e.changedTouches[0].clientX
+        if (this.touchEndTime - this.touchStartTime > 200) {
+            if (this.touchEndX - this.touchStartX > this.threshold) {
+                this.removeNotification(this.notification)
+            } else if (this.touchStartX - this.touchEndX > this.threshold) {
+                this.removeNotification(this.notification, true)
+            } else {
+                this.resetPosition()
+            }
+        } else {
+            if (this.touchEndX > this.touchStartX) {
+                this.removeNotification(this.notification)
+            } else {
+                this.removeNotification(this.notification, true)
+            }
+        }
+    }
+
+    movePopup = () => {
+        this.notification.style.transform = `translateX(${this.offset}px)`
+    }
+
+    resetPosition = () => {
+        this.notification.style.transform = `translateX(0)`
+    }
+
+    push = (messageBody, type, pinned) => {
+        let notification = document.createElement('div'),
+            composition = ``
+        notification.classList.add('notification')
+        if (pinned)
+            notification.classList.add('pinned')
+        if (type === 'error') {
+            composition += `
+    <svg class="notification-icon icon error-icon" viewBox="0 0 64 64">
+            <path d="M32,4.73a3.17,3.17,0,0,1,2.76,1.59l13.9,24.09L62.57,54.49a3.19,3.19,0,0,1-2.76,4.78H4.19a3.19,3.19,0,0,1-2.76-4.78L15.34,30.41,29.24,6.32A3.17,3.17,0,0,1,32,4.73m0-1a4.14,4.14,0,0,0-3.62,2.09L14.47,29.91.57,54a4.19,4.19,0,0,0,3.62,6.28H59.81A4.19,4.19,0,0,0,63.43,54L49.53,29.91,35.62,5.82A4.14,4.14,0,0,0,32,3.73Z"/>
+            <line x1="32" y1="24" x2="32" y2="36"/>
+            <line x1="32" y1="46" x2="32" y2="48"/>
+    </svg>`
+        } else if (type === 'success') {
+            composition += `
+        <svg class="notification-icon icon success-icon" viewBox="0 0 64 64">
+            <polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/>
+        </svg>`
+        }
+        composition += `
+                    <p>${messageBody}</p>
+                    <svg class="icon close" viewBox="0 0 64 64">
+                        <title>Close</title>
+                        <line x1="64" y1="0" x2="0" y2="64"/>
+                        <line x1="64" y1="64" x2="0" y2="0"/>
+                    </svg>`
+        notification.innerHTML = composition
+        this.notificationPanel.prepend(notification)
+        if (window.innerWidth > 640) {
+            notification.animate([{
+                    transform: `translateX(1rem)`,
+                    opacity: '0'
+                },
+                {
+                    transform: 'translateX(0)',
+                    opacity: '1'
+                }
+            ], this.animationOptions).onfinish = () => {
+                notification.setAttribute('style', `transform: none;`);
+            }
+        } else {
+            notification.setAttribute('style', `transform: translateY(0); opacity: 1`)
+        }
+        notification.addEventListener('touchstart', this.handleTouchStart)
+        notification.addEventListener('touchmove', this.handleTouchMove)
+        notification.addEventListener('touchend', this.handleTouchEnd)
+    }
+
+    removeNotification = (notification, toLeft) => {
+        if (!this.offset)
+            this.offset = 0;
+
+        if (toLeft)
+            notification.animate([{
+                    transform: `translateX(${this.offset}px)`,
+                    opacity: '1'
+                },
+                {
+                    transform: `translateX(-100%)`,
+                    opacity: '0'
+                }
+            ], this.animationOptions).onfinish = () => {
+                notification.remove()
+            }
+        else {
+            notification.animate([{
+                    transform: `translateX(${this.offset}px)`,
+                    opacity: '1'
+                },
+                {
+                    transform: `translateX(100%)`,
+                    opacity: '0'
+                }
+            ], this.animationOptions).onfinish = () => {
+                notification.remove()
+            }
+        }
+    }
+
+    clearAll = () => {
+        Array.from(this.notificationPanel.children).forEach(child => {
+            this.removeNotification(child)
+        })
+    }
+
+    connectedCallback() {
+        this.notificationPanel = this.shadowRoot.querySelector('.notification-panel')
+        this.animationOptions = {
+            duration: 300,
+            fill: "forwards",
+            easing: "ease"
+        }
+        this.fontSize = Number(window.getComputedStyle(document.body).getPropertyValue('font-size').match(/\d+/)[0])
+        this.notification
+        this.offset
+        this.touchStartX = 0
+        this.touchEndX = 0
+        this.touchStartTime = 0
+        this.touchEndTime = 0
+        this.threshold = this.notificationPanel.getBoundingClientRect().width * 0.3
+        this.touchEndAnimataion;
+
+        this.notificationPanel.addEventListener('click', e => {
+            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) {
+                        if (!mutation.addedNodes[0].classList.contains('pinned'))
+                            setTimeout(() => {
+                                this.removeNotification(mutation.addedNodes[0])
+                            }, 5000);
+                        if (window.innerWidth > 640)
+                            this.notificationPanel.style.padding = '1.5rem 0 3rem 1.5rem';
+                        else
+                            this.notificationPanel.style.padding = '1rem 1rem 2rem 1rem';
+                    } else if (mutation.removedNodes.length && !this.notificationPanel.children.length) {
+                        this.notificationPanel.style.padding = 0;
+                    }
+                }
+            })
+        })
+        observer.observe(this.notificationPanel, {
+            attributes: true,
+            childList: true,
+            subtree: true
+        })
+    }
+})
+
+
+// sm-menu
+const smMenu = document.createElement('template')
+smMenu.innerHTML = `
+<style>     
+*{
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+} 
+.menu{
+    display: -ms-grid;
+    display: grid;
+    place-items: center;
+    position: relative;
+    height: 2rem;
+    width: 2rem;
+    outline: none;
+}
+.icon {
+    position: absolute;
+    fill: rgba(var(--text-color), 0.7);
+    height: 2.4rem;
+    width: 2.4rem;
+    padding: 0.7rem;
+    stroke: rgba(var(--text-color), 0.7);
+    stroke-width: 6;
+    overflow: visible;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    border-radius: 2rem;
+    -webkit-transition: background 0.3s;
+    -o-transition: background 0.3s;
+    transition: background 0.3s;
+}      
+:host{
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+}
+.hide{
+    opacity: 0;
+    pointer-events: none;
+}
+.select{
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    cursor: pointer;
+    width: 100%;
+    -webkit-tap-highlight-color: transparent;
+}
+.menu:focus .icon,
+.focused{
+    background: rgba(var(--text-color), 0.1); 
+}
+:host([align-options="left"]) .options{
+    left: 0;
+}
+:host([align-options="right"]) .options{
+    right: 0;
+}
+.options{
+    padding: 0.5rem 0;
+    overflow: hidden auto;
+    position: absolute;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    min-width: -webkit-max-content;
+    min-width: -moz-max-content;
+    min-width: max-content;
+    -webkit-transform: translateY(-1rem);
+        -ms-transform: translateY(-1rem);
+            transform: translateY(-1rem);
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    background: rgba(var(--foreground-color), 1);
+    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
+    transition: opacity 0.3s, -webkit-transform 0.3s;
+    -o-transition: opacity 0.3s, transform 0.3s;
+    transition: opacity 0.3s, transform 0.3s;
+    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
+    border: solid 1px rgba(var(--text-color), 0.2);
+    border-radius: 0.3rem;
+    z-index: 2;
+    -webkit-box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
+            box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
+    top: 100%;
+    bottom: auto;
+}
+.moveUp{
+    top: auto;
+    bottom: 100%;
+    -webkit-transform: translateY(1rem);
+        -ms-transform: translateY(1rem);
+            transform: translateY(1rem);
+}
+.moveLeft{
+    left: auto;
+    right: 0;
+}
+.no-transformations{
+    -webkit-transform: none !important;
+        -ms-transform: none !important;
+            transform: none !important;
+}
+@media (hover: hover){
+    .menu:hover .icon{
+        background: rgba(var(--text-color), 0.1); 
+    }
+}
+</style>
+<div class="select">
+    <div class="menu" tabindex="0">
+        <svg class="icon" viewBox="0 0 64 64">
+            <title>options</title>
+            <circle cx="32" cy="6" r="5.5"/>
+            <circle cx="32" cy="58" r="5.5"/>
+            <circle cx="32" cy="31.89" r="5.5"/>
+        </svg>
+    </div>
+    <div class="options hide">
+        <slot></slot> 
+    </div>
+</div>`;
+customElements.define('sm-menu', class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(smMenu.content.cloneNode(true))
+    }
+    static get observedAttributes() {
+        return ['value']
+    }
+    get value() {
+        return this.getAttribute('value')
+    }
+    set value(val) {
+        this.setAttribute('value', val)
+    }
+    expand = () => {
+        if (!this.open) {
+            this.optionList.classList.remove('hide')
+            this.optionList.classList.add('no-transformations')
+            this.open = true
+            this.icon.classList.add('focused')
+        }
+    }
+    collapse() {
+        if (this.open) {
+            this.open = false
+            this.icon.classList.remove('focused')
+            this.optionList.classList.add('hide')
+            this.optionList.classList.remove('no-transformations')
+        }
+    }
+    connectedCallback() {
+        this.availableOptions
+        this.containerDimensions
+        this.optionList = this.shadowRoot.querySelector('.options')
+        let slot = this.shadowRoot.querySelector('.options slot'),
+            menu = this.shadowRoot.querySelector('.menu')
+        this.icon = this.shadowRoot.querySelector('.icon')
+        this.open = false;
+        menu.addEventListener('click', e => {
+            if (!this.open) {
+                this.expand()
+            } else {
+                this.collapse()
+            }
+        })
+        menu.addEventListener('keydown', e => {
+            if (e.code === 'ArrowDown' || e.code === 'ArrowRight') {
+                e.preventDefault()
+                this.availableOptions[0].focus()
+            }
+            if (e.code === 'Enter' || e.code === 'Space') {
+                e.preventDefault()
+                if (!this.open) {
+                    this.expand()
+                } else {
+                    this.collapse()
+                }
+            }
+        })
+        this.optionList.addEventListener('keydown', e => {
+            if (e.code === 'ArrowUp' || e.code === 'ArrowRight') {
+                e.preventDefault()
+                if (document.activeElement.previousElementSibling) {
+                    document.activeElement.previousElementSibling.focus()
+                }
+            }
+            if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') {
+                e.preventDefault()
+                if (document.activeElement.nextElementSibling)
+                    document.activeElement.nextElementSibling.focus()
+            }
+        })
+        this.optionList.addEventListener('click', e => {
+            this.collapse()
+        })
+        slot.addEventListener('slotchange', e => {
+            this.availableOptions = slot.assignedElements()
+            this.containerDimensions = this.optionList.getBoundingClientRect()
+            this.menuDimensions = menu.getBoundingClientRect()
+        });
+        window.addEventListener('mousedown', e => {
+            if (!this.contains(e.target) && e.button !== 2) {
+                this.collapse()
+            }
+        })
+        if (this.hasAttribute('set-context') && this.getAttribute('set-context') === 'true') {
+            this.parentNode.setAttribute('oncontextmenu', 'return false')
+            this.parentNode.addEventListener('mouseup', e => {
+                if (e.button === 2) {
+                    this.expand()
+                }
+            })
+        }
+    }
+})
+
+// option
+const smMenuOption = document.createElement('template')
+smMenuOption.innerHTML = `
+<style>     
+*{
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+}     
+:host{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+}
+.option{
+    opacity: 0.7;
+    min-width: 100%;
+    padding: 0.6rem 2rem;
+    cursor: pointer;
+    overflow-wrap: break-word;
+    white-space: nowrap;
+    outline: none;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    text-transform: capitalize;
+}
+:host(:focus){
+    outline: none;
+    background: rgba(var(--text-color), 0.1);
+}
+@media (hover: hover){
+    .option:hover{
+        opacity: 1;
+        background: rgba(var(--text-color), 0.1);
+    }
+}
+</style>
+<div class="option">
+    <slot></slot> 
+</div>`;
+customElements.define('sm-menu-option', class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(smMenuOption.content.cloneNode(true))
+    }
+
+    connectedCallback() {
+        this.addEventListener('keyup', e => {
+            if (e.code === 'Enter' || e.code === 'Space') {
+                e.preventDefault()
+                this.click()
+            }
+        })
+        this.setAttribute('tabindex', '0')
+    }
+})
+
+// tab-header
+
+const smTabHeader = document.createElement('template')
+smTabHeader.innerHTML = `
+<style>
+    *{
+        padding: 0;
+        margin: 0;
+        -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+    } 
+    :host{
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+    }
+    .tabs{
+        position: relative;
+        display: -ms-grid;
+        display: grid;
+        width: 100%;
+    }
+    .tab-header{
+        display: -ms-grid;
+        display: grid;
+        grid-auto-flow: column;
+        -webkit-box-pack: start;
+            -ms-flex-pack: start;
+                justify-content: flex-start;
+        gap: 1rem;
+        position: relative;
+        overflow: auto hidden;
+        max-width: 100%;
+        scrollbar-width: 0;
+    }
+    .indicator{
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        height: 0.15rem;
+        border-radius: 1rem 1rem 0 0;  
+        background: var(--accent-color);
+        -webkit-transition: width 0.3s, -webkit-transform 0.3s;
+        transition: width 0.3s, -webkit-transform 0.3s;
+        -o-transition: transform 0.3s, width 0.3s;
+        transition: transform 0.3s, width 0.3s;
+        transition: transform 0.3s, width 0.3s, -webkit-transform 0.3s;
+        pointer-events: none;
+    }
+    :host([variant="tab"]) .indicator{
+        height: 100%;
+        border-radius: 0.3rem;
+    }
+    :host(.round) .indicator{
+        border-radius: 3rem;
+    }
+    :host([variant="tab"]) .tab-header{
+        border-bottom: none; 
+    }
+    .hide-completely{
+        display: none;
+    }
+    :host([variant="tab"]) .tab-header{
+        gap: 0.2rem;
+        display: -ms-inline-grid;
+        display: inline-grid;
+        justify-self: flex-start;
+        border-radius: 0.3rem;
+    }
+    :host([variant="tab"]) slot::slotted(.active){
+        color: rgba(var(--foreground-color), 1);
+    }
+    slot::slotted(.active){
+        color: var(--accent-color);
+        opacity: 1;
+    }
+    @media (hover: none){
+        .tab-header::-webkit-scrollbar-track {
+            -webkit-box-shadow: none !important;
+            background-color: transparent !important;
+        }
+        .tab-header::-webkit-scrollbar {
+            height: 0;
+            background-color: transparent;
+        }
+    }         
+</style>
+<div part="tab-container" class="tabs">
+    <div part="tab-header" class="tab-header">
+        <slot></slot>
+        <div part="indicator" class="indicator"></div>
+    </div>
+</div>
+`;
+
+customElements.define('sm-tab-header', class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(smTabHeader.content.cloneNode(true))
+
+        this.indicator = this.shadowRoot.querySelector('.indicator');
+        this.tabSlot = this.shadowRoot.querySelector('slot');
+        this.tabHeader = this.shadowRoot.querySelector('.tab-header');
+    }
+
+    sendDetails(element) {
+        this.dispatchEvent(
+            new CustomEvent("switchtab", {
+                bubbles: true,
+                detail: {
+                    target: this.target,
+                    rank: parseInt(element.getAttribute('rank'))
+                }
+            })
+        )
+    }
+
+    moveIndiactor(tabDimensions) {
+        //if(this.isTab)
+        this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
+        //else
+        //this.indicator.setAttribute('style', `width: calc(${tabDimensions.width}px - 1.6rem); transform: translateX(calc(${ tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px + 0.8rem)`)
+    }
+
+    connectedCallback() {
+        if (!this.hasAttribute('target') || this.getAttribute('target').value === '') return;
+        this.prevTab
+        this.allTabs
+        this.activeTab
+        this.isTab = false
+        this.target = this.getAttribute('target')
+
+        if (this.hasAttribute('variant') && this.getAttribute('variant') === 'tab') {
+            this.isTab = true
+        }
+
+        this.tabSlot.addEventListener('slotchange', () => {
+            this.tabSlot.assignedElements().forEach((tab, index) => {
+                tab.setAttribute('rank', index)
+            })
+        })
+        this.allTabs = this.tabSlot.assignedElements();
+
+        this.tabSlot.addEventListener('click', e => {
+            if (e.target === this.prevTab || !e.target.closest('sm-tab'))
+                return
+            if (this.prevTab)
+                this.prevTab.classList.remove('active')
+            e.target.classList.add('active')
+
+            e.target.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'center'
+            })
+            this.moveIndiactor(e.target.getBoundingClientRect())
+            this.sendDetails(e.target)
+            this.prevTab = e.target;
+            this.activeTab = e.target;
+        })
+        let resizeObserver = new ResizeObserver(entries => {
+            entries.forEach((entry) => {
+                if (this.prevTab) {
+                    let tabDimensions = this.activeTab.getBoundingClientRect();
+                    this.moveIndiactor(tabDimensions)
+                }
+            })
+        })
+        resizeObserver.observe(this)
+        let observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    this.indicator.style.transition = 'none'
+                    if (this.activeTab) {
+                        let tabDimensions = this.activeTab.getBoundingClientRect();
+                        this.moveIndiactor(tabDimensions)
+                    } else {
+                        this.allTabs[0].classList.add('active')
+                        let tabDimensions = this.allTabs[0].getBoundingClientRect();
+                        this.moveIndiactor(tabDimensions)
+                        this.sendDetails(this.allTabs[0])
+                        this.prevTab = this.tabSlot.assignedElements()[0];
+                        this.activeTab = this.prevTab;
+                    }
+                }
+            })
+        }, {
+            threshold: 1.0
+        })
+        observer.observe(this)
+    }
+})
+
+// tab-panels
+
+const smTabPanels = document.createElement('template')
+smTabPanels.innerHTML = `
+<style>
+*{
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+} 
+:host{
+    width: 100%;
+}
+.panel-container{
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    overflow: hidden auto;
+}
+slot::slotted(.hide-completely){
+    display: none;
+}
+@media (hover: none){
+    .tab-header::-webkit-scrollbar-track {
+        -webkit-box-shadow: none !important;
+        background-color: transparent !important;
+    }
+    .tab-header::-webkit-scrollbar {
+        height: 0;
+        background-color: transparent;
+    }
+}         
+</style>
+<div part="panel-container" class="panel-container">
+    <slot>Nothing to see here.</slot>
+</div>
+`;
+
+customElements.define('sm-tab-panels', class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(smTabPanels.content.cloneNode(true))
+        this.panelSlot = this.shadowRoot.querySelector('slot');
+    }
+    connectedCallback() {
+
+        //animations
+        let flyInLeft = [{
+                    opacity: 0,
+                    transform: 'translateX(-1rem)'
+                },
+                {
+                    opacity: 1,
+                    transform: 'none'
+                }
+            ],
+            flyInRight = [{
+                    opacity: 0,
+                    transform: 'translateX(1rem)'
+                },
+                {
+                    opacity: 1,
+                    transform: 'none'
+                }
+            ],
+            flyOutLeft = [{
+                    opacity: 1,
+                    transform: 'none'
+                },
+                {
+                    opacity: 0,
+                    transform: 'translateX(-1rem)'
+                }
+            ],
+            flyOutRight = [{
+                    opacity: 1,
+                    transform: 'none'
+                },
+                {
+                    opacity: 0,
+                    transform: 'translateX(1rem)'
+                }
+            ],
+            animationOptions = {
+                duration: 300,
+                fill: 'forwards',
+                easing: 'ease'
+            }
+        this.prevPanel
+        this.allPanels
+        this.previousRank
+
+        this.panelSlot.addEventListener('slotchange', () => {
+            this.panelSlot.assignedElements().forEach((panel) => {
+                panel.classList.add('hide-completely')
+            })
+        })
+        this.allPanels = this.panelSlot.assignedElements()
+        this._targetBodyFlyRight = (targetBody) => {
+            targetBody.classList.remove('hide-completely')
+            targetBody.animate(flyInRight, animationOptions)
+        }
+        this._targetBodyFlyLeft = (targetBody) => {
+            targetBody.classList.remove('hide-completely')
+            targetBody.animate(flyInLeft, animationOptions)
+        }
+        document.addEventListener('switchtab', e => {
+            if (e.detail.target !== this.id)
+                return
+
+            if (this.prevPanel) {
+                let targetBody = this.allPanels[e.detail.rank],
+                    currentBody = this.prevPanel;
+                if (this.previousRank < e.detail.rank) {
+                    if (currentBody && !targetBody)
+                        currentBody.animate(flyOutLeft, animationOptions).onfinish = () => {
+                            currentBody.classList.add('hide-completely')
+                        }
+                    else if (targetBody && !currentBody) {
+                        this._targetBodyFlyRight(targetBody)
+                    } else if (currentBody && targetBody) {
+                        currentBody.animate(flyOutLeft, animationOptions).onfinish = () => {
+                            currentBody.classList.add('hide-completely')
+                            this._targetBodyFlyRight(targetBody)
+                        }
+                    }
+                } else {
+                    if (currentBody && !targetBody)
+                        currentBody.animate(flyOutRight, animationOptions).onfinish = () => {
+                            currentBody.classList.add('hide-completely')
+                        }
+                    else if (targetBody && !currentBody) {
+                        this._targetBodyFlyLeft(targetBody)
+                    } else if (currentBody && targetBody) {
+                        currentBody.animate(flyOutRight, animationOptions).onfinish = () => {
+                            currentBody.classList.add('hide-completely')
+                            this._targetBodyFlyLeft(targetBody)
+                        }
+                    }
+                }
+            } else {
+                this.allPanels[e.detail.rank].classList.remove('hide-completely')
+            }
+            this.previousRank = e.detail.rank
+            this.prevPanel = this.allPanels[e.detail.rank];
+        })
+    }
+})
+
+
+const slidingSection = document.createElement('template')
+slidingSection.innerHTML = `
+<style>
+*{
+    margin: 0;
+    padding: 0;
+    box-sizzing: border-box;
+}
+:host{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    height: 100%;
+    width: 100%;
+}
+.section{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    max-width: 100%;
+    overflow: hidden auto;
+    -ms-scroll-snap-type: mandatory x;
+        scroll-snap-type: mandatory x;
+}
+
+</style>
+<section class="section">
+    <slot></slot>
+</section>
+`
+
+customElements.define('sm-sliding-section', class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(slidingSection.content.cloneNode(true))
+    }
+    connectedCallback() {
+
+    }
+})
+
+const section = document.createElement('template')
+section.innerHTML = `
+<style>
+*{
+    margin: 0;
+    padding: 0;
+    box-sizzing: border-box;
+}
+:host{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+}
+.section{
+    min-width: 100%;
+    scroll-snap-align: start;
+}
+</style>
+<section class="section">
+    <slot></slot>
+</section>
+`
+
+customElements.define('sm-section', class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(section.content.cloneNode(true))
+    }
+})
\ No newline at end of file
diff --git a/Standard UI Components/css/main.css b/Standard UI Components/css/main.css
index 5b8a4f5..02fdf4a 100644
--- a/Standard UI Components/css/main.css	
+++ b/Standard UI Components/css/main.css	
@@ -1,272 +1,609 @@
-@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
 * {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
   padding: 0;
   margin: 0;
-  font-family: 'Roboto', sans-serif;
+  box-sizing: border-box;
+  font-family: "Roboto", sans-serif;
 }
 
-html {
+:root {
+  font-size: clamp(1rem, 1.2vmax, 3rem);
+}
+
+html, body {
+  height: 100%;
   scroll-behavior: smooth;
 }
 
 body {
-  --accent-color: rgb(9, 155, 82);
-  --light-accent-shade: rgb(223, 255, 239);
-  --text: 17, 17, 17;
-  --foreground: 255, 255, 255;
-  --font-family: 'Roboto', sans-serif;
+  --accent-color: #4d2588;
+  --light-shade: rgba(var(--text-color), 0.06);
+  --text-color: 17, 17, 17;
+  --text-color-light: 100, 100, 100;
+  --foreground-color: 255, 255, 255;
+  --background-color: #F6f6f6;
   --error-color: red;
+  --green: #00843b;
+  color: rgba(var(--text-color), 1);
+  background: var(--background-color);
+}
+
+body[data-theme=dark] {
+  --accent-color: #976dd6;
+  --green: #13ff5a;
+  --text-color: 240, 240, 240;
+  --text-color-light: 170, 170, 170;
+  --foreground-color: 20, 20, 20;
+  --background-color: #0a0a0a;
+  --error-color: rgb(255, 106, 106);
+}
+
+.full-bleed {
+  grid-column: 1/4;
+}
+
+.h1 {
+  font-size: 2.5rem;
+}
+
+.h2 {
+  font-size: 2rem;
+}
+
+.h3 {
+  font-size: 1.4rem;
+}
+
+.h4 {
+  font-size: 1rem;
+}
+
+.h5 {
+  font-size: 0.8rem;
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+
+.capitalize {
+  text-transform: capitalize;
+}
+
+p {
+  font-size: 0.8;
+  max-width: 75ch;
+  line-height: 1.7;
+  color: rgba(var(--text-color), 0.8);
+}
+p:not(:last-of-type) {
+  margin-bottom: 1rem;
+}
+
+img {
+  object-fit: cover;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+a:focus-visible {
+  box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
+}
+
+button {
+  display: inline-flex;
+  border: none;
+  background-color: inherit;
+}
+
+a:any-link:focus-visible {
+  outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+
+sm-button {
+  --border-radius: 0.3rem;
+}
+
+ul {
+  list-style: none;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.hide {
+  opacity: 0;
+  pointer-events: none;
 }
 
 .hide-completely {
-  display: none;
+  display: none !important;
 }
 
-h1, h2, h3, h4.h5 {
-  font-family: 'Poppins', sans-serif;
+.no-transformations {
+  transform: none !important;
+}
+
+.overflow-ellipsis {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.breakable {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  -ms-word-break: break-all;
+  word-break: break-word;
+  -ms-hyphens: auto;
+  -moz-hyphens: auto;
+  -webkit-hyphens: auto;
+  hyphens: auto;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.grid-3 {
+  grid-template-columns: 1fr auto auto;
+}
+
+.flow-column {
+  grid-auto-flow: column;
+}
+
+.gap-0-5 {
+  gap: 0.5rem;
+}
+
+.gap-1 {
+  gap: 1rem;
+}
+
+.gap-1-5 {
+  gap: 1.5rem;
+}
+
+.gap-2 {
+  gap: 2rem;
+}
+
+.gap-3 {
+  gap: 3rem;
+}
+
+.text-align-right {
+  text-align: right;
+}
+
+.align-start {
+  align-items: flex-start;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.justify-start {
+  justify-content: start;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-right {
+  margin-left: auto;
+}
+
+.align-self-center {
+  align-self: center;
+}
+
+.justify-self-center {
+  justify-self: center;
+}
+
+.justify-self-start {
+  justify-self: start;
+}
+
+.justify-self-end {
+  justify-self: end;
+}
+
+.direction-column {
+  flex-direction: column;
+}
+
+.space-between {
+  justify-content: space-between;
+}
+
+.w-100 {
+  width: 100%;
+}
+
+.color-0-8 {
+  color: rgba(var(--text-color), 0.8);
+}
+
+.weight-400 {
+  font-weight: 400;
+}
+
+.weight-500 {
   font-weight: 500;
 }
 
-a:-webkit-any-link {
-  text-decoration: none;
+.ripple {
+  position: absolute;
+  border-radius: 50%;
+  transform: scale(0);
+  background: rgba(var(--text-color), 0.16);
+  pointer-events: none;
+}
+
+.interact {
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.observe-empty-state:empty {
+  display: none;
+}
+
+.observe-empty-state:not(:empty) ~ .empty-state {
+  display: none;
+}
+
+.icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  fill: rgba(var(--text-color), 0.9);
+}
+
+.button__icon {
+  height: 1.2rem;
+  width: 1.2rem;
+}
+.button__icon--left {
+  margin-right: 0.5rem;
+}
+.button__icon--right {
+  margin-left: 0.5rem;
+}
+
+.theme-switcher {
+  position: relative;
+  justify-self: flex-end;
+  width: 1.5rem;
+  height: 1.5rem;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.theme-switcher .icon {
+  position: absolute;
+  transition: transform 0.6s;
+}
+
+.theme-switcher__checkbox {
+  display: none;
+}
+.theme-switcher__checkbox:checked ~ .moon-icon {
+  transform: scale(0) rotate(90deg);
+}
+.theme-switcher__checkbox:not(:checked) ~ .sun-icon {
+  transform: scale(0) rotate(-90deg);
+}
+
+pre .str, code .str {
+  color: #65B042;
+}
+
+/* string  - green */
+pre .kwd, code .kwd {
+  color: #E28964;
+}
+
+/* keyword - dark pink */
+pre .com, code .com {
+  color: #AEAEAE;
+  font-style: italic;
+}
+
+/* comment - gray */
+pre .typ, code .typ {
+  color: #4395ff;
+}
+
+/* type - light blue */
+pre .lit, code .lit {
+  color: #1a76c2;
+}
+
+/* literal */
+pre .pun, code .pun {
+  color: rgba(var(--text-color), 0.8);
+}
+
+/* punctuation */
+pre .pln, code .pln {
+  color: rgba(var(--text-color), 0.8);
+}
+
+/* plaintext */
+pre .tag, code .tag {
+  color: #22863a;
+}
+
+/* html/xml tag */
+pre .atn, code .atn {
+  color: #005cc5;
+}
+
+/* html/xml attribute name */
+pre .atv, code .atv {
   color: var(--accent-color);
 }
 
-a:-moz-any-link {
-  text-decoration: none;
-  color: var(--accent-color);
+/* html/xml attribute value*/
+pre .dec, code .dec {
+  color: #3387CC;
 }
 
-a:any-link {
-  text-decoration: none;
-  color: var(--accent-color);
+/* decimal - blue */
+pre {
+  max-width: 100%;
+  margin: 1rem 0;
+  padding: 0 1.5rem;
+  overflow-x: auto;
+  font-size: 0.9rem;
+  white-space: pre-line;
+  border-radius: 0.5rem;
+  background: rgba(var(--text-color), 0.04);
+}
+
+code {
+  font-family: "Roboto Mono", monospace;
+  border-radius: 0.2rem;
+  font-weight: 400;
+  padding: 0.2rem 0.4rem;
+  background: rgba(var(--text-color), 0.04);
+}
+
+code > * {
+  font-family: "Roboto Mono", monospace;
+}
+
+pre code {
+  line-height: 1.4;
+  border-radius: none;
+  background: none;
+  width: 100%;
+}
+
+h1, h2, h3, h4.h5 {
+  font-family: "Poppins", sans-serif;
 }
 
 h2 {
   margin: 3rem 0 1rem 0;
   text-transform: capitalize;
 }
-
 h2:first-of-type {
   margin-top: 1rem;
 }
 
-h1.headline {
-  color: rgba(var(--text), 1);
-}
-
-section {
-  height: 100vh;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  background-size: cover;
-  text-align: center;
-  color: rgba(var(--text), 1);
-  padding: 2rem;
-  border-bottom: 1px solid rgba(var(--text), 0.2);
-}
-
-section h1 {
-  font-weight: 600;
-  font-size: 2.5rem;
-  line-height: 1.2em;
-  z-index: 1;
-  text-transform: uppercase;
-  letter-spacing: 0.2rem;
-}
-
-section h4 {
-  z-index: 1;
-  font-weight: 400;
-  margin-top: 1.2rem;
-}
-
-section .background-box {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -ms-flex-item-align: center;
-      align-self: center;
-  position: absolute;
-  border: solid 1px rgba(var(--text), 0.3);
-  width: 60vw;
-  height: 40%;
-  -webkit-transform: skewX(-10deg);
-          transform: skewX(-10deg);
-  background: rgba(var(--foreground), 1);
-  z-index: -1;
-}
-
-section a {
-  margin-top: 2rem;
-  font-weight: 500;
-}
-
-section sm-button {
-  margin-top: 4rem;
-}
-
-section sm-button:first-of-type {
-  margin-right: 1rem;
-}
-
-pre {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  max-width: 100%;
-}
-
-code {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  color: #311B92;
-  background: rgba(var(--text), 0.1);
-  padding: 0.2rem 0.4rem;
-  border-radius: 0.2rem;
-  margin: 0.2rem 0;
-}
-
-code.extend {
-  padding: 0 1.5rem;
-  line-height: 1.6;
-  margin: 1rem 0;
-  overflow-x: auto;
-  max-width: 100%;
-}
-
 main {
-  height: 100vh;
+  display: grid;
+  height: 100%;
 }
 
-p {
-  margin: 1rem 0 1.5rem 0;
-  line-height: 1.6em;
-  color: rgba(var(--text), 0.8);
-  font-size: 1rem;
+#main_header {
+  padding: 0.5rem 1.5rem;
+  border-bottom: 1px solid rgba(var(--text-color), 0.1);
 }
 
-p::first-letter {
-  text-transform: capitalize;
+#side_nav_button {
+  padding: 0.5rem;
+  margin-left: -0.5rem;
 }
 
-ol {
-  padding: 0.6rem 1rem;
+#backdrop {
+  position: fixed;
+  z-index: 4;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
 }
 
-ol li {
-  margin-bottom: 1rem;
-}
-
-ol li:last-of-type {
-  margin-bottom: 0;
-}
-
-ol li::first-letter {
-  text-transform: capitalize;
-}
-
-.left {
+#side_nav,
+.right {
   max-height: 100%;
   overflow-y: auto;
+  padding-bottom: 3rem;
 }
 
-.left h3 {
-  padding: 1.5rem;
+#side_nav h4 {
+  font-size: 0.9rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 1rem 1.5rem;
 }
 
 .right {
   padding: 1.5rem;
 }
-
 .right h1 {
   margin-bottom: 1.5rem;
 }
 
 .list {
   list-style: none;
-  display: -webkit-box;
-  display: -ms-flexbox;
   display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-      -ms-flex-direction: column;
-          flex-direction: column;
-  margin-bottom: 0.5rem;
+  flex-direction: column;
+  margin-bottom: 0.8rem;
 }
 
-.list .item {
-  padding: 0.6rem 1.5rem;
+.list__item {
+  display: flex;
+  padding: 0.8rem 1.5rem;
   text-transform: capitalize;
 }
-
-.list .active {
+.list__item--active {
   color: var(--accent-color);
-  background: rgba(var(--text), 0.06);
+  background: rgba(var(--text-color), 0.06);
 }
 
 .card {
-  height: 24rem;
+  display: flex;
+  flex-direction: column;
   margin-right: 1rem;
   border-radius: 0.4rem;
-  width: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
+  padding: 1.5rem;
+  min-width: min(24rem, 80%);
+  background-color: rgba(var(--text-color), 0.06);
 }
 
 sm-carousel {
   margin-bottom: 1rem;
 }
 
-@media screen and (min-width: 640px) {
-  main {
-    display: -ms-grid;
-    display: grid;
-    -ms-grid-columns: 14rem minmax(0, 1fr);
-        grid-template-columns: 14rem minmax(0, 1fr);
-    gap: 1.5rem;
-  }
-  p {
-    max-width: 46vw;
-  }
-  .background-box {
-    width: 24rem !important;
-    height: 50% !important;
-  }
+sm-tab-header {
+  margin-bottom: 1.5rem;
+}
+
+.page {
+  display: flex;
+  flex-direction: column;
+}
+
+ol {
+  padding: 0.6rem 1rem;
+}
+ol li {
+  margin-bottom: 1rem;
+}
+ol li:last-of-type {
+  margin-bottom: 0;
+}
+ol li::first-letter {
+  text-transform: capitalize;
+}
+
+#total_components_count {
+  font-size: 4rem;
+}
+
+#components_selection_list {
+  display: grid;
+  gap: 1.5rem;
+  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+  padding: 1.5rem 0 3rem 0;
+}
+
+.comp-checkbox__title {
+  margin-left: 0.5rem;
 }
 
 @media screen and (max-width: 640px) {
-  .left {
+  main {
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 1fr;
+  }
+
+  #side_nav {
+    display: flex;
+    flex-direction: column;
     position: fixed;
-    z-index: 2;
-    background: rgba(var(--foreground), 1);
-    -webkit-box-shadow: 0.5rem 0 2rem rgba(0, 0, 0, 0.1);
-            box-shadow: 0.5rem 0 2rem rgba(0, 0, 0, 0.1);
-    height: 100vh;
-    -webkit-transform: translateX(-100%);
-            transform: translateX(-100%);
+    z-index: 5;
+    height: 100%;
+    width: calc(100% - 4rem);
+    transition: transform 0.3s;
+    background-color: rgba(var(--foreground-color), 1);
+    box-shadow: 0.5rem 0 2rem rgba(0, 0, 0, 0.1);
+  }
+  #side_nav:not(.reveal) {
+    transform: translateX(-100%);
+  }
+
+  .reveal {
+    transform: none;
   }
 }
+@media screen and (min-width: 640px) {
+  #main_header {
+    padding: 1rem 1.5rem;
+    grid-area: main-header;
+  }
 
+  #side_nav_button {
+    display: none;
+  }
+
+  main {
+    grid-template-columns: 14rem minmax(0, 1fr);
+    grid-template-areas: "main-header main-header" ". .";
+  }
+
+  .right {
+    display: grid;
+    grid-template-columns: 1fr 90% 1fr;
+  }
+  .right > * {
+    grid-column: 2/3;
+  }
+
+  #overview_page {
+    display: grid;
+    gap: 1.5rem;
+    grid-template-columns: 1fr auto;
+  }
+  #overview_page > div:first-of-type {
+    grid-column: 2/3;
+    text-align: right;
+  }
+  #overview_page > div:nth-of-type(2) {
+    grid-row: 1/2;
+  }
+}
 @media (any-hover: hover) {
-  .item:hover {
-    background: rgba(var(--text), 0.1);
+  ::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgba(var(--text-color), 0.3);
+    border-radius: 1rem;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgba(var(--text-color), 0.5);
+  }
+
+  .list__item:hover {
+    background: rgba(var(--text-color), 0.1);
     cursor: pointer;
   }
-}
-/*# sourceMappingURL=main.css.map */
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/Standard UI Components/css/main.css.map b/Standard UI Components/css/main.css.map
index bc096ce..fb02e7c 100644
--- a/Standard UI Components/css/main.css.map	
+++ b/Standard UI Components/css/main.css.map	
@@ -1,9 +1 @@
-{
-    "version": 3,
-    "mappings": "AAAA,OAAO,CAAC,wFAAI;AACZ,OAAO,CAAC,yFAAI;AACZ,AAAA,CAAC,CAAA;EACG,UAAU,EAAE,UAAU;EACtB,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,CAAC;EACT,WAAW,EAAE,oBAAoB;CACpC;;AACD,AAAA,IAAI,CAAA;EACA,eAAe,EAAE,MAAM;CAC1B;;AACD,AAAA,IAAI,CAAA;EACA,cAAc,CAAA,gBAAC;EACf,oBAAoB,CAAA,mBAAC;EACrB,MAAM,CAAA,WAAC;EACP,YAAY,CAAA,cAAC;EACb,aAAa,CAAA,qBAAC;EACd,aAAa,CAAA,IAAC;CACjB;;AACD,AAAA,gBAAgB,CAAA;EACZ,OAAO,EAAE,IAAI;CAChB;;AACD,AAAA,EAAE,EAAC,EAAE,EAAC,EAAE,EAAC,EAAE,AAAA,GAAG,CAAA;EACV,WAAW,EAAE,qBAAqB;EAClC,WAAW,EAAE,GAAG;CACnB;;AACD,AAAA,CAAC,AAAA,SAAS,CAAA;EACN,eAAe,EAAE,IAAI;EACrB,KAAK,EAAE,mBAAmB;CAC7B;;AACD,AAAA,EAAE,CAAA;EACA,MAAM,EAAE,aAAa;EACrB,cAAc,EAAE,UAAU;CAI3B;;AAND,AAGE,EAHA,AAGC,cAAc,CAAA;EACX,UAAU,EAAE,IAAI;CACnB;;AAEH,AAAA,EAAE,AAAA,SAAS,CAAA;EACP,KAAK,EAAE,oBAAoB;CAC9B;;AACD,AAAA,OAAO,CAAA;EACH,MAAM,EAAE,KAAK;EACb,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,eAAe,EAAE,MAAM;EACvB,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,KAAK;EACtB,UAAU,EAAE,MAAM;EAClB,KAAK,EAAE,oBAAoB;EAC3B,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,GAAG,CAAC,KAAK,CAAC,sBAAqB;CAmCjD;;AA7CD,AAWI,OAXG,CAWH,EAAE,CAAA;EACE,WAAW,EAAE,GAAG;EAChB,SAAS,EAAE,MAAM;EACjB,WAAW,EAAE,KAAK;EAClB,OAAO,EAAE,CAAC;EACV,cAAc,EAAE,SAAS;EACzB,cAAc,EAAE,MAAM;CACzB;;AAlBL,AAmBI,OAnBG,CAmBH,EAAE,CAAA;EACE,OAAO,EAAE,CAAC;EACV,WAAW,EAAE,GAAG;EAChB,UAAU,EAAE,MAAM;CACrB;;AAvBL,AAwBI,OAxBG,CAwBH,eAAe,CAAA;EACX,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,MAAM;EAClB,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,sBAAsB;EACxC,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,GAAG;EACX,SAAS,EAAE,aAAa;EACxB,UAAU,EAAE,0BAA0B;EACtC,OAAO,EAAE,EAAE;CACd;;AAlCL,AAmCI,OAnCG,CAmCH,CAAC,CAAA;EACG,UAAU,EAAE,IAAI;EAChB,WAAW,EAAE,GAAG;CACnB;;AAtCL,AAuCI,OAvCG,CAuCH,SAAS,CAAA;EACL,UAAU,EAAE,IAAI;CACnB;;AAzCL,AA0CI,OA1CG,CA0CH,SAAS,AAAA,cAAc,CAAA;EACnB,YAAY,EAAE,IAAI;CACrB;;AAEL,AAAA,GAAG,CAAA;EACC,OAAO,EAAE,WAAW;EAChB,SAAS,EAAE,IAAI;CACtB;;AACD,AAAA,IAAI,CAAA;EACA,OAAO,EAAE,WAAW;EACpB,KAAK,EAAE,OAAO;EACd,UAAU,EAAE,sBAAqB;EACjC,OAAO,EAAE,aAAa;EACtB,aAAa,EAAE,MAAM;EACrB,MAAM,EAAE,QAAQ;CACnB;;AACD,AAAA,IAAI,AAAA,OAAO,CAAA;EACP,OAAO,EAAE,QAAQ;EACjB,WAAW,EAAE,GAAG;EAChB,MAAM,EAAE,MAAM;EACd,UAAU,EAAE,IAAI;EAChB,SAAS,EAAE,IAAI;CAClB;;AACD,AAAA,IAAI,CAAA;EACA,MAAM,EAAE,KAAK;CAChB;;AACD,AAAA,CAAC,CAAA;EACG,MAAM,EAAE,eAAe;EACvB,WAAW,EAAE,KAAK;EAClB,KAAK,EAAE,sBAAqB;EAC5B,SAAS,EAAE,IAAI;CAIlB;;AARD,AAKI,CALH,AAKI,cAAc,CAAA;EACX,cAAc,EAAE,UAAU;CAC7B;;AAEL,AAAA,EAAE,CAAA;EACE,OAAO,EAAE,WAAW;CAUvB;;AAXD,AAEI,EAFF,CAEE,EAAE,CAAA;EACE,aAAa,EAAE,IAAI;CAOtB;;AAVL,AAIQ,EAJN,CAEE,EAAE,AAEG,aAAa,CAAA;EACV,aAAa,EAAE,CAAC;CACnB;;AANT,AAOQ,EAPN,CAEE,EAAE,AAKG,cAAc,CAAA;EACX,cAAc,EAAE,UAAU;CAC7B;;AAGT,AAAA,KAAK,CAAA;EACD,UAAU,EAAE,IAAI;EAChB,UAAU,EAAE,IAAI;CAInB;;AAND,AAGI,KAHC,CAGD,EAAE,CAAA;EACE,OAAO,EAAE,MAAM;CAClB;;AAEL,AAAA,MAAM,CAAA;EACF,OAAO,EAAE,MAAM;CAIlB;;AALD,AAEI,MAFE,CAEF,EAAE,CAAA;EACE,aAAa,EAAE,MAAM;CACxB;;AAEL,AAAA,KAAK,CAAA;EACD,UAAU,EAAE,IAAI;EAChB,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,aAAa,EAAE,MAAM;CASxB;;AAbD,AAKI,KALC,CAKD,KAAK,CAAA;EACD,OAAO,EAAE,aAAa;EACtB,cAAc,EAAE,UAAU;CAC7B;;AARL,AASI,KATC,CASD,OAAO,CAAA;EACH,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE,uBAAsB;CACrC;;AAEL,AAAA,KAAK,CAAA;EACD,MAAM,EAAE,KAAK;EACb,YAAY,EAAE,IAAI;EAClB,aAAa,EAAE,MAAM;EACrB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,KAAK;CACpB;;AACD,AAAA,WAAW,CAAA;EACP,aAAa,EAAE,IAAI;CACtB;;AACD,MAAM,CAAC,MAAM,MAAM,SAAS,EAAE,KAAK;EAC/B,AAAA,IAAI,CAAA;IACA,OAAO,EAAE,IAAI;IACb,qBAAqB,EAAE,KAAK,CAAC,cAAc;IAC3C,GAAG,EAAE,MAAM;GACd;EACD,AAAA,CAAC,CAAA;IACG,SAAS,EAAE,IAAI;GAClB;EACD,AAAA,eAAe,CAAA;IACX,KAAK,EAAE,gBAAgB;IACvB,MAAM,EAAE,cAAc;GACzB;;;AAEL,MAAM,CAAC,MAAM,MAAM,SAAS,EAAE,KAAK;EAC/B,AAAA,KAAK,CAAA;IACD,QAAQ,EAAE,KAAK;IACf,OAAO,EAAE,CAAC;IACV,UAAU,EAAE,0BAA0B;IACtC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAgB;IAC1C,MAAM,EAAE,KAAK;IACb,SAAS,EAAE,iBAAiB;GAC/B;;;AAEL,MAAM,EAAE,SAAS,EAAE,KAAK;EACpB,AAAA,KAAK,AAAA,MAAM,CAAA;IACP,UAAU,EAAE,sBAAqB;IACjC,MAAM,EAAE,OAAO;GAClB",
-    "sources": [
-        "main.scss"
-    ],
-    "names": [],
-    "file": "main.css"
-}
\ No newline at end of file
+{"version":3,"sources":["main.scss"],"names":[],"mappings":"AAAQ,gGAAA;AACA,iGAAA;AACA,gFAAA;AACR;EACI,sBAAA;EACA,UAAA;EACA,SAAA;EACA,iCAAA;AACJ;;AACA;EACI,uBAAA;AAEJ;;AAAA;EACI,uBAAA;EACA,wCAAA;EACA,wBAAA;EACA,iCAAA;EACA,mCAAA;EACA,sBAAA;AAGJ;;AAGA;EAAsB,cAAA;AACtB;;AADwC,oBAAA;AACxC;EAAsB,cAAA;AAKtB;;AALwC,wBAAA;AACxC;EAAsB,cAAA;EAAgB,kBAAA;AAUtC;;AAV4D,mBAAA;AAC5D;EAAsB,cAAA;AActB;;AAdwC,sBAAA;AACxC;EAAsB,cAAA;AAkBtB;;AAlBwC,YAAA;AACxC;EAAsB,WAAA;AAsBtB;;AAtBqC,gBAAA;AACrC;EAAsB,WAAA;AA0BtB;;AA1BqC,cAAA;AACrC;EAAsB,cAAA;AA8BtB;;AA9BwC,iBAAA;AACxC;EAAsB,cAAA;AAkCtB;;AAlCwC,4BAAA;AACxC;EAAsB,cAAA;AAsCtB;;AAtCwC,4BAAA;AACxC;EAAsB,cAAA;AA0CtB;;AA1CwC,mBAAA;AAExC;EACC,cAAA;EACG,iBAAA;EACA,qBAAA;EACA,qBAAA;EACA,yCAAA;AA4CJ;;AA1CA;EACI,qCAAA;EACA,qBAAA;EACA,gBAAA;EACA,sBAAA;EACA,yCAAA;AA6CJ;;AA3CA;EACI,qCAAA;AA8CJ;;AA5CA;EACI,gBAAA;EACA,mBAAA;EACA,gBAAA;EACA,WAAA;AA+CJ;;AA1CA;EACI,aAAA;AA6CJ;;AA3CA;EACI,kCAAA;EACA,gBAAA;AA8CJ;;AA5CA;EACI,qBAAA;EACA,0BAAA;AA+CJ;;AAjDA;EACI,qBAAA;EACA,0BAAA;AA+CJ;;AAjDA;EACI,qBAAA;EACA,0BAAA;AA+CJ;;AA7CA;EACE,qBAAA;EACA,0BAAA;AAgDF;AA/CE;EACI,gBAAA;AAiDN;;AA9CA;EACI,iCAAA;AAiDJ;;AA/CA;EACI,aAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EACA,sBAAA;EACA,kBAAA;EACA,iCAAA;EACA,aAAA;EACA,qDAAA;AAkDJ;AAjDI;EACI,gBAAA;EACA,iBAAA;EACA,kBAAA;EACA,UAAA;EACA,yBAAA;EACA,sBAAA;AAmDR;AAjDI;EACI,UAAA;EACA,gBAAA;EACA,kBAAA;AAmDR;AAjDI;EACI,aAAA;EACA,kBAAA;EACA,kBAAA;EACA,8CAAA;EACA,WAAA;EACA,WAAA;EACA,wBAAA;EACA,sCAAA;EACA,WAAA;AAmDR;AAjDI;EACI,gBAAA;EACA,gBAAA;AAmDR;AAjDI;EACI,gBAAA;AAmDR;AAjDI;EACI,kBAAA;AAmDR;;AAhDA;EACI,aAAA;AAmDJ;;AAjDA;EACI,uBAAA;EACA,kBAAA;EACA,mCAAA;EACA,eAAA;AAoDJ;AAnDI;EACI,0BAAA;AAqDR;;AAlDA;EACI,oBAAA;AAqDJ;AApDI;EACI,mBAAA;AAsDR;AArDQ;EACI,gBAAA;AAuDZ;AArDQ;EACI,0BAAA;AAuDZ;;AAnDA;EACI,gBAAA;EACA,gBAAA;AAsDJ;AArDI;EACI,eAAA;AAuDR;;AApDA;EACI,eAAA;AAuDJ;AAtDI;EACI,qBAAA;AAwDR;;AArDA;EACI,gBAAA;EACA,aAAA;EACA,sBAAA;EACA,qBAAA;AAwDJ;AAvDI;EACI,sBAAA;EACA,0BAAA;AAyDR;AAvDI;EACI,0BAAA;EACA,yCAAA;AAyDR;;AAtDA;EACI,aAAA;EACA,aAAA;EACA,kBAAA;EACA,qBAAA;EACA,WAAA;EACA,oBAAA;KAAA,iBAAA;AAyDJ;;AAvDA;EACI,mBAAA;AA0DJ;;AAxDA;EACI,qBAAA;AA2DJ;;AAzDA;EACI;IACI,aAAA;IACA,2CAAA;IACA,WAAA;EA4DN;;EA1DE;IACI,eAAA;EA6DN;;EA3DE;IACI,uBAAA;IACA,sBAAA;EA8DN;AACF;AA5DA;EACI;IACI,eAAA;IACA,UAAA;IACA,sCAAA;IACA,4CAAA;IACA,aAAA;IACA,4BAAA;EA8DN;AACF;AA5DA;EACI;IACI,wCAAA;IACA,eAAA;EA8DN;AACF","file":"main.css"}
\ No newline at end of file
diff --git a/Standard UI Components/css/main.min.css b/Standard UI Components/css/main.min.css
new file mode 100644
index 0000000..f4ecf85
--- /dev/null
+++ b/Standard UI Components/css/main.min.css	
@@ -0,0 +1 @@
+.weight-400,code{font-weight:400}.hide,.ripple{pointer-events:none}.list,ul{list-style:none}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}code,code>*{font-family:"Roboto Mono",monospace}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{--accent-color:#4d2588;--light-shade:rgba(var(--text-color), 0.06);--text-color:17,17,17;--text-color-light:100,100,100;--foreground-color:255,255,255;--background-color:#F6f6f6;--error-color:red;--green:#00843b;color:rgba(var(--text-color),1);background:var(--background-color)}body[data-theme=dark]{--accent-color:#976dd6;--green:#13ff5a;--text-color:240,240,240;--text-color-light:170,170,170;--foreground-color:20,20,20;--background-color:#0a0a0a;--error-color:rgb(255, 106, 106)}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize,.list__item,h2,ol li::first-letter{text-transform:capitalize}p{font-size:.8;max-width:75ch;line-height:1.7;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1rem}img{object-fit:cover}a{color:inherit;text-decoration:none}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}button{display:inline-flex;border:none;background-color:inherit}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}.hide{opacity:0}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.flex{display:flex}.grid{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.color-0-8{color:rgba(var(--text-color),.8)}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}.interact,.theme-switcher{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}code,pre{background:rgba(var(--text-color),.04)}.interact{overflow:hidden}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.theme-switcher{justify-self:flex-end;width:1.5rem;height:1.5rem}.card,.list{flex-direction:column}.theme-switcher .icon{position:absolute;transition:transform .6s}.theme-switcher__checkbox{display:none}.theme-switcher__checkbox:checked~.moon-icon{transform:scale(0) rotate(90deg)}.theme-switcher__checkbox:not(:checked)~.sun-icon{transform:scale(0) rotate(-90deg)}code .str,pre .str{color:#65B042}code .kwd,pre .kwd{color:#E28964}code .com,pre .com{color:#AEAEAE;font-style:italic}code .typ,pre .typ{color:#4395ff}code .lit,pre .lit{color:#1a76c2}code .pln,code .pun,pre .pln,pre .pun{color:rgba(var(--text-color),.8)}code .tag,pre .tag{color:#22863a}code .atn,pre .atn{color:#005cc5}code .atv,pre .atv{color:var(--accent-color)}code .dec,pre .dec{color:#3387CC}pre{max-width:100%;margin:1rem 0;padding:0 1.5rem;overflow-x:auto;font-size:.9rem;white-space:pre-line;border-radius:.5rem}code{border-radius:.2rem;padding:.2rem .4rem}pre code{line-height:1.4;border-radius:none;background:0 0;width:100%}h1,h2,h3,h4.h5{font-family:Poppins,sans-serif}h2{margin:3rem 0 1rem}h2:first-of-type{margin-top:1rem}main{display:grid;height:100%}.card,.list,.list__item,.page{display:flex}#main_header{padding:.5rem 1.5rem;border-bottom:1px solid rgba(var(--text-color),.1)}#side_nav_button{padding:.5rem;margin-left:-.5rem}#backdrop{position:fixed;z-index:4;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.5)}#side_nav,.right{max-height:100%;overflow-y:auto;padding-bottom:3rem}#side_nav h4{font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;padding:1rem 1.5rem}.right{padding:1.5rem}.right h1{margin-bottom:1.5rem}.list{margin-bottom:.8rem}ol li,sm-carousel{margin-bottom:1rem}.list__item{padding:.8rem 1.5rem}.list__item--active{color:var(--accent-color);background:rgba(var(--text-color),.06)}.card{margin-right:1rem;border-radius:.4rem;padding:1.5rem;min-width:min(24rem,80%);background-color:rgba(var(--text-color),.06)}sm-tab-header{margin-bottom:1.5rem}.page{flex-direction:column}ol{padding:.6rem 1rem}ol li:last-of-type{margin-bottom:0}#total_components_count{font-size:4rem}#components_selection_list{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));padding:1.5rem 0 3rem}.comp-checkbox__title{margin-left:.5rem}@media screen and (max-width:640px){main{grid-template-rows:auto 1fr;grid-template-columns:1fr}#side_nav{display:flex;flex-direction:column;position:fixed;z-index:5;height:100%;width:calc(100% - 4rem);transition:transform .3s;background-color:rgba(var(--foreground-color),1);box-shadow:.5rem 0 2rem rgba(0,0,0,.1)}#side_nav:not(.reveal){transform:translateX(-100%)}.reveal{transform:none}}@media screen and (min-width:640px){#main_header{padding:1rem 1.5rem;grid-area:main-header}#side_nav_button{display:none}main{grid-template-columns:14rem minmax(0,1fr);grid-template-areas:"main-header main-header" ". ."}.right{display:grid;grid-template-columns:1fr 90% 1fr}.right>*{grid-column:2/3}#overview_page{display:grid;gap:1.5rem;grid-template-columns:1fr auto}#overview_page>div:first-of-type{grid-column:2/3;text-align:right}#overview_page>div:nth-of-type(2){grid-row:1/2}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.list__item:hover{background:rgba(var(--text-color),.1);cursor:pointer}}
\ No newline at end of file
diff --git a/Standard UI Components/css/main.scss b/Standard UI Components/css/main.scss
index 8074d48..78a5518 100644
--- a/Standard UI Components/css/main.scss	
+++ b/Standard UI Components/css/main.scss	
@@ -1,32 +1,312 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
 *{
-    box-sizing: border-box;
     padding: 0;
     margin: 0;
+    box-sizing: border-box;
     font-family: 'Roboto', sans-serif;
 }
-html{
+:root{
+    font-size: clamp(1rem, 1.2vmax, 3rem);
+}
+html, body{
+    height: 100%;
     scroll-behavior: smooth;
 }
-body{
-    --accent-color: rgb(9, 155, 82);
-    --light-accent-shade: rgb(223, 255, 239);
-    --text: 17, 17, 17;
-    --foreground: 255, 255, 255;
-    --font-family: 'Roboto', sans-serif;
+body {
+    --accent-color: #4d2588;
+    --light-shade: rgba(var(--text-color), 0.06);
+    --text-color: 17, 17, 17;
+    --text-color-light: 100, 100, 100;
+    --foreground-color: 255, 255, 255;
+    --background-color: #F6f6f6;
     --error-color: red;
+    --green: #00843b;
+    color: rgba(var(--text-color), 1);
+    background: var(--background-color);
+}
+body[data-theme='dark']{
+    --accent-color: #976dd6;
+    --green: #13ff5a;
+    --text-color: 240, 240, 240;
+    --text-color-light: 170, 170, 170;
+    --foreground-color: 20, 20, 20;
+    --background-color: #0a0a0a;
+    --error-color: rgb(255, 106, 106);
+}
+.full-bleed{
+    grid-column: 1/4;
+}
+.h1{
+    font-size: 2.5rem;
+}
+.h2{
+    font-size: 2rem;
+}
+.h3{
+    font-size: 1.4rem;
+}
+.h4{
+    font-size: 1rem;
+}
+.h5{
+    font-size: 0.8rem;
+}
+
+.uppercase{
+    text-transform: uppercase;
+}
+.capitalize{
+    text-transform: capitalize;
+}
+
+p {
+    font-size: 0.8;
+    max-width: 75ch;
+    line-height: 1.7;
+    color: rgba(var(--text-color), 0.8);
+    &:not(:last-of-type){
+        margin-bottom: 1rem;
+    }
+}
+img{
+    object-fit: cover;
+}
+
+a{
+    color: inherit;
+    text-decoration: none;
+    &:focus-visible{
+        box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
+    }
+}
+
+button{
+    display: inline-flex;
+    border: none;
+    background-color: inherit;
+}
+
+a:any-link:focus-visible{
+    outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+sm-button{
+    --border-radius: 0.3rem;
+}
+ul{
+    list-style: none;
+}
+.flex{
+    display: flex;
+}
+.grid{
+    display: grid;
+}
+.hide{
+    opacity: 0;
+    pointer-events: none;
 }
 .hide-completely{
-    display: none;
+    display: none !important;
 }
-h1,h2,h3,h4.h5{
-    font-family: 'Poppins', sans-serif;
+.no-transformations{
+    transform: none !important;
+}
+.overflow-ellipsis{
+    width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+.breakable{
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    -ms-word-break: break-all;
+    word-break: break-word;
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
+}
+.flex{
+    display: flex;
+}
+.grid{
+    display: grid;
+}
+.grid-3{
+    grid-template-columns: 1fr auto auto;
+}
+.flow-column{
+    grid-auto-flow: column;
+}
+.gap-0-5{
+    gap: 0.5rem;
+}
+.gap-1{
+    gap: 1rem;
+}
+.gap-1-5{
+    gap: 1.5rem;
+}
+.gap-2{
+    gap: 2rem;
+}
+.gap-3{
+    gap: 3rem;
+}
+.text-align-right{
+    text-align: right;
+}
+.align-start{
+    align-items: flex-start;
+}
+.align-center{
+    align-items: center;
+}
+.text-center{
+    text-align: center;
+}
+.justify-start{
+    justify-content: start;
+}
+.justify-center{
+    justify-content: center;
+}
+.justify-right{
+    margin-left: auto;
+}
+.align-self-center{
+    align-self: center;
+}
+.justify-self-center{
+    justify-self: center;
+}
+.justify-self-start{
+    justify-self: start;
+}
+.justify-self-end{
+    justify-self: end;
+}
+.direction-column{
+    flex-direction: column;
+}
+.space-between{
+    justify-content: space-between;
+}
+.w-100{
+    width: 100%;
+}
+.color-0-8{
+    color: rgba(var(--text-color), 0.8);
+}
+.weight-400{
+    font-weight: 400;
+}
+.weight-500{
     font-weight: 500;
 }
-a:any-link{
-    text-decoration: none;
-    color: var(--accent-color)
+.ripple{
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    background: rgba(var(--text-color), 0.16);
+    pointer-events: none;
+}
+.interact{
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+}
+.observe-empty-state:empty{
+    display: none;
+}
+.observe-empty-state:not(:empty) ~ .empty-state{
+    display: none;
+}
+
+
+.icon{
+    width: 1.5rem;
+    height: 1.5rem;
+    fill: rgba(var(--text-color), 0.9);
+}
+.button__icon{
+    height: 1.2rem;
+    width: 1.2rem;
+    &--left{
+        margin-right: 0.5rem;
+    }
+    &--right{
+        margin-left: 0.5rem;
+    }
+}
+.theme-switcher{
+    position: relative;
+    justify-self: flex-end;
+    width: 1.5rem;
+    height: 1.5rem;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    .icon{
+        position: absolute;
+        transition: transform 0.6s;
+    }
+}
+.theme-switcher__checkbox{
+    display: none;
+    &:checked ~ .moon-icon{
+        transform: scale(0) rotate(90deg);
+    }
+    &:not(:checked) ~ .sun-icon{
+        transform: scale(0)  rotate(-90deg);
+    }
+}
+
+//Syntax highlighting
+
+
+pre .str, code .str { color: #65B042; } /* string  - green */
+pre .kwd, code .kwd { color: #E28964; } /* keyword - dark pink */
+pre .com, code .com { color: #AEAEAE; font-style: italic; } /* comment - gray */
+pre .typ, code .typ { color: #4395ff; } /* type - light blue */
+pre .lit, code .lit { color: #1a76c2; } /* literal */
+pre .pun, code .pun { color: rgba(var(--text-color), 0.8); } /* punctuation */
+pre .pln, code .pln { color: rgba(var(--text-color), 0.8); } /* plaintext */
+pre .tag, code .tag { color: #22863a; } /* html/xml tag */
+pre .atn, code .atn { color: #005cc5; } /* html/xml attribute name */
+pre .atv, code .atv { color: var(--accent-color); } /* html/xml attribute value*/
+pre .dec, code .dec { color: #3387CC; } /* decimal - blue */
+
+pre{
+    max-width: 100%;
+	margin: 1rem 0;
+    padding: 0 1.5rem;
+    overflow-x: auto;
+    font-size: 0.9rem;
+    white-space: pre-line;
+    border-radius: 0.5rem;
+    background: rgba(var(--text-color), .04);
+}
+code{
+    font-family: 'Roboto Mono', monospace;
+    border-radius: 0.2rem;
+    font-weight: 400;
+    padding: 0.2rem 0.4rem;
+    background: rgba(var(--text-color), .04);
+}
+code > *{
+    font-family: 'Roboto Mono', monospace;
+}
+pre code{
+    line-height: 1.4;
+    border-radius: none;
+    background: none;
+    width: 100%;
+}
+
+//
+h1,h2,h3,h4.h5{
+    font-family: 'Poppins', sans-serif;
 }
 h2{
   margin: 3rem 0 1rem 0;
@@ -35,85 +315,82 @@ h2{
       margin-top: 1rem;
   }  
 }
-h1.headline{
-    color: rgba(var(--text), 1);
+main{
+    display: grid;
+    height: 100%;
 }
-section{
-    height: 100vh;
+#main_header{
+    padding: 0.5rem 1.5rem;
+    border-bottom: 1px solid rgba(var(--text-color), .1);
+}
+#side_nav_button{
+    padding: 0.5rem;
+    margin-left: -0.5rem;
+}
+#backdrop{
+    position: fixed;
+    z-index: 4;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0,0,0, 0.5);
+}
+#side_nav,
+.right{
+    max-height: 100%;
+    overflow-y: auto;
+    padding-bottom: 3rem;
+}
+#side_nav{
+    h4{
+        font-size: 0.9rem;
+        letter-spacing: 0.08em;
+        text-transform: uppercase;
+        padding: 1rem 1.5rem;
+    }
+}
+.right{
+    padding: 1.5rem;
+    h1{
+        margin-bottom: 1.5rem;
+    }
+}
+.list{
+    list-style: none;
     display: flex;
     flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    background-size: cover;
-    text-align: center;
-    color: rgba(var(--text), 1);
-    padding: 2rem;
-    border-bottom: 1px solid rgba(var(--text), .2);
-    h1{
-        font-weight: 600;
-        font-size: 2.5rem;
-        line-height: 1.2em;
-        z-index: 1;
-        text-transform: uppercase;
-        letter-spacing: 0.2rem;
-    }
-    h4{
-        z-index: 1;
-        font-weight: 400;
-        margin-top: 1.2rem;
-    }
-    .background-box{
-        display: flex;
-        align-self: center;
-        position: absolute;
-        border: solid 1px rgba(var(--text), 0.3);
-        width: 60vw;
-        height: 40%;
-        transform: skewX(-10deg);
-        background: rgba(var(--foreground), 1);
-        z-index: -1;
-    }
-    a{
-        margin-top: 2rem;
-        font-weight: 500;
-    }
-    sm-button{
-        margin-top: 4rem;
-    }
-    sm-button:first-of-type{
-        margin-right: 1rem;
+    margin-bottom: 0.8rem;
+}
+.list__item{
+    display: flex;
+    padding: 0.8rem 1.5rem;
+    text-transform: capitalize;
+    &--active{
+        color: var(--accent-color);
+        background: rgba(var(--text-color), .06);
     }
 }
-pre{
-    display: inline-flex;
-        max-width: 100%;
+.card{
+    display: flex;
+    flex-direction: column;
+    margin-right: 1rem;
+    border-radius: 0.4rem;
+    padding: 1.5rem;
+    min-width: min(24rem, 80%);
+    background-color: rgba(var(--text-color), .06);
 }
-code{
-    display: inline-flex;
-    color: #311B92;
-    background: rgba(var(--text), .1);
-    padding: 0.2rem 0.4rem;
-    border-radius: 0.2rem;
-    margin: 0.2rem 0;
+sm-carousel{
+    margin-bottom: 1rem;
 }
-code.extend{
-    padding: 0 1.5rem;
-    line-height: 1.6;
-    margin: 1rem 0;
-    overflow-x: auto;
-    max-width: 100%;
+sm-tab-header{
+    margin-bottom: 1.5rem;
 }
-main{
-    height: 100vh;
+.page{
+    display: flex;
+    flex-direction: column;
 }
-p{
-    margin: 1rem 0 1.5rem 0;
-    line-height: 1.6em;
-    color: rgba(var(--text), .8);
-    font-size: 1rem;
-    &::first-letter{
-        text-transform: capitalize;
-    }
+.page__title{
 }
 ol{
     padding: 0.6rem 1rem;
@@ -127,70 +404,88 @@ ol{
         }
     }
 }
-.left{
-    max-height: 100%;
-    overflow-y: auto;
-    h3{
-        padding: 1.5rem;
-    }
+#total_components_count{
+    font-size: 4rem;
 }
-.right{
-    padding: 1.5rem;
-    h1{
-        margin-bottom: 1.5rem;
-    }
+#components_selection_list{
+    display: grid;
+    gap: 1.5rem;
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+    padding: 1.5rem 0 3rem 0;
 }
-.list{
-    list-style: none;
-    display: flex;
-    flex-direction: column;
-    margin-bottom: 0.5rem;
-    .item{
-        padding: 0.6rem 1.5rem;
-        text-transform: capitalize;
-    }
-    .active{
-        color: var(--accent-color);
-        background: rgba(var(--text), .06);
-    }
-}
-.card{
-    height: 24rem;
-    margin-right: 1rem;
-    border-radius: 0.4rem;
-    width: 100%;
-    object-fit: cover;
-}
-sm-carousel{
-    margin-bottom: 1rem;
-}
-@media screen and (min-width: 640px){
-    main{
-        display: grid;
-        grid-template-columns: 14rem minmax(0, 1fr);
-        gap: 1.5rem;    
-    }
-    p{
-        max-width: 46vw;
-    }
-    .background-box{
-        width: 24rem !important;
-        height: 50% !important;
-    }
+.comp-checkbox__title{
+    margin-left: 0.5rem;
 }
 @media screen and (max-width: 640px){
-    .left{
+    main{
+        grid-template-rows: auto 1fr;
+        grid-template-columns: 1fr;
+    }
+    #side_nav{
+        display: flex;
+        flex-direction: column;
         position: fixed;
-        z-index: 2;
-        background: rgba(var(--foreground), 1);
+        z-index: 5;
+        height: 100%;
+        width: calc(100% - 4rem);
+        transition: transform 0.3s;
+        background-color: rgba(var(--foreground-color), 1);
         box-shadow: 0.5rem 0 2rem rgba(0,0,0, 0.1);
-        height: 100vh;
-        transform: translateX(-100%);
+        &:not(.reveal){
+            transform: translateX(-100%);
+        }
+    }
+    .reveal{
+        transform: none;
+    }
+}
+@media screen and (min-width: 640px){
+    #main_header{
+        padding: 1rem 1.5rem;
+        grid-area: main-header;
+    }
+    #side_nav_button{
+        display: none;
+    }
+    main{
+        grid-template-columns: 14rem minmax(0, 1fr);
+        grid-template-areas: 'main-header main-header' '. .';
+    }   
+    .right{
+        display: grid;
+        grid-template-columns: 1fr 90% 1fr;
+        & > * {
+            grid-column: 2/3;
+        }
+    }
+    #overview_page{
+        display: grid;
+        gap: 1.5rem;
+        grid-template-columns: 1fr auto;
+        & > div:first-of-type{
+            grid-column: 2/3;
+            text-align: right;
+        }
+        & > div:nth-of-type(2){
+            grid-row: 1/2;
+        }
     }
 }
 @media (any-hover: hover){
-    .item:hover{
-        background: rgba(var(--text), .1);
+    ::-webkit-scrollbar{
+        width: 0.5rem;
+        height: 0.5rem;
+    }
+    
+    ::-webkit-scrollbar-thumb{
+        background: rgba(var(--text-color), 0.3);
+        border-radius: 1rem;
+        &:hover{
+            background: rgba(var(--text-color), 0.5);
+        }
+    }
+    .list__item:hover{
+        background: rgba(var(--text-color), .1);
         cursor: pointer;
     }
 }
\ No newline at end of file
diff --git a/Standard UI Components/dist/button.js b/Standard UI Components/dist/button.js
new file mode 100644
index 0000000..4f36929
--- /dev/null
+++ b/Standard UI Components/dist/button.js	
@@ -0,0 +1,157 @@
+const smButton = document.createElement('template')
+smButton.innerHTML = `
+<style>     
+*{
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+}       
+:host{
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    --padding: 0.6rem 1.2rem;
+    --border-radius: 0.3rem;
+    --background: rgba(var(--text-color), 0.1);
+}
+:host([disabled]) .button{
+    cursor: not-allowed;
+    opacity: 0.6;
+    background: rgba(var(--text-color), 0.3) !important;
+    color: rgba(var(--foreground-color), 0.6);
+}
+:host([disabled][variant="primary"]) .button{
+    color: rgba(var(--text-color), 1);
+}
+:host([variant='primary']) .button{
+    background: var(--accent-color);
+    color: rgba(var(--foreground-color), 1);
+}
+:host([variant='outlined']) .button{
+    -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;
+            box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset;
+    background: transparent; 
+    color: var(--accent-color);
+}
+:host([variant='no-outline']) .button{
+    background: rgba(var(--foreground-color), 1); 
+    color: var(--accent-color);
+}
+:host(.small) .button{
+    padding: 0.4rem 0.8rem;
+}
+:host(.round) .button{
+    border-radius: 10rem;
+}
+.button {
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    width: 100%;
+    padding: var(--padding);
+    cursor: pointer;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    border-radius: var(--border-radius); 
+    -webkit-box-pack: center; 
+        -ms-flex-pack: center; 
+            justify-content: center;
+    -webkit-transition: -webkit-box-shadow 0.3s;
+    transition: -webkit-box-shadow 0.3s;
+    -o-transition: box-shadow 0.3s;
+    transition: box-shadow 0.3s;
+    transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
+    font-family: inherit;
+    font-size: 0.9rem;
+    font-weight: 500;
+    background: var(--background); 
+    -webkit-tap-highlight-color: transparent;
+    outline: none;
+    overflow: hidden;
+    border: none;
+    color: inherit;
+    align-items: center;
+}
+:host(:not([disabled])) .button:focus-visible{
+    -webkit-box-shadow: 0 0 0 0.1rem var(--accent-color);
+            box-shadow: 0 0 0 0.1rem var(--accent-color);
+}
+:host([variant='outlined']) .button:focus-visible{
+    -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0 0 0.1rem var(--accent-color);
+            box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0 0 0.1rem var(--accent-color);
+}
+@media (hover: hover){
+    :host(:not([disabled])) .button:hover{
+        -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);
+                box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.12);
+    }
+    :host([variant='outlined']) .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);
+    }
+}
+@media (hover: none){
+    :host(:not([disabled])) .button:active{
+        -webkit-box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
+                box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.2rem 0.8rem rgba(0, 0, 0, 0.2);
+    }
+    :host([variant='outlined']) .button:active{
+        -webkit-box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
+                box-shadow: 0 0 0 1px rgba(var(--text-color), 0.2) inset, 0 0.1rem 0.1rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.8rem rgba(0, 0, 0, 0.2);
+    }
+}
+</style>
+<button part="button" class="button">
+    <slot></slot>   
+</button>`;
+customElements.define('sm-button',
+    class extends HTMLElement {
+        constructor() {
+            super()
+            this.attachShadow({
+                mode: 'open'
+            }).append(smButton.content.cloneNode(true))
+        }
+
+        get disabled() {
+            return this.isDisabled
+        }
+
+        set disabled(value) {
+            if (value && !this.isDisabled) {
+                this.isDisabled = true
+                this.setAttribute('disabled', '')
+                this.button.removeAttribute('tabindex')
+            } else if (!value && this.isDisabled) {
+                this.isDisabled = false
+                this.removeAttribute('disabled')
+            }
+        }
+        dispatch() {
+            if (this.isDisabled) {
+                this.dispatchEvent(new CustomEvent('disabled', {
+                    bubbles: true,
+                    composed: true
+                }))
+            } else {
+                this.dispatchEvent(new CustomEvent('clicked', {
+                    bubbles: true,
+                    composed: true
+                }))
+            }
+        }
+
+        connectedCallback() {
+            this.isDisabled = false
+            this.button = this.shadowRoot.querySelector('.button')
+            if (this.hasAttribute('disabled') && !this.isDisabled)
+                this.isDisabled = true
+            this.addEventListener('click', (e) => {
+                this.dispatch()
+            })
+        }
+    })
\ No newline at end of file
diff --git a/Standard UI Components/dist/button.min.js b/Standard UI Components/dist/button.min.js
new file mode 100644
index 0000000..ed068c0
--- /dev/null
+++ b/Standard UI Components/dist/button.min.js	
@@ -0,0 +1 @@
+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    --padding: 0.6rem 1.2rem;\n    --border-radius: 0.3rem;\n    --background: rgba(var(--text-color), 0.1);\n}\n:host([disabled]) .button{\n    cursor: not-allowed;\n    opacity: 0.6;\n    background: rgba(var(--text-color), 0.3) !important;\n    color: rgba(var(--foreground-color), 0.6);\n}\n:host([disabled][variant=\"primary\"]) .button{\n    color: rgba(var(--text-color), 1);\n}\n:host([variant='primary']) .button{\n    background: var(--accent-color);\n    color: rgba(var(--foreground-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(--foreground-color), 1); \n    color: var(--accent-color);\n}\n:host(.small) .button{\n    padding: 0.4rem 0.8rem;\n}\n:host(.round) .button{\n    border-radius: 10rem;\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    -webkit-transition: -webkit-box-shadow 0.3s;\n    transition: -webkit-box-shadow 0.3s;\n    -o-transition: box-shadow 0.3s;\n    transition: box-shadow 0.3s;\n    transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;\n    font-family: inherit;\n    font-size: 0.9rem;\n    font-weight: 500;\n    background: 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(:not([disabled])) .button: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([variant='outlined']) .button:focus-visible{\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 0 0.1rem var(--accent-color);\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 0 0.1rem var(--accent-color);\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<button part=\"button\" class=\"button\">\n    <slot></slot>   \n</button>",customElements.define("sm-button",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smButton.content.cloneNode(!0))}get disabled(){return this.isDisabled}set disabled(n){n&&!this.isDisabled?(this.isDisabled=!0,this.setAttribute("disabled",""),this.button.removeAttribute("tabindex")):!n&&this.isDisabled&&(this.isDisabled=!1,this.removeAttribute("disabled"))}dispatch(){this.isDisabled?this.dispatchEvent(new CustomEvent("disabled",{bubbles:!0,composed:!0})):this.dispatchEvent(new CustomEvent("clicked",{bubbles:!0,composed:!0}))}connectedCallback(){this.isDisabled=!1,this.button=this.shadowRoot.querySelector(".button"),this.hasAttribute("disabled")&&!this.isDisabled&&(this.isDisabled=!0),this.addEventListener("click",n=>{this.dispatch()})}});
\ No newline at end of file
diff --git a/Standard UI Components/dist/carousel.js b/Standard UI Components/dist/carousel.js
new file mode 100644
index 0000000..b03b561
--- /dev/null
+++ b/Standard UI Components/dist/carousel.js	
@@ -0,0 +1,400 @@
+const smCarousel = document.createElement('template')
+smCarousel.innerHTML = `
+<style>
+*{
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+} 
+:host{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    --arrow-left: 1rem;
+    --arrow-right: 1rem;
+    --arrow-top: auto;
+    --arrow-bottom: auto;
+    --arrow-fill: rgba(var(--foreground-color), 1);
+    --arrow-background: rgba(var(--text-color), 1);
+    --arrow-box-shadow: 0 0.2rem 0.2rem #00000020, 0 0.5rem 1rem #00000040;
+    --indicator-top: auto;
+    --indicator-bottom: -1rem;
+    --active-indicator-color: var(--accent-color);
+}
+.carousel__button{
+    position: absolute;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    cursor: pointer;
+    min-width: 0;
+    top:  var(--arrow-top);
+    bottom:  var(--arrow-bottom);
+    border: none;
+    background: var(--arrow-background);
+    -webkit-box-shadow: var(--arrow-box-shadow);
+            box-shadow:  var(--arrow-box-shadow); 
+    -webkit-tap-highlight-color: transparent;
+    transition: transform 0.3s;
+    z-index: 1;
+    border-radius: 3rem;
+    padding: 0.5rem;
+}
+button:focus{
+    outline: none;
+}
+button:focus-visible{
+    outline: rgba(var(--text-color), 1) 0.1rem solid;
+}
+.carousel__button:active{
+    transform: scale(0.9);
+}
+.carousel__button--left{
+    left: var(--arrow-left);
+}
+.carousel__button--right{
+    right: var(--arrow-right);
+}
+.icon {
+    height: 1.5rem;
+    width: 1.5rem;
+    fill: var(--arrow-fill);
+}
+.hide{
+    display: none !important;
+}
+.carousel-container{
+    position: relative;
+    display: grid;
+    width: 100%;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+}
+.carousel{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    max-width: 100%;
+    width: 100%;
+    overflow: auto hidden;
+    -ms-scroll-snap-type: x mandatory;
+        scroll-snap-type: x mandatory;
+}
+.indicators{
+    display: -ms-grid;
+    display: grid;
+    grid-auto-flow: column;
+    -webkit-box-pack: center;
+        -ms-flex-pack: center;
+            justify-content: center;
+    position: absolute;
+    top: var(--indicator-top);
+    bottom: var(--indicator-bottom);
+    gap: 0.5rem;
+    width: 100%;
+}
+.dot{
+    position: relative;
+    padding: 0.2rem;
+    background: rgba(var(--text-color), 0.3);
+    border-radius: 1rem;
+    -webkit-transition: 0.2s;
+    -o-transition: 0.2s;
+    transition: 0.2s;
+    cursor: pointer;
+}
+.dot.active{
+    -webkit-transform: scale(1.5);
+        -ms-transform: scale(1.5);
+            transform: scale(1.5);
+    background: var(--active-indicator-color);
+}
+slot::slotted(*){
+    scroll-snap-align: center;
+}
+:host([align-items="start"]) slot::slotted(*){
+    scroll-snap-align: start;
+}
+:host([align-items="center"]) slot::slotted(*){
+    scroll-snap-align: center;
+}
+:host([align-items="end"]) slot::slotted(*){
+    scroll-snap-align: end;
+}
+@media (hover: hover){
+    .carousel{
+        overflow: hidden;
+    }
+    .left,.right{
+        display: none;
+    }
+}
+@media (hover: none){
+    ::-webkit-scrollbar-track {
+        -webkit-box-shadow: none !important;
+        background-color: transparent !important;
+    }
+    ::-webkit-scrollbar {
+        height: 0;
+        background-color: transparent;
+    }
+    .carousel{
+        overflow: auto none;
+    }
+    .carousel__button{
+        display: none;
+    }
+    .left,.right{
+        display: block;
+    }
+}
+</style>
+<div class="carousel-container">
+    <button class="carousel__button carousel__button--left hide">
+        <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>
+    </button>
+    <div part="carousel" class="carousel">
+        <slot></slot>
+    </div>
+    <button class="carousel__button carousel__button--right hide">
+        <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>
+    </button>
+    <div class="indicators"></div>
+</div>
+`;
+
+customElements.define('sm-carousel', class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(smCarousel.content.cloneNode(true))
+
+        this.isAutoPlaying = false
+        this.autoPlayInterval = 5000
+        this.autoPlayTimeout
+        this.initialTimeout
+        this.activeSlideNum = 0
+        this.carouselItems
+        this.indicators
+        this.showIndicator = false
+        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(slideNum) {
+        this.carousel.scrollTo({
+            left: (this.carouselItems[slideNum].getBoundingClientRect().left - this.carousel.getBoundingClientRect().left + this.carousel.scrollLeft),
+            behavior: 'smooth'
+        })
+    }
+
+    nextSlide() {
+        if (!this.carouselItems) return
+        let showSlideNo = (this.activeSlideNum + 1) < this.carouselItems.length ? this.activeSlideNum + 1 : 0
+        this.showSlide(showSlideNo)
+    }
+
+    autoPlay() {
+        this.nextSlide()
+        if (this.isAutoPlaying) {
+            this.autoPlayTimeout = setTimeout(() => {
+                this.autoPlay()
+            }, this.autoPlayInterval);
+        }
+    }
+
+    startAutoPlay() {
+        this.setAttribute('autoplay', '')
+    }
+
+    stopAutoPlay() {
+        this.removeAttribute('autoplay')
+    }
+
+    createIndicator(index) {
+        let dot = document.createElement('div')
+        dot.classList.add('dot')
+        dot.dataset.rank = index
+        return dot
+    }
+
+    handleIndicatorClick(e) {
+        if (e.target.closest('.dot')) {
+            const slideNum = parseInt(e.target.closest('.dot').dataset.rank)
+            if (this.activeSlideNum !== slideNum) {
+                this.showSlide(slideNum)
+            }
+        }
+    }
+
+    handleKeyDown(e) {
+        if (e.code === 'ArrowLeft')
+            this.scrollRight()
+        else if (e.code === 'ArrowRight')
+            this.scrollRight()
+    }
+
+    connectedCallback() {
+        let frag = document.createDocumentFragment();
+
+        this.carouselSlot.addEventListener('slotchange', e => {
+            this.carouselItems = this.carouselSlot.assignedElements()
+            this.carouselItems.forEach(item => allElementsObserver.observe(item))
+            if (this.carouselItems.length > 0) {
+                firstOptionObserver.observe(this.carouselItems[0])
+                lastOptionObserver.observe(this.carouselItems[this.carouselItems.length - 1])
+            }
+            else {
+                navButtonLeft.classList.add('hide')
+                navButtonRight.classList.add('hide')
+                firstOptionObserver.disconnect()
+                lastOptionObserver.disconnect()
+            }
+            if (this.showIndicator) {
+                this.indicatorsContainer.innerHTML = ``
+                this.carouselItems.forEach((item, index) => {
+                    frag.append(
+                        this.createIndicator(index)
+                    )
+                    item.dataset.rank = index
+                })
+                this.indicatorsContainer.append(frag)
+                this.indicators = this.indicatorsContainer.children
+            }
+        })
+
+        const IOOoptions = {
+            threshold: 0.9,
+            root: this
+        }
+        const allElementsObserver = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (this.showIndicator) {
+                    const activeRank = parseInt(entry.target.dataset.rank)
+                    if (entry.isIntersecting) {
+                        this.indicators[activeRank].classList.add('active')
+                        this.activeSlideNum = activeRank
+                    }
+                    else
+                        this.indicators[activeRank].classList.remove('active')
+                }
+            })
+        }, IOOoptions)
+
+
+        const firstOptionObserver = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    this.navButtonLeft.classList.add('hide')
+                }
+                else {
+                    this.navButtonLeft.classList.remove('hide')
+                }
+            })
+        },
+            IOOoptions
+        )
+        const lastOptionObserver = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    this.navButtonRight.classList.add('hide')
+                }
+                else {
+                    this.navButtonRight.classList.remove('hide')
+                }
+            })
+        },
+            IOOoptions
+        )
+
+        const resObs = new ResizeObserver(entries => {
+            entries.forEach(entry => {
+                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)
+
+        this.addEventListener('keydown', this.handleKeyDown)
+
+        this.navButtonRight.addEventListener('click', this.scrollRight)
+        this.navButtonLeft.addEventListener('click', this.scrollLeft)
+        this.indicatorsContainer.addEventListener('click', this.handleIndicatorClick)
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            if (name === 'indicator') {
+                this.showIndicator = this.hasAttribute('indicator')
+            }
+            if (name === 'autoplay') {
+                if (this.hasAttribute('autoplay')) {
+                    this.initialTimeout = setTimeout(() => {
+                        this.isAutoPlaying = true
+                        this.autoPlay()
+                    }, this.autoPlayInterval);
+                }
+                else {
+                    this.isAutoPlaying = false
+                    clearTimeout(this.autoPlayTimeout)
+                    clearTimeout(this.initialTimeout)
+                }
+
+            }
+            if (name === 'interval') {
+                if (this.hasAttribute('interval') && this.getAttribute('interval').trim() !== '') {
+                    this.autoPlayInterval = Math.abs(parseInt(this.getAttribute('interval').trim()))
+                }
+                else {
+                    this.autoPlayInterval = 5000
+                }
+            }
+        }
+    }
+
+    disconnectedCallback() {
+        this.navButtonRight.removeEventListener('click', this.scrollRight)
+        this.navButtonLeft.removeEventListener('click', this.scrollLeft)
+        this.indicatorsContainer.removeEventListener('click', this.handleIndicatorClick)
+    }
+})
\ No newline at end of file
diff --git a/Standard UI Components/dist/carousel.min.js b/Standard UI Components/dist/carousel.min.js
new file mode 100644
index 0000000..58c4643
--- /dev/null
+++ b/Standard UI Components/dist/carousel.min.js	
@@ -0,0 +1 @@
+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    --arrow-left: 1rem;\n    --arrow-right: 1rem;\n    --arrow-top: auto;\n    --arrow-bottom: auto;\n    --arrow-fill: rgba(var(--foreground-color), 1);\n    --arrow-background: rgba(var(--text-color), 1);\n    --arrow-box-shadow: 0 0.2rem 0.2rem #00000020, 0 0.5rem 1rem #00000040;\n    --indicator-top: auto;\n    --indicator-bottom: -1rem;\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(--arrow-background);\n    -webkit-box-shadow: var(--arrow-box-shadow);\n            box-shadow:  var(--arrow-box-shadow); \n    -webkit-tap-highlight-color: transparent;\n    transition: transform 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(--arrow-fill);\n}\n.hide{\n    display: none !important;\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    top: var(--indicator-top);\n    bottom: var(--indicator-bottom);\n    gap: 0.5rem;\n    width: 100%;\n}\n.dot{\n    position: relative;\n    padding: 0.2rem;\n    background: rgba(var(--text-color), 0.3);\n    border-radius: 1rem;\n    -webkit-transition: 0.2s;\n    -o-transition: 0.2s;\n    transition: 0.2s;\n    cursor: pointer;\n}\n.dot.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    .left,.right{\n        display: none;\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("dot"),n.dataset.rank=t,n}handleIndicatorClick(t){if(t.target.closest(".dot")){const n=parseInt(t.target.closest(".dot").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=>e.observe(t)),this.carouselItems.length>0?(i.observe(this.carouselItems[0]),o.observe(this.carouselItems[this.carouselItems.length-1])):(navButtonLeft.classList.add("hide"),navButtonRight.classList.add("hide"),i.disconnect(),o.disconnect()),this.showIndicator&&(this.indicatorsContainer.innerHTML="",this.carouselItems.forEach((n,e)=>{t.append(this.createIndicator(e)),n.dataset.rank=e}),this.indicatorsContainer.append(t),this.indicators=this.indicatorsContainer.children)});const n={threshold:.9,root:this},e=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),i=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?this.navButtonLeft.classList.add("hide"):this.navButtonLeft.classList.remove("hide")})},n),o=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,e){n!==e&&("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)}});
\ No newline at end of file
diff --git a/Standard UI Components/dist/checkbox.js b/Standard UI Components/dist/checkbox.js
new file mode 100644
index 0000000..a8d58c8
--- /dev/null
+++ b/Standard UI Components/dist/checkbox.js	
@@ -0,0 +1,196 @@
+const smCheckbox = document.createElement('template')
+smCheckbox.innerHTML = `
+<style>
+    *{
+        padding: 0;
+        margin: 0;
+        -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+    } 
+    :host{
+        display: -webkit-inline-box;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+        --height: 1.4rem;
+        --width: 1.4rem;
+        --border-radius: 0.2rem;
+        --border-color: rgba(var(--text-color), 0.7);
+    }
+    :host([disabled]) {
+        opacity: 0.6;
+        user-select: none;
+        pointer-events: none;
+    }
+    .checkbox {
+        position: relative;
+        display:-webkit-box;
+        display:-ms-flexbox;
+        display:flex;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        cursor: pointer;
+        height: 1.5rem;
+        outline: none;
+        -webkit-tap-highlight-color: transparent;
+    }
+    
+    .checkbox:focus-visible{
+        outline: auto;
+    }
+    .checkbox:active .icon,
+    .checkbox:focus-within .icon{
+        box-shadow: 0 0 0 0.2rem var(--accent-color) inset;
+    }
+    
+    input {
+        display: none;
+    }
+    
+    .checkmark {
+        stroke-dashoffset: -65;
+        stroke-dasharray: 65;
+        -webkit-transition: stroke-dashoffset 0.3s; 
+        -o-transition: stroke-dashoffset 0.3s; 
+        transition: stroke-dashoffset 0.3s;
+    }
+    
+    :host([checked]) .checkmark {
+        stroke-dashoffset: 0;
+        stroke: rgba(var(--foreground-color), 1);
+    }
+    :host([checked]) .icon {
+        stroke-width: 8; 
+        stroke: var(--accent-color);
+        background: var(--accent-color);
+    }
+    :host(:not([checked])) .icon {
+        box-shadow: 0 0 0 0.2rem var(--border-color) inset;
+    }
+    
+    .icon {
+        fill: none;
+        height: var(--height);
+        width: var(--width);
+        padding: 0.2rem;
+        stroke: rgba(var(--text-color), 0.7);
+        stroke-width: 6;
+        overflow: visible;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        -webkit-transition: background 0.3s;
+        -o-transition: background 0.3s;
+        transition: background 0.3s;
+        border-radius: var(--border-radius);
+    }
+</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>
+</label>`
+customElements.define('sm-checkbox', class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(smCheckbox.content.cloneNode(true))
+
+        this.checkbox = this.shadowRoot.querySelector('.checkbox');
+
+        this.reset = this.reset.bind(this)
+        this.dispatch = this.dispatch.bind(this)
+        this.handleKeyup = this.handleKeyup.bind(this)
+        this.handleClick = this.handleClick.bind(this)
+    }
+
+    static get observedAttributes() {
+        return ['value', 'disabled', 'checked']
+    }
+
+    get disabled() {
+        return this.hasAttribute('disabled')
+    }
+
+    set disabled(val) {
+        if (val) {
+            this.setAttribute('disabled', '')
+        } else {
+            this.removeAttribute('disabled')
+        }
+    }
+
+    get checked() {
+        return this.hasAttribute('checked')
+    }
+
+    set checked(value) {
+        if (value) {
+            this.setAttribute('checked', '')
+        }
+        else {
+            this.removeAttribute('checked')
+        }
+    }
+
+    set value(val) {
+        this.setAttribute('value', val)
+    }
+
+    get value() {
+        return this.getAttribute('value')
+    }
+
+    reset() {
+        this.removeAttribute('checked')
+    }
+
+    dispatch(){
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true
+        }))
+    }
+    handleKeyup(e){
+        if (e.code === "Space") {
+            this.click()
+        }
+    }
+    handleClick(e){
+        this.toggleAttribute('checked')
+    }
+    
+    connectedCallback() {
+        if (!this.hasAttribute('disabled')) {
+            this.setAttribute('tabindex', '0')
+        }
+        this.setAttribute('role', 'checkbox')
+        if (!this.hasAttribute('checked')) {
+            this.setAttribute('aria-checked', 'false')
+        }
+        this.addEventListener('keyup', this.handleKeyup)
+        this.addEventListener('click', this.handleClick)
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            if (name === 'checked') {
+                this.setAttribute('aria-checked', this.hasAttribute('checked'))
+                this.dispatch()
+            }
+            else if (name === 'disabled') {
+                if (this.hasAttribute('disabled')) {
+                    this.removeAttribute('tabindex')
+                }
+                else {
+                    this.setAttribute('tabindex', '0')
+                }
+            }
+        }
+    }
+    disconnectedCallback() {
+        this.removeEventListener('keyup', this.handleKeyup)
+        this.removeEventListener('change', this.handleClick)
+    }
+})
\ No newline at end of file
diff --git a/Standard UI Components/dist/checkbox.min.js b/Standard UI Components/dist/checkbox.min.js
new file mode 100644
index 0000000..abb8d49
--- /dev/null
+++ b/Standard UI Components/dist/checkbox.min.js	
@@ -0,0 +1 @@
+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        --height: 1.4rem;\n        --width: 1.4rem;\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        height: 1.5rem;\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.2rem 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(--foreground-color), 1);\n    }\n    :host([checked]) .icon {\n        stroke-width: 8; \n        stroke: var(--accent-color);\n        background: var(--accent-color);\n    }\n    :host(:not([checked])) .icon {\n        box-shadow: 0 0 0 0.2rem var(--border-color) inset;\n    }\n    \n    .icon {\n        fill: none;\n        height: var(--height);\n        width: var(--width);\n        padding: 0.2rem;\n        stroke: rgba(var(--text-color), 0.7);\n        stroke-width: 6;\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    }\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.handleKeyup=this.handleKeyup.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}))}handleKeyup(e){"Space"===e.code&&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("keyup",this.handleKeyup),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("keyup",this.handleKeyup),this.removeEventListener("change",this.handleClick)}});
\ No newline at end of file
diff --git a/Standard UI Components/dist/copy.js b/Standard UI Components/dist/copy.js
new file mode 100644
index 0000000..9d9c3b6
--- /dev/null
+++ b/Standard UI Components/dist/copy.js	
@@ -0,0 +1,112 @@
+const smCopy = document.createElement('template')
+smCopy.innerHTML = `
+<style>     
+*{
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+}       
+:host{
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    --padding: 0;
+    --background-color: inherit;
+    --button-background-color: rgba(var(--text-color), 0.2);
+    --button-border-radius: 0.3rem;
+}
+.copy{
+    display: grid;
+    gap: 1rem;
+    padding: var(--padding);
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: flex-start;
+}
+.copy-button{
+    display: inline-flex;
+    justify-content: center;
+    cursor: pointer;
+    border: none;
+    padding: 0.4rem;
+    background-color: inherit;
+    border-radius: var(--button-border-radius);
+}
+.copy-button:active{
+    background-color: var(--button-background-color);
+}
+.icon{
+    height: 1.2rem;
+    width: 1.2rem;
+    fill: rgba(var(--text-color), 0.8);
+}
+@media (any-hover: hover){
+    .copy:hover .copy-button{
+        opacity: 1;
+    }
+    .copy-button{
+        opacity: 0.6;
+    }
+    .copy-button:hover{
+        background-color: var(--button-background-color);
+    }
+}
+</style>
+</style>
+<section class="copy">
+    <p class="copy-content"></p>
+    <button part="button" class="copy-button" title="copy">
+        <slot name="copy-icon">
+            <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>
+        </slot>
+    </button>
+</section>
+`;
+customElements.define('sm-copy',
+    class extends HTMLElement {
+        constructor() {
+            super()
+            this.attachShadow({
+                mode: 'open'
+            }).append(smCopy.content.cloneNode(true))
+            
+            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(val) {
+            this.setAttribute('value', val)
+        }
+        get value() {
+            return this.getAttribute('value')
+        }
+        fireEvent() {
+            this.dispatchEvent(
+                new CustomEvent('copy', {
+                    composed: true,
+                    bubbles: true,
+                    cancelable: true,
+                })
+            )
+        }
+        copy() {
+            navigator.clipboard.writeText(this.copyContent.textContent)
+                .then(res => this.fireEvent())
+                .catch(err => console.error(err))
+        }
+        connectedCallback() {
+            this.copyButton.addEventListener('click', this.copy)
+        }
+        attributeChangedCallback(name, oldValue, newValue) {
+            if (name === 'value') {
+                this.copyContent.textContent = newValue
+            }
+        }
+        disconnectedCallback() {
+            this.copyButton.removeEventListener('click', this.copy)
+        }
+    })
\ No newline at end of file
diff --git a/Standard UI Components/dist/copy.min.js b/Standard UI Components/dist/copy.min.js
new file mode 100644
index 0000000..16aaf82
--- /dev/null
+++ b/Standard UI Components/dist/copy.min.js	
@@ -0,0 +1 @@
+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    --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    grid-template-columns: minmax(0, 1fr) auto;\n    align-items: flex-start;\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)}});
\ No newline at end of file
diff --git a/Standard UI Components/dist/file-input.js b/Standard UI Components/dist/file-input.js
new file mode 100644
index 0000000..653c18e
--- /dev/null
+++ b/Standard UI Components/dist/file-input.js	
@@ -0,0 +1,158 @@
+const fileInput = document.createElement('template')
+fileInput.innerHTML = `
+  	<style>
+		*{
+			padding: 0;
+			margin: 0;
+			box-sizing: border-box;
+		}
+		:host{
+			--border-radius: 0.3rem;
+			--button-color: inherit;
+			--button-font-weight: 500;
+			--button-background-color: var(--accent-color);
+		}
+		.file-input {
+			display: flex;
+		}
+		
+		.file-picker {
+            display: flex;
+			cursor: pointer;
+			user-select: none;
+            align-items: center;
+			padding: 0.5rem 0.8rem;
+			color: var(--button-color);
+			border-radius: var(--border-radius);
+			font-weight: var(--button-font-weigh);
+			background-color: var(--button-background-color);
+		}
+		.files-preview-wrapper{
+			display: grid;
+			gap: 0.5rem;
+			list-style: none;
+		}
+		.files-preview-wrapper:not(:empty){
+            margin-bottom: 1rem;
+		}
+		.file-preview{
+			display: grid;
+            gap: 0.5rem;
+            align-items: center;
+			padding: 0.5rem 0.8rem;
+			border-radius: var(--border-radius);
+			background-color: rgba(var(--text-color), 0.06)
+		}
+		.file-name{
+		}
+        .file-size{
+            font-size: 0.8rem;
+            font-weight: 400;
+            color: rgba(var(--text-color), 0.8);
+        }
+		input[type=file] {
+			display: none;
+		}
+  	</style>
+	<ul class="files-preview-wrapper"></ul>
+  	<label tabindex="0" class="file-input">
+		<div class="file-picker"><slot>Choose file</slot></div>
+		<input type="file">
+	</label>
+`
+
+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.observeList = ['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
+    }
+    get isValid() {
+        return this.input.value !== ''
+    }
+    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){
+        const filePreview = document.createElement('li')
+        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)
+    }
+    handleKeyDown(e){
+        if (e.key === 'Enter' || e.code === 'Space') {
+            e.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(name) {
+		if (this.observeList.includes(name)){
+            if (this.hasAttribute(name)) {
+                this.input.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : '')
+			}
+			else {
+                this.input.removeAttribute(name)
+			}
+		}
+	}
+	disconnectedCallback() {
+        this.input.removeEventListener('change', this.handleChange)
+        this.fileInput.removeEventListener('keydown', this.handleKeyDown)
+	}
+})
\ No newline at end of file
diff --git a/Standard UI Components/dist/file-input.min.js b/Standard UI Components/dist/file-input.min.js
new file mode 100644
index 0000000..2c94bdf
--- /dev/null
+++ b/Standard UI Components/dist/file-input.min.js	
@@ -0,0 +1 @@
+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--border-radius: 0.3rem;\n\t\t\t--button-color: inherit;\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 {\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-weigh);\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"><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.observeList=["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.observeList.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)}});
\ No newline at end of file
diff --git a/Standard UI Components/dist/form.js b/Standard UI Components/dist/form.js
new file mode 100644
index 0000000..c0c251e
--- /dev/null
+++ b/Standard UI Components/dist/form.js	
@@ -0,0 +1,93 @@
+const smForm = document.createElement('template')
+smForm.innerHTML = `
+    <style>
+    *{
+        padding: 0;
+        margin: 0;
+        box-sizing: border-box;
+    }
+    :host{
+        --gap: 1rem;
+        width: 100%;
+    }
+    form{
+        display: grid;
+        gap: var(--gap);
+        width: 100%;
+    }
+    </style>
+	<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))
+
+		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 {
+				// implement show validity logic 
+			}
+		}
+	}
+	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))
+	}
+})
diff --git a/Standard UI Components/dist/form.min.js b/Standard UI Components/dist/form.min.js
new file mode 100644
index 0000000..a68b188
--- /dev/null
+++ b/Standard UI Components/dist/form.min.js	
@@ -0,0 +1 @@
+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))}});
\ No newline at end of file
diff --git a/Standard UI Components/dist/input.js b/Standard UI Components/dist/input.js
new file mode 100644
index 0000000..2b6468c
--- /dev/null
+++ b/Standard UI Components/dist/input.js	
@@ -0,0 +1,419 @@
+const smInput = document.createElement('template')
+smInput.innerHTML = `
+<style>
+*{
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+} 
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration { display: none; }
+input[type=number] {
+-moz-appearance:textfield;
+}
+input[type=number]::-webkit-inner-spin-button, 
+input[type=number]::-webkit-outer-spin-button { 
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    margin: 0; 
+}
+input::-ms-reveal,
+input::-ms-clear {
+  display: none;
+}
+input:invalid{
+    outline: none;
+    -webkit-box-shadow: none;
+            box-shadow: none;
+}
+::-moz-focus-inner{
+border: none;
+}
+:host{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    --width: 100%;
+    --font-size: 1rem;
+    --icon-gap: 0.5rem;
+    --border-radius: 0.3rem;
+    --padding: 0.7rem 1rem;
+    --background: rgba(var(--text-color), 0.06);
+}
+.hide{
+   opacity: 0 !important;
+   pointer-events: none !important;
+}
+.hide-completely{
+    display: none;
+}
+.icon {
+    fill: rgba(var(--text-color), 0.6);
+    height: 1.4rem;
+    width: 1.4rem;
+    border-radius: 1rem;
+    cursor: pointer;
+    min-width: 0;
+}
+
+:host(.round) .input{
+    border-radius: 10rem;
+}
+.input {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    cursor: text;
+    min-width: 0;
+    text-align: left;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    position: relative;
+    gap: var(--icon-gap);
+    padding: var(--padding);
+    border-radius: var(--border-radius);
+    -webkit-transition: opacity 0.3s;
+    -o-transition: opacity 0.3s;
+    transition: opacity 0.3s;
+    background: var(--background);
+    width: 100%;
+    outline: none;
+}
+.input.readonly .clear{
+    opacity: 0 !important;
+    margin-right: -2rem;
+    pointer-events: none !important;
+}
+.readonly{
+    pointer-events: none;
+}
+.input:focus-within:not(.readonly){
+    box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;
+}
+.disabled{
+    pointer-events: none;
+    opacity: 0.6;
+}
+.label {
+    opacity: .7;
+    font-weight: 400;
+    font-size: var(--font-size);
+    position: absolute;
+    top: 0;
+    -webkit-transition: -webkit-transform 0.3s;
+    transition: -webkit-transform 0.3s;
+    -o-transition: transform 0.3s;
+    transition: transform 0.3s;
+    transition: transform 0.3s, -webkit-transform 0.3s;
+    -webkit-transform-origin: left;
+    -ms-transform-origin: left;
+        transform-origin: left;
+    pointer-events: none;
+    white-space: nowrap;
+    overflow: hidden;
+    -o-text-overflow: ellipsis;
+       text-overflow: ellipsis;
+    width: 100%;
+    user-select: none;
+    will-change: transform;
+}
+.outer-container{
+    position: relative;
+    width: var(--width);
+}
+.container{
+    width: 100%;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    position: relative;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+}    
+input{
+    font-size: var(--font-size);
+    border: none;
+    background: transparent;
+    outline: none;
+    color: rgba(var(--text-color), 1);
+    width: 100%;
+}
+:host(:not(.outlined)) .animate-label .container input {
+    -webkit-transform: translateY(0.6rem);
+            -ms-transform: translateY(0.6rem);
+        transform: translateY(0.6rem);
+    }
+  
+:host(:not(.outlined)) .animate-label .label {
+    -webkit-transform: translateY(-0.7em) scale(0.8);
+            -ms-transform: translateY(-0.7em) scale(0.8);
+        transform: translateY(-0.7em) scale(0.8);
+    opacity: 1;
+    color: var(--accent-color)
+}
+:host(.outlined) .input {
+    box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;
+    background: rgba(var(--foreground-color), 1);
+}
+:host(.outlined) .label {
+    width: max-content;
+    margin-left: -0.5rem;
+    padding: 0 0.5rem;
+}
+:host(.outlined) .animate-label .label {
+    -webkit-transform: translate(0.1rem, -1.5rem) scale(0.8);
+            -ms-transform: translate(0.1rem, -1.5rem) scale(0.8);
+        transform: translate(0.1rem, -1.5rem) scale(0.8);
+    opacity: 1;
+    background: rgba(var(--foreground-color), 1);
+}
+.animate-label:focus-within:not(.readonly) .label{
+    color: var(--accent-color)
+}
+.feedback-text{
+    font-size: 0.9rem;
+    width: 100%;
+    color: var(--error-color);
+    padding: 0.6rem 1rem;
+    text-align: left;
+}
+.feedback-text:empty{
+    padding: 0;
+}
+@media (any-hover: hover){
+    .icon:hover{
+        background: rgba(var(--text-color), 0.1);
+    }
+}
+</style>
+<div class="outer-container">
+    <label part="input" class="input">
+        <slot name="icon"></slot>
+        <div class="container">
+            <input/>
+            <div part="placeholder" class="label"></div>
+        </div>
+        <svg class="icon clear hide" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12 13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z"/></svg>
+    </label>
+    <div class="feedback-text"></div>
+</div>
+`;
+customElements.define('sm-input',
+    class extends HTMLElement {
+
+        constructor() {
+            super()
+            this.attachShadow({
+                mode: 'open'
+            }).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.validationFunction
+            this.observeList = ['type', 'required', 'disabled', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step']
+        
+            this.reset = this.reset.bind(this)
+            this.setValidity = this.setValidity.bind(this)
+            this.showValidity = this.showValidity.bind(this)
+            this.hideValidity = this.hideValidity.bind(this)
+            this.focusIn = this.focusIn.bind(this)
+            this.focusOut = this.focusOut.bind(this)
+            this.fireEvent = this.fireEvent.bind(this)
+            this.debounce = this.debounce.bind(this)
+            this.checkInput = this.checkInput.bind(this)
+        }
+
+        static get observedAttributes() {
+            return ['placeholder', 'type', 'required', 'disabled', 'readonly', 'min', 'max', 'pattern', 'minlength', 'maxlength', 'step']
+        }
+
+        get value() {
+            return this.input.value
+        }
+
+        set value(val) {
+            this.input.value = val;
+            this.checkInput()
+            this.fireEvent()
+        }
+
+        get placeholder() {
+            return this.getAttribute('placeholder')
+        }
+
+        set placeholder(val) {
+            this.setAttribute('placeholder', val)
+        }
+
+        get type() {
+            return this.getAttribute('type')
+        }
+
+        set type(val) {
+            this.setAttribute('type', val)
+        }
+
+        get isValid() {
+            if (this.customValidation) {
+                return this.validationFunction(this.input.value)
+            }
+            else {
+                return this.input.checkValidity()
+            }
+        }
+
+        get validity() {
+            return this.input.validity
+        }
+
+        set disabled(value) {
+            if (value)
+                this.inputParent.classList.add('disabled')
+            else
+                this.inputParent.classList.remove('disabled')
+        }
+        set readOnly(value) {
+            if (value) {
+                this.setAttribute('readonly', '')
+            } else {
+                this.removeAttribute('readonly')
+            }
+        }
+        set customValidation(val) {
+            this.validationFunction = val
+        }
+        reset(){
+            this.value = ''
+        }
+
+        setValidity(message){
+            this.feedbackText.textContent = message
+        }
+
+        showValidity(){
+            this.feedbackText.classList.remove('hide-completely')
+        }
+
+        hideValidity(){
+            this.feedbackText.classList.add('hide-completely')
+        }
+
+        focusIn(){
+            this.input.focus()
+        }
+
+        focusOut(){
+            this.input.blur()
+        }
+
+        fireEvent(){
+            let event = new Event('input', {
+                bubbles: true,
+                cancelable: true,
+                composed: true
+            });
+            this.dispatchEvent(event);
+        }
+        debounce(callback, wait){
+            let timeoutId = null;
+            return (...args) => {
+                window.clearTimeout(timeoutId);
+                timeoutId = window.setTimeout(() => {
+                    callback.apply(null, args);
+                }, wait);
+            };
+        }
+
+        checkInput(e){
+            if (!this.hasAttribute('readonly')) {
+                if (this.input.value !== '') {
+                    this.clearBtn.classList.remove('hide')
+                } else {
+                    this.clearBtn.classList.add('hide')
+                }
+            }
+            if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '') return;
+            if (this.input.value !== '') {
+                if (this.animate)
+                    this.inputParent.classList.add('animate-label')
+                else
+                    this.label.classList.add('hide')
+            } else {
+                if (this.animate)
+                    this.inputParent.classList.remove('animate-label')
+                else
+                    this.label.classList.remove('hide')
+            }
+        }
+
+
+        connectedCallback() {
+            this.animate = this.hasAttribute('animate')
+            if (this.hasAttribute('value')) {
+                this.input.value = this.getAttribute('value')
+                this.checkInput()
+            }
+            if (this.hasAttribute('error-text')) {
+                this.feedbackText.textContent = this.getAttribute('error-text')
+            }
+            if (!this.hasAttribute('type')) {
+                this.setAttribute('type', 'text')
+            }
+
+            this.input.addEventListener('input', this.checkInput)
+            this.clearBtn.addEventListener('click', this.reset)
+        }
+        
+        attributeChangedCallback(name, oldValue, newValue) {
+            if (oldValue !== newValue) {
+                if (this.observeList.includes(name)) {
+                    if (this.hasAttribute(name)) {
+                        this.input.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : '')
+                    }
+                    else {
+                        this.input.removeAttribute(name)
+                    }
+                }
+                if (name === 'placeholder') {
+                    this.label.textContent = newValue;
+                    this.setAttribute('aria-label', newValue);
+                }
+                else if (name === 'type') {
+                    if (this.hasAttribute('type') && this.getAttribute('type') === 'number') {
+                        this.input.setAttribute('inputmode', 'numeric')
+                    }
+                }
+                else if (name === 'readonly') {
+                    if (this.hasAttribute('readonly')) {
+                        this.inputParent.classList.add('readonly')
+                    } else {
+                        this.inputParent.classList.remove('readonly')
+                    }
+                }
+                else if (name === 'disabled') {
+                    if (this.hasAttribute('disabled')) {
+                        this.inputParent.classList.add('disabled')
+                    }
+                    else {
+                        this.inputParent.classList.remove('disabled')
+                    }
+                }
+            }
+        }
+        disconnectedCallback() {
+            this.input.removeEventListener('input', this.checkInput)
+            this.clearBtn.removeEventListener('click', this.reset)
+        }
+    })
\ No newline at end of file
diff --git a/Standard UI Components/dist/input.min.js b/Standard UI Components/dist/input.min.js
new file mode 100644
index 0000000..84126d8
--- /dev/null
+++ b/Standard UI Components/dist/input.min.js	
@@ -0,0 +1 @@
+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    --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(.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(.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(.outlined) .input {\n    box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;\n    background: rgba(var(--foreground-color), 1);\n}\n:host(.outlined) .label {\n    width: max-content;\n    margin-left: -0.5rem;\n    padding: 0 0.5rem;\n}\n:host(.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(--foreground-color), 1);\n}\n.animate-label:focus-within:not(.readonly) .label{\n    color: var(--accent-color)\n}\n.feedback-text{\n    font-size: 0.9rem;\n    width: 100%;\n    color: var(--error-color);\n    padding: 0.6rem 1rem;\n    text-align: left;\n}\n.feedback-text:empty{\n    padding: 0;\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/>\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    <div class="feedback-text"></div>\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.validationFunction,this.observeList=["type","required","disabled","readonly","min","max","pattern","minlength","maxlength","step"],this.reset=this.reset.bind(this),this.setValidity=this.setValidity.bind(this),this.showValidity=this.showValidity.bind(this),this.hideValidity=this.hideValidity.bind(this),this.focusIn=this.focusIn.bind(this),this.focusOut=this.focusOut.bind(this),this.fireEvent=this.fireEvent.bind(this),this.debounce=this.debounce.bind(this),this.checkInput=this.checkInput.bind(this)}static get observedAttributes(){return["placeholder","type","required","disabled","readonly","min","max","pattern","minlength","maxlength","step"]}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(){return this.customValidation?this.validationFunction(this.input.value):this.input.checkValidity()}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}reset(){this.value=""}setValidity(t){this.feedbackText.textContent=t}showValidity(){this.feedbackText.classList.remove("hide-completely")}hideValidity(){this.feedbackText.classList.add("hide-completely")}focusIn(){this.input.focus()}focusOut(){this.input.blur()}fireEvent(){let t=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(t)}debounce(t,e){let n=null;return(...i)=>{window.clearTimeout(n),n=window.setTimeout(()=>{t.apply(null,i)},e)}}checkInput(t){this.hasAttribute("readonly")||(""!==this.input.value?this.clearBtn.classList.remove("hide"):this.clearBtn.classList.add("hide")),this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder")&&(""!==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.hasAttribute("value")&&(this.input.value=this.getAttribute("value"),this.checkInput()),this.hasAttribute("error-text")&&(this.feedbackText.textContent=this.getAttribute("error-text")),this.hasAttribute("type")||this.setAttribute("type","text"),this.input.addEventListener("input",this.checkInput),this.clearBtn.addEventListener("click",this.reset)}attributeChangedCallback(t,e,n){e!==n&&(this.observeList.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)):"type"===t?this.hasAttribute("type")&&"number"===this.getAttribute("type")&&this.input.setAttribute("inputmode","numeric"):"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)}});
\ No newline at end of file
diff --git a/Standard UI Components/dist/menu.js b/Standard UI Components/dist/menu.js
new file mode 100644
index 0000000..28c81e2
--- /dev/null
+++ b/Standard UI Components/dist/menu.js	
@@ -0,0 +1,291 @@
+const smMenu = document.createElement('template')
+smMenu.innerHTML = `
+<style>     
+*{
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+} 
+.menu{
+    display: -ms-grid;
+    display: grid;
+    place-items: center;
+    position: relative;
+    height: 2rem;
+    width: 2rem;
+    outline: none;
+}
+.icon {
+    position: absolute;
+    fill: rgba(var(--text-color), 0.7);
+    height: 2.4rem;
+    width: 2.4rem;
+    padding: 0.7rem;
+    stroke: rgba(var(--text-color), 0.7);
+    stroke-width: 6;
+    overflow: visible;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    border-radius: 2rem;
+    -webkit-transition: background 0.3s;
+    -o-transition: background 0.3s;
+    transition: background 0.3s;
+}      
+:host{
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+}
+.hide{
+    opacity: 0;
+    pointer-events: none;
+    user-select: none;
+}
+.select{
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    cursor: pointer;
+    width: 100%;
+    -webkit-tap-highlight-color: transparent;
+}
+.menu:focus .icon,
+.focused{
+    background: rgba(var(--text-color), 0.1); 
+}
+:host([align-options="left"]) .options{
+    left: 0;
+}
+:host([align-options="right"]) .options{
+    right: 0;
+}
+.options{
+    padding: 0.5rem 0;
+    overflow: hidden auto;
+    position: absolute;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    min-width: -webkit-max-content;
+    min-width: -moz-max-content;
+    min-width: max-content;
+    -webkit-transform: translateY(-1rem);
+        -ms-transform: translateY(-1rem);
+            transform: translateY(-1rem);
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    background: rgba(var(--foreground-color), 1);
+    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
+    transition: opacity 0.3s, -webkit-transform 0.3s;
+    -o-transition: opacity 0.3s, transform 0.3s;
+    transition: opacity 0.3s, transform 0.3s;
+    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;
+    border: solid 1px rgba(var(--text-color), 0.2);
+    border-radius: 0.3rem;
+    z-index: 2;
+    -webkit-box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
+            box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
+    top: 100%;
+    bottom: auto;
+}
+.moveUp{
+    top: auto;
+    bottom: 100%;
+    -webkit-transform: translateY(3rem);
+        -ms-transform: translateY(3rem);
+            transform: translateY(3rem);
+}
+.moveLeft{
+    left: auto;
+    right: 0;
+}
+.no-transformations{
+    -webkit-transform: none !important;
+        -ms-transform: none !important;
+            transform: none !important;
+}
+@media (hover: hover){
+    .menu:hover .icon{
+        background: rgba(var(--text-color), 0.1); 
+    }
+}
+</style>
+<div class="select">
+    <div class="menu" tabindex="0">
+        <svg class="icon" viewBox="0 0 64 64">
+            <title>options</title>
+            <circle cx="32" cy="6" r="5.5"/>
+            <circle cx="32" cy="58" r="5.5"/>
+            <circle cx="32" cy="31.89" r="5.5"/>
+        </svg>
+    </div>
+    <div class="options hide">
+        <slot></slot> 
+    </div>
+</div>`;
+customElements.define('sm-menu', class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(smMenu.content.cloneNode(true))
+        this.expand = this.expand.bind(this)
+    }
+    static get observedAttributes() {
+        return ['value']
+    }
+    get value() {
+        return this.getAttribute('value')
+    }
+    set value(val) {
+        this.setAttribute('value', val)
+    }
+    expand(){
+        if (!this.open) {
+            this.optionList.classList.remove('hide')
+            this.optionList.classList.add('no-transformations')
+            this.open = true
+            this.icon.classList.add('focused')
+            this.availableOptions.forEach(option => {
+                option.setAttribute('tabindex', '0')
+            })
+        }
+    }
+    collapse() {
+        if (this.open) {
+            this.open = false
+            this.icon.classList.remove('focused')
+            this.optionList.classList.add('hide')
+            this.optionList.classList.remove('no-transformations')
+            this.availableOptions.forEach(option => {
+                option.removeAttribute('tabindex')
+            })
+        }
+    }
+    connectedCallback() {
+        this.availableOptions
+        this.containerDimensions
+        this.optionList = this.shadowRoot.querySelector('.options')
+        let slot = this.shadowRoot.querySelector('.options slot'),
+            menu = this.shadowRoot.querySelector('.menu')
+        this.icon = this.shadowRoot.querySelector('.icon')
+        this.open = false;
+        menu.addEventListener('click', e => {
+            if (!this.open) {
+                this.expand()
+            } else {
+                this.collapse()
+            }
+        })
+        menu.addEventListener('keydown', e => {
+            if (e.code === 'ArrowDown' || e.code === 'ArrowRight') {
+                e.preventDefault()
+                this.availableOptions[0].focus()
+            }
+            if (e.code === 'Enter' || e.code === 'Space') {
+                e.preventDefault()
+                if (!this.open) {
+                    this.expand()
+                } else {
+                    this.collapse()
+                }
+            }
+        })
+        this.optionList.addEventListener('keydown', e => {
+            if (e.code === 'ArrowUp' || e.code === 'ArrowRight') {
+                e.preventDefault()
+                if (document.activeElement.previousElementSibling) {
+                    document.activeElement.previousElementSibling.focus()
+                }
+            }
+            if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') {
+                e.preventDefault()
+                if (document.activeElement.nextElementSibling)
+                    document.activeElement.nextElementSibling.focus()
+            }
+        })
+        this.optionList.addEventListener('click', e => {
+            this.collapse()
+        })
+        slot.addEventListener('slotchange', e => {
+            this.availableOptions = slot.assignedElements()
+            this.containerDimensions = this.optionList.getBoundingClientRect()
+        });
+        window.addEventListener('mousedown', e => {
+            if (!this.contains(e.target) && e.button !== 2) {
+                this.collapse()
+            }
+        })
+    }
+})
+
+// option
+const smMenuOption = document.createElement('template')
+smMenuOption.innerHTML = `
+<style>     
+*{
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+}     
+:host{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+}
+.option{
+    opacity: 0.9;
+    min-width: 100%;
+    padding: 0.6rem 2rem;
+    cursor: pointer;
+    overflow-wrap: break-word;
+    white-space: nowrap;
+    outline: none;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    user-select: none;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+}
+:host(:focus){
+    outline: none;
+    background: rgba(var(--text-color), 0.1);
+}
+@media (hover: hover){
+    .option:hover{
+        opacity: 1;
+        background: rgba(var(--text-color), 0.1);
+    }
+}
+</style>
+<div class="option">
+    <slot></slot> 
+</div>`;
+customElements.define('sm-menu-option', class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(smMenuOption.content.cloneNode(true))
+    }
+
+    connectedCallback() {
+        this.addEventListener('keyup', e => {
+            if (e.code === 'Enter' || e.code === 'Space') {
+                e.preventDefault()
+                this.click()
+            }
+        })
+    }
+})
\ No newline at end of file
diff --git a/Standard UI Components/dist/menu.min.js b/Standard UI Components/dist/menu.min.js
new file mode 100644
index 0000000..57d8cd9
--- /dev/null
+++ b/Standard UI Components/dist/menu.min.js	
@@ -0,0 +1 @@
+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.menu{\n    display: -ms-grid;\n    display: grid;\n    place-items: center;\n    position: relative;\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.7rem;\n    stroke: rgba(var(--text-color), 0.7);\n    stroke-width: 6;\n    overflow: visible;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n    border-radius: 2rem;\n    -webkit-transition: background 0.3s;\n    -o-transition: background 0.3s;\n    transition: background 0.3s;\n}      \n:host{\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n}\n.hide{\n    opacity: 0;\n    pointer-events: none;\n    user-select: none;\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-transform: translateY(-1rem);\n        -ms-transform: translateY(-1rem);\n            transform: translateY(-1rem);\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    background: rgba(var(--foreground-color), 1);\n    -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;\n    transition: opacity 0.3s, -webkit-transform 0.3s;\n    -o-transition: opacity 0.3s, transform 0.3s;\n    transition: opacity 0.3s, transform 0.3s;\n    transition: opacity 0.3s, transform 0.3s, -webkit-transform 0.3s;\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    top: 100%;\n    bottom: auto;\n}\n.moveUp{\n    top: auto;\n    bottom: 100%;\n    -webkit-transform: translateY(3rem);\n        -ms-transform: translateY(3rem);\n            transform: translateY(3rem);\n}\n.moveLeft{\n    left: auto;\n    right: 0;\n}\n.no-transformations{\n    -webkit-transform: none !important;\n        -ms-transform: none !important;\n            transform: none !important;\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" viewBox="0 0 64 64">\n            <title>options</title>\n            <circle cx="32" cy="6" r="5.5"/>\n            <circle cx="32" cy="58" r="5.5"/>\n            <circle cx="32" cy="31.89" r="5.5"/>\n        </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.expand=this.expand.bind(this)}static get observedAttributes(){return["value"]}get value(){return this.getAttribute("value")}set value(n){this.setAttribute("value",n)}expand(){this.open||(this.optionList.classList.remove("hide"),this.optionList.classList.add("no-transformations"),this.open=!0,this.icon.classList.add("focused"),this.availableOptions.forEach(n=>{n.setAttribute("tabindex","0")}))}collapse(){this.open&&(this.open=!1,this.icon.classList.remove("focused"),this.optionList.classList.add("hide"),this.optionList.classList.remove("no-transformations"),this.availableOptions.forEach(n=>{n.removeAttribute("tabindex")}))}connectedCallback(){this.availableOptions,this.containerDimensions,this.optionList=this.shadowRoot.querySelector(".options");let n=this.shadowRoot.querySelector(".options slot"),e=this.shadowRoot.querySelector(".menu");this.icon=this.shadowRoot.querySelector(".icon"),this.open=!1,e.addEventListener("click",n=>{this.open?this.collapse():this.expand()}),e.addEventListener("keydown",n=>{"ArrowDown"!==n.code&&"ArrowRight"!==n.code||(n.preventDefault(),this.availableOptions[0].focus()),"Enter"!==n.code&&"Space"!==n.code||(n.preventDefault(),this.open?this.collapse():this.expand())}),this.optionList.addEventListener("keydown",n=>{"ArrowUp"!==n.code&&"ArrowRight"!==n.code||(n.preventDefault(),document.activeElement.previousElementSibling&&document.activeElement.previousElementSibling.focus()),"ArrowDown"!==n.code&&"ArrowLeft"!==n.code||(n.preventDefault(),document.activeElement.nextElementSibling&&document.activeElement.nextElementSibling.focus())}),this.optionList.addEventListener("click",n=>{this.collapse()}),n.addEventListener("slotchange",e=>{this.availableOptions=n.assignedElements(),this.containerDimensions=this.optionList.getBoundingClientRect()}),window.addEventListener("mousedown",n=>{this.contains(n.target)||2===n.button||this.collapse()})}});const smMenuOption=document.createElement("template");smMenuOption.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    opacity: 0.9;\n    min-width: 100%;\n    padding: 0.6rem 2rem;\n    cursor: pointer;\n    overflow-wrap: break-word;\n    white-space: nowrap;\n    outline: none;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\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 (hover: hover){\n    .option:hover{\n        opacity: 1;\n        background: rgba(var(--text-color), 0.1);\n    }\n}\n</style>\n<div class="option">\n    <slot></slot> \n</div>',customElements.define("sm-menu-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smMenuOption.content.cloneNode(!0))}connectedCallback(){this.addEventListener("keyup",n=>{"Enter"!==n.code&&"Space"!==n.code||(n.preventDefault(),this.click())})}});
\ No newline at end of file
diff --git a/Standard UI Components/dist/notifications.js b/Standard UI Components/dist/notifications.js
new file mode 100644
index 0000000..ae7b811
--- /dev/null
+++ b/Standard UI Components/dist/notifications.js	
@@ -0,0 +1,224 @@
+const smNotifications = document.createElement('template')
+smNotifications.innerHTML = `
+<style>
+    *{
+        padding: 0;
+        margin: 0;
+        -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+    } 
+    :host{
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+    }
+    .hide{
+        opacity: 0 !important;
+        pointer-events: none !important;
+    }
+    .notification-panel{
+        display: grid;
+        width: 100%;
+        gap: 0.5rem;
+        position: fixed;
+        left: 0;
+        bottom: 0;
+        z-index: 100;
+        max-height: 100%;
+        padding: 1.5rem;
+        overflow: hidden auto;
+        -ms-scroll-chaining: none;
+            overscroll-behavior: contain;
+    }
+    .notification-panel:empty{
+        display:none;
+    }
+    .notification{
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        position: relative;
+        border-radius: 0.3rem;
+        -webkit-box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1),
+        0.5rem 1rem 2rem rgba(0, 0, 0, 0.1);
+        box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1),
+        0.5rem 1rem 2rem rgba(0, 0, 0, 0.1);
+        background: rgba(var(--foreground-color), 1);
+        overflow: hidden;
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        -ms-word-break: break-all;
+        word-break: break-all;
+        word-break: break-word;
+        -ms-hyphens: auto;
+        -webkit-hyphens: auto;
+        hyphens: auto;
+        max-width: 100%;
+        padding: 1rem;
+    }
+    h4:first-letter,
+    p:first-letter{
+        text-transform: uppercase;
+    }
+    h4{
+        font-weight: 400;
+    }
+    p{
+        line-height: 1.6;
+        -webkit-box-flex: 1;
+            -ms-flex: 1;
+                flex: 1;
+        color: rgba(var(--text-color), 0.9);
+        overflow-wrap: break-word;
+        overflow-wrap: break-word;
+        word-wrap: break-word;
+        -ms-word-break: break-all;
+        word-break: break-all;
+        word-break: break-word;
+        -ms-hyphens: auto;
+        -webkit-hyphens: auto;
+        hyphens: auto;
+        max-width: 100%;
+        align-self: center;
+    }
+    .notification:last-of-type{
+        margin-bottom: 0;
+    }
+    .icon {
+        height: 100%;
+        width: 100%;
+        fill: rgba(var(--text-color), 0.7);
+    }
+    .close{
+        height: 2rem;
+        width: 2rem;
+        border: none;
+        cursor: pointer;
+        margin-left: 1rem;
+        border-radius: 50%;
+        padding: 0.3rem;
+        transition: background-color 0.3s, transform 0.3s;
+        background-color: transparent;
+    }
+    .close:active{
+        transform: scale(0.9);
+    }
+    @media screen and (min-width: 640px){
+        .notification-panel{
+            max-width: 28rem;
+            width: max-content;
+        }
+        .notification{
+            width: auto;
+            border: solid 1px rgba(var(--text-color), 0.2);
+        }
+    }
+    @media (any-hover: hover){
+        ::-webkit-scrollbar{
+            width: 0.5rem;
+        }
+        
+        ::-webkit-scrollbar-thumb{
+            background: rgba(var(--text-color), 0.3);
+            border-radius: 1rem;
+            &:hover{
+                background: rgba(var(--text-color), 0.5);
+            }
+        }
+        .close:hover{
+            background-color: rgba(var(--text-color), 0.1);
+        }
+    }
+</style>
+<div class="notification-panel"></div>
+`
+
+customElements.define('sm-notifications', class extends HTMLElement {
+    constructor() {
+        super()
+        this.shadow = this.attachShadow({
+            mode: 'open'
+        }).append(smNotifications.content.cloneNode(true))
+
+        this.notificationPanel = this.shadowRoot.querySelector('.notification-panel')
+        this.animationOptions = {
+            duration: 300,
+            fill: "forwards",
+            easing: "ease"
+        }
+
+        this.push = this.push.bind(this)
+        this.removeNotification = this.removeNotification.bind(this)
+        this.clearAll = this.clearAll.bind(this)
+        
+    }
+
+    push(messageBody, options = {}) {
+        const {pinned} = options
+        let notification = document.createElement('div'),
+            composition = ``
+        notification.classList.add('notification')
+        if (pinned)
+            notification.classList.add('pinned')
+        composition += `
+            <p>${messageBody}</p>
+            <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
+        this.notificationPanel.append(notification)
+        notification.animate([
+            {
+                transform: `translateY(1rem)`,
+                opacity: '0'
+            },
+            {
+                transform: `none`,
+                opacity: '1'
+            },
+        ], this.animationOptions)
+    }
+
+    removeNotification(notification){
+        notification.animate([
+            {
+                transform: `none`,
+                opacity: '1'
+            },
+            {
+                transform: `translateY(1rem)`,
+                opacity: '0'
+            }
+        ], this.animationOptions).onfinish = () => {
+            notification.remove()
+        }
+    }
+
+    clearAll(){
+        Array.from(this.notificationPanel.children).forEach(child => {
+            this.removeNotification(child)
+        })
+    }
+
+    connectedCallback() {
+        this.notificationPanel.addEventListener('click', e => {
+            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])
+                        }, 5000);
+                    }
+            })
+        })
+        observer.observe(this.notificationPanel, {
+            childList: true,
+        })
+    }
+})
\ No newline at end of file
diff --git a/Standard UI Components/dist/notifications.min.js b/Standard UI Components/dist/notifications.min.js
new file mode 100644
index 0000000..48bf48e
--- /dev/null
+++ b/Standard UI Components/dist/notifications.min.js	
@@ -0,0 +1 @@
+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    }\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: 1.5rem;\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        -webkit-box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1),\n        0.5rem 1rem 2rem rgba(0, 0, 0, 0.1);\n        box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1),\n        0.5rem 1rem 2rem rgba(0, 0, 0, 0.1);\n        background: rgba(var(--foreground-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    }\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        align-self: center;\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:"ease"},this.push=this.push.bind(this),this.removeNotification=this.removeNotification.bind(this),this.clearAll=this.clearAll.bind(this)}push(n,o={}){const{pinned:e}=o;let t=document.createElement("div"),i="";t.classList.add("notification"),e&&t.classList.add("pinned"),i+=`\n            <p>${n}</p>\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>`,t.innerHTML=i,this.notificationPanel.append(t),t.animate([{transform:"translateY(1rem)",opacity:"0"},{transform:"none",opacity:"1"}],this.animationOptions)}removeNotification(n){n.animate([{transform:"none",opacity:"1"},{transform:"translateY(1rem)",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})}});
\ No newline at end of file
diff --git a/Standard UI Components/dist/popup.js b/Standard UI Components/dist/popup.js
new file mode 100644
index 0000000..bf61994
--- /dev/null
+++ b/Standard UI Components/dist/popup.js	
@@ -0,0 +1,360 @@
+const smPopup = document.createElement('template')
+smPopup.innerHTML = `
+<style>
+*{
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+} 
+:host{
+    position: fixed;
+    display: -ms-grid;
+    display: grid;
+    z-index: 10;
+    --width: 100%;
+    --height: auto;
+    --min-width: auto;
+    --min-height: auto;
+    --body-padding: 1.5rem;
+    --backdrop: rgba(0, 0, 0, 0.6);
+    --border-radius: 0.8rem 0.8rem 0 0;
+}
+.popup-container{
+    display: -ms-grid;
+    display: grid;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    place-items: center;
+    background: var(--backdrop);
+    -webkit-transition: opacity 0.3s;
+    -o-transition: opacity 0.3s;
+    transition: opacity 0.3s;
+    z-index: 10;
+    touch-action: none;
+}
+:host(.stacked) .popup{
+    -webkit-transform: scale(0.9) translateY(-2rem) !important;
+            transform: scale(0.9) translateY(-2rem) !important;
+}
+.popup{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+            flex-direction: column;
+    position: relative;
+    -ms-flex-item-align: end;
+        align-self: flex-end;
+    -webkit-box-align: start;
+        -ms-flex-align: start;
+            align-items: flex-start;
+    width: var(--width);
+    min-width: var(--min-width);
+    height: var(--height);
+    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(--foreground-color), 1);
+    -webkit-box-shadow: 0 -1rem 2rem #00000020;
+            box-shadow: 0 -1rem 2rem #00000020;
+    content-visibility: auto;
+}
+.container-header{
+    display: -webkit-box;
+    display: flex;
+    width: 100%;
+    touch-action: none;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+}
+.popup-top{
+    display: -webkit-box;
+    display: flex;
+    width: 100%;
+}
+.popup-body{
+    display: -webkit-box;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    -webkit-box-flex: 1;
+        -ms-flex: 1;
+            flex: 1;
+    width: 100%;
+    padding: var(--body-padding);
+    overflow-y: auto;
+}
+.hide{
+    opacity: 0;
+    pointer-events: none;
+    visiblity: none;
+}
+@media screen and (min-width: 640px){
+    :host{
+        --border-radius: 0.4rem;
+    }
+    .popup{
+        -ms-flex-item-align: center;
+            -ms-grid-row-align: center;
+            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;
+    }
+}
+@media screen and (max-width: 640px){
+    .popup-top{
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+                flex-direction: column;
+        -webkit-box-align: center;
+                align-items: center;
+    }
+    .handle{
+        height: 0.3rem;
+        width: 2rem;
+        background: rgba(var(--text-color), .4);
+        border-radius: 1rem;
+        margin: 0.5rem 0;
+    }
+}
+@media (any-hover: hover){
+    ::-webkit-scrollbar{
+        width: 0.5rem;
+    }
+    
+    ::-webkit-scrollbar-thumb{
+        background: rgba(var(--text-color), 0.3);
+        border-radius: 1rem;
+        &:hover{
+            background: rgba(var(--text-color), 0.5);
+        }
+    }
+}
+</style>
+<div part="background" class="popup-container hide" role="dialog">
+    <div part="popup" class="popup">
+        <div part="popup-header" class="popup-top">
+            <div class="handle"></div>
+            <slot name="header"></slot>
+        </div>
+        <div part="popup-body" class="popup-body">
+            <slot></slot>
+        </div>
+    </div>
+</div>
+`;
+customElements.define('sm-popup', class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(smPopup.content.cloneNode(true))
+
+        this.allowClosing = false
+        this.isOpen = false
+
+        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)
+    }
+
+    get open() {
+        return this.isOpen
+    }
+
+    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);
+    }
+
+    show(pinned, popupStack){
+        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')
+            }
+            this.dispatchEvent(
+                new CustomEvent("popupopened", {
+                    bubbles: true,
+                    detail: {
+                        popup: this,
+                        popupStack: this.popupStack
+                    }
+                })
+            )
+            this.setAttribute('open', '')
+            this.pinned = pinned
+            this.isOpen = true
+        }
+        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()
+        }
+
+        if (this.inputFields.length) {
+            setTimeout(() => {
+                this.inputFields.forEach(field => {
+                    if (field.type === 'radio' || field.tagName === 'SM-CHECKBOX')
+                        field.checked = false
+                    if (field.tagName === 'SM-INPUT' || field.tagName === 'TEXTAREA'|| field.tagName === 'SM-TEXTAREA')
+                        field.value = ''
+                })
+            }, 300);
+        }
+        setTimeout(() => {            
+            this.dispatchEvent(
+                new CustomEvent("popupclosed", {
+                    bubbles: true,
+                    detail: {
+                        popup: this,
+                        popupStack: this.popupStack
+                    }
+                })
+            )
+            this.isOpen = false
+        }, 300);
+    }
+
+    handleTouchStart(e){
+        this.touchStartY = e.changedTouches[0].clientY
+        this.popup.style.transition = 'transform 0.1s'
+        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())
+        }
+        /*else {
+            this.offset = this.touchStartY - e.changedTouches[0].clientY;
+            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
+        if (this.touchEndTime - this.touchStartTime > 200) {
+            if (this.touchEndY - this.touchStartY > this.threshold) {
+                if (this.pinned) {
+                    this.show()
+                    return
+                } else
+                    this.hide()
+            } else {
+                this.show()
+            }
+        } else {
+            if (this.touchEndY > this.touchStartY)
+                if (this.pinned) {
+                    this.show()
+                    return
+                }
+            else
+                this.hide()
+        }
+    }
+
+    movePopup(){
+        this.popup.style.transform = `translateY(${this.offset}px)`
+    }
+
+    connectedCallback() {
+        this.pinned = false
+        this.popupStack
+        this.popupContainer = this.shadowRoot.querySelector('.popup-container')
+        this.popup = this.shadowRoot.querySelector('.popup')
+        this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot')
+        this.offset
+        this.popupHeader = this.shadowRoot.querySelector('.popup-top')
+        this.touchStartY = 0
+        this.touchEndY = 0
+        this.touchStartTime = 0
+        this.touchEndTime = 0
+        this.touchEndAnimataion;
+        this.threshold = this.popup.getBoundingClientRect().height * 0.3
+
+        if (this.hasAttribute('open'))
+            this.show()
+        this.popupContainer.addEventListener('mousedown', e => {
+            if (e.target === this.popupContainer && !this.pinned) {
+                if (this.pinned) {
+                    this.show()
+                    return
+                } else
+                    this.hide()
+            }
+        })
+
+        this.popupBodySlot.addEventListener('slotchange', () => {
+            setTimeout(() => {
+                this.threshold = this.popup.getBoundingClientRect().height * 0.3
+            }, 200);
+            this.inputFields = this.querySelectorAll('sm-input', 'sm-checkbox', 'textarea', 'sm-textarea', 'radio')
+        })
+
+        this.popupHeader.addEventListener('touchstart', (e) => { this.handleTouchStart(e) }, {passive: true})
+        this.popupHeader.addEventListener('touchmove', (e) => {this.handleTouchMove(e)}, {passive: true})
+        this.popupHeader.addEventListener('touchend', (e) => {this.handleTouchEnd(e)}, {passive: true})
+    }
+    disconnectedCallback() {
+        this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, {passive: true})
+        this.popupHeader.removeEventListener('touchmove', this.handleTouchMove, {passive: true})
+        this.popupHeader.removeEventListener('touchend', this.handleTouchEnd, {passive: true})
+    }
+})
diff --git a/Standard UI Components/dist/popup.min.js b/Standard UI Components/dist/popup.min.js
new file mode 100644
index 0000000..b87e394
--- /dev/null
+++ b/Standard UI Components/dist/popup.min.js	
@@ -0,0 +1 @@
+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    --width: 100%;\n    --height: auto;\n    --min-width: auto;\n    --min-height: auto;\n    --body-padding: 1.5rem;\n    --backdrop: 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);\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(--foreground-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.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)}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,e){return e&&(this.popupStack=e),this.popupStack&&!this.hasAttribute("open")&&(this.popupStack.push({popup:this,permission:t}),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=t,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.inputFields.length&&setTimeout(()=>{this.inputFields.forEach(t=>{"radio"!==t.type&&"SM-CHECKBOX"!==t.tagName||(t.checked=!1),"SM-INPUT"!==t.tagName&&"TEXTAREA"!==t.tagName&&"SM-TEXTAREA"!==t.tagName||(t.value="")})},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.pinned=!1,this.popupStack,this.popupContainer=this.shadowRoot.querySelector(".popup-container"),this.popup=this.shadowRoot.querySelector(".popup"),this.popupBodySlot=this.shadowRoot.querySelector(".popup-body slot"),this.offset,this.popupHeader=this.shadowRoot.querySelector(".popup-top"),this.touchStartY=0,this.touchEndY=0,this.touchStartTime=0,this.touchEndTime=0,this.touchEndAnimataion,this.threshold=.3*this.popup.getBoundingClientRect().height,this.hasAttribute("open")&&this.show(),this.popupContainer.addEventListener("mousedown",t=>{if(t.target===this.popupContainer&&!this.pinned){if(this.pinned)return void this.show();this.hide()}}),this.popupBodySlot.addEventListener("slotchange",()=>{setTimeout(()=>{this.threshold=.3*this.popup.getBoundingClientRect().height},200),this.inputFields=this.querySelectorAll("sm-input","sm-checkbox","textarea","sm-textarea","radio")}),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})}});
\ No newline at end of file
diff --git a/Standard UI Components/dist/radio.js b/Standard UI Components/dist/radio.js
new file mode 100644
index 0000000..6f3f9bd
--- /dev/null
+++ b/Standard UI Components/dist/radio.js	
@@ -0,0 +1,185 @@
+const smRadio = document.createElement('template')
+smRadio.innerHTML = `
+<style>
+    *{
+        padding: 0;
+        margin: 0;
+        -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+    }  
+    :host{
+        --gap: 0.5rem;
+        --height: 1.4rem;
+    }
+    :host([disabled]) {
+        opacity: 0.6;
+        user-select: none;
+        pointer-events: none;
+    }
+    .hide{
+        display: none !important;
+    }
+    .radio{
+        display: flex;
+        cursor: pointer;
+    }
+    .radio__button{
+        position: relative;
+        height: var(--height);
+        width: var(--height);
+        overflow: visible;
+        padding: 0.1rem;
+    }
+    .outer-disc{
+        fill: none;
+        stroke-width: 3;
+        stroke: rgba(var(--text-color), 0.7);
+    }
+    .inner-disc{
+        fill: var(--accent-color);
+        transition: transform 0.3s;
+        transform: scale(0);
+        transform-origin: center;
+    }
+    :host([checked]) .outer-disc{
+        stroke: var(--accent-color);
+    }
+    :host([checked]) .inner-disc{
+        transform: scale(1);
+    }
+
+    @media (any-hover: hover){
+    }
+</style>
+<div class="radio">
+    <slot name="left"></slot>
+    <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>
+    <slot></slot>
+</div>
+`
+window.customElements.define('sm-radio', class extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({
+            mode: 'open'
+        }).append(smRadio.content.cloneNode(true))
+
+        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.handleKeyup = this.handleKeyup.bind(this)
+        this.handleClick = this.handleClick.bind(this)
+        this.handleRadioGroup = this.handleRadioGroup.bind(this)
+
+        this.options = {
+            bubbles: true,
+            composed: true,
+            detail: {
+                value: this.value,
+            }
+        }
+    }
+    static get observedAttributes() {
+        return ['value', 'disabled', 'checked']
+    }
+
+    get disabled() {
+        return this.hasAttribute('disabled')
+    }
+
+    set disabled(val) {
+        if (val) {
+            this.setAttribute('disabled', '')
+        } else {
+            this.removeAttribute('disabled')
+        }
+    }
+
+    get checked() {
+        return this.hasAttribute('checked')
+    }
+
+    set checked(value) {
+        if (value) {
+            this.setAttribute('checked', '')
+        }
+        else {
+            this.removeAttribute('checked')
+        }
+    }
+
+    set value(val) {
+        this.setAttribute('value', val)
+    }
+
+    get value() {
+        return this.getAttribute('value')
+    }
+
+    reset() {
+        this.removeAttribute('checked')
+    }
+
+    dispatchChangeEvent() {
+        this.dispatchEvent(new CustomEvent('change', this.options))
+    }
+    dispatchGroupEvent() {
+        if (this.hasAttribute('name') && this.getAttribute('name').trim() !== '') {
+            this.dispatchEvent(new CustomEvent(`changed${this.getAttribute('name')}`, this.options))
+        }
+    }
+    handleKeyup(e){
+        if (e.code === "Space") {
+            this.handleClick()
+        }
+    }
+    handleClick() {
+        if (!this.hasAttribute('checked')) {
+            this.setAttribute('checked', '')
+            this.dispatchGroupEvent()
+        }
+        
+    }
+    handleRadioGroup(e) {
+        if (e.detail.value !== this.getAttribute('value')) {
+            this.reset()
+        }
+    }
+
+    connectedCallback() {
+        if (!this.hasAttribute('disabled')) {
+            this.setAttribute('tabindex', '0')
+        }
+        this.setAttribute('role', 'radio')
+        if (!this.hasAttribute('checked')) {
+            this.setAttribute('aria-checked', 'false')
+        }
+        this.addEventListener('keyup', this.handleKeyup)
+        this.addEventListener('click', this.handleClick)
+        if (this.hasAttribute('name') && this.getAttribute('name').trim() !== '') {
+            document.addEventListener(`changed${this.getAttribute('name')}`, this.handleRadioGroup)
+        }
+    }
+
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            if (name === 'checked') {
+                this.dispatchChangeEvent()
+            }
+            else if (name === 'disabled') {
+                if (this.hasAttribute('disabled')) {
+                    this.removeAttribute('tabindex')
+                }
+                else {
+                    this.setAttribute('tabindex', '0')
+                }
+            }
+        }
+    }
+    disconnectedCallback() {
+        this.removeEventListener('keyup', this.handleKeyup)
+        this.removeEventListener('change', this.handleClick)
+    }
+});
\ No newline at end of file
diff --git a/Standard UI Components/dist/radio.min.js b/Standard UI Components/dist/radio.min.js
new file mode 100644
index 0000000..b55e8ed
--- /dev/null
+++ b/Standard UI Components/dist/radio.min.js	
@@ -0,0 +1 @@
+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        --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.handleKeyup=this.handleKeyup.bind(this),this.handleClick=this.handleClick.bind(this),this.handleRadioGroup=this.handleRadioGroup.bind(this),this.options={bubbles:!0,composed:!0,detail:{value:this.value}}}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))}handleKeyup(t){"Space"===t.code&&this.handleClick()}handleClick(){this.hasAttribute("checked")||(this.setAttribute("checked",""),this.dispatchGroupEvent())}handleRadioGroup(t){t.detail.value!==this.getAttribute("value")&&this.reset()}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","radio"),this.hasAttribute("checked")||this.setAttribute("aria-checked","false"),this.addEventListener("keyup",this.handleKeyup),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("keyup",this.handleKeyup),this.removeEventListener("change",this.handleClick)}});
\ No newline at end of file
diff --git a/Standard UI Components/dist/select.js b/Standard UI Components/dist/select.js
new file mode 100644
index 0000000..3d062d0
--- /dev/null
+++ b/Standard UI Components/dist/select.js	
@@ -0,0 +1,387 @@
+const smSelect = document.createElement('template')
+smSelect.innerHTML = `
+<style>     
+*{
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+} 
+.icon {
+    fill: none;
+    height: 0.8rem;
+    width: 0.8rem;
+    stroke: rgba(var(--text-color), 0.7);
+    stroke-width: 6;
+    overflow: visible;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}      
+:host{
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    --max-height: auto;
+    --min-width: 100%;
+}
+.hide{
+    display: none !important;
+}
+.select{
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    cursor: pointer;
+    width: 100%;
+    -webkit-tap-highlight-color: transparent;
+}
+.option-text{
+    font-size: 0.9rem;
+    overflow: hidden;
+    -o-text-overflow: ellipsis;
+       text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.selection{
+    border-radius: 0.3rem;
+    display: -ms-grid;
+    display: grid;
+    -ms-grid-columns: 1fr auto;
+    grid-template-columns: 1fr auto;
+        grid-template-areas: 'heading heading' '. .';
+    padding: 0.4rem 1rem;
+    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;
+}
+.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;
+}
+:host([align-select="right"]) .options{
+    right: 0;
+}
+.options{
+    top: 100%;
+    margin-top: 0.5rem; 
+    overflow: hidden auto;
+    position: absolute;
+    grid-area: options;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+            flex-direction: column;
+    min-width: var(--min-width);
+    max-height: var(--max-height);
+    background: rgba(var(--foreground-color), 1);
+    border: solid 1px rgba(var(--text-color), 0.2);
+    border-radius: 0.3rem;
+    z-index: 2;
+    -webkit-box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
+            box-shadow: 0.4rem 0.8rem 1.2rem #00000030;
+}
+.rotate{
+    -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+            transform: rotate(180deg)
+}
+@media (any-hover: hover){
+    ::-webkit-scrollbar{
+        width: 0.5rem;
+        height: 0.5rem;
+    }
+    
+    ::-webkit-scrollbar-thumb{
+        background: rgba(var(--text-color), 0.3);
+        border-radius: 1rem;
+        &:hover{
+            background: rgba(var(--text-color), 0.5);
+        }
+    }
+}
+</style>
+<div class="select" >
+    <div class="selection" tabindex="0">
+        <div class="option-text"></div>
+        <svg class="icon toggle" viewBox="0 0 64 64">
+            <polyline points="63.65 15.99 32 47.66 0.35 15.99"/>
+        </svg>
+    </div>
+    <div part="options" class="options hide">
+        <slot></slot> 
+    </div>
+</div>`;
+customElements.define('sm-select', class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(smSelect.content.cloneNode(true))
+
+        this.reset = this.reset.bind(this)
+    }
+    static get observedAttributes() {
+        return ['value']
+    }
+    get value() {
+        return this.getAttribute('value')
+    }
+    set value(val) {
+        this.setAttribute('value', val)
+    }
+
+    reset(){
+
+    }
+
+    collapse() {
+        this.chevron.classList.remove('rotate')
+        this.optionList.animate(this.slideUp, this.animationOptions)
+        .onfinish = () => {
+            this.optionList.classList.add('hide')
+            this.open = false
+        }
+    }
+    connectedCallback() {
+        this.availableOptions
+        this.optionList = this.shadowRoot.querySelector('.options')
+        this.chevron = this.shadowRoot.querySelector('.toggle')
+        let slot = this.shadowRoot.querySelector('.options slot'),
+            selection = this.shadowRoot.querySelector('.selection'),
+            previousOption
+        this.open = false;
+        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'
+        }
+        selection.addEventListener('click', e => {
+            if (!this.open) {
+                this.optionList.classList.remove('hide')
+                this.optionList.animate(this.slideDown, this.animationOptions)
+                this.chevron.classList.add('rotate')
+                this.open = true
+            } else {
+                this.collapse()
+            }
+        })
+        selection.addEventListener('keydown', e => {
+            if (e.code === 'ArrowDown' || e.code === 'ArrowRight') {
+                e.preventDefault()
+                this.availableOptions[0].focus()
+            }
+            if (e.code === 'Enter' || e.code === 'Space')
+                if (!this.open) {
+                    this.optionList.classList.remove('hide')
+                    this.optionList.animate(this.slideDown, this.animationOptions)
+                    this.chevron.classList.add('rotate')
+                    this.open = true
+                } else {
+                    this.collapse()
+                }
+        })
+        this.optionList.addEventListener('keydown', e => {
+            if (e.code === 'ArrowUp' || e.code === 'ArrowRight') {
+                e.preventDefault()
+                if (document.activeElement.previousElementSibling) {
+                    document.activeElement.previousElementSibling.focus()
+                }
+            }
+            if (e.code === 'ArrowDown' || e.code === 'ArrowLeft') {
+                e.preventDefault()
+                if (document.activeElement.nextElementSibling)
+                    document.activeElement.nextElementSibling.focus()
+            }
+        })
+        this.addEventListener('optionSelected', e => {
+            if (previousOption !== e.target) {
+                this.setAttribute('value', e.detail.value)
+                this.shadowRoot.querySelector('.option-text').textContent = e.detail.text;
+                this.dispatchEvent(new CustomEvent('change', {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        value: e.detail.value
+                    }
+                }))
+                if (previousOption) {
+                    previousOption.classList.remove('check-selected')
+                }
+                previousOption = e.target;
+            }
+            if (!e.detail.switching)
+                this.collapse()
+
+            e.target.classList.add('check-selected')
+        })
+        slot.addEventListener('slotchange', e => {
+            this.availableOptions = slot.assignedElements()
+            if (this.availableOptions[0]) {
+                let firstElement = this.availableOptions[0];
+                previousOption = firstElement;
+                firstElement.classList.add('check-selected')
+                this.setAttribute('value', firstElement.getAttribute('value'))
+                this.shadowRoot.querySelector('.option-text').textContent = firstElement.textContent
+                this.availableOptions.forEach((element, index) => {
+                    element.setAttribute('data-rank', index + 1);
+                    element.setAttribute('tabindex', "0");
+                })
+            }
+        });
+        document.addEventListener('mousedown', e => {
+            if (!this.contains(e.target) && this.open) {
+                this.collapse()
+            }
+        })
+    }
+})
+
+// option
+const smOption = document.createElement('template')
+smOption.innerHTML = `
+<style>     
+*{
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+}     
+:host{
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+}
+.option{
+    min-width: 100%;
+    padding: 0.8rem 1.2rem;
+    cursor: pointer;
+    overflow-wrap: break-word;
+    outline: none;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+        -ms-flex-align: center;
+            align-items: center;
+}
+:host(:focus){
+    outline: none;
+    background: rgba(var(--text-color), 0.1);
+}
+:host(:focus) .option .icon{
+    opacity: 0.4
+}
+:host(.check-selected) .icon{
+    opacity: 1 !important
+}
+.icon {
+    margin-right: 0.8rem;
+    fill: none;
+    height: 0.8rem;
+    width: 0.8rem;
+    stroke: rgba(var(--text-color), 0.7);
+    stroke-width: 10;
+    overflow: visible;
+    stroke-linecap: round;
+    border-radius: 1rem;
+    stroke-linejoin: round;
+    opacity: 0;
+}
+@media (hover: hover){
+    .option:hover{
+        background: rgba(var(--text-color), 0.1);
+    }
+    .option:hover .icon{
+        opacity: 0.4
+    }
+}
+</style>
+<div class="option">
+    <svg class="icon" viewBox="0 0 64 64">
+        <polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/>
+    </svg>
+    <slot></slot> 
+</div>`;
+customElements.define('sm-option', class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(smOption.content.cloneNode(true))
+    }
+
+    sendDetails(switching) {
+        let optionSelected = new CustomEvent('optionSelected', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                text: this.textContent,
+                value: this.getAttribute('value'),
+                switching: switching
+            }
+        })
+        this.dispatchEvent(optionSelected)
+    }
+
+    connectedCallback() {
+        let validKey = [
+            'ArrowUp',
+            'ArrowDown',
+            'ArrowLeft',
+            'ArrowRight'
+        ]
+        this.addEventListener('click', e => {
+            this.sendDetails()
+        })
+        this.addEventListener('keyup', e => {
+            if (e.code === 'Enter' || e.code === 'Space') {
+                e.preventDefault()
+                this.sendDetails(false)
+            }
+            if (validKey.includes(e.code)) {
+                e.preventDefault()
+                this.sendDetails(true)
+            }
+        })
+        if (this.hasAttribute('default')) {
+            setTimeout(() => {
+                this.sendDetails()
+            }, 0);
+        }
+    }
+})
diff --git a/Standard UI Components/dist/select.min.js b/Standard UI Components/dist/select.min.js
new file mode 100644
index 0000000..985181b
--- /dev/null
+++ b/Standard UI Components/dist/select.min.js	
@@ -0,0 +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.icon {\n    fill: none;\n    height: 0.8rem;\n    width: 0.8rem;\n    stroke: rgba(var(--text-color), 0.7);\n    stroke-width: 6;\n    overflow: visible;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}      \n:host{\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    --max-height: auto;\n    --min-width: 100%;\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.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.5rem; \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(--foreground-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" tabindex="0">\n        <div class="option-text"></div>\n        <svg class="icon toggle" viewBox="0 0 64 64">\n            <polyline points="63.65 15.99 32 47.66 0.35 15.99"/>\n        </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)}static get observedAttributes(){return["value"]}get value(){return this.getAttribute("value")}set value(e){this.setAttribute("value",e)}reset(){}collapse(){this.chevron.classList.remove("rotate"),this.optionList.animate(this.slideUp,this.animationOptions).onfinish=(()=>{this.optionList.classList.add("hide"),this.open=!1})}connectedCallback(){this.availableOptions,this.optionList=this.shadowRoot.querySelector(".options"),this.chevron=this.shadowRoot.querySelector(".toggle");let e,t=this.shadowRoot.querySelector(".options slot"),n=this.shadowRoot.querySelector(".selection");this.open=!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"},n.addEventListener("click",e=>{this.open?this.collapse():(this.optionList.classList.remove("hide"),this.optionList.animate(this.slideDown,this.animationOptions),this.chevron.classList.add("rotate"),this.open=!0)}),n.addEventListener("keydown",e=>{"ArrowDown"!==e.code&&"ArrowRight"!==e.code||(e.preventDefault(),this.availableOptions[0].focus()),"Enter"!==e.code&&"Space"!==e.code||(this.open?this.collapse():(this.optionList.classList.remove("hide"),this.optionList.animate(this.slideDown,this.animationOptions),this.chevron.classList.add("rotate"),this.open=!0))}),this.optionList.addEventListener("keydown",e=>{"ArrowUp"!==e.code&&"ArrowRight"!==e.code||(e.preventDefault(),document.activeElement.previousElementSibling&&document.activeElement.previousElementSibling.focus()),"ArrowDown"!==e.code&&"ArrowLeft"!==e.code||(e.preventDefault(),document.activeElement.nextElementSibling&&document.activeElement.nextElementSibling.focus())}),this.addEventListener("optionSelected",t=>{e!==t.target&&(this.setAttribute("value",t.detail.value),this.shadowRoot.querySelector(".option-text").textContent=t.detail.text,this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:t.detail.value}})),e&&e.classList.remove("check-selected"),e=t.target),t.detail.switching||this.collapse(),t.target.classList.add("check-selected")}),t.addEventListener("slotchange",n=>{if(this.availableOptions=t.assignedElements(),this.availableOptions[0]){let t=this.availableOptions[0];e=t,t.classList.add("check-selected"),this.setAttribute("value",t.getAttribute("value")),this.shadowRoot.querySelector(".option-text").textContent=t.textContent,this.availableOptions.forEach((e,t)=>{e.setAttribute("data-rank",t+1),e.setAttribute("tabindex","0")})}}),document.addEventListener("mousedown",e=>{!this.contains(e.target)&&this.open&&this.collapse()})}});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    min-width: 100%;\n    padding: 0.8rem 1.2rem;\n    cursor: pointer;\n    overflow-wrap: break-word;\n    outline: none;\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}\n:host(:focus){\n    outline: none;\n    background: rgba(var(--text-color), 0.1);\n}\n:host(:focus) .option .icon{\n    opacity: 0.4\n}\n:host(.check-selected) .icon{\n    opacity: 1 !important\n}\n.icon {\n    margin-right: 0.8rem;\n    fill: none;\n    height: 0.8rem;\n    width: 0.8rem;\n    stroke: rgba(var(--text-color), 0.7);\n    stroke-width: 10;\n    overflow: visible;\n    stroke-linecap: round;\n    border-radius: 1rem;\n    stroke-linejoin: round;\n    opacity: 0;\n}\n@media (hover: hover){\n    .option:hover{\n        background: rgba(var(--text-color), 0.1);\n    }\n    .option:hover .icon{\n        opacity: 0.4\n    }\n}\n</style>\n<div class="option">\n    <svg class="icon" viewBox="0 0 64 64">\n        <polyline points="0.35 31.82 21.45 52.98 63.65 10.66"/>\n    </svg>\n    <slot></slot> \n</div>',customElements.define("sm-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smOption.content.cloneNode(!0))}sendDetails(e){let t=new CustomEvent("optionSelected",{bubbles:!0,composed:!0,detail:{text:this.textContent,value:this.getAttribute("value"),switching:e}});this.dispatchEvent(t)}connectedCallback(){let e=["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"];this.addEventListener("click",e=>{this.sendDetails()}),this.addEventListener("keyup",t=>{"Enter"!==t.code&&"Space"!==t.code||(t.preventDefault(),this.sendDetails(!1)),e.includes(t.code)&&(t.preventDefault(),this.sendDetails(!0))}),this.hasAttribute("default")&&setTimeout(()=>{this.sendDetails()},0)}});
\ No newline at end of file
diff --git a/Standard UI Components/dist/strip-select.js b/Standard UI Components/dist/strip-select.js
new file mode 100644
index 0000000..71abbe3
--- /dev/null
+++ b/Standard UI Components/dist/strip-select.js	
@@ -0,0 +1,324 @@
+const stripSelect = document.createElement('template')
+stripSelect.innerHTML = `
+<style>
+    *{
+        padding: 0;
+        margin: 0;
+        -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+    }  
+    :host{
+        --gap: 0.5rem;
+    }
+    .hide{
+        display: none !important;
+    }
+    input[type="radio"]{
+        display: none;
+    }
+    .scrolling-container{
+        position: relative;
+        display: flex;
+        align-items: center;
+        padding: 1rem 0;
+    }
+    .strip-select{
+        display: grid;
+        grid-auto-flow: column;
+        gap: var(--gap);
+        position: relative;
+        max-width: 100%;   
+        align-items: center;
+        overflow: auto hidden;
+    }
+    .nav-button{
+        display: flex;
+        top: 50%;
+        z-index: 2;
+        border: none;
+        padding: 0.3rem;
+        cursor: pointer;
+        position: absolute;
+        align-items: center;
+        background: var(--background-color);
+        transform: translateY(-50%);
+    }
+    .nav-button--right{
+        right: 0;
+    }
+    .cover{
+        position: absolute;
+        z-index: 1;
+        width: 5rem;
+        height: 100%;
+        pointer-events: none;
+    }
+    .cover--left{
+        background: linear-gradient(90deg, var(--background-color) 60%, transparent);
+    }
+    .cover--right{
+        right: 0;
+        background: linear-gradient(90deg, transparent 0%, var(--background-color) 40%);
+    }
+    .nav-button--right::before{
+        background-color: red;
+    }
+    .icon{
+        height: 1.5rem;
+        width: 1.5rem;
+        fill: rgba(var(--text-color), .8);
+    }
+    @media (hover: none){
+        ::-webkit-scrollbar-track {
+            background-color: transparent !important;
+        }
+        ::-webkit-scrollbar {
+            height: 0;
+            background-color: transparent;
+        }
+        .nav-button{
+            display: none;
+        }
+        .strip-select{
+            overflow: auto hidden;
+        }
+        .cover{
+            width: 2rem;
+        }
+    }
+    @media (hover: hover){
+        .strip-select{
+            overflow: hidden;
+        }
+    }
+</style>
+<section class="scrolling-container">
+    <div class="cover cover--left hide"></div>
+    <button class="nav-button nav-button--left hide">
+        <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>
+    </button>
+    <section class="strip-select">
+        <slot></slot>
+    </section>
+    <button class="nav-button nav-button--right hide">
+        <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>
+    </button>
+    <div class="cover cover--right hide"></div>
+</section>
+
+`
+customElements.define('strip-select', class extends HTMLElement{
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(stripSelect.content.cloneNode(true))
+        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: true,
+                composed: true,
+                detail: {
+                    value: this._value
+                }
+            })
+        )
+    }
+    connectedCallback() {
+        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()
+            assignedElements.forEach(elem => {
+                if (elem.hasAttribute('selected')) {
+                    elem.setAttribute('active', '')
+                    this._value = elem.value
+                }
+            })
+            if (assignedElements.length > 0) {
+                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()
+            }
+        })
+        const resObs = new ResizeObserver(entries => {
+            entries.forEach(entry => {
+                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)
+        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()
+            }
+        })
+        const firstOptionObserver = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    navButtonLeft.classList.add('hide')
+                    coverLeft.classList.add('hide')
+                }
+                else {
+                    navButtonLeft.classList.remove('hide')
+                    coverLeft.classList.remove('hide')
+                }
+            })
+        },
+        {
+            threshold: 0.9,
+            root: this
+        })
+        const lastOptionObserver = new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    navButtonRight.classList.add('hide')
+                    coverRight.classList.add('hide')
+                }
+                else {
+                    navButtonRight.classList.remove('hide')
+                    coverRight.classList.remove('hide')
+                }
+            })
+        },
+        {
+            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)    
+    }
+})
+
+//Strip option
+const stripOption = document.createElement('template')
+stripOption.innerHTML = `
+<style>
+    *{
+        padding: 0;
+        margin: 0;
+        -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+    }  
+    :host{
+        --border-radius: 2rem;
+        --background-color: inherit;
+        --active-option-color: inherit;
+        --active-option-backgroud-color: rgba(var(--text-color), .2);
+    }
+    .hide{
+        display: none !important;
+    }
+    .strip-option{
+        display: flex;
+        flex-shrink: 0;
+        cursor: pointer;
+        white-space: nowrap;
+        padding: 0.5rem 0.8rem;
+        transition: background 0.3s;
+        border-radius: var(--border-radius);
+        box-shadow: 0 0 0 1px rgba(var(--text-color), .2) inset;
+        -webkit-tap-highlight-color: transparent;
+    }
+    :host([active]) .strip-option{
+        color: var(--active-option-color);
+        background-color: var(--active-option-backgroud-color);
+    }
+    :host(:hover:not([active])) .strip-option{
+        background-color: rgba(var(--text-color), 0.06);
+    }
+</style>
+<label class="strip-option" tabindex="0">
+    <slot></slot>
+</label>
+`
+customElements.define('strip-option', class extends HTMLElement{
+    constructor() {
+        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)
+    }
+    get value() {
+        return this._value
+    }
+    fireEvent(){
+        this.dispatchEvent(
+            new CustomEvent("option-clicked", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    value: this._value
+                }
+            })
+        )
+    }
+    handleKeyDown(e){
+        if (e.key === 'Enter' || e.key === 'Space') {
+            this.fireEvent()
+        }
+    }
+    connectedCallback() {
+        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)
+    }
+})
\ No newline at end of file
diff --git a/Standard UI Components/dist/strip-select.min.js b/Standard UI Components/dist/strip-select.min.js
new file mode 100644
index 0000000..7e51c3e
--- /dev/null
+++ b/Standard UI Components/dist/strip-select.min.js	
@@ -0,0 +1 @@
+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        --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        display: grid;\n        grid-auto-flow: column;\n        gap: var(--gap);\n        position: relative;\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: var(--background-color);\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, var(--background-color) 60%, transparent);\n    }\n    .cover--right{\n        right: 0;\n        background: linear-gradient(90deg, transparent 0%, var(--background-color) 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        ::-webkit-scrollbar-track {\n            background-color: transparent !important;\n        }\n        ::-webkit-scrollbar {\n            height: 0;\n            background-color: transparent;\n        }\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        .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(){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)}),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    .hide{\n        display: none !important;\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(:hover:not([active])) .strip-option{\n        background-color: rgba(var(--text-color), 0.06);\n    }\n</style>\n<label class="strip-option" tabindex="0">\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._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)}});
\ No newline at end of file
diff --git a/Standard UI Components/dist/switch.js b/Standard UI Components/dist/switch.js
new file mode 100644
index 0000000..31eabd3
--- /dev/null
+++ b/Standard UI Components/dist/switch.js	
@@ -0,0 +1,228 @@
+const smSwitch = document.createElement('template')
+smSwitch.innerHTML = `	
+<style>
+    *{
+        -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+        padding: 0;
+        margin: 0;
+    }
+    
+    :host{
+        display: -webkit-inline-box;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+    }
+    label{
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        width: 100%;
+        outline: none;
+        cursor: pointer;
+        -webkit-tap-highlight-color: transparent;
+    }
+    :host(:not([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;
+        pointer-events: none;
+    }
+    .switch {
+        position: relative;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        width: 2.4rem;
+        flex-shrink: 0;
+        margin-left: auto;
+        padding: 0.2rem;
+        cursor: pointer;
+        border-radius: 2rem;
+    }
+    
+    input {
+        display: none;
+    }
+    
+    .track {
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 1.4rem;
+        -webkit-transition: background 0.3s;
+        -o-transition: background 0.3s;
+        transition: background 0.3s;
+        background: rgba(var(--text-color), 0.4);
+        -webkit-box-shadow: 0 0.1rem 0.3rem #00000040 inset;
+                box-shadow: 0 0.1rem 0.3rem #00000040 inset;
+        border-radius: 1rem;
+    }
+    
+    .switch:active .button::after,
+    .switch:focus .button::after{
+        opacity: 1
+    }
+    .switch:focus-visible .button::after{
+        opacity: 1
+    }
+    
+    .button::after{
+        content: '';
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        position: absolute;
+        height: 2.6rem;
+        width: 2.6rem;
+        background: rgba(var(--text-color), 0.2);
+        border-radius: 2rem;
+        opacity: 0;
+        -webkit-transition: opacity 0.3s;
+        -o-transition: opacity 0.3s;
+        transition: opacity 0.3s;
+    }
+    
+    .button {
+        position: relative;
+        display: -webkit-inline-box;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+        height: 1rem;
+        width: 1rem;
+        -webkit-box-pack: center;
+            -ms-flex-pack: center;
+                justify-content: center;
+        -webkit-box-align: center;
+            -ms-flex-align: center;
+                align-items: center;
+        border-radius: 1rem;
+        -webkit-box-shadow: 0 0.1rem 0.4rem #00000060;
+                box-shadow: 0 0.1rem 0.4rem #00000060;
+        -webkit-transition: -webkit-transform 0.3s;
+        transition: -webkit-transform 0.3s;
+        -o-transition: transform 0.3s;
+        transition: transform 0.3s;
+        transition: transform 0.3s, -webkit-transform 0.3s;
+        border: solid 0.3rem white;
+    }
+    
+    input:checked ~ .button {
+        -webkit-transform: translateX(100%);
+            -ms-transform: translateX(100%);
+                transform: translateX(100%);
+    }
+    
+    input:checked ~ .track {
+        background: var(--accent-color);
+    }
+</style>
+<label tabindex="0">
+    <slot name="left"></slot>
+    <div part="switch" class="switch">
+        <input type="checkbox">
+        <div class="track"></div>
+        <div class="button"></div>
+    </div>
+    <slot name="right"></slot>
+</label>`
+
+customElements.define('sm-switch', class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(smSwitch.content.cloneNode(true))
+        this.switch = this.shadowRoot.querySelector('.switch');
+        this.input = this.shadowRoot.querySelector('input')
+        this.isChecked = false
+        this.isDisabled = false
+
+        this.dispatch = this.dispatch.bind(this)
+    }
+
+    static get observedAttributes() {
+        return ['disabled', 'checked']
+    }
+
+    get disabled() {
+        return this.isDisabled
+    }
+
+    set disabled(val) {
+        if (val) {
+            this.setAttribute('disabled', '')
+        } else {
+            this.removeAttribute('disabled')
+        }
+    }
+
+    get checked() {
+        return this.isChecked
+    }
+
+    set checked(value) {
+        if (value) {
+            this.setAttribute('checked', '')
+        } else {
+            this.removeAttribute('checked')
+        }
+    }
+
+    dispatch(){
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                value: this.isChecked 
+            }
+        }))
+    }
+
+    connectedCallback() {
+        this.addEventListener('keyup', e => {
+            if ((e.code === "Enter" || e.code === "Space") && !this.isDisabled) {
+                this.input.click()
+            }
+        })
+        this.input.addEventListener('click', e => {
+            if (this.input.checked)
+                this.checked = true
+            else
+                this.checked = false
+            this.dispatch()
+        })
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue !== newValue) {
+            if (name === 'disabled') {
+                if (this.hasAttribute('disabled')) {
+                    this.disabled = true                
+                }
+                else {
+                    this.disabled = false                
+                }
+            }
+            else if (name === 'checked') {
+                if (this.hasAttribute('checked')) {
+                    this.isChecked = true
+                    this.input.checked = true            
+                }
+                else {
+                    this.isChecked = false
+                    this.input.checked = false               
+                } 
+            }
+        }
+    }
+
+})
\ No newline at end of file
diff --git a/Standard UI Components/dist/switch.min.js b/Standard UI Components/dist/switch.min.js
new file mode 100644
index 0000000..9427770
--- /dev/null
+++ b/Standard UI Components/dist/switch.min.js	
@@ -0,0 +1 @@
+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    }\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("keyup",n=>{"Enter"!==n.code&&"Space"!==n.code||this.isDisabled||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)))}});
\ No newline at end of file
diff --git a/Standard UI Components/dist/tabs.js b/Standard UI Components/dist/tabs.js
new file mode 100644
index 0000000..2d7090d
--- /dev/null
+++ b/Standard UI Components/dist/tabs.js	
@@ -0,0 +1,412 @@
+const smTabHeader = document.createElement('template')
+smTabHeader.innerHTML = `
+<style>
+    *{
+        padding: 0;
+        margin: 0;
+        -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+    } 
+    :host{
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+    }
+    .tabs{
+        position: relative;
+        display: -ms-grid;
+        display: grid;
+        width: 100%;
+    }
+    .tab-header{
+        display: -ms-grid;
+        display: grid;
+        grid-auto-flow: column;
+        -webkit-box-pack: start;
+            -ms-flex-pack: start;
+                justify-content: flex-start;
+        gap: 1rem;
+        position: relative;
+        overflow: auto hidden;
+        max-width: 100%;
+        scrollbar-width: 0;
+    }
+    .indicator{
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        height: 0.15rem;
+        border-radius: 1rem 1rem 0 0;  
+        background: var(--accent-color);
+        -webkit-transition: width 0.3s, -webkit-transform 0.3s;
+        transition: width 0.3s, -webkit-transform 0.3s;
+        -o-transition: transform 0.3s, width 0.3s;
+        transition: transform 0.3s, width 0.3s;
+        transition: transform 0.3s, width 0.3s, -webkit-transform 0.3s;
+        pointer-events: none;
+    }
+    :host([variant="tab"]) .indicator{
+        height: 100%;
+        border-radius: 0.3rem;
+    }
+    :host(.round) .indicator{
+        border-radius: 3rem;
+    }
+    :host([variant="tab"]) .tab-header{
+        border-bottom: none; 
+    }
+    .hide-completely{
+        display: none;
+    }
+    :host([variant="tab"]) .tab-header{
+        gap: 0.2rem;
+        display: -ms-inline-grid;
+        display: inline-grid;
+        justify-self: flex-start;
+        border-radius: 0.3rem;
+    }
+    :host([variant="tab"]) slot::slotted(.active){
+        color: rgba(var(--foreground-color), 1);
+    }
+    slot::slotted(.active){
+        color: var(--accent-color);
+        opacity: 1;
+    }
+    @media (hover: none){
+        .tab-header::-webkit-scrollbar-track {
+            -webkit-box-shadow: none !important;
+            background-color: transparent !important;
+        }
+        .tab-header::-webkit-scrollbar {
+            height: 0;
+            background-color: transparent;
+        }
+    }         
+</style>
+<div part="tab-container" class="tabs">
+    <div part="tab-header" class="tab-header">
+        <slot></slot>
+        <div part="indicator" class="indicator"></div>
+    </div>
+</div>
+`;
+
+customElements.define('sm-tab-header', class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(smTabHeader.content.cloneNode(true))
+
+        this.indicator = this.shadowRoot.querySelector('.indicator');
+        this.tabSlot = this.shadowRoot.querySelector('slot');
+        this.tabHeader = this.shadowRoot.querySelector('.tab-header');
+    }
+
+    sendDetails(element) {
+        this.dispatchEvent(
+            new CustomEvent("switchtab", {
+                bubbles: true,
+                detail: {
+                    target: this.target,
+                    rank: parseInt(element.getAttribute('rank'))
+                }
+            })
+        )
+    }
+
+    moveIndiactor(tabDimensions) {
+        //if(this.isTab)
+        this.indicator.setAttribute('style', `width: ${tabDimensions.width}px; transform: translateX(${tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px)`)
+        //else
+        //this.indicator.setAttribute('style', `width: calc(${tabDimensions.width}px - 1.6rem); transform: translateX(calc(${ tabDimensions.left - this.tabHeader.getBoundingClientRect().left + this.tabHeader.scrollLeft}px + 0.8rem)`)
+    }
+
+    connectedCallback() {
+        if (!this.hasAttribute('target') || this.getAttribute('target').value === '') return;
+        this.prevTab
+        this.allTabs
+        this.activeTab
+        this.isTab = false
+        this.target = this.getAttribute('target')
+
+        if (this.hasAttribute('variant') && this.getAttribute('variant') === 'tab') {
+            this.isTab = true
+        }
+
+        this.tabSlot.addEventListener('slotchange', () => {
+            this.tabSlot.assignedElements().forEach((tab, index) => {
+                tab.setAttribute('rank', index)
+            })
+        })
+        this.allTabs = this.tabSlot.assignedElements();
+
+        this.tabSlot.addEventListener('click', e => {
+            if (e.target === this.prevTab || !e.target.closest('sm-tab'))
+                return
+            if (this.prevTab)
+                this.prevTab.classList.remove('active')
+            e.target.classList.add('active')
+
+            e.target.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+                inline: 'center'
+            })
+            this.moveIndiactor(e.target.getBoundingClientRect())
+            this.sendDetails(e.target)
+            this.prevTab = e.target;
+            this.activeTab = e.target;
+        })
+        let resizeObserver = new ResizeObserver(entries => {
+            entries.forEach((entry) => {
+                if (this.prevTab) {
+                    let tabDimensions = this.activeTab.getBoundingClientRect();
+                    this.moveIndiactor(tabDimensions)
+                }
+            })
+        })
+        resizeObserver.observe(this)
+        let observer = new IntersectionObserver((entries) => {
+            entries.forEach((entry) => {
+                if (entry.isIntersecting) {
+                    this.indicator.style.transition = 'none'
+                    if (this.activeTab) {
+                        let tabDimensions = this.activeTab.getBoundingClientRect();
+                        this.moveIndiactor(tabDimensions)
+                    } else {
+                        this.allTabs[0].classList.add('active')
+                        let tabDimensions = this.allTabs[0].getBoundingClientRect();
+                        this.moveIndiactor(tabDimensions)
+                        this.sendDetails(this.allTabs[0])
+                        this.prevTab = this.tabSlot.assignedElements()[0];
+                        this.activeTab = this.prevTab;
+                    }
+                }
+            })
+        }, {
+            threshold: 1.0
+        })
+        observer.observe(this)
+    }
+})
+
+// tab
+const smTab = document.createElement('template')
+smTab.innerHTML = `
+<style>
+    *{
+        padding: 0;
+        margin: 0;
+        -webkit-box-sizing: border-box;
+                box-sizing: border-box;
+    } 
+    :host{
+        position: relative;
+        display: -webkit-inline-box;
+        display: -ms-inline-flexbox;
+        display: inline-flex;
+        z-index: 1;
+    }
+    .tab{
+        position: relative;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+            -ms-user-select: none;
+                user-select: none;
+        -webkit-box-pack: center;
+            -ms-flex-pack: center;
+                justify-content: center;
+        cursor: pointer;
+        -webkit-tap-highlight-color: transparent;
+        white-space: nowrap;
+        padding: 0.4rem 0.8rem;
+        font-weight: 500;
+        word-spacing: 0.1rem;
+        text-align: center;
+        -webkit-transition: color 0.3s;
+        -o-transition: color 0.3s;
+        transition: color 0.3s;
+        text-transform: capitalize;
+        height: 100%;
+    }
+    @media (hover: hover){
+        :host(.active) .tab{
+            opacity: 1;
+        }
+        .tab{
+            opacity: 0.7
+        }
+        .tab:hover{
+            opacity: 1
+        }
+    }
+</style>
+<div part="tab" class="tab">
+<slot></slot>
+</div>
+`;
+
+customElements.define('sm-tab', class extends HTMLElement {
+    constructor() {
+        super()
+        this.shadow = this.attachShadow({
+            mode: 'open'
+        }).append(smTab.content.cloneNode(true))
+    }
+})
+
+// tab-panels
+
+const smTabPanels = document.createElement('template')
+smTabPanels.innerHTML = `
+<style>
+*{
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+} 
+:host{
+    width: 100%;
+}
+.panel-container{
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    overflow: hidden auto;
+}
+slot::slotted(.hide-completely){
+    display: none;
+}
+@media (hover: none){
+    .tab-header::-webkit-scrollbar-track {
+        -webkit-box-shadow: none !important;
+        background-color: transparent !important;
+    }
+    .tab-header::-webkit-scrollbar {
+        height: 0;
+        background-color: transparent;
+    }
+}         
+</style>
+<div part="panel-container" class="panel-container">
+    <slot>Nothing to see here.</slot>
+</div>
+`;
+
+customElements.define('sm-tab-panels', class extends HTMLElement {
+    constructor() {
+        super()
+        this.attachShadow({
+            mode: 'open'
+        }).append(smTabPanels.content.cloneNode(true))
+        this.panelSlot = this.shadowRoot.querySelector('slot');
+    }
+    connectedCallback() {
+
+        //animations
+        let flyInLeft = [{
+                    opacity: 0,
+                    transform: 'translateX(-1rem)'
+                },
+                {
+                    opacity: 1,
+                    transform: 'none'
+                }
+            ],
+            flyInRight = [{
+                    opacity: 0,
+                    transform: 'translateX(1rem)'
+                },
+                {
+                    opacity: 1,
+                    transform: 'none'
+                }
+            ],
+            flyOutLeft = [{
+                    opacity: 1,
+                    transform: 'none'
+                },
+                {
+                    opacity: 0,
+                    transform: 'translateX(-1rem)'
+                }
+            ],
+            flyOutRight = [{
+                    opacity: 1,
+                    transform: 'none'
+                },
+                {
+                    opacity: 0,
+                    transform: 'translateX(1rem)'
+                }
+            ],
+            animationOptions = {
+                duration: 300,
+                fill: 'forwards',
+                easing: 'ease'
+            }
+        this.prevPanel
+        this.allPanels
+        this.previousRank
+
+        this.panelSlot.addEventListener('slotchange', () => {
+            this.panelSlot.assignedElements().forEach((panel) => {
+                panel.classList.add('hide-completely')
+            })
+        })
+        this.allPanels = this.panelSlot.assignedElements()
+        this._targetBodyFlyRight = (targetBody) => {
+            targetBody.classList.remove('hide-completely')
+            targetBody.animate(flyInRight, animationOptions)
+        }
+        this._targetBodyFlyLeft = (targetBody) => {
+            targetBody.classList.remove('hide-completely')
+            targetBody.animate(flyInLeft, animationOptions)
+        }
+        document.addEventListener('switchtab', e => {
+            if (e.detail.target !== this.id)
+                return
+
+            if (this.prevPanel) {
+                let targetBody = this.allPanels[e.detail.rank],
+                    currentBody = this.prevPanel;
+                if (this.previousRank < e.detail.rank) {
+                    if (currentBody && !targetBody)
+                        currentBody.animate(flyOutLeft, animationOptions).onfinish = () => {
+                            currentBody.classList.add('hide-completely')
+                        }
+                    else if (targetBody && !currentBody) {
+                        this._targetBodyFlyRight(targetBody)
+                    } else if (currentBody && targetBody) {
+                        currentBody.animate(flyOutLeft, animationOptions).onfinish = () => {
+                            currentBody.classList.add('hide-completely')
+                            this._targetBodyFlyRight(targetBody)
+                        }
+                    }
+                } else {
+                    if (currentBody && !targetBody)
+                        currentBody.animate(flyOutRight, animationOptions).onfinish = () => {
+                            currentBody.classList.add('hide-completely')
+                        }
+                    else if (targetBody && !currentBody) {
+                        this._targetBodyFlyLeft(targetBody)
+                    } else if (currentBody && targetBody) {
+                        currentBody.animate(flyOutRight, animationOptions).onfinish = () => {
+                            currentBody.classList.add('hide-completely')
+                            this._targetBodyFlyLeft(targetBody)
+                        }
+                    }
+                }
+            } else {
+                this.allPanels[e.detail.rank].classList.remove('hide-completely')
+            }
+            this.previousRank = e.detail.rank
+            this.prevPanel = this.allPanels[e.detail.rank];
+        })
+    }
+})
diff --git a/Standard UI Components/dist/tabs.min.js b/Standard UI Components/dist/tabs.min.js
new file mode 100644
index 0000000..9a4f039
--- /dev/null
+++ b/Standard UI Components/dist/tabs.min.js	
@@ -0,0 +1 @@
+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    }\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: 0.3rem;\n    }\n    :host(.round) .indicator{\n        border-radius: 3rem;\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(--foreground-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.indicator=this.shadowRoot.querySelector(".indicator"),this.tabSlot=this.shadowRoot.querySelector("slot"),this.tabHeader=this.shadowRoot.querySelector(".tab-header")}sendDetails(t){this.dispatchEvent(new CustomEvent("switchtab",{bubbles:!0,detail:{target:this.target,rank:parseInt(t.getAttribute("rank"))}}))}moveIndiactor(t){this.indicator.setAttribute("style",`width: ${t.width}px; transform: translateX(${t.left-this.tabHeader.getBoundingClientRect().left+this.tabHeader.scrollLeft}px)`)}connectedCallback(){if(!this.hasAttribute("target")||""===this.getAttribute("target").value)return;this.prevTab,this.allTabs,this.activeTab,this.isTab=!1,this.target=this.getAttribute("target"),this.hasAttribute("variant")&&"tab"===this.getAttribute("variant")&&(this.isTab=!0),this.tabSlot.addEventListener("slotchange",()=>{this.tabSlot.assignedElements().forEach((t,e)=>{t.setAttribute("rank",e)})}),this.allTabs=this.tabSlot.assignedElements(),this.tabSlot.addEventListener("click",t=>{t.target!==this.prevTab&&t.target.closest("sm-tab")&&(this.prevTab&&this.prevTab.classList.remove("active"),t.target.classList.add("active"),t.target.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"}),this.moveIndiactor(t.target.getBoundingClientRect()),this.sendDetails(t.target),this.prevTab=t.target,this.activeTab=t.target)});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.sendDetails(this.allTabs[0]),this.prevTab=this.tabSlot.assignedElements()[0],this.activeTab=this.prevTab}})},{threshold:1});e.observe(this)}});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 auto;\n}\nslot::slotted(.hide-completely){\n    display: none;\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="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.panelSlot=this.shadowRoot.querySelector("slot")}connectedCallback(){let t=[{opacity:0,transform:"translateX(-1rem)"},{opacity:1,transform:"none"}],e=[{opacity:0,transform:"translateX(1rem)"},{opacity:1,transform:"none"}],n=[{opacity:1,transform:"none"},{opacity:0,transform:"translateX(-1rem)"}],a=[{opacity:1,transform:"none"},{opacity:0,transform:"translateX(1rem)"}],i={duration:300,fill:"forwards",easing:"ease"};this.prevPanel,this.allPanels,this.previousRank,this.panelSlot.addEventListener("slotchange",()=>{this.panelSlot.assignedElements().forEach(t=>{t.classList.add("hide-completely")})}),this.allPanels=this.panelSlot.assignedElements(),this._targetBodyFlyRight=(t=>{t.classList.remove("hide-completely"),t.animate(e,i)}),this._targetBodyFlyLeft=(e=>{e.classList.remove("hide-completely"),e.animate(t,i)}),document.addEventListener("switchtab",t=>{if(t.detail.target===this.id){if(this.prevPanel){let e=this.allPanels[t.detail.rank],s=this.prevPanel;this.previousRank<t.detail.rank?s&&!e?s.animate(n,i).onfinish=(()=>{s.classList.add("hide-completely")}):e&&!s?this._targetBodyFlyRight(e):s&&e&&(s.animate(n,i).onfinish=(()=>{s.classList.add("hide-completely"),this._targetBodyFlyRight(e)})):s&&!e?s.animate(a,i).onfinish=(()=>{s.classList.add("hide-completely")}):e&&!s?this._targetBodyFlyLeft(e):s&&e&&(s.animate(a,i).onfinish=(()=>{s.classList.add("hide-completely"),this._targetBodyFlyLeft(e)}))}else this.allPanels[t.detail.rank].classList.remove("hide-completely");this.previousRank=t.detail.rank,this.prevPanel=this.allPanels[t.detail.rank]}})}});
\ No newline at end of file
diff --git a/Standard UI Components/dist/tags-input.js b/Standard UI Components/dist/tags-input.js
new file mode 100644
index 0000000..d8f6b88
--- /dev/null
+++ b/Standard UI Components/dist/tags-input.js	
@@ -0,0 +1,207 @@
+const tagsInput = document.createElement('template')
+tagsInput.innerHTML = `
+  <style>
+  *{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+  }
+  :host{
+    --border-radius: 0.3rem;
+    }
+.hide{
+    display: none !important;
+}
+.tags-wrapper{
+    position: relative;
+    display: flex;
+    cursor: text;
+    flex-wrap: wrap;
+    justify-items: flex-start;
+    align-items: center;
+    padding: 0.5rem 0.5rem 0 0.5rem;
+    border-radius: var(--border-radius);
+    background-color: rgba(var(--text-color), 0.06);
+  }
+  .tags-wrapper:focus-within{
+    box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;
+  }
+  
+  .tag {
+    cursor: pointer;
+    user-select: none;
+    align-items: center;
+    display: inline-flex;
+    border-radius: 0.3rem;
+    padding: 0.3rem 0.5rem;
+    margin: 0 0.5rem 0.5rem 0;
+    background-color: rgba(var(--text-color), 0.06);
+  }
+  
+  .icon {
+    height: 1.2rem;
+    width: 1.2rem;
+    margin-left: 0.3rem;
+    fill: rgba(var(--text-color), 0.8);
+  }
+  
+  input,
+  input:focus {
+    outline: none;
+    border: none;
+  }
+  
+  input {
+    display: inline-flex;
+    width: auto;
+    color: inherit;
+    max-width: inherit;
+    font-size: inherit;
+    font-family: inherit;
+    padding: 0.4rem 0.5rem;
+    margin: 0 0.5rem 0.5rem 0;
+    background-color: transparent;
+  }
+  .placeholder{
+      position: absolute;
+      padding: 0 0.5rem;
+      top: 50%;
+      font-weight: 500;
+      transform: translateY(-50%);
+      color: rgba(var(--text-color), 0.6);
+  }
+  </style>
+  <div class="tags-wrapper">
+    <input type="text" size="3"/>
+    <p class="placeholder"></p>
+  </div>
+`
+
+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.observeList = ['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()
+	}
+	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)
+	}
+})
\ No newline at end of file
diff --git a/Standard UI Components/dist/tags-input.min.js b/Standard UI Components/dist/tags-input.min.js
new file mode 100644
index 0000000..8b5b3b5
--- /dev/null
+++ b/Standard UI Components/dist/tags-input.min.js	
@@ -0,0 +1 @@
+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    --border-radius: 0.3rem;\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-color: rgba(var(--text-color), 0.06);\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.observeList=["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()}reset(){for(this.input.value="",this.tags.clear();this.input.previousElementSibling;)this.input.previousElementSibling.remove()}handleInput(e){const t=e.target.value.trim().length;e.target.setAttribute("size",t||"3"),t?this.placeholder.classList.add("hide"):t||this.tags.size||this.placeholder.classList.remove("hide")}handleKeydown(e){if(","!==e.key&&"/"!==e.key||e.preventDefault(),""!==e.target.value.trim()){if("Enter"===e.key||","===e.key||"/"===e.key||"Space"===e.code){const t=e.target.value.trim();if(this.tags.has(t))this.tagsWrapper.querySelector(`[data-value="${t}"]`).animate([{backgroundColor:"initial"},{backgroundColor:"var(--accent-color)"},{backgroundColor:"initial"}],{duration:300,easing:"ease"});else{const e=document.createElement("span");e.dataset.value=t,e.className="tag",e.innerHTML=`\n                        <span class="tag-text">${t}</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(e),this.tags.add(t)}if(e.target.value="",e.target.setAttribute("size","3"),this.limit&&this.limit<this.tags.size+1)return void(this.input.readOnly=!0)}}else"Backspace"===e.key&&this.input.previousElementSibling&&this.removeTag(this.input.previousElementSibling),this.limit&&this.limit>this.tags.size&&(this.input.readOnly=!1)}handleClick(e){e.target.closest(".tag")?this.removeTag(e.target.closest(".tag")):this.input.focus()}removeTag(e){this.tags.delete(e.dataset.value),e.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(e,t,n){"placeholder"===e&&(this.placeholder.textContent=n),"limit"===e&&(this.limit=parseInt(n))}disconnectedCallback(){this.input.removeEventListener("input",this.handleInput),this.input.removeEventListener("keydown",this.handleKeydown),this.tagsWrapper.removeEventListener("click",this.handleClick)}});
\ No newline at end of file
diff --git a/Standard UI Components/dist/textarea.js b/Standard UI Components/dist/textarea.js
new file mode 100644
index 0000000..123d7b9
--- /dev/null
+++ b/Standard UI Components/dist/textarea.js	
@@ -0,0 +1,188 @@
+const smTextarea = document.createElement('template')
+smTextarea.innerHTML = `
+<style>
+*,
+*::before,
+*::after { 
+    padding: 0;
+    margin: 0;
+    -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+} 
+::-moz-focus-inner{
+    border: none;
+}
+.hide{
+    opacity: 0 !important;
+}
+:host{
+    display: grid;
+    --border-radius: 0.3rem;
+    --background: rgba(var(--text-color), 0.06);
+    --padding-right: initial;
+    --padding-left: initial;
+    --max-height: 8rem;
+}
+:host(.outlined) .textarea {
+    box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;
+    background: rgba(var(--foreground-color), 1);
+}
+.textarea{
+    display: grid;
+    position: relative;
+    cursor: text;
+    min-width: 0;
+    text-align: left;
+    overflow: hidden auto;
+    grid-template-columns: 1fr;
+    align-items: stretch;
+    max-height: var(--max-height);
+    background: var(--background);
+    border-radius: var(--border-radius);
+    padding-left: var(--padding-left);
+    padding-right: var(--padding-right);
+}
+.textarea::after,
+textarea{
+    padding: 0.7rem 1rem;
+    width: 100%;
+    min-width: 1em;
+    font: inherit;
+    color: inherit;
+    resize: none;
+    grid-area: 2/1;
+    justify-self: stretch;
+    background: none;
+    appearance: none;
+    border: none;
+    outline: none;
+    line-height: 1.5;
+    overflow: hidden;
+}
+.textarea::after{
+    content: attr(data-value) ' ';
+    visibility: hidden;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    hyphens: auto;
+}
+.readonly{
+    pointer-events: none;
+}
+.textarea:focus-within:not(.readonly){
+    box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
+}
+.disabled{
+    pointer-events: none;
+    opacity: 0.6;
+}
+.placeholder{
+    position: absolute;
+    margin: 0.7rem 1rem;
+    opacity: .7;
+    font-weight: 400;
+    font-size: 1rem;
+    line-height: 1.5;
+    pointer-events: none;
+    user-select: none;
+}
+@media (any-hover: hover){
+    ::-webkit-scrollbar{
+        width: 0.5rem;
+        height: 0.5rem;
+    }
+    
+    ::-webkit-scrollbar-thumb{
+        background: rgba(var(--text-color), 0.3);
+        border-radius: 1rem;
+        &:hover{
+            background: rgba(var(--text-color), 0.5);
+        }
+    }
+}
+</style>
+<label class="textarea" part="textarea">
+    <span class="placeholder"></span>
+    <textarea rows="1"></textarea>
+</label>
+`;
+customElements.define('sm-textarea',
+    class extends HTMLElement {
+        constructor() {
+            super()
+            this.attachShadow({
+                mode: 'open'
+            }).append(smTextarea.content.cloneNode(true))
+
+            this.textarea = this.shadowRoot.querySelector('textarea')
+            this.textareaBox = this.shadowRoot.querySelector('.textarea')
+            this.placeholder = this.shadowRoot.querySelector('.placeholder')
+            this.observeList = ['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 ['value', 'placeholder', 'required', 'readonly', 'rows', 'minlength', 'maxlength']
+        }
+        get value() {
+            return this.textarea.value
+        }
+        set value(val) {
+            this.setAttribute('value', val)
+            this.fireEvent()
+        }
+        get isValid() {
+            return this.textarea.checkValidity()
+        }
+        reset(){
+            this.setAttribute('value', '')
+        }
+        focusIn(){
+            this.textarea.focus()
+        }
+        fireEvent(){
+            let event = new Event('input', {
+                bubbles: true,
+                cancelable: true,
+                composed: true
+            });
+            this.dispatchEvent(event);
+        }
+        checkInput(){
+            if (!this.hasAttribute('placeholder') || this.getAttribute('placeholder') === '')
+                return;
+            if (this.textarea.value !== '') {
+                this.placeholder.classList.add('hide')
+            } else {
+                this.placeholder.classList.remove('hide')
+            }
+        }
+        connectedCallback() {
+            this.textarea.addEventListener('input', e => {
+                this.textareaBox.dataset.value = this.textarea.value
+                this.checkInput()
+            })
+        }
+        attributeChangedCallback(name, oldValue, newValue) {
+            if (this.observeList.includes(name)) {
+                if (this.hasAttribute(name)) {
+                    this.textarea.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : '')
+                }
+                else {
+                    this.input.removeAttribute(name)
+                }
+            }
+            else if (name === 'placeholder') {
+                this.placeholder.textContent = this.getAttribute('placeholder')
+            }
+            else if (name === 'value') {
+                this.textarea.value = newValue;
+                this.textareaBox.dataset.value = newValue
+                this.checkInput()
+            }
+        }
+    })
\ No newline at end of file
diff --git a/Standard UI Components/dist/textarea.min.js b/Standard UI Components/dist/textarea.min.js
new file mode 100644
index 0000000..fdc92b7
--- /dev/null
+++ b/Standard UI Components/dist/textarea.min.js	
@@ -0,0 +1 @@
+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    --border-radius: 0.3rem;\n    --background: rgba(var(--text-color), 0.06);\n    --padding-right: initial;\n    --padding-left: initial;\n    --max-height: 8rem;\n}\n:host(.outlined) .textarea {\n    box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;\n    background: rgba(var(--foreground-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-left: var(--padding-left);\n    padding-right: var(--padding-right);\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.disabled{\n    pointer-events: none;\n    opacity: 0.6;\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@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.observeList=["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["value","placeholder","required","readonly","rows","minlength","maxlength"]}get value(){return this.textarea.value}set value(e){this.setAttribute("value",e),this.fireEvent()}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.observeList.includes(e)?this.hasAttribute(e)?this.textarea.setAttribute(e,this.getAttribute(e)?this.getAttribute(e):""):this.input.removeAttribute(e):"placeholder"===e?this.placeholder.textContent=this.getAttribute("placeholder"):"value"===e&&(this.textarea.value=n,this.textareaBox.dataset.value=n,this.checkInput())}});
\ No newline at end of file
diff --git a/Standard UI Components/index.html b/Standard UI Components/index.html
index bd20e77..5f2d415 100644
--- a/Standard UI Components/index.html	
+++ b/Standard UI Components/index.html	
@@ -5,143 +5,252 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>SM Components</title>
-    <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="css/main.min.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&family=Roboto+Mono&family=Roboto:wght@400;500;700&display=swap"
+        rel="stylesheet">
 </head>
 
-<body>
-    <sm-notifications id="notify"></sm-notifications>
-    <section>
-        <div class="background-box"></div>
-        <h1>SM Web Components</h1>
-        <h4>UI components based on custom elements API.</h4>
-        <div>
-            <sm-button id="get_started_btn" variant="primary">Get started</sm-button>
-        </div>
-    </section>
+<body class="hide-completely">
+    <sm-notifications id="notification_drawer"></sm-notifications>
+    <audio id="notification_sound">
+        <source src="https://rmservices.duckdns.org/files/notification-sound.mp3" type="audio/mpeg">
+        <source src="https://rmservices.duckdns.org/files/notification-sound.ogg" type="audio/ogg">
+    </audio>
     <main>
-        <div id="menu" class="left">
-            <h3>Getting Started</h3>
+        <header id="main_header" class="flex align-center space-between">
+            <button id="side_nav_button" class="interact" onclick="sideNav()">
+                <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="M16 18v2H5v-2h11zm5-7v2H3v-2h18zm-2-7v2H8V4h11z" />
+                </svg>
+            </button>
+            <h4>SM Components</h4>
+            <label class="theme-switcher" title="Change theme">
+                <input id="theme_switcher" class="theme-switcher__checkbox" type="checkbox"
+                    aria-label="Dark mode toggle">
+                <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 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>
+            </label>
+        </header>
+        <nav id="side_nav">
+            <h4>Getting Started</h4>
             <ul class="list">
-                <li id="overview_entry" class="item active" data-target="overview_page">Overview</li>
-                <li id="download_entry" class="item" data-target="download_page">Quick start</li>
+                <li>
+                    <a href="#overview_page" class="list__item list__item--active interact">
+                        Overview
+                    </a>
+                </li>
+                <li>
+                    <a href="#quick_start_page" class="list__item interact">
+                        Quick start
+                    </a>
+                </li>
             </ul>
-            <h3>Components</h3>
-            <ul class="list">
-                <li id="button_entry" class="item" data-target="button_page">button</li>
-                <li class="item" data-target="carousel_page">carousel</li>
-                <li class="item" data-target="checkbox_page">checkbox</li>
-                <li class="item" data-target="input_page">input</li>
-                <li class="item" data-target="notification_page">notifications</li>
-                <li class="item" data-target="popup_page">popup</li>
-                <li class="item" data-target="switch_page">switch</li>
-                <li class="item" data-target="select_page">select</li>
-                <li class="item" data-target="strip_select_page">strip-select</li>
-                <li class="item" data-target="tabs_page">tabs</li>
-            </ul>
-        </div>
+            <h4>Components</h4>
+            <ul id="components_list" class="list"></ul>
+        </nav>
+        <section id="backdrop" class="hide-completely" onclick="sideNav(false)"></section>
         <div class="right language-html">
-            <div id="overview_page" class="page">
-                <h1 class="headline">Overview</h1>
-                <p class="description">
-                    These components are based on HTML5 custom elements API.<br> It uses 'sm' namespace for all components.
-                    So every component tag starts with '<strong>sm-</strong>'.
-                </p>
-                <p>
-                    They can replace some older UI elements like <code>&lt;select&gt;</code> <code>&lt;input&gt;</code> <code>&lt;checkbox&gt;</code> <code>&lt;button&gt;</code>
-                    But also more modern additions like <strong>popups(modals), tabs and many more.</strong> 
-                </p>
-                <p>
-                    Some of the components have some cool tricks under their sleeves like <strong>custom events and variantions</strong>.
-                    They allow developers to access more information about component or simply react to whatever state change happen to them.
-                    We will go more in-depth about all the variantions and customs events related to each event as we go further.
-                </p>
-            </div>
+            <section id="overview_page" class="page">
+                <div>
+                    <h5 class="color-0-8 weight-500">Total components</h5>
+                    <h1 id="total_components_count" class="h1"></h1>
+                </div>
+                <div>
+                    <h1 class="page__title">Overview</h1>
+                    <p class="description">
+                        These components are based on HTML5 custom elements API. This is an attempt to unify UI
+                        development
+                        patterns and
+                        elements that are used multiple times throughout any general web app.It uses 'sm' namespace for
+                        all
+                        components. So every
+                        component tag starts with <strong>'sm-'</strong>
+                    </p>
+                    <p>
+                        They can replace some older UI elements like <code>&lt;select&gt;</code>
+                        <code>&lt;input&gt;</code>
+                        <code>&lt;checkbox&gt;</code> <code>&lt;button&gt;</code>
+                        But also more modern additions like <strong>popups(modals), tabs and many more.</strong>
+                    </p>
+                    <p>
+                        Some of the components have some cool tricks under their sleeves like <strong>custom events and
+                            variantions</strong>.
+                        They allow developers to access more information about component or simply react to whatever
+                        state
+                        change happen to them.
+                        We will go more in-depth about all the variantions and customs events related to each event as
+                        we go
+                        further.
+                    </p>
+                </div>
+            </section>
 
-            <div id="download_page" class="page hide-completely">
-                <h1 class="headline">Quick Start</h1>
+            <section id="quick_start_page" class="page hide-completely">
+                <h1 class="page__title">Quick Start</h1>
                 <p class="description">
-                    To start using SM Components
+                    To start using SM Components, Select components you want to download.
                 </p>
-                <ol type="1">
-                    <li>Download <a href="https://github.com/sairaj-mote/components"> components.js from Github.</a></li>
-                    <li>Add file to bottom of your HTML file just before closing <code>&lt;/body&gt;</code> tag with <code>&lt;script&gt;</code>tag.</li>
-                </ol>
-                <p>Now you are ready to use them in your HTML markup as any other standard HMTL tags 😄.</p>
-            </div>
+                <div class="grid grid-3 gap-0-5">
+                    <sm-checkbox id="get_minified" checked>
+                        <span class="comp-checkbox__title">
+                            Get minified
+                        </span>
+                    </sm-checkbox>
+                    <sm-button onclick="selectAll()">Select all</sm-button>
+                    <sm-button onclick="clearAll()">Clear all</sm-button>
+                </div>
+                <div id="components_selection_list"></div>
+                <div class="flex align-center space-between">
+                    <sm-button onclick="copySourceCode()">Copy source code</sm-button>
+                    <sm-button variant="primary" onclick="downloadComponents()">Download JS file</sm-button>
+                </div>
+            </section>
 
-            <div id="button_page" class="page hide-completely">
-                <h1 class="headline">Buttons</h1>
+            <section id="button_page" class="page hide-completely">
+                <h1 class="page__title">Buttons</h1>
                 <p class="description">
-                    Buttons are used in various basic UI interactions to perform an action.  
+                    Buttons are used in various basic UI interactions to perform an action.
                 </p>
-                <sm-button variant="primary">primary</sm-button>
                 <sm-button>default</sm-button>
+                <sm-button variant="primary">primary</sm-button>
                 <sm-button variant="outlined">outlined</sm-button>
                 <sm-button variant="no-outline">no-outline</sm-button>
-                <sm-button variant="primary" disabled="true">disabled</sm-button>
-                <pre><code class="extend">
-&lt;sm-button variant="primary"&gt;primary&lt;/sm-button&gt;
-&lt;sm-button&gt;default&lt;/sm-button&gt;
-&lt;sm-button variant="outlined"&gt;outlined&lt;/sm-button&gt;
-&lt;sm-button variant="no-outline"&gt;no-outline&lt;/sm-button&gt;
-&lt;sm-button variant="primary" disabled="true"&gt;disabled&lt;/sm-button&gt;
-                </code></pre>
-            </div>
+                <sm-button variant="primary" disabled>disabled</sm-button>
+                <pre>
+                    <code class="prettyprint">
+                        &lt;sm-button&gt;default&lt;/sm-button&gt;
+                        &lt;sm-button variant="primary"&gt;primary&lt;/sm-button&gt;
+                        &lt;sm-button variant="outlined"&gt;outlined&lt;/sm-button&gt;
+                        &lt;sm-button variant="no-outline"&gt;no-outline&lt;/sm-button&gt;
+                        &lt;sm-button variant="primary" disabled&gt;disabled&lt;/sm-button&gt;
+                    </code>
+                </pre>
+            </section>
 
-            <div id="carousel_page" class="page hide-completely">
-                <h1 class="headline">Carousel</h1>
+            <section id="carousel_page" class="page hide-completely">
+                <h1 class="page__title">Carousel</h1>
                 <p class="description">
                     To start using SM Components
                 </p>
-                <sm-carousel>
-                    <img src="resources/background2.jpg" alt="" class="card">
-                    <img src="resources/background3.jpg" alt="" class="card">
-                    <img src="resources/background4.jpg" alt="" class="card">
+                <sm-carousel align-items="start" indicator>
+                    <div class="card">
+                        <h3>Title</h3>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio.</p>
+                    </div>
+                    <div class="card">
+                        <h3>Title</h3>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio.</p>
+                    </div>
+                    <div class="card">
+                        <h3>Title</h3>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio.</p>
+                    </div>
+                    <div class="card">
+                        <h3>Title</h3>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio.</p>
+                    </div>
                 </sm-carousel>
-            </div>
+            </section>
 
-            <div id="checkbox_page" class="page hide-completely">
-                <h1 class="headline">Checkbox</h1>
+            <section id="checkbox_page" class="page hide-completely">
+                <h1 class="page__title">Checkbox</h1>
                 <p class="description">
                     To start using SM Components
                 </p>
                 <label>
-                <sm-checkbox id="checkbox">Default</sm-checkbox>
-                <sm-checkbox id="checkbox" checked="true">Checked</sm-checkbox>
-                <sm-checkbox id="checkbox" disabled="true">Disabled</sm-checkbox>
-                <sm-checkbox id="checkbox" checked="true" disabled="true">Checked Disabled</sm-checkbox>
-            </label>
-            </div>
+                    <sm-checkbox id="checkbox">Default</sm-checkbox>
+                    <sm-checkbox id="checkbox" checked>Checked</sm-checkbox>
+                    <sm-checkbox id="checkbox" disabled>Disabled</sm-checkbox>
+                    <sm-checkbox id="checkbox" checked disabled>Checked Disabled</sm-checkbox>
+                </label>
+            </section>
 
-            <div id="input_page" class="page hide-completely">
-                <h1 class="headline">Input</h1>
+            <section id="copy_page" class="page hide-completely">
+                <h1 class="page__title">Copy</h1>
                 <p class="description">
                     To start using SM Components
                 </p>
-                <sm-input placeholder="something" type="email" helper-text="please enter correct email" animate></sm-input>
-            </div>
+                <sm-copy value="copy this message"></sm-copy>
+            </section>
 
-            <div id="notification_page" class="page hide-completely">
-                <h1 class="headline">Notifications</h1>
+            <section id="file_input_page" class="page hide-completely">
+                <h1 class="page__title">File input</h1>
+                <p class="description">
+                    To start using SM Components
+                </p>
+                <file-input></file-input>
+                <p id="insert_text"></p>
+            </section>
+            <section id="form_page" class="page hide-completely">
+                <h1 class="page__title">Form</h1>
+                <p class="description">
+                    To start using SM Components
+                </p>
+                <sm-form>
+                    <sm-input placeholder="Enter name" required animate></sm-input>
+                    <sm-button variant="primary" disabled>Submit</sm-button>
+                </sm-form>
+                <p id="insert_text"></p>
+            </section>
+            <section id="input_page" class="page hide-completely">
+                <h1 class="page__title">Input</h1>
+                <p class="description">
+                    To start using SM Components
+                </p>
+                <sm-input id="my_input" placeholder="something" type="email" helper-text="please enter correct email"
+                    animate></sm-input>
+                <p id="insert_text"></p>
+            </section>
+
+            <section id="menu_page" class="page hide-completely">
+                <h1 class="page__title">Menu</h1>
+                <p class="description">
+                    To start using SM Components
+                </p>
+                <sm-menu id="my_menu">
+                    <sm-menu-option>first option</sm-menu-option>
+                    <sm-menu-option>second option</sm-menu-option>
+                    <sm-menu-option>third option</sm-menu-option>
+                </sm-menu>
+                <p id="insert_text"></p>
+            </section>
+
+            <section id="notifications_page" class="page hide-completely">
+                <h1 class="page__title">Notifications</h1>
                 <p class="description">
                     To start using SM Components
                 </p>
                 <h4>Example</h4>
-                
+
                 <sm-button
-                    onclick="document.getElementById('notify').push('heading', 'Lorem ipsum dolor, sit amet consectetur adipisicing elit.Lorem ipsum dolor, sit amet consectetur adipisicing elit.', 'success')">
+                    onclick="notify('Lorem ipsum dolor, consectetur adipisicing elit.')">
                     push success notification</sm-button>
-                <sm-button onclick="document.getElementById('notify').push('heading', 'Lorem ipsum dolor, sit amet.', 'error', true)">
+                <sm-button onclick="notify('Lorem ipsum dolor, sit amet.')">
                     push error notification</sm-button>
                 <sm-button
-                    onclick="document.getElementById('notify').push('heading', 'Lorem ipsum dolor, sit amet consectetur adipisicing elit.', '', true)">
-                    push notification</sm-button>
-            </div>
+                    onclick="notify('Lorem ipsum dolor, sit amet consectetur adipisicing elit.', '', {pinned: true})">
+                    push pinned notification</sm-button>
+            </section>
 
-            <div id="popup_page" class="page hide-completely">
-                <h1 class="headline">Popup(Modal)</h1>
+            <section id="popup_page" class="page hide-completely">
+                <h1 class="page__title">Popup / dialog</h1>
                 <p class="description">
-                    Popups are used to show addition UI elements that you may want to hide at first and reveal them when needed.
+                    Popups are used to show addition UI elements that you may want to hide at first and reveal them when
+                    needed.
                 </p>
                 <sm-popup id="popup" heading="something">
                     idhfioushdfiuh<br>
@@ -154,107 +263,687 @@
                     idhfioushdfiuh<br>
                     idhfioushdfiuh<br>
                 </sm-popup>
-                
-                <sm-button variant="primary" onclick="document.getElementById('popup').show()">show popup</sm-button>
-            </div>
 
-            <div id="switch_page" class="page hide-completely">
-                <h1 class="headline">Switch</h1>
+                <sm-button variant="primary" onclick="getRef('popup').show()">show popup</sm-button>
+            </section>
+
+            <section id="radio_page" class="page hide-completely">
+                <h1 class="page__title">Radio</h1>
+                <p class="description">
+                    Popups are used to show addition UI elements that you may want to hide at first and reveal them when
+                    needed.
+                </p>
+                <sm-radio name="abc" value="1" checked></sm-radio>
+                <sm-radio name="abc" value="2"></sm-radio>
+                <sm-radio name="abc" value="3"></sm-radio>
+                <sm-radio name="abc" value="4"></sm-radio>
+            </section>
+
+            <section id="switch_page" class="page hide-completely">
+                <h1 class="page__title">Switch</h1>
                 <p class="description">
                     To start using SM Components
                 </p>
                 <sm-switch id="switch"></sm-switch>
-                <sm-switch id="switch" checked="true"></sm-switch>
-                <sm-switch id="switch" disabled="true"></sm-switch>
-                <sm-switch id="switch"checked="true" disabled="true"></sm-switch>
-            </div>
+                <sm-switch id="switch" checked></sm-switch>
+                <sm-switch id="switch" disabled></sm-switch>
+            </section>
 
-            <div id="select_page" class="page hide-completely">
-                <h1 class="headline">Select</h1>
+            <section id="select_page" class="page hide-completely">
+                <h1 class="page__title">Select</h1>
                 <p>
-                    <code>&lt;sm-select&gt;</code> is very similar to starndatd HTML5 select and it's markup stucture is also identical.</p>
+                    <code>&lt;sm-select&gt;</code> is very similar to starndatd HTML5 select and it's markup stucture is
+                    also identical.
+                </p>
                 <sm-select>
                     <sm-option value="1">option1</sm-option>
                     <sm-option value="2">option2 something</sm-option>
                     <sm-option value="3">option3</sm-option>
                 </sm-select>
-            </div>
+            </section>
 
-            <div id="strip_select_page" class="page hide-completely">
-                <h1 class="headline">Strip-select</h1>
+            <section id="strip_select_page" class="page hide-completely">
+                <h1 class="page__title">Strip select</h1>
                 <p class="description">
                     To start using SM Components
                 </p>
-                <sm-strip-select>
-                    <sm-strip-option value="something">option1</sm-strip-option>
-                    <sm-strip-option>option1</sm-strip-option>
-                    <sm-strip-option>option1</sm-strip-option>
-                    <sm-strip-option>option1</sm-strip-option>
-                    <sm-strip-option>option1</sm-strip-option>
-                    <sm-strip-option>option1</sm-strip-option>
-                    <sm-strip-option>option1</sm-strip-option>
-                </sm-strip-select>
-            </div>
+                <strip-select id="browse_category_selector">
+                    <strip-option value="movie" selected>Movie</strip-option>
+                    <strip-option value="tv series">TV series</strip-option>
+                    <strip-option value="video">Video</strip-option>
+                    <strip-option value="music">Music</strip-option>
+                </strip-select>
+            </section>
 
-            <div id="tabs_page" class="page hide-completely">
-                <h1 class="headline">Tabs</h1>
+            <section id="tabs_page" class="page hide-completely">
+                <h1 class="page__title">Tabs</h1>
                 <p class="description">
                     To start using SM Components
                 </p>
-                <sm-tabs>
-                    <sm-tab slot="tab">inbox</sm-tab>
-                    <sm-panel slot="panel">
+                <sm-tab-header variant="tab" target="tab1">
+                    <sm-tab>inbox</sm-tab>
+                    <sm-tab>sent</sm-tab>
+                    <sm-tab>draft</sm-tab>
+                    <sm-tab>spam</sm-tab>
+                </sm-tab-header>
+                <sm-tab-panels id="tab1">
+                    <sm-panel>
                         gjdhnsrfijbgn<br>bdfjnbj
                     </sm-panel>
-                    <sm-tab slot="tab">sent</sm-tab>
-                    <sm-panel slot="panel">
+                    <sm-panel>
                         jadifjoaijdiajdo
                         dosfighjoi<br>
                         flkmgklfmzkl<br>
                         hbdsfhb
                     </sm-panel>
-                    <sm-tab slot="tab">draft</sm-tab>
-                    <sm-panel slot="panel">
-                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere neque incidunt aut laudantium, quam
+                    <sm-panel>
+                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere neque incidunt aut laudantium,
+                        quam
                         id,
                         molestiae vero blanditiis nisi alias in magnam autem quasi cumque eveniet qui cupiditate nam
                         corrupti?
                     </sm-panel>
-                    <sm-tab slot="tab">spam</sm-tab>
-                    <sm-panel slot="panel">
+                    <sm-panel>
                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis fuga ipsam, explicabo, eius
                         accusamus
-                        consectetur ex sunt soluta voluptatem iure totam nulla expedita suscipit minus molestiae similique
+                        consectetur ex sunt soluta voluptatem iure totam nulla expedita suscipit minus molestiae
+                        similique
                         odio optio
                         quibusdam.
                     </sm-panel>
-                </sm-tabs>
-            </div>            
+                </sm-tab-panels>
+            </section>
+            <section id="tags_input_page" class="page hide-completely">
+                <h1 class="page__title">Tags input</h1>
+                <p class="description">
+                    To start using SM Components
+                </p>
+                <tags-input placeholder="Add tags..."></tags-input>
+            </section>
+            <section id="textarea_page" class="page hide-completely">
+                <h1 class="page__title">Textarea</h1>
+                <p class="description">
+                    To start using SM Components
+                </p>
+                <sm-textarea placeholder="Add some text here..." rows="4"></sm-textarea>
+            </section>
         </div>
     </main>
-    <script src="components.js"></script>
-    <script>
-        let currentPage = document.getElementById('overview_page'),
-            selectedItem = document.getElementById('overview_entry'),
-            main = document.querySelector('main');
-        function showPage(item, targetPage){
-            let page = document.getElementById(targetPage)
-            currentPage.classList.add('hide-completely')
-            selectedItem.classList.remove('active')
-            page.classList.remove('hide-completely')
-            item.classList.add('active')
-            currentPage = page
-            selectedItem = item
+    <template id="nav_item_template">
+        <li>
+            <a class="list__item interact"></a>
+        </li>
+    </template>
+    <template id="comp_checkbox_template">
+        <sm-checkbox>
+            <span class="comp-checkbox__title"></span>
+        </sm-checkbox>
+    </template>
+    <script src="dist/button.js"></script>
+    <script src="dist/carousel.js"></script>
+    <script src="dist/checkbox.js"></script>
+    <script src="dist/copy.js"></script>
+    <script src="dist/file-input.js"></script>
+    <script src="dist/form.js"></script>
+    <script src="dist/input.js"></script>
+    <script src="dist/menu.js"></script>
+    <script src="dist/notifications.js"></script>
+    <script src="dist/popup.js"></script>
+    <script src="dist/radio.js"></script>
+    <script src="dist/select.js"></script>
+    <script src="dist/strip-select.js"></script>
+    <script src="dist/switch.js"></script>
+    <script src="dist/tabs.js"></script>
+    <script src="dist/tags-input.js"></script>
+    <script src="dist/textarea.js"></script>
+    <script id="default_ui_library">
+        const domRefs = {};
+
+        function getRef(elementId) {
+            if (!domRefs.hasOwnProperty(elementId)) {
+                domRefs[elementId] = {
+                    count: 1,
+                    ref: null,
+                };
+                return document.getElementById(elementId);
+            } else {
+                if (domRefs[elementId].count < 3) {
+                    domRefs[elementId].count = domRefs[elementId].count + 1;
+                    return document.getElementById(elementId);
+                } else {
+                    if (!domRefs[elementId].ref)
+                        domRefs[elementId].ref = document.getElementById(elementId);
+                    return domRefs[elementId].ref;
+                }
+            }
+        }
+
+        function create(tagName, obj) {
+            const { className, textContent, innerHTML } = obj
+            const elem = document.createElement(tagName)
+            if (className)
+                elem.className = className
+            elem.textContent = textContent
+            if (innerHTML)
+                elem.innerHTML = innerHTML
+            return elem
+        }
+        const debounce = (callback, wait) => {
+            let timeoutId = null;
+            return (...args) => {
+                window.clearTimeout(timeoutId);
+                timeoutId = window.setTimeout(() => {
+                    callback.apply(null, args);
+                }, wait);
+            };
+        }
+
+        let timerId;
+        function throttle(func, delay) {
+            // If setTimeout is already scheduled, no need to do anything
+            if (timerId) {
+                return;
+            }
+
+            // Schedule a setTimeout after delay seconds
+            timerId = setTimeout(function () {
+                func();
+
+                // Once setTimeout function execution is finished, timerId = undefined so that in
+                // the next scroll event function execution can be scheduled by the setTimeout
+                timerId = undefined;
+            }, delay);
+        }
+
+        //Checks for internet connection status
+        if (!navigator.onLine)
+            notify(
+                "There seems to be a problem connecting to the internet, Please check you internet connection.",
+                "error",
+               {sound: true}
+            );
+        window.addEventListener("offline", () => {
+            notify(
+                "There seems to be a problem connecting to the internet, Please check you internet connection.",
+                "error",
+                {pinned: true, sound: true}
+            );
+        });
+        window.addEventListener("online", () => {
+            getRef("notification_drawer").clearAll();
+            notify("We are back online.", "success");
+        });
+
+        if (getRef("theme_switcher")) {
+            if (localStorage.theme === "dark") {
+                nightlight();
+                getRef("theme_switcher").checked = true;
+            } else if (localStorage.theme === "light") {
+                daylight();
+                getRef("theme_switcher").checked = false;
+            }
+            else {
+                if (window.matchMedia(`(prefers-color-scheme: dark)`).matches) {
+                    nightlight();
+                    getRef("theme_switcher").checked = true;
+                } else {
+                    daylight();
+                    getRef("theme_switcher").checked = false;
+                }
+            }
+
+            function daylight() {
+                document.body.setAttribute("data-theme", "light");
+            }
+
+            function nightlight() {
+                document.body.setAttribute("data-theme", "dark");
+            }
+            getRef("theme_switcher").addEventListener("change", function (e) {
+                if (this.checked) {
+                    nightlight();
+                    localStorage.setItem("theme", "dark");
+                } else {
+                    daylight();
+                    localStorage.setItem("theme", "light");
+                }
+            });
+        }
+
+        // function required for popups or modals to appear
+        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];
+            }
+        }
+        let popupStack = new Stack(),
+            zIndex = 10;
+
+        async function showPopup(popup, pinned) {
+            zIndex++
+            getRef(popup).setAttribute('style', `z-index: ${zIndex}`)
+            popupStack = getRef(popup).show(pinned, popupStack)
+            return getRef(popup);
+        }
+
+        // hides the popup or modal 
+        function hidePopup() {
+            if (popupStack.peek() === undefined)
+                return;
+            popupStack.peek().popup.hide()
+        }
+
+        // displays a popup for asking permission. Use this instead of JS confirm
+        let confirmation = (title, message, cancelText = 'Cancel', confirmText = 'OK') => {
+            return new Promise(resolve => {
+                showPopup('confirmation_popup', true)
+                getRef('confirm_title').textContent = title;
+                getRef('confirm_message').textContent = message;
+                let cancelButton = getRef('confirmation_popup').children[2].children[0],
+                    submitButton = getRef('confirmation_popup').children[2].children[1]
+                submitButton.textContent = confirmText
+                cancelButton.textContent = cancelText
+                submitButton.onclick = () => {
+                    hidePopup()
+                    resolve(true);
+                }
+                cancelButton.onclick = () => {
+                    hidePopup()
+                    resolve(false);
+                }
+            })
+        }
+        // displays a popup for asking user input. Use this instead of JS prompt
+        async function getPromptInput(title, message = '', showText = true, trueBtn = "Ok", falseBtn = "Cancel") {
+            showPopup('prompt_popup', true)
+            getRef('prompt_title').textContent = title;
+            let input = getRef('prompt_input');
+            input.setAttribute("placeholder", message)
+            let buttons = getRef('prompt_popup').querySelectorAll("sm-button");
+            if (showText)
+                input.setAttribute("type", "text")
+            else
+                input.setAttribute("type", "password")
+            input.focusIn()
+            buttons[0].textContent = falseBtn;
+            buttons[1].textContent = trueBtn;
+            return new Promise((resolve, reject) => {
+                buttons[0].onclick = () => {
+                    hidePopup()
+                    return;
+                }
+                buttons[1].onclick = () => {
+                    let value = input.value;
+                    hidePopup()
+                    resolve(value)
+                }
+            })
+        }
+
+        //Function for displaying toast notifications. pass in error for mode param if you want to show an error.
+        function notify(message, mode, options = {}) {
+            const {pinned = false, sound} = options
+            if (mode === "error") console.error(message);
+            getRef("notification_drawer").push(message, {pinned});
+            if (navigator.onLine && sound) {
+                getRef("notification_sound").currentTime = 0;
+                getRef("notification_sound").play();
+            }
+        }
+
+        const currentYear = new Date().getFullYear();
+        function getFormatedTime(time, relative) {
+            try {
+                if (String(time).indexOf("_")) time = String(time).split("_")[0];
+                const intTime = parseInt(time);
+                if (String(intTime).length < 13) time *= 1000;
+                let timeFrag = new Date(intTime).toString().split(" "),
+                    day = timeFrag[0],
+                    month = timeFrag[1],
+                    date = timeFrag[2],
+                    year = timeFrag[3],
+                    minutes = new Date(intTime).getMinutes(),
+                    hours = new Date(intTime).getHours(),
+                    currentTime = new Date().toString().split(" ");
+
+                minutes = minutes < 10 ? `0${minutes}` : minutes;
+                let finalHours = ``;
+                if (hours > 12) finalHours = `${hours - 12}:${minutes}`;
+                else if (hours === 0) finalHours = `12:${minutes}`;
+                else finalHours = `${hours}:${minutes}`;
+
+                finalHours = hours >= 12 ? `${finalHours} PM` : `${finalHours} AM`;
+                if (relative) {
+                    return `${date} ${month} ${year}`;
+                } else return `${finalHours} ${month} ${date} ${year}`;
+            } catch (e) {
+                console.error(e);
+                return time;
+            }
+        }
+
+        const inputValidation = debounce((e) => {
+            if (e.target.closest('sm-input')) {
+                const input = e.target.closest('sm-input')
+                if (input.value === '')
+                    input.setValidity('')
+                if (input.hasAttribute('data-flo-id')) {
+                    if (validateAddr(input.value.trim()) || input.value.trim() === '')
+                        input.setValidity('')
+                    else
+                        input.setValidity('Invalid FLO address.')
+                }
+            }
+        }, 100)
+
+        window.addEventListener("load", () => {
+            // document.querySelectorAll('sm-input[data-flo-id]').forEach(input => input.customValidation = validateAddr)
+            document.addEventListener('input', inputValidation)
+            document.addEventListener('keyup', (e) => {
+                if (e.code === 'Escape') {
+                    hidePopup()
+                }
+            })
+            document.addEventListener("pointerdown", (e) => {
+                if (e.target.closest("button, sm-button:not([disabled]), .interact")) {
+                    createRipple(e, e.target.closest("button, sm-button, .interact"));
+                }
+            });
+            document.addEventListener('copy', () => {
+                notify('copied', 'success')
+            })
+        });
+        function createRipple(event, target) {
+            const circle = document.createElement("span");
+            const diameter = Math.max(target.clientWidth, target.clientHeight);
+            const radius = diameter / 2;
+            const targetDimensions = target.getBoundingClientRect();
+            circle.style.width = circle.style.height = `${diameter}px`;
+            circle.style.left = `${event.clientX - (targetDimensions.left + radius)}px`;
+            circle.style.top = `${event.clientY - (targetDimensions.top + radius)}px`;
+            circle.classList.add("ripple");
+            const rippleAnimation = circle.animate(
+                [
+                    {
+                        transform: "scale(3)",
+                        opacity: 0,
+                    },
+                ],
+                {
+                    duration: 1000,
+                    fill: "forwards",
+                    easing: "ease-out",
+                }
+            );
+            target.append(circle);
+            rippleAnimation.onfinish = () => {
+                circle.remove();
+            };
         }
-        document.getElementById('menu').addEventListener('click', e => {
-            if(e.target.closest('.item'))
-                showPage(e.target.closest('.item'), e.target.closest('.item').dataset.target)
-        })
-        showPage(selectedItem, 'overview_page')
-        document.getElementById('get_started_btn').addEventListener('click', e => {
-            main.scrollIntoView()
-        })
     </script>
+    <script>
+        const render = {
+            navListItem(obj) {
+                const { name, pageId } = obj
+                const item = getRef('nav_item_template').content.cloneNode(true).firstElementChild
+                const itemLink = item.firstElementChild
+                itemLink.textContent = name
+                itemLink.href = `#${pageId}`
+                return item
+            },
+            compCheckbox(obj){
+                const {name} = obj
+                const checkbox = getRef('comp_checkbox_template').content.cloneNode(true).firstElementChild
+                checkbox.setAttribute('value', name.toLowerCase().replaceAll(' ', '-'))
+                checkbox.firstElementChild.textContent = name
+                return checkbox
+            }
+        }
+
+        window.addEventListener('hashchange', e => showPage(window.location.hash, { hashChange: true }))
+        window.addEventListener('load', e => {
+            document.body.classList.remove('hide-completely')
+            renderComponentList()
+            showPage(window.location.hash, { firstLoad: true })
+            getRef('total_components_count').textContent = componentsList.length
+            PR.prettyPrint()
+            getComponents()
+        })
+        function showPage(targetPage, options = {}) {
+            const { firstLoad, hashChange } = options
+            let pageId
+            if (targetPage === '') {
+                pageId = 'overview_page'
+            }
+            else {
+                pageId = targetPage.includes('#') ? targetPage.split('#')[1] : targetPage
+            }
+            document.querySelector('.page:not(.hide-completely)').classList.add('hide-completely')
+            document.querySelector('.list__item--active').classList.remove('list__item--active')
+            getRef(pageId).classList.remove('hide-completely')
+            getRef(pageId).animate([
+                {
+                    opacity: 0,
+                    transform: 'translateX(-1rem)'
+                },
+                {
+                    opacity: 1,
+                    transform: 'none'
+                },
+            ],
+                {
+                    duration: 300,
+                    easing: 'ease'
+                })
+            const targetListItem = document.querySelector(`.list__item[href="#${pageId}"]`)
+            targetListItem.classList.add('list__item--active')
+            if (firstLoad && window.innerWidth > 640 && targetListItem.getBoundingClientRect().top > getRef('side_nav').getBoundingClientRect().height){
+                getRef('side_nav').scrollTo({
+                    top: (targetListItem.getBoundingClientRect().top - getRef('side_nav').getBoundingClientRect().top + getRef('side_nav').scrollTop),
+                    behavior: 'smooth'
+                })
+            }
+            if (hashChange && window.innerWidth < 640) {
+                sideNav(false)
+            }
+        }
+
+        const componentsList = [
+            {
+                name: 'button',
+                pageId: 'button_page'
+            },
+            {
+                name: 'Carousel',
+                pageId: 'carousel_page'
+            },
+            {
+                name: 'Checkbox',
+                pageId: 'checkbox_page'
+            },
+            {
+                name: 'Copy',
+                pageId: 'copy_page'
+            },
+            {
+                name: 'File input',
+                pageId: 'file_input_page'
+            },
+            {
+                name: 'Form',
+                pageId: 'form_page'
+            },
+            {
+                name: 'Input',
+                pageId: 'input_page'
+            },
+            {
+                name: 'Menu',
+                pageId: 'menu_page'
+            },
+            {
+                name: 'Notifications',
+                pageId: 'notifications_page'
+            },
+            {
+                name: 'Popup',
+                pageId: 'popup_page'
+            },
+            {
+                name: 'Radio',
+                pageId: 'radio_page'
+            },
+            {
+                name: 'Switch',
+                pageId: 'switch_page'
+            },
+            {
+                name: 'Select',
+                pageId: 'select_page'
+            },
+            {
+                name: 'Strip select',
+                pageId: 'strip_select_page'
+            },
+            {
+                name: 'Tabs',
+                pageId: 'tabs_page'
+            },
+            {
+                name: 'Tags input',
+                pageId: 'tags_input_page'
+            },
+            {
+                name: 'textarea',
+                pageId: 'textarea_page'
+            },
+        ]
+        function sideNav(show = true) {
+            if (show) {
+                getRef('side_nav').classList.add('reveal')
+                getRef('backdrop').classList.remove('hide-completely')
+                getRef('backdrop').animate([
+                    {
+                        opacity: 0
+                    },
+                    {
+                        opacity: 1
+                    },
+                ],
+                    {
+                        duration: 300,
+                        easing: 'ease'
+                    })
+            }
+            else {
+                getRef('side_nav').classList.remove('reveal')
+                getRef('backdrop').animate([
+                    {
+                        opacity: 1
+                    },
+                    {
+                        opacity: 0
+                    },
+                ],
+                    {
+                        duration: 300,
+                        easing: 'ease'
+                    })
+                    .onfinish = () => {
+                        getRef('backdrop').classList.add('hide-completely')
+                    }
+            }
+        }
+
+        function renderComponentList() {
+            const itemsFrag = document.createDocumentFragment()
+            const checkboxFrag = document.createDocumentFragment()
+            componentsList.forEach((component, index) => {
+                itemsFrag.append(render.navListItem(component))
+                checkboxFrag.append(render.compCheckbox({...component, index}))
+            })
+            getRef('components_list').innerHTML = ''
+            getRef('components_selection_list').innerHTML = ''
+            getRef('components_list').append(itemsFrag)
+            getRef('components_selection_list').append(checkboxFrag)
+        }
+
+        function selectAll() {
+            getRef('components_selection_list').querySelectorAll('sm-checkbox').forEach(elem => elem.checked = true)
+        }
+        function clearAll() {
+            getRef('components_selection_list').querySelectorAll('sm-checkbox').forEach(elem => elem.checked = false)
+        }
+        async function getSelectedComponents(){
+            const selectedComponents = [...getRef('components_selection_list').querySelectorAll('sm-checkbox[checked]')].map(v => v.value)
+            const extension = getRef('get_minified').checked ? '.min.js' : '.js'
+            const filesList = []
+            selectedComponents.forEach(async component => {
+                for (let compObj in allComponentsObj) {
+                    const {name, download_url} = allComponentsObj[compObj]
+                    if(name === `${component}${extension}`){
+                        filesList.push(fetch(download_url).then(async res => await res.text()))
+                    }
+                }
+            });
+            return await Promise.all(filesList)
+        }
+
+        async function downloadComponents() {
+            const selectedComponents = await getSelectedComponents()
+            if(selectedComponents.length){
+                downloadJs(selectedComponents, {minified: getRef('get_minified').checked})
+            }
+            else{
+                notify('Please select atleast one component', 'error')
+            }
+        }
+        
+        async function copySourceCode(){
+            const selectedComponents = await getSelectedComponents()
+            if(selectedComponents.length){
+                const sourceCode = selectedComponents.join("\n")
+                window.navigator.clipboard.writeText(sourceCode).then(success => {
+                    notify('Copied components source code')
+                }).catch(err => console.error(error))
+            }
+            else{
+                notify('Please select atleast one component', 'error')
+            }
+        }
+
+        let allComponentsObj = []
+        async function getComponents() {
+            const files = await fetch('https://api.github.com/repos/sairaj-mote/components/contents/dist')
+            allComponentsObj = await files.json()
+        }
+        function downloadJs(componentsArray, options = {minified: true}){
+            const {minified} = options  
+            const element = document.createElement('a');
+            element.setAttribute('href', 'data:application/javascript;charset=utf-8,' + encodeURIComponent(componentsArray.join("\n")));
+            const extension = minified ? '.min.js': '.js'
+            element.setAttribute('download', `components${extension}`);
+        
+            element.style.display = 'none';
+            document.body.appendChild(element);
+        
+            element.click();
+        
+            document.body.removeChild(element);
+        }
+    </script>
+    <script src="prettify.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/Standard UI Components/prettify.js b/Standard UI Components/prettify.js
new file mode 100644
index 0000000..477f03d
--- /dev/null
+++ b/Standard UI Components/prettify.js	
@@ -0,0 +1,46 @@
+!function(){/*
+
+ Copyright (C) 2006 Google Inc.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+*/
+"undefined"!==typeof window&&(window.PR_SHOULD_USE_CONTINUATION=!0);
+(function(){function T(a){function d(e){var a=e.charCodeAt(0);if(92!==a)return a;var c=e.charAt(1);return(a=w[c])?a:"0"<=c&&"7">=c?parseInt(e.substring(1),8):"u"===c||"x"===c?parseInt(e.substring(2),16):e.charCodeAt(1)}function f(e){if(32>e)return(16>e?"\\x0":"\\x")+e.toString(16);e=String.fromCharCode(e);return"\\"===e||"-"===e||"]"===e||"^"===e?"\\"+e:e}function c(e){var c=e.substring(1,e.length-1).match(RegExp("\\\\u[0-9A-Fa-f]{4}|\\\\x[0-9A-Fa-f]{2}|\\\\[0-3][0-7]{0,2}|\\\\[0-7]{1,2}|\\\\[\\s\\S]|-|[^-\\\\]","g"));
+e=[];var a="^"===c[0],b=["["];a&&b.push("^");for(var a=a?1:0,g=c.length;a<g;++a){var h=c[a];if(/\\[bdsw]/i.test(h))b.push(h);else{var h=d(h),k;a+2<g&&"-"===c[a+1]?(k=d(c[a+2]),a+=2):k=h;e.push([h,k]);65>k||122<h||(65>k||90<h||e.push([Math.max(65,h)|32,Math.min(k,90)|32]),97>k||122<h||e.push([Math.max(97,h)&-33,Math.min(k,122)&-33]))}}e.sort(function(e,a){return e[0]-a[0]||a[1]-e[1]});c=[];g=[];for(a=0;a<e.length;++a)h=e[a],h[0]<=g[1]+1?g[1]=Math.max(g[1],h[1]):c.push(g=h);for(a=0;a<c.length;++a)h=
+c[a],b.push(f(h[0])),h[1]>h[0]&&(h[1]+1>h[0]&&b.push("-"),b.push(f(h[1])));b.push("]");return b.join("")}function m(e){for(var a=e.source.match(RegExp("(?:\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]|\\\\u[A-Fa-f0-9]{4}|\\\\x[A-Fa-f0-9]{2}|\\\\[0-9]+|\\\\[^ux0-9]|\\(\\?[:!=]|[\\(\\)\\^]|[^\\x5B\\x5C\\(\\)\\^]+)","g")),b=a.length,d=[],g=0,h=0;g<b;++g){var k=a[g];"("===k?++h:"\\"===k.charAt(0)&&(k=+k.substring(1))&&(k<=h?d[k]=-1:a[g]=f(k))}for(g=1;g<d.length;++g)-1===d[g]&&(d[g]=++E);for(h=g=0;g<b;++g)k=a[g],
+"("===k?(++h,d[h]||(a[g]="(?:")):"\\"===k.charAt(0)&&(k=+k.substring(1))&&k<=h&&(a[g]="\\"+d[k]);for(g=0;g<b;++g)"^"===a[g]&&"^"!==a[g+1]&&(a[g]="");if(e.ignoreCase&&q)for(g=0;g<b;++g)k=a[g],e=k.charAt(0),2<=k.length&&"["===e?a[g]=c(k):"\\"!==e&&(a[g]=k.replace(/[a-zA-Z]/g,function(a){a=a.charCodeAt(0);return"["+String.fromCharCode(a&-33,a|32)+"]"}));return a.join("")}for(var E=0,q=!1,l=!1,n=0,b=a.length;n<b;++n){var p=a[n];if(p.ignoreCase)l=!0;else if(/[a-z]/i.test(p.source.replace(/\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi,
+""))){q=!0;l=!1;break}}for(var w={b:8,t:9,n:10,v:11,f:12,r:13},r=[],n=0,b=a.length;n<b;++n){p=a[n];if(p.global||p.multiline)throw Error(""+p);r.push("(?:"+m(p)+")")}return new RegExp(r.join("|"),l?"gi":"g")}function U(a,d){function f(a){var b=a.nodeType;if(1==b){if(!c.test(a.className)){for(b=a.firstChild;b;b=b.nextSibling)f(b);b=a.nodeName.toLowerCase();if("br"===b||"li"===b)m[l]="\n",q[l<<1]=E++,q[l++<<1|1]=a}}else if(3==b||4==b)b=a.nodeValue,b.length&&(b=d?b.replace(/\r\n?/g,"\n"):b.replace(/[ \t\r\n]+/g,
+" "),m[l]=b,q[l<<1]=E,E+=b.length,q[l++<<1|1]=a)}var c=/(?:^|\s)nocode(?:\s|$)/,m=[],E=0,q=[],l=0;f(a);return{a:m.join("").replace(/\n$/,""),c:q}}function J(a,d,f,c,m){f&&(a={h:a,l:1,j:null,m:null,a:f,c:null,i:d,g:null},c(a),m.push.apply(m,a.g))}function V(a){for(var d=void 0,f=a.firstChild;f;f=f.nextSibling)var c=f.nodeType,d=1===c?d?a:f:3===c?W.test(f.nodeValue)?a:d:d;return d===a?void 0:d}function G(a,d){function f(a){for(var l=a.i,n=a.h,b=[l,"pln"],p=0,q=a.a.match(m)||[],r={},e=0,t=q.length;e<
+t;++e){var z=q[e],v=r[z],g=void 0,h;if("string"===typeof v)h=!1;else{var k=c[z.charAt(0)];if(k)g=z.match(k[1]),v=k[0];else{for(h=0;h<E;++h)if(k=d[h],g=z.match(k[1])){v=k[0];break}g||(v="pln")}!(h=5<=v.length&&"lang-"===v.substring(0,5))||g&&"string"===typeof g[1]||(h=!1,v="src");h||(r[z]=v)}k=p;p+=z.length;if(h){h=g[1];var A=z.indexOf(h),C=A+h.length;g[2]&&(C=z.length-g[2].length,A=C-h.length);v=v.substring(5);J(n,l+k,z.substring(0,A),f,b);J(n,l+k+A,h,K(v,h),b);J(n,l+k+C,z.substring(C),f,b)}else b.push(l+
+k,v)}a.g=b}var c={},m;(function(){for(var f=a.concat(d),l=[],n={},b=0,p=f.length;b<p;++b){var w=f[b],r=w[3];if(r)for(var e=r.length;0<=--e;)c[r.charAt(e)]=w;w=w[1];r=""+w;n.hasOwnProperty(r)||(l.push(w),n[r]=null)}l.push(/[\0-\uffff]/);m=T(l)})();var E=d.length;return f}function x(a){var d=[],f=[];a.tripleQuotedStrings?d.push(["str",/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,
+null,"'\""]):a.multiLineStrings?d.push(["str",/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"]):d.push(["str",/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"]);a.verbatimStrings&&f.push(["str",/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null]);var c=a.hashComments;c&&(a.cStyleComments?(1<c?d.push(["com",/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,null,"#"]):d.push(["com",/^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\r\n]*)/,
+null,"#"]),f.push(["str",/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/,null])):d.push(["com",/^#[^\r\n]*/,null,"#"]));a.cStyleComments&&(f.push(["com",/^\/\/[^\r\n]*/,null]),f.push(["com",/^\/\*[\s\S]*?(?:\*\/|$)/,null]));if(c=a.regexLiterals){var m=(c=1<c?"":"\n\r")?".":"[\\S\\s]";f.push(["lang-regex",RegExp("^(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<<?=?|>>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*("+
+("/(?=[^/*"+c+"])(?:[^/\\x5B\\x5C"+c+"]|\\x5C"+m+"|\\x5B(?:[^\\x5C\\x5D"+c+"]|\\x5C"+m+")*(?:\\x5D|$))+/")+")")])}(c=a.types)&&f.push(["typ",c]);c=(""+a.keywords).replace(/^ | $/g,"");c.length&&f.push(["kwd",new RegExp("^(?:"+c.replace(/[\s,]+/g,"|")+")\\b"),null]);d.push(["pln",/^\s+/,null," \r\n\t\u00a0"]);c="^.[^\\s\\w.$@'\"`/\\\\]*";a.regexLiterals&&(c+="(?!s*/)");f.push(["lit",/^@[a-z_$][a-z_$@0-9]*/i,null],["typ",/^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/,null],["pln",/^[a-z_$][a-z_$@0-9]*/i,
+null],["lit",/^(?:0x[a-f0-9]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+\-]?\d+)?)[a-z]*/i,null,"0123456789"],["pln",/^\\[\s\S]?/,null],["pun",new RegExp(c),null]);return G(d,f)}function L(a,d,f){function c(a){var b=a.nodeType;if(1==b&&!t.test(a.className))if("br"===a.nodeName.toLowerCase())m(a),a.parentNode&&a.parentNode.removeChild(a);else for(a=a.firstChild;a;a=a.nextSibling)c(a);else if((3==b||4==b)&&f){var e=a.nodeValue,d=e.match(q);d&&(b=e.substring(0,d.index),a.nodeValue=b,(e=e.substring(d.index+
+d[0].length))&&a.parentNode.insertBefore(l.createTextNode(e),a.nextSibling),m(a),b||a.parentNode.removeChild(a))}}function m(a){function c(a,b){var e=b?a.cloneNode(!1):a,k=a.parentNode;if(k){var k=c(k,1),d=a.nextSibling;k.appendChild(e);for(var f=d;f;f=d)d=f.nextSibling,k.appendChild(f)}return e}for(;!a.nextSibling;)if(a=a.parentNode,!a)return;a=c(a.nextSibling,0);for(var e;(e=a.parentNode)&&1===e.nodeType;)a=e;b.push(a)}for(var t=/(?:^|\s)nocode(?:\s|$)/,q=/\r\n?|\n/,l=a.ownerDocument,n=l.createElement("li");a.firstChild;)n.appendChild(a.firstChild);
+for(var b=[n],p=0;p<b.length;++p)c(b[p]);d===(d|0)&&b[0].setAttribute("value",d);var w=l.createElement("ol");w.className="linenums";d=Math.max(0,d-1|0)||0;for(var p=0,r=b.length;p<r;++p)n=b[p],n.className="L"+(p+d)%10,n.firstChild||n.appendChild(l.createTextNode("\u00a0")),w.appendChild(n);a.appendChild(w)}function t(a,d){for(var f=d.length;0<=--f;){var c=d[f];I.hasOwnProperty(c)?D.console&&console.warn("cannot override language handler %s",c):I[c]=a}}function K(a,d){a&&I.hasOwnProperty(a)||(a=/^\s*</.test(d)?
+"default-markup":"default-code");return I[a]}function M(a){var d=a.j;try{var f=U(a.h,a.l),c=f.a;a.a=c;a.c=f.c;a.i=0;K(d,c)(a);var m=/\bMSIE\s(\d+)/.exec(navigator.userAgent),m=m&&8>=+m[1],d=/\n/g,t=a.a,q=t.length,f=0,l=a.c,n=l.length,c=0,b=a.g,p=b.length,w=0;b[p]=q;var r,e;for(e=r=0;e<p;)b[e]!==b[e+2]?(b[r++]=b[e++],b[r++]=b[e++]):e+=2;p=r;for(e=r=0;e<p;){for(var x=b[e],z=b[e+1],v=e+2;v+2<=p&&b[v+1]===z;)v+=2;b[r++]=x;b[r++]=z;e=v}b.length=r;var g=a.h;a="";g&&(a=g.style.display,g.style.display="none");
+try{for(;c<n;){var h=l[c+2]||q,k=b[w+2]||q,v=Math.min(h,k),A=l[c+1],C;if(1!==A.nodeType&&(C=t.substring(f,v))){m&&(C=C.replace(d,"\r"));A.nodeValue=C;var N=A.ownerDocument,u=N.createElement("span");u.className=b[w+1];var B=A.parentNode;B.replaceChild(u,A);u.appendChild(A);f<h&&(l[c+1]=A=N.createTextNode(t.substring(v,h)),B.insertBefore(A,u.nextSibling))}f=v;f>=h&&(c+=2);f>=k&&(w+=2)}}finally{g&&(g.style.display=a)}}catch(y){D.console&&console.log(y&&y.stack||y)}}var D="undefined"!==typeof window?
+window:{},B=["break,continue,do,else,for,if,return,while"],F=[[B,"auto,case,char,const,default,double,enum,extern,float,goto,inline,int,long,register,restrict,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"],"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"],H=[F,"alignas,alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,delegate,dynamic_cast,explicit,export,friend,generic,late_check,mutable,namespace,noexcept,noreturn,nullptr,property,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"],
+O=[F,"abstract,assert,boolean,byte,extends,finally,final,implements,import,instanceof,interface,null,native,package,strictfp,super,synchronized,throws,transient"],P=[F,"abstract,add,alias,as,ascending,async,await,base,bool,by,byte,checked,decimal,delegate,descending,dynamic,event,finally,fixed,foreach,from,get,global,group,implicit,in,interface,internal,into,is,join,let,lock,null,object,out,override,orderby,params,partial,readonly,ref,remove,sbyte,sealed,select,set,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,value,var,virtual,where,yield"],
+F=[F,"abstract,async,await,constructor,debugger,enum,eval,export,from,function,get,import,implements,instanceof,interface,let,null,of,set,undefined,var,with,yield,Infinity,NaN"],Q=[B,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"],R=[B,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"],
+B=[B,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"],S=/^(DIR|FILE|array|vector|(de|priority_)?queue|(forward_)?list|stack|(const_)?(reverse_)?iterator|(unordered_)?(multi)?(set|map)|bitset|u?(int|float)\d*)\b/,W=/\S/,X=x({keywords:[H,P,O,F,"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",Q,R,B],hashComments:!0,cStyleComments:!0,multiLineStrings:!0,regexLiterals:!0}),
+I={};t(X,["default-code"]);t(G([],[["pln",/^[^<?]+/],["dec",/^<!\w[^>]*(?:>|$)/],["com",/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],["pun",/^(?:<[%?]|[%?]>)/],["lang-",/^<xmp\b[^>]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^<script\b[^>]*>([\s\S]*?)(<\/script\b[^>]*>)/i],["lang-css",/^<style\b[^>]*>([\s\S]*?)(<\/style\b[^>]*>)/i],["lang-in.tag",/^(<\/?[a-z][^<>]*>)/i]]),"default-markup htm html mxml xhtml xml xsl".split(" "));t(G([["pln",/^[\s]+/,
+null," \t\r\n"],["atv",/^(?:\"[^\"]*\"?|\'[^\']*\'?)/,null,"\"'"]],[["tag",/^^<\/?[a-z](?:[\w.:-]*\w)?|\/?>$/i],["atn",/^(?!style[\s=]|on)[a-z](?:[\w:-]*\w)?/i],["lang-uq.val",/^=\s*([^>\'\"\s]*(?:[^>\'\"\s\/]|\/(?=\s)))/],["pun",/^[=<>\/]+/],["lang-js",/^on\w+\s*=\s*\"([^\"]+)\"/i],["lang-js",/^on\w+\s*=\s*\'([^\']+)\'/i],["lang-js",/^on\w+\s*=\s*([^\"\'>\s]+)/i],["lang-css",/^style\s*=\s*\"([^\"]+)\"/i],["lang-css",/^style\s*=\s*\'([^\']+)\'/i],["lang-css",/^style\s*=\s*([^\"\'>\s]+)/i]]),["in.tag"]);
+t(G([],[["atv",/^[\s\S]+/]]),["uq.val"]);t(x({keywords:H,hashComments:!0,cStyleComments:!0,types:S}),"c cc cpp cxx cyc m".split(" "));t(x({keywords:"null,true,false"}),["json"]);t(x({keywords:P,hashComments:!0,cStyleComments:!0,verbatimStrings:!0,types:S}),["cs"]);t(x({keywords:O,cStyleComments:!0}),["java"]);t(x({keywords:B,hashComments:!0,multiLineStrings:!0}),["bash","bsh","csh","sh"]);t(x({keywords:Q,hashComments:!0,multiLineStrings:!0,tripleQuotedStrings:!0}),["cv","py","python"]);t(x({keywords:"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END",
+hashComments:!0,multiLineStrings:!0,regexLiterals:2}),["perl","pl","pm"]);t(x({keywords:R,hashComments:!0,multiLineStrings:!0,regexLiterals:!0}),["rb","ruby"]);t(x({keywords:F,cStyleComments:!0,regexLiterals:!0}),["javascript","js","ts","typescript"]);t(x({keywords:"all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,throw,true,try,unless,until,when,while,yes",hashComments:3,cStyleComments:!0,multilineStrings:!0,tripleQuotedStrings:!0,
+regexLiterals:!0}),["coffee"]);t(G([],[["str",/^[\s\S]+/]]),["regex"]);var Y=D.PR={createSimpleLexer:G,registerLangHandler:t,sourceDecorator:x,PR_ATTRIB_NAME:"atn",PR_ATTRIB_VALUE:"atv",PR_COMMENT:"com",PR_DECLARATION:"dec",PR_KEYWORD:"kwd",PR_LITERAL:"lit",PR_NOCODE:"nocode",PR_PLAIN:"pln",PR_PUNCTUATION:"pun",PR_SOURCE:"src",PR_STRING:"str",PR_TAG:"tag",PR_TYPE:"typ",prettyPrintOne:D.prettyPrintOne=function(a,d,f){f=f||!1;d=d||null;var c=document.createElement("div");c.innerHTML="<pre>"+a+"</pre>";
+c=c.firstChild;f&&L(c,f,!0);M({j:d,m:f,h:c,l:1,a:null,i:null,c:null,g:null});return c.innerHTML},prettyPrint:D.prettyPrint=function(a,d){function f(){for(var c=D.PR_SHOULD_USE_CONTINUATION?b.now()+250:Infinity;p<x.length&&b.now()<c;p++){for(var d=x[p],l=g,n=d;n=n.previousSibling;){var m=n.nodeType,u=(7===m||8===m)&&n.nodeValue;if(u?!/^\??prettify\b/.test(u):3!==m||/\S/.test(n.nodeValue))break;if(u){l={};u.replace(/\b(\w+)=([\w:.%+-]+)/g,function(a,b,c){l[b]=c});break}}n=d.className;if((l!==g||r.test(n))&&
+!e.test(n)){m=!1;for(u=d.parentNode;u;u=u.parentNode)if(v.test(u.tagName)&&u.className&&r.test(u.className)){m=!0;break}if(!m){d.className+=" prettyprinted";m=l.lang;if(!m){var m=n.match(w),q;!m&&(q=V(d))&&z.test(q.tagName)&&(m=q.className.match(w));m&&(m=m[1])}if(B.test(d.tagName))u=1;else var u=d.currentStyle,y=t.defaultView,u=(u=u?u.whiteSpace:y&&y.getComputedStyle?y.getComputedStyle(d,null).getPropertyValue("white-space"):0)&&"pre"===u.substring(0,3);y=l.linenums;(y="true"===y||+y)||(y=(y=n.match(/\blinenums\b(?::(\d+))?/))?
+y[1]&&y[1].length?+y[1]:!0:!1);y&&L(d,y,u);M({j:m,h:d,m:y,l:u,a:null,i:null,c:null,g:null})}}}p<x.length?D.setTimeout(f,250):"function"===typeof a&&a()}for(var c=d||document.body,t=c.ownerDocument||document,c=[c.getElementsByTagName("pre"),c.getElementsByTagName("code"),c.getElementsByTagName("xmp")],x=[],q=0;q<c.length;++q)for(var l=0,n=c[q].length;l<n;++l)x.push(c[q][l]);var c=null,b=Date;b.now||(b={now:function(){return+new Date}});var p=0,w=/\blang(?:uage)?-([\w.]+)(?!\S)/,r=/\bprettyprint\b/,
+e=/\bprettyprinted\b/,B=/pre|xmp/i,z=/^code$/i,v=/^(?:pre|code|xmp)$/i,g={};f()}},H=D.define;"function"===typeof H&&H.amd&&H("google-code-prettify",[],function(){return Y})})();}()
diff --git a/Standard UI Components/tsconfig.json b/Standard UI Components/tsconfig.json
new file mode 100644
index 0000000..8830f0a
--- /dev/null
+++ b/Standard UI Components/tsconfig.json	
@@ -0,0 +1,11 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "target": "ESNext",
+        "watch": true,
+        "lib": ["DOM", "ES2017"]
+    },
+    "exclude": [
+        "node_modules"
+    ]
+}
\ No newline at end of file