@motion-proto/live-tokens 0.96.0 → 0.98.2

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.
Files changed (206) hide show
  1. package/.claude/skills/live-tokens-check-compliance/SKILL.md +5 -0
  2. package/.claude/skills/live-tokens-create-component/SKILL.md +4 -3
  3. package/.claude/skills/live-tokens-create-component/references/contract-tests.md +71 -11
  4. package/CHANGELOG.md +309 -0
  5. package/README.md +2 -2
  6. package/bin/check-component.mjs +8 -0
  7. package/bin/check-page.mjs +6 -0
  8. package/bin/cli.mjs +36 -6
  9. package/bin/contractRunner.mjs +142 -17
  10. package/bin/lib/findings.mjs +20 -4
  11. package/bin/rules/a11y.mjs +53 -0
  12. package/bin/set-colors.mjs +1 -0
  13. package/bin/setup-claude.mjs +2 -2
  14. package/dist-plugin/{chunk-A4TBP4MM.js → chunk-SLICH4IH.js} +2 -2
  15. package/dist-plugin/index.cjs +148 -3
  16. package/dist-plugin/index.js +250 -105
  17. package/dist-plugin/setColors/index.cjs +7 -1
  18. package/dist-plugin/setColors/index.d.cts +9 -4
  19. package/dist-plugin/setColors/index.d.ts +9 -4
  20. package/dist-plugin/setColors/index.js +8 -2
  21. package/dist-plugin/setGeometry/index.d.cts +1 -1
  22. package/dist-plugin/setGeometry/index.d.ts +1 -1
  23. package/dist-plugin/setType/index.d.cts +1 -1
  24. package/dist-plugin/setType/index.d.ts +1 -1
  25. package/dist-plugin/{themeTypes-B8_Idrp4.d.cts → themeTypes-BaTQUyac.d.cts} +10 -1
  26. package/dist-plugin/{themeTypes-B8_Idrp4.d.ts → themeTypes-BaTQUyac.d.ts} +10 -1
  27. package/package.json +49 -2
  28. package/src/demo/LabeledSelect.svelte +1 -1
  29. package/src/editor/bootstrap.ts +3 -1
  30. package/src/editor/component-editor/BadgeEditor.svelte +13 -0
  31. package/src/editor/component-editor/ButtonEditor.svelte +33 -2
  32. package/src/editor/component-editor/CalloutEditor.svelte +13 -0
  33. package/src/editor/component-editor/CardEditor.svelte +12 -2
  34. package/src/editor/component-editor/CodeSnippetEditor.svelte +11 -1
  35. package/src/editor/component-editor/CollapsibleSectionEditor.svelte +18 -1
  36. package/src/editor/component-editor/CornerBadgeEditor.svelte +13 -0
  37. package/src/editor/component-editor/DialogEditor.svelte +15 -0
  38. package/src/editor/component-editor/IconButtonEditor.svelte +29 -1
  39. package/src/editor/component-editor/ImageEditor.svelte +20 -9
  40. package/src/editor/component-editor/ImageLightboxEditor.svelte +44 -0
  41. package/src/editor/component-editor/InlineEditActionsEditor.svelte +13 -1
  42. package/src/editor/component-editor/InputEditor.svelte +23 -0
  43. package/src/editor/component-editor/MenuSelectEditor.svelte +27 -1
  44. package/src/editor/component-editor/NotificationEditor.svelte +15 -0
  45. package/src/editor/component-editor/PanelEditor.svelte +1 -1
  46. package/src/editor/component-editor/ProgressBarEditor.svelte +13 -0
  47. package/src/editor/component-editor/RadioButtonEditor.svelte +20 -1
  48. package/src/editor/component-editor/SectionDividerEditor.svelte +41 -13
  49. package/src/editor/component-editor/SegmentedControlEditor.svelte +29 -1
  50. package/src/editor/component-editor/SideNavigationEditor.svelte +40 -1
  51. package/src/editor/component-editor/SlidePagerEditor.svelte +20 -0
  52. package/src/editor/component-editor/SliderEditor.svelte +33 -0
  53. package/src/editor/component-editor/TabBarEditor.svelte +23 -2
  54. package/src/editor/component-editor/TableEditor.svelte +14 -0
  55. package/src/editor/component-editor/ToggleEditor.svelte +17 -0
  56. package/src/editor/component-editor/TooltipEditor.svelte +11 -2
  57. package/src/editor/component-editor/VideoFrameEditor.svelte +8 -0
  58. package/src/editor/component-editor/VideoLightboxEditor.svelte +10 -0
  59. package/src/editor/component-editor/registration.ts +2 -1
  60. package/src/editor/component-editor/registry.ts +69 -27
  61. package/src/editor/component-editor/scaffolding/DemoHeader.svelte +2 -0
  62. package/src/editor/component-editor/scaffolding/StateBlock.svelte +19 -8
  63. package/src/editor/component-editor/scaffolding/TokenLayout.svelte +3 -0
  64. package/src/editor/component-editor/scaffolding/VariantGroup.svelte +70 -10
  65. package/src/editor/component-editor/scaffolding/editorContext.ts +7 -0
  66. package/src/editor/core/a11y/a11yReport.ts +101 -0
  67. package/src/editor/core/a11y/a11yReportTypes.ts +69 -0
  68. package/src/editor/core/a11y/contrastFailures.ts +22 -0
  69. package/src/editor/core/components/contrastPairRegistry.ts +18 -0
  70. package/src/editor/core/palettes/contrast.ts +44 -0
  71. package/src/editor/core/palettes/contrastPairs.ts +79 -0
  72. package/src/editor/core/palettes/resolveColor.ts +77 -0
  73. package/src/editor/core/store/editorPersistence.ts +9 -1
  74. package/src/editor/core/store/editorRenderer.ts +2 -0
  75. package/src/editor/core/store/editorStore.ts +29 -0
  76. package/src/editor/core/store/editorTypes.ts +9 -0
  77. package/src/editor/core/store/editorViewStore.ts +2 -2
  78. package/src/editor/core/store/unsavedEdits.ts +10 -0
  79. package/src/editor/core/themes/buildColors.ts +16 -5
  80. package/src/editor/core/themes/liveStateStream.ts +7 -1
  81. package/src/editor/core/themes/parsers/gradient.ts +5 -2
  82. package/src/editor/core/themes/slices/customColors.ts +226 -0
  83. package/src/editor/core/themes/themeTypes.ts +10 -0
  84. package/src/editor/docs/chapters.ts +1 -0
  85. package/src/editor/docs/content/accessibility.md +362 -0
  86. package/src/editor/docs/content/editing-tokens.md +56 -1
  87. package/src/editor/docs/content.generated.ts +2 -1
  88. package/src/editor/pages/ComponentEditorPage.svelte +10 -1
  89. package/src/editor/pages/EditorShell.svelte +97 -10
  90. package/src/editor/skill-atlas/skillSources.generated.ts +3 -3
  91. package/src/editor/skill-atlas/trees/check-compliance.ts +3 -3
  92. package/src/editor/skill-atlas/trees/create-component.ts +12 -12
  93. package/src/editor/ui/CustomColorReplaceStep.svelte +118 -0
  94. package/src/editor/ui/EditorViewSwitcher.svelte +15 -2
  95. package/src/editor/ui/GradientEditor.svelte +9 -1
  96. package/src/editor/ui/ThemePanel.svelte +4 -4
  97. package/src/editor/ui/UIContrastReadout.svelte +186 -0
  98. package/src/editor/ui/UIInfoPopover.svelte +16 -2
  99. package/src/editor/ui/UIPaletteSelector.svelte +347 -15
  100. package/src/editor/ui/UITokenSelector.svelte +33 -14
  101. package/src/editor/ui/VariablesTab.svelte +3 -0
  102. package/src/editor/ui/a11y/A11yComponentIssues.svelte +103 -0
  103. package/src/editor/ui/a11y/A11yFindingRow.svelte +57 -0
  104. package/src/editor/ui/a11y/A11yIssueRow.svelte +121 -0
  105. package/src/editor/ui/a11y/A11yOverview.svelte +242 -0
  106. package/src/editor/ui/a11y/A11yPanel.svelte +128 -0
  107. package/src/editor/ui/a11y/A11yPropertyMark.svelte +84 -0
  108. package/src/editor/ui/a11y/A11yRailMark.svelte +34 -0
  109. package/src/editor/ui/a11y/AccessibilityTab.svelte +334 -0
  110. package/src/editor/ui/a11y/a11yView.ts +218 -0
  111. package/src/editor/ui/anchorToTrigger.ts +63 -0
  112. package/src/editor/ui/contrastReadout.ts +45 -0
  113. package/src/editor/ui/sections/CustomColorsSection.svelte +254 -0
  114. package/src/live-tokens/data/themes/autumn.json +20 -20
  115. package/src/live-tokens/data/themes/halloween.json +20 -20
  116. package/src/live-tokens/data/themes/midnight-study.json +20 -20
  117. package/src/live-tokens/data/themes/ocean.json +20 -20
  118. package/src/live-tokens/data/themes/royal-velvet.json +20 -20
  119. package/src/live-tokens/data/themes/sketchy.json +20 -20
  120. package/src/live-tokens/data/themes/spring-meadow.json +20 -20
  121. package/src/live-tokens/data/themes/sunset.json +20 -20
  122. package/src/system/components/Badge.svelte +3 -3
  123. package/src/system/components/Button.svelte +9 -3
  124. package/src/system/components/CodeSnippet.svelte +8 -1
  125. package/src/system/components/CornerBadge.svelte +3 -3
  126. package/src/system/components/Dialog.svelte +43 -14
  127. package/src/system/components/IconButton.svelte +1 -1
  128. package/src/system/components/Image.svelte +7 -0
  129. package/src/system/components/ImageLightbox.svelte +26 -26
  130. package/src/system/components/Input.svelte +8 -1
  131. package/src/system/components/MenuSelect.svelte +30 -2
  132. package/src/system/components/Notification.svelte +1 -1
  133. package/src/system/components/ProgressBar.svelte +6 -0
  134. package/src/system/components/RadioButton.svelte +36 -3
  135. package/src/system/components/SegmentedControl.svelte +36 -2
  136. package/src/system/components/SlidePager.svelte +2 -2
  137. package/src/system/components/Slider.svelte +13 -9
  138. package/src/system/components/TabBar.svelte +33 -3
  139. package/src/system/components/Toggle.svelte +2 -2
  140. package/src/system/components/VideoFrame.svelte +1 -1
  141. package/src/system/components/VideoLightbox.svelte +2 -2
  142. package/src/system/internal/focusTrap.ts +35 -0
  143. package/src/testing-js/__aria__/badge.yml +40 -0
  144. package/src/testing-js/__aria__/button.yml +88 -0
  145. package/src/testing-js/__aria__/callout.yml +12 -0
  146. package/src/testing-js/__aria__/card.yml +8 -0
  147. package/src/testing-js/__aria__/codesnippet.yml +21 -0
  148. package/src/testing-js/__aria__/collapsiblesection.yml +23 -0
  149. package/src/testing-js/__aria__/cornerbadge.yml +24 -0
  150. package/src/testing-js/__aria__/dialog.yml +42 -0
  151. package/src/testing-js/__aria__/iconbutton.yml +57 -0
  152. package/src/testing-js/__aria__/image.yml +10 -0
  153. package/src/testing-js/__aria__/imagelightbox.yml +50 -0
  154. package/src/testing-js/__aria__/inlineeditactions.yml +16 -0
  155. package/src/testing-js/__aria__/input.yml +61 -0
  156. package/src/testing-js/__aria__/menuselect.yml +30 -0
  157. package/src/testing-js/__aria__/notification.yml +30 -0
  158. package/src/testing-js/__aria__/panel.yml +2 -0
  159. package/src/testing-js/__aria__/progressbar.yml +2 -0
  160. package/src/testing-js/__aria__/radiobutton.yml +20 -0
  161. package/src/testing-js/__aria__/sectiondivider.yml +9 -0
  162. package/src/testing-js/__aria__/segmentedcontrol.yml +35 -0
  163. package/src/testing-js/__aria__/sidenavigation.yml +304 -0
  164. package/src/testing-js/__aria__/slidepager.yml +72 -0
  165. package/src/testing-js/__aria__/slider.yml +28 -0
  166. package/src/testing-js/__aria__/tabbar.yml +35 -0
  167. package/src/testing-js/__aria__/table.yml +144 -0
  168. package/src/testing-js/__aria__/toggle.yml +12 -0
  169. package/src/testing-js/__aria__/tooltip.yml +2 -0
  170. package/src/testing-js/__aria__/videoframe.yml +6 -0
  171. package/src/testing-js/__aria__/videolightbox.yml +12 -0
  172. package/src/testing-js/{chunk-WIZ6W7UT.js → chunk-3WCLMOM7.js} +2 -2
  173. package/src/testing-js/{chunk-SHBYZUPD.js → chunk-5HNZHIHG.js} +211 -14
  174. package/src/testing-js/chunk-5HNZHIHG.js.map +1 -0
  175. package/src/testing-js/{chunk-NB3NZRBM.js → chunk-7CM5D7PF.js} +5 -1
  176. package/src/testing-js/chunk-7CM5D7PF.js.map +1 -0
  177. package/src/testing-js/chunk-EWSGE27V.js +168 -0
  178. package/src/testing-js/chunk-EWSGE27V.js.map +1 -0
  179. package/src/testing-js/{chunk-GKO27NGN.js → chunk-R54I7YL6.js} +2 -2
  180. package/src/testing-js/{chunk-X6KHEVIG.js → chunk-RWH46IU5.js} +97 -29
  181. package/src/testing-js/chunk-RWH46IU5.js.map +1 -0
  182. package/src/testing-js/chunk-SHLPDNAQ.js +658 -0
  183. package/src/testing-js/chunk-SHLPDNAQ.js.map +1 -0
  184. package/src/testing-js/{chunk-3UKGXCDL.js → chunk-YVVR3GJZ.js} +1 -1
  185. package/src/testing-js/chunk-YVVR3GJZ.js.map +1 -0
  186. package/src/testing-js/component-a11y.contract.js +283 -0
  187. package/src/testing-js/component-a11y.contract.js.map +1 -0
  188. package/src/testing-js/component-alias.contract.js +2 -2
  189. package/src/testing-js/component-behavior.contract.js +2 -2
  190. package/src/testing-js/component-editor.contract.js +6 -5
  191. package/src/testing-js/component-editor.contract.js.map +1 -1
  192. package/src/testing-js/component-render.contract.js +10 -6
  193. package/src/testing-js/component-render.contract.js.map +1 -1
  194. package/src/testing-js/index.d.ts +44 -16
  195. package/src/testing-js/index.js +9 -9
  196. package/src/testing-js/page-compliance.contract.js +163 -18
  197. package/src/testing-js/page-compliance.contract.js.map +1 -1
  198. package/src/testing-js/vitest.js +3 -3
  199. package/template/package.json +9 -0
  200. package/src/editor/ui/keepInViewport.ts +0 -84
  201. package/src/testing-js/chunk-3UKGXCDL.js.map +0 -1
  202. package/src/testing-js/chunk-NB3NZRBM.js.map +0 -1
  203. package/src/testing-js/chunk-SHBYZUPD.js.map +0 -1
  204. package/src/testing-js/chunk-X6KHEVIG.js.map +0 -1
  205. /package/src/testing-js/{chunk-WIZ6W7UT.js.map → chunk-3WCLMOM7.js.map} +0 -0
  206. /package/src/testing-js/{chunk-GKO27NGN.js.map → chunk-R54I7YL6.js.map} +0 -0
package/src/testing-js/__aria__/iconbutton.yml ADDED
@@ -0,0 +1,57 @@
1
+ "Primary / base": |
2
+ - button "primary action"
3
+ "Secondary / base": |
4
+ - button "secondary action"
5
+ "Secondary / default": |
6
+ - button "secondary action"
7
+ "Secondary / hover": |
8
+ - button "secondary action"
9
+ "Secondary / disabled": |
10
+ - button "secondary action" [disabled]
11
+ "Outline / base": |
12
+ - button "outline action"
13
+ "Outline / default": |
14
+ - button "outline action"
15
+ "Outline / hover": |
16
+ - button "outline action"
17
+ "Outline / disabled": |
18
+ - button "outline action" [disabled]
19
+ "Success / base": |
20
+ - button "success action"
21
+ "Success / default": |
22
+ - button "success action"
23
+ "Success / hover": |
24
+ - button "success action"
25
+ "Success / disabled": |
26
+ - button "success action" [disabled]
27
+ "Danger / base": |
28
+ - button "danger action"
29
+ "Danger / default": |
30
+ - button "danger action"
31
+ "Danger / hover": |
32
+ - button "danger action"
33
+ "Danger / disabled": |
34
+ - button "danger action" [disabled]
35
+ "Warning / base": |
36
+ - button "warning action"
37
+ "Warning / default": |
38
+ - button "warning action"
39
+ "Warning / hover": |
40
+ - button "warning action"
41
+ "Warning / disabled": |
42
+ - button "warning action" [disabled]
43
+ "Outline / active": |
44
+ - button "outline action"
45
+ "Primary / default": |
46
+ - button "primary action"
47
+ "Primary / hover": |
48
+ - button "primary action"
49
+ "Primary / disabled": |
50
+ - button "primary action" [disabled]
51
+ "Primary (small)": |
52
+ - button "primary action"
53
+ - button "secondary action"
54
+ - button "outline action"
55
+ - button "success action"
56
+ - button "danger action"
57
+ - button "warning action"
package/src/testing-js/__aria__/image.yml ADDED
@@ -0,0 +1,10 @@
1
+ "Default": |
2
+ - img "Demo"
3
+ - paragraph:
4
+ - text: "Use zoom on hover: every image scales on hover (a page can still force it per image with the"
5
+ - code: zoom
6
+ - text: "prop). Overflow scaling on (default): the content zooms inside the fixed frame, masked by overflow. Off: the whole framed image grows past its box. Override per image with"
7
+ - code: overflowScaling
8
+ - text: .
9
+ "Bare": |
10
+ - img "Demo"
package/src/testing-js/__aria__/imagelightbox.yml ADDED
@@ -0,0 +1,50 @@
1
+ "preview": |
2
+ - 'button "Expand image: Newspaper" [expanded]':
3
+ - img "Newspaper"
4
+ - img "Newspaper"
5
+ - button "Close"
6
+ - button "Previous image"
7
+ - button "Next image"
8
+ - button "Zoom out" [disabled]
9
+ - text: 59%
10
+ - button "Zoom in"
11
+ "tile": |
12
+ - 'button "Expand image: Newspaper" [expanded]':
13
+ - img "Newspaper"
14
+ - img "Newspaper"
15
+ - button "Close"
16
+ - button "Previous image"
17
+ - button "Next image"
18
+ - button "Zoom out" [disabled]
19
+ - text: 59%
20
+ - button "Zoom in"
21
+ "overlay": |
22
+ - 'button "Expand image: Newspaper" [expanded]':
23
+ - img "Newspaper"
24
+ - img "Newspaper"
25
+ - button "Close"
26
+ - button "Previous image"
27
+ - button "Next image"
28
+ - button "Zoom out" [disabled]
29
+ - text: 59%
30
+ - button "Zoom in"
31
+ "chrome": |
32
+ - 'button "Expand image: Newspaper" [expanded]':
33
+ - img "Newspaper"
34
+ - img "Newspaper"
35
+ - button "Close"
36
+ - button "Previous image"
37
+ - button "Next image"
38
+ - button "Zoom out" [disabled]
39
+ - text: 59%
40
+ - button "Zoom in"
41
+ "preview (click nextButton)": |
42
+ - 'button "Expand image: Newspaper" [expanded]':
43
+ - img "Newspaper"
44
+ - img "Newspaper"
45
+ - button "Close"
46
+ - button "Previous image"
47
+ - button "Next image"
48
+ - button "Zoom out" [disabled]
49
+ - text: 59%
50
+ - button "Zoom in"
package/src/testing-js/__aria__/inlineeditactions.yml ADDED
@@ -0,0 +1,16 @@
1
+ "Save button / default": |
2
+ - text: Editing value...
3
+ - button "Save"
4
+ - button "Cancel"
5
+ "Save button / hover": |
6
+ - text: Editing value...
7
+ - button "Save"
8
+ - button "Cancel"
9
+ "Cancel button / default": |
10
+ - text: Editing value...
11
+ - button "Save"
12
+ - button "Cancel"
13
+ "Cancel button / hover": |
14
+ - text: Editing value...
15
+ - button "Save"
16
+ - button "Cancel"
package/src/testing-js/__aria__/input.yml ADDED
@@ -0,0 +1,61 @@
1
+ "preview": |
2
+ - text: Field label
3
+ - textbox "Field label" [invalid]:
4
+ - /placeholder: Enter password
5
+ - button "Show password"
6
+ - paragraph: Helper text describing the field.
7
+ - alert: Please enter a valid value.
8
+ "error": |
9
+ - text: Field label
10
+ - textbox "Field label" [invalid]:
11
+ - /placeholder: Enter password
12
+ - button "Show password"
13
+ - paragraph: Helper text describing the field.
14
+ - alert: Please enter a valid value.
15
+ "field": |
16
+ - text: Field label
17
+ - textbox "Field label" [invalid]:
18
+ - /placeholder: Enter password
19
+ - button "Show password"
20
+ - paragraph: Helper text describing the field.
21
+ - alert: Please enter a valid value.
22
+ "default": |
23
+ - text: Field label
24
+ - textbox "Field label" [invalid]:
25
+ - /placeholder: Enter password
26
+ - button "Show password"
27
+ - paragraph: Helper text describing the field.
28
+ - alert: Please enter a valid value.
29
+ "disabled": |
30
+ - text: Field label
31
+ - textbox "Field label" [disabled] [invalid]:
32
+ - /placeholder: Enter password
33
+ - button "Show password" [disabled]
34
+ - paragraph: Helper text describing the field.
35
+ - alert: Please enter a valid value.
36
+ "label": |
37
+ - text: Field label
38
+ - textbox "Field label" [invalid]:
39
+ - /placeholder: Enter password
40
+ - button "Show password"
41
+ - paragraph: Helper text describing the field.
42
+ - alert: Please enter a valid value.
43
+ "hint": |
44
+ - text: Field label
45
+ - textbox "Field label" [invalid]:
46
+ - /placeholder: Enter password
47
+ - button "Show password"
48
+ - paragraph: Helper text describing the field.
49
+ - alert: Please enter a valid value.
50
+ "focused (password, Error off)": |
51
+ - text: Field label
52
+ - textbox "Field label":
53
+ - /placeholder: Enter password
54
+ - button "Show password"
55
+ - paragraph: Helper text describing the field.
56
+ "disabled (password, Error off)": |
57
+ - text: Field label
58
+ - textbox "Field label" [disabled]:
59
+ - /placeholder: Enter password
60
+ - button "Show password" [disabled]
61
+ - paragraph: Helper text describing the field.
package/src/testing-js/__aria__/menuselect.yml ADDED
@@ -0,0 +1,30 @@
1
+ "menu": |
2
+ - listbox "Options":
3
+ - option "Option one"
4
+ - option "Option two"
5
+ - option "Option three"
6
+ - option "Option four" [disabled]
7
+ "default item": |
8
+ - listbox "Options":
9
+ - option "Option one"
10
+ - option "Option two"
11
+ - option "Option three"
12
+ - option "Option four" [disabled]
13
+ "hover item": |
14
+ - listbox "Options":
15
+ - option "Option one"
16
+ - option "Option two"
17
+ - option "Option three"
18
+ - option "Option four" [disabled]
19
+ "selected item": |
20
+ - listbox "Options":
21
+ - option "Option one"
22
+ - option "Option two" [selected]
23
+ - option "Option three"
24
+ - option "Option four" [disabled]
25
+ "disabled item": |
26
+ - listbox "Options":
27
+ - option "Option one"
28
+ - option "Option two"
29
+ - option "Option three"
30
+ - option "Option four" [disabled]
package/src/testing-js/__aria__/notification.yml ADDED
@@ -0,0 +1,30 @@
1
+ "Info": |
2
+ - text: Information
3
+ - button "Action"
4
+ - button "Dismiss"
5
+ - text: This is an informational message to keep you updated.
6
+ "Success": |
7
+ - text: Success
8
+ - button "Action"
9
+ - button "Dismiss"
10
+ - text: Your action was completed successfully.
11
+ "Warning": |
12
+ - text: Warning
13
+ - button "Action"
14
+ - button "Dismiss"
15
+ - text: "Caution: This action may have unintended consequences."
16
+ "Danger": |
17
+ - text: Danger
18
+ - button "Action"
19
+ - button "Dismiss"
20
+ - text: "Critical error: Please address this issue immediately."
21
+ "Info / base": |
22
+ - text: Information
23
+ - button "Action"
24
+ - button "Dismiss"
25
+ - text: This is an informational message to keep you updated.
26
+ "Info / colors": |
27
+ - text: Information
28
+ - button "Action"
29
+ - button "Dismiss"
30
+ - text: This is an informational message to keep you updated.
package/src/testing-js/__aria__/panel.yml ADDED
@@ -0,0 +1,2 @@
1
+ "preview": |
2
+ - text: Content Placeholder
package/src/testing-js/__aria__/progressbar.yml ADDED
@@ -0,0 +1,2 @@
1
+ "preview": |
2
+ - text: Loading 75%
package/src/testing-js/__aria__/radiobutton.yml ADDED
@@ -0,0 +1,20 @@
1
+ "preview": |
2
+ - radiogroup "Priority":
3
+ - radio "Defense"
4
+ - radio "Economy" [checked]
5
+ - radio "Loyalty"
6
+ "hover": |
7
+ - radiogroup "Priority":
8
+ - radio "Defense"
9
+ - radio "Economy" [checked]
10
+ - radio "Loyalty"
11
+ "selected": |
12
+ - radiogroup "Priority":
13
+ - radio "Defense" [checked]
14
+ - radio "Economy" [checked]
15
+ - radio "Loyalty" [checked]
16
+ "default": |
17
+ - radiogroup "Priority":
18
+ - radio "Defense"
19
+ - radio "Economy" [checked]
20
+ - radio "Loyalty"
package/src/testing-js/__aria__/sectiondivider.yml ADDED
@@ -0,0 +1,9 @@
1
+ "Large (Show description on, Show eyebrow on)": |
2
+ - text: Section Eyebrow Large Section
3
+ - paragraph: This text is meant to provide additional context or meaning.
4
+ "Medium (Show description on, Show eyebrow on)": |
5
+ - text: Section Eyebrow Medium Section
6
+ - paragraph: This text is meant to provide additional context or meaning.
7
+ "Small (Show description on, Show eyebrow on)": |
8
+ - text: Section Eyebrow Small Section
9
+ - paragraph: This text is meant to provide additional context or meaning.
package/src/testing-js/__aria__/segmentedcontrol.yml ADDED
@@ -0,0 +1,35 @@
1
+ "control bar": |
2
+ - radiogroup:
3
+ - radio "Option 1"
4
+ - radio "Option 2"
5
+ - radio "Option 3"
6
+ "option base": |
7
+ - radiogroup:
8
+ - radio "Option 1"
9
+ - radio "Option 2"
10
+ - radio "Option 3"
11
+ "default option": |
12
+ - radiogroup:
13
+ - radio "Option 1"
14
+ - radio "Option 2"
15
+ - radio "Option 3"
16
+ "selected option": |
17
+ - radiogroup:
18
+ - radio "Option 1"
19
+ - radio "Option 2" [checked]
20
+ - radio "Option 3"
21
+ "disabled option": |
22
+ - radiogroup:
23
+ - radio "Option 1" [disabled]
24
+ - radio "Option 2" [disabled]
25
+ - radio "Option 3" [disabled]
26
+ "hover option": |
27
+ - radiogroup:
28
+ - radio "Option 1"
29
+ - radio "Option 2"
30
+ - radio "Option 3"
31
+ "selected option (small)": |
32
+ - radiogroup:
33
+ - radio "Option 1"
34
+ - radio "Option 2" [checked]
35
+ - radio "Option 3"
package/src/testing-js/__aria__/sidenavigation.yml ADDED
@@ -0,0 +1,304 @@
1
+ "Panel": |
2
+ - complementary:
3
+ - link "Title":
4
+ - /url: "#"
5
+ - button "Collapse sidebar" [expanded]
6
+ - button "Collapse section" [expanded]
7
+ - link "Section 1":
8
+ - /url: "#section-1"
9
+ - link "Item 1":
10
+ - /url: "#section-1/item-1"
11
+ - link "Item 2":
12
+ - /url: "#section-1/item-2"
13
+ - link "Item 3":
14
+ - /url: "#section-1/item-3"
15
+ - button "Expand section"
16
+ - link "Section 2":
17
+ - /url: "#section-2"
18
+ - link "Footer":
19
+ - /url: "#footer"
20
+ "Title Block": |
21
+ - complementary:
22
+ - link "Title":
23
+ - /url: "#"
24
+ - button "Collapse sidebar" [expanded]
25
+ - button "Collapse section" [expanded]
26
+ - link "Section 1":
27
+ - /url: "#section-1"
28
+ - link "Item 1":
29
+ - /url: "#section-1/item-1"
30
+ - link "Item 2":
31
+ - /url: "#section-1/item-2"
32
+ - link "Item 3":
33
+ - /url: "#section-1/item-3"
34
+ - button "Expand section"
35
+ - link "Section 2":
36
+ - /url: "#section-2"
37
+ - link "Footer":
38
+ - /url: "#footer"
39
+ "Title": |
40
+ - complementary:
41
+ - link "Title":
42
+ - /url: "#"
43
+ - button "Collapse sidebar" [expanded]
44
+ - button "Collapse section" [expanded]
45
+ - link "Section 1":
46
+ - /url: "#section-1"
47
+ - link "Item 1":
48
+ - /url: "#section-1/item-1"
49
+ - link "Item 2":
50
+ - /url: "#section-1/item-2"
51
+ - link "Item 3":
52
+ - /url: "#section-1/item-3"
53
+ - button "Expand section"
54
+ - link "Section 2":
55
+ - /url: "#section-2"
56
+ - link "Footer":
57
+ - /url: "#footer"
58
+ "Toggle": |
59
+ - complementary:
60
+ - link "Title":
61
+ - /url: "#"
62
+ - button "Collapse sidebar" [expanded]
63
+ - button "Collapse section" [expanded]
64
+ - link "Section 1":
65
+ - /url: "#section-1"
66
+ - link "Item 1":
67
+ - /url: "#section-1/item-1"
68
+ - link "Item 2":
69
+ - /url: "#section-1/item-2"
70
+ - link "Item 3":
71
+ - /url: "#section-1/item-3"
72
+ - button "Expand section"
73
+ - link "Section 2":
74
+ - /url: "#section-2"
75
+ - link "Footer":
76
+ - /url: "#footer"
77
+ "Section": |
78
+ - complementary:
79
+ - link "Title":
80
+ - /url: "#"
81
+ - button "Collapse sidebar" [expanded]
82
+ - button "Collapse section" [expanded]
83
+ - link "Section 1":
84
+ - /url: "#section-1"
85
+ - link "Item 1":
86
+ - /url: "#section-1/item-1"
87
+ - link "Item 2":
88
+ - /url: "#section-1/item-2"
89
+ - link "Item 3":
90
+ - /url: "#section-1/item-3"
91
+ - button "Expand section"
92
+ - link "Section 2":
93
+ - /url: "#section-2"
94
+ - link "Footer":
95
+ - /url: "#footer"
96
+ "Item": |
97
+ - complementary:
98
+ - link "Title":
99
+ - /url: "#"
100
+ - button "Collapse sidebar" [expanded]
101
+ - button "Collapse section" [expanded]
102
+ - link "Section 1":
103
+ - /url: "#section-1"
104
+ - link "Item 1":
105
+ - /url: "#section-1/item-1"
106
+ - link "Item 2":
107
+ - /url: "#section-1/item-2"
108
+ - link "Item 3":
109
+ - /url: "#section-1/item-3"
110
+ - button "Expand section"
111
+ - link "Section 2":
112
+ - /url: "#section-2"
113
+ - link "Footer":
114
+ - /url: "#footer"
115
+ "Footer": |
116
+ - complementary:
117
+ - link "Title":
118
+ - /url: "#"
119
+ - button "Collapse sidebar" [expanded]
120
+ - button "Collapse section" [expanded]
121
+ - link "Section 1":
122
+ - /url: "#section-1"
123
+ - link "Item 1":
124
+ - /url: "#section-1/item-1"
125
+ - link "Item 2":
126
+ - /url: "#section-1/item-2"
127
+ - link "Item 3":
128
+ - /url: "#section-1/item-3"
129
+ - button "Expand section"
130
+ - link "Section 2":
131
+ - /url: "#section-2"
132
+ - link "Footer":
133
+ - /url: "#footer"
134
+ "Animation": |
135
+ - complementary:
136
+ - link "Title":
137
+ - /url: "#"
138
+ - button "Collapse sidebar" [expanded]
139
+ - button "Collapse section" [expanded]
140
+ - link "Section 1":
141
+ - /url: "#section-1"
142
+ - link "Item 1":
143
+ - /url: "#section-1/item-1"
144
+ - link "Item 2":
145
+ - /url: "#section-1/item-2"
146
+ - link "Item 3":
147
+ - /url: "#section-1/item-3"
148
+ - button "Expand section"
149
+ - link "Section 2":
150
+ - /url: "#section-2"
151
+ - link "Footer":
152
+ - /url: "#footer"
153
+ "Title (Hover)": |
154
+ - complementary:
155
+ - link "Title":
156
+ - /url: "#"
157
+ - button "Collapse sidebar" [expanded]
158
+ - button "Collapse section" [expanded]
159
+ - link "Section 1":
160
+ - /url: "#section-1"
161
+ - link "Item 1":
162
+ - /url: "#section-1/item-1"
163
+ - link "Item 2":
164
+ - /url: "#section-1/item-2"
165
+ - link "Item 3":
166
+ - /url: "#section-1/item-3"
167
+ - button "Expand section"
168
+ - link "Section 2":
169
+ - /url: "#section-2"
170
+ - link "Footer":
171
+ - /url: "#footer"
172
+ "Title (Selected)": |
173
+ - complementary:
174
+ - link "Title":
175
+ - /url: "#"
176
+ - button "Collapse sidebar" [expanded]
177
+ - button "Collapse section" [expanded]
178
+ - link "Section 1":
179
+ - /url: "#section-1"
180
+ - link "Item 1":
181
+ - /url: "#section-1/item-1"
182
+ - link "Item 2":
183
+ - /url: "#section-1/item-2"
184
+ - link "Item 3":
185
+ - /url: "#section-1/item-3"
186
+ - button "Expand section"
187
+ - link "Section 2":
188
+ - /url: "#section-2"
189
+ - link "Footer":
190
+ - /url: "#footer"
191
+ "Toggle (Hover)": |
192
+ - complementary:
193
+ - link "Title":
194
+ - /url: "#"
195
+ - button "Collapse sidebar" [expanded]
196
+ - button "Collapse section" [expanded]
197
+ - link "Section 1":
198
+ - /url: "#section-1"
199
+ - link "Item 1":
200
+ - /url: "#section-1/item-1"
201
+ - link "Item 2":
202
+ - /url: "#section-1/item-2"
203
+ - link "Item 3":
204
+ - /url: "#section-1/item-3"
205
+ - button "Expand section"
206
+ - link "Section 2":
207
+ - /url: "#section-2"
208
+ - link "Footer":
209
+ - /url: "#footer"
210
+ "Section (Hover)": |
211
+ - complementary:
212
+ - link "Title":
213
+ - /url: "#"
214
+ - button "Collapse sidebar" [expanded]
215
+ - button "Collapse section" [expanded]
216
+ - link "Section 1":
217
+ - /url: "#section-1"
218
+ - link "Item 1":
219
+ - /url: "#section-1/item-1"
220
+ - link "Item 2":
221
+ - /url: "#section-1/item-2"
222
+ - link "Item 3":
223
+ - /url: "#section-1/item-3"
224
+ - button "Expand section"
225
+ - link "Section 2":
226
+ - /url: "#section-2"
227
+ - link "Footer":
228
+ - /url: "#footer"
229
+ "Section (Selected)": |
230
+ - complementary:
231
+ - link "Title":
232
+ - /url: "#"
233
+ - button "Collapse sidebar" [expanded]
234
+ - button "Collapse section" [expanded]
235
+ - link "Section 1":
236
+ - /url: "#section-1"
237
+ - link "Item 1":
238
+ - /url: "#section-1/item-1"
239
+ - link "Item 2":
240
+ - /url: "#section-1/item-2"
241
+ - link "Item 3":
242
+ - /url: "#section-1/item-3"
243
+ - button "Expand section"
244
+ - link "Section 2":
245
+ - /url: "#section-2"
246
+ - link "Footer":
247
+ - /url: "#footer"
248
+ "Item (Hover)": |
249
+ - complementary:
250
+ - link "Title":
251
+ - /url: "#"
252
+ - button "Collapse sidebar" [expanded]
253
+ - button "Collapse section" [expanded]
254
+ - link "Section 1":
255
+ - /url: "#section-1"
256
+ - link "Item 1":
257
+ - /url: "#section-1/item-1"
258
+ - link "Item 2":
259
+ - /url: "#section-1/item-2"
260
+ - link "Item 3":
261
+ - /url: "#section-1/item-3"
262
+ - button "Expand section"
263
+ - link "Section 2":
264
+ - /url: "#section-2"
265
+ - link "Footer":
266
+ - /url: "#footer"
267
+ "Footer (Hover)": |
268
+ - complementary:
269
+ - link "Title":
270
+ - /url: "#"
271
+ - button "Collapse sidebar" [expanded]
272
+ - button "Collapse section" [expanded]
273
+ - link "Section 1":
274
+ - /url: "#section-1"
275
+ - link "Item 1":
276
+ - /url: "#section-1/item-1"
277
+ - link "Item 2":
278
+ - /url: "#section-1/item-2"
279
+ - link "Item 3":
280
+ - /url: "#section-1/item-3"
281
+ - button "Expand section"
282
+ - link "Section 2":
283
+ - /url: "#section-2"
284
+ - link "Footer":
285
+ - /url: "#footer"
286
+ "Footer (Selected)": |
287
+ - complementary:
288
+ - link "Title":
289
+ - /url: "#"
290
+ - button "Collapse sidebar" [expanded]
291
+ - button "Collapse section" [expanded]
292
+ - link "Section 1":
293
+ - /url: "#section-1"
294
+ - link "Item 1":
295
+ - /url: "#section-1/item-1"
296
+ - link "Item 2":
297
+ - /url: "#section-1/item-2"
298
+ - link "Item 3":
299
+ - /url: "#section-1/item-3"
300
+ - button "Expand section"
301
+ - link "Section 2":
302
+ - /url: "#section-2"
303
+ - link "Footer":
304
+ - /url: "#footer"