@epa-wg/custom-element-dist 0.0.26 → 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 (137) hide show
  1. package/.idea/custom-element-dist.iml +1 -5
  2. package/.storybook/preview.ts +1 -1
  3. package/README.md +4 -4
  4. package/bin/vitest/vitest-browser-importmaps.mjs +20 -20
  5. package/coverage/coverage-final.json +9 -9
  6. package/coverage/index.html +25 -25
  7. package/coverage/src/custom-element/coverage.svg +1 -1
  8. package/coverage/src/custom-element/custom-element.js/coverage.svg +1 -1
  9. package/coverage/src/custom-element/custom-element.js.html +467 -308
  10. package/coverage/src/custom-element/demo/index.html +1 -1
  11. package/coverage/src/custom-element/demo/z.js.html +1 -1
  12. package/coverage/src/custom-element/http-request.js.html +12 -12
  13. package/coverage/src/custom-element/index.html +20 -20
  14. package/coverage/src/custom-element/local-storage.js.html +56 -41
  15. package/coverage/src/custom-element/location-element.js.html +4 -4
  16. package/coverage/src/custom-element/module-url.js/coverage.svg +1 -1
  17. package/coverage/src/custom-element/module-url.js.html +16 -10
  18. package/coverage/src/index.html +1 -1
  19. package/coverage/src/mocks/handlers.ts.html +1 -1
  20. package/coverage/src/mocks/index.html +1 -1
  21. package/coverage/src/stories/attributes.test.stories.ts.html +9 -12
  22. package/coverage/src/stories/coverage.svg +1 -1
  23. package/coverage/src/stories/css.test.stories.ts.html +1 -1
  24. package/coverage/src/stories/dom-merge.test.stories.ts.html +15 -9
  25. package/coverage/src/stories/external-template.test.stories.ts.html +8 -11
  26. package/coverage/src/stories/form.test.stories.ts.html +1 -1
  27. package/coverage/src/stories/http-request.stories.ts.html +1 -1
  28. package/coverage/src/stories/index.html +26 -26
  29. package/coverage/src/stories/local-storage.test.stories.ts/coverage.svg +1 -1
  30. package/coverage/src/stories/local-storage.test.stories.ts.html +87 -63
  31. package/coverage/src/stories/location-element.test.stories.ts.html +1 -1
  32. package/coverage/src/stories/module-url.test.stories.ts.html +1 -1
  33. package/coverage/src/stories/set-url.test.stories.ts.html +1 -1
  34. package/coverage/src/stories/slice-events.test.stories.ts.html +1 -1
  35. package/coverage/src/stories/slots.test.stories.ts.html +1 -1
  36. package/coverage/src/stories/testStoryBook.ts.html +1 -1
  37. package/coverage/src/stories/version-select.test.stories.ts.html +1 -1
  38. package/coverage/src/sum.ts.html +1 -1
  39. package/dist/{custom-element-b7c_7Kz4.js → custom-element-BMMsP1Dy.js} +204 -156
  40. package/dist/custom-element-CPSk7s0j.cjs +87 -0
  41. package/dist/custom-element-bundle.cjs +1 -1
  42. package/dist/custom-element-bundle.js +28 -25
  43. package/dist/demo/a.svg +27 -0
  44. package/dist/demo/demo.css +6 -7
  45. package/dist/demo/external-template.html +3 -3
  46. package/dist/demo/npm-versions-demo.html +21 -8
  47. package/dist/demo/npm-versions.html +54 -25
  48. package/dist/demo/s.xml +3 -28
  49. package/dist/demo/s.xslt +51 -92
  50. package/dist/demo/z.html +32 -61
  51. package/dist/demo/z1.html +34 -0
  52. package/dist/local-storage-78EivJ_B.cjs +1 -0
  53. package/dist/local-storage-DzmNKzgN.js +66 -0
  54. package/dist/mockServiceWorker.js +1 -1
  55. package/package.json +27 -25
  56. package/public/demo/a.svg +27 -0
  57. package/public/demo/demo.css +6 -7
  58. package/public/demo/external-template.html +3 -3
  59. package/public/demo/npm-versions-demo.html +21 -8
  60. package/public/demo/npm-versions.html +54 -25
  61. package/public/demo/s.xml +3 -28
  62. package/public/demo/s.xslt +51 -92
  63. package/public/demo/z.html +32 -61
  64. package/public/demo/z1.html +34 -0
  65. package/public/mockServiceWorker.js +1 -1
  66. package/src/custom-element/custom-element.js +67 -14
  67. package/src/custom-element/demo/a.svg +27 -0
  68. package/src/custom-element/demo/demo.css +6 -7
  69. package/src/custom-element/demo/external-template.html +3 -3
  70. package/src/custom-element/demo/npm-versions-demo.html +21 -8
  71. package/src/custom-element/demo/npm-versions.html +54 -25
  72. package/src/custom-element/demo/s.xml +3 -28
  73. package/src/custom-element/demo/s.xslt +51 -92
  74. package/src/custom-element/demo/z.html +32 -61
  75. package/src/custom-element/demo/z1.html +34 -0
  76. package/src/custom-element/ide/web-types-dce.json +1 -1
  77. package/src/custom-element/ide/web-types-xsl.json +1 -1
  78. package/src/custom-element/index.html +19 -2
  79. package/src/custom-element/local-storage.js +19 -14
  80. package/src/custom-element/module-url.js +3 -2
  81. package/src/mocks/versions.mock.ts +8 -8
  82. package/src/stories/__screenshots__/http-request.test.ts/http-request-url-change-1.png +0 -0
  83. package/src/stories/attributes.test.stories.ts +3 -4
  84. package/src/stories/dom-merge.test.stories.ts +9 -7
  85. package/src/stories/external-template.test.stories.ts +2 -3
  86. package/src/stories/local-storage.test.stories.ts +61 -53
  87. package/src/sum.test.ts +5 -5
  88. package/src/sum.ts +3 -3
  89. package/storybook-static/assets/{Color-KGDBMAHA-CH-YyWYq.js → Color-KGDBMAHA-CJo5gHY3.js} +1 -1
  90. package/storybook-static/assets/{Configure-DFL_bm2M.js → Configure-DdXbGKhY.js} +1 -1
  91. package/storybook-static/assets/{DocsRenderer-PKQXORMH-Bz-_1hmS.js → DocsRenderer-PKQXORMH-DLnpL5hE.js} +2 -2
  92. package/storybook-static/assets/{attributes.test.stories-DIQXccHc.js → attributes.test.stories-Bt5V18qO.js} +10 -11
  93. package/storybook-static/assets/{css.test.stories-BV2hi4CY.js → css.test.stories-CGYy2daE.js} +1 -1
  94. package/storybook-static/assets/{custom-element-wn23PUwN.js → custom-element-D8hcDZHh.js} +116 -82
  95. package/storybook-static/assets/{dom-merge.test.stories-Dws0C2-g.js → dom-merge.test.stories-XlsZ0UvX.js} +22 -20
  96. package/storybook-static/assets/{external-template.test.stories-BHO48b0j.js → external-template.test.stories-Bt_Pflu8.js} +7 -8
  97. package/storybook-static/assets/{form.test.stories-dv9mwp24.js → form.test.stories-B0NoI8wm.js} +1 -1
  98. package/storybook-static/assets/{handlers-CaCq2ZPF.js → handlers-B5969HUu.js} +13 -13
  99. package/storybook-static/assets/{http-request.stories-B2ke7LtS.js → http-request.stories-B2skuTFV.js} +1 -1
  100. package/storybook-static/assets/iframe-Dfrt81rk.js +2 -0
  101. package/storybook-static/assets/{index-BnXBQqj9.js → index-Ay195x2L.js} +4 -4
  102. package/storybook-static/assets/{index-sm7QlJZE.js → index-C3ChPTMh.js} +1 -1
  103. package/storybook-static/assets/{index-Dz4OaB2k.js → index-C7lvoJNv.js} +1 -1
  104. package/storybook-static/assets/{index-Cpxqn5iQ.js → index-Gpdhz4ab.js} +1 -1
  105. package/storybook-static/assets/local-storage.test.stories-DfY6feqG.js +420 -0
  106. package/storybook-static/assets/{location-element.test.stories-BiFvBop7.js → location-element.test.stories-944AotIJ.js} +1 -1
  107. package/storybook-static/assets/{module-url.test.stories-BXoM34tX.js → module-url.test.stories-DSKcwApl.js} +1 -1
  108. package/storybook-static/assets/preview-AJR7rVPD.js +52 -0
  109. package/storybook-static/assets/{preview-Cg7hXPRq.js → preview-CadgX-4y.js} +2 -2
  110. package/storybook-static/assets/{set-url.test.stories-Cg5Z0r7x.js → set-url.test.stories-DjLHKkEh.js} +1 -1
  111. package/storybook-static/assets/{slice-events.test.stories-D_ttGp3g.js → slice-events.test.stories-8I_BrHd6.js} +1 -1
  112. package/storybook-static/assets/{slots.test.stories-DBNXOm0T.js → slots.test.stories-CvZz4jyP.js} +1 -1
  113. package/storybook-static/assets/{version-select.test.stories-CgV3UCim.js → version-select.test.stories-DSxmJylI.js} +1 -1
  114. package/storybook-static/demo/a.svg +27 -0
  115. package/storybook-static/demo/demo.css +6 -7
  116. package/storybook-static/demo/external-template.html +3 -3
  117. package/storybook-static/demo/npm-versions-demo.html +21 -8
  118. package/storybook-static/demo/npm-versions.html +54 -25
  119. package/storybook-static/demo/s.xml +3 -28
  120. package/storybook-static/demo/s.xslt +51 -92
  121. package/storybook-static/demo/z.html +32 -61
  122. package/storybook-static/demo/z1.html +34 -0
  123. package/storybook-static/iframe.html +1 -1
  124. package/storybook-static/mockServiceWorker.js +1 -1
  125. package/storybook-static/project.json +1 -1
  126. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js +39 -36
  127. package/storybook-static/sb-addons/chromatic-com-storybook-9/manager-bundle.js.LEGAL.txt +38 -1
  128. package/.idea/codeStyles/codeStyleConfig.xml +0 -5
  129. package/.idea/compiler.xml +0 -6
  130. package/.idea/inspectionProfiles/Project_Default.xml +0 -6
  131. package/.vscode/settings.json +0 -24
  132. package/dist/custom-element-CckoVsvO.cjs +0 -53
  133. package/dist/local-storage-Boafngui.cjs +0 -1
  134. package/dist/local-storage-BqDEu2kF.js +0 -59
  135. package/storybook-static/assets/iframe-D4Sos1HO.js +0 -2
  136. package/storybook-static/assets/local-storage.test.stories-BpogLNq-.js +0 -419
  137. package/storybook-static/assets/preview-oHxXRSIu.js +0 -48
@@ -23,9 +23,9 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">6.06% </span>
26
+ <span class="strong">7.23% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>14/231</span>
28
+ <span class='fraction'>17/235</span>
29
29
  </div>
30
30
 
31
31
 
@@ -37,16 +37,16 @@
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">12.5% </span>
40
+ <span class="strong">13.33% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>2/16</span>
42
+ <span class='fraction'>2/15</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">5.88% </span>
47
+ <span class="strong">7.07% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>13/221</span>
49
+ <span class='fraction'>16/226</span>
50
50
  </div>
51
51
 
52
52
 
@@ -463,7 +463,16 @@
463
463
  <a name='L398'></a><a href='#L398'>398</a>
464
464
  <a name='L399'></a><a href='#L399'>399</a>
465
465
  <a name='L400'></a><a href='#L400'>400</a>
466
- <a name='L401'></a><a href='#L401'>401</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
466
+ <a name='L401'></a><a href='#L401'>401</a>
467
+ <a name='L402'></a><a href='#L402'>402</a>
468
+ <a name='L403'></a><a href='#L403'>403</a>
469
+ <a name='L404'></a><a href='#L404'>404</a>
470
+ <a name='L405'></a><a href='#L405'>405</a>
471
+ <a name='L406'></a><a href='#L406'>406</a>
472
+ <a name='L407'></a><a href='#L407'>407</a>
473
+ <a name='L408'></a><a href='#L408'>408</a>
474
+ <a name='L409'></a><a href='#L409'>409</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
475
+ <span class="cline-any cline-neutral">&nbsp;</span>
467
476
  <span class="cline-any cline-neutral">&nbsp;</span>
468
477
  <span class="cline-any cline-neutral">&nbsp;</span>
469
478
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -515,6 +524,10 @@
515
524
  <span class="cline-any cline-neutral">&nbsp;</span>
516
525
  <span class="cline-any cline-neutral">&nbsp;</span>
517
526
  <span class="cline-any cline-neutral">&nbsp;</span>
527
+ <span class="cline-any cline-yes">1x</span>
528
+ <span class="cline-any cline-yes">1x</span>
529
+ <span class="cline-any cline-yes">1x</span>
530
+ <span class="cline-any cline-neutral">&nbsp;</span>
518
531
  <span class="cline-any cline-neutral">&nbsp;</span>
519
532
  <span class="cline-any cline-yes">1x</span>
520
533
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -531,15 +544,17 @@
531
544
  <span class="cline-any cline-no">&nbsp;</span>
532
545
  <span class="cline-any cline-no">&nbsp;</span>
533
546
  <span class="cline-any cline-no">&nbsp;</span>
534
- <span class="cline-any cline-neutral">&nbsp;</span>
535
547
  <span class="cline-any cline-no">&nbsp;</span>
536
548
  <span class="cline-any cline-no">&nbsp;</span>
537
549
  <span class="cline-any cline-no">&nbsp;</span>
550
+ <span class="cline-any cline-neutral">&nbsp;</span>
551
+ <span class="cline-any cline-no">&nbsp;</span>
538
552
  <span class="cline-any cline-no">&nbsp;</span>
539
553
  <span class="cline-any cline-no">&nbsp;</span>
540
554
  <span class="cline-any cline-no">&nbsp;</span>
541
555
  <span class="cline-any cline-neutral">&nbsp;</span>
542
556
  <span class="cline-any cline-no">&nbsp;</span>
557
+ <span class="cline-any cline-neutral">&nbsp;</span>
543
558
  <span class="cline-any cline-no">&nbsp;</span>
544
559
  <span class="cline-any cline-no">&nbsp;</span>
545
560
  <span class="cline-any cline-no">&nbsp;</span>
@@ -548,8 +563,8 @@
548
563
  <span class="cline-any cline-no">&nbsp;</span>
549
564
  <span class="cline-any cline-no">&nbsp;</span>
550
565
  <span class="cline-any cline-neutral">&nbsp;</span>
551
- <span class="cline-any cline-neutral">&nbsp;</span>
552
566
  <span class="cline-any cline-no">&nbsp;</span>
567
+ <span class="cline-any cline-neutral">&nbsp;</span>
553
568
  <span class="cline-any cline-no">&nbsp;</span>
554
569
  <span class="cline-any cline-no">&nbsp;</span>
555
570
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -568,6 +583,7 @@
568
583
  <span class="cline-any cline-no">&nbsp;</span>
569
584
  <span class="cline-any cline-no">&nbsp;</span>
570
585
  <span class="cline-any cline-no">&nbsp;</span>
586
+ <span class="cline-any cline-no">&nbsp;</span>
571
587
  <span class="cline-any cline-neutral">&nbsp;</span>
572
588
  <span class="cline-any cline-no">&nbsp;</span>
573
589
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -866,10 +882,11 @@
866
882
  <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">// noinspection DuplicatedCode
867
883
  &nbsp;
868
884
  import type { StoryObj } from '@storybook/web-components';
869
- import {expect, getByTestId, within} from '@storybook/test';
885
+ import {expect, userEvent, within} from '@storybook/test';
870
886
  &nbsp;
871
887
  import '../custom-element/custom-element.js';
872
888
  import '../custom-element/local-storage.js';
889
+ import {localStorage_clear, localStorage_removeItem, localStorageSetItem} from "../custom-element";
873
890
  &nbsp;
874
891
  type TProps = { title: string; slice: string; key: string; value:string; live:string; body:string};
875
892
  const defs: TProps =
@@ -915,41 +932,47 @@ const meta =
915
932
  &nbsp;
916
933
  export default meta;
917
934
  &nbsp;
935
+ window['localStorageSetItem'] = localStorageSetItem;
936
+ window['localStorage_clear'] = localStorage_clear;
937
+ window['localStorage_removeItem'] = localStorage_removeItem;
938
+ &nbsp;
918
939
  export const Demo:Story =
919
940
  { args : {title: 'live value', live:'live', body:`
920
941
  &lt;input placeholder="value for localStorage" id="textinput"
921
942
  slice="${defs.slice}"
922
943
  value="{ //${defs.slice} ?? '${ defs.value }' }"/&gt;
923
- &lt;button onclick="localStorage.setItem('${defs.key}',textinput.value )"&gt;set&lt;/button&gt;
924
- &lt;button onclick="localStorage.setItem('${defs.key}','text value' )"&gt;text value&lt;/button&gt;
925
- &lt;button onclick="localStorage.setItem('${defs.key}','another text')"&gt;another text&lt;/button&gt;
926
- &lt;button onclick="localStorage.removeItem('${defs.key}' )"&gt;set blank&lt;/button&gt;
944
+ &lt;button onclick="localStorageSetItem('${defs.key}',textinput.value )"&gt;set&lt;/button&gt;
945
+ &lt;button onclick="localStorageSetItem('${defs.key}','text value' )"&gt;text value&lt;/button&gt;
946
+ &lt;button onclick="localStorageSetItem('${defs.key}','another text')"&gt;another text&lt;/button&gt;
947
+ &lt;button onclick="localStorage_removeItem('${defs.key}' )"&gt;set blank&lt;/button&gt;
927
948
  `}
928
949
  , play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
929
950
  {
951
+ <span class="cstat-no" title="statement not covered" > localStorage_clear();</span>
930
952
  const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
931
953
  <span class="cstat-no" title="statement not covered" > await canvas.findByText(Demo.args!.title as string);</span>
932
954
  const val = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()=&gt; <span class="cstat-no" title="statement not covered" >c</span>anvas.getByTestId('slice-value').textContent</span></span>
933
- , byText = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >txt =&gt; <span class="cstat-no" title="statement not covered" >c</span>anvas.getByText(txt);</span></span>
955
+ <span class="cstat-no" title="statement not covered" > await userEvent.click(await canvas.findByText('set blank'));</span>
956
+ <span class="cstat-no" title="statement not covered" > await expect(localStorage.getItem(defs.key)).toEqual(null, 'from localStorage');</span>
957
+ <span class="cstat-no" title="statement not covered" > await expect( val() ).toEqual('');</span>
934
958
  &nbsp;
935
- <span class="cstat-no" title="statement not covered" > byText('set blank').click();</span>
936
- <span class="cstat-no" title="statement not covered" > expect(localStorage.getItem(defs.key)).toEqual(null, 'from localStorage');</span>
937
- <span class="cstat-no" title="statement not covered" > expect( val() ).toEqual('');</span>
938
- <span class="cstat-no" title="statement not covered" > byText('text value').click();</span>
959
+ <span class="cstat-no" title="statement not covered" > await userEvent.click(canvas.getByText('text value'));</span>
939
960
  <span class="cstat-no" title="statement not covered" > await sleep(10);</span>
940
- <span class="cstat-no" title="statement not covered" > expect( val() ).toEqual('text value');</span>
961
+ <span class="cstat-no" title="statement not covered" > await expect(localStorage.getItem(defs.key)).toEqual('text value', 'from localStorage');</span>
962
+ <span class="cstat-no" title="statement not covered" > await expect( val() ).toEqual('text value');</span>
941
963
  &nbsp;
942
964
  <span class="cstat-no" title="statement not covered" > window['textinput'].value = 'textinput.value';</span>
943
- <span class="cstat-no" title="statement not covered" > byText('set').click();</span>
965
+ &nbsp;
966
+ <span class="cstat-no" title="statement not covered" > await userEvent.click(canvas.getByText('set'));</span>
944
967
  <span class="cstat-no" title="statement not covered" > await sleep(10);</span>
945
968
  <span class="cstat-no" title="statement not covered" > expect( val() ).toEqual('textinput.value');</span>
946
969
  &nbsp;
947
- <span class="cstat-no" title="statement not covered" > byText('another text').click();</span>
970
+ <span class="cstat-no" title="statement not covered" > await userEvent.click(canvas.getByText('another text'));</span>
948
971
  <span class="cstat-no" title="statement not covered" > await sleep(10);</span>
949
972
  <span class="cstat-no" title="statement not covered" > expect( val() ).toEqual('another text');</span>
950
973
  &nbsp;
974
+ <span class="cstat-no" title="statement not covered" > await userEvent.click(canvas.getByText('set blank'));</span>
951
975
  &nbsp;
952
- <span class="cstat-no" title="statement not covered" > byText('set blank').click();</span>
953
976
  <span class="cstat-no" title="statement not covered" > await sleep(10);</span>
954
977
  <span class="cstat-no" title="statement not covered" > expect( val() ).toEqual('');</span>
955
978
  },
@@ -959,31 +982,32 @@ export const Demo:Story =
959
982
  export const AlwaysOverride:Story =
960
983
  { args : {title: 'AlwaysOverride', live:'', value:'ABC', body:`
961
984
  buttons are changing the localStorage value, but without 'live' attribute slice ^^ from &lt;i&gt;local-storage&lt;/i&gt; is not updated&lt;br/&gt;
962
- &lt;button onclick="localStorage.setItem('${defs.key}','text value' )"&gt;text value&lt;/button&gt;
963
- &lt;button onclick="localStorage.removeItem('${defs.key}' )"&gt;set blank&lt;/button&gt;
985
+ &lt;button onclick="localStorageSetItem('${defs.key}','text value')"&gt;text value&lt;/button&gt;
986
+ &lt;button onclick="localStorage_removeItem('${defs.key}')"&gt;set blank&lt;/button&gt;
964
987
  `}
965
988
  , play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
966
989
  {
967
990
  const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
968
991
  <span class="cstat-no" title="statement not covered" > await canvas.findByText(AlwaysOverride.args!.title as string);</span>
969
- const val = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()=&gt; <span class="cstat-no" title="statement not covered" >c</span>anvas.getByTestId('slice-value').textContent</span></span>
970
- , byText = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >txt =&gt; <span class="cstat-no" title="statement not covered" >c</span>anvas.getByText(txt);</span></span>
992
+ const val = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >()=&gt; <span class="cstat-no" title="statement not covered" >c</span>anvas.getByTestId('slice-value').textContent;</span></span>
993
+ const click = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >async (t</span>ext)=&gt; <span class="cstat-no" title="statement not covered" >await userEvent.click( await canvas.findByText(text) );</span></span>
994
+ <span class="cstat-no" title="statement not covered" > await sleep(10);</span>
971
995
  &nbsp;
972
- <span class="cstat-no" title="statement not covered" > expect(localStorage.getItem(defs.key)).toEqual('ABC', 'from localStorage');</span>
996
+ <span class="cstat-no" title="statement not covered" > await expect( localStorage.getItem(defs.key)).toEqual('ABC');</span>
973
997
  &nbsp;
974
- <span class="cstat-no" title="statement not covered" > byText('set blank').click();</span>
975
- <span class="cstat-no" title="statement not covered" > expect(localStorage.getItem(defs.key)).toEqual(null, 'from localStorage');</span>
998
+ <span class="cstat-no" title="statement not covered" > await click('set blank')</span>
999
+ <span class="cstat-no" title="statement not covered" > await expect(localStorage.getItem(defs.key)).toEqual(null, 'from localStorage');</span>
976
1000
  <span class="cstat-no" title="statement not covered" > await sleep(10);</span>
977
- <span class="cstat-no" title="statement not covered" > expect( val() ).toEqual('ABC');</span>
1001
+ <span class="cstat-no" title="statement not covered" > await expect( val() ).toEqual('ABC');</span>
978
1002
  &nbsp;
979
- <span class="cstat-no" title="statement not covered" > byText('text value').click();</span>
1003
+ <span class="cstat-no" title="statement not covered" > await click('text value');</span>
980
1004
  <span class="cstat-no" title="statement not covered" > await sleep(10);</span>
981
- <span class="cstat-no" title="statement not covered" > expect(localStorage.getItem(defs.key)).toEqual('text value', 'from localStorage');</span>
982
- <span class="cstat-no" title="statement not covered" > expect( val() ).toEqual('ABC');</span>
1005
+ <span class="cstat-no" title="statement not covered" > await expect(localStorage.getItem(defs.key)).toEqual('text value', 'from localStorage');</span>
1006
+ <span class="cstat-no" title="statement not covered" > await expect( val() ).toEqual('ABC');</span>
983
1007
  &nbsp;
984
- <span class="cstat-no" title="statement not covered" > byText('set blank').click();</span>
1008
+ <span class="cstat-no" title="statement not covered" > await click('set blank');</span>
985
1009
  <span class="cstat-no" title="statement not covered" > await sleep(10);</span>
986
- <span class="cstat-no" title="statement not covered" > expect( val() ).toEqual('ABC');</span>
1010
+ <span class="cstat-no" title="statement not covered" > await expect( val() ).toEqual('ABC');</span>
987
1011
  },
988
1012
  };
989
1013
  &nbsp;
@@ -991,15 +1015,15 @@ export const FromStorageWithDefault:Story =
991
1015
  { args : {title: 'live value with defaults', live:'', value:'ABC', body:`
992
1016
  &nbsp;
993
1017
  &lt;local-storage key="attr2Key" slice="attr2-key" type="text" live="live" slice-value="@value ?? 'DEF2'"&gt;&lt;/local-storage&gt;
994
- &lt;button onclick="localStorage.removeItem('attr2Key')"&gt;clear key&lt;/button&gt;
995
- &lt;button onclick="localStorage.setItem('attr2Key','attr2Key value')"&gt;update attr2-key value&lt;/button&gt;
1018
+ &lt;button onclick="localStorage_removeItem('attr2Key')"&gt;clear key&lt;/button&gt;
1019
+ &lt;button onclick="localStorageSetItem('attr2Key','attr2Key value')"&gt;update attr2-key value&lt;/button&gt;
996
1020
  //attr2-key: &lt;code data-testid="key2-value"&gt;{//attr2-key}&lt;/code&gt;&lt;br/&gt;
997
1021
  &nbsp;
998
1022
  &lt;local-storage key="attr3Key" slice="attr3-key" type="text" live="live" slice-value="@value ?? 'DEF3'"&gt;&lt;/local-storage&gt;
999
- &lt;button onclick="localStorage.removeItem('attr3Key')"&gt;clear attr3-key key&lt;/button&gt;
1000
- &lt;button onclick="localStorage.setItem('attr3Key','attr3Key value')"&gt;update attr3-key value&lt;/button&gt;
1023
+ &lt;button onclick="localStorage_removeItem('attr3Key')"&gt;clear attr3-key key&lt;/button&gt;
1024
+ &lt;button onclick="localStorageSetItem('attr3Key','attr3Key value')"&gt;update attr3-key value&lt;/button&gt;
1001
1025
  //attr3-key: &lt;code data-testid="key3-value"&gt;{//attr3-key}&lt;/code&gt;&lt;br/&gt;
1002
- &lt;button onclick="localStorage.clear()"&gt;clear localStorage&lt;/button&gt;
1026
+ &lt;button onclick="localStorage_clear()"&gt;clear localStorage&lt;/button&gt;
1003
1027
  `}
1004
1028
  , play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
1005
1029
  {
@@ -1042,39 +1066,39 @@ export const TypeAttribute:Story =
1042
1066
  &lt;local-storage key="jsonKey" slice="json-key" type="json" live="live"&gt;&lt;/local-storage&gt;
1043
1067
  &lt;input id="typesinput" placeholder="set value"&gt;&lt;button onclick="
1044
1068
  'textKey,dateKey,timeKey,localDateTimeKey,numberKey,jsonKey'.split(',')
1045
- .map( k=&gt; localStorage.setItem(k, typesinput.value) )
1069
+ .map( k=&gt; localStorageSetItem(k, typesinput.value) )
1046
1070
  "&gt; set to all&lt;/button&gt;&lt;br&gt;
1047
1071
  &lt;hr&gt;
1048
1072
  text-key:
1049
- &lt;button onclick="localStorage.setItem('textKey', 'ABC' )"&gt;ABC&lt;/button&gt;
1073
+ &lt;button onclick="localStorageSetItem('textKey', 'ABC' )"&gt;ABC&lt;/button&gt;
1050
1074
  &lt;code data-testid="text-key"&gt;{//text-key }&lt;/code&gt;&lt;br&gt;
1051
1075
  date-key:
1052
- &lt;button onclick="localStorage.setItem('dateKey', '2024-04-20T03:58:42.131Z')"&gt;2024-04-21T03:58:42.131Z &lt;/button&gt;
1053
- &lt;button onclick="localStorage.setItem('dateKey', new Date(Date.now()).toISOString())"&gt;now &lt;/button&gt;
1054
- &lt;button onclick="localStorage.setItem('dateKey', 'ABC' )"&gt;date ABC - invalid &lt;/button&gt;
1076
+ &lt;button onclick="localStorageSetItem('dateKey', '2024-04-20T03:58:42.131Z')"&gt;2024-04-21T03:58:42.131Z &lt;/button&gt;
1077
+ &lt;button onclick="localStorageSetItem('dateKey', new Date(Date.now()).toISOString())"&gt;now &lt;/button&gt;
1078
+ &lt;button onclick="localStorageSetItem('dateKey', 'ABC' )"&gt;date ABC - invalid &lt;/button&gt;
1055
1079
  &lt;code data-testid="date-key"&gt;{//date-key }&lt;/code&gt;&lt;br&gt;
1056
1080
  time-key:
1057
- &lt;button onclick="localStorage.setItem('timeKey', '13:30')"&gt;13:30 &lt;/button&gt;
1081
+ &lt;button onclick="localStorageSetItem('timeKey', '13:30')"&gt;13:30 &lt;/button&gt;
1058
1082
  &lt;code data-testid="time-key"&gt;{//time-key }&lt;/code&gt;&lt;br&gt;
1059
1083
  local-date-time:
1060
- &lt;button onclick="localStorage.setItem('localDateTimeKey', '1977-04-01T14:00:30')"&gt;1977-04-01T14:00:30 - local &lt;/button&gt;
1084
+ &lt;button onclick="localStorageSetItem('localDateTimeKey', '1977-04-01T14:00:30')"&gt;1977-04-01T14:00:30 - local &lt;/button&gt;
1061
1085
  &lt;code data-testid="local-date-time"&gt;{//local-date-time}&lt;/code&gt;&lt;br&gt;
1062
1086
  number-key:
1063
- &lt;button onclick="localStorage.setItem('numberKey', '2024' )"&gt;2024 - number &lt;/button&gt;
1064
- &lt;button onclick="localStorage.setItem('numberKey', '24' )"&gt;24 - number &lt;/button&gt;
1065
- &lt;button onclick="localStorage.setItem('numberKey', '1.23456e+5' )"&gt;1.23456e+5 &lt;/button&gt;
1066
- &lt;button onclick="localStorage.setItem('numberKey', '0001' )"&gt;0001 &lt;/button&gt;
1067
- &lt;button onclick="localStorage.setItem('numberKey', '000' )"&gt;000 &lt;/button&gt;
1068
- &lt;button onclick="localStorage.setItem('numberKey', '0' )"&gt;0 &lt;/button&gt;
1069
- &lt;button onclick="localStorage.setItem('numberKey', 'ABC' )"&gt;ABC - invalid, NaN &lt;/button&gt;
1087
+ &lt;button onclick="localStorageSetItem('numberKey', '2024' )"&gt;2024 - number &lt;/button&gt;
1088
+ &lt;button onclick="localStorageSetItem('numberKey', '24' )"&gt;24 - number &lt;/button&gt;
1089
+ &lt;button onclick="localStorageSetItem('numberKey', '1.23456e+5' )"&gt;1.23456e+5 &lt;/button&gt;
1090
+ &lt;button onclick="localStorageSetItem('numberKey', '0001' )"&gt;0001 &lt;/button&gt;
1091
+ &lt;button onclick="localStorageSetItem('numberKey', '000' )"&gt;000 &lt;/button&gt;
1092
+ &lt;button onclick="localStorageSetItem('numberKey', '0' )"&gt;0 &lt;/button&gt;
1093
+ &lt;button onclick="localStorageSetItem('numberKey', 'ABC' )"&gt;ABC - invalid, NaN &lt;/button&gt;
1070
1094
  &lt;code data-testid="number-key"&gt;{//number-key }&lt;/code&gt; &lt;br&gt;
1071
1095
  &lt;fieldset&gt;
1072
1096
  &lt;legend&gt;json-key: &lt;/legend&gt;
1073
1097
  &nbsp;
1074
- &lt;button onclick="localStorage.setItem('jsonKey', JSON.stringify('ABC'))"&gt;'ABC' - string &lt;/button&gt;
1075
- &lt;button onclick="localStorage.setItem('jsonKey', JSON.stringify(12.345))"&gt;12.345 - number &lt;/button&gt;
1076
- &lt;button onclick="localStorage.setItem('jsonKey', JSON.stringify(window.JsonSample) )"&gt;a:1,b:'B' -json &lt;/button&gt;
1077
- &lt;button onclick="localStorage.setItem('jsonKey', 'ABC' )"&gt;ABC - invalid &lt;/button&gt;&lt;br&gt;
1098
+ &lt;button onclick="localStorageSetItem('jsonKey', JSON.stringify('ABC'))"&gt;'ABC' - string &lt;/button&gt;
1099
+ &lt;button onclick="localStorageSetItem('jsonKey', JSON.stringify(12.345))"&gt;12.345 - number &lt;/button&gt;
1100
+ &lt;button onclick="localStorageSetItem('jsonKey', JSON.stringify(window.JsonSample) )"&gt;a:1,b:'B' -json &lt;/button&gt;
1101
+ &lt;button onclick="localStorageSetItem('jsonKey', 'ABC' )"&gt;ABC - invalid &lt;/button&gt;&lt;br&gt;
1078
1102
  json-key:&lt;code data-testid="json-key"&gt;&lt;xsl:apply-templates select="//json-key/value/@*|//json-key/text()|//json-key/value/text()" mode="json"&gt;&lt;/xsl:apply-templates&gt;&lt;/code&gt;
1079
1103
  &lt;/fieldset&gt;
1080
1104
  &lt;xsl:template mode="json" match="*|@*"&gt;
@@ -1089,8 +1113,8 @@ export const TypeAttribute:Story =
1089
1113
  <span class="cstat-no" title="statement not covered" > await canvas.findByText(TypeAttribute.args!.title as string);</span>
1090
1114
  const byText = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >txt =&gt; <span class="cstat-no" title="statement not covered" >c</span>anvas.getByText(txt)</span></span>
1091
1115
  , val = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >testId =&gt; <span class="cstat-no" title="statement not covered" >c</span>anvas.getByTestId(testId).textContent</span></span>
1092
- , expectVal = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(k</span>ey,value) =&gt; { <span class="cstat-no" title="statement not covered" >expect(val( key )).toEqual( value, key ) }</span>;</span>
1093
- <span class="cstat-no" title="statement not covered" > localStorage.clear(); // cleanup before test</span>
1116
+ , expectVal = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >(k</span>ey,value) =&gt; { <span class="cstat-no" title="statement not covered" >expect(val( key ).trim()).toEqual( value, key ) }</span>;</span>
1117
+ <span class="cstat-no" title="statement not covered" > localStorage_clear(); // cleanup before test</span>
1094
1118
  <span class="cstat-no" title="statement not covered" > await sleep(10);</span>
1095
1119
  &nbsp;
1096
1120
  <span class="cstat-no" title="statement not covered" > expectVal('text-key' ,'');</span>
@@ -1250,7 +1274,7 @@ export const TypeAttribute:Story =
1250
1274
  <span class="cstat-no" title="statement not covered" > expectVal('time-key' ,'' );</span>
1251
1275
  <span class="cstat-no" title="statement not covered" > expectVal('local-date-time','' );</span>
1252
1276
  <span class="cstat-no" title="statement not covered" > expectVal('number-key' ,'NaN' );</span>
1253
- <span class="cstat-no" title="statement not covered" > expectVal('json-key' ,'\na : 1b : B' );</span>
1277
+ <span class="cstat-no" title="statement not covered" > expectVal('json-key' ,'a : 1b : B' );</span>
1254
1278
  },
1255
1279
  };
1256
1280
  &nbsp;
@@ -1270,7 +1294,7 @@ if( 'test' === import.meta.env.MODE &amp;&amp;
1270
1294
  <div class='footer quiet pad2 space-top1 center small'>
1271
1295
  Code coverage generated by
1272
1296
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
1273
- at 2024-09-01T19:14:49.300Z
1297
+ at 2024-09-11T14:44:32.203Z
1274
1298
  </div>
1275
1299
  <script src="../../prettify.js"></script>
1276
1300
  <script>
@@ -505,7 +505,7 @@ if( 'test' === import.meta.env.MODE &amp;&amp;
505
505
  <div class='footer quiet pad2 space-top1 center small'>
506
506
  Code coverage generated by
507
507
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
508
- at 2024-09-01T19:14:49.300Z
508
+ at 2024-09-11T14:44:32.203Z
509
509
  </div>
510
510
  <script src="../../prettify.js"></script>
511
511
  <script>
@@ -619,7 +619,7 @@ if( 'test' === import.meta.env.MODE &amp;&amp;
619
619
  <div class='footer quiet pad2 space-top1 center small'>
620
620
  Code coverage generated by
621
621
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
622
- at 2024-09-01T19:14:49.300Z
622
+ at 2024-09-11T14:44:32.203Z
623
623
  </div>
624
624
  <script src="../../prettify.js"></script>
625
625
  <script>
@@ -412,7 +412,7 @@ if ('test' === import.meta.env.MODE &amp;&amp;
412
412
  <div class='footer quiet pad2 space-top1 center small'>
413
413
  Code coverage generated by
414
414
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
415
- at 2024-09-01T19:14:49.300Z
415
+ at 2024-09-11T14:44:32.203Z
416
416
  </div>
417
417
  <script src="../../prettify.js"></script>
418
418
  <script>
@@ -670,7 +670,7 @@ if( 'test' === import.meta.env.MODE &amp;&amp;
670
670
  <div class='footer quiet pad2 space-top1 center small'>
671
671
  Code coverage generated by
672
672
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
673
- at 2024-09-01T19:14:49.300Z
673
+ at 2024-09-11T14:44:32.203Z
674
674
  </div>
675
675
  <script src="../../prettify.js"></script>
676
676
  <script>
@@ -721,7 +721,7 @@ if( 'test' === import.meta.env.MODE &amp;&amp;
721
721
  <div class='footer quiet pad2 space-top1 center small'>
722
722
  Code coverage generated by
723
723
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
724
- at 2024-09-01T19:14:49.300Z
724
+ at 2024-09-11T14:44:32.203Z
725
725
  </div>
726
726
  <script src="../../prettify.js"></script>
727
727
  <script>
@@ -154,7 +154,7 @@ export async function testStoryBook&lt;TProps&gt;( mod: Record&lt;string, StoryO
154
154
  <div class='footer quiet pad2 space-top1 center small'>
155
155
  Code coverage generated by
156
156
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
157
- at 2024-09-01T19:14:49.300Z
157
+ at 2024-09-11T14:44:32.203Z
158
158
  </div>
159
159
  <script src="../../prettify.js"></script>
160
160
  <script>
@@ -376,7 +376,7 @@ if( 'test' === import.meta.env.MODE &amp;&amp;
376
376
  <div class='footer quiet pad2 space-top1 center small'>
377
377
  Code coverage generated by
378
378
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
379
- at 2024-09-01T19:14:49.300Z
379
+ at 2024-09-11T14:44:32.203Z
380
380
  </div>
381
381
  <script src="../../prettify.js"></script>
382
382
  <script>
@@ -79,7 +79,7 @@ export function sum(a: number, b: number) {
79
79
  <div class='footer quiet pad2 space-top1 center small'>
80
80
  Code coverage generated by
81
81
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
82
- at 2024-09-01T19:14:49.300Z
82
+ at 2024-09-11T14:44:32.203Z
83
83
  </div>
84
84
  <script src="../prettify.js"></script>
85
85
  <script>