@epa-wg/custom-element-dist 0.0.25 → 0.0.27

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 (332) hide show
  1. package/.idea/custom-element-dist.iml +1 -5
  2. package/.storybook/main.ts +1 -3
  3. package/.storybook/preview-head.html +8 -0
  4. package/.storybook/preview.ts +13 -5
  5. package/README.md +4 -4
  6. package/bin/postinstall.sh +3 -2
  7. package/bin/vitest/vitest-browser-importmaps.mjs +20 -0
  8. package/coverage/coverage-final.json +14 -11
  9. package/coverage/index.html +51 -36
  10. package/coverage/src/custom-element/coverage.svg +1 -1
  11. package/coverage/src/custom-element/custom-element.js/coverage.svg +1 -1
  12. package/coverage/src/custom-element/custom-element.js.html +596 -386
  13. package/coverage/src/custom-element/demo/coverage.svg +10 -0
  14. package/coverage/src/custom-element/demo/index.html +116 -0
  15. package/coverage/src/custom-element/demo/z.js/coverage.svg +10 -0
  16. package/coverage/src/custom-element/demo/z.js.html +112 -0
  17. package/coverage/src/custom-element/http-request.js.html +12 -12
  18. package/coverage/src/custom-element/index.html +33 -18
  19. package/coverage/src/custom-element/local-storage.js.html +56 -41
  20. package/coverage/src/custom-element/location-element.js.html +4 -4
  21. package/coverage/src/custom-element/module-url.js/coverage.svg +10 -0
  22. package/coverage/src/custom-element/module-url.js.html +187 -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 +9 -15
  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 +15 -9
  32. package/coverage/src/stories/external-template.test.stories.ts.html +27 -18
  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 +48 -33
  36. package/coverage/src/stories/local-storage.test.stories.ts/coverage.svg +1 -1
  37. package/coverage/src/stories/local-storage.test.stories.ts.html +87 -63
  38. package/coverage/src/stories/location-element.test.stories.ts.html +1 -1
  39. package/coverage/src/stories/module-url.test.stories.ts/coverage.svg +10 -0
  40. package/coverage/src/stories/module-url.test.stories.ts.html +634 -0
  41. package/coverage/src/stories/set-url.test.stories.ts.html +1 -1
  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.html +98 -20
  46. package/coverage/src/sum.ts.html +1 -1
  47. package/dist/confused.svg +1 -0
  48. package/dist/custom-element-BMMsP1Dy.js +533 -0
  49. package/dist/custom-element-CPSk7s0j.cjs +87 -0
  50. package/dist/custom-element-bundle.cjs +1 -1
  51. package/dist/custom-element-bundle.js +28 -25
  52. package/dist/demo/a.html +60 -0
  53. package/dist/demo/a.svg +27 -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 +25 -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 +118 -0
  77. package/dist/demo/npm-versions.html +94 -0
  78. package/dist/demo/parameters.html +70 -0
  79. package/dist/demo/s.xml +3 -0
  80. package/dist/demo/s.xslt +56 -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 +33 -0
  93. package/dist/demo/z.js +9 -0
  94. package/dist/demo/z.xml +60 -0
  95. package/dist/demo/z1.html +34 -0
  96. package/dist/embed-1.html +1 -2
  97. package/dist/local-storage-78EivJ_B.cjs +1 -0
  98. package/dist/local-storage-DzmNKzgN.js +66 -0
  99. package/dist/mockServiceWorker.js +1 -1
  100. package/package.json +95 -93
  101. package/public/confused.svg +1 -0
  102. package/public/demo/a.html +60 -0
  103. package/public/demo/a.svg +27 -0
  104. package/public/demo/b.html +13 -0
  105. package/public/demo/confused.svg +38 -0
  106. package/public/demo/data-slices.html +216 -0
  107. package/public/demo/dce-social-preview.png +0 -0
  108. package/public/demo/demo.css +25 -0
  109. package/public/demo/dom-merge.html +123 -0
  110. package/public/demo/embed-1.html +2 -0
  111. package/public/demo/external-template.html +239 -0
  112. package/public/demo/form.html +239 -0
  113. package/public/demo/hex-grid-dce.html +183 -0
  114. package/public/demo/hex-grid-transform.png +0 -0
  115. package/public/demo/hex-grid.html +66 -0
  116. package/public/demo/html-template.html +126 -0
  117. package/public/demo/html-template.xhtml +45 -0
  118. package/public/demo/html-template.xml +45 -0
  119. package/public/demo/http-request.html +143 -0
  120. package/public/demo/lib-dir/Smiley.svg +24 -0
  121. package/public/demo/lib-dir/embed-lib.html +34 -0
  122. package/public/demo/local-storage.html +218 -0
  123. package/public/demo/location-element.html +168 -0
  124. package/public/demo/logo.png +0 -0
  125. package/public/demo/module-url.html +215 -0
  126. package/public/demo/npm-versions-demo.html +118 -0
  127. package/public/demo/npm-versions.html +94 -0
  128. package/public/demo/parameters.html +70 -0
  129. package/public/demo/s.xml +3 -0
  130. package/public/demo/s.xslt +56 -0
  131. package/public/demo/s1.xslt +60 -0
  132. package/public/demo/scoped-css.html +169 -0
  133. package/public/demo/set-url.html +141 -0
  134. package/public/demo/ss.html +57 -0
  135. package/public/demo/table.xml +25 -0
  136. package/public/demo/table.xsl +293 -0
  137. package/public/demo/template.xsl +46 -0
  138. package/public/demo/tree.xml +25 -0
  139. package/public/demo/tree.xsl +33 -0
  140. package/public/demo/wc-square.svg +1 -0
  141. package/public/demo/xhtml-template.xhtml +45 -0
  142. package/public/demo/z.html +33 -0
  143. package/public/demo/z.js +9 -0
  144. package/public/demo/z.xml +60 -0
  145. package/public/demo/z1.html +34 -0
  146. package/public/embed-1.html +1 -2
  147. package/public/mockServiceWorker.js +1 -1
  148. package/src/custom-element/custom-element.js +103 -33
  149. package/src/custom-element/demo/a.svg +27 -0
  150. package/src/custom-element/demo/confused.svg +1 -0
  151. package/src/custom-element/demo/demo.css +11 -8
  152. package/src/custom-element/demo/embed-1.html +1 -2
  153. package/src/custom-element/demo/external-template.html +122 -62
  154. package/src/custom-element/demo/lib-dir/Smiley.svg +24 -0
  155. package/src/custom-element/demo/lib-dir/embed-lib.html +34 -0
  156. package/src/custom-element/demo/module-url.html +215 -0
  157. package/src/custom-element/demo/npm-versions-demo.html +118 -0
  158. package/src/custom-element/demo/npm-versions.html +94 -0
  159. package/src/custom-element/demo/s.xml +3 -36
  160. package/src/custom-element/demo/s.xslt +55 -96
  161. package/src/custom-element/demo/set-url.html +1 -1
  162. package/src/custom-element/demo/z.html +32 -61
  163. package/src/custom-element/demo/z.js +9 -0
  164. package/src/custom-element/demo/z1.html +34 -0
  165. package/src/custom-element/ide/customData-dce.json +215 -181
  166. package/src/custom-element/ide/web-types-dce.json +184 -159
  167. package/src/custom-element/ide/web-types-xsl.json +1 -1
  168. package/src/custom-element/index.html +21 -3
  169. package/src/custom-element/local-storage.js +19 -14
  170. package/src/custom-element/module-url.js +34 -0
  171. package/src/mocks/handlers.ts +10 -1
  172. package/src/mocks/versions.mock.ts +786 -0
  173. package/src/stories/__screenshots__/http-request.test.ts/http-request-url-change-1.png +0 -0
  174. package/src/stories/attributes.test.stories.ts +3 -5
  175. package/src/stories/dom-merge.test.stories.ts +9 -7
  176. package/src/stories/external-template.test.stories.ts +13 -10
  177. package/src/stories/local-storage.test.stories.ts +61 -53
  178. package/src/stories/module-url.test.stories.ts +183 -0
  179. package/src/stories/version-select.test.stories.ts +38 -12
  180. package/src/sum.test.ts +5 -5
  181. package/src/sum.ts +3 -3
  182. package/storybook-static/assets/Color-KGDBMAHA-CJo5gHY3.js +1 -0
  183. package/storybook-static/assets/{Configure-D0qG3gR9.js → Configure-DdXbGKhY.js} +2 -2
  184. package/storybook-static/assets/DocsRenderer-PKQXORMH-DLnpL5hE.js +2 -0
  185. package/storybook-static/assets/{attributes.test.stories-W34tZdUt.js → attributes.test.stories-Bt5V18qO.js} +10 -12
  186. package/storybook-static/assets/{css.test.stories-BZFYx1TQ.js → css.test.stories-CGYy2daE.js} +1 -1
  187. package/storybook-static/assets/custom-element-D8hcDZHh.js +265 -0
  188. package/storybook-static/assets/{dom-merge.test.stories-S-7U5N3h.js → dom-merge.test.stories-XlsZ0UvX.js} +22 -20
  189. package/storybook-static/assets/{entry-preview-DrgzXgwT.js → entry-preview-BKQ8UCxI.js} +1 -1
  190. package/storybook-static/assets/{entry-preview-docs-Bxv0qQWs.js → entry-preview-docs-BMKNVQXA.js} +2 -2
  191. package/storybook-static/assets/{external-template.test.stories-QIO3lAFz.js → external-template.test.stories-Bt_Pflu8.js} +23 -21
  192. package/storybook-static/assets/{form.test.stories-ClYhj9F1.js → form.test.stories-B0NoI8wm.js} +1 -1
  193. package/storybook-static/assets/handlers-B5969HUu.js +467 -0
  194. package/storybook-static/assets/http-request.stories-B2skuTFV.js +281 -0
  195. package/storybook-static/assets/iframe-Dfrt81rk.js +2 -0
  196. package/storybook-static/assets/index-Ay195x2L.js +605 -0
  197. package/storybook-static/assets/index-C3ChPTMh.js +1 -0
  198. package/storybook-static/assets/index-C7lvoJNv.js +1 -0
  199. package/storybook-static/assets/index-C8k3Z-3Y.js +28 -0
  200. package/storybook-static/assets/{index-DXimoRZY.js → index-D-8MO0q_.js} +1 -1
  201. package/storybook-static/assets/index-DGdNYaqV.js +8 -0
  202. package/storybook-static/assets/index-Gpdhz4ab.js +1 -0
  203. package/storybook-static/assets/lit-element-DzhCn-8W.js +19 -0
  204. package/storybook-static/assets/local-storage.test.stories-DfY6feqG.js +420 -0
  205. package/storybook-static/assets/{location-element.test.stories-DvH1TWK4.js → location-element.test.stories-944AotIJ.js} +1 -1
  206. package/storybook-static/assets/module-url.test.stories-DSKcwApl.js +208 -0
  207. package/storybook-static/assets/{preview-BKCN0mOr.js → preview-0Jj89qip.js} +1 -1
  208. package/storybook-static/assets/preview-AJR7rVPD.js +52 -0
  209. package/storybook-static/assets/{preview-TCN6m6T-.js → preview-BJPLiuSt.js} +1 -1
  210. package/storybook-static/assets/{preview-BDY5ThwJ.js → preview-BMWqy4Bi.js} +1 -1
  211. package/storybook-static/assets/preview-BnWGZYux.js +1 -0
  212. package/storybook-static/assets/preview-CadgX-4y.js +2 -0
  213. package/storybook-static/assets/{preview-BAz7FMXc.js → preview-DB9FwMii.js} +1 -1
  214. package/storybook-static/assets/preview-Djh1_Tal.js +20 -0
  215. package/storybook-static/assets/{set-url.test.stories-GlJOh31I.js → set-url.test.stories-DjLHKkEh.js} +1 -1
  216. package/storybook-static/assets/{slice-events.test.stories-VoNjuPCX.js → slice-events.test.stories-8I_BrHd6.js} +1 -1
  217. package/storybook-static/assets/{slots.test.stories-Da2j9YuO.js → slots.test.stories-CvZz4jyP.js} +1 -1
  218. package/storybook-static/assets/version-select.test.stories-DSxmJylI.js +109 -0
  219. package/storybook-static/confused.svg +1 -0
  220. package/storybook-static/demo/a.html +60 -0
  221. package/storybook-static/demo/a.svg +27 -0
  222. package/storybook-static/demo/b.html +13 -0
  223. package/storybook-static/demo/confused.svg +38 -0
  224. package/storybook-static/demo/data-slices.html +216 -0
  225. package/storybook-static/demo/dce-social-preview.png +0 -0
  226. package/storybook-static/demo/demo.css +25 -0
  227. package/storybook-static/demo/dom-merge.html +123 -0
  228. package/storybook-static/demo/embed-1.html +2 -0
  229. package/storybook-static/demo/external-template.html +239 -0
  230. package/storybook-static/demo/form.html +239 -0
  231. package/storybook-static/demo/hex-grid-dce.html +183 -0
  232. package/storybook-static/demo/hex-grid-transform.png +0 -0
  233. package/storybook-static/demo/hex-grid.html +66 -0
  234. package/storybook-static/demo/html-template.html +126 -0
  235. package/storybook-static/demo/html-template.xhtml +45 -0
  236. package/storybook-static/demo/html-template.xml +45 -0
  237. package/storybook-static/demo/http-request.html +143 -0
  238. package/storybook-static/demo/lib-dir/Smiley.svg +24 -0
  239. package/storybook-static/demo/lib-dir/embed-lib.html +34 -0
  240. package/storybook-static/demo/local-storage.html +218 -0
  241. package/storybook-static/demo/location-element.html +168 -0
  242. package/storybook-static/demo/logo.png +0 -0
  243. package/storybook-static/demo/module-url.html +215 -0
  244. package/storybook-static/demo/npm-versions-demo.html +118 -0
  245. package/storybook-static/demo/npm-versions.html +94 -0
  246. package/storybook-static/demo/parameters.html +70 -0
  247. package/storybook-static/demo/s.xml +3 -0
  248. package/storybook-static/demo/s.xslt +56 -0
  249. package/storybook-static/demo/s1.xslt +60 -0
  250. package/storybook-static/demo/scoped-css.html +169 -0
  251. package/storybook-static/demo/set-url.html +141 -0
  252. package/storybook-static/demo/ss.html +57 -0
  253. package/storybook-static/demo/table.xml +25 -0
  254. package/storybook-static/demo/table.xsl +293 -0
  255. package/storybook-static/demo/template.xsl +46 -0
  256. package/storybook-static/demo/tree.xml +25 -0
  257. package/storybook-static/demo/tree.xsl +33 -0
  258. package/storybook-static/demo/wc-square.svg +1 -0
  259. package/storybook-static/demo/xhtml-template.xhtml +45 -0
  260. package/storybook-static/demo/z.html +33 -0
  261. package/storybook-static/demo/z.js +9 -0
  262. package/storybook-static/demo/z.xml +60 -0
  263. package/storybook-static/demo/z1.html +34 -0
  264. package/storybook-static/embed-1.html +1 -2
  265. package/storybook-static/favicon.svg +1 -7
  266. package/storybook-static/iframe.html +42 -30
  267. package/storybook-static/index.html +36 -18
  268. package/storybook-static/index.json +1 -1
  269. package/storybook-static/mockServiceWorker.js +1 -1
  270. package/storybook-static/nunito-sans-bold-italic.woff2 +0 -0
  271. package/storybook-static/nunito-sans-bold.woff2 +0 -0
  272. package/storybook-static/nunito-sans-italic.woff2 +0 -0
  273. package/storybook-static/nunito-sans-regular.woff2 +0 -0
  274. package/storybook-static/project.json +1 -1
  275. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js +39 -36
  276. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js.LEGAL.txt +38 -1
  277. package/storybook-static/sb-addons/essentials-actions-3/manager-bundle.js +1 -1
  278. package/storybook-static/sb-addons/essentials-controls-2/manager-bundle.js +395 -43
  279. package/storybook-static/sb-addons/essentials-controls-2/manager-bundle.js.LEGAL.txt +0 -18
  280. package/storybook-static/sb-addons/essentials-viewport-5/manager-bundle.js +1 -1
  281. package/storybook-static/sb-addons/interactions-10/manager-bundle.js +221 -22
  282. package/storybook-static/sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js +3 -0
  283. package/storybook-static/sb-common-assets/favicon.svg +1 -0
  284. package/storybook-static/sb-manager/globals-module-info.js +995 -1
  285. package/storybook-static/sb-manager/globals-runtime.js +53525 -1
  286. package/storybook-static/sb-manager/globals.js +48 -1
  287. package/storybook-static/sb-manager/runtime.js +11884 -1
  288. package/storybook-static/sb-preview/globals.js +33 -1
  289. package/storybook-static/sb-preview/runtime.js +9437 -108
  290. package/vite.config.js +2 -1
  291. package/.idea/codeStyles/codeStyleConfig.xml +0 -5
  292. package/.idea/compiler.xml +0 -6
  293. package/.idea/inspectionProfiles/Project_Default.xml +0 -6
  294. package/.vscode/settings.json +0 -24
  295. package/dist/custom-element-DAe7uvIt.js +0 -477
  296. package/dist/custom-element-DZvvhscI.cjs +0 -53
  297. package/dist/local-storage-Boafngui.cjs +0 -1
  298. package/dist/local-storage-BqDEu2kF.js +0 -59
  299. package/storybook-static/assets/Color-PRSJMWNM-CRSv4C7i.js +0 -1
  300. package/storybook-static/assets/DocsRenderer-K4EAMTCU-CG_P5zRZ.js +0 -2
  301. package/storybook-static/assets/WithTooltip-KJL26V4Q-CUqUi5E8.js +0 -1
  302. package/storybook-static/assets/custom-element-DpIq8E2p.js +0 -219
  303. package/storybook-static/assets/formatter-2WMMO6ZP-C-UiBIma.js +0 -58
  304. package/storybook-static/assets/http-request.stories-DCqY5s2i.js +0 -300
  305. package/storybook-static/assets/iframe-CURpvmVV.js +0 -2
  306. package/storybook-static/assets/index-CKw1EbdP.js +0 -1
  307. package/storybook-static/assets/index-CVRyq5ci.js +0 -27
  308. package/storybook-static/assets/index-Cc7K62zD.js +0 -3
  309. package/storybook-static/assets/index-DYpTqTNu.js +0 -1
  310. package/storybook-static/assets/index-DsWii_Ep.js +0 -548
  311. package/storybook-static/assets/index-DuIEV_9C.js +0 -13
  312. package/storybook-static/assets/lit-element-CenEXOuS.js +0 -19
  313. package/storybook-static/assets/local-storage.test.stories-BqgYwqr-.js +0 -419
  314. package/storybook-static/assets/preview-B4GcaC1c.js +0 -1
  315. package/storybook-static/assets/preview-B63p-W8V.js +0 -20
  316. package/storybook-static/assets/preview-DRnyIGXK.js +0 -48
  317. package/storybook-static/assets/preview-DjDbQHPa.js +0 -2
  318. package/storybook-static/assets/syntaxhighlighter-BP7B2CQK-CDpEe51g.js +0 -1
  319. package/storybook-static/assets/version-select.test.stories-DLwf-TPB.js +0 -60
  320. package/storybook-static/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +0 -3
  321. package/storybook-static/sb-common-assets/fonts.css +0 -31
  322. package/storybook-static/sb-manager/WithTooltip-KJL26V4Q-5LS5AN27.js +0 -1
  323. package/storybook-static/sb-manager/chunk-B3YDJJJH.js +0 -347
  324. package/storybook-static/sb-manager/chunk-BLWCBWKL.js +0 -9
  325. package/storybook-static/sb-manager/chunk-GUVK2GTO.js +0 -6
  326. package/storybook-static/sb-manager/chunk-LFRML3ZV.js +0 -186
  327. package/storybook-static/sb-manager/chunk-MC7RAF2B.js +0 -274
  328. package/storybook-static/sb-manager/chunk-ZR5JZWHI.js +0 -1
  329. package/storybook-static/sb-manager/formatter-2WMMO6ZP-JI7RHVTW.js +0 -58
  330. package/storybook-static/sb-manager/index.js +0 -1
  331. package/storybook-static/sb-manager/syntaxhighlighter-BP7B2CQK-WOJYHKQR.js +0 -1
  332. /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/external-template.html ADDED
@@ -0,0 +1,239 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5
+ <title>http-request Declarative Custom Element implementation demo</title>
6
+ <link rel="icon" href="./wc-square.svg"/>
7
+
8
+ <script type="module" src="../http-request.js"></script>
9
+ <script type="module" src="../custom-element.js"></script>
10
+ <style>
11
+ @import "./demo.css";
12
+
13
+ button {
14
+ display: inline-flex;
15
+ flex-direction: column;
16
+ align-items: center;
17
+ flex: auto;
18
+ box-shadow: inset silver 0 0 1rem;
19
+ min-width: 12rem;
20
+ padding: 1rem;
21
+ color: coral;
22
+ text-shadow: 1px 1px silver;
23
+ font-weight: bolder;
24
+ }
25
+
26
+ button img {
27
+ max-height: 10vw;
28
+ min-height: 4rem;
29
+ }
30
+
31
+ table {
32
+ min-width: 16rem;
33
+ }
34
+
35
+ td {
36
+ border-bottom: 1px solid silver;
37
+ }
38
+
39
+ tfoot td {
40
+ border-bottom: none;
41
+ }
42
+
43
+ td, th {
44
+ text-align: right;
45
+ }
46
+
47
+ caption {
48
+ padding: 1rem;
49
+ font-weight: bolder;
50
+ font-family: sans-serif;
51
+ }
52
+
53
+ code {
54
+ text-align: right;
55
+ min-width: 3rem;
56
+ }
57
+
58
+ svg {
59
+ max-height: 3rem;
60
+ }
61
+ </style>
62
+ </head>
63
+ <body>
64
+
65
+ <nav>
66
+ <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
67
+ <h3>Loading DCE template by SRC attribute</h3>
68
+ </nav>
69
+
70
+ <html-demo-element legend="1. reference the template in page DOM"
71
+ description="should render hand wave with '👋 World!' and 'Hello World!'">
72
+ <template>
73
+ <template id="template1">
74
+ <slot> Hello</slot>
75
+ World!
76
+ </template>
77
+
78
+ <custom-element tag="dce-internal" src="#template1"></custom-element>
79
+ <!-- no need for loading fallback as the template exists -->
80
+
81
+ <dce-internal>👋</dce-internal>
82
+ <dce-internal></dce-internal>
83
+ </template>
84
+ </html-demo-element>
85
+
86
+
87
+ <html-demo-element legend="2. without TAG, inline instantiation"
88
+ description="hash value in SRC references template by ID. Should output 'construction' 2 times">
89
+ <template>
90
+ <template id="template2">
91
+ 🏗️ construction
92
+ </template>
93
+
94
+ <custom-element src="#template2"></custom-element>
95
+ <custom-element src="#template2"></custom-element>
96
+ </template>
97
+ </html-demo-element>
98
+
99
+ <html-demo-element legend="3. external SVG file">
100
+ <template>
101
+ <custom-element tag="dce-external" src="confused.svg">
102
+ <template><i>loading from SVG ...</i></template>
103
+ </custom-element>
104
+ <dce-external></dce-external>
105
+ <custom-element src="confused.svg">
106
+ <i>inline DCE loading from SVG ...</i>
107
+ </custom-element>
108
+ <custom-element src="no.svg">
109
+ <i>fallback for missing image</i>
110
+ </custom-element>
111
+ </template>
112
+ </html-demo-element>
113
+
114
+ <html-demo-element legend="4. external XSLT file"
115
+ description="This external templates generated the tree for DCE data set"
116
+ >
117
+ <a href="tree.xsl">tree.xsl</a>
118
+ <template>
119
+ <custom-element tag="dce-external-4" src="tree.xsl">
120
+ <template><i>loading from XSLT ...</i></template>
121
+ </custom-element>
122
+ <dce-external-4 title="DCE with external XSLT template" data-fruit="🍌">Hi</dce-external-4>
123
+ <custom-element src="tree.xsl" data-smile="👼" data-basket="🍒">
124
+ <i>inline DCE loading from XSLT ...</i>
125
+ </custom-element>
126
+ </template>
127
+ </html-demo-element>
128
+
129
+ <html-demo-element legend="5. external HTML template" description="Should render 👋👌, svg, formula">
130
+ <template>
131
+ <custom-element tag="dce-external-5" src="html-template.html">
132
+ <template><i>loading from HTML file ...</i></template>
133
+ </custom-element>
134
+ <dce-external-5 title="DCE with external XSLT template" data-fruit="🍌">Hi</dce-external-5>
135
+ <custom-element src="html-template.html" data-smile="👼" data-basket="🍒">
136
+ <i>inline DCE loading from HTML file ...</i>
137
+ </custom-element>
138
+ </template>
139
+ </html-demo-element>
140
+
141
+ <html-demo-element legend="6. HTML, SVG by ID within external file" description="Should render 👋, svg, formula">
142
+ <a href="html-template.html">html-template.html</a>
143
+ <template>
144
+ <custom-element src="./html-template.html#wave">
145
+ <template><i>loading HTML from templates file ...</i></template>
146
+ </custom-element>
147
+ <custom-element src="./html-template.html#dwc-logo">
148
+ <template><i>loading SVG from templates file ...</i></template>
149
+ </custom-element>
150
+ <custom-element src="./html-template.html#sophomores-dream">
151
+ <template><i>loading MathML from HTML file ...</i></template>
152
+ </custom-element>
153
+ </template>
154
+ </html-demo-element>
155
+ <html-demo-element legend="7. XSLT by ID within external file" description="Should render tree, and fallback">
156
+ <a href="html-template.html">html-template.html</a>
157
+ <template>
158
+ <custom-element src="html-template.xhtml#embedded-xsl">
159
+ <template>whole XSLT is embedded into HTML body</template>
160
+ </custom-element>
161
+ <custom-element src="html-template.html#none">
162
+ <template><i>element with id=none is missing in template</i></template>
163
+ </custom-element>
164
+ </template>
165
+ </html-demo-element>
166
+
167
+ <html-demo-element legend="8. external file with embedding of another external DCE"
168
+ description="Should render Vulcan Salute 🖖"
169
+ >
170
+ <template>
171
+ <custom-element src="embed-1.html">
172
+ loading from embed-1.html ...
173
+ </custom-element>
174
+ </template>
175
+ </html-demo-element>
176
+
177
+
178
+ <html-demo-element legend="9. external file with invoking of relative template as hash by enclosed custom-element"
179
+ description="Should render Vulcan Salute 🖖"
180
+ >
181
+ <template>
182
+ <custom-element src="./lib-dir/embed-lib.html#embed-relative-hash">
183
+ loading from embed-1.html ...
184
+ </custom-element>
185
+ </template>
186
+ </html-demo-element>
187
+
188
+ <html-demo-element
189
+ legend="10. external file with invoking of template in another relative path file by enclosed custom-element"
190
+ description="Should render Vulcan Salute 🖖"
191
+ >
192
+ <template>
193
+ <custom-element src="./lib-dir/embed-lib.html#embed-relative-file">
194
+ loading from ./lib-dir/embed-lib.html ...
195
+ </custom-element>
196
+ </template>
197
+ </html-demo-element>
198
+
199
+
200
+ <html-demo-element legend="embed-1.html external file" src="embed-1.html"></html-demo-element>
201
+ <html-demo-element legend="embed-lib.html with multiple templates" src="embed-lib.html"></html-demo-element>
202
+ <!--
203
+ <html-demo-element legend="9. deep external files, complex rendering" >
204
+ <template>
205
+ <custom-element src="../index.html#shared-template" hidden>
206
+ loading by hash from ../index.html#shared-template ...
207
+ </custom-element>
208
+ </template>
209
+ </html-demo-element>
210
+
211
+ <html-demo-element legend="9. own import maps" >
212
+ <template>
213
+ <custom-element src="../index.html#shared-template" hidden>
214
+ loading by hash from ../index.html#shared-template ...
215
+ </custom-element>
216
+ </template>
217
+ </html-demo-element>
218
+
219
+ <html-demo-element legend="10. deep external files with own import maps" >
220
+ <template>
221
+ <custom-element src="../index.html#shared-template" hidden>
222
+ loading by hash from ../index.html#shared-template ...
223
+ </custom-element>
224
+ </template>
225
+ </html-demo-element>
226
+
227
+ <html-demo-element legend="11. local template as a 'loading...' or fallback for remote, error handling" >
228
+ <template>
229
+ <custom-element src="../index.html#shared-template" hidden>
230
+ loading by hash from ../index.html#shared-template ...
231
+ </custom-element>
232
+ </template>
233
+ </html-demo-element>
234
+
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/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