From 2c0cbbff3e1f456ee93d6c780c6083fcd18e7c8c Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Tue, 8 Nov 2022 03:01:43 +0530
Subject: [PATCH] Code refactoring and bug fixes

---
 components/dist/{strip-select.js => chips.js} |  91 ++++++------
 components/dist/chips.min.js                  |   1 +
 components/dist/collapsed-text.js             |  73 ++++++++++
 components/dist/form.js                       |  35 ++++-
 components/dist/form.min.js                   | Bin 2807 -> 6256 bytes
 components/dist/input.js                      |  13 --
 components/dist/input.min.js                  |   2 +-
 components/dist/popup.js                      | 130 ++++++++++--------
 components/dist/popup.min.js                  |   2 +-
 components/dist/strip-select.min.js           |   1 -
 components/index.html                         | 104 +++++++-------
 components/index.min.html                     |  48 +++----
 components/test.html                          |  62 ++-------
 13 files changed, 306 insertions(+), 256 deletions(-)
 rename components/dist/{strip-select.js => chips.js} (80%)
 create mode 100644 components/dist/chips.min.js
 create mode 100644 components/dist/collapsed-text.js
 delete mode 100644 components/dist/strip-select.min.js

diff --git a/components/dist/strip-select.js b/components/dist/chips.js
similarity index 80%
rename from components/dist/strip-select.js
rename to components/dist/chips.js
index b398005..6e4d309 100644
--- a/components/dist/strip-select.js
+++ b/components/dist/chips.js
@@ -1,5 +1,5 @@
-const stripSelect = document.createElement('template');
-stripSelect.innerHTML = `
+const smChips = document.createElement('template');
+smChips.innerHTML = `
 <style>
     *{
         padding: 0;
@@ -24,17 +24,17 @@ stripSelect.innerHTML = `
         grid-template-columns: min-content minmax(0,1fr) min-content;
         grid-template-rows: 1fr;
     }
-    .strip-select{
+    .sm-chips{
         display: flex;
         position: relative;
         grid-area: 1/1/2/-1;
         gap: var(--gap, 0.5rem);
         overflow: auto hidden;
     }
-    :host([multiline]) .strip-select{
+    :host([multiline]) .sm-chips{
         flex-wrap: wrap;
     }
-    :host(:not([multiline])) .strip-select{
+    :host(:not([multiline])) .sm-chips{
         max-width: 100%;   
         align-items: center;
     }
@@ -87,7 +87,7 @@ stripSelect.innerHTML = `
         .nav-button{
             display: none;
         }
-        .strip-select{
+        .sm-chips{
             overflow: auto hidden;
         }
         .cover{
@@ -109,7 +109,7 @@ stripSelect.innerHTML = `
             height: 0;
             background-color: transparent;
         }
-        .strip-select{
+        .sm-chips{
             overflow: hidden;
         }
         .cover--left{
@@ -126,7 +126,7 @@ stripSelect.innerHTML = `
     <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">
+    <section class="sm-chips">
         <slot></slot>
     </section>
     <button class="nav-button nav-button--right hide">
@@ -136,13 +136,17 @@ stripSelect.innerHTML = `
 </section>
 
 `;
-customElements.define('strip-select', class extends HTMLElement {
+customElements.define('sm-chips', class extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({
             mode: 'open'
-        }).append(stripSelect.content.cloneNode(true));
-        this.stripSelect = this.shadowRoot.querySelector('.strip-select');
+        }).append(smChips.content.cloneNode(true));
+        this.chipsWrapper = this.shadowRoot.querySelector('.sm-chips');
+        this.coverLeft = this.shadowRoot.querySelector('.cover--left');
+        this.coverRight = this.shadowRoot.querySelector('.cover--right');
+        this.navButtonLeft = this.shadowRoot.querySelector('.nav-button--left');
+        this.navButtonRight = this.shadowRoot.querySelector('.nav-button--right');
         this.slottedOptions = undefined;
         this._value = undefined;
         this.scrollDistance = 0;
@@ -160,14 +164,14 @@ customElements.define('strip-select', class extends HTMLElement {
         this.setSelectedOption(val);
     }
     scrollLeft() {
-        this.stripSelect.scrollBy({
+        this.chipsWrapper.scrollBy({
             left: -this.scrollDistance,
             behavior: 'smooth'
         });
     }
 
     scrollRight() {
-        this.stripSelect.scrollBy({
+        this.chipsWrapper.scrollBy({
             left: this.scrollDistance,
             behavior: 'smooth'
         });
@@ -176,7 +180,7 @@ customElements.define('strip-select', class extends HTMLElement {
         if (this._value === value) return
         this._value = value;
         this.assignedElements.forEach(elem => {
-            if (elem.value === value) {
+            if (elem.value == value) {
                 elem.setAttribute('selected', '');
                 elem.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
             }
@@ -200,14 +204,12 @@ customElements.define('strip-select', class extends HTMLElement {
         this.setAttribute('role', 'listbox');
 
         const slot = this.shadowRoot.querySelector('slot');
-        const coverLeft = this.shadowRoot.querySelector('.cover--left');
-        const coverRight = this.shadowRoot.querySelector('.cover--right');
-        const navButtonLeft = this.shadowRoot.querySelector('.nav-button--left');
-        const navButtonRight = this.shadowRoot.querySelector('.nav-button--right');
         slot.addEventListener('slotchange', e => {
             // debounce to wait for all elements to be assigned
             clearTimeout(this.slotChangeTimeout);
             this.slotChangeTimeout = setTimeout(() => {
+                firstOptionObserver.disconnect();
+                lastOptionObserver.disconnect();
                 this.assignedElements = slot.assignedElements();
                 this.assignedElements.forEach(elem => {
                     if (elem.hasAttribute('selected')) {
@@ -220,10 +222,10 @@ customElements.define('strip-select', class extends HTMLElement {
                         lastOptionObserver.observe(this.assignedElements[this.assignedElements.length - 1]);
                     }
                     else {
-                        navButtonLeft.classList.add('hide');
-                        navButtonRight.classList.add('hide');
-                        coverLeft.classList.add('hide');
-                        coverRight.classList.add('hide');
+                        this.navButtonLeft.classList.add('hide');
+                        this.navButtonRight.classList.add('hide');
+                        this.coverLeft.classList.add('hide');
+                        this.coverRight.classList.add('hide');
                         firstOptionObserver.disconnect();
                         lastOptionObserver.disconnect();
                     }
@@ -242,7 +244,7 @@ customElements.define('strip-select', class extends HTMLElement {
             });
         });
         resObs.observe(this);
-        this.stripSelect.addEventListener('option-clicked', e => {
+        this.chipsWrapper.addEventListener('option-clicked', e => {
             if (this._value !== e.target.value) {
                 this.setSelectedOption(e.target.value);
                 this.fireEvent();
@@ -251,11 +253,11 @@ customElements.define('strip-select', class extends HTMLElement {
         const firstOptionObserver = new IntersectionObserver(entries => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
-                    navButtonLeft.classList.add('hide');
-                    coverLeft.classList.add('hide');
+                    this.navButtonLeft.classList.add('hide');
+                    this.coverLeft.classList.add('hide');
                 } else {
-                    navButtonLeft.classList.remove('hide');
-                    coverLeft.classList.remove('hide');
+                    this.navButtonLeft.classList.remove('hide');
+                    this.coverLeft.classList.remove('hide');
                 }
             });
         },
@@ -266,11 +268,11 @@ customElements.define('strip-select', class extends HTMLElement {
         const lastOptionObserver = new IntersectionObserver(entries => {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
-                    navButtonRight.classList.add('hide');
-                    coverRight.classList.add('hide');
+                    this.navButtonRight.classList.add('hide');
+                    this.coverRight.classList.add('hide');
                 } else {
-                    navButtonRight.classList.remove('hide');
-                    coverRight.classList.remove('hide');
+                    this.navButtonRight.classList.remove('hide');
+                    this.coverRight.classList.remove('hide');
                 }
             });
         },
@@ -278,18 +280,17 @@ customElements.define('strip-select', class extends HTMLElement {
                 threshold: 0.9,
                 root: this
             });
-        navButtonLeft.addEventListener('click', this.scrollLeft);
-        navButtonRight.addEventListener('click', this.scrollRight);
+        this.navButtonLeft.addEventListener('click', this.scrollLeft);
+        this.navButtonRight.addEventListener('click', this.scrollRight);
     }
     disconnectedCallback() {
-        navButtonLeft.removeEventListener('click', this.scrollLeft);
-        navButtonRight.removeEventListener('click', this.scrollRight);
+        this.navButtonLeft.removeEventListener('click', this.scrollLeft);
+        this.navButtonRight.removeEventListener('click', this.scrollRight);
     }
 });
 
-//Strip option
-const stripOption = document.createElement('template');
-stripOption.innerHTML = `
+const smChip = document.createElement('template');
+smChip.innerHTML = `
 <style>
     *{
         padding: 0;
@@ -297,7 +298,7 @@ stripOption.innerHTML = `
         -webkit-box-sizing: border-box;
                 box-sizing: border-box;
     }  
-    .strip-option{
+    .sm-chip{
         display: flex;
         flex-shrink: 0;
         cursor: pointer;
@@ -307,30 +308,30 @@ stripOption.innerHTML = `
         border-radius: var(--border-radius, 2rem);
         -webkit-tap-highlight-color: transparent;
     }
-    :host([selected]) .strip-option{
+    :host([selected]) .sm-chip{
         color: var(--selected-option-color, rgba(var(--background-color,white)));
         background-color: var(--selected-background-color, var(--accent-color,teal));
     }
     :host(:focus-within){
         outline: none;
     }
-    :host(:focus-within) .strip-option{
+    :host(:focus-within) .sm-chip{
         box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset;
     }
-    :host(:hover:not([selected])) .strip-option{
+    :host(:hover:not([selected])) .sm-chip{
         background-color: rgba(var(--text-color,(17,17,17)), 0.06);
     }
 </style>
-<label class="strip-option">
+<label class="sm-chip">
     <slot></slot>
 </label>
 `;
-customElements.define('strip-option', class extends HTMLElement {
+customElements.define('sm-chip', class extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({
             mode: 'open'
-        }).append(stripOption.content.cloneNode(true));
+        }).append(smChip.content.cloneNode(true));
         this._value = undefined;
         this.radioButton = this.shadowRoot.querySelector('input');
 
diff --git a/components/dist/chips.min.js b/components/dist/chips.min.js
new file mode 100644
index 0000000..d044152
--- /dev/null
+++ b/components/dist/chips.min.js
@@ -0,0 +1 @@
+const smChips=document.createElement("template");smChips.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        padding: 1rem 0;\n        max-width: 100%;\n    }\n    .hide{\n        opacity: 0;\n        pointer-events: none;\n    }\n    input[type="radio"]{\n        display: none;\n    }\n    .scrolling-container{\n        position: relative;\n        display: grid;\n        grid-template-columns: min-content minmax(0,1fr) min-content;\n        grid-template-rows: 1fr;\n    }\n    .sm-chips{\n        display: flex;\n        position: relative;\n        grid-area: 1/1/2/-1;\n        gap: var(--gap, 0.5rem);\n        overflow: auto hidden;\n    }\n    :host([multiline]) .sm-chips{\n        flex-wrap: wrap;\n    }\n    :host(:not([multiline])) .sm-chips{\n        max-width: 100%;   \n        align-items: center;\n    }\n    .nav-button{\n        display: flex;\n        z-index: 2;\n        border: none;\n        padding: 0.3rem;\n        cursor: pointer;\n        align-items: center;\n        background: rgba(var(--background-color,(255,255,255)), 1);\n        transition: opacity 0.2s;\n        grid-row: 1;\n    }\n    .nav-button--left{\n        grid-column: 1;\n        justify-self: start;\n    }\n    .nav-button--right{\n        grid-column: 3;\n        justify-self: end;\n    }\n    .cover{\n        position: absolute;\n        z-index: 1;\n        width: 5rem;\n        height: 100%;\n        pointer-events: none;\n        grid-row: 1;\n        transition: opacity 0.2s;\n    }\n    .cover--left{\n        grid-column: 1;\n    }\n    .cover--right{\n        grid-column: 3;\n    }\n    .nav-button--right::before{\n        background-color: red;\n    }\n    .icon{\n        height: 1.2rem;\n        width: 1.2rem;\n        fill: rgba(var(--text-color,(17,17,17)), .8);\n    }\n    @media (hover: none){\n        ::-webkit-scrollbar {\n            height: 0;\n        }\n        .nav-button{\n            display: none;\n        }\n        .sm-chips{\n            overflow: auto hidden;\n        }\n        .cover{\n            width: 2rem;\n        }\n        .cover--left{\n            background: linear-gradient(90deg, rgba(var(--background-color,(255,255,255)), 1), transparent);\n        }\n        .cover--right{\n            right: 0;\n            background: linear-gradient(90deg, transparent, rgba(var(--background-color,(255,255,255)), 1));\n        }\n    }\n    @media (hover: hover){\n        ::-webkit-scrollbar-track {\n            background-color: transparent !important;\n        }\n        ::-webkit-scrollbar {\n            height: 0;\n            background-color: transparent;\n        }\n        .sm-chips{\n            overflow: hidden;\n        }\n        .cover--left{\n            background: linear-gradient(90deg, rgba(var(--background-color,(255,255,255)), 1) 60%, transparent);\n        }\n        .cover--right{\n            right: 0;\n            background: linear-gradient(90deg, transparent 0%, rgba(var(--background-color,(255,255,255)), 1) 40%);\n        }\n    }\n</style>\n<section class="scrolling-container">\n    <div class="cover cover--left hide"></div>\n    <button class="nav-button nav-button--left hide">\n        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"/></svg>\n    </button>\n    <section class="sm-chips">\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("sm-chips",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smChips.content.cloneNode(!0)),this.chipsWrapper=this.shadowRoot.querySelector(".sm-chips"),this.coverLeft=this.shadowRoot.querySelector(".cover--left"),this.coverRight=this.shadowRoot.querySelector(".cover--right"),this.navButtonLeft=this.shadowRoot.querySelector(".nav-button--left"),this.navButtonRight=this.shadowRoot.querySelector(".nav-button--right"),this.slottedOptions=void 0,this._value=void 0,this.scrollDistance=0,this.assignedElements=[],this.scrollLeft=this.scrollLeft.bind(this),this.scrollRight=this.scrollRight.bind(this),this.fireEvent=this.fireEvent.bind(this),this.setSelectedOption=this.setSelectedOption.bind(this)}get value(){return this._value}set value(t){this.setSelectedOption(t)}scrollLeft(){this.chipsWrapper.scrollBy({left:-this.scrollDistance,behavior:"smooth"})}scrollRight(){this.chipsWrapper.scrollBy({left:this.scrollDistance,behavior:"smooth"})}setSelectedOption(t){this._value!==t&&(this._value=t,this.assignedElements.forEach(e=>{e.value==t?(e.setAttribute("selected",""),e.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})):e.removeAttribute("selected")}))}fireEvent(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this._value}}))}connectedCallback(){this.setAttribute("role","listbox");const t=this.shadowRoot.querySelector("slot");t.addEventListener("slotchange",e=>{clearTimeout(this.slotChangeTimeout),this.slotChangeTimeout=setTimeout(()=>{n.disconnect(),i.disconnect(),this.assignedElements=t.assignedElements(),this.assignedElements.forEach(t=>{t.hasAttribute("selected")&&(this._value=t.value)}),this.hasAttribute("multiline")||(this.assignedElements.length>0?(n.observe(this.assignedElements[0]),i.observe(this.assignedElements[this.assignedElements.length-1])):(this.navButtonLeft.classList.add("hide"),this.navButtonRight.classList.add("hide"),this.coverLeft.classList.add("hide"),this.coverRight.classList.add("hide"),n.disconnect(),i.disconnect()))},100)});const e=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})});e.observe(this),this.chipsWrapper.addEventListener("option-clicked",t=>{this._value!==t.target.value&&(this.setSelectedOption(t.target.value),this.fireEvent())});const n=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?(this.navButtonLeft.classList.add("hide"),this.coverLeft.classList.add("hide")):(this.navButtonLeft.classList.remove("hide"),this.coverLeft.classList.remove("hide"))})},{threshold:.9,root:this}),i=new IntersectionObserver(t=>{t.forEach(t=>{t.isIntersecting?(this.navButtonRight.classList.add("hide"),this.coverRight.classList.add("hide")):(this.navButtonRight.classList.remove("hide"),this.coverRight.classList.remove("hide"))})},{threshold:.9,root:this});this.navButtonLeft.addEventListener("click",this.scrollLeft),this.navButtonRight.addEventListener("click",this.scrollRight)}disconnectedCallback(){this.navButtonLeft.removeEventListener("click",this.scrollLeft),this.navButtonRight.removeEventListener("click",this.scrollRight)}});const smChip=document.createElement("template");smChip.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    }  \n    .sm-chip{\n        display: flex;\n        flex-shrink: 0;\n        cursor: pointer;\n        white-space: nowrap;\n        padding: var(--padding, 0.4rem 0.6rem);\n        transition: background 0.3s;\n        border-radius: var(--border-radius, 2rem);\n        -webkit-tap-highlight-color: transparent;\n    }\n    :host([selected]) .sm-chip{\n        color: var(--selected-option-color, rgba(var(--background-color,white)));\n        background-color: var(--selected-background-color, var(--accent-color,teal));\n    }\n    :host(:focus-within){\n        outline: none;\n    }\n    :host(:focus-within) .sm-chip{\n        box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset;\n    }\n    :host(:hover:not([selected])) .sm-chip{\n        background-color: rgba(var(--text-color,(17,17,17)), 0.06);\n    }\n</style>\n<label class="sm-chip">\n    <slot></slot>\n</label>\n',customElements.define("sm-chip",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smChip.content.cloneNode(!0)),this._value=void 0,this.radioButton=this.shadowRoot.querySelector("input"),this.fireEvent=this.fireEvent.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}get value(){return this._value}fireEvent(){this.dispatchEvent(new CustomEvent("option-clicked",{bubbles:!0,composed:!0,detail:{value:this._value}}))}handleKeyDown(t){"Enter"!==t.key&&"Space"!==t.key||this.fireEvent()}connectedCallback(){this.setAttribute("role","option"),this.setAttribute("tabindex","0"),this._value=this.getAttribute("value"),this.addEventListener("click",this.fireEvent),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("click",this.fireEvent),this.removeEventListener("keydown",this.handleKeyDown)}});
\ No newline at end of file
diff --git a/components/dist/collapsed-text.js b/components/dist/collapsed-text.js
new file mode 100644
index 0000000..3bb5095
--- /dev/null
+++ b/components/dist/collapsed-text.js
@@ -0,0 +1,73 @@
+const collapsedText = document.createElement('template');
+collapsedText.innerHTML = `
+    <style>
+        .wrapper {
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+        }
+        .collapsed-text {
+            display: -webkit-box;
+            -webkit-line-clamp: var(--line-clamp,3);
+            -webkit-box-orient: vertical;  
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+        :host([open]) .collapsed-text {
+            -webkit-line-clamp: unset;
+        }
+        .toggle-button {
+            position: absolute;
+            bottom: 0;
+            right: 0;   
+            cursor: pointer;
+            font-weight: 700;
+            background: var(--button-background-color, #fff);
+            border: none;
+            outline: none;
+            color: var(--accent-color,teal);
+            font-size: inherit;
+            z-index: 1;
+        }
+    </style>
+    <div class="wrapper">
+        <div class="collapsed-text"><slot></slot></div>
+        <button class="toggle-button">Show more</button>
+    </div>
+`;
+class CollapsedText extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({
+            mode: 'open'
+        }).append(collapsedText.content.cloneNode(true));
+        this.isCollapsed = true;
+        this.toggleCollapsedText = this.toggleCollapsedText.bind(this);
+        this.wrapper = this.shadowRoot.querySelector('.collapsed-text');
+        this.toggleButton = this.shadowRoot.querySelector('.toggle-button');
+    }
+    toggleCollapsedText() {
+        this.toggleButton.textContent = this.isCollapsed ? 'Show less' : 'Show more';
+        if (this.isCollapsed) {
+            this.setAttribute('open', '');
+            this.wrapper.removeEventListener('click', this.toggleCollapsedText);
+        } else {
+            this.removeAttribute('open');
+            this.wrapper.addEventListener('click', this.toggleCollapsedText);
+        }
+        this.isCollapsed = !this.isCollapsed;
+    }
+
+    connectedCallback() {
+        this.wrapper.addEventListener('click', this.toggleCollapsedText);
+        this.toggleButton.addEventListener('click', this.toggleCollapsedText);
+    }
+
+    disconnectedCallback() {
+        this.wrapper.removeEventListener('click', this.toggleCollapsedText);
+        this.toggleButton.removeEventListener('click', this.toggleCollapsedText);
+    }
+}
+
+window.customElements.define('collapsed-text', CollapsedText);
\ No newline at end of file
diff --git a/components/dist/form.js b/components/dist/form.js
index 83effbb..faafee5 100644
--- a/components/dist/form.js
+++ b/components/dist/form.js
@@ -30,7 +30,7 @@ customElements.define('sm-form', class extends HTMLElement {
 
 		this.form = this.shadowRoot.querySelector('form');
 		this.formElements
-		this.requiredElements
+		this._requiredElements = [];
 		this.submitButton
 		this.resetButton
 		this.invalidFields = false;
@@ -53,11 +53,11 @@ customElements.define('sm-form', class extends HTMLElement {
 	}
 	_checkValidity() {
 		if (!this.submitButton) return;
-		this.invalidFields = this.requiredElements.filter(elem => !elem.isValid)
-		this.submitButton.disabled = this.invalidFields.length;
+		this.invalidFields = this._requiredElements.filter(([elem, isWC]) => isWC ? !elem.isValid : !elem.checkValidity())
+		this.submitButton.disabled = this.invalidFields.length > 0;
 	}
 	handleKeydown(e) {
-		if (e.key === 'Enter' && e.target.tagName.includes('SM-INPUT')) {
+		if (e.key === 'Enter' && e.target.tagName.includes('INPUT')) {
 			if (!this.invalidFields.length) {
 				if (this.submitButton) {
 					this.submitButton.click()
@@ -67,7 +67,24 @@ customElements.define('sm-form', class extends HTMLElement {
 					composed: true,
 				}))
 			} else {
-				this.requiredElements.forEach(elem => { if (!elem.isValid) elem.vibrate() })
+				for (const [elem, isWC] of this._requiredElements) {
+					const invalid = isWC ? !elem.isValid : !elem.checkValidity()
+					if (invalid) {
+						(elem?.shadowRoot?.lastElementChild || elem).animate([
+							{ transform: 'translateX(-1rem)' },
+							{ transform: 'translateX(1rem)' },
+							{ transform: 'translateX(-0.5rem)' },
+							{ transform: 'translateX(0.5rem)' },
+							{ transform: 'translateX(0)' },
+						], {
+							duration: 300,
+							easing: 'ease'
+						});
+						if (isWC) elem.focusIn()
+						else elem.focus()
+						break;
+					}
+				}
 			}
 		}
 	}
@@ -75,8 +92,12 @@ customElements.define('sm-form', class extends HTMLElement {
 		this.formElements.forEach(elem => elem.reset())
 	}
 	elementsChanged() {
-		this.formElements = [...this.querySelectorAll('sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio')]
-		this.requiredElements = this.formElements.filter(elem => elem.hasAttribute('required'));
+		this.formElements = [...this.querySelectorAll('input, sm-input, sm-textarea, sm-checkbox, tags-input, file-input, sm-switch, sm-radio')]
+		this.formElements.forEach(elem => {
+			if (elem.hasAttribute('required')) {
+				this._requiredElements.push([elem, elem.tagName.includes('-')])
+			}
+		});
 		this.submitButton = this.querySelector('[variant="primary"], [type="submit"]');
 		this.resetButton = this.querySelector('[type="reset"]');
 		if (this.resetButton) {
diff --git a/components/dist/form.min.js b/components/dist/form.min.js
index 9747001cd42278b247a719f6bbc4aba6457881a4..3cfb30e5194b3752e6b81f708de23af289f90a06 100644
GIT binary patch
literal 6256
zcmd6rac>(%5XJYSIF_Ie!q*_gKTSeasv;^{Ku{1;RJBg*CMV*=+&NGK{p!H`&3L_c
zXW!XrD}+u??sjiyW@p~KnZ1AhJ`303DwJU!dipyJU+THg|6VxOZ>*=YaHHpm-kOI@
zPlfJBx}Stc;ZlF&+#vLAbQ)$F_c!`sKO8nBXCarYE3GWTSK(QB8lEh*z106Bvt?nD
zKiBg|;ZOaYN#0l&E6>9{jU1TVsm2S9FrG$FW%cVYl%zcTQCY)yAt`7c27e3d-spEP
zTxb?Qpbt&uavuwme6BUQ#(DpDyPInTIzN#u2jK&oLDDPJGHsEAr59#FE?r1F*B)jj
z={MWWK(-B+qaU06EPN*Ic-p<$t^X+8ZTRqLWs`fdkmh4WD_Yu@7DvI2yfW49d>);1
zMZb{E>}#Z`lp5;?B15DuwQjB_*BPIfyStLkyDtMf0ZDlHS~}|3DTOTJ@=Cfv23P`(
z!<Cf&QUb^-b@lYtYsmtaV|$KRs!Q%!91_Y4*>Gky6w<OUImElv=uEPF3|omV7|5h=
zu4|-K7vTr}K;pG9FtC+V-D5dO=<6OSSGogL`?h+v92;vzHN(gyyzYDO+`@zG|C^=M
zLD&<v_I1^5ijngyO}3U5`@WY9qLYPRwLA8<ko^<OtmJ_z3fi>PJz6$wd12T@M{alH
zwb;6qC*gTxC0>ts`$G5lnf=%I3JO8pJhZ<9YRH~T*)SG|<+e}91w6K=EUinOnm%Hi
zo6c`#30ext;cxwIA`D;LNY9z>n|^Q3XL=i(h<S`o)4MMWQ4{_BCH%Cqo!ncj$?tl1
z7hRwhYvAjz^;_s343pRRC)$`9em1|ki=Gs#rrb2MiyTL3tSn`CxU}nBwvX3r?tXi-
zK4<-A+=v#DpRAYxk9lqM9bE|nm%3o?IzJASX<WIjJvNSnTVQKEioeNuBvQ4WX`CH`
zs=0B4BLr?ECiQim0nIheU`ZF*PBozdFC;Ts%bwh>H<kTSt@w4JD{*APNL$|a!iTzg
z70i3B@5;<1bvut_Rv#|qEobUMI9bK(dByAG=Y9S5G>ZjgCBLZjaRx@;oPX@PnXhfT
z&J<g8jFj`lb{(JX?3CFGdK&!DGt9vE9+&p41*frg<?;$X?~8Z6niN)lj)fx6?Mw_q
z&d2!R6)GB?6X^D*b5)&@A=0A;Qg5^y*ca)KHUC}sQMje6Yidt%+;z7|@H&R|G0#q<
z544u57IY=-Ey>=Fk!V+xmuo#<Agde`lU7VH(~SwTKKk49i3}ge=KET^sroYRJ<GgN
z7vZ#AbKvDKUCuh>@0G^sY{5AgN5@>zVy0aBY`W|?(s=B-f7Y6z>K*Jv$LPHXKE1u1
z_akMf9;VvEzKccgQ&RGccP98}EX?ES*cZSSpIV3Sb%E{^g!?I^FCQ~PPwX9^W7n|;
zo<O+wy^poZ*%X=eImQn)dTLP{DPNrdU}vfu8mf8F#ziT^WB1zjrdOiex(~EtcgnMP
z{=pAq#3Sp9U>9o2M761>nq2MX>6(0=&OP;Y-nZk~QyX=TESD^NV0!6;IW=<rf<K+1
z5446JnvBK|{8AU;o^(XVy~eJ%*{^yO3hlzXc-RwG;A8^()ul##-Cf0P^g9EcNE27`
za(iF?Krz3Rult6znLOuxiJytUUvmtu;5-DYgGt9BC#b||e&Y2=kA&b-vvpaVzhKVh
zxa%#gCvik1`D6=txwg8{?D5|wCLUGqMa%F&yMpC%Ly&V~-*#C&b5N7k(Z9W3Wadej
zJ9QJgR>a|Q$Bvk04pp<DdUA0z?1F+pxFh!WuL8NeOnz~0pP4uO+s8uB?sIyfh2|#q
zPE|W^+*!-<g!*@}uBtOhyq!kx8k0wooT_D1M!o?hE_xzN@I3+M@s6-Bv~vdJOy$h8
zNoq4v+xuU*$4~2M;`9tpJ(NY{>8bvsaT6zO>It@;$m4evFumKZ;|g*eoY2=b_utKD
zO`q)I>%<*RU7OBTk)^x54XgO~wDtab7mK{ljc422Sk>NZciFV<D}v{Gte8)Y$5U_7
z{N_-tOOXSeKQ~n_-T?2hi;USoCsOVGV}`D?V>cok%~W8o!(KOH6u0d>Q$47DQDJYs
z7CG3yZh5Txyy5%>?@x5a8MnlH0q;@XE-R7Bmpi(aZa(>MF}}N9|2L$^Q*b>V5knrg
G!|*SG#68mh

literal 2807
zcmb_eO>g5i5dABPfF@EQYqN)5oG8UM$f89zY0;#;q(MQ66N?B%ddZQ!u2=uPLsHsG
zvQrdAeUV7bJkH0PM^{=|jBN8>o2KBpY8z0PR|XiujRdz!VuWTbX(LWAf@Ln00`vXD
z?T6y*cNL9(mlk&tuBMw`@26{Lzh;~ZwOU5!7l$7kW>!KS|5oZx3oHKgzNI!C%!0ON
zAl(#mS!;_&g5bhZV!LIuGJ?+_T##GAv0g@R&(FV_eVrZfOy&D0e4%PE0%suZh!tBe
zqYX33VnMH2^fv#-K$9M^{MW%;zB$%}OBW-R-Cz;B*Epiqw`C(}Z2()NqGu*8#IxqP
zATO=dctyDGF)i)o8wWPpJj<%qqHcQj*qp<&P>{s7S@?6aN-}FB_=KRijU0=5+kNHO
zXxa+3Nz%P-*Fet<YhiPS$g29jW?XNReWN)nW4#6ycWKVn^um*#n*>70L}IBG+>v2&
za-Q}mE`Y-0S&#IK)|h{6!R+oqf<HGDXJkJl65=rMu@wgRbT<_8yB1Na!OjAXH-y?S
zDfoK<lH20sZ7^$EWGJ-yskC4=V8SkkQn#vt5bChXOF>z>==<pYsA{NQesiz_cfokN
zci>Vp#U=a*J1V0J9+RyD2LqHxF!Zkn22?kv684&KR=|VlY;)w)4cR1^LAsZKktkFv
z<wYQ2lIOWii>v*XlGR)4A~5qH8qh5!BF#k6f1t32?Znxmqk-Hd4lA>1N9bKQtp;%_
z^xo4xH0SixSCkZO+#YW>Z*~4GBoZUBxH`dHSYP<Q6=MSABrB|xLoFuAxdgSsI_)M^
zPcYrbH$+<#7e#^j3+zr$F-MX?aF5j;Yk)$mWXr)O@%`=Mhr6GDeTdVe;rEAp`$`tt
z+|VewG^l8O8lOL7z7eG%l~2+xU528Jv!a099FDiBIih+QCe(>3!>Yd7xJyI9Ho6W%
z;MZ|*jI({&mQ)<OJUP!Q-K@0*PVZexzs^%^Xp<Y(Va#$`3{hj=o2A{1XU9B?M`Dx@
zeKP0or1X*`)VjrtZombSA~Cx7{K8Kb-78r{)whe@iU<J1J9*fxpnSc(VO;1qeHw;;
zDiUERrulr~66Q6t?+}eBTdF>Zad3_Y(HfULAWbq!&K~Lh5KNJfuZ^I)a~D5l(If8G
zPz+^%I_rt*OBbkr94okav-p@-&w~+8PFJ~a`Uhc2d1*poPmFjd294@b#UiGWSS!+9
z;MYvbk~uc@Gy1ANyGtl0(LXrUeW<(&^(W8R(Z_J;=)2qd{4Gz8?Nj~8=#RkAltUC6
zS|_SUaVFC~hMDVs;pXOcb}96uIvRm}T-8EySMZ=1u4{c~W?8#&?)uc{r{y|aJAT@;
t{TEC(o5VUa0Dd$(n(bFRMSoZH24)2KFC{$+^uJWqDRLh_m7_~9{sP07$Y1~f

diff --git a/components/dist/input.js b/components/dist/input.js
index 80a445b..1e433db 100644
--- a/components/dist/input.js
+++ b/components/dist/input.js
@@ -268,7 +268,6 @@ customElements.define('sm-input',
             this.fireEvent = this.fireEvent.bind(this);
             this.checkInput = this.checkInput.bind(this);
             this.allowOnlyNum = this.allowOnlyNum.bind(this);
-            this.vibrate = this.vibrate.bind(this);
             this.handleOptionClick = this.handleOptionClick.bind(this);
             this.handleInputNavigation = this.handleInputNavigation.bind(this);
             this.handleDatalistNavigation = this.handleDatalistNavigation.bind(this);
@@ -460,18 +459,6 @@ customElements.define('sm-input',
                 }
             }
         }
-        vibrate() {
-            this.outerContainer.animate([
-                { transform: 'translateX(-1rem)' },
-                { transform: 'translateX(1rem)' },
-                { transform: 'translateX(-0.5rem)' },
-                { transform: 'translateX(0.5rem)' },
-                { transform: 'translateX(0)' },
-            ], {
-                duration: 300,
-                easing: 'ease'
-            });
-        }
         handleOptionClick(e) {
             this.input.value = e.target.textContent;
             this.optionList.classList.add('hidden');
diff --git a/components/dist/input.min.js b/components/dist/input.min.js
index ae48735..3408cef 100644
--- a/components/dist/input.min.js
+++ b/components/dist/input.min.js
@@ -1 +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    } \n    input[type="search"]::-webkit-search-decoration,\n    input[type="search"]::-webkit-search-cancel-button,\n    input[type="search"]::-webkit-search-results-button,\n    input[type="search"]::-webkit-search-results-decoration { display: none; }\n    input[type=number] {\n    -moz-appearance:textfield;\n    }\n    input[type=number]::-webkit-inner-spin-button, \n    input[type=number]::-webkit-outer-spin-button { \n        -webkit-appearance: none;\n        -moz-appearance: none;\n        appearance: none;\n        margin: 0; \n    }\n    input::-ms-reveal,\n    input::-ms-clear {\n      display: none;\n    }\n    input:invalid{\n        outline: none;\n        -webkit-box-shadow: none;\n                box-shadow: none;\n    }\n    ::-moz-focus-inner{\n        border: none;\n    }\n    :host{\n        display: flex;\n        --success-color: #00C853;\n        --danger-color: red;\n        --width: 100%;\n        --icon-gap: 0.5rem;\n        --min-height: 3.2rem;\n        --background: rgba(var(--text-color, (17,17,17)), 0.06);\n    }\n    .hidden{\n       display: none !important;\n    }\n\n    button{\n        display: flex;\n        border: none;\n        background: none;\n        padding: 0;\n        border-radius: 1rem;\n        min-width: 0;\n        cursor: pointer;\n    }\n    button:focus{\n        outline: var(--accent-color, teal) solid medium;\n    }\n    .icon {\n        height: 1.2rem;\n        width: 1.2rem;\n        fill: rgba(var(--text-color, (17,17,17)), 0.6);\n    }\n    \n    :host(.round) .input{\n        border-radius: 10rem;\n    }\n    .input {\n        display: flex;\n        cursor: text;\n        min-width: 0;\n        text-align: left;\n                align-items: center;\n        position: relative;\n        gap: var(--icon-gap);\n        padding: var(--padding, 0.6rem 0.8rem);\n        border-radius: var(--border-radius,0.3rem);\n        transition: opacity 0.3s, box-shadow 0.2s;\n        background: var(--background);\n        width: 100%;\n        outline: none;\n        min-height: var(--min-height);\n    }\n    .input.readonly .clear{\n        opacity: 0 !important;\n        margin-right: -2rem;\n        pointer-events: none !important;\n    }\n    .clear{\n        visibility: hidden;\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,teal) inset !important;\n    }\n    .disabled{\n        pointer-events: none;\n        opacity: 0.6;\n    }\n    .label {\n        grid-area: 1/1/2/2;\n        font-size: inherit;\n        opacity: .7;\n        font-weight: 400;\n        transition: -webkit-transform 0.3s;\n        transition: transform 0.3s;\n        transition: transform 0.3s, -webkit-transform 0.3s, color .03;\n            transform-origin: left;\n        pointer-events: none;\n        white-space: nowrap;\n        overflow: hidden;\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: grid;\n        grid-template-columns: 1fr auto;\n        position: relative;\n        align-items: center;\n    }    \n    input{\n        grid-area: 1/1/2/2;\n        font-size: inherit;\n        border: none;\n        background: transparent;\n        outline: none;\n        color: inherit;\n        font-family: inherit;\n        width: 100%;\n        caret-color: var(--accent-color, teal);\n    }\n    :host([animate]) .input:focus-within .container input,\n    .animate-placeholder .container input {\n        -webkit-transform: translateY(0.6rem);\n                -ms-transform: translateY(0.6rem);\n            transform: translateY(0.6rem);\n        }\n      \n    :host([animate]) .input:focus-within .label,\n    .animate-placeholder .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,teal)\n    }\n    :host([variant="outlined"]) .input {\n        box-shadow: 0 0 0 1px var(--border-color, rgba(var(--text-color, (17,17,17)), 0.3)) inset;\n        background: rgba(var(--background-color, (255,255,255)), 1);\n    }\n    .animate-placeholder:focus-within:not(.readonly) .label{\n        color: var(--accent-color,teal)\n    }\n    .feedback-text:not(:empty){\n        display: flex;\n        width: 100%;\n        text-align: left;\n        font-size: 0.9rem;\n        align-items: center;\n        padding: 0.8rem 0;\n        color: rgba(var(--text-color, (17,17,17)), 0.8);\n    }\n    .success{\n        color: var(--success-color);\n    }\n    .error{\n        color: var(--danger-color);\n    }\n    .status-icon{\n        margin-right: 0.2rem;\n    }\n    .status-icon--error{\n        fill: var(--danger-color);\n    }\n    .status-icon--success{\n        fill: var(--success-color);\n    }\n    .datalist{\n        position: absolute;\n        top: 100%;\n        left: 0;\n        width: 100%;\n        z-index: 100;\n        background: rgba(var(--foreground-color, (255,255,255)), 1);\n        border-radius: 0 0 var(--border-radius,0.5rem) var(--border-radius,0.5rem);\n        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);\n        max-height: 20rem;\n        overflow-y: auto;\n        overflow-x: hidden;\n        padding: 0.3rem;\n    }\n    .datalist-item{\n        padding: 0.8rem 1rem;\n        cursor: pointer;\n        transition: background 0.2s;\n        border-radius: 0.5rem;\n        content-visibility: auto;\n    }\n    .datalist-item:focus{\n        outline: none;\n    }\n    .datalist-item:focus-visible{\n        outline: var(--accent-color, teal) solid medium;\n    }\n    @media (any-hover: hover){\n        .icon:hover{\n            background: rgba(var(--text-color, (17,17,17)), 0.1);\n        }\n        .datalist-item:hover{\n            background: rgba(var(--text-color, (17,17,17)), 0.06);\n        }\n    }\n    </style>\n    <div class="outer-container">\n        <label part="input" class="input">\n            <slot name="icon"></slot>\n            <div class="container">\n                <input type="text"/>\n                <div part="placeholder" class="label"></div>\n                <button class="clear" title="Clear" tabindex="-1">\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 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                </button>\n            </div>\n            <slot name="right"></slot>\n        </label>\n        <ul class="datalist hidden"></ul>\n        <p class="feedback-text"></p>\n    </div>\n    ',customElements.define("sm-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smInput.content.cloneNode(!0)),this.inputParent=this.shadowRoot.querySelector(".input"),this.input=this.shadowRoot.querySelector("input"),this.clearBtn=this.shadowRoot.querySelector(".clear"),this.label=this.shadowRoot.querySelector(".label"),this.feedbackText=this.shadowRoot.querySelector(".feedback-text"),this.outerContainer=this.shadowRoot.querySelector(".outer-container"),this.optionList=this.shadowRoot.querySelector(".datalist"),this._helperText="",this._errorText="",this.isRequired=!1,this.datalist=[],this.validationFunction=void 0,this.reflectedAttributes=["value","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","list","autocomplete"],this.reset=this.reset.bind(this),this.clear=this.clear.bind(this),this.focusIn=this.focusIn.bind(this),this.focusOut=this.focusOut.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this),this.allowOnlyNum=this.allowOnlyNum.bind(this),this.vibrate=this.vibrate.bind(this),this.handleOptionClick=this.handleOptionClick.bind(this),this.handleInputNavigation=this.handleInputNavigation.bind(this),this.handleDatalistNavigation=this.handleDatalistNavigation.bind(this),this.handleFocus=this.handleFocus.bind(this),this.handleBlur=this.handleBlur.bind(this)}static get observedAttributes(){return["value","placeholder","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","helper-text","error-text","list"]}get value(){return this.input.value}set value(t){t!==this.input.value&&(this.input.value=t,this.checkInput())}get placeholder(){return this.getAttribute("placeholder")}set placeholder(t){this.setAttribute("placeholder",t)}get type(){return this.getAttribute("type")}set type(t){this.setAttribute("type",t)}get validity(){return this.input.validity}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")}get readOnly(){return this.hasAttribute("readonly")}set readOnly(t){t?this.setAttribute("readonly",""):this.removeAttribute("readonly")}set customValidation(t){this.validationFunction=t}set errorText(t){this._errorText=t}set helperText(t){this._helperText=t}get isValid(){if(""!==this.input.value){const t=this.input.checkValidity();let e=!0;return this.validationFunction&&(e=Boolean(this.validationFunction(this.input.value))),t&&e?(this.feedbackText.classList.remove("error"),this.feedbackText.classList.add("success"),this.feedbackText.textContent=""):this._errorText&&(this.feedbackText.classList.add("error"),this.feedbackText.classList.remove("success"),this.feedbackText.innerHTML=`\n                            <svg class="status-icon status-icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>\n                            ${this._errorText}`),t&&e}}reset(){this.value=""}clear(){this.value="",this.input.focus(),this.fireEvent()}focusIn(){this.input.focus()}focusOut(){this.input.blur()}fireEvent(){let t=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(t)}searchDatalist(t){const e=this.datalist.filter(e=>e.toLowerCase().includes(t.toLowerCase()));if(e.sort((e,n)=>{const i=e.toLowerCase().indexOf(t.toLowerCase()),s=n.toLowerCase().indexOf(t.toLowerCase());return i-s}),e.length){if(this.optionList.children.length>e.length){const t=this.optionList.children.length-e.length;for(let e=0;e<t;e++)this.optionList.removeChild(this.optionList.lastChild)}e.forEach((t,e)=>{if(this.optionList.children[e])this.optionList.children[e].textContent=t;else{const e=document.createElement("li");e.textContent=t,e.classList.add("datalist-item"),e.setAttribute("tabindex","0"),this.optionList.appendChild(e)}}),this.optionList.classList.remove("hidden")}else this.optionList.classList.add("hidden")}checkInput(t){this.hasAttribute("readonly")||(this.clearBtn.style.visibility=""!==this.input.value?"visible":"hidden"),this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder").trim()&&(""!==this.input.value?(this.animate?this.inputParent.classList.add("animate-placeholder"):this.label.classList.add("hidden"),this.datalist.length&&(this.searchTimeout&&clearTimeout(this.searchTimeout),this.searchTimeout=setTimeout(()=>{this.searchDatalist(this.input.value.trim())},100))):(this.animate?this.inputParent.classList.remove("animate-placeholder"):this.label.classList.remove("hidden"),this.feedbackText.textContent="",this.datalist.length&&(this.optionList.innerHTML="",this.optionList.classList.add("hidden"))))}allowOnlyNum(t){1===t.key.length&&(("."!==t.key||!t.target.value.includes(".")&&0!==t.target.value.length)&&["0","1","2","3","4","5","6","7","8","9","."].includes(t.key)||t.preventDefault())}vibrate(){this.outerContainer.animate([{transform:"translateX(-1rem)"},{transform:"translateX(1rem)"},{transform:"translateX(-0.5rem)"},{transform:"translateX(0.5rem)"},{transform:"translateX(0)"}],{duration:300,easing:"ease"})}handleOptionClick(t){this.input.value=t.target.textContent,this.optionList.classList.add("hidden"),this.input.focus()}handleInputNavigation(t){"ArrowDown"===t.key?(t.preventDefault(),this.optionList.children.length&&this.optionList.children[0].focus()):"ArrowUp"===t.key&&(t.preventDefault(),this.optionList.children.length&&this.optionList.children[this.optionList.children.length-1].focus())}handleDatalistNavigation(t){"ArrowUp"===t.key?(t.preventDefault(),this.shadowRoot.activeElement.previousElementSibling?this.shadowRoot.activeElement.previousElementSibling.focus():this.input.focus()):"ArrowDown"===t.key?(t.preventDefault(),this.shadowRoot.activeElement.nextElementSibling?this.shadowRoot.activeElement.nextElementSibling.focus():this.input.focus()):"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.input.value=t.target.textContent,this.optionList.classList.add("hidden"),this.input.focus())}handleFocus(t){this.datalist.length&&this.searchDatalist(this.input.value.trim())}handleBlur(t){this.datalist.length&&this.optionList.classList.add("hidden")}connectedCallback(){this.animate=this.hasAttribute("animate"),this.setAttribute("role","textbox"),this.input.addEventListener("input",this.checkInput),this.clearBtn.addEventListener("click",this.clear),this.datalist.length&&(this.optionList.addEventListener("click",this.handleOptionClick),this.input.addEventListener("keydown",this.handleInputNavigation),this.optionList.addEventListener("keydown",this.handleDatalistNavigation)),this.input.addEventListener("focusin",this.handleFocus),this.addEventListener("focusout",this.handleBlur)}attributeChangedCallback(t,e,n){e!==n&&(this.reflectedAttributes.includes(t)&&(this.hasAttribute(t)?this.input.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.input.removeAttribute(t)),"placeholder"===t?(this.label.textContent=n,this.setAttribute("aria-label",n)):this.hasAttribute("value")?this.checkInput():"type"===t?this.hasAttribute("type")&&"number"===this.getAttribute("type")?(this.input.setAttribute("inputmode","decimal"),this.input.addEventListener("keydown",this.allowOnlyNum)):this.input.removeEventListener("keydown",this.allowOnlyNum):"helper-text"===t?this._helperText=this.getAttribute("helper-text"):"error-text"===t?this._errorText=this.getAttribute("error-text"):"required"===t?(this.isRequired=this.hasAttribute("required"),this.isRequired?this.setAttribute("aria-required","true"):this.setAttribute("aria-required","false")):"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"):"list"===t&&this.hasAttribute("list")&&""!==this.getAttribute("list").trim()&&(this.datalist=this.getAttribute("list").split(",")))}disconnectedCallback(){this.input.removeEventListener("input",this.checkInput),this.clearBtn.removeEventListener("click",this.clear),this.input.removeEventListener("keydown",this.allowOnlyNum),this.optionList.removeEventListener("click",this.handleOptionClick),this.input.removeEventListener("keydown",this.handleInputNavigation),this.optionList.removeEventListener("keydown",this.handleDatalistNavigation),this.input.removeEventListener("focusin",this.handleFocus),this.removeEventListener("focusout",this.handleBlur)}});
\ No newline at end of file
+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    } \n    input[type="search"]::-webkit-search-decoration,\n    input[type="search"]::-webkit-search-cancel-button,\n    input[type="search"]::-webkit-search-results-button,\n    input[type="search"]::-webkit-search-results-decoration { display: none; }\n    input[type=number] {\n    -moz-appearance:textfield;\n    }\n    input[type=number]::-webkit-inner-spin-button, \n    input[type=number]::-webkit-outer-spin-button { \n        -webkit-appearance: none;\n        -moz-appearance: none;\n        appearance: none;\n        margin: 0; \n    }\n    input::-ms-reveal,\n    input::-ms-clear {\n      display: none;\n    }\n    input:invalid{\n        outline: none;\n        -webkit-box-shadow: none;\n                box-shadow: none;\n    }\n    ::-moz-focus-inner{\n        border: none;\n    }\n    :host{\n        display: flex;\n        --success-color: #00C853;\n        --danger-color: red;\n        --width: 100%;\n        --icon-gap: 0.5rem;\n        --min-height: 3.2rem;\n        --background: rgba(var(--text-color, (17,17,17)), 0.06);\n    }\n    .hidden{\n       display: none !important;\n    }\n\n    button{\n        display: flex;\n        border: none;\n        background: none;\n        padding: 0;\n        border-radius: 1rem;\n        min-width: 0;\n        cursor: pointer;\n    }\n    button:focus{\n        outline: var(--accent-color, teal) solid medium;\n    }\n    .icon {\n        height: 1.2rem;\n        width: 1.2rem;\n        fill: rgba(var(--text-color, (17,17,17)), 0.6);\n    }\n    \n    :host(.round) .input{\n        border-radius: 10rem;\n    }\n    .input {\n        display: flex;\n        cursor: text;\n        min-width: 0;\n        text-align: left;\n                align-items: center;\n        position: relative;\n        gap: var(--icon-gap);\n        padding: var(--padding, 0.6rem 0.8rem);\n        border-radius: var(--border-radius,0.3rem);\n        transition: opacity 0.3s, box-shadow 0.2s;\n        background: var(--background);\n        width: 100%;\n        outline: none;\n        min-height: var(--min-height);\n    }\n    .input.readonly .clear{\n        opacity: 0 !important;\n        margin-right: -2rem;\n        pointer-events: none !important;\n    }\n    .clear{\n        visibility: hidden;\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,teal) inset !important;\n    }\n    .disabled{\n        pointer-events: none;\n        opacity: 0.6;\n    }\n    .label {\n        grid-area: 1/1/2/2;\n        font-size: inherit;\n        opacity: .7;\n        font-weight: 400;\n        transition: -webkit-transform 0.3s;\n        transition: transform 0.3s;\n        transition: transform 0.3s, -webkit-transform 0.3s, color .03;\n            transform-origin: left;\n        pointer-events: none;\n        white-space: nowrap;\n        overflow: hidden;\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: grid;\n        grid-template-columns: 1fr auto;\n        position: relative;\n        align-items: center;\n    }    \n    input{\n        grid-area: 1/1/2/2;\n        font-size: inherit;\n        border: none;\n        background: transparent;\n        outline: none;\n        color: inherit;\n        font-family: inherit;\n        width: 100%;\n        caret-color: var(--accent-color, teal);\n    }\n    :host([animate]) .input:focus-within .container input,\n    .animate-placeholder .container input {\n        -webkit-transform: translateY(0.6rem);\n                -ms-transform: translateY(0.6rem);\n            transform: translateY(0.6rem);\n        }\n      \n    :host([animate]) .input:focus-within .label,\n    .animate-placeholder .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,teal)\n    }\n    :host([variant="outlined"]) .input {\n        box-shadow: 0 0 0 1px var(--border-color, rgba(var(--text-color, (17,17,17)), 0.3)) inset;\n        background: rgba(var(--background-color, (255,255,255)), 1);\n    }\n    .animate-placeholder:focus-within:not(.readonly) .label{\n        color: var(--accent-color,teal)\n    }\n    .feedback-text:not(:empty){\n        display: flex;\n        width: 100%;\n        text-align: left;\n        font-size: 0.9rem;\n        align-items: center;\n        padding: 0.8rem 0;\n        color: rgba(var(--text-color, (17,17,17)), 0.8);\n    }\n    .success{\n        color: var(--success-color);\n    }\n    .error{\n        color: var(--danger-color);\n    }\n    .status-icon{\n        margin-right: 0.2rem;\n    }\n    .status-icon--error{\n        fill: var(--danger-color);\n    }\n    .status-icon--success{\n        fill: var(--success-color);\n    }\n    .datalist{\n        position: absolute;\n        top: 100%;\n        left: 0;\n        width: 100%;\n        z-index: 100;\n        background: rgba(var(--foreground-color, (255,255,255)), 1);\n        border-radius: 0 0 var(--border-radius,0.5rem) var(--border-radius,0.5rem);\n        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);\n        max-height: 20rem;\n        overflow-y: auto;\n        overflow-x: hidden;\n        padding: 0.3rem;\n    }\n    .datalist-item{\n        padding: 0.8rem 1rem;\n        cursor: pointer;\n        transition: background 0.2s;\n        border-radius: 0.5rem;\n        content-visibility: auto;\n    }\n    .datalist-item:focus{\n        outline: none;\n    }\n    .datalist-item:focus-visible{\n        outline: var(--accent-color, teal) solid medium;\n    }\n    @media (any-hover: hover){\n        .icon:hover{\n            background: rgba(var(--text-color, (17,17,17)), 0.1);\n        }\n        .datalist-item:hover{\n            background: rgba(var(--text-color, (17,17,17)), 0.06);\n        }\n    }\n    </style>\n    <div class="outer-container">\n        <label part="input" class="input">\n            <slot name="icon"></slot>\n            <div class="container">\n                <input type="text"/>\n                <div part="placeholder" class="label"></div>\n                <button class="clear" title="Clear" tabindex="-1">\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 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                </button>\n            </div>\n            <slot name="right"></slot>\n        </label>\n        <ul class="datalist hidden"></ul>\n        <p class="feedback-text"></p>\n    </div>\n    ',customElements.define("sm-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smInput.content.cloneNode(!0)),this.inputParent=this.shadowRoot.querySelector(".input"),this.input=this.shadowRoot.querySelector("input"),this.clearBtn=this.shadowRoot.querySelector(".clear"),this.label=this.shadowRoot.querySelector(".label"),this.feedbackText=this.shadowRoot.querySelector(".feedback-text"),this.outerContainer=this.shadowRoot.querySelector(".outer-container"),this.optionList=this.shadowRoot.querySelector(".datalist"),this._helperText="",this._errorText="",this.isRequired=!1,this.datalist=[],this.validationFunction=void 0,this.reflectedAttributes=["value","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","list","autocomplete"],this.reset=this.reset.bind(this),this.clear=this.clear.bind(this),this.focusIn=this.focusIn.bind(this),this.focusOut=this.focusOut.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this),this.allowOnlyNum=this.allowOnlyNum.bind(this),this.handleOptionClick=this.handleOptionClick.bind(this),this.handleInputNavigation=this.handleInputNavigation.bind(this),this.handleDatalistNavigation=this.handleDatalistNavigation.bind(this),this.handleFocus=this.handleFocus.bind(this),this.handleBlur=this.handleBlur.bind(this)}static get observedAttributes(){return["value","placeholder","required","disabled","type","inputmode","readonly","min","max","pattern","minlength","maxlength","step","helper-text","error-text","list"]}get value(){return this.input.value}set value(t){t!==this.input.value&&(this.input.value=t,this.checkInput())}get placeholder(){return this.getAttribute("placeholder")}set placeholder(t){this.setAttribute("placeholder",t)}get type(){return this.getAttribute("type")}set type(t){this.setAttribute("type",t)}get validity(){return this.input.validity}get disabled(){return this.hasAttribute("disabled")}set disabled(t){t?this.inputParent.classList.add("disabled"):this.inputParent.classList.remove("disabled")}get readOnly(){return this.hasAttribute("readonly")}set readOnly(t){t?this.setAttribute("readonly",""):this.removeAttribute("readonly")}set customValidation(t){this.validationFunction=t}set errorText(t){this._errorText=t}set helperText(t){this._helperText=t}get isValid(){if(""!==this.input.value){const t=this.input.checkValidity();let e=!0;return this.validationFunction&&(e=Boolean(this.validationFunction(this.input.value))),t&&e?(this.feedbackText.classList.remove("error"),this.feedbackText.classList.add("success"),this.feedbackText.textContent=""):this._errorText&&(this.feedbackText.classList.add("error"),this.feedbackText.classList.remove("success"),this.feedbackText.innerHTML=`\n                            <svg class="status-icon status-icon--error" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>\n                            ${this._errorText}`),t&&e}}reset(){this.value=""}clear(){this.value="",this.input.focus(),this.fireEvent()}focusIn(){this.input.focus()}focusOut(){this.input.blur()}fireEvent(){let t=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(t)}searchDatalist(t){const e=this.datalist.filter(e=>e.toLowerCase().includes(t.toLowerCase()));if(e.sort((e,n)=>{const i=e.toLowerCase().indexOf(t.toLowerCase()),s=n.toLowerCase().indexOf(t.toLowerCase());return i-s}),e.length){if(this.optionList.children.length>e.length){const t=this.optionList.children.length-e.length;for(let e=0;e<t;e++)this.optionList.removeChild(this.optionList.lastChild)}e.forEach((t,e)=>{if(this.optionList.children[e])this.optionList.children[e].textContent=t;else{const e=document.createElement("li");e.textContent=t,e.classList.add("datalist-item"),e.setAttribute("tabindex","0"),this.optionList.appendChild(e)}}),this.optionList.classList.remove("hidden")}else this.optionList.classList.add("hidden")}checkInput(t){this.hasAttribute("readonly")||(this.clearBtn.style.visibility=""!==this.input.value?"visible":"hidden"),this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder").trim()&&(""!==this.input.value?(this.animate?this.inputParent.classList.add("animate-placeholder"):this.label.classList.add("hidden"),this.datalist.length&&(this.searchTimeout&&clearTimeout(this.searchTimeout),this.searchTimeout=setTimeout(()=>{this.searchDatalist(this.input.value.trim())},100))):(this.animate?this.inputParent.classList.remove("animate-placeholder"):this.label.classList.remove("hidden"),this.feedbackText.textContent="",this.datalist.length&&(this.optionList.innerHTML="",this.optionList.classList.add("hidden"))))}allowOnlyNum(t){1===t.key.length&&(("."!==t.key||!t.target.value.includes(".")&&0!==t.target.value.length)&&["0","1","2","3","4","5","6","7","8","9","."].includes(t.key)||t.preventDefault())}handleOptionClick(t){this.input.value=t.target.textContent,this.optionList.classList.add("hidden"),this.input.focus()}handleInputNavigation(t){"ArrowDown"===t.key?(t.preventDefault(),this.optionList.children.length&&this.optionList.children[0].focus()):"ArrowUp"===t.key&&(t.preventDefault(),this.optionList.children.length&&this.optionList.children[this.optionList.children.length-1].focus())}handleDatalistNavigation(t){"ArrowUp"===t.key?(t.preventDefault(),this.shadowRoot.activeElement.previousElementSibling?this.shadowRoot.activeElement.previousElementSibling.focus():this.input.focus()):"ArrowDown"===t.key?(t.preventDefault(),this.shadowRoot.activeElement.nextElementSibling?this.shadowRoot.activeElement.nextElementSibling.focus():this.input.focus()):"Enter"!==t.key&&" "!==t.key||(t.preventDefault(),this.input.value=t.target.textContent,this.optionList.classList.add("hidden"),this.input.focus())}handleFocus(t){this.datalist.length&&this.searchDatalist(this.input.value.trim())}handleBlur(t){this.datalist.length&&this.optionList.classList.add("hidden")}connectedCallback(){this.animate=this.hasAttribute("animate"),this.setAttribute("role","textbox"),this.input.addEventListener("input",this.checkInput),this.clearBtn.addEventListener("click",this.clear),this.datalist.length&&(this.optionList.addEventListener("click",this.handleOptionClick),this.input.addEventListener("keydown",this.handleInputNavigation),this.optionList.addEventListener("keydown",this.handleDatalistNavigation)),this.input.addEventListener("focusin",this.handleFocus),this.addEventListener("focusout",this.handleBlur)}attributeChangedCallback(t,e,n){e!==n&&(this.reflectedAttributes.includes(t)&&(this.hasAttribute(t)?this.input.setAttribute(t,this.getAttribute(t)?this.getAttribute(t):""):this.input.removeAttribute(t)),"placeholder"===t?(this.label.textContent=n,this.setAttribute("aria-label",n)):this.hasAttribute("value")?this.checkInput():"type"===t?this.hasAttribute("type")&&"number"===this.getAttribute("type")?(this.input.setAttribute("inputmode","decimal"),this.input.addEventListener("keydown",this.allowOnlyNum)):this.input.removeEventListener("keydown",this.allowOnlyNum):"helper-text"===t?this._helperText=this.getAttribute("helper-text"):"error-text"===t?this._errorText=this.getAttribute("error-text"):"required"===t?(this.isRequired=this.hasAttribute("required"),this.isRequired?this.setAttribute("aria-required","true"):this.setAttribute("aria-required","false")):"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"):"list"===t&&this.hasAttribute("list")&&""!==this.getAttribute("list").trim()&&(this.datalist=this.getAttribute("list").split(",")))}disconnectedCallback(){this.input.removeEventListener("input",this.checkInput),this.clearBtn.removeEventListener("click",this.clear),this.input.removeEventListener("keydown",this.allowOnlyNum),this.optionList.removeEventListener("click",this.handleOptionClick),this.input.removeEventListener("keydown",this.handleInputNavigation),this.optionList.removeEventListener("keydown",this.handleDatalistNavigation),this.input.removeEventListener("focusin",this.handleFocus),this.removeEventListener("focusout",this.handleBlur)}});
\ No newline at end of file
diff --git a/components/dist/popup.js b/components/dist/popup.js
index ba0dc53..6167802 100644
--- a/components/dist/popup.js
+++ b/components/dist/popup.js
@@ -54,13 +54,12 @@ smPopup.innerHTML = `
     -webkit-transform: scale(0.9) translateY(-2rem) !important;
             transform: scale(0.9) translateY(-2rem) !important;
 }
-.background{
+.backdrop{
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
-    pointer-events: none;
     background: var(--backdrop-background);
     -webkit-transition: opacity 0.3s;
     -o-transition: opacity 0.3s;
@@ -165,7 +164,7 @@ smPopup.innerHTML = `
 }
 </style>
 <div class="popup-container hide" role="dialog">
-    <div part="background" class="background"></div>
+    <div part="backdrop" class="backdrop"></div>
     <div part="popup" class="popup">
         <div part="popup-header" class="popup-top">
             <div class="handle"></div>
@@ -186,7 +185,6 @@ customElements.define('sm-popup', class extends HTMLElement {
 
         this.allowClosing = false;
         this.isOpen = false;
-        this.pinned = false;
         this.offset = 0;
         this.touchStartY = 0;
         this.touchEndY = 0;
@@ -198,7 +196,7 @@ customElements.define('sm-popup', class extends HTMLElement {
         this.mutationObserver
 
         this.popupContainer = this.shadowRoot.querySelector('.popup-container');
-        this.backdrop = this.shadowRoot.querySelector('.background');
+        this.backdrop = this.shadowRoot.querySelector('.backdrop');
         this.dialogBox = this.shadowRoot.querySelector('.popup');
         this.popupBodySlot = this.shadowRoot.querySelector('.popup-body slot');
         this.popupHeader = this.shadowRoot.querySelector('.popup-top');
@@ -211,6 +209,7 @@ customElements.define('sm-popup', class extends HTMLElement {
         this.handleTouchMove = this.handleTouchMove.bind(this);
         this.handleTouchEnd = this.handleTouchEnd.bind(this);
         this.detectFocus = this.detectFocus.bind(this);
+        this.handleSoftDismiss = this.handleSoftDismiss.bind(this);
     }
 
     static get observedAttributes() {
@@ -260,44 +259,47 @@ customElements.define('sm-popup', class extends HTMLElement {
 
     show(options = {}) {
         const { pinned = false } = options;
-        if (!this.isOpen) {
-            const animOptions = {
-                duration: 300,
-                easing: 'ease'
-            }
-            popupStack.push({
-                popup: this,
-                permission: pinned
-            });
-            if (popupStack.items.length > 1) {
-                this.animateTo(popupStack.items[popupStack.items.length - 2].popup.shadowRoot.querySelector('.popup'), [
-                    { transform: 'none' },
-                    { transform: (window.innerWidth > 640) ? 'scale(0.95)' : 'translateY(-1.5rem)' },
-                ], animOptions)
-            }
-            this.popupContainer.classList.remove('hide');
-            if (!this.offset)
-                this.backdrop.animate([
-                    { opacity: 0 },
-                    { opacity: 1 },
-                ], animOptions)
-            this.setStateOpen()
-            this.dispatchEvent(
-                new CustomEvent("popupopened", {
-                    bubbles: true,
-                    detail: {
-                        popup: this,
-                    }
-                })
-            );
-            this.pinned = pinned;
-            this.isOpen = true;
-            document.body.style.overflow = 'hidden';
-            document.body.style.top = `-${window.scrollY}px`;
-            const elementToFocus = this.autoFocus || this.focusable[0];
+        if (this.isOpen) return;
+        const animOptions = {
+            duration: 300,
+            easing: 'ease'
+        }
+        popupStack.push({
+            popup: this,
+            permission: pinned
+        });
+        if (popupStack.items.length > 1) {
+            this.animateTo(popupStack.items[popupStack.items.length - 2].popup.shadowRoot.querySelector('.popup'), [
+                { transform: 'none' },
+                { transform: (window.innerWidth > 640) ? 'scale(0.95)' : 'translateY(-1.5rem)' },
+            ], animOptions)
+        }
+        this.popupContainer.classList.remove('hide');
+        if (!this.offset)
+            this.backdrop.animate([
+                { opacity: 0 },
+                { opacity: 1 },
+            ], animOptions)
+        this.setStateOpen()
+        this.dispatchEvent(
+            new CustomEvent("popupopened", {
+                bubbles: true,
+            })
+        );
+        this.pinned = pinned;
+        this.isOpen = true;
+        document.body.style.overflow = 'hidden';
+        document.body.style.top = `-${window.scrollY}px`;
+        const elementToFocus = this.autoFocus || this.focusable[0];
+        if (elementToFocus)
             elementToFocus.tagName.includes('SM-') ? elementToFocus.focusIn() : elementToFocus.focus();
-            if (!this.hasAttribute('open'))
-                this.setAttribute('open', '');
+        if (!this.hasAttribute('open')) {
+            this.setAttribute('open', '');
+            this.addEventListener('keydown', this.detectFocus);
+            this.resizeObserver.observe(this);
+            this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true })
+            this.popupHeader.addEventListener('touchstart', this.handleTouchStart, { passive: true });
+            this.backdrop.addEventListener('mousedown', this.handleSoftDismiss);
         }
     }
     hide() {
@@ -343,10 +345,14 @@ customElements.define('sm-popup', class extends HTMLElement {
                 { transform: (window.innerWidth > 640) ? 'scale(0.95)' : 'translateY(-1.5rem)' },
                 { transform: 'none' },
             ], animOptions)
-
         } else {
             this.resumeScrolling();
         }
+        this.resizeObserver.disconnect();
+        this.mutationObserver.disconnect()
+        this.removeEventListener('keydown', this.detectFocus);
+        this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, { passive: true });
+        this.backdrop.removeEventListener('mousedown', this.handleSoftDismiss);
     }
 
     handleTouchStart(e) {
@@ -414,21 +420,29 @@ customElements.define('sm-popup', class extends HTMLElement {
         this.autoFocus = this.querySelector('[autofocus]')
     }
 
+    handleSoftDismiss() {
+        if (this.pinned) {
+            this.dialogBox.animate([
+                { transform: 'translateX(-1rem)' },
+                { transform: 'translateX(1rem)' },
+                { transform: 'translateX(-0.5rem)' },
+                { transform: 'translateX(0.5rem)' },
+                { transform: 'translateX(0)' },
+            ], {
+                duration: 300,
+                easing: 'ease'
+            });
+        } else {
+            this.hide();
+        }
+    }
+
     connectedCallback() {
         this.popupBodySlot.addEventListener('slotchange', () => {
             this.forms = this.querySelectorAll('sm-form');
             this.updateFocusableList()
         });
-        this.popupContainer.addEventListener('mousedown', e => {
-            if (e.target === this.popupContainer && !this.pinned) {
-                if (this.pinned) {
-                    this.setStateOpen();
-                } else
-                    this.hide();
-            }
-        });
-
-        const resizeObserver = new ResizeObserver(entries => {
+        this.resizeObserver = new ResizeObserver(entries => {
             for (let entry of entries) {
                 if (entry.contentBoxSize) {
                     // Firefox implements `contentBoxSize` as a single content rect, rather than an array
@@ -439,21 +453,17 @@ customElements.define('sm-popup', class extends HTMLElement {
                 }
             }
         });
-        resizeObserver.observe(this);
 
         this.mutationObserver = new MutationObserver(entries => {
             this.updateFocusableList()
         })
-        this.mutationObserver.observe(this, { attributes: true, childList: true, subtree: true })
-
-        this.addEventListener('keydown', this.detectFocus);
-        this.popupHeader.addEventListener('touchstart', this.handleTouchStart, { passive: true });
     }
     disconnectedCallback() {
-        this.removeEventListener('keydown', this.detectFocus);
-        resizeObserver.unobserve();
+        this.resizeObserver.disconnect();
         this.mutationObserver.disconnect()
+        this.removeEventListener('keydown', this.detectFocus);
         this.popupHeader.removeEventListener('touchstart', this.handleTouchStart, { passive: true });
+        this.backdrop.removeEventListener('mousedown', this.handleSoftDismiss);
     }
     attributeChangedCallback(name) {
         if (name === 'open') {
diff --git a/components/dist/popup.min.js b/components/dist/popup.min.js
index 46c9acd..3a208f5 100644
--- a/components/dist/popup.min.js
+++ b/components/dist/popup.min.js
@@ -1 +1 @@
-class Stack{constructor(){this.items=[]}push(t){this.items.push(t)}pop(){return 0==this.items.length?"Underflow":this.items.pop()}peek(){return this.items[this.items.length-1]}}const popupStack=new Stack,smPopup=document.createElement("template");smPopup.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \n:host{\n    position: fixed;\n    display: -ms-grid;\n    display: grid;\n    z-index: 10;\n    --width: 100%;\n    --height: auto;\n    --min-width: auto;\n    --min-height: auto;\n    --backdrop-background: rgba(0, 0, 0, 0.6);\n    --border-radius: 0.8rem 0.8rem 0 0;\n}\n.popup-container{\n    display: -ms-grid;\n    display: grid;\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    place-items: center;\n    z-index: 10;\n    touch-action: none;\n}\n:host(.stacked) .popup{\n    -webkit-transform: scale(0.9) translateY(-2rem) !important;\n            transform: scale(0.9) translateY(-2rem) !important;\n}\n.background{\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    pointer-events: none;\n    background: var(--backdrop-background);\n    -webkit-transition: opacity 0.3s;\n    -o-transition: opacity 0.3s;\n    transition: opacity 0.3s;\n}\n.popup{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n            flex-direction: column;\n    position: relative;\n    -ms-flex-item-align: end;\n        align-self: flex-end;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n    width: var(--width);\n    min-width: var(--min-width);\n    height: var(--height);\n    min-height: var(--min-height);\n    max-height: 90vh;\n    border-radius: var(--border-radius);\n    background: rgba(var(--background-color, (255,255,255)), 1);\n    -webkit-box-shadow: 0 -1rem 2rem #00000020;\n            box-shadow: 0 -1rem 2rem #00000020;\n}\n.container-header{\n    display: -webkit-box;\n    display: flex;\n    width: 100%;\n    touch-action: none;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.popup-top{\n    display: -webkit-box;\n    display: flex;\n    width: 100%;\n}\n.popup-body{\n    display: -webkit-box;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n    width: 100%;\n    padding: var(--body-padding, 1.5rem);\n    overflow-y: auto;\n}\n.hide{\n    display:none;\n}\n@media screen and (min-width: 640px){\n    :host{\n        --border-radius: 0.5rem;\n    }\n    .popup{\n        -ms-flex-item-align: center;\n            -ms-grid-row-align: center;\n            align-self: center;\n        border-radius: var(--border-radius);\n        height: var(--height);\n        -webkit-box-shadow: 0 3rem 2rem -0.5rem #00000040;\n                box-shadow: 0 3rem 2rem -0.5rem #00000040;\n    }\n}\n@media screen and (max-width: 640px){\n    .popup-top{\n        -webkit-box-orient: vertical;\n        -webkit-box-direction: normal;\n                flex-direction: column;\n        -webkit-box-align: center;\n                align-items: center;\n    }\n    .handle{\n        height: 0.3rem;\n        width: 2rem;\n        background: rgba(var(--text-color, (17,17,17)), .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, (17,17,17)), 0.3);\n        border-radius: 1rem;\n        &:hover{\n            background: rgba(var(--text-color, (17,17,17))), 0.5);\n        }\n    }\n}\n</style>\n<div class="popup-container hide" role="dialog">\n    <div part="background" class="background"></div>\n    <div part="popup" class="popup">\n        <div part="popup-header" class="popup-top">\n            <div class="handle"></div>\n            <slot name="header"></slot>\n        </div>\n        <div part="popup-body" class="popup-body">\n            <slot></slot>\n        </div>\n    </div>\n</div>\n',customElements.define("sm-popup",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smPopup.content.cloneNode(!0)),this.allowClosing=!1,this.isOpen=!1,this.pinned=!1,this.offset=0,this.touchStartY=0,this.touchEndY=0,this.touchStartTime=0,this.touchEndTime=0,this.touchEndAnimation=void 0,this.focusable,this.autoFocus,this.mutationObserver,this.popupContainer=this.shadowRoot.querySelector(".popup-container"),this.backdrop=this.shadowRoot.querySelector(".background"),this.dialogBox=this.shadowRoot.querySelector(".popup"),this.popupBodySlot=this.shadowRoot.querySelector(".popup-body slot"),this.popupHeader=this.shadowRoot.querySelector(".popup-top"),this.resumeScrolling=this.resumeScrolling.bind(this),this.setStateOpen=this.setStateOpen.bind(this),this.show=this.show.bind(this),this.hide=this.hide.bind(this),this.handleTouchStart=this.handleTouchStart.bind(this),this.handleTouchMove=this.handleTouchMove.bind(this),this.handleTouchEnd=this.handleTouchEnd.bind(this),this.detectFocus=this.detectFocus.bind(this)}static get observedAttributes(){return["open"]}get open(){return this.isOpen}animateTo(t,e,n){const i=t.animate(e,{...n,fill:"both"});return i.finished.then(()=>{i.commitStyles(),i.cancel()}),i}resumeScrolling(){const t=document.body.style.top;window.scrollTo(0,-1*parseInt(t||"0")),document.body.style.overflow="",document.body.style.top="initial"}setStateOpen(){if(!this.isOpen||this.offset){const t={duration:300,easing:"ease"},e=window.innerWidth>640?"scale(1.1)":`translateY(${this.offset?`${this.offset}px`:"100%"})`;this.animateTo(this.dialogBox,[{opacity:this.offset?1:0,transform:e},{opacity:1,transform:"none"}],t)}}show(t={}){const{pinned:e=!1}=t;if(!this.isOpen){const t={duration:300,easing:"ease"};popupStack.push({popup:this,permission:e}),popupStack.items.length>1&&this.animateTo(popupStack.items[popupStack.items.length-2].popup.shadowRoot.querySelector(".popup"),[{transform:"none"},{transform:window.innerWidth>640?"scale(0.95)":"translateY(-1.5rem)"}],t),this.popupContainer.classList.remove("hide"),this.offset||this.backdrop.animate([{opacity:0},{opacity:1}],t),this.setStateOpen(),this.dispatchEvent(new CustomEvent("popupopened",{bubbles:!0,detail:{popup:this}})),this.pinned=e,this.isOpen=!0,document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`;const n=this.autoFocus||this.focusable[0];n.tagName.includes("SM-")?n.focusIn():n.focus(),this.hasAttribute("open")||this.setAttribute("open","")}}hide(){const t={duration:150,easing:"ease"};this.backdrop.animate([{opacity:1},{opacity:0}],t),this.animateTo(this.dialogBox,[{opacity:1,transform:window.innerWidth>640?"none":`translateY(${this.offset?`${this.offset}px`:"0"})`},{opacity:0,transform:window.innerWidth>640?"scale(1.1)":"translateY(100%)"}],t).finished.finally(()=>{this.popupContainer.classList.add("hide"),this.dialogBox.style="",this.removeAttribute("open"),this.forms.length&&this.forms.forEach(t=>t.reset()),this.dispatchEvent(new CustomEvent("popupclosed",{bubbles:!0,detail:{popup:this}})),this.isOpen=!1}),popupStack.pop(),popupStack.items.length?this.animateTo(popupStack.items[popupStack.items.length-1].popup.shadowRoot.querySelector(".popup"),[{transform:window.innerWidth>640?"scale(0.95)":"translateY(-1.5rem)"},{transform:"none"}],t):this.resumeScrolling()}handleTouchStart(t){this.offset=0,this.popupHeader.addEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.popupHeader.addEventListener("touchend",this.handleTouchEnd,{passive:!0}),this.touchStartY=t.changedTouches[0].clientY,this.touchStartTime=t.timeStamp}handleTouchMove(t){this.touchStartY<t.changedTouches[0].clientY&&(this.offset=t.changedTouches[0].clientY-this.touchStartY,this.touchEndAnimation=window.requestAnimationFrame(()=>{this.dialogBox.style.transform=`translateY(${this.offset}px)`}))}handleTouchEnd(t){if(this.touchEndTime=t.timeStamp,cancelAnimationFrame(this.touchEndAnimation),this.touchEndY=t.changedTouches[0].clientY,this.threshold=.3*this.dialogBox.getBoundingClientRect().height,this.touchEndTime-this.touchStartTime>200)if(this.touchEndY-this.touchStartY>this.threshold){if(this.pinned)return void this.setStateOpen();this.hide()}else this.setStateOpen();else if(this.touchEndY>this.touchStartY){if(this.pinned)return void this.setStateOpen();this.hide()}this.popupHeader.removeEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.popupHeader.removeEventListener("touchend",this.handleTouchEnd,{passive:!0})}detectFocus(t){if("Tab"===t.key){const e=this.focusable[this.focusable.length-1],n=this.focusable[0];t.shiftKey&&document.activeElement===n?(t.preventDefault(),e.tagName.includes("SM-")?e.focusIn():e.focus()):t.shiftKey||document.activeElement!==e||(t.preventDefault(),n.tagName.includes("SM-")?n.focusIn():n.focus())}}updateFocusableList(){this.focusable=this.querySelectorAll('sm-button:not([disabled]), button:not([disabled]), [href], sm-input, input:not([readonly]), sm-select, select, sm-checkbox, sm-textarea, textarea, [tabindex]:not([tabindex="-1"])'),this.autoFocus=this.querySelector("[autofocus]")}connectedCallback(){this.popupBodySlot.addEventListener("slotchange",()=>{this.forms=this.querySelectorAll("sm-form"),this.updateFocusableList()}),this.popupContainer.addEventListener("mousedown",t=>{t.target!==this.popupContainer||this.pinned||(this.pinned?this.setStateOpen():this.hide())});const t=new ResizeObserver(t=>{for(let e of t)if(e.contentBoxSize){const t=Array.isArray(e.contentBoxSize)?e.contentBoxSize[0]:e.contentBoxSize;this.threshold=.3*t.blockSize.height}else this.threshold=.3*e.contentRect.height});t.observe(this),this.mutationObserver=new MutationObserver(t=>{this.updateFocusableList()}),this.mutationObserver.observe(this,{attributes:!0,childList:!0,subtree:!0}),this.addEventListener("keydown",this.detectFocus),this.popupHeader.addEventListener("touchstart",this.handleTouchStart,{passive:!0})}disconnectedCallback(){this.removeEventListener("keydown",this.detectFocus),resizeObserver.unobserve(),this.mutationObserver.disconnect(),this.popupHeader.removeEventListener("touchstart",this.handleTouchStart,{passive:!0})}attributeChangedCallback(t){"open"===t&&this.hasAttribute("open")&&this.show()}});
\ No newline at end of file
+class Stack{constructor(){this.items=[]}push(t){this.items.push(t)}pop(){return 0==this.items.length?"Underflow":this.items.pop()}peek(){return this.items[this.items.length-1]}}const popupStack=new Stack,smPopup=document.createElement("template");smPopup.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \n:host{\n    position: fixed;\n    display: -ms-grid;\n    display: grid;\n    z-index: 10;\n    --width: 100%;\n    --height: auto;\n    --min-width: auto;\n    --min-height: auto;\n    --backdrop-background: rgba(0, 0, 0, 0.6);\n    --border-radius: 0.8rem 0.8rem 0 0;\n}\n.popup-container{\n    display: -ms-grid;\n    display: grid;\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    place-items: center;\n    z-index: 10;\n    touch-action: none;\n}\n:host(.stacked) .popup{\n    -webkit-transform: scale(0.9) translateY(-2rem) !important;\n            transform: scale(0.9) translateY(-2rem) !important;\n}\n.backdrop{\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    background: var(--backdrop-background);\n    -webkit-transition: opacity 0.3s;\n    -o-transition: opacity 0.3s;\n    transition: opacity 0.3s;\n}\n.popup{\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n            flex-direction: column;\n    position: relative;\n    -ms-flex-item-align: end;\n        align-self: flex-end;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n    width: var(--width);\n    min-width: var(--min-width);\n    height: var(--height);\n    min-height: var(--min-height);\n    max-height: 90vh;\n    border-radius: var(--border-radius);\n    background: rgba(var(--background-color, (255,255,255)), 1);\n    -webkit-box-shadow: 0 -1rem 2rem #00000020;\n            box-shadow: 0 -1rem 2rem #00000020;\n}\n.container-header{\n    display: -webkit-box;\n    display: flex;\n    width: 100%;\n    touch-action: none;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.popup-top{\n    display: -webkit-box;\n    display: flex;\n    width: 100%;\n}\n.popup-body{\n    display: -webkit-box;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n    width: 100%;\n    padding: var(--body-padding, 1.5rem);\n    overflow-y: auto;\n}\n.hide{\n    display:none;\n}\n@media screen and (min-width: 640px){\n    :host{\n        --border-radius: 0.5rem;\n    }\n    .popup{\n        -ms-flex-item-align: center;\n            -ms-grid-row-align: center;\n            align-self: center;\n        border-radius: var(--border-radius);\n        height: var(--height);\n        -webkit-box-shadow: 0 3rem 2rem -0.5rem #00000040;\n                box-shadow: 0 3rem 2rem -0.5rem #00000040;\n    }\n}\n@media screen and (max-width: 640px){\n    .popup-top{\n        -webkit-box-orient: vertical;\n        -webkit-box-direction: normal;\n                flex-direction: column;\n        -webkit-box-align: center;\n                align-items: center;\n    }\n    .handle{\n        height: 0.3rem;\n        width: 2rem;\n        background: rgba(var(--text-color, (17,17,17)), .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, (17,17,17)), 0.3);\n        border-radius: 1rem;\n        &:hover{\n            background: rgba(var(--text-color, (17,17,17))), 0.5);\n        }\n    }\n}\n</style>\n<div class="popup-container hide" role="dialog">\n    <div part="backdrop" class="backdrop"></div>\n    <div part="popup" class="popup">\n        <div part="popup-header" class="popup-top">\n            <div class="handle"></div>\n            <slot name="header"></slot>\n        </div>\n        <div part="popup-body" class="popup-body">\n            <slot></slot>\n        </div>\n    </div>\n</div>\n',customElements.define("sm-popup",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smPopup.content.cloneNode(!0)),this.allowClosing=!1,this.isOpen=!1,this.offset=0,this.touchStartY=0,this.touchEndY=0,this.touchStartTime=0,this.touchEndTime=0,this.touchEndAnimation=void 0,this.focusable,this.autoFocus,this.mutationObserver,this.popupContainer=this.shadowRoot.querySelector(".popup-container"),this.backdrop=this.shadowRoot.querySelector(".backdrop"),this.dialogBox=this.shadowRoot.querySelector(".popup"),this.popupBodySlot=this.shadowRoot.querySelector(".popup-body slot"),this.popupHeader=this.shadowRoot.querySelector(".popup-top"),this.resumeScrolling=this.resumeScrolling.bind(this),this.setStateOpen=this.setStateOpen.bind(this),this.show=this.show.bind(this),this.hide=this.hide.bind(this),this.handleTouchStart=this.handleTouchStart.bind(this),this.handleTouchMove=this.handleTouchMove.bind(this),this.handleTouchEnd=this.handleTouchEnd.bind(this),this.detectFocus=this.detectFocus.bind(this),this.handleSoftDismiss=this.handleSoftDismiss.bind(this)}static get observedAttributes(){return["open"]}get open(){return this.isOpen}animateTo(t,e,n){const i=t.animate(e,{...n,fill:"both"});return i.finished.then(()=>{i.commitStyles(),i.cancel()}),i}resumeScrolling(){const t=document.body.style.top;window.scrollTo(0,-1*parseInt(t||"0")),document.body.style.overflow="",document.body.style.top="initial"}setStateOpen(){if(!this.isOpen||this.offset){const t={duration:300,easing:"ease"},e=window.innerWidth>640?"scale(1.1)":`translateY(${this.offset?`${this.offset}px`:"100%"})`;this.animateTo(this.dialogBox,[{opacity:this.offset?1:0,transform:e},{opacity:1,transform:"none"}],t)}}show(t={}){const{pinned:e=!1}=t;if(this.isOpen)return;const n={duration:300,easing:"ease"};popupStack.push({popup:this,permission:e}),popupStack.items.length>1&&this.animateTo(popupStack.items[popupStack.items.length-2].popup.shadowRoot.querySelector(".popup"),[{transform:"none"},{transform:window.innerWidth>640?"scale(0.95)":"translateY(-1.5rem)"}],n),this.popupContainer.classList.remove("hide"),this.offset||this.backdrop.animate([{opacity:0},{opacity:1}],n),this.setStateOpen(),this.dispatchEvent(new CustomEvent("popupopened",{bubbles:!0})),this.pinned=e,this.isOpen=!0,document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`;const i=this.autoFocus||this.focusable[0];i&&(i.tagName.includes("SM-")?i.focusIn():i.focus()),this.hasAttribute("open")||(this.setAttribute("open",""),this.addEventListener("keydown",this.detectFocus),this.resizeObserver.observe(this),this.mutationObserver.observe(this,{attributes:!0,childList:!0,subtree:!0}),this.popupHeader.addEventListener("touchstart",this.handleTouchStart,{passive:!0}),this.backdrop.addEventListener("mousedown",this.handleSoftDismiss))}hide(){const t={duration:150,easing:"ease"};this.backdrop.animate([{opacity:1},{opacity:0}],t),this.animateTo(this.dialogBox,[{opacity:1,transform:window.innerWidth>640?"none":`translateY(${this.offset?`${this.offset}px`:"0"})`},{opacity:0,transform:window.innerWidth>640?"scale(1.1)":"translateY(100%)"}],t).finished.finally(()=>{this.popupContainer.classList.add("hide"),this.dialogBox.style="",this.removeAttribute("open"),this.forms.length&&this.forms.forEach(t=>t.reset()),this.dispatchEvent(new CustomEvent("popupclosed",{bubbles:!0,detail:{popup:this}})),this.isOpen=!1}),popupStack.pop(),popupStack.items.length?this.animateTo(popupStack.items[popupStack.items.length-1].popup.shadowRoot.querySelector(".popup"),[{transform:window.innerWidth>640?"scale(0.95)":"translateY(-1.5rem)"},{transform:"none"}],t):this.resumeScrolling(),this.resizeObserver.disconnect(),this.mutationObserver.disconnect(),this.removeEventListener("keydown",this.detectFocus),this.popupHeader.removeEventListener("touchstart",this.handleTouchStart,{passive:!0}),this.backdrop.removeEventListener("mousedown",this.handleSoftDismiss)}handleTouchStart(t){this.offset=0,this.popupHeader.addEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.popupHeader.addEventListener("touchend",this.handleTouchEnd,{passive:!0}),this.touchStartY=t.changedTouches[0].clientY,this.touchStartTime=t.timeStamp}handleTouchMove(t){this.touchStartY<t.changedTouches[0].clientY&&(this.offset=t.changedTouches[0].clientY-this.touchStartY,this.touchEndAnimation=window.requestAnimationFrame(()=>{this.dialogBox.style.transform=`translateY(${this.offset}px)`}))}handleTouchEnd(t){if(this.touchEndTime=t.timeStamp,cancelAnimationFrame(this.touchEndAnimation),this.touchEndY=t.changedTouches[0].clientY,this.threshold=.3*this.dialogBox.getBoundingClientRect().height,this.touchEndTime-this.touchStartTime>200)if(this.touchEndY-this.touchStartY>this.threshold){if(this.pinned)return void this.setStateOpen();this.hide()}else this.setStateOpen();else if(this.touchEndY>this.touchStartY){if(this.pinned)return void this.setStateOpen();this.hide()}this.popupHeader.removeEventListener("touchmove",this.handleTouchMove,{passive:!0}),this.popupHeader.removeEventListener("touchend",this.handleTouchEnd,{passive:!0})}detectFocus(t){if("Tab"===t.key){const e=this.focusable[this.focusable.length-1],n=this.focusable[0];t.shiftKey&&document.activeElement===n?(t.preventDefault(),e.tagName.includes("SM-")?e.focusIn():e.focus()):t.shiftKey||document.activeElement!==e||(t.preventDefault(),n.tagName.includes("SM-")?n.focusIn():n.focus())}}updateFocusableList(){this.focusable=this.querySelectorAll('sm-button:not([disabled]), button:not([disabled]), [href], sm-input, input:not([readonly]), sm-select, select, sm-checkbox, sm-textarea, textarea, [tabindex]:not([tabindex="-1"])'),this.autoFocus=this.querySelector("[autofocus]")}handleSoftDismiss(){this.pinned?this.dialogBox.animate([{transform:"translateX(-1rem)"},{transform:"translateX(1rem)"},{transform:"translateX(-0.5rem)"},{transform:"translateX(0.5rem)"},{transform:"translateX(0)"}],{duration:300,easing:"ease"}):this.hide()}connectedCallback(){this.popupBodySlot.addEventListener("slotchange",()=>{this.forms=this.querySelectorAll("sm-form"),this.updateFocusableList()}),this.resizeObserver=new ResizeObserver(t=>{for(let e of t)if(e.contentBoxSize){const t=Array.isArray(e.contentBoxSize)?e.contentBoxSize[0]:e.contentBoxSize;this.threshold=.3*t.blockSize.height}else this.threshold=.3*e.contentRect.height}),this.mutationObserver=new MutationObserver(t=>{this.updateFocusableList()})}disconnectedCallback(){this.resizeObserver.disconnect(),this.mutationObserver.disconnect(),this.removeEventListener("keydown",this.detectFocus),this.popupHeader.removeEventListener("touchstart",this.handleTouchStart,{passive:!0}),this.backdrop.removeEventListener("mousedown",this.handleSoftDismiss)}attributeChangedCallback(t){"open"===t&&this.hasAttribute("open")&&this.show()}});
\ No newline at end of file
diff --git a/components/dist/strip-select.min.js b/components/dist/strip-select.min.js
deleted file mode 100644
index 32e75b9..0000000
--- a/components/dist/strip-select.min.js
+++ /dev/null
@@ -1 +0,0 @@
-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        padding: 1rem 0;\n        max-width: 100%;\n    }\n    .hide{\n        opacity: 0;\n        pointer-events: none;\n    }\n    input[type="radio"]{\n        display: none;\n    }\n    .scrolling-container{\n        position: relative;\n        display: grid;\n        grid-template-columns: min-content minmax(0,1fr) min-content;\n        grid-template-rows: 1fr;\n    }\n    .strip-select{\n        display: flex;\n        position: relative;\n        grid-area: 1/1/2/-1;\n        gap: var(--gap, 0.5rem);\n        overflow: auto hidden;\n    }\n    :host([multiline]) .strip-select{\n        flex-wrap: wrap;\n    }\n    :host(:not([multiline])) .strip-select{\n        max-width: 100%;   \n        align-items: center;\n    }\n    .nav-button{\n        display: flex;\n        z-index: 2;\n        border: none;\n        padding: 0.3rem;\n        cursor: pointer;\n        align-items: center;\n        background: rgba(var(--background-color,(255,255,255)), 1);\n        transition: opacity 0.2s;\n        grid-row: 1;\n    }\n    .nav-button--left{\n        grid-column: 1;\n        justify-self: start;\n    }\n    .nav-button--right{\n        grid-column: 3;\n        justify-self: end;\n    }\n    .cover{\n        position: absolute;\n        z-index: 1;\n        width: 5rem;\n        height: 100%;\n        pointer-events: none;\n        grid-row: 1;\n        transition: opacity 0.2s;\n    }\n    .cover--left{\n        grid-column: 1;\n    }\n    .cover--right{\n        grid-column: 3;\n    }\n    .nav-button--right::before{\n        background-color: red;\n    }\n    .icon{\n        height: 1.2rem;\n        width: 1.2rem;\n        fill: rgba(var(--text-color,(17,17,17)), .8);\n    }\n    @media (hover: none){\n        ::-webkit-scrollbar {\n            height: 0;\n        }\n        .nav-button{\n            display: none;\n        }\n        .strip-select{\n            overflow: auto hidden;\n        }\n        .cover{\n            width: 2rem;\n        }\n        .cover--left{\n            background: linear-gradient(90deg, rgba(var(--background-color,(255,255,255)), 1), transparent);\n        }\n        .cover--right{\n            right: 0;\n            background: linear-gradient(90deg, transparent, rgba(var(--background-color,(255,255,255)), 1));\n        }\n    }\n    @media (hover: hover){\n        ::-webkit-scrollbar-track {\n            background-color: transparent !important;\n        }\n        ::-webkit-scrollbar {\n            height: 0;\n            background-color: transparent;\n        }\n        .strip-select{\n            overflow: hidden;\n        }\n        .cover--left{\n            background: linear-gradient(90deg, rgba(var(--background-color,(255,255,255)), 1) 60%, transparent);\n        }\n        .cover--right{\n            right: 0;\n            background: linear-gradient(90deg, transparent 0%, rgba(var(--background-color,(255,255,255)), 1) 40%);\n        }\n    }\n</style>\n<section class="scrolling-container">\n    <div class="cover cover--left hide"></div>\n    <button class="nav-button nav-button--left hide">\n        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10.828 12l4.95 4.95-1.414 1.414L8 12l6.364-6.364 1.414 1.414z"/></svg>\n    </button>\n    <section class="strip-select">\n        <slot></slot>\n    </section>\n    <button class="nav-button nav-button--right hide">\n        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z"/></svg>\n    </button>\n    <div class="cover cover--right hide"></div>\n</section>\n\n',customElements.define("strip-select",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(stripSelect.content.cloneNode(!0)),this.stripSelect=this.shadowRoot.querySelector(".strip-select"),this.slottedOptions=void 0,this._value=void 0,this.scrollDistance=0,this.assignedElements=[],this.scrollLeft=this.scrollLeft.bind(this),this.scrollRight=this.scrollRight.bind(this),this.fireEvent=this.fireEvent.bind(this),this.setSelectedOption=this.setSelectedOption.bind(this)}get value(){return this._value}set value(e){this.setSelectedOption(e)}scrollLeft(){this.stripSelect.scrollBy({left:-this.scrollDistance,behavior:"smooth"})}scrollRight(){this.stripSelect.scrollBy({left:this.scrollDistance,behavior:"smooth"})}setSelectedOption(e){this._value!==e&&(this._value=e,this.assignedElements.forEach(t=>{t.value===e?(t.setAttribute("selected",""),t.scrollIntoView({behavior:"smooth",block:"nearest",inline:"center"})):t.removeAttribute("selected")}))}fireEvent(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0,detail:{value:this._value}}))}connectedCallback(){this.setAttribute("role","listbox");const e=this.shadowRoot.querySelector("slot"),t=this.shadowRoot.querySelector(".cover--left"),n=this.shadowRoot.querySelector(".cover--right"),i=this.shadowRoot.querySelector(".nav-button--left"),s=this.shadowRoot.querySelector(".nav-button--right");e.addEventListener("slotchange",o=>{clearTimeout(this.slotChangeTimeout),this.slotChangeTimeout=setTimeout(()=>{this.assignedElements=e.assignedElements(),this.assignedElements.forEach(e=>{e.hasAttribute("selected")&&(this._value=e.value)}),this.hasAttribute("multiline")||(this.assignedElements.length>0?(r.observe(this.assignedElements[0]),l.observe(this.assignedElements[this.assignedElements.length-1])):(i.classList.add("hide"),s.classList.add("hide"),t.classList.add("hide"),n.classList.add("hide"),r.disconnect(),l.disconnect()))},100)});const o=new ResizeObserver(e=>{e.forEach(e=>{if(e.contentBoxSize){const t=Array.isArray(e.contentBoxSize)?e.contentBoxSize[0]:e.contentBoxSize;this.scrollDistance=.6*t.inlineSize}else this.scrollDistance=.6*e.contentRect.width})});o.observe(this),this.stripSelect.addEventListener("option-clicked",e=>{this._value!==e.target.value&&(this.setSelectedOption(e.target.value),this.fireEvent())});const r=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting?(i.classList.add("hide"),t.classList.add("hide")):(i.classList.remove("hide"),t.classList.remove("hide"))})},{threshold:.9,root:this}),l=new IntersectionObserver(e=>{e.forEach(e=>{e.isIntersecting?(s.classList.add("hide"),n.classList.add("hide")):(s.classList.remove("hide"),n.classList.remove("hide"))})},{threshold:.9,root:this});i.addEventListener("click",this.scrollLeft),s.addEventListener("click",this.scrollRight)}disconnectedCallback(){navButtonLeft.removeEventListener("click",this.scrollLeft),navButtonRight.removeEventListener("click",this.scrollRight)}});const stripOption=document.createElement("template");stripOption.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    }  \n    .strip-option{\n        display: flex;\n        flex-shrink: 0;\n        cursor: pointer;\n        white-space: nowrap;\n        padding: var(--padding, 0.4rem 0.6rem);\n        transition: background 0.3s;\n        border-radius: var(--border-radius, 2rem);\n        -webkit-tap-highlight-color: transparent;\n    }\n    :host([selected]) .strip-option{\n        color: var(--selected-option-color, rgba(var(--background-color,white)));\n        background-color: var(--selected-background-color, var(--accent-color,teal));\n    }\n    :host(:focus-within){\n        outline: none;\n    }\n    :host(:focus-within) .strip-option{\n        box-shadow: 0 0 0 0.1rem var(--accent-color,teal) inset;\n    }\n    :host(:hover:not([selected])) .strip-option{\n        background-color: rgba(var(--text-color,(17,17,17)), 0.06);\n    }\n</style>\n<label class="strip-option">\n    <slot></slot>\n</label>\n',customElements.define("strip-option",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(stripOption.content.cloneNode(!0)),this._value=void 0,this.radioButton=this.shadowRoot.querySelector("input"),this.fireEvent=this.fireEvent.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this)}get value(){return this._value}fireEvent(){this.dispatchEvent(new CustomEvent("option-clicked",{bubbles:!0,composed:!0,detail:{value:this._value}}))}handleKeyDown(e){"Enter"!==e.key&&"Space"!==e.key||this.fireEvent()}connectedCallback(){this.setAttribute("role","option"),this.setAttribute("tabindex","0"),this._value=this.getAttribute("value"),this.addEventListener("click",this.fireEvent),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){this.removeEventListener("click",this.fireEvent),this.removeEventListener("keydown",this.handleKeyDown)}});
\ No newline at end of file
diff --git a/components/index.html b/components/index.html
index 0dfca5a..e4e58c7 100644
--- a/components/index.html
+++ b/components/index.html
@@ -1205,7 +1205,7 @@
 &lt;script&gt;
     const mySelect = document.getElementById('my_select')
     mySelect.addEventListener('change', event =&gt; {
-        console.log(event.detail.value) // logs out value of selected option
+        console.log(event.target.value) // logs out value of selected option
     })
 &lt;/script&gt;
 </code>
@@ -1238,7 +1238,7 @@
                             Whenever a different options is selected by user the this event is
                             fired. <br>
                             You can listen to this event and access the current value with event object <span
-                                class="highlight">event.detail.value</span>
+                                class="highlight">event.target.value</span>
                         </p>
                     </div>
                 </section>
@@ -1332,28 +1332,28 @@
                 </section>
             </section>
 
-            <section id="strip_select_page" class="page hide-completely">
-                <h1 class="page__title">Strip select</h1>
+            <section id="chips_page" class="page hide-completely">
+                <h1 class="page__title">Chips</h1>
                 <p>
-                    This is a modern interpritation of classical HTML <span class="highlight">select</span> tag. More
+                    This is a modern interpretation of classical HTML <span class="highlight">select</span> tag. More
                     suitable for touch devices,
                 </p>
                 <h2>Interactive demo</h2>
                 <span>Sort by </span>
-                <strip-select id="sort_by">
-                    <strip-option value="relevance" selected>Relevance</strip-option>
-                    <strip-option value="popularity">Popularity</strip-option>
-                    <strip-option value="price">Price</strip-option>
-                    <strip-option value="rating">Rating</strip-option>
-                </strip-select>
+                <sm-chips id="sort_by">
+                    <sm-chip value="relevance" selected>Relevance</sm-chip>
+                    <sm-chip value="popularity">Popularity</sm-chip>
+                    <sm-chip value="price">Price</sm-chip>
+                    <sm-chip value="rating">Rating</sm-chip>
+                </sm-chips>
                 <pre>
 <code>
-&lt;strip-select id="sort_by"&gt;
-    &lt;strip-option value="relevance" selected&gt;Relevance&lt;/strip-option&gt;
-    &lt;strip-option value="popularity"&gt;Popularity&lt;/strip-option&gt;
-    &lt;strip-option value="price"&gt;Price&lt;/strip-option&gt;
-    &lt;strip-option value="rating"&gt;Rating&lt;/strip-option&gt;
-&lt;/strip-select&gt; 
+&lt;sm-chips id="sort_by"&gt;
+    &lt;sm-chip value="relevance" selected&gt;Relevance&lt;/sm-chip&gt;
+    &lt;sm-chip value="popularity"&gt;Popularity&lt;/sm-chip&gt;
+    &lt;sm-chip value="price"&gt;Price&lt;/sm-chip&gt;
+    &lt;sm-chip value="rating"&gt;Rating&lt;/sm-chip&gt;
+&lt;/sm-chips&gt; 
 </code>
 </pre>
                 <h2>Custom attributes</h2>
@@ -1396,23 +1396,23 @@
                             Whenever a different options is selected by user the this event is
                             fired. <br>
                             You can listen to this event and access the current value with event object <span
-                                class="highlight">event.detail.value</span>
+                                class="highlight">event.target.value</span>
                         </p>
                     </div>
                 </section>
                 <h2>Usage</h2>
                 <pre>
 <code>
-&lt;strip-select id="sort_by"&gt;
-    &lt;strip-option value="relevance" selected&gt;Relevance&lt;/strip-option&gt;
-    &lt;strip-option value="popularity"&gt;Popularity&lt;/strip-option&gt;
-    &lt;strip-option value="price"&gt;Price&lt;/strip-option&gt;
-    &lt;strip-option value="rating"&gt;Rating&lt;/strip-option&gt;
-&lt;/strip-select&gt; 
+&lt;sm-chips id="sort_by"&gt;
+    &lt;sm-chip value="relevance" selected&gt;Relevance&lt;/sm-chip&gt;
+    &lt;sm-chip value="popularity"&gt;Popularity&lt;/sm-chip&gt;
+    &lt;sm-chip value="price"&gt;Price&lt;/sm-chip&gt;
+    &lt;sm-chip value="rating"&gt;Rating&lt;/sm-chip&gt;
+&lt;/sm-chips&gt; 
 &lt;script&gt;
     const sortBy = document.getElementById('sort_by')
     sortBy.addEventListener('change', event =&gt; {
-        console.log(event.detail.value) // logs out value of selected option
+        console.log(event.target.value) // logs out value of selected option
     })
 &lt;/script&gt;
 </code>
@@ -1760,7 +1760,7 @@
 &lt;script&gt;
     const nameField = document.getElementById('name_field')
     nameField.addEventListener('change', event =&gt; {
-        console.log(event.detail.value) // logs out new value set by user
+        console.log(event.target.value) // logs out new value set by user
         console.log(nameField.value) // Accessing value directly with getter
     })
 &lt;/script&gt;
@@ -1914,31 +1914,31 @@
         </sm-checkbox>
     </template>
     <script src="assets/prism.js"></script>
-    <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/hamburger-menu.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/spinner.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/text-field.js"></script>
-    <script src="dist/textarea.js"></script>
-    <script src="dist/theme-toggle.js"></script>
+    <script src="dist/button.min.js"></script>
+    <script src="dist/carousel.min.js"></script>
+    <script src="dist/checkbox.min.js"></script>
+    <script src="dist/chips.min.js"></script>
+    <script src="dist/copy.min.js"></script>
+    <script src="dist/file-input.min.js"></script>
+    <script src="dist/form.min.js"></script>
+    <script src="dist/hamburger-menu.min.js"></script>
+    <script src="dist/input.min.js"></script>
+    <script src="dist/menu.min.js"></script>
+    <script src="dist/notifications.min.js"></script>
+    <script src="dist/popup.min.js"></script>
+    <script src="dist/radio.min.js"></script>
+    <script src="dist/select.min.js"></script>
+    <script src="dist/spinner.min.js"></script>
+    <script src="dist/switch.min.js"></script>
+    <script src="dist/tabs.min.js"></script>
+    <script src="dist/tags-input.min.js"></script>
+    <script src="dist/text-field.min.js"></script>
+    <script src="dist/textarea.min.js"></script>
+    <script src="dist/theme-toggle.min.js"></script>
 
     <script id="default_ui_library">
         const domRefs = {};
-        const appPages = ["overview_page", "quick_start_page", "global_styling_page", "button_page", "carousel_page", "checkbox_page", "copy_page", "file_input_page", "form_page", "hamburger_menu_page", "input_page", "menu_page", "notifications_page", "popup_page", "radio_page", "select_page", "spinner_page", "switch_page", "strip_select_page", "tabs_page", "tags_input_page", "textarea_page", "text_field_page", "theme_toggle_page"]
+        const appPages = ["overview_page", "quick_start_page", "global_styling_page", "button_page", "carousel_page", "checkbox_page", "copy_page", "file_input_page", "form_page", "hamburger_menu_page", "input_page", "menu_page", "notifications_page", "popup_page", "radio_page", "select_page", "spinner_page", "switch_page", "chips_page", "tabs_page", "tags_input_page", "textarea_page", "text_field_page", "theme_toggle_page"]
 
         function getRef(elementId) {
             if (!domRefs.hasOwnProperty(elementId)) {
@@ -2256,6 +2256,10 @@
                 name: 'Checkbox',
                 pageId: 'checkbox_page'
             },
+            {
+                name: 'Chips',
+                pageId: 'chips_page'
+            },
             {
                 name: 'Copy',
                 pageId: 'copy_page'
@@ -2304,10 +2308,6 @@
                 name: 'Spinner',
                 pageId: 'spinner_page'
             },
-            {
-                name: 'Strip select',
-                pageId: 'strip_select_page'
-            },
             {
                 name: 'Tabs',
                 pageId: 'tabs_page'
diff --git a/components/index.min.html b/components/index.min.html
index 4019e41..acc754a 100644
--- a/components/index.min.html
+++ b/components/index.min.html
@@ -156,7 +156,7 @@
 &lt;script&gt;
     const mySelect = document.getElementById('my_select')
     mySelect.addEventListener('change', event =&gt; {
-        console.log(event.detail.value) // logs out value of selected option
+        console.log(event.target.value) // logs out value of selected option
     })
 &lt;/script&gt;
 </code>
@@ -166,7 +166,7 @@
     &lt;!-- Options --&gt;
 &lt;/sm-select&gt;   
 </code>
-</pre><h2>Supported events</h2><p>These are the events that will be fired when component state changes</p><section class="table"><div class="tr"><h4 class="table__heading">Event</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">change</span></div><p>Whenever a different options is selected by user the this event is fired.<br>You can listen to this event and access the current value with event object <span class="highlight">event.detail.value</span></p></div></section></section><section id="spinner_page" class="page hide-completely"><h1 class="page__title">Spinner</h1><p>Just drop the <span class="highlight">sm-spinner</span> in markup where you want to show the spinner</p><sm-spinner></sm-spinner><pre>
+</pre><h2>Supported events</h2><p>These are the events that will be fired when component state changes</p><section class="table"><div class="tr"><h4 class="table__heading">Event</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">change</span></div><p>Whenever a different options is selected by user the this event is fired.<br>You can listen to this event and access the current value with event object <span class="highlight">event.target.value</span></p></div></section></section><section id="spinner_page" class="page hide-completely"><h1 class="page__title">Spinner</h1><p>Just drop the <span class="highlight">sm-spinner</span> in markup where you want to show the spinner</p><sm-spinner></sm-spinner><pre>
 <code>
 &lt;sm-spinner&gt;&lt;/sm-spinner&gt;
 </code>
@@ -186,27 +186,27 @@
     &lt;/div&gt;
 &lt;/sm-switch&gt;    
 </code>
-</pre><h2>Attributes</h2><p>All the native HTML checkbox attributes are valid</p><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">checked</span> (boolean)</div><p>If present, switch is set to checked state as default.</p></div><div class="tr"><div><span class="highlight">disabled</span> (boolean)</div><p>If present switch is set to disabled state. all the interactions are disabled</p></div><div class="tr"><div><span class="highlight">value</span> (string)</div><p>Sets value of switch which can be accessed by value property with JS</p></div></section></section><section id="strip_select_page" class="page hide-completely"><h1 class="page__title">Strip select</h1><p>This is a modern interpritation of classical HTML <span class="highlight">select</span> tag. More suitable for touch devices,</p><h2>Interactive demo</h2><span>Sort by</span><strip-select id="sort_by"><strip-option value="relevance" selected>Relevance</strip-option><strip-option value="popularity">Popularity</strip-option><strip-option value="price">Price</strip-option><strip-option value="rating">Rating</strip-option></strip-select><pre>
+</pre><h2>Attributes</h2><p>All the native HTML checkbox attributes are valid</p><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">checked</span> (boolean)</div><p>If present, switch is set to checked state as default.</p></div><div class="tr"><div><span class="highlight">disabled</span> (boolean)</div><p>If present switch is set to disabled state. all the interactions are disabled</p></div><div class="tr"><div><span class="highlight">value</span> (string)</div><p>Sets value of switch which can be accessed by value property with JS</p></div></section></section><section id="chips_page" class="page hide-completely"><h1 class="page__title">Chips</h1><p>This is a modern interpretation of classical HTML <span class="highlight">select</span> tag. More suitable for touch devices,</p><h2>Interactive demo</h2><span>Sort by</span><sm-chips id="sort_by"><sm-chip value="relevance" selected>Relevance</sm-chip><sm-chip value="popularity">Popularity</sm-chip><sm-chip value="price">Price</sm-chip><sm-chip value="rating">Rating</sm-chip></sm-chips><pre>
 <code>
-&lt;strip-select id="sort_by"&gt;
-    &lt;strip-option value="relevance" selected&gt;Relevance&lt;/strip-option&gt;
-    &lt;strip-option value="popularity"&gt;Popularity&lt;/strip-option&gt;
-    &lt;strip-option value="price"&gt;Price&lt;/strip-option&gt;
-    &lt;strip-option value="rating"&gt;Rating&lt;/strip-option&gt;
-&lt;/strip-select&gt; 
+&lt;sm-chips id="sort_by"&gt;
+    &lt;sm-chip value="relevance" selected&gt;Relevance&lt;/sm-chip&gt;
+    &lt;sm-chip value="popularity"&gt;Popularity&lt;/sm-chip&gt;
+    &lt;sm-chip value="price"&gt;Price&lt;/sm-chip&gt;
+    &lt;sm-chip value="rating"&gt;Rating&lt;/sm-chip&gt;
+&lt;/sm-chips&gt; 
 </code>
-</pre><h2>Custom attributes</h2><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">multiline</span> ( Boolean )</div><p>If present, options will wrap around instead of overflowing horizontally.</p></div></section><h2>Styling</h2><p>CSS variables used to style this component</p><section class="table"><div class="tr"><h4 class="table__heading">Variable</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">--gap</span></div><p>Defines space between options. Default is "0.5rem".</p></div></section><h2>Supported events</h2><p>These are the events that will be fired when component state changes</p><section class="table"><div class="tr"><h4 class="table__heading">Event</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">change</span></div><p>Whenever a different options is selected by user the this event is fired.<br>You can listen to this event and access the current value with event object <span class="highlight">event.detail.value</span></p></div></section><h2>Usage</h2><pre>
+</pre><h2>Custom attributes</h2><section class="table"><div class="tr"><h4 class="table__heading">Attribute</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">multiline</span> ( Boolean )</div><p>If present, options will wrap around instead of overflowing horizontally.</p></div></section><h2>Styling</h2><p>CSS variables used to style this component</p><section class="table"><div class="tr"><h4 class="table__heading">Variable</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">--gap</span></div><p>Defines space between options. Default is "0.5rem".</p></div></section><h2>Supported events</h2><p>These are the events that will be fired when component state changes</p><section class="table"><div class="tr"><h4 class="table__heading">Event</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">change</span></div><p>Whenever a different options is selected by user the this event is fired.<br>You can listen to this event and access the current value with event object <span class="highlight">event.target.value</span></p></div></section><h2>Usage</h2><pre>
 <code>
-&lt;strip-select id="sort_by"&gt;
-    &lt;strip-option value="relevance" selected&gt;Relevance&lt;/strip-option&gt;
-    &lt;strip-option value="popularity"&gt;Popularity&lt;/strip-option&gt;
-    &lt;strip-option value="price"&gt;Price&lt;/strip-option&gt;
-    &lt;strip-option value="rating"&gt;Rating&lt;/strip-option&gt;
-&lt;/strip-select&gt; 
+&lt;sm-chips id="sort_by"&gt;
+    &lt;sm-chip value="relevance" selected&gt;Relevance&lt;/sm-chip&gt;
+    &lt;sm-chip value="popularity"&gt;Popularity&lt;/sm-chip&gt;
+    &lt;sm-chip value="price"&gt;Price&lt;/sm-chip&gt;
+    &lt;sm-chip value="rating"&gt;Rating&lt;/sm-chip&gt;
+&lt;/sm-chips&gt; 
 &lt;script&gt;
     const sortBy = document.getElementById('sort_by')
     sortBy.addEventListener('change', event =&gt; {
-        console.log(event.detail.value) // logs out value of selected option
+        console.log(event.target.value) // logs out value of selected option
     })
 &lt;/script&gt;
 </code>
@@ -281,7 +281,7 @@
 &lt;script&gt;
     const nameField = document.getElementById('name_field')
     nameField.addEventListener('change', event =&gt; {
-        console.log(event.detail.value) // logs out new value set by user
+        console.log(event.target.value) // logs out new value set by user
         console.log(nameField.value) // Accessing value directly with getter
     })
 &lt;/script&gt;
@@ -326,8 +326,8 @@
     })
 &lt;/script&gt;
 </code>
-</pre></section></article></main><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="assets/prism.js"></script><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/hamburger-menu.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/spinner.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/text-field.js"></script><script src="dist/textarea.js"></script><script src="dist/theme-toggle.js"></script><script id="default_ui_library">const domRefs = {};
-        const appPages = ["overview_page", "quick_start_page", "global_styling_page", "button_page", "carousel_page", "checkbox_page", "copy_page", "file_input_page", "form_page", "hamburger_menu_page", "input_page", "menu_page", "notifications_page", "popup_page", "radio_page", "select_page", "spinner_page", "switch_page", "strip_select_page", "tabs_page", "tags_input_page", "textarea_page", "text_field_page", "theme_toggle_page"]
+</pre></section></article></main><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="assets/prism.js"></script><script src="dist/button.min.js"></script><script src="dist/carousel.min.js"></script><script src="dist/checkbox.min.js"></script><script src="dist/chips.min.js"></script><script src="dist/copy.min.js"></script><script src="dist/file-input.min.js"></script><script src="dist/form.min.js"></script><script src="dist/hamburger-menu.min.js"></script><script src="dist/input.min.js"></script><script src="dist/menu.min.js"></script><script src="dist/notifications.min.js"></script><script src="dist/popup.min.js"></script><script src="dist/radio.min.js"></script><script src="dist/select.min.js"></script><script src="dist/spinner.min.js"></script><script src="dist/switch.min.js"></script><script src="dist/tabs.min.js"></script><script src="dist/tags-input.min.js"></script><script src="dist/text-field.min.js"></script><script src="dist/textarea.min.js"></script><script src="dist/theme-toggle.min.js"></script><script id="default_ui_library">const domRefs = {};
+        const appPages = ["overview_page", "quick_start_page", "global_styling_page", "button_page", "carousel_page", "checkbox_page", "copy_page", "file_input_page", "form_page", "hamburger_menu_page", "input_page", "menu_page", "notifications_page", "popup_page", "radio_page", "select_page", "spinner_page", "switch_page", "chips_page", "tabs_page", "tags_input_page", "textarea_page", "text_field_page", "theme_toggle_page"]
 
         function getRef(elementId) {
             if (!domRefs.hasOwnProperty(elementId)) {
@@ -642,6 +642,10 @@
                 name: 'Checkbox',
                 pageId: 'checkbox_page'
             },
+            {
+                name: 'Chips',
+                pageId: 'chips_page'
+            },
             {
                 name: 'Copy',
                 pageId: 'copy_page'
@@ -690,10 +694,6 @@
                 name: 'Spinner',
                 pageId: 'spinner_page'
             },
-            {
-                name: 'Strip select',
-                pageId: 'strip_select_page'
-            },
             {
                 name: 'Tabs',
                 pageId: 'tabs_page'
diff --git a/components/test.html b/components/test.html
index 1a61149..9e5f74b 100644
--- a/components/test.html
+++ b/components/test.html
@@ -19,6 +19,7 @@
     <script src="dist/cube-loader.js"></script>
     <script src="dist/tags-input.js"></script>
     <script src="dist/strip-select.js"></script>
+    <script src="dist/collapsed-text.js"></script>
     <link rel="stylesheet" href="css/main.min.css">
     <style>
         div {
@@ -33,58 +34,15 @@
 </head>
 
 <body>
-    <div class="flex">
-        <sm-input placeholder="Country"
-            list="Afghanistan,Albania,Algeria,Andorra,Angola,Anguilla,Antigua Barbuda,Argentina,Armenia,Aruba,Australia,Austria,Azerbaijan,Bahamas,Bahrain,Bangladesh,Barbados,Belarus,Belgium,Belize,Benin,Bermuda,Bhutan,Bolivia,BosniaHerzegovina,Botswana,Brazil,British Virgin Islands,Brunei,Bulgaria,Burkina Faso,Burundi,Cambodia,Cameroon,Cape Verde,Cayman Islands,Chad,Chile,China,Colombia,Congo,Cook Islands,Costa Rica,Cote D Ivoire,Croatia,Cruise Ship,Cuba,Cyprus,Czech Republic,Denmark,Djibouti,Dominica,Dominican Republic,Ecuador,Egypt,El Salvador,Equatorial Guinea,Estonia,Ethiopia,Falkland Islands,Faroe Islands,Fiji,Finland,France,French Polynesia,French West Indies,Gabon,Gambia,Georgia,Germany,Ghana,Gibraltar,Greece,Greenland,Grenada,Guam,Guatemala,Guernsey,Guinea,Guinea Bissau,Guyana,Haiti,Honduras,Hong Kong,Hungary,Iceland,India,Indonesia,Iran,Iraq,Ireland,Isle of Man,Israel,Italy,Jamaica,Japan,Jersey,Jordan,Kazakhstan,Kenya,Kuwait,Kyrgyz Republic,Laos,Latvia,Lebanon,Lesotho,Liberia,Libya,Liechtenstein,Lithuania,Luxembourg,Macau,Macedonia,Madagascar,Malawi,Malaysia,Maldives,Mali,Malta,Mauritania,Mauritius,Mexico,Moldova,Monaco,Mongolia,Montenegro,Montserrat,Morocco,Mozambique,Namibia,Nepal,Netherlands,Netherlands Antilles,New Caledonia,New Zealand,Nicaragua,Niger,Nigeria,Norway,Oman,Pakistan,Palestine,Panama,Papua New Guinea,Paraguay,Peru,Philippines,Poland,Portugal,Puerto Rico,Qatar,Reunion,Romania,Russia,Rwanda,Saint PierreMiquelon,Samoa,San Marino,Satellite,Saudi Arabia,Senegal,Serbia,Seychelles,Sierra Leone,Singapore,Slovakia,Slovenia,South Africa,South Korea,Spain,Sri Lanka,St KittsNevis,St Lucia,St Vincent,St. Lucia,Sudan,Suriname,Swaziland,Sweden,Switzerland,Syria,Taiwan,Tajikistan,Tanzania,Thailand,Timor L'Este,Togo,Tonga,Trinidad Tobago,Tunisia,Turkey,Turkmenistan,Turks Caicos,Uganda,Ukraine,United Arab Emirates,United Kingdom,Uruguay,Uzbekistan,Venezuela,Vietnam,Virgin Islands (US),Yemen,Zambia,Zimbabwe">
-        </sm-input>
-    </div>
-    <tags-input placeholder="gwdswererg"></tags-input>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <div class="flex">
-        <strip-select>
-            <strip-option value="2">sdfsfd2</strip-option>
-            <strip-option value="3">3sgd</strip-option>
-            <strip-option value="1">1sdgsdgsgd</strip-option>
-            <strip-option value="4">sdggsdgsdg4</strip-option>
-            <strip-option value="5">5sdgdsgsd</strip-option>
-            <strip-option value="6">6sggsdsgd</strip-option>
-            <strip-option value="7">7gsdgsdgsd</strip-option>
-            <strip-option value="8">8sdgsdgsdg</strip-option>
-        </strip-select>
-    </div>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <br>
-    <div class="flex">
-        <sm-select>
-            <sm-option value="1">1</sm-option>
-            <sm-option value="2">2</sm-option>
-            <sm-option value="3">3</sm-option>
-            <sm-option value="4">4</sm-option>
-            <sm-option value="5">5</sm-option>
-            <sm-option value="6">6</sm-option>
-            <sm-option value="7">7</sm-option>
-            <sm-option value="8">8</sm-option>
-        </sm-select>
-    </div>
-    <script>
-
-    </script>
+    <collapsed-text>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto minima maiores autem iusto porro, odit iure
+        ea eveniet enim soluta ex a nihil? Dicta ducimus dolor itaque unde sequi, reprehenderit ex aperiam dignissimos
+        inventore? Totam aliquid repellendus nulla culpa nemo perspiciatis tempora. Vel obcaecati asperiores nam,
+        ratione sint itaque temporibus incidunt officiis iusto cumque reiciendis ab repellendus quaerat ducimus
+        quibusdam quia maxime nostrum atque ad sequi eveniet est error ipsam voluptatem. Architecto molestiae ex et
+        minima praesentium quasi ea, ad enim consequuntur at nisi nostrum. Quisquam nostrum, accusamus neque, fugiat
+        esse deleniti ex vitae totam asperiores odit quaerat sunt voluptates.
+    </collapsed-text>
 </body>
 
 </html>
\ No newline at end of file