Merge branch 'main' into feature/#49-Update-focus-event-for-touch

# Conflicts:
#	src/components/Dot/Dot.svelte

src/components/Dot/Dot.svelte

@@ -1,58 +1,44 @@
 <script>
-  import { tweened } from 'svelte/motion';
-  import { cubicInOut } from 'svelte/easing';
-
-  const DOT_SIZE_PX = 6
-  const ACTIVE_DOT_SIZE_PX = 8
-
-  const size = tweened(DOT_SIZE_PX, {
-    duration: 250,
-    easing: cubicInOut
-  });
-
   /**
    * Indicates if dot is active
    */
   export let active = false
-
-  $: {
-    size.set(active ? ACTIVE_DOT_SIZE_PX : DOT_SIZE_PX)
-  }
 </script>
 
-<div class="sc-carousel-dot__container">
+<div
-  <div
   class="sc-carousel-dot__dot"
   class:sc-carousel-dot__dot_active={active}
-    style="
-      height: {$size}px;
-      width: {$size}px;
-    "
   on:click
-  ></div>
+></div>
-</div>
 
 <style>
-  .sc-carousel-dot__container {
+  :root {
-    display: flex;
+    --sc-dot-size: 6px;
-    align-items: center;
+    --sc-active-dot-size: 8px;
-    justify-content: center;
+    --sc-dot-size-animation-time: 250ms;
-    height: 16px;
-    width: 16px;
   }
   .sc-carousel-dot__dot {
     background-color: var(--sc-color-rgb-light);
     border-radius: 50%;
     display: inline-block;
     opacity: 0.5;
-    transition: opacity 100ms ease;
+    transition:
+      opacity 100ms ease,
+      height var(--sc-dot-size-animation-time) ease,
+      width var(--sc-dot-size-animation-time) ease;
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
+
+    height: var(--sc-dot-size);
+    width: var(--sc-dot-size);
   }
   .sc-carousel-dot__dot:hover {
     opacity: 0.9;
   }
   .sc-carousel-dot__dot_active {
     opacity: 0.7;
+
+    height: var(--sc-active-dot-size);
+    width: var(--sc-active-dot-size);
   }
 </style>

src/components/Dots/Dots.svelte

@@ -31,9 +31,6 @@
 </div>
 
 <style>
-  :root {
-    --sc-dot-size: 10px; 
-  }
   .sc-carousel-dots__container {
     display: flex;
     align-items: center;
@@ -42,8 +39,8 @@
     padding: 0 30px;
   }
   .sc-carousel-dots__dot-container {
-    height: calc(var(--sc-dot-size) + 10px);
+    height: calc(var(--sc-dot-size) + 14px);
-    width: calc(var(--sc-dot-size) + 6px);
+    width: calc(var(--sc-dot-size) + 10px);
     display: flex;
     align-items: center;
     justify-content: center;