@epa-wg/custom-element-dist 0.0.33 → 0.0.35

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 (185) hide show
  1. package/.claude/settings.local.json +18 -0
  2. package/.gitattributes +4 -0
  3. package/.github/workflows/deploy.yml +59 -0
  4. package/.idea/copilot.data.migration.agent.xml +6 -0
  5. package/.idea/copilot.data.migration.ask.xml +6 -0
  6. package/.idea/copilot.data.migration.ask2agent.xml +6 -0
  7. package/.idea/copilot.data.migration.edit.xml +6 -0
  8. package/.idea/custom-element-dist.iml +2 -0
  9. package/.storybook/main.ts +20 -17
  10. package/.storybook/preview.ts +23 -23
  11. package/.yarn/install-state.gz +0 -0
  12. package/.yarnrc.yml +1 -0
  13. package/README.md +6 -4
  14. package/coverage/block-navigation.js +1 -1
  15. package/coverage/coverage-final.json +4 -3
  16. package/coverage/index.html +34 -19
  17. package/coverage/sorter.js +21 -7
  18. package/coverage/src/custom-element/coverage.svg +1 -1
  19. package/coverage/src/custom-element/custom-element.js/coverage.svg +1 -1
  20. package/coverage/src/custom-element/custom-element.js.html +448 -391
  21. package/coverage/src/custom-element/http-request.js/coverage.svg +1 -1
  22. package/coverage/src/custom-element/http-request.js.html +38 -17
  23. package/coverage/src/custom-element/index.html +26 -26
  24. package/coverage/src/custom-element/local-storage.js.html +1 -1
  25. package/coverage/src/custom-element/location-element.js.html +1 -1
  26. package/coverage/src/custom-element/module-url.js.html +1 -1
  27. package/coverage/src/index.html +1 -1
  28. package/coverage/src/material/theme/colors.js/coverage.svg +10 -0
  29. package/coverage/src/material/theme/colors.js.html +217 -0
  30. package/coverage/src/material/theme/coverage.svg +10 -0
  31. package/coverage/src/material/theme/index.html +116 -0
  32. package/coverage/src/mocks/handlers.ts.html +1 -1
  33. package/coverage/src/mocks/index.html +1 -1
  34. package/coverage/src/stories/frame.canvas.ts.html +1 -1
  35. package/coverage/src/stories/http-request.stories.ts.html +1 -1
  36. package/coverage/src/stories/index.html +1 -1
  37. package/coverage/src/stories/testStoryBook.ts.html +12 -12
  38. package/coverage/src/sum.ts.html +1 -1
  39. package/dist/custom-element-Bssk9jRy.cjs +97 -0
  40. package/dist/{custom-element-WnOqmEOe.js → custom-element-BzDjIYMe.js} +193 -183
  41. package/dist/custom-element-bundle.cjs +1 -1
  42. package/dist/custom-element-bundle.js +3 -3
  43. package/dist/demo/a.html +10 -3
  44. package/dist/demo/a.svg +26 -26
  45. package/dist/demo/html-template.html +4 -3
  46. package/dist/demo/s.xml +1 -75
  47. package/dist/demo/s.xslt +351 -72
  48. package/dist/demo/s1.xml +3706 -0
  49. package/dist/http-request-DSaowcG1.cjs +1 -0
  50. package/dist/{http-request-BOvP4KTl.js → http-request-DTCzZ1gc.js} +15 -9
  51. package/dist/mockServiceWorker.js +105 -63
  52. package/package.json +5 -4
  53. package/public/demo/a.html +10 -3
  54. package/public/demo/a.svg +26 -26
  55. package/public/demo/html-template.html +4 -3
  56. package/public/demo/s.xml +1 -75
  57. package/public/demo/s.xslt +351 -72
  58. package/public/demo/s1.xml +3706 -0
  59. package/public/mockServiceWorker.js +105 -63
  60. package/src/custom-element/custom-element.js +28 -9
  61. package/src/custom-element/demo/a.html +10 -3
  62. package/src/custom-element/demo/a.svg +26 -26
  63. package/src/custom-element/demo/html-template.html +4 -3
  64. package/src/custom-element/demo/s.xml +1 -75
  65. package/src/custom-element/demo/s.xslt +351 -72
  66. package/src/custom-element/demo/s1.xml +3706 -0
  67. package/src/custom-element/http-request.js +7 -0
  68. package/src/custom-element/ide/customData-dce.json +123 -0
  69. package/src/custom-element/ide/web-types-dce.json +128 -1
  70. package/src/custom-element/ide/web-types-xsl.json +1 -1
  71. package/src/material/angular.css +987 -987
  72. package/src/material/components/action.html +262 -0
  73. package/src/material/components/autocomplete.html +167 -239
  74. package/src/material/components/badge.html +238 -239
  75. package/src/material/components/dropdown.html +0 -1
  76. package/src/material/components/icon-link.html +160 -161
  77. package/src/material/components/icon.html +251 -252
  78. package/src/material/components/input.html +569 -570
  79. package/src/material/components/menu.html +235 -236
  80. package/src/material/components.html +157 -158
  81. package/src/material/demo.css +36 -36
  82. package/src/material/index.html +109 -110
  83. package/src/material/material.css +356 -356
  84. package/src/material/theme/Base-Principles.md +339 -0
  85. package/src/material/theme/README.md +298 -18
  86. package/src/material/theme/UI Domain Model in web applications.svg +1 -0
  87. package/src/material/theme/User Semantic Theme tokens.svg +1 -0
  88. package/src/material/theme/action-pending-poc.html +62 -0
  89. package/src/material/theme/actions-color.html +141 -0
  90. package/src/material/theme/colors-light.html +631 -0
  91. package/src/material/theme/colors-native.html +51 -0
  92. package/src/material/theme/colors-poc.html +66 -0
  93. package/src/material/theme/colors.html +297 -0
  94. package/src/material/theme/colors.js +44 -0
  95. package/src/material/theme/consumer-theme.css +745 -0
  96. package/src/material/theme/semantic.css +132 -132
  97. package/src/material/theme/style-bug.html +123 -0
  98. package/src/material/theme/theme-data.css +43 -0
  99. package/src/material/theme/theme-data.xhtml +2926 -0
  100. package/src/material/theme/todo.md +274 -0
  101. package/src/material/theme/tokens/action-colors.png +0 -0
  102. package/src/material/theme/tokens/cem-article-illustration-4x1-letterbox-2000x500.png +0 -0
  103. package/src/material/theme/tokens/cem-breakpoints.md +519 -0
  104. package/src/material/theme/tokens/cem-colors.md +715 -0
  105. package/src/material/theme/tokens/cem-consumerflow-typography-matrix.svg +198 -0
  106. package/src/material/theme/tokens/cem-coupling.md +372 -0
  107. package/src/material/theme/tokens/cem-data-vs-reading-numerals.svg +164 -0
  108. package/src/material/theme/tokens/cem-dimension.md +625 -0
  109. package/src/material/theme/tokens/cem-layering.md +562 -0
  110. package/src/material/theme/tokens/cem-m3-parity.md +343 -0
  111. package/src/material/theme/tokens/cem-responsive.md +238 -0
  112. package/src/material/theme/tokens/cem-shape.md +691 -0
  113. package/src/material/theme/tokens/cem-stroke-density-illustration-4to1-v3.svg +102 -0
  114. package/src/material/theme/tokens/cem-stroke.md +480 -0
  115. package/src/material/theme/tokens/cem-timing.md +198 -0
  116. package/src/material/theme/tokens/cem-typography-model-stack.svg +64 -0
  117. package/src/material/theme/tokens/cem-voice-fonts-typography.md +718 -0
  118. package/src/material/theme/tokens/cem-voice-ladder.svg +91 -0
  119. package/src/material/theme/tokens/chips.png +0 -0
  120. package/src/material/theme/tokens/columns-page.png +0 -0
  121. package/src/material/theme/tokens/initials.png +0 -0
  122. package/src/material/theme/tokens/nav-buttons.png +0 -0
  123. package/src/material/theme/tokens/script.png +0 -0
  124. package/src/material/theme/tokens/sufler.png +0 -0
  125. package/src/material/theme/tokens/typography-icons.png +0 -0
  126. package/src/mocks/versions.mock.ts +1 -1
  127. package/src/stories/__screenshots__/dom-merge.test.stories.ts/dom-merge-dom-merge-OrderPreservingOn2ndTransform-1.png +0 -0
  128. package/src/stories/__screenshots__/xslt-conditionals.test.stories.ts/xslt-conditionals-xslt-conditionals-MultipleIfOrderingWorkaround-1.png +0 -0
  129. package/src/stories/dom-merge.test.stories.ts +25 -1
  130. package/src/stories/xslt-conditionals.test.stories.ts +492 -0
  131. package/src/stories/xslt-for-each.test.stories.ts +336 -0
  132. package/src/stories/xslt-if.test.stories.ts +89 -0
  133. package/storybook-static/assets/{Color-F6OSRLHC-Cbp293x2.js → Color-F6OSRLHC-DeDlDLjU.js} +1 -1
  134. package/storybook-static/assets/{Configure-BrFr4SLE.js → Configure-CH_tIP5N.js} +1 -1
  135. package/storybook-static/assets/{DocsRenderer-CFRXHY34-DhHzJiIO.js → DocsRenderer-CFRXHY34-Bc9EPsUI.js} +2 -2
  136. package/storybook-static/assets/{attributes.test.stories-Gg9LQTEK.js → attributes.test.stories-BtamFQkF.js} +1 -1
  137. package/storybook-static/assets/{css.test.stories-B_3ltOrx.js → css.test.stories-BfNxLgwr.js} +1 -1
  138. package/storybook-static/assets/{custom-element-CPnvJnn8.js → custom-element-CnmjNo0g.js} +6 -6
  139. package/storybook-static/assets/{dom-merge.test.stories-nQxcgLoM.js → dom-merge.test.stories-DxnitrLK.js} +47 -6
  140. package/storybook-static/assets/entry-preview-BNCt9WBs.js +26 -0
  141. package/storybook-static/assets/{entry-preview-docs-Dwczwtsc.js → entry-preview-docs-CbF8-81D.js} +2 -2
  142. package/storybook-static/assets/{external-template.test.stories-DZ-rjnfd.js → external-template.test.stories-BTsww7B0.js} +1 -1
  143. package/storybook-static/assets/{form.test.stories-DQhPYtMj.js → form.test.stories-DNJFtPJb.js} +1 -1
  144. package/storybook-static/assets/{frame.canvas-ClTqYyMN.js → frame.canvas-E5n9h6j1.js} +1 -1
  145. package/storybook-static/assets/{handlers-CLkps6Nz.js → handlers-Dvg8CAeR.js} +1 -1
  146. package/storybook-static/assets/http-request-BWeEEBkP.js +1 -0
  147. package/storybook-static/assets/{http-request.stories-jo0f73nw.js → http-request.stories-DgrBNle8.js} +1 -1
  148. package/storybook-static/assets/{iframe-CZwRpnn9.js → iframe-DiVWehoI.js} +11 -11
  149. package/storybook-static/assets/{index-Dr4PwNfd.js → index-CGuyH0k-.js} +87 -87
  150. package/storybook-static/assets/{index-CJQtnF9V.js → index-CdEbhcV9.js} +1 -1
  151. package/storybook-static/assets/index-DO1nmyvI.js +11 -0
  152. package/storybook-static/assets/{index-B68YUdzy.js → index-w6iX3YlR.js} +3 -3
  153. package/storybook-static/assets/{local-storage.test.stories-uA5EKRPf.js → local-storage.test.stories-Hwq80yUr.js} +1 -1
  154. package/storybook-static/assets/{location-element.test.stories-Cu-6Elcg.js → location-element.test.stories-mEhZzm7x.js} +1 -1
  155. package/storybook-static/assets/{module-url.test.stories-CD_wusXQ.js → module-url.test.stories-Bj46iT0V.js} +1 -1
  156. package/storybook-static/assets/{preview-CuCH40jj.js → preview-BjbXcJci.js} +2 -2
  157. package/storybook-static/assets/{preview-BFlNN3Wj.js → preview-Bn8igYMp.js} +1 -1
  158. package/storybook-static/assets/{preview-Cm4PPhHS.js → preview-CfuT8gak.js} +1 -1
  159. package/storybook-static/assets/{set-url.test.stories-CY7B9BVZ.js → set-url.test.stories-hzxLcqmm.js} +1 -1
  160. package/storybook-static/assets/{slice-events.test.stories-BVnPXm6e.js → slice-events.test.stories-DVyXFRU1.js} +1 -1
  161. package/storybook-static/assets/{slots.test.stories-Dxsa9KdA.js → slots.test.stories-CS544nS4.js} +1 -1
  162. package/storybook-static/assets/{version-select.test.stories-Buga1PAa.js → version-select.test.stories-D36nfYBq.js} +1 -1
  163. package/storybook-static/assets/xslt-conditionals.test.stories-BS1PTIHe.js +633 -0
  164. package/storybook-static/assets/xslt-for-each.test.stories-CtPS20RK.js +329 -0
  165. package/storybook-static/assets/xslt-if.test.stories-DcHrAMSY.js +71 -0
  166. package/storybook-static/demo/a.html +10 -3
  167. package/storybook-static/demo/a.svg +26 -26
  168. package/storybook-static/demo/html-template.html +4 -3
  169. package/storybook-static/demo/s.xml +1 -75
  170. package/storybook-static/demo/s.xslt +351 -72
  171. package/storybook-static/demo/s1.xml +3706 -0
  172. package/storybook-static/iframe.html +2 -2
  173. package/storybook-static/index.json +1 -1
  174. package/storybook-static/mockServiceWorker.js +105 -63
  175. package/storybook-static/project.json +1 -1
  176. package/storybook-static/sb-addons/essentials-controls-1/manager-bundle.js +69 -66
  177. package/storybook-static/sb-addons/essentials-docs-3/manager-bundle.js +62 -59
  178. package/dist/custom-element-6slVaFEs.cjs +0 -97
  179. package/dist/http-request-DPrY7mGh.cjs +0 -1
  180. package/storybook-static/assets/attributes.test.stories-CzWkKw0e.js +0 -1
  181. package/storybook-static/assets/entry-preview-DHVXbf3x.js +0 -26
  182. package/storybook-static/assets/external-template.test.stories-BivZqBTp.js +0 -1
  183. package/storybook-static/assets/http-request-DNq59pnj.js +0 -1
  184. package/storybook-static/assets/index-BwkS7JH_.js +0 -8
  185. package/storybook-static/assets/module-url.test.stories-CTjUAk3J.js +0 -1
package/src/material/theme/colors-light.html ADDED
@@ -0,0 +1,631 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>light theme action colors</title>
6
+ <style>
7
+ @import "consumer-theme.css";
8
+ </style>
9
+ </head>
10
+ <body class="cem-theme-light" >
11
+ <table data-dce-id="69-1">
12
+ <thead data-dce-id="70"><tr data-dce-id="71">
13
+ <th data-dce-id="72">
14
+ <dce-text data-dce-id="73"> state </dce-text><br data-dce-id="74"><i data-dce-id="75">tokens</i>
15
+ </th>
16
+ <th style="min-width:6rem" title=" user explicitly/intentionally clicks or activates " data-dce-id="76">explicit</th>
17
+ <th style="min-width:6rem" title=" default, confirmatory, implicit. Triggered by ENTER " data-dce-id="76-1">primary</th>
18
+ <th style="min-width:6rem" title=" integrated within a specific context, Toolbar/menu " data-dce-id="76-2">contextual</th>
19
+ <th style="min-width:6rem" title=" triggering not usual alternative flow " data-dce-id="76-3">alternate</th>
20
+ <th style="min-width:6rem" title=" risky, potentially harmful, requires caution " data-dce-id="76-4">destructive</th>
21
+ </tr></thead>
22
+ <tbody data-dce-id="77">
23
+ <tr data-dce-id="78">
24
+ <td title=" Disabled
25
+ tokens: color font marker
26
+ " data-dce-id="79">
27
+ <dce-text data-dce-id="80">disabled</dce-text><br data-dce-id="81"><i data-dce-id="82"><dce-text data-dce-id="83">color font marker</dce-text><small data-dce-id="84"></small></i>
28
+ </td>
29
+ <td style="
30
+ background-color: var(--cem-action-explicit-disabled-background);
31
+ color: var(--cem-action-explicit-disabled-text);
32
+ font-size:x-small;
33
+ padding:0.5em" title="explicit : user explicitly/intentionally clicks or activates
34
+ disabled : Disabled
35
+ " data-dce-id="87">
36
+ <dce-text data-dce-id="88">
37
+ --cem-action-explicit-disabled-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
38
+ --cem-action-explicit-disabled-color
39
+ </dce-text>
40
+ </td>
41
+ <td style="
42
+ background-color: var(--cem-action-primary-disabled-background);
43
+ color: var(--cem-action-primary-disabled-text);
44
+ font-size:x-small;
45
+ padding:0.5em" title="primary : default, confirmatory, implicit. Triggered by ENTER
46
+ disabled : Disabled
47
+ " data-dce-id="87-1">
48
+ <dce-text data-dce-id="88">
49
+ --cem-action-primary-disabled-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
50
+ --cem-action-primary-disabled-color
51
+ </dce-text>
52
+ </td>
53
+ <td style="
54
+ background-color: var(--cem-action-contextual-disabled-background);
55
+ color: var(--cem-action-contextual-disabled-text);
56
+ font-size:x-small;
57
+ padding:0.5em" title="contextual : integrated within a specific context, Toolbar/menu
58
+ disabled : Disabled
59
+ " data-dce-id="87-2">
60
+ <dce-text data-dce-id="88">
61
+ --cem-action-contextual-disabled-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
62
+ --cem-action-contextual-disabled-color
63
+ </dce-text>
64
+ </td>
65
+ <td style="
66
+ background-color: var(--cem-action-alternate-disabled-background);
67
+ color: var(--cem-action-alternate-disabled-text);
68
+ font-size:x-small;
69
+ padding:0.5em" title="alternate : triggering not usual alternative flow
70
+ disabled : Disabled
71
+ " data-dce-id="87-3">
72
+ <dce-text data-dce-id="88">
73
+ --cem-action-alternate-disabled-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
74
+ --cem-action-alternate-disabled-color
75
+ </dce-text>
76
+ </td>
77
+ <td style="
78
+ background-color: var(--cem-action-destructive-disabled-background);
79
+ color: var(--cem-action-destructive-disabled-text);
80
+ font-size:x-small;
81
+ padding:0.5em" title="destructive : risky, potentially harmful, requires caution
82
+ disabled : Disabled
83
+ " data-dce-id="87-4">
84
+ <dce-text data-dce-id="88">
85
+ --cem-action-destructive-disabled-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
86
+ --cem-action-destructive-disabled-color
87
+ </dce-text>
88
+ </td>
89
+ </tr>
90
+ <tr data-dce-id="78-1">
91
+ <td title=" Readonly, underline is grayed out in Material Design
92
+ tokens: color outline font marker
93
+ " data-dce-id="79">
94
+ <dce-text data-dce-id="80">readonly</dce-text><br data-dce-id="81"><i data-dce-id="82"><dce-text data-dce-id="83">color outline font marker</dce-text><small data-dce-id="84"></small></i>
95
+ </td>
96
+ <td style="
97
+ background-color: var(--cem-action-explicit-readonly-background);
98
+ color: var(--cem-action-explicit-readonly-text);
99
+ font-size:x-small;
100
+ padding:0.5em" title="explicit : user explicitly/intentionally clicks or activates
101
+ readonly : Readonly, underline is grayed out in Material Design
102
+ " data-dce-id="87">
103
+ <dce-text data-dce-id="88">
104
+ --cem-action-explicit-readonly-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
105
+ --cem-action-explicit-readonly-color
106
+ </dce-text>
107
+ </td>
108
+ <td style="
109
+ background-color: var(--cem-action-primary-readonly-background);
110
+ color: var(--cem-action-primary-readonly-text);
111
+ font-size:x-small;
112
+ padding:0.5em" title="primary : default, confirmatory, implicit. Triggered by ENTER
113
+ readonly : Readonly, underline is grayed out in Material Design
114
+ " data-dce-id="87-1">
115
+ <dce-text data-dce-id="88">
116
+ --cem-action-primary-readonly-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
117
+ --cem-action-primary-readonly-color
118
+ </dce-text>
119
+ </td>
120
+ <td style="
121
+ background-color: var(--cem-action-contextual-readonly-background);
122
+ color: var(--cem-action-contextual-readonly-text);
123
+ font-size:x-small;
124
+ padding:0.5em" title="contextual : integrated within a specific context, Toolbar/menu
125
+ readonly : Readonly, underline is grayed out in Material Design
126
+ " data-dce-id="87-2">
127
+ <dce-text data-dce-id="88">
128
+ --cem-action-contextual-readonly-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
129
+ --cem-action-contextual-readonly-color
130
+ </dce-text>
131
+ </td>
132
+ <td style="
133
+ background-color: var(--cem-action-alternate-readonly-background);
134
+ color: var(--cem-action-alternate-readonly-text);
135
+ font-size:x-small;
136
+ padding:0.5em" title="alternate : triggering not usual alternative flow
137
+ readonly : Readonly, underline is grayed out in Material Design
138
+ " data-dce-id="87-3">
139
+ <dce-text data-dce-id="88">
140
+ --cem-action-alternate-readonly-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
141
+ --cem-action-alternate-readonly-color
142
+ </dce-text>
143
+ </td>
144
+ <td style="
145
+ background-color: var(--cem-action-destructive-readonly-background);
146
+ color: var(--cem-action-destructive-readonly-text);
147
+ font-size:x-small;
148
+ padding:0.5em" title="destructive : risky, potentially harmful, requires caution
149
+ readonly : Readonly, underline is grayed out in Material Design
150
+ " data-dce-id="87-4">
151
+ <dce-text data-dce-id="88">
152
+ --cem-action-destructive-readonly-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
153
+ --cem-action-destructive-readonly-color
154
+ </dce-text>
155
+ </td>
156
+ </tr>
157
+ <tr data-dce-id="78-2">
158
+ <td title=" Editable, underlined in Material Design
159
+ tokens: color outline font marker
160
+ " data-dce-id="79">
161
+ <dce-text data-dce-id="80">editable</dce-text><br data-dce-id="81"><i data-dce-id="82"><dce-text data-dce-id="83">color outline font marker</dce-text><small data-dce-id="84"></small></i>
162
+ </td>
163
+ <td style="
164
+ background-color: var(--cem-action-explicit-editable-background);
165
+ color: var(--cem-action-explicit-editable-text);
166
+ font-size:x-small;
167
+ padding:0.5em" title="explicit : user explicitly/intentionally clicks or activates
168
+ editable : Editable, underlined in Material Design
169
+ " data-dce-id="87">
170
+ <dce-text data-dce-id="88">
171
+ --cem-action-explicit-editable-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
172
+ --cem-action-explicit-editable-color
173
+ </dce-text>
174
+ </td>
175
+ <td style="
176
+ background-color: var(--cem-action-primary-editable-background);
177
+ color: var(--cem-action-primary-editable-text);
178
+ font-size:x-small;
179
+ padding:0.5em" title="primary : default, confirmatory, implicit. Triggered by ENTER
180
+ editable : Editable, underlined in Material Design
181
+ " data-dce-id="87-1">
182
+ <dce-text data-dce-id="88">
183
+ --cem-action-primary-editable-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
184
+ --cem-action-primary-editable-color
185
+ </dce-text>
186
+ </td>
187
+ <td style="
188
+ background-color: var(--cem-action-contextual-editable-background);
189
+ color: var(--cem-action-contextual-editable-text);
190
+ font-size:x-small;
191
+ padding:0.5em" title="contextual : integrated within a specific context, Toolbar/menu
192
+ editable : Editable, underlined in Material Design
193
+ " data-dce-id="87-2">
194
+ <dce-text data-dce-id="88">
195
+ --cem-action-contextual-editable-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
196
+ --cem-action-contextual-editable-color
197
+ </dce-text>
198
+ </td>
199
+ <td style="
200
+ background-color: var(--cem-action-alternate-editable-background);
201
+ color: var(--cem-action-alternate-editable-text);
202
+ font-size:x-small;
203
+ padding:0.5em" title="alternate : triggering not usual alternative flow
204
+ editable : Editable, underlined in Material Design
205
+ " data-dce-id="87-3">
206
+ <dce-text data-dce-id="88">
207
+ --cem-action-alternate-editable-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
208
+ --cem-action-alternate-editable-color
209
+ </dce-text>
210
+ </td>
211
+ <td style="
212
+ background-color: var(--cem-action-destructive-editable-background);
213
+ color: var(--cem-action-destructive-editable-text);
214
+ font-size:x-small;
215
+ padding:0.5em" title="destructive : risky, potentially harmful, requires caution
216
+ editable : Editable, underlined in Material Design
217
+ " data-dce-id="87-4">
218
+ <dce-text data-dce-id="88">
219
+ --cem-action-destructive-editable-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
220
+ --cem-action-destructive-editable-color
221
+ </dce-text>
222
+ </td>
223
+ </tr>
224
+ <tr data-dce-id="78-3">
225
+ <td title=" button is outlined, input fields underlined in Material Design
226
+ tokens: color outline font marker
227
+ " data-dce-id="79">
228
+ <dce-text data-dce-id="80">default</dce-text><br data-dce-id="81"><i data-dce-id="82"><dce-text data-dce-id="83">color outline font marker</dce-text><small data-dce-id="84"></small></i>
229
+ </td>
230
+ <td style="
231
+ background-color: var(--cem-action-explicit-default-background);
232
+ color: var(--cem-action-explicit-default-text);
233
+ font-size:x-small;
234
+ padding:0.5em" title="explicit : user explicitly/intentionally clicks or activates
235
+ default : button is outlined, input fields underlined in Material Design
236
+ " data-dce-id="87">
237
+ <dce-text data-dce-id="88">
238
+ --cem-action-explicit-default-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
239
+ --cem-action-explicit-default-color
240
+ </dce-text>
241
+ </td>
242
+ <td style="
243
+ background-color: var(--cem-action-primary-default-background);
244
+ color: var(--cem-action-primary-default-text);
245
+ font-size:x-small;
246
+ padding:0.5em" title="primary : default, confirmatory, implicit. Triggered by ENTER
247
+ default : button is outlined, input fields underlined in Material Design
248
+ " data-dce-id="87-1">
249
+ <dce-text data-dce-id="88">
250
+ --cem-action-primary-default-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
251
+ --cem-action-primary-default-color
252
+ </dce-text>
253
+ </td>
254
+ <td style="
255
+ background-color: var(--cem-action-contextual-default-background);
256
+ color: var(--cem-action-contextual-default-text);
257
+ font-size:x-small;
258
+ padding:0.5em" title="contextual : integrated within a specific context, Toolbar/menu
259
+ default : button is outlined, input fields underlined in Material Design
260
+ " data-dce-id="87-2">
261
+ <dce-text data-dce-id="88">
262
+ --cem-action-contextual-default-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
263
+ --cem-action-contextual-default-color
264
+ </dce-text>
265
+ </td>
266
+ <td style="
267
+ background-color: var(--cem-action-alternate-default-background);
268
+ color: var(--cem-action-alternate-default-text);
269
+ font-size:x-small;
270
+ padding:0.5em" title="alternate : triggering not usual alternative flow
271
+ default : button is outlined, input fields underlined in Material Design
272
+ " data-dce-id="87-3">
273
+ <dce-text data-dce-id="88">
274
+ --cem-action-alternate-default-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
275
+ --cem-action-alternate-default-color
276
+ </dce-text>
277
+ </td>
278
+ <td style="
279
+ background-color: var(--cem-action-destructive-default-background);
280
+ color: var(--cem-action-destructive-default-text);
281
+ font-size:x-small;
282
+ padding:0.5em" title="destructive : risky, potentially harmful, requires caution
283
+ default : button is outlined, input fields underlined in Material Design
284
+ " data-dce-id="87-4">
285
+ <dce-text data-dce-id="88">
286
+ --cem-action-destructive-default-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
287
+ --cem-action-destructive-default-color
288
+ </dce-text>
289
+ </td>
290
+ </tr>
291
+ <tr data-dce-id="78-4">
292
+ <td title=" No Value available, &quot;select all&quot; checkbox when not all of its sub-controls are checked.
293
+ tokens: color outline font marker
294
+ " data-dce-id="79">
295
+ <dce-text data-dce-id="80">indeterminate</dce-text><br data-dce-id="81"><i data-dce-id="82"><dce-text data-dce-id="83">color outline font marker</dce-text><small data-dce-id="84"></small></i>
296
+ </td>
297
+ <td style="
298
+ background-color: var(--cem-action-explicit-indeterminate-background);
299
+ color: var(--cem-action-explicit-indeterminate-text);
300
+ font-size:x-small;
301
+ padding:0.5em" title="explicit : user explicitly/intentionally clicks or activates
302
+ indeterminate : No Value available, &quot;select all&quot; checkbox when not all of its sub-controls are checked.
303
+ " data-dce-id="87">
304
+ <dce-text data-dce-id="88">
305
+ --cem-action-explicit-indeterminate-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
306
+ --cem-action-explicit-indeterminate-color
307
+ </dce-text>
308
+ </td>
309
+ <td style="
310
+ background-color: var(--cem-action-primary-indeterminate-background);
311
+ color: var(--cem-action-primary-indeterminate-text);
312
+ font-size:x-small;
313
+ padding:0.5em" title="primary : default, confirmatory, implicit. Triggered by ENTER
314
+ indeterminate : No Value available, &quot;select all&quot; checkbox when not all of its sub-controls are checked.
315
+ " data-dce-id="87-1">
316
+ <dce-text data-dce-id="88">
317
+ --cem-action-primary-indeterminate-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
318
+ --cem-action-primary-indeterminate-color
319
+ </dce-text>
320
+ </td>
321
+ <td style="
322
+ background-color: var(--cem-action-contextual-indeterminate-background);
323
+ color: var(--cem-action-contextual-indeterminate-text);
324
+ font-size:x-small;
325
+ padding:0.5em" title="contextual : integrated within a specific context, Toolbar/menu
326
+ indeterminate : No Value available, &quot;select all&quot; checkbox when not all of its sub-controls are checked.
327
+ " data-dce-id="87-2">
328
+ <dce-text data-dce-id="88">
329
+ --cem-action-contextual-indeterminate-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
330
+ --cem-action-contextual-indeterminate-color
331
+ </dce-text>
332
+ </td>
333
+ <td style="
334
+ background-color: var(--cem-action-alternate-indeterminate-background);
335
+ color: var(--cem-action-alternate-indeterminate-text);
336
+ font-size:x-small;
337
+ padding:0.5em" title="alternate : triggering not usual alternative flow
338
+ indeterminate : No Value available, &quot;select all&quot; checkbox when not all of its sub-controls are checked.
339
+ " data-dce-id="87-3">
340
+ <dce-text data-dce-id="88">
341
+ --cem-action-alternate-indeterminate-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
342
+ --cem-action-alternate-indeterminate-color
343
+ </dce-text>
344
+ </td>
345
+ <td style="
346
+ background-color: var(--cem-action-destructive-indeterminate-background);
347
+ color: var(--cem-action-destructive-indeterminate-text);
348
+ font-size:x-small;
349
+ padding:0.5em" title="destructive : risky, potentially harmful, requires caution
350
+ indeterminate : No Value available, &quot;select all&quot; checkbox when not all of its sub-controls are checked.
351
+ " data-dce-id="87-4">
352
+ <dce-text data-dce-id="88">
353
+ --cem-action-destructive-indeterminate-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
354
+ --cem-action-destructive-indeterminate-color
355
+ </dce-text>
356
+ </td>
357
+ </tr>
358
+ <tr data-dce-id="78-5">
359
+ <td title=" Outline to reflect the focus is make by keyboard navigation, visible even in actions/buttons
360
+ tokens: color outline font marker
361
+ " data-dce-id="79">
362
+ <dce-text data-dce-id="80">hover</dce-text><br data-dce-id="81"><i data-dce-id="82"><dce-text data-dce-id="83">color outline font marker</dce-text><small data-dce-id="84"></small></i>
363
+ </td>
364
+ <td style="
365
+ background-color: var(--cem-action-explicit-hover-background);
366
+ color: var(--cem-action-explicit-hover-text);
367
+ font-size:x-small;
368
+ padding:0.5em" title="explicit : user explicitly/intentionally clicks or activates
369
+ hover : Outline to reflect the focus is make by keyboard navigation, visible even in actions/buttons
370
+ " data-dce-id="87">
371
+ <dce-text data-dce-id="88">
372
+ --cem-action-explicit-hover-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
373
+ --cem-action-explicit-hover-color
374
+ </dce-text>
375
+ </td>
376
+ <td style="
377
+ background-color: var(--cem-action-primary-hover-background);
378
+ color: var(--cem-action-primary-hover-text);
379
+ font-size:x-small;
380
+ padding:0.5em" title="primary : default, confirmatory, implicit. Triggered by ENTER
381
+ hover : Outline to reflect the focus is make by keyboard navigation, visible even in actions/buttons
382
+ " data-dce-id="87-1">
383
+ <dce-text data-dce-id="88">
384
+ --cem-action-primary-hover-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
385
+ --cem-action-primary-hover-color
386
+ </dce-text>
387
+ </td>
388
+ <td style="
389
+ background-color: var(--cem-action-contextual-hover-background);
390
+ color: var(--cem-action-contextual-hover-text);
391
+ font-size:x-small;
392
+ padding:0.5em" title="contextual : integrated within a specific context, Toolbar/menu
393
+ hover : Outline to reflect the focus is make by keyboard navigation, visible even in actions/buttons
394
+ " data-dce-id="87-2">
395
+ <dce-text data-dce-id="88">
396
+ --cem-action-contextual-hover-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
397
+ --cem-action-contextual-hover-color
398
+ </dce-text>
399
+ </td>
400
+ <td style="
401
+ background-color: var(--cem-action-alternate-hover-background);
402
+ color: var(--cem-action-alternate-hover-text);
403
+ font-size:x-small;
404
+ padding:0.5em" title="alternate : triggering not usual alternative flow
405
+ hover : Outline to reflect the focus is make by keyboard navigation, visible even in actions/buttons
406
+ " data-dce-id="87-3">
407
+ <dce-text data-dce-id="88">
408
+ --cem-action-alternate-hover-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
409
+ --cem-action-alternate-hover-color
410
+ </dce-text>
411
+ </td>
412
+ <td style="
413
+ background-color: var(--cem-action-destructive-hover-background);
414
+ color: var(--cem-action-destructive-hover-text);
415
+ font-size:x-small;
416
+ padding:0.5em" title="destructive : risky, potentially harmful, requires caution
417
+ hover : Outline to reflect the focus is make by keyboard navigation, visible even in actions/buttons
418
+ " data-dce-id="87-4">
419
+ <dce-text data-dce-id="88">
420
+ --cem-action-destructive-hover-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
421
+ --cem-action-destructive-hover-color
422
+ </dce-text>
423
+ </td>
424
+ </tr>
425
+ <tr data-dce-id="78-6">
426
+ <td title=" Selected item(menu, radio), checked radio, etc.
427
+ tokens: color font marker
428
+ " data-dce-id="79">
429
+ <dce-text data-dce-id="80">selected</dce-text><br data-dce-id="81"><i data-dce-id="82"><dce-text data-dce-id="83">color font marker</dce-text><small data-dce-id="84"></small></i>
430
+ </td>
431
+ <td style="
432
+ background-color: var(--cem-action-explicit-selected-background);
433
+ color: var(--cem-action-explicit-selected-text);
434
+ font-size:x-small;
435
+ padding:0.5em" title="explicit : user explicitly/intentionally clicks or activates
436
+ selected : Selected item(menu, radio), checked radio, etc.
437
+ " data-dce-id="87">
438
+ <dce-text data-dce-id="88">
439
+ --cem-action-explicit-selected-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
440
+ --cem-action-explicit-selected-color
441
+ </dce-text>
442
+ </td>
443
+ <td style="
444
+ background-color: var(--cem-action-primary-selected-background);
445
+ color: var(--cem-action-primary-selected-text);
446
+ font-size:x-small;
447
+ padding:0.5em" title="primary : default, confirmatory, implicit. Triggered by ENTER
448
+ selected : Selected item(menu, radio), checked radio, etc.
449
+ " data-dce-id="87-1">
450
+ <dce-text data-dce-id="88">
451
+ --cem-action-primary-selected-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
452
+ --cem-action-primary-selected-color
453
+ </dce-text>
454
+ </td>
455
+ <td style="
456
+ background-color: var(--cem-action-contextual-selected-background);
457
+ color: var(--cem-action-contextual-selected-text);
458
+ font-size:x-small;
459
+ padding:0.5em" title="contextual : integrated within a specific context, Toolbar/menu
460
+ selected : Selected item(menu, radio), checked radio, etc.
461
+ " data-dce-id="87-2">
462
+ <dce-text data-dce-id="88">
463
+ --cem-action-contextual-selected-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
464
+ --cem-action-contextual-selected-color
465
+ </dce-text>
466
+ </td>
467
+ <td style="
468
+ background-color: var(--cem-action-alternate-selected-background);
469
+ color: var(--cem-action-alternate-selected-text);
470
+ font-size:x-small;
471
+ padding:0.5em" title="alternate : triggering not usual alternative flow
472
+ selected : Selected item(menu, radio), checked radio, etc.
473
+ " data-dce-id="87-3">
474
+ <dce-text data-dce-id="88">
475
+ --cem-action-alternate-selected-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
476
+ --cem-action-alternate-selected-color
477
+ </dce-text>
478
+ </td>
479
+ <td style="
480
+ background-color: var(--cem-action-destructive-selected-background);
481
+ color: var(--cem-action-destructive-selected-text);
482
+ font-size:x-small;
483
+ padding:0.5em" title="destructive : risky, potentially harmful, requires caution
484
+ selected : Selected item(menu, radio), checked radio, etc.
485
+ " data-dce-id="87-4">
486
+ <dce-text data-dce-id="88">
487
+ --cem-action-destructive-selected-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
488
+ --cem-action-destructive-selected-color
489
+ </dce-text>
490
+ </td>
491
+ </tr>
492
+ <tr data-dce-id="78-7">
493
+ <td title=" Pressed action element state, darkest background with alternate text color to emphasize the action follows immediately.
494
+ tokens: color outline font marker
495
+ " data-dce-id="79">
496
+ <dce-text data-dce-id="80">active</dce-text><br data-dce-id="81"><i data-dce-id="82"><dce-text data-dce-id="83">color outline font marker</dce-text><small data-dce-id="84"></small></i>
497
+ </td>
498
+ <td style="
499
+ background-color: var(--cem-action-explicit-active-background);
500
+ color: var(--cem-action-explicit-active-text);
501
+ font-size:x-small;
502
+ padding:0.5em" title="explicit : user explicitly/intentionally clicks or activates
503
+ active : Pressed action element state, darkest background with alternate text color to emphasize the action follows immediately.
504
+ " data-dce-id="87">
505
+ <dce-text data-dce-id="88">
506
+ --cem-action-explicit-active-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
507
+ --cem-action-explicit-active-color
508
+ </dce-text>
509
+ </td>
510
+ <td style="
511
+ background-color: var(--cem-action-primary-active-background);
512
+ color: var(--cem-action-primary-active-text);
513
+ font-size:x-small;
514
+ padding:0.5em" title="primary : default, confirmatory, implicit. Triggered by ENTER
515
+ active : Pressed action element state, darkest background with alternate text color to emphasize the action follows immediately.
516
+ " data-dce-id="87-1">
517
+ <dce-text data-dce-id="88">
518
+ --cem-action-primary-active-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
519
+ --cem-action-primary-active-color
520
+ </dce-text>
521
+ </td>
522
+ <td style="
523
+ background-color: var(--cem-action-contextual-active-background);
524
+ color: var(--cem-action-contextual-active-text);
525
+ font-size:x-small;
526
+ padding:0.5em" title="contextual : integrated within a specific context, Toolbar/menu
527
+ active : Pressed action element state, darkest background with alternate text color to emphasize the action follows immediately.
528
+ " data-dce-id="87-2">
529
+ <dce-text data-dce-id="88">
530
+ --cem-action-contextual-active-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
531
+ --cem-action-contextual-active-color
532
+ </dce-text>
533
+ </td>
534
+ <td style="
535
+ background-color: var(--cem-action-alternate-active-background);
536
+ color: var(--cem-action-alternate-active-text);
537
+ font-size:x-small;
538
+ padding:0.5em" title="alternate : triggering not usual alternative flow
539
+ active : Pressed action element state, darkest background with alternate text color to emphasize the action follows immediately.
540
+ " data-dce-id="87-3">
541
+ <dce-text data-dce-id="88">
542
+ --cem-action-alternate-active-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
543
+ --cem-action-alternate-active-color
544
+ </dce-text>
545
+ </td>
546
+ <td style="
547
+ background-color: var(--cem-action-destructive-active-background);
548
+ color: var(--cem-action-destructive-active-text);
549
+ font-size:x-small;
550
+ padding:0.5em" title="destructive : risky, potentially harmful, requires caution
551
+ active : Pressed action element state, darkest background with alternate text color to emphasize the action follows immediately.
552
+ " data-dce-id="87-4">
553
+ <dce-text data-dce-id="88">
554
+ --cem-action-destructive-active-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
555
+ --cem-action-destructive-active-color
556
+ </dce-text>
557
+ </td>
558
+ </tr>
559
+ <tr data-dce-id="78-8">
560
+ <td title=" Element state after active when element should not be used as the result of previous action is still in progress.
561
+ tokens: color outline font marker
562
+ " data-dce-id="79">
563
+ <dce-text data-dce-id="80">pending</dce-text><br data-dce-id="81"><i data-dce-id="82"><dce-text data-dce-id="83">color outline font marker</dce-text><small data-dce-id="84"></small></i>
564
+ </td>
565
+ <td style="
566
+ background-color: var(--cem-action-explicit-pending-background);
567
+ color: var(--cem-action-explicit-pending-text);
568
+ font-size:x-small;
569
+ padding:0.5em" title="explicit : user explicitly/intentionally clicks or activates
570
+ pending : Element state after active when element should not be used as the result of previous action is still in progress.
571
+ " data-dce-id="87">
572
+ <dce-text data-dce-id="88">
573
+ --cem-action-explicit-pending-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
574
+ --cem-action-explicit-pending-color
575
+ </dce-text>
576
+ </td>
577
+ <td style="
578
+ background-color: var(--cem-action-primary-pending-background);
579
+ color: var(--cem-action-primary-pending-text);
580
+ font-size:x-small;
581
+ padding:0.5em" title="primary : default, confirmatory, implicit. Triggered by ENTER
582
+ pending : Element state after active when element should not be used as the result of previous action is still in progress.
583
+ " data-dce-id="87-1">
584
+ <dce-text data-dce-id="88">
585
+ --cem-action-primary-pending-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
586
+ --cem-action-primary-pending-color
587
+ </dce-text>
588
+ </td>
589
+ <td style="
590
+ background-color: var(--cem-action-contextual-pending-background);
591
+ color: var(--cem-action-contextual-pending-text);
592
+ font-size:x-small;
593
+ padding:0.5em" title="contextual : integrated within a specific context, Toolbar/menu
594
+ pending : Element state after active when element should not be used as the result of previous action is still in progress.
595
+ " data-dce-id="87-2">
596
+ <dce-text data-dce-id="88">
597
+ --cem-action-contextual-pending-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
598
+ --cem-action-contextual-pending-color
599
+ </dce-text>
600
+ </td>
601
+ <td style="
602
+ background-color: var(--cem-action-alternate-pending-background);
603
+ color: var(--cem-action-alternate-pending-text);
604
+ font-size:x-small;
605
+ padding:0.5em" title="alternate : triggering not usual alternative flow
606
+ pending : Element state after active when element should not be used as the result of previous action is still in progress.
607
+ " data-dce-id="87-3">
608
+ <dce-text data-dce-id="88">
609
+ --cem-action-alternate-pending-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
610
+ --cem-action-alternate-pending-color
611
+ </dce-text>
612
+ </td>
613
+ <td style="
614
+ background-color: var(--cem-action-destructive-pending-background);
615
+ color: var(--cem-action-destructive-pending-text);
616
+ font-size:x-small;
617
+ padding:0.5em" title="destructive : risky, potentially harmful, requires caution
618
+ pending : Element state after active when element should not be used as the result of previous action is still in progress.
619
+ " data-dce-id="87-4">
620
+ <dce-text data-dce-id="88">
621
+ --cem-action-destructive-pending-background </dce-text><br data-dce-id="89"><dce-text data-dce-id="90">
622
+ --cem-action-destructive-pending-color
623
+ </dce-text>
624
+ </td>
625
+ </tr>
626
+
627
+ </tbody>
628
+
629
+ </table>
630
+ </body>
631
+ </html>