@axel669/windstorm 1.0.0-beta.0 → 1.0.0-beta.2

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.
package/dist/ws-esm.js CHANGED
@@ -1,4 +1,4 @@
1
- const e=Symbol("no match"),t=(t,r)=>{const o=r=>{const o=r.length;return()=>r===t.substr(N,o)?(N+=o,r):e},a=r=>()=>{const o=t.charAt(N);return!1!==r.test(o)?(N+=1,o):e};let n=null;const s=o("@"),i=o(":"),l=a(/[^;]/),c=o(";"),d=o("*"),p=a(/[a-z0-9_\-]/i),h=o("!"),u=a(/[^{]/),g=o("{"),b=o("}"),f=a(/[a-zA-Z0-9\.\-_#\^\$\/]/),m=o("#"),x=a(/[^;#]/),v=a(/[\s]/m),w=()=>{const t=N;let r=null,o=null;return(r=P())===e||(o=z())===e?(N=t,e):[r,o]},y=()=>{const r=N;let o=null,a=null;return(o=m())===e||(a=(()=>{const r=N,o=N;for(;x()!==e;);return N-o==0?e:t.slice(r,N)})())===e?(N=r,e):[o,a]},k=()=>{n="rules";let t=N,r=null;const o=[];let a=null;for(;(a=w())!==e;)o.push(a);if(r=o,P()===e)return N=t,e;return r.map((e=>e[1]))},z=()=>{let t=null;return(t=$())!==e||(t=A())!==e||(t=E())!==e||(t=L())!==e?t:e},$=()=>{n="rule$0";let t=N,r=null;if((r=S())===e)return N=t,e;return r},A=()=>{n="rule$1";let t=N,r=null;if((r=q())===e)return N=t,e;return r},E=()=>{n="rule$2";let t=N,r=null;if((r=C())===e)return N=t,e;return r},L=()=>{n="rule$3";let t=N,r=null;if((r=V())===e)return N=t,e;return r},S=()=>{n="variable";let r=N,o=null,a=null;if(s()===e)return N=r,e;if((o=M())===e)return N=r,e;if(i()===e)return N=r,e;if(P()===e)return N=r,e;if((a=(()=>{const r=N,o=N;for(;l()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;if(c()===e)return N=r,e;return((e,t)=>({type:"var",name:e,value:t}))(o,a)},q=()=>{n="css";let r=N,o=null,a=null;if(d()===e)return N=r,e;if((o=M())===e)return N=r,e;if(i()===e)return N=r,e;if(P()===e)return N=r,e;if((a=(()=>{const r=N,o=N;for(;l()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;if(c()===e)return N=r,e;return((e,t)=>({type:"css",name:e,value:t}))(o,a)},M=()=>{n="cssName";let r=N,o=null;if((o=(()=>{const r=N,o=N;for(;p()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;return o},C=()=>{n="subrule";let r=N,o=null,a=null;if(h()===e)return N=r,e;if(P()===e)return N=r,e;if((o=(()=>{const r=N,o=N;for(;u()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;if(g()===e)return N=r,e;if((a=k())===e)return N=r,e;if(b()===e)return N=r,e;var s;return s=a,{type:"alt",selector:o.trim(),rules:s}},V=()=>{n="macro";let r=N,o=null,a=null;if((o=(()=>{const r=N,o=N;for(;f()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;const s=(()=>{const t=N;let r=null,o=null,a=null;return(r=i())===e||(o=P())===e||(a=T())===e?(N=t,e):[r,o,a]})();if(a=s===e?null:s,c()===e)return N=r,e;return((e,t)=>({type:"macro",name:e,value:t?.[2]}))(o,a)},T=()=>{let t=null;return(t=I())!==e||(t=j())!==e?t:e},I=()=>{n="macroValue$0";let t=null;const r=[];let o=null;for(;(o=y())!==e;)r.push(o);if(0===r.length)return e;t=r;return(e=>{const t=e.map((e=>e[1].trim()));return t.arg=t.join(" "),t})(t)},j=()=>{n="macroValue$1";let r=N,o=null;if((o=(()=>{const r=N,o=N;for(;l()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;return(e=>{const t=[e.trim()];return t.arg=e,t})(o)},P=()=>{for(n="_";v()!==e;);};let N=0;const H=(()=>{n="$";let t=N,r=null;if((r=k())===e)return N=t,e;return r})();return N!==t.length?(console.log("last",n),console.log("@",N),console.log(t.slice(N-10,N+10)),new Error("End of input not found")):H},r=document.createElement("style");r.setAttribute("data-name","windstorm-generated"),r.innerHTML="@layer ws.custom ws.macro ws.user;",document.head.append(r);const o=(e,...r)=>{const o=String.raw(e,...r);return a(t(o),{"&":[]},"&")},a=(e,t,r)=>{for(const o of e)s(o,t,r);return t},n=e=>e.replace(/@([a-zA-Z0-9\-_]+)/g,((e,t)=>`var(--${t})`)),s=(e,t,r)=>{if("var"===e.type)return void t[r].push(`--${e.name}: ${n(e.value)};`);if("css"===e.type)return void t[r].push(`${e.name}: ${n(e.value)};`);if("macro"===e.type){const o=i[e.name];if(void 0===o)return void console.warn(`no macro for "${e.name}"`);for(const[a,s]of Object.entries(o)){const o=a.replace("&",r);t[o]=t[o]??[],t[o].push(...s.map((t=>n(t.replace(/%(arg|\d+)/g,((t,r)=>e.value?.[r]??""))))))}return}const o=e.selector.replaceAll("&",r);t[o]=[...t[o]??[]],a(e.rules,t,o)},i={},l=e=>(t,...r)=>i[e]=o(t,...r),c=e=>Object.entries(e).reduce(((e,[t,r])=>{if(!0===t.startsWith("|")){const o=t.lastIndexOf("|"),a=[`@media (${t.slice(1,o)}) {`,`${`&${t.slice(o+1)}`} {`,...r,"}","}"].join("\n");return e.push(a),e}return e.push(`${t} {\n${r.join("\n")}\n}`),e}),[]),d=(e,t="ws.custom")=>(a,...n)=>{const s=o(a,...n),i=c(s).map((t=>t.replaceAll("&",e))),l=`@layer ${t} { ${i.join("\n")} }`;r.sheet.insertRule(l)};const p={attr:"ws-x",origin:"https://wind-cdn.axel669.net",...window.wsConfig,version:"1.0.0-beta.0",fontVersion:"2",iconVersion:"3.34.0"},h={},u=async(e,t)=>{const r=h[t],o=`ws-icon-${t}`;if(void 0!==r){if(await r.loaded,"loaded"!==r.status||null===e)return;return void e.style.setProperty("--icon-font",o)}const a=new FontFace(o,`url(${p.origin}/icon/${t}.woff?v${p.iconVersion})`);h[t]=a;try{await a.load()}catch(e){console.error(e)}document.fonts.add(a),u(e,t)},g=e=>{if(void 0===e.tagName)return;const t=e.dataset.icon??null;null!==t&&u(e,t)},b={childList(e){0!==e.addedNodes.length&&e.addedNodes.forEach((e=>{if(void 0===e.tagName)return;[e,...e.querySelectorAll("*")].forEach(g)}))},attributes(e){g(e.target)}};new MutationObserver((e=>e.forEach((e=>b[e.type](e))))).observe(document.body,{subtree:!0,attributes:!0,childList:!0,attributeFilter:["data-icon"]});const f=(...e)=>{for(const t of e)u(null,t)};l("appr")`*apperance: %arg; *-webkit-appearance: %arg;`,l("area")`*grid-area: %arg;`,l("b")`*border: %arg;`,l("b.b")`*border-bottom: %arg;`,l("b.b.c")`*border-bottom-color: %arg;`,l("b.b.s")`*border-bottom-style: %arg;`,l("b.b.w")`*border-bottom-width: %arg;`,l("b.c")`*border-color: %arg;`,l("b.l")`*border-left: %arg;`,l("b.l.c")`*border-left-color: %arg;`,l("b.l.s")`*border-left-style: %arg;`,l("b.l.w")`*border-left-width: %arg;`,l("b.r")`*border-right: %arg;`,l("b.r.c")`*border-right-color: %arg;`,l("b.r.s")`*border-right-style: %arg;`,l("b.r.w")`*border-right-width: %arg;`,l("b.s")`*border-style: %arg;`,l("b.t")`*border-top: %arg;`,l("b.t.c")`*border-top-color: %arg;`,l("b.t.s")`*border-top-style: %arg;`,l("b.t.w")`*border-top-width: %arg;`,l("b.w")`*border-width: %arg;`,l("b.x")`*border-left: %arg; *border-right: %arg;`,l("b.x.c")`*border-left-color: %arg; *border-right-color: %arg;`,l("b.x.s")`*border-left-style: %arg; *border-right-style: %arg;`,l("b.x.w")`*border-left-width: %arg; *border-right-width: %arg;`,l("b.y")`*border-top: %arg; *border-bottom: %arg;`,l("b.y.c")`*border-top-color: %arg; *border-bottom-color: %arg;`,l("b.y.s")`*border-top-style: %arg; *border-bottom-style: %arg;`,l("b.y.w")`*border-top-width: %arg; *border-bottom-width: %arg;`,l("bg")`*background: %arg;`,l("bg.att")`*background-attachment: %arg;`,l("bg.c")`*background-color: %arg;`,l("bg.img")`*background-image: %arg;`,l("bg.pos")`*background-position: %arg;`,l("bg.rep")`*background-repeat: %arg;`,l("bg.sz")`*background-size: %arg;`,l("c")`*color: %arg;`,l("col")`*grid-column: %arg;`,l("cur")`*cursor: %arg;`,l("disp")`*display: %arg;`,l("fl.basis")`*flex-basis: %arg;`,l("fl.cross")`*align-items: %arg;`,l("fl.dir")`*flex-direction: %arg;`,l("fl.flow")`*flex-flow: %arg;`,l("fl.grow")`*flex-grow: %arg;`,l("fl.main")`*justify-content: %arg;`,l("fl.shrink")`*flex-shrink: %arg;`,l("fl.size")`*flex: %arg;`,l("fl.wr")`*flex-wrap: %arg;`,l("font")`*font-family: %arg;`,l("gap")`*gap: %arg;`,l("gap.col")`*column-gap: %arg;`,l("gap.row")`*row-gap: %arg;`,l("gr.areas")`*grid-template-areas: %arg;`,l("gr.cols")`*grid-template-columns: %arg;`,l("gr.cols.a")`*grid-auto-columns: %arg;`,l("gr.flow")`*grid-auto-flow: %arg;`,l("gr.rows")`*grid-template-rows: %arg;`,l("gr.rows.a")`*grid-auto-rows: %arg;`,l("h")`*height: %arg;`,l("h.max")`*max-height: %arg;`,l("h.min")`*min-height: %arg;`,l("inset")`*top: %arg; *left: %arg; *bottom: %arg; *right: %arg;`,l("inset.x")`*left: %arg; *right: %arg;`,l("inset.y")`*top: %arg; *bottom: %arg;`,l("m")`*margin: %arg;`,l("m.b")`*margin-bottom: %arg;`,l("m.l")`*margin-left: %arg;`,l("m.r")`*margin-right: %arg;`,l("m.t")`*margin-top: %arg;`,l("m.x")`*margin-left: %arg; *margin-right: %arg;`,l("m.y")`*margin-bottom: %arg; *margin-top: %arg;`,l("o")`*opacity: %arg;`,l("outln")`*outline: %arg;`,l("over")`*overflow: %arg;`,l("over.x")`*overflow-x: %arg;`,l("over.y")`*overflow-y: %arg;`,l("p")`*padding: %arg;`,l("p.b")`*padding-bottom: %arg;`,l("p.l")`*padding-left: %arg;`,l("p.r")`*padding-right: %arg;`,l("p.t")`*padding-top: %arg;`,l("p.x")`*padding-left: %arg; *padding-right: %arg;`,l("p.y")`*padding-top: %arg; *padding-bottom: %arg;`,l("pos")`*position: %arg;`,l("pos.abs")`*position: absolute;`,l("pos.fix")`*position: fixed;`,l("pos.rel")`*position: relative;`,l("pos.stick")`*position: sticky;`,l("r")`*border-radius: %arg;`,l("r.b")`*border-bottom-left-radius: %arg; *border-bottom-right-radius: %arg;`,l("r.bl")`*border-bottom-left-radius: %arg;`,l("r.br")`*border-bottom-right-radius: %arg;`,l("r.l")`*border-top-left-radius: %arg; *border-bottom-left-radius: %arg;`,l("r.r")`*border-top-right-radius: %arg; *border-bottom-right-radius: %arg;`,l("r.t")`*border-top-left-radius: %arg; *border-top-right-radius: %arg;`,l("r.tl")`*border-top-left-radius: %arg;`,l("r.tr")`*border-top-right-radius: %arg;`,l("row")`*grid-row: %arg;`,l("sel")`*user-select: %arg;`,l("self.cross")`*align-self: %arg;`,l("self.main")`*justify-self: %arg;`,l("sh.box")`*box-shadow: %arg;`,l("sh.text")`*text-shadow: %arg;`,l("t.a")`*text-align: %arg;`,l("t.br")`*word-break: %arg;`,l("t.c")`*color: %arg;`,l("t.deco")`*text-decoration: %arg;`,l("t.lh")`*line-height: %arg;`,l("t.over")`*text-overflow: %arg;`,l("t.st")`*font-style: %arg;`,l("t.sz")`*font-size: %arg;`,l("t.tf")`*text-transform: %arg;`,l("t.var")`*font-variant: %arg;`,l("t.wrap")`*word-wrap: %arg;`,l("t.ws")`*white-space: %arg;`,l("t.wt")`*font-weight: %arg;`,l("tf")`*transform: %arg;`,l("tf.o")`*transform-origin: %arg;`,l("tf.p")`*perspective: %arg;`,l("tr")`*transition: %arg;`,l("v.a")`*vertical-align: %arg;`,l("vis")`*visibility: %arg;`,l("w")`*width: %arg;`,l("w.max")`*max-width: %arg;`,l("w.min")`*min-width: %arg;`,l("x")`*left: %arg;`,l("-x")`*right: %arg;`,l("y")`*top: %arg;`,l("-y")`*bottom: %arg;`,l("z")`*z-index: %arg;`,l("fl.cn")`fl.cross: center; fl.main: center;`,l("fl.cn.cross")`fl.cross: center;`,l("fl.cn.main")`fl.main: center;`,l("flex")`disp: flex; fl.dir: %arg;`,l("grid")`disp: grid; gr.flow: %arg;`,l("hide")`disp: none;`,l("invis")`vis: hidden;`,l("sticky")`pos: sticky; y: 0px; z: +1;`,l("adorn")`disp: flex; fl.cn; p: 4px;`,l("pad.compact")`p: 0px 4px;`,l("variant.outline")`b.w: 1px;`,l("variant.fill")`@text-color: @alt-color; @fill-color: @core-color; @active: @alt-color;`,l("variant.lined")`b.w: 0px; b.b.w: @border-size; r.b: 0px;`,l("gr.cols-fit")`*grid-template-columns: repeat(auto-fit, minmax(%arg));`,l("gr.cols-fill")`*grid-template-columns: repeat(auto-fill, minmax(%arg));`,l("text.subtitle")`t.sz: @text-size-subtitle; flex; fl.main: center; p: 0px 8px;`,l("text.title")`t.sz: @text-size-title; flex; fl.main: center; p: 4px 8px;`,l("elevate")`sh.box: 0px 2px 3px @shadow-color;`,l("#animate")`
1
+ const e=Symbol("no match"),t=(t,r)=>{const o=r=>{const o=r.length;return()=>r===t.substr(N,o)?(N+=o,r):e},a=r=>()=>{const o=t.charAt(N);return!1!==r.test(o)?(N+=1,o):e};let s=null;const i=o("@"),n=o(":"),l=a(/[^;]/),c=o(";"),d=o("*"),p=a(/[a-z0-9_\-]/i),h=o("!"),u=a(/[^{]/),g=o("{"),f=o("}"),b=a(/[a-zA-Z0-9\.\-_#\^\$\/]/),m=o("#"),x=a(/[^;#]/),v=a(/[\s]/m),w=()=>{const t=N;let r=null,o=null;return(r=P())===e||(o=z())===e?(N=t,e):[r,o]},y=()=>{const r=N;let o=null,a=null;return(o=m())===e||(a=(()=>{const r=N,o=N;for(;x()!==e;);return N-o==0?e:t.slice(r,N)})())===e?(N=r,e):[o,a]},k=()=>{s="rules";let t=N,r=null;const o=[];let a=null;for(;(a=w())!==e;)o.push(a);if(r=o,P()===e)return N=t,e;return r.map((e=>e[1]))},z=()=>{let t=null;return(t=$())!==e||(t=A())!==e||(t=L())!==e||(t=E())!==e?t:e},$=()=>{s="rule$0";let t=N,r=null;if((r=S())===e)return N=t,e;return r},A=()=>{s="rule$1";let t=N,r=null;if((r=q())===e)return N=t,e;return r},L=()=>{s="rule$2";let t=N,r=null;if((r=C())===e)return N=t,e;return r},E=()=>{s="rule$3";let t=N,r=null;if((r=T())===e)return N=t,e;return r},S=()=>{s="variable";let r=N,o=null,a=null;if(i()===e)return N=r,e;if((o=M())===e)return N=r,e;if(n()===e)return N=r,e;if(P()===e)return N=r,e;if((a=(()=>{const r=N,o=N;for(;l()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;if(c()===e)return N=r,e;return((e,t)=>({type:"var",name:e,value:t}))(o,a)},q=()=>{s="css";let r=N,o=null,a=null;if(d()===e)return N=r,e;if((o=M())===e)return N=r,e;if(n()===e)return N=r,e;if(P()===e)return N=r,e;if((a=(()=>{const r=N,o=N;for(;l()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;if(c()===e)return N=r,e;return((e,t)=>({type:"css",name:e,value:t}))(o,a)},M=()=>{s="cssName";let r=N,o=null;if((o=(()=>{const r=N,o=N;for(;p()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;return o},C=()=>{s="subrule";let r=N,o=null,a=null;if(h()===e)return N=r,e;if(P()===e)return N=r,e;if((o=(()=>{const r=N,o=N;for(;u()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;if(g()===e)return N=r,e;if((a=k())===e)return N=r,e;if(f()===e)return N=r,e;var i;return i=a,{type:"alt",selector:o.trim(),rules:i}},T=()=>{s="macro";let r=N,o=null,a=null;if((o=(()=>{const r=N,o=N;for(;b()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;const i=(()=>{const t=N;let r=null,o=null,a=null;return(r=n())===e||(o=P())===e||(a=I())===e?(N=t,e):[r,o,a]})();if(a=i===e?null:i,c()===e)return N=r,e;return((e,t)=>({type:"macro",name:e,value:t?.[2]}))(o,a)},I=()=>{let t=null;return(t=V())!==e||(t=j())!==e?t:e},V=()=>{s="macroValue$0";let t=null;const r=[];let o=null;for(;(o=y())!==e;)r.push(o);if(0===r.length)return e;t=r;return(e=>{const t=e.map((e=>e[1].trim()));return t.arg=t.join(" "),t})(t)},j=()=>{s="macroValue$1";let r=N,o=null;if((o=(()=>{const r=N,o=N;for(;l()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;return(e=>{const t=[e.trim()];return t.arg=e,t})(o)},P=()=>{for(s="_";v()!==e;);};let N=0;const H=(()=>{s="$";let t=N,r=null;if((r=k())===e)return N=t,e;return r})();return N!==t.length?(console.log("last",s),console.log("@",N),console.log(t.slice(N-10,N+10)),new Error("End of input not found")):H},r=document.createElement("style");r.setAttribute("data-name","windstorm-generated"),r.innerHTML="@layer ws.custom ws.user ws.element;",document.head.append(r);const o=(e,...r)=>{const o=String.raw(e,...r);return a(t(o),{"&":[]},"&")},a=(e,t,r)=>{for(const o of e)i(o,t,r);return t},s=e=>e.replace(/@([a-zA-Z0-9\-_]+)/g,((e,t)=>`var(--${t})`)),i=(e,t,r)=>{if("var"===e.type)return void t[r].push(`--${e.name}: ${s(e.value)};`);if("css"===e.type)return void t[r].push(`${e.name}: ${s(e.value)};`);if("macro"===e.type){const o=n[e.name];if(void 0===o)return void console.warn(`no macro for "${e.name}"`);for(const[a,i]of Object.entries(o)){const o=a.replace("&",r);t[o]=t[o]??[],t[o].push(...i.map((t=>s(t.replace(/%(arg|\d+)/g,((t,r)=>e.value?.[r]??""))))))}return}const o=e.selector.replaceAll("&",r);t[o]=[...t[o]??[]],a(e.rules,t,o)},n={},l=e=>(t,...r)=>n[e]=o(t,...r),c=e=>Object.entries(e).reduce(((e,[t,r])=>{if(!0===t.startsWith("|")){const o=t.lastIndexOf("|"),a=[`@media (${t.slice(1,o)}) {`,`${`&${t.slice(o+1)}`} {`,...r,"}","}"].join("\n");return e.push(a),e}return e.push(`${t} {\n${r.join("\n")}\n}`),e}),[]),d=(e,t="ws.custom")=>(a,...s)=>{const i=o(a,...s),n=c(i).map((t=>t.replaceAll("&",e))),l=`@layer ${t} { ${n.join("\n")} }`;r.sheet.insertRule(l)};const p={attr:"ws-x",origin:"https://wind-cdn.axel669.net",...window.wsConfig,version:"1.0.0-beta.2",fontVersion:"2",iconVersion:"3.34.0"},h={},u=async(e,t)=>{const r=h[t],o=`ws-icon-${t}`;if(void 0!==r){if(await r.loaded,"loaded"!==r.status||null===e)return;return void e.style.setProperty("--icon-font",o)}const a=new FontFace(o,`url(${p.origin}/icon/${t}.woff?v${p.iconVersion})`);h[t]=a;try{await a.load()}catch(e){console.error(e)}document.fonts.add(a),u(e,t)},g=e=>{if(void 0===e.tagName)return;const t=e.dataset.icon??null;null!==t&&u(e,t)},f={childList(e){0!==e.addedNodes.length&&e.addedNodes.forEach((e=>{if(void 0===e.tagName)return;[e,...e.querySelectorAll("*")].forEach(g)}))},attributes(e){g(e.target)}};new MutationObserver((e=>e.forEach((e=>f[e.type](e))))).observe(document.body,{subtree:!0,attributes:!0,childList:!0,attributeFilter:["data-icon"]});const b=(...e)=>{for(const t of e)u(null,t)};l("appr")`*apperance: %arg; *-webkit-appearance: %arg;`,l("area")`*grid-area: %arg;`,l("b")`*border: %arg;`,l("b.b")`*border-bottom: %arg;`,l("b.b.c")`*border-bottom-color: %arg;`,l("b.b.s")`*border-bottom-style: %arg;`,l("b.b.w")`*border-bottom-width: %arg;`,l("b.c")`*border-color: %arg;`,l("b.l")`*border-left: %arg;`,l("b.l.c")`*border-left-color: %arg;`,l("b.l.s")`*border-left-style: %arg;`,l("b.l.w")`*border-left-width: %arg;`,l("b.r")`*border-right: %arg;`,l("b.r.c")`*border-right-color: %arg;`,l("b.r.s")`*border-right-style: %arg;`,l("b.r.w")`*border-right-width: %arg;`,l("b.s")`*border-style: %arg;`,l("b.t")`*border-top: %arg;`,l("b.t.c")`*border-top-color: %arg;`,l("b.t.s")`*border-top-style: %arg;`,l("b.t.w")`*border-top-width: %arg;`,l("b.w")`*border-width: %arg;`,l("b.x")`*border-left: %arg; *border-right: %arg;`,l("b.x.c")`*border-left-color: %arg; *border-right-color: %arg;`,l("b.x.s")`*border-left-style: %arg; *border-right-style: %arg;`,l("b.x.w")`*border-left-width: %arg; *border-right-width: %arg;`,l("b.y")`*border-top: %arg; *border-bottom: %arg;`,l("b.y.c")`*border-top-color: %arg; *border-bottom-color: %arg;`,l("b.y.s")`*border-top-style: %arg; *border-bottom-style: %arg;`,l("b.y.w")`*border-top-width: %arg; *border-bottom-width: %arg;`,l("bg")`*background: %arg;`,l("bg.att")`*background-attachment: %arg;`,l("bg.c")`*background-color: %arg;`,l("bg.img")`*background-image: %arg;`,l("bg.pos")`*background-position: %arg;`,l("bg.rep")`*background-repeat: %arg;`,l("bg.sz")`*background-size: %arg;`,l("c")`*color: %arg;`,l("col")`*grid-column: %arg;`,l("cur")`*cursor: %arg;`,l("disp")`*display: %arg;`,l("fl.basis")`*flex-basis: %arg;`,l("fl.cross")`*align-items: %arg;`,l("fl.dir")`*flex-direction: %arg;`,l("fl.flow")`*flex-flow: %arg;`,l("fl.grow")`*flex-grow: %arg;`,l("fl.main")`*justify-content: %arg;`,l("fl.shrink")`*flex-shrink: %arg;`,l("fl.size")`*flex: %arg;`,l("fl.wr")`*flex-wrap: %arg;`,l("font")`*font-family: %arg;`,l("gap")`*gap: %arg;`,l("gap.col")`*column-gap: %arg;`,l("gap.row")`*row-gap: %arg;`,l("gr.areas")`*grid-template-areas: %arg;`,l("gr.cols")`*grid-template-columns: %arg;`,l("gr.cols.a")`*grid-auto-columns: %arg;`,l("gr.flow")`*grid-auto-flow: %arg;`,l("gr.rows")`*grid-template-rows: %arg;`,l("gr.rows.a")`*grid-auto-rows: %arg;`,l("h")`*height: %arg;`,l("h.max")`*max-height: %arg;`,l("h.min")`*min-height: %arg;`,l("inset")`*top: %arg; *left: %arg; *bottom: %arg; *right: %arg;`,l("inset.x")`*left: %arg; *right: %arg;`,l("inset.y")`*top: %arg; *bottom: %arg;`,l("m")`*margin: %arg;`,l("m.b")`*margin-bottom: %arg;`,l("m.l")`*margin-left: %arg;`,l("m.r")`*margin-right: %arg;`,l("m.t")`*margin-top: %arg;`,l("m.x")`*margin-left: %arg; *margin-right: %arg;`,l("m.y")`*margin-bottom: %arg; *margin-top: %arg;`,l("o")`*opacity: %arg;`,l("outln")`*outline: %arg;`,l("over")`*overflow: %arg;`,l("over.x")`*overflow-x: %arg;`,l("over.y")`*overflow-y: %arg;`,l("p")`*padding: %arg;`,l("p.b")`*padding-bottom: %arg;`,l("p.l")`*padding-left: %arg;`,l("p.r")`*padding-right: %arg;`,l("p.t")`*padding-top: %arg;`,l("p.x")`*padding-left: %arg; *padding-right: %arg;`,l("p.y")`*padding-top: %arg; *padding-bottom: %arg;`,l("pos")`*position: %arg;`,l("pos.abs")`*position: absolute;`,l("pos.fix")`*position: fixed;`,l("pos.rel")`*position: relative;`,l("pos.stick")`*position: sticky;`,l("r")`*border-radius: %arg;`,l("r.b")`*border-bottom-left-radius: %arg; *border-bottom-right-radius: %arg;`,l("r.bl")`*border-bottom-left-radius: %arg;`,l("r.br")`*border-bottom-right-radius: %arg;`,l("r.l")`*border-top-left-radius: %arg; *border-bottom-left-radius: %arg;`,l("r.r")`*border-top-right-radius: %arg; *border-bottom-right-radius: %arg;`,l("r.t")`*border-top-left-radius: %arg; *border-top-right-radius: %arg;`,l("r.tl")`*border-top-left-radius: %arg;`,l("r.tr")`*border-top-right-radius: %arg;`,l("row")`*grid-row: %arg;`,l("sel")`*user-select: %arg;`,l("self.cross")`*align-self: %arg;`,l("self.main")`*justify-self: %arg;`,l("sh.box")`*box-shadow: %arg;`,l("sh.text")`*text-shadow: %arg;`,l("t.a")`*text-align: %arg;`,l("t.br")`*word-break: %arg;`,l("t.c")`*color: %arg;`,l("t.deco")`*text-decoration: %arg;`,l("t.lh")`*line-height: %arg;`,l("t.over")`*text-overflow: %arg;`,l("t.st")`*font-style: %arg;`,l("t.sz")`*font-size: %arg;`,l("t.tf")`*text-transform: %arg;`,l("t.var")`*font-variant: %arg;`,l("t.wrap")`*word-wrap: %arg;`,l("t.ws")`*white-space: %arg;`,l("t.wt")`*font-weight: %arg;`,l("tf")`*transform: %arg;`,l("tf.o")`*transform-origin: %arg;`,l("tf.p")`*perspective: %arg;`,l("tr")`*transition: %arg;`,l("v.a")`*vertical-align: %arg;`,l("vis")`*visibility: %arg;`,l("w")`*width: %arg;`,l("w.max")`*max-width: %arg;`,l("w.min")`*min-width: %arg;`,l("x")`*left: %arg;`,l("-x")`*right: %arg;`,l("y")`*top: %arg;`,l("-y")`*bottom: %arg;`,l("z")`*z-index: %arg;`,l("fl.cn")`fl.cross: center; fl.main: center;`,l("fl.cn.cross")`fl.cross: center;`,l("fl.cn.main")`fl.main: center;`,l("flex")`disp: flex; fl.dir: %arg;`,l("grid")`disp: grid; gr.flow: %arg;`,l("hide")`disp: none;`,l("invis")`vis: hidden;`,l("sticky")`pos: sticky; y: 0px; z: +1;`,l("adorn")`disp: flex; fl.cn; p: 4px;`,l("pad.compact")`p: 0px 4px;`,l("variant.outline")`b.w: 1px;`,l("variant.fill")`@text-color: @alt-color; @fill-color: @core-color; @active: @alt-color;`,l("variant.lined")`b.w: 0px; b.b.w: @border-size; r.b: 0px;`,l("gr.cols-fit")`*grid-template-columns: repeat(auto-fit, minmax(%arg));`,l("gr.cols-fill")`*grid-template-columns: repeat(auto-fill, minmax(%arg));`,l("text.subtitle")`t.sz: @text-size-subtitle; flex; fl.main: center; p: 0px 8px;`,l("text.title")`t.sz: @text-size-title; flex; fl.main: center; p: 4px 8px;`,l("elevate")`sh.box: 0px 2px 3px @shadow-color;`,l("elevated")`sh.box: 0px 2px calc(%arg * 3px) @shadow-color;`,l("#animate")`
2
2
  @modal-transition: visibility @anim-time linear;
3
3
  ! & ws-dialog {
4
4
  o: 0;
@@ -15,1129 +15,7 @@ const e=Symbol("no match"),t=(t,r)=>{const o=r=>{const o=r.length;return()=>r===
15
15
  ! & ws-modal[open] > ws-drawer {
16
16
  tf: translateX(0%);
17
17
  }
18
- `;const m=e=>{let t=5381;for(let r=0;r<e.length;r+=1)t=33*t^e.charCodeAt(r);return t.toString(36)},x={},v=e=>Object.entries(e).reduce(((e,t)=>{const[r,o]=t;return null==o||!1===o?e:!0===o?(e.push(`${r};`),e):"object"==typeof o?(e.push(`${r} { ${v(o)} }`),e):(e.push(`${r}: ${o};`),e)}),[]).join(" "),w=(e,...t)=>{const r=m(`${Date.now()}:${Math.random().toString(16)}`);return l(r)(e,...t)},y=p.version,k=Math.ceil(screen.height*devicePixelRatio*10)%10>=5;l("#theme.base")`
19
- font: @font;
20
-
21
- @sub-pixel-offset: ${k?1:0}px;
22
- @z-info: 5;
23
- @z-cover: 25;
24
- @z-notif: 50;
25
- @z-layer: 100;
26
-
27
- @base-radius: 4px;
28
- @anim-time: 250ms;
29
- @short-anim-time: 150ms;
30
-
31
- @text-size-normal: 15px;
32
- @text-size-title: calc(@text-size-normal * 2);
33
- @text-size-header: calc(@text-size-normal * 1.5);
34
- @text-size-subtitle: calc(@text-size-normal * 0.9);
35
- @text-size-info: calc(@text-size-normal * 0.75);
36
-
37
- @color: @mono;
38
-
39
- @page-text-color: hsl(@color, @layer-text);
40
- bg.c: hsl(@color, @layer-bg);
41
- t.c: @page-text-color;
42
- t.sz: @text-size-normal;
43
- `,l("#theme.tron")`
44
- #theme.base;
45
-
46
- @font: Tektur;
47
-
48
- @mono: 0, 0%;
49
- @primary: 184, 80%;
50
- @accent: 160, 80%;
51
- @info: 208, 80%;
52
- @success: 130, 80%;
53
- @warning: 58, 80%;
54
- @error: 4, 80%;
55
-
56
- @layer-bg: 10%;
57
- @layer-surface: 5%;
58
- @layer-element: 65%;
59
- @layer-container: 10%;
60
- @layer-border: 25%;
61
- @layer-text: 95%;
62
- @layer-fill: 5%;
63
-
64
- @shadow-color: hsla(0, 0%, 100%, 0.25);
65
- @modal-color: hsla(0, 0%, 0%, 0.25);
66
-
67
- *color-scheme: dark;
68
- `,l("#theme.dark")`
69
- #theme.base;
70
- @font: Roboto;
71
-
72
- @mono: 0, 0%;
73
- @primary: 184, 80%;
74
- @accent: 160, 80%;
75
- @info: 208, 80%;
76
- @success: 130, 80%;
77
- @warning: 58, 80%;
78
- @error: 4, 80%;
79
-
80
- @layer-bg: 20%;
81
- @layer-surface: 10%;
82
- @layer-element: 50%;
83
- @layer-container: 15%;
84
- @layer-border: 30%;
85
- @layer-text: 90%;
86
- @layer-fill: 10%;
87
-
88
- @shadow-color: hsla(0, 0%, 100%, 0.25);
89
- @modal-color: hsla(0, 0%, 0%, 0.25);
90
-
91
- *color-scheme: dark;
92
- `,l("#theme.light")`
93
- #theme.base;
94
- @font: Roboto;
95
-
96
- @mono: 0, 0%;
97
- @primary: 184, 70%;
98
- @accent: 160, 85%;
99
- @info: 208, 85%;
100
- @success: 130, 90%;
101
- @warning: 58, 85%;
102
- @error: 4, 80%;
103
-
104
- @layer-bg: 85%;
105
- @layer-surface: 95%;
106
- @layer-element: 37.5%;
107
- @layer-container: 90%;
108
- @layer-border: 80%;
109
- @layer-text: 10%;
110
- @layer-fill: 95%;
111
-
112
- @shadow-color: hsla(0, 0%, 20%, 0.25);
113
- @modal-color: hsla(0, 0%, 0%, 0.25);
114
- `;var z=(e,...t)=>{const r=String.raw(e,...t),o=document.createElement("template");return o.innerHTML=r,()=>o.content.cloneNode(!0)};d("ws-circle-spinner, ws-hexagon-spinner")`
115
- @size: 100px;
116
-
117
- w: @size;
118
- h: @size;
119
- disp: inline-block;
120
- `;const $=z`
121
- <style>
122
- :host {
123
- --color: var(--primary);
124
- --core-color: hsl(var(--color), var(--layer-element));
125
- --alt-color: hsl(var(--color), var(--layer-border));
126
- --size: 100px;
127
- display: inline;
128
- }
129
- @keyframes spin {
130
- from {
131
- transform: rotate(0deg);
132
- }
133
- to {
134
- transform: rotate(360deg);
135
- }
136
- }
137
- circle {
138
- animation-name: spin;
139
- animation-iteration-count: infinite;
140
- animation-timing-function: linear;
141
- transform-origin: 50% 50%;
142
- stroke: var(--core-color);
143
- }
144
- circle.mid {
145
- stroke: var(--alt-color);
146
- }
147
- circle:nth-child(1) {
148
- animation-duration: 4s;
149
- }
150
- circle:nth-child(2) {
151
- animation-duration: 3s;
152
- animation-direction: reverse;
153
- }
154
- circle:nth-child(3) {
155
- animation-duration: 2s;
156
- }
157
-
158
- svg {
159
- display: inline-block;
160
- width: var(--size);
161
- height: var(--size);
162
- }
163
- </style>
164
-
165
- <svg viewBox="0 0 100 100">
166
- <circle 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>
167
- <circle class="mid" 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>
168
- <circle 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"></circle>
169
- </svg>
170
- `;customElements.define("ws-circle-spinner",class extends HTMLElement{constructor(){super();this.attachShadow({mode:"closed"}).appendChild($())}});const A=z`
171
- <style>
172
- :host {
173
- --color: var(--primary);
174
- --core-color: hsl(var(--color), var(--layer-element));
175
- --alt-color: hsl(var(--color), var(--layer-border));
176
- --size: 100px;
177
- display: inline;
178
- }
179
- @keyframes spin {
180
- from {
181
- transform: rotateY(0deg);
182
- }
183
- to {
184
- transform: rotateY(360deg);
185
- }
186
- }
187
- path {
188
- animation-name: spin;
189
- animation-iteration-count: infinite;
190
- animation-timing-function: linear;
191
- transform-origin: 50% 50%;
192
- stroke: var(--core-color);
193
- }
194
- path.mid {
195
- stroke: var(--alt-color);
196
- }
197
- path:nth-child(1) {
198
- animation-duration: 3s;
199
- }
200
- path:nth-child(2) {
201
- animation-duration: 2s;
202
- animation-direction: reverse;
203
- }
204
- path:nth-child(3) {
205
- animation-duration: 1s;
206
- }
207
-
208
- svg {
209
- display: inline-block;
210
- width: var(--size);
211
- height: var(--size);
212
- }
213
- </style>
214
-
215
- <svg viewBox="0 0 100 100">
216
- <path stroke-width="4" fill="none" d="M91.57 26v48L50 98 8.43 74V26L50 2l41.57 24Z"></path>
217
- <path stroke-width="4" class="mid" fill="none" d="M81.177 32v36L50 86 18.823 68V32L50 14l31.177 18Z"></path>
218
- <path stroke-width="4" fill="none" d="M70.785 38v24L50 74 29.215 62V38L50 26l20.785 12Z"></path>
219
- </svg>
220
- `;customElements.define("ws-hexagon-spinner",class extends HTMLElement{constructor(){super();this.attachShadow({mode:"closed"}).appendChild(A())}});var E=(e,t)=>`\n @core: ${e};\n @alt: ${t};\n @core-color: hsl(@color, @core);\n @alt-color: hsl(@color, @alt);\n\n @fill: var(--fill-color, transparent);\n @text: var(--text-color, @core-color);\n @active: @text;\n`;d("ws-avatar")`
221
- @color: @mono;
222
- @size: 36px;
223
-
224
- ${E("@layer-element","@layer-fill")}
225
-
226
- disp: inline-flex;
227
- over: hidden;
228
- r: 500px;
229
- fl.cross: center;
230
- fl.main: center;
231
- w: @size;
232
- h: @size;
233
- bg.c: @fill;
234
- t.c: @text;
235
- v.a: text-bottom;
236
-
237
- ! & > img {
238
- w: 100%;
239
- }
240
- ! & > object {
241
- w: 100%;
242
- h: 100%;
243
- disp: flex;
244
- fl.cross: center;
245
- fl.main: center;
246
- }
247
- `,d("ws-badge")`
248
- @color: @primary;
249
-
250
- ${E("@layer-element","@layer-fill")}
251
-
252
- pos: relative;
253
- disp: inline-grid;
254
- over: visible;
255
-
256
- ! &::after {
257
- pos: absolute;
258
- *content: attr(ws-text);
259
- -x: -10px;
260
- y: 0px;
261
- tf: translateY(-50%);
262
- bg.c: @core-color;
263
- *pointer-events: none;
264
- r: 20px;
265
- p: 4px;
266
- w.min: 20px;
267
- h: 20px;
268
- *box-sizing: border-box;
269
- t.a: center;
270
- t.sz: @text-size-subtitle;
271
- t.c: @alt-color;
272
- t.lh: 14px;
273
- z: @z-info;
274
- t.wt: 600;
275
- }
276
- `;var L='\n over: hidden;\n pos: relative;\n cur: pointer;\n\n ! &::after {\n *content: "";\n pos: absolute;\n y: 0px;\n x: 0px;\n -y: 0px;\n -x: 0px;\n *pointer-events: none;\n o: 0;\n bg.c: @active;\n tr: opacity @anim-time linear;\n }\n ! &:where(:not(:disabled)):active::after {\n tr: none;\n o: 0.3;\n }\n',S='\n over: hidden;\n pos: relative;\n\n ! |pointer: fine| {\n ! &::before {\n *content: "";\n pos: absolute;\n y: 0px;\n x: 0px;\n -y: 0px;\n -x: 0px;\n *pointer-events: none;\n o: 0;\n bg.c: @active;\n }\n ! &:where(:not(:disabled)):hover::before {\n tr: none;\n o: 0.1;\n }\n }\n';d(":where(button[data-ws], a[data-ws][button], label[data-ws][button])")`
277
- @color: @primary;
278
-
279
- ${E("@layer-element","@layer-fill")}
280
-
281
- pos: relative;
282
-
283
- b: 0px solid @core-color;
284
- font: @font;
285
-
286
- t.c: @text;
287
- bg.c: @fill;
288
- r: @base-radius;
289
- cur: pointer;
290
- p: 8px 16px;
291
- over: hidden;
292
- *user-select: none;
293
- disp: inline-flex;
294
- fl.cross: center;
295
- fl.main: center;
296
- t.deco: none;
297
- t.wt: 500;
298
-
299
- ! &:disabled {
300
- cur: default;
301
- *filter: saturate(30%) brightness(0.7);
302
- }
303
-
304
- ${S}
305
- ${L}
306
- `,d("ws-chip")`
307
- @color: @mono;
308
-
309
- ${E("@layer-element","@layer-fill")}
310
-
311
- disp: inline-flex;
312
- fl.cross: center;
313
- fl.main: center;
314
- r: 100px;
315
- p: 4px 12px;
316
- *user-select: none;
317
- v.a: text-bottom;
318
- t.c: @text-color;
319
- bg: @fill-color;
320
- b: 1px solid @core-color;
321
-
322
- ! &[clickable] {
323
- cur: pointer;
324
- ${L}
325
- }
326
- `,d("label[control][data-ws]")`
327
- @color: @primary;
328
- @active: @mono;
329
-
330
- pos: relative;
331
- disp: inline-grid;
332
- gr.areas: "label label label" "start control end" "extra extra extra";
333
- gr.rows: minmax(0px, min-content) auto minmax(0px, min-content);
334
- gr.cols: minmax(0px, min-content) auto minmax(0px, min-content);
335
- *user-select: none;
336
- over: hidden;
337
- b: 0px solid hsl(@color, @layer-border);
338
- bg.c: hsl(@active, @layer-container);
339
- r: @base-radius;
340
-
341
- ! &:focus-within {
342
- @active: @color;
343
- }
344
-
345
- ! &:has(:not(button):disabled) {
346
- *filter: saturate(50%) brightness(0.7);
347
- }
348
-
349
- ! & > :is(input, select, ws-select, textarea) {
350
- area: control;
351
- b.w: 0px;
352
- @color: inherit;
353
- ! &:focus {
354
- outln: none;
355
- }
356
- }
357
-
358
- ! & > :where(input, textarea) {
359
- t.c: hsl(@mono, @layer-text);
360
- font: @font;
361
- h.min: 28px;
362
- w: 100%;
363
- h: 100%;
364
- p: 4px;
365
- bg.c: transparent;
366
- w.min: 16px;
367
- }
368
-
369
- ! & > :where(input[type="file"]) {
370
- pos: relative;
371
- p: 0px;
372
-
373
- ! &::file-selector-button {
374
- font: @font;
375
- h: 100%;
376
- m: 0px;
377
- m.r: 4px;
378
- p: 4px;
379
- t.c: hsl(@color, @layer-element);
380
- bg.c: transparent;
381
- b.w: 0px;
382
- t.deco: underline;
383
- }
384
- }
385
-
386
- ! & > [label-text] {
387
- area: label;
388
- p: 4px;
389
- disp: flex;
390
- fl.dir: column;
391
- fl.cross: start;
392
- t.c: hsl(@color, @layer-element);
393
- t.ws: nowrap;
394
- t.sz: @text-size-normal;
395
- }
396
- `,f("caret-right-filled"),d(":where(details[data-ws])")`
397
- @color: @primary;
398
- @padding: 8px;
399
-
400
- ${E("@layer-element","@layer-fill")}
401
-
402
- b: 0px solid @core-color;
403
- p: 0px @padding;
404
- r: 4px;
405
- over: hidden;
406
-
407
- ! &:open {
408
- p.b: @padding;
409
- }
410
-
411
- ! & > summary {
412
- t.c: @core-color;
413
- pos: relative;
414
- p: 4px;
415
- p.l: 24px;
416
- m.x: calc(-1 * @padding);
417
- cur: pointer;
418
- *user-select: none;
419
-
420
- ! &::before {
421
- pos: absolute;
422
- x: 0px;
423
- y: 50%;
424
- -y: 0px;
425
- w: 1em;
426
- disp: flex;
427
- fl.cross: center;
428
- fl.main: center;
429
- font: ws-icon-caret-right-filled;
430
- *speak: none;
431
- t.st: normal;
432
- t.wt: 400;
433
- t.var: normal;
434
- t.tf: none;
435
- *content: "caret-right-filled";
436
- tf: translateY(-50%);
437
- tr: transform 100ms linear;
438
- w: 24px;
439
- h: 24px;
440
- t.lh: 24px;
441
- t.sz: 18px;
442
- }
443
-
444
- ! &::marker, &::-webkit-details-marker {
445
- *content: "";
446
- disp: none;
447
- }
448
- }
449
- ! &:open > summary::before {
450
- tf: translateY(-50%) rotate(90deg);
451
- }
452
- `,d("ws-dialog")`
453
- pos: absolute;
454
- x: 50%;
455
- y: 50%;
456
- tf: translate(-50%, -50%);
457
- `,d("ws-drawer")`
458
- pos: absolute;
459
- x: 0px;
460
- y: 0px;
461
- -y: 0px;
462
- disp: grid;
463
- `,d("ws-flex")`
464
- flex: column;
465
- gap: 8px;
466
- p: 4px;
467
- over: hidden;
468
-
469
- ! & > * {
470
- fl.shrink: 0;
471
- }
472
- `,d("ws-grid")`
473
- disp: grid;
474
- over: hidden;
475
- gap: 8px;
476
- p: 4px;
477
- gr.rows.a: min-content;
478
- `,d("ws-icon")`
479
- disp: var(--icon-font, none);
480
- t.lh: 1;
481
- ! &::before {
482
- disp: inline-block;
483
- font: @icon-font;
484
- *-webkit-font-smoothing: antialiased;
485
- *-moz-osx-font-smoothing: grayscale;
486
- *content: attr(data-icon);
487
- m.t: 2px;
488
- }
489
- `,d("a[data-ws]:not([button])")`
490
- @color: @primary;
491
-
492
- t.c: hsl(@color, @layer-element);
493
-
494
- ! &:visited, &:hover {
495
- t.c: hsl(@color, @layer-element);
496
- }
497
-
498
- ! &[disabled] {
499
- *pointer-events: none;
500
- *filter: saturation(30%) brightness(0.7);
501
- }
502
- `;const q=z`
503
- <style>
504
- :host {
505
- position: fixed;
506
- top: 0px;
507
- left: 0px;
508
- width: 100vw;
509
- height: 100vh;
510
- background-color: var(--modal-color);
511
- z-index: var(--z-cover);
512
- transition: var(--modal-transition, none);
513
- }
514
- ws-modal-overlay {
515
- position: absolute;
516
- inset: 0px;
517
- }
518
- ws-modal-overlay:focus {
519
- outline: none;
520
- }
521
- :host(:not([open])) {
522
- visibility: hidden;
523
- }
524
- :host([clear]) {
525
- background-color: transparent;
526
- }
527
- </style>
528
-
529
- <ws-modal-overlay>
530
- </ws-modal-overlay>
531
- <slot></slot>
532
- `;customElements.define("ws-modal",class extends HTMLElement{#e=null;constructor(){super(),this.#e=this.attachShadow({mode:"closed",delegatesFocus:!0}),this.#e.append(q())}connectedCallback(){window.addEventListener("keydown",(e=>{!0!==(!1===this.open||"Escape"!==e.key||!0===this.persistent)&&(this.hide(),this.dispatchEvent(new Event("close")))}));this.#e.querySelector("ws-modal-overlay").addEventListener("click",(e=>{!0!==this.persistent&&(this.hide(),this.dispatchEvent(new Event("close")))}))}get open(){return this.hasAttribute("open")}set open(e){!1!==e?this.setAttribute("open",""):this.removeAttribute("open")}get persistent(){return this.hasAttribute("persistent")}set persistent(e){!1!==e?this.setAttribute("persistent",""):this.removeAttribute("persistent")}show(){this.open=!0}hide(){this.open=!1}}),d("ws-paper")`
533
- @color: @mono;
534
-
535
- ${E("@layer-surface","@layer-border")}
536
-
537
- disp: grid;
538
- r: @base-radius;
539
- over: hidden;
540
- gr.cols: 1fr;
541
- gr.rows: min-content auto min-content;
542
- gr.areas: "header" "content" "footer";
543
- bg.c: @core-color;
544
- b.c: @alt-color;
545
-
546
- ! & > :where(*) {
547
- area: content;
548
- }
549
-
550
- ! &::before {
551
- *content: "";
552
- area: header;
553
- }
554
- ! &::after {
555
- *content: "";
556
- area: footer;
557
- }
558
- `;const M=z`
559
- <slot></slot>
560
-
561
- <ws-modal>
562
- <ws-popover-position>
563
- <slot name="popover"></slot>
564
- </ws-popover-position>
565
- </ws-modal>
566
- `;customElements.define("ws-popover",class extends HTMLElement{static observedAttributes=["open","persistent"];#e=null;#t=null;constructor(){super(),this.#e=this.attachShadow({mode:"closed",delegatesFocus:!0}),this.#e.append(M()),this.#t=this.#e.querySelector("ws-modal")}connectedCallback(){this.#t.addEventListener("close",(()=>{this.hide(),this.dispatchEvent(new Event("close"))})),!1!==this.open&&(this.#t.open=this.open,this.setVars())}attributeChangedCallback(e,t,r){null!==r?(this.#t[e]=!0,"open"===e&&this.setVars()):this.#t[e]=!1}setVars(){const e=(this.sizeTarget??this).getBoundingClientRect();this.style.setProperty("--x",`${e.x}px`),this.style.setProperty("--y",`${e.y}px`),this.style.setProperty("--w",`${e.width}px`),this.style.setProperty("--h",`${e.height}px`)}get open(){return this.hasAttribute("open")}set open(e){this.#t.open=e,!1!==e?this.setAttribute("open",""):this.removeAttribute("open")}get persistent(){return this.hasAttribute("persistent")}set persistent(e){this.#t.persistent=e,!1!==e?this.setAttribute("persistent",""):this.removeAttribute("persistent")}show(){this.open=!0,this.focus()}hide(){this.open=!1}});const C=z`
567
- <style>
568
- @keyframes busy-load {
569
- from {
570
- transform: translateX(-100%);
571
- }
572
- to {
573
- transform: translateX(400%);
574
- }
575
- }
576
- :host {
577
- display: block;
578
- height: 8px;
579
- border-radius: var(--base-radius);
580
- background-color: hsl(var(--mono), var(--layer-border));
581
- position: relative;
582
- overflow: hidden;
583
- --color: var(--mono);
584
- }
585
- div::before, div::after {
586
- content: "";
587
- position: absolute;
588
- top: 0px;
589
- left: 0px;
590
- height: 100%;
591
- --range: calc(var(--max, 1) - var(--min, 0));
592
- --bar-width: calc(100% * var(--value, 0) / var(--range));
593
- --buffer-width: calc(100% * var(--buffer, 0) / var(--range));
594
- }
595
- div::before {
596
- background-color: hsl(var(--color), var(--layer-element));
597
- }
598
- div::after {
599
- opacity: 0.3;
600
- background-color: hsl(var(--color), var(--layer-element));
601
- }
602
- :host(:not([busy])) div::before {
603
- width: var(--bar-width);
604
- }
605
- :host(:not([busy])) div::after {
606
- width: var(--buffer-width);
607
- }
608
- :host([busy]) div::before {
609
- width: 25%;
610
- animation-name: busy-load;
611
- animation-iteration-count: infinite;
612
- animation-duration: 2s;
613
- }
614
- </style>
615
-
616
- <div></div>
617
- `;customElements.define("ws-progress",class extends HTMLElement{static observedAttributes=["min","max","value","buffer"];#r=null;constructor(){super();const e=this.attachShadow({mode:"closed"});e.append(C()),this.#r=e.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 this.hasAttribute("busy")}set value(e){!1===e&&this.removeAttribute("value"),this.setAttribute("value",e?.toString()??"")}set buffer(e){!1===e&&this.removeAttribute("buffer"),this.setAttribute("buffer",e?.toString()??"")}set min(e){!1===e&&this.removeAttribute("min"),this.setAttribute("min",e?.toString()??"")}set max(e){!1===e&&this.removeAttribute("max"),this.setAttribute("max",e?.toString()??"")}set busy(e){!1===e&&this.removeAttribute("busy"),this.setAttribute("busy",e)}#o(e,t){this.#r.style.setProperty(`--${e}`,this.getAttribute(e)||t)}connectedCallback(){this.#o("value","0"),this.#o("buffer","0"),this.#o("min","0"),this.#o("max","1")}attributeChangedCallback(e,t,r){this.#o(e,r)}}),d("ws-screen")`
618
- @screen-width: min(720px, 100%);
619
- @pad-x: auto;
620
- @pad-y: auto;
621
- @pad-left: var(--pad-x, auto);
622
- @pad-right: var(--pad-x, auto);
623
- @pad-top: var(--pad-y, auto);
624
- @pad-bottom: var(--pad-y, auto);
625
-
626
- disp: grid;
627
- h: round(down, calc(100% - @sub-pixel-offset), 1px);
628
- w: calc(100%);
629
- over: hidden;
630
- pos: absolute;
631
- y: 0px;
632
- x: 0px;
633
- gr.cols: @pad-left @screen-width @pad-right;
634
- gr.rows: @pad-top 1fr @pad-bottom;
635
- gr.areas:
636
- "tl t tr"
637
- "l content r"
638
- "bl b br"
639
- ;
640
-
641
- ! & > :where(*) {
642
- area: content;
643
- }
644
- `;const V="caret-down-filled";f(V),d("ws-option")`
645
- ${E("@layer-element","@layer-fill")}
646
-
647
- disp: block;
648
- p: 8px;
649
- *pointer-events: auto;
650
- t.c: @text-color-normal;
651
- w.min: fit-content;
652
-
653
- ! &[selected] {
654
- bg.c: @core-color;
655
- t.c: @alt-color;
656
- }
657
-
658
- ! & * {
659
- *pointer-events: none;
660
- }
661
-
662
- ${S}
663
- ${L}
664
- `,d("ws-optgroup")`
665
- grid;
666
- gr.cols: 16px 1fr;
667
- *pointer-events: none;
668
-
669
- ! &::before {
670
- *content: attr(label);
671
- disp: block;
672
- p: 8px;
673
- col: 1 / -1;
674
- bg.c: hsl(@color, @layer-container);
675
- }
676
-
677
- ! & > * {
678
- col: 2;
679
- }
680
- `;const T=z`
681
- <style>
682
- :host {
683
- --color: var(--mono);
684
- --modal-color: transparent;
685
- --max-height: 250px;
686
- --core-color: hsl(var(--color), var(--layer-border));
687
- --alt-color: hsl(var(--color), var(--layer-surface));
688
- display: inline-grid;
689
- grid-template-rows: 1fr 0px;
690
- user-select: none;
691
- cursor: default;
692
- position: relative;
693
- border: 1px solid var(--core-color);
694
- border-radius: var(--base-radius);
695
- padding: 4px;
696
- }
697
-
698
- slot[name=options] {
699
- display: block;
700
- overflow: visible;
701
- }
702
- ws-options {
703
- box-sizing: border-box;
704
- border: 1px solid var(--core-color);
705
- border-radius: var(--base-radius);
706
- color: hsl(var(--mono), var(--layer-text));
707
- display: grid;
708
- position: absolute;
709
- max-height: var(--max-height);
710
- overflow: auto;
711
- background-color: var(--alt-color);
712
- grid-template-columns: 1fr;
713
- border-radius: var(--base-radius);
714
- box-shadow: 0px 2px 4px var(--shadow-color);
715
- opacity: 0;
716
- transform: translateY(10px);
717
- visibility: none;
718
- transition:
719
- opacity var(--anim-time) ease-out,
720
- transform var(--anim-time) ease-out,
721
- visibility var(--anim-time) ease-out
722
- ;
723
-
724
- --sign: sign(var(--y) - 100vh + var(--opt-h));
725
- --pos: calc(
726
- var(--y)
727
- - calc(
728
- max(var(--sign), 0)* (var(--opt-h) - var(--h))
729
- )
730
- );
731
- top: var(--pos);
732
- left: var(--x);
733
- width: var(--w);
734
- transform-origin: top center;
735
- }
736
- :host([open]) ws-options {
737
- transform: translateY(0);
738
- opacity: 1;
739
- visibility: visible;
740
- }
741
-
742
- value-display {
743
- display: grid;
744
- user-select: none;
745
- grid-template-columns: 1fr min-content;
746
- height: 100%;
747
- }
748
- value-display:focus {
749
- outline: none;
750
- }
751
- ws-sel-caret {
752
- display: flex;
753
- align-items: center;
754
- justify-content: center;
755
- padding: 4px;
756
- padding-right: 0px;
757
- width: 24px;
758
- }
759
- ws-sel-caret::before {
760
- display: block;
761
- font-family: ws-icon-${V};
762
- content: attr(data-icon);
763
- }
764
- slot[name="selected"] {
765
- display: none;
766
- }
767
- slot[name="display"] {
768
- display: flex;
769
- align-items: center;
770
- }
771
- :host(:focus:not(:disabled)) {
772
- outline-style: auto;
773
- outline-width: 1px;
774
- }
775
-
776
- ws-popover {
777
- --anim-time: unset;
778
- }
779
-
780
- :host(:disabled) {
781
- filter: saturate(50%) brightness(0.8);
782
- }
783
- </style>
784
-
785
- <value-display tabindex="0">
786
- <slot name="selected">
787
- <ws-selected>No Selection</ws-selected>
788
- </slot>
789
- <slot name="display"></slot>
790
- <ws-sel-caret data-icon="${V}"></ws-sel-caret>
791
- </value-display>
792
- <ws-popover>
793
- <slot slot="popover" name="options">
794
- <ws-options>
795
- <slot></slot>
796
- </ws-options>
797
- </slot>
798
- </ws-popover>
799
- `,I="ws-option";customElements.define("ws-select",class extends HTMLElement{static formAssociated=!0;#a=null;#n=-1;#s=null;#i=null;#l=null;#c=null;#e=null;#d=null;#p(){return[...this.querySelectorAll(I)]}#h(e){const t=Array.from(e,(e=>[...e.addedNodes])).flat();if(!1===t.some((e=>e.tagName?.toLowerCase()===I)))return;const r=t.findLast((e=>e.tagName?.toLowerCase()===I&&!0===e.hasAttribute("selected")))??this.#s,o=this.#p();for(const e of o)e.removeAttribute("selected");this.selectedIndex=o.indexOf(r),this.updatePreview()}constructor(){super(),this.#e=this.attachShadow({mode:"closed",delegatesFocus:!0}),this.#e.append(T()),this.#c=this.#e.querySelector("slot[name=selected]"),this.#l=this.#e.querySelector("ws-popover"),this.#d=this.#e.querySelector("value-display"),this.#l.sizeTarget=this,this.removeAttribute("open"),this.display=document.createElement("ws-display"),this.display.slot="display"}connectedCallback(){this.insertBefore(this.display,this.firstChild),this.updatePreview(),this.tabIndex=this.getAttribute("tabindex")??"0";const e=new MutationObserver(this.#h.bind(this));e.observe(this,{childList:!0,subtree:!0}),this.#i=e,this.role="combobox",this.addEventListener("click",(()=>{this.open(),this.#d.focus()}),{passive:!0}),this.#l.addEventListener("close",(()=>this.close())),this.#l.addEventListener("pointerdown",(e=>e.preventDefault())),this.#l.addEventListener("click",(e=>{e.stopPropagation(),e.preventDefault()})),this.#e.querySelector("slot[name='options']").addEventListener("pointerdown",(e=>e.preventDefault())),this.#e.querySelector("slot[name='options']").addEventListener("click",(e=>{e.stopPropagation(),e.preventDefault();const t=e.target.tagName?.toLowerCase();"ws-option"===t&&(this.selectedIndex=this.#p().indexOf(e.target),this.close(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0})))}))}disconnectedCallback(){this.#i.disconnect()}get value(){return this.#a}set value(e){if(this.#a=e,null===e)return void(this.selectedIndex=-1);const t=this.#p(),r=t.find((t=>t.value===e||t.getAttribute("value")===e));this.selectedIndex=t.indexOf(r)}get selectedIndex(){return this.#n}set selectedIndex(e){this.#s?.removeAttribute("selected");const t=this.#p(),r=Math.min(e,t.length);this.#s=t[r]??null,this.#n=r,this.#s?.setAttribute("selected",""),this.#a=this.#s?.value??this.#s?.getAttribute("value")??this.#a,this.updatePreview()}updatePreview(){const e=this.querySelector("[slot=selected]")??this.#c;this.display.innerHTML=e.innerHTML,this.display.querySelector("ws-selected").innerHTML=this.#s?.getAttribute("preview")??this.#s?.innerHTML??this.getAttribute("blank")??"No Selection"}toggle(){null!==this.getAttribute("open")?this.close():this.open()}open(){this.setAttribute("open","");const e=this.querySelector("ws-options")??this.#e.querySelector("ws-options"),t=e.getBoundingClientRect();e.style.setProperty("--opt-h",`${t.height}px`),e.style.setProperty("--opt-w",`${t.width}px`),this.#l.show(),e.scrollTop=0,this.#s?.scrollIntoView()}close(){this.removeAttribute("open"),this.#l.hide()}__childValueMatch(e){const t=this.#p().indexOf(e);this.selectedIndex=t}}),d("table[data-ws]")`
800
- @color: @primary;
801
-
802
- *border-collapse: separate;
803
- *border-spacing: 0px;
804
-
805
- b.s: solid;
806
- b.c: hsl(@color, @layer-border);
807
- b.b.w: 1px;
808
-
809
- ! & th {
810
- bg.c: hsl(@color, @layer-container);
811
- }
812
- ! & :is(th, td:not(:empty)) {
813
- b.s: solid;
814
- b.c: hsl(@color, @layer-border);
815
- b.b.w: 1px;
816
- p: 4px;
817
- }
818
- ! & tbody tr:last-child :is(td, th) {
819
- b.b.w: 0px;
820
- }
821
- ! &[sticky-header] thead {
822
- pos.stick;
823
- y: 0px;
824
- z: +2;
825
- }
826
- ! &[sticky-header] th:first-child {
827
- pos.stick;
828
- z: +1;
829
- x: 0px;
830
- -x: 0px;
831
- }
832
- `,d("ws-text")`
833
- ! &[title] {
834
- t.sz: @text-size-title;
835
- disp: flex;
836
- fl.dir: column;
837
- p: 0px 8px;
838
- fl.cross: start;
839
- fl.main: center;
840
- }
841
- ! &[header] {
842
- t.sz: @text-size-header;
843
- disp: flex;
844
- fl.dir: column;
845
- p: 0px 8px;
846
- fl.cross: start;
847
- fl.main: center;
848
- }
849
- ! &[subtitle] {
850
- disp: inline-block;
851
- t.sz: @text-size-subtitle;
852
- p: 0px 8px;
853
- }
854
- ! &[info] {
855
- disp: inline-block;
856
- t.sz: @text-size-info;
857
- }
858
- `,d("ws-tabs")`
859
- @color: @primary;
860
-
861
- ${E("@layer-element","@layer-fill")}
862
-
863
- disp: grid;
864
- gr.cols.a: 1fr;
865
- gr.rows.a: 1fr;
866
- gr.flow: column;
867
- *user-select: none;
868
- gap: 4px;
869
- `,d("label[tab]")`
870
- @fill: transparent;
871
- @text: @core-color;
872
- @active: @core-color;
873
-
874
- bg.c: @fill;
875
- t.c: @text;
876
-
877
- grid;
878
- gr.cols: 1fr;
879
- gr.rows: min-content 2px;
880
- gr.areas: "content" "border";
881
- pos: relative;
882
-
883
- ! & > input[type="radio"] {
884
- hide;
885
- }
886
-
887
- ! & > :where(*) {
888
- area: content;
889
- flex;
890
- fl.cn;
891
- p: 8px;
892
- }
893
-
894
- ! &::before {
895
- *content: "";
896
- pos: absolute;
897
- -y: 0px;
898
- x: 0px;
899
- w: 100%;
900
- h: 2px;
901
- area: border;
902
- }
903
-
904
- ! &:has(input[type="radio"]:checked) {
905
- @fill: var(--fill-color, transparent);
906
- @text: var(--text-color, @core-color);
907
- @active: unset;
908
- ! &::before {
909
- bg.c: @core-color;
910
- }
911
- }
912
-
913
- ${L}
914
- `,d("ws-titlebar")`
915
- @border-size: 2px;
916
- @color: @primary;
917
-
918
- ${E("@layer-element","@layer-fill")}
919
-
920
- disp: grid;
921
- h.min: 52px;
922
- gr.cols: auto 1fr auto;
923
- gr.areas: "menu title action";
924
- *user-select: none;
925
- pos: relative;
926
- p: 0px 2px;
927
-
928
- t.c: @text;
929
- bg.c: @fill;
930
-
931
- b.y: @border-size solid @core-color;
932
-
933
- ! & > :where(*) {
934
- area: title;
935
- }
936
- `,d("ws-toast")`
937
- @color: @primary;
938
-
939
- t.c: @page-text-color;
940
- bg.c: hsl(@color, @layer-surface);
941
-
942
- pos: relative;
943
- disp: inline-grid;
944
- gr.cols: auto 1fr auto;
945
- gr.areas: "start content end";
946
- r: @base-radius;
947
- *user-select: none;
948
- b: 2px solid hsl(@color, @layer-element);
949
- h.min: 32px;
950
- z: +0;
951
-
952
- ! & > :where(*) {
953
- area: content;
954
- }
955
- ! &::before, &::after {
956
- *content: "";
957
- w.min: 20px;
958
- bg.c: hsl(@color, @layer-element);
959
- z: -1;
960
- }
961
- ! &::before {
962
- area: start;
963
- }
964
- ! &::after {
965
- area: end;
966
- }
967
-
968
- ! & > [notif-text] {
969
- disp: flex;
970
- fl.dir: column;
971
- fl.main: center;
972
- p: 4px;
973
- }
974
-
975
- ! & > :not([notif-text]) {
976
- t.c: hsl(@mono, @layer-fill);
977
- @color: inherit;
978
- variant.fill;
979
- }
980
- `,d("ws-toaster")`
981
- pos: fixed;
982
- z: var(--z-notif);
983
- disp: grid;
984
- gr.cols: fr;
985
- p: 0px;
986
- gap: 8px;
987
- h: min-content;
988
- w: 280px;
989
-
990
- ! &[pos^="top-"] {
991
- y: 20px;
992
- }
993
- ! &[pos^="center-"] {
994
- y: 50%;
995
- tf: translateY(-50%);
996
- }
997
- ! &[pos^="bottom-"] {
998
- -y: 20px;
999
- }
1000
-
1001
- ! &[pos$="-left"] {
1002
- x: 20px;
1003
- }
1004
- ! &[pos$="-center"] {
1005
- x: 50%;
1006
- tf: translateX(-50%);
1007
- }
1008
- ! &[pos$="-right"] {
1009
- -x: 20px;
1010
- }
1011
- `,f("square-dashed","square-check-filled","circle","circle-check-filled","circle-filled");const j='\n @color: var(--toggle-color, @primary);\n @size: 20px;\n\n @core-color: hsl(@color, @layer-element);\n\n pos: relative;\n w: @size;\n h: @size;\n appr: none;\n m: 0px;\n t.c: @core-color;\n v.a: middle;\n\n ! &::after {\n *content: "";\n pos: absolute;\n t.sz: calc(@size - 2px);\n *speak: none;\n t.st: normal;\n t.wt: 400;\n t.var: normal;\n t.tf: none;\n y: 50%;\n x: 50%;\n w: @size;\n h: @size;\n tf: translate(-50%, -50%);\n disp: flex;\n fl.cross: center;\n fl.main: center;\n over: hidden;\n }\n';d(":where(input[data-ws][type=checkbox]:not([switch]))")`
1012
- ${j}
1013
-
1014
- ! &::after {
1015
- font: ws-icon-square-dashed;
1016
- *content: "square-dashed";
1017
- }
1018
- ! &:checked::after {
1019
- font: ws-icon-square-check-filled;
1020
- *content: "square-check-filled";
1021
- }
1022
- `,d(":where(input[data-ws][type=radio])")`
1023
- ${j}
1024
-
1025
- ! &::after {
1026
- font: ws-icon-circle;
1027
- *content: "circle";
1028
- }
1029
- ! &:checked::after {
1030
- font: ws-icon-circle-check-filled;
1031
- *content: "circle-check-filled";
1032
- }
1033
- `,d(":where(input[data-ws][type=checkbox][switch])")`
1034
- @color: @primary;
1035
- @size: 20px;
1036
- @anim-time: 100ms;
1037
-
1038
- appr: none;
1039
- m: 0px;
1040
- pos: relative;
1041
- w: calc(@size * 2);
1042
- h: @size;
1043
- v.a: middle;
1044
-
1045
- ! &::before {
1046
- *content: "";
1047
- pos: absolute;
1048
- inset: calc(@size / 4);
1049
- b: 1px solid @color;
1050
- r: calc(@size / 2);
1051
- bg.c: hsl(@color, @layer-border);
1052
- o: 0.5;
1053
- tr: background-color @anim-time linear;
1054
- }
1055
- ! &:checked::before {
1056
- bg.c: hsl(@color, @layer-border);
1057
- }
1058
-
1059
- ! &::after {
1060
- *content: "";
1061
- pos: absolute;
1062
- w: @size;
1063
- h: @size;
1064
- y: 0px;
1065
- x: 0px;
1066
- tr: left @anim-time linear, background-color @anim-time linear;
1067
- bg.c: hsl(@mono, @layer-text);
1068
- r: @size;
1069
- }
1070
- ! &:checked::after {
1071
- x: @size;
1072
- bg.c: hsl(@color, @layer-element);
1073
- }
1074
- `,d("label[data-ws][toggle]")`
1075
- @color: @primary;
1076
- @active: @mono;
1077
-
1078
- pos: relative;
1079
- *user-select: none;
1080
- over: hidden;
1081
- b: 0px solid hsl(@color, @layer-border);
1082
- bg.c: hsl(@active, @layer-container);
1083
- r: @base-radius;
1084
- p: 4px;
1085
-
1086
- disp: flex;
1087
- fl.main: space-between;
1088
-
1089
- ! &:focus-within {
1090
- @active: @color;
1091
- }
1092
-
1093
- ! & > input {
1094
- @color: inherit;
1095
- ! &:focus {
1096
- outln: none;
1097
- }
1098
- }
1099
-
1100
- ! &:has(:not(button):disabled) {
1101
- *filter: saturate(50%) brightness(0.7);
1102
- }
1103
- `,d("ws-tooltip")`
1104
- @color: @mono;
1105
-
1106
- pos.rel;
1107
- disp: inline-grid;
1108
-
1109
- ! &[pos]:hover::before {
1110
- *content: attr(text);
1111
- pos.abs;
1112
- p: 4px;
1113
- bg.c: hsl(@color, @layer-container);
1114
- b: 1px solid hsl(@color, @layer-border);
1115
- t.ws: nowrap;
1116
- r: 4px;
1117
- z: +1;
1118
- }
1119
-
1120
- ! &[pos="top"]:hover::before {
1121
- -y: calc(100% + 8px);
1122
- x: 50%;
1123
- tf: translateX(-50%);
1124
- }
1125
- ! &[pos="bottom"]:hover::before {
1126
- y: calc(100% + 8px);
1127
- x: 50%;
1128
- tf: translateX(-50%);
1129
- }
1130
- ! &[pos="left"]:hover::before {
1131
- -x: calc(100% + 8px);
1132
- y: 50%;
1133
- tf: translateY(-50%);
1134
- }
1135
- ! &[pos="right"]:hover::before {
1136
- x: calc(100% + 8px);
1137
- y: 50%;
1138
- tf: translateY(-50%);
1139
- }
1140
- `,d("*")`
18
+ `;const m={},x=e=>Object.entries(e).reduce(((e,t)=>{const[r,o]=t;return null==o||!1===o?e:!0===o?(e.push(`${r};`),e):"object"==typeof o?(e.push(`${r} { ${x(o)} }`),e):(e.push(`${r}: ${o};`),e)}),[]).join(" "),v=(e,t="ws.user")=>d(e,t),w=p.version,y=Math.ceil(screen.height*devicePixelRatio*10)%10>=5;l("#theme.base")`font:@font;@sub-pixel-offset:${y?1:0}px;@z-info:5;@z-cover:25;@z-notif:50;@z-layer:100;@base-radius:4px;@anim-time:250ms;@short-anim-time:150ms;@text-size-normal:15px;@text-size-title:calc(@text-size-normal * 2);@text-size-header:calc(@text-size-normal * 1.5);@text-size-subtitle:calc(@text-size-normal * 0.9);@text-size-info:calc(@text-size-normal * 0.75);@color:@mono;@page-text-color:hsl(@color, @layer-text);bg.c:hsl(@color, @layer-bg);t.c:@page-text-color;t.sz:@text-size-normal;`,l("#theme.tron")`#theme.base;@font:Tektur;@mono:0, 0%;@primary:184, 80%;@accent:160, 80%;@info:208, 80%;@success:130, 80%;@warning:58, 80%;@error:4, 80%;@layer-bg:15%;@layer-surface:5%;@layer-element:60%;@layer-container:10%;@layer-border:25%;@layer-text:95%;@layer-fill:5%;@shadow-color:hsla(0, 0%, 100%, 0.25);@modal-color:hsla(0, 0%, 0%, 0.25);*color-scheme:dark;`,l("#theme.dark")`#theme.base;@font:Roboto;@mono:0, 0%;@primary:184, 80%;@accent:160, 80%;@info:208, 80%;@success:130, 80%;@warning:58, 80%;@error:4, 80%;@layer-bg:20%;@layer-surface:10%;@layer-element:50%;@layer-container:15%;@layer-border:30%;@layer-text:90%;@layer-fill:10%;@shadow-color:hsla(0, 0%, 100%, 0.25);@modal-color:hsla(0, 0%, 0%, 0.25);*color-scheme:dark;`,l("#theme.light")`#theme.base;@font:Roboto;@mono:0, 0%;@primary:184, 70%;@accent:160, 85%;@info:208, 85%;@success:130, 90%;@warning:58, 85%;@error:4, 80%;@layer-bg:85%;@layer-surface:95%;@layer-element:37.5%;@layer-container:90%;@layer-border:80%;@layer-text:10%;@layer-fill:95%;@shadow-color:hsla(0, 0%, 20%, 0.25);@modal-color:hsla(0, 0%, 0%, 0.25);`;var k=(e,...t)=>{const r=String.raw(e,...t),o=document.createElement("template");return o.innerHTML=r,()=>o.content.cloneNode(!0)};d("ws-circle-spinner, ws-hexagon-spinner")`@size:100px;w:@size;h:@size;disp:inline-block;`;const z=k`<style>:host {--color:var(--primary);--core-color:hsl(var(--color), var(--layer-element));--alt-color:hsl(var(--color), var(--layer-border));--size:200px;}svg {width:var(--size);height:var(--size);}@keyframes turn {0% {transform:rotate(0deg);}100% {transform:rotate(360deg);}}circle {animation-name:turn;animation-duration:calc(1000ms * var(--n));animation-iteration-count:infinite;animation-timing-function:ease;stroke:var(--c);stroke-width:6;fill:none;animation-direction:var(--anim);}</style><svg viewbox="-50 -50 100 100"><circle style="--c:var(--core-color);--o:1; --anim:forward; --n:2.5;" cx=0 cy=0 r=45 stroke-dasharray="45 45"></circle><circle style="--c:var(--alt-color);--o:0.5; --anim:reverse; --n:2;" cx=0 cy=0 r=35 stroke-dasharray="35 35"></circle><circle style="--c:var(--core-color);--o:0.75; --anim:forward; --n:3.5;" cx=0 cy=0 r=25 stroke-dasharray="25 25"></circle></svg>`;customElements.define("ws-circle-spinner",class extends HTMLElement{constructor(){super();this.attachShadow({mode:"closed"}).appendChild(z())}});const $=k`<style>:host {--color:var(--primary);--core-color:hsl(var(--color), var(--layer-element));--alt-color:hsl(var(--color), var(--layer-border));--size:200px;}svg {width:var(--size);height:var(--size);}circle {stroke-width:0;fill:var(--c);offset-path:path("M 0 -45 L 39 -22.5 L 39 22.5 L 0 45 L -39 22.5 L -39 -22.5 L 0 -45");animation-name:mover;animation-duration:3000ms;animation-iteration-count:infinite;animation-timing-function:linear;}@keyframes mover {0% {offset-distance:0%;}100% {offset-distance:100%;}}@keyframes trail {0% {stroke-dashoffset:0;}100% {stroke-dashoffset:var(--len);}}path {animation-name:trail;animation-duration:3000ms;animation-iteration-count:infinite;animation-timing-function:linear;stroke:var(--c);stroke-width:6;fill:none;animation-direction:var(--anim);}</style><svg viewbox="-50 -50 100 100"><pathd="M 0 -36 L 31 -18 L 31 18 L 0 36 L -31 18 L -31 -18 L 0 -36 Z"style="--c:var(--alt-color); --len:216;"stroke-dasharray="36 36"/><pathd="M 0 -22.5 L 19.5 -11.25 L 19.5 11.25 L 0 22.5 L -19.5 11.25 L -19.5 -11.25 L 0 -22.5 Z"style="--c:var(--core-color); --anim:reverse; --len:135;"stroke-dasharray="22.5 22.5"/><circle r="3" style="--c:var(--core-color); animation-delay:-250ms;"/><circle r="3" style="--c:var(--core-color); animation-delay:-1250ms;" /><circle r="3" style="--c:var(--core-color); animation-delay:-2250ms;" /></svg>`;customElements.define("ws-hexagon-spinner",class extends HTMLElement{constructor(){super();this.attachShadow({mode:"closed"}).appendChild($())}});var A=(e,t)=>`@core:${e};@alt:${t};@core-color:hsl(@color, @core);@alt-color:hsl(@color, @alt);@fill:var(--fill-color, transparent);@text:var(--text-color, @core-color);@active:@text;`;d("ws-avatar")`@color:@mono;@size:36px;${A("@layer-element","@layer-fill")}disp:inline-flex;over:hidden;r:500px;fl.cross:center;fl.main:center;w:@size;h:@size;bg.c:@fill;t.c:@text;v.a:text-bottom;! & > img {w:100%;}! & > object {w:100%;h:100%;disp:flex;fl.cross:center;fl.main:center;}`,d("ws-badge")`@color:@primary;${A("@layer-element","@layer-fill")}pos:relative;disp:inline-grid;over:visible;! &::after {pos:absolute;*content:attr(ws-text);-x:-10px;y:0px;tf:translateY(-50%);bg.c:@core-color;*pointer-events:none;r:20px;p:4px;w.min:20px;h:20px;*box-sizing:border-box;t.a:center;t.sz:@text-size-subtitle;t.c:@alt-color;t.lh:14px;z:@z-info;t.wt:600;}`;var L='over:hidden;pos:relative;cur:pointer;! &::after {*content:"";pos:absolute;y:0px;x:0px;-y:0px;-x:0px;*pointer-events:none;o:0;bg.c:@active;tr:opacity @anim-time linear;}! &:where(:not(:disabled)):active::after {tr:none;o:0.3;}',E='over:hidden;pos:relative;! |pointer:fine| {! &::before {*content:"";pos:absolute;y:0px;x:0px;-y:0px;-x:0px;*pointer-events:none;o:0;bg.c:@active;}! &:where(:not(:disabled)):hover::before {tr:none;o:0.1;}}';d(":where(button[data-ws], a[data-ws][button], label[data-ws][button])")`@color:@primary;${A("@layer-element","@layer-fill")}pos:relative;b:0px solid @core-color;font:@font;t.c:@text;bg.c:@fill;r:@base-radius;cur:pointer;p:8px 16px;over:hidden;*user-select:none;disp:inline-flex;fl.cross:center;fl.main:center;t.deco:none;t.wt:500;! &:disabled {cur:default;*filter:saturate(30%) brightness(0.7);}${E}${L}`,d("ws-chip")`@color:@mono;${A("@layer-element","@layer-fill")}disp:inline-flex;fl.cross:center;fl.main:center;r:100px;p:4px 12px;*user-select:none;v.a:text-bottom;t.c:@text-color;bg:@fill-color;b:1px solid @core-color;! &[clickable] {cur:pointer;${L}}`,d("label[control][data-ws]")`@color:@primary;@active:@mono;pos:relative;disp:inline-grid;gr.areas:"label label label" "start control end" "extra extra extra";gr.rows:minmax(0px, min-content) auto minmax(0px, min-content);gr.cols:minmax(0px, min-content) auto minmax(0px, min-content);*user-select:none;over:hidden;b:0px solid hsl(@color, @layer-border);bg.c:hsl(@active, @layer-container);r:@base-radius;! &:focus-within {@active:@color;}! &:has(:not(button):disabled) {*filter:saturate(50%) brightness(0.7);}! & > :is(input, select, ws-select, textarea) {area:control;b.w:0px;@color:inherit;! &:focus {outln:none;}}! & > :where(input, textarea) {t.c:hsl(@mono, @layer-text);font:@font;h.min:28px;w:100%;h:100%;p:4px;bg.c:transparent;w.min:16px;}! & > :where(input[type="file"]) {pos:relative;p:0px;! &::file-selector-button {font:@font;h:100%;m:0px;m.r:4px;p:4px;t.c:hsl(@color, @layer-element);bg.c:transparent;b.w:0px;t.deco:underline;}}! & > [label-text] {area:label;p:4px;disp:flex;fl.dir:column;fl.cross:start;t.c:hsl(@color, @layer-element);t.ws:nowrap;t.sz:@text-size-normal;}`,b("caret-right-filled"),d(":where(details[data-ws])")`@color:@primary;@padding:8px;${A("@layer-element","@layer-fill")}b:0px solid @core-color;p:0px @padding;r:4px;over:hidden;! &:open {p.b:@padding;}! & > summary {t.c:@core-color;pos:relative;p:4px;p.l:24px;m.x:calc(-1 * @padding);cur:pointer;*user-select:none;! &::before {pos:absolute;x:0px;y:50%;-y:0px;w:1em;disp:flex;fl.cross:center;fl.main:center;font:ws-icon-caret-right-filled;*speak:none;t.st:normal;t.wt:400;t.var:normal;t.tf:none;*content:"caret-right-filled";tf:translateY(-50%);tr:transform 100ms linear;w:24px;h:24px;t.lh:24px;t.sz:18px;}! &::marker, &::-webkit-details-marker {*content:"";disp:none;}}! &:open > summary::before {tf:translateY(-50%) rotate(90deg);}`,d("ws-dialog")`pos:absolute;x:50%;y:50%;tf:translate(-50%, -50%);`,d("ws-drawer")`pos:absolute;x:0px;y:0px;-y:0px;disp:grid;`,d("ws-flex")`flex:column;gap:8px;p:8px;over:hidden;! & > * {fl.shrink:0;}`,d("ws-grid")`disp:grid;over:hidden;gap:8px;p:8px;gr.rows.a:min-content;`,d("ws-icon")`disp:var(--icon-font, none);t.lh:1;! &::before {disp:inline-block;font:@icon-font;*-webkit-font-smoothing:antialiased;*-moz-osx-font-smoothing:grayscale;*content:attr(data-icon);m.t:2px;}`,d("a[data-ws]:not([button])")`@color:@primary;t.c:hsl(@color, @layer-element);! &:visited, &:hover {t.c:hsl(@color, @layer-element);}! &[disabled] {*pointer-events:none;*filter:saturation(30%) brightness(0.7);}`;const S=k`<style>:host {position:fixed;top:0px;left:0px;width:100vw;height:100vh;background-color:var(--modal-color);z-index:var(--z-cover);transition:var(--modal-transition, none);}ws-modal-overlay {position:absolute;inset:0px;}ws-modal-overlay:focus {outline:none;}:host(:not([open])) {visibility:hidden;}:host([clear]) {background-color:transparent;}</style><ws-modal-overlay></ws-modal-overlay><slot></slot>`;customElements.define("ws-modal",class extends HTMLElement{#e=null;constructor(){super(),this.#e=this.attachShadow({mode:"closed",delegatesFocus:!0}),this.#e.append(S())}connectedCallback(){window.addEventListener("keydown",(e=>{!0!==(!1===this.open||"Escape"!==e.key||!0===this.persistent)&&(this.hide(),this.dispatchEvent(new Event("close")))}));this.#e.querySelector("ws-modal-overlay").addEventListener("click",(e=>{!0!==this.persistent&&(this.hide(),this.dispatchEvent(new Event("close")))}))}get open(){return this.hasAttribute("open")}set open(e){!1!==e?this.setAttribute("open",""):this.removeAttribute("open")}get persistent(){return this.hasAttribute("persistent")}set persistent(e){!1!==e?this.setAttribute("persistent",""):this.removeAttribute("persistent")}show(){this.open=!0}hide(){this.open=!1}}),d("ws-paper")`@color:@mono;${A("@layer-surface","@layer-border")}disp:grid;r:@base-radius;over:hidden;gr.cols:1fr;gr.rows:min-content auto min-content;gr.areas:"header" "content" "footer";bg.c:@core-color;b.c:@alt-color;! & > :where(*) {area:content;}! &::before {*content:"";area:header;z:-1;}! &::after {*content:"";area:footer;z:-1;}`;const q=k`<slot></slot><ws-modal><ws-popover-position><slot name="popover"></slot></ws-popover-position></ws-modal>`;customElements.define("ws-popover",class extends HTMLElement{static observedAttributes=["open","persistent"];#e=null;#t=null;constructor(){super(),this.#e=this.attachShadow({mode:"closed",delegatesFocus:!0}),this.#e.append(q()),this.#t=this.#e.querySelector("ws-modal")}connectedCallback(){this.#t.addEventListener("close",(()=>{this.hide(),this.dispatchEvent(new Event("close"))})),!1!==this.open&&(this.#t.open=this.open,this.setVars())}attributeChangedCallback(e,t,r){null!==r?(this.#t[e]=!0,"open"===e&&this.setVars()):this.#t[e]=!1}setVars(){const e=(this.sizeTarget??this).getBoundingClientRect();this.style.setProperty("--x",`${e.x}px`),this.style.setProperty("--y",`${e.y}px`),this.style.setProperty("--w",`${e.width}px`),this.style.setProperty("--h",`${e.height}px`)}get open(){return this.hasAttribute("open")}set open(e){this.#t.open=e,!1!==e?this.setAttribute("open",""):this.removeAttribute("open")}get persistent(){return this.hasAttribute("persistent")}set persistent(e){this.#t.persistent=e,!1!==e?this.setAttribute("persistent",""):this.removeAttribute("persistent")}show(){this.open=!0,this.focus()}hide(){this.open=!1}});const M=k`<style>@keyframes busy-load {from {transform:translateX(-100%);}to {transform:translateX(400%);}}:host {display:block;height:8px;border-radius:var(--base-radius);background-color:hsl(var(--mono), var(--layer-border));position:relative;overflow:hidden;--color:var(--mono);}div::before, div::after {content:"";position:absolute;top:0px;left:0px;height:100%;--range:calc(var(--max, 1) - var(--min, 0));--bar-width:calc(100% * var(--value, 0) / var(--range));--buffer-width:calc(100% * var(--buffer, 0) / var(--range));}div::before {background-color:hsl(var(--color), var(--layer-element));}div::after {opacity:0.3;background-color:hsl(var(--color), var(--layer-element));}:host(:not([busy])) div::before {width:var(--bar-width);}:host(:not([busy])) div::after {width:var(--buffer-width);}:host([busy]) div::before {width:25%;animation-name:busy-load;animation-iteration-count:infinite;animation-duration:2s;}</style><div></div>`;customElements.define("ws-progress",class extends HTMLElement{static observedAttributes=["min","max","value","buffer"];#r=null;constructor(){super();const e=this.attachShadow({mode:"closed"});e.append(M()),this.#r=e.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 this.hasAttribute("busy")}set value(e){!1===e&&this.removeAttribute("value"),this.setAttribute("value",e?.toString()??"")}set buffer(e){!1===e&&this.removeAttribute("buffer"),this.setAttribute("buffer",e?.toString()??"")}set min(e){!1===e&&this.removeAttribute("min"),this.setAttribute("min",e?.toString()??"")}set max(e){!1===e&&this.removeAttribute("max"),this.setAttribute("max",e?.toString()??"")}set busy(e){!1===e&&this.removeAttribute("busy"),this.setAttribute("busy",e)}#o(e,t){this.#r.style.setProperty(`--${e}`,this.getAttribute(e)||t)}connectedCallback(){this.#o("value","0"),this.#o("buffer","0"),this.#o("min","0"),this.#o("max","1")}attributeChangedCallback(e,t,r){this.#o(e,r)}}),d("ws-screen")`@screen-width:min(720px, 100%);@pad-x:auto;@pad-y:auto;@pad-left:var(--pad-x, auto);@pad-right:var(--pad-x, auto);@pad-top:var(--pad-y, auto);@pad-bottom:var(--pad-y, auto);disp:grid;h:round(down, calc(100% - @sub-pixel-offset), 1px);w:calc(100%);over:hidden;pos:absolute;y:0px;x:0px;gr.cols:@pad-left @screen-width @pad-right;gr.rows:@pad-top 1fr @pad-bottom;gr.areas:"tl t tr""l content r""bl b br";! & > :where(*) {area:content;}`;const C="caret-down-filled";b(C),d("ws-option")`${A("@layer-element","@layer-fill")}disp:block;p:8px;*pointer-events:auto;t.c:@text-color-normal;w.min:fit-content;! &[selected] {bg.c:@core-color;t.c:@alt-color;}! & * {*pointer-events:none;}${E}${L}`,d("ws-optgroup")`grid;gr.cols:16px 1fr;*pointer-events:none;! &::before {*content:attr(label);disp:block;p:8px;col:1 / -1;bg.c:hsl(@color, @layer-container);}! & > * {col:2;}`;const T=k`<style>:host {--color:var(--mono);--modal-color:transparent;--max-height:250px;--core-color:hsl(var(--color), var(--layer-border));--alt-color:hsl(var(--color), var(--layer-surface));display:inline-grid;grid-template-rows:1fr 0px;user-select:none;cursor:default;position:relative;border:1px solid var(--core-color);border-radius:var(--base-radius);padding:4px;}slot[name=options] {display:block;overflow:visible;}ws-options {box-sizing:border-box;border:1px solid var(--core-color);border-radius:var(--base-radius);color:hsl(var(--mono), var(--layer-text));display:grid;position:absolute;max-height:var(--max-height);overflow:auto;background-color:var(--alt-color);grid-template-columns:1fr;border-radius:var(--base-radius);box-shadow:0px 2px 4px var(--shadow-color);opacity:0;transform:translateY(10px);visibility:none;transition:opacity var(--anim-time) ease-out,transform var(--anim-time) ease-out,visibility var(--anim-time) ease-out;--sign:sign(var(--y) - 100vh + var(--opt-h));--pos:calc(var(--y)- calc(max(var(--sign), 0)* (var(--opt-h) - var(--h))));top:var(--pos);left:var(--x);width:var(--w);transform-origin:top center;}:host([open]) ws-options {transform:translateY(0);opacity:1;visibility:visible;}value-display {display:grid;user-select:none;grid-template-columns:1fr min-content;height:100%;}value-display:focus {outline:none;}ws-sel-caret {display:flex;align-items:center;justify-content:center;padding:4px;padding-right:0px;width:24px;}ws-sel-caret::before {display:block;font-family:ws-icon-${C};content:attr(data-icon);}slot[name="selected"] {display:none;}slot[name="display"] {display:flex;align-items:center;}:host(:focus:not(:disabled)) {outline-style:auto;outline-width:1px;}ws-popover {--anim-time:unset;}:host(:disabled) {filter:saturate(50%) brightness(0.8);}</style><value-display tabindex="0"><slot name="selected"><ws-selected>No Selection</ws-selected></slot><slot name="display"></slot><ws-sel-caret data-icon="${C}"></ws-sel-caret></value-display><ws-popover><slot slot="popover" name="options"><ws-options><slot></slot></ws-options></slot></ws-popover>`,I="ws-option";customElements.define("ws-select",class extends HTMLElement{static formAssociated=!0;#a=null;#s=-1;#i=null;#n=null;#l=null;#c=null;#e=null;#d=null;#p(){return[...this.querySelectorAll(I)]}#h(e){const t=Array.from(e,(e=>[...e.addedNodes])).flat();if(!1===t.some((e=>e.tagName?.toLowerCase()===I)))return;const r=t.findLast((e=>e.tagName?.toLowerCase()===I&&!0===e.hasAttribute("selected")))??this.#i,o=this.#p();for(const e of o)e.removeAttribute("selected");this.selectedIndex=o.indexOf(r),this.updatePreview()}constructor(){super(),this.#e=this.attachShadow({mode:"closed",delegatesFocus:!0}),this.#e.append(T()),this.#c=this.#e.querySelector("slot[name=selected]"),this.#l=this.#e.querySelector("ws-popover"),this.#d=this.#e.querySelector("value-display"),this.#l.sizeTarget=this,this.removeAttribute("open"),this.display=document.createElement("ws-display"),this.display.slot="display"}connectedCallback(){this.insertBefore(this.display,this.firstChild),this.updatePreview(),this.tabIndex=this.getAttribute("tabindex")??"0";const e=new MutationObserver(this.#h.bind(this));e.observe(this,{childList:!0,subtree:!0}),this.#n=e,this.role="combobox",this.addEventListener("click",(()=>{this.open(),this.#d.focus()}),{passive:!0}),this.#l.addEventListener("close",(()=>this.close())),this.#l.addEventListener("pointerdown",(e=>e.preventDefault())),this.#l.addEventListener("click",(e=>{e.stopPropagation(),e.preventDefault()})),this.#e.querySelector("slot[name='options']").addEventListener("pointerdown",(e=>e.preventDefault())),this.#e.querySelector("slot[name='options']").addEventListener("click",(e=>{e.stopPropagation(),e.preventDefault();const t=e.target.tagName?.toLowerCase();"ws-option"===t&&(this.selectedIndex=this.#p().indexOf(e.target),this.close(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0})))}))}disconnectedCallback(){this.#n.disconnect()}get value(){return this.#a}set value(e){if(this.#a=e,null===e)return void(this.selectedIndex=-1);const t=this.#p(),r=t.find((t=>t.value===e||t.getAttribute("value")===e));this.selectedIndex=t.indexOf(r)}get selectedIndex(){return this.#s}set selectedIndex(e){this.#i?.removeAttribute("selected");const t=this.#p(),r=Math.min(e,t.length);this.#i=t[r]??null,this.#s=r,this.#i?.setAttribute("selected",""),this.#a=this.#i?.value??this.#i?.getAttribute("value")??this.#a,this.updatePreview()}updatePreview(){const e=this.querySelector("[slot=selected]")??this.#c;this.display.innerHTML=e.innerHTML,this.display.querySelector("ws-selected").innerHTML=this.#i?.getAttribute("preview")??this.#i?.innerHTML??this.getAttribute("blank")??"No Selection"}toggle(){null!==this.getAttribute("open")?this.close():this.open()}open(){this.setAttribute("open","");const e=this.querySelector("ws-options")??this.#e.querySelector("ws-options"),t=e.getBoundingClientRect();e.style.setProperty("--opt-h",`${t.height}px`),e.style.setProperty("--opt-w",`${t.width}px`),this.#l.show(),e.scrollTop=0,this.#i?.scrollIntoView()}close(){this.removeAttribute("open"),this.#l.hide()}__childValueMatch(e){const t=this.#p().indexOf(e);this.selectedIndex=t}}),d("table[data-ws]")`@color:@primary;*border-collapse:separate;*border-spacing:0px;b.s:solid;b.c:hsl(@color, @layer-border);b.b.w:1px;! & th {bg.c:hsl(@color, @layer-container);}! & :is(th, td:not(:empty)) {b.s:solid;b.c:hsl(@color, @layer-border);b.b.w:1px;p:4px;}! & tbody tr:last-child :is(td, th) {b.b.w:0px;}! &[sticky-header] thead {pos.stick;y:0px;z:+2;}! &[sticky-header] th:first-child {pos.stick;z:+1;x:0px;-x:0px;}`,d("ws-text")`! &[title] {t.sz:@text-size-title;disp:flex;fl.dir:column;p:0px 8px;fl.cross:start;fl.main:center;}! &[header] {t.sz:@text-size-header;disp:flex;fl.dir:column;p:0px 8px;fl.cross:start;fl.main:center;}! &[subtitle] {disp:inline-block;t.sz:@text-size-subtitle;p:0px 8px;}! &[info] {disp:inline-block;t.sz:@text-size-info;}`,d("ws-tabs")`@color:@primary;${A("@layer-element","@layer-fill")}disp:grid;gr.cols.a:1fr;gr.rows.a:1fr;gr.flow:column;*user-select:none;gap:4px;`,d("label[tab]")`@fill:transparent;@text:@core-color;@active:@core-color;bg.c:@fill;t.c:@text;grid;gr.cols:1fr;gr.rows:min-content 2px;gr.areas:"content" "border";pos:relative;! & > input[type="radio"] {hide;}! & > :where(*) {area:content;flex;fl.cn;p:8px;}! &::before {*content:"";pos:absolute;-y:0px;x:0px;w:100%;h:2px;area:border;}! &:has(input[type="radio"]:checked) {@fill:var(--fill-color, transparent);@text:var(--text-color, @core-color);@active:unset;! &::before {bg.c:@core-color;}}${L}`,d("ws-titlebar")`@border-size:2px;@color:@primary;${A("@layer-element","@layer-fill")}disp:grid;h.min:52px;gr.cols:auto 1fr auto;gr.areas:"menu title action";*user-select:none;pos:relative;p:0px 2px;t.c:@text;bg.c:@fill;b.y:@border-size solid @core-color;! & > :where(*) {area:title;}`,d("ws-toast")`@color:@primary;t.c:@page-text-color;bg.c:hsl(@color, @layer-surface);pos:relative;disp:inline-grid;gr.cols:auto 1fr auto;gr.areas:"start content end";r:@base-radius;*user-select:none;b:2px solid hsl(@color, @layer-element);h.min:32px;z:+0;! & > :where(*) {area:content;}! &::before, &::after {*content:"";w.min:20px;bg.c:hsl(@color, @layer-element);z:-1;}! &::before {area:start;}! &::after {area:end;}! & > [notif-text] {disp:flex;fl.dir:column;fl.main:center;p:4px;}! & > :not([notif-text]) {t.c:hsl(@mono, @layer-fill);@color:inherit;variant.fill;}`,d("ws-toaster")`pos:fixed;z:var(--z-notif);disp:grid;gr.cols:fr;p:0px;gap:8px;h:min-content;w:280px;! &[pos^="top-"] {y:20px;}! &[pos^="center-"] {y:50%;tf:translateY(-50%);}! &[pos^="bottom-"] {-y:20px;}! &[pos$="-left"] {x:20px;}! &[pos$="-center"] {x:50%;tf:translateX(-50%);}! &[pos$="-right"] {-x:20px;}`,b("square-dashed","square-check-filled","circle","circle-check-filled","circle-filled");const V='@color:var(--toggle-color, @primary);@size:20px;@core-color:hsl(@color, @layer-element);pos:relative;w:@size;h:@size;appr:none;m:0px;t.c:@core-color;v.a:middle;! &::after {*content:"";pos:absolute;t.sz:calc(@size - 2px);*speak:none;t.st:normal;t.wt:400;t.var:normal;t.tf:none;y:50%;x:50%;w:@size;h:@size;tf:translate(-50%, -50%);disp:flex;fl.cross:center;fl.main:center;over:hidden;}';d(":where(input[data-ws][type=checkbox]:not([switch]))")`${V}! &::after {font:ws-icon-square-dashed;*content:"square-dashed";}! &:checked::after {font:ws-icon-square-check-filled;*content:"square-check-filled";}`,d(":where(input[data-ws][type=radio])")`${V}! &::after {font:ws-icon-circle;*content:"circle";}! &:checked::after {font:ws-icon-circle-check-filled;*content:"circle-check-filled";}`,d(":where(input[data-ws][type=checkbox][switch])")`@color:@primary;@size:20px;@anim-time:100ms;appr:none;m:0px;pos:relative;w:calc(@size * 2);h:@size;v.a:middle;! &::before {*content:"";pos:absolute;inset:calc(@size / 4);b:1px solid @color;r:calc(@size / 2);bg.c:hsl(@color, @layer-element);o:0.5;tr:background-color @anim-time linear;}! &::after {*content:"";pos:absolute;w:@size;h:@size;y:0px;x:0px;tr:left @anim-time linear, background-color @anim-time linear;bg.c:hsl(@mono, @layer-element);r:@size;}! &:checked::after {x:@size;bg.c:hsl(@color, @layer-element);}`,d("label[data-ws][toggle]")`@color:@primary;@active:@mono;pos:relative;*user-select:none;over:hidden;b:0px solid hsl(@color, @layer-border);bg.c:hsl(@active, @layer-container);r:@base-radius;p:4px;disp:flex;fl.main:space-between;! &:focus-within {@active:@color;}! & > input {@color:inherit;! &:focus {outln:none;}}! &:has(:not(button):disabled) {*filter:saturate(50%) brightness(0.7);}`,d("ws-tooltip")`@color:@mono;pos.rel;disp:inline-grid;! &[pos]:hover::before {*content:attr(text);pos.abs;p:4px;bg.c:hsl(@color, @layer-container);b:1px solid hsl(@color, @layer-border);t.ws:nowrap;r:4px;z:+1;}! &[pos="top"]:hover::before {-y:calc(100% + 8px);x:50%;tf:translateX(-50%);}! &[pos="bottom"]:hover::before {y:calc(100% + 8px);x:50%;tf:translateX(-50%);}! &[pos="left"]:hover::before {-x:calc(100% + 8px);y:50%;tf:translateY(-50%);}! &[pos="right"]:hover::before {x:calc(100% + 8px);y:50%;tf:translateY(-50%);}`,d("*")`
1141
19
  *box-sizing: border-box;
1142
20
  *-webkit-tap-highlight-color: transparent;
1143
21
  *border-width: 0px;
@@ -1164,4 +42,4 @@ div::after {
1164
42
  url(${p.origin}/font/roboto.woff2?v${p.version})
1165
43
  format("woff2")
1166
44
  ;
1167
- `;const P=e=>{const t=(e=>{if(""===e||null===e||"true"===e)return;const t=c(o({raw:[e]})),a=m(t.join("\n"));if(x[a]=(x[a]??0)+1,x[a]>1)return a;const n=t.map((e=>e.replaceAll("&",`[data-wsid="${a}"]`)));return r.sheet.insertRule(`@layer ws.macro { ${n.join("\n")} }`,r.sheet.cssRules.length),a})(e.dataset?.ws?.trim()??"");void 0!==t?e.dataset.wsid=t:delete e.dataset?.wsid};new MutationObserver((e=>{const t=new Set(Array.from(e,(e=>[e.target,...Array.from(e.addedNodes,(e=>[e,...e.querySelectorAll?.("*")||[]]))])).flat(3));for(const e of t)P(e)})).observe(document.body,{subtree:!0,attributes:!0,childList:!0,attributeFilter:["data-ws"]});for(const e of document.querySelectorAll("*"))P(e);export{d as component,w as localMacro,l as macro,f as preloadIcons,y as version,v as x};
45
+ `;const j=e=>{const t=(e=>{if(""===e||null===e||"true"===e)return;const t=c(o({raw:[e]})),a=(e=>{let t=5381;for(let r=0;r<e.length;r+=1)t=33*t^e.charCodeAt(r);return t.toString(36)})(t.join("\n"));if(m[a]=(m[a]??0)+1,m[a]>1)return a;const s=t.map((e=>e.replaceAll("&",`[data-wsid="${a}"]`)));return r.sheet.insertRule(`@layer ws.element { ${s.join("\n")} }`,r.sheet.cssRules.length),a})(e.dataset?.ws?.trim()??"");void 0!==t?e.dataset.wsid=t:delete e.dataset?.wsid};new MutationObserver((e=>{const t=new Set(Array.from(e,(e=>[e.target,...Array.from(e.addedNodes,(e=>[e,...e.querySelectorAll?.("*")||[]]))])).flat(3));for(const e of t)j(e)})).observe(document.body,{subtree:!0,attributes:!0,childList:!0,attributeFilter:["data-ws"]});for(const e of document.querySelectorAll("*"))j(e);export{v as component,l as macro,b as preloadIcons,w as version,x};