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