@epa-wg/custom-element-dist 0.0.33 → 0.0.35

package/storybook-static/assets/xslt-for-each.test.stories-CtPS20RK.js

@@ -0,0 +1,329 @@
+import{w as r,e,f as s}from"./index-CGuyH0k-.js";import"./custom-element-CnmjNo0g.js";function m(d){const{title:t,tag:a,template:n,payload:i}=d;return`
+        <fieldset>
+            <legend>${t}</legend>
+            <custom-element tag="${a}" hidden>
+                <template>
+                    ${n}
+                </template>
+            </custom-element>
+            ${i}
+        </fieldset>
+    `}const u={title:"xslt/for-each",render:m},l=`
+<h6 id="cem-color-hue-variant" tabindex="-1">cem-color-hue-variant</h6>
+<table>
+    <thead>
+    <tr>
+        <th>Token</th>
+        <th>Hue</th>
+        <th>Variant</th>
+        <th>Hex</th>
+        <th>Label</th>
+        <th>Intended use</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td><code>--cem-color-blue-xl</code></td>
+        <td>blue</td>
+        <td>xl</td>
+        <td><code>#faf9fd</code></td>
+        <td>Lightest blue</td>
+        <td>Comfort/trust emotion (light scene)</td>
+    </tr>
+    <tr>
+        <td><code>--cem-color-blue-l</code></td>
+        <td>blue</td>
+        <td>l</td>
+        <td><code>#d7e3ff</code></td>
+        <td>Light blue</td>
+        <td>Trust palette, attention semantic</td>
+    </tr>
+    <tr>
+        <td><code>--cem-color-blue-d</code></td>
+        <td>blue</td>
+        <td>d</td>
+        <td><code>#002f65</code></td>
+        <td>Dark blue</td>
+        <td>Trust palette (dark theme)</td>
+    </tr>
+    <tr>
+        <td><code>--cem-color-blue-xd</code></td>
+        <td>blue</td>
+        <td>xd</td>
+        <td><code>#1a1b1f</code></td>
+        <td>Darkest blue</td>
+        <td>Comfort/trust emotion (dark scene)</td>
+    </tr>
+    <tr>
+        <td><code>--cem-color-brown-xl</code></td>
+        <td>brown</td>
+        <td>xl</td>
+        <td><code>#d7ccc8</code></td>
+        <td>Extra light brown</td>
+        <td>Conservative palette (light theme)</td>
+    </tr>
+    <tr>
+        <td><code>--cem-color-brown-l</code></td>
+        <td>brown</td>
+        <td>l</td>
+        <td><code>#a1887f</code></td>
+        <td>Light brown</td>
+        <td>Conservative emotion, brand-3</td>
+    </tr>
+    <tr>
+        <td><code>--cem-color-brown-d</code></td>
+        <td>brown</td>
+        <td>d</td>
+        <td><code>#4e342e</code></td>
+        <td>Dark brown</td>
+        <td>Conservative palette (dark theme)</td>
+    </tr>
+    <tr>
+        <td><code>--cem-color-brown-xd</code></td>
+        <td>brown</td>
+        <td>xd</td>
+        <td><code>#3e2723</code></td>
+        <td>Extra dark brown</td>
+        <td>Conservative palette (dark theme, extreme)</td>
+    </tr>
+    <tr>
+        <td><code>--cem-color-cyan-xl</code></td>
+        <td>cyan</td>
+        <td>xl</td>
+        <td><code>#f1fefe</code></td>
+        <td>Extra light cyan</td>
+        <td>Used for comfort palette (light scenes)</td>
+    </tr>
+    <tr>
+        <td><code>--cem-color-cyan-l</code></td>
+        <td>cyan</td>
+        <td>l</td>
+        <td><code>#00fbfb</code></td>
+        <td>Light cyan</td>
+        <td>Calm palette, creativity accent</td>
+    </tr>
+    <tr>
+        <td><code>--cem-color-cyan-d</code></td>
+        <td>cyan</td>
+        <td>d</td>
+        <td><code>#006a6a</code></td>
+        <td>Dark cyan</td>
+        <td>Calm palette (dark theme)</td>
+    </tr>
+    <tr>
+        <td><code>--cem-color-cyan-xd</code></td>
+        <td>cyan</td>
+        <td>xd</td>
+        <td><code>#001010</code></td>
+        <td>Extra dark cyan</td>
+        <td>Used for comfort palette (dark scenes)</td>
+    </tr>
+    <tr>
+        <td><code>--cem-color-grey-l</code></td>
+        <td>grey</td>
+        <td>l</td>
+        <td><code>#f1f1eb</code></td>
+        <td>Light grey</td>
+        <td>Conservative palette, neutral backgrounds</td>
+    </tr>
+    <tr>
+        <td><code>--cem-color-grey-d</code></td>
+        <td>grey</td>
+        <td>d</td>
+        <td><code>#1a1c18</code></td>
+        <td>Dark grey</td>
+        <td>Conservative palette (dark theme)</td>
+    </tr>
+    <tr>
+        <td><code>--cem-color-orange-xl</code></td>
+        <td>orange</td>
+        <td>xl</td>
+        <td><code>#f0f070</code></td>
+        <td>Extra light yellow</td>
+        <td>Enthusiasm palette (light theme)</td>
+    </tr>
+    <tr>
+        <td><code>--cem-color-orange-l</code></td>
+        <td>orange</td>
+        <td>l</td>
+        <td><code>#ffe082</code></td>
+        <td>Light orange</td>
+        <td>Enthusiasm emotion, brand-2</td>
+    </tr>
+    <tr>
+        <td><code>--cem-color-orange-d</code></td>
+        <td>orange</td>
+        <td>d</td>
+        <td><code>#723600</code></td>
+        <td>Dark orange</td>
+        <td>Enthusiasm hype (dark theme)</td>
+    </tr>
+    <tr>
+        <td><code>--cem-color-orange-xd</code></td>
+        <td>orange</td>
+        <td>xd</td>
+        <td><code>#502400</code></td>
+        <td>Extra dark orange</td>
+        <td>Enthusiasm palette (dark theme, extreme)</td>
+    </tr>
+    <tr>
+        <td><code>--cem-color-purple-xl</code></td>
+        <td>purple</td>
+        <td>xl</td>
+        <td><code>#f3e5f5</code></td>
+        <td>Extra light purple</td>
+        <td>Creativity palette (light theme)</td>
+    </tr>
+    <tr>
+        <td><code>--cem-color-purple-l</code></td>
+        <td>purple</td>
+        <td>l</td>
+        <td><code>#e1bee7</code></td>
+        <td>Light purple</td>
+        <td>Creativity emotion, brand-1</td>
+    </tr>
+    <tr>
+        <td><code>--cem-color-purple-d</code></td>
+        <td>purple</td>
+        <td>d</td>
+        <td><code>#6a1b9a</code></td>
+        <td>Dark purple</td>
+        <td>Creativity palette (dark theme)</td>
+    </tr>
+    <tr>
+        <td><code>--cem-color-purple-xd</code></td>
+        <td>purple</td>
+        <td>xd</td>
+        <td><code>#4a148c</code></td>
+        <td>Extra dark purple</td>
+        <td>Creativity palette (dark theme, extreme)</td>
+    </tr>
+    <tr>
+        <td><code>--cem-color-red-xl</code></td>
+        <td>red</td>
+        <td>xl</td>
+        <td><code>#ffb4ab</code></td>
+        <td>Extra light red</td>
+        <td>Danger palette (light theme)</td>
+    </tr>
+    <tr>
+        <td><code>--cem-color-red-l</code></td>
+        <td>red</td>
+        <td>l</td>
+        <td><code>#ba1a1a</code></td>
+        <td>Light red</td>
+        <td>Danger emotion, alert semantic</td>
+    </tr>
+    <tr>
+        <td><code>--cem-color-red-d</code></td>
+        <td>red</td>
+        <td>d</td>
+        <td><code>#690005</code></td>
+        <td>Dark red</td>
+        <td>Danger palette (dark theme)</td>
+    </tr>
+    <tr>
+        <td><code>--cem-color-red-xd</code></td>
+        <td>red</td>
+        <td>xd</td>
+        <td><code>#410002</code></td>
+        <td>Extra dark red</td>
+        <td>Danger palette (dark theme, extreme)</td>
+    </tr>
+    </tbody>
+</table>`,o={args:{title:"KNOWN ISSUE: Multiple IF blocks - out of order",tag:"multi-for-each",template:`
+            <div data-testid="whole-text">
+                <xsl:variable name="test-data">${l}</xsl:variable>
+                <hr/>
+                <variable name="cem-color-hue-variant" select="exsl:node-set($test-data)//*[@id='cem-color-hue-variant']/following-sibling::table[1]/tbody"></variable>
+                <for-each select="$cem-color-hue-variant/*">
+                
+                    <div data-testid="color-{position()}"> {./*[1]}</div>
+                </for-each>
+            </div>
+                        
+        `,payload:`
+            <multi-for-each></multi-for-each>
+        `},play:async({canvasElement:d})=>{const t=r(d);e(await await t.findByTestId("color-1")).toBeInTheDocument(),e(await await t.findByText("--cem-color-blue-l")).toBeInTheDocument(),e(await await t.findByTestId("color-26")).toBeInTheDocument(),e(await await t.findByText("--cem-color-red-xd")).toBeInTheDocument()}},c={args:{title:"initially none, on check - all items in order 0 to N. N should be in the end",tag:"for-each-0-to-n",template:`
+            <div data-testid="whole-text">
+                <xsl:variable name="test-data">${l}</xsl:variable>
+                <label><input type="checkbox" data-testid="toggle-all" slice="show-all" value="ALL"  /> ALL </label>
+                <variable name="cem-color-hue-variant" select="exsl:node-set($test-data)//*[@id='cem-color-hue-variant']/following-sibling::table[1]/tbody"></variable>
+                <variable name="show-all" select="//show-all = 'ALL'"></variable>
+<hr/>
+                0
+                <for-each select="$cem-color-hue-variant/*[ $show-all ]">
+                
+                    <div data-testid="color-{position()}"> {position()} {./*[1]}</div>
+                </for-each>
+                N
+            </div>
+                        
+        `,payload:`
+            <for-each-0-to-n></for-each-0-to-n>
+        `},play:async({canvasElement:d})=>{const t=r(d),a=await t.findByTestId("whole-text");await e(a.textContent).toMatch(/0\s+N/),await s.click(await t.findByTestId("toggle-all")),await t.findByText("1--cem-color-blue-xl"),await e(await t.findByText("1--cem-color-blue-xl")).toBeInTheDocument(),await e(a.textContent).toMatch(/0\s+1--cem-color-blue-xl[\s\S]*26--cem-color-red-xd\s+N/)}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'KNOWN ISSUE: Multiple IF blocks - out of order',
+    tag: 'multi-for-each',
+    template: \`
+            <div data-testid="whole-text">
+                <xsl:variable name="test-data">\${Head6Table}</xsl:variable>
+                <hr/>
+                <variable name="cem-color-hue-variant" select="exsl:node-set($test-data)//*[@id='cem-color-hue-variant']/following-sibling::table[1]/tbody"></variable>
+                <for-each select="$cem-color-hue-variant/*">
+                
+                    <div data-testid="color-{position()}"> {./*[1]}</div>
+                </for-each>
+            </div>
+                        
+        \`,
+    payload: \`
+            <multi-for-each></multi-for-each>
+        \`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    expect(await await canvas.findByTestId('color-1')).toBeInTheDocument();
+    expect(await await canvas.findByText('--cem-color-blue-l')).toBeInTheDocument();
+    expect(await await canvas.findByTestId('color-26')).toBeInTheDocument();
+    expect(await await canvas.findByText('--cem-color-red-xd')).toBeInTheDocument();
+  }
+}`,...o.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'initially none, on check - all items in order 0 to N. N should be in the end',
+    tag: 'for-each-0-to-n',
+    template: \`
+            <div data-testid="whole-text">
+                <xsl:variable name="test-data">\${Head6Table}</xsl:variable>
+                <label><input type="checkbox" data-testid="toggle-all" slice="show-all" value="ALL"  /> ALL </label>
+                <variable name="cem-color-hue-variant" select="exsl:node-set($test-data)//*[@id='cem-color-hue-variant']/following-sibling::table[1]/tbody"></variable>
+                <variable name="show-all" select="//show-all = 'ALL'"></variable>
+<hr/>
+                0
+                <for-each select="$cem-color-hue-variant/*[ $show-all ]">
+                
+                    <div data-testid="color-{position()}"> {position()} {./*[1]}</div>
+                </for-each>
+                N
+            </div>
+                        
+        \`,
+    payload: \`
+            <for-each-0-to-n></for-each-0-to-n>
+        \`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    const container = await canvas.findByTestId('whole-text');
+    await expect(container.textContent).toMatch(/0\\s+N/);
+    await fireEvent.click(await canvas.findByTestId('toggle-all'));
+    await canvas.findByText('1--cem-color-blue-xl');
+    await expect(await canvas.findByText('1--cem-color-blue-xl')).toBeInTheDocument();
+    // should start with 0 and end with N
+    await expect(container.textContent).toMatch(/0\\s+1--cem-color-blue-xl[\\s\\S]*26--cem-color-red-xd\\s+N/);
+  }
+}`,...c.parameters?.docs?.source}}};const x=["ForEach","ForEach_0_2_N"];export{o as ForEach,c as ForEach_0_2_N,x as __namedExportsOrder,u as default};

package/storybook-static/assets/xslt-if.test.stories-DcHrAMSY.js

@@ -0,0 +1,71 @@
+import{w as l,e as a,u as c}from"./index-CGuyH0k-.js";import"./custom-element-CnmjNo0g.js";function d(i){const{title:e,tag:t,template:s,payload:n}=i;return`
+        <fieldset>
+            <legend>${e}</legend>
+            <custom-element tag="${t}" hidden>
+                <template>
+                    ${s}
+                </template>
+            </custom-element>
+            ${n}
+        </fieldset>
+    `}const f={title:"xslt/if",render:d},o={args:{title:"KNOWN ISSUE: Multiple IF blocks - out of order",tag:"multi-if-order-issue",template:`
+            <div data-testid="whole-text">
+                <label><input type="checkbox" data-testid="toggle-a" slice="show-a" value="AA"  /> A</label>
+               
+                <hr/>
+                ▶
+                <if test="//show-a = 'AA'">
+                    !A
+                </if>            
+                ◀
+            </div>
+            <if test="//show-a = 'AA'">
+                <div data-testid="t-1">T1</div>
+            </if>            
+        `,payload:`
+            <multi-if-order-issue></multi-if-order-issue>
+        `},play:async({canvasElement:i})=>{const e=l(i),t=await e.findByTestId("whole-text");a(t.textContent).to.toMatch(/▶\s+◀/);const s=await e.findByTestId("toggle-a");debugger;await c.click(s),a(await await e.findByTestId("t-1")).toBeInTheDocument(),a(t.textContent).to.toMatch(/\!A/),a(t.textContent).to.toMatch(/▶\s+\!A/),a(t.textContent).to.toMatch(/\!A\s+◀/)}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'KNOWN ISSUE: Multiple IF blocks - out of order',
+    tag: 'multi-if-order-issue',
+    template: \`
+            <div data-testid="whole-text">
+                <label><input type="checkbox" data-testid="toggle-a" slice="show-a" value="AA"  /> A</label>
+               
+                <hr/>
+                ▶
+                <if test="//show-a = 'AA'">
+                    !A
+                </if>            
+                ◀
+            </div>
+            <if test="//show-a = 'AA'">
+                <div data-testid="t-1">T1</div>
+            </if>            
+        \`,
+    payload: \`
+            <multi-if-order-issue></multi-if-order-issue>
+        \`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+
+    // Initially ▶\\s+◀ should be visible, !A should not
+    const container = await canvas.findByTestId('whole-text');
+    expect(container.textContent).to.toMatch(/▶\\s+◀/);
+
+    // check A - show !A
+    const toggleA = await canvas.findByTestId('toggle-a');
+    debugger;
+    await userEvent.click(toggleA);
+    expect(await await canvas.findByTestId('t-1')).toBeInTheDocument();
+    // !A is rendered
+    expect(container.textContent).to.toMatch(/\\!A/);
+    // !A afer ▶
+    expect(container.textContent).to.toMatch(/▶\\s+\\!A/);
+    // !A before ◀
+    expect(container.textContent).to.toMatch(/\\!A\\s+◀/);
+  }
+}`,...o.parameters?.docs?.source}}};const p=["MultipleIfOrderingIssue"];export{o as MultipleIfOrderingIssue,p as __namedExportsOrder,f as default};

package/storybook-static/demo/a.html

@@ -63,11 +63,18 @@
 <body>
 
 
+<custom-element tag="dce-link2" >
+        <template>
 
-        <custom-element src="./html-template.html#dwc-logo">
-            <template><i>loading SVG from templates file ...</i></template>
-        </custom-element>
+            <attribute name="p3" select="//attributes/p3 ?? 'def_P3' "></attribute>
 
+            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>
+
+    </section>
 
 </body>
 </html>

package/storybook-static/demo/a.svg

@@ -1,27 +1,27 @@
-<svg id="dwc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
-    <defs>
-
-    </defs>
-    <polygon class="cls-3" points="0 82.47 0 126.71 34.84 146.83 34.84 187.06 73.16 209.18 108 189.07 142.84 209.18 181.16 187.06 181.16 146.83 216 126.71 216 82.47 181.16 62.35 181.16 22.12 142.84 0 108 20.12 73.16 0 34.84 22.12 34.84 62.35 0 82.47"/>
-    <path class="cls-2" d="m114.33,56.69l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
-    <path class="cls-2" d="m98.19,62.71h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
-    <path class="cls-1" d="m48.12,66.01l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97Z"/>
-    <path class="cls-2" d="m46.18,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/>
-    <path class="cls-2" d="m115.87,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/>
-    <path class="cls-2" d="m152.65,42.59c-4.44,2.56-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0Z"/>
-    <path class="cls-2" d="m77.55,158.4l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54Z"/>
-    <path class="cls-4" d="m146.31,134.03v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97Z"/>
-    <path class="cls-4" d="m63.35,123.06h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
-    <path class="cls-4" d="m103.61,151.37l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53Z"/>
-    <path class="cls-4" d="m63.35,163.29h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
-    <path class="cls-4" d="m28.51,102.94h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
-    <path class="cls-4" d="m133.04,163.29l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/>
-    <path class="cls-4" d="m173.29,151.37l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53Z"/>
-    <path class="cls-4" d="m209.06,91.55c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84Z"/>
-    <path class="cls-2" d="m149.18,117.04l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
-    <path class="cls-1" d="m112.39,98.05l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54Z"/>
-    <path class="cls-1" d="m100.13,105.12c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/>
-    <path class="cls-2" d="m65.29,85.01c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/>
-    <path class="cls-1" d="m133.04,123.06l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/>
-    <path class="cls-1" d="m184.02,96.93l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
+<svg id="dwc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+    <defs>
+
+    </defs>
+    <polygon class="cls-3" points="0 82.47 0 126.71 34.84 146.83 34.84 187.06 73.16 209.18 108 189.07 142.84 209.18 181.16 187.06 181.16 146.83 216 126.71 216 82.47 181.16 62.35 181.16 22.12 142.84 0 108 20.12 73.16 0 34.84 22.12 34.84 62.35 0 82.47"/>
+    <path class="cls-2" d="m114.33,56.69l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
+    <path class="cls-2" d="m98.19,62.71h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
+    <path class="cls-1" d="m48.12,66.01l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97Z"/>
+    <path class="cls-2" d="m46.18,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/>
+    <path class="cls-2" d="m115.87,24.66l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0s20.64-11.92,20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06Z"/>
+    <path class="cls-2" d="m152.65,42.59c-4.44,2.56-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0Z"/>
+    <path class="cls-2" d="m77.55,158.4l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54Z"/>
+    <path class="cls-4" d="m146.31,134.03v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97Z"/>
+    <path class="cls-4" d="m63.35,123.06h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
+    <path class="cls-4" d="m103.61,151.37l-20.64,11.92c-4.44,2.57-6.33,5.84-6.33,10.97h0s0,23.84,0,23.84c0,.54.45.8.92.54l20.65-11.92h0c4.44-2.57,6.33-5.84,6.33-10.97v-23.84c0-.54-.45-.8-.92-.53Z"/>
+    <path class="cls-4" d="m63.35,163.29h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
+    <path class="cls-4" d="m28.51,102.94h0s-20.64-11.92-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84s0,0,0,0c0,5.13,1.89,8.4,6.33,10.97l20.65,11.92c.47.27.92,0,.92-.54v-23.84c0-5.13-1.89-8.4-6.33-10.97Z"/>
+    <path class="cls-4" d="m133.04,163.29l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/>
+    <path class="cls-4" d="m173.29,151.37l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0s0-23.84,0-23.84c0-.54-.45-.8-.92-.53Z"/>
+    <path class="cls-4" d="m209.06,91.55c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84Z"/>
+    <path class="cls-2" d="m149.18,117.04l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
+    <path class="cls-1" d="m112.39,98.05l20.65-11.92c4.44-2.57,6.33-5.84,6.33-10.97h0v-23.84c0-.54-.45-.8-.92-.53l-20.64,11.92h0c-4.44,2.57-6.33,5.84-6.33,10.97v23.84c0,.54.45.8.92.54Z"/>
+    <path class="cls-1" d="m100.13,105.12c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/>
+    <path class="cls-2" d="m65.29,85.01c.47-.27.47-.79,0-1.06l-20.65-11.92c-4.44-2.57-8.22-2.57-12.67,0h0s-20.65,11.92-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92h0c4.44,2.57,8.22,2.57,12.67,0l20.64-11.92Z"/>
+    <path class="cls-1" d="m133.04,123.06l-20.64-11.92c-.47-.27-.92-.01-.92.53v23.84c0,5.13,1.89,8.4,6.33,10.97h0s20.65,11.92,20.65,11.92c.47.27.92,0,.92-.54v-23.84s0,0,0,0c0-5.13-1.89-8.4-6.33-10.97Z"/>
+    <path class="cls-1" d="m184.02,96.93l20.64-11.92c.47-.27.47-.79,0-1.06l-20.65-11.92h0c-4.44-2.57-8.22-2.57-12.67,0l-20.65,11.92c-.47.27-.47.79,0,1.06l20.64,11.92c4.44,2.57,8.22,2.57,12.67,0h0Z"/>
 </svg>

package/storybook-static/demo/html-template.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <head>
+  <meta charset="utf-8">
     <title>template based on HTML file</title>
     <style>svg {
         width: 4rem;
@@ -8,9 +9,9 @@
 </head>
 <body>
 <script>console.error('Stranger danger!')</script>
-<b id="wave">👋</b>
-<b id="ok">👌</b>
-<svg id="dwc-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18">
+<b id="wave" data-testid="wave" >👋</b>
+<b id="ok"   data-testid="ok"   >👌</b>
+<svg id="dwc-logo" data-testid="dwc-logo"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18">
     <defs>
         <style>.cls-1 {
             fill: #c2e6f1;

package/storybook-static/demo/s.xml

@@ -1,75 +1 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<datadom>
-    <payload xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
-        <div xmlns="http://www.w3.org/1999/xhtml" slot="leading" data-dce-id="4">
-            <cem-icon image="history_edu" class="input-focused" data-dce-id="5">
-                <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml"
-                          xmlns:dce="urn:schemas-epa-wg:dce" data-dce-id="1">
-                    <span xmlns="" class="icon material-icons" data-dce-id="5">history_edu</span>
-                </dce-root>
-            </cem-icon>
-            <cem-icon image="edit" class="input-unfocused" data-dce-id="6">
-                <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml"
-                          xmlns:dce="urn:schemas-epa-wg:dce" data-dce-id="1">
-                    <span xmlns="" class="icon material-icons" data-dce-id="5">edit</span>
-                </dce-root>
-            </cem-icon>
-        </div>
-        <div xmlns="http://www.w3.org/1999/xhtml" slot="trailing" data-dce-id="7">
-            <label class="eye-contailer" for="visible-cb" data-dce-id="8">
-                <cem-icon image="visibility" class="visible-ico" tabindex="0" data-dce-id="9">
-                    <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml"
-                              xmlns:dce="urn:schemas-epa-wg:dce" data-dce-id="1">
-                        <span xmlns="" class="icon material-icons" data-dce-id="5">visibility</span>
-                    </dce-root>
-                </cem-icon>
-                <cem-icon image="visibility_off" class="invisible-ico" tabindex="0" data-dce-id="10">
-                    <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml"
-                              xmlns:dce="urn:schemas-epa-wg:dce" data-dce-id="1">
-                        <span xmlns="" class="icon material-icons" data-dce-id="5">visibility_off</span>
-                    </dce-root>
-                </cem-icon>
-            </label>
-            <cem-icon image="close" class="clear" tabindex="0" slice="password" slice-event="click" slice-value="''"
-                      data-dce-id="11">
-                <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml"
-                          xmlns:dce="urn:schemas-epa-wg:dce" data-dce-id="1">
-                    <span xmlns="" class="icon material-icons" data-dce-id="5">close</span>
-                </dce-root>
-            </cem-icon>
-            <dce-text data-dce-id="12">️
-            </dce-text>
-        </div>
-    </payload>
-    <attributes xmlns="" label="password sample" value="secret word" slice="password" data-dce-id="3" type="">
-        <xmlns/>
-        <label>password sample</label>
-        <value>secret word</value>
-        <slice>password</slice>
-        <data-dce-id>3</data-dce-id>
-        <type></type>
-    </attributes>
-    <dataset>
-        <dceId>3</dceId>
-    </dataset>
-    <slice>
-        <selected/>
-        <password image="close" class="clear" tabindex="0" slice="password" slice-event="click" slice-value="''"
-                  data-dce-id="11">
-            <event isTrusted="true" sliceProcessed="1" pointerId="1" width="1" height="1" pressure="0" tiltX="0"
-                   tiltY="0" azimuthAngle="0" altitudeAngle="1.5707963267948966" tangentialPressure="0" twist="0"
-                   pointerType="mouse" isPrimary="false" persistentDeviceId="0" screenX="345" screenY="682"
-                   clientX="345" clientY="595" ctrlKey="false" shiftKey="false" altKey="false" metaKey="false"
-                   button="0" buttons="0" pageX="345" pageY="4354" x="345" y="595" offsetX="14" offsetY="15"
-                   movementX="0" movementY="0" layerX="248" layerY="27" detail="1" which="1" type="click" eventPhase="3"
-                   bubbles="true" cancelable="true" defaultPrevented="false" composed="true"
-                   timeStamp="1974517.2999999523" returnValue="true" cancelBubble="false" NONE="0" CAPTURING_PHASE="1"
-                   AT_TARGET="2" BUBBLING_PHASE="3">
-                <relatedTarget/>
-                <fromElement/>
-                <toElement/>
-                <sourceCapabilities firesTouchEvents="false"/>
-            </event>
-        </password>
-    </slice>
-</datadom>
+<datadom><payload xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"/><attributes/><dataset/><slice><show-all/></slice></datadom>