diff --git a/index.html b/index.html
index a2ab05e9..5fe6821c 100644
--- a/index.html
+++ b/index.html
@@ -216,7 +216,7 @@
                 paginationDemo.addEventListener('catChange', function (event) {
                   console.log('Page changed!', event.detail);
                 });
-              </script> </section> <section id="radio"> <h2>Radio</h2> <cat-radio label="Label"></cat-radio> <h3>Group</h3> <cat-radio-group a11y-label="Radio Group 1" label-left=""> <cat-radio value="one" label="Option 1 - Group 1" checked=""></cat-radio> <cat-radio value="two" label="Option 2 - Group 1"></cat-radio> <cat-radio value="three" label="Option 3 - Group 3" disabled=""></cat-radio> </cat-radio-group> <h3>State</h3> <cat-radio label="Disabled" disabled=""></cat-radio> <cat-radio label="Checked" checked=""></cat-radio> <cat-radio label="Checked disabled" checked="" disabled=""></cat-radio> <h3>Alignment</h3> <cat-radio label="Label" label-left=""></cat-radio> <h3>Slots</h3> <cat-radio hint="This is a hint!"> <span slot="label">This is the <b>label</b></span> <span slot="hint">This is another!</span> </cat-radio> </section> <section id="scrollable"> <h2>Scrollable</h2> <cat-scrollable style="max-height: 8rem; width: 25vw;"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </cat-scrollable> </section> <section id="select"> <h2>Select</h2> <cat-select-demo></cat-select-demo> </section> <section id="skeleton"> <h2>Skeleton</h2> <cat-skeleton></cat-skeleton> <h3>Effect</h3> <cat-skeleton effect="plain"></cat-skeleton> <br> <cat-skeleton effect="sheen"></cat-skeleton> <br> <cat-skeleton effect="pulse"></cat-skeleton> <h3>Variant</h3> <cat-skeleton variant="square"></cat-skeleton> <cat-skeleton variant="circle"></cat-skeleton> <cat-skeleton variant="rectangle"></cat-skeleton> <cat-skeleton variant="head"></cat-skeleton> <cat-skeleton variant="body"></cat-skeleton> </section> <section id="spinner"> <h2>Spinner</h2> <cat-spinner></cat-spinner> <h3>Color</h3> <cat-spinner style="color: red;"></cat-spinner> <cat-spinner style="color: blue;"></cat-spinner> <cat-spinner style="color: green;"></cat-spinner> <h3>Size</h3> <cat-spinner size="xs"></cat-spinner> <cat-spinner size="s"></cat-spinner> <cat-spinner size="m"></cat-spinner> <cat-spinner size="l"></cat-spinner> <cat-spinner size="xl"></cat-spinner> <cat-spinner size="inline" style="font-size: 2.5rem;"></cat-spinner> </section> <section id="tabs"> <h2>Tabs</h2> <cat-tabs> <cat-tab id="tab1" label="First"></cat-tab> <cat-tab label="Second"></cat-tab> <cat-tab label="Third" icon="sparkle-filled"></cat-tab> </cat-tabs> <h3>Alignment</h3> <cat-tabs tabs-align="center"> <cat-tab label="First"></cat-tab> <cat-tab label="Second"></cat-tab> <cat-tab label="Third" icon="sparkle-filled"></cat-tab> </cat-tabs> <br> <br> <cat-tabs tabs-align="right"> <cat-tab label="First"></cat-tab> <cat-tab label="Second"></cat-tab> <cat-tab label="Third" icon="sparkle-filled"></cat-tab> </cat-tabs> <br> <br> <cat-tabs tabs-align="justify" active-tab="second"> <cat-tab label="First" deactivate=""></cat-tab> <cat-tab label="Second" id="second"></cat-tab> <cat-tab label="Third" icon="sparkle-filled"></cat-tab> </cat-tabs> <script>
+              </script> </section> <section id="radio"> <h2>Radio</h2> <cat-radio label="Label"></cat-radio> <h3>Group</h3> <cat-radio-group a11y-label="Radio Group 1" label-left=""> <cat-radio value="one" label="Option 1 - Group 1" checked=""></cat-radio> <cat-radio value="two" label="Option 2 - Group 1"></cat-radio> <cat-radio value="three" label="Option 3 - Group 1" disabled=""></cat-radio> </cat-radio-group> <h3>State</h3> <cat-radio label="Disabled" disabled=""></cat-radio> <cat-radio label="Checked" checked=""></cat-radio> <cat-radio label="Checked disabled" checked="" disabled=""></cat-radio> <h3>Alignment</h3> <cat-radio label="Label" label-left=""></cat-radio> <h3>Slots</h3> <cat-radio hint="This is a hint!"> <span slot="label">This is the <b>label</b></span> <span slot="hint">This is another!</span> </cat-radio> </section> <section id="scrollable"> <h2>Scrollable</h2> <cat-scrollable style="max-height: 8rem; width: 25vw;"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p> </cat-scrollable> </section> <section id="select"> <h2>Select</h2> <cat-select-demo></cat-select-demo> </section> <section id="skeleton"> <h2>Skeleton</h2> <cat-skeleton></cat-skeleton> <h3>Effect</h3> <cat-skeleton effect="plain"></cat-skeleton> <br> <cat-skeleton effect="sheen"></cat-skeleton> <br> <cat-skeleton effect="pulse"></cat-skeleton> <h3>Variant</h3> <cat-skeleton variant="square"></cat-skeleton> <cat-skeleton variant="circle"></cat-skeleton> <cat-skeleton variant="rectangle"></cat-skeleton> <cat-skeleton variant="head"></cat-skeleton> <cat-skeleton variant="body"></cat-skeleton> </section> <section id="spinner"> <h2>Spinner</h2> <cat-spinner></cat-spinner> <h3>Color</h3> <cat-spinner style="color: red;"></cat-spinner> <cat-spinner style="color: blue;"></cat-spinner> <cat-spinner style="color: green;"></cat-spinner> <h3>Size</h3> <cat-spinner size="xs"></cat-spinner> <cat-spinner size="s"></cat-spinner> <cat-spinner size="m"></cat-spinner> <cat-spinner size="l"></cat-spinner> <cat-spinner size="xl"></cat-spinner> <cat-spinner size="inline" style="font-size: 2.5rem;"></cat-spinner> </section> <section id="tabs"> <h2>Tabs</h2> <cat-tabs> <cat-tab id="tab1" label="First"></cat-tab> <cat-tab label="Second"></cat-tab> <cat-tab label="Third" icon="sparkle-filled"></cat-tab> </cat-tabs> <h3>Alignment</h3> <cat-tabs tabs-align="center"> <cat-tab label="First"></cat-tab> <cat-tab label="Second"></cat-tab> <cat-tab label="Third" icon="sparkle-filled"></cat-tab> </cat-tabs> <br> <br> <cat-tabs tabs-align="right"> <cat-tab label="First"></cat-tab> <cat-tab label="Second"></cat-tab> <cat-tab label="Third" icon="sparkle-filled"></cat-tab> </cat-tabs> <br> <br> <cat-tabs tabs-align="justify" active-tab="second"> <cat-tab label="First" deactivate=""></cat-tab> <cat-tab label="Second" id="second"></cat-tab> <cat-tab label="Third" icon="sparkle-filled"></cat-tab> </cat-tabs> <script>
                 const tab = document.querySelector('#tab1');
                 setInterval(() => {
                   tab.deactivated = true;