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

package/dist/{custom-element-BOIPgtxz.js → custom-element-CoRNKeEP.js}

@@ -1,8 +1,8 @@
-const W = "http://www.w3.org/1999/XSL/Transform", k = "http://www.w3.org/1999/xhtml", ue = "http://exslt.org/common", f = (e, l) => e.getAttribute?.(l), Z = (e) => e.nodeType === 3, de = (e) => typeof e == "string", pe = (e) => e && typeof e.nodeType == "number", $ = (e, l) => (e.ownerDocument || e).createTextNode(l), se = (e) => {
+const W = "http://www.w3.org/1999/XSL/Transform", H = "http://www.w3.org/1999/xhtml", ue = "http://exslt.org/common", f = (e, l) => e.getAttribute?.(l), Z = (e) => e.nodeType === 3, de = (e) => typeof e == "string", pe = (e) => e && typeof e.nodeType == "number", D = (e, l) => (e.ownerDocument || e).createTextNode(l), se = (e) => {
   for (; e.firstChild; ) e.firstChild.remove();
   return e;
-}, V = (e) => (e.getAttributeNames().map((l) => e.removeAttribute(l)), se(e)), le = (e) => (e?.setAttribute("xmlns:xsl", W), e), ae = (e) => (e?.setAttribute("xmlns:xhtml", k), le(e)), ne = (e) => /^[_a-zA-Z][-_:a-zA-Z0-9]*$/.test(e), w = (e, l = "", t = document) => {
-  const s = (i) => ((r) => (l && r.append($(t.ownerDocument || t, l)), r))((t.ownerDocument || t).createElement(i));
+}, V = (e) => (e.getAttributeNames().map((l) => e.removeAttribute(l)), se(e)), le = (e) => (e?.setAttribute("xmlns:xsl", W), e), ae = (e) => (e?.setAttribute("xmlns:xhtml", H), le(e)), ne = (e) => /^[_a-zA-Z][-_:a-zA-Z0-9]*$/.test(e), T = (e, l = "", t = document) => {
+  const s = (i) => ((r) => (l && r.append(D(t.ownerDocument || t, l)), r))((t.ownerDocument || t).createElement(i));
   if (ne(e))
     return s(e);
   const a = s("dce-object");
@@ -15,54 +15,54 @@ const W = "http://www.w3.org/1999/XSL/Transform", k = "http://www.w3.org/1999/xh
     t.append(e.firstChild);
   return t;
 };
-function X(e) {
+function q(e) {
   return new DOMParser().parseFromString(e, "application/xml");
 }
-function I(e) {
+function X(e) {
   return new XMLSerializer().serializeToString(e);
 }
-function H(e, l, t, s) {
-  const a = (x) => e.ownerDocument.createElement(x), r = ((x, p, u) => (p.append(u = a(x)), u))(l, e);
+function U(e, l, t, s) {
+  const a = (x) => e.ownerDocument.createElement(x), r = ((x, p, N) => (p.append(N = a(x)), N))(l, e);
   return [...t].forEach((x) => r.append(s(x))), r;
 }
 function fe(e) {
-  return e.slot || (e.setAttribute || (e = w("span", e.textContent.replaceAll(`
+  return e.slot || (e.setAttribute || (e = T("span", e.textContent.replaceAll(`
 `, ""))), e.setAttribute("slot", "")), e;
 }
 function K(e, l) {
   e.getAttributeNames().forEach((t) => l.includes(t) || e.removeAttribute(t));
 }
 const Q = (e) => [...e].filter((l) => !(l.nodeType === 3 && l.data.trim() === ""));
-function D(e, l, t) {
+function z(e, l, t) {
   const s = typeof e;
   if (s === "string")
-    return w(l, e, t);
+    return T(l, e, t);
   if (s === "number")
-    return w(l, "" + e, t);
+    return T(l, "" + e, t);
   if (e instanceof Array) {
-    const i = w("array", "", t);
-    return e.map((r) => i.append(D(r, l, t))), i;
+    const i = T("array", "", t);
+    return e.map((r) => i.append(z(r, l, t))), i;
   }
   if (e instanceof FormData) {
-    const i = w("form-data", "", t);
+    const i = T("form-data", "", t);
     for (const r of e)
-      i.append(D(r[1], r[0], t));
+      i.append(z(r[1], r[0], t));
     return i;
   }
-  const a = w(l, "", t);
+  const a = T(l, "", t);
   for (let i in e)
-    pe(e[i]) || typeof e[i] == "function" || e[i] instanceof Window || (typeof e[i] != "object" && ne(i) ? a.setAttribute(i, e[i]) : a.append(D(e[i], i, t)));
+    pe(e[i]) || typeof e[i] == "function" || e[i] instanceof Window || (typeof e[i] != "object" && ne(i) ? a.setAttribute(i, e[i]) : a.append(z(e[i], i, t)));
   return a;
 }
 function ee(e) {
-  if (L(e, "*", (l) => [...l.childNodes].filter((t) => t.nodeType === 3 && t.parentNode.localName !== "style" && t.data).forEach((t) => {
+  if ($(e, "*", (l) => [...l.childNodes].filter((t) => t.nodeType === 3 && t.parentNode.localName !== "style" && t.data).forEach((t) => {
     const s = t.data, a = s.matchAll(/{([^}]*)}/g);
     if (a) {
-      let i = 0, r = (p) => $(t, p), x = [];
+      let i = 0, r = (p) => D(t, p), x = [];
       if ([...a].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;
+        const N = e.querySelector("value-of").cloneNode();
+        N.setAttribute("select", p[1]), x.push(N), 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);
@@ -79,9 +79,9 @@ function ee(e) {
 function he(e, l = "xsl:stylesheet") {
   if (e.tagName === l || e.documentElement?.tagName === l)
     return ee(e);
-  const t = X(`<xsl:stylesheet version="1.0" xmlns:xsl="${W}" xmlns:xhtml="${k}" xmlns:exsl="${ue}" exclude-result-prefixes="exsl" >
+  const t = q(`<xsl:stylesheet version="1.0" xmlns:xsl="${W}" xmlns:xhtml="${H}" xmlns:exsl="${ue}" 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="/"><dce-root xmlns="${H}"><xsl:apply-templates select="*" /></dce-root></xsl:template>
     <xsl:template match="*[name()='template']">
         <xsl:apply-templates mode="sanitize" select="*|text()"/>
     </xsl:template>
@@ -136,24 +136,24 @@ function he(e, l = "xsl:stylesheet") {
         </xsl:for-each>
     </xsl:template>
 </xsl:stylesheet>`), s = new XSLTProcessor(), a = ((n) => {
-    L(n, "custom-element", (b) => {
+    $(n, "custom-element", (b) => {
       b.firstElementChild.localName === "template" && ([...b.firstElementChild.content.childNodes].forEach((y) => b.append(y)), b.firstElementChild.remove());
-    }), L(n, "script", (b) => b.remove());
+    }), $(n, "script", (b) => b.remove());
     const c = n.content ?? n.firstElementChild?.content ?? n.body ?? n;
-    we.forEach((b) => L(c, b, (y) => Te(y, c)));
-    const N = n.firstElementChild?.content || n.content, E = (b) => {
-      const y = X("<xhtml/>"), M = y.importNode(b, !0);
-      return y.replaceChild(M, y.documentElement), ae(M);
+    we.forEach((b) => $(c, b, (y) => Te(y, c)));
+    const A = n.firstElementChild?.content || n.content, E = (b) => {
+      const y = q("<xhtml/>"), j = y.importNode(b, !0);
+      return y.replaceChild(j, y.documentElement), ae(j);
     };
-    if (N) {
-      const b = w("div");
-      return [...N.childNodes].map((y) => b.append(y.cloneNode(!0))), E(b);
+    if (A) {
+      const b = T("div");
+      return [...A.childNodes].map((y) => b.append(y.cloneNode(!0))), E(b);
     }
     return E(n.documentElement || n.body || n);
-  })(e), i = X(
+  })(e), i = q(
     `<xsl:stylesheet version="1.0"
         xmlns:xsl="${W}"
-        xmlns:xhtml="${k}"
+        xmlns:xhtml="${H}"
         xmlns:dce="urn:schemas-epa-wg:dce"
         xmlns:exsl="http://exslt.org/common"
         exclude-result-prefixes="exsl"
@@ -190,26 +190,26 @@ function he(e, l = "xsl:stylesheet") {
   s.importStylesheet(t);
   const r = s.transformToFragment(a, document), x = (n, c) => n.querySelector(c), p = x(i, 'template[mode="payload"]');
   if (!r)
-    return console.error("transformation error", { xml: a.outerHTML, xsl: I(t) });
+    return console.error("transformation error", { xml: a.outerHTML, xsl: X(t) });
   if (r.firstElementChild.localName !== "dce-root") {
     const n = r.ownerDocument.createElement("dce-root");
     [...r.childNodes].forEach((c) => n.append(c)), r.append(n);
   }
-  const u = [];
+  const N = [];
   [...r.querySelectorAll("dce-root>attribute")].forEach((n) => {
     K(n, "namespace,name,select");
-    const c = J(n, "xsl:param"), N = f(n, "name");
+    const c = J(n, "xsl:param"), A = f(n, "name");
     p.append(c), K(c, "select,name");
     let E = f(c, "select")?.split("??");
-    E || (E = ["//" + N, `'${c.textContent}'`], V(c), c.setAttribute("name", N));
+    E || (E = ["//" + A, `'${c.textContent}'`], V(c), c.setAttribute("name", A));
     let b;
     if (E?.length > 1) {
       c.removeAttribute("select");
       const y = x(i, 'template[match="ignore"]>choose').cloneNode(!0);
-      V(y.firstElementChild).append($(y, "{" + E[0] + "}")), V(y.lastElementChild).append($(y, "{" + E[1] + "}")), y.firstElementChild.setAttribute("test", E[0]), c.append(y), b = y.cloneNode(!0);
+      V(y.firstElementChild).append(D(y, "{" + E[0] + "}")), V(y.lastElementChild).append(D(y, "{" + E[1] + "}")), y.firstElementChild.setAttribute("test", E[0]), c.append(y), b = y.cloneNode(!0);
     } else
       b = J(n, "xsl:value-of");
-    b.removeAttribute("name"), n.append(b), n.removeAttribute("select"), u.push(c);
+    b.removeAttribute("name"), n.append(b), n.removeAttribute("select"), N.push(c);
   }), [...r.querySelectorAll("[value]")].filter((n) => n.getAttribute("value").match(/\{(.*)\?\?(.*)\}/g)).forEach((n) => {
     const c = f(n, "value");
     c && n.setAttribute("value", Ae(c));
@@ -217,22 +217,22 @@ function he(e, l = "xsl:stylesheet") {
   for (const n of r.childNodes)
     p.append(i.importNode(n, !0));
   [...p.getElementsByTagName("xsl:template")].forEach((n) => p.ownerDocument.documentElement.append(n));
-  const q = x(i, 'call-template[name="slot"]'), d = (n) => {
-    const c = q.cloneNode(!0), N = f(n, "name");
-    N && c.firstElementChild.setAttribute("select", `'${N}'`);
+  const S = x(i, 'call-template[name="slot"]'), u = (n) => {
+    const c = S.cloneNode(!0), A = f(n, "name");
+    A && c.firstElementChild.setAttribute("select", `'${A}'`);
     for (let E of n.childNodes)
       c.lastElementChild.append(E);
     return c;
   };
-  L(p, "slot", (n) => n.parentNode.replaceChild(d(n), n));
+  $(p, "slot", (n) => n.parentNode.replaceChild(u(n), n));
   const m = ee(i);
-  return m.params = u, m;
+  return m.params = N, m;
 }
 async function xe(e) {
   return await new Promise((t, s) => {
     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 || w("div", a.responseText)) : s(`${a.statusText} - ${e}`);
+      a.readyState === a.DONE && a.status === 200 ? t(a.responseXML?.body || a.responseXML || T("div", a.responseText)) : s(`${a.statusText} - ${e}`);
     }, a.addEventListener("error", (i) => s(i)), a.send();
   });
 }
@@ -254,26 +254,28 @@ const ie = (e) => e.split("|").map((l) => l.trim()).filter((l) => l), ye = (e, l
       i.push(x);
     return i;
   }
-  return [...e.childNodes].find((i) => i.localName === t) || a(w(t, "", s));
+  return [...e.childNodes].find((i) => i.localName === t) || a(T(t, "", s));
 }).flat();
 function te(e, l, t, s) {
   if (!t.sliceProcessed)
     return t.sliceProcessed = 1, ye(e, l ?? "").map((a) => {
-      const i = e.ownerDocument, r = t.sliceEventSource, x = 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, f(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(D(t, "event", i)), x.hasAttribute("slice-value")) {
+      const i = e.ownerDocument, r = t.sliceEventSource, x = t.sliceElement, p = () => [...a.childNodes].filter((d) => d.nodeType === 3 || d.localName === "value" || d.localName === "form-data").map((d) => d.remove());
+      r.getAttributeNames().map((d) => a.setAttribute(d, f(r, d))), [...a.childNodes].filter((d) => d.localName === "event").map((d) => d.remove()), "validationMessage" in r && a.setAttribute("validation-message", r.validationMessage), t.type === "init" && p(), a.append(z(t, "event", i));
+      const N = (r.type === "checkbox" || r.type === "radio") && !r.checked;
+      if (x.hasAttribute("slice-value")) {
         r.value === void 0 ? a.removeAttribute("value") : a.setAttribute("value", r.value);
-        const u = z(f(x, "slice-value"), a);
-        p(), a.append($(i, u));
+        const d = N ? "" : M(f(x, "slice-value"), a);
+        p(), a.append(D(i, d));
       } else {
         if ("elements" in r)
-          return p(), a.append(D(new FormData(r), "value", a.ownerDocument)), a;
-        const u = r.value ?? f(r, "value");
-        p(), u == null ? [...a.childNodes].filter((T) => T.localName !== "event").map((T) => T.remove()) : de(u) ? a.append($(i, u)) : a.append(D(u, "value", a.ownerDocument));
+          return p(), a.append(z(new FormData(r), "value", a.ownerDocument)), a;
+        const d = N ? "" : r.value ?? f(r, "value");
+        p(), d == null ? [...a.childNodes].filter((S) => S.localName !== "event").map((S) => S.remove()) : de(d) ? a.append(D(i, d)) : a.append(z(d, "value", a.ownerDocument));
       }
       return a;
     });
 }
-function L(e, l, t) {
+function $(e, l, t) {
   e.querySelectorAll && [...e.querySelectorAll(l)].forEach(t);
 }
 const ge = async (e, l) => {
@@ -351,10 +353,10 @@ const Ae = (e) => [...e?.matchAll(/([^{}]*)(\{)([^}]+)}([^{}]*)/g)].map((t) => `
     return e;
   const l = e.split("??"), t = l.shift(), s = Y(l.join("??"));
   return l.length ? `concat( ${t} , substring( ${s} , (1+string-length( ${s} )) * string-length( ${t} ) ) )` : e;
-}, z = (e, l) => {
+}, M = (e, l) => {
   const t = e.split("??");
   if (t.length > 1)
-    return z(t[0], l) || z(t[1], l);
+    return M(t[0], l) || M(t[1], l);
   e = Y(e);
   const s = l.ownerDocument.evaluate(e, l);
   switch (s.resultType) {
@@ -370,7 +372,7 @@ const Ae = (e) => [...e?.matchAll(/([^{}]*)(\{)([^}]+)}([^{}]*)/g)].map((t) => `
     a += i.textContent;
   return a;
 }, we = "stylesheet,transform,import,include,strip-space,preserve-space,output,key,decimal-format,namespace-alias,value-of,copy-of,number,apply-templates,apply-imports,for-each,sort,if,choose,when,otherwise,attribute-set,call-template,with-param,variable,param,text,processing-instruction,element,attribute,comment,copy,message,fallback".split(","), Te = (e, l) => {
-  const t = w("xsl:" + e.localName);
+  const t = T("xsl:" + e.localName);
   for (let s of e.attributes)
     t.setAttribute(s.name, s.value);
   for (; e.firstChild; )
@@ -384,32 +386,32 @@ const Ae = (e) => [...e?.matchAll(/([^{}]*)(\{)([^}]+)}([^{}]*)/g)].map((t) => `
     }), s.replaceChildren(...a);
   }
 };
-class Se extends HTMLElement {
+class Ce 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 ge(f(this, "src"), this), t = f(this, "tag"), s = t || "dce-" + crypto.randomUUID();
-    for (const d of l)
-      L(d.templateNode || d.content || d, "style", (m) => {
+    for (const u of l)
+      $(u.templateNode || u.content || u, "style", (m) => {
         const n = m.closest("slot"), c = n ? `slot[name="${n.name}"]` : "";
         m.innerHTML = `${s} ${c}{${m.innerHTML}}`, this.append(m);
       });
-    const a = l.map((d) => he(d)), i = a.map((d, m) => {
+    const a = l.map((u) => he(u)), i = a.map((u, m) => {
       m = new XSLTProcessor();
       try {
-        m.importStylesheet(d);
+        m.importStylesheet(u);
       } catch (n) {
-        console.error(n, I(d));
+        console.error(n, X(u));
       }
       return m;
     });
-    Object.defineProperty(this, "xsltString", { get: () => a.map((d) => I(d)).join(`
+    Object.defineProperty(this, "xsltString", { get: () => a.map((u) => X(u)).join(`
 `) });
-    const r = this, x = [...this.templateNode.querySelectorAll("[slice]")], p = x.map((d) => f(d, "slice")).filter((d) => !d.includes("/")).filter((d, m, n) => n.indexOf(d) === m).map(ie).flat(), u = a.reduce((d, m) => (m.params && d.push(...m.params), d), []);
-    class T extends HTMLElement {
+    const r = this, x = [...this.templateNode.querySelectorAll("[slice]")], p = x.map((u) => f(u, "slice")).filter((u) => !u.includes("/")).filter((u, m, n) => n.indexOf(u) === m).map(ie).flat(), N = a.reduce((u, m) => (m.params && u.push(...m.params), u), []);
+    class d extends HTMLElement {
       static get observedAttributes() {
-        return u.map((m) => f(m, "name"));
+        return N.map((m) => f(m, "name"));
       }
       #e = 0;
       connectedCallback() {
@@ -425,90 +427,90 @@ class Se extends HTMLElement {
             } else
               g.nodeType === 1 ? h.insertAdjacentElement("beforebegin", g) : g.nodeType === 3 && h.insertAdjacentText("beforebegin", g.data);
         }
-        const n = X("<datadom/>").documentElement, c = (h, g = "") => ((o) => (g && o.append($(n, g)), o))(n.ownerDocument.createElement(h)), N = H(n, "payload", m, fe);
-        le(N), ae(N), this.innerHTML = "";
-        const E = H(n, "attributes", this.attributes, (h) => c(h.nodeName, h.value));
-        H(n, "dataset", Object.keys(this.dataset), (h) => c(h, this.dataset[h]));
-        const b = H(n, "slice", p, (h) => c(h, "")), y = (h) => z(h, b);
+        const n = q("<datadom/>").documentElement, c = (h, g = "") => ((o) => (g && o.append(D(n, g)), o))(n.ownerDocument.createElement(h)), A = U(n, "payload", m, fe);
+        le(A), ae(A), this.innerHTML = "";
+        const E = U(n, "attributes", this.attributes, (h) => c(h.nodeName, h.value));
+        U(n, "dataset", Object.keys(this.dataset), (h) => c(h, this.dataset[h]));
+        const b = U(n, "slice", p, (h) => c(h, "")), y = (h) => M(h, b);
         this.xml = n;
-        const M = [], G = () => {
+        const j = [], G = () => {
           const h = {};
-          for (let g; g = M.pop(); ) {
+          for (let g; g = j.pop(); ) {
             const o = f(g.sliceElement, "slice");
             h[o] || (te(b, o, g), h[o] = g);
           }
-          Object.keys(h).length !== 0 && U();
+          Object.keys(h).length !== 0 && k();
         };
         let O;
         this.onSlice = (h) => {
-          M.push(h), O || (O = setTimeout(() => {
+          j.push(h), O || (O = setTimeout(() => {
             G(), O = 0;
           }, 1));
         };
-        const U = this.transform = () => {
+        const k = this.transform = () => {
           if (this.#e)
             debugger;
           this.#e = 1, i.map((o, v) => {
-            const S = o.transformToFragment(n.ownerDocument, document);
-            return S || console.error(`XSLT transformation error. xsl:
-`, I(a[v]), `
+            const C = o.transformToFragment(n.ownerDocument, document);
+            return C || console.error(`XSLT transformation error. xsl:
+`, X(a[v]), `
 xml:
-`, I(n)), S;
+`, X(n)), C;
           }).map((o) => {
             o && (oe(o), re(this, o.childNodes));
-          }), T.observedAttributes.map((o) => {
+          }), d.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 === "^")
+              const C = f(o, "for");
+              if (C || (v = o.parentElement), C === "^")
                 do
                   v = v.previousElementSibling;
                 while (v.localName === "slice");
               else
-                v = this.querySelector(S);
+                v = this.querySelector(C);
               if (!v)
-                return console.warn(`can not find selector in "slice for=${S}" `, o.outerHTML);
+                return console.warn(`can not find selector in "slice for=${C}" `, o.outerHTML);
               f(o, "slice") || o.setAttribute("slice", f(o, "name"));
             }
             return v;
           }
-          L(this, "[slice],[slice-event]", (o) => {
+          $(this, "[slice],[slice-event]", (o) => {
             let v = f(o, "slice-event");
-            const S = o.hasAttribute("slice-value") || o.hasAttribute("value") || o.value, j = g(o);
-            o.dceInitialized || (o.dceInitialized = 1, j.hasAttribute("custom-validity") && (v += " change submit"), [...new Set((v || "change").split(" "))].forEach((ce) => j.addEventListener(ce, (A) => {
-              A.sliceElement = o, A.sliceEventSource = A.currentTarget || A.target, A.sliceProcessed = 0;
-              const me = te(b, f(A.sliceElement, "slice"), A);
-              L(this, "[custom-validity]", (P) => {
-                if (!P.setCustomValidity)
+            const C = o.hasAttribute("slice-value") || o.hasAttribute("value") || o.value, P = g(o);
+            o.dceInitialized || (o.dceInitialized = 1, P.hasAttribute("custom-validity") && (v += " change submit"), [...new Set((v || "change").split(" "))].forEach((ce) => P.addEventListener(ce, (w) => {
+              w.sliceElement = o, w.sliceEventSource = w.currentTarget || w.target, w.sliceProcessed = 0;
+              const me = te(b, f(w.sliceElement, "slice"), w);
+              $(this, "[custom-validity]", (R) => {
+                if (!R.setCustomValidity)
                   return;
-                const F = f(P, "custom-validity");
+                const F = f(R, "custom-validity");
                 try {
-                  const R = F && z(F, E);
-                  P.setCustomValidity(R === !0 ? "" : R === !1 ? "invalid" : R);
-                } catch (R) {
-                  console.error(R, "xPath", F);
+                  const I = F && M(F, E);
+                  R.setCustomValidity(I === !0 ? "" : I === !1 ? "invalid" : I);
+                } catch (I) {
+                  console.error(I, "xPath", F);
                 }
               });
-              const _ = f(j, "custom-validity"), C = _ && z(_, E), B = C === !0 ? "" : C;
+              const _ = f(P, "custom-validity"), L = _ && M(_, E), B = L === !0 ? "" : L;
               if (_) {
-                if (o.setCustomValidity ? o.setCustomValidity(B) : o.validationMessage = B, me.map((P) => P.setAttribute("validation-message", B)), 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);
+                if (o.setCustomValidity ? o.setCustomValidity(B) : o.validationMessage = B, me.map((R) => R.setAttribute("validation-message", B)), w.type === "submit")
+                  return L === !0 ? void 0 : (setTimeout(k, 1), !!L === L ? (L || w.preventDefault(), L) : L ? (w.preventDefault(), !1) : void 0);
+                setTimeout(k, 1);
               }
-              this.onSlice(A);
-            })), (!v || v.includes("init")) && (S ? this.onSlice({ type: "init", target: j, sliceElement: o, sliceEventSource: j }) : o.value = y(f(o, "slice"))));
+              this.onSlice(w);
+            })), (!v || v.includes("init")) && (C ? this.onSlice({ type: "init", target: P, sliceElement: o, sliceEventSource: P }) : o.value = y(f(o, "slice"))));
           }), this.#e = 0;
         };
-        U(), G();
+        k(), G();
       }
       #t(m, n) {
         m === "value" && (this.value = n);
         let c = this.xml.querySelector(`attributes>${m}`);
-        c ? V(c).append($(c, n)) : (c = w(m, n, this.xml), this.xml.querySelector("attributes").append(c)), this.dispatchEvent(new CustomEvent("change", { bubbles: !0, detail: { [m]: n } }));
+        c ? V(c).append(D(c, n)) : (c = T(m, n, this.xml), this.xml.querySelector("attributes").append(c)), this.dispatchEvent(new CustomEvent("change", { bubbles: !0, detail: { [m]: n } }));
       }
       attributeChangedCallback(m, n, c) {
         !this.xml || this.#e || (this.#t(m, c), this.transform());
@@ -517,15 +519,15 @@ xml:
         return r;
       }
     }
-    const q = (d) => {
-      window.customElements.get(d) !== T && window.customElements.define(d, T);
+    const S = (u) => {
+      window.customElements.get(u) !== d && window.customElements.define(u, d);
     };
     if (t)
-      q(t);
+      S(t);
     else {
-      const d = s;
-      this.setAttribute("tag", d), q(d);
-      const m = document.createElement(d);
+      const u = s;
+      this.setAttribute("tag", u), S(u);
+      const m = document.createElement(u);
       this.getAttributeNames().forEach((n) => m.setAttribute(n, this.getAttribute(n))), m.append(...[...this.childNodes].filter((n) => n.localName !== "style")), this.append(m);
     }
   }
@@ -536,13 +538,13 @@ xml:
     return this;
   }
   get xslt() {
-    return X(this.xsltString);
+    return q(this.xsltString);
   }
 }
-window.customElements.define("custom-element", Se);
+window.customElements.define("custom-element", Ce);
 export {
-  Se as C,
-  I as a,
+  Ce as C,
+  X as a,
   xe as b,
   he as c,
   be as d,
@@ -555,11 +557,11 @@ export {
   Ae as k,
   Y as l,
   ve as m,
-  z as n,
-  D as o,
+  M as n,
+  z as o,
   we as p,
   Te as q,
   Q as s,
   ee as t,
-  X as x
+  q as x
 };

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-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;
+"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;

package/dist/custom-element-bundle.js

@@ -1,5 +1,5 @@
-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 { 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";

package/dist/demo/a.svg

@@ -1,27 +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 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/data-slices.html

@@ -210,6 +210,43 @@
     </template>
 </html-demo-element>
 
+<html-demo-element legend="12. checkbox use"
+                   description="The value is empty when unchecked. Otherwise taken either from slice-value or value attribute.">
+    <p>Check the box to see the value in slice</p>
+    <template>
+        <custom-element>
+            <template>
+                <input type="checkbox" slice="is-checked" value="V0" checked/>
+                slice: {/datadom/slice/is-checked} <br/>
+                <xsl:variable name="v1">V1</xsl:variable> <br/>
+                $v1={$v1}<br/>
+
+                <!-- slice-variable is XPath. $v1 is available only in template, embedding trick -->
+                <input type="checkbox" slice="s2" slice-value="'{$v1}'"/>
+                slice 2: {//s2} <br/>
+
+                <!-- variable is used in template scope -->
+                <input type="checkbox" slice="s3" value="{$v1}"/>
+                slice 3: {//s3}
+            </template>
+        </custom-element>
+    </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.">
+    <p>Check the radiobutton to see the value in slice</p>
+    <template>
+        <custom-element>
+            <template>
+                V0: <input type="radio" slice="radio-group" value="V0" name="g1"/> <br/>
+                V1: <input type="radio" slice="radio-group" value="V1" name="g1" checked/> <br/>
+                slice: {//radio-group} <br/>
+            </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/demo.css

@@ -14,9 +14,6 @@ script{ display:none !important; }
 dd{ padding: 1rem;}
 p{ margin: 0;}
 code{ font-weight: bold; color: green; text-wrap: nowrap; }
-*{
-    gap: 1rem;
-}
 
 html-demo-element h3
 {   text-shadow: 0 0 0.25em white;