@axel669/windstorm 0.6.2 → 1.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/ws-es5.js +121 -120
- package/dist/ws-esm.js +122 -121
- package/dist/ws-nc-es5.js +18 -1
- package/dist/ws-nc-esm.js +18 -1
- package/package.json +1 -1
- package/readme.md +10 -6
package/dist/ws-esm.js
CHANGED
|
@@ -1,4 +1,21 @@
|
|
|
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=j())===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,j()===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(j()===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(j()===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(j()===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=j())===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=P())!==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)},P=()=>{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)},j=()=>{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:"0.6.1",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;`;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")`
|
|
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("{"),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=()=>{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=L())!==e||(t=E())!==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},L=()=>{n="rule$2";let t=N,r=null;if((r=C())===e)return N=t,e;return r},E=()=>{n="rule$3";let t=N,r=null;if((r=T())===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(f()===e)return N=r,e;var s;return s=a,{type:"alt",selector:o.trim(),rules:s}},T=()=>{n="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 s=(()=>{const t=N;let r=null,o=null,a=null;return(r=i())===e||(o=P())===e||(a=I())===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)},I=()=>{let t=null;return(t=V())!==e||(t=j())!==e?t:e},V=()=>{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.1",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("#animate")`
|
|
2
|
+
@modal-transition: visibility @anim-time linear;
|
|
3
|
+
! & ws-dialog {
|
|
4
|
+
o: 0;
|
|
5
|
+
tr: opacity @anim-time ease;
|
|
6
|
+
}
|
|
7
|
+
! & ws-modal[open] > ws-dialog {
|
|
8
|
+
o: 1;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
! & ws-drawer {
|
|
12
|
+
tf: translateX(-100%);
|
|
13
|
+
tr: transform @anim-time ease;
|
|
14
|
+
}
|
|
15
|
+
! & ws-modal[open] > ws-drawer {
|
|
16
|
+
tf: translateX(0%);
|
|
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")`
|
|
2
19
|
font: @font;
|
|
3
20
|
|
|
4
21
|
@sub-pixel-offset: ${k?1:0}px;
|
|
@@ -36,7 +53,7 @@ const e=Symbol("no match"),t=(t,r)=>{const o=r=>{const o=r.length;return()=>r===
|
|
|
36
53
|
@warning: 58, 80%;
|
|
37
54
|
@error: 4, 80%;
|
|
38
55
|
|
|
39
|
-
@layer-bg:
|
|
56
|
+
@layer-bg: 10%;
|
|
40
57
|
@layer-surface: 5%;
|
|
41
58
|
@layer-element: 65%;
|
|
42
59
|
@layer-container: 10%;
|
|
@@ -106,49 +123,35 @@ const e=Symbol("no match"),t=(t,r)=>{const o=r=>{const o=r.length;return()=>r===
|
|
|
106
123
|
--color: var(--primary);
|
|
107
124
|
--core-color: hsl(var(--color), var(--layer-element));
|
|
108
125
|
--alt-color: hsl(var(--color), var(--layer-border));
|
|
109
|
-
--size:
|
|
110
|
-
display: inline;
|
|
126
|
+
--size: 200px;
|
|
111
127
|
}
|
|
112
|
-
|
|
113
|
-
|
|
128
|
+
svg {
|
|
129
|
+
width: var(--size);
|
|
130
|
+
height: var(--size);
|
|
131
|
+
}
|
|
132
|
+
@keyframes turn {
|
|
133
|
+
0% {
|
|
114
134
|
transform: rotate(0deg);
|
|
115
135
|
}
|
|
116
|
-
|
|
136
|
+
100% {
|
|
117
137
|
transform: rotate(360deg);
|
|
118
138
|
}
|
|
119
139
|
}
|
|
120
140
|
circle {
|
|
121
|
-
animation-name:
|
|
141
|
+
animation-name: turn;
|
|
142
|
+
animation-duration: calc(1000ms * var(--n));
|
|
122
143
|
animation-iteration-count: infinite;
|
|
123
|
-
animation-timing-function:
|
|
124
|
-
|
|
125
|
-
stroke:
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
stroke: var(--alt-color);
|
|
129
|
-
}
|
|
130
|
-
circle:nth-child(1) {
|
|
131
|
-
animation-duration: 4s;
|
|
132
|
-
}
|
|
133
|
-
circle:nth-child(2) {
|
|
134
|
-
animation-duration: 3s;
|
|
135
|
-
animation-direction: reverse;
|
|
136
|
-
}
|
|
137
|
-
circle:nth-child(3) {
|
|
138
|
-
animation-duration: 2s;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
svg {
|
|
142
|
-
display: inline-block;
|
|
143
|
-
width: var(--size);
|
|
144
|
-
height: var(--size);
|
|
144
|
+
animation-timing-function: ease;
|
|
145
|
+
stroke: var(--c);
|
|
146
|
+
stroke-width: 6;
|
|
147
|
+
fill: none;
|
|
148
|
+
animation-direction: var(--anim);
|
|
145
149
|
}
|
|
146
150
|
</style>
|
|
147
|
-
|
|
148
|
-
<
|
|
149
|
-
<circle
|
|
150
|
-
<circle
|
|
151
|
-
<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>
|
|
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>
|
|
152
155
|
</svg>
|
|
153
156
|
`;customElements.define("ws-circle-spinner",class extends HTMLElement{constructor(){super();this.attachShadow({mode:"closed"}).appendChild($())}});const A=z`
|
|
154
157
|
<style>
|
|
@@ -156,55 +159,68 @@ const e=Symbol("no match"),t=(t,r)=>{const o=r=>{const o=r.length;return()=>r===
|
|
|
156
159
|
--color: var(--primary);
|
|
157
160
|
--core-color: hsl(var(--color), var(--layer-element));
|
|
158
161
|
--alt-color: hsl(var(--color), var(--layer-border));
|
|
159
|
-
--size:
|
|
160
|
-
display: inline;
|
|
162
|
+
--size: 200px;
|
|
161
163
|
}
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
}
|
|
166
|
-
to {
|
|
167
|
-
transform: rotateY(360deg);
|
|
168
|
-
}
|
|
164
|
+
svg {
|
|
165
|
+
width: var(--size);
|
|
166
|
+
height: var(--size);
|
|
169
167
|
}
|
|
170
|
-
|
|
171
|
-
|
|
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;
|
|
172
174
|
animation-iteration-count: infinite;
|
|
173
175
|
animation-timing-function: linear;
|
|
174
|
-
transform-origin: 50% 50%;
|
|
175
|
-
stroke: var(--core-color);
|
|
176
|
-
}
|
|
177
|
-
path.mid {
|
|
178
|
-
stroke: var(--alt-color);
|
|
179
|
-
}
|
|
180
|
-
path:nth-child(1) {
|
|
181
|
-
animation-duration: 3s;
|
|
182
176
|
}
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
177
|
+
@keyframes mover {
|
|
178
|
+
0% {
|
|
179
|
+
offset-distance: 0%;
|
|
180
|
+
}
|
|
181
|
+
100% {
|
|
182
|
+
offset-distance: 100%;
|
|
183
|
+
}
|
|
186
184
|
}
|
|
187
|
-
|
|
188
|
-
|
|
185
|
+
@keyframes trail {
|
|
186
|
+
0% {
|
|
187
|
+
stroke-dashoffset: 0;
|
|
188
|
+
}
|
|
189
|
+
100% {
|
|
190
|
+
stroke-dashoffset: var(--len);
|
|
191
|
+
}
|
|
189
192
|
}
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
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);
|
|
195
202
|
}
|
|
196
203
|
</style>
|
|
197
|
-
|
|
198
|
-
<
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
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;" />
|
|
202
218
|
</svg>
|
|
203
|
-
`;customElements.define("ws-hexagon-spinner",class extends HTMLElement{constructor(){super();this.attachShadow({mode:"closed"}).appendChild(A())}});var
|
|
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`;d("ws-avatar")`
|
|
204
220
|
@color: @mono;
|
|
205
221
|
@size: 36px;
|
|
206
222
|
|
|
207
|
-
${
|
|
223
|
+
${L("@layer-element","@layer-fill")}
|
|
208
224
|
|
|
209
225
|
disp: inline-flex;
|
|
210
226
|
over: hidden;
|
|
@@ -230,7 +246,7 @@ const e=Symbol("no match"),t=(t,r)=>{const o=r=>{const o=r.length;return()=>r===
|
|
|
230
246
|
`,d("ws-badge")`
|
|
231
247
|
@color: @primary;
|
|
232
248
|
|
|
233
|
-
${
|
|
249
|
+
${L("@layer-element","@layer-fill")}
|
|
234
250
|
|
|
235
251
|
pos: relative;
|
|
236
252
|
disp: inline-grid;
|
|
@@ -256,10 +272,10 @@ const e=Symbol("no match"),t=(t,r)=>{const o=r=>{const o=r.length;return()=>r===
|
|
|
256
272
|
z: @z-info;
|
|
257
273
|
t.wt: 600;
|
|
258
274
|
}
|
|
259
|
-
`;var
|
|
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';d(":where(button[data-ws], a[data-ws][button], label[data-ws][button])")`
|
|
260
276
|
@color: @primary;
|
|
261
277
|
|
|
262
|
-
${
|
|
278
|
+
${L("@layer-element","@layer-fill")}
|
|
263
279
|
|
|
264
280
|
pos: relative;
|
|
265
281
|
|
|
@@ -285,11 +301,11 @@ const e=Symbol("no match"),t=(t,r)=>{const o=r=>{const o=r.length;return()=>r===
|
|
|
285
301
|
}
|
|
286
302
|
|
|
287
303
|
${S}
|
|
288
|
-
${
|
|
304
|
+
${E}
|
|
289
305
|
`,d("ws-chip")`
|
|
290
306
|
@color: @mono;
|
|
291
307
|
|
|
292
|
-
${
|
|
308
|
+
${L("@layer-element","@layer-fill")}
|
|
293
309
|
|
|
294
310
|
disp: inline-flex;
|
|
295
311
|
fl.cross: center;
|
|
@@ -304,7 +320,7 @@ const e=Symbol("no match"),t=(t,r)=>{const o=r=>{const o=r.length;return()=>r===
|
|
|
304
320
|
|
|
305
321
|
! &[clickable] {
|
|
306
322
|
cur: pointer;
|
|
307
|
-
${
|
|
323
|
+
${E}
|
|
308
324
|
}
|
|
309
325
|
`,d("label[control][data-ws]")`
|
|
310
326
|
@color: @primary;
|
|
@@ -339,7 +355,8 @@ const e=Symbol("no match"),t=(t,r)=>{const o=r=>{const o=r.length;return()=>r===
|
|
|
339
355
|
}
|
|
340
356
|
|
|
341
357
|
! & > :where(input, textarea) {
|
|
342
|
-
t.c: @text
|
|
358
|
+
t.c: hsl(@mono, @layer-text);
|
|
359
|
+
font: @font;
|
|
343
360
|
h.min: 28px;
|
|
344
361
|
w: 100%;
|
|
345
362
|
h: 100%;
|
|
@@ -358,7 +375,7 @@ const e=Symbol("no match"),t=(t,r)=>{const o=r=>{const o=r.length;return()=>r===
|
|
|
358
375
|
m: 0px;
|
|
359
376
|
m.r: 4px;
|
|
360
377
|
p: 4px;
|
|
361
|
-
t.c: @
|
|
378
|
+
t.c: hsl(@color, @layer-element);
|
|
362
379
|
bg.c: transparent;
|
|
363
380
|
b.w: 0px;
|
|
364
381
|
t.deco: underline;
|
|
@@ -375,11 +392,11 @@ const e=Symbol("no match"),t=(t,r)=>{const o=r=>{const o=r.length;return()=>r===
|
|
|
375
392
|
t.ws: nowrap;
|
|
376
393
|
t.sz: @text-size-normal;
|
|
377
394
|
}
|
|
378
|
-
`,
|
|
395
|
+
`,b("caret-right-filled"),d(":where(details[data-ws])")`
|
|
379
396
|
@color: @primary;
|
|
380
397
|
@padding: 8px;
|
|
381
398
|
|
|
382
|
-
${
|
|
399
|
+
${L("@layer-element","@layer-fill")}
|
|
383
400
|
|
|
384
401
|
b: 0px solid @core-color;
|
|
385
402
|
p: 0px @padding;
|
|
@@ -436,27 +453,14 @@ const e=Symbol("no match"),t=(t,r)=>{const o=r=>{const o=r.length;return()=>r===
|
|
|
436
453
|
x: 50%;
|
|
437
454
|
y: 50%;
|
|
438
455
|
tf: translate(-50%, -50%);
|
|
439
|
-
o: 0;
|
|
440
|
-
tr: opacity @anim-time linear;
|
|
441
|
-
|
|
442
|
-
! ws-modal[open] > & {
|
|
443
|
-
o: 1;
|
|
444
|
-
}
|
|
445
456
|
`,d("ws-drawer")`
|
|
446
457
|
pos: absolute;
|
|
447
458
|
x: 0px;
|
|
448
459
|
y: 0px;
|
|
449
460
|
-y: 0px;
|
|
450
|
-
tf: translateX(-100%);
|
|
451
|
-
tr: transform @anim-time linear;
|
|
452
461
|
disp: grid;
|
|
453
|
-
|
|
454
|
-
! ws-modal[open] > & {
|
|
455
|
-
tf: translateX(0%);
|
|
456
|
-
}
|
|
457
462
|
`,d("ws-flex")`
|
|
458
|
-
|
|
459
|
-
fl.dir: column;
|
|
463
|
+
flex: column;
|
|
460
464
|
gap: 8px;
|
|
461
465
|
p: 4px;
|
|
462
466
|
over: hidden;
|
|
@@ -504,7 +508,7 @@ const e=Symbol("no match"),t=(t,r)=>{const o=r=>{const o=r.length;return()=>r===
|
|
|
504
508
|
height: 100vh;
|
|
505
509
|
background-color: var(--modal-color);
|
|
506
510
|
z-index: var(--z-cover);
|
|
507
|
-
transition:
|
|
511
|
+
transition: var(--modal-transition, none);
|
|
508
512
|
}
|
|
509
513
|
ws-modal-overlay {
|
|
510
514
|
position: absolute;
|
|
@@ -524,10 +528,10 @@ const e=Symbol("no match"),t=(t,r)=>{const o=r=>{const o=r.length;return()=>r===
|
|
|
524
528
|
<ws-modal-overlay>
|
|
525
529
|
</ws-modal-overlay>
|
|
526
530
|
<slot></slot>
|
|
527
|
-
`;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=>{
|
|
531
|
+
`;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")`
|
|
528
532
|
@color: @mono;
|
|
529
533
|
|
|
530
|
-
${
|
|
534
|
+
${L("@layer-surface","@layer-border")}
|
|
531
535
|
|
|
532
536
|
disp: grid;
|
|
533
537
|
r: @base-radius;
|
|
@@ -551,11 +555,6 @@ const e=Symbol("no match"),t=(t,r)=>{const o=r=>{const o=r.length;return()=>r===
|
|
|
551
555
|
area: footer;
|
|
552
556
|
}
|
|
553
557
|
`;const M=z`
|
|
554
|
-
<style>
|
|
555
|
-
:host {
|
|
556
|
-
--anim-time: 0ms;
|
|
557
|
-
}
|
|
558
|
-
</style>
|
|
559
558
|
<slot></slot>
|
|
560
559
|
|
|
561
560
|
<ws-modal>
|
|
@@ -563,7 +562,7 @@ const e=Symbol("no match"),t=(t,r)=>{const o=r=>{const o=r.length;return()=>r===
|
|
|
563
562
|
<slot name="popover"></slot>
|
|
564
563
|
</ws-popover-position>
|
|
565
564
|
</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"))}))
|
|
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(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
566
|
<style>
|
|
568
567
|
@keyframes busy-load {
|
|
569
568
|
from {
|
|
@@ -614,7 +613,7 @@ div::after {
|
|
|
614
613
|
</style>
|
|
615
614
|
|
|
616
615
|
<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","")}set buffer(e){!1===e&&this.removeAttribute("buffer"),this.setAttribute("buffer","")}set min(e){!1===e&&this.removeAttribute("min"),this.setAttribute("min","")}set max(e){!1===e&&this.removeAttribute("max"),this.setAttribute("max","")}set busy(e){!1===e&&this.removeAttribute("busy"),this.setAttribute("busy",
|
|
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)}}),d("ws-screen")`
|
|
618
617
|
@screen-width: min(720px, 100%);
|
|
619
618
|
@pad-x: auto;
|
|
620
619
|
@pad-y: auto;
|
|
@@ -641,8 +640,8 @@ div::after {
|
|
|
641
640
|
! & > :where(*) {
|
|
642
641
|
area: content;
|
|
643
642
|
}
|
|
644
|
-
`;const
|
|
645
|
-
${
|
|
643
|
+
`;const T="caret-down-filled";b(T),d("ws-option")`
|
|
644
|
+
${L("@layer-element","@layer-fill")}
|
|
646
645
|
|
|
647
646
|
disp: block;
|
|
648
647
|
p: 8px;
|
|
@@ -660,7 +659,7 @@ div::after {
|
|
|
660
659
|
}
|
|
661
660
|
|
|
662
661
|
${S}
|
|
663
|
-
${
|
|
662
|
+
${E}
|
|
664
663
|
`,d("ws-optgroup")`
|
|
665
664
|
grid;
|
|
666
665
|
gr.cols: 16px 1fr;
|
|
@@ -677,7 +676,7 @@ div::after {
|
|
|
677
676
|
! & > * {
|
|
678
677
|
col: 2;
|
|
679
678
|
}
|
|
680
|
-
`;const
|
|
679
|
+
`;const I=z`
|
|
681
680
|
<style>
|
|
682
681
|
:host {
|
|
683
682
|
--color: var(--mono);
|
|
@@ -714,9 +713,11 @@ div::after {
|
|
|
714
713
|
box-shadow: 0px 2px 4px var(--shadow-color);
|
|
715
714
|
opacity: 0;
|
|
716
715
|
transform: translateY(10px);
|
|
716
|
+
visibility: none;
|
|
717
717
|
transition:
|
|
718
|
-
opacity var(--anim-time)
|
|
719
|
-
transform var(--anim-time)
|
|
718
|
+
opacity var(--anim-time) ease-out,
|
|
719
|
+
transform var(--anim-time) ease-out,
|
|
720
|
+
visibility var(--anim-time) ease-out
|
|
720
721
|
;
|
|
721
722
|
|
|
722
723
|
--sign: sign(var(--y) - 100vh + var(--opt-h));
|
|
@@ -756,7 +757,7 @@ div::after {
|
|
|
756
757
|
}
|
|
757
758
|
ws-sel-caret::before {
|
|
758
759
|
display: block;
|
|
759
|
-
font-family: ws-icon-${
|
|
760
|
+
font-family: ws-icon-${T};
|
|
760
761
|
content: attr(data-icon);
|
|
761
762
|
}
|
|
762
763
|
slot[name="selected"] {
|
|
@@ -785,7 +786,7 @@ div::after {
|
|
|
785
786
|
<ws-selected>No Selection</ws-selected>
|
|
786
787
|
</slot>
|
|
787
788
|
<slot name="display"></slot>
|
|
788
|
-
<ws-sel-caret data-icon="${
|
|
789
|
+
<ws-sel-caret data-icon="${T}"></ws-sel-caret>
|
|
789
790
|
</value-display>
|
|
790
791
|
<ws-popover>
|
|
791
792
|
<slot slot="popover" name="options">
|
|
@@ -794,7 +795,7 @@ div::after {
|
|
|
794
795
|
</ws-options>
|
|
795
796
|
</slot>
|
|
796
797
|
</ws-popover>
|
|
797
|
-
`,
|
|
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(I()),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]")`
|
|
798
799
|
@color: @primary;
|
|
799
800
|
|
|
800
801
|
*border-collapse: separate;
|
|
@@ -856,7 +857,7 @@ div::after {
|
|
|
856
857
|
`,d("ws-tabs")`
|
|
857
858
|
@color: @primary;
|
|
858
859
|
|
|
859
|
-
${
|
|
860
|
+
${L("@layer-element","@layer-fill")}
|
|
860
861
|
|
|
861
862
|
disp: grid;
|
|
862
863
|
gr.cols.a: 1fr;
|
|
@@ -908,12 +909,12 @@ div::after {
|
|
|
908
909
|
}
|
|
909
910
|
}
|
|
910
911
|
|
|
911
|
-
${
|
|
912
|
+
${E}
|
|
912
913
|
`,d("ws-titlebar")`
|
|
913
914
|
@border-size: 2px;
|
|
914
915
|
@color: @primary;
|
|
915
916
|
|
|
916
|
-
${
|
|
917
|
+
${L("@layer-element","@layer-fill")}
|
|
917
918
|
|
|
918
919
|
disp: grid;
|
|
919
920
|
h.min: 52px;
|
|
@@ -1006,8 +1007,8 @@ div::after {
|
|
|
1006
1007
|
! &[pos$="-right"] {
|
|
1007
1008
|
-x: 20px;
|
|
1008
1009
|
}
|
|
1009
|
-
`,
|
|
1010
|
-
${
|
|
1010
|
+
`,b("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]))")`
|
|
1011
|
+
${j}
|
|
1011
1012
|
|
|
1012
1013
|
! &::after {
|
|
1013
1014
|
font: ws-icon-square-dashed;
|
|
@@ -1018,7 +1019,7 @@ div::after {
|
|
|
1018
1019
|
*content: "square-check-filled";
|
|
1019
1020
|
}
|
|
1020
1021
|
`,d(":where(input[data-ws][type=radio])")`
|
|
1021
|
-
${
|
|
1022
|
+
${j}
|
|
1022
1023
|
|
|
1023
1024
|
! &::after {
|
|
1024
1025
|
font: ws-icon-circle;
|
|
@@ -1162,4 +1163,4 @@ div::after {
|
|
|
1162
1163
|
url(${p.origin}/font/roboto.woff2?v${p.version})
|
|
1163
1164
|
format("woff2")
|
|
1164
1165
|
;
|
|
1165
|
-
`;const
|
|
1166
|
+
`;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,b as preloadIcons,y as version,v as x};
|