@epa-wg/custom-element-dist 0.0.29 → 0.0.32

package/coverage/src/stories/index.html

@@ -23,9 +23,9 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">28.42% </span>
+                <span class="strong">27.12% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>255/897</span>
+                <span class='fraction'>262/966</span>
             </div>
         
             
@@ -37,16 +37,16 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">32.43% </span>
+                <span class="strong">30.57% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>48/148</span>
+                <span class='fraction'>48/157</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">27.87% </span>
+                <span class="strong">26.56% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>235/843</span>
+                <span class='fraction'>242/911</span>
             </div>
         
             
@@ -80,17 +80,17 @@
 </thead>
 <tbody><tr>
 	<td class="file low" data-value="attributes.test.stories.ts"><a href="attributes.test.stories.ts.html">attributes.test.stories.ts</a></td>
-	<td data-value="26.08" class="pic low">
-	<div class="chart"><div class="cover-fill" style="width: 26%"></div><div class="cover-empty" style="width: 74%"></div></div>
+	<td data-value="17.04" class="pic low">
+	<div class="chart"><div class="cover-fill" style="width: 17%"></div><div class="cover-empty" style="width: 83%"></div></div>
 	</td>
-	<td data-value="26.08" class="pct low">26.08%</td>
-	<td data-value="46" class="abs low">12/46</td>
+	<td data-value="17.04" class="pct low">17.04%</td>
+	<td data-value="88" class="abs low">15/88</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="3" class="abs high">3/3</td>
-	<td data-value="20" class="pct low">20%</td>
-	<td data-value="10" class="abs low">2/10</td>
-	<td data-value="26.82" class="pct low">26.82%</td>
-	<td data-value="41" class="abs low">11/41</td>
+	<td data-value="13.33" class="pct low">13.33%</td>
+	<td data-value="15" class="abs low">2/15</td>
+	<td data-value="17.07" class="pct low">17.07%</td>
+	<td data-value="82" class="abs low">14/82</td>
 	</tr>
 
 <tr>
@@ -230,17 +230,17 @@
 
 <tr>
 	<td class="file low" 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="17.94" class="pic low">
+	<td data-value="17.14" class="pic low">
 	<div class="chart"><div class="cover-fill" style="width: 17%"></div><div class="cover-empty" style="width: 83%"></div></div>
 	</td>
-	<td data-value="17.94" class="pct low">17.94%</td>
-	<td data-value="78" class="abs low">14/78</td>
+	<td data-value="17.14" class="pct low">17.14%</td>
+	<td data-value="105" class="abs low">18/105</td>
 	<td data-value="100" class="pct high">100%</td>
 	<td data-value="3" class="abs high">3/3</td>
-	<td data-value="15.38" class="pct low">15.38%</td>
-	<td data-value="13" class="abs low">2/13</td>
-	<td data-value="17.8" class="pct low">17.8%</td>
-	<td data-value="73" class="abs low">13/73</td>
+	<td data-value="11.76" class="pct low">11.76%</td>
+	<td data-value="17" class="abs low">2/17</td>
+	<td data-value="17" class="pct low">17%</td>
+	<td data-value="100" class="abs low">17/100</td>
 	</tr>
 
 <tr>
@@ -296,7 +296,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-11-07T07:50:22.395Z
+                at 2024-11-28T15:54:41.264Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

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

@@ -484,7 +484,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">2x</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>
@@ -496,8 +496,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">8x</span>
-<span class="cline-any cline-yes">8x</span>
+<span class="cline-any cline-yes">4x</span>
+<span class="cline-any cline-yes">4x</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>
@@ -520,18 +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-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-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">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-yes">2x</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>
@@ -574,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">2x</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>
@@ -606,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">2x</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>
@@ -650,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">2x</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>
@@ -874,13 +874,13 @@
 <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">1x</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-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></td><td class="text"><pre class="prettyprint lang-js">// noinspection DuplicatedCode
@@ -1300,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-11-07T07:50:22.395Z
+                at 2024-11-28T15:54:41.264Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

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

@@ -209,9 +209,7 @@
 <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>
-<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>
+<a name='L147'></a><a href='#L147'>147</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>
@@ -360,11 +358,10 @@
 <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, 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 =
@@ -511,7 +508,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-11-07T07:50:22.395Z
+                at 2024-11-28T15:54:41.264Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

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

@@ -625,7 +625,7 @@ if(  'test' === import.meta.env.MODE &&
             <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-11-07T07:50:22.395Z
+                at 2024-11-28T15:54:41.264Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

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

@@ -418,7 +418,7 @@ if ('test' === import.meta.env.MODE &&
             <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-11-07T07:50:22.395Z
+                at 2024-11-28T15:54:41.264Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/stories/slice-events.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">15.38%</text>
+    <text x="94" y="22" class="percent">11.76%</text>
 </svg>

package/coverage/src/stories/slice-events.test.stories.ts.html

@@ -23,9 +23,9 @@
         <div class='clearfix'>
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">17.94% </span>
+                <span class="strong">17.14% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>14/78</span>
+                <span class='fraction'>18/105</span>
             </div>
         
             
@@ -37,16 +37,16 @@
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">15.38% </span>
+                <span class="strong">11.76% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>2/13</span>
+                <span class='fraction'>2/17</span>
             </div>
         
             
             <div class='fl pad1y space-right2'>
-                <span class="strong">17.8% </span>
+                <span class="strong">17% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>13/73</span>
+                <span class='fraction'>17/100</span>
             </div>
         
             
@@ -265,22 +265,109 @@
 <a name='L200'></a><a href='#L200'>200</a>
 <a name='L201'></a><a href='#L201'>201</a>
 <a name='L202'></a><a href='#L202'>202</a>
-<a name='L203'></a><a href='#L203'>203</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>
-<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-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-yes">5x</span>
-<span class="cline-any cline-yes">5x</span>
+<a name='L203'></a><a href='#L203'>203</a>
+<a name='L204'></a><a href='#L204'>204</a>
+<a name='L205'></a><a href='#L205'>205</a>
+<a name='L206'></a><a href='#L206'>206</a>
+<a name='L207'></a><a href='#L207'>207</a>
+<a name='L208'></a><a href='#L208'>208</a>
+<a name='L209'></a><a href='#L209'>209</a>
+<a name='L210'></a><a href='#L210'>210</a>
+<a name='L211'></a><a href='#L211'>211</a>
+<a name='L212'></a><a href='#L212'>212</a>
+<a name='L213'></a><a href='#L213'>213</a>
+<a name='L214'></a><a href='#L214'>214</a>
+<a name='L215'></a><a href='#L215'>215</a>
+<a name='L216'></a><a href='#L216'>216</a>
+<a name='L217'></a><a href='#L217'>217</a>
+<a name='L218'></a><a href='#L218'>218</a>
+<a name='L219'></a><a href='#L219'>219</a>
+<a name='L220'></a><a href='#L220'>220</a>
+<a name='L221'></a><a href='#L221'>221</a>
+<a name='L222'></a><a href='#L222'>222</a>
+<a name='L223'></a><a href='#L223'>223</a>
+<a name='L224'></a><a href='#L224'>224</a>
+<a name='L225'></a><a href='#L225'>225</a>
+<a name='L226'></a><a href='#L226'>226</a>
+<a name='L227'></a><a href='#L227'>227</a>
+<a name='L228'></a><a href='#L228'>228</a>
+<a name='L229'></a><a href='#L229'>229</a>
+<a name='L230'></a><a href='#L230'>230</a>
+<a name='L231'></a><a href='#L231'>231</a>
+<a name='L232'></a><a href='#L232'>232</a>
+<a name='L233'></a><a href='#L233'>233</a>
+<a name='L234'></a><a href='#L234'>234</a>
+<a name='L235'></a><a href='#L235'>235</a>
+<a name='L236'></a><a href='#L236'>236</a>
+<a name='L237'></a><a href='#L237'>237</a>
+<a name='L238'></a><a href='#L238'>238</a>
+<a name='L239'></a><a href='#L239'>239</a>
+<a name='L240'></a><a href='#L240'>240</a>
+<a name='L241'></a><a href='#L241'>241</a>
+<a name='L242'></a><a href='#L242'>242</a>
+<a name='L243'></a><a href='#L243'>243</a>
+<a name='L244'></a><a href='#L244'>244</a>
+<a name='L245'></a><a href='#L245'>245</a>
+<a name='L246'></a><a href='#L246'>246</a>
+<a name='L247'></a><a href='#L247'>247</a>
+<a name='L248'></a><a href='#L248'>248</a>
+<a name='L249'></a><a href='#L249'>249</a>
+<a name='L250'></a><a href='#L250'>250</a>
+<a name='L251'></a><a href='#L251'>251</a>
+<a name='L252'></a><a href='#L252'>252</a>
+<a name='L253'></a><a href='#L253'>253</a>
+<a name='L254'></a><a href='#L254'>254</a>
+<a name='L255'></a><a href='#L255'>255</a>
+<a name='L256'></a><a href='#L256'>256</a>
+<a name='L257'></a><a href='#L257'>257</a>
+<a name='L258'></a><a href='#L258'>258</a>
+<a name='L259'></a><a href='#L259'>259</a>
+<a name='L260'></a><a href='#L260'>260</a>
+<a name='L261'></a><a href='#L261'>261</a>
+<a name='L262'></a><a href='#L262'>262</a>
+<a name='L263'></a><a href='#L263'>263</a>
+<a name='L264'></a><a href='#L264'>264</a>
+<a name='L265'></a><a href='#L265'>265</a>
+<a name='L266'></a><a href='#L266'>266</a>
+<a name='L267'></a><a href='#L267'>267</a>
+<a name='L268'></a><a href='#L268'>268</a>
+<a name='L269'></a><a href='#L269'>269</a>
+<a name='L270'></a><a href='#L270'>270</a>
+<a name='L271'></a><a href='#L271'>271</a>
+<a name='L272'></a><a href='#L272'>272</a>
+<a name='L273'></a><a href='#L273'>273</a>
+<a name='L274'></a><a href='#L274'>274</a>
+<a name='L275'></a><a href='#L275'>275</a>
+<a name='L276'></a><a href='#L276'>276</a>
+<a name='L277'></a><a href='#L277'>277</a>
+<a name='L278'></a><a href='#L278'>278</a>
+<a name='L279'></a><a href='#L279'>279</a>
+<a name='L280'></a><a href='#L280'>280</a>
+<a name='L281'></a><a href='#L281'>281</a>
+<a name='L282'></a><a href='#L282'>282</a>
+<a name='L283'></a><a href='#L283'>283</a>
+<a name='L284'></a><a href='#L284'>284</a>
+<a name='L285'></a><a href='#L285'>285</a>
+<a name='L286'></a><a href='#L286'>286</a>
+<a name='L287'></a><a href='#L287'>287</a>
+<a name='L288'></a><a href='#L288'>288</a>
+<a name='L289'></a><a href='#L289'>289</a>
+<a name='L290'></a><a href='#L290'>290</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>
+<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-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-yes">9x</span>
+<span class="cline-any cline-yes">9x</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>
@@ -461,6 +548,93 @@
 <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-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-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>
+<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-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-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-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-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-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-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-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-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-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-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
@@ -658,6 +832,93 @@ export const SlicesInAttrAndName:Story  =
     },
 };
 &nbsp;
+&nbsp;
+export const CheckboxChecked:Story  =
+{   args : {title: 'Checkbox value in slice ', body:`
+    &lt;p&gt; Checked value propagated into slice&lt;/p&gt;
+    &lt;custom-element&gt;
+        &lt;template&gt;
+            &lt;input type="checkbox"  slice="s1" value="V1" checked/&gt;
+            &lt;p&gt;slice: {//s1}&lt;/p&gt;
+        &lt;/template&gt;
+    &lt;/custom-element&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 expect( await canvas.findByText( 'slice: V1')).toBeInTheDocument();</span>
+    },
+};
+&nbsp;
+export const CheckboxUnchecked:Story  =
+{   args : {title: 'UncheckedCheckbox value not in slice ', body:`
+    &lt;p&gt; Check to see the value propagated into slice. Uncheck to observe the empty string in the slice. &lt;/p&gt;
+    &lt;custom-element&gt;
+        &lt;template&gt;
+            &lt;input type="checkbox"  slice="s1" value="V1" data-testid="i1"/&gt;
+            &lt;p data-testid="t1"&gt;slice: {//s1}&lt;/p&gt;
+        &lt;/template&gt;
+    &lt;/custom-element&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>
+        const p =<span class="cstat-no" title="statement not covered" >await canvas.findByTestId( 't1');</span>
+<span class="cstat-no" title="statement not covered" >        await expect(p.textContent ).toEqual("slice: ");</span>
+        const cb = <span class="cstat-no" title="statement not covered" >await canvas.findByTestId( 'i1');</span>
+<span class="cstat-no" title="statement not covered" >        await userEvent.click ( cb );</span>
+<span class="cstat-no" title="statement not covered" >        await expect( await canvas.findByText('slice: V1')).toBeInTheDocument();</span>
+<span class="cstat-no" title="statement not covered" >        await userEvent.click ( cb );</span>
+<span class="cstat-no" title="statement not covered" >        await expect( p.textContent).toEqual('slice: ');</span>
+&nbsp;
+    },
+};
+&nbsp;
+export const CheckboxSliceValue:Story  =
+{   args : {title: 'UncheckedCheckbox slice-value not in slice ', body:`
+    &lt;p&gt; Check to see the value propagated into slice. Uncheck to observe the empty string in the slice. &lt;/p&gt;
+    &lt;custom-element&gt;
+        &lt;template&gt;
+            &lt;input type="checkbox"  slice="s1" slice-value="'V1'" data-testid="i1"/&gt;
+            &lt;p data-testid="t1"&gt;slice: {//s1}&lt;/p&gt;
+        &lt;/template&gt;
+    &lt;/custom-element&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>
+        const p =<span class="cstat-no" title="statement not covered" >await canvas.findByTestId( 't1');</span>
+<span class="cstat-no" title="statement not covered" >        await expect(p.textContent ).toEqual("slice: ");</span>
+        const cb = <span class="cstat-no" title="statement not covered" >await canvas.findByTestId( 'i1');</span>
+<span class="cstat-no" title="statement not covered" >        await userEvent.click ( cb );</span>
+<span class="cstat-no" title="statement not covered" >        await expect( await canvas.findByText('slice: V1')).toBeInTheDocument();</span>
+<span class="cstat-no" title="statement not covered" >        await userEvent.click ( cb );</span>
+<span class="cstat-no" title="statement not covered" >        await expect( p.textContent).toEqual('slice: ');</span>
+&nbsp;
+    },
+};
+&nbsp;
+export const RadiogroupSliceValue:Story  =
+{   args : {title: 'Radiogroup value', body:`
+    &lt;p&gt; The value propagated into slice from the last checked radiobutton. &lt;/p&gt;
+    &lt;custom-element&gt;
+        &lt;template&gt;
+            &lt;p&gt;V1: &lt;input type="radio"  slice="s1" value="V1" data-testid="i1" name="group1"/&gt;&lt;/p&gt;
+            &lt;p&gt;V2: &lt;input type="radio"  slice="s1" value="V2" data-testid="i2" name="group1"/&gt;&lt;/p&gt;
+            &lt;p data-testid="t1"&gt;slice: {//s1}&lt;/p&gt;
+        &lt;/template&gt;
+    &lt;/custom-element&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 userEvent.click ( await canvas.findByTestId( 'i1') );</span>
+<span class="cstat-no" title="statement not covered" >        await expect( await canvas.findByText('slice: V1')).toBeInTheDocument();</span>
+<span class="cstat-no" title="statement not covered" >        await userEvent.click ( await canvas.findByTestId( 'i2') );</span>
+<span class="cstat-no" title="statement not covered" >        await expect( await canvas.findByText('slice: V2')).toBeInTheDocument();</span>
+    },
+};
+&nbsp;
 //#region unit tests
 /* istanbul ignore else -- @preserve */
 if(  'test' === import.meta.env.MODE &amp;&amp;
@@ -676,7 +937,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-11-07T07:50:22.395Z
+                at 2024-11-28T15:54:41.264Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/stories/slots.test.stories.ts.html

@@ -727,7 +727,7 @@ if(  'test' === import.meta.env.MODE &&
             <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-11-07T07:50:22.395Z
+                at 2024-11-28T15:54:41.264Z
             </div>
         <script src="../../prettify.js"></script>
         <script>