Added 6 more components documentation

components/css/main.css

@@ -518,7 +518,7 @@ sm-tab-header {
 ol {
   padding: 0.6rem 1rem;
   max-width: 75ch;
-  margin-bottom: 3rem;
+  margin-bottom: 1.5rem;
 }
 ol li {
   margin-bottom: 1rem;
@@ -526,9 +526,6 @@ ol li {
 ol li:last-of-type {
   margin-bottom: 0;
 }
-ol li::first-letter {
-  text-transform: capitalize;
-}
 
 strong {
   max-width: 65ch;
@@ -575,6 +572,10 @@ strong.important {
   }
 }
 @media screen and (min-width: 640px) {
+  sm-popup {
+    --width: 32rem;
+  }
+
   #main_header {
     padding: 1rem 1.5rem;
     grid-area: main-header;

components/css/main.scss

@@ -451,15 +451,12 @@ sm-tab-header{
 ol{
     padding: 0.6rem 1rem;
     max-width: 75ch;
-    margin-bottom: 3rem;
+    margin-bottom: 1.5rem;
     li{
         margin-bottom: 1rem;
         &:last-of-type{
             margin-bottom: 0;
         }
-        &::first-letter{
-            text-transform: capitalize;
-        }
     }
 }
 strong{
@@ -501,6 +498,9 @@ strong.important{
     }
 }
 @media screen and (min-width: 640px){
+    sm-popup{
+        --width: 32rem;
+    }
     #main_header{
         padding: 1rem 1.5rem;
         grid-area: main-header;

components/dist/copy.js

@@ -23,8 +23,8 @@ smCopy.innerHTML = `
     display: grid;
     gap: 1rem;
     padding: var(--padding);
+    align-items: center;
     grid-template-columns: minmax(0, 1fr) auto;
-    align-items: flex-start;
 }
 .copy-button{
     display: inline-flex;

components/dist/copy.min.js

@@ -1 +1 @@
-const smCopy=document.createElement("template");smCopy.innerHTML='\n<style>     \n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n}       \n:host{\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --padding: 0;\n    --background-color: inherit;\n    --button-background-color: rgba(var(--text-color), 0.2);\n    --button-border-radius: 0.3rem;\n}\n.copy{\n    display: grid;\n    gap: 1rem;\n    padding: var(--padding);\n    grid-template-columns: minmax(0, 1fr) auto;\n    align-items: flex-start;\n}\n.copy-button{\n    display: inline-flex;\n    justify-content: center;\n    cursor: pointer;\n    border: none;\n    padding: 0.4rem;\n    background-color: inherit;\n    border-radius: var(--button-border-radius);\n}\n.copy-button:active{\n    background-color: var(--button-background-color);\n}\n.icon{\n    height: 1.2rem;\n    width: 1.2rem;\n    fill: rgba(var(--text-color), 0.8);\n}\n@media (any-hover: hover){\n    .copy:hover .copy-button{\n        opacity: 1;\n    }\n    .copy-button{\n        opacity: 0.6;\n    }\n    .copy-button:hover{\n        background-color: var(--button-background-color);\n    }\n}\n</style>\n</style>\n<section class="copy">\n    <p class="copy-content"></p>\n    <button part="button" class="copy-button" title="copy">\n        <slot name="copy-icon">\n            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"/></svg>\n        </slot>\n    </button>\n</section>\n',customElements.define("sm-copy",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCopy.content.cloneNode(!0)),this.copyContent=this.shadowRoot.querySelector(".copy-content"),this.copyButton=this.shadowRoot.querySelector(".copy-button"),this.copy=this.copy.bind(this)}static get observedAttributes(){return["value"]}set value(n){this.setAttribute("value",n)}get value(){return this.getAttribute("value")}fireEvent(){this.dispatchEvent(new CustomEvent("copy",{composed:!0,bubbles:!0,cancelable:!0}))}copy(){navigator.clipboard.writeText(this.copyContent.textContent).then(n=>this.fireEvent()).catch(n=>console.error(n))}connectedCallback(){this.copyButton.addEventListener("click",this.copy)}attributeChangedCallback(n,t,o){"value"===n&&(this.copyContent.textContent=o)}disconnectedCallback(){this.copyButton.removeEventListener("click",this.copy)}});
+const smCopy=document.createElement("template");smCopy.innerHTML='\n<style>     \n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n}       \n:host{\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --padding: 0;\n    --background-color: inherit;\n    --button-background-color: rgba(var(--text-color), 0.2);\n    --button-border-radius: 0.3rem;\n}\n.copy{\n    display: grid;\n    gap: 1rem;\n    padding: var(--padding);\n    align-items: center;\n    grid-template-columns: minmax(0, 1fr) auto;\n}\n.copy-button{\n    display: inline-flex;\n    justify-content: center;\n    cursor: pointer;\n    border: none;\n    padding: 0.4rem;\n    background-color: inherit;\n    border-radius: var(--button-border-radius);\n}\n.copy-button:active{\n    background-color: var(--button-background-color);\n}\n.icon{\n    height: 1.2rem;\n    width: 1.2rem;\n    fill: rgba(var(--text-color), 0.8);\n}\n@media (any-hover: hover){\n    .copy:hover .copy-button{\n        opacity: 1;\n    }\n    .copy-button{\n        opacity: 0.6;\n    }\n    .copy-button:hover{\n        background-color: var(--button-background-color);\n    }\n}\n</style>\n</style>\n<section class="copy">\n    <p class="copy-content"></p>\n    <button part="button" class="copy-button" title="copy">\n        <slot name="copy-icon">\n            <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zM5.003 8L5 20h10V8H5.003zM9 6h8v10h2V4H9v2z"/></svg>\n        </slot>\n    </button>\n</section>\n',customElements.define("sm-copy",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smCopy.content.cloneNode(!0)),this.copyContent=this.shadowRoot.querySelector(".copy-content"),this.copyButton=this.shadowRoot.querySelector(".copy-button"),this.copy=this.copy.bind(this)}static get observedAttributes(){return["value"]}set value(n){this.setAttribute("value",n)}get value(){return this.getAttribute("value")}fireEvent(){this.dispatchEvent(new CustomEvent("copy",{composed:!0,bubbles:!0,cancelable:!0}))}copy(){navigator.clipboard.writeText(this.copyContent.textContent).then(n=>this.fireEvent()).catch(n=>console.error(n))}connectedCallback(){this.copyButton.addEventListener("click",this.copy)}attributeChangedCallback(n,t,o){"value"===n&&(this.copyContent.textContent=o)}disconnectedCallback(){this.copyButton.removeEventListener("click",this.copy)}});

components/dist/popup.js

@@ -20,7 +20,7 @@ smPopup.innerHTML = `
     --min-width: auto;
     --min-height: auto;
     --body-padding: 1.5rem;
-    --backdrop: rgba(0, 0, 0, 0.6);
+    --backdrop-background: rgba(0, 0, 0, 0.6);
     --border-radius: 0.8rem 0.8rem 0 0;
 }
 .popup-container{
@@ -32,7 +32,7 @@ smPopup.innerHTML = `
     left: 0;
     right: 0;
     place-items: center;
-    background: var(--backdrop);
+    background: var(--backdrop-background);
     -webkit-transition: opacity 0.3s;
     -o-transition: opacity 0.3s;
     transition: opacity 0.3s;
@@ -214,7 +214,8 @@ customElements.define('sm-popup', class extends HTMLElement {
         }, 300);
     }
 
-    show(pinned, popupStack) {
+    show(options = {}) {
+        const {pinned = false, popupStack = undefined} = options
         if (popupStack)
             this.popupStack = popupStack
         if (this.popupStack && !this.hasAttribute('open')) {
@@ -292,10 +293,6 @@ customElements.define('sm-popup', class extends HTMLElement {
             this.offset = e.changedTouches[0].clientY - this.touchStartY;
             this.touchEndAnimataion = window.requestAnimationFrame(() => this.movePopup())
         }
-        /*else {
-            this.offset = this.touchStartY - e.changedTouches[0].clientY;
-            this.popup.style.transform = `translateY(-${this.offset}px)`
-        }*/
     }
 
     handleTouchEnd(e) {

components/dist/strip-select.js

@@ -51,7 +51,7 @@ stripSelect.innerHTML = `
         cursor: pointer;
         position: absolute;
         align-items: center;
-        background: var(--background-color);
+        background: rgba(var(--background-color), 1);
         transform: translateY(-50%);
     }
     .nav-button--right{
@@ -65,11 +65,11 @@ stripSelect.innerHTML = `
         pointer-events: none;
     }
     .cover--left{
-        background: linear-gradient(90deg, var(--background-color) 60%, transparent);
+        background: linear-gradient(90deg, rgba(var(--background-color), 1) 60%, transparent);
     }
     .cover--right{
         right: 0;
-        background: linear-gradient(90deg, transparent 0%, var(--background-color) 40%);
+        background: linear-gradient(90deg, transparent 0%, rgba(var(--background-color), 1) 40%);
     }
     .nav-button--right::before{
         background-color: red;
@@ -161,6 +161,8 @@ customElements.define('strip-select', class extends HTMLElement{
         )
     }
     connectedCallback() {
+        this.setAttribute('role', 'listbox')
+
         const slot = this.shadowRoot.querySelector('slot')
         const coverLeft = this.shadowRoot.querySelector('.cover--left')
         const coverRight = this.shadowRoot.querySelector('.cover--right')
@@ -268,9 +270,6 @@ stripOption.innerHTML = `
         --active-option-color: inherit;
         --active-option-backgroud-color: rgba(var(--text-color), .2);
     }
-    .hide{
-        display: none !important;
-    }
     .strip-option{
         display: flex;
         flex-shrink: 0;
@@ -286,11 +285,17 @@ stripOption.innerHTML = `
         color: var(--active-option-color);
         background-color: var(--active-option-backgroud-color);
     }
+    :host(:focus-within){
+        outline: none;
+    }
+    :host(:focus-within) .strip-option{
+        box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
+    }
     :host(:hover:not([active])) .strip-option{
         background-color: rgba(var(--text-color), 0.06);
     }
 </style>
-<label class="strip-option" tabindex="0">
+<label class="strip-option">
     <slot></slot>
 </label>
 `
@@ -326,6 +331,8 @@ customElements.define('strip-option', class extends HTMLElement{
         }
     }
     connectedCallback() {
+        this.setAttribute('role', 'option')
+        this.setAttribute('tabindex', '0')
         this._value = this.getAttribute('value')
         this.addEventListener('click', this.fireEvent)
         this.addEventListener('keydown', this.handleKeyDown)

components/dist/tabs.js

@@ -373,7 +373,7 @@ customElements.define('sm-tab-panels', class extends HTMLElement {
                 }
             })
         }, {
-            threshold: 0.9
+            threshold: 0.6
         })
     }
     disconnectedCallback() {

components/dist/tags-input.js

@@ -12,6 +12,7 @@ tagsInput.innerHTML = `
     --background-color: 255, 255, 255;
     --danger-color: red;
     --border-radius: 0.3rem;
+	--background: rgba(var(--text-color), 0.06);
     }
 .hide{
     display: none !important;
@@ -25,7 +26,7 @@ tagsInput.innerHTML = `
     align-items: center;
     padding: 0.5rem 0.5rem 0 0.5rem;
     border-radius: var(--border-radius);
-    background-color: rgba(var(--text-color), 0.06);
+    background: var(--background);
   }
   .tags-wrapper:focus-within{
     box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;
@@ -107,6 +108,9 @@ customElements.define('tags-input', class extends HTMLElement {
 	get value() {
 		return [...this.tags].join()
 	}
+	focusIn() {
+		this.input.focus()
+	}
 	reset(){
 		this.input.value = ''
 		this.tags.clear()

components/dist/tags-input.min.js

@@ -1 +1 @@
-const tagsInput=document.createElement("template");tagsInput.innerHTML='\n  <style>\n  *{\n    padding: 0;\n    margin: 0;\n    box-sizing: border-box;\n  }\n  :host{\n\t--accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --danger-color: red;\n    --border-radius: 0.3rem;\n    }\n.hide{\n    display: none !important;\n}\n.tags-wrapper{\n    position: relative;\n    display: flex;\n    cursor: text;\n    flex-wrap: wrap;\n    justify-items: flex-start;\n    align-items: center;\n    padding: 0.5rem 0.5rem 0 0.5rem;\n    border-radius: var(--border-radius);\n    background-color: rgba(var(--text-color), 0.06);\n  }\n  .tags-wrapper:focus-within{\n    box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;\n  }\n  \n  .tag {\n    cursor: pointer;\n    user-select: none;\n    align-items: center;\n    display: inline-flex;\n    border-radius: 0.3rem;\n    padding: 0.3rem 0.5rem;\n    margin: 0 0.5rem 0.5rem 0;\n    background-color: rgba(var(--text-color), 0.06);\n  }\n  \n  .icon {\n    height: 1.2rem;\n    width: 1.2rem;\n    margin-left: 0.3rem;\n    fill: rgba(var(--text-color), 0.8);\n  }\n  \n  input,\n  input:focus {\n    outline: none;\n    border: none;\n  }\n  \n  input {\n    display: inline-flex;\n    width: auto;\n    color: inherit;\n    max-width: inherit;\n    font-size: inherit;\n    font-family: inherit;\n    padding: 0.4rem 0.5rem;\n    margin: 0 0.5rem 0.5rem 0;\n    background-color: transparent;\n  }\n  .placeholder{\n      position: absolute;\n      padding: 0 0.5rem;\n      top: 50%;\n      font-weight: 500;\n      transform: translateY(-50%);\n      color: rgba(var(--text-color), 0.6);\n  }\n  </style>\n  <div class="tags-wrapper">\n    <input type="text" size="3"/>\n    <p class="placeholder"></p>\n  </div>\n',customElements.define("tags-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(tagsInput.content.cloneNode(!0)),this.input=this.shadowRoot.querySelector("input"),this.tagsWrapper=this.shadowRoot.querySelector(".tags-wrapper"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["placeholder","limit"],this.limit=void 0,this.tags=new Set,this.reset=this.reset.bind(this),this.handleInput=this.handleInput.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.handleClick=this.handleClick.bind(this),this.removeTag=this.removeTag.bind(this)}static get observedAttributes(){return["placeholder","limit"]}get value(){return[...this.tags].join()}reset(){for(this.input.value="",this.tags.clear();this.input.previousElementSibling;)this.input.previousElementSibling.remove()}handleInput(e){const t=e.target.value.trim().length;e.target.setAttribute("size",t||"3"),t?this.placeholder.classList.add("hide"):t||this.tags.size||this.placeholder.classList.remove("hide")}handleKeydown(e){if(","!==e.key&&"/"!==e.key||e.preventDefault(),""!==e.target.value.trim()){if("Enter"===e.key||","===e.key||"/"===e.key||"Space"===e.code){const t=e.target.value.trim();if(this.tags.has(t))this.tagsWrapper.querySelector(`[data-value="${t}"]`).animate([{backgroundColor:"initial"},{backgroundColor:"var(--accent-color)"},{backgroundColor:"initial"}],{duration:300,easing:"ease"});else{const e=document.createElement("span");e.dataset.value=t,e.className="tag",e.innerHTML=`\n                        <span class="tag-text">${t}</span>\n                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>\n                        `,this.input.before(e),this.tags.add(t)}if(e.target.value="",e.target.setAttribute("size","3"),this.limit&&this.limit<this.tags.size+1)return void(this.input.readOnly=!0)}}else"Backspace"===e.key&&this.input.previousElementSibling&&this.removeTag(this.input.previousElementSibling),this.limit&&this.limit>this.tags.size&&(this.input.readOnly=!1)}handleClick(e){e.target.closest(".tag")?this.removeTag(e.target.closest(".tag")):this.input.focus()}removeTag(e){this.tags.delete(e.dataset.value),e.remove(),this.tags.size||this.placeholder.classList.remove("hide")}connectedCallback(){this.input.addEventListener("input",this.handleInput),this.input.addEventListener("keydown",this.handleKeydown),this.tagsWrapper.addEventListener("click",this.handleClick)}attributeChangedCallback(e,t,n){"placeholder"===e&&(this.placeholder.textContent=n),"limit"===e&&(this.limit=parseInt(n))}disconnectedCallback(){this.input.removeEventListener("input",this.handleInput),this.input.removeEventListener("keydown",this.handleKeydown),this.tagsWrapper.removeEventListener("click",this.handleClick)}});
+const tagsInput=document.createElement("template");tagsInput.innerHTML='\n  <style>\n  *{\n    padding: 0;\n    margin: 0;\n    box-sizing: border-box;\n  }\n  :host{\n\t--accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --danger-color: red;\n    --border-radius: 0.3rem;\n\t--background: rgba(var(--text-color), 0.06);\n    }\n.hide{\n    display: none !important;\n}\n.tags-wrapper{\n    position: relative;\n    display: flex;\n    cursor: text;\n    flex-wrap: wrap;\n    justify-items: flex-start;\n    align-items: center;\n    padding: 0.5rem 0.5rem 0 0.5rem;\n    border-radius: var(--border-radius);\n    background: var(--background);\n  }\n  .tags-wrapper:focus-within{\n    box-shadow: 0 0 0 0.1rem var(--accent-color) inset !important;\n  }\n  \n  .tag {\n    cursor: pointer;\n    user-select: none;\n    align-items: center;\n    display: inline-flex;\n    border-radius: 0.3rem;\n    padding: 0.3rem 0.5rem;\n    margin: 0 0.5rem 0.5rem 0;\n    background-color: rgba(var(--text-color), 0.06);\n  }\n  \n  .icon {\n    height: 1.2rem;\n    width: 1.2rem;\n    margin-left: 0.3rem;\n    fill: rgba(var(--text-color), 0.8);\n  }\n  \n  input,\n  input:focus {\n    outline: none;\n    border: none;\n  }\n  \n  input {\n    display: inline-flex;\n    width: auto;\n    color: inherit;\n    max-width: inherit;\n    font-size: inherit;\n    font-family: inherit;\n    padding: 0.4rem 0.5rem;\n    margin: 0 0.5rem 0.5rem 0;\n    background-color: transparent;\n  }\n  .placeholder{\n      position: absolute;\n      padding: 0 0.5rem;\n      top: 50%;\n      font-weight: 500;\n      transform: translateY(-50%);\n      color: rgba(var(--text-color), 0.6);\n  }\n  </style>\n  <div class="tags-wrapper">\n    <input type="text" size="3"/>\n    <p class="placeholder"></p>\n  </div>\n',customElements.define("tags-input",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(tagsInput.content.cloneNode(!0)),this.input=this.shadowRoot.querySelector("input"),this.tagsWrapper=this.shadowRoot.querySelector(".tags-wrapper"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["placeholder","limit"],this.limit=void 0,this.tags=new Set,this.reset=this.reset.bind(this),this.handleInput=this.handleInput.bind(this),this.handleKeydown=this.handleKeydown.bind(this),this.handleClick=this.handleClick.bind(this),this.removeTag=this.removeTag.bind(this)}static get observedAttributes(){return["placeholder","limit"]}get value(){return[...this.tags].join()}focusIn(){this.input.focus()}reset(){for(this.input.value="",this.tags.clear();this.input.previousElementSibling;)this.input.previousElementSibling.remove()}handleInput(t){const e=t.target.value.trim().length;t.target.setAttribute("size",e||"3"),e?this.placeholder.classList.add("hide"):e||this.tags.size||this.placeholder.classList.remove("hide")}handleKeydown(t){if(","!==t.key&&"/"!==t.key||t.preventDefault(),""!==t.target.value.trim()){if("Enter"===t.key||","===t.key||"/"===t.key||"Space"===t.code){const e=t.target.value.trim();if(this.tags.has(e))this.tagsWrapper.querySelector(`[data-value="${e}"]`).animate([{backgroundColor:"initial"},{backgroundColor:"var(--accent-color)"},{backgroundColor:"initial"}],{duration:300,easing:"ease"});else{const t=document.createElement("span");t.dataset.value=e,t.className="tag",t.innerHTML=`\n                        <span class="tag-text">${e}</span>\n                        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>\n                        `,this.input.before(t),this.tags.add(e)}if(t.target.value="",t.target.setAttribute("size","3"),this.limit&&this.limit<this.tags.size+1)return void(this.input.readOnly=!0)}}else"Backspace"===t.key&&this.input.previousElementSibling&&this.removeTag(this.input.previousElementSibling),this.limit&&this.limit>this.tags.size&&(this.input.readOnly=!1)}handleClick(t){t.target.closest(".tag")?this.removeTag(t.target.closest(".tag")):this.input.focus()}removeTag(t){this.tags.delete(t.dataset.value),t.remove(),this.tags.size||this.placeholder.classList.remove("hide")}connectedCallback(){this.input.addEventListener("input",this.handleInput),this.input.addEventListener("keydown",this.handleKeydown),this.tagsWrapper.addEventListener("click",this.handleClick)}attributeChangedCallback(t,e,n){"placeholder"===t&&(this.placeholder.textContent=n),"limit"===t&&(this.limit=parseInt(n))}disconnectedCallback(){this.input.removeEventListener("input",this.handleInput),this.input.removeEventListener("keydown",this.handleKeydown),this.tagsWrapper.removeEventListener("click",this.handleClick)}});

components/dist/textarea.js

@@ -23,11 +23,10 @@ smTextarea.innerHTML = `
     --danger-color: red;
     --border-radius: 0.3rem;
     --background: rgba(var(--text-color), 0.06);
-    --padding-right: initial;
+    --padding: initial;
-    --padding-left: initial;
     --max-height: 8rem;
 }
-:host(.outlined) .textarea {
+:host([variant="outlined"]) .textarea {
     box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;
     background: rgba(var(--background-color), 1);
 }
@@ -43,8 +42,7 @@ smTextarea.innerHTML = `
     max-height: var(--max-height);
     background: var(--background);
     border-radius: var(--border-radius);
-    padding-left: var(--padding-left);
+    padding: var(--padding);
-    padding-right: var(--padding-right);
 }
 .textarea::after,
 textarea{
@@ -77,10 +75,6 @@ textarea{
 .textarea:focus-within:not(.readonly){
     box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
 }
-.disabled{
-    pointer-events: none;
-    opacity: 0.6;
-}
 .placeholder{
     position: absolute;
     margin: 0.7rem 1rem;
@@ -91,6 +85,10 @@ textarea{
     pointer-events: none;
     user-select: none;
 }
+:host([disabled]) .textarea{
+    cursor: not-allowed;
+    opacity: 0.6;
+}
 @media (any-hover: hover){
     ::-webkit-scrollbar{
         width: 0.5rem;
@@ -122,7 +120,7 @@ customElements.define('sm-textarea',
             this.textarea = this.shadowRoot.querySelector('textarea')
             this.textareaBox = this.shadowRoot.querySelector('.textarea')
             this.placeholder = this.shadowRoot.querySelector('.placeholder')
-            this.reflectedAttributes = ['required', 'readonly', 'rows', 'minlength', 'maxlength']
+            this.reflectedAttributes = ['disabled', 'required', 'readonly', 'rows', 'minlength', 'maxlength']
         
             this.reset = this.reset.bind(this)
             this.focusIn = this.focusIn.bind(this)
@@ -130,7 +128,7 @@ customElements.define('sm-textarea',
             this.checkInput = this.checkInput.bind(this)
         }
         static get observedAttributes() {
-            return ['value', 'placeholder', 'required', 'readonly', 'rows', 'minlength', 'maxlength']
+            return ['disabled', 'value', 'placeholder', 'required', 'readonly', 'rows', 'minlength', 'maxlength']
         }
         get value() {
             return this.textarea.value
@@ -139,6 +137,16 @@ customElements.define('sm-textarea',
             this.setAttribute('value', val)
             this.fireEvent()
         }
+        get disabled() {
+            return this.hasAttribute('disabled')
+        }
+        set disabled(val) {
+            if (val) {
+                this.setAttribute('disabled', '')   
+            } else {
+                this.removeAttribute('disabled')   
+            }
+        }
         get isValid() {
             return this.textarea.checkValidity()
         }
@@ -177,7 +185,7 @@ customElements.define('sm-textarea',
                     this.textarea.setAttribute(name, this.getAttribute(name) ? this.getAttribute(name) : '')
                 }
                 else {
-                    this.input.removeAttribute(name)
+                    this.textContent.removeAttribute(name)
                 }
             }
             else if (name === 'placeholder') {

components/dist/textarea.min.js

@@ -1 +1 @@
-const smTextarea=document.createElement("template");smTextarea.innerHTML='\n<style>\n*,\n*::before,\n*::after { \n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \n::-moz-focus-inner{\n    border: none;\n}\n.hide{\n    opacity: 0 !important;\n}\n:host{\n    display: grid;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --danger-color: red;\n    --border-radius: 0.3rem;\n    --background: rgba(var(--text-color), 0.06);\n    --padding-right: initial;\n    --padding-left: initial;\n    --max-height: 8rem;\n}\n:host(.outlined) .textarea {\n    box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;\n    background: rgba(var(--background-color), 1);\n}\n.textarea{\n    display: grid;\n    position: relative;\n    cursor: text;\n    min-width: 0;\n    text-align: left;\n    overflow: hidden auto;\n    grid-template-columns: 1fr;\n    align-items: stretch;\n    max-height: var(--max-height);\n    background: var(--background);\n    border-radius: var(--border-radius);\n    padding-left: var(--padding-left);\n    padding-right: var(--padding-right);\n}\n.textarea::after,\ntextarea{\n    padding: 0.7rem 1rem;\n    width: 100%;\n    min-width: 1em;\n    font: inherit;\n    color: inherit;\n    resize: none;\n    grid-area: 2/1;\n    justify-self: stretch;\n    background: none;\n    appearance: none;\n    border: none;\n    outline: none;\n    line-height: 1.5;\n    overflow: hidden;\n}\n.textarea::after{\n    content: attr(data-value) \' \';\n    visibility: hidden;\n    white-space: pre-wrap;\n    overflow-wrap: break-word;\n    word-wrap: break-word;\n    hyphens: auto;\n}\n.readonly{\n    pointer-events: none;\n}\n.textarea:focus-within:not(.readonly){\n    box-shadow: 0 0 0 0.1rem var(--accent-color) inset;\n}\n.disabled{\n    pointer-events: none;\n    opacity: 0.6;\n}\n.placeholder{\n    position: absolute;\n    margin: 0.7rem 1rem;\n    opacity: .7;\n    font-weight: 400;\n    font-size: 1rem;\n    line-height: 1.5;\n    pointer-events: none;\n    user-select: none;\n}\n@media (any-hover: hover){\n    ::-webkit-scrollbar{\n        width: 0.5rem;\n        height: 0.5rem;\n    }\n    \n    ::-webkit-scrollbar-thumb{\n        background: rgba(var(--text-color), 0.3);\n        border-radius: 1rem;\n        &:hover{\n            background: rgba(var(--text-color), 0.5);\n        }\n    }\n}\n</style>\n<label class="textarea" part="textarea">\n    <span class="placeholder"></span>\n    <textarea rows="1"></textarea>\n</label>\n',customElements.define("sm-textarea",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTextarea.content.cloneNode(!0)),this.textarea=this.shadowRoot.querySelector("textarea"),this.textareaBox=this.shadowRoot.querySelector(".textarea"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["required","readonly","rows","minlength","maxlength"],this.reset=this.reset.bind(this),this.focusIn=this.focusIn.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this)}static get observedAttributes(){return["value","placeholder","required","readonly","rows","minlength","maxlength"]}get value(){return this.textarea.value}set value(e){this.setAttribute("value",e),this.fireEvent()}get isValid(){return this.textarea.checkValidity()}reset(){this.setAttribute("value","")}focusIn(){this.textarea.focus()}fireEvent(){let e=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(e)}checkInput(){this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder")&&(""!==this.textarea.value?this.placeholder.classList.add("hide"):this.placeholder.classList.remove("hide"))}connectedCallback(){this.textarea.addEventListener("input",e=>{this.textareaBox.dataset.value=this.textarea.value,this.checkInput()})}attributeChangedCallback(e,t,n){this.reflectedAttributes.includes(e)?this.hasAttribute(e)?this.textarea.setAttribute(e,this.getAttribute(e)?this.getAttribute(e):""):this.input.removeAttribute(e):"placeholder"===e?this.placeholder.textContent=this.getAttribute("placeholder"):"value"===e&&(this.textarea.value=n,this.textareaBox.dataset.value=n,this.checkInput())}});
+const smTextarea=document.createElement("template");smTextarea.innerHTML='\n<style>\n*,\n*::before,\n*::after { \n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \n::-moz-focus-inner{\n    border: none;\n}\n.hide{\n    opacity: 0 !important;\n}\n:host{\n    display: grid;\n    --accent-color: #4d2588;\n    --text-color: 17, 17, 17;\n    --background-color: 255, 255, 255;\n    --danger-color: red;\n    --border-radius: 0.3rem;\n    --background: rgba(var(--text-color), 0.06);\n    --padding: initial;\n    --max-height: 8rem;\n}\n:host([variant="outlined"]) .textarea {\n    box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 0.4) inset;\n    background: rgba(var(--background-color), 1);\n}\n.textarea{\n    display: grid;\n    position: relative;\n    cursor: text;\n    min-width: 0;\n    text-align: left;\n    overflow: hidden auto;\n    grid-template-columns: 1fr;\n    align-items: stretch;\n    max-height: var(--max-height);\n    background: var(--background);\n    border-radius: var(--border-radius);\n    padding: var(--padding);\n}\n.textarea::after,\ntextarea{\n    padding: 0.7rem 1rem;\n    width: 100%;\n    min-width: 1em;\n    font: inherit;\n    color: inherit;\n    resize: none;\n    grid-area: 2/1;\n    justify-self: stretch;\n    background: none;\n    appearance: none;\n    border: none;\n    outline: none;\n    line-height: 1.5;\n    overflow: hidden;\n}\n.textarea::after{\n    content: attr(data-value) \' \';\n    visibility: hidden;\n    white-space: pre-wrap;\n    overflow-wrap: break-word;\n    word-wrap: break-word;\n    hyphens: auto;\n}\n.readonly{\n    pointer-events: none;\n}\n.textarea:focus-within:not(.readonly){\n    box-shadow: 0 0 0 0.1rem var(--accent-color) inset;\n}\n.placeholder{\n    position: absolute;\n    margin: 0.7rem 1rem;\n    opacity: .7;\n    font-weight: 400;\n    font-size: 1rem;\n    line-height: 1.5;\n    pointer-events: none;\n    user-select: none;\n}\n:host([disabled]) .textarea{\n    cursor: not-allowed;\n    opacity: 0.6;\n}\n@media (any-hover: hover){\n    ::-webkit-scrollbar{\n        width: 0.5rem;\n        height: 0.5rem;\n    }\n    \n    ::-webkit-scrollbar-thumb{\n        background: rgba(var(--text-color), 0.3);\n        border-radius: 1rem;\n        &:hover{\n            background: rgba(var(--text-color), 0.5);\n        }\n    }\n}\n</style>\n<label class="textarea" part="textarea">\n    <span class="placeholder"></span>\n    <textarea rows="1"></textarea>\n</label>\n',customElements.define("sm-textarea",class extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(smTextarea.content.cloneNode(!0)),this.textarea=this.shadowRoot.querySelector("textarea"),this.textareaBox=this.shadowRoot.querySelector(".textarea"),this.placeholder=this.shadowRoot.querySelector(".placeholder"),this.reflectedAttributes=["disabled","required","readonly","rows","minlength","maxlength"],this.reset=this.reset.bind(this),this.focusIn=this.focusIn.bind(this),this.fireEvent=this.fireEvent.bind(this),this.checkInput=this.checkInput.bind(this)}static get observedAttributes(){return["disabled","value","placeholder","required","readonly","rows","minlength","maxlength"]}get value(){return this.textarea.value}set value(e){this.setAttribute("value",e),this.fireEvent()}get disabled(){return this.hasAttribute("disabled")}set disabled(e){e?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get isValid(){return this.textarea.checkValidity()}reset(){this.setAttribute("value","")}focusIn(){this.textarea.focus()}fireEvent(){let e=new Event("input",{bubbles:!0,cancelable:!0,composed:!0});this.dispatchEvent(e)}checkInput(){this.hasAttribute("placeholder")&&""!==this.getAttribute("placeholder")&&(""!==this.textarea.value?this.placeholder.classList.add("hide"):this.placeholder.classList.remove("hide"))}connectedCallback(){this.textarea.addEventListener("input",e=>{this.textareaBox.dataset.value=this.textarea.value,this.checkInput()})}attributeChangedCallback(e,t,n){this.reflectedAttributes.includes(e)?this.hasAttribute(e)?this.textarea.setAttribute(e,this.getAttribute(e)?this.getAttribute(e):""):this.textContent.removeAttribute(e):"placeholder"===e?this.placeholder.textContent=this.getAttribute("placeholder"):"value"===e&&(this.textarea.value=n,this.textareaBox.dataset.value=n,this.checkInput())}});

components/index.html

@@ -453,10 +453,57 @@
 
             <section id="copy_page" class="page hide-completely">
                 <h1 class="page__title">Copy</h1>
-                <p>
+                <h2>Interactive demo</h2>
-                    To start using SM Components
-                </p>
                 <sm-copy value="copy this message"></sm-copy>
+                <pre>
+<code>
+&lt;sm-copy value="copy this message"&gt;&lt;/sm-copy&gt;        
+</code>
+</pre>
+                <h2>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">value</span> ( string )</div>
+                        <p>
+                            Defines content that will be copied when copy button is clicked
+                        </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">--button-background-color</span></div>
+                        <p>
+                            Defines background color of copy button
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">--button-border-radius</span></div>
+                        <p>
+                            Defines border-radius of copy button
+                        </p>
+                    </div>
+                </section>
+                <h2>Usage</h2>
+                <pre>
+<code>
+&lt;sm-copy id="text_to_copy" value="sample text"&gt;&lt;/sm-copy&gt;
+&lt;script&gt;
+    const textToCopy = document.getElementById('text_to_copy')
+    textToCopy.value = 'Different value'; /* Setting value to be copied */
+&lt;/script&gt;          
+</code>
+</pre>
+
             </section>
 
             <section id="file_input_page" class="page hide-completely">
@@ -528,7 +575,7 @@
                     <div class="tr">
                         <div><span class="highlight">reset()</span></div>
                         <p>
-                            When this function is called upon form element. all the form elements (sm- form elements
+                            When this function is called upon form element. all the form elements (sm- form components
                             only) will be reset to default state.
                         </p>
                     </div>
@@ -618,6 +665,19 @@
                             function.
                         </p>
                     </div>
+                    <div class="tr">
+                        <div><span class="highlight">disabled</span></div>
+                        <p>
+                            Set disabled state to <span class="highlight">true</span> or <span
+                                class="highlight">false</span>
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">value</span></div>
+                        <p>
+                            Sets the value of input with JS
+                        </p>
+                    </div>
                 </section>
                 <pre>
 <code>
@@ -750,13 +810,153 @@
                     Popups are used to show addition UI elements that you may want to hide at first and reveal them when
                     needed.
                 </p>
-                <sm-popup id="popup">
+                <h2>Interactive demo</h2>
-                    <sm-form>
+                <sm-popup id="my_popup">
-                        <sm-input placeholder="hjdfijkgbn"></sm-input>
+                    <h2>Title</h2>
-                    </sm-form>
+                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore tenetur natus, pariatur beatae
+                        veritatis debitis repellat laudantium corporis velit adipisci!</p>
                 </sm-popup>
+                <sm-button onclick="getRef('my_popup').show()">show popup</sm-button>
+                <pre>
+<code>
+&lt;sm-popup id="my_popup"&gt;
+&lt;!--Popup content --&gt;
+&lt;/sm-popup&gt;      
+</code>
+</pre>
+                <h2>Usage</h2>
+                <pre>
+<code>
+&lt;sm-popup id="my_popup"&gt;
+    &lt;!--Popup content --&gt;
+&lt;/sm-popup&gt;
+&lt;sm-button id="show_popup_button"&gt;Show popup&lt;/sm-button&gt;
+&lt;script&gt;
+    const myPopup = document.getElementById('my_popup')
+    document.getElementById('show_popup_button').addEventListener('click', e =&gt; {
+        myPopup.show({options});
+    })
+&lt;/script&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">open</span> (boolean)</div>
+                        <p>
+                            If present, popup will be in opened state by default. useful for development purpose.
+                        </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">--backdrop-background</span></div>
+                        <p>
+                            Defines background property of popup backdrop. Any valid CSS background value is supported.
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">--border-radius</span></div>
+                        <p>
+                            Defines border-radius of popup dialog box.
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">--body-padding</span></div>
+                        <p>
+                            Defines padding of popup dialog box.
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">--height</span></div>
+                        <p>
+                            Defines height of popup dialog box.
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">--min-height</span></div>
+                        <p>
+                            Defines min-height of popup dialog box.
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">--width</span></div>
+                        <p>
+                            Defines width of popup dialog box.
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">--min-width</span></div>
+                        <p>
+                            Defines min-width of popup dialog box.
+                        </p>
+                    </div>
+                </section>
+                <h2>Supported functions</h2>
+                <section class="table">
+                    <div class="tr">
+                        <h4 class="table__heading">Function</h4>
+                        <h4 class="table__heading">Description</h4>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">show()</span></div>
+                        <p>
+                            Displays the hidden popup, when called upon specified popup.
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">hide()</span></div>
+                        <p>
+                            Hides the visible popup, when called upon specified popup
+                        </p>
+                    </div>
+                </section>
 
-                <sm-button variant="primary" onclick="getRef('popup').show()">show popup</sm-button>
+                <h4>Show() options</h4>
+                <section class="table">
+                    <div class="tr">
+                        <h4 class="table__heading">Property</h4>
+                        <h4 class="table__heading">Description</h4>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">pinned</span> ( Boolean )</div>
+                        <p>
+                            If set <span class="highlight">true</span>, opened popup won't be closed when clicked
+                            outside the popup area.
+                        </p>
+                    </div>
+                </section>
+                <h2>Custom events</h2>
+                <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">popupopned</span></div>
+                        <p>
+                            Fired when a popup is opened, to access which popup fired the event you can use
+                            <span class="highlight">event.detail.popup</span> within event listener
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">popupclosed</span></div>
+                        <p>
+                            Fired when a popup is closed, to access which popup fired the event you can use
+                            <span class="highlight">event.detail.popup</span> within event listener
+                        </p>
+                    </div>
+                </section>
             </section>
 
             <section id="radio_page" class="page hide-completely">
@@ -775,25 +975,25 @@
                 <h2>Interactive demo</h2>
                 <div class="grid gap-0-5">
                     <sm-radio name="abc" value="on" checked>
-                        <div class="flex">&nbsp;&nbsp;On</div>
+                        <div>&nbsp;&nbsp;On</div>
                     </sm-radio>
                     <sm-radio name="abc" value="off">
-                        <div class="flex">&nbsp;&nbsp;Off</div>
+                        <div>&nbsp;&nbsp;Off</div>
                     </sm-radio>
                     <sm-radio name="abc" value="🤷">
-                        <div class="flex">&nbsp;&nbsp;🤷</div>
+                        <div>&nbsp;&nbsp;🤷</div>
                     </sm-radio>
                 </div>
                 <pre>
 <code>
 &lt;sm-radio name="abc" value="on" checked&gt;
-    &lt;div class="flex"&gt;&nbsp;&nbsp;On&lt;/div&gt;
+    &lt;div&gt;&nbsp;&nbsp;On&lt;/div&gt;
 &lt;/sm-radio&gt;
 &lt;sm-radio name="abc" value="off"&gt;
-    &lt;div class="flex"&gt;&nbsp;&nbsp;Off&lt;/div&gt;
+    &lt;div&gt;&nbsp;&nbsp;Off&lt;/div&gt;
 &lt;/sm-radio&gt;
 &lt;sm-radio name="abc" value="🤷"&gt;
-    &lt;div class="flex"&gt;&nbsp;&nbsp;🤷&lt;/div&gt;
+    &lt;div&gt;&nbsp;&nbsp;🤷&lt;/div&gt;
 &lt;/sm-radio&gt;          
 </code>
 </pre>
@@ -919,6 +1119,7 @@
                         </p>
                     </div>
                 </section>
+                <h2>Usage</h2>
                 <pre>
 <code>
 &lt;sm-select id="my_select"&gt;
@@ -1039,50 +1240,413 @@
             <section id="strip_select_page" class="page hide-completely">
                 <h1 class="page__title">Strip select</h1>
                 <p>
-                    To start using SM Components
+                    This is a modern interpritation of classical HTML <span class="highlight">select</span> tag. More
+                    suitable for touch devices,
                 </p>
-                <strip-select id="browse_category_selector" multiline>
+                <h2>Interactive demo</h2>
-                    <strip-option value="movie" selected>Movie</strip-option>
+                <span>Sort by </span>
-                    <strip-option value="tv series">TV series</strip-option>
+                <strip-select id="sort_by">
-                    <strip-option value="video">Video</strip-option>
+                    <strip-option value="relevance" selected>Relevance</strip-option>
-                    <strip-option value="music">Music</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>
+<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; 
+</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>
+<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;script&gt;
+    const sortBy = document.getElementById('sort_by')
+    sortBy.addEventListener('change', event =&gt; {
+        console.log(event.detail.value) // logs out value of selected option
+    })
+&lt;/script&gt;
+</code>
+</pre>
             </section>
 
             <section id="tabs_page" class="page hide-completely">
                 <h1 class="page__title">Tabs</h1>
                 <p>
-                    To start using SM Components
+                    This component can be used sub-page navigation.
                 </p>
-                <sm-tab-header variant="tab" target="tab1">
+                <h2>Usage</h2>
+                <pre>
+<code>
+&lt;sm-tab-header target="tab1"&gt;
+    &lt;sm-tab&gt;
+        tab name
+    &lt;/sm-tab&gt;
+    &lt;sm-tab&gt;
+        tab name
+    &lt;/sm-tab&gt;
+&lt;/sm-tab-header&gt;
+&lt;sm-tab-panels id="tab1"&gt;
+    &lt;section&gt;
+        &lt;!-- Panel content --&gt;
+    &lt;/section&gt;
+    &lt;section&gt;
+        &lt;!-- Panel content --&gt;
+    &lt;/section&gt;
+&lt;/sm-tab-panels&gt;
+</code>
+</pre>
+                <p>
+                    There are three components that together make the tabs components.
+                <ol>
+                    <li>sm-tab-header</li>
+                    <li>sm-tab</li>
+                    <li>sm-tab-panels</li>
+                </ol>
+                </p>
+
+                <h3>sm-tab-header</h3>
+                <p>This is the first half of tabs that include the tabs header and actual tab buttons.</p>
+                <pre>
+<code>
+&lt;sm-tab-header variant="tab" target="tab2"&gt;
+    &lt;sm-tab&gt;Audio&lt;/sm-tab&gt;
+    &lt;sm-tab&gt;Video&lt;/sm-tab&gt;
+&lt;/sm-tab-header&gt;
+</code>
+</pre>
+                <h2>Supported 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">variant</span> ( string )</div>
+                        <p>
+                            Specifies variant of sm-tab-header. Only value can be <span class="highlight">tab</span>
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">target</span> ( string )</div>
+                        <p>
+                            Pass in the ID of respective sm-tab-panels to link them. This is how sm-tab-header communicates with sm-tab-panel on which tab or panel should be displayed.
+                        </p>
+                    </div>
+                </section>
+                <h2>Interactive demo</h2>
+                <sm-tab-header target="tab1">
                     <sm-tab>Audio</sm-tab>
                     <sm-tab>Video</sm-tab>
                 </sm-tab-header>
                 <sm-tab-panels id="tab1">
-                    <sm-panel>
+                    <section>
-                        gjdhnsrfijbgn<br>bdfjnbj
+                        <h3>Audio</h3>
-                    </sm-panel>
+                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae
-                    <sm-panel>
+                            repellat qui. Expedita fugiat voluptates beatae itaque corporis!</p>
-                        jadifjoaijdiajdo
+                    </section>
-                        dosfighjoi<br>
+                    <section>
-                        flkmgklfmzkl<br>
+                        <h3>Video</h3>
-                        hbdsfhb
+                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae
-                    </sm-panel>
+                            repellat qui. Expedita fugiat voluptates beatae itaque corporis!</p>
+                    </section>
                 </sm-tab-panels>
+                <h2>Variants</h2>
+                <p><span class="highlight">tab</span> is the only other variant than default style.</p>
+                <sm-tab-header variant="tab" target="tab2">
+                    <sm-tab>Audio</sm-tab>
+                    <sm-tab>Video</sm-tab>
+                </sm-tab-header>
+                <sm-tab-panels id="tab2">
+                    <section>
+                        <h3>Audio</h3>
+                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae
+                            repellat qui. Expedita fugiat voluptates beatae itaque corporis!</p>
+                    </section>
+                    <section>
+                        <h3>Video</h3>
+                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae
+                            repellat qui. Expedita fugiat voluptates beatae itaque corporis!</p>
+                    </section>
+                </sm-tab-panels>
+                <pre>
+<code>
+&lt;sm-tab-header variant="tab" target="tab2"&gt;
+    &lt;sm-tab&gt;Audio&lt;/sm-tab&gt;
+    &lt;sm-tab&gt;Video&lt;/sm-tab&gt;
+&lt;/sm-tab-header&gt;
+</code>
+</pre>
             </section>
+
             <section id="tags_input_page" class="page hide-completely">
                 <h1 class="page__title">Tags input</h1>
                 <p>
-                    To start using SM Components
+                    This component has a very specific use case and that is for accepting tags.
+                    Each time user presses enter or space, a new tag is created. Only unique values are allowed.
                 </p>
+                <h2>Interactive demo</h2>
                 <tags-input placeholder="Add tags..."></tags-input>
+                <pre>
+<code>
+&lt;tags-input placeholder="Add tags..."&gt;&lt;/tags-input&gt;      
+</code>
+</pre>
+                <h2>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">placeholder</span> ( string )</div>
+                        <p>
+                            Define some string to let user know which kind of input is required.
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">limit</span> ( number )</div>
+                        <p>
+                            Set a limit of tags that will be accepted atmost
+                        </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">--background</span></div>
+                        <p>
+                            Defines background of tags-input. Any valid CSS background property values are supported.
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">--border-radius</span></div>
+                        <p>
+                            Defines border-radius of tags-input
+                        </p>
+                    </div>
+                </section>
+                <h2>Supported functions</h2>
+                <section class="table">
+                    <div class="tr">
+                        <h4 class="table__heading">Function</h4>
+                        <h4 class="table__heading">Description</h4>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">focusIn()</span></div>
+                        <p>
+                            To give focus to this component use this function instead of <span
+                                class="highlight">focus()</span>
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">reset()</span></div>
+                        <p>
+                            When this function is called value will be set to empty string.
+                        </p>
+                    </div>
+                </section>
+                <h2>Usage</h2>
+                <pre>
+<code>
+&lt;tags-input id="get_tags" placeholder="Add tags..."&gt;&lt;/tags-input&gt;
+&lt;script&gt;
+    const getTags = document.getElementById('get_tags')
+    console.log(getTags.value); /* returns an array of string that are user input */ 
+&lt;/script&gt;      
+</code>
+</pre>
+
             </section>
+
             <section id="textarea_page" class="page hide-completely">
                 <h1 class="page__title">Textarea</h1>
-                <p>
+                <p>Textarea is suitable component where multiline input is required. you can either specify
-                    To start using SM Components
+                    the number of lines textarea should expand or let the textarea expand according to user input until
-                </p>
+                    a max-height is reached.</p>
-                <sm-textarea placeholder="Add some text here..." rows="4"></sm-textarea>
+                <h2>Interactive demo</h2>
+                <sm-textarea id="my_textarea" placeholder="Add some text here..." rows="2"></sm-textarea>
+                <pre>
+<code>
+&lt;sm-textarea id="my_textarea" placeholder="Add some text here..." rows="4"&gt;&lt;/sm-textarea&gt;
+</code>
+</pre>
+                <h2>Variants</h2>
+                <p><span class="highlight">outlined</span> is only one styled variation. Default is filled which doesn't
+                    require variant specified.</p>
+                <sm-textarea placeholder="This is a textarea" variant="outlined"></sm-textarea>
+                <pre>
+<code>
+&lt;sm-textarea placeholder="This is a textarea" variant="outlined"&gt;&lt;/sm-textarea&gt;
+</code>
+</pre>
+                <h2>Supported Attributes</h2>
+                <p>All the native HTML textarea 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">disabled</span> (boolean)</div>
+                        <p>
+                            If present, all the interactions will be blocked.
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">rows</span> (number)</div>
+                        <p>
+                            Sets the number of rows textarea will be expanded by default.
+                            Default is "1".
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">value</span> (string)</div>
+                        <p>
+                            Sets the default value of textarea.
+                        </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">--background</span></div>
+                        <p>
+                            Defines background textarea. Any valid CSS background property values are supported.
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">--border-radius</span></div>
+                        <p>
+                            Defines border-radius of textarea
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">--max-height</div>
+                        <p>
+                            Defines max-height to which textarea is allowed to expand. Default is "8rem"
+                        </p>
+                    </div>
+                </section>
+                <h2>Supported functions</h2>
+                <section class="table">
+                    <div class="tr">
+                        <h4 class="table__heading">Function</h4>
+                        <h4 class="table__heading">Description</h4>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">focusIn()</span></div>
+                        <p>
+                            To give focus to this component use this function instead of <span
+                                class="highlight">focus()</span>
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">reset()</span></div>
+                        <p>
+                            When this function is called value will be set to empty string.
+                        </p>
+                    </div>
+                </section>
+
+                <h2>Setters</h2>
+                <section class="table">
+                    <div class="tr">
+                        <h4 class="table__heading">Function</h4>
+                        <h4 class="table__heading">Description</h4>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">disabled</span></div>
+                        <p>
+                            Set disabled state to <span class="highlight">true</span> or <span
+                                class="highlight">false</span>
+                        </p>
+                    </div>
+                    <div class="tr">
+                        <div><span class="highlight">value</span></div>
+                        <p>
+                            Sets the value of textarea with JS
+                        </p>
+                    </div>
+                </section>
+                <h2>Usage</h2>
+                <pre>
+<code>
+&lt;sm-textarea placeholder="This is a textarea" id="my_textarea"&gt;&lt;/sm-textarea&gt;
+&lt;script&gt;
+    const myTextarea = document.getElelementById('my_textarea')
+    myTextarea.value = 'some string'; /* setting value of textarea */
+    
+    myTextarea.addEventListener('input', event => {
+        const value = event.target.value; /* accessing value of textarea */
+    })
+&lt;/script&gt;
+</code>
+</pre>
             </section>
             <section id="text_field_page" class="page hide-completely">
                 <h1 class="page__title">Text field</h1>
@@ -1332,7 +1896,7 @@
         async function showPopup(popup, pinned) {
             zIndex++
             getRef(popup).setAttribute('style', `z-index: ${zIndex}`)
-            popupStack = getRef(popup).show(pinned, popupStack)
+            popupStack = getRef(popup).show({ pinned, popupStack })
             return getRef(popup);
         }
 

components/index.min.html

@@ -28,11 +28,23 @@
     <div style="margin-left: 0.5rem;">Disabled checkbox</div>
 </sm-checkbox>           
 </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, checkbox is set to checked state as default.</p></div><div class="tr"><div><span class="highlight">disabled</span> (boolean)</div><p>If present checkbox 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 checkbox which can be accessed by value property with JS</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">--border-color</span></div><p>Defines color of un-checked checkbox border</p></div><div class="tr"><div><span class="highlight">--border-radius</span></div><p>Defines border-radius of checkbox square</p></div><div class="tr"><div><span class="highlight">--height</span></div><p>Defines height of checkbox</p></div><div class="tr"><div><span class="highlight">--width</span></div><p>Defines width of checkbox</p></div></section></section><section id="copy_page" class="page hide-completely"><h1 class="page__title">Copy</h1><p>To start using SM Components</p><sm-copy value="copy this message"></sm-copy></section><section id="file_input_page" class="page hide-completely"><h1 class="page__title">File input</h1><p><span class="highlight">&lt;file-input&gt;</span> is essentially native <span class="highlight">&lt;input type="file"/&gt; </span>with added style.<br>So every attribute supported by native file input is supported as can be used in exactly same way.</p><h2>Interactive demo</h2><file-input multiple>Select multiple files</file-input><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, checkbox is set to checked state as default.</p></div><div class="tr"><div><span class="highlight">disabled</span> (boolean)</div><p>If present checkbox 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 checkbox which can be accessed by value property with JS</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">--border-color</span></div><p>Defines color of un-checked checkbox border</p></div><div class="tr"><div><span class="highlight">--border-radius</span></div><p>Defines border-radius of checkbox square</p></div><div class="tr"><div><span class="highlight">--height</span></div><p>Defines height of checkbox</p></div><div class="tr"><div><span class="highlight">--width</span></div><p>Defines width of checkbox</p></div></section></section><section id="copy_page" class="page hide-completely"><h1 class="page__title">Copy</h1><h2>Interactive demo</h2><sm-copy value="copy this message"></sm-copy><pre>
+<code>
+&lt;sm-copy value="copy this message"&gt;&lt;/sm-copy&gt;        
+</code>
+</pre><h2>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">value</span> ( string )</div><p>Defines content that will be copied when copy button is clicked</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">--button-background-color</span></div><p>Defines background color of copy button</p></div><div class="tr"><div><span class="highlight">--button-border-radius</span></div><p>Defines border-radius of copy button</p></div></section><h2>Usage</h2><pre>
+<code>
+&lt;sm-copy id="text_to_copy" value="sample text"&gt;&lt;/sm-copy&gt;
+&lt;script&gt;
+    const textToCopy = document.getElementById('text_to_copy')
+    textToCopy.value = 'Different value'; /* Setting value to be copied */
+&lt;/script&gt;          
+</code>
+</pre></section><section id="file_input_page" class="page hide-completely"><h1 class="page__title">File input</h1><p><span class="highlight">&lt;file-input&gt;</span> is essentially native <span class="highlight">&lt;input type="file"/&gt; </span>with added style.<br>So every attribute supported by native file input is supported as can be used in exactly same way.</p><h2>Interactive demo</h2><file-input multiple>Select multiple files</file-input><pre>
 <code>
 &lt;file-input multiple&gt;Select multiple files&lt;/file-input&gt;
 </code>
-</pre><h2>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">accept</span></div><p>One or more unique file type specifiers describing file types to allow</p></div><div class="tr"><div><span class="highlight">capture</span></div><p>What source to use for capturing image or video data</p></div><div class="tr"><div><span class="highlight">files</span></div><p>A FileList listing the chosen files</p></div><div class="tr"><div><span class="highlight">multiple</span></div><p>A Boolean which, if present, indicates that the user may choose more than one file</p></div></section></section><section id="form_page" class="page hide-completely"><h1 class="page__title">Form</h1><p>Browser support for web components form validation or form submition is not perfect. so to circumvent this problem <span class="highlight">&lt;sm-form&gt;</span> can be used.</p><h2>Interactive demo</h2><sm-form><sm-input placeholder="Email" type="email" error-text="please enter correct email" required animate></sm-input><sm-input placeholder="Password" type="password" required animate></sm-input><sm-button variant="primary" disabled>Login</sm-button></sm-form><h2>Supported functions</h2><section class="table"><div class="tr"><h4 class="table__heading">Function</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">reset()</span></div><p>When this function is called upon form element. all the form elements (sm- form elements only) will be reset to default state.</p></div></section><h2>Nested element behaviour</h2><p></p></section><section id="hamburger_menu_page" class="page hide-completely"><h1 class="page__title">Hamburger menu</h1><hamburger-menu></hamburger-menu></section><section id="input_page" class="page hide-completely"><h1 class="page__title">Input</h1><h2>Interactive demo</h2><sm-input id="my_input" placeholder="Email" type="email" value="john@doe" animate></sm-input><pre>
+</pre><h2>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">accept</span></div><p>One or more unique file type specifiers describing file types to allow</p></div><div class="tr"><div><span class="highlight">capture</span></div><p>What source to use for capturing image or video data</p></div><div class="tr"><div><span class="highlight">files</span></div><p>A FileList listing the chosen files</p></div><div class="tr"><div><span class="highlight">multiple</span></div><p>A Boolean which, if present, indicates that the user may choose more than one file</p></div></section></section><section id="form_page" class="page hide-completely"><h1 class="page__title">Form</h1><p>Browser support for web components form validation or form submition is not perfect. so to circumvent this problem <span class="highlight">&lt;sm-form&gt;</span> can be used.</p><h2>Interactive demo</h2><sm-form><sm-input placeholder="Email" type="email" error-text="please enter correct email" required animate></sm-input><sm-input placeholder="Password" type="password" required animate></sm-input><sm-button variant="primary" disabled>Login</sm-button></sm-form><h2>Supported functions</h2><section class="table"><div class="tr"><h4 class="table__heading">Function</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">reset()</span></div><p>When this function is called upon form element. all the form elements (sm- form components only) will be reset to default state.</p></div></section><h2>Nested element behaviour</h2><p></p></section><section id="hamburger_menu_page" class="page hide-completely"><h1 class="page__title">Hamburger menu</h1><hamburger-menu></hamburger-menu></section><section id="input_page" class="page hide-completely"><h1 class="page__title">Input</h1><h2>Interactive demo</h2><sm-input id="my_input" placeholder="Email" type="email" value="john@doe" animate></sm-input><pre>
 <code>
 &lt;sm-input id="my_input" placeholder="Email" type="email" value="john@doe" animate&gt;&lt;/sm-input&gt;
 </code>
@@ -40,7 +52,7 @@
 <code>
 &lt;sm-input placeholder="Name" variant="outlined" animate&gt;&lt;/sm-input&gt;
 </code>
-</pre><h2>Custom Attributes</h2><p>All the native HTML input attributes are valid. These are additional attributes which can be used to add more functionality</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">animate</span> (boolean)</div><p>If present, placeholder of input will be animated to occupy space above enterned text instead of vanishing.</p></div><div class="tr"><div><span class="highlight">error-text</span> (string)</div><p>Message specified as value of this attribute will be shown if validation fails.</p></div></section><h2>Supported functions</h2><section class="table"><div class="tr"><h4 class="table__heading">Function</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">focusIn()</span></div><p>To give focus to this component use this function instead of <span class="highlight">focus()</span></p></div><div class="tr"><div><span class="highlight">reset()</span></div><p>When this function is called value will be set to empty string.</p></div></section><h2>Custom Setters</h2><section class="table"><div class="tr"><h4 class="table__heading">Function</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">customValidation</span></div><p>If you want to perform custom validation on input value, set the desired validation function.</p></div></section><pre>
+</pre><h2>Custom Attributes</h2><p>All the native HTML input attributes are valid. These are additional attributes which can be used to add more functionality</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">animate</span> (boolean)</div><p>If present, placeholder of input will be animated to occupy space above enterned text instead of vanishing.</p></div><div class="tr"><div><span class="highlight">error-text</span> (string)</div><p>Message specified as value of this attribute will be shown if validation fails.</p></div></section><h2>Supported functions</h2><section class="table"><div class="tr"><h4 class="table__heading">Function</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">focusIn()</span></div><p>To give focus to this component use this function instead of <span class="highlight">focus()</span></p></div><div class="tr"><div><span class="highlight">reset()</span></div><p>When this function is called value will be set to empty string.</p></div></section><h2>Custom Setters</h2><section class="table"><div class="tr"><h4 class="table__heading">Function</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">customValidation</span></div><p>If you want to perform custom validation on input value, set the desired validation function.</p></div><div class="tr"><div><span class="highlight">disabled</span></div><p>Set disabled state to <span class="highlight">true</span> or <span class="highlight">false</span></p></div><div class="tr"><div><span class="highlight">value</span></div><p>Sets the value of input with JS</p></div></section><pre>
 <code>
 &lt;script&gt;
     /* Setting custom validation function */
@@ -68,16 +80,35 @@
     notificationDrawer.push('This is a notification', { pinned: true })
 &lt;/script&gt;
 </code>
-</pre></section><section id="popup_page" class="page hide-completely"><h1 class="page__title">Popup / dialog</h1><p>Popups are used to show addition UI elements that you may want to hide at first and reveal them when needed.</p><sm-popup id="popup"><sm-form><sm-input placeholder="hjdfijkgbn"></sm-input></sm-form></sm-popup><sm-button variant="primary" onclick="getRef('popup').show()">show popup</sm-button></section><section id="radio_page" class="page hide-completely"><h1 class="page__title">Radio button</h1><p>Radio buttons are useful whenever only one option needs to be selected from mutiple options. this functionality can be achieved by assigning same name to the group of radio buttons.<br><span class="highlight">sm-radio</span> supports all the attributes of native HTML5 radio.</p><strong>linking some HTML element with <span class="highlght">sm-radio</span> using <span class="highlight">label</span> tag won't work.<br>Add the element inside the opening and closing sm-radio tag.</strong><h2>Interactive demo</h2><div class="grid gap-0-5"><sm-radio name="abc" value="on" checked><div class="flex">&nbsp;&nbsp;On</div></sm-radio><sm-radio name="abc" value="off"><div class="flex">&nbsp;&nbsp;Off</div></sm-radio><sm-radio name="abc" value="🤷"><div class="flex">&nbsp;&nbsp;🤷</div></sm-radio></div><pre>
+</pre></section><section id="popup_page" class="page hide-completely"><h1 class="page__title">Popup / dialog</h1><p>Popups are used to show addition UI elements that you may want to hide at first and reveal them when needed.</p><h2>Interactive demo</h2><sm-popup id="my_popup"><h2>Title</h2><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore tenetur natus, pariatur beatae veritatis debitis repellat laudantium corporis velit adipisci!</p></sm-popup><sm-button onclick="getRef('my_popup').show()">show popup</sm-button><pre>
+<code>
+&lt;sm-popup id="my_popup"&gt;
+&lt;!--Popup content --&gt;
+&lt;/sm-popup&gt;      
+</code>
+</pre><h2>Usage</h2><pre>
+<code>
+&lt;sm-popup id="my_popup"&gt;
+    &lt;!--Popup content --&gt;
+&lt;/sm-popup&gt;
+&lt;sm-button id="show_popup_button"&gt;Show popup&lt;/sm-button&gt;
+&lt;script&gt;
+    const myPopup = document.getElementById('my_popup')
+    document.getElementById('show_popup_button').addEventListener('click', e =&gt; {
+        myPopup.show({options});
+    })
+&lt;/script&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">open</span> (boolean)</div><p>If present, popup will be in opened state by default. useful for development purpose.</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">--backdrop-background</span></div><p>Defines background property of popup backdrop. Any valid CSS background value is supported.</p></div><div class="tr"><div><span class="highlight">--border-radius</span></div><p>Defines border-radius of popup dialog box.</p></div><div class="tr"><div><span class="highlight">--body-padding</span></div><p>Defines padding of popup dialog box.</p></div><div class="tr"><div><span class="highlight">--height</span></div><p>Defines height of popup dialog box.</p></div><div class="tr"><div><span class="highlight">--min-height</span></div><p>Defines min-height of popup dialog box.</p></div><div class="tr"><div><span class="highlight">--width</span></div><p>Defines width of popup dialog box.</p></div><div class="tr"><div><span class="highlight">--min-width</span></div><p>Defines min-width of popup dialog box.</p></div></section><h2>Supported functions</h2><section class="table"><div class="tr"><h4 class="table__heading">Function</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">show()</span></div><p>Displays the hidden popup, when called upon specified popup.</p></div><div class="tr"><div><span class="highlight">hide()</span></div><p>Hides the visible popup, when called upon specified popup</p></div></section><h4>Show() options</h4><section class="table"><div class="tr"><h4 class="table__heading">Property</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">pinned</span> ( Boolean )</div><p>If set <span class="highlight">true</span>, opened popup won't be closed when clicked outside the popup area.</p></div></section><h2>Custom events</h2><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">popupopned</span></div><p>Fired when a popup is opened, to access which popup fired the event you can use <span class="highlight">event.detail.popup</span> within event listener</p></div><div class="tr"><div><span class="highlight">popupclosed</span></div><p>Fired when a popup is closed, to access which popup fired the event you can use <span class="highlight">event.detail.popup</span> within event listener</p></div></section></section><section id="radio_page" class="page hide-completely"><h1 class="page__title">Radio button</h1><p>Radio buttons are useful whenever only one option needs to be selected from mutiple options. this functionality can be achieved by assigning same name to the group of radio buttons.<br><span class="highlight">sm-radio</span> supports all the attributes of native HTML5 radio.</p><strong>linking some HTML element with <span class="highlght">sm-radio</span> using <span class="highlight">label</span> tag won't work.<br>Add the element inside the opening and closing sm-radio tag.</strong><h2>Interactive demo</h2><div class="grid gap-0-5"><sm-radio name="abc" value="on" checked><div>&nbsp;&nbsp;On</div></sm-radio><sm-radio name="abc" value="off"><div>&nbsp;&nbsp;Off</div></sm-radio><sm-radio name="abc" value="🤷"><div>&nbsp;&nbsp;🤷</div></sm-radio></div><pre>
 <code>
 &lt;sm-radio name="abc" value="on" checked&gt;
-    &lt;div class="flex"&gt;&nbsp;&nbsp;On&lt;/div&gt;
+    &lt;div&gt;&nbsp;&nbsp;On&lt;/div&gt;
 &lt;/sm-radio&gt;
 &lt;sm-radio name="abc" value="off"&gt;
-    &lt;div class="flex"&gt;&nbsp;&nbsp;Off&lt;/div&gt;
+    &lt;div&gt;&nbsp;&nbsp;Off&lt;/div&gt;
 &lt;/sm-radio&gt;
 &lt;sm-radio name="abc" value="🤷"&gt;
-    &lt;div class="flex"&gt;&nbsp;&nbsp;🤷&lt;/div&gt;
+    &lt;div&gt;&nbsp;&nbsp;🤷&lt;/div&gt;
 &lt;/sm-radio&gt;          
 </code>
 </pre><h2>States</h2><h4>Checked</h4><p>To make switch turned on by default add <span class="highlight">checked</span> attribute.</p><sm-radio checked><div style="margin-left:.5rem">Checked radio button</div></sm-radio><pre>
@@ -108,7 +139,7 @@
     &lt;sm-option value="3"&gt;option3&lt;/sm-option&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><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.detail.value</span></p></div></section><h2>Usage</h2><pre>
 <code>
 &lt;sm-select id="my_select"&gt;
     &lt;sm-option value="1"&gt;option1&lt;/sm-option&gt;
@@ -146,7 +177,96 @@
 <code>
 &lt;sm-spinner&gt;&lt;/sm-spinner&gt;
 </code>
-</pre></section><section id="strip_select_page" class="page hide-completely"><h1 class="page__title">Strip select</h1><p>To start using SM Components</p><strip-select id="browse_category_selector" multiline><strip-option value="movie" selected>Movie</strip-option><strip-option value="tv series">TV series</strip-option><strip-option value="video">Video</strip-option><strip-option value="music">Music</strip-option></strip-select></section><section id="tabs_page" class="page hide-completely"><h1 class="page__title">Tabs</h1><p>To start using SM Components</p><sm-tab-header variant="tab" target="tab1"><sm-tab>Audio</sm-tab><sm-tab>Video</sm-tab></sm-tab-header><sm-tab-panels id="tab1"><sm-panel>gjdhnsrfijbgn<br>bdfjnbj</sm-panel><sm-panel>jadifjoaijdiajdo dosfighjoi<br>flkmgklfmzkl<br>hbdsfhb</sm-panel></sm-tab-panels></section><section id="tags_input_page" class="page hide-completely"><h1 class="page__title">Tags input</h1><p>To start using SM Components</p><tags-input placeholder="Add tags..."></tags-input></section><section id="textarea_page" class="page hide-completely"><h1 class="page__title">Textarea</h1><p>To start using SM Components</p><sm-textarea placeholder="Add some text here..." rows="4"></sm-textarea></section><section id="text_field_page" class="page hide-completely"><h1 class="page__title">Text field</h1><p>To start using SM Components</p><text-field value="Double click me!"></text-field></section><section id="theme_toggle_page" class="page hide-completely"><h1 class="page__title">Theme toggle</h1><p>Use <span class="highlight">theme-toggle</span> to create light/dark theme easily with CSS variables.</p><p>When this is toggled by user the component changes the custom data attribute <span class="highlight">data-theme=""</span> on HTML body tag to either <span class="highlight">light</span> or <span class="highlight">dark</span></p><p>By default theme is set to OS level preferred-color-scheme ( supported by Android, iOS, Windows and MacOS ).</p><h2>Interactive demo</h2><theme-toggle></theme-toggle><h2>HTML</h2><pre>
+</pre></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>
+<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; 
+</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>
+<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;script&gt;
+    const sortBy = document.getElementById('sort_by')
+    sortBy.addEventListener('change', event =&gt; {
+        console.log(event.detail.value) // logs out value of selected option
+    })
+&lt;/script&gt;
+</code>
+</pre></section><section id="tabs_page" class="page hide-completely"><h1 class="page__title">Tabs</h1><p>This component can be used sub-page navigation.</p><h2>Usage</h2><pre>
+<code>
+&lt;sm-tab-header target="tab1"&gt;
+    &lt;sm-tab&gt;
+        tab name
+    &lt;/sm-tab&gt;
+    &lt;sm-tab&gt;
+        tab name
+    &lt;/sm-tab&gt;
+&lt;/sm-tab-header&gt;
+&lt;sm-tab-panels id="tab1"&gt;
+    &lt;section&gt;
+        &lt;!-- Panel content --&gt;
+    &lt;/section&gt;
+    &lt;section&gt;
+        &lt;!-- Panel content --&gt;
+    &lt;/section&gt;
+&lt;/sm-tab-panels&gt;
+</code>
+</pre><p>There are three components that together make the tabs components.</p><ol><li>sm-tab-header</li><li>sm-tab</li><li>sm-tab-panels</li></ol><p></p><h3>sm-tab-header</h3><p>This is the first half of tabs that include the tabs header and actual tab buttons.</p><pre>
+<code>
+&lt;sm-tab-header variant="tab" target="tab2"&gt;
+    &lt;sm-tab&gt;Audio&lt;/sm-tab&gt;
+    &lt;sm-tab&gt;Video&lt;/sm-tab&gt;
+&lt;/sm-tab-header&gt;
+</code>
+</pre><h2>Supported 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">variant</span> ( string )</div><p>Specifies variant of sm-tab-header. Only value can be <span class="highlight">tab</span></p></div><div class="tr"><div><span class="highlight">target</span> ( string )</div><p>Pass in the ID of respective sm-tab-panels to link them. This is how sm-tab-header communicates with sm-tab-panel on which tab or panel should be displayed.</p></div></section><h2>Interactive demo</h2><sm-tab-header target="tab1"><sm-tab>Audio</sm-tab><sm-tab>Video</sm-tab></sm-tab-header><sm-tab-panels id="tab1"><section><h3>Audio</h3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae repellat qui. Expedita fugiat voluptates beatae itaque corporis!</p></section><section><h3>Video</h3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae repellat qui. Expedita fugiat voluptates beatae itaque corporis!</p></section></sm-tab-panels><h2>Variants</h2><p><span class="highlight">tab</span> is the only other variant than default style.</p><sm-tab-header variant="tab" target="tab2"><sm-tab>Audio</sm-tab><sm-tab>Video</sm-tab></sm-tab-header><sm-tab-panels id="tab2"><section><h3>Audio</h3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae repellat qui. Expedita fugiat voluptates beatae itaque corporis!</p></section><section><h3>Video</h3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem esse quod quae repellat qui. Expedita fugiat voluptates beatae itaque corporis!</p></section></sm-tab-panels><pre>
+<code>
+&lt;sm-tab-header variant="tab" target="tab2"&gt;
+    &lt;sm-tab&gt;Audio&lt;/sm-tab&gt;
+    &lt;sm-tab&gt;Video&lt;/sm-tab&gt;
+&lt;/sm-tab-header&gt;
+</code>
+</pre></section><section id="tags_input_page" class="page hide-completely"><h1 class="page__title">Tags input</h1><p>This component has a very specific use case and that is for accepting tags. Each time user presses enter or space, a new tag is created. Only unique values are allowed.</p><h2>Interactive demo</h2><tags-input placeholder="Add tags..."></tags-input><pre>
+<code>
+&lt;tags-input placeholder="Add tags..."&gt;&lt;/tags-input&gt;      
+</code>
+</pre><h2>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">placeholder</span> ( string )</div><p>Define some string to let user know which kind of input is required.</p></div><div class="tr"><div><span class="highlight">limit</span> ( number )</div><p>Set a limit of tags that will be accepted atmost</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">--background</span></div><p>Defines background of tags-input. Any valid CSS background property values are supported.</p></div><div class="tr"><div><span class="highlight">--border-radius</span></div><p>Defines border-radius of tags-input</p></div></section><h2>Supported functions</h2><section class="table"><div class="tr"><h4 class="table__heading">Function</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">focusIn()</span></div><p>To give focus to this component use this function instead of <span class="highlight">focus()</span></p></div><div class="tr"><div><span class="highlight">reset()</span></div><p>When this function is called value will be set to empty string.</p></div></section><h2>Usage</h2><pre>
+<code>
+&lt;tags-input id="get_tags" placeholder="Add tags..."&gt;&lt;/tags-input&gt;
+&lt;script&gt;
+    const getTags = document.getElementById('get_tags')
+    console.log(getTags.value); /* returns an array of string that are user input */ 
+&lt;/script&gt;      
+</code>
+</pre></section><section id="textarea_page" class="page hide-completely"><h1 class="page__title">Textarea</h1><p>Textarea is suitable component where multiline input is required. you can either specify the number of lines textarea should expand or let the textarea expand according to user input until a max-height is reached.</p><h2>Interactive demo</h2><sm-textarea id="my_textarea" placeholder="Add some text here..." rows="2"></sm-textarea><pre>
+<code>
+&lt;sm-textarea id="my_textarea" placeholder="Add some text here..." rows="4"&gt;&lt;/sm-textarea&gt;
+</code>
+</pre><h2>Variants</h2><p><span class="highlight">outlined</span> is only one styled variation. Default is filled which doesn't require variant specified.</p><sm-textarea placeholder="This is a textarea" variant="outlined"></sm-textarea><pre>
+<code>
+&lt;sm-textarea placeholder="This is a textarea" variant="outlined"&gt;&lt;/sm-textarea&gt;
+</code>
+</pre><h2>Supported Attributes</h2><p>All the native HTML textarea 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">disabled</span> (boolean)</div><p>If present, all the interactions will be blocked.</p></div><div class="tr"><div><span class="highlight">rows</span> (number)</div><p>Sets the number of rows textarea will be expanded by default. Default is "1".</p></div><div class="tr"><div><span class="highlight">value</span> (string)</div><p>Sets the default value of textarea.</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">--background</span></div><p>Defines background textarea. Any valid CSS background property values are supported.</p></div><div class="tr"><div><span class="highlight">--border-radius</span></div><p>Defines border-radius of textarea</p></div><div class="tr"><div><span class="highlight">--max-height</span></div><p>Defines max-height to which textarea is allowed to expand. Default is "8rem"</p></div></section><h2>Supported functions</h2><section class="table"><div class="tr"><h4 class="table__heading">Function</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">focusIn()</span></div><p>To give focus to this component use this function instead of <span class="highlight">focus()</span></p></div><div class="tr"><div><span class="highlight">reset()</span></div><p>When this function is called value will be set to empty string.</p></div></section><h2>Setters</h2><section class="table"><div class="tr"><h4 class="table__heading">Function</h4><h4 class="table__heading">Description</h4></div><div class="tr"><div><span class="highlight">disabled</span></div><p>Set disabled state to <span class="highlight">true</span> or <span class="highlight">false</span></p></div><div class="tr"><div><span class="highlight">value</span></div><p>Sets the value of textarea with JS</p></div></section><h2>Usage</h2><pre>
+<code>
+&lt;sm-textarea placeholder="This is a textarea" id="my_textarea"&gt;&lt;/sm-textarea&gt;
+&lt;script&gt;
+    const myTextarea = document.getElelementById('my_textarea')
+    myTextarea.value = 'some string'; /* setting value of textarea */
+    
+    myTextarea.addEventListener('input', event => {
+        const value = event.target.value; /* accessing value of textarea */
+    })
+&lt;/script&gt;
+</code>
+</pre></section><section id="text_field_page" class="page hide-completely"><h1 class="page__title">Text field</h1><p>To start using SM Components</p><text-field value="Double click me!"></text-field></section><section id="theme_toggle_page" class="page hide-completely"><h1 class="page__title">Theme toggle</h1><p>Use <span class="highlight">theme-toggle</span> to create light/dark theme easily with CSS variables.</p><p>When this is toggled by user the component changes the custom data attribute <span class="highlight">data-theme=""</span> on HTML body tag to either <span class="highlight">light</span> or <span class="highlight">dark</span></p><p>By default theme is set to OS level preferred-color-scheme ( supported by Android, iOS, Windows and MacOS ).</p><h2>Interactive demo</h2><theme-toggle></theme-toggle><h2>HTML</h2><pre>
 <code>
 &lt;theme-toggle&gt;&lt;/theme-toggle&gt;  
 </code>
@@ -290,7 +410,7 @@
         async function showPopup(popup, pinned) {
             zIndex++
             getRef(popup).setAttribute('style', `z-index: ${zIndex}`)
-            popupStack = getRef(popup).show(pinned, popupStack)
+            popupStack = getRef(popup).show({ pinned, popupStack })
             return getRef(popup);
         }