@epa-wg/custom-element-dist 0.0.25 → 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 (304) hide show
  1. package/.storybook/main.ts +1 -3
  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 +12 -9
  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 +422 -371
  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 +10 -10
  17. package/coverage/src/custom-element/index.html +31 -16
  18. package/coverage/src/custom-element/local-storage.js.html +1 -1
  19. package/coverage/src/custom-element/location-element.js.html +3 -3
  20. package/coverage/src/custom-element/module-url.js/coverage.svg +10 -0
  21. package/coverage/src/custom-element/module-url.js.html +181 -0
  22. package/coverage/src/index.html +1 -1
  23. package/coverage/src/mocks/coverage.svg +1 -1
  24. package/coverage/src/mocks/handlers.ts/coverage.svg +1 -1
  25. package/coverage/src/mocks/handlers.ts.html +36 -12
  26. package/coverage/src/mocks/index.html +19 -19
  27. package/coverage/src/stories/attributes.test.stories.ts.html +6 -9
  28. package/coverage/src/stories/coverage.svg +1 -1
  29. package/coverage/src/stories/css.test.stories.ts.html +1 -1
  30. package/coverage/src/stories/dom-merge.test.stories.ts.html +1 -1
  31. package/coverage/src/stories/external-template.test.stories.ts.html +22 -10
  32. package/coverage/src/stories/form.test.stories.ts.html +1 -1
  33. package/coverage/src/stories/http-request.stories.ts.html +1 -1
  34. package/coverage/src/stories/index.html +34 -19
  35. package/coverage/src/stories/local-storage.test.stories.ts.html +1 -1
  36. package/coverage/src/stories/location-element.test.stories.ts.html +1 -1
  37. package/coverage/src/stories/module-url.test.stories.ts/coverage.svg +10 -0
  38. package/coverage/src/stories/module-url.test.stories.ts.html +634 -0
  39. package/coverage/src/stories/set-url.test.stories.ts.html +1 -1
  40. package/coverage/src/stories/slice-events.test.stories.ts.html +1 -1
  41. package/coverage/src/stories/slots.test.stories.ts.html +1 -1
  42. package/coverage/src/stories/testStoryBook.ts.html +12 -12
  43. package/coverage/src/stories/version-select.test.stories.ts.html +98 -20
  44. package/coverage/src/sum.ts.html +1 -1
  45. package/dist/confused.svg +1 -0
  46. package/dist/custom-element-CckoVsvO.cjs +53 -0
  47. package/dist/{custom-element-DAe7uvIt.js → custom-element-b7c_7Kz4.js} +175 -167
  48. package/dist/custom-element-bundle.cjs +1 -1
  49. package/dist/custom-element-bundle.js +2 -2
  50. package/dist/demo/a.html +60 -0
  51. package/dist/demo/b.html +13 -0
  52. package/dist/demo/confused.svg +38 -0
  53. package/dist/demo/data-slices.html +216 -0
  54. package/dist/demo/dce-social-preview.png +0 -0
  55. package/dist/demo/demo.css +26 -0
  56. package/dist/demo/dom-merge.html +123 -0
  57. package/dist/demo/embed-1.html +2 -0
  58. package/dist/demo/external-template.html +239 -0
  59. package/dist/demo/form.html +239 -0
  60. package/dist/demo/hex-grid-dce.html +183 -0
  61. package/dist/demo/hex-grid-transform.png +0 -0
  62. package/dist/demo/hex-grid.html +66 -0
  63. package/dist/demo/html-template.html +126 -0
  64. package/dist/demo/html-template.xhtml +45 -0
  65. package/dist/demo/html-template.xml +45 -0
  66. package/dist/demo/http-request.html +143 -0
  67. package/dist/demo/lib-dir/Smiley.svg +24 -0
  68. package/dist/demo/lib-dir/embed-lib.html +34 -0
  69. package/dist/demo/local-storage.html +218 -0
  70. package/dist/demo/location-element.html +168 -0
  71. package/dist/demo/logo.png +0 -0
  72. package/dist/demo/module-url.html +215 -0
  73. package/dist/demo/npm-versions-demo.html +105 -0
  74. package/dist/demo/npm-versions.html +65 -0
  75. package/dist/demo/parameters.html +70 -0
  76. package/dist/demo/s.xml +28 -0
  77. package/dist/demo/s.xslt +97 -0
  78. package/dist/demo/s1.xslt +60 -0
  79. package/dist/demo/scoped-css.html +169 -0
  80. package/dist/demo/set-url.html +141 -0
  81. package/dist/demo/ss.html +57 -0
  82. package/dist/demo/table.xml +25 -0
  83. package/dist/demo/table.xsl +293 -0
  84. package/dist/demo/template.xsl +46 -0
  85. package/dist/demo/tree.xml +25 -0
  86. package/dist/demo/tree.xsl +33 -0
  87. package/dist/demo/wc-square.svg +1 -0
  88. package/dist/demo/xhtml-template.xhtml +45 -0
  89. package/dist/demo/z.html +62 -0
  90. package/dist/demo/z.js +9 -0
  91. package/dist/demo/z.xml +60 -0
  92. package/dist/embed-1.html +1 -2
  93. package/dist/mockServiceWorker.js +1 -1
  94. package/package.json +93 -93
  95. package/public/confused.svg +1 -0
  96. package/public/demo/a.html +60 -0
  97. package/public/demo/b.html +13 -0
  98. package/public/demo/confused.svg +38 -0
  99. package/public/demo/data-slices.html +216 -0
  100. package/public/demo/dce-social-preview.png +0 -0
  101. package/public/demo/demo.css +26 -0
  102. package/public/demo/dom-merge.html +123 -0
  103. package/public/demo/embed-1.html +2 -0
  104. package/public/demo/external-template.html +239 -0
  105. package/public/demo/form.html +239 -0
  106. package/public/demo/hex-grid-dce.html +183 -0
  107. package/public/demo/hex-grid-transform.png +0 -0
  108. package/public/demo/hex-grid.html +66 -0
  109. package/public/demo/html-template.html +126 -0
  110. package/public/demo/html-template.xhtml +45 -0
  111. package/public/demo/html-template.xml +45 -0
  112. package/public/demo/http-request.html +143 -0
  113. package/public/demo/lib-dir/Smiley.svg +24 -0
  114. package/public/demo/lib-dir/embed-lib.html +34 -0
  115. package/public/demo/local-storage.html +218 -0
  116. package/public/demo/location-element.html +168 -0
  117. package/public/demo/logo.png +0 -0
  118. package/public/demo/module-url.html +215 -0
  119. package/public/demo/npm-versions-demo.html +105 -0
  120. package/public/demo/npm-versions.html +65 -0
  121. package/public/demo/parameters.html +70 -0
  122. package/public/demo/s.xml +28 -0
  123. package/public/demo/s.xslt +97 -0
  124. package/public/demo/s1.xslt +60 -0
  125. package/public/demo/scoped-css.html +169 -0
  126. package/public/demo/set-url.html +141 -0
  127. package/public/demo/ss.html +57 -0
  128. package/public/demo/table.xml +25 -0
  129. package/public/demo/table.xsl +293 -0
  130. package/public/demo/template.xsl +46 -0
  131. package/public/demo/tree.xml +25 -0
  132. package/public/demo/tree.xsl +33 -0
  133. package/public/demo/wc-square.svg +1 -0
  134. package/public/demo/xhtml-template.xhtml +45 -0
  135. package/public/demo/z.html +62 -0
  136. package/public/demo/z.js +9 -0
  137. package/public/demo/z.xml +60 -0
  138. package/public/embed-1.html +1 -2
  139. package/public/mockServiceWorker.js +1 -1
  140. package/src/custom-element/custom-element.js +36 -19
  141. package/src/custom-element/demo/confused.svg +1 -0
  142. package/src/custom-element/demo/demo.css +5 -1
  143. package/src/custom-element/demo/embed-1.html +1 -2
  144. package/src/custom-element/demo/external-template.html +122 -62
  145. package/src/custom-element/demo/lib-dir/Smiley.svg +24 -0
  146. package/src/custom-element/demo/lib-dir/embed-lib.html +34 -0
  147. package/src/custom-element/demo/module-url.html +215 -0
  148. package/src/custom-element/demo/npm-versions-demo.html +105 -0
  149. package/src/custom-element/demo/npm-versions.html +65 -0
  150. package/src/custom-element/demo/s.xml +27 -35
  151. package/src/custom-element/demo/s.xslt +96 -96
  152. package/src/custom-element/demo/set-url.html +1 -1
  153. package/src/custom-element/demo/z.js +9 -0
  154. package/src/custom-element/ide/customData-dce.json +215 -181
  155. package/src/custom-element/ide/web-types-dce.json +184 -159
  156. package/src/custom-element/ide/web-types-xsl.json +1 -1
  157. package/src/custom-element/index.html +2 -1
  158. package/src/custom-element/module-url.js +33 -0
  159. package/src/mocks/handlers.ts +10 -1
  160. package/src/mocks/versions.mock.ts +786 -0
  161. package/src/stories/attributes.test.stories.ts +0 -1
  162. package/src/stories/external-template.test.stories.ts +11 -7
  163. package/src/stories/module-url.test.stories.ts +183 -0
  164. package/src/stories/version-select.test.stories.ts +38 -12
  165. package/storybook-static/assets/Color-KGDBMAHA-CH-YyWYq.js +1 -0
  166. package/storybook-static/assets/{Configure-D0qG3gR9.js → Configure-DFL_bm2M.js} +2 -2
  167. package/storybook-static/assets/DocsRenderer-PKQXORMH-Bz-_1hmS.js +2 -0
  168. package/storybook-static/assets/{attributes.test.stories-W34tZdUt.js → attributes.test.stories-DIQXccHc.js} +2 -3
  169. package/storybook-static/assets/{css.test.stories-BZFYx1TQ.js → css.test.stories-BV2hi4CY.js} +1 -1
  170. package/storybook-static/assets/custom-element-wn23PUwN.js +231 -0
  171. package/storybook-static/assets/{dom-merge.test.stories-S-7U5N3h.js → dom-merge.test.stories-Dws0C2-g.js} +1 -1
  172. package/storybook-static/assets/{entry-preview-DrgzXgwT.js → entry-preview-BKQ8UCxI.js} +1 -1
  173. package/storybook-static/assets/{entry-preview-docs-Bxv0qQWs.js → entry-preview-docs-BMKNVQXA.js} +2 -2
  174. package/storybook-static/assets/{external-template.test.stories-QIO3lAFz.js → external-template.test.stories-BHO48b0j.js} +19 -16
  175. package/storybook-static/assets/{form.test.stories-ClYhj9F1.js → form.test.stories-dv9mwp24.js} +1 -1
  176. package/storybook-static/assets/handlers-CaCq2ZPF.js +467 -0
  177. package/storybook-static/assets/http-request.stories-B2ke7LtS.js +281 -0
  178. package/storybook-static/assets/iframe-D4Sos1HO.js +2 -0
  179. package/storybook-static/assets/index-BnXBQqj9.js +605 -0
  180. package/storybook-static/assets/index-C8k3Z-3Y.js +28 -0
  181. package/storybook-static/assets/index-Cpxqn5iQ.js +1 -0
  182. package/storybook-static/assets/{index-DXimoRZY.js → index-D-8MO0q_.js} +1 -1
  183. package/storybook-static/assets/index-DGdNYaqV.js +8 -0
  184. package/storybook-static/assets/index-Dz4OaB2k.js +1 -0
  185. package/storybook-static/assets/index-sm7QlJZE.js +1 -0
  186. package/storybook-static/assets/lit-element-DzhCn-8W.js +19 -0
  187. package/storybook-static/assets/{local-storage.test.stories-BqgYwqr-.js → local-storage.test.stories-BpogLNq-.js} +1 -1
  188. package/storybook-static/assets/{location-element.test.stories-DvH1TWK4.js → location-element.test.stories-BiFvBop7.js} +1 -1
  189. package/storybook-static/assets/module-url.test.stories-BXoM34tX.js +208 -0
  190. package/storybook-static/assets/{preview-BKCN0mOr.js → preview-0Jj89qip.js} +1 -1
  191. package/storybook-static/assets/{preview-TCN6m6T-.js → preview-BJPLiuSt.js} +1 -1
  192. package/storybook-static/assets/{preview-BDY5ThwJ.js → preview-BMWqy4Bi.js} +1 -1
  193. package/storybook-static/assets/preview-BnWGZYux.js +1 -0
  194. package/storybook-static/assets/preview-Cg7hXPRq.js +2 -0
  195. package/storybook-static/assets/{preview-BAz7FMXc.js → preview-DB9FwMii.js} +1 -1
  196. package/storybook-static/assets/preview-Djh1_Tal.js +20 -0
  197. package/storybook-static/assets/{preview-DRnyIGXK.js → preview-oHxXRSIu.js} +15 -15
  198. package/storybook-static/assets/{set-url.test.stories-GlJOh31I.js → set-url.test.stories-Cg5Z0r7x.js} +1 -1
  199. package/storybook-static/assets/{slice-events.test.stories-VoNjuPCX.js → slice-events.test.stories-D_ttGp3g.js} +1 -1
  200. package/storybook-static/assets/{slots.test.stories-Da2j9YuO.js → slots.test.stories-DBNXOm0T.js} +1 -1
  201. package/storybook-static/assets/version-select.test.stories-CgV3UCim.js +109 -0
  202. package/storybook-static/confused.svg +1 -0
  203. package/storybook-static/demo/a.html +60 -0
  204. package/storybook-static/demo/b.html +13 -0
  205. package/storybook-static/demo/confused.svg +38 -0
  206. package/storybook-static/demo/data-slices.html +216 -0
  207. package/storybook-static/demo/dce-social-preview.png +0 -0
  208. package/storybook-static/demo/demo.css +26 -0
  209. package/storybook-static/demo/dom-merge.html +123 -0
  210. package/storybook-static/demo/embed-1.html +2 -0
  211. package/storybook-static/demo/external-template.html +239 -0
  212. package/storybook-static/demo/form.html +239 -0
  213. package/storybook-static/demo/hex-grid-dce.html +183 -0
  214. package/storybook-static/demo/hex-grid-transform.png +0 -0
  215. package/storybook-static/demo/hex-grid.html +66 -0
  216. package/storybook-static/demo/html-template.html +126 -0
  217. package/storybook-static/demo/html-template.xhtml +45 -0
  218. package/storybook-static/demo/html-template.xml +45 -0
  219. package/storybook-static/demo/http-request.html +143 -0
  220. package/storybook-static/demo/lib-dir/Smiley.svg +24 -0
  221. package/storybook-static/demo/lib-dir/embed-lib.html +34 -0
  222. package/storybook-static/demo/local-storage.html +218 -0
  223. package/storybook-static/demo/location-element.html +168 -0
  224. package/storybook-static/demo/logo.png +0 -0
  225. package/storybook-static/demo/module-url.html +215 -0
  226. package/storybook-static/demo/npm-versions-demo.html +105 -0
  227. package/storybook-static/demo/npm-versions.html +65 -0
  228. package/storybook-static/demo/parameters.html +70 -0
  229. package/storybook-static/demo/s.xml +28 -0
  230. package/storybook-static/demo/s.xslt +97 -0
  231. package/storybook-static/demo/s1.xslt +60 -0
  232. package/storybook-static/demo/scoped-css.html +169 -0
  233. package/storybook-static/demo/set-url.html +141 -0
  234. package/storybook-static/demo/ss.html +57 -0
  235. package/storybook-static/demo/table.xml +25 -0
  236. package/storybook-static/demo/table.xsl +293 -0
  237. package/storybook-static/demo/template.xsl +46 -0
  238. package/storybook-static/demo/tree.xml +25 -0
  239. package/storybook-static/demo/tree.xsl +33 -0
  240. package/storybook-static/demo/wc-square.svg +1 -0
  241. package/storybook-static/demo/xhtml-template.xhtml +45 -0
  242. package/storybook-static/demo/z.html +62 -0
  243. package/storybook-static/demo/z.js +9 -0
  244. package/storybook-static/demo/z.xml +60 -0
  245. package/storybook-static/embed-1.html +1 -2
  246. package/storybook-static/favicon.svg +1 -7
  247. package/storybook-static/iframe.html +42 -30
  248. package/storybook-static/index.html +36 -18
  249. package/storybook-static/index.json +1 -1
  250. package/storybook-static/mockServiceWorker.js +1 -1
  251. package/storybook-static/nunito-sans-bold-italic.woff2 +0 -0
  252. package/storybook-static/nunito-sans-bold.woff2 +0 -0
  253. package/storybook-static/nunito-sans-italic.woff2 +0 -0
  254. package/storybook-static/nunito-sans-regular.woff2 +0 -0
  255. package/storybook-static/project.json +1 -1
  256. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js +32 -32
  257. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js.LEGAL.txt +1 -1
  258. package/storybook-static/sb-addons/essentials-actions-3/manager-bundle.js +1 -1
  259. package/storybook-static/sb-addons/essentials-controls-2/manager-bundle.js +395 -43
  260. package/storybook-static/sb-addons/essentials-controls-2/manager-bundle.js.LEGAL.txt +0 -18
  261. package/storybook-static/sb-addons/essentials-viewport-5/manager-bundle.js +1 -1
  262. package/storybook-static/sb-addons/interactions-10/manager-bundle.js +221 -22
  263. package/storybook-static/sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js +3 -0
  264. package/storybook-static/sb-common-assets/favicon.svg +1 -0
  265. package/storybook-static/sb-manager/globals-module-info.js +995 -1
  266. package/storybook-static/sb-manager/globals-runtime.js +53525 -1
  267. package/storybook-static/sb-manager/globals.js +48 -1
  268. package/storybook-static/sb-manager/runtime.js +11884 -1
  269. package/storybook-static/sb-preview/globals.js +33 -1
  270. package/storybook-static/sb-preview/runtime.js +9437 -108
  271. package/vite.config.js +2 -1
  272. package/dist/custom-element-DZvvhscI.cjs +0 -53
  273. package/storybook-static/assets/Color-PRSJMWNM-CRSv4C7i.js +0 -1
  274. package/storybook-static/assets/DocsRenderer-K4EAMTCU-CG_P5zRZ.js +0 -2
  275. package/storybook-static/assets/WithTooltip-KJL26V4Q-CUqUi5E8.js +0 -1
  276. package/storybook-static/assets/custom-element-DpIq8E2p.js +0 -219
  277. package/storybook-static/assets/formatter-2WMMO6ZP-C-UiBIma.js +0 -58
  278. package/storybook-static/assets/http-request.stories-DCqY5s2i.js +0 -300
  279. package/storybook-static/assets/iframe-CURpvmVV.js +0 -2
  280. package/storybook-static/assets/index-CKw1EbdP.js +0 -1
  281. package/storybook-static/assets/index-CVRyq5ci.js +0 -27
  282. package/storybook-static/assets/index-Cc7K62zD.js +0 -3
  283. package/storybook-static/assets/index-DYpTqTNu.js +0 -1
  284. package/storybook-static/assets/index-DsWii_Ep.js +0 -548
  285. package/storybook-static/assets/index-DuIEV_9C.js +0 -13
  286. package/storybook-static/assets/lit-element-CenEXOuS.js +0 -19
  287. package/storybook-static/assets/preview-B4GcaC1c.js +0 -1
  288. package/storybook-static/assets/preview-B63p-W8V.js +0 -20
  289. package/storybook-static/assets/preview-DjDbQHPa.js +0 -2
  290. package/storybook-static/assets/syntaxhighlighter-BP7B2CQK-CDpEe51g.js +0 -1
  291. package/storybook-static/assets/version-select.test.stories-DLwf-TPB.js +0 -60
  292. package/storybook-static/sb-addons/storybook-core-server-presets-0/common-manager-bundle.js +0 -3
  293. package/storybook-static/sb-common-assets/fonts.css +0 -31
  294. package/storybook-static/sb-manager/WithTooltip-KJL26V4Q-5LS5AN27.js +0 -1
  295. package/storybook-static/sb-manager/chunk-B3YDJJJH.js +0 -347
  296. package/storybook-static/sb-manager/chunk-BLWCBWKL.js +0 -9
  297. package/storybook-static/sb-manager/chunk-GUVK2GTO.js +0 -6
  298. package/storybook-static/sb-manager/chunk-LFRML3ZV.js +0 -186
  299. package/storybook-static/sb-manager/chunk-MC7RAF2B.js +0 -274
  300. package/storybook-static/sb-manager/chunk-ZR5JZWHI.js +0 -1
  301. package/storybook-static/sb-manager/formatter-2WMMO6ZP-JI7RHVTW.js +0 -58
  302. package/storybook-static/sb-manager/index.js +0 -1
  303. package/storybook-static/sb-manager/syntaxhighlighter-BP7B2CQK-WOJYHKQR.js +0 -1
  304. /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/storybook-static/demo/set-url.html ADDED
@@ -0,0 +1,141 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
3
+ xmlns:xhtml="http://www.w3.org/1999/xhtml">
4
+ <head>
5
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
6
+ <title>custom-element Declarative Custom Element implementation demo</title>
7
+ <link rel="icon" href="./wc-square.svg"/>
8
+ <script type="module" src="../location-element.js"></script>
9
+ <script type="module" src="../custom-element.js"></script>
10
+ <style>
11
+ @import "./demo.css";
12
+ input[type="text"]{ min-width: 30rem; }
13
+
14
+ .infolink {
15
+ &:before {
16
+ content: '❔';
17
+ display: inline-block;
18
+ border-radius: 1.2em;
19
+ }
20
+
21
+ &:hover:before {
22
+ background: blue;
23
+ }
24
+ }
25
+ </style>
26
+ </head>
27
+ <body>
28
+ <nav>
29
+ <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
30
+ </nav>
31
+ <main>
32
+ <h3>How to set the page URL by <code>location-element</code>?</h3>
33
+ Answer: by defining following attributes:
34
+ <ol>
35
+ <li><code>method</code> to one of values provided bellow</li>
36
+ <li><code>src</code> with URL </li>
37
+ </ol>
38
+ <p> &lt;location-element&gt; is safe to be used unconditionally as long as `src` is missing or same as page URL.
39
+ Otherwise it can be injected by event driven condition as in sample <a href="#dce3">#3</a> </p>
40
+ </main>
41
+ <html-demo-element legend="1. Set the page URL by location.hash"
42
+ description="click on 'set' button and observe hash value change in url"
43
+ id="dce1">
44
+ <template>
45
+ <custom-element>
46
+ <template>
47
+ <button value="#dce1" slice="set-button" slice-event="click">#dce1</button>
48
+ <button value="#dce2" slice="set-button" slice-event="click">#dce2</button>
49
+ <location-element method="location.href" src="{//set-button/@value}"></location-element>
50
+ </template>
51
+ </custom-element>
52
+ </template>
53
+ </html-demo-element>
54
+
55
+ <html-demo-element legend="2. Set the page URL by method"
56
+ description="click on 'set' button and observe hash value change in url"
57
+ id="dce2">
58
+ <template>
59
+ <custom-element>
60
+ <template>
61
+ <style>
62
+ button{ display: block; width: 100%; }
63
+ </style>
64
+ <button value="location.href" slice="set-button" slice-event="click"> location.href </button>
65
+ <button value="location.hash" slice="set-button" slice-event="click"> location.hash </button>
66
+ <button value="location.assign" slice="set-button" slice-event="click"> location.assign </button>
67
+ <button value="location.replace" slice="set-button" slice-event="click"> location.replace </button>
68
+ <button value="history.pushState" slice="set-button" slice-event="click"> history.pushState </button>
69
+ <button value="history.replaceState" slice="set-button" slice-event="click"> history.replaceState </button>
70
+ <location-element method="{//set-button/@value}" src="#dce2"></location-element>
71
+ </template>
72
+ </custom-element>
73
+ </template>
74
+ </html-demo-element>
75
+
76
+ <html-demo-element legend="3. Set the page URL by location.href in conditionally injected location-element"
77
+ description="click on 'set' button and observe in url #dce3"
78
+ id="dce3">
79
+ <p>Has to produce URL properties</p>
80
+ <template>
81
+ <custom-element>
82
+ <template>
83
+ <button value="#dce3" slice="set-button" slice-event="click">set</button>
84
+ <if test="//set-button/@slice-event">
85
+ <location-element method="location.href" src="#dce3"></location-element>
86
+ look for <b>#dce3</b> in URL which is set by <code>location-element</code>
87
+ </if>
88
+ </template>
89
+ </custom-element>
90
+ </template>
91
+ </html-demo-element>
92
+
93
+ <html-demo-element legend="4. Set page URL methods"
94
+ description="To define the URL, fill input field or click the radio button, then 'set' button. "
95
+ id="dce4">
96
+ <template>
97
+ <custom-element>
98
+ <template>
99
+ <xsl:variable name="methods">
100
+ <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/href"
101
+ title="./set-url.html?a=A">location.href</a>
102
+ <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/hash"
103
+ title="#dec4">location.hash</a>
104
+ <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/assign"
105
+ title="./set-url.html?assign=1">location.assign</a>
106
+ <a href="https://developer.mozilla.org/en-US/docs/Web/API/Location/replace"
107
+ title="./set-url.html?replace=location">location.replace</a>
108
+ <a href="https://developer.mozilla.org/en-US/docs/Web/API/History/pushState"
109
+ title="./set-url.html?history=pushState">history.pushState</a>
110
+ <a href="https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState"
111
+ title="./set-url.html?history=replaceState">history.replaceState</a>
112
+ </xsl:variable>
113
+ <form slice="url-form" custom-validity="'invalid'" method="post">
114
+ <fieldset>
115
+ <legend><b>set-by</b></legend>
116
+ <for-each select="exsl:node-set($methods)/*">
117
+ <p><label><input type="radio" name="method" value="{.}"/> {.} </label>
118
+ <a class="infolink" href="{@href}">mdn</a>
119
+ </p>
120
+ </for-each>
121
+ </fieldset>
122
+ <variable name="selected-method" select="//form-data/method/text()"></variable>
123
+ <variable name="selected-url"
124
+ select="exsl:node-set($methods)/*[text() = $selected-method ]/@title"></variable>
125
+
126
+ <label><input name="url" value="{//url ?? $selected-url }" type="text"/></label>
127
+ <button name="submit-btn" value="by-submit" type="submit">set</button>
128
+ <if test="//form-data/url">
129
+ <location-element method="{$selected-method}" src="{//form-data/url}"></location-element>
130
+ {$selected-method} = {//form-data/url}
131
+ </if>
132
+ </form>
133
+ </template>
134
+ </custom-element>
135
+ </template>
136
+ </html-demo-element>
137
+
138
+ <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
139
+
140
+ </body>
141
+ </html>
package/storybook-static/demo/ss.html ADDED
@@ -0,0 +1,57 @@
1
+ <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce" data-dce-id="1"><http-request xmlns="" url="/reflect" slice="page" data-dce-id="2"></http-request><p xmlns="" data-dce-id="3">Pokemon Count: 6</p>
2
+ <ul xmlns="" data-dce-id="6">
3
+ <var data-testid="request-section" data-dce-id="7"><dce-text data-dce-id="8">request</dce-text></var><div data-dce-id="9">
4
+ <var data-dce-id="10">@url</var><dce-text data-dce-id="11">
5
+ =
6
+ </dce-text><code data-testid="attr-url" data-dce-id="12">/reflect</code>
7
+ </div>
8
+ <div data-dce-id="9-1">
9
+ <var data-dce-id="10">@data-dce-id</var><dce-text data-dce-id="11">
10
+ =
11
+ </dce-text><code data-testid="attr-data-dce-id" data-dce-id="12">2</code>
12
+ </div>
13
+ </ul>
14
+ <ul xmlns="" data-dce-id="6-1">
15
+ <var data-testid="request-section" data-dce-id="7"><dce-text data-dce-id="8">response</dce-text></var><div data-dce-id="9">
16
+ <var data-dce-id="10">@ok</var><dce-text data-dce-id="11">
17
+ =
18
+ </dce-text><code data-testid="attr-ok" data-dce-id="12">true</code>
19
+ </div>
20
+ <div data-dce-id="9-1">
21
+ <var data-dce-id="10">@status</var><dce-text data-dce-id="11">
22
+ =
23
+ </dce-text><code data-testid="attr-status" data-dce-id="12">200</code>
24
+ </div>
25
+ <div data-dce-id="9-2">
26
+ <var data-dce-id="10">@statusText</var><dce-text data-dce-id="11">
27
+ =
28
+ </dce-text><code data-testid="attr-statusText" data-dce-id="12">OK</code>
29
+ </div>
30
+ <div data-dce-id="9-3">
31
+ <var data-dce-id="10">@type</var><dce-text data-dce-id="11">
32
+ =
33
+ </dce-text><code data-testid="attr-type" data-dce-id="12">basic</code>
34
+ </div>
35
+ <div data-dce-id="9-4">
36
+ <var data-dce-id="10">@url</var><dce-text data-dce-id="11">
37
+ =
38
+ </dce-text><code data-testid="attr-url" data-dce-id="12">http://localhost:5173/reflect</code>
39
+ </div>
40
+ <div data-dce-id="9-5">
41
+ <var data-dce-id="10">@redirected</var><dce-text data-dce-id="11">
42
+ =
43
+ </dce-text><code data-testid="attr-redirected" data-dce-id="12">false</code>
44
+ </div>
45
+ </ul><button xmlns="" data-dce-id="5">bulbasaur</button><button xmlns="" data-dce-id="5-1">ivysaur</button><button xmlns="" data-dce-id="5-2">venusaur</button><button xmlns="" data-dce-id="5-3">charmander</button><button xmlns="" data-dce-id="5-4">charmeleon</button><button xmlns="" data-dce-id="5-5">charizard</button>
46
+ <ul xmlns="" data-dce-id="6-2">
47
+ <var data-testid="request-section" data-dce-id="7"><dce-text data-dce-id="8">data</dce-text></var><div data-dce-id="9">
48
+ <var data-dce-id="10">@count</var><dce-text data-dce-id="11">
49
+ =
50
+ </dce-text><code data-testid="attr-count" data-dce-id="12">1279</code>
51
+ </div>
52
+ <div data-dce-id="9-1">
53
+ <var data-dce-id="10">@next</var><dce-text data-dce-id="11">
54
+ =
55
+ </dce-text><code data-testid="attr-next" data-dce-id="12">https://pokeapi.co/api/v2/pokemon?offset=6&amp;limit=6</code>
56
+ </div>
57
+ </ul></dce-root>
package/storybook-static/demo/table.xml ADDED
@@ -0,0 +1,25 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <?xml-stylesheet type="text/xsl" href="table.xsl"?>
3
+ <div xmlns="http://www.w3.org/1999/xhtml">
4
+ <payload>
5
+ <span slot=""></span>
6
+ <p slot="description">Bulbasaur is a cute Pokémon born with a large seed firmly affixed to its back;
7
+ the seed grows in size as the Pokémon does.
8
+ </p>
9
+ <span slot=""></span>
10
+ <ul slot="">
11
+ <li pokemon-id="2">ivysaur</li>
12
+ <li pokemon-id="3">venusaur</li>
13
+ </ul>
14
+ <span slot=""></span>
15
+ </payload>
16
+ <attributes>
17
+ <title>bulbasaur</title>
18
+ <data-smile>👼</data-smile>
19
+ <pokemon-id>1</pokemon-id>
20
+ </attributes>
21
+ <dataset>
22
+ <smile>👼</smile>
23
+ </dataset>
24
+ <slice></slice>
25
+ </div>
package/storybook-static/demo/table.xsl ADDED
@@ -0,0 +1,293 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <xsl:stylesheet version="1.0"
3
+ xmlns="http://www.w3.org/1999/xhtml"
4
+ xmlns:xhtml="http://www.w3.org/1999/xhtml"
5
+ xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
6
+ xmlns:func="http://exslt.org/functions"
7
+ xmlns:my="my://own.uri"
8
+ xmlns:xv="http://xmlaspect.org/XmlView"
9
+ xmlns:exslt="http://exslt.org/common"
10
+ xmlns:msxsl="urn:schemas-microsoft-com:xslt"
11
+ exclude-result-prefixes="xhtml exslt msxsl"
12
+ extension-element-prefixes="func"
13
+ >
14
+ <xsl:output
15
+ method="html"
16
+ omit-xml-declaration="yes"
17
+ standalone="yes"
18
+ indent="yes"
19
+ />
20
+ <!--
21
+ let processor = new XSLTProcessor(); // starts the XSL processor
22
+ processor.setParameter(null, "baseUrl", new URL('./', import.meta.url).pathname);
23
+ -->
24
+ <xsl:param name="url" />
25
+ <xsl:param name="baseUrl" select="substring-before(substring-after(/processing-instruction('xml-stylesheet'),'href=&quot;'),'table.xsl&quot;')" />
26
+ <xsl:param name="sort" />
27
+ <!-- select = "exslt:node-set($x) IE compatibility -->
28
+ <msxsl:script language="JScript" implements-prefix="exslt">
29
+ <![CDATA[
30
+ var dd = eval("this['node-set'] = function (x) { return x; }");
31
+ ]]>
32
+ </msxsl:script>
33
+
34
+ <xsl:variable name="sorts" select="//xsl:sort" />
35
+
36
+ <func:function name="my:count-elements">
37
+ <func:result select="count(//*)" />
38
+ </func:function>
39
+
40
+ <xsl:template match="/">
41
+ <style>
42
+ body{padding:0;margin:0;}
43
+ table {border-collapse:collapse; width:100%; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;}
44
+ caption{ text-align:left; }
45
+ th {background-image: linear-gradient(to bottom, #0F1FFF 0%, #AAAACC 100%); font-size:large;}
46
+ tr:nth-child(even) {background-image: linear-gradient(to bottom, rgba(9, 16, 11, 0.2) 0%, rgba(90, 164, 110, 0.1) 100%);}
47
+ tr:nth-child(odd) {background: rgba(255,255,255,0.2);}
48
+ td{font-size:small;border-bottom: none;border-top: none;}
49
+ th a{ color: #FFFF80; text-decoration:none; display:block;}
50
+ th a span{float:left;}
51
+ div>label, div>var{ margin-right:0.5em;}
52
+
53
+ fieldset{border-radius: 1em;border-bottom: none;border-left: none;}
54
+
55
+ /* collapse and select UI */
56
+ fieldset legend label{ cursor:pointer;}
57
+ input[type='checkbox']{ display:none;}
58
+
59
+ input[type='checkbox']:checked+fieldset{ border:2px solid red; }
60
+ input[type='checkbox']:checked+input+fieldset div,
61
+ input[type='checkbox']:checked+input+fieldset legend label.collapse i,
62
+ input[type='checkbox']:checked+fieldset .select i,
63
+ input[type='checkbox']+fieldset .collapse b,
64
+ input[type='checkbox']+fieldset .select b
65
+ {display:none; }
66
+
67
+ input[type='checkbox']:checked+input+fieldset .collapse b,
68
+ input[type='checkbox']+input:checked+fieldset .select b
69
+ { display:inline;}
70
+
71
+ legend label{ text-shadow: -1px -1px 1px #fff, -1px 0px 1px #fff, 0px -1px 1px #fff, 1px 1px 1px #999, 0px 1px 1px #999, 1px 0px 1px #999, 1px 1px 5px #113;}
72
+ legend label b, legend label i{ margin-right: 0.5em; }
73
+ </style>
74
+ <xsl:variable name="sortedData">
75
+ <xsl:call-template name="StartSort">
76
+ <xsl:with-param name="data" select="*" />
77
+ </xsl:call-template>
78
+ </xsl:variable>
79
+ <div class="XmlViewRendered">
80
+ <xsl:apply-templates select="exslt:node-set($sortedData)" mode="DisplayAs"/>
81
+ </div>
82
+ </xsl:template>
83
+ <xsl:template match="/" priority="-20" name="BodyOnly">
84
+ <xsl:variable name="sortedData">
85
+ <xsl:call-template name="StartSort">
86
+ <xsl:with-param name="data" select="*" />
87
+ </xsl:call-template>
88
+ </xsl:variable>
89
+ <xsl:apply-templates select="exslt:node-set($sortedData)" mode="DisplayAs"/>
90
+ </xsl:template>
91
+
92
+ <xsl:template name="StartSort">
93
+ <xsl:param name="data"/>
94
+ <xsl:param name="sortNode"/>
95
+ <xsl:apply-templates mode="SortData" select="$data">
96
+ <xsl:with-param name="sortNode" select="$sortNode" />
97
+ </xsl:apply-templates>
98
+ </xsl:template>
99
+
100
+
101
+
102
+ <xsl:template mode="SortData" match="*[*]" name="SortDataDefault">
103
+ <xsl:copy>
104
+ <xsl:copy-of select="@*"/>
105
+ <xsl:apply-templates mode="SortData" select="*">
106
+ <xsl:sort data-type="text" order="ascending" select="@stub-will-be-replaced"/>
107
+ </xsl:apply-templates>
108
+ </xsl:copy>
109
+ </xsl:template>
110
+
111
+ <xsl:template mode="SortData" match="*[not(*)]">
112
+ <xsl:copy><xsl:copy-of select="@*"/><xsl:value-of select="."/></xsl:copy>
113
+ </xsl:template>
114
+
115
+ <!-- skip XmlView injected data from sorting results -->
116
+ <xsl:template mode="SortData" match="*[@priority='100']" priority="300"></xsl:template>
117
+ <xsl:template mode="DisplayAsTable" match="*[@priority='100']" priority="300"></xsl:template>
118
+
119
+ <xsl:template mode="DisplayAs" match="*" ><!-- distinct tags, match to 1st -->
120
+ <xsl:variable name="tagName" select="name()" />
121
+ <xsl:choose>
122
+ <xsl:when test="count( ../*[name()=$tagName]) != 1">
123
+ <xsl:apply-templates select="." mode="DisplayAsTable" />
124
+ </xsl:when>
125
+ <xsl:otherwise>
126
+ <xsl:apply-templates select="." mode="DisplayAsTree" />
127
+ </xsl:otherwise>
128
+ </xsl:choose>
129
+ </xsl:template>
130
+ <xsl:template mode="DisplayAs" match="@*" >
131
+ <b><xsl:value-of select="name()"/></b>=<var><xsl:value-of select="."/></var>
132
+ </xsl:template>
133
+ <xsl:template mode="DisplayAsTree" match="*[not(*)]" priority="20">
134
+ <div><label><xsl:value-of select="name()"/></label>
135
+ <xsl:apply-templates select="@*" mode="DisplayAs"/>
136
+ <var><xsl:value-of select="."/></var>
137
+ </div>
138
+ </xsl:template>
139
+
140
+ <xsl:template mode="DisplayAsTree" match="*" >
141
+ <xsl:variable name="xPath"><xsl:apply-templates mode="xpath" select="."/></xsl:variable>
142
+ <input type="checkbox" id="collapse{$xPath}" class="collapseControl"/>
143
+ <input type="checkbox" id="select{$xPath}"/>
144
+ <fieldset>
145
+ <legend><label for="collapse{$xPath}" class="collapse"><b>&#9654;</b><i>&#9660;</i></label> <label for="select{$xPath}" class="select"><b>&#10004;</b><i>&#10003;</i></label> <xsl:value-of select="name()"/></legend>
146
+ <div>
147
+ <xsl:apply-templates select="." mode="DisplayContent"/>
148
+ </div>
149
+ </fieldset>
150
+ </xsl:template>
151
+ <xsl:template mode="DisplayContent" match="*">
152
+ <xsl:for-each select="@*|*">
153
+ <xsl:variable name="tagName" select="name()"/>
154
+
155
+ <xsl:if test="not(preceding-sibling::*[name()=$tagName])">
156
+ <xsl:apply-templates select="." mode="DisplayAs"/>
157
+ </xsl:if>
158
+ </xsl:for-each>
159
+ <xsl:if test="normalize-space(text()) != '' ">
160
+ <p><xsl:value-of select="text()"/></p>
161
+ </xsl:if>
162
+ </xsl:template>
163
+
164
+ <xsl:template match="*" mode="DisplayAsTable" >
165
+ <xsl:param name="childName" select="name()"/>
166
+ <xsl:variable name="ZZheaders" select="@*|*" /> <!-- first child attributes and its children -->
167
+ <!-- TODO union of unique child names as not all rows have same children set. When sorting the missing attributes changing number of columns -->
168
+ <xsl:variable name="collection" select=".."/>
169
+ <xsl:variable name="collectionPath"><xsl:apply-templates mode="xpath" select=".."></xsl:apply-templates></xsl:variable>
170
+
171
+ <xsl:variable name="hAll">
172
+ <xsl:for-each select="*|@*">
173
+ <xsl:variable name="p" select="name()"/>
174
+ <xsl:choose>
175
+ <xsl:when test="count(.|../@*)=count(../@*)"><xsl:element name="{$p}"><xsl:attribute name="xv" ><xsl:value-of select="$p" /></xsl:attribute></xsl:element></xsl:when>
176
+ <xsl:when test="count( preceding-sibling::*[name()=$p]) != 0"></xsl:when>
177
+ <xsl:otherwise><xsl:copy/></xsl:otherwise>
178
+ </xsl:choose>
179
+ </xsl:for-each>
180
+ </xsl:variable>
181
+ <xsl:variable name="headers" select="exslt:node-set($hAll)/*" />
182
+ <table border="1">
183
+ <caption><!-- todo collapsible -->
184
+ <var>
185
+ <xsl:attribute name="title"><xsl:value-of select="$collectionPath"/>/<xsl:value-of select="$childName"/></xsl:attribute>
186
+ <xsl:value-of select="$childName"/>
187
+ </var>
188
+ </caption>
189
+ <thead>
190
+ <tr>
191
+ <xsl:for-each select="$headers">
192
+ <xsl:variable name="p" ><xsl:if test="name(.)=@xv">@</xsl:if><xsl:value-of select="local-name()"/></xsl:variable>
193
+ <xsl:variable name="fullPath" ><xsl:value-of select="$collectionPath"/>/<xsl:value-of select="$p"/></xsl:variable>
194
+ <xsl:variable name ="direction" >
195
+ <xsl:for-each select="$sorts">
196
+ <xsl:if test="@select=$p">
197
+ <xsl:choose>
198
+ <xsl:when test="@order='ascending'">&#9650;</xsl:when>
199
+ <xsl:when test="@order='descending'">&#9660;</xsl:when>
200
+ <xsl:otherwise>&#9674;</xsl:otherwise>
201
+ </xsl:choose>
202
+ </xsl:if>
203
+ </xsl:for-each>
204
+ </xsl:variable>
205
+ <xsl:variable name ="order" >
206
+ <xsl:for-each select="$sorts">
207
+ <xsl:if test="@select=$p">
208
+ <xsl:value-of select="count(preceding-sibling::xsl:sort) "/>
209
+ </xsl:if>
210
+ </xsl:for-each>
211
+ </xsl:variable>
212
+
213
+ <th><a href="#"
214
+ title="{$p}"
215
+ xv:sortpath="{$p}"
216
+ ><span><xsl:value-of select="$direction"/> <sub><xsl:value-of select="$order"/> </sub></span>
217
+
218
+ <xsl:value-of select="local-name()"/>
219
+ </a>
220
+ </th>
221
+ </xsl:for-each>
222
+ </tr>
223
+ </thead>
224
+ <tbody>
225
+ <xsl:for-each select="../*[name()=$childName]">
226
+ <xsl:variable name="rowNode" select="." />
227
+ <tr>
228
+ <xsl:for-each select="$headers">
229
+ <xsl:variable name="key" select="name()" />
230
+ <td>
231
+ <!-- xsl:attribute name="title"><xsl:apply-templates mode="xpath" select="."></xsl:apply-templates></xsl:attribute -->
232
+
233
+ <xsl:choose>
234
+ <xsl:when test="count( $rowNode/*[name()=$key]) &gt; 1">
235
+ <xsl:apply-templates select="$rowNode/*[name()=$key][1]" mode="DisplayAsTable" />
236
+ </xsl:when>
237
+ <xsl:otherwise>
238
+ <xsl:apply-templates mode="DisplayContent" select="$rowNode/*[name()=$key]|$rowNode/@*[name()=$key]" />
239
+ </xsl:otherwise>
240
+ </xsl:choose>
241
+
242
+ </td>
243
+ </xsl:for-each>
244
+ </tr>
245
+ </xsl:for-each>
246
+ </tbody>
247
+ </table>
248
+ </xsl:template>
249
+
250
+ <!-- XmlAspect/XOR/XPath/Dom2XPath.xsl -->
251
+ <!-- Root -->
252
+ <xsl:template match="/" mode="xpath">
253
+ <xsl:text>/</xsl:text>
254
+ </xsl:template>
255
+
256
+ <!-- Element -->
257
+ <xsl:template match="*" mode="xpath">
258
+ <!-- Process ancestors first -->
259
+ <xsl:apply-templates select=".." mode="xpath"/>
260
+
261
+ <!-- Output / if not already output by the root node -->
262
+ <xsl:if test="../..">/</xsl:if>
263
+
264
+ <!-- Output the name of the element -->
265
+ <xsl:value-of select="name()"/>
266
+
267
+ <!-- Add the element's position to pinpoint the element exactly -->
268
+ <xsl:if test="count(../*[name() = name(current())]) > 1">
269
+ <xsl:text>[</xsl:text>
270
+ <xsl:value-of
271
+ select="count(preceding-sibling::*[name() = name(current())]) +1"/>
272
+ <xsl:text>]</xsl:text>
273
+ </xsl:if>
274
+
275
+ <!-- Add 'name' predicate as a hint of which element -->
276
+ <xsl:if test="@name">
277
+ <xsl:text/>[@name="<xsl:value-of select="@name"/>"]<xsl:text/>
278
+ </xsl:if>
279
+ </xsl:template>
280
+
281
+ <!-- Attribute -->
282
+ <xsl:template match="@*" mode="xpath">
283
+ <!-- Process ancestors first -->
284
+ <xsl:apply-templates select=".." mode="xpath"/>
285
+
286
+ <!-- Output the name of the attribute -->
287
+ <xsl:text/>/@<xsl:value-of select="name()"/>
288
+
289
+ <!-- Output the attribute's value as a predicate -->
290
+ <xsl:text/>[.="<xsl:value-of select="."/>"]<xsl:text/>
291
+ </xsl:template>
292
+
293
+ </xsl:stylesheet>
package/storybook-static/demo/template.xsl ADDED
@@ -0,0 +1,46 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
3
+ <xsl:output method="html"/>
4
+
5
+ <xsl:template match="/">
6
+ <xsl:apply-templates select="//attributes"/>
7
+ </xsl:template>
8
+ <xsl:template match="attributes">
9
+ <h3 xmlns="http://www.w3.org/1999/xhtml">
10
+ <xsl:value-of select="title"></xsl:value-of>
11
+ </h3> <!-- title is an attribute in instance
12
+ mapped into /*/attributes/title -->
13
+ <xsl:if xmlns="http://www.w3.org/1999/xhtml" test="//smile"> <!-- data-smile DCE instance attribute,
14
+ mapped into /*/dataset/smile
15
+ used in condition -->
16
+ <!-- data-smile DCE instance attribute, used as HTML -->
17
+ <div>Smile as:
18
+ <xsl:value-of select="//smile"></xsl:value-of>
19
+ </div>
20
+ </xsl:if>
21
+ <!-- image would not be visible in sandbox, see live demo -->
22
+ <img xmlns="http://www.w3.org/1999/xhtml"
23
+ src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{pokemon-id}.svg"
24
+ alt="{title} image"/>
25
+ <!-- image-src and title are DCE instance attributes,
26
+ mapped into /*/attributes/
27
+ used within output attribute via curly brackets -->
28
+
29
+ <!-- `slot name=xxx` replaced with elements with `slot=xxx` attribute -->
30
+ <p xmlns="http://www.w3.org/1999/xhtml">
31
+ <xsl:value-of select="//*[@slot=&quot;description&quot;]"/>
32
+ </p>
33
+ <xsl:for-each xmlns="http://www.w3.org/1999/xhtml" select="//*[@pokemon-id]">
34
+ <!-- loop over payload elements with `pokemon-id` attribute -->
35
+ <button>
36
+ <img height="32"
37
+ src="https://unpkg.com/pokeapi-sprites@2.0.2/sprites/pokemon/other/dream-world/{@pokemon-id}.svg"
38
+ alt="{text()}"/>
39
+ <br/>
40
+ <xsl:value-of select="text()">
41
+ </xsl:value-of>
42
+ </button>
43
+
44
+ </xsl:for-each>
45
+ </xsl:template>
46
+ </xsl:stylesheet>
package/storybook-static/demo/tree.xml ADDED
@@ -0,0 +1,25 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <?xml-stylesheet type="text/xsl" href="tree.xsl"?>
3
+ <div xmlns="http://www.w3.org/1999/xhtml">
4
+ <payload>
5
+ <span slot=""></span>
6
+ <p slot="description">Bulbasaur is a cute Pokémon born with a large seed firmly affixed to its back;
7
+ the seed grows in size as the Pokémon does.
8
+ </p>
9
+ <span slot=""></span>
10
+ <ul slot="">
11
+ <li pokemon-id="2">ivysaur</li>
12
+ <li pokemon-id="3">venusaur</li>
13
+ </ul>
14
+ <span slot=""></span>
15
+ </payload>
16
+ <attributes>
17
+ <title>bulbasaur</title>
18
+ <data-smile>👼</data-smile>
19
+ <pokemon-id>1</pokemon-id>
20
+ </attributes>
21
+ <dataset>
22
+ <smile>👼</smile>
23
+ </dataset>
24
+ <slice></slice>
25
+ </div>
package/storybook-static/demo/tree.xsl ADDED
@@ -0,0 +1,33 @@
1
+ <xsl:stylesheet version="1.0"
2
+ xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
3
+ <xsl:output
4
+ method="html"
5
+ omit-xml-declaration="yes"
6
+ standalone="yes"
7
+ indent="yes"
8
+ />
9
+
10
+ <xsl:template match="/">
11
+ <xsl:apply-templates select="*"/>
12
+ </xsl:template>
13
+ <xsl:template match="*">
14
+ <details style="padding:0 1rem" open="open">
15
+ <summary>
16
+ <b style="color:green"><xsl:value-of select="name()"/></b>
17
+ <xsl:apply-templates select="@*"/>
18
+ </summary>
19
+ <xsl:value-of select="./text()"/>
20
+ <xsl:apply-templates select="*"/>
21
+ </details>
22
+ </xsl:template>
23
+ <xsl:template match="@*">
24
+ <code style="margin-left:1rem;color:brown"><xsl:value-of select="name()"/>="<xsl:value-of select="."/>"</code>
25
+ </xsl:template>
26
+ <xsl:template match="text()">
27
+ <p>
28
+ <xsl:value-of select="."/>
29
+ </p>
30
+ </xsl:template>
31
+
32
+
33
+ </xsl:stylesheet>
package/storybook-static/demo/wc-square.svg ADDED
@@ -0,0 +1 @@
1
+ <?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18"><defs><style>.cls-1{fill:#c2e6f1;}.cls-2{fill:#dcf1f7;}.cls-3{fill:#2d4554;}.cls-4{fill:#60cae5;}</style></defs><polygon class="cls-3" 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"/><path class="cls-2" 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"/><path class="cls-2" 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"/><path class="cls-1" 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"/><path class="cls-2" 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"/><path class="cls-2" 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"/><path class="cls-2" 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"/><path class="cls-2" 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"/><path class="cls-4" 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"/><path class="cls-4" 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"/><path class="cls-4" 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"/><path class="cls-4" 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"/><path class="cls-4" 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"/><path class="cls-4" 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"/><path class="cls-4" 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"/><path class="cls-4" 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"/><path class="cls-2" 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"/><path class="cls-1" 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"/><path class="cls-1" 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"/><path class="cls-2" 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"/><path class="cls-1" 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"/><path class="cls-1" 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"/></svg>