@lilydesignsystem/vue-motion-picker 0.2.0 → 0.3.1

package/LICENSE.md

@@ -0,0 +1,64 @@
+<!-- Synced from the canonical repository by bin/sync-special-files.
+     Do not edit here; edit the root copy and re-run the script.
+     Canonical: https://github.com/LilyDesignSystem/lily-design-system/blob/main/LICENSE.md -->
+
+# License
+
+Lily Design System™ is free open source software.
+
+License is any of these, at your option, or contact us for custom license options.
+
+- [MIT](https://opensource.org/license/mit) ([SPDX: MIT](https://spdx.org/licenses/MIT.html))
+
+- [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0) ([SPDX: Apache-2.0](https://spdx.org/licenses/Apache-2.0.html))
+
+- [GNU General Public License v2.0](https://www.gnu.org/licenses/old-licenses/gpl-2.0-standalone.html) ([SPDX: GPL-2.0-only](https://spdx.org/licenses/GPL-2.0-only.html))
+
+- [GNU General Public License v3.0](https://www.gnu.org/licenses/gpl-3.0-standalone.html) ([SPDX: GPL-3.0-only](https://spdx.org/licenses/GPL-3.0-only.html))
+
+- [BSD 3-Clause License](https://opensource.org/license/bsd-3-clause) ([SPDX: BSD-3-Clause](https://spdx.org/licenses/BSD-3-Clause.html))
+
+## SPDX
+
+The machine-readable expression for the choice above is:
+
+```
+SPDX-License-Identifier: MIT OR Apache-2.0 OR GPL-2.0-only OR GPL-3.0-only OR BSD-3-Clause
+```
+
+Every package manifest in this repository should carry that expression, or a
+single identifier from the list where the packaging format does not accept a
+disjunction. You do not need permission to pick one: choose whichever member of
+the list suits your project and comply with that one.
+
+This applies to the whole repository — the component catalog, the headless
+libraries, the example applications, the helper packages, the `themes/`
+stylesheets, the `bin/` tooling, and the documentation.
+
+## Scope note
+
+This file supersedes an earlier `CC BY-NC-SA` notice. That notice was a content
+license with a non-commercial clause, it was not an open-source license, and it
+contradicted both the specification and the published packages. It should not be
+relied on. If you obtained Lily under it and that raises a question for you,
+contact <joel@joelparkerhenderson.com>.
+
+## Trademarks
+
+Lily™ and Lily Design System™ are trademarks. The trademarks are distinct from
+the software license: a trademark claim (™) asserts use of the marks and is
+independent of the licenses above. A license to the software is not a license to
+the marks.
+
+You may say your project uses Lily, is built with Lily, or is compatible with
+Lily. Please do not use the marks as the name of your fork or product, or in a
+way that suggests affiliation or endorsement. For any use beyond that, contact
+<joel@joelparkerhenderson.com>.
+
+## Third-party references
+
+Lily's example applications and `themes/` stylesheets take visual reference from
+public-sector design systems including NHS UK, GOV.UK, and USWDS. Lily is not
+affiliated with, endorsed by, or connected to any of those organisations. Their
+names and marks belong to them, and this license grants nothing in respect of
+them.

package/README.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/dist/MotionPicker.vue.d.ts

@@ -37,6 +37,8 @@ export type Props = {
     target?: HTMLElement | null;
     /** Optional pretty labels per slug. */
     motionLabels?: Record<string, string>;
+    /** Disables the button; an open popup closes. The popup's open state is `v-model:open`. */
+    disabled?: boolean;
     /** Extra CSS class on the root element. */
     class?: string;
 };
@@ -57,10 +59,19 @@ export declare function prefersReducedMotion(): boolean;
 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, {} & {
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props & {
+    /** Is the popup open? Bindable: `v-model:open` (the picker keeps its own state when none is bound). */
+    open?: boolean;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+} & {
     "update:value": (value: string) => any;
     change: (value: string) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<Props & {
+    /** Is the popup open? Bindable: `v-model:open` (the picker keeps its own state when none is bound). */
+    open?: boolean;
+}> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onUpdate:value"?: ((value: string) => any) | undefined;
     onChange?: ((value: string) => any) | undefined;
 }>, {
@@ -70,6 +81,7 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<Props,
     name: string;
     target: HTMLElement | null;
     motionLabels: Record<string, string>;
+    disabled: boolean;
     class: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {

package/dist/index.js

@@ -1,16 +1,16 @@
-import { Fragment as e, computed as t, createElementBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, guardReactiveProps as o, nextTick as s, normalizeClass as ee, normalizeProps as c, onBeforeUnmount as l, onMounted as te, openBlock as u, ref as d, renderList as ne, renderSlot as f, toDisplayString as p, unref as m, watch as h, withCtx as g } from "vue";
-import { IconButton as _, Listbox as v } from "@lilydesignsystem/vue-headless";
-//#region lily-design-system-vue-motion-picker/MotionPicker.vue?vue&type=script&setup=true&lang.ts
-var y = ["name", "value"], b = ["hidden"], re = [
+import { Fragment as e, computed as t, createElementBlock as n, createElementVNode as r, createVNode as i, defineComponent as a, guardReactiveProps as o, mergeModels as s, nextTick as c, normalizeClass as l, normalizeProps as ee, onBeforeUnmount as u, onMounted as te, openBlock as d, ref as f, renderList as p, renderSlot as ne, toDisplayString as m, unref as h, useModel as g, watch as _, withCtx as v } from "vue";
+import { IconButton as re, Listbox as y } from "@lilydesignsystem/vue-headless";
+// MotionPicker.vue?vue&type=script&setup=true&lang.ts
+var b = ["name", "value"], x = ["hidden"], ie = [
 	"id",
 	"aria-selected",
 	"data-active",
 	"onClick"
 ];
-function x(e) {
+function S(e) {
 	return e.split("-").map((e) => e.charAt(0).toUpperCase() + e.slice(1)).join(" ");
 }
-function S() {
+function C() {
 	if (typeof window > "u" || typeof window.matchMedia != "function") return !1;
 	try {
 		return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
@@ -18,15 +18,14 @@ function S() {
 		return !1;
 	}
 }
-var C = 0;
-function w() {
-	return C += 1, `motion-picker-${C}`;
+var w = 0;
+function T() {
+	return w += 1, `motion-picker-${w}`;
 }
-//#endregion
-//#region lily-design-system-vue-motion-picker/MotionPicker.vue
-var T = /* @__PURE__ */ a({
+// MotionPicker.vue
+var E = /* @__PURE__ */ a({
 	__name: "MotionPicker",
-	props: {
+	props: /*@__PURE__*/ s({
 		label: {},
 		motions: {},
 		value: { default: "" },
@@ -35,15 +34,29 @@ var T = /* @__PURE__ */ a({
 		name: { default: "motion" },
 		target: { default: void 0 },
 		motionLabels: { default: () => ({}) },
+		disabled: {
+			type: Boolean,
+			default: !1
+		},
 		class: { default: "" }
-	},
-	emits: ["update:value", "change"],
-	setup(a, { emit: C }) {
-		let T = a, E = C, D = w(), O = `${D}-list`, k = (e) => `${D}-option-${e}`, A = d(!1), j = `${D}-tooltip`, M = d(!1), N = d(!1), P = d(!1), F = d(!1), I = t(() => !A.value && !F.value && (M.value || N.value || P.value));
-		function ie() {
+	}, {
+		open: {
+			type: Boolean,
+			default: !1
+		},
+		openModifiers: {}
+	}),
+	emits: /*@__PURE__*/ s(["update:value", "change"], ["update:open"]),
+	setup(a, { emit: s }) {
+		let w = a, E = s, D = T(), O = `${D}-list`, k = (e) => `${D}-option-${e}`, A = g(a, "open");
+		_(() => w.disabled, (e) => {
+			e && (A.value = !1);
+		}, { immediate: !0 });
+		let j = `${D}-tooltip`, M = f(!1), N = f(!1), P = f(!1), F = f(!1), I = t(() => !A.value && !F.value && (M.value || N.value || P.value));
+		function ae() {
 			M.value = !0, F.value = !1;
 		}
-		function ae() {
+		function oe() {
 			M.value = !1;
 		}
 		function L(e) {
@@ -66,61 +79,61 @@ var T = /* @__PURE__ */ a({
 		function H(e) {
 			typeof document < "u" && e !== V && (V = e, e ? document.addEventListener("keydown", B) : document.removeEventListener("keydown", B));
 		}
-		h(I, (e) => H(e), { flush: "sync" }), l(() => H(!1));
-		let U = d(-1), W = d(null), G = d(null), K = d(null);
+		_(I, (e) => H(e), { flush: "sync" }), u(() => H(!1));
+		let U = f(-1), W = f(null), G = f(null), K = f(null);
 		function q(e) {
-			let t = T.motionLabels ?? {};
-			return e in t ? t[e] : x(e);
+			let t = w.motionLabels ?? {};
+			return e in t ? t[e] : S(e);
 		}
 		function J(e) {
 			if (typeof document < "u" && e) {
-				if ((T.target ?? document.documentElement).setAttribute("data-motion", e), T.storageKey) try {
-					localStorage.setItem(T.storageKey, e);
+				if ((w.target ?? document.documentElement).setAttribute("data-motion", e), w.storageKey) try {
+					localStorage.setItem(w.storageKey, e);
 				} catch {}
 				E("change", e);
 			}
 		}
-		let Y = d(T.value ?? "");
-		function oe(e) {
+		let Y = f(w.value ?? "");
+		function se(e) {
 			Y.value = e, E("update:value", e);
 		}
-		h(() => T.value, (e) => {
+		_(() => w.value, (e) => {
 			e !== void 0 && e !== Y.value && (Y.value = e);
-		}), h(Y, (e, t) => {
+		}), _(Y, (e, t) => {
 			e && e !== t && J(e);
 		});
 		async function X(e) {
-			let t = T.motions.indexOf(Y.value);
-			U.value = T.motions.length === 0 ? -1 : e ?? (t >= 0 ? t : 0), A.value = !0, await s(), G.value?.el?.focus({ preventScroll: !0 });
+			let t = w.motions.indexOf(Y.value);
+			U.value = w.motions.length === 0 ? -1 : e ?? (t >= 0 ? t : 0), A.value = !0, await c(), G.value?.el?.focus({ preventScroll: !0 });
 		}
 		async function Z(e = !0) {
-			A.value && (A.value = !1, U.value = -1, e && (await s(), W.value?.el?.focus({ preventScroll: !0 })));
+			A.value && (A.value = !1, U.value = -1, e && (await c(), W.value?.el?.focus({ preventScroll: !0 })));
 		}
 		function Q(e) {
-			let t = T.motions[e];
-			t && oe(t), Z();
+			let t = w.motions[e];
+			t && se(t), Z();
 		}
-		function se() {
+		function ce() {
 			U.value < 0 || !G.value?.el || document.getElementById(k(U.value))?.scrollIntoView?.({ block: "nearest" });
 		}
-		h(U, () => se());
-		function ce() {
+		_(U, () => ce());
+		function le() {
 			W.value?.el?.focus?.({ preventScroll: !0 }), Z(!1);
 		}
-		function le() {
+		function ue() {
 			M.value = !1, A.value ? Z() : X();
 		}
-		function ue(e) {
+		function de(e) {
 			switch (z(e), e.key) {
 				case "ArrowDown":
 				case "Enter":
 				case " ":
 					e.preventDefault(), X();
 					break;
-				case "ArrowUp": e.preventDefault(), X(T.motions.length - 1);
+				case "ArrowUp": e.preventDefault(), X(w.motions.length - 1);
 			}
 		}
-		function de(e) {
+		function fe(e) {
 			let t = e.relatedTarget;
 			t && K.value?.contains(t) || Z(!1);
 		}
@@ -132,32 +145,29 @@ var T = /* @__PURE__ */ a({
 		return te(() => {
 			document.addEventListener("click", $);
 			let e = Y.value;
-			if (!e && T.storageKey) try {
-				e = localStorage.getItem(T.storageKey) ?? "";
+			if (!e && w.storageKey) try {
+				e = localStorage.getItem(w.storageKey) ?? "";
 			} catch {}
 			if (!e) {
-				let t = S() ? "reduce" : "no-preference";
-				e = T.defaultValue ?? (T.motions.includes(t) ? t : void 0) ?? T.motions[0] ?? "";
-			}
-			if (e && e !== Y.value) {
-				Y.value = e, E("update:value", e);
-				return;
+				let t = C() ? "reduce" : "no-preference";
+				e = w.defaultValue ?? (w.motions.includes(t) ? t : void 0) ?? w.motions[0] ?? "";
 			}
-			e && J(e);
-		}), l(() => {
+			e && e !== Y.value ? (Y.value = e, E("update:value", e)) : e && J(e);
+		}), u(() => {
 			document.removeEventListener("click", $);
-		}), (t, s) => (u(), n("div", {
+		}), (t, s) => (d(), n("div", {
 			ref_key: "rootEl",
 			ref: K,
-			class: ee(`motion-picker ${T.class}`.trim()),
-			onFocusout: de
+			class: l(`motion-picker ${w.class}`.trim()),
+			onFocusout: fe
 		}, [
 			r("input", {
 				type: "hidden",
 				name: a.name,
 				value: Y.value
-			}, null, 8, y),
-			i(m(_), {
+			}, null, 8, b),
+			i(h(re), {
+				disabled: a.disabled,
 				ref_key: "buttonEl",
 				ref: W,
 				baseClass: "motion-picker-button",
@@ -165,14 +175,14 @@ var T = /* @__PURE__ */ a({
 				"aria-haspopup": "listbox",
 				"aria-expanded": A.value ? "true" : "false",
 				"aria-controls": O,
-				onClick: le,
-				onKeydown: ue,
-				onMouseenter: ie,
-				onMouseleave: ae,
+				onClick: ue,
+				onKeydown: de,
+				onMouseenter: ae,
+				onMouseleave: oe,
 				onFocus: L,
 				onBlur: R
 			}, {
-				default: g(() => [f(t.$slots, "default", c(o({
+				default: v(() => [ne(t.$slots, "default", ee(o({
 					value: Y.value,
 					open: A.value,
 					labelFor: q
@@ -189,7 +199,11 @@ var T = /* @__PURE__ */ a({
 					"stroke-linejoin": "round"
 				}, [r("path", { d: "M5 3v10M11 3v10" })], -1)])]),
 				_: 3
-			}, 8, ["label", "aria-expanded"]),
+			}, 8, [
+				"disabled",
+				"label",
+				"aria-expanded"
+			]),
 			r("div", {
 				class: "motion-picker-tooltip",
 				role: "tooltip",
@@ -197,8 +211,8 @@ var T = /* @__PURE__ */ a({
 				hidden: !I.value || void 0,
 				onMouseenter: s[0] ||= (e) => N.value = !0,
 				onMouseleave: s[1] ||= (e) => N.value = !1
-			}, p(a.label), 41, b),
-			i(m(v), {
+			}, m(a.label), 41, x),
+			i(h(y), {
 				ref_key: "listEl",
 				ref: G,
 				as: "ul",
@@ -214,9 +228,9 @@ var T = /* @__PURE__ */ a({
 				hidden: !A.value || void 0,
 				onActivate: Q,
 				onEscape: s[3] ||= () => Z(),
-				onTabOut: ce
+				onTabOut: le
 			}, {
-				default: g(() => [(u(!0), n(e, null, ne(a.motions, (e, t) => (u(), n("li", {
+				default: v(() => [(d(!0), n(e, null, p(a.motions, (e, t) => (d(), n("li", {
 					key: e,
 					class: "motion-picker-option",
 					id: k(t),
@@ -224,7 +238,7 @@ var T = /* @__PURE__ */ a({
 					"aria-selected": e === Y.value ? "true" : "false",
 					"data-active": t === U.value ? "" : void 0,
 					onClick: (e) => Q(t)
-				}, p(q(e)), 9, re))), 128))]),
+				}, m(q(e)), 9, ie))), 128))]),
 				_: 1
 			}, 8, [
 				"label",
@@ -234,5 +248,4 @@ var T = /* @__PURE__ */ a({
 		], 34));
 	}
 });
-//#endregion
-export { T as MotionPicker, T as default, x as motionName, w as nextMotionPickerId, S as prefersReducedMotion };
+export { E as MotionPicker, E as default, S as motionName, T as nextMotionPickerId, C as prefersReducedMotion };

package/index.md

@@ -43,17 +43,17 @@ const motion = ref("");
 
 ## 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.                                   |
+| 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`).

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@lilydesignsystem/vue-motion-picker",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "engines": {
-    "node": "=26"
+    "node": ">=26"
   },
   "description": "Lily Design System - Vue 3 motion (reduced-motion) picker",
   "type": "module",
@@ -21,14 +21,28 @@
     "README.md"
   ],
   "scripts": {
-    "prepublishOnly": "cd .. && npm run build"
+    "build": "node build.mjs",
+    "test": "vitest run",
+    "check": "vue-tsc --noEmit -p tsconfig.lib.json",
+    "test:watch": "vitest",
+    "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "@lilydesignsystem/vue-headless": "^0.2.0"
+    "@lilydesignsystem/vue-headless": "^0.7.0"
   },
   "peerDependencies": {
     "vue": "^3.0.0"
   },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.10",
+    "@vue/test-utils": "^2.5.1",
+    "jsdom": "^30.1.3",
+    "typescript": "^5.9.3",
+    "vite": "^8.3.5",
+    "vitest": "^5.0.5",
+    "vue": "^3.5.44",
+    "vue-tsc": "^3.3.14"
+  },
   "keywords": [
     "lily",
     "design",
@@ -42,7 +56,7 @@
   "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",
+    "url": "git+https://github.com/LilyDesignSystem/lily-design-system.git",
     "directory": "lily-design-system-vue-motion-picker"
   },
   "homepage": "https://lilydesignsystem.com/",