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

package/src/material/theme/semantic.css

@@ -0,0 +1,112 @@
+/*  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 */

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.26"
+        "latest": "0.0.28"
     },
     "versions": {
         "0.0.1": {
@@ -617,9 +617,9 @@ export default {
                 "host": "s3://npm-registry-packages"
             }
         },
-        "0.0.26": {
+        "0.0.28": {
             "name": "@epa-wg/custom-element-dist",
-            "version": "0.0.26",
+            "version": "0.0.28",
             "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.26"
+                "@epa-wg/custom-element": "0.0.28"
             },
             "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.26",
+            "_id": "@epa-wg/custom-element-dist@0.0.28",
             "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.26.tgz",
+                "tarball": "https://registry.npmjs.org/@epa-wg/custom-element-dist/-/custom-element-dist-0.0.28.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.26": "2024-08-06T07:29:39.264Z"
+        "0.0.28": "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.26/coverage/src/custom-element/coverage.svg\n[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.26/coverage/src/custom-element/index.html\n[sb-url]:         https://unpkg.com/@epa-wg/custom-element-dist@0.0.26/storybook-static/index.html\n[bundle-url]:     https://unpkg.com/@epa-wg/custom-element-dist@0.0.26/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.28/coverage/src/custom-element/coverage.svg\n[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.28/coverage/src/custom-element/index.html\n[sb-url]:         https://unpkg.com/@epa-wg/custom-element-dist@0.0.28/storybook-static/index.html\n[bundle-url]:     https://unpkg.com/@epa-wg/custom-element-dist@0.0.28/dist/custom-element-bundle.js\n",
     "readmeFilename": "README.md"
 }

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

@@ -50,10 +50,9 @@ export const AttributeDefaults:Story  =
         const canvas = within(canvasElement)
         , code = async (id) => (await canvas.findByTestId(id)).textContent.trim();
 
-        await sleep(20)
-        expect( await code('p1') ).toEqual('default_P1' );
-        expect( await code('p2') ).toEqual('always_p2'  );
-        expect( await code('p3') ).toEqual('def_P3'     );
+        expect( await await canvas.findByTestId('p1') ).toHaveTextContent('default_P1' );
+        expect( await await canvas.findByTestId('p2') ).toHaveTextContent('always_p2'  );
+        expect( await await canvas.findByTestId('p3') ).toHaveTextContent('def_P3'     );
     },
 };
 
@@ -130,6 +129,8 @@ export const InstanceAttributes:Story  =
     },
 };
 
+
+//#region unit tests
 /* istanbul ignore else -- @preserve */
 if(  'test' === import.meta.env.MODE &&
     !import.meta.url.includes('skiptest') )
@@ -139,3 +140,4 @@ if(  'test' === import.meta.env.MODE &&
     const { describe } = await import('vitest')
     describe(meta.title, () => testStoryBook( mod, meta ) );
 }
+//#endregion

package/src/stories/css.test.stories.ts

@@ -112,6 +112,7 @@ export const OverrideInPayload: Story =
     },
 };
 
+//#region unit tests
 /* istanbul ignore else -- @preserve */
 if(  'test' === import.meta.env.MODE &&
     !import.meta.url.includes('skiptest') )
@@ -121,3 +122,4 @@ if(  'test' === import.meta.env.MODE &&
     const { describe } = await import('vitest')
     describe(meta.title, () => testStoryBook( mod, meta ) );
 }
+//#endregion

package/src/stories/dom-merge.test.stories.ts

@@ -1,7 +1,7 @@
 // noinspection DuplicatedCode
 
 import type { StoryObj }                        from '@storybook/web-components';
-import {expect, getByTestId, within, userEvent} from '@storybook/test';
+import {expect, within, userEvent, fireEvent} from '@storybook/test';
 
 import '../custom-element/custom-element.js';
 import {
@@ -123,16 +123,16 @@ export const OrderPreservingOn2ndTransform:Story  =
     <p>IF condition content should be displayed in place where it is defined (not shifted down on the parent children)</p>
     <custom-element>
         <form slice="f1">
-            <label>
-                <input type="checkbox"  name="c1" data-testid="cb1"/>
+            <label data-testid="cb1">
+                <input type="checkbox"  name="c1" />
                 click to display #1 bellow
             </label>
             <br data-testid="beforeC1"/>
             <if test="//c1">
                 <p data-testid="isC1">#1</p>
             </if>
-            <label>
-                <input type="checkbox"  name="c2" data-testid="cb2"/>
+            <label data-testid="cb2">
+                <input type="checkbox"  name="c2" />
                 click to display #2 bellow
             </label>
             <br data-testid="beforeC2"/>
@@ -148,9 +148,11 @@ export const OrderPreservingOn2ndTransform:Story  =
         const canvas = within(canvasElement);
         await canvas.findByText(titleText);
 
-        await userEvent.click(canvas.getByTestId('cb1'));
+        // userEvent breaks under FF in vitest, fireEvent works
+        await fireEvent.click(await canvas.findByTestId('cb1'));
         await expect(await canvas.findByText('#1')).toBeInTheDocument();
-        await userEvent.click(canvas.getByTestId('cb2'));
+
+        await fireEvent.click(canvas.getByTestId('cb2'));
         await expect(await canvas.findByText('#2')).toBeInTheDocument();
         await expect(canvas.getByTestId("beforeC1").nextElementSibling).toEqual(canvas.getByTestId("isC1"))
     },
@@ -192,7 +194,7 @@ export const ReadSystemValidityMessage:Story  =
     },
 };
 
-//<editor-fold desc="unit test run" collapsed>
+//#region unit tests
 /* istanbul ignore else -- @preserve */
 if(  'test' === import.meta.env.MODE &&
     !import.meta.url.includes('skiptest') )
@@ -202,4 +204,4 @@ if(  'test' === import.meta.env.MODE &&
     const { describe } = await import('vitest')
     describe(meta.title, () => testStoryBook( mod, meta ) );
 }
-//</editor-fold>
+//#endregion

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

@@ -115,9 +115,8 @@ export const ExternalXsltFile:Story  =
         await canvas.findByText(ExternalXsltFile.args!.title as string);
         expect(canvasElement.querySelector('dce-external-4').innerHTML).to.include('Hi');
         expect(canvasElement.querySelector('[data-smile="👼"]').innerHTML).to.include('loading from XSLT ...');
-        await sleep(100);
-        expect(canvas.getByTestId('data-fruit').innerHTML).to.include('🍌');
-        expect(canvas.getByTestId('data-smile').innerHTML).to.include('👼');
+        await expect(await canvas.findByTestId('data-fruit')).toHaveTextContent('🍌');
+        await expect(await canvas.findByTestId('data-smile')).toHaveTextContent('👼');
     },
 };
 
@@ -248,6 +247,7 @@ export const EmbeddingInAnotherFile:Story  =
     },
 };
 
+//#region unit tests
 /* istanbul ignore else -- @preserve */
 if(  'test' === import.meta.env.MODE &&
     !import.meta.url.includes('skiptest') )
@@ -257,3 +257,4 @@ if(  'test' === import.meta.env.MODE &&
     const { describe } = await import('vitest')
     describe(meta.title, () => testStoryBook( mod, meta ) );
 }
+//#endregion

package/src/stories/form.test.stories.ts

@@ -179,6 +179,7 @@ export const FormCustomValidityString:Story =
 };
 // custom validity rules on form : boolean and string values
 
+//#region unit tests
 /* istanbul ignore else -- @preserve */
 if(  'test' === import.meta.env.MODE &&
     !import.meta.url.includes('skiptest') )
@@ -188,3 +189,4 @@ if(  'test' === import.meta.env.MODE &&
     const { describe } = await import('vitest')
     describe(meta.title, () => testStoryBook( mod, meta ) );
 }
+//#endregion

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

@@ -1,10 +1,11 @@
 // noinspection DuplicatedCode
 
 import type { StoryObj }             from '@storybook/web-components';
-import {expect, getByTestId, within} from '@storybook/test';
+import {expect, userEvent, within} from '@storybook/test';
 
 import '../custom-element/custom-element.js';
 import '../custom-element/local-storage.js';
+import {localStorage_clear, localStorage_removeItem, localStorageSetItem} from "../custom-element";
 
 type TProps = { title: string; slice: string; key: string; value:string; live:string; body:string};
 const defs: TProps =
@@ -50,41 +51,47 @@ const meta =
 
 export default meta;
 
+window['localStorageSetItem'] = localStorageSetItem;
+window['localStorage_clear'] = localStorage_clear;
+window['localStorage_removeItem'] = localStorage_removeItem;
+
 export const Demo:Story  =
 {   args : {title: 'live value', live:'live', body:`
     <input placeholder="value for localStorage" id="textinput"
         slice="${defs.slice}"
         value="{ //${defs.slice} ?? '${ defs.value }' }"/>
-    <button onclick="localStorage.setItem('${defs.key}',textinput.value  )">set</button>
-    <button onclick="localStorage.setItem('${defs.key}','text value'  )">text value</button>
-    <button onclick="localStorage.setItem('${defs.key}','another text')">another text</button>
-    <button onclick="localStorage.removeItem('${defs.key}'            )">set blank</button>
+    <button onclick="localStorageSetItem('${defs.key}',textinput.value  )">set</button>
+    <button onclick="localStorageSetItem('${defs.key}','text value'  )">text value</button>
+    <button onclick="localStorageSetItem('${defs.key}','another text')">another text</button>
+    <button onclick="localStorage_removeItem('${defs.key}'            )">set blank</button>
 `}
 ,   play: async ({canvasElement}) =>
     {
+        localStorage_clear();
         const canvas = within(canvasElement);
         await canvas.findByText(Demo.args!.title as string);
         const val = ()=> canvas.getByTestId('slice-value').textContent
-        ,  byText = txt => canvas.getByText(txt);
+        await userEvent.click(await canvas.findByText('set blank'));
+        await expect(localStorage.getItem(defs.key)).toEqual(null, 'from localStorage');
+        await expect( val() ).toEqual('');
 
-        byText('set blank').click();
-        expect(localStorage.getItem(defs.key)).toEqual(null, 'from localStorage');
-        expect( val() ).toEqual('');
-        byText('text value').click();
+        await userEvent.click(canvas.getByText('text value'));
         await sleep(10);
-        expect( val() ).toEqual('text value');
+        await expect(localStorage.getItem(defs.key)).toEqual('text value', 'from localStorage');
+        await expect( val() ).toEqual('text value');
 
         window['textinput'].value = 'textinput.value';
-        byText('set').click();
+
+        await userEvent.click(canvas.getByText('set'));
         await sleep(10);
         expect( val() ).toEqual('textinput.value');
 
-        byText('another text').click();
+        await userEvent.click(canvas.getByText('another text'));
         await sleep(10);
         expect( val() ).toEqual('another text');
 
+        await userEvent.click(canvas.getByText('set blank'));
 
-        byText('set blank').click();
         await sleep(10);
         expect( val() ).toEqual('');
     },
@@ -94,31 +101,32 @@ export const Demo:Story  =
 export const AlwaysOverride:Story  =
 {   args : {title: 'AlwaysOverride', live:'', value:'ABC', body:`
     buttons are changing the localStorage value, but without 'live' attribute slice ^^ from <i>local-storage</i> is not updated<br/>
-    <button onclick="localStorage.setItem('${defs.key}','text value'  )">text value</button>
-    <button onclick="localStorage.removeItem('${defs.key}'            )">set blank</button>
+    <button onclick="localStorageSetItem('${defs.key}','text value')">text value</button>
+    <button onclick="localStorage_removeItem('${defs.key}')">set blank</button>
     `}
 ,   play: async ({canvasElement}) =>
     {
         const canvas = within(canvasElement);
         await canvas.findByText(AlwaysOverride.args!.title as string);
-        const val = ()=> canvas.getByTestId('slice-value').textContent
-        ,  byText = txt => canvas.getByText(txt);
+        const val = ()=> canvas.getByTestId('slice-value').textContent;
+        const click = async (text)=> await userEvent.click( await canvas.findByText(text) );
+        await sleep(10);
 
-        expect(localStorage.getItem(defs.key)).toEqual('ABC', 'from localStorage');
+        await expect( localStorage.getItem(defs.key)).toEqual('ABC');
 
-        byText('set blank').click();
-        expect(localStorage.getItem(defs.key)).toEqual(null, 'from localStorage');
+        await click('set blank')
+        await expect(localStorage.getItem(defs.key)).toEqual(null, 'from localStorage');
         await sleep(10);
-        expect( val() ).toEqual('ABC');
+        await expect( val() ).toEqual('ABC');
 
-        byText('text value').click();
+        await click('text value');
         await sleep(10);
-        expect(localStorage.getItem(defs.key)).toEqual('text value', 'from localStorage');
-        expect( val() ).toEqual('ABC');
+        await expect(localStorage.getItem(defs.key)).toEqual('text value', 'from localStorage');
+        await expect( val() ).toEqual('ABC');
 
-        byText('set blank').click();
+        await click('set blank');
         await sleep(10);
-        expect( val() ).toEqual('ABC');
+        await expect( val() ).toEqual('ABC');
     },
 };
 
@@ -126,15 +134,15 @@ export const FromStorageWithDefault:Story  =
 {   args : {title: 'live value with defaults', live:'', value:'ABC', body:`
 
     <local-storage key="attr2Key" slice="attr2-key" type="text" live="live" slice-value="@value ?? 'DEF2'"></local-storage>
-    <button onclick="localStorage.removeItem('attr2Key')">clear key</button>
-    <button onclick="localStorage.setItem('attr2Key','attr2Key value')">update attr2-key value</button>
+    <button onclick="localStorage_removeItem('attr2Key')">clear key</button>
+    <button onclick="localStorageSetItem('attr2Key','attr2Key value')">update attr2-key value</button>
     //attr2-key: <code data-testid="key2-value">{//attr2-key}</code><br/>
 
     <local-storage key="attr3Key" slice="attr3-key" type="text" live="live" slice-value="@value ?? 'DEF3'"></local-storage>
-    <button onclick="localStorage.removeItem('attr3Key')">clear attr3-key key</button>
-    <button onclick="localStorage.setItem('attr3Key','attr3Key value')">update attr3-key value</button>
+    <button onclick="localStorage_removeItem('attr3Key')">clear attr3-key key</button>
+    <button onclick="localStorageSetItem('attr3Key','attr3Key value')">update attr3-key value</button>
     //attr3-key: <code data-testid="key3-value">{//attr3-key}</code><br/>
-    <button onclick="localStorage.clear()">clear localStorage</button>
+    <button onclick="localStorage_clear()">clear localStorage</button>
     `}
 ,   play: async ({canvasElement}) =>
     {
@@ -177,39 +185,39 @@ export const TypeAttribute:Story  =
                 <local-storage key="jsonKey" slice="json-key" type="json" live="live"></local-storage>
                 <input id="typesinput" placeholder="set value"><button onclick="
                         'textKey,dateKey,timeKey,localDateTimeKey,numberKey,jsonKey'.split(',')
-                            .map( k=> localStorage.setItem(k, typesinput.value) )
+                            .map( k=> localStorageSetItem(k, typesinput.value) )
                     "> set to all</button><br>
                 <hr>
                 text-key:
-                    <button onclick="localStorage.setItem('textKey', 'ABC'  )">ABC</button>
+                    <button onclick="localStorageSetItem('textKey', 'ABC'  )">ABC</button>
                     <code data-testid="text-key">{//text-key       }</code><br>
                 date-key:
-                    <button onclick="localStorage.setItem('dateKey', '2024-04-20T03:58:42.131Z')">2024-04-21T03:58:42.131Z           </button>
-                    <button onclick="localStorage.setItem('dateKey', new Date(Date.now()).toISOString())">now                                </button>
-                    <button onclick="localStorage.setItem('dateKey', 'ABC'  )">date ABC - invalid                 </button>
+                    <button onclick="localStorageSetItem('dateKey', '2024-04-20T03:58:42.131Z')">2024-04-21T03:58:42.131Z           </button>
+                    <button onclick="localStorageSetItem('dateKey', new Date(Date.now()).toISOString())">now                                </button>
+                    <button onclick="localStorageSetItem('dateKey', 'ABC'  )">date ABC - invalid                 </button>
                     <code data-testid="date-key">{//date-key       }</code><br>
                 time-key:
-                    <button onclick="localStorage.setItem('timeKey', '13:30')">13:30                              </button>
+                    <button onclick="localStorageSetItem('timeKey', '13:30')">13:30                              </button>
                     <code data-testid="time-key">{//time-key       }</code><br>
                 local-date-time:
-                    <button onclick="localStorage.setItem('localDateTimeKey', '1977-04-01T14:00:30')">1977-04-01T14:00:30 - local       </button>
+                    <button onclick="localStorageSetItem('localDateTimeKey', '1977-04-01T14:00:30')">1977-04-01T14:00:30 - local       </button>
                     <code data-testid="local-date-time">{//local-date-time}</code><br>
                 number-key:
-                    <button onclick="localStorage.setItem('numberKey', '2024'       )">2024 - number                      </button>
-                    <button onclick="localStorage.setItem('numberKey', '24'         )">24   - number                      </button>
-                    <button onclick="localStorage.setItem('numberKey', '1.23456e+5' )">1.23456e+5                         </button>
-                    <button onclick="localStorage.setItem('numberKey', '0001'       )">0001                               </button>
-                    <button onclick="localStorage.setItem('numberKey', '000'        )">000                                </button>
-                    <button onclick="localStorage.setItem('numberKey', '0'          )">0                                  </button>
-                    <button onclick="localStorage.setItem('numberKey', 'ABC'        )">ABC - invalid, NaN                 </button>
+                    <button onclick="localStorageSetItem('numberKey', '2024'       )">2024 - number                      </button>
+                    <button onclick="localStorageSetItem('numberKey', '24'         )">24   - number                      </button>
+                    <button onclick="localStorageSetItem('numberKey', '1.23456e+5' )">1.23456e+5                         </button>
+                    <button onclick="localStorageSetItem('numberKey', '0001'       )">0001                               </button>
+                    <button onclick="localStorageSetItem('numberKey', '000'        )">000                                </button>
+                    <button onclick="localStorageSetItem('numberKey', '0'          )">0                                  </button>
+                    <button onclick="localStorageSetItem('numberKey', 'ABC'        )">ABC - invalid, NaN                 </button>
                     <code data-testid="number-key">{//number-key     }</code> <br>
                 <fieldset>
                     <legend>json-key: </legend>
 
-                    <button onclick="localStorage.setItem('jsonKey', JSON.stringify('ABC'))">'ABC'   - string  </button>
-                    <button onclick="localStorage.setItem('jsonKey', JSON.stringify(12.345))">12.345  - number  </button>
-                    <button onclick="localStorage.setItem('jsonKey', JSON.stringify(window.JsonSample) )">a:1,b:'B'  -json  </button>
-                    <button onclick="localStorage.setItem('jsonKey', 'ABC'  )">ABC - invalid     </button><br>
+                    <button onclick="localStorageSetItem('jsonKey', JSON.stringify('ABC'))">'ABC'   - string  </button>
+                    <button onclick="localStorageSetItem('jsonKey', JSON.stringify(12.345))">12.345  - number  </button>
+                    <button onclick="localStorageSetItem('jsonKey', JSON.stringify(window.JsonSample) )">a:1,b:'B'  -json  </button>
+                    <button onclick="localStorageSetItem('jsonKey', 'ABC'  )">ABC - invalid     </button><br>
                     json-key:<code data-testid="json-key"><xsl:apply-templates select="//json-key/value/@*|//json-key/text()|//json-key/value/text()" mode="json"></xsl:apply-templates></code>
                 </fieldset>
                 <xsl:template mode="json" match="*|@*">
@@ -224,8 +232,8 @@ export const TypeAttribute:Story  =
         await canvas.findByText(TypeAttribute.args!.title as string);
         const byText = txt => canvas.getByText(txt)
         ,        val = testId => canvas.getByTestId(testId).textContent
-        ,  expectVal = (key,value) => { expect(val( key )).toEqual( value, key ) };
-        localStorage.clear(); // cleanup before test
+        ,  expectVal = (key,value) => { expect(val( key ).trim()).toEqual( value, key ) };
+        localStorage_clear(); // cleanup before test
         await sleep(10);
 
         expectVal('text-key'       ,'');
@@ -385,10 +393,11 @@ export const TypeAttribute:Story  =
         expectVal('time-key'       ,''                  );
         expectVal('local-date-time',''                  );
         expectVal('number-key'     ,'NaN'               );
-        expectVal('json-key'       ,'\na : 1b : B'      );
+        expectVal('json-key'       ,'a : 1b : B'      );
     },
 };
 
+//#region unit tests
 /* istanbul ignore else -- @preserve */
 if(  'test' === import.meta.env.MODE &&
     !import.meta.url.includes('skiptest') )
@@ -398,3 +407,4 @@ if(  'test' === import.meta.env.MODE &&
     const { describe } = await import('vitest')
     describe(meta.title, () => testStoryBook( mod, meta ) );
 }
+//#endregion

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

@@ -134,6 +134,7 @@ export const SrcAttribute:Story  =
 };
 
 
+//#region unit tests
 /* istanbul ignore else -- @preserve */
 if(  'test' === import.meta.env.MODE &&
     !import.meta.url.includes('skiptest') )
@@ -143,3 +144,4 @@ if(  'test' === import.meta.env.MODE &&
     const { describe } = await import('vitest')
     describe(meta.title, () => testStoryBook( mod, meta ) );
 }
+//#endregion

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

@@ -172,6 +172,7 @@ export const HashWithinLib:Story  =
 };
 
 
+//#region unit tests
 /* istanbul ignore else -- @preserve */
 if(  'test' === import.meta.env.MODE &&
     !import.meta.url.includes('skiptest') )
@@ -181,3 +182,4 @@ if(  'test' === import.meta.env.MODE &&
     const { describe } = await import('vitest')
     describe(meta.title, () => testStoryBook( mod, meta ) );
 }
+//#endregion

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

@@ -104,6 +104,7 @@ export const DynamicMethod: Story =
     };
 
 
+//#region unit tests
 /* istanbul ignore else -- @preserve */
 if ('test' === import.meta.env.MODE &&
     !import.meta.url.includes('skiptest')) {
@@ -112,3 +113,4 @@ if ('test' === import.meta.env.MODE &&
     const {describe} = await import('vitest')
     describe(meta.title, () => testStoryBook(mod, meta));
 }
+//#endregion

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

@@ -189,6 +189,7 @@ export const SlicesInAttrAndName:Story  =
     },
 };
 
+//#region unit tests
 /* istanbul ignore else -- @preserve */
 if(  'test' === import.meta.env.MODE &&
     !import.meta.url.includes('skiptest') )
@@ -198,3 +199,4 @@ if(  'test' === import.meta.env.MODE &&
     const { describe } = await import('vitest')
     describe(meta.title, () => testStoryBook( mod, meta ) );
 }
+//#endregion

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

@@ -206,6 +206,7 @@ export const TemplateWithAttributesAndCondition:Story  =
     }
 };
 
+//#region unit tests
 /* istanbul ignore else -- @preserve */
 if(  'test' === import.meta.env.MODE &&
     !import.meta.url.includes('skiptest') )
@@ -215,3 +216,4 @@ if(  'test' === import.meta.env.MODE &&
     const { describe } = await import('vitest')
     describe(meta.title, () => testStoryBook( mod, meta ) );
 }
+//#endregion

package/src/stories/version-select.test.stories.ts

@@ -91,6 +91,7 @@ export const VersionsSelect:Story  =
 };
 
 
+//#region unit tests
 /* istanbul ignore else -- @preserve */
 if(  'test' === import.meta.env.MODE &&
     !import.meta.url.includes('skiptest') )
@@ -100,3 +101,4 @@ if(  'test' === import.meta.env.MODE &&
     const { describe } = await import('vitest')
     describe(meta.title, () => testStoryBook( mod, meta ) );
 }
+//#endregion