@epa-wg/custom-element-dist 0.0.1

package/storybook-static/assets/slice-events.stories-DXKjXI37.js

@@ -0,0 +1,115 @@
+import{w as d,e}from"./index-CDavW7r9.js";import"./custom-element-BLZZ00dz.js";function a(t){return new Promise(l=>setTimeout(l,t))}function y(t){const{title:l,body:n}=t;return`
+        <fieldset>
+            <legend>${l}</legend>
+            ${n}
+        </fieldset>
+  `}const q={title:"slice-events",render:y},s={args:{title:"Slice initialization, change on event",body:`
+    <p>initial value should be 0; + and - should change the number in input field</p>
+    <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}">
+                <code data-testid="slice-value">{ //clickcount }</code>
+            </template>
+        </custom-element>
+`},play:async({canvasElement:t})=>{const l=s.args.title,n=d(t);await n.findByText(l);const c=await n.findByTestId("slice-value"),i=await t.querySelector('[type="number"]');await e(c).toBeInTheDocument(),e(c.textContent).to.equal("0","initial slot value 0"),e(i.value).to.equal("0","initial input value 0"),t.querySelector('[slice-value="//clickcount + 1"]').click(),await a(10),e(c.textContent).to.equal("1","increment to 1"),e(i.value).to.equal("1","increment input 1"),t.querySelector('[slice-value="//clickcount + 1"]').click(),await a(10),t.querySelector('[slice-value="//clickcount + 1"]').click(),await a(10),e(c.textContent).to.equal("3","double increment to 3"),e(i.value).to.equal("3","double increment input to 3"),t.querySelector('[slice-value="//clickcount - 1"]').click(),await a(10),e(c.textContent).to.equal("2","decrement to 2"),e(i.value).to.equal("2","decrement input to 2")}},o={args:{title:"Realtime Slice data on event",body:`
+    <p>move the mouse over TEXTAREA and click to see slice and slice event changed</p>
+    <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                   : <code data-testid="//slice/s"                 >{ //slice/s                }</code>  <br/>
+            //slice/s/event/@offsetY    : <code data-testid="//slice/s/event/@offsetY"  >{ //slice/s/event/@offsetY }</code>  <br/>
+            event type                  : <code data-testid="//slice/s/event/@type"     >{ //slice/s/event/@type    }</code>
+        </template>
+    </custom-element>
+`},play:async({canvasElement:t})=>{const l=o.args.title,n=d(t);await n.findByText(l);const c=()=>n.getByTestId("//slice/s").textContent,i=()=>n.getByTestId("//slice/s/event/@offsetY").textContent,v=()=>n.getByTestId("//slice/s/event/@type").textContent,p=await t.querySelector("textarea");e(c()).to.equal("","initial slot value blank"),e(i()).to.equal("","initial slot offsetY blank"),e(v()).to.equal("","initial slot event blank"),((u,r,m)=>{const x=new MouseEvent(m,{screenX:u,screenY:r,clientX:u,clientY:r,offsetX:u,offsetY:r});p.dispatchEvent(x)})(10,20,"click"),await a(10),e(c()).to.equal("x:10","click slot value 10"),e(Number(i())).to.be.lessThan(0,"offsetY click"),e(v()).to.equal("click","click event type")}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'Slice initialization, change on event',
+    body: \`
+    <p>initial value should be 0; + and - should change the number in input field</p>
+    <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}">
+                <code data-testid="slice-value">{ //clickcount }</code>
+            </template>
+        </custom-element>
+\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const titleText = (SliceInitChangeEvent.args!.title as string);
+    const canvas = within(canvasElement);
+    await canvas.findByText(titleText);
+    const code = await canvas.findByTestId('slice-value');
+    const input = (await canvasElement.querySelector('[type="number"]') as HTMLInputElement);
+    await expect(code).toBeInTheDocument();
+    expect(code.textContent).to.equal('0', 'initial slot value 0');
+    expect(input.value).to.equal('0', 'initial input value 0');
+    canvasElement.querySelector('[slice-value="//clickcount + 1"]').click();
+    await sleep(10);
+    expect(code.textContent).to.equal('1', 'increment to 1');
+    expect(input.value).to.equal('1', 'increment input 1');
+    canvasElement.querySelector('[slice-value="//clickcount + 1"]').click();
+    await sleep(10);
+    canvasElement.querySelector('[slice-value="//clickcount + 1"]').click();
+    await sleep(10);
+    expect(code.textContent).to.equal('3', 'double increment to 3');
+    expect(input.value).to.equal('3', 'double increment input to 3');
+    canvasElement.querySelector('[slice-value="//clickcount - 1"]').click();
+    await sleep(10);
+    expect(code.textContent).to.equal('2', 'decrement to 2');
+    expect(input.value).to.equal('2', 'decrement input to 2');
+  }
+}`,...s.parameters?.docs?.source}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'Realtime Slice data on event',
+    body: \`
+    <p>move the mouse over TEXTAREA and click to see slice and slice event changed</p>
+    <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                   : <code data-testid="//slice/s"                 >{ //slice/s                }</code>  <br/>
+            //slice/s/event/@offsetY    : <code data-testid="//slice/s/event/@offsetY"  >{ //slice/s/event/@offsetY }</code>  <br/>
+            event type                  : <code data-testid="//slice/s/event/@type"     >{ //slice/s/event/@type    }</code>
+        </template>
+    </custom-element>
+\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const titleText = (RealtimeEventInSlice.args!.title as string);
+    const canvas = within(canvasElement);
+    await canvas.findByText(titleText);
+    const sliceText = () => canvas.getByTestId('//slice/s').textContent,
+      offsetY = () => canvas.getByTestId('//slice/s/event/@offsetY').textContent,
+      eventType = () => canvas.getByTestId('//slice/s/event/@type').textContent;
+    const input = await canvasElement.querySelector('textarea');
+    // expect(input).toBeInTheDocument();
+    expect(sliceText()).to.equal('', 'initial slot value blank');
+    expect(offsetY()).to.equal('', 'initial slot offsetY blank');
+    expect(eventType()).to.equal('', 'initial slot event blank');
+    const emitXy = (x, y, eventName) => {
+      const ev = new MouseEvent(eventName, {
+        screenX: x,
+        screenY: y,
+        clientX: x,
+        clientY: y,
+        offsetX: x,
+        offsetY: y
+      });
+      input.dispatchEvent(ev);
+    };
+    emitXy(10, 20, 'click');
+    await sleep(10);
+    expect(sliceText()).to.equal('x:10', 'click slot value 10');
+    expect(Number(offsetY())).to.be.lessThan(0, 'offsetY click');
+    expect(eventType()).to.equal('click', 'click event type');
+  }
+}`,...o.parameters?.docs?.source}}};const T=["SliceInitChangeEvent","RealtimeEventInSlice"];export{o as RealtimeEventInSlice,s as SliceInitChangeEvent,T as __namedExportsOrder,q as default};

package/storybook-static/assets/syntaxhighlighter-JOJW2KGS-C04pIVD3.js

@@ -0,0 +1 @@
+import{S as s,c as m,s as g,a as n}from"./index-CBQwM6ST.js";import"./iframe-gCvlWuoC.js";import"../sb-preview/runtime.js";import"./index-Cc7K62zD.js";import"./index-Dkj0J1ds.js";import"./index-DrFu-skq.js";export{s as SyntaxHighlighter,m as createCopyToClipboardFunction,g as default,n as supportedLanguages};

package/storybook-static/assets/tiny-invariant-BxWVcicq.js

@@ -0,0 +1 @@
+var a=!0,n="Invariant failed";function v(o,r){if(!o){if(a)throw new Error(n);var i=typeof r=="function"?r():r,t=i?"".concat(n,": ").concat(i):n;throw new Error(t)}}export{v as i};

package/storybook-static/confused.svg

@@ -0,0 +1,37 @@
+<?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">
+  <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/embed-1.html

@@ -0,0 +1,3 @@
+<h4>embed-1.html</h4>
+<custom-element tag="dce-embed-1" hidden data-testid="wave">🖖</custom-element>
+<dce-embed-1>?</dce-embed-1>

package/storybook-static/favicon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="164" height="164">
+  <svg width="164" height="164" viewBox="0 0 164 164" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M22.467 147.762 17.5 15.402a8.062 8.062 0 0 1 7.553-8.35L137.637.016a8.061 8.061 0 0 1 8.565 8.047v144.23a8.063 8.063 0 0 1-8.424 8.054l-107.615-4.833a8.062 8.062 0 0 1-7.695-7.752Z" fill="#FF4785"></path>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="m128.785.57-15.495.968-.755 18.172a1.203 1.203 0 0 0 1.928 1.008l7.06-5.354 5.962 4.697a1.202 1.202 0 0 0 1.946-.987L128.785.569Zm-12.059 60.856c-2.836 2.203-23.965 3.707-23.965.57.447-11.969-4.912-12.494-7.889-12.494-2.828 0-7.59.855-7.59 7.267 0 6.534 6.96 10.223 15.13 14.553 11.607 6.15 25.654 13.594 25.654 32.326 0 17.953-14.588 27.871-33.194 27.871-19.201 0-35.981-7.769-34.086-34.702.744-3.163 25.156-2.411 25.156 0-.298 11.114 2.232 14.383 8.633 14.383 4.912 0 7.144-2.708 7.144-7.267 0-6.9-7.252-10.973-15.595-15.657C64.827 81.933 51.53 74.468 51.53 57.34c0-17.098 11.76-28.497 32.747-28.497 20.988 0 32.449 11.224 32.449 32.584Z" fill="#fff"></path>
+  </svg>
+  <style>@media (prefers-color-scheme: light) { :root { filter: none; } }</style>
+</svg>

package/storybook-static/html-template.html

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+<head>
+    <title>template based on HTML file</title>
+    <style>svg {
+        width: 4rem;
+    }</style>
+</head>
+<body>
+<script>console.error('Stranger danger!')</script>
+<b id="wave">👋</b>
+<b id="ok">👌</b>
+<svg id="dwc-logo" data-testid="svg-test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 209.18">
+    <defs>
+        <style>.cls-1 {
+            fill: #c2e6f1;
+        }
+
+        .cls-2 {
+            fill: #dcf1f7;
+        }
+
+        .cls-3 {
+            fill: #2d4554;
+        }
+
+        .cls-4 {
+            fill: #60cae5;
+        }</style>
+    </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>
+<math id="sophomores-dream"  data-testid="ml-test" display="block">
+    <mrow>
+        <msubsup>
+            <mo>∫</mo>
+            <mn>0</mn>
+            <mn>1</mn>
+        </msubsup>
+        <msup>
+            <mi>x</mi>
+            <mi>x</mi>
+        </msup>
+        <mo rspace="0.22em">⁢</mo>
+        <mo rspace="0">ⅆ</mo>
+        <mi>x</mi>
+        <mo>=</mo>
+        <munderover>
+            <mo>∑</mo>
+            <mrow>
+                <mi>n</mi>
+                <mo>=</mo>
+                <mn>1</mn>
+            </mrow>
+            <mn>∞</mn>
+        </munderover>
+        <msup>
+            <mrow>
+                <mo>(</mo>
+                <mrow>
+                    <mo form="prefix">−</mo>
+                    <mn>1</mn>
+                </mrow>
+                <mo>)</mo>
+            </mrow>
+            <mrow>
+                <mi>n</mi>
+                <mo>+</mo>
+                <mn>1</mn>
+            </mrow>
+        </msup>
+        <mo>⁢</mo>
+        <msup>
+            <mi>n</mi>
+            <mrow>
+                <mo form="prefix">−</mo>
+                <mi>n</mi>
+            </mrow>
+        </msup>
+    </mrow>
+</math>
+</body>
+</html>

package/storybook-static/html-template.xhtml

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+<head>
+    <meta charset="UTF-8"/>
+    <title>template based on HTML file</title>
+</head>
+<body>
+  <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"><defs><style>.cls-1{fill:#c2e6f1;}.cls-2{fill:#dcf1f7;}.cls-3{fill:#2d4554;}.cls-4{fill:#60cae5;}</style></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>
+  <xsl:stylesheet
+        id="embedded-xsl"
+        version="1.0"
+        xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+    <xsl:output
+        method="html"
+        omit-xml-declaration="yes"
+        standalone="yes"
+        indent="yes"
+    />
+
+    <xsl:template match="/">
+        <xsl:apply-templates select="*"/>
+    </xsl:template>
+    <xsl:template match="*">
+        <details style="padding:0 1rem" open="open" data-testid="{name()}">
+            <summary>
+                <b style="color:green"><xsl:value-of select="name()"/></b>
+                <xsl:apply-templates select="@*"/>
+            </summary>
+            <xsl:value-of select="./text()"/>
+            <xsl:apply-templates select="*"/>
+        </details>
+    </xsl:template>
+    <xsl:template match="@*">
+        <code style="margin-left:1rem;color:brown" ><xsl:value-of select="name()"/>="<xsl:value-of select="."/>"</code>
+    </xsl:template>
+    <xsl:template match="text()">
+            <p>
+                <xsl:value-of select="."/>
+            </p>
+    </xsl:template>
+</xsl:stylesheet>
+</body>
+</html>

package/storybook-static/html-template.xml

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+<head>
+    <meta charset="UTF-8"/>
+    <title>template based on HTML file</title>
+</head>
+<body>
+  <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"><defs><style>.cls-1{fill:#c2e6f1;}.cls-2{fill:#dcf1f7;}.cls-3{fill:#2d4554;}.cls-4{fill:#60cae5;}</style></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>
+  <xsl:stylesheet
+        id="embedded-xsl"
+        version="1.0"
+        xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+    <xsl:output
+        method="html"
+        omit-xml-declaration="yes"
+        standalone="yes"
+        indent="yes"
+    />
+
+    <xsl:template match="/">
+        <xsl:apply-templates select="*"/>
+    </xsl:template>
+    <xsl:template match="*">
+        <details style="padding:0 1rem" open="open">
+            <summary>
+                <b style="color:green"><xsl:value-of select="name()"/></b>
+                <xsl:apply-templates select="@*"/>
+            </summary>
+            <xsl:value-of select="./text()"/>
+            <xsl:apply-templates select="*"/>
+        </details>
+    </xsl:template>
+    <xsl:template match="@*">
+        <code style="margin-left:1rem;color:brown"><xsl:value-of select="name()"/>="<xsl:value-of select="."/>"</code>
+    </xsl:template>
+    <xsl:template match="text()">
+            <p>
+                <xsl:value-of select="."/>
+            </p>
+    </xsl:template>
+</xsl:stylesheet>
+</body>
+</html>