From c475ce20d76031847ddbd1c356d8d19e02df2537 Mon Sep 17 00:00:00 2001
From: sairaj mote <sairajmote3@gmail.com>
Date: Sat, 13 Jan 2024 02:25:55 +0530
Subject: [PATCH] code refactoring

---
 components/css/main.css                   | 108 ----
 components/css/main.min.css               |   2 +-
 components/css/main.scss                  | 222 ++++---
 components/dist/syntax-highlighter.js     |  30 +-
 components/dist/syntax-highlighter.min.js |   2 +-
 components/index.html                     | 741 ++++++++++------------
 components/index.min.html                 |   1 +
 7 files changed, 479 insertions(+), 627 deletions(-)
 create mode 100644 components/index.min.html

diff --git a/components/css/main.css b/components/css/main.css
index 670b75c..2d0cbd1 100644
--- a/components/css/main.css
+++ b/components/css/main.css
@@ -331,114 +331,6 @@ ul {
   margin-left: 0.5rem;
 }
 
-.token.comment,
-.token.block-comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: #50cb93;
-}
-
-.token.punctuation,
-.token.tag {
-  color: #29b6f6;
-}
-
-.token.attr-name,
-.token.namespace,
-.token.deleted {
-  color: #1de9b6;
-}
-
-.token.function-name {
-  color: #6196cc;
-}
-
-.token.boolean,
-.token.number,
-.token.function {
-  color: #f08d49;
-}
-
-.token.property,
-.token.class-name,
-.token.constant,
-.token.symbol {
-  color: #f8c555;
-}
-
-.token.selector,
-.token.important,
-.token.atrule,
-.token.keyword,
-.token.builtin {
-  color: #ff6767;
-}
-
-.token.string,
-.token.char,
-.token.attr-value,
-.token.regex,
-.token.variable {
-  color: #84ffff;
-}
-
-.token.operator,
-.token.entity,
-.token.url {
-  color: #67cdcc;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}
-
-.token.inserted {
-  color: green;
-}
-
-pre {
-  max-width: 100%;
-  margin: 1rem 0;
-  padding: 0 1.5rem;
-  overflow-x: auto;
-  font-size: 0.9rem;
-  font-weight: 500;
-  white-space: pre;
-  border-radius: 0.5rem;
-  background: rgba(0, 0, 0, 0.9);
-  line-height: 1.7;
-}
-
-code {
-  border-radius: 0.3rem;
-  font-weight: 400;
-  padding: 0.2rem 0.4rem;
-  background: rgba(var(--text-color), 0.1);
-  color: rgba(255, 255, 255, 0.9);
-}
-
-code * {
-  color: rgba(255, 255, 255, 0.9);
-  font-family: "Roboto Mono", monospace;
-}
-
-pre code {
-  line-height: 1.4;
-  border-radius: none;
-  background: none;
-  width: 100%;
-}
-
 h1,
 h2,
 h3,
diff --git a/components/css/main.min.css b/components/css/main.min.css
index 21c25b7..6c7e175 100644
--- a/components/css/main.min.css
+++ b/components/css/main.min.css
@@ -1 +1 @@
-*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #0d7377;--secondary-color: #ffac2e;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);overflow-y:hidden}body[data-theme=dark]{--accent-color: #32e0c4;--secondary-color: #d60739;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}img{-o-object-fit:cover;object-fit:cover}a{color:inherit;text-decoration:none}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}button{display:inline-flex;border:none;background-color:inherit}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-button{--border-radius: 0.3rem}ul{list-style:none}.table{display:grid;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), 0.04)}.table p:only-of-type{margin-bottom:0}.tr{display:grid;gap:1rem;padding:1rem;grid-template-columns:11rem 1fr;width:100%}.tr:nth-of-type(odd){background-color:rgba(var(--text-color), 0.04)}.tr p{min-width:30ch}.flex{display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.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;-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{text-transform:capitalize}.flex{display:flex}.grid{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}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.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{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.color-0-8{color:rgba(var(--text-color), 0.8)}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}.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), 0.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}.token.comment,.token.block-comment,.token.prolog,.token.doctype,.token.cdata{color:#50cb93}.token.punctuation,.token.tag{color:#29b6f6}.token.attr-name,.token.namespace,.token.deleted{color:#1de9b6}.token.function-name{color:#6196cc}.token.boolean,.token.number,.token.function{color:#f08d49}.token.property,.token.class-name,.token.constant,.token.symbol{color:#f8c555}.token.selector,.token.important,.token.atrule,.token.keyword,.token.builtin{color:#ff6767}.token.string,.token.char,.token.attr-value,.token.regex,.token.variable{color:#84ffff}.token.operator,.token.entity,.token.url{color:#67cdcc}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}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);line-height:1.7}code{border-radius:.3rem;font-weight:400;padding:.2rem .4rem;background:rgba(var(--text-color), 0.1);color:rgba(255,255,255,.9)}code *{color:rgba(255,255,255,.9);font-family:"Roboto Mono",monospace}pre code{line-height:1.4;border-radius:none;background:none;width:100%}h1,h2,h3,h4.h5{font-family:"Poppins",sans-serif}h2{margin:3rem 0 1rem 0;text-transform:capitalize}main{display:grid;height:100%}#main_header{padding:.5rem 1.5rem;border-bottom:1px solid rgba(var(--text-color), 0.1)}#side_nav_button{padding:.5rem;margin-left:-0.5rem}.right{max-height:100%;overflow-y:auto}#side_nav>:last-child{padding-bottom:3rem}#side_nav h4{font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;padding:1.5rem}.right{padding:1.5rem}.right h1{margin-bottom:1.5rem}.list{list-style:none;display:flex;flex-direction:column;margin-bottom:.8rem}.list__item{display:flex;padding:.8rem 1.5rem;text-transform:capitalize}.list__item--active{color:var(--accent-color);background:rgba(var(--text-color), 0.06)}.card{display:flex;flex-direction:column;margin-right:1rem;border-radius:.4rem;padding:1.5rem;min-width:min(24rem,80%);background-color:rgba(var(--text-color), 0.06)}sm-carousel{margin-bottom:1rem}sm-tab-header{margin-bottom:1.5rem}.page{display:flex;flex-direction:column;padding-bottom:3rem}ol{padding:.6rem 1rem;max-width:75ch;margin-bottom:1.5rem}ol li{margin-bottom:1rem}ol li:last-of-type{margin-bottom:0}strong{max-width:65ch}strong.important{display:flex;padding:.5rem;margin:.5rem 0;border-radius:.3rem;color:rgba(0,0,0,.8);background-color:khaki}.highlight{display:inline-flex;font-family:"Roboto Mono",monospace;background-color:rgba(var(--text-color), 0.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 0}.comp-checkbox__title{margin-left:.5rem}.auto-grid-2{justify-content:center;justify-items:center;text-align:center;grid-template-columns:repeat(auto-fill, minmax(18rem, 1fr))}.screenshot{-o-object-fit:cover;object-fit:cover;-o-object-position:top;object-position:top;height:30rem;width:16rem;border-radius:1rem;justify-self:center;box-shadow:0 .5rem 1.5rem -0.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), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.list__item:hover{background:rgba(var(--text-color), 0.1);cursor:pointer}}
\ No newline at end of file
+*{padding:0;margin:0;box-sizing:border-box;font-family:"Roboto",sans-serif}:root{font-size:clamp(1rem,1.2vmax,1.2rem)}html,body{height:100%}body{--accent-color: #0d7377;--secondary-color: #ffac2e;--text-color: 20, 20, 20;--foreground-color: 252, 253, 255;--background-color: 241, 243, 248;--danger-color: rgb(255, 75, 75);--green: #1cad59;--yellow: rgb(220, 165, 0);color:rgba(var(--text-color), 1);background-color:rgba(var(--background-color), 1);overflow-y:hidden}body[data-theme=dark]{--accent-color: #32e0c4;--secondary-color: #d60739;--text-color: 220, 220, 220;--foreground-color: 27, 28, 29;--background-color: 21, 22, 22;--danger-color: rgb(255, 106, 106);--green: #00e676;--yellow: rgb(255, 213, 5)}p,strong{font-size:.9rem;max-width:65ch;line-height:1.7;color:rgba(var(--text-color), 0.9)}img{-o-object-fit:cover;object-fit:cover}a{color:inherit;text-decoration:none}a:focus-visible{box-shadow:0 0 0 .1rem rgba(var(--text-color), 1) inset}button{display:inline-flex;border:none;background-color:inherit}a:-webkit-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:-moz-any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}a:any-link:focus-visible{outline:rgba(var(--text-color), 1) .1rem solid}sm-button{--border-radius: 0.3rem}ul{list-style:none}.table{display:grid;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), 0.04)}.table p:only-of-type{margin-bottom:0}.tr{display:grid;gap:1rem;padding:1rem;grid-template-columns:11rem 1fr;width:100%}.tr:nth-of-type(odd){background-color:rgba(var(--text-color), 0.04)}.tr p{min-width:30ch}.flex{display:flex}.grid{display:grid}.hide{opacity:0;pointer-events:none}.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;-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{text-transform:capitalize}.flex{display:flex}.grid{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}.align-start{align-items:flex-start}.align-center{align-items:center}.text-center{text-align:center}.justify-start{justify-content:start}.justify-center{justify-content:center}.justify-right{margin-left:auto}.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{flex-direction:column}.space-between{justify-content:space-between}.w-100{width:100%}.color-0-8{color:rgba(var(--text-color), 0.8)}.weight-400{font-weight:400}.weight-500{font-weight:500}.ripple{height:8rem;width:8rem;position:absolute;border-radius:50%;transform:scale(0);background:radial-gradient(circle, rgba(var(--text-color), 0.3) 0%, rgba(0, 0, 0, 0) 50%);pointer-events:none}.interact{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}.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), 0.9)}.button__icon{height:1.2rem;width:1.2rem}.button__icon--left{margin-right:.5rem}.button__icon--right{margin-left:.5rem}h1,h2,h3,h4.h5{font-family:"Poppins",sans-serif}h2{margin:3rem 0 1rem 0;text-transform:capitalize}main{display:grid;height:100%}#main_header{padding:.5rem 1.5rem;border-bottom:1px solid rgba(var(--text-color), 0.1)}#side_nav_button{padding:.5rem;margin-left:-0.5rem}.right{max-height:100%;overflow-y:auto}#side_nav>:last-child{padding-bottom:3rem}#side_nav h4{font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;padding:1.5rem}.right{padding:1.5rem}.right h1{margin-bottom:1.5rem}.list{list-style:none;display:flex;flex-direction:column;margin-bottom:.8rem}.list__item{display:flex;padding:.8rem 1.5rem;text-transform:capitalize}.list__item--active{color:var(--accent-color);background:rgba(var(--text-color), 0.06)}.card{display:flex;flex-direction:column;margin-right:1rem;border-radius:.4rem;padding:1.5rem;min-width:min(24rem,80%);background-color:rgba(var(--text-color), 0.06)}sm-carousel{margin-bottom:1rem}sm-tab-header{margin-bottom:1.5rem}.page{display:flex;flex-direction:column;padding-bottom:3rem}ol{padding:.6rem 1rem;max-width:75ch;margin-bottom:1.5rem}ol li{margin-bottom:1rem}ol li:last-of-type{margin-bottom:0}strong{max-width:65ch}strong.important{display:flex;padding:.5rem;margin:.5rem 0;border-radius:.3rem;color:rgba(0,0,0,.8);background-color:khaki}.highlight{display:inline-flex;font-family:"Roboto Mono",monospace;background-color:rgba(var(--text-color), 0.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 0}.comp-checkbox__title{margin-left:.5rem}.auto-grid-2{justify-content:center;justify-items:center;text-align:center;grid-template-columns:repeat(auto-fill, minmax(18rem, 1fr))}.screenshot{-o-object-fit:cover;object-fit:cover;-o-object-position:top;object-position:top;height:30rem;width:16rem;border-radius:1rem;justify-self:center;box-shadow:0 .5rem 1.5rem -0.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), 0.3);border-radius:1rem}::-webkit-scrollbar-thumb:hover{background:rgba(var(--text-color), 0.5)}.list__item:hover{background:rgba(var(--text-color), 0.1);cursor:pointer}}
\ No newline at end of file
diff --git a/components/css/main.scss b/components/css/main.scss
index 8b45057..c9e15df 100644
--- a/components/css/main.scss
+++ b/components/css/main.scss
@@ -46,6 +46,7 @@ strong {
   line-height: 1.7;
   color: rgba(var(--text-color), 0.9);
 }
+
 img {
   object-fit: cover;
 }
@@ -53,6 +54,7 @@ img {
 a {
   color: inherit;
   text-decoration: none;
+
   &:focus-visible {
     box-shadow: 0 0 0 0.1rem rgba(var(--text-color), 1) inset;
   }
@@ -67,12 +69,15 @@ button {
 a:any-link:focus-visible {
   outline: rgba(var(--text-color), 1) 0.1rem solid;
 }
+
 sm-button {
   --border-radius: 0.3rem;
 }
+
 ul {
   list-style: none;
 }
+
 .table {
   display: grid;
   gap: 0.5rem;
@@ -84,45 +89,56 @@ ul {
   border-collapse: separate;
   border-spacing: 1rem 1.5rem;
   background-color: rgba(var(--text-color), 0.04);
+
   p:only-of-type {
     margin-bottom: 0;
   }
 }
+
 .tr {
   display: grid;
   gap: 1rem;
   padding: 1rem;
   grid-template-columns: 11rem 1fr;
   width: 100%;
+
   &:nth-of-type(odd) {
     background-color: rgba(var(--text-color), 0.04);
   }
+
   p {
     min-width: 30ch;
   }
 }
+
 .flex {
   display: flex;
 }
+
 .grid {
   display: grid;
 }
+
 .hide {
   opacity: 0;
   pointer-events: none;
 }
+
 .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;
@@ -133,21 +149,27 @@ ul {
   -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: 0.8rem;
 }
@@ -155,262 +177,198 @@ ul {
 .uppercase {
   text-transform: uppercase;
 }
+
 .capitalize {
   text-transform: capitalize;
 }
+
 .flex {
   display: flex;
 }
+
 .grid {
   display: grid;
 }
+
 .grid-3 {
   grid-template-columns: 1fr auto auto;
 }
+
 .flow-column {
   grid-auto-flow: column;
 }
+
 .gap-0-5 {
   gap: 0.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;
 }
+
 .align-start {
   align-items: flex-start;
 }
+
 .align-center {
   align-items: center;
 }
+
 .text-center {
   text-align: center;
 }
+
 .justify-start {
   justify-content: start;
 }
+
 .justify-center {
   justify-content: center;
 }
+
 .justify-right {
   margin-left: auto;
 }
+
 .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 {
   flex-direction: column;
 }
+
 .space-between {
   justify-content: space-between;
 }
+
 .w-100 {
   width: 100%;
 }
+
 .color-0-8 {
   color: rgba(var(--text-color), 0.8);
 }
+
 .weight-400 {
   font-weight: 400;
 }
+
 .weight-500 {
   font-weight: 500;
 }
+
 .ripple {
   height: 8rem;
   width: 8rem;
   position: absolute;
   border-radius: 50%;
   transform: scale(0);
-  background: radial-gradient(
-    circle,
-    rgba(var(--text-color), 0.3) 0%,
-    rgba(0, 0, 0, 0) 50%
-  );
+  background: radial-gradient(circle,
+      rgba(var(--text-color), 0.3) 0%,
+      rgba(0, 0, 0, 0) 50%);
   pointer-events: none;
 }
+
 .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 {
+
+.observe-empty-state:not(:empty)~.empty-state {
   display: none;
 }
+
 .icon {
   width: 1.5rem;
   height: 1.5rem;
   fill: rgba(var(--text-color), 0.9);
 }
+
 .button__icon {
   height: 1.2rem;
   width: 1.2rem;
+
   &--left {
     margin-right: 0.5rem;
   }
+
   &--right {
     margin-left: 0.5rem;
   }
 }
-//Syntax highlighting
 
-.token.comment,
-.token.block-comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-  color: #50cb93;
-}
-
-.token.punctuation,
-.token.tag {
-  color: #29b6f6;
-}
-.token.attr-name,
-.token.namespace,
-.token.deleted {
-  color: #1de9b6;
-}
-
-.token.function-name {
-  color: #6196cc;
-}
-
-.token.boolean,
-.token.number,
-.token.function {
-  color: #f08d49;
-}
-
-.token.property,
-.token.class-name,
-.token.constant,
-.token.symbol {
-  color: #f8c555;
-}
-
-.token.selector,
-.token.important,
-.token.atrule,
-.token.keyword,
-.token.builtin {
-  color: #ff6767;
-}
-
-.token.string,
-.token.char,
-.token.attr-value,
-.token.regex,
-.token.variable {
-  color: #84ffff;
-}
-
-.token.operator,
-.token.entity,
-.token.url {
-  color: #67cdcc;
-}
-
-.token.important,
-.token.bold {
-  font-weight: bold;
-}
-.token.italic {
-  font-style: italic;
-}
-
-.token.entity {
-  cursor: help;
-}
-
-.token.inserted {
-  color: green;
-}
-pre {
-  max-width: 100%;
-  margin: 1rem 0;
-  padding: 0 1.5rem;
-  overflow-x: auto;
-  font-size: 0.9rem;
-  font-weight: 500;
-  white-space: pre;
-  border-radius: 0.5rem;
-  background: rgba(0, 0, 0, 0.9);
-  line-height: 1.7;
-}
-code {
-  border-radius: 0.3rem;
-  font-weight: 400;
-  padding: 0.2rem 0.4rem;
-  background: rgba(var(--text-color), 0.1);
-  color: rgba(255, 255, 255, 0.9);
-}
-code * {
-  color: rgba(255, 255, 255, 0.9);
-  font-family: "Roboto Mono", monospace;
-}
-pre code {
-  line-height: 1.4;
-  border-radius: none;
-  background: none;
-  width: 100%;
-}
-
-//
 h1,
 h2,
 h3,
 h4.h5 {
   font-family: "Poppins", sans-serif;
 }
+
 h2 {
   margin: 3rem 0 1rem 0;
   text-transform: capitalize;
 }
+
 main {
   display: grid;
   height: 100%;
 }
+
 #main_header {
   padding: 0.5rem 1.5rem;
   border-bottom: 1px solid rgba(var(--text-color), 0.1);
 }
+
 #side_nav_button {
   padding: 0.5rem;
   margin-left: -0.5rem;
 }
+
 .right {
   max-height: 100%;
   overflow-y: auto;
 }
+
 #side_nav {
-  & > :last-child {
+  &> :last-child {
     padding-bottom: 3rem;
   }
+
   h4 {
     font-size: 0.9rem;
     letter-spacing: 0.08em;
@@ -418,27 +376,33 @@ main {
     padding: 1.5rem;
   }
 }
+
 .right {
   padding: 1.5rem;
+
   h1 {
     margin-bottom: 1.5rem;
   }
 }
+
 .list {
   list-style: none;
   display: flex;
   flex-direction: column;
   margin-bottom: 0.8rem;
 }
+
 .list__item {
   display: flex;
   padding: 0.8rem 1.5rem;
   text-transform: capitalize;
+
   &--active {
     color: var(--accent-color);
     background: rgba(var(--text-color), 0.06);
   }
 }
+
 .card {
   display: flex;
   flex-direction: column;
@@ -448,31 +412,39 @@ main {
   min-width: min(24rem, 80%);
   background-color: rgba(var(--text-color), 0.06);
 }
+
 sm-carousel {
   margin-bottom: 1rem;
 }
+
 sm-tab-header {
   margin-bottom: 1.5rem;
 }
+
 .page {
   display: flex;
   flex-direction: column;
   padding-bottom: 3rem;
 }
+
 ol {
   padding: 0.6rem 1rem;
   max-width: 75ch;
   margin-bottom: 1.5rem;
+
   li {
     margin-bottom: 1rem;
+
     &:last-of-type {
       margin-bottom: 0;
     }
   }
 }
+
 strong {
   max-width: 65ch;
 }
+
 strong.important {
   display: flex;
   padding: 0.5rem;
@@ -481,6 +453,7 @@ strong.important {
   color: rgba(0, 0, 0, 0.8);
   background-color: khaki;
 }
+
 .highlight {
   display: inline-flex;
   font-family: "Roboto Mono", monospace;
@@ -490,24 +463,29 @@ strong.important {
   font-size: 0.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 0;
 }
+
 .comp-checkbox__title {
   margin-left: 0.5rem;
 }
+
 .auto-grid-2 {
   justify-content: center;
   justify-items: center;
   text-align: center;
   grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
 }
+
 .screenshot {
   object-fit: cover;
   object-position: top;
@@ -517,50 +495,62 @@ strong.important {
   justify-self: center;
   box-shadow: 0 0.5rem 1.5rem -0.5rem rgba(0, 0, 0, 0.3), 0 0 0 0.3rem black;
 }
+
 @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;
-    & > * {
+
+    &>* {
       grid-column: 2/3;
     }
   }
+
   .page__title {
     font-size: 2.5rem;
   }
+
   #overview_page {
     display: grid;
     gap: 1.5rem;
     grid-template-columns: 1fr auto;
-    & > div:first-of-type {
+
+    &>div:first-of-type {
       grid-column: 2/3;
       text-align: right;
     }
-    & > div:nth-of-type(2) {
+
+    &>div:nth-of-type(2) {
       grid-row: 1/2;
     }
   }
 }
+
 @media (any-hover: hover) {
   ::-webkit-scrollbar {
     width: 0.5rem;
@@ -570,12 +560,14 @@ strong.important {
   ::-webkit-scrollbar-thumb {
     background: rgba(var(--text-color), 0.3);
     border-radius: 1rem;
+
     &:hover {
       background: rgba(var(--text-color), 0.5);
     }
   }
+
   .list__item:hover {
     background: rgba(var(--text-color), 0.1);
     cursor: pointer;
   }
-}
+}
\ No newline at end of file
diff --git a/components/dist/syntax-highlighter.js b/components/dist/syntax-highlighter.js
index d755a73..5099d78 100644
--- a/components/dist/syntax-highlighter.js
+++ b/components/dist/syntax-highlighter.js
@@ -115,24 +115,38 @@ template.innerHTML = /*html*/`
 
 class SyntaxHighlighter extends HTMLElement {
     static loaded = false;
-    render = (language = 'javascript') => {
+    escapeHtml = (str) => {
+        return str.replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/\u00a0/g, ' ');
+    }
+    render = (language = 'html') => {
         if (!Prism.languages.hasOwnProperty(language))
             return console.error(`Language ${language} not supported`);
         const code = this.innerHTML;
-        const highlightedCode = Prism.highlight(code, Prism.languages[language], language);
+        // remove equal indentation from lines
+        const lines = code.split('\n');
+        const indent = lines.reduce((acc, line) => {
+            if (/^\s*$/.test(line)) return acc; // ignore empty lines
+            const lineIndent = line.match(/^\s*/)[0].length;
+            return Math.min(acc, lineIndent);
+        }, Infinity);
+        const regex = new RegExp(`^\\s{${indent}}`);
+        const formattedCode = lines.map(line => line.replace(regex, '')).join('\n');
         this.innerHTML = `
-                <pre><code class="language-${language}">${highlightedCode}</code></pre>
-            `;
+            <pre><code class="language-${language}">${formattedCode}</code></pre>
+        `;
     }
     connectedCallback() {
-        console.log('connected', SyntaxHighlighter.loaded);
         if (!SyntaxHighlighter.loaded) {
             document.head.appendChild(template.content.cloneNode(true));
             SyntaxHighlighter.loaded = true;
         }
-        setTimeout(() => {
-            this.render(this.getAttribute('language') || 'javascript');
-        }, 0);
+        if (this.querySelector('template')) {
+            this.innerHTML = this.querySelector('template').innerHTML;
+        }
+        this.innerHTML = this.escapeHtml(this.innerHTML);
+        this.render(this.getAttribute('language') || 'html');
     }
 
     disconnectedCallback() {
diff --git a/components/dist/syntax-highlighter.min.js b/components/dist/syntax-highlighter.min.js
index f6752f0..ee1d974 100644
--- a/components/dist/syntax-highlighter.min.js
+++ b/components/dist/syntax-highlighter.min.js
@@ -1 +1 @@
-var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(u){var c=/\blang(?:uage)?-([\w-]+)\b/i,n=0,e={},M={manual:u.Prism&&u.Prism.manual,disableWorkerMessageHandler:u.Prism&&u.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof W?new W(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++n}),e.__id},clone:function t(e,r){var a,n;switch(r=r||{},M.util.type(e)){case"Object":if(n=M.util.objId(e),r[n])return r[n];for(var i in a={},r[n]=a,e)e.hasOwnProperty(i)&&(a[i]=t(e[i],r));return a;case"Array":return n=M.util.objId(e),r[n]?r[n]:(a=[],r[n]=a,e.forEach((function(e,n){a[n]=t(e,r)})),a);default:return e}},getLanguage:function(e){for(;e&&!c.test(e.className);)e=e.parentElement;return e?(e.className.match(c)||[,"none"])[1].toLowerCase():"none"},currentScript:function(){if("undefined"==typeof document)return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(e){var n=(/at [^(\r\n]*\((.*):.+:.+\)$/i.exec(e.stack)||[])[1];if(n){var t=document.getElementsByTagName("script");for(var r in t)if(t[r].src==n)return t[r]}return null}},isActive:function(e,n,t){for(var r="no-"+n;e;){var a=e.classList;if(a.contains(n))return!0;if(a.contains(r))return!1;e=e.parentElement}return!!t}},languages:{plain:e,plaintext:e,text:e,txt:e,extend:function(e,n){var t=M.util.clone(M.languages[e]);for(var r in n)t[r]=n[r];return t},insertBefore:function(t,e,n,r){var a=(r=r||M.languages)[t],i={};for(var l in a)if(a.hasOwnProperty(l)){if(l==e)for(var o in n)n.hasOwnProperty(o)&&(i[o]=n[o]);n.hasOwnProperty(l)||(i[l]=a[l])}var s=r[t];return r[t]=i,M.languages.DFS(M.languages,(function(e,n){n===s&&e!=t&&(this[e]=i)})),i},DFS:function e(n,t,r,a){a=a||{};var i=M.util.objId;for(var l in n)if(n.hasOwnProperty(l)){t.call(n,l,n[l],r||l);var o=n[l],s=M.util.type(o);"Object"!==s||a[i(o)]?"Array"!==s||a[i(o)]||(a[i(o)]=!0,e(o,t,l,a)):(a[i(o)]=!0,e(o,t,null,a))}}},plugins:{},highlightAll:function(e,n){M.highlightAllUnder(document,e,n)},highlightAllUnder:function(e,n,t){var r={callback:t,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};M.hooks.run("before-highlightall",r),r.elements=Array.prototype.slice.apply(r.container.querySelectorAll(r.selector)),M.hooks.run("before-all-elements-highlight",r);for(var a,i=0;a=r.elements[i++];)M.highlightElement(a,!0===n,r.callback)},highlightElement:function(e,n,t){var r=M.util.getLanguage(e),a=M.languages[r];e.className=e.className.replace(c,"").replace(/\s+/g," ")+" language-"+r;var i=e.parentElement;i&&"pre"===i.nodeName.toLowerCase()&&(i.className=i.className.replace(c,"").replace(/\s+/g," ")+" language-"+r);var l={element:e,language:r,grammar:a,code:e.textContent};function o(e){l.highlightedCode=e,M.hooks.run("before-insert",l),l.element.innerHTML=l.highlightedCode,M.hooks.run("after-highlight",l),M.hooks.run("complete",l),t&&t.call(l.element)}if(M.hooks.run("before-sanity-check",l),(i=l.element.parentElement)&&"pre"===i.nodeName.toLowerCase()&&!i.hasAttribute("tabindex")&&i.setAttribute("tabindex","0"),!l.code)return M.hooks.run("complete",l),void(t&&t.call(l.element));if(M.hooks.run("before-highlight",l),l.grammar)if(n&&u.Worker){var s=new Worker(M.filename);s.onmessage=function(e){o(e.data)},s.postMessage(JSON.stringify({language:l.language,code:l.code,immediateClose:!0}))}else o(M.highlight(l.code,l.grammar,l.language));else o(M.util.encode(l.code))},highlight:function(e,n,t){var r={code:e,grammar:n,language:t};return M.hooks.run("before-tokenize",r),r.tokens=M.tokenize(r.code,r.grammar),M.hooks.run("after-tokenize",r),W.stringify(M.util.encode(r.tokens),r.language)},tokenize:function(e,n){var t=n.rest;if(t){for(var r in t)n[r]=t[r];delete n.rest}var a=new i;return I(a,a.head,e),function e(n,t,r,a,i,l){for(var o in r)if(r.hasOwnProperty(o)&&r[o]){var s=r[o];s=Array.isArray(s)?s:[s];for(var u=0;u<s.length;++u){if(l&&l.cause==o+","+u)return;var c=s[u],g=c.inside,f=!!c.lookbehind,h=!!c.greedy,d=c.alias;if(h&&!c.pattern.global){var p=c.pattern.toString().match(/[imsuy]*$/)[0];c.pattern=RegExp(c.pattern.source,p+"g")}for(var v=c.pattern||c,m=a.next,y=i;m!==t.tail&&!(l&&y>=l.reach);y+=m.value.length,m=m.next){var b=m.value;if(t.length>n.length)return;if(!(b instanceof W)){var k,x=1;if(h){if(!(k=z(v,y,n,f)))break;var w=k.index,A=k.index+k[0].length,P=y;for(P+=m.value.length;P<=w;)P+=(m=m.next).value.length;if(y=P-=m.value.length,m.value instanceof W)continue;for(var E=m;E!==t.tail&&(P<A||"string"==typeof E.value);E=E.next)x++,P+=E.value.length;x--,b=n.slice(y,P),k.index-=y}else if(!(k=z(v,0,b,f)))continue;w=k.index;var S=k[0],O=b.slice(0,w),L=b.slice(w+S.length),N=y+b.length;l&&N>l.reach&&(l.reach=N);var j=m.prev;if(O&&(j=I(t,j,O),y+=O.length),q(t,j,x),m=I(t,j,new W(o,g?M.tokenize(S,g):S,d,S)),L&&I(t,m,L),1<x){var _={cause:o+","+u,reach:N};e(n,t,r,m.prev,y,_),l&&_.reach>l.reach&&(l.reach=_.reach)}}}}}}(e,a,n,a.head,0),function(e){for(var n=[],t=e.head.next;t!==e.tail;)n.push(t.value),t=t.next;return n}(a)},hooks:{all:{},add:function(e,n){var t=M.hooks.all;t[e]=t[e]||[],t[e].push(n)},run:function(e,n){var t=M.hooks.all[e];if(t&&t.length)for(var r,a=0;r=t[a++];)r(n)}},Token:W};function W(e,n,t,r){this.type=e,this.content=n,this.alias=t,this.length=0|(r||"").length}function z(e,n,t,r){e.lastIndex=n;var a=e.exec(t);if(a&&r&&a[1]){var i=a[1].length;a.index+=i,a[0]=a[0].slice(i)}return a}function i(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function I(e,n,t){var r=n.next,a={value:t,prev:n,next:r};return n.next=a,r.prev=a,e.length++,a}function q(e,n,t){for(var r=n.next,a=0;a<t&&r!==e.tail;a++)r=r.next;(n.next=r).prev=n,e.length-=a}if(u.Prism=M,W.stringify=function n(e,t){if("string"==typeof e)return e;if(Array.isArray(e)){var r="";return e.forEach((function(e){r+=n(e,t)})),r}var a={type:e.type,content:n(e.content,t),tag:"span",classes:["token",e.type],attributes:{},language:t},i=e.alias;i&&(Array.isArray(i)?Array.prototype.push.apply(a.classes,i):a.classes.push(i)),M.hooks.run("wrap",a);var l="";for(var o in a.attributes)l+=" "+o+'="'+(a.attributes[o]||"").replace(/"/g,"&quot;")+'"';return"<"+a.tag+' class="'+a.classes.join(" ")+'"'+l+">"+a.content+"</"+a.tag+">"},!u.document)return u.addEventListener&&(M.disableWorkerMessageHandler||u.addEventListener("message",(function(e){var n=JSON.parse(e.data),t=n.language,r=n.code,a=n.immediateClose;u.postMessage(M.highlight(r,M.languages[t],t)),a&&u.close()}),!1)),M;var t=M.util.currentScript();function r(){M.manual||M.highlightAll()}if(t&&(M.filename=t.src,t.hasAttribute("data-manual")&&(M.manual=!0)),!M.manual){var a=document.readyState;"loading"===a||"interactive"===a&&t&&t.defer?document.addEventListener("DOMContentLoaded",r):window.requestAnimationFrame?window.requestAnimationFrame(r):window.setTimeout(r,16)}return M}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism),Prism.languages.markup={comment:/<!--[\s\S]*?-->/,prolog:/<\?[\s\S]+?\?>/,doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[[\]]/,"doctype-tag":/^DOCTYPE/,name:/[^\s<>'"]+/}},cdata:/<!\[CDATA\[[\s\S]*?\]\]>/i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",(function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&amp;/,"&"))})),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^<!\[CDATA\[|\]\]>$/i;var t={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:s}};t["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var n={};n[a]={pattern:RegExp("(<__[^>]*>)(?:<!\\[CDATA\\[(?:[^\\]]|\\](?!\\]>))*\\]\\]>|(?!<!\\[CDATA\\[)[^])*?(?=</__>)".replace(/__/g,(function(){return a})),"i"),lookbehind:!0,greedy:!0,inside:t},Prism.languages.insertBefore("markup","cdata",n)}}),Object.defineProperty(Prism.languages.markup.tag,"addAttribute",{value:function(a,e){Prism.languages.markup.tag.inside["special-attr"].push({pattern:RegExp("(^|[\"'\\s])(?:"+a+")\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+(?=[\\s>]))","i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[e,"language-"+e],inside:Prism.languages[e]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml,function(s){var e=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+e.source+"|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+e.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+e.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:e,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var t=s.languages.markup;t&&(t.tag.addInlined("style","css"),t.tag.addAttribute("style","css"))}(Prism),Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|interface|extends|implements|trait|instanceof|new)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/},Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:prototype|constructor))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:/\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&(Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.markup.tag.addAttribute("on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)","javascript")),Prism.languages.js=Prism.languages.javascript;const template=document.createElement("template");template.innerHTML='\n    <style>\n        .token.comment,\n        .token.block-comment,\n        .token.prolog,\n        .token.doctype,\n        .token.cdata {\n            color: #50cb93;\n        }\n\n        .token.punctuation,\n        .token.tag {\n            color: #29b6f6;\n        }\n        .token.attr-name,\n        .token.namespace,\n        .token.deleted {\n            color: #1de9b6;\n        }\n\n        .token.function-name {\n            color: #6196cc;\n        }\n\n        .token.boolean,\n        .token.number,\n        .token.function {\n            color: #f08d49;\n        }\n\n        .token.property,\n        .token.class-name,\n        .token.constant,\n        .token.symbol {\n            color: #f8c555;\n        }\n\n        .token.selector,\n        .token.important,\n        .token.atrule,\n        .token.keyword,\n        .token.builtin {\n            color: #ff6767;\n        }\n\n        .token.string,\n        .token.char,\n        .token.attr-value,\n        .token.regex,\n        .token.variable {\n            color: #84ffff;\n        }\n\n        .token.operator,\n        .token.entity,\n        .token.url {\n            color: #67cdcc;\n        }\n\n        .token.important,\n        .token.bold {\n            font-weight: bold;\n        }\n        .token.italic {\n            font-style: italic;\n        }\n\n        .token.entity {\n            cursor: help;\n        }\n\n        .token.inserted {\n            color: green;\n        }\n        pre {\n            max-width: 100%;\n            margin: 1rem 0;\n            padding: 0 1.5rem;\n            overflow-x: auto;\n            font-size: 0.9rem;\n            font-weight: 500;\n            white-space: pre;\n            border-radius: 0.5rem;\n            background: rgba(0, 0, 0, 0.9);\n            line-height: 1.7;\n        }\n        code {\n            border-radius: 0.3rem;\n            font-weight: 400;\n            background: rgba(var(--text-color), 0.1);\n            color: rgba(255, 255, 255, 0.9);\n        }\n        code * {\n            color: rgba(255, 255, 255, 0.9);\n            font-family: "Roboto Mono", monospace;\n        }\n        pre code {\n            line-height: 1.4;\n            border-radius: none;\n            background: none;\n            width: 100%;\n        }\n    </style>\n    ';class SyntaxHighlighter extends HTMLElement{static loaded=!1;render=(language="javascript")=>{if(!Prism.languages.hasOwnProperty(language))return console.error(`Language ${language} not supported`);const code=this.innerHTML,highlightedCode=Prism.highlight(code,Prism.languages[language],language);this.innerHTML=`\n                <pre><code class="language-${language}">${highlightedCode}</code></pre>\n            `};connectedCallback(){console.log("connected",SyntaxHighlighter.loaded),SyntaxHighlighter.loaded||(document.head.appendChild(template.content.cloneNode(!0)),SyntaxHighlighter.loaded=!0),setTimeout((()=>{this.render(this.getAttribute("language")||"javascript")}),0)}disconnectedCallback(){}}window.customElements.define("syntax-highlighter",SyntaxHighlighter);
\ No newline at end of file
+var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(u){var c=/\blang(?:uage)?-([\w-]+)\b/i,n=0,e={},M={manual:u.Prism&&u.Prism.manual,disableWorkerMessageHandler:u.Prism&&u.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof W?new W(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++n}),e.__id},clone:function t(e,r){var a,n;switch(r=r||{},M.util.type(e)){case"Object":if(n=M.util.objId(e),r[n])return r[n];for(var i in a={},r[n]=a,e)e.hasOwnProperty(i)&&(a[i]=t(e[i],r));return a;case"Array":return n=M.util.objId(e),r[n]?r[n]:(a=[],r[n]=a,e.forEach((function(e,n){a[n]=t(e,r)})),a);default:return e}},getLanguage:function(e){for(;e&&!c.test(e.className);)e=e.parentElement;return e?(e.className.match(c)||[,"none"])[1].toLowerCase():"none"},currentScript:function(){if("undefined"==typeof document)return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(e){var n=(/at [^(\r\n]*\((.*):.+:.+\)$/i.exec(e.stack)||[])[1];if(n){var t=document.getElementsByTagName("script");for(var r in t)if(t[r].src==n)return t[r]}return null}},isActive:function(e,n,t){for(var r="no-"+n;e;){var a=e.classList;if(a.contains(n))return!0;if(a.contains(r))return!1;e=e.parentElement}return!!t}},languages:{plain:e,plaintext:e,text:e,txt:e,extend:function(e,n){var t=M.util.clone(M.languages[e]);for(var r in n)t[r]=n[r];return t},insertBefore:function(t,e,n,r){var a=(r=r||M.languages)[t],i={};for(var l in a)if(a.hasOwnProperty(l)){if(l==e)for(var o in n)n.hasOwnProperty(o)&&(i[o]=n[o]);n.hasOwnProperty(l)||(i[l]=a[l])}var s=r[t];return r[t]=i,M.languages.DFS(M.languages,(function(e,n){n===s&&e!=t&&(this[e]=i)})),i},DFS:function e(n,t,r,a){a=a||{};var i=M.util.objId;for(var l in n)if(n.hasOwnProperty(l)){t.call(n,l,n[l],r||l);var o=n[l],s=M.util.type(o);"Object"!==s||a[i(o)]?"Array"!==s||a[i(o)]||(a[i(o)]=!0,e(o,t,l,a)):(a[i(o)]=!0,e(o,t,null,a))}}},plugins:{},highlightAll:function(e,n){M.highlightAllUnder(document,e,n)},highlightAllUnder:function(e,n,t){var r={callback:t,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};M.hooks.run("before-highlightall",r),r.elements=Array.prototype.slice.apply(r.container.querySelectorAll(r.selector)),M.hooks.run("before-all-elements-highlight",r);for(var a,i=0;a=r.elements[i++];)M.highlightElement(a,!0===n,r.callback)},highlightElement:function(e,n,t){var r=M.util.getLanguage(e),a=M.languages[r];e.className=e.className.replace(c,"").replace(/\s+/g," ")+" language-"+r;var i=e.parentElement;i&&"pre"===i.nodeName.toLowerCase()&&(i.className=i.className.replace(c,"").replace(/\s+/g," ")+" language-"+r);var l={element:e,language:r,grammar:a,code:e.textContent};function o(e){l.highlightedCode=e,M.hooks.run("before-insert",l),l.element.innerHTML=l.highlightedCode,M.hooks.run("after-highlight",l),M.hooks.run("complete",l),t&&t.call(l.element)}if(M.hooks.run("before-sanity-check",l),(i=l.element.parentElement)&&"pre"===i.nodeName.toLowerCase()&&!i.hasAttribute("tabindex")&&i.setAttribute("tabindex","0"),!l.code)return M.hooks.run("complete",l),void(t&&t.call(l.element));if(M.hooks.run("before-highlight",l),l.grammar)if(n&&u.Worker){var s=new Worker(M.filename);s.onmessage=function(e){o(e.data)},s.postMessage(JSON.stringify({language:l.language,code:l.code,immediateClose:!0}))}else o(M.highlight(l.code,l.grammar,l.language));else o(M.util.encode(l.code))},highlight:function(e,n,t){var r={code:e,grammar:n,language:t};return M.hooks.run("before-tokenize",r),r.tokens=M.tokenize(r.code,r.grammar),M.hooks.run("after-tokenize",r),W.stringify(M.util.encode(r.tokens),r.language)},tokenize:function(e,n){var t=n.rest;if(t){for(var r in t)n[r]=t[r];delete n.rest}var a=new i;return I(a,a.head,e),function e(n,t,r,a,i,l){for(var o in r)if(r.hasOwnProperty(o)&&r[o]){var s=r[o];s=Array.isArray(s)?s:[s];for(var u=0;u<s.length;++u){if(l&&l.cause==o+","+u)return;var c=s[u],g=c.inside,f=!!c.lookbehind,h=!!c.greedy,d=c.alias;if(h&&!c.pattern.global){var p=c.pattern.toString().match(/[imsuy]*$/)[0];c.pattern=RegExp(c.pattern.source,p+"g")}for(var v=c.pattern||c,m=a.next,y=i;m!==t.tail&&!(l&&y>=l.reach);y+=m.value.length,m=m.next){var b=m.value;if(t.length>n.length)return;if(!(b instanceof W)){var k,x=1;if(h){if(!(k=z(v,y,n,f)))break;var w=k.index,A=k.index+k[0].length,P=y;for(P+=m.value.length;P<=w;)P+=(m=m.next).value.length;if(y=P-=m.value.length,m.value instanceof W)continue;for(var E=m;E!==t.tail&&(P<A||"string"==typeof E.value);E=E.next)x++,P+=E.value.length;x--,b=n.slice(y,P),k.index-=y}else if(!(k=z(v,0,b,f)))continue;w=k.index;var S=k[0],O=b.slice(0,w),L=b.slice(w+S.length),N=y+b.length;l&&N>l.reach&&(l.reach=N);var j=m.prev;if(O&&(j=I(t,j,O),y+=O.length),q(t,j,x),m=I(t,j,new W(o,g?M.tokenize(S,g):S,d,S)),L&&I(t,m,L),1<x){var _={cause:o+","+u,reach:N};e(n,t,r,m.prev,y,_),l&&_.reach>l.reach&&(l.reach=_.reach)}}}}}}(e,a,n,a.head,0),function(e){for(var n=[],t=e.head.next;t!==e.tail;)n.push(t.value),t=t.next;return n}(a)},hooks:{all:{},add:function(e,n){var t=M.hooks.all;t[e]=t[e]||[],t[e].push(n)},run:function(e,n){var t=M.hooks.all[e];if(t&&t.length)for(var r,a=0;r=t[a++];)r(n)}},Token:W};function W(e,n,t,r){this.type=e,this.content=n,this.alias=t,this.length=0|(r||"").length}function z(e,n,t,r){e.lastIndex=n;var a=e.exec(t);if(a&&r&&a[1]){var i=a[1].length;a.index+=i,a[0]=a[0].slice(i)}return a}function i(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function I(e,n,t){var r=n.next,a={value:t,prev:n,next:r};return n.next=a,r.prev=a,e.length++,a}function q(e,n,t){for(var r=n.next,a=0;a<t&&r!==e.tail;a++)r=r.next;(n.next=r).prev=n,e.length-=a}if(u.Prism=M,W.stringify=function n(e,t){if("string"==typeof e)return e;if(Array.isArray(e)){var r="";return e.forEach((function(e){r+=n(e,t)})),r}var a={type:e.type,content:n(e.content,t),tag:"span",classes:["token",e.type],attributes:{},language:t},i=e.alias;i&&(Array.isArray(i)?Array.prototype.push.apply(a.classes,i):a.classes.push(i)),M.hooks.run("wrap",a);var l="";for(var o in a.attributes)l+=" "+o+'="'+(a.attributes[o]||"").replace(/"/g,"&quot;")+'"';return"<"+a.tag+' class="'+a.classes.join(" ")+'"'+l+">"+a.content+"</"+a.tag+">"},!u.document)return u.addEventListener&&(M.disableWorkerMessageHandler||u.addEventListener("message",(function(e){var n=JSON.parse(e.data),t=n.language,r=n.code,a=n.immediateClose;u.postMessage(M.highlight(r,M.languages[t],t)),a&&u.close()}),!1)),M;var t=M.util.currentScript();function r(){M.manual||M.highlightAll()}if(t&&(M.filename=t.src,t.hasAttribute("data-manual")&&(M.manual=!0)),!M.manual){var a=document.readyState;"loading"===a||"interactive"===a&&t&&t.defer?document.addEventListener("DOMContentLoaded",r):window.requestAnimationFrame?window.requestAnimationFrame(r):window.setTimeout(r,16)}return M}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism),Prism.languages.markup={comment:/<!--[\s\S]*?-->/,prolog:/<\?[\s\S]+?\?>/,doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[[\]]/,"doctype-tag":/^DOCTYPE/,name:/[^\s<>'"]+/}},cdata:/<!\[CDATA\[[\s\S]*?\]\]>/i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",(function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&amp;/,"&"))})),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^<!\[CDATA\[|\]\]>$/i;var t={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:s}};t["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var n={};n[a]={pattern:RegExp("(<__[^>]*>)(?:<!\\[CDATA\\[(?:[^\\]]|\\](?!\\]>))*\\]\\]>|(?!<!\\[CDATA\\[)[^])*?(?=</__>)".replace(/__/g,(function(){return a})),"i"),lookbehind:!0,greedy:!0,inside:t},Prism.languages.insertBefore("markup","cdata",n)}}),Object.defineProperty(Prism.languages.markup.tag,"addAttribute",{value:function(a,e){Prism.languages.markup.tag.inside["special-attr"].push({pattern:RegExp("(^|[\"'\\s])(?:"+a+")\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+(?=[\\s>]))","i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[e,"language-"+e],inside:Prism.languages[e]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml,function(s){var e=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+e.source+"|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+e.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+e.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:e,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var t=s.languages.markup;t&&(t.tag.addInlined("style","css"),t.tag.addAttribute("style","css"))}(Prism),Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|interface|extends|implements|trait|instanceof|new)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/},Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:prototype|constructor))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:/\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&(Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.markup.tag.addAttribute("on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)","javascript")),Prism.languages.js=Prism.languages.javascript;const template=document.createElement("template");template.innerHTML='\n    <style>\n        .token.comment,\n        .token.block-comment,\n        .token.prolog,\n        .token.doctype,\n        .token.cdata {\n            color: #50cb93;\n        }\n\n        .token.punctuation,\n        .token.tag {\n            color: #29b6f6;\n        }\n        .token.attr-name,\n        .token.namespace,\n        .token.deleted {\n            color: #1de9b6;\n        }\n\n        .token.function-name {\n            color: #6196cc;\n        }\n\n        .token.boolean,\n        .token.number,\n        .token.function {\n            color: #f08d49;\n        }\n\n        .token.property,\n        .token.class-name,\n        .token.constant,\n        .token.symbol {\n            color: #f8c555;\n        }\n\n        .token.selector,\n        .token.important,\n        .token.atrule,\n        .token.keyword,\n        .token.builtin {\n            color: #ff6767;\n        }\n\n        .token.string,\n        .token.char,\n        .token.attr-value,\n        .token.regex,\n        .token.variable {\n            color: #84ffff;\n        }\n\n        .token.operator,\n        .token.entity,\n        .token.url {\n            color: #67cdcc;\n        }\n\n        .token.important,\n        .token.bold {\n            font-weight: bold;\n        }\n        .token.italic {\n            font-style: italic;\n        }\n\n        .token.entity {\n            cursor: help;\n        }\n\n        .token.inserted {\n            color: green;\n        }\n        pre {\n            max-width: 100%;\n            margin: 1rem 0;\n            padding: 0 1.5rem;\n            overflow-x: auto;\n            font-size: 0.9rem;\n            font-weight: 500;\n            white-space: pre;\n            border-radius: 0.5rem;\n            background: rgba(0, 0, 0, 0.9);\n            line-height: 1.7;\n        }\n        code {\n            border-radius: 0.3rem;\n            font-weight: 400;\n            background: rgba(var(--text-color), 0.1);\n            color: rgba(255, 255, 255, 0.9);\n        }\n        code * {\n            color: rgba(255, 255, 255, 0.9);\n            font-family: "Roboto Mono", monospace;\n        }\n        pre code {\n            line-height: 1.4;\n            border-radius: none;\n            background: none;\n            width: 100%;\n        }\n    </style>\n    ';class SyntaxHighlighter extends HTMLElement{static loaded=!1;escapeHtml=str=>str.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ");render=(language="html")=>{if(!Prism.languages.hasOwnProperty(language))return console.error(`Language ${language} not supported`);const lines=this.innerHTML.split("\n"),indent=lines.reduce(((acc,line)=>{if(/^\s*$/.test(line))return acc;const lineIndent=line.match(/^\s*/)[0].length;return Math.min(acc,lineIndent)}),1/0),regex=new RegExp(`^\\s{${indent}}`),formattedCode=lines.map((line=>line.replace(regex,""))).join("\n");this.innerHTML=`\n            <pre><code class="language-${language}">${formattedCode}</code></pre>\n        `};connectedCallback(){SyntaxHighlighter.loaded||(document.head.appendChild(template.content.cloneNode(!0)),SyntaxHighlighter.loaded=!0),this.querySelector("template")&&(this.innerHTML=this.querySelector("template").innerHTML),this.innerHTML=this.escapeHtml(this.innerHTML),this.render(this.getAttribute("language")||"html")}disconnectedCallback(){}}window.customElements.define("syntax-highlighter",SyntaxHighlighter);
\ No newline at end of file
diff --git a/components/index.html b/components/index.html
index 517f14a..2d87d6f 100644
--- a/components/index.html
+++ b/components/index.html
@@ -16,10 +16,6 @@
 
 <body class="hide-completely">
     <sm-notifications id="notification_drawer"></sm-notifications>
-    <audio id="notification_sound">
-        <source src="https://rmservices.duckdns.org/files/notification-sound.mp3" type="audio/mpeg">
-        <source src="https://rmservices.duckdns.org/files/notification-sound.ogg" type="audio/ogg">
-    </audio>
     <main>
         <header id="main_header" class="flex align-center space-between">
             <button id="side_nav_button" class="interact" onclick="getRef('side_nav').open()"
@@ -108,11 +104,9 @@
                     </li>
                     <li>
                         Link the downloaded js before <span class="highlight">&lt;/body&gt;</span>
-                        <pre>
-<code>
-&lt;script src=".../components.js"&gt;&lt;/script&gt;
-</code>
-</pre>
+                        <syntax-highlighter>
+                            <script src=".../components.js"></script>
+                        </syntax-highlighter>
                     </li>
                 </ol>
                 <div class="grid grid-3 gap-0-5 align-center">
@@ -198,23 +192,19 @@
                     </div>
                 </section>
                 <h4>How to define variant</h4>
-                <pre>
-<code>
-&lt;sm-button variant="primary"&gt;primary&lt;/sm-button&gt;
-&lt;sm-button variant="outlined"&gt;outlined&lt;/sm-button&gt;
-&lt;sm-button variant="no-outline"&gt;no-outline&lt;/sm-button&gt;
-</code>
-</pre>
+                <syntax-highlighter>
+                    <sm-button variant="primary">Primary</sm-button>
+                    <sm-button variant="outlined">Outlined</sm-button>
+                    <sm-button variant="no-outline">No outline</sm-button>
+                </syntax-highlighter>
 
                 <h2>States</h2>
                 <h4>Disabled</h4>
                 <p>To disable the button add <span class="highlight">disabled</span> attribute.</p>
                 <sm-button disabled>Disabled</sm-button>
-                <pre>
-<code>
-&lt;sm-button disabled&gt;Disabled&lt;/sm-button&gt;
-</code>
-</pre>
+                <syntax-highlighter>
+                    <sm-button disabled>Disabled</sm-button>
+                </syntax-highlighter>
                 <h2>Attributes</h2>
                 <p>All the native HTML checkbox attributes are valid</p>
                 <section class="table">
@@ -292,13 +282,11 @@
                         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio.</p>
                     </div>
                 </sm-carousel>
-                <pre>
-<code>
-&lt;sm-carousel align-items="start" indicator&gt;
-    &lt;!-- carousel items --&gt;
-&lt;/sm-carousel&gt;
-</code>
-</pre>
+                <syntax-highlighter>
+                    <sm-carousel align-items="start" indicator>
+                        <!-- carousel items -->
+                    </sm-carousel>
+                </syntax-highlighter>
                 <h2>Custom attributes</h2>
                 <p>These attributes cane used to customize carousel behaviour and features</p>
                 <section class="table">
@@ -379,13 +367,13 @@
                         Checked checkbox
                     </div>
                 </sm-checkbox>
-                <pre>
-<code>
-&lt;sm-checkbox  checked&gt;
-    &lt;div style="margin-left: 0.5rem;"&gt;Checked checkbox&lt;/div&gt;
-&lt;/sm-checkbox&gt;           
-</code>
-</pre>
+                <syntax-highlighter>
+                    <sm-checkbox checked>
+                        <div style="margin-left: 0.5rem;">
+                            Checked checkbox
+                        </div>
+                    </sm-checkbox>
+                </syntax-highlighter>
 
                 <h4>Disabled</h4>
                 <p>To disable the checkbox add <span class="highlight">disabled</span> attribute.</p>
@@ -394,13 +382,13 @@
                         Disabled checkbox
                     </div>
                 </sm-checkbox>
-                <pre>
-<code>
-&lt;sm-checkbox  disabled&gt;
-    &lt;div style="margin-left: 0.5rem;"&gt;Disabled checkbox&lt;/div&gt;
-&lt;/sm-checkbox&gt;           
-</code>
-</pre>
+                <syntax-highlighter>
+                    <sm-checkbox disabled>
+                        <div style="margin-left: 0.5rem;">
+                            Disabled checkbox
+                        </div>
+                    </sm-checkbox>
+                </syntax-highlighter>
 
                 <h2>Attributes</h2>
                 <p>All the native HTML checkbox attributes are valid</p>
@@ -466,24 +454,25 @@
             <section id="copy_page" class="page hide-completely">
                 <h1 class="page__title">Copy</h1>
                 <h2>Interactive demo</h2>
-                <sm-copy value="copy this message">
-                    <div>ssafd</div>
+                <sm-copy value="this wiil be copied">
+                    <div>this will be copied</div>
                 </sm-copy>
-                <pre>
-<code>
-&lt;sm-copy value="copy this message"&gt;&lt;/sm-copy&gt;        
-</code>
-</pre>
+                <syntax-highlighter>
+                    <sm-copy value="this wiil be copied">
+                        <div>this will be copied</div>
+                    </sm-copy>
+                </syntax-highlighter>
                 <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>
+                <syntax-highlighter>
+                    <template>
+                        <sm-copy id="text_to_copy" value="sample text"></sm-copy>
+                        <script>
+                            const textToCopy = document.getElementById('text_to_copy')
+                            textToCopy.value = 'Different value'; /* Setting value to be copied */
+                        </script>
+                    </template>
+                </syntax-highlighter>
+
                 <h2>Attributes</h2>
                 <section class="table">
                     <div class="tr">
@@ -542,11 +531,9 @@
                 </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>
+                <syntax-highlighter>
+                    <file-input multiple>Select multiple files</file-input>
+                </syntax-highlighter>
                 <h2>Attributes</h2>
                 <section class="table">
                     <div class="tr">
@@ -651,40 +638,36 @@
                     </div>
                 </section>
                 <h2>Usage</h2>
-                <pre>
-<code>
-&lt;hamburger-menu id="navigation_drawer"&gt;
-    <!-- Navigation links -->
-&lt;/hamburger-menu&gt;
-&lt;script&gt;
-    const navigationDrawer = document.getElementById('navigation_drawer')
-    const navigationDrawerButton = document.getElementById('navigation_drawer_button')
-    navigationDrawerButton.addEventListner('click', e => {
-        navigationDrawer.open(); // Will open hamburger menu on mobile devices when hidden  
-    })
-&lt;/script&gt;
-</code>
-</pre>
+                <syntax-highlighter>
+                    <template>
+                        <hamburger-menu id="navigation_drawer">
+                            <!-- Navigation links -->
+                        </hamburger-menu>
+                        <script>
+                            const navigationDrawer = document.getElementById('navigation_drawer')
+                            const navigationDrawerButton = document.getElementById('navigation_drawer_button')
+                            navigationDrawerButton.addEventListner('click', e => {
+                                navigationDrawer.open(); // Will open hamburger menu on mobile devices when hidden  
+                            })
+                        </script>
+                    </template>
+                </syntax-highlighter>
             </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>
-</pre>
+                <syntax-highlighter>
+                    <sm-input id="my_input" placeholder="Email" type="email" value="john@doe" animate></sm-input>
+                </syntax-highlighter>
                 <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-input placeholder="Name" variant="outlined" animate></sm-input>
-                <pre>
-<code>
-&lt;sm-input placeholder="Name" variant="outlined" animate&gt;&lt;/sm-input&gt;
-</code>
-</pre>
+                <syntax-highlighter>
+                    <sm-input placeholder="Name" variant="outlined" animate></sm-input>
+                </syntax-highlighter>
                 <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>
@@ -799,19 +782,19 @@
                         </p>
                     </div>
                 </section>
-                <pre>
-<code>
-&lt;script&gt;
-    /* Setting custom validation function */
-    document.getElelementById('my_input').customValidation = myValidation
+                <syntax-highlighter>
+                    <template>
+                        <script>
+                            /* Setting custom validation function */
+                            document.getElelementById('my_input').customValidation = myValidation
 
-    function myValidation(inputValue) {
-        /* Custom validation logic */
-        return Boolean; /* Must return Boolean ( true/ false ) */
-    }
-&lt;/script&gt;
-</code>
-</pre>
+                            function myValidation(inputValue) {
+                                /* Custom validation logic */
+                                return Boolean; /* Must return Boolean ( true/ false ) */
+                            }
+                        </script>
+                    </template>
+                </syntax-highlighter>
             </section>
 
             <section id="menu_page" class="page hide-completely">
@@ -822,15 +805,13 @@
                     <menu-option>second option</menu-option>
                     <menu-option>third option</menu-option>
                 </sm-menu>
-                <pre>
-<code>
-&lt;sm-menu&gt;
-    &lt;menu-option&gt;first option&lt;/menu-option&gt;
-    &lt;menu-option&gt;second option&lt;/menu-option&gt;
-    &lt;menu-option&gt;third option&lt;/menu-option&gt;
-&lt;/sm-menu&gt;
-</code>
-</pre>
+                <syntax-highlighter>
+                    <sm-menu>
+                        <menu-option>first option</menu-option>
+                        <menu-option>second option</menu-option>
+                        <menu-option>third option</menu-option>
+                    </sm-menu>
+                </syntax-highlighter>
                 <h2>Custom Attributes</h2>
                 <section class="table">
                     <div class="tr">
@@ -913,15 +894,15 @@
                 <h2>Interactive demo</h2>
                 <sm-button onclick="getRef('notification_drawer').push('This is a notification', {pinned: true})">
                     push pinned notification</sm-button>
-                <pre>
-<code>
-&lt;sm-notifications id="notification_drawer"&gt;&lt;/sm-notifications&gt;
-&lt;script&gt;
-    const notificationDrawer = document.getElementById('notification_drawer')
-    notificationDrawer.push('This is a notification', { pinned: true })
-&lt;/script&gt;
-</code>
-</pre>
+                <syntax-highlighter>
+                    <template>
+                        <sm-notifications id="notification_drawer"></sm-notifications>
+                        <script>
+                            const notificationDrawer = document.getElementById('notification_drawer')
+                            notificationDrawer.push('This is a notification', { pinned: true })
+                        </script>
+                    </template>
+                </syntax-highlighter>
             </section>
 
             <section id="popup_page" class="page hide-completely">
@@ -937,28 +918,30 @@
                         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>
+                <syntax-highlighter>
+                    <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>
+                </syntax-highlighter>
                 <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>
+                <syntax-highlighter>
+                    <template>
+                        <sm-popup id="my_popup">
+                            <!--Popup content -->
+                        </sm-popup>
+                        <sm-button id="show_popup_button">Show popup</sm-button>
+                        <script>
+                            const myPopup = document.getElementById('my_popup')
+                            document.getElementById('show_popup_button').addEventListener('click', e => {
+                                myPopup.show({ options });
+                            })
+                        </script>
+                    </template>
+                </syntax-highlighter>
                 <h2>Custom Attributes</h2>
                 <section class="table">
                     <div class="tr">
@@ -1104,19 +1087,17 @@
                         <div>&nbsp;&nbsp;🤷</div>
                     </sm-radio>
                 </div>
-                <pre>
-<code>
-&lt;sm-radio name="abc" value="on" checked&gt;
-    &lt;div&gt;&nbsp;&nbsp;On&lt;/div&gt;
-&lt;/sm-radio&gt;
-&lt;sm-radio name="abc" value="off"&gt;
-    &lt;div&gt;&nbsp;&nbsp;Off&lt;/div&gt;
-&lt;/sm-radio&gt;
-&lt;sm-radio name="abc" value="🤷"&gt;
-    &lt;div&gt;&nbsp;&nbsp;🤷&lt;/div&gt;
-&lt;/sm-radio&gt;          
-</code>
-</pre>
+                <syntax-highlighter>
+                    <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>
+                </syntax-highlighter>
                 <h2>States</h2>
                 <h4>Checked</h4>
                 <p>To make switch turned on by default add <span class="highlight">checked</span> attribute.</p>
@@ -1125,13 +1106,13 @@
                         Checked radio button
                     </div>
                 </sm-radio>
-                <pre>
-<code>
-&lt;sm-radio checked&gt;
-    &lt;div&gt;On switch&lt;/div&gt;
-&lt;/sm-radio&gt;           
-</code>
-</pre>
+                <syntax-highlighter>
+                    <sm-radio checked>
+                        <div style="margin-left: 0.5rem;">
+                            Checked radio button
+                        </div>
+                    </sm-radio>
+                </syntax-highlighter>
 
                 <h4>Disabled</h4>
                 <p>To disable the radio button add <span class="highlight">disabled</span> attribute.</p>
@@ -1140,14 +1121,13 @@
                         Disabled radio button
                     </div>
                 </sm-radio>
-                <pre>
-<code>
-&lt;sm-radio disabled&gt;
-    &lt;div&gt;Disabled switch&lt;/div&gt;
-&lt;/sm-radio&gt;           
-</code>
-</pre>
-
+                <syntax-highlighter>
+                    <sm-radio disabled>
+                        <div style="margin-left: 0.5rem;">
+                            Disabled radio button
+                        </div>
+                    </sm-radio>
+                </syntax-highlighter>
                 <h2>Attributes</h2>
                 <p>All the native HTML radio attributes are valid</p>
                 <section class="table">
@@ -1196,31 +1176,24 @@
                     <sm-option value="2">option2</sm-option>
                     <sm-option value="3">option3</sm-option>
                 </sm-select>
-                <pre>
-<code>
-&lt;sm-select&gt;
-    &lt;sm-option value="1"&gt;option1&lt;/sm-option&gt;
-    &lt;sm-option value="2"&gt;option2&lt;/sm-option&gt;
-    &lt;sm-option value="3"&gt;option3&lt;/sm-option&gt;
-&lt;/sm-select&gt;  
-</code>
-</pre>
+                <syntax-highlighter>
+                    <sm-select id="my_select">
+                        <sm-option value="1">option1</sm-option>
+                        <sm-option value="2">option2</sm-option>
+                        <sm-option value="3">option3</sm-option>
+                    </sm-select>
+                </syntax-highlighter>
                 <h2>Usage</h2>
-                <pre>
-<code>
-&lt;sm-select id="my_select"&gt;
-    &lt;sm-option value="1"&gt;option1&lt;/sm-option&gt;
-    &lt;sm-option value="2"&gt;option2&lt;/sm-option&gt;
-    &lt;sm-option value="3"&gt;option3&lt;/sm-option&gt;
-&lt;/sm-select&gt;   
-&lt;script&gt;
-    const mySelect = document.getElementById('my_select')
-    mySelect.addEventListener('change', event =&gt; {
-        console.log(event.target.value) // logs out value of selected option
-    })
-&lt;/script&gt;
-</code>
-</pre>
+                <syntax-highlighter>
+                    <template>
+                        <script>
+                            const mySelect = document.getElementById('my_select')
+                            mySelect.addEventListener('change', event => {
+                                console.log(event.target.value) // logs out value of selected option
+                            })
+                        </script>
+                    </template>
+                </syntax-highlighter>
                 <h2>States</h2>
                 <h4>Disabled</h4>
                 <p>To disable the select add <span class="highlight">disabled</span> attribute.</p>
@@ -1229,13 +1202,11 @@
                     <sm-option value="2">option2</sm-option>
                     <sm-option value="3">option3</sm-option>
                 </sm-select>
-                <pre>
-<code>
-&lt;sm-select disabled&gt;
-    &lt;!-- Options --&gt;
-&lt;/sm-select&gt;   
-</code>
-</pre>
+                <syntax-highlighter>
+                    <sm-select disabled>
+                        <!-- Options -->
+                    </sm-select>
+                </syntax-highlighter>
                 <h2>Supported events</h2>
                 <p>These are the events that will be fired when component state changes</p>
                 <section class="table">
@@ -1260,11 +1231,9 @@
                     Just drop the <span class="highlight">sm-spinner</span> in markup where you want to show the spinner
                 </p>
                 <sm-spinner></sm-spinner>
-                <pre>
-<code>
-&lt;sm-spinner&gt;&lt;/sm-spinner&gt;
-</code>
-</pre>
+                <syntax-highlighter>
+                    <sm-spinner></sm-spinner>
+                </syntax-highlighter>
             </section>
 
             <section id="switch_page" class="page hide-completely">
@@ -1289,15 +1258,13 @@
                         On switch
                     </div>
                 </sm-switch>
-                <pre>
-<code>
-&lt;sm-switch checked&gt;
-    &lt;div slot="left"&gt;
-        On switch
-    &lt;/div&gt;
-&lt;/sm-switch&gt;    
-</code>
-</pre>
+                <syntax-highlighter>
+                    <sm-switch checked>
+                        <div slot="left">
+                            On switch
+                        </div>
+                    </sm-switch>
+                </syntax-highlighter>
                 <h4>Disabled</h4>
                 <p>To disable the switch add <span class="highlight">disabled</span> attribute.</p>
                 <sm-switch disabled>
@@ -1305,15 +1272,13 @@
                         Disabled checkbox
                     </div>
                 </sm-switch>
-                <pre>
-<code>
-&lt;sm-switch disabled&gt;
-    &lt;div slot="left"&gt;
-        Disabled switch
-    &lt;/div&gt;
-&lt;/sm-switch&gt;    
-</code>
-</pre>
+                <syntax-highlighter>
+                    <sm-switch disabled>
+                        <div slot="left">
+                            Disabled checkbox
+                        </div>
+                    </sm-switch>
+                </syntax-highlighter>
 
                 <h2>Attributes</h2>
                 <p>All the native HTML checkbox attributes are valid</p>
@@ -1357,16 +1322,14 @@
                     <sm-chip value="price">Price</sm-chip>
                     <sm-chip value="rating">Rating</sm-chip>
                 </sm-chips>
-                <pre>
-<code>
-&lt;sm-chips id="sort_by"&gt;
-    &lt;sm-chip value="relevance" selected&gt;Relevance&lt;/sm-chip&gt;
-    &lt;sm-chip value="popularity"&gt;Popularity&lt;/sm-chip&gt;
-    &lt;sm-chip value="price"&gt;Price&lt;/sm-chip&gt;
-    &lt;sm-chip value="rating"&gt;Rating&lt;/sm-chip&gt;
-&lt;/sm-chips&gt; 
-</code>
-</pre>
+                <syntax-highlighter>
+                    <sm-chips id="sort_by">
+                        <sm-chip value="relevance" selected>Relevance</sm-chip>
+                        <sm-chip value="popularity">Popularity</sm-chip>
+                        <sm-chip value="price">Price</sm-chip>
+                        <sm-chip value="rating">Rating</sm-chip>
+                    </sm-chips>
+                </syntax-highlighter>
                 <h2>Custom attributes</h2>
                 <section class="table">
                     <div class="tr">
@@ -1412,22 +1375,22 @@
                     </div>
                 </section>
                 <h2>Usage</h2>
-                <pre>
-<code>
-&lt;sm-chips id="sort_by"&gt;
-    &lt;sm-chip value="relevance" selected&gt;Relevance&lt;/sm-chip&gt;
-    &lt;sm-chip value="popularity"&gt;Popularity&lt;/sm-chip&gt;
-    &lt;sm-chip value="price"&gt;Price&lt;/sm-chip&gt;
-    &lt;sm-chip value="rating"&gt;Rating&lt;/sm-chip&gt;
-&lt;/sm-chips&gt; 
-&lt;script&gt;
-    const sortBy = document.getElementById('sort_by')
-    sortBy.addEventListener('change', event =&gt; {
-        console.log(event.target.value) // logs out value of selected option
-    })
-&lt;/script&gt;
-</code>
-</pre>
+                <syntax-highlighter>
+                    <template>
+                        <sm-chips id="sort_by">
+                            <sm-chip value="relevance" selected>Relevance</sm-chip>
+                            <sm-chip value="popularity">Popularity</sm-chip>
+                            <sm-chip value="price">Price</sm-chip>
+                            <sm-chip value="rating">Rating</sm-chip>
+                        </sm-chips>
+                        <script>
+                            const sortBy = document.getElementById('sort_by')
+                            sortBy.addEventListener('change', event => {
+                                console.log(event.target.value) // logs out value of selected option
+                            })
+                        </script>
+                    </template>
+                </syntax-highlighter>
             </section>
 
             <section id="tabs_page" class="page hide-completely">
@@ -1453,26 +1416,26 @@
                     </section>
                 </sm-tab-panels>
                 <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>
+                <syntax-highlighter>
+                    <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>
+                </syntax-highlighter>
                 <p>
                     There are three components that together make the tabs components.
                 <ol>
@@ -1484,14 +1447,12 @@
 
                 <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>
+                <syntax-highlighter>
+                    <sm-tab-header target="tab1">
+                        <sm-tab>Audio</sm-tab>
+                        <sm-tab>Video</sm-tab>
+                    </sm-tab-header>
+                </syntax-highlighter>
                 <h2>Supported attributes</h2>
                 <section class="table">
                     <div class="tr">
@@ -1530,16 +1491,13 @@
                             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>
+                <syntax-highlighter>
+                    <sm-tab-header variant="tab" target="tab2">
+                        <sm-tab>Audio</sm-tab>
+                        <sm-tab>Video</sm-tab>
+                    </sm-tab-header>
+                </syntax-highlighter>
             </section>
-
             <section id="tags_input_page" class="page hide-completely">
                 <h1 class="page__title">Tags input</h1>
                 <p>
@@ -1548,11 +1506,10 @@
                 </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>
+                <syntax-highlighter>
+                    <tags-input placeholder="Add tags..."></tags-input>
+                </syntax-highlighter>
+
                 <h2>Attributes</h2>
                 <section class="table">
                     <div class="tr">
@@ -1582,7 +1539,8 @@
                     <div class="tr">
                         <div><span class="highlight">--background</span></div>
                         <p>
-                            Defines background of tags-input. Any valid CSS background property values are supported.
+                            Defines background of tags-input. Any valid CSS background property values are
+                            supported.
                         </p>
                     </div>
                     <div class="tr">
@@ -1613,39 +1571,35 @@
                     </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>
-
+                <syntax-highlighter>
+                    <template>
+                        <tags-input id="get_tags" placeholder="Add tags..."></tags-input>
+                        <script>
+                            const getTags = document.getElementById('get_tags')
+                            console.log(getTags.value); /* returns an array of string that are user input */
+                        </script>
+                    </template>
+                </syntax-highlighter>
             </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
+                    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="4"></sm-textarea>
-                <pre>
-<code>
-&lt;sm-textarea id="my_textarea" placeholder="Add some text here..." rows="4"&gt;&lt;/sm-textarea&gt;
-</code>
-</pre>
+                <syntax-highlighter>
+                    <sm-textarea id="my_textarea" placeholder="Add some text here..." rows="4"></sm-textarea>
+                </syntax-highlighter>
                 <h2>Variants</h2>
-                <p><span class="highlight">outlined</span> is only one styled variation. Default is filled which doesn't
+                <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>
+                <syntax-highlighter>
+                    <sm-textarea placeholder="This is a textarea" variant="outlined"></sm-textarea>
+                </syntax-highlighter>
                 <h2>Supported Attributes</h2>
                 <p>All the native HTML textarea attributes are valid.</p>
                 <section class="table">
@@ -1741,42 +1695,44 @@
                     </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>
+                <syntax-highlighter>
+                    <template>
+                        <sm-textarea placeholder="This is a textarea" id="my_textarea"></sm-textarea>
+                        <script>
+                            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 */
+                            })
+                        </script>
+                    </template>
+                </syntax-highlighter>
             </section>
             <section id="text_field_page" class="page hide-completely">
                 <h1 class="page__title">Text field</h1>
                 <p>
-                    This component can be used in scenarios where you need to display a name or something that user
+                    This component can be used in scenarios where you need to display a name or something that
+                    user
                     should be able to edit directly
                     in-place instead of going to other UI element.
                 </p>
                 <h2>Interactive demo</h2>
                 <text-field value="John doe"></text-field>
                 <h2>Usage</h2>
-                <pre>
-<code>
-&lt;text-field id="name_field" value="John doe"&gt;&lt;/text-field&gt;
-&lt;script&gt;
-    const nameField = document.getElementById('name_field')
-    nameField.addEventListener('change', event =&gt; {
-        console.log(event.target.value) // logs out new value set by user
-        console.log(nameField.value) // Accessing value directly with getter
-    })
-&lt;/script&gt;
-</code>
-</pre>
+                <syntax-highlighter>
+                    <template>
+                        <text-field id="name_field" value="John doe"></text-field>
+                        <script>
+                            const nameField = document.getElementById('name_field')
+                            nameField.addEventListener('change', event => {
+                                console.log(event.target.value) // logs out new value set by user
+                                console.log(nameField.value) // Accessing value directly with getter
+                            })
+                        </script>
+                    </template>
+                </syntax-highlighter>
+
                 <h2>Custom attributes</h2>
                 <section class="table">
                     <div class="tr">
@@ -1821,47 +1777,46 @@
                     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
+                    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>
-</pre>
+                <syntax-highlighter>
+                    <theme-toggle></theme-toggle>
+                </syntax-highlighter>
 
                 <h2>CSS</h2>
-                <pre>
-<code>
-&lt;style&gt;
-    body ,
-    body *{
-        /* Set CSS variables according to light theme or default theme*/
-        --accent-color: #0D7377;
-        --text-color: 17, 17, 17;
-        --background-color: 255, 255, 255;
-        --danger-color: red;
-    }
-    body[data-theme='dark'],
-    body[data-theme='dark'] *{
-        /* Set CSS variables according to dark theme */
-        --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);
-    }
-    body{
-        color: rgba(var(--text-color), 1);
-        background: rgba(var(--background-color), 1);
-    }
-&lt;/style&gt;
-</code>
-</pre>
+                <syntax-highlighter>
+                    <style>
+                        body,
+                        body * {
+                            /* Set CSS variables according to light theme or default theme*/
+                            --accent-color: #0D7377;
+                            --text-color: 17, 17, 17;
+                            --background-color: 255, 255, 255;
+                            --danger-color: red;
+                        }
 
+                        body[data-theme='dark'],
+                        body[data-theme='dark'] * {
+                            /* Set CSS variables according to dark theme */
+                            --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);
+                        }
+
+                        body {
+                            color: rgba(var(--text-color), 1);
+                            background: rgba(var(--background-color), 1);
+                        }
+                    </style>
+                </syntax-highlighter>
 
                 <h2>Styling</h2>
                 <p>CSS variables used to style this component</p>
@@ -1893,24 +1848,27 @@
                     <div class="tr">
                         <div><span class="highlight">themechange</span></div>
                         <p>
-                            Whenever theme is toggled by user the <span class="highlight">themechange</span> event is
+                            Whenever theme is toggled by user the <span class="highlight">themechange</span>
+                            event
+                            is
                             fired. <br>
-                            You can listen to this event and access the current value of toggle with event object <span
-                                class="highlight">event.detail.theme</span>
+                            You can listen to this event and access the current value of toggle with event
+                            object
+                            <span class="highlight">event.detail.theme</span>
                         </p>
                     </div>
                 </section>
-                <pre>
-<code>
-&lt;theme-toggle id="my_theme_toggle"&gt;&lt;/theme-toggle&gt;
-&lt;script&gt;
-    const myThemeToggle = document.getElementById('my_theme_toggle')
-    myThemeToggle.addEventListener('themechange', event =&gt; {
-        console.log(event.detail.theme) // logs out current theme ( light / dark )
-    })
-&lt;/script&gt;
-</code>
-</pre>
+                <syntax-highlighter>
+                    <template>
+                        <theme-toggle id="my_theme_toggle"></theme-toggle>
+                        <script>
+                            const myThemeToggle = document.getElementById('my_theme_toggle')
+                            myThemeToggle.addEventListener('themechange', event => {
+                                console.log(event.detail.theme) // logs out current theme ( light / dark )
+                            })
+                        </script>
+                    </template>
+                </syntax-highlighter>
             </section>
         </article>
     </main>
@@ -1924,7 +1882,6 @@
             <span class="comp-checkbox__title"></span>
         </sm-checkbox>
     </template>
-    <script src="assets/prism.js" defer></script>
     <script src="dist/button.min.js" defer></script>
     <script src="dist/carousel.min.js" defer></script>
     <script src="dist/checkbox.min.js" defer></script>
@@ -1946,6 +1903,7 @@
     <script src="dist/text-field.min.js" defer></script>
     <script src="dist/textarea.min.js" defer></script>
     <script src="dist/theme-toggle.min.js" defer></script>
+    <script src="dist/syntax-highlighter.js"></script>
 
     <script id="default_ui_library">
         const domRefs = {};
@@ -2014,14 +1972,13 @@
         if (!navigator.onLine)
             notify(
                 "There seems to be a problem connecting to the internet, Please check you internet connection.",
-                "error",
-                { sound: true }
+                "error"
             );
         window.addEventListener("offline", () => {
             notify(
                 "There seems to be a problem connecting to the internet, Please check you internet connection.",
                 "error",
-                { pinned: true, sound: true }
+                { pinned: true }
             );
         });
         window.addEventListener("online", () => {
@@ -2093,7 +2050,7 @@
 
         //Function for displaying toast notifications. pass in error for mode param if you want to show an error.
         function notify(message, mode, options = {}) {
-            const { pinned = false, sound } = options
+            const { pinned = false } = options
             if (mode === "error") console.error(message);
             let icon
             switch (mode) {
@@ -2105,10 +2062,6 @@
                     break;
             }
             getRef("notification_drawer").push(message, { pinned, icon });
-            if (navigator.onLine && sound) {
-                getRef("notification_sound").currentTime = 0;
-                getRef("notification_sound").play();
-            }
         }
 
         const currentYear = new Date().getFullYear();
diff --git a/components/index.min.html b/components/index.min.html
new file mode 100644
index 0000000..18825b4
--- /dev/null
+++ b/components/index.min.html
@@ -0,0 +1 @@
+<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>SM Components</title> <meta name="description" content="SM-Components. collection of web components"> <link rel="stylesheet" href="css/main.min.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&family=Roboto+Mono&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet"> </head> <body class="hide-completely">  <main> <header id="main_header" class="flex align-center space-between"> <button id="side_nav_button" class="interact" onclick='getRef("side_nav").open()' aria-label="Hamburger menu toggle button"> <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="M16 18v2H5v-2h11zm5-7v2H3v-2h18zm-2-7v2H8V4h11z"/> </svg> </button> <h4>SM Components</h4>  </header> <hamburger-menu id="side_nav"> <h4>Getting Started</h4> <ul class="list"> <li> <a href="#overview_page" class="list__item list__item--active interact"> Overview </a> </li> <li> <a href="#quick_start_page" class="list__item interact"> Quick start </a> </li> <li> <a href="#global_styling_page" class="list__item interact"> Global styling </a> </li> </ul> <h4>Components</h4>  </hamburger-menu> <article class="right language-html"> <section id="overview_page" class="page"> <div> <h5 class="color-0-8 weight-500">Total components</h5>  </div> <div> <h1 class="page__title">Overview</h1> <div class="grid gap-2"> <div class="div"> <p> Component-based design is the cornerstone of the modern UI development process. With rise of more UI frameworks every day, the web platform has a serious issue of fragmentation and portability. </p> <p> Web components to the rescue! This is the collection of web components (WC here forward) that we use at RanchiMall, especially since we are a framework-less development environment so this was a logical choice. </p> </div> <div class="grid gap-1"> <h3>Features</h3> <ul class="grid gap-0-5"> <li>Native and Cross framework support</li> <li>Encapsulated style and functionality</li> <li>Easy styling</li> <li>Adaptive scaling </li> </ul> </div> </div> </div> </section> <section id="quick_start_page" class="page hide-completely"> <h1 class="page__title">Quick Start</h1> <ol> <li> To start using these components, Select the ones you want to add to your project. You can un-check 'get minified' to get the readable code. </li> <li> Now you can download or copy the source code for selected components. <strong class="important"> You might get a warning while downloading like this file is not safe, please allow the download as this is caused when downloading files with '.js' extension. These components are 100% safe to use. </strong> </li> <li> Link the downloaded js before <span class="highlight">&lt;/body&gt;</span> <syntax-highlighter> <script src=".../components.js"></script> </syntax-highlighter> </li> </ol> <div class="grid grid-3 gap-0-5 align-center"> <sm-checkbox id="get_minified" checked> <span class="comp-checkbox__title"> Get minified </span> </sm-checkbox> <sm-button onclick="selectAll()">Select all</sm-button> <sm-button onclick="clearAll()">Clear all</sm-button> </div>  <div class="flex align-center space-between"> <sm-button onclick="copySourceCode()">Copy source code</sm-button> <sm-button variant="primary" onclick="downloadComponents()">Download JS file</sm-button> </div> </section> <section id="global_styling_page" class="page hide-completely"> <h1 class="page__title">Global styling</h1> <p>These components use <strong>CSS variables</strong> to customize styling. they share some CSS variables that make global styling easier. <br> Of course you can set these variables at individual component CSS rule set level. </p> <h4>Some common CSS variables and their use</h4> <section class="table"> <div class="tr"> <h4 class="table__heading">Variable</h4> <h4 class="table__heading">Use</h4> </div> <div class="tr"> <div><span class="highlight">--accent-color</span></div> <p>Color which will be used for denoting active state</p> </div> <div class="tr"> <div><span class="highlight">--text-color</span></div> <p> default text color for all components. <br> ( Use comma separated rgb values. e.g 17, 17, 17 ) </p> </div> <div class="tr"> <div><span class="highlight">--background-color</span></div> <p> default background color for all components. <br> ( Use comma separated rgb values. e.g 255, 255, 255 ) </p> </div> <div class="tr"> <div><span class="highlight">--danger-color</span></div> <p>Used for error/invalid state</p> </div> </section> </section> <section id="button_page" class="page hide-completely"> <h1 class="page__title">Buttons</h1> <sm-button>Default button</sm-button> <h2>Variants</h2> <p>These are styled variations of base component</p> <section class="table"> <div class="tr"> <h4 class="table__heading">Variant type</h4> <h4 class="table__heading">Example</h4> </div> <div class="tr"> <div><span class="highlight">primary</span></div> <p> <sm-button variant="primary">Primary</sm-button> </p> </div> <div class="tr"> <div><span class="highlight">outlined</span></div> <p> <sm-button variant="outlined">Outlined</sm-button> </p> </div> <div class="tr"> <div><span class="highlight">no--outline</span></div> <p> <sm-button variant="no-outline">No outline</sm-button> </p> </div> </section> <h4>How to define variant</h4> <syntax-highlighter> <sm-button variant="primary">Primary</sm-button> <sm-button variant="outlined">Outlined</sm-button> <sm-button variant="no-outline">No outline</sm-button> </syntax-highlighter> <h2>States</h2> <h4>Disabled</h4> <p>To disable the button add <span class="highlight">disabled</span> attribute.</p> <sm-button disabled>Disabled</sm-button> <syntax-highlighter> <sm-button disabled>Disabled</sm-button> </syntax-highlighter> <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">disabled</span> (boolean)</div> <p> Button is disabled by default. all the interactions are disabled </p> </div> <div class="tr"> <div><span class="highlight">type</span> (string)</div> <p> Has values <span class="highlight">submit</span> <span class="highlight">reset</span> <br> Can only used withing <spna class="highlight">sm-form</spna> to submit or reset the form. </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> Define background of button. accepts all values of CSS background property </p> </div> <div class="tr"> <div><span class="highlight">--border-radius</span></div> <p> Set curvature at button corners </p> </div> <div class="tr"> <div><span class="highlight">--padding</span></div> <p> Specify padding of button </p> </div> </section> </section> <section id="carousel_page" class="page hide-completely"> <h1 class="page__title">Carousel</h1> <p> Carousel is a very common UI component primarily used to display images or slides. This carousel switches user interactions based on type of input devices present. For hover capable devices slides can be scrolled with buttons and on touch enabled devices swipe can be used. </p> <h2>Interactive demo</h2> <sm-carousel indicator> <div class="card"> <h3>Title</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio.</p> </div> <div class="card"> <h3>Title</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio.</p> </div> <div class="card"> <h3>Title</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio.</p> </div> <div class="card"> <h3>Title</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, optio.</p> </div> </sm-carousel> <syntax-highlighter> <sm-carousel align-items="start" indicator> </sm-carousel> </syntax-highlighter> <h2>Custom attributes</h2> <p>These attributes cane used to customize carousel behaviour and features</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">align-items</span></div> <p> Has values <span class="highlight">start</span> <span class="highlight">center</span> <span class="highlight">end</span> Specifies how carousel items should align. default is <span class="highlight">center</span>. </p> </div> <div class="tr"> <div><span class="highlight">indicator</span> (boolean)</div> <p> if added carousel shows dot indicators of carousel items. </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">--active-indicator-color</span></div> <p> Defines background color of active slide indicator </p> </div> <div class="tr"> <div><span class="highlight">--nav-background-color</span></div> <p> Defines background color of carousel navigation buttons </p> </div> <div class="tr"> <div><span class="highlight">--nav-box-shadow</span></div> <p> Defines box shadow of carousel navigation buttons </p> </div> <div class="tr"> <div><span class="highlight">--nav-icon-fill</span></div> <p> Defines fill of arrow icon on carousel navigation buttons </p> </div> </section> </section> <section id="checkbox_page" class="page hide-completely"> <h1 class="page__title">Checkbox</h1> <p><span class="highlight">sm-checkbox</span> supports all the attributes of native HTML5 checkbox</p> <strong> linking some HTML element with <span class="highlght">sm-checbox</span> using <span class="highlight">label</span> tag won't work. <br> Add the element inside the opening and closing checkbox tag. </strong> <h2>Interactive demo</h2> <sm-checkbox id="checkbox"> <div style="margin-left:.5rem"> Check this box </div> </sm-checkbox> <h2>States</h2> <h4>Checked</h4> <p>To make checkbox checked by default add <span class="highlight">checked</span> attribute.</p> <sm-checkbox checked> <div style="margin-left:.5rem"> Checked checkbox </div> </sm-checkbox> <syntax-highlighter> <sm-checkbox checked> <div style="margin-left:.5rem"> Checked checkbox </div> </sm-checkbox> </syntax-highlighter> <h4>Disabled</h4> <p>To disable the checkbox add <span class="highlight">disabled</span> attribute.</p> <sm-checkbox disabled> <div style="margin-left:.5rem"> Disabled checkbox </div> </sm-checkbox> <syntax-highlighter> <sm-checkbox disabled> <div style="margin-left:.5rem"> Disabled checkbox </div> </sm-checkbox> </syntax-highlighter> <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="this wiil be copied"> <div>this will be copied</div> </sm-copy> <syntax-highlighter> <sm-copy value="this wiil be copied"> <div>this will be copied</div> </sm-copy> </syntax-highlighter> <h2>Usage</h2> <syntax-highlighter> <template>  <script>const textToCopy=document.getElementById("text_to_copy");textToCopy.value="Different value"</script> </template> </syntax-highlighter> <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>Supported 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">copy</span></div> <p> Fired when text is copied by user. </p> </div> </section> </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> <syntax-highlighter> <file-input multiple>Select multiple files</file-input> </syntax-highlighter> <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-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> <syntax-highlighter> <template> <hamburger-menu id="navigation_drawer"> </hamburger-menu> <script>const navigationDrawer=document.getElementById("navigation_drawer"),navigationDrawerButton=document.getElementById("navigation_drawer_button");navigationDrawerButton.addEventListner("click",(n=>{navigationDrawer.open()}))</script> </template> </syntax-highlighter> </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> <syntax-highlighter>  </syntax-highlighter> <h2>Variants</h2> <p><span class="highlight">outlined</span> is only one styled variation. Default is filled which doesn't require variant specified.</p>  <syntax-highlighter>  </syntax-highlighter> <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>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 property of input. Any valid CSS background values are supported. </p> </div> <div class="tr"> <div><span class="highlight">--border-radius</span></div> <p> Sets border-radius of input. </p> </div> <div class="tr"> <div><span class="highlight">--icon-gap</span></div> <p> Sets space between input icon and input box. Default is "0.5rem" </p> </div> <div class="tr"> <div><span class="highlight">--font-size</span></div> <p> Sets font size of input text. Default is "1rem". </p> </div> <div class="tr"> <div><span class="highlight">--padding</span></div> <p> Sets padding around whole input box including icon. </p> </div> <div class="tr"> <div><span class="highlight">--width</span></div> <p> Sets width of input 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">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> <syntax-highlighter> <template> <script>function myValidation(n){return Boolean}document.getElelementById("my_input").customValidation=myValidation</script> </template> </syntax-highlighter> </section> <section id="menu_page" class="page hide-completely"> <h1 class="page__title">Menu</h1> <h2>Interactive demo</h2> <sm-menu> <menu-option>first option</menu-option> <menu-option>second option</menu-option> <menu-option>third option</menu-option> </sm-menu> <syntax-highlighter> <sm-menu> <menu-option>first option</menu-option> <menu-option>second option</menu-option> <menu-option>third option</menu-option> </sm-menu> </syntax-highlighter> <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">align-options</span> (string)</div> <p> Specifies alignment of options relative to left or right edge of menu button. <br> Valid values are <span class="highlight">left</span> <span class="highlight">right</span>. </p> </div> </section> <h2>Supported 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">click</span></div> <p> To setup functions on click event. use standard method to add event listeners on options themselves or delegate event on menu component level. </p> </div> </section> </section> <section id="notifications_page" class="page hide-completely"> <h1 class="page__title">Notifications</h1> <p> To start using notifications add the <span class="highlight">&lt;sm-notifications&gt;</span> at top level of markup like just below starting <span class="highlight">&lt;body&gt;</span> tag. </p> <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">push()</span></div> <p> Used to display notifications with two parameters. <br> Notification text and notification options. </p> </div> <div class="tr"> <div><span class="highlight">clearAll()</span></div> <p> Removes all the notifications present in notification drawer. </p> </div> </section> <h2>Push() options</h2> <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">icon</span> (svg)</div> <p> To display custom icon with notification icon option can be used. </p> </div> <div class="tr"> <div><span class="highlight">pinned</span> (Boolean)</div> <p> If set <span class="highlight">true</span> notifications won't disappear after some time. they need to be dismissed by user manually. </p> </div> </section> <h2>Interactive demo</h2> <sm-button onclick='getRef("notification_drawer").push("This is a notification",{pinned:!0})'> push pinned notification</sm-button> <syntax-highlighter> <template>  <script>const notificationDrawer=document.getElementById("notification_drawer");notificationDrawer.push("This is a notification",{pinned:!0})</script> </template> </syntax-highlighter> </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> <syntax-highlighter> <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> </syntax-highlighter> <h2>Usage</h2> <syntax-highlighter> <template> <sm-popup id="my_popup"> </sm-popup> <sm-button id="show_popup_button">Show popup</sm-button> <script>const myPopup=document.getElementById("my_popup");document.getElementById("show_popup_button").addEventListener("click",(o=>{myPopup.show({options:options})}))</script> </template> </syntax-highlighter> <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> <syntax-highlighter> <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> </syntax-highlighter> <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> <syntax-highlighter> <sm-radio checked> <div style="margin-left:.5rem"> Checked radio button </div> </sm-radio> </syntax-highlighter> <h4>Disabled</h4> <p>To disable the radio button add <span class="highlight">disabled</span> attribute.</p> <sm-radio disabled> <div style="margin-left:.5rem"> Disabled radio button </div> </sm-radio> <syntax-highlighter> <sm-radio disabled> <div style="margin-left:.5rem"> Disabled radio button </div> </sm-radio> </syntax-highlighter> <h2>Attributes</h2> <p>All the native HTML radio 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, radio button is set to checked state as default. </p> </div> <div class="tr"> <div><span class="highlight">disabled</span> (boolean)</div> <p> If present radio button is set to disabled state. all the interactions are disabled </p> </div> <div class="tr"> <div><span class="highlight">name</span> (string)</div> <p> Can be used to group radio buttons with same name. only one radio button will be active in a group. </p> </div> <div class="tr"> <div><span class="highlight">value</span> (string)</div> <p> Sets value of radio button which can be accessed by value property with JS </p> </div> </section> </section> <section id="select_page" class="page hide-completely"> <h1 class="page__title">Select</h1> <p> <span class="highlight">&lt;sm-select&gt;</span> is very similar to starndatd HTML5 select and it's markup stucture is also identical. </p> <h2>Interactive demo</h2> <sm-select> <sm-option value="1">option1</sm-option> <sm-option value="2">option2</sm-option> <sm-option value="3">option3</sm-option> </sm-select> <syntax-highlighter> <sm-select id="my_select"> <sm-option value="1">option1</sm-option> <sm-option value="2">option2</sm-option> <sm-option value="3">option3</sm-option> </sm-select> </syntax-highlighter> <h2>Usage</h2> <syntax-highlighter> <template> <script>const mySelect=document.getElementById("my_select");mySelect.addEventListener("change",(e=>{console.log(e.target.value)}))</script> </template> </syntax-highlighter> <h2>States</h2> <h4>Disabled</h4> <p>To disable the select add <span class="highlight">disabled</span> attribute.</p> <sm-select disabled> <sm-option value="1">option1</sm-option> <sm-option value="2">option2</sm-option> <sm-option value="3">option3</sm-option> </sm-select> <syntax-highlighter> <sm-select disabled> </sm-select> </syntax-highlighter> <h2>Supported events</h2> <p>These are the events that will be fired when component state changes</p> <section class="table"> <div class="tr"> <h4 class="table__heading">Event</h4> <h4 class="table__heading">Description</h4> </div> <div class="tr"> <div><span class="highlight">change</span></div> <p> Whenever a different options is selected by user the this event is fired. <br> You can listen to this event and access the current value with event object <span class="highlight">event.target.value</span> </p> </div> </section> </section> <section id="spinner_page" class="page hide-completely"> <h1 class="page__title">Spinner</h1> <p> Just drop the <span class="highlight">sm-spinner</span> in markup where you want to show the spinner </p>  <syntax-highlighter>  </syntax-highlighter> </section> <section id="switch_page" class="page hide-completely"> <h1 class="page__title">Switch</h1> <p><span class="highlight">sm-switch</span> supports all the attributes of native HTML5 checkbox</p> <strong> linking some HTML element with <span class="highlght">sm-switch</span> using <span class="highlight">label</span> tag won't work. <br> Add the element inside the opening and closing sm-switch tag. </strong> <h2>Interactive demo</h2> <sm-switch id="my_switch"> <div slot="left"> Turn the switch </div> </sm-switch> <h2>States</h2> <h4>Checked</h4> <p>To make switch turned on by default add <span class="highlight">checked</span> attribute.</p> <sm-switch checked> <div slot="left"> On switch </div> </sm-switch> <syntax-highlighter> <sm-switch checked> <div slot="left"> On switch </div> </sm-switch> </syntax-highlighter> <h4>Disabled</h4> <p>To disable the switch add <span class="highlight">disabled</span> attribute.</p> <sm-switch disabled> <div slot="left"> Disabled checkbox </div> </sm-switch> <syntax-highlighter> <sm-switch disabled> <div slot="left"> Disabled checkbox </div> </sm-switch> </syntax-highlighter> <h2>Attributes</h2> <p>All the native HTML checkbox attributes are valid</p> <section class="table"> <div class="tr"> <h4 class="table__heading">Attribute</h4> <h4 class="table__heading">Description</h4> </div> <div class="tr"> <div><span class="highlight">checked</span> (boolean)</div> <p> If present, switch is set to checked state as default. </p> </div> <div class="tr"> <div><span class="highlight">disabled</span> (boolean)</div> <p> If present switch is set to disabled state. all the interactions are disabled </p> </div> <div class="tr"> <div><span class="highlight">value</span> (string)</div> <p> Sets value of switch which can be accessed by value property with JS </p> </div> </section> </section> <section id="chips_page" class="page hide-completely"> <h1 class="page__title">Chips</h1> <p> This is a modern interpretation of classical HTML <span class="highlight">select</span> tag. More suitable for touch devices, </p> <h2>Interactive demo</h2> <span>Sort by </span> <sm-chips id="sort_by"> <sm-chip value="relevance" selected>Relevance</sm-chip> <sm-chip value="popularity">Popularity</sm-chip> <sm-chip value="price">Price</sm-chip> <sm-chip value="rating">Rating</sm-chip> </sm-chips> <syntax-highlighter> <sm-chips id="sort_by"> <sm-chip value="relevance" selected>Relevance</sm-chip> <sm-chip value="popularity">Popularity</sm-chip> <sm-chip value="price">Price</sm-chip> <sm-chip value="rating">Rating</sm-chip> </sm-chips> </syntax-highlighter> <h2>Custom attributes</h2> <section class="table"> <div class="tr"> <h4 class="table__heading">Attribute</h4> <h4 class="table__heading">Description</h4> </div> <div class="tr"> <div><span class="highlight">multiline</span> ( Boolean )</div> <p> If present, options will wrap around instead of overflowing horizontally. </p> </div> </section> <h2>Styling</h2> <p>CSS variables used to style this component</p> <section class="table"> <div class="tr"> <h4 class="table__heading">Variable</h4> <h4 class="table__heading">Description</h4> </div> <div class="tr"> <div><span class="highlight">--gap</span></div> <p> Defines space between options. Default is "0.5rem". </p> </div> </section> <h2>Supported events</h2> <p>These are the events that will be fired when component state changes</p> <section class="table"> <div class="tr"> <h4 class="table__heading">Event</h4> <h4 class="table__heading">Description</h4> </div> <div class="tr"> <div><span class="highlight">change</span></div> <p> Whenever a different options is selected by user the this event is fired. <br> You can listen to this event and access the current value with event object <span class="highlight">event.target.value</span> </p> </div> </section> <h2>Usage</h2> <syntax-highlighter> <template> <sm-chips id="sort_by"> <sm-chip value="relevance" selected>Relevance</sm-chip> <sm-chip value="popularity">Popularity</sm-chip> <sm-chip value="price">Price</sm-chip> <sm-chip value="rating">Rating</sm-chip> </sm-chips> <script>const sortBy=document.getElementById("sort_by");sortBy.addEventListener("change",(e=>{console.log(e.target.value)}))</script> </template> </syntax-highlighter> </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>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>Usage</h2> <syntax-highlighter> <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> </syntax-highlighter> <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>  <h3>sm-tab-header</h3> <p>This is the first half of tabs that include the tabs header and actual tab buttons.</p> <syntax-highlighter> <sm-tab-header target="tab1"> <sm-tab>Audio</sm-tab> <sm-tab>Video</sm-tab> </sm-tab-header> </syntax-highlighter> <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>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> <syntax-highlighter> <sm-tab-header variant="tab" target="tab2"> <sm-tab>Audio</sm-tab> <sm-tab>Video</sm-tab> </sm-tab-header> </syntax-highlighter> </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>  <syntax-highlighter>  </syntax-highlighter> <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> <syntax-highlighter> <template>  <script>const getTags=document.getElementById("get_tags");console.log(getTags.value)</script> </template> </syntax-highlighter> </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>  <syntax-highlighter>  </syntax-highlighter> <h2>Variants</h2> <p><span class="highlight">outlined</span> is only one styled variation. Default is filled which doesn't require variant specified.</p>  <syntax-highlighter>  </syntax-highlighter> <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> <syntax-highlighter> <template>  <script>const myTextarea=document.getElelementById("my_textarea");myTextarea.value="some string",myTextarea.addEventListener("input",(e=>{e.target.value}))</script> </template> </syntax-highlighter> </section> <section id="text_field_page" class="page hide-completely"> <h1 class="page__title">Text field</h1> <p> This component can be used in scenarios where you need to display a name or something that user should be able to edit directly in-place instead of going to other UI element. </p> <h2>Interactive demo</h2>  <h2>Usage</h2> <syntax-highlighter> <template>  <script>const nameField=document.getElementById("name_field");nameField.addEventListener("change",(e=>{console.log(e.target.value),console.log(nameField.value)}))</script> </template> </syntax-highlighter> <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">disabled</span> ( Boolean )</div> <p> If present, text can't be edited. </p> </div> <div class="tr"> <div><span class="highlight">value</span> ( string )</div> <p> Set initial text that can be edited by user. </p> </div> </section> <h2>Supported 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">change</span></div> <p> Fired when text changes are saved by user. </p> </div> </section> </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>  <h2>HTML</h2> <syntax-highlighter>  </syntax-highlighter> <h2>CSS</h2> <syntax-highlighter> <style>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)}body{color:rgba(var(--text-color),1);background:rgba(var(--background-color),1)}</style> </syntax-highlighter> <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">--height</span></div> <p> Defines height of toggle button </p> </div> <div class="tr"> <div><span class="highlight">--width</span></div> <p> Defines width of toggle button </p> </div> </section> <h2>Custom 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">themechange</span></div> <p> Whenever theme is toggled by user the <span class="highlight">themechange</span> event is fired. <br> You can listen to this event and access the current value of toggle with event object <span class="highlight">event.detail.theme</span> </p> </div> </section> <syntax-highlighter> <template>  <script>const myThemeToggle=document.getElementById("my_theme_toggle");myThemeToggle.addEventListener("themechange",(e=>{console.log(e.detail.theme)}))</script> </template> </syntax-highlighter> </section> </article> </main> <template id="nav_item_template"> <li>  </li> </template> <template id="comp_checkbox_template"> <sm-checkbox>  </sm-checkbox> </template> <script src="dist/button.min.js" defer></script> <script src="dist/carousel.min.js" defer></script> <script src="dist/checkbox.min.js" defer></script> <script src="dist/chips.min.js" defer></script> <script src="dist/copy.min.js" defer></script> <script src="dist/file-input.min.js" defer></script> <script src="dist/form.min.js" defer></script> <script src="dist/hamburger-menu.min.js" defer></script> <script src="dist/input.min.js" defer></script> <script src="dist/menu.min.js" defer></script> <script src="dist/notifications.min.js" defer></script> <script src="dist/popup.min.js" defer></script> <script src="dist/radio.min.js" defer></script> <script src="dist/select.min.js" defer></script> <script src="dist/spinner.min.js" defer></script> <script src="dist/switch.min.js" defer></script> <script src="dist/tabs.min.js" defer></script> <script src="dist/tags-input.min.js" defer></script> <script src="dist/text-field.min.js" defer></script> <script src="dist/textarea.min.js" defer></script> <script src="dist/theme-toggle.min.js" defer></script> <script src="dist/syntax-highlighter.js"></script> <script id="default_ui_library">const domRefs={};function getRef(e){return domRefs.hasOwnProperty(e)?domRefs[e].count<3?(domRefs[e].count=domRefs[e].count+1,document.getElementById(e)):(domRefs[e].ref||(domRefs[e].ref=document.getElementById(e)),domRefs[e].ref):(domRefs[e]={count:1,ref:null},document.getElementById(e))}function createElement(e,t){const{className:n,textContent:o,innerHTML:i,attributes:r={}}=t,c=document.createElement(e);for(let e in r)c.setAttribute(e,r[e]);return n&&(c.className=n),o&&(c.textContent=o),i&&(c.innerHTML=i),c}const debounce=(e,t)=>{let n=null;return(...o)=>{window.clearTimeout(n),n=window.setTimeout((()=>{e.apply(null,o)}),t)}};let timerId;function throttle(e,t){timerId||(timerId=setTimeout((function(){e(),timerId=void 0}),t))}navigator.onLine||notify("There seems to be a problem connecting to the internet, Please check you internet connection.","error"),window.addEventListener("offline",(()=>{notify("There seems to be a problem connecting to the internet, Please check you internet connection.","error",{pinned:!0})})),window.addEventListener("online",(()=>{getRef("notification_drawer").clearAll(),notify("We are back online.","success")}));let zIndex=10;function showPopup(e,t){return zIndex++,getRef(e).setAttribute("style",`z-index: ${zIndex}`),getRef(e).show({pinned:t}),getRef(e)}function hidePopup(){void 0!==popupStack.peek()&&popupStack.peek().popup.hide()}let confirmation=(e,t,n="Cancel",o="OK")=>new Promise((i=>{showPopup("confirmation_popup",!0),getRef("confirm_title").textContent=e,getRef("confirm_message").textContent=t;let r=getRef("confirmation_popup").children[2].children[0],c=getRef("confirmation_popup").children[2].children[1];c.textContent=o,r.textContent=n,c.onclick=()=>{hidePopup(),i(!0)},r.onclick=()=>{hidePopup(),i(!1)}}));async function getPromptInput(e,t="",n=!0,o="Ok",i="Cancel"){showPopup("prompt_popup",!0),getRef("prompt_title").textContent=e;let r=getRef("prompt_input");r.setAttribute("placeholder",t);let c=getRef("prompt_popup").querySelectorAll("sm-button");return n?r.setAttribute("type","text"):r.setAttribute("type","password"),r.focusIn(),c[0].textContent=i,c[1].textContent=o,new Promise(((e,t)=>{c[0].onclick=()=>{hidePopup()},c[1].onclick=()=>{let t=r.value;hidePopup(),e(t)}}))}function notify(e,t,n={}){const{pinned:o=!1}=n;let i;switch("error"===t&&console.error(e),t){case"success":i='<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10 15.172l9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"/></svg>';break;case"error":i='<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z"/></svg>'}getRef("notification_drawer").push(e,{pinned:o,icon:i})}const currentYear=(new Date).getFullYear();function getFormatedTime(e,t){try{String(e).indexOf("_")&&(e=String(e).split("_")[0]);const n=parseInt(e);String(n).length<13&&(e*=1e3);let o=new Date(n).toString().split(" "),i=(o[0],o[1]),r=o[2],c=o[3],s=new Date(n).getMinutes(),p=new Date(n).getHours();(new Date).toString().split(" ");s=s<10?`0${s}`:s;let l="";return l=p>12?`${p-12}:${s}`:0===p?`12:${s}`:`${p}:${s}`,l=p>=12?`${l} PM`:`${l} AM`,t?`${r} ${i} ${c}`:`${l} ${i} ${r} ${c}`}catch(t){return console.error(t),e}}function createRipple(e,t){const n=document.createElement("span"),o=Math.max(t.clientWidth,t.clientHeight),i=o/2,r=t.getBoundingClientRect();n.style.width=n.style.height=`${o}px`,n.style.left=e.clientX-(r.left+i)+"px",n.style.top=e.clientY-(r.top+i)+"px",n.classList.add("ripple");const c=n.animate([{transform:"scale(4)",opacity:0}],{duration:600,fill:"forwards",easing:"ease-out"});t.append(n),c.onfinish=()=>{n.remove()}}window.addEventListener("load",(()=>{document.addEventListener("keyup",(e=>{"Escape"===e.code&&hidePopup()})),document.addEventListener("pointerdown",(e=>{e.target.closest("button, sm-button:not([disabled]), .interact")&&createRipple(e,e.target.closest("button, sm-button, .interact"))})),document.addEventListener("copy",(()=>{notify("copied","success")}))}))</script> <script>const render={navListItem(e){const{name:t,pageId:n}=e,o=getRef("nav_item_template").content.cloneNode(!0).firstElementChild,a=o.firstElementChild;return a.textContent=t,a.href=`#${n}`,o},compCheckbox(e){const{name:t}=e,n=getRef("comp_checkbox_template").content.cloneNode(!0).firstElementChild;return n.setAttribute("value",t.toLowerCase().replaceAll(" ","-")),n.firstElementChild.textContent=t,n}};function showPage(e,t={}){const{firstLoad:n,hashChange:o}=t;let a;if(a=""===e?"overview_page":e.includes("#")?e.split("#")[1]:e,!getRef(a).classList.contains("page"))return;document.querySelector(".page:not(.hide-completely)").classList.add("hide-completely"),document.querySelector(".list__item--active").classList.remove("list__item--active"),getRef(a).classList.remove("hide-completely"),getRef(a).animate([{opacity:0,transform:"translateX(-1rem)"},{opacity:1,transform:"none"}],{duration:300,easing:"ease"}),getRef(a).parentNode.scroll(0,0);const c=document.querySelector(`.list__item[href="#${a}"]`);c.classList.add("list__item--active"),n&&window.innerWidth>640&&c.getBoundingClientRect().top>getRef("side_nav").getBoundingClientRect().height&&getRef("side_nav").scrollTo({top:c.getBoundingClientRect().top-getRef("side_nav").getBoundingClientRect().top+getRef("side_nav").scrollTop,behavior:"smooth"}),o&&window.innerWidth<640&&getRef("side_nav").close()}window.addEventListener("hashchange",(e=>showPage(window.location.hash,{hashChange:!0}))),window.addEventListener("load",(e=>{document.body.classList.remove("hide-completely"),renderComponentList(),showPage(window.location.hash,{firstLoad:!0}),getRef("total_components_count").textContent=componentsList.length,getComponents()}));const componentsList=[{name:"button",pageId:"button_page"},{name:"Carousel",pageId:"carousel_page"},{name:"Checkbox",pageId:"checkbox_page"},{name:"Chips",pageId:"chips_page"},{name:"Copy",pageId:"copy_page"},{name:"File input",pageId:"file_input_page"},{name:"Form",pageId:"form_page"},{name:"Hamburger menu",pageId:"hamburger_menu_page"},{name:"Input",pageId:"input_page"},{name:"Menu",pageId:"menu_page"},{name:"Notifications",pageId:"notifications_page"},{name:"Popup",pageId:"popup_page"},{name:"Radio",pageId:"radio_page"},{name:"Switch",pageId:"switch_page"},{name:"Select",pageId:"select_page"},{name:"Spinner",pageId:"spinner_page"},{name:"Tabs",pageId:"tabs_page"},{name:"Tags input",pageId:"tags_input_page"},{name:"textarea",pageId:"textarea_page"},{name:"Text field",pageId:"text_field_page"},{name:"theme toggle",pageId:"theme_toggle_page"}];function renderComponentList(){const e=document.createDocumentFragment(),t=document.createDocumentFragment();componentsList.forEach(((n,o)=>{e.append(render.navListItem(n)),t.append(render.compCheckbox({...n,index:o}))})),getRef("components_list").innerHTML="",getRef("components_selection_list").innerHTML="",getRef("components_list").append(e),getRef("components_selection_list").append(t)}function selectAll(){getRef("components_selection_list").querySelectorAll("sm-checkbox").forEach((e=>e.checked=!0))}function clearAll(){getRef("components_selection_list").querySelectorAll("sm-checkbox").forEach((e=>e.checked=!1))}async function getSelectedComponents(){const e=[...getRef("components_selection_list").querySelectorAll("sm-checkbox[checked]")].map((e=>e.value)),t=getRef("get_minified").checked?".min.js":".js",n=[];return e.forEach((async e=>{for(const o in allComponentsObj){const{name:a,download_url:c}=allComponentsObj[o];if(a===`${e}${t}`){n.push(fetch(c).then((async e=>await e.text())));break}}})),await Promise.all(n)}async function downloadComponents(){const e=await getFormattedSourceCode();e?downloadJs(e):notify("Please select at least one component","error")}async function copySourceCode(){const e=await getFormattedSourceCode();e?window.navigator.clipboard.writeText(e).then((e=>{notify("Copied components source code")})).catch((e=>console.error(error))):notify("Please select at least one component","error")}async function getFormattedSourceCode(e){const t=await getSelectedComponents();if(t.length){const e=[...getRef("components_selection_list").querySelectorAll("sm-checkbox[checked]")].map((e=>e.value));let n=t;return getRef("get_minified").checked&&(n=t.map((e=>e.replace(/\s+/g," ").replace(/\\n/g,"")))),`// Components downloaded: ${e.join(",")}\n${n.join("\n")}`}return!1}let allComponentsObj=[];async function getComponents(){const e=await fetch("https://api.github.com/repos/ranchimall/standard-ui/contents/components/dist");allComponentsObj=await e.json()}function downloadJs(e){const t=getRef("get_minified").checked?".min.js":".js",n=createElement("a",{attributes:{href:"data:application/javascript;charset=utf-8,"+encodeURIComponent(e),download:`components${t}`,style:"display:none"}});document.body.appendChild(n),n.click(),document.body.removeChild(n)}</script> 
\ No newline at end of file