@epa-wg/custom-element-dist 0.0.26 → 0.0.28

package/dist/custom-element-CUsSENWc.cjs

@@ -0,0 +1,97 @@
+"use strict";const Y="http://www.w3.org/1999/XSL/Transform",k="http://www.w3.org/1999/xhtml",Ne="http://exslt.org/common",f=(e,l)=>e.getAttribute?.(l),te=e=>e.nodeType===3,Ae=e=>typeof e=="string",Te=e=>e&&typeof e.nodeType=="number",L=(e,l)=>(e.ownerDocument||e).createTextNode(l),ne=e=>{for(;e.firstChild;)e.firstChild.remove();return e},V=e=>(e.getAttributeNames().map(l=>e.removeAttribute(l)),ne(e)),ae=e=>(e?.setAttribute("xmlns:xsl",Y),e),ie=e=>(e?.setAttribute("xmlns:xhtml",k),ae(e)),oe=e=>/^[_a-zA-Z][-_:a-zA-Z0-9]*$/.test(e),T=(e,l="",t=document)=>{const s=i=>(r=>(l&&r.append(L(t.ownerDocument||t,l)),r))((t.ownerDocument||t).createElement(i));if(oe(e))return s(e);const n=s("dce-object");return n.setAttribute("dce-object-name",e),n},se=(e,l)=>{const t=e.ownerDocument.createElementNS(e.namespaceURI,l);for(let s of e.attributes)t.setAttribute(s.name,s.value);for(;e.firstChild;)t.append(e.firstChild);return t};function P(e){return new DOMParser().parseFromString(e,"application/xml")}function M(e){return new XMLSerializer().serializeToString(e)}function H(e,l,t,s){const n=x=>e.ownerDocument.createElement(x),r=((x,p,u)=>(p.append(u=n(x)),u))(l,e);return[...t].forEach(x=>r.append(s(x))),r}function we(e){return e.slot||(e.setAttribute||(e=T("span",e.textContent.replaceAll(`
+`,""))),e.setAttribute("slot","")),e}function le(e,l){e.getAttributeNames().forEach(t=>l.includes(t)||e.removeAttribute(t))}const G=e=>[...e].filter(l=>!(l.nodeType===3&&l.data.trim()===""));function $(e,l,t){const s=typeof e;if(s==="string")return T(l,e,t);if(s==="number")return T(l,""+e,t);if(e instanceof Array){const i=T("array","",t);return e.map(r=>i.append($(r,l,t))),i}if(e instanceof FormData){const i=T("form-data","",t);for(const r of e)i.append($(r[1],r[0],t));return i}const n=T(l,"",t);for(let i in e)Te(e[i])||typeof e[i]=="function"||e[i]instanceof Window||(typeof e[i]!="object"&&oe(i)?n.setAttribute(i,e[i]):n.append($(e[i],i,t)));return n}function Z(e){if(D(e,"*",l=>[...l.childNodes].filter(t=>t.nodeType===3&&t.parentNode.localName!=="style"&&t.data).forEach(t=>{const s=t.data,n=s.matchAll(/{([^}]*)}/g);if(n){let i=0,r=p=>L(t,p),x=[];if([...n].forEach(p=>{p.index>i&&x.push(r(p.input.substring(i,p.index)));const u=e.querySelector("value-of").cloneNode();u.setAttribute("select",p[1]),x.push(u),i=p.index+p[0].length}),i<s.length&&x.push(r(s.substring(i,s.length))),x.length){for(let p of x)l.insertBefore(p,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 re(e,l="xsl:stylesheet"){if(e.tagName===l||e.documentElement?.tagName===l)return Z(e);const t=P(`<xsl:stylesheet version="1.0" xmlns:xsl="${Y}" xmlns:xhtml="${k}" xmlns:exsl="${Ne}" exclude-result-prefixes="exsl" >
+    <xsl:output method="xml"/>
+        <xsl:template match="/"><dce-root xmlns="${k}"><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="*|@*|text()"/>
+        </xsl:element>
+        <xsl:for-each select="*">
+            <xsl:copy>
+                <xsl:attribute name="for" >^</xsl:attribute>
+                <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
+            </xsl:copy>
+        </xsl:for-each>
+    </xsl:template>
+</xsl:stylesheet>`),s=new XSLTProcessor,n=(a=>{D(a,"custom-element",b=>{b.firstElementChild.localName==="template"&&([...b.firstElementChild.content.childNodes].forEach(y=>b.append(y)),b.firstElementChild.remove())}),D(a,"script",b=>b.remove());const c=a.content??a.firstElementChild?.content??a.body??a;be.forEach(b=>D(c,b,y=>ye(y,c)));const N=a.firstElementChild?.content||a.content,E=b=>{const y=P("<xhtml/>"),j=y.importNode(b,!0);return y.replaceChild(j,y.documentElement),ie(j)};if(N){const b=T("div");return[...N.childNodes].map(y=>b.append(y.cloneNode(!0))),E(b)}return E(a.documentElement||a.body||a)})(e),i=P(`<xsl:stylesheet version="1.0"
+        xmlns:xsl="${Y}"
+        xmlns:xhtml="${k}"
+        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>`);s.importStylesheet(t);const r=s.transformToFragment(n,document),x=(a,c)=>a.querySelector(c),p=x(i,'template[mode="payload"]');if(!r)return console.error("transformation error",{xml:n.outerHTML,xsl:M(t)});if(r.firstElementChild.localName!=="dce-root"){const a=r.ownerDocument.createElement("dce-root");[...r.childNodes].forEach(c=>a.append(c)),r.append(a)}const u=[];[...r.querySelectorAll("dce-root>attribute")].forEach(a=>{le(a,"namespace,name,select");const c=se(a,"xsl:param"),N=f(a,"name");p.append(c),le(c,"select,name");let E=f(c,"select")?.split("??");E||(E=["//"+N,`'${c.textContent}'`],V(c),c.setAttribute("name",N));let b;if(E?.length>1){c.removeAttribute("select");const y=x(i,'template[match="ignore"]>choose').cloneNode(!0);V(y.firstElementChild).append(L(y,"{"+E[0]+"}")),V(y.lastElementChild).append(L(y,"{"+E[1]+"}")),y.firstElementChild.setAttribute("test",E[0]),c.append(y),b=y.cloneNode(!0)}else b=se(a,"xsl:value-of");b.removeAttribute("name"),a.append(b),a.removeAttribute("select"),u.push(c)}),[...r.querySelectorAll("[value]")].filter(a=>a.getAttribute("value").match(/\{(.*)\?\?(.*)\}/g)).forEach(a=>{const c=f(a,"value");c&&a.setAttribute("value",xe(c))});for(const a of r.childNodes)p.append(i.importNode(a,!0));[...p.getElementsByTagName("xsl:template")].forEach(a=>p.ownerDocument.documentElement.append(a));const q=x(i,'call-template[name="slot"]'),d=a=>{const c=q.cloneNode(!0),N=f(a,"name");N&&c.firstElementChild.setAttribute("select",`'${N}'`);for(let E of a.childNodes)c.lastElementChild.append(E);return c};D(p,"slot",a=>a.parentNode.replaceChild(d(a),a));const m=Z(i);return m.params=u,m}async function ce(e){return await new Promise((t,s)=>{const n=new XMLHttpRequest;n.open("GET",e),n.responseType="document",n.onload=()=>{n.readyState===n.DONE&&n.status===200?t(n.responseXML?.body||n.responseXML||T("div",n.responseText)):s(`${n.statusText} - ${e}`)},n.addEventListener("error",i=>s(i)),n.send()})}function me(e,l,t=!1){if(e===l)return!0;if(typeof e!="object"||e===null||typeof l!="object"||l===null||Object.keys(e).length!==Object.keys(l).length)return t;for(let s in e)if(!(s in l)||!me(e[s],l[s]))return t;return!0}const ue=e=>e.split("|").map(l=>l.trim()).filter(l=>l),de=(e,l)=>ue(l).map(t=>{let s=e.ownerDocument,n=i=>(e.append(i),i);if(t.includes("/")){const i=[],r=s.evaluate(t,e);for(let x;x=r.iterateNext();)i.push(x);return i}return[...e.childNodes].find(i=>i.localName===t)||n(T(t,"",s))}).flat();function J(e,l,t,s){if(!t.sliceProcessed)return t.sliceProcessed=1,de(e,l??"").map(n=>{const i=e.ownerDocument,r=t.sliceEventSource,x=t.sliceElement,p=()=>[...n.childNodes].filter(u=>u.nodeType===3||u.localName==="value"||u.localName==="form-data").map(u=>u.remove());if(r.getAttributeNames().map(u=>n.setAttribute(u,f(r,u))),[...n.childNodes].filter(u=>u.localName==="event").map(u=>u.remove()),"validationMessage"in r&&n.setAttribute("validation-message",r.validationMessage),t.type==="init"&&p(),n.append($(t,"event",i)),x.hasAttribute("slice-value")){r.value===void 0?n.removeAttribute("value"):n.setAttribute("value",r.value);const u=z(f(x,"slice-value"),n);p(),n.append(L(i,u))}else{if("elements"in r)return p(),n.append($(new FormData(r),"value",n.ownerDocument)),n;const u=r.value??f(r,"value");p(),u==null?[...n.childNodes].filter(w=>w.localName!=="event").map(w=>w.remove()):Ae(u)?n.append(L(i,u)):n.append($(u,"value",n.ownerDocument))}return n})}function D(e,l,t){e.querySelectorAll&&[...e.querySelectorAll(l)].forEach(t)}const Se=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=(void 0)(t),s&&(e+="#"+s)}catch(i){console.error(i.message)}const n=await ce(e);if(l.setAttributeNS("xml","base",e),s){const i=n.querySelectorAll("#"+s);return i.length?[...i]:(console.error("template not found",e+"#"+s),[l])}return[n]}catch{return[l]}};function pe(e,l){for(let t of e.attributes)t.namespaceURI?l.setAttributeNS(t.namespaceURI,t.name,t.value):l.setAttribute(t.name,t.value),t.name==="value"&&(l.value=t.value)}function K(e,l=0){const t={};for(const s of e.childNodes){const n=f(s,"data-dce-id")||s.dceId||0;if(!t[n])n?t[n]=1:(t[n]=s.dceId=++l,s.setAttribute&&s.setAttribute("data-dce-id",s.dceId));else{const i=s.dceId=n+"-"+t[n]++;s.setAttribute&&s.setAttribute("data-dce-id",i)}s.childNodes.length&&K(s)}}function fe(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 Q(e,l){if(e.firstElementChild?.localName==="dce-root"&&l[0].localName!=="dce-root")return;if(!l.length)return e.firstElementChild?.localName!=="dce-root"&&ne(e);const t={};for(let s of e.childNodes)t[s.dceId],te(s)?(s.data.trim(),t[s.dceId||0]=s):t[f(s,"data-dce-id")||0]=s;for(let s of[...l]){const n=f(s,"data-dce-id")||s.dceId,i=t[n];i?(te(s)?i.nodeValue!==s.nodeValue&&(i.nodeValue=s.nodeValue):(pe(s,i),(i.childNodes.length||s.childNodes.length)&&Q(i,s.childNodes)),delete t[n]):fe(e,s,n)}for(let s of Object.values(t))s.localName!=="dce-root"&&s.remove()}function he(e,l){return e.hasAttribute(l)||e.setAttribute(l,crypto.randomUUID()),e.getAttribute(l)}const xe=e=>[...e?.matchAll(/([^{}]*)(\{)([^}]+)}([^{}]*)/g)].map(t=>`${t[1]}{${O(t[3])}}${t[4]}`).join(""),O=e=>{if(!e.trim())return e;const l=e.split("??"),t=l.shift(),s=O(l.join("??"));return l.length?`concat( ${t} , substring( ${s} , (1+string-length( ${s} )) * string-length( ${t} ) ) )`:e},z=(e,l)=>{const t=e.split("??");if(t.length>1)return z(t[0],l)||z(t[1],l);e=O(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 n="";for(let i;i=s.iterateNext();)n+=i.textContent;return n},be="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(","),ye=(e,l)=>{const t=T("xsl:"+e.localName);for(let s of e.attributes)t.setAttribute(s.name,s.value);for(;e.firstChild;)t.append(e.firstChild);if(e.parentElement)e.parentElement.replaceChild(t,e);else{const s=e.parentElement||l,n=[...s.childNodes];n.forEach((i,r)=>{i===e&&(n[r]=t)}),s.replaceChildren(...n)}};class ge extends HTMLElement{static observedAttributes=["src","tag","hidden"];async connectedCallback(){this.firstElementChild&&this.firstElementChild.localName!=="template"&&console.warn(`custom-element used without template wrapping content
+`,this.outerHTML);const l=await Se(f(this,"src"),this),t=f(this,"tag"),s=t||"dce-"+crypto.randomUUID();for(const d of l)D(d.templateNode||d.content||d,"style",m=>{const a=m.closest("slot"),c=a?`slot[name="${a.name}"]`:"";m.innerHTML=`${s} ${c}{${m.innerHTML}}`,this.append(m)});const n=l.map(d=>re(d)),i=n.map((d,m)=>{m=new XSLTProcessor;try{m.importStylesheet(d)}catch(a){console.error(a,M(d))}return m});Object.defineProperty(this,"xsltString",{get:()=>n.map(d=>M(d)).join(`
+`)});const r=this,x=[...this.templateNode.querySelectorAll("[slice]")],p=x.map(d=>f(d,"slice")).filter(d=>!d.includes("/")).filter((d,m,a)=>a.indexOf(d)===m).map(ue).flat(),u=n.reduce((d,m)=>(m.params&&d.push(...m.params),d),[]);class w extends HTMLElement{static get observedAttributes(){return u.map(m=>f(m,"name"))}#e=0;connectedCallback(){let m=G(this.childNodes);if(this.firstElementChild?.tagName==="TEMPLATE"){this.firstElementChild!==this.lastElementChild&&console.error("payload should have TEMPLATE as only child",this.outerHTML);const h=this.firstElementChild;h.remove(),m=G(h.content.childNodes);for(const g of m)if(g.localName==="style"){const o=he(this,"data-dce-style");g.innerHTML=`${s}[data-dce-style="${o}"]{${g.innerHTML}}`,h.insertAdjacentElement("beforebegin",g)}else g.nodeType===1?h.insertAdjacentElement("beforebegin",g):g.nodeType===3&&h.insertAdjacentText("beforebegin",g.data)}const a=P("<datadom/>").documentElement,c=(h,g="")=>(o=>(g&&o.append(L(a,g)),o))(a.ownerDocument.createElement(h)),N=H(a,"payload",m,we);ae(N),ie(N),this.innerHTML="";const E=H(a,"attributes",this.attributes,h=>c(h.nodeName,h.value));H(a,"dataset",Object.keys(this.dataset),h=>c(h,this.dataset[h]));const b=H(a,"slice",p,h=>c(h,"")),y=h=>z(h,b);this.xml=a;const j=[],ee=()=>{const h={};for(let g;g=j.pop();){const o=f(g.sliceElement,"slice");h[o]||(J(b,o,g),h[o]=g)}Object.keys(h).length!==0&&U()};let _;this.onSlice=h=>{j.push(h),_||(_=setTimeout(()=>{ee(),_=0},1))};const U=this.transform=()=>{if(this.#e)debugger;this.#e=1,i.map((o,v)=>{const S=o.transformToFragment(a.ownerDocument,document);return S||console.error(`XSLT transformation error. xsl:
+`,M(n[v]),`
+xml:
+`,M(a)),S}).map(o=>{o&&(K(o),Q(this,o.childNodes))}),w.observedAttributes.map(o=>{let v=f(this.firstElementChild,o);v!==f(this,o)&&(this.setAttribute(o,v),this.#t(o,v))});function g(o){let v=o;if(o.localName==="slice"){const S=f(o,"for");if(S||(v=o.parentElement),S==="^")do v=v.previousElementSibling;while(v.localName==="slice");else v=this.querySelector(S);if(!v)return console.warn(`can not find selector in "slice for=${S}" `,o.outerHTML);f(o,"slice")||o.setAttribute("slice",f(o,"name"))}return v}D(this,"[slice],[slice-event]",o=>{let v=f(o,"slice-event");const S=o.hasAttribute("slice-value")||o.hasAttribute("value")||o.value,I=g(o);o.dceInitialized||(o.dceInitialized=1,I.hasAttribute("custom-validity")&&(v+=" change submit"),[...new Set((v||"change").split(" "))].forEach(ve=>I.addEventListener(ve,A=>{A.sliceElement=o,A.sliceEventSource=A.currentTarget||A.target,A.sliceProcessed=0;const Ee=J(b,f(A.sliceElement,"slice"),A);D(this,"[custom-validity]",X=>{if(!X.setCustomValidity)return;const W=f(X,"custom-validity");try{const R=W&&z(W,E);X.setCustomValidity(R===!0?"":R===!1?"invalid":R)}catch(R){console.error(R,"xPath",W)}});const B=f(I,"custom-validity"),C=B&&z(B,E),F=C===!0?"":C;if(B){if(o.setCustomValidity?o.setCustomValidity(F):o.validationMessage=F,Ee.map(X=>X.setAttribute("validation-message",F)),A.type==="submit")return C===!0?void 0:(setTimeout(U,1),!!C===C?(C||A.preventDefault(),C):C?(A.preventDefault(),!1):void 0);setTimeout(U,1)}this.onSlice(A)})),(!v||v.includes("init"))&&(S?this.onSlice({type:"init",target:I,sliceElement:o,sliceEventSource:I}):o.value=y(f(o,"slice"))))}),this.#e=0};U(),ee()}#t(m,a){m==="value"&&(this.value=a);let c=this.xml.querySelector(`attributes>${m}`);c?V(c).append(L(c,a)):(c=T(m,a,this.xml),this.xml.querySelector("attributes").append(c)),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{[m]:a}}))}attributeChangedCallback(m,a,c){!this.xml||this.#e||(this.#t(m,c),this.transform())}get dce(){return r}}const q=d=>{window.customElements.get(d)!==w&&window.customElements.define(d,w)};if(t)q(t);else{const d=s;this.setAttribute("tag",d),q(d);const m=document.createElement(d);this.getAttributeNames().forEach(a=>m.setAttribute(a,this.getAttribute(a))),m.append(...[...this.childNodes].filter(a=>a.localName!=="style")),this.append(m)}}get templateNode(){return this.firstElementChild?.tagName==="TEMPLATE"?this.firstElementChild.content:this}get dce(){return this}get xslt(){return P(this.xsltString)}}window.customElements.define("custom-element",ge);exports.CustomElement=ge;exports.appendByDceId=fe;exports.assureSlices=de;exports.assureUID=he;exports.assureUnique=K;exports.createXsltFromDom=re;exports.deepEqual=me;exports.evalCurly=xe;exports.event2slice=J;exports.merge=Q;exports.mergeAttr=pe;exports.obj2node=$;exports.sanitizeBlankText=G;exports.tagUid=Z;exports.toXsl=ye;exports.xPath=z;exports.xPathDefaults=O;exports.xhrTemplate=ce;exports.xml2dom=P;exports.xmlString=M;exports.xslTags=be;

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-CckoVsvO.cjs"),l=require("./http-request-DPrY7mGh.cjs"),t=require("./local-storage-Boafngui.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.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.obj2node=e.obj2node;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.LocationElement=a.LocationElement;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./custom-element-CUsSENWc.cjs"),l=require("./http-request-DPrY7mGh.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.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.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,30 +1,34 @@
-import { C as e } from "./custom-element-b7c_7Kz4.js";
-import { h as o, e as r, j as l, g as m, c as p, d as x, k as n, f as u, i as c, m as d, o as f, t as g, q as i, n as E, l as S, b as h, x as q, a as D, p as L } from "./custom-element-b7c_7Kz4.js";
-import { H as I } from "./http-request-BOvP4KTl.js";
-import { L as b, l as j } from "./local-storage-BqDEu2kF.js";
-import { L as y } from "./location-element-FJlONi2n.js";
+import { C as e } from "./custom-element-BOIPgtxz.js";
+import { h as o, e as l, j as r, g as m, c, d as n, k as x, f as p, i as g, m as i, o as u, s as d, t as f, q as S, n as E, l as I, b as h, x as q, a as D, p as L } from "./custom-element-BOIPgtxz.js";
+import { H as v } from "./http-request-BOvP4KTl.js";
+import { L as T, c as U, b as _, a as j, l as k } from "./local-storage-DzmNKzgN.js";
+import { L as B } from "./location-element-FJlONi2n.js";
 export {
   e as CustomElement,
-  I as HttpRequestElement,
-  b as LocalStorageElement,
-  y as LocationElement,
+  v as HttpRequestElement,
+  T as LocalStorageElement,
+  B as LocationElement,
   o as appendByDceId,
-  r as assureSlices,
-  l as assureUID,
+  l as assureSlices,
+  r as assureUID,
   m as assureUnique,
-  p as createXsltFromDom,
-  x as deepEqual,
+  c as createXsltFromDom,
+  n as deepEqual,
   e as default,
-  n as evalCurly,
-  u as event2slice,
-  j as localStorageSetItem,
-  c as merge,
-  d as mergeAttr,
-  f as obj2node,
-  g as tagUid,
-  i as toXsl,
+  x as evalCurly,
+  p as event2slice,
+  U as localStorageSetItem,
+  _ as localStorage_clear,
+  j as localStorage_removeItem,
+  k as localStorage_setItem,
+  g as merge,
+  i as mergeAttr,
+  u as obj2node,
+  d as sanitizeBlankText,
+  f as tagUid,
+  S as toXsl,
   E as xPath,
-  S as xPathDefaults,
+  I as xPathDefaults,
   h as xhrTemplate,
   q as xml2dom,
   D as xmlString,

package/dist/demo/a.svg

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

package/dist/demo/demo.css

@@ -4,13 +4,12 @@ html
 }
 body,nav{ display: flex; flex-wrap: wrap; align-content: stretch; gap: 1rem; }
 body>*{flex: auto;}
-nav{ flex-direction: column;}
-custom-element+*,
-custom-element+*+*,
-custom-element:not([tag]),
-dce-link,dce-1-slot,dce-2-slot,dce-3-slot,dce-4-slot,dce-2-slots,greet-element,pokemon-tile,
-dce-1,dce-2,dce-3,dce-4,dce-internal,dce-hash
-{ box-shadow: 0 0 0.5rem lime; padding: 1rem; display: inline-block; flex:1; }
+nav
+{   flex-direction: column;
+    dce-root{ box-shadow:none; padding: 0;}
+}
+
+html-demo-element *:has(>dce-root){ box-shadow: 0 0 0.5rem lime; padding: 1rem;  flex:1; display: block; }
 script{ display:none !important; }
 dd{ padding: 1rem;}
 p{ margin: 0;}

package/dist/demo/external-template.html

@@ -141,13 +141,13 @@
 <html-demo-element legend="6. HTML, SVG by ID within external file" description="Should render 👋, svg, formula">
     <a href="html-template.html">html-template.html</a>
     <template>
-        <custom-element src="html-template.html#wave">
+        <custom-element src="./html-template.html#wave">
             <template><i>loading HTML from templates file ...</i></template>
         </custom-element>
-        <custom-element src="html-template.html#dwc-logo">
+        <custom-element src="./html-template.html#dwc-logo">
             <template><i>loading SVG from templates file ...</i></template>
         </custom-element>
-        <custom-element src="html-template.html#sophomores-dream">
+        <custom-element src="./html-template.html#sophomores-dream">
             <template><i>loading MathML from HTML file ...</i></template>
         </custom-element>
     </template>

package/dist/demo/npm-versions-demo.html

@@ -4,8 +4,16 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>DOM merge - Declarative Custom Element implementation demo</title>
     <link rel="icon" href="./wc-square.svg"/>
-
+    <script type="importmap">
+        {
+          "imports": {
+            "@epa-wg/custom-element/": "../",
+            "@epa-wg/custom-element-dist/": "../"
+          }
+        }
+    </script>
     <script type="module" src="../http-request.js"></script>
+    <script type="module" src="../location-element.js"></script>
     <script type="module" src="../custom-element.js"></script>
     <style>
         @import "./demo.css";
@@ -40,16 +48,20 @@
 <html-demo-element legend="1. NPM package version picker"
                    description="defaults, last version should be preselected">
     <template>
-        <custom-element tag="npm-version" src="./npm-versions.html#npm-version"></custom-element>
-        <npm-version package-name="@epa-wg/custom-element-dist"></npm-version>
+        <custom-element src="./npm-versions.html#npm-version"
+                        package-name="@epa-wg/custom-element-dist"></custom-element>
     </template>
 </html-demo-element>
 
 <html-demo-element legend="2. preselected NPM package version picker"
-                   description="version 22 should be selected">
+                   description="version 22 should be selected and date shown">
     <template>
         <custom-element tag="custom-element-version" src="./npm-versions.html#npm-version"></custom-element>
-        <custom-element-version current-version="0.0.22" package-name="@epa-wg/custom-element"></custom-element-version>
+        <custom-element-version
+                package-name="@epa-wg/custom-element"
+                current-version="0.0.22"
+                show-date="true"
+        ></custom-element-version>
     </template>
 </html-demo-element>
 
@@ -90,11 +102,12 @@
 
 <html-demo-element legend="5. control version in URL"
                    description="">
-    1. <button onclick="window.location.hash = `#@epa-wg/custom-element-dist@0.0.26/storybook-static/index.html`">set in page URL</button>
-        (can be skipped when run from unpkg.com)<br/>
+    1. <button onclick="window.location.hash = `#@epa-wg/custom-element-dist@0.0.25/storybook-static/index.html`">set in page URL to version 0.0.25</button><br/>
     2. switch the package version in select and observe the URL change.
     <template>
-        <custom-element src="./npm-versions.html#npm-version-to-url" package-name="custom-element-dist" current-version="0.0.26"></custom-element>
+        <custom-element src="@epa-wg/custom-element-dist/demo/npm-versions.html#npm-version-to-url"
+                package-name="@epa-wg/custom-element-dist"
+                ></custom-element>
     </template>
 </html-demo-element>
 

package/dist/demo/npm-versions.html

@@ -4,6 +4,7 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <title>npm-version template</title>
     <link rel="icon" href="./wc-square.svg"/>
+
 </head>
 <body>
 
@@ -11,28 +12,29 @@
 <a href="./npm-versions-demo.html">docs</a>
 <template id="npm-version">
     <attribute name="package-name"></attribute>
-    <attribute name="current-version"></attribute>
+    <attribute name="current-version" aria-description="version to select"></attribute>
+    <attribute name="show-date" aria-description="set to 'true' to append the date to the version"></attribute>
     <attribute name="value" select="//selected-version"></attribute>
-
     <http-request
-            url="https://registry.npmjs.org/@epa-wg/custom-element-dist"
+            url="https://registry.npmjs.org/{$package-name}"
             method="GET"
             header-accept="application/json"
             slice="versions-ajax"></http-request>
 
-    <label><slot name="label">{$package-name} version:</slot>
+    <label>
+        <slot name="label"><var>{$package-name}</var> version:</slot>
         <xhtml:select slice="selected-version" autocomplete="off" name="version">
             <for-each select="//versions/*">
                 <option value="{./@version}">
                     <variable name="item-version">{./@version}</variable>
-                    { $item-version } - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}
+                    { $item-version }<if test="$show-date = 'true' "> - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}</if>
                 </option>
             </for-each>
             <for-each select="//versions/*">
                 <if test="./@version = $current-version">
                     <option selected value="{./@version}">
                         <variable name="item-version">{./@version}</variable>
-                        { $item-version } - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}
+                        { $item-version }<if test="$show-date = 'true' "> - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}</if>
                     </option>
                 </if>
             </for-each>
@@ -41,25 +43,52 @@
 </template>
 
 <template id="npm-version-to-url">
-            <variable name="url" select="//window-location/value/@href"></variable>
-            <variable name="current-version" >0{
-                substring-before(substring-after(substring($url, string-length(substring-before($url, '/')) - string-length(substring-before(substring-before($url, '/'), '@0')) + 2), '@0'), '/')
-            }</variable>
-            <location-element slice="window-location" live>
-                <if test=" not(//selected-version = $current-version ) and not(//selected-version = '')  ">
-                    <attribute name="src">{ concat( substring-before($url, $current-version),
-                                                    //selected-version,
-                                                    substring-after($url, $current-version) ) }</attribute>
-                    <attribute name="method">location.href</attribute>
-                </if>
-            </location-element>
-            <http-request
-                url="https://registry.npmjs.org/@epa-wg/custom-element-dist"
-                method="GET"
-                header-accept="application/json"
-                slice="versions-ajax" ></http-request>
+    <attribute name="package-name"></attribute>
+    <attribute name="value" select="//selected-version"></attribute>
+    <variable name="url" select="//window-location/value/@href"></variable>
+
+    <variable name="url-version">0{
+            substring-before(substring-after(substring($url, string-length(substring-before($url, '/')) -
+            string-length(substring-before(substring-before($url, '/'), '@0')) + 2), '@0'), '/')
+        }</variable>
 
-            <custom-element src="#npm-version" slice="selected-version"></custom-element>
-        </template>
+    <location-element slice="window-location" live>
+        <if test="//selected-version">
+            <if test=" not(//url-version = //selected-version ) ">
+                <attribute name="src">{ concat( substring-before($url, $url-version),
+                    //selected-version,
+                    substring-after($url, $url-version) ) }
+                </attribute>
+                <attribute name="method">location.href</attribute>
+            </if>
+        </if>
+    </location-element>
+
+    <http-request
+            url="https://registry.npmjs.org/{$package-name}"
+            method="GET"
+            header-accept="application/json"
+            slice="versions-ajax"></http-request>
+
+    <label>
+        <slot name="label">{$package-name} version:</slot>
+        <xhtml:select slice="selected-version" autocomplete="off" name="version">
+            <for-each select="//versions/*">
+                <option value="{./@version}">
+                    <variable name="item-version">{./@version}</variable>
+                    { $item-version } - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}
+                </option>
+            </for-each>
+            <for-each select="//versions/*">
+                <if test="./@version = $url-version">
+                    <option selected value="{./@version}">
+                        <variable name="item-version">{./@version}</variable>
+                        { $item-version } - { substring( //time/*[@dce-object-name = $item-version ], 1,10)}
+                    </option>
+                </if>
+            </for-each>
+        </xhtml:select>
+    </label>
+</template>
 </body>
 </html>

package/dist/demo/s.xml

@@ -1,28 +1,18 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <datadom>
     <payload xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
-        <span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
-        <npm-version xmlns="http://www.w3.org/1999/xhtml" slice="selected-version" package-name="@epa-wg/custom-element"
-                     slot=""></npm-version>
-        <span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
-        <p xmlns="http://www.w3.org/1999/xhtml" slot="">
-            <code>selected-version</code>
-            slice: {//selected-version}
-        </p>
-        <span xmlns="http://www.w3.org/1999/xhtml" slot=""></span>
+        <a xmlns="http://www.w3.org/1999/xhtml" href="#" data-dce-id="4" slot="">link 1</a>
+        <a xmlns="http://www.w3.org/1999/xhtml" href="#" data-dce-id="5" slot="">link 2</a>
+        <a xmlns="http://www.w3.org/1999/xhtml" href="#" data-dce-id="6" slot="">link 3</a>
     </payload>
     <attributes>
-        <tag>dce-bbc8e8b4-575f-40d3-9880-2f1d56d85d80</tag>
+        <xmlns/>
+        <justify>end</justify>
+        <data-dce-id>2</data-dce-id>
+        <direction>row</direction>
     </attributes>
-    <dataset/>
-    <slice>
-        <selected-version xmlns="" slice="selected-version" package-name="@epa-wg/custom-element" data-dce-id="2"
-                          current-version="" value="0.0.21">
-            <event isTrusted="false" sliceProcessed="1" type="change" eventPhase="2" bubbles="true" cancelable="false"
-                   defaultPrevented="false" composed="false" timeStamp="2225577.4000000954" returnValue="true"
-                   cancelBubble="false" NONE="0" CAPTURING_PHASE="1" AT_TARGET="2" BUBBLING_PHASE="3">
-                <detail package-name="@epa-wg/custom-element"/>
-            </event>
-        </selected-version>
-    </slice>
+    <dataset>
+        <dceId>2</dceId>
+    </dataset>
+    <slice/>
 </datadom>

package/dist/demo/s.xslt

@@ -1,78 +1,20 @@
-<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"
-                xmlns:dce="urn:schemas-epa-wg:dce" xmlns:exsl="http://exslt.org/common" version="1.0"
-                exclude-result-prefixes="exsl">
+<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce" xmlns:exsl="http://exslt.org/common" version="1.0" exclude-result-prefixes="exsl">
     <xsl:template match="ignore">
         <xsl:choose>
-            <xsl:when test="//attr">
-                <xsl:value-of select="//attr"/>
-            </xsl:when>
-            <xsl:otherwise>
-                <xsl:value-of select="def"/>
-            </xsl:otherwise>
-        </xsl:choose>
-        <xsl:value-of select="."/>
-    </xsl:template>
-    <xsl:template mode="payload" match="attributes">
-        <dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1">
-            <xsl:variable xmlns:xsl="http://www.w3.org/1999/XSL/Transform" name="methods">
-                <a xmlns="" href="https://developer.mozilla.org/en-US/docs/Web/API/Location/href" data-dce-id="2">
-                    location.href
-                </a>
-                <a xmlns="" href="https://developer.mozilla.org/en-US/docs/Web/API/Location/hash" data-dce-id="3">
-                    location.hash
-                </a>
-                <a xmlns="" href="https://developer.mozilla.org/en-US/docs/Web/API/Location/assign" data-dce-id="4">
-                    location.assign
-                </a>
-            </xsl:variable>
-            <fieldset xmlns="" data-dce-id="5">
-                <legend data-dce-id="6">
-                    <b data-dce-id="7">set-by</b>
-                </legend>
-                <xsl:for-each xmlns:xsl="http://www.w3.org/1999/XSL/Transform" select="$methods">
-                    <p data-dce-id="8">
-                        <label data-dce-id="9">
-                            <input type="radio" name="method" value="{.}" data-dce-id="10"/>
-                            <dce-text data-dce-id="11">
-                                <xsl:value-of select="."/>
-                            </dce-text>
-                        </label>
-                        <a class="infolink" href="https://developer.mozilla.org/en-US/docs/Web/API/Location/assign"
-                           data-dce-id="12">mdn
-                        </a>
-                    </p>
-                </xsl:for-each>
-                <label data-dce-id="13">
-                    <input type="radio" name="method" value="location.href" data-dce-id="14"/>
-                    <dce-text data-dce-id="15">location.href</dce-text>
-                </label>
-                <label data-dce-id="16">
-                    <input type="radio" name="method" value="location" data-dce-id="17"/>
-                    <dce-text data-dce-id="18">location</dce-text>
-                </label>
-                <label data-dce-id="19">
-                    <input type="radio" name="method" value="location.replace" data-dce-id="20"/>
-                    <dce-text data-dce-id="21">location.replace</dce-text>
-                </label>
-                <label data-dce-id="22">
-                    <input type="radio" name="method" value="location.assign" data-dce-id="23"/>
-                    <dce-text data-dce-id="24">location.assign</dce-text>
-                </label>
-                <label data-dce-id="25">
-                    <input type="radio" name="method" value="location.hash" data-dce-id="26"/>
-                    <dce-text data-dce-id="27">location.hash</dce-text>
-                </label>
-                <label data-dce-id="28">
-                    <input type="radio" name="method" value="history.pushState" data-dce-id="29"/>
-                    <dce-text data-dce-id="30">history.pushState</dce-text>
-                </label>
-                <label data-dce-id="31">
-                    <input type="radio" name="method" value="history.replaceState" data-dce-id="32"/>
-                    <dce-text data-dce-id="33">history.replaceState</dce-text>
-                </label>
-            </fieldset>
-        </dce-root>
-    </xsl:template>
+            <xsl:when test="//attr"><xsl:value-of select="//attr"/></xsl:when>
+            <xsl:otherwise><xsl:value-of select="def"/></xsl:otherwise>
+        </xsl:choose><xsl:value-of select="."/></xsl:template>
+    <xsl:template mode="payload" match="attributes"><xsl:param name="direction"><xsl:choose>
+            <xsl:when test="//direction"><xsl:value-of select="//direction"/></xsl:when>
+            <xsl:otherwise><xsl:value-of select="'row'"/></xsl:otherwise>
+        </xsl:choose></xsl:param><dce-root xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" data-dce-id="1"><xsl:attribute name="direction"><xsl:choose>
+            <xsl:when test="//direction"><xsl:value-of select="//direction"/></xsl:when>
+            <xsl:otherwise><xsl:value-of select="'row'"/></xsl:otherwise>
+        </xsl:choose></xsl:attribute><xsl:call-template name="slot">
+            <xsl:with-param name="slotname" select="''"/>
+            <xsl:with-param name="defaultvalue"/>
+        </xsl:call-template></dce-root></xsl:template>
     <xsl:template match="/">
         <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
     </xsl:template>
@@ -81,7 +23,7 @@
         <xsl:param name="defaultvalue"/>
         <xsl:choose>
             <xsl:when test="//payload/*[@slot=$slotname]">
-                <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
+               <xsl:copy-of select="//payload/*[@slot=$slotname]"/>
             </xsl:when>
             <xsl:otherwise>
                 <xsl:copy-of select="$defaultvalue"/>