From f6dc7eed115643d5a21bf2513ebcacdceac514ba Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Fri, 11 Nov 2022 03:05:13 +0530
Subject: [PATCH] bug fixes

---
 components/dist/checkbox.js           |  6 ++--
 components/dist/checkbox.min.js       |  2 +-
 components/dist/collapsed-text.js     |  5 +--
 components/dist/collapsed-text.min.js |  1 +
 components/dist/popup.js              | 20 ++++++------
 components/dist/popup.min.js          |  2 +-
 components/index.html                 | 47 +++++++++++++--------------
 components/index.min.html             |  5 ++-
 8 files changed, 44 insertions(+), 44 deletions(-)
 create mode 100644 components/dist/collapsed-text.min.js

diff --git a/components/dist/checkbox.js b/components/dist/checkbox.js
index 19f3989..430d016 100644
--- a/components/dist/checkbox.js
+++ b/components/dist/checkbox.js
@@ -79,12 +79,12 @@ smCheckbox.innerHTML = `
         box-shadow: 0 0 0 0.1rem var(--border-color) inset;
     }
 </style>
-<label class="checkbox">
+<div class="checkbox">
     <svg class="icon" viewBox="0 0 64 64">
         <path class="checkmark" d="M50.52,19.56,26,44.08,13.48,31.56" />
     </svg>
     <slot></slot>
-</label>`
+</div>`
 customElements.define('sm-checkbox', class extends HTMLElement {
     constructor() {
         super()
@@ -155,7 +155,7 @@ customElements.define('sm-checkbox', class extends HTMLElement {
     handleKeyDown(e) {
         if (e.key === ' ') {
             e.preventDefault()
-            this.click()
+            this.toggleAttribute('checked')
         }
     }
     handleClick(e) {
diff --git a/components/dist/checkbox.min.js b/components/dist/checkbox.min.js
index 6b22873..d037668 100644
--- a/components/dist/checkbox.min.js
+++ b/components/dist/checkbox.min.js
@@ -1 +1 @@
-const smCheckbox=document.createElement("template");smCheckbox.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    } \n    :host{\n        display: -webkit-inline-box;\n        display: -ms-inline-flexbox;\n        display: inline-flex;\n        --height: 1.2rem;\n        --width: 1.2rem;\n        --border-radius: 0.2rem;\n        --border-color: rgba(var(--text-color, (17,17,17)), 0.7);\n    }\n    :host([disabled]) {\n        opacity: 0.6;\n        user-select: none;\n        pointer-events: none;\n    }\n    .checkbox {\n        position: relative;\n        display:-webkit-box;\n        display:-ms-flexbox;\n        display:flex;\n        -webkit-box-align: center;\n            -ms-flex-align: center;\n                align-items: center;\n        cursor: pointer;\n        outline: none;\n        -webkit-tap-highlight-color: transparent;\n    }\n    \n    .checkbox:focus-visible{\n        outline: auto;\n    }\n    .checkbox:active .icon,\n    .checkbox:focus-within .icon{\n        box-shadow: 0 0 0 0.1rem var(--accent-color, teal) inset;\n    }\n    \n    input {\n        display: none;\n    }\n    \n    .checkmark {\n        stroke-dashoffset: -65;\n        stroke-dasharray: 65;\n        -webkit-transition: stroke-dashoffset 0.3s; \n        -o-transition: stroke-dashoffset 0.3s; \n        transition: stroke-dashoffset 0.3s;\n    }\n    \n    :host([checked]) .checkmark {\n        stroke-dashoffset: 0;\n        stroke: rgba(var(--background-color, (255,255,255)), 1);\n    }\n    :host([checked]) .icon {\n        background: var(--accent-color, teal);\n        box-shadow: 0 0 0 0.1rem var(--accent-color, teal) inset;\n    }    \n    .icon {\n        fill: none;\n        height: var(--height);\n        width: var(--width);\n        padding: 0.1rem;\n        stroke-width: 8; \n        stroke: var(--border-color);\n        overflow: visible;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n        -webkit-transition: background 0.3s;\n        -o-transition: background 0.3s;\n        transition: background 0.3s;\n        border-radius: var(--border-radius);\n        box-shadow: 0 0 0 0.1rem var(--border-color) inset;\n    }\n</style>\n<label class="checkbox">\n    <svg class="icon" viewBox="0 0 64 64">\n        <path class="checkmark" d="M50.52,19.56,26,44.08,13.48,31.56" />\n    </svg>\n    <slot></slot>\n</label>',customElements.define("sm-checkbox",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCheckbox.content.cloneNode(!0)),this.defaultState,this.checkbox=this.shadowRoot.querySelector(".checkbox"),this.reset=this.reset.bind(this),this.dispatch=this.dispatch.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleClick=this.handleClick.bind(this)}static get observedAttributes(){return["value","disabled","checked"]}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.hasAttribute("checked")}set checked(e){e?this.setAttribute("checked",""):this.removeAttribute("checked")}set value(e){this.setAttribute("value",e)}get value(){return this.getAttribute("value")}focusIn(){this.focus()}reset(){this.value=this.defaultState}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0}))}handleKeyDown(e){" "===e.key&&(e.preventDefault(),this.click())}handleClick(e){this.toggleAttribute("checked")}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","checkbox"),this.defaultState=this.hasAttribute("checked"),this.hasAttribute("checked")||this.setAttribute("aria-checked","false"),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("click",this.handleClick)}attributeChangedCallback(e,t,n){t!==n&&("checked"===e?(this.setAttribute("aria-checked",this.hasAttribute("checked")),this.dispatch()):"disabled"===e&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0")))}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("change",this.handleClick)}});
\ No newline at end of file
+const smCheckbox=document.createElement("template");smCheckbox.innerHTML='\n<style>\n    *{\n        padding: 0;\n        margin: 0;\n        -webkit-box-sizing: border-box;\n                box-sizing: border-box;\n    } \n    :host{\n        display: -webkit-inline-box;\n        display: -ms-inline-flexbox;\n        display: inline-flex;\n        --height: 1.2rem;\n        --width: 1.2rem;\n        --border-radius: 0.2rem;\n        --border-color: rgba(var(--text-color, (17,17,17)), 0.7);\n    }\n    :host([disabled]) {\n        opacity: 0.6;\n        user-select: none;\n        pointer-events: none;\n    }\n    .checkbox {\n        position: relative;\n        display:-webkit-box;\n        display:-ms-flexbox;\n        display:flex;\n        -webkit-box-align: center;\n            -ms-flex-align: center;\n                align-items: center;\n        cursor: pointer;\n        outline: none;\n        -webkit-tap-highlight-color: transparent;\n    }\n    \n    .checkbox:focus-visible{\n        outline: auto;\n    }\n    .checkbox:active .icon,\n    .checkbox:focus-within .icon{\n        box-shadow: 0 0 0 0.1rem var(--accent-color, teal) inset;\n    }\n    \n    input {\n        display: none;\n    }\n    \n    .checkmark {\n        stroke-dashoffset: -65;\n        stroke-dasharray: 65;\n        -webkit-transition: stroke-dashoffset 0.3s; \n        -o-transition: stroke-dashoffset 0.3s; \n        transition: stroke-dashoffset 0.3s;\n    }\n    \n    :host([checked]) .checkmark {\n        stroke-dashoffset: 0;\n        stroke: rgba(var(--background-color, (255,255,255)), 1);\n    }\n    :host([checked]) .icon {\n        background: var(--accent-color, teal);\n        box-shadow: 0 0 0 0.1rem var(--accent-color, teal) inset;\n    }    \n    .icon {\n        fill: none;\n        height: var(--height);\n        width: var(--width);\n        padding: 0.1rem;\n        stroke-width: 8; \n        stroke: var(--border-color);\n        overflow: visible;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n        -webkit-transition: background 0.3s;\n        -o-transition: background 0.3s;\n        transition: background 0.3s;\n        border-radius: var(--border-radius);\n        box-shadow: 0 0 0 0.1rem var(--border-color) inset;\n    }\n</style>\n<div class="checkbox">\n    <svg class="icon" viewBox="0 0 64 64">\n        <path class="checkmark" d="M50.52,19.56,26,44.08,13.48,31.56" />\n    </svg>\n    <slot></slot>\n</div>',customElements.define("sm-checkbox",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCheckbox.content.cloneNode(!0)),this.defaultState,this.checkbox=this.shadowRoot.querySelector(".checkbox"),this.reset=this.reset.bind(this),this.dispatch=this.dispatch.bind(this),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleClick=this.handleClick.bind(this)}static get observedAttributes(){return["value","disabled","checked"]}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get checked(){return this.hasAttribute("checked")}set checked(e){e?this.setAttribute("checked",""):this.removeAttribute("checked")}set value(e){this.setAttribute("value",e)}get value(){return this.getAttribute("value")}focusIn(){this.focus()}reset(){this.value=this.defaultState}dispatch(){this.dispatchEvent(new CustomEvent("change",{bubbles:!0,composed:!0}))}handleKeyDown(e){" "===e.key&&(e.preventDefault(),this.toggleAttribute("checked"))}handleClick(e){this.toggleAttribute("checked")}connectedCallback(){this.hasAttribute("disabled")||this.setAttribute("tabindex","0"),this.setAttribute("role","checkbox"),this.defaultState=this.hasAttribute("checked"),this.hasAttribute("checked")||this.setAttribute("aria-checked","false"),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("click",this.handleClick)}attributeChangedCallback(e,t,n){t!==n&&("checked"===e?(this.setAttribute("aria-checked",this.hasAttribute("checked")),this.dispatch()):"disabled"===e&&(this.hasAttribute("disabled")?this.removeAttribute("tabindex"):this.setAttribute("tabindex","0")))}disconnectedCallback(){this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("change",this.handleClick)}});
\ No newline at end of file
diff --git a/components/dist/collapsed-text.js b/components/dist/collapsed-text.js
index 3bb5095..90d75a9 100644
--- a/components/dist/collapsed-text.js
+++ b/components/dist/collapsed-text.js
@@ -22,12 +22,13 @@ collapsedText.innerHTML = `
             bottom: 0;
             right: 0;   
             cursor: pointer;
-            font-weight: 700;
-            background: var(--button-background-color, #fff);
+            font-weight: 500;
+            background: var(--button-background, #fff);
             border: none;
             outline: none;
             color: var(--accent-color,teal);
             font-size: inherit;
+            font-family: inherit;
             z-index: 1;
         }
     </style>
diff --git a/components/dist/collapsed-text.min.js b/components/dist/collapsed-text.min.js
new file mode 100644
index 0000000..335c099
--- /dev/null
+++ b/components/dist/collapsed-text.min.js
@@ -0,0 +1 @@
+const collapsedText=document.createElement("template");collapsedText.innerHTML='\n    <style>\n        .wrapper {\n            position: relative;\n            display: flex;\n            flex-direction: column;\n            width: 100%;\n        }\n        .collapsed-text {\n            display: -webkit-box;\n            -webkit-line-clamp: var(--line-clamp,3);\n            -webkit-box-orient: vertical;  \n            text-overflow: ellipsis;\n            overflow: hidden;\n        }\n        :host([open]) .collapsed-text {\n            -webkit-line-clamp: unset;\n        }\n        .toggle-button {\n            position: absolute;\n            bottom: 0;\n            right: 0;   \n            cursor: pointer;\n            font-weight: 500;\n            background: var(--button-background, #fff);\n            border: none;\n            outline: none;\n            color: var(--accent-color,teal);\n            font-size: inherit;\n            font-family: inherit;\n            z-index: 1;\n        }\n    </style>\n    <div class="wrapper">\n        <div class="collapsed-text"><slot></slot></div>\n        <button class="toggle-button">Show more</button>\n    </div>\n';class CollapsedText extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(collapsedText.content.cloneNode(!0)),this.isCollapsed=!0,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",this.isCollapsed?(this.setAttribute("open",""),this.wrapper.removeEventListener("click",this.toggleCollapsedText)):(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/popup.js b/components/dist/popup.js
index 8acd389..ff66afc 100644
--- a/components/dist/popup.js
+++ b/components/dist/popup.js
@@ -275,19 +275,19 @@ customElements.define('sm-popup', class extends HTMLElement {
             ], animOptions)
         }
         this.popupContainer.classList.remove('hide');
-        if (!this.offset)
+        if (!this.offset) {
             this.backdrop.animate([
                 { opacity: 0 },
                 { opacity: 1 },
-            ], animOptions).onfinish = () => {
-                this.dispatchEvent(
-                    new CustomEvent("popupopened", {
-                        bubbles: true,
-                    })
-                );
-                document.body.style.overflow = 'hidden';
-                document.body.style.top = `-${window.scrollY}px`;
-            }
+            ], animOptions)
+            this.dispatchEvent(
+                new CustomEvent("popupopened", {
+                    bubbles: true,
+                })
+            );
+            document.body.style.overflow = 'hidden';
+            document.body.style.top = `-${window.scrollY}px`;
+        }
         this.setStateOpen()
         this.pinned = pinned;
         this.isOpen = true;
diff --git a/components/dist/popup.min.js b/components/dist/popup.min.js
index 7784ae2..0ed463c 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.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).onfinish=(()=>{this.dispatchEvent(new CustomEvent("popupopened",{bubbles:!0})),document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`})),this.setStateOpen(),this.pinned=e,this.isOpen=!0,setTimeout(()=>{const t=this.autoFocus||this.focusable[0]||this.dialogBox;t&&(t.tagName.includes("-")?t.focusIn():t.focus())},0),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()}debounce(t,e){let n=null;return(...i)=>{window.clearTimeout(n),n=window.setTimeout(()=>{t.apply(null,i)},e)}}connectedCallback(){this.popupBodySlot.addEventListener("slotchange",this.debounce(()=>{this.forms=this.querySelectorAll("sm-form"),this.updateFocusableList()},100)),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
+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 = ` <style> *{ padding: 0; margin: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } :host{ position: fixed; display: -ms-grid; display: grid; z-index: 10; --width: 100%; --height: auto; --min-width: auto; --min-height: auto; --backdrop-background: rgba(0, 0, 0, 0.6); --border-radius: 0.8rem 0.8rem 0 0; } .popup-container{ display: -ms-grid; display: grid; position: fixed; top: 0; bottom: 0; left: 0; right: 0; place-items: center; z-index: 10; touch-action: none; } :host(.stacked) .popup{ -webkit-transform: scale(0.9) translateY(-2rem) !important; transform: scale(0.9) translateY(-2rem) !important; } .backdrop{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: var(--backdrop-background); -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; } .popup{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; position: relative; -ms-flex-item-align: end; align-self: flex-end; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: var(--width); min-width: var(--min-width); height: var(--height); min-height: var(--min-height); max-height: 90vh; border-radius: var(--border-radius); background: rgba(var(--background-color, (255,255,255)), 1); -webkit-box-shadow: 0 -1rem 2rem #00000020; box-shadow: 0 -1rem 2rem #00000020; } .container-header{ display: -webkit-box; display: flex; width: 100%; touch-action: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .popup-top{ display: -webkit-box; display: flex; width: 100%; } .popup-body{ display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 100%; padding: var(--body-padding, 1.5rem); overflow-y: auto; } .hide{ display:none; } @media screen and (min-width: 640px){ :host{ --border-radius: 0.5rem; } .popup{ -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; border-radius: var(--border-radius); height: var(--height); -webkit-box-shadow: 0 3rem 2rem -0.5rem #00000040; box-shadow: 0 3rem 2rem -0.5rem #00000040; } } @media screen and (max-width: 640px){ .popup-top{ -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-box-align: center; align-items: center; } .handle{ height: 0.3rem; width: 2rem; background: rgba(var(--text-color, (17,17,17)), .4); border-radius: 1rem; margin: 0.5rem 0; } } @media (any-hover: hover){ ::-webkit-scrollbar{ width: 0.5rem; } ::-webkit-scrollbar-thumb{ background: rgba(var(--text-color, (17,17,17)), 0.3); border-radius: 1rem; &:hover{ background: rgba(var(--text-color, (17,17,17))), 0.5); } } } </style> <div class="popup-container hide" role="dialog"> <div part="backdrop" class="backdrop"></div> <div part="popup" class="popup"> <div part="popup-header" class="popup-top"> <div class="handle"></div> <slot name="header"></slot> </div> <div part="popup-body" class="popup-body"> <slot></slot> </div> </div> </div> `, customElements.define("sm-popup", class extends HTMLElement { constructor() { super(), this.attachShadow({ mode: "open" }).append(smPopup.content.cloneNode(!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, i) { let s = t.animate(e, { ...i, fill: "both" }); return s.finished.then(() => { s.commitStyles(), s.cancel() }), s } resumeScrolling() { let 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) { let t = window.innerWidth > 640 ? "scale(1.1)" : `translateY(${this.offset ? `${this.offset}px` : "100%"})`; this.animateTo(this.dialogBox, [{ opacity: this.offset ? 1 : 0, transform: t }, { opacity: 1, transform: "none" },], { duration: 300, easing: "ease" }) } } show(t = {}) { let { pinned: e = !1 } = t; if (this.isOpen) return; let i = { 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)" },], i), this.popupContainer.classList.remove("hide"), this.offset || (this.backdrop.animate([{ opacity: 0 }, { opacity: 1 },], i), this.dispatchEvent(new CustomEvent("popupopened", { bubbles: !0 })), document.body.style.overflow = "hidden", document.body.style.top = `-${window.scrollY}px`), this.setStateOpen(), this.pinned = e, this.isOpen = !0, setTimeout(() => { let t = this.autoFocus || this.focusable?.[0] || this.dialogBox; t && (t.tagName.includes("-") ? t.focusIn() : t.focus()) }, 0), 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() { let 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) { this.setStateOpen(); return } this.hide() } else this.setStateOpen() } else if (this.touchEndY > this.touchStartY) { if (this.pinned) { this.setStateOpen(); return } this.hide() } this.popupHeader.removeEventListener("touchmove", this.handleTouchMove, { passive: !0 }), this.popupHeader.removeEventListener("touchend", this.handleTouchEnd, { passive: !0 }) } detectFocus(t) { if ("Tab" === t.key) { let e = this.focusable[this.focusable.length - 1], i = this.focusable[0]; t.shiftKey && document.activeElement === i ? (t.preventDefault(), e.tagName.includes("SM-") ? e.focusIn() : e.focus()) : t.shiftKey || document.activeElement !== e || (t.preventDefault(), i.tagName.includes("SM-") ? i.focusIn() : i.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() } debounce(t, e) { let i = null; return (...s) => { window.clearTimeout(i), i = window.setTimeout(() => { t.apply(null, s) }, e) } } connectedCallback() { this.popupBodySlot.addEventListener("slotchange", this.debounce(() => { this.forms = this.querySelectorAll("sm-form"), this.updateFocusableList() }, 0)), this.resizeObserver = new ResizeObserver(t => { for (let e of t) if (e.contentBoxSize) { let i = Array.isArray(e.contentBoxSize) ? e.contentBoxSize[0] : e.contentBoxSize; this.threshold = .3 * i.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/index.html b/components/index.html
index e4e58c7..c16005b 100644
--- a/components/index.html
+++ b/components/index.html
@@ -1913,28 +1913,28 @@
             <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 src="assets/prism.js" defer></script>
+    <script src="dist/button.min.js" defer></script>
+    <script src="dist/carousel.min.js" defer></script>
+    <script src="dist/checkbox.min.js" defer></script>
+    <script src="dist/chips.min.js" defer></script>
+    <script src="dist/copy.min.js" defer></script>
+    <script src="dist/file-input.min.js" defer></script>
+    <script src="dist/form.min.js" defer></script>
+    <script src="dist/hamburger-menu.min.js" defer></script>
+    <script src="dist/input.min.js" defer></script>
+    <script src="dist/menu.min.js" defer></script>
+    <script src="dist/notifications.min.js" defer></script>
+    <script src="dist/popup.min.js" defer></script>
+    <script src="dist/radio.min.js" defer></script>
+    <script src="dist/select.min.js" defer></script>
+    <script src="dist/spinner.min.js" defer></script>
+    <script src="dist/switch.min.js" defer></script>
+    <script src="dist/tabs.min.js" defer></script>
+    <script src="dist/tags-input.min.js" defer></script>
+    <script src="dist/text-field.min.js" defer></script>
+    <script src="dist/textarea.min.js" defer></script>
+    <script src="dist/theme-toggle.min.js" defer></script>
 
     <script id="default_ui_library">
         const domRefs = {};
@@ -2363,14 +2363,13 @@
             });
             return await Promise.all(filesList)
         }
-
         async function downloadComponents() {
             const selectedComponents = await getSelectedComponents()
             if (selectedComponents.length) {
                 downloadJs(selectedComponents, { minified: getRef('get_minified').checked })
             }
             else {
-                notify('Please select atleast one component', 'error')
+                notify('Please select at least one component', 'error')
             }
         }
 
diff --git a/components/index.min.html b/components/index.min.html
index acc754a..41f76a5 100644
--- a/components/index.min.html
+++ b/components/index.min.html
@@ -326,7 +326,7 @@
     })
 &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.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 = {};
+</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" defer></script><script src="dist/button.min.js" defer></script><script src="dist/carousel.min.js" defer></script><script src="dist/checkbox.min.js" defer></script><script src="dist/chips.min.js" defer></script><script src="dist/copy.min.js" defer></script><script src="dist/file-input.min.js" defer></script><script src="dist/form.min.js" defer></script><script src="dist/hamburger-menu.min.js" defer></script><script src="dist/input.min.js" defer></script><script src="dist/menu.min.js" defer></script><script src="dist/notifications.min.js" defer></script><script src="dist/popup.min.js" defer></script><script src="dist/radio.min.js" defer></script><script src="dist/select.min.js" defer></script><script src="dist/spinner.min.js" defer></script><script src="dist/switch.min.js" defer></script><script src="dist/tabs.min.js" defer></script><script src="dist/tags-input.min.js" defer></script><script src="dist/text-field.min.js" defer></script><script src="dist/textarea.min.js" defer></script><script src="dist/theme-toggle.min.js" defer></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) {
@@ -749,14 +749,13 @@
             });
             return await Promise.all(filesList)
         }
-
         async function downloadComponents() {
             const selectedComponents = await getSelectedComponents()
             if (selectedComponents.length) {
                 downloadJs(selectedComponents, { minified: getRef('get_minified').checked })
             }
             else {
-                notify('Please select atleast one component', 'error')
+                notify('Please select at least one component', 'error')
             }
         }