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

package/storybook-static/assets/{attributes.test.stories-D1X6EBrd.js → attributes.test.stories-DYuxF8h1.js}

@@ -1,60 +1,70 @@
-import{w as c,e as t,u as v}from"./index-CxRwF5Or.js";import{m as y,c as x}from"./custom-element-uuAtIYWS.js";function w(i){return new Promise(a=>setTimeout(a,i))}function f(i){const{title:a,body:e}=i;return`
+import{w as c,e as t,u as E}from"./index-CGuyH0k-.js";import{m as g,a as y,c as H}from"./custom-element-Bwx7otrT.js";function x(o){return new Promise(e=>setTimeout(e,o))}function T(o){const{title:e,body:a}=o;return`
         <fieldset>
-            <legend>${a}</legend>
-            ${e}
+            <legend>${e}</legend>
+            ${a}
         </fieldset>
-  `}const T={title:"attributes",render:f},r={args:{title:"cloneAs(el,newTag)",body:`
+  `}const I={title:"attributes",render:T};function n(o){const e=document.createElement("div");return e.innerHTML=o,e.firstElementChild}const u={args:{title:"cloneAs(el,newTag)",body:`
     <p><code>cloneAs()</code> used for conversion of <code>attribute</code> to <code>xsl:param</code></p>
     <attribute data-testid="t1" >default_P1                </attribute>
     <attribute data-testid="t2" select="'always_p2'"      ></attribute>
     <attribute data-testid="t3" ></attribute>
-`},play:async({canvasElement:i})=>{const a=c(i),e=async s=>{const o=await a.findByTestId(s),n=x(o,"xsl:param");for(let p of o.attributes)await t(p.value).toEqual(n.getAttribute(p.name));await t(n.textContent).toEqual(o.textContent)};await e("t1"),await e("t2"),await e("t3")}},u={args:{title:"mix(to,from)",body:`
+`},play:async({canvasElement:o})=>{const e=c(o),a=async i=>{const r=await e.findByTestId(i),d=H(r,"xsl:param");for(let p of r.attributes)await t(p.value).toEqual(d.getAttribute(p.name));await t(d.textContent).toEqual(r.textContent)};await a("t1"),await a("t2"),await a("t3")}},l={args:{title:"mix(to,from)",body:`
     <p><code>mix(to,from)</code> used for <code>attribute</code> collections</p>
-`},play:async()=>{await t(y({},{a:1,b:"2"})).toEqual({a:1,b:"2"})}},d={args:{title:"Attributes definition",body:`
+`},play:async()=>{await t(g({},{a:1,b:"2"})).toEqual({a:1,b:"2"})}},b={args:{title:"mergeAttr( from, to )",body:`
+    <p><code>mergeAttr( from, to )</code> used for <code>attribute</code> collections</p>
+`},play:async()=>{const o=n('<br title="a" id="b" readonly />'),e=n("<br removed/>");await t(e).toHaveAttribute("removed"),y(o,e),await t(e).toHaveAttribute("title","a"),await t(e).toHaveAttribute("id","b"),await t(e).toHaveAttribute("readonly"),await t(e.getAttributeNames().length).toEqual(3),await t(e).not.toHaveAttribute("removed")}},m={args:{title:"mergeAttr( from, to )",body:`
+    <p><code>mergeAttr( from, to )</code> used for <code>attribute</code> collections</p>
+    <p><code>dceExportedAttributes</code> property on target element defines the set of attributes which 
+    would not be removed from target element</p>
+`},play:async()=>{const o=n('<br id="b" readonly />'),e=n("<br removed/>");e.dceExportedAttributes=new Set(["enforced"]),e.setAttribute("enforced","defined by inner component"),await t(e).toHaveAttribute("enforced"),y(o,e),await t(e).toHaveAttribute("id","b"),await t(e).toHaveAttribute("readonly"),await t(e).not.toHaveAttribute("removed"),await t(e).toHaveAttribute("enforced","defined by inner component")}},w={args:{title:"mergeAttr( from, to )",body:`
+    <p><code>mergeAttr( from, to )</code> used for <code>attribute</code> collections</p>
+    <p><code>dce-exported-attributes</code> attribute on target element defines the space separated list of attributes which 
+    would not be removed from target element</p>
+`},play:async()=>{const o=n('<br id="b" readonly />'),e=n('<br removed dce-exported-attributes="enforced"/>');e.setAttribute("enforced","defined by inner component"),await t(e).toHaveAttribute("enforced"),y(o,e),await t(e).toHaveAttribute("id","b"),await t(e).toHaveAttribute("readonly"),await t(e).not.toHaveAttribute("removed"),await t(e).toHaveAttribute("enforced","defined by inner component")}},s={args:{title:"Attributes definition",body:`
     <p>Params needed to declare DCE attributes and track the attributes changes. It also is used by IDE and validation.</p>
     <custom-element tag="dce-link" >
         <template>
             <attribute name="p1">default_P1</attribute>
             <attribute name="p2" select="'always_p2'"      ></attribute>
-            <attribute name="p3" select="//p3 ?? 'def_P3' "></attribute>
+            <attribute name="p3" select="//attributes/@p3 ?? 'def_P3' "></attribute>
             p1: <code data-testid="p1">{$p1}</code> <br/>
             p2: <code data-testid="p2">{$p2}</code> <br/>
             p3: <code data-testid="p3">{$p3}</code>
         </template>
     </custom-element>
     <dce-link id="dce1"></dce-link>
-`},play:async({canvasElement:i})=>{d.args.title;const a=c(i);t(await await a.findByTestId("p1")).toHaveTextContent("default_P1"),t(await await a.findByTestId("p2")).toHaveTextContent("always_p2"),t(await await a.findByTestId("p3")).toHaveTextContent("def_P3")}},l={args:{title:"Attributes runtime change",body:`
+`},play:async({canvasElement:o})=>{const e=c(o);t(await await e.findByTestId("p1")).toHaveTextContent("default_P1"),t(await await e.findByTestId("p2")).toHaveTextContent("always_p2"),t(await await e.findByTestId("p3")).toHaveTextContent("def_P3")}},v={args:{title:"Attributes runtime change",body:`
     <p>Params needed to declare DCE attributes and track the attributes changes. It also be used by IDE and validation.</p>
     <custom-element tag="dce-link2" >
         <template>
             <attribute name="p1">default_P1                </attribute>
             <attribute name="p2" select="'always_p2'"      ></attribute>
-            <attribute name="p3" select="//p3 ?? 'def_P3' "></attribute>
+            <attribute name="p3" select="//attributes/@p3 ?? 'def_P3' "></attribute>
             p1: <code data-testid="t1">{$p1}</code> <br/>
             p2: <code data-testid="t2">{$p2}</code> <br/>
             p3: <code data-testid="t3">{$p3}</code>
         </template>
     </custom-element>
     <section>
-        <dce-link2  id="dce2" p1="123" p2="override ignored as select is defined"></dce-link2> <br>
+        <dce-link2  id="dce2" p1="123" p2="override ignored as select is defined"></dce-link2> <br/>
         <div><input id="i1" value="P1">  <button onclick="dce2.setAttribute('p1',i1.value)"> set p1</button> </div>
         <div><input id="i2" value="P2">  <button onclick="dce2.setAttribute('p2',i2.value)"> set p2</button> </div>
         <div><input id="i3" value="P3">  <button onclick="dce2.setAttribute('p3',i3.value)"> set p3</button> </div>
     </section>
-`},play:async({canvasElement:i})=>{const a=c(i),e=async o=>await a.findByTestId(o);await w(20),t(await e("t1")).toHaveTextContent("123"),t(await e("t2")).toHaveTextContent("always_p2"),t(await e("t3")).toHaveTextContent("def_P3");const s=window.dce2;s.setAttribute("P1",i1.value),await t(await a.findByText("P1")).toBeInTheDocument(),t(await e("t1")).toHaveTextContent("P1"),s.setAttribute("p2",i2.value),t(a.getByTestId("t2")).toHaveTextContent("always_p2"),s.setAttribute("p3",i3.value),await t(await a.findByText("P3")).toBeInTheDocument(),t(a.getByTestId("t3")).toHaveTextContent("P3")}},b={args:{title:"Instance Attributes",body:`
+`},play:async({canvasElement:o})=>{const e=c(o),a=async r=>await e.findByTestId(r);await x(20),t(await a("t1")).toHaveTextContent("123"),t(await a("t2")).toHaveTextContent("always_p2"),t(await a("t3")).toHaveTextContent("def_P3");const i=window.dce2;i.setAttribute("P1",i1.value),await t(await e.findByText("P1")).toBeInTheDocument(),t(await a("t1")).toHaveTextContent("P1"),i.setAttribute("p2",i2.value),t(e.getByTestId("t2")).toHaveTextContent("always_p2"),i.setAttribute("p3",i3.value),await t(await e.findByText("P3")).toBeInTheDocument(),t(e.getByTestId("t3")).toHaveTextContent("P3")}},f={args:{title:"Instance Attributes",body:`
     <p>Params needed to declare DCE attributes and track the attributes changes. It also is used by IDE and validation.</p>
     <custom-element tag="dce-link3" >
         <template>
             <attribute name="p1">default_P1                </attribute>
             <attribute name="p2" select="'always_p2'"      ></attribute>
-            <attribute name="p3" select="//p3 ?? 'def_P3' "></attribute>
+            <attribute name="p3" select="//attributes/p3 ?? 'def_P3' "></attribute>
             p1: <code data-testid="p1">{$p1}</code> <br/>
             p2: <code data-testid="p2">{$p2}</code> <br/>
             p3: <code data-testid="p3">{$p3}</code>
         </template>
     </custom-element>
     <dce-link3 id="dce3" p1="123" p3="qwe"></dce-link3> |
-`},play:async({canvasElement:i})=>{d.args.title;const a=c(i),e=async s=>(await a.findByTestId(s)).textContent.trim();await w(20),t(await e("p1")).toEqual("123"),t(await e("p2")).toEqual("always_p2"),t(await e("p3")).toEqual("qwe")}},m={args:{title:"Instance Attributes",body:`
+`},play:async({canvasElement:o})=>{s.args.title;const e=c(o),a=async i=>(await e.findByTestId(i)).textContent.trim();await x(200),t(await a("p1")).toEqual("123"),t(await a("p2")).toEqual("always_p2"),t(await a("p3")).toEqual("qwe")}},A={args:{title:"Instance Attributes",body:`
     <p>Attributes with value(p2) or <code>select</code>(p3) should be propagated to DCE</p>
     <p>p1 attribute is not propagated as does not have the value.</p>
     <custom-element tag="sample-el">
@@ -62,11 +72,11 @@ import{w as c,e as t,u as v}from"./index-CxRwF5Or.js";import{m as y,c as x}from"
         <attribute name="data-testid"></attribute>
         <attribute name="p1"></attribute>
         <attribute name="p2">DEFAULT VALUE</attribute>
-        <attribute name="p3" select=" //from-input ?? 'abc' "></attribute>
+        <attribute name="p3" select=" //from-input "></attribute>
         <input slice="from-input" slice-event="input"/><br/>
         p1:<code data-testid="{$data-testid}-p1" >{ $p1 }</code><br/>
         p2:<code data-testid="{$data-testid}-p2" >{ $p2 }</code><br/>
-        p2:<code data-testid="{$data-testid}-p3" >{ $p3 }</code><br/>  
+        p3:<code data-testid="{$data-testid}-p3" >{ $p3 }</code><br/>  
         //from-input: {//from-input}      <hr/>
     </template>
 </custom-element>
@@ -74,7 +84,7 @@ import{w as c,e as t,u as v}from"./index-CxRwF5Or.js";import{m as y,c as x}from"
 <sample-el data-testid="t1" value="123"                 ></sample-el>
 <sample-el data-testid="t2" p1="P1" p2="123" p3="P3"    ></sample-el>
 <sample-el data-testid="t3"                             ></sample-el>
-`},play:async({canvasElement:i})=>{const a=c(i),e=async p=>(await a.findByTestId(p)).textContent?.trim();await w(20),await t(await e("t1-p1")).toEqual(""),await t(await e("t1-p2")).toEqual("DEFAULT VALUE"),await t(await e("t1-p3")).toEqual("abc");const s=await a.findByTestId("t1");await t(s).toHaveAttribute("value","123"),await t(s).toHaveAttribute("p2","DEFAULT VALUE"),await t(s).toHaveAttribute("p3","abc"),await t(s).not.toHaveAttribute("p1"),await t(await e("t2-p1")).toEqual("P1"),await t(await e("t2-p2")).toEqual("123"),await t(await e("t2-p3")).toEqual("abc");const o=await a.findByTestId("t2");await t(o).toHaveAttribute("p1","P1"),await t(o).toHaveAttribute("p2","123"),await t(o).toHaveAttribute("p3","abc"),await t(await e("t3-p1")).toEqual(""),await t(await e("t3-p2")).toEqual("DEFAULT VALUE"),await t(await e("t3-p3")).toEqual("abc");const n=await a.findByTestId("t3");await t(s).not.toHaveAttribute("p1"),await t(n).toHaveAttribute("p2","DEFAULT VALUE"),await t(n).toHaveAttribute("p3","abc"),n.querySelector("input")?.focus(),await v.keyboard("DCE"),await t(n).toHaveAttribute("p3","DCE")}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+`},play:async({canvasElement:o})=>{const e=c(o),a=async p=>(await e.findByTestId(p)).textContent?.trim();await x(20),await t(await a("t1-p1")).toEqual(""),await t(await a("t1-p2")).toEqual("DEFAULT VALUE"),await t(await a("t1-p3")).toEqual("");const i=await e.findByTestId("t1");await t(i).toHaveAttribute("value","123"),await t(i).toHaveAttribute("p2","DEFAULT VALUE"),await t(i).toHaveAttribute("p3",""),await t(i).not.toHaveAttribute("p1"),await t(await a("t2-p1")).toEqual("P1"),await t(await a("t2-p2")).toEqual("123"),await t(await a("t2-p3")).toEqual("");const r=await e.findByTestId("t2");await t(r).toHaveAttribute("p1","P1"),await t(r).toHaveAttribute("p2","123"),await t(r).toHaveAttribute("p3",""),await t(await a("t3-p1")).toEqual(""),await t(await a("t3-p2")).toEqual("DEFAULT VALUE"),await t(await a("t3-p3")).toEqual("");const d=await e.findByTestId("t3");await t(i).not.toHaveAttribute("p1"),await t(d).toHaveAttribute("p2","DEFAULT VALUE"),await t(d).toHaveAttribute("p3",""),d.querySelector("input")?.focus(),await E.keyboard("DCE"),await t(d).toHaveAttribute("p3","DCE")}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
   args: {
     title: 'cloneAs(el,newTag)',
     body: \`
@@ -100,7 +110,7 @@ import{w as c,e as t,u as v}from"./index-CxRwF5Or.js";import{m as y,c as x}from"
     await cmp('t2');
     await cmp('t3');
   }
-}`,...r.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+}`,...u.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
   args: {
     title: 'mix(to,from)',
     body: \`
@@ -116,7 +126,70 @@ import{w as c,e as t,u as v}from"./index-CxRwF5Or.js";import{m as y,c as x}from"
       b: '2'
     });
   }
-}`,...u.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+}`,...l.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'mergeAttr( from, to )',
+    body: \`
+    <p><code>mergeAttr( from, to )</code> used for <code>attribute</code> collections</p>
+\`
+  },
+  play: async () => {
+    const from = html2Element('<br title="a" id="b" readonly />');
+    const to = html2Element('<br removed/>');
+    await expect(to).toHaveAttribute('removed');
+    mergeAttr(from!, to);
+    await expect(to).toHaveAttribute('title', 'a');
+    await expect(to).toHaveAttribute('id', 'b');
+    await expect(to).toHaveAttribute('readonly');
+    await expect(to.getAttributeNames().length).toEqual(3);
+    await expect(to).not.toHaveAttribute('removed');
+  }
+}`,...b.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'mergeAttr( from, to )',
+    body: \`
+    <p><code>mergeAttr( from, to )</code> used for <code>attribute</code> collections</p>
+    <p><code>dceExportedAttributes</code> property on target element defines the set of attributes which 
+    would not be removed from target element</p>
+\`
+  },
+  play: async () => {
+    const from = html2Element('<br id="b" readonly />');
+    const to = html2Element('<br removed/>') as (HTMLElement & {
+      dceExportedAttributes: Set<string>;
+    });
+    to.dceExportedAttributes = new Set(['enforced']);
+    to.setAttribute('enforced', "defined by inner component");
+    await expect(to).toHaveAttribute('enforced');
+    mergeAttr(from, to);
+    await expect(to).toHaveAttribute('id', 'b');
+    await expect(to).toHaveAttribute('readonly');
+    await expect(to).not.toHaveAttribute('removed');
+    await expect(to).toHaveAttribute('enforced', "defined by inner component");
+  }
+}`,...m.parameters?.docs?.source}}};w.parameters={...w.parameters,docs:{...w.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'mergeAttr( from, to )',
+    body: \`
+    <p><code>mergeAttr( from, to )</code> used for <code>attribute</code> collections</p>
+    <p><code>dce-exported-attributes</code> attribute on target element defines the space separated list of attributes which 
+    would not be removed from target element</p>
+\`
+  },
+  play: async () => {
+    const from = html2Element('<br id="b" readonly />');
+    const to = html2Element('<br removed dce-exported-attributes="enforced"/>') as (HTMLElement & {
+      dceExportedAttributes: Set<string>;
+    });
+    to.setAttribute('enforced', "defined by inner component");
+    await expect(to).toHaveAttribute('enforced');
+    mergeAttr(from, to);
+    await expect(to).toHaveAttribute('id', 'b');
+    await expect(to).toHaveAttribute('readonly');
+    await expect(to).not.toHaveAttribute('removed');
+    await expect(to).toHaveAttribute('enforced', "defined by inner component");
+  }
+}`,...w.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
   args: {
     title: 'Attributes definition',
     body: \`
@@ -125,7 +198,7 @@ import{w as c,e as t,u as v}from"./index-CxRwF5Or.js";import{m as y,c as x}from"
         <template>
             <attribute name="p1">default_P1</attribute>
             <attribute name="p2" select="'always_p2'"      ></attribute>
-            <attribute name="p3" select="//p3 ?? 'def_P3' "></attribute>
+            <attribute name="p3" select="//attributes/@p3 ?? 'def_P3' "></attribute>
             p1: <code data-testid="p1">{$p1}</code> <br/>
             p2: <code data-testid="p2">{$p2}</code> <br/>
             p3: <code data-testid="p3">{$p3}</code>
@@ -137,14 +210,12 @@ import{w as c,e as t,u as v}from"./index-CxRwF5Or.js";import{m as y,c as x}from"
   play: async ({
     canvasElement
   }) => {
-    const titleText = AttributeDefaults.args!.title as string;
-    const canvas = within(canvasElement),
-      code = async id => (await canvas.findByTestId(id)).textContent.trim();
+    const canvas = within(canvasElement);
     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');
   }
-}`,...d.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+}`,...s.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
   args: {
     title: 'Attributes runtime change',
     body: \`
@@ -153,14 +224,14 @@ import{w as c,e as t,u as v}from"./index-CxRwF5Or.js";import{m as y,c as x}from"
         <template>
             <attribute name="p1">default_P1                </attribute>
             <attribute name="p2" select="'always_p2'"      ></attribute>
-            <attribute name="p3" select="//p3 ?? 'def_P3' "></attribute>
+            <attribute name="p3" select="//attributes/@p3 ?? 'def_P3' "></attribute>
             p1: <code data-testid="t1">{$p1}</code> <br/>
             p2: <code data-testid="t2">{$p2}</code> <br/>
             p3: <code data-testid="t3">{$p3}</code>
         </template>
     </custom-element>
     <section>
-        <dce-link2  id="dce2" p1="123" p2="override ignored as select is defined"></dce-link2> <br>
+        <dce-link2  id="dce2" p1="123" p2="override ignored as select is defined"></dce-link2> <br/>
         <div><input id="i1" value="P1">  <button onclick="dce2.setAttribute('p1',i1.value)"> set p1</button> </div>
         <div><input id="i2" value="P2">  <button onclick="dce2.setAttribute('p2',i2.value)"> set p2</button> </div>
         <div><input id="i3" value="P3">  <button onclick="dce2.setAttribute('p3',i3.value)"> set p3</button> </div>
@@ -189,7 +260,7 @@ import{w as c,e as t,u as v}from"./index-CxRwF5Or.js";import{m as y,c as x}from"
     await expect(await canvas.findByText('P3')).toBeInTheDocument();
     expect(canvas.getByTestId('t3')).toHaveTextContent('P3'); // set p3 in runtime
   }
-}`,...l.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+}`,...v.parameters?.docs?.source}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
   args: {
     title: 'Instance Attributes',
     body: \`
@@ -198,7 +269,7 @@ import{w as c,e as t,u as v}from"./index-CxRwF5Or.js";import{m as y,c as x}from"
         <template>
             <attribute name="p1">default_P1                </attribute>
             <attribute name="p2" select="'always_p2'"      ></attribute>
-            <attribute name="p3" select="//p3 ?? 'def_P3' "></attribute>
+            <attribute name="p3" select="//attributes/p3 ?? 'def_P3' "></attribute>
             p1: <code data-testid="p1">{$p1}</code> <br/>
             p2: <code data-testid="p2">{$p2}</code> <br/>
             p3: <code data-testid="p3">{$p3}</code>
@@ -213,12 +284,12 @@ import{w as c,e as t,u as v}from"./index-CxRwF5Or.js";import{m as y,c as x}from"
     const titleText = AttributeDefaults.args!.title as string;
     const canvas = within(canvasElement),
       code = async id => (await canvas.findByTestId(id)).textContent.trim();
-    await sleep(20);
+    await sleep(200);
     expect(await code('p1')).toEqual('123');
     expect(await code('p2')).toEqual('always_p2');
     expect(await code('p3')).toEqual('qwe');
   }
-}`,...b.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+}`,...f.parameters?.docs?.source}}};A.parameters={...A.parameters,docs:{...A.parameters?.docs,source:{originalSource:`{
   args: {
     title: 'Instance Attributes',
     body: \`
@@ -229,11 +300,11 @@ import{w as c,e as t,u as v}from"./index-CxRwF5Or.js";import{m as y,c as x}from"
         <attribute name="data-testid"></attribute>
         <attribute name="p1"></attribute>
         <attribute name="p2">DEFAULT VALUE</attribute>
-        <attribute name="p3" select=" //from-input ?? 'abc' "></attribute>
+        <attribute name="p3" select=" //from-input "></attribute>
         <input slice="from-input" slice-event="input"/><br/>
         p1:<code data-testid="{$data-testid}-p1" >{ $p1 }</code><br/>
         p2:<code data-testid="{$data-testid}-p2" >{ $p2 }</code><br/>
-        p2:<code data-testid="{$data-testid}-p3" >{ $p3 }</code><br/>  
+        p3:<code data-testid="{$data-testid}-p3" >{ $p3 }</code><br/>  
         //from-input: {//from-input}      <hr/>
     </template>
 </custom-element>
@@ -251,28 +322,28 @@ import{w as c,e as t,u as v}from"./index-CxRwF5Or.js";import{m as y,c as x}from"
     await sleep(20);
     await expect(await code('t1-p1')).toEqual('');
     await expect(await code('t1-p2')).toEqual('DEFAULT VALUE');
-    await expect(await code('t1-p3')).toEqual('abc');
+    await expect(await code('t1-p3')).toEqual('');
     const t1 = await canvas.findByTestId('t1');
     await expect(t1).toHaveAttribute('value', '123');
     await expect(t1).toHaveAttribute('p2', 'DEFAULT VALUE');
-    await expect(t1).toHaveAttribute('p3', 'abc');
+    await expect(t1).toHaveAttribute('p3', '');
     await expect(t1).not.toHaveAttribute('p1');
     await expect(await code('t2-p1')).toEqual('P1');
     await expect(await code('t2-p2')).toEqual('123');
-    await expect(await code('t2-p3')).toEqual('abc');
+    await expect(await code('t2-p3')).toEqual('');
     const t2 = await canvas.findByTestId('t2');
     await expect(t2).toHaveAttribute('p1', 'P1');
     await expect(t2).toHaveAttribute('p2', '123');
-    await expect(t2).toHaveAttribute('p3', 'abc');
+    await expect(t2).toHaveAttribute('p3', '');
     await expect(await code('t3-p1')).toEqual('');
     await expect(await code('t3-p2')).toEqual('DEFAULT VALUE');
-    await expect(await code('t3-p3')).toEqual('abc');
+    await expect(await code('t3-p3')).toEqual('');
     const t3 = await canvas.findByTestId('t3');
     await expect(t1).not.toHaveAttribute('p1');
     await expect(t3).toHaveAttribute('p2', 'DEFAULT VALUE');
-    await expect(t3).toHaveAttribute('p3', 'abc');
+    await expect(t3).toHaveAttribute('p3', '');
     t3.querySelector('input')?.focus();
     await userEvent.keyboard('DCE');
     await expect(t3).toHaveAttribute('p3', 'DCE');
   }
-}`,...m.parameters?.docs?.source}}};const g=["CloneAs","Mix","AttributeDefaults","AttributesRuntimeChange","InstanceAttributes","AttributesPropagationUp"];export{d as AttributeDefaults,m as AttributesPropagationUp,l as AttributesRuntimeChange,r as CloneAs,b as InstanceAttributes,u as Mix,g as __namedExportsOrder,T as default};
+}`,...A.parameters?.docs?.source}}};const C=["CloneAs","Mix","MergeAttr","dceExportedAttributes","dceExportedAttributes_attr","AttributeDefaults","AttributesRuntimeChange","InstanceAttributes","AttributesPropagationUp"];export{s as AttributeDefaults,A as AttributesPropagationUp,v as AttributesRuntimeChange,u as CloneAs,f as InstanceAttributes,b as MergeAttr,l as Mix,C as __namedExportsOrder,m as dceExportedAttributes,w as dceExportedAttributes_attr,I as default};

package/storybook-static/assets/{css.test.stories-Cp_g2hE1.js → css.test.stories-LOmvINyb.js}

@@ -1,4 +1,4 @@
-import{w as i,e as t}from"./index-CxRwF5Or.js";import"./custom-element-uuAtIYWS.js";const g={title:"",tag:"",style:"",slot:"",payload:""};function p(n){const{title:e,tag:o,style:s,slot:a,payload:l}={...g,...n};return`
+import{w as i,e as t}from"./index-CGuyH0k-.js";import"./custom-element-Bwx7otrT.js";const g={title:"",tag:"",style:"",slot:"",payload:""};function p(n){const{title:e,tag:o,style:s,slot:a,payload:l}={...g,...n};return`
         <fieldset>
             <legend>${e}</legend>
             <custom-element ${o?`tag="${o}"`:""} >

package/storybook-static/assets/custom-element-Bwx7otrT.js

@@ -0,0 +1,97 @@
+const K="http://www.w3.org/1999/XSL/Transform",R="http://www.w3.org/1999/xhtml",ye="http://exslt.org/common",d=(e,l)=>e?.getAttribute?.(l),se=e=>e.nodeType===3,ge=e=>typeof e=="string",le=e=>e&&typeof e.nodeType=="number",L=(e,l)=>(e.ownerDocument||e).createTextNode(l),ce=e=>{for(;e.firstChild;)e.firstChild.remove();return e},F=e=>(e.getAttributeNames().map(l=>e.removeAttribute(l)),ce(e)),me=e=>(e?.setAttribute("xmlns:xsl",K),e),ue=e=>(e?.setAttribute("xmlns:xhtml",R),me(e)),de=e=>/^[_a-zA-Z][-_:a-zA-Z0-9]*$/.test(e),ne=(e,l)=>(Object.keys(l).map(t=>e[t]=l[t]),e),C=(e,l="",t=document)=>{const s=n=>(o=>(l&&o.append(L(t.ownerDocument||t,l)),o))((t.ownerDocument||t).createElement(n));if(de(e))return s(e);const a=s("dce-object");return a.setAttribute("dce-object-name",e),a},ae=(e,l)=>{const t=e.ownerDocument.createElementNS(e.namespaceURI,l);for(let s of e.attributes)t.setAttribute(s.name,s.value);for(let s of e.childNodes)t.append(s.cloneNode(!0));return t};function O(e){return new DOMParser().parseFromString(e,"application/xml")}function q(e){return new XMLSerializer().serializeToString(e)}function B(e,l,t,s){const a=y=>e.ownerDocument.createElement(y),o=((y,x,v)=>(x.append(v=a(y)),v))(l,e);return[...t].forEach(y=>o.append(s(y))),o}function Ae(e){return e.slot||(e.setAttribute||(e=C("span",e.textContent.replaceAll(`
+`,""))),e.setAttribute("slot","")),e}function J(e,l){e.getAttributeNames().forEach(t=>l.includes(t)||e.removeAttribute(t))}const ie=e=>[...e].filter(l=>!(l.nodeType===3&&l.data.trim()===""));function I(e,l,t){const s=typeof e;if(s==="string")return C(l,e,t);if(s==="number")return C(l,""+e,t);if(le(e)){const n=C(l);return n.append(e),n}if(e instanceof Array){const n=C("array","",t);return e.map(o=>n.append(I(o,l,t))),n}if(e instanceof FormData){const n=C("form-data","",t);for(const o of e)n.append(I(o[1],o[0],t));return n}const a=C(l,"",t);for(let n in e)typeof e[n]=="function"||e[n]instanceof Window||le(e[n])&&!(n==="data"||n==="value")||(typeof e[n]!="object"&&de(n)?a.setAttribute(n,e[n]):a.append(I(e[n],n,t)));return a}function re(e){if(j(e,"*",l=>[...l.childNodes].filter(t=>t.nodeType===3&&t.parentNode.localName!=="style"&&t.data).forEach(t=>{const s=t.data,a=s.matchAll(/{([^}]*)}/g);if(a){let n=0,o=x=>L(t,x),y=[];if([...a].forEach(x=>{x.index>n&&y.push(o(x.input.substring(n,x.index)));const v=e.querySelector("value-of").cloneNode();v.setAttribute("select",x[1]),y.push(v),n=x.index+x[0].length}),n<s.length&&y.push(o(s.substring(n,s.length))),y.length){for(let x of y)l.insertBefore(x,t);l.removeChild(t)}}})),"all"in e){let l=1;for(let t of e.all)t.setAttribute&&!t.tagName.startsWith("xsl:")&&t.setAttribute("data-dce-id",""+l++)}return e}function ve(e,l="xsl:stylesheet"){const t=[],s={},a={};if(e.tagName===l||e.documentElement?.tagName===l)return re(ne(e,{declaredAttributes:t,hardcodedAttributes:s,exposedAttributes:a}));const n=O(`<xsl:stylesheet version="1.0" xmlns:xsl="${K}" xmlns:xhtml="${R}" xmlns:exsl="${ye}" exclude-result-prefixes="exsl" >
+    <xsl:output method="xml"/>
+        <xsl:template match="/"><dce-root xmlns="${R}"><xsl:apply-templates select="*" /></dce-root></xsl:template>
+    <xsl:template match="*[name()='template']">
+        <xsl:apply-templates mode="sanitize" select="*|text()"/>
+    </xsl:template>
+    <xsl:template match="*">
+        <xsl:apply-templates mode="sanitize" select="*|text()"/>
+    </xsl:template>
+    <xsl:template match="*[name()='svg']|*[name()='math']">
+        <xsl:apply-templates mode="sanitize" select="."/>
+    </xsl:template>
+    <xsl:template mode="sanitize" match="*[count(text())=1 and count(*)=0]">
+        <xsl:copy>
+            <xsl:apply-templates mode="sanitize" select="@*"/>
+            <xsl:value-of select="text()"></xsl:value-of>
+        </xsl:copy>
+    </xsl:template>
+    <xsl:template mode="sanitize" match="xhtml:*[count(text())=1 and count(*)=0]">
+        <xsl:element name="{local-name()}">
+            <xsl:apply-templates mode="sanitize" select="@*"/>
+            <xsl:value-of select="text()"></xsl:value-of>
+        </xsl:element>
+    </xsl:template>
+    <xsl:template mode="sanitize" match="*|@*">
+        <xsl:copy>
+            <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
+        </xsl:copy>
+    </xsl:template>
+    <xsl:template mode="sanitize" match="text()[normalize-space(.) = '']"/>
+    <xsl:template mode="sanitize" match="text()">
+        <dce-text>
+            <xsl:copy/>
+        </dce-text>
+    </xsl:template>
+    <xsl:template mode="sanitize" match="xsl:value-of|*[name()='slot']">
+        <xsl:copy>
+            <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
+        </xsl:copy>
+    </xsl:template>
+    <xsl:template mode="sanitize" match="xhtml:*">
+        <xsl:element name="{local-name()}">
+            <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
+        </xsl:element>
+    </xsl:template>
+    <xsl:template mode="sanitize" match="xhtml:input">
+        <xsl:element name="{local-name()}">
+            <xsl:apply-templates mode="sanitize" select="*[not(name()='slice')]|@*|text()"/>
+        </xsl:element>
+        <xsl:for-each select="slice">
+            <xsl:copy>
+                <xsl:attribute name="for" >^</xsl:attribute>
+                <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
+            </xsl:copy>
+        </xsl:for-each>
+    </xsl:template>
+</xsl:stylesheet>`),o=new XSLTProcessor,y=(i=>{j(i,"custom-element",f=>{f.firstElementChild.localName==="template"&&([...f.firstElementChild.content.childNodes].forEach(b=>f.append(b)),f.firstElementChild.remove())}),j(i,"script",f=>f.remove());const r=i.content??i.firstElementChild?.content??i.body??i;$e.forEach(f=>j(r,f,b=>Le(b,r)));const h=i.firstElementChild?.content||i.content,g=f=>{const b=O("<xhtml/>"),T=b.importNode(f,!0);return b.replaceChild(T,b.documentElement),T.namespaceURI===R&&!d(T,"xmlns")&&T.setAttribute("xmlns",R),ue(T)};if(h){const f=C("div");return[...h.childNodes].map(b=>f.append(b.cloneNode(!0))),g(f)}return g(i.documentElement||i.body||i)})(e),x=O(`<xsl:stylesheet version="1.0"
+        xmlns:xsl="${K}"
+        xmlns:xhtml="${R}"
+        xmlns:dce="urn:schemas-epa-wg:dce"
+        xmlns:exsl="http://exslt.org/common"
+        exclude-result-prefixes="exsl"
+    >
+    <xsl:template match="ignore">
+        <xsl:choose>
+            <xsl:when test="//attr">{//attr}</xsl:when>
+            <xsl:otherwise>{def}</xsl:otherwise>
+        </xsl:choose><xsl:value-of select="."></xsl:value-of></xsl:template>
+    <xsl:template mode="payload"  match="attributes"></xsl:template>
+    <xsl:template match="/">
+        <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
+    </xsl:template>
+    <xsl:template name="slot" >
+        <xsl:param name="slotname" />
+        <xsl:param name="defaultvalue" />
+        <xsl:choose>
+            <xsl:when test="//payload/*[@slot=$slotname]">
+               <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
+            </xsl:when>
+            <xsl:otherwise>
+                <xsl:copy-of select="$defaultvalue"/>
+            </xsl:otherwise>
+        </xsl:choose>
+    </xsl:template>
+    <xsl:variable name="js-injected-body">
+        <xsl:call-template name="slot" >
+            <xsl:with-param name="slotname" select="''"/>
+            <xsl:with-param name="defaultvalue"/>
+        </xsl:call-template>
+    </xsl:variable>
+</xsl:stylesheet>`);o.importStylesheet(n);const v=o.transformToFragment(y,document),u=(i,r)=>i.querySelector(r),w=u(x,'template[mode="payload"]');if(!v)return console.error("transformation error",{xml:y.outerHTML,xsl:q(n)});if(v.firstElementChild.localName!=="dce-root"){const i=v.ownerDocument.createElement("dce-root");[...v.childNodes].forEach(r=>i.append(r)),v.append(i)}[...v.querySelectorAll("[test]")].forEach(i=>{const r=d(i,"test"),h=r.replace(/hasBoolAttribute\((.*?)\)/g,(g,f,b,T,M)=>{const D=f.substring(1);return`(not($${D} = 'false') and ($${D} = '' or $${D} = '${D}' or $${D} = 'true' ))`});r!==h&&i.setAttribute("test",h)}),[...v.querySelectorAll("dce-root>attribute")].forEach(i=>{J(i,"namespace,name,select");const r=ae(i,"xsl:param"),h=d(i,"name");if(t.push(h),i.childNodes.length&&(s[h]=i.textContent),w.append(r),i.hasAttribute("select")){a[h]=d(i,"select"),J(r,"select,name");let g=d(i,"select").split("??"),f;if(g?.length>1){r.removeAttribute("select");const b=u(x,'template[match="ignore"]>choose').cloneNode(!0);F(b.firstElementChild).append(L(b,"{"+g[0]+"}")),b.firstElementChild.setAttribute("test",g[0]);for(let T=1;T<g.length-1;T++){const M=b.firstElementChild.cloneNode(!0);F(M).append(L(b,"{"+g[T]+"}")),M.setAttribute("test",g[T]),b.insertBefore(M,b.lastElementChild)}F(b.lastElementChild).append(L(b,"{"+g[g.length-1]+"}")),r.append(b),f=b.cloneNode(!0)}else f=ae(i,"xsl:value-of");f.removeAttribute("name"),i.append(f),i.removeAttribute("select")}else J(r,"name"),r.setAttribute("select","/datadom/attributes/"+h),s[h]||i.remove()}),[...v.querySelectorAll("[value]")].filter(i=>i.getAttribute("value").match(/\{(.*)\?\?(.*)\}/g)).forEach(i=>{const r=d(i,"value");r&&i.setAttribute("value",Ce(r))});for(const i of v.childNodes)w.append(x.importNode(i,!0));[...w.getElementsByTagName("xsl:template")].forEach(i=>w.ownerDocument.documentElement.append(i));const k=u(x,'call-template[name="slot"]'),H=i=>{const r=k.cloneNode(!0),h=d(i,"name");h&&r.firstElementChild.setAttribute("select",`'${h}'`);for(let g of i.childNodes)r.lastElementChild.append(g);return r};j(w,"slot",i=>i.parentNode.replaceChild(H(i),i));const p=re(x);return ne(p,{declaredAttributes:t,hardcodedAttributes:s,exposedAttributes:a}),p}async function Ee(e){return await new Promise((t,s)=>{const a=new XMLHttpRequest;a.open("GET",e),a.responseType="document",a.onload=()=>{a.readyState===a.DONE&&a.status===200?t(a.responseXML?.body||a.responseXML||C("div",a.responseText)):s(`${a.statusText} - ${e}`)},a.addEventListener("error",n=>s(n)),a.send()})}const pe=e=>e.split("|").map(l=>l.trim()).filter(l=>l),Ne=(e,l)=>pe(l).map(t=>{let s=e.ownerDocument,a=n=>(e.append(n),n);if(t.includes("/")){const n=[],o=s.evaluate(t,e);for(let y;y=o.iterateNext();)n.push(y);return n}return[...e.childNodes].find(n=>n.localName===t)||a(C(t,"",s))}).flat();function oe(e,l,t,s){if(!t.sliceProcessed)return t.sliceProcessed=1,Ne(e,l??"").map(a=>{const n=e.ownerDocument,o=t.sliceEventSource,y=t.sliceElement,x=()=>[...a.childNodes].filter(u=>u.nodeType===3||u.localName==="value"||u.localName==="form-data").map(u=>u.remove());o.getAttributeNames().map(u=>a.setAttribute(u,d(o,u))),[...a.childNodes].filter(u=>u.localName==="event").map(u=>u.remove()),"validationMessage"in o&&a.setAttribute("validation-message",o.validationMessage),t.type==="init"&&x(),a.append(I(t,"event",n));const v=(o.type==="checkbox"||o.type==="radio")&&!o.checked;if(y.hasAttribute("slice-value")){o.value===void 0?a.removeAttribute("value"):a.setAttribute("value",o.value);const u=v?"":P(d(y,"slice-value"),a);x(),a.append(L(n,u))}else{if("elements"in o)return x(),a.append(I(new FormData(o),"value",a.ownerDocument)),a;const u=v?"":o.value??d(o,"value");if(x(),u==null)[...a.childNodes].filter(w=>w.localName!=="event").map(w=>w.remove()),a.removeAttribute("value");else{const w=ge(u)?L(n,u):I(u,"value",a.ownerDocument);a.append(w),a.setAttribute("value",u)}}return a})}function j(e,l,t){e.querySelectorAll&&[...e.querySelectorAll(l)].forEach(t)}const we=async(e,l)=>{if(!e||!e.trim())return[l];if(e.startsWith("#"))return(t=>{const s=t.querySelectorAll(e);return[...s.length?s:t.getRootNode().querySelectorAll(e)]})(l.parentElement);try{const[t,s]=e.split("#");if(e.charAt(0)===".")e=new URL(t,l.closest("[base]")?.getAttribute("base")||location).href;else try{e=import.meta.resolve(t),s&&(e+="#"+s)}catch(n){console.error(n.message)}const a=await Ee(e);if(l.setAttributeNS("xml","base",e),s){const n=a.querySelectorAll("#"+s);return n.length?[...n]:(console.error("template not found",e+"#"+s),[l])}return[a]}catch{return[l]}};function he(e,l){for(let n of e.attributes)try{const o=n.name;if(o.startsWith("xmlns"))continue;n.namespaceURI?(!l.hasAttributeNS(n.namespaceURI,o)||l.getAttributeNS(n.namespaceURI,o)!==n.value)&&l.setAttributeNS(n.namespaceURI,o,n.value):(!l.hasAttribute(o)||l.getAttribute(o)!==n.value)&&l.setAttribute(n.name,n.value),n.name==="value"&&(l.value=n.value)}catch(o){console.warn("attribute assignment error",o?.message||o)}const t=l.dceExportedAttributes,s=l.getAttribute("dce-exported-attributes"),a=s?new Set(s.split(" ")):null;for(let n of l.getAttributeNames())!e.hasAttribute(n)&&!t?.has(n)&&!a?.has(n)&&l.removeAttribute(n)}function fe(e,l=0){const t={};for(const s of e.childNodes){const a=d(s,"data-dce-id")||s.dceId||0;if(!t[a])a?t[a]=1:(t[a]=s.dceId=++l,s.setAttribute&&s.setAttribute("data-dce-id",s.dceId));else{const n=s.dceId=a+"-"+t[a]++;s.setAttribute&&s.setAttribute("data-dce-id",n)}s.childNodes.length&&fe(s)}}function Te(e,l,t){t=1*t;for(let s of e.childNodes)if((s.dceId??s.getAttribute("data-dce-id")*1)>t)return e.insertBefore(l,s);e.append(l)}function xe(e,l){if(e.firstElementChild?.localName==="dce-root"&&l[0]?.localName!=="dce-root")return;if(!l.length)return e.firstElementChild?.localName!=="dce-root"&&ce(e);const t={};for(let s of e.childNodes)t[s.dceId],se(s)?(s.data.trim(),t[s.dceId||0]=s):t[d(s,"data-dce-id")||0]=s;for(let s of[...l]){const a=d(s,"data-dce-id")||s.dceId,n=t[a];n?(se(s)?n.nodeValue!==s.nodeValue&&(n.nodeValue=s.nodeValue):(he(s,n),(n.childNodes.length||s.childNodes.length)&&xe(n,s.childNodes)),delete t[a]):Te(e,s,a)}for(let s of Object.values(t))s.localName!=="dce-root"&&s.remove()}function Se(e,l){return e.hasAttribute(l)||e.setAttribute(l,crypto.randomUUID()),e.getAttribute(l)}const Ce=e=>[...e?.matchAll(/([^{}]*)(\{)([^}]+)}([^{}]*)/g)].map(t=>`${t[1]}{${Q(t[3])}}${t[4]}`).join(""),Q=e=>{if(!e.trim())return e;const l=e.split("??"),t=l.shift(),s=Q(l.join("??"));return l.length?`concat( ${t} , substring( ${s} , (1+string-length( ${s} )) * string-length( ${t} ) ) )`:e},P=(e,l)=>{const t=e.split("??");if(t.length>1)return P(t[0],l)||P(t[1],l);e=Q(e);const s=l.ownerDocument.evaluate(e,l);switch(s.resultType){case XPathResult.NUMBER_TYPE:return s.numberValue;case XPathResult.STRING_TYPE:return s.stringValue;case XPathResult.BOOLEAN_TYPE:return s.booleanValue}let a="";for(let n;n=s.iterateNext();)a+=n.textContent;return a},$e="stylesheet,transform,import,include,strip-space,preserve-space,output,key,decimal-format,namespace-alias,value-of,copy-of,number,apply-templates,apply-imports,for-each,sort,if,choose,when,otherwise,attribute-set,call-template,with-param,variable,param,text,processing-instruction,element,attribute,comment,copy,message,fallback".split(","),Le=(e,l)=>{const t=C("xsl:"+e.localName);for(let a of e.attributes)t.setAttribute(a.name,a.value);for(;e.firstChild;)t.append(e.firstChild);const s=e.localName==="if"||e.localName==="choose"?(()=>{const a=C("span");return a.append(t),a})():t;if(e.parentElement)e.parentElement.replaceChild(s,e);else{const a=e.parentElement||l,n=[...a.childNodes];n.forEach((o,y)=>{o===e&&(n[y]=s)}),a.replaceChildren(...n)}};class De extends HTMLElement{static observedAttributes=["src","tag","hidden"];async connectedCallback(){this.firstElementChild&&this.firstElementChild.localName!=="template"&&console.log(`custom-element used without template wrapping content
+`,this.outerHTML);const l=await we(d(this,"src"),this),t=d(this,"tag"),s=t||"dce-"+crypto.randomUUID();for(const p of l)j(p.templateNode||p.content||p,"style",i=>{const r=i.closest("slot"),h=r?`slot[name="${r.name}"]`:"";i.innerHTML=`${s} ${h}{${i.innerHTML}}`,this.append(i)});const a=l.map(p=>ve(p)),n=a.map((p,i)=>{i=new XSLTProcessor;try{i.importStylesheet(p)}catch(r){console.error(r,q(p))}return i});Object.defineProperty(this,"xsltString",{get:()=>a.map(p=>q(p)).join(`
+`)});const o=this,y=[...this.templateNode.querySelectorAll("[slice]")],x=y.map(p=>d(p,"slice")).filter(p=>!p.includes("/")).filter((p,i,r)=>r.indexOf(p)===i).map(pe).flat(),{declaredAttributes:v,hardcodedAttributes:u,exposedAttributes:w}=a[0],ee=new Set([...Object.keys(u),...Object.keys(w)]);class k extends HTMLElement{static get observedAttributes(){return v}#e=0;get dceExportedAttributes(){return ee}connectedCallback(){let i=ie(this.childNodes);if(this.firstElementChild?.tagName==="TEMPLATE"){this.firstElementChild!==this.lastElementChild&&console.error("payload should have TEMPLATE as only child",this.outerHTML);const c=this.firstElementChild;c.remove(),i=ie(c.content.childNodes);for(const E of i)if(E.localName==="style"){const m=Se(this,"data-dce-style");E.innerHTML=`${s}[data-dce-style="${m}"]{${E.innerHTML}}`,c.insertAdjacentElement("beforebegin",E)}else E.nodeType===1?c.insertAdjacentElement("beforebegin",E):E.nodeType===3&&c.insertAdjacentText("beforebegin",E.data)}const r=O("<datadom/>").documentElement,h=(c,E="")=>(m=>(E&&m.append(L(r,E)),m))(r.ownerDocument.createElement(c)),g=B(r,"payload",i,Ae);me(g),ue(g),this.innerHTML="";const f=B(r,"attributes",this.attributes,c=>h(c.nodeName,c.value)),b=c=>this.hasAttribute(c)||[...f.children].find(E=>E.localName===c);he(this,f),Object.keys(u).map(c=>b(c)||f.append(h(c,u[c]))),Object.keys(w).map(c=>b(c)||f.append(h(c))),B(r,"dataset",Object.keys(this.dataset),c=>h(c,this.dataset[c]));const T=B(r,"slice",x,c=>h(c,"")),M=c=>P(c,T);this.xml=r;const D=[],te=()=>{const c={};for(let E;E=D.pop();){const m=d(E.sliceElement,"slice");c[m]||(oe(T,m,E),c[m]=E)}Object.keys(c).length!==0&&V()};let W;this.onSlice=c=>{D.push(c),W||(W=setTimeout(()=>{te(),W=0},1))};const V=this.transform=()=>{if(this.#e)debugger;this.#e=1;const c=()=>{n.map((A,S)=>{const _=A.transformToFragment(r.ownerDocument,document);return _||console.error(`XSLT transformation error. xsl:
+`,q(a[S]),`
+xml:
+`,q(r)),_}).map(A=>{A&&(fe(A),xe(this,A.childNodes))});let N=0;return Object.entries(u).map(([A,S])=>{!this.hasAttribute(A)&&S!==d(this,A)&&(this.setAttribute(A,S),this.#t(A,S),N++)}),Object.keys(w).map(A=>{let S=d(this.firstElementChild,A);S!==d(this,A)&&(this.setAttribute(A,S),this.#t(A,S),N++)}),N};c()&&c()&&console.warn("model update should not be the result of transform more than once");function E(m){let N=m;if(m.localName==="slice"){const A=d(m,"for");if(A||(N=m.parentElement),A==="^")do N=N.previousElementSibling;while(N.localName==="slice");else N=this.querySelector(A);if(!N)return console.warn(`can not find selector in "slice for=${A}" `,m.outerHTML);d(m,"slice")||m.setAttribute("slice",d(m,"name"))}return N}j(this,"[slice],[slice-event]",m=>{let N=d(m,"slice-event");const A=m.hasAttribute("slice-value")||m.hasAttribute("value")||m.value,S=E(m);m.dceInitialized||(m.dceInitialized=1,S.hasAttribute("custom-validity")&&(N+=" change submit"),[...new Set((N||"change").split(" "))].forEach(_=>S.addEventListener(_,$=>{$.sliceElement=m,$.sliceEventSource=$.currentTarget||$.target,$.sliceProcessed=0;const be=oe(T,d($.sliceElement,"slice"),$);j(this,"[custom-validity]",X=>{if(!X.setCustomValidity)return;const Z=d(X,"custom-validity");try{const U=Z&&P(Z,f);X.setCustomValidity(U===!0?"":U===!1?"invalid":U)}catch(U){console.error(U,"xPath",Z)}});const Y=d(S,"custom-validity"),z=Y&&P(Y,f),G=z===!0?"":z;if(Y){if(m.setCustomValidity?m.setCustomValidity(G):m.validationMessage=G,be.map(X=>X.setAttribute("validation-message",G)),$.type==="submit")return z===!0?void 0:(setTimeout(V,1),!!z===z?(z||$.preventDefault(),z):z?($.preventDefault(),!1):void 0);setTimeout(V,1)}this.onSlice($)})),(!N||N.includes("init"))&&(A?this.onSlice({type:"init",target:S,sliceElement:m,sliceEventSource:S}):m.value=M(d(m,"slice"))))}),this.#e=0};V(),te()}#t(i,r){i==="value"&&(this.value=r);const h=this.xml.querySelector("attributes");let g=this.xml.querySelector(`attributes>${i}`);g?F(g).append(L(g,r)):(g=C(i,r,this.xml),h.append(g)),this.#e||h.setAttribute(i,r),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{[i]:r}}))}attributeChangedCallback(i,r,h){!this.xml||this.#e||(this.#t(i,h),this.transform())}get dce(){return o}}const H=p=>{window.customElements.get(p)!==k&&window.customElements.define(p,k)};if(t)H(t);else{const p=s;this.setAttribute("tag",p),H(p);const i=document.createElement(p);this.getAttributeNames().forEach(r=>i.setAttribute(r,this.getAttribute(r))),i.append(...[...this.childNodes].filter(r=>r.localName!=="style")),this.append(i)}}get templateNode(){return this.firstElementChild?.tagName==="TEMPLATE"?this.firstElementChild.content:this}get dce(){return this}get xslt(){return O(this.xsltString)}}window.customElements.define("custom-element",De);export{he as a,ae as c,ne as m};

package/storybook-static/assets/{dom-merge.test.stories-hbpdCka0.js → dom-merge.test.stories-CEKhWjaS.js}

@@ -1,9 +1,9 @@
-import{w as d,e as a,u as c,f as u}from"./index-CxRwF5Or.js";import"./custom-element-uuAtIYWS.js";function p(n){return new Promise(e=>setTimeout(e,n))}function m(n){const{title:e,body:t}=n;return`
+import{w as d,e as a,u as c,f as m}from"./index-CGuyH0k-.js";import"./custom-element-Bwx7otrT.js";function p(n){return new Promise(e=>setTimeout(e,n))}function g(n){const{title:e,body:t}=n;return`
         <fieldset>
             <legend>${e}</legend>
             ${t}
         </fieldset>
-  `}const h={title:"dom-merge",render:m},s={args:{title:"Chars count in textarea",body:`
+  `}const h={title:"dom-merge",render:g},s={args:{title:"Chars count in textarea",body:`
     <p>Counter update happens on change event(focus change). The update should not interfere with the input</p>
     <custom-element>
         <form>
@@ -68,7 +68,7 @@ import{w as d,e as a,u as c,f as u}from"./index-CxRwF5Or.js";import"./custom-ele
             </if>
         </form>
     </custom-element>
-`},play:async({canvasElement:n})=>{const e=r.args.title,t=d(n);await t.findByText(e),await u.click(await t.findByTestId("cb1")),await a(await t.findByText("#1")).toBeInTheDocument(),await u.click(t.getByTestId("cb2")),await a(await t.findByText("#2")).toBeInTheDocument(),await a(t.getByTestId("beforeC1").nextElementSibling).toEqual(t.getByTestId("isC1"))}},l={args:{title:"read system validity message",body:`
+`},play:async({canvasElement:n})=>{const e=r.args.title,t=d(n);await t.findByText(e),await m.click(await t.findByTestId("cb1")),await a(await t.findByText("#1")).toBeInTheDocument(),await m.click(t.getByTestId("cb2")),await a(await t.findByText("#2")).toBeInTheDocument(),await a(t.getByTestId("beforeC1").nextElementSibling.textContent).toEqual("#1")}},l={args:{title:"read system validity message",body:`
     <p>validationMessage propagated into slice as 'validation-message' attribute</p>
     <ol>
         <li> type in input field</li>
@@ -89,7 +89,22 @@ import{w as d,e as a,u as c,f as u}from"./index-CxRwF5Or.js";import"./custom-ele
             </form>
         </template>
     </custom-element>
-`},play:async({canvasElement:n})=>{const e=l.args.title,t=d(n);await t.findByText(e),await c.type(t.getByTestId("inp1"),"Hi"),await c.clear(t.getByTestId("inp1")),await c.click(t.getByTestId("btn1")),await a(await t.findByTestId("var1")).toBeInTheDocument(),await a(t.getByTestId("var1").textContent).toEqual(t.getByTestId("inp1").validationMessage),await a(t.getByTestId("var1").textContent.length>1).toEqual(!0)}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+`},play:async({canvasElement:n})=>{const e=l.args.title,t=d(n);await t.findByText(e),await c.type(t.getByTestId("inp1"),"Hi"),await c.clear(t.getByTestId("inp1")),await c.click(t.getByTestId("btn1")),await a(await t.findByTestId("var1")).toBeInTheDocument(),await a(t.getByTestId("var1").textContent).toEqual(t.getByTestId("inp1").validationMessage),await a(t.getByTestId("var1").textContent.length>1).toEqual(!0)}},u={args:{title:"Render inner components",body:`
+    <template id="test-icon">
+        <attribute name="img"></attribute>
+        <i>{img}</i>
+    </template>
+    <template id="test-button">
+        <attribute name="text"></attribute>
+        <button>
+            <slot>{text}</slot>
+        </button>
+    </template>
+    
+    <custom-element src="#test-icon" tag="test-icon"></custom-element>
+    <custom-element src="#test-button" tag="test-button"></custom-element>
+    <test-button>icon:<test-icon img="👍"></test-icon></test-button>
+`},play:async({canvasElement:n})=>{const e=d(n);await a(await e.findByText("👍")).toBeInTheDocument()}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
   args: {
     title: 'Chars count in textarea',
     body: \`
@@ -216,7 +231,7 @@ import{w as d,e as a,u as c,f as u}from"./index-CxRwF5Or.js";import"./custom-ele
     await expect(await canvas.findByText('#1')).toBeInTheDocument();
     await fireEvent.click(canvas.getByTestId('cb2'));
     await expect(await canvas.findByText('#2')).toBeInTheDocument();
-    await expect(canvas.getByTestId("beforeC1").nextElementSibling).toEqual(canvas.getByTestId("isC1"));
+    await expect(canvas.getByTestId("beforeC1").nextElementSibling.textContent).toEqual('#1');
   }
 }`,...r.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
   args: {
@@ -257,4 +272,30 @@ import{w as d,e as a,u as c,f as u}from"./index-CxRwF5Or.js";import"./custom-ele
     await expect(canvas.getByTestId("var1").textContent).toEqual(canvas.getByTestId("inp1").validationMessage);
     await expect(canvas.getByTestId("var1").textContent.length > 1).toEqual(true);
   }
-}`,...l.parameters?.docs?.source}}};const y=["CharsCountInTextarea","WordCountOnType","OrderPreservingOn2ndTransform","ReadSystemValidityMessage"];export{s as CharsCountInTextarea,r as OrderPreservingOn2ndTransform,l as ReadSystemValidityMessage,o as WordCountOnType,y as __namedExportsOrder,h as default};
+}`,...l.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'Render inner components',
+    body: \`
+    <template id="test-icon">
+        <attribute name="img"></attribute>
+        <i>{img}</i>
+    </template>
+    <template id="test-button">
+        <attribute name="text"></attribute>
+        <button>
+            <slot>{text}</slot>
+        </button>
+    </template>
+    
+    <custom-element src="#test-icon" tag="test-icon"></custom-element>
+    <custom-element src="#test-button" tag="test-button"></custom-element>
+    <test-button>icon:<test-icon img="👍"></test-icon></test-button>
+\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    await expect(await canvas.findByText('👍')).toBeInTheDocument();
+  }
+}`,...u.parameters?.docs?.source}}};const f=["CharsCountInTextarea","WordCountOnType","OrderPreservingOn2ndTransform","ReadSystemValidityMessage","EmbedDCE"];export{s as CharsCountInTextarea,u as EmbedDCE,r as OrderPreservingOn2ndTransform,l as ReadSystemValidityMessage,o as WordCountOnType,f as __namedExportsOrder,h as default};