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

package/coverage/src/stories/http-request.stories.ts.html

@@ -581,12 +581,12 @@ function Template({title, slice, url}: TProps)
         slice="${slice}"
         ></http-request>
     <input placeholder="URL for fetch" slice="url" value="{ //url ?? '${ url }' }"/>
-    <button>set</button>   
-    <button slice="url" slice-value="''" slice-event="click">set blank</button>   
-    <button slice="url" slice-value="'/reflect'" slice-event="click">/reflect</button>   
-    <button slice="url" slice-value="'/pokemon'"         slice-event="click">/pokemon</button>   
-    <button slice="url" slice-value="'/pokemon?limit=6'" slice-event="click">/pokemon?limit=6</button>   
-    <button slice="url" slice-value="'/pokemon?limit=3'" slice-event="click">/pokemon?limit=3</button>   
+    <button>set</button>
+    <button slice="url" slice-value="''" slice-event="click">set blank</button>
+    <button slice="url" slice-value="'/reflect'" slice-event="click">/reflect</button>
+    <button slice="url" slice-value="'/pokemon'"         slice-event="click">/pokemon</button>
+    <button slice="url" slice-value="'/pokemon?limit=6'" slice-event="click">/pokemon?limit=6</button>
+    <button slice="url" slice-value="'/pokemon?limit=3'" slice-event="click">/pokemon?limit=3</button>
  
     <p>Pokemon Count: {count(/datadom/slice/${slice}//results)}</p>
     <if test="count(/datadom/slice/${slice}//results) < 0">
@@ -802,7 +802,7 @@ from <code>${url}</code>
             <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-25T03:55:40.964Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/stories/index.html

@@ -25,28 +25,28 @@
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>598/598</span>
+                <span class='fraction'>776/776</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>12/12</span>
+                <span class='fraction'>19/19</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>96/96</span>
+                <span class='fraction'>122/122</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>560/560</span>
+                <span class='fraction'>729/729</span>
             </div>
         
             
@@ -79,63 +79,78 @@
 </tr>
 </thead>
 <tbody><tr>
-	<td class="file high" data-value="attributes.stories.ts"><a href="attributes.stories.ts.html">attributes.stories.ts</a></td>
+	<td class="file high" data-value="attributes.test.stories.ts"><a href="attributes.test.stories.ts.html">attributes.test.stories.ts</a></td>
 	<td data-value="100" class="pic high">
 	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
 	</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="41" class="abs high">41/41</td>
+	<td data-value="47" class="abs high">47/47</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="0" class="abs high">0/0</td>
+	<td data-value="1" class="abs high">1/1</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="9" class="abs high">9/9</td>
+	<td data-value="10" class="abs high">10/10</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="37" class="abs high">37/37</td>
+	<td data-value="42" class="abs high">42/42</td>
 	</tr>
 
 <tr>
-	<td class="file high" data-value="css.stories.ts"><a href="css.stories.ts.html">css.stories.ts</a></td>
+	<td class="file high" data-value="css.test.stories.ts"><a href="css.test.stories.ts.html">css.test.stories.ts</a></td>
 	<td data-value="100" class="pic high">
 	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
 	</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="31" class="abs high">31/31</td>
+	<td data-value="43" class="abs high">43/43</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="2" class="abs high">2/2</td>
+	<td data-value="3" class="abs high">3/3</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="7" class="abs high">7/7</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="42" class="abs high">42/42</td>
+	</tr>
+
+<tr>
+	<td class="file high" data-value="dom-merge.test.stories.ts"><a href="dom-merge.test.stories.ts.html">dom-merge.test.stories.ts</a></td>
+	<td data-value="100" class="pic high">
+	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
+	</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="40" class="abs high">40/40</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="1" class="abs high">1/1</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="6" class="abs high">6/6</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="31" class="abs high">31/31</td>
+	<td data-value="38" class="abs high">38/38</td>
 	</tr>
 
 <tr>
-	<td class="file high" data-value="dom-merge.stories.ts"><a href="dom-merge.stories.ts.html">dom-merge.stories.ts</a></td>
+	<td class="file high" data-value="external-template.test.stories.ts"><a href="external-template.test.stories.ts.html">external-template.test.stories.ts</a></td>
 	<td data-value="100" class="pic high">
 	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
 	</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="35" class="abs high">35/35</td>
+	<td data-value="86" class="abs high">86/86</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="0" class="abs high">0/0</td>
+	<td data-value="1" class="abs high">1/1</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="5" class="abs high">5/5</td>
+	<td data-value="17" class="abs high">17/17</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="34" class="abs high">34/34</td>
+	<td data-value="83" class="abs high">83/83</td>
 	</tr>
 
 <tr>
-	<td class="file high" data-value="external-template.stories.ts"><a href="external-template.stories.ts.html">external-template.stories.ts</a></td>
+	<td class="file high" data-value="form.test.stories.ts"><a href="form.test.stories.ts.html">form.test.stories.ts</a></td>
 	<td data-value="100" class="pic high">
 	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
 	</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="81" class="abs high">81/81</td>
+	<td data-value="45" class="abs high">45/45</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="0" class="abs high">0/0</td>
+	<td data-value="1" class="abs high">1/1</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="16" class="abs high">16/16</td>
+	<td data-value="7" class="abs high">7/7</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="79" class="abs high">79/79</td>
+	<td data-value="44" class="abs high">44/44</td>
 	</tr>
 
 <tr>
@@ -154,33 +169,33 @@
 	</tr>
 
 <tr>
-	<td class="file high" data-value="local-storage.stories.ts"><a href="local-storage.stories.ts.html">local-storage.stories.ts</a></td>
+	<td class="file high" data-value="local-storage.test.stories.ts"><a href="local-storage.test.stories.ts.html">local-storage.test.stories.ts</a></td>
 	<td data-value="100" class="pic high">
 	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
 	</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="224" class="abs high">224/224</td>
+	<td data-value="232" class="abs high">232/232</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="4" class="abs high">4/4</td>
+	<td data-value="5" class="abs high">5/5</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="15" class="abs high">15/15</td>
+	<td data-value="16" class="abs high">16/16</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="215" class="abs high">215/215</td>
+	<td data-value="222" class="abs high">222/222</td>
 	</tr>
 
 <tr>
-	<td class="file high" data-value="location-element.stories.ts"><a href="location-element.stories.ts.html">location-element.stories.ts</a></td>
+	<td class="file high" data-value="location-element.test.stories.ts"><a href="location-element.test.stories.ts.html">location-element.test.stories.ts</a></td>
 	<td data-value="100" class="pic high">
 	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
 	</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="56" class="abs high">56/56</td>
+	<td data-value="62" class="abs high">62/62</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="2" class="abs high">2/2</td>
+	<td data-value="3" class="abs high">3/3</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="15" class="abs high">15/15</td>
+	<td data-value="16" class="abs high">16/16</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="45" class="abs high">45/45</td>
+	<td data-value="50" class="abs high">50/50</td>
 	</tr>
 
 <tr>
@@ -189,28 +204,43 @@
 	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
 	</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="9" class="abs high">9/9</td>
+	<td data-value="8" class="abs high">8/8</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="2" class="abs high">2/2</td>
+	<td data-value="0" class="abs high">0/0</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="5" class="abs high">5/5</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="7" class="abs high">7/7</td>
+	<td data-value="6" class="abs high">6/6</td>
 	</tr>
 
 <tr>
-	<td class="file high" data-value="slice-events.stories.ts"><a href="slice-events.stories.ts.html">slice-events.stories.ts</a></td>
+	<td class="file high" data-value="slice-events.test.stories.ts"><a href="slice-events.test.stories.ts.html">slice-events.test.stories.ts</a></td>
 	<td data-value="100" class="pic high">
 	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
 	</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="50" class="abs high">50/50</td>
+	<td data-value="78" class="abs high">78/78</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="0" class="abs high">0/0</td>
+	<td data-value="1" class="abs high">1/1</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="13" class="abs high">13/13</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="73" class="abs high">73/73</td>
+	</tr>
+
+<tr>
+	<td class="file high" data-value="slots.test.stories.ts"><a href="slots.test.stories.ts.html">slots.test.stories.ts</a></td>
+	<td data-value="100" class="pic high">
+	<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
+	</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="64" class="abs high">64/64</td>
+	<td data-value="100" class="pct high">100%</td>
+	<td data-value="1" class="abs high">1/1</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="9" class="abs high">9/9</td>
 	<td data-value="100" class="pct high">100%</td>
-	<td data-value="46" class="abs high">46/46</td>
+	<td data-value="63" class="abs high">63/63</td>
 	</tr>
 
 </tbody>
@@ -221,7 +251,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-25T03:55:40.964Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

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

@@ -3,7 +3,7 @@
 <html lang="en">
 
 <head>
-    <title>Code coverage report for src/stories/local-storage.stories.ts</title>
+    <title>Code coverage report for src/stories/local-storage.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> local-storage.stories.ts</h1>
+        <h1><a href="../../index.html">All files</a> / <a href="index.html">src/stories</a> local-storage.test.stories.ts</h1>
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>224/224</span>
+                <span class='fraction'>232/232</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>4/4</span>
+                <span class='fraction'>5/5</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>15/15</span>
+                <span class='fraction'>16/16</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>215/215</span>
+                <span class='fraction'>222/222</span>
             </div>
         
             
@@ -451,7 +451,19 @@
 <a name='L386'></a><a href='#L386'>386</a>
 <a name='L387'></a><a href='#L387'>387</a>
 <a name='L388'></a><a href='#L388'>388</a>
-<a name='L389'></a><a href='#L389'>389</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L389'></a><a href='#L389'>389</a>
+<a name='L390'></a><a href='#L390'>390</a>
+<a name='L391'></a><a href='#L391'>391</a>
+<a name='L392'></a><a href='#L392'>392</a>
+<a name='L393'></a><a href='#L393'>393</a>
+<a name='L394'></a><a href='#L394'>394</a>
+<a name='L395'></a><a href='#L395'>395</a>
+<a name='L396'></a><a href='#L396'>396</a>
+<a name='L397'></a><a href='#L397'>397</a>
+<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>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -672,6 +684,8 @@
 <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>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">15x</span>
 <span class="cline-any cline-yes">96x</span>
@@ -839,6 +853,16 @@
 <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-yes">1x</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-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';
@@ -868,13 +892,13 @@ function render(args: TProps)
 &nbsp;
             &lt;custom-element&gt;
 &lt;template&gt;&lt;!-- wrapping into template to prevent images loading within DCE declaration --&gt;
-    &lt;local-storage 
-        key="${ key }" 
-        slice="${ slice }" 
-        ${ live  ? `live="${live    }"`:''} 
-        ${ value ? `value="${value  }"`:''} 
+    &lt;local-storage
+        key="${ key }"
+        slice="${ slice }"
+        ${ live  ? `live="${live    }"`:''}
+        ${ value ? `value="${value  }"`:''}
         &gt;&lt;/local-storage&gt;
-    
+&nbsp;
     &lt;br/&gt;
     &lt;var&gt;${key}&lt;/var&gt;:&lt;code data-testid="slice-value"&gt;{ //slice/${slice} }&lt;/code&gt;
     &lt;br/&gt;
@@ -894,12 +918,12 @@ export default meta;
 export const Demo:Story  =
 {   args : {title: 'live value', live:'live', body:`
     &lt;input placeholder="value for localStorage" id="textinput"
-        slice="${defs.slice}" 
+        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="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;
 `}
 ,   play: async ({canvasElement}) =&gt;
     {
@@ -935,8 +959,8 @@ 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="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;
     `}
 ,   play: async ({canvasElement}) =&gt;
     {
@@ -1009,7 +1033,7 @@ export const FromStorageWithDefault:Story  =
 &nbsp;
 export const TypeAttribute:Story  =
 {   args : {title: 'local-storage type attribute variations', body:`
-    
+&nbsp;
                 &lt;local-storage key="textKey" slice="text-key" type="text" live="live"&gt;&lt;/local-storage&gt;
                 &lt;local-storage key="dateKey" slice="date-key" type="date" live="live"&gt;&lt;/local-storage&gt;
                 &lt;local-storage key="timeKey" slice="time-key" type="time" live="live"&gt;&lt;/local-storage&gt;
@@ -1059,6 +1083,8 @@ export const TypeAttribute:Story  =
     `}
 ,   play: async ({canvasElement}) =&gt;
     {
+        window['JsonSample'] = {a:1,b:'B'};
+&nbsp;
         const canvas = within(canvasElement);
         await canvas.findByText(TypeAttribute.args!.title as string);
         const byText = txt =&gt; canvas.getByText(txt)
@@ -1227,6 +1253,16 @@ export const TypeAttribute:Story  =
         expectVal('json-key'       ,'\na : 1b : B'      );
     },
 };
+&nbsp;
+const TestStories = { Demo, AlwaysOverride, FromStorageWithDefault, TypeAttribute };
+&nbsp;
+/* istanbul ignore else -- @preserve */
+if( 'test' === import.meta.env.MODE )
+{   localStorage.clear();
+    const {playStories} = await  import('./renderPlay');
+    const {describe} = await import('vitest')
+    describe('slots', () =&gt; playStories( TestStories, meta ) );
+}
 &nbsp;</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
@@ -1234,7 +1270,7 @@ export const TypeAttribute: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-25T03:55:40.964Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

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

@@ -3,7 +3,7 @@
 <html lang="en">
 
 <head>
-    <title>Code coverage report for src/stories/location-element.stories.ts</title>
+    <title>Code coverage report for src/stories/location-element.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> location-element.stories.ts</h1>
+        <h1><a href="../../index.html">All files</a> / <a href="index.html">src/stories</a> location-element.test.stories.ts</h1>
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>56/56</span>
+                <span class='fraction'>62/62</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>2/2</span>
+                <span class='fraction'>3/3</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>15/15</span>
+                <span class='fraction'>16/16</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>45/45</span>
+                <span class='fraction'>50/50</span>
             </div>
         
             
@@ -196,7 +196,20 @@
 <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>
-<a name='L134'></a><a href='#L134'>134</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<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>
+<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>
+<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>
@@ -329,13 +342,25 @@
 <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-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-yes">1x</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-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 type { StoryObj }                            from '@storybook/web-components';
+import {expect, getByTestId, within}                from '@storybook/test';
 &nbsp;
 import '../custom-element/custom-element.js';
 import '../custom-element/location-element.js';
+import {RealtimeEventInSlice, SliceInitChangeEvent} from './slice-events.test.stories';
 &nbsp;
 type TProps = { title: string; slice: string; href: string; live:string; body:string};
 const defs: TProps =
@@ -357,13 +382,13 @@ function render(args: TProps)
 &nbsp;
             &lt;custom-element&gt;
 &lt;template&gt;&lt;!-- wrapping into template to prevent images loading within DCE declaration --&gt;
-    &lt;location-element 
-        slice="${ slice }" 
-        ${ href   ? `href="${ href }"`:''} 
+    &lt;location-element
+        slice="${ slice }"
+        ${ href   ? `href="${ href }"`:''}
         live="${ live }"
         &gt;&lt;/location-element&gt;
-    
-    
+&nbsp;
+&nbsp;
     ${ body }
     &lt;xhtml:table&gt;
         &lt;xhtml:tbody&gt;
@@ -371,12 +396,12 @@ function render(args: TProps)
                 &lt;xhtml:th&gt;&lt;h3&gt; URL properties &lt;/h3&gt;&lt;/xhtml:th&gt;
                 &lt;xhtml:td&gt;{count(//value/@*)}&lt;/xhtml:td&gt;
             &lt;/xhtml:tr&gt;
-            &lt;apply-templates mode="attrs" select="//value/@*"&gt;&lt;/apply-templates&gt;
+            &lt;apply-templates mode="attrs" select="//${ slice }/value/@*"&gt;&lt;/apply-templates&gt;
         &lt;/xhtml:tbody&gt;
     &lt;/xhtml:table&gt;
     &lt;xhtml:table&gt;
             &lt;h3&gt; URL parameters &lt;/h3&gt;
-            &lt;apply-templates mode="attrs" select="//params/*/*"&gt;&lt;/apply-templates&gt;
+            &lt;apply-templates mode="attrs" select="//${ slice }/value/params/*/*"&gt;&lt;/apply-templates&gt;
     &lt;/xhtml:table&gt;
     &lt;xsl:template mode="attrs" match="*|@*"&gt;
         &lt;xhtml:tr&gt;
@@ -462,6 +487,17 @@ export const SrcAttribute:Story  =
 &nbsp;
     },
 };
+&nbsp;
+&nbsp;
+const TestStories = { Demo, SrcAttribute };
+&nbsp;
+/* istanbul ignore else -- @preserve */
+if( 'test' === import.meta.env.MODE )
+{
+    const {playStories} = await  import('./renderPlay');
+    const {describe} = await import('vitest')
+    describe('slots', () =&gt; playStories( TestStories, meta ) );
+}
 &nbsp;</pre></td></tr></table></pre>
 
                 <div class='push'></div><!-- for sticky footer -->
@@ -469,7 +505,7 @@ export const SrcAttribute: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-25T03:55:40.964Z
             </div>
         <script src="../../prettify.js"></script>
         <script>