@lilydesignsystem/angular-motion-picker 0.1.2 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +83 -0
- package/fesm2022/lilydesignsystem-angular-motion-picker.mjs +590 -326
- package/fesm2022/lilydesignsystem-angular-motion-picker.mjs.map +1 -1
- package/package.json +3 -3
- package/types/lilydesignsystem-angular-motion-picker.d.ts +152 -80
- package/types/lilydesignsystem-angular-motion-picker.d.ts.map +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
# MotionPicker (Angular helper)
|
|
2
|
+
|
|
3
|
+
A reusable Angular 20 headless **motion (reduced-motion) picker** — an
|
|
4
|
+
icon button that opens a WAI-ARIA APG listbox of motion-preference
|
|
5
|
+
slugs. On every change it sets `data-motion="{slug}"` on a target
|
|
6
|
+
element (default `document.documentElement`), optionally persisting
|
|
7
|
+
the choice to `localStorage`. Ships no CSS — the consumer decides what
|
|
8
|
+
`data-motion="reduce"` actually suppresses, e.g.:
|
|
9
|
+
|
|
10
|
+
```css
|
|
11
|
+
:root[data-motion="reduce"] * {
|
|
12
|
+
animation-duration: 0.001ms !important;
|
|
13
|
+
animation-iteration-count: 1 !important;
|
|
14
|
+
transition-duration: 0.001ms !important;
|
|
15
|
+
scroll-behavior: auto !important;
|
|
16
|
+
}
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Unlike its `theme-picker` and `text-size-picker` siblings, MotionPicker's
|
|
20
|
+
initial value defers to the platform's own
|
|
21
|
+
`(prefers-reduced-motion: reduce)` media query before falling back to
|
|
22
|
+
an arbitrary default.
|
|
23
|
+
|
|
24
|
+
## Usage
|
|
25
|
+
|
|
26
|
+
```ts
|
|
27
|
+
import { Component } from "@angular/core";
|
|
28
|
+
import { MotionPicker } from "@lilydesignsystem/angular-motion-picker";
|
|
29
|
+
|
|
30
|
+
@Component({
|
|
31
|
+
standalone: true,
|
|
32
|
+
imports: [MotionPicker],
|
|
33
|
+
template: `
|
|
34
|
+
<lily-motion-picker
|
|
35
|
+
label="Motion"
|
|
36
|
+
[motions]="['no-preference', 'reduce']"
|
|
37
|
+
[(value)]="motion"
|
|
38
|
+
storageKey="lily-motion"
|
|
39
|
+
/>
|
|
40
|
+
`,
|
|
41
|
+
})
|
|
42
|
+
export class Example {
|
|
43
|
+
motion = "";
|
|
44
|
+
}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## Inputs / Outputs
|
|
48
|
+
|
|
49
|
+
| Name | Type | Required | Description |
|
|
50
|
+
| -------------- | ------------------------ | -------- | ------------------------------------------------------------ |
|
|
51
|
+
| `label` | `string` | yes | Accessible name (`aria-label`) for the button + listbox. |
|
|
52
|
+
| `motions` | `string[]` | yes | Available motion slugs. |
|
|
53
|
+
| `value` | `string` (model) | no | Selected slug. Two-way bindable via `[(value)]`. |
|
|
54
|
+
| `defaultValue` | `string` | no | Initial slug when nothing else is supplied. |
|
|
55
|
+
| `storageKey` | `string` | no | If set, persist the slug to `localStorage`. |
|
|
56
|
+
| `name` | `string` | no | `name` of the hidden input (default `"motion"`). |
|
|
57
|
+
| `target` | `HTMLElement \| null` | no | Element to receive `data-motion`. Default `<html>`. |
|
|
58
|
+
| `motionLabels` | `Record<string,string>` | no | Pretty labels per slug. |
|
|
59
|
+
| `className` | `string` | no | Extra CSS class on the root. |
|
|
60
|
+
| `motionChange` | `output<string>` | — | Emits after a new motion preference is applied. |
|
|
61
|
+
|
|
62
|
+
## Behaviour
|
|
63
|
+
|
|
64
|
+
Initial value resolves from `value` > storage > `defaultValue` > the
|
|
65
|
+
platform's `(prefers-reduced-motion: reduce)` preference (mapped to
|
|
66
|
+
`"reduce"` / `"no-preference"` if either is in `motions`) > `motions[0]`.
|
|
67
|
+
All DOM writes guard on `typeof document`, so the component is
|
|
68
|
+
SSR-safe.
|
|
69
|
+
|
|
70
|
+
## Accessibility
|
|
71
|
+
|
|
72
|
+
- WCAG 2.2 AAA target; directly supports 2.3.3 (Animation from
|
|
73
|
+
Interactions).
|
|
74
|
+
- APG listbox keyboard contract: arrows (clamped), `Home` / `End`,
|
|
75
|
+
`PageUp` / `PageDown` (by ten), typeahead with same-character
|
|
76
|
+
cycling, `Escape` discards, and `Tab` closes via the button so the
|
|
77
|
+
default Tab proceeds from the picker's position.
|
|
78
|
+
- `aria-label` carries the consumer-supplied accessible name.
|
|
79
|
+
- Default labels title-case the slug.
|
|
80
|
+
|
|
81
|
+
---
|
|
82
|
+
|
|
83
|
+
Lily™ and Lily Design System™ are trademarks.
|