@epa-wg/custom-element-dist 0.0.26 → 0.0.28

package/coverage/src/stories/local-storage.test.stories.ts.html

@@ -23,9 +23,9 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">6.06% </span>
+                <span class="strong">7.23% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>14/231</span>
+                <span class='fraction'>17/235</span>
             </div>
         
             
@@ -37,16 +37,16 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">12.5% </span>
+                <span class="strong">13.33% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>2/16</span>
+                <span class='fraction'>2/15</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">5.88% </span>
+                <span class="strong">7.07% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>13/221</span>
+                <span class='fraction'>16/226</span>
             </div>
         
             
@@ -463,7 +463,17 @@
 <a name='L398'></a><a href='#L398'>398</a>
 <a name='L399'></a><a href='#L399'>399</a>
 <a name='L400'></a><a href='#L400'>400</a>
-<a name='L401'></a><a href='#L401'>401</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L401'></a><a href='#L401'>401</a>
+<a name='L402'></a><a href='#L402'>402</a>
+<a name='L403'></a><a href='#L403'>403</a>
+<a name='L404'></a><a href='#L404'>404</a>
+<a name='L405'></a><a href='#L405'>405</a>
+<a name='L406'></a><a href='#L406'>406</a>
+<a name='L407'></a><a href='#L407'>407</a>
+<a name='L408'></a><a href='#L408'>408</a>
+<a name='L409'></a><a href='#L409'>409</a>
+<a name='L410'></a><a href='#L410'>410</a>
+<a name='L411'></a><a href='#L411'>411</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>
@@ -473,7 +483,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">1x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</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>
@@ -485,8 +496,9 @@
 <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">4x</span>
-<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">8x</span>
+<span class="cline-any cline-yes">8x</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>
@@ -508,15 +520,18 @@
 <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">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</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>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</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">2x</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>
@@ -531,15 +546,17 @@
 <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-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-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-no">&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>
@@ -548,8 +565,8 @@
 <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-no">&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-neutral">&nbsp;</span>
@@ -557,7 +574,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">1x</span>
+<span class="cline-any cline-yes">2x</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>
@@ -568,6 +585,7 @@
 <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-no">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -588,7 +606,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">1x</span>
+<span class="cline-any cline-yes">2x</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>
@@ -632,7 +650,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">1x</span>
+<span class="cline-any cline-yes">2x</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>
@@ -855,21 +873,24 @@
 <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-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">2x</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></td><td class="text"><pre class="prettyprint lang-js">// noinspection DuplicatedCode
 &nbsp;
 import type { StoryObj }             from '@storybook/web-components';
-import {expect, getByTestId, within} from '@storybook/test';
+import {expect, userEvent, within} from '@storybook/test';
 &nbsp;
 import '../custom-element/custom-element.js';
 import '../custom-element/local-storage.js';
+import {localStorage_clear, localStorage_removeItem, localStorageSetItem} from "../custom-element";
 &nbsp;
 type TProps = { title: string; slice: string; key: string; value:string; live:string; body:string};
 const defs: TProps =
@@ -915,41 +936,47 @@ const meta =
 &nbsp;
 export default meta;
 &nbsp;
+window['localStorageSetItem'] = localStorageSetItem;
+window['localStorage_clear'] = localStorage_clear;
+window['localStorage_removeItem'] = localStorage_removeItem;
+&nbsp;
 export const Demo:Story  =
 {   args : {title: 'live value', live:'live', body:`
     &lt;input placeholder="value for localStorage" id="textinput"
         slice="${defs.slice}"
         value="{ //${defs.slice} ?? '${ defs.value }' }"/&gt;
-    &lt;button onclick="localStorage.setItem('${defs.key}',textinput.value  )"&gt;set&lt;/button&gt;
-    &lt;button onclick="localStorage.setItem('${defs.key}','text value'  )"&gt;text value&lt;/button&gt;
-    &lt;button onclick="localStorage.setItem('${defs.key}','another text')"&gt;another text&lt;/button&gt;
-    &lt;button onclick="localStorage.removeItem('${defs.key}'            )"&gt;set blank&lt;/button&gt;
+    &lt;button onclick="localStorageSetItem('${defs.key}',textinput.value  )"&gt;set&lt;/button&gt;
+    &lt;button onclick="localStorageSetItem('${defs.key}','text value'  )"&gt;text value&lt;/button&gt;
+    &lt;button onclick="localStorageSetItem('${defs.key}','another text')"&gt;another text&lt;/button&gt;
+    &lt;button onclick="localStorage_removeItem('${defs.key}'            )"&gt;set blank&lt;/button&gt;
 `}
 ,   play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
     {
+<span class="cstat-no" title="statement not covered" >        localStorage_clear();</span>
         const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
 <span class="cstat-no" title="statement not covered" >        await canvas.findByText(Demo.args!.title as string);</span>
         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>
-        ,  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>
+<span class="cstat-no" title="statement not covered" >        await userEvent.click(await canvas.findByText('set blank'));</span>
+<span class="cstat-no" title="statement not covered" >        await expect(localStorage.getItem(defs.key)).toEqual(null, 'from localStorage');</span>
+<span class="cstat-no" title="statement not covered" >        await expect( val() ).toEqual('');</span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >        byText('set blank').click();</span>
-<span class="cstat-no" title="statement not covered" >        expect(localStorage.getItem(defs.key)).toEqual(null, 'from localStorage');</span>
-<span class="cstat-no" title="statement not covered" >        expect( val() ).toEqual('');</span>
-<span class="cstat-no" title="statement not covered" >        byText('text value').click();</span>
+<span class="cstat-no" title="statement not covered" >        await userEvent.click(canvas.getByText('text value'));</span>
 <span class="cstat-no" title="statement not covered" >        await sleep(10);</span>
-<span class="cstat-no" title="statement not covered" >        expect( val() ).toEqual('text value');</span>
+<span class="cstat-no" title="statement not covered" >        await expect(localStorage.getItem(defs.key)).toEqual('text value', 'from localStorage');</span>
+<span class="cstat-no" title="statement not covered" >        await expect( val() ).toEqual('text value');</span>
 &nbsp;
 <span class="cstat-no" title="statement not covered" >        window['textinput'].value = 'textinput.value';</span>
-<span class="cstat-no" title="statement not covered" >        byText('set').click();</span>
+&nbsp;
+<span class="cstat-no" title="statement not covered" >        await userEvent.click(canvas.getByText('set'));</span>
 <span class="cstat-no" title="statement not covered" >        await sleep(10);</span>
 <span class="cstat-no" title="statement not covered" >        expect( val() ).toEqual('textinput.value');</span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >        byText('another text').click();</span>
+<span class="cstat-no" title="statement not covered" >        await userEvent.click(canvas.getByText('another text'));</span>
 <span class="cstat-no" title="statement not covered" >        await sleep(10);</span>
 <span class="cstat-no" title="statement not covered" >        expect( val() ).toEqual('another text');</span>
 &nbsp;
+<span class="cstat-no" title="statement not covered" >        await userEvent.click(canvas.getByText('set blank'));</span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >        byText('set blank').click();</span>
 <span class="cstat-no" title="statement not covered" >        await sleep(10);</span>
 <span class="cstat-no" title="statement not covered" >        expect( val() ).toEqual('');</span>
     },
@@ -959,31 +986,32 @@ export const Demo:Story  =
 export const AlwaysOverride:Story  =
 {   args : {title: 'AlwaysOverride', live:'', value:'ABC', body:`
     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;
-    &lt;button onclick="localStorage.setItem('${defs.key}','text value'  )"&gt;text value&lt;/button&gt;
-    &lt;button onclick="localStorage.removeItem('${defs.key}'            )"&gt;set blank&lt;/button&gt;
+    &lt;button onclick="localStorageSetItem('${defs.key}','text value')"&gt;text value&lt;/button&gt;
+    &lt;button onclick="localStorage_removeItem('${defs.key}')"&gt;set blank&lt;/button&gt;
     `}
 ,   play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
     {
         const canvas = <span class="cstat-no" title="statement not covered" >within(canvasElement);</span>
 <span class="cstat-no" title="statement not covered" >        await canvas.findByText(AlwaysOverride.args!.title as string);</span>
-        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>
-        ,  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>
+        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>
+        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>
+<span class="cstat-no" title="statement not covered" >        await sleep(10);</span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >        expect(localStorage.getItem(defs.key)).toEqual('ABC', 'from localStorage');</span>
+<span class="cstat-no" title="statement not covered" >        await expect( localStorage.getItem(defs.key)).toEqual('ABC');</span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >        byText('set blank').click();</span>
-<span class="cstat-no" title="statement not covered" >        expect(localStorage.getItem(defs.key)).toEqual(null, 'from localStorage');</span>
+<span class="cstat-no" title="statement not covered" >        await click('set blank')</span>
+<span class="cstat-no" title="statement not covered" >        await expect(localStorage.getItem(defs.key)).toEqual(null, 'from localStorage');</span>
 <span class="cstat-no" title="statement not covered" >        await sleep(10);</span>
-<span class="cstat-no" title="statement not covered" >        expect( val() ).toEqual('ABC');</span>
+<span class="cstat-no" title="statement not covered" >        await expect( val() ).toEqual('ABC');</span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >        byText('text value').click();</span>
+<span class="cstat-no" title="statement not covered" >        await click('text value');</span>
 <span class="cstat-no" title="statement not covered" >        await sleep(10);</span>
-<span class="cstat-no" title="statement not covered" >        expect(localStorage.getItem(defs.key)).toEqual('text value', 'from localStorage');</span>
-<span class="cstat-no" title="statement not covered" >        expect( val() ).toEqual('ABC');</span>
+<span class="cstat-no" title="statement not covered" >        await expect(localStorage.getItem(defs.key)).toEqual('text value', 'from localStorage');</span>
+<span class="cstat-no" title="statement not covered" >        await expect( val() ).toEqual('ABC');</span>
 &nbsp;
-<span class="cstat-no" title="statement not covered" >        byText('set blank').click();</span>
+<span class="cstat-no" title="statement not covered" >        await click('set blank');</span>
 <span class="cstat-no" title="statement not covered" >        await sleep(10);</span>
-<span class="cstat-no" title="statement not covered" >        expect( val() ).toEqual('ABC');</span>
+<span class="cstat-no" title="statement not covered" >        await expect( val() ).toEqual('ABC');</span>
     },
 };
 &nbsp;
@@ -991,15 +1019,15 @@ export const FromStorageWithDefault:Story  =
 {   args : {title: 'live value with defaults', live:'', value:'ABC', body:`
 &nbsp;
     &lt;local-storage key="attr2Key" slice="attr2-key" type="text" live="live" slice-value="@value ?? 'DEF2'"&gt;&lt;/local-storage&gt;
-    &lt;button onclick="localStorage.removeItem('attr2Key')"&gt;clear key&lt;/button&gt;
-    &lt;button onclick="localStorage.setItem('attr2Key','attr2Key value')"&gt;update attr2-key value&lt;/button&gt;
+    &lt;button onclick="localStorage_removeItem('attr2Key')"&gt;clear key&lt;/button&gt;
+    &lt;button onclick="localStorageSetItem('attr2Key','attr2Key value')"&gt;update attr2-key value&lt;/button&gt;
     //attr2-key: &lt;code data-testid="key2-value"&gt;{//attr2-key}&lt;/code&gt;&lt;br/&gt;
 &nbsp;
     &lt;local-storage key="attr3Key" slice="attr3-key" type="text" live="live" slice-value="@value ?? 'DEF3'"&gt;&lt;/local-storage&gt;
-    &lt;button onclick="localStorage.removeItem('attr3Key')"&gt;clear attr3-key key&lt;/button&gt;
-    &lt;button onclick="localStorage.setItem('attr3Key','attr3Key value')"&gt;update attr3-key value&lt;/button&gt;
+    &lt;button onclick="localStorage_removeItem('attr3Key')"&gt;clear attr3-key key&lt;/button&gt;
+    &lt;button onclick="localStorageSetItem('attr3Key','attr3Key value')"&gt;update attr3-key value&lt;/button&gt;
     //attr3-key: &lt;code data-testid="key3-value"&gt;{//attr3-key}&lt;/code&gt;&lt;br/&gt;
-    &lt;button onclick="localStorage.clear()"&gt;clear localStorage&lt;/button&gt;
+    &lt;button onclick="localStorage_clear()"&gt;clear localStorage&lt;/button&gt;
     `}
 ,   play: <span class="fstat-no" title="function not covered" >async ({</span>canvasElement}) =&gt;
     {
@@ -1042,39 +1070,39 @@ export const TypeAttribute:Story  =
                 &lt;local-storage key="jsonKey" slice="json-key" type="json" live="live"&gt;&lt;/local-storage&gt;
                 &lt;input id="typesinput" placeholder="set value"&gt;&lt;button onclick="
                         'textKey,dateKey,timeKey,localDateTimeKey,numberKey,jsonKey'.split(',')
-                            .map( k=&gt; localStorage.setItem(k, typesinput.value) )
+                            .map( k=&gt; localStorageSetItem(k, typesinput.value) )
                     "&gt; set to all&lt;/button&gt;&lt;br&gt;
                 &lt;hr&gt;
                 text-key:
-                    &lt;button onclick="localStorage.setItem('textKey', 'ABC'  )"&gt;ABC&lt;/button&gt;
+                    &lt;button onclick="localStorageSetItem('textKey', 'ABC'  )"&gt;ABC&lt;/button&gt;
                     &lt;code data-testid="text-key"&gt;{//text-key       }&lt;/code&gt;&lt;br&gt;
                 date-key:
-                    &lt;button onclick="localStorage.setItem('dateKey', '2024-04-20T03:58:42.131Z')"&gt;2024-04-21T03:58:42.131Z           &lt;/button&gt;
-                    &lt;button onclick="localStorage.setItem('dateKey', new Date(Date.now()).toISOString())"&gt;now                                &lt;/button&gt;
-                    &lt;button onclick="localStorage.setItem('dateKey', 'ABC'  )"&gt;date ABC - invalid                 &lt;/button&gt;
+                    &lt;button onclick="localStorageSetItem('dateKey', '2024-04-20T03:58:42.131Z')"&gt;2024-04-21T03:58:42.131Z           &lt;/button&gt;
+                    &lt;button onclick="localStorageSetItem('dateKey', new Date(Date.now()).toISOString())"&gt;now                                &lt;/button&gt;
+                    &lt;button onclick="localStorageSetItem('dateKey', 'ABC'  )"&gt;date ABC - invalid                 &lt;/button&gt;
                     &lt;code data-testid="date-key"&gt;{//date-key       }&lt;/code&gt;&lt;br&gt;
                 time-key:
-                    &lt;button onclick="localStorage.setItem('timeKey', '13:30')"&gt;13:30                              &lt;/button&gt;
+                    &lt;button onclick="localStorageSetItem('timeKey', '13:30')"&gt;13:30                              &lt;/button&gt;
                     &lt;code data-testid="time-key"&gt;{//time-key       }&lt;/code&gt;&lt;br&gt;
                 local-date-time:
-                    &lt;button onclick="localStorage.setItem('localDateTimeKey', '1977-04-01T14:00:30')"&gt;1977-04-01T14:00:30 - local       &lt;/button&gt;
+                    &lt;button onclick="localStorageSetItem('localDateTimeKey', '1977-04-01T14:00:30')"&gt;1977-04-01T14:00:30 - local       &lt;/button&gt;
                     &lt;code data-testid="local-date-time"&gt;{//local-date-time}&lt;/code&gt;&lt;br&gt;
                 number-key:
-                    &lt;button onclick="localStorage.setItem('numberKey', '2024'       )"&gt;2024 - number                      &lt;/button&gt;
-                    &lt;button onclick="localStorage.setItem('numberKey', '24'         )"&gt;24   - number                      &lt;/button&gt;
-                    &lt;button onclick="localStorage.setItem('numberKey', '1.23456e+5' )"&gt;1.23456e+5                         &lt;/button&gt;
-                    &lt;button onclick="localStorage.setItem('numberKey', '0001'       )"&gt;0001                               &lt;/button&gt;
-                    &lt;button onclick="localStorage.setItem('numberKey', '000'        )"&gt;000                                &lt;/button&gt;
-                    &lt;button onclick="localStorage.setItem('numberKey', '0'          )"&gt;0                                  &lt;/button&gt;
-                    &lt;button onclick="localStorage.setItem('numberKey', 'ABC'        )"&gt;ABC - invalid, NaN                 &lt;/button&gt;
+                    &lt;button onclick="localStorageSetItem('numberKey', '2024'       )"&gt;2024 - number                      &lt;/button&gt;
+                    &lt;button onclick="localStorageSetItem('numberKey', '24'         )"&gt;24   - number                      &lt;/button&gt;
+                    &lt;button onclick="localStorageSetItem('numberKey', '1.23456e+5' )"&gt;1.23456e+5                         &lt;/button&gt;
+                    &lt;button onclick="localStorageSetItem('numberKey', '0001'       )"&gt;0001                               &lt;/button&gt;
+                    &lt;button onclick="localStorageSetItem('numberKey', '000'        )"&gt;000                                &lt;/button&gt;
+                    &lt;button onclick="localStorageSetItem('numberKey', '0'          )"&gt;0                                  &lt;/button&gt;
+                    &lt;button onclick="localStorageSetItem('numberKey', 'ABC'        )"&gt;ABC - invalid, NaN                 &lt;/button&gt;
                     &lt;code data-testid="number-key"&gt;{//number-key     }&lt;/code&gt; &lt;br&gt;
                 &lt;fieldset&gt;
                     &lt;legend&gt;json-key: &lt;/legend&gt;
 &nbsp;
-                    &lt;button onclick="localStorage.setItem('jsonKey', JSON.stringify('ABC'))"&gt;'ABC'   - string  &lt;/button&gt;
-                    &lt;button onclick="localStorage.setItem('jsonKey', JSON.stringify(12.345))"&gt;12.345  - number  &lt;/button&gt;
-                    &lt;button onclick="localStorage.setItem('jsonKey', JSON.stringify(window.JsonSample) )"&gt;a:1,b:'B'  -json  &lt;/button&gt;
-                    &lt;button onclick="localStorage.setItem('jsonKey', 'ABC'  )"&gt;ABC - invalid     &lt;/button&gt;&lt;br&gt;
+                    &lt;button onclick="localStorageSetItem('jsonKey', JSON.stringify('ABC'))"&gt;'ABC'   - string  &lt;/button&gt;
+                    &lt;button onclick="localStorageSetItem('jsonKey', JSON.stringify(12.345))"&gt;12.345  - number  &lt;/button&gt;
+                    &lt;button onclick="localStorageSetItem('jsonKey', JSON.stringify(window.JsonSample) )"&gt;a:1,b:'B'  -json  &lt;/button&gt;
+                    &lt;button onclick="localStorageSetItem('jsonKey', 'ABC'  )"&gt;ABC - invalid     &lt;/button&gt;&lt;br&gt;
                     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;
                 &lt;/fieldset&gt;
                 &lt;xsl:template mode="json" match="*|@*"&gt;
@@ -1089,8 +1117,8 @@ export const TypeAttribute:Story  =
 <span class="cstat-no" title="statement not covered" >        await canvas.findByText(TypeAttribute.args!.title as string);</span>
         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>
         ,        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>
-        ,  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>
-<span class="cstat-no" title="statement not covered" >        localStorage.clear(); // cleanup before test</span>
+        ,  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>
+<span class="cstat-no" title="statement not covered" >        localStorage_clear(); // cleanup before test</span>
 <span class="cstat-no" title="statement not covered" >        await sleep(10);</span>
 &nbsp;
 <span class="cstat-no" title="statement not covered" >        expectVal('text-key'       ,'');</span>
@@ -1250,10 +1278,11 @@ export const TypeAttribute:Story  =
 <span class="cstat-no" title="statement not covered" >        expectVal('time-key'       ,''                  );</span>
 <span class="cstat-no" title="statement not covered" >        expectVal('local-date-time',''                  );</span>
 <span class="cstat-no" title="statement not covered" >        expectVal('number-key'     ,'NaN'               );</span>
-<span class="cstat-no" title="statement not covered" >        expectVal('json-key'       ,'\na : 1b : B'      );</span>
+<span class="cstat-no" title="statement not covered" >        expectVal('json-key'       ,'a : 1b : B'      );</span>
     },
 };
 &nbsp;
+//#region unit tests
 /* istanbul ignore else -- @preserve */
 if(  'test' === import.meta.env.MODE &amp;&amp;
     !import.meta.url.includes('skiptest') )
@@ -1263,6 +1292,7 @@ if(  'test' === import.meta.env.MODE &amp;&amp;
     const { describe } = await import('vitest')
     describe(meta.title, () =&gt; testStoryBook( mod, meta ) );
 }
+//#endregion
 &nbsp;</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
@@ -1270,7 +1300,7 @@ if(  'test' === import.meta.env.MODE &amp;&amp;
             <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-09-01T19:14:49.300Z
+                at 2024-11-07T03:27:34.733Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/stories/location-element.test.stories.ts.html

@@ -208,7 +208,9 @@
 <a name='L143'></a><a href='#L143'>143</a>
 <a name='L144'></a><a href='#L144'>144</a>
 <a name='L145'></a><a href='#L145'>145</a>
-<a name='L146'></a><a href='#L146'>146</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L146'></a><a href='#L146'>146</a>
+<a name='L147'></a><a href='#L147'>147</a>
+<a name='L148'></a><a href='#L148'>148</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>
@@ -345,6 +347,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-neutral">&nbsp;</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>
@@ -353,6 +356,7 @@
 <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></td><td class="text"><pre class="prettyprint lang-js">// noinspection DuplicatedCode
 &nbsp;
 import type { StoryObj }                            from '@storybook/web-components';
@@ -489,6 +493,7 @@ export const SrcAttribute:Story  =
 };
 &nbsp;
 &nbsp;
+//#region unit tests
 /* istanbul ignore else -- @preserve */
 if(  'test' === import.meta.env.MODE &amp;&amp;
     !import.meta.url.includes('skiptest') )
@@ -498,6 +503,7 @@ if(  'test' === import.meta.env.MODE &amp;&amp;
     const { describe } = await import('vitest')
     describe(meta.title, () =&gt; testStoryBook( mod, meta ) );
 }
+//#endregion
 &nbsp;</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
@@ -505,7 +511,7 @@ if(  'test' === import.meta.env.MODE &amp;&amp;
             <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-09-01T19:14:49.300Z
+                at 2024-11-07T03:27:34.733Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/stories/module-url.test.stories.ts.html

@@ -246,7 +246,9 @@
 <a name='L181'></a><a href='#L181'>181</a>
 <a name='L182'></a><a href='#L182'>182</a>
 <a name='L183'></a><a href='#L183'>183</a>
-<a name='L184'></a><a href='#L184'>184</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L184'></a><a href='#L184'>184</a>
+<a name='L185'></a><a href='#L185'>185</a>
+<a name='L186'></a><a href='#L186'>186</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>
@@ -421,6 +423,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-neutral">&nbsp;</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>
@@ -429,6 +432,7 @@
 <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></td><td class="text"><pre class="prettyprint lang-js">// noinspection DuplicatedCode
 &nbsp;
 // importmap is located at .storybook/preview-head.html
@@ -603,6 +607,7 @@ export const HashWithinLib:Story  =
 };
 &nbsp;
 &nbsp;
+//#region unit tests
 /* istanbul ignore else -- @preserve */
 if(  'test' === import.meta.env.MODE &amp;&amp;
     !import.meta.url.includes('skiptest') )
@@ -612,6 +617,7 @@ if(  'test' === import.meta.env.MODE &amp;&amp;
     const { describe } = await import('vitest')
     describe(meta.title, () =&gt; testStoryBook( mod, meta ) );
 }
+//#endregion
 &nbsp;</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
@@ -619,7 +625,7 @@ if(  'test' === import.meta.env.MODE &amp;&amp;
             <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-09-01T19:14:49.300Z
+                at 2024-11-07T03:27:34.733Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/stories/set-url.test.stories.ts.html

@@ -177,7 +177,9 @@
 <a name='L112'></a><a href='#L112'>112</a>
 <a name='L113'></a><a href='#L113'>113</a>
 <a name='L114'></a><a href='#L114'>114</a>
-<a name='L115'></a><a href='#L115'>115</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L115'></a><a href='#L115'>115</a>
+<a name='L116'></a><a href='#L116'>116</a>
+<a name='L117'></a><a href='#L117'>117</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>
@@ -284,6 +286,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-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-yes">1x</span>
@@ -291,6 +294,7 @@
 <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></td><td class="text"><pre class="prettyprint lang-js">// noinspection DuplicatedCode
 &nbsp;
 import type {StoryObj} from '@storybook/web-components';
@@ -397,6 +401,7 @@ export const DynamicMethod: Story =
     };
 &nbsp;
 &nbsp;
+//#region unit tests
 /* istanbul ignore else -- @preserve */
 if ('test' === import.meta.env.MODE &amp;&amp;
     !import.meta.url.includes('skiptest')) {
@@ -405,6 +410,7 @@ if ('test' === import.meta.env.MODE &amp;&amp;
     const {describe} = await import('vitest')
     describe(meta.title, () =&gt; testStoryBook(mod, meta));
 }
+//#endregion
 &nbsp;</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
@@ -412,7 +418,7 @@ if ('test' === import.meta.env.MODE &amp;&amp;
             <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-09-01T19:14:49.300Z
+                at 2024-11-07T03:27:34.733Z
             </div>
         <script src="../../prettify.js"></script>
         <script>