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

package/dist/{custom-element-DAe7uvIt.js → custom-element-b7c_7Kz4.js}

@@ -1,12 +1,12 @@
-const B = "http://www.w3.org/1999/XSL/Transform", q = "http://www.w3.org/1999/xhtml", ie = "http://exslt.org/common", x = (e, l) => e.getAttribute?.(l), Y = (e) => e.nodeType === 3, re = (e) => typeof e == "string", oe = (e) => e && typeof e.nodeType == "number", S = (e, l) => (e.ownerDocument || e).createTextNode(l), K = (e) => {
+const B = "http://www.w3.org/1999/XSL/Transform", q = "http://www.w3.org/1999/xhtml", ie = "http://exslt.org/common", x = (e, l) => e.getAttribute?.(l), Y = (e) => e.nodeType === 3, oe = (e) => typeof e == "string", re = (e) => e && typeof e.nodeType == "number", S = (e, l) => (e.ownerDocument || e).createTextNode(l), K = (e) => {
   for (; e.firstChild; ) e.firstChild.remove();
   return e;
-}, U = (e) => (e.getAttributeNames().map((l) => e.removeAttribute(l)), K(e)), Q = (e) => (e?.setAttribute("xmlns:xsl", B), e), ee = (e) => (e?.setAttribute("xmlns:xhtml", q), Q(e)), te = (e) => /^[_a-zA-Z][-_:a-zA-Z0-9]*$/.test(e), A = (e, l = "", t = document) => {
-  const s = (a) => ((o) => (l && o.append(S(t.ownerDocument || t, l)), o))((t.ownerDocument || t).createElement(a));
+}, U = (e) => (e.getAttributeNames().map((l) => e.removeAttribute(l)), K(e)), Q = (e) => (e?.setAttribute("xmlns:xsl", B), e), ee = (e) => (e?.setAttribute("xmlns:xhtml", q), Q(e)), te = (e) => /^[_a-zA-Z][-_:a-zA-Z0-9]*$/.test(e), N = (e, l = "", t = document) => {
+  const s = (n) => ((r) => (l && r.append(S(t.ownerDocument || t, l)), r))((t.ownerDocument || t).createElement(n));
   if (te(e))
     return s(e);
-  const n = s("dce-object");
-  return n.setAttribute("dce-object-name", e), n;
+  const a = s("dce-object");
+  return a.setAttribute("dce-object-name", e), a;
 }, G = (e, l) => {
   const t = e.ownerDocument.createElementNS(e.namespaceURI, l);
   for (let s of e.attributes)
@@ -22,44 +22,44 @@ function H(e) {
   return new XMLSerializer().serializeToString(e);
 }
 function X(e, l, t, s) {
-  const n = (h) => e.ownerDocument.createElement(h), o = ((h, p, m) => (p.append(m = n(h)), m))(l, e);
-  return [...t].forEach((h) => o.append(s(h))), o;
+  const a = (h) => e.ownerDocument.createElement(h), r = ((h, p, u) => (p.append(u = a(h)), u))(l, e);
+  return [...t].forEach((h) => r.append(s(h))), r;
 }
 function ce(e) {
-  return e.slot || (e.setAttribute || (e = A("span", e.textContent.replaceAll(`
+  return e.slot || (e.setAttribute || (e = N("span", e.textContent.replaceAll(`
 `, ""))), e.setAttribute("slot", "")), e;
 }
-function D(e, l, t) {
+function $(e, l, t) {
   const s = typeof e;
   if (s === "string")
-    return A(l, e, t);
+    return N(l, e, t);
   if (s === "number")
-    return A(l, "" + e, t);
+    return N(l, "" + e, t);
   if (e instanceof Array) {
-    const a = A("array", "", t);
-    return e.map((o) => a.append(D(o, l, t))), a;
+    const n = N("array", "", t);
+    return e.map((r) => n.append($(r, l, t))), n;
   }
   if (e instanceof FormData) {
-    const a = A("form-data", "", t);
-    for (const o of e)
-      a.append(D(o[1], o[0], t));
-    return a;
+    const n = N("form-data", "", t);
+    for (const r of e)
+      n.append($(r[1], r[0], t));
+    return n;
   }
-  const n = A(l, "", t);
-  for (let a in e)
-    oe(e[a]) || typeof e[a] == "function" || e[a] instanceof Window || (typeof e[a] != "object" && te(a) ? n.setAttribute(a, e[a]) : n.append(D(e[a], a, t)));
-  return n;
+  const a = N(l, "", t);
+  for (let n in e)
+    re(e[n]) || typeof e[n] == "function" || e[n] instanceof Window || (typeof e[n] != "object" && te(n) ? a.setAttribute(n, e[n]) : a.append($(e[n], n, t)));
+  return a;
 }
 function Z(e) {
   if (C(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 a = 0, o = (p) => S(t, p), h = [];
-      if ([...n].forEach((p) => {
-        p.index > a && h.push(o(p.input.substring(a, p.index)));
-        const m = e.querySelector("value-of").cloneNode();
-        m.setAttribute("select", p[1]), h.push(m), a = p.index + p[0].length;
-      }), a < s.length && h.push(o(s.substring(a, s.length))), h.length) {
+    const s = t.data, a = s.matchAll(/{([^}]*)}/g);
+    if (a) {
+      let n = 0, r = (p) => S(t, p), h = [];
+      if ([...a].forEach((p) => {
+        p.index > n && h.push(r(p.input.substring(n, p.index)));
+        const u = e.querySelector("value-of").cloneNode();
+        u.setAttribute("select", p[1]), h.push(u), n = p.index + p[0].length;
+      }), n < s.length && h.push(r(s.substring(n, s.length))), h.length) {
         for (let p of h)
           l.insertBefore(p, t);
         l.removeChild(t);
@@ -88,20 +88,20 @@ function me(e, l = "xsl:stylesheet") {
         <xsl:template mode="sanitize" match="text()"><dce-text><xsl:copy/></dce-text></xsl:template>
         <xsl:template mode="sanitize" match="xsl:value-of|*[name()='slot']"><dce-text><xsl:copy><xsl:apply-templates mode="sanitize" select="*|@*|text()"/></xsl:copy></dce-text></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:stylesheet>`), s = new XSLTProcessor(), n = ((i) => {
-    C(i, "script", (b) => b.remove());
+    </xsl:stylesheet>`), s = new XSLTProcessor(), a = ((i) => {
+    C(i, "script", (y) => y.remove());
     const c = i.content ?? i.firstElementChild?.content ?? i.body ?? i;
-    ve.forEach((b) => C(c, b, (v) => ge(v, c)));
-    const E = i.firstElementChild?.content || i.content, g = (b) => {
-      const v = M("<xhtml/>"), $ = v.importNode(b, !0);
-      return v.replaceChild($, v.documentElement), ee($);
+    ve.forEach((y) => C(c, y, (v) => ge(v, c)));
+    const E = i.firstElementChild?.content || i.content, g = (y) => {
+      const v = M("<xhtml/>"), D = v.importNode(y, !0);
+      return v.replaceChild(D, v.documentElement), ee(D);
     };
     if (E) {
-      const b = A("div");
-      return [...E.childNodes].map((v) => b.append(v.cloneNode(!0))), g(b);
+      const y = N("div");
+      return [...E.childNodes].map((v) => y.append(v.cloneNode(!0))), g(y);
     }
     return g(i.documentElement || i.body || i);
-  })(e), a = M(
+  })(e), n = M(
     `<xsl:stylesheet version="1.0"
         xmlns:xsl="${B}"
         xmlns:xhtml="${q}"
@@ -139,31 +139,31 @@ function me(e, l = "xsl:stylesheet") {
 </xsl:stylesheet>`
   );
   s.importStylesheet(t);
-  const o = s.transformToFragment(n, document), h = (i, c) => i.querySelector(c), p = h(a, 'template[mode="payload"]');
-  if (!o)
-    return console.error("transformation error", { xml: n.outerHTML, xsl: H(t) });
-  const m = [];
-  [...o.querySelectorAll("dce-root>attribute")].forEach((i) => {
+  const r = s.transformToFragment(a, document), h = (i, c) => i.querySelector(c), p = h(n, 'template[mode="payload"]');
+  if (!r)
+    return console.error("transformation error", { xml: a.outerHTML, xsl: H(t) });
+  const u = [];
+  [...r.querySelectorAll("dce-root>attribute")].forEach((i) => {
     const c = G(i, "xsl:param"), E = x(i, "name");
     p.append(c);
     let g = x(c, "select")?.split("??");
     g || (g = ["//" + E, `'${c.textContent}'`], U(c), c.setAttribute("name", E));
-    let b;
+    let y;
     if (g?.length > 1) {
       c.removeAttribute("select");
-      const v = h(a, 'template[match="ignore"]>choose').cloneNode(!0);
-      U(v.firstElementChild).append(S(v, "{" + g[0] + "}")), U(v.lastElementChild).append(S(v, "{" + g[1] + "}")), v.firstElementChild.setAttribute("test", g[0]), c.append(v), b = v.cloneNode(!0);
+      const v = h(n, 'template[match="ignore"]>choose').cloneNode(!0);
+      U(v.firstElementChild).append(S(v, "{" + g[0] + "}")), U(v.lastElementChild).append(S(v, "{" + g[1] + "}")), v.firstElementChild.setAttribute("test", g[0]), c.append(v), y = v.cloneNode(!0);
     } else
-      b = G(i, "xsl:value-of");
-    b.removeAttribute("name"), i.append(b), i.removeAttribute("select"), m.push(c);
-  }), [...o.querySelectorAll("[value]")].filter((i) => i.getAttribute("value").match(/\{(.*)\?\?(.*)\}/g)).forEach((i) => {
+      y = G(i, "xsl:value-of");
+    y.removeAttribute("name"), i.append(y), i.removeAttribute("select"), u.push(c);
+  }), [...r.querySelectorAll("[value]")].filter((i) => i.getAttribute("value").match(/\{(.*)\?\?(.*)\}/g)).forEach((i) => {
     const c = x(i, "value");
-    c && i.setAttribute("value", be(c));
+    c && i.setAttribute("value", ye(c));
   });
-  for (const i of o.childNodes)
-    p.append(a.importNode(i, !0));
-  [...p.querySelectorAll("template")].forEach((i) => p.ownerDocument.documentElement.append(i));
-  const P = h(a, 'call-template[name="slot"]'), d = (i) => {
+  for (const i of r.childNodes)
+    p.append(n.importNode(i, !0));
+  [...p.getElementsByTagName("xsl:template")].forEach((i) => p.ownerDocument.documentElement.append(i));
+  const P = h(n, 'call-template[name="slot"]'), d = (i) => {
     const c = P.cloneNode(!0), E = x(i, "name");
     E && c.firstElementChild.setAttribute("select", `'${E}'`);
     for (let g of i.childNodes)
@@ -171,15 +171,15 @@ function me(e, l = "xsl:stylesheet") {
     return c;
   };
   C(p, "slot", (i) => i.parentNode.replaceChild(d(i), i));
-  const u = Z(a);
-  return u.params = m, u;
+  const m = Z(n);
+  return m.params = u, m;
 }
 async function ue(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 || A("div", n.responseText)), s(n.statusText);
-    }, n.addEventListener("error", (a) => s(a)), n.send();
+    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 || N("div", a.responseText)) : s(`${a.statusText} - ${e}`);
+    }, a.addEventListener("error", (n) => s(n)), a.send();
   });
 }
 function de(e, l, t = !1) {
@@ -193,30 +193,30 @@ function de(e, l, t = !1) {
   return !0;
 }
 const se = (e) => e.split("|").map((l) => l.trim()).filter((l) => l), pe = (e, l) => se(l).map((t) => {
-  let s = e.ownerDocument, n = (a) => (e.append(a), a);
+  let s = e.ownerDocument, a = (n) => (e.append(n), n);
   if (t.includes("/")) {
-    const a = [], o = s.evaluate(t, e);
-    for (let h; h = o.iterateNext(); )
-      a.push(h);
-    return a;
+    const n = [], r = s.evaluate(t, e);
+    for (let h; h = r.iterateNext(); )
+      n.push(h);
+    return n;
   }
-  return [...e.childNodes].find((a) => a.localName === t) || n(A(t, "", s));
+  return [...e.childNodes].find((n) => n.localName === t) || a(N(t, "", s));
 }).flat();
 function J(e, l, t, s) {
   if (!t.sliceProcessed)
-    return t.sliceProcessed = 1, pe(e, l ?? "").map((n) => {
-      const a = e.ownerDocument, o = t.sliceEventSource, h = t.sliceElement, p = () => [...n.childNodes].filter((m) => m.nodeType === 3 || m.localName === "value" || m.localName === "form-data").map((m) => m.remove());
-      if (o.getAttributeNames().map((m) => n.setAttribute(m, x(o, m))), [...n.childNodes].filter((m) => m.localName === "event").map((m) => m.remove()), "validationMessage" in o && n.setAttribute("validation-message", o.validationMessage), t.type === "init" && p(), n.append(D(t, "event", a)), h.hasAttribute("slice-value")) {
-        o.value === void 0 ? n.removeAttribute("value") : n.setAttribute("value", o.value);
-        const m = L(x(h, "slice-value"), n);
-        p(), n.append(S(a, m));
+    return t.sliceProcessed = 1, pe(e, l ?? "").map((a) => {
+      const n = e.ownerDocument, r = t.sliceEventSource, h = t.sliceElement, p = () => [...a.childNodes].filter((u) => u.nodeType === 3 || u.localName === "value" || u.localName === "form-data").map((u) => u.remove());
+      if (r.getAttributeNames().map((u) => a.setAttribute(u, x(r, u))), [...a.childNodes].filter((u) => u.localName === "event").map((u) => u.remove()), "validationMessage" in r && a.setAttribute("validation-message", r.validationMessage), t.type === "init" && p(), a.append($(t, "event", n)), h.hasAttribute("slice-value")) {
+        r.value === void 0 ? a.removeAttribute("value") : a.setAttribute("value", r.value);
+        const u = L(x(h, "slice-value"), a);
+        p(), a.append(S(n, u));
       } else {
-        if ("elements" in o)
-          return p(), n.append(D(new FormData(o), "value", n.ownerDocument)), n;
-        const m = o.value ?? x(h, "value");
-        p(), m == null ? [...n.childNodes].filter((w) => w.localName !== "event").map((w) => w.remove()) : re(m) ? n.append(S(a, m)) : n.append(D(m, "value", n.ownerDocument));
+        if ("elements" in r)
+          return p(), a.append($(new FormData(r), "value", a.ownerDocument)), a;
+        const u = r.value ?? x(r, "value");
+        p(), u == null ? [...a.childNodes].filter((w) => w.localName !== "event").map((w) => w.remove()) : oe(u) ? a.append(S(n, u)) : a.append($(u, "value", a.ownerDocument));
       }
-      return n;
+      return a;
     });
 }
 function C(e, l, t) {
@@ -227,20 +227,25 @@ const fe = async (e, l) => {
     return [l];
   if (e.startsWith("#"))
     return ((t) => {
-      if (!t) return [];
       const s = t.querySelectorAll(e);
-      if (s.length)
-        return [...s];
-      const n = t.getRootNode();
-      return n === t ? [] : getByHashId(n);
+      return [...s.length ? s : t.getRootNode().querySelectorAll(e)];
     })(l.parentElement);
   try {
-    const t = await ue(e), s = new URL(e, location).hash;
-    if (s) {
-      const n = t.querySelectorAll(s);
+    const [t, s] = e.split("#");
+    if (e.charAt(0) === ".")
+      e = new URL(t, l.closest("[base]")?.getAttribute("base") || location).href;
+    else
+      try {
+        e = import.meta.resolve(t), s && (e += "#" + s);
+      } catch (n) {
+        console.error(n.message);
+      }
+    const a = await ue(e);
+    if (l.setAttributeNS("xml", "base", e), s) {
+      const n = a.querySelectorAll("#" + s);
       return n.length ? [...n] : [l];
     }
-    return [t];
+    return [a];
   } catch {
     return [l];
   }
@@ -252,12 +257,12 @@ function he(e, l) {
 function le(e, l = 0) {
   const t = {};
   for (const s of e.childNodes) {
-    const n = x(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));
+    const a = x(s, "data-dce-id") || s.dceId || 0;
+    if (!t[a])
+      a ? t[a] = 1 : (t[a] = s.dceId = ++l, s.setAttribute && s.setAttribute("data-dce-id", s.dceId));
     else {
-      const a = s.dceId = n + "-" + t[n]++;
-      s.setAttribute && s.setAttribute("data-dce-id", a);
+      const n = s.dceId = a + "-" + t[a]++;
+      s.setAttribute && s.setAttribute("data-dce-id", n);
     }
     s.childNodes.length && le(s);
   }
@@ -269,23 +274,25 @@ function xe(e, l, t) {
       return e.insertBefore(l, s);
   e.append(l);
 }
-function ne(e, l) {
+function ae(e, l) {
+  if (e.firstElementChild?.localName === "dce-root" && l[0].localName !== "dce-root")
+    return;
   if (!l.length)
-    return K(e);
+    return e.firstElementChild?.localName !== "dce-root" && K(e);
   const t = {};
   for (let s of e.childNodes)
     t[s.dceId], Y(s) ? (s.data.trim(), t[s.dceId || 0] = s) : t[x(s, "data-dce-id") || 0] = s;
   for (let s of [...l]) {
-    const n = x(s, "data-dce-id") || s.dceId, a = t[n];
-    a ? (Y(s) ? a.nodeValue !== s.nodeValue && (a.nodeValue = s.nodeValue) : (he(s, a), (a.childNodes.length || s.childNodes.length) && ne(a, s.childNodes)), delete t[n]) : xe(e, s, n);
+    const a = x(s, "data-dce-id") || s.dceId, n = t[a];
+    n ? (Y(s) ? n.nodeValue !== s.nodeValue && (n.nodeValue = s.nodeValue) : (he(s, n), (n.childNodes.length || s.childNodes.length) && ae(n, s.childNodes)), delete t[a]) : xe(e, s, a);
   }
   for (let s of Object.values(t))
-    s.remove();
+    s.localName !== "dce-root" && s.remove();
 }
-function ye(e, l) {
+function be(e, l) {
   return e.hasAttribute(l) || e.setAttribute(l, crypto.randomUUID()), e.getAttribute(l);
 }
-const be = (e) => [...e?.matchAll(/([^{}]*)(\{)([^}]+)}([^{}]*)/g)].map((t) => `${t[1]}{${F(t[3])}}${t[4]}`).join(""), F = (e) => {
+const ye = (e) => [...e?.matchAll(/([^{}]*)(\{)([^}]+)}([^{}]*)/g)].map((t) => `${t[1]}{${F(t[3])}}${t[4]}`).join(""), F = (e) => {
   if (!e.trim())
     return e;
   const l = e.split("??"), t = l.shift(), s = F(l.join("??"));
@@ -304,12 +311,12 @@ const be = (e) => [...e?.matchAll(/([^{}]*)(\{)([^}]+)}([^{}]*)/g)].map((t) => `
     case XPathResult.BOOLEAN_TYPE:
       return s.booleanValue;
   }
-  let n = "";
-  for (let a; a = s.iterateNext(); )
-    n += a.textContent;
-  return n;
-}, ve = "stylesheet,transform,import,include,strip-space,preserve-space,output,key,decimal-format,namespace-alias,template,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(","), ge = (e, l) => {
-  const t = A("xsl:" + e.localName);
+  let a = "";
+  for (let n; n = s.iterateNext(); )
+    a += n.textContent;
+  return a;
+}, ve = "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(","), ge = (e, l) => {
+  const t = N("xsl:" + e.localName);
   for (let s of e.attributes)
     t.setAttribute(s.name, s.value);
   for (; e.firstChild; )
@@ -317,10 +324,10 @@ const be = (e) => [...e?.matchAll(/([^{}]*)(\{)([^}]+)}([^{}]*)/g)].map((t) => `
   if (e.parentElement)
     e.parentElement.replaceChild(t, e);
   else {
-    const s = e.parentElement || l, n = [...s.childNodes];
-    n.forEach((a, o) => {
-      a === e && (n[o] = t);
-    }), s.replaceChildren(...n);
+    const s = e.parentElement || l, a = [...s.childNodes];
+    a.forEach((n, r) => {
+      n === e && (a[r] = t);
+    }), s.replaceChildren(...a);
   }
 };
 class Ee extends HTMLElement {
@@ -328,73 +335,73 @@ class Ee extends HTMLElement {
   async connectedCallback() {
     const l = await fe(x(this, "src"), this), t = x(this, "tag"), s = t || "dce-" + crypto.randomUUID();
     for (const d of l)
-      C(d.templateNode || d.content || d, "style", (u) => {
-        const i = u.closest("slot"), c = i ? `slot[name="${i.name}"]` : "";
-        u.innerHTML = `${s} ${c}{${u.innerHTML}}`, this.append(u);
+      C(d.templateNode || d.content || d, "style", (m) => {
+        const i = m.closest("slot"), c = i ? `slot[name="${i.name}"]` : "";
+        m.innerHTML = `${s} ${c}{${m.innerHTML}}`, this.append(m);
       });
-    const n = l.map((d) => me(d)), a = n.map((d, u) => (u = new XSLTProcessor(), u.importStylesheet(d), u));
-    Object.defineProperty(this, "xsltString", { get: () => n.map((d) => H(d)).join(`
+    const a = l.map((d) => me(d)), n = a.map((d, m) => (m = new XSLTProcessor(), m.importStylesheet(d), m));
+    Object.defineProperty(this, "xsltString", { get: () => a.map((d) => H(d)).join(`
 `) });
-    const o = this, h = [...this.templateNode.querySelectorAll("[slice]")], p = h.map((d) => x(d, "slice")).filter((d) => !d.includes("/")).filter((d, u, i) => i.indexOf(d) === u).map(se).flat(), m = n.reduce((d, u) => (u.params && d.push(...u.params), d), []);
+    const r = this, h = [...this.templateNode.querySelectorAll("[slice]")], p = h.map((d) => x(d, "slice")).filter((d) => !d.includes("/")).filter((d, m, i) => i.indexOf(d) === m).map(se).flat(), u = a.reduce((d, m) => (m.params && d.push(...m.params), d), []);
     class w extends HTMLElement {
       static get observedAttributes() {
-        return m.map((u) => x(u, "name"));
+        return u.map((m) => x(m, "name"));
       }
       #e = 0;
       connectedCallback() {
-        let u = this.childNodes;
+        let m = this.childNodes;
         if (this.firstElementChild?.tagName === "TEMPLATE") {
           this.firstElementChild !== this.lastElementChild && console.error("payload should have TEMPLATE as only child", this.outerHTML);
           const f = this.firstElementChild;
-          f.remove(), u = f.content.childNodes;
-          for (const r of [...f.content.childNodes])
-            if (r.localName === "style") {
-              const y = ye(this, "data-dce-style");
-              r.innerHTML = `${s}[data-dce-style="${y}"]{${r.innerHTML}}`, f.insertAdjacentElement("beforebegin", r);
+          f.remove(), m = f.content.childNodes;
+          for (const o of [...f.content.childNodes])
+            if (o.localName === "style") {
+              const b = be(this, "data-dce-style");
+              o.innerHTML = `${s}[data-dce-style="${b}"]{${o.innerHTML}}`, f.insertAdjacentElement("beforebegin", o);
             } else
-              r.nodeType === 1 ? f.insertAdjacentElement("beforebegin", r) : r.nodeType === 3 && f.insertAdjacentText("beforebegin", r.data);
+              o.nodeType === 1 ? f.insertAdjacentElement("beforebegin", o) : o.nodeType === 3 && f.insertAdjacentText("beforebegin", o.data);
         }
-        const i = M("<datadom/>").documentElement, c = (f, r = "") => ((y) => (r && y.append(S(i, r)), y))(i.ownerDocument.createElement(f)), E = X(i, "payload", u, ce);
+        const i = M("<datadom/>").documentElement, c = (f, o = "") => ((b) => (o && b.append(S(i, o)), b))(i.ownerDocument.createElement(f)), E = X(i, "payload", m, ce);
         Q(E), ee(E), this.innerHTML = "";
         const g = X(i, "attributes", this.attributes, (f) => c(f.nodeName, f.value));
         X(i, "dataset", Object.keys(this.dataset), (f) => c(f, this.dataset[f]));
-        const b = X(i, "slice", p, (f) => c(f, "")), v = (f) => L(f, b);
+        const y = X(i, "slice", p, (f) => c(f, "")), v = (f) => L(f, y);
         this.xml = i;
-        const $ = [], W = () => {
+        const D = [], W = () => {
           const f = {};
-          for (let r; r = $.pop(); ) {
-            const y = x(r.sliceElement, "slice");
-            f[y] || (J(b, y, r), f[y] = r);
+          for (let o; o = D.pop(); ) {
+            const b = x(o.sliceElement, "slice");
+            f[b] || (J(y, b, o), f[b] = o);
           }
-          Object.keys(f).length !== 0 && I();
+          Object.keys(f).length !== 0 && R();
         };
         let V;
         this.onSlice = (f) => {
-          $.push(f), V || (V = setTimeout(() => {
+          D.push(f), V || (V = setTimeout(() => {
             W(), V = 0;
           }, 1));
         };
-        const I = this.transform = () => {
+        const R = this.transform = () => {
           if (this.#e)
             debugger;
-          this.#e = 1, a.map((r, y) => {
-            const R = r.transformToFragment(i.ownerDocument, document);
-            return R || console.error(`XSLT transformation error. xsl:
-`, H(n[y]), `
+          this.#e = 1, n.map((o, b) => {
+            const I = o.transformToFragment(i.ownerDocument, document);
+            return I || console.error(`XSLT transformation error. xsl:
+`, H(a[b]), `
 xml:
-`, H(i)), R;
-          }).map((r) => {
-            r && (le(r), ne(this, r.childNodes));
-          }), w.observedAttributes.map((r) => {
-            let y = x(this.firstElementChild, r);
-            y !== x(this, r) && (this.setAttribute(r, y), this.#t(r, y));
-          }), C(this, "[slice],[slice-event]", (r) => {
-            if (!r.dceInitialized) {
-              r.dceInitialized = 1;
-              let y = x(r, "slice-event");
-              r.hasAttribute("custom-validity") && (y += " change submit"), [...new Set((y || "change").split(" "))].forEach((R) => (r.localName === "slice" ? r.parentElement : r).addEventListener(R, (N) => {
-                N.sliceElement = r, N.sliceEventSource = N.currentTarget || N.target;
-                const ae = J(b, x(N.sliceElement, "slice"), N);
+`, H(i)), I;
+          }).map((o) => {
+            o && (le(o), ae(this, o.childNodes));
+          }), w.observedAttributes.map((o) => {
+            let b = x(this.firstElementChild, o);
+            b !== x(this, o) && (this.setAttribute(o, b), this.#t(o, b));
+          }), C(this, "[slice],[slice-event]", (o) => {
+            if (!o.dceInitialized) {
+              o.dceInitialized = 1;
+              let b = x(o, "slice-event");
+              o.hasAttribute("custom-validity") && (b += " change submit"), [...new Set((b || "change").split(" "))].forEach((I) => (o.localName === "slice" ? o.parentElement : o).addEventListener(I, (A) => {
+                A.sliceElement = o, A.sliceEventSource = A.currentTarget || A.target;
+                const ne = J(y, x(A.sliceElement, "slice"), A);
                 C(this, "[custom-validity]", (z) => {
                   if (!z.setCustomValidity)
                     return;
@@ -406,28 +413,29 @@ xml:
                     console.error(j, "xPath", _);
                   }
                 });
-                const k = x(r, "custom-validity"), T = k && L(k, g), O = T === !0 ? "" : T;
+                const k = x(o, "custom-validity"), T = k && L(k, g), O = T === !0 ? "" : T;
                 if (k) {
-                  if (r.setCustomValidity ? r.setCustomValidity(O) : r.validationMessage = O, ae.map((z) => z.setAttribute("validation-message", O)), N.type === "submit")
-                    return T === !0 ? void 0 : (setTimeout(I, 1), !!T === T ? (T || N.preventDefault(), T) : T ? (N.preventDefault(), !1) : void 0);
-                  setTimeout(I, 1);
+                  if (o.setCustomValidity ? o.setCustomValidity(O) : o.validationMessage = O, ne.map((z) => z.setAttribute("validation-message", O)), A.type === "submit")
+                    return T === !0 ? void 0 : (setTimeout(R, 1), !!T === T ? (T || A.preventDefault(), T) : T ? (A.preventDefault(), !1) : void 0);
+                  setTimeout(R, 1);
                 }
-                this.onSlice(N);
-              })), (!y || y.includes("init")) && (r.hasAttribute("slice-value") || r.hasAttribute("value") || r.value ? this.onSlice({ type: "init", target: r, sliceElement: r, sliceEventSource: r }) : r.value = v(x(r, "slice")));
+                this.onSlice(A);
+              })), (!b || b.includes("init")) && (o.hasAttribute("slice-value") || o.hasAttribute("value") || o.value ? this.onSlice({ type: "init", target: o, sliceElement: o, sliceEventSource: o }) : o.value = v(x(o, "slice")));
             }
           }), this.#e = 0;
         };
-        I(), W();
+        R(), W();
       }
-      #t(u, i) {
-        let c = this.xml.querySelector(`attributes>${u}`);
-        c ? U(c).append(S(c, i)) : (c = A(u, i, this.xml), this.xml.querySelector("attributes").append(c));
+      #t(m, i) {
+        m === "value" && (this.value = i);
+        let c = this.xml.querySelector(`attributes>${m}`);
+        c ? U(c).append(S(c, i)) : (c = N(m, i, this.xml), this.xml.querySelector("attributes").append(c)), this.dispatchEvent(new CustomEvent("change", { bubbles: !0, detail: { [m]: i } }));
       }
-      attributeChangedCallback(u, i, c) {
-        !this.xml || this.#e || (this.#t(u, c), this.transform());
+      attributeChangedCallback(m, i, c) {
+        !this.xml || this.#e || (this.#t(m, c), this.transform());
       }
       get dce() {
-        return o;
+        return r;
       }
     }
     const P = (d) => {
@@ -438,8 +446,8 @@ xml:
     else {
       const d = s;
       this.setAttribute("tag", d), P(d);
-      const u = document.createElement(d);
-      this.getAttributeNames().forEach((i) => u.setAttribute(i, this.getAttribute(i))), u.append(...[...this.childNodes].filter((i) => i.localName !== "style")), this.append(u);
+      const m = document.createElement(d);
+      this.getAttributeNames().forEach((i) => m.setAttribute(i, this.getAttribute(i))), m.append(...[...this.childNodes].filter((i) => i.localName !== "style")), this.append(m);
     }
   }
   get templateNode() {
@@ -463,13 +471,13 @@ export {
   J as f,
   le as g,
   xe as h,
-  ne as i,
-  ye as j,
-  be as k,
+  ae as i,
+  be as j,
+  ye as k,
   F as l,
   he as m,
   L as n,
-  D as o,
+  $ as o,
   ve as p,
   ge as q,
   Z as t,

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-DZvvhscI.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-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;

package/dist/custom-element-bundle.js

@@ -1,5 +1,5 @@
-import { C as e } from "./custom-element-DAe7uvIt.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-DAe7uvIt.js";
+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";

package/dist/demo/a.html

@@ -0,0 +1,60 @@
+<!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>Data slices - Declarative Custom Element implementation demo</title>
+    <link rel="icon" href="./wc-square.svg"/>
+
+    <script type="module" src="../http-request.js"></script>
+    <script type="module" src="../custom-element.js"></script>
+    <style>
+        @import "./demo.css";
+
+        label {
+            display: flex;
+        }
+
+        label:has(input[type="text"],input[type="password"],input:not([type]) ) {
+            flex-direction: column;
+        }
+
+        nav {
+            max-width: 32em;
+        }
+    </style>
+    <!-- https://github.com/mdn/learning-area/blob/main/html/forms/form-validation/custom-error-message.html
+         todo: apply setCustomValidity( warningStr )
+    -->
+
+</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>
+
+</body>
+</html>