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

package/coverage/src/custom-element/http-request.js.html

@@ -182,13 +182,13 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">5x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">24x</span>
-<span class="cline-any cline-yes">24x</span>
+<span class="cline-any cline-yes">28x</span>
+<span class="cline-any cline-yes">28x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">28x</span>
-<span class="cline-any cline-yes">16x</span>
+<span class="cline-any cline-yes">32x</span>
+<span class="cline-any cline-yes">20x</span>
 <span class="cline-any cline-yes">12x</span>
 <span class="cline-any cline-yes">12x</span>
 <span class="cline-any cline-yes">1x</span>
@@ -223,12 +223,12 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">86x</span>
-<span class="cline-any cline-yes">43x</span>
+<span class="cline-any cline-yes">102x</span>
+<span class="cline-any cline-yes">51x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">31x</span>
-<span class="cline-any cline-yes">31x</span>
-<span class="cline-any cline-yes">23x</span>
+<span class="cline-any cline-yes">35x</span>
+<span class="cline-any cline-yes">35x</span>
+<span class="cline-any cline-yes">27x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">8x</span>
 <span class="cline-any cline-yes">8x</span>
@@ -337,7 +337,7 @@ export default HttpRequestElement;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-05-13T06:00:45.582Z
+                at 2024-06-27T03:24:38.495Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/custom-element/index.html

@@ -23,30 +23,30 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">95.46% </span>
+                <span class="strong">97.87% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>632/662</span>
+                <span class='fraction'>690/705</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">87.42% </span>
+                <span class="strong">91.35% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>278/318</span>
+                <span class='fraction'>317/347</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">92.59% </span>
+                <span class="strong">98.15% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>150/162</span>
+                <span class='fraction'>160/163</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">97.02% </span>
+                <span class="strong">98.22% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>555/572</span>
+                <span class='fraction'>609/620</span>
             </div>
         
             
@@ -80,17 +80,17 @@
 </thead>
 <tbody><tr>
 	<td class="file high" data-value="custom-element.js"><a href="custom-element.js.html">custom-element.js</a></td>
-	<td data-value="93.95" class="pic high">
-	<div class="chart"><div class="cover-fill" style="width: 93%"></div><div class="cover-empty" style="width: 7%"></div></div>
+	<td data-value="97.21" class="pic high">
+	<div class="chart"><div class="cover-fill" style="width: 97%"></div><div class="cover-empty" style="width: 3%"></div></div>
 	</td>
-	<td data-value="93.95" class="pct high">93.95%</td>
-	<td data-value="496" class="abs high">466/496</td>
-	<td data-value="84.67" class="pct high">84.67%</td>
-	<td data-value="261" class="abs high">221/261</td>
+	<td data-value="97.21" class="pct high">97.21%</td>
+	<td data-value="539" class="abs high">524/539</td>
 	<td data-value="89.65" class="pct high">89.65%</td>
-	<td data-value="116" class="abs high">104/116</td>
-	<td data-value="96" class="pct high">96%</td>
-	<td data-value="426" class="abs high">409/426</td>
+	<td data-value="290" class="abs high">260/290</td>
+	<td data-value="97.43" class="pct high">97.43%</td>
+	<td data-value="117" class="abs high">114/117</td>
+	<td data-value="97.67" class="pct high">97.67%</td>
+	<td data-value="474" class="abs high">463/474</td>
 	</tr>
 
 <tr>
@@ -146,7 +146,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-05-13T06:00:45.582Z
+                at 2024-06-27T03:24:38.495Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/custom-element/local-storage.js.html

@@ -208,7 +208,7 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">117x</span>
+<span class="cline-any cline-yes">119x</span>
 <span class="cline-any cline-yes">12x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -331,7 +331,7 @@ export default LocalStorageElement;
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-05-13T06:00:45.582Z
+                at 2024-06-27T03:24:38.495Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/custom-element/location-element.js.html

@@ -328,7 +328,7 @@ export default LocationElement;</pre></td></tr></table></pre>
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-05-13T06:00:45.582Z
+                at 2024-06-27T03:24:38.495Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-05-13T06:00:45.582Z
+                at 2024-06-27T03:24:38.495Z
             </div>
         <script src="../prettify.js"></script>
         <script>

package/coverage/src/mocks/handlers.ts.html

@@ -157,7 +157,7 @@ export const handlers =
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-05-13T06:00:45.582Z
+                at 2024-06-27T03:24:38.495Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/mocks/index.html

@@ -101,7 +101,7 @@
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-05-13T06:00:45.582Z
+                at 2024-06-27T03:24:38.495Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/stories/{css.stories.ts → attributes.test.stories.ts}/coverage.svg

@@ -6,5 +6,5 @@
     <rect width="140" height="32" fill="#473" rx="4"/>
     <rect width="88" height="32" fill="#534" rx="4"/>
     <text x="8" y="21" class="heavy">coverage</text>
-    <text x="94" y="22" class="percent">100%</text>
+    <text x="94" y="22" class="percent">20%</text>
 </svg>

package/coverage/src/stories/{attributes.stories.ts.html → attributes.test.stories.ts.html}

@@ -3,7 +3,7 @@
 <html lang="en">
 
 <head>
-    <title>Code coverage report for src/stories/attributes.stories.ts</title>
+    <title>Code coverage report for src/stories/attributes.test.stories.ts</title>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="../../prettify.css" />
     <link rel="stylesheet" href="../../base.css" />
@@ -19,34 +19,34 @@
 <body>
 <div class='wrapper'>
     <div class='pad1'>
-        <h1><a href="../../index.html">All files</a> / <a href="index.html">src/stories</a> attributes.stories.ts</h1>
+        <h1><a href="../../index.html">All files</a> / <a href="index.html">src/stories</a> attributes.test.stories.ts</h1>
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">25% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>41/41</span>
+                <span class='fraction'>12/48</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>0/0</span>
+                <span class='fraction'>3/3</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">20% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>9/9</span>
+                <span class='fraction'>2/10</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">25.58% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>37/37</span>
+                <span class='fraction'>11/43</span>
             </div>
         
             
@@ -61,7 +61,7 @@
             </div>
         </template>
     </div>
-    <div class='status-line high'></div>
+    <div class='status-line low'></div>
     <pre><table class="coverage">
 <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
 <a name='L2'></a><a href='#L2'>2</a>
@@ -195,7 +195,17 @@
 <a name='L130'></a><a href='#L130'>130</a>
 <a name='L131'></a><a href='#L131'>131</a>
 <a name='L132'></a><a href='#L132'>132</a>
-<a name='L133'></a><a href='#L133'>133</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L133'></a><a href='#L133'>133</a>
+<a name='L134'></a><a href='#L134'>134</a>
+<a name='L135'></a><a href='#L135'>135</a>
+<a name='L136'></a><a href='#L136'>136</a>
+<a name='L137'></a><a href='#L137'>137</a>
+<a name='L138'></a><a href='#L138'>138</a>
+<a name='L139'></a><a href='#L139'>139</a>
+<a name='L140'></a><a href='#L140'>140</a>
+<a name='L141'></a><a href='#L141'>141</a>
+<a name='L142'></a><a href='#L142'>142</a>
+<a name='L143'></a><a href='#L143'>143</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -205,7 +215,8 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -242,14 +253,14 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -275,26 +286,26 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">6x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -316,28 +327,38 @@
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-no">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">1x</span>
-<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">// noinspection DuplicatedCode
 &nbsp;
-import type { StoryObj }             from '@storybook/web-components';
-import {expect, getByTestId, within, userEvent} from '@storybook/test';
+import type { StoryObj }                        from '@storybook/web-components';
+import {expect, within} from '@storybook/test';
 &nbsp;
 import '../custom-element/custom-element.js';
 &nbsp;
 type TProps = { title: string; body:string};
 &nbsp;
 type Story = StoryObj&lt;TProps&gt;;
-function sleep(ms: number) {    return new Promise((resolve) =&gt; setTimeout(resolve, ms)); }
+&nbsp;
+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>
 &nbsp;
 function render(args: TProps)
 {
@@ -365,23 +386,23 @@ export const AttributeDefaults:Story  =
             &lt;attribute name="p1"&gt;default_P1                &lt;/attribute&gt;
             &lt;attribute name="p2" select="'always_p2'"      &gt;&lt;/attribute&gt;
             &lt;attribute name="p3" select="//p3 ?? 'def_P3' "&gt;&lt;/attribute&gt;
-            p1: &lt;code data-testid="p1"&gt;{$p1}&lt;/code&gt; &lt;br/&gt; 
-            p2: &lt;code data-testid="p2"&gt;{$p2}&lt;/code&gt; &lt;br/&gt; 
+            p1: &lt;code data-testid="p1"&gt;{$p1}&lt;/code&gt; &lt;br/&gt;
+            p2: &lt;code data-testid="p2"&gt;{$p2}&lt;/code&gt; &lt;br/&gt;
             p3: &lt;code data-testid="p3"&gt;{$p3}&lt;/code&gt;
         &lt;/template&gt;
     &lt;/custom-element&gt;
     &lt;dce-link id="dce1"&gt;&lt;/dce-link&gt;
 `}
-,   play: async ({canvasElement}) =&gt;
+,   play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
     {
-        const titleText = AttributeDefaults.args!.title as string;
-        const canvas = within(canvasElement)
-        , code = async (id) =&gt; (await canvas.findByTestId(id)).textContent.trim();
+        const titleText = <span class="cstat-no" title="statement not covered" >AttributeDefaults.args!.title as string;</span>
+        const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement)</span>
+        , 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>
 &nbsp;
-        await sleep(20)
-        expect( await code('p1') ).toEqual('default_P1' );
-        expect( await code('p2') ).toEqual('always_p2'  );
-        expect( await code('p3') ).toEqual('def_P3'     );
+<span class="cstat-no" title="statement not covered" >        await sleep(20)</span>
+<span class="cstat-no" title="statement not covered" >        expect( await code('p1') ).toEqual('default_P1' );</span>
+<span class="cstat-no" title="statement not covered" >        expect( await code('p2') ).toEqual('always_p2'  );</span>
+<span class="cstat-no" title="statement not covered" >        expect( await code('p3') ).toEqual('def_P3'     );</span>
     },
 };
 &nbsp;
@@ -393,8 +414,8 @@ export const AttributesRuntimeChange:Story  =
             &lt;attribute name="p1"&gt;default_P1                &lt;/attribute&gt;
             &lt;attribute name="p2" select="'always_p2'"      &gt;&lt;/attribute&gt;
             &lt;attribute name="p3" select="//p3 ?? 'def_P3' "&gt;&lt;/attribute&gt;
-            p1: &lt;code data-testid="p1"&gt;{$p1}&lt;/code&gt; &lt;br/&gt; 
-            p2: &lt;code data-testid="p2"&gt;{$p2}&lt;/code&gt; &lt;br/&gt; 
+            p1: &lt;code data-testid="p1"&gt;{$p1}&lt;/code&gt; &lt;br/&gt;
+            p2: &lt;code data-testid="p2"&gt;{$p2}&lt;/code&gt; &lt;br/&gt;
             p3: &lt;code data-testid="p3"&gt;{$p3}&lt;/code&gt;
         &lt;/template&gt;
     &lt;/custom-element&gt;
@@ -405,28 +426,28 @@ export const AttributesRuntimeChange:Story  =
         &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;
     &lt;/section&gt;
 `}
-,   play: async ({canvasElement}) =&gt;
+,   play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
     {
-        const titleText = AttributeDefaults.args!.title as string;
-        const canvas = within(canvasElement)
-        ,       code = async (id) =&gt; (await canvas.findByTestId(id)).textContent.trim();
+        const titleText = <span class="cstat-no" title="statement not covered" >AttributeDefaults.args!.title as string;</span>
+        const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement)</span>
+        ,       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>
 &nbsp;
-        await sleep(20)
-        expect( await code('p1') ).toEqual('123' );
-        expect( await code('p2') ).toEqual('always_p2', 'no overrides due to value is hardcoded'  );
-        expect( await code('p3') ).toEqual('def_P3' );
+<span class="cstat-no" title="statement not covered" >        await sleep(20)</span>
+<span class="cstat-no" title="statement not covered" >        expect( await code('p1') ).toEqual('123' );</span>
+<span class="cstat-no" title="statement not covered" >        expect( await code('p2') ).toEqual('always_p2', 'no overrides due to value is hardcoded'  );</span>
+<span class="cstat-no" title="statement not covered" >        expect( await code('p3') ).toEqual('def_P3' );</span>
 &nbsp;
-        dce2.setAttribute('p1',i1.value);
-        await sleep(10)
-        expect( await code('p1') ).toEqual('p1','set p1 in runtime' );
+<span class="cstat-no" title="statement not covered" >        dce2.setAttribute('p1',i1.value);</span>
+<span class="cstat-no" title="statement not covered" >        await sleep(10)</span>
+<span class="cstat-no" title="statement not covered" >        expect( await code('p1') ).toEqual('p1','set p1 in runtime' );</span>
 &nbsp;
-        dce2.setAttribute('p2',i2.value);
-        await sleep(10)
-        expect( await code('p2') ).toEqual('always_p2','can not set p2 in runtime' );
+<span class="cstat-no" title="statement not covered" >        dce2.setAttribute('p2',i2.value);</span>
+<span class="cstat-no" title="statement not covered" >        await sleep(10)</span>
+<span class="cstat-no" title="statement not covered" >        expect( await code('p2') ).toEqual('always_p2','can not set p2 in runtime' );</span>
 &nbsp;
-        dce2.setAttribute('p3',i3.value);
-        await sleep(10)
-        expect( await code('p3') ).toEqual('p3','set p3 in runtime' );
+<span class="cstat-no" title="statement not covered" >        dce2.setAttribute('p3',i3.value);</span>
+<span class="cstat-no" title="statement not covered" >        await sleep(10)</span>
+<span class="cstat-no" title="statement not covered" >        expect( await code('p3') ).toEqual('p3','set p3 in runtime' );</span>
     },
 };
 &nbsp;
@@ -439,26 +460,35 @@ export const InstanceAttributes:Story  =
             &lt;attribute name="p1"&gt;default_P1                &lt;/attribute&gt;
             &lt;attribute name="p2" select="'always_p2'"      &gt;&lt;/attribute&gt;
             &lt;attribute name="p3" select="//p3 ?? 'def_P3' "&gt;&lt;/attribute&gt;
-            p1: &lt;code data-testid="p1"&gt;{$p1}&lt;/code&gt; &lt;br/&gt; 
-            p2: &lt;code data-testid="p2"&gt;{$p2}&lt;/code&gt; &lt;br/&gt; 
+            p1: &lt;code data-testid="p1"&gt;{$p1}&lt;/code&gt; &lt;br/&gt;
+            p2: &lt;code data-testid="p2"&gt;{$p2}&lt;/code&gt; &lt;br/&gt;
             p3: &lt;code data-testid="p3"&gt;{$p3}&lt;/code&gt;
         &lt;/template&gt;
     &lt;/custom-element&gt;
     &lt;dce-link3 id="dce3" p1="123" p3="qwe"&gt;&lt;/dce-link3&gt; |
 `}
-,   play: async ({canvasElement}) =&gt;
+,   play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
     {
-        const titleText = AttributeDefaults.args!.title as string;
-        const canvas = within(canvasElement)
-        , code = async (id) =&gt; (await canvas.findByTestId(id)).textContent.trim();
-&nbsp;
-        await sleep(20)
-        expect( await code('p1') ).toEqual('123' );
-        expect( await code('p2') ).toEqual('always_p2'  );
-        expect( await code('p3') ).toEqual('qwe'     );
+        const titleText = <span class="cstat-no" title="statement not covered" >AttributeDefaults.args!.title as string;</span>
+        const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement)</span>
+        , 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>
+<span class="cstat-no" title="statement not covered" >debugger;</span>
+<span class="cstat-no" title="statement not covered" >        await sleep(20)</span>
+<span class="cstat-no" title="statement not covered" >        expect( await code('p1') ).toEqual('123' );</span>
+<span class="cstat-no" title="statement not covered" >        expect( await code('p2') ).toEqual('always_p2'  );</span>
+<span class="cstat-no" title="statement not covered" >        expect( await code('p3') ).toEqual('qwe'     );</span>
     },
 };
 &nbsp;
+/* istanbul ignore else -- @preserve */
+if(  'test' === import.meta.env.MODE &amp;&amp;
+    !import.meta.url.includes('skiptest') )
+{
+    const mod = await import('./attributes.test.stories.ts?skiptest');
+    const { testStoryBook } = await import('./testStoryBook')
+    const { describe } = await import('vitest')
+    describe(meta.title, () =&gt; testStoryBook( mod, meta ) );
+}
 &nbsp;</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
@@ -466,7 +496,7 @@ export const InstanceAttributes:Story  =
             <div class='footer quiet pad2 space-top1 center small'>
                 Code coverage generated by
                 <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
-                at 2024-05-13T06:00:45.582Z
+                at 2024-06-27T03:24:38.495Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/stories/coverage.svg

@@ -6,5 +6,5 @@
     <rect width="140" height="32" fill="#473" rx="4"/>
     <rect width="88" height="32" fill="#534" rx="4"/>
     <text x="8" y="21" class="heavy">coverage</text>
-    <text x="94" y="22" class="percent">100%</text>
+    <text x="94" y="22" class="percent">26.83%</text>
 </svg>

package/coverage/src/stories/css.test.stories.ts/coverage.svg

@@ -0,0 +1,10 @@
+<svg viewBox="0 0 140 32" height="20px" xmlns="http://www.w3.org/2000/svg">
+    <style>
+        .heavy { font: bold 16px sans-serif; fill:white; }
+        .percent { font: bold 16px monotype; fill: white; }
+    </style>
+    <rect width="140" height="32" fill="#473" rx="4"/>
+    <rect width="88" height="32" fill="#534" rx="4"/>
+    <text x="8" y="21" class="heavy">coverage</text>
+    <text x="94" y="22" class="percent">28.57%</text>
+</svg>