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

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 (317) hide show
  1. package/.storybook/main.ts +19 -21
  2. package/.storybook/preview-head.html +8 -0
  3. package/.storybook/preview.ts +13 -5
  4. package/README.md +4 -4
  5. package/bin/postinstall.sh +3 -2
  6. package/bin/vitest/vitest-browser-importmaps.mjs +20 -0
  7. package/coverage/coverage-final.json +13 -8
  8. package/coverage/index.html +51 -36
  9. package/coverage/src/custom-element/coverage.svg +1 -1
  10. package/coverage/src/custom-element/custom-element.js/coverage.svg +1 -1
  11. package/coverage/src/custom-element/custom-element.js.html +493 -406
  12. package/coverage/src/custom-element/demo/coverage.svg +10 -0
  13. package/coverage/src/custom-element/demo/index.html +116 -0
  14. package/coverage/src/custom-element/demo/z.js/coverage.svg +10 -0
  15. package/coverage/src/custom-element/demo/z.js.html +112 -0
  16. package/coverage/src/custom-element/http-request.js.html +12 -12
  17. package/coverage/src/custom-element/index.html +37 -22
  18. package/coverage/src/custom-element/local-storage.js.html +1 -1
  19. package/coverage/src/custom-element/location-element.js/coverage.svg +1 -1
  20. package/coverage/src/custom-element/location-element.js.html +116 -47
  21. package/coverage/src/custom-element/module-url.js/coverage.svg +10 -0
  22. package/coverage/src/custom-element/module-url.js.html +181 -0
  23. package/coverage/src/index.html +1 -1
  24. package/coverage/src/mocks/coverage.svg +1 -1
  25. package/coverage/src/mocks/handlers.ts/coverage.svg +1 -1
  26. package/coverage/src/mocks/handlers.ts.html +36 -12
  27. package/coverage/src/mocks/index.html +19 -19
  28. package/coverage/src/stories/attributes.test.stories.ts.html +6 -9
  29. package/coverage/src/stories/coverage.svg +1 -1
  30. package/coverage/src/stories/css.test.stories.ts.html +1 -1
  31. package/coverage/src/stories/dom-merge.test.stories.ts.html +1 -1
  32. package/coverage/src/stories/external-template.test.stories.ts.html +22 -10
  33. package/coverage/src/stories/form.test.stories.ts.html +1 -1
  34. package/coverage/src/stories/http-request.stories.ts.html +1 -1
  35. package/coverage/src/stories/index.html +58 -13
  36. package/coverage/src/stories/local-storage.test.stories.ts.html +1 -1
  37. package/coverage/src/stories/location-element.test.stories.ts.html +1 -1
  38. package/coverage/src/stories/module-url.test.stories.ts/coverage.svg +10 -0
  39. package/coverage/src/stories/module-url.test.stories.ts.html +634 -0
  40. package/coverage/src/stories/set-url.test.stories.ts/coverage.svg +10 -0
  41. package/coverage/src/stories/set-url.test.stories.ts.html +427 -0
  42. package/coverage/src/stories/slice-events.test.stories.ts.html +1 -1
  43. package/coverage/src/stories/slots.test.stories.ts.html +1 -1
  44. package/coverage/src/stories/testStoryBook.ts.html +12 -12
  45. package/coverage/src/stories/version-select.test.stories.ts/coverage.svg +10 -0
  46. package/coverage/src/stories/version-select.test.stories.ts.html +391 -0
  47. package/coverage/src/sum.ts.html +1 -1
  48. package/dist/confused.svg +1 -0
  49. package/dist/custom-element-CckoVsvO.cjs +53 -0
  50. package/dist/custom-element-b7c_7Kz4.js +485 -0
  51. package/dist/custom-element-bundle.cjs +1 -1
  52. package/dist/custom-element-bundle.js +3 -3
  53. package/dist/demo/a.html +60 -0
  54. package/dist/demo/b.html +13 -0
  55. package/dist/demo/confused.svg +38 -0
  56. package/dist/demo/data-slices.html +216 -0
  57. package/dist/demo/dce-social-preview.png +0 -0
  58. package/dist/demo/demo.css +26 -0
  59. package/dist/demo/dom-merge.html +123 -0
  60. package/dist/demo/embed-1.html +2 -0
  61. package/dist/demo/external-template.html +239 -0
  62. package/dist/demo/form.html +239 -0
  63. package/dist/demo/hex-grid-dce.html +183 -0
  64. package/dist/demo/hex-grid-transform.png +0 -0
  65. package/dist/demo/hex-grid.html +66 -0
  66. package/dist/demo/html-template.html +126 -0
  67. package/dist/demo/html-template.xhtml +45 -0
  68. package/dist/demo/html-template.xml +45 -0
  69. package/dist/demo/http-request.html +143 -0
  70. package/dist/demo/lib-dir/Smiley.svg +24 -0
  71. package/dist/demo/lib-dir/embed-lib.html +34 -0
  72. package/dist/demo/local-storage.html +218 -0
  73. package/dist/demo/location-element.html +168 -0
  74. package/dist/demo/logo.png +0 -0
  75. package/dist/demo/module-url.html +215 -0
  76. package/dist/demo/npm-versions-demo.html +105 -0
  77. package/dist/demo/npm-versions.html +65 -0
  78. package/dist/demo/parameters.html +70 -0
  79. package/dist/demo/s.xml +28 -0
  80. package/dist/demo/s.xslt +97 -0
  81. package/dist/demo/s1.xslt +60 -0
  82. package/dist/demo/scoped-css.html +169 -0
  83. package/dist/demo/set-url.html +141 -0
  84. package/dist/demo/ss.html +57 -0
  85. package/dist/demo/table.xml +25 -0
  86. package/dist/demo/table.xsl +293 -0
  87. package/dist/demo/template.xsl +46 -0
  88. package/dist/demo/tree.xml +25 -0
  89. package/dist/demo/tree.xsl +33 -0
  90. package/dist/demo/wc-square.svg +1 -0
  91. package/dist/demo/xhtml-template.xhtml +45 -0
  92. package/dist/demo/z.html +62 -0
  93. package/dist/demo/z.js +9 -0
  94. package/dist/demo/z.xml +60 -0
  95. package/dist/embed-1.html +1 -2
  96. package/dist/location-element-DRB7hCwA.cjs +1 -0
  97. package/dist/location-element-FJlONi2n.js +65 -0
  98. package/dist/mockServiceWorker.js +1 -1
  99. package/package.json +93 -93
  100. package/public/confused.svg +1 -0
  101. package/public/demo/a.html +60 -0
  102. package/public/demo/b.html +13 -0
  103. package/public/demo/confused.svg +38 -0
  104. package/public/demo/data-slices.html +216 -0
  105. package/public/demo/dce-social-preview.png +0 -0
  106. package/public/demo/demo.css +26 -0
  107. package/public/demo/dom-merge.html +123 -0
  108. package/public/demo/embed-1.html +2 -0
  109. package/public/demo/external-template.html +239 -0
  110. package/public/demo/form.html +239 -0
  111. package/public/demo/hex-grid-dce.html +183 -0
  112. package/public/demo/hex-grid-transform.png +0 -0
  113. package/public/demo/hex-grid.html +66 -0
  114. package/public/demo/html-template.html +126 -0
  115. package/public/demo/html-template.xhtml +45 -0
  116. package/public/demo/html-template.xml +45 -0
  117. package/public/demo/http-request.html +143 -0
  118. package/public/demo/lib-dir/Smiley.svg +24 -0
  119. package/public/demo/lib-dir/embed-lib.html +34 -0
  120. package/public/demo/local-storage.html +218 -0
  121. package/public/demo/location-element.html +168 -0
  122. package/public/demo/logo.png +0 -0
  123. package/public/demo/module-url.html +215 -0
  124. package/public/demo/npm-versions-demo.html +105 -0
  125. package/public/demo/npm-versions.html +65 -0
  126. package/public/demo/parameters.html +70 -0
  127. package/public/demo/s.xml +28 -0
  128. package/public/demo/s.xslt +97 -0
  129. package/public/demo/s1.xslt +60 -0
  130. package/public/demo/scoped-css.html +169 -0
  131. package/public/demo/set-url.html +141 -0
  132. package/public/demo/ss.html +57 -0
  133. package/public/demo/table.xml +25 -0
  134. package/public/demo/table.xsl +293 -0
  135. package/public/demo/template.xsl +46 -0
  136. package/public/demo/tree.xml +25 -0
  137. package/public/demo/tree.xsl +33 -0
  138. package/public/demo/wc-square.svg +1 -0
  139. package/public/demo/xhtml-template.xhtml +45 -0
  140. package/public/demo/z.html +62 -0
  141. package/public/demo/z.js +9 -0
  142. package/public/demo/z.xml +60 -0
  143. package/public/embed-1.html +1 -2
  144. package/public/mockServiceWorker.js +1 -1
  145. package/src/custom-element/custom-element.js +52 -23
  146. package/src/custom-element/demo/confused.svg +1 -0
  147. package/src/custom-element/demo/demo.css +5 -1
  148. package/src/custom-element/demo/embed-1.html +1 -2
  149. package/src/custom-element/demo/external-template.html +122 -62
  150. package/src/custom-element/demo/lib-dir/Smiley.svg +24 -0
  151. package/src/custom-element/demo/lib-dir/embed-lib.html +34 -0
  152. package/src/custom-element/demo/location-element.html +17 -4
  153. package/src/custom-element/demo/module-url.html +215 -0
  154. package/src/custom-element/demo/npm-versions-demo.html +105 -0
  155. package/src/custom-element/demo/npm-versions.html +65 -0
  156. package/src/custom-element/demo/s.xml +27 -10
  157. package/src/custom-element/demo/s.xslt +96 -59
  158. package/src/custom-element/demo/set-url.html +141 -0
  159. package/src/custom-element/demo/z.js +9 -0
  160. package/src/custom-element/ide/customData-dce.json +215 -125
  161. package/src/custom-element/ide/web-types-dce.json +184 -116
  162. package/src/custom-element/ide/web-types-xsl.json +1 -1
  163. package/src/custom-element/index.html +3 -1
  164. package/src/custom-element/location-element.js +25 -2
  165. package/src/custom-element/module-url.js +33 -0
  166. package/src/custom-element.test.ts +26 -26
  167. package/src/mocks/handlers.ts +10 -1
  168. package/src/mocks/versions.mock.ts +786 -0
  169. package/src/stories/attributes.test.stories.ts +0 -1
  170. package/src/stories/external-template.test.stories.ts +11 -7
  171. package/src/stories/module-url.test.stories.ts +183 -0
  172. package/src/stories/set-url.test.stories.ts +114 -0
  173. package/src/stories/version-select.test.stories.ts +102 -0
  174. package/storybook-static/assets/Color-KGDBMAHA-CH-YyWYq.js +1 -0
  175. package/storybook-static/assets/{Configure-CyLVkwlf.js → Configure-DFL_bm2M.js} +2 -2
  176. package/storybook-static/assets/DocsRenderer-PKQXORMH-Bz-_1hmS.js +2 -0
  177. package/storybook-static/assets/{attributes.test.stories-BckCcyrF.js → attributes.test.stories-DIQXccHc.js} +2 -3
  178. package/storybook-static/assets/{css.test.stories-B-QcObCF.js → css.test.stories-BV2hi4CY.js} +1 -1
  179. package/storybook-static/assets/custom-element-wn23PUwN.js +231 -0
  180. package/storybook-static/assets/{dom-merge.test.stories-CjXhjTQY.js → dom-merge.test.stories-Dws0C2-g.js} +1 -1
  181. package/storybook-static/assets/{entry-preview-DrgzXgwT.js → entry-preview-BKQ8UCxI.js} +1 -1
  182. package/storybook-static/assets/{entry-preview-docs-Bxv0qQWs.js → entry-preview-docs-BMKNVQXA.js} +2 -2
  183. package/storybook-static/assets/{external-template.test.stories-BBqyi0az.js → external-template.test.stories-BHO48b0j.js} +19 -16
  184. package/storybook-static/assets/{form.test.stories-DsIo1B4n.js → form.test.stories-dv9mwp24.js} +1 -1
  185. package/storybook-static/assets/handlers-CaCq2ZPF.js +467 -0
  186. package/storybook-static/assets/http-request-DNq59pnj.js +1 -0
  187. package/storybook-static/assets/http-request.stories-B2ke7LtS.js +281 -0
  188. package/storybook-static/assets/iframe-D4Sos1HO.js +2 -0
  189. package/storybook-static/assets/index-BnXBQqj9.js +605 -0
  190. package/storybook-static/assets/index-C8k3Z-3Y.js +28 -0
  191. package/storybook-static/assets/index-Cpxqn5iQ.js +1 -0
  192. package/storybook-static/assets/{index-DXimoRZY.js → index-D-8MO0q_.js} +1 -1
  193. package/storybook-static/assets/index-DGdNYaqV.js +8 -0
  194. package/storybook-static/assets/index-Dz4OaB2k.js +1 -0
  195. package/storybook-static/assets/index-sm7QlJZE.js +1 -0
  196. package/storybook-static/assets/lit-element-DzhCn-8W.js +19 -0
  197. package/storybook-static/assets/{local-storage.test.stories-Cs2v3QTS.js → local-storage.test.stories-BpogLNq-.js} +1 -1
  198. package/storybook-static/assets/location-element-hKpcXCdn.js +1 -0
  199. package/storybook-static/assets/{location-element.test.stories-WkrQDzJJ.js → location-element.test.stories-BiFvBop7.js} +9 -9
  200. package/storybook-static/assets/module-url.test.stories-BXoM34tX.js +208 -0
  201. package/storybook-static/assets/{preview-BKCN0mOr.js → preview-0Jj89qip.js} +1 -1
  202. package/storybook-static/assets/{preview-TCN6m6T-.js → preview-BJPLiuSt.js} +1 -1
  203. package/storybook-static/assets/{preview-BDY5ThwJ.js → preview-BMWqy4Bi.js} +1 -1
  204. package/storybook-static/assets/preview-BnWGZYux.js +1 -0
  205. package/storybook-static/assets/preview-Cg7hXPRq.js +2 -0
  206. package/storybook-static/assets/{preview-BAz7FMXc.js → preview-DB9FwMii.js} +1 -1
  207. package/storybook-static/assets/preview-Djh1_Tal.js +20 -0
  208. package/storybook-static/assets/{preview-DRnyIGXK.js → preview-oHxXRSIu.js} +15 -15
  209. package/storybook-static/assets/set-url.test.stories-Cg5Z0r7x.js +81 -0
  210. package/storybook-static/assets/{slice-events.test.stories-BRBBc0JT.js → slice-events.test.stories-D_ttGp3g.js} +1 -1
  211. package/storybook-static/assets/{slots.test.stories-r-i91k3y.js → slots.test.stories-DBNXOm0T.js} +1 -1
  212. package/storybook-static/assets/version-select.test.stories-CgV3UCim.js +109 -0
  213. package/storybook-static/confused.svg +1 -0
  214. package/storybook-static/demo/a.html +60 -0
  215. package/storybook-static/demo/b.html +13 -0
  216. package/storybook-static/demo/confused.svg +38 -0
  217. package/storybook-static/demo/data-slices.html +216 -0
  218. package/storybook-static/demo/dce-social-preview.png +0 -0
  219. package/storybook-static/demo/demo.css +26 -0
  220. package/storybook-static/demo/dom-merge.html +123 -0
  221. package/storybook-static/demo/embed-1.html +2 -0
  222. package/storybook-static/demo/external-template.html +239 -0
  223. package/storybook-static/demo/form.html +239 -0
  224. package/storybook-static/demo/hex-grid-dce.html +183 -0
  225. package/storybook-static/demo/hex-grid-transform.png +0 -0
  226. package/storybook-static/demo/hex-grid.html +66 -0
  227. package/storybook-static/demo/html-template.html +126 -0
  228. package/storybook-static/demo/html-template.xhtml +45 -0
  229. package/storybook-static/demo/html-template.xml +45 -0
  230. package/storybook-static/demo/http-request.html +143 -0
  231. package/storybook-static/demo/lib-dir/Smiley.svg +24 -0
  232. package/storybook-static/demo/lib-dir/embed-lib.html +34 -0
  233. package/storybook-static/demo/local-storage.html +218 -0
  234. package/storybook-static/demo/location-element.html +168 -0
  235. package/storybook-static/demo/logo.png +0 -0
  236. package/storybook-static/demo/module-url.html +215 -0
  237. package/storybook-static/demo/npm-versions-demo.html +105 -0
  238. package/storybook-static/demo/npm-versions.html +65 -0
  239. package/storybook-static/demo/parameters.html +70 -0
  240. package/storybook-static/demo/s.xml +28 -0
  241. package/storybook-static/demo/s.xslt +97 -0
  242. package/storybook-static/demo/s1.xslt +60 -0
  243. package/storybook-static/demo/scoped-css.html +169 -0
  244. package/storybook-static/demo/set-url.html +141 -0
  245. package/storybook-static/demo/ss.html +57 -0
  246. package/storybook-static/demo/table.xml +25 -0
  247. package/storybook-static/demo/table.xsl +293 -0
  248. package/storybook-static/demo/template.xsl +46 -0
  249. package/storybook-static/demo/tree.xml +25 -0
  250. package/storybook-static/demo/tree.xsl +33 -0
  251. package/storybook-static/demo/wc-square.svg +1 -0
  252. package/storybook-static/demo/xhtml-template.xhtml +45 -0
  253. package/storybook-static/demo/z.html +62 -0
  254. package/storybook-static/demo/z.js +9 -0
  255. package/storybook-static/demo/z.xml +60 -0
  256. package/storybook-static/embed-1.html +1 -2
  257. package/storybook-static/favicon.svg +1 -7
  258. package/storybook-static/iframe.html +42 -30
  259. package/storybook-static/index.html +36 -18
  260. package/storybook-static/index.json +1 -1
  261. package/storybook-static/mockServiceWorker.js +1 -1
  262. package/storybook-static/nunito-sans-bold-italic.woff2 +0 -0
  263. package/storybook-static/nunito-sans-bold.woff2 +0 -0
  264. package/storybook-static/nunito-sans-italic.woff2 +0 -0
  265. package/storybook-static/nunito-sans-regular.woff2 +0 -0
  266. package/storybook-static/project.json +1 -1
  267. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js +32 -32
  268. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js.LEGAL.txt +1 -1
  269. package/storybook-static/sb-addons/essentials-actions-3/manager-bundle.js +1 -1
  270. package/storybook-static/sb-addons/essentials-controls-2/manager-bundle.js +395 -43
  271. package/storybook-static/sb-addons/essentials-controls-2/manager-bundle.js.LEGAL.txt +0 -18
  272. package/storybook-static/sb-addons/essentials-viewport-5/manager-bundle.js +1 -1
  273. package/storybook-static/sb-addons/interactions-10/manager-bundle.js +221 -22
  274. package/storybook-static/sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js +3 -0
  275. package/storybook-static/sb-common-assets/favicon.svg +1 -0
  276. package/storybook-static/sb-manager/globals-module-info.js +995 -1
  277. package/storybook-static/sb-manager/globals-runtime.js +53525 -1
  278. package/storybook-static/sb-manager/globals.js +48 -1
  279. package/storybook-static/sb-manager/runtime.js +11884 -1
  280. package/storybook-static/sb-preview/globals.js +33 -1
  281. package/storybook-static/sb-preview/runtime.js +9437 -108
  282. package/vite.config.js +2 -1
  283. package/dist/custom-element-BDK7dcJN.cjs +0 -53
  284. package/dist/custom-element-DqtzLkTG.js +0 -471
  285. package/dist/location-element-2m0gWq_d.cjs +0 -1
  286. package/dist/location-element-nA_wsqBt.js +0 -49
  287. package/storybook-static/assets/Color-PRSJMWNM-y4ZsI1hY.js +0 -1
  288. package/storybook-static/assets/DocsRenderer-K4EAMTCU-VRGUwRrq.js +0 -2
  289. package/storybook-static/assets/WithTooltip-KJL26V4Q-xdXH9Ztt.js +0 -1
  290. package/storybook-static/assets/custom-element-BIxkVg7K.js +0 -219
  291. package/storybook-static/assets/formatter-2WMMO6ZP-CThVcQxM.js +0 -58
  292. package/storybook-static/assets/http-request.stories-sXA_Y-VM.js +0 -300
  293. package/storybook-static/assets/iframe-DcDTQOmA.js +0 -2
  294. package/storybook-static/assets/index-CUFHd5VD.js +0 -1
  295. package/storybook-static/assets/index-CVRyq5ci.js +0 -27
  296. package/storybook-static/assets/index-Cc7K62zD.js +0 -3
  297. package/storybook-static/assets/index-DPPi9iZu.js +0 -548
  298. package/storybook-static/assets/index-DuIEV_9C.js +0 -13
  299. package/storybook-static/assets/index-VWixWKZ7.js +0 -1
  300. package/storybook-static/assets/lit-element-CenEXOuS.js +0 -19
  301. package/storybook-static/assets/preview-B4GcaC1c.js +0 -1
  302. package/storybook-static/assets/preview-B63p-W8V.js +0 -20
  303. package/storybook-static/assets/preview-p-Bwze-K.js +0 -2
  304. package/storybook-static/assets/syntaxhighlighter-BP7B2CQK-OnioRcs9.js +0 -1
  305. package/storybook-static/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +0 -3
  306. package/storybook-static/sb-common-assets/fonts.css +0 -31
  307. package/storybook-static/sb-manager/WithTooltip-KJL26V4Q-5LS5AN27.js +0 -1
  308. package/storybook-static/sb-manager/chunk-B3YDJJJH.js +0 -347
  309. package/storybook-static/sb-manager/chunk-BLWCBWKL.js +0 -9
  310. package/storybook-static/sb-manager/chunk-GUVK2GTO.js +0 -6
  311. package/storybook-static/sb-manager/chunk-LFRML3ZV.js +0 -186
  312. package/storybook-static/sb-manager/chunk-MC7RAF2B.js +0 -274
  313. package/storybook-static/sb-manager/chunk-ZR5JZWHI.js +0 -1
  314. package/storybook-static/sb-manager/formatter-2WMMO6ZP-JI7RHVTW.js +0 -58
  315. package/storybook-static/sb-manager/index.js +0 -1
  316. package/storybook-static/sb-manager/syntaxhighlighter-BP7B2CQK-WOJYHKQR.js +0 -1
  317. /package/storybook-static/sb-addons/{storybook-core-server-presets-0 → storybook-core-core-server-presets-0}/common-manager-bundle.js.LEGAL.txt +0 -0
package/dist/demo/form.html ADDED
@@ -0,0 +1,239 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
+ <title>Forms - Declarative Custom Element implementation demo</title>
6
+ <link rel="icon" href="./wc-square.svg"/>
7
+
8
+ <script type="module" src="../local-storage.js"></script>
9
+ <script type="module" src="../custom-element.js"></script>
10
+ <style>
11
+ @import "./demo.css";
12
+
13
+ label {
14
+ display: flex;
15
+ }
16
+
17
+ label:has(input[type="text"],input[type="password"],input:not([type]) ) {
18
+ flex-direction: column;
19
+ }
20
+
21
+ nav {
22
+ max-width: 32em;
23
+ }
24
+ </style>
25
+ <!-- https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/custom-error-message.html
26
+ todo: apply setCustomValidity( warningStr )
27
+ -->
28
+
29
+ </head>
30
+ <body>
31
+
32
+ <nav>
33
+ <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
34
+
35
+ <p> <b>formData</b><br/>
36
+ The values of named form fields are populated into the <b>slice</b> as <b>form-data</b> on <var>change</var>
37
+ or <var>submit</var> event. The field values can be used in form validation via <var>custom-validity</var>
38
+ attribute
39
+ and in condition to enabling the form parts
40
+ <a href="https://developer.mozilla.org/en-US/docs/Web/API/FormData">formData MDN</a>
41
+ </p>
42
+ <details>
43
+ <summary>slice to form-data mapping</summary>
44
+ <html-demo-element>
45
+ <template>
46
+ <datadom hidden>
47
+ <slice>
48
+ <signin-form>
49
+ <form-data>
50
+ <username>QWE</username>
51
+ <password>ASD</password>
52
+ </form-data>
53
+ </signin-form>
54
+ </slice>
55
+ </datadom>
56
+ </template>
57
+ </html-demo-element>
58
+ </details>
59
+
60
+
61
+ <p> <b> custom-validity attribute </b><br/>
62
+ applied on the form itself or on the form field.<br/>
63
+ The value is an XPath over DCE <var>datadom</var>. When evaluated as <u>boolean</u>, it would enable(true) or
64
+ disable(false)
65
+ the form submission, acting as form validation mechanism.<br>
66
+ Alternatively, the value can be evaluated as a <u>string</u> which would be treated as an error and can be used
67
+ as
68
+ validation error message set as <var>@validation-message</var> attribute on the form slice.
69
+ Look for <var>email-form/@validation-message</var> example on the page.<br/>
70
+ </p>
71
+ <p> When <var>custom-validity</var> attribute is set on the field, its XPath evaluated value is propagated to
72
+ <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/validationMessage">
73
+ validationMessage property</a>. Which would be shown via browser system popup as the field validation error.
74
+ </p>
75
+ <p> <var>@validation-message</var> is set either by <var>custom-validity</var> attribute or by browser as system message.
76
+ By default, it is shown as popup on the field validation. But also is available for template as a string via
77
+ form field attribute. Like in <var>email-form/@validation-message</var>.
78
+
79
+ </p>
80
+
81
+ <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">Form Validation MDN</a>
82
+ </nav>
83
+
84
+ <html-demo-element legend="1. Simple validation"
85
+ description="custom-validity boolean value prevents submission, username length switches Next to 'Sign In' button ">
86
+ <ol>
87
+ <li> Click Next, observe the warning</li>
88
+ <li> Fill input with 10+ characters</li>
89
+ <li> Click Next, the password and "Sign In" button should appear</li>
90
+ </ol>
91
+ <template>
92
+ <custom-element>
93
+ <template>
94
+ <form slice="signin-form"
95
+ custom-validity="
96
+ string-length(/datadom/slice/signin-form/form-data/username) &gt; 10
97
+ and string-length(//form-data/password) &gt; 3 "
98
+ >
99
+ <label> Email
100
+ <input name="username" autocomplete="username" placeholder="Email, phone, or username"
101
+ required="">
102
+ </label>
103
+ <variable name="showpassword" select="string-length(//form-data/username) &gt; 10 "></variable>
104
+ <if test="not($showpassword)">
105
+ <button slice="confirm" slice-event="click" slice-value="'password'">Next</button>
106
+ </if>
107
+ <if test="$showpassword">
108
+ <label>Enter password: <input name="password" type="password" required> </label>
109
+ <button>Sign In</button>
110
+ </if>
111
+ username {//username}
112
+ </form>
113
+ </template>
114
+ </custom-element>
115
+ </template>
116
+ </html-demo-element>
117
+
118
+ <html-demo-element legend="2. Form life cycle demo"
119
+ description="form-data in the form slice is the source of truth">
120
+
121
+ <template>
122
+ <custom-element>
123
+ <template>
124
+ <form slice="signin-form"
125
+ custom-validity="
126
+ string-length(/datadom/slice/signin-form/form-data/username) &gt; 9
127
+ and ( ( //confirm-by = 'sms' )
128
+ or ( //confirm-by = 'email' )
129
+ or ( //confirm-by = 'password' and string-length(//form-data/password) &gt; 3 )
130
+ )
131
+ "
132
+ >
133
+ <!-- form validity should be based on form-data -->
134
+ <variable name="warn">
135
+ <if test="string-length(//username-slice) &lt; 9 ">
136
+ Should be 10 or more symbols. &nbsp;
137
+ <!-- updated by slice on input event -->
138
+ </if>
139
+ <if test="//form-data/confirm-by = 'sms'">
140
+ Message and Data Rates may apply.
141
+ <!-- updated by form change by radio select -->
142
+ </if>
143
+ </variable>
144
+ <label> Enter your email, phone, or user name
145
+ <input name="username" autocomplete="username"
146
+ placeholder="Email, phone, or username"
147
+ custom-validity="( string-length(//username-slice) &gt; 9 ) ?? 'should be 10+ symbols'"
148
+ slice-event="input"
149
+ slice="username-slice"
150
+ required
151
+ />
152
+ </label>
153
+ <var> {$warn} </var>
154
+ <fieldset>
155
+ <legend>Confirm by</legend>
156
+ <label><input type="radio" name="confirm-by" value="email"/> email </label>
157
+ <label><input type="radio" name="confirm-by" value="sms"/> text to phone </label>
158
+ <label><input type="radio" name="confirm-by" value="password"/> password </label>
159
+ <if test="/datadom/slice/signin-form/form-data/confirm-by = 'password'">
160
+ <label>Enter password: <input type="password" NAME="password"
161
+ custom-validity="( string-length(//form-data/password) &gt; 3 ) ?? 'password is too short'"
162
+ /></label>
163
+ </if>
164
+ <if test="not(//confirm-by)">
165
+ Please select the auth method
166
+ </if>
167
+ </fieldset>
168
+ <section>
169
+ <button>Sign In</button>
170
+ </section>
171
+ </form>
172
+ //username-slice {//username-slice}<br/>
173
+ //username {//username}<br/>
174
+ //confirm-by {//confirm-by}<br/>
175
+ //password {//password}
176
+ </template>
177
+ </custom-element>
178
+ </template>
179
+ </html-demo-element>
180
+
181
+ <html-demo-element legend="3. read system validity message"
182
+ description="validationMessage propagated into slice as 'validation-message' attribute ">
183
+ <ol>
184
+ <li> type in input field</li>
185
+ <li> delete input field content</li>
186
+ <li> observe the warning in string after input</li>
187
+ <li> Click Next observe the system warning in dropdown over input</li>
188
+ </ol>
189
+ <template>
190
+ <custom-element>
191
+ <template>
192
+ <form slice="email-form">
193
+ <label> Email
194
+ <input slice="username" slice-event="input" placeholder="non-empty" required>
195
+ </label>
196
+ <if test="//username/@validation-message">
197
+ <var>{//username/@validation-message}</var>
198
+ </if>
199
+ <button>Next</button>
200
+ </form>
201
+ </template>
202
+ </custom-element>
203
+ </template>
204
+ </html-demo-element>
205
+
206
+ <html-demo-element legend="4. form validity message"
207
+ description="@validation-message propagated into form slice and ">
208
+ <ol>
209
+ <li> type up to 3 chars in input field</li>
210
+ <li> observe the slice value change</li>
211
+ <li> click next</li>
212
+ <li> observe the warning bellow the button</li>
213
+ </ol>
214
+ <template>
215
+ <custom-element>
216
+ <template>
217
+ <form slice="email-form"
218
+ custom-validity=" string-length(//slice/username) &gt; 3 ??
219
+ concat('should be more than 3 characters, now is ',string-length(//slice/username) ) "
220
+ >
221
+ <label> Email
222
+ <input name="email" slice="username" slice-event="input" placeholder="non-empty" required/>
223
+ </label>
224
+ <if test="//username/@validation-message">
225
+ <var>{//username/@validation-message}</var>
226
+ </if>
227
+ <button>Next</button>
228
+ <p>//email-form/@validation-message: {//email-form/@validation-message} </p>
229
+ <p>//slice/username: {//slice/username} </p>
230
+ </form>
231
+ </template>
232
+ </custom-element>
233
+ </template>
234
+ </html-demo-element>
235
+
236
+ <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
237
+
238
+ </body>
239
+ </html>
package/dist/demo/hex-grid-dce.html ADDED
@@ -0,0 +1,183 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
+ <script type="module" src="../custom-element.js"></script>
6
+
7
+ <style>
8
+ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');
9
+ button{ font-family: 'Roboto', sans-serif; color: darkcyan;}
10
+ body{ background-color: #DDE2F1;}
11
+ </style>
12
+ </head>
13
+ <body>
14
+
15
+ <custom-element tag="hex-grid">
16
+ <template id="hex-grid-template">
17
+ <style>
18
+ section{ filter: drop-shadow(0px 2px 3px rgba(50, 50, 0, 0.5)) }
19
+ :root {
20
+ --hex-grid-size: 8rem;
21
+ }
22
+
23
+ nav {
24
+ --hex-grid-size: 8rem;
25
+ display: flex;
26
+ flex-wrap: wrap;
27
+ flex-direction: row;
28
+ justify-content: left;
29
+ margin-right: calc(var(--hex-grid-size)/2);
30
+ padding-bottom: calc(var(--hex-grid-size,8rem));
31
+ gap: 0.1rem;
32
+ section{
33
+ width: var(--hex-grid-size);
34
+ height: calc(1.53 *var(--hex-grid-size))
35
+ }
36
+ button {
37
+ display: flex;
38
+ flex-direction: column; align-items: center;
39
+ justify-content: center;
40
+ border: none;
41
+ width: var(--hex-grid-size,8rem);
42
+ min-width: var(--hex-grid-size,8rem);
43
+ height: var(--hex-grid-size,8rem);
44
+ padding: calc( var(--hex-grid-size,8rem)/8);
45
+ clip-path: polygon(50% 0, 100% 25%,100% 75%, 50% 100%, 0 75%, 0 25%);
46
+ &:hover,&:focus,&.focus{
47
+ transform: scale3d(0.9,0.9,0.9) ;
48
+ background-color: mediumaquamarine;
49
+ color: white;
50
+ }
51
+
52
+ img{ height: calc( var(--hex-grid-size,8rem)/2);}
53
+ }
54
+
55
+
56
+ section:nth-child(even){
57
+ width:0;
58
+ }
59
+ section:nth-child(even){
60
+ position: relative;
61
+ top: 50%;
62
+ button{
63
+ position: absolute;
64
+
65
+ top: calc(0.77*var(--hex-grid-size));
66
+ right: calc( -1* var(--hex-grid-size,8rem)/2);
67
+ }
68
+ }
69
+ }
70
+ </style>
71
+ <nav>
72
+ <for-each select="/datadom/payload/xhtml:*">
73
+ <if test="local-name(.) = 'style'">
74
+ <copy-of select="." />
75
+ </if>
76
+ <!-- sanitize blank spans -->
77
+ <if test="local-name(.) != 'style' and (local-name(.) != 'span' or normalize-space(.) != '')">
78
+ <section>
79
+ <button class="action">
80
+ {@alt}
81
+ <copy-of select="."/>
82
+ </button>
83
+ </section>
84
+ </if>
85
+ </for-each>
86
+ </nav>
87
+ </template>
88
+ </custom-element>
89
+
90
+ <!--<hex-grid>-->
91
+ <!-- <img src="wc-square.svg" alt="web component"/>-->
92
+ <!-- <img src="wc-square.svg" alt="123"/>-->
93
+ <!-- <span>Hey!</span>-->
94
+ <!--</hex-grid>-->
95
+ <hex-grid class="grid2x">
96
+ <img src="wc-square.svg" alt="DCE" href="https://github.com/EPA-WG/custom-element"/>
97
+ <img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React" href="https://react.dev/"/>
98
+ <img src="https://angularjs.org/favicon.ico" alt="Angular" href="https://angularjs.org/"/>
99
+ <img src="https://semantic-ui.com/images/logo.png" alt="Semantic UI" href="https://semantic-ui.com/"/>
100
+ <img src="https://open-wc.org/35ded306.svg" alt="Open WC" href="https://open-wc.org/"/>
101
+ <img src="https://storage.googleapis.com/cms-storage-bucket/4fd0db61df0567c0f352.png" alt="Flutter" href="https://flutter.dev/"/>
102
+ <img src="https://refine.dev/img/refine_favicon.svg" alt="Refine" href="https://refine.dev/"/>
103
+ <img src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-shadow.png" alt="Bootstrap" href="https://getbootstrap.com/"/>
104
+ <img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg" alt="Vue.JS" href="https://vuejs.org/"/>
105
+ <img src="https://lit.dev/images/logo.svg#flame" alt="Lit"/>
106
+ <img src="https://redux.js.org/img/redux.svg" alt="Redux"/>
107
+ <img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Svelte_Logo.svg" alt="Svelte"/>
108
+ <img src="https://www.solidjs.com/img/logo/without-wordmark/logo.svg" alt="SolidJS"/>
109
+ <img src="https://www.svgrepo.com/show/354113/nextjs-icon.svg" alt="NextJS"/>
110
+ <img src="https://global.discourse-cdn.com/standard17/uploads/threejs/original/2X/b/be2f75f72751c11cbe1593c69a99a52900bf12cb.svg" alt="ThreeJS" href="https://threejs.org/"/>
111
+ <img src="https://www.blazejs.org/logo/icon.png" alt="BlazeJS"/>
112
+ <img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/tailwindcss.webp" alt="Tailwind CSS"/>
113
+ <img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/flowbite.webp" alt="Flowbite"/>
114
+ <img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/chakra-ui.webp" alt="Chakra-UI"/>
115
+ <img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/graphql.webp" alt="GraphQL"/>
116
+ <img src="https://dmtgy0px4zdqn.cloudfront.net/images/cloud-icon.png" alt="Meteor" href="https://www.meteor.com/"/>
117
+ <img src="https://www.svgrepo.com/show/508923/jquery.svg" alt="jQuery"/>
118
+ <img src="https://www.svgrepo.com/show/330899/materialui.svg" alt="Material UI"/>
119
+ <img src="https://mithril.js.org/logo.svg" alt="Mithril.js" href="https://mithril.js.org/"/>
120
+ <img src="https://seeklogo.com/images/M/materialize-logo-0FCAD8A6F8-seeklogo.com.png" alt="Materialize"/>
121
+ <img src="https://seeklogo.com/images/P/preact-logo-64E4BF9ABC-seeklogo.com.png" alt="Preact"/>
122
+ <img src="https://seeklogo.com/images/D/dojo-logo-E24E2CA700-seeklogo.com.png" alt="Dojo"/>
123
+ <img src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/backbone-js-icon.svg" alt="Backbone.js"/>
124
+ <img src="https://d3js.org/logo.svg" alt="D3.js"/>
125
+ <img src="https://lodash.com/assets/img/lodash.svg" alt="Lodash"/>
126
+ <img src="https://www.chartjs.org/img/chartjs-logo.svg" alt="Chart.JS" href="https://www.chartjs.org/"/>
127
+ <img src="https://glimmerjs.com/images/favicon.png" alt="Glimmer" href="https://glimmerjs.com/"/>
128
+ <img src="https://sarcadass.github.io/granim.js/favicon.ico" alt="Granim.js" href="https://sarcadass.github.io/granim.js/"/>
129
+ <img src="https://leafletjs.com/docs/images/favicon.ico" alt="leaflet.js" href="https://leafletjs.com/"/>
130
+ <img src="https://animejs.com/documentation/assets/img/favicon.png" alt="Anime.JS"/>
131
+ <img src="https://www.algolia.com/algoliaweb-static-favicons/light-mode/apple-touch-icon.png" alt="Algolia"/>
132
+ <img src="https://momentjs.com/static/img/moment-favicon.png" alt="Moment" href="https://momentjs.com"/>
133
+ <img src="https://omniscientjs.github.io/assets/favicon.ico" alt="Omniscient" href="https://omniscientjs.github.io"/>
134
+ <img src="https://aurelia.io/styles/images/aurelia-icon.svg" alt="Aurelia" href="https://aurelia.io"/>
135
+ <img src="https://emberjs.com/favicons/icon.svg" alt="EmberJS" href="https://emberjs.com"/>
136
+ <img src="https://ionicframework.com/apple-icon-57x57.png" alt="Ionic" href="https://ionicframework.com/"/>
137
+ <img src="https://webix.com/assets/favicons/favicon-96x96.png" alt="Webix" href="https://webix.com/"/>
138
+ <img src="https://images.ctfassets.net/vkdbses00qqt/3Id5VwofmvaFbjuSumaOmM/592c2d2e523187bd054a16b358d5a7ec/framework.svg" alt="Gatsby" href="https://www.gatsbyjs.com/"/>
139
+ </hex-grid>
140
+
141
+ <custom-element tag="hex-row">
142
+ <template>
143
+ <style>
144
+ hex-grid {
145
+ nav {
146
+ --hex-grid-size:6rem;
147
+ display: inline-flex;
148
+ padding-bottom: 0;
149
+ margin-right: 0;
150
+ section{ margin-right: 0.2rem; height: var(--hex-grid-size);}
151
+ button:has([selected]){ background-color: #2d4554; color: burlywood; }
152
+ }
153
+ }
154
+ </style>
155
+ <for-each select="/datadom/payload/xhtml:*">
156
+ <!-- sanitize blank spans -->
157
+ <if test="local-name(.) != 'span' or normalize-space(.) != ''">
158
+ <hex-grid>
159
+ <copy-of select="."/>
160
+ </hex-grid>
161
+ </if>
162
+ </for-each>
163
+ </template>
164
+ </custom-element>
165
+ <hex-row class="grid2x">
166
+ <img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/chakra-ui.webp" alt="Chakra-UI"/>
167
+ <img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/graphql.webp" alt="GraphQL"/>
168
+ <img src="https://dmtgy0px4zdqn.cloudfront.net/images/cloud-icon.png" alt="Meteor"/>
169
+ <img src="https://www.svgrepo.com/show/508923/jquery.svg" alt="jQuery" selected/>
170
+ <img src="https://www.svgrepo.com/show/330899/materialui.svg" alt="Material UI"/>
171
+ <img src="https://mithril.js.org/logo.svg" alt="Mithril.js"/>
172
+ <img src="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/backbone-js-icon.svg" alt="Backbone.js" href="https://backbonejs.org/"/>
173
+ <img src="https://ionicframework.com/apple-icon-57x57.png" alt="Ionic" href="https://ionicframework.com/"/>
174
+ </hex-row>
175
+
176
+
177
+
178
+ <style>
179
+ .grid2x{--hex-grid-size:16rem; margin-top: 8rem; }
180
+ </style>
181
+
182
+ </body>
183
+ </html>
package/dist/demo/hex-grid-transform.png ADDED
Binary file
package/dist/demo/hex-grid.html ADDED
@@ -0,0 +1,66 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
+ <link rel="icon" href="./wc-square.svg"/>
6
+ <script type="module" src="../custom-element.js"></script>
7
+ <style>
8
+ html
9
+ { font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
10
+ font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased;
11
+ }
12
+ #grid1 nav {
13
+ transform: perspective(15cm) rotateX(5deg) rotateY(40deg) translateX(20rem) translateY(6rem);
14
+ }
15
+ #grid2 nav {
16
+ transform: perspective(15cm) rotateX(5deg) rotateY(50deg) translateX(20rem) translateY(10rem);
17
+ }
18
+ </style>
19
+ </head>
20
+ <body>
21
+
22
+ <nav>
23
+ <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
24
+ <h3>Example of DCE HTML as a library.</h3>
25
+ </nav>
26
+ <p>The template and its own responsive layout behavior demo resides in
27
+ <a href="hex-grid-dce.html">hex-grid-dce.html</a> file.</p>
28
+ <custom-element src="hex-grid-dce.html#hex-grid-template" tag="hex-grid" >
29
+ <template><i>loading hex-grid template from HTML lib file ...</i></template>
30
+ </custom-element>
31
+
32
+ <hex-grid id="grid1">
33
+ <template>
34
+ <style>
35
+ nav{
36
+ --hex-grid-size:5rem;
37
+ button dce-text{ position: absolute; top: 3rem; text-shadow: 0 0 3px white, 0 0 6px blue; }
38
+ }
39
+ </style>
40
+ <img src="wc-square.svg" alt="DCE" href="https://github.com/EPA-WG/custom-element"/>
41
+ <img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React" href="https://react.dev/"/>
42
+ <img src="https://angularjs.org/favicon.ico" alt="Angular" href="https://angularjs.org/"/>
43
+ <img src="https://semantic-ui.com/images/logo.png" alt="Semantic UI" href="https://semantic-ui.com/"/>
44
+ <img src="https://open-wc.org/35ded306.svg" alt="Open WC" href="https://open-wc.org/"/>
45
+ </template>
46
+ </hex-grid>
47
+ <hex-grid id="grid2">
48
+ <template>
49
+ <img src="wc-square.svg" alt="DCE" href="https://github.com/EPA-WG/custom-element"/>
50
+ <img src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" alt="React" href="https://react.dev/"/>
51
+ <img src="https://angularjs.org/favicon.ico" alt="Angular" href="https://angularjs.org/"/>
52
+ <img src="https://semantic-ui.com/images/logo.png" alt="Semantic UI" href="https://semantic-ui.com/"/>
53
+ <img src="https://open-wc.org/35ded306.svg" alt="Open WC" href="https://open-wc.org/"/>
54
+ <img src="https://storage.googleapis.com/cms-storage-bucket/4fd0db61df0567c0f352.png" alt="Flutter" href="https://flutter.dev/"/>
55
+ <img src="https://refine.dev/img/refine_favicon.svg" alt="Refine" href="https://refine.dev/"/>
56
+ <img src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-shadow.png" alt="Bootstrap" href="https://getbootstrap.com/"/>
57
+ <img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg" alt="Vue.JS" href="https://vuejs.org/"/>
58
+ <img src="https://lit.dev/images/logo.svg#flame" alt="Lit"/>
59
+ <img src="https://redux.js.org/img/redux.svg" alt="Redux"/>
60
+ <img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Svelte_Logo.svg" alt="Svelte"/>
61
+ <img src="https://www.solidjs.com/img/logo/without-wordmark/logo.svg" alt="SolidJS"/>
62
+ <img src="https://www.svgrepo.com/show/354113/nextjs-icon.svg" alt="NextJS"/>
63
+ </template>
64
+ </hex-grid>
65
+ </body>
66
+ </html>
package/dist/demo/html-template.html ADDED
@@ -0,0 +1,126 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
3
+ <head>
4
+ <title>template based on HTML file</title>
5
+ <style>svg {
6
+ width: 4rem;
7
+ }</style>
8
+ </head>
9
+ <body>
10
+ <script>console.error('Stranger danger!')</script>
11
+ <b id="wave">👋</b>
12
+ <b id="ok">👌</b>
13
+ <svg id="dwc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18">
14
+ <defs>
15
+ <style>.cls-1 {
16
+ fill: #c2e6f1;
17
+ }
18
+
19
+ .cls-2 {
20
+ fill: #dcf1f7;
21
+ }
22
+
23
+ .cls-3 {
24
+ fill: #2d4554;
25
+ }
26
+
27
+ .cls-4 {
28
+ fill: #60cae5;
29
+ }</style>
30
+ </defs>
31
+ <polygon class="cls-3"
32
+ points="0 82.47 0 126.71 34.84 146.83 34.84 187.06 73.16 209.18 108 189.07 142.84 209.18 181.16 187.06 181.16 146.83 216 126.71 216 82.47 181.16 62.35 181.16 22.12 142.84 0 108 20.12 73.16 0 34.84 22.12 34.84 62.35 0 82.47"/>
33
+ <path class="cls-2"
34
+ d="m114.33,56.69l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
35
+ <path class="cls-2"
36
+ d="m98.19,62.71h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
37
+ <path class="cls-1"
38
+ d="m48.12,66.01l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97Z"/>
39
+ <path class="cls-2"
40
+ d="m46.18,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/>
41
+ <path class="cls-2"
42
+ d="m115.87,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/>
43
+ <path class="cls-2"
44
+ d="m152.65,42.59c-4.44,2.56-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0Z"/>
45
+ <path class="cls-2"
46
+ d="m77.55,158.4l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54Z"/>
47
+ <path class="cls-4"
48
+ d="m146.31,134.03v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97Z"/>
49
+ <path class="cls-4"
50
+ d="m63.35,123.06h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
51
+ <path class="cls-4"
52
+ d="m103.61,151.37l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53Z"/>
53
+ <path class="cls-4"
54
+ d="m63.35,163.29h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
55
+ <path class="cls-4"
56
+ d="m28.51,102.94h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
57
+ <path class="cls-4"
58
+ d="m133.04,163.29l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/>
59
+ <path class="cls-4"
60
+ d="m173.29,151.37l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53Z"/>
61
+ <path class="cls-4"
62
+ d="m209.06,91.55c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84Z"/>
63
+ <path class="cls-2"
64
+ d="m149.18,117.04l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
65
+ <path class="cls-1"
66
+ d="m112.39,98.05l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54Z"/>
67
+ <path class="cls-1"
68
+ d="m100.13,105.12c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/>
69
+ <path class="cls-2"
70
+ d="m65.29,85.01c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/>
71
+ <path class="cls-1"
72
+ d="m133.04,123.06l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/>
73
+ <path class="cls-1"
74
+ d="m184.02,96.93l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
75
+ </svg>
76
+ <math id="sophomores-dream" display="block">
77
+ <mrow>
78
+ <msubsup>
79
+ <mo>∫</mo>
80
+ <mn>0</mn>
81
+ <mn>1</mn>
82
+ </msubsup>
83
+ <msup>
84
+ <mi>x</mi>
85
+ <mi>x</mi>
86
+ </msup>
87
+ <mo rspace="0.22em">⁢</mo>
88
+ <mo rspace="0">ⅆ</mo>
89
+ <mi>x</mi>
90
+ <mo>=</mo>
91
+ <munderover>
92
+ <mo>∑</mo>
93
+ <mrow>
94
+ <mi>n</mi>
95
+ <mo>=</mo>
96
+ <mn>1</mn>
97
+ </mrow>
98
+ <mn>∞</mn>
99
+ </munderover>
100
+ <msup>
101
+ <mrow>
102
+ <mo>(</mo>
103
+ <mrow>
104
+ <mo form="prefix">−</mo>
105
+ <mn>1</mn>
106
+ </mrow>
107
+ <mo>)</mo>
108
+ </mrow>
109
+ <mrow>
110
+ <mi>n</mi>
111
+ <mo>+</mo>
112
+ <mn>1</mn>
113
+ </mrow>
114
+ </msup>
115
+ <mo>⁢</mo>
116
+ <msup>
117
+ <mi>n</mi>
118
+ <mrow>
119
+ <mo form="prefix">−</mo>
120
+ <mi>n</mi>
121
+ </mrow>
122
+ </msup>
123
+ </mrow>
124
+ </math>
125
+ </body>
126
+ </html>