srcdev-nuxt-components 9.5.7 → 9.6.1

package/app/components/02.molecules/toast/DisplayToast.vue

@@ -4,13 +4,21 @@
       v-if="privateDisplayToast"
       ref="toastElementRef"
       class="display-toast"
-      :class="[elementClasses, cssStateClass, positionClasses]"
+      :class="elementClasses"
+      :data-state="toastState"
+      :data-position="position"
+      :data-alignment="fullWidth ? 'full-width' : alignment"
+      :data-paused="isPaused ? '' : undefined"
       :data-theme="theme"
       :role="toastRole"
       :aria-live="ariaLive"
       :tabindex="slots.default ? undefined : '0'"
       :aria-describedby="slots.default ? undefined : 'toast-message-' + toastId"
       @keydown.escape="setDismissToast"
+      @pointerenter="isHovered = true"
+      @pointerleave="isHovered = false"
+      @focusin="handleFocusIn"
+      @focusout="handleFocusOut"
     >
       <slot v-if="slots.default"></slot>
 
@@ -32,6 +40,7 @@
         <template v-if="slots.description || toastDescription" #content>
           <slot name="description">{{ toastDescription }}</slot>
         </template>
+        <template v-if="dismissLabel" #dismissLabel>{{ dismissLabel }}</template>
       </component>
       <div v-if="autoDismiss" class="display-toast-progress"></div>
     </div>
@@ -75,18 +84,7 @@ const toastDisplayText = computed(() => props.config?.content?.text ?? "");
 const toastTitle = computed(() => props.config?.content?.title ?? "");
 const toastDescription = computed(() => props.config?.content?.description ?? "");
 const customIcon = computed(() => props.config?.content?.customIcon);
-
-// Computed classes for positioning
-const positionClasses = computed(() => {
-  const classes = [];
-  classes.push(position.value);
-  if (fullWidth.value) {
-    classes.push("full-width");
-  } else {
-    classes.push(alignment.value);
-  }
-  return classes;
-});
+const dismissLabel = computed(() => props.config?.content?.dismissLabel);
 
 /*
  * Accessibility setup
@@ -109,9 +107,30 @@ const ariaLive = computed(() => {
 const externalTriggerModel = defineModel<boolean>({ default: false });
 const privateDisplayToast = ref(false);
 const transitionalState = ref(false);
-const cssStateClass = computed(() => {
-  return transitionalState.value ? "show" : "hide";
-});
+const toastState = computed(() => (transitionalState.value ? "show" : "hide"));
+
+/*
+ * Auto-dismiss pauses while hovered or keyboard-focused (WCAG 2.2.2)
+ */
+const isHovered = ref(false);
+const isFocusPaused = ref(false);
+const isPaused = computed(() => autoDismiss.value && (isHovered.value || isFocusPaused.value));
+let dismissTimer: ReturnType<typeof createPausableTimeout> | null = null;
+
+const handleFocusIn = (event: FocusEvent) => {
+  if (toastElementRef.value) isFocusPaused.value = focusPausesAutoDismiss(toastElementRef.value, event.target);
+};
+
+const handleFocusOut = (event: FocusEvent) => {
+  if (!toastElementRef.value?.contains(event.relatedTarget as Node | null)) isFocusPaused.value = false;
+};
+
+watch(isPaused, (paused) => (paused ? dismissTimer?.pause() : dismissTimer?.resume()));
+
+const clearDismissTimer = () => {
+  dismissTimer?.clear();
+  dismissTimer = null;
+};
 
 /*
  * Computed properties for durations (in ms for CSS)
@@ -123,6 +142,7 @@ const displayDurationMs = computed(() => duration.value + "ms");
  * Lifecycle hooks
  */
 const setDismissToast = async () => {
+  clearDismissTimer();
   transitionalState.value = false;
   await useSleep(revealDuration.value);
 
@@ -144,6 +164,8 @@ const setDismissToast = async () => {
 
   externalTriggerModel.value = false;
   privateDisplayToast.value = false;
+  isHovered.value = false;
+  isFocusPaused.value = false;
 };
 
 watch(
@@ -170,8 +192,9 @@ watch(
       }
 
       if (autoDismiss.value) {
-        await useSleep(duration.value);
-        setDismissToast();
+        clearDismissTimer();
+        dismissTimer = createPausableTimeout(setDismissToast, duration.value);
+        if (isPaused.value) dismissTimer.pause();
       }
     } else if (!newValue && previousValue) {
       // If external model is set to false, dismiss the toast
@@ -183,18 +206,20 @@ watch(
 onBeforeRouteLeave(() => {
   setDismissToast();
 });
+
+onBeforeUnmount(clearDismissTimer);
 </script>
 
 <style lang="css">
 @layer components {
-  @keyframes show {
+  @keyframes display-toast-show {
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }
 
-  @keyframes hideTop {
+  @keyframes display-toast-hide-top {
     0% {
       opacity: 1;
       transform: translateY(0);
@@ -205,7 +230,7 @@ onBeforeRouteLeave(() => {
     }
   }
 
-  @keyframes hideBottom {
+  @keyframes display-toast-hide-bottom {
     0% {
       opacity: 1;
       transform: translateY(0);
@@ -216,7 +241,22 @@ onBeforeRouteLeave(() => {
     }
   }
 
-  @keyframes progress {
+  @keyframes display-toast-fade-in {
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes display-toast-fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes display-toast-progress {
     to {
       transform: scaleX(1);
     }
@@ -228,19 +268,18 @@ onBeforeRouteLeave(() => {
       --_toast-gutter: 24px;
     }
 
-    /* See the matching comment in DisplayToastProvider.vue — same fix, same rationale. */
-
     display: block;
     overflow: hidden;
+    overflow-wrap: anywhere;
     position: fixed;
     margin: 0;
     opacity: 0;
+    max-inline-size: var(--display-toast-max-width, min(48rem, 100% - 2 * var(--_toast-gutter)));
 
     z-index: var(--display-toast-z-index, 999999);
 
-    /* Focus styles for accessibility */
     &:focus {
-      outline: 2px solid var(--theme-ring);
+      outline: 2px solid var(--display-toast-focus-ring-colour, var(--theme-ring));
       outline-offset: 2px;
     }
 
@@ -248,71 +287,91 @@ onBeforeRouteLeave(() => {
       outline: none;
     }
 
-    &.show {
+    &[data-state="show"] {
       @supports (animation-timing-function: linear(0, 1)) {
-        animation: show v-bind(revealDurationMs) var(--spring-easing) forwards;
+        animation: display-toast-show v-bind(revealDurationMs) var(--spring-easing) forwards;
       }
 
       @supports not (animation-timing-function: linear(0, 1)) {
-        animation: show calc(v-bind(revealDurationMs) / 2) linear forwards;
+        animation: display-toast-show calc(v-bind(revealDurationMs) / 2) linear forwards;
       }
     }
 
-    &.hide {
+    &[data-state="hide"] {
       @supports (animation-timing-function: linear(0, 1)) {
-        animation: hideTop v-bind(revealDurationMs) var(--spring-easing) forwards;
+        animation: display-toast-hide-top v-bind(revealDurationMs) var(--spring-easing) forwards;
       }
 
       @supports not (animation-timing-function: linear(0, 1)) {
-        animation: hideTop calc(v-bind(revealDurationMs) / 2) linear forwards;
+        animation: display-toast-hide-top calc(v-bind(revealDurationMs) / 2) linear forwards;
       }
 
-      &.bottom {
+      &[data-position="bottom"] {
         @supports (animation-timing-function: linear(0, 1)) {
-          animation: hideBottom v-bind(revealDurationMs) var(--spring-easing) forwards;
+          animation: display-toast-hide-bottom v-bind(revealDurationMs) var(--spring-easing) forwards;
         }
 
         @supports not (animation-timing-function: linear(0, 1)) {
-          animation: hideBottom calc(v-bind(revealDurationMs) / 2) linear forwards;
+          animation: display-toast-hide-bottom calc(v-bind(revealDurationMs) / 2) linear forwards;
         }
       }
     }
 
-    /*
-  * Default is centre for smaller screens
-  */
+    /* Centred on small screens */
     inset-inline: var(--_toast-gutter);
     margin-inline: auto;
 
     @media (width >= 600px) {
-      &.left {
+      &[data-alignment="left"] {
         inset-inline-start: var(--_toast-gutter);
         inset-inline-end: unset;
       }
 
-      &.right {
+      &[data-alignment="right"] {
         inset-inline-end: var(--_toast-gutter);
         inset-inline-start: unset;
       }
 
-      &.center {
-        &:not(.full-width) {
-          inset-inline: 0;
-          margin-inline: auto;
-          width: max-content;
-        }
+      &[data-alignment="center"] {
+        inset-inline: 0;
+        margin-inline: auto;
+        width: fit-content;
       }
     }
 
-    &.top {
+    &[data-alignment="full-width"] {
+      max-inline-size: none;
+    }
+
+    &[data-position="top"] {
       inset-block-start: var(--_toast-gutter);
       transform: translateY(-30px);
     }
-    &.bottom {
+
+    &[data-position="bottom"] {
       inset-block-end: var(--_toast-gutter);
       transform: translateY(30px);
     }
 
+    /* After the position and state rules so it wins at equal specificity. */
+    @media (prefers-reduced-motion: reduce) {
+      &[data-position] {
+        transform: none;
+      }
+
+      &[data-state="show"][data-position] {
+        animation: display-toast-fade-in v-bind(revealDurationMs) linear forwards;
+      }
+
+      &[data-state="hide"][data-position] {
+        animation: display-toast-fade-out v-bind(revealDurationMs) linear forwards;
+      }
+    }
+
+    &[data-paused] .display-toast-progress {
+      animation-play-state: paused;
+    }
+
     .display-toast-progress {
       position: absolute;
       inset-block-end: 4px;
@@ -320,9 +379,9 @@ onBeforeRouteLeave(() => {
       height: 3px;
       transform: scaleX(0);
       transform-origin: right;
-      background: var(--theme-accent);
+      background: var(--display-toast-progress-colour, var(--theme-accent));
       border-radius: inherit;
-      animation: progress v-bind(displayDurationMs) linear forwards;
+      animation: display-toast-progress v-bind(displayDurationMs) linear forwards;
     }
   }
 }

package/app/components/02.molecules/toast/DisplayToastProvider.vue

@@ -3,7 +3,8 @@
     <TransitionGroup
       tag="div"
       class="display-toast-provider"
-      :class="[position, fullWidth ? 'full-width' : alignment]"
+      :data-position="position"
+      :data-alignment="fullWidth ? 'full-width' : alignment"
       @before-leave="onBeforeLeave"
       @after-leave="onAfterLeave"
       @after-enter="onAfterEnter"
@@ -21,7 +22,12 @@
         :aria-live="ariaLiveFor(entry)"
         tabindex="0"
         :aria-describedby="'toast-message-' + entry.id"
+        :data-paused="isPaused(entry) ? '' : undefined"
         @keydown.escape="handleDismiss(entry.id)"
+        @pointerenter="setPauseReason(entry.id, 'hover', true)"
+        @pointerleave="setPauseReason(entry.id, 'hover', false)"
+        @focusin="handleFocusIn(entry.id, $event)"
+        @focusout="handleFocusOut(entry.id, $event)"
       >
         <component
           :is="maskedFor(entry) ? AlertMaskedContent : AlertContent"
@@ -37,6 +43,9 @@
           <template v-if="entry.config.content?.description" #content>
             {{ entry.config.content?.description }}
           </template>
+          <template v-if="entry.config.content?.dismissLabel" #dismissLabel>
+            {{ entry.config.content?.dismissLabel }}
+          </template>
         </component>
         <div v-if="autoDismissFor(entry)" class="display-toast-provider-progress"></div>
       </div>
@@ -83,21 +92,50 @@ const roleFor = (entry: ToastQueueEntry) => (["error", "warning"].includes(theme
 const ariaLiveFor = (entry: ToastQueueEntry) =>
   ["error", "warning"].includes(themeFor(entry)) ? "assertive" : "polite";
 
-const timers = new Map<string, ReturnType<typeof setTimeout>>();
+const timers = new Map<string, ReturnType<typeof createPausableTimeout>>();
 
-const handleDismiss = (id: string) => {
+// Auto-dismiss pauses while hovered or keyboard-focused (WCAG 2.2.2).
+const pauseReasons = ref<Record<string, { hover: boolean; focus: boolean }>>({});
+
+const isPaused = (entry: ToastQueueEntry) => {
+  const reasons = pauseReasons.value[entry.id];
+  return autoDismissFor(entry) && !!reasons && (reasons.hover || reasons.focus);
+};
+
+const setPauseReason = (id: string, reason: "hover" | "focus", active: boolean) => {
+  const reasons = { hover: false, focus: false, ...pauseReasons.value[id], [reason]: active };
+  pauseReasons.value = { ...pauseReasons.value, [id]: reasons };
   const timer = timers.get(id);
-  if (timer !== undefined) {
-    clearTimeout(timer);
-    timers.delete(id);
+  if (reasons.hover || reasons.focus) timer?.pause();
+  else timer?.resume();
+};
+
+const handleFocusIn = (id: string, event: FocusEvent) => {
+  setPauseReason(id, "focus", focusPausesAutoDismiss(event.currentTarget as HTMLElement, event.target));
+};
+
+const handleFocusOut = (id: string, event: FocusEvent) => {
+  if (!(event.currentTarget as HTMLElement).contains(event.relatedTarget as Node | null)) {
+    setPauseReason(id, "focus", false);
   }
+};
+
+const forgetEntry = (id: string) => {
+  timers.get(id)?.clear();
+  timers.delete(id);
+  const { [id]: _removed, ...rest } = pauseReasons.value;
+  pauseReasons.value = rest;
+};
+
+const handleDismiss = (id: string) => {
+  forgetEntry(id);
   dismiss(id);
 };
 
 const startTimer = (entry: ToastQueueEntry) => {
   if (!autoDismissFor(entry)) return;
-  const timer = setTimeout(() => {
-    timers.delete(entry.id);
+  const timer = createPausableTimeout(() => {
+    forgetEntry(entry.id);
     dismiss(entry.id);
   }, displayDurationFor(entry));
   timers.set(entry.id, timer);
@@ -110,11 +148,8 @@ watch(
 
     // Clear timers for entries that no longer exist (e.g. clear()).
     const entryIds = new Set(entries.map((e) => e.id));
-    for (const [id, timer] of timers) {
-      if (!entryIds.has(id)) {
-        clearTimeout(timer);
-        timers.delete(id);
-      }
+    for (const id of timers.keys()) {
+      if (!entryIds.has(id)) forgetEntry(id);
     }
 
     const visibleCount = entries.filter((e) => e.status === "visible").length;
@@ -157,14 +192,14 @@ const onAfterEnter = (el: Element) => {
 };
 
 onUnmounted(() => {
-  timers.forEach(clearTimeout);
+  timers.forEach((timer) => timer.clear());
   timers.clear();
 });
 </script>
 
 <style lang="css">
 @layer components {
-  @keyframes hideTop {
+  @keyframes display-toast-provider-hide-top {
     0% {
       opacity: 1;
       transform: translateY(0);
@@ -175,7 +210,7 @@ onUnmounted(() => {
     }
   }
 
-  @keyframes hideBottom {
+  @keyframes display-toast-provider-hide-bottom {
     0% {
       opacity: 1;
       transform: translateY(0);
@@ -186,13 +221,13 @@ onUnmounted(() => {
     }
   }
 
-  @keyframes progress {
+  @keyframes display-toast-provider-progress {
     to {
       transform: scaleX(1);
     }
   }
 
-  @keyframes showTop {
+  @keyframes display-toast-provider-show-top {
     from {
       opacity: 0;
       transform: translateY(-30px);
@@ -203,7 +238,16 @@ onUnmounted(() => {
     }
   }
 
-  @keyframes showBottom {
+  @keyframes display-toast-provider-fade {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes display-toast-provider-show-bottom {
     from {
       opacity: 0;
       transform: translateY(30px);
@@ -220,12 +264,6 @@ onUnmounted(() => {
       --_gutter: 24px;
     }
 
-    /* No public token before 2026-08-22 and hardcoded far below DisplayDialog's own
-       --display-dialog-z-index default (999999) — a toast is meant to float above ordinary page
-       chrome, but 100 loses to any consumer's sticky header. Matches DisplayDialog's default so
-       toasts also clear a modal's own overlay; the two ties on DOM/paint order if both happen to
-       be visible at once, which is an acceptable edge case for a transient notification. */
-
     position: fixed;
     display: flex;
     flex-direction: column;
@@ -235,36 +273,36 @@ onUnmounted(() => {
     inset-inline: var(--_gutter);
     margin-inline: auto;
     width: max-content;
-    max-width: calc(100% - 2 * var(--_gutter));
+    max-width: var(--display-toast-provider-max-width, min(48rem, 100% - 2 * var(--_gutter)));
 
-    &.top {
+    &[data-position="top"] {
       inset-block-start: var(--_gutter);
     }
 
-    &.bottom {
+    &[data-position="bottom"] {
       inset-block-end: var(--_gutter);
       flex-direction: column-reverse;
     }
 
     @media (width >= 600px) {
-      &.left {
+      &[data-alignment="left"] {
         inset-inline-start: var(--_gutter);
         inset-inline-end: unset;
         margin-inline: 0;
       }
 
-      &.right {
+      &[data-alignment="right"] {
         inset-inline-end: var(--_gutter);
         inset-inline-start: unset;
         margin-inline: 0;
       }
 
-      &.center:not(.full-width) {
+      &[data-alignment="center"] {
         inset-inline: 0;
         margin-inline: auto;
       }
 
-      &.full-width {
+      &[data-alignment="full-width"] {
         inset-inline: var(--_gutter);
         width: unset;
         max-width: unset;
@@ -279,9 +317,10 @@ onUnmounted(() => {
     display: block;
     position: relative;
     overflow: hidden;
+    overflow-wrap: anywhere;
 
     &:focus {
-      outline: 2px solid var(--theme-ring);
+      outline: 2px solid var(--display-toast-provider-focus-ring-colour, var(--theme-ring));
       outline-offset: 2px;
     }
 
@@ -290,7 +329,7 @@ onUnmounted(() => {
     }
 
     /* TransitionGroup enter/leave */
-    .display-toast-provider.top & {
+    .display-toast-provider[data-position="top"] & {
       &.v-enter-from {
         opacity: 0;
         transform: translateY(-30px);
@@ -298,11 +337,11 @@ onUnmounted(() => {
 
       &.v-enter-active {
         @supports (animation-timing-function: linear(0, 1)) {
-          animation: showTop var(--_reveal) var(--spring-easing) forwards;
+          animation: display-toast-provider-show-top var(--_reveal) var(--spring-easing) forwards;
         }
 
         @supports not (animation-timing-function: linear(0, 1)) {
-          animation: showTop calc(var(--_reveal) / 2) linear forwards;
+          animation: display-toast-provider-show-top calc(var(--_reveal) / 2) linear forwards;
         }
       }
 
@@ -310,16 +349,16 @@ onUnmounted(() => {
         position: absolute;
 
         @supports (animation-timing-function: linear(0, 1)) {
-          animation: hideTop var(--_reveal) var(--spring-easing) forwards;
+          animation: display-toast-provider-hide-top var(--_reveal) var(--spring-easing) forwards;
         }
 
         @supports not (animation-timing-function: linear(0, 1)) {
-          animation: hideTop calc(var(--_reveal) / 2) linear forwards;
+          animation: display-toast-provider-hide-top calc(var(--_reveal) / 2) linear forwards;
         }
       }
     }
 
-    .display-toast-provider.bottom & {
+    .display-toast-provider[data-position="bottom"] & {
       &.v-enter-from {
         opacity: 0;
         transform: translateY(30px);
@@ -327,11 +366,11 @@ onUnmounted(() => {
 
       &.v-enter-active {
         @supports (animation-timing-function: linear(0, 1)) {
-          animation: showBottom var(--_reveal) var(--spring-easing) forwards;
+          animation: display-toast-provider-show-bottom var(--_reveal) var(--spring-easing) forwards;
         }
 
         @supports not (animation-timing-function: linear(0, 1)) {
-          animation: showBottom calc(var(--_reveal) / 2) linear forwards;
+          animation: display-toast-provider-show-bottom calc(var(--_reveal) / 2) linear forwards;
         }
       }
 
@@ -339,11 +378,11 @@ onUnmounted(() => {
         position: absolute;
 
         @supports (animation-timing-function: linear(0, 1)) {
-          animation: hideBottom var(--_reveal) var(--spring-easing) forwards;
+          animation: display-toast-provider-hide-bottom var(--_reveal) var(--spring-easing) forwards;
         }
 
         @supports not (animation-timing-function: linear(0, 1)) {
-          animation: hideBottom calc(var(--_reveal) / 2) linear forwards;
+          animation: display-toast-provider-hide-bottom calc(var(--_reveal) / 2) linear forwards;
         }
       }
     }
@@ -352,6 +391,31 @@ onUnmounted(() => {
       transition: transform 0.3s ease;
     }
 
+    /* Same selector shape as the position rules above, later in source, so it wins. */
+    @media (prefers-reduced-motion: reduce) {
+      .display-toast-provider[data-position] & {
+        &.v-enter-from {
+          transform: none;
+        }
+
+        &.v-enter-active {
+          animation: display-toast-provider-fade var(--_reveal) linear forwards;
+        }
+
+        &.v-leave-active {
+          animation: display-toast-provider-fade var(--_reveal) linear reverse forwards;
+        }
+
+        &.v-move {
+          transition: none;
+        }
+      }
+    }
+
+    &[data-paused] .display-toast-provider-progress {
+      animation-play-state: paused;
+    }
+
     .display-toast-provider-progress {
       position: absolute;
       inset-block-end: 4px;
@@ -359,9 +423,9 @@ onUnmounted(() => {
       height: 3px;
       transform: scaleX(0);
       transform-origin: right;
-      background: var(--theme-accent);
+      background: var(--display-toast-provider-progress-colour, var(--theme-accent));
       border-radius: inherit;
-      animation: progress var(--_duration) linear forwards;
+      animation: display-toast-provider-progress var(--_duration) linear forwards;
     }
   }
 }

package/app/components/02.molecules/toast/stories/DisplayToast.stories.ts

@@ -193,3 +193,26 @@ FullWidth.args = {
   position: "top",
   autoDismiss: false,
 };
+
+export const StressTest = Template.bind({});
+StressTest.storyName = "Stress Test (Worst-Case Data)";
+StressTest.args = {
+  theme: "error",
+  alignment: "center",
+  autoDismiss: true,
+  duration: 10000,
+  title: "Donaudampfschifffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft",
+  description:
+    "Ihre Zahlung konnte leider nicht verarbeitet werden. Bitte überprüfen Sie Ihre Kartendaten und versuchen Sie es erneut, oder wenden Sie sich an Ihre Bank. https://example.com/a-very-long-path-segment-without-any-spaces-at-all-in-it",
+};
+StressTest.parameters = {
+  docs: {
+    description: {
+      story:
+        "Long unbroken title, long German description and a long URL, centred (the alignment most likely to overflow). " +
+        "Toasts are fixed to the viewport, so use Storybook's viewport toolbar to check narrow screens. Try every alignment " +
+        "and fullWidth: the toast should stay inside the viewport, cap at 48rem on wide screens, and wrap the unbroken text. " +
+        "Hover it or tab to it to check the progress bar and the 10s timer pause.",
+    },
+  },
+};