npm - @epa-wg/custom-element-dist - Versions diffs - 0.0.29 → 0.0.31 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (134) hide show

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

@@ -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-12T04:15:02.299Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

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

@@ -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-12T04:15:02.299Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

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

@@ -625,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-11-07T07:50:22.395Z
+                at 2024-11-12T04:15:02.299Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

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

@@ -418,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-11-07T07:50:22.395Z
+                at 2024-11-12T04:15:02.299Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/stories/slice-events.test.stories.ts/coverage.svg CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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-12T04:15:02.299Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

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

@@ -727,7 +727,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-12T04:15:02.299Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/stories/testStoryBook.ts.html CHANGED Viewed

@@ -106,18 +106,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">13x</span>
+<span class="cline-any cline-yes">12x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-yes">12x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">72x</span>
-<span class="cline-any cline-yes">72x</span>
-<span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-yes">71x</span>
+<span class="cline-any cline-yes">71x</span>
+<span class="cline-any cline-yes">12x</span>
 <span class="cline-any cline-yes">59x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">13x</span>
+<span class="cline-any cline-yes">12x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import type {StoryObj, Meta} from '@storybook/web-components';
 import {it}            from 'vitest';
@@ -154,7 +154,7 @@ export async function testStoryBook&lt;TProps&gt;( mod: Record&lt;string, StoryO
             <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-12T04:15:02.299Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/stories/version-select.test.stories.ts.html CHANGED Viewed

@@ -382,7 +382,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-12T04:15:02.299Z
             </div>
         <script src="../../prettify.js"></script>
         <script>

package/coverage/src/sum.ts.html CHANGED Viewed

@@ -79,7 +79,7 @@ export function sum(a: number, b: number) {
             <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-12T04:15:02.299Z
             </div>
         <script src="../prettify.js"></script>
         <script>