Merge branch 'main' into feature/#31_Show-pause-indicator

# Conflicts:
#	src/docs/Carousel.svx

src/docs/Carousel.svx

@@ -260,8 +260,6 @@ Import component
 
 # Props
 
-<div class="table-wrapper">
-
 | Prop                      | Type       | Default         | Description                                   | 
 |---------------------------|------------|-----------------|-----------------------------------------------|
 | `arrows`                  | `boolean`  | `true`          | Enable Next/Prev arrows                       |
@@ -276,8 +274,6 @@ Import component
 | `dots`                    | `boolean`  | `true`          | Current page indicator dots                   |
 | `timingFunction`          | `string`   | `'ease-in-out'` | CSS animation timing function                 |
 
-</div>
-
 <Divider />
 
 # Events
@@ -285,14 +281,10 @@ Import component
 ## `pageChange`
 Is dispatched on page change
 
-<div class="table-wrapper">
-
 | Payload field      | Type        | Description                           | 
 |--------------------|-------------|---------------------------------------|
 | `event.detail`     | `number`    | Current page index                    |
 
-</div>
-
 ```jsx
 <Carousel
   on:pageChange={
@@ -312,15 +304,11 @@ They are used for customizing prev and next buttons.
 
 Slot props:
 
-<div class="table-wrapper">
-
 | Prop               | Type        | Description                           | 
 |--------------------|-------------|---------------------------------------|
 | `showPrevPage`     | `function`  | Call it to switch to the previos page |
 | `showNextPage`     | `function`  | Call it to switch to the next page    |
 
-</div>
-
 ```jsx
 <Carousel
   let:showPrevPage
@@ -341,7 +329,6 @@ Slot props:
 This slot is used for customizing dots appearance.
 
 Slot props:
-<div class="table-wrapper">
 
 | Prop                | Type         | Description                                  | 
 |---------------------|----------  --|----------------------------------------------|
@@ -349,8 +336,6 @@ Slot props:
 | `pagesCount`        | `number`     | Total pages amount                           |
 | `showPage`          | `function`   | Takes index as page to be shown              |
 
-</div>
-
 ```jsx
 <Carousel
   let:currentPageIndex
@@ -370,14 +355,10 @@ This slot takes content for the carousel.
 
 Slot props:
 
-<div class="table-wrapper">
-
 | Prop              | Type       | Description                                                          | 
 |-------------------|------------|----------------------------------------------------------------------|
 | `loaded`          | `number[]` | Contains indexes of pages to be loaded. Can be used for lazy loading |
 
-</div>
-
 ```jsx
 <Carousel
   let:loaded
@@ -398,15 +379,11 @@ Navigates to a page by index
 
 Arguments:
 
-<div class="table-wrapper">
-
 | Argument           | Type        | Default | Description                           | 
 |--------------------|-------------|---------|---------------------------------------|
 | `pageIndex`        | `number`    |         | Page number                           |
 | `options.animated` | `boolean`   | `true`  | Should it be animated or not          |
 
-</div>
-
 ```jsx
 <script>
   // ...
@@ -429,14 +406,10 @@ Navigates to the previous page
 
 Arguments:
 
-<div class="table-wrapper">
-
 | Argument           | Type        | Default | Description                           | 
 |--------------------|-------------|---------|---------------------------------------|
 | `options.animated` | `boolean`   | `true`  | Should it be animated or not          |
 
-</div>
-
 ```jsx
 <script>
   // ...
@@ -459,14 +432,10 @@ Navigates to the next page
 
 Arguments:
 
-<div class="table-wrapper">
-
 | Argument           | Type        | Default | Description                           | 
 |--------------------|-------------|---------|---------------------------------------|
 | `options.animated` | `boolean`   | `true`  | Should it be animated or not          |
 
-</div>
-
 ```jsx
 <script>
   // ...
@@ -499,24 +468,6 @@ Arguments:
     -webkit-user-drag: none;
   }
 
-  /* table */
-  .table-wrapper {
-    max-width: 100%;
-    overflow-x: auto;
-  }
-  table {
-    border-collapse: collapse;
-  }
-  tr {
-    border-bottom: 2px solid #009800;
-  }
-  td {
-    padding: 2px 10px;
-  }
-  th {
-    padding: 5px 10px;
-  }
-
   /* custom arrows */
   .custom-arrow {
     width: 20px;

src/docs/Layouts/Main.svelte

@@ -1,3 +1,16 @@
+<script context="module">
+  import Table from './custom/Table.svelte';
+  import Th from './custom/Th.svelte';
+  import Tr from './custom/Tr.svelte';
+  import Td from './custom/Td.svelte';
+  export {
+    Table as table,
+    Th as th,
+    Tr as tr,
+    Td as td
+  };
+</script>
+
 <script>
   const links = [{
     title: 'github',

src/docs/Layouts/custom/Table.svelte

@@ -0,0 +1,15 @@
+<div class="table-wrapper">
+  <table>
+    <slot></slot>
+  </table>
+</div>
+
+<style>
+  .table-wrapper {
+    max-width: 100%;
+    overflow-x: auto;
+  }
+  table {
+    border-collapse: collapse;
+  }
+</style>

src/docs/Layouts/custom/Td.svelte

@@ -0,0 +1,9 @@
+<td>
+  <slot></slot>
+</td>
+
+<style>
+  td {
+    padding: 2px 10px;
+  }
+</style>

src/docs/Layouts/custom/Th.svelte

@@ -0,0 +1,9 @@
+<th>
+  <slot></slot>
+</th>
+
+<style>
+  th {
+    padding: 5px 10px;
+  }
+</style>

src/docs/Layouts/custom/Tr.svelte

@@ -0,0 +1,9 @@
+<tr>
+  <slot></slot>
+</tr>
+
+<style>
+  tr {
+    border-bottom: 2px solid #009800;
+  }
+</style>