diff --git a/components/css/main.css b/components/css/main.css
index 2f23c56..dc76604 100644
--- a/components/css/main.css
+++ b/components/css/main.css
@@ -577,7 +577,7 @@ strong.important {
   object-fit: cover;
   object-position: top;
   height: 30rem;
-  width: min(16rem, 100%);
+  width: 16rem;
   border-radius: 1rem;
   justify-self: center;
   box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0, 0, 0, 0.3), 0 0 0 0.3rem black;
diff --git a/components/css/main.min.css b/components/css/main.min.css
index 9dcfbbb..a16bf9d 100644
--- a/components/css/main.min.css
+++ b/components/css/main.min.css
@@ -1 +1 @@
-p,strong{max-width:65ch}p,pre{line-height:1.7}.screenshot,img{object-fit:cover}.highlight,button{display:inline-flex}.list,ul{list-style:none}.hide,.ripple{pointer-events:none}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color),1);background:rgba(var(--background-color),1)}body,body *{--accent-color:#0D7377;--text-color:17,17,17;--background-color:255,255,255;--danger-color:red}body[data-theme=dark],body[data-theme=dark] *{--accent-color:#32E0C4;--text-color:240,240,240;--text-color-light:170,170,170;--background-color:10,10,10;--danger-color:rgb(255, 106, 106)}p{font-size:.8;margin-bottom:1.5rem;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1rem}a{color:inherit;text-decoration:none}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}button{border:none;background-color:inherit}.table,.tr{display:grid}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}.table{gap:.5rem;margin:1rem 0;position:relative;text-align:left;overflow-x:auto;border-radius:.3rem;border-collapse:separate;border-spacing:1rem 1.5rem;background-color:rgba(var(--text-color),.04)}.table p:only-of-type{margin-bottom:0}.tr{gap:1rem;padding:1rem;grid-template-columns:11rem 1fr;width:100%}.tr:nth-of-type(odd){background-color:rgba(var(--text-color),.04)}.tr p{min-width:30ch}.hide{opacity:0}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize,h2{text-transform:capitalize}.flex{display:flex}.grid,main{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.auto-grid-2,.text-center{text-align:center}.align-start{align-items:flex-start}.align-center{align-items:center}.justify-start{justify-content:start}.auto-grid-2,.justify-center{justify-content:center}.justify-right{margin-left:auto}.button__icon--right,.comp-checkbox__title{margin-left:.5rem}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column,.list{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.color-0-8{color:rgba(var(--text-color),.8)}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#50CB93}.token.punctuation,.token.tag{color:#29B6F6}.token.attr-name,.token.deleted,.token.namespace{color:#1DE9B6}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#FF6767}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#84FFFF}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}code,code *{color:rgba(255,255,255,.9)}pre{max-width:100%;margin:1rem 0;padding:0 1.5rem;overflow-x:auto;font-size:.9rem;font-weight:500;white-space:pre;border-radius:.5rem;background:rgba(0,0,0,.9)}code{border-radius:.3rem;font-weight:400;padding:.2rem .4rem;background:rgba(var(--text-color),.1)}code *{font-family:"Roboto Mono",monospace}pre code{line-height:1.4;border-radius:none;background:0 0;width:100%}h1,h2,h3,h4.h5{font-family:Poppins,sans-serif}h2{margin:3rem 0 1rem}main{height:100%}.card,.list,.list__item,.page,strong.important{display:flex}#main_header{padding:.5rem 1.5rem;border-bottom:1px solid rgba(var(--text-color),.1)}#side_nav_button{padding:.5rem;margin-left:-.5rem}#side_nav>:last-child{padding-bottom:3rem}#side_nav h4{font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;padding:1.5rem}.right{max-height:100%;overflow-y:auto;padding:1.5rem}.right h1{margin-bottom:1.5rem}.list{margin-bottom:.8rem}ol,sm-tab-header{margin-bottom:1.5rem}ol li,sm-carousel{margin-bottom:1rem}.list__item{padding:.8rem 1.5rem;text-transform:capitalize}.list__item--active{color:var(--accent-color);background:rgba(var(--text-color),.06)}.card{flex-direction:column;margin-right:1rem;border-radius:.4rem;padding:1.5rem;min-width:min(24rem,80%);background-color:rgba(var(--text-color),.06)}.page{flex-direction:column;padding-bottom:3rem}ol{padding:.6rem 1rem;max-width:75ch}ol li:last-of-type{margin-bottom:0}strong.important{padding:.5rem;margin:.5rem 0;border-radius:.3rem;color:rgba(0,0,0,.8);background-color:khaki}.highlight{font-family:"Roboto Mono",monospace;background-color:rgba(var(--text-color),.1);border-radius:.2rem;padding:.1rem .5rem;font-size:.9rem;line-height:1.6}#total_components_count{font-size:4rem}#components_selection_list{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));padding:1.5rem 0 3rem}.auto-grid-2{justify-items:center;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr))}.screenshot{object-position:top;height:30rem;width:min(16rem,100%);border-radius:1rem;justify-self:center;box-shadow:0 .5rem 1.5rem -.5rem rgba(0,0,0,.3),0 0 0 .3rem #000}@media screen and (max-width:640px){main{grid-template-rows:auto 1fr;grid-template-columns:1fr}}@media screen and (min-width:640px){sm-popup{--width:32rem}#main_header{padding:1rem 1.5rem;grid-area:main-header}#side_nav_button{display:none}main{grid-template-columns:14rem minmax(0,1fr);grid-template-areas:"main-header main-header" ". ."}.right{display:grid;grid-template-columns:1fr 90% 1fr}.right>*{grid-column:2/3}.page__title{font-size:2.5rem}#overview_page{display:grid;gap:1.5rem;grid-template-columns:1fr auto}#overview_page>div:first-of-type{grid-column:2/3;text-align:right}#overview_page>div:nth-of-type(2){grid-row:1/2}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.list__item:hover{background:rgba(var(--text-color),.1);cursor:pointer}}
\ No newline at end of file
+p,strong{max-width:65ch}p,pre{line-height:1.7}.screenshot,img{object-fit:cover}.highlight,button{display:inline-flex}.list,ul{list-style:none}.hide,.ripple{pointer-events:none}*{padding:0;margin:0;box-sizing:border-box;font-family:Roboto,sans-serif}:root{font-size:clamp(1rem,1.2vmax,3rem)}body,html{height:100%;scroll-behavior:smooth}body{color:rgba(var(--text-color),1);background:rgba(var(--background-color),1)}body,body *{--accent-color:#0D7377;--text-color:17,17,17;--background-color:255,255,255;--danger-color:red}body[data-theme=dark],body[data-theme=dark] *{--accent-color:#32E0C4;--text-color:240,240,240;--text-color-light:170,170,170;--background-color:10,10,10;--danger-color:rgb(255, 106, 106)}p{font-size:.8;margin-bottom:1.5rem;color:rgba(var(--text-color),.8)}p:not(:last-of-type){margin-bottom:1rem}a{color:inherit;text-decoration:none}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color),1) inset}button{border:none;background-color:inherit}.table,.tr{display:grid}a:any-link:focus-visible{outline:solid rgba(var(--text-color),1)}sm-button{--border-radius:0.3rem}.table{gap:.5rem;margin:1rem 0;position:relative;text-align:left;overflow-x:auto;border-radius:.3rem;border-collapse:separate;border-spacing:1rem 1.5rem;background-color:rgba(var(--text-color),.04)}.table p:only-of-type{margin-bottom:0}.tr{gap:1rem;padding:1rem;grid-template-columns:11rem 1fr;width:100%}.tr:nth-of-type(odd){background-color:rgba(var(--text-color),.04)}.tr p{min-width:30ch}.hide{opacity:0}.hide-completely{display:none!important}.no-transformations{transform:none!important}.overflow-ellipsis{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.breakable{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.full-bleed{grid-column:1/4}.h1{font-size:2.5rem}.h2{font-size:2rem}.h3{font-size:1.4rem}.h4{font-size:1rem}.h5{font-size:.8rem}.uppercase{text-transform:uppercase}.capitalize,h2{text-transform:capitalize}.flex{display:flex}.grid,main{display:grid}.grid-3{grid-template-columns:1fr auto auto}.flow-column{grid-auto-flow:column}.gap-0-5{gap:.5rem}.gap-1{gap:1rem}.gap-1-5{gap:1.5rem}.gap-2{gap:2rem}.gap-3{gap:3rem}.text-align-right{text-align:right}.auto-grid-2,.text-center{text-align:center}.align-start{align-items:flex-start}.align-center{align-items:center}.justify-start{justify-content:start}.auto-grid-2,.justify-center{justify-content:center}.justify-right{margin-left:auto}.button__icon--right,.comp-checkbox__title{margin-left:.5rem}.align-self-center{align-self:center}.justify-self-center{justify-self:center}.justify-self-start{justify-self:start}.justify-self-end{justify-self:end}.direction-column,.list{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.color-0-8{color:rgba(var(--text-color),.8)}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(var(--text-color),.16)}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}.observe-empty-state:empty{display:none}.observe-empty-state:not(:empty)~.empty-state{display:none}.icon{width:1.5rem;height:1.5rem;fill:rgba(var(--text-color),.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#50CB93}.token.punctuation,.token.tag{color:#29B6F6}.token.attr-name,.token.deleted,.token.namespace{color:#1DE9B6}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#FF6767}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#84FFFF}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}code,code *{color:rgba(255,255,255,.9)}pre{max-width:100%;margin:1rem 0;padding:0 1.5rem;overflow-x:auto;font-size:.9rem;font-weight:500;white-space:pre;border-radius:.5rem;background:rgba(0,0,0,.9)}code{border-radius:.3rem;font-weight:400;padding:.2rem .4rem;background:rgba(var(--text-color),.1)}code *{font-family:"Roboto Mono",monospace}pre code{line-height:1.4;border-radius:none;background:0 0;width:100%}h1,h2,h3,h4.h5{font-family:Poppins,sans-serif}h2{margin:3rem 0 1rem}main{height:100%}.card,.list,.list__item,.page,strong.important{display:flex}#main_header{padding:.5rem 1.5rem;border-bottom:1px solid rgba(var(--text-color),.1)}#side_nav_button{padding:.5rem;margin-left:-.5rem}#side_nav>:last-child{padding-bottom:3rem}#side_nav h4{font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;padding:1.5rem}.right{max-height:100%;overflow-y:auto;padding:1.5rem}.right h1{margin-bottom:1.5rem}.list{margin-bottom:.8rem}ol,sm-tab-header{margin-bottom:1.5rem}ol li,sm-carousel{margin-bottom:1rem}.list__item{padding:.8rem 1.5rem;text-transform:capitalize}.list__item--active{color:var(--accent-color);background:rgba(var(--text-color),.06)}.card{flex-direction:column;margin-right:1rem;border-radius:.4rem;padding:1.5rem;min-width:min(24rem,80%);background-color:rgba(var(--text-color),.06)}.page{flex-direction:column;padding-bottom:3rem}ol{padding:.6rem 1rem;max-width:75ch}ol li:last-of-type{margin-bottom:0}strong.important{padding:.5rem;margin:.5rem 0;border-radius:.3rem;color:rgba(0,0,0,.8);background-color:khaki}.highlight{font-family:"Roboto Mono",monospace;background-color:rgba(var(--text-color),.1);border-radius:.2rem;padding:.1rem .5rem;font-size:.9rem;line-height:1.6}#total_components_count{font-size:4rem}#components_selection_list{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));padding:1.5rem 0 3rem}.auto-grid-2{justify-items:center;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr))}.screenshot{object-position:top;height:30rem;width:16rem;border-radius:1rem;justify-self:center;box-shadow:0 .5rem 1.5rem -.5rem rgba(0,0,0,.3),0 0 0 .3rem #000}@media screen and (max-width:640px){main{grid-template-rows:auto 1fr;grid-template-columns:1fr}}@media screen and (min-width:640px){sm-popup{--width:32rem}#main_header{padding:1rem 1.5rem;grid-area:main-header}#side_nav_button{display:none}main{grid-template-columns:14rem minmax(0,1fr);grid-template-areas:"main-header main-header" ". ."}.right{display:grid;grid-template-columns:1fr 90% 1fr}.right>*{grid-column:2/3}.page__title{font-size:2.5rem}#overview_page{display:grid;gap:1.5rem;grid-template-columns:1fr auto}#overview_page>div:first-of-type{grid-column:2/3;text-align:right}#overview_page>div:nth-of-type(2){grid-row:1/2}}@media (any-hover:hover){::-webkit-scrollbar{width:.5rem;height:.5rem}::-webkit-scrollbar-thumb{background:rgba(var(--text-color),.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color),.5)}.list__item:hover{background:rgba(var(--text-color),.1);cursor:pointer}}
\ No newline at end of file
diff --git a/components/css/main.scss b/components/css/main.scss
index a538a5f..1e3a9d0 100644
--- a/components/css/main.scss
+++ b/components/css/main.scss
@@ -500,7 +500,7 @@ strong.important{
     object-fit: cover;
     object-position: top;
     height: 30rem;
-    width: min(16rem, 100%);
+    width: 16rem;
     border-radius: 1rem;
     justify-self: center;
     box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0,0,0, 0.3),
diff --git a/components/index.html b/components/index.html
index 8e758a3..33c6a33 100644
--- a/components/index.html
+++ b/components/index.html
@@ -628,11 +628,11 @@
                 <h1 class="page__title">Hamburger menu</h1>
                 <section class="grid auto-grid-2 gap-3">
                     <div class="grid gap-1">
-                        <img class="screenshot" src="assets/ham-menu-closed.png" alt="Hamburger menu closed">
+                        <img class="screenshot" loading="lazy" src="assets/ham-menu-closed.png" alt="Hamburger menu closed">
                         <h4>Hamburger menu closed</h4>
                     </div>
                     <div class="grid gap-1">
-                        <img class="screenshot" src="assets/ham-menu-open.png" alt="Hamburger menu opened">
+                        <img class="screenshot" loading="lazy" src="assets/ham-menu-open.png" alt="Hamburger menu opened">
                         <h4>Hamburger menu open</h4>
                     </div>
                 </section>
diff --git a/components/index.min.html b/components/index.min.html
index 42ef3b4..8cc5467 100644
--- a/components/index.min.html
+++ b/components/index.min.html
@@ -46,7 +46,7 @@
 <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 components only) will be reset to default state.</p></div></section><h2>Nested element behaviour</h2><section class="table"><div class="tr"><h4 class="table__heading">Element</h4><h4 class="table__heading">behaviour</h4></div><div class="tr"><div>sm-button <span class="highlight">variant="primary"</span> or <span class="highlight">type="submit"</span></div><p>Whenever enter is pressed inside an active <span class="highlight">sm-input</span>, this will fire click event.<br>This will also change state depending opon validation conditions.</p></div><div class="tr"><div>sm-button <span class="highlight">type="reset"</span></div><p>When clicked, the whole form will reset.</p></div></section></section><section id="hamburger_menu_page" class="page hide-completely"><h1 class="page__title">Hamburger menu</h1><section class="grid auto-grid-2 gap-3"><div class="grid gap-1"><img class="screenshot" src="assets/ham-menu-closed.png" alt="Hamburger menu closed"><h4>Hamburger menu closed</h4></div><div class="grid gap-1"><img class="screenshot" src="assets/ham-menu-open.png" alt="Hamburger menu opened"><h4>Hamburger menu open</h4></div></section><h2>Usage</h2><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><section class="table"><div class="tr"><h4 class="table__heading">Element</h4><h4 class="table__heading">behaviour</h4></div><div class="tr"><div>sm-button <span class="highlight">variant="primary"</span> or <span class="highlight">type="submit"</span></div><p>Whenever enter is pressed inside an active <span class="highlight">sm-input</span>, this will fire click event.<br>This will also change state depending opon validation conditions.</p></div><div class="tr"><div>sm-button <span class="highlight">type="reset"</span></div><p>When clicked, the whole form will reset.</p></div></section></section><section id="hamburger_menu_page" class="page hide-completely"><h1 class="page__title">Hamburger menu</h1><section class="grid auto-grid-2 gap-3"><div class="grid gap-1"><img class="screenshot" loading="lazy" src="assets/ham-menu-closed.png" alt="Hamburger menu closed"><h4>Hamburger menu closed</h4></div><div class="grid gap-1"><img class="screenshot" loading="lazy" src="assets/ham-menu-open.png" alt="Hamburger menu opened"><h4>Hamburger menu open</h4></div></section><h2>Usage</h2><pre>
 <code>
 &lt;hamburger-menu id="navigation_drawer"&gt;
     <!-- Navigation links -->