stylegallery 0.1.4 → 0.1.6
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/DOMAINS.md +11 -9
- package/GOVERNANCE.md +7 -1
- package/README.md +18 -0
- package/consumer-reference/agent-native/v2/admission-policy.json +71 -1
- package/consumer-reference/agent-native/v2/material-registry.json +1 -1
- package/consumer-reference/agent-native/v2/schema/admission-policy.schema.json +2 -2
- package/design-engineering/component-contract.md +98 -0
- package/design-engineering/decision-tree.md +69 -0
- package/design-engineering/index.md +12 -2
- package/design-engineering/worked-examples.md +127 -0
- package/design-terminology/comparison-workflow.md +98 -0
- package/design-terminology/conflict-cases.md +42 -53
- package/design-terminology/index.md +13 -5
- package/design-terminology/relation-types.md +12 -6
- package/design-terminology/source-vocabularies.md +17 -3
- package/game-ui/decision-tree.md +81 -0
- package/game-ui/index.md +11 -1
- package/game-ui/screen-recipes.md +101 -0
- package/game-ui/verification-workflow.md +100 -0
- package/index.md +8 -0
- package/log.md +38 -0
- package/motion/decision-tree.md +70 -0
- package/motion/index.md +14 -2
- package/motion/interaction-recipes.md +164 -0
- package/motion/motion-brief.md +125 -0
- package/motion/review-workflow.md +8 -0
- package/motion/vocabulary.md +2 -2
- package/package.json +15 -1
- package/platform-guides/adaptation-workflow.md +76 -0
- package/platform-guides/android-interaction.md +74 -0
- package/platform-guides/apple-interaction.md +9 -1
- package/platform-guides/compatibility-matrix.md +97 -0
- package/platform-guides/index.md +13 -2
- package/platform-guides/windows-interaction.md +75 -0
- package/recipes/homepage.md +8 -0
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
---
|
|
2
|
+
type: Domain Guide
|
|
3
|
+
title: Motion Interaction Recipes
|
|
4
|
+
description: State-based product motion recipes for feedback, disclosure, modal transitions, rearrangement, progress, and dragging.
|
|
5
|
+
domain: motion
|
|
6
|
+
lifecycle: experimental
|
|
7
|
+
provenance_kind: local
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# Motion Interaction Recipes
|
|
11
|
+
|
|
12
|
+
Primary role: motion behavior catalog.
|
|
13
|
+
|
|
14
|
+
## Repository Boundary
|
|
15
|
+
|
|
16
|
+
These recipes describe product behavior and failure cases. They compose with Layout instead of supplying reusable spatial CSS or visual defaults. Start with a [Motion Brief](motion-brief.md); use [Vocabulary](vocabulary.md) for the visual effect's name.
|
|
17
|
+
|
|
18
|
+
## Reusable Method
|
|
19
|
+
|
|
20
|
+
Choose the task below, assign semantic and presentation owners, implement the immediate state change first, and then test any visual interpolation against that baseline. The traces below are expected behavior, not evidence of a tested implementation.
|
|
21
|
+
|
|
22
|
+
### Action Feedback
|
|
23
|
+
|
|
24
|
+
Use for a command whose acknowledgement and completion are different events.
|
|
25
|
+
|
|
26
|
+
`ready → pending → success | error`; a retry is a new request. Press feedback may acknowledge input immediately, but a success treatment waits for actual confirmation. Decide explicitly whether repeated activation is ignored, queued, or replaces the request. Keep essential status available without motion. Test delayed completion, duplicate input, failure, and a response arriving after navigation.
|
|
27
|
+
|
|
28
|
+
### Disclosure
|
|
29
|
+
|
|
30
|
+
Use for optional content controlled by a nearby trigger. A native `details`/`summary` baseline can be enough:
|
|
31
|
+
|
|
32
|
+
```html
|
|
33
|
+
<details>
|
|
34
|
+
<summary>Delivery restrictions</summary>
|
|
35
|
+
<p>Some destinations need an additional delivery day.</p>
|
|
36
|
+
</details>
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
If a custom disclosure is necessary, keep the trigger's expanded state consistent with content availability. The [APG disclosure contract](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) describes button activation and state semantics. When closing while focus is inside, move focus to an available logical target before hiding it. Test repeated toggle, long content, and removal of the trigger. Avoid fixed maximum heights that clip real content; Layout owns intrinsic sizing.
|
|
40
|
+
|
|
41
|
+
### Modal Transition
|
|
42
|
+
|
|
43
|
+
Use when a temporary task must block the surrounding interface. Assign one owner to opening, focus placement, blocking, cancellation, and focus return. An entrance effect may decorate this change; semantic availability must not wait for an arbitrary timeout. If exit animation is retained, define whether the dialog remains modal until cleanup and how reopening supersedes a pending close.
|
|
44
|
+
|
|
45
|
+
The [APG modal dialog guidance](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) supplies the web interaction baseline. Test close during entry, reopen during exit, nested overlays, trigger removal, and reduced motion. After final close there must be no surviving blocker or focus trap.
|
|
46
|
+
|
|
47
|
+
### Reorder And Filter
|
|
48
|
+
|
|
49
|
+
Use when the same identifiable items move or are removed. Commit the intended logical order, retain stable item keys, and interpolate presentation only where the source/destination mapping is valid. Preserve focused items; if one disappears, choose a documented neighboring item or controlling filter. Do not reorder DOM solely to produce a pleasing stagger.
|
|
50
|
+
|
|
51
|
+
Trace: filter A → filter B → late A data → B remains current. Test empty results, long item labels, list updates during movement, keyboard navigation, and a focused item's removal. An immediate redraw is the fallback when continuity cannot be established.
|
|
52
|
+
|
|
53
|
+
### Progress And Completion
|
|
54
|
+
|
|
55
|
+
Use when an ongoing operation needs visible status. Show determinate progress only when backed by a meaningful measurement; otherwise use a pending state. Completion, failure, and cancellation come from the operation, independently of the progress decoration.
|
|
56
|
+
|
|
57
|
+
Trace: pending → cancellation requested → confirmed cancelled or completed; do not promise cancellation succeeded before the operation confirms it. Essential information persists beyond a transient flourish. Use urgent alerts sparingly; [APG alert guidance](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) distinguishes announcements from focus-taking dialogs.
|
|
58
|
+
|
|
59
|
+
### Drag And Settle
|
|
60
|
+
|
|
61
|
+
Use when direct manipulation previews a change before commitment. Separate the preview value from the committed value. Release on a valid target commits; cancellation restores or reconciles with the current model. A new gesture retargets from the presented position where continuity is intended. Provide a task-equivalent non-drag operation.
|
|
62
|
+
|
|
63
|
+
Test release inside/outside, cancellation, pointer loss, a changing destination, and repeated reversal. Focus and the selected item must remain traceable while visual position changes. The engine or browser adapter owns gesture events; the product owns acceptance of the new value.
|
|
64
|
+
|
|
65
|
+
### Scroll-Driven Story
|
|
66
|
+
|
|
67
|
+
Use when a visitor explores a product through ordered visual chapters: scroll a phone into view, enlarge the device, change its screen, then release the scene into the next section. The story is presentation; scrolling must not commit a payment or other application action.
|
|
68
|
+
|
|
69
|
+
| Responsibility | Contract | Failure to exercise |
|
|
70
|
+
| --- | --- | --- |
|
|
71
|
+
| Scroll reveal | Entry triggers a time-based effect; declare once or replay | Re-enter, preference change, content hidden before script starts |
|
|
72
|
+
| Scroll scrub | Position continuously determines a bounded progress value | Reverse, jump over a segment, load at the middle |
|
|
73
|
+
| Pinned story | Document scroll advances a locally sticky stage | Short viewport, long copy, wrong ancestor overflow, release boundary |
|
|
74
|
+
| Layered parallax | Each decorative layer maps progress to a bounded displacement | Cropping, text overlap, reduced-motion alternative |
|
|
75
|
+
| Media sequence | Progress requests an image frame or media time | Slow decode, stale completion, missing frame, unavailable media |
|
|
76
|
+
|
|
77
|
+
The [Scroll Story Lab](../examples/scroll-story/README.md) links runnable Flow and headphones examples, a native CSS scrub, source files, and observed verification. It implements scrub, pinning, scene crossfades, and a small image sequence. Parallax and video seeking remain contracts rather than claimed executed examples.
|
|
78
|
+
|
|
79
|
+
#### Scene Composition Contract
|
|
80
|
+
|
|
81
|
+
Layout owns document scroll, the containing block, sticky offset, available stage height, and track distance. Motion owns progress, scene ranges, continuity, and teardown. The consuming product owns imagery, typography, colors, and visual values. First compose `stack`, `content-limiter`, and `overlay-stack` responsibilities with local sticky positioning; a new Layout pattern requires a distinct demonstrated spatial failure.
|
|
82
|
+
|
|
83
|
+
Record `start`, `distance`, `scene_ranges`, `resize_policy`, `direct_entry`, `static_path`, and `media_budget` alongside the [Motion Brief](motion-brief.md). For positive distance, clamp `(scroll_position - start) / distance` to `[0, 1]`; a nonpositive distance selects the static path. Derive the entire scene from current progress, not from which callbacks have already fired. This makes reversal and skipped segments well defined.
|
|
84
|
+
|
|
85
|
+
The worked three-scene example centers chapters at progress 0, 0.5, and 1. Copy crossfades between centers while decorative scale and position interpolate. These values are local choices, not universal timing or easing defaults. No wheel interception or artificial scroll smoothing is needed for the example.
|
|
86
|
+
|
|
87
|
+
#### Implementation And Fallback
|
|
88
|
+
|
|
89
|
+
Choose the smallest rendering mechanism that meets the contract. CSS scroll/view timelines suit declarative interpolation; a scheduled JavaScript renderer can coordinate semantic availability and decoded media. Feature detection only chooses an implementation candidate, not a supported-device claim. The lab demonstrates CSS continuous rotation separately from its JavaScript three-scene controller; it does not claim visual parity between them.
|
|
90
|
+
|
|
91
|
+
Keep all chapters in ordinary semantic HTML before enhancement. In animated mode, only the presented chapter is available to interaction and accessibility APIs; a visible reading-mode control exposes every chapter in order. Provide a skip link outside the changing panels. Do not put essential actions only inside a fading chapter. Narrow or low windows, overflowing copy, no script, and reduced motion must retain a readable path. React to preference changes during use.
|
|
92
|
+
|
|
93
|
+
Cache geometry on layout changes, batch scroll updates, and avoid a perpetual idle animation loop. Recompute on resize, delayed fonts/images, and history restoration. Dispose observers, queued frames, and stale media callbacks on removal. A restored page must recompute from its restored position.
|
|
94
|
+
|
|
95
|
+
#### Media Contract
|
|
96
|
+
|
|
97
|
+
Record frame order, dimensions, poster, compression, source/license, decoded-memory estimate, cache limit, concurrent decode limit, timeout, and fallback. A successful older decode must never replace a newer requested frame. Retain a poster or last good frame while loading or after failure. Keep essential text outside the image. For video, additionally define duration readiness, seek granularity, pending-seek replacement, and seek failure; selecting `currentTime` is not proof of frame-accurate delivery.
|
|
98
|
+
|
|
99
|
+
The lab uses twelve locally drawn 480×480 SVG illustrations, one in-flight decode, three cached frames, and an eight-second example timeout. These low-detail illustrations verify the loading lifecycle, not photographic quality or production video performance.
|
|
100
|
+
|
|
101
|
+
#### Verification Trace
|
|
102
|
+
|
|
103
|
+
Exercise `0 → 0.5 → 1 → 0.5 → 0`, direct entry at 0.5, and jumps across both scene boundaries. Compare presented state at the same progress in both directions. Also exercise resize mid-scene, text growth, image failure, a slow obsolete request, idle updates, reading-mode activation, preference changes, and teardown. Record browser and OS separately from emulated viewport/input. A screenshot proves one state; performance and perceptual continuity need separate evidence.
|
|
104
|
+
|
|
105
|
+
Technical sources rechecked on 2026-09-09: [W3C Scroll-driven Animations draft](https://www.w3.org/TR/scroll-animations-1/), [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame), and [image decode](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decode). These support the API distinctions and decode lifecycle; they do not establish local frame rate, comfort, or adoption.
|
|
106
|
+
|
|
107
|
+
### Full-Viewport Scene Navigation
|
|
108
|
+
|
|
109
|
+
Task: explore a short sequence as screen transitions while the document stays at one position. This is discrete navigation driven by input, not a scroll-position timeline. Use the [Scene Navigation example](../examples/scene-navigation/README.md) for a runnable contract.
|
|
110
|
+
|
|
111
|
+
| Model | State source | Scroll responsibility |
|
|
112
|
+
| --- | --- | --- |
|
|
113
|
+
| Pinned scrub | Continuous document position | Document traverses a track; the local stage sticks and releases |
|
|
114
|
+
| Native snapping | Browser scroll position and snap targets | Document or named pane scrolls between real positions |
|
|
115
|
+
| Fixed-viewport scenes | Selected chapter identity | Document stays fixed in scene mode; overflowing copy owns native scrolling |
|
|
116
|
+
|
|
117
|
+
Choose explicitly; similar appearance does not make their input, history, or recovery behavior equivalent. A short showcase may justify scene navigation. Articles, search results, forms, and long task flows should retain ordinary reading and scrolling unless a tested task requires otherwise.
|
|
118
|
+
|
|
119
|
+
#### Input And Navigation Contract
|
|
120
|
+
|
|
121
|
+
One controller owns the selected chapter. Commit that state immediately and let product CSS retarget presentation; never wait for an animation timer before accepting navigation. Keep the same decorative subject node across scenes when object continuity is intended.
|
|
122
|
+
|
|
123
|
+
- Declare the input surface. The example owns vertical wheel gestures only within its stage and touch swipes only over its decorative art; visible chapter and previous/next controls remain available.
|
|
124
|
+
- Aggregate small wheel deltas and accept at most one navigation per burst. Declare threshold, unit conversion, silence interval, reversal, and edge behavior as local choices. Test long momentum tails on actual target hardware before claiming trackpad support.
|
|
125
|
+
- Exempt editable controls, native overflowing copy, modifier gestures, and horizontal scrolling. Do not capture Tab, browser history shortcuts, or pinch zoom. Do not auto-advance from a copy pane when its scroll reaches the edge.
|
|
126
|
+
- Support direct chapter links, keyboard commands, Back/Forward restoration, and invalid-fragment fallback. Do not loop at the first or last chapter. Preserve unrelated URL state.
|
|
127
|
+
- Make only the selected panel interactive in scene mode. If focus was inside the outgoing panel, move it to the incoming heading; otherwise retain control focus. Announce the chapter separately from animation.
|
|
128
|
+
- Provide a persistent reading-mode control and an escape command. All chapters remain ordinary semantic HTML with no script. A short viewport selects reading mode; long copy remains a named native scroll region.
|
|
129
|
+
- Reduced motion may preserve discrete navigation while making transitions immediate. State this separately from the pinned example's static fallback, and react to preference changes during use.
|
|
130
|
+
|
|
131
|
+
The example's 60-pixel aggregate threshold, 180-millisecond silence interval, 55-pixel swipe threshold, and 540-pixel minimum height are product experiments. They are not gallery-wide defaults or measured usability recommendations.
|
|
132
|
+
|
|
133
|
+
#### Verification Trace
|
|
134
|
+
|
|
135
|
+
Record `0 → 1 → 2 → 1 → 0` with document position unchanged, a long wheel burst, fresh reverse gesture, rapid opposite commands, boundary commands, direct entry, Back/Forward, and Escape. Exercise long copy and text editing without changing chapters, cancelled/multi-touch gestures, no script, reduced motion, resize, and teardown. Desktop touch emulation does not establish iOS Safari, Android, physical trackpad, or assistive-technology behavior.
|
|
136
|
+
|
|
137
|
+
Locally authored interaction contract. The worked example's verification is bounded to its recorded source and runtime; no external homepage implementation is inferred from its appearance.
|
|
138
|
+
|
|
139
|
+
## Opinionated Guidance
|
|
140
|
+
|
|
141
|
+
For frequent operations, compare with removing motion before increasing its complexity. When two recipes compose, one controller must arbitrate the shared state rather than letting competing completion callbacks decide it.
|
|
142
|
+
|
|
143
|
+
## Platform-Specific Guidance
|
|
144
|
+
|
|
145
|
+
For the web, [`prefers-reduced-motion`](https://www.w3.org/TR/mediaqueries-5/#prefers-reduced-motion) is a preference signal. Define the alternative per recipe and respond to preference changes during use. API support, native gesture physics, and rendering performance require the exact target runtime.
|
|
146
|
+
|
|
147
|
+
## Unsupported Absolutes
|
|
148
|
+
|
|
149
|
+
These recipes establish no universal duration, spring configuration, frame rate, device coverage, or aesthetic result. A static snippet does not prove animated or assistive-technology behavior.
|
|
150
|
+
|
|
151
|
+
## Verification Contract
|
|
152
|
+
|
|
153
|
+
For each implemented recipe record before, intermediate, interrupted, and final states; logical order and focus; reduced-motion behavior; and completion/error cleanup. Source inspection can check declared ownership. Rendered interaction and assistive-technology behavior require the consuming application. Review when an API changes or a trace fails.
|
|
154
|
+
|
|
155
|
+
The [Interaction Lab](../examples/domain-interactions/README.md) provides a bounded web implementation of feedback, native disclosure, modal dismissal, stale search results, reward reveal, and range-input preview. Its [verification notes](../examples/domain-interactions/verification.md) record exercised states and preferences; they do not establish coverage for every possible implementation of these recipes.
|
|
156
|
+
|
|
157
|
+
## Source, License, And Attribution
|
|
158
|
+
|
|
159
|
+
Locally authored recipes and HTML. The linked W3C APG pages and Media Queries Level 5 were rechecked on 2026-09-08 for the specific semantics and preference signal above. No upstream examples or timing prescriptions are copied.
|
|
160
|
+
|
|
161
|
+
## IA Navigation
|
|
162
|
+
|
|
163
|
+
Parent: [Motion](index.md).
|
|
164
|
+
Next: [Motion Review Workflow](review-workflow.md).
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
---
|
|
2
|
+
type: Domain Guide
|
|
3
|
+
title: Motion Brief
|
|
4
|
+
description: Author a product-owned transition contract with interruption, preference, and evidence requirements.
|
|
5
|
+
domain: motion
|
|
6
|
+
lifecycle: experimental
|
|
7
|
+
provenance_kind: local
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# Motion Brief
|
|
11
|
+
|
|
12
|
+
Primary role: motion implementation handoff template.
|
|
13
|
+
|
|
14
|
+
## Repository Boundary
|
|
15
|
+
|
|
16
|
+
This brief records one product-owned behavior. Its timings, distances, and treatments never become reusable Layout values. Use the [Decision Tree](decision-tree.md) before filling it in.
|
|
17
|
+
|
|
18
|
+
## Reusable Method
|
|
19
|
+
|
|
20
|
+
Complete every field, using `unknown` for missing observations and a reason for non-applicability. A blank field is not an accepted exception.
|
|
21
|
+
|
|
22
|
+
```yaml
|
|
23
|
+
interaction: # a user action and the state it changes
|
|
24
|
+
purpose: # the information motion adds
|
|
25
|
+
frequency: # observed or estimated, with its basis
|
|
26
|
+
trigger: # input, data event, navigation, or scroll progress
|
|
27
|
+
semantic_owner: # who commits the real application state
|
|
28
|
+
presentation_owner: # who starts, retargets, cancels, and disposes motion
|
|
29
|
+
layout_owner: # final geometry and scroll responsibility
|
|
30
|
+
states: # initial, in-flight, completed, failed, cancelled
|
|
31
|
+
identity: # stable object or item key, if continuity is claimed
|
|
32
|
+
parameters: # product-local values and why they are being tried
|
|
33
|
+
interruption: # reverse, retarget, finish, or cancel, and from which state
|
|
34
|
+
focus_and_input: # entry, availability during motion, exit, fallback target
|
|
35
|
+
reduced_motion: # equivalent state/feedback without unnecessary movement
|
|
36
|
+
teardown: # navigation, removal, preference change, and stale callbacks
|
|
37
|
+
verification: # exact actions, expected outcomes, runtime and artifacts
|
|
38
|
+
observed_result: # not_run until evidence exists
|
|
39
|
+
boundary: # what those observations cannot establish
|
|
40
|
+
review_trigger: # source/API change, a failed case, or reader task
|
|
41
|
+
consumer_reference: not_applicable
|
|
42
|
+
consumer_reference_reason: This blank template selects no consumer reference record.
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Filled Example: Search Status Feedback
|
|
46
|
+
|
|
47
|
+
| Field | Example decision |
|
|
48
|
+
| --- | --- |
|
|
49
|
+
| Interaction and purpose | Submit a search; distinguish waiting, zero results, results, and failure |
|
|
50
|
+
| Frequency | Unknown; measure in the consuming search task |
|
|
51
|
+
| Semantic owner | Search controller; only the active request may replace results |
|
|
52
|
+
| Presentation owner | Status component; progress decoration may stop independently |
|
|
53
|
+
| Layout owner | Consumer's result region; [Feed](../patterns/stacking/feed.md) can own vertical repetition |
|
|
54
|
+
| Transition | Idle → pending → results/empty/error; a new query supersedes the old request |
|
|
55
|
+
| Parameters | No movement needed for the baseline; a loading treatment is an optional later hypothesis |
|
|
56
|
+
| Interruption | Query B supersedes query A; A's late completion is ignored |
|
|
57
|
+
| Focus | Remains on the initiating control unless the user moves it |
|
|
58
|
+
| Reduced motion | Static pending text and the same final result or error |
|
|
59
|
+
| Teardown | Abort where supported and reject stale completion by request identity |
|
|
60
|
+
| Verification | Submit A, submit B, resolve B, then resolve A; B remains presented |
|
|
61
|
+
| Observed result | `not_run`: illustrative contract, not captured product evidence |
|
|
62
|
+
| Review trigger | The product changes its request lifecycle, navigation, or status announcement |
|
|
63
|
+
|
|
64
|
+
Example handoff: `consumer_reference: not_applicable` because no profile or consumer evidence record is selected. A real consumer replaces this with its applicable repository-relative record or its own reason.
|
|
65
|
+
|
|
66
|
+
## Scroll Story Extension
|
|
67
|
+
|
|
68
|
+
For scroll-linked scenes, fill these fields in addition to the general brief:
|
|
69
|
+
|
|
70
|
+
```yaml
|
|
71
|
+
scroll_owner: document
|
|
72
|
+
stage_owner: # sticky containing block and offset
|
|
73
|
+
start_and_distance: # measured start, positive distance, zero-distance alternative
|
|
74
|
+
scene_ranges: # each chapter's entry, hold, exit, and semantic availability
|
|
75
|
+
resize_policy: # recompute geometry and fall back when content cannot fit
|
|
76
|
+
direct_entry: # derive state from restored scroll position without replay
|
|
77
|
+
static_path: # source-order reading, no script, reduced motion, explicit user choice
|
|
78
|
+
media_budget: # poster, dimensions, cache, decode concurrency, timeout, fallback
|
|
79
|
+
performance_protocol: # exact runtime, input trace, measurements and local targets
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
See [Scroll-driven story](interaction-recipes.md#scroll-driven-story) and the [worked lab](../examples/scroll-story/README.md). A brief must distinguish view-entry triggers from continuous scroll progress.
|
|
83
|
+
|
|
84
|
+
## Fixed-Viewport Navigation Extension
|
|
85
|
+
|
|
86
|
+
Use this instead of assuming a document scroll track when the selected chapter drives the page:
|
|
87
|
+
|
|
88
|
+
```yaml
|
|
89
|
+
state_source: selected chapter ID
|
|
90
|
+
input_owner: # stage, exempt editable/native scroll regions, visible alternatives
|
|
91
|
+
gesture_policy: # wheel units/threshold/burst/reversal; swipe start/cancel/multi-touch
|
|
92
|
+
navigation: # chapter hashes, direct entry, Back/Forward, invalid destination
|
|
93
|
+
boundaries: # first/last behavior; no implicit wrap or browser-navigation trap
|
|
94
|
+
focus_policy: # outgoing panel focus, retained control focus, status announcement
|
|
95
|
+
reading_escape: # visible control, Escape, short viewport, no-script path
|
|
96
|
+
reduced_motion: # immediate chapter changes or a declared static alternative
|
|
97
|
+
teardown: # input listeners, pending state, document overflow restoration
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
See [Full-viewport scene navigation](interaction-recipes.md#full-viewport-scene-navigation). Record ordinary document scrolling, pinned scrubbing, native snapping, and input-driven navigation as distinct choices.
|
|
101
|
+
|
|
102
|
+
## Opinionated Guidance
|
|
103
|
+
|
|
104
|
+
Write cancellation before tuning curves. An animation completion callback should report presentation completion; it should not be the sole authority for network success, focus cleanup, or saving data.
|
|
105
|
+
|
|
106
|
+
## Platform-Specific Guidance
|
|
107
|
+
|
|
108
|
+
Record actual browser, OS, input mode, and relevant animation-library version in the consumer's verification record. A preference query indicates a requested behavior; it does not prove the implemented alternative is comfortable.
|
|
109
|
+
|
|
110
|
+
## Unsupported Absolutes
|
|
111
|
+
|
|
112
|
+
No fixed timing, animation technology, or one reduced-motion treatment works for every brief. A filled template is not executed evidence.
|
|
113
|
+
|
|
114
|
+
## Verification Contract
|
|
115
|
+
|
|
116
|
+
The brief is ready to implement when every state has an owner, every interruption has a resulting state, and every acceptance claim names an observable. Execution must add artifacts and pass/fail results. Use the [Review Workflow](review-workflow.md) for findings and retesting.
|
|
117
|
+
|
|
118
|
+
## Source, License, And Attribution
|
|
119
|
+
|
|
120
|
+
Locally authored template and fictional search scenario. The existing domain contracts provide its evidence boundary.
|
|
121
|
+
|
|
122
|
+
## IA Navigation
|
|
123
|
+
|
|
124
|
+
Parent: [Motion](index.md).
|
|
125
|
+
Next: [Motion Interaction Recipes](interaction-recipes.md).
|
|
@@ -72,6 +72,14 @@ Do not automatically block `ease-in`, a particular scale value, motion longer th
|
|
|
72
72
|
|
|
73
73
|
Exercise the actual interaction in its default, repeated, interrupted, reversed, and reduced-motion states. Record the exact environment and observable. Source review may establish declared code paths; rendered and human outcomes require corresponding evidence families.
|
|
74
74
|
|
|
75
|
+
## Scroll Story Evidence
|
|
76
|
+
|
|
77
|
+
For [scroll-driven stories](interaction-recipes.md#scroll-driven-story), add boundary samples immediately before and after each scene transition, forward/reverse comparison, large jumps, direct middle entry, reload/history restoration, narrow and short viewports, long copy, and delayed font/image changes. Deliberately fail or delay a media request and verify stale completion cannot replace current presentation.
|
|
78
|
+
|
|
79
|
+
Record JavaScript update cost separately from animation-frame intervals: neither alone measures compositor frame delivery. Count idle updates to catch observer/decode feedback loops. Record media dimensions, bounded cache entries, and estimated decoded bytes separately from measured process/GPU memory. Set product-local budgets and keep real-device, touch, assistive-technology, and comfort outcomes `not_run` when unobserved.
|
|
80
|
+
|
|
81
|
+
The [Scroll Story verification](../examples/scroll-story/verification.md) records the two worked implementations and the limits of the local run.
|
|
82
|
+
|
|
75
83
|
## Source, License, And Attribution
|
|
76
84
|
|
|
77
85
|
- Upstream inspiration: [review-animations/SKILL.md](https://github.com/emilkowalski/skills/blob/220e8607c90b17337d210125777b7b695f26c221/skills/review-animations/SKILL.md)
|
package/motion/vocabulary.md
CHANGED
|
@@ -51,7 +51,7 @@ The terms are implementation-neutral. A framework, operating-system behavior, or
|
|
|
51
51
|
|
|
52
52
|
## Opinionated Guidance
|
|
53
53
|
|
|
54
|
-
The family ordering favors what a reader can observe before implementation details. It is useful for retrieval, but it is not a complete ontology. Add a term only
|
|
54
|
+
The family ordering favors what a reader can observe before implementation details. It is useful for retrieval, but it is not a complete ontology. Add a term only when contrastive repository cases show that existing terms and aliases cannot express the distinction.
|
|
55
55
|
|
|
56
56
|
## Platform-Specific Guidance
|
|
57
57
|
|
|
@@ -66,7 +66,7 @@ Names tied to iOS, macOS, a browser API, Motion, Framer Motion, React, or a comp
|
|
|
66
66
|
|
|
67
67
|
## Verification Contract
|
|
68
68
|
|
|
69
|
-
A vocabulary lookup should exercise exact, ambiguous, and unknown cases. Pass requires one justified term, an ordered candidate set with a stated distinction, or `unknown`; invented winners fail. A new term also requires
|
|
69
|
+
A vocabulary lookup should exercise exact, ambiguous, and unknown cases. Pass requires one justified term, an ordered candidate set with a stated distinction, or `unknown`; invented winners fail. A new term also requires contrastive exact, ambiguous, and unknown cases showing that the current vocabulary cannot express the distinction.
|
|
70
70
|
|
|
71
71
|
## Source, License, And Attribution
|
|
72
72
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "stylegallery",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.6",
|
|
4
4
|
"description": "A governed gallery of portable interface knowledge with deterministic CLIs and read-only MCP servers.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"homepage": "https://github.com/changeroa/StyleGallery#readme",
|
|
@@ -47,12 +47,16 @@
|
|
|
47
47
|
"consumer-reference/agent-native/v2/schema/material-record.schema.json",
|
|
48
48
|
"consumer-reference/contract.md",
|
|
49
49
|
"consumer-reference/index.md",
|
|
50
|
+
"design-engineering/component-contract.md",
|
|
50
51
|
"design-engineering/consumer-migration-readiness.md",
|
|
52
|
+
"design-engineering/decision-tree.md",
|
|
51
53
|
"design-engineering/index.md",
|
|
52
54
|
"design-engineering/interface-craft.md",
|
|
53
55
|
"design-engineering/reference-profiles/governed-local/editorial/profile.json",
|
|
54
56
|
"design-engineering/reference-profiles/governed-local/index.md",
|
|
55
57
|
"design-engineering/reference-profiles/index.md",
|
|
58
|
+
"design-engineering/worked-examples.md",
|
|
59
|
+
"design-terminology/comparison-workflow.md",
|
|
56
60
|
"design-terminology/concept-families.md",
|
|
57
61
|
"design-terminology/conflict-cases.md",
|
|
58
62
|
"design-terminology/index.md",
|
|
@@ -60,14 +64,17 @@
|
|
|
60
64
|
"design-terminology/source-kinds.md",
|
|
61
65
|
"design-terminology/source-vocabularies.md",
|
|
62
66
|
"game-ui/classification.md",
|
|
67
|
+
"game-ui/decision-tree.md",
|
|
63
68
|
"game-ui/index.md",
|
|
64
69
|
"game-ui/reference-record.md",
|
|
65
70
|
"game-ui/screen-hierarchy.md",
|
|
71
|
+
"game-ui/screen-recipes.md",
|
|
66
72
|
"game-ui/unity/architecture.md",
|
|
67
73
|
"game-ui/unity/cli-loop.md",
|
|
68
74
|
"game-ui/unity/org-wiki.md",
|
|
69
75
|
"game-ui/unity/repository-map.md",
|
|
70
76
|
"game-ui/unity/ui-systems.md",
|
|
77
|
+
"game-ui/verification-workflow.md",
|
|
71
78
|
"guides/decision-tree.md",
|
|
72
79
|
"guides/documentation-mode-taxonomy.md",
|
|
73
80
|
"guides/layout-brief.md",
|
|
@@ -76,7 +83,10 @@
|
|
|
76
83
|
"index.md",
|
|
77
84
|
"layout/index.md",
|
|
78
85
|
"log.md",
|
|
86
|
+
"motion/decision-tree.md",
|
|
79
87
|
"motion/index.md",
|
|
88
|
+
"motion/interaction-recipes.md",
|
|
89
|
+
"motion/motion-brief.md",
|
|
80
90
|
"motion/practice-reference.md",
|
|
81
91
|
"motion/review-workflow.md",
|
|
82
92
|
"motion/vocabulary.md",
|
|
@@ -136,8 +146,12 @@
|
|
|
136
146
|
"patterns/viewport-shell/scroll-body-shell.md",
|
|
137
147
|
"patterns/viewport-shell/sticky-footer.md",
|
|
138
148
|
"patterns/viewport-shell/sticky-header.md",
|
|
149
|
+
"platform-guides/adaptation-workflow.md",
|
|
150
|
+
"platform-guides/android-interaction.md",
|
|
139
151
|
"platform-guides/apple-interaction.md",
|
|
152
|
+
"platform-guides/compatibility-matrix.md",
|
|
140
153
|
"platform-guides/index.md",
|
|
154
|
+
"platform-guides/windows-interaction.md",
|
|
141
155
|
"quality/claim-records/design-terminology-domain-scope.md",
|
|
142
156
|
"quality/claim-records/index.md",
|
|
143
157
|
"quality/claim-records/samples.md",
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
---
|
|
2
|
+
type: Domain Guide
|
|
3
|
+
title: Platform Adaptation Workflow
|
|
4
|
+
description: Compare a native convention with a target implementation through source, capability, fallback, and evidence records.
|
|
5
|
+
domain: platform-guides
|
|
6
|
+
lifecycle: experimental
|
|
7
|
+
provenance_kind: local
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# Platform Adaptation Workflow
|
|
11
|
+
|
|
12
|
+
Primary role: platform comparison planning and handoff.
|
|
13
|
+
|
|
14
|
+
## Repository Boundary
|
|
15
|
+
|
|
16
|
+
Use a platform convention as a sourced comparison for a named task. The native platform owns its convention; the target's standards and actual runtime determine the adaptation. This workflow does not make a visual imitation equivalent to native behavior.
|
|
17
|
+
|
|
18
|
+
## Reusable Method
|
|
19
|
+
|
|
20
|
+
1. Name the task and target: native application, browser, embedded web view, or game engine.
|
|
21
|
+
2. Select [Apple](apple-interaction.md), [Android](android-interaction.md), or [Windows](windows-interaction.md) by source platform.
|
|
22
|
+
3. Record an official source, exact page section, version or dated reading, and re-review trigger.
|
|
23
|
+
4. Separate the observed/native fact from the transferable interaction question.
|
|
24
|
+
5. Choose an adaptation and an explicit fallback using the [Compatibility Matrix](compatibility-matrix.md).
|
|
25
|
+
6. Execute the target-specific acceptance cases and record what was not tested.
|
|
26
|
+
|
|
27
|
+
## Adaptation Record
|
|
28
|
+
|
|
29
|
+
| Field | Required content |
|
|
30
|
+
| --- | --- |
|
|
31
|
+
| Task | The user action, intended outcome, and affected state |
|
|
32
|
+
| Source context | Platform, OS/API or documentation version, source URL/section, review date |
|
|
33
|
+
| Source claim | The precise native fact supported by that source |
|
|
34
|
+
| Target context | Browser/OS/framework/device/input and relevant versions |
|
|
35
|
+
| Transferable question | What problem the convention helps investigate |
|
|
36
|
+
| Target decision | Implement, adapt, omit, or defer with a reason |
|
|
37
|
+
| Capability gap | Missing API, different input model, permission, or semantic difference |
|
|
38
|
+
| Fallback | A complete task path when the preferred capability is absent |
|
|
39
|
+
| Verification | Actions, expected and actual behavior, artifacts, source/build identity |
|
|
40
|
+
| Freshness | Source/API change or failed observation that triggers re-review |
|
|
41
|
+
| Handoff | `consumer_reference` record or `not_applicable` with a reason |
|
|
42
|
+
|
|
43
|
+
## Worked Comparison: Returning From Detail
|
|
44
|
+
|
|
45
|
+
Native source: Android's [predictive Back documentation](https://developer.android.com/guide/navigation/custom-back/predictive-back-gesture), reviewed 2026-09-08, describes gesture preview and cancellation. Transferable question: can a person understand and cancel a return before committing it?
|
|
46
|
+
|
|
47
|
+
Web decision: use the application's documented list/detail route and normal browser history. Restore the list's selection and relevant search state on return. Provide a visible return link where the task needs it. Do not intercept browser/system gestures merely to reproduce a preview.
|
|
48
|
+
|
|
49
|
+
Fallback: direct entry to a detail URL has no assumed prior list history; its visible parent link goes to the known collection route. Verification cases: navigate from a filtered list, return with browser Back, enter detail directly, cancel a local dialog before leaving, and return after the selected item is removed.
|
|
50
|
+
|
|
51
|
+
Actual result: `not_run`; this is a fictional adaptation proposal. `consumer_reference: not_applicable` because no consumer record is selected. The comparison claims neither native gesture support nor tested browser history restoration.
|
|
52
|
+
|
|
53
|
+
## Opinionated Guidance
|
|
54
|
+
|
|
55
|
+
Preserve the task and recovery path before reproducing the native effect. When a capability is absent, document an intentional complete alternative rather than a partially functioning control.
|
|
56
|
+
|
|
57
|
+
## Platform-Specific Guidance
|
|
58
|
+
|
|
59
|
+
The source platform and target platform are separate fields even when both run on the same device. A browser on Android does not expose every Android application API. A web view's embedding host may own navigation and permissions.
|
|
60
|
+
|
|
61
|
+
## Unsupported Absolutes
|
|
62
|
+
|
|
63
|
+
An official source establishes its own guidance, not target conformance. Similar appearance, shared vocabulary, or a matching API name is insufficient evidence of equivalent behavior.
|
|
64
|
+
|
|
65
|
+
## Verification Contract
|
|
66
|
+
|
|
67
|
+
A completed adaptation distinguishes source fact, local inference, target implementation, and actual observation. Verify unavailable capabilities, interrupted navigation, relevant preferences, and all claimed inputs. Re-review on a source change, target API change, or failed acceptance case; a review date alone is not proof of continuing support.
|
|
68
|
+
|
|
69
|
+
## Source, License, And Attribution
|
|
70
|
+
|
|
71
|
+
Locally authored comparison method and fictional example. The linked Android source was rechecked on 2026-09-08; prose and examples are independently written. Source access does not establish device execution.
|
|
72
|
+
|
|
73
|
+
## IA Navigation
|
|
74
|
+
|
|
75
|
+
Parent: [Platform Guides](index.md).
|
|
76
|
+
Next: [Platform Compatibility Matrix](compatibility-matrix.md).
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
---
|
|
2
|
+
type: Domain Guide
|
|
3
|
+
title: Android Interaction As A Comparative Reference
|
|
4
|
+
description: Source-bounded Android Back and adaptive-window guidance with explicit web translation and failure cases.
|
|
5
|
+
domain: platform-guides
|
|
6
|
+
lifecycle: experimental
|
|
7
|
+
provenance_kind: local
|
|
8
|
+
platform: Android applications
|
|
9
|
+
platform_version: dated official documentation; target OS and AndroidX versions required
|
|
10
|
+
reviewed_on: 2026-09-08
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# Android Interaction As A Comparative Reference
|
|
14
|
+
|
|
15
|
+
Primary role: Android platform comparison guide.
|
|
16
|
+
|
|
17
|
+
## Repository Boundary
|
|
18
|
+
|
|
19
|
+
This guide compares Android application behavior with a consumer's target. It does not equate Android APIs with browser APIs or prescribe Material visual treatment. Record the actual OS, AndroidX/UI stack, and target device before implementation.
|
|
20
|
+
|
|
21
|
+
## Reusable Method
|
|
22
|
+
|
|
23
|
+
Use the [Adaptation Workflow](adaptation-workflow.md). Choose a specific native concern below, inspect its source, then write the target behavior and fallback independently of native visuals.
|
|
24
|
+
|
|
25
|
+
## Source-Bounded Conventions
|
|
26
|
+
|
|
27
|
+
| Concern | Official source and bounded fact | Transferable question |
|
|
28
|
+
| --- | --- | --- |
|
|
29
|
+
| Back preview | [Predictive Back](https://developer.android.com/guide/navigation/custom-back/predictive-back-gesture) describes previewing a destination and cancelling a gesture; custom handling depends on the application stack | Is the destination understandable, and does cancelling preserve the current state? |
|
|
30
|
+
| Back ownership | The same source describes enabled callbacks and one recipient for a Back gesture | Which active layer consumes Back, and when does control return to the outer navigation owner? |
|
|
31
|
+
| Window adaptation | [Window size classes](https://developer.android.com/develop/adaptive-apps/guides/use-window-size-classes) classify available application window space for adaptive decisions | Does the screen adapt to its available space while preserving selection and task state? |
|
|
32
|
+
| Navigation transformation | [Responsive navigation](https://developer.android.com/develop/ui/views/layout/build-responsive-navigation) discusses changing navigation presentation with window conditions | Can the user reach the same destinations after presentation changes? |
|
|
33
|
+
|
|
34
|
+
These pages were read on 2026-09-08. They are a dated documentation set, not a pin of every Android release or package. Verify the implementation details for the selected runtime.
|
|
35
|
+
|
|
36
|
+
## Worked Adaptation: Compact List And Expanded Detail
|
|
37
|
+
|
|
38
|
+
Task: inspect a collection on a resizable surface. Native comparison: available window space can change the presentation. Target web decision: compose [List Detail](../recipes/list-detail.md), retain selected identity in application state, and let the Layout owner choose the fit constraint. Android's native units and class boundaries are not CSS breakpoints.
|
|
39
|
+
|
|
40
|
+
On a tight surface, the detail route can replace the list visually while preserving the query and selection. On a roomy surface, both can be visible. Returning must resolve a missing selected item explicitly. Changing presentation must not duplicate the current route or save unrelated navigation history entries.
|
|
41
|
+
|
|
42
|
+
| Action | Expected target behavior |
|
|
43
|
+
| --- | --- |
|
|
44
|
+
| Resize with item B selected | B remains the selected detail |
|
|
45
|
+
| Return to the list | Previous query remains available |
|
|
46
|
+
| Cancel an inner dialog | Dialog closes once; outer route stays put |
|
|
47
|
+
| Open detail directly | Parent navigation works without assuming prior history |
|
|
48
|
+
|
|
49
|
+
This is an unexecuted web proposal, not evidence of an Android build.
|
|
50
|
+
|
|
51
|
+
## Opinionated Guidance
|
|
52
|
+
|
|
53
|
+
Map Back, Up/parent navigation, dialog dismissal, and operation cancellation separately. They may share an icon or button position while changing different state.
|
|
54
|
+
|
|
55
|
+
## Platform-Specific Guidance
|
|
56
|
+
|
|
57
|
+
Android gesture progress, callback dispatch, activities, and AndroidX navigation belong to native or embedding-host code. A browser adaptation should use its supported navigation semantics. Record any web-view host integration as a separate implementation dependency.
|
|
58
|
+
|
|
59
|
+
## Unsupported Absolutes
|
|
60
|
+
|
|
61
|
+
Android window classes are not universal web breakpoints. A browser Back action is not necessarily an application's parent destination. A cancel animation does not prove the underlying operation was cancelled.
|
|
62
|
+
|
|
63
|
+
## Verification Contract
|
|
64
|
+
|
|
65
|
+
Test gesture completion/cancellation on the declared native device when claiming native behavior. For a web adaptation, test actual browser history, direct links, resizes, input modes, and dialog focus independently. Review when any cited convention or target navigation implementation changes.
|
|
66
|
+
|
|
67
|
+
## Source, License, And Attribution
|
|
68
|
+
|
|
69
|
+
Locally authored synthesis of the official Android pages linked above, rechecked 2026-09-08. No source code, tables, or native visual assets are reproduced. `consumer_reference: not_applicable` because this reference guide selects no consumer implementation record.
|
|
70
|
+
|
|
71
|
+
## IA Navigation
|
|
72
|
+
|
|
73
|
+
Parent: [Platform Guides](index.md).
|
|
74
|
+
Next: [Platform Compatibility Matrix](compatibility-matrix.md).
|
|
@@ -9,7 +9,7 @@ source_path: skills/apple-design/SKILL.md
|
|
|
9
9
|
source_revision: 220e8607c90b17337d210125777b7b695f26c221
|
|
10
10
|
platform: Apple platforms
|
|
11
11
|
platform_version: verify-current
|
|
12
|
-
reviewed_on: 2026-
|
|
12
|
+
reviewed_on: 2026-09-08
|
|
13
13
|
---
|
|
14
14
|
|
|
15
15
|
# Apple Interaction As A Comparative Reference
|
|
@@ -33,6 +33,14 @@ For each proposed comparison:
|
|
|
33
33
|
5. Define the web adaptation, including unavailable or materially different capabilities.
|
|
34
34
|
6. Verify the adapted behavior on its real surface and record what remains unproven.
|
|
35
35
|
|
|
36
|
+
## Official Source Review And Worked Adaptation
|
|
37
|
+
|
|
38
|
+
Official [HIG Motion](https://developer.apple.com/design/human-interface-guidelines/motion) and [HIG Accessibility](https://developer.apple.com/design/human-interface-guidelines/accessibility) were rechecked on 2026-09-08 through Apple's documentation data for [Motion](https://developer.apple.com/tutorials/data/design/human-interface-guidelines/motion.json) and [Accessibility](https://developer.apple.com/tutorials/data/design/human-interface-guidelines/accessibility.json). This is a dated living-document review, not a pin of shipped OS behavior. The motion guidance supports purposeful, optional motion and cancellation; it does not supply universal web animation parameters.
|
|
39
|
+
|
|
40
|
+
Worked proposal: a web settings disclosure opens immediately and keeps its trigger operable. Optional movement communicates the revealed region. Under reduced motion, the same content and controls remain available without unnecessary movement. Use [Motion Disclosure](../motion/interaction-recipes.md#disclosure) for the behavior contract and the [Adaptation Workflow](adaptation-workflow.md) for the source/target record.
|
|
41
|
+
|
|
42
|
+
Expected cases: open and close by keyboard, reverse while opening, enlarge the text, hide content while focus is inside, and change the motion preference. Actual result: `not_run`; this proposal is not a tested Apple or browser implementation. `consumer_reference: not_applicable` because the worked proposal selects no consumer-owned record.
|
|
43
|
+
|
|
36
44
|
## Comparative Questions
|
|
37
45
|
|
|
38
46
|
| Theme | Question to investigate | Required evidence | Boundary |
|