From 06a93022784d6c133694cc59a5166f6f086d6bcd Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Fri, 2 Jul 2021 00:21:50 +0300
Subject: [PATCH 01/31] #31 : Add ProgressManager

---
 src/utils/ProgressManager.js | 44 ++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 src/utils/ProgressManager.js

diff --git a/src/utils/ProgressManager.js b/src/utils/ProgressManager.js
new file mode 100644
index 0000000..260252d
--- /dev/null
+++ b/src/utils/ProgressManager.js
@@ -0,0 +1,44 @@
+const PROGRESS_STEPS_COUNT = 100
+
+export class ProgressManager {
+  #autoplayDuration
+  #onValueChange
+
+  #interval
+  #paused = false
+
+  constructor({
+    autoplayDuration,
+    onValueChange,
+  }) {
+    this.#autoplayDuration = autoplayDuration
+    this.#onValueChange = onValueChange
+  }
+
+  start() {
+    let value = 0
+    let progress = 0
+    const stepMs = this.#autoplayDuration / PROGRESS_STEPS_COUNT
+
+    this.#interval = setInterval(() => {
+      if (this.#paused) {
+        return 
+      }
+      progress += stepMs
+      value = progress / this.#autoplayDuration
+      this.#onValueChange(value)
+    }, stepMs)
+  }
+
+  pause() {
+    this.#paused = true
+  }
+
+  resume() {
+    this.#paused = false
+  }
+
+  reset() {
+    clearInterval(this.#interval)
+  }
+}

From 9d00b1bc6ca9e11b6c9ed8a370f2a1ec8bbb7cbe Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Fri, 2 Jul 2021 00:24:04 +0300
Subject: [PATCH 02/31] #31 : Add ProgressManager to carousel component

---
 src/components/Carousel/Carousel.svelte | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index 7189513..36a3656 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -12,6 +12,7 @@
   } from '../../utils/event'
   import { getAdjacentIndexes } from '../../utils/page'
   import { get } from '../../utils/object'
+  import { ProgressManager } from '../../utils/ProgressManager.js'
 
   const dispatch = createEventDispatcher()
 
@@ -107,12 +108,22 @@
   let pagesElement
   let focused = false
 
+  let progressValue
+  const progressManager = new ProgressManager({
+    autoplayDuration,
+    onValueChange: (value) => {
+      progressValue = value
+    }
+  })
+
   let autoplayInterval = null
   $: {
     if (pauseOnFocus) {
       if (focused) {
+        progressManager.pause()
         clearAutoplay()
       } else {
+        progressManager.resume()
         applyAutoplay()
       }
     }
@@ -156,11 +167,17 @@
   }
 
   let cleanupFns = []
+
   onMount(() => {
     (async () => {
       await tick()
       cleanupFns.push(store.subscribe(value => {
         currentPageIndex = value.currentPageIndex
+        
+        progressManager.reset() // clear interval out of condition in case autoplay was changed reactively
+        if (autoplay) {
+          progressManager.start()
+        }
       }))
       if (pagesElement && pageWindowElement) {
         // load first and last child to clone them 

From 53a6a94f50339f58da0e2bd41991f22178ce2802 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Fri, 2 Jul 2021 00:24:27 +0300
Subject: [PATCH 03/31] #31 : Add Progress component

---
 src/components/Progress/Progress.svelte | 34 +++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 src/components/Progress/Progress.svelte

diff --git a/src/components/Progress/Progress.svelte b/src/components/Progress/Progress.svelte
new file mode 100644
index 0000000..bdc1caf
--- /dev/null
+++ b/src/components/Progress/Progress.svelte
@@ -0,0 +1,34 @@
+<script>
+  import { tweened } from 'svelte/motion';
+  import { cubicInOut } from 'svelte/easing';
+
+  const MAX_PERCENT = 100;
+
+  /**
+   * Progress value
+   */
+  export let value = 0.5
+
+  $: width = Math.min(value * MAX_PERCENT, MAX_PERCENT)
+</script>
+
+<div class="sc-carousel-progress__container">
+  <div
+    class="sc-carousel-progress__indicator"
+    style="
+      width: {width}%;
+    "
+  ></div>
+</div>
+
+<style>
+  .sc-carousel-progress__container {
+    width: 100%;
+    height: 20px;
+    background-color: lightgray;
+  }
+  .sc-carousel-progress__indicator {
+    height: 100%;
+    background-color: gray;
+  }
+</style>
\ No newline at end of file

From 9d4c624f6eacd36a28d77ca3f638a5b00a1df21a Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Fri, 2 Jul 2021 00:24:59 +0300
Subject: [PATCH 04/31] #31 : Add Progress to carousel

---
 src/components/Carousel/Carousel.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index 36a3656..cf0d74d 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -3,6 +3,7 @@
   import { createStore } from '../../store'
   import Dots from '../Dots/Dots.svelte'
   import Arrow from '../Arrow/Arrow.svelte'
+  import Progress from '../Progress/Progress.svelte'
   import { NEXT, PREV } from '../../direction'
   import { swipeable } from '../../actions/swipeable'
   import { focusable } from '../../actions/focusable'
@@ -332,6 +333,7 @@
       ></Dots>
     </slot>
   {/if}
+  <Progress value={progressValue} />
 </div>
 
 <style>

From 892550f196ed954a85bf5b713a60a6aeb7480dc5 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Fri, 2 Jul 2021 00:25:28 +0300
Subject: [PATCH 05/31] #31 : Add todo comments

---
 src/components/Carousel/Carousel.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index cf0d74d..aabbe25 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -205,7 +205,7 @@
   }
 
   function offsetPage(animated) {
-    _duration = animated ? duration : 0
+    _duration = animated ? duration : 0 // TODO: why not used
     offset = -currentPageIndex * pageWidth
     if (infinite) {
       if (currentPageIndex === 0) {
@@ -230,7 +230,7 @@
 
   function showPage(pageIndex, options) {
     const animated = get(options, 'animated', true)
-    const offsetDelayMs = get(options, 'offsetDelayMs', true)
+    const offsetDelayMs = get(options, 'offsetDelayMs', true) // TODO: fix default value
     safeChangePage(() => {
       store.moveToPage({ pageIndex, pagesCount })
       setTimeout(() => {

From 3f9f6c1147fb976621c1a92063bda9646fd7da20 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Fri, 2 Jul 2021 17:20:33 +0300
Subject: [PATCH 06/31] #31 : Update progress manager

---
 src/components/Carousel/Carousel.svelte | 49 ++++++++++++-------------
 src/utils/ProgressManager.js            | 31 ++++++++++++----
 2 files changed, 48 insertions(+), 32 deletions(-)

diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index aabbe25..5ee99ec 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -18,8 +18,16 @@
   const dispatch = createEventDispatcher()
 
   const directionFnDescription = {
-    [NEXT]: showNextPage,
-    [PREV]: showPrevPage
+    [NEXT]: () => {
+      progressManager.start(() => {
+        showNextPage()
+      })
+    },
+    [PREV]: () => {
+      progressManager.start(() => {
+        showPrevPage()
+      })
+    }
   }
 
   /**
@@ -67,7 +75,7 @@
   /**
    * Pause autoplay on focus
    */
-  export let pauseOnFocus = false
+  export let pauseOnFocus = true
 
   /**
    * Current page indicator dots
@@ -117,15 +125,12 @@
     }
   })
 
-  let autoplayInterval = null
   $: {
     if (pauseOnFocus) {
       if (focused) {
         progressManager.pause()
-        clearAutoplay()
       } else {
         progressManager.resume()
-        applyAutoplay()
       }
     }
   }
@@ -146,19 +151,6 @@
 
     offsetPage(false)
   }
-
-  function applyAutoplay() {
-    if (autoplay && !autoplayInterval) {
-      autoplayInterval = setInterval(() => {
-        directionFnDescription[autoplayDirection]()
-      }, autoplayDuration)
-    }
-  }
-
-  function clearAutoplay() {
-    clearInterval(autoplayInterval)
-    autoplayInterval = null
-  }
   
   function addClones() {
     const first = pagesElement.children[0]
@@ -167,6 +159,12 @@
     pagesElement.append(first.cloneNode(true))
   }
 
+  function applyAutoplay() {
+    if (autoplay) {
+      directionFnDescription[autoplayDirection]()
+    }
+  }
+
   let cleanupFns = []
 
   onMount(() => {
@@ -174,11 +172,7 @@
       await tick()
       cleanupFns.push(store.subscribe(value => {
         currentPageIndex = value.currentPageIndex
-        
-        progressManager.reset() // clear interval out of condition in case autoplay was changed reactively
-        if (autoplay) {
-          progressManager.start()
-        }
+        console.log('currentPageIndex', currentPageIndex)
       }))
       if (pagesElement && pageWindowElement) {
         // load first and last child to clone them 
@@ -189,13 +183,14 @@
         store.init(initialPageIndex + Number(infinite))
         applyPageSizes()
       }
+
       applyAutoplay()
+
       addResizeEventListener(applyPageSizes)
     })()
   })
 
   onDestroy(() => {
-    clearAutoplay()
     removeResizeEventListener(applyPageSizes)
     cleanupFns.filter(fn => fn && typeof fn === 'function').forEach(fn => fn())
   })
@@ -219,12 +214,14 @@
   // Disable page change while animation is in progress
   let disabled = false
   function safeChangePage(cb, options) {
+    applyAutoplay()
     const animated = get(options, 'animated', true)
     if (disabled) return
     cb()
     disabled = true
     setTimeout(() => {
       disabled = false
+      
     }, animated ? duration : 0)
   }
 
@@ -258,6 +255,7 @@
     _duration = 0
   }
   function handleThreshold(event) {
+    // TODO: is it correct?
     directionFnDescription[event.detail.direction]()
   }
   function handleSwipeMove(event) {
@@ -333,6 +331,7 @@
       ></Dots>
     </slot>
   {/if}
+  {progressValue}
   <Progress value={progressValue} />
 </div>
 
diff --git a/src/utils/ProgressManager.js b/src/utils/ProgressManager.js
index 260252d..6c1f0e5 100644
--- a/src/utils/ProgressManager.js
+++ b/src/utils/ProgressManager.js
@@ -1,9 +1,15 @@
-const PROGRESS_STEPS_COUNT = 100
+const PROGRESS_STEPS_COUNT = 10
+
+const setIntervalImmediately = (fn, ms) => {
+  fn();
+  return setInterval(fn, ms);
+}
 
 export class ProgressManager {
   #autoplayDuration
   #onValueChange
 
+
   #interval
   #paused = false
 
@@ -15,18 +21,26 @@ export class ProgressManager {
     this.#onValueChange = onValueChange
   }
 
-  start() {
-    let value = 0
-    let progress = 0
-    const stepMs = this.#autoplayDuration / PROGRESS_STEPS_COUNT
+  start(onFinish) {
+    this.reset()
 
-    this.#interval = setInterval(() => {
+    const stepMs = this.#autoplayDuration / PROGRESS_STEPS_COUNT
+    let progress = -stepMs
+
+    this.#interval = setIntervalImmediately(() => {
       if (this.#paused) {
         return 
       }
       progress += stepMs
-      value = progress / this.#autoplayDuration
+
+      const value = progress / this.#autoplayDuration
       this.#onValueChange(value)
+
+      if (value > 1) {
+        this.reset()
+        onFinish()
+        this.start(onFinish)
+      }
     }, stepMs)
   }
 
@@ -40,5 +54,8 @@ export class ProgressManager {
 
   reset() {
     clearInterval(this.#interval)
+    // this.#onValueChange(0)
   }
+
+  // TODO: add on destroy
 }

From ecca0c3892d022b38ed66be71cd0131e7b3bd26e Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Fri, 2 Jul 2021 17:26:37 +0300
Subject: [PATCH 07/31] #31 : Fix swipe

---
 src/components/Carousel/Carousel.svelte | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index 5ee99ec..223492d 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -17,7 +17,7 @@
 
   const dispatch = createEventDispatcher()
 
-  const directionFnDescription = {
+  const autoplayDirectionFnDescription = {
     [NEXT]: () => {
       progressManager.start(() => {
         showNextPage()
@@ -30,6 +30,15 @@
     }
   }
 
+  const directionFnDescription = {
+    [NEXT]: () => {
+      showNextPage()
+    },
+    [PREV]: () => {
+      showPrevPage()
+    }
+  }
+
   /**
    * CSS animation timing function
    * examples: 'linear', 'steps(5, end)', 'cubic-bezier(0.1, -0.6, 0.2, 0)'
@@ -161,7 +170,7 @@
 
   function applyAutoplay() {
     if (autoplay) {
-      directionFnDescription[autoplayDirection]()
+      autoplayDirectionFnDescription[autoplayDirection]()
     }
   }
 

From 903f6651976de73d27d4c79f89d9c1fab14bcea8 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Fri, 2 Jul 2021 19:16:16 +0300
Subject: [PATCH 08/31] #31 : Add progress indicator prop

---
 src/components/Carousel/Carousel.svelte                    | 5 +++++
 src/components/Carousel/stories/CarouselView.svelte        | 7 +++++++
 .../Carousel/stories/CarouselViewCustomArrows.svelte       | 6 ++++++
 .../Carousel/stories/CarouselViewCustomDots.svelte         | 6 ++++++
 4 files changed, 24 insertions(+)

diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index 223492d..c82631c 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -86,6 +86,11 @@
    */
   export let pauseOnFocus = true
 
+  /**
+   * Show autoplay duration progress indicator
+   */
+  export let autoplayProgressVisible = false
+
   /**
    * Current page indicator dots
    */
diff --git a/src/components/Carousel/stories/CarouselView.svelte b/src/components/Carousel/stories/CarouselView.svelte
index 90c4ebf..4782fb7 100644
--- a/src/components/Carousel/stories/CarouselView.svelte
+++ b/src/components/Carousel/stories/CarouselView.svelte
@@ -47,6 +47,11 @@
    */
   export let pauseOnFocus = false
 
+  /**
+   * Show autoplay duration progress indicator
+   */
+  export let autoplayProgressVisible = false
+
   /**
    * Current page indicator dots
    */
@@ -83,6 +88,7 @@
     {autoplayDuration}
     {autoplayDirection}
     {pauseOnFocus}
+    {autoplayProgressVisible}
     {dots}
     on:pageChange={
       event => console.log(`Current page index: ${event.detail}`)
@@ -108,6 +114,7 @@
     {autoplayDuration}
     {autoplayDirection}
     {pauseOnFocus}
+    {autoplayProgressVisible}
     {dots}
   >
     {#each colors2 as { color, text } (color)}
diff --git a/src/components/Carousel/stories/CarouselViewCustomArrows.svelte b/src/components/Carousel/stories/CarouselViewCustomArrows.svelte
index 909fe3a..74f414e 100644
--- a/src/components/Carousel/stories/CarouselViewCustomArrows.svelte
+++ b/src/components/Carousel/stories/CarouselViewCustomArrows.svelte
@@ -47,6 +47,11 @@
    */
   export let pauseOnFocus = false
 
+  /**
+   * Show autoplay duration progress indicator
+   */
+  export let autoplayProgressVisible = false
+
   /**
    * Current page indicator dots
    */
@@ -77,6 +82,7 @@
     {autoplayDuration}
     {autoplayDirection}
     {pauseOnFocus}
+    {autoplayProgressVisible}
     {dots}
     let:showPrevPage
     let:showNextPage
diff --git a/src/components/Carousel/stories/CarouselViewCustomDots.svelte b/src/components/Carousel/stories/CarouselViewCustomDots.svelte
index 369692d..c5bea2a 100644
--- a/src/components/Carousel/stories/CarouselViewCustomDots.svelte
+++ b/src/components/Carousel/stories/CarouselViewCustomDots.svelte
@@ -47,6 +47,11 @@
    */
   export let pauseOnFocus = false
 
+  /**
+   * Show autoplay duration progress indicator
+   */
+  export let autoplayProgressVisible = false
+
   /**
    * Current page indicator dots
    */
@@ -81,6 +86,7 @@
     {autoplayDuration}
     {autoplayDirection}
     {pauseOnFocus}
+    {autoplayProgressVisible}
     {dots}
     let:currentPageIndex
     let:pagesCount

From 8bc04bc7a918d7f5ed685aee61b75b8f511b0732 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Sat, 3 Jul 2021 00:11:58 +0300
Subject: [PATCH 09/31] #31 : Fix story, convert value to number

---
 src/components/Carousel/stories/CarouselViewCustomDots.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Carousel/stories/CarouselViewCustomDots.svelte b/src/components/Carousel/stories/CarouselViewCustomDots.svelte
index c5bea2a..bd6eaea 100644
--- a/src/components/Carousel/stories/CarouselViewCustomDots.svelte
+++ b/src/components/Carousel/stories/CarouselViewCustomDots.svelte
@@ -58,7 +58,7 @@
   export let dots = true
 
   function onPageChange(event, showPage) {
-    showPage(event.target.value)
+    showPage(Number(event.target.value))
   }
 
   const colors = [

From deafbfb141a661a2f07369bf130ef5963c8b5a30 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Sat, 3 Jul 2021 00:12:33 +0300
Subject: [PATCH 10/31] #31 : Move setIntervalImmediate to utils

---
 src/utils/ProgressManager.js | 12 ++++--------
 src/utils/interval.js        |  4 ++++
 2 files changed, 8 insertions(+), 8 deletions(-)
 create mode 100644 src/utils/interval.js

diff --git a/src/utils/ProgressManager.js b/src/utils/ProgressManager.js
index 6c1f0e5..78b9f94 100644
--- a/src/utils/ProgressManager.js
+++ b/src/utils/ProgressManager.js
@@ -1,15 +1,12 @@
-const PROGRESS_STEPS_COUNT = 10
+import { setIntervalImmediate } from './interval'
+
+const PROGRESS_STEPS_COUNT = 100
 
-const setIntervalImmediately = (fn, ms) => {
-  fn();
-  return setInterval(fn, ms);
-}
 
 export class ProgressManager {
   #autoplayDuration
   #onValueChange
 
-
   #interval
   #paused = false
 
@@ -27,7 +24,7 @@ export class ProgressManager {
     const stepMs = this.#autoplayDuration / PROGRESS_STEPS_COUNT
     let progress = -stepMs
 
-    this.#interval = setIntervalImmediately(() => {
+    this.#interval = setIntervalImmediate(() => {
       if (this.#paused) {
         return 
       }
@@ -54,7 +51,6 @@ export class ProgressManager {
 
   reset() {
     clearInterval(this.#interval)
-    // this.#onValueChange(0)
   }
 
   // TODO: add on destroy
diff --git a/src/utils/interval.js b/src/utils/interval.js
new file mode 100644
index 0000000..49a9978
--- /dev/null
+++ b/src/utils/interval.js
@@ -0,0 +1,4 @@
+export const setIntervalImmediate = (fn, ms) => {
+  fn();
+  return setInterval(fn, ms);
+}

From 5f2a4c2d56bbd3f43846844858bf5e9de7b4cc01 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Sat, 3 Jul 2021 00:13:00 +0300
Subject: [PATCH 11/31] #31 : Wait animation finish

---
 src/components/Carousel/Carousel.svelte | 3 +--
 src/utils/ProgressManager.js            | 1 -
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index c82631c..ac518c6 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -228,14 +228,13 @@
   // Disable page change while animation is in progress
   let disabled = false
   function safeChangePage(cb, options) {
-    applyAutoplay()
     const animated = get(options, 'animated', true)
     if (disabled) return
     cb()
     disabled = true
     setTimeout(() => {
       disabled = false
-      
+      applyAutoplay()
     }, animated ? duration : 0)
   }
 
diff --git a/src/utils/ProgressManager.js b/src/utils/ProgressManager.js
index 78b9f94..339ba76 100644
--- a/src/utils/ProgressManager.js
+++ b/src/utils/ProgressManager.js
@@ -36,7 +36,6 @@ export class ProgressManager {
       if (value > 1) {
         this.reset()
         onFinish()
-        this.start(onFinish)
       }
     }, stepMs)
   }

From 6dee586639636a496658a4f217cb6004bfd914f0 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Sat, 3 Jul 2021 00:13:24 +0300
Subject: [PATCH 12/31] #31 : Update progress position

---
 src/components/Carousel/Carousel.svelte | 18 ++++++++++++++----
 src/components/Progress/Progress.svelte | 19 ++++++-------------
 2 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index ac518c6..76efac1 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -268,7 +268,6 @@
     _duration = 0
   }
   function handleThreshold(event) {
-    // TODO: is it correct?
     directionFnDescription[event.detail.direction]()
   }
   function handleSwipeMove(event) {
@@ -316,7 +315,12 @@
         bind:this={pagesElement}
       >
         <slot {loaded}></slot>
-      </div>    
+      </div>
+      {#if autoplayProgressVisible}
+        <div class="sc-carousel-progress__container">
+          <Progress value={progressValue} />
+        </div>
+      {/if}
     </div>
     {#if arrows}
       <slot name="next" {showNextPage}>
@@ -344,8 +348,6 @@
       ></Dots>
     </slot>
   {/if}
-  {progressValue}
-  <Progress value={progressValue} />
 </div>
 
 <style>
@@ -365,6 +367,7 @@
     display: flex;
     overflow: hidden;
     box-sizing: border-box;
+    position: relative;
   }
   .sc-carousel__pages-container {
     width: 100%;
@@ -378,4 +381,11 @@
     align-items: center;
     justify-content: center;
   }
+  .sc-carousel-progress__container {
+    width: 100%;
+    height: 7px;
+    background-color: lightgray;
+    position: absolute;
+    bottom: 0;
+  }
 </style>
\ No newline at end of file
diff --git a/src/components/Progress/Progress.svelte b/src/components/Progress/Progress.svelte
index bdc1caf..ce9fcf2 100644
--- a/src/components/Progress/Progress.svelte
+++ b/src/components/Progress/Progress.svelte
@@ -12,21 +12,14 @@
   $: width = Math.min(value * MAX_PERCENT, MAX_PERCENT)
 </script>
 
-<div class="sc-carousel-progress__container">
-  <div
-    class="sc-carousel-progress__indicator"
-    style="
-      width: {width}%;
-    "
-  ></div>
-</div>
+<div
+  class="sc-carousel-progress__indicator"
+  style="
+    width: {width}%;
+  "
+></div>
 
 <style>
-  .sc-carousel-progress__container {
-    width: 100%;
-    height: 20px;
-    background-color: lightgray;
-  }
   .sc-carousel-progress__indicator {
     height: 100%;
     background-color: gray;

From 158a7489b26dc0c7cf58718b994003a56d3a91bd Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Sat, 3 Jul 2021 00:25:56 +0300
Subject: [PATCH 13/31] #31 : Reset progress on destroy

---
 src/components/Carousel/Carousel.svelte | 1 +
 src/utils/ProgressManager.js            | 2 --
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index 76efac1..9e7c236 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -188,6 +188,7 @@
         currentPageIndex = value.currentPageIndex
         console.log('currentPageIndex', currentPageIndex)
       }))
+      cleanupFns.push(() => progressManager.reset())
       if (pagesElement && pageWindowElement) {
         // load first and last child to clone them 
         loaded = [0, pagesElement.children.length - 1]
diff --git a/src/utils/ProgressManager.js b/src/utils/ProgressManager.js
index 339ba76..46e493d 100644
--- a/src/utils/ProgressManager.js
+++ b/src/utils/ProgressManager.js
@@ -51,6 +51,4 @@ export class ProgressManager {
   reset() {
     clearInterval(this.#interval)
   }
-
-  // TODO: add on destroy
 }

From e49556a3011ad0684ea984dfda54755871c86ee6 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Sat, 3 Jul 2021 00:26:27 +0300
Subject: [PATCH 14/31] #31 : Code cleanup

---
 src/components/Carousel/Carousel.svelte | 10 +++++-----
 src/components/Progress/Progress.svelte |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index 9e7c236..e275205 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -174,6 +174,7 @@
   }
 
   function applyAutoplay() {
+    console.log('autoplay', autoplay)
     if (autoplay) {
       autoplayDirectionFnDescription[autoplayDirection]()
     }
@@ -186,7 +187,6 @@
       await tick()
       cleanupFns.push(store.subscribe(value => {
         currentPageIndex = value.currentPageIndex
-        console.log('currentPageIndex', currentPageIndex)
       }))
       cleanupFns.push(() => progressManager.reset())
       if (pagesElement && pageWindowElement) {
@@ -215,13 +215,13 @@
   }
 
   function offsetPage(animated) {
-    _duration = animated ? duration : 0 // TODO: why not used
+    _duration = animated ? duration : 0
     offset = -currentPageIndex * pageWidth
     if (infinite) {
       if (currentPageIndex === 0) {
-        showPage(pagesCount - 2, { offsetDelayMs: duration, animated: false })
+        showPage(pagesCount - 2, { offsetDelayMs: _duration, animated: false })
       } else if (currentPageIndex === pagesCount - 1) {
-        showPage(1, { offsetDelayMs: duration, animated: false })
+        showPage(1, { offsetDelayMs: _duration, animated: false })
       }
     }
   }
@@ -241,7 +241,7 @@
 
   function showPage(pageIndex, options) {
     const animated = get(options, 'animated', true)
-    const offsetDelayMs = get(options, 'offsetDelayMs', true) // TODO: fix default value
+    const offsetDelayMs = get(options, 'offsetDelayMs', 0)
     safeChangePage(() => {
       store.moveToPage({ pageIndex, pagesCount })
       setTimeout(() => {
diff --git a/src/components/Progress/Progress.svelte b/src/components/Progress/Progress.svelte
index ce9fcf2..3e01080 100644
--- a/src/components/Progress/Progress.svelte
+++ b/src/components/Progress/Progress.svelte
@@ -24,4 +24,4 @@
     height: 100%;
     background-color: gray;
   }
-</style>
\ No newline at end of file
+</style>

From a9515edcfd6d72912edebba19d32ca023bd864b6 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Sat, 3 Jul 2021 00:34:25 +0300
Subject: [PATCH 15/31] #31 : Fix non infinite case

---
 src/components/Carousel/Carousel.svelte | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index e275205..21f7193 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -174,7 +174,10 @@
   }
 
   function applyAutoplay() {
-    console.log('autoplay', autoplay)
+    if (!infinite && currentPageIndex === pagesCount - 1) {
+      progressManager.reset()
+      return
+    }
     if (autoplay) {
       autoplayDirectionFnDescription[autoplayDirection]()
     }

From 17e2e6009881d447241921dcc4b576d452a0e39c Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Sat, 3 Jul 2021 00:59:25 +0300
Subject: [PATCH 16/31] #31 : Update colors, set reversed progress indicator

---
 src/components/Arrow/Arrow.svelte       | 16 +++++++++-------
 src/components/Carousel/Carousel.svelte | 10 +++++++---
 src/components/Dots/Dots.svelte         |  6 +++---
 src/components/Progress/Progress.svelte |  9 ++++++---
 4 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/components/Arrow/Arrow.svelte b/src/components/Arrow/Arrow.svelte
index 895dd06..d5e244e 100644
--- a/src/components/Arrow/Arrow.svelte
+++ b/src/components/Arrow/Arrow.svelte
@@ -26,13 +26,15 @@
 
 <style>
   :root {
-    --size: 2px
+    --sc-arrow-size: 2px;
+    --sc-color-rgb-light-50p: rgba(93, 93, 93, 0.5);
+    --sc-color-hex-dark: #1e1e1e;
   }
   .sc-carousel-arrow__circle {
     width: 20px;
     height: 20px;
     border-radius: 50%;
-    background-color: rgba(93, 93, 93, 0.5); /* #5d5d5d */
+    background-color: var(--sc-color-rgb-light-50p);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -44,18 +46,18 @@
     opacity: 0.9;
   }
   .sc-carousel-arrow__arrow {
-    border: solid #1e1e1e;
-    border-width: 0 var(--size) var(--size) 0;
-    padding: var(--size);
+    border: solid var(--sc-color-hex-dark);
+    border-width: 0 var(--sc-arrow-size) var(--sc-arrow-size) 0;
+    padding: var(--sc-arrow-size);
     position: relative;
   }
   .sc-carousel-arrow__arrow-next {
     transform: rotate(-45deg);
-    left: calc(var(--size) / -2);
+    left: calc(var(--sc-arrow-size) / -2);
   }
   .sc-carousel-arrow__arrow-prev {
     transform: rotate(135deg);
-    right: calc(var(--size) / -2);
+    right: calc(var(--sc-arrow-size) / -2);
   }
   .sc-carousel-arrow__circle_disabled,
   .sc-carousel-arrow__circle_disabled:hover {
diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index 21f7193..5d8d303 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -135,7 +135,7 @@
   const progressManager = new ProgressManager({
     autoplayDuration,
     onValueChange: (value) => {
-      progressValue = value
+      progressValue = 1 - value
     }
   })
 
@@ -355,6 +355,10 @@
 </div>
 
 <style>
+  :root {
+    --sc-arrow-size: 2px;
+    --sc-color-rgb-light-50p: rgba(93, 93, 93, 0.5);
+  }
   .sc-carousel__carousel-container {
     display: flex;
     width: 100%;
@@ -387,8 +391,8 @@
   }
   .sc-carousel-progress__container {
     width: 100%;
-    height: 7px;
-    background-color: lightgray;
+    height: 5px;
+    background-color: var(--sc-color-rgb-light-50p);
     position: absolute;
     bottom: 0;
   }
diff --git a/src/components/Dots/Dots.svelte b/src/components/Dots/Dots.svelte
index 4242be5..b37715b 100644
--- a/src/components/Dots/Dots.svelte
+++ b/src/components/Dots/Dots.svelte
@@ -32,7 +32,7 @@
 
 <style>
   :root {
-    --dot-size: 10px; 
+    --sc-dot-size: 10px; 
   }
   .sc-carousel-dots__container {
     display: flex;
@@ -42,8 +42,8 @@
     padding: 0 30px;
   }
   .sc-carousel-dots__dot-container {
-    height: calc(var(--dot-size) + 10px);
-    width: calc(var(--dot-size) + 10x);
+    height: calc(var(--sc-dot-size) + 10px);
+    width: calc(var(--sc-dot-size) + 10x);
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/src/components/Progress/Progress.svelte b/src/components/Progress/Progress.svelte
index 3e01080..435f673 100644
--- a/src/components/Progress/Progress.svelte
+++ b/src/components/Progress/Progress.svelte
@@ -7,9 +7,9 @@
   /**
    * Progress value
    */
-  export let value = 0.5
+  export let value = 0
 
-  $: width = Math.min(value * MAX_PERCENT, MAX_PERCENT)
+  $: width = Math.max(value * MAX_PERCENT, 0)
 </script>
 
 <div
@@ -20,8 +20,11 @@
 ></div>
 
 <style>
+  :root {
+    --sc-color-hex-dark-50p: rgba(30, 30, 30, 0.5)
+  }
   .sc-carousel-progress__indicator {
     height: 100%;
-    background-color: gray;
+    background-color: var(--sc-color-hex-dark-50p);
   }
 </style>

From a6a73d54bbc7719cf04dec2d8e8e6c4089f5d996 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Sat, 3 Jul 2021 13:59:43 +0300
Subject: [PATCH 17/31] #31 : Fix storybook autoplayDirection

---
 src/components/Carousel/stories/CarouselView.svelte          | 5 ++---
 .../Carousel/stories/CarouselViewCustomArrows.svelte         | 5 ++---
 .../Carousel/stories/CarouselViewCustomDots.svelte           | 5 ++---
 src/utils/ProgressManager.js                                 | 1 -
 4 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/components/Carousel/stories/CarouselView.svelte b/src/components/Carousel/stories/CarouselView.svelte
index 4782fb7..e83d470 100644
--- a/src/components/Carousel/stories/CarouselView.svelte
+++ b/src/components/Carousel/stories/CarouselView.svelte
@@ -1,11 +1,10 @@
 <script>
   import Carousel from '../Carousel.svelte'
-  import { NEXT } from '../../../direction'
 
   /**
    * CSS animation timing function
    */
-  export let timingFunction = "ease-in-out";
+  export let timingFunction = 'ease-in-out';
 
   /**
    * Enable Next/Previos arrows
@@ -40,7 +39,7 @@
   /**
    * Auto play change direction ('next', 'prev')
    */
-  export let autoplayDirection = NEXT
+  export let autoplayDirection = 'next'
   
   /**
    * Pause autoplay on focus
diff --git a/src/components/Carousel/stories/CarouselViewCustomArrows.svelte b/src/components/Carousel/stories/CarouselViewCustomArrows.svelte
index 74f414e..3d2f895 100644
--- a/src/components/Carousel/stories/CarouselViewCustomArrows.svelte
+++ b/src/components/Carousel/stories/CarouselViewCustomArrows.svelte
@@ -1,11 +1,10 @@
 <script>
   import Carousel from '../Carousel.svelte'
-  import { NEXT } from '../../../direction'
 
   /**
    * CSS animation timing function
    */
-  export let timingFunction = "ease-in-out";
+  export let timingFunction = 'ease-in-out';
 
   /**
    * Enable Next/Previos arrows
@@ -40,7 +39,7 @@
   /**
    * Auto play change direction ('next', 'prev')
    */
-  export let autoplayDirection = NEXT
+  export let autoplayDirection = 'next'
 
   /**
    * Pause autoplay on focus
diff --git a/src/components/Carousel/stories/CarouselViewCustomDots.svelte b/src/components/Carousel/stories/CarouselViewCustomDots.svelte
index bd6eaea..1ec35b3 100644
--- a/src/components/Carousel/stories/CarouselViewCustomDots.svelte
+++ b/src/components/Carousel/stories/CarouselViewCustomDots.svelte
@@ -1,11 +1,10 @@
 <script>
   import Carousel from '../Carousel.svelte'
-  import { NEXT } from '../../../direction'
 
   /**
    * CSS animation timing function
    */
-  export let timingFunction = "ease-in-out";
+  export let timingFunction = 'ease-in-out';
 
   /**
    * Enable Next/Previos arrows
@@ -40,7 +39,7 @@
   /**
    * Auto play change direction ('next', 'prev')
    */
-  export let autoplayDirection = NEXT
+  export let autoplayDirection = 'next'
 
   /**
    * Pause autoplay on focus
diff --git a/src/utils/ProgressManager.js b/src/utils/ProgressManager.js
index 46e493d..6cc8276 100644
--- a/src/utils/ProgressManager.js
+++ b/src/utils/ProgressManager.js
@@ -2,7 +2,6 @@ import { setIntervalImmediate } from './interval'
 
 const PROGRESS_STEPS_COUNT = 100
 
-
 export class ProgressManager {
   #autoplayDuration
   #onValueChange

From 7ace64b0a1fa8d69469a2282dff0fa80e603afc0 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Sat, 3 Jul 2021 14:02:39 +0300
Subject: [PATCH 18/31] #31 : Fix autoplay progress for non infinite case

---
 src/components/Carousel/Carousel.svelte | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index 5d8d303..0048f93 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -174,7 +174,13 @@
   }
 
   function applyAutoplay() {
-    if (!infinite && currentPageIndex === pagesCount - 1) {
+    // prevent progress change if not infinite for first and last page
+    if (
+      !infinite && (
+        (autoplayDirection === NEXT && currentPageIndex === pagesCount - 1) || 
+        (autoplayDirection === PREV && currentPageIndex === 0)
+      )
+    ) {
       progressManager.reset()
       return
     }

From 76766e956892a17cecbd304e99f9b90d058b0694 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Sat, 3 Jul 2021 14:02:59 +0300
Subject: [PATCH 19/31] #31 : Fix progress value prop

---
 src/components/Progress/Progress.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Progress/Progress.svelte b/src/components/Progress/Progress.svelte
index 435f673..d865445 100644
--- a/src/components/Progress/Progress.svelte
+++ b/src/components/Progress/Progress.svelte
@@ -5,11 +5,11 @@
   const MAX_PERCENT = 100;
 
   /**
-   * Progress value
+   * Progress value, [0, 1]
    */
   export let value = 0
 
-  $: width = Math.max(value * MAX_PERCENT, 0)
+  $: width = Math.min(Math.max(value * MAX_PERCENT, 0), MAX_PERCENT)
 </script>
 
 <div

From 68f9f5d0e052d7e661956878a55f2b1c4d107a94 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Sat, 3 Jul 2021 14:03:25 +0300
Subject: [PATCH 20/31] #31 : Add progress storybook

---
 .../Progress/stories/Progress.stories.js      | 13 +++++++++++
 .../Progress/stories/ProgressView.svelte      | 23 +++++++++++++++++++
 2 files changed, 36 insertions(+)
 create mode 100644 src/components/Progress/stories/Progress.stories.js
 create mode 100644 src/components/Progress/stories/ProgressView.svelte

diff --git a/src/components/Progress/stories/Progress.stories.js b/src/components/Progress/stories/Progress.stories.js
new file mode 100644
index 0000000..be1d74d
--- /dev/null
+++ b/src/components/Progress/stories/Progress.stories.js
@@ -0,0 +1,13 @@
+import ProgressView from './ProgressView.svelte';
+
+export default {
+  title: 'Default Components/Progress',
+  component: ProgressView
+};
+
+const Template = ({ ...args }) => ({
+  Component: ProgressView,
+  props: args
+});
+
+export const Primary = Template.bind({});
diff --git a/src/components/Progress/stories/ProgressView.svelte b/src/components/Progress/stories/ProgressView.svelte
new file mode 100644
index 0000000..25f2d86
--- /dev/null
+++ b/src/components/Progress/stories/ProgressView.svelte
@@ -0,0 +1,23 @@
+<script>
+  import Progress from '../Progress.svelte'
+
+  /**
+   * Progress value
+   */
+  export let value = 0
+</script>
+
+<div class="progress-container">
+  <Progress
+    {value}
+  >
+  </Progress>
+</div>
+
+<style>
+  .progress-container {
+    width: 100%;
+    height: 5px;
+    background-color: rgba(93, 93, 93, 0.5);
+  }
+</style>

From 1cca2162ac78f166889e8b0d7649c19539969b7c Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Sat, 3 Jul 2021 22:27:42 +0300
Subject: [PATCH 21/31] #31 : Move shared css vars to parent component

---
 src/components/Arrow/Arrow.svelte       | 2 --
 src/components/Carousel/Carousel.svelte | 6 +++++-
 src/components/Progress/Progress.svelte | 3 ---
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/Arrow/Arrow.svelte b/src/components/Arrow/Arrow.svelte
index d5e244e..b11105d 100644
--- a/src/components/Arrow/Arrow.svelte
+++ b/src/components/Arrow/Arrow.svelte
@@ -27,8 +27,6 @@
 <style>
   :root {
     --sc-arrow-size: 2px;
-    --sc-color-rgb-light-50p: rgba(93, 93, 93, 0.5);
-    --sc-color-hex-dark: #1e1e1e;
   }
   .sc-carousel-arrow__circle {
     width: 20px;
diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index 0048f93..8d1cd19 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -363,7 +363,11 @@
 <style>
   :root {
     --sc-arrow-size: 2px;
+
     --sc-color-rgb-light-50p: rgba(93, 93, 93, 0.5);
+
+    --sc-color-hex-dark-50p: rgba(30, 30, 30, 0.5);
+    --sc-color-hex-dark: #1e1e1e;
   }
   .sc-carousel__carousel-container {
     display: flex;
@@ -402,4 +406,4 @@
     position: absolute;
     bottom: 0;
   }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/Progress/Progress.svelte b/src/components/Progress/Progress.svelte
index d865445..0e2efbd 100644
--- a/src/components/Progress/Progress.svelte
+++ b/src/components/Progress/Progress.svelte
@@ -20,9 +20,6 @@
 ></div>
 
 <style>
-  :root {
-    --sc-color-hex-dark-50p: rgba(30, 30, 30, 0.5)
-  }
   .sc-carousel-progress__indicator {
     height: 100%;
     background-color: var(--sc-color-hex-dark-50p);

From 04d155823cb3f124dfa2f91b14b93eb30d54bb7c Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Sat, 3 Jul 2021 22:40:30 +0300
Subject: [PATCH 22/31] #31 : Rename onValueChange -> onProgressValueChange

---
 src/components/Carousel/Carousel.svelte | 2 +-
 src/utils/ProgressManager.js            | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index 8d1cd19..ec8bf99 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -134,7 +134,7 @@
   let progressValue
   const progressManager = new ProgressManager({
     autoplayDuration,
-    onValueChange: (value) => {
+    onProgressValueChange: (value) => {
       progressValue = 1 - value
     }
   })
diff --git a/src/utils/ProgressManager.js b/src/utils/ProgressManager.js
index 6cc8276..ef8f370 100644
--- a/src/utils/ProgressManager.js
+++ b/src/utils/ProgressManager.js
@@ -4,17 +4,17 @@ const PROGRESS_STEPS_COUNT = 100
 
 export class ProgressManager {
   #autoplayDuration
-  #onValueChange
+  #onProgressValueChange
 
   #interval
   #paused = false
 
   constructor({
     autoplayDuration,
-    onValueChange,
+    onProgressValueChange,
   }) {
     this.#autoplayDuration = autoplayDuration
-    this.#onValueChange = onValueChange
+    this.#onProgressValueChange = onProgressValueChange
   }
 
   start(onFinish) {
@@ -30,7 +30,7 @@ export class ProgressManager {
       progress += stepMs
 
       const value = progress / this.#autoplayDuration
-      this.#onValueChange(value)
+      this.#onProgressValueChange(value)
 
       if (value > 1) {
         this.reset()

From 930ec9f6aeba7299cf3e52c5704ffebbf6908765 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Sat, 3 Jul 2021 22:58:20 +0300
Subject: [PATCH 23/31] #31 : Add new demos

---
 .babelrc              |  3 +++
 src/docs/Carousel.svx | 58 ++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/.babelrc b/.babelrc
index cf55185..1c2bd59 100644
--- a/.babelrc
+++ b/.babelrc
@@ -7,6 +7,9 @@
       }
     }]
   ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties"
+  ],
   "env": {
     "test": {
       "presets": [["@babel/preset-env"]]
diff --git a/src/docs/Carousel.svx b/src/docs/Carousel.svx
index f79969d..5157645 100644
--- a/src/docs/Carousel.svx
+++ b/src/docs/Carousel.svx
@@ -76,6 +76,58 @@
 
 <Divider />
 
+## Autoplay with duration progress
+<Carousel
+  autoplay
+  autoplayDuration={5000}
+  autoplayProgressVisible
+>
+  {#each colors as { color, text } (color)}
+    <Color {color} {text} />
+  {/each}
+</Carousel>
+
+```jsx
+<Carousel
+  autoplay
+  autoplayDuration={5000}
+  autoplayProgressVisible
+>
+  {#each colors as { color, text } (color)}
+    <Color {color} {text} />
+  {/each}
+</Carousel>
+```
+
+<Divider />
+
+## Autoplay with pause on focus
+<Carousel
+  autoplay
+  autoplayDuration={5000}
+  autoplayProgressVisible
+  pauseOnFocus
+>
+  {#each colors as { color, text } (color)}
+    <Color {color} {text} />
+  {/each}
+</Carousel>
+
+```jsx
+<Carousel
+  autoplay
+  autoplayDuration={5000}
+  autoplayProgressVisible
+  pauseOnFocus
+>
+  {#each colors as { color, text } (color)}
+    <Color {color} {text} />
+  {/each}
+</Carousel>
+```
+
+<Divider />
+
 ## Lazy loading of images
 <Carousel
   let:loaded
@@ -217,10 +269,10 @@ Import component
 | `initialPageIndex`   | `number`   | `0`             | Page to start on                              |
 | `duration`           | `number`   | `500`           | Transition duration (ms)                      |
 | `autoplay`           | `boolean`  | `false`         | Enables auto play of pages                    |
-| `autoplayDuration`   | `number`   | `3000`          | Auto play change interval (ms)                |
-| `autoplayDirection`  | `string`   | `'next'`        | Auto play change direction (`next` or `prev`) |
-| `dots`               | `boolean`  | `true`          | Current page indicator dots                   |
+| `autoplayDuration`   | `number`   | `3000`          | Autoplay change interval (ms)                 |
+| `autoplayDirection`  | `string`   | `'next'`        | Autoplay change direction (`next` or `prev`)  |
 | `pauseOnFocus`       | `boolean`  | `false`         | Pause autoplay on focus                       |
+| `dots`               | `boolean`  | `true`          | Current page indicator dots                   |
 | `timingFunction`     | `string`   | `'ease-in-out'` | CSS animation timing function                 |
 
 </div>

From ac21022d4955f6df10f744b87abb230c656d7902 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Sat, 3 Jul 2021 22:59:11 +0300
Subject: [PATCH 24/31] #31 : Fix spelling 'auto play' -> autoplay

---
 README.md                                                     | 4 ++--
 src/components/Carousel/Carousel.svelte                       | 4 ++--
 src/components/Carousel/stories/CarouselView.svelte           | 4 ++--
 .../Carousel/stories/CarouselViewCustomArrows.svelte          | 4 ++--
 src/components/Carousel/stories/CarouselViewCustomDots.svelte | 4 ++--
 src/docs/Carousel.svx                                         | 4 ++--
 6 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 0169985..5715a3b 100644
--- a/README.md
+++ b/README.md
@@ -41,8 +41,8 @@ Import component
 | `initialPageIndex`   | `number`   | `0`             | Page to start on                              |
 | `duration`           | `number`   | `500`           | Transition duration (ms)                      |
 | `autoplay`           | `boolean`  | `false`         | Enables auto play of pages                    |
-| `autoplayDuration`   | `number`   | `3000`          | Auto play change interval (ms)                |
-| `autoplayDirection`  | `string`   | `'next'`        | Auto play change direction (`next` or `prev`) |
+| `autoplayDuration`   | `number`   | `3000`          | Autoplay change interval (ms)                |
+| `autoplayDirection`  | `string`   | `'next'`        | Autoplay change direction (`next` or `prev`) |
 | `pauseOnFocus`       | `boolean`  | `false`         | Pause autoplay on focus                       |
 | `dots`               | `boolean`  | `true`          | Current page indicator dots                   |
 | `timingFunction`     | `string`   | `'ease-in-out'` | CSS animation timing function                 |
diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index ec8bf99..138fc34 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -72,12 +72,12 @@
   export let autoplay = false
 
   /**
-   * Auto play change interval (ms)
+   * Autoplay change interval (ms)
    */
   export let autoplayDuration = 3000
 
   /**
-   * Auto play change direction ('next', 'prev')
+   * Autoplay change direction ('next', 'prev')
    */
   export let autoplayDirection = NEXT
 
diff --git a/src/components/Carousel/stories/CarouselView.svelte b/src/components/Carousel/stories/CarouselView.svelte
index e83d470..a8d99e0 100644
--- a/src/components/Carousel/stories/CarouselView.svelte
+++ b/src/components/Carousel/stories/CarouselView.svelte
@@ -32,12 +32,12 @@
   export let autoplay = false
 
   /**
-   * Auto play change interval
+   * Autoplay change interval
    */
   export let autoplayDuration = 3000
 
   /**
-   * Auto play change direction ('next', 'prev')
+   * Autoplay change direction ('next', 'prev')
    */
   export let autoplayDirection = 'next'
   
diff --git a/src/components/Carousel/stories/CarouselViewCustomArrows.svelte b/src/components/Carousel/stories/CarouselViewCustomArrows.svelte
index 3d2f895..5e464f4 100644
--- a/src/components/Carousel/stories/CarouselViewCustomArrows.svelte
+++ b/src/components/Carousel/stories/CarouselViewCustomArrows.svelte
@@ -32,12 +32,12 @@
   export let autoplay = false
 
   /**
-   * Auto play change interval
+   * Autoplay change interval
    */
   export let autoplayDuration = 3000
 
   /**
-   * Auto play change direction ('next', 'prev')
+   * Autoplay change direction ('next', 'prev')
    */
   export let autoplayDirection = 'next'
 
diff --git a/src/components/Carousel/stories/CarouselViewCustomDots.svelte b/src/components/Carousel/stories/CarouselViewCustomDots.svelte
index 1ec35b3..5287259 100644
--- a/src/components/Carousel/stories/CarouselViewCustomDots.svelte
+++ b/src/components/Carousel/stories/CarouselViewCustomDots.svelte
@@ -32,12 +32,12 @@
   export let autoplay = false
 
   /**
-   * Auto play change interval
+   * Autoplay change interval
    */
   export let autoplayDuration = 3000
 
   /**
-   * Auto play change direction ('next', 'prev')
+   * Autoplay change direction ('next', 'prev')
    */
   export let autoplayDirection = 'next'
 
diff --git a/src/docs/Carousel.svx b/src/docs/Carousel.svx
index 5157645..2d0294f 100644
--- a/src/docs/Carousel.svx
+++ b/src/docs/Carousel.svx
@@ -55,7 +55,7 @@
 
 ## Autoplay
 <Carousel
-  autoplay={true}
+  autoplay
   autoplayDuration={2000}
 >
   {#each colors as { color, text } (color)}
@@ -65,7 +65,7 @@
 
 ```jsx
 <Carousel
-  autoplay={true}
+  autoplay
   autoplayDuration={2000}
 >
   {#each colors as { color, text } (color)}

From 293798c8c3a548be76c6e0c2e0a1306cf2fc85b0 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Sat, 3 Jul 2021 23:04:10 +0300
Subject: [PATCH 25/31] #31 : Extend docs

---
 README.md             | 25 +++++++++++++------------
 src/docs/Carousel.svx | 25 +++++++++++++------------
 2 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/README.md b/README.md
index 5715a3b..85d3a01 100644
--- a/README.md
+++ b/README.md
@@ -34,18 +34,19 @@ Import component
 ```
 
 ## Props
-| Prop                 | Type       | Default         | Description                                   | 
-|----------------------|------------|-----------------|-----------------------------------------------|
-| `arrows`             | `boolean`  | `true`          | Enable Next/Prev arrows                       |
-| `infinite`           | `boolean`  | `true`          | Infinite looping                              |
-| `initialPageIndex`   | `number`   | `0`             | Page to start on                              |
-| `duration`           | `number`   | `500`           | Transition duration (ms)                      |
-| `autoplay`           | `boolean`  | `false`         | Enables auto play of pages                    |
-| `autoplayDuration`   | `number`   | `3000`          | Autoplay change interval (ms)                |
-| `autoplayDirection`  | `string`   | `'next'`        | Autoplay change direction (`next` or `prev`) |
-| `pauseOnFocus`       | `boolean`  | `false`         | Pause autoplay on focus                       |
-| `dots`               | `boolean`  | `true`          | Current page indicator dots                   |
-| `timingFunction`     | `string`   | `'ease-in-out'` | CSS animation timing function                 |
+| Prop                      | Type       | Default         | Description                                   | 
+|---------------------------|------------|-----------------|-----------------------------------------------|
+| `arrows`                  | `boolean`  | `true`          | Enable Next/Prev arrows                       |
+| `infinite`                | `boolean`  | `true`          | Infinite looping                              |
+| `initialPageIndex`        | `number`   | `0`             | Page to start on                              |
+| `duration`                | `number`   | `500`           | Transition duration (ms)                      |
+| `autoplay`                | `boolean`  | `false`         | Enables auto play of pages                    |
+| `autoplayDuration`        | `number`   | `3000`          | Autoplay change interval (ms)                 |
+| `autoplayDirection`       | `string`   | `'next'`        | Autoplay change direction (`next` or `prev`)  |
+| `pauseOnFocus`            | `boolean`  | `false`         | Pause autoplay on focus                       |
+| `autoplayProgressVisible` | `boolean`  | `false`         | Show autoplay duration progress indicator     |
+| `dots`                    | `boolean`  | `true`          | Current page indicator dots                   |
+| `timingFunction`          | `string`   | `'ease-in-out'` | CSS animation timing function                 |
 
 ## Events
 
diff --git a/src/docs/Carousel.svx b/src/docs/Carousel.svx
index 2d0294f..93e9699 100644
--- a/src/docs/Carousel.svx
+++ b/src/docs/Carousel.svx
@@ -262,18 +262,19 @@ Import component
 
 <div class="table-wrapper">
 
-| Prop                 | Type       | Default         | Description                                   | 
-|----------------------|------------|-----------------|-----------------------------------------------|
-| `arrows`             | `boolean`  | `true`          | Enable Next/Prev arrows                       |
-| `infinite`           | `boolean`  | `true`          | Infinite looping                              |
-| `initialPageIndex`   | `number`   | `0`             | Page to start on                              |
-| `duration`           | `number`   | `500`           | Transition duration (ms)                      |
-| `autoplay`           | `boolean`  | `false`         | Enables auto play of pages                    |
-| `autoplayDuration`   | `number`   | `3000`          | Autoplay change interval (ms)                 |
-| `autoplayDirection`  | `string`   | `'next'`        | Autoplay change direction (`next` or `prev`)  |
-| `pauseOnFocus`       | `boolean`  | `false`         | Pause autoplay on focus                       |
-| `dots`               | `boolean`  | `true`          | Current page indicator dots                   |
-| `timingFunction`     | `string`   | `'ease-in-out'` | CSS animation timing function                 |
+| Prop                      | Type       | Default         | Description                                   | 
+|---------------------------|------------|-----------------|-----------------------------------------------|
+| `arrows`                  | `boolean`  | `true`          | Enable Next/Prev arrows                       |
+| `infinite`                | `boolean`  | `true`          | Infinite looping                              |
+| `initialPageIndex`        | `number`   | `0`             | Page to start on                              |
+| `duration`                | `number`   | `500`           | Transition duration (ms)                      |
+| `autoplay`                | `boolean`  | `false`         | Enables auto play of pages                    |
+| `autoplayDuration`        | `number`   | `3000`          | Autoplay change interval (ms)                 |
+| `autoplayDirection`       | `string`   | `'next'`        | Autoplay change direction (`next` or `prev`)  |
+| `pauseOnFocus`            | `boolean`  | `false`         | Pause autoplay on focus                       |
+| `autoplayProgressVisible` | `boolean`  | `false`         | Show autoplay duration progress indicator     |
+| `dots`                    | `boolean`  | `true`          | Current page indicator dots                   |
+| `timingFunction`          | `string`   | `'ease-in-out'` | CSS animation timing function                 |
 
 </div>
 

From 4ada9137e161c99b82494a3388a8e002d895b19e Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Sat, 3 Jul 2021 23:29:37 +0300
Subject: [PATCH 26/31] #31 : Add unit tests

---
 src/utils/interval.test.js | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 src/utils/interval.test.js

diff --git a/src/utils/interval.test.js b/src/utils/interval.test.js
new file mode 100644
index 0000000..9aa209f
--- /dev/null
+++ b/src/utils/interval.test.js
@@ -0,0 +1,30 @@
+import {
+  setIntervalImmediate,
+} from './interval.js'
+
+describe('setIntervalImmediate', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  })
+
+  it('runs callback immediately and them each n ms', () => {
+    let interval
+    const durationMs = 1000
+
+    const callNumbersToStopTimer = 3
+    let calledTimes = 0
+    const callback = () => {
+      calledTimes++
+      if (calledTimes === callNumbersToStopTimer) {
+        clearInterval(interval)
+      }
+    }
+
+    interval = setIntervalImmediate(callback, durationMs)
+    jest.runAllTimers()
+
+    expect(calledTimes).toBe(callNumbersToStopTimer)
+    expect(setInterval).toHaveBeenCalledWith(expect.any(Function), durationMs)
+    expect(clearInterval).toHaveBeenCalledWith(interval)
+  })
+})

From b70c1d6730b32c1cdd96892a6961e2ce751a36a0 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Wed, 7 Jul 2021 23:34:59 +0300
Subject: [PATCH 27/31] #31 : Use step ms instead of steps count

---
 src/utils/ProgressManager.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/utils/ProgressManager.js b/src/utils/ProgressManager.js
index ef8f370..457b333 100644
--- a/src/utils/ProgressManager.js
+++ b/src/utils/ProgressManager.js
@@ -1,7 +1,6 @@
 import { setIntervalImmediate } from './interval'
 
-const PROGRESS_STEPS_COUNT = 100
-
+const STEP_MS = 35
 export class ProgressManager {
   #autoplayDuration
   #onProgressValueChange
@@ -20,7 +19,7 @@ export class ProgressManager {
   start(onFinish) {
     this.reset()
 
-    const stepMs = this.#autoplayDuration / PROGRESS_STEPS_COUNT
+    const stepMs = Math.min(STEP_MS, this.#autoplayDuration)
     let progress = -stepMs
 
     this.#interval = setIntervalImmediate(() => {

From 8c03229f60dfdf9edb6b519159c658fca20f4d3b Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Thu, 15 Jul 2021 19:30:09 +0300
Subject: [PATCH 28/31] #31 : Code cleanup

---
 src/components/Carousel/Carousel.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index 4ddf4b7..b0f8437 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -84,7 +84,7 @@
   /**
    * Pause autoplay on focus
    */
-  export let pauseOnFocus = true
+  export let pauseOnFocus = false
 
   /**
    * Show autoplay duration progress indicator

From aa52abb7a82562aec6d1ff7078c0efbab239b87f Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Thu, 15 Jul 2021 19:40:08 +0300
Subject: [PATCH 29/31] #31 : Rename applyAutoplay -> applyAutoplayIfNeeded

---
 src/components/Carousel/Carousel.svelte | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index b0f8437..886a94e 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -169,7 +169,7 @@
     pagesElement.append(first.cloneNode(true))
   }
 
-  function applyAutoplay(options) {
+  function applyAutoplayIfNeeded(options) {
     // prevent progress change if not infinite for first and last page
     if (
       !infinite && (
@@ -211,7 +211,7 @@
         applyPageSizes()
       }
 
-      applyAutoplay()
+      applyAutoplayIfNeeded()
 
       addResizeEventListener(applyPageSizes)
     })()
@@ -269,7 +269,7 @@
       setTimeout(() => {
         offsetPage(animated)
         const jumped = jumpIfNeeded()
-        !jumped && applyAutoplay({ delaysMs: _duration })
+        !jumped && applyAutoplayIfNeeded({ delaysMs: _duration })
       }, offsetDelayMs)
     }, { animated })
   }
@@ -279,7 +279,7 @@
       store.prev({ infinite, pagesCount })
       offsetPage(animated)
       const jumped = jumpIfNeeded()
-      !jumped && applyAutoplay({ delaysMs: _duration })
+      !jumped && applyAutoplayIfNeeded({ delaysMs: _duration })
     }, { animated })
   }
   function showNextPage(options) {
@@ -288,7 +288,7 @@
       store.next({ infinite, pagesCount })
       offsetPage(animated)
       const jumped = jumpIfNeeded()
-      !jumped && applyAutoplay({ delaysMs: _duration })
+      !jumped && applyAutoplayIfNeeded({ delaysMs: _duration })
     }, { animated })
   }
 

From 3a68ec1b2cf00682ca8c04318a7806ca2a175ebd Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Thu, 15 Jul 2021 19:41:19 +0300
Subject: [PATCH 30/31] #31 : Rename delaysMs -> delayMs

---
 src/components/Carousel/Carousel.svelte | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index 886a94e..4775304 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -181,11 +181,11 @@
       return
     }
     if (autoplay) {
-      const delaysMs = get(options, 'delaysMs', 0)
-      if (delaysMs) {
+      const delayMs = get(options, 'delayMs', 0)
+      if (delayMs) {
         setTimeout(() => {
           autoplayDirectionFnDescription[autoplayDirection]()
-        }, delaysMs)
+        }, delayMs)
       } else {
         autoplayDirectionFnDescription[autoplayDirection]()
       }
@@ -269,7 +269,7 @@
       setTimeout(() => {
         offsetPage(animated)
         const jumped = jumpIfNeeded()
-        !jumped && applyAutoplayIfNeeded({ delaysMs: _duration })
+        !jumped && applyAutoplayIfNeeded({ delayMs: _duration })
       }, offsetDelayMs)
     }, { animated })
   }
@@ -279,7 +279,7 @@
       store.prev({ infinite, pagesCount })
       offsetPage(animated)
       const jumped = jumpIfNeeded()
-      !jumped && applyAutoplayIfNeeded({ delaysMs: _duration })
+      !jumped && applyAutoplayIfNeeded({ delayMs: _duration })
     }, { animated })
   }
   function showNextPage(options) {
@@ -288,7 +288,7 @@
       store.next({ infinite, pagesCount })
       offsetPage(animated)
       const jumped = jumpIfNeeded()
-      !jumped && applyAutoplayIfNeeded({ delaysMs: _duration })
+      !jumped && applyAutoplayIfNeeded({ delayMs: _duration })
     }, { animated })
   }
 

From 309398411773c15dacce8cb225697c314ffdde17 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Thu, 15 Jul 2021 19:45:21 +0300
Subject: [PATCH 31/31] #31 : Add comments

---
 src/components/Carousel/Carousel.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Carousel/Carousel.svelte b/src/components/Carousel/Carousel.svelte
index 4775304..21d0393 100644
--- a/src/components/Carousel/Carousel.svelte
+++ b/src/components/Carousel/Carousel.svelte
@@ -269,7 +269,7 @@
       setTimeout(() => {
         offsetPage(animated)
         const jumped = jumpIfNeeded()
-        !jumped && applyAutoplayIfNeeded({ delayMs: _duration })
+        !jumped && applyAutoplayIfNeeded({ delayMs: _duration }) // while offset animation is in progress (delayMs = _duration ms) wait for it
       }, offsetDelayMs)
     }, { animated })
   }