kmcom-nuxt-layers 6.2.0 → 6.3.0

package/layers/delivery/feeds/app/components/Feeds/Index.vue

@@ -20,18 +20,13 @@
 
 <template>
   <div
-    class="feeds-shell relative overflow-hidden rounded-4xl border border-amber-200/70 bg-[linear-gradient(180deg,rgba(255,251,244,0.96),rgba(243,236,223,0.95))] shadow-[0_30px_100px_rgba(15,23,42,0.12)] dark:border-slate-800/80 dark:bg-[linear-gradient(180deg,rgba(2,6,23,0.96),rgba(3,7,18,0.98))]"
-    style="container-type: inline-size"
+    class="feeds-shell border-default bg-muted @container relative overflow-hidden rounded-4xl border shadow-xl"
   >
     <div class="pointer-events-none absolute inset-0">
+      <div class="bg-primary/20 absolute top-0 -right-20 h-72 w-72 rounded-full blur-3xl" />
+      <div class="bg-secondary/10 absolute bottom-0 -left-20 h-80 w-80 rounded-full blur-3xl" />
       <div
-        class="absolute top-0 -right-20 h-72 w-72 rounded-full bg-orange-400/20 blur-3xl dark:bg-orange-500/15"
-      />
-      <div
-        class="absolute bottom-0 -left-20 h-80 w-80 rounded-full bg-sky-400/12 blur-3xl dark:bg-sky-500/10"
-      />
-      <div
-        class="absolute inset-x-8 top-0 h-px bg-linear-to-r from-transparent via-orange-400/35 to-transparent"
+        class="via-primary/35 absolute inset-x-8 top-0 h-px bg-linear-to-r from-transparent to-transparent"
       />
     </div>
 
@@ -39,19 +34,17 @@
       <div class="feeds-split grid gap-6">
         <div class="space-y-6">
           <div
-            class="inline-flex items-center gap-2 rounded-full border border-amber-200/80 bg-white/80 px-3 py-1 text-[0.68rem] font-semibold tracking-[0.35em] text-amber-700 uppercase shadow-sm backdrop-blur dark:border-slate-700 dark:bg-slate-900/60 dark:text-amber-200"
+            class="border-default bg-default/80 text-primary inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-semibold tracking-[0.35em] uppercase shadow-sm backdrop-blur"
           >
             <UIcon name="i-lucide-rss" class="text-sm" />
             Feeds layer
           </div>
 
           <div class="space-y-3">
-            <h1
-              class="feeds-h1 max-w-3xl font-semibold tracking-tight text-slate-950 dark:text-slate-50"
-            >
+            <h1 class="feeds-h1 text-highlighted max-w-3xl font-semibold tracking-tight">
               Feed catalog for {{ catalog.site.title }}
             </h1>
-            <p class="feeds-body max-w-2xl leading-7 text-slate-700 dark:text-slate-300">
+            <p class="feeds-body text-toned max-w-2xl leading-7">
               Configured in <code class="font-mono text-[0.9em]">app.config.ts</code>, validated
               against <code class="font-mono text-[0.9em]">content.config.ts</code>, and rendered as
               a human-readable index for readers and site owners.
@@ -60,82 +53,56 @@
 
           <div class="feeds-cards-grid gap-3">
             <div
-              class="rounded-2xl border border-slate-200/80 bg-white/75 p-4 shadow-sm backdrop-blur dark:border-slate-800 dark:bg-slate-900/45"
+              class="border-default bg-default/75 rounded-2xl border p-4 shadow-sm backdrop-blur"
             >
-              <p
-                class="text-[0.68rem] font-semibold tracking-[0.3em] text-slate-500 uppercase dark:text-slate-400"
-              >
-                Default
-              </p>
-              <p class="mt-2 text-lg font-semibold text-slate-950 dark:text-slate-100">
+              <p class="text-muted text-xs font-semibold tracking-[0.3em] uppercase">Default</p>
+              <p class="text-highlighted mt-2 text-lg font-semibold">
                 {{ catalog.feed.defaultCollection }}
               </p>
-              <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
-                Shorthand routes point here.
-              </p>
+              <p class="text-muted mt-1 text-xs">Shorthand routes point here.</p>
             </div>
 
             <div
-              class="rounded-2xl border border-slate-200/80 bg-white/75 p-4 shadow-sm backdrop-blur dark:border-slate-800 dark:bg-slate-900/45"
+              class="border-default bg-default/75 rounded-2xl border p-4 shadow-sm backdrop-blur"
             >
-              <p
-                class="text-[0.68rem] font-semibold tracking-[0.3em] text-slate-500 uppercase dark:text-slate-400"
-              >
-                Exposed
-              </p>
-              <p class="mt-2 text-lg font-semibold text-slate-950 dark:text-slate-100">
+              <p class="text-muted text-xs font-semibold tracking-[0.3em] uppercase">Exposed</p>
+              <p class="text-highlighted mt-2 text-lg font-semibold">
                 {{ catalog.collectionGroups.length }} collections
               </p>
-              <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
-                Published in the feed catalog.
-              </p>
+              <p class="text-muted mt-1 text-xs">Published in the feed catalog.</p>
             </div>
 
             <div
-              class="rounded-2xl border border-slate-200/80 bg-white/75 p-4 shadow-sm backdrop-blur dark:border-slate-800 dark:bg-slate-900/45"
+              class="border-default bg-default/75 rounded-2xl border p-4 shadow-sm backdrop-blur"
             >
-              <p
-                class="text-[0.68rem] font-semibold tracking-[0.3em] text-slate-500 uppercase dark:text-slate-400"
-              >
-                Limit
-              </p>
-              <p class="mt-2 text-lg font-semibold text-slate-950 dark:text-slate-100">
+              <p class="text-muted text-xs font-semibold tracking-[0.3em] uppercase">Limit</p>
+              <p class="text-highlighted mt-2 text-lg font-semibold">
                 {{ catalog.feed.limit }} items
               </p>
-              <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
-                Applied to each feed response.
-              </p>
+              <p class="text-muted mt-1 text-xs">Applied to each feed response.</p>
             </div>
           </div>
 
           <div
             v-if="catalog.site.url || catalog.site.description"
-            class="flex flex-wrap items-center gap-3 rounded-2xl border border-slate-200/80 bg-white/70 px-4 py-3 text-sm shadow-sm backdrop-blur dark:border-slate-800 dark:bg-slate-900/45"
+            class="border-default bg-default/70 flex flex-wrap items-center gap-3 rounded-2xl border px-4 py-3 text-sm shadow-sm backdrop-blur"
           >
-            <span
-              class="text-xs font-semibold tracking-[0.3em] text-slate-500 uppercase dark:text-slate-400"
-            >
-              Site
-            </span>
-            <span v-if="catalog.site.description" class="text-slate-700 dark:text-slate-300">
+            <span class="text-muted text-xs font-semibold tracking-[0.3em] uppercase"> Site </span>
+            <span v-if="catalog.site.description" class="text-toned">
               {{ catalog.site.description }}
             </span>
             <code
               v-if="catalog.site.url"
-              class="rounded-full bg-slate-100 px-2 py-1 font-mono text-[0.72rem] text-slate-600 dark:bg-slate-800 dark:text-slate-300"
+              class="bg-elevated text-muted rounded-full px-2 py-1 font-mono text-xs"
             >
               {{ catalog.site.url }}
             </code>
           </div>
         </div>
 
-        <aside
-          class="rounded-[1.5rem] border border-slate-200/80 bg-white/75 p-4 shadow-sm backdrop-blur dark:border-slate-800 dark:bg-slate-900/45"
-        >
+        <aside class="border-default bg-default/75 rounded-3xl border p-4 shadow-sm backdrop-blur">
           <div class="flex items-center justify-between gap-3">
-            <p
-              class="text-[0.68rem] font-semibold tracking-[0.35em] text-slate-500 uppercase dark:text-slate-400"
-            >
+            <p class="text-muted text-xs font-semibold tracking-[0.35em] uppercase">
               Global routes
             </p>
             <UBadge color="neutral" variant="subtle" size="xs">
@@ -161,18 +128,14 @@
       <div class="space-y-4">
         <div class="flex flex-wrap items-end justify-between gap-4">
           <div>
-            <p
-              class="text-[0.68rem] font-semibold tracking-[0.35em] text-slate-500 uppercase dark:text-slate-400"
-            >
+            <p class="text-muted text-xs font-semibold tracking-[0.35em] uppercase">
               Collection routes
             </p>
-            <h2
-              class="mt-2 text-2xl font-semibold tracking-tight text-slate-950 dark:text-slate-100"
-            >
+            <h2 class="text-highlighted mt-2 text-2xl font-semibold tracking-tight">
               Each exposed collection gets RSS, Atom, and JSON.
             </h2>
           </div>
-          <p class="max-w-lg text-sm text-slate-600 dark:text-slate-400">
+          <p class="text-muted max-w-lg text-sm">
             Add or remove collections in <code class="font-mono text-[0.9em]">app.config.ts</code>
             and the catalog updates automatically.
           </p>
@@ -183,21 +146,19 @@
             v-for="group in catalog.collectionGroups"
             :key="group.collection"
             :ui="{ body: 'p-0' }"
-            class="overflow-hidden border-slate-200/80 bg-white/80 shadow-sm backdrop-blur dark:border-slate-800 dark:bg-slate-950/45"
+            class="border-default bg-default/80 overflow-hidden shadow-sm backdrop-blur"
           >
             <div
-              class="flex flex-wrap items-start justify-between gap-4 border-b border-slate-200/80 px-5 py-4 dark:border-slate-800"
+              class="border-default flex flex-wrap items-start justify-between gap-4 border-b px-5 py-4"
             >
               <div>
-                <p
-                  class="text-[0.68rem] font-semibold tracking-[0.35em] text-slate-500 uppercase dark:text-slate-400"
-                >
+                <p class="text-muted text-xs font-semibold tracking-[0.35em] uppercase">
                   Collection
                 </p>
-                <h3 class="mt-2 text-xl font-semibold text-slate-950 dark:text-slate-100">
+                <h3 class="text-highlighted mt-2 text-xl font-semibold">
                   {{ group.label }}
                 </h3>
-                <p class="mt-1 font-mono text-sm text-slate-500 dark:text-slate-400">
+                <p class="text-muted mt-1 font-mono text-sm">
                   {{ group.collection }}
                 </p>
               </div>
@@ -215,13 +176,13 @@
         <UCard
           v-else
           :ui="{ body: 'p-0' }"
-          class="border-dashed border-slate-300 bg-white/70 shadow-none dark:border-slate-700 dark:bg-slate-950/40"
+          class="border-accented bg-default/70 border-dashed shadow-none"
         >
           <div class="space-y-2 p-5">
-            <p class="text-sm font-medium text-slate-950 dark:text-slate-100">
+            <p class="text-highlighted text-sm font-medium">
               No collection feeds are currently exposed.
             </p>
-            <p class="text-sm text-slate-600 dark:text-slate-400">
+            <p class="text-muted text-sm">
               Add page collections to
               <code class="font-mono text-[0.9em]">feedsLayer.feed.collections</code>
               in <code class="font-mono text-[0.9em]">app.config.ts</code>.

package/layers/delivery/feeds/app/components/Feeds/RouteCard.vue

@@ -16,8 +16,8 @@
     }
   > = {
     index: {
-      strip: 'bg-slate-400',
-      dot: 'bg-slate-500',
+      strip: 'bg-accented',
+      dot: 'bg-inverted/40',
     },
     rss: {
       strip: 'bg-orange-400',
@@ -50,23 +50,21 @@
   <UCard
     :to="route.path"
     :ui="{ body: 'p-0' }"
-    class="group @container relative overflow-hidden border-slate-200/80 bg-white/90 shadow-none transition duration-200 hover:-translate-y-0.5 hover:border-slate-300 hover:shadow-md dark:border-slate-800 dark:bg-slate-950/55 dark:hover:border-slate-700"
+    class="group border-default bg-default/90 hover:border-accented @container relative overflow-hidden shadow-none transition duration-200 hover:-translate-y-0.5 hover:shadow-md"
   >
     <div class="absolute inset-y-0 left-0 w-1" :class="routeTone.strip" />
     <div :class="compact ? 'flex items-center gap-3 p-3' : 'flex items-center gap-3 p-4'">
       <span class="h-2.5 w-2.5 rounded-full" :class="routeTone.dot" />
       <div class="min-w-0 flex-1">
         <div class="flex items-start justify-between gap-3">
-          <p class="font-medium text-slate-950 dark:text-slate-100">
+          <p class="text-highlighted font-medium">
             {{ route.label }}
           </p>
-          <code
-            class="shrink-0 rounded-full bg-slate-100 px-2 py-1 font-mono text-[0.72rem] text-slate-600 dark:bg-slate-800 dark:text-slate-300"
-          >
+          <code class="bg-elevated text-muted shrink-0 rounded-full px-2 py-1 font-mono text-xs">
             {{ route.path }}
           </code>
         </div>
-        <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">
+        <p class="text-muted mt-1 text-xs">
           {{ getRouteDescription() }}
         </p>
       </div>

package/layers/design-system/theming/nuxt.config.ts

@@ -25,9 +25,7 @@ export default defineNuxtConfig({
     '#layers/theming/types': `${import.meta.dirname}/app/types`,
   },
 
-  // tokens.css is NOT listed here — it defines a Tailwind `@theme static` block, so per the
-  // CSS single-build-root rule (see .claude/rules/nuxt-layers.md) it must fold into core.css's
-  // @import chain via relative path instead, or its @theme block is silently inert.
+  // Shadow/duration tokens live in core (core/app/assets/css/tokens/elevation-motion.css).
   css: ['#layers/theming/app/assets/css/theme.css'],
 
   plugins: ['#layers/theming/app/plugins/theme.client.ts'],

package/layers/design-system/visual/app/components/Base/Modal.vue

@@ -1,11 +1,8 @@
 <script setup lang="ts">
   /**
-   * BaseModal — overlay-compatible modal shell.
-   *
-   * Use this as a starting point for new modals:
-   *   1. Copy or extend this component
-   *   2. Add your props and content in the slots
-   *   3. Register with createModal() in a composable
+   * BaseModal — overlay-compatible modal preset on UModal, which supplies the dialog role,
+   * focus trap, Escape, portal and transitions. This adds a size scale and a footer slot that
+   * receives `dismiss`.
    *
    * Example:
    *   // components/ConfirmModal.vue
@@ -31,13 +28,13 @@
     close: []
   }>()
 
-  const sizeClass: Record<string, string> = {
-    sm: 'max-w-sm',
-    md: 'max-w-md',
-    lg: 'max-w-lg',
-    xl: 'max-w-xl',
-    full: 'max-w-full',
-  }
+  const sizeClass = {
+    sm: 'sm:max-w-sm',
+    md: 'sm:max-w-md',
+    lg: 'sm:max-w-lg',
+    xl: 'sm:max-w-xl',
+    full: '',
+  } as const
 
   function dismiss() {
     emit('update:open', false)
@@ -46,77 +43,28 @@
 </script>
 
 <template>
-  <Transition name="base-modal">
-    <div
-      v-if="open"
-      class="fixed inset-0 z-50 flex items-center justify-center p-4"
-      @click.self="dismiss"
-    >
-      <!-- Backdrop -->
-      <div class="bg-muted absolute inset-0 opacity-60" @click="dismiss" />
-
-      <!-- Panel -->
-      <div
-        class="bg-default ring-default relative w-full rounded-2xl shadow-xl ring-1"
-        :class="sizeClass[size]"
-      >
-        <!-- Header -->
-        <div
-          v-if="title || $slots.header"
-          class="border-default flex items-start justify-between border-b px-6 py-4"
-        >
-          <slot name="header">
-            <div>
-              <p class="text-default text-base font-semibold">
-                {{ title }}
-              </p>
-              <p v-if="description" class="text-muted mt-0.5 text-sm">
-                {{ description }}
-              </p>
-            </div>
-          </slot>
-          <button
-            class="text-muted hover:text-default ml-4 cursor-pointer border-0 bg-transparent p-1 transition-colors"
-            aria-label="Close"
-            @click="dismiss"
-          >
-            <UIcon name="lucide:x" class="size-5" />
-          </button>
-        </div>
-
-        <!-- Body -->
-        <div class="px-6 py-5">
-          <slot />
-        </div>
-
-        <!-- Footer -->
-        <div v-if="$slots.footer" class="border-default flex justify-end gap-3 border-t px-6 py-4">
-          <slot name="footer" :dismiss />
-        </div>
-      </div>
-    </div>
-  </Transition>
+  <UModal
+    :open
+    v-bind="{
+      ...(title !== undefined && { title }),
+      ...(description !== undefined && { description }),
+    }"
+    :fullscreen="size === 'full'"
+    :ui="{
+      overlay: 'z-(--z-modal)',
+      content: `z-(--z-modal) ${sizeClass[size]}`,
+      footer: 'justify-end gap-3',
+    }"
+    @update:open="(value) => !value && dismiss()"
+  >
+    <template v-if="$slots.header" #header>
+      <slot name="header" />
+    </template>
+    <template v-if="$slots.default" #body>
+      <slot />
+    </template>
+    <template v-if="$slots.footer" #footer>
+      <slot name="footer" :dismiss />
+    </template>
+  </UModal>
 </template>
-
-<style scoped>
-  .base-modal-enter-active,
-  .base-modal-leave-active {
-    transition: opacity 200ms ease;
-  }
-
-  .base-modal-enter-from,
-  .base-modal-leave-to {
-    opacity: 0;
-  }
-  .base-modal-enter-active .bg-\(--ui-bg\),
-  .base-modal-leave-active .bg-\(--ui-bg\) {
-    transition:
-      opacity 200ms ease,
-      transform 200ms ease;
-  }
-  .base-modal-enter-from .bg-\(--ui-bg\),
-  .base-modal-leave-to .bg-\(--ui-bg\) {
-    transform: scale(0.96) translateY(4px);
-    opacity: 0;
-  }
-</style>

package/layers/design-system/visual/app/components/HoverDimGroup.vue

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { cloneVNode, defineComponent, Fragment, h, ref, type VNode } from 'vue'
+
+  export default defineComponent({
+    name: 'HoverDimGroup',
+    inheritAttrs: false,
+    props: {
+      tag: { type: String, default: 'div' },
+      dimOpacity: { type: Number, default: 0.3 },
+      duration: { type: Number, default: 200 },
+    },
+    setup(props, { slots, attrs }) {
+      const hoveredIndex = ref<number | null>(null)
+
+      return () => {
+        const children = (slots.default?.() ?? [])
+          .flatMap((node) => (node.type === Fragment ? (node.children as VNode[]) : [node]))
+          .filter((node) => typeof node.type === 'string' || typeof node.type === 'object')
+
+        const styledChildren = children.map((vnode, index) =>
+          cloneVNode(vnode, {
+            onMouseenter: () => {
+              hoveredIndex.value = index
+            },
+            style: {
+              opacity:
+                hoveredIndex.value !== null && hoveredIndex.value !== index ? props.dimOpacity : 1,
+              transition: `opacity ${props.duration}ms ease-out`,
+            },
+          })
+        )
+
+        return h(
+          props.tag,
+          {
+            ...attrs,
+            onMouseleave: () => {
+              hoveredIndex.value = null
+            },
+          },
+          styledChildren
+        )
+      }
+    },
+  })
+</script>

package/layers/design-system/visual/app/components/Progress/Bar.vue

@@ -1,35 +1,15 @@
 <script setup lang="ts">
-  const {
-    progress = null,
-    color = undefined,
-    size = undefined,
-    orientation = undefined,
-    status = undefined,
-    animation = undefined,
-    inverted = undefined,
-  } = defineProps<{
-    progress?: number | null
-    color?: 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'error' | 'neutral'
-    size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
-    orientation?: 'horizontal' | 'vertical'
-    status?: boolean
-    animation?: 'carousel' | 'carousel-inverse' | 'swing' | 'elastic'
-    inverted?: boolean
-  }>()
+  import type { ProgressProps } from '@nuxt/ui'
 
-  const modelValue = computed(() => (progress != null ? progress * 100 : undefined))
-
-  const progressProps = computed(() => ({
-    ...(modelValue.value !== undefined && { modelValue: modelValue.value }),
-    ...(color !== undefined && { color: color as 'primary' | 'neutral' }),
-    ...(size !== undefined && { size }),
-    ...(orientation !== undefined && { orientation }),
-    ...(status !== undefined && { status }),
-    ...(animation !== undefined && { animation }),
-    ...(inverted !== undefined && { inverted }),
-  }))
+  // The one decision over UProgress: progress is 0–1 (null = indeterminate). Every other
+  // UProgress prop stays typed here but falls through as an attr (@vue-ignore).
+  /* eslint-disable vue/no-unused-properties -- @vue-ignore props fall through as attrs */
+  const { progress = null } = defineProps<
+    { progress?: number | null } & /* @vue-ignore */ Omit<ProgressProps, 'modelValue'>
+  >()
+  /* eslint-enable vue/no-unused-properties */
 </script>
 
 <template>
-  <UProgress v-bind="progressProps" />
+  <UProgress :model-value="progress == null ? null : progress * 100" />
 </template>

package/layers/motion/animations/app/components/Motion/Cursor.vue

@@ -52,7 +52,7 @@
 <template>
   <Teleport to="body">
     <div
-      class="motion-cursor pointer-events-none fixed inset-0 z-9999 transition-opacity duration-300"
+      class="motion-cursor pointer-events-none fixed inset-0 z-(--z-cursor) transition-opacity duration-300"
       :style="{ opacity: visible ? 1 : 0 }"
       aria-hidden="true"
     >

package/layers/motion/animations/app/components/Motion/Marquee.vue

@@ -50,6 +50,7 @@
   }>()
 
   const { gsap } = useGsap()
+  const reduced = useReducedMotion()
   const { velocity: scrollVelocity, direction: scrollDirection } = useSmoothScroll()
 
   const containerRef = useTemplateRef<HTMLElement>('containerRef')
@@ -78,9 +79,13 @@
           return direction === 'left' ? parseFloat(x) % mod : Math.abs(parseFloat(x) % mod)
         }),
       },
+      paused: reduced.value,
     })
   })
 
+  // Reduced motion holds the marquee still (and resumes it if the preference is turned off)
+  watch(reduced, (r) => tweenRef.value?.paused(r))
+
   // Watch velocity changes for velocity-based animation
   watch(
     [scrollVelocity, scrollDirection],

package/layers/motion/animations/app/components/Motion/MarqueeText.vue

@@ -33,6 +33,7 @@
   }>()
 
   const { gsap, ScrollTrigger } = useGsap()
+  const reduced = useReducedMotion()
   const { velocityFactor } = useMarqueeVelocity({ damping, stiffness, velocityMapping })
 
   const containerRef = useTemplateRef<HTMLElement[]>('containerRef')
@@ -71,7 +72,7 @@
   }
 
   function animate() {
-    if (isPaused.value) return
+    if (isPaused.value || reduced.value) return
 
     const now = performance.now()
     const delta = animLastTime ? now - animLastTime : 16

package/layers/motion/animations/app/components/Motion/Staggered.test.ts

@@ -0,0 +1,40 @@
+import { mount } from '@vue/test-utils'
+import { ref } from 'vue'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vite-plus/test'
+
+import Staggered from './Staggered.vue'
+
+// Auto-imported from the scroll layer in Nuxt; stubbed here (no Nuxt context in the 'vue' project)
+const reduced = ref(false)
+vi.stubGlobal('useReducedMotion', () => reduced)
+
+describe('MotionStaggered', () => {
+  beforeEach(() => {
+    reduced.value = false
+    vi.useFakeTimers()
+  })
+  afterEach(() => vi.useRealTimers())
+
+  it('renders each child once and reveals every one after the stagger', () => {
+    const wrapper = mount(Staggered, {
+      props: { staggerDelay: 50 },
+      slots: { default: '<p>a</p><p>b</p><p>c</p>' },
+    })
+    const items = wrapper.findAll('p')
+    expect(items).toHaveLength(3)
+    expect(items.every((p) => !p.classes('animated'))).toBe(true)
+
+    vi.advanceTimersByTime(100)
+    expect(items.map((p) => p.classes('animated'))).toEqual([true, true, true])
+    expect(items[0]?.classes()).toContain('animate-fade-in')
+  })
+
+  it('reveals every child at once, without the animation class, under reduced motion', () => {
+    reduced.value = true
+    const wrapper = mount(Staggered, { slots: { default: '<p>a</p><p>b</p>' } })
+    const items = wrapper.findAll('p')
+    expect(items.map((p) => p.classes('animated'))).toEqual([true, true])
+    expect(items[0]?.classes()).not.toContain('animate-fade-in')
+    expect(wrapper.attributes('data-reduced')).toBe('')
+  })
+})