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

package/storybook-static/assets/{slice-events.test.stories-DVyXFRU1.js → slice-events.test.stories-BZJGIFku.js}

@@ -1,9 +1,9 @@
-import{w as n,e as t,u as s}from"./index-CGuyH0k-.js";import"./custom-element-CnmjNo0g.js";function l(a){return new Promise(e=>setTimeout(e,a))}function B(a){const{title:e,body:c}=a;return`
+import{w as s,e as t,u as n}from"./index-CGuyH0k-.js";import"./custom-element-wuk8gYiP.js";function l(a){return new Promise(e=>setTimeout(e,a))}function g(a){const{title:e,body:c}=a;return`
         <fieldset>
             <legend>${e}</legend>
             ${c}
         </fieldset>
-  `}const C={title:"slice-events",render:B},u={args:{title:"Slice initialization, change on event",body:`
+  `}const C={title:"slice-events",render:g},u={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>
@@ -13,7 +13,7 @@ import{w as n,e as t,u as s}from"./index-CGuyH0k-.js";import"./custom-element-Cn
                 <code data-testid="slice-value">{ //clickcount }</code>
             </template>
         </custom-element>
-`},play:async({canvasElement:a})=>{const e=u.args.title,c=n(a);await c.findByText(e);const i=await c.findByTestId("slice-value"),o=await a.querySelector('[type="number"]');await t(i).toBeInTheDocument(),t(i.textContent).to.equal("0","initial slot value 0"),t(o.value).to.equal("0","initial input value 0"),a.querySelector('[slice-value="//clickcount + 1"]').click(),await l(10),t(i.textContent).to.equal("1","increment to 1"),t(o.value).to.equal("1","increment input 1"),a.querySelector('[slice-value="//clickcount + 1"]').click(),await l(10),a.querySelector('[slice-value="//clickcount + 1"]').click(),await l(10),t(i.textContent).to.equal("3","double increment to 3"),t(o.value).to.equal("3","double increment input to 3"),a.querySelector('[slice-value="//clickcount - 1"]').click(),await l(10),t(i.textContent).to.equal("2","decrement to 2"),t(o.value).to.equal("2","decrement input to 2")}},p={args:{title:"Realtime Slice data on event",body:`
+`},play:async({canvasElement:a})=>{const e=u.args.title,c=s(a);await c.findByText(e);const i=await c.findByTestId("slice-value"),o=await a.querySelector('[type="number"]');await t(i).toBeInTheDocument(),t(i.textContent).to.equal("0","initial slot value 0"),t(o.value).to.equal("0","initial input value 0"),a.querySelector('[slice-value="//clickcount + 1"]').click(),await l(10),t(i.textContent).to.equal("1","increment to 1"),t(o.value).to.equal("1","increment input 1"),a.querySelector('[slice-value="//clickcount + 1"]').click(),await l(10),a.querySelector('[slice-value="//clickcount + 1"]').click(),await l(10),t(i.textContent).to.equal("3","double increment to 3"),t(o.value).to.equal("3","double increment input to 3"),a.querySelector('[slice-value="//clickcount - 1"]').click(),await l(10),t(i.textContent).to.equal("2","decrement to 2"),t(o.value).to.equal("2","decrement input to 2")}},p={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>
@@ -24,7 +24,7 @@ import{w as n,e as t,u as s}from"./index-CGuyH0k-.js";import"./custom-element-Cn
             event type                  : <code data-testid="//slice/s/event/@type"     >{ //slice/s/event/@type    }</code>
         </template>
     </custom-element>
-`},play:async({canvasElement:a})=>{const e=p.args.title,c=n(a);await c.findByText(e);const i=()=>c.getByTestId("//slice/s").textContent,o=()=>c.getByTestId("//slice/s/event/@offsetY").textContent,w=()=>c.getByTestId("//slice/s/event/@type").textContent,k=await a.querySelector("textarea");t(i()).to.equal("","initial slot value blank"),t(o()).to.equal("","initial slot offsetY blank"),t(w()).to.equal("","initial slot event blank"),((h,x,T)=>{const g=new MouseEvent(T,{screenX:h,screenY:x,clientX:h,clientY:x,offsetX:h,offsetY:x});k.dispatchEvent(g)})(20,20,"click"),await l(10),t(i()).to.equal("x:20","click slot value 20"),t(Number(o())).to.be.lessThan(0,"offsetY click"),t(w()).to.equal("click","click event type")}},d={args:{title:'slice-event="change submit change submit" ',body:`
+`},play:async({canvasElement:a})=>{const e=p.args.title,c=s(a);await c.findByText(e);const i=()=>c.getByTestId("//slice/s").textContent,o=()=>c.getByTestId("//slice/s/event/@offsetY").textContent,x=()=>c.getByTestId("//slice/s/event/@type").textContent,k=await a.querySelector("textarea");t(i()).to.equal("","initial slot value blank"),t(o()).to.equal("","initial slot offsetY blank"),t(x()).to.equal("","initial slot event blank"),((h,w,T)=>{const B=new MouseEvent(T,{screenX:h,screenY:w,clientX:h,clientY:w,offsetX:h,offsetY:w});k.dispatchEvent(B)})(20,20,"click"),await l(10),t(i()).to.equal("x:20","click slot value 20"),t(Number(o())).to.be.lessThan(0,"offsetY click"),t(x()).to.equal("click","click event type")}},d={args:{title:'slice-event="change submit change submit" ',body:`
     <p> double same event should be treated as one.</p>
     <custom-element>
         <template>
@@ -35,7 +35,7 @@ import{w as n,e as t,u as s}from"./index-CGuyH0k-.js";import"./custom-element-Cn
             </form>
         </template>
     </custom-element>
-`},play:async({canvasElement:a})=>{const e=n(a),c=await e.findByTestId("f1");c.focus(),await s.type(c,"AB"),e.getByRole("button").focus(),await s.clear(c),await s.click(e.getByRole("button")),t(await e.findByText("slices count 2")).toBeInTheDocument()}},r={args:{title:'slice="/datadom/attributes/emotion | s1" ',body:`
+`},play:async({canvasElement:a})=>{const e=s(a),c=await e.findByTestId("f1");c.focus(),await n.type(c,"AB"),e.getByRole("button").focus(),await n.clear(c),await n.click(e.getByRole("button")),t(await e.findByText("slices count 2")).toBeInTheDocument()}},m={args:{title:'slice="/datadom/attributes/emotion | s1" ',body:`
     <p> double same event should be treated as one.</p>
     <custom-element>
         <template>
@@ -48,7 +48,7 @@ import{w as n,e as t,u as s}from"./index-CGuyH0k-.js";import"./custom-element-Cn
             slice <code>s2: {//slice/s2}</code><br/>
         </template>
     </custom-element>
-`},play:async({canvasElement:a})=>{const e=n(a),c=await e.findByTestId("f1");c.focus(),await s.type(c,"AB"),await t(await e.findByText("s1: AB")).toBeInTheDocument(),await t(await e.findByText("s2: AB")).toBeInTheDocument()}},m={args:{title:'slice="/datadom/attributes/emotion | s1" ',body:`
+`},play:async({canvasElement:a})=>{const e=s(a),c=await e.findByTestId("f1");c.focus(),await n.type(c,"AB"),await t(await e.findByText("s1: AB")).toBeInTheDocument(),await t(await e.findByText("s2: AB")).toBeInTheDocument()}},r={args:{title:'slice="/datadom/attributes/emotion | s1" ',body:`
     <p> double same event should be treated as one.</p>
     <custom-element>
         <template>
@@ -59,7 +59,7 @@ import{w as n,e as t,u as s}from"./index-CGuyH0k-.js";import"./custom-element-Cn
             <p>slice: {//slice/s1}</p>
         </template>
     </custom-element>
-`},play:async({canvasElement:a})=>{const e=n(a),c=await e.findByTestId("f1");c.focus(),await s.type(c,"AB"),await t(await e.findByText("emotion attribute: AB")).toBeInTheDocument()}},v={args:{title:"Checkbox value in slice ",body:`
+`},play:async({canvasElement:a})=>{const e=s(a),c=await e.findByTestId("f1");c.focus(),await n.type(c,"AB"),await t(await e.findByText("emotion attribute: AB")).toBeInTheDocument()}},v={args:{title:"Checkbox value in slice ",body:`
     <p> Checked value propagated into slice</p>
     <custom-element>
         <template>
@@ -67,7 +67,7 @@ import{w as n,e as t,u as s}from"./index-CGuyH0k-.js";import"./custom-element-Cn
             <p>slice: {//s1}</p>
         </template>
     </custom-element>
-`},play:async({canvasElement:a})=>{const e=n(a);await t(await e.findByText("slice: V1")).toBeInTheDocument()}},y={args:{title:"UncheckedCheckbox value not in slice ",body:`
+`},play:async({canvasElement:a})=>{const e=s(a);await t(await e.findByText("slice: V1")).toBeInTheDocument()}},y={args:{title:"UncheckedCheckbox value not in slice ",body:`
     <p> Check to see the value propagated into slice. Uncheck to observe the empty string in the slice. </p>
     <custom-element>
         <template>
@@ -75,7 +75,7 @@ import{w as n,e as t,u as s}from"./index-CGuyH0k-.js";import"./custom-element-Cn
             <p data-testid="t1">slice: {//s1}</p>
         </template>
     </custom-element>
-`},play:async({canvasElement:a})=>{const e=n(a),c=await e.findByTestId("t1");await t(c.textContent).toEqual("slice: ");const i=await e.findByTestId("i1");await s.click(i),await t(await e.findByText("slice: V1")).toBeInTheDocument(),await s.click(i),await t(c.textContent).toEqual("slice: ")}},b={args:{title:"UncheckedCheckbox slice-value not in slice ",body:`
+`},play:async({canvasElement:a})=>{const e=s(a),c=await e.findByTestId("t1");await t(c.textContent).toEqual("slice: ");const i=await e.findByTestId("i1");await n.click(i),await t(await e.findByText("slice: V1")).toBeInTheDocument(),await n.click(i),await t(await e.findByText("slice:")).toBeInTheDocument(),await t(c.textContent).toEqual("slice: ")}},b={args:{title:"UncheckedCheckbox slice-value not in slice ",body:`
     <p> Check to see the value propagated into slice. Uncheck to observe the empty string in the slice. </p>
     <custom-element>
         <template>
@@ -83,7 +83,7 @@ import{w as n,e as t,u as s}from"./index-CGuyH0k-.js";import"./custom-element-Cn
             <p data-testid="t1">slice: {//s1}</p>
         </template>
     </custom-element>
-`},play:async({canvasElement:a})=>{const e=n(a),c=await e.findByTestId("t1");await t(c.textContent).toEqual("slice: ");const i=await e.findByTestId("i1");await s.click(i),await t(await e.findByText("slice: V1")).toBeInTheDocument(),await s.click(i),await t(c.textContent).toEqual("slice: ")}},f={args:{title:"Radiogroup value",body:`
+`},play:async({canvasElement:a})=>{const e=s(a),c=await e.findByTestId("t1");await t(c.textContent).toEqual("slice: ");const i=await e.findByTestId("i1");await n.click(i),await t(await e.findByText("slice: V1")).toBeInTheDocument(),await n.click(i),await t(await e.findByText("slice:")).toBeInTheDocument(),await t(c.textContent).toEqual("slice: ")}},f={args:{title:"Radiogroup value",body:`
     <p> The value propagated into slice from the last checked radiobutton. </p>
     <custom-element>
         <template>
@@ -92,7 +92,7 @@ import{w as n,e as t,u as s}from"./index-CGuyH0k-.js";import"./custom-element-Cn
             <p data-testid="t1">slice: {//s1}</p>
         </template>
     </custom-element>
-`},play:async({canvasElement:a})=>{const e=n(a);await s.click(await e.findByTestId("i1")),await t(await e.findByText("slice: V1")).toBeInTheDocument(),await s.click(await e.findByTestId("i2")),await t(await e.findByText("slice: V2")).toBeInTheDocument()}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+`},play:async({canvasElement:a})=>{const e=s(a);await n.click(await e.findByTestId("i1")),await t(await e.findByText("slice: V1")).toBeInTheDocument(),await n.click(await e.findByTestId("i2")),await t(await e.findByText("slice: V2")).toBeInTheDocument()}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
   args: {
     title: 'Slice initialization, change on event',
     body: \`
@@ -208,7 +208,7 @@ import{w as n,e as t,u as s}from"./index-CGuyH0k-.js";import"./custom-element-Cn
     await userEvent.click(canvas.getByRole('button'));
     expect(await canvas.findByText('slices count 2')).toBeInTheDocument();
   }
-}`,...d.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+}`,...d.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
   args: {
     title: 'slice="/datadom/attributes/emotion | s1" ',
     body: \`
@@ -236,7 +236,7 @@ import{w as n,e as t,u as s}from"./index-CGuyH0k-.js";import"./custom-element-Cn
     await expect(await canvas.findByText('s1: AB')).toBeInTheDocument();
     await expect(await canvas.findByText('s2: AB')).toBeInTheDocument();
   }
-}`,...r.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+}`,...m.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
   args: {
     title: 'slice="/datadom/attributes/emotion | s1" ',
     body: \`
@@ -261,7 +261,7 @@ import{w as n,e as t,u as s}from"./index-CGuyH0k-.js";import"./custom-element-Cn
     await userEvent.type(input, 'AB');
     await expect(await canvas.findByText('emotion attribute: AB')).toBeInTheDocument();
   }
-}`,...m.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
+}`,...r.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
   args: {
     title: 'Checkbox value in slice ',
     body: \`
@@ -303,6 +303,7 @@ import{w as n,e as t,u as s}from"./index-CGuyH0k-.js";import"./custom-element-Cn
     await userEvent.click(cb);
     await expect(await canvas.findByText('slice: V1')).toBeInTheDocument();
     await userEvent.click(cb);
+    await expect(await canvas.findByText('slice:')).toBeInTheDocument();
     await expect(p.textContent).toEqual('slice: ');
   }
 }`,...y.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
@@ -328,6 +329,7 @@ import{w as n,e as t,u as s}from"./index-CGuyH0k-.js";import"./custom-element-Cn
     await userEvent.click(cb);
     await expect(await canvas.findByText('slice: V1')).toBeInTheDocument();
     await userEvent.click(cb);
+    await expect(await canvas.findByText('slice:')).toBeInTheDocument();
     await expect(p.textContent).toEqual('slice: ');
   }
 }`,...b.parameters?.docs?.source}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
@@ -353,4 +355,4 @@ import{w as n,e as t,u as s}from"./index-CGuyH0k-.js";import"./custom-element-Cn
     await userEvent.click(await canvas.findByTestId('i2'));
     await expect(await canvas.findByText('slice: V2')).toBeInTheDocument();
   }
-}`,...f.parameters?.docs?.source}}};const S=["SliceInitChangeEvent","RealtimeEventInSlice","DoubleEventInSlice","MultipleSlices","SlicesInAttrAndName","CheckboxChecked","CheckboxUnchecked","CheckboxSliceValue","RadiogroupSliceValue"];export{v as CheckboxChecked,b as CheckboxSliceValue,y as CheckboxUnchecked,d as DoubleEventInSlice,r as MultipleSlices,f as RadiogroupSliceValue,p as RealtimeEventInSlice,u as SliceInitChangeEvent,m as SlicesInAttrAndName,S as __namedExportsOrder,C as default};
+}`,...f.parameters?.docs?.source}}};const S=["SliceInitChangeEvent","RealtimeEventInSlice","DoubleEventInSlice","MultipleSlices","SlicesInAttrAndName","CheckboxChecked","CheckboxUnchecked","CheckboxSliceValue","RadiogroupSliceValue"];export{v as CheckboxChecked,b as CheckboxSliceValue,y as CheckboxUnchecked,d as DoubleEventInSlice,m as MultipleSlices,f as RadiogroupSliceValue,p as RealtimeEventInSlice,u as SliceInitChangeEvent,r as SlicesInAttrAndName,S as __namedExportsOrder,C as default};

package/storybook-static/assets/{slots.test.stories-CS544nS4.js → slots.test.stories-DKivHwZH.js}

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

package/storybook-static/assets/{version-select.test.stories-D36nfYBq.js → version-select.test.stories-Dntyd7qb.js}

@@ -1,4 +1,4 @@
-import{w as r}from"./index-CGuyH0k-.js";import"./custom-element-CnmjNo0g.js";import"./http-request-BWeEEBkP.js";import"./location-element-hKpcXCdn.js";function o(e){return new Promise(s=>setTimeout(s,e))}function n(e){const{title:s,body:i}=e;return`
+import{w as r}from"./index-CGuyH0k-.js";import"./custom-element-wuk8gYiP.js";import"./http-request-BWeEEBkP.js";import"./location-element-hKpcXCdn.js";function o(e){return new Promise(s=>setTimeout(s,e))}function n(e){const{title:s,body:i}=e;return`
         <fieldset>
             <legend>${s}</legend>
             ${i}

package/storybook-static/assets/{xslt-conditionals.test.stories-BS1PTIHe.js → xslt-conditionals.test.stories-Iq5iQNRj.js}

@@ -1,4 +1,4 @@
-import{w as n,e,u as I}from"./index-CGuyH0k-.js";import"./custom-element-CnmjNo0g.js";function o(a){return new Promise(s=>setTimeout(s,a))}function B(a){const{title:s,tag:t,template:i,payload:r}=a;return`
+import{w as n,e,u as I}from"./index-CGuyH0k-.js";import"./custom-element-wuk8gYiP.js";function o(a){return new Promise(s=>setTimeout(s,a))}function B(a){const{title:s,tag:t,template:i,payload:r}=a;return`
         <fieldset>
             <legend>${s}</legend>
             <custom-element tag="${t}" hidden>

package/storybook-static/assets/{xslt-for-each.test.stories-CtPS20RK.js → xslt-for-each.test.stories-BMygBmj8.js}

@@ -1,14 +1,14 @@
-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`
+import{w as i,e,f as m}from"./index-CGuyH0k-.js";import"./custom-element-wuk8gYiP.js";function w(a){const{title:t,tag:d,template:o,payload:s}=a;return`
         <fieldset>
             <legend>${t}</legend>
-            <custom-element tag="${a}" hidden>
+            <custom-element tag="${d}" hidden>
                 <template>
-                    ${n}
+                    ${o}
                 </template>
             </custom-element>
-            ${i}
+            ${s}
         </fieldset>
-    `}const u={title:"xslt/for-each",render:m},l=`
+    `}const y={title:"xslt/for-each",render:w,parameters:{test:{dangerouslyIgnoreUnhandledErrors:!0}}},x=`
 <h6 id="cem-color-hue-variant" tabindex="-1">cem-color-hue-variant</h6>
 <table>
     <thead>
@@ -231,9 +231,9 @@ import{w as r,e,f as s}from"./index-CGuyH0k-.js";import"./custom-element-CnmjNo0
         <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:`
+</table>`,l={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>
+                <xsl:variable name="test-data">${x}</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/*">
@@ -244,9 +244,9 @@ import{w as r,e,f as s}from"./index-CGuyH0k-.js";import"./custom-element-CnmjNo0
                         
         `,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:`
+        `},play:async({canvasElement:a})=>{const t=i(a);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>
+                <xsl:variable name="test-data">${x}</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>
@@ -261,7 +261,46 @@ import{w as r,e,f as s}from"./index-CGuyH0k-.js";import"./custom-element-CnmjNo0
                         
         `,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:`{
+        `},play:async({canvasElement:a})=>{const t=i(a),d=await t.findByTestId("whole-text");await e(d.textContent).toMatch(/0\s+N/),await m.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(d.textContent).toMatch(/0\s+1--cem-color-blue-xl[\s\S]*26--cem-color-red-xd\s+N/)}},T=`
+<rows>
+    <r id="1"><d>A1</d><d>A2</d><d>A3</d></r>
+    <r id="2"><d>B1</d><d>B2</d><d>B3</d></r>
+    <r id="3"><d>C1</d><d>C2</d><d>C3</d></r>
+</rows>`,n={args:{title:"Table 3x3: initially empty, rows shown by checkbox, content stays inside table",tag:"for-each-table-3x3",template:`
+            <xsl:variable name="rows-data">${T}</xsl:variable>
+            <variable name="rows" select="exsl:node-set($rows-data)/*/*"></variable>
+            <label><input type="checkbox" data-testid="toggle-rows" slice="show-rows" value="yes" /> Show rows</label>
+            <variable name="show-rows" select="//show-rows = 'yes'"></variable>
+<pre data-testid="just-text">
+JUST_TEXT_BEFORE
+    <for-each select="$rows[$show-rows]">
+        <for-each select="*">
+            {.} #
+        </for-each>
+    </for-each>
+JUST_TEXT_AFTER
+</pre>
+            <div data-testid="container">
+                TEXT_BEFORE
+                <xhtml:table data-testid="the-table">
+                    <xhtml:thead>
+                        <xhtml:tr><xhtml:th>Col A</xhtml:th><xhtml:th>Col B</xhtml:th><xhtml:th>Col C</xhtml:th></xhtml:tr>
+                    </xhtml:thead>
+                    <xhtml:tbody data-testid="table-body">
+                        <for-each select="$rows[$show-rows]">
+                            <xhtml:tr data-testid="row-{@id}">
+                                <for-each select="*">
+                                    <xhtml:td>{.}</xhtml:td>
+                                </for-each>
+                            </xhtml:tr>
+                        </for-each>
+                    </xhtml:tbody>
+                </xhtml:table>
+                TEXT_AFTER
+            </div>
+        `,payload:`
+            <for-each-table-3x3></for-each-table-3x3>
+        `},play:async({canvasElement:a})=>{const t=i(a),d=await t.findByTestId("just-text");e(d.textContent).toMatch(/JUST_TEXT_BEFORE[\s\S]*JUST_TEXT_AFTER/);const o=await t.findByTestId("container"),s=await t.findByTestId("the-table"),r=await t.findByTestId("table-body");e(r.querySelectorAll("tr").length).toBe(0),e(o.textContent).toMatch(/TEXT_BEFORE[\s\S]*Col A[\s\S]*TEXT_AFTER/),await m.click(await t.findByTestId("toggle-rows")),e(await t.findByTestId("row-1")).toBeInTheDocument(),e(await t.findByTestId("row-2")).toBeInTheDocument(),e(await t.findByTestId("row-3")).toBeInTheDocument(),e(r.querySelectorAll("tr").length).toBe(3),e(d.textContent).toMatch(/JUST_TEXT_BEFORE[\s\S]*A1 #/),e(d.textContent).toMatch(/C3 #[\s\S]*JUST_TEXT_AFTER/),r.querySelectorAll("tr").forEach(b=>{e(b.parentElement).toBe(r)}),e(o.textContent).toMatch(/TEXT_BEFORE[\s\S]*?Col A[\s\S]*?Col B[\s\S]*?Col C[\s\S]*?A1[\s\S]*?A2[\s\S]*?A3[\s\S]*?B1[\s\S]*?B2[\s\S]*?B3[\s\S]*?C1[\s\S]*?C2[\s\S]*?C3[\s\S]*?TEXT_AFTER/);const h=s.outerHTML;e(h).toContain("A1"),e(h).toContain("C3")}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
   args: {
     title: 'KNOWN ISSUE: Multiple IF blocks - out of order',
     tag: 'multi-for-each',
@@ -290,7 +329,7 @@ import{w as r,e,f as s}from"./index-CGuyH0k-.js";import"./custom-element-CnmjNo0
     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:`{
+}`,...l.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',
@@ -326,4 +365,85 @@ import{w as r,e,f as s}from"./index-CGuyH0k-.js";import"./custom-element-CnmjNo0
     // 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};
+}`,...c.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'Table 3x3: initially empty, rows shown by checkbox, content stays inside table',
+    tag: 'for-each-table-3x3',
+    template: \`
+            <xsl:variable name="rows-data">\${Table3x3Data}</xsl:variable>
+            <variable name="rows" select="exsl:node-set($rows-data)/*/*"></variable>
+            <label><input type="checkbox" data-testid="toggle-rows" slice="show-rows" value="yes" /> Show rows</label>
+            <variable name="show-rows" select="//show-rows = 'yes'"></variable>
+<pre data-testid="just-text">
+JUST_TEXT_BEFORE
+    <for-each select="$rows[$show-rows]">
+        <for-each select="*">
+            {.} #
+        </for-each>
+    </for-each>
+JUST_TEXT_AFTER
+</pre>
+            <div data-testid="container">
+                TEXT_BEFORE
+                <xhtml:table data-testid="the-table">
+                    <xhtml:thead>
+                        <xhtml:tr><xhtml:th>Col A</xhtml:th><xhtml:th>Col B</xhtml:th><xhtml:th>Col C</xhtml:th></xhtml:tr>
+                    </xhtml:thead>
+                    <xhtml:tbody data-testid="table-body">
+                        <for-each select="$rows[$show-rows]">
+                            <xhtml:tr data-testid="row-{@id}">
+                                <for-each select="*">
+                                    <xhtml:td>{.}</xhtml:td>
+                                </for-each>
+                            </xhtml:tr>
+                        </for-each>
+                    </xhtml:tbody>
+                </xhtml:table>
+                TEXT_AFTER
+            </div>
+        \`,
+    payload: \`
+            <for-each-table-3x3></for-each-table-3x3>
+        \`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    const justTextContainer = await canvas.findByTestId('just-text');
+    expect(justTextContainer.textContent).toMatch(/JUST_TEXT_BEFORE[\\s\\S]*JUST_TEXT_AFTER/);
+    const container = await canvas.findByTestId('container');
+    const table = await canvas.findByTestId('the-table');
+    const tbody = await canvas.findByTestId('table-body');
+
+    // Initially no rows visible
+    expect(tbody.querySelectorAll('tr').length).toBe(0);
+    // TEXT_BEFORE ... TEXT_AFTER with table in between (but no row content)
+    expect(container.textContent).toMatch(/TEXT_BEFORE[\\s\\S]*Col A[\\s\\S]*TEXT_AFTER/);
+
+    // Toggle checkbox to show rows
+    await fireEvent.click(await canvas.findByTestId('toggle-rows'));
+
+    // Now 3 rows should be visible
+    expect(await canvas.findByTestId('row-1')).toBeInTheDocument();
+    expect(await canvas.findByTestId('row-2')).toBeInTheDocument();
+    expect(await canvas.findByTestId('row-3')).toBeInTheDocument();
+    expect(tbody.querySelectorAll('tr').length).toBe(3);
+    expect(justTextContainer.textContent).toMatch(/JUST_TEXT_BEFORE[\\s\\S]*A1 #/);
+    expect(justTextContainer.textContent).toMatch(/C3 #[\\s\\S]*JUST_TEXT_AFTER/);
+
+    // Verify rows are inside the table (TR should be children of TBODY)
+    const rows = tbody.querySelectorAll('tr');
+    rows.forEach(row => {
+      expect(row.parentElement).toBe(tbody);
+    });
+
+    // Verify table content is between TEXT_BEFORE and TEXT_AFTER
+    expect(container.textContent).toMatch(/TEXT_BEFORE[\\s\\S]*?Col A[\\s\\S]*?Col B[\\s\\S]*?Col C[\\s\\S]*?A1[\\s\\S]*?A2[\\s\\S]*?A3[\\s\\S]*?B1[\\s\\S]*?B2[\\s\\S]*?B3[\\s\\S]*?C1[\\s\\S]*?C2[\\s\\S]*?C3[\\s\\S]*?TEXT_AFTER/);
+
+    // Verify no content leaked outside the table
+    const tableHtml = table.outerHTML;
+    expect(tableHtml).toContain('A1');
+    expect(tableHtml).toContain('C3');
+  }
+}`,...n.parameters?.docs?.source}}};const v=["ForEach","ForEach_0_2_N","ForEach_Table_3x3"];export{l as ForEach,c as ForEach_0_2_N,n as ForEach_Table_3x3,v as __namedExportsOrder,y as default};

package/storybook-static/assets/{xslt-if.test.stories-DcHrAMSY.js → xslt-if.test.stories-CVrFWdAX.js}

@@ -1,4 +1,4 @@
-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`
+import{w as l,e as a,u as c}from"./index-CGuyH0k-.js";import"./custom-element-wuk8gYiP.js";function d(i){const{title:e,tag:t,template:s,payload:n}=i;return`
         <fieldset>
             <legend>${e}</legend>
             <custom-element tag="${t}" hidden>

package/storybook-static/demo/for-each.html

@@ -0,0 +1,213 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>for-each - Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+
+    <script type="module" src="../custom-element.js"></script>
+    <style>
+        @import "./demo.css";
+
+        table {
+            border-collapse: collapse;
+            margin: 1rem 0;
+        }
+        th, td {
+            border: 1px solid #ccc;
+            padding: 0.5rem;
+        }
+        th {
+            background: #f0f0f0;
+        }
+    </style>
+</head>
+<body>
+
+<nav>
+    <a href="../index.html"><h3><code>custom-element</code> demo</h3></a>
+    <h3>for-each loop</h3>
+    <p>The <code>&lt;for-each&gt;</code> element iterates over a node-set selected by XPath expression
+        and renders its content for each node.</p>
+    <p><b>XHTML namespace use</b><br/>
+        HTML elements like <code>&lt;table&gt;</code>, <code>&lt;tr&gt;</code>, <code>&lt;td&gt;</code>
+        have strict content model rules - only specific child elements are permitted.
+        For example, <code>&lt;table&gt;</code> only allows <code>&lt;thead&gt;</code>,
+        <code>&lt;tbody&gt;</code>, <code>&lt;tr&gt;</code> as children; <code>&lt;tr&gt;</code>
+        only allows <code>&lt;th&gt;</code> or <code>&lt;td&gt;</code>.<br/>
+        When the browser parses HTML, it moves non-permitted elements (like <code>&lt;for-each&gt;</code>)
+        outside the table before JavaScript runs.<br/>
+        Using <code>xhtml:</code> namespace prefix (e.g., <code>&lt;xhtml:table&gt;</code>,
+        <code>&lt;xhtml:tr&gt;</code>) prevents the browser from recognizing these as standard HTML
+        elements during initial parsing, preserving the template structure for DCE to process correctly.
+        See examples 4 and 6.
+    </p>
+</nav>
+
+<html-demo-element legend="1. Simple for-each"
+                   description="Loop over inline XML data and render each item">
+    <template>
+        <custom-element>
+            <template>
+                <xsl:variable name="fruits">
+                    <item>Apple</item>
+                    <item>Banana</item>
+                    <item>Cherry</item>
+                </xsl:variable>
+                <ul>
+                    <for-each select="exsl:node-set($fruits)/*">
+                        <li>{.}</li>
+                    </for-each>
+                </ul>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="2. for-each with position()"
+                   description="Using position() to number items in the loop">
+    <template>
+        <custom-element>
+            <template>
+                <xsl:variable name="colors">
+                    <color hex="#ff0000">Red</color>
+                    <color hex="#00ff00">Green</color>
+                    <color hex="#0000ff">Blue</color>
+                </xsl:variable>
+                <for-each select="exsl:node-set($colors)/*">
+                    <div style="padding: 0.5rem; background: {@hex}; color: white;">
+                        {position()}. {.}
+                    </div>
+                </for-each>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="3. Conditional for-each"
+                   description="Initially empty, items shown when checkbox is checked">
+    <template>
+        <custom-element>
+            <template>
+                <xsl:variable name="items">
+                    <item>First</item>
+                    <item>Second</item>
+                    <item>Third</item>
+                </xsl:variable>
+                <label>
+                    <input type="checkbox" slice="show-items" value="yes"/>
+                    Show items
+                </label>
+                <variable name="show" select="//show-items = 'yes'"></variable>
+                <div>
+                    BEFORE
+                    <for-each select="exsl:node-set($items)/*[$show]">
+                        <span style="margin: 0 0.25rem; padding: 0.25rem; background: #e0e0ff;">
+                            {position()}:{.}
+                        </span>
+                    </for-each>
+                    AFTER
+                </div>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="4. Nested for-each (Table)"
+                   description="Nested loops to render table rows and cells">
+    <template>
+        <custom-element>
+            <template>
+                <xsl:variable name="table-data">
+                    <row><cell>A1</cell><cell>A2</cell><cell>A3</cell></row>
+                    <row><cell>B1</cell><cell>B2</cell><cell>B3</cell></row>
+                    <row><cell>C1</cell><cell>C2</cell><cell>C3</cell></row>
+                </xsl:variable>
+                <variable name="rows" select="exsl:node-set($table-data)/*"></variable>
+                <xhtml:table>
+                    <xhtml:thead>
+                        <xhtml:tr>
+                            <xhtml:th>Col 1</xhtml:th>
+                            <xhtml:th>Col 2</xhtml:th>
+                            <xhtml:th>Col 3</xhtml:th>
+                        </xhtml:tr>
+                    </xhtml:thead>
+                    <xhtml:tbody>
+                        <for-each select="$rows">
+                            <xhtml:tr>
+                                <for-each select="*">
+                                    <xhtml:td>{.}</xhtml:td>
+                                </for-each>
+                            </xhtml:tr>
+                        </for-each>
+                    </xhtml:tbody>
+                </xhtml:table>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="5. for-each with attributes"
+                   description="Access element attributes within the loop">
+    <template>
+        <custom-element>
+            <template>
+                <xsl:variable name="users">
+                    <user id="1" role="admin">Alice</user>
+                    <user id="2" role="editor">Bob</user>
+                    <user id="3" role="viewer">Charlie</user>
+                </xsl:variable>
+                <for-each select="exsl:node-set($users)/*">
+                    <div style="padding: 0.5rem; margin: 0.25rem 0; border-left: 3px solid #007bff;">
+                        <strong>#{@id}</strong> {.}
+                        <em>({@role})</em>
+                    </div>
+                </for-each>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<html-demo-element legend="6. Dynamic table with toggle"
+                   description="Table rows appear/disappear based on checkbox state">
+    <template>
+        <custom-element>
+            <template>
+                <xsl:variable name="products">
+                    <product price="10">Widget</product>
+                    <product price="25">Gadget</product>
+                    <product price="15">Gizmo</product>
+                </xsl:variable>
+                <variable name="items" select="exsl:node-set($products)/*"></variable>
+                <label>
+                    <input type="checkbox" slice="show-products" value="yes"/>
+                    Show products
+                </label>
+                <variable name="visible" select="//show-products = 'yes'"></variable>
+                <xhtml:table>
+                    <xhtml:thead>
+                        <xhtml:tr>
+                            <xhtml:th>#</xhtml:th>
+                            <xhtml:th>Product</xhtml:th>
+                            <xhtml:th>Price</xhtml:th>
+                        </xhtml:tr>
+                    </xhtml:thead>
+                    <xhtml:tbody>
+                        <for-each select="$items[$visible]">
+                            <xhtml:tr>
+                                <xhtml:td>{position()}</xhtml:td>
+                                <xhtml:td>{.}</xhtml:td>
+                                <xhtml:td>${@price}</xhtml:td>
+                            </xhtml:tr>
+                        </for-each>
+                    </xhtml:tbody>
+                </xhtml:table>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
+<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
+
+</body>
+</html>

package/storybook-static/iframe.html

@@ -517,7 +517,7 @@
     }
 }
 </script>
-    <script type="module" crossorigin src="./assets/iframe-DiVWehoI.js"></script>
+    <script type="module" crossorigin src="./assets/iframe-CBHPj1E5.js"></script>
   </head>
 
   <body>