From 3be6fb463f6c6a9319bbe55f91ca4bd079e11dc9 Mon Sep 17 00:00:00 2001
From: Simone Mastromattei <smastrom@proton.me>
Date: Sat, 6 Apr 2024 19:16:19 +0200
Subject: [PATCH] 2.3.0 (#47)

* Core - Remove lightningcss bug workaround

* Core - Implement `avoidDuplicates`

* Notifications - Add duplicate animation, add aria-atomic everywhere

* Core - Refactor `useVisibilityChange`

* Core - Expose `isStreamPaused`

* Notifications - Implement `NotificationProgress`

* Core, NotivueKeyboard - Cleanup

* Notifications - Fix `--nv-accent` fallback value computation

* Demo - Add new controls, cleanup

* Pkg - Edit verify script, bump v2.3.0

* Tests - Add NotivueProgress to Notifications test file

* Core - Add singular named import aliases to any exported CSS file

* Demo - Add duplicate effect to custom notifications

* Tests, Notifications - Add duplicate class test

* Tests - Add `avoidDuplicates` tests

* Tests - Up tests deps

* Demo - Up deps
---
 demo/app.vue                                  |  8 ++-
 demo/assets/style.css                         |  2 +-
 .../FriendRequestNotification.vue             | 33 +++++++++-
 .../SimpleNotification.vue                    | 31 ++++++++-
 demo/components/nav/Nav.vue                   |  2 +-
 .../nav/NavNotificationsCustomization.vue     | 35 +++++-----
 demo/components/nav/NavNotivueConfig.vue      | 65 +++++++------------
 demo/components/nav/NavNotivuePosition.vue    | 15 ++---
 demo/nuxt.config.ts                           |  7 +-
 demo/package.json                             |  8 +--
 demo/utils/store.ts                           |  5 ++
 .../{Notifications.vue => Notification.vue}   |  6 +-
 .../Notifications/NotificationProgress.vue    | 23 +++++++
 packages/notivue/Notifications/constants.ts   |  2 +
 .../Notifications/notifications-progress.css  | 46 +++++++++++++
 .../notivue/Notifications/notifications.css   | 39 +++++++++--
 packages/notivue/Notivue/AriaLive.vue         |  1 +
 packages/notivue/Notivue/NotivueImpl.vue      |  4 +-
 .../composables/useVisibilityChange.ts        | 30 ---------
 .../Notivue/composables/useWindowFocus.ts     | 35 ++++++++++
 .../NotivueKeyboard/NotivueKeyboardImpl.vue   |  1 -
 packages/notivue/core/animations.css          | 10 +--
 packages/notivue/core/constants.ts            |  1 +
 packages/notivue/core/createNotivue.ts        |  2 +-
 packages/notivue/core/createStore.ts          | 57 ++++++++++++++--
 packages/notivue/core/types.ts                |  5 +-
 packages/notivue/core/useStore.ts             |  5 +-
 packages/notivue/core/utils.ts                | 12 +++-
 packages/notivue/index.ts                     |  5 +-
 packages/notivue/nuxt/module.json             |  2 +-
 packages/notivue/nuxt/module.mjs              |  1 +
 packages/notivue/package.json                 | 10 ++-
 packages/notivue/scripts/verify-tarball.sh    |  2 +-
 packages/notivue/vite.config.ts               |  1 +
 tests/Notifications/components/Notivue.vue    | 16 ++++-
 tests/Notifications/elements.cy.ts            | 21 +++++-
 tests/Notivue/components/Notivue.vue          |  4 +-
 tests/Notivue/config-duplicates.cy.ts         | 51 +++++++++++++++
 .../cypress/support/commands-notifications.ts |  8 +--
 tests/package.json                            | 22 +++----
 40 files changed, 462 insertions(+), 171 deletions(-)
 rename packages/notivue/Notifications/{Notifications.vue => Notification.vue} (91%)
 create mode 100644 packages/notivue/Notifications/NotificationProgress.vue
 create mode 100644 packages/notivue/Notifications/notifications-progress.css
 delete mode 100644 packages/notivue/Notivue/composables/useVisibilityChange.ts
 create mode 100644 packages/notivue/Notivue/composables/useWindowFocus.ts
 create mode 100644 tests/Notivue/config-duplicates.cy.ts

diff --git a/demo/app.vue b/demo/app.vue
index 07d331ab..233e3845 100644
--- a/demo/app.vue
+++ b/demo/app.vue
@@ -39,7 +39,7 @@ watch(
             :item="item as NotivueItem<FriendRequestNotificationProps>"
          />
 
-         <NotivueSwipe v-else :item="item" :disabled="!state.enableSwipe">
+         <NotivueSwipe v-else :item :disabled="!state.enableSwipe">
             <UploadNotification
                v-if="item.props.isUploadNotifiation"
                :item="item as NotivueItem<UploadNotificationProps>"
@@ -52,10 +52,12 @@ watch(
 
             <Notification
                v-else
-               :item="item"
+               :item
                :theme="{ ...themes[state.theme], '--nv-y-align-has-title': 'flex-start' }"
                :icons="state.outlinedIcons ? outlinedIcons : undefined"
-            />
+            >
+               <NotificationProgress :item v-if="state.hasProgress" />
+            </Notification>
          </NotivueSwipe>
       </Notivue>
    </NotivueKeyboard>
diff --git a/demo/assets/style.css b/demo/assets/style.css
index 5d82c279..8d3c45e6 100644
--- a/demo/assets/style.css
+++ b/demo/assets/style.css
@@ -40,7 +40,7 @@
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    --app-font-family: 'PT Sans Narrow', Avenir, Helvetica, Arial, sans-serif;
-   --nav-height: 260px;
+   --nav-height: 280px;
    --royal-blue: #438bff;
    --focus-ring: 0px 0px 0px 2px #fff, 0px 0px 0px 4px var(--royal-blue);
    --focus-ring-xl: 0px 0px 0px 2px #fff, 0px 0px 0px 5px var(--royal-blue);
diff --git a/demo/components/custom-notifications/FriendRequestNotification.vue b/demo/components/custom-notifications/FriendRequestNotification.vue
index 82882bee..ebc8bc61 100644
--- a/demo/components/custom-notifications/FriendRequestNotification.vue
+++ b/demo/components/custom-notifications/FriendRequestNotification.vue
@@ -15,7 +15,15 @@ const { elementsTabIndex } = useNotivueKeyboard()
 </script>
 
 <template>
-   <div class="Notification">
+   <div
+      :key="item.duplicates"
+      :class="[
+         'Notification',
+         {
+            Duplicate_Anim: item.duplicates > 0,
+         },
+      ]"
+   >
       <div class="Avatar">
          <img :src="item.props.profilePicture" alt="profile" class="Picture" />
          <span class="OnlineDot" />
@@ -30,14 +38,14 @@ const { elementsTabIndex } = useNotivueKeyboard()
          </div>
          <nav class="Buttons">
             <button
-               role="button"
+               type="button"
                @click="item.clear"
                class="Button ButtonReverse"
                :tabIndex="elementsTabIndex"
             >
                Deny
             </button>
-            <button role="button" @click="item.clear" class="Button" :tabIndex="elementsTabIndex">
+            <button type="button" @click="item.clear" class="Button" :tabIndex="elementsTabIndex">
                Accept
             </button>
          </nav>
@@ -169,4 +177,23 @@ const { elementsTabIndex } = useNotivueKeyboard()
       opacity: 1;
    }
 }
+
+.Duplicate_Anim {
+   animation: Duplicate_KF 350ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes Duplicate_KF {
+   0% {
+      transform: scale(1);
+   }
+
+   50% {
+      transform: scale(1.05);
+      box-shadow: 0 0 0 3px var(--royal-blue);
+   }
+
+   100% {
+      transform: scale(1);
+   }
+}
 </style>
diff --git a/demo/components/custom-notifications/SimpleNotification.vue b/demo/components/custom-notifications/SimpleNotification.vue
index d373d6ef..e94460e8 100644
--- a/demo/components/custom-notifications/SimpleNotification.vue
+++ b/demo/components/custom-notifications/SimpleNotification.vue
@@ -11,7 +11,15 @@ defineProps<{
 </script>
 
 <template>
-   <div class="Notification">
+   <div
+      :key="item.duplicates"
+      :class="[
+         'Notification',
+         {
+            Duplicate_Anim: item.duplicates > 0,
+         },
+      ]"
+   >
       <p :role="item.ariaRole" :aria-live="item.ariaLive">
          {{ item.message }}
       </p>
@@ -64,4 +72,25 @@ defineProps<{
       height: 1.25rem;
    }
 }
+
+.Duplicate_Anim {
+   animation: Duplicate_KF 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@keyframes Duplicate_KF {
+   0% {
+      transform: scale(1);
+      opacity: 1;
+   }
+
+   50% {
+      transform: scale(1.035);
+      opacity: 0.8;
+   }
+
+   100% {
+      transform: scale(1);
+      opacity: 1;
+   }
+}
 </style>
diff --git a/demo/components/nav/Nav.vue b/demo/components/nav/Nav.vue
index fabef7dd..bee1df2e 100644
--- a/demo/components/nav/Nav.vue
+++ b/demo/components/nav/Nav.vue
@@ -52,7 +52,7 @@ nav {
    z-index: 9999;
    bottom: 0;
    left: 0;
-   height: 260px;
+   height: var(--nav-height);
    position: fixed;
    overflow: hidden;
 
diff --git a/demo/components/nav/NavNotificationsCustomization.vue b/demo/components/nav/NavNotificationsCustomization.vue
index 4a93b843..86de9305 100644
--- a/demo/components/nav/NavNotificationsCustomization.vue
+++ b/demo/components/nav/NavNotificationsCustomization.vue
@@ -6,7 +6,7 @@ function clearAllAndPushOne() {
    push.success(messages.value.success)
 }
 
-async function toggleRenderTitles() {
+function toggleRenderTitles() {
    actions.toggleRenderTitles()
    clearAllAndPushOne()
 }
@@ -15,34 +15,34 @@ function toggleRTL() {
    actions.toggleRTL()
    clearAllAndPushOne()
 }
+
+function toggleProgress() {
+   actions.toggleProgress()
+   clearAllAndPushOne()
+}
+
+const btnProps = {
+   class: 'ButtonBase SwitchButton',
+   role: 'switch',
+}
 </script>
 
 <template>
    <div class="Controls">
-      <button
-         class="ButtonBase SwitchButton"
-         role="switch"
-         :aria-checked="state.renderTitles"
-         @click="toggleRenderTitles"
-      >
+      <button v-bind="btnProps" :aria-checked="state.hasProgress" @click="toggleProgress">
+         Progress
+      </button>
+      <button v-bind="btnProps" :aria-checked="state.renderTitles" @click="toggleRenderTitles">
          Titles
       </button>
       <button
-         class="ButtonBase SwitchButton"
-         role="switch"
+         v-bind="btnProps"
          :aria-checked="state.outlinedIcons"
          @click="actions.toggleOutlinedIcons"
       >
          Outlined
       </button>
-      <button
-         class="ButtonBase SwitchButton"
-         role="switch"
-         :aria-checked="state.rtl"
-         @click="toggleRTL"
-      >
-         RTL
-      </button>
+      <button v-bind="btnProps" :aria-checked="state.rtl" @click="toggleRTL">RTL</button>
    </div>
 </template>
 
@@ -53,4 +53,3 @@ function toggleRTL() {
    grid-auto-flow: row;
 }
 </style>
-utils/store
diff --git a/demo/components/nav/NavNotivueConfig.vue b/demo/components/nav/NavNotivueConfig.vue
index 653c9413..3db11f8a 100644
--- a/demo/components/nav/NavNotivueConfig.vue
+++ b/demo/components/nav/NavNotivueConfig.vue
@@ -7,13 +7,6 @@ function togglePauseOnHover() {
    config.update((prevConf) => ({
       pauseOnHover: !prevConf.pauseOnHover,
    }))
-
-   push.info({
-      title: `Pause on hover ${config.pauseOnHover.value ? 'enabled' : 'disabled'}`,
-      message: config.pauseOnHover.value
-         ? 'Notifications will be paused on hover.'
-         : 'Notifications will not be paused on hover.',
-   })
 }
 
 function toggleRtlIfNeeded() {
@@ -26,13 +19,6 @@ function togglePauseOnTouch() {
    config.update((prevConf) => ({
       pauseOnTouch: !prevConf.pauseOnTouch,
    }))
-
-   push.info({
-      title: `Pause on touch ${config.pauseOnTouch.value ? 'enabled' : 'disabled'}`,
-      message: config.pauseOnTouch.value
-         ? 'Notifications will be paused on touch.'
-         : 'Notifications will not be paused on touch.',
-   })
 }
 
 function toggleQueue() {
@@ -43,6 +29,14 @@ function toggleQueue() {
    }))
 }
 
+function toggleNoDupes() {
+   config.update((prevConf) => ({
+      avoidDuplicates: !prevConf.avoidDuplicates,
+   }))
+
+   if (config.avoidDuplicates.value) state.hasProgress = true
+}
+
 const enqueuedLength = computed(() => queue.value.length)
 const isEnqueueDisabled = computed(() => config.limit.value === Infinity)
 const isSwipeDisabled = computed(() => !config.pauseOnHover.value)
@@ -71,14 +65,18 @@ watch(
 watch(config.limit, () => {
    toggleRtlIfNeeded()
 })
+
+const btnProps = {
+   class: 'ButtonBase SwitchButton',
+   role: 'switch',
+}
 </script>
 
 <template>
    <div class="Controls">
       <button
          v-if="isMobile()"
-         class="ButtonBase SwitchButton"
-         role="switch"
+         v-bind="btnProps"
          :aria-checked="config.pauseOnTouch.value"
          @click="togglePauseOnTouch"
       >
@@ -87,8 +85,7 @@ watch(config.limit, () => {
 
       <button
          v-else
-         class="ButtonBase SwitchButton"
-         role="switch"
+         v-bind="btnProps"
          :aria-checked="config.pauseOnHover.value"
          @click="togglePauseOnHover"
       >
@@ -96,18 +93,20 @@ watch(config.limit, () => {
       </button>
 
       <button
-         class="ButtonBase SwitchButton"
+         v-bind="btnProps"
          :disabled="isSwipeDisabled"
-         role="switch"
          :aria-checked="state.enableSwipe"
          @click="actions.toggleSwipe"
       >
          Clear on Swipe
       </button>
 
+      <button v-bind="btnProps" :aria-checked="config.avoidDuplicates.value" @click="toggleNoDupes">
+         No Duplicates
+      </button>
+
       <button
-         class="ButtonBase SwitchButton ButtonTooltip"
-         role="switch"
+         v-bind="btnProps"
          :aria-checked="config.enqueue.value"
          @click="toggleQueue"
          :disabled="isEnqueueDisabled"
@@ -138,6 +137,7 @@ watch(config.limit, () => {
    text-align: center;
    display: flex;
    justify-items: center;
+   padding-right: 1rem;
 
    -webkit-appearance: none;
    appearance: none;
@@ -148,30 +148,9 @@ watch(config.limit, () => {
    background-size: auto 1rem;
 }
 
-.ButtonTooltip {
-   width: 100%;
-}
-
 hr {
    margin: 0.25rem 0;
    border: 0;
    border-bottom: 1px solid var(--divider-color);
 }
 </style>
-
-<style>
-.v-popper__wrapper {
-   max-width: 160px;
-}
-
-.v-popper__inner {
-   background: var(--button-bg-color) !important;
-   color: var(--button-color) !important;
-   font-size: 0.825rem !important;
-   line-height: 1.35;
-}
-
-.v-popper__arrow-outer {
-   border-color: var(--button-bg-color) !important;
-}
-</style>
diff --git a/demo/components/nav/NavNotivuePosition.vue b/demo/components/nav/NavNotivuePosition.vue
index a35af8bb..dea14f63 100644
--- a/demo/components/nav/NavNotivuePosition.vue
+++ b/demo/components/nav/NavNotivuePosition.vue
@@ -18,6 +18,11 @@ const isFullWidth = computed(() => state.maxWidth === '100%')
 function setPosition(position: Position) {
    config.update({ position })
 }
+
+const btnProps = {
+   class: 'ButtonBase SwitchButton Switch',
+   role: 'switch',
+}
 </script>
 
 <template>
@@ -35,17 +40,11 @@ function setPosition(position: Position) {
          <IconsArrowIcon :rotate="position.rotate" />
       </div>
 
-      <button
-         class="ButtonBase SwitchButton Switch"
-         role="switch"
-         :aria-checked="isFullWidth"
-         @click="actions.setFullWidth"
-      >
+      <button v-bind="btnProps" :aria-checked="isFullWidth" @click="actions.setFullWidth">
          Full Width
       </button>
       <button
-         class="ButtonBase SwitchButton Switch"
-         role="switch"
+         v-bind="btnProps"
          :aria-checked="state.centerOnMobile"
          @click="actions.toggleCenterOnMobile"
          :disabled="config.position.value.endsWith('center')"
diff --git a/demo/nuxt.config.ts b/demo/nuxt.config.ts
index 208d21e4..0c410f47 100644
--- a/demo/nuxt.config.ts
+++ b/demo/nuxt.config.ts
@@ -28,5 +28,10 @@ export default defineNuxtConfig({
          transformer: 'lightningcss',
       },
    },
-   css: ['assets/style.css', 'notivue/notifications.css', 'notivue/animations.css'],
+   css: [
+      'assets/style.css',
+      'notivue/notifications.css',
+      'notivue/notifications-progress.css',
+      'notivue/animations.css',
+   ],
 })
diff --git a/demo/package.json b/demo/package.json
index 07219d09..090f8e03 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -10,10 +10,10 @@
    },
    "devDependencies": {
       "@types/luxon": "^3.4.2",
-      "@types/node": "^20.11.16",
-      "lightningcss": "^1.23.0",
-      "nuxt": "^3.10.1",
-      "vue": "^3.4.15"
+      "@types/node": "^20.12.5",
+      "lightningcss": "^1.24.1",
+      "nuxt": "^3.11.2",
+      "vue": "^3.4.21"
    },
    "dependencies": {
       "luxon": "^3.4.4",
diff --git a/demo/utils/store.ts b/demo/utils/store.ts
index cfdc4015..e76d752e 100644
--- a/demo/utils/store.ts
+++ b/demo/utils/store.ts
@@ -8,6 +8,8 @@ const initialState = {
    rtl: false,
    centerOnMobile: false,
    enableSwipe: true,
+   hasProgress: false,
+   noDupes: false,
 }
 
 export function useStore() {
@@ -31,6 +33,9 @@ export function createStore() {
       toggleOutlinedIcons() {
          state.outlinedIcons = !state.outlinedIcons
       },
+      toggleProgress() {
+         state.hasProgress = !state.hasProgress
+      },
       toggleRTL() {
          state.rtl = !state.rtl
          document.documentElement.setAttribute('dir', state.rtl ? 'rtl' : 'ltr')
diff --git a/packages/notivue/Notifications/Notifications.vue b/packages/notivue/Notifications/Notification.vue
similarity index 91%
rename from packages/notivue/Notifications/Notifications.vue
rename to packages/notivue/Notifications/Notification.vue
index f02d0230..ea60e0ae 100644
--- a/packages/notivue/Notifications/Notifications.vue
+++ b/packages/notivue/Notifications/Notification.vue
@@ -19,7 +19,8 @@ watch(
 
 <template>
    <div
-      :class="Cx.NOTIFICATION"
+      :class="[Cx.NOTIFICATION, { [Cx.DUPLICATE]: item.duplicates > 0 }]"
+      :key="item.duplicates"
       :data-notivue="item.type"
       :data-notivue-has-title="Boolean(item.title)"
       :style="theme"
@@ -28,6 +29,7 @@ watch(
          <Transition :name="Cx.TRANSITION" v-if="typeof Icon === 'object'" mode="out-in">
             <Component
                v-if="typeof Icon === 'object'"
+               :key="item.duplicates"
                :is="Icon"
                :class="Cx.ICON"
                aria-hidden="true"
@@ -54,5 +56,7 @@ watch(
          <Component v-if="typeof Close === 'object'" :is="Close" :class="Cx.CLOSE_ICON" />
          <div v-else-if="typeof Close === 'string'" aria-hidden="true" v-text="Close" />
       </button>
+
+      <slot />
    </div>
 </template>
diff --git a/packages/notivue/Notifications/NotificationProgress.vue b/packages/notivue/Notifications/NotificationProgress.vue
new file mode 100644
index 00000000..00d3156f
--- /dev/null
+++ b/packages/notivue/Notifications/NotificationProgress.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { useNotivue, type NotivueItem } from 'notivue'
+
+import { Classes as Cx } from './constants'
+
+const { isStreamPaused } = useNotivue()
+
+defineProps<{
+   item: NotivueItem
+}>()
+</script>
+
+<template>
+   <div
+      v-if="Number.isFinite(item.duration)"
+      :key="item.duplicates"
+      :class="Cx.PROGRESS"
+      :style="{
+         animationPlayState: isStreamPaused ? 'paused' : 'running',
+         '--nv-anim-dur': `${item.duration}ms`,
+      }"
+   />
+</template>
diff --git a/packages/notivue/Notifications/constants.ts b/packages/notivue/Notifications/constants.ts
index 223aab92..d23e7325 100644
--- a/packages/notivue/Notifications/constants.ts
+++ b/packages/notivue/Notifications/constants.ts
@@ -11,6 +11,8 @@ export const Classes = {
    CLOSE: CX + 'close',
    CLOSE_ICON: CX + 'close-icon',
    TRANSITION: CX + 'transition',
+   PROGRESS: CX + 'progress',
+   DUPLICATE: CX + 'duplicate',
 }
 
 export const DEFAULT_NOTIFICATIONS_PROPS = {
diff --git a/packages/notivue/Notifications/notifications-progress.css b/packages/notivue/Notifications/notifications-progress.css
new file mode 100644
index 00000000..50c31ebf
--- /dev/null
+++ b/packages/notivue/Notifications/notifications-progress.css
@@ -0,0 +1,46 @@
+@media (prefers-reduced-motion: no-preference) {
+   .Notivue__notification {
+      &:has(.Notivue__progress) {
+         border-radius: var(--nv-radius, 0) var(--nv-radius, 0) var(--nv-radius, 0) 0;
+
+         & .Notivue__content-message {
+            margin-bottom: 4px;
+         }
+      }
+   }
+
+   .Notivue__progress {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: 4px;
+      background-color: var(--nv-accent);
+      animation: Notivue__progress-kf var(--nv-anim-dur) linear forwards;
+      transform-origin: left;
+      border-radius: 0 var(--nv-radius, 0) var(--nv-radius, 0) 0;
+
+      @media (prefers-reduced-motion: reduce) {
+         animation: none;
+      }
+   }
+
+   [dir='rtl'] .Notivue__progress {
+      transform-origin: right;
+   }
+
+   @keyframes Notivue__progress-kf {
+      0% {
+         transform: scaleX(1);
+      }
+      100% {
+         transform: scaleX(0);
+      }
+   }
+}
+
+@media (prefers-reduced-motion: reduce) {
+   .Notivue__progress {
+      display: none;
+   }
+}
diff --git a/packages/notivue/Notifications/notifications.css b/packages/notivue/Notifications/notifications.css
index c0ed07b3..c7513320 100644
--- a/packages/notivue/Notifications/notifications.css
+++ b/packages/notivue/Notifications/notifications.css
@@ -2,7 +2,7 @@
 [data-notivue='promise-resolve'] {
    --nv-bg: var(--nv-success-bg);
    --nv-fg: var(--nv-success-fg);
-   --nv-accent: var(--nv-success-accent);
+   --nv-accent: var(--nv-success-accent, var(--nv-global-accent));
    --nv-border: var(--nv-success-border);
 }
 
@@ -10,28 +10,28 @@
 [data-notivue='promise-reject'] {
    --nv-bg: var(--nv-error-bg);
    --nv-fg: var(--nv-error-fg);
-   --nv-accent: var(--nv-error-accent);
+   --nv-accent: var(--nv-error-accent, var(--nv-global-accent));
    --nv-border: var(--nv-error-border);
 }
 
 [data-notivue='warning'] {
    --nv-bg: var(--nv-warning-bg);
    --nv-fg: var(--nv-warning-fg);
-   --nv-accent: var(--nv-warning-accent);
+   --nv-accent: var(--nv-warning-accent, var(--nv-global-accent));
    --nv-border: var(--nv-warning-border);
 }
 
 [data-notivue='info'] {
    --nv-bg: var(--nv-info-bg);
    --nv-fg: var(--nv-info-fg);
-   --nv-accent: var(--nv-info-accent);
+   --nv-accent: var(--nv-info-accent, var(--nv-global-accent));
    --nv-border: var(--nv-info-border);
 }
 
 [data-notivue='promise'] {
    --nv-bg: var(--nv-promise-bg);
    --nv-fg: var(--nv-promise-fg);
-   --nv-accent: var(--nv-promise-accent);
+   --nv-accent: var(--nv-promise-accent, var(--nv-global-accent));
    --nv-border: var(--nv-promise-border);
 }
 
@@ -50,7 +50,7 @@
 
    box-shadow:
       var(--nv-shadow, 0 0 rgba(0, 0, 0, 0)),
-      inset var(--tip-width) 0 0 var(--nv-accent, var(--nv-global-accent));
+      inset var(--tip-width) 0 0 var(--nv-accent);
 
    & * {
       box-sizing: border-box;
@@ -71,7 +71,7 @@
    width: var(--nv-icon-size);
    height: var(--nv-icon-size);
    margin: var(--nv-spacing) 0 var(--nv-spacing) var(--nv-spacing);
-   color: var(--nv-accent, var(--nv-global-accent));
+   color: var(--nv-accent);
 }
 
 .Notivue__content {
@@ -201,6 +201,10 @@
    .Notivue__spinner {
       animation: none;
    }
+
+   .Notivue__duplicate {
+      animation: none;
+   }
 }
 
 [dir='rtl'] {
@@ -224,3 +228,24 @@
       margin: var(--nv-spacing) 0 var(--nv-spacing) var(--nv-spacing);
    }
 }
+
+.Notivue__duplicate {
+   animation: Notivue__duplicate-kf 300ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@keyframes Notivue__duplicate-kf {
+   0% {
+      transform: scale(1);
+      opacity: 1;
+   }
+
+   50% {
+      transform: scale(1.035);
+      opacity: 0.8;
+   }
+
+   100% {
+      transform: scale(1);
+      opacity: 1;
+   }
+}
diff --git a/packages/notivue/Notivue/AriaLive.vue b/packages/notivue/Notivue/AriaLive.vue
index b73b8cce..7dda0afc 100644
--- a/packages/notivue/Notivue/AriaLive.vue
+++ b/packages/notivue/Notivue/AriaLive.vue
@@ -27,6 +27,7 @@ const visuallyHidden: CSSProperties = {
       :role="props.item.ariaRole"
       :aria-live="props.item.ariaLive"
       :key="`${item.id}_${item.type}`"
+      aria-atomic="true"
    >
       {{ getAriaLiveContent(props.item) }}
    </div>
diff --git a/packages/notivue/Notivue/NotivueImpl.vue b/packages/notivue/Notivue/NotivueImpl.vue
index 01c3a5a2..a1a0a90e 100644
--- a/packages/notivue/Notivue/NotivueImpl.vue
+++ b/packages/notivue/Notivue/NotivueImpl.vue
@@ -8,7 +8,7 @@ import { useMouseEvents } from './composables/useMouseEvents'
 import { useTouchEvents } from './composables/useTouchEvents'
 import { useNotivueStyles } from './composables/useNotivueStyles'
 import { useRepositioning } from './composables/useRepositioning'
-import { useVisibilityChange } from './composables/useVisibilityChange'
+import { useWindowFocus } from './composables/useWindowFocus'
 import { useReducedMotion } from './composables/useReducedMotion'
 import { getSlotItem, getAriaLabel } from './utils'
 import { DEFAULT_PROPS } from './constants'
@@ -32,7 +32,7 @@ const mouseEvents = useMouseEvents()
 const touchEvents = useTouchEvents()
 
 useReducedMotion()
-useVisibilityChange()
+useWindowFocus()
 useRepositioning()
 </script>
 
diff --git a/packages/notivue/Notivue/composables/useVisibilityChange.ts b/packages/notivue/Notivue/composables/useVisibilityChange.ts
deleted file mode 100644
index d32f0147..00000000
--- a/packages/notivue/Notivue/composables/useVisibilityChange.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { useStore } from '@/core/useStore'
-import { onMounted, onBeforeUnmount } from 'vue'
-
-export function useVisibilityChange() {
-   const { items, config, timeouts } = useStore()
-
-   function onVisibilityChange() {
-      if (timeouts.isStreamFocused.value) return
-
-      if (document.visibilityState === 'visible') {
-         if (config.pauseOnTabChange.value) {
-            timeouts.resume()
-         }
-      } else {
-         if (config.pauseOnTabChange.value) {
-            timeouts.pause()
-         } else {
-            items.clear()
-         }
-      }
-   }
-
-   onMounted(() => {
-      document.addEventListener('visibilitychange', onVisibilityChange)
-   })
-
-   onBeforeUnmount(() => {
-      document.removeEventListener('visibilitychange', onVisibilityChange)
-   })
-}
diff --git a/packages/notivue/Notivue/composables/useWindowFocus.ts b/packages/notivue/Notivue/composables/useWindowFocus.ts
new file mode 100644
index 00000000..86f223e1
--- /dev/null
+++ b/packages/notivue/Notivue/composables/useWindowFocus.ts
@@ -0,0 +1,35 @@
+import { onMounted, onBeforeUnmount } from 'vue'
+
+import { useStore } from '@/core/useStore'
+
+export function useWindowFocus() {
+   const { items, config, timeouts } = useStore()
+
+   function onWinFocus() {
+      if (timeouts.isStreamFocused.value) return
+
+      if (config.pauseOnTabChange.value) {
+         timeouts.resume()
+      }
+   }
+
+   function onWinBlur() {
+      if (timeouts.isStreamFocused.value) return
+
+      if (config.pauseOnTabChange.value) {
+         timeouts.pause()
+      } else {
+         items.clear()
+      }
+   }
+
+   onMounted(() => {
+      window.addEventListener('focus', onWinFocus)
+      window.addEventListener('blur', onWinBlur)
+   })
+
+   onBeforeUnmount(() => {
+      window.removeEventListener('focus', onWinFocus)
+      window.removeEventListener('blur', onWinBlur)
+   })
+}
diff --git a/packages/notivue/NotivueKeyboard/NotivueKeyboardImpl.vue b/packages/notivue/NotivueKeyboard/NotivueKeyboardImpl.vue
index f0fb6d91..5c112726 100644
--- a/packages/notivue/NotivueKeyboard/NotivueKeyboardImpl.vue
+++ b/packages/notivue/NotivueKeyboard/NotivueKeyboardImpl.vue
@@ -403,4 +403,3 @@ onBeforeUnmount(() => {
 <template>
    <slot v-bind="{ containersTabIndex, elementsTabIndex }" />
 </template>
-./useKeyboardFocus
diff --git a/packages/notivue/core/animations.css b/packages/notivue/core/animations.css
index 697bfc28..5ee3b128 100644
--- a/packages/notivue/core/animations.css
+++ b/packages/notivue/core/animations.css
@@ -24,14 +24,6 @@
    animation: Notivue__clearAll-kf 500ms cubic-bezier(0.22, 1, 0.36, 1);
 }
 
-/**
-* Must use 0.01 instead of 0 for translate/scale/rotate
-* to avoid the animation being broken when minifying
-* with LightningCSS / Parcel.
-*
-* https://github.com/parcel-bundler/lightningcss/issues/288
-*/
-
 @keyframes Notivue__enter-kf {
    0% {
       transform: translate3d(0, var(--notivue-ty), 0) scale(0.25);
@@ -51,7 +43,7 @@
    }
 
    100% {
-      transform: translate3d(0, var(--notivue-ty), 0) scale(0.01);
+      transform: translate3d(0, var(--notivue-ty), 0) scale(0);
       opacity: 0;
    }
 }
diff --git a/packages/notivue/core/constants.ts b/packages/notivue/core/constants.ts
index 9a9c75b7..612e14d5 100644
--- a/packages/notivue/core/constants.ts
+++ b/packages/notivue/core/constants.ts
@@ -61,6 +61,7 @@ export const DEFAULT_CONFIG: NotivueConfigRequired = {
    teleportTo: 'body',
    notifications: DEFAULT_NOTIFICATION_OPTIONS,
    limit: Infinity,
+   avoidDuplicates: false,
    animations: {
       enter: CLASS_PREFIX + 'enter',
       leave: CLASS_PREFIX + 'leave',
diff --git a/packages/notivue/core/createNotivue.ts b/packages/notivue/core/createNotivue.ts
index 953b5574..a13c116c 100644
--- a/packages/notivue/core/createNotivue.ts
+++ b/packages/notivue/core/createNotivue.ts
@@ -1,7 +1,7 @@
 import type { App, InjectionKey, Plugin } from 'vue'
 import type { NotivueConfig, NotivueStore } from 'notivue'
 
-import { setPush, createPush as createPush } from './createPush'
+import { setPush, createPush } from './createPush'
 import { createWatchers } from './createWatchers'
 import {
    createConfig,
diff --git a/packages/notivue/core/createStore.ts b/packages/notivue/core/createStore.ts
index 3fb434b7..6e0569ef 100644
--- a/packages/notivue/core/createStore.ts
+++ b/packages/notivue/core/createStore.ts
@@ -1,4 +1,4 @@
-import { ref, shallowRef, computed, triggerRef, nextTick } from 'vue'
+import { ref, shallowRef, computed, triggerRef, nextTick, unref, isRef } from 'vue'
 
 import {
    createRefs,
@@ -8,6 +8,7 @@ import {
 } from './utils'
 import { getSlotItem } from '@/Notivue/utils'
 
+import { isStatic } from './utils'
 import { DEFAULT_CONFIG, NotificationTypeKeys as NKeys } from './constants'
 
 import type {
@@ -96,6 +97,14 @@ export function createItems(config: ConfigSlice, queue: QueueSlice) {
          queue.remove(next.id)
          this.add(next)
       },
+      findDupe(item: StoreItem, entries?: StoreItem[]) {
+         return (entries || this.entries.value).find(
+            (e) =>
+               unref(e.message).replace(/\uFEFF/g, '') === unref(item.message).replace(/\uFEFF/g, '') && // prettier-ignore
+               unref(e.title) === unref(item.title) &&
+               e.type === item.type
+         )
+      },
       get(id: string) {
          return this.entries.value.find((e) => e.id === id)
       },
@@ -177,7 +186,9 @@ export function createAnimations(config: ConfigSlice, items: ItemsSlice, element
 
          window.clearTimeout(item?.timeout as number)
 
-         function onAnimationend() {
+         function onAnimationend(e?: AnimationEvent) {
+            if (e && e.currentTarget !== e.target) return
+
             items.remove(id)
             item?.[isUserTriggered ? 'onManualClear' : 'onAutoClear']?.(getSlotItem(item))
          }
@@ -349,14 +360,47 @@ export function createPushProxies({
          animations.playLeave(id, { isUserTriggered: true, isDestroy })
       },
       push<T extends Obj = Obj>(options: PushOptionsWithInternals<T>) {
-         const createdAt = Date.now()
          const entry = mergeOptions<T>(config.notifications.value, options)
+         const createdAt = Date.now()
 
-         const createTimeout = () => timeouts.create(entry.id, entry.duration)
+         if (config.avoidDuplicates.value && isStatic(entry.type)) {
+            const dupe = items.findDupe(entry as StoreItem)
+
+            if (dupe) {
+               window.clearTimeout(dupe.timeout as number)
+
+               items.update(dupe.id, {
+                  createdAt,
+                  duration: entry.duration,
+                  remaining: undefined,
+                  timeout: timeouts.create(dupe.id, entry.duration),
+                  duplicates: dupe.duplicates + 1,
+               })
+
+               // Trick aria-atomic to announce again the notification
+               isRef(dupe.message) ? (dupe.message.value += '\uFEFF') : (dupe.message += '\uFEFF')
+
+               if (timeouts.isStreamPaused.value) timeouts.pause()
 
-         const isUpdate = [NKeys.PROMISE_RESOLVE, NKeys.PROMISE_REJECT].includes(options.type)
+               items.triggerRef()
+            }
+
+            const queueDupe = items.findDupe(entry as StoreItem, queue.entries.value)
+
+            if (queueDupe) {
+               queue.update(queueDupe.id, {
+                  duration: entry.duration,
+                  createdAt,
+                  duplicates: queueDupe.duplicates + 1,
+               })
+            }
+
+            if (queueDupe || dupe) return
+         }
+
+         const createTimeout = () => timeouts.create(entry.id, entry.duration)
 
-         if (isUpdate) {
+         if (options.type === NKeys.PROMISE_RESOLVE || options.type === NKeys.PROMISE_REJECT) {
             if (queue.get(entry.id)) {
                queue.update(entry.id, { ...entry, createdAt, timeout: createTimeout })
                queue.triggerRef()
@@ -379,6 +423,7 @@ export function createPushProxies({
             const item = {
                ...entry,
                createdAt,
+               duplicates: 0,
                animationAttrs: {
                   class: animations.isReducedMotion.value ? '' : config.animations.value.enter,
                   onAnimationend() {
diff --git a/packages/notivue/core/types.ts b/packages/notivue/core/types.ts
index 7de8d99a..935e69a9 100644
--- a/packages/notivue/core/types.ts
+++ b/packages/notivue/core/types.ts
@@ -77,6 +77,8 @@ export interface NotivueConfig {
    teleportTo?: string | HTMLElement | false
    /** Notifications limit. Defaults to `Infinity`. */
    limit?: number
+   /** Whether to prevent duplicate notifications if already displayed. Duplicates will be announced again and their duration replaces the current one. */
+   avoidDuplicates?: boolean
 }
 
 export type NotivueConfigRequired = DeepRequired<NotivueConfig> & {
@@ -92,6 +94,7 @@ export interface NotificationClearMethods {
 
 export interface ExposedInternalItemData extends NotificationClearMethods {
    createdAt: number
+   duplicates: number
 }
 
 export interface HiddenInternalItemData {
@@ -202,7 +205,7 @@ export interface NotivueComputedEntries {
 
 // New v2.1.0 aliases
 
-export type UseNotivueReturn = ConfigSlice
+export type UseNotivueReturn = ConfigSlice & { isStreamPaused: Readonly<Ref<boolean>> }
 
 export type NotivueNotificationOptions = NotificationOptions
 export type NotivuePosition = Position
diff --git a/packages/notivue/core/useStore.ts b/packages/notivue/core/useStore.ts
index c672c293..3e3636e6 100644
--- a/packages/notivue/core/useStore.ts
+++ b/packages/notivue/core/useStore.ts
@@ -1,4 +1,4 @@
-import { inject, computed, toRefs, reactive } from 'vue'
+import { inject, computed, toRefs, reactive, readonly, ref } from 'vue'
 
 import { isSSR } from './utils'
 import { notivueInjectionKey } from './createNotivue'
@@ -27,11 +27,12 @@ export function useNotivue(): UseNotivueReturn {
       return {
          ...toRefs(reactive(DEFAULT_CONFIG)),
          isTopAlign: computed(() => true),
+         isStreamPaused: readonly(ref(false)),
          update: () => {},
       } as UseNotivueReturn
    }
 
-   return useStore().config
+   return { ...useStore().config, isStreamPaused: readonly(useStore().timeouts.isStreamPaused) }
 }
 
 /**
diff --git a/packages/notivue/core/utils.ts b/packages/notivue/core/utils.ts
index e9c4b2b9..08287235 100644
--- a/packages/notivue/core/utils.ts
+++ b/packages/notivue/core/utils.ts
@@ -1,6 +1,13 @@
 import { reactive, toRaw, toRefs, type ToRefs } from 'vue'
 
-import type { NotivueConfigRequired, Obj, PushOptionsWithInternals } from 'notivue'
+import { NotificationTypeKeys as NKeys } from './constants'
+
+import type {
+   NotificationType,
+   NotivueConfigRequired,
+   Obj,
+   PushOptionsWithInternals,
+} from 'notivue'
 
 export const isSSR = typeof window === 'undefined'
 
@@ -58,3 +65,6 @@ export function toRawConfig<T extends Obj>(config: ToRefs<T>) {
       {}
    ) as T
 }
+
+export const isStatic = (type: NotificationType) =>
+   type === NKeys.SUCCESS || type === NKeys.ERROR || type === NKeys.WARNING || type === NKeys.INFO
diff --git a/packages/notivue/index.ts b/packages/notivue/index.ts
index 40460cbc..44d12d60 100644
--- a/packages/notivue/index.ts
+++ b/packages/notivue/index.ts
@@ -15,8 +15,9 @@ export { updateConfig } from './core/createStore'
 export { default as NotivueKeyboard } from '@/NotivueKeyboard/NotivueKeyboard.vue'
 export { useNotivueKeyboard } from '@/NotivueKeyboard/useNotivueKeyboard'
 
-export { default as Notifications } from '@/Notifications/Notifications.vue'
-export { default as Notification } from '@/Notifications/Notifications.vue'
+export { default as Notifications } from '@/Notifications/Notification.vue'
+export { default as Notification } from '@/Notifications/Notification.vue'
+export { default as NotificationProgress } from '@/Notifications/NotificationProgress.vue'
 export {
    lightTheme,
    pastelTheme,
diff --git a/packages/notivue/nuxt/module.json b/packages/notivue/nuxt/module.json
index 56d951f4..d21954b3 100644
--- a/packages/notivue/nuxt/module.json
+++ b/packages/notivue/nuxt/module.json
@@ -1,5 +1,5 @@
 {
    "name": "notivue/nuxt",
    "configKey": "notivue",
-   "version": "2.2.1"
+   "version": "2.3.0"
 }
diff --git a/packages/notivue/nuxt/module.mjs b/packages/notivue/nuxt/module.mjs
index 1b8dc26c..67dcd979 100644
--- a/packages/notivue/nuxt/module.mjs
+++ b/packages/notivue/nuxt/module.mjs
@@ -75,6 +75,7 @@ const module = defineNuxtModule({
          'NotivueKeyboard',
          'Notifications',
          'Notification',
+         'NotificationProgress',
          'NotivueSwipe',
       ]) {
          await addComponent({ name, export: name, filePath: 'notivue' })
diff --git a/packages/notivue/package.json b/packages/notivue/package.json
index 0531204b..09820e92 100644
--- a/packages/notivue/package.json
+++ b/packages/notivue/package.json
@@ -1,6 +1,6 @@
 {
    "name": "notivue",
-   "version": "2.2.1",
+   "version": "2.3.0",
    "private": false,
    "description": "Fully-featured toast notification system for Vue and Nuxt",
    "keywords": [
@@ -45,8 +45,14 @@
          "types": "./dist/index.d.ts"
       },
       "./notifications.css": "./dist/Notifications/notifications.css",
+      "./notifications-progress.css": "./dist/Notifications/notifications-progress.css",
+      "./notification.css": "./dist/Notifications/notifications.css",
+      "./notification-progress.css": "./dist/Notifications/notifications-progress.css",
       "./animations.css": "./dist/core/animations.css",
       "./astro/notifications.css": "./dist/Notifications/notifications.css",
+      "./astro/notifications-progress.css": "./dist/Notifications/notifications-progress.css",
+      "./astro/notification.css": "./dist/Notifications/notifications.css",
+      "./astro/notification-progress.css": "./dist/Notifications/notifications-progress.css",
       "./astro/animations.css": "./dist/core/animations.css"
    },
    "module": "dist/index.js",
@@ -59,7 +65,7 @@
       "prebuild": "cp ../../README.md ../../LICENSE .",
       "build": "rm -rf dist && vue-tsc && vite build && pnpm build:css",
       "postbuild": "rm -rf *.tgz && npm pack && ./scripts/verify-tarball.sh",
-      "build:css": "esbuild ./Notifications/notifications.css ./core/animations.css --bundle --outdir=dist --minify --target=chrome58,edge16,firefox57,node12,safari11",
+      "build:css": "esbuild ./Notifications/notifications.css ./Notifications/notifications-progress.css ./core/animations.css --bundle --outdir=dist --minify --target=chrome58,edge16,firefox57,node12,safari11",
       "watch": "rm -rf dist && concurrently \"vite build --watch\" \"pnpm build:css --watch\""
    },
    "devDependencies": {
diff --git a/packages/notivue/scripts/verify-tarball.sh b/packages/notivue/scripts/verify-tarball.sh
index 5ddd96ca..c643df00 100755
--- a/packages/notivue/scripts/verify-tarball.sh
+++ b/packages/notivue/scripts/verify-tarball.sh
@@ -14,7 +14,7 @@ mkdir -p $temp_dir
 declare -a files=(
     "README.md" "package.json" "LICENSE"
     "dist/index.js" "dist/index.d.ts" "dist/astro.js"
-    "dist/core/animations.css" "dist/Notifications/notifications.css"
+    "dist/core/animations.css" "dist/Notifications/notifications.css" "dist/Notifications/notifications-progress.css"
     "nuxt/module.mjs" "nuxt/module.cjs" "nuxt/module.d.ts" "nuxt/module.json"
 )
 
diff --git a/packages/notivue/vite.config.ts b/packages/notivue/vite.config.ts
index f2c379a9..0032302f 100644
--- a/packages/notivue/vite.config.ts
+++ b/packages/notivue/vite.config.ts
@@ -85,6 +85,7 @@ const astroReExports = [
 
    'Notifications',
    'Notification',
+   'NotificationProgress',
    'NotivueSwipe',
    'NotivueKeyboard',
 ]
diff --git a/tests/Notifications/components/Notivue.vue b/tests/Notifications/components/Notivue.vue
index a76988d2..284ccece 100644
--- a/tests/Notifications/components/Notivue.vue
+++ b/tests/Notifications/components/Notivue.vue
@@ -1,5 +1,13 @@
 <script setup lang="ts">
-import { push, Notivue, Notifications, NotivueIcons, NotivueTheme, type PushOptions } from 'notivue'
+import {
+   push,
+   Notivue,
+   Notifications,
+   NotificationProgress,
+   NotivueIcons,
+   NotivueTheme,
+   type PushOptions,
+} from 'notivue'
 
 export interface CyNotificationsProps {
    options?: PushOptions
@@ -15,11 +23,13 @@ const cyProps = defineProps<CyNotificationsProps>()
    <div>
       <Notivue v-slot="item">
          <Notifications
-            :item="item"
+            :item
             :icons="cyProps.icons"
             :theme="cyProps.theme"
             :hideClose="cyProps.hideClose"
-         />
+         >
+            <NotificationProgress :item />
+         </Notifications>
       </Notivue>
 
       <button class="Success" @click="push.success(cyProps.options ?? {})">Success</button>
diff --git a/tests/Notifications/elements.cy.ts b/tests/Notifications/elements.cy.ts
index 3541fd07..bdb853c1 100644
--- a/tests/Notifications/elements.cy.ts
+++ b/tests/Notifications/elements.cy.ts
@@ -1,9 +1,12 @@
 import { NotivueIcons, outlinedIcons } from 'notivue'
 
 import { Classes as _Classes } from '@/Notifications/constants'
+import { DEFAULT_ANIM_DURATION } from '@/support/utils'
 
 const { TRANSITION, ...Classes } = _Classes
 
+const defaultClasses = Object.values(Classes).filter((className) => className !== Classes.DUPLICATE)
+
 it('All elements are rendered and only exists one element per class', () => {
    cy.mountNotifications({
       options: {
@@ -15,18 +18,32 @@ it('All elements are rendered and only exists one element per class', () => {
       .get('.Success')
       .click()
 
-   Object.values(Classes).forEach((className) => {
+   defaultClasses.forEach((className) => {
       cy.get(`.${className}`).should('exist').and('have.length', 1)
    })
 })
 
+it('Duplicate class is added correctly', () => {
+   cy.mountNotifications(undefined, {
+      avoidDuplicates: true,
+   })
+
+      .get('.Success')
+      .click()
+      .wait(DEFAULT_ANIM_DURATION)
+      .get('.Success')
+      .click()
+
+   cy.get(`.${Classes.DUPLICATE}`).should('exist').and('have.length', 1)
+})
+
 it('Title is not rendered by default (if empty string) while all other elements are', () => {
    cy.mountNotifications()
 
       .get('.Success')
       .click()
 
-   Object.values(Classes).forEach((className) => {
+   defaultClasses.forEach((className) => {
       if (className === Classes.TITLE) {
          cy.get(`.${className}`).should('not.exist')
       } else {
diff --git a/tests/Notivue/components/Notivue.vue b/tests/Notivue/components/Notivue.vue
index e8c70ba9..fce81a4c 100644
--- a/tests/Notivue/components/Notivue.vue
+++ b/tests/Notivue/components/Notivue.vue
@@ -15,7 +15,8 @@ const cyProps = defineProps<CyNotivueProps>()
 
 const config = useNotivue()
 
-const { pauseOnTouch, pauseOnHover, teleportTo, limit, animations, enqueue } = toRefs(cyProps)
+const { pauseOnTouch, pauseOnHover, teleportTo, limit, animations, enqueue, avoidDuplicates } =
+   toRefs(cyProps)
 
 watchEffect(() => {
    if (animations?.value) config.animations.value = animations.value
@@ -25,6 +26,7 @@ watchEffect(() => {
    if (teleportTo?.value) config.teleportTo.value = teleportTo.value
    if (limit?.value) config.limit.value = limit.value
    if (enqueue?.value) config.enqueue.value = enqueue.value
+   if (avoidDuplicates?.value) config.avoidDuplicates.value = avoidDuplicates.value
 })
 
 function pushAndClear() {
diff --git a/tests/Notivue/config-duplicates.cy.ts b/tests/Notivue/config-duplicates.cy.ts
new file mode 100644
index 00000000..83f72271
--- /dev/null
+++ b/tests/Notivue/config-duplicates.cy.ts
@@ -0,0 +1,51 @@
+import type { VueWrapper } from '@vue/test-utils'
+
+describe('Duplicates', () => {
+   it('Should not create duplicates if static', () => {
+      cy.mountNotivue({ config: { avoidDuplicates: true } })
+
+      for (let i = 0; i < 10; i++) {
+         cy.clickAllStatic()
+      }
+
+      cy.getNotifications().should('have.length', 4, { timeout: 0 })
+   })
+
+   it('Should create duplicates if dynamic', () => {
+      cy.mountNotivue({ config: { avoidDuplicates: true } })
+
+      for (let i = 0; i < 10; i++) {
+         cy.get('.Promise').click()
+      }
+
+      cy.getNotifications().should('have.length', 10, { timeout: 0 })
+   })
+
+   it.only('Should replace duration correctly', () => {
+      cy.mountNotivue({ config: { avoidDuplicates: true } })
+
+      cy.get('.Success').click()
+
+      cy.wait(3000) // Remaining time 3s
+
+      cy.get('.Success').click() // Remaining time 6s
+
+      cy.wait(5000) // Remaining time 1s
+
+      cy.getNotifications().should('have.length', 1, { timeout: 0 })
+   })
+
+   it('Should update config dynamically and work', () => {
+      cy.mountNotivue({ config: { avoidDuplicates: false } })
+
+      cy.get<VueWrapper>('@vue').then((wrapper) => {
+         wrapper.setProps({ avoidDuplicates: true })
+
+         for (let i = 0; i < 10; i++) {
+            cy.clickAllStatic()
+         }
+
+         cy.getNotifications().should('have.length', 4, { timeout: 0 })
+      })
+   })
+})
diff --git a/tests/cypress/support/commands-notifications.ts b/tests/cypress/support/commands-notifications.ts
index f26fc52d..4733ddda 100644
--- a/tests/cypress/support/commands-notifications.ts
+++ b/tests/cypress/support/commands-notifications.ts
@@ -4,12 +4,12 @@ import { Classes } from '@/Notifications/constants'
 
 import Notivue, { CyNotificationsProps } from '@/tests/Notifications/components/Notivue.vue'
 
-import { createNotivue, type NotivueTheme } from 'notivue'
+import { createNotivue, type NotivueTheme, type NotivueConfig } from 'notivue'
 
 declare global {
    namespace Cypress {
       interface Chainable {
-         mountNotifications(props?: CyNotificationsProps): Chainable<any>
+         mountNotifications(props?: CyNotificationsProps, config?: NotivueConfig): Chainable<any>
          checkTheme(theme: NotivueTheme): Chainable<any>
          mountAndCheckTheme(theme: NotivueTheme): Chainable<any>
       }
@@ -24,8 +24,8 @@ Cypress.Commands.add('checkTheme', (theme: NotivueTheme) => {
    })
 })
 
-Cypress.Commands.add('mountNotifications', (props = {}) => {
-   const notivue = createNotivue()
+Cypress.Commands.add('mountNotifications', (props = {}, config = {}) => {
+   const notivue = createNotivue(config)
 
    return mount(Notivue, {
       global: {
diff --git a/tests/package.json b/tests/package.json
index eaac57fe..ed9bcbb6 100644
--- a/tests/package.json
+++ b/tests/package.json
@@ -10,17 +10,17 @@
       "notivue": "workspace:*"
    },
    "devDependencies": {
-      "@types/node": "^20.11.16",
-      "@vitejs/plugin-vue": "^5.0.3",
-      "@vue/test-utils": "^2.4.4",
-      "axe-core": "^4.8.3",
-      "cypress": "^13.6.4",
+      "@types/node": "^20.12.5",
+      "@vitejs/plugin-vue": "^5.0.4",
+      "@vue/test-utils": "^2.4.5",
+      "axe-core": "^4.9.0",
+      "cypress": "^13.7.2",
       "cypress-axe": "^1.5.0",
-      "cypress-real-events": "^1.11.0",
-      "typescript": "^5.3.3",
-      "vite": "^5.0.12",
-      "vitest": "^1.2.2",
-      "vue": "^3.4.15",
-      "vue-tsc": "^1.8.27"
+      "cypress-real-events": "^1.12.0",
+      "typescript": "^5.4.4",
+      "vite": "^5.2.8",
+      "vitest": "^1.4.0",
+      "vue": "^3.4.21",
+      "vue-tsc": "^2.0.10"
    }
 }