@lilydesignsystem/vue-motion-picker 0.1.0

package/dist/MotionPicker.vue.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Default button icon: a bundled SVG (two pause bars), not a Unicode
+ * character. Reversed 2026-09-16 from the font-dependent-glyph
+ * convention (was U+23F8 PAUSE SIGN + U+FE0E, exported as
+ * `PAUSE_SIGN` — removed, not renamed). "Stop the moving parts" still
+ * reads directly from two bars; a bundled outline SVG matches the
+ * other four picker icons as one consistent visual family regardless
+ * of the consumer's fonts, where the old glyph depended on the
+ * platform's media-transport symbols defaulting to text presentation.
+ */
+/** Arguments passed to the default scoped slot (the button icon). */
+export type SlotArgs = {
+    /** Currently selected motion slug. */
+    value: string;
+    /** Is the listbox open? */
+    open: boolean;
+    /** Resolve a slug to its display label. */
+    labelFor: (motion: string) => string;
+};
+/** Alias matching the canonical Svelte helper's type name. */
+export type ChildArgs = SlotArgs;
+/** Public props for MotionPicker. See `spec/index.md` §4 for the contract. */
+export type Props = {
+    /** Accessible name for the button and the listbox. */
+    label: string;
+    /** Available motion slugs, e.g. ["no-preference","reduce"]. */
+    motions: string[];
+    /** Currently selected motion slug. Two-way bindable via v-model:value. */
+    value?: string;
+    /** Initial motion when nothing else is supplied. */
+    defaultValue?: string;
+    /** If set, persist the selection to localStorage under this key. */
+    storageKey?: string;
+    /** `name` of the hidden input that carries the value in a form. */
+    name?: string;
+    /** Element that receives `data-motion`. Defaults to document.documentElement. */
+    target?: HTMLElement | null;
+    /** Optional pretty labels per slug. */
+    motionLabels?: Record<string, string>;
+    /** Extra CSS class on the root element. */
+    class?: string;
+};
+/**
+ * Resolve a motion slug to its display label: each hyphen-separated
+ * word title-cased, so "no-preference" renders as "No Preference".
+ * Mirrors `sizeName` in text-size-picker and `themeName` in
+ * theme-picker.
+ */
+export declare function motionName(motion: string): string;
+/**
+ * True when the platform reports a preference for reduced motion.
+ * SSR-safe: `window`/`matchMedia` are absent on the server, so this
+ * resolves to `false` there and the client re-derives it on mount.
+ */
+export declare function prefersReducedMotion(): boolean;
+/** Stable per-instance id prefix; SSR-safe (no Math.random / Date.now). */
+export declare function nextMotionPickerId(): string;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:value": (value: string) => any;
+    change: (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    "onUpdate:value"?: ((value: string) => any) | undefined;
+    onChange?: ((value: string) => any) | undefined;
+}>, {
+    value: string;
+    defaultValue: string;
+    storageKey: string;
+    name: string;
+    target: HTMLElement | null;
+    motionLabels: Record<string, string>;
+    class: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    default?: (props: {
+        value: string;
+        open: boolean;
+        labelFor: (motion: string) => string;
+    }) => any;
+}>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default, default as MotionPicker, motionName, nextMotionPickerId, prefersReducedMotion, } from "./MotionPicker.vue";
+export type { Props, SlotArgs, ChildArgs } from "./MotionPicker.vue";

package/dist/index.js

@@ -0,0 +1,232 @@
+import { Fragment as e, createElementBlock as t, createElementVNode as n, defineComponent as r, guardReactiveProps as i, nextTick as a, normalizeClass as o, normalizeProps as s, onBeforeUnmount as c, onMounted as l, openBlock as u, ref as d, renderList as f, renderSlot as p, toDisplayString as m, watch as h } from "vue";
+//#region lily-design-system-vue-motion-picker/MotionPicker.vue?vue&type=script&setup=true&lang.ts
+var g = ["name", "value"], _ = ["aria-label", "aria-expanded"], v = [
+	"aria-label",
+	"aria-activedescendant",
+	"hidden"
+], y = [
+	"id",
+	"aria-selected",
+	"data-active",
+	"onClick"
+];
+function b(e) {
+	return e.split("-").map((e) => e.charAt(0).toUpperCase() + e.slice(1)).join(" ");
+}
+function x() {
+	if (typeof window > "u" || typeof window.matchMedia != "function") return !1;
+	try {
+		return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+	} catch {
+		return !1;
+	}
+}
+var S = 0;
+function C() {
+	return S += 1, `motion-picker-${S}`;
+}
+//#endregion
+//#region lily-design-system-vue-motion-picker/MotionPicker.vue
+var w = /* @__PURE__ */ r({
+	__name: "MotionPicker",
+	props: {
+		label: {},
+		motions: {},
+		value: { default: "" },
+		defaultValue: { default: void 0 },
+		storageKey: { default: void 0 },
+		name: { default: "motion" },
+		target: { default: void 0 },
+		motionLabels: { default: () => ({}) },
+		class: { default: "" }
+	},
+	emits: ["update:value", "change"],
+	setup(r, { emit: S }) {
+		let w = r, T = S, E = C(), D = `${E}-list`, O = (e) => `${E}-option-${e}`, k = d(!1), A = d(-1), j = d(null), M = d(null), N = d(null), P = "", F;
+		function I(e) {
+			let t = w.motionLabels ?? {};
+			return e in t ? t[e] : b(e);
+		}
+		function L(e) {
+			if (!(typeof document > "u" || !e)) {
+				if ((w.target ?? document.documentElement).setAttribute("data-motion", e), w.storageKey) try {
+					localStorage.setItem(w.storageKey, e);
+				} catch {}
+				T("change", e);
+			}
+		}
+		let R = d(w.value ?? "");
+		function z(e) {
+			R.value = e, T("update:value", e);
+		}
+		h(() => w.value, (e) => {
+			e !== void 0 && e !== R.value && (R.value = e);
+		}), h(R, (e, t) => {
+			e && e !== t && L(e);
+		});
+		async function B(e) {
+			let t = w.motions.indexOf(R.value);
+			A.value = w.motions.length === 0 ? -1 : e ?? (t >= 0 ? t : 0), k.value = !0, await a(), M.value?.focus({ preventScroll: !0 }), U();
+		}
+		async function V(e = !0) {
+			k.value && (k.value = !1, A.value = -1, e && (await a(), j.value?.focus({ preventScroll: !0 })));
+		}
+		function H(e) {
+			let t = w.motions[e];
+			t && z(t), V();
+		}
+		function U() {
+			A.value < 0 || !M.value || document.getElementById(O(A.value))?.scrollIntoView?.({ block: "nearest" });
+		}
+		function W(e) {
+			if (w.motions.length === 0) return;
+			let t = Math.min(Math.max(A.value + e, 0), w.motions.length - 1);
+			A.value = t, U();
+		}
+		function G(e) {
+			let t = e.toLowerCase(), n = P === "" || [...P].every((e) => e === t);
+			P += t, clearTimeout(F), F = setTimeout(() => P = "", 500);
+			let r = n ? t : P, i = A.value < 0 ? 0 : A.value, a = n ? i + 1 : i;
+			for (let e = 0; e < w.motions.length; e++) {
+				let t = (a + e) % w.motions.length;
+				if (I(w.motions[t]).toLowerCase().startsWith(r)) {
+					A.value = t, U();
+					return;
+				}
+			}
+		}
+		function K() {
+			k.value ? V() : B();
+		}
+		function q(e) {
+			switch (e.key) {
+				case "ArrowDown":
+				case "Enter":
+				case " ":
+					e.preventDefault(), B();
+					break;
+				case "ArrowUp": e.preventDefault(), B(w.motions.length - 1);
+			}
+		}
+		function J(e) {
+			switch (e.key) {
+				case "ArrowDown":
+					e.preventDefault(), W(1);
+					break;
+				case "ArrowUp":
+					e.preventDefault(), W(-1);
+					break;
+				case "Home":
+					e.preventDefault(), A.value = 0, U();
+					break;
+				case "End":
+					e.preventDefault(), A.value = w.motions.length - 1, U();
+					break;
+				case "Enter":
+				case " ":
+					e.preventDefault(), A.value >= 0 && H(A.value);
+					break;
+				case "Escape":
+					e.preventDefault(), V();
+					break;
+				case "PageUp":
+					e.preventDefault(), W(-10);
+					break;
+				case "PageDown":
+					e.preventDefault(), W(10);
+					break;
+				case "Tab":
+					j.value?.focus?.({ preventScroll: !0 }), V(!1);
+					break;
+				default: e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey && G(e.key);
+			}
+		}
+		function Y(e) {
+			let t = e.relatedTarget;
+			t && N.value?.contains(t) || V(!1);
+		}
+		function X(e) {
+			if (!k.value) return;
+			let t = e.target;
+			t && N.value && !N.value.contains(t) && V(!1);
+		}
+		return l(() => {
+			document.addEventListener("click", X);
+			let e = R.value;
+			if (!e && w.storageKey) try {
+				e = localStorage.getItem(w.storageKey) ?? "";
+			} catch {}
+			if (!e) {
+				let t = x() ? "reduce" : "no-preference";
+				e = w.defaultValue ?? (w.motions.includes(t) ? t : void 0) ?? w.motions[0] ?? "";
+			}
+			if (e && e !== R.value) {
+				R.value = e, T("update:value", e);
+				return;
+			}
+			e && L(e);
+		}), c(() => {
+			document.removeEventListener("click", X), clearTimeout(F);
+		}), (a, c) => (u(), t("div", {
+			ref_key: "rootEl",
+			ref: N,
+			class: o(`motion-picker ${w.class}`.trim()),
+			onFocusout: Y
+		}, [
+			n("input", {
+				type: "hidden",
+				name: r.name,
+				value: R.value
+			}, null, 8, g),
+			n("button", {
+				ref_key: "buttonEl",
+				ref: j,
+				type: "button",
+				class: "motion-picker-button",
+				"aria-label": r.label,
+				"aria-haspopup": "listbox",
+				"aria-expanded": k.value ? "true" : "false",
+				"aria-controls": D,
+				onClick: K,
+				onKeydown: q
+			}, [p(a.$slots, "default", s(i({
+				value: R.value,
+				open: k.value,
+				labelFor: I
+			})), () => [c[0] ||= n("svg", {
+				class: "motion-picker-icon",
+				viewBox: "0 0 16 16",
+				width: "1.05rem",
+				height: "1.05rem",
+				"aria-hidden": "true",
+				fill: "none",
+				stroke: "currentColor",
+				"stroke-width": "1.6",
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round"
+			}, [n("path", { d: "M5 3v10M11 3v10" })], -1)])], 40, _),
+			n("ul", {
+				ref_key: "listEl",
+				ref: M,
+				class: "motion-picker-list",
+				id: D,
+				role: "listbox",
+				"aria-label": r.label,
+				"aria-activedescendant": k.value && A.value >= 0 ? O(A.value) : void 0,
+				tabindex: "-1",
+				hidden: !k.value || void 0,
+				onKeydown: J
+			}, [(u(!0), t(e, null, f(r.motions, (e, n) => (u(), t("li", {
+				key: e,
+				class: "motion-picker-option",
+				id: O(n),
+				role: "option",
+				"aria-selected": e === R.value ? "true" : "false",
+				"data-active": n === A.value ? "" : void 0,
+				onClick: (e) => H(n)
+			}, m(I(e)), 9, y))), 128))], 40, v)
+		], 34));
+	}
+});
+//#endregion
+export { w as MotionPicker, w as default, b as motionName, C as nextMotionPickerId, x as prefersReducedMotion };

package/index.md

@@ -0,0 +1,82 @@
+# 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.:
+
+```css
+: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
+
+```vue
+<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
+
+| Prop           | Type                     | Required | Description                                                |
+| -------------- | ------------------------ | -------- | ------------------------------------------------------------ |
+| `label`        | `string`                 | yes      | Accessible name (`aria-label`) for the button + listbox.      |
+| `motions`      | `string[]`               | yes      | Available motion slugs.                                       |
+| `value`        | `string`                 | no       | Selected slug. Two-way bindable via `v-model:value`.           |
+| `defaultValue` | `string`                 | no       | Initial slug when nothing else is supplied.                    |
+| `storageKey`   | `string`                 | no       | If set, persist the slug to `localStorage`.                    |
+| `name`         | `string`                 | no       | `name` of the hidden input (default `"motion"`).               |
+| `target`       | `HTMLElement \| null`    | no       | Element to receive `data-motion`. Default `<html>`.            |
+| `motionLabels` | `Record<string,string>`  | no       | Pretty labels per slug.                                        |
+| `class`        | `string`                 | no       | Extra CSS class on the root.                                   |
+
+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.

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@lilydesignsystem/vue-motion-picker",
+  "version": "0.1.0",
+  "engines": {
+    "node": "=26"
+  },
+  "description": "Lily Design System - Vue 3 motion (reduced-motion) picker",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "index.md",
+    "README.md"
+  ],
+  "scripts": {
+    "prepublishOnly": "cd .. && npm run build"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "keywords": [
+    "lily",
+    "design",
+    "system",
+    "vue",
+    "motion",
+    "reduced-motion",
+    "picker"
+  ],
+  "author": "Joel Parker Henderson <joel@joelparkerhenderson.com>",
+  "license": "MIT OR Apache-2.0 OR GPL-2.0-only OR GPL-3.0-only OR BSD-3-Clause",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/LilyDesignSystem/lily-design-system-vue-helpers.git",
+    "directory": "lily-design-system-vue-motion-picker"
+  },
+  "homepage": "https://lilydesignsystem.com/",
+  "bugs": {
+    "url": "https://github.com/LilyDesignSystem/lily-design-system/issues"
+  }
+}