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,97 @@
|
|
|
1
|
+
---
|
|
2
|
+
type: Domain Guide
|
|
3
|
+
title: Platform Compatibility Matrix
|
|
4
|
+
description: Separate transferable interaction intent from platform capabilities, target fallbacks, and required evidence.
|
|
5
|
+
domain: platform-guides
|
|
6
|
+
lifecycle: experimental
|
|
7
|
+
provenance_kind: local
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
# Platform Compatibility Matrix
|
|
11
|
+
|
|
12
|
+
Primary role: adaptation comparison and verification checklist.
|
|
13
|
+
|
|
14
|
+
## Repository Boundary
|
|
15
|
+
|
|
16
|
+
This matrix compares responsibilities, not API support versions. It is not a browser compatibility database. A row's target behavior is a proposed adaptation until verified on the consumer's named runtime.
|
|
17
|
+
|
|
18
|
+
## Reusable Method
|
|
19
|
+
|
|
20
|
+
Choose the relevant concern, read its platform source guide, record native facts and target decisions separately, and execute both the preferred and fallback paths. Use the [Adaptation Workflow](adaptation-workflow.md) for the handoff.
|
|
21
|
+
|
|
22
|
+
## Comparison Matrix
|
|
23
|
+
|
|
24
|
+
| Concern | Source route | Transferable intent | Target boundary and fallback | Required observation |
|
|
25
|
+
| --- | --- | --- | --- | --- |
|
|
26
|
+
| Motion preference | [Apple](apple-interaction.md) | Essential information remains available with less motion | Web preference handling belongs to [Motion recipes](../motion/interaction-recipes.md); retain static status | Change preference and interrupt an active transition |
|
|
27
|
+
| Return navigation | [Android](android-interaction.md) | Understand destination and preserve recoverable state | Browser history, parent links, and host Back are distinct; direct entry needs a known parent route | Normal return, direct entry, cancellation, missing prior item |
|
|
28
|
+
| Adaptive presentation | [Android](android-interaction.md) | Preserve the task as available space changes | Native units/class cutoffs do not define Layout breakpoints; use the target's content constraints | Resize without losing query, selection, or focus |
|
|
29
|
+
| Keyboard traversal | [Windows](windows-interaction.md) | Reach actions and move predictably within controls | Follow the chosen web semantic pattern; visible controls remain operable | Tab/reverse traversal, inner navigation, editing, dismissal |
|
|
30
|
+
| Shortcuts | [Windows](windows-interaction.md) | Efficient access to a named command | OS/browser-reserved keys may be unavailable; retain a visible command | Reserved key path, disabled command, active text editor |
|
|
31
|
+
| Multimodal feedback | [Apple](apple-interaction.md) | Communicate cause and result through available channels | Haptics/audio may be unavailable or inappropriate; retain essential visual/text feedback | Muted/unavailable channels and the actual target device |
|
|
32
|
+
| Translucent treatment | [Apple](apple-interaction.md) | Keep foreground hierarchy understandable | Native materials do not translate to CSS equivalence; an opaque treatment is a candidate fallback | Actual contrast/readability across backgrounds and preferences |
|
|
33
|
+
|
|
34
|
+
## Target Evidence Matrix
|
|
35
|
+
|
|
36
|
+
| Axis | Record | What a missing check means |
|
|
37
|
+
| --- | --- | --- |
|
|
38
|
+
| Runtime | Exact browser/app engine, OS, relevant library/SDK versions | No claim beyond the exercised runtime |
|
|
39
|
+
| Input | Keyboard, pointer, touch, controller, assistive technology as claimed | An untested mode is `not_run`, not a pass |
|
|
40
|
+
| Preferences | Motion, contrast, text sizing, other relevant settings | Source support does not prove local handling |
|
|
41
|
+
| Navigation | Direct entry, return, cancellation, nested overlays | A successful happy path leaves recovery unproven |
|
|
42
|
+
| Capability | Available, unavailable, denied, interrupted where relevant | Fallback behavior must be exercised independently |
|
|
43
|
+
| State | Normal, pending, failed, empty, stale or removed data | A screenshot of default state is insufficient |
|
|
44
|
+
|
|
45
|
+
## Scroll Story Target Cases
|
|
46
|
+
|
|
47
|
+
Use [Motion's scroll-story contract](../motion/interaction-recipes.md#scroll-driven-story) when the target is a browser scene controlled by scrolling. Record CSS timeline support at the tested version, feature-unavailable fallback, wheel/trackpad/keyboard/touch input actually used, browser history restoration, and resize/orientation changes. Viewport emulation is evidence of layout at that size, not of mobile hardware or touch physics.
|
|
48
|
+
|
|
49
|
+
Require readable static chapters when the stage cannot fit. Test reduced-motion changes during an active scene, not just the startup preference. The [Scroll Story Lab](../examples/scroll-story/README.md) supplies a target implementation and separates its observed results from untested runtime/device cases.
|
|
50
|
+
|
|
51
|
+
## Fixed-Viewport Scene Target Cases
|
|
52
|
+
|
|
53
|
+
The [scene-navigation contract](../motion/interaction-recipes.md#full-viewport-scene-navigation) adds input arbitration to scene rendering. Test wheel bursts and momentum tails, reverse gestures, horizontal input, modifier zoom, native copy scrolling at both edges, keyboard editing, visible navigation, direct hashes, and browser Back/Forward. Touch testing includes swipe start outside the owned art surface, cancellation, a second pointer, pinch zoom, and orientation changes.
|
|
54
|
+
|
|
55
|
+
The [worked example](../examples/scene-navigation/README.md) has desktop-emulated input evidence and an explicit reading escape. Physical trackpad behavior, browser chrome resizing on a phone, iOS Safari, Android, and assistive technology need separate actual-device runs. Never relabel CDP touch injection or a 375-pixel viewport as physical-device verification.
|
|
56
|
+
|
|
57
|
+
## Example Record
|
|
58
|
+
|
|
59
|
+
```yaml
|
|
60
|
+
concern: keyboard-traversal
|
|
61
|
+
source_guide: platform-guides/windows-interaction.md
|
|
62
|
+
target: # actual browser, OS, widget semantics and versions
|
|
63
|
+
decision: # the target interaction contract
|
|
64
|
+
fallback: # complete visible operation path
|
|
65
|
+
source_rechecked: # date and exact official locator
|
|
66
|
+
actual_result: not_run
|
|
67
|
+
limitations: # untested inputs, runtimes, and capabilities
|
|
68
|
+
consumer_reference: not_applicable
|
|
69
|
+
consumer_reference_reason: This blank comparison selects no consumer record.
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## Opinionated Guidance
|
|
73
|
+
|
|
74
|
+
Test fallback paths deliberately rather than waiting for accidental unsupported hardware. A successful fallback should preserve the task, though its presentation may differ.
|
|
75
|
+
|
|
76
|
+
## Platform-Specific Guidance
|
|
77
|
+
|
|
78
|
+
Apple, Android, and Windows guide pages own their dated official-source sets. Recheck them for native claims and separately verify the target runtime. Game-engine adaptation routes to [Game UI](../game-ui/index.md).
|
|
79
|
+
|
|
80
|
+
## Unsupported Absolutes
|
|
81
|
+
|
|
82
|
+
No row claims visual, semantic, accessibility, or performance equivalence between platforms. No generic “mobile” or “desktop” label replaces the actual runtime/input matrix.
|
|
83
|
+
|
|
84
|
+
## Verification Contract
|
|
85
|
+
|
|
86
|
+
An adaptation is reviewable when each selected row has a target decision, fallback, observed result, and limitation. Missing capability or runtime evidence stays explicit. Review when a linked source, target capability, or failed user task changes the mapping.
|
|
87
|
+
|
|
88
|
+
The [Interaction Lab verification](../examples/domain-interactions/verification.md) records a macOS browser target for keyboard traversal, modal cancellation, history, content resizing, and reduced-motion preference changes. Small browser viewports are not mobile-device evidence; Android, iOS/iPadOS, Windows-native APIs, haptics, controllers, and assistive technology remain outside that run.
|
|
89
|
+
|
|
90
|
+
## Source, License, And Attribution
|
|
91
|
+
|
|
92
|
+
Locally authored comparison matrix derived from this domain's linked source reviews. Platform owners retain authority over their own conventions; no upstream table is reproduced.
|
|
93
|
+
|
|
94
|
+
## IA Navigation
|
|
95
|
+
|
|
96
|
+
Parent: [Platform Guides](index.md).
|
|
97
|
+
Next: [Platform Adaptation Workflow](adaptation-workflow.md).
|
package/platform-guides/index.md
CHANGED
|
@@ -8,6 +8,17 @@ In scope: comparative vocabulary, interaction questions, current official-source
|
|
|
8
8
|
|
|
9
9
|
Out of scope: affiliation, brand imitation, unsupported platform equivalence, and authority over web standards, accessibility, or Layout contracts.
|
|
10
10
|
|
|
11
|
+
## Start Here
|
|
12
|
+
|
|
13
|
+
| Task | Route |
|
|
14
|
+
| --- | --- |
|
|
15
|
+
| Record native facts, target decisions, and fallbacks. | [Platform Adaptation Workflow](adaptation-workflow.md) |
|
|
16
|
+
| Compare Back and adaptive window behavior. | [Android Interaction As A Comparative Reference](android-interaction.md) |
|
|
17
|
+
| Compare keyboard, focus, and commands. | [Windows Interaction As A Comparative Reference](windows-interaction.md) |
|
|
18
|
+
| Select target and fallback verification cases. | [Platform Compatibility Matrix](compatibility-matrix.md) |
|
|
19
|
+
|
|
20
|
+
These workflows and worked cases are usable experimental guidance. Expected-result tables are test designs; actual product, engine, and reader evidence must be recorded separately. Review on a failed task, a source change, or a changed ownership contract.
|
|
21
|
+
|
|
11
22
|
## Available Guides
|
|
12
23
|
|
|
13
24
|
- [Apple Interaction As A Comparative Reference](apple-interaction.md) turns selected interaction themes into questions for web adaptation without claiming platform equivalence.
|
|
@@ -18,9 +29,9 @@ A platform guide names the platform, source authority, version or review date, w
|
|
|
18
29
|
|
|
19
30
|
## Domain Contract
|
|
20
31
|
|
|
21
|
-
See [StyleGallery Domains](../DOMAINS.md) for lifecycle, provenance, page membership, and
|
|
32
|
+
See [StyleGallery Domains](../DOMAINS.md) for lifecycle, provenance, page membership, and staleness rules.
|
|
22
33
|
|
|
23
34
|
## IA Navigation
|
|
24
35
|
|
|
25
36
|
Parent: [StyleGallery](../index.md).
|
|
26
|
-
Next: [
|
|
37
|
+
Next: [Platform Adaptation Workflow](adaptation-workflow.md).
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
---
|
|
2
|
+
type: Domain Guide
|
|
3
|
+
title: Windows Interaction As A Comparative Reference
|
|
4
|
+
description: Source-bounded Windows keyboard, focus, and command guidance with web adaptation cases.
|
|
5
|
+
domain: platform-guides
|
|
6
|
+
lifecycle: experimental
|
|
7
|
+
provenance_kind: local
|
|
8
|
+
platform: Windows applications and WinUI
|
|
9
|
+
platform_version: dated Microsoft Learn documentation; target Windows App SDK version required
|
|
10
|
+
reviewed_on: 2026-09-08
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
# Windows Interaction As A Comparative Reference
|
|
14
|
+
|
|
15
|
+
Primary role: Windows platform comparison guide.
|
|
16
|
+
|
|
17
|
+
## Repository Boundary
|
|
18
|
+
|
|
19
|
+
This guide compares keyboard and command behavior in Windows application guidance. It supplies no Fluent visual defaults and does not imply that WinUI focus APIs exist in the browser. The consumer records its actual Windows, SDK, browser, and control-library versions.
|
|
20
|
+
|
|
21
|
+
## Reusable Method
|
|
22
|
+
|
|
23
|
+
Start with the [Adaptation Workflow](adaptation-workflow.md). Identify the command, navigation group, and focus scope before choosing a shortcut or implementation API.
|
|
24
|
+
|
|
25
|
+
## Source-Bounded Conventions
|
|
26
|
+
|
|
27
|
+
| Concern | Official source and bounded fact | Transferable question |
|
|
28
|
+
| --- | --- | --- |
|
|
29
|
+
| Sequential and inner navigation | [Keyboard interactions](https://learn.microsoft.com/en-us/windows/apps/design/input/keyboard-interactions) distinguishes moving between controls from moving within some composite controls | Is the key moving between tasks, among items, or editing a value? |
|
|
30
|
+
| Initial focus | The same source discusses logical starting focus and avoiding an initially focused destructive action | Does the entry target help the intended task without accidental destructive activation? |
|
|
31
|
+
| Focus movement | [Focus navigation](https://learn.microsoft.com/en-us/windows/apps/develop/input/focus-navigation) documents native focus navigation and control behavior | Can focus reach every required action, and where does it return after dismissal? |
|
|
32
|
+
| Commands | [Keyboard accelerators](https://learn.microsoft.com/en-us/windows/apps/develop/input/keyboard-accelerators) describes command invocation and scoping in Windows applications | Does a shortcut invoke the same command and availability rules as its visible control? |
|
|
33
|
+
|
|
34
|
+
Source set reviewed 2026-09-08. These are platform guidance and API documentation, not evidence that a consumer implements them.
|
|
35
|
+
|
|
36
|
+
## Worked Adaptation: Searchable Command Surface
|
|
37
|
+
|
|
38
|
+
Task: find and invoke commands without a pointer. Begin with the [Command Surface recipe](../recipes/command-surface.md) for spatial composition. Use the correct web widget semantics for the chosen design; a native control's tab-stop policy should not be copied onto unrelated HTML elements.
|
|
39
|
+
|
|
40
|
+
Define the opening control, query input, result navigation, selected command, disabled-command explanation, and dismissal target. Command buttons and shortcuts share one operation owner. Editing text must not accidentally invoke a global command. A shortcut is supplemental: the visible action remains available when that key combination is reserved by the browser or OS.
|
|
41
|
+
|
|
42
|
+
| Test | Expected target behavior |
|
|
43
|
+
| --- | --- |
|
|
44
|
+
| Open with keyboard | Focus reaches the declared entry target |
|
|
45
|
+
| Search to zero results | Query remains editable and dismissal remains available |
|
|
46
|
+
| Attempt an unavailable command | No operation; availability is explained consistently |
|
|
47
|
+
| Dismiss after invoker removal | Focus reaches a documented surviving target |
|
|
48
|
+
| Use a reserved/unavailable shortcut | The visible control still performs the task |
|
|
49
|
+
|
|
50
|
+
Actual result: `not_run`. This is a fictional web adaptation contract.
|
|
51
|
+
|
|
52
|
+
## Opinionated Guidance
|
|
53
|
+
|
|
54
|
+
Centralize command availability so menu, button, and shortcut do not disagree. Do not add shortcuts before checking focus, text editing, and the complete visible operation path.
|
|
55
|
+
|
|
56
|
+
## Platform-Specific Guidance
|
|
57
|
+
|
|
58
|
+
WinUI accelerators and focus APIs have native routing rules. Web controls use HTML, the selected ARIA pattern where necessary, browser defaults, and the application's focus scope. See the [shared accessibility evidence gate](../quality/gates/accessibility-evidence.md) for the required evidence boundary.
|
|
59
|
+
|
|
60
|
+
## Unsupported Absolutes
|
|
61
|
+
|
|
62
|
+
Arrow keys are not a replacement for Tab in every UI. A Windows shortcut is not safe to intercept globally in every browser. A working pointer flow does not prove keyboard operation.
|
|
63
|
+
|
|
64
|
+
## Verification Contract
|
|
65
|
+
|
|
66
|
+
Verify entry, traversal, command invocation, text editing, cancellation, disabled state, and focus restoration on every claimed runtime/input. Include a missing invoker and nested surface. Review on Windows SDK, browser, source guidance, or command-routing changes.
|
|
67
|
+
|
|
68
|
+
## Source, License, And Attribution
|
|
69
|
+
|
|
70
|
+
Locally authored synthesis of the official Microsoft sources linked above, rechecked 2026-09-08. No upstream examples, control code, or visual assets are copied. `consumer_reference: not_applicable` because no consumer implementation record is selected.
|
|
71
|
+
|
|
72
|
+
## IA Navigation
|
|
73
|
+
|
|
74
|
+
Parent: [Platform Guides](index.md).
|
|
75
|
+
Next: [Platform Compatibility Matrix](compatibility-matrix.md).
|
package/recipes/homepage.md
CHANGED
|
@@ -37,8 +37,16 @@ Reject this recipe when the page is primarily a document, dashboard, form, comma
|
|
|
37
37
|
|
|
38
38
|
Order sections by the visitor's decision path, not by visual symmetry. Put the primary heading, explanation, proof, and action in semantic order before layout classes. Repeated proof should be a list when each item has the same role.
|
|
39
39
|
|
|
40
|
+
## Scroll Story Composition
|
|
41
|
+
|
|
42
|
+
When a section explains a product through changing visual chapters, compose existing containment, stacking, overlay, and sticky responsibilities before proposing a new spatial pattern. Name the sticky containing block, stage height, document scroll track, offset, release boundary, and long-content fallback. Prevent clipping when copy is taller than the stage.
|
|
43
|
+
|
|
44
|
+
Motion owns continuous progress and scene changes through the [Scroll-driven Story recipe](../motion/interaction-recipes.md#scroll-driven-story). The [Scroll Story Lab](../examples/scroll-story/README.md) demonstrates this composition with two products. Photography, device mockups, transforms, opacity, and timing remain in those consuming examples.
|
|
45
|
+
|
|
40
46
|
## Scroll Ownership
|
|
41
47
|
|
|
48
|
+
A short full-page showcase can compose a viewport shell and [overlay-stack](../patterns/overlay-exception/overlay-stack.md) responsibilities with the [Full-viewport Scene Navigation contract](../motion/interaction-recipes.md#full-viewport-scene-navigation). Declare the document as fixed in scene mode, the chapter copy as the native overflow owner, and the document as the scroll owner in reading mode. The failure to prevent is a clipped or unreachable chapter when the viewport or text size changes. The [worked example](../examples/scene-navigation/README.md) uses a shrinkable stage between header and footer; it introduces no new reusable Layout pattern.
|
|
49
|
+
|
|
42
50
|
Prefer normal document scrolling. Avoid nested scroll regions unless a section has an explicit independent task, such as a horizontally scrolling media reel with named keyboard and overflow behavior.
|
|
43
51
|
|
|
44
52
|
## Accessibility Expectations
|