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

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

@@ -15,6 +15,7 @@ const attr = (el, attr)=> el.getAttribute?.(attr)
 ,   xslNs = x => ( x?.setAttribute('xmlns:xsl', XSL_NS_URL ), x )
 ,   xslHtmlNs = x => ( x?.setAttribute('xmlns:xhtml', HTML_NS_URL ), xslNs(x) )
 ,   isValidTagName = tag=> ( /^[_a-zA-Z][-_:a-zA-Z0-9]*$/ .test(tag) )
+,   mix = (o,kv) => { Object.keys(kv).map(k=> o[k] = kv[k] ) ; return o}
 ,   create = ( tag, t = '', d=document ) =>
 {
     const create = tag => ( e => ((t && e.append(createText(d.ownerDocument||d, t))),e) )((d.ownerDocument || d ).createElement( tag ))
@@ -29,11 +30,13 @@ const attr = (el, attr)=> el.getAttribute?.(attr)
 {   const px = p.ownerDocument.createElementNS(p.namespaceURI,tag);
     for( let a of p.attributes)
         px.setAttribute(a.name, a.value);
-    while( p.firstChild )
-        px.append(p.firstChild);
+    for( let c of p.childNodes )
+        px.append(c.cloneNode(true));
     return px;
 };
 
+export {cloneAs,mix};
+
     function
 ASSERT(x)
 {
@@ -149,8 +152,13 @@ tagUid( node )
     export function
 createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
 {
+    const declaredAttributes = []
+    , hardcodedAttributes = {}
+    , exposedAttributes={};
+
     if( templateNode.tagName === S || templateNode.documentElement?.tagName === S )
-        return tagUid(templateNode)
+        return tagUid(mix( templateNode, { declaredAttributes, hardcodedAttributes, exposedAttributes } ));
+
     const sanitizeXsl = xml2dom(`<xsl:stylesheet version="1.0" xmlns:xsl="${ XSL_NS_URL }" xmlns:xhtml="${ HTML_NS_URL }" xmlns:exsl="${EXSL_NS_URL}" exclude-result-prefixes="exsl" >
     <xsl:output method="xml"/>
         <xsl:template match="/"><dce-root xmlns="${ HTML_NS_URL }"><xsl:apply-templates select="*" /></dce-root></xsl:template>
@@ -198,9 +206,9 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
     </xsl:template>
     <xsl:template mode="sanitize" match="xhtml:input">
         <xsl:element name="{local-name()}">
-            <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
+            <xsl:apply-templates mode="sanitize" select="*[not(name()='slice')]|@*|text()"/>
         </xsl:element>
-        <xsl:for-each select="*">
+        <xsl:for-each select="slice">
             <xsl:copy>
                 <xsl:attribute name="for" >^</xsl:attribute>
                 <xsl:apply-templates mode="sanitize" select="*|@*|text()"/>
@@ -285,35 +293,45 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
         [...fr.childNodes].forEach(n=>r.append(n));
         fr.append(r)
     }
-    const params = [];
+
     [...fr.querySelectorAll('dce-root>attribute')].forEach( a=>
     {
         keepAttributes(a,'namespace,name,select');
         const p = cloneAs(a,'xsl:param')
         ,  name = attr(a,'name');
+
+        declaredAttributes.push(name);
+        if( a.childNodes.length)
+            hardcodedAttributes[name] = a.textContent;
+
         payload.append(p);
-        keepAttributes(p,'select,name');
-        let select = attr(p,'select')?.split('??')
-        if( !select)
-        {   select = ['//'+name, `'${p.textContent}'`];
-            emptyNode(p);
-            p.setAttribute('name',name);
-        }
-        let val;
-        if( select?.length>1 )
-        {   p.removeAttribute('select');
-            const c = $( xslDom, 'template[match="ignore"]>choose').cloneNode(true);
-            emptyNode(c.firstElementChild).append( createText(c,'{'+select[0]+'}'));
-            emptyNode(c.lastElementChild ).append( createText(c,'{'+select[1]+'}'));
-            c.firstElementChild.setAttribute('test',select[0]);
-            p.append(c);
-            val = c.cloneNode(true);
+
+        if( a.hasAttribute('select') )
+        {
+            exposedAttributes[ name ] = attr( a, 'select' );
+            keepAttributes( p, 'select,name' );
+
+            let select = attr(a,'select').split('??');
+
+            let val;
+            if( select?.length>1 )
+            {   p.removeAttribute('select');
+                const c = $( xslDom, 'template[match="ignore"]>choose').cloneNode(true);
+                // todo multiple ?? operators
+                emptyNode(c.firstElementChild).append( createText(c,'{'+select[0]+'}'));
+                emptyNode(c.lastElementChild ).append( createText(c,'{'+select[1]+'}'));
+                c.firstElementChild.setAttribute('test','string-length('+select[0]+')');
+                p.append(c);
+                val = c.cloneNode(true);
+            }else
+                val = cloneAs(a,'xsl:value-of');
+            val.removeAttribute('name');
+            a.append(val);
+            a.removeAttribute('select');
         }else
-            val=cloneAs(a,'xsl:value-of');
-        val.removeAttribute('name');
-        a.append(val);
-        a.removeAttribute('select');
-        params.push(p)
+        {   keepAttributes( p, 'name' );
+            p.setAttribute('select','/datadom/attributes/'+name)
+        }
     });
     [...fr.querySelectorAll('[value]')].filter(el=>el.getAttribute('value').match( /\{(.*)\?\?(.*)\}/g )).forEach(el=>
     {   const v = attr(el,'value');
@@ -338,8 +356,8 @@ createXsltFromDom( templateNode, S = 'xsl:stylesheet' )
 
     forEach$( payload,'slot', s => s.parentNode.replaceChild( slot2xsl(s), s ) )
 
-    const ret = tagUid(xslDom)
-    ret.params = params;
+    const ret = tagUid(xslDom);
+    mix( ret, { declaredAttributes, hardcodedAttributes, exposedAttributes } );
     return ret;
 }
     export async function
@@ -423,12 +441,13 @@ event2slice( x, sliceNames, ev, dce )
             s.setAttribute('validation-message', el.validationMessage);
         ev.type==='init' && cleanSliceValue();
         s.append( obj2node( ev, 'event', d ) );
+        const notChecked = ( 'checkbox' === el.type || 'radio' === el.type ) && !el.checked ;
         if( sel.hasAttribute('slice-value') )
         {   if( el.value === undefined)
                 s.removeAttribute('value')
             else
                 s.setAttribute('value', el.value );
-            const v = xPath( attr( sel, 'slice-value'),s );
+            const v = notChecked? '' : xPath( attr( sel, 'slice-value'),s );
             cleanSliceValue();
             s.append( createText( d, v ) );
         }else
@@ -437,7 +456,8 @@ event2slice( x, sliceNames, ev, dce )
                 s.append( obj2node(new FormData(el),'value', s.ownerDocument) )
                 return s
             }
-            const v = el.value ?? attr( el, 'value' ) ;
+
+            const v = notChecked? '' : el.value ?? attr( el, 'value' );
             cleanSliceValue();
             if( v === null || v === undefined )
                 [...s.childNodes].filter(n=>n.localName!=='event').map(n=>n.remove());
@@ -492,10 +512,12 @@ const loadTemplateRoots = async ( src, dce )=>
 }
 export function mergeAttr( from, to )
 {   for( let a of from.attributes)
-    {   a.namespaceURI? to.setAttributeNS( a.namespaceURI, a.name, a.value ) : to.setAttribute( a.name, a.value )
-        if( a.name === 'value')
-            to.value = a.value
-    }
+        try
+        {   a.namespaceURI? to.setAttributeNS( a.namespaceURI, a.name, a.value ) : to.setAttribute( a.name, a.value )
+            if( a.name === 'value')
+                to.value = a.value
+        }catch(e)
+            { console.warn('attribute assignment error',e?.message || e); }
 }
 export function assureUnique(n, id=0)
 {
@@ -528,7 +550,7 @@ export function appendByDceId(parent,e,k)
 }
 export function merge( parent, fromArr )
 {
-    if( 'dce-root' === parent.firstElementChild?.localName && 'dce-root' !== fromArr[0].localName)
+    if( 'dce-root' === parent.firstElementChild?.localName && 'dce-root' !== fromArr[0]?.localName)
         return;
     if( !fromArr.length )
         return 'dce-root' !== parent.firstElementChild?.localName && removeChildren(parent);
@@ -656,12 +678,13 @@ CustomElement extends HTMLElement
         , sliceNames = sliceNodes.map(e=>attr(e,'slice'))
                                 .filter(n=>!n.includes('/'))
                                 .filter((v, i, a)=>a.indexOf(v) === i)
-                                .map(splitSliceNames).flat()
-        , declaredAttributes = templateDocs.reduce( (ret,t) => { if( t.params ) ret.push( ...t.params ); return ret; }, [] );
+                                .map(splitSliceNames).flat();
+
+        const { declaredAttributes, hardcodedAttributes, exposedAttributes } = templateDocs[0];
 
         class DceElement extends HTMLElement
         {
-            static get observedAttributes(){ return declaredAttributes.map( a=>attr(a,'name')); }
+            static get observedAttributes(){ return declaredAttributes; }
             #inTransform = 0;
             connectedCallback()
             {   let payload = sanitizeBlankText(this.childNodes);
@@ -694,7 +717,11 @@ CustomElement extends HTMLElement
                 xslNs(payloadNode);
                 xslHtmlNs(payloadNode);
                 this.innerHTML='';
-                const attrsRoot = injectData( x, 'attributes' , this.attributes, e => createXmlNode( e.nodeName, e.value ) );
+                const attrsRoot = injectData( x, 'attributes' , this.attributes, e => createXmlNode( e.nodeName, e.value ) )
+                , inAttrs = a=> this.hasAttribute(a) || [...attrsRoot.children].find(e=>e.localName === a);
+                Object.keys(hardcodedAttributes).map(a=> inAttrs(a) || attrsRoot.append(createXmlNode(a,hardcodedAttributes[a])) );
+                declaredAttributes.map(a=> inAttrs(a) || attrsRoot.append(createXmlNode(a)) );
+
                 injectData( x, 'dataset', Object.keys( this.dataset ), k => createXmlNode( k, this.dataset[ k ] ) );
                 const sliceRoot = injectData( x, 'slice', sliceNames, k => createXmlNode( k, '' ) )
                 ,     sliceXPath = x => xPath(x, sliceRoot);
@@ -740,13 +767,20 @@ CustomElement extends HTMLElement
                         merge( this, f.childNodes )
                     })
 
-                    DceElement.observedAttributes.map( a =>
+                    Object.entries(hardcodedAttributes).map(( [a,v] )=>
+                    {   if( !this.hasAttribute(a) && v !== attr(this,a) )
+                        {   this.setAttribute( a, v );
+                            this.#applyAttribute( a, v );
+                        }
+                    });
+
+                    Object.keys(exposedAttributes).map( a =>
                     {   let v = attr(this.firstElementChild,a);
                         if( v !== attr(this,a) )
                         {   this.setAttribute( a, v );
                             this.#applyAttribute( a, v );
                         }
-                    })
+                    });
 
                     function getSliceTarget(el)
                     {   let r = el;

package/src/custom-element/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/src/custom-element/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/src/custom-element/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 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>
+            <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/src/custom-element/demo/external-template.html

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

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