From 39e961d41c125506a560d0d05c38277f6e49f4e6 Mon Sep 17 00:00:00 2001
From: Vendeville Antoine <antoine.vendeville@decathlon.com>
Date: Fri, 9 Feb 2024 17:48:11 +0100
Subject: [PATCH 1/3] fix(@vtmn/svelte): fix timeout on overlays components

---
 .../showcases/svelte/.storybook/preview.js    |  3 +-
 .../VtmnAlert/VtmnAlert.stories.svelte        | 10 +++++-
 .../VtmnSnackbar/VtmnSnackbar.stories.svelte  | 12 ++++++-
 .../VtmnToast/VtmnToast.stories.svelte        | 12 ++++++-
 .../components/overlays/alert/src/index.css   |  4 +++
 .../overlays/snackbar/src/index.css           |  5 +++
 .../components/overlays/toast/src/index.css   |  5 +++
 .../css/src/design-tokens/src/animations.css  | 17 ++++++----
 .../overlays/VtmnAlert/VtmnAlertItem.svelte   | 31 ++++++++++++++++---
 .../components/overlays/VtmnAlert/enums.js    |  4 +++
 .../VtmnAlert/test/vtmnAlertItem.spec.js      |  3 +-
 .../overlays/VtmnSnackbar/VtmnSnackbar.svelte |  4 ++-
 .../VtmnSnackbar/VtmnSnackbarItem.svelte      | 22 ++++++++++---
 .../components/overlays/VtmnSnackbar/enum.js  |  4 ++-
 .../VtmnSnackbar/test/VtmnSnackbar.spec.js    |  3 +-
 .../VtmnSnackbar/vtmnSnackbarStore.js         | 10 ++++--
 .../overlays/VtmnToast/VtmnToastItem.svelte   | 22 +++++++++++--
 .../components/overlays/VtmnToast/enums.js    |  4 ++-
 .../VtmnToast/test/vtmnToastItem.spec.js      |  7 +++--
 .../overlays/VtmnToast/vtmnToastStore.js      | 10 ++++--
 20 files changed, 159 insertions(+), 33 deletions(-)

diff --git a/packages/showcases/svelte/.storybook/preview.js b/packages/showcases/svelte/.storybook/preview.js
index efac23237..e75629437 100644
--- a/packages/showcases/svelte/.storybook/preview.js
+++ b/packages/showcases/svelte/.storybook/preview.js
@@ -5,7 +5,8 @@ import viewports from '@vtmn/showcase-core/addons/viewports.json';
 import DivDecorator from './DivDecorator.svelte';
 import { addReadme } from 'storybook-readme/html';
 
-import "@vtmn/svelte/dist/index.css"
+import "@vtmn/css-design-tokens/dist/index.css";
+import "@vtmn/svelte/dist/index-with-vars.css";
 import '@vtmn/icons/dist/vitamix/font/vitamix.css';
 
 export const decorators = [() => DivDecorator, withDesign, addReadme];
diff --git a/packages/showcases/svelte/stories/components/overlays/VtmnAlert/VtmnAlert.stories.svelte b/packages/showcases/svelte/stories/components/overlays/VtmnAlert/VtmnAlert.stories.svelte
index 9c3aa7228..1797fb3d9 100644
--- a/packages/showcases/svelte/stories/components/overlays/VtmnAlert/VtmnAlert.stories.svelte
+++ b/packages/showcases/svelte/stories/components/overlays/VtmnAlert/VtmnAlert.stories.svelte
@@ -39,6 +39,14 @@
         type: 'text',
       },
     },
+    timeout: {
+      type: { name: 'number', required: false },
+      description: 'Duration of the animation',
+      defaultValue: 8000,
+      control: {
+        type: 'number',
+      },
+    },
     variant: {
       type: { name: 'boolean', required: false },
       description: 'Variant of the alert',
@@ -85,7 +93,7 @@
   args={{
     title: undefined,
     description: undefined,
-    timeout: 0,
+    timeout: null,
     ariaLabelCloseButton: 'Close alert',
   }}
   let:args
diff --git a/packages/showcases/svelte/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.svelte b/packages/showcases/svelte/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.svelte
index 1578e8802..f93c77976 100644
--- a/packages/showcases/svelte/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.svelte
+++ b/packages/showcases/svelte/stories/components/overlays/VtmnSnackbar/VtmnSnackbar.stories.svelte
@@ -11,7 +11,17 @@
 <Meta
   title="Components / Overlays / VtmnSnackbar"
   component={VtmnSnackbar}
-  {argTypes}
+  argTypes={{
+    ...argTypes,
+    timeout: {
+      type: { name: 'number', required: false },
+      description: 'Duration of the animation',
+      defaultValue: 4500,
+      control: {
+        type: 'number',
+      },
+    },
+  }}
   parameters={{
     ...parameters,
     readme: {
diff --git a/packages/showcases/svelte/stories/components/overlays/VtmnToast/VtmnToast.stories.svelte b/packages/showcases/svelte/stories/components/overlays/VtmnToast/VtmnToast.stories.svelte
index ac5ef13b3..95556c247 100644
--- a/packages/showcases/svelte/stories/components/overlays/VtmnToast/VtmnToast.stories.svelte
+++ b/packages/showcases/svelte/stories/components/overlays/VtmnToast/VtmnToast.stories.svelte
@@ -11,7 +11,17 @@
 <Meta
   title="Components / Overlays / VtmnToast"
   component={VtmnToast}
-  {argTypes}
+  argTypes={{
+    ...argTypes,
+    timeout: {
+      type: { name: 'number', required: false },
+      description: 'Duration of the animation',
+      defaultValue: 4500,
+      control: {
+        type: 'number',
+      },
+    },
+  }}
   parameters={{
     ...parameters,
     readme: {
diff --git a/packages/sources/css/src/components/overlays/alert/src/index.css b/packages/sources/css/src/components/overlays/alert/src/index.css
index 7713ad82b..90dd632e2 100644
--- a/packages/sources/css/src/components/overlays/alert/src/index.css
+++ b/packages/sources/css/src/components/overlays/alert/src/index.css
@@ -130,3 +130,7 @@
     animation: var(--vtmn-animation_alert-mobile);
   }
 }
+
+.vtmn-alert.animate-delay {
+  animation-delay: 0s, 0s, var(--vtmn-animation_alert-duration);
+}
diff --git a/packages/sources/css/src/components/overlays/snackbar/src/index.css b/packages/sources/css/src/components/overlays/snackbar/src/index.css
index 28ef725bf..1844b5ede 100644
--- a/packages/sources/css/src/components/overlays/snackbar/src/index.css
+++ b/packages/sources/css/src/components/overlays/snackbar/src/index.css
@@ -58,3 +58,8 @@
     transform: translate(50%, 0%);
   }
 }
+
+.vtmn-snackbar.animate-delay {
+  animation-delay: 0s, 0s, var(--vtmn-animation_overlay-duration),
+    var(--vtmn-animation_overlay-duration);
+}
diff --git a/packages/sources/css/src/components/overlays/toast/src/index.css b/packages/sources/css/src/components/overlays/toast/src/index.css
index aefd961d5..68fb2fe75 100644
--- a/packages/sources/css/src/components/overlays/toast/src/index.css
+++ b/packages/sources/css/src/components/overlays/toast/src/index.css
@@ -63,3 +63,8 @@
     margin: 0 auto;
   }
 }
+
+.vtmn-toast.animate-delay {
+  animation-delay: 0s, 0s, var(--vtmn-animation_overlay-duration),
+    var(--vtmn-animation_overlay-duration);
+}
diff --git a/packages/sources/css/src/design-tokens/src/animations.css b/packages/sources/css/src/design-tokens/src/animations.css
index d057830be..714f46612 100644
--- a/packages/sources/css/src/design-tokens/src/animations.css
+++ b/packages/sources/css/src/design-tokens/src/animations.css
@@ -1,13 +1,18 @@
 :root {
-  --vtmn-animation_alert: fade-in 200ms ease-in forwards,
-    slide-left 0.2s ease-in forwards, slide-right 0.2s 7.5s ease-in forwards;
-  --vtmn-animation_alert-mobile: fade_in 200ms ease-in forwards,
-    slide-up 0.2s ease-in forwards, slide-down 0.2s 7.5s ease-in forwards;
+  --vtmn-animation_alert-duration: 7.5s;
+  --vtmn-animation_overlay-duration: 4.5s;
+  --vtmn-animation_alert: fade-in 0.2s ease-in forwards,
+    slide-left 0.2s ease-in forwards,
+    slide-right 0.2s var(--vtmn-animation_alert-duration) ease-in forwards;
+  --vtmn-animation_alert-mobile: fade_in 0.2s ease-in forwards,
+    slide-up 0.2s ease-in forwards,
+    slide-down 0.2s var(--vtmn-animation_alert-duration) ease-in forwards;
   --vtmn-animation_fade-in: fade-in 200ms ease-in-out forwards;
   --vtmn-animation_show-up: show-up 400ms ease-in-out forwards;
   --vtmn-animation_overlay: fade-in 0.5s ease-in-out forwards,
-    show-up 0.5s ease-in-out forwards, fade-out 0.5s 4.5s ease-in-out forwards,
-    vanish 0.5s 4.5s ease-in-out forwards;
+    show-up 0.5s ease-in-out forwards,
+    fade-out 0.5s var(--vtmn-animation_overlay-duration) ease-in-out forwards,
+    vanish 0.5s var(--vtmn-animation_overlay-duration) ease-in-out forwards;
   --vtmn-animation_linear-indeterminate: 1.5s ease-in-out infinite
     linear-indeterminate;
   --vtmn-animation_circle-indeterminate: 4s linear infinite circle-indeterminate;
diff --git a/packages/sources/svelte/src/components/overlays/VtmnAlert/VtmnAlertItem.svelte b/packages/sources/svelte/src/components/overlays/VtmnAlert/VtmnAlertItem.svelte
index 8a6765a33..67081c1d9 100644
--- a/packages/sources/svelte/src/components/overlays/VtmnAlert/VtmnAlertItem.svelte
+++ b/packages/sources/svelte/src/components/overlays/VtmnAlert/VtmnAlertItem.svelte
@@ -2,7 +2,12 @@
   import VtmnButton from '../../actions/VtmnButton/VtmnButton.svelte';
   import { createEventDispatcher, onDestroy, onMount } from 'svelte';
   import { cn } from '../../../utils/classnames';
-  import { VTMN_ALERT_VARIANT } from './enums';
+  import {
+    VTMN_ALERT_TIMEOUT,
+    VTMN_ALERT_VARIANT,
+    CSS_ANIMATION_TIME_MS,
+    INFINITE_TIMEOUT_MS,
+  } from './enums';
 
   /**
    * @type {'info'|'success'|'danger'|'warning'} variant of the alert
@@ -32,7 +37,7 @@
    * Can't be above 8000ms.
    * Set to 0 to keep the alert visible
    */
-  export let timeout = 8000;
+  export let timeout = VTMN_ALERT_TIMEOUT;
 
   /**
    * @type {string} aria label on the button
@@ -49,18 +54,34 @@
   const closeHandler = () => dispatch('close');
   const _clearTimeout = () => timeoutId && clearTimeout(timeoutId);
   const _setTimeout = () =>
-    (timeoutId = timeout && setTimeout(closeHandler, timeout));
+    (timeoutId =
+      typeof timeout === 'number' &&
+      setTimeout(
+        closeHandler,
+        (timeout < Infinity ? timeout : INFINITE_TIMEOUT_MS) +
+          CSS_ANIMATION_TIME_MS,
+      ));
   onDestroy(_clearTimeout);
   onMount(_setTimeout);
+
   $: componentClass = cn(
     'vtmn-alert',
-    timeout > 0 && 'show',
+    typeof timeout === 'number' && 'show animate-delay',
     variant && `vtmn-alert_variant--${variant}`,
     className,
   );
 </script>
 
-<div class={componentClass} role="alert" tabindex="-1" {...$$restProps}>
+<div
+  class={componentClass}
+  style:--vtmn-animation_alert-duration={typeof timeout === 'number' &&
+  timeout < Infinity
+    ? `${timeout}ms`
+    : `${INFINITE_TIMEOUT_MS}ms`}
+  role="alert"
+  tabindex="-1"
+  {...$$restProps}
+>
   <div class="vtmn-alert_content" role="document">
     <div class="vtmn-alert_content-title">
       {#if $$slots.title}
diff --git a/packages/sources/svelte/src/components/overlays/VtmnAlert/enums.js b/packages/sources/svelte/src/components/overlays/VtmnAlert/enums.js
index 4482082c9..6ea35b65b 100644
--- a/packages/sources/svelte/src/components/overlays/VtmnAlert/enums.js
+++ b/packages/sources/svelte/src/components/overlays/VtmnAlert/enums.js
@@ -1,5 +1,9 @@
 export const VTMN_ALERT_TIMEOUT = 8000;
 
+export const CSS_ANIMATION_TIME_MS = 700;
+
+export const INFINITE_TIMEOUT_MS = 9999000;
+
 export const VTMN_ALERT_VARIANT = {
   INFO: 'info',
   WARNING: 'warning',
diff --git a/packages/sources/svelte/src/components/overlays/VtmnAlert/test/vtmnAlertItem.spec.js b/packages/sources/svelte/src/components/overlays/VtmnAlert/test/vtmnAlertItem.spec.js
index 8f88f53c6..6732afe2a 100644
--- a/packages/sources/svelte/src/components/overlays/VtmnAlert/test/vtmnAlertItem.spec.js
+++ b/packages/sources/svelte/src/components/overlays/VtmnAlert/test/vtmnAlertItem.spec.js
@@ -2,6 +2,7 @@ import '@testing-library/jest-dom';
 import { fireEvent, render, waitFor } from '@testing-library/svelte';
 import VtmnAlertItem from '../VtmnAlertItem.svelte';
 import VtmnAlertItemWithSlot from './VtmnAlertItemWithSlots.test.svelte';
+import { CSS_ANIMATION_TIME_MS } from '../enums';
 
 const timeout = 5000;
 
@@ -165,7 +166,7 @@ describe('VtmnAlertItem', () => {
     component.$on('close', handleClick);
     expect(handleClick).toHaveBeenCalledTimes(0);
     await waitFor(() => expect(handleClick).toHaveBeenCalledTimes(1), {
-      timeout: 100,
+      timeout: 100 + CSS_ANIMATION_TIME_MS,
     });
   });
 
diff --git a/packages/sources/svelte/src/components/overlays/VtmnSnackbar/VtmnSnackbar.svelte b/packages/sources/svelte/src/components/overlays/VtmnSnackbar/VtmnSnackbar.svelte
index 3481eb8e2..ce17f6172 100644
--- a/packages/sources/svelte/src/components/overlays/VtmnSnackbar/VtmnSnackbar.svelte
+++ b/packages/sources/svelte/src/components/overlays/VtmnSnackbar/VtmnSnackbar.svelte
@@ -7,7 +7,9 @@
 
 {#each $vtmnSnackbarStore as snackbar (snackbar.id)}
   <VtmnSnackbarItem
-    timeout={VTMN_SNACKBAR_TIMEOUT}
+    timeout={typeof snackbar.timeout === 'number'
+      ? snackbar.timeout
+      : VTMN_SNACKBAR_TIMEOUT}
     content={snackbar.content}
     withCloseButton={snackbar.withCloseButton}
     actionLabel={snackbar.action.label}
diff --git a/packages/sources/svelte/src/components/overlays/VtmnSnackbar/VtmnSnackbarItem.svelte b/packages/sources/svelte/src/components/overlays/VtmnSnackbar/VtmnSnackbarItem.svelte
index 01d091b89..aaf195fd4 100644
--- a/packages/sources/svelte/src/components/overlays/VtmnSnackbar/VtmnSnackbarItem.svelte
+++ b/packages/sources/svelte/src/components/overlays/VtmnSnackbar/VtmnSnackbarItem.svelte
@@ -2,6 +2,7 @@
   import { cn } from '../../../utils/classnames';
   import VtmnButton from '../../actions/VtmnButton/VtmnButton.svelte';
   import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+  import { INFINITE_TIMEOUT_MS, CSS_ANIMATION_TIME_MS } from './enum';
 
   /**
    * @type {string} text write into the snackbar
@@ -31,20 +32,33 @@
   export { className as class };
 
   let timeoutId;
-
   const dispatch = createEventDispatcher();
   const closeHandler = () => dispatch('close');
   const actionHandler = () => dispatch('action');
   const _clearTimeout = () => timeoutId && clearTimeout(timeoutId);
-  const _setTimeout = () => (timeoutId = setTimeout(closeHandler, timeout));
+  const _setTimeout = () =>
+    (timeoutId =
+      typeof timeout === 'number' &&
+      setTimeout(
+        closeHandler,
+        (timeout < Infinity ? timeout : INFINITE_TIMEOUT_MS) +
+          CSS_ANIMATION_TIME_MS,
+      ));
 
   onDestroy(_clearTimeout);
   onMount(_setTimeout);
 
-  $: componentClass = cn('vtmn-snackbar', 'show', className);
+  $: componentClass = cn('vtmn-snackbar show animate-delay', className);
 </script>
 
-<div class={componentClass} role="status">
+<div
+  class={componentClass}
+  style:--vtmn-animation_overlay-duration={typeof timeout === 'number' &&
+  timeout < Infinity
+    ? `${timeout}ms`
+    : `${INFINITE_TIMEOUT_MS}ms`}
+  role="status"
+>
   <div class="vtmn-snackbar_content">
     {content}
   </div>
diff --git a/packages/sources/svelte/src/components/overlays/VtmnSnackbar/enum.js b/packages/sources/svelte/src/components/overlays/VtmnSnackbar/enum.js
index 8509649c9..cf2d0eba8 100644
--- a/packages/sources/svelte/src/components/overlays/VtmnSnackbar/enum.js
+++ b/packages/sources/svelte/src/components/overlays/VtmnSnackbar/enum.js
@@ -1 +1,3 @@
-export const VTMN_SNACKBAR_TIMEOUT = 5000;
+export const VTMN_SNACKBAR_TIMEOUT = 4500;
+export const INFINITE_TIMEOUT_MS = 9999000;
+export const CSS_ANIMATION_TIME_MS = 500; // sum total animation css + safety threshold
diff --git a/packages/sources/svelte/src/components/overlays/VtmnSnackbar/test/VtmnSnackbar.spec.js b/packages/sources/svelte/src/components/overlays/VtmnSnackbar/test/VtmnSnackbar.spec.js
index f107ce0af..632c3c669 100644
--- a/packages/sources/svelte/src/components/overlays/VtmnSnackbar/test/VtmnSnackbar.spec.js
+++ b/packages/sources/svelte/src/components/overlays/VtmnSnackbar/test/VtmnSnackbar.spec.js
@@ -3,6 +3,7 @@ import '@testing-library/jest-dom';
 import { fireEvent, render, waitFor } from '@testing-library/svelte';
 
 import VtmnSnackbarItem from '../VtmnSnackbarItem.svelte';
+import { CSS_ANIMATION_TIME_MS } from '../enum';
 
 describe('VtmnSnackbar', () => {
   const timeout = 1000;
@@ -43,7 +44,7 @@ describe('VtmnSnackbar', () => {
     component.$on('close', handleClick);
     expect(handleClick).toHaveBeenCalledTimes(0);
     await waitFor(() => expect(handleClick).toHaveBeenCalledTimes(1), {
-      timeout: 100,
+      timeout: 100 + CSS_ANIMATION_TIME_MS,
     });
   });
   test('Should trigger event on click button close', async () => {
diff --git a/packages/sources/svelte/src/components/overlays/VtmnSnackbar/vtmnSnackbarStore.js b/packages/sources/svelte/src/components/overlays/VtmnSnackbar/vtmnSnackbarStore.js
index 252ba5977..66023f177 100644
--- a/packages/sources/svelte/src/components/overlays/VtmnSnackbar/vtmnSnackbarStore.js
+++ b/packages/sources/svelte/src/components/overlays/VtmnSnackbar/vtmnSnackbarStore.js
@@ -6,9 +6,15 @@ class VtmnSnackbarStore {
     this._snackbar = writable([]);
   }
 
-  send({ content, withCloseButton, action }) {
+  send({ content, withCloseButton, action, timeout }) {
     this._snackbar.set([
-      { content, withCloseButton, action, id: `vtmn-snackbar-${uuid()}` },
+      {
+        content,
+        withCloseButton,
+        action,
+        timeout,
+        id: `vtmn-snackbar-${uuid()}`,
+      },
     ]);
   }
 
diff --git a/packages/sources/svelte/src/components/overlays/VtmnToast/VtmnToastItem.svelte b/packages/sources/svelte/src/components/overlays/VtmnToast/VtmnToastItem.svelte
index 338754efb..a8d3e15cb 100644
--- a/packages/sources/svelte/src/components/overlays/VtmnToast/VtmnToastItem.svelte
+++ b/packages/sources/svelte/src/components/overlays/VtmnToast/VtmnToastItem.svelte
@@ -2,6 +2,7 @@
   import VtmnButton from '../../actions/VtmnButton/VtmnButton.svelte';
   import { createEventDispatcher, onDestroy, onMount } from 'svelte';
   import { cn } from '../../../utils/classnames';
+  import { INFINITE_TIMEOUT_MS, CSS_ANIMATION_TIME_MS } from './enums';
 
   /**
    * @type {boolean} display the toast with an icon
@@ -36,19 +37,34 @@
   const dispatch = createEventDispatcher();
   const closeHandler = () => dispatch('close');
   const _clearTimeout = () => timeoutId && clearTimeout(timeoutId);
-  const _setTimeout = () => (timeoutId = setTimeout(closeHandler, timeout));
+  const _setTimeout = () =>
+    (timeoutId =
+      typeof timeout === 'number' &&
+      setTimeout(
+        closeHandler,
+        (timeout < Infinity ? timeout : INFINITE_TIMEOUT_MS) +
+          CSS_ANIMATION_TIME_MS,
+      ));
   onDestroy(_clearTimeout);
   onMount(_setTimeout);
 
   $: componentClass = cn(
     'vtmn-toast',
-    'show',
+    timeout > 0 && 'show animate-delay',
     withIcon && 'vtmn-toast--with-icon-info',
     className,
   );
 </script>
 
-<div class={componentClass} role="status" {...$$restProps}>
+<div
+  class={componentClass}
+  style:--vtmn-animation_overlay-duration={typeof timeout === 'number' &&
+  timeout < Infinity
+    ? `${timeout}ms`
+    : `${INFINITE_TIMEOUT_MS}ms`}
+  role="status"
+  {...$$restProps}
+>
   <div class="vtmn-toast_content">{content}</div>
   {#if withCloseButton}
     <VtmnButton
diff --git a/packages/sources/svelte/src/components/overlays/VtmnToast/enums.js b/packages/sources/svelte/src/components/overlays/VtmnToast/enums.js
index b1c84a8c7..efe8f941d 100644
--- a/packages/sources/svelte/src/components/overlays/VtmnToast/enums.js
+++ b/packages/sources/svelte/src/components/overlays/VtmnToast/enums.js
@@ -1 +1,3 @@
-export const VTMN_TOAST_TIMEOUT = 5000;
+export const VTMN_TOAST_TIMEOUT = 4500;
+export const INFINITE_TIMEOUT_MS = 9999000;
+export const CSS_ANIMATION_TIME_MS = 500; // sum total animation css + safety threshold
diff --git a/packages/sources/svelte/src/components/overlays/VtmnToast/test/vtmnToastItem.spec.js b/packages/sources/svelte/src/components/overlays/VtmnToast/test/vtmnToastItem.spec.js
index f7561b546..57ae204c4 100644
--- a/packages/sources/svelte/src/components/overlays/VtmnToast/test/vtmnToastItem.spec.js
+++ b/packages/sources/svelte/src/components/overlays/VtmnToast/test/vtmnToastItem.spec.js
@@ -2,6 +2,7 @@ import '@testing-library/jest-dom';
 
 import { fireEvent, render, waitFor } from '@testing-library/svelte';
 import VtmnToastItem from '../VtmnToastItem.svelte';
+import { CSS_ANIMATION_TIME_MS } from '../../VtmnSnackbar/enum';
 
 const timeout = 5000;
 
@@ -36,7 +37,9 @@ describe('VtmnToastItem', () => {
       timeout,
       style: '--position: 1;',
     });
-    expect(getToast(container)).toHaveAttribute('style', '--position: 1;');
+    expect(
+      getToast(container).getAttribute('style').includes('--position: 1;'),
+    ).toBeTruthy();
   });
   test('Should pass custom class to the toast', () => {
     const { container } = render(VtmnToastItem, {
@@ -100,7 +103,7 @@ describe('VtmnToastItem', () => {
     component.$on('close', handleClick);
     expect(handleClick).toHaveBeenCalledTimes(0);
     await waitFor(() => expect(handleClick).toHaveBeenCalledTimes(1), {
-      timeout: 100,
+      timeout: 100 + CSS_ANIMATION_TIME_MS,
     });
   });
 });
diff --git a/packages/sources/svelte/src/components/overlays/VtmnToast/vtmnToastStore.js b/packages/sources/svelte/src/components/overlays/VtmnToast/vtmnToastStore.js
index 954a50d3a..68edd164d 100644
--- a/packages/sources/svelte/src/components/overlays/VtmnToast/vtmnToastStore.js
+++ b/packages/sources/svelte/src/components/overlays/VtmnToast/vtmnToastStore.js
@@ -6,10 +6,16 @@ class VtmnToastStore {
     this._toasts = writable([]);
   }
 
-  send({ content, withCloseButton, withIcon }) {
+  send({ content, withCloseButton, withIcon, timeout }) {
     this._toasts.update((state) => [
       ...state,
-      { content, withCloseButton, withIcon, id: `vtmn-toast-${uuid()}` },
+      {
+        content,
+        withCloseButton,
+        withIcon,
+        timeout,
+        id: `vtmn-toast-${uuid()}`,
+      },
     ]);
   }
 

From a83a260d364a1986bbfe547a23e96019c24ce0b0 Mon Sep 17 00:00:00 2001
From: Vendeville Antoine <antoine.vendeville@decathlon.com>
Date: Fri, 9 Feb 2024 17:56:58 +0100
Subject: [PATCH 2/3] fix(@vtmn/svelte): change doc

---
 .../src/components/overlays/VtmnAlert/VtmnAlertItem.svelte     | 3 +--
 .../components/overlays/VtmnSnackbar/VtmnSnackbarItem.svelte   | 1 +
 .../src/components/overlays/VtmnToast/VtmnToastItem.svelte     | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/sources/svelte/src/components/overlays/VtmnAlert/VtmnAlertItem.svelte b/packages/sources/svelte/src/components/overlays/VtmnAlert/VtmnAlertItem.svelte
index 67081c1d9..97d48646b 100644
--- a/packages/sources/svelte/src/components/overlays/VtmnAlert/VtmnAlertItem.svelte
+++ b/packages/sources/svelte/src/components/overlays/VtmnAlert/VtmnAlertItem.svelte
@@ -34,8 +34,7 @@
 
   /**
    * @type {number} time (ms) before the alert disappears
-   * Can't be above 8000ms.
-   * Set to 0 to keep the alert visible
+   * Set to Infinity to keep the alert visible
    */
   export let timeout = VTMN_ALERT_TIMEOUT;
 
diff --git a/packages/sources/svelte/src/components/overlays/VtmnSnackbar/VtmnSnackbarItem.svelte b/packages/sources/svelte/src/components/overlays/VtmnSnackbar/VtmnSnackbarItem.svelte
index aaf195fd4..dc86f7481 100644
--- a/packages/sources/svelte/src/components/overlays/VtmnSnackbar/VtmnSnackbarItem.svelte
+++ b/packages/sources/svelte/src/components/overlays/VtmnSnackbar/VtmnSnackbarItem.svelte
@@ -22,6 +22,7 @@
 
   /**
    * @type {number} timeout before the component execute the close action.
+   * Set to Infinity to keep the snackbar visible
    */
   export let timeout;
 
diff --git a/packages/sources/svelte/src/components/overlays/VtmnToast/VtmnToastItem.svelte b/packages/sources/svelte/src/components/overlays/VtmnToast/VtmnToastItem.svelte
index a8d3e15cb..2aceabf4e 100644
--- a/packages/sources/svelte/src/components/overlays/VtmnToast/VtmnToastItem.svelte
+++ b/packages/sources/svelte/src/components/overlays/VtmnToast/VtmnToastItem.svelte
@@ -23,6 +23,7 @@
 
   /**
    * @type {number} Time (ms) before the component dispatch automatically 'close'
+   * Set to Infinity to keep the toast visible
    */
   export let timeout;
 

From d7f4588f2cd73d4bbd820c9ff3ce118e73a35df3 Mon Sep 17 00:00:00 2001
From: Vendeville Antoine <antoine.vendeville@decathlon.com>
Date: Mon, 12 Feb 2024 10:56:26 +0100
Subject: [PATCH 3/3] fix: add margin for long text

---
 packages/sources/css/src/components/overlays/alert/src/index.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/sources/css/src/components/overlays/alert/src/index.css b/packages/sources/css/src/components/overlays/alert/src/index.css
index 90dd632e2..00e678cc4 100644
--- a/packages/sources/css/src/components/overlays/alert/src/index.css
+++ b/packages/sources/css/src/components/overlays/alert/src/index.css
@@ -112,6 +112,7 @@
   position: fixed;
   inset-block-start: rem(32px);
   inset-inline-end: rem(16px);
+  margin-left: rem(16px);
   animation: var(--vtmn-animation_alert);
 }