You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
exportconstNAV_GROUPS=['Guides','Page Layouts','Grids and Rows','Boxes and Stacks','Content','Navigation','Forms and Actions','Feedback','Reference'];
21
+
// Motion comes after Feedback and before Reference: it is the last thing a
22
+
// page gets, once it is arranged, filled, navigable and answering back.
23
+
exportconstNAV_GROUPS=['Guides','Page Layouts','Grids and Rows','Boxes and Stacks','Content','Navigation','Forms and Actions','Feedback','Motion','Reference'];
22
24
constgroupOf=(m)=>m.group??GROUPS[m.kind];
23
25
constRESERVED_PAGES=newSet(['tokens']);
24
26
@@ -59,11 +61,18 @@ export function escapeAttribute(text) {
59
61
// at the stylesheet's own folder, since a srcdoc frame otherwise resolves
Copy file name to clipboardExpand all lines: docs/accordion.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,12 +9,12 @@ nav_order: 1
9
9
10
10
# Accordion
11
11
12
-
A column of disclosures built on details and summary, each opening to show its panel, with the browser doing the opening, the keyboard, and the announcing.
12
+
<pclass="lede">A column of disclosures built on details and summary, each opening to show its panel, with the browser doing the opening, the keyboard, and the announcing.</p>
13
13
14
14
## Example
15
15
16
16
<figureclass="demo"data-height="lg">
17
-
<divdata-preview="Accordion"><iframetitle="Accordion, live"srcdoc="<base href="/yeti/"><link rel="stylesheet" href="/yeti/yeti.css"><script type="module" src="/yeti/yeti.js"></script><body style="margin:0;padding:var(--yeti-space-md)"><div class="accordion"> <details name="faq"> <summary>Does Yeti need JavaScript?</summary> <p>Almost never. A handful of optional modules exist and nothing depends on them.</p> </details> <details name="faq"> <summary>Can I use my own class names?</summary> <p>Yes. Anything Yeti does not declare is ignored.</p> </details> </div>"></iframe></div>
17
+
<divdata-preview="Accordion"><iframetitle="Accordion, live"srcdoc="<base href="/yeti/"><link rel="stylesheet" href="/yeti/frame.css"><script type="module" src="/yeti/yeti.js"></script><body style="margin:0;padding:var(--yeti-space-md)"><div class="accordion"> <details name="faq"> <summary>Does Yeti need JavaScript?</summary> <p>Almost never. A handful of optional modules exist and nothing depends on them.</p> </details> <details name="faq"> <summary>Can I use my own class names?</summary> <p>Yes. Anything Yeti does not declare is ignored.</p> </details> </div>"></iframe></div>
Copy file name to clipboardExpand all lines: docs/affix.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,12 +9,12 @@ nav_order: 1
9
9
10
10
# Affix
11
11
12
-
Joins a control with what belongs beside it, a unit, a symbol, a button, or another control, into one thing with a shared border and height.
12
+
<pclass="lede">Joins a control with what belongs beside it, a unit, a symbol, a button, or another control, into one thing with a shared border and height.</p>
<div><strong>Saved.</strong> Your changes are live.</div>
25
+
</div>
26
+
```
27
+
28
+
</details>
29
+
</figure>
30
+
31
+
## When to use it
32
+
33
+
On something that has just changed and might otherwise be missed: the alert that appeared after a save, the total that moved when a quantity changed, the field the server rejected. It plays on load, so in practice it arrives with the element, whether that element came from a navigation or was written into the page.
34
+
35
+
Not as an ornament, and not on anything permanent. A pulse on a heading that has always been there is an instruction to look at something that has nothing to say.
One run of one animation, over `--yeti-attention-duration`. `pulse` swells the element to `--yeti-attention-scale` at the halfway point and settles back; the peak is in the middle so the gesture is symmetrical, since something that grows and snaps back reads as a twitch. `shake` throws it `--yeti-attention-distance` to each side and back twice, because a single sideways move is a slide and it takes the return trip to read as a shake.
44
+
45
+
It runs once, and the iteration count is deliberately left at the initial `1` rather than reading `--yeti-motion-iterations`, which exists for the animations that never end. A gesture that keeps repeating stops being a moment that has passed and becomes a state the page is in, and the reader has no way to dismiss it.
46
+
47
+
No keyframe leaves the element anywhere but where it started, so no fill mode is needed and nothing here can strand an element off its mark.
48
+
49
+
## Accessibility
50
+
51
+
Motion is not an announcement. A screen reader hears nothing at all here, so a change worth pointing at is a change worth saying: put the element in a live region, or give it `role="status"`, and the gesture becomes the visual half of something that is already spoken.
52
+
53
+
Under reduced motion `--yeti-attention-duration` collapses and the element simply sits still, which is the whole of the accommodation — there is nothing left to see, and the live region is still heard.
|`data-attention`| enum |`pulse`, `shake`|`pulse`| Which gesture: a swell and settle, or a shake from side to side. |
60
+
61
+
## Children
62
+
63
+
No structural requirements.
64
+
65
+
## Tokens
66
+
67
+
| Token | Description |
68
+
| --- | --- |
69
+
|`--yeti-attention-duration`| How long the gesture takes; reduced motion collapses it. |
70
+
|`--yeti-attention-distance`| How far a shake throws the element to each side. |
71
+
|`--yeti-attention-scale`| How large a pulse swells the element at its peak. |
72
+
|`--yeti-ease`| The easing of the gesture. |
73
+
74
+
## Accessibility
75
+
76
+
- Motion is not an announcement. A change worth pointing at is worth saying, so put the element in a live region, or give it role="status", and the gesture becomes the visual half of something a screen reader already hears. It plays once and never repeats, so nothing here keeps moving under a reader who cannot dismiss it, and under reduced motion the duration collapses and the element simply sits still.
77
+
78
+
## Browser support
79
+
80
+
- Used without guards: individual transform properties
0 commit comments