@epa-wg/custom-element-dist 0.0.26 → 0.0.28

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 (216) hide show
  1. package/.storybook/main.ts +2 -2
  2. package/.storybook/preview.ts +1 -1
  3. package/README.md +4 -4
  4. package/bin/vitest/vitest-browser-importmaps.mjs +20 -20
  5. package/coverage/coverage-final.json +22 -22
  6. package/coverage/index.html +26 -26
  7. package/coverage/src/custom-element/coverage.svg +1 -1
  8. package/coverage/src/custom-element/custom-element.js/coverage.svg +1 -1
  9. package/coverage/src/custom-element/custom-element.js.html +662 -380
  10. package/coverage/src/custom-element/demo/index.html +1 -1
  11. package/coverage/src/custom-element/demo/z.js.html +1 -1
  12. package/coverage/src/custom-element/http-request.js.html +12 -12
  13. package/coverage/src/custom-element/index.html +21 -21
  14. package/coverage/src/custom-element/local-storage.js.html +78 -63
  15. package/coverage/src/custom-element/location-element.js.html +4 -4
  16. package/coverage/src/custom-element/module-url.js/coverage.svg +1 -1
  17. package/coverage/src/custom-element/module-url.js.html +16 -10
  18. package/coverage/src/index.html +1 -1
  19. package/coverage/src/mocks/handlers.ts.html +1 -1
  20. package/coverage/src/mocks/index.html +1 -1
  21. package/coverage/src/stories/attributes.test.stories.ts.html +17 -11
  22. package/coverage/src/stories/coverage.svg +1 -1
  23. package/coverage/src/stories/css.test.stories.ts.html +8 -2
  24. package/coverage/src/stories/dom-merge.test.stories.ts.html +17 -11
  25. package/coverage/src/stories/external-template.test.stories.ts.html +13 -10
  26. package/coverage/src/stories/form.test.stories.ts.html +8 -2
  27. package/coverage/src/stories/http-request.stories.ts.html +1 -1
  28. package/coverage/src/stories/index.html +26 -26
  29. package/coverage/src/stories/local-storage.test.stories.ts/coverage.svg +1 -1
  30. package/coverage/src/stories/local-storage.test.stories.ts.html +106 -76
  31. package/coverage/src/stories/location-element.test.stories.ts.html +8 -2
  32. package/coverage/src/stories/module-url.test.stories.ts.html +8 -2
  33. package/coverage/src/stories/set-url.test.stories.ts.html +8 -2
  34. package/coverage/src/stories/slice-events.test.stories.ts.html +8 -2
  35. package/coverage/src/stories/slots.test.stories.ts.html +8 -2
  36. package/coverage/src/stories/testStoryBook.ts.html +12 -12
  37. package/coverage/src/stories/version-select.test.stories.ts.html +8 -2
  38. package/coverage/src/sum.ts.html +1 -1
  39. package/dist/custom-element-BOIPgtxz.js +565 -0
  40. package/dist/custom-element-CUsSENWc.cjs +97 -0
  41. package/dist/custom-element-bundle.cjs +1 -1
  42. package/dist/custom-element-bundle.js +25 -21
  43. package/dist/demo/a.svg +27 -0
  44. package/dist/demo/demo.css +6 -7
  45. package/dist/demo/external-template.html +3 -3
  46. package/dist/demo/npm-versions-demo.html +21 -8
  47. package/dist/demo/npm-versions.html +54 -25
  48. package/dist/demo/s.xml +11 -21
  49. package/dist/demo/s.xslt +16 -74
  50. package/dist/demo/s1.xslt +59 -59
  51. package/dist/demo/ss.html +24 -57
  52. package/dist/demo/z.html +33 -62
  53. package/dist/demo/z.xml +59 -59
  54. package/dist/demo/z1.html +34 -0
  55. package/dist/local-storage-78EivJ_B.cjs +1 -0
  56. package/dist/local-storage-DzmNKzgN.js +66 -0
  57. package/dist/mockServiceWorker.js +1 -1
  58. package/package.json +27 -25
  59. package/public/demo/a.svg +27 -0
  60. package/public/demo/demo.css +6 -7
  61. package/public/demo/external-template.html +3 -3
  62. package/public/demo/npm-versions-demo.html +21 -8
  63. package/public/demo/npm-versions.html +54 -25
  64. package/public/demo/s.xml +11 -21
  65. package/public/demo/s.xslt +16 -74
  66. package/public/demo/s1.xslt +59 -59
  67. package/public/demo/ss.html +24 -57
  68. package/public/demo/z.html +33 -62
  69. package/public/demo/z.xml +59 -59
  70. package/public/demo/z1.html +34 -0
  71. package/public/mockServiceWorker.js +1 -1
  72. package/src/custom-element/custom-element.js +123 -29
  73. package/src/custom-element/demo/a.svg +27 -0
  74. package/src/custom-element/demo/demo.css +6 -7
  75. package/src/custom-element/demo/external-template.html +3 -3
  76. package/src/custom-element/demo/npm-versions-demo.html +21 -8
  77. package/src/custom-element/demo/npm-versions.html +54 -25
  78. package/src/custom-element/demo/s.xml +11 -21
  79. package/src/custom-element/demo/s.xslt +16 -74
  80. package/src/custom-element/demo/s1.xslt +59 -59
  81. package/src/custom-element/demo/ss.html +24 -57
  82. package/src/custom-element/demo/z.html +33 -62
  83. package/src/custom-element/demo/z.xml +59 -59
  84. package/src/custom-element/demo/z1.html +34 -0
  85. package/src/custom-element/ide/web-types-dce.json +1 -1
  86. package/src/custom-element/ide/web-types-xsl.json +1 -1
  87. package/src/custom-element/index.html +19 -2
  88. package/src/custom-element/local-storage.js +19 -14
  89. package/src/custom-element/module-url.js +3 -2
  90. package/src/dce-social-preview.png +0 -0
  91. package/src/material/angular.css +987 -0
  92. package/src/material/components/autocomplete.html +241 -0
  93. package/src/material/components/dropdown.html +115 -0
  94. package/src/material/components/menu.html +235 -0
  95. package/src/material/components.html +109 -0
  96. package/src/material/demo.css +31 -0
  97. package/src/material/index.html +169 -0
  98. package/src/material/material.css +357 -0
  99. package/src/material/theme/README.md +18 -0
  100. package/src/material/theme/semantic.css +112 -0
  101. package/src/mocks/versions.mock.ts +8 -8
  102. package/src/stories/__screenshots__/http-request.test.ts/http-request-url-change-1.png +0 -0
  103. package/src/stories/attributes.test.stories.ts +6 -4
  104. package/src/stories/css.test.stories.ts +2 -0
  105. package/src/stories/dom-merge.test.stories.ts +11 -9
  106. package/src/stories/external-template.test.stories.ts +4 -3
  107. package/src/stories/form.test.stories.ts +2 -0
  108. package/src/stories/local-storage.test.stories.ts +63 -53
  109. package/src/stories/location-element.test.stories.ts +2 -0
  110. package/src/stories/module-url.test.stories.ts +2 -0
  111. package/src/stories/set-url.test.stories.ts +2 -0
  112. package/src/stories/slice-events.test.stories.ts +2 -0
  113. package/src/stories/slots.test.stories.ts +2 -0
  114. package/src/stories/version-select.test.stories.ts +2 -0
  115. package/src/sum.test.ts +5 -5
  116. package/src/sum.ts +3 -3
  117. package/storybook-static/assets/Color-ERTF36HU-ChyYtq0t.js +1 -0
  118. package/storybook-static/assets/Configure-CJVwFVjC.js +165 -0
  119. package/storybook-static/assets/DocsRenderer-CFRXHY34-Bz6q-OqD.js +2 -0
  120. package/storybook-static/assets/{attributes.test.stories-DIQXccHc.js → attributes.test.stories-BJBuuXgZ.js} +13 -14
  121. package/storybook-static/assets/{css.test.stories-BV2hi4CY.js → css.test.stories-pgbBc17d.js} +1 -1
  122. package/storybook-static/assets/custom-element-BDGsYgbP.js +97 -0
  123. package/storybook-static/assets/{dom-merge.test.stories-Dws0C2-g.js → dom-merge.test.stories-CXcYP_-J.js} +26 -24
  124. package/storybook-static/assets/entry-preview-C313OLrj.js +26 -0
  125. package/storybook-static/assets/{entry-preview-docs-BMKNVQXA.js → entry-preview-docs-B7ORr9w5.js} +2 -2
  126. package/storybook-static/assets/{external-template.test.stories-BHO48b0j.js → external-template.test.stories-CpJ68Ghy.js} +19 -20
  127. package/storybook-static/assets/{form.test.stories-dv9mwp24.js → form.test.stories-D35lyqd8.js} +2 -2
  128. package/storybook-static/assets/{handlers-CaCq2ZPF.js → handlers-B-OZtf2K.js} +13 -13
  129. package/storybook-static/assets/{http-request.stories-B2ke7LtS.js → http-request.stories-DccXgHyF.js} +6 -6
  130. package/storybook-static/assets/iframe-Ddc_axoC.js +2 -0
  131. package/storybook-static/assets/index-BSz1w4Gl.js +234 -0
  132. package/storybook-static/assets/index-BdcJ-iJ7.js +8 -0
  133. package/storybook-static/assets/index-CiCdFubk.js +634 -0
  134. package/storybook-static/assets/{index-Dz4OaB2k.js → index-f2MAjm2i.js} +1 -1
  135. package/storybook-static/assets/index-lY6s0fkU.js +1 -0
  136. package/storybook-static/assets/index-tfEkrhWr.js +1 -0
  137. package/storybook-static/assets/local-storage.test.stories-BY-PWhuk.js +420 -0
  138. package/storybook-static/assets/{location-element.test.stories-BiFvBop7.js → location-element.test.stories-3auBYEaU.js} +3 -3
  139. package/storybook-static/assets/{module-url.test.stories-BXoM34tX.js → module-url.test.stories-B7L9cL60.js} +6 -6
  140. package/storybook-static/assets/{preview-0Jj89qip.js → preview-BRPR-UXC.js} +1 -1
  141. package/storybook-static/assets/preview-BUQm51_C.js +52 -0
  142. package/storybook-static/assets/{preview-DB9FwMii.js → preview-BWzBA1C2.js} +1 -1
  143. package/storybook-static/assets/preview-BhhEZcNS.js +1 -0
  144. package/storybook-static/assets/preview-CcS4DQh8.js +1 -0
  145. package/storybook-static/assets/{preview-Cg7hXPRq.js → preview-CfH4_OzN.js} +2 -2
  146. package/storybook-static/assets/{preview-FpHGYA1q.js → preview-DHPc-V4N.js} +1 -1
  147. package/storybook-static/assets/preview-DYzi3Z2p.js +1 -0
  148. package/storybook-static/assets/{preview-4Up_z4Em.js → preview-caVMbCIR.js} +2 -2
  149. package/storybook-static/assets/preview-ncvtW_hb.js +34 -0
  150. package/storybook-static/assets/{set-url.test.stories-Cg5Z0r7x.js → set-url.test.stories-CuSuDLIx.js} +3 -3
  151. package/storybook-static/assets/{slice-events.test.stories-D_ttGp3g.js → slice-events.test.stories-BkRKsKem.js} +4 -4
  152. package/storybook-static/assets/{slots.test.stories-DBNXOm0T.js → slots.test.stories-BJCUWFkE.js} +8 -8
  153. package/storybook-static/assets/{version-select.test.stories-CgV3UCim.js → version-select.test.stories-B3ybJn_Z.js} +2 -2
  154. package/storybook-static/demo/a.svg +27 -0
  155. package/storybook-static/demo/demo.css +6 -7
  156. package/storybook-static/demo/external-template.html +3 -3
  157. package/storybook-static/demo/npm-versions-demo.html +21 -8
  158. package/storybook-static/demo/npm-versions.html +54 -25
  159. package/storybook-static/demo/s.xml +11 -21
  160. package/storybook-static/demo/s.xslt +16 -74
  161. package/storybook-static/demo/s1.xslt +59 -59
  162. package/storybook-static/demo/ss.html +24 -57
  163. package/storybook-static/demo/z.html +33 -62
  164. package/storybook-static/demo/z.xml +59 -59
  165. package/storybook-static/demo/z1.html +34 -0
  166. package/storybook-static/iframe.html +1 -1
  167. package/storybook-static/index.html +3 -7
  168. package/storybook-static/mockServiceWorker.js +1 -1
  169. package/storybook-static/project.json +1 -1
  170. package/storybook-static/sb-addons/essentials-actions-3/manager-bundle.js +1 -1
  171. package/storybook-static/sb-addons/essentials-backgrounds-4/manager-bundle.js +9 -9
  172. package/storybook-static/sb-addons/essentials-controls-2/manager-bundle.js +76 -94
  173. package/storybook-static/sb-addons/essentials-measure-7/manager-bundle.js +1 -1
  174. package/storybook-static/sb-addons/essentials-outline-8/manager-bundle.js +1 -1
  175. package/storybook-static/sb-addons/essentials-toolbars-6/manager-bundle.js +1 -1
  176. package/storybook-static/sb-addons/essentials-viewport-5/manager-bundle.js +1 -1
  177. package/storybook-static/sb-addons/interactions-9/manager-bundle.js +211 -0
  178. package/storybook-static/sb-addons/interactions-9/manager-bundle.js.LEGAL.txt +0 -0
  179. package/storybook-static/sb-manager/globals-module-info.js +11 -0
  180. package/storybook-static/sb-manager/globals-runtime.js +27803 -26928
  181. package/storybook-static/sb-manager/runtime.js +10341 -10136
  182. package/storybook-static/sb-preview/runtime.js +3841 -3828
  183. package/.idea/codeStyles/codeStyleConfig.xml +0 -5
  184. package/.idea/compiler.xml +0 -6
  185. package/.idea/custom-element-dist.iml +0 -13
  186. package/.idea/inspectionProfiles/Project_Default.xml +0 -6
  187. package/.idea/misc.xml +0 -6
  188. package/.idea/modules.xml +0 -8
  189. package/.idea/vcs.xml +0 -6
  190. package/.vscode/settings.json +0 -24
  191. package/dist/custom-element-CckoVsvO.cjs +0 -53
  192. package/dist/custom-element-b7c_7Kz4.js +0 -485
  193. package/dist/local-storage-Boafngui.cjs +0 -1
  194. package/dist/local-storage-BqDEu2kF.js +0 -59
  195. package/storybook-static/assets/Color-KGDBMAHA-CH-YyWYq.js +0 -1
  196. package/storybook-static/assets/Configure-DFL_bm2M.js +0 -173
  197. package/storybook-static/assets/DocsRenderer-PKQXORMH-Bz-_1hmS.js +0 -2
  198. package/storybook-static/assets/custom-element-wn23PUwN.js +0 -231
  199. package/storybook-static/assets/entry-preview-BKQ8UCxI.js +0 -8
  200. package/storybook-static/assets/iframe-D4Sos1HO.js +0 -2
  201. package/storybook-static/assets/index-BnXBQqj9.js +0 -605
  202. package/storybook-static/assets/index-C8k3Z-3Y.js +0 -28
  203. package/storybook-static/assets/index-Cpxqn5iQ.js +0 -1
  204. package/storybook-static/assets/index-DGdNYaqV.js +0 -8
  205. package/storybook-static/assets/index-sm7QlJZE.js +0 -1
  206. package/storybook-static/assets/lit-element-DzhCn-8W.js +0 -19
  207. package/storybook-static/assets/local-storage.test.stories-BpogLNq-.js +0 -419
  208. package/storybook-static/assets/preview-BJPLiuSt.js +0 -1
  209. package/storybook-static/assets/preview-BMWqy4Bi.js +0 -1
  210. package/storybook-static/assets/preview-BnWGZYux.js +0 -1
  211. package/storybook-static/assets/preview-Djh1_Tal.js +0 -20
  212. package/storybook-static/assets/preview-oHxXRSIu.js +0 -48
  213. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js +0 -333
  214. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js.LEGAL.txt +0 -40
  215. package/storybook-static/sb-addons/interactions-10/manager-bundle.js +0 -234
  216. /package/{storybook-static/sb-addons/interactions-10/manager-bundle.js.LEGAL.txt → src/material/guide/getting-started/index.html} +0 -0
package/src/material/components.html ADDED
@@ -0,0 +1,109 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
6
+ <title>Components - custom-element - Material Design</title>
7
+ <link href="../custom-element/demo/wc-square.svg" rel="icon"/>
8
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
9
+ <link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
10
+ integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" rel="stylesheet"/>
11
+
12
+ <script type="importmap">
13
+ {
14
+ "imports": {
15
+ "@epa-wg/": "../"
16
+ }
17
+ }
18
+ </script>
19
+ <script src="../custom-element/module-url.js" type="module"></script>
20
+ <script src="../custom-element/custom-element.js" type="module"></script>
21
+ <style>
22
+ @import "./angular.css";
23
+ @import "./material.css";
24
+ @import "./theme/semantic.css";
25
+ @import "./demo.css";
26
+ main{
27
+ display: flex; flex-wrap: wrap;
28
+ gap: 3rem;
29
+ padding: 5rem;
30
+ &>*{ width: 16rem;}
31
+ &>p{ min-width: 90%; }
32
+ }
33
+ </style>
34
+ </head>
35
+
36
+ <body>
37
+ <custom-element hidden src="./index.html#icon-button" tag="icon-button"></custom-element>
38
+ <custom-element tag="cem-menu" hidden src="./components/menu.html#cem-menu"></custom-element>
39
+
40
+ <header class="cem-theme-teal">
41
+ <custom-element src="./index.html#nav-head" ></custom-element>
42
+ </header>
43
+ <main>
44
+ <p>&lt;custom-element&gt; Material offers a wide variety of UI components based on the
45
+ <a href="https://material.io/components" >Material Design specification</a>.
46
+ </p>
47
+ <custom-element tag="demo-list-card" hidden>
48
+ <template>
49
+ <attribute name="head"></attribute>
50
+ <attribute name="description"></attribute>
51
+ <style>
52
+ &>dce-root
53
+ { display: inline-flex; flex-direction: column;
54
+ transition: background .3s ease;
55
+ border: 1px solid #c4c6d0;
56
+ border-radius: 12px;
57
+ overflow: hidden;
58
+ &>*{padding: 1rem;}
59
+ &>a
60
+ { color: var(--cem-action-secondary-color, black);
61
+ background-color:var(--cem-action-secondary-background, silver);
62
+ transition: background .3s ease;
63
+ transform: translateZ(0);
64
+ &:hover { background-color: var(--cem-action-secondary-background-hover); }
65
+ &:focus { background-color: var(--cem-action-secondary-background-focus); }
66
+ &:focus:active,
67
+ &:active{ background-color: var(--cem-action-secondary-background-active); }
68
+
69
+ &, &:visited { text-decoration: none; }
70
+ h3{ text-transform: capitalize; }
71
+ }
72
+ }
73
+ </style>
74
+ <slot></slot>
75
+ <a href="./components/{$head}.html">
76
+ <h3>{$head}</h3>
77
+ {$description}
78
+ </a>
79
+ </template>
80
+ </custom-element>
81
+
82
+ <demo-list-card head="Menu" description="Vertical or horizontal List of actions: links or buttons">
83
+ <cem-menu direction="row">
84
+ <a href="#">🏠link</a>
85
+ <a disabled>text</a>
86
+ <a href="#">link</a>
87
+ </cem-menu>
88
+ </demo-list-card>
89
+
90
+ <demo-list-card head="autocomplete" description="Suggests relevant options as the user types.">
91
+ <cem-autocomplete placeholder="Greetings" >
92
+ <p>hello</p>
93
+ <p>hi</p>
94
+ </cem-autocomplete>
95
+ </demo-list-card>
96
+ <demo-list-card head="Badge" description="A small value indicator that can be overlaid on another object.">
97
+ <cem-badge placeholder="Greetings" >
98
+ <p>hello</p>
99
+ <p>hi</p>
100
+ </cem-badge>
101
+ </demo-list-card>
102
+ </main>
103
+ <footer>
104
+ <hr/>
105
+ Powered by Syngrafact Corp. ©2024.<br/>
106
+ <a href="../../LICENSE"> Code and documentation licensed under an Apache License 2.0 </a>
107
+ </footer>
108
+ </body>
109
+ </html>
package/src/material/demo.css ADDED
@@ -0,0 +1,31 @@
1
+ body {
2
+ margin: 0;
3
+ }
4
+
5
+ header {
6
+ text-align: center;
7
+
8
+ --mdc-text-button-label-text-color: #005cbb;
9
+ --mat-sidenav-content-background-color: var(--mat-indigo-50, #d7e3ff);
10
+ color: var(--text-color, var(--mat-app-on-background));
11
+ background-color: var(--primary-color, var(--mat-app-background));
12
+ --cem-action-box-shadow:none;
13
+ --cem-action-box-shadow-hover:none;
14
+
15
+ &{ padding: var(--cem-dim-x-small,0.5rem) var(--cem-dim-small,1rem) }
16
+ h1,p{position: relative; z-index: 2;}
17
+ .logo-large{ position: absolute;
18
+ right: var(--cem-dim-x-large);
19
+ height: var(--cem-dim-xxx-large);
20
+ z-index: 1;
21
+ opacity: 0.5;
22
+ }
23
+ }
24
+ footer{ text-align: center;
25
+ a
26
+ { color: var(--text-color, black);
27
+ text-decoration: none;
28
+ &:hover,&:focus{text-decoration: underline;}
29
+ }
30
+ }
31
+ code{ font-size: 125%; font-weight: bold; }
package/src/material/index.html ADDED
@@ -0,0 +1,169 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
6
+ <title>custom-element - Material Design</title>
7
+ <link href="demo/wc-square.svg" rel="icon"/>
8
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
9
+ <link crossorigin="anonymous" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
10
+ integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" rel="stylesheet"/>
11
+
12
+ <script type="importmap">
13
+ {
14
+ "imports": {
15
+ "@epa-wg/": "../"
16
+ }
17
+ }
18
+ </script>
19
+ <script src="../custom-element/module-url.js" type="module"></script>
20
+ <script src="../custom-element/custom-element.js" type="module"></script>
21
+ <style>
22
+ @import "./angular.css";
23
+ @import "./material.css";
24
+ @import "./theme/semantic.css";
25
+ @import "./demo.css";
26
+ </style>
27
+ </head>
28
+
29
+ <body>
30
+
31
+ <template id="icon-button">
32
+ <attribute name="href"></attribute>
33
+ <attribute name="icon"></attribute>
34
+ <attribute aria-description="color appearance. Default value is 'normal'. Values: normal|primary|secondary|alert|blend"
35
+ name="kind"></attribute>
36
+ <style>
37
+ &:not([kind]) a, &[kind="normal"] a {
38
+ /*background-color: var(--mdc-theme-primary, #6200ee);*/
39
+ }
40
+
41
+ a {
42
+ display: inline-flex;
43
+ align-items: center;
44
+ gap: 0.5rem;
45
+ padding: 0.5rem 1rem;;
46
+ border-radius: 1.5rem;
47
+
48
+ background-color: var(--cem-action-primary-background);
49
+ transition: var(--cem-action-transition);
50
+ box-shadow: var(--cem-action-box-shadow);
51
+
52
+ &:hover {
53
+ background-color: var(--cem-action-primary-background-hover);
54
+ box-shadow: var(--cem-action-box-shadow-hover);
55
+ }
56
+
57
+ &:focus {
58
+ background-color: var(--cem-action-primary-background-focus);
59
+ }
60
+
61
+ &:active, &:focus:active {
62
+ background-color: var(--cem-action-primary-background-active);
63
+ }
64
+
65
+ &, &:visited {
66
+ text-decoration: none;
67
+ color: var(--mat-light-blue-900);
68
+ }
69
+
70
+ --icon-size: 2rem;
71
+
72
+ }
73
+
74
+ .icon {
75
+ font-size: var(--icon-size);
76
+ height: var(--icon-size);
77
+ }
78
+
79
+ </style>
80
+ <a href="{$href}">
81
+ <choose>
82
+ <when test="contains($icon,'/')"><img alt="DCE logo" class="icon" src="{$icon}"/></when>
83
+ <when test="contains($icon,'fa-')"><i class="icon {$icon}"></i></when>
84
+ <when test="$icon"><span class="icon material-icons">{$icon}</span></when>
85
+ </choose>
86
+ <slot></slot>
87
+ </a>
88
+ </template>
89
+ <template id="nav-head">
90
+ <style>
91
+ nav {
92
+ display: flex;
93
+ flex-wrap: wrap;
94
+ justify-content: flex-end;
95
+
96
+ spacer {
97
+ flex: 10 10;
98
+ }
99
+
100
+ padding: 0 var(--mat-blue-50, 8px);
101
+
102
+
103
+ --mdc-text-button-label-text-tracking: .006rem;
104
+ --mdc-text-button-label-text-weight: bold;
105
+
106
+ font-size: var(--mdc-text-button-label-text-size, var(--mat-app-label-large-size));
107
+ letter-spacing: var(--mdc-text-button-label-text-tracking, var(--mat-app-label-large-tracking));
108
+ /* text-transform: var(--mdc-text-button-label-text-transform); */
109
+ font-weight: var(--mdc-text-button-label-text-weight, var(--mat-app-label-large-weight));
110
+
111
+ icon-button:first-child {
112
+ align-self: flex-start;
113
+ }
114
+ }
115
+
116
+ section:has(*) {
117
+ display: flex;
118
+ flex-direction: column;
119
+ margin: var(--cem-dim-xxx-large, 4rem);
120
+
121
+ h1 {
122
+ font-size: var(--cem-dim-x-large, 3.5rem);
123
+ text-shadow: var(--primary-color, silver) 0 0 var(--cem-dim-medium);
124
+ }
125
+ }
126
+
127
+ </style>
128
+ <nav>
129
+ <module-url slice="cem-url" src="@epa-wg/material"></module-url>
130
+ <module-url slice="logo-url" src="@epa-wg/custom-element/demo/wc-square.svg"></module-url>
131
+ <icon-button href="{//cem-url}/" icon="{//logo-url}"> custom-element</icon-button>
132
+ <spacer></spacer>
133
+ <icon-button href="{//cem-url}/components.html" kind="normal" title="Select a theme for the documentation"> Components
134
+ </icon-button>
135
+
136
+ <spacer></spacer>
137
+ <icon-button icon="format_color_fill" title="Select a theme for the documentation"> Theme</icon-button>
138
+ <icon-button href="https://github.com/EPA-WG/custom-element-dist/tree/main/src/material"
139
+ icon="fab fa-github" title="GitHub reposotory"> GitHub
140
+ </icon-button>
141
+ </nav>
142
+ <section>
143
+ <slot></slot>
144
+ </section>
145
+ </template>
146
+ <custom-element hidden src="#icon-button" tag="icon-button"></custom-element>
147
+
148
+ <header class="cem-theme-teal">
149
+ <custom-element src="#nav-head">
150
+ <template>
151
+ <img alt="custom-element logo" class="logo-large" src="../custom-element/demo/wc-square.svg"/>
152
+ <h1> <code>&lt;custom-element&gt;</code> Material </h1>
153
+ <p> Material Design components for <a href="https://github.com/EPA-WG/custom-element"><code>custom-element</code></a> </p>
154
+ <icon-button class="cem-theme-default" href="./components.html" title="Select a theme for the documentation">Get
155
+ started
156
+ </icon-button>
157
+ </template>
158
+ </custom-element>
159
+ </header>
160
+ <main>
161
+
162
+ </main>
163
+ <footer>
164
+ <hr/>
165
+ <p>Powered by Syngrafact Corp. ©2024.</p>
166
+ <a href="../../LICENSE"> Code and documentation licensed under an Apache License 2.0 </a>
167
+ </footer>
168
+ </body>
169
+ </html>
package/src/material/material.css ADDED
@@ -0,0 +1,357 @@
1
+ /* https://htmlcolorcodes.com/color-chart/material-design-color-chart/ */
2
+
3
+ :root{
4
+
5
+ /*#region branded colors */
6
+
7
+ /* Red */
8
+ --mat-red : #f44336;
9
+ --mat-red-50 : #ffebee;
10
+ --mat-red-100 : #ffcdd2;
11
+ --mat-red-200 : #ef9a9a;
12
+ --mat-red-300 : #e57373;
13
+ --mat-red-400 : #ef5350;
14
+ --mat-red-500 : #f44336;
15
+ --mat-red-600 : #e53935;
16
+ --mat-red-700 : #d32f2f;
17
+ --mat-red-800 : #c62828;
18
+ --mat-red-900 : #b71c1c;
19
+ --mat-red-a100 : #ff8a80;
20
+ --mat-red-a200 : #ff5252;
21
+ --mat-red-a400 : #ff1744;
22
+ --mat-red-a700 : #d50000;
23
+
24
+ /* Pink */
25
+ --mat-pink : #e91e63;
26
+ --mat-pink-50 : #fce4ec;
27
+ --mat-pink-100 : #f8bbd0;
28
+ --mat-pink-200 : #f48fb1;
29
+ --mat-pink-300 : #f06292;
30
+ --mat-pink-400 : #ec407a;
31
+ --mat-pink-500 : #e91e63;
32
+ --mat-pink-600 : #d81b60;
33
+ --mat-pink-700 : #c2185b;
34
+ --mat-pink-800 : #ad1457;
35
+ --mat-pink-900 : #880e4f;
36
+ --mat-pink-a100 : #ff80ab;
37
+ --mat-pink-a200 : #ff4081;
38
+ --mat-pink-a400 : #f50057;
39
+ --mat-pink-a700 : #c51162;
40
+
41
+ /* Purple */
42
+ --mat-purple : #9c27b0;
43
+ --mat-purple-50 : #f3e5f5;
44
+ --mat-purple-100 : #e1bee7;
45
+ --mat-purple-200 : #ce93d8;
46
+ --mat-purple-300 : #ba68c8;
47
+ --mat-purple-400 : #ab47bc;
48
+ --mat-purple-500 : #9c27b0;
49
+ --mat-purple-600 : #8e24aa;
50
+ --mat-purple-700 : #7b1fa2;
51
+ --mat-purple-800 : #6a1b9a;
52
+ --mat-purple-900 : #4a148c;
53
+ --mat-purple-a100 : #ea80fc;
54
+ --mat-purple-a200 : #e040fb;
55
+ --mat-purple-a400 : #d500f9;
56
+ --mat-purple-a700 : #aa00ff;
57
+
58
+ /* Deep Purple */
59
+ --mat-deep-purple : #673ab7;
60
+ --mat-deep-purple-50 : #ede7f6;
61
+ --mat-deep-purple-100 : #d1c4e9;
62
+ --mat-deep-purple-200 : #b39ddb;
63
+ --mat-deep-purple-300 : #9575cd;
64
+ --mat-deep-purple-400 : #7e57c2;
65
+ --mat-deep-purple-500 : #673ab7;
66
+ --mat-deep-purple-600 : #5e35b1;
67
+ --mat-deep-purple-700 : #512da8;
68
+ --mat-deep-purple-800 : #4527a0;
69
+ --mat-deep-purple-900 : #311b92;
70
+ --mat-deep-purple-a100 : #b388ff;
71
+ --mat-deep-purple-a200 : #7c4dff;
72
+ --mat-deep-purple-a400 : #651fff;
73
+ --mat-deep-purple-a700 : #6200ea;
74
+
75
+ /* Indigo */
76
+ --mat-indigo : #3f51b5;
77
+ --mat-indigo-50 : #e8eaf6;
78
+ --mat-indigo-100 : #c5cae9;
79
+ --mat-indigo-200 : #9fa8da;
80
+ --mat-indigo-300 : #7986cb;
81
+ --mat-indigo-400 : #5c6bc0;
82
+ --mat-indigo-500 : #3f51b5;
83
+ --mat-indigo-600 : #3949ab;
84
+ --mat-indigo-700 : #303f9f;
85
+ --mat-indigo-800 : #283593;
86
+ --mat-indigo-900 : #1a237e;
87
+ --mat-indigo-a100 : #8c9eff;
88
+ --mat-indigo-a200 : #536dfe;
89
+ --mat-indigo-a400 : #3d5afe;
90
+ --mat-indigo-a700 : #304ffe;
91
+
92
+ /* Blue */
93
+ --mat-blue : #2196f3;
94
+ --mat-blue-50 : #e3f2fd;
95
+ --mat-blue-100 : #bbdefb;
96
+ --mat-blue-200 : #90caf9;
97
+ --mat-blue-300 : #64b5f6;
98
+ --mat-blue-400 : #42a5f5;
99
+ --mat-blue-500 : #2196f3;
100
+ --mat-blue-600 : #1e88e5;
101
+ --mat-blue-700 : #1976d2;
102
+ --mat-blue-800 : #1565c0;
103
+ --mat-blue-900 : #0d47a1;
104
+ --mat-blue-a100 : #82b1ff;
105
+ --mat-blue-a200 : #448aff;
106
+ --mat-blue-a400 : #2979ff;
107
+ --mat-blue-a700 : #2962ff;
108
+
109
+ /* Light Blue */
110
+ --mat-light-blue : #03a9f4;
111
+ --mat-light-blue-50 : #e1f5fe;
112
+ --mat-light-blue-100 : #b3e5fc;
113
+ --mat-light-blue-200 : #81d4fa;
114
+ --mat-light-blue-300 : #4fc3f7;
115
+ --mat-light-blue-400 : #29b6f6;
116
+ --mat-light-blue-500 : #03a9f4;
117
+ --mat-light-blue-600 : #039be5;
118
+ --mat-light-blue-700 : #0288d1;
119
+ --mat-light-blue-800 : #0277bd;
120
+ --mat-light-blue-900 : #01579b;
121
+ --mat-light-blue-a100 : #80d8ff;
122
+ --mat-light-blue-a200 : #40c4ff;
123
+ --mat-light-blue-a400 : #00b0ff;
124
+ --mat-light-blue-a700 : #0091ea;
125
+
126
+ /* Cyan */
127
+ --mat-cyan : #00bcd4;
128
+ --mat-cyan-50 : #e0f7fa;
129
+ --mat-cyan-100 : #b2ebf2;
130
+ --mat-cyan-200 : #80deea;
131
+ --mat-cyan-300 : #4dd0e1;
132
+ --mat-cyan-400 : #26c6da;
133
+ --mat-cyan-500 : #00bcd4;
134
+ --mat-cyan-600 : #00acc1;
135
+ --mat-cyan-700 : #0097a7;
136
+ --mat-cyan-800 : #00838f;
137
+ --mat-cyan-900 : #006064;
138
+ --mat-cyan-a100 : #84ffff;
139
+ --mat-cyan-a200 : #18ffff;
140
+ --mat-cyan-a400 : #00e5ff;
141
+ --mat-cyan-a700 : #00b8d4;
142
+
143
+ /* Teal */
144
+ --mat-teal : #009688;
145
+ --mat-teal-50 : #e0f2f1;
146
+ --mat-teal-100 : #b2dfdb;
147
+ --mat-teal-200 : #80cbc4;
148
+ --mat-teal-300 : #4db6ac;
149
+ --mat-teal-400 : #26a69a;
150
+ --mat-teal-500 : #009688;
151
+ --mat-teal-600 : #00897b;
152
+ --mat-teal-700 : #00796b;
153
+ --mat-teal-800 : #00695c;
154
+ --mat-teal-900 : #004d40;
155
+ --mat-teal-a100 : #a7ffeb;
156
+ --mat-teal-a200 : #64ffda;
157
+ --mat-teal-a400 : #1de9b6;
158
+ --mat-teal-a700 : #00bfa5;
159
+
160
+ /* Green */
161
+ --mat-green : #4caf50;
162
+ --mat-green-50 : #e8f5e9;
163
+ --mat-green-100 : #c8e6c9;
164
+ --mat-green-200 : #a5d6a7;
165
+ --mat-green-300 : #81c784;
166
+ --mat-green-400 : #66bb6a;
167
+ --mat-green-500 : #4caf50;
168
+ --mat-green-600 : #43a047;
169
+ --mat-green-700 : #388e3c;
170
+ --mat-green-800 : #2e7d32;
171
+ --mat-green-900 : #1b5e20;
172
+ --mat-green-a100 : #b9f6ca;
173
+ --mat-green-a200 : #69f0ae;
174
+ --mat-green-a400 : #00e676;
175
+ --mat-green-a700 : #00c853;
176
+
177
+ /* Light Green */
178
+ --mat-light-green : #8bc34a;
179
+ --mat-light-green-50 : #f1f8e9;
180
+ --mat-light-green-100 : #dcedc8;
181
+ --mat-light-green-200 : #c5e1a5;
182
+ --mat-light-green-300 : #aed581;
183
+ --mat-light-green-400 : #9ccc65;
184
+ --mat-light-green-500 : #8bc34a;
185
+ --mat-light-green-600 : #7cb342;
186
+ --mat-light-green-700 : #689f38;
187
+ --mat-light-green-800 : #558b2f;
188
+ --mat-light-green-900 : #33691e;
189
+ --mat-light-green-a100 : #ccff90;
190
+ --mat-light-green-a200 : #b2ff59;
191
+ --mat-light-green-a400 : #76ff03;
192
+ --mat-light-green-a700 : #64dd17;
193
+
194
+ /* Lime */
195
+ --mat-lime : #cddc39;
196
+ --mat-lime-50 : #f9fbe7;
197
+ --mat-lime-100 : #f0f4c3;
198
+ --mat-lime-200 : #e6ee9c;
199
+ --mat-lime-300 : #dce775;
200
+ --mat-lime-400 : #d4e157;
201
+ --mat-lime-500 : #cddc39;
202
+ --mat-lime-600 : #c0ca33;
203
+ --mat-lime-700 : #afb42b;
204
+ --mat-lime-800 : #9e9d24;
205
+ --mat-lime-900 : #827717;
206
+ --mat-lime-a100 : #f4ff81;
207
+ --mat-lime-a200 : #eeff41;
208
+ --mat-lime-a400 : #c6ff00;
209
+ --mat-lime-a700 : #aeea00;
210
+
211
+ /* Yellow */
212
+ --mat-yellow : #ffeb3b;
213
+ --mat-yellow-50 : #fffde7;
214
+ --mat-yellow-100 : #fff9c4;
215
+ --mat-yellow-200 : #fff59d;
216
+ --mat-yellow-300 : #fff176;
217
+ --mat-yellow-400 : #ffee58;
218
+ --mat-yellow-500 : #ffeb3b;
219
+ --mat-yellow-600 : #fdd835;
220
+ --mat-yellow-700 : #fbc02d;
221
+ --mat-yellow-800 : #f9a825;
222
+ --mat-yellow-900 : #f57f17;
223
+ --mat-yellow-a100 : #ffff8d;
224
+ --mat-yellow-a200 : #ffff00;
225
+ --mat-yellow-a400 : #ffea00;
226
+ --mat-yellow-a700 : #ffd600;
227
+
228
+ /* Amber */
229
+ --mat-amber : #ffc107;
230
+ --mat-amber-50 : #fff8e1;
231
+ --mat-amber-100 : #ffecb3;
232
+ --mat-amber-200 : #ffe082;
233
+ --mat-amber-300 : #ffd54f;
234
+ --mat-amber-400 : #ffca28;
235
+ --mat-amber-500 : #ffc107;
236
+ --mat-amber-600 : #ffb300;
237
+ --mat-amber-700 : #ffa000;
238
+ --mat-amber-800 : #ff8f00;
239
+ --mat-amber-900 : #ff6f00;
240
+ --mat-amber-a100 : #ffe57f;
241
+ --mat-amber-a200 : #ffd740;
242
+ --mat-amber-a400 : #ffc400;
243
+ --mat-amber-a700 : #ffab00;
244
+
245
+ /* Orange */
246
+ --mat-orange : #ff9800;
247
+ --mat-orange-50 : #fff3e0;
248
+ --mat-orange-100 : #ffe0b2;
249
+ --mat-orange-200 : #ffcc80;
250
+ --mat-orange-300 : #ffb74d;
251
+ --mat-orange-400 : #ffa726;
252
+ --mat-orange-500 : #ff9800;
253
+ --mat-orange-600 : #fb8c00;
254
+ --mat-orange-700 : #f57c00;
255
+ --mat-orange-800 : #ef6c00;
256
+ --mat-orange-900 : #e65100;
257
+ --mat-orange-a100 : #ffd180;
258
+ --mat-orange-a200 : #ffab40;
259
+ --mat-orange-a400 : #ff9100;
260
+ --mat-orange-a700 : #ff6d00;
261
+
262
+ /* Deep Orange */
263
+ --mat-deep-orange : #ff5722;
264
+ --mat-deep-orange-50 : #fbe9e7;
265
+ --mat-deep-orange-100 : #ffccbc;
266
+ --mat-deep-orange-200 : #ffab91;
267
+ --mat-deep-orange-300 : #ff8a65;
268
+ --mat-deep-orange-400 : #ff7043;
269
+ --mat-deep-orange-500 : #ff5722;
270
+ --mat-deep-orange-600 : #f4511e;
271
+ --mat-deep-orange-700 : #e64a19;
272
+ --mat-deep-orange-800 : #d84315;
273
+ --mat-deep-orange-900 : #bf360c;
274
+ --mat-deep-orange-a100 : #ff9e80;
275
+ --mat-deep-orange-a200 : #ff6e40;
276
+ --mat-deep-orange-a400 : #ff3d00;
277
+ --mat-deep-orange-a700 : #dd2c00;
278
+
279
+ /* Brown */
280
+ --mat-brown : #795548;
281
+ --mat-brown-50 : #efebe9;
282
+ --mat-brown-100 : #d7ccc8;
283
+ --mat-brown-200 : #bcaaa4;
284
+ --mat-brown-300 : #a1887f;
285
+ --mat-brown-400 : #8d6e63;
286
+ --mat-brown-500 : #795548;
287
+ --mat-brown-600 : #6d4c41;
288
+ --mat-brown-700 : #5d4037;
289
+ --mat-brown-800 : #4e342e;
290
+ --mat-brown-900 : #3e2723;
291
+
292
+ /* Grey */
293
+ --mat-grey : #9e9e9e;
294
+ --mat-grey-50 : #fafafa;
295
+ --mat-grey-100 : #f5f5f5;
296
+ --mat-grey-200 : #eeeeee;
297
+ --mat-grey-300 : #e0e0e0;
298
+ --mat-grey-400 : #bdbdbd;
299
+ --mat-grey-500 : #9e9e9e;
300
+ --mat-grey-600 : #757575;
301
+ --mat-grey-700 : #616161;
302
+ --mat-grey-800 : #424242;
303
+ --mat-grey-900 : #212121;
304
+
305
+ /* Blue Grey */
306
+ --mat-blue-grey : #607d8b;
307
+ --mat-blue-grey-50 : #eceff1;
308
+ --mat-blue-grey-100 : #cfd8dc;
309
+ --mat-blue-grey-200 : #b0bec5;
310
+ --mat-blue-grey-300 : #90a4ae;
311
+ --mat-blue-grey-400 : #78909c;
312
+ --mat-blue-grey-500 : #607d8b;
313
+ --mat-blue-grey-600 : #546e7a;
314
+ --mat-blue-grey-700 : #455a64;
315
+ --mat-blue-grey-800 : #37474f;
316
+ --mat-blue-grey-900 : #263238;
317
+
318
+ /* White / Black */
319
+ --mat-white : #ffffff;
320
+ --mat-black : #000000;
321
+
322
+ /*#endregion */
323
+ }
324
+
325
+ body {
326
+
327
+ font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
328
+ }
329
+ .material-icons {
330
+ font-family: 'Material Icons';
331
+ font-weight: normal;
332
+ font-style: normal;
333
+ font-size: 1.5rem; /* Preferred icon size */
334
+ display: inline-block;
335
+ line-height: 1;
336
+ text-transform: none;
337
+ letter-spacing: normal;
338
+ word-wrap: normal;
339
+ white-space: nowrap;
340
+ direction: ltr;
341
+
342
+ /* Support for all WebKit browsers. */
343
+ -webkit-font-smoothing: antialiased;
344
+ /* Support for Safari and Chrome. */
345
+ text-rendering: optimizeLegibility;
346
+
347
+ /* Support for Firefox. */
348
+ -moz-osx-font-smoothing: grayscale;
349
+
350
+ /* Support for IE. */
351
+ font-feature-settings: 'liga';
352
+ }
353
+
354
+ .icon-button{
355
+ height: 1.5rem;
356
+ border-radius: 0.5rem;
357
+ }
package/src/material/theme/README.md ADDED
@@ -0,0 +1,18 @@
1
+ # Semantic theming
2
+ Based on https://blog.firsov.net/search/label/Semantic%20Theme
3
+
4
+
5
+ # Line thickness, stroke weight
6
+ [Typography Guide Part 2: Weight and Width](https://creativebeacon.com/typography-guide-part-2-weight-and-width/)
7
+ The different weights can be
8
+ * **xx-light** ultra thin or ultra light,
9
+ * **x-light** extra light,
10
+ * **light**
11
+ * **normal** or roman,
12
+ * **bold**
13
+ * **x-bold** extra bold,
14
+ * **xx-bold** ultra bold or black,
15
+
16
+ # Text Tracking/Spacing
17
+ [wiki](https://en.wikipedia.org/wiki/Letter_spacing),
18
+ [units](https://css-tricks.com/keeping-track-letter-spacing-guidelines/)