@axel669/windstorm 0.5.5 → 0.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1 @@
1
+ var ws=function(r){"use strict";const t=Symbol("no match"),e=(r,e)=>{const o=e=>{const o=e.length;return()=>e===r.substr(R,o)?(R+=o,e):t},a=e=>()=>{const o=r.charAt(R);return!1!==e.test(o)?(R+=1,o):t};let n=null;const l=o("@"),i=o(":"),s=a(/[^;]/),g=o(";"),u=o("*"),c=a(/[a-z0-9_\-]/i),d=o("!"),f=a(/[^{]/),b=o("{"),p=o("}"),m=a(/[a-zA-Z0-9\.\-_#\^\$\/]/),h=o("#"),w=a(/[^;#]/),x=a(/[\s]/m),y=()=>{const r=R;let e=null,o=null;return(e=q())===t||(o=z())===t?(R=r,t):[e,o]},v=()=>{const e=R;let o=null,a=null;return(o=h())===t||(a=(()=>{const e=R,o=R;for(;w()!==t;);return R-o==0?t:r.slice(e,R)})())===t?(R=e,t):[o,a]},$=()=>{n="rules";let r=R,e=null;const o=[];let a=null;for(;(a=y())!==t;)o.push(a);if(e=o,q()===t)return R=r,t;return e.map((r=>r[1]))},z=()=>{let r=null;return(r=k())!==t||(r=j())!==t||(r=A())!==t||(r=S())!==t?r:t},k=()=>{n="rule$0";let r=R,e=null;if((e=E())===t)return R=r,t;return e},j=()=>{n="rule$1";let r=R,e=null;if((e=N())===t)return R=r,t;return e},A=()=>{n="rule$2";let r=R,e=null;if((e=M())===t)return R=r,t;return e},S=()=>{n="rule$3";let r=R,e=null;if((e=V())===t)return R=r,t;return e},E=()=>{n="variable";let e=R,o=null,a=null;if(l()===t)return R=e,t;if((o=O())===t)return R=e,t;if(i()===t)return R=e,t;if(q()===t)return R=e,t;if((a=(()=>{const e=R,o=R;for(;s()!==t;);return R-o==0?t:r.slice(e,R)})())===t)return R=e,t;if(g()===t)return R=e,t;return((r,t)=>({type:"var",name:r,value:t}))(o,a)},N=()=>{n="css";let e=R,o=null,a=null;if(u()===t)return R=e,t;if((o=O())===t)return R=e,t;if(i()===t)return R=e,t;if(q()===t)return R=e,t;if((a=(()=>{const e=R,o=R;for(;s()!==t;);return R-o==0?t:r.slice(e,R)})())===t)return R=e,t;if(g()===t)return R=e,t;return((r,t)=>({type:"css",name:r,value:t}))(o,a)},O=()=>{n="cssName";let e=R,o=null;if((o=(()=>{const e=R,o=R;for(;c()!==t;);return R-o==0?t:r.slice(e,R)})())===t)return R=e,t;return o},M=()=>{n="subrule";let e=R,o=null,a=null;if(d()===t)return R=e,t;if(q()===t)return R=e,t;if((o=(()=>{const e=R,o=R;for(;f()!==t;);return R-o==0?t:r.slice(e,R)})())===t)return R=e,t;if(b()===t)return R=e,t;if((a=$())===t)return R=e,t;if(p()===t)return R=e,t;var l;return l=a,{type:"alt",selector:o.trim(),rules:l}},V=()=>{n="macro";let e=R,o=null,a=null;if((o=(()=>{const e=R,o=R;for(;m()!==t;);return R-o==0?t:r.slice(e,R)})())===t)return R=e,t;const l=(()=>{const r=R;let e=null,o=null,a=null;return(e=i())===t||(o=q())===t||(a=F())===t?(R=r,t):[e,o,a]})();if(a=l===t?null:l,g()===t)return R=e,t;return((r,t)=>({type:"macro",name:r,value:t?.[2]}))(o,a)},F=()=>{let r=null;return(r=L())!==t||(r=_())!==t?r:t},L=()=>{n="macroValue$0";let r=null;const e=[];let o=null;for(;(o=v())!==t;)e.push(o);if(0===e.length)return t;r=e;return(r=>{const t=r.map((r=>r[1].trim()));return t.arg=t.join(" "),t})(r)},_=()=>{n="macroValue$1";let e=R,o=null;if((o=(()=>{const e=R,o=R;for(;s()!==t;);return R-o==0?t:r.slice(e,R)})())===t)return R=e,t;return(r=>{const t=[r.trim()];return t.arg=r,t})(o)},q=()=>{for(n="_";x()!==t;);};let R=0;const C=(()=>{n="$";let r=R,e=null;if((e=$())===t)return R=r,t;return e})();return R!==r.length?(console.log("last",n),console.log("@",R),console.log(r.slice(R-10,R+10)),new Error("End of input not found")):C},o=document.createElement("style");o.setAttribute("data-name","windstorm-generated"),o.innerHTML="@layer ws.custom ws.macro ws.user;",document.head.append(o);const a=(r,...t)=>{const o=String.raw(r,...t);return n(e(o),{"&":[]},"&")},n=(r,t,e)=>{for(const o of r)i(o,t,e);return t},l=r=>r.replace(/@([a-zA-Z0-9\-_]+)/g,((r,t)=>`var(--${t})`)),i=(r,t,e)=>{if("var"===r.type)return void t[e].push(`--${r.name}: ${l(r.value)};`);if("css"===r.type)return void t[e].push(`${r.name}: ${l(r.value)};`);if("macro"===r.type){const o=s[r.name];if(void 0===o)return void console.warn(`no macro for "${r.name}"`);for(const[a,n]of Object.entries(o)){const o=a.replace("&",e);t[o]=t[o]??[],t[o].push(...n.map((t=>l(t.replace(/%(arg|\d+)/g,((t,e)=>r.value?.[e]??""))))))}return}const o=r.selector.replaceAll("&",e);t[o]=[...t[o]??[]],n(r.rules,t,o)},s={},g=r=>(t,...e)=>s[r]=a(t,...e),u=r=>Object.entries(r).reduce(((r,[t,e])=>{if(!0===t.startsWith("|")){const o=t.lastIndexOf("|"),a=[`@media (${t.slice(1,o)}) {`,`${`&${t.slice(o+1)}`} {`,...e,"}","}"].join("\n");return r.push(a),r}return r.push(`${t} {\n${e.join("\n")}\n}`),r}),[]);const c={attr:"ws-x",origin:"https://wind-cdn.axel669.net",...window.wsConfig,version:"0.6.1",fontVersion:"2",iconVersion:"3.34.0"},d={},f=async(r,t)=>{const e=d[t],o=`ws-icon-${t}`;if(void 0!==e){if(await e.loaded,"loaded"!==e.status||null===r)return;return void r.style.setProperty("--icon-font",o)}const a=new FontFace(o,`url(${c.origin}/icon/${t}.woff?v${c.iconVersion})`);d[t]=a;try{await a.load()}catch(r){console.error(r)}document.fonts.add(a),f(r,t)},b=r=>{if(void 0===r.tagName)return;const t=r.dataset.icon??null;null!==t&&f(r,t)},p={childList(r){0!==r.addedNodes.length&&r.addedNodes.forEach((r=>{if(void 0===r.tagName)return;[r,...r.querySelectorAll("*")].forEach(b)}))},attributes(r){b(r.target)}};new MutationObserver((r=>r.forEach((r=>p[r.type](r))))).observe(document.body,{subtree:!0,attributes:!0,childList:!0,attributeFilter:["data-icon"]});g("appr")`*apperance: %arg; *-webkit-appearance: %arg;`,g("area")`*grid-area: %arg;`,g("b")`*border: %arg;`,g("b.b")`*border-bottom: %arg;`,g("b.b.c")`*border-bottom-color: %arg;`,g("b.b.s")`*border-bottom-style: %arg;`,g("b.b.w")`*border-bottom-width: %arg;`,g("b.c")`*border-color: %arg;`,g("b.l")`*border-left: %arg;`,g("b.l.c")`*border-left-color: %arg;`,g("b.l.s")`*border-left-style: %arg;`,g("b.l.w")`*border-left-width: %arg;`,g("b.r")`*border-right: %arg;`,g("b.r.c")`*border-right-color: %arg;`,g("b.r.s")`*border-right-style: %arg;`,g("b.r.w")`*border-right-width: %arg;`,g("b.s")`*border-style: %arg;`,g("b.t")`*border-top: %arg;`,g("b.t.c")`*border-top-color: %arg;`,g("b.t.s")`*border-top-style: %arg;`,g("b.t.w")`*border-top-width: %arg;`,g("b.w")`*border-width: %arg;`,g("b.x")`*border-left: %arg; *border-right: %arg;`,g("b.x.c")`*border-left-color: %arg; *border-right-color: %arg;`,g("b.x.s")`*border-left-style: %arg; *border-right-style: %arg;`,g("b.x.w")`*border-left-width: %arg; *border-right-width: %arg;`,g("b.y")`*border-top: %arg; *border-bottom: %arg;`,g("b.y.c")`*border-top-color: %arg; *border-bottom-color: %arg;`,g("b.y.s")`*border-top-style: %arg; *border-bottom-style: %arg;`,g("b.y.w")`*border-top-width: %arg; *border-bottom-width: %arg;`,g("bg")`*background: %arg;`,g("bg.att")`*background-attachment: %arg;`,g("bg.c")`*background-color: %arg;`,g("bg.img")`*background-image: %arg;`,g("bg.pos")`*background-position: %arg;`,g("bg.rep")`*background-repeat: %arg;`,g("bg.sz")`*background-size: %arg;`,g("c")`*color: %arg;`,g("col")`*grid-column: %arg;`,g("cur")`*cursor: %arg;`,g("disp")`*display: %arg;`,g("fl.basis")`*flex-basis: %arg;`,g("fl.cross")`*align-items: %arg;`,g("fl.dir")`*flex-direction: %arg;`,g("fl.flow")`*flex-flow: %arg;`,g("fl.grow")`*flex-grow: %arg;`,g("fl.main")`*justify-content: %arg;`,g("fl.shrink")`*flex-shrink: %arg;`,g("fl.size")`*flex: %arg;`,g("fl.wr")`*flex-wrap: %arg;`,g("font")`*font-family: %arg;`,g("gap")`*gap: %arg;`,g("gap.col")`*column-gap: %arg;`,g("gap.row")`*row-gap: %arg;`,g("gr.areas")`*grid-template-areas: %arg;`,g("gr.cols")`*grid-template-columns: %arg;`,g("gr.cols.a")`*grid-auto-columns: %arg;`,g("gr.flow")`*grid-auto-flow: %arg;`,g("gr.rows")`*grid-template-rows: %arg;`,g("gr.rows.a")`*grid-auto-rows: %arg;`,g("h")`*height: %arg;`,g("h.max")`*max-height: %arg;`,g("h.min")`*min-height: %arg;`,g("inset")`*top: %arg; *left: %arg; *bottom: %arg; *right: %arg;`,g("inset.x")`*left: %arg; *right: %arg;`,g("inset.y")`*top: %arg; *bottom: %arg;`,g("m")`*margin: %arg;`,g("m.b")`*margin-bottom: %arg;`,g("m.l")`*margin-left: %arg;`,g("m.r")`*margin-right: %arg;`,g("m.t")`*margin-top: %arg;`,g("m.x")`*margin-left: %arg; *margin-right: %arg;`,g("m.y")`*margin-bottom: %arg; *margin-top: %arg;`,g("o")`*opacity: %arg;`,g("outln")`*outline: %arg;`,g("over")`*overflow: %arg;`,g("over.x")`*overflow-x: %arg;`,g("over.y")`*overflow-y: %arg;`,g("p")`*padding: %arg;`,g("p.b")`*padding-bottom: %arg;`,g("p.l")`*padding-left: %arg;`,g("p.r")`*padding-right: %arg;`,g("p.t")`*padding-top: %arg;`,g("p.x")`*padding-left: %arg; *padding-right: %arg;`,g("p.y")`*padding-top: %arg; *padding-bottom: %arg;`,g("pos")`*position: %arg;`,g("pos.abs")`*position: absolute;`,g("pos.fix")`*position: fixed;`,g("pos.rel")`*position: relative;`,g("pos.stick")`*position: sticky;`,g("r")`*border-radius: %arg;`,g("r.b")`*border-bottom-left-radius: %arg; *border-bottom-right-radius: %arg;`,g("r.bl")`*border-bottom-left-radius: %arg;`,g("r.br")`*border-bottom-right-radius: %arg;`,g("r.l")`*border-top-left-radius: %arg; *border-bottom-left-radius: %arg;`,g("r.r")`*border-top-right-radius: %arg; *border-bottom-right-radius: %arg;`,g("r.t")`*border-top-left-radius: %arg; *border-top-right-radius: %arg;`,g("r.tl")`*border-top-left-radius: %arg;`,g("r.tr")`*border-top-right-radius: %arg;`,g("row")`*grid-row: %arg;`,g("sel")`*user-select: %arg;`,g("self.cross")`*align-self: %arg;`,g("self.main")`*justify-self: %arg;`,g("sh.box")`*box-shadow: %arg;`,g("sh.text")`*text-shadow: %arg;`,g("t.a")`*text-align: %arg;`,g("t.br")`*word-break: %arg;`,g("t.c")`*color: %arg;`,g("t.deco")`*text-decoration: %arg;`,g("t.lh")`*line-height: %arg;`,g("t.over")`*text-overflow: %arg;`,g("t.st")`*font-style: %arg;`,g("t.sz")`*font-size: %arg;`,g("t.tf")`*text-transform: %arg;`,g("t.var")`*font-variant: %arg;`,g("t.wrap")`*word-wrap: %arg;`,g("t.ws")`*white-space: %arg;`,g("t.wt")`*font-weight: %arg;`,g("tf")`*transform: %arg;`,g("tf.o")`*transform-origin: %arg;`,g("tf.p")`*perspective: %arg;`,g("tr")`*transition: %arg;`,g("v.a")`*vertical-align: %arg;`,g("vis")`*visibility: %arg;`,g("w")`*width: %arg;`,g("w.max")`*max-width: %arg;`,g("w.min")`*min-width: %arg;`,g("x")`*left: %arg;`,g("-x")`*right: %arg;`,g("y")`*top: %arg;`,g("-y")`*bottom: %arg;`,g("z")`*z-index: %arg;`,g("fl.cn")`fl.cross: center; fl.main: center;`,g("fl.cn.cross")`fl.cross: center;`,g("fl.cn.main")`fl.main: center;`,g("flex")`disp: flex; fl.dir: %arg;`,g("grid")`disp: grid; gr.flow: %arg;`,g("hide")`disp: none;`,g("invis")`vis: hidden;`,g("sticky")`pos: sticky; y: 0px; z: +1;`,g("adorn")`disp: flex; fl.cn; p: 4px;`,g("pad.compact")`p: 0px 4px;`,g("variant.outline")`b.w: 1px;`,g("variant.fill")`@text-color: @alt-color; @fill-color: @core-color; @active: @alt-color;`,g("variant.lined")`b.w: 0px; b.b.w: @border-size; r.b: 0px;`,g("gr.cols-fit")`*grid-template-columns: repeat(auto-fit, minmax(%arg));`,g("gr.cols-fill")`*grid-template-columns: repeat(auto-fill, minmax(%arg));`,g("text.subtitle")`t.sz: @text-size-subtitle; flex; fl.main: center; p: 0px 8px;`,g("text.title")`t.sz: @text-size-title; flex; fl.main: center; p: 4px 8px;`,g("elevate")`sh.box: 0px 2px 3px @shadow-color;`;const m=r=>{let t=5381;for(let e=0;e<r.length;e+=1)t=33*t^r.charCodeAt(e);return t.toString(36)},h={},w=r=>Object.entries(r).reduce(((r,t)=>{const[e,o]=t;return null==o||!1===o?r:!0===o?(r.push(`${e};`),r):"object"==typeof o?(r.push(`${e} { ${w(o)} }`),r):(r.push(`${e}: ${o};`),r)}),[]).join(" "),x=c.version,y=r=>{const t=(r=>{if(""===r||null===r)return;const t=u(a({raw:[r]})),e=m(t.join("\n"));if(h[e]=(h[e]??0)+1,h[e]>1)return e;const n=t.map((r=>r.replaceAll("&",`[data-wsid="${e}"]`)));return o.sheet.insertRule(`@layer ws.macro { ${n.join("\n")} }`,o.sheet.cssRules.length),e})(r.dataset?.ws??"");void 0!==t?r.dataset.wsid=t:delete r.dataset?.wsid};new MutationObserver((r=>{const t=new Set(Array.from(r,(r=>[r.target,...Array.from(r.addedNodes,(r=>[r,...r.querySelectorAll?.("*")||[]]))])).flat(3));for(const r of t)y(r)})).observe(document.body,{subtree:!0,attributes:!0,childList:!0,attributeFilter:["data-ws"]});for(const r of document.querySelectorAll("*"))y(r);return r.component=(r,t="ws.custom")=>(e,...n)=>{const l=a(e,...n),i=u(l).map((t=>t.replaceAll("&",r))),s=`@layer ${t} { ${i.join("\n")} }`;o.sheet.insertRule(s)},r.localMacro=(r,...t)=>{const e=m(`${Date.now()}:${Math.random().toString(16)}`);return g(e)(r,...t)},r.macro=g,r.preloadIcons=(...r)=>{for(const t of r)f(null,t)},r.version=x,r.x=w,r}({});
@@ -0,0 +1 @@
1
+ const r=Symbol("no match"),t=(t,e)=>{const o=e=>{const o=e.length;return()=>e===t.substr(R,o)?(R+=o,e):r},a=e=>()=>{const o=t.charAt(R);return!1!==e.test(o)?(R+=1,o):r};let n=null;const l=o("@"),i=o(":"),s=a(/[^;]/),g=o(";"),u=o("*"),c=a(/[a-z0-9_\-]/i),d=o("!"),f=a(/[^{]/),b=o("{"),p=o("}"),m=a(/[a-zA-Z0-9\.\-_#\^\$\/]/),h=o("#"),w=a(/[^;#]/),x=a(/[\s]/m),y=()=>{const t=R;let e=null,o=null;return(e=q())===r||(o=z())===r?(R=t,r):[e,o]},v=()=>{const e=R;let o=null,a=null;return(o=h())===r||(a=(()=>{const e=R,o=R;for(;w()!==r;);return R-o==0?r:t.slice(e,R)})())===r?(R=e,r):[o,a]},$=()=>{n="rules";let t=R,e=null;const o=[];let a=null;for(;(a=y())!==r;)o.push(a);if(e=o,q()===r)return R=t,r;return e.map((r=>r[1]))},z=()=>{let t=null;return(t=k())!==r||(t=j())!==r||(t=A())!==r||(t=S())!==r?t:r},k=()=>{n="rule$0";let t=R,e=null;if((e=E())===r)return R=t,r;return e},j=()=>{n="rule$1";let t=R,e=null;if((e=N())===r)return R=t,r;return e},A=()=>{n="rule$2";let t=R,e=null;if((e=V())===r)return R=t,r;return e},S=()=>{n="rule$3";let t=R,e=null;if((e=F())===r)return R=t,r;return e},E=()=>{n="variable";let e=R,o=null,a=null;if(l()===r)return R=e,r;if((o=O())===r)return R=e,r;if(i()===r)return R=e,r;if(q()===r)return R=e,r;if((a=(()=>{const e=R,o=R;for(;s()!==r;);return R-o==0?r:t.slice(e,R)})())===r)return R=e,r;if(g()===r)return R=e,r;return((r,t)=>({type:"var",name:r,value:t}))(o,a)},N=()=>{n="css";let e=R,o=null,a=null;if(u()===r)return R=e,r;if((o=O())===r)return R=e,r;if(i()===r)return R=e,r;if(q()===r)return R=e,r;if((a=(()=>{const e=R,o=R;for(;s()!==r;);return R-o==0?r:t.slice(e,R)})())===r)return R=e,r;if(g()===r)return R=e,r;return((r,t)=>({type:"css",name:r,value:t}))(o,a)},O=()=>{n="cssName";let e=R,o=null;if((o=(()=>{const e=R,o=R;for(;c()!==r;);return R-o==0?r:t.slice(e,R)})())===r)return R=e,r;return o},V=()=>{n="subrule";let e=R,o=null,a=null;if(d()===r)return R=e,r;if(q()===r)return R=e,r;if((o=(()=>{const e=R,o=R;for(;f()!==r;);return R-o==0?r:t.slice(e,R)})())===r)return R=e,r;if(b()===r)return R=e,r;if((a=$())===r)return R=e,r;if(p()===r)return R=e,r;var l;return l=a,{type:"alt",selector:o.trim(),rules:l}},F=()=>{n="macro";let e=R,o=null,a=null;if((o=(()=>{const e=R,o=R;for(;m()!==r;);return R-o==0?r:t.slice(e,R)})())===r)return R=e,r;const l=(()=>{const t=R;let e=null,o=null,a=null;return(e=i())===r||(o=q())===r||(a=L())===r?(R=t,r):[e,o,a]})();if(a=l===r?null:l,g()===r)return R=e,r;return((r,t)=>({type:"macro",name:r,value:t?.[2]}))(o,a)},L=()=>{let t=null;return(t=M())!==r||(t=_())!==r?t:r},M=()=>{n="macroValue$0";let t=null;const e=[];let o=null;for(;(o=v())!==r;)e.push(o);if(0===e.length)return r;t=e;return(r=>{const t=r.map((r=>r[1].trim()));return t.arg=t.join(" "),t})(t)},_=()=>{n="macroValue$1";let e=R,o=null;if((o=(()=>{const e=R,o=R;for(;s()!==r;);return R-o==0?r:t.slice(e,R)})())===r)return R=e,r;return(r=>{const t=[r.trim()];return t.arg=r,t})(o)},q=()=>{for(n="_";x()!==r;);};let R=0;const C=(()=>{n="$";let t=R,e=null;if((e=$())===r)return R=t,r;return e})();return R!==t.length?(console.log("last",n),console.log("@",R),console.log(t.slice(R-10,R+10)),new Error("End of input not found")):C},e=document.createElement("style");e.setAttribute("data-name","windstorm-generated"),e.innerHTML="@layer ws.custom ws.macro ws.user;",document.head.append(e);const o=(r,...e)=>{const o=String.raw(r,...e);return a(t(o),{"&":[]},"&")},a=(r,t,e)=>{for(const o of r)l(o,t,e);return t},n=r=>r.replace(/@([a-zA-Z0-9\-_]+)/g,((r,t)=>`var(--${t})`)),l=(r,t,e)=>{if("var"===r.type)return void t[e].push(`--${r.name}: ${n(r.value)};`);if("css"===r.type)return void t[e].push(`${r.name}: ${n(r.value)};`);if("macro"===r.type){const o=i[r.name];if(void 0===o)return void console.warn(`no macro for "${r.name}"`);for(const[a,l]of Object.entries(o)){const o=a.replace("&",e);t[o]=t[o]??[],t[o].push(...l.map((t=>n(t.replace(/%(arg|\d+)/g,((t,e)=>r.value?.[e]??""))))))}return}const o=r.selector.replaceAll("&",e);t[o]=[...t[o]??[]],a(r.rules,t,o)},i={},s=r=>(t,...e)=>i[r]=o(t,...e),g=r=>Object.entries(r).reduce(((r,[t,e])=>{if(!0===t.startsWith("|")){const o=t.lastIndexOf("|"),a=[`@media (${t.slice(1,o)}) {`,`${`&${t.slice(o+1)}`} {`,...e,"}","}"].join("\n");return r.push(a),r}return r.push(`${t} {\n${e.join("\n")}\n}`),r}),[]),u=(r,t="ws.custom")=>(a,...n)=>{const l=o(a,...n),i=g(l).map((t=>t.replaceAll("&",r))),s=`@layer ${t} { ${i.join("\n")} }`;e.sheet.insertRule(s)};const c={attr:"ws-x",origin:"https://wind-cdn.axel669.net",...window.wsConfig,version:"0.6.1",fontVersion:"2",iconVersion:"3.34.0"},d={},f=async(r,t)=>{const e=d[t],o=`ws-icon-${t}`;if(void 0!==e){if(await e.loaded,"loaded"!==e.status||null===r)return;return void r.style.setProperty("--icon-font",o)}const a=new FontFace(o,`url(${c.origin}/icon/${t}.woff?v${c.iconVersion})`);d[t]=a;try{await a.load()}catch(r){console.error(r)}document.fonts.add(a),f(r,t)},b=r=>{if(void 0===r.tagName)return;const t=r.dataset.icon??null;null!==t&&f(r,t)},p={childList(r){0!==r.addedNodes.length&&r.addedNodes.forEach((r=>{if(void 0===r.tagName)return;[r,...r.querySelectorAll("*")].forEach(b)}))},attributes(r){b(r.target)}};new MutationObserver((r=>r.forEach((r=>p[r.type](r))))).observe(document.body,{subtree:!0,attributes:!0,childList:!0,attributeFilter:["data-icon"]});const m=(...r)=>{for(const t of r)f(null,t)};s("appr")`*apperance: %arg; *-webkit-appearance: %arg;`,s("area")`*grid-area: %arg;`,s("b")`*border: %arg;`,s("b.b")`*border-bottom: %arg;`,s("b.b.c")`*border-bottom-color: %arg;`,s("b.b.s")`*border-bottom-style: %arg;`,s("b.b.w")`*border-bottom-width: %arg;`,s("b.c")`*border-color: %arg;`,s("b.l")`*border-left: %arg;`,s("b.l.c")`*border-left-color: %arg;`,s("b.l.s")`*border-left-style: %arg;`,s("b.l.w")`*border-left-width: %arg;`,s("b.r")`*border-right: %arg;`,s("b.r.c")`*border-right-color: %arg;`,s("b.r.s")`*border-right-style: %arg;`,s("b.r.w")`*border-right-width: %arg;`,s("b.s")`*border-style: %arg;`,s("b.t")`*border-top: %arg;`,s("b.t.c")`*border-top-color: %arg;`,s("b.t.s")`*border-top-style: %arg;`,s("b.t.w")`*border-top-width: %arg;`,s("b.w")`*border-width: %arg;`,s("b.x")`*border-left: %arg; *border-right: %arg;`,s("b.x.c")`*border-left-color: %arg; *border-right-color: %arg;`,s("b.x.s")`*border-left-style: %arg; *border-right-style: %arg;`,s("b.x.w")`*border-left-width: %arg; *border-right-width: %arg;`,s("b.y")`*border-top: %arg; *border-bottom: %arg;`,s("b.y.c")`*border-top-color: %arg; *border-bottom-color: %arg;`,s("b.y.s")`*border-top-style: %arg; *border-bottom-style: %arg;`,s("b.y.w")`*border-top-width: %arg; *border-bottom-width: %arg;`,s("bg")`*background: %arg;`,s("bg.att")`*background-attachment: %arg;`,s("bg.c")`*background-color: %arg;`,s("bg.img")`*background-image: %arg;`,s("bg.pos")`*background-position: %arg;`,s("bg.rep")`*background-repeat: %arg;`,s("bg.sz")`*background-size: %arg;`,s("c")`*color: %arg;`,s("col")`*grid-column: %arg;`,s("cur")`*cursor: %arg;`,s("disp")`*display: %arg;`,s("fl.basis")`*flex-basis: %arg;`,s("fl.cross")`*align-items: %arg;`,s("fl.dir")`*flex-direction: %arg;`,s("fl.flow")`*flex-flow: %arg;`,s("fl.grow")`*flex-grow: %arg;`,s("fl.main")`*justify-content: %arg;`,s("fl.shrink")`*flex-shrink: %arg;`,s("fl.size")`*flex: %arg;`,s("fl.wr")`*flex-wrap: %arg;`,s("font")`*font-family: %arg;`,s("gap")`*gap: %arg;`,s("gap.col")`*column-gap: %arg;`,s("gap.row")`*row-gap: %arg;`,s("gr.areas")`*grid-template-areas: %arg;`,s("gr.cols")`*grid-template-columns: %arg;`,s("gr.cols.a")`*grid-auto-columns: %arg;`,s("gr.flow")`*grid-auto-flow: %arg;`,s("gr.rows")`*grid-template-rows: %arg;`,s("gr.rows.a")`*grid-auto-rows: %arg;`,s("h")`*height: %arg;`,s("h.max")`*max-height: %arg;`,s("h.min")`*min-height: %arg;`,s("inset")`*top: %arg; *left: %arg; *bottom: %arg; *right: %arg;`,s("inset.x")`*left: %arg; *right: %arg;`,s("inset.y")`*top: %arg; *bottom: %arg;`,s("m")`*margin: %arg;`,s("m.b")`*margin-bottom: %arg;`,s("m.l")`*margin-left: %arg;`,s("m.r")`*margin-right: %arg;`,s("m.t")`*margin-top: %arg;`,s("m.x")`*margin-left: %arg; *margin-right: %arg;`,s("m.y")`*margin-bottom: %arg; *margin-top: %arg;`,s("o")`*opacity: %arg;`,s("outln")`*outline: %arg;`,s("over")`*overflow: %arg;`,s("over.x")`*overflow-x: %arg;`,s("over.y")`*overflow-y: %arg;`,s("p")`*padding: %arg;`,s("p.b")`*padding-bottom: %arg;`,s("p.l")`*padding-left: %arg;`,s("p.r")`*padding-right: %arg;`,s("p.t")`*padding-top: %arg;`,s("p.x")`*padding-left: %arg; *padding-right: %arg;`,s("p.y")`*padding-top: %arg; *padding-bottom: %arg;`,s("pos")`*position: %arg;`,s("pos.abs")`*position: absolute;`,s("pos.fix")`*position: fixed;`,s("pos.rel")`*position: relative;`,s("pos.stick")`*position: sticky;`,s("r")`*border-radius: %arg;`,s("r.b")`*border-bottom-left-radius: %arg; *border-bottom-right-radius: %arg;`,s("r.bl")`*border-bottom-left-radius: %arg;`,s("r.br")`*border-bottom-right-radius: %arg;`,s("r.l")`*border-top-left-radius: %arg; *border-bottom-left-radius: %arg;`,s("r.r")`*border-top-right-radius: %arg; *border-bottom-right-radius: %arg;`,s("r.t")`*border-top-left-radius: %arg; *border-top-right-radius: %arg;`,s("r.tl")`*border-top-left-radius: %arg;`,s("r.tr")`*border-top-right-radius: %arg;`,s("row")`*grid-row: %arg;`,s("sel")`*user-select: %arg;`,s("self.cross")`*align-self: %arg;`,s("self.main")`*justify-self: %arg;`,s("sh.box")`*box-shadow: %arg;`,s("sh.text")`*text-shadow: %arg;`,s("t.a")`*text-align: %arg;`,s("t.br")`*word-break: %arg;`,s("t.c")`*color: %arg;`,s("t.deco")`*text-decoration: %arg;`,s("t.lh")`*line-height: %arg;`,s("t.over")`*text-overflow: %arg;`,s("t.st")`*font-style: %arg;`,s("t.sz")`*font-size: %arg;`,s("t.tf")`*text-transform: %arg;`,s("t.var")`*font-variant: %arg;`,s("t.wrap")`*word-wrap: %arg;`,s("t.ws")`*white-space: %arg;`,s("t.wt")`*font-weight: %arg;`,s("tf")`*transform: %arg;`,s("tf.o")`*transform-origin: %arg;`,s("tf.p")`*perspective: %arg;`,s("tr")`*transition: %arg;`,s("v.a")`*vertical-align: %arg;`,s("vis")`*visibility: %arg;`,s("w")`*width: %arg;`,s("w.max")`*max-width: %arg;`,s("w.min")`*min-width: %arg;`,s("x")`*left: %arg;`,s("-x")`*right: %arg;`,s("y")`*top: %arg;`,s("-y")`*bottom: %arg;`,s("z")`*z-index: %arg;`,s("fl.cn")`fl.cross: center; fl.main: center;`,s("fl.cn.cross")`fl.cross: center;`,s("fl.cn.main")`fl.main: center;`,s("flex")`disp: flex; fl.dir: %arg;`,s("grid")`disp: grid; gr.flow: %arg;`,s("hide")`disp: none;`,s("invis")`vis: hidden;`,s("sticky")`pos: sticky; y: 0px; z: +1;`,s("adorn")`disp: flex; fl.cn; p: 4px;`,s("pad.compact")`p: 0px 4px;`,s("variant.outline")`b.w: 1px;`,s("variant.fill")`@text-color: @alt-color; @fill-color: @core-color; @active: @alt-color;`,s("variant.lined")`b.w: 0px; b.b.w: @border-size; r.b: 0px;`,s("gr.cols-fit")`*grid-template-columns: repeat(auto-fit, minmax(%arg));`,s("gr.cols-fill")`*grid-template-columns: repeat(auto-fill, minmax(%arg));`,s("text.subtitle")`t.sz: @text-size-subtitle; flex; fl.main: center; p: 0px 8px;`,s("text.title")`t.sz: @text-size-title; flex; fl.main: center; p: 4px 8px;`,s("elevate")`sh.box: 0px 2px 3px @shadow-color;`;const h=r=>{let t=5381;for(let e=0;e<r.length;e+=1)t=33*t^r.charCodeAt(e);return t.toString(36)},w={},x=r=>Object.entries(r).reduce(((r,t)=>{const[e,o]=t;return null==o||!1===o?r:!0===o?(r.push(`${e};`),r):"object"==typeof o?(r.push(`${e} { ${x(o)} }`),r):(r.push(`${e}: ${o};`),r)}),[]).join(" "),y=(r,...t)=>{const e=h(`${Date.now()}:${Math.random().toString(16)}`);return s(e)(r,...t)},v=c.version,$=r=>{const t=(r=>{if(""===r||null===r)return;const t=g(o({raw:[r]})),a=h(t.join("\n"));if(w[a]=(w[a]??0)+1,w[a]>1)return a;const n=t.map((r=>r.replaceAll("&",`[data-wsid="${a}"]`)));return e.sheet.insertRule(`@layer ws.macro { ${n.join("\n")} }`,e.sheet.cssRules.length),a})(r.dataset?.ws??"");void 0!==t?r.dataset.wsid=t:delete r.dataset?.wsid};new MutationObserver((r=>{const t=new Set(Array.from(r,(r=>[r.target,...Array.from(r.addedNodes,(r=>[r,...r.querySelectorAll?.("*")||[]]))])).flat(3));for(const r of t)$(r)})).observe(document.body,{subtree:!0,attributes:!0,childList:!0,attributeFilter:["data-ws"]});for(const r of document.querySelectorAll("*"))$(r);export{u as component,y as localMacro,s as macro,m as preloadIcons,v as version,x};
package/package.json CHANGED
@@ -1,34 +1,39 @@
1
- {
2
- "name": "@axel669/windstorm",
3
- "version": "0.5.5",
4
- "description": "",
5
- "main": "dist/module.js",
6
- "type": "module",
7
- "scripts": {
8
- "build": "rollup -c build-config/rollup.config.mjs",
9
- "mkdocs": "ipsen",
10
- "host": "wrangler pages dev test/preview --port 45067",
11
- "host/docs": "wrangler pages dev site --port 45068",
12
- "host/cdn": "wrangler pages dev cdn/artifacts --port 1337"
13
- },
14
- "keywords": [],
15
- "author": "",
16
- "license": "MIT",
17
- "devDependencies": {
18
- "@axel669/ipsen": "0.4.1",
19
- "@rollup/plugin-terser": "^0.4.4",
20
- "csso": "^5.0.5",
21
- "fs-jetpack": "^5.1.0",
22
- "js-yaml": "^4.1.0",
23
- "rollup": "^3.19.0",
24
- "rollup-plugin-delete": "^2.0.0",
25
- "rollup-plugin-sass": "^1.12.19",
26
- "sass": "^1.59.3"
27
- },
28
- "files": [
29
- "dist"
30
- ],
31
- "windSettings": {
32
- "fontVersion": "1"
33
- }
34
- }
1
+ {
2
+ "name": "@axel669/windstorm",
3
+ "version": "0.6.1",
4
+ "description": "",
5
+ "type": "module",
6
+ "scripts": {
7
+ "build": "rollup -c build-config/rollup.config.mjs"
8
+ },
9
+ "keywords": [],
10
+ "author": "",
11
+ "license": "MIT",
12
+ "devDependencies": {
13
+ "@axel669/ipsen": "0.4.1",
14
+ "@rollup/plugin-node-resolve": "^16.0.1",
15
+ "@rollup/plugin-terser": "^0.4.4",
16
+ "fs-jetpack": "^5.1.0",
17
+ "js-yaml": "^4.1.0",
18
+ "rollup": "^3.19.0",
19
+ "rollup-plugin-delete": "^2.0.0",
20
+ "wrangler": "^4.33.2"
21
+ },
22
+ "files": [
23
+ "dist"
24
+ ],
25
+ "windSettings": {
26
+ "fontVersion": "2",
27
+ "iconVersion": "3.34.0"
28
+ },
29
+ "exports": {
30
+ ".": "./dist/ws-esm.js",
31
+ "./es5": "./dist/ws-es5.js",
32
+ "./nc": "./dist/ws-nc-esm.js",
33
+ "./nc-es5": "./dist/ws-nc-es5.js"
34
+ },
35
+ "imports": {
36
+ "#lib/*": "./lib/*.js",
37
+ "#com/*": "./lib/components/*.js"
38
+ }
39
+ }
package/readme.md CHANGED
@@ -1,182 +1,119 @@
1
- # Windstorm
2
- Windstorm is a library that allows element customization without needing to use
3
- css directly and without predefining hundreds or thousands of css classes with
4
- minor differences between a set of 20.
5
-
6
- [Documentation Site](https://windstorm.axel669.net)
7
-
8
- ## Installation
9
-
10
- > Note: the version number is not necessary in the url, but is recommended.
11
- > Including the version ensures that if updates are made to the library, any
12
- > compatibility issues or bugs that get introduced won't affect existing pages,
13
- > and also allows updates to be done when intended.
14
-
15
- ### CDN Link (global variable)
16
- ```html
17
- <script src="https://esm.sh/@axel669/windstorm@0.5.5/dist/browser.js?raw"></script>
18
- ```
19
-
20
- ### CDN Link (module)
21
- ```js
22
- // Only scanning, no functions
23
- import "https://esm.sh/@axel669/windstorm@0.5.5"
24
- // Import functions + scanning
25
- import ws from "https://esm.sh/@axel669/windstorm@0.5.5"
26
-
27
- ws.x({...stuff})
28
- ```
29
-
30
- ### Node Modules
31
- ```bash
32
- npm add @axel669/windstorm
33
- ```
34
-
35
- ## Usage
36
- Windstorm can be used as a standalone script added to the page, or included in a
37
- bundle with other scripts/frameworks. Regardless of which form it's used in,
38
- windstorm should be included in the body of the page before the content that it
39
- will style in order to prevent FOUC. For static content, this means the script
40
- tag that uses it should not be async or defered. For content generated by a
41
- framework like React or Svelte, this should not be an issue as including
42
- windstorm in the build bundle will allow it to run before the framework adds DOM
43
- elements to the page.
44
-
45
- Once added to the page, windstorm will scan all current elements, and any
46
- elements added later for the `ws-x` attribute, and generate the necessary css
47
- immediately. Component css is automatically added to the head as well, so no
48
- extra work is needed to use any of the components. Components that transform
49
- standard tags will only work if the tag has the `ws-x` on it (although the value
50
- can be empty).
51
-
52
- > Many of the windstorm components expect some css variables defined by the
53
- > theme to be present, so a theme should always be applied to the body.
54
-
55
- ```html
56
- <body ws-x="@@theme:tron">
57
- <script src="https://esm.sh/@axel669/windstorm@0.5.5/dist/browser.js?raw"></script>
58
- Static content here
59
- </body>
60
- ```
61
-
62
- > Any html elements that do not have the `ws-x` attribute are left alone,
63
- > allowing windstorm to play nice with any other css lib (that I tried).
64
-
65
- ### Macros and Markers
66
- Information about how macros work and how to create them is on the
67
- [Macros and Markers](./lib/macros-markers.md) page.
68
-
69
- ### ws-x Attribute
70
- The `ws-x` attribute is what windstorm will scan to apply styles to elements.
71
- The attribute can have any number of macros and markers defined.
72
-
73
- - Macro format: `[(<size>|)?<name>(:<states>)? (arg string)?]`
74
- - Marker format: `@@<marker>(:arg)?`
75
-
76
- Macros will apply specific styles and variables to whatever element they are
77
- defined on and are used to customize individual elements in specific ways.
78
- Custom macros can be defined, and are covered in the
79
- [Macros and Markers](./lib/macros-markers.md) documentation.
80
-
81
- The `states` for a macro are css states for controlling conditionally applied
82
- styles (ex: `:hover`). The `size` modifier for a macro will make it apply styles
83
- when certain screen size/orientation conditions are met.
84
-
85
- | Size | Screen State |
86
- | --- | --- |
87
- | sm | width <= 600px |
88
- | md | width <= 1024px |
89
- | lg | width >= 1025px |
90
- | lnd | orientation: landscape |
91
- | prt | orientation: portrait |
92
-
93
- Markers are bits of css that change how an element is presented in a large way
94
- (themes, making links appear as buttons, etc). Markers don't get processed by the
95
- macro system, so they can be made using standard css syntax.
96
-
97
- ```html
98
- <div ws-x="[@color teal] [w 100px]">
99
- content
100
- <!-- Regular border will use the --primary variable for color -->
101
- <!-- border-color is changed on hover only to use the --color variable -->
102
- <div ws-x="[b 1px solid @primary] [b.c:hover @color]">
103
- other content
104
- </div>
105
- </div>
106
- ```
107
-
108
- ### @app and ws-screen
109
- The ws-screen component is designed to be a top level container for content that
110
- has consistent scrolling behavior for child elements across browsers and devices
111
- without the page resizing in weird ways from the various browser bars hiding and
112
- unhiding themselves from scrolling on mobile.
113
-
114
- As such, the use of ws-screen is entirely optional as all components will work
115
- without it being used, and if the regular browser scrolling behavior is not an
116
- issue, then ws-screen can be skipped entirely.
117
-
118
- If ws-screen is used, the body tag must have the `@app` marker added to the `ws-x`
119
- attribute. This will setup the css properties needed for ws-screen to control
120
- the scrolling behavior more effectively.
121
-
122
- ```html
123
- <!-- Using ws-screen -->
124
- <body ws-x="@@theme:tron @@app">
125
- <script src="<windstorm>"></script>
126
- <ws-screen>
127
- <ws-paper ws-x="[$outline]">
128
- <ws-flex>
129
- <button ws-x="[$fill] [$color primary] [r 8px]">
130
- Click Me!
131
- </button>
132
- <div ws-x="[w 100px] [h 200px] [bg.c teal]"></div>
133
- </ws-flex>
134
- </ws-paper>
135
- </ws-screen>
136
- </body>
137
- ```
138
-
139
- ```html
140
- <!-- Normal pages work fine -->
141
- <body ws-x="@@theme:tron">
142
- <script src="<windstorm>"></script>
143
- <ws-paper ws-x="[$outline]">
144
- <ws-flex>
145
- <button ws-x="[$fill] [$color primary] [r 8px]">
146
- Click Me!
147
- </button>
148
- <div ws-x="[w 100px] [h 200px] [bg.c teal]"></div>
149
- </ws-flex>
150
- </ws-paper>
151
- </body>
152
- ```
153
-
154
- ### API
155
-
156
- Windstorm has a few utility functions for making dynamic ws-x declarations
157
- easier, and making custom functions simpler.
158
-
159
- #### x(object)
160
- The `x` function takes in an object where each `[key, value]` pair will be
161
- converted into a valid string for the `ws-x` attribute, including formatting
162
- markers correctly. The value can take one of a few forms, and which form it takes
163
- will affect the output:
164
- - A string that will be used as the arg string<br />
165
- `[key, value] -> "[key value]"`, `[@@key, value] -> "@@key:value"`
166
- - `true` (boolean) will output the function without an arg string<br />
167
- `[key, true] -> "[key]"`, `[@@key, true] -> "@@key"`
168
- - `null`, `false`, or `undefined` will output nothing, useful for making
169
- something that is toggled or catching when something isn't defined.<br />
170
- `[key, value] -> ""`
171
-
172
- ```js
173
- // returns "@@button [$outline] [r 4px] [b 1px solid @main-color] [@var 10px]"
174
- ws.x({
175
- "@@button": true,
176
- $outline: true,
177
- r: "4px",
178
- hide: false,
179
- b: "1px solid @main-color",
180
- "@var": "10px",
181
- })
182
- ```
1
+ # Windstorm
2
+ Windstorm is a library that allows element customization without needing to use
3
+ css directly and without predefining hundreds or thousands of css classes with
4
+ minor differences between a set of 20.
5
+
6
+ [Documentation Site](https://windstorm.axel669.net)
7
+
8
+ ## Installation
9
+
10
+ > Note: the version number is not necessary in the url, but is recommended.
11
+ > Including the version ensures that if updates are made to the library, any
12
+ > compatibility issues or bugs that get introduced won't affect existing pages,
13
+ > and also allows updates to be done when intended.
14
+
15
+ ### CDN Link (global variable)
16
+ ```html
17
+ <!-- lib + components -->
18
+ <script src="https://esm.sh/@axel669/windstorm@0.6.1/es5"></script>
19
+ <!-- lib, no components -->
20
+ <script src="https://esm.sh/@axel669/windstorm@0.6.1/nc-es5"></script>
21
+ ```
22
+
23
+ ### CDN Link (module)
24
+ ```js
25
+ // Only scanning, no functions
26
+ import "https://esm.sh/@axel669/windstorm@0.6.1"
27
+ // Import functions + scanning
28
+ import ws from "https://esm.sh/@axel669/windstorm@0.6.1"
29
+
30
+ ws.x({...stuff})
31
+ ```
32
+
33
+ ### Node Modules
34
+ ```bash
35
+ npm add @axel669/windstorm
36
+ ```
37
+
38
+ ## Usage
39
+ Windstorm can be used as a standalone script added to the page, or included in a
40
+ bundle with other scripts/frameworks. Regardless of which form it's used in,
41
+ windstorm should be included in the body of the page before the content that it
42
+ will style in order to prevent FOUC. For static content, this means the script
43
+ tag that uses it should not be async or defered. For content generated by a
44
+ framework like React or Svelte, this should not be an issue as including
45
+ windstorm in the build bundle will allow it to run before the framework adds DOM
46
+ elements to the page.
47
+
48
+ Once added to the page, windstorm will scan all current elements, and any
49
+ elements added later for the `data-ws` attribute, and generate the necessary css
50
+ immediately. Component css is automatically added to the head as well, so no
51
+ extra work is needed to use any of the components. Components that transform
52
+ standard tags will only work if the tag has the `data-ws` on it (although the value
53
+ can be empty).
54
+
55
+ > Many of the windstorm components expect some css variables defined by the
56
+ > theme to be present, so a theme should always be applied to the body.
57
+
58
+ ```html
59
+ <body data-ws="#theme.tron;">
60
+ <script src="https://esm.sh/@axel669/windstorm@0.6.1/standalone"></script>
61
+ Static content here
62
+ </body>
63
+ ```
64
+
65
+ > Any html elements that do not have the `data-ws` attribute are left alone,
66
+ > allowing windstorm to play nice with any other css lib (that I tried).
67
+
68
+ ### data-ws Attribute
69
+ The `data-ws` attribute is what windstorm will scan to apply styles to elements.
70
+ The attribute is formatted similar to regular css but with some important
71
+ diffrences.
72
+
73
+ Instead of css properties and their values, macros are used and applied in the
74
+ order they are defined (and custom macros can be made). CSS can also be directly
75
+ applied in the case where a built-in macro doesn't exist or work the way you
76
+ need it to for the element. Macros can also contain macros inside them.
77
+ Media queries and nested-selectors can be used even while in the element
78
+ attribute. There is also a css variable shortcut that will either set the
79
+ variable value when used in the macro name position, or will expand to the
80
+ var syntax (without a default) when used in the value. Normal variable syntax
81
+ also works without any edits.
82
+
83
+ [Macros](./lib/macros.md)
84
+
85
+ | Macro Type | Syntax |
86
+ | --- | --- |
87
+ | Normal Macro | `<macro name>` |
88
+ | CSS | `*<css prop>` |
89
+ | CSS variable | `@<var name>` |
90
+
91
+ Macros can also have a single argument, or multiple arguments. Macros that use
92
+ a single argument will use that arg trimmed, and multi arg macros will have each
93
+ argument trimmed. More details on using the arguments is found in the Macros
94
+ page.
95
+
96
+ ```
97
+ <macro>: <value>;
98
+
99
+ ! <nested-selector> {
100
+ <macro>: <value>;
101
+ ...
102
+ }
103
+ ! | <media query> | {
104
+ <macro>: <value>;
105
+ ...
106
+ }
107
+ ```
108
+
109
+ ```html
110
+ <!-- Sets the --color variable and width -->
111
+ <div data-ws="@color: teal; w: 100px;">
112
+ content
113
+ <!-- Regular border will use the --primary variable for color -->
114
+ <!-- border-color is changed on hover only to use the --color variable -->
115
+ <div data-ws="b: 1px solid @primary; ! &:hover { b.c: @color; }">
116
+ other content
117
+ </div>
118
+ </div>
119
+ ```
package/dist/browser.js DELETED
@@ -1 +0,0 @@
1
- var ws=function(){"use strict";var e=[{name:"baseline",style:'*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}:where([ws-x]){border-style:solid;border-width:0;border-color:var(--text-color-normal)}body,html{padding:0;margin:0;width:100%;height:100%;-webkit-tap-highlight-color:transparent}body[ws-x*="@@theme:"]{background-color:var(--background)}[ws-x*="@@theme:"]{color:var(--text-color-normal);font-family:var(--font);font-size:var(--text-size-normal);--base-radius:4px}body[ws-x~="@@app"]{overflow:hidden;position:fixed;touch-action:pan-x pan-y}[ws-x~="[$elevate]"]{box-shadow:0 2px 4px var(--shadow-color)}[ws-x~="[$elevate]"]:where(button,label,a):hover{box-shadow:1px 3px 6px var(--shadow-color)}@font-face{font-family:Roboto;font-display:swap;src:url(__origin/__fonts/roboto.woff2)format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:"Share Tech Mono";font-display:swap;src:url(__origin/__fonts/share-tech-mono.woff2)format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:TablerIconsBase;src:url(__origin/__fonts/icons-base.woff)format("woff")}'},{name:"avatar",style:"ws-avatar,ws-avatar>object{align-items:center;justify-content:center}ws-avatar{--color:transparent;--size:36px;display:inline-flex;overflow:hidden;border-radius:500px;width:var(--size);height:var(--size);background-color:var(--color);color:var(--text-color-fill);vertical-align:text-bottom}ws-avatar>img{width:100%}ws-avatar>object{width:100%;height:100%;display:flex}"},{name:"badge",style:"ws-badge{--color:var(--primary);position:relative;display:inline-grid;overflow:visible}ws-badge::after{position:absolute;content:attr(ws-text);right:-10px;top:0;transform:translateY(-50%);background-color:var(--color);pointer-events:none;border-radius:20px;padding:4px;min-width:20px;height:20px;box-sizing:border-box;text-align:center;font-size:var(--text-size-subtitle);color:var(--text-color-fill);line-height:14px;z-index:5}"},{name:"button",style:':is(label,a):where([ws-x~="@@button"]),button:where([ws-x~="[$flat]"],[ws-x~="[$fill]"],[ws-x~="[$outline]"]){--color:var(--text-color-normal);--fill-color:transaprent;--text-color:var(--color);border:0 solid var(--text-color);color:var(--text-color);font-family:var(--font);background-color:var(--fill-color);border-radius:4px;cursor:pointer;padding:8px 16px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;--ripple-color:unset;--ripple-base-color:var(--ripple-normal);overflow:hidden;position:relative;user-select:none}:is(label,a):where([ws-x~="@@button"]):where(:not([disabled]))::after,button:where([ws-x~="[$flat]"],[ws-x~="[$fill]"],[ws-x~="[$outline]"]):where(:not([disabled]))::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0;transition:background-color 150ms linear;pointer-events:none}:is(label,a):where([ws-x~="@@button"]):where(:not([disabled])):active::after,button:where([ws-x~="[$flat]"],[ws-x~="[$fill]"],[ws-x~="[$outline]"]):where(:not([disabled])):active::after{transition:none;background-color:var(--ripple-color, var(--ripple-base-color))}:is(label,a):where([ws-x~="@@button"]):where([disabled]),button:where([ws-x~="[$flat]"],[ws-x~="[$fill]"],[ws-x~="[$outline]"]):where([disabled]){filter:saturate(10%) brightness(.7)}'},{name:"chip",style:'ws-chip{--color:var(--text-color-normal);--fill-color:transaprent;--text-color:var(--color);display:inline-flex;align-items:center;justify-content:center;border-radius:100px;padding:4px 12px;user-select:none;vertical-align:text-bottom;color:var(--text-color);background:var(--fill-color)}ws-chip:where([ws-x~="@@click"]){cursor:pointer;--ripple-color:unset;--ripple-base-color:var(--ripple-normal);overflow:hidden;position:relative;user-select:none}ws-chip:where([ws-x~="@@click"]):where(:not([disabled]))::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0;transition:background-color 150ms linear;pointer-events:none}ws-chip:where([ws-x~="@@click"]):where(:not([disabled])):active::after{transition:none;background-color:var(--ripple-color, var(--ripple-base-color))}'},{name:"control",style:'label:where([ws-x~="@@control"]){--color:var(--default);--border-color:var(--layer-border-color);--border-size:1px;--ripple-base-color:var(--ripple-normal);position:relative;display:inline-grid;grid-template-areas:"label label label""start control end""extra extra extra";grid-template-rows:minmax(0,min-content) auto minmax(0,min-content);grid-template-columns:minmax(0,min-content) auto minmax(0,min-content);user-select:none;overflow:hidden;border:var(--border-size) solid var(--border-color);background-color:var(--background-element);border-radius:var(--base-radius)}label:where([ws-x~="@@control"]):focus-within{--border-color:var(--color)}label:where([ws-x~="@@control"]) :is(input,select,textarea){background-color:transparent;min-width:16px;font-family:var(--font);font-size:var(--text-size-normal)}label:where([ws-x~="@@control"]) :is(input,select,textarea):disabled{background-color:var(--disabled-background);opacity:1}label:where([ws-x~="@@control"])>:where(select){border-width:0;padding:8px;min-height:36px;background-color:transparent;color:var(--color);cursor:pointer;grid-area:control}label:where([ws-x~="@@control"])>:where(select):focus{outline:0}label:where([ws-x~="@@control"])>:where(select) :where(option,optgroup){background-color:var(--background-layer);border-color:var(--background-layer);color:var(--text-color-normal);font-size:var(--text-size-normal);font-family:Arial}label:where([ws-x~="@@control"])>:where(select) :where(option,optgroup):checked{background-color:var(--color)!important;color:var(--text-color-invert)}label:where([ws-x~="@@control"])>:where(select):where([size]){padding:0}label:where([ws-x~="@@control"])>:where(select):where([size]) option{padding:4px}label:where([ws-x~="@@control"])>:where(select):where([size]) option:not(:checked){background-color:transparent}label:where([ws-x~="@@control"])>:where(select):where([size]) option:hover{box-shadow:inset 0 0 2px 2px var(--ripple-base-color, var(--ripple-color-normal))}label:where([ws-x~="@@control"])>:where(input,textarea){border-width:0;color:var(--text-normal-color);min-height:28px;width:100%;height:100%;grid-area:control;padding:4px}label:where([ws-x~="@@control"])>:where(input,textarea):focus{outline:0}label:where([ws-x~="@@control"])>input[type=file]{position:relative;padding:0}label:where([ws-x~="@@control"])>input[type=file]::file-selector-button{font-family:var(--font);height:100%;margin:0 4px 0 0;padding:4px;color:var(--text-normal-color);background-color:transparent;border-width:0;text-decoration:underline}label:where([ws-x~="@@control"])>:where([ws-x~="[$label]"]){grid-area:label;padding:4px;display:flex;flex-direction:column;align-items:start;color:var(--color);white-space:nowrap;font-size:var(--text-size-subtitle)}label:where([ws-x~="@@control"])>:where([ws-x~="[$start]"]){grid-area:start}label:where([ws-x~="@@control"])>:where([ws-x~="[$end]"]){grid-area:end}label:where([ws-x~="@@control"])>:where([ws-x~="[$extra]"]){grid-area:extra;font-size:var(--text-size-subtitle);padding:4px}'},{name:"details",style:'details:where([ws-x]){--color:var(--default);--padding:8px;border:0 solid var(--color);padding:0 var(--padding);border-radius:4px;overflow:hidden}details:where([ws-x]):open{padding-bottom:var(--padding)}details:where([ws-x])>summary{color:var(--color);padding:4px 4px 4px 1.1em;margin-left:calc(-1*var(--padding));margin-right:calc(-1*var(--padding));cursor:pointer;--ripple-color:unset;--ripple-base-color:var(--ripple-normal);overflow:hidden;position:relative;user-select:none}details:where([ws-x])>summary:where(:not([disabled]))::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0;transition:background-color 150ms linear;pointer-events:none}details:where([ws-x])>summary:where(:not([disabled])):active::after{transition:none;background-color:var(--ripple-color, var(--ripple-base-color))}details:where([ws-x])>summary::before{position:absolute;left:0;top:50%;bottom:0;width:1em;display:flex;align-items:center;justify-content:center;font-family:TablerIconsBase;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;content:"caret-right-filled";transform:translateY(-50%);transition:transform 100ms linear}details:where([ws-x])>summary::-webkit-details-marker,details:where([ws-x])>summary::marker{content:"";display:none}details:where([ws-x])[open]>summary::before{transform:translateY(-50%) rotate(90deg)}'},{name:"flex",style:"ws-flex{display:flex;flex-direction:column;gap:8px;padding:4px;overflow:hidden}ws-flex>*{flex-shrink:0}"},{name:"grid",style:"ws-grid{display:grid;overflow:hidden;gap:8px;padding:4px;grid-auto-rows:min-content}"},{name:"icon",style:'ws-icon{display:inline-block;line-height:1;--icon-font:""}ws-icon::before{font-family:var(--icon-font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:attr(data-icon)}'},{name:"link",style:"a:where([ws-x]){--color:var(--text-color-normal);--text-color:var(--color)}a:where([ws-x]),a:where([ws-x]):hover,a:where([ws-x]):visited{color:var(--text-color)}a:where([ws-x])[disabled]{pointer-events:none}"},{name:"mini-toast",style:'ws-mini-toast{--color:var(--layer-border-color);--ripple-base-color:var(--background-element);position:relative;display:inline-grid;grid-template-columns:auto 1fr auto;grid-template-areas:"start text end";border-radius:4px;cursor:pointer;user-select:none;border:1px solid var(--color);border-left-width:8px;border-right-width:8px;min-height:32px;z-index:0;background-color:var(--background-element)}ws-mini-toast::after,ws-mini-toast::before{content:"";position:relative;display:block;min-width:4px;z-index:-1}ws-mini-toast::before{grid-area:start}ws-mini-toast::after{grid-area:end}ws-mini-toast>:where([ws-x~="[$notif-text]"]){display:flex;flex-direction:row;align-items:center;padding:4px}ws-mini-toast>:where([ws-x~="[$start]"]){grid-area:start}ws-mini-toast>:where([ws-x~="[$end]"]){grid-area:end}'},{name:"modal",style:'ws-modal{--text-color:var(--text-color-normal);position:fixed;top:0;left:0;bottom:0;right:0;background-color:rgba(0,0,0,.55);z-index:100;cursor:default;visibility:hidden;transition:visibility var(--anim-time, 200ms) linear}ws-modal>label:first-child{position:absolute;width:100%;height:100%;cursor:pointer}ws-modal[ws-x~="[$show]"]{visibility:visible!important}ws-modal[ws-x~="[$show]"]>:where([ws-x~="@@action"]),ws-modal[ws-x~="[$show]"]>:where([ws-x~="@@menu"]){transform:translateX(0)}ws-modal[ws-x~="[$show]"]>:where([ws-x~="@@select"]){transform:translateX(-50%) translateY(0)}ws-modal[ws-x~="[$show]"]>:where([ws-x~="@@dialog"]){opacity:1}input[type=checkbox]:not(:checked)+ws-modal{visibility:hidden}input[type=checkbox]:checked+ws-modal{visibility:visible}ws-modal>:where(:not(label:first-child)){position:absolute}ws-modal>:where(:not(label:first-child)):where([ws-x~="@@menu"]){top:0;left:0;height:100%;transform:translateX(-100%);transition:transform var(--anim-time, 250ms) linear;max-width:100%}input[type=checkbox]:checked+ws-modal>:where(:not(label:first-child)):where([ws-x~="@@action"]),input[type=checkbox]:checked+ws-modal>:where(:not(label:first-child)):where([ws-x~="@@menu"]){transform:translateX(0)}ws-modal>:where(:not(label:first-child)):where([ws-x~="@@action"]){top:0;right:0;height:100%;transform:translateX(100%);transition:transform var(--anim-time, 250ms) linear;max-width:100%}ws-modal>:where(:not(label:first-child)):where([ws-x~="@@select"]){top:0;left:50%;transform:translateX(-50%) translateY(-100%);max-height:75vh;max-width:min(90vw,720px);transition:transform var(--anim-time, 250ms) linear}input[type=checkbox]:checked+ws-modal>:where(:not(label:first-child)):where([ws-x~="@@select"]){transform:translateX(-50%) translateY(0)}ws-modal>:where(:not(label:first-child)):where([ws-x~="@@dialog"]){top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity var(--anim-time, 250ms) linear}input[type=checkbox]:checked+ws-modal>:where(:not(label:first-child)):where([ws-x~="@@dialog"]){opacity:1}'},{name:"paper",style:'ws-paper{--color:var(--layer-border-color);display:grid;border-radius:var(--base-radius);overflow:hidden;grid-template-columns:1fr;grid-template-rows:min-content auto min-content;grid-template-areas:"header""content""footer";background-color:var(--background-layer)}ws-paper::before{content:"";grid-area:header}ws-paper::after{content:"";grid-area:footer;pointer-events:none}ws-paper>:where([ws-x~="[$content]"]){grid-area:content}ws-paper>:where([ws-x~="[$header]"]){grid-area:header}ws-paper>:where([ws-x~="[$footer]"]){grid-area:footer}'},{name:"popover",style:'ws-popover{display:grid;position:relative}ws-popover:not(:visibile)>:where([ws-x~="[$content]"]){display:none}ws-popover>:where([ws-x~="[$content]"]){position:absolute;z-index:25;display:none}ws-popover[ws-x~="[$show]"]>:where([ws-x~="[$content]"]){display:block}ws-popover>input:where([type=checkbox]):checked+:where([ws-x~="[$content]"]){display:block}ws-popover>input:where([type=checkbox]):not(:checked)+:where([ws-x~="[$content]"]){display:none}'},{name:"screen",style:'ws-screen{--stack:0;--screen-width:min(720px, 100%);display:grid;width:calc(100% - var(--sub-pixel-offset));height:calc(100% - 1px);overflow:hidden;position:fixed;top:0;left:0;z-index:200;background-color:rgba(0,0,0,.4);grid-template-columns:auto calc(var(--screen-width) - 16px*var(--stack)) auto;grid-template-areas:". content .";padding-top:calc(8px*var(--stack))}ws-screen[ws-x~="[$left]"]{grid-template-columns:calc(8px*var(--stack)) calc(var(--screen-width) - 16px*var(--stack)) auto}ws-screen>:where(*){grid-area:content;height:100%;overflow:hidden}'},{name:"spinner",style:"ws-circle-spinner,ws-hexagon-spinner{--size:100px;--color:var(--default);--ripple-base-color:var(--default-ripple);width:var(--size);height:var(--size);display:inline-block}"},{name:"table",style:'table:where([ws-x]){--color:var(--text-color-normal);--ripple-base-color:var(--ripple-normal);--elem-border-color:var(--ripple-color, var(--ripple-base-color));--row-size:min-content;--header-size:var(--row-size);display:grid;background-color:var(--elem-border-color);gap:2px;width:fit-content;grid-template-rows:var(--header-size);grid-auto-rows:var(--row-size);position:relative}table:where([ws-x]) :where(td,th){background-color:var(--background-element);padding:4px}table:where([ws-x]) :where(th){color:var(--color)}table:where([ws-x]) :where(thead,tbody){display:contents;grid-column:1/-1}table:where([ws-x]) :where(tr){position:relative;display:grid;grid-column:1/-1;grid-template-columns:subgrid}table:where([ws-x]) :where(thead th){box-shadow:inset 0-2px 0 0 var(--elem-border-color)}table:where([ws-x]):where([ws-x~="[$sticky-header]"]) :where(thead tr){position:sticky;top:0;z-index:2}table:where([ws-x]):where([ws-x~="[$sticky-header]"]) :where(thead th:empty:where(:first-child,:last-child)){position:sticky;left:0;right:0;z-index:3}table:where([ws-x]):where([ws-x~="[$sticky-header]"]) :where(tbody th){position:sticky;left:0;right:0;z-index:1}'},{name:"tabs",style:'ws-tabs{--color:var(--primary);display:flex;flex-direction:row;justify-content:stretch;align-items:stretch;user-select:none;gap:2px}ws-tabs[ws-x~="[$vert]"]{flex-direction:column;justify-content:flex-start}ws-tabs[ws-x~="[$vert]"] ws-tab{border-bottom-width:0;border-right-width:2px;flex-grow:0}ws-tabs[ws-x~="[$fill]"]>label>input[type=radio]:checked+ws-tab{color:var(--text-color-fill);background-color:var(--color)}ws-tabs>label{display:grid;flex-grow:1}ws-tabs>label>input[type=radio]{display:none}ws-tabs>label>input[type=radio]:checked+ws-tab{color:var(--color);border-color:var(--color)}ws-tabs>label>ws-tab{display:flex;justify-content:center;align-items:center;padding:8px;border-color:var(--text-color-secondary);border-width:0 0 2px;border-style:solid;cursor:pointer;--ripple-color:unset;--ripple-base-color:var(--ripple-normal);overflow:hidden;position:relative;user-select:none}ws-tabs>label>ws-tab:where(:not([disabled]))::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0;transition:background-color 150ms linear;pointer-events:none}ws-tabs>label>ws-tab:where(:not([disabled])):active::after{transition:none;background-color:var(--ripple-color, var(--ripple-base-color))}'},{name:"titlebar",style:'ws-titlebar{display:grid;min-height:52px;grid-template-columns:auto 1fr auto;grid-template-areas:"menu title action";user-select:none;position:relative}ws-titlebar>:where(button,[ws-x~="@@button"]){border-radius:0}ws-titlebar>:where([ws-x~="[$title]"]){--color:var(--text-color-normal);--text-color:var(--color);--border-color:var(--layer-border-color);--border-size:2px;--fill-color:transparent;grid-area:title;color:var(--text-color);border-bottom:1px solid transparent;z-index:0;display:flex;flex-direction:column;justify-content:center}ws-titlebar>:where([ws-x~="[$title]"]):where([ws-x~="[$color"]){--border-color:var(--color)}ws-titlebar>:where([ws-x~="[$title]"])::before{content:"";background-color:var(--fill-color);position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;border-bottom:var(--border-size) solid var(--border-color);border-top:var(--border-size) solid var(--border-color)}ws-titlebar>:where([ws-x~="[$title]"])~:where([ws-x~="[$menu]"],[ws-x~="[$action]"])>:where(button,[ws-x~="@@button"]),ws-titlebar>:where([ws-x~="[$title]"])~:where(button,[ws-x~="@@button"]){--ripple-normal:var(--ripple-dark)}ws-titlebar>:where([ws-x~="[$title]"]):where([ws-x~="[$fill]"])~:where([ws-x~="[$menu]"],[ws-x~="[$action]"])>:where(button,[ws-x~="@@button"]),ws-titlebar>:where([ws-x~="[$title]"]):where([ws-x~="[$fill]"])~:where(button,[ws-x~="@@button"]){--color:var(--text-color-invert)}ws-titlebar>:where([ws-x~="[$menu]"]){grid-area:menu}ws-titlebar>:where([ws-x~="[$action]"]){grid-area:action}'},{name:"toast",style:'ws-toast{--color:var(--layer-border-color);position:relative;display:inline-grid;grid-template-columns:auto 1fr auto;grid-template-areas:"start text end";border-radius:4px;cursor:pointer;user-select:none;border:2px solid var(--color);min-height:48px;z-index:0}ws-toast::after,ws-toast::before{content:"";position:relative;display:block;min-width:20px;background-color:var(--color);z-index:-1}ws-toast::before{grid-area:start}ws-toast::after{grid-area:end}ws-toast>:where([ws-x~="[$notif-text]"]){display:flex;flex-direction:row;align-items:center;padding:4px;background-color:var(--background-element)}ws-toast>:where([ws-x~="[$start]"]){grid-area:start}ws-toast>:where([ws-x~="[$end]"]){grid-area:end}ws-toast>:where([ws-x~="[$start]"],[ws-x~="[$end]"]),ws-toast>:where([ws-x~="[$start]"],[ws-x~="[$end]"]) button{--ripple-color:var(--ripple-invert);--color:var(--text-color-invert);color:var(--text-color-invert)}'},{name:"toaster",style:'ws-toaster{position:fixed;z-index:100;display:inline-flex;flex-direction:column;padding:4px;gap:4px;height:min-content!important}ws-toaster[ws-x~="[$tl]"]{top:0;left:0}ws-toaster[ws-x~="[$tc]"]{top:0;left:50%;transform:translateX(-50%)}ws-toaster[ws-x~="[$tr]"]{top:0;right:0}ws-toaster[ws-x~="[$ml]"]{top:50%;left:0;transform:translateY(-50%)}ws-toaster[ws-x~="[$mr]"]{top:50%;right:0;transform:translateY(-50%)}ws-toaster[ws-x~="[$bl]"]{bottom:0;left:0}ws-toaster[ws-x~="[$bc]"]{bottom:0;left:50%;transform:translateX(-50%)}ws-toaster[ws-x~="[$br]"]{bottom:0;right:0}'},{name:"toggle",style:'label:where([ws-x~="@@toggle"]){--color:var(--default);--ripple-color:var(--default-ripple);--border-color:var(--layer-border-color);--border-size:1px;cursor:pointer;display:inline-flex;align-items:center;justify-content:space-between;padding:4px;border:var(--border-size) solid var(--border-color);background-color:var(--background-element);border-radius:var(--base-radius);--ripple-color:unset;--ripple-base-color:var(--ripple-normal);overflow:hidden;position:relative;user-select:none}label:where([ws-x~="@@toggle"]):where(:not([disabled]))::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0;transition:background-color 150ms linear;pointer-events:none}label:where([ws-x~="@@toggle"]):where(:not([disabled])):active::after{transition:none;background-color:var(--ripple-color, var(--ripple-base-color))}label:where([ws-x~="@@toggle"]):focus-within{--border-color:var(--color)}label:where([ws-x~="@@toggle"])>input{position:relative;min-width:20px;min-height:20px;-webkit-appearance:none;appearance:none;margin:0;color:var(--color)}label:where([ws-x~="@@toggle"])>input:focus{outline:0}label:where([ws-x~="@@toggle"])>input:disabled{--color:var(--disabled-background)}label:where([ws-x~="@@toggle"])>input::after{content:"";position:absolute;font-size:18px;font-family:TablerIconsBase;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;top:50%;left:50%;width:20px;height:20px;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;overflow:hidden}label:where([ws-x~="@@toggle"])>input[type=radio]::after{content:"circle"}label:where([ws-x~="@@toggle"])>input[type=radio]:checked::after{content:"circle-check"}label:where([ws-x~="@@toggle"])>input[type=checkbox]::after{content:"square"}label:where([ws-x~="@@toggle"])>input[type=checkbox]:checked::after{content:"square-check-filled"}label:where([ws-x~="@@toggle"])>input[type=checkbox]:where([ws-x~="@@switch"]){position:relative;border:1px solid var(--color);height:24px;width:44px;border-radius:12px}label:where([ws-x~="@@toggle"])>input[type=checkbox]:where([ws-x~="@@switch"]):disabled{background-color:var(--disabled-background)}label:where([ws-x~="@@toggle"])>input[type=checkbox]:where([ws-x~="@@switch"])::after{color:var(--text-dark);content:"";background-color:var(--text-color-secondary);position:absolute;width:18px;height:18px;border-radius:10px;top:2px;left:2px;transform:none;border-width:0;transition:left 100ms linear,color 100ms linear}label:where([ws-x~="@@toggle"])>input[type=checkbox]:where([ws-x~="@@switch"]):checked::after{background-color:var(--color);content:"check";left:22px}'},{name:"tooltip",style:'ws-tooltip{position:relative;display:inline-grid;overflow:visible}ws-tooltip::after{position:absolute;content:attr(ws-text);left:50%;bottom:calc(100% + 2px);transform:translateX(-50%);height:20px;background-color:var(--background-layer);opacity:0;transition:opacity 100ms linear;pointer-events:none;border-radius:4px;border:1px solid var(--text-color-secondary);padding:2px 8px;font-size:var(--text-size-subtitle);width:60%;display:flex;align-items:center;justify-content:center;z-index:5}ws-tooltip:hover::after{opacity:1}ws-tooltip[ws-x~="[$bottom]"]::after{bottom:unset;top:calc(100% + 2px)}'},{name:"dark",style:'[ws-x~="@@theme:dark"]{--font:Roboto;--text-light:white;--text-dark:black;--text-color-normal:var(--text-light);--text-color-secondary:#cccccc;--text-color-invert:var(--text-dark);--text-color-fill:var(--text-dark);--text-size-normal:14px;--text-size-title:18px;--text-size-header:16px;--text-size-info:13px;--text-size-subtitle:12px;--text-size-data:10px;--background:#161616;--background-layer:#333333;--background-element:#242424;--layer-border-width:1px;--layer-border-color:#505050;--default:var(--text-color-normal);--default-ripple:var(--ripple-normal);--plain:var(--text-color-normal);--plain-ripple:var(--ripple-normal);--primary:#00aaff;--primary-ripple:#00aaff60;--secondary:#2fbc2f;--secondary-ripple:#2fbc2f60;--danger:#df5348;--danger-ripple:#df534860;--warning:#ffff00;--warning-ripple:#ffff0060;--accent:#ff4dff;--accent-ripple:#ff4dff60;--ripple-dark:#00000060;--ripple-light:#FFFFFF60;--ripple-normal:var(--ripple-light);--ripple-invert:var(--ripple-dark);--shadow-color:rgb(0, 0, 0, 0.25);--disabled-background:#606060;color-scheme:dark}'},{name:"light",style:'[ws-x~="@@theme:light"]{--font:Roboto;--text-light:white;--text-dark:black;--text-color-normal:var(--text-dark);--text-color-secondary:#505050;--text-color-invert:var(--text-light);--text-color-fill:var(--text-light);--text-size-normal:14px;--text-size-title:18px;--text-size-header:16px;--text-size-info:13px;--text-size-subtitle:12px;--text-size-data:10px;--background:#e9e9e9;--background-layer:#ffffff;--background-element:#f3f3f3;--layer-border-width:1px;--layer-border-color:#aaaaaa;--default:var(--text-color-normal);--default-ripple:var(--ripple-normal);--plain:var(--text-color-normal);--plain-ripple:var(--ripple-normal);--primary:#1d62d5;--primary-ripple:#1d62d560;--secondary:#128f12;--secondary-ripple:#128f1260;--danger:#F44336;--danger-ripple:#F4433660;--warning:#db990d;--warning-ripple:#db990d60;--accent:#cf00cf;--accent-ripple:#cf00cf60;--ripple-dark:#00000060;--ripple-light:#FFFFFF60;--ripple-normal:var(--ripple-dark);--ripple-invert:var(--ripple-light);--shadow-color:rgb(0, 0, 0, 0.25);--disabled-background:#c7c7c7}'},{name:"tron",style:'[ws-x~="@@theme:tron"]{--font:Share Tech Mono;--text-light:white;--text-dark:black;--text-color-normal:var(--text-light);--text-color-secondary:#a0a0a0;--text-color-invert:var(--text-dark);--text-color-fill:var(--text-dark);--text-size-normal:15px;--text-size-title:19px;--text-size-header:17px;--text-size-info:14px;--text-size-subtitle:13px;--text-size-data:11px;--background:#020202;--background-layer:#060d19;--background-element:#04080F;--layer-border-width:1px;--layer-border-color:#00EEEE;--default:#00eeee;--default-ripple:#00eeee60;--plain:var(--text-color-normal);--plain-ripple:var(--ripple-normal);--primary:#00aaff;--primary-ripple:#00aaff60;--secondary:#2fbc2f;--secondary-ripple:#2fbc2f60;--danger:#df5348;--danger-ripple:#df534860;--warning:#ffff00;--warning-ripple:#ffff0060;--accent:#ff4dff;--accent-ripple:#ff4dff60;--ripple-dark:#00000060;--ripple-light:#FFFFFF60;--ripple-normal:var(--ripple-light);--ripple-invert:var(--ripple-dark);--shadow-color:rgb(255, 255, 255, 0.25);--disabled-background:#606060;color-scheme:dark}'}];const t={attr:"ws-x",origin:"https://wind-cdn.axel669.net",...window.windstormConfig,version:"0.5.5",fontVersion:"1"},r=document.head,o=Math.ceil(screen.width*devicePixelRatio*10)%10>=5;e.push({name:"correction",style:`body {--sub-pixel-offset:${o?1:0}px}`});for(const{name:o,style:a}of e){const e=document.createElement("style");e.setAttribute("ws-name",o),e.innerHTML=a.replaceAll("ws-x",t.attr).replaceAll("__origin",t.origin).replaceAll("__fonts",t.fontVersion),r.append(e)}const a=document.createElement("style");document.head.append(a);const i=a.sheet;a.setAttribute("ws-name","windstorm-generated");const n=document.createElement("style");n.setAttribute("ws-name","core macros"),n.setAttribute("ws-root",""),n.innerHTML='.ws-style {\n --area: "grid-area: {$}";--b: "border: {$}";--b\\.c: "border-color: {$}";--b\\.s: "border-style: {$}";--b\\.w: "border-width: {$}";--b\\.b: "border-bottom: {$}";--b\\.b\\.c: "border-bottom-color: {$}";--b\\.b\\.s: "border-bottom-style: {$}";--b\\.b\\.w: "border-bottom-width: {$}";--b\\.t: "border-top: {$}";--b\\.t\\.c: "border-top-color: {$}";--b\\.t\\.s: "border-top-style: {$}";--b\\.t\\.w: "border-top-width: {$}";--b\\.l: "border-left: {$}";--b\\.l\\.c: "border-left-color: {$}";--b\\.l\\.s: "border-left-style: {$}";--b\\.l\\.w: "border-left-width: {$}";--b\\.r: "border-right: {$}";--b\\.r\\.c: "border-right-color: {$}";--b\\.r\\.s: "border-right-style: {$}";--b\\.r\\.w: "border-right-width: {$}";--b\\.x: "border-left: {$}" "border-right: {$}";--b\\.x\\.c: "border-left-color: {$}" "border-right-color: {$}";--b\\.x\\.s: "border-left-style: {$}" "border-right-style: {$}";--b\\.x\\.w: "border-left-width: {$}" "border-right-width: {$}";--b\\.y: "border-top: {$}" "border-bottom: {$}";--b\\.y\\.c: "border-top-color: {$}" "border-bottom-color: {$}";--b\\.y\\.s: "border-top-style: {$}" "border-bottom-style: {$}";--b\\.y\\.w: "border-top-width: {$}" "border-bottom-width: {$}";--bg: "background: {$}";--bg\\.att: "background-attachment: {$}";--bg\\.c: "background-color: {$}";--bg\\.img: "background-image: {$}";--bg\\.rep: "background-repeat: {$}";--bg\\.pos: "background-position: {$}";--bg\\.sz: "background-size: {$}";--c: "color: {$}";--col: "grid-column: {$}";--cur: "cursor: {$}";--disp: "display: {$}";--fl\\.basis: "flex-basis: {$}";--fl\\.cross: "align-items: {$}";--fl\\.dir: "flex-direction: {$}";--fl\\.flow: "flex-flow: {$}";--fl\\.grow: "flex-grow: {$}";--fl\\.main: "justify-content: {$}";--fl\\.shrink: "flex-shrink: {$}";--fl\\.size: "flex: {$}";--fl\\.wr: "flex-wrap: {$}";--font: "font-family: {$}";--gap: "gap: {$}";--gap\\.row: "row-gap: {$}";--gap\\.col: "column-gap: {$}";--gr\\.area: "grid-template-areas: {$}";--gr\\.cols: "grid-template-columns: {$}";--gr\\.cols\\.a: "grid-auto-columns: {$}";--gr\\.flow: "grid-auto-flow: {$}";--gr\\.rows: "grid-template-rows: {$}";--gr\\.rows\\.a: "grid-auto-rows: {$}";--h: "height: {$}";--h\\.min: "min-height: {$}";--h\\.max: "max-height: {$}";--inset: "top: {$}" "left: {$}" "bottom: {$}" "right: {$}";--inset\\.x: "left: {$}" "right: {$}";--inset\\.y: "top: {$}" "bottom: {$}";--m: "margin: {$}";--m\\.b: "margin-bottom: {$}";--m\\.l: "margin-left: {$}";--m\\.r: "margin-right: {$}";--m\\.t: "margin-top: {$}";--m\\.x: "margin-left: {$}" "margin-right: {$}";--m\\.y: "margin-bottom: {$}" "margin-top: {$}";--o: "opacity: {$}";--outln: "outline: {$}";--over: "overflow: {$}";--over\\.x: "overflow-x: {$}";--over\\.y: "overflow-y: {$}";--p: "padding: {$}";--p\\.b: "padding-bottom: {$}";--p\\.l: "padding-left: {$}";--p\\.r: "padding-right: {$}";--p\\.t: "padding-top: {$}";--p\\.x: "padding-left: {$}" "padding-right: {$}";--p\\.y: "padding-top: {$}" "padding-bottom: {$}";--pos: "position: {$}";--r: "border-radius: {$}";--r\\.b: "border-bottom-left-radius: {$}" "border-bottom-right-radius: {$}";--r\\.bl: "border-bottom-left-radius: {$}";--r\\.br: "border-bottom-right-radius: {$}";--r\\.l: "border-top-left-radius: {$}" "border-bottom-left-radius: {$}";--r\\.r: "border-top-right-radius: {$}" "border-bottom-right-radius: {$}";--r\\.t: "border-top-left-radius: {$}" "border-top-right-radius: {$}";--r\\.tl: "border-top-left-radius: {$}";--r\\.tr: "border-top-right-radius: {$}";--row: "grid-row: {$}";--sel: "user-select: {$}";--self\\.cross: "align-self: {$}";--self\\.main: "justify-self: {$}";--sh\\.box: "box-shadow: {$}";--sh\\.text: "text-shadow: {$}";--t\\.a: "text-align: {$}";--t\\.br: "word-break: {$}";--t\\.c: "color: {$}";--t\\.dec: "text-decoration: {$}";--t\\.lh: "line-height: {$}";--t\\.over: "text-overflow: {$}";--t\\.sz: "font-size: {$}";--t\\.tf: "text-transform: {$}";--t\\.ws: "white-space: {$}";--t\\.wt: "font-weight: {$}";--tf: "transform: {$}";--tf\\.o: "transform-origin: {$}";--tf\\.p: "perspective: {$}";--tr: "transition: {$}";--vis: "visibility: {$}";--w: "width: {$}";--w\\.min: "min-width: {$}";--w\\.max: "max-width: {$}";--x: "left: {$}";---x: "right: {$}";--y: "top: {$}";---y: "bottom: {$}";--z: "z-index: {$}";\n --fl-center: [fl.cross center] [fl.main center];\n --flex: $="column" [disp flex] [fl.dir {$}];\n --grid: $="row" [disp grid] [gr.flow {$}];\n --hide: [disp none];\n --invis: [vis hidden];\n --self-cross: "align-self: {$}";\n --sticky: "position: sticky" "top: 0px" "z-index: +1";\n --gr\\.area: "grid-template-areas: {$}";\n --area: "grid-area: {$}";\n --\\$adorn: [disp flex] [fl-center] [p 4px];\n --\\$outline: [b.w 1px] [b.c @color];\n --\\$color: [@color {$}] [@ripple-base-color {$}-ripple];\n --\\$compact: [p 0px 8px];\n --\\$fill: [@text-color @text-color-fill] [@fill-color @color] [@ripple-color @ripple-invert];\n --\\$flat: [@border-size 0px] [bg.c transparent];\n --\\$lined: [b.w 0px] [b.b.w @border-size] [bg.c transparent] [r 0px];\n --\\$lined-fill: [b.w 0px] [b.b.w @border-size] [r.b 0px];\n --\\$ground: [sh.box none];\n --gr\\.cols-fit: "grid-template-columns: repeat(auto-fit, minmax({$}))";\n --gr\\.cols-fill: "grid-template-columns: repeat(auto-fill, minmax({$}))";\n --sticky: "position: sticky" "top: 0px" "z-index: +1";\n --\\$subtitle-text: [t.sz @text-size-subtitle] [flex] [fl.main center] [p 0px 4px];\n --\\$title-text: [t.sz @text-size-title] [flex] [fl.main center] [p 4px];\n}',document.head.insertBefore(n,document.head.firstChild);const l=new RegExp([/\$="(?<def>[^"]+)"/,/\[(?<func>[\w\-\.]+)(\s+(?<arg>[^\]]+))?\]/,/\[(?<variable>@[\w\-\.]+)(\s+(?<string>[^\]]+))?\]/,/"(?<name>[\w\-]+)\s*:\s*(?<value>[^"]+?)"/].map((e=>e.source)).join("|"),"g"),s={},d={},c={},p=e=>void 0===e?"undefined":null===e?"null":`\`${e.replace(/\{\$\}/g,"${arg}")}\``,w=document.querySelectorAll("[ws-root]"),b=Array.from(w).flatMap((e=>[...e.sheet.cssRules])).filter((e=>".ws-style"===e.selectorText)).flatMap((e=>Array.from(e.style,(t=>[t,e.style.getPropertyValue(t)]))));for(const[e,r]of b){const o=e.slice(2),a=[...r.matchAll(l)].map((({groups:e})=>({...e}))),i=a.find((e=>void 0!==e.def)),n=a.filter((e=>e!==i)),w=n.map((({name:e,variable:t})=>{if(void 0!==t){return`--${t.slice(1)}: var(--wsx\\\\.\\\\${t}\${varState}\\\\.\${size ?? ""}) !important`}return void 0===e?null:`${e}: var(--wsx\\\\.${e}\${varState}\\\\.\${size ?? ""}) !important`})).filter((e=>null!==e)),b=`:where([${t.attr}~="[${o}\${state}"], [${t.attr}~="[${o}\${state}]"])`,h=[...w,...n.filter((e=>void 0!==e.func)).map((e=>{const t=c[e.func];if(void 0===t)throw new Error(`Rule "${e.func}" was not defined before rule "${o}"`);return t})).flat(1)];s[o]=new Function('{ state = "", varState, sheet, size }',"sizer",`const selectorBase = \`${b}\${state}\`\n const selector =\n (size === undefined)\n ? selectorBase\n : selectorBase.replace(/ws-x~="\\[/g, s => \`\${s}\${size}|\`)\n const css = sizer(size, \`\${selector} {\n${h.join(";")}\n}\`)\n const rules = Array.from(sheet.cssRules)\n const index =\n (size === undefined)\n ? rules.findLastIndex(rule => rule.media === undefined)\n : rules.findLastIndex(\n rule => {\n return (\n rule.media !== undefined\n && rule.cssRules[0].selectorText > selector\n )\n }\n )\n sheet.insertRule(css, (index === -1) ? sheet.cssRules.length : index)`);const f=n.map((({name:e,value:t,func:r,arg:o,variable:a,string:i})=>{if(void 0!==e||void 0!==a){return`list.push([\`${void 0!==e?`--wsx.${e}\${varState}.\${size ?? ""}`:`--wsx.\\${a}\${varState}.\${size ?? ""}`}\`, format(${p(t??i)})])`}return`macro["${r}"]({list, format, macro, varState, arg: ${p(o)}, size})`})),x=new Function(`{ list, format, macro, varState = "", arg = ${JSON.stringify(i?.def)}, size }`,f.join("\n"));c[o]=h,d[o]=x}const h=document.createElement("template");h.innerHTML='\n<style>\n@keyframes hi{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}\ncircle{animation-name:hi;animation-iteration-count:infinite;animation-timing-function:linear;transform-origin:50% 50%;}\ncircle:nth-child(1){animation-duration:4s;}\ncircle:nth-child(2){animation-duration:3s;animation-direction:reverse;}\ncircle:nth-child(3){animation-duration:2s;}\n</style>\n<svg style="width:var(--size);height:var(--size)" viewBox="0 0 100 100"><circle stroke="var(--color)" cx="50" cy="50" stroke-width="4" fill="transparent" r="48" stroke-dasharray="0 37.7 75.4 75.4 75.4 75.4"/><circle stroke="var(--ripple-base-color)" cx="50" cy="50" stroke-width="4" fill="transparent" r="40" stroke-dasharray="0 31.4 62.83 62.83 62.83 62.83"/><circle stroke="var(--color)" cx="50" cy="50" stroke-width="4" fill="transparent" r="32" stroke-dasharray="0 12.57 25.13 25.13 25.13 25.13 25.13 25.13 25.13 25.13"/></svg>',customElements.define("ws-circle-spinner",class extends HTMLElement{constructor(){super();const e=h.content.cloneNode(!0);this.attachShadow({mode:"closed"}).appendChild(e)}});const f=document.createElement("template");f.innerHTML='\n<style>\n@keyframes hi{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}\npath{animation-name:hi;animation-iteration-count:infinite;animation-timing-function:linear;transform-origin:50% 50%;}\npath:nth-child(1){animation-duration:3s;}\npath:nth-child(2){animation-duration:2s;animation-direction:reverse;}\npath:nth-child(3){animation-duration:1s;}\n</style><svg style="width: var(--size); height: var(--size);" viewBox="0 0 100 100"><path stroke="var(--color)" stroke-width="4" fill="none" d="M91.57 26v48L50 98 8.43 74V26L50 2l41.57 24Z"/><path stroke="var(--ripple-base-color)" stroke-width="4" fill="none" d="M81.177 32v36L50 86 18.823 68V32L50 14l31.177 18Z"/><path stroke="var(--color)" stroke-width="4" fill="none" d="M70.785 38v24L50 74 29.215 62V38L50 26l20.785 12Z"/></svg>',customElements.define("ws-hexagon-spinner",class extends HTMLElement{constructor(){super();const e=f.content.cloneNode(!0);this.attachShadow({mode:"closed"}).appendChild(e)}});const x=document.createElement("template");x.innerHTML='\n<style>\n@keyframes busy-load {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(400%);\n }\n}\n:host {\n display: block;\n height: 8px;\n border-radius: 4px;\n background-color: var(--background-element);\n position: relative;\n overflow: hidden;\n --color: var(--default);\n --ripple-base-color: var(--default-ripple);\n}\ndiv::before, div::after {\n content: "";\n position: absolute;\n top: 0px;\n left: 0px;\n height: 100%;\n --range: calc(var(--max) - var(--min));\n --bar-width: calc(100% * var(--value) / var(--range));\n --buffer-width: calc(100% * var(--buffer) / var(--range));\n}\ndiv::before {\n background-color: var(--color);\n}\ndiv::after {\n background-color: var(--ripple-base-color);\n}\n:host(:not([busy])) div::before {\n width: var(--bar-width);\n}\n:host(:not([busy])) div::after {\n width: var(--buffer-width);\n}\n:host([busy]) div::before {\n width: 25%;\n animation-name: busy-load;\n animation-iteration-count: infinite;\n animation-duration: 2s;\n}\n</style>\n<div></div>\n',customElements.define("ws-progress",class extends HTMLElement{static observedAttributes=["min","max","value","buffer"];constructor(){super();const e=x.content.cloneNode(!0),t=this.attachShadow({mode:"closed"});t.appendChild(e),this.core=t.querySelector("div")}get value(){return parseFloat(this.getAttribute("value")??"0")}get buffer(){return parseFloat(this.getAttribute("buffer")??"0")}get min(){return parseFloat(this.getAttribute("min")??"0")}get max(){return parseFloat(this.getAttribute("max")??"1")}get busy(){return null!==this.getAttribute("busy")}set value(e){this.setAttribute("value",e.toString())}set buffer(e){this.setAttribute("buffer",e.toString())}set min(e){this.setAttribute("min",e.toString())}set max(e){this.setAttribute("max",e.toString())}set busy(e){this.setAttribute("busy",e.toString())}#e(e,t){this.core.style.setProperty(`--${e}`,this.getAttribute(e)||t)}connectedCallback(){this.#e("value","0"),this.#e("buffer","0"),this.#e("min","0"),this.#e("max","1")}attributeChangedCallback(e,t,r){this.#e(e,r)}});const m=[["zzz-off","window-minimize"],["window-maximize","vector-spline"],["vector-off","trending-up"],["trending-down-3","time-duration-10"],["time-duration-0","switch-3"],["switch-2","square-rounded-number-4"],["square-rounded-number-3-filled","square-percentage"],["square-off","square-f0"],["square-dot-filled","ski-jumping"],["skew-y","shareplay"],["share-off","sailboat-off"],["sailboat-2","replace-off"],["replace-filled","prism-light"],["prism","play-card-9-filled"],["play-card-9","photo-bolt"],["photo-bitcoin","paperclip"],["paper-bag-off","number-56-small"],["number-55-small","navigation-filled"],["navigation-exclamation","mood-look-down"],["mood-kid-filled","message-circle-filled"],["message-circle-exclamation","masks-theater-off"],["masks-theater","macro-off"],["macro-filled","line-scan"],["line-height","layout-list"],["layout-kanban-filled","joker"],["join-straight","hospital-circle-filled"],["horseshoe","hexagon-letter-q"],["hexagon-letter-p-filled","hanger-off"],["hanger-2-filled","gender-genderqueer"],["gender-genderless","flag-spark"],["flag-share","file-time"],["file-text-spark","eye-down"],["eye-dotted","drone"],["drag-drop-2","device-watch-off"],["device-watch-minus","device-ipad-horizontal-up"],["device-ipad-horizontal-star","dental"],["delta","curling"],["cup-off","confetti"],["cone-plus","cloud-bolt"],["cloud-bitcoin","circle-triangle"],["circle-square","circle-dotted-letter-p"],["circle-dotted-letter-o","chevrons-right"],["chevrons-left","cell-signal-2"],["cell-signal-1","camera-exclamation"],["camera-down","building-airport"],["building","brand-unsplash"],["brand-unity","brand-picsart"],["brand-php","brand-google-drive"],["brand-google-big-query","brand-binance"],["brand-bilibili","bowl-chopsticks"],["bowl","bike-filled"],["bike","basket-cog"],["basket-code","atom-2"],["atom","arrow-right-from-arc"],["arrow-right-dashed","arrow-big-down-line-filled"],["arrow-big-down-line","align-box-right-middle"],["align-box-right-bottom-filled","accessible"],["access-point-off","a-b"]],g={},u=e=>{if("ws-icon"!==e.tagName.toLowerCase())return;const r=e.dataset.icon??null;if(null===r)return;const o=(e=>{let t=0;for(const[r,o]of m){if(t+=1,e>o&&e<r)return t;if(e>r)return null}return null})(r);null!==o&&((e=>{const r=e.toString();void 0===g[r]&&(g[r]=new FontFace(`TablerIcons${e}`,`url(${t.origin}/${t.fontVersion}/tabler-3.23.0-part${e}.woff)`),document.fonts.add(g[r]),g[r].load())})(o),e.style.setProperty("--icon-font",`TablerIcons${o}`))},v={attributes(e){u(e.target)},childList(e){[...e.addedNodes].map((e=>void 0===e.tagName?[]:[e,...e.querySelectorAll("ws-icon")])).flat().forEach(u)}};new MutationObserver((e=>{for(const t of e)v[t.type](t)})).observe(document.body,{subtree:!0,attributes:!0,childList:!0,attributeFilter:["data-icon"]});const $={},y={sm:"(max-width: 600px)",md:"(max-width: 1024px)",lg:"(min-width: 1025px)",lnd:"(orientation: landscape)",prt:"(orientation: portrait)"},k=e=>e?.replace(/@([\w\-]+)/g,((e,t)=>`var(--${t})`)),z=(e,t)=>void 0===e?t:`@media screen and ${y[e]} { ${t} }`,F=new WeakMap,U=(e,t,r)=>{const{name:o,state:a,arg:n,size:l}=e.groups,c=`${o}${a??""}`;if(!0===o.startsWith("@"))return void t.push([`--${o.slice(1)}`,n]);if(void 0===d[o]){if(!0===o.startsWith("$"))return;return void console.warn(`No macro defined for ${o} on`,r)}const p=a?.replace(/:|\|/g,"_")??"";((e,t,r)=>{const o=`${r.size??""}|${e}`;!0!==$[o]&&(s[t](r,z),$[o]=!0)})(c,o,{sheet:i,state:a,varState:p,size:l}),d[o]({list:t,format:k,macro:d,varState:p,arg:n?.trim(),size:l})},A=e=>{if(void 0===e.tagName)return;const r=e.getAttribute(t.attr),o=r?.matchAll(S)??[],a=F.get(e)??[],i=[];for(const t of o)U(t,i,e);const n=i.map((e=>e[0])),l=a.filter((e=>!1===n.includes(e)));for(const t of l)e.style.removeProperty(t);for(const[t,r]of i)e.style.setProperty(t,r);F.set(e,n)},S=/\[((?<size>\w+)\|)?(?<name>[\$@\w\-\.]+)(?<state>:[^\s\]]+)?(?<arg>[^\]]+?)?\]/g,E={childList(e){0!==e.addedNodes.length&&e.addedNodes.forEach((e=>{if(void 0===e.tagName)return;[e,...e.querySelectorAll("*")].forEach(A)}))},attributes(e){A(e.target)}};new MutationObserver((e=>e.forEach((e=>E[e.type](e))))).observe(document.body,{subtree:!0,attributes:!0,childList:!0,attributeFilter:[t.attr]});return[document.body,...document.body.querySelectorAll("*")].forEach(A),{x:e=>Object.entries(e).reduce(((e,[t,r])=>(null==r||!1===r||e.push(((e,t)=>!0===e.startsWith("@@")?!0===t?e:`${e}:${t}`:!0===t?`[${e}]`:`[${e} ${t}]`)(t,r)),e)),[]).join(" "),config:t}}();