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

package/src/material/theme/README.md

@@ -1,18 +1,18 @@
-# Semantic theming
-Based on https://blog.firsov.net/search/label/Semantic%20Theme
-
-
-# Line thickness, stroke weight
-[Typography Guide Part 2: Weight and Width](https://creativebeacon.com/typography-guide-part-2-weight-and-width/)
-    The different weights can be 
-* **xx-light** ultra thin or ultra light,    
-* **x-light**  extra light,                  
-* **light**                           
-* **normal**   or roman,              
-* **bold**                             
-* **x-bold**   extra bold,                   
-* **xx-bold**  ultra bold or black,          
-    
-# Text Tracking/Spacing
-[wiki](https://en.wikipedia.org/wiki/Letter_spacing), 
+# Semantic theming
+Based on https://blog.firsov.net/search/label/Semantic%20Theme
+
+
+# Line thickness, stroke weight
+[Typography Guide Part 2: Weight and Width](https://creativebeacon.com/typography-guide-part-2-weight-and-width/)
+    The different weights can be 
+* **xx-light** ultra thin or ultra light,    
+* **x-light**  extra light,                  
+* **light**                           
+* **normal**   or roman,              
+* **bold**                             
+* **x-bold**   extra bold,                   
+* **xx-bold**  ultra bold or black,          
+    
+# Text Tracking/Spacing
+[wiki](https://en.wikipedia.org/wiki/Letter_spacing), 
 [units](https://css-tricks.com/keeping-track-letter-spacing-guidelines/)

package/src/material/theme/semantic.css

@@ -1,112 +1,113 @@
-/*  cem - custom-element material
-    SEMANTIC THEME basic definitions
-    based on https://blog.firsov.net/search/label/Semantic%20Theme
- */
-:root{
-
-/*#region SPACING DIMENSIONS */
---cem-dim-xx-small  : 0.25rem;
---cem-dim-x-small   : 0.5rem;
---cem-dim-small     : 0.75rem;
---cem-dim-medium    : 1rem;
---cem-dim-large     : 1.5rem;
---cem-dim-x-large   : 2rem;
---cem-dim-xx-large  : 4rem;
---cem-dim-xxx-large : 8rem;
-/*#endregion */
-
-/*#region OUTLINE THIKNESS */
---cem-thick-none: 0;
---cem-thick-xx-light: 0.5px;
---cem-thick-x-light : 1px;
---cem-thick-light   : 2px;
---cem-thick-normal  : 4px;
---cem-thick-bold    : 0.5rem;
---cem-thick-x-bold  : 1rem;
---cem-thick-xx-bold : 4rem;
-/*#endregion */
-
-/*#region TEXT TRACKING/SPACING */
---cem-tracking-negative : -0.25em;
---cem-tracking-stick    : 0;
---cem-tracking-tight    : 0.5px;
---cem-tracking-normal   : auto;
---cem-tracking-loose    : 0.25em;
---cem-tracking-sparse   : 0.5em;
---cem-tracking-spread   : 1em;
-/*#endregion */
-
-/*#region branded colors  */
-
-/*#endregion */
-
-/*#region action */
-
-/*#endregion */
-
-}
-
-
-/*#region semantic colors  */
-:root, .cem-theme-default, .cem-theme-azure{
-
-    --primary-background-color: var(--ng-azure-90);
-    --secondary-background-color: var(--ng-azure-80);
-    --alert-color: var(--ng-magenta-80);
-    --text-color: var(--ng-azure-10);
-
-    --cem-action-primary-color: var(--text-color);
-    --cem-action-primary-background: transparent;
-    --cem-action-primary-background-hover: var(--ng-azure-80,lightgrey);
-    --cem-action-primary-background-focus: var(--ng-azure-70,silver);
-    --cem-action-primary-background-active: var(--ng-azure-60,grey);
-
-    --cem-action-secondary-color: var(--text-color);
-    --cem-action-secondary-background: var(--ng-azure-secondary-90);
-    --cem-action-secondary-background-hover: var(--ng-azure-secondary-80,lightgrey);
-    --cem-action-secondary-background-focus: var(--ng-azure-secondary-70,silver);
-    --cem-action-secondary-background-active: var(--ng-azure-secondary-60,grey);
-
-    --cem-action-box-shadow: var(--ng-action-elevation-shadow, 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12));
-    --cem-action-box-shadow-hover: var(--ng-action-box-shadow-hover);
-    --cem-action-transition: var(--ng-action-transition);
-
-    --cem-app-surface-variant: var(--ng-azure-variant-90);
-    --cem-app-on-surface: var(--ng-azure-variant-70);
-    --cem-app-primary: var(--ng-azure-variant-60);
-
-    --cem-filled-text-field-container-color: var(--ng-azure-variant-90);
-    --cem-filled-text-field-label-text-color: var(--ng-azure-variant-30);
-    --cem-filled-text-field-input-text-color: var(--ng-azure-variant-0);
-    --cem-filled-text-field-caret-color: var(--ng-azure-variant-10);
-    --cem-outline-color-focus: var(--ng-azure-40);
-
-    --cem-list-background-color: var(--ng-azure-neutral-94);
-    --cem-list-background-color-hover: var(--ng-azure-variant-90);
-    --cem-list-background-color-focus: var(--ng-azure-variant-80);
-
-    --cem-menu-item-color: black;
-    --cem-menu-item-color-disabled: var(--ng-azure-neutral-50);
-    --cem-menu-item-background: var(--ng-azure-neutral-94);
-    --cem-menu-item-hover-background: var(--ng-azure-neutral-80);
-    --cem-menu-item-hover-color: black;
-    --cem-menu-item-padding: 0.5rem;
-    --cem-menu-item-font-weight: bold;
-}
-
-.cem-theme-teal{
-
-    --primary-color: var(--ng-teal-primary);
-    --secondary-color: var(--ng-teal-hover);
-    --alert-color: var(--ng-magenta-80);
-    --text-color: var(--ng-azure-40);
-
-    --cem-action-primary-color: var(--primary-color);
-
-    --cem-action-primary-background: transparent;
-    --cem-action-primary-background-hover: var(--ng-teal-hover,lightgrey);
-    --cem-action-primary-background-focus: var(--ng-teal-focus,silver);
-    --cem-action-primary-background-active: var(--ng-teal-active,grey);
-}
-
-/*#endregion */
+/*  cem - custom-element material
+    SEMANTIC THEME basic definitions
+    based on https://blog.firsov.net/search/label/Semantic%20Theme
+ */
+:root{
+
+/*#region SPACING DIMENSIONS */
+--cem-dim-xx-small  : 0.25rem;
+--cem-dim-x-small   : 0.5rem;
+--cem-dim-small     : 0.75rem;
+--cem-dim-medium    : 1rem;
+--cem-dim-large     : 1.5rem;
+--cem-dim-x-large   : 2rem;
+--cem-dim-xx-large  : 4rem;
+--cem-dim-xxx-large : 8rem;
+/*#endregion */
+
+/*#region OUTLINE THIKNESS */
+--cem-thick-none: 0;
+--cem-thick-xx-light: 0.5px;
+--cem-thick-x-light : 1px;
+--cem-thick-light   : 2px;
+--cem-thick-normal  : 4px;
+--cem-thick-bold    : 0.5rem;
+--cem-thick-x-bold  : 1rem;
+--cem-thick-xx-bold : 4rem;
+/*#endregion */
+
+/*#region TEXT TRACKING/SPACING */
+--cem-tracking-negative : -0.25em;
+--cem-tracking-stick    : 0;
+--cem-tracking-tight    : 0.5px;
+--cem-tracking-normal   : auto;
+--cem-tracking-loose    : 0.25em;
+--cem-tracking-sparse   : 0.5em;
+--cem-tracking-spread   : 1em;
+/*#endregion */
+
+/*#region branded colors  */
+
+/*#endregion */
+
+/*#region action */
+--cem-drop-transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+
+/*#endregion */
+
+}
+
+
+/*#region semantic colors  */
+:root, .cem-theme-default, .cem-theme-azure{
+
+    --primary-background-color: var(--ng-azure-90);
+    --secondary-background-color: var(--ng-azure-80);
+    --alert-color: var(--ng-magenta-80);
+    --text-color: var(--ng-azure-10);
+
+    --cem-action-primary-color: var(--text-color);
+    --cem-action-primary-background: transparent;
+    --cem-action-primary-background-hover: var(--ng-azure-80,lightgrey);
+    --cem-action-primary-background-focus: var(--ng-azure-70,silver);
+    --cem-action-primary-background-active: var(--ng-azure-60,grey);
+
+    --cem-action-secondary-color: var(--text-color);
+    --cem-action-secondary-background: var(--ng-azure-secondary-90);
+    --cem-action-secondary-background-hover: var(--ng-azure-secondary-80,lightgrey);
+    --cem-action-secondary-background-focus: var(--ng-azure-secondary-70,silver);
+    --cem-action-secondary-background-active: var(--ng-azure-secondary-60,grey);
+
+    --cem-action-box-shadow: var(--ng-action-elevation-shadow, 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12));
+    --cem-action-box-shadow-hover: var(--ng-action-box-shadow-hover);
+    --cem-action-transition: var(--ng-action-transition);
+
+    --cem-app-surface-variant: var(--ng-azure-variant-90);
+    --cem-app-on-surface: var(--ng-azure-variant-70);
+    --cem-app-primary: var(--ng-azure-variant-60);
+
+    --cem-filled-text-field-container-color: var(--ng-azure-variant-90);
+    --cem-filled-text-field-label-text-color: var(--ng-azure-variant-30);
+    --cem-filled-text-field-input-text-color: var(--ng-azure-variant-0);
+    --cem-filled-text-field-caret-color: var(--ng-azure-variant-10);
+    --cem-outline-color-focus: var(--ng-azure-40);
+
+    --cem-list-background-color: var(--ng-azure-neutral-94);
+    --cem-list-background-color-hover: var(--ng-azure-variant-90);
+    --cem-list-background-color-focus: var(--ng-azure-variant-80);
+
+    --cem-menu-item-color: black;
+    --cem-menu-item-color-disabled: var(--ng-azure-neutral-50);
+    --cem-menu-item-background: var(--ng-azure-neutral-94);
+    --cem-menu-item-hover-background: var(--ng-azure-neutral-80);
+    --cem-menu-item-hover-color: black;
+    --cem-menu-item-padding: 0.5rem;
+    --cem-menu-item-font-weight: bold;
+}
+
+.cem-theme-teal{
+
+    --primary-color: var(--ng-teal-primary);
+    --secondary-color: var(--ng-teal-hover);
+    --alert-color: var(--ng-magenta-80);
+    --text-color: var(--ng-azure-40);
+
+    --cem-action-primary-color: var(--primary-color);
+
+    --cem-action-primary-background: transparent;
+    --cem-action-primary-background-hover: var(--ng-teal-hover,lightgrey);
+    --cem-action-primary-background-focus: var(--ng-teal-focus,silver);
+    --cem-action-primary-background-active: var(--ng-teal-active,grey);
+}
+
+/*#endregion */

package/src/mocks/versions.mock.ts

@@ -3,7 +3,7 @@ export default {
     "_rev": "5-df363ab4a2b9c478c01e021bde4fbafe",
     "name": "@epa-wg/custom-element-dist",
     "dist-tags": {
-        "latest": "0.0.29"
+        "latest": "0.0.32"
     },
     "versions": {
         "0.0.1": {
@@ -617,9 +617,9 @@ export default {
                 "host": "s3://npm-registry-packages"
             }
         },
-        "0.0.29": {
+        "0.0.31": {
             "name": "@epa-wg/custom-element-dist",
-            "version": "0.0.29",
+            "version": "0.0.31",
             "type": "module",
             "scripts": {
                 "dev": "vite",
@@ -636,7 +636,7 @@ export default {
                 "t": "vitest --no-file-parallelism --watch --browser.headless=false src/stories/attributes.test.stories.ts"
             },
             "dependencies": {
-                "@epa-wg/custom-element": "0.0.29"
+                "@epa-wg/custom-element": "0.0.31"
             },
             "devDependencies": {
                 "@chromatic-com/storybook": "^1.3.3",
@@ -707,7 +707,7 @@ export default {
                 "./src/custom-element/ide/web-types-dce.json",
                 "./src/custom-element/ide/web-types-xsl.json"
             ],
-            "_id": "@epa-wg/custom-element-dist@0.0.29",
+            "_id": "@epa-wg/custom-element-dist@0.0.31",
             "gitHead": "a6a84bdc2cc433acf3d3afa827556c79ecacffb8",
             "description": "Binary distribution for [@epa-wg/custom-element][git-url] with StoryBook and test coverage",
             "_nodeVersion": "20.8.1",
@@ -715,7 +715,7 @@ export default {
             "dist": {
                 "integrity": "sha512-ISVPKkirFGvTTNFanf9WxOTeEBJrAyjuebqQSJiH97QHgG7pxQQAWUC4heBRbJ9kUo5FUmBDph2d9Rep/POCDw==",
                 "shasum": "1a68a8bc37315cbcab0f66247aa54c82d7bc159d",
-                "tarball": "https://registry.npmjs.org/@epa-wg/custom-element-dist/-/custom-element-dist-0.0.29.tgz",
+                "tarball": "https://registry.npmjs.org/@epa-wg/custom-element-dist/-/custom-element-dist-0.0.31.tgz",
                 "fileCount": 299,
                 "unpackedSize": 9437753,
                 "signatures": [
@@ -751,7 +751,7 @@ export default {
         "0.0.22": "2024-06-25T03:55:52.525Z",
         "0.0.23": "2024-06-27T03:25:14.314Z",
         "0.0.24": "2024-07-22T03:10:12.564Z",
-        "0.0.29": "2024-08-06T07:29:39.264Z"
+        "0.0.31": "2024-08-06T07:29:39.264Z"
     },
     "bugs": {
         "url": "https://github.com/EPA-WG/custom-element/issues"
@@ -781,6 +781,6 @@ export default {
             "email": "suns@simulationworks.com"
         }
     ],
-    "readme": "# custom-element-dist\nBinary distribution for [@epa-wg/custom-element][git-url] with StoryBook and test coverage\n\n`custom-element` [![git][github-image] GitHub][git-url]\n| [tests project][git-test-url]\n| [![NPM version][npm-image]][npm-url]\n| [![coverage][coverage-image]][coverage-url]\n| [StoryBook][sb-url]\n\n# Content\n[bin/build.sh] generates binaries to be kept as in Git release as in NPM package.\nIt serves the record of compliance on the moment of build.\n## [dist](dist)\nCan be used as CDN entry with minified bundle: [custom-element-bundle.js][bundle-url]\n\nEach individual component of `custom-element` lib is available as hashed JS.\n\n## [coverage](coverage)\nProvides the unit test coverage for lib and StoryBooks\n\n## [storybook-static][sb-url]\nCDN version of StoryBook.\n\n[git-url]:        https://github.com/EPA-WG/custom-element\n[git-test-url]:   https://github.com/EPA-WG/custom-element-dist\n[github-image]:   https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg\n[npm-image]:      https://img.shields.io/npm/v/@epa-wg/custom-element-dist.svg\n[npm-url]:        https://npmjs.org/package/@epa-wg/custom-element-dist\n[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.29/coverage/src/custom-element/coverage.svg\n[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.29/coverage/src/custom-element/index.html\n[sb-url]:         https://unpkg.com/@epa-wg/custom-element-dist@0.0.29/storybook-static/index.html\n[bundle-url]:     https://unpkg.com/@epa-wg/custom-element-dist@0.0.29/dist/custom-element-bundle.js\n",
+    "readme": "# custom-element-dist\nBinary distribution for [@epa-wg/custom-element][git-url] with StoryBook and test coverage\n\n`custom-element` [![git][github-image] GitHub][git-url]\n| [tests project][git-test-url]\n| [![NPM version][npm-image]][npm-url]\n| [![coverage][coverage-image]][coverage-url]\n| [StoryBook][sb-url]\n\n# Content\n[bin/build.sh] generates binaries to be kept as in Git release as in NPM package.\nIt serves the record of compliance on the moment of build.\n## [dist](dist)\nCan be used as CDN entry with minified bundle: [custom-element-bundle.js][bundle-url]\n\nEach individual component of `custom-element` lib is available as hashed JS.\n\n## [coverage](coverage)\nProvides the unit test coverage for lib and StoryBooks\n\n## [storybook-static][sb-url]\nCDN version of StoryBook.\n\n[git-url]:        https://github.com/EPA-WG/custom-element\n[git-test-url]:   https://github.com/EPA-WG/custom-element-dist\n[github-image]:   https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg\n[npm-image]:      https://img.shields.io/npm/v/@epa-wg/custom-element-dist.svg\n[npm-url]:        https://npmjs.org/package/@epa-wg/custom-element-dist\n[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.31/coverage/src/custom-element/coverage.svg\n[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.31/coverage/src/custom-element/index.html\n[sb-url]:         https://unpkg.com/@epa-wg/custom-element-dist@0.0.31/storybook-static/index.html\n[bundle-url]:     https://unpkg.com/@epa-wg/custom-element-dist@0.0.31/dist/custom-element-bundle.js\n",
     "readmeFilename": "README.md"
 }

package/src/stories/attributes.test.stories.ts

@@ -1,9 +1,9 @@
 // noinspection DuplicatedCode
 
 import type { StoryObj }                        from '@storybook/web-components';
-import {expect, within} from '@storybook/test';
+import {expect, userEvent, within} from '@storybook/test';
 
-import '../custom-element/custom-element.js';
+import {cloneAs, mix} from'../custom-element/custom-element.js';
 
 type TProps = { title: string; body:string};
 
@@ -29,12 +29,46 @@ const meta =
 
 export default meta;
 
+export const CloneAs:Story  =
+{   args : {title: 'cloneAs(el,newTag)', body:`
+    <p><code>cloneAs()</code> used for conversion of <code>attribute</code> to <code>xsl:param</code></p>
+    <attribute data-testid="t1" >default_P1                </attribute>
+    <attribute data-testid="t2" select="'always_p2'"      ></attribute>
+    <attribute data-testid="t3" ></attribute>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+
+        const cmp = async ( tid:string ) =>
+        {   const t1 = await canvas.findByTestId(tid);
+            const c1 = cloneAs(t1, 'xsl:param');
+            for( let a of t1.attributes )
+                {   await expect(a.value).toEqual(c1.getAttribute(a.name)); }
+
+            await expect( c1.textContent ).toEqual(t1.textContent);
+        }
+        await cmp('t1');
+        await cmp('t2');
+        await cmp('t3');
+    },
+};
+export const Mix:Story  =
+{   args : {title: 'mix(to,from)', body:`
+    <p><code>mix(to,from)</code> used for <code>attribute</code> collections</p>
+`}
+,   play: async () =>
+    {
+        await expect( mix({},{a:1,b:'2'})).toEqual({a:1,b:'2'});
+    },
+};
+
 export const AttributeDefaults:Story  =
 {   args : {title: 'Attributes definition', body:`
     <p>Params needed to declare DCE attributes and track the attributes changes. It also is used by IDE and validation.</p>
     <custom-element tag="dce-link" >
         <template>
-            <attribute name="p1">default_P1                </attribute>
+            <attribute name="p1">default_P1</attribute>
             <attribute name="p2" select="'always_p2'"      ></attribute>
             <attribute name="p3" select="//p3 ?? 'def_P3' "></attribute>
             p1: <code data-testid="p1">{$p1}</code> <br/>
@@ -64,40 +98,40 @@ export const AttributesRuntimeChange:Story  =
             <attribute name="p1">default_P1                </attribute>
             <attribute name="p2" select="'always_p2'"      ></attribute>
             <attribute name="p3" select="//p3 ?? 'def_P3' "></attribute>
-            p1: <code data-testid="p1">{$p1}</code> <br/>
-            p2: <code data-testid="p2">{$p2}</code> <br/>
-            p3: <code data-testid="p3">{$p3}</code>
+            p1: <code data-testid="t1">{$p1}</code> <br/>
+            p2: <code data-testid="t2">{$p2}</code> <br/>
+            p3: <code data-testid="t3">{$p3}</code>
         </template>
     </custom-element>
     <section>
-        <dce-link2   id="dce2" p1="123" p2="override ignored as select is defined"></dce-link2> <br>
-        <div><input id="i1" value="p1">  <button onclick="dce2.setAttribute('p1',i1.value)"> set p1</button> </div>
-        <div><input id="i2" value="p2">  <button onclick="dce2.setAttribute('p2',i2.value)"> set p2</button> </div>
-        <div><input id="i3" value="p3">  <button onclick="dce2.setAttribute('p3',i3.value)"> set p3</button> </div>
+        <dce-link2  id="dce2" p1="123" p2="override ignored as select is defined"></dce-link2> <br>
+        <div><input id="i1" value="P1">  <button onclick="dce2.setAttribute('p1',i1.value)"> set p1</button> </div>
+        <div><input id="i2" value="P2">  <button onclick="dce2.setAttribute('p2',i2.value)"> set p2</button> </div>
+        <div><input id="i3" value="P3">  <button onclick="dce2.setAttribute('p3',i3.value)"> set p3</button> </div>
     </section>
 `}
 ,   play: async ({canvasElement}) =>
     {
-        const titleText = AttributeDefaults.args!.title as string;
         const canvas = within(canvasElement)
-        ,       code = async (id) => (await canvas.findByTestId(id)).textContent.trim();
+        ,       code = async (id:string) => await canvas.findByTestId(id);
 
         await sleep(20)
-        expect( await code('p1') ).toEqual('123' );
-        expect( await code('p2') ).toEqual('always_p2', 'no overrides due to value is hardcoded'  );
-        expect( await code('p3') ).toEqual('def_P3' );
-
-        dce2.setAttribute('p1',i1.value);
-        await sleep(10)
-        expect( await code('p1') ).toEqual('p1','set p1 in runtime' );
+        expect( await code('t1') ).toHaveTextContent('123' );
+        expect( await code('t2') ).toHaveTextContent('always_p2'); // no overrides due to value is hardcoded
+        expect( await code('t3') ).toHaveTextContent('def_P3' );
+        const dce2 = window.dce2;
+        dce2.setAttribute('P1',i1.value);
+        await expect(await canvas.findByText('P1')).toBeInTheDocument();
+        expect( await code('t1') ).toHaveTextContent('P1'); // 4. set p1 in runtime'
 
         dce2.setAttribute('p2',i2.value);
-        await sleep(10)
-        expect( await code('p2') ).toEqual('always_p2','can not set p2 in runtime' );
+        // await expect(await canvas.findByText('P2')).toBeInTheDocument();
+        expect( canvas.getByTestId('t2') ).toHaveTextContent('always_p2'); // can not set p2 in runtime
 
         dce2.setAttribute('p3',i3.value);
-        await sleep(10)
-        expect( await code('p3') ).toEqual('p3','set p3 in runtime' );
+        await expect(await canvas.findByText('P3')).toBeInTheDocument();
+
+        expect( canvas.getByTestId('t3') ).toHaveTextContent('P3'); // set p3 in runtime
     },
 };
 
@@ -130,6 +164,72 @@ export const InstanceAttributes:Story  =
 };
 
 
+export const AttributesPropagationUp:Story  =
+{   args : {title: 'Instance Attributes', body:`
+    <p>Attributes with value(p2) or <code>select</code>(p3) should be propagated to DCE</p>
+    <p>p1 attribute is not propagated as does not have the value.</p>
+    <custom-element tag="sample-el">
+    <template>
+        <attribute name="data-testid"></attribute>
+        <attribute name="p1"></attribute>
+        <attribute name="p2">DEFAULT VALUE</attribute>
+        <attribute name="p3" select=" //from-input ?? 'abc' "></attribute>
+        <input slice="from-input" slice-event="input"/><br/>
+        p1:<code data-testid="{$data-testid}-p1" >{ $p1 }</code><br/>
+        p2:<code data-testid="{$data-testid}-p2" >{ $p2 }</code><br/>
+        p2:<code data-testid="{$data-testid}-p3" >{ $p3 }</code><br/>  
+        //from-input: {//from-input}      <hr/>
+    </template>
+</custom-element>
+
+<sample-el data-testid="t1" value="123"                 ></sample-el>
+<sample-el data-testid="t2" p1="P1" p2="123" p3="P3"    ></sample-el>
+<sample-el data-testid="t3"                             ></sample-el>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement)
+        , code = async (id:string) => (await canvas.findByTestId(id)).textContent?.trim();
+
+        await sleep(20)
+        
+        await expect( await code('t1-p1') ).toEqual('' );
+        await expect( await code('t1-p2') ).toEqual('DEFAULT VALUE' );
+        await expect( await code('t1-p3') ).toEqual('abc' );
+
+        const t1 = await canvas.findByTestId('t1');
+        await expect( t1 ).toHaveAttribute('value','123');
+        await expect( t1 ).toHaveAttribute('p2','DEFAULT VALUE');
+        await expect( t1 ).toHaveAttribute('p3','abc');
+        await expect( t1 ).not.toHaveAttribute('p1');
+
+        await expect( await code('t2-p1') ).toEqual('P1' );
+        await expect( await code('t2-p2') ).toEqual('123' );
+        await expect( await code('t2-p3') ).toEqual('abc' );
+        
+        const t2 = await canvas.findByTestId('t2');
+        await expect( t2 ).toHaveAttribute('p1','P1');
+        await expect( t2 ).toHaveAttribute('p2','123');
+        await expect( t2 ).toHaveAttribute('p3','abc');
+
+
+        await expect( await code('t3-p1') ).toEqual('' );
+        await expect( await code('t3-p2') ).toEqual('DEFAULT VALUE' );
+        await expect( await code('t3-p3') ).toEqual('abc' );
+        
+        const t3 = await canvas.findByTestId('t3');
+        await expect( t1 ).not.toHaveAttribute('p1');
+        await expect( t3 ).toHaveAttribute('p2','DEFAULT VALUE');
+        await expect( t3 ).toHaveAttribute('p3','abc');
+
+        t3.querySelector('input')?.focus();
+        await userEvent.keyboard('DCE');
+        await expect( t3 ).toHaveAttribute('p3','DCE');
+
+    },
+};
+
+
 //#region unit tests
 /* istanbul ignore else -- @preserve */
 if(  'test' === import.meta.env.MODE &&

package/src/stories/external-template.test.stories.ts

@@ -44,7 +44,7 @@ export const TemplateInPage:Story  =
     {
         const canvas = within(canvasElement);
         await canvas.findByText(TemplateInPage.args!.title as string);
-        const         val = (prop)=> canvas.getByTestId(prop).textContent.trim();
+        const val = (prop:string)=> canvas.getByTestId(prop).textContent?.trim();
 
         expect(val('slot-override')).toEqual('👋 World!');
         expect(val('slot-default' )).toEqual('Hello World!');

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

@@ -1,11 +1,10 @@
 // noinspection DuplicatedCode
 
 import type { StoryObj }                            from '@storybook/web-components';
-import {expect, getByTestId, within}                from '@storybook/test';
+import {expect, within}                from '@storybook/test';
 
 import '../custom-element/custom-element.js';
 import '../custom-element/location-element.js';
-import {RealtimeEventInSlice, SliceInitChangeEvent} from './slice-events.test.stories';
 
 type TProps = { title: string; slice: string; href: string; live:string; body:string};
 const defs: TProps =

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

@@ -189,6 +189,93 @@ export const SlicesInAttrAndName:Story  =
     },
 };
 
+
+export const CheckboxChecked:Story  =
+{   args : {title: 'Checkbox value in slice ', body:`
+    <p> Checked value propagated into slice</p>
+    <custom-element>
+        <template>
+            <input type="checkbox"  slice="s1" value="V1" checked/>
+            <p>slice: {//s1}</p>
+        </template>
+    </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        await expect( await canvas.findByText( 'slice: V1')).toBeInTheDocument();
+    },
+};
+
+export const CheckboxUnchecked:Story  =
+{   args : {title: 'UncheckedCheckbox value not in slice ', body:`
+    <p> Check to see the value propagated into slice. Uncheck to observe the empty string in the slice. </p>
+    <custom-element>
+        <template>
+            <input type="checkbox"  slice="s1" value="V1" data-testid="i1"/>
+            <p data-testid="t1">slice: {//s1}</p>
+        </template>
+    </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        const p =await canvas.findByTestId( 't1');
+        await expect(p.textContent ).toEqual("slice: ");
+        const cb = await canvas.findByTestId( 'i1');
+        await userEvent.click ( cb );
+        await expect( await canvas.findByText('slice: V1')).toBeInTheDocument();
+        await userEvent.click ( cb );
+        await expect( p.textContent).toEqual('slice: ');
+
+    },
+};
+
+export const CheckboxSliceValue:Story  =
+{   args : {title: 'UncheckedCheckbox slice-value not in slice ', body:`
+    <p> Check to see the value propagated into slice. Uncheck to observe the empty string in the slice. </p>
+    <custom-element>
+        <template>
+            <input type="checkbox"  slice="s1" slice-value="'V1'" data-testid="i1"/>
+            <p data-testid="t1">slice: {//s1}</p>
+        </template>
+    </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        const p =await canvas.findByTestId( 't1');
+        await expect(p.textContent ).toEqual("slice: ");
+        const cb = await canvas.findByTestId( 'i1');
+        await userEvent.click ( cb );
+        await expect( await canvas.findByText('slice: V1')).toBeInTheDocument();
+        await userEvent.click ( cb );
+        await expect( p.textContent).toEqual('slice: ');
+
+    },
+};
+
+export const RadiogroupSliceValue:Story  =
+{   args : {title: 'Radiogroup value', body:`
+    <p> The value propagated into slice from the last checked radiobutton. </p>
+    <custom-element>
+        <template>
+            <p>V1: <input type="radio"  slice="s1" value="V1" data-testid="i1" name="group1"/></p>
+            <p>V2: <input type="radio"  slice="s1" value="V2" data-testid="i2" name="group1"/></p>
+            <p data-testid="t1">slice: {//s1}</p>
+        </template>
+    </custom-element>
+`}
+,   play: async ({canvasElement}) =>
+    {
+        const canvas = within(canvasElement);
+        await userEvent.click ( await canvas.findByTestId( 'i1') );
+        await expect( await canvas.findByText('slice: V1')).toBeInTheDocument();
+        await userEvent.click ( await canvas.findByTestId( 'i2') );
+        await expect( await canvas.findByText('slice: V2')).toBeInTheDocument();
+    },
+};
+
 //#region unit tests
 /* istanbul ignore else -- @preserve */
 if(  'test' === import.meta.env.MODE &&