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

package/dist/custom-element-Dtzhbjkc.cjs

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

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-BbJMY20-.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;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./custom-element-Dtzhbjkc.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.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,36 +1,38 @@
-import { C as e } from "./custom-element-CoRNKeEP.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-CoRNKeEP.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";
+import { C as e } from "./custom-element-D2wf_rqP.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-D2wf_rqP.js";
+import { H as T } from "./http-request-BOvP4KTl.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";
 export {
   e as CustomElement,
-  v as HttpRequestElement,
-  T as LocalStorageElement,
-  B as LocationElement,
+  T as HttpRequestElement,
+  _ as LocalStorageElement,
+  H as LocationElement,
   o as appendByDceId,
   l as assureSlices,
   r as assureUID,
   m as assureUnique,
-  c as createXsltFromDom,
-  n as deepEqual,
+  c as cloneAs,
+  n as createXsltFromDom,
+  x as deepEqual,
   e as default,
-  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,
-  I as xPathDefaults,
-  h as xhrTemplate,
-  q as xml2dom,
-  D as xmlString,
-  L as xslTags
+  p as evalCurly,
+  g as event2slice,
+  j as localStorageSetItem,
+  k as localStorage_clear,
+  y as localStorage_removeItem,
+  A as localStorage_setItem,
+  i as merge,
+  u as mergeAttr,
+  d as mix,
+  f as obj2node,
+  S as sanitizeBlankText,
+  E as tagUid,
+  I as toXsl,
+  h as xPath,
+  q as xPathDefaults,
+  D as xhrTemplate,
+  L as xml2dom,
+  b as xmlString,
+  v as xslTags
 };

package/dist/demo/a.html

@@ -1,8 +1,8 @@
 <!DOCTYPE html>
-<html lang="en" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml">
+<html lang="en">
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-    <title>Data slices - Declarative Custom Element implementation demo</title>
+    <title>http-request Declarative Custom Element implementation demo</title>
     <link rel="icon" href="./wc-square.svg"/>
 
     <script type="module" src="../http-request.js"></script>
@@ -10,51 +10,64 @@
     <style>
         @import "./demo.css";
 
-        label {
-            display: flex;
+        button {
+            display: inline-flex;
+            flex-direction: column;
+            align-items: center;
+            flex: auto;
+            box-shadow: inset silver 0 0 1rem;
+            min-width: 12rem;
+            padding: 1rem;
+            color: coral;
+            text-shadow: 1px 1px silver;
+            font-weight: bolder;
         }
 
-        label:has(input[type="text"],input[type="password"],input:not([type]) ) {
-            flex-direction: column;
+        button img {
+            max-height: 10vw;
+            min-height: 4rem;
         }
 
-        nav {
-            max-width: 32em;
+        table {
+            min-width: 16rem;
+        }
+
+        td {
+            border-bottom: 1px solid silver;
+        }
+
+        tfoot td {
+            border-bottom: none;
+        }
+
+        td, th {
+            text-align: right;
         }
-    </style>
-    <!-- https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/custom-error-message.html
-         todo: apply setCustomValidity( warningStr )
-    -->
 
+        caption {
+            padding: 1rem;
+            font-weight: bolder;
+            font-family: sans-serif;
+        }
+
+        code {
+            text-align: right;
+            min-width: 3rem;
+        }
+
+        svg {
+            max-height: 3rem;
+        }
+    </style>
 </head>
 <body>
 
-<fieldset>
-    <legend><b style="color:green">green</b> in instance style can be overridden in payload as <i
-            style="color:red">red</i> in 1st instance
-    </legend>
-    <custom-element tag="dce-3">
-        <template>
-            <u>
-                <slot>is green</slot>
-            </u>
-        </template>
-        <style>dce-3 {
-            color: green
-        }</style>
-    </custom-element>
-   <u>should be</u> <i style="color:red">red</i>:
-    <dce-3 id="dce32">
-        <template>
-            <style> color:red; </style>
-            <u>red</u>
-        </template>
-    </dce-3> <br/>
-    should be GREEN:
-    <dce-3 id="dce31">green</dce-3>
-</fieldset>
-
-<script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
+
+
+        <custom-element src="./html-template.html#dwc-logo">
+            <template><i>loading SVG from templates file ...</i></template>
+        </custom-element>
+
 
 </body>
 </html>

package/dist/demo/data-slices.html

@@ -233,8 +233,8 @@
     </template>
 </html-demo-element>
 
-<html-demo-element legend="13. Radio buttons use"
-                   description="The value is empty when unchecked. Otherwise taken either from slice-value or value attribute.">
+<html-demo-element legend="13. Radio group"
+                   description="The value propagated into slice from the last checked radiobutton.">
     <p>Check the radiobutton to see the value in slice</p>
     <template>
         <custom-element>

package/dist/demo/external-template.html

@@ -57,6 +57,7 @@
 
         svg {
             max-height: 3rem;
+            min-height: 2rem;
         }
     </style>
 </head>

package/dist/demo/form.html

@@ -233,6 +233,48 @@
     </template>
 </html-demo-element>
 
+<html-demo-element legend="5. using custom-element as form input"
+                   description="bypass value to container form "
+                   id="sample-5"
+    >
+    <ol>
+        <li> select radio in top group</li>
+        <li> observe the fruit selected on the left</li>
+        <li> observe the warning message bellow button</li>
+        <li> next button does not submit the form</li>
+        <li> select radio in bottom group</li>
+        <li> observe the fruit selected on the right</li>
+        <li> same fruit selection would eliminate the warning and
+            allow the form submission</li>
+        <li> after submit, observe the URL parameters 'inp-1=🍏&inp-2=🍏'  </li>
+    </ol>
+    <template>
+        <custom-element tag="sample-input">
+            <template>
+                <attribute name="name" ></attribute>
+                <attribute name="value" select="//val"></attribute>
+                {$name}
+                <label><input type="radio" name="{$name}" slice="val" value="🍏">Apple</label>
+                <label><input type="radio" name="{$name}" slice="val" value="🍌">Banana</label>
+            </template>
+        </custom-element>
+        <custom-element>
+            <template>
+                <form slice="cart-form" action="#sample-5"
+                    custom-validity="(//inp1 = //inp2) ?? 'pick same fruit'"
+                    >
+                    <sample-input slice="inp1" name="inp-1"></sample-input>
+                    <sample-input slice="inp2" name="inp-2"></sample-input>
+                    <button>Next</button>
+                    Picked :{//inp1} and {//inp2}
+
+                    <p>{//cart-form/@validation-message}</p>
+                </form>
+            </template>
+        </custom-element>
+    </template>
+</html-demo-element>
+
 <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>
 
 </body>

package/dist/demo/hex-grid-dce.html

@@ -107,7 +107,7 @@
     <img src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Svelte_Logo.svg" alt="Svelte"/>
     <img src="https://www.solidjs.com/img/logo/without-wordmark/logo.svg" alt="SolidJS"/>
     <img src="https://www.svgrepo.com/show/354113/nextjs-icon.svg" alt="NextJS"/>
-    <img src="https://global.discourse-cdn.com/standard17/uploads/threejs/original/2X/b/be2f75f72751c11cbe1593c69a99a52900bf12cb.svg" alt="ThreeJS" href="https://threejs.org/"/>
+    <img src="https://threejs.org/files/favicon.ico" alt="ThreeJS" href="https://threejs.org/"/>
     <img src="https://www.blazejs.org/logo/icon.png" alt="BlazeJS"/>
     <img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/tailwindcss.webp" alt="Tailwind CSS"/>
     <img src="https://dmtgy0px4zdqn.cloudfront.net/images/integrations/flowbite.webp" alt="Flowbite"/>

package/dist/demo/hex-grid.html

@@ -52,7 +52,7 @@
         <img src="https://semantic-ui.com/images/logo.png" alt="Semantic UI" href="https://semantic-ui.com/"/>
         <img src="https://open-wc.org/35ded306.svg" alt="Open WC" href="https://open-wc.org/"/>
         <img src="https://storage.googleapis.com/cms-storage-bucket/4fd0db61df0567c0f352.png" alt="Flutter" href="https://flutter.dev/"/>
-        <img src="https://refine.dev/img/refine_favicon.svg" alt="Refine" href="https://refine.dev/"/>
+        <img src="https://refine.dev/img/favicon.ico" alt="Refine" href="https://refine.dev/"/>
         <img src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-shadow.png" alt="Bootstrap" href="https://getbootstrap.com/"/>
         <img src="https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg" alt="Vue.JS" href="https://vuejs.org/"/>
         <img src="https://lit.dev/images/logo.svg#flame" alt="Lit"/>

package/dist/demo/parameters.html

@@ -44,7 +44,7 @@ params needed to declare DCE attributes and track the attributes changes. It als
     </template>
 </html-demo-element>
 
-<html-demo-element legend="slice propagates attribute" description="
+<html-demo-element legend="attribute from slice" description="
 when slice value points to attribute, it would be populated on slice change
 ">
     Type in the input field to see the variable $title change. <br/>
@@ -62,6 +62,25 @@ when slice value points to attribute, it would be populated on slice change
     </template>
 </html-demo-element>
 
+<details>
+    <summary>Attributes processing</summary>
+    To be available in template, <code>custom-element</code> attributes should be
+    defined by <code>attribute</code> markup as shown above.
+    The value is taken from attribute text content or from <code>select</code> XPath expression<br/>
+
+    Declared in such way, attributes are exposed via <code><a
+        href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#responding_to_attribute_changes"
+        >observedAttributes</a></code>. <br/>
+    The template exposes those attributes as <code>xsl:param</code> which makes the attribute value available as
+    xsl variable (as attribute name prefixed with $). <br/>
+    After transformation the attributes values are read from CE root and copied into DCE component. <br/>
+    The DCE attribute change from outside invokes <code>attributeChangedCallback</code> which triggers DCE re-render.
+    <p>
+        The <code>value</code> attribute is usual case to be propagated from within of <code>custom-element</code>.
+        See the <a href="./form.html#sample-5">using custom-element as form input</a> example.
+    </p>
+    &bull; <a href="https://github.com/EPA-WG/custom-element/blob/main/docs/attributes.md">Design docs</a>
+</details>
 
 
 <script type="module" src="https://unpkg.com/html-demo-element@1/html-demo-element.js"></script>

package/dist/demo/s.xml

@@ -1,18 +1,12 @@
 <?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">
-        <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>
+    <payload xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xhtml="http://www.w3.org/1999/xhtml"/>
     <attributes>
-        <xmlns/>
-        <justify>end</justify>
-        <data-dce-id>2</data-dce-id>
-        <direction>row</direction>
+        <id>dce1</id>
+        <p1>default_P1</p1>
+        <p2>always_p2</p2>
+        <p3></p3>
     </attributes>
-    <dataset>
-        <dceId>2</dceId>
-    </dataset>
+    <dataset/>
     <slice/>
 </datadom>

package/dist/demo/s.xslt

@@ -1,20 +1,69 @@
 <?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: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"><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: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="p1" select="/datadom/attributes/p1">default_P1</xsl:param>
+        <xsl:param name="p2" select="'always_p2'"/>
+        <xsl:param name="p3">
+            <xsl:choose>
+                <xsl:when test="string-length(//p3)>0 ">RRRR
+                    <xsl:value-of select="count(//p3)"/>
+                    +<xsl:value-of select="//p3 "/>=
+                </xsl:when>
+                <xsl:otherwise>OOO
+                    <xsl:value-of select=" 'def_P3' "/>
+                </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="p1">default_P1</xsl:attribute>
+            <xsl:attribute name="p2">
+                <xsl:value-of select="'always_p2'"/>
+            </xsl:attribute>
+            <xsl:attribute name="p3">
+                <xsl:choose>
+                    <xsl:when test="//p3 ">
+                        <xsl:value-of select="//p3 "/>
+                    </xsl:when>
+                    <xsl:otherwise>
+                        <xsl:value-of select=" 'def_P3' "/>
+                    </xsl:otherwise>
+                </xsl:choose>
+            </xsl:attribute>
+            <dce-text xmlns="" data-dce-id="2">
+                p1:
+            </dce-text>
+            <code xmlns="" data-testid="p1" data-dce-id="3">
+                <xsl:value-of select="$p1"/>
+            </code>
+            <br xmlns="" data-dce-id="4"/>
+            <dce-text xmlns="" data-dce-id="5">
+                p2:
+            </dce-text>
+            <code xmlns="" data-testid="p2" data-dce-id="6">
+                <xsl:value-of select="$p2"/>
+            </code>
+            <br xmlns="" data-dce-id="7"/>
+            <dce-text xmlns="" data-dce-id="8">
+                p3:
+            </dce-text>
+            <code xmlns="" data-testid="p3" data-dce-id="9">
+                <xsl:value-of select="$p3"/>
+            </code>
+        </dce-root>
+    </xsl:template>
     <xsl:template match="/">
         <xsl:apply-templates mode="payload" select="/datadom/attributes"/>
     </xsl:template>
@@ -23,7 +72,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"/>

package/dist/demo/ss.html

@@ -1,24 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<dce-root data-dce-id="1" label="Number" name="" placeholder="Enter the numeric value" type="text" value=""
-          xmlns="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce"
-          xmlns:xhtml="http://www.w3.org/1999/xhtml"><pre data-dce-id="2" xmlns="">                //focused
-                //suggest
-                //selected
-                $selected-value </pre>
-    <label data-dce-id="3">
-        <dce-text data-dce-id="4">Number</dce-text>
-        <input data-dce-id="5" name="" placeholder="Enter the numeric value" type="text" value="">
-        <slice data-dce-id="6" name="focused" slice-event="focus" slice-value="1"/>
-        <slice data-dce-id="7" name="selected" slice-event="input"/>
-        </input></label>
-    <fieldset data-dce-id="8" form="cem-autocomplete-form" xmlns=""><label data-dce-id="9" value="one"><input
-            data-dce-id="10" name="cem-autocomplete" slice="suggest" slice-event="input" type="radio" value="one"/>
-        <dce-text data-dce-id="11">One</dce-text>
-    </label><label data-dce-id="9" value="two"><input data-dce-id="10" name="cem-autocomplete" slice="suggest" slice-event="input"
-                                                      type="radio" value="two"/>
-        <dce-text data-dce-id="11">Two</dce-text>
-    </label><label data-dce-id="9" value="three"><input data-dce-id="10" name="cem-autocomplete" slice="suggest"
-                                                        slice-event="input" type="radio" value="three"/>
-        <dce-text data-dce-id="11">Three</dce-text>
-    </label></fieldset>
-</dce-root>
+<dce-root data-dce-id="1" value="123"
+          xmlns="http://www.w3.org/1999/xhtml" xmlns:dce="urn:schemas-epa-wg:dce" xmlns:xhtml="http://www.w3.org/1999/xhtml"><label data-dce-id="2">
+    <dce-text data-dce-id="3"/>
+    <input data-dce-id="4" slice="selected" slice-event="input" value="123"/></label></dce-root>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epa-wg/custom-element-dist",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -19,7 +19,7 @@
     "tf": "node ./node_modules/vitest/vitest.mjs --no-file-parallelism --browser.name=firefox --watch --browser.headless=false  src/stories/module-url.test.stories.ts"
   },
   "dependencies": {
-    "@epa-wg/custom-element": "0.0.31"
+    "@epa-wg/custom-element": "0.0.32"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.2",