@epa-wg/custom-element-dist 0.0.22 → 0.0.23

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 (79) hide show
  1. package/.idea/.gitignore +8 -0
  2. package/README.md +4 -4
  3. package/coverage/coverage-final.json +13 -15
  4. package/coverage/index.html +30 -30
  5. package/coverage/src/custom-element/coverage.svg +1 -1
  6. package/coverage/src/custom-element/custom-element.js.html +72 -72
  7. package/coverage/src/custom-element/http-request.js.html +10 -10
  8. package/coverage/src/custom-element/index.html +10 -40
  9. package/coverage/src/custom-element/local-storage.js.html +5 -5
  10. package/coverage/src/custom-element/location-element.js.html +1 -1
  11. package/coverage/src/index.html +1 -1
  12. package/coverage/src/mocks/handlers.ts.html +1 -1
  13. package/coverage/src/mocks/index.html +1 -1
  14. package/coverage/src/stories/attributes.test.stories.ts/coverage.svg +1 -1
  15. package/coverage/src/stories/attributes.test.stories.ts.html +85 -91
  16. package/coverage/src/stories/coverage.svg +1 -1
  17. package/coverage/src/stories/css.test.stories.ts/coverage.svg +1 -1
  18. package/coverage/src/stories/css.test.stories.ts.html +75 -78
  19. package/coverage/src/stories/dom-merge.test.stories.ts/coverage.svg +1 -1
  20. package/coverage/src/stories/dom-merge.test.stories.ts.html +74 -74
  21. package/coverage/src/stories/external-template.test.stories.ts/coverage.svg +1 -1
  22. package/coverage/src/stories/external-template.test.stories.ts.html +154 -154
  23. package/coverage/src/stories/form.test.stories.ts/coverage.svg +1 -1
  24. package/coverage/src/stories/form.test.stories.ts.html +83 -86
  25. package/coverage/src/stories/http-request.stories.ts.html +1 -1
  26. package/coverage/src/stories/index.html +104 -104
  27. package/coverage/src/stories/local-storage.test.stories.ts/coverage.svg +1 -1
  28. package/coverage/src/stories/local-storage.test.stories.ts.html +444 -444
  29. package/coverage/src/stories/location-element.test.stories.ts/coverage.svg +1 -1
  30. package/coverage/src/stories/location-element.test.stories.ts.html +96 -96
  31. package/coverage/src/stories/slice-events.test.stories.ts/coverage.svg +1 -1
  32. package/coverage/src/stories/slice-events.test.stories.ts.html +141 -141
  33. package/coverage/src/stories/slots.test.stories.ts/coverage.svg +1 -1
  34. package/coverage/src/stories/slots.test.stories.ts.html +120 -123
  35. package/coverage/src/stories/{renderPlay.ts.html → testStoryBook.ts.html} +43 -22
  36. package/coverage/src/sum.ts.html +1 -1
  37. package/package.json +3 -3
  38. package/src/custom-element/demo/form.html +91 -44
  39. package/src/custom-element/demo/s.xml +9 -17
  40. package/src/custom-element/ide/web-types-dce.json +1 -1
  41. package/src/custom-element/ide/web-types-xsl.json +1 -1
  42. package/src/stories/attributes.test.stories.ts +9 -11
  43. package/src/stories/css.test.stories.ts +6 -7
  44. package/src/stories/dom-merge.test.stories.ts +6 -6
  45. package/src/stories/external-template.test.stories.ts +6 -6
  46. package/src/stories/form.test.stories.ts +6 -7
  47. package/src/stories/local-storage.test.stories.ts +7 -7
  48. package/src/stories/location-element.test.stories.ts +6 -6
  49. package/src/stories/slice-events.test.stories.ts +6 -6
  50. package/src/stories/slots.test.stories.ts +6 -7
  51. package/src/stories/testStoryBook.ts +28 -0
  52. package/storybook-static/assets/{Color-PRSJMWNM-e4s261EJ.js → Color-PRSJMWNM-BD_Ds9NW.js} +1 -1
  53. package/storybook-static/assets/{Configure-DWut7txe.js → Configure-70I_VApa.js} +1 -1
  54. package/storybook-static/assets/{DocsRenderer-K4EAMTCU-CaXVGjCl.js → DocsRenderer-K4EAMTCU-9dn0-HCP.js} +2 -2
  55. package/storybook-static/assets/{WithTooltip-KJL26V4Q--B8vdnMi.js → WithTooltip-KJL26V4Q-C6g5GOU9.js} +1 -1
  56. package/storybook-static/assets/{attributes.test.stories-IuwazrdL.js → attributes.test.stories-BEOraI4E.js} +2 -1
  57. package/storybook-static/assets/{formatter-2WMMO6ZP-SJtgH3vM.js → formatter-2WMMO6ZP-6IvBq34u.js} +1 -1
  58. package/storybook-static/assets/{iframe-CM82WlGY.js → iframe-zdt9kuj6.js} +2 -2
  59. package/storybook-static/assets/{index-DNL-IEpS.js → index-B3oZkK3F.js} +1 -1
  60. package/storybook-static/assets/{index-CEZitmnt.js → index-C30JwJMK.js} +5 -5
  61. package/storybook-static/assets/{index-D1MP-Zis.js → index-DhXZyjEd.js} +1 -1
  62. package/storybook-static/assets/{preview-5Y0XiZgz.js → preview-D0eCfQft.js} +2 -2
  63. package/storybook-static/assets/{syntaxhighlighter-BP7B2CQK-BWFH_0wQ.js → syntaxhighlighter-BP7B2CQK-DpPBKyTO.js} +1 -1
  64. package/storybook-static/iframe.html +1 -1
  65. package/storybook-static/project.json +1 -1
  66. package/tsconfig.json +31 -21
  67. package/yarn.lock +10242 -0
  68. package/.vscode/settings.json +0 -24
  69. package/coverage/src/custom-element/custom-element1-1.js/coverage.svg +0 -10
  70. package/coverage/src/custom-element/custom-element1-1.js.html +0 -2374
  71. package/coverage/src/custom-element/custom-element1.js/coverage.svg +0 -10
  72. package/coverage/src/custom-element/custom-element1.js.html +0 -2374
  73. package/src/custom-element/custom-element1-1.js +0 -763
  74. package/src/custom-element/custom-element1.js +0 -763
  75. package/src/custom-element/custom-element1.js0 +0 -750
  76. package/src/custom-element/custom-element2.js0 +0 -759
  77. package/src/custom-element/custom-element3.js0 +0 -763
  78. package/src/stories/renderPlay.ts +0 -21
  79. /package/coverage/src/stories/{renderPlay.ts → testStoryBook.ts}/coverage.svg +0 -0
package/coverage/src/stories/attributes.test.stories.ts.html CHANGED
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">100% </span>
26
+ <span class="strong">25% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>47/47</span>
28
+ <span class='fraction'>12/48</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
33
  <span class="strong">100% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>1/1</span>
35
+ <span class='fraction'>3/3</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">100% </span>
40
+ <span class="strong">20% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>10/10</span>
42
+ <span class='fraction'>2/10</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">100% </span>
47
+ <span class="strong">25.58% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>42/42</span>
49
+ <span class='fraction'>11/43</span>
50
50
  </div>
51
51
 
52
52
 
@@ -61,7 +61,7 @@
61
61
  </div>
62
62
  </template>
63
63
  </div>
64
- <div class='status-line high'></div>
64
+ <div class='status-line low'></div>
65
65
  <pre><table class="coverage">
66
66
  <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
67
  <a name='L2'></a><a href='#L2'>2</a>
@@ -205,9 +205,7 @@
205
205
  <a name='L140'></a><a href='#L140'>140</a>
206
206
  <a name='L141'></a><a href='#L141'>141</a>
207
207
  <a name='L142'></a><a href='#L142'>142</a>
208
- <a name='L143'></a><a href='#L143'>143</a>
209
- <a name='L144'></a><a href='#L144'>144</a>
210
- <a name='L145'></a><a href='#L145'>145</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
208
+ <a name='L143'></a><a href='#L143'>143</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
211
209
  <span class="cline-any cline-neutral">&nbsp;</span>
212
210
  <span class="cline-any cline-neutral">&nbsp;</span>
213
211
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -218,7 +216,7 @@
218
216
  <span class="cline-any cline-neutral">&nbsp;</span>
219
217
  <span class="cline-any cline-neutral">&nbsp;</span>
220
218
  <span class="cline-any cline-neutral">&nbsp;</span>
221
- <span class="cline-any cline-yes">6x</span>
219
+ <span class="cline-any cline-no">&nbsp;</span>
222
220
  <span class="cline-any cline-neutral">&nbsp;</span>
223
221
  <span class="cline-any cline-neutral">&nbsp;</span>
224
222
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -255,14 +253,14 @@
255
253
  <span class="cline-any cline-neutral">&nbsp;</span>
256
254
  <span class="cline-any cline-neutral">&nbsp;</span>
257
255
  <span class="cline-any cline-neutral">&nbsp;</span>
258
- <span class="cline-any cline-yes">1x</span>
259
- <span class="cline-any cline-yes">1x</span>
260
- <span class="cline-any cline-yes">3x</span>
256
+ <span class="cline-any cline-no">&nbsp;</span>
257
+ <span class="cline-any cline-no">&nbsp;</span>
258
+ <span class="cline-any cline-no">&nbsp;</span>
261
259
  <span class="cline-any cline-neutral">&nbsp;</span>
262
- <span class="cline-any cline-yes">1x</span>
263
- <span class="cline-any cline-yes">1x</span>
264
- <span class="cline-any cline-yes">1x</span>
265
- <span class="cline-any cline-yes">1x</span>
260
+ <span class="cline-any cline-no">&nbsp;</span>
261
+ <span class="cline-any cline-no">&nbsp;</span>
262
+ <span class="cline-any cline-no">&nbsp;</span>
263
+ <span class="cline-any cline-no">&nbsp;</span>
266
264
  <span class="cline-any cline-neutral">&nbsp;</span>
267
265
  <span class="cline-any cline-neutral">&nbsp;</span>
268
266
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -288,26 +286,26 @@
288
286
  <span class="cline-any cline-neutral">&nbsp;</span>
289
287
  <span class="cline-any cline-neutral">&nbsp;</span>
290
288
  <span class="cline-any cline-neutral">&nbsp;</span>
291
- <span class="cline-any cline-yes">1x</span>
292
- <span class="cline-any cline-yes">1x</span>
293
- <span class="cline-any cline-yes">6x</span>
289
+ <span class="cline-any cline-no">&nbsp;</span>
290
+ <span class="cline-any cline-no">&nbsp;</span>
291
+ <span class="cline-any cline-no">&nbsp;</span>
294
292
  <span class="cline-any cline-neutral">&nbsp;</span>
295
- <span class="cline-any cline-yes">1x</span>
296
- <span class="cline-any cline-yes">1x</span>
297
- <span class="cline-any cline-yes">1x</span>
298
- <span class="cline-any cline-yes">1x</span>
293
+ <span class="cline-any cline-no">&nbsp;</span>
294
+ <span class="cline-any cline-no">&nbsp;</span>
295
+ <span class="cline-any cline-no">&nbsp;</span>
296
+ <span class="cline-any cline-no">&nbsp;</span>
299
297
  <span class="cline-any cline-neutral">&nbsp;</span>
300
- <span class="cline-any cline-yes">1x</span>
301
- <span class="cline-any cline-yes">1x</span>
302
- <span class="cline-any cline-yes">1x</span>
298
+ <span class="cline-any cline-no">&nbsp;</span>
299
+ <span class="cline-any cline-no">&nbsp;</span>
300
+ <span class="cline-any cline-no">&nbsp;</span>
303
301
  <span class="cline-any cline-neutral">&nbsp;</span>
304
- <span class="cline-any cline-yes">1x</span>
305
- <span class="cline-any cline-yes">1x</span>
306
- <span class="cline-any cline-yes">1x</span>
302
+ <span class="cline-any cline-no">&nbsp;</span>
303
+ <span class="cline-any cline-no">&nbsp;</span>
304
+ <span class="cline-any cline-no">&nbsp;</span>
307
305
  <span class="cline-any cline-neutral">&nbsp;</span>
308
- <span class="cline-any cline-yes">1x</span>
309
- <span class="cline-any cline-yes">1x</span>
310
- <span class="cline-any cline-yes">1x</span>
306
+ <span class="cline-any cline-no">&nbsp;</span>
307
+ <span class="cline-any cline-no">&nbsp;</span>
308
+ <span class="cline-any cline-no">&nbsp;</span>
311
309
  <span class="cline-any cline-neutral">&nbsp;</span>
312
310
  <span class="cline-any cline-neutral">&nbsp;</span>
313
311
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -329,15 +327,14 @@
329
327
  <span class="cline-any cline-neutral">&nbsp;</span>
330
328
  <span class="cline-any cline-neutral">&nbsp;</span>
331
329
  <span class="cline-any cline-neutral">&nbsp;</span>
332
- <span class="cline-any cline-yes">1x</span>
333
- <span class="cline-any cline-yes">1x</span>
334
- <span class="cline-any cline-yes">3x</span>
335
- <span class="cline-any cline-neutral">&nbsp;</span>
336
- <span class="cline-any cline-yes">1x</span>
337
- <span class="cline-any cline-yes">1x</span>
338
- <span class="cline-any cline-yes">1x</span>
339
- <span class="cline-any cline-yes">1x</span>
340
- <span class="cline-any cline-neutral">&nbsp;</span>
330
+ <span class="cline-any cline-no">&nbsp;</span>
331
+ <span class="cline-any cline-no">&nbsp;</span>
332
+ <span class="cline-any cline-no">&nbsp;</span>
333
+ <span class="cline-any cline-no">&nbsp;</span>
334
+ <span class="cline-any cline-no">&nbsp;</span>
335
+ <span class="cline-any cline-no">&nbsp;</span>
336
+ <span class="cline-any cline-no">&nbsp;</span>
337
+ <span class="cline-any cline-no">&nbsp;</span>
341
338
  <span class="cline-any cline-neutral">&nbsp;</span>
342
339
  <span class="cline-any cline-neutral">&nbsp;</span>
343
340
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -346,7 +343,6 @@
346
343
  <span class="cline-any cline-neutral">&nbsp;</span>
347
344
  <span class="cline-any cline-neutral">&nbsp;</span>
348
345
  <span class="cline-any cline-yes">1x</span>
349
- <span class="cline-any cline-neutral">&nbsp;</span>
350
346
  <span class="cline-any cline-yes">1x</span>
351
347
  <span class="cline-any cline-yes">1x</span>
352
348
  <span class="cline-any cline-yes">1x</span>
@@ -354,15 +350,15 @@
354
350
  <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">// noinspection DuplicatedCode
355
351
  &nbsp;
356
352
  import type { StoryObj } from '@storybook/web-components';
357
- import {expect, getByTestId, within, userEvent} from '@storybook/test';
353
+ import {expect, within} from '@storybook/test';
358
354
  &nbsp;
359
355
  import '../custom-element/custom-element.js';
360
- import {OverrideInPayload, StyleDoesNotLeak, StyleIn2Instances} from './css.test.stories';
361
356
  &nbsp;
362
357
  type TProps = { title: string; body:string};
363
358
  &nbsp;
364
359
  type Story = StoryObj&lt;TProps&gt;;
365
- function sleep(ms: number) { return new Promise((resolve) =&gt; setTimeout(resolve, ms)); }
360
+ &nbsp;
361
+ function <span class="fstat-no" title="function not covered" >sleep(m</span>s: number) { <span class="cstat-no" title="statement not covered" >return new Promise(<span class="fstat-no" title="function not covered" >(r</span>esolve) =&gt; <span class="cstat-no" title="statement not covered" >setTimeout(resolve, ms))</span>; }</span>
366
362
  &nbsp;
367
363
  function render(args: TProps)
368
364
  {
@@ -397,16 +393,16 @@ export const AttributeDefaults:Story =
397
393
  &lt;/custom-element&gt;
398
394
  &lt;dce-link id="dce1"&gt;&lt;/dce-link&gt;
399
395
  `}
400
- , play: async ({canvasElement}) =&gt;
396
+ , play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
401
397
  {
402
- const titleText = AttributeDefaults.args!.title as string;
403
- const canvas = within(canvasElement)
404
- , code = async (id) =&gt; (await canvas.findByTestId(id)).textContent.trim();
398
+ const titleText = <span class="cstat-no" title="statement not covered" >AttributeDefaults.args!.title as string;</span>
399
+ const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement)</span>
400
+ , code = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >async (<span class="cstat-no" title="statement not covered" >i</span>d) =&gt; (await canvas.findByTestId(id)).textContent.trim();</span></span>
405
401
  &nbsp;
406
- await sleep(20)
407
- expect( await code('p1') ).toEqual('default_P1' );
408
- expect( await code('p2') ).toEqual('always_p2' );
409
- expect( await code('p3') ).toEqual('def_P3' );
402
+ <span class="cstat-no" title="statement not covered" > await sleep(20)</span>
403
+ <span class="cstat-no" title="statement not covered" > expect( await code('p1') ).toEqual('default_P1' );</span>
404
+ <span class="cstat-no" title="statement not covered" > expect( await code('p2') ).toEqual('always_p2' );</span>
405
+ <span class="cstat-no" title="statement not covered" > expect( await code('p3') ).toEqual('def_P3' );</span>
410
406
  },
411
407
  };
412
408
  &nbsp;
@@ -430,28 +426,28 @@ export const AttributesRuntimeChange:Story =
430
426
  &lt;div&gt;&lt;input id="i3" value="p3"&gt; &lt;button onclick="dce2.setAttribute('p3',i3.value)"&gt; set p3&lt;/button&gt; &lt;/div&gt;
431
427
  &lt;/section&gt;
432
428
  `}
433
- , play: async ({canvasElement}) =&gt;
429
+ , play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
434
430
  {
435
- const titleText = AttributeDefaults.args!.title as string;
436
- const canvas = within(canvasElement)
437
- , code = async (id) =&gt; (await canvas.findByTestId(id)).textContent.trim();
431
+ const titleText = <span class="cstat-no" title="statement not covered" >AttributeDefaults.args!.title as string;</span>
432
+ const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement)</span>
433
+ , code = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >async (<span class="cstat-no" title="statement not covered" >i</span>d) =&gt; (await canvas.findByTestId(id)).textContent.trim();</span></span>
438
434
  &nbsp;
439
- await sleep(20)
440
- expect( await code('p1') ).toEqual('123' );
441
- expect( await code('p2') ).toEqual('always_p2', 'no overrides due to value is hardcoded' );
442
- expect( await code('p3') ).toEqual('def_P3' );
435
+ <span class="cstat-no" title="statement not covered" > await sleep(20)</span>
436
+ <span class="cstat-no" title="statement not covered" > expect( await code('p1') ).toEqual('123' );</span>
437
+ <span class="cstat-no" title="statement not covered" > expect( await code('p2') ).toEqual('always_p2', 'no overrides due to value is hardcoded' );</span>
438
+ <span class="cstat-no" title="statement not covered" > expect( await code('p3') ).toEqual('def_P3' );</span>
443
439
  &nbsp;
444
- dce2.setAttribute('p1',i1.value);
445
- await sleep(10)
446
- expect( await code('p1') ).toEqual('p1','set p1 in runtime' );
440
+ <span class="cstat-no" title="statement not covered" > dce2.setAttribute('p1',i1.value);</span>
441
+ <span class="cstat-no" title="statement not covered" > await sleep(10)</span>
442
+ <span class="cstat-no" title="statement not covered" > expect( await code('p1') ).toEqual('p1','set p1 in runtime' );</span>
447
443
  &nbsp;
448
- dce2.setAttribute('p2',i2.value);
449
- await sleep(10)
450
- expect( await code('p2') ).toEqual('always_p2','can not set p2 in runtime' );
444
+ <span class="cstat-no" title="statement not covered" > dce2.setAttribute('p2',i2.value);</span>
445
+ <span class="cstat-no" title="statement not covered" > await sleep(10)</span>
446
+ <span class="cstat-no" title="statement not covered" > expect( await code('p2') ).toEqual('always_p2','can not set p2 in runtime' );</span>
451
447
  &nbsp;
452
- dce2.setAttribute('p3',i3.value);
453
- await sleep(10)
454
- expect( await code('p3') ).toEqual('p3','set p3 in runtime' );
448
+ <span class="cstat-no" title="statement not covered" > dce2.setAttribute('p3',i3.value);</span>
449
+ <span class="cstat-no" title="statement not covered" > await sleep(10)</span>
450
+ <span class="cstat-no" title="statement not covered" > expect( await code('p3') ).toEqual('p3','set p3 in runtime' );</span>
455
451
  },
456
452
  };
457
453
  &nbsp;
@@ -471,29 +467,27 @@ export const InstanceAttributes:Story =
471
467
  &lt;/custom-element&gt;
472
468
  &lt;dce-link3 id="dce3" p1="123" p3="qwe"&gt;&lt;/dce-link3&gt; |
473
469
  `}
474
- , play: async ({canvasElement}) =&gt;
470
+ , play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
475
471
  {
476
- const titleText = AttributeDefaults.args!.title as string;
477
- const canvas = within(canvasElement)
478
- , code = async (id) =&gt; (await canvas.findByTestId(id)).textContent.trim();
479
- &nbsp;
480
- await sleep(20)
481
- expect( await code('p1') ).toEqual('123' );
482
- expect( await code('p2') ).toEqual('always_p2' );
483
- expect( await code('p3') ).toEqual('qwe' );
472
+ const titleText = <span class="cstat-no" title="statement not covered" >AttributeDefaults.args!.title as string;</span>
473
+ const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement)</span>
474
+ , code = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >async (<span class="cstat-no" title="statement not covered" >i</span>d) =&gt; (await canvas.findByTestId(id)).textContent.trim();</span></span>
475
+ <span class="cstat-no" title="statement not covered" >debugger;</span>
476
+ <span class="cstat-no" title="statement not covered" > await sleep(20)</span>
477
+ <span class="cstat-no" title="statement not covered" > expect( await code('p1') ).toEqual('123' );</span>
478
+ <span class="cstat-no" title="statement not covered" > expect( await code('p2') ).toEqual('always_p2' );</span>
479
+ <span class="cstat-no" title="statement not covered" > expect( await code('p3') ).toEqual('qwe' );</span>
484
480
  },
485
481
  };
486
482
  &nbsp;
487
- &nbsp;
488
- &nbsp;
489
- const TestStories = { AttributeDefaults, AttributesRuntimeChange, InstanceAttributes };
490
- &nbsp;
491
483
  /* istanbul ignore else -- @preserve */
492
- if( 'test' === import.meta.env.MODE )
484
+ if( 'test' === import.meta.env.MODE &amp;&amp;
485
+ !import.meta.url.includes('skiptest') )
493
486
  {
494
- const {playStories} = await import('./renderPlay');
495
- const {describe} = await import('vitest')
496
- describe('slots', () =&gt; playStories( TestStories, meta ) );
487
+ const mod = await import('./attributes.test.stories.ts?skiptest');
488
+ const { testStoryBook } = await import('./testStoryBook')
489
+ const { describe } = await import('vitest')
490
+ describe(meta.title, () =&gt; testStoryBook( mod, meta ) );
497
491
  }
498
492
  &nbsp;</pre></td></tr></table></pre>
499
493
 
@@ -502,7 +496,7 @@ if( 'test' === import.meta.env.MODE )
502
496
  <div class='footer quiet pad2 space-top1 center small'>
503
497
  Code coverage generated by
504
498
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
505
- at 2024-06-25T03:55:40.964Z
499
+ at 2024-06-27T03:24:38.495Z
506
500
  </div>
507
501
  <script src="../../prettify.js"></script>
508
502
  <script>
package/coverage/src/stories/coverage.svg CHANGED
@@ -6,5 +6,5 @@
6
6
  <rect width="140" height="32" fill="#473" rx="4"/>
7
7
  <rect width="88" height="32" fill="#534" rx="4"/>
8
8
  <text x="8" y="21" class="heavy">coverage</text>
9
- <text x="94" y="22" class="percent">100%</text>
9
+ <text x="94" y="22" class="percent">26.83%</text>
10
10
  </svg>
package/coverage/src/stories/css.test.stories.ts/coverage.svg CHANGED
@@ -6,5 +6,5 @@
6
6
  <rect width="140" height="32" fill="#473" rx="4"/>
7
7
  <rect width="88" height="32" fill="#534" rx="4"/>
8
8
  <text x="8" y="21" class="heavy">coverage</text>
9
- <text x="94" y="22" class="percent">100%</text>
9
+ <text x="94" y="22" class="percent">28.57%</text>
10
10
  </svg>
package/coverage/src/stories/css.test.stories.ts.html CHANGED
@@ -23,30 +23,30 @@
23
23
  <div class='clearfix'>
24
24
 
25
25
  <div class='fl pad1y space-right2'>
26
- <span class="strong">100% </span>
26
+ <span class="strong">34.88% </span>
27
27
  <span class="quiet">Statements</span>
28
- <span class='fraction'>43/43</span>
28
+ <span class='fraction'>15/43</span>
29
29
  </div>
30
30
 
31
31
 
32
32
  <div class='fl pad1y space-right2'>
33
33
  <span class="strong">100% </span>
34
34
  <span class="quiet">Branches</span>
35
- <span class='fraction'>3/3</span>
35
+ <span class='fraction'>5/5</span>
36
36
  </div>
37
37
 
38
38
 
39
39
  <div class='fl pad1y space-right2'>
40
- <span class="strong">100% </span>
40
+ <span class="strong">28.57% </span>
41
41
  <span class="quiet">Functions</span>
42
- <span class='fraction'>7/7</span>
42
+ <span class='fraction'>2/7</span>
43
43
  </div>
44
44
 
45
45
 
46
46
  <div class='fl pad1y space-right2'>
47
- <span class="strong">100% </span>
47
+ <span class="strong">33.33% </span>
48
48
  <span class="quiet">Lines</span>
49
- <span class='fraction'>42/42</span>
49
+ <span class='fraction'>14/42</span>
50
50
  </div>
51
51
 
52
52
 
@@ -61,7 +61,7 @@
61
61
  </div>
62
62
  </template>
63
63
  </div>
64
- <div class='status-line high'></div>
64
+ <div class='status-line low'></div>
65
65
  <pre><table class="coverage">
66
66
  <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
67
  <a name='L2'></a><a href='#L2'>2</a>
@@ -186,8 +186,7 @@
186
186
  <a name='L121'></a><a href='#L121'>121</a>
187
187
  <a name='L122'></a><a href='#L122'>122</a>
188
188
  <a name='L123'></a><a href='#L123'>123</a>
189
- <a name='L124'></a><a href='#L124'>124</a>
190
- <a name='L125'></a><a href='#L125'>125</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
189
+ <a name='L124'></a><a href='#L124'>124</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
191
190
  <span class="cline-any cline-neutral">&nbsp;</span>
192
191
  <span class="cline-any cline-neutral">&nbsp;</span>
193
192
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -231,18 +230,18 @@
231
230
  <span class="cline-any cline-neutral">&nbsp;</span>
232
231
  <span class="cline-any cline-neutral">&nbsp;</span>
233
232
  <span class="cline-any cline-neutral">&nbsp;</span>
234
- <span class="cline-any cline-yes">1x</span>
235
- <span class="cline-any cline-yes">1x</span>
236
- <span class="cline-any cline-yes">1x</span>
237
- <span class="cline-any cline-yes">1x</span>
233
+ <span class="cline-any cline-no">&nbsp;</span>
234
+ <span class="cline-any cline-no">&nbsp;</span>
235
+ <span class="cline-any cline-no">&nbsp;</span>
236
+ <span class="cline-any cline-no">&nbsp;</span>
238
237
  <span class="cline-any cline-neutral">&nbsp;</span>
239
- <span class="cline-any cline-yes">1x</span>
240
- <span class="cline-any cline-yes">1x</span>
241
- <span class="cline-any cline-yes">1x</span>
242
- <span class="cline-any cline-yes">1x</span>
243
- <span class="cline-any cline-yes">1x</span>
244
- <span class="cline-any cline-yes">1x</span>
245
- <span class="cline-any cline-yes">1x</span>
238
+ <span class="cline-any cline-no">&nbsp;</span>
239
+ <span class="cline-any cline-no">&nbsp;</span>
240
+ <span class="cline-any cline-no">&nbsp;</span>
241
+ <span class="cline-any cline-no">&nbsp;</span>
242
+ <span class="cline-any cline-no">&nbsp;</span>
243
+ <span class="cline-any cline-no">&nbsp;</span>
244
+ <span class="cline-any cline-no">&nbsp;</span>
246
245
  <span class="cline-any cline-neutral">&nbsp;</span>
247
246
  <span class="cline-any cline-neutral">&nbsp;</span>
248
247
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -256,16 +255,16 @@
256
255
  <span class="cline-any cline-neutral">&nbsp;</span>
257
256
  <span class="cline-any cline-neutral">&nbsp;</span>
258
257
  <span class="cline-any cline-neutral">&nbsp;</span>
259
- <span class="cline-any cline-yes">1x</span>
260
- <span class="cline-any cline-yes">1x</span>
261
- <span class="cline-any cline-yes">8x</span>
262
- <span class="cline-any cline-yes">8x</span>
263
- <span class="cline-any cline-yes">8x</span>
258
+ <span class="cline-any cline-no">&nbsp;</span>
259
+ <span class="cline-any cline-no">&nbsp;</span>
260
+ <span class="cline-any cline-no">&nbsp;</span>
261
+ <span class="cline-any cline-no">&nbsp;</span>
262
+ <span class="cline-any cline-no">&nbsp;</span>
264
263
  <span class="cline-any cline-neutral">&nbsp;</span>
265
- <span class="cline-any cline-yes">1x</span>
266
- <span class="cline-any cline-yes">1x</span>
267
- <span class="cline-any cline-yes">1x</span>
268
- <span class="cline-any cline-yes">1x</span>
264
+ <span class="cline-any cline-no">&nbsp;</span>
265
+ <span class="cline-any cline-no">&nbsp;</span>
266
+ <span class="cline-any cline-no">&nbsp;</span>
267
+ <span class="cline-any cline-no">&nbsp;</span>
269
268
  <span class="cline-any cline-neutral">&nbsp;</span>
270
269
  <span class="cline-any cline-neutral">&nbsp;</span>
271
270
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -288,16 +287,16 @@
288
287
  <span class="cline-any cline-neutral">&nbsp;</span>
289
288
  <span class="cline-any cline-neutral">&nbsp;</span>
290
289
  <span class="cline-any cline-neutral">&nbsp;</span>
291
- <span class="cline-any cline-yes">1x</span>
290
+ <span class="cline-any cline-no">&nbsp;</span>
292
291
  <span class="cline-any cline-neutral">&nbsp;</span>
293
- <span class="cline-any cline-yes">1x</span>
294
- <span class="cline-any cline-yes">6x</span>
295
- <span class="cline-any cline-yes">6x</span>
296
- <span class="cline-any cline-yes">6x</span>
292
+ <span class="cline-any cline-no">&nbsp;</span>
293
+ <span class="cline-any cline-no">&nbsp;</span>
294
+ <span class="cline-any cline-no">&nbsp;</span>
295
+ <span class="cline-any cline-no">&nbsp;</span>
297
296
  <span class="cline-any cline-neutral">&nbsp;</span>
298
- <span class="cline-any cline-yes">1x</span>
299
- <span class="cline-any cline-yes">1x</span>
300
- <span class="cline-any cline-yes">1x</span>
297
+ <span class="cline-any cline-no">&nbsp;</span>
298
+ <span class="cline-any cline-no">&nbsp;</span>
299
+ <span class="cline-any cline-no">&nbsp;</span>
301
300
  <span class="cline-any cline-neutral">&nbsp;</span>
302
301
  <span class="cline-any cline-neutral">&nbsp;</span>
303
302
  <span class="cline-any cline-neutral">&nbsp;</span>
@@ -306,7 +305,6 @@
306
305
  <span class="cline-any cline-neutral">&nbsp;</span>
307
306
  <span class="cline-any cline-neutral">&nbsp;</span>
308
307
  <span class="cline-any cline-yes">1x</span>
309
- <span class="cline-any cline-neutral">&nbsp;</span>
310
308
  <span class="cline-any cline-yes">1x</span>
311
309
  <span class="cline-any cline-yes">1x</span>
312
310
  <span class="cline-any cline-yes">1x</span>
@@ -354,19 +352,19 @@ export const StyleDoesNotLeak: Story =
354
352
  , slot: 'text has to be green'
355
353
  , payload: '&lt;u&gt;no tags&lt;/u&gt;'
356
354
  }
357
- , play: async ({canvasElement}) =&gt;
358
- { const canvas = within(canvasElement);
359
- const el = await canvas.findByText('text has to be green');
360
- const st = getComputedStyle(el);
361
- const color = st.getPropertyValue('color');
355
+ , play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
356
+ { const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
357
+ const el = <span class="cstat-no" title="statement not covered" >await canvas.findByText('text has to be green');</span>
358
+ const st = <span class="cstat-no" title="statement not covered" >getComputedStyle(el);</span>
359
+ const color = <span class="cstat-no" title="statement not covered" >st.getPropertyValue('color');</span>
362
360
  // @ts-ignore
363
- expect(color).to.equal('rgb(0, 128, 0)')
364
- await expect( el.closest('custom-element')).toBeInTheDocument();
365
- const dce = el.closest('custom-element');
366
- await expect( dce.xsltString).toContain('&lt;xsl:stylesheet');
367
- await expect( dce.dce.localName).toEqual('custom-element');
368
- await expect( dce.dce.xsltString).toEqual(dce.xsltString);
369
- await expect( dce.dce.xslt.documentElement.tagName ).toEqual('xsl:stylesheet');
361
+ <span class="cstat-no" title="statement not covered" > expect(color).to.equal('rgb(0, 128, 0)')</span>
362
+ <span class="cstat-no" title="statement not covered" > await expect( el.closest('custom-element')).toBeInTheDocument();</span>
363
+ const dce = <span class="cstat-no" title="statement not covered" >el.closest('custom-element');</span>
364
+ <span class="cstat-no" title="statement not covered" > await expect( dce.xsltString).toContain('&lt;xsl:stylesheet');</span>
365
+ <span class="cstat-no" title="statement not covered" > await expect( dce.dce.localName).toEqual('custom-element');</span>
366
+ <span class="cstat-no" title="statement not covered" > await expect( dce.dce.xsltString).toEqual(dce.xsltString);</span>
367
+ <span class="cstat-no" title="statement not covered" > await expect( dce.dce.xslt.documentElement.tagName ).toEqual('xsl:stylesheet');</span>
370
368
  },
371
369
  };
372
370
  &nbsp;
@@ -378,18 +376,18 @@ export const StyleIn2Instances: Story =
378
376
  , tag: 'dce-2'
379
377
  , payload: `&lt;u&gt;2 instances:&lt;/u&gt; &lt;dce-2 id="dce21"&gt;&lt;/dce-2&gt; * &lt;dce-2 id="dce22"&gt;&lt;/dce-2&gt;`
380
378
  }
381
- , play: async ({canvasElement}) =&gt;
379
+ , play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
382
380
  {
383
- await within(canvasElement).findByText('2 instances:');
384
- const color = ( css:string )=&gt;
385
- { const el = canvasElement.querySelector(css);
386
- const st = getComputedStyle( el! );
387
- return st.getPropertyValue('color');
381
+ <span class="cstat-no" title="statement not covered" > await within(canvasElement).findByText('2 instances:');</span>
382
+ const color = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >( c</span>ss:string )=&gt;</span>
383
+ { const el = <span class="cstat-no" title="statement not covered" >canvasElement.querySelector(css);</span>
384
+ const st = <span class="cstat-no" title="statement not covered" >getComputedStyle( el! );</span>
385
+ <span class="cstat-no" title="statement not covered" > return st.getPropertyValue('color');</span>
388
386
  };
389
- expect( color('legend' ) ).to.not.equal(color('b'));
390
- expect( color('legend' ) ).to.not.equal(color('b'));
391
- expect( color('#dce21 u') ).to .equal(color('b'));
392
- expect( color('#dce22 u') ).to .equal(color('b'));
387
+ <span class="cstat-no" title="statement not covered" > expect( color('legend' ) ).to.not.equal(color('b'));</span>
388
+ <span class="cstat-no" title="statement not covered" > expect( color('legend' ) ).to.not.equal(color('b'));</span>
389
+ <span class="cstat-no" title="statement not covered" > expect( color('#dce21 u') ).to .equal(color('b'));</span>
390
+ <span class="cstat-no" title="statement not covered" > expect( color('#dce22 u') ).to .equal(color('b'));</span>
393
391
  },
394
392
  };
395
393
  &nbsp;
@@ -410,30 +408,29 @@ export const OverrideInPayload: Story =
410
408
  should be ${GREEN}:
411
409
  &lt;dce-3 id="dce31"&gt;green&lt;/dce-3&gt; `
412
410
  }
413
- , play: async ({canvasElement}) =&gt;
411
+ , play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
414
412
  {
415
- await within(canvasElement).findByText('should be');
413
+ <span class="cstat-no" title="statement not covered" > await within(canvasElement).findByText('should be');</span>
416
414
  &nbsp;
417
- const color = ( css:string )=&gt;
418
- { const el = canvasElement.querySelector(css);
419
- const st = getComputedStyle( el! );
420
- return st.getPropertyValue('color');
415
+ const color = <span class="cstat-no" title="statement not covered" ><span class="fstat-no" title="function not covered" >( c</span>ss:string )=&gt;</span>
416
+ { const el = <span class="cstat-no" title="statement not covered" >canvasElement.querySelector(css);</span>
417
+ const st = <span class="cstat-no" title="statement not covered" >getComputedStyle( el! );</span>
418
+ <span class="cstat-no" title="statement not covered" > return st.getPropertyValue('color');</span>
421
419
  };
422
- expect( color('legend' ) ).to.not.equal(color('b'));
423
- expect( color('#dce31 u') ).to .equal(color('b'));
424
- expect( color('#dce32 u') ).to .equal(color('i'));
420
+ <span class="cstat-no" title="statement not covered" > expect( color('legend' ) ).to.not.equal(color('b'));</span>
421
+ <span class="cstat-no" title="statement not covered" > expect( color('#dce31 u') ).to .equal(color('b'));</span>
422
+ <span class="cstat-no" title="statement not covered" > expect( color('#dce32 u') ).to .equal(color('i'));</span>
425
423
  },
426
424
  };
427
425
  &nbsp;
428
- &nbsp;
429
- const TestStories = { StyleDoesNotLeak, StyleIn2Instances, OverrideInPayload };
430
- &nbsp;
431
426
  /* istanbul ignore else -- @preserve */
432
- if( 'test' === import.meta.env.MODE )
427
+ if( 'test' === import.meta.env.MODE &amp;&amp;
428
+ !import.meta.url.includes('skiptest') )
433
429
  {
434
- const {playStories} = await import('./renderPlay');
435
- const {describe} = await import('vitest')
436
- describe('slots', () =&gt; playStories( TestStories, meta ) );
430
+ const mod = await import('./css.test.stories.ts?skiptest');
431
+ const { testStoryBook } = await import('./testStoryBook')
432
+ const { describe } = await import('vitest')
433
+ describe(meta.title, () =&gt; testStoryBook( mod, meta ) );
437
434
  }
438
435
  &nbsp;</pre></td></tr></table></pre>
439
436
 
@@ -442,7 +439,7 @@ if( 'test' === import.meta.env.MODE )
442
439
  <div class='footer quiet pad2 space-top1 center small'>
443
440
  Code coverage generated by
444
441
  <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
445
- at 2024-06-25T03:55:40.964Z
442
+ at 2024-06-27T03:24:38.495Z
446
443
  </div>
447
444
  <script src="../../prettify.js"></script>
448
445
  <script>
package/coverage/src/stories/dom-merge.test.stories.ts/coverage.svg CHANGED
@@ -6,5 +6,5 @@
6
6
  <rect width="140" height="32" fill="#473" rx="4"/>
7
7
  <rect width="88" height="32" fill="#534" rx="4"/>
8
8
  <text x="8" y="21" class="heavy">coverage</text>
9
- <text x="94" y="22" class="percent">100%</text>
9
+ <text x="94" y="22" class="percent">26.31%</text>
10
10
  </svg>