srcdev-nuxt-components 9.6.10 → 9.6.12

package/app/components/01.atoms/animations/marquee-scroller/MarqueeScroller.vue

@@ -3,42 +3,48 @@
     v-if="displayComponent"
     ref="rootEl"
     class="marquee-scroller"
-    :class="{ reverse: reverse, paused: isPaused, 'reduced-motion': prefersReducedMotion }"
+    :class="elementClasses"
+    :data-reverse="reverse ? '' : undefined"
+    :data-paused="isPaused ? '' : undefined"
+    :data-reduced-motion="prefersReducedMotion ? '' : undefined"
     role="region"
     :aria-label="ariaLabel"
     :aria-live="isPaused ? 'polite' : 'off'"
     tabindex="0"
     @keydown="handleKeydown"
-    @focus="handleFocus"
-    @blur="handleBlur"
+    @focusin="handleFocusIn"
+    @focusout="handleFocusOut"
   >
-    <div class="sr-only">
+    <div class="marquee-scroller-description">
       {{ ariaDescription }}
     </div>
 
-    <button
+    <InputButton
       v-if="showControls"
-      class="control-btn"
-      :aria-label="isPaused ? playLabel : pauseLabel"
       type="button"
+      variant="inline"
+      :button-text="isPaused ? playLabel : pauseLabel"
+      style-class-passthrough="marquee-scroller-control"
       @click="togglePause"
     >
-      <slot name="toggle-icon" :is-paused="isPaused">
-        <Icon :name="isPaused ? playIcon : pauseIcon" aria-hidden="true" />
-      </slot>
-    </button>
-
-    <div class="marquee-track" :aria-hidden="!isPaused">
-      <div ref="groupEl" class="marquee-group">
+      <template #iconOnly>
+        <slot name="toggle-icon" :is-paused="isPaused">
+          <Icon :name="isPaused ? playIcon : pauseIcon" aria-hidden="true" />
+        </slot>
+      </template>
+    </InputButton>
+
+    <div class="marquee-scroller-track" :aria-hidden="isPaused ? undefined : 'true'">
+      <div ref="groupEl" class="marquee-scroller-group">
         <template v-for="copy in repeatCount" :key="copy">
-          <div v-for="item in marqueeData" :key="`${copy}-${item.id}`" class="item">
+          <div v-for="item in marqueeData" :key="`${copy}-${item.id}`" class="marquee-scroller-item">
             <slot :name="item.id"></slot>
           </div>
         </template>
       </div>
-      <div class="marquee-group" aria-hidden="true">
+      <div class="marquee-scroller-group" aria-hidden="true" inert>
         <template v-for="copy in repeatCount" :key="copy">
-          <div v-for="item in marqueeData" :key="`duplicate-${copy}-${item.id}`" class="item">
+          <div v-for="item in marqueeData" :key="`duplicate-${copy}-${item.id}`" class="marquee-scroller-item">
             <slot :name="item.id"></slot>
           </div>
         </template>
@@ -65,10 +71,11 @@ interface Props {
   playIcon?: string;
   /** Iconify icon name shown on the control button while playing. Ignored if the toggle-icon slot is used. */
   pauseIcon?: string;
-  /** Control button aria-label while paused — override for localisation. */
+  /** Control button label while paused — override for localisation. */
   playLabel?: string;
-  /** Control button aria-label while playing — override for localisation. */
+  /** Control button label while playing — override for localisation. */
   pauseLabel?: string;
+  styleClassPassthrough?: string | string[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -84,74 +91,83 @@ const props = withDefaults(defineProps<Props>(), {
   pauseIcon: "mdi:pause",
   playLabel: "Play animation",
   pauseLabel: "Pause animation",
+  styleClassPassthrough: () => [],
 });
 
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const MAX_REPEAT_COUNT = 50;
+
 const displayComponent = ref(false);
 const isPaused = ref(false);
-const isFocused = ref(false);
 const prefersReducedMotion = ref(false);
 const rootEl = ref<HTMLElement | null>(null);
 const groupEl = ref<HTMLElement | null>(null);
 const repeatCount = ref(1);
+let pausedByFocus = false;
 let resizeObserver: ResizeObserver | null = null;
+let reducedMotionQuery: MediaQueryList | null = null;
 
 const height = computed(() => props.itemConfig.height || "50px");
 const width = computed(() => props.itemConfig.width || "50px");
 const gap = computed(() => props.itemConfig.gap || "16px");
 const itemCount = computed(() => props.marqueeData.length * repeatCount.value);
 
-// A single copy of marqueeData may not be wide enough to fill a wide container — if it
-// isn't, the loop briefly shows empty space before snapping back into view. Repeat the
-// data enough times per track group to always exceed the container's width.
+// One copy of marqueeData may not fill a wide container; repeat it until a group covers the width.
 const updateRepeatCount = () => {
   if (!rootEl.value || !groupEl.value || props.marqueeData.length === 0) return;
   const baseGroupWidth = groupEl.value.scrollWidth / repeatCount.value;
   if (baseGroupWidth <= 0) return;
-  const needed = Math.max(1, Math.ceil(rootEl.value.offsetWidth / baseGroupWidth));
+  const needed = Math.min(MAX_REPEAT_COUNT, Math.max(1, Math.ceil(rootEl.value.offsetWidth / baseGroupWidth)));
   if (needed !== repeatCount.value) repeatCount.value = needed;
 };
 
-// Check for reduced motion preference
+const handleReducedMotionChange = (event: MediaQueryListEvent) => {
+  prefersReducedMotion.value = event.matches;
+  if (event.matches) isPaused.value = true;
+};
+
 const checkReducedMotion = () => {
-  if (typeof window !== "undefined" && props.respectReducedMotion) {
-    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-    prefersReducedMotion.value = mediaQuery.matches;
-
-    // Listen for changes
-    mediaQuery.addEventListener("change", (e) => {
-      prefersReducedMotion.value = e.matches;
-      if (e.matches) {
-        isPaused.value = true;
-      }
-    });
-  }
+  if (typeof window === "undefined" || !props.respectReducedMotion) return;
+  reducedMotionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+  prefersReducedMotion.value = reducedMotionQuery.matches;
+  reducedMotionQuery.addEventListener("change", handleReducedMotionChange);
 };
 
 const togglePause = () => {
   isPaused.value = !isPaused.value;
+  pausedByFocus = false;
 };
 
 const handleKeydown = (event: KeyboardEvent) => {
+  if (event.target !== event.currentTarget) return;
   if (event.key === " " || event.key === "Spacebar") {
     event.preventDefault();
     togglePause();
   }
 };
 
-const handleFocus = () => {
-  isFocused.value = true;
-  if (props.respectReducedMotion) {
+const handleFocusIn = (event: FocusEvent) => {
+  if ((event.target as Element | null)?.closest(".marquee-scroller-control")) return;
+  if (!isPaused.value) {
     isPaused.value = true;
+    pausedByFocus = true;
   }
 };
 
-const handleBlur = () => {
-  isFocused.value = false;
-  if (!prefersReducedMotion.value) {
-    isPaused.value = false;
-  }
+const handleFocusOut = (event: FocusEvent) => {
+  if (rootEl.value?.contains(event.relatedTarget as Node | null)) return;
+  if (pausedByFocus && !prefersReducedMotion.value) isPaused.value = false;
+  pausedByFocus = false;
 };
 
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+
 watch(
   () => [props.marqueeData, props.itemConfig],
   () => {
@@ -165,7 +181,6 @@ onMounted(async () => {
   displayComponent.value = true;
   checkReducedMotion();
 
-  // Auto-pause if user prefers reduced motion
   if (prefersReducedMotion.value) {
     isPaused.value = true;
   }
@@ -181,6 +196,7 @@ onMounted(async () => {
 
 onUnmounted(() => {
   resizeObserver?.disconnect();
+  reducedMotionQuery?.removeEventListener("change", handleReducedMotionChange);
 });
 </script>
 
@@ -188,6 +204,8 @@ onUnmounted(() => {
 @layer components {
   .marquee-scroller {
     --_fade-width: var(--marquee-scroller-fade-width, 10%);
+    --_focus-outline: var(--marquee-scroller-focus-outline-width, 2px) solid
+      var(--marquee-scroller-focus-outline-colour, var(--theme-ring));
 
     width: 100%;
     height: v-bind(height);
@@ -200,32 +218,12 @@ onUnmounted(() => {
     );
     position: relative;
 
-    /* Focus styles */
     &:focus-visible {
-      outline: var(--marquee-scroller-focus-outline-width, 2px) solid var(--theme-ring);
+      outline: var(--_focus-outline);
       outline-offset: var(--marquee-scroller-focus-outline-offset, 2px);
     }
 
-    /* Paused state */
-    &.paused .marquee-track {
-      animation-play-state: paused;
-    }
-
-    /* Reduced motion - disable animation completely */
-    &.reduced-motion .marquee-track {
-      animation: none !important;
-    }
-
-    &:hover .marquee-track {
-      animation-play-state: paused;
-    }
-
-    &:hover .item {
-      filter: var(--marquee-scroller-group-hover-filter, grayscale(1));
-    }
-
-    /* Screen reader only text */
-    .sr-only {
+    .marquee-scroller-description {
       position: absolute;
       width: 1px;
       height: 1px;
@@ -237,12 +235,13 @@ onUnmounted(() => {
       border: 0;
     }
 
-    /* Control button */
-    .control-btn {
+    .marquee-scroller-control.input-button {
       position: absolute;
       inset-block-start: var(--marquee-scroller-control-offset, 8px);
       inset-inline-end: var(--marquee-scroller-control-offset, 8px);
       z-index: 10;
+      box-sizing: border-box;
+      min-height: auto;
       background: var(--marquee-scroller-control-background-colour, rgba(0, 0, 0, 0.7));
       color: var(--marquee-scroller-control-text-colour, white);
       border: none;
@@ -252,41 +251,54 @@ onUnmounted(() => {
       font-size: var(--marquee-scroller-control-font-size, 14px);
       transition: background-color var(--marquee-scroller-control-transition-duration, 0.2s);
 
+      & .input-button-icon {
+        margin: 0;
+      }
+
       &:hover {
         background-color: var(--marquee-scroller-control-background-colour-hover, rgba(0, 0, 0, 0.9));
       }
 
       &:focus-visible {
-        outline: var(--marquee-scroller-focus-outline-width, 2px) solid var(--theme-ring);
-        outline-offset: 2px;
+        outline: var(--_focus-outline);
+        outline-offset: var(--marquee-scroller-focus-outline-offset, 2px);
       }
     }
 
-    .marquee-track {
+    .marquee-scroller-track {
       --_track-shift: calc(v-bind(itemCount) * (v-bind(width) + v-bind(gap)));
 
       display: flex;
       width: fit-content;
       gap: v-bind(gap);
-      animation: marqueeMove v-bind(animationRuntime) linear infinite;
-    }
+      animation: marquee-scroller-move v-bind(animationRuntime) linear infinite;
 
-    &.reverse .marquee-track {
-      animation-direction: reverse;
+      .marquee-scroller[data-reverse] & {
+        animation-direction: reverse;
+      }
+
+      .marquee-scroller[data-paused] &,
+      .marquee-scroller:hover & {
+        animation-play-state: paused;
+      }
+
+      .marquee-scroller[data-reduced-motion] & {
+        animation: none;
+      }
     }
 
-    .marquee-group {
+    .marquee-scroller-group {
       display: flex;
       gap: v-bind(gap);
       flex-shrink: 0;
     }
 
-    .item {
+    .marquee-scroller-item {
       width: v-bind(width);
       height: v-bind(height);
       display: grid;
       place-items: center;
-      aspect-ratio: 1 / 1;
+      overflow-wrap: anywhere;
       transition: filter var(--marquee-scroller-item-transition-duration, 0.5s);
       flex-shrink: 0;
 
@@ -294,13 +306,17 @@ onUnmounted(() => {
         var(--marquee-scroller-item-border-colour, var(--slate-10));
       border-radius: var(--marquee-scroller-item-border-radius, 4px);
 
+      .marquee-scroller:hover & {
+        filter: var(--marquee-scroller-group-hover-filter, grayscale(1));
+      }
+
       &:hover {
         filter: var(--marquee-scroller-item-hover-filter, grayscale(0));
       }
     }
   }
 
-  @keyframes marqueeMove {
+  @keyframes marquee-scroller-move {
     from {
       transform: translateX(0);
     }
@@ -310,21 +326,17 @@ onUnmounted(() => {
     }
   }
 
-  /* High contrast mode support */
   @media (prefers-contrast: high) {
-    .marquee-scroller {
-      .control-btn {
-        background: ButtonFace;
-        color: ButtonText;
-        border: var(--marquee-scroller-control-border-width, 1px) solid ButtonText;
-      }
+    .marquee-scroller .marquee-scroller-control.input-button {
+      background: ButtonFace;
+      color: ButtonText;
+      border: var(--marquee-scroller-control-border-width, 1px) solid ButtonText;
     }
   }
 
-  /* Respect user's motion preferences */
   @media (prefers-reduced-motion: reduce) {
-    .marquee-scroller .marquee-track {
-      animation: none !important;
+    .marquee-scroller .marquee-scroller-track {
+      animation: none;
     }
   }
 }

package/app/components/01.atoms/animations/marquee-scroller/stories/MarqueeScroller.stories.ts

@@ -1,7 +1,8 @@
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import MarqueeScroller from "../MarqueeScroller.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
-import type { MarqueeItem, MarqueeItemConfig } from "~/types/components";
+import CanvasSwitcher from "../../../canvas-switcher/CanvasSwitcher.vue";
+import type { MarqueeItem, MarqueeItemConfig, MediaCanvas } from "~/types/components";
 
 // animationRuntime is a CSS duration string ("30s") on the component — Storybook has no native
 // range control for that, so the story exposes a plain-number `animationRuntimeSeconds` arg and
@@ -19,6 +20,7 @@ type StoryArgs = {
   pauseIcon?: string;
   playLabel?: string;
   pauseLabel?: string;
+  styleClassPassthrough?: string[];
 };
 
 const logoData: MarqueeItem[] = [
@@ -113,12 +115,31 @@ const meta: Meta<StoryArgs> = {
       description: "Control button aria-label while playing — override for localisation",
       table: { category: "Control button" },
     },
+    styleClassPassthrough: { control: "object", table: { category: "Styling" } },
   },
+  decorators: [
+    (story, context) => ({
+      components: { story, CanvasSwitcher },
+      setup() {
+        const canvasName = ref<MediaCanvas>(context.parameters.initialCanvas ?? "fullWidthCanvas");
+        return { canvasName };
+      },
+      template: `
+        <div style="padding: 1.2rem 1.6rem; border-block-end: 1px solid currentColor;">
+          <CanvasSwitcher v-model:canvas-name="canvasName" />
+        </div>
+        <div :class="canvasName" style="margin-inline: auto; padding: 2rem; outline: 1px dashed currentColor;">
+          <story />
+        </div>
+      `,
+    }),
+  ],
   parameters: {
+    layout: "fullscreen",
     docs: {
       description: {
         component:
-          "An infinite horizontal scroller for logos, badges, or other small repeating items. Items are provided via `marqueeData` plus one dynamically-named slot per item id. Pauses on hover/focus, supports keyboard control (spacebar), and respects prefers-reduced-motion.",
+          "An infinite horizontal scroller for logos, badges, or other small repeating items. Items come from `marqueeData` plus one dynamically named slot per item id; each slot renders in fixed `itemConfig` boxes, and the data repeats until it fills the container. Pauses on hover and whenever focus is inside it (including focusable content in an item), toggles with the spacebar on the region or the optional `show-controls` button, and respects prefers-reduced-motion. All copy (`aria-label`, `aria-description`, `play-label`, `pause-label`) is a prop for localisation.",
       },
     },
   },
@@ -136,6 +157,9 @@ export const WithControls: Story = {
     showControls: true,
     respectReducedMotion: true,
   },
+  parameters: {
+    docs: { description: { story: "Five placeholder logos with the visible pause/play button. Hover pauses the track and greys every item except the hovered one." } },
+  },
   render: (args) => ({
     components: { MarqueeScroller },
     setup() {
@@ -149,3 +173,108 @@ export const WithControls: Story = {
     `,
   }),
 };
+
+const linkData: MarqueeItem[] = [
+  { id: 1, content: "Partner one" },
+  { id: 2, content: "Partner two" },
+  { id: 3, content: "Partner three" },
+];
+
+export const FocusableItems: Story = {
+  args: {
+    animationRuntimeSeconds: 20,
+    marqueeData: linkData,
+    itemConfig: { width: "160px", height: "60px", gap: "24px" },
+    showControls: true,
+    ariaLabel: "Partner links",
+  },
+  render: (args) => ({
+    components: { MarqueeScroller },
+    setup() {
+      const { componentArgs } = useStorySetup(args as StoryArgs);
+      return { componentArgs, linkData };
+    },
+    template: `
+      <MarqueeScroller v-bind="componentArgs">
+        <template v-for="item in linkData" :key="item.id" #[item.id]>
+          <a href="#" style="font-size: 1.6rem;" @click.prevent>{{ item.content }}</a>
+        </template>
+      </MarqueeScroller>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Links inside items. Tab into the scroller: it pauses as soon as focus is anywhere inside, the track stops being `aria-hidden`, and only the real copy of each link is reachable (the looping duplicate is `inert`). Tabbing out resumes it, unless you paused it yourself with the button or spacebar.",
+      },
+    },
+  },
+};
+
+const stressData: MarqueeItem[] = Array.from({ length: 24 }, (_, index) => ({ id: index + 1, content: `Item ${index + 1}` }));
+const stressCopy = [
+  "Unternehmensberatungsgesellschaftmitbeschränkterhaftung",
+  "https://example.com/a/very/long/unbroken/url/that/never/ends",
+  "😀 Emoji first",
+  "<b>not bold</b>",
+  "شركة الشمال",
+  "",
+];
+
+export const StressTest: Story = {
+  name: "Stress Test (Worst-Case Data)",
+  args: {
+    animationRuntimeSeconds: 8,
+    marqueeData: stressData,
+    itemConfig: { width: "90px", height: "70px", gap: "8px" },
+    showControls: true,
+    ariaLabel: "Bevorzugtekontaktmethodefürrückfragen 😀 <b>not bold</b> طريقة الاتصال",
+    ariaDescription: "Drücken Sie die Leertaste, um die Animation anzuhalten oder fortzusetzen.",
+    playLabel: "Animationfortsetzenundweiterlaufenlassen",
+    pauseLabel: "Animationanhaltenundstehenlassen",
+  },
+  render: (args) => ({
+    components: { MarqueeScroller },
+    setup() {
+      const { componentArgs } = useStorySetup(args as StoryArgs);
+      const single: MarqueeItem[] = [{ id: 1, content: "Only one" }];
+      const tiny: MarqueeItem[] = [{ id: 1, content: "a" }, { id: 2, content: "b" }];
+      return { componentArgs, args, stressCopy, single, tiny };
+    },
+    template: `
+      <div style="display: grid; gap: 2.4rem; font-size: 1.4rem;">
+        <p style="margin: 0;">24 items: unbroken German, a long URL, emoji, HTML-like and right-to-left text, an empty item and a broken image.</p>
+        <MarqueeScroller v-bind="componentArgs">
+          <template v-for="item in args.marqueeData" :key="item.id" #[item.id]>
+            <img v-if="item.id === 6" src="https://example.invalid/missing-logo.png" alt="Broken logo" width="60" height="40" />
+            <span v-else>{{ stressCopy[(item.id - 1) % stressCopy.length] }}</span>
+          </template>
+        </MarqueeScroller>
+
+        <p style="margin: 0;">A single item: repeats until it fills the container.</p>
+        <MarqueeScroller :marquee-data="single" :item-config="{ width: '120px', height: '50px', gap: '16px' }">
+          <template #1><span>Only one</span></template>
+        </MarqueeScroller>
+
+        <p style="margin: 0;">Tiny 4px items with no gap: the repeat count caps at 50 copies instead of filling the DOM.</p>
+        <MarqueeScroller :marquee-data="tiny" :item-config="{ width: '4px', height: '20px', gap: '0px' }">
+          <template #1><span></span></template>
+          <template #2><span></span></template>
+        </MarqueeScroller>
+
+        <p style="margin: 0;">Empty <code>marqueeData</code>: renders an empty region, no errors.</p>
+        <MarqueeScroller :marquee-data="[]"></MarqueeScroller>
+      </div>
+    `,
+  }),
+  parameters: {
+    initialCanvas: "mobileCanvas",
+    docs: {
+      description: {
+        story:
+          "Worst-case data across four scrollers. Check at every canvas width: unbroken text wraps inside its item box rather than spilling into the next one, markup renders as text, the broken image shows its alt text, the long localised labels stay inside the control button (they're its accessible name, visually hidden), the loop has no visible seam, and the empty scroller throws nothing. Item boxes are a fixed size, so slot content taller than `itemConfig.height` still overflows: size the content to the box.",
+      },
+    },
+  },
+};