@axel669/windstorm 0.5.0-beta.1 → 0.5.1

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