@axel669/zephyr 1.0.0-dev.0 → 1.0.0-dev.2

package/dist/zephyr.js

@@ -314,7 +314,39 @@ const eventNames = {
     "select.value": "change",
     "select.selectedIndex": "change",
 };
-const boolProps = ["checked", "sticky-header"];
+const boolProps = [
+    "allowfullscreen",
+    "alpha",
+    "async",
+    "autofocus",
+    "autoplay",
+    "checked",
+    "controls",
+    "default",
+    "defer",
+    "disabled",
+    "formnovalidate",
+    "inert",
+    "ismap",
+    "itemscope",
+    "loop",
+    "multiple",
+    "muted",
+    "nomodule",
+    "novalidate",
+    "open",
+    "playsinline",
+    "readonly",
+    "required",
+    "reversed",
+    "selected",
+    "shadowrootclonable",
+    "shadowrootcustomelementregistry",
+    "shadowrootdelegatesfocus",
+    "shadowrootserializable",
+    // from windstorm
+    "sticky-header"
+];
 
 const tagGetValue = {
     details: (element) => element.open,
@@ -350,6 +382,47 @@ var options = /*#__PURE__*/Object.freeze({
     tagGetValue: tagGetValue
 });
 
+const getInputValue = (element) => {
+    const tag = element.tagName?.toLowerCase?.() ?? null;
+    const getValue = tagGetValue[tag];
+    return getValue?.(element) ?? element.value
+};
+
+const binding = {
+    "bind": (props, source) => ({
+        value: source.value,
+        update: (e) => source.update(
+            getInputValue(e.target)
+        )
+    }),
+    "group": (props, source) => {
+        if (props.type === "checkbox") {
+            const value = source.value.includes(props.value);
+            const update = (e) => {
+                if (e.target.checked === false) {
+                    source.update(
+                        source.value.filter(
+                            item => item !== props.value
+                        )
+                    );
+                    return
+                }
+                source.update([
+                    ...source.value,
+                    props.value
+                ]);
+            };
+            return { value, update }
+        }
+        if (props.type === "radio") {
+            const value = (source.value === props.value);
+            const update = (e) => source.update(props.value);
+            return { value, update }
+        }
+        return () => {}
+    }
+};
+
 const propMods = [
     (comp, props) => {
         if (typeof comp === "string") {
@@ -387,8 +460,14 @@ const propMods = [
                     const prop = key.slice(2);
                     const target = `${comp.toLowerCase()}.${prop}`;
                     const evtname = eventNames[target] ?? "input";
-                    filtered[prop] = value.value;
-                    filtered[`on${evtname}`] = value.update;
+                    // filtered[prop] = value.value
+                    const bind = binding[value.type](props, value);
+                    // const update = (e) => value.update(
+                    //     getInputValue(e.target)
+                    // )
+                    filtered[prop] = bind.value;
+                    filtered[`on${evtname}`] = bind.update;
+                    // filtered[`on${evtname}`] = value.update
                     return
                 }
                 if (key.startsWith("$") === true) {
@@ -528,12 +607,6 @@ const ref = (obj) => {
     return ref$1(obj)
 };
 
-const getInputValue = (element) => {
-    const tag = element.tagName?.toLowerCase?.() ?? null;
-    const getValue = tagGetValue[tag];
-    return getValue?.(element) ?? element.value
-};
-
 const __eachAlt = (list, alt) =>
     (list.length > 0) ? list : alt();
 
@@ -687,7 +760,7 @@ const spinCW = animation({
         rotate: "360deg",
     },
 });
-const slideLeft = animation({
+const fromLeft = animation({
     "0%": {
         translate: "-100% 0"
     },
@@ -695,6 +768,30 @@ const slideLeft = animation({
         translate: "0% 0"
     },
 });
+const fromRight = animation({
+    "0%": {
+        translate: "100% 0"
+    },
+    "100%": {
+        translate: "0% 0"
+    },
+});
+const fromTop = animation({
+    "0%": {
+        translate: "0 -100%"
+    },
+    "100%": {
+        translate: "0 0%"
+    },
+});
+const fromBottom = animation({
+    "0%": {
+        translate: "0 100%"
+    },
+    "100%": {
+        translate: "0 0%"
+    },
+});
 
 const register = (keyed, child, pos, local) => {
     if (keyed.has(child.key) === true) {
@@ -794,7 +891,7 @@ const Transitions = (props) => {
     return display
 };
 
-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  false!==r.test(o)?(N+=1,o):e};let s=null;const i=o("@"),n=o(":"),l=a(/[^;]/),c=o(";"),d=o("*"),p=a(/[a-z0-9_\-]/i),h=o("!"),u=a(/[^{]/),g=o("{"),f=o("}"),b=a(/[a-zA-Z0-9\.\-_#\^\$\/]/),m=o("#"),x=a(/[^;#]/),v=a(/[\s]/m),w=()=>{const t=N;let r=null,o=null;return (r=P())===e||(o=z())===e?(N=t,e):[r,o]},y=()=>{const r=N;let o=null,a=null;return (o=m())===e||(a=(()=>{const r=N,o=N;for(;x()!==e;);return N-o==0?e:t.slice(r,N)})())===e?(N=r,e):[o,a]},k=()=>{s="rules";let t=N,r=null;const o=[];let a=null;for(;(a=w())!==e;)o.push(a);if(r=o,P()===e)return N=t,e;return r.map((e=>e[1]))},z=()=>{let t=null;return (t=$())!==e||(t=A())!==e||(t=L())!==e||(t=E())!==e?t:e},$=()=>{s="rule$0";let t=N,r=null;if((r=S())===e)return N=t,e;return r},A=()=>{s="rule$1";let t=N,r=null;if((r=q())===e)return N=t,e;return r},L=()=>{s="rule$2";let t=N,r=null;if((r=C())===e)return N=t,e;return r},E=()=>{s="rule$3";let t=N,r=null;if((r=T())===e)return N=t,e;return r},S=()=>{s="variable";let r=N,o=null,a=null;if(i()===e)return N=r,e;if((o=M())===e)return N=r,e;if(n()===e)return N=r,e;if(P()===e)return N=r,e;if((a=(()=>{const r=N,o=N;for(;l()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;if(c()===e)return N=r,e;return ((e,t)=>({type:"var",name:e,value:t}))(o,a)},q=()=>{s="css";let r=N,o=null,a=null;if(d()===e)return N=r,e;if((o=M())===e)return N=r,e;if(n()===e)return N=r,e;if(P()===e)return N=r,e;if((a=(()=>{const r=N,o=N;for(;l()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;if(c()===e)return N=r,e;return ((e,t)=>({type:"css",name:e,value:t}))(o,a)},M=()=>{s="cssName";let r=N,o=null;if((o=(()=>{const r=N,o=N;for(;p()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;return o},C=()=>{s="subrule";let r=N,o=null,a=null;if(h()===e)return N=r,e;if(P()===e)return N=r,e;if((o=(()=>{const r=N,o=N;for(;u()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;if(g()===e)return N=r,e;if((a=k())===e)return N=r,e;if(f()===e)return N=r,e;var i;return i=a,{type:"alt",selector:o.trim(),rules:i}},T=()=>{s="macro";let r=N,o=null,a=null;if((o=(()=>{const r=N,o=N;for(;b()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;const i=(()=>{const t=N;let r=null,o=null,a=null;return (r=n())===e||(o=P())===e||(a=I())===e?(N=t,e):[r,o,a]})();if(a=i===e?null:i,c()===e)return N=r,e;return ((e,t)=>({type:"macro",name:e,value:t?.[2]}))(o,a)},I=()=>{let t=null;return (t=V())!==e||(t=j())!==e?t:e},V=()=>{s="macroValue$0";let t=null;const r=[];let o=null;for(;(o=y())!==e;)r.push(o);if(0===r.length)return e;t=r;return (e=>{const t=e.map((e=>e[1].trim()));return t.arg=t.join(" "),t})(t)},j=()=>{s="macroValue$1";let r=N,o=null;if((o=(()=>{const r=N,o=N;for(;l()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;return (e=>{const t=[e.trim()];return t.arg=e,t})(o)},P=()=>{for(s="_";v()!==e;);};let N=0;const H=(()=>{s="$";let t=N,r=null;if((r=k())===e)return N=t,e;return r})();return N!==t.length?(console.log("last",s),console.log("@",N),console.log(t.slice(N-10,N+10)),new Error("End of input not found")):H},r=document.createElement("style");r.setAttribute("data-name","windstorm-generated"),r.innerHTML="@layer ws.custom ws.user ws.element;",document.head.append(r);const o=(e,...r)=>{const o=String.raw(e,...r);return a(t(o),{"&":[]},"&")},a=(e,t,r)=>{for(const o of e)i(o,t,r);return t},s=e=>e.replace(/@([a-zA-Z0-9\-_]+)/g,((e,t)=>`var(--${t})`)),i=(e,t,r)=>{if("var"===e.type)return void t[r].push(`--${e.name}: ${s(e.value)};`);if("css"===e.type)return void t[r].push(`${e.name}: ${s(e.value)};`);if("macro"===e.type){const o=n[e.name];if(void 0===o)return void console.warn(`no macro for "${e.name}"`);for(const[a,i]of Object.entries(o)){const o=a.replace("&",r);t[o]=t[o]??[],t[o].push(...i.map((t=>s(t.replace(/%(arg|\d+)/g,((t,r)=>e.value?.[r]??""))))));}return}const o=e.selector.replaceAll("&",r);t[o]=[...t[o]??[]],a(e.rules,t,o);},n={},l=e=>void 0!==n[e]?()=>{}:(t,...r)=>n[e]=o(t,...r),c=e=>Object.entries(e).reduce(((e,[t,r])=>{if(true===t.startsWith("|")){const o=t.lastIndexOf("|"),a=[`@media (${t.slice(1,o)}) {`,`${`&${t.slice(o+1)}`} {`,...r,"}","}"].join("\n");return e.push(a),e}return e.push(`${t} {\n${r.join("\n")}\n}`),e}),[]),d=(e,t="ws.custom")=>(a,...s)=>{const i=o(a,...s);e.startsWith("@");const n=c(i).map((t=>t.replaceAll("&",e))),l=`@layer ${t} { ${n.join("\n")} }`;r.sheet.insertRule(l);};const p={origin:"https://wind-cdn.axel669.net",...window.wsConfig,version:"1.0.0-beta.9",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:true,attributes:true,childList:true,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("var.outln")`b.w:1px;`,l("var.fill")` @text-color:@c2; @fill-color:@c1; @active:@c2; b.c:transparent; `,l("fill.reset")` @text-color:initial; @fill-color:initial; `,l("var.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("raise")`sh.box:0px calc(%arg * 1px + 2px) calc(%arg * 1px + 1px) -1px @shadow-color; z:+%arg;`,l("raised")`raise:1;`,l("scrollable")`over:auto;`,l("#animate")` @modal-transition:visibility @anim-time linear; @dialog-transition:opacity @anim-time ease; @popover-transition:opacity @anim-time ease; @drawer-transition:transform @anim-time ease; `,l("#no-animate")` @modal-transition:none; @dialog-transition:none; @popover-transition:none; @drawer-transition:none; `,l("#no-select-animate")` @select-cancel:none; `,l("layout.base")` over:hidden; disp:grid; ! body > & { pos:absolute; x:0px; y:0px; w:100%; h:100%; } ! :where(&) > * { area:content; } `,l("layout.3x3-center")` layout.base; @width:auto; @height:auto;  disp:grid; gr.cols:[left-start top-start bottom-start] 1fr [left-end content-start] @width [content-end right-start] 1fr [right-end top-end bottom-end] ; gr.rows:[top-start left-start right-start] 1fr [top-end content-start] @height [content-end bottom-start] 1fr [bottom-end left-end right-end] ; `,l("layout.3row-center")` @height:auto;  layout.base; disp:grid; gr.cols.a:1fr; gr.rows:1fr @height 1fr; gr.areas:"top" "content" "bottom"; `,l("layout.3col-center")` @width:auto;  layout.base; disp:grid; gr.cols:1fr @width 1fr; gr.rows.a:1fr; gr.areas:"left content right"; `,l("layout.3row-controls")` layout.base; disp:grid; gr.cols.a:1fr; gr.rows:min-content 1fr min-content; gr.areas:"header" "content" "footer"; `,l("layout.3col-controls")` layout.base; disp:grid; gr.cols:min-content 1fr min-content; gr.rows.a:1fr; gr.areas:"menu content action"; `,l("layout.2col-sidebar")` layout.base; @col-a:1fr; @col-b:2fr; disp:grid; gr.cols:@col-a @col-b; gr.rows.a:1fr; gr.areas:"sidebar content"; `;const m=e=>Object.entries(e).reduce(((e,t)=>{const[r,o]=t;return null==o||false===o?e:true===o?(e.push(`${r};`),e):"object"==typeof o?(e.push(`${r} { ${m(o)} }`),e):(e.push(`${r}: ${o};`),e)}),[]).join(" "),x=(e,t="ws.user")=>d(e,t),v=p.version,w={get mobile(){return matchMedia("(hover: none)")}};d("*")` *box-sizing:border-box; *-webkit-tap-highlight-color:transparent; *border-width:0px; *border-style:solid; *outline-color:hsl(@mono, @layer-text); `,d("html, body")` *padding:0px; *margin:0px; *width:100%; *height:100%; *-webkit-tap-highlight-color:transparent; *-webkit-font-smoothing:antialiased; `,d("@font-face",null)` *font-family:Tektur; *font-display:swap; *src:url(${p.origin}/font/tektur.woff2?v${p.version}) format("woff2") ; `,d("@font-face",null)` *font-family:Roboto; *font-display:swap; *src:url(${p.origin}/font/roboto.woff2?v${p.version}) format("woff2") ; `;const y=Math.ceil(screen.height*devicePixelRatio*10)%10>=5;l("#theme.base")` font:@font;  @sub-pixel-offset:${y?1:0}px; @z-info:5; @z-cover:25; @z-notif:50; @z-layer:100;  @base-radius:4px; @anim-time:250ms; @short-anim-time:150ms;  @text-size-normal:15px; @text-size-title:calc(@text-size-normal * 2); @text-size-header:calc(@text-size-normal * 1.5); @text-size-subtitle:calc(@text-size-normal * 0.9); @text-size-info:calc(@text-size-normal * 0.75);  @color:@mono;  @page-text-color:hsl(@color, @layer-text); bg.c:hsl(@color, @layer-bg); t.c:@page-text-color; t.sz:@text-size-normal; `,l("#theme.tron")` #theme.base;  @font:Tektur;  @mono:0, 0%; @primary:184, 80%; @accent:160, 80%; @info:208, 80%; @success:130, 80%; @warning:58, 80%; @error:4, 80%;  @layer-bg:10%; @layer-surface:5%; @layer-element:60%; @layer-container:10%; @layer-border:25%; @layer-text:95%; @layer-fill:5%;  @shadow-color:hsla(0, 0%, 69%, 0.25); @modal-color:hsla(0, 0%, 0%, 0.05);  *color-scheme:dark; `,l("#theme.dark")` #theme.base; @font:Roboto;  @mono:0, 0%; @primary:184, 80%; @accent:160, 80%; @info:208, 80%; @success:130, 80%; @warning:58, 80%; @error:4, 80%;  @layer-bg:20%; @layer-surface:10%; @layer-element:50%; @layer-container:15%; @layer-border:30%; @layer-text:90%; @layer-fill:10%;  @shadow-color:hsla(0, 0%, 69%, 0.25); @modal-color:hsla(0, 0%, 0%, 0.05);  *color-scheme:dark; `,l("#theme.light")` #theme.base; @font:Roboto;  @mono:0, 0%; @primary:184, 70%; @accent:160, 85%; @info:208, 85%; @success:130, 90%; @warning:58, 85%; @error:4, 80%;  @layer-bg:85%; @layer-surface:95%; @layer-element:37.5%; @layer-container:90%; @layer-border:80%; @layer-text:10%; @layer-fill:95%;  @shadow-color:hsla(0, 0%, 20%, 0.25); @modal-color:hsla(0, 0%, 0%, 0.05); `;var k=(e,...t)=>{const r=String.raw(e,...t),o=document.createElement("template");return o.innerHTML=r,()=>o.content.cloneNode(true)};d("ws-circle-spinner, ws-hexagon-spinner")` @size:100px;  w:@size; h:@size; disp:inline-block; `;const z=k` <style> :host { --color:var(--primary); --core-color:hsl(var(--color), var(--layer-element)); --alt-color:hsl(var(--color), var(--layer-border)); --size:200px; } svg { width:var(--size); height:var(--size); } @keyframes turn { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } } circle { animation-name:turn; animation-duration:calc(1000ms * var(--n)); animation-iteration-count:infinite; animation-timing-function:ease; stroke:var(--c); stroke-width:6; fill:none; animation-direction:var(--anim); } </style> <svg viewbox="-50 -50 100 100"> <circle style="--c:var(--core-color);--o:1; --anim:forward; --n:2.5;" cx=0 cy=0 r=45 stroke-dasharray="45 45"></circle> <circle style="--c:var(--alt-color);--o:0.5; --anim:reverse; --n:2;" cx=0 cy=0 r=35 stroke-dasharray="35 35"></circle> <circle style="--c:var(--core-color);--o:0.75; --anim:forward; --n:3.5;" cx=0 cy=0 r=25 stroke-dasharray="25 25"></circle> </svg> `;customElements.define("ws-circle-spinner",class extends HTMLElement{constructor(){super();this.attachShadow({mode:"closed"}).appendChild(z());}});const $=k` <style> :host { --color:var(--primary); --core-color:hsl(var(--color), var(--layer-element)); --alt-color:hsl(var(--color), var(--layer-border)); --size:200px; } svg { width:var(--size); height:var(--size); } circle { stroke-width:0; fill:var(--c); offset-path:path("M 0 -45 L 39 -22.5 L 39 22.5 L 0 45 L -39 22.5 L -39 -22.5 L 0 -45"); animation-name:mover; animation-duration:3000ms; animation-iteration-count:infinite; animation-timing-function:linear; } @keyframes mover { 0% { offset-distance:0%; } 100% { offset-distance:100%; } } @keyframes trail { 0% { stroke-dashoffset:0; } 100% { stroke-dashoffset:var(--len); } } path { animation-name:trail; animation-duration:3000ms; animation-iteration-count:infinite; animation-timing-function:linear; stroke:var(--c); stroke-width:6; fill:none; animation-direction:var(--anim); } </style> <svg viewbox="-50 -50 100 100"> <path d="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" /> <path 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" style="--c:var(--core-color); --anim:reverse; --len:135;" stroke-dasharray="22.5 22.5" /> <circle r="3" style="--c:var(--core-color); animation-delay:-250ms;"/> <circle r="3" style="--c:var(--core-color); animation-delay:-1250ms;" /> <circle r="3" style="--c:var(--core-color); animation-delay:-2250ms;" /> </svg> `;customElements.define("ws-hexagon-spinner",class extends HTMLElement{constructor(){super();this.attachShadow({mode:"closed"}).appendChild($());}});var A=(e,t,r)=>` @l1:${e}; @l2:${t}; @l3:${r}; @c1:hsl(@color, @l1); @c2:hsl(@color, @l2); @c3:hsl(@color, @l3);  @fill:var(--fill-color, transparent); @text:var(--text-color, @c1); @border:var(--border-color, @c3); @active:@text; `;d("ws-avatar")` @color:@mono; @size:36px;  ${A("@layer-element","@layer-fill")}  disp:inline-flex; over:hidden; r:500px; fl.cross:center; fl.main:center; w:@size; h:@size; bg.c:@fill; t.c:@text; v.a:text-bottom;  ! & > img { w:100%; } ! & > object { w:100%; h:100%; disp:flex; fl.cross:center; fl.main:center; } `,d("ws-badge")` @color:@primary;  ${A("@layer-element","@layer-fill")}  pos:relative; disp:inline-grid; over:visible;  ! &::after { pos:absolute; *content:attr(ws-text); -x:-10px; y:0px; tf:translateY(-50%); bg.c:@c1; *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:@c2; t.lh:14px; z:@z-info; t.wt:600; } `;var L=' over:hidden; pos:relative; cur:pointer;  ! &::after { *content:""; pos:absolute; y:0px; x:0px; -y:0px; -x:0px; *pointer-events:none; o:0; bg.c:@active; tr:opacity @anim-time linear; } ! &:where(:not(:disabled)):active::after { tr:none; o:0.3; } ',E=' over:hidden; pos:relative;  ! |hover:hover| { ! &::before { *content:""; pos:absolute; y:0px; x:0px; -y:0px; -x:0px; *pointer-events:none; o:0; bg.c:@active; } ! &:where(:not(:disabled)):hover::before { tr:none; o:0.1; } } ';d(":where(button[data-ws], a[data-ws][button], label[data-ws][button])")` @color:@primary;  ${A("@layer-element","@layer-fill","@layer-border")}  pos:relative;  b:0px solid @border; font:@font;  t.c:@text; bg.c:@fill; r:@base-radius; cur:pointer; p:8px 16px; over:hidden; *user-select:none; disp:inline-flex; fl.cross:center; fl.main:center; t.deco:none; t.wt:500;  ! &:disabled { cur:default; *filter:saturate(30%) brightness(0.7); }  ${E} ${L} `,d("ws-chip")` @color:@mono;  ${A("@layer-element","@layer-fill","@layer-border")}  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 @border;  ! &[clickable] { cur:pointer; ${L} } `,d("label[control][data-ws]")` @color:@primary; @active:@mono;  pos:relative; disp:inline-grid; gr.areas:"label label label" "start control end" "extra extra extra"; gr.rows:minmax(0px, min-content) auto minmax(0px, min-content); gr.cols:minmax(0px, min-content) auto minmax(0px, min-content); *user-select:none; over:hidden; b:0px solid hsl(@color, @layer-border); bg.c:hsl(@active, @layer-container); r:@base-radius;  ! &:focus-within { @active:@color; }  ! &:has(:not(button):disabled) { *filter:saturate(50%) brightness(0.7); }  ! & > :is(input, select, ws-select, textarea) { area:control; b.w:0px; @color:inherit; ! &:focus { outln:none; } }  ! & > :where(input, textarea) { t.c:hsl(@mono, @layer-text); font:@font; h.min:28px; w:100%; h:100%; p:4px; bg.c:transparent; w.min:16px; }  ! & > :where(input[type="file"]) { pos:relative; p:0px;  ! &::file-selector-button { font:@font; h:100%; m:0px; m.r:4px; p:4px; t.c:hsl(@color, @layer-element); bg.c:transparent; b.w:0px; t.deco:underline; } }  ! & > [label-text] { area:label; p:4px; disp:flex; fl.dir:column; fl.cross:start; t.c:hsl(@color, @layer-element); t.ws:nowrap; t.sz:@text-size-normal; } `,b("caret-right-filled"),d(":where(details[data-ws])")` @color:@primary; @padding:8px;  ${A("@layer-element","@layer-fill")}  b:0px solid @c3; p:0px @padding; r:4px; over:hidden;  ! &:open { p.b:@padding; }  ! & > summary { t.c:@c1; pos:relative; p:4px; p.l:24px; m.x:calc(-1 * @padding); cur:pointer; *user-select:none;  ! &::before { pos:absolute; x:0px; y:50%; -y:0px; w:1em; disp:flex; fl.cross:center; fl.main:center; font:ws-icon-caret-right-filled; *speak:none; t.st:normal; t.wt:400; t.var:normal; t.tf:none; *content:"caret-right-filled"; tf:translateY(-50%); tr:transform 100ms linear; w:24px; h:24px; t.lh:24px; t.sz:18px; }  ! &::marker, &::-webkit-details-marker { *content:""; disp:none; } } ! &:open > summary::before { tf:translateY(-50%) rotate(90deg); } `,d("ws-dialog")` pos:absolute; x:50%; y:50%; tf:translate(-50%, -50%); tr:var(--dialog-transition, none); o:0; ! [open] > & { o:unset; } ! [inline-desktop] > & { pos:relative; } `,d("ws-drawer")` pos:absolute; x:0px; y:0px; -y:0px; disp:grid; tr:var(--drawer-transition, none); tf:translateX(-100%); ! [open] > & { tf:unset; } `,d("ws-flex")` flex:column; gap:8px; p:8px; over:hidden;  ! & > * { fl.shrink:0; } `,d("ws-grid")` disp:grid; over:hidden; gap:8px; p:8px; gr.rows.a:min-content; `,d("ws-icon")` disp:var(--icon-font, none); t.lh:1; ! &::before { disp:inline-block; font:@icon-font; *-webkit-font-smoothing:antialiased; *-moz-osx-font-smoothing:grayscale; *content:attr(data-icon); m.t:2px; } `,d("a[data-ws]:not([button])")` @color:@primary;  t.c:hsl(@color, @layer-element);  ! &:visited, &:hover { t.c:hsl(@color, @layer-element); }  ! &[disabled] { *pointer-events:none; *filter:saturation(30%) brightness(0.7); } `;const S=k` <style> :host { position:fixed; top:0px; left:0px; width:100vw; height:100vh; background-color:var(--modal-color); z-index:var(--z-cover); transition:var(--modal-transition, none); backdrop-filter:blur(2px); } ws-modal-overlay { position:absolute; inset:0px; } ws-modal-overlay:focus { outline:none; } :host(:not([open])) { visibility:hidden; } :host([clear]) { background-color:transparent; } @media (hover:hover) { :host([inline-desktop]) { position:relative; width:unset; height:unset; display:grid; grid-template-columns:1fr; grid-template-rows:1fr; z-index:unset; } :host([inline-desktop]) ws-modal-overlay { display:none; } } </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:true}),this.#e.append(S());}connectedCallback(){window.addEventListener("keydown",(e=>{ true!==(false===this.open||"Escape"!==e.key||true===this.persistent)&&this.hide();}));this.#e.querySelector("ws-modal-overlay").addEventListener("click",(e=>{ true!==this.persistent&&this.hide();}));}get open(){return this.hasAttribute("open")}set open(e){if(false===e){if(false===this.open)return;return this.removeAttribute("open"),void this.dispatchEvent(new Event("close"))}this.setAttribute("open","");}get persistent(){return this.hasAttribute("persistent")}set persistent(e){ false!==e?this.setAttribute("persistent",""):this.removeAttribute("persistent");}get managed(){return this.hasAttribute("managed")}set managed(e){ false!==e?this.setAttribute("managed",""):this.removeAttribute("managed");}show(){this.open=true;}hide(e){ true!==this.managed||true===e?this.open=false:this.dispatchEvent(new Event("close"));}});const q=k` <style> ws-popover-position { transition:var(--popover-transition, none); opacity:0; } [open] ws-popover-position { opacity:unset; } </style>  <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:true}),this.#e.append(q()),this.#t=this.#e.querySelector("ws-modal");}connectedCallback(){this.#t.addEventListener("close",(()=>{this.hide(),this.dispatchEvent(new Event("close"));})),false!==this.open&&(this.#t.open=this.open,this.setVars());}attributeChangedCallback(e,t,r){null!==r?(this.#t[e]=true,"open"===e&&this.setVars()):this.#t[e]=false;}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,false!==e?this.setAttribute("open",""):this.removeAttribute("open");}get persistent(){return this.hasAttribute("persistent")}set persistent(e){this.#t.persistent=e,false!==e?this.setAttribute("persistent",""):this.removeAttribute("persistent");}show(){this.open=true,this.focus();}hide(){this.open=false;}});const M=k` <style> @keyframes busy-load { from { transform:translateX(-100%); } to { transform:translateX(400%); } } :host { display:block; height:8px; border-radius:var(--base-radius); background-color:hsl(var(--mono), var(--layer-border)); position:relative; overflow:hidden; --color:var(--mono); } div::before, div::after { content:""; position:absolute; top:0px; left:0px; height:100%; --range:calc(var(--max, 1) - var(--min, 0)); --bar-width:calc(100% * var(--value, 0) / var(--range)); --buffer-width:calc(100% * var(--buffer, 0) / var(--range)); } div::before { background-color:hsl(var(--color), var(--layer-element)); } div::after { opacity:0.3; background-color:hsl(var(--color), var(--layer-element)); } :host(:not([busy])) div::before { width:var(--bar-width); } :host(:not([busy])) div::after { width:var(--buffer-width); } :host([busy]) div::before { width:25%; animation-name:busy-load; animation-iteration-count:infinite; animation-duration:2s; } </style>  <div></div> `;customElements.define("ws-progress",class extends HTMLElement{static observedAttributes=["min","max","value","buffer"];#r=null;constructor(){super();const e=this.attachShadow({mode:"closed"});e.append(M()),this.#r=e.querySelector("div");}get value(){return parseFloat(this.getAttribute("value")??"0")}get buffer(){return parseFloat(this.getAttribute("buffer")??"0")}get min(){return parseFloat(this.getAttribute("min")??"0")}get max(){return parseFloat(this.getAttribute("max")??"1")}get busy(){return this.hasAttribute("busy")}set value(e){ false===e&&this.removeAttribute("value"),this.setAttribute("value",e?.toString()??"");}set buffer(e){ false===e&&this.removeAttribute("buffer"),this.setAttribute("buffer",e?.toString()??"");}set min(e){ false===e&&this.removeAttribute("min"),this.setAttribute("min",e?.toString()??"");}set max(e){ false===e&&this.removeAttribute("max"),this.setAttribute("max",e?.toString()??"");}set busy(e){ false===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);}});const C="caret-down-filled";b(C),d("ws-option")` ${A("@layer-element","@layer-fill")}  disp:block; p:8px; *pointer-events:auto; t.c:@text-color-normal; w.min:fit-content;  ! &[selected] { bg.c:@c1; t.c:@c2; }  ! & * { *pointer-events:none; }  ${E} ${L} `,d("ws-optgroup")` grid; gr.cols:16px 1fr; *pointer-events:none;  ! &::before { *content:attr(label); disp:block; p:8px; col:1 / -1; bg.c:hsl(@color, @layer-container); }  ! & > * { col:2; } `;const T=k` <style> :host { --color:var(--mono); --modal-color:transparent; --max-height:250px; --c1:hsl(var(--color), var(--layer-border)); --c2: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(--c1); border-radius:var(--base-radius); padding:4px; --modal-transition:var(--select-cancel, visibility var(--anim-time) linear); --popover-transition:var(--select-cancel, opacity var(--anim-time) ease-out); --select-transition:var(--select-cancel, transform var(--anim-time) ease-out); }  slot[name=options] { display:block; overflow:visible; } ws-options { box-sizing:border-box; border:1px solid var(--c1); 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(--c2); grid-template-columns:1fr; border-radius:var(--base-radius); box-shadow:0px 2px 4px var(--shadow-color); transform:translateY(10px); transition:var(--select-transition);  --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); }  value-display { display:grid; user-select:none; grid-template-columns:1fr min-content; height:100%; } value-display:focus { outline:none; } ws-sel-caret { display:flex; align-items:center; justify-content:center; padding:4px; padding-right:0px; width:24px; } ws-sel-caret::before { display:block; font-family:ws-icon-${C}; content:attr(data-icon); } slot[name="selected"] { display:none; } slot[name="display"] { display:flex; align-items:center; } :host(:focus:not(:disabled)) { outline-style:auto; outline-width:1px; }  :host(:disabled) { filter:saturate(50%) brightness(0.8); } </style>  <value-display tabindex="0"> <slot name="selected"> <ws-selected>No Selection</ws-selected> </slot> <slot name="display"></slot> <ws-sel-caret data-icon="${C}"></ws-sel-caret> </value-display> <ws-popover> <slot slot="popover" name="options"> <ws-options> <slot></slot> </ws-options> </slot> </ws-popover> `,I="ws-option";customElements.define("ws-select",class extends HTMLElement{static formAssociated=true;#a=null;#s=-1;#i=null;#n=null;#l=null;#c=null;#e=null;#d=null;#p(){return [...this.querySelectorAll(I)]}#h(e){const t=Array.from(e,(e=>[...e.addedNodes])).flat();if(false===t.some((e=>e.tagName?.toLowerCase()===I)))return;const r=t.findLast((e=>e.tagName?.toLowerCase()===I&&true===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:true}),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:true,subtree:true}),this.#n=e,this.role="combobox",this.addEventListener("click",(()=>{this.open(),this.#d.focus();}),{passive:true}),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:true})),this.dispatchEvent(new Event("input",{bubbles:true})));}));}disconnectedCallback(){this.#n.disconnect();}get value(){return this.#a}set value(e){if(this.#a=e,null===e)return void(this.selectedIndex=-1);const t=this.#p(),r=t.find((t=>t.value===e||t.getAttribute("value")===e));this.selectedIndex=t.indexOf(r);}get selectedIndex(){return this.#s}set selectedIndex(e){this.#i?.removeAttribute("selected");const t=this.#p(),r=Math.min(e,t.length);this.#i=t[r]??null,this.#s=r,this.#i?.setAttribute("selected",""),this.#a=this.#i?.value??this.#i?.getAttribute("value")??this.#a,this.updatePreview();}updatePreview(){const e=this.querySelector("[slot=selected]")??this.#c;this.display.innerHTML=e.innerHTML,this.display.querySelector("ws-selected").innerHTML=this.#i?.getAttribute("preview")??this.#i?.innerHTML??this.getAttribute("blank")??"No Selection";}toggle(){null!==this.getAttribute("open")?this.close():this.open();}open(){this.setAttribute("open","");const e=this.querySelector("ws-options")??this.#e.querySelector("ws-options"),t=e.getBoundingClientRect();e.style.setProperty("--opt-h",`${t.height}px`),e.style.setProperty("--opt-w",`${t.width}px`),this.#l.show(),e.scrollTop=0,this.#i?.scrollIntoView();}close(){this.removeAttribute("open"),this.#l.hide();}__childValueMatch(e){const t=this.#p().indexOf(e);this.selectedIndex=t;}}),d("ws-surface")` @color:@mono;  ${A("@layer-surface","@layer-border")}  r:@base-radius; over:hidden; bg.c:@c1; b.c:@c2;  disp:grid; gr.cols:1fr; gr.rows:1fr; `,d("table[data-ws]")` @color:@primary;  *border-collapse:separate; *border-spacing:0px;  b.s:solid; b.c:hsl(@color, @layer-border); b.b.w:1px;  ! & th { bg.c:hsl(@color, @layer-container); } ! & :is(th, td:not(:empty)) { b.s:solid; b.c:hsl(@color, @layer-border); b.b.w:1px; p:4px; } ! & tbody tr:last-child :is(td, th) { b.b.w:0px; } ! &[sticky-header] thead { pos.stick; y:0px; z:+2; } ! &[sticky-header] th:first-child { pos.stick; z:+1; x:0px; -x:0px; } `,d("ws-text")` ! &[title] { t.sz:@text-size-title; disp:flex; fl.dir:column; p:0px 8px; fl.cross:start; fl.main:center; } ! &[header] { t.sz:@text-size-header; disp:flex; fl.dir:column; p:0px 8px; fl.cross:start; fl.main:center; } ! &[subtitle] { disp:inline-block; t.sz:@text-size-subtitle; p:0px 8px; } ! &[info] { disp:inline-block; t.sz:@text-size-info; } `,d("ws-tabs")` @color:@primary;  ${A("@layer-element","@layer-fill","@layer-border")}  disp:grid; gr.cols.a:1fr; gr.rows.a:1fr; gr.flow:column; *user-select:none; gap:4px; `,d("label[tab]")` @fill:transparent; @text:@c1; @active:@c1;  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, @c1); @active:unset; ! &::before { bg.c:@c1; } }  ${L} `,d("ws-titlebar")` @border-size:2px; @color:@primary; @text-color:initial; @fill-color:initial;  ${A("@layer-element","@layer-fill","@layer-border")}  layout.3col-controls; h.min:52px; *user-select:none; pos:relative; p:0px 2px;  t.c:@text; bg.c:@fill;  b.y:@border-size solid @border; `,d("ws-toast")` @color:@primary;  t.c:@page-text-color; bg.c:hsl(@color, @layer-surface);  pos:relative; disp:inline-grid; gr.cols:auto 1fr auto; gr.areas:"start content end"; r:@base-radius; *user-select:none; b:2px solid hsl(@color, @layer-element); h.min:32px; z:+0;  ! & > :where(*) { area:content; } ! &::before, &::after { *content:""; w.min:20px; bg.c:hsl(@color, @layer-element); z:-1; } ! &::before { area:start; } ! &::after { area:end; }  ! & > [notif-text] { disp:flex; fl.dir:column; fl.main:center; p:4px; }  ! & > :not([notif-text]) { t.c:hsl(@mono, @layer-fill); @color:inherit; var.fill; } `,d("ws-toaster")` pos:fixed; z:var(--z-notif); disp:grid; gr.cols:fr; p:0px; gap:8px; h:min-content; w:280px;  ! &[pos^="top-"] { y:20px; } ! &[pos^="center-"] { y:50%; tf:translateY(-50%); } ! &[pos^="bottom-"] { -y:20px; }  ! &[pos$="-left"] { x:20px; } ! &[pos$="-center"] { x:50%; tf:translateX(-50%); } ! &[pos$="-right"] { -x:20px; } `,b("square-dashed","square-check-filled","circle","circle-check-filled","circle-filled");const V=' @color:var(--toggle-color, @primary); @size:20px;  @core-color:hsl(@color, @layer-element);  pos:relative; w:@size; h:@size; appr:none; m:0px; t.c:@core-color; v.a:middle;  ! &::after { *content:""; pos:absolute; t.sz:calc(@size - 2px); *speak:none; t.st:normal; t.wt:400; t.var:normal; t.tf:none; y:50%; x:50%; w:@size; h:@size; tf:translate(-50%, -50%); disp:flex; fl.cross:center; fl.main:center; over:hidden; } ';d(":where(input[data-ws][type=checkbox]:not([switch]))")` ${V}  ! &::after { font:ws-icon-square-dashed; *content:"square-dashed"; } ! &:checked::after { font:ws-icon-square-check-filled; *content:"square-check-filled"; } `,d(":where(input[data-ws][type=radio])")` ${V}  ! &::after { font:ws-icon-circle; *content:"circle"; } ! &:checked::after { font:ws-icon-circle-check-filled; *content:"circle-check-filled"; } `,d(":where(input[data-ws][type=checkbox][switch])")` @color:@primary; @size:20px; @anim-time:100ms;  appr:none; m:0px; pos:relative; w:calc(@size * 2); h:@size; v.a:middle;  ! &::before { *content:""; pos:absolute; inset:calc(@size / 4); b:1px solid @color; r:calc(@size / 2); bg.c:hsl(@color, @layer-element); o:0.5; tr:background-color @anim-time linear; }  ! &::after { *content:""; pos:absolute; w:@size; h:@size; y:0px; x:0px; tr:left @anim-time linear, background-color @anim-time linear; bg.c:hsl(@mono, @layer-element); r:@size; } ! &:checked::after { x:@size; bg.c:hsl(@color, @layer-element); } `,d("label[data-ws][toggle]")` @color:@primary; @active:@mono;  pos:relative; *user-select:none; over:hidden; b:0px solid hsl(@color, @layer-border); bg.c:hsl(@active, @layer-container); r:@base-radius; p:4px;  disp:flex; fl.main:space-between;  ! &:focus-within { @active:@color; }  ! & > input { @color:inherit; ! &:focus { outln:none; } }  ! &:has(:not(button):disabled) { *filter:saturate(50%) brightness(0.7); } `,d("ws-tooltip")` @color:@mono;  pos.rel; disp:inline-grid;  ! &[pos]:hover::before { *content:attr(text); pos.abs; p:4px; bg.c:hsl(@color, @layer-container); b:1px solid hsl(@color, @layer-border); t.ws:nowrap; r:4px; z:+1; }  ! &[pos="top"]:hover::before { -y:calc(100% + 8px); x:50%; tf:translateX(-50%); } ! &[pos="bottom"]:hover::before { y:calc(100% + 8px); x:50%; tf:translateX(-50%); } ! &[pos="left"]:hover::before { -x:calc(100% + 8px); y:50%; tf:translateY(-50%); } ! &[pos="right"]:hover::before { x:calc(100% + 8px); y:50%; tf:translateY(-50%); } `;const j={},P=e=>{const t=(e=>{if(""===e||null===e||"true"===e)return;const t=c(o({raw:[e]})),a=(e=>{let t=5381;for(let r=0;r<e.length;r+=1)t=33*t^e.charCodeAt(r);return t.toString(36)})(t.join("\n"));if(j[a]=(j[a]??0)+1,j[a]>1)return a;const s=t.map((e=>e.replaceAll("&",`[data-wsid="${a}"]`)));return r.sheet.insertRule(`@layer ws.element { ${s.join("\n")} }`,r.sheet.cssRules.length),a})(e.dataset?.ws?.trim()??"");void 0!==t?e.dataset.wsid=t:delete e.dataset?.wsid;};new MutationObserver((e=>{const t=new Set(Array.from(e,(e=>[e.target,...Array.from(e.addedNodes,(e=>[e,...e.querySelectorAll?.("*")||[]]))])).flat(3));for(const e of t)P(e);})).observe(document.body,{subtree:true,attributes:true,childList:true,attributeFilter:["data-ws"]});for(const e of document.querySelectorAll("*"))P(e);
+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  false!==r.test(o)?(N+=1,o):e};let s=null;const i=o("@"),n=o(":"),l=a(/[^;]/),c=o(";"),d=o("*"),p=a(/[a-z0-9_\-]/i),h=o("!"),u=a(/[^{]/),g=o("{"),f=o("}"),b=a(/[a-zA-Z0-9\.\-_#\^\$\/]/),m=o("#"),x=a(/[^;#]/),v=a(/[\s]/m),w=()=>{const t=N;let r=null,o=null;return (r=P())===e||(o=z())===e?(N=t,e):[r,o]},y=()=>{const r=N;let o=null,a=null;return (o=m())===e||(a=(()=>{const r=N,o=N;for(;x()!==e;);return N-o==0?e:t.slice(r,N)})())===e?(N=r,e):[o,a]},k=()=>{s="rules";let t=N,r=null;const o=[];let a=null;for(;(a=w())!==e;)o.push(a);if(r=o,P()===e)return N=t,e;return r.map((e=>e[1]))},z=()=>{let t=null;return (t=$())!==e||(t=A())!==e||(t=L())!==e||(t=E())!==e?t:e},$=()=>{s="rule$0";let t=N,r=null;if((r=S())===e)return N=t,e;return r},A=()=>{s="rule$1";let t=N,r=null;if((r=q())===e)return N=t,e;return r},L=()=>{s="rule$2";let t=N,r=null;if((r=C())===e)return N=t,e;return r},E=()=>{s="rule$3";let t=N,r=null;if((r=T())===e)return N=t,e;return r},S=()=>{s="variable";let r=N,o=null,a=null;if(i()===e)return N=r,e;if((o=M())===e)return N=r,e;if(n()===e)return N=r,e;if(P()===e)return N=r,e;if((a=(()=>{const r=N,o=N;for(;l()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;if(c()===e)return N=r,e;return ((e,t)=>({type:"var",name:e,value:t}))(o,a)},q=()=>{s="css";let r=N,o=null,a=null;if(d()===e)return N=r,e;if((o=M())===e)return N=r,e;if(n()===e)return N=r,e;if(P()===e)return N=r,e;if((a=(()=>{const r=N,o=N;for(;l()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;if(c()===e)return N=r,e;return ((e,t)=>({type:"css",name:e,value:t}))(o,a)},M=()=>{s="cssName";let r=N,o=null;if((o=(()=>{const r=N,o=N;for(;p()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;return o},C=()=>{s="subrule";let r=N,o=null,a=null;if(h()===e)return N=r,e;if(P()===e)return N=r,e;if((o=(()=>{const r=N,o=N;for(;u()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;if(g()===e)return N=r,e;if((a=k())===e)return N=r,e;if(f()===e)return N=r,e;var i;return i=a,{type:"alt",selector:o.trim(),rules:i}},T=()=>{s="macro";let r=N,o=null,a=null;if((o=(()=>{const r=N,o=N;for(;b()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;const i=(()=>{const t=N;let r=null,o=null,a=null;return (r=n())===e||(o=P())===e||(a=I())===e?(N=t,e):[r,o,a]})();if(a=i===e?null:i,c()===e)return N=r,e;return ((e,t)=>({type:"macro",name:e,value:t?.[2]}))(o,a)},I=()=>{let t=null;return (t=V())!==e||(t=j())!==e?t:e},V=()=>{s="macroValue$0";let t=null;const r=[];let o=null;for(;(o=y())!==e;)r.push(o);if(0===r.length)return e;t=r;return (e=>{const t=e.map((e=>e[1].trim()));return t.arg=t.join(" "),t})(t)},j=()=>{s="macroValue$1";let r=N,o=null;if((o=(()=>{const r=N,o=N;for(;l()!==e;);return N-o==0?e:t.slice(r,N)})())===e)return N=r,e;return (e=>{const t=[e.trim()];return t.arg=e,t})(o)},P=()=>{for(s="_";v()!==e;);};let N=0;const H=(()=>{s="$";let t=N,r=null;if((r=k())===e)return N=t,e;return r})();return N!==t.length?(console.log("last",s),console.log("@",N),console.log(t.slice(N-10,N+10)),new Error("End of input not found")):H},r=document.createElement("style");r.setAttribute("data-name","windstorm-generated"),r.innerHTML="@layer ws.custom ws.user ws.element;",document.head.append(r);const o=(e,...r)=>{const o=String.raw(e,...r);return a(t(o),{"&":[]},"&")},a=(e,t,r)=>{for(const o of e)i(o,t,r);return t},s=e=>e.replace(/@([a-zA-Z0-9\-_]+)/g,((e,t)=>`var(--${t})`)),i=(e,t,r)=>{if("var"===e.type)return void t[r].push(`--${e.name}: ${s(e.value)};`);if("css"===e.type)return void t[r].push(`${e.name}: ${s(e.value)};`);if("macro"===e.type){const o=n[e.name];if(void 0===o)return void console.warn(`no macro for "${e.name}"`);for(const[a,i]of Object.entries(o)){const o=a.replace("&",r);t[o]=t[o]??[],t[o].push(...i.map((t=>s(t.replace(/%(arg|\d+)/g,((t,r)=>e.value?.[r]??""))))));}return}const o=e.selector.replaceAll("&",r);t[o]=[...t[o]??[]],a(e.rules,t,o);},n={},l=e=>void 0!==n[e]?()=>{}:(t,...r)=>n[e]=o(t,...r),c=e=>Object.entries(e).reduce(((e,[t,r])=>{if(true===t.startsWith("|")){const o=t.lastIndexOf("|"),a=[`@media (${t.slice(1,o)}) {`,`${`&${t.slice(o+1)}`} {`,...r,"}","}"].join("\n");return e.push(a),e}return e.push(`${t} {\n${r.join("\n")}\n}`),e}),[]),d=(e,t="ws.custom")=>(a,...s)=>{const i=o(a,...s);e.startsWith("@");const n=c(i).map((t=>t.replaceAll("&",e))),l=`@layer ${t} { ${n.join("\n")} }`;r.sheet.insertRule(l);};const p={origin:"https://wind-cdn.axel669.net",...window.wsConfig,version:"1.0.0-beta.10",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:true,attributes:true,childList:true,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("var.outln")`b.w:1px;`,l("var.fill")` @text-color:@c2; @fill-color:@c1; @active:@c2; b.c:transparent; `,l("fill.reset")` @text-color:initial; @fill-color:initial; `,l("var.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("raise")`sh.box:0px calc(%arg * 1px + 2px) calc(%arg * 1px + 1px) -1px @shadow-color; z:+%arg;`,l("raised")`raise:1;`,l("scrollable")`over:auto;`,l("#animate")` @modal-transition:visibility @anim-time linear; @dialog-transition:opacity @anim-time ease; @popover-transition:opacity @anim-time ease; @drawer-transition:transform @anim-time ease; `,l("#no-animate")` @modal-transition:none; @dialog-transition:none; @popover-transition:none; @drawer-transition:none; `,l("#no-select-animate")` @select-cancel:none; `,l("layout.base")` over:hidden; disp:grid; ! body > & { pos:absolute; x:0px; y:0px; w:100%; h:100%; } ! :where(&) > * { area:content; } `,l("layout.3x3-center")` layout.base; @width:auto; @height:auto;  disp:grid; gr.cols:[left-start top-start bottom-start] 1fr [left-end content-start] @width [content-end right-start] 1fr [right-end top-end bottom-end] ; gr.rows:[top-start left-start right-start] 1fr [top-end content-start] @height [content-end bottom-start] 1fr [bottom-end left-end right-end] ; `,l("layout.3row-center")` @height:auto;  layout.base; disp:grid; gr.cols.a:1fr; gr.rows:1fr @height 1fr; gr.areas:"top" "content" "bottom"; `,l("layout.3col-center")` @width:auto;  layout.base; disp:grid; gr.cols:1fr @width 1fr; gr.rows.a:1fr; gr.areas:"left content right"; `,l("layout.3row-controls")` layout.base; disp:grid; gr.cols.a:1fr; gr.rows:min-content 1fr min-content; gr.areas:"header" "content" "footer"; `,l("layout.3col-controls")` layout.base; disp:grid; gr.cols:min-content 1fr min-content; gr.rows.a:1fr; gr.areas:"menu content action"; `,l("layout.2col-sidebar")` layout.base; @col-a:1fr; @col-b:2fr; disp:grid; gr.cols:@col-a @col-b; gr.rows.a:1fr; gr.areas:"sidebar content"; `;const m=e=>Object.entries(e).reduce(((e,t)=>{const[r,o]=t;return null==o||false===o?e:true===o?(e.push(`${r};`),e):"object"==typeof o?(e.push(`${r} { ${m(o)} }`),e):(e.push(`${r}: ${o};`),e)}),[]).join(" "),x=(e,t="ws.user")=>d(e,t),v=p.version,w={get mobile(){return matchMedia("(hover: none)")}};d("*")` *box-sizing:border-box; *-webkit-tap-highlight-color:transparent; *border-width:0px; *border-style:solid; *outline-color:hsl(@mono, @layer-text); `,d("html, body")` *padding:0px; *margin:0px; *width:100%; *height:100%; *-webkit-tap-highlight-color:transparent; *-webkit-font-smoothing:antialiased; `,d("@font-face",null)` *font-family:Tektur; *font-display:swap; *src:url(${p.origin}/font/tektur.woff2?v${p.version}) format("woff2") ; `,d("@font-face",null)` *font-family:Roboto; *font-display:swap; *src:url(${p.origin}/font/roboto.woff2?v${p.version}) format("woff2") ; `;const y=Math.ceil(screen.height*devicePixelRatio*10)%10>=5;l("#theme.base")` font:@font;  @sub-pixel-offset:${y?1:0}px; @z-info:5; @z-cover:25; @z-notif:50; @z-layer:100;  @base-radius:4px; @anim-time:250ms; @short-anim-time:150ms;  @text-size-normal:15px; @text-size-title:calc(@text-size-normal * 2); @text-size-header:calc(@text-size-normal * 1.5); @text-size-subtitle:calc(@text-size-normal * 0.9); @text-size-info:calc(@text-size-normal * 0.75);  @color:@mono;  @page-text-color:hsl(@color, @layer-text); bg.c:hsl(@color, @layer-bg); t.c:@page-text-color; t.sz:@text-size-normal; `,l("#theme.tron")` #theme.base;  @font:Tektur;  @mono:0, 0%; @primary:184, 80%; @accent:160, 80%; @info:208, 80%; @success:130, 80%; @warning:58, 80%; @error:4, 80%;  @layer-bg:10%; @layer-surface:5%; @layer-element:60%; @layer-container:10%; @layer-border:25%; @layer-text:95%; @layer-fill:5%;  @shadow-color:hsla(0, 0%, 69%, 0.25); @modal-color:hsla(0, 0%, 0%, 0.05);  *color-scheme:dark; `,l("#theme.dark")` #theme.base; @font:Roboto;  @mono:0, 0%; @primary:184, 80%; @accent:160, 80%; @info:208, 80%; @success:130, 80%; @warning:58, 80%; @error:4, 80%;  @layer-bg:20%; @layer-surface:10%; @layer-element:50%; @layer-container:15%; @layer-border:30%; @layer-text:90%; @layer-fill:10%;  @shadow-color:hsla(0, 0%, 69%, 0.25); @modal-color:hsla(0, 0%, 0%, 0.05);  *color-scheme:dark; `,l("#theme.light")` #theme.base; @font:Roboto;  @mono:0, 0%; @primary:184, 70%; @accent:160, 85%; @info:208, 85%; @success:130, 90%; @warning:58, 85%; @error:4, 80%;  @layer-bg:85%; @layer-surface:95%; @layer-element:37.5%; @layer-container:90%; @layer-border:80%; @layer-text:10%; @layer-fill:95%;  @shadow-color:hsla(0, 0%, 20%, 0.25); @modal-color:hsla(0, 0%, 0%, 0.05); `;var k=(e,...t)=>{const r=String.raw(e,...t),o=document.createElement("template");return o.innerHTML=r,()=>o.content.cloneNode(true)};d("ws-circle-spinner, ws-hexagon-spinner")` @size:100px;  w:@size; h:@size; disp:inline-block; `;const z=k` <style> :host { --color:var(--primary); --core-color:hsl(var(--color), var(--layer-element)); --alt-color:hsl(var(--color), var(--layer-border)); --size:200px; } svg { width:var(--size); height:var(--size); } @keyframes turn { 0% { transform:rotate(0deg); } 100% { transform:rotate(360deg); } } circle { animation-name:turn; animation-duration:calc(1000ms * var(--n)); animation-iteration-count:infinite; animation-timing-function:ease; stroke:var(--c); stroke-width:6; fill:none; animation-direction:var(--anim); } </style> <svg viewbox="-50 -50 100 100"> <circle style="--c:var(--core-color);--o:1; --anim:forward; --n:2.5;" cx=0 cy=0 r=45 stroke-dasharray="45 45"></circle> <circle style="--c:var(--alt-color);--o:0.5; --anim:reverse; --n:2;" cx=0 cy=0 r=35 stroke-dasharray="35 35"></circle> <circle style="--c:var(--core-color);--o:0.75; --anim:forward; --n:3.5;" cx=0 cy=0 r=25 stroke-dasharray="25 25"></circle> </svg> `;customElements.define("ws-circle-spinner",class extends HTMLElement{constructor(){super();this.attachShadow({mode:"closed"}).appendChild(z());}});const $=k` <style> :host { --color:var(--primary); --core-color:hsl(var(--color), var(--layer-element)); --alt-color:hsl(var(--color), var(--layer-border)); --size:200px; } svg { width:var(--size); height:var(--size); } circle { stroke-width:0; fill:var(--c); offset-path:path("M 0 -45 L 39 -22.5 L 39 22.5 L 0 45 L -39 22.5 L -39 -22.5 L 0 -45"); animation-name:mover; animation-duration:3000ms; animation-iteration-count:infinite; animation-timing-function:linear; } @keyframes mover { 0% { offset-distance:0%; } 100% { offset-distance:100%; } } @keyframes trail { 0% { stroke-dashoffset:0; } 100% { stroke-dashoffset:var(--len); } } path { animation-name:trail; animation-duration:3000ms; animation-iteration-count:infinite; animation-timing-function:linear; stroke:var(--c); stroke-width:6; fill:none; animation-direction:var(--anim); } </style> <svg viewbox="-50 -50 100 100"> <path d="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" /> <path 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" style="--c:var(--core-color); --anim:reverse; --len:135;" stroke-dasharray="22.5 22.5" /> <circle r="3" style="--c:var(--core-color); animation-delay:-250ms;"/> <circle r="3" style="--c:var(--core-color); animation-delay:-1250ms;" /> <circle r="3" style="--c:var(--core-color); animation-delay:-2250ms;" /> </svg> `;customElements.define("ws-hexagon-spinner",class extends HTMLElement{constructor(){super();this.attachShadow({mode:"closed"}).appendChild($());}});var A=(e,t,r)=>` @l1:${e}; @l2:${t}; @l3:${r}; @c1:hsl(@color, @l1); @c2:hsl(@color, @l2); @c3:hsl(@color, @l3);  @fill:var(--fill-color, transparent); @text:var(--text-color, @c1); @border:var(--border-color, @c3); @active:@text; `;d("ws-avatar")` @color:@mono; @size:36px;  ${A("@layer-element","@layer-fill")}  disp:inline-flex; over:hidden; r:500px; fl.cross:center; fl.main:center; w:@size; h:@size; bg.c:@fill; t.c:@text; v.a:text-bottom;  ! & > img { w:100%; } ! & > object { w:100%; h:100%; disp:flex; fl.cross:center; fl.main:center; } `,d("ws-badge")` @color:@primary;  ${A("@layer-element","@layer-fill")}  pos:relative; disp:inline-grid; over:visible;  ! &::after { pos:absolute; *content:attr(ws-text); -x:-10px; y:0px; tf:translateY(-50%); bg.c:@c1; *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:@c2; t.lh:14px; z:@z-info; t.wt:600; } `;var L=' over:hidden; pos:relative; cur:pointer;  ! &::after { *content:""; pos:absolute; y:0px; x:0px; -y:0px; -x:0px; *pointer-events:none; o:0; bg.c:@active; tr:opacity @anim-time linear; } ! &:where(:not(:disabled)):active::after { tr:none; o:0.3; } ',E=' over:hidden; pos:relative;  ! |hover:hover| { ! &::before { *content:""; pos:absolute; y:0px; x:0px; -y:0px; -x:0px; *pointer-events:none; o:0; bg.c:@active; } ! &:where(:not(:disabled)):hover::before { tr:none; o:0.1; } } ';d(":where(button[data-ws], a[data-ws][button], label[data-ws][button])")` @color:@primary;  ${A("@layer-element","@layer-fill","@layer-border")}  pos:relative;  b:0px solid @border; font:@font;  t.c:@text; bg.c:@fill; r:@base-radius; cur:pointer; p:8px 16px; over:hidden; *user-select:none; disp:inline-flex; fl.cross:center; fl.main:center; t.deco:none; t.wt:500;  ! &:disabled { cur:default; *filter:saturate(30%) brightness(0.7); }  ${E} ${L} `,d("ws-chip")` @color:@mono;  ${A("@layer-element","@layer-fill","@layer-border")}  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 @border;  ! &[clickable] { cur:pointer; ${L} } `,d("label[control][data-ws]")` @color:@primary; @active:@mono;  pos:relative; disp:inline-grid; gr.areas:"label label label" "start control end" "extra extra extra"; gr.rows:minmax(0px, min-content) auto minmax(0px, min-content); gr.cols:minmax(0px, min-content) auto minmax(0px, min-content); *user-select:none; over:hidden; b:0px solid hsl(@color, @layer-border); bg.c:hsl(@active, @layer-container); r:@base-radius;  ! &:focus-within { @active:@color; }  ! &:has(:not(button):disabled) { *filter:saturate(50%) brightness(0.7); }  ! & > :is(input, select, ws-select, textarea) { area:control; b.w:0px; @color:inherit; ! &:focus { outln:none; } }  ! & > :where(input, textarea) { t.c:hsl(@mono, @layer-text); font:@font; h.min:28px; w:100%; h:100%; p:4px; bg.c:transparent; w.min:16px; }  ! & > :where(input[type="file"]) { pos:relative; p:0px;  ! &::file-selector-button { font:@font; h:100%; m:0px; m.r:4px; p:4px; t.c:hsl(@color, @layer-element); bg.c:transparent; b.w:0px; t.deco:underline; } }  ! & > [label-text] { area:label; p:4px; disp:flex; fl.dir:column; fl.cross:start; t.c:hsl(@color, @layer-element); t.ws:nowrap; t.sz:@text-size-normal; } `,b("caret-right-filled"),d(":where(details[data-ws])")` @color:@primary; @padding:8px;  ${A("@layer-element","@layer-fill")}  b:0px solid @c3; p:0px @padding; r:4px; over:hidden;  ! &:open { p.b:@padding; }  ! & > summary { t.c:@c1; pos:relative; p:4px; p.l:24px; m.x:calc(-1 * @padding); cur:pointer; *user-select:none;  ! &::before { pos:absolute; x:0px; y:50%; -y:0px; w:1em; disp:flex; fl.cross:center; fl.main:center; font:ws-icon-caret-right-filled; *speak:none; t.st:normal; t.wt:400; t.var:normal; t.tf:none; *content:"caret-right-filled"; tf:translateY(-50%); tr:transform 100ms linear; w:24px; h:24px; t.lh:24px; t.sz:18px; }  ! &::marker, &::-webkit-details-marker { *content:""; disp:none; } } ! &:open > summary::before { tf:translateY(-50%) rotate(90deg); } `,d("ws-dialog")` pos:absolute; x:50%; y:50%; tf:translate(-50%, -50%); tr:var(--dialog-transition, none); o:0; ! [open] > & { o:unset; } ! [inline-desktop] > & { pos:relative; } `,d("ws-drawer")` pos:absolute; x:0px; y:0px; -y:0px; disp:grid; tr:var(--drawer-transition, none); tf:translateX(-100%); ! [open] > & { tf:unset; } `,d("ws-flex")` flex:column; gap:8px; p:8px; over:hidden;  ! & > * { fl.shrink:0; } `,d("ws-grid")` disp:grid; over:hidden; gap:8px; p:8px; gr.rows.a:min-content; `,d("ws-icon")` disp:var(--icon-font, none); t.lh:1; ! &::before { disp:inline-block; font:@icon-font; *-webkit-font-smoothing:antialiased; *-moz-osx-font-smoothing:grayscale; *content:attr(data-icon); *word-break:keep-all; m.t:2px; } `,d("a[data-ws]:not([button])")` @color:@primary;  t.c:hsl(@color, @layer-element);  ! &:visited, &:hover { t.c:hsl(@color, @layer-element); }  ! &[disabled] { *pointer-events:none; *filter:saturation(30%) brightness(0.7); } `;const S=k` <style> :host { position:fixed; top:0px; left:0px; width:100vw; height:100vh; background-color:var(--modal-color); z-index:var(--z-cover); transition:var(--modal-transition, none); backdrop-filter:blur(2px); } ws-modal-overlay { position:absolute; inset:0px; } ws-modal-overlay:focus { outline:none; } :host(:not([open])) { visibility:hidden; } :host([clear]) { background-color:transparent; } @media (hover:hover) { :host([inline-desktop]) { position:relative; width:unset; height:unset; display:grid; grid-template-columns:1fr; grid-template-rows:1fr; z-index:unset; } :host([inline-desktop]) ws-modal-overlay { display:none; } } </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:true}),this.#e.append(S());}connectedCallback(){window.addEventListener("keydown",(e=>{ true!==(false===this.open||"Escape"!==e.key||true===this.persistent)&&this.hide();}));this.#e.querySelector("ws-modal-overlay").addEventListener("click",(e=>{ true!==this.persistent&&this.hide();}));}get open(){return this.hasAttribute("open")}set open(e){if(false===e){if(false===this.open)return;return this.removeAttribute("open"),void this.dispatchEvent(new Event("close"))}this.setAttribute("open","");}get persistent(){return this.hasAttribute("persistent")}set persistent(e){ false!==e?this.setAttribute("persistent",""):this.removeAttribute("persistent");}get managed(){return this.hasAttribute("managed")}set managed(e){ false!==e?this.setAttribute("managed",""):this.removeAttribute("managed");}show(){this.open=true;}hide(e){ true!==this.managed||true===e?this.open=false:this.dispatchEvent(new Event("close"));}});const q=k` <style> ws-popover-position { transition:var(--popover-transition, none); opacity:0; } [open] ws-popover-position { opacity:unset; } </style>  <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:true}),this.#e.append(q()),this.#t=this.#e.querySelector("ws-modal");}connectedCallback(){this.#t.addEventListener("close",(()=>{this.hide(),this.dispatchEvent(new Event("close"));})),false!==this.open&&(this.#t.open=this.open,this.setVars());}attributeChangedCallback(e,t,r){null!==r?(this.#t[e]=true,"open"===e&&this.setVars()):this.#t[e]=false;}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,false!==e?this.setAttribute("open",""):this.removeAttribute("open");}get persistent(){return this.hasAttribute("persistent")}set persistent(e){this.#t.persistent=e,false!==e?this.setAttribute("persistent",""):this.removeAttribute("persistent");}show(){this.open=true,this.focus();}hide(){this.open=false;}});const M=k` <style> @keyframes busy-load { from { transform:translateX(-100%); } to { transform:translateX(400%); } } :host { display:block; height:8px; border-radius:var(--base-radius); background-color:hsl(var(--mono), var(--layer-border)); position:relative; overflow:hidden; --color:var(--mono); } div::before, div::after { content:""; position:absolute; top:0px; left:0px; height:100%; --range:calc(var(--max, 1) - var(--min, 0)); --bar-width:calc(100% * var(--value, 0) / var(--range)); --buffer-width:calc(100% * var(--buffer, 0) / var(--range)); } div::before { background-color:hsl(var(--color), var(--layer-element)); } div::after { opacity:0.3; background-color:hsl(var(--color), var(--layer-element)); } :host(:not([busy])) div::before { width:var(--bar-width); } :host(:not([busy])) div::after { width:var(--buffer-width); } :host([busy]) div::before { width:25%; animation-name:busy-load; animation-iteration-count:infinite; animation-duration:2s; } </style>  <div></div> `;customElements.define("ws-progress",class extends HTMLElement{static observedAttributes=["min","max","value","buffer"];#r=null;constructor(){super();const e=this.attachShadow({mode:"closed"});e.append(M()),this.#r=e.querySelector("div");}get value(){return parseFloat(this.getAttribute("value")??"0")}get buffer(){return parseFloat(this.getAttribute("buffer")??"0")}get min(){return parseFloat(this.getAttribute("min")??"0")}get max(){return parseFloat(this.getAttribute("max")??"1")}get busy(){return this.hasAttribute("busy")}set value(e){ false===e&&this.removeAttribute("value"),this.setAttribute("value",e?.toString()??"");}set buffer(e){ false===e&&this.removeAttribute("buffer"),this.setAttribute("buffer",e?.toString()??"");}set min(e){ false===e&&this.removeAttribute("min"),this.setAttribute("min",e?.toString()??"");}set max(e){ false===e&&this.removeAttribute("max"),this.setAttribute("max",e?.toString()??"");}set busy(e){ false===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);}});const C="caret-down-filled";b(C),d("ws-option")` ${A("@layer-element","@layer-fill")}  disp:block; p:8px; *pointer-events:auto; t.c:@text-color-normal; w.min:fit-content;  ! &[selected] { bg.c:@c1; t.c:@c2; }  ! & * { *pointer-events:none; }  ${E} ${L} `,d("ws-optgroup")` grid; gr.cols:16px 1fr; *pointer-events:none;  ! &::before { *content:attr(label); disp:block; p:8px; col:1 / -1; bg.c:hsl(@color, @layer-container); }  ! & > * { col:2; } `;const T=k` <style> :host { --color:var(--mono); --modal-color:transparent; --max-height:250px; --c1:hsl(var(--color), var(--layer-border)); --c2: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(--c1); border-radius:var(--base-radius); padding:4px; --modal-transition:var(--select-cancel, visibility var(--anim-time) linear); --popover-transition:var(--select-cancel, opacity var(--anim-time) ease-out); --select-transition:var(--select-cancel, transform var(--anim-time) ease-out); }  slot[name=options] { display:block; overflow:visible; } ws-options { box-sizing:border-box; border:1px solid var(--c1); 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(--c2); grid-template-columns:1fr; border-radius:var(--base-radius); box-shadow:0px 2px 4px var(--shadow-color); transform:translateY(10px); transition:var(--select-transition);  --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); }  value-display { display:grid; user-select:none; grid-template-columns:1fr min-content; height:100%; } value-display:focus { outline:none; } ws-sel-caret { display:flex; align-items:center; justify-content:center; padding:4px; padding-right:0px; width:24px; } ws-sel-caret::before { display:block; font-family:ws-icon-${C}; content:attr(data-icon); } slot[name="selected"] { display:none; } slot[name="display"] { display:flex; align-items:center; } :host(:focus:not(:disabled)) { outline-style:auto; outline-width:1px; }  :host(:disabled) { filter:saturate(50%) brightness(0.8); } </style>  <value-display tabindex="0"> <slot name="selected"> <ws-selected>No Selection</ws-selected> </slot> <slot name="display"></slot> <ws-sel-caret data-icon="${C}"></ws-sel-caret> </value-display> <ws-popover> <slot slot="popover" name="options"> <ws-options> <slot></slot> </ws-options> </slot> </ws-popover> `,I="ws-option";customElements.define("ws-select",class extends HTMLElement{static formAssociated=true;#a=null;#s=-1;#i=null;#n=null;#l=null;#c=null;#e=null;#d=null;#p(){return [...this.querySelectorAll(I)]}#h(e){const t=Array.from(e,(e=>[...e.addedNodes])).flat();if(false===t.some((e=>e.tagName?.toLowerCase()===I)))return;const r=t.findLast((e=>e.tagName?.toLowerCase()===I&&true===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:true}),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:true,subtree:true}),this.#n=e,this.role="combobox",this.addEventListener("click",(()=>{this.open(),this.#d.focus();}),{passive:true}),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:true})),this.dispatchEvent(new Event("input",{bubbles:true})));}));}disconnectedCallback(){this.#n.disconnect();}get value(){return this.#a}set value(e){if(this.#a=e,null===e)return void(this.selectedIndex=-1);const t=this.#p(),r=t.find((t=>t.value===e||t.getAttribute("value")===e));this.selectedIndex=t.indexOf(r);}get selectedIndex(){return this.#s}set selectedIndex(e){this.#i?.removeAttribute("selected");const t=this.#p(),r=Math.min(e,t.length);this.#i=t[r]??null,this.#s=r,this.#i?.setAttribute("selected",""),this.#a=this.#i?.value??this.#i?.getAttribute("value")??this.#a,this.updatePreview();}updatePreview(){const e=this.querySelector("[slot=selected]")??this.#c;this.display.innerHTML=e.innerHTML,this.display.querySelector("ws-selected").innerHTML=this.#i?.getAttribute("preview")??this.#i?.innerHTML??this.getAttribute("blank")??"No Selection";}toggle(){null!==this.getAttribute("open")?this.close():this.open();}open(){this.setAttribute("open","");const e=this.querySelector("ws-options")??this.#e.querySelector("ws-options"),t=e.getBoundingClientRect();e.style.setProperty("--opt-h",`${t.height}px`),e.style.setProperty("--opt-w",`${t.width}px`),this.#l.show(),e.scrollTop=0,this.#i?.scrollIntoView();}close(){this.removeAttribute("open"),this.#l.hide();}__childValueMatch(e){const t=this.#p().indexOf(e);this.selectedIndex=t;}}),d("ws-surface")` @color:@mono;  ${A("@layer-surface","@layer-border")}  r:@base-radius; over:hidden; bg.c:@c1; b.c:@c2;  disp:grid; gr.cols:1fr; gr.rows:1fr; `,d("table[data-ws]")` @color:@primary;  *border-collapse:separate; *border-spacing:0px;  b.s:solid; b.c:hsl(@color, @layer-border); b.b.w:1px;  ! & th { bg.c:hsl(@color, @layer-container); } ! & :is(th, td:not(:empty)) { b.s:solid; b.c:hsl(@color, @layer-border); b.b.w:1px; p:4px; } ! & tbody tr:last-child :is(td, th) { b.b.w:0px; } ! &[sticky-header] thead { pos.stick; y:0px; z:+2; } ! &[sticky-header] th:first-child { pos.stick; z:+1; x:0px; -x:0px; } `,d("ws-text")` ! &[title] { t.sz:@text-size-title; disp:flex; fl.dir:column; p:0px 8px; fl.cross:start; fl.main:center; } ! &[header] { t.sz:@text-size-header; disp:flex; fl.dir:column; p:0px 8px; fl.cross:start; fl.main:center; } ! &[subtitle] { disp:inline-block; t.sz:@text-size-subtitle; p:0px 8px; } ! &[info] { disp:inline-block; t.sz:@text-size-info; } `,d("ws-tabs")` @color:@primary;  ${A("@layer-element","@layer-fill","@layer-border")}  disp:grid; gr.cols.a:1fr; gr.rows.a:1fr; gr.flow:column; *user-select:none; gap:4px; `,d("label[tab]")` @fill:transparent; @text:@c1; @active:@c1;  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, @c1); @active:unset; ! &::before { bg.c:@c1; } }  ${L} `,d("ws-titlebar")` @border-size:2px; @color:@primary; @text-color:initial; @fill-color:initial;  ${A("@layer-element","@layer-fill","@layer-border")}  layout.3col-controls; h.min:52px; *user-select:none; pos:relative; p:0px 2px;  t.c:@text; bg.c:@fill;  b.y:@border-size solid @border; `,d("ws-toast")` @color:@primary;  t.c:@page-text-color; bg.c:hsl(@color, @layer-surface);  pos:relative; disp:inline-grid; gr.cols:auto 1fr auto; gr.areas:"start content end"; r:@base-radius; *user-select:none; b:2px solid hsl(@color, @layer-element); h.min:32px; z:+0;  ! & > :where(*) { area:content; } ! &::before, &::after { *content:""; w.min:20px; bg.c:hsl(@color, @layer-element); z:-1; } ! &::before { area:start; } ! &::after { area:end; }  ! & > [notif-text] { disp:flex; fl.dir:column; fl.main:center; p:4px; }  ! & > :not([notif-text]) { t.c:hsl(@mono, @layer-fill); @color:inherit; var.fill; } `,d("ws-toaster")` pos:fixed; z:var(--z-notif); disp:grid; gr.cols:fr; p:0px; gap:8px; h:min-content; w:280px;  ! &[pos^="top-"] { y:20px; } ! &[pos^="center-"] { y:50%; tf:translateY(-50%); } ! &[pos^="bottom-"] { -y:20px; }  ! &[pos$="-left"] { x:20px; } ! &[pos$="-center"] { x:50%; tf:translateX(-50%); } ! &[pos$="-right"] { -x:20px; } `,b("square-dashed","square-check-filled","circle","circle-check-filled","circle-filled");const V=' @color:var(--toggle-color, @primary); @size:20px;  @core-color:hsl(@color, @layer-element);  pos:relative; w:@size; h:@size; appr:none; m:0px; t.c:@core-color; v.a:middle;  ! &::after { *content:""; pos:absolute; t.sz:calc(@size - 2px); *speak:none; t.st:normal; t.wt:400; t.var:normal; t.tf:none; y:50%; x:50%; w:@size; h:@size; tf:translate(-50%, -50%); disp:flex; fl.cross:center; fl.main:center; over:hidden; } ';d(":where(input[data-ws][type=checkbox]:not([switch]))")` ${V}  ! &::after { font:ws-icon-square-dashed; *content:"square-dashed"; } ! &:checked::after { font:ws-icon-square-check-filled; *content:"square-check-filled"; } `,d(":where(input[data-ws][type=radio])")` ${V}  ! &::after { font:ws-icon-circle; *content:"circle"; } ! &:checked::after { font:ws-icon-circle-check-filled; *content:"circle-check-filled"; } `,d(":where(input[data-ws][type=checkbox][switch])")` @color:@primary; @size:20px; @anim-time:100ms;  appr:none; m:0px; pos:relative; w:calc(@size * 2); h:@size; v.a:middle;  ! &::before { *content:""; pos:absolute; inset:calc(@size / 4); b:1px solid @color; r:calc(@size / 2); bg.c:hsl(@color, @layer-element); o:0.5; tr:background-color @anim-time linear; }  ! &::after { *content:""; pos:absolute; w:@size; h:@size; y:0px; x:0px; tr:left @anim-time linear, background-color @anim-time linear; bg.c:hsl(@mono, @layer-element); r:@size; } ! &:checked::after { x:@size; bg.c:hsl(@color, @layer-element); } `,d("label[data-ws][toggle]")` @color:@primary; @active:@mono;  pos:relative; *user-select:none; over:hidden; b:0px solid hsl(@color, @layer-border); bg.c:hsl(@active, @layer-container); r:@base-radius; p:4px;  disp:flex; fl.main:space-between;  ! &:focus-within { @active:@color; }  ! & > input { @color:inherit; ! &:focus { outln:none; } }  ! &:has(:not(button):disabled) { *filter:saturate(50%) brightness(0.7); } `,d("ws-tooltip")` @color:@mono;  pos.rel; disp:inline-grid;  ! &[pos]:hover::before { *content:attr(text); pos.abs; p:4px; bg.c:hsl(@color, @layer-container); b:1px solid hsl(@color, @layer-border); t.ws:nowrap; r:4px; z:+1; }  ! &[pos="top"]:hover::before { -y:calc(100% + 8px); x:50%; tf:translateX(-50%); } ! &[pos="bottom"]:hover::before { y:calc(100% + 8px); x:50%; tf:translateX(-50%); } ! &[pos="left"]:hover::before { -x:calc(100% + 8px); y:50%; tf:translateY(-50%); } ! &[pos="right"]:hover::before { x:calc(100% + 8px); y:50%; tf:translateY(-50%); } `;const j={},P=e=>{const t=(e=>{if(""===e||null===e||"true"===e)return;const t=c(o({raw:[e]})),a=(e=>{let t=5381;for(let r=0;r<e.length;r+=1)t=33*t^e.charCodeAt(r);return t.toString(36)})(t.join("\n"));if(j[a]=(j[a]??0)+1,j[a]>1)return a;const s=t.map((e=>e.replaceAll("&",`[data-wsid="${a}"]`)));return r.sheet.insertRule(`@layer ws.element { ${s.join("\n")} }`,r.sheet.cssRules.length),a})(e.dataset?.ws?.trim()??"");void 0!==t?e.dataset.wsid=t:delete e.dataset?.wsid;};new MutationObserver((e=>{const t=new Set(Array.from(e,(e=>[e.target,...Array.from(e.addedNodes,(e=>[e,...e.querySelectorAll?.("*")||[]]))])).flat(3));for(const e of t)P(e);})).observe(document.body,{subtree:true,attributes:true,childList:true,attributeFilter:["data-ws"]});for(const e of document.querySelectorAll("*"))P(e);
 
 var wsEsm = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -1072,6 +1169,7 @@ const ControlLabel = (props) => {
         { control: true, ws: ws, ...rest },
         slot.label
             ? [
+                  ,
                   Element(
                       "ws-text",
                       { "label-text": true, ws: labelWS },
@@ -1084,6 +1182,7 @@ const ControlLabel = (props) => {
         children,
         slot.start
             ? [
+                  ,
                   Element(
                       "ze-input-start",
                       { ws: "area: start; grid;" },
@@ -1095,6 +1194,7 @@ const ControlLabel = (props) => {
             : [],
         slot.end
             ? [
+                  ,
                   Element(
                       "ze-input-end",
                       { ws: "area: end; grid;" },
@@ -1106,6 +1206,7 @@ const ControlLabel = (props) => {
             : [],
         slot.extra
             ? [
+                  ,
                   Element(
                       "ze-input-extra",
                       { ws: "area: extra; grid;" },
@@ -1337,11 +1438,13 @@ const DataTable = (props) => {
                         {},
                         data?.length > 0
                             ? [
+                                  ,
                                   Element(TableHeader, {
                                       keys: keys,
                                   }),
                               ]
                             : [
+                                  ,
                                   Element(
                                       "tr",
                                       {},
@@ -1428,6 +1531,7 @@ const Titlebar = (props) => {
         { ws: ws, ...rest },
         slot.menu !== undefined
             ? [
+                  ,
                   Element(
                       "ze-menu",
                       { ws: "flex; area: menu;" },
@@ -1440,6 +1544,7 @@ const Titlebar = (props) => {
         children,
         slot.action !== undefined
             ? [
+                  ,
                   Element(
                       "ze-action",
                       { ws: "flex; area: action;" },
@@ -1604,11 +1709,8 @@ const Prompt = (props) => {
                             placeholder: placeholder,
                             $$value: {
                                 value: local.text,
-                                update: (e) =>
-                                    (local.text =
-                                        getInputValue(
-                                            e.target,
-                                        )),
+                                type: "bind",
+                                update: (next) => (local.text = next),
                             },
                             ref: lock(
                                 (node) =>
@@ -1642,7 +1744,7 @@ const Prompt = (props) => {
 eventNames["ws-modal.open"] = "close";
 registerInputValue("ws-modal", () => false);
 
-const $animate = [fade(175), slideLeft(175)];
+const $animate = [fade(175), fromLeft(175)];
 const DrawerDisplay = (props) => {
     const { "inline-desktop": inline, key, onclose, ...rest } = props;
 
@@ -1670,11 +1772,12 @@ const Drawer = (props) => {
         {},
         show === true
             ? [
+                  ,
                   Element(DrawerDisplay, {
                       key: key,
                       $animate: $animate,
                       ...rest,
-                      onclose: close,
+                      onclose: () => close(false),
                   }),
               ]
             : [],
@@ -1747,7 +1850,7 @@ const optionList = (items) =>
     });
 
 const Select = (props) => {
-    let { options, children, selected, ...rest } = props;
+    let { options, children, slot, ...rest } = props;
 
     const items = calc(() => {
         if (Array.isArray(options) === true) {
@@ -1756,16 +1859,17 @@ const Select = (props) => {
         return children
     }, [children, options]);
     const selectedItem = calc(() => {
-        if (selected !== undefined) {
-            const Selected = selected;
+        if (slot.selected !== undefined) {
             return Element(
                 "div",
                 { slot: "selected" },
-                Element(Selected, {}),
+                Element(Slot, {
+                    "*render": slot.selected,
+                }),
             )
         }
         return null
-    }, [selected]);
+    }, [slot.selected]);
 
     return Element(
         "ws-select",
@@ -1893,12 +1997,14 @@ const Table = (props) => {
             {},
             data?.length > 0
                 ? [
+                      ,
                       Element(Slot, {
                           "*render": header,
                           keys: keys,
                       }),
                   ]
                 : [
+                      ,
                       Element(
                           "tr",
                           {},
@@ -1943,4 +2049,4 @@ const ToggleLabel = (props) => {
 const Tooltip = (props) =>
     Element("ws-tooltip", { ...props });
 
-export { Adorn, Alert, App, Button, Card, CircleSpinner, Confirm, ControlLabel, DataTable, Details, Dialog, DialogStack, Drawer, Element, Flex, S$1 as Fragment, Grid, HexSpinner, Icon, Link, Modal, Optgroup, Option, Popover, Progress, Prompt, Select, Slot, Surface, Table, Text, Titlebar, Toast, Toaster, ToggleLabel, Tooltip, Transitions, __eachAlt, animation, calc, W$2 as cloneElement, X$1 as createContext, drop, fade, getInputValue, getVersion, localState, lock, N$1 as memo, options, pop, l$3 as preactOptions, proxy, randKey, randName, ref, R$1 as renderApp, K as renderString, sharedState, slideBottom, slideLeft, slideTop, snapshot, spinCW, style, subscribe, suspend, x$2 as useContext, h$2 as useEffect, T$2 as useMemo, d$2 as useState, visible, wsEsm as wind };
+export { Adorn, Alert, App, Button, Card, CircleSpinner, Confirm, ControlLabel, DataTable, Details, Dialog, DialogStack, Drawer, Element, Flex, S$1 as Fragment, Grid, HexSpinner, Icon, Link, Modal, Optgroup, Option, Popover, Progress, Prompt, Select, Slot, Surface, Table, Text, Titlebar, Toast, Toaster, ToggleLabel, Tooltip, Transitions, __eachAlt, animation, calc, W$2 as cloneElement, X$1 as createContext, drop, fade, fromBottom, fromLeft, fromRight, fromTop, getInputValue, getVersion, localState, lock, N$1 as memo, options, pop, l$3 as preactOptions, proxy, randKey, randName, ref, R$1 as renderApp, K as renderString, sharedState, slideBottom, slideTop, snapshot, spinCW, style, subscribe, suspend, x$2 as useContext, h$2 as useEffect, T$2 as useMemo, d$2 as useState, visible, wsEsm as wind };