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

package/storybook-static/assets/{slice-events.test.stories-VoNjuPCX.js → slice-events.test.stories-D_ttGp3g.js}

@@ -1,4 +1,4 @@
-import{w as d,e as c,u}from"./custom-element-DpIq8E2p.js";import"./index-CVRyq5ci.js";function i(e){return new Promise(t=>setTimeout(t,e))}function h(e){const{title:t,body:a}=e;return`
+import{w as d,e as c,u}from"./custom-element-wn23PUwN.js";import"./index-C8k3Z-3Y.js";function i(e){return new Promise(t=>setTimeout(t,e))}function h(e){const{title:t,body:a}=e;return`
         <fieldset>
             <legend>${t}</legend>
             ${a}

package/storybook-static/assets/{slots.test.stories-Da2j9YuO.js → slots.test.stories-DBNXOm0T.js}

@@ -1,4 +1,4 @@
-import{w as o,e as l}from"./custom-element-DpIq8E2p.js";import"./index-CVRyq5ci.js";function y(t){const{title:a,tag:n,attributes:e,slot:s,payload:g}=t;return`
+import{w as o,e as l}from"./custom-element-wn23PUwN.js";import"./index-C8k3Z-3Y.js";function y(t){const{title:a,tag:n,attributes:e,slot:s,payload:g}=t;return`
         <fieldset>
             <legend>${a}</legend>
             <custom-element

package/storybook-static/assets/version-select.test.stories-CgV3UCim.js

@@ -0,0 +1,109 @@
+import{w as r}from"./custom-element-wn23PUwN.js";import"./http-request-DNq59pnj.js";import"./location-element-hKpcXCdn.js";import"./index-C8k3Z-3Y.js";function o(e){return new Promise(s=>setTimeout(s,e))}function n(e){const{title:s,body:i}=e;return`
+        <fieldset>
+            <legend>${s}</legend>
+            ${i}
+        </fieldset>
+  `}const u={title:"site",render:n},t={args:{title:"Versions of custom-element",body:`
+    <p>Select the version of custom-element StoryBook.</p>
+    <custom-element >
+        <template>
+            <variable name="url" select="//window-location/value/@href"></variable>
+            <variable name="current-version" >0{
+                substring-before(substring-after(substring($url, string-length(substring-before($url, '/')) - string-length(substring-before(substring-before($url, '/'), '@0')) + 2), '@0'), '/')
+            }</variable>
+            <location-element slice="window-location" live>
+                <xsl:if test=" not(//selected-version = $current-version ) and not(//selected-version = '')  ">
+                    <attribute name="src">{ concat( substring-before($url, $current-version), 
+                                                    //selected-version, 
+                                                    substring-after($url, $current-version) ) }</attribute>
+                    <attribute name="method">location.href</attribute>
+                </if>
+            </location-element>
+            <http-request 
+                url="https://registry.npmjs.org/@epa-wg/custom-element-dist" 
+                method="GET" 
+                header-accept="application/json"
+                slice="versions-ajax" ></http-request>
+                    
+            <label>version: 
+                <xhtml:select slice="selected-version" autocomplete="off" name="version">
+                    <for-each select="//versions/*">
+                        <option value="{./@version}">
+                            <variable name="item-version">{./@version}</variable>
+                            { $item-version } - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}
+                        </option>
+                    </for-each>
+                    <for-each select="//versions/*">
+                        <if test="./@version = $current-version">
+                            <option selected value="{./@version}">
+                                <variable name="item-version">{./@version}</variable>
+                                { $item-version } - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}
+                            </option>    
+                        </if>
+                    </for-each>
+                </xhtml:select>
+            </label>
+        </template>
+    </custom-element>
+    <dce-link id="dce1"></dce-link>
+`},play:async({canvasElement:e})=>{t.args.title,r(e),window.location.hash="#@epa-wg/custom-element-dist@0.0.24/storybook-static/index.html",await o(20)}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'Versions of custom-element',
+    body: \`
+    <p>Select the version of custom-element StoryBook.</p>
+    <custom-element >
+        <template>
+            <variable name="url" select="//window-location/value/@href"></variable>
+            <variable name="current-version" >0{
+                substring-before(substring-after(substring($url, string-length(substring-before($url, '/')) - string-length(substring-before(substring-before($url, '/'), '@0')) + 2), '@0'), '/')
+            }</variable>
+            <location-element slice="window-location" live>
+                <xsl:if test=" not(//selected-version = $current-version ) and not(//selected-version = '')  ">
+                    <attribute name="src">{ concat( substring-before($url, $current-version), 
+                                                    //selected-version, 
+                                                    substring-after($url, $current-version) ) }</attribute>
+                    <attribute name="method">location.href</attribute>
+                </if>
+            </location-element>
+            <http-request 
+                url="https://registry.npmjs.org/@epa-wg/custom-element-dist" 
+                method="GET" 
+                header-accept="application/json"
+                slice="versions-ajax" ></http-request>
+                    
+            <label>version: 
+                <xhtml:select slice="selected-version" autocomplete="off" name="version">
+                    <for-each select="//versions/*">
+                        <option value="{./@version}">
+                            <variable name="item-version">{./@version}</variable>
+                            { $item-version } - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}
+                        </option>
+                    </for-each>
+                    <for-each select="//versions/*">
+                        <if test="./@version = $current-version">
+                            <option selected value="{./@version}">
+                                <variable name="item-version">{./@version}</variable>
+                                { $item-version } - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}
+                            </option>    
+                        </if>
+                    </for-each>
+                </xhtml:select>
+            </label>
+        </template>
+    </custom-element>
+    <dce-link id="dce1"></dce-link>
+\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const titleText = (VersionsSelect.args!.title as string);
+    const canvas = within(canvasElement),
+      code = async id => (await canvas.findByTestId(id)).textContent.trim();
+    window.location.hash = '#@epa-wg/custom-element-dist@0.0.24/storybook-static/index.html';
+    await sleep(20);
+    // expect( await code('p1') ).toEqual('default_P1' );
+    // expect( await code('p2') ).toEqual('always_p2'  );
+    // expect( await code('p3') ).toEqual('def_P3'     );
+  }
+}`,...t.parameters?.docs?.source}}};const v=["VersionsSelect"];export{t as VersionsSelect,v as __namedExportsOrder,u as default};

package/storybook-static/confused.svg

@@ -1,5 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.0">
+  <title>Confused</title>
   <defs>
     <linearGradient id="d">
       <stop offset="0"/>

package/storybook-static/demo/a.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>Data slices - Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+
+    <script type="module" src="../http-request.js"></script>
+    <script type="module" src="../custom-element.js"></script>
+    <style>
+        @import "./demo.css";
+
+        label {
+            display: flex;
+        }
+
+        label:has(input[type="text"],input[type="password"],input:not([type]) ) {
+            flex-direction: column;
+        }
+
+        nav {
+            max-width: 32em;
+        }
+    </style>
+    <!-- https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/custom-error-message.html
+         todo: apply setCustomValidity( warningStr )
+    -->
+
+</head>
+<body>
+
+<fieldset>
+    <legend><b style="color:green">green</b> in instance style can be overridden in payload as <i
+            style="color:red">red</i> in 1st instance
+    </legend>
+    <custom-element tag="dce-3">
+        <template>
+            <u>
+                <slot>is green</slot>
+            </u>
+        </template>
+        <style>dce-3 {
+            color: green
+        }</style>
+    </custom-element>
+   <u>should be</u> <i style="color:red">red</i>:
+    <dce-3 id="dce32">
+        <template>
+            <style> color:red; </style>
+            <u>red</u>
+        </template>
+    </dce-3> <br/>
+    should be GREEN:
+    <dce-3 id="dce31">green</dce-3>
+</fieldset>
+
+<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
+
+</body>
+</html>

package/storybook-static/demo/b.html

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<dce-root data-dce-id="1" xmlns="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce"
+          xmlns:xhtml="http://www.w3.org/1999/xhtml"><u data-dce-id="2" xmlns="">
+    <dce-text data-dce-id="3">
+        <xhtml:span xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot=""/>
+        <xhtml:style xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot="" title="ABC">
+            dce-3[data-dce-style="54f96d52-ce70-435d-83c4-b421357d9a17"]{ color:red; }
+        </xhtml:style>
+        <xhtml:span xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot=""/>
+        <xhtml:u xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot="">red</xhtml:u>
+        <xhtml:span xmlns:xsl="http://www.w3.org/1999/XSL/Transform" slot=""/>
+    </dce-text>
+</u></dce-root>

package/storybook-static/demo/confused.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.0">
+  <title>Confused</title>
+  <defs>
+    <linearGradient id="d">
+      <stop offset="0"/>
+      <stop offset=".5"/>
+      <stop offset=".80000001" stop-opacity=".46666667"/>
+      <stop offset="1" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="a">
+      <stop offset="0" stop-color="#fb0"/>
+      <stop offset=".5" stop-color="#e29d00"/>
+      <stop offset="1" stop-color="#fb0"/>
+    </linearGradient>
+    <linearGradient id="c">
+      <stop offset="0"/>
+      <stop offset="1" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="b">
+      <stop offset="0" stop-color="#ffc"/>
+      <stop offset=".5" stop-color="#fff965"/>
+      <stop offset="1" stop-color="#fc3"/>
+    </linearGradient>
+    <linearGradient xlink:href="#a" id="i" x1="8.0350637" x2="42.788235" y1="32.372219" y2="32.372219" gradientUnits="userSpaceOnUse" spreadMethod="pad"/>
+    <radialGradient xlink:href="#b" id="f" cx="17.986637" cy="16.545853" r="23.978155" fx="17.986637" fy="16.545853" gradientUnits="userSpaceOnUse"/>
+    <radialGradient xlink:href="#c" id="e" cx="53.309223" cy="94.956306" r="63.252911" fx="53.309223" fy="94.956306" gradientTransform="matrix(1 0 0 .34935 0 61.7838)" gradientUnits="userSpaceOnUse"/>
+    <radialGradient xlink:href="#d" id="g" cx="18.71347" cy="21.759708" r="1.8644418" fx="18.71347" fy="21.759708" gradientTransform="matrix(1 0 0 1.77778 0 -16.92422)" gradientUnits="userSpaceOnUse"/>
+  </defs>
+  <path fill="url(#e)" d="M116.56213 94.956306a63.252911 22.097088 0 1 1-126.5058174 0 63.252911 22.097088 0 1 1 126.5058174 0z" opacity=".53200001" transform="matrix(.3162 0 0 .33941 6.936944 8.132618)"/>
+  <path fill="url(#f)" stroke="#fb0" stroke-width="1.43869453" d="M47.094418 23.83131a23.478155 23.478155 0 1 1-46.9563107 0 23.478155 23.478155 0 1 1 46.9563107 0z" transform="translate(4.30185 4.122792) scale(.83409)"/>
+  <path id="h" fill="#fff" fill-opacity="1" fill-rule="nonzero" stroke="#fc0" stroke-dasharray="none" stroke-dashoffset="0" stroke-linejoin="miter" stroke-miterlimit="4" stroke-opacity="1" stroke-width="1" d="M21.682767 18.5142a3.9360437 6.9743929 0 1 1-7.872088 0 3.9360437 6.9743929 0 1 1 7.872088 0z" opacity="1" transform="matrix(1.01507 0 0 1.00354 -.0090285 .916405)"/>
+  <path id="j" fill="url(#g)" fill-opacity="1" fill-rule="nonzero" stroke="none" stroke-dasharray="none" stroke-dashoffset="0" stroke-linejoin="miter" stroke-miterlimit="4" stroke-opacity="1" stroke-width="1" d="M20.577912 21.759708a1.8644418 3.314563 0 1 1-3.728883 0 1.8644418 3.314563 0 1 1 3.728883 0z" opacity="1" transform="translate(-.138107 .535104)"/>
+  <use xlink:href="#h" width="48" height="48" transform="translate(12.50001 -4.4e-7)"/>
+  <path fill="none" stroke="url(#i)" stroke-linecap="round" stroke-width="1.97319973" d="M9.0216636 35.899178c4.7689724-7.457767 10.9544424-9.489956 17.3095664-3.728884 5.404329 4.899155 11.190398 4.350365 15.470406-.656007"/>
+  <path fill="none" stroke="#e2ac00" stroke-linecap="round" stroke-width="1.17813516" d="M15.504748 34.21319c3.012147-3.243177 6.693658.87012 6.693658.87012" opacity=".8"/>
+  <use xlink:href="#j" width="48" height="48" transform="translate(10.78418 -5)"/>
+</svg>

package/storybook-static/demo/data-slices.html

@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>Data slices - Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+
+    <script type="module" src="../http-request.js"></script>
+    <script type="module" src="../custom-element.js"></script>
+    <style>
+        @import "./demo.css";
+    </style>
+</head>
+<body>
+
+<nav>
+    <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
+    <h3>Data slices propagation by events.</h3>
+</nav>
+
+<html-demo-element legend="A. slice initialization, change on event"
+                   description="initial value should be 0; + and - should change the number in input field">
+    <template>
+        <custom-element>
+            <template>
+                <button slice="clickcount"
+                        slice-event="click"
+                        slice-value="//clickcount + 1"   >
+                    +
+                </button>
+                <button slice="clickcount"
+                        slice-event="click"
+                        slice-value="//clickcount - 1"   >
+                    -
+                </button>
+                <input slice="clickcount" type="number" value="{//clickcount ?? 0}" />
+                {//clickcount}
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="B. slice event data."
+                   description="move the mouse over TEXTAREA and click to see slice and slice event changed">
+    <template>
+        <custom-element>
+            <template>
+                <textarea slice="s" slice-value="concat('x:', //@pageX)"
+                          slice-event="mousemove click"
+                          style="width:16rem;height:16rem;box-shadow: inset {//@offsetX}px {//@offsetY}px gold;" ></textarea><br/>
+                //slice/s : {//slice/s}   <br/>
+                //slice/s/event/@offsetY: {//slice/s/event/@offsetY}  <br/>
+                event type:{//slice/s/event/@type}
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="1. slice change on event. 1:1 slice⮂value"
+                   description="initial value blank; type and unfocus to see slice changed">
+    <template>
+
+        <custom-element>
+            <input slice="typed" /> //slice/typed : {//slice/typed}
+        </custom-element>
+    </template>
+</html-demo-element>
+
+
+<html-demo-element legend="2. initial slice value, slice change on event. slice⮂value, w/ initial"
+                   description="initial value from input; type and unfocus to see slice changed">
+    <template>
+        <custom-element>
+            <input slice="s" value="{//s ?? 'B'}" /> //slice/s : {//slice/s}
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="3. initial slice value, slice change on event. slice⮂value, w/ initial"
+                   description="initial value from input; type to see slice changed">
+    <template>
+        <custom-element>
+            <input slice="s" value="{//s ?? 'B'}" slice-event="input"/> //slice/s : {//slice/s}
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="4. initial slice value from attribute, slice change on event."
+                   description="initial value from input; type to see slice changed">
+    <template>
+        <custom-element tag="dce-1">
+            <template>
+                <attribute name="a" >😁</attribute>
+                <input slice="s" value="{//s ?? $a}" slice-event="keyup" />
+                attribute 'a' : {$a}
+                //slice/s : {//slice/s}
+            </template>
+        </custom-element>
+        <dce-1></dce-1>
+        <dce-1 a="🤗"></dce-1>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="5. initial slice value from attribute, slice change on event."
+                   description="initial value from input as 'xB'; type and unfocus to see slice changed">
+    <template>
+        <custom-element>
+            <template>
+                <input slice="s" value="{substring(//s, 2) ?? 'B'}" slice-value="concat('x', @value )" />
+                //slice/s : {//slice/s}
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+
+<html-demo-element legend="6. initial slice value from input, button ignored till change on click."
+                   description="initial value from input as 'anonymous'; on button click change to 'broccoli'">
+    <template>
+        <custom-element>
+            <template>
+            <input slice="nickname" value="anonymous" />
+            <button slice="nickname" slice-value="'broccoli'" slice-event="click">🥦</button>
+            {//nickname}
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="7. initial slice value from SLICE element, button ignored till change on click."
+                   description="synthetic SLICE element serves as initial value holder">
+    <template>
+        <custom-element>
+            <template>
+                <button slice="clickcount" slice-event="click tap" slice-value="//clickcount + 1">
+                    <slice slice="clickcount" value="0" ></slice>
+                     click/tap
+                </button>
+                //clickcount : {//clickcount}
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="8. multiple slices by SLICE element, button ignored till change on click."
+                   description="synthetic SLICE elements serve as initial value holder">
+    <template>
+        <custom-element>
+            <template>
+                <button>
+                    <slice slice="clicked" value="{0}" ></slice>
+                    <slice slice="focused" value="{0}" ></slice>
+                    <slice slice-event="click tap" slice="clicked" slice-value="//clicked+1" ></slice>
+                    <slice slice-event="focus"     slice="focused" slice-value="1" ></slice>
+                    <slice slice-event="blur"      slice="focused" slice-value="0" ></slice>
+                     click/tap, focus/blur
+                </button> <br/>
+                //clicked : {//clicked} <br/>
+                //focused : {//focused}
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+
+<html-demo-element legend="9. slice in attribute"
+                   description="initial attribute value should be smile as emoji and :) on blur from input it should be updated from value">
+    <template>
+        <custom-element tag="emotional-element">
+            <template>
+                <attribute name="emotion" select="//emotion ?? '😃'"></attribute>
+                <input slice="/datadom/attributes/emotion"/>
+                Type and unfocus to update emotion attribute: {emotion}
+            </template>
+        </custom-element>
+        <emotional-element emotion=":)"></emotional-element>
+        <emotional-element></emotional-element>
+    </template>
+</html-demo-element>
+
+
+<html-demo-element legend="10. multiple slices by same field"
+                   description="same element value sets s1 and s2 slice">
+    <template>
+        <custom-element>
+        <template>
+            <input  slice="s1|s2"
+                    slice-event="input"
+                    data-testid="f1"
+                    /><br/>
+            Type to update s1 and s2 slices <br/>
+            slice <code>s1: {//slice/s1}</code><br/>
+            slice <code>s2: {//slice/s2}</code><br/>
+        </template>
+    </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="11. slices and attribute"
+                   description="initial attribute value should be smile as emoji and :) on blur from input it should be updated from value">
+    <template>
+        <custom-element>
+            <template>
+                <attribute name="emotion">😃</attribute>
+                <input slice="/datadom/attributes/emotion | s1"/>
+                Type and unfocus to update emotion attribute: {emotion}
+                and slice: {//slice/s1}
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
+
+</body>
+</html>

package/storybook-static/demo/demo.css

@@ -0,0 +1,26 @@
+html
+{   font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
+    font-weight: 400; font-style: normal; -webkit-font-smoothing: antialiased;
+}
+body,nav{ display: flex; flex-wrap: wrap; align-content: stretch; gap: 1rem; }
+body>*{flex: auto;}
+nav{ flex-direction: column;}
+custom-element+*,
+custom-element+*+*,
+custom-element:not([tag]),
+dce-link,dce-1-slot,dce-2-slot,dce-3-slot,dce-4-slot,dce-2-slots,greet-element,pokemon-tile,
+dce-1,dce-2,dce-3,dce-4,dce-internal,dce-hash
+{ box-shadow: 0 0 0.5rem lime; padding: 1rem; display: inline-block; flex:1; }
+script{ display:none !important; }
+dd{ padding: 1rem;}
+p{ margin: 0;}
+code{ font-weight: bold; color: green; text-wrap: nowrap; }
+*{
+    gap: 1rem;
+}
+
+html-demo-element h3
+{   text-shadow: 0 0 0.25em white;
+    letter-spacing: 0.1rem;
+}
+*[slot="demo"]{ display: flex; gap: 1rem; flex-wrap: wrap; }

package/storybook-static/demo/dom-merge.html

@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>DOM merge - Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+
+    <script type="module" src="../http-request.js"></script>
+    <script type="module" src="../custom-element.js"></script>
+    <style>
+        @import "./demo.css";
+
+        button {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            flex: auto;
+            box-shadow: inset silver 0 0 1rem;
+            min-width: 12rem;
+            padding: 1rem;
+            color: coral;
+            text-shadow: 1px 1px silver;
+            font-weight: bolder;
+        }
+
+        button img {
+            max-height: 10vw;
+            min-height: 4rem;
+        }
+
+        table {
+            min-width: 16rem;
+        }
+
+        td {
+            border-bottom: 1px solid silver;
+        }
+
+        tfoot td {
+            border-bottom: none;
+        }
+
+        td, th {
+            text-align: right;
+        }
+
+        caption {
+            padding: 1rem;
+            font-weight: bolder;
+            font-family: sans-serif;
+        }
+
+        code {
+            text-align: right;
+            min-width: 3rem;
+        }
+
+        svg {
+            max-height: 3rem;
+        }
+    </style>
+</head>
+<body>
+
+<nav>
+    <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
+    <h3>DOM merge. DCE dynamic update with focus preservation.</h3>
+</nav>
+
+<html-demo-element legend="1. Word count in textarea"
+                   description="Counter update happens on change event(focus change).
+                                The update should not interfere with the input">
+    <template>
+        <custom-element>
+            <form>
+                <label>
+                    <textarea slice="text-container" >Hello world!</textarea>
+                    <span> Word count:
+                        {string-length(//slice/text-container/text())}
+                    </span>
+                </label>
+            </form>
+        </custom-element>
+    </template>
+</html-demo-element>
+<hr/>
+
+<html-demo-element legend="2. Word count in HTML input field"
+                   description="Counter update happens on keyup event.
+                                The update should not interfere with the input">
+    <template>
+        <custom-element>
+            <form>
+                <label>
+                    <input type="text"
+                           value="{//txt ?? 'Type time update'}"
+                           slice="txt"
+                           slice-event="init input"/>
+
+                    <span> Character count:
+                        <b> {string-length(//slice/txt)} </b>
+                    </span>
+                    <span> Word count:
+                        <b> {string-length(normalize-space(//slice/txt)) -
+                            string-length(translate(normalize-space(//slice/txt), ' ', '')) + 1} </b>
+                        <!-- The expression first normalizes the string by removing leading and trailing whitespace and
+                            collapsing internal whitespace into a single space. It then subtracts the length of the string
+                            with all spaces removed from the length of the original string,
+                            and adds 1 to account for the last word.
+                        -->
+                    </span>
+
+                </label>
+                <p><b>txt</b> slice:</p> <blockquote> {//slice/txt} </blockquote>
+            </form>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
+
+</body>
+</html>

package/storybook-static/demo/embed-1.html

@@ -0,0 +1,2 @@
+<h4>embed-1.html</h4>
+<custom-element><template>🖖</template></custom-element>