@lilydesignsystem/vue-motion-picker

MotionPicker (Vue helper)

A reusable Vue 3 headless motion (reduced-motion) picker — an icon button that opens a WAI-ARIA APG listbox of motion-preference slugs. On every change it sets data-motion="{slug}" on a target element (default document.documentElement), optionally persisting the choice to localStorage. Ships no CSS — the consumer decides what data-motion="reduce" actually suppresses, e.g.:

:root[data-motion="reduce"] * {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

Unlike its theme-picker and text-size-picker siblings, MotionPicker's initial value defers to the platform's own (prefers-reduced-motion: reduce) media query before falling back to an arbitrary default.

Usage

<script setup lang="ts">
import { ref } from "vue";
import MotionPicker from "@lilydesignsystem/vue-motion-picker";

const motion = ref("");
</script>

<template>
  <MotionPicker
    label="Motion"
    :motions="['no-preference', 'reduce']"
    v-model:value="motion"
    storageKey="lily-motion"
  />
</template>

Props

Emits change (the applied slug) and update:value (for v-model:value).

Behaviour

Initial value resolves from value > storage > defaultValue > the platform's (prefers-reduced-motion: reduce) preference (mapped to "reduce" / "no-preference" if either is in motions) > motions[0]. All DOM writes happen inside onMounted/watch, so the component is SSR-safe.

Accessibility

• WCAG 2.2 AAA target; directly supports 2.3.3 (Animation from Interactions).
• APG listbox keyboard contract: arrows (clamped), Home / End, PageUp / PageDown (by ten), typeahead with same-character cycling, Escape discards, and Tab closes via the button so the default Tab proceeds from the picker's position.
• aria-label carries the consumer-supplied accessible name.
• Default labels title-case the slug.

Lily™ and Lily Design System™ are trademarks.