@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/dist/demo/s.xslt CHANGED
@@ -13,79 +13,358 @@
13
13
  <xsl:value-of select="."/>
14
14
  </xsl:template>
15
15
  <xsl:template mode="payload" match="attributes">
16
- <xsl:param name="v">
17
- <xsl:choose>
18
- <xsl:when test="//s[//s/event] ">
19
- <xsl:value-of select="//s[//s/event] "/>
20
- </xsl:when>
21
- <xsl:when test=" //attributes/@v ">
22
- <xsl:value-of select=" //attributes/@v "/>
23
- </xsl:when>
24
- <xsl:otherwise>
25
- <xsl:value-of select=" 'def' "/>
26
- </xsl:otherwise>
27
- </xsl:choose>
28
- </xsl:param>
29
16
  <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1">
30
- <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="has-input"
31
- select="count(//s/*) &gt; 0"/>
32
- <xsl:attribute name="v">
33
- <xsl:choose>
34
- <xsl:when test="//s[//s/event] ">
35
- <xsl:value-of select="//s[//s/event] "/>
36
- </xsl:when>
37
- <xsl:when test=" //attributes/@v ">
38
- <xsl:value-of select=" //attributes/@v "/>
39
- </xsl:when>
40
- <xsl:otherwise>
41
- <xsl:value-of select=" 'def' "/>
42
- </xsl:otherwise>
43
- </xsl:choose>
44
- </xsl:attribute>
45
- <dce-text xmlns="" data-dce-id="2">
46
-
47
- //attributes/v='<xsl:value-of select="//attributes/v"/>'
48
- </dce-text>
49
- <br xmlns="" data-dce-id="3"/>
50
- <dce-text xmlns="" data-dce-id="4">
51
- //attributes/@v='<xsl:value-of select="//attributes/@v"/>'
52
- </dce-text>
53
- <br xmlns="" data-dce-id="5"/>
54
- <dce-text xmlns="" data-dce-id="6">
55
- $v='<xsl:value-of select="$v"/>'
56
- </dce-text>
57
- <br xmlns="" data-dce-id="7"/>
58
- <dce-text xmlns="" data-dce-id="8">
59
- //s='<xsl:value-of select="//s"/>'
60
- </dce-text>
61
- <br xmlns="" data-dce-id="9"/>
62
- <dce-text xmlns="" data-dce-id="10">
63
- A='<xsl:value-of select="//s[//s/event] | //attributes/v[not(//s/event)]"/>'
64
- </dce-text>
65
- <br xmlns="" data-dce-id="11"/>
66
- <dce-text xmlns="" data-dce-id="12">
67
- has-input =<xsl:value-of select=" $has-input "/>
68
- </dce-text>
69
- <br xmlns="" data-dce-id="13"/>
70
- <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="in-value">
71
- <xsl:choose>
72
- <xsl:when test="//s/event">
73
- <xsl:value-of select="//s">
74
- </xsl:value-of>
75
- </xsl:when>
76
- <xsl:when test="//attributes/@v">
77
- <xsl:value-of select="//attributes/@v">
78
- </xsl:value-of>
79
- </xsl:when>
80
- <xsl:otherwise>def</xsl:otherwise>
81
- </xsl:choose>
82
- </xsl:variable>
83
- <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="xx"
84
- select="//s[//s/event] ?? //attributes/@v ?? 'def' "/>
85
- <input xmlns="" slice="s" slice-event="input" value="{$in-value}" data-dce-id="14"/>
86
- <dce-text xmlns="" data-dce-id="15">$in-value:<xsl:value-of select="$in-value"/> | $xx:<xsl:value-of
87
- select="$xx"/>
88
- </dce-text>
17
+ <div xmlns="" data-testid="whole-text" data-dce-id="2">
18
+ <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="test-data">
19
+ <h6 id="cem-color-hue-variant" tabindex="-1" data-dce-id="3">cem-color-hue-variant</h6>
20
+ <table data-dce-id="4">
21
+ <thead data-dce-id="5">
22
+ <tr data-dce-id="6">
23
+ <th data-dce-id="7">Token</th>
24
+ <th data-dce-id="8">Hue</th>
25
+ <th data-dce-id="9">Variant</th>
26
+ <th data-dce-id="10">Hex</th>
27
+ <th data-dce-id="11">Label</th>
28
+ <th data-dce-id="12">Intended use</th>
29
+ </tr>
30
+ </thead>
31
+ <tbody data-dce-id="13">
32
+ <tr data-dce-id="14">
33
+ <td data-dce-id="15">
34
+ <code data-dce-id="16">--cem-color-blue-xl</code>
35
+ </td>
36
+ <td data-dce-id="17">blue</td>
37
+ <td data-dce-id="18">xl</td>
38
+ <td data-dce-id="19">
39
+ <code data-dce-id="20">#faf9fd</code>
40
+ </td>
41
+ <td data-dce-id="21">Lightest blue</td>
42
+ <td data-dce-id="22">Comfort/trust emotion (light scene)</td>
43
+ </tr>
44
+ <tr data-dce-id="23">
45
+ <td data-dce-id="24">
46
+ <code data-dce-id="25">--cem-color-blue-l</code>
47
+ </td>
48
+ <td data-dce-id="26">blue</td>
49
+ <td data-dce-id="27">l</td>
50
+ <td data-dce-id="28">
51
+ <code data-dce-id="29">#d7e3ff</code>
52
+ </td>
53
+ <td data-dce-id="30">Light blue</td>
54
+ <td data-dce-id="31">Trust palette, attention semantic</td>
55
+ </tr>
56
+ <tr data-dce-id="32">
57
+ <td data-dce-id="33">
58
+ <code data-dce-id="34">--cem-color-blue-d</code>
59
+ </td>
60
+ <td data-dce-id="35">blue</td>
61
+ <td data-dce-id="36">d</td>
62
+ <td data-dce-id="37">
63
+ <code data-dce-id="38">#002f65</code>
64
+ </td>
65
+ <td data-dce-id="39">Dark blue</td>
66
+ <td data-dce-id="40">Trust palette (dark theme)</td>
67
+ </tr>
68
+ <tr data-dce-id="41">
69
+ <td data-dce-id="42">
70
+ <code data-dce-id="43">--cem-color-blue-xd</code>
71
+ </td>
72
+ <td data-dce-id="44">blue</td>
73
+ <td data-dce-id="45">xd</td>
74
+ <td data-dce-id="46">
75
+ <code data-dce-id="47">#1a1b1f</code>
76
+ </td>
77
+ <td data-dce-id="48">Darkest blue</td>
78
+ <td data-dce-id="49">Comfort/trust emotion (dark scene)</td>
79
+ </tr>
80
+ <tr data-dce-id="50">
81
+ <td data-dce-id="51">
82
+ <code data-dce-id="52">--cem-color-brown-xl</code>
83
+ </td>
84
+ <td data-dce-id="53">brown</td>
85
+ <td data-dce-id="54">xl</td>
86
+ <td data-dce-id="55">
87
+ <code data-dce-id="56">#d7ccc8</code>
88
+ </td>
89
+ <td data-dce-id="57">Extra light brown</td>
90
+ <td data-dce-id="58">Conservative palette (light theme)</td>
91
+ </tr>
92
+ <tr data-dce-id="59">
93
+ <td data-dce-id="60">
94
+ <code data-dce-id="61">--cem-color-brown-l</code>
95
+ </td>
96
+ <td data-dce-id="62">brown</td>
97
+ <td data-dce-id="63">l</td>
98
+ <td data-dce-id="64">
99
+ <code data-dce-id="65">#a1887f</code>
100
+ </td>
101
+ <td data-dce-id="66">Light brown</td>
102
+ <td data-dce-id="67">Conservative emotion, brand-3</td>
103
+ </tr>
104
+ <tr data-dce-id="68">
105
+ <td data-dce-id="69">
106
+ <code data-dce-id="70">--cem-color-brown-d</code>
107
+ </td>
108
+ <td data-dce-id="71">brown</td>
109
+ <td data-dce-id="72">d</td>
110
+ <td data-dce-id="73">
111
+ <code data-dce-id="74">#4e342e</code>
112
+ </td>
113
+ <td data-dce-id="75">Dark brown</td>
114
+ <td data-dce-id="76">Conservative palette (dark theme)</td>
115
+ </tr>
116
+ <tr data-dce-id="77">
117
+ <td data-dce-id="78">
118
+ <code data-dce-id="79">--cem-color-brown-xd</code>
119
+ </td>
120
+ <td data-dce-id="80">brown</td>
121
+ <td data-dce-id="81">xd</td>
122
+ <td data-dce-id="82">
123
+ <code data-dce-id="83">#3e2723</code>
124
+ </td>
125
+ <td data-dce-id="84">Extra dark brown</td>
126
+ <td data-dce-id="85">Conservative palette (dark theme, extreme)</td>
127
+ </tr>
128
+ <tr data-dce-id="86">
129
+ <td data-dce-id="87">
130
+ <code data-dce-id="88">--cem-color-cyan-xl</code>
131
+ </td>
132
+ <td data-dce-id="89">cyan</td>
133
+ <td data-dce-id="90">xl</td>
134
+ <td data-dce-id="91">
135
+ <code data-dce-id="92">#f1fefe</code>
136
+ </td>
137
+ <td data-dce-id="93">Extra light cyan</td>
138
+ <td data-dce-id="94">Used for comfort palette (light scenes)</td>
139
+ </tr>
140
+ <tr data-dce-id="95">
141
+ <td data-dce-id="96">
142
+ <code data-dce-id="97">--cem-color-cyan-l</code>
143
+ </td>
144
+ <td data-dce-id="98">cyan</td>
145
+ <td data-dce-id="99">l</td>
146
+ <td data-dce-id="100">
147
+ <code data-dce-id="101">#00fbfb</code>
148
+ </td>
149
+ <td data-dce-id="102">Light cyan</td>
150
+ <td data-dce-id="103">Calm palette, creativity accent</td>
151
+ </tr>
152
+ <tr data-dce-id="104">
153
+ <td data-dce-id="105">
154
+ <code data-dce-id="106">--cem-color-cyan-d</code>
155
+ </td>
156
+ <td data-dce-id="107">cyan</td>
157
+ <td data-dce-id="108">d</td>
158
+ <td data-dce-id="109">
159
+ <code data-dce-id="110">#006a6a</code>
160
+ </td>
161
+ <td data-dce-id="111">Dark cyan</td>
162
+ <td data-dce-id="112">Calm palette (dark theme)</td>
163
+ </tr>
164
+ <tr data-dce-id="113">
165
+ <td data-dce-id="114">
166
+ <code data-dce-id="115">--cem-color-cyan-xd</code>
167
+ </td>
168
+ <td data-dce-id="116">cyan</td>
169
+ <td data-dce-id="117">xd</td>
170
+ <td data-dce-id="118">
171
+ <code data-dce-id="119">#001010</code>
172
+ </td>
173
+ <td data-dce-id="120">Extra dark cyan</td>
174
+ <td data-dce-id="121">Used for comfort palette (dark scenes)</td>
175
+ </tr>
176
+ <tr data-dce-id="122">
177
+ <td data-dce-id="123">
178
+ <code data-dce-id="124">--cem-color-grey-l</code>
179
+ </td>
180
+ <td data-dce-id="125">grey</td>
181
+ <td data-dce-id="126">l</td>
182
+ <td data-dce-id="127">
183
+ <code data-dce-id="128">#f1f1eb</code>
184
+ </td>
185
+ <td data-dce-id="129">Light grey</td>
186
+ <td data-dce-id="130">Conservative palette, neutral backgrounds</td>
187
+ </tr>
188
+ <tr data-dce-id="131">
189
+ <td data-dce-id="132">
190
+ <code data-dce-id="133">--cem-color-grey-d</code>
191
+ </td>
192
+ <td data-dce-id="134">grey</td>
193
+ <td data-dce-id="135">d</td>
194
+ <td data-dce-id="136">
195
+ <code data-dce-id="137">#1a1c18</code>
196
+ </td>
197
+ <td data-dce-id="138">Dark grey</td>
198
+ <td data-dce-id="139">Conservative palette (dark theme)</td>
199
+ </tr>
200
+ <tr data-dce-id="140">
201
+ <td data-dce-id="141">
202
+ <code data-dce-id="142">--cem-color-orange-xl</code>
203
+ </td>
204
+ <td data-dce-id="143">orange</td>
205
+ <td data-dce-id="144">xl</td>
206
+ <td data-dce-id="145">
207
+ <code data-dce-id="146">#f0f070</code>
208
+ </td>
209
+ <td data-dce-id="147">Extra light yellow</td>
210
+ <td data-dce-id="148">Enthusiasm palette (light theme)</td>
211
+ </tr>
212
+ <tr data-dce-id="149">
213
+ <td data-dce-id="150">
214
+ <code data-dce-id="151">--cem-color-orange-l</code>
215
+ </td>
216
+ <td data-dce-id="152">orange</td>
217
+ <td data-dce-id="153">l</td>
218
+ <td data-dce-id="154">
219
+ <code data-dce-id="155">#ffe082</code>
220
+ </td>
221
+ <td data-dce-id="156">Light orange</td>
222
+ <td data-dce-id="157">Enthusiasm emotion, brand-2</td>
223
+ </tr>
224
+ <tr data-dce-id="158">
225
+ <td data-dce-id="159">
226
+ <code data-dce-id="160">--cem-color-orange-d</code>
227
+ </td>
228
+ <td data-dce-id="161">orange</td>
229
+ <td data-dce-id="162">d</td>
230
+ <td data-dce-id="163">
231
+ <code data-dce-id="164">#723600</code>
232
+ </td>
233
+ <td data-dce-id="165">Dark orange</td>
234
+ <td data-dce-id="166">Enthusiasm hype (dark theme)</td>
235
+ </tr>
236
+ <tr data-dce-id="167">
237
+ <td data-dce-id="168">
238
+ <code data-dce-id="169">--cem-color-orange-xd</code>
239
+ </td>
240
+ <td data-dce-id="170">orange</td>
241
+ <td data-dce-id="171">xd</td>
242
+ <td data-dce-id="172">
243
+ <code data-dce-id="173">#502400</code>
244
+ </td>
245
+ <td data-dce-id="174">Extra dark orange</td>
246
+ <td data-dce-id="175">Enthusiasm palette (dark theme, extreme)</td>
247
+ </tr>
248
+ <tr data-dce-id="176">
249
+ <td data-dce-id="177">
250
+ <code data-dce-id="178">--cem-color-purple-xl</code>
251
+ </td>
252
+ <td data-dce-id="179">purple</td>
253
+ <td data-dce-id="180">xl</td>
254
+ <td data-dce-id="181">
255
+ <code data-dce-id="182">#f3e5f5</code>
256
+ </td>
257
+ <td data-dce-id="183">Extra light purple</td>
258
+ <td data-dce-id="184">Creativity palette (light theme)</td>
259
+ </tr>
260
+ <tr data-dce-id="185">
261
+ <td data-dce-id="186">
262
+ <code data-dce-id="187">--cem-color-purple-l</code>
263
+ </td>
264
+ <td data-dce-id="188">purple</td>
265
+ <td data-dce-id="189">l</td>
266
+ <td data-dce-id="190">
267
+ <code data-dce-id="191">#e1bee7</code>
268
+ </td>
269
+ <td data-dce-id="192">Light purple</td>
270
+ <td data-dce-id="193">Creativity emotion, brand-1</td>
271
+ </tr>
272
+ <tr data-dce-id="194">
273
+ <td data-dce-id="195">
274
+ <code data-dce-id="196">--cem-color-purple-d</code>
275
+ </td>
276
+ <td data-dce-id="197">purple</td>
277
+ <td data-dce-id="198">d</td>
278
+ <td data-dce-id="199">
279
+ <code data-dce-id="200">#6a1b9a</code>
280
+ </td>
281
+ <td data-dce-id="201">Dark purple</td>
282
+ <td data-dce-id="202">Creativity palette (dark theme)</td>
283
+ </tr>
284
+ <tr data-dce-id="203">
285
+ <td data-dce-id="204">
286
+ <code data-dce-id="205">--cem-color-purple-xd</code>
287
+ </td>
288
+ <td data-dce-id="206">purple</td>
289
+ <td data-dce-id="207">xd</td>
290
+ <td data-dce-id="208">
291
+ <code data-dce-id="209">#4a148c</code>
292
+ </td>
293
+ <td data-dce-id="210">Extra dark purple</td>
294
+ <td data-dce-id="211">Creativity palette (dark theme, extreme)</td>
295
+ </tr>
296
+ <tr data-dce-id="212">
297
+ <td data-dce-id="213">
298
+ <code data-dce-id="214">--cem-color-red-xl</code>
299
+ </td>
300
+ <td data-dce-id="215">red</td>
301
+ <td data-dce-id="216">xl</td>
302
+ <td data-dce-id="217">
303
+ <code data-dce-id="218">#ffb4ab</code>
304
+ </td>
305
+ <td data-dce-id="219">Extra light red</td>
306
+ <td data-dce-id="220">Danger palette (light theme)</td>
307
+ </tr>
308
+ <tr data-dce-id="221">
309
+ <td data-dce-id="222">
310
+ <code data-dce-id="223">--cem-color-red-l</code>
311
+ </td>
312
+ <td data-dce-id="224">red</td>
313
+ <td data-dce-id="225">l</td>
314
+ <td data-dce-id="226">
315
+ <code data-dce-id="227">#ba1a1a</code>
316
+ </td>
317
+ <td data-dce-id="228">Light red</td>
318
+ <td data-dce-id="229">Danger emotion, alert semantic</td>
319
+ </tr>
320
+ <tr data-dce-id="230">
321
+ <td data-dce-id="231">
322
+ <code data-dce-id="232">--cem-color-red-d</code>
323
+ </td>
324
+ <td data-dce-id="233">red</td>
325
+ <td data-dce-id="234">d</td>
326
+ <td data-dce-id="235">
327
+ <code data-dce-id="236">#690005</code>
328
+ </td>
329
+ <td data-dce-id="237">Dark red</td>
330
+ <td data-dce-id="238">Danger palette (dark theme)</td>
331
+ </tr>
332
+ <tr data-dce-id="239">
333
+ <td data-dce-id="240">
334
+ <code data-dce-id="241">--cem-color-red-xd</code>
335
+ </td>
336
+ <td data-dce-id="242">red</td>
337
+ <td data-dce-id="243">xd</td>
338
+ <td data-dce-id="244">
339
+ <code data-dce-id="245">#410002</code>
340
+ </td>
341
+ <td data-dce-id="246">Extra dark red</td>
342
+ <td data-dce-id="247">Danger palette (dark theme, extreme)</td>
343
+ </tr>
344
+ </tbody>
345
+ </table>
346
+ </xsl:variable>
347
+ <label data-dce-id="248">
348
+ <input type="checkbox" data-testid="toggle-all" slice="show-all" value="ALL" data-dce-id="249"/>
349
+ <dce-text data-dce-id="250">ALL</dce-text>
350
+ </label>
351
+ <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="cem-color-hue-variant"
352
+ select="exsl:node-set($test-data)//*[@id='cem-color-hue-variant']/following-sibling::table[1]/tbody"/>
353
+ <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="all-or-nothing"
354
+ select="$cem-color-hue-variant[ //show-all = 'ALL' ]">
355
+ <dce-text data-dce-id="251">
356
+ 0
357
+ </dce-text>
358
+ <xsl:for-each select="$all-or-nothing/*">
359
+ <div data-testid="color-{position()}" data-dce-id="252">
360
+ <xsl:value-of select="./*[1]"/>
361
+ </div>
362
+ </xsl:for-each>
363
+ <dce-text data-dce-id="253">
364
+ N
365
+ </dce-text>
366
+ </xsl:variable>
367
+ </div>
89
368
  </dce-root>
90
369
  </xsl:template>
91
370
  <xsl:template match="/">