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

package/.claude/settings.local.json

@@ -12,7 +12,10 @@
       "WebFetch(domain:material.angular.dev)",
       "Bash(cat:*)",
       "Bash(git checkout:*)",
-      "Bash(npm test:*)"
+      "Bash(npm test:*)",
+      "Bash(yarn test:*)",
+      "Bash(node:*)",
+      "Bash(echo:*)"
     ]
   }
 }

package/.storybook/preview.ts

@@ -2,7 +2,13 @@ import {initialize, mswLoader} from 'msw-storybook-addon';
 
 import {handlers} from "../src/mocks/handlers";
 
-initialize({onUnhandledRequest: 'bypass'});// SB
+initialize({
+    onUnhandledRequest: 'bypass',
+    serviceWorker: {
+        url: './mockServiceWorker.js',
+    },
+    quiet: true, // Suppress MSW warnings in console
+});// SB
 
 const preview = {
     parameters: {

package/README.md

@@ -27,8 +27,8 @@ CDN version of StoryBook.
 [github-image]:   https://cdnjs.cloudflare.com/ajax/libs/octicons/8.5.0/svg/mark-github.svg
 [npm-image]:      https://img.shields.io/npm/v/@epa-wg/custom-element-dist.svg
 [npm-url]:        https://npmjs.org/package/@epa-wg/custom-element-dist
-[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.35/coverage/src/custom-element/coverage.svg
-[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.35/coverage/src/custom-element/index.html
-[sb-url]:         https://unpkg.com/@epa-wg/custom-element-dist@0.0.35/storybook-static/index.html
-[bundle-url]:     https://unpkg.com/@epa-wg/custom-element-dist@0.0.35/dist/custom-element-bundle.js
-[cem-url]:        https://unpkg.com/@epa-wg/custom-element-dist@0.0.35/src/material/components.html
+[coverage-image]: https://unpkg.com/@epa-wg/custom-element-dist@0.0.37/coverage/src/custom-element/coverage.svg
+[coverage-url]:   https://unpkg.com/@epa-wg/custom-element-dist@0.0.37/coverage/src/custom-element/index.html
+[sb-url]:         https://unpkg.com/@epa-wg/custom-element-dist@0.0.37/storybook-static/index.html
+[bundle-url]:     https://unpkg.com/@epa-wg/custom-element-dist@0.0.37/dist/custom-element-bundle.js
+[cem-url]:        https://unpkg.com/@epa-wg/custom-element-dist@0.0.37/src/material/components.html

package/dist/{custom-element-BzDjIYMe.js → custom-element-BqBcmDiN.js}

@@ -412,8 +412,11 @@ const $e = (e) => [...e?.matchAll(/([^{}]*)(\{)([^}]+)}([^{}]*)/g)].map((t) => `
   for (; e.firstChild; )
     t.append(e.firstChild);
   const l = "if,choose,for-each".includes(e.localName) ? (() => {
-    const a = C("span");
-    return a.append(t), a;
+    const a = e.parentElement;
+    if (!a || a.childNodes.length === 1)
+      return t;
+    const n = C("span");
+    return n.append(t), n;
   })() : t;
   if (e.parentElement)
     e.parentElement.replaceChild(l, e);

package/dist/custom-element-bundle.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./custom-element-Bssk9jRy.cjs"),l=require("./http-request-DSaowcG1.cjs"),t=require("./local-storage-78EivJ_B.cjs"),a=require("./location-element-DRB7hCwA.cjs");exports.CustomElement=e.CustomElement;exports.appendByDceId=e.appendByDceId;exports.assureSlices=e.assureSlices;exports.assureUID=e.assureUID;exports.assureUnique=e.assureUnique;exports.cloneAs=e.cloneAs;exports.createXsltFromDom=e.createXsltFromDom;exports.deepEqual=e.deepEqual;exports.default=e.CustomElement;exports.evalCurly=e.evalCurly;exports.event2slice=e.event2slice;exports.merge=e.merge;exports.mergeAttr=e.mergeAttr;exports.mix=e.mix;exports.obj2node=e.obj2node;exports.sanitizeBlankText=e.sanitizeBlankText;exports.tagUid=e.tagUid;exports.toXsl=e.toXsl;exports.xPath=e.xPath;exports.xPathDefaults=e.xPathDefaults;exports.xhrTemplate=e.xhrTemplate;exports.xml2dom=e.xml2dom;exports.xmlString=e.xmlString;exports.xslTags=e.xslTags;exports.HttpRequestElement=l.HttpRequestElement;exports.LocalStorageElement=t.LocalStorageElement;exports.localStorageSetItem=t.localStorageSetItem;exports.localStorage_clear=t.localStorage_clear;exports.localStorage_removeItem=t.localStorage_removeItem;exports.localStorage_setItem=t.localStorage_setItem;exports.LocationElement=a.LocationElement;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./custom-element-jpOyXHF6.cjs"),l=require("./http-request-DSaowcG1.cjs"),t=require("./local-storage-78EivJ_B.cjs"),a=require("./location-element-DRB7hCwA.cjs");exports.CustomElement=e.CustomElement;exports.appendByDceId=e.appendByDceId;exports.assureSlices=e.assureSlices;exports.assureUID=e.assureUID;exports.assureUnique=e.assureUnique;exports.cloneAs=e.cloneAs;exports.createXsltFromDom=e.createXsltFromDom;exports.deepEqual=e.deepEqual;exports.default=e.CustomElement;exports.evalCurly=e.evalCurly;exports.event2slice=e.event2slice;exports.merge=e.merge;exports.mergeAttr=e.mergeAttr;exports.mix=e.mix;exports.obj2node=e.obj2node;exports.sanitizeBlankText=e.sanitizeBlankText;exports.tagUid=e.tagUid;exports.toXsl=e.toXsl;exports.xPath=e.xPath;exports.xPathDefaults=e.xPathDefaults;exports.xhrTemplate=e.xhrTemplate;exports.xml2dom=e.xml2dom;exports.xmlString=e.xmlString;exports.xslTags=e.xslTags;exports.HttpRequestElement=l.HttpRequestElement;exports.LocalStorageElement=t.LocalStorageElement;exports.localStorageSetItem=t.localStorageSetItem;exports.localStorage_clear=t.localStorage_clear;exports.localStorage_removeItem=t.localStorage_removeItem;exports.localStorage_setItem=t.localStorage_setItem;exports.LocationElement=a.LocationElement;

package/dist/custom-element-bundle.js

@@ -1,5 +1,5 @@
-import { C as e } from "./custom-element-BzDjIYMe.js";
-import { j as o, f as l, l as r, i as m, c, b as n, e as x, n as p, g, k as i, h as u, m as d, o as f, s as S, t as E, u as I, q as h, p as q, d as D, x as L, a as b, r as v } from "./custom-element-BzDjIYMe.js";
+import { C as e } from "./custom-element-BqBcmDiN.js";
+import { j as o, f as l, l as r, i as m, c, b as n, e as x, n as p, g, k as i, h as u, m as d, o as f, s as S, t as E, u as I, q as h, p as q, d as D, x as L, a as b, r as v } from "./custom-element-BqBcmDiN.js";
 import { H as T } from "./http-request-DTCzZ1gc.js";
 import { L as _, c as j, b as k, a as y, l as A } from "./local-storage-DzmNKzgN.js";
 import { L as H } from "./location-element-FJlONi2n.js";

package/dist/{custom-element-Bssk9jRy.cjs → custom-element-jpOyXHF6.cjs}

@@ -89,7 +89,7 @@
             <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:U(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"),f=r.replace(/hasBoolAttribute\((.*?)\)/g,(g,h,b,T,P)=>{const L=h.substring(1);return`(not($${L} = 'false') and ($${L} = '' or $${L} = '${L}' or $${L} = 'true' ))`});r!==f&&i.setAttribute("test",f)}),[...v.querySelectorAll("dce-root>attribute")].forEach(i=>{K(i,"namespace,name,select");const r=te(i,"xsl:param"),f=d(i,"name");if(t.push(f),i.childNodes.length&&(l[f]=i.textContent),w.append(r),i.hasAttribute("select")){a[f]=d(i,"select"),K(r,"select,name");let g=d(i,"select").split("??"),h;if(g?.length>1){r.removeAttribute("select");const b=u(x,'template[match="ignore"]>choose').cloneNode(!0);F(b.firstElementChild).append(D(b,"{"+g[0]+"}")),b.firstElementChild.setAttribute("test",g[0]);for(let T=1;T<g.length-1;T++){const P=b.firstElementChild.cloneNode(!0);F(P).append(D(b,"{"+g[T]+"}")),P.setAttribute("test",g[T]),b.insertBefore(P,b.lastElementChild)}F(b.lastElementChild).append(D(b,"{"+g[g.length-1]+"}")),r.append(b),h=b.cloneNode(!0)}else h=te(i,"xsl:value-of");h.removeAttribute("name"),i.append(h),i.removeAttribute("select")}else K(r,"name"),r.setAttribute("select","/datadom/attributes/"+f),l[f]||i.remove()}),[...v.querySelectorAll("[value]")].filter(i=>i.getAttribute("value").match(/\{(.*)\?\?(.*)\}/g)).forEach(i=>{const r=d(i,"value");r&&i.setAttribute("value",Ne(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 O=u(x,'call-template[name="slot"]'),H=i=>{const r=O.cloneNode(!0),f=d(i,"name");f&&r.firstElementChild.setAttribute("select",`'${f}'`);for(let g of i.childNodes)r.lastElementChild.append(g);return r};z(w,"slot",i=>i.parentNode.replaceChild(H(i),i));const p=le(x);return ee(p,{declaredAttributes:t,hardcodedAttributes:l,exposedAttributes:a}),p}async function be(e){return await new Promise((t,l)=>{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)):l(`${a.statusText} - ${e}`)},a.addEventListener("error",n=>l(n)),a.send()})}function ye(e,s,t=!1){if(e===s)return!0;if(typeof e!="object"||e===null||typeof s!="object"||s===null||Object.keys(e).length!==Object.keys(s).length)return t;for(let l in e)if(!(l in s)||!ye(e[l],s[l]))return t;return!0}const ge=e=>e.split("|").map(s=>s.trim()).filter(s=>s),Ae=(e,s)=>ge(s).map(t=>{let l=e.ownerDocument,a=n=>(e.append(n),n);if(t.includes("/")){const n=[],o=l.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,"",l))}).flat();function ne(e,s,t,l){if(!t.sliceProcessed)return t.sliceProcessed=1,Ae(e,s??"").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(M(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?"":I(d(y,"slice-value"),a);x(),a.append(D(n,u))}else{if("elements"in o)return x(),a.append(M(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=De(u)?D(n,u):M(u,"value",a.ownerDocument);a.append(w),a.setAttribute("value",u)}}return a})}function z(e,s,t){e.querySelectorAll&&[...e.querySelectorAll(s)].forEach(t)}const je=async(e,s)=>{if(!e||!e.trim())return[s];if(e.startsWith("#"))return(t=>{const l=t.querySelectorAll(e);return[...l.length?l:t.getRootNode().querySelectorAll(e)]})(s.parentElement);try{const[t,l]=e.split("#");if(e.charAt(0)===".")e=new URL(t,s.closest("[base]")?.getAttribute("base")||location).href;else try{e=(void 0)(t),l&&(e+="#"+l)}catch(n){console.error(n.message)}const a=await be(e);if(s.setAttributeNS("xml","base",e),l){const n=a.querySelectorAll("#"+l);return n.length?[...n]:(console.error("template not found",e+"#"+l),[s])}return[a]}catch{return[s]}};function ae(e,s){for(let n of e.attributes)try{const o=n.name;if(o.startsWith("xmlns"))continue;n.namespaceURI?(!s.hasAttributeNS(n.namespaceURI,o)||s.getAttributeNS(n.namespaceURI,o)!==n.value)&&s.setAttributeNS(n.namespaceURI,o,n.value):(!s.hasAttribute(o)||s.getAttribute(o)!==n.value)&&s.setAttribute(n.name,n.value),n.name==="value"&&(s.value=n.value)}catch(o){console.warn("attribute assignment error",o?.message||o)}const t=s.dceExportedAttributes,l=s.getAttribute("dce-exported-attributes"),a=l?new Set(l.split(" ")):null;for(let n of s.getAttributeNames())!e.hasAttribute(n)&&!t?.has(n)&&!a?.has(n)&&s.removeAttribute(n)}function ie(e,s=0){const t={};for(const l of e.childNodes){const a=d(l,"data-dce-id")||l.dceId||0;if(!t[a])a?t[a]=1:(t[a]=l.dceId=++s,l.setAttribute&&l.setAttribute("data-dce-id",l.dceId));else{const n=l.dceId=a+"-"+t[a]++;l.setAttribute&&l.setAttribute("data-dce-id",n)}l.childNodes.length&&ie(l)}}function ve(e,s,t){t=1*t;for(let l of e.childNodes)if((l.dceId??l.getAttribute("data-dce-id")*1)>t)return e.insertBefore(s,l);e.append(s)}function re(e,s){if(e.firstElementChild?.localName==="dce-root"&&s[0]?.localName!=="dce-root")return;if(!s.length)return e.firstElementChild?.localName!=="dce-root"&&de(e);const t={};for(let l of e.childNodes)t[l.dceId],me(l)?(l.data.trim(),t[l.dceId||0]=l):t[d(l,"data-dce-id")||0]=l;for(let l of[...s]){const a=d(l,"data-dce-id")||l.dceId,n=t[a];n?(me(l)?n.nodeValue!==l.nodeValue&&(n.nodeValue=l.nodeValue):(ae(l,n),(n.childNodes.length||l.childNodes.length)&&re(n,l.childNodes)),delete t[a]):ve(e,l,a)}for(let l of Object.values(t))l.localName!=="dce-root"&&l.remove()}function Ee(e,s){return e.hasAttribute(s)||e.setAttribute(s,crypto.randomUUID()),e.getAttribute(s)}const Ne=e=>[...e?.matchAll(/([^{}]*)(\{)([^}]+)}([^{}]*)/g)].map(t=>`${t[1]}{${W(t[3])}}${t[4]}`).join(""),W=e=>{if(!e.trim())return e;const s=e.split("??"),t=s.shift(),l=W(s.join("??"));return s.length?`concat( ${t} , substring( ${l} , (1+string-length( ${l} )) * string-length( ${t} ) ) )`:e},I=(e,s)=>{const t=e.split("??");if(t.length>1)return I(t[0],s)||I(t[1],s);e=W(e);const l=s.ownerDocument.evaluate(e,s);switch(l.resultType){case XPathResult.NUMBER_TYPE:return l.numberValue;case XPathResult.STRING_TYPE:return l.stringValue;case XPathResult.BOOLEAN_TYPE:return l.booleanValue}let a="";for(let n;n=l.iterateNext();)a+=n.textContent;return a},we="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(","),Te=(e,s)=>{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 l="if,choose,for-each".includes(e.localName)?(()=>{const a=C("span");return a.append(t),a})():t;if(e.parentElement)e.parentElement.replaceChild(l,e);else{const a=e.parentElement||s,n=[...a.childNodes];n.forEach((o,y)=>{o===e&&(n[y]=l)}),a.replaceChildren(...n)}};class Se extends HTMLElement{static observedAttributes=["src","tag","hidden"];async connectedCallback(){this.firstElementChild&&this.firstElementChild.localName!=="template"&&console.log(`custom-element used without template wrapping content
+</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:U(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"),f=r.replace(/hasBoolAttribute\((.*?)\)/g,(g,h,b,T,P)=>{const L=h.substring(1);return`(not($${L} = 'false') and ($${L} = '' or $${L} = '${L}' or $${L} = 'true' ))`});r!==f&&i.setAttribute("test",f)}),[...v.querySelectorAll("dce-root>attribute")].forEach(i=>{K(i,"namespace,name,select");const r=te(i,"xsl:param"),f=d(i,"name");if(t.push(f),i.childNodes.length&&(l[f]=i.textContent),w.append(r),i.hasAttribute("select")){a[f]=d(i,"select"),K(r,"select,name");let g=d(i,"select").split("??"),h;if(g?.length>1){r.removeAttribute("select");const b=u(x,'template[match="ignore"]>choose').cloneNode(!0);F(b.firstElementChild).append(D(b,"{"+g[0]+"}")),b.firstElementChild.setAttribute("test",g[0]);for(let T=1;T<g.length-1;T++){const P=b.firstElementChild.cloneNode(!0);F(P).append(D(b,"{"+g[T]+"}")),P.setAttribute("test",g[T]),b.insertBefore(P,b.lastElementChild)}F(b.lastElementChild).append(D(b,"{"+g[g.length-1]+"}")),r.append(b),h=b.cloneNode(!0)}else h=te(i,"xsl:value-of");h.removeAttribute("name"),i.append(h),i.removeAttribute("select")}else K(r,"name"),r.setAttribute("select","/datadom/attributes/"+f),l[f]||i.remove()}),[...v.querySelectorAll("[value]")].filter(i=>i.getAttribute("value").match(/\{(.*)\?\?(.*)\}/g)).forEach(i=>{const r=d(i,"value");r&&i.setAttribute("value",Ne(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 O=u(x,'call-template[name="slot"]'),H=i=>{const r=O.cloneNode(!0),f=d(i,"name");f&&r.firstElementChild.setAttribute("select",`'${f}'`);for(let g of i.childNodes)r.lastElementChild.append(g);return r};z(w,"slot",i=>i.parentNode.replaceChild(H(i),i));const p=le(x);return ee(p,{declaredAttributes:t,hardcodedAttributes:l,exposedAttributes:a}),p}async function be(e){return await new Promise((t,l)=>{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)):l(`${a.statusText} - ${e}`)},a.addEventListener("error",n=>l(n)),a.send()})}function ye(e,s,t=!1){if(e===s)return!0;if(typeof e!="object"||e===null||typeof s!="object"||s===null||Object.keys(e).length!==Object.keys(s).length)return t;for(let l in e)if(!(l in s)||!ye(e[l],s[l]))return t;return!0}const ge=e=>e.split("|").map(s=>s.trim()).filter(s=>s),Ae=(e,s)=>ge(s).map(t=>{let l=e.ownerDocument,a=n=>(e.append(n),n);if(t.includes("/")){const n=[],o=l.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,"",l))}).flat();function ne(e,s,t,l){if(!t.sliceProcessed)return t.sliceProcessed=1,Ae(e,s??"").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(M(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?"":I(d(y,"slice-value"),a);x(),a.append(D(n,u))}else{if("elements"in o)return x(),a.append(M(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=De(u)?D(n,u):M(u,"value",a.ownerDocument);a.append(w),a.setAttribute("value",u)}}return a})}function z(e,s,t){e.querySelectorAll&&[...e.querySelectorAll(s)].forEach(t)}const je=async(e,s)=>{if(!e||!e.trim())return[s];if(e.startsWith("#"))return(t=>{const l=t.querySelectorAll(e);return[...l.length?l:t.getRootNode().querySelectorAll(e)]})(s.parentElement);try{const[t,l]=e.split("#");if(e.charAt(0)===".")e=new URL(t,s.closest("[base]")?.getAttribute("base")||location).href;else try{e=(void 0)(t),l&&(e+="#"+l)}catch(n){console.error(n.message)}const a=await be(e);if(s.setAttributeNS("xml","base",e),l){const n=a.querySelectorAll("#"+l);return n.length?[...n]:(console.error("template not found",e+"#"+l),[s])}return[a]}catch{return[s]}};function ae(e,s){for(let n of e.attributes)try{const o=n.name;if(o.startsWith("xmlns"))continue;n.namespaceURI?(!s.hasAttributeNS(n.namespaceURI,o)||s.getAttributeNS(n.namespaceURI,o)!==n.value)&&s.setAttributeNS(n.namespaceURI,o,n.value):(!s.hasAttribute(o)||s.getAttribute(o)!==n.value)&&s.setAttribute(n.name,n.value),n.name==="value"&&(s.value=n.value)}catch(o){console.warn("attribute assignment error",o?.message||o)}const t=s.dceExportedAttributes,l=s.getAttribute("dce-exported-attributes"),a=l?new Set(l.split(" ")):null;for(let n of s.getAttributeNames())!e.hasAttribute(n)&&!t?.has(n)&&!a?.has(n)&&s.removeAttribute(n)}function ie(e,s=0){const t={};for(const l of e.childNodes){const a=d(l,"data-dce-id")||l.dceId||0;if(!t[a])a?t[a]=1:(t[a]=l.dceId=++s,l.setAttribute&&l.setAttribute("data-dce-id",l.dceId));else{const n=l.dceId=a+"-"+t[a]++;l.setAttribute&&l.setAttribute("data-dce-id",n)}l.childNodes.length&&ie(l)}}function ve(e,s,t){t=1*t;for(let l of e.childNodes)if((l.dceId??l.getAttribute("data-dce-id")*1)>t)return e.insertBefore(s,l);e.append(s)}function re(e,s){if(e.firstElementChild?.localName==="dce-root"&&s[0]?.localName!=="dce-root")return;if(!s.length)return e.firstElementChild?.localName!=="dce-root"&&de(e);const t={};for(let l of e.childNodes)t[l.dceId],me(l)?(l.data.trim(),t[l.dceId||0]=l):t[d(l,"data-dce-id")||0]=l;for(let l of[...s]){const a=d(l,"data-dce-id")||l.dceId,n=t[a];n?(me(l)?n.nodeValue!==l.nodeValue&&(n.nodeValue=l.nodeValue):(ae(l,n),(n.childNodes.length||l.childNodes.length)&&re(n,l.childNodes)),delete t[a]):ve(e,l,a)}for(let l of Object.values(t))l.localName!=="dce-root"&&l.remove()}function Ee(e,s){return e.hasAttribute(s)||e.setAttribute(s,crypto.randomUUID()),e.getAttribute(s)}const Ne=e=>[...e?.matchAll(/([^{}]*)(\{)([^}]+)}([^{}]*)/g)].map(t=>`${t[1]}{${W(t[3])}}${t[4]}`).join(""),W=e=>{if(!e.trim())return e;const s=e.split("??"),t=s.shift(),l=W(s.join("??"));return s.length?`concat( ${t} , substring( ${l} , (1+string-length( ${l} )) * string-length( ${t} ) ) )`:e},I=(e,s)=>{const t=e.split("??");if(t.length>1)return I(t[0],s)||I(t[1],s);e=W(e);const l=s.ownerDocument.evaluate(e,s);switch(l.resultType){case XPathResult.NUMBER_TYPE:return l.numberValue;case XPathResult.STRING_TYPE:return l.stringValue;case XPathResult.BOOLEAN_TYPE:return l.booleanValue}let a="";for(let n;n=l.iterateNext();)a+=n.textContent;return a},we="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(","),Te=(e,s)=>{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 l="if,choose,for-each".includes(e.localName)?(()=>{const a=e.parentElement;if(!a||a.childNodes.length===1)return t;const n=C("span");return n.append(t),n})():t;if(e.parentElement)e.parentElement.replaceChild(l,e);else{const a=e.parentElement||s,n=[...a.childNodes];n.forEach((o,y)=>{o===e&&(n[y]=l)}),a.replaceChildren(...n)}};class Se 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 s=await je(d(this,"src"),this),t=d(this,"tag"),l=t||"dce-"+crypto.randomUUID();for(const p of s)z(p.templateNode||p.content||p,"style",i=>{const r=i.closest("slot"),f=r?`slot[name="${r.name}"]`:"";i.innerHTML=`${l} ${f}{${i.innerHTML}}`,this.append(i)});const a=s.map(p=>xe(p)),n=a.map((p,i)=>{i=new XSLTProcessor;try{i.importStylesheet(p)}catch(r){console.error(r,U(p))}return i});Object.defineProperty(this,"xsltString",{get:()=>a.map(p=>U(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(ge).flat(),{declaredAttributes:v,hardcodedAttributes:u,exposedAttributes:w}=a[0],oe=new Set([...Object.keys(u),...Object.keys(w)]);class O extends HTMLElement{static get observedAttributes(){return v}#e=0;get dceExportedAttributes(){return oe}connectedCallback(){let i=se(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=se(c.content.childNodes);for(const E of i)if(E.localName==="style"){const m=Ee(this,"data-dce-style");E.innerHTML=`${l}[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=X("<datadom/>").documentElement,f=(c,E="")=>(m=>(E&&m.append(D(r,E)),m))(r.ownerDocument.createElement(c)),g=_(r,"payload",i,Le);pe(g),fe(g),this.innerHTML="";const h=_(r,"attributes",this.attributes,c=>f(c.nodeName,c.value)),b=c=>this.hasAttribute(c)||[...h.children].find(E=>E.localName===c);ae(this,h),Object.keys(u).map(c=>b(c)||h.append(f(c,u[c]))),Object.keys(w).map(c=>b(c)||h.append(f(c))),_(r,"dataset",Object.keys(this.dataset),c=>f(c,this.dataset[c]));const T=_(r,"slice",x,c=>f(c,"")),P=c=>I(c,T);this.xml=r;const L=[],ce=()=>{const c={};for(let E;E=L.pop();){const m=d(E.sliceElement,"slice");c[m]||(ne(T,m,E),c[m]=E)}Object.keys(c).length!==0&&B()};let Y;this.onSlice=c=>{L.push(c),Y||(Y=setTimeout(()=>{ce(),Y=0},1))};const B=this.transform=()=>{if(this.#e)debugger;this.#e=1;const c=()=>{n.map((A,S)=>{const V=A.transformToFragment(r.ownerDocument,document);return V||console.error(`XSLT transformation error. xsl:
 `,U(a[S]),`

package/dist/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epa-wg/custom-element-dist",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -19,7 +19,7 @@
     "tt": "vitest --coverage.enabled --coverage.all --no-file-parallelism --watch --browser.headless=false src/stories/external-template.test.stories.ts "
   },
   "dependencies": {
-    "@epa-wg/custom-element": "0.0.35"
+    "@epa-wg/custom-element": "0.0.37"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "8.5.3",
@@ -35,8 +35,8 @@
     "@vitest/coverage-istanbul": "3.0.5",
     "coverage-svg": "0.0.3",
     "lit": "3.2.1",
-    "msw": "2.7.0",
-    "msw-storybook-addon": "2.0.4",
+    "msw": "2.12.7",
+    "msw-storybook-addon": "2.0.6",
     "playwright": "1.50.1",
     "storybook": "8.5.3",
     "typescript": "5.7.3",

package/public/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/src/custom-element/custom-element.js

@@ -682,6 +682,9 @@ export const toXsl = (el, defParent) => {
     while(el.firstChild)
         x.append(el.firstChild);
     const replacement = 'if,choose,for-each'.includes(el.localName) ? (() => {
+        const parent = el.parentElement;
+        if( !parent || parent.childNodes.length ===1 )
+            return x;
         const span = create('span');
         span.append(x);
         return span;