bug fixes

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) {

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)}});
+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)}});

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>

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);

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;

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')
             }
         }
 

components/index.min.html

@@ -326,7 +326,7 @@
     })
 </script>
 </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')
             }
         }