@axel669/windstorm 0.4.6 → 0.5.0-beta.0

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 (3) hide show
  1. package/dist/browser.js +97 -3
  2. package/dist/module.js +97 -3
  3. package/package.json +37 -29
package/dist/browser.js CHANGED
@@ -1,10 +1,12 @@
1
1
  var ws = (function () {
2
2
  'use strict';
3
3
 
4
- var componentStyles = [{"name":"baseline","style":"@import url(https://fonts.googleapis.com/css2?family=Share+Tech+Mono:wght@400;500;600;700;800;900&family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap);@import url(https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css);*{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}"},{"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:bootstrap-icons!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;content:\"\";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}"},{"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":"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":"notification","style":"ws-notification{--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-notification::after,ws-notification::before{content:\"\";position:relative;display:block;min-width:20px;background-color:var(--color);z-index:-1}ws-notification::before{grid-area:start}ws-notification::after{grid-area:end}ws-notification>:where([ws-x~=\"[$notif-text]\"]){display:flex;flex-direction:row;align-items:center;padding:4px;background-color:var(--background-element)}ws-notification>:where([ws-x~=\"[$start]\"]){grid-area:start}ws-notification>:where([ws-x~=\"[$end]\"]){grid-area:end}ws-notification>:where([ws-x~=\"[$start]\"],[ws-x~=\"[$end]\"]),ws-notification>:where([ws-x~=\"[$start]\"],[ws-x~=\"[$end]\"]) button{--ripple-color:var(--ripple-invert);--color:var(--text-color-invert);color:var(--text-color-invert)}"},{"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":"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:bootstrap-icons!important;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:\"\"}label:where([ws-x~=\"@@toggle\"])>input[type=radio]:checked::after{content:\"\"}label:where([ws-x~=\"@@toggle\"])>input[type=checkbox]::after{content:\"\"}label:where([ws-x~=\"@@toggle\"])>input[type=checkbox]:checked::after{content:\"\"}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:\"\";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}"}];
4
+ var componentStyles = [{"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}"}];
5
5
 
6
6
  var coreMacros = `--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: {$}";`;
7
7
 
8
+ var libInfo = {"version":"0.5.0","fontVersion":"1"};
9
+
8
10
  /**
9
11
  @type {{
10
12
  attr: string
@@ -12,10 +14,12 @@ var ws = (function () {
12
14
  */
13
15
  const config = {
14
16
  attr: "ws-x",
17
+ origin: "https://wind-cdn.axel669.net",
15
18
  // Using a window variable is not the coolest method, but when a script is
16
19
  // loaded in an async tag, it's much more difficult to get the tag details
17
20
  // to pull out config in a cooler way.
18
- ...window.windstormConfig
21
+ ...window.windstormConfig,
22
+ ...libInfo,
19
23
  };
20
24
 
21
25
  // The component styles and yml file are both loaded using custom rollup
@@ -35,7 +39,11 @@ var ws = (function () {
35
39
  for (const { name, style } of componentStyles) {
36
40
  const st = document.createElement("style");
37
41
  st.setAttribute("ws-name", name);
38
- st.innerHTML = style.replaceAll("ws-x", config.attr);
42
+ st.innerHTML =
43
+ style
44
+ .replaceAll("ws-x", config.attr)
45
+ .replaceAll("__origin", config.origin)
46
+ .replaceAll("__fonts", config.fontVersion);
39
47
  head.append(st);
40
48
  }
41
49
 
@@ -55,6 +63,10 @@ var ws = (function () {
55
63
  --grid: $="row" [disp grid] [gr.flow {$}];
56
64
  --hide: [disp none];
57
65
  --invis: [vis hidden];
66
+ --self-cross: "align-self: {$}";
67
+ --sticky: "position: sticky" "top: 0px" "z-index: +1";
68
+ --gr\\.area: "grid-template-areas: {$}";
69
+ --area: "grid-area: {$}";
58
70
  --\\$adorn: [disp flex] [fl-center] [p 4px];
59
71
  --\\$outline: [b.w 1px] [b.c @color];
60
72
  --\\$color: [@color {$}] [@ripple-base-color {$}-ripple];
@@ -393,6 +405,88 @@ div::after {
393
405
  }
394
406
  );
395
407
 
408
+ /**
409
+ The CSS for detecting the icon parts was way too complex and didn't work in a
410
+ lot of cases, so I have opted for a second mutation observer since those have
411
+ proven to be very performant and allow me far more flexbility in how the icon
412
+ fonts can be loaded and managed (it might also be less code overall than the
413
+ horrible css was).
414
+ */
415
+ const iconRanges = [["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"]];
416
+ const findPart = (name) => {
417
+ let index = 0;
418
+ for (const [end, start] of iconRanges) {
419
+ index += 1;
420
+ if (name > start && name < end) {
421
+ return index
422
+ }
423
+ if (name > end) {
424
+ return null
425
+ }
426
+ }
427
+ return null
428
+ };
429
+ const loadedFonts = {};
430
+ const loadFont = (part) => {
431
+ const key = part.toString();
432
+ if (loadedFonts[key] !== undefined) {
433
+ return
434
+ }
435
+ loadedFonts[key] = new FontFace(
436
+ `TablerIcons${part}`,
437
+ `url(${config.origin}/${config.fontVersion}/tabler-3.23.0-part${part}.woff)`
438
+ );
439
+ document.fonts.add(loadedFonts[key]);
440
+ loadedFonts[key].load();
441
+ };
442
+ const processNode$1 = (node) => {
443
+ if (node.tagName.toLowerCase() !== "ws-icon") {
444
+ return
445
+ }
446
+ const iconName = node.dataset.icon ?? null;
447
+ if (iconName === null) { return }
448
+
449
+ const part = findPart(iconName);
450
+ if (part === null) { return }
451
+
452
+ loadFont(part);
453
+ node.style.setProperty("--icon-font", `TablerIcons${part}`);
454
+ };
455
+ const handlers = {
456
+ attributes(record) {
457
+ processNode$1(record.target);
458
+ },
459
+ childList(record) {
460
+ const added = [...record.addedNodes];
461
+ const nodes =
462
+ added
463
+ .map(node => {
464
+ if (node.tagName === undefined) {
465
+ return []
466
+ }
467
+ return [node, ...node.querySelectorAll("ws-icon")]
468
+ })
469
+ .flat();
470
+ nodes.forEach(processNode$1);
471
+ }
472
+ };
473
+ const iconObserver = new MutationObserver(
474
+ (changes) => {
475
+ for (const change of changes) {
476
+ handlers[change.type](change);
477
+ }
478
+ }
479
+ );
480
+ iconObserver.observe(
481
+ document.body,
482
+ {
483
+ subtree: true,
484
+ attributes: true,
485
+ childList: true,
486
+ attributeFilter: ["data-icon"]
487
+ }
488
+ );
489
+
396
490
  const formatPart = (key, value) => {
397
491
  if (key.startsWith("@@") === true) {
398
492
  if (value === true) {
package/dist/module.js CHANGED
@@ -1,7 +1,9 @@
1
- var componentStyles = [{"name":"baseline","style":"@import url(https://fonts.googleapis.com/css2?family=Share+Tech+Mono:wght@400;500;600;700;800;900&family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap);@import url(https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css);*{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}"},{"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:bootstrap-icons!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;content:\"\";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}"},{"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":"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":"notification","style":"ws-notification{--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-notification::after,ws-notification::before{content:\"\";position:relative;display:block;min-width:20px;background-color:var(--color);z-index:-1}ws-notification::before{grid-area:start}ws-notification::after{grid-area:end}ws-notification>:where([ws-x~=\"[$notif-text]\"]){display:flex;flex-direction:row;align-items:center;padding:4px;background-color:var(--background-element)}ws-notification>:where([ws-x~=\"[$start]\"]){grid-area:start}ws-notification>:where([ws-x~=\"[$end]\"]){grid-area:end}ws-notification>:where([ws-x~=\"[$start]\"],[ws-x~=\"[$end]\"]),ws-notification>:where([ws-x~=\"[$start]\"],[ws-x~=\"[$end]\"]) button{--ripple-color:var(--ripple-invert);--color:var(--text-color-invert);color:var(--text-color-invert)}"},{"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":"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:bootstrap-icons!important;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:\"\"}label:where([ws-x~=\"@@toggle\"])>input[type=radio]:checked::after{content:\"\"}label:where([ws-x~=\"@@toggle\"])>input[type=checkbox]::after{content:\"\"}label:where([ws-x~=\"@@toggle\"])>input[type=checkbox]:checked::after{content:\"\"}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:\"\";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}"}];
1
+ var componentStyles = [{"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}"}];
2
2
 
3
3
  var coreMacros = `--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: {$}";`;
4
4
 
5
+ var libInfo = {"version":"0.5.0","fontVersion":"1"};
6
+
5
7
  /**
6
8
  @type {{
7
9
  attr: string
@@ -9,10 +11,12 @@ var coreMacros = `--b: "border: {$}";--b\\.c: "border-color: {$}";--b\\.s: "bord
9
11
  */
10
12
  const config = {
11
13
  attr: "ws-x",
14
+ origin: "https://wind-cdn.axel669.net",
12
15
  // Using a window variable is not the coolest method, but when a script is
13
16
  // loaded in an async tag, it's much more difficult to get the tag details
14
17
  // to pull out config in a cooler way.
15
- ...window.windstormConfig
18
+ ...window.windstormConfig,
19
+ ...libInfo,
16
20
  };
17
21
 
18
22
  // The component styles and yml file are both loaded using custom rollup
@@ -32,7 +36,11 @@ componentStyles.push({
32
36
  for (const { name, style } of componentStyles) {
33
37
  const st = document.createElement("style");
34
38
  st.setAttribute("ws-name", name);
35
- st.innerHTML = style.replaceAll("ws-x", config.attr);
39
+ st.innerHTML =
40
+ style
41
+ .replaceAll("ws-x", config.attr)
42
+ .replaceAll("__origin", config.origin)
43
+ .replaceAll("__fonts", config.fontVersion);
36
44
  head.append(st);
37
45
  }
38
46
 
@@ -52,6 +60,10 @@ baseMacros.innerHTML = `.ws-style {
52
60
  --grid: $="row" [disp grid] [gr.flow {$}];
53
61
  --hide: [disp none];
54
62
  --invis: [vis hidden];
63
+ --self-cross: "align-self: {$}";
64
+ --sticky: "position: sticky" "top: 0px" "z-index: +1";
65
+ --gr\\.area: "grid-template-areas: {$}";
66
+ --area: "grid-area: {$}";
55
67
  --\\$adorn: [disp flex] [fl-center] [p 4px];
56
68
  --\\$outline: [b.w 1px] [b.c @color];
57
69
  --\\$color: [@color {$}] [@ripple-base-color {$}-ripple];
@@ -390,6 +402,88 @@ customElements.define(
390
402
  }
391
403
  );
392
404
 
405
+ /**
406
+ The CSS for detecting the icon parts was way too complex and didn't work in a
407
+ lot of cases, so I have opted for a second mutation observer since those have
408
+ proven to be very performant and allow me far more flexbility in how the icon
409
+ fonts can be loaded and managed (it might also be less code overall than the
410
+ horrible css was).
411
+ */
412
+ const iconRanges = [["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"]];
413
+ const findPart = (name) => {
414
+ let index = 0;
415
+ for (const [end, start] of iconRanges) {
416
+ index += 1;
417
+ if (name > start && name < end) {
418
+ return index
419
+ }
420
+ if (name > end) {
421
+ return null
422
+ }
423
+ }
424
+ return null
425
+ };
426
+ const loadedFonts = {};
427
+ const loadFont = (part) => {
428
+ const key = part.toString();
429
+ if (loadedFonts[key] !== undefined) {
430
+ return
431
+ }
432
+ loadedFonts[key] = new FontFace(
433
+ `TablerIcons${part}`,
434
+ `url(${config.origin}/${config.fontVersion}/tabler-3.23.0-part${part}.woff)`
435
+ );
436
+ document.fonts.add(loadedFonts[key]);
437
+ loadedFonts[key].load();
438
+ };
439
+ const processNode$1 = (node) => {
440
+ if (node.tagName.toLowerCase() !== "ws-icon") {
441
+ return
442
+ }
443
+ const iconName = node.dataset.icon ?? null;
444
+ if (iconName === null) { return }
445
+
446
+ const part = findPart(iconName);
447
+ if (part === null) { return }
448
+
449
+ loadFont(part);
450
+ node.style.setProperty("--icon-font", `TablerIcons${part}`);
451
+ };
452
+ const handlers = {
453
+ attributes(record) {
454
+ processNode$1(record.target);
455
+ },
456
+ childList(record) {
457
+ const added = [...record.addedNodes];
458
+ const nodes =
459
+ added
460
+ .map(node => {
461
+ if (node.tagName === undefined) {
462
+ return []
463
+ }
464
+ return [node, ...node.querySelectorAll("ws-icon")]
465
+ })
466
+ .flat();
467
+ nodes.forEach(processNode$1);
468
+ }
469
+ };
470
+ const iconObserver = new MutationObserver(
471
+ (changes) => {
472
+ for (const change of changes) {
473
+ handlers[change.type](change);
474
+ }
475
+ }
476
+ );
477
+ iconObserver.observe(
478
+ document.body,
479
+ {
480
+ subtree: true,
481
+ attributes: true,
482
+ childList: true,
483
+ attributeFilter: ["data-icon"]
484
+ }
485
+ );
486
+
393
487
  const formatPart = (key, value) => {
394
488
  if (key.startsWith("@@") === true) {
395
489
  if (value === true) {
package/package.json CHANGED
@@ -1,29 +1,37 @@
1
- {
2
- "name": "@axel669/windstorm",
3
- "version": "0.4.6",
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
- },
13
- "keywords": [],
14
- "author": "",
15
- "license": "MIT",
16
- "devDependencies": {
17
- "@axel669/ipsen": "0.4.1",
18
- "csso": "^5.0.5",
19
- "fs-jetpack": "^5.1.0",
20
- "js-yaml": "^4.1.0",
21
- "rollup": "^3.19.0",
22
- "rollup-plugin-delete": "^2.0.0",
23
- "rollup-plugin-sass": "^1.12.19",
24
- "sass": "^1.59.3"
25
- },
26
- "files": [
27
- "dist"
28
- ]
29
- }
1
+ {
2
+ "name": "@axel669/windstorm",
3
+ "version": "0.5.0-beta.0",
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
+ "csso": "^5.0.5",
20
+ "fs-jetpack": "^5.1.0",
21
+ "js-yaml": "^4.1.0",
22
+ "rollup": "^3.19.0",
23
+ "rollup-plugin-delete": "^2.0.0",
24
+ "rollup-plugin-sass": "^1.12.19",
25
+ "sass": "^1.59.3"
26
+ },
27
+ "files": [
28
+ "dist"
29
+ ],
30
+ "windSettings": {
31
+ "fontVersion": "1"
32
+ },
33
+ "exports": {
34
+ ".": "./dist/module.js",
35
+ "./browser": "./dist/browser.js"
36
+ }
37
+ }