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

package/storybook-static/assets/{local-storage.test.stories-BY-PWhuk.js → local-storage.test.stories-C0Yzy6Am.js}

@@ -1,4 +1,4 @@
-import{w as x,u as y,e as c}from"./index-BSz1w4Gl.js";import"./custom-element-BDGsYgbP.js";import"./http-request-DNq59pnj.js";import"./location-element-hKpcXCdn.js";const g=(l,t)=>{if(l==="text")return t;if(l==="json")try{return JSON.parse(t)}catch{return null}const a=document.createElement("input");return a.setAttribute("type",l),l==="number"?(a.value=t,a.valueAsNumber):l==="date"?t?(a.valueAsDate=new Date(t),a.value):null:(a.value=t,a.value)};let b,S,w;function I(l,t){b.call(localStorage,l,t),window.dispatchEvent(new CustomEvent("local-storage",{detail:{key:l,value:t}}))}function B(l){S.call(localStorage,l),window.dispatchEvent(new CustomEvent("local-storage",{detail:{key:l}}))}function p(){w.call(localStorage),window.dispatchEvent(new CustomEvent("local-storage",{detail:{}}))}function T(){b||(b=localStorage.setItem,localStorage.setItem=I,S=localStorage.removeItem,localStorage.removeItem=B,w=localStorage.clear,localStorage.clear=p)}T();function V(l,t){I(l,t)}class K extends HTMLElement{static observedAttributes=["value","slice","key","type","live"];#e;get value(){return this.#e===null?void 0:this.#e}set value(t){return this.#e=t}async connectedCallback(){const t=i=>this.getAttribute(i),a=()=>{this.#e=g(t("type"),localStorage.getItem(t("key"))),this.dispatchEvent(new Event("change"))};if(this.#e=g(t("type"),localStorage.getItem(t("key"))),this.hasAttribute("value")?V(t("key"),this.#e=t("value")):a(),this.hasAttribute("live")){const i=e=>(e.detail.key===t("key")||!e.detail.key)&&a();window.addEventListener("local-storage",i),T(),this._destroy=()=>window.removeEventListener("local-storage",i)}}disconnectedCallback(){this._destroy?.()}}window.customElements.define("local-storage",K);const r={title:"",slice:"ls-slice",key:"sb-ls-key",value:"",live:"",body:""};function o(l){return new Promise(t=>setTimeout(t,l))}function f(l){const{title:t,slice:a,key:i,value:e,live:n,body:u}={...r,...l};return`
+import{w as x,u as y,e as c}from"./index-CxRwF5Or.js";import"./custom-element-uuAtIYWS.js";import"./http-request-DNq59pnj.js";import"./location-element-hKpcXCdn.js";const g=(l,t)=>{if(l==="text")return t;if(l==="json")try{return JSON.parse(t)}catch{return null}const a=document.createElement("input");return a.setAttribute("type",l),l==="number"?(a.value=t,a.valueAsNumber):l==="date"?t?(a.valueAsDate=new Date(t),a.value):null:(a.value=t,a.value)};let b,S,w;function I(l,t){b.call(localStorage,l,t),window.dispatchEvent(new CustomEvent("local-storage",{detail:{key:l,value:t}}))}function B(l){S.call(localStorage,l),window.dispatchEvent(new CustomEvent("local-storage",{detail:{key:l}}))}function p(){w.call(localStorage),window.dispatchEvent(new CustomEvent("local-storage",{detail:{}}))}function T(){b||(b=localStorage.setItem,localStorage.setItem=I,S=localStorage.removeItem,localStorage.removeItem=B,w=localStorage.clear,localStorage.clear=p)}T();function V(l,t){I(l,t)}class K extends HTMLElement{static observedAttributes=["value","slice","key","type","live"];#e;get value(){return this.#e===null?void 0:this.#e}set value(t){return this.#e=t}async connectedCallback(){const t=i=>this.getAttribute(i),a=()=>{this.#e=g(t("type"),localStorage.getItem(t("key"))),this.dispatchEvent(new Event("change"))};if(this.#e=g(t("type"),localStorage.getItem(t("key"))),this.hasAttribute("value")?V(t("key"),this.#e=t("value")):a(),this.hasAttribute("live")){const i=e=>(e.detail.key===t("key")||!e.detail.key)&&a();window.addEventListener("local-storage",i),T(),this._destroy=()=>window.removeEventListener("local-storage",i)}}disconnectedCallback(){this._destroy?.()}}window.customElements.define("local-storage",K);const r={title:"",slice:"ls-slice",key:"sb-ls-key",value:"",live:"",body:""};function o(l){return new Promise(t=>setTimeout(t,l))}function f(l){const{title:t,slice:a,key:i,value:e,live:n,body:u}={...r,...l};return`
         <fieldset>
             <legend>${t}</legend>
 

package/storybook-static/assets/{location-element.test.stories-3auBYEaU.js → location-element.test.stories-DNFrEu5A.js}

@@ -1,4 +1,4 @@
-import{w as m,e}from"./index-BSz1w4Gl.js";import"./custom-element-BDGsYgbP.js";import"./location-element-hKpcXCdn.js";const u={title:"",slice:"url-slice",href:"",live:"",body:""};function h(c){return new Promise(o=>setTimeout(o,c))}function x(c){const{title:o,slice:t,href:l,live:r,body:i}={...u,...c};return`
+import{w as m,e}from"./index-CxRwF5Or.js";import"./custom-element-uuAtIYWS.js";import"./location-element-hKpcXCdn.js";const u={title:"",slice:"url-slice",href:"",live:"",body:""};function h(c){return new Promise(o=>setTimeout(o,c))}function x(c){const{title:o,slice:t,href:l,live:r,body:i}={...u,...c};return`
         <fieldset>
             <legend>${o}</legend>
 

package/storybook-static/assets/{module-url.test.stories-B7L9cL60.js → module-url.test.stories-CXibF5Ta.js}

@@ -1,4 +1,4 @@
-import{w as s,e as a}from"./index-BSz1w4Gl.js";import"./custom-element-BDGsYgbP.js";const c=(t,e)=>t.getAttribute(e);class b extends HTMLElement{static observedAttributes=["slice","src"];sliceInit(){let e=c(this,"src");try{const l=e.charAt(0)==="."?new URL(e,this.closest("[base]")?.getAttribute("base")||location.href).href:import.meta.resolve(e);this.setAttribute("value",this.value=l)}catch(l){this.setAttribute("error",l.message),this.setAttribute("value",e),console.error(l.message??l,e)}this.dispatchEvent(new Event("change"))}attributeChangedCallback(e,l,u){e==="src"&&this.sliceInit()}}window.customElements.define("module-url",b);function d(t){const{title:e,body:l}=t;return`
+import{w as s,e as a}from"./index-CxRwF5Or.js";import"./custom-element-uuAtIYWS.js";const c=(t,e)=>t.getAttribute(e);class b extends HTMLElement{static observedAttributes=["slice","src"];sliceInit(){let e=c(this,"src");try{const l=e.charAt(0)==="."?new URL(e,this.closest("[base]")?.getAttribute("base")||location.href).href:import.meta.resolve(e);this.setAttribute("value",this.value=l)}catch(l){this.setAttribute("error",l.message),this.setAttribute("value",e),console.error(l.message??l,e)}this.dispatchEvent(new Event("change"))}attributeChangedCallback(e,l,u){e==="src"&&this.sliceInit()}}window.customElements.define("module-url",b);function d(t){const{title:e,body:l}=t;return`
         <fieldset>
             <legend>${e}</legend>
             ${l}

package/storybook-static/assets/{preview-CfWMRsRq.js → preview-Bnd0XhaF.js}

@@ -1,4 +1,4 @@
-import{i as F,d,E as N,t as ye,I as G,k as ve,c as we,R as be,h as Ee}from"./handlers-CW9pDZnt.js";function Re(e,t){const r=e.emit;if(r._isPiped)return;const s=function(n,...i){return t.emit(n,...i),r.call(this,n,...i)};s._isPiped=!0,e.emit=s}function ke(e){const t=[...e];return Object.freeze(t),t}class qe{subscriptions=[];dispose(){let t;for(;t=this.subscriptions.shift();)t()}}class Se{constructor(t){this.initialHandlers=t,this.handlers=[...t]}handlers;prepend(t){this.handlers.unshift(...t)}reset(t){this.handlers=t.length>0?[...t]:[...this.initialHandlers]}currentHandlers(){return this.handlers}}class Le extends qe{handlersController;emitter;publicEmitter;events;constructor(...t){super(),F(this.validateHandlers(t),d.formatMessage("Failed to apply given request handlers: invalid input. Did you forget to spread the request handlers Array?")),this.handlersController=new Se(t),this.emitter=new N,this.publicEmitter=new N,Re(this.emitter,this.publicEmitter),this.events=this.createLifeCycleEvents(),this.subscriptions.push(()=>{this.emitter.removeAllListeners(),this.publicEmitter.removeAllListeners()})}validateHandlers(t){return t.every(r=>!Array.isArray(r))}use(...t){F(this.validateHandlers(t),d.formatMessage('Failed to call "use()" with the given request handlers: invalid input. Did you forget to spread the array of request handlers?')),this.handlersController.prepend(t)}restoreHandlers(){this.handlersController.currentHandlers().forEach(t=>{t.isUsed=!1})}resetHandlers(...t){this.handlersController.reset(t)}listHandlers(){return ke(this.handlersController.currentHandlers())}createLifeCycleEvents(){return{on:(...t)=>this.publicEmitter.on(...t),removeListener:(...t)=>this.publicEmitter.removeListener(...t),removeAllListeners:(...t)=>this.publicEmitter.removeAllListeners(...t)}}}var Te=async e=>{try{return{error:null,data:await e().catch(r=>{throw r})}}catch(t){return{error:t,data:null}}};const xe=async({request:e,requestId:t,handlers:r,resolutionContext:s})=>{let o=null,n=null;for(const i of r)if(n=await i.run({request:e,requestId:t,resolutionContext:s}),n!==null&&(o=i),n?.response)break;return o?{handler:o,parsedResult:n?.parsedResult,response:n?.response}:null};async function Pe(e,t="warn"){const r=new URL(e.url),s=ye(r)+r.search,o=e.method==="HEAD"||e.method==="GET"?null:await e.clone().text(),i=`intercepted a request without a matching request handler:${`
+import{i as F,d,E as N,t as ye,I as G,k as ve,c as we,R as be,h as Ee}from"./handlers-yVPwH_Nz.js";function Re(e,t){const r=e.emit;if(r._isPiped)return;const s=function(n,...i){return t.emit(n,...i),r.call(this,n,...i)};s._isPiped=!0,e.emit=s}function ke(e){const t=[...e];return Object.freeze(t),t}class qe{subscriptions=[];dispose(){let t;for(;t=this.subscriptions.shift();)t()}}class Se{constructor(t){this.initialHandlers=t,this.handlers=[...t]}handlers;prepend(t){this.handlers.unshift(...t)}reset(t){this.handlers=t.length>0?[...t]:[...this.initialHandlers]}currentHandlers(){return this.handlers}}class Le extends qe{handlersController;emitter;publicEmitter;events;constructor(...t){super(),F(this.validateHandlers(t),d.formatMessage("Failed to apply given request handlers: invalid input. Did you forget to spread the request handlers Array?")),this.handlersController=new Se(t),this.emitter=new N,this.publicEmitter=new N,Re(this.emitter,this.publicEmitter),this.events=this.createLifeCycleEvents(),this.subscriptions.push(()=>{this.emitter.removeAllListeners(),this.publicEmitter.removeAllListeners()})}validateHandlers(t){return t.every(r=>!Array.isArray(r))}use(...t){F(this.validateHandlers(t),d.formatMessage('Failed to call "use()" with the given request handlers: invalid input. Did you forget to spread the array of request handlers?')),this.handlersController.prepend(t)}restoreHandlers(){this.handlersController.currentHandlers().forEach(t=>{t.isUsed=!1})}resetHandlers(...t){this.handlersController.reset(t)}listHandlers(){return ke(this.handlersController.currentHandlers())}createLifeCycleEvents(){return{on:(...t)=>this.publicEmitter.on(...t),removeListener:(...t)=>this.publicEmitter.removeListener(...t),removeAllListeners:(...t)=>this.publicEmitter.removeAllListeners(...t)}}}var Te=async e=>{try{return{error:null,data:await e().catch(r=>{throw r})}}catch(t){return{error:t,data:null}}};const xe=async({request:e,requestId:t,handlers:r,resolutionContext:s})=>{let o=null,n=null;for(const i of r)if(n=await i.run({request:e,requestId:t,resolutionContext:s}),n!==null&&(o=i),n?.response)break;return o?{handler:o,parsedResult:n?.parsedResult,response:n?.response}:null};async function Pe(e,t="warn"){const r=new URL(e.url),s=ye(r)+r.search,o=e.method==="HEAD"||e.method==="GET"?null:await e.clone().text(),i=`intercepted a request without a matching request handler:${`
 
   • ${e.method} ${s}
 
@@ -49,4 +49,4 @@ Please consider using a custom "serviceWorker.url" option to point to the actual
 [msw-storybook-addon] You are using parameters.msw as an Array instead of an Object with a property "handlers". This usage is deprecated and will be removed in the next release. Please use the Object syntax instead.
 
 More info: https://github.com/mswjs/msw-storybook-addon/blob/main/MIGRATION.md#parametersmsw-array-notation-deprecated-in-favor-of-object-notation
-`);function or(e){if(E?.resetHandlers(),e!=null){if(Array.isArray(e)&&e.length>0){nr(),E.use(...e);return}if("handlers"in e&&e.handlers){const t=Object.values(e.handlers).filter(Boolean).reduce((r,s)=>r.concat(s),[]);t.length>0&&E.use(...t);return}}}var ir=async e=>(await Zt(),or(e.parameters.msw),{});Qt({onUnhandledRequest:"bypass"});const lr={parameters:{controls:{matchers:{color:/(background|color)$/i,date:/Date$/i}},msw:{handlers:{auth:null,others:Ee}}},loaders:[ir],tags:["autodocs","autodocs"]};export{lr as default};
+`);function or(e){if(E?.resetHandlers(),e!=null){if(Array.isArray(e)&&e.length>0){nr(),E.use(...e);return}if("handlers"in e&&e.handlers){const t=Object.values(e.handlers).filter(Boolean).reduce((r,s)=>r.concat(s),[]);t.length>0&&E.use(...t);return}}}var ir=async e=>(await Zt(),or(e.parameters.msw),{});Qt({onUnhandledRequest:"bypass"});const lr={parameters:{controls:{matchers:{color:/(background|color)$/i,date:/Date$/i}},msw:{handlers:{auth:null,others:Ee}}},loaders:[ir],tags:["autodocs","autodocs","autodocs"]};export{lr as default};

package/storybook-static/assets/{preview-BRPR-UXC.js → preview-CNKoaWES.js}

@@ -1 +1 @@
-import{i as r}from"./index-BSz1w4Gl.js";var{step:a}=r({step:(p,t,e)=>t(e)},{intercept:!0}),i={throwPlayFunctionExceptions:!1};export{i as parameters,a as runStep};
+import{i as r}from"./index-CxRwF5Or.js";var{step:a}=r({step:(p,t,e)=>t(e)},{intercept:!0}),i={throwPlayFunctionExceptions:!1};export{i as parameters,a as runStep};

package/storybook-static/assets/preview-DAeyCMnM.js

@@ -0,0 +1 @@
+import{i as S}from"./tiny-invariant-CopsF_GD.js";const{useEffect:T}=__STORYBOOK_MODULE_PREVIEW_API__,{global:u}=__STORYBOOK_MODULE_GLOBAL__;var j="measureEnabled";function Y(){let e=u.document.documentElement,t=Math.max(e.scrollHeight,e.offsetHeight);return{width:Math.max(e.scrollWidth,e.offsetWidth),height:t}}function K(){let e=u.document.createElement("canvas");e.id="storybook-addon-measure";let t=e.getContext("2d");S(t!=null);let{width:o,height:l}=Y();return A(e,t,{width:o,height:l}),e.style.position="absolute",e.style.left="0",e.style.top="0",e.style.zIndex="2147483647",e.style.pointerEvents="none",u.document.body.appendChild(e),{canvas:e,context:t,width:o,height:l}}function A(e,t,{width:o,height:l}){e.style.width=`${o}px`,e.style.height=`${l}px`;let i=u.window.devicePixelRatio;e.width=Math.floor(o*i),e.height=Math.floor(l*i),t.scale(i,i)}var h={};function G(){h.canvas||(h=K())}function H(){h.context&&h.context.clearRect(0,0,h.width??0,h.height??0)}function U(e){H(),e(h.context)}function V(){S(h.canvas),S(h.context),A(h.canvas,h.context,{width:0,height:0});let{width:e,height:t}=Y();A(h.canvas,h.context,{width:e,height:t}),h.width=e,h.height=t}function Z(){h.canvas&&(H(),h.canvas.parentNode?.removeChild(h.canvas),h={})}var w={margin:"#f6b26b",border:"#ffe599",padding:"#93c47d",content:"#6fa8dc",text:"#232020"},c=6;function W(e,{x:t,y:o,w:l,h:i,r:n}){t=t-l/2,o=o-i/2,l<2*n&&(n=l/2),i<2*n&&(n=i/2),e.beginPath(),e.moveTo(t+n,o),e.arcTo(t+l,o,t+l,o+i,n),e.arcTo(t+l,o+i,t,o+i,n),e.arcTo(t,o+i,t,o,n),e.arcTo(t,o,t+l,o,n),e.closePath()}function J(e,{padding:t,border:o,width:l,height:i,top:n,left:r}){let f=l-o.left-o.right-t.left-t.right,a=i-t.top-t.bottom-o.top-o.bottom,s=r+o.left+t.left,m=n+o.top+t.top;return e==="top"?s+=f/2:e==="right"?(s+=f,m+=a/2):e==="bottom"?(s+=f/2,m+=a):e==="left"?m+=a/2:e==="center"&&(s+=f/2,m+=a/2),{x:s,y:m}}function Q(e,t,{margin:o,border:l,padding:i},n,r){let f=d=>0,a=0,s=0,m=r?1:.5,g=r?n*2:0;return e==="padding"?f=d=>i[d]*m+g:e==="border"?f=d=>i[d]+l[d]*m+g:e==="margin"&&(f=d=>i[d]+l[d]+o[d]*m+g),t==="top"?s=-f("top"):t==="right"?a=f("right"):t==="bottom"?s=f("bottom"):t==="left"&&(a=-f("left")),{offsetX:a,offsetY:s}}function x(e,t){return Math.abs(e.x-t.x)<Math.abs(e.w+t.w)/2&&Math.abs(e.y-t.y)<Math.abs(e.h+t.h)/2}function tt(e,t,o){return e==="top"?t.y=o.y-o.h-c:e==="right"?t.x=o.x+o.w/2+c+t.w/2:e==="bottom"?t.y=o.y+o.h+c:e==="left"&&(t.x=o.x-o.w/2-c-t.w/2),{x:t.x,y:t.y}}function X(e,t,{x:o,y:l,w:i,h:n},r){return W(e,{x:o,y:l,w:i,h:n,r:3}),e.fillStyle=`${w[t]}dd`,e.fill(),e.strokeStyle=w[t],e.stroke(),e.fillStyle=w.text,e.fillText(r,o,l),W(e,{x:o,y:l,w:i,h:n,r:3}),e.fillStyle=`${w[t]}dd`,e.fill(),e.strokeStyle=w[t],e.stroke(),e.fillStyle=w.text,e.fillText(r,o,l),{x:o,y:l,w:i,h:n}}function C(e,t){e.font="600 12px monospace",e.textBaseline="middle",e.textAlign="center";let o=e.measureText(t),l=o.actualBoundingBoxAscent+o.actualBoundingBoxDescent,i=o.width+c*2,n=l+c*2;return{w:i,h:n}}function et(e,t,{type:o,position:l="center",text:i},n,r=!1){let{x:f,y:a}=J(l,t),{offsetX:s,offsetY:m}=Q(o,l,t,c+1,r);f+=s,a+=m;let{w:g,h:d}=C(e,i);if(n&&x({x:f,y:a,w:g,h:d},n)){let M=tt(l,{x:f,y:a,w:g,h:d},n);f=M.x,a=M.y}return X(e,o,{x:f,y:a,w:g,h:d},i)}function ot(e,{w:t,h:o}){let l=t*.5+c,i=o*.5+c;return{offsetX:(e.x==="left"?-1:1)*l,offsetY:(e.y==="top"?-1:1)*i}}function it(e,t,{type:o,text:l}){let{floatingAlignment:i,extremities:n}=t,r=n[i.x],f=n[i.y],{w:a,h:s}=C(e,l),{offsetX:m,offsetY:g}=ot(i,{w:a,h:s});return r+=m,f+=g,X(e,o,{x:r,y:f,w:a,h:s},l)}function E(e,t,o,l){let i=[];o.forEach((n,r)=>{let f=l&&n.position==="center"?it(e,t,n):et(e,t,n,i[r-1],l);i[r]=f})}function lt(e,t,o,l){let i=o.reduce((n,r)=>(Object.prototype.hasOwnProperty.call(n,r.position)||(n[r.position]=[]),n[r.position]?.push(r),n),{});i.top&&E(e,t,i.top,l),i.right&&E(e,t,i.right,l),i.bottom&&E(e,t,i.bottom,l),i.left&&E(e,t,i.left,l),i.center&&E(e,t,i.center,l)}var L={margin:"#f6b26ba8",border:"#ffe599a8",padding:"#93c47d8c",content:"#6fa8dca8"},B=30;function p(e){return parseInt(e.replace("px",""),10)}function b(e){return Number.isInteger(e)?e:e.toFixed(2)}function P(e){return e.filter(t=>t.text!==0&&t.text!=="0")}function nt(e){let t={top:u.window.scrollY,bottom:u.window.scrollY+u.window.innerHeight,left:u.window.scrollX,right:u.window.scrollX+u.window.innerWidth},o={top:Math.abs(t.top-e.top),bottom:Math.abs(t.bottom-e.bottom),left:Math.abs(t.left-e.left),right:Math.abs(t.right-e.right)};return{x:o.left>o.right?"left":"right",y:o.top>o.bottom?"top":"bottom"}}function ft(e){let t=u.getComputedStyle(e),{top:o,left:l,right:i,bottom:n,width:r,height:f}=e.getBoundingClientRect(),{marginTop:a,marginBottom:s,marginLeft:m,marginRight:g,paddingTop:d,paddingBottom:M,paddingLeft:k,paddingRight:F,borderBottomWidth:D,borderTopWidth:I,borderLeftWidth:$,borderRightWidth:N}=t;o=o+u.window.scrollY,l=l+u.window.scrollX,n=n+u.window.scrollY,i=i+u.window.scrollX;let y={top:p(a),bottom:p(s),left:p(m),right:p(g)},q={top:p(d),bottom:p(M),left:p(k),right:p(F)},z={top:p(I),bottom:p(D),left:p($),right:p(N)},_={top:o-y.top,bottom:n+y.bottom,left:l-y.left,right:i+y.right};return{margin:y,padding:q,border:z,top:o,left:l,bottom:n,right:i,width:r,height:f,extremities:_,floatingAlignment:nt(_)}}function rt(e,{margin:t,width:o,height:l,top:i,left:n,bottom:r,right:f}){let a=l+t.bottom+t.top;e.fillStyle=L.margin,e.fillRect(n,i-t.top,o,t.top),e.fillRect(f,i-t.top,t.right,a),e.fillRect(n,r,o,t.bottom),e.fillRect(n-t.left,i-t.top,t.left,a);let s=[{type:"margin",text:b(t.top),position:"top"},{type:"margin",text:b(t.right),position:"right"},{type:"margin",text:b(t.bottom),position:"bottom"},{type:"margin",text:b(t.left),position:"left"}];return P(s)}function at(e,{padding:t,border:o,width:l,height:i,top:n,left:r,bottom:f,right:a}){let s=l-o.left-o.right,m=i-t.top-t.bottom-o.top-o.bottom;e.fillStyle=L.padding,e.fillRect(r+o.left,n+o.top,s,t.top),e.fillRect(a-t.right-o.right,n+t.top+o.top,t.right,m),e.fillRect(r+o.left,f-t.bottom-o.bottom,s,t.bottom),e.fillRect(r+o.left,n+t.top+o.top,t.left,m);let g=[{type:"padding",text:t.top,position:"top"},{type:"padding",text:t.right,position:"right"},{type:"padding",text:t.bottom,position:"bottom"},{type:"padding",text:t.left,position:"left"}];return P(g)}function st(e,{border:t,width:o,height:l,top:i,left:n,bottom:r,right:f}){let a=l-t.top-t.bottom;e.fillStyle=L.border,e.fillRect(n,i,o,t.top),e.fillRect(n,r-t.bottom,o,t.bottom),e.fillRect(n,i+t.top,t.left,a),e.fillRect(f-t.right,i+t.top,t.right,a);let s=[{type:"border",text:t.top,position:"top"},{type:"border",text:t.right,position:"right"},{type:"border",text:t.bottom,position:"bottom"},{type:"border",text:t.left,position:"left"}];return P(s)}function ht(e,{padding:t,border:o,width:l,height:i,top:n,left:r}){let f=l-o.left-o.right-t.left-t.right,a=i-t.top-t.bottom-o.top-o.bottom;return e.fillStyle=L.content,e.fillRect(r+o.left+t.left,n+o.top+t.top,f,a),[{type:"content",position:"center",text:`${b(f)} x ${b(a)}`}]}function mt(e){return t=>{if(e&&t){let o=ft(e),l=rt(t,o),i=at(t,o),n=st(t,o),r=ht(t,o),f=o.width<=B*3||o.height<=B;lt(t,o,[...r,...i,...n,...l],f)}}}function ut(e){U(mt(e))}var dt=(e,t)=>{let o=u.document.elementFromPoint(e,t),l=i=>{if(i&&i.shadowRoot){let n=i.shadowRoot.elementFromPoint(e,t);return i.isEqualNode(n)?i:n.shadowRoot?l(n):n}return i};return l(o)||o},O,v={x:0,y:0};function R(e,t){O=dt(e,t),ut(O)}var gt=(e,t)=>{let{measureEnabled:o}=t.globals;return T(()=>{let l=i=>{window.requestAnimationFrame(()=>{i.stopPropagation(),v.x=i.clientX,v.y=i.clientY})};return document.addEventListener("pointermove",l),()=>{document.removeEventListener("pointermove",l)}},[]),T(()=>{let l=n=>{window.requestAnimationFrame(()=>{n.stopPropagation(),R(n.clientX,n.clientY)})},i=()=>{window.requestAnimationFrame(()=>{V()})};return t.viewMode==="story"&&o&&(document.addEventListener("pointerover",l),G(),window.addEventListener("resize",i),R(v.x,v.y)),()=>{window.removeEventListener("resize",i),Z()}},[o,t.viewMode]),e()},ct=[gt],wt={[j]:!1};export{ct as decorators,wt as initialGlobals};

package/storybook-static/assets/preview-DJMlNTk8.js

@@ -0,0 +1,2 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./DocsRenderer-CFRXHY34-BaVEufDj.js","./iframe-CJEL_4Nu.js","./index-SnjB5uV8.js","./index-BcZLpTeD.js","./index-D-8MO0q_.js","./index-DrFu-skq.js"])))=>i.map(i=>d[i]);
+import{_ as a}from"./iframe-CJEL_4Nu.js";import"../sb-preview/runtime.js";var i=Object.entries(globalThis.TAGS_OPTIONS??{}).reduce((e,r)=>{let[t,o]=r;return o.excludeFromDocsStories&&(e[t]=!0),e},{}),d={docs:{renderer:async()=>{let{DocsRenderer:e}=await a(()=>import("./DocsRenderer-CFRXHY34-BaVEufDj.js"),__vite__mapDeps([0,1,2,3,4,5]),import.meta.url);return new e},stories:{filter:e=>(e.tags||[]).filter(r=>i[r]).length===0&&!e.parameters.docs?.disable}}};export{d as parameters};

package/storybook-static/assets/{set-url.test.stories-CuSuDLIx.js → set-url.test.stories-BBfLxv2u.js}

@@ -1,4 +1,4 @@
-import{w as u,u as s,e as n}from"./index-BSz1w4Gl.js";import"./custom-element-BDGsYgbP.js";import"./location-element-hKpcXCdn.js";const b={title:"",slice:"url-slice",href:"",live:"",body:""};function l(e){return new Promise(t=>setTimeout(t,e))}function y(e){const{title:t,body:i}={...b,...e};return`
+import{w as u,u as s,e as n}from"./index-CxRwF5Or.js";import"./custom-element-uuAtIYWS.js";import"./location-element-hKpcXCdn.js";const b={title:"",slice:"url-slice",href:"",live:"",body:""};function l(e){return new Promise(t=>setTimeout(t,e))}function y(e){const{title:t,body:i}={...b,...e};return`
         <fieldset>
             <legend>${t}</legend>
 

package/storybook-static/assets/{slice-events.test.stories-BkRKsKem.js → slice-events.test.stories-HcXF8XQI.js}

@@ -1,9 +1,9 @@
-import{w as d,e as c,u}from"./index-BSz1w4Gl.js";import"./custom-element-BDGsYgbP.js";function i(e){return new Promise(t=>setTimeout(t,e))}function h(e){const{title:t,body:a}=e;return`
+import{w as n,e as t,u as s}from"./index-CxRwF5Or.js";import"./custom-element-uuAtIYWS.js";function l(a){return new Promise(e=>setTimeout(e,a))}function B(a){const{title:e,body:c}=a;return`
         <fieldset>
-            <legend>${t}</legend>
-            ${a}
+            <legend>${e}</legend>
+            ${c}
         </fieldset>
-  `}const B={title:"slice-events",render:h},o={args:{title:"Slice initialization, change on event",body:`
+  `}const C={title:"slice-events",render:B},u={args:{title:"Slice initialization, change on event",body:`
     <p>initial value should be 0; + and - should change the number in input field</p>
     <custom-element>
             <template>
@@ -13,7 +13,7 @@ import{w as d,e as c,u}from"./index-BSz1w4Gl.js";import"./custom-element-BDGsYgb
                 <code data-testid="slice-value">{ //clickcount }</code>
             </template>
         </custom-element>
-`},play:async({canvasElement:e})=>{const t=o.args.title,a=d(e);await a.findByText(t);const n=await a.findByTestId("slice-value"),s=await e.querySelector('[type="number"]');await c(n).toBeInTheDocument(),c(n.textContent).to.equal("0","initial slot value 0"),c(s.value).to.equal("0","initial input value 0"),e.querySelector('[slice-value="//clickcount + 1"]').click(),await i(10),c(n.textContent).to.equal("1","increment to 1"),c(s.value).to.equal("1","increment input 1"),e.querySelector('[slice-value="//clickcount + 1"]').click(),await i(10),e.querySelector('[slice-value="//clickcount + 1"]').click(),await i(10),c(n.textContent).to.equal("3","double increment to 3"),c(s.value).to.equal("3","double increment input to 3"),e.querySelector('[slice-value="//clickcount - 1"]').click(),await i(10),c(n.textContent).to.equal("2","decrement to 2"),c(s.value).to.equal("2","decrement input to 2")}},l={args:{title:"Realtime Slice data on event",body:`
+`},play:async({canvasElement:a})=>{const e=u.args.title,c=n(a);await c.findByText(e);const i=await c.findByTestId("slice-value"),o=await a.querySelector('[type="number"]');await t(i).toBeInTheDocument(),t(i.textContent).to.equal("0","initial slot value 0"),t(o.value).to.equal("0","initial input value 0"),a.querySelector('[slice-value="//clickcount + 1"]').click(),await l(10),t(i.textContent).to.equal("1","increment to 1"),t(o.value).to.equal("1","increment input 1"),a.querySelector('[slice-value="//clickcount + 1"]').click(),await l(10),a.querySelector('[slice-value="//clickcount + 1"]').click(),await l(10),t(i.textContent).to.equal("3","double increment to 3"),t(o.value).to.equal("3","double increment input to 3"),a.querySelector('[slice-value="//clickcount - 1"]').click(),await l(10),t(i.textContent).to.equal("2","decrement to 2"),t(o.value).to.equal("2","decrement input to 2")}},p={args:{title:"Realtime Slice data on event",body:`
     <p>move the mouse over TEXTAREA and click to see slice and slice event changed</p>
     <custom-element>
         <template>
@@ -24,7 +24,7 @@ import{w as d,e as c,u}from"./index-BSz1w4Gl.js";import"./custom-element-BDGsYgb
             event type                  : <code data-testid="//slice/s/event/@type"     >{ //slice/s/event/@type    }</code>
         </template>
     </custom-element>
-`},play:async({canvasElement:e})=>{const t=l.args.title,a=d(e);await a.findByText(t);const n=()=>a.getByTestId("//slice/s").textContent,s=()=>a.getByTestId("//slice/s/event/@offsetY").textContent,y=()=>a.getByTestId("//slice/s/event/@type").textContent,b=await e.querySelector("textarea");c(n()).to.equal("","initial slot value blank"),c(s()).to.equal("","initial slot offsetY blank"),c(y()).to.equal("","initial slot event blank"),((v,f,x)=>{const w=new MouseEvent(x,{screenX:v,screenY:f,clientX:v,clientY:f,offsetX:v,offsetY:f});b.dispatchEvent(w)})(20,20,"click"),await i(10),c(n()).to.equal("x:20","click slot value 20"),c(Number(s())).to.be.lessThan(0,"offsetY click"),c(y()).to.equal("click","click event type")}},p={args:{title:'slice-event="change submit change submit" ',body:`
+`},play:async({canvasElement:a})=>{const e=p.args.title,c=n(a);await c.findByText(e);const i=()=>c.getByTestId("//slice/s").textContent,o=()=>c.getByTestId("//slice/s/event/@offsetY").textContent,w=()=>c.getByTestId("//slice/s/event/@type").textContent,k=await a.querySelector("textarea");t(i()).to.equal("","initial slot value blank"),t(o()).to.equal("","initial slot offsetY blank"),t(w()).to.equal("","initial slot event blank"),((h,x,T)=>{const g=new MouseEvent(T,{screenX:h,screenY:x,clientX:h,clientY:x,offsetX:h,offsetY:x});k.dispatchEvent(g)})(20,20,"click"),await l(10),t(i()).to.equal("x:20","click slot value 20"),t(Number(o())).to.be.lessThan(0,"offsetY click"),t(w()).to.equal("click","click event type")}},d={args:{title:'slice-event="change submit change submit" ',body:`
     <p> double same event should be treated as one.</p>
     <custom-element>
         <template>
@@ -35,7 +35,7 @@ import{w as d,e as c,u}from"./index-BSz1w4Gl.js";import"./custom-element-BDGsYgb
             </form>
         </template>
     </custom-element>
-`},play:async({canvasElement:e})=>{const t=d(e),a=await t.findByTestId("f1");a.focus(),await u.type(a,"AB"),t.getByRole("button").focus(),await u.clear(a),await u.click(t.getByRole("button")),c(await t.findByText("slices count 2")).toBeInTheDocument()}},r={args:{title:'slice="/datadom/attributes/emotion | s1" ',body:`
+`},play:async({canvasElement:a})=>{const e=n(a),c=await e.findByTestId("f1");c.focus(),await s.type(c,"AB"),e.getByRole("button").focus(),await s.clear(c),await s.click(e.getByRole("button")),t(await e.findByText("slices count 2")).toBeInTheDocument()}},r={args:{title:'slice="/datadom/attributes/emotion | s1" ',body:`
     <p> double same event should be treated as one.</p>
     <custom-element>
         <template>
@@ -48,7 +48,7 @@ import{w as d,e as c,u}from"./index-BSz1w4Gl.js";import"./custom-element-BDGsYgb
             slice <code>s2: {//slice/s2}</code><br/>
         </template>
     </custom-element>
-`},play:async({canvasElement:e})=>{const t=d(e),a=await t.findByTestId("f1");a.focus(),await u.type(a,"AB"),await c(await t.findByText("s1: AB")).toBeInTheDocument(),await c(await t.findByText("s2: AB")).toBeInTheDocument()}},m={args:{title:'slice="/datadom/attributes/emotion | s1" ',body:`
+`},play:async({canvasElement:a})=>{const e=n(a),c=await e.findByTestId("f1");c.focus(),await s.type(c,"AB"),await t(await e.findByText("s1: AB")).toBeInTheDocument(),await t(await e.findByText("s2: AB")).toBeInTheDocument()}},m={args:{title:'slice="/datadom/attributes/emotion | s1" ',body:`
     <p> double same event should be treated as one.</p>
     <custom-element>
         <template>
@@ -59,7 +59,40 @@ import{w as d,e as c,u}from"./index-BSz1w4Gl.js";import"./custom-element-BDGsYgb
             <p>slice: {//slice/s1}</p>
         </template>
     </custom-element>
-`},play:async({canvasElement:e})=>{const t=d(e),a=await t.findByTestId("f1");a.focus(),await u.type(a,"AB"),await c(await t.findByText("emotion attribute: AB")).toBeInTheDocument()}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
+`},play:async({canvasElement:a})=>{const e=n(a),c=await e.findByTestId("f1");c.focus(),await s.type(c,"AB"),await t(await e.findByText("emotion attribute: AB")).toBeInTheDocument()}},v={args:{title:"Checkbox value in slice ",body:`
+    <p> Checked value propagated into slice</p>
+    <custom-element>
+        <template>
+            <input type="checkbox"  slice="s1" value="V1" checked/>
+            <p>slice: {//s1}</p>
+        </template>
+    </custom-element>
+`},play:async({canvasElement:a})=>{const e=n(a);await t(await e.findByText("slice: V1")).toBeInTheDocument()}},y={args:{title:"UncheckedCheckbox value not in slice ",body:`
+    <p> Check to see the value propagated into slice. Uncheck to observe the empty string in the slice. </p>
+    <custom-element>
+        <template>
+            <input type="checkbox"  slice="s1" value="V1" data-testid="i1"/>
+            <p data-testid="t1">slice: {//s1}</p>
+        </template>
+    </custom-element>
+`},play:async({canvasElement:a})=>{const e=n(a),c=await e.findByTestId("t1");await t(c.textContent).toEqual("slice: ");const i=await e.findByTestId("i1");await s.click(i),await t(await e.findByText("slice: V1")).toBeInTheDocument(),await s.click(i),await t(c.textContent).toEqual("slice: ")}},b={args:{title:"UncheckedCheckbox slice-value not in slice ",body:`
+    <p> Check to see the value propagated into slice. Uncheck to observe the empty string in the slice. </p>
+    <custom-element>
+        <template>
+            <input type="checkbox"  slice="s1" slice-value="'V1'" data-testid="i1"/>
+            <p data-testid="t1">slice: {//s1}</p>
+        </template>
+    </custom-element>
+`},play:async({canvasElement:a})=>{const e=n(a),c=await e.findByTestId("t1");await t(c.textContent).toEqual("slice: ");const i=await e.findByTestId("i1");await s.click(i),await t(await e.findByText("slice: V1")).toBeInTheDocument(),await s.click(i),await t(c.textContent).toEqual("slice: ")}},f={args:{title:"Radiogroup value",body:`
+    <p> The value propagated into slice from the last checked radiobutton. </p>
+    <custom-element>
+        <template>
+            <p>V1: <input type="radio"  slice="s1" value="V1" data-testid="i1" name="group1"/></p>
+            <p>V2: <input type="radio"  slice="s1" value="V2" data-testid="i2" name="group1"/></p>
+            <p data-testid="t1">slice: {//s1}</p>
+        </template>
+    </custom-element>
+`},play:async({canvasElement:a})=>{const e=n(a);await s.click(await e.findByTestId("i1")),await t(await e.findByText("slice: V1")).toBeInTheDocument(),await s.click(await e.findByTestId("i2")),await t(await e.findByText("slice: V2")).toBeInTheDocument()}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
   args: {
     title: 'Slice initialization, change on event',
     body: \`
@@ -100,7 +133,7 @@ import{w as d,e as c,u}from"./index-BSz1w4Gl.js";import"./custom-element-BDGsYgb
     expect(code.textContent).to.equal('2', 'decrement to 2');
     expect(input.value).to.equal('2', 'decrement input to 2');
   }
-}`,...o.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+}`,...u.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
   args: {
     title: 'Realtime Slice data on event',
     body: \`
@@ -147,7 +180,7 @@ import{w as d,e as c,u}from"./index-BSz1w4Gl.js";import"./custom-element-BDGsYgb
     expect(Number(offsetY())).to.be.lessThan(0, 'offsetY click');
     expect(eventType()).to.equal('click', 'click event type');
   }
-}`,...l.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+}`,...p.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
   args: {
     title: 'slice-event="change submit change submit" ',
     body: \`
@@ -175,7 +208,7 @@ import{w as d,e as c,u}from"./index-BSz1w4Gl.js";import"./custom-element-BDGsYgb
     await userEvent.click(canvas.getByRole('button'));
     expect(await canvas.findByText('slices count 2')).toBeInTheDocument();
   }
-}`,...p.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
+}`,...d.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
   args: {
     title: 'slice="/datadom/attributes/emotion | s1" ',
     body: \`
@@ -228,4 +261,96 @@ import{w as d,e as c,u}from"./index-BSz1w4Gl.js";import"./custom-element-BDGsYgb
     await userEvent.type(input, 'AB');
     await expect(await canvas.findByText('emotion attribute: AB')).toBeInTheDocument();
   }
-}`,...m.parameters?.docs?.source}}};const q=["SliceInitChangeEvent","RealtimeEventInSlice","DoubleEventInSlice","MultipleSlices","SlicesInAttrAndName"];export{p as DoubleEventInSlice,r as MultipleSlices,l as RealtimeEventInSlice,o as SliceInitChangeEvent,m as SlicesInAttrAndName,q as __namedExportsOrder,B as default};
+}`,...m.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'Checkbox value in slice ',
+    body: \`
+    <p> Checked value propagated into slice</p>
+    <custom-element>
+        <template>
+            <input type="checkbox"  slice="s1" value="V1" checked/>
+            <p>slice: {//s1}</p>
+        </template>
+    </custom-element>
+\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    await expect(await canvas.findByText('slice: V1')).toBeInTheDocument();
+  }
+}`,...v.parameters?.docs?.source}}};y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'UncheckedCheckbox value not in slice ',
+    body: \`
+    <p> Check to see the value propagated into slice. Uncheck to observe the empty string in the slice. </p>
+    <custom-element>
+        <template>
+            <input type="checkbox"  slice="s1" value="V1" data-testid="i1"/>
+            <p data-testid="t1">slice: {//s1}</p>
+        </template>
+    </custom-element>
+\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    const p = await canvas.findByTestId('t1');
+    await expect(p.textContent).toEqual("slice: ");
+    const cb = await canvas.findByTestId('i1');
+    await userEvent.click(cb);
+    await expect(await canvas.findByText('slice: V1')).toBeInTheDocument();
+    await userEvent.click(cb);
+    await expect(p.textContent).toEqual('slice: ');
+  }
+}`,...y.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'UncheckedCheckbox slice-value not in slice ',
+    body: \`
+    <p> Check to see the value propagated into slice. Uncheck to observe the empty string in the slice. </p>
+    <custom-element>
+        <template>
+            <input type="checkbox"  slice="s1" slice-value="'V1'" data-testid="i1"/>
+            <p data-testid="t1">slice: {//s1}</p>
+        </template>
+    </custom-element>
+\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    const p = await canvas.findByTestId('t1');
+    await expect(p.textContent).toEqual("slice: ");
+    const cb = await canvas.findByTestId('i1');
+    await userEvent.click(cb);
+    await expect(await canvas.findByText('slice: V1')).toBeInTheDocument();
+    await userEvent.click(cb);
+    await expect(p.textContent).toEqual('slice: ');
+  }
+}`,...b.parameters?.docs?.source}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
+  args: {
+    title: 'Radiogroup value',
+    body: \`
+    <p> The value propagated into slice from the last checked radiobutton. </p>
+    <custom-element>
+        <template>
+            <p>V1: <input type="radio"  slice="s1" value="V1" data-testid="i1" name="group1"/></p>
+            <p>V2: <input type="radio"  slice="s1" value="V2" data-testid="i2" name="group1"/></p>
+            <p data-testid="t1">slice: {//s1}</p>
+        </template>
+    </custom-element>
+\`
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(await canvas.findByTestId('i1'));
+    await expect(await canvas.findByText('slice: V1')).toBeInTheDocument();
+    await userEvent.click(await canvas.findByTestId('i2'));
+    await expect(await canvas.findByText('slice: V2')).toBeInTheDocument();
+  }
+}`,...f.parameters?.docs?.source}}};const S=["SliceInitChangeEvent","RealtimeEventInSlice","DoubleEventInSlice","MultipleSlices","SlicesInAttrAndName","CheckboxChecked","CheckboxUnchecked","CheckboxSliceValue","RadiogroupSliceValue"];export{v as CheckboxChecked,b as CheckboxSliceValue,y as CheckboxUnchecked,d as DoubleEventInSlice,r as MultipleSlices,f as RadiogroupSliceValue,p as RealtimeEventInSlice,u as SliceInitChangeEvent,m as SlicesInAttrAndName,S as __namedExportsOrder,C as default};

package/storybook-static/assets/{slots.test.stories-BJCUWFkE.js → slots.test.stories-i6mnIFM2.js}

@@ -1,4 +1,4 @@
-import{w as o,e as l}from"./index-BSz1w4Gl.js";import"./custom-element-BDGsYgbP.js";function y(t){const{title:a,tag:n,attributes:e,slot:s,payload:g}=t;return`
+import{w as o,e as l}from"./index-CxRwF5Or.js";import"./custom-element-uuAtIYWS.js";function y(t){const{title:a,tag:n,attributes:e,slot:s,payload:g}=t;return`
         <fieldset>
             <legend>${a}</legend>
             <custom-element

package/storybook-static/assets/tiny-invariant-CopsF_GD.js

@@ -0,0 +1 @@
+var a="Invariant failed";function n(r,i){if(!r)throw new Error(a)}export{n as i};

package/storybook-static/assets/{version-select.test.stories-B3ybJn_Z.js → version-select.test.stories-BsUFH6Va.js}

@@ -1,4 +1,4 @@
-import{w as r}from"./index-BSz1w4Gl.js";import"./custom-element-BDGsYgbP.js";import"./http-request-DNq59pnj.js";import"./location-element-hKpcXCdn.js";function o(e){return new Promise(s=>setTimeout(s,e))}function n(e){const{title:s,body:i}=e;return`
+import{w as r}from"./index-CxRwF5Or.js";import"./custom-element-uuAtIYWS.js";import"./http-request-DNq59pnj.js";import"./location-element-hKpcXCdn.js";function o(e){return new Promise(s=>setTimeout(s,e))}function n(e){const{title:s,body:i}=e;return`
         <fieldset>
             <legend>${s}</legend>
             ${i}

package/storybook-static/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/storybook-static/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/storybook-static/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/storybook-static/demo/external-template.html

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